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


 /* Couleurs principales */
:root {
    --background-color-dark : #131f26;
    --background-color :#1b2c36;
    --text-color: #1c6372;
    --accent-color: #fcad60;
    --accent-color-2 : #e95245;
    
    --text-color-lgt : #e9e6e0;
    
    --font-title: "Comfortaa", sans-serif;
    --font-txt: "Source Sans 3", sans-serif;
    
}

body {
    color: var(--text-color-lgt);
    background-color: var(--background-color);
    font-family: var(--font-txt);
    min-height: 100vh; 
    background: linear-gradient(var(--background-color-dark),  var(--background-color)) 50% 50%/calc(100% ) calc(100% ) no-repeat;
}

#all-prestations hr:after{
    content : "Réalisation";
}

hr {
    background: radial-gradient(circle, var(--text-color) 0%, transparent 100%);
    border: none;
    height: 2px; /* Ajuste la hauteur de la ligne ici */
    width: 100%; /* Largeur de la ligne */
    background-size: 50% 75%; /* Taille du cercle de gradient */
    background-repeat: no-repeat;
    animation: neonMove 5s linear infinite;
}

/* Animation pour déplacer le gradient de gauche à droite */
@keyframes neonMove {
    0% {
        background-position: -100% 0; /* Commence à gauche */
    }
    100% {
        background-position: 200% 0; /* Se déplace vers la droite */
    }
}
 
.container, .container-fluid {
    width: 100%;
    /*margin: 15px auto;*/
    padding: 15px;   
    
}

.footer .container{
    padding: 0;
}

.btn-primary{
    color: var(--text-color);
    background-color: var(--accent-color);
    border: var(--background-color-dark);
    font-family: var(--font-txt);
}

.btn-primary:hover{
    color: var(--accent-color);
    background-color: var(--text-color);
}

.btn-secondary{
    color: var(--accent-color);
    background-color: rgba(0, 0, 0, 0.1);
    border: var(--background-color-dark);
    font-family: var(--font-txt);
}

.btn-secondary:hover, .btn-secondary:focus{
    color: var(--text-color);
    background-color: rgba(0, 0, 0, 0.1);
}



.header {
   font-family: var(--font-title);
}



.navbar {
    display: flex; /* Flexbox pour aligner les éléments */
    justify-content: space-between; /* Espace entre logo, titre et menu */
    align-items: center;
    width: 100%;
}

.header-title {
    display: flex;
    justify-content: center; /* Centrer le titre */
    align-items: center;
    text-align: center;
    font-family: var(--font-title);
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--accent-color);
}

.brand-text {
    color: var(--text-color); /* Couleur pour les lettres C */
     margin-left: 5px;
}

/* Style du bouton hamburger */
.navbar-toggler {
    border: none;
    background-color: transparent;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(252, 173, 96)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Style du menu */
.navbar-nav .nav-link {
    font-weight: bold;
    color: var(--accent-color);
}

.navbar-nav .nav-link:hover {
    color: var(--text-color);
}

.navbar-toggler:active, .navbar-toggler:focus{
    border:none;
}

@media (max-width: 991px) {
    .navbar {
        justify-content: space-between;
    }
    .navbar-nav {
        text-align: center;
        margin-top: 10px;
    }
    .navbar-brand{
        order: 1;
    }
    .navbar-toggler{
        order : 2;
    }
    .navbar-collapse{
        order: 4;
    }
    .header-title{
        order: 3;
    }
}


/* Ensure the container is full-width */
.container-fluid {
    padding: 0; /* Remove any default padding */
    margin: 0;
}



.presentation {
    text-align: center;
}


p, li {
    font-family: var(--font-txt);
    font-weight: 400;
    font-style: normal;
    font-size: 1.25em;   
}

.presentation p{
    text-align: justify;
}

.realisations p, .prestations p{
    text-align: left;
}



h1, h2, h3, h4, h5 {
    text-align: center;
    color: var(--accent-color);
    font-family: var(--font-title);
}

.whyCC strong{
    color: var(--accent-color);
    font-family: var(--font-title);
}


.card {
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Légère ombre */
    background-color: var(--background-color-dark); /* Couleur de fond personnalisée */
    overflow: hidden;
}

.card-title {
    text-align: center;
    color: var(--accent-color);
    font-family: var(--font-title);
}

.card-text {
    font-family: var(--font-txt);
    color: var(--text-color-lgt);
}

.card-footer {
    margin-top: auto; /* Assure que le footer est poussé vers le bas, tout en restant flexible */
    text-align: center; /* Centrer le bouton */
    background-color: rgba(0, 0, 0, 0.1); /* Supprimer l'arrière-plan du footer si nécessaire */
}

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

.card-footer a:hover{
    text-decoration: none;
    color: var(--accent-color);
}





.services, .realisations-grid {
    display: flex;
    justify-content: space-around;
    gap: 20px;
}

.service, .realisation {
    text-align: center;
}


.realisationD-item{
    text-align: center;
}

.realisationD-item img{
    max-width: 600px;
}

.modal-content{
    background-color: var(--background-color-dark);
}

.btn-close{
    background-color: var(--accent-color);
}

.contact form {
    display: flex;
    flex-direction: column;
    align-items: center;
     
}

.contact .form-control{
    background: var(--text-color-lgt);
}

.contact label{
    color: var(--text-color);

}


.contact form button {
    background: var(--accent-color);
    color: var(--text-color);
    border: none;
    cursor: pointer;
}

.footer {
    color: var(--text-color);
    background-color: var(--accent-color);
    text-align: center;
    
}

.footer p{
    font-family: var(--font-txt);
    font-weight: 400;
    font-style: normal;
    font-size: 1em; 
}