html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    background-color: azure;
}

#main {
    flex: 1;
    background: 
        linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
        url('../images/images_homepage/201407_0040_ExpeBazinGatineau-1218_0.jpg');
    background-size: cover;
    background-position: center; 
    background-repeat: no-repeat; 
}

.container {
    padding-bottom: 20px;
}

h1 {
    margin-top:40px;
    text-align: center;
    font-size:3rem;
    color:white;
}

h3 {
    margin-top:15px;
    font-size: 1.75rem;
    color: white;
}

ul.no-bullets {
    list-style-type: none;
    padding-left: 0;
}

.page_accueil, 
.apropos {
    text-align: center;
    font-size:1.75rem;
    color:white;
    min-height: 300px;
    
}

.apropos {
    text-align: center;
    color: white;
}

.formulaire_contact {
    color: white;
}

#footer {
    padding: 10px;
    text-align: center;
    background-color: #333;
    color: white;
    font-size: 0.95rem;
}

.video-wrapper iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16/9;
    display: block;
}

/* Base tab items */
.nav-tabs .nav-item {
  background-color: #f8f9fa; /* light gray */
  border-radius: 0.5rem 0.5rem 0 0; /* rounded top like tabs */
  margin: 2px;
}

/* Active tab */
.nav-tabs .nav-item .nav-link.active {
  background-color: #198754; /* Bootstrap green */
  color: #fff;               /* white text */
  border-color: #198754 #198754 #fff; /* keeps underline aligned */
}

/* Make inactive tabs look clickable */
.nav-tabs .nav-item .nav-link {
  color: #495057; /* dark gray text */
}


/* ==========================
   PageFlexible Scoped CSS
   ========================== */
.page_flexible {
    width: 100%;
    color:white;
    font-size:1rem;
}

.page_flexible .bloc-wrapper {
    margin-bottom: 2rem;
}

.page_flexible section {
    min-height: 300px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    width:100%
}

.page_flexible .bloc-wrapper.left { text-align: left; }
.page_flexible .bloc-wrapper.center { text-align: center; }
.page_flexible .bloc-wrapper.right { text-align: right; }

.page_flexible .bloc-wrapper > * { margin-bottom: 1rem; }

.page_flexible .columns {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 2rem;
}

.page_flexible .column {
    box-sizing: border-box;
}

.page_flexible .column-1-1 { width: 100%; }
.page_flexible .column-1-2 { width: 50%; }
.page_flexible .column-1-3 { width: 33.333%; }
.page_flexible .column-2-3 { width: 66.666%; }

@media (max-width: 768px) {
    .page_flexible .columns {
        flex-direction: column;
        gap: 1rem;
    }
    .page_flexible .column-1-2,
    .page_flexible .column-1-3,
    .page_flexible .column-2-3 {
        width: 100%;
    }
}

.page_flexible .richtext { line-height: 1.6; font-size: 1rem; color: #333; }
.page_flexible .richtext h1,
.page_flexible .richtext h2,
.page_flexible .richtext h3,
.page_flexible .richtext h4,
.page_flexible .richtext h5,
.page_flexible .richtext h6 { margin-top: 1.5rem; margin-bottom: 0.5rem; }
.page_flexible .richtext p { margin-bottom: 1rem; }

.page_flexible > img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.page_flexible .block-quote {
    border-left: 4px solid #007BFF;
    padding-left: 1rem;
    font-style: italic;
    color: #555;
    margin: 1rem 0;
}

.bloc_wrapper_left {
    text-align: left;
}

.bloc_wrapper_center {
    text-align: center;
}

.bloc_wrapper_right {
    text-align: right;
}

.bloc_wrapper_item {
    margin-bottom: 1.5rem; /* spacing between inner blocks */
}

/* Scoped image alignment inside bloc_wrapper */
.bloc_wrapper_left img {
    margin: 0; /* left align */
}

.bloc_wrapper_center img {
    margin: 0 auto; /* center align */
}

.bloc_wrapper_right img {
    margin-left: auto; 
    margin-right: 0; /* right align */
}

/* Ensure images inside bloc_wrapper still respect max-width & height */
.bloc_wrapper_left img,
.bloc_wrapper_center img,
.bloc_wrapper_right img {
    max-width: 100%;
    height: auto;
    display: block;
}

.call_to_action {
    background-color: lime;
    width:85%;
    margin: auto;
    border: 4px dashed black;
}

.call_to_action .spicy-text {
  color: #FFF; 
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  letter-spacing: 1px; 
  text-transform: uppercase; 

  background: linear-gradient(90deg, #FFF, #666, #FFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);

  animation: shimmer 2s infinite linear;
}

@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: 200px 0;
  }
}

.bloc_separateur {
    height: 4px;
    background-color: #FFF;
    border: none;
    margin: 2rem 0;
}

.carousel {
  max-width: 900px;      /* limit width */
  margin: 0 auto;        /* center carousel */
}

.carousel-inner {
  height: 400px;         /* fixed height */
}

.carousel-item img {
  height: 100%;
  width: 100%;
  object-fit: cover;     /* fill area, crop if needed */
}

.carousel-item {
  transition: transform 1.2s ease-in-out; /* 1.2 seconds for slide */
}