html{
   
    --button-bg-color: #e4b8c3;
    --button-border-color:white;
    --button-box-shadow:  #e99fb1;
    --button-text-color: black;
    --services-box-shadow: #e99fb1;
    --photo-shadow: #2e2027;
    --socialmedia-title-color: purple;
    --navbar-bg-color: #e99fb1;
    --navbar-text-color: white;
    --nav-links-hover-color: black;
    --nav-links-hover-scale: scale(1.08);
    --container-bg-color: white; 
    font-size: 62.5%;
}

                    /********************************/             
                    /***  screen  width <= 310px ***/

.container{ 
    width:100%; 
    height: auto;
}

                    /*******************/
                    /***   Header   ***/

.en-tete__hero{
    max-width: 100%;
    margin: auto;
}

.en-tete__hero_hero-img{
    width: 100%;
}

.en-tete__logo{
    text-align: center;
    margin-top: -1.5rem;
}

.en-tete__logo_logo-img{
    width:30%;
    border-radius: 5%;
}

.limelight-regular {
    font-family: "Limelight", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.en-tete__title{
    text-align: center;
    margin-top: 3rem;
    width:100%;
}

.en-tete__title_metier{
    margin: 1rem auto 1.5rem;
    font-size: 1.5rem;
}

.en-tete__title_enseigne{
    font-weight: bold;
    font-size: 2rem;
    margin-bottom: 1.5rem;  
}

.en-tete__title_commune{
    font-weight: bold;
    font-size: 1rem;
}

.en-tete__contact{
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
}

.button{ 
    display: flex;
    min-width: 0.8rem;
    background: var(--button-bg-color);
    border: 1px solid var(--button-border-color);
    border-radius: 5px;
    color: var(--button-text-color);
    box-shadow: 7px 5px 5px var(--button-box-shadow);
    justify-content: space-evenly;
    align-items: center;
    font-weight: bold; 
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    font-size: 1.3rem;
    padding: 0.8rem; 
    margin: auto;
} 

button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

button:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

.en-tete__contact_icone{
    width: 1rem;
    height: 1rem;
    margin-right: 0.8rem;   
}

                    /**********************************/
                    /*** Main --> Section Services ***/

.services{
    display: flex;
    flex-direction: column;
    margin: auto;
    padding-top: 1rem;
    width:100%;
}

.services__title{
    font-weight: bold;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 3vw;
}

.services__lambda{
    display: flex;
    margin: 3vw auto ;
    align-items: center;
    box-shadow: 0 0 1rem var(--services-box-shadow);
    flex-direction: column;
    width: 80%;
    border-radius: 20px;  
}

.services__lambda_title{
    font-weight: bold;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 0.8rem;
    margin-top: 0.8rem;
}

.services__lambda_text{
    width: 90%;
    margin-bottom: 1em;
    font-size: 1.4em;
    text-align: justify;  
}

.services__lambda_photos{
    text-align: center;
}

                    /*********************************/
                    /***  Présentations des photos ***/

.photo{ 
    box-shadow: 0 0 2vw var(--photo-shadow);
    border-radius: 10px; 
    width: 35%; 
    margin: 20px 5%;  
}

@media(poiner:fine){       /***  zoom image only with mouse ***/
    .photo:hover{
        scale:2;
    }
}

.photo5{
    transform: rotate(0deg) translate(0vw, -4vw);
}

.photo8{
    transform: rotate(0deg) translate(0vw, -4vw);
}

.photo9{
    transform: rotate(0deg) translate(0vw, -4vw);   
}

.photo13{
    transform: rotate(0deg) translate(0vw, -5vw);
}

.photo18{
    transform: rotate(0deg) translate(0vw, -1vw);
}
 
                    /*********************/
                    /*** form contact ***/

.form-container {
    margin: 4rem auto 2rem;
    background: white;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 0 1rem var(--services-box-shadow);
    width: 100%;
    max-width: 500px;
    animation: fadeIn 0.5s ease;
}

.form-container h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
    font-weight: bold;
    font-size: 2rem;
}

.form-group {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
}

label {
    margin-bottom: 6px;
    font-weight: bold;
    color: #555;
    font-size: 1.5rem;
}

input, textarea {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 1.5rem;
    transition: all 0.2s ease;
}

input:focus, textarea:focus {
    outline: none;
    border-color: var(--services-box-shadow);
    box-shadow: 0 0 0 3px var(--button-box-shadow);
}

textarea {
    resize: vertical;
    min-height: 100px;
}

                    /********************/
                    /*** Social media ***/

.socialmedia{
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;   
    margin: 0 auto 1rem; 
}

.socialmedia-title{ 
    padding: 0.5rem;
    font-size: 1rem; 
    text-decoration: underline; 
    color: var(--socialmedia-title-color);
}

.socialmedia-icons{
    padding: 0.3em;
}

.socialmedia-img{
    width: 2rem;
    margin:  0.1em 1.5em;
}
.insta ,.fbook, .tictac{
    display: inline;
}

                    /****************************************/
                    /*** Styles de la barre de navigation ***/

.navbar {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: var(--navbar-bg-color);
    padding: 0.5rem 0.5rem;
    color: var(--navbar-text-color);
    position: -webkit-sticky; /* Compatibilité Safari */
    position: sticky;
    width: 100%; /* Ou toute largeur < 100% */
    z-index: 1000; /* Reste au-dessus du contenu */
    /* Optionnel : ajout d'une bordure ou ombre pour la visibilité */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
}

.navbar.navbar-bottom{
    bottom: 0;
    width:100%;
    height: 2.5em;
}

.navbar-bottom{
    bottom: 0;
    width:20%;
    min-width: 100px;  
}

.navbar-top{
    display: none;
}

.logo { 
    font-size: 1.5rem; 
    font-weight: bold; 
}

                    /**********************/
                    /*** Liste de liens ***/

.nav-links {
    list-style: none;
    display: flex;
    gap: 15px;
    margin: auto;
    padding: 0;
}

.nav-links a {
    text-decoration: none;
    font-size: 0.5rem;
    transition: color 0.3s;
}

.nav-links a:hover { 
    color: var(--nav-links-hover-color);
    transform: scale(1.5);
 }

                    /************************/
                    /*** Mentions Légales ***/

.mentions{
    width:80%;
    margin: auto;
    padding-bottom: 2rem;
    font-size: 2em;
}

.return-button{
    margin: auto;
}

.return-button a{
    color: var(--button-text-color);
}

.footer-nav{
    text-align: center;
    padding: 1rem 0px 1.8rem;
}

.mentions-link{
    font-size: 0.9rem;
}

                    /****************************************************/                   
                                /*** Sreen width > 310 px ***/

@media screen and (min-width: 310px) {
    .en-tete__logo{
        margin-top: -3rem;
    }
    .en-tete__title_metier{
        margin: 1.5rem 2rem 2rem;
        font-size: 2rem;
    }
    .en-tete__title_enseigne{
        font-size: 3rem;  
    }
    .en-tete__title_commune{
        font-size: 1.5rem;
    }
    .en-tete__contact_icone{
        width: 1.5rem;
        height: 1.5rem;
    }
    .button{
        min-width: 1.2rem;
        font-size: 1.3rem;
    }
    .socialmedia-img{
        width: 2.5rem;
        margin:  0.1em 2em;
    }
    .nav-links a{
        font-size: 3vw;
    }   
}
                    /****************************/
                    /** Screen width < 480 px **/

@media (max-width: 480px) {
    .form-container {
        padding: 20px;
    }
    input, textarea {
        font-size: 15px;
        padding: 11px;
    }
}

                    /*****************************/
                    /**  Screen width  > 570 px **/

@media screen and (min-width: 570px){
    .container{
        background-color: var(--container-bg-color);
        width: 70%;
        margin: auto; 
    }
    .en-tete__title_metier{
        margin: 1.5rem 4rem 2rem;
        font-size: 2.5rem;
    }
    .en-tete__title_enseigne{
        font-size: 3.5rem;
        margin-bottom: 2rem;  
    }
    .en-tete__title_commune{    
        font-size: 2rem;
    }
    .en-tete__contact{
        margin-bottom: 3rem;
        margin-top: 1rem;
    }
    .button{
        border-radius: 1rem;
        padding: 1rem;
        font-size: 1.5rem;
    }
    .services__title{
        font-size: 3rem;
        margin-bottom: 1rem;
    }
    .services__lambda{
        width:100%;
    }
    .services__lambda_title{
        font-size: 2.5rem;
        margin-bottom: 1rem;
        margin-top: 1rem;
    }
    .services__lambda_text{
        font-size: 1.8rem;
    }
    .photo:hover{
        scale: 1.5;
    }
    .form-container {
        padding: 20px;
    }
    input, textarea {
        font-size: 15px;
        padding: 11px;
    }
    .socialmedia-title{ 
        padding: 0.8rem;
        font-size: 1.8rem; 
    }
    .socialmedia-img{
        width: 40px;
        margin:  0.3em 4em;
    }
    .navbar.navbar-top{
        display: flex;
        width: 100%;
        position: -webkit-sticky;
        padding: 1rem 0.2rem;
        top: 0;     
    }
    .navbar-mentions.navbar-top{
        display: flex;
        margin: auto;
        width:10%;
        top: 0;
    }
    .navbar-bottom {
        display: none;
    }
    .nav-links a {
        font-size: 1.7rem;
    }
    .mentions-link{
        font-size: 1.2em;
    }
    .footer-nav{
        text-align: center;
        padding: 0em 0em 2em;
    }
}

                    /*******************************/
                    /***  Screen width > 1000 px ***/

@media screen and (min-width: 1000px){
    .container{
        background-color: #FFF;
        width: 70vw;
        margin: auto; 
    }
    .en-tete__logo{
        margin-top: -7rem;
    }
    .en-tete__title_metier{
        margin: 5rem 5rem 5rem;
        font-size: 4rem;
    }
    .en-tete__title_enseigne{
        font-size: 5rem;
        margin-bottom: 5rem;  
    }
    .en-tete__title_commune{    
        font-size: 3rem;
        margin-bottom: 5rem;
    }
    .button{
        border-radius: 10px;
        min-width: 10rem;      
    }
    .en-tete__contact_icone{
        width: 3rem;
        height: 3rem;
    }
    .en-tete__contact-text{
        font-size: 2rem;
        font-weight: bold; 
        margin-right: 0.8rem;  
    }
    .services__title{
        font-size: 4rem;
        margin-top: 5rem;
    }
    .services__lambda_title{
        font-size: 3rem;
        margin-bottom: 2rem;
        margin-top: 3rem;
    }
    .services__lambda_text{
        font-size: 2.8rem;
    }
    .nav-links{
        gap:30px;
    }
    .nav-links a{
        font-size: 3rem;
    }  
    .mentions-link{
        font-size: 1.5rem;
    }
}

                    /*************************/
                        /*** Body themes ***/

body.green{
    --button-bg-color: #d6e39d;
    --button-border-color: white;
    --button-box-shadow:  #aac855;
    --services-box-shadow: #A3CB38;
    --photo-shadow: #2e2027;
    --socialmedia-title-color: #009432;
    --navbar-bg-color: #A3CB38;
    --navbar-text-color: white;
    --nav-links-hover-color: black;
    --nav-links-hover-scale: scale(1.08);
    --container-bg-color: white;
}

body.orange{
    --button-bg-color: #f9e5a9;
    --button-border-color:black;
    /* --button-box-shadow:  #F79F1F; */
    --services-box-shadow: #F79F1F;
    --photo-shadow: #2e2027;
    --socialmedia-title-color: #EE5A24;
    --navbar-bg-color: #F79F1F;
    --navbar-text-color: white;
    --nav-links-hover-color: black;
    --nav-links-hover-scale: scale(1.08);
    --container-bg-color: white;
}

body.pink{
    --button-bg-color: #fec6ea;
    --button-border-color:white;
    --button-box-shadow:  #cf8ee6;
    --services-box-shadow: #D980FA;
    --photo-shadow: #2e2027;
    --socialmedia-title-color: #9980FA;
    --navbar-bg-color: #D980FA;
    --navbar-text-color: white;
    --nav-links-hover-color: black;
    --nav-links-hover-scale: scale(1.08);
    --container-bg-color: white;
}

body.blue{
    --button-bg-color: #ace9f4;
    --button-border-color:black;
    /* --button-box-shadow:  #87b4e1; */
    --services-box-shadow: #1289A7;
    --photo-shadow: #2e2027;
    --socialmedia-title-color: #1289A7;
    --navbar-bg-color: #1289A7;
    --navbar-text-color: white;
    --nav-links-hover-color: black;
    --nav-links-hover-scale: scale(1.08);
    --container-bg-color: white;
}

body.light-blue{
    --button-bg-color: #a9d9d7;
    --button-border-color:white;
    --button-box-shadow:  #5fb8cf;
    --services-box-shadow: #5fb8cf;
    --photo-shadow: #2e2027;
    --socialmedia-title-color: #1d5f70;
    --navbar-bg-color: #5fb8cf;
    --navbar-text-color: white;
    --nav-links-hover-color: black;
    --nav-links-hover-scale: scale(1.08);
    --container-bg-color: white;
}

body.purple{
    --button-bg-color: #d9a4b6;
    --button-border-color:black;
    /* --button-box-shadow:  #ce81a5; */
    --services-box-shadow: #B53471;
    --photo-shadow: #2e2027;
    --socialmedia-title-color: #833471;
    --navbar-bg-color: #B53471;
    --navbar-text-color: white;
    --nav-links-hover-color: black;
    --nav-links-hover-scale: scale(1.08);
    --container-bg-color: white;
}

body.brown{
    --button-bg-color: #cabb94;
    --button-border-color:black;
    --button-box-shadow:  #603c06;
    --services-box-shadow: #603c06;
    --photo-shadow: #2e2027;
    --socialmedia-title-color: #3c1d05;
    --navbar-bg-color: #603c06;
    --navbar-text-color: white;
    --nav-links-hover-color: black;
    --nav-links-hover-scale: scale(1.08);
    --container-bg-color: white;
}

body.grey{
    --button-bg-color: #ced6e0;
    --button-border-color:black;
    --button-box-shadow:  #a4b0be;
    --services-box-shadow: #a4b0be;
    --photo-shadow: #2e2027;
    --socialmedia-title-color: #57606f;
    --navbar-bg-color: #a4b0be;
    --navbar-text-color: white;
    --nav-links-hover-color: black;
    --nav-links-hover-scale: scale(1.08);
    --container-bg-color: white;
}