@property --emphasis-color {

  syntax: "<color>";

  inherits: false;

/*  initial-value: #52A3AB;*/

	initial-value: #39A0AA;

}



@property --text-color {

  syntax: "<color>";

  inherits: false;

  initial-value: #A96329;

}



@property --text2-color {

  syntax: "<color>";

  inherits: false;

  initial-value: #9E8978;

}



@property --black-color {

  syntax: "<color>";

  inherits: false;

  initial-value: #242424;

}



@property --lightPeach-color {

  syntax: "<color>";

  inherits: false;

  initial-value: #FFF6EF;

}



@property --lightPeach2-color {

  syntax: "<color>";

  inherits: false;

  initial-value: #F4DECD;

}



@property --peach-color {

  syntax: "<color>";

  inherits: false;

  initial-value: #EFB78F;

}



@property --darkPeach-color {

  syntax: "<color>";

  inherits: false;

  initial-value: #DFA174;

}





@font-face {

  font-family: afacad;

  src: url('../font/afacad-variable.ttf');

  font-weight: 400 700;

  font-display: swap;

}



@font-face {

  font-family: brygada1918;

  src: url('../font/Brygada1918.ttf');

  font-display: swap;

}





*{

	font-family: afacad;

	font-size: 19px;

	color:var(--text-color);

	font-weight: 480;

	/*proposition GPT*/

	box-sizing: border-box;

	font-display: swap;

}



body{

	margin: 0px;

}



html, body{

	overflow-x: hidden;

}





ul{

	margin: 0px;

}



h1{

	font-family: brygada1918;

	font-weight: 500;

	font-synthesis: none;

	font-size: 45px;

	margin: 0px;

}



@media screen and (max-width: 1050px) {

	h1{

		font-size: 34px;

		font-weight: 600;

	}

}



h2{

	font-weight: 500;

	font-size: 37px;

	margin: 0px;

	line-height: 40px;

}



@media screen and (max-width: 1050px) {

	h2{

		font-size: 32px;

	}

}



h3{

	font-weight: 500;

	font-size: 27px;

	margin: 0px;

}



h4{

	margin-top: 0px;

	margin-bottom: 8px;

	font-weight: 650;

	font-size: 20px;

}



strong{

	font-weight: 680;

}



hr{

	width:50%;

	text-align: left;

  border: none;

  height: 0;

  padding: 0;

  background: none;

	margin-left:0;

	margin-top:15px;

	margin-bottom:15px;

 	border-top: 1px solid var(--text-color);

}



img{

	object-fit: cover;

	z-index: 2;

}



p{

	margin: 0px;

}



a{

	text-decoration: none;

}



pre, pre *{

	white-space: pre-wrap;       /* css-3 */

	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */

	white-space: -pre-wrap;      /* Opera 4-6 */

	white-space: -o-pre-wrap;    /* Opera 7 */

	word-wrap: break-word;       /* Internet Explorer 5.5+ */

}



blockquote {

	background-color: var(--lightPeach-color);

	padding: 20px;

	margin-inline-start: 10px;

  margin-inline-end: 10px;

}





.inlineLink, .articleContentContainer a {

	color: var(--emphasis-color);

	font-weight: 500;

	text-decoration: underline;

}





button, .button {

	color: white;

	background-color: var(--emphasis-color);

	border: none;

	padding: 5px 25px 5px 25px;

	border-radius: 6px;

	cursor: pointer;

	align-self: start;

}



button:hover, .button:hover {

	background-color: #59B2BA;

}



.groupButton{

	display: grid;

	gap:8px;

}





/* ***********Conteneurs*********** */



.section{

	position: relative;

	width: 100%;

	display: flex;

	flex-direction: column;

	align-items: center;

	padding-top:120px;

	padding-bottom:130px;

	padding-left: 2rem;

	padding-right: 2rem;

	gap: 90px;

}



.withAnchored{

	padding-bottom:200px;

}



@media screen and (max-width: 1050px) {

	.section{

		padding-top:80px;

		padding-bottom:80px;

		gap: 50px;

		padding-left: 6rem;

		padding-right: 6rem;

	}



	.withAnchored{

		padding-top:80px;

		padding-bottom:80px;

	}

}



@media screen and (max-width: 700px) {

	.section{

		padding-left: 1rem;

		padding-right: 1rem;

	}

}



.colored{

	background-color: var(--lightPeach-color);

}



.darkPeached{

	background-color: var(--darkPeach-color);

	color: white;

}



.darkPeached *{

	color: white;

}





.white{

	background-color: white;

}





.containerLarge{

	width: 100%;

	max-width: 1040px;

	margin: 0 auto;

}



.containerSmall{

/*	background-color: lightblue;*/

	max-width: 800px;

	margin: 0 auto;

	width: 100%;

}





.twoSideContainer{

	display: flex;

	flex-direction: row;

	justify-content: space-between;

	gap: 80px;

}



.equalChild{

	flex: 1;

}



@media screen and (max-width: 1050px) {

  .twoSideContainer{

  	flex-direction: column;

  	gap: 50px;

  }



  .twoSideContainer:has(> img:first-child){

	  flex-direction: column-reverse;

	}



	.twoSideContainer:has(> div.imageDecorationContainer2:first-child){

		flex-direction: column-reverse;

	}

}





.sideParagraphContainer{

	display: flex;

	flex-direction: column;

	gap: 23px;

	z-index: 1;

}



.sideParagraph{

	color:var(--text-color);

	max-width: 560px;

}



/* ************** styles de listes ************** */



li img {

  width: 28px;

  height: 30px;

  flex-shrink: 0;

}



.iconsList > li{

	padding-top: 15px;

	display: flex;

  align-items: top;

  gap: 10px;

}



.iconsList{

	list-style: none;

	margin-left: 0px;

	margin-right: 0px;

  padding-left: 0px;

  padding-right: 0px;

}



/* ************** styles d'images ************** */



.imageDecorationContainer {

  position: relative;

  display: inline-block;

}



.imageDecorationContainer img {

  position: relative;

}



.twoRoundCornersPic{

	border-radius:0px 140px 0px 140px;

	width: 490px;

	max-height: 387px;

	z-index: 2;

}



.archPic{

	position: relative;

	border-radius:2000px 2000px 0px 0px;

	width: 430px;

	max-height: 700px;

	z-index: 1;

}



.rectanglePic{

	border-radius:10px;

	width: 430px;

}



.twoThirdPic{

	margin-top: 50px;

	width: 100%;

	max-width: 800px;

	border-radius:0px 140px 0px 140px;

}





.halfSectionImage{

	position: absolute;

  right: 0;

  bottom: -480px;

  width: 40%;

  height: auto;

}



.anchoredAligner {

  position: absolute;

  bottom: -15px;

  right: 0;

  width: 45%;

  max-width: 800px;

  display: flex;

  justify-content: flex-end;

  pointer-events: none; /* au cas où ça chevauche des éléments cliquables */

}



.anchoredImage {

  width: 100%;

  height: auto;

  max-width: 100%;

}





@media screen and (max-width: 1050px) {

	.twoRoundCornersPic{

		width: 100%;

		max-width: 600px;

		border-radius:0px 110px 0px 110px;

	}



	.archPic{

		width: 100%;

		max-width: 600px;

	}



	.rectanglePic{

		width: 100%;

		max-width: 600px;

	}



	.twoThirdPic{

		width: 100%;

		border-radius:0px 70px 0px 70px;

		max-width: 600px;

	}



  .anchoredAligner {

    position: static;

    width: 100%;

    justify-content: center;

    margin-bottom: -90px;

  }



  .anchoredImage {

    max-width: 100%;

  }

}



/* ************** topBar ************** */



@media screen and (max-width: 1240px) {



  .topBar a:not(:first-child) {

  	display: none;

  }



  .topBar a.icon {

    float: right;

    display: block;

  }



  .topBar.responsive {

  	position: relative;

  }



  .topBar.responsive a.icon {

    position: absolute;

    right: 0;

    top: 0;

		padding: 30px 16px;

  }



  .topBar.responsive a {

    float: none;

    display: block;

    text-align: left;

		padding-left: 25px;

    padding-top: 20px;

    padding-bottom: 20px;

  }



	.logo img {

	  top: 17px;

	}



	.logo{

		height: 90px;

	}



	.topBar a.active::after {

	    width: 5px;

	    height: 100%;

	    top: 0;

	}

}





@media screen and (min-width: 1241px) { 

    .topBar {

        width: 100%; /* La barre prend toute la largeur */

        background-color: white;

        display: flex;

        justify-content: center; /* Centre le contenu */

    }



    .topBarContent {

        display: flex;

        align-items: center;

        justify-content: space-between;

        max-width: 1440px; /* Définir une largeur max pour limiter l'étalement */

        width: 100%;

        padding: 0 20px; /* Ajoute une marge intérieure */

        box-sizing: border-box;

    }



    .topBarContent a:first-child {

        margin-right: auto; /* Pousse le logo à gauche */

    }



    .topBarContent a:not(:first-child):not(.icon) {

        display: flex;

        gap: 20px; /* Espacement entre les liens */

    }



		.logo img {

		  top: 3px;

		}



		.topBar a.active::after {

	    bottom: 0; /* Colle la bordure en bas */

	    width: 100%;

	    height: 5px; /* Épaisseur de la bordure */

		}

}





.topBar{

	overflow: hidden;

	margin: 0px;

	background-color: white;

	z-index: 3;

	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

}



.topBar a {

  float: left;

  display: block;

  text-align: center;

  padding: 30px 16px;

  text-decoration: none;

}



.topBar a:has(button){

  padding-top: 14px;

  padding-bottom: 13px;

}



.topBar a:has(.logo){

  padding: 14px 16px;

}



.topBar a:hover {

  color: var(--text2-color);

}



.topBar a.active {

    position: relative;

    font-weight: 620;

}



.topBar a.active::after {

    content: "";

    background-color: var(--emphasis-color);

    position: absolute;

	  left:0;

}





/* Définit taille, position du logo */

.logo {

  position: relative;

  display: inline-block;

}



/* S'assure que les images s'étendent bien sur toute la largeur du conteneur */

.logo img {

  display: block;

  width: 210px;

  height: auto;

  position: absolute;

  left: 16px;

}



/* Positionne le logo par défaut au premier plan */

.logo-default {

  opacity: 1;

}



/* Le logo hover est placé exactement au même endroit, mais invisible par défaut */

.logo-hover {

  opacity: 0;

}



/* Au survol, inverse l'affichage */

.logo:hover .logo-default {

  opacity: 0;

  /* transition: opacity 0.05s ease; */

}

.logo:hover .logo-hover {

  opacity: 1;

  /* transition: opacity 0.05s ease; */

}



/* Désactive l'affichage de l'icone dans la topBar */

.topBar .icon {

  display: none;

}







/* ************** 1ere section ************** */



#header{

	padding-top: 120px;

	padding-bottom: 150px;

}



@media screen and (max-width: 1050px) {

	#header{

		padding-top: 100px;

		padding-bottom: 100px;

	}

}



.secondaryInfo{

	color: var(--text2-color);

}



.decorativeLine {

    position: absolute;

    display: block;

    top:50px;

    margin-left: -260px;

    width: 400px;

    z-index: 1; 

}



.imageDecorationContainer::before,

.imageDecorationContainer::after {

  content: "";

  position: absolute;

  width: 124px;

  height: 124px;

  background-color: var(--peach-color);

  border-radius: 50%;

  z-index: 0;

}



.imageDecorationContainer::before {

  top: 100px;

  left: -60px;

}



.imageDecorationContainer::after {

  bottom: -55px;

  right: -60px;

}



@media screen and (max-width: 1050px) {

	.imageDecorationContainer::after {

	  bottom: -40px;

	  right: 30px;

	}

}



.imageDecorationContainer2{

	position: relative;

	display: flex;

    flex-direction: column;

    justify-content: flex-end;

    height: 100%;

}



.imageDecorationContainer2::after{

  content: "";

  position: absolute;

  width: 124px;

  height: 124px;

  top: 50px;

  left: -50px;

  background-color: var(--peach-color);

  border-radius: 50%;

  z-index: 0;

}







/* ************** Hero section (header des pages secondaires en réalité) ************** */



.heroSection > .containerLarge {

	display: flex;

	flex-direction: column;

	gap:35px;

}



.heroSection{

	text-align: center;

	padding-bottom: 100px;

	padding-top: 100px;

}



@media screen and (max-width: 1050px) {

	.heroSection{

		padding-top:80px;

		padding-bottom:80px;

	}

}



/* ************** Sections avec arche ************** */



.sectionWithArch{

	padding-bottom: 0px;

}





.freeCall{

	font-size: 16px;

}



/* ************** Quote ************** */



.quote{

	background-color: var(--darkPeach-color);

	background-image: url('../img/curvedPathWhite1.svg'),url('../img/curvedPathWhite2.svg');

	background-position: bottom 0px left 0px, bottom 0px right -10px;

	background-repeat: no-repeat, no-repeat;

	background-size: 30% 100%, 35% 100%;

	padding-top: 55px;

	padding-bottom: 55px;

	overflow: hidden;

	display: flex;

	flex-direction: column;

	align-items: center;

	gap: 43px;

}



@media screen and (max-width: 1050px) {

	.quote{

		background-image: url('../img/curvedPathWhite2.svg');

		background-position: bottom -50px right -30px;

		background-size: 60% 100%;

	}

}





.quote span{

	color: white;

	font-size: 27px;

	max-width: 800px;

	text-align: center;

}





.quote button{

	align-self: center;

}



/* ************** Sections Articles ************** */



.buttonWithIcon{

	display: flex;

	flex-direction: row;

	gap:10px;

	align-items: center;  

	padding-left:15px; 

	padding-right:15px;

}



.highlightedArticlesContainer{

	display: flex;

	justify-content: space-between;

}



@media screen and (max-width: 1050px) {

	.highlightedArticlesContainer{

		flex-direction: column;

	}

}



.highlightedArticleContainer{

	margin-top: 20px;

	max-width: 300px;

}







.topimage img{

	border-radius: 5px;

}



@media screen and (max-width: 1050px) {

	.topimage{

		width: 100%;

	}

}





.articlesContainer{

	border-top: 1px solid #CACACA;

	margin-bottom: 30px;

	margin-top: 40px;

}



.articleContainer{

	display:flex ;

	flex-direction: row;

	align-items: center;

	justify-content: space-between;

	gap: 65px;

	padding-top: 30px;

	padding-bottom: 30px;

	border-bottom: 1px solid #CACACA;

}



.articleContainer h3:hover{

	color: var(--text2-color);

}





@media screen and (max-width: 1050px) {

	.articleContainer{

		gap: 20px;

		padding-top: 15px;

		padding-bottom: 15px;

	}

}



.leftArticleContainer{

	display:flex ;

	flex-direction: row;

	align-items: top;

	gap: 65px;

}



@media screen and (max-width: 1050px) {

	.leftArticleContainer{

		gap: 30px;

	}

}





@media screen and (max-width: 1050px) {

.chevronArticle

	{

		display: none;

	}

}





.actuImage img{

	border-radius: 5px;

}



.articleTextInfosContainer{

		display:flex ;

		flex-direction: column;

		gap: 16px;

}



@media screen and (max-width: 1050px) {

	.actuImage img

	{

		width: 100px;

		height: auto;

	}



	.summary{

		display: none;

	}



	.articleDate{

		font-size: 14px;

	}



	.articleTextInfosContainer h3{

		font-size: 19px;

	}



}



.articleDate{

	color: var(--text2-color);

	font-family: brygada1918;

	font-weight: 600;

	font-size: 17px;

}



.article-body img{

	width: 100%;

	margin-top: 25px;

	border-radius: 6px;

	max-height: 500px;

}



#voir-plus {

/*	width: 100%;

  display: flex;

  justify-content: center;*/

  margin-top: 40px;

}



#voir-plus-btn{

	margin: 0 auto;

	padding-left: 40px;

	padding-right: 40px;

}



/* ****************Article**************************** */



.articleHeader{

	padding-top: 23px;

	padding-bottom: 23px;

}





.articleContentContainer{

	display: flex;

	flex-direction: column;

	justify-content: flex-start;

	gap: 25px;

	max-width: 700px;

}

.articleContentContainer ul, .articleContentContainer p, .articleContentContainer blockquote p, .articleContentContainer h3{

	margin: revert;

}


.articleContentContainer h2{

	margin-bottom: 25px;

	margin-top: 35px;
	
}

.articleContentContainer blockquote p{

	margin: 0px;

}

.articleContentContainer blockquote {

	margin-left: 0px;

	margin-right: 0px;
}




/* ************** Section Top Selector ************** */



.topSelectorSection{

    display: flex;

    justify-content: center;

    border-bottom: 2px solid;

    border-color: var(--emphasis-color);

    padding-bottom: 0px;

    padding-top: 70px;

}





.topSelectorSection .tab {

	font-size: 27px;

    text-decoration: none;

    margin: 0 40px;

    text-align: center;

    position: relative;

    padding-bottom: 27px;

    transition: color 0.3s;

}





@media screen and (max-width: 1050px) {

.topSelectorSection .tab {

    margin: 0 30px;

	}

}





.topSelectorSection .tab:hover {

    color: var(--text2-color);

}



.topSelectorSection .tab.active{

	font-weight: 620;

}



.topSelectorSection .tab.active::after {

    content: "";

    position: absolute;

    bottom: 0; /* Colle la bordure en bas */

    left: 0;

    width: 100%;

    height: 5px; /* Épaisseur de la bordure */

    background-color: var(--emphasis-color);

}





/* ************** Affichage ou non du contenu des onglets ************** */



.tab-content .tab {

    display: none; /* Masque tous les contenus par défaut */

}



.tab-content .tab.active {

    display: block; /* Affiche le contenu de l'onglet actif */

}





/* ************** Sections Illustrations ************** */





.roundWidgetSection{

	display: flex;

	flex-direction: column;

	justify-content: center;

	align-items: center;

}



.roundWidgetSection > span{

	text-align: center;

	max-width: 500px;

}



.roundWidgetContainer{

	margin-top: 70px;

	display: flex;

	flex-wrap: wrap;

	justify-content: center;

	column-gap: 80px;

	row-gap: 33px ;

}



.roundWidget{

	display: flex;

	flex-direction: column;

	align-items: center;

	max-width: 128px;

	gap: 17px;

}



.roundIllustration{

	height: 100px;

	width: 100px;

	background-color: var(--lightPeach-color);

	border-radius: 1000px;

}



.roundIllustration > img{

	width: 100%;

	height: 100%;

}



.roundWidget > span{

	text-align: center;	

	line-height: 23px;

}





/* ************** Steps section ************** */



.textIconBlock{

	gap: 20px;

	padding: 30px;

	border-radius: 15px;

	display: flex;

	flex-direction: row;

}



.textContainer{

	display: flex;

	flex-direction: column;

	gap: 20px;

}



.secondParagraphDetails{

		background-color: var(--lightPeach-color);

}







/* ************** Prices ************** */



.pricesSection{

	background-color: var(--darkPeach-color);

	gap:15px !important;

}



.priceBlock{

	background-color: var(--lightPeach-color);

	max-width: 	430px;

	border-radius: 	15px;

	padding: 35px;

  display: flex;

  flex-direction: column;

  gap: 15px;

}



/*.priceBlock .secondaryInfo {

	font-size: 25px;

}*/



.priceTag{

		color: var(--emphasis-color);

		font-size: 	40px;

		font-weight: 600;

}





.subPrice{

		color: var(--emphasis-color);

		font-size: 	20px;

		font-weight: 500;

}



.divider {

  border: none;

  border-top: 1px dashed var(--text-color);

  margin: 10px 0;

  width: 100%;

}



.contentList{

	display: flex;

  flex-direction: column;

  gap: 13px;

}



.priceList {

  padding-left: 20px;

  display: flex;

  flex-direction: column;

  font-size: 15px;

  line-height: 1.4;

}



.optionBox{

	display: flex;

  flex-direction: row;

  justify-content: space-between;

  align-items: center;

  gap: 15px;

	background-color: white;

	padding-left: 11px;

	padding-right: 11px;

	padding-top: 9px;

	padding-bottom: 9px;

	border-radius: 10px;

}



.optionBox div{

	display: flex;

  flex-direction: row;

  align-items: center;

  gap: 15px;

}



.optionBox *{

	color: var(--emphasis-color);

}



.optionPrice {

  font-weight: bold;

}



.optionText{

	line-height: 1.2;

}





.optionIcon {

  width: 36px;

}



.priceBlock .groupButton{

	align-self: center;

	text-align: center;

}



.combinationBlock > span{

	color: var(--text2-color);

}





/* ************** A propos ************** */



.aboutContainer{

	max-width: 700px;

}



.approachContainer{

	flex-direction: row;

	gap:50px;

}





@media screen and (max-width: 1050px) {

	.approachContainer{

		flex-direction: column;

	}

}



.approachContainer h3 {

	margin-bottom: 10px;

	margin-top: 10px;

}





.timelineContainer {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  margin: 0 auto;

  padding-left: 50px;

}



.timelineItem {

  position: relative;

  width: 100%;

  max-width: 700px;

  margin: 2rem 0;

}





.timelineBlock {

  background: white;

  border-radius: 10px;

  padding: 1rem;

  max-width: 400px;

}



/* Positionnement des blocs à gauche */

.timelineItem.left .timelineBlock {

  margin-left: 0;

}



/* Positionnement des blocs à droite */

.timelineItem.right .timelineBlock {

  margin-left: auto;

}



.timelineBlock .year {

  display: block;

  font-weight: bold;

  color: var(--text2-color);

  margin-bottom: 0.5rem;

}





.formationInitialeLine {

  position: absolute;

  top: -150px;

  left: 50%;

  transform: translateX(-50%);

  width: auto;

  height: 140%;

  z-index: 0;

  pointer-events: none;

  display: block;

}





/* ************** Contact ************** */



#contactSection{

	background-color: var(--lightPeach2-color);

}





.emailButton{

	background-color: unset;

	border: dashed 1px var(--text-color);

}



.emailButton:hover{

	background-color: unset;

	color: var(--text2-color);

}



.emailButton{

	display: flex;

	flex-direction: row;

	align-items: center;

	gap: 10px;

	color: var(--text-color);

}



.stain{

	margin-top: 7px;

}



@media screen and (max-width: 1050px) {

	.stain{

		width: 36px;

		height: 17px;

	}

}







/* ************** Footer ************** */



.footerContact{

	background-color: var(--lightPeach2-color);

	padding: 25px;

	border-radius: 10px;

	line-height: 30px;

	gap:18px;

}



.footerContact .sideParagraph{

	display: flex;

	flex-direction: column;

	gap: 10px;

}



.noBullets{

	list-style-type: none;

	padding-left: Opx;

	padding-inline-start : 0px;

	line-height: 40px;

}



.footerLinks{

	padding-left: 25px;

	border-left: 1px solid;

	border-color: var(--text-color);

}



.footerLinks > li > a{

	text-decoration: none;

}



li > a.button {

	display: inline-block;

  margin-top: 12px;

  line-height: initial;

}



.socialIcons{

	width: 100%;

	display: flex;

	flex-direction: row;

	gap: 35px;

	margin-top: 10px;

}



.socialIcon{

	width: 25px;

	height: auto;

}



.footer2 {

	background-color: var(--lightPeach2-color);

	padding-top: 0px;

  	padding-bottom: 4px;

	color: var(--text2-color);

}



.footer2 > ul{

	text-align: center;

	list-style-type: none;

	padding-left: Opx;

	padding-right: Opx;

	padding-top: 7px;

	padding-inline-start : 0px;

}



.footer2 > ul > li{

	display: inline-block;

	color: var(--text2-color);

}



.footer2 > ul > li > a {

	display: inline-block;

	color: var(--text2-color);

}