/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

@charset "UTF-8";

body {
  //font-family: 'Montserrat', sans-serif;
  color: #444444;
}



h2
  {
  font: normal normal 300 40px / 50px "Rubik", Helvetica, Arial, Verdana, sans-serif;
  font-weight:300;
  }
  


/*--------------------------------------------------------------
# Top Bar
--------------------------------------------------------------*/
#topbar 
    {
    background: #fff;
    height: 40px;
    font-size: 14px;
    transition: all 0.5s;
    z-index: 996;
    padding:0;
    line-height:40px;
    text-align:center;
    border-bottom:1px solid #ededed;
    margin-bottom:120px;
    }
    
#topbar a
    {
    font: 13px / 19px "Tahoma", Helvetica, Arial, Verdana, sans-serif;
    text-transform: none;
    color: #242e35;
    }

#topbar.topbar-scrolled 
    {
    top: -40px;
    }
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header 
    { 
    background: #fff;
    transition: all 0.5s;
    z-index: 997;
    min-height: 140px;    
    top: 40px;
    padding-left:50px;
    padding-right:50px;
    }
    
    
#header .logo img 
    {
    height: 130px;
    /*transition: height 0.5s ease, margin-top 0.5s ease;*/
    /*transition: opacity 0.3s ease;*/
    /*transition: opacity 0.5s ease-in-out;*/
    transition: height 0.5s ease-in-out, opacity 0.5s ease-in-out, margin-top 0.5s ease-in-out;
    position: absolute;
    top: 0;
    left: 50px;
    }
    
#header.header-scrolled 
    {
    top: 0;
    height:100px;
    background: #f9f9f9 url(/content/images/site/halftone-dark.png) repeat center center;
    background-size: cover;
    border-bottom: 1px solid #ededed;
    }
    

    
.logo-middle {
  opacity: 0;
  z-index: 2;
}

.logo-normal {
  opacity: 1;
  z-index: 1;
}
#header.header-scrolled .logo-normal {
  opacity: 0;
}

#header.header-scrolled .logo-middle {
  opacity: 1;
}
    
    
#header.header-scrolled .logo img 
    {
    height: 100px;
    margin-top:20px;   
    }
    
#header .menu
    {
    padding-top:50px;
    }
    
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
  padding: 0;
  font-weight:400;
  letter-spacing:1px;
}
.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
  
  /*
    align-items: stretch;
    -ms-align-content: stretch;
    align-content: stretch;  */
}

.navbar >ul 
    {    
    align-items: stretch;
    -ms-align-content: stretch;
    align-content: stretch;   
    height:100px;
    }
    
.navbar li {
  position: relative;
}
.navbar > ul > li {
  position: relative;
  white-space: nowrap;
  padding: 8px 0 8px 40px;
}
.navbar a, .navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #525c64;
  white-space: nowrap;
  transition: 0.3s;
  border-bottom: 2px solid #fff;
  padding: 5px 2px;
  border-color: transparent;
}


.navbar a i, .navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}

.navbar a{
  font: normal 18px / 22px "Roboto", Helvetica, Arial, Verdana, sans-serif;
  text-transform: none;
  text-decoration:none;
}
.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
  color: #ec1c24;
  border-color: #ac451f;
  font: normal 18px / 22px "Roboto", Helvetica, Arial, Verdana, sans-serif;
  text-transform: none;
}
.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 20px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
  
}
.navbar .dropdown ul li {
  min-width: 200px;
}
.navbar .dropdown ul a {
  padding: 10px 20px;
  /* font-size: 14px;
  font-weight: 500; */
  color: #082744;
  border: none;
  font: normal 16px / 20px "Roboto", Helvetica, Arial, Verdana, sans-serif;
  text-transform: none;
}
.navbar .dropdown ul a i {
  font-size: 12px;
}
.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
  color: #ac451f;
}
.navbar .dropdown:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}
.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}
.navbar .dropdown .dropdown:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}

.navbar .socialfcb{
	border:none;
}

.navbar a.socialfcb i{
	font-size:18px;
}
@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }
  .navbar .dropdown .dropdown:hover > ul {
    left: -100%;
  }
}

/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
  color: #2c4964;
  font-size: 24px;
  cursor: pointer;
  display: none !important;
  line-height: 0;
  transition: 0.5s;
  position:absolute;
  right:30px;
  top:15px;
}
.mobile-nav-toggle.bi-x {
  color: #fff;
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block !important;
  }

  .navbar ul {
    display: none;
  }
}
.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(28, 47, 65, 0.9);
  transition: 0.3s;
  z-index: 999;
}
.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}
.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  background-color: #fff;
  overflow-y: auto;
  transition: 0.3s;
}
.navbar-mobile > ul > li {
  padding: 0;
}
.navbar-mobile a, .navbar-mobile a:focus {
  padding: 10px 20px;
  font-size: 15px;
  color: #2c4964;
  border: none;
}
.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
  color: #ac451f;
}
.navbar-mobile .getstarted, .navbar-mobile .getstarted:focus {
  margin: 15px;
}
.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}
.navbar-mobile .dropdown ul li {
  min-width: 200px;
}
.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}
.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}
.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {
  color: #ac451f;
}
.navbar-mobile .dropdown > .dropdown-active {
  display: block;
}

/*--------------------------------------------------------------
# Slider et carousel
--------------------------------------------------------------*/
#album_carousel .carousel-inner {
  height: 650px; /* hauteur fixe définie */
  overflow: hidden;
}

#album_carousel .carousel-item {
  height: 100%;
}

#album_carousel .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
    
/* slider */    

#aga_slider 
    {
    position: relative; /* essentiel pour le positionnement absolu des boutons */
    }
    
#hero div.container_slider
    {
    padding:0 !important;
    height:700px;
    margin-bottom:20px;
    }
    
#hero .carousel-item {
  position: relative;
  height: auto;
}
  
#hero div.carousel-item img
    {
    width: 100%;
    height: auto;
    max-height: 700px;
    object-fit: cover;
    display: block;
    }
 
#hero .mask-overlay 
    {
    background: rgba(0, 0, 0, 0.5); /* masque noir semi-transparent */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none; /* n'empêche pas les clics sur les boutons dessous */
    }

#hero .carousel-caption 
    {
    position: relative;
    z-index: 2; /* Au-dessus du masque */
    }
    
#hero .carousel-caption.caption 
    {
    position: absolute;
    top: 30%; /* ou ajuste selon tes besoins */
    left: 5%;
    right: auto;
    text-align: left;
    bottom: 20%; /* ajuste verticalement */
    max-width: 90%; /* limite la largeur */
    }
    
#hero .carousel-caption.caption h1
    {
    font-family: Roboto;
    font-weight: 700;
    font-size: 70px;
    text-transform:uppercase;
    }
    
#hero .carousel-caption.caption p
    {
    font-family: "Open Sans";
    font-weight: 400;
    font-size: 30px;
    }
    
#hero .fade-down {
  opacity: 0;
  transform: translateY(-30px);
  animation: fadeInDown 1s ease-out forwards;
  animation-delay: 0.3s;
}

#hero .fade-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease-out forwards;
  animation-delay: 0.6s;
}

@keyframes fadeInDown {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#hero .caption-bar {
  height: 5px;
  width: 0;
  background-color: red;
  margin-top: 70px;   /* Plus d'espace au-dessus */
  margin-bottom: 20px; /* Espace entre la barre et le <p> */
  animation: growBar 1s ease-out forwards;
  animation-delay: 0.8s;
}

@keyframes growBar {
  from {
    width: 0;
  }
  to {
    width: 130px;
  }
}

.carousel-controls-custom {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  gap: 10px;
  z-index: 1050; /* au-dessus du carousel */
}

.btn-carousel {
  background: rgba(0, 0, 0, 0.5);
  border: none;
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}

.btn-carousel:hover {
  background: rgba(0, 0, 0, 0.8);
}

.btn-carousel svg {
  width: 32px;
  height: 32px;
  fill: white;
  pointer-events: none; /* pour ne pas gêner le clic sur le bouton */
}

/*--------------------------------------------------------------
# masonry
--------------------------------------------------------------*/

.grid {
  margin: 0 auto;
}
.grid-sizer, .grid-item {
  width: 33.333%;
}
.grid-item {
  float: left;
}

/*--------------------------------------------------------------
# content
--------------------------------------------------------------*/

.content h2
    {
    font-size: 26px;
    line-height: 36px;
    }
    
.content h2::after 
    {
    content: "";
    display: block;
    width: 80px;
    height: 3px;
    background-color: red;
    margin-top: 8px;
    margin-bottom: 20px;
    }
    
h2.content
    {
    font-size: 26px;
    line-height: 36px;
    }
    
/*--------------------------------------------------------------
# cookies consent
--------------------------------------------------------------*/    
#cb-cookie-banner { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 999; border-radius: 0; display: none; }

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background-color: rgba(0, 0, 0, .2);
  width: 40px;
  height: 40px;
  transition: all 0.4s;
  border:none;
}
.back-to-top svg {
  font-size: 28px;
  color: #fff;
  line-height: 0;
}
.back-to-top:hover {
  background-color: rgba(0, 0, 0, .5);
  color: #fff;
}
.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #1977cc;
  border-top-color: #d1e6f9;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Media sociaux
--------------------------------------------------------------*/

.social-icons .icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background-color: #eee;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  transition: transform 0.3s ease, color 0.3s ease;
}

.social-icons .icon svg
    {
    color:#fff;
    }
    
.social-icons .icon svg:hover
    {
    color:#e52323;
    transition: color 0.8s ease; /* Durée et courbe de transition */
    }

.social-icons .icon:hover {
  color: red;
  transform: scale(1.4);
}

/*--------------------------------------------------------------
# listes
--------------------------------------------------------------*/

ul.aga {
  list-style: none;
  padding-left: 0;
}

ul.aga li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
}

ul.aga li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  
  width: 20px;        /* diamètre du rond */
  height: 20px;
  background-color: red;
  border-radius: 50%; /* rond */
  display: flex;
  align-items: center;
  justify-content: center;
}

ul.aga li::after {
  content: "";
  position: absolute;
  left: 6px;          /* position du carré à l'intérieur du rond */
  top: 50%;
  transform: translateY(-50%);
  width: 8px;         /* taille du carré */
  height: 8px;
  background-color: white;
  box-sizing: border-box;
}

/*--------------------------------------------------------------
# shortcode album brique
--------------------------------------------------------------*/

.masonry-item {
  overflow: hidden;
  position: relative;
}

.masonry-item img {
  width: 100%;
  display: block;
  transition: transform 0.5s ease;
  object-fit: cover;
}

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

.overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(220, 53, 69, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.icon-plus {
  font-size: 2rem;
  color: white;
}

.masonry-item:hover .overlay {
  opacity: 1;
}


/*--------------------------------------------------------------
# shortcode album
--------------------------------------------------------------*/

/* Grille personnalisée : 9 colonnes */
@media (min-width: 768px) {
  .col-md-1-3 {
    flex: 0 0 auto;
    width: 11.11%;
  }
}

/* Conteneur carré */
.photo-wrapper {
  position: relative;
  width: 100%;
  padding-top: 100%; /* hauteur = largeur → carré */
  overflow: hidden;
  cursor: pointer;
}

/* Image en plein cadre, centrée et recadrée */
.photo-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* Effet zoom au survol */
.photo-wrapper:hover img {
  transform: scale(1.1);
}

/* Overlay rouge translucide */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 0, 0, 0.4); /* rouge translucide */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* pour ne pas gêner le clic sur le bouton */
}

/* Affichage overlay au survol */
.photo-wrapper:hover .overlay {
  opacity: 1;
}

/* Icône plus au centre */
.icon-plus {
  font-size: 2rem;
  color: white;
}


/*--------------------------------------------------------------
# widget album
--------------------------------------------------------------*/

.galerie-popup {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0;
  margin: 0;
}

.galerie-popup .galerie-item {
  width: calc((100% - 8px) / 5); /* 4 gaps de 2px = 8px total */
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
}

.galerie-popup .galerie-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    padding: 0;
    transition: transform 0.3s ease-in-out;
}

/* Overlay rouge au survol */
.galerie-popup .galerie-item::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 1;
    pointer-events: none;
}

.galerie-popup .galerie-item:hover::before {
    opacity: 1;
}

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

/*--------------------------------------------------------------
# Boutons 
--------------------------------------------------------------*/
.btn
    {
    font: normal normal 500 14px / 16px "Roboto", Helvetica, Arial, Verdana, sans-serif
    }
    
.btn-contact 
    {
    background-color: #e52323;       /* Rouge vif */
    color: white;
    border: 2px solid white;
    padding: 8px 16px;               /* Hauteur réduite */
    text-align: center;
    display: inline-block;
    border-radius: 0;                /* Coins carrés */
    transition: background-color 0.3s ease, color 0.3s ease;  
    }

.btn-contact:hover {
  background-color: #c51f1f;
  color: white;
}

.btn-rounded
    {
    border-radius:20px;
    }
    
.custom-dual-btn {
  border: 3px solid #e52421;
  border-radius: 50px;
  overflow: hidden;
  max-width: 700px;
  margin: auto;
}

.custom-dual-btn span
    {
    margin-left:5px;
    }

.btn-section {
  flex: 1;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: #e52421;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-section:hover {
  background-color: #e52421;
  color: white;
}

.btn-divider {
  
  width: 48px;
  height: 48px;
 
}


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

#footer
    {
    border-top: 1px solid rgba(47, 47, 49, 0.96);
    background: #20262a none no-repeat right bottom;
    color:#fff;
    padding-bottom:20px;
    }
    
#footer .footer-bloc
    {
    margin-top:50px;
    padding: 0 25px;
    }
    
#footer .footer-bloc h4
    {
    font: normal normal 700 16px / 28px "Rubik", Helvetica, Arial, Verdana, sans-serif;
    }
    
#footer .footer-bloc p
    {
    normal normal normal 14px / 26px "Open Sans", Helvetica, Arial, Verdana, sans-serif;
    color: #8f9294;
    }
    
#footer .footer-bottom
    {
    color:#fff;
    font-size:12px;
    height:50px;
    line-height:50px;
    }
    
#footer .footer-bottom a
    {
    color:#fff;
    }
    
    
#footer .copyright
    {
    padding-left:20px;    
    }
    
/*--------------------------------------------------------------
# presentation 
--------------------------------------------------------------*/

.presentation h2
    {
    font-size: 26px;
    line-height: 36px;
    height:72px;
    }
    
.presentation  p
    {
    text-align: justify !important;
    --bs-text-opacity: 1;
    color: #6c757d !important;
    }
    
.presentation-3 .item
    {
    position:relative;
    }        
    
.presentation-3 .item .icon-inner
    {
    position:absolute;
    color:#e50914;
    }  
    
.presentation-3 .item .dt-text-title
    {
    display:inline-block;
    margin-left:40px;
    }        
    
.presentation-3 .item .dt-text-desc
    {
    display:inline-block;
    margin-left:40px;
    }        
    
    
/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs 
    {
    padding: 60px 0;
    background: #f9f9f9 url(/content/images/site/halftone-dark.png) repeat center center;
    background-repeat: repeat;
    background-position: center center;
    background-size: cover;
    border-bottom: 1px solid #777777;
    }
    
.breadcrumbs h1
  {
  font: normal 40px / 50px "Roboto", Helvetica, Arial, Verdana, sans-serif;
  color: #242e35;
  text-transform: none;
  }

@media (max-width: 992px) {
  .breadcrumbs {
    margin-top: 100px;
  }
}
.breadcrumbs h2 {
  font-size: 24px;
  font-weight: 300;
  margin: 0;
}
@media (max-width: 992px) {
  .breadcrumbs h2 {
    margin: 0 0 10px 0;
  }
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}
.breadcrumbs ol li + li {
  padding-left: 10px;
}
.breadcrumbs ol li + li::before {
  display: inline-block;
  padding-right: 10px;
  color: #6c757d;
  content: "/";
}
@media (max-width: 768px) {
  .breadcrumbs .d-flex {
    display: block !important;
  }
  .breadcrumbs ol {
    display: block;
  }
  .breadcrumbs ol li {
    display: inline-block;
  }
}


/*--------------------------------------------------------------
# Breadcrumbs photo
--------------------------------------------------------------*/

.breadcrumbs_photo {
  position: relative;
  padding: 100px 0;
  background-repeat: repeat;
  background-position: top center;
  background-size: cover;
  border-bottom: 1px solid #777777;
  overflow: hidden;
}

.breadcrumbs_photo::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* ✅ overlay noir semi-transparent */
  z-index: 1;
  pointer-events: none;
}

/* Pour que le texte soit AU-DESSUS de l'overlay */
.breadcrumbs_photo .container {
  position: relative;
  z-index: 2;
}
    
.breadcrumbs_photo h1
  {
  font: normal 40px / 50px "Roboto", Helvetica, Arial, Verdana, sans-serif;
  color: #fff;
  text-transform: none;
  }
  
@media (max-width: 992px) {
  .breadcrumbs_photo {
    margin-top: 100px;
  }
}
.breadcrumbs_photo h2 {
  font-size: 24px;
  font-weight: 300;
  margin: 0;
}
@media (max-width: 992px) {
  .breadcrumbs_photo h2 {
    margin: 0 0 10px 0;
  }
}
.breadcrumbs_photo ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}
.breadcrumbs_photo ol li + li,.breadcrumbs_photo ol li + li a {
  padding-left: 10px;
  color:#fff;
}
.breadcrumbs_photo ol li + li::before {
  display: inline-block;
  padding-right: 10px;
  color: #fff;
  content: "/";
}

.breadcrumbs_photo ol li a {  
  color:#fff;
}
@media (max-width: 768px) {
  .breadcrumbs_photo .d-flex {
    display: block !important;
  }
  .breadcrumbs_photo ol {
    display: block;
  }
  .breadcrumbs_photo ol li {
    display: inline-block;
  }
}


/*--------------------------------------------------------------
# Separator
--------------------------------------------------------------*/
.separator
    {
    position:relative;
    }
    
.separator img
    {
    position:absolute;
    top:-7px;
    left:50%;
    margin-left:-118px;
    margin-top:-10px;
    }
    
.separator svg
    {
    color: #e50914;
    margin-right:5px;
    margin-top:-4px;
    }
    
.separator span.w100
    {
    position:absolute;
    top:-3px;
    left:0;
    width:100%;
    }
    
.separator span span
    {
    background:#fff;
    font-size:22px;
    }
    
.separator hr
    {
    background: #ccc;
    height:1px;
    }

/*--------------------------------------------------------------
# Formulaire
--------------------------------------------------------------*/

textarea ,input
    {
    border-color: #777771 !important;
    background-color: #EDEDED !important;
    color: #000000 !important;
    border-radius:2px !important;
    margin-bottom:40px;
    }
    
input[type="checkbox"] 
    {
    width: 20px;
    height: 20px;
    border-color: #17A8E3;
    background-color: #EDEDED !important;
    border-radius:0;
    margin-bottom:10px; 
    }
    
/*--------------------------------------------------------------
# Divers
--------------------------------------------------------------*/

.bg-light
    {
    background: rgb(239, 239, 239) !important;
    }
    
.red-underline {
  width: 120px;
  height: 4px;
  background-color: #e50914; /* rouge vif */
}

.custom-img {
  height: 200px; /* ou une autre valeur fixe selon ton design */
  width: 100%;   /* s'étire horizontalement */
  object-fit: cover;
  border-radius: 4px; /* facultatif, arrondir les bords */
}

h5.titre-fixe {
  height: 3em;            /* Hauteur fixe en fonction de la taille de police */
  overflow: hidden;       /* Cache ce qui dépasse */
  display: block;         /* S'assurer que le bloc se comporte correctement */
  line-height: 1.5em;     /* Hauteur d'une ligne */
}

.limiter-4lignes {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5em;
  max-height: 6em; /* 4 * 1.5em = 6em */
}

.text-justified {
  text-align: justify !important;
}

.icon-box {
  width: 70px;
  height: 70px;
  background-color: #e73935;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  flex-shrink: 0;
}

.title {
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.25rem; /* un peu d’espace sous le titre */
}

.red-bar {
  width: 20px;
  height: 3px;
  background-color: #e73935;
  margin: 0 auto 12px;
}

.rounded-10px
    {
    border-radius:10px;
    }
    
.rounded-15px
    {
    border-radius:15px;
    }
    
.rounded-20px
    {
    border-radius:20px;
    }
    
.rounded-25px
    {
    border-radius:25px;
    }
    
.h-30px
    {
    height:30px;
    }
    
.h-50px
    {
    height:50px;
    }