/* 👇 --------------- LAYOUTS.BLADE.PHP ---------------------- 👇 */
/*
 _           ___  __    __  _____   _   _   _____
| |         /   | \ \  / / /  _  \ | | | | |_   _|
| |        / /| |  \ \/ /  | | | | | | | |   | |
| |       / / | |   \  /   | | | | | | | |   | |
| |___   / /  | |   / /    | |_| | | |_| |   | |
|_____| /_/   |_|  /_/     \_____/ \_____/   |_| */

.container_header01 {
    background-color: #2c2c2c;
    width: 100%;
    height: 2em;
}
.info_header01 {
    grid-column: 1;
}
.vide_header01 {
    grid-column: 2;
}
.header01 {
    width: 100%;
    height: 2em;
    display: grid;
    grid-template-columns: 3 (1fr);
}
.header_connexion {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row-reverse;
    position: relative;
}
.login_header01 {
    grid-column: 3;
}
.link {
    position: absolute;
    left: 50%;
}
.link:hover {
    color: white;
}
.container_header02 {
    background-color: #cde2fd;
    width: 100%;
    height: 7em;
}
.header02 {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 30% 1fr;
}
.logo_header02 {
    grid-column: 1;
}
.logo_header {
    width: 40%;
    height: auto;
}
.menu_header02 {
    grid-column: 2;
    display: grid;
    grid-template-columns: 3 (1fr);
}
.menu_header02_mediamax480 {
    display: none;
    grid-column: 2;
}
.menuheader02_APP {
    display: none;
}
.menu_home {
    grid-column: 1;
    transition: 0.2s;
}
.menu_listeCertif {
    grid-column: 2;
    transition: 0.2s;
}
.menu_contact {
    grid-column: 3;
    transition: 0.2s;
}
.menu_home:hover,
.menu_listeCertif:hover,
.menu_contact:hover {
    background-color: #86b3fc;
    color: white;
}
.link_accueil,
.link_certif,
.link_contact {
    text-decoration: none;
    color: #000;
    display: block;
    width: 100%;
    height: 100%;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 25px;
    text-align: center;
}
.menu_home:hover .link_accueil,
.menu_listeCertif:hover .link_certif,
.menu_contact:hover .link_contact {
    text-decoration: none;
    color: white;
    display: block;
}
.body1 {
    background-color: white;
    width: 100%;
    height: 100%;
}
.footer0 {
    background-color: #000b10;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='540' height='450' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.03'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/svg%3E");
    width: 100%;
    height: 8em;
    float: left;
}
.background_footer0 {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 20% 1fr 20%;
}
.logo_footer {
    grid-column: 1;
    position: relative;
}
.logo_SpeedFooter {
    width: 70%;
    height: auto;
    position: absolute;
    top: 5%;
    left: 5%;
}
.menu_footer {
    grid-column: 2;
    position: relative;
}
.info_footer {
    grid-column: 3;
    position: relative;
}

/* 👆 --------------- LAYOUTS.BLADE.PHP ---------------------- 👆 */

/* 👇 --------------- WELCOME.BLADE.PHP ---------------------- 👇 */
/*
 _          __  _____   _       _____   _____       ___  ___   _____
| |        / / | ____| | |     /  ___| /  _  \     /   |/   | | ____|
| |  __   / /  | |__   | |     | |     | | | |    / /|   /| | | |__
| | /  | / /   |  __|  | |     | |     | | | |   / / |__/ | | |  __|
| |/   |/ /    | |___  | |___  | |___  | |_| |  / /       | | | |___
|___/|___/     |_____| |_____| \_____| \_____/ /_/        |_| |_____|  */

.background_infoWelcome {
    background-image: linear-gradient(#66a6ff 0%, #c2e9fb 100%);
    width: 100%;
    height: 25em;
}
.info_welcome {
    width: 100%;
    height: 100%;
    position: relative;
}
.titre_welcome {
    width: 700px;
    height: 100px;
    position: absolute;
    top: 10%;
    left: 5%;
    color: white;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    letter-spacing: -0.05em;
    font-size: 50px;
}
.QuiSommesNous {
    width: 700px;
    height: 100px;
    position: absolute;
    top: 35%;
    left: 5%;
    color: white;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    letter-spacing: -0.05em;
    font-size: 25px;
    text-align: justify;
}
.QuiSommes_button {
    position: absolute;
    top: 85%;
    left: 50%;
}
.decor01 {
    width: 100%;
    height: 10em;
}
.principal_welcome {
    width: 100%;
    height: 27em;
    display: grid;
    grid-template-columns: 25% 1fr;
}
.PourquoiChoisir {
    grid-column: 2;
    position: relative;
}
.titre_PourquoiChoisir {
    width: 700px;
    height: 90%;
    position: absolute;
    top: 10%;
    left: 5%;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    letter-spacing: -0.05em;
    font-size: 40px;
    text-align: justify;
    color: #4169a1;
}
.info_PourquoiChoisir {
    width: 90%;
    height: 60%;
    position: absolute;
    top: 30%;
    left: 5%;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    letter-spacing: -0.05em;
    font-size: 20px;
    text-align: justify;
    color: #4169a1;
}
.background_UnCertif {
    background-image: linear-gradient(
        -225deg,
        #ffe29f 0%,
        #fc7869 38%,
        #ff205f 100%
    );
    width: 100%;
    height: 30em;
}
.UnCertif {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 25% 1fr;
    overflow: hidden;
}
.UnCertif_Content {
    grid-column: 2;
    position: relative;
}
.titre_UnCertif {
    width: 90%;
    height: 100px;
    position: absolute;
    top: 10%;
    left: 5%;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    letter-spacing: -0.05em;
    font-size: 40px;
    text-align: justify;
    color: white;
}
.info_UnCertif {
    width: 90%;
    height: 250px;
    position: absolute;
    top: 30%;
    left: 5%;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    letter-spacing: -0.05em;
    font-size: 20px;
    text-align: justify;
    color: white;
}
.SelectionCertif {
    background-color: white;
    width: 100%;
    height: 70em;
    display: grid;
    grid-template-columns: 25% 1fr;
    grid-template-rows: 12em 1fr;
}
.TableauSelection {
    grid-column: 2;
    grid-row: 1;
    position: relative;
}
.titre_SelectionCertif {
    width: 1000px;
    height: 250px;
    position: absolute;
    top: 50%;
    left: 5%;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    letter-spacing: -0.05em;
    font-size: 40px;
    text-align: justify;
    color: #4169a1;
}
.tableauTop3 {
    grid-column: 2;
    grid-row: 2;
    display: flex;
}

.tableauTop3_div {
    width: 300px;
    height: 40em;
    margin-left: 3%;
    display: grid;
    grid-template-rows: 30% 1fr 1fr 1fr 1fr;
    border-radius: 20px;
    filter: drop-shadow(0px 1px 1px #000000);
}
.titre_prixTableau {
    background-color: #4169a1;
    grid-row: 1;
    padding: 5%;
    position: relative;
}
.prix_tableau {
    background-color: rgb(240, 54, 54);
    width: 80%;
    height: 45%;
    position: absolute;
    bottom: 5%;
    left: 10%;
    padding: 3%;
}
.marqueTableau {
    background-color: #cfcfcf;
    grid-row: 2;
}
.validationTableau {
    background-color: #ffffff;
    grid-row: 3;
}
.barre_verteTableau {
    background-color: #cfcfcf;
    grid-row: 4;
    position: relative;
}
.boutonTableau {
    background-color: #ffffff;
    grid-row: 5;
    border-radius: 0px 0px 20px 20px;
    position: relative;
}
.background_InfoSupCertif {
    width: 100%;
    height: 1500px;
    position: absolute;
    z-index: 10000;
    top: 700px;
}
.InfoSupCertif {
    background-color: white;
    width: 400px;
    height: 1500px;
    border: solid 5px #4169a1;
    position: absolute;
    display: grid;
    grid-template-rows: 50% 1fr;
    left: -10%;
}
.BienChoisir {
    grid-template-rows: 1;
    position: relative;
}
.TousNosCertif {
    grid-template-rows: 2;
    position: relative;
    justify-content: space-evenly;
}
.boutton_TousNosCertif {
    position: absolute;
    top: 85%;
    left: 25%;
}
.NousSommes {
    width: 100%;
    height: 40em;
    display: grid;
    grid-template-columns: 50% 50%;
}
.info_NousSommes {
    grid-column: 1;
    position: relative;
}
.titre_NousSommes {
    width: 700px;
    height: 100px;
    top: 8%;
    left: 5%;
    position: absolute;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    letter-spacing: -0.05em;
    font-size: 40px;
    text-align: justify;
    color: #4169a1;
}
.text_NousSommes {
    text-align: justify;
    width: 90%;
    height: 175px;
    position: absolute;
    top: 25%;
    left: 5%;
    color: #4169a1;
    font-size: 20px;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
}
.horaire_NousSommes {
    text-align: justify;
    width: 300px;
    height: 100px;
    position: absolute;
    top: 80%;
    left: 40%;
    color: #4169a1;
    font-size: 20px;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
}
.carte_NousSommes {
    grid-column: 2;
    position: relative;
}
.NousContacter {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 50% 50%;
}
.background_NousContacter {
    background-image: linear-gradient(#ffffff 0%, #66a6ff 100%);
    width: 100%;
    height: 40em;
}
.formulaire_NousContacter {
    width: 100%;
    height: 100%;
    grid-column: 1;
    position: relative;
}
.nom_formualireRappel,
.prenom_formualireRappel,
.tel_formualireRappel {
    width: 45%;
    height: 3em;
    border-radius: 10px;
    padding-left: 5%;
    color: #4169a1;
    font-size: 17px;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    position: absolute;
    border: none;
}
.nom_formualireRappel {
    top: 10%;
    left: 5%;
}
.prenom_formualireRappel {
    top: 10%;
    left: 52%;
}
.tel_formualireRappel {
    top: 25%;
    left: 5%;
}
.com_formualireRappel {
    width: 92%;
    height: 10em;
    top: 40%;
    left: 5%;
    border-radius: 10px;
    padding-left: 5%;
    padding-top: 0%;
    color: #4169a1;
    font-size: 17px;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    position: absolute;
    border: none;
}
.boutton_formualireRappel {
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    position: absolute;
    top: 80%;
    left: 40%;
}
.info_NousContacter {
    grid-column: 2;
    position: relative;
}
.titre_InfoNousContacter {
    width: 700px;
    height: 100px;
    top: 10%;
    left: 5%;
    position: absolute;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    letter-spacing: -0.05em;
    font-size: 40px;
    text-align: justify;
    color: #4169a1;
}
.text_NousCOntacter {
    text-align: justify;
    width: 90%;
    height: 175px;
    position: absolute;
    top: 25%;
    left: 5%;
    color: #4169a1;
    font-size: 20px;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
}

/* 👆 --------------- WELCOME.BLADE.PHP ---------------------- 👆 */

/* 👇 --------------- LISTECERTIFICATS.BLADE.PHP ---------------------- 👇 */
/*
 _       _   _____   _____   _____   _____   _____   _____    _____   _   _____   _   _____       ___   _____   _____
| |     | | /  ___/ |_   _| | ____| /  ___| | ____| |  _  \  |_   _| | | |  ___| | | /  ___|     /   | |_   _| /  ___/
| |     | | | |___    | |   | |__   | |     | |__   | |_| |    | |   | | | |__   | | | |        / /| |   | |   | |___
| |     | | \___  \   | |   |  __|  | |     |  __|  |  _  /    | |   | | |  __|  | | | |       / / | |   | |   \___  \
| |___  | |  ___| |   | |   | |___  | |___  | |___  | | \ \    | |   | | | |     | | | |___   / /  | |   | |    ___| |
|_____| |_| /_____/   |_|   |_____| \_____| |_____| |_|  \_\   |_|   |_| |_|     |_| \_____| /_/   |_|   |_|   /_____/ */

.body_liste {
    width: 100%;
    height: auto;
    position: relative;
}
.popup_filtreCertif {
    width: 500px;
    height: 500px;
    position: fixed;
    top: 12%;
    left: -400px;
    z-index: 10000;
    display: grid;
    grid-template-columns: 1fr 100px;
    transition: 0.5s;
}
.popup_info {
    background-color: #00b5ff;
    grid-column: 1;
    position: relative;
    border-radius: 0px 20px 20px 0px;
}
.popup_buttonClose {
    width: 40px;
    height: auto;
    position: absolute;
    top: 5%;
    right: 5%;
}
.popup_button {
    grid-column: 2;
    position: relative;
}
.popup_buttonImg {
    width: 70px;
    height: auto;
    position: absolute;
    top: 5%;
    left: 10%;
    transition: 0.5s;
}
.popup_buttonImg:hover {
    transform: rotate(360deg);
}
.filtre_certif {
    width: 100%;
    height: 30em;
    margin-top: 3%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.Filtre_Options {
    grid-column: 1;
    display: grid;
    grid-template-rows: repeat(2, 30%) 1fr;
}
.barre_verte_false {
    position: absolute;
    left: 5%;
    top: 60%;
}
.barre_verte_true {
    position: absolute;
    left: 30%;
    top: 60%;
}
.option_validation {
    width: 50%;
    height: auto;
    position: absolute;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    letter-spacing: -0.05em;
    font-size: 20px;
    text-align: justify;
    color: #4169a1;
    top: 55%;
    left: 5%;
}
.option_LogoMarque {
    width: 25%;
    height: auto;
    position: absolute;
}
.Filtre_SelectionCertif {
    grid-column: 2;
}
#comodo {
    position: absolute;
    left: 5%;
    top: 40%;
}
#GeoTrust {
    position: absolute;
    left: 38%;
    top: 40%;
}
#RapidSSL {
    position: absolute;
    left: 70%;
    top: 40%;
}
#Symantec {
    position: absolute;
    left: 5%;
    top: 70%;
}
#Thawte {
    position: absolute;
    left: 38%;
    top: 70%;
}
#TrustSign {
    position: absolute;
    left: 70%;
    top: 70%;
}
#LogoCommodo {
    top: 35%;
    left: 8%;
}
#LogoGeoTrust {
    top: 35%;
    left: 41%;
}
#LogoRapidSSL {
    top: 35%;
    left: 71%;
}
#LogoSymantec {
    top: 65%;
    left: 7%;
}
#LogoThawte {
    top: 65%;
    left: 41%;
}
#LogoTrustSign {
    top: 65%;
    left: 73%;
}
.CertifsSelect {
    width: 100%;
    height: 100%;
    position: relative;
}
.titre_CertifsSelect {
    width: 700px;
    height: 100px;
    position: absolute;
    top: 5%;
    left: 10%;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    letter-spacing: -0.05em;
    font-size: 40px;
    text-align: justify;
    color: #4169a1;
}
.liste_devis {
    background-color: white;
    width: 90%;
    height: 60%;
    position: absolute;
    top: 20%;
    left: 5%;
}
.table {
    width: 70%;
    text-align: center;
}
.tableau_listing_certif {
    width: 100%;
    height: auto;
    margin-top: 5%;
    margin-bottom: 5%;
}
.table_listmediaMAX480 {
    display: none;
}
.td_liste {
    background-color: white;
}

/* 👆 --------------- LISTECERTIFICATS.BLADE.PHP ---------------------- 👆 */
/* 👇 --------------- CONTACT.BLADE.PHP ---------------------- 👇 */
/*
 _____   _____   __   _   _____       ___   _____   _____
/  ___| /  _  \ |  \ | | |_   _|     /   | /  ___| |_   _|
| |     | | | | |   \| |   | |      / /| | | |       | |
| |     | | | | | |\   |   | |     / / | | | |       | |
| |___  | |_| | | | \  |   | |    / /  | | | |___    | |
\_____| \_____/ |_|  \_|   |_|   /_/   |_| \_____|   |_|   */

.background_SectionContact {
    background-image: linear-gradient(#a1c4fd 0%, #c2e9fb 100%);
    width: 100%;
    min-height: 100vh;
}
.sectionContact {
    width: 100%;
    height: 40em;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.formulaire_contact {
    grid-column: 1;
    border-radius: 10px;
    position: relative;
}
.contact_nom {
    width: 42.5%;
    height: 3em;
    top: 10%;
    left: 5%;
    border-radius: 10px;
    padding-left: 5%;
    color: #4169a1;
    font-size: 17px;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    position: absolute;
    border: none;
}
.contact_prenom {
    width: 42.5%;
    height: 3em;
    top: 10%;
    left: 52.5%;
    border-radius: 10px;
    padding-left: 5%;
    color: #4169a1;
    font-size: 17px;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    position: absolute;
    border: none;
}
.contact_email {
    width: 90%;
    height: 3em;
    top: 25%;
    left: 5%;
    border-radius: 10px;
    padding-left: 5%;
    color: #4169a1;
    font-size: 17px;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    position: absolute;
    border: none;
}
.contact_tel {
    width: 42.5%;
    height: 3em;
    top: 40%;
    left: 5%;
    border-radius: 10px;
    padding-left: 5%;
    color: #4169a1;
    font-size: 17px;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    position: absolute;
    border: none;
}
.contact_com {
    width: 90%;
    height: 10em;
    top: 55%;
    left: 5%;
    border-radius: 10px;
    padding-left: 5%;
    padding-top: 3%;
    color: #4169a1;
    font-size: 17px;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    position: absolute;
    border: none;
}
.contact_button {
    position: absolute;
    top: 90%;
    left: 40%;
}
.info_contact {
    grid-column: 2;
    position: relative;
}
.titre_infoContact {
    width: 700px;
    height: 90%;
    position: absolute;
    top: 10%;
    left: 5%;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    letter-spacing: -0.05em;
    font-size: 40px;
    text-align: justify;
    color: white;
}
.info_InfoContact {
    width: 90%;
    height: 60%;
    position: absolute;
    top: 25%;
    left: 5%;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    letter-spacing: -0.05em;
    font-size: 20px;
    text-align: justify;
    color: white;
}

/* 👆 --------------- CONTACT.BLADE.PHP ---------------------- 👆 */
/* 👇 --------------- FORMULAIRE DEVIS.BLADE.PHP ---------------------- 👇 */
/*
 _____   _____   _____        ___  ___   _   _   _           ___   _   _____    _____
|  ___| /  _  \ |  _  \      /   |/   | | | | | | |         /   | | | |  _  \  | ____|
| |__   | | | | | |_| |     / /|   /| | | | | | | |        / /| | | | | |_| |  | |__
|  __|  | | | | |  _  /    / / |__/ | | | | | | | |       / / | | | | |  _  /  |  __|
| |     | |_| | | | \ \   / /       | | | |_| | | |___   / /  | | | | | | \ \  | |___
|_|     \_____/ |_|  \_\ /_/        |_| \_____/ |_____| /_/   |_| |_| |_|  \_\ |_____| */

.background_FormulaireDevis {
    background-image: linear-gradient(#a1c4fd 0%, #c2e9fb 100%);
    width: 100%;
    min-height: 100vh;
    position: relative;
}
.demande_devis {
    width: 100%;
    height: 30em;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.form_info_devis {
    grid-column: 1;
    position: relative;
    margin-top: 5%;
}
.devis_nom {
    width: 42.5%;
    height: 3em;
    top: 5%;
    left: 5%;
    border-radius: 10px;
    padding-left: 5%;
    color: #4169a1;
    font-size: 17px;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    position: absolute;
    border: none;
}
.devis_prenom {
    width: 42.5%;
    height: 3em;
    top: 5%;
    left: 52.5%;
    border-radius: 10px;
    padding-left: 5%;
    color: #4169a1;
    font-size: 17px;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    position: absolute;
    border: none;
}
.devis_email {
    width: 90%;
    height: 3em;
    top: 20%;
    left: 5%;
    border-radius: 10px;
    padding-left: 5%;
    color: #4169a1;
    font-size: 17px;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    position: absolute;
    border: none;
}
.devis_tel {
    width: 42.5%;
    height: 3em;
    top: 35%;
    left: 5%;
    border-radius: 10px;
    padding-left: 5%;
    color: #4169a1;
    font-size: 17px;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    position: absolute;
    border: none;
}
.devis_adresse {
    width: 90%;
    height: 3em;
    top: 50%;
    left: 5%;
    border-radius: 10px;
    padding-left: 5%;
    color: #4169a1;
    font-size: 17px;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    position: absolute;
    border: none;
}
.devis_codePostale {
    width: 42.5%;
    height: 3em;
    top: 65%;
    left: 5%;
    border-radius: 10px;
    padding-left: 5%;
    color: #4169a1;
    font-size: 17px;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    position: absolute;
    border: none;
}
.devis_ville {
    width: 42.5%;
    height: 3em;
    top: 65%;
    left: 52.5%;
    border-radius: 10px;
    padding-left: 5%;
    color: #4169a1;
    font-size: 17px;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    position: absolute;
    border: none;
}
.devis_nombre {
    width: 90%;
    height: 3em;
    top: 80%;
    left: 5%;
    padding-right: 2%;
    border-radius: 10px;
    padding-left: 5%;
    color: #4169a1;
    font-size: 17px;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    position: absolute;
    border: none;
}
.devis_comm {
    width: 90%;
    height: 6em;
    top: 95%;
    left: 5%;
    padding-top: 2%;
    border-radius: 10px;
    padding-left: 5%;
    color: #4169a1;
    font-size: 17px;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    position: absolute;
    border: none;
}
.devis_button {
    top: 125%;
    left: 40%;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    position: absolute;
}
.form_info_certif {
    grid-column: 2;
    padding: 1%;
    margin-top: 5%;
}

/* 👆 --------------- FORMULAIRE DEVIS.BLADE.PHP ---------------------- 👆 */
/* 👇 --------------- ADMIN.BLADE.PHP ---------------------- 👇 */
/*   ___   _____       ___  ___   _   __   _
    /   | |  _  \     /   |/   | | | |  \ | |
   / /| | | | | |    / /|   /| | | | |   \| |
  / / | | | | | |   / / |__/ | | | | | |\   |
 / /  | | | |_| |  / /       | | | | | | \  |
/_/   |_| |_____/ /_/        |_| |_| |_|  \_|  */

.nav_admin {
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(240)'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23479bff'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='540' height='450' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.1'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    height: 55em;
    padding-top: 5%;
}
.menu_admin {
    background-color: #ffffff00;
    height: 45em;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 20% 1fr;
    padding: 1%;
}
.choix_menu_admin {
    background-color: #232939;
    grid-column: 1;
    border-radius: 10px 0px 0px 10px;
    -moz-box-shadow: 0px 10px 5px 0px #656565;
    -webkit-box-shadow: 0px 10px 5px 0px #656565;
    -o-box-shadow: 0px 10px 5px 0px #656565;
    box-shadow: 0px 10px 5px 0px #656565;
}
.bouton_menu_general,
.bouton_menu_user,
.bouton_menu_reglage,
.bouton_menu_api,
.bouton_menu_devis {
    width: 100%;
    height: 10%;
    margin-top: 5%;
    text-align: center;
    vertical-align: middle;
}
.bouton_menu_general:hover,
.bouton_menu_user:hover,
.bouton_menu_reglage:hover,
.bouton_menu_api:hover,
.bouton_menu_devis:hover {
    background-color: #363c4d;
}
.info_admin {
    background-color: #d5e8ff;
    grid-column: 2;
    border-radius: 0px 10px 10px 0px;
    -moz-box-shadow: 0px 10px 5px 0px #656565;
    -webkit-box-shadow: 0px 10px 5px 0px #656565;
    -o-box-shadow: 0px 10px 5px 0px #656565;
    box-shadow: 0px 10px 5px 0px #656565;
    overflow-y: scroll;
}
.info_general {
    width: 100%;
    height: auto;
}
.body_general_admin {
    height: auto;
    margin: 5%;
}
.info_user {
    width: 100%;
    height: auto;
}
.info_reglage {
    width: 100%;
    height: auto;
}
.info_api {
    width: 100%;
    height: auto;
}
.info_devis {
    width: 100%;
    height: auto;
}

/* 👆 --------------- ADMIN.BLADE.PHP ---------------------- 👆 */

body {
    overflow-x: hidden;
    width: 100%;
    height: 100%;
}

header {
    width: 100%;
    top: 0em;
    z-index: 10000;
}

.logo_head {
    width: 50%;
    height: auto;
}

.nav_header {
    grid-column: 2;
}

.header2 {
    background-color: #1b77cc;
    width: 25%;
    height: 3em;
    top: 0em;
    transition: 1s;
    position: absolute;
    margin: 0 38%;
    position: absolute;
    z-index: 10000;
}

.header_div {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 30% 1fr 20%;
}

.nav_login {
    width: 100%;
    height: 100%;
    float: right;
    display: flex;
    flex-direction: row-reverse;
}

.nav-link {
    color: white;
    margin-top: -1%;
}

.button_group {
    width: 80%;
    height: 100%;
    display: flex;
    align-items: center;
    margin-left: 8%;
}

.button_nav {
    color: black;
    font-size: 25px;
    margin-right: 2%;
    border-right: solid 2px;
    padding-right: 2%;
}

.info_logo {
    width: 100%;
    height: 30em;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.image_info {
    padding: 5%;
}

#logo_information {
    width: 80%;
    height: auto;
}

.text_info {
    text-align: center;
    padding: 5%;
}

.information {
    font-size: 20px;
    margin-top: 10%;
}

.top_3 {
    background-color: white;
    width: 100%;
    height: 45em;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.top3_info {
    padding: 6%;
    grid-column: 1;
    display: grid;
    grid-template-rows: 40% 1fr;
}

.titre_style {
    text-shadow: 4px 4px 0px #d5d5d5, 7px 7px 0px rgba(0, 0, 0, 0.2);
    color: #2c2c2c;
    font-size: 70px;
}

.top3_tableau {
    grid-column: 2;
    display: grid;
    grid-template-columns: 10% 1fr 3% 1fr 3% 1fr 10%;
    grid-template-rows: 10% 1fr 10%;
}

.tabl1 {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    opacity: 0;
    transform: translateY(-10em);
    grid-template-rows: 30% repeat(3, 1fr) 20%;
    -moz-box-shadow: 0px 10px 5px 0px #656565;
    -webkit-box-shadow: 0px 10px 5px 0px #656565;
    -o-box-shadow: 0px 10px 5px 0px #656565;
    box-shadow: 0px 10px 5px 0px #656565;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}

@keyframes tabl1 {
    from {
        opacity: 0;
        transform: translateY(-10em);
    }
    to {
        opacity: 1;
        transform: translateY(-0em);
    }
}

.table_certif {
    display: flex;
    text-align: center;
    align-items: center;
    vertical-align: middle;
    flex-direction: column;
}

.prix {
    display: box;
    background: #c41b1b;
    padding: 20px;
    color: #fff;
}

.tabl2 {
    background-color: #cc1b1b;
    grid-column: 4;
    grid-row: 2;
    opacity: 0;
    transform: translateY(-10em);
    display: grid;
    grid-template-rows: 30% repeat(3, 1fr) 20%;
    -moz-box-shadow: 0px 10px 5px 0px #656565;
    -webkit-box-shadow: 0px 10px 5px 0px #656565;
    -o-box-shadow: 0px 10px 5px 0px #656565;
    box-shadow: 0px 10px 5px 0px #656565;
    animation-duration: 1.5s;
    animation-delay: 0.3s;
    animation-fill-mode: forwards;
}

@keyframes tabl2 {
    from {
        opacity: 0;
        transform: translateY(-10em);
    }
    to {
        opacity: 1;
        transform: translateY(0em);
    }
}

.tabl3 {
    background-color: #21cc1b;
    grid-column: 6;
    grid-row: 2;
    opacity: 0;
    transform: translateY(-10em);
    display: grid;
    grid-template-rows: 30% repeat(3, 1fr) 20%;
    -moz-box-shadow: 0px 10px 5px 0px #656565;
    -webkit-box-shadow: 0px 10px 5px 0px #656565;
    -o-box-shadow: 0px 10px 5px 0px #656565;
    box-shadow: 0px 10px 5px 0px #656565;
    animation-duration: 1.5s;
    animation-delay: 0.6s;
    animation-fill-mode: forwards;
}

@keyframes tabl3 {
    from {
        opacity: 0;
        transform: translateY(-10em);
    }
    to {
        opacity: 1;
        transform: translateY(0em);
    }
}

.zonelibre {
    width: 100%;
    height: 50em;
}

.titre_info_ssl {
    font-size: 50px;
}

.text_info_ssl {
    font-size: 18px;
}

.list_top3 {
    grid-column: 2;
    padding-top: 5%;
    padding-left: 15%;
}

.info_certificats {
    background: rgb(196, 217, 255) url(../images/question.png);
    background-position: 100% 50%;
    background-size: 80%;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 5%;
}

.info_certif_img {
    grid-column: 1;
    opacity: 0;
    transform: translateY(-15em);
    animation-fill-mode: forwards;
    animation-duration: 2s;
}

@keyframes info_image {
    from {
        opacity: 0;
        transform: translateY(-15em);
    }
    to {
        opacity: 1;
        transform: translateY(0em);
    }
}

.info_certif_text {
    background-color: rgba(255, 255, 255, 0.89);
    width: 70%;
    grid-column: 2;
    margin-left: 25%;
    padding: 5%;
    text-align: center;
    font-size: 20px;
    opacity: 0;
    transform: translateX(15em);
    animation-fill-mode: forwards;
    animation-duration: 2s;
}

@keyframes info_text {
    from {
        opacity: 0;
        transform: translateX(15em);
    }
    to {
        opacity: 1;
        transform: translateX(0em);
    }
}

.titre_info_certif {
    grid-row: 1;
    grid-column: 1 / 5;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
        sans-serif;
    text-align: center;
}

.text_info_certif {
    grid-row: 2;
    grid-column: 1 / 3;
    padding: 3%;
}

.image_info_certif {
    grid-row: 2;
    grid-column: 3 / 5;
    padding: 3%;
}

.image_info_ssl {
    width: 90%;
    height: auto;
}

.info_ssl {
    width: 90%;
    height: auto;
}

.choix_certif {
    width: 100%;
    height: auto;
    padding: 1%;
    display: flex;
}

.img_info_choix {
    width: 80%;
    height: auto;
}

.text_choix {
    font-size: 30px;
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
        sans-serif;
    margin-top: 5%;
}

.form_filtre {
    display: grid;
    height: 20em;
    width: 100%;
    grid-template-rows: 30% 1fr;
}

.filtre_logo {
    width: 100%;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.logo_filtre {
    display: flex;
    align-items: center;
    flex-direction: row;
}

.info_filtre {
    grid-row: 2;
    padding: 5%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.barre_verte {
    width: 100%;
    height: auto;
    display: bloc;
    margin-top: 5%;
}

.intro_liste_certif {
    background: #ffffff url(../images/banner_blue.jpg);
    background-repeat: no-repeat;
    width: 100%;
    height: 50em;
    display: grid;
    margin-bottom: 5em;
    grid-template-columns: repeat(2, 1fr);
    -moz-box-shadow: 0px 10px 5px 0px #656565;
    -webkit-box-shadow: 0px 10px 5px 0px #656565;
    -o-box-shadow: 0px 10px 5px 0px #656565;
    box-shadow: 0px 10px 5px 0px #656565;
}

.img_choix {
    grid-column: 1 / 2;
}

.info_choix {
    grid-column: 2;
    padding: 15%;
}

.titre_info_choix {
    text-shadow: 3px 3px 0px #ffffff, 6px 6px 0px rgba(0, 0, 0, 0.2);
    color: #2c2c2c;
    font-size: 60px;
}

.intro_demande_devis {
    background-color: #ffffff;

    width: 100%;
    height: 40em;
    -moz-box-shadow: 0px 10px 5px 0px #656565;
    -webkit-box-shadow: 0px 10px 5px 0px #656565;
    -o-box-shadow: 0px 10px 5px 0px #656565;
    box-shadow: 0px 10px 5px 0px #656565;
    display: flex;
}

.form_login {
    -moz-box-shadow: 0px 10px 5px 0px #656565;
    -webkit-box-shadow: 0px 10px 5px 0px #656565;
    -o-box-shadow: 0px 10px 5px 0px #656565;
    box-shadow: 0px 10px 5px 0px #656565;
}

.img_contact {
    position: fixed;
    bottom: 0%;
    right: 0%;
    width: 30%;
    height: auto;
    transition: 1s;
    animation-name: image_contact;
    animation-duration: 2s;
}

@keyframes image_contact {
    from {
        opacity: 0;
        transform: translateX(10em);
    }
    to {
        opacity: 1;
        transform: translateX(0em);
    }
}

.form_contact {
    width: 100%;
    height: auto;
    display: flex;
    margin-bottom: 5%;
}

.form_demi {
    display: flex;
}

.titre_contact {
    color: white;
    font-size: 70px;
    text-shadow: #e7f6ff 0 -1px 0, #4de8ff 1px 1px 0, #00b5ff 2px 2px 0,
        #007ec2 3px 3px 0, #007cb2 4px 4px 0, #00606e 5px 5px 0,
        #333 5px 5px 10px;
    color: #ffffff;
}

.body_login {
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(240)'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23479bff'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='540' height='450' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.1'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    height: auto;
    padding: 10%;
}

.body_register {
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(240)'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23479bff'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='540' height='450' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.1'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    height: auto;
    padding: 8%;
}

.sectionRappel {
    width: 100%;
    height: auto;
    padding-top: 5%;
    padding-bottom: 5%;
    padding-right: 20%;
    padding-left: 10%;
    display: flex;
    flex-direction: row-reverse;
}

.info_rappel {
    width: 40%;
    height: auto;
    margin-right: 7%;
}

.CommentBienChoisir {
    background-color: #66a6ff;
    width: 100%;
    height: 25em;
}

.Info_CommentChoisir {
    width: 100%;
    height: 100%;
    position: relative;
}

.titre_CommentBienChoisir {
    width: 700px;
    height: 100px;
    position: absolute;
    top: 15%;
    left: 5%;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    letter-spacing: -0.05em;
    font-size: 25px;
    text-align: justify;
    color: #ffffff;
}

.info_CommentBienChoisir {
    width: 90%;
    height: 10em;
    top: 25%;
    left: 5%;
    position: absolute;
    font-family: source-sans-pro, Source Sans Pro, Helvetica, Arial, sans-serif,
        sans-serif;
    letter-spacing: -0.05em;
    font-size: 17px;
    text-align: justify;
    color: #ffffff;
}

.method_background {
    background-image: linear-gradient(-225deg, #fc7869 0%, #ff205f 100%);
    grid-row: 1;
    position: relative;
}

.info_option {
    grid-row: 2;
    position: relative;
}

#info_option_marque {
    height: 8em;
}

.img_barreGrise {
    width: 12%;
    height: auto;
    position: absolute;
    top: 48%;
    left: 10%;
}
.img_barreVerte {
    width: 12%;
    height: auto;
    position: absolute;
    top: 48%;
    left: 35%;
}

.Background_CertifsSelect {
    width: 100%;
    height: 30em;
}