/* Transparent navbar */
.navbar {
    background-color: transparent !important;
}

/* Default toggler styles (for dark backgrounds) */
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.8); /* White border */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dark toggler styles (for light backgrounds) */
.navbar-toggler-dark {
    border-color: rgba(44, 62, 80, 0.8); /* Dark border */
}

.navbar-toggler-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(44, 62, 80, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Make offcanvas fit content */
.offcanvas {
    width: auto !important; /* Override default width */
    min-width: 200px; /* Minimum width */
    max-width: 300px; /* Maximum width */
    background-color: #2c3e50; /* Dark background for offcanvas */
}

/* Fix syntax error: Remove stray "*/" in .offcanvas */
.offcanvas-header {
    background-color: #34495e; /* Slightly lighter header */
    color: #ffffff; /* White text */
}

.offcanvas-body {
    padding: 1rem; /* Adjust padding for a snug fit */
}

.nav-link {
    padding: 0.5rem 1rem; /* Adjust padding for menu items */
    color: #ffffff !important; /* White text for menu items */
}

.nav-link:hover {
    background-color: #f39c12; /* Orange hover effect */
    color: #ffffff !important;
}

/* Body styling */
body {
    font-family: 'Josefin Sans', sans-serif; /* Apply Josefin Sans globally */
    margin: 0; /* Remove default margin */
}

/* Section styling */
.section {
    padding: 20px 70px; /* Consolidated padding */
    min-height: 100vh; /* Full viewport height for each section */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: justify;
}

/* Section image styling */
.section img {
    max-width: 100%;
}

/* Flex item styling for images in sections */
.section .flex-item {
    flex: 0 0 32%; /* Roughly 3 images per row */
    max-width: 32%;
    text-align: center; /* Center images within flex-item */
}

/* Responsive adjustments for flex items */
@media (max-width: 768px) {
    .section .flex-item {
        flex: 0 0 48%; /* 2 images per row on medium screens */
        max-width: 48%;
    }
}

@media (max-width: 576px) {
    .section .flex-item {
        flex: 0 0 100%; /* 1 image per row on small screens */
        max-width: 100%;
    }
}

/* Prevent images from resizing to fill flex-item */
.section .flex-item img {
    max-width: 100%; /* Respect natural width, constrained by container */
    max-height: 200px; /* Optional: limit height to prevent oversized images */
    height: auto; /* Maintain aspect ratio */
}

/* Intro section with background image */
.intro-section {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("https://ecolesaintclaude.com/pictures/3.png") no-repeat center center;
    background-size: cover;
    color: #ffffff; /* White text for contrast */
    background-attachment: scroll; /* Allow background to move with scroll */
    position: relative; /* Ensure positioning context */
    display: flex; /* Use flexbox to control container positioning */
    flex-direction: column; /* Stack children vertically */
    justify-content: flex-end; /* Align content to bottom */
    min-height: 100vh; /* Ensure full viewport height */
}

.intro-section .container-fluid {
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
    border-radius: 10px; /* Rounded corners for a polished look */
    margin-bottom: 20px; /* Space from bottom edge */
    text-align: center; /* Maintain centered text */
    line-height: 1;
}

.intro-section .container-fluid #annonce {
    margin-top: 16px;
    text-align: center;
}

/* Improve text contrast in intro section */
.intro-section .container-fluid h1 {
    color: #344359; /* Dark text for contrast */
    font-family: 'Josefin Sans', sans-serif; /* Ensure Josefin Sans */
}

.intro-section .container-fluid h2 {
    color: #383b3a; /* Dark text for contrast */
    font-family: 'Josefin Sans', sans-serif; /* Ensure Josefin Sans */
}

.intro-section .container-fluid p {
    color: #383b3a; /* Dark text for contrast */
    font-family: 'Josefin Sans', sans-serif; /* Ensure Josefin Sans */
}

/* Image Resizing Options */
.intro-image img {
    width: 100%; /* Ensures the image takes the full width of its container */
    max-width: 200px; /* Limits the maximum width */
    height: auto; /* Maintains aspect ratio */
    border-radius: 10px; /* Optional: Keep for aesthetics */
    object-fit: cover; /* Ensures the image fills the space without distortion */
}

/* Section presentation */
.section-presentation {
    background-color: #b8cbd0;
    color: #000000;
    min-height: 100vh; /* Full viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-presentation h1 {
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
    font-size: 2.5rem;
    font-family: 'Josefin Sans', sans-serif;
}

.section-presentation .row {
    align-items: flex-start; /* Align columns at the top */
}

.section-presentation .presentation-text {
    text-align: justify;
}

.section-presentation .presentation-text img {
    width: 20%;
    float: left;
    object-fit: contain;
}

.section-presentation .presentation-video {
    text-align: center;
}

.section-presentation .container-fluid {
    width: 100%;
}

.section-presentation .ec-image img {
    width: 100%;
    max-width: 200px;
    height: auto;
    padding-bottom: 20px;
}

/* Remove empty paragraph margins for cleaner spacing */
.section-presentation p:empty {
    display: none;
}

/* Ensure paragraphs have consistent spacing */
.section-presentation .presentation-text p {
    margin: 0 0 15px 0;
    font-size: 1.2rem;
    font-family: 'Josefin Sans', sans-serif;
}

/* Section pastoral */
.section-pastoral {
    background-color: #709ca7;
    color: #000000;
}

.section-pastoral h1 {
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
    font-size: 2.5rem;
    font-family: 'Josefin Sans', sans-serif;
}

/* Section fonctionnement */
.section-fonctionnement {
    background-color: #b8cbd0;
    color: #000000;
}

.section-fonctionnement h1 {
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
    font-size: 2.5rem;
    font-family: 'Josefin Sans', sans-serif;
}

/* Section organismes */
.section-organismes {
    background-color: #709ca7;
    color: #000000;
}

/* Section contact */
.section-contact {
    background-color: #b8cbd0;
    color: #000000;
}

/* Section locaux */
.section-locaux {
    background-color: #b8cbd0;
    color: #000000;
    text-align: center;
    flex-direction: column; /* Stack title and images vertically */
    align-items: center; /* Center content horizontally */
    padding-top: 20px;
    margin-top: 0; /* Remove top margin */
    margin-bottom: 16px; /* Equivalent to my-3 bottom margin (1rem) */
    justify-content: normal; /* Override justify-content: center */
}

.section-locaux .title-container {
    width: 100%; /* Full width for centering */
    text-align: center; /* Center the h1 */
    margin-bottom: 20px; /* Space between title and images */
}

.section-locaux h1 {
    margin-top: 0; /* Remove top margin */
}

/* Section activites */
.section-activites {
    background-color: #709ca7; /* Dark background */
    color: #000000;
    text-align: center;
    flex-direction: column; /* Stack title and images vertically */
    align-items: center; /* Center content horizontally */
    padding-top: 20px;
    margin-top: 0; /* Remove top margin */
    margin-bottom: 16px; /* Equivalent to my-3 bottom margin (1rem) */
    justify-content: normal; /* Override justify-content: center */
}

.section-activites .title-container {
    width: 100%; /* Full width for centering */
    text-align: center; /* Center the h1 */
    margin-bottom: 20px; /* Space between title and images */
}

.section-activites h1 {
    margin-top: 0; /* Remove top margin */
}

/* Section documents */
.section-documents {
    background-color: #709ca7; /* Dark background */
    color: #000000;
    text-align: center;
    flex-direction: column; /* Stack title and images vertically */
    align-items: center; /* Center content horizontally */
    padding-top: 20px;
    margin-top: 0; /* Remove top margin */
    margin-bottom: 16px; /* Equivalent to my-3 bottom margin (1rem) */
    justify-content: normal; /* Override justify-content: center */
}

.section-documents .title-container {
    width: 100%; /* Full width for centering */
    text-align: center; /* Center the h1 */
    margin-bottom: 20px; /* Space between title and images */
}

.section-documents h1 {
    margin-top: 0; /* Remove top margin */
}

.button {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  border-radius: 12px;
}


/* Content styling */
h1 {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 5px;
}

h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 5px;
}

p {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1.2rem;
}

/* Call-to-action button */
.btn-cta {
    font-family: 'Josefin Sans', sans-serif;
    background-color: #f39c12;
    color: #ffffff;
    padding: 10px 20px;
    font-size: 1.1rem;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.btn-cta:hover {
    background-color: #e67e22;
}

/* Adjust button color for light sections */
.section-presentation .btn-cta,
.section-contact .btn-cta {
    background-color: #2c3e50;
}

.section-presentation .btn-cta:hover,
.section-contact .btn-cta:hover {
    background-color: #34495e;
}

/* Remove left padding for screens smaller than 400px */
@media (max-width: 400px) {
    .section {
        padding-left: 0;
        padding-right: 0;
    }
}

.section-mentions {
    background-color: #b8cbd0;
    color: #000000; /* White text for contrast */
    background-attachment: scroll; /* Allow background to move with scroll */
    position: relative; /* Ensure positioning context */
    display: flex; /* Use flexbox to control container positioning */
    flex-direction: column; /* Stack children vertically */
    justify-content: normal;
    min-height: 100vh; /* Ensure full viewport height */
}

.section-mentions h2{
    align-items:start;
}