/* ==========================
   RESET CSS
========================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==========================
   VARIABLES
========================== */

:root {
    /* Palette Premium */

    --gold: #d4af37;       /* Or principal */
    --gold-light: #f4e2a1; /* Reflets */
    --gold-dark: #8c6a17;  /* Ombres */

    --white: #ffffff;
    --black: #0b0b0b;

    --background: #111111;
    --background-card: #1b1b1b;

    --text: #f5f5f5;
    --text-secondary: #cfcfcf;

    --border: rgba(212, 175, 55, 0.35);

    --radius: 12px;
    --radius-round: 50%;

    --shadow: 0 10px 30px rgba(0, 0, 0, 0.25);

    --transition: 0.35s ease;
}


/* ==========================
   BASE
========================== */

html {
    scroll-behavior: smooth;
}

body {
    /* min-height: 100vh; */
    background-color: var(--black);
    color: var(--text);

}

/* ==========================
   HEADER
========================== */
.container {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.PourquoiMeChoisir,
.MesRealisations,
.fonctionnement {
    overflow: hidden;
}

header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    position: relative;
}


.Logo{
    width: 100px;
    border-radius: 100%;
}
h1{
    font-size: 1.3rem;
    color: var(--gold);
    line-height: 1;
    font-weight: 500;
}
h1 span{
    font-size: 1.1rem;
    color: var(--text);
}
.Logo_Nom {
    display: flex;
    justify-content:flex-start;
    align-items: center;
    gap: 6vw;
}

/*___________________________________MENU BURGER_______________________*/

.burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 45px;
    height: 45px;

    background: transparent;
    border: none;
    cursor: pointer;
    padding-right: 2%;
}

.burger span {
    display: block;
    width: 30px;
    height: 2px;
    background-color: white;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.burger {
    display: flex;
}

.menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #080808;
}

.menu.active {
    display: block;
}

.menu ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    list-style: none;
    margin: 15px;

}

/*============= FIN MENU BURGER==============*/

/*menu*/

header a{
    color: var(--text);
    text-underline-offset: 4px;
}




/* ==========================
   FIN HEADER
========================== */


/* ==========================
   MAIN
========================== */

.Hero{
    display: flex;
    flex-direction: column;
}
h2 {
    font-size: clamp(1rem, 4vw, 1.5rem);
    color: var(--gold);
    text-align: center;
    padding-block: 20px;
}
h3{
    font-size: clamp(2rem, 4vw, 4rem);
    color: var(--text);
    text-align: center;
    padding: 2%;
}
h3 span{
    color: var(--gold);
}
.Hero p{
    font-size: clamp(1.2rem, 5vw, 1.5rem);
    color: var(--text-secondary);
    text-align: justify;
    padding: 5% 2%;
}
.Grid-Services{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20%; /*jouer au niveau du pourcentage pour centrer les items services en fonction de la taille de l'écran*/
    padding: 4% 2%;
    align-items: center;
    margin: 0 auto;

}
.Services{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content:center;
    width:  100%; 
    margin: 0 auto;
}

.icon{
    width: 20px;
    height: 20px;
}
.Items_Services{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5%;
}

h4{
    color: var(--gold);
}
.Services p{
    color: var(--text-secondary);
    font-size: 0.9rem;
}


.BoutonMain, .BoutonMerci{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5%;
    gap: 5%;
}
.BoutonMain a:first-child, .card-project a, .BoutonMerci a:last-child{
    background: linear-gradient(
    90deg,
    var(--gold-dark) 0%,
    #b98d22 25%,
    var(--gold) 50%,
    #b98d22 75%,
    var(--gold-dark) 100%
);
    border: 1px solid rgba(244, 226, 161, 0.25);
    box-shadow: 0 0 10px rgba(212, 175, 55, .15),
    inset 0 1px 0 rgba(255, 255, 255, .15);
}
.BoutonMain a:last-child, .card-project .VoirLeSite, .BoutonMerci a:first-child{
    background: Transparent;

    border: 1px solid var(--border);
}
.BoutonMain a{
    padding: 5px;
}
.BoutonMain a, .card-project a, .BoutonMerci a{
   color: var(--text);
   font-weight: 900;
   text-decoration: none;
   /* padding: 3px ; */
   border-radius: 5px;

}
.Site_Pro{
    display: block;
    width: 70%;
    padding-top: 10% ;
    margin: 0 auto;
}

/* ==========================
   FIN MAIN
========================== */


/* ==========================
   SECTION POURQUOI ME CHOISIR
========================== */

.PourquoiMeChoisir, .MesRealisations{
    
    padding-block: 15%;
    padding-inline: 2%;
}
.PourquoiMeChoisir h2, .MesRealisations h2{
    text-align: center;
    font-weight: 900;
    font-size: 1.2rem;
    color:var(--gold-dark);
}
.section-title{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.section-title .Trait1{
    width: 80px;
    height: 2px;

    background: linear-gradient(
        to right,
        transparent,
        var(--gold-dark)
    );
}
.section-title .Trait2{
    width: 80px;
    height: 2px;

    background: linear-gradient(
        to left,
        transparent,
        var(--gold-dark)
    );
}
.PourquoiMeChoisir p, .MesRealisations p, .fonctionnement p{
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    /* line-height: 1.5; */
    padding-top: 3%;
    padding-bottom: 8%;
}
.grid-card{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5%;
}
.card{
    padding: 2%;
    background-color: var(--background-card);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    text-align: center;
}
.card .icon{
    width: 35px;
    height: auto;
    padding-top: 10%;
    display: block;
    margin: 0 auto;

}
.card h4{
    color: var(--text);
    padding-top: 10%;
    padding-bottom: 10%;
}
.card p{
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.3;
    font-weight: 400;
}

/* ==========================
   FIN SECTION POURQUOI ME CHOISIR
========================== */


/* ==========================
   MES REALISATIONS
========================== */
.MesRealisations p{
    line-height: 1.5;
}

.grid-project{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8%;
}

.card-project img{
    width: 80%;
    padding-bottom: 5%;
}
.card-project h5{
    line-height: 2;
    font-size: 1rem;
}
.card-project small{
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.5;
}
/*STYLE DU BOUTON CARDPROJECT DANS LA PARTIE MAIN EN HAUT ASSOCIER A BOUTONMAIN*/
.card-project a{
    padding-block: 5px;
    padding-inline: 8px;
    margin-top: 10%;
}
.card-project .VoirLeSite{
    font-weight: 400;
    margin-top: 4%; /*pour diminuer l'espace entre le h5 & les boutons*/
}
.card-project span{
    color: var(--gold-dark);
}
.card-project{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.modele{
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

/* ==========================
   FIN MES REALISATIONS
========================== */


/* ==========================
   FONCTIONNEMENT
========================== */


.hr-gold{
    width: 80%;
    height: 2px;
    margin: 0 auto;
    border: none; /*Retire la bordure par défaut qu'applique le navigateur pour laisser place à la couleur souhaité*/
    background: linear-gradient(
    to right,
    transparent 0%,
    var(--gold-dark) 30%,
    var(--gold) 50%,
    var(--gold-dark) 70%,
    transparent 100%
);
}

.fonctionnement p{
    padding: 10%;
}
.Frise{
    display: flex;
    align-items: center;
    justify-content: center;
}
.Frise p{
    display: flex;
    font-weight: lighter;
    padding: 0;

}
.numero{
    padding: 0.2rem 0.5rem;
    border: 1.5px solid var(--gold-dark);
    border-radius: 100%;
}
.trait, .traitDefin, .traitDebut{
    width: 15% ;
    height: 1.5px;
    border: none;
    background: linear-gradient(
        to right,
        transparent,
        var(--gold),
        transparent
    );
}
.traitDebut, .traitDefin{
    width: 18px;
}

.Frise .doree{
    color: var(--gold);
}
.Grid-Etapes{
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    width: 80%;
    margin: 0 auto;
}
.card-etapes{
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background-color: var(--background-card);
    margin-top: 2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.card-etapes h5{
    font-size: 1.1rem;
    text-align: center;
    padding-bottom: 1rem;

}
.card-etapes p{
    font-size: 0.95rem;
    font-weight: normal;
    color: var(--text-secondary);
    text-align: center;
    padding: 0;
}

/* ==========================
   FIN FONCTIONNEMENT
========================== */

/* ==========================
   BOUTON DE SCROLL
========================== */
/* .btn-scroll{
    position:fixed;
    bottom: 25px;
    right: 25px;
    z-index: 1000;
    color: var(--gold-light);
    background-color:rgba(11, 11, 11, 0.8);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
    border-color: var(--border);
    font-size: 15px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;


     /* Bouton caché au départ */
   /* opacity: 0;
    visibility: hidden;
    transform: translateY(10px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;
} */
 .btn-scroll {
    position: fixed;

    right: 20px;
    bottom: 20px;

    width: 55px;
    height: 55px;

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

    border: 1px solid var(--gold);
    border-radius: 50%;

    background: #0a0a0a;
    color: var(--gold);

    font-size: 15px;
    cursor: pointer;
    z-index: 1000;

    box-sizing: border-box;
    /* caché avant le scroll */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;
}
.btn-scroll.visible {
    /* Le bouton devient visible */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ==========================
   FOOTER
========================== */

.grid-footer{
    display: flex; /*passer en grid pour écran supérieur à 480px avec les paramètre gride en commentaire en dessous*/
    flex-wrap: wrap;
    justify-content:space-around;
    /* grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); */
    gap: 25px;
    /* gap: 10px; */
    margin-top: 100px;
    background: var(--background-card) ;
    padding: 25px;
}
.logo-description img{
    border-radius: 100%;
}
.logo-description h6{
    font-size: 14px;
    color: var(--gold);
    letter-spacing: 1px;
    font-weight: 500;
}
.logo-description h6 span{
    color: var(--text);
    font-size: 12px;
}
.logo-description{
    display: flex;
    align-items: center;
    gap: 5px;
}
.elements-footer p{
    font-size: 14px;
    color: var(--text-secondary);
}
.elements-footer{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
footer h6{
    font-size: 15px;
    letter-spacing: 1px;
    font-weight: 600;
    padding: 2px;

}
.nav-footer, .services-footer, .contact-footer{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.nav-footer a, .services-footer a{
    color: var(--text-secondary);
    text-decoration: none;
}
.contact-footer a{
    color: var(--gold);
    letter-spacing: 0.8px;
    font-size: 13px;
    text-decoration: none;
}
.nav-footer h6, .contact-footer h6, .services-footer h6{
    text-decoration: underline 1px solid;
    text-underline-offset: 4px;
}
.copyright-mentions{
    background-color: var(--background);
    padding: 15px 8px;
}
.copyright-mentions p{
    font-size: 11px;
}
.copyright-mentions{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.mentions a{
    font-size: 11px;
    color: var(--gold-dark);
    gap: 5px;
    text-decoration: none;
}
.mentions{
    display: flex;
    flex-direction: column;
}