/*
Theme Name: Solideo - Thème de base
Theme URI: https://lina-keith.fr/
Author: KEITH Lina
Author URI: https://lina-keith.fr/
Description: Thème de Solideo
Requires at least: WordPress 5.0
Version: 1.0
*/

/*font de Solideo et de Garage solidaire*/
@import url('plein.css');
@import url('amulya.css');
@import url('synonym.css');

/*Header nav Solideo*/
:root {
    --color-primary: #EFEFEF;
    --color-secondary: #8E822B;
    --color-tertiary: #283570;
    --color-quaternary: #DCDD35;
}

html,body {
    margin: 0;
    padding: 0;

    scroll-behavior: smooth;
    height: 100%;
}

body.no-scroll {
    overflow: hidden;
    height: 100%;
}

.contenu-page {
    min-height: 100vh;
}

.erreur-404 {
    display: flex;
    justify-content: center;
}

.header-solideo {
    width: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
}

.nav-solideo {
    background-color: var(--color-primary) !important;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;

    max-width: 800px;
    margin: 0 auto;
    padding: 15px 35px;
    gap: 125px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-gauche,
.nav-centre,
.nav-droite {
  display: flex;
  align-items: center;
}

.nav-liens-solideo {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
    gap: 125px;
}

.nav-liens-solideo a {
    text-decoration: none;
    font-family: 'Plein-Bold';
    font-size: 20px;
    color: var(--color-tertiary);
    transition: ease-in-out 0.3s;
}

.nav-liens-solideo a:hover {
    color: var(--color-secondary);
}

.btn-connexion-admin svg {
    fill: var(--color-tertiary);
    width: 40px;
    transition: ease-in-out 0.3s;
}

.btn-connexion-admin svg:hover {
    fill: var(--color-secondary);
}

img.logo-solideo-nav {
    width: 175px;
}

header.header img {
    width: 150px;
}

.burger-menu-solideo, 
.burger-menu-contenue-solideo {
    display: none;
}

/*nav responsive*/
@media (max-width: 850px) {
    .nav-centre, .nav-droite {
        display: none;
    }

    .nav-solideo {
        max-width: 350px;
        gap: 75px;
    }

    img.logo-solideo-nav {
        width: 145px;
    }

    /*affichage burger menu*/
    .burger-menu-solideo {
        display: flex;
        flex-direction: column;
        gap: 5px;
        background: none;
        border: none;
    }

    .barre-menu-solideo {
        transition: all 0.3s ease-in-out;
    }

    .burger-menu-solideo svg {
        width: 30px;
        height: auto;
        fill: var(--color-tertiary);
    }

    .barre-menu-solideo:hover {
        fill: var(--color-secondary);
    }

    .fermer-menu-solideo {
        display: none;
    }

    .burger-menu-contenue-solideo .fermer-menu-solideo {
        display: block !important;
        position: absolute;
        top: 75px;  
        right: 30px;  
        width: 25px;  
        height: auto;
        cursor: pointer;
        fill: var(--color-tertiary);
        transition: fill 0.3s ease-in-out;
    }

    .burger-menu-contenue-solideo .fermer-menu-solideo:hover {
        fill: var(--color-secondary);
    }

    .burger-menu-solideo.open .barre-menu-solideo {
        display: none;
    }

    .burger-menu-contenue-solideo {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background-color: var(--color-primary);
        padding: 80px 20px 40px 20px;
        z-index: 1000;

        transform: translateY(-100%); 
        transition: transform 0.5s ease-in-out;
    }

    .burger-menu-contenue-solideo.active {
        display: block;
        transform: translateY(0);
    }

    .burger-menu-contenue-solideo ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .burger-menu-contenue-solideo a {
        text-decoration: none;
        font-family: 'Plein-Bold';
        font-size: 20px;
        color: var(--color-tertiary);
        transition: ease-in-out 0.3s;
    }

    .burger-menu-contenue-solideo a:hover {
        color: var(--color-secondary);
    }

    #logo-solideo-burger-menu img {
        width: 100px;
    }
}

/*Footer Solideo*/

.footer-solideo {
    background-color: var(--color-primary);
    padding: 40px 20px;
    position: relative;
    overflow: hidden; 
}

.footer-solideo-grid {
    position: relative;
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 20px;

    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    z-index: 1;
}


/*ligne 1*/
.footer-solideo-logo {
    grid-column: 1;
    grid-row: 1;
}

/*liens de navigation du footer solideo*/
.footer-nav-solideo {
    grid-column: 2;
    grid-row: 1;
    font-family: 'Synonym-Medium';
    list-style: none;
    gap: 10px;
}

.footer-nav-liens-solideo {
    list-style: none;
}

.footer-nav-solideo a {
    text-decoration: none;
    color: var(--color-tertiary);
    transition: ease-in-out 0.3s;
}

.footer-nav-solideo a:hover {
    color: var(--color-secondary);
}

.footer-btn-don-solideo {
    grid-column: 3;
    grid-row: 1;
    margin-right: 50px;
    justify-self: end;
}

/*ligne 2*/
.footer-bas-solideo {
    grid-column: 1 / -1;
    grid-row: 2;

    display: flex;
    justify-content: space-between;
    align-items: center;

    font-family: 'Plein-medium';
    font-size: 15px;
}

/*Liens mentiens légales et politique de confidentialité*/
.footer-légaux-solideo {
    display: flex;
    gap: 40px;
    margin-right: 10px;
}

.footer-légaux-solideo a {
    color: var(--color-secondary);
    transition: ease-in-out 0.3s;
}

.footer-légaux-solideo a:hover {
    color: var(--color-quaternary);
}

.logo-solideo-footer-img {
    width: 135px;
}

#copy-solideo {
    color: var(--color-tertiary);
}

/*Bouton de don*/

.footer-btn-don {
    padding: 10px 20px;
    border: solid var(--color-quaternary) 3px;
    border-radius: 30px;
    font-family: 'Plein-Bold';
    font-size: 20px;
    cursor: pointer;
    transition: ease-in-out 0.3s;
}

.footer-btn-don:hover {
    background-color: var(--color-quaternary);
}

.footer-btn-don a {
    text-decoration: none;
    color: var(--color-tertiary);
}

/*decoration du footer solideo*/
.footer-deco-solideo {
    position: absolute;
    right: -2%;
    bottom: 35%;
    transform: translateY(50%);

    height: auto;
    z-index: 0;

    stroke: var(--color-tertiary);
}

.footer-deco-svg-solideo {
    width: 225px;
    height: auto;
}

/* Footer solideo responsive */
@media (max-width: 700px) {

    .footer-bas-solideo {
        font-size: 12px;
    }

    .logo-solideo-footer-img {
        width: 85px;
    }

    .footer-légaux-solideo {
        gap: 10px;
    }

    .footer-légaux-solideo a {
        color: var(--color-secondary);
    }

    .footer-btn-don {
        font-size: 17px;
    }

    .footer-deco-solideo {
        bottom: 25%;
    }

    .footer-deco-svg-solideo {
        width: 150px;
        height: auto;
    }
}

@media (max-width: 480px) {

    .footer-nav-solideo {
        font-size: 10px;
    }

    .footer-bas-solideo {
        font-size: 10px;
    }

    .logo-solideo-footer-img {
        width: 65px;
    }

    .footer-légaux-solideo {
        gap: 10px;
    }

    .footer-légaux-solideo a {
        color: var(--color-secondary);
    }

    .footer-btn-don {
        font-size: 14px;
        padding: 5px 5px;
        border: solid var(--color-quaternary) 2px;
    }

    .footer-deco-solideo {
        bottom: 25%;
    }

    .footer-deco-svg-solideo {
        width: 150px;
        height: auto;
    }
}

/* Page d'accueil Solideo */

/*section image mise en avant*/
.image-en-avant-solideo {
    z-index: 0;
    margin-top: -110px;
    width: 100%;
    height: 750px;

    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

.overlay-card-solideo {
    position: absolute;
    top: 425px;
    left: 30%;
    transform: translate(-50%, -50%);
    z-index: 1;

    display: flex;
    justify-content: start;
    flex-direction: column;
}

#overlay-card-contenu {
    background-color: var(--color-primary);
    max-width: 350px;
    height: auto;
    padding: 25px;
    border-radius: 25px;
}

#overlay-card-contenu h1 {
    font-family: 'Plein-Bold';
    margin: 0px;
    font-size: 25px;
    color: var(--color-secondary);
}

#overlay-card-contenu p {
    font-family: 'Plein-Medium';
    height: 50px;
    font-size: 15px;
    color: var(--color-tertiary);
}

.btn-savoir-plus {
    width: fit-content;
    margin-top: 10px;
    padding: 10px 20px;
    border-radius: 25px;
    background-color: var(--color-quaternary);
    color: var(--color-tertiary);
    font-family: 'Plein-Bold';
    font-size: 17px;
    text-decoration: none;
    transition: ease-in-out 0.3s;

    display: flex;
    align-items: center;
    gap: 20px;
}

.btn-savoir-plus:hover {
    background-color: var(--color-tertiary);
    color: var(--color-quaternary);

}

.flèche-btn-svg {
    fill: var(--color-tertiary);
    width: 17px;
    transition: ease-in-out 0.3s;
}

.btn-savoir-plus:hover .flèche-btn-svg {
    fill: var(--color-quaternary);
    transform: translateX(5px);
}

/*Nos services*/
.services-solideo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin-top: 150px;
}

.services-solideo h1 {
    font-family: 'Plein-Bold';
    font-size: 35px;
    color: var(--color-secondary);
    margin-bottom: 50px;
}

.cards-services-solideo {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-bottom: 200px;
}

.card-service-solideo {
    width: 350px;
    height: 415px;

    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
}

.card-service-contenu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 275px;

    background-color: var(--color-primary);
    border-radius: 25px;
    padding: 25px;

    max-height: 350px;
}

.card-image-wrapper {
    width: 275px;
    height: 180px;
}

.card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.card-service-contenu h2 {
    font-family: 'Plein-Bold';
    font-size: 20px;
    color: var(--color-secondary);
    margin: 10px 0px;
}

.card-service-contenu p {
    font-family: 'synonym-Medium';
    font-size: 17px;
    display: block;
    width: 100%;
    max-width: 275px;

    display: -webkit-box;        
    -webkit-line-clamp: 3;       
    -webkit-box-orient: vertical;
    overflow: hidden;            
    text-overflow: ellipsis;     
    word-wrap: break-word;       

    justify-content: center;
    text-align: center;
    color: var(--color-tertiary);
}

.card-service-solideo a {
    width: 285px;
    margin-top: 10px;
    padding: 10px 20px;
    border-radius: 25px;
    background-color: var(--color-quaternary);
    color: var(--color-tertiary);
    font-family: 'Plein-Bold';
    font-size: 17px;
    text-decoration: none;
    transition: ease-in-out 0.3s;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.btn-decouvrir:hover {
    background-color: var(--color-tertiary);
    color: var(--color-quaternary);

}

.flèche-découvrir-svg {
    fill: var(--color-tertiary);
    width: 17px;
    transition: ease-in-out 0.3s;
}

.btn-decouvrir:hover .flèche-découvrir-svg {
    fill: var(--color-quaternary);
    transform: translateX(5px);
}

/*deco services*/
.deco-services {
    position: absolute;
    top: 1150px;
    left: 2%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.deco-services-svg {
    width: 550px;
    height: auto;
    stroke: var(--color-secondary);
}

/*section à propos solideo*/
.a-propos-solideo {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    background-color: var(--color-quaternary);

    gap: 75px;
    width: 100%;
    height: auto;
    margin-bottom: 150px;
}

.a-propos-image {
    margin-top: 75px;
    margin-bottom: 75px;
    margin: 25px;
}

.a-propos-image img {
    width: 550px;
    height: auto;
    object-fit: cover;
    border-radius: 25px;
}

.a-propos-contenu{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    max-width: 450px;
    margin: 25px;
}

.a-propos-contenu h2{
    font-family: 'Plein-Bold';
    font-size: 25px;
    color: var(--color-tertiary);
    margin: 0px;
}

.a-propos-contenu p {
    font-family: 'synonym-Medium';
    font-size: 17px;
    color: var(--color-tertiary);
}

.partenaires-solideo {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    margin-top: 150px;
    margin-bottom: 150px;
}

.partenaires-solideo h2 {
    font-family: 'Plein-Bold';
    font-size: 25px;
    align-self: flex-end;
    width: fit-content;
    color: var(--color-primary);
    background-color: var(--color-quaternary);
    padding: 10px 20px;
    border-radius: 30px;
    margin: 0px;
    margin-right: 50px;
    margin-bottom: 25px;
}

.partenaires-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-self: flex-end;

    margin-top: 50px;
    margin-bottom: 25px;
    gap: 40px;
} 

.partenaires-images img {
    width: 275px;
    height: auto;
    object-fit: contain;
}

.partenaires-deco {
    position: absolute;
    bottom: -175px; 
    left: 10%;
    transform: translateX(-50%);
    stroke: var(--color-tertiary);
    z-index: -1;
}

.partenaires-deco-svg {
    width: 400px;
    height: auto;
}

/*Page responsive page d'accueil Solideo*/

@media (max-width: 1500px) {
    .partenaires-deco {
        left: 13%;
    }
}

@media (max-width: 1300px) {
    .partenaires-deco {
        left: 15%;
    }
}

@media (max-width: 1050px) {
    .a-propos-solideo {
        flex-direction: column;
        gap: 25px;
    }

    .a-propos-contenu {
        align-items: center;
    }

    .a-propos-contenu {
        text-align: center;
    }

    .partenaires-images img {
        width: 250px;
        height: auto;
        object-fit: contain;
    }

    .partenaires-deco {
        bottom: -175px; 
        left: 15%;
    }

    .partenaires-deco-svg{
        width: 350px;
        height: auto;
    }
}

@media (max-width: 859px) {

    .overlay-card-solideo {
        left: 50%;
        width: 275px;
        align-items: center;
    }

    #overlay-card-contenu {
        max-width: 350px;
        height: 135px;
        align-self: center;
        text-align: center;
    }

    #overlay-card-contenu h1 {
        font-size: 18px;
    }

    #overlay-card-contenu p {
        font-size: 13px;
    }

    #overlay-card-contenu .btn-savoir-plus {
        justify-content: center;
    }

    .services-solideo {
        margin-top: 50px;
    }

    .services-solideo h1 {
        font-size: 25px;
    }

    .deco-services {
        top: 1300px;
        left: 8%;
    }

    .deco-services-svg {
        width: 300px;
        height: auto;
    }

    .a-propos-image img {
        width: 350px;
    }

    .partenaires-solideo {
        margin-top: 20px;
    }

    .partenaires-solideo h2 {
        font-size: 20px;
        margin-right: 0;
        align-self: center;
    }

    .partenaires-images {
        align-self: center;
    }

    .partenaires-images img {
        width: 275px;
        height: auto;
    }

    .partenaires-deco {
        bottom: -175px; 
        left: 10%;
    }

    .partenaires-deco-svg{
        width: 200px;
        height: auto;
    }

    .a-propos-solideo {
        flex-direction: column;
        gap: 25px;
    }

    .a-propos-solideo p{
        font-size: 14px;
    }

}

@media (max-width: 590px) {
    .partenaires-deco {
        bottom: -175px; 
        left: 15%;
    }

    .partenaires-deco-svg{
        width: 200px;
        height: auto;
    }
}


@media (max-width: 440px){
    .a-propos-image img {
        width: 275px;
    }

    .deco-services {
        top: 1300px;
        left: 2%;
    }

    .deco-services-svg {
        width: 250px;
        height: auto;
    }

    .partenaires-deco {
        bottom: -175px; 
        left: 18%;
    }

    .partenaires-deco-svg{
        width: 150px;
        height: auto;
    }

}

/*Page connexion administrative*/
.form-mdp-oublier, .form-connexion-admin, .form-reset-mdp {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin-top: 75px;
    margin-bottom: 35px;
    min-height: 100vh;
}

.contenu-input-admin {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.contenu-input-admin h1 {
    font-family: 'Plein-Bold';
    font-size: 25px;
    color: var(--color-tertiary);
}

.input-admin-info {
    width: 400px;
    padding: 15px;
    border-radius: 15px;
    border: solid var(--color-quaternary) 2px;
    font-family: 'Plein-bold';
    font-size: 17px;
}

.mdp-oublié-admin {
    display: flex;
    align-items: center;
    gap: 5px;

    background: none;
    text-decoration: none;
    border: none;
    color: var(--color-tertiary);
    font-family: 'Plein-Bold';
    font-size: 15px;

    align-self: flex-end;
    cursor: pointer;
    transition: ease-in-out 0.3s;
}

.mdp-oublié-admin:hover {
    color: var(--color-secondary);
}

.mdp-oublié-admin:hover .svg-mdp-oublié-admin {
    transform: translateX(3px);
}

.svg-mdp-oublié-admin {
    stroke: currentColor;
    width: 8px;
    height: auto;
    transition: ease-in-out 0.3s;
}

.bouton-connexion-admin {
    width: 433px;
    padding: 10px 20px;
    border-radius: 15px;
    border: solid var(--color-quaternary) 2px;
    background-color: var(--color-quaternary);
    color: var(--color-tertiary);
    font-family: 'Plein-Bold';
    font-size: 17px;
    text-decoration: none;
    transition: ease-in-out 0.3s;

    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 20px;
}

.bouton-connexion-admin:hover {
    background-color: transparent;
    color: var(--color-quaternary);
    border: solid var(--color-tertiary) 2px;
}

.error-login {
    color: var(--color-secondary);
    font-family: 'Plein-Bold',Arial, Helvetica, sans-serif;
    font-size: 15px;
    margin-top: 10px;
}

/*Page mdp oublié*/

.contenu-mdp-oublier {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.contenu-mdp-oublier h1 {
    font-family: 'Plein-bold', Arial, Helvetica, sans-serif;
    font-size: 25px;
    color: var(--color-tertiary);
}

.champ-mdp-oublier {
    width: 400px;
    padding: 15px;
    border-radius: 15px;
    border: solid var(--color-quaternary) 2px;
    font-family: 'Plein-bold', Arial, Helvetica, sans-serif;
    font-size: 17px;
}

.bouton-mdp-oublier {
    width: 433px;
    padding: 10px 20px;
    border-radius: 15px;
    border: solid var(--color-quaternary) 2px;
    background-color: var(--color-quaternary);
    color: var(--color-tertiary);
    font-family: 'Plein-Bold';
    font-size: 17px;
    text-decoration: none;
    transition: ease-in-out 0.3s;

    cursor: pointer;
}

.bouton-mdp-oublier:hover {
    background-color: transparent;
    color: var(--color-quaternary);
    border: solid var(--color-tertiary) 2px;
}

.lien-retour-connexion {
    display: flex;
    align-items: center;
    gap: 5px;

    background: none;
    text-decoration: none;
    border: none;
    color: var(--color-tertiary);
    font-family: 'Plein-Bold';
    font-size: 15px;

    cursor: pointer;
    transition: ease-in-out 0.3s;
}

.lien-retour-connexion:hover {
    color: var(--color-secondary);
}

.svg-lien-retour{
    stroke: currentColor;
    width: 8px;
    height: auto;
    transition: ease-in-out 0.3s;
}

.lien-retour-connexion:hover .svg-lien-retour {
    transform: translateX(-3px);
}

.contenu-reset-mdp {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.contenu-reset-mdp h1 {
    font-family: 'Plein-bold', Arial, Helvetica, sans-serif;
    font-size: 25px;
    color: var(--color-tertiary);
}


/*responsive de connexion, mdp oublié et rénitialisation mdp*/
@media (max-width: 500px) {

    .contenu-input-admin h1 {
        font-size: 18px;
    }

    .input-admin-info {
        width: 275px;

    }

    .bouton-connexion-admin {
        width: 275px;
        justify-content: center;
    }

    .error-login {
        font-size: 12px;
    }

    .mdp-oublié-admin {
        font-size: 12px;
    }

    .contenu-mdp-oublier h1 {
        font-size: 18px;
    }

    .champ-mdp-oublier {
        width: 275px;
    }

    .bouton-mdp-oublier {
        width: 275px;
        justify-content: center;
    }

    .lien-retour-connexion {
        font-size: 12px;
    }
}

/*Page contact*/
.contact-solideo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.text-contact-solideo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 200px;
    margin-bottom: 25px;
}

.text-contact-solideo h1 {
    font-family: 'Plein-Bold';
    font-size: 25px;
    color: var(--color-secondary);
    width: 400px;
    text-align: center;
}

.text-contact-solideo p {
    font-family: 'Synonym-Medium';
    font-size: 17px;
    color: var(--color-tertiary);
    text-align: center;
    width: 375px;
}

.form-contact-solideo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 433px;
    gap: 20px;

    margin-bottom: 125px;
}

.champ-contact-solideo {
    width: 400px;
    padding: 15px;
    border-radius: 15px;
    border: solid var(--color-quaternary) 2px;
    font-family: 'Plein-bold';
    font-size: 17px;
}

.contenu-message{
    resize: vertical;
    min-height: 75px;
}

.champ-noms {
    display: flex;
    gap: 20px;
}

.champ-nom-solideo {
    width: 175px;
    padding: 15px;
    border-radius: 15px;
    border: solid var(--color-quaternary) 2px;
    font-family: 'Plein-bold';
    font-size: 17px;
}

.champ-rgpd-solideo {
    display: flex;
    align-items: center;
    align-self: flex-start;
    gap: 10px;

    font-family: 'Plein-Medium';
    font-size: 15px;
    color: var(--color-tertiary);
}

.btn-envoyez-contact {
    width: 433px;
    padding: 10px 20px;
    border-radius: 15px;
    border: solid var(--color-quaternary) 2px;
    background-color: var(--color-quaternary);
    color: var(--color-tertiary);
    font-family: 'Plein-Bold';
    font-size: 17px;
    text-decoration: none;
    transition: ease-in-out 0.3s;

    cursor: pointer;
}

.btn-envoyez-contact:hover {
    background-color: transparent;
    color: var(--color-quaternary);
    border: solid var(--color-tertiary) 2px;
}

label a {
    color: var(--color-tertiary);
    transition: ease-in-out 0.3s;
}

label a:hover {
    color: var(--color-secondary);
}

.contact-deco {
    position: absolute;
    
    top: 40%;
    left:10%;
    transform: translateX(-50%);

}

.contact-deco-svg {
    width: 475px;
    height: auto;
    z-index: -1;
}

/*responsive page contact*/

@media (max-width: 500px) {

    .text-contact-solideo {
        margin-top: 150px;
    }

    .text-contact-solideo h1 {
        font-size: 20px;
        width: 275px;
    }

    .text-contact-solideo p {
        font-size: 14px;
        width: 250px;
    }

    .form-contact-solideo {
        max-width: 283px;
    }

    .champ-noms {
        gap: 10px;
    }

    .champ-nom-solideo {
        width: 105px;
    }

    .champ-contact-solideo {
        width: 250px;
    }

    .champ-rgpd-solideo label a {
        font-size: 12px;
    }

    .btn-envoyez-contact {
        width: 283px;
    }
}

@media (max-width: 1200px) {

    .contact-deco{
        top: 35%;
        left:10%;
    }

    .contact-deco-svg {
        width: 350px;
        height: auto;
    }
}

@media (max-width: 1050px) {

    .contact-deco{
        top: 35%;
        left:8%;
    }

    .contact-deco-svg {
        width: 250px;
        height: auto;
    }
}

@media (max-width: 850px) {

    .contact-deco{
        display: none;
    }
}

/*PAGE MENTIONS LEGALES*/
.mentions-légales {
    margin-top: 100px;
    margin-bottom: 100px;
    padding: 60px;
}

.mentions-légales h1 {
    font-family: 'Plein-Bold', Arial, Helvetica, sans-serif;
    font-size: 32px;
    color: var(--color-secondary);
}

.mentions-légales h2 {
    font-family: 'Plein-Bold', Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: var(--color-tertiary);
}

.mentions-légales p {
    font-family: 'Synonym-Medium', Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: var(--color-tertiary);
}

.mentions-légales p span {
    font-family: 'Synonym-Bold', Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: var(--color-tertiary);
}

.mentions-légales p a {
    font-family: 'Synonym-Bold', Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: var(--color-tertiary);
}

.mentions-légales p a {
    font-family: 'Synonym-Bold', Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: var(--color-secondary);
    transition: ease-in-out 0.3s;
}

.mentions-légales p a:hover {
    color: var(--color-quaternary);
}

/*PAGE POLITIQUE DE CONFIDENTIALITE*/

.politique-confidentialité {
    margin-top: 100px;
    margin-bottom: 100px;
    padding: 60px;
}

.politique-confidentialité h1 {
    font-family: 'Plein-Black', Arial, Helvetica, sans-serif;
    font-size: 32px;
    color: var(--color-secondary);
}

.politique-confidentialité h2 {
    font-family: 'Plein-Bold', Arial, Helvetica, sans-serif;
    font-size: 28px;
    color: var(--color-tertiary);
}

.politique-confidentialité h3 {
    font-family: 'Plein-Semibold', Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: var(--color-tertiary);
}

.politique-confidentialité h4 {
    font-family: 'Plein-Semibold', Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: var(--color-tertiary);
}

.politique-confidentialité p {
    font-family: 'Synonym-Medium', Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: var(--color-tertiary);
}

.politique-confidentialité ul {
    font-family: 'Synonym-Medium', Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: var(--color-tertiary);
}

.politique-confidentialité span {
    font-family: 'Synonym-Bold', Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: var(--color-tertiary);
}

.politique-confidentialité a {
    font-family: 'Synonym-Bold', Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: var(--color-secondary);
    transition: ease-in-out 0.3s;
}

.politique-confidentialité a:hover {
    color: var(--color-quaternary);
}

/*PAGE ERREUR 404 SOLIDEO*/

.erreur-404-solideo {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 200px;
    margin-bottom: 125px;
    width: 550px;
}


.erreur-404-solideo img {
    width: 300px;
    height: 300px;
}


.erreur-404-solideo h1 {
    font-family: 'Plein-Bold', Arial, Helvetica, sans-serif;
    font-size: 55px;
    color: var(--color-secondary);
    text-align: center;
    margin: 0;
}

.erreur-404-solideo p {
    font-family: 'Synonym-Medium', Arial, Helvetica, sans-serif;
    font-size: 22px;
    color: var(--color-tertiary);
    text-align: center;
}

.erreur-404-solideo a {
    font-family: 'Plein-bold', Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: var(--color-tertiary);
    background-color: var(--color-quaternary);
    border: solid 2px var(--color-quaternary);

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    text-align: center;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 30px;
    transition: ease-in-out 0.3s;
}

.erreur-404-solideo a:hover {
    color: var(--color-quaternary);
    background-color: var(--color-tertiary);
    border: solid 2px var(--color-tertiary);
}

.erreur-404-solideo a svg {
    stroke: var(--color-tertiary);
    width: 10px;
    transition: ease-in-out 0.3s;
}

.erreur-404-solideo a:hover svg {
    stroke: var(--color-quaternary);
    transform: translateX(-2px);
}

/* responsive erreur 404 solideo*/

@media (max-width: 550px) {

    .erreur-404-solideo {
        width: 300px;
    }

    .erreur-404-solideo img {
        width: 200px;
        height: 200px;   
    }

    .erreur-404-solideo h1 {
        font-size: 32px;
    }

    .erreur-404-solideo a {
        font-size: 14px;
    }

    .erreur-404-solideo a svg {
        width: 8px;
    }

}


/*FIN DU STYLE SOLIDEO*/


/*----------------------------------------------*/


/*STYLE DES PAGES GARAGE SOLIDAIRE*/

/*Header nav Garage solidaire*/

:root {
    --color-primary-gs: #1E5587;
    --color-secondary-gs: #EE7023;
    --color-tertiary-gs: #E8D8C8;
    --color-quaternary-gs: #ffffff;
}

.header-gs {
    width: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: var(--color-primary-gs)
}

.nav-gs {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 85px;
    padding: 15px 35px;
}

.logo-gs-nav {
    width: 175px;
}

.nav-liens-gs {
    list-style: none;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    gap: 85px;
}

.nav-liens-gs a {
    display: flex;
    align-items: center;
    white-space: nowrap;
    text-decoration: none;
    font-family: 'Amulya-Bold';
    font-size: 18px;
    color: var(--color-quaternary-gs);
    transition: ease-in-out 0.3s;
}

.nav-liens-gs a:hover {
    color: var(--color-secondary-gs)
}

.btn-connexion-admin-gs svg {
    fill: var(--color-quaternary-gs);
    width: 40px;
    transition: ease-in-out 0.3s;
}

.btn-connexion-admin-gs svg:hover {
    fill: var(--color-secondary-gs)
}

.burger-menu-gs, 
.burger-menu-contenu-gs {
    display: none;
}

/*Dropdown voitures*/
.dropdown-voiture {
    position: relative;
    border: solid var(--color-quaternary-gs) 1px;
    padding: 10px 15px;
    border-radius: 25px;
    transition: ease-in-out 0.3s;
}

.dropdown-voiture:hover {
    background-color: var(--color-quaternary-gs);
}

.dropdown-voiture:hover svg {
    fill: var(--color-primary-gs);
    transform: rotate(180deg);
}

.dropdown-voiture:hover .btn-dropdown{
    color: var(--color-primary-gs);
}

.dropdown-voiture svg {
    width: 12px;
    height: auto;
    fill: var(--color-quaternary-gs);
    transition: ease-in-out 0.3s;
}

.dropdown-voiture a {
    gap: 15px;
}

.sous-dropdown{
    position: absolute;
    top: 100%;
    left: 0;

    background-color: var(--color-primary-gs);
    list-style: none;
    padding: 15px;
    margin: 0;

    border-radius: 15px;
    border: solid var(--color-quaternary-gs) 1px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease-in-out;

}

.dropdown-voiture:hover .sous-dropdown{
    opacity: 1;
    visibility: visible;
    transform: translateY(15px);
}

.sous-dropdown li {
    margin-bottom: 10px;
}

.sous-dropdown li:last-child {
    margin-bottom: 0;
}

.sous-dropdown a{
    color: var(--color-quaternary-gs);
    text-decoration: none;
    white-space: nowrap;
    border-radius: 10px;
    padding: 10px;
    font-size: 15px;
    transition: 0.2s ease-in-out;
}

.sous-dropdown a:hover{
    color: var(--color-secondary-gs);
    background-color: var(--color-quaternary-gs);
}

.menu-profil-défaut {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;

    background-color: var(--color-quaternary-gs);
    color: var(--color-primary-gs);
    border-radius: 15px;
    padding: 8px;
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    font-size: 16px;
}

.menu-profil-défaut a {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 5px;
}

.lettre-profil-défaut {
    background-color: var(--color-primary-gs);
    color: var(--color-quaternary-gs);
    width: 50px;
    height: 50px;
    border-radius: 25px;
    font-size: 25px;

    display: flex;
    justify-content: center;
    align-items: center;
}


/*Responsive header Garage solidaire*/
@media (max-width: 1130px){

    .nav-gs{
        justify-content: space-between;
    }

    .logo-gs-nav {
        width: 150px;
    }

    .nav-centre-gs,.nav-droite-gs {
        display: none;
    }

    .burger-menu-gs {
        background-color: transparent;
        border: none;
        width: auto;
        display: block;
    }

    .barre-menu-gs {
        fill: var(--color-quaternary-gs);
        width: 30px;
        height: auto;
        transition: ease-in-out 0.3s;
    }

    .barre-menu-gs:hover {
        fill: var(--color-secondary-gs);
    }

    .burger-menu-gs {
        display: flex;
        flex-direction: column;
        gap: 5px;
        background: none;
        border: none;
    }

    .burger-menu-contenu-gs .fermer-menu-gs {
        display: block;
        position: absolute;
        top: 35px;
        right: 30px;
        width: 25px;
        height: auto;
        cursor: pointer;
        fill: var(--color-quaternary-gs);
        transition: fill 0.3s ease-in-out;
    }

    .burger-menu-contenu-gs .fermer-menu-gs:hover {
        fill: var(--color-secondary-gs);
    }

    .burger-menu-contenu-gs.open .barre-menu-gs {
        display: none;
    }

    .burger-menu-contenu-gs {
        display: block;
        position: fixed;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        top: 0;
        right: 0;
        width: 40%;
        height: 100%;
        background-color: var(--color-primary-gs);
        padding: 100px 20px 15px 0px;
        z-index: 4000;

        transform: translatex(100%); 
        transition: transform 0.5s ease-in-out;
    }

    .burger-menu-contenu-gs.active {
        display: block;
        transform: translatex(0);
    }

    .menu-profil a {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background-color: var(--color-quaternary-gs);
        padding: 10px;
        border-radius: 10px;
    }

    .menu-profil a span {
        color: var(--color-primary-gs);
         font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
        width: 100%;
    }

    .menu-lettre-profil {
        width: 50px;
        height: 50px;
        border-radius: 25px;
        background-color: var(--color-primary-gs);
        color: var(--color-quaternary-gs);
        font-size: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .burger-menu-contenu-gs ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding-left: 20px;
        text-align: left;
    }

    .burger-menu-contenu-gs a {
        display: flex;
        align-items: baseline;
        text-decoration: none;
        font-family: 'Amulya-Medium', Arial, Helvetica, sans-serif;
        white-space: nowrap;
        font-size: 15px;
        gap: 5px;
        color: var(--color-quaternary-gs);
        transition: ease-in-out 0.3s;
    }

    .icon-connexion{
        width: 22px;
        height: auto;
        fill: currentColor;
    }

    .burger-menu-contenu-gs a:hover {
        color: var(--color-secondary-gs);
    }

    #logo-gs-burger-menu {
        display: flex;
        justify-content: start;
    }

    #logo-gs-burger-menu img{
        width: 90px;
    }

    .fermer-menu-gs {
        display: none;
    }

}

@media (max-width: 400px) {
    .burger-menu-contenu-gs a {
        font-size: 13px;
    }
}

/*Footer de Garage Solidaire*/

.footer-gs {
    background-color: var(--color-primary-gs);
    padding: 40px 20px;
    position: relative;
    overflow: visible; 
}

.footer-top-svg {
    margin-bottom: -8px;
}

.footer-top-svg svg {
    display: block;
    width: 100%;
    height: auto;
}

.footer-gs-grid {
    position: relative;
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 20px;

    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    z-index: 1;
}

/*ligne 1*/

.footer-logo-gs {
    grid-column: 1;
    grid-row: 1;
}

.footer-nav-gs {
    grid-column: 2;
    grid-row: 1;
    font-family: 'Amulya-Medium', Arial, Helvetica, sans-serif;
    list-style: none;
    gap: 10px;
}

.footer-nav-liens-gs {
    list-style: none;
}

.footer-nav-gs a {
    position: relative;
    text-decoration: none;
    color: var(--color-quaternary-gs);
    transition: ease-in-out 0.3s;
    padding: 2px;
    margin-top: 2px;
}

.footer-nav-gs a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: currentColor;

    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(.4,0,.2,1);
}

.footer-nav-liens-gs a:hover::after {
    transform: scaleX(1);
}

.footer-nav-gs a:hover {
    color: var(--color-secondary-gs);
}

/*ligne 2*/

.footer-bas-gs {
    grid-column: 1 / -1;
    grid-row: 2;

    display: flex;
    justify-content: space-between;
    align-items: center;

    font-family: 'Amulya-Medium', Arial, Helvetica, sans-serif;
    color: var(--color-quaternary-gs);
    font-size: 12px;
}

.footer-logo-gs-img {
    width: 135px;
}

.footer-légaux-gs{
    display: flex;
    gap: 10px;
}

.footer-légaux-gs a {
    color: var(--color-quaternary-gs);
    transition: ease-in-out 0.3s;
}

.footer-légaux-gs a:hover {
    color: var(--color-secondary-gs);
}

.footer-légaux-gs svg{
    stroke: var(--color-quaternary-gs);
    height: 22px;
}

/*Responsive footer garage solidaire*/

@media (max-width: 640px) {

    .footer-légaux-gs svg {
        height: 22px;
    }

    .footer-top-svg {
        
        margin-bottom: -3.5px;
    }

}

@media (max-width: 420px) {


    .footer-nav-gs {
        font-size: 10px;
    }

    .footer-bas-gs {
        font-size: 9px;
    }

    .footer-légaux-gs a{
        display: inline-block;
        align-items: center;
    }

    .footer-légaux-gs a:first-child {
        display: block;
        text-align: right;
    }

    .footer-légaux-gs svg{
        display: block;
        margin: 0;
        height: 25px;
    }

}

/*Page garage solidaire*/

.intro-gs {
    margin-top: 95px;
    background-color: var(--color-primary-gs);
    width: 100%;
    height: 600px;
    display: flex;
    align-items: center;
    overflow: hidden;

    position: relative;
}

.intro-contenu {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.intro-text {
    max-width: 500px;
    margin-left: 100px;
    color: var(--color-quaternary-gs);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 2;
    gap: 15px;
}

.intro-text h1 {
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    font-size: 25px;
    width: 400px;
    margin: 0;
}

.intro-text p {
    font-family: 'Synonym-Medium', Arial, Helvetica, sans-serif;
    font-size: 18px;
    width: 300px;
    margin: 0;
    line-height: 1.5;
}

.intro-bouton {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.btn-primaire {
    background: var(--color-secondary-gs);
    color: var(--color-quaternary-gs);
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    font-size: 20px;
    padding: 15px 70px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    width: fit-content;
    transition: ease-in-out 0.3s;
}

.btn-primaire:hover {
    background-color: var(--color-quaternary-gs);
    color: var(--color-secondary-gs);
}

.btn-secondaire {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;

    border: 2px solid var(--color-quaternary-gs);
    font-family: 'Amulya-Bold';
    font-size: 14px;
    color: var(--color-quaternary-gs);
    padding: 8px 25px;
    border-radius: 25px;
    text-decoration: none;
    transition: ease-in-out 0.3s;
    width: fit-content;
}

.btn-secondaire:hover a,
.btn-secondaire:hover {
    border: 2px solid var(--color-secondary-gs);
    color: var(--color-secondary-gs);
}

.btn-secondaire a {
    transition: ease-in-out 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-secondaire svg {
    stroke: var(--color-quaternary-gs);
    width: 8px;
    height:auto;
    transition: ease-in-out 0.3s;
}

.btn-secondaire:hover svg {
    transform: translateX(5px);
    stroke: var(--color-secondary-gs);
}

.intro-illu-montagne {
    position: absolute;
    bottom: -1px;
    right: 0;
    width: 100%;
    line-height: 0;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
}

.intro-illu-montagne svg {
    width: 60%;
    height: auto;
    display: block;
}

.intro-illu-voiture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    transform-origin: center bottom;
}

.intro-illu-voiture svg {
    width: 12%;
    height: auto;
    display: block;
}

@media (max-width: 1170px) {

    .intro-illu-montagne svg {
        width: 60%;
        height: auto;
        display: block;
    }

    .intro-illu-voiture svg {
        width: 12%;
        height: auto;
    }
}

@media (max-width: 1070px){
        .intro-illu-montagne svg {
        width: 50%;
        height: auto;
        display: block;
    }

    .intro-illu-voiture svg {
        width: 13%;
        height: auto;
    }
}

@media (max-width: 1000px){
    .intro-illu-montagne svg {
        width: 60%;
        height: auto;
        display: block;
    }

    .intro-illu-voiture svg {
        width: 14%;
        height: auto;
    }

}

@media (max-width: 900px){
    .intro-contenu {
        width: 90%;
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .intro-text {
        max-width: 500px;
        color: var(--color-quaternary-gs);
        margin: 0;
        margin-bottom: 75px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        z-index: 2;
        gap: 15px;
    }

    .intro-illu-montagne svg {
        width: 60%;
        height: auto;
        display: block;
    }

    .intro-illu-voiture svg {
        width: 15%;
        height: auto;
    }

}

@media (max-width: 810px) {
    .intro-illu-montagne svg {
        width: 65%;
        height: auto;
        display: block;
    }

    .intro-illu-voiture svg {
        width: 17%;
        height: auto;
    }
}

@media (max-width: 670px) {
    .intro-illu-montagne svg {
        width: 70%;
        height: auto;
        display: block;
    }

    .intro-illu-voiture svg {
        width: 20%;
        height: auto;
    }
}

@media (max-width: 410px) {
    .intro-illu-montagne svg {
        width: 100%;
        height: auto;
        display: block;
    }

    .intro-illu-voiture svg {
        width: 25%;
        height: auto;
    }
}

/*Section tarifs cotisation*/

.cartes-tarifs {
  display: flex;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 30px;
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 85px;
  margin-bottom: 100px;
}

.cartes-tarifs h2 {
    width: 100%;
    text-align: center;
    margin-bottom: 50px;
    font-size: 35px;
    font-family: 'Amulya-Bold';
    color: var(--color-primary-gs);
}

.carte {
  width: 300px;
  border-radius: 20px;
  overflow: hidden;

  display: flex;
  flex-direction: column;
}

.carte-image img {
  width: 100%;
  display: block;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.carte-contenu {
  background-color: var(--color-secondary-gs);
  color: var(--color-quaternary-gs);
  padding: 25px 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.carte-contenu p {
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    font-size: 16px;
    text-align: center;
}

.caracteristiques {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.caracteristiques li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  font-size: 14px;
  font-family: 'Synonym-Medium';
  line-height: 1.4;
}

.caracteristiques li img{
  display: inline-block;
  margin-right: 12px;

  width: 23px;
  height: 23px;
  line-height: 18px;
}

.prix {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

.prix p{
    font-family: 'Synonym-Medium', Arial, Helvetica, sans-serif;
    margin: 0;
}

.prix span {
    font-family: 'Synonym-Semibold', Arial, Helvetica, sans-serif;
}

#liens-caf {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 25px;
}

#liens-caf a{
    font-family: 'Synonym-Semibold', Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: var(--color-primary-gs);
    transition: ease-in-out 0.3s;
}

#liens-caf a:hover{
    color: var(--color-secondary-gs);
}

/*Carte solideo*/
.map-gs {

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 200px;
    
    background-color: var(--color-primary-gs);
    width: 100%;
    height: 1100px;
    /*margin-bottom: 100px;*/

    position: relative;

}

.map-gs h3 {

    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    font-size: 35px;
    color: var(--color-quaternary-gs);
    text-align: center;
    width: 300px;

}

#map {
    position: relative;

    width: 1100px;
    height: 600px;
    border-radius: 70px;
    border: solid var(--color-secondary-gs) 2.5px ;
}

.map-wrapper {
    position: relative;
    width: auto;
}

.deco-map-droite {
    position: absolute;
    top: 30px;
    right: 50px;
    transform: translateY(-100%);
    z-index: 1000;
}

.deco-map .perso-droite{
    width: 125px;
    height: auto;
}

.deco-map-gauche {
    position: absolute;
    top: 5px;
    left: 75px;
    transform: translateY(-100%);
    z-index: 1000;
}

.deco-map-gauche svg {
    width: 200px;
    height: auto;
}

.deco-map-gauche2 {
    position: absolute;
    top: 5px;
    left: 220px;
    transform: translateY(-100%);
    z-index: 1000;
}

.deco-map-gauche2 svg {
    width: 150px;
    height: auto;
}

/*Controle zoom*/
.leaflet-control-zoom {

    display: flex;
    flex-direction: column;
    gap: 8px;

    bottom: 60px;
    right: 20px;
    
    overflow: visible;
    
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.leaflet-control-zoom a {
    background-color: var(--color-quaternary-gs);
    color: var(--color-primary-gs) !important;
    border: solid var(--color-primary-gs) 2px !important;

    line-height: 60px !important;
    border-radius: 20px !important;
    font-size: 60px !important;
    width: 60px !important;
    height: 60px !important;

    transition: ease-in-out 0.3s;
    user-select: none;
}

.leaflet-control-zoom a:hover {
    color: var(--color-quaternary-gs) !important;
    background-color: var(--color-secondary-gs);
    border: solid var(--color-secondary-gs) 2px !important;
}

/*localisation icon*/

.localisation-box {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    position: relative;

    background-color: var(--color-secondary-gs); 
    border-radius: 40px; 
    padding: 15px;
    transition: border-radius 0.1s ease-in-out, height 0.7s ease-in-out, background-color 0.3s ease;
    overflow: visible;
    cursor: pointer;
}

.localisation-résumé {
    display: flex;
    align-items: center;
    
    gap: 10px;
}

.localisation-details {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    
    overflow: hidden;

    font-size: 18px;
    color: var(--color-quaternary-gs);
    font-family: 'Synonym-Medium';
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.localisation-details a {
    color: var(--color-quaternary-gs);
}

.localisation-box.active {
    height: auto;
    border-radius: 35px;
}

.localisation-box.active .localisation-details {
    display: block;
    opacity: 1;
    visibility: visible;
    max-height: 150px;
    margin-top: 15px;
}

.localisation-text {
    white-space: nowrap;
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    font-size: 22px;
    color: var(--color-quaternary-gs);
}

.localisation-plus {
    background-color: var(--color-primary-gs);
    border-radius: 50px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    font-size: 40px;
    color: var(--color-quaternary-gs);
    transition: ease-in-out 0.3s;
}

.localisation-plus:hover {
    background-color: var(--color-quaternary-gs) !important;
    color: var(--color-primary-gs) !important;
    cursor: pointer;
}

.localisation-plus .svg-localisation-flèche{
    stroke: var(--color-quaternary-gs);
    transform: translateY(0px) rotate(90deg);
    width: 14px;
    height: auto;
    transition: ease-in-out 0.3s;
}

.localisation-plus:hover .svg-localisation-flèche {
    stroke: var(--color-primary-gs);
    transform: translateY(2px) rotate(90deg);
}

.localisation-box.active .svg-localisation-flèche{
    transform: translateY(-2px) rotate(270deg);
}

.deco-localisation {
    position: absolute;
    top: 20px;
    left: 0px;
    transform: translateY(-100%);
    z-index: 10;
}

.deco-localisation .svg-localisation {
    width: 35px;
    height: auto;
}


/*section avis client*/

.avis-client {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    margin: 0;
    margin-bottom: 100px;
}

.avis-container {
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 60px;
    flex-wrap: wrap;
    margin-top: 100px;
}

.avis-client h4 {

    color: var(--color-primary-gs);
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    font-size: 35px;
    text-align: center;
    margin: 0;
    padding: 25px;
    border: solid var(--color-secondary-gs) 2.5px;
    border-top: none;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}

.avis-contenu {
    position: relative;

    width: 175px;
    height: 175px;
    border: 2.5px solid var(--color-primary-gs);
    border-radius: 50%;
    
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    padding: 15px;
    box-sizing: border-box;
}

.avis-contenu p {
    font-family: 'Synonym-Medium', Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: var(--color-primary-gs);
}

.avis-note {
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    
    background: var(--color-quaternary-gs);
    border: 2.5px solid var(--color-secondary-gs);
    border-radius: 15px;
    
    padding: 6px 14px;
    
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: var(--color-secondary-gs);
    
    display: flex;
    align-items: center;
    gap: 6px;
}

.avis-note svg {
    width: 20px;
    height: auto;
    fill: var(--color-secondary-gs);
}

/*Responsive accueil Garage Solidaire*/
@media (max-width: 1120px) {
    .map-gs {
        width: 100%;
        height: 900px;
        /*margin-bottom: 100px;*/
    }

    #map {
        width: 900px;
        height: 400px;
        border-radius: 40px;
    }
}

@media (max-width: 910px) {
    .map-gs {
        width: 100%;
        height: 900px;
        /*margin-bottom: 100px;*/
    }

    #map {
        width: 100vw;
        height: 400px;
        border-radius: 0px;
        border-left: 0px;
        border-right: 0px;
    }
}

@media (max-width: 675px) {
    .deco-map-droite {
        position: absolute;
        top: 30px;
        right: 50px;
        transform: translateY(-100%);
        z-index: 1000;
    }

    .deco-map-droite .perso-droite{
        width: 125px;
        height: auto;
    }

    .deco-map-gauche {
        display: none;
    }

    .deco-map-gauche2 {
        display: none;
    }

    .leaflet-control-zoom {
        gap: 8px;
        bottom: 40px;
        right: 20px;
    }

    /*Controle zoom*/
    .leaflet-control-zoom a {
        line-height: 50px !important;
        border-radius: 10px !important;
        font-size: 50px !important;
        width: 50px !important;
        height: 50px !important;
    }

    .avis-client h4 {
        font-size: 22px;
        padding: 15px;
    }

}

@media (max-width: 400px){

    .intro-text h1 {
        font-size: 20px;
        max-width: 250px;
    }

    .intro-text p {
        font-size: 16px;
        max-width: 250px;
    }

    .intro-text .btn-primaire {
        font-size: 16px;
    }

    .intro-text .btn-secondaire{
        font-size: 12px;
    }

    .cartes-tarifs h2 {
        font-size: 22px;
    }

    .map-gs {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 125px;
        
        background-color: var(--color-primary-gs);
        width: 100%;
        height: 700px;

        position: relative;
    }

    .map-gs h3 {
        font-size: 20px;
        margin: 0;
    }

    /*Controle zoom*/
    .leaflet-control-zoom a {
        line-height: 40px !important;
        border-radius: 10px !important;
        font-size: 40px !important;
        width: 40px !important;
        height: 40px !important;
    }



}

/*Page voiture en vente*/

.page-vente-voiture {
    margin-bottom: 125px;
}

.recherche-voiture {
    margin-top: 175px;
    margin-bottom: 100px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px;

    display: flex;
    flex-direction: column;
    
}

.recherche-voiture h1 {
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    color: var(--color-primary-gs);
}

.recherche-voiture span {
    color: var(--color-secondary-gs);
}

.filtre-voiture {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;

    align-self: flex-end;
}

.filtre-voiture button {
    background-color: transparent;
    border: solid 2px var(--color-primary-gs);
    border-radius: 25px;
    cursor: pointer;

    transition: ease-in-out 0.3s;
}

.filtre-voiture button:hover {
    background-color: var(--color-secondary-gs);
    border: solid 2px var(--color-secondary-gs);
}

.filtre-voiture button svg {
    padding: 5px;
    width: 30px;
    height: auto;
    fill: var(--color-primary-gs);
    transition: ease-in-out 0.3s;
}

.filtre-voiture button:hover svg {
    fill: var(--color-quaternary-gs);
}

.filtre-voiture input {
    border: solid 2px var(--color-primary-gs);
    color: var(--color-primary-gs);
    background-color: transparent;
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding: 10px;

    width: fit-content;
    border-radius: 25px;
    text-align: center;
}

.filtre-voiture input::placeholder {
    color: var(--color-primary-gs);
}

.custom-dropdown {
    position: relative;
    font-size: 18px;
    color: var(--color-primary-gs);
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    cursor: pointer;
    user-select: none;
}

.custom-dropdown .selectionné {
    padding: 10px 12px;
    border: 2px solid var(--color-primary-gs);
    border-radius: 25px;
    background-color: transparent;
    width: max-content;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-dropdown .options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-quaternary-gs);
    border: 2px solid var(--color-primary-gs);
    border-radius: 25px;
    max-height: auto;
    min-width: 125px;
    overflow-y: auto;
    padding: 0px;

    display: none;
    z-index: 1000;
    margin-top: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.custom-dropdown .options li {
    margin: 10px;
    padding: 10px;
    list-style: none;
    text-align: center;
    border-radius: 15px;
    transition: ease-in-out 0.3s;
}

.custom-dropdown .options li:hover {
    background-color: var(--color-secondary-gs);
    color: var(--color-quaternary-gs);
}

.custom-dropdown.active .options {
    display: block;
}

/*Carte des voitures en vente*/
.liste-voitures {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 35px;
    row-gap: 60px;

    margin: 0 auto 75px auto;
    max-width: 1200px;

}

.carte-lien {
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: ease-in-out 0.3s;
}

.carte-lien:hover {
    transform: translateY(-2px);
}

.carte-voiture-vente {

    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: start;
    background-color: var(--color-primary-gs);
    overflow: hidden;
    border-radius: 25px;

}

.badge-vendu {
    position: absolute;
    z-index: 5 !important;
    top: -50px;
    left: -25px;
    transform: scale(0) rotate(-10deg);
    animation: popBadge 0.5s ease-out forwards;
}

@keyframes popBadge {

    0% {
        transform: scale(0) rotate(-50deg);
    }

    60% {
        transform: scale(1.1) rotate(10deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }

}

.badge-vendu svg {
    width: 100px;
    height: auto;
}

.carte-voiture-image {
    width: auto;
    height: auto;
}

.carte-voiture-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.contenu-carte-voiture {
    padding: 15px;
    color: var(--color-quaternary-gs);
    min-height: 110px;
    width: 90%;

    display: flex;
    flex-direction: column;

    position: relative;
}

.contenu-carte-voiture h3 {
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    margin: 0;
    font-size: 20px;
}

.info-carte {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.info-carte span {
    font-family: 'Amulya-Medium', Arial, Helvetica, sans-serif;
    font-size: 14px;
}

.prix-carte {
    align-self: flex-end;
    margin: 0;
}

.prix-carte p {
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    font-size: 20px;
    margin: 0;
    padding: 10px 20px;
    text-align: center;
    

    background-color: var(--color-secondary-gs);
    border-radius: 25px;
}

/*Pagination voitures*/
.pagination-voitures {
    margin-bottom: 100px;
    text-align: center;
}

.pagination-voitures a,
.pagination-voitures span {
    display: inline-block;
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    padding: 8px 14px;
    margin: 0 5px;
    border-radius: 30px;
    border: solid var(--color-primary-gs) 2px;
    text-decoration: none;
    color: inherit;
    color: var(--color-primary-gs);
    transition: ease-in-out 0.3s;
}

.pagination-voitures a:hover {
    background-color: var(--color-secondary-gs);
    color: var(--color-quaternary-gs);
    border-color: var(--color-secondary-gs);
}

.pagination-voitures .current {
    border-color: var(--color-secondary-gs);
    background: var(--color-secondary-gs);
    color: var(--color-quaternary-gs);
}

.aucun-resultat {
    display: flex;
    align-items: center;
    flex-direction: column;

    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    font-size: 28px;
    color: var(--color-primary-gs);
}

.aucun-resultat p {
    text-align: center;
    width: 550px;
}

.aucun-resultat figure svg {
    margin-top: 50px;
    width: 350px;
    height: auto;
}

.oeil {
    animation: regard-yeux 16s ease infinite;
}

@keyframes regard-yeux {
    0% {
        transform: translateX(0px);
    }

    6% {
        transform: translateX(12px);
    }

    12% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(0px);
    }
}

.aucun-resultat a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    font-size: 18px;
    color: inherit;
    color: var(--color-primary-gs);
    border: solid 2px var(--color-primary-gs);
    transition: ease-in-out 0.3s;
    text-decoration: none;

    padding: 10px 15px;
    border-radius: 35px;
}

.aucun-resultat a svg {
    stroke: var(--color-primary-gs);
    width: 10px;
    height: auto;
    transition: ease-in-out 0.3s;
}

.aucun-resultat a:hover svg {
    stroke: var(--color-quaternary-gs);
    transform: translateX(2px);
}

.aucun-resultat a:hover {
    color: var(--color-quaternary-gs);
    background-color: var(--color-secondary-gs);
    border: solid 2px var(--color-secondary-gs);
}

/*Responsive page voiture en vente*/

@media (max-width: 1000px) {

    .page-vente-voiture {
        margin-bottom: 0px;
    }

    .recherche-voiture {
        align-items: center;
        max-width: 600px;
    }

    .filtre-voiture {
        align-self: center;
    }

    .aucun-resultat a {
        font-size: 14px;
    }

    .aucun-resultat p {
        width: 350px;
        font-size: 22px;
    }

    .aucun-resultat a svg {
        width: 8px;
    }

}

@media (max-width: 560px) {

    .recherche-voiture {
        align-items: center;
        max-width: 350px;
    }

    .recherche-voiture h1 {
        font-size: 24px;
    }

    .filtre-voiture {
        align-self: center;
        gap: 5px;
        justify-content: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .filtre-voiture input {
        font-size: 12px;
        padding: 5px;
    }

    .filtre-voiture button svg {
        padding: 4px;
        width: 14px;
    }

    .custom-dropdown {
        font-size: 12px;
    }

    .custom-dropdown .selectionné {
        padding: 5px;
    }

    .liste-voitures {
        row-gap: 40px;
    }

    .badge-vendu {
        top: -30px;
        left: -30px;
    }

    .badge-vendu svg {
        width: 85px;
    }

    .aucun-resultat {
        margin-bottom: 25px;
    }

    .aucun-resultat figure svg {
        width: 250px;
    }

    .aucun-resultat a {
        font-size: 14px;
    }

    .aucun-resultat a svg {
        width: 5px;
    }
    
}

/*PAGE SINGLE VOITURE*/

.container-single-voiture {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 35px;

    margin-top: 200px;
    margin-bottom: 100px;

}

.images-single-voiture {
    width: 550px;
    height: 475px;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
}

.carousel .wp-block-gallery {
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
    transition: transform 0.4s ease;
    gap: 0 !important;
}

.carousel figure {
    min-width: 550px;
    height: 475px;
    margin: 0;
}

.carousel img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    display: block;
}

.flèche{
    position:absolute;
    top:50%;
    border: none;
    background-color: transparent;
    transform:translateY(-50%);
    cursor:pointer;
    z-index:2;
    stroke: var(--color-quaternary-gs);
    transition: ease-in-out 0.3s;
}

.flèche:hover {
    stroke: var(--color-secondary-gs);
}

.gauche {
    left:10px;
}

.droite {
    right:10px;
}

.gauche:hover{
    transform: translate(-5px, -50%);
}

.droite:hover{
    transform: translate(5px, -50%);
}

.flèche svg {
    width: 35px;
    height: 35px;
}

.single-haut {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 150px;

    margin: 0;
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    color: var(--color-primary-gs);
}

.single-haut h2 {
    font-size: 28px;
    margin-bottom: 10px;
}

.single-haut p {
    margin: 0px;
    font-size: 22px;
    font-family: 'Synonym-Medium', Arial, Helvetica, sans-serif;
}

.single-haut span {
    font-size: 24px;
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
}

.single-détails {
    border: solid 2px var(--color-secondary-gs);
    background-color: transparent;
    border-radius: 30px;

    padding: 25px 35px;
}

.single-détails h3 {
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: var(--color-primary-gs);
    margin: 0;
}

.single-détails ul {
    color: var(--color-primary-gs);
    font-family: 'Synonym-Medium', Arial, Helvetica, sans-serif;
    font-size: 20px;
}

.single-détails ul li span {
    font-family: 'Synonym-Bold', Arial, Helvetica, sans-serif;
}

.single-détails ul li:not(:last-child) {
    margin-bottom: 10px;
}

.single-bas {
    display: flex;
    justify-content: center;
    align-items: center;
    
    margin-top: 10px;
    gap: 150px;
}

.single-bas h4 {
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    color: var(--color-primary-gs);
    font-size: 28px;
    margin: 0;
}

.single-bas span {
    color: var(--color-secondary-gs);
}

.single-bas a {
    text-decoration: none;
    color: var(--color-primary-gs);
    border: solid 2px var(--color-primary-gs);
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    font-size: 18px;
    border-radius: 25px;
    padding: 10px 15px;
    transition: ease-in-out 0.3s;
}

.single-bas a:hover {
    background-color: var(--color-secondary-gs);
    color: var(--color-quaternary-gs);
    border-color: var(--color-secondary-gs);
}

/*responsive page single voiture*/
@media (max-width: 600px) {
    .images-single-voiture {
        width: 475px;
        height: 400px;
    }

    .carousel figure {
        min-width: 475px;
        height: 400px;
    }

    .single-haut h2 {
        font-size: 22px;
    }

    .single-haut p {
        font-size: 18px;
    }

    .single-haut span {
        font-size: 22px;
    }

    .single-détails h3 {
        font-size: 20px;
    }

    .single-détails ul {
        font-size: 16px;
    }

    .single-bas h4 {
        font-size: 22px;
    }

    .single-bas a {
        font-size: 16px;
    }
}

@media (max-width: 490px) {

    .single-haut {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 0;
        margin-bottom: 10px;
    }

    .images-single-voiture {
        width: 380px;
        height: 305px;
        margin: 10px;
    }

    .carousel figure {
        min-width: 380px;
        height: 305px;
    }

    .single-haut h2 {
        font-size: 22px;
        margin: 0;
    }

    .single-haut p {
        font-size: 18px;
    }

    .single-haut span {
        font-size: 22px;
    }

    .single-détails {
        margin: 10px;
    }

    .single-détails h3 {
        font-size: 20px;
    }

    .single-détails ul {
        font-size: 16px;
    }

    .single-bas {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 30px;
        margin-bottom: 50px;
    }

    .single-bas h4 {
        font-size: 22px;
    }

    .single-bas a {
        font-size: 16px;
    }
}

/*PAGE VOITURE EN REPARATION*/
.haut-text {
    margin-top: 175px;
    margin-bottom: 100px;
    margin-right: auto;
    margin-left: auto;

    display: flex;
    justify-content: center;

    position: relative;
    text-align: center;
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: var(--color-quaternary-gs);
}

.haut-text h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

.haut-text span {
    color: var(--color-secondary-gs);
}

.haut-text img {
    width: 30%;
}

.carte-voiture-reparation {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: start;
    background-color: var(--color-primary-gs);
    overflow: hidden;
    border-radius: 25px;

    position: relative;
}

.carte-voiture-reparation svg {
    position: absolute;
    transform: rotate(-45deg);
    bottom: -10px;
    right: 15px;

    width: 40px;
    height: auto;
}

@media (max-width: 1410px){

    .haut-text h1 {
        font-size: 24px;
    }

    .haut-text img {
        width: 30%;
    }

}

@media (max-width: 1100px){

    .haut-text h1 {
        font-size: 20px;
    }

    .haut-text img {
        width: 40% ;
    }

}

@media (max-width: 750px){

    .haut-text h1 {
        font-size: 20px;
    }

    .haut-text img {
        width: 50%;
    }

}

@media (max-width: 600px){

    .haut-text h1 {
        font-size: 20px;
        width: 270px;
    }

    .haut-text img {
        width: 70%;
    }

}

@media (max-width: 440px){

    .haut-text h1 {
        font-size: 16px;
    }
}

/*PAGE DE CONNEXION ADHERENT*/

.connexion-adherent-page{
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.connexion-adherent {
    margin-top: 150px;

    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.connexion-adherent h1 {
    text-align: center;
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: var(--color-primary-gs);
}

.connexion-adherent form {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    width: 430px;
}

.connexion-adherent form input{
    background-color: transparent;
    border: solid 2px var(--color-primary-gs);
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: var(--color-primary-gs);

    padding: 10px 15px;
    border-radius: 15px;
}

.connexion-adherent form input::placeholder{
    color: var(--color-primary-gs);
}

.connexion-adherent form a{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;

    margin-top: -5px;
    align-self: flex-end;
    font-size: 15px;
    text-decoration: none;
    color: var(--color-primary-gs);
    font-family: 'Synonym-Semibold', Arial, Helvetica, sans-serif;

    transition: ease-in-out 0.3s;
}

.connexion-adherent form a:hover{
    color: var(--color-secondary-gs);
}

.connexion-adherent form a svg{
    stroke: var(--color-primary-gs);
    stroke-width: 5px;
    width: 8px;
    height: auto;
    transition: ease-in-out 0.3s;
}

.connexion-adherent form a:hover svg{
    stroke: var(--color-secondary-gs);
    transform: translate(2px);
}

.connexion-adherent form button {
    padding: 10px 15px;
    border-radius: 15px;
    color: var(--color-quaternary-gs);
    background-color: var(--color-primary-gs);
    border: solid 2px var(--color-primary-gs);
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    font-size: 18px;
    cursor: pointer;

    transition: ease-in-out 0.3s;
}

.connexion-adherent form button:hover {
    color: var(--color-secondary-gs);
    background-color: transparent;
    border-color: var(--color-secondary-gs);
}

.error-login-gs {
    color: var(--color-secondary-gs);
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-align: center;
}

@media (max-width: 600px) {

    .connexion-adherent h1 {
        font: 20px;
    }

    .connexion-adherent form {
        width: 300px;
    }

    .connexion-adherent form input {
        font-size: 16px;
    }

    .connexion-adherent form button {
        font-size: 16px;
    }

    .connexion-adherent form a{
        font-size: 13px;
    }

    

}



/*PAGE COMPTE ADHERENT*/

.compte-adherent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 225px;
    margin-bottom: 150px;
}

.profil-adherent {
    width: fit-content;
    background-color: var(--color-primary-gs);
    border-radius: 35px;
    padding: 40px;

    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    align-self: center;
    gap: 25px;
}

.haut-profil {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: flex-start;
    
    font-family: 'Synonym-Medium', Arial, Helvetica, sans-serif;
    color: var(--color-quaternary-gs);
    font-size: 20px;
}

.photo-profil {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.lettre-profil {
    background-color: var(--color-quaternary-gs);
    width: 200px;
    height: 200px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;

    font-family: 'Synonym-Semibold', Arial, Helvetica, sans-serif;
    color: var(--color-secondary-gs);
    font-size: 100px;
}

.haut-profil p {
    padding: 10px 15px;
    border-radius: 25px;
    background-color: var(--color-secondary-gs);
    width: fit-content;
    font-family: 'Synonym-Semibold', Arial, Helvetica, sans-serif;
    text-align: center;
}

.haut-profil ul {
    list-style: none;
}

.haut-profil ul li span {
    font-family: 'Synonym-Semibold', Arial, Helvetica, sans-serif;
    font-size: 30px;
}

.bas-profil .rdv-profil {
    background-color: var(--color-quaternary-gs);
    border-radius: 25px;

    padding: 15px;
    width: 850px;
    height: auto;

    font-family: 'Synonym-Semibold', Arial, Helvetica, sans-serif;
    color: var(--color-secondary-gs);
    font-size: 22px;
}

.bas-profil .rdv-profil p{
    margin: 15px;
}

.bas-profil {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.bas-profil a{

    width: fit-content;
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    color: var(--color-quaternary-gs);
    background-color: var(--color-secondary-gs);
    border-radius: 25px;
    padding: 10px 15px;
    text-decoration: none;
    font-size: 18px;
    transition: ease-in-out 0.3s;
}

.bas-profil a:hover {
    color: var(--color-secondary-gs);
    background-color: var(--color-quaternary-gs);
}

.aucun-rdv {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 20px;

    align-self: center;
}

.rdv-profil .date-rdv {
    font-family: 'Synonym-Medium', Arial, Helvetica, sans-serif;
}

.aucun-rdv p {
    font-family: 'Synonym-Medium', Arial, Helvetica, sans-serif;
    font-size: 18px;
}

.aucun-rdv img {
    width: 150px;
    height: auto;
}

.aucun-rdv a {
    background-color: transparent;
    color: var(--color-primary-gs);
    border: solid 2px var(--color-primary-gs);
    border-radius: 25px;
    font-size: 15px;
    margin-top: 5px;
    padding: 10px 15px;
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
}

.aucun-rdv a:hover {
    background-color: var(--color-secondary-gs);
    color: var(--color-quaternary-gs);
    border: solid 2px var(--color-secondary-gs);
    
}

/*Responsive Page compte adherent*/

@media (max-width: 1080px) {

    .haut-profil {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        align-self: center;
    }
    
    .haut-profil ul {
        padding: 0;
    }

    .haut-profil ul li {
        text-align: center !important;
        margin-top: 5px;
    }

    .bas-profil .rdv-profil {
        width: 500px;
    }

    .rdv-profil {
        text-align: center;
    }

}

@media (max-width: 650px) {
    
    .haut-profil ul {
        padding: 0;
    }

    .haut-profil ul li {
        text-align: center !important;
        margin-top: 5px;
    }

    .bas-profil .rdv-profil {
        width: 500px;
    }

    .rdv-profil {
        text-align: center;
    }

}

@media (max-width: 620px) {
    
    .haut-profil ul {
        padding: 0;
    }

    .lettre-profil {
        width: 125px;
        height: 125px;
        font-size: 75px;
    }

    .haut-profil .photo-profil p {
        font-size: 18px;
    }

    .haut-profil ul span {
        font-size: 20px;
    }

    .haut-profil ul li {
        text-align: center !important;
        margin-top: 5px;
        font-size: 18px;
    }

    .bas-profil .rdv-profil {
        width: 300px;
        font-size: 18px;
    }

    .bas-profil a{
        font-size: 14px;
    }

    .aucun-rdv p {
        font-family: 'Synonym-Medium', Arial, Helvetica, sans-serif;
        font-size: 14px;
    }

    .aucun-rdv a {
        font-size: 12px;
    }

    .rdv-profil {
        text-align: center;
    }

@media (max-width: 430px) {

    .lettre-profil {
        width: 100px;
        height: 100px;
        font-size: 50px;
    }

    .haut-profil .photo-profil p {
        font-size: 18px;
    }

    .haut-profil ul li span {
        font-size: 24px;
    }

    .haut-profil ul li {
        font-size: 16px;
    }

    .bas-profil .rdv-profil {
        width: 250px;
        font-size: 18px;
    }
}

}

/*PAGE FORMULAIRE REPARATION*/

.page-reparation {
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 35px;

    margin-top: 350px;
    margin-bottom: 50px;
    position: relative;
}

.deco-reparation {
    position: absolute;
    top: -30vw;
    left: 0px;
    width: 100%;
    height: auto;
}

.deco-reparation svg {
    width: 100%;
    height: auto;
}

.text-reparation {
    width: 375px;
    text-align: center;
}

.text-reparation h1 {
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    font-size: 22px;
    color: var(--color-secondary-gs);
}

.text-reparation p {
    font-family: 'Synonym-Medium',Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: var(--color-primary-gs);
}

.form-reparation-gs {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: stretch;
    row-gap: 20px;

    width: 350px;
}

.form-reparation-gs textarea,
.form-reparation-gs input {
    width: 100%;
    font-family: 'Synonym-Semibold', Arial, Helvetica, sans-serif;
    font-size: 16px;
    padding: 10px 15px;
    border-radius: 15px;
    border: solid 2px var(--color-primary-gs);
    color: var(--color-primary-gs);
    align-self: center;
}

.form-reparation-gs textarea {
    min-height: 150px;
    max-height: 250px;
    resize: vertical;
}

.champ-rgpd-reparation {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-self: center;
    
    width: 100%;
    font-family: 'Synonym-Medium', Arial, Helvetica, sans-serif;
    font-size: 15px;
}

.form-reparation-gs textarea::placeholder,
.form-reparation-gs input::placeholder{
    color: var(--color-primary-gs);
}

.champ-rgpd-reparation label a{
    color: var(--color-primary-gs);
    transition: ease-in-out 0.3s;
}

.champ-rgpd-reparation label a:hover{
    color: var(--color-secondary-gs);
}

.champ-rgpd-reparation input {
    width: 30px;
}

.btn-envoyez-reparation {
    background-color: var(--color-primary-gs);
    color: var(--color-quaternary-gs);
    border: solid 2px var(--color-primary-gs);
    font-family: 'Amulya-bold', Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding: 10px 15px;
    border-radius: 20px;
    align-self: center;

    width: 110%;
    transition: ease-in-out 0.3s;
    cursor: pointer;
}

.btn-envoyez-reparation:hover {
    background-color: transparent;
    color: var(--color-primary-gs);
    border: solid 2px var(--color-primary-gs);
}

.custom-dropdown-type {
    position: relative;
    font-size: 16px;
    color: var(--color-primary-gs);
    font-family: 'Synonym-Semibold', Arial, Helvetica, sans-serif;
    cursor: pointer;
    user-select: none;
    align-self: center;
    width: 110%;
}

.custom-dropdown-type .selection-type {
    padding: 10px 12px;
    border: 2px solid var(--color-primary-gs);
    border-radius: 15px;
    background-color: transparent;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-dropdown-type .options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-quaternary-gs);
    border: 2px solid var(--color-primary-gs);
    border-radius: 25px;
    max-height: auto;
    min-width: 125px;
    overflow-y: auto;
    padding: 0px;

    display: none;
    z-index: 1000;
    margin-top: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.custom-dropdown-type .options li {
    margin: 10px;
    padding: 10px;
    list-style: none;
    text-align: center;
    border-radius: 15px;
    transition: ease-in-out 0.3s;
}

.custom-dropdown-type .options li:hover {
    background-color: var(--color-secondary-gs);
    color: var(--color-quaternary-gs);
}

.custom-dropdown-type.active .options {
    display: block;
}

.erreur-gs {
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: var(--color-secondary-gs);
}

.confirmation-reparation {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    width: 400px;
    position: relative;
}

.confirmation-reparation h1 {
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: var(--color-primary-gs);
    margin: 0;
}

.confirmation-reparation h1 span {
    color: var(--color-secondary-gs);
}

.confirmation-reparation p {
    font-family: 'Synonym-Medium', Arial, Helvetica, sans-serif;
    font-size: 20px;
    text-align: center;
    color: var(--color-primary-gs);
    margin: 0;
}

.confirmation-reparation a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background-color: transparent;
    border: solid 2px var(--color-primary-gs);
    font-family: 'Synonym-Semibold', Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: var(--color-primary-gs);
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 30px;
    transition: ease-in-out 0.3s;
}

.confirmation-reparation a svg {
    stroke: var(--color-primary-gs);
    transition: ease-in-out 0.3s;
}

.confirmation-reparation a:hover {
    background-color: var(--color-secondary-gs);
    border: solid 2px var(--color-secondary-gs);
    color: var(--color-quaternary-gs);
}

.confirmation-reparation a:hover svg {
    stroke: var(--color-quaternary-gs);
    transform: translate(3px);
}

.deco-confirmation{
    position: absolute;
    bottom: -160px;
    right: 10px;
}


/*RESPONSIVE FORMULAIRE REPARATION*/

@media (max-width: 850px) {

    .form-reparation-gs textarea,
    .form-reparation-gs input {
        width: 80%;
    }

    .custom-dropdown-type {
        width: 90%;
    }

    .champ-rgpd-reparation {
        width: 80%;
        font-size: 12px;
    }

    .champ-rgpd-reparation #rgpd-gs{
        width: 20px;
    }

    .btn-envoyez-reparation{
        width: 90%;
    }

    .page-reparation {
        gap: 0px;
    }

    .deco-reparation {
        top: -35vw;
    }
}

@media (max-width: 720px) {
    .page-reparation {
        margin-top: 200px;
    }

    .confirmation-reparation {
        margin-top: 50px;
    }

    .form-reparation-gs {
        margin-top: -80px;
    }

    .deco-reparation {
        top: -25vw;
    }
}

@media (max-width: 500px) {

    .confirmation-reparation {
        margin-top: 50px;
        width: 300px;
    }

    .confirmation-reparation h1 {
        font-size: 20px;
        text-align: center;
    }

    .confirmation-reparation p {
        font-size: 16px;
    }

    .confirmation-reparation a {
        font-size: 16px;
    }

    .form-reparation-gs {
        margin-top: -80px;
    }

    .deco-reparation {
        top: -28vw;
    }

    .deco-confirmation {
        right: 20px;
    }

    .deco-confirmation img{
        width: 90%;
    }
}

@media (max-width: 400px) {
    .page-reparation {
        margin-top: 200px;
    }

    .text-reparation h1 {
        font-size: 18px;
    }

    .text-reparation {
         width: 250px;
    }

    .text-reparation p {
        font-size: 14px;
    }

    .form-reparation-gs {
        margin-top: -80px;
    }

    .deco-reparation {
        top: -30vw;
    }

    .deco-confirmation {
        right: -10px;
    }

    .deco-confirmation img{
        width: 85%;
    }
}

/*PAGE FORMULAIRE ADHERENT*/

.form-adherent-gs {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 50px;
}

.form-adherent{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    margin-top: 200px;
    margin-bottom: 50px;
    width: 350px;
}

.form-adherent h1 {
    text-align: center;
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: var(--color-primary-gs);
}

.form-adherent h1 span {
    color: var(--color-secondary-gs);
}

.form-adherent p {
    margin-top: -10px;
    margin-bottom: 50px;
    text-align: center;
    font-family: 'Synonym-Medium', Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: var(--color-primary-gs);
}

.form-adherent-contenu{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    gap: 15px;
    width: 350px;
}

.form-adherent-contenu .nom-adherent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    gap: 10px;
}

.form-adherent-contenu .nom-adherent input {
    width: 153px;
}

.form-adherent-contenu textarea,
.form-adherent-contenu input {
    width: 100%;
    padding: 10px 15px;
    border: solid 2px var(--color-primary-gs);
    background-color: transparent;
    color: var(--color-primary-gs);
    border-radius: 15px;
    font-family: 'Synonym-Semibold', Arial, Helvetica, sans-serif;
    font-size: 18px;
    resize: vertical;
}

.form-adherent-contenu textarea {
    min-height: 50px;
    max-height: 125px;
}

.form-adherent-contenu input:focus {
    border-color: var(--color-secondary-gs);
}

.form-adherent-contenu textarea::placeholder,
.form-adherent-contenu input::placeholder {
    color: var(--color-primary-gs);
}

.rgpd-form-adherent {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    width: 100%;
}

.rgpd-form-adherent label a {
    color: var(--color-primary-gs);
    font-family: 'Synonym-Medium', Arial, Helvetica, sans-serif;
    font-size: 15px;
    transition: ease-in-out 0.3s;
}

.rgpd-form-adherent label a:hover {
    color: var(--color-secondary-gs);
}

#rgpd-gs {
    width: fit-content;
}

.form-adherent-contenu button {
    color: var(--color-quaternary-gs);
    background-color: var(--color-primary-gs);
    border: solid 2px var(--color-primary-gs);
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    font-size: 18px;
    border-radius: 15px;
    padding: 10px 15px;
    width: 110%;
    cursor: pointer;
    transition: ease-in-out 0.3s;
}

.form-adherent-contenu button:hover {
    color: var(--color-primary-gs);
    background-color: transparent;
    border-color: var(--color-primary-gs);
}

.form-confirmation-adherent {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.form-confirmation-adherent h1 {
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: var(--color-primary-gs);
}

.form-confirmation-adherent h1 span{
    color: var(--color-secondary-gs);
}

.form-confirmation-adherent p {
    font-family: 'Synonym-Medium', Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: var(--color-primary-gs);
}

.form-confirmation-adherent a {
    text-decoration: none;
    background-color: transparent;
    border: solid 2px var(--color-primary-gs);
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: var(--color-primary-gs);
    padding: 10px 15px;
    border-radius: 25px;
    transition: ease-in-out 0.3s;
}

.form-confirmation-adherent a:hover {
    border: solid 2px var(--color-secondary-gs);
    background-color: var(--color-secondary-gs);
    color: var(--color-quaternary-gs);
}

@media (max-width: 400px) {

}

/*PAGE MENTIONS LEGALES GS*/
.mentions-légales-gs {
    margin-top: 100px;
    margin-bottom: 100px;
    padding: 60px;
}

.mentions-légales-gs h1 {
    font-family: 'Plein-Bold', Arial, Helvetica, sans-serif;
    font-size: 32px;
    color: var(--color-secondary-gs);
}

.mentions-légales-gs h2 {
    font-family: 'Plein-Bold', Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: var(--color-primary-gs);
    margin-top: 50px;
}

.mentions-légales-gs h2 span {
    color: var(--color-secondary-gs);
}

.mentions-légales-gs p {
    font-family: 'Synonym-Medium', Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: var(--color-primary-gs);
}

.mentions-légales-gs p span {
    font-family: 'Synonym-Bold', Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: var(--color-primary-gs);
}

.mentions-légales-gs p a {
    font-family: 'Synonym-Bold', Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: var(--color-primary-gs);
}

.mentions-légales-gs p a {
    font-family: 'Synonym-Bold', Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: var(--color-secondary-gs);
    transition: ease-in-out 0.3s;
}

/*PAGE POLITIQUE DE CONFIDENTIALITE GS*/
.politique-confidentialité-gs {
    margin-top: 100px;
    margin-bottom: 100px;
    padding: 60px;
}

.politique-confidentialité-gs h1 {
    font-family: 'Plein-Black', Arial, Helvetica, sans-serif;
    font-size: 32px;
    color: var(--color-secondary-gs);
}

.politique-confidentialité-gs h2 {
    font-family: 'Plein-Bold', Arial, Helvetica, sans-serif;
    font-size: 28px;
    color: var(--color-primary-gs);
}

.politique-confidentialité-gs h3 {
    font-family: 'Plein-Semibold', Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: var(--color-primary-gs);
}

.politique-confidentialité-gs h4 {
    font-family: 'Plein-Semibold', Arial, Helvetica, sans-serif;
    font-size: 20px;
    color: var(--color-primary-gs);
}

.politique-confidentialité-gs p {
    font-family: 'Synonym-Medium', Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: var(--color-primary-gs);
}

.politique-confidentialité-gs ul {
    font-family: 'Synonym-Medium', Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: var(--color-primary-gs);
}

.politique-confidentialité-gs span {
    font-family: 'Synonym-Bold', Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: var(--color-primary-gs);
}

.politique-confidentialité-gs a {
    font-family: 'Synonym-Bold', Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: var(--color-secondary-gs);
    transition: ease-in-out 0.3s;
}

/*ERREUR 404 GARAGE SOLIDAIRE*/

.erreur-404-gs {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 200px;
    margin-bottom: 125px;
    width: 550px;
}


.erreur-404-gs img {
    width: 300px;
    height: 300px;
}


.erreur-404-gs h1 {
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    font-size: 28px;
    color: var(--color-primary-gs);
    text-align: center;
}

.erreur-404-gs a {
    font-family: 'Amulya-Bold', Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: var(--color-primary-gs);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-align: center;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 30px;
    border: solid 2px var(--color-primary-gs);
    transition: ease-in-out 0.3s;
}

.erreur-404-gs a:hover {
    color: var(--color-quaternary-gs);
    background-color: var(--color-secondary-gs);
    border: solid 2px var(--color-secondary-gs);
}

.erreur-404-gs a svg {
    stroke: var(--color-primary-gs);
    width: 10px;
    transition: ease-in-out 0.3s;
}

.erreur-404-gs a:hover svg {
    stroke: var(--color-quaternary-gs);
    transform: translateX(2px);
}

/* responsive erreur 404 gs*/

@media (max-width: 550px) {

    .erreur-404-gs {
        width: 300px;
    }

    .erreur-404-gs img {
        width: 200px;
        height: 200px;   
    }

    .erreur-404-gs h1 {
        font-size: 20px;
    }

    .erreur-404-gs a {
        font-size: 14px;
    }

    .erreur-404-gs a svg {
        width: 8px;
    }

}