/* Complements to Bootstrap 5 */

body {
    padding-top: 56px; /* height of the .fixed-top navbar */
}

/* Full-width carousel, 3:1 like the source images (1920x640) */
#home-carousel .carousel-item img {
    aspect-ratio: 3 / 1;
    max-height: calc(50vh - 56px);
    object-fit: cover;
}

/* Internal page banner (navigation.Bandeau), same 3:1 format */
.page-banner img {
    aspect-ratio: 3 / 1;
    max-height: 40vh;
    object-fit: cover;
}

/* Title over the banner: white with a shadow to stay readable on any photo */
.page-banner-title {
    text-shadow: 0 2px 8px rgba(0, 0, 0, .8);
}

@media (max-width: 575.98px) {
    .page-banner-title { font-size: 1.25rem; }
    /* Légende de l'accueil (sous le titre) : reste plus petite que le titre */
    p.page-banner-title { font-size: 1rem; }
}

/* Home carousel: arrows against the edges, title just past the left one */
#home-carousel .carousel-control-prev,
#home-carousel .carousel-control-next {
    width: 3rem;
}

#home-carousel .page-banner-title {
    padding-left: 3rem;
}

/* Card headers are titles: same color as h1-h6 (settings.color_txt_title) */
.card {
    --bs-card-cap-color: var(--bs-heading-color);
}

/* Contact page map: as tall as the form on large screens */
.contact-map {
    min-height: 400px;
}

/* Contact form fields: inner shadow, kept alongside Bootstrap's focus rings */
#contact-form .form-control {
    --contact-inner-shadow: inset 2px 3px 6px rgba(108, 117, 125, .55);
    box-shadow: var(--contact-inner-shadow);
}

#contact-form .form-control:focus {
    box-shadow: var(--contact-inner-shadow), 0 0 0 .25rem rgba(13, 110, 253, .25);
}

#contact-form .form-control.is-invalid:focus {
    box-shadow: var(--contact-inner-shadow), 0 0 0 .25rem rgba(220, 53, 69, .25);
}

@media (max-width: 575.98px) {
    #home-carousel .carousel-item img { aspect-ratio: 16 / 9; }
}

/* Galeries (Flexbin) : espacement de 1 px entre les photos, comme une galerie « Flickr » */
.gallery.flexbin { margin: -1px; }
.gallery.flexbin > * { margin: 1px; overflow: hidden; }

/* Largeur déduite des attributs width/height (ratio) et de la hauteur fixée par Flexbin : proportions conservées */
.gallery.flexbin > * > img { width: auto; }

/* Titre et auteur en bandeau au bas de la photo, sur un dégradé sombre */
.gallery-caption {
    padding: 4px 8px 6px;
    font-size: .9em;
    line-height: 1.25;
    background: linear-gradient(transparent 20%, rgba(0, 0, 0, .6));
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
    pointer-events: none;
}

@media (max-width: 980px) {
    /* Vignettes de 150 px de haut (Flexbin) : légende réduite */
    .gallery .gallery-caption { font-size: .6em; padding: 2px 6px 4px; }
}

/* Agrandissement des galeries : flèches du carrousel toujours blanches (le thème sombre de Bootstrap les inverse en noir) */
#gallery-modal .carousel-control-prev-icon,
#gallery-modal .carousel-control-next-icon {
    filter: none;
}

/* Accueil, cartes « prochain rendez-vous » et « dernières infos » : image au format 3:2 comme sur la page calendrier */
.next-event-img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* Titre sur l'image : dégradé sombre en bas pour rester lisible sur toute photo */
.next-event-overlay {
    border-radius: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0) 60%);
    text-shadow: 0 2px 6px rgba(0, 0, 0, .8);
}

/* Texte justifié (Bootstrap 5 ne fournit plus d'utilitaire text-justify) */
.text-justify {
    text-align: justify;
}