:root {
    --noir-principale: #011222;
    --noir-principale: #191815;
    --color-text: #d7d7d7;
    --color-text-hover: rgb(181, 173, 173);

    --color-1:#191617; /* body */
    --color-1-bis:#201c1ec7; /* nav:hover */
    --color-2:#241F21; /* nav + footer */
    --color-3:#3a3235; /*  */
    --color-4:#524a4d; /* content */
    --color-1-old:#061826; /* body */
    --color-1-bis-old:#25313bce; /* nav:hover */
    --color-2-old:#0471a6; /* nav + footer */
    --color-3-old:#3685b5; /*  */
    --color-4-old:#89aae6; /* content */
    
    
}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body{
    margin: 0; 
    padding: 0;   
    width: 100%;
    font-family: sans-serif;
    background-color: var(--color-1);
    height: -webkit-fill-available; /* Peut être utilisé pour Safari sur iOS */
    min-height: 90vh; /* Pour les autres navigateurs */
}


a{
    color: var(--color-text);
    text-decoration: none;
}

.content{
    background-color: var(--color-4);
    color: var(--color-text);
    font-size: x-large;
    width: 75%;
    padding: 100px 5% 4% 5%;
    display: grid;
    min-height: 90vh;
    max-height: 100%;
}

@media screen and  (max-width: 1150px) {
    .content{
        min-height: 90vh;
        max-height: 100%;
    }
}


.sous-content{
    width: 50%;
}

.sous-content-right{
    justify-self: end;
}
.sous-content-left{
    justify-self: start;

}





/* ------- nav-bar.php ------- */
.nav {
    font-size: xx-large;
    padding: 15px;
    background-color: var(--color-2);
    color: var(--color-text);
    display: flex;
    justify-content: space-around;
    position: fixed;
    z-index: 9;
    left: auto;
    width: 100%;
    align-items: center;
}

.nav span {
    flex-grow: 1;
}

.nav .nav-links {
    display: flex;
    align-items: center;
    margin-right: 2.5%;
}



.nav-bouton {
    color: var(--color-text);
    margin: 2.5px;
    border: solid var(--color-text);
    border-width: 0px 0px 2px 0px;
}

.nav-bouton:hover {
    transition: all 300ms;
    border-width: 0px 0px 4px 0px;
    color: var(--color-text-hover);
}

.nav-toggle-open,
.nav-toggle-close {
    display: none;
    background: none;
    border: none;
    color: var(--color-text);
    cursor: pointer;
    width: 20%;
    font-size: larger;
    z-index: 100;
}

@media screen and  (max-width: 2000px) {
    .nav-toggle-close {
        display: none;
    }
    .nav-toggle-open {
        display: none;
    }
}
@media screen and  (max-width: 830px) {
    .nav .nav-links {
        display: none;
        flex-direction: column;
        width: 200px;
        height: 500px;
        position: absolute;
        right: 0;
        top: 0;
        background-color: var(--color-2);
        align-items: center;
        justify-content: center;
        z-index: 10;
        border-bottom-left-radius: 100px;
        margin-right: 0;
    }

    .nav .nav-links.show {
        display: flex;
    }

    .nav-toggle-open {
        display: block;
    }

    .nav-toggle-close {
        display: none;
    }

    .nav .nav-links.show ~ .nav-toggle-open {
        display: none;
    }

    .nav .nav-links.show ~ .nav-toggle-close {
        display: block;
    }
}




/* ------- vitrine.php ------- */



.cards-set{
    display: flex;
    flex-direction:row;
    justify-content: space-evenly;
}

.cards{
    flex:1;
    cursor: pointer;
    padding: .5%;
    height: 25%;
    background-repeat: no-repeat, no-repeat;
    background-size: cover;
    align-content: space-around;
    color: var(--color-text);
}

.cards:hover{
    transition: all 1s;
    flex:3;
    height: 40%;
}
.cards:not(hover){
    transition: all 0.5s;
    flex:1;
}




/* ------- footer.php ------- */
.footer{
    font-size: large;
    padding: 15px;
    background-color: var(--color-2);
    color: var(--color-text);
    display: flex;
    justify-content: space-around;
}

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

/* ------- index.php ------- */

.div-site-preview{
    display: flex;
    justify-content: center;
    width: 50%;
    justify-self: center;
}
.site-preview{
    transition: transform 0.5s ease;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: -webkit-fill-available;
}

.site-preview:hover{
    transform: scale(1.1);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.site-preview::before{
    transition: all 2s;
}
.site-preview::after{
    transition: all 2s;
}

.item-site-preview{
    background-color: rgba(0, 0, 0, 0.5); 
    color: white;
    padding: 20px 40px;
    border-radius: 10px;
    font-size: 2rem;
}

/* ------- Tarif.php ------- */

.div-tarif{
    justify-self: center;
    width: fit-content;
}
.div-tarif p{
    text-decoration: underline;
}
.div-tarif ul{
    text-align: start;
}


/* ------- @media ------- */

@media screen and (max-width: 1400px){
    .nav{
        font-size: x-large;
    }
}

@media screen and (max-width: 1300px){
    .div-site-preview{
        width: 75%;
    }
}
@media screen and (max-width: 1200px){
    .nav{
        font-size: large;
    }
}

@media screen and (max-width: 730px){
    .nav-bouton{
        margin: 7.5px;
    }
    
    .content{
    font-size: large;
    }
    .div-site-preview{
        width: 100%;
    }

}
@media screen and (max-width: 560px){
    .cards-set{
        flex-direction: column;
        font-size: x-large;
    }    
    .cards{
        transition: all 0.7s;
        transform: scale(0.9);
    }
}
@media screen and (max-width: 520px){
    .content{
        width: auto;
    }  
    .nav{
        width: auto;
        position: relative;
    }
}