/* ==========================
   HUGUEN'S - STYLE GLOBAL
   ========================== */


* {
    box-sizing: border-box;
}


body {

    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    background: #0b0d10;
    color: #ffffff;

}


.container {

    width: 80%;
    max-width: 1100px;
    margin: auto;

}


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


header {

    padding: 100px 0;
    text-align: center;

}


h1 {

    font-size: 70px;
    letter-spacing: 8px;
    margin: 0 0 20px;

}


.slogan {

    font-size: 22px;
    margin-bottom: 15px;

}



.btn {

    display: inline-block;

    margin-top: 25px;

    padding: 15px 35px;

    background: #008cff;

    color: white;

    text-decoration: none;

    border-radius: 30px;

    border: none;

    font-size: 16px;

    cursor: pointer;

    transition: 0.3s;

}


.btn:hover {

    background: #00bfff;

    transform: translateY(-2px);

}



/* ==========================
   SECTIONS
   ========================== */


section {

    padding: 70px 0;

}


h2 {

    text-align: center;

    font-size: 35px;

    margin-bottom: 50px;

}



/* ==========================
   CARTES PRESTATIONS
   ========================== */


.cards {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 15px;

}



.card {

    background: #161a20;

    padding: 20px 15px;

    border-radius: 12px;

    text-align: center;

    box-shadow: 0 8px 20px rgba(0,0,0,0.35);

    transition: 0.3s;

}


.card:hover {

    transform: translateY(-5px);

}



.card i {

    font-size: 35px;

    color: #008cff;

}



.card h3 {

    font-size: 18px;

    margin: 15px 0;

}



.card p {

    font-size: 14px;

    line-height: 1.5;

    color: #cccccc;

}



/* ==========================
   SECTION DARK
   ========================== */


.dark {

    background: #111820;

}



.advantages {

    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 25px;

    text-align: center;

}



.advantages i {

    font-size: 35px;

    color: #00c8ff;

}



/* ==========================
   FORMULAIRE CONTACT
   ========================== */


.contact-form {

    max-width: 500px;

    margin: auto;

    display: flex;

    flex-direction: column;

    gap: 18px;

}



.contact-form input,
.contact-form select,
.contact-form textarea {


    width: 100%;

    background: #161a20;

    color: white;

    border: 1px solid #303640;

    padding: 16px;

    border-radius: 10px;

    font-size: 16px;

    font-family: inherit;

}



.contact-form textarea {

    resize: none;

    height: 160px;

}



.contact-form input::placeholder,
.contact-form textarea::placeholder {

    color: #aaaaaa;

}



/* Select */

.contact-form select {

    cursor: pointer;

    appearance: none;

    background-color: #161a20;

}



.contact-form select option {

    background: #161a20;

    color: white;

}



/* Focus */

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {

    outline: none;

    border-color: #008cff;

}



/* Bouton formulaire */

.contact-form .btn {

    align-self: center;

    margin-top: 10px;

}



/* ==========================
   ANTI SPAM INVISIBLE
   ========================== */


.hidden {

    display: none !important;

    position: absolute;

    left: -9999px;

}



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


footer {

    text-align: center;

    padding: 30px;

    background: #050608;

}



/* ==========================
   RESPONSIVE
   ========================== */


@media(max-width:1100px) {


    .cards {

        grid-template-columns: repeat(3,1fr);

    }


}



@media(max-width:800px) {


    .container {

        width: 90%;

    }



    h1 {

        font-size: 45px;

    }



    .cards {

        grid-template-columns: 1fr;

    }



    .advantages {

        grid-template-columns: 1fr;

    }


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


.footer-content {

    text-align:center;

}


.footer-links {

    margin-top:15px;

}


.footer-links a {

    color:#888;

    text-decoration:none;

    font-size:14px;

    transition:0.3s;

}



.footer-links a:hover {

    color:#008cff;

}



.footer-links span {

    color:#555;

    margin:0 10px;

}



/* ==========================
   NOTE CONFIDENTIALITE FORMULAIRE
   ========================== */


.privacy-note {

    display:block;

    width:100%;

    text-align:center !important;

    color:#666;

    font-size:11px;

    line-height:1.6;

    margin:10px auto 0;

}


.privacy-note a {

    color:#008cff;

    text-decoration:none;

}


.privacy-note a:hover {

    text-decoration:underline;

}

.contact-form .privacy-note {

    align-self:center;

}


}