* {
    box-sizing: border-box;
}


h1{
    font-family:"Inter" ;
    font-weight: bold;
    font-size:64px;
}
h2{
    font-family: "Inter" ;
    font-weight: Black;
    font-size:20px;
}

h3{
    font-family: "Inter" ;
    font-weight: Black;
    font-size:40px;
}

h4{
    font-family: "Inter" ;
    font-weight: Regular;
    font-size:40px;
}

h6{
    font-family: "Inter" ;
    font-weight: Regular;
    font-size:16px;
}


li {
  font-family: "Inter" ;
    
}

body{
    margin: 0px;
}

.p-tpetit {
  font-size: 12px;
}

.p-petit {
  font-size: 14px;
}

p{
    font-family: "Inter" ;
    font-weight: Mixed;
    font-size:20px;
}


.texterouge {
            color: #F83333;
        }

    .texteblanc {
            color: #FFFFFF;
        }

     #texterouge {
           color: #F83333;
     }







    .simplement {
            color: #FFFFFF;
        }

    .header {
      background-color: #FFFFFF;
      border: 2px;
      padding: 20px;
    }

    .button {
      background-color: #CD3F3F;
      border: 2px solid transparent ;
      border-radius: 5px ;
      color: #FFFFFF;
      cursor: pointer;
      display: inline-block;
      text-decoration: none;
    }



    html {
    scroll-behavior: smooth;
    }

    .btn {
    display: inline-block;
    padding: 12px 20px;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-family: sans-serif;
    }



            .hero {
              display: flex;
			  flex-direction: column;
              align-items: center;
              justify-content: space-between;
              padding: 50px 10% 100px 10%;
              
              min-height: 60vh;
              background: url("../Image/Fond.png") no-repeat center / cover;
            }
			
			.hero-content {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				padding: 80px 10%;
			}

            .hero-text {
                width: 50%;
            }

            .hero-text h1 {
              font-size: 48px;
              margin-bottom: 20px;
            }

            .hero-text h1 span {
                color: #c43d3d;
            }

            .subtitle {
                font-weight: bold;
                margin-bottom: 20px;
            }

            .hero-image {
                width: 45%;
                display: flex;
                justify-content: center;
            }

            .hero-image img {
                max-width: 100%;
                height: auto;
            }

            .btn {
                background-color: #c43d3d;
                color: white;
                padding: 12px 25px;
                border-radius: 8px;
                border: none;
                cursor: pointer;
            }













            .Missions {
                background-color: #292A2C;
                padding: 70px;
                position: relative;
                overflow: visible;   
            }

                .Missions::after {
                    content: "";
                    position: absolute;
                    top: -100px;        
                    left: 50%;
                    transform: translateX(-50%);  
                    width: 110%;       
                    height: 200px;      
                    background: #292A2C;
                    border-radius: 50%;
                    z-index: 10;         
                    pointer-events: none; 
                }




            #Nosmissionscomptablestitre {
                    
                    text-align: center;

                    

                }

                .section1,
				.section2,
				.section3,
				.section4,
				.section5,
				.section6 {
					background-color: #46484B;
					border: 1px solid #FFFFFF;
					border-radius: 20px;
					color: #FFFFFF;
					filter: drop-shadow(0px 0px 5px #000000);
					background: linear-gradient(#38393c, #242527);
					width: fit-content;
					padding-top: 50px;
					padding-left: 20px;
					padding-right: 40px;
					padding-bottom: 15px;
					position: relative;
					transition: 0.3s ease;
				}

                .section1Image{
                    position: absolute;
                    top: -50px; /* fait dépasser l'image vers le haut */
                    left: 40px; /* position horizontale */
                }





                /* Pour le responsive (tablettes et mobiles) */
                    @media (max-width: 992px) {
                      .section {
                        grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur tablette */
                      }
                    }

                    @media (max-width: 600px) {
                      .section {
                        grid-template-columns: 1fr; /* 1 colonne sur mobile */
                      }
                    }





                .section {
                  display: grid;
                  /* Crée 3 colonnes de largeur égale */
                  grid-template-columns: repeat(3, 1fr); 
                  /* Espace entre les cartes */
                  gap: 80px 20px; /* ---------->   si besoin decaler les cadre mettre 100px 20px */
                  padding: 40px;
                  max-width: 1200px;
                  margin: 0 auto; /* Centre le bloc sur la page */
                }

                .section2Image{
                    position: absolute;
                    top: -50px; /* fait dépasser l'image vers le haut */
                    left: 40px; /* position horizontale */
                }

                .section3Image{
                    position: absolute;
                    top: -50px; /* fait dépasser l'image vers le haut */
                    left: 40px; /* position horizontale */
                }

                .section4Image{
                    position: absolute;
                    top: -50px; /* fait dépasser l'image vers le haut */
                    left: 40px; /* position horizontale */
                }

                .section5Image{
                    position: absolute;
                    top: -50px; /* fait dépasser l'image vers le haut */
                    left: 40px; /* position horizontale */
                }

                .section6Image{
                    position: absolute;
                    top: -50px; /* fait dépasser l'image vers le haut */
                    left: 40px; /* position horizontale */
                }

                .section4collab{
                    background-color: #46484B;
                    border: 1px solid #FFFFFF ;
                    border-radius: 100px ;
                    color: #FFFFFF;
                    filter: drop-shadow(0px 0px 5px #000000);
                    background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(114, 114, 114, 0.5));
                    width: fit-content;
                    padding-left: 20px;
                    padding-right: 20px;
                 }

                .section5collab{
                    background-color: #46484B;
                    border: 1px solid #FFFFFF ;
                    border-radius: 100px ;
                    color: #FFFFFF;
                    filter: drop-shadow(0px 0px 5px #000000);
                    background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(114, 114, 114, 0.5));
                    width: fit-content;
                    padding-left: 20px;
                    padding-right: 20px;

                 }
				 
				.section1:hover,
				.section2:hover,
				.section3:hover,
				.section4:hover,
				.section5:hover,
				.section6:hover {
					background:
						linear-gradient(#CD3F3F, #7B2626),
						url("../Image/Authec_logo2.png") center / 100% no-repeat;
					background-blend-mode: screen;
					transform: translateY(-5px);
				}
					  




    .Relation {
            background-color: #FFFFFF;
            border: 2px;
            padding: 40px;
            display: flex;          /* Met les éléments côte à côte */
            align-items: center;    /* Centre verticalement */
            gap: 160px;              /* Espace entre image et texte */
            padding-left: 250px;
        }


        .textRelation {
            padding-right: 10%;
        }









           
        

            /* Section principale */
                                        .pourquoi-section {
                                            background-color: #292A2C; /* Couleur sombre du fond */
                                            color: white;
                                            padding: 150px 20px;
                                            display: flex;
                                            justify-content: center; /* Centre le contenu horizontalement */
                                        }

                                        .container {
                                            display: flex;
                                            align-items: center; /* Centre verticalement l'image et le texte */
                                            max-width: 1200px;
                                            gap: 50px; /* Espace entre l'image et le texte */
                                        }

                                        /* Image */
                                        .image-wrapper {
                                            flex: 1;
                                            display: flex;
                                            justify-content: center;
                                        }

                                        .image-wrapper img {
                                            max-width: 100%;
                                            height: auto;
                                        }

                                        /* Contenu textuel */
                                        .content-wrapper {
                                            flex: 1;
                                        }

                                        .content-wrapper h2 {
                                            font-size: 2.5rem;
                                            margin-bottom: 30px;
                                            font-weight: bold;
                                        }

			/* Blocs accordéon */
			.accordion-list {
				display: flex;
				flex-direction: column;
				gap: 15px; /* Espace entre chaque bloc */
			}

			.accordion-item {
				background-color: #333333;
				border: 2px solid #444;
				border-radius: 8px;
				padding: 15px 20px;
				width: 100%; /* Force tous les blocs à avoir la même largeur */
				transition: border-color 0.3s ease;
				cursor: pointer;
			}

			.accordion-item:hover {
				border-color: #e63946; /* Accent rouge au survol */
			}

			.accordion-item h6 {
				margin: 0;
				font-size: 1.1rem;
			}

			.accordion-header{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			
			.accordion-header::after {
				content: "v";
				font-size: 1.5rem;
				color: #e63946;
				transition: transform 0.3s ease;
			}

			/* Rotation quand ouvert */
			.accordion-item.active .accordion-header::after {
				transform: rotate(180deg);
			}


			.accordion-content{
				max-height:0;
				overflow:hidden;
				transition: max-height 0.3s ease;

			}

			.accordion-content p{
				margin:0;
				padding:20px;
			}

			.accordion-item.active .accordion-content{
				max-height:200px
			}


                                        






    .Facturation {
            align-items: center;      /* centre verticalement */
            justify-content: space-between;
            background-color: #FFFFFF;
            border: 2px;
            padding: 100px;
            padding-right: 300px;
            padding-left: 300px;
            background: linear-gradient(#292A2C, #FFFFFF);
            display: flex;
            
        }


        .Facturationcontour {
            background-color: #38393C;
            border: 2px;
            padding: 20px;
            border: 1px solid #FFFFFF ;
            border-radius: 30px ;
            color: #FFFFFF;
            filter: drop-shadow(0px 0px 5px #000000);
            width: fit-content;
            display: flex;

            background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
            background-size: 16px 16px; /* espace entre les points */
        }



        .FacturationText {
            align-items: center;      /* centre verticalement */
            /*justify-content: space-between;*/
            margin : 20px;
            width: 80%;
        }

        
        .Facturationcontournotreobjectif {

            background-color: #FFFFFF;
            border: 2px;
            padding: 20px;
            margin : 20px;
            border: 1px solid #FFFFFF ;
            border-radius: 30px ;
            color: #000000;
            /*width: fit-content;*/
            display: flex;
            align-items: center; /* aligne verticalement */
            gap: 10px; /* espace entre texte et image */
            
        }




        .Solution {
            background: linear-gradient(
                to bottom,
                #595959 0%,
                #595959 60%,
                #BFBFBF 100%
            );
            padding: 60px 20px;
            color: #FFFFFF;
    
            /* Ajoute ces lignes pour centrer les images */
            display: flex;
            flex-direction: column; /* Aligne le titre en haut et les images en dessous */
            align-items: center;    /* Centre tout le contenu horizontalement */
            gap: 30px;              /* Ajoute un espace entre le titre et les images */
        }

                #Solutiontitle {
                        text-align: center;
                }



                /* Crée un nouveau conteneur pour les images dans ton CSS */
                .container-images {
                    display: flex;
                    justify-content: center; /* Centre les cadres horizontalement */
                    gap: 15px;               /* Espace entre chaque cadre */
                    flex-wrap: wrap;         /* Permet le retour à la ligne sur mobile */
                }

                .container-images img {
                    border-radius: 10px;     /* Pour arrondir les coins comme sur le modèle */
                    
                }


        .container-images {
            filter: grayscale(100%);
            transition: 0.3s;
        }

        

 





    .direction{
        padding: 100px;
        background-color: #292A2C;
        border: 2px;
         
        color: #FFFFFF;
        background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
        background-size: 16px 16px; /* espace entre les points */

    }
            #Directiondelentreprise{
                text-align: center;
                    
                   
            }

                
            .directionvignette {
                display: flex;
                justify-content: center; /* Centre les deux cartes horizontalement */
                align-items: stretch;     /* Permet aux deux cartes d'avoir la même hauteur */
                gap: 50px;              /* Espace entre la carte de Thierry et celle d'Audrey */
                flex-wrap: wrap;        /* Permet de passer à la ligne sur petit écran (mobile) */
                margin-top: 40px;
            }

            /* Style commun pour les cartes individuelles */
            .AssocieedeThierry, .AssocieedeAudreyMagueur {
                display: flex;          /* Pour aligner l'image et le texte à l'intérieur */
                align-items: center;
                gap: 20px;
                border: 1px solid #FFFFFF;
                padding: 20px;
                border-radius: 10px;
                max-width: 500px;       /* Empêche les cartes d'être trop larges */
                
            }   


            .AssocieedeThierry {
                    color: #FFFFFF;
                    background-color: #38393C;
                    border: 1px solid #FFFFFF ;
                    border-radius: 20px ;
                    color: #FFFFFF;
                    filter: drop-shadow(0px 0px 5px #000000);
                    width: fit-content;
                    padding-top: 10px;
                    padding-left: 20px;
                    padding-right: 40px;
                    padding-bottom: 15px;
                    display: flex;
                    align-items: center; /* centre verticalement */
                    gap: 20px; /* espace entre image et texte */
                    
                }

                        .AssocieedeThierrytexte{
                            padding-left: 50px;
                    
                        }

            .AssocieedeAudreyMagueur{
                    color: #FFFFFF;
                    background-color: #38393C;
                    border: 1px solid #FFFFFF ;
                    border-radius: 20px ;
                    color: #FFFFFF;
                    filter: drop-shadow(0px 0px 5px #000000);
                    width: fit-content;
                    padding-top: 10px;
                    padding-left: 20px;
                    padding-right: 40px;
                    padding-bottom: 15px;
                    display: flex;
                    align-items: center; /* centre verticalement */
                    gap: 20px; /* espace entre image et texte */
                    
                }
                
                        .AssocieedeAudreyMagueurtexte{
                    
                    
                        }










                        .Accompagnement {
                            background-color: #FFFFFF;
                            padding: 90px;
                            padding-bottom: 120px;
                            display: flex;          /* Met l'image et le bloc de texte côte à côte */
                            align-items: center;    /* Centre verticalement le texte par rapport à l'image */
                            gap: 80px;              /* Espace important entre l'image et le texte */
                            max-width: 1200px;      /* Optionnel : évite que le bloc soit trop large sur grand écran */
                            margin: 0 auto;
                        }

                        .photo-equipe {
                            width: 45%;             /* L'image prend un peu moins de la moitié */
                            height: auto;
                            border-radius: 15px;    /* Pour arrondir les coins comme sur la photo */
                        }




                        .image-container {
                            position: relative;
                            display: inline-block;
                        }

                        .image-container img {
                            width: 400px;
                            border-radius: 20px;
                            position: relative;
                            z-index: 2;
                        }

                        .dots {
                            position: absolute;
                            top: -20px;
                            left: -60px;
                            width: 400px;
                            height: 400px;
                            z-index: 1;

                            background-image: radial-gradient(#000 2px, transparent 2px);
                            background-size: 15px 15px;
                        
                        }




                        .Accompagnementtexte {
                            flex: 1;                /* Le texte prend tout l'espace restant */
                            display: block;         /* Le texte doit s'empiler verticalement (par défaut) */
                            text-align: left;       /* Aligne le texte à gauche */
                        }

                        /* Style pour les listes pour enlever les puces par défaut si besoin */
                        .Accompagnementtexte ul {
                            list-style-type: disc;
                            margin-bottom: 20px;
                        }

                        .Accompagnementtexte h2 {
                            font-size: 2rem;
                            margin-bottom: 20px;
                        }



    
	.container-images {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.image-card {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    cursor: pointer;
}

.image-card img {
    width: 280px;
    height: 400px;
    object-fit: cover;
    display: block;

    transition: 0.4s ease;
}

.image-label {
    position: absolute;
    left: 10px;
    bottom: 10px;

    background-color: white;
    color: black;

    padding: 12px 22px;
    border-radius: 8px;

    font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 600;

    transition: 0.3s ease;
}

/* Hover */

.image-card:hover img {
    transform: scale(1.01);
}

.image-card:hover .image-label {
    background-color: #c43d3d;
    color: white;
}
	
	
	
	
	
	
	
	
	
	
	





    .Footer {
            background-image: url(../Image/Authec_logo.png); 
            background-color: #292A2C;
            background-repeat: no-repeat;
            background-position: right 40px center;
            background-size: 40%; 
            padding: 20px;
            color: #FFFFFF;
        }

        /*.Footer{
            display:flex;
            justify-content:space-between;
            align-items:flex-start;
        }*/

        /* Optionnel : pour la petite ligne blanche en bas */
        .Footertextetitrebarre p:last-child {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid rgba(255,255,255,0.1);
            width: 80%; /* Longueur de la ligne */
        }


        .Footertexte1{
            margin: 50px;
            position:relative;
        }

        .Footer-gauche{
            max-width:600px;
        }


        .Footertexte2{
            margin: 50px;
        }

        .Footertextetitre{
            margin-bottom: 20px;
        }

        .Footertexteinfosmail{
            display: flex;
            align-items: center; /* aligne verticalement */
            gap: 10px; /* espace entre image et texte */
        }

        .Footertexteinfostelephone{
            display: flex;
            align-items: center; /* aligne verticalement */
            gap: 10px; /* espace entre image et texte */
        }



        .Footerlogo img{
            width:300px;
            opacity:0.2;
        }

        /* Ton image logo */
            .Footertextetitrebarreimage {
                position:absolute;
                right:60px;
                bottom:20px;
                top:50%;
                transform:translateY(-50%);
            }


        .Footertextetitrebarreimage img{
            width:300px;

        }






    .Line_red {
            background-color: #CD3F3F;
            padding: 22px;
        }








    /*th, td {
        background-color: #CD3F3F;
    }

    th {
        color:blue;
    }*/


   


    /*.section6 th {  */
	
	
.site-header {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 20px;
}

.navbar {
    width: 85%;
    max-width: 1500px;
    min-height: 95px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;

    padding: 15px 30px;

    background: rgba(220, 220, 220, 0.9);

    border: 4px solid rgba(255,255,255,0.9);
    border-radius: 999px;

    backdrop-filter: blur(10px);

    flex-wrap: wrap;
}

.navbar a {
    font-family: "Inter", sans-serif;
    font-size: 20px;
    color: #111;
    text-decoration: none;

    transition: 0.3s ease;
}

.navbar a:hover {
    color: #c43d3d;
}

.navbar-logo img {
    height: 65px;
    width: auto;
}

@media (max-width: 1650px) {

    .navbar {
        gap: 25px;
        padding: 20px;
    }

    .navbar a {
        font-size: 16px;
    }

    .navbar-logo img {
        height: 50px;
    }
}

@media (max-width: 1200px) {

    .navbar {
        border-radius: 30px;
        gap: 15px;
    }

    .navbar a {
        font-size: 14px;
    }
}