/*

SAISS

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

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

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
  color: #3CF;
}

a:hover {
	color: #FC3;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 25px;
  color: #2a2a2a;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #f5a425;
  color: #fff;
}

::-moz-selection {
  background: #f5a425;
  color: #fff;
}
/* Sponsor Bar */
.sponsor-bar {
  background-color: #e59833;
  padding: 05px 0;
}

.sponsor-bar img {
  max-height: 45px;
  width: auto;
  object-fit: contain;
  /*filter: brightness(0) invert(1);*/  /* enlève si tu veux garder les couleurs originales */
}

.sponsor-bar.bottom {
  margin-top: 10px;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.main-button-red a {
  font-size: 13px;
  color: #fff;
  background-color: #e59833;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
}

.main-button-red a:hover {
  opacity: 0.9;
}

.main-button-yellow a {
  font-size: 13px;
  color: #fff;
  background-color: #f5a425;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
}

.main-button-yellow a:hover {
  opacity: 0.9;
}

.section-heading h2 {
  line-height: 40px;
  margin-top: 0px;
  margin-bottom: 50px; 
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(250,250,250,0.15);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}

/* Harmonisation de la page projet */

/* Listes = même style que paragraphes */
.meeting-single-item ul li {
  font-size: 14px;
  line-height: 20px;
  color: #1f272b;
  margin-bottom: 8px;
  text-align: justify;
}

/* Retirer trop d’indentation si nécessaire */
.meeting-single-item ul {
  padding-left: 18px;
}

/* Titres h4 harmonisés */
.meeting-single-item h4 {
  font-size: 18px !important;
  font-weight: 600;         /* bien gras */
  color: #1f272b;
  text-transform: none;     /* évite majuscules forcées */
  margin-top: 10px;
  margin-bottom: 10px;
}

/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.sub-header {
  background-color: #2E7D32;
  position: relative;
  z-index: 1111;
}

.sub-header .left-content p {
  color: #fff;
  padding: 8px 0px;
  font-size: 13px;
}

.sub-header .right-icons {
  text-align: right;
  padding: 8px 0px;
}

.sub-header .right-icons ul li {
  display: inline-block;
  margin-left: 15px;
}

.sub-header .right-icons ul li a {
  color: #fff;
  font-size: 14px;
  transition: all .3s;
}

.sub-header .right-icons ul li a:hover {
  color: #f5a425;
}

.sub-header .left-content p em {
   font-style: normal;
   color: #f5a425;
}

.background-header {
  background-color: #fff!important;
  height: 80px!important;
  position: fixed!important;
  top: 0!important;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}

.background-header .main-nav .nav li a {
  color: #1e1e1e!important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #1e1e1e!important;
}

.background-header .main-nav .nav li:hover a {
  color: #fb5849!important;
}

.background-header .nav li a.active {
  color: #fb5849!important;
}

.header-area {
  background-color: rgba(250,250,250,0.15);
  position: absolute;
  top: 143px;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
  /* margin-top: 83px; */
}
.ministry-bar {
  background-color: #2E7D32; /* même couleur que le Sub Header */
  padding: 05px 0;
  
}

.ministry-bar img {
  max-width: 420px;   /* ajuste si tu veux plus grand/petit */
  width: 100%;
  height: auto;
}
.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height: 100px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

/* Style du bouton langue dans le Sub Header */
.sub-header .dropdown .btn.dropdown-toggle {
  background-color: #2E7D32 !important;   /* même vert que le sub-header */
  border: 1px solid #FFFFFF !important;    /* cadre orange */
  padding: 4px 6px;                        /* réduit l'intérieur sans toucher le flag */
  border-radius: 6px;                      /* léger arrondi, optionnel */
  margin-top: 2px;
  box-shadow: none;
}

/* Empêcher bootstrap de changer la couleur au hover/focus */
.sub-header .dropdown .btn.dropdown-toggle:hover,
.sub-header .dropdown .btn.dropdown-toggle:focus,
.sub-header .dropdown .btn.dropdown-toggle:active {
  background-color: #2E7D32 !important;
  border-color: #ffffff !important;
  box-shadow: none !important;
}

/* S'assurer que le drapeau garde sa taille */
.sub-header .dropdown .btn img {
  width: 20px;
  height: auto;
  display: inline-block;
}

.background-header .main-nav .logo {
  line-height: 75px;
}

.background-header .nav {
  margin-top: 20px !important;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 15px;
  padding-right: 15px;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  color: #fff;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #f5a425!important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #f5a425!important;
  opacity: 1;
}

.header-area .main-nav .nav li.has-sub {
  position: relative;
  padding-right: 15px;
}

.header-area .main-nav .nav li.has-sub:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #fff;
  position: absolute;
  right: 5px;
  top: 12px;
}

.background-header .main-nav .nav li.has-sub:after {
  color: #1e1e1e;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu {
  position: absolute;
  /* width: 200px; */
  min-width: 270px;      /* largeur minimum */
  width: auto;           /* s’adapte au texte */
  white-space: normal;   /* autorise retour à la ligne si besoin */
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 40px;
  opacity: 0;
  transition: all .3s;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.has-sub ul li a:hover {
  background: #fff;
  color: #f5a425!important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.has-sub ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.has-sub:hover ul.sub-menu {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #1e1e1e;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #f5a425;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 7px;
    padding-right: 7px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo {
    color: #1e1e1e;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #f5a425!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #f5a425!important;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
    transition: all 0s;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    height: auto;
  }
  .header-area .main-nav .nav li.has-sub:after {
    color: #3B566E;
    right: 30px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}


/* 
---------------------------------------------
banner
--------------------------------------------- 
*/

.main-banner {
  position: relative;
  max-height: 100%;
  overflow: hidden;
  margin-bottom: -7px;
}

#bg-video {
    min-width: 100%;
    min-height: 100vh;
    max-width: 100%;
    max-height: 100vh;
    object-fit: cover;
    z-index: -1;
}

#bg-video::-webkit-media-controls {
    display: none !important;
}

.video-overlay {
    position: absolute;
    background-color: rgba(31,39,43,0.75);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
}

.main-banner .caption {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.main-banner .caption h6 {
  margin-top: 0px;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1px;
}

.main-banner .caption h2 {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 36px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
}

.main-banner .caption h2 em {
  font-style: normal;
  color: #f5a425;
  font-weight: 900;
}

.main-banner .caption p {
  color: #fff;
  font-size: 14px;
  max-width: 570px;
}

.main-banner .caption .main-button-red {
  margin-top: 30px;
}

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

  .main-banner .caption h6 {
    font-weight: 500;
  }

  .main-banner .caption h2 {
    font-size: 36px;
  }

}


/*
---------------------------------------------
services
---------------------------------------------
*/

button {
  pointer-events: auto;
}

.services {
  margin-top: -135px;
  position: absolute;
  width: 100%;
}

.services .item {
  background-image: url(../images/service-item-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 20px;
  text-align: center;
  color: #fff;
  padding: 40px;
}

.services .item .icon {
  max-width: 60px;
  margin: 0 auto;
}

.services .item h4 {
  margin-top: 25px;
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 600;
}

.services .item p {
  color: #fff;
  font-size: 13px;
}

.services .owl-nav {
  display: inline-block !important;
  text-align: center;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-25px);
}
    
.services .owl-nav .owl-prev{
  margin-right: 10px;
  outline: none;
  position: absolute;
  left: -80px;
}

.services .owl-nav .owl-prev span,
.services .owl-nav .owl-next span {
  opacity: 0;
}

.services .owl-nav .owl-prev:before {
  display: inline-block;
  font-family: 'FontAwesome';
  color: #1e1e1e;
  font-size: 25px;
  font-weight: 700;
  content: '\f104';
  background-color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
}

.services .owl-nav .owl-prev {
  opacity: 1;
  transition: all .5s;
}

.services .owl-nav .owl-prev:hover {
  opacity: 0.9;
}

.services .owl-nav .owl-next {
  opacity: 1;
  transition: all .5s;
}

.services .owl-nav .owl-next:hover {
  opacity: 0.9;
}

.services .owl-nav .owl-next{
  margin-left: 10px;
  outline: none;
  position: absolute;
  right: -85px;
}

.services .owl-nav .owl-next:before {
  display: inline-block;
  font-family: 'FontAwesome';
  color: #1e1e1e;
  font-size: 25px;
  font-weight: 700;
  content: '\f105';
  background-color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
}


/*
---------------------------------------------
upcoming meetings
---------------------------------------------
*/

.why-project {
  /*background-image: url(../images/meetings-bg.jpg);*/
  background-color: #2E7D32;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 265px 0 80px 0;
  color: #fff;
}

.why-project h2 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
}

.why-project p {
  font-size: 16px;
  line-height: 28px;
  color: #fff;
}
.why-image-box img {
  max-height: 450px;
  object-fit: cover;
}

.why-button-box .btn {
  background-color: #e59833 !important;  /* même orange sponsor */
  color: #fff !important;                /* texte blanc */
  border: none;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 25px;
  border-radius: 25px;
  
}


.why-button-box .btn:hover {
  opacity: 0.9;
}

.why-project-2 {
  /*background-image: url(../images/meetings-bg.jpg);*/
  background-color: #2E7D32;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 80px 0 80px 0;
  color: #fff;
}

.why-project-2 h2 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
}

.why-project-2 p {
  font-size: 16px;
  line-height: 28px;
  color: #fff;
}


section.upcoming-meetings {
  /*background-image: url(../images/meetings-bg.jpg);*/
  background-color: #2E7D32;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 230px;
  padding-bottom: 110px;
}

section.upcoming-meetings .section-heading {
  text-align: center;
}

section.upcoming-meetings .categories {
  background-color: #fff;
  border-radius: 20px;
  padding: 40px;
  margin-right: 45px;
}

section.upcoming-meetings .categories h4 {
  font-size: 18px;
  font-weight: 600;
  color: #1f272b;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

section.upcoming-meetings .categories ul li {
  display: inline-block;
  margin-bottom: 15px;
}

section.upcoming-meetings .categories ul li a {
  font-size: 15px;
  color: #1f272b;
  font-weight: 500;
  transition: all .3s;
}

section.upcoming-meetings .categories ul li a:hover {
  color: #e59833;
}

section.upcoming-meetings .categories .main-button-red {
  border-top: 1px solid #eee;
  padding-top: 30px;
  margin-top: 15px;
}

section.upcoming-meetings .categories .main-button-red a {
  width: 100%;
  text-align: center;
}

.meeting-item {
  margin-bottom: 30px;
}

.meeting-item .thumb {
  position: relative;
}

.meeting-item .thumb img {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

.meeting-item .thumb .price {
  position: absolute;
  left: 20px;
  top: 20px;
}

.meeting-item .thumb .price span {
  font-size: 16px;
  color: #1f272b;
  font-weight: 600;
  background-color: rgba(250,250,250,0.9);
  padding: 7px 12px;
  border-radius: 10px;
}

.meeting-item .down-content {
  background-color: #fff;
  padding: 30px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.meeting-item .down-content .date {
  float: left;
  text-align: center;
  display: inline-block;
  margin-right: 20px;
}

.meeting-item .down-content .date h6 {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  color: #e59833;
}

.meeting-item .down-content .date span {
  display: block;
  color: #1f272b;
  font-size: 22px;
  margin-top: 7px;
}

.meeting-item .down-content h4 {
  font-size: 18px;
  color: #1f272b;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 15px;
}

.meeting-item .down-content p {
  margin-left: 50px;
  color: #1f272b;
  font-size: 14px;
}



/*
---------------------------------------------
apply now
---------------------------------------------
*/

section.apply-now {
  background-image: url(../images/apply-bg.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0px;
}

section.apply-now .item {
  background-color: rgba(250,250,250,0.15);
  padding: 40px;
  margin-bottom: 30px;
}

section.apply-now .item h3 {
  color: #fff;
  text-transform: uppercase;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
}

section.apply-now .item p {
  color: #fff;
  margin-bottom: 20px;
}

.accordions {
  border-radius: 20px;
  padding: 40px;
  background-color: #fff;
  margin-left: 45px;
}
.accordions .accordion {
  border-bottom: 1px solid #eee;
}
.accordions .last-accordion {
  border-bottom: none;
}
.accordion-head {
  padding: 20px;  
  font-size: 18px;
  font-weight: 700;
  color: #1f272b;
  cursor: pointer;
  transition: color 200ms ease-in-out;
  border-bottom: 1px solid #fff;
}


@media screen and (min-width: 768px) {
  .accordion-head {
    padding: 1rem;
    font-size: 1.2rem;
  }
}
.accordion-head .icon {
  float: right;
  transition: transform 200ms ease-in-out;
}
.accordion-head.is-open {
  color: #f5a425;
  border-bottom: none;
}
.accordion-head.is-open .icon {
  transform: rotate(45deg);
}
.accordion-body {
  overflow: hidden;
  height: 0;
  transition: height 300ms ease-in-out;
  border-bottom: 1px solid #fff;
}
.accordion-body > .content {
  padding: 20px;
  padding-top: 0;
}
/* On cache complètement le contenu des accordéons fermés */
.accordion-body {
  display: none;
  height: auto !important;   /* on ignore la hauteur animée du JS */
}

/* On montre le contenu uniquement quand le header est ouvert */
.accordion-head.is-open + .accordion-body {
  display: block;
}

/* Optionnel : enlever la marge du <p> pour éviter tout débordement interne */
.accordion-body p {
  margin: 0;
}

/* 
---------------------------------------------
courses
--------------------------------------------- 
*/

section.our-courses {
  /*background-image: url(../images/meetings-bg.jpg);*/
  background-color: #2E7D32;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 80px;
  padding-bottom: 60px;
}

.our-courses .item .down-content {
  background-color: #fff;
}

.our-courses .item .down-content h4 {
  padding: 25px;
  font-size: 18px;
  color: #1f272b;
  text-align: center; 
  border-bottom: 1px solid #eee;
}

.our-courses .item .down-content .info {
  padding: 25px;
}

.our-courses .item .down-content .info ul li {
  display: inline-block;
  margin-right: 1px;
}

.our-courses .item .down-content .info ul li i {
  color: #f5a425;
  font-size: 14px;
}

.our-courses .item .down-content .info span {
  color: #e59833;
  font-size: 15px;
  font-weight: 600;
  text-align: right;
  display: inline-block;
  width: 100%;
}

.our-courses .item .down-content .info a {
  color: #2E7D32 !important;   /* même orange que le span */
}
.our-courses .item .down-content .info a:hover {
  color: #e59833 !important;   /* optionnel: léger effet hover */
}

.our-courses .owl-nav {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-45px);
}

.our-courses .owl-dots {
  display: inline-block;
  text-align: center;
  width: 100%;
  margin-top: 40px;
}

.our-courses .owl-dots .owl-dot {
  transition: all .5s;
  width: 7px;
  height: 7px;
  background-color: #fff;
  margin: 0px 5px;
  border-radius: 50%;
  outline: none;
}

.our-courses .owl-dots .active {
  width: 24px;
  height: 8px;
  border-radius: 4px;
}
    
.our-courses .owl-nav .owl-prev{
  margin-right: 10px;
  outline: none;
  position: absolute;
  left: -80px;
}

.our-courses .owl-nav .owl-prev span,
.our-courses .owl-nav .owl-next span {
  opacity: 0;
}

.our-courses .owl-nav .owl-prev:before {
  display: inline-block;
  font-family: 'FontAwesome';
  color: #1e1e1e;
  font-size: 25px;
  font-weight: 700;
  content: '\f104';
  background-color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
}

.our-courses .owl-nav .owl-prev {
  opacity: 1;
  transition: all .5s;
}

.our-courses .owl-nav .owl-prev:hover {
  opacity: 0.9;
}

.our-courses .owl-nav .owl-next {
  opacity: 1;
  transition: all .5s;
}

.our-courses .owl-nav .owl-next:hover {
  opacity: 0.9;
}

.our-courses .owl-nav .owl-next{
  margin-left: 10px;
  outline: none;
  position: absolute;
  right: -85px;
}

.our-courses .owl-nav .owl-next:before {
  display: inline-block;
  font-family: 'FontAwesome';
  color: #1e1e1e;
  font-size: 25px;
  font-weight: 700;
  content: '\f105';
  background-color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
}


/*
---------------------------------------------
our facts
---------------------------------------------
*/

section.our-facts {
  background-image: url(../images/facts-bg.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0px 125px 0px;
}

section.our-facts h2 {
  font-size: 38px;
  color: #fff;
  line-height: 50px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 50px;
}

.count-area-content {
  text-align: center;
  background-color: rgba(250,250,250,0.15);
  border-radius: 20px;
  padding: 25px 30px 35px 30px;
  margin: 15px 0px;
}

.percentage .count-digit:after {
  content: '%';
  margin-left: 3px;
}

.count-digit {
    margin: 5px 0px;
    color: #f5a425;
    font-weight: 700;
    font-size: 36px;
}
.count-title {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.5px;
}

.new-students {
  margin-top: 45px;
}

section.our-facts .video {
  text-align: center;
  margin-left: 70px;
  background-image: url(../images/video-item-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 20px;
}

section.our-facts .video img {
  padding: 170px 0px;
  max-width: 56px;
}


/* 
---------------------------------------------
contact us
--------------------------------------------- 
*/

section.contact-us::before {
  content: "";
  display: block;
  width: 1120px;        /* longueur du trait -> tu peux ajuster */
  height: 1px;         /* épaisseur */
  margin: 0 auto 0px; /* centré + espace avec le contenu */
  background: #fff;
  opacity: 0.2;
}

section.contact-us {
  /*background-image: url(../images/meetings-bg.jpg);*/
  background-color: #2E7D32;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0px 0px 0px 0px;
}

section.contact-us #contact {
  background-color: #fff;
  border-radius: 20px;
  padding: 40px;
}

section.contact-us #contact h2 {
  text-transform: uppercase;
  color: #1f272b;
  border-bottom: 1px solid #eee;
  margin-bottom: 40px;
  padding-bottom: 20px;
  font-size: 22px;
  font-weight: 700;
}

section.contact-us #contact input {
  width: 100%;
  height: 40px;
  border-radius: 20px;
  background-color: #f7f7f7;
  outline: none;
  border: none;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  color: #7a7a7a;
  padding: 0px 15px;
  margin-bottom: 30px;
}

section.contact-us #contact textarea {
  width: 100%;
  min-height: 140px;
  max-height: 180px;
  border-radius: 20px;
  background-color: #f7f7f7;
  outline: none;
  border: none;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  color: #7a7a7a;
  padding: 15px;
  margin-bottom: 30px;
}

section.contact-us #contact button {
  font-size: 13px;
  color: #fff;
  background-color: #e59833;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all .3s;
  border: none;
  outline: none;
}

section.contact-us #contact button:hover {
  opacity: 0.9;
}

section.contact-us .right-info {
  background-color: #e59833;
  border-radius: 20px;
  padding: 40px;
}

section.contact-us .right-info ul li {
  display: inline-block;
  border-bottom: 1px solid rgba(250,250,250,0.15);
  margin-bottom: 30px;
  padding-bottom: 30px;
}

section.contact-us .right-info ul li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

section.contact-us .right-info ul li h6 {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
}

section.contact-us .right-info ul li span {
  display: block;
  font-size: 18px;
  color: #fff;
  font-weight: 700;
}

.footer {
  text-align: center;
  margin-top: 0px;
  border-top: 1px solid rgba(250,250,250,0.15);
  padding: 50px 0px;
}
.footer p {
  text-transform: uppercase;
  text-align: center !important;
  font-size: 14px;
  color: #fff;
}

.footer p a {
  color: #f5a425;
}


/*
---------------------------------------------
heading page
---------------------------------------------
*/

section.heading-page {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 230px;
  padding-bottom: 110px;
  text-align: center;
}

section.heading-page h6 {
  margin-top: 0px;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1px;
}

section.heading-page h2 {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 36px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
}


/*
---------------------------------------------
upcoming meetings page
---------------------------------------------
*/

section.meetings-page {
  /*background-image: url(../images/meetings-page-bg.jpg);*/
  background-color: #2E7D32;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 40px;
  padding-bottom: 0px;
}

section.meetings-page .filters {
  text-align: center;
  margin-bottom: 60px;
}

section.meetings-page .filters li {
  font-size: 13px;
  color: #e59833;
  background-color: #fff;
  padding: 11px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 600;
  text-transform: uppercase;
  transition: all .3s;
  cursor: pointer;
  margin: 0px 3px;
}

section.meetings-page .filters ul li.active,
section.meetings-page .filters ul li:hover {
  background-color: #e59833;
  color: #fff;
}

section.meetings-page .pagination {
  text-align: center;
  width: 100%;
  margin-top: 30px;
  display: inline-block;
}

/*section.meetings-page .pagination ul li {
  display: inline-block;
}*/

section.meetings-page .pagination ul li a {
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 10px;
  color: #1f272b;
  display: inline-block;
  text-align: center;
  line-height: 40px;
  font-weight: 600;
  font-size: 15px;
  transition: all .3s;
}

section.meetings-page .main-button-red {
  text-align: center;
}

section.meetings-page .main-button-red a {
  padding: 12px 60px;
  text-align: center;
  margin-top: 30px;
}

/*section.meetings-page .pagination ul li.active a,
section.meetings-page .pagination ul li a:hover {
  background-color: #e59833;
  color: #fff;
} */

.meeting-single-item .thumb {
  position: relative;
}

.meeting-single-item .thumb img {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

.meeting-single-item .thumb .price {
  position: absolute;
  left: 20px;
  top: 20px;
}

.meeting-single-item .thumb .price span {
  font-size: 16px;
  color: #1f272b;
  font-weight: 600;
  background-color: rgba(250,250,250,0.9);
  padding: 7px 12px;
  border-radius: 10px;
}

.meeting-single-item .down-content {
  background-color: #fff;
  padding: 40px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.meeting-single-item .thumb .date {
  position: absolute;
  background-color: rgba(250,250,250,0.9);
  width: 80px;
  height: 80px;
  text-align: center;
  padding: 15px 0px;
  border-radius: 10px;
  right: 20px;
  top: 20px;
}

.meeting-single-item .thumb .date h6 {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  color: #e59833;
}

.meeting-single-item .thumb .date span {
  display: block;
  color: #1f272b;
  font-size: 22px;
  margin-top: 7px;
}

.meeting-single-item .down-content h4 {
  font-size: 22px;
  color: #1f272b;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 15px;
}

.meeting-single-item .down-content h5 {
  font-size: 18px;
  color: #1f272b;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 15px;
}

.meeting-single-item .down-content p {
  color: #1f272b;
  font-size: 14px;
}

.meeting-single-item .down-content p.description {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #eee;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #eee;
}

.meeting-single-item .down-content .share {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #eee;
}

.meeting-single-item .down-content .share h5 {
  float: left;
  margin-right: 10px;
  margin-bottom: 0px;
}

.meeting-single-item .down-content .share ul li {
  display: inline;
}

.meeting-single-item .down-content .share ul li a {
  font-size: 14px;
  color: #1f272b;
  transition: all .3s;
}

.meeting-single-item .down-content .share ul li a:hover {
  color: #f5a425;
}

/* Meeting item column */
.templatemo-item-col {
	width: 31%;
}

@media (max-width: 992px) {
	.templatemo-item-col {
		width: 45%;
	}
}

@media (max-width: 767px) {
	.templatemo-item-col {
		width: 100%;
	}
}

/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/

@media (max-width: 1300px) {
  .services .owl-nav .owl-next{
    right: -30px;
  }
  .services .owl-nav .owl-prev{
    left: -25px;
  }
  .our-courses .owl-nav .owl-next{
    right: -30px;
  }
  .our-courses .owl-nav .owl-prev{
    left: -25px;
  }
}

@media (max-width: 1200px) {
  .services .owl-nav .owl-next{
    right: -70px;
  }
  .services .owl-nav .owl-prev{
    left: -65px;
  }
  .our-courses .owl-nav .owl-next{
    right: -70px;
  }
  .our-courses .owl-nav .owl-prev{
    left: -65px;
  }
}

@media (max-width: 1085px) {
  .services .owl-nav .owl-next{
    right: -30px;
  }
  .services .owl-nav .owl-prev{
    left: -25px;
  }
  .our-courses .owl-nav .owl-next{
    right: -30px;
  }
  .our-courses .owl-nav .owl-prev{
    left: -25px;
  }
}

@media (max-width: 1005px) {
  .services .owl-nav .owl-next{
    display: none;
  }
  .services .owl-nav .owl-prev{
    display: none;
  }
  .our-courses .owl-nav .owl-next{
    display: none;
  }
  .our-courses .owl-nav .owl-prev{
    display: none;
  }
}

@media (max-width: 992px) {

  .main-banner .caption {
    top: 60%;
  }

  .main-banner .caption h2 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 22px;
  }

  .main-banner .caption .main-button-red {
    margin-top: 15px;
  }

  .services {
    margin-top: 60px;
  }

  section.upcoming-meetings {
    padding-top: 400px;
  }

  section.upcoming-meetings .categories {
    margin-right: 0px;
    margin-bottom: 30px;
  }

  .accordions {
    margin-left: 0px;
  }

  .new-students {
    margin-top: 15px;
  }

  section.our-facts .video {
    margin-left: 0px;
    margin-top: 15px;
  }

  section.contact-us #contact {
    margin-bottom: 30px;
  }

}

@media (max-width: 767px) {

  .sub-header .left-content p {
    display: none;
  }

  .sub-header .right-icons {
    text-align: center;
  }

  .main-nav .nav .sub-menu {
    display: none;
  }

  .header-area .main-nav .nav li ul.sub-menu li a {
    color: #1f272b;
  }

}
.accordion-body p {
  margin: 0;
}

/* ================================
   Newsletter Banner Section
================================ */
.newsletter-banner-section {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 80px;
  padding-bottom: 80px;
  text-align: center;
  position: relative;
}

.newsletter-banner-section::before {
  content:"";
  position: absolute;
  inset:0;
  background: rgba(31,39,43,0.75);
}

.newsletter-banner-section .container {
  position: relative;
  z-index: 5;
}

.newsletter-banner-section h2 {
  /*font-size: 36px;*/
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

.newsletter-banner-section h6 {
  /*font-size: 15px;*/
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  margin-bottom: 35px;
  letter-spacing: 1px;
}

/* Formulaire */
.newsletter-form {
  margin-top: 10px;
}

.newsletter-input {
  width: 100%;
  height: 45px;
  border-radius: 25px;
  border: none;
  outline: none;
  padding: 0 18px;
  background: #fff;
  font-size: 14px;
}

.newsletter-btn {
  width: 100%;
  height: 45px;
  border-radius: 25px;
  border: none;
  color: #fff;
  background:#e59833;
  text-transform: uppercase;
  font-weight: 600;
  transition: .3s;
}

.newsletter-btn:hover {
  opacity:.9;
  cursor:pointer;
}

/* -------- ARTICLE PROJECT -------- */
.project-article-section{
  padding: 80px 0 40px 0;
}

.project-article-box{
  background:#fff;
  padding:40px 45px;
  border-radius:10px;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  border-left:6px solid #e59833;
}

.article-title{
  font-size:28px;
  font-weight:800;
  text-transform:uppercase;
  color:#1f272b;
  margin-bottom:10px;
}

.article-divider{
  width:70px;
  height:4px;
  background:#e59833;
  margin-bottom:25px;
}


/* ============================= */
/*   SAÏSS – Focus project grid   */
/* ============================= */

.saiss-focus-section {
  position: relative;
  background: url('../images/capply-bg.jpg') center center / cover no-repeat;
  min-height: 100vh;
  padding: 40px 0;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.saiss-focus-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

.saiss-focus-container {
  position: relative;
  z-index: 2;
}

.saiss-focus-title {
  color: #fff;
  font-size: 12px;
  margin-bottom: 60px;
}

.saiss-focus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* === SAÏSS focus items – copie exacte du style .item === */
.saiss-focus-section {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  padding: 120px 0;
  background: url('../images/apply-bg.jpg') center center / cover no-repeat fixed; 
}

.saiss-focus-bg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  z-index: 1;
}

.saiss-focus-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 2;
}

.saiss-focus-container {
  position: relative;
  z-index: 3;
}

.saiss-focus-title {
  color: #fff;
  font-size: 32px;
  margin-bottom: 60px;
  font-weight: 700;
  text-transform: uppercase;
}


/* Ajustement uniquement pour la 3e section du projet Saïss */
.why-project-saiss {
  padding-top:40px;
  padding-bottom: 10px;
  margin-top: 40px;     /* ajuste ici */
  margin-bottom: 120px; /* ajuste ici */
}

/* Image spécifique pour la section climat Saïss */
section.apply-now.saiss-focus-section {
  background-image: url("../images/cc.jpg");
}

/* Image spécifique pour la section climat Saïss */
section.apply-now.saiss-focus-section.mdez {
  background-image: url("../images/4.jpg");
}

/* ------ Vidéo ------ */

/* ===============================
   VIDÉOTHÈQUE – SECTION PRINCIPALE
   =============================== */

.videos-section {
  padding: 120px 0;
}

.videos-section .container {
  max-width: 1140px; /* identique aux autres pages */
}
/* ===============================
   VIDÉOTHÈQUE – équivalent
   =============================== */

.videos-section {
  background-color: #2E7D32;
  padding: 10px 0;
}

.videos-section .container {
  position: relative;
  z-index: 2;
}


/* ===============================
   VIDÉOTHÈQUE – FILTRES
   =============================== */

.videos-filters {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 40px;
}

.videos-filters ul {
  padding: 0;
  margin: 0;
}

.videos-filters ul li {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  color: #1f272b;
  background-color: #fff;
  padding: 10px 18px;
  border-radius: 22px;
  cursor: pointer;
  margin: 0 6px 10px;
  transition: all 0.3s;
}

.videos-filters ul li.active,
.videos-filters ul li:hover {
  background-color: #e59833;
  color: #fff;
}

/* ===============================
   VIDÉOTHÈQUE – GRILLE
   =============================== */

.videos-grid {
  margin-top: 20px;
  justify-content: center;
}

.videos-grid .templatemo-item-col {
  margin-bottom: 30px;
}

.videos-grid > .templatemo-item-col {
  display: flex;
}


/* ===============================
   VIDÉOTHÈQUE – PAGINATION
   =============================== */

.videos-pagination {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 60px;
}

.videos-pagination ul {
  padding: 0;
  margin: 0;
}

.videos-pagination ul li {
  display: inline-block;
  margin: 0 4px;
}

.videos-pagination ul li a {
  width: 40px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #1f272b;
  border-radius: 50%;
  background-color: #f1f1f1;
  transition: all 0.3s;
}

.videos-pagination ul li.active a,
.videos-pagination ul li a:hover {
  background-color: #e59833;
  color: #fff;
}


/* =========================
   VIDEO LIBRARY (Vidéothèque)
   ========================= */

.video-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
  margin-bottom: 20px;
}

.video-thumb {
  position: relative;
}

.video-thumb a.play {
  display: block;
  position: relative;
  cursor: pointer;
}

.video-thumb img,
.article-thumb img  {
  display: block;
  width: 100%;
  height: 220px;            /* Ajuste si besoin */
  object-fit: cover;
  transition: all 0.25s ease;
}

/* Overlay: gris léger + cadre orange + icône play */
.video-overlay-play {
  position: absolute;
  inset: 12px;              /* cadre un peu plus petit que l'image */
  border: 3px solid #e59833;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transform: scale(0.98);
  transition: all 0.25s ease;
}

.video-overlay-play i.fa {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #e59833;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 10px 20px rgba(229,152,51,0.35);
}

/* Hover effect */
.video-thumb a.play:hover img {
  filter: grayscale(35%) brightness(0.70);
}

.video-thumb a.play:hover .video-overlay-play {
  opacity: 1;
  transform: scale(1);
}

.video-content {
  padding: 16px 18px 18px;
}

.video-content h4 {
  font-size: 16px;
  margin: 0 0 8px;
  line-height: 1.35;
}

.video-content p {
  margin: 0;
  font-size: 13px;
  line-height: 22px;
  color: #2a2a2a;
}

/* Responsive: image un peu plus haute sur mobile */
@media (max-width: 991px) {
  .video-thumb img {
    height: 240px;
  }
}

/* ===============================
   POPUP VIDÉO – CENTRÉ PARFAIT
   =============================== */

.video-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.video-popup.open {
  display: block;
}

.video-popup-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
}

.video-popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  background: #000;
  transform: translate(-50%, -50%);
  border-radius: 12px;
  overflow: hidden;
}

.video-popup-content iframe {
  width: 100%;
  height: 100%;
}

.video-popup-close {
  position: absolute;
  top: -40px;
  right: 0;
  font-size: 32px;
  color: #fff;
  cursor: pointer;
}

/* ===============================
   PHOTOTHÈQUE – CARTES
   =============================== */

.photo-thumb {
  position: relative;
}

.photo-thumb img {
  width: 100%;
  height: 220px;            /* même hauteur que vidéos/articles */
  object-fit: cover;
  display: block;
  transition: all 0.25s ease;
}

/* Cadre orange + overlay */
.photo-overlay {
  position: absolute;
  inset: 12px;
  border: 3px solid #e59833;
  border-radius: 10px;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transform: scale(0.98);
  transition: all 0.25s ease;
}

/* Icône loupe */
.photo-zoom {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #e59833;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-zoom i {
  color: #fff;
  font-size: 20px;
}

/* Hover */
.photo-thumb:hover img {
  filter: grayscale(35%) brightness(0.7);
}

.photo-thumb:hover .photo-overlay {
  opacity: 1;
  transform: scale(1);
}


/* ---------- TEXT ----------- */
.project-article-box p{
  font-size:15px;
  line-height:1.9;
  color:#333;
}

.article-subtitle{
  margin-top:25px;
  font-size:20px;
  font-weight:700;
  color:#1f272b;
}

.article-list{
  margin-top:10px;
  margin-bottom:15px;
}

.article-list li{
  margin-bottom:6px;
  color:#222;
}

.article-list.highlight li{
  font-weight:600;
}

.article-end{
  font-weight:600;
  color:#1f272b;
  margin-top:10px;
}

/* ---------- IMAGES ----------- */
.article-image{
  margin:25px 0;
  overflow:hidden;
  border-radius:10px;
}

.article-image img{
  width:100%;
  border-radius:10px;
  transition:0.4s;
}

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

.article-image.centered{
  max-width:600px;
  margin:25px auto;
}

.article-gallery{
  display:flex;
  gap:20px;
  margin:25px 0;
}

.gallery-item{
  flex:1;
  border-radius:10px;
  overflow:hidden;
}

.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:0.4s;
}

.gallery-item img:hover{
  transform:scale(1.05);
}


/* ===============================
   ARTICLES – CARTES
   =============================== */

.article-card {
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
}

.article-thumb {
  position: relative;
}

.article-thumb img {
  transition: all 0.3s ease;
}

/* Overlay */
.article-overlay {
  position: absolute;
  inset: 12px; /* même logique que vidéothèque */
  border: 3px solid #e59833;
  border-radius: 10px;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transform: scale(0.98);
  transition: all 0.3s ease;
}

/* Bouton LIRE */
.article-read {
  background-color: #e59833; /* orange du site */
  color: #fff;
  padding: 12px 28px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
}

/* Hover */
.article-thumb:hover img {
  filter: grayscale(35%) brightness(0.70);
}

.article-thumb:hover .article-overlay {
  opacity: 1;
}

.article-content {
  padding: 20px;
}

.article-content h4 {
  font-size: 16px;
  margin: 0 0 8px;
  line-height: 1.35;
}

.article-content p {
  margin: 0;
  font-size: 13px;
  line-height: 22px;
  color: #2a2a2a;
}


/* -------- LISTES ARTICLE PROJET -------- */


.project-article-box .article-list{
  margin-left: 25px;        /* retrait global */
  padding-left: 0;
}

.project-article-box .article-list li{
  list-style: none;         /* on enlève les puces */
  position: relative;
  margin-bottom: 8px;
  padding-left: 18px;       /* espace entre trait et texte */
  line-height: 1.7;
  color:#222;
}

/* petit trait avant chaque ligne */
.project-article-box .article-list li::before{
  content:"";
  position: absolute;
  left:0;
  top:10px;
  width: 10px;
  height: 2px;
  background:#e59833;       /* même couleur que ta charte */
  border-radius: 2px;
}

/* ---------- BUTTON ----------- */
.brochure-btn{
  text-align:center;
  margin-top:40px;
}

/* ---------- RESPONSIVE ----------- */
@media(max-width:768px){
  .project-article-box{
    padding:25px;
  }
  .article-title{
    font-size:22px;
  }
  .article-gallery{
    flex-direction:column;
  }
}

/* Responsive */
@media(max-width: 768px){
  .newsletter-banner-section {
    padding-top: 160px;
    padding-bottom: 90px;
  }
  .newsletter-btn{
    margin-top:10px;
  }
}

/* Espacement spécifique au bouton brochure de la page Projet */
.project-article-box + .brochure-btn {
  margin-top: 40px;
  margin-bottom: 80px;
}

/* ==================================================
   ARTICLE 1 - LAYOUT SPECIFIQUE
   Ces styles ne s'appliquent qu'à article1.html
   ================================================== */

.article1-page .article1-layout {
  align-items: flex-start;
  row-gap: 30px;
}

.article1-page .article1-main-box {
  margin-bottom: 0;
}

.article1-page .article1-sidebar {
  position: sticky;
  top: 110px;
}

.article1-page .article1-sidebar-box {
  background: #e59833;
  border-radius: 10px;
  padding: 30px 28px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  border-right: 6px solid #fff;
}

.article1-page .article1-sidebar-box h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 18px;
}

.article1-page .article1-sidebar-box ul {
  padding: 0;
  margin: 0;
}

.article1-page .article1-sidebar-box ul li {
  list-style: none;
  border-bottom: 1px solid #eee;
  padding: 14px 0;
}

.article1-page .article1-sidebar-box ul li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.article1-page .article1-sidebar-box ul li:first-child {
  padding-top: 0;
}

.article1-page .article1-sidebar-box a {
  color: #1f272b !important;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
  transition: all 0.3s ease;
}

.article1-page .article1-sidebar-box a:hover {
  color: #fff !important;
  padding-left: 6px;
}

@media (max-width: 991px) {
  .article1-page .article1-sidebar {
    position: static;
    top: auto;
  }

  .article1-page .article1-sidebar-box {
    margin-top: 10px;
  }
}

.article1-page .article-source-note {
  margin: 6px 0 20px 0;
  color: #777;
  font-size: 13px;
  line-height: 1.6;
}

.article1-page .article-source-note strong {
  color: #444;
  font-weight: 600;
}

.article1-page .article-source-note a {
  color: #b86f17;
  text-decoration: none;
}

.article1-page .article-source-note a:hover {
  text-decoration: underline;
}

/* ==================================================
   VIDÉOTHÈQUE – CORRECTION DÉFINITIVE DU CENTRAGE
   ================================================== */

/* 1. La row devient un conteneur flex centré */
.videos-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
}

/* 2. On neutralise la largeur héritée du template */
.videos-grid .templatemo-item-col {
  width: calc(33.333% - 30px); /* 3 colonnes réelles */
  margin-left: 15px;
  margin-right: 15px;
}

/* 3. Tablette */
@media (max-width: 992px) {
  .videos-grid .templatemo-item-col {
    width: calc(50% - 30px);
  }
}

/* 4. Mobile */
@media (max-width: 767px) {
  .videos-grid .templatemo-item-col {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}



p {
  text-align: justify;
}

/* Publications officielles - état en construction */
.construction-box {
  background: #fff;
  border-radius: 20px;
  padding: 60px 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  margin: 40px 0 80px 0;
}

.construction-icon {
  width: 90px;
  height: 90px;
  margin: 0 auto 20px auto;
  border-radius: 50%;
  background: rgba(229, 152, 51, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.construction-icon i {
  font-size: 40px;
  color: #e59833;
}

.construction-box h3 {
  font-size: 28px;
  font-weight: 700;
  color: #1f272b;
  margin-bottom: 15px;
}

.construction-box p {
  font-size: 16px;
  line-height: 28px;
  color: #4a4a4a;
  margin-bottom: 0;
  text-align: center;
}

@media (max-width: 767px) {
  .construction-box {
    padding: 40px 20px;
    margin: 30px 0 60px 0;
  }

  .construction-box h3 {
    font-size: 24px;
  }

  .construction-box p {
    font-size: 15px;
    line-height: 26px;
  }
}

/* =========================================================
   RESPONSIVE QUICK FIXES - SAUVONS SAÏSS
   ========================================================= */

/* Sécurité globale */
html, body {
  overflow-x: hidden;
}

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

/* Évite que certaines images/cartes débordent */
.article-card,
.photo-card,
.video-card,
.meeting-single-item,
.construction-box {
  overflow: hidden;
}

/* Texte trop long dans cartes */
.article-content h4,
.meeting-single-item h4,
.construction-box h3 {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Tablettes et petits laptops */
@media (max-width: 1199px) {
  .header-area .main-nav .nav li {
    padding-left: 10px;
    padding-right: 10px;
  }

  .header-area .main-nav .nav li a {
    font-size: 13px;
    letter-spacing: 0.5px;
  }

  .ministry-bar img {
    max-width: 360px;
  }
}

/* Mobile / tablette */
@media (max-width: 991px) {

  /* Header */
  .header-area {
    top: auto !important;
  }

  .header-area .main-nav .logo {
    line-height: 80px;
  }

  #siteLogo {
    width: 120px !important;
    height: auto !important;
  }

  .background-header .main-nav .logo {
    line-height: 70px;
  }

  /* Barres du haut */
  .sub-header .left-content,
  .sub-header .right-icons {
    text-align: center !important;
  }

  .sub-header .right-icons {
    padding-top: 0;
  }

  .sub-header .right-icons ul li {
    margin: 0 8px;
  }

  .ministry-bar {
    padding: 8px 0;
  }

  .ministry-bar img {
    max-width: 280px;
  }

  .sponsor-bar {
    padding: 4px 0;
  }

  /* Bannière */
  .heading-page {
    padding-top: 180px !important;
    padding-bottom: 70px !important;
  }

  .heading-page h1,
  .heading-page h2 {
    font-size: 28px !important;
    line-height: 1.3;
    padding: 0 10px;
  }

  .heading-page h6 {
    font-size: 14px !important;
    line-height: 1.7;
    padding: 0 10px;
  }

  /* Sous-menus */
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    min-width: 100%;
    width: 100%;
  }

  .header-area .main-nav .nav li.has-sub ul.sub-menu li a {
    white-space: normal;
    height: auto;
    line-height: 1.5;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Filtres articles / photos / docs / vidéos */
  .videos-filters ul,
  .articles-filters ul,
  .photos-filters ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .videos-filters ul li,
  .articles-filters ul li,
  .photos-filters ul li {
    margin: 0 !important;
    white-space: normal;
    text-align: center;
  }

  /* Cartes */
  .article-card,
  .photo-card,
  .video-card {
    margin-bottom: 30px;
  }

  .article-thumb img,
  .photo-thumb img {
    width: 100%;
    display: block;
  }

  /* Contenu texte */
  .meeting-single-item {
    padding: 20px 15px;
  }

  .meeting-single-item ul {
    padding-left: 16px;
  }

  .meeting-single-item ul li,
  .meeting-single-item p {
    text-align: left !important;
  }

  /* Bloc construction */
  .construction-box {
    padding: 40px 20px;
    margin: 30px 0 60px 0;
  }
}

/* Smartphones */
@media (max-width: 767px) {

  .sub-header {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .sub-header .row > div {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  .sub-header .left-content {
    margin-bottom: 6px;
  }

  .ministry-bar img {
    max-width: 220px;
  }

  #siteLogo {
    width: 105px !important;
  }

  .heading-page {
    padding-top: 165px !important;
    padding-bottom: 55px !important;
  }

  .heading-page h1,
  .heading-page h2 {
    font-size: 24px !important;
  }

  .heading-page h6 {
    font-size: 13px !important;
    line-height: 1.6;
  }

  .construction-icon {
    width: 75px;
    height: 75px;
  }

  .construction-icon i {
    font-size: 32px;
  }

  .construction-box h3 {
    font-size: 22px;
  }

  .construction-box p {
    font-size: 15px;
    line-height: 1.8;
  }
}

/* Très petits écrans */
@media (max-width: 480px) {
  .heading-page h1,
  .heading-page h2 {
    font-size: 21px !important;
  }

  .heading-page h6 {
    font-size: 12px !important;
  }

  .ministry-bar img {
    max-width: 190px;
  }

  .sub-header .dropdown .btn.dropdown-toggle {
    padding: 3px 5px;
  }
}
/* =========================================
   CORRECTIFS RESPONSIVE 
   ========================================= */

@media (max-width: 991px) {

  /* 1) Garder langue à gauche et réseaux à droite sur la même ligne */
  .sub-header .left-content {
    text-align: left !important;
    margin-bottom: 0 !important;
  }

  .sub-header .right-icons {
    text-align: right !important;
    padding-top: 8px !important;
  }

  .sub-header .right-icons ul li {
    margin-left: 15px !important;
    margin-right: 0 !important;
  }

  /* on annule le full width forcé */
  .sub-header .row > div {
    width: auto !important;
    max-width: none !important;
    flex: initial !important;
  }

  /* 2) Header avant scroll : transparent comme desktop */
  .header-area {
    top: 135px !important;
    background-color: rgba(250, 250, 250, 0.15) !important;
    position: absolute !important;
    left: 0;
    right: 0;
    z-index: 100;
  }

  

  /* 3) Header après scroll : collé en haut */
  .background-header {
    top: 0 !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background-color: #fff !important;
  }

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

  .ministry-bar img {
    max-width: 300px;
  }

}

@media (max-width: 767px) {

  /* Conserver la ligne gauche/droite même sur smartphone */
  .sub-header .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  .sub-header .row > .col-lg-8,
  .sub-header .row > .col-sm-8 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }

  .sub-header .row > .col-lg-4,
  .sub-header .row > .col-sm-4 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }

  .sub-header .left-content {
    margin-bottom: 0 !important;
  }

  .sub-header .right-icons {
    padding: 8px 0 !important;
  }

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

/* Ajustement bannière + services (mobile uniquement) */

@media (max-width: 991px) {

  /* 1. Remonter le contenu de la bannière */
  .video-overlay.header-text {
    padding-top: 100px !important; /* réduit l'espace en haut */
    padding-bottom: 100px !important;
    margin-top: -120px !important;
  }

  /* 2. Remonter la section services */
  .services {
    margin-top: -120px !important;
  }

}

/* Burger menu blanc avant sticky (responsive uniquement) */
@media (max-width: 991px) {
  .header-area.header-sticky:not(.background-header) .menu-trigger span,
  .header-area.header-sticky:not(.background-header) .menu-trigger span:before,
  .header-area.header-sticky:not(.background-header) .menu-trigger span:after {
    background-color: #ffffff !important;
  }
}