/**************************************
    -- Css Table of Content
    01.Generale Style
    02.Preloader Style
    03.Navber Style
    04.Home Section Style
    05.About Section Style
    06.Skill Section Style
    07.Services Section Style
    08.Counter Section Style
    09.Project Section Style
    10.Review Section Style
    10.5 Actu / blog
    11.Contact Section Style
    12.Map Section Style
    12.Footer Section Style
 *************************************/
 
/**************************************
 * 01. Generale Style
 *************************************/

@import url("bootstrap.min.css");
@import url("font-awesome.min.css");
@import url("pe-icon-7-stroke.css");
@import url("magnific-popup.css");
@import url("odometer.min.css");
@import url("owl.carousel.min.css");
@import url("owl.theme.default.min.css");

body {
	background: #fff;
	color: #333;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 14px;
	font-weight: normal;
	line-height: 24px;
	overflow-x: hidden;
	margin: 0 auto;
	padding: 0;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: 'Josefin Sans', sans-serif;
	font-weight: normal;
	color: #333;
	line-height: 1.3;
}

a {
	/*color: #ea1538;*/
	color: #007bff;
	text-decoration: none !important;
	-moz-transition: all 0.5s ease-in-out 0s;
	-ms-transition: all 0.5s ease-in-out 0s;
	-o-transition: all 0.5s ease-in-out 0s;
	-webkit-transition: all 0.5s ease-in-out 0s;
	transition: all 0.5s ease-in-out 0s;
}

img {
	max-width: 100%;
}

a:hover {
	/*color: #ea1538;*/
	color: #0069d9;
	-moz-transition: all 0.4s ease-in-out 0s;
	-ms-transition: all 0.4s ease-in-out 0s;
	-o-transition: all 0.4s ease-in-out 0s;
	-webkit-transition: all 0.4s ease-in-out 0s;
	transition: all 0.4s ease-in-out 0s;
}

a:hover, a:focus {
	color: #ea1538;
	text-decoration: none;
}

p {
	padding: 0;
	margin: 0;
	font-size: 18px;
	color: #000;
	line-height: 24px;
	font-family: 'Josefin Sans', sans-serif;
}
@media (max-width: 768px) {
    p, .section-left-content p {
			font-size: 18px;
			line-height: 24px;
		}
}

ul li {
	margin: 0;
	font-size: 18px;
}

.z-index {
	z-index: 9;
}

.position-relative {
	position: relative!important;
}

.form-control:focus {
	box-shadow: none;
	outline: 0 none;
	border-bottom: 1px solid #ea1538;
}

.btn:focus {
	outline: none !important;
	box-shadow: none;
}

button:focus {
	outline: 0 none;
	box-shadow: none;
}

.button:focus {
	outline: none;
	box-shadow: none;
}

.button {
    display: inline-block;
    padding: 10px 30px;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 14px;
    text-transform: capitalize;
    letter-spacing: 0.7px;
    font-weight: 700;
    border: 2px solid #ea1538;
    border-radius: 35px;
    background: #ea1538;
    transition: all 500ms ease;
    cursor: pointer;
    color: #fff;
    margin-top: 25px;
}

.button:hover {
	color: #000;
	background: transparent;
    border: 2px solid #ea1538;
}
.secondary-wrapper {
	display: block;
    width: 100%;
    padding: 50px;
	background: #f7f7fa;
}

dl, ol, ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.bg-fixed {
	background-attachment: fixed;
}

.bg-img {
	background-size: cover;
	background-repeat: no-repeat;
}

.section-padding {
	padding: 70px 0;
}
.section-padding1 {
	padding: 70px 0 0 0;
}
.section-title {
    text-align: center;
    margin-bottom: 65px;
}
.section-title h2 {
	font-size: 2.4rem;
  	font-weight: bold;
  	margin-bottom: 15px;
	/*font-weight: 900;
    font-size: 45px;*/
    line-height: 1.3;
    color: #333;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}

.display-table {
	width: 100%;
	height: 100%;
	display: table;
}

.table-cell {
	display: table-cell;
	vertical-align: middle;
}

.mr-top-50 {
	margin-top: 50px;
}

.back-to-top {
	position: fixed;
	display: none;
	color: #fff;
	width: 40px;
	height: 42px;
	line-height: 40px;
	border-radius: 5px;
	right: 25px;
	bottom: 20px;
	text-align: center;
	/*background: #ea1538;*/
	background: #007bff;
	transition: background 0.5s;
	z-index: 11;
}

.back-to-top i {
	color: #fff;
	font-size: 20px;
}

.v-middle {
	position: absolute;
	width: 100%;
	top: 50%;
	left: 0;
	-webkit-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
}

.valign {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.maslin-page-wrapper {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    z-index: 1;
}
/* Line */

.lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  margin: auto;
  width: 84vw;
  z-index: -1;
}

.lines .line {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  left: 50%;
  background: #f2f2f2;
  overflow: hidden;
}

.lines .line::after {
  content: "";
  display: block;
  position: absolute;
  height: 15vh;
  width: 100%;
  top: -50%;
  left: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(75%, #000000), to(#000000));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 75%, #000000 100%);
  -webkit-animation: run 15s 0s infinite;
          animation: run 15s 0s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.49, 0.01, 0.43, 0.97);
          animation-timing-function: cubic-bezier(0.49, 0.01, 0.43, 0.97);
}

.lines .line:nth-child(1) {
  margin-left: -50%;
}

.lines .line:nth-child(1)::after {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.lines .line:nth-child(2) {
  margin-left: -25%;
}

.lines .line:nth-child(2)::after {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

.lines .line:nth-child(3) {
  margin-left: 25%;
}

.lines .line:nth-child(3)::after {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}

.lines .line:nth-child(4) {
  margin-left: 50%;
}
.lines .line:nth-child(4)::after {
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}

@-webkit-keyframes run {
  0% {
    top: -50%;
  }
  100% {
    top: 110%;
  }
}

@keyframes run {
  0% {
    top: -50%;
  }
  100% {
    top: 110%;
  }
}

/**************************************
 * 02.Preloader Style
 *************************************/
#preloader-wapper {
	width: 100%;
	height: 100vh;
	top: 0;
	overflow: hidden;
	position: fixed;
	z-index: 99999999;
	display: flex;
}

#preloader-wapper::before,#preloader-wapper::after {
	position: absolute;
	content: "";
	width: 100%;
	height: 50%;
	background: rgb(9, 7, 12);
	top: 0;
	left: 0;
	transition: .4s;
	-webkit-transition: height .4s;
	-moz-transition: height .4s;
	-ms-transition: height .4s;
	-o-transition: height .4s;
}

#preloader-wapper::after {
	top: auto;
	bottom: 0;
}

#preloader-wapper.loaded::before,#preloader-wapper.loaded::after {
	height: 0%;
}

.loader-middle {
	position: relative;
	width: 50%;
	height: 1px;
	overflow: hidden;
	margin: auto;
	transition: all .8s;
	-webkit-transition: all .8s;
	-moz-transition: all .8s;
	-ms-transition: all .8s;
	-o-transition: all .8s;
	z-index: 555;
}

.loader-middle::before {
	position: absolute;
	content: "";
	width: 0;
	height: 100%;
	left: 50%;
	background: #ea1538;
	animation: showLine 700ms ease-in-out 0s forwards;
	-o-animation: showLine 700ms ease-in-out 0s forwards;
	-webkit-animation: showLine 700ms ease-in-out 0s forwards;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
}

@keyframes showLine {
	0% {
		width: 0;
		opacity: 0;
	}

	100% {
		width: 100%;
		opacity: 1;
	}
}

@-o-keyframes showLine {
	0% {
		width: 0;
		opacity: 0;
	}

	100% {
		width: 100%;
		opacity: 1;
	}
}

@-webkit-keyframes showLine {
	0% {
		width: 0;
		opacity: 0;
	}

	100% {
		width: 100%;
		opacity: 1;
	}
}

.loader-middle::after {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	left: -100px;
	top: 0;
	animation: loader-middle 2s cubic-bezier(.86,0,.07,1) infinite;
	-o-animation: loader-middle 2s cubic-bezier(.86,0,.07,1) infinite;
	-webkit-animation: loader-middle 2s cubic-bezier(.86,0,.07,1) infinite;
	animation-delay: 1200ms;
}

@keyframes loader-middle {
	0% {
		left: -100%;
		background: #fff;
	}

	100% {
		left: 100%;
		background: #fff;
	}
}

@-o-keyframes loader-middle {
	0% {
		left: -100%;
		background: #fff;
	}

	100% {
		left: 100%;
		background: #fff;
	}
}

@-webkit-keyframes loader-middle {
	0% {
		left: -100%;
		background: #fff;
	}

	100% {
		left: 100%;
		background: #fff;
	}
}

.loader-middle.loaded {
	width: 100%;
	opacity: 0;
}

.loader-middle.loaded::after {
	opacity: 0;
}

/**************************************
 * 03.Navbar Style
 *************************************/
.navbar-b {
	transition: all .5s ease-in-out;
	background-color: transparent;
	padding-top: 1.563rem;
	padding-bottom: 1.563rem;
}

.navbar-b.navbar-reduce {
	box-shadow: 0px 6px 9px 0px rgba(0, 0, 0, 0.06);
}

.navbar-b.navbar-trans .nav-item, .navbar-b.navbar-reduce .nav-item {
	position: relative;
	padding-right: 10px;
	padding-left: 0;
}

.navbar-b.navbar-trans .nav-link, .navbar-b.navbar-reduce .nav-link {
	color: #2d2d2d;
	text-transform: capitalize;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.3px;
}

.navbar-b.navbar-trans .nav-link:hover, .navbar-b.navbar-reduce .nav-link:hover {
	color: #333;
	/*color: #007bff;
	text-decoration: none !important;
	-moz-transition: all 0.5s ease-in-out 0s;
	-ms-transition: all 0.5s ease-in-out 0s;
	-o-transition: all 0.5s ease-in-out 0s;
	-webkit-transition: all 0.5s ease-in-out 0s;
	transition: all 0.5s ease-in-out 0s;*/
}

.navbar-b.navbar-trans .nav-link:hover {
	color: #333;
/*	color: #007bff;
	text-decoration: none !important;
	-moz-transition: all 0.5s ease-in-out 0s;
	-ms-transition: all 0.5s ease-in-out 0s;
	-o-transition: all 0.5s ease-in-out 0s;
	-webkit-transition: all 0.5s ease-in-out 0s;
	transition: all 0.5s ease-in-out 0s;*/
}

.navbar-b.navbar-trans .show > .nav-link, .navbar-b.navbar-trans .active > .nav-link, .navbar-b.navbar-trans .nav-link.show, .navbar-b.navbar-trans .nav-link.active {
	color: #2d2d2d;
}

.navbar-b.navbar-reduce {
	transition: all .5s ease-in-out;
	background-color: #fff;
	padding-top: 20px;
	padding-bottom: 20px;
}

.navbar-b.navbar-reduce .nav-link {
	color: #000000;
}

.navbar-b.navbar-reduce .nav-link:hover {
	color: #000;
}

.navbar-b.navbar-reduce .show > .nav-link, .navbar-b.navbar-reduce .active > .nav-link, .navbar-b.navbar-reduce .nav-link.show, .navbar-b.navbar-reduce .nav-link.active {
	color: #000;
}

.navbar-b.navbar-reduce .navbar-brand {
	color: #000;
}

.navbar-b.navbar-reduce .navbar-toggler span {
	background-color: #1B1B1B;
}

.navbar-b .navbar-brand {
	color: #2d2d2d;
	font-size: 20px;
	font-weight: 700;
	font-family: 'Montserrat', sans-serif;
}

.navbar-b .navbar-nav .dropdown-item.show .dropdown-menu, .navbar-b .dropdown.show .dropdown-menu, .navbar-b .dropdown-btn.show .dropdown-menu {
	-webkit-transform: translate3d(0px, 0px, 0px);
	transform: translate3d(0px, 0px, 0px);
	visibility: visible !important;
}

.navbar-b .dropdown-menu {
	margin: 1.12rem 0 0;
	border-radius: 0;
}

.navbar-b .dropdown-menu .dropdown-item {
	padding: .7rem 1.7rem;
	transition: all 500ms ease;
}

.navbar-b .dropdown-menu .dropdown-item:hover {
	background-color: #ea1538;
	color: #fff;
	transition: all 500ms ease;
}

.navbar-b .dropdown-menu .dropdown-item.active {
	background-color: #ea1538;
}

.navbar-toggler {
	position: relative;
}

.navbar-toggler:focus, .navbar-toggler:active {
	outline: 0;
}

.navbar-toggler span {
	display: block;
	background-color: #fff;
	height: 3px;
	width: 25px;
	margin-top: 4px;
	margin-bottom: 4px;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	left: 0;
	opacity: 1;
}

.navbar-toggler span:nth-child(1), .navbar-toggler span:nth-child(3) {
	transition: -webkit-transform .35s ease-in-out;
	transition: transform .35s ease-in-out;
	transition: transform .35s ease-in-out, -webkit-transform .35s ease-in-out;
}

.navbar-toggler:not(.collapsed) span:nth-child(1) {
	position: absolute;
	left: 12px;
	top: 10px;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
	opacity: 0.9;
}

.navbar-toggler:not(.collapsed) span:nth-child(2) {
	height: 12px;
	visibility: hidden;
	background-color: transparent;
}

.navbar-toggler:not(.collapsed) span:nth-child(3) {
	position: absolute;
	left: 12px;
	top: 10px;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
	opacity: 0.9;
}



/* Fais apparaitre / disparaitre le nom en chinois selon l'état de la barre de navigation */
.navbar-b.navbar-trans .container .navbar-brand span.chinese-link{
	display: block;
}

.navbar-b.navbar-reduce .container .navbar-brand span.chinese-link{
	display: none;
}



/**************************************
 * 04.Home Section Style
 *************************************/
.chapeau{
	border: 1px solid aqua;
}

/* Conteneur principal de la section */
.section-left-content {
    position: relative;
    z-index: 1;
    max-width: 50%; /* Limite à la moitié gauche de l'écran */
    margin: 0; /* Pas de marges automatiques */
    padding: 20px; /* Espacement interne */
    text-align: left; /* Texte aligné à gauche */
}

/* Titre principal */
.section-left-content h1 {
    font-size: 2.4rem; /* Taille du titre */
    font-weight: bold;
    margin-bottom: 15px;
}

/* Texte descriptif */
.section-left-content p {
    margin-bottom: 20px;
}

/* Bouton */
.section-left-content .cta-button {
    display: inline-block;
    background-color: #007BFF; /* Couleur de fond */
    color: white; /* Couleur du texte */
    padding: 10px 20px; /* Espacement interne */
    text-decoration: none; /* Supprime le soulignement */
    font-size: 1rem; /* Taille du texte */
    border-radius: 5px; /* Coins arrondis */
    transition: background-color 0.3s; /* Transition fluide au survol */
}

.section-left-content .cta-button:hover {
    background-color: #0056b3; /* Couleur au survol */
}
/* Conteneur principal de la section avec texte et photo */
.section-container {
    display: flex;
    flex-wrap: wrap; /* Permet le passage à la ligne en mode responsive */
    align-items: center;
    padding: 20px;
}

/* Conteneur pour la photo */
.section-photo {
    flex: 1; /* Prend de l'espace restant à droite */
    max-width: 50%; /* Limite à la moitié de l'écran */
    padding: 0 0 0 20px; /* Espacement interne */
    text-align: center; /* Centre la photo horizontalement */
}

.section-photo img {
    max-width: 100%;
    height: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .section-container {
        flex-direction: column; /* Empile le texte et la photo */
    }

    .section-photo {
        max-width: 100%; /* Photo occupe toute la largeur */
        margin-top: 20px; /* Espacement entre le texte et la photo */
        order: -1; /* Déplace l'image au-dessus du texte */
    }
    .section-left-content {
		    max-width: 100%; /* Limite à la moitié gauche de l'écran */
		    padding: 20px; /* Espacement interne */
		}
}


.home-area {
	height: 100vh;
	position: relative;
	color: #fff;
	text-align: center;
	background: url(../img/home-bg2.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	z-index:1;
	padding-bottom: 0px;
}

@media (max-width: 768px) {
    .home-area {
        background: url(../img/home-bg2.jpg);
        background-repeat: no-repeat;
        background-size: cover; /* Ajuste l'image pour qu'elle soit visible en entier */
        background-position: -550px -100px; /* Positionne le cygne sous le visuel d'Éric */
        height: auto; /* Ajuste la hauteur pour éviter que l'image ne soit coupée */
    }
    .navbar-toggler{
    	background-color: transparent;
    }
}

.home-area::after {
    position: absolute;
    top: 0;
    content: "";
    left: 0px;
    padding: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: #ffffff;
}

.chinese-link {
		display: block;
    font-family: "Noto Serif", serif; /* Police adaptée au chinois */
    font-size: 1.5rem;
    font-weight: 800;
    margin-top: 10px; /* Ajustement pour une meilleure intégration */
    letter-spacing: 2px;
}

.chinese-title {
    font-family: "Noto Serif", serif; /* Police adaptée au chinois */
    font-size: 3rem;
    font-weight: 800;
    color: #555;
    margin-top: -10px; /* Ajustement pour une meilleure intégration */
    letter-spacing: 2px;
}

.vertical-chinese-text {
    position: absolute;
    right: 23%;
    top: 32%;
    transform: translateY(-50%); /* Centrage vertical */
    font-size: 90px;
    font-weight: bold;
    color: white;
    z-index: -1; /* Place le texte derrière l’image */
    opacity: 0.8;
    writing-mode: vertical-rl; /* Mode d'écriture vertical, de droite à gauche */
    text-orientation: upright; /* Maintient chaque caractère droit */
    white-space: nowrap;
    pointer-events: none; /* Évite toute interaction avec le texte */
}

@media (max-width: 1530px) {
    .vertical-chinese-text {
        font-size: 70px;
        right: 15%;
    }
}

@media (max-width: 1200px) {
    .vertical-chinese-text {
        font-size: 70px;
        right: 10%;
    }
}

@media (max-width: 768px) {
    .vertical-chinese-text {
        font-size: 50px; /* Réduction de la taille pour mobile */
        right: 0; /* Collé à droite de l’écran */
        top: 280px; /* Centré verticalement */
        margin-right: 46px;
    }
}

@media (max-width: 480px) {
    .vertical-chinese-text {
        font-size: 50px;
        right: 0;
        top: 233px;
        margin-right: 37px;
    }
}

@media (max-width: 320px) {
    .vertical-chinese-text {
        font-size: 30px;
        right: 0;
        top: 150px;
        margin-right: 37px;
    }
}



#particles-js {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 5;
}

.hero-equal-height {
	position: relative;
/*	min-height: 660px;*/
	min-height: 980px;
	-js-display: flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	height: 100%;
	width: 100%;
}

.home-area .home-content h1 {
	font-size: 80px;
	color: #202020;
	margin-bottom: 20px;
	font-weight: 900;
	line-height: 1.3;
	font-family: 'Montserrat', sans-serif;
}

.home-area .home-content p {
	margin-bottom: 5px;
	color: #000000;
	font-size: 18px;
	line-height: 1.5;
	font-weight: 500;
}
.home-area .home-content p span {
    color: #ea1538;
    font-weight: 800;
}
.home-content .button-1 {
	margin-left: 10px;
}

.home-area .social{
    right: 0;
    top: 0;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-60%);
    transform: translateY(-60%);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    margin-right: -150px;
    z-index: 6;
}

.home-area .social a{
    display: block;
    color: #000000;
    font-size: 14px;
    margin-top: 10px;
    float: left;
    margin-right: 15px;
    -webkit-transition: all ease 0.3s;
    transition: all ease 0.3s;
    font-weight: 600;
    letter-spacing: 5px;
}

.home-area .social a.text{
    margin-right: 0;
}

.home-area .social a i{
    -webkit-transition: all ease 0.3s;
    transition: all ease 0.3s;
}

.home-area .social a:hover i{
    color: #ea1538;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transition: all ease 0.3s;
    transition: all ease 0.3s;
}

.home-area .line{
    float: left;
    width: 72px;
    background: #bfbfbf;
    height: 1px;
    margin: 20px 17px;
}







/**************************************
 * 05. About Section Style
 *************************************/
.about-content {
    padding-right: 80px;
}

.event-block.full-width .about-content {
    max-width: 100%;
    text-align: left;
}

.about-content h3 {
    font-size: 21px;
    font-weight: 700;
    margin: 20px 0 20px 0;
}
.color-text {
    /*color: #ea1538;*/
    color: #007bff;
}

/**************************************
 * 06. Skill Section Style
 *************************************/
.skill-area {
    background: #f7f7f7;
}
.skill-box {
    margin-bottom: 60px;
}
.skill-box:nth-last-child(-n + 2) {
	margin-bottom: 0px;
}
.skill-item h4 {
    font-size: 15px;
    text-transform: capitalize;
    font-weight: 600;
}
.skill-item .skill-info span {
    font-size: 14px;
}
.progress {
    height: 3px;
    margin-bottom: 0;
    overflow: hidden;
    background-color: #fff;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 3px;
    color: #fff;
    text-align: center;
    background-color: #ea1538;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: width 0.6s ease;
    -o-transition: width 0.6s ease;
    transition: width 0.6s ease;
}

/**************************************
 * 07. Services Section Style
 *************************************/

.service-content h3 {
    font-size: 21px; /* Taille de police */
    font-weight: 700; /* Poids de police */
    margin-bottom: 10px; /* Espacement en bas */
    line-height: 1.4; /* Hauteur de ligne pour une meilleure lisibilité */
    color: #333; /* Couleur du texte */
}



.services-item {
    margin-bottom: 30px;
}
.services-item:nth-last-child(-n + 3) {
		margin-bottom: 0px;
}
.single-services-box {
    border: 5px solid #f7f7f7;
    padding: 5px;
    border-radius: 0px;
}
.single-services {
    background: #f7f7f7;
    padding: 30px 20px;
    border-radius: 0px;
}
.services-icon {
    border: 4px solid #fff;
    padding: 5px;
    border-radius: 0px;
    display: inline-block;
    margin-bottom: 20px;
}
.services-icon i {
    display: inline-block;
    color: #000;
    font-size: 30px;
    width: 55px;
    height: 55px;
    line-height: 55px;
    border-radius: 0px;
    background: #fff;
    text-align: center;
}

.services-text h3 {
     font-size: 21px;
    margin-bottom: 10px;
    color: #333;
    font-weight: 700;
    letter-spacing: 1px;
}

/**************************************
 * 08. Counter Section Style
 *************************************/
.counter-area {
    background: #f7f7f7;
}
.single-counter-box {
    border: 5px solid #ffffff;
    padding: 5px;
    border-radius: 0px;
}

.single-counter {
  background-color: #ffffff;
  text-align: center;
  padding: 40px 20px;
  border-radius: 0px;
}

.single-counter h3 {
  margin-bottom: 0;
  color: #333;
  font-size: 35px;
  font-weight: 800;
}

.single-counter p {
    line-height: 1.5;
    color: #333;
    text-transform: capitalize;
    margin-top: 8px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
}

/**************************************
 * 09. Project Section Style
 *************************************/
#project {
	position: relative;
}

#project .project-list {
	text-align: center;
}

#project .project-list .nav {
	display: inline-block;
	margin: 0;
	position: relative;
}

#project .project-list .nav li {
	position:relative;
	float: left;
	font-size: 14px;
	line-height: 15px;
	cursor: pointer;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: capitalize;
	display: inline-block;
	margin: 0 15px 20px;
	padding: 10px 20px;
	border-radius: 30px;
	background-color: #f7f7f7;
	color: #333;
	-moz-transition: all 0.5s ease-in-out 0s;
	-ms-transition: all 0.5s ease-in-out 0s;
	-o-transition: all 0.5s ease-in-out 0s;
	-webkit-transition: all 0.5s ease-in-out 0s;
	transition: all 0.5s ease-in-out 0s;
}

#project .project-list .nav li:after {
    content: "--";
    color: #000000;
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 10px;
}
#project .project-list .nav li:before {
    content: "--";
    color: #000000;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 10px;
}

#project .project-list .nav li:hover, #project .project-list .nav li.filter-active {
	color: #ffffff;
	/*background: #ea1538;*/
	background: #007bff;
	-moz-transition: all 0.5s ease-in-out 0s;
	-ms-transition: all 0.5s ease-in-out 0s;
	-o-transition: all 0.5s ease-in-out 0s;
	-webkit-transition: all 0.5s ease-in-out 0s;
	transition: all 0.5s ease-in-out 0s;
}

#project .project-container {
	display: inline-block;
	width: 100%;
}

.project-area .project-grid-item {
    overflow: hidden;

}
.project-grid-item img {
	width: 100%;
}
.project-item {
	position: relative;
	display: block;
	overflow: hidden;
	margin-top: 30px;
}

.project-item .project-img-overlay {
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    -webkit-transition: all .4s;
    transition: all .4s;
    background-color: rgba(0, 0, 0, 0);
}
.project-item .project-img-overlay:before {
    left: 0;
    top: 0;
}
.project-item .project-img-overlay:after {
    right: 0;
    bottom: 0;
}
.project-item .project-img-overlay:before, .project-item .project-img-overlay:after {
    content: '';
    position: absolute;
    width: 0;
    height: 50%;
    background: rgba(255, 255, 255, 0.8);
    -webkit-transition: all .4s;
    transition: all .4s;
}
.project-item .project-img-overlay:hover:before, .project-item .project-img-overlay:hover:after {
    width: 100%;
}

.project-item .project-img-overlay .project-content {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
	z-index: 2;
    -webkit-transition: .5s;
    transition: .5s;
}
.project-item .project-img-overlay:hover .project-content h4, .project-item .project-img-overlay:hover .project-content h6{
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
}

.project-item .project-img-overlay .project-content h4 {
	color: #333;
	font-size: 16px;
	letter-spacing: 0.5px;
	font-weight: 700;
	position: relative;
	margin-bottom: 10px;
	text-transform: capitalize;
	-webkit-transform: translateY(-15px);
	transform: translateY(-15px);
	opacity: 0;
	z-index: 7;
	-webkit-transition: all .6s;
	transition: all .6s;
}

.project-item .project-img-overlay .project-content h6 {
    /*color: #ea1538;*/
    color: #007bff;
    margin-top: 5px;
    font-size: 15px;
    letter-spacing: 0.9px;
    position: relative;
    position: relative;
    font-weight: 700;
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
    opacity: 0;
    z-index: 7;
    -webkit-transition: all .6s;
    transition: all .6s;
}


#project h3{
	margin-bottom: 35px;
}

.margin-bottom-100{
	margin-bottom: 100px;
}


.btn-spaced {
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}



/**************************************
 * 10.Testimonial Section Style
 *************************************/
.testimonial-area {
	background: #f7f7f7;
}

.single-testimonial {
	position: relative;
	background: #ffffff;
	padding: 55px 25px 35px;
	border-radius: 3px;
	z-index: 1;
	opacity: .5;
	transform: scale3d(0.8, 0.8, 1);
	-webkit-transform: scale3d(0.8, 0.8, 1);
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	margin: 50px 0px 0px;
}
.testimonial-area .owl-carousel .active.center .single-testimonial {
	opacity: 1;
	transform: scale3d(1.0, 1.0, 1);
	-webkit-transform: scale3d(1.0, 1.0, 1);
}

.single-testimonial .testimonial-bio {
	text-align: center;
}

.testi-content-inner .avatar {
	position: absolute;
    top: -50px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 115px;

}
.single-testimonial .avatar img {
    border-radius: 50%;
    border: 8px solid #ffffff;
    width: 100px;
    margin: 0 auto;
    border-left-color: #ea1538;
    border-right-color: #ea1538;
}

.single-testimonial .testimonial-bio .bio-info {
	margin-left: 10px;
}

.single-testimonial .testimonial-bio .bio-info .name {
	font-size: 18px;
	font-weight: 600;
	margin-top: 0;
	margin-bottom: 0;
}

.single-testimonial .testimonial-bio .bio-info span {
	font-size: 14px;
}

.single-testimonial .testimonial-content {
	margin-bottom: 25px;
	text-align: center;
}
.testimonial-content h3 {
    font-size: 18px;
    margin-top: 25px;
    margin-bottom: 25px;
    font-weight: 600;
}
.single-testimonial .testimonial-content p {
	font-size: 15px;
	color: #000;
}


.testimonial-long {
    background: #fdfdfd;
    padding: 35px 25px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.05);
    font-size: 1.1rem;
    line-height: 1.8;
    max-width: 100%;
    margin: 0 auto;
}
.testimonial-long p{
	margin: 0 0 14px 0;
}

.testimonial-author {
    margin-top: 25px;
    font-weight: bold;
    font-size: 1rem;
    text-align: right;
    color: #444;
}





/**************************************
 * 10.5 ACTU / BLOG
 *************************************/

.content-wrapper {
    width: 100%;
    max-width: 100%; /* Ajuste selon la mise en page */
    margin: auto;
    text-align: left;
    padding: 20px 0;
}



.article-container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    text-align: left;
}

.article-container h1 {
    text-align: center;
}

.article-container .video-container {
    text-align: center;
    margin-bottom: 20px;
}

.article-container .event-image {
    display: block;
    margin: 20px auto;
    max-width: 100%;
    height: auto;
}
.article-date{
	display: block;
	width: 100%;
	text-align: left;
}
.article-titre{
	display: block;
	width: 100%;
	text-align: left;
}

.article-content img[src$=".jpg"],
.article-content img[src$=".png"],
.article-content img[src$=".gif"] {
    width: auto;
    display: block;
}

.article-content img.large {
    float: none !important;
    margin: 0 auto 15px auto;
    display: block;
}


.article-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 15px auto;
}

/* Optionnel : remettre un style desktop si tu veux l’image à gauche du texte */
@media (min-width: 571px) {
    .article-content img {
        float: left;
        margin: 0 15px 10px 0;
        max-width: 670px;
    }
}



.video-container {
    display: block;
    max-width: 100%;
    overflow: hidden;
}

.video-container iframe {
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
    max-width: 50%;
    width: 560px;
    aspect-ratio: 16 / 9;
    height: auto !important;
}


/* Texte à côté de la vidéo */
.video-text {
    display: block;
    text-align: left;
    overflow: hidden;
}

/* Responsive : Empilage sur mobile */
@media screen and (max-width: 768px) {
    .video-container iframe {
        float: none;
        display: block;
        max-width: 100%;
        margin: 0 auto 20px auto;
    }

    .video-text {
        max-width: 100%;
        text-align: center;
    }
}





.article-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 40px auto; /* Ajoute des marges inférieures */
    position: relative;
}

.article-separator::before,
.article-separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #ccc;
}

.article-separator span {
    margin: 0 10px;
    font-size: 18px;
    color: #555;
}



/**************************************
 * 11. Contact Section Style
 *************************************/
.contact-area .item {
}

.contact-information {
	margin-bottom: 15px;
}

.contact-details {
	text-align: left;
	margin-bottom: 30px;
	padding: 20px 10px;
	display: block;
	overflow: hidden;
}

.contact-details i {
	font-size: 25px;
    width: 60px;
    height: 60px;
    background: #f7f7f7;
    line-height: 58px;
    color: #000;
    text-align: center;
    float: left;
    margin-bottom: 0;
    border: 2px solid #f7f7f7;
    border-radius: 5px;
    margin-right: 25px;
}

.contact-details h6 {
    padding-bottom: 5px;
    font-weight: 800;
    font-size: 16px;
    color: #333;
/*    text-transform: capitalize;*/
    padding-top: 8px;
}

.contact-details p {
    font-weight: 700;
    font-size: 15px;
    color: #505050;
/*    text-transform: capitalize;*/
}

.contact-area .form input, .contact-area .form textarea {
	width: 100%;
    padding: 10px 20px;
    color: #000;
    border: 0;
    font-size: 15px;
    padding-left: 15px;
    background-color: #f7f7f7;
    font-weight: 600;
    border-radius: 0px;
    text-transform: none;
    border-bottom: 2px solid #f0f0f0;
}

.contact-area .form textarea {
	max-height: 120px;
	max-width: 100%;
}

#contact-form .button {
	margin: 0;
}

.form-group {
	margin-bottom: 25px;
}

button, input, textarea {
	color: #272727;
}

button, input, textarea:focus {
	border: none;
	outline: none;
}

.contact-area .form-message.success {
	background: #03b103;
	color: #fff;
	padding: 10px 15px;
	border-radius: 3px;
}

.contact-area .form-message.error {
	background: #ff4d15;
	color: #fff;
	padding: 10px 15px;
	border-radius: 3px;
}

/**************************************
 * 12. Map Section Style
 *************************************/
.map-contact #map{
    position: relative;
    width: 100%;
    height: 500px;
	border: 0;
	margin-bottom: -2px;
}

/**************************************
 * 13. Footer Section Style
 *************************************/
.footer-area {
}

.copyright-area {
	padding: 40px 0;
}

.copyright-area p {
	color: #000;
}

.copyright-area p a {
    color: #ea1538;
    font-weight: 600;
}


/**************************************
 * 15. Boutique.html
 *************************************/

.product-section{
	margin-top: 120px;
	background: url('assets/img/fond-livre.jpg') no-repeat center center / cover; padding: 80px 0;	
}
/* Version responsive pour smartphone */
@media (max-width: 768px) {
    .product-section {
        margin-top: 60px;
    }
    .product-section .couv{
        margin-bottom: 30px;
    }
}


.couv{
	border-radius: 8px;
	box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.payment-logos{
		margin-top: 20px;
}
.payment-logos img{
	margin-left: 7px;
}


.command-button {
    background-color: #f2c8b2;
    color: #000;
    padding: 12px 24px;
    margin-top: 20px;
    border: none;
    border-radius: 30px;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    display: inline-block;
    transition: background-color 0.3s ease;
}
.command-button:hover {
    background-color: #e3b49b;
    color: #000;
}