body {
	margin: 0;
	padding: 0;
	overflow: visible;
  
}

/*----------------------creation du curseur et de sa forme----------------------*/
.cursor
{
	width: 20px;								/*taille de la souris*/
	height: 20px;								/*taille de la souris*/
	background-color: black;
	border: 1px solid black;				/*contour de la forme*/
	border-radius: 50%;							/*transformer en cercle*/
	position: absolute;							/*absolute pour laisser la main a java script*/
}


/* ----------------------definition du bouton ----------------------*/
.bouton{

	background-color: #f9f9fb;
	overflow: hidden;
	border: 1px solid #000;
	display: flex;                   /* permet de pouvoir regler comme on le souhaite la taille*/
	align-items: center;						/* centrer par rapport au haut*/
	justify-content: center;				/* centrer par rapport a la largeur*/
	font-size: 16px;
	font-weight: 700;								/*epaissir le texte*/
	text-decoration: none;					/* retire le soulignage du texte lien */
	color: #D3D3D3;
	-webkit-border-radius: 100px / 160px;				/* met le bouton ovale */
  	-moz-border-radius:    100px / 160px; 
  	border-radius:         100px / 160px; 
	z-index: 0;
  	position: relative;

}

.bouton .nav-link,
.bouton .nav-link:visited,
.bouton .nav-link:focus {
    text-decoration: none;
    transition: color 0.5s ease;
}

.bouton::before {
    content: '';
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    height: 100%;
    background: #425b8a;
    border-radius: 50% 50% 0 0;
    transition: all 0.5s ease;
    z-index: -1;
}

/* État hover */
.bouton:hover::before {
    top: 0;
    border-radius: 0;
}

.navbar-light .navbar-nav .bouton:hover .nav-link {
    color: white;
}

		
/* --------------------fin de definition du bouton ----------------------*/

/*--------------------positionnement des boutons ----------------------*/


.accueil{

	margin-top: 15px;
	margin-right: 10px;
	width: 90px;
	height: 35px;
}

.a_propos{

	margin-right: 10px;
	margin-top: 15px;
	width: 90px;
	height: 35px;
}
.l_equipe{

	margin-right: 10px;
	margin-top: 15px;
	width: 90px;
	height: 35px;
}

.prix_fonctionnement{

	margin-right: 10px;
	margin-top: 15px;
	width: 200px;
	height: 35px;
}

.credit_impot{

	margin-right: 10px;
	margin-top: 15px;
	width: 140px;
	height: 35px;
}

.contact{

	margin-top: 15px;
	width: 90px;
	height: 35px;
}

/*--------------------fin du positionnement des boutons ----------------------*/


/*--------------------parametrage des pages du portfiolo---------------------*/



/* about section image css */
.image_dim{
    width: 100%;

}

#prix_fonctionnement, #a_propos, #contact{
    
    padding-top: 10px; 
}


/*----------------------style des box de prix & fonctionnment-------------*/
.style_box{

	border-radius: 20px;
	background-color: white;
	box-shadow:rgb(214 214 214) 0px 10px 50px -10px; ;
	z-index: 0 ;
}


.style_box:hover{

	background-color: #425b8a;
	position: relative;
}

.style_box:hover h1, .style_box:hover p, .style_box:hover h2, .style_box:hover h3, .style_box:hover li, .style_box:hover sup{

	color: #fff;
}

.style_box:hover h4, .style_box:hover p1{

	color: #425b8a;

}

.style_box:hover .style_box_credit{

		background-color: white;

	}
/*----------------------fin du style des box de prix & fonctionnment-------------*/

/*----------------------style des box avec sans credit-------------*/

.style_box_credit{

	border-radius: 20px;
	background-color: #425b8a;
	text-align: center;
	height: 17vh;
	color: white;
	box-shadow:rgb(214 214 214) 0px 10px 50px -10px; ;
	z-index: 0 ;
}


/*----------------------fin du style des box avec sans credit-------------*/

/*----------------------section a acceuil------------------------------------------*/
section#accueil{
	background-color: #f9f9fb;
	
}

section#accueil h2{
	 font-size: 65px;
	 color: white;
}

section#accueil p{
	font-size: 30px;
	color: white;
}

section#accueil h2, p{
	text-align: center;

}
/*----------------------section a propos------------------------------------------*/
section#histoire{
	background-color: #f9f9fb;
	padding: 10px 15px;
}

section#histoire h2{
	text-align:center;
	line-height: 170%;
}


/*----------------------section l equipe------------------------------------------*/
section#l_equipe{
	background-color: #f9f9fb;
	padding: 10px 15px;
}

section#l_equipe h2{
	text-align:center;
	line-height: 170%;
}

/*----------------------section prix et fonctionnement------------------------------------------*/
section#prix_fonctionnement{
	background-color: #f9f9fb;
	margin: 0;
	padding-bottom: 40px;
}

section#prix_fonctionnement h2{
	text-align:center;
	line-height: 170%;
}

/*----------------------credit d'impot------------------------------------------*/
section#credit_impot{
	background-color: #f9f9fb;
	padding: 10px 15px;
}

section#credit_impot h2{
	text-align:center;
	line-height: 170%;
}
/*----------------------section contact------------------------------------------*/

section#contact{
	background-color: #f9f9fb ;
	padding: 100px 15px;
}

section#contact .container{
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	background-color: white;
	padding: 60px 10px;
	border-radius: 15px;
	box-sizing: border-box;
	box-shadow: rgb(214 214 214) 0px 10px 50px -10px;

}

section#contact .container .title{
	text-align: center;
	color: #2a2a2a;
	margin-bottom: 60px;
}

section#contact .container .title h6{
	font-size: 1.2em;
}

section#contact .container .title h3{
	font-size: 2.8em;
}

section#contact .container form{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 600px;
}

section#contact .container form input{
	width: 45%;
}

section#contact .container form input:hover,
section#contact .container form textarea:hover{
	border-bottom: 2px solid #425b8a;
}

section#contact .container form input,
section#contact .container form textarea{

	margin: 15px 0;
	/*padding: 10px;*/
	box-sizing: border-box;
	border: none;
	outline: none;
	border-bottom: 2px solid #e4e4ec;
	transition: 0.2s;
}

section#contact .container form textarea{
	width: 100%;
	resize: none;
	height: 100px;
	margin-bottom: 60px;
}

section#contact .container form button{
	width: 192px;
	height: 50px;
	border-radius: 8px;
	border: none;
	background-color: #425b8a;
	color: white;
	font-size: 1.2em;
	cursor: pointer;
	outline: none;
	margin: 0 auto;

}

section#contact .container form button:hover{
	transform: translate(-5px);
	box-shadow: rgb(214 214 214) 0px 10px 50px -10px;

}

@media screen and (max-width: 500px){
	section#contact .container form{
		flex-direction: column;
		width: 95%;
	}

	section#contact .container form input{
		width: 100%;
	}

	section#contact .container .title h6{
		font-size: 1em;
	}

	section#contact .container .title h3{
		font-size: 2em;
	}
}


/*----------------------Photos de l'équipe------------------------------------------*/

#credit_impot .icon-container-vertical {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    justify-items: center;
}

/* md et plus : 2 colonnes */
@media (min-width: 768px) and (max-width: 991px) {
    #credit_impot .icon-container-vertical {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* xs et sm : 1 colonne */
@media (max-width: 767px) {
    #credit_impot .icon-container-vertical {
        grid-template-columns: 1fr;
    }
}

.profile-icon-sap {
    width: 200px;
    height: 200px;
    background-image: url('../img/SAP.jpg');
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    margin: 1rem auto 0rem;
    border: 4px solid white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	outline: 2px solid rgb(32, 6, 6);

}

.profile-icon-urssaf {
    width: 200px;
    height: 200px;
    background-image: url('../img/URSSAF.jpg');
    background-size: 100%;
    background-position: center;
	background-repeat: no-repeat;
	background-color: white;
    border-radius: 50%;
    margin: 1rem auto 0;
    border: 4px solid white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	outline: 2px solid rgb(32, 6, 6);
}


.profile-card {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 10%);
    padding: 2.5rem;
    border-radius: 25px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(99, 102, 241, 0.2);
    max-width: min(1280px, 90%);
    margin: 0 auto;
}

.profile-icon-maths {
    width: 100px;
    height: 100px;
    background-image: url('../img/moi.png');
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    margin: 1rem auto 0;
    border: 4px solid white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	outline: 2px solid rgb(32, 6, 6);
}

.profile-icon-PC {
    width: 100px;
    height: 100px;
    background-image: url('../img/recherche.png');
    background-size: 145%;
    background-position: center;
    border-radius: 50%;
    margin: 1rem auto 0;
    border: 4px solid white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	outline: 2px solid rgb(32, 6, 6);
}

.profile-icon-fr {
    width: 100px;
    height: 100px;
    background-image: url('../img/recherche.png');
    background-size: 145%;
    background-position: center;
    border-radius: 50%;
    margin: 1rem auto 0;
	border: 4px solid white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	outline: 2px solid rgb(32, 6, 6);
}

.profile-icon-aide {
    width: 100px;
    height: 100px;
    background-image: url('../img/recherche.png');
    background-size: 145%;;
    background-position: center;
    border-radius: 50%;
    margin: 1rem auto 0;
    border: 4px solid white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	outline: 2px solid rgb(32, 6, 6);
}

.profile-card h3 {
            color: rgb(111, 173, 119);
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
}

.profile-card p {
            color: rgba(180, 47, 47, 0.9);
            font-size: 1rem;
}



/* ------section qui permet de gerer le mode grand ecran et petit ecran des photos de la section à l'equipe--------*/

.icon-container-vertical {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    justify-items: center;
}

@media (max-width: 991px) {
    .icon-container-vertical {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .icon-container-vertical {
        grid-template-columns: 1fr;
    }
}

/* Chaque bloc image + texte */
.profile-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0;
	gap: 0;
}

.profile-item p {
    margin-top: 0;
    padding-top: 0;
}

/*-------------------section histoire-----------------*/
.histoire-content {
    margin: 0 auto;
    line-height: 1.8;
    font-size: 1.1rem;
}

#histoire .section-title {
    text-align: center;
	margin-bottom: 0rem;
	margin-top: 0rem;
}
.histoire-content p {
    margin-bottom: 0rem;
    text-align: justify;
}

.histoire-content .intro {
    font-size: 1.3rem;
    color: var(--primary);
    margin-bottom: 0rem;
}

.histoire-content .highlight {
    font-size: 1.2rem;
    color: var(--primary);
    margin-top: 1.5rem;
    margin-bottom: 0rem;
}

.histoire-content .conclusion {
    font-size: 1.3rem;
    color: var(--primary);
    text-align: center;
    margin-top: 0rem;
    padding-top: 2rem;
    border-top: 2px solid var(--border);
}

.histoire-content strong {
    font-weight: 700;
    color: var(--text-dark);
}

#histoire .style_box:hover {
    background-color: transparent;
    position: static;
}

#histoire .style_box:hover h1, 
#histoire .style_box:hover p, 
#histoire .style_box:hover h2, 
#histoire .style_box:hover h3, 
#histoire .style_box:hover li, 
#histoire .style_box:hover sup {
    color: inherit;
}

#histoire .style_box:hover h4, 
#histoire .style_box:hover p1 {
    color: inherit;
}

#histoire .style_box:hover .style_box_credit {
    background-color: inherit;
}