html {
 //scroll-behavior: smooth;
}

body {
  background: #fff;
  line-height: 1.5;
  padding: 0;
  margin: 0;
  color: #112352;
  font-size: 26px;
  font-family: 'dinprolight';
}

body.site {
  border-top: none;
  padding: 0;
  margin: 0;
}

strong {
  font-weight: normal;
  font-family: 'd-din-probold';
  color: #112352;
}

.body {
  overflow: hidden;
  background: #fff;
}

a {
  color: #2c2d5c;
  text-decoration: none;
  transition: all .4s;
}

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

a.pdf {
  position: relative;
  display: table;
  background: url(../images/ic-pdf.png) top left no-repeat;
  height: 40px;
  padding-left: 47px;
}

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

.img-right {
  float: right;
  margin: 0 0 50px 45px;
  border-radius: 10px;
}

.img-left {
  float: left;
  border-radius: 10px;
  margin: 0 45px 40px 0;
}

.img-left,
.img-right {
  position: relative;
  overflow: hidden;
  border-radius: 25px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1em;
}

h1{
  color: #202121;
  font-size: 58px;
  font-family: 'din_procondensed_medium';
  text-align: left;
  line-height: 1.2em;
}

h1.slogan {
  position: absolute;
  top: -341px;
  left: 0;
  right: 0;
  display: block;
  font-weight: normal;
  color: #fff;
  font-size: 50px;
  line-height: 1.3em;
  text-align: center;
  width: 65%;
  margin: auto;
}

h2 {
  position: relative;
  font-size: 58px;
  font-family: 'd-din-probold';
  font-weight: normal;
  margin: 30px 0 20px;
  line-height: 1.2;
  color: #0059ad;
  text-align: left;
}

.page-header h2 {
  color: #eed671;
  font-size: 62px;
  font-family: 'dinpromedium';
  font-weight: normal;
  display: block;
  margin: auto;
}

h3{
  margin: 20px 0 25px;
  font-size: 35px;
  font-family: 'dinpromedium';
  font-weight: 600;
  color: #1064a9;
  text-align: left;
  line-height: 1.2;
}

h4{
  font-size: 27px;
  color: #001e57;
  font-weight: normal;
  margin: 20px 0 15px;
  font-family: 'dinpromedium';
  line-height: 1.3em;
}

h5 {
  font-size: 16px;
  margin: 30px 0 15px;
}

h6{
  font-size: 14px;
  margin: 30px 0 10px;
}

.clearfix {
  display: block;
  clear: both;
}

header.header .container-fluid {
  max-width: 1920px;
  padding: 0 45px;
  margin: auto;
  display: table;
}

nav#nav-2,
nav.mobile-nav {display: none;}

.header-inner .container { max-width: 1440px;}

.banner {
  clear: both;
  position: relative;
  z-index: 1;
  margin: 0;
}

.com_tz_portfolio_plus .bannerprojects {
    display: block !important;
    position: relative;
    background: black;
    inset: 0;
    height: 498px;
    background: url(../images/banneri.jpg) top center no-repeat;
}

.com_tz_portfolio_plus.view-article .bannerprojects,
.com_tz_portfolio_plus.view-portfolio .bannerprojects{display:none!important;}

.view-article .container-banner .mod-custom img {
  width: 100%;
  height: auto;
}
.view-article .container-banner .mod-custom p, .com_tz_portfolio_plus.view-portfolio  .container-banner .mod-custom p{margin:0}

.view-article .container-banner .mod-custom:before, .com_tz_portfolio_plus .bannerprojects:before, 
.com_tz_portfolio_plus.view-portfolio .bannerprojects .mod-custom:before  {
  position: absolute;
  content: "";
  inset: 0;
  background: rgb(18 20 33 / 55%);
  z-index: 2;
}

.scrollb {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 45px;
  height: 75px;
  background: url(../images/scroll.png) top center no-repeat;
  display: table;
  margin: auto;
  z-index: 22;
  font-size: 0;
}

a.logo {
  position: relative;
  z-index: 4;
  display: table;
  text-align: center;
  margin: 27px 0 0;
}

.nav-menu { padding-top: 4px; margin: auto;}

/*** MENU MOBILE ***/

/* Bouton hamburger */
.menu-toggle {
  display: none;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1000;
  padding: 10px;
}

.menu-toggle span {
  display: block;
  width: 30px;
  height: 3px;
  background: #fff;
  margin: 5px 0;
  transition: 0.3s;
}

/* Animation du bouton hamburger */
.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

/*******************************************************/
/****************---------HEADER------------*********************/

.container-header .tophead .grid-child {
  position: relative;
  padding: 1.25em 0;
  max-width: 2000px;
  width: 95%;
  z-index: 100000;
}

.container-header .tophead .grid-child:before {
  position: absolute;
  content: "";
  background: #090f19;
  top: 0;
  left: -50px;
  width: 460px;
  height: 146px;
  clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);
}

.container-header .is-sticky .tophead .grid-child:before { content:none !important; }

.container-header .tophead .navbar-brand {
  color: #fff;
  margin-inline-end: auto;
  padding-top: .3125rem;
  display: inline-block;
  position: relative;
  width: 25%;
}

.container-header .tophead .container-nav { flex-wrap: wrap; justify-content: space-between;  padding: 1.75em 0 0em;  width: 75%;}

.container-header .is-sticky .tophead .container-nav { padding: 1.25em 0 0em;}

header.header .container-header .tophead .mod-menu>li:after {  content: none !important; }

header.header .container-header .mod-menu.mod-list.nav.sf-menu>li:after { content: none !important; }

header.header .container-header { background-color: unset !important;  background-image: unset !important;  box-shadow: unset !important; }

/* Tophead transparent au départ */
header.header .tophead {
  position: relative;
  z-index: 2000 !important; /* passe au-dessus des autres blocs */
  background: transparent; /* au départ transparent */
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  margin-top: -4px;

} 


.is-sticky .tophead {
    padding: 0;
    background: rgb(18 20 33 / 89%) !important;
    box-shadow: 0px 0px 10px 4px rgb(28 31 49);
    height: 100px !important;
}

.customslider {
    margin-top: -150px;
}
/**************---------Main------------****************/

main#content {
  position: relative;
  padding: 80px 0 0;
  text-align: justify;
}

main#content ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

main#content img {
  border-radius: 25px;
}

main#content ul li {
  position: relative;
  background: url(../images/puce.png) top 7px left no-repeat;
  padding-left: 35px;
  margin-bottom: 7px;
}

.page-header {
    position: absolute;
    top: -160px;
    z-index: 10;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    display: table;
}

.page-header h1{ color:#fff; }
  
p.copyright {
  position: relative;
  clear: both;
  text-align: center;
  font-size: 20px;
  margin-top: 0;
  margin-bottom: 0;
  z-index: 1;
}

p.copyright a {
  color: #e4955c;
  font-size: 20px;
  text-transform: unset;
}

::placeholder {
  color: #fff !important;
  font-size: 22px !important;
  padding-left: 10px !important;
}


.network {
  margin: 40px 0 0;
}

.network a {
  color: #fff;
  margin-right: 16px;
  transition: .3s all;
  font-size: 29px;
  font-family: 'latolight';
}

.network a:hover {
  color: #14c9fe;
}
/*  contact  */
.contactp .blocf {
    background: #ffffff;
    padding: 35px 20px;
    border-radius: 14px;
    position: relative;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    font-size: 23px;
    color: #2c2c2c;
}


.contactp .blocf::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20px;
    bottom: 20px;
    width: 4px;
    background: linear-gradient(180deg, #0d6efd, #084298);
    border-radius: 4px;
}

.contactp .blocf p {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
    line-height: 1.7;
}

.contactp .blocf p i {
    font-size: 32px;
    color: #0d6efd;
    opacity: 0.85;
    margin-top: 4px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.contactp .blocf p:hover i {
    transform: translateX(3px);
    opacity: 1;
}

.contactp .blocf span {
    font-weight: 400;
    color: #333;
}

.contactp .blocf a {
    color: #0d6efd;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.contactp .blocf a:hover {
    border-bottom: 1px solid #0d6efd;
}

.contactp .iframe-container {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    max-width: 100% !important;
    margin: auto;
}


/**************---------------------****************/

.container-banner { 
  position: relative; /* reste en flux normal */ 
  display: block; margin: 0;
}

/* Slider full width */

.mod_jo_slideshow .slide-content {
  background-color: unset !important;
  text-align: right;
  color: #fff;
  font-family: 'd-din-probold';
  font-size: 64px;
  position: absolute;
  top: 64%;
  right: 45px;
}

.mod_jo_slideshow .swiper-horizontal>.swiper-pagination-bullets,
.mod_jo_slideshow .swiper-pagination-bullets.swiper-pagination-horizontal,
.mod_jo_slideshow .swiper-pagination-custom,
.swiper-pagination-fraction {
  top: 85% !important;
}

.container-banner .customslider .mod_jo_slideshow .swiper-pagination {
  z-index: 1;
  text-align: left;
  left: 50px !important;
}

.container-banner .customslider .mod_jo_slideshow .swiper-pagination-bullet {
  width: 19px !important;
  height: 19px !important;
  background-color: #fff !important;
  opacity: 1;
}

.container-banner .customslider .mod_jo_slideshow .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #0059ad !important;
  width: 25px !important;
  height: 25px !important;
}

.container-banner .customslider .swiper-slide:before {
  position: absolute;
  content: "";
  background: rgb(1 43 65 / 40%);
  inset: 0;
}

.container-banner .customslider .swiper-container {
  min-height: unset !important;
}

.wrapper-home {
  position: relative;
  padding: 80px 0 0;
  font-size: 30px;
}

.wrapper-home:before {
  position: absolute;
  content: "";
  background: #f9f9f9;
  top: 0;
  left: 0;
  right: 0;
  height: 907px;
}

.reference {
	position:relative;
	margin: 0px auto 80px;
	max-width: 2000px;
	padding-top: 70px;
	overflow: hidden;

}
.reference div#tz-flex-grid-130 {
    width: 97%;
    margin: auto;
}

.reference:before {
  position: absolute;
  content: "";
 background: #F9F9F9;
background: linear-gradient(180deg, rgba(249, 249, 249, 1) 0%, rgba(255, 255, 255, 0) 100%);
  top: -70px;
  left: -25px;
  right: -25px;
  height: 607px;
}
.reference h2{
	margin:0 0 50px
}

.reference i.tps.tp-search{font-size:0}

.reference .tz-flex-grid>.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)) !important;
    grid-gap: 0;
    grid-auto-rows: minmax(300px, auto)!important;
    grid-auto-flow: dense;
}

.reference .tz-flex-grid .tz-flex-item a{
    text-decoration:none;
}

.reference .tz-flex-grid .tz-flex-items {
    padding: 0 !important;
}
.reference .tz-flex-grid .tz-flex-item {
  
    margin: 1px !important;
} 

.reference .tz-flex-grid .tz-flex-grid-content {
    top: unset;
    left: 30px;
    right: unset;
    bottom: 30px;
    justify-content: center;
    background-color:unset;
}
.reference  .tz_portfolio_plus_image{
    z-index: 1;
    position: relative;
}

.reference  .tz_portfolio_plus_image:before{
    
    position: absolute;
    content:"";
    inset:0;
    background: #022B42;
background: linear-gradient(0deg, rgba(2, 43, 66, 0.63) 0%, rgba(2, 43, 66, 0.23) 80%, rgb(255 255 255 / 0%) 100%);

}

.wrapper-home .grid-child a {
	position:relative;
	transition:.3s all;
	color: #112352;
	font-size: 26px;
	text-transform: uppercase;
	font-family: 'd-din-probold';
	display: table;
	margin: 60px 0 0;
}

.wrapper-home .grid-child a:hover {

    color: #e3ab01;
}

.wrapper-home .grid-child a:before {
	position:absolute;
	content:"";
	border-bottom:2px solid #e3ab01;
	bottom:-12px;
	left:0;
	right:0;
	transition:.3s all;
}

.wrapper-home .grid-child a:hover:before {
	
	border-bottom:2px solid #0059ad;

}



.wrapper-home  ul{
	list-style:none;
	margin:0;
	padding:0;
	overflow: hidden;
}

.wrapper-home  ul li {
	position:relative;	
	padding-left: 22px;
	margin-bottom: 10px;
}

.wrapper-home  ul li:before {
	position:absolute;
    content:"";
	top:17px;
    left:0;
    background:#0059ad;
    width:12px;
    height:5px;
}

.view-article .wrapper-home {
  display: none;
}

.wrapper-home .grid-child {
  max-width: 1470px;
}

.wrapper-home .custombloc-1 .grid-child,
.wrapper-home .custombloc-3 .grid-child {
  max-width: 2000px;
}

 .custombloc-1 .grid-child,
 .custombloc-3 .grid-child {
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}

.custombloc-3 .container-fluid,
.custombloc-3 .grid-child {
  flex-direction: row;
}

.custombloc-3 .infotxt,
.custombloc-1 .infotxt {
  position: relative;
  padding: 0 0 0 160px;
}

.custombloc-1 .infotxt {
  padding: 0 155px 0 220px;
}
.custombloc-1 .infotxt h2 {
  margin: 0 0 35px;
}
.custombloc-3 {
  padding: 0 0 100px;
}
.custombloc-3 .infotxt {
  padding: 50px 251px 0 162px;
}

.custombloc-1 .photo-right,
.custombloc-3 .photo-right {
  width: 70%;
  text-align: right;
  padding-top: 53px;
  margin: 0;
}

.custombloc-3 .photo-right {
  text-align: left;
}

.custombloc-1 a.link {
  margin: 24px 0 0;
}

.custombloc-1 a.link:before {
  position: absolute;
  content: "";
  border-bottom: 2px solid orange;
  left: 0;
  right: 0;
  height: 2px;
  bottom: 0;
}

.custombloc-1 .infotxt ul {
  list-style: none;
  margin: 14px 0 0 47px;
  padding: 0;
  overflow: hidden;
}

.custombloc-1 .infotxt ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 5px;
}

.custombloc-1 .infotxt ul li:before {
  position: absolute;
  content: "";
  background: #0059ad;
  width: 12px;
  height: 5px;
  top: 19px;
  left: 0;
}

/*****************Animation bloc-1******************/
.custombloc-1 {
   position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.custombloc-1.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Animation pour l'image */
.custombloc-1 .photo-right {
  opacity: 0;
  transform: translateX(80px) scale(0.95);
  transition: opacity 1s ease 0.3s, transform 1s ease 0.3s;
}

.custombloc-1.visible .photo-right {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.custombloc-1 .photo-right img {
  transition: transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.custombloc-1.visible .photo-right img {
  transform: scale(1);
}

/* Animation pour le contenu texte */
.custombloc-1 .infotxt {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s ease 0.5s, transform 0.8s ease 0.5s;
}

.custombloc-1.visible .infotxt {
  opacity: 1;
  transform: translateX(0);
}

/* Animation pour le titre */
.custombloc-1 .infotxt h2 {
  position: relative;
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease 0.7s, transform 0.6s ease 0.7s, color 0.3s ease;
}

.custombloc-1.visible .infotxt h2 {
  opacity: 1;
  transform: translateY(0);
}

/* Animation pour la liste */
.custombloc-1 .infotxt ul {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease 0.9s, transform 0.6s ease 0.9s;
}

.custombloc-1.visible .infotxt ul {
  opacity: 1;
  transform: translateY(0);
}

/* Animation séquentielle pour chaque élément de liste */
.custombloc-1 .infotxt ul li {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.custombloc-1.visible .infotxt ul li:nth-child(1) {
  transition-delay: 1s;
  opacity: 1;
  transform: translateX(0);
}
.custombloc-1.visible .infotxt ul li:nth-child(2) {
  transition-delay: 1.1s;
  opacity: 1;
  transform: translateX(0);
}
.custombloc-1.visible .infotxt ul li:nth-child(3) {
  transition-delay: 1.2s;
  opacity: 1;
  transform: translateX(0);
}
.custombloc-1.visible .infotxt ul li:nth-child(4) {
  transition-delay: 1.3s;
  opacity: 1;
  transform: translateX(0);
}
.custombloc-1.visible .infotxt ul li:nth-child(5) {
  transition-delay: 1.4s;
  opacity: 1;
  transform: translateX(0);
}
.custombloc-1.visible .infotxt ul li:nth-child(6) {
  transition-delay: 1.5s;
  opacity: 1;
  transform: translateX(0);
}
.custombloc-1.visible .infotxt ul li:nth-child(7) {
  transition-delay: 1.6s;
  opacity: 1;
  transform: translateX(0);
}
.custombloc-1.visible .infotxt ul li:nth-child(8) {
  transition-delay: 1.7s;
  opacity: 1;
  transform: translateX(0);
}

/* Animation pour les puces (apparaissent progressivement) */
.custombloc-1 .infotxt ul li::before {
  opacity: 0;
  transform: scaleX(0);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
}

.custombloc-1.visible .infotxt ul li:nth-child(1)::before {
  transition-delay: 1.3s;
  opacity: 1;
  transform: scaleX(1);
}
.custombloc-1.visible .infotxt ul li:nth-child(2)::before {
  transition-delay: 1.4s;
  opacity: 1;
  transform: scaleX(1);
}
.custombloc-1.visible .infotxt ul li:nth-child(3)::before {
  transition-delay: 1.5s;
  opacity: 1;
  transform: scaleX(1);
}
.custombloc-1.visible .infotxt ul li:nth-child(4)::before {
  transition-delay: 1.6s;
  opacity: 1;
  transform: scaleX(1);
}
.custombloc-1.visible .infotxt ul li:nth-child(5)::before {
  transition-delay: 1.7s;
  opacity: 1;
  transform: scaleX(1);
}
.custombloc-1.visible .infotxt ul li:nth-child(6)::before {
  transition-delay: 1.8s;
  opacity: 1;
  transform: scaleX(1);
}
.custombloc-1.visible .infotxt ul li:nth-child(7)::before {
  transition-delay: 1.9s;
  opacity: 1;
  transform: scaleX(1);
}
.custombloc-1.visible .infotxt ul li:nth-child(8)::before {
  transition-delay: 2s;
  opacity: 1;
  transform: scaleX(1);
}

/* Animation pour le lien */
.custombloc-1 a.link {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease 2.1s, transform 0.6s ease 2.1s, color 0.3s ease;
}

.custombloc-1.visible a.link {
  opacity: 1;
  transform: translateY(0);
}

/* Animation pour le bouton audio */
.custombloc-1 .audio-reader-btn {
  opacity: 0;
  transform: scale(0.8) rotate(-10deg);
  transition: opacity 0.5s ease 2.3s, transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 2.3s;
}

.custombloc-1.visible .audio-reader-btn {
  opacity: 1;
  transform: scale(1) rotate(0);
}

/* Animation de surlignage pendant la lecture audio */
.custombloc-1 .reading-highlight {
  animation: textHighlight 2s infinite alternate;
  background: rgba(255, 215, 0, 0.15);
  border-radius: 4px;
  padding: 2px 8px;
  margin: 0 -8px;
}

@keyframes textHighlight {
  0% {
    background-color: rgba(255, 215, 0, 0.15);
  }
  100% {
    background-color: rgba(255, 215, 0, 0.3);
  }
}

/* Animation pour les éléments de liste pendant la lecture */
.custombloc-1 .infotxt ul li.reading-highlight {
  background: rgba(0, 89, 173, 0.15);
  padding-left: 25px;
  margin-left: -25px;
  border-radius: 4px;
  animation: listItemHighlight 1.5s infinite alternate;
}

@keyframes listItemHighlight {
  0% {
    background-color: rgba(0, 89, 173, 0.15);
  }
  100% {
    background-color: rgba(0, 89, 173, 0.25);
  }
}

/* Effet de révèlation progressive du bloc */
.custombloc-1::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #fff 0%, #f8f9fa 100%);
  z-index: 1;
  transform: translateX(-100%);
  transition: transform 1.2s ease 0.1s;
}

.custombloc-1.visible::before {
  transform: translateX(100%);
}

/* Animation subtile du texte en gras */
.custombloc-1 .infotxt p strong {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease 0.8s, transform 0.5s ease 0.8s;
}

.custombloc-1.visible .infotxt p strong {
  opacity: 1;
  transform: translateY(0);
}


/*************************Fin bloc1****************************/
/********************Bloc2*****************************/

.bloc2 {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
}

.bloc2 .grid-child {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.bloc2 .bx {
    position: relative;
    display: table;
    margin: auto;
    padding-top: 150px;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
}

.bloc2 .bx a {
    position: absolute;
    content: "";
    inset: 0;
    font-size: 0;
    z-index: 10;
}

.bloc2 .bx h3 {
    position: relative;
    color: #112352;
    font-size: 32px;
    transition: .3s all;
    display: table;
    margin: auto;
    opacity: 0;
    transform: translateY(10px);
}

.bloc2 .bx:hover h3 {
    color: #fa7228;
}

.bloc2 .bx h3:after {
    position: absolute;
    content: "";
    background: #fa7228;
    bottom: -15px;
    left: 0;
    right: 0;
    width: 25px;
    height: 5px;
    margin: auto;
    transition: .3s all;
    transform: scaleX(0);
    transform-origin: center;
}

.bloc2 .bx h3:hover:after {
    background: #112352;
    width: 35px;
}

.bloc2 .bx:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    transition: .3s all;
    opacity: 0;
    transform: translateY(-20px);
}

.bloc2 .bx:after {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    border-right: 3px solid #eaeaea;
    right: -73px;
}

.bloc2 .bx.bx5:after {
    content: none;
}

.bloc2 .bx.bx1:before {
    background: url(../images/ic1.png) top center no-repeat;
    width: 89px;
    height: 110px;
}

.bloc2 .bx.bx1:hover:before {
    background: url(../images/ic1.png) bottom center no-repeat;
}

.bloc2 .bx.bx2:before {
    background: url(../images/ic2.png) top center no-repeat;
    width: 89px;
    height: 79px;
}

.bloc2 .bx.bx2:hover:before {
    background: url(../images/ic2.png) bottom center no-repeat;
}

.bloc2 .bx.bx3:before {
    background: url(../images/ic3.png) top center no-repeat;
    width: 89px;
    height: 89px;
}

.bloc2 .bx.bx3:hover:before {
    background: url(../images/ic3.png) bottom center no-repeat;
}

.bloc2 .bx.bx4:before {
    background: url(../images/ic4.png) top center no-repeat;
    width: 89px;
    height: 89px;
}

.bloc2 .bx.bx4:hover:before {
    background: url(../images/ic4.png) bottom center no-repeat;
}

.bloc2 .bx.bx5:before {
    background: url(../images/ic5.png) top center no-repeat;
    width: 89px;
    height: 89px;
}

.bloc2 .bx.bx5:hover:before {
    background: url(../images/ic5.png) bottom center no-repeat;
}

/* Animation au chargement uniquement */
.bloc2 .bx {
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: calc(var(--i, 1) * 0.2s);
}

.bloc2 .bx:before {
    animation: fadeInUpIcon 0.8s ease forwards;
    animation-delay: calc(var(--i, 1) * 0.2s + 0.3s);
}

.bloc2 .bx h3 {
    animation: fadeInUpText 0.8s ease forwards;
    animation-delay: calc(var(--i, 1) * 0.2s + 0.5s);
}

.bloc2 .bx h3:after {
    animation: expandBar 0.6s ease forwards;
    animation-delay: calc(var(--i, 1) * 0.2s + 0.8s);
}

/* Définir l'index pour chaque boîte */
.bloc2 .bx.bx1 { --i: 1; }
.bloc2 .bx.bx2 { --i: 2; }
.bloc2 .bx.bx3 { --i: 3; }
.bloc2 .bx.bx4 { --i: 4; }
.bloc2 .bx.bx5 { --i: 5; }

/* Keyframes (déjà définis plus haut) */
@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUpIcon {
    0% { opacity: 0; transform: translateY(-20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUpText {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes expandBar {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}
/***************************************************************************************/

/* Animation pour l'apparition de la section */
.mod-custom.custom {
  opacity: 0;
  animation: fadeInDown 1s ease forwards;
  overflow: hidden;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation pour l'image */
.custombloc-3 .photo-right {
  opacity: 0;
  transform: translateX(-50px);
  animation: slideInLeft 1s ease 0.3s forwards;
  overflow: hidden;
}

.custombloc-3 .photo-right img {
  transform: scale(1.05);
  transition: transform 0.8s ease;
}

.custombloc-3 .photo-right:hover img {
  transform: scale(1);
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Animation pour le contenu texte */
.custombloc-3 .infotxt {
  opacity: 0;
  transform: translateX(50px);
  animation: slideInRight 1s ease 0.6s forwards;
}

.custombloc-3 .infotxt h2 {
  position: relative;
  display: inline-block;
}


/* Animation pour les paragraphes */
.custombloc-3 .infotxt p {
  opacity: 1;
  animation: fadeInUp 0.8s ease 0.9s forwards;
}

.custombloc-3 .infotxt p strong {
  position: relative;
}


/* Animation pour le bouton/lien */
.custombloc-3 .link {
  display: inline-block;
  opacity: 0;
  animation: fadeInUp 0.8s ease 1.1s forwards;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  padding: 10px 0;
  /* background-color: #166088; */
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  margin-top: 20px;
}

.custombloc-3 .link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.7s ease;
}

.custombloc-3 .link:hover {
 
  padding:10px;
  transform: translateY(-3px);
  color:#fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}



.custombloc-3 .link:active {
  transform: translateY(-1px);
}

/* Animation pour le conteneur principal */
.custombloc-3 .grid-child {
  position: relative;   overflow: hidden;
}

.custombloc-3 .grid-child::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, transparent 0%, transparent 50%, rgba(22, 96, 136, 0.03) 50%, rgba(74, 111, 165, 0.03) 100%);
  opacity: 0;
  transition: opacity 0.8s ease;
}

.custombloc-3 .grid-child:hover::before {
  opacity: 1;
}

/* Animation au défilement (scroll) - optionnel si vous voulez déclencher les animations au scroll */
@media (prefers-reduced-motion: no-preference) {
  .custombloc-3 .photo-right,
  .custombloc-3 .infotxt,
  .custombloc-3 .infotxt p,
  .custombloc-3 .link {
    animation-play-state: paused;
  }
  
  .custombloc-3.visible .photo-right,
  .custombloc-3.visible .infotxt,
  .custombloc-3.visible .infotxt p,
  .custombloc-3.visible .link {
    animation-play-state: running;
  }
}


/* 425px - Smartphones standard */

/* Support pour préférences de réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
  .mod-custom.custom,
  .custombloc-3 .photo-right,
  .custombloc-3 .infotxt,
  .custombloc-3 .infotxt p,
  .custombloc-3 .link {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

 /************************Audio**********************************/


/* Style générique pour le bouton audio sur TOUS les blocs */
[class^="custombloc-"] .infotxt,
.custom-module .infotxt,
.infotxt {
  position: relative;
}

/* Bouton audio générique */
.audio-reader-btn {
  display: inline-block;
  width: 42px;
  height: 42px;
  margin-left: 15px;
  border-radius: 50%;
  background: linear-gradient(135deg, #166088, #4a6fa5);
  color: white;
  border: 2px solid white;
  cursor: pointer;
  font-size: 18px;
  vertical-align: middle;
  transition: all 0.3s ease;
  position: relative;
  top: -5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10;
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 1s;
}
.custombloc-1 .audio-reader-btn,
.custombloc-3 .audio-reader-btn,
.bloc6 .audio-reader-btn{
  position:absolute;
}

.custombloc-1 .audio-reader-btn {
  top:15px;
  left: 147px;
}

.custombloc-3 .audio-reader-btn {
 top:95px;
  left: 80px;
}

.bloc6 .audio-reader-btn{
  top:45px;
  left: -77px;
}



/* Animation d'apparition du bouton */
[class^="custombloc-"] .infotxt:hover .audio-reader-btn,
.custom-module:hover .audio-reader-btn,
.text-content:hover .audio-reader-btn {
  opacity: 1;
  transform: translateY(0);
}

.audio-reader-btn:hover {
  background: linear-gradient(135deg, #4a6fa5, #166088);
  transform: scale(1.15) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.audio-reader-btn:active {
  transform: scale(0.95) !important;
}

/* Animation de pulse pendant la lecture */
.audio-reader-btn.playing {
  animation: pulse 1.5s infinite;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(231, 76, 60, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
  }
}

/* Icônes */
.audio-reader-btn .play-icon,
.audio-reader-btn .pause-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.audio-reader-btn .pause-icon {
  display: none;
}

.audio-reader-btn.playing .play-icon {
  display: none;
}

.audio-reader-btn.playing .pause-icon {
  display: flex;
}

/* Mise en évidence du texte pendant la lecture */
.reading-highlight {
  background-color: rgba(255, 255, 200, 0.3) !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  border-left: 4px solid #166088 !important;
  transition: all 0.3s ease !important;
  animation: highlightPulse 2s infinite alternate !important;
}

@keyframes highlightPulse {
  from {
    background-color: rgba(255, 255, 200, 0.3);
  }
  to {
    background-color: rgba(255, 255, 220, 0.5);
  }
}

/* Badge "En cours de lecture" */
.audio-reader-btn::before {
  content: 'Écouter';
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 4px 10px;
  border-radius: 15px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.audio-reader-btn:hover::before {
  opacity: 1;
}

.audio-reader-btn.playing::before {
  content: 'Lecture...';
  background: #e74c3c;
}

/* Classe pour l'accessibilité */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* Support pour préférence de réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
  .audio-reader-btn,
  .audio-reader-btn.playing,
  .reading-highlight {
    animation: none !important;
  }
}


/**********************Fin animation audio et bloc3**********************/
/* ===== BLOC6===== */
#mod-custom132.mod-custom.custom {
  background: #ffffff;
  position: relative;
}

.bloc6 {
  padding: 0px 0 80px;
}

/* ===== ANIMATIONS ===== */

@keyframes bloc-enter {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes title-line {
  from {
    width: 0;
  }
  to {
    width: 80px;
  }
}

@keyframes bloc-hover-lift {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-15px);
  }
}

@keyframes bloc-hover-color {
  0% {
    background-color: #0059ad;
  }
  100% {
    background-color: #e3ab01;
  }
}

@keyframes icon-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


.bloc6 .container {
  padding: 0 15px;
  opacity: 0;
  animation: bloc-enter 0.8s ease-out 0.2s forwards;
}

.bloc6 h2 {
  position: relative;
  font-size: 58px;
  font-family: 'd-din-probold', sans-serif;
  font-weight: normal;
  margin: 30px 0 20px;
  line-height: 1.2;
  color: #0059ad;
  text-align: left;
  display: inline-block;
}

.bloc6 h2::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 0;
  width: 0;
  height: 4px;
  background: #e3ab01;
  animation: title-line 1s ease-out 0.8s forwards;
}

.bloc6 .container p {
  position: relative;
  padding: 40px 0 0;
  font-size: 32px;
  color: #333333;
  line-height: 1.4;
  margin-bottom: 50px;
  opacity: 0;
  animation: bloc-enter 0.8s ease-out 0.4s forwards;
}

.bloc6  .grid-child.container-top-a {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
 
}

.bloc6 .bloc {
  position: relative;
  background: #0059ad;
  padding: 55px 45px;
  color: #fff;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-radius: 8px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(40px);
  box-shadow: 0 5px 20px rgba(0, 89, 173, 0.2);
}

.bloc6 .boc1 {
  animation: bloc-enter 0.8s ease-out 0.6s forwards;
}

.bloc6 .boc2 {
  animation: bloc-enter 0.8s ease-out 0.8s forwards;
}

.bloc6 .boc3 {
  animation: bloc-enter 0.8s ease-out 1s forwards;
}

.bloc6 .bloc::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.7s ease;
}


.bloc6 .bloc h3 {
  color: #fff;
  font-size: 37px;
  font-family: 'd-din-probold';
  margin-bottom: 25px;
  padding-bottom: 15px;
  position: relative;
  transition: all 0.4s ease;
  margin-top: 0;
}

.bloc6 .bloc h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: #ffbc1f;
  transition: all 0.4s ease;
}


.bloc6 .bloc p {
  color: #fff;
  font-size: 30px;
  line-height: 1.6;
  position: relative;
  z-index: 1;
  transition: all 0.4s ease;
  margin-top: 20px;
}

.bloc6 .bloc:hover {
  background: #e3ab01;
  box-shadow: 
    0 15px 35px rgba(227, 171, 1, 0.25),
    0 0 30px rgba(227, 171, 1, 0.1);
}

.bloc6 .bloc:hover::before {
  left: 100%;
}

.bloc6 .bloc:hover::after {
  opacity: 0.15;
  animation: icon-rotate 8s linear infinite;
  transform-origin: center;
}

.bloc6 .bloc:hover h3 {
  transform: translateX(10px);
}

.bloc6 .bloc:hover h3::after {
  width: 70px;
  background: #0059ad;
}

.bloc6 .bloc:hover p {
  /* color: rgba(255, 255, 255, 0.95); */
  transform: translateX(5px);
}

.bloc6 .bloc .highlight {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.3) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.bloc6 .bloc:hover .highlight {
  opacity: 1;
}



/****************Fin bloc6****************************/
/***********************Fin bloc2**************************************/

.view-article .site-grid {
  position: relative;
  display: block;
  max-width: 1470px;
  margin: auto;
}
.view-article.itemid-116 .site-grid {
  
   display: grid;
  padding:80px 0 0;
}
img.img-right.imgview {
  position: absolute;
  right: 0;
  top: -16px;
  border-radius: 0;
}

.pgtxt {
  position: relative;
  overflow: hidden;
  width: 50%;
  background: #f9f9ce;
  padding: 50px;
  border-radius: 26px;
  text-align: justify;
  margin-left: -68px;
}

.view-article.itemid-110 .site-grid {
  position: relative;
  max-width: 2000px;
  margin: auto;
}

.view-article main { padding: 0 0 100px;}

.view-article.itemid-110 main{
  padding:0; margin-top:0;
}

.view-article.itemid-110 .footer{
 margin-top:0;
}

footer div#mod-custom133 {
  max-width: 2000px;
  margin: auto;
  display: block;
}



/*page "Who We Are" */


.who-we-are {
    padding: 0;
    margin: 0;
    width: 100%;
    overflow: hidden;
}

.who-we-are-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
    margin: 0;
    position: relative;
}

.who-we-are-text {
    flex: 1;
    width: 55%; 
    background: #fafafa;
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: justify;
    box-sizing: border-box;
    box-shadow: 5px 0 15px rgba(0,0,0,0.05);
    z-index: 2; 
    position: relative;
    margin-right: -5%; 
    border-radius: 0px 55px 0px 55px; 
}
.who-we-are-text.overlap-more {
    width: 60%;
    margin-right: -10%;
    box-shadow: 10px 0 30px rgba(0,0,0,0.1);
    margin-top: 50px;
}
.who-we-are-image {
    flex: 1;
    width: 50%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.who-we-are-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 0 0 0 25px; 
}

.who-we-are-text ul {
    padding-left: 20px;
    margin: 20px 0;
}

.who-we-are-text li {
    margin-bottom: 10px;
    line-height: 1.6;
}

.who-we-are-text strong {
    color: #0066cc;
}

.who-we-are-text p {
    margin-bottom: 20px;
    line-height: 1.6;
}


/*Our People */

.our-people-section {
    padding: 60px 0;
    background: #fff;
}

.our-people-container {
    display: flex;
    margin: 0 auto;
    gap: 50px;
    align-items: stretch;
}

.our-people-image {
    flex: 1;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    /* min-height: 500px; */
}

.our-people-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.our-people-image:hover img {
    transform: scale(1.02);
}

.our-people-content {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 30px 0;
}

.text-content {
    width: 100%;
}

.text-content p {
    color: #333;
    margin-bottom: 25px;
    text-align: justify;
}

.text-content p:last-child {
    margin-bottom: 0;
}

.our-people-section.classic-layout {
    padding: 40px 0;
}

.our-people-section.classic-layout .our-people-container {
    display: block;
    max-width: 1200px;
}

.our-people-section.classic-layout .our-people-image {
    float: left;
    width: 45%;
    margin: 0 40px 25px 0;
    min-height: auto;
    max-height: 500px;
}

.our-people-section.classic-layout .our-people-content {
    display: block;
    padding: 0;
    overflow: hidden;
}

.our-people-section.classic-layout .text-content p {
    font-size: 18px;
    line-height: 1.8;
}



/* Strategic Vision */
.strategic-vision-section {
    padding: 40px 0;
    background: #fff;
}

.strategic-vision-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}


.vision-image-container {
    width: 50%;
    flex: 1;
    margin-bottom: 50px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    order: 2;
}

.vision-image-container img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.vision-image-container:hover img {
    transform: scale(1.02);
}

.vision-content {
    display: flex;
    flex-wrap: wrap;
    gap: 27px;
    justify-content: space-between;
    align-items: stretch;
}
.vision-content-1 {
    width: 45%;
    text-align: justify;
    padding: 58px 0 0;
    flex: 1;
    order: 1;
}
.vision-content > p {
 
    color: #333;
    margin-bottom: 50px;
    text-align: justify;
}

/* Sections objectifs */
.objectives-section {
  
    padding: 31px 40px 40px;
    background: #f8fafc;
    border-radius: 15px;
    border-left: 5px solid #0059ad;
    width: 49%;
}

.objectives-section:last-child {
    margin-bottom: 0;
    background: #b0b0b02e;
    border-left: 5px solid #182c5c;
}

.objectives-section h3 {
    font-size: 32px;
    color: #0059ad;
    font-family: 'd-din-probold';
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(0, 89, 173, 0.2);
}

.objectives-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.objectives-section li {margin-bottom: 13px;padding-left: 25px;position: relative;text-align: justify;}

.objectives-section li:before {
    content: "√";
    color: #d97116;
    font-size: 35px;
    position: absolute;
    left: 0;
    top: -9px;
    font-family: 'dinpromedium';
}

.objectives-section li:last-child {
    margin-bottom: 0;
}


.strategic-vision-section.image-left .strategic-vision-container {
    display: flex;
    gap: 50px;
    align-items: flex-start;
}

.strategic-vision-section.image-left .vision-image-container {
    flex: 1;
    margin-bottom: 0;
    max-width: 45%;
}

.strategic-vision-section.image-left .vision-content {
    flex: 1;
    margin: 0;
}


/* Section Our Vision */
.our-vision-section {
    padding: 80px 0 0;
    background: #fff;
}

.our-vision-container {
    display: flex;
    margin: 0 auto;
    gap: 60px;
    align-items: center;
}

.our-vision-image {
    flex: 1;
    order: 2; 
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    
}

.our-vision-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.our-vision-image:hover img {
    transform: scale(1.03);
}


.our-vision-content {
    flex: 1;
    order: 1; 
    padding: 30px 0;
}

.our-vision-content .text-content {
    width: 100%;
}

.our-vision-content .text-content p {
    color: #333;
    text-align: justify;
    margin: 0;
}

.our-vision-content .text-content strong {
    color: #0059ad;
    font-family: 'd-din-probold';
    font-weight: normal;
}


/*************************SECTION ACTIVITY************************************/

/* Section Slick-Line Services */
.slickline-services-section {
    padding: 60px 0;
    background: #fff;
}

.slickline-main-container {
    margin: 0 auto 40px;
}

.slickline-image-left {
    float: left;
    width: 56%;
    margin: 0 50px 30px 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.slickline-image-left img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.slickline-image-left:hover img {
    transform: scale(1.03);
}


.slickline-content-right {
    overflow: hidden;
}

.slickline-content-right .page-title {
    font-size: 42px;
    color: #0059ad;
    font-family: 'd-din-probold';
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(0, 89, 173, 0.2);
    display: none;
}


/* Services */
.slickline-services-section .services-section {
    padding: 0 0 0 0;
}

.slickline-services-section .services-section h2 {
    font-size: 26px;
    color: #0059ad;
    margin-bottom: 25px;
    font-family: 'dinpromedium';
    margin-top: 0;
}

.slickline-services-section .services-grid {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.slickline-services-section .service-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 15px;
    background: #f8fafc;
    border-radius: 10px;
    border-left: 4px solid #0059ad;
    transition: all 0.3s ease;
}


.slickline-services-section .service-icon {
    width: 25px;
    height: 25px;
    background: #0059ad;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: bold;
    flex-shrink: 0;
    margin-top: 5px;
}

.slickline-services-section .service-text h3 {
    font-size: 18px;
    color: #112352;
    margin: 0;
    font-family: 'dinpromedium';
    line-height: 2;
    font-weight: normal;
}

/* Unités */
.units-section {
    padding: 50px 0;
}

.units-container {
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 40px;
}

.unit-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.unit-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.unit-card.onshore {
    border-top: 4px solid #0059ad;
}

.unit-card.offshore {
    border-top: 4px solid #009688;
}

.unit-header {
    padding: 25px 30px;
    background: #f8fafc;
    border-bottom: 1px solid #eaeaea;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.unit-header h2 {
    font-size: 28px;
    color: #112352;
    margin: 0;
    font-family: 'd-din-probold';
}

.unit-badge {
    padding: 8px 20px;
    background: #0059ad;
    color: white;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}

.unit-card.offshore .unit-badge {
    background: #009688;
}

.unit-content {
    padding: 30px;
}

.unit-image {
    margin-bottom: 25px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.unit-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.unit-image:hover img {
    transform: scale(1.05);
}

.unit-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.unit-details li {
    margin-bottom: 12px;
    padding-left: 30px;
    position: relative;
    text-align: justify;
}

.unit-details li:before {
    content: "→";
    color: #0059ad;
    position: absolute;
    left: 0;
    top: 0;
}

.unit-card.offshore .unit-details li:before {
    color: #009688;
}

.unit-details li:last-child {
    margin-bottom: 0;
}

/* Memory Production Logging Tool MPLT */

.mplt-section-alt {
    padding: 60px 0;
    background: #fff;
}

.mplt-container-alt {
    margin: 0 auto 0px;
    overflow: hidden;
}


.mplt-image-right {
    float: right;
    width: 45%;
    margin: 0 0 30px 50px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.mplt-image-right img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.mplt-image-right:hover img {
    transform: scale(1.03);
}


.mplt-text-left {
    margin-top: 65px;
    padding: 35px 25px;
    background: #f8fafc;
    border-radius: 10px;
    border-left: 4px solid #0059ad;
    transition: all 0.3s ease;
    overflow:hidden;
    line-height: 1.7;
}


.mplt-bottom-image {
    max-width: 700px;
    margin: 0 ;
    padding: 0 20px;
}

.mplt-bottom-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: transform 0.5s ease;
}

.mplt-bottom-image:hover img {
    transform: scale(1.02);
}


/* Section Well Testing */
.well-testing-section {
    padding: 60px 0;
}

.well-testing-content {
    display: flex;
    gap: 50px;
    margin-bottom: 80px;
    align-items: flex-start;
}

.well-testing-image {
    flex: 0 0 55%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.well-testing-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.well-testing-image:hover img {
    transform: scale(1.03);
}

.well-testing-text {
    flex: 1;
    min-width: 0;
}

.well-testing-section  .services-list {
    margin-bottom: 40px;
}

.well-testing-section  .service-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
    margin-bottom: 15px;
    border-left: 4px solid #0059ad;
    transition: all 0.3s ease;
}

.well-testing-section  .service-icon {
    width: 26px;
    height: 26px;
    background: #0059ad;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    flex-shrink: 0;
}

.well-testing-section  .service-text h3 {
    font-size: 22px;
    color: #112352;
    margin: 0;
    font-family: 'dinpromedium'; font-weight:normal;
}

/* Solutions sur mesure */
.solutions-section {
    margin-bottom: 40px;
}

.solutions-section h2 {
    font-size: 26px;
    font-family: 'dinpromedium';
}

.solutions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.solution-item {
    display: flex;
    gap: 15px;
    align-items: center;
}


.solution-item h3 {
    font-size: 24px;
    color: #112352;
    margin: 0;
    font-family: 'dinpromedium'; font-weight:normal
}

/* Standards section */
.standards-section {
    background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 100%);
    padding: 30px;
    border-radius: 15px;
    border-left: 5px solid #009688;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.standards-section p {
  
    text-align: justify;
}

/* Surface Well Testing Package */
.package-section {
    background: #f8fafc;
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-top: 4px solid #0059ad;
}

.package-header {
    text-align: center;
    margin-bottom: 50px;
}

.package-header h2 {
    font-size: 32px;
    color: #112352;
    font-family: 'd-din-probold';
    margin: 0;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

.package-header h2:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: #0059ad;
    border-radius: 2px;
}

.package-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25px;
}

.package-item {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.package-item:hover {
    border-color: #0059ad;
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}

.package-icon {
    font-size: 32px;
    margin-bottom: 15px;
    display: table;
}

.package-item h3 {
    font-size: 22px;
    color: #112352;
    margin: 0;
    font-family: 'dinpromedium';
    text-align: center;
    font-weight: normal;
}

.package-grid.compact {
    justify-content: center;
    grid-template-columns: repeat(4, 1fr);
}

.package-grid.compact .package-item {
    padding: 20px;
}

.package-grid.compact .package-icon {
    width: 50px;
    height: 50px;
    font-size: 32px;
    margin-bottom: 15px;
    text-align: center;
    margin: auto;
    color: #ffb916;
}

.package-grid.compact .package-item h3 {
    /* font-size: 16px; */
}

.epf-section .epf-container {
   margin: 0 auto;
   padding: 40px 0 0;
}

/* Introduction simple */
.epf-section .epf-intro-simple {
    text-align: center;
    margin-bottom: 50px;
    /* padding: 0 20px; */
}

.epf-section .epf-intro-simple p {
    margin: 0 auto;
    font-family: 'din_procondensed_medium';
    font-size: 32px;
    max-width: 800px;
}

/* Section équipements  */
.epf-section .epf-setup-with-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
    align-items: start;
}


.epf-section .stacked-images {
    position: relative;
}

.epf-section .stacked-images-container {
    position: relative;
    width: 100%;
    height: 600px;
}

.epf-section .image-stack {
    position: relative;
    width: 100%;
    height: 100%;
}

.epf-section .main-image {
    position: absolute;
    top: 0;
    right: -12px;
    width: 85%;
    height: 70%;
    z-index: 2;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.epf-section .secondary-image {
    position: absolute;
    bottom: -63px;
    left: -48px;
    width: 80%;
    height: 60%;
    z-index: 1;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    /* border: 5px solid white; */
}

.epf-section .main-image img,
.epf-section .secondary-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.epf-section .image-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(26, 54, 93, 0.85);
    color: white;
    padding: 12px 15px;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
}

/* Contenu setup à droite */
.epf-section .setup-content {
    padding-top: 20px;
}

.epf-section .setup-title-section {
    margin-bottom: 30px;
}

.epf-section .setup-title-section h2 {
    color: #1a365d;
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
}

/* Liste des équipements */
.epf-section .setup-list {
    background: #f8fafc;
    padding: 15px 25px;
    border-radius: 8px;
    border-left: 4px solid #2c5aa0;
}

.epf-section .equipment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.epf-section .equipment-list-item {
    padding: 10px 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.epf-section .equipment-list-item:last-child {
    border-bottom: none;
}

.epf-section .list-icon {
    color: #2c5aa0;
    font-weight: bold;
    flex-shrink: 0;
    margin-top: 2px;
}

.epf-section .list-text {
    flex: 1;
}

/* Section Turnkey Services simple */
.epf-section .turnkey-section-simple {
    margin: 50px 0;
}

.epf-section .turnkey-header-simple {
    text-align: left;
}

.epf-section .turnkey-header-simple h2 {
    font-size:28px
}



/* Section Commercial Models simple */
.epf-section .commercial-models-simple {
    margin: 50px 0;
}

.epf-section .commercial-models-header {
    margin-bottom: 25px;
}

.epf-section .commercial-models-header h2 {
font-size:28px;
}

.epf-section .models-list {
    background: #f8fafc;
    padding: 25px 30px;
    border-radius: 8px;
    border-left: 4px solid #2c5aa0;
}

.epf-section .models-ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.epf-section .model-item {
    padding: 15px 0;
    border-bottom: 1px solid #e2e8f0;
   
}

.epf-section .model-item:last-child {
    border-bottom: none;
}

.epf-section .model-item strong {
    color: #1a365d;
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
}



/* Section Marginal Field Development */
.epf-section.marginal-field-section {
    
}

.epf-section.marginal-field-section .marginal-field-container {
 
    margin: 0 auto;
}

/* En-tête */
.epf-section.marginal-field-section .marginal-field-header {
    text-align: center;
    margin-bottom: 30px;
}

.epf-section.marginal-field-section .marginal-field-header h2 {
    color: #1a365d;
    font-weight: 700;
    margin: 0;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

.epf-section.marginal-field-section .marginal-field-header h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(to right, #2c5aa0, #64b5f6);
    border-radius: 2px;
}

/* Introduction */
.epf-section.marginal-field-section .marginal-field-intro {
    text-align: center;
    margin-bottom: 50px;
    margin-left: auto;
    font-family: 'dinpromedium';
    margin-right: auto;
}


/* Success Stories dans des cartes */
.epf-section.marginal-field-section .success-stories-cards {
    margin-bottom: 40px;
}

.epf-section.marginal-field-section .success-stories-header {
    text-align: center;
    margin-bottom: 30px;
}

.epf-section.marginal-field-section .success-stories-header h3 {
    color: #1a365d;
    font-weight: 600;
    margin: 0;
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 3px solid #2c5aa0;
}

.epf-section.marginal-field-section .stories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.epf-section.marginal-field-section .story-card {
    background: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    border-left: 5px solid #2c5aa0;
}

.epf-section.marginal-field-section .story-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.epf-section.marginal-field-section .story-card-content h4 {
    color: #1a365d;
    font-weight: normal;
    margin: 0 0 15px 0;
    line-height: 1.4;
    font-size: 28px;
    font-family: 'd-din-probold';
}


/* Development Planning Section */
.epf-section.marginal-field-section .development-planning-section {
    margin-top: 40px;
}

.epf-section.marginal-field-section .planning-card-with-icon {
    
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    max-width: 1200px;
    margin: auto;
}

.epf-section.marginal-field-section .planning-icon-container {
    flex-shrink: 0;
}

.epf-section.marginal-field-section .planning-main-icon {
    font-size: 26px;
    color: white;
    background: rgb(44 90 160);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.3);
}

.epf-section.marginal-field-section .planning-content {
    flex: 1;
}

.epf-section.marginal-field-section .planning-content h3 {
    margin: 0;
    line-height: 1.4;
}

/* Section Operations & Maintenance */

.epf-section.operations-maintenance-section {
    margin: 60px 0;
}

.epf-section.operations-maintenance-section .om-container {  
    margin: 0 auto;   
}

/* En-tête */
.epf-section.operations-maintenance-section .om-header {
    text-align: center;
    margin-bottom: 40px;
}

.epf-section.operations-maintenance-section .om-header h2 {
    color: #1a365d;
    font-size: 2.3rem;
    font-weight: 700;
    margin: 0;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

.epf-section.operations-maintenance-section .om-header h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    background: #2c5aa0;
    border-radius: 2px;
}

/* Introduction et objectifs avec image */
.epf-section.operations-maintenance-section .om-intro-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    margin-bottom: 50px;
    align-items: center;
}

.epf-section.operations-maintenance-section .om-intro-content {
    padding-right: 20px;
}

.epf-section.operations-maintenance-section .objectives-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
p.om-intro-text {
    font-family: 'd-din-proregular';
}
.epf-section.operations-maintenance-section .objective-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.epf-section.operations-maintenance-section .objective-icon {
    color: #2c5aa0;
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Images */
.epf-section.operations-maintenance-section .om-image-container,
.epf-section.operations-maintenance-section .strength-image,
.epf-section.operations-maintenance-section .hseq-image {
    width: 100%;
}

.epf-section.operations-maintenance-section .om-image-wrapper {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
}

.epf-section.operations-maintenance-section .om-image-wrapper img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.epf-section.operations-maintenance-section .om-image-wrapper:hover img {
    transform: scale(1.05);
}

.epf-section.operations-maintenance-section .image-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(26, 54, 93, 0.85);
    color: white;
    padding: 12px 15px;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Services offerts */
.epf-section.operations-maintenance-section .services-offered-section {
    margin-bottom: 50px;
}

.epf-section.operations-maintenance-section .services-header {
    margin-bottom: 30px;
}

.epf-section.operations-maintenance-section .services-header h3 {
    color: #1a365d;
    margin: 0;
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 3px solid #2c5aa0;
}

.epf-section.operations-maintenance-section .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.epf-section.operations-maintenance-section .service-card {
    background: #f8fafc;
    border-radius: 10px;
    padding: 20px 15px;
    text-align: center;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
}

.epf-section.operations-maintenance-section .service-card:hover {
    transform: translateY(-5px);
    border-color: #2c5aa0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.epf-section.operations-maintenance-section .service-title {
    color: #1a365d;
    font-family: 'dinpromedium';
    margin-bottom: 10px;
    line-height: 1.24;
}

.epf-section.operations-maintenance-section .service-desc {
    color: #4a5568;
    font-size: 0.95rem;
    margin: 0;
    font-style: italic;
}


.epf-section.operations-maintenance-section .strength-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.epf-section.operations-maintenance-section .strength-header {
    margin-bottom: 20px;
}



/* HSEQ Section */
.epf-section.operations-maintenance-section .hseq-section {
 margin: 50px 0;
}

.epf-section.operations-maintenance-section .hseq-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.epf-section.operations-maintenance-section .hseq-header {
    margin-bottom: 20px;
}

.epf-section.operations-maintenance-section  h3 {
    color: #1a365d;
    font-size: 32px;
}


/* Trust SMIP */
.epf-section.operations-maintenance-section .trust-section {
    text-align: center;
}

.epf-section.operations-maintenance-section .trust-card {
    background: linear-gradient(135deg, #31517e 0%, #2c66bf 100%);
    border-radius: 15px;
    padding: 40px;
    max-width: 100%;
    margin: 0 auto;
    color: white;
    text-align: center;
}

.epf-section.operations-maintenance-section .trust-header {
    margin-bottom: 20px;
}

.epf-section.operations-maintenance-section .trust-header h3 {
  
    margin: auto;
    color: white;
    text-align: center;
}


/***************************Article TZPortfolio**********************************/
.com_tz_portfolio_plus.view-article .tpp-bootstrap h1{
    position: relative;
    font-size: 54px;
    font-family: 'dinprobold';
    margin:0 0 40px !important;
}

.tpp-bootstrap h1:before{
    position: absolute;
   content:"";
    bottom:-20px;
    left:0;
    width:100px;
    height:7px;
    background:#0059ad;
    border-radius:3px;
}
.tpp-item-icon {
    display: none;
}

.tpp-item-page__inner {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.tpp-item-page__inner div#tz-portfolio-template-body {
    width: 52%;
    margin: 0;
    padding: 0;
    border: none;
}

.tpp-bootstrap.TzItemPage.tpp-item-page.item-page {
    padding: 80px 0;
}
.tpp-item-page__inner div#tz-portfolio-template-media {
    width: 45%;
}

.desc2 {
    position: relative;
    clear: both;
    margin: 441px 0 0 -92%;
}

.com_tz_portfolio_plus.view-portfolio .card-body.tpp-portfolio__description {
    position: absolute;
    top: 29%;
    z-index: 2;
    left: 25px;
    font-size: 0;
}

.com_tz_portfolio_plus.view-portfolio .tpp-bootstrap .card {
    background-color: unset !important;
    border: none !important;
}

/*
.com_tz_portfolio_plus.view-portfolio .tpp-bootstrap .card h2.tpp-item-title.name {
    font-size: 32px;
}
*/
.com_tz_portfolio_plus.view-portfolio .tpp-bootstrap .card h2.tpp-item-title.name {
    font-size: 32px;
    margin-top: 70px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    transition:.3s all;
    background: #ffa50094;
    padding: 10px 40px;
    border-radius: 50px 5px 50px 5px;
}
.com_tz_portfolio_plus.view-portfolio .tpp-bootstrap .card:hover h2.tpp-item-title.name {background: #0059adc7;}
.com_tz_portfolio_plus.view-portfolio h2.tpp-item-title.name a {
    color: #fff;
    text-decoration: none;
}
/*
.com_tz_portfolio_plus.view-portfolio  a.btn.btn-primary.tpp-item-readmore {
   background: orange;
    border: none;
    transition: .3s all;
    padding: 5px 25px;
    font-size: 22px;
    font-family: 'dinpromedium';
      border-radius: 44% 2%;
}


.com_tz_portfolio_plus.view-portfolio a.btn.btn-primary.tpp-item-readmore:hover {
    background: #0059ad; 

}*/
.com_tz_portfolio_plus.view-portfolio  a.btn.btn-primary.tpp-item-readmore {
   background: unset;
   border: none;
   transition: .3s all;
   font-size: 0;
   font-family: 'dinpromedium';
   border-radius: 0;
   font-size: 0;
   position: absolute;
   inset: 0;
   z-index: 25;
}
.com_tz_portfolio_plus.view-portfolio .tpp-bootstrap .card img{
  transform:scale(1);
	transition:.3s all;
}
.com_tz_portfolio_plus.view-portfolio .tpp-bootstrap .card:hover img{
  transform:scale(1.21);
}

.com_tz_portfolio_plus.view-portfolio  div#portfolio {
    display: flex;
    gap: 0px;
    flex-wrap: wrap;
    margin: auto !important;
   height:auto !important;
  justify-content: center;
}
.com_tz_portfolio_plus.view-portfolio  .tpp-bootstrap .bg-transparent {
    background-color: unset !important;
    width: 33.33% !important;
    margin-bottom: 0px !important;
    position: relative !important;
    inset: 0 !important;
    transform: unset !important;
}

.com_tz_portfolio_plus.view-portfolio .tpp-bootstrap .card .tz_portfolio_plus_image:before {
    position:absolute;
    content:"";
    background: #020024;
    background: linear-gradient(180deg, rgba(2, 0, 36, 0.62) 0%, rgb(9 9 121 / 15%) 100%);
    inset:0;
    z-index: 1;
	transition:.3s all;
	
}
.com_tz_portfolio_plus.view-portfolio .tpp-bootstrap .card:hover .tz_portfolio_plus_image:before {
background: linear-gradient(260deg, rgb(3 3 3 / 62%) 0%, rgb(116 116 117 / 15%) 100%);
    inset:5px;
}

/* AJOUT : Styles pour le bouton menu quand sticky */
.is-sticky .menu-toggle {
  top: 15px;
}