/* Charset */
@charset "UTF-8";

/* Palette de couleurs du logo:
 - Vert (utilisé dans les favicons): #01da2e
 - Vert flashy: #04dc2c
 - Vert: #38c048
 - Vert kaki: #648448
 - Gris: #646468
 - Gris foncé: #5c6464
*/

/* Police d'écriture */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kalam&display=swap');
/* Raleway */ /* Kalam */

/* Conteneur de la page entière */
body {
    /* Supression des marges de pages */
    margin: 0;
    /* Fixer la police d'écriture */
    font-family: Raleway, Roboto, sans-serif;
    /* Prendre toute la place de la page pour pouvoir la partager */
    box-sizing: border-box;
    height: 150vh;
    /* Image de font */
    background-image: url(/images/background.jpg);
    /* Fixer le font quand l'utilisteur descends */
    background-attachment: fixed;
    /* Supprimer les répétitions du font */
    background-repeat: no-repeat;
    /* Fixer l'arrière plan sans changement de taille */
    background-size: cover;
    /* Positionner l'image de font */
    background-position: 75%;
    /* Rendre impossible le scroll horizontal */
    overflow-x: hidden;
}

/* Hero de la page */
#hero {
    /* Prendre de l'espace défini automatiquement */
    height: auto;
    /* Marge du bas */
    margin-bottom: 30px;
}

/* Navbar */
nav {
    /* Laisser de l'espace aux éléments */
    padding: 20px;
    /* Arrondi sur les bords du bas uniquement */
    border-radius: 0 0 20px 20px;
    /* Laisser de l'espace sur les cotés */
    margin-left: 50px;
    margin-right: 50px;
    /* Supprimer les nouvelles lignes entre éléments */
    display: flex;
    /* Aligner tous les éléments de chaque coté */
    justify-content: space-between;
}

/* Images de la navbar */
nav img {
    /* Supression de la sélection des images */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Logos d'acceuil */
#nav-home {
    /* Supression du texte du lien */
    font-size: 0;
    /* Font blanc derrière les icônes */
    /* 9F est là pour avoir de l'opacitée */
    background-color: #ffffffAF;
    background-image: linear-gradient(125deg, #ffffff9F, #dddddd9F);
    /* Espace autour des icônes pour voir le blanc */
    padding: 5px;
    /* Arrondi de tout les bords */
    border-radius: 15px;
    /* Espace entre chaque division */
    margin-right: 20px;
}

/* Icônes/logos de la navbar */
#nav-icons {
    /* Prendre le minimum d'espace sur la navbar (même si c'est "max-content") */
    width: max-content;
    /* Aligner au centre les éléments */
    display: flex;
    align-items: center;
}

#nav-verifs {
    /* Mettre tout sur la même ligne */
    display: flex;
    flex-direction: row;
    max-width: 250px;
    /* Espace autour des icônes pour voir le blanc */
    padding: 5px;
    /* Arrondi de tout les bords */
    border-radius: 15px;
    /* Espace entre chaque division */
    margin-right: 20px;
}

/* Logos de vérifications */
#nav-verifs img {
    /* Taille du logo */
    width: auto;
    height: 80px;
}

/* Chaque icône de la navbar */
#nav-icons img {
    /* Margin pour laisser l'espace entre chaque élément */
    margin: 5px;
    margin-left: 10px;
    margin-right: 10px;
}

/* Logo Qualibat */
#nav-qualibat {
    background-color: white;
    border-radius: 10px;
    padding: 5px;
}

/* Logo */
#nav-icon {
    height: 50px;
    padding-top: 10px;
}

/* Nom du logo */
#nav-name {
    height: 25px;
    display: flex;
}

/* Slogan du logo */
#nav-text {
    /* Hauteur du slogan */
    height: 35px;
}

/* Textes du logo */
#nav-texts {
    /* Tout sur la même ligne */
    float: right;
    /* Espace vide en haut */
    padding-top: 15px;
}

/* Animation de la bannière */
@keyframes banner_anim {
    0% { margin-top: 500vh; }
    60% { margin-top: 80vh; }
    100% { margin-top: 5%; }
}

/* Logo PlusQuePro */
#nav-plusquepro {
    height: 140px;
}

/* Bandeau */
#banner {
    /* Autre police d'écriture */
    font-family: Kalam, Arial, serif;
    /* Agrandir la taille de la police par 100% */
    font-size: 100%;
    /* Alignement de texte */
    text-align: left;
    /* Font blanc derrière les icônes */
    /* 88 est là pour avoir de l'opacitée */
    background-color: #ffffff88;
    background-image: linear-gradient(125deg, #ffffff88, #dddddd88);
    /* Marge du haut */
    margin-top: 5%;
    margin-bottom: 5%;
    /* Marge sur les cotés */
    margin-right: 50px;
    margin-left: 50px;
    /* Bords arrondis */
    border-radius: 20px;
    /* Espace entre chaque question */
    padding: 20px;
    /* Laisser de l'espace sur les cotés */
    padding-right: 10%;
    padding-left: 10%;
}

/* Bannières ou utiliser l'animation */
.banneranim {
    /* Animation d'entrée */
    animation: 3s ease-out 0s 1 banner_anim;
}

/* Espace vide */
#blank {
    height: 50px;
}

/* Questions */
#questions {
    /* Centrer le tout */
    display: flex;
    justify-content: center;
}

/* Chaque question */
#questions h3 {
    /* Font blanc derrière les icônes */
    /* 9F est là pour avoir de l'opacitée */
    background-color: #ffffffAF;
    background-image: linear-gradient(125deg, #ffffff9F, #dddddd9F);
    /* Changer la couleur du texte */
    color: #5c6464;
    /* Marge autour de chaque question */
    margin: 10px;
    margin-right: 20px;
    margin-left: 20px;
    /* Espace blanc autour du texte */
    padding: 10px;
    /* Bords arrondis */
    border-radius: 10px;
    /* Centrer chaque question dans la boite */
    text-align: center;
}

/* Réponse */
#reponse {
    /* Font transparent */
    background: transparent;
    /* Changer la couleur du texte */
    color: #04dc2c;
    /* Centrer chaque question dans la boite */
    text-align: center;
}

/* Réponse en gros */
#reponse span {
    /* Police plus grande */
    font-size: 150%;
}

/* Réponse en gras */
#reponse b {
    /* Couleur vert flashy */
    color: #5c6464;
}

/* Image de la "réponse" */
#reponse span img {
    height: 35px;
    width: auto;
}

/* Etiquettes dans la liste de la section A propos */
#banner ul span {
    /* Font vert */
    background: #38c048;
    /* Bords arrondis */
    border-radius: 8px;
    /* Espace autour */
    padding: 2px;
    /* Taille de la police rétrécit */
    font-size: 80%;
    /* Couleur du texte */
    color: white;
}

/* Conteneur du bouton de contact */
#contact, #simulateur {
    /* Centrer l'élément en longueur et largeur */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5%;
    /* Aligner au centre les éléments */
    display: flex;
    align-items: center;
}

/* Formulaire de contact */
#form-contact {
    /* Prévoir une marge de bas */
    margin-bottom: 5%;
}

/* Bouton de contact */
#contact-button, #simulateur-button {
    /* Font vert comme sur le logo */
    /* NOTE: 7F est ajouté pour avoir de l'opacitée */
    background-color: #38c0487F;
    background-image: linear-gradient(125deg, #38f0487F, #38c0487F);
    /* Marge autour du lien */
    margin: 5px;
    margin-top: -40px;
    margin-left: 10px;
    margin-right: 10px;
    /* Garder l'élément le plus petit possible */
    max-width: max-content;
    /* Changer la couleur du texte */
    color: white;
    /* Espace autour des icônes pour voir le blanc */
    padding: 20px;
    /* Arrondi de tout les bords */
    border-radius: 15px;
    /* Grandir la taille du texte */
    font-size: 125%;
    /* Supprimer le sous-lignage par défaut */
    text-decoration: none;
    /* Mettre en gras le texte */
    font-weight: 600;
}

/* Surlignage de l'addresse */
#address-highlight {
    /* Couleur verte de police */
    color: #38c048;
}

/* Aucune nouvelle lignes automatiques pour cette classe */
.no-new-line { margin-top: -30px; }

/* Entrées de données utilisateur dans les formulaires */
form input, form textarea {
    /* Forcer la police d'écriture */
    font-family: Kalam, Roboto, sans-serif;
    /* Espace entre chaque élément */
    margin: 10px;
    /* Taille de la police d'écriture */
    font-size: 75%;
    /* Espace en plus dans chaque boite de texte */
    padding: 5px;
    /* Bords arrondis */
    border-radius: 10px;
    /* Suppression de la bordure par défaut */
    border: none;
    /* Bords de couleur grise et taille de la bordure */
    outline:1px solid #646468;
    /* Couleur de texte grise */
    color: #646468;
    /* Font de couleur gris léger */
    background-color: #eeeeee;
    /* Supprimer la fonction pour changer la taille de la boite de texte */
    resize: none;
}

/* Images des formulaires */
form img {
    /* Taille */
    width: 30px;
}

/* Classe de la bannière quand sur la page de contact */
.banner-contact {
    /* Supprimer le font */
    background-color: transparent !important;
    background-image: none !important;
    /* Marge sur les cotés */
    margin-right: 20px !important;
    margin-left: 20px !important;
}

/* Moyens de contact */
#contact-means {
    /* ALignement du texte à gauche */
    text-align: left;
    /* Marge gauche */
    margin-left: 5%;
    margin-top: 1%;
    /* Casser les mots sur plusieurs lignes */
    word-break: break-word;
}

/* Forumlaire sur le coté */
#contact-right {
    /* Mettre sur le coté */
    float: right;
    display: flex;
    flex-direction: column;
    position: relative;
    /* Bien positionner le div */
    top: -340px;
    /* Agrandir la police */
    font-size: 100%;
}

/* Liens */
#links {
    /* Font blanc derrière les icônes */
    /* AF est là pour avoir de l'opacitée */
    background-color: #ffffffAF;
    background-image: linear-gradient(125deg, #ffffffAF, #ddddddAF);
    /* Laisser de l'espace au font blanc */
    display: flex;
    height: 8px;
    border-radius: 5px;
    margin-top: 10px;
    padding-bottom: 30px;
}

/* Chacun des liens */
#links a {
    text-decoration: none;
    color: #646468;
    font-size: 100%;
}

/* Séparations */
#links .sep {
    background-color: #646468;
    height: 25px;
    width: 2px;
    border-radius: 2px;
}

/* Mise en évidence de la page actuelle */
#links a[selected] {
    background: #38c048;
    color: #ffffff;
    padding: 5px;
    border-radius: 3px;
    height: 15px;
    margin-left: 5px;
    margin-right: 5px;
}

/* Galerie */
#galerie {
    display: flex;
    justify-content: center;
    overflow-x: hidden;
}

/* Chaque image de la galerie */
#galerie img {
    padding: 10px;
    animation: linear infinite alternate;
    animation-name: deplacement-images;
    animation-duration: 10s;
    position: relative;
}

/* Chacun des avis */
#avis div {
    /* Couleur de font et de la police */
    /* 9F est là pour avoir de l'opacitée */
    background-color: #ffffffAF;
    background-image: linear-gradient(125deg, #ffffff9F, #dddddd9F);
    /* Bords arrondis */
    border-radius: 20px;
    /* Espace sur les cotés */
    padding: 10px;
    padding-left: 15px;
    /* Affichage */
    display: flex;
    /* Espace entre chaque avis */
    margin: 30px;
}

/* Chaque élément de chaque avis */
#avis div * {
    /* Marge */
    margin: 10px;
}

#avis img {
    overflow-y: hidden;
    height: 20px;
    object-fit: cover;
    object-position: left;
}

#avis h3 {
    min-width: 250px;
    max-width: 250px;
}

/* Texte "avis" */
#avis-texte {
    /* Texte centré */
    text-align: center;
}

/* Liens sur mobile uniquement */
.mobile-only-link {
    display: none;
}

/* Image de coche */
.img-check {
    border: 1px solid grey;
    background: white;
    border-radius: 5px;
}

/* Liste de coches */
.checklist {
    /* Marge à gauche */
    margin-left: 20px;
}

/* Chaque texte des listes de coche */
.checklist p {
    /* Supprimer la nouvelle ligne automatique */
    display: inline;
}

/* Centrer ce qui doit l'être */
.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Aligner a droite le texte à coté de l'image */
#onright {
    position: relative;
    width: 50%;
    left: 50%;
    top: -300px;
    font-size: 125%;
}

/* Le contenu qu'il y a après le #onright */
#onright-after {
    top: -200px;
    position: relative;
}

#photovoltaique-img {
    height: 40vw;
}

#partenaires img {
    margin: 20px;
}

/* Conteneur du bouton de contact dans les textes */
.contact {
    /* Centrer l'élément en longueur et largeur */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5%;
    /* Aligner au centre les éléments */
    display: flex;
    align-items: center;
}

/* Bouton de contact dans les textes */
.contact-button {
    /* Forcer la plice d'écriture vers celle utilisée dans la barre de naviguation */
    font-family: Raleway, Roboto, sans-serif;
    /* Font vert comme sur le logo */
    /* NOTE: 7F est ajouté pour avoir de l'opacitée */
    background-color: #38c0487F;
    background-image: linear-gradient(125deg, #38f0487F, #38c0487F);
    /* Marge autour du lien */
    margin: 5px;
    margin-top: -35px;
    margin-left: 10px;
    margin-right: 10px;
    /* Garder l'élément le plus petit possible */
    max-width: max-content;
    /* Changer la couleur du texte */
    color: white;
    /* Espace autour des icônes pour voir le blanc */
    padding: 20px;
    /* Arrondi de tout les bords */
    border-radius: 15px;
    /* Grandir la taille du texte */
    font-size: 300%;
    /* Supprimer le sous-lignage par défaut */
    text-decoration: none;
}

/* Image isolation */
#isolation-img {
    position: relative;
    float: right;
    top: -280px;
    left: 100px;
}

/* Image domotique */
#elecdomotique-img {
    position: relative;
    float: right;
    top: 35px;
}

/* Image revetements */
#revetements-img {
    float: right;
}

/* Texte revetements */
#revetements-text {
    position: relative;
    float: right;
    max-width: 60%;
    top: 50px;
}

/* Image cuisine */
#cuisine-img {
    float: right;
    margin-top: 50px;
}

/* Contenu à droite de la page d'accueil */
.homepage-content {
    float: right;
}

/* Paragraphes des questions sur la page d'acceuil */
#homepage-questions p {
    width: 400px;
}

/* Questions sur la page d'acceuil */
#homepage-questions {
    width: 600px;
    margin: 0 auto;
}

/* Widget de fin de page PlusQuePro */
#plusquepro-footer {
    width: 100%;
    height: 500px;
    border: none;
    display: block;
    margin-left: 25vw;
}

/* Version mobile */
@media screen and (max-width: 1000px) {  /* Le 800px est là en attendant la version mobile horizontale */
    /* Logo */
    #nav-icon {
        /* Désactiver l'espace sur les cotés */
        padding: 0;
        height: 75px;
        padding-top: 0;
    }

    #nav-icons img {
        margin-left: 5px;
        margin-right: 5px;
    }

    /* Textes du logo */
    #nav-texts {
        /* Cacher complètement le texte */
        display: none;
    }

    /* Textes des logos de qualité */
    #nav-verifs h4 {
        /* Cacher le texte */
        display: none;
    }

    /* Logos de qualité */
    #nav-verifs img {
        width: auto;
    }

    /* Navbar */
    nav {
        /* Prendre moins d'espaces sur les cotés */
        margin-right: 10px;
        margin-left: 10px;
    }

    /* Bannière */
    #banner {
        /* Prendre moins d'espaces sur les cotés */
        margin-right: 10px;
        margin-left: 10px;
        top: 400px;
        position: absolute;
    }

    /* Moyens de contact */
    #contact-means {
        /* Marges gauche et droite */
        margin-left: 10px;
        margin-right: 10px;
        /* Taille de la police d'écriture */
        font-size: 90%;
    }

    /* Conteneur du bouton de contact */
    #contact, #simulateur {
        display: none;
    }

    /* Conteneur de la page entière */
    body {
        height: 230vh;
    }

    /* Liens */
    #links {
        height: unset;
        flex-direction: column;
        margin-right: 10px;
        padding-left: 5px;
    }

    /* Séparations des liens */
    #links .sep {
        margin: 2px;
        display: none;
    }

    /* Marge des liens */
    #links a {
        margin: 2px;
        margin-left: 20px;
    }

    /* Marge du lien sélectionné */
    #links a[selected] {
        margin-left: 15px;
    }

    /* Liens sur mobile uniquement */
    .mobile-only-link {
        display: block;
        color: #38c048;
    }

    /* Mettre en valeur les images */
    #banner img {
        width: 100%;
    }

    #contact-means img {
        width: 30px;
    }

    /* Remettre les coches comme il faut */
    .img-check {
        width: 20px !important;
    }

    /* Réduire les logos des partenaires */
    #partenaires img {
        max-height: 70px;
        max-width: 100%;
        width: unset;
    }

    /* Remettre la bannière vers le haut (obligatoire, sinon un espace vide se créée) */
    #banner {
        position: relative;
        top: 0;
    }

    /* Fixer la galerie en bas de page (car sinon elle remonte) */
    #galerie {
        position: absolute;
        max-width: 101vw;
    }

    /* Aligner a droite le texte à coté de l'image */
    #onright {
        position: unset;
        width: unset;
        font-size: 100%;
    }

    /* Le contenu qu'il y a après le #onright */
    #onright-after {
        position: unset;
    }

    /* Image du diagramme */
    #photovoltaique-img {
        width: unset !important;
        height: 25vh;
        max-width: 100vw;
        position: relative;
        right: 40px;
    }

    /* Conteneur du bouton de contact dans les textes */
    .contact {
        margin-top: 25%;
    }

    /* Boutton de contact dans les textes */
    .contact-button {
        font-size: 150%;
    }

    /* Liens dans les paragraphes de textes */
    #banner a {
        overflow-wrap: break-word;
    }

    /* Image isolation */
    #isolation-img {
        position: unset;
        float: unset;
        left: unset;
    }

    /* Image domotique */
    #elecdomotique-img {
        position: unset;
        float: unset;
    }

    /* Image revetements */
    #revetements-img {
        float: unset;
    }

    /* Texte revetements */
    #revetements-text {
        position: unset;
        float: unset;
        max-width: unset;
    }

    /* Image cuisine */
    #cuisine-img {
        float: unset;
        margin-top: unset;
    }

    /* Contenu à droite de la page d'accueil */
    .homepage-content {
        float: unset;
    }

    /* Paragraphes des questions sur la page d'acceuil */
    #homepage-questions p {
        width: unset;
    }

    /* Questions sur la page d'acceuil */
    #homepage-questions {
        width: unset;
    }

    /* Images des questions sur la page d'acceuil */
    #homepage-questions img {
        width: 75px;
        display: block;
        margin: 0 auto;
    }

    /* Images "grosses" des questions sur la page d'acceuil */
    .homepage-big-image {
        width: 50px !important;
    }

    /* Avis */
    #avis div {
        display: unset;
    }

    /* Widget de fin de page PlusQuePro */
    #plusquepro-footer {
        height: 600px;
        margin-left: 15px;
    }
}

/* Version écran réduit */
@media screen and (max-width: 1100px) {
    #nav-texts {
        display: none;
    }

    #contact-right {
        float: unset;
        display: block;
        position: unset;
        top: 0;
    }

    /* Widget de fin de page PlusQuePro */
    #plusquepro-footer {
        margin-left: 0;
    }
}