/* =====================================================================
   STYLE.CSS — Template Resamare 2026
   Design simple, moderne, esprit "vacances / plein air".
   Pensé mobile-first. Toutes les couleurs sont pilotées par le
   back-office via les variables :root définies dans head.php.
   ===================================================================== */

/* ============================ 1. BASE ============================ */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-texte, "Poppins", sans-serif);
    font-size: var(--fs-base, 16px);
    line-height: 1.65;
    color: var(--color-texte-site, #333);
    background: var(--bg-site, #fff);
    -webkit-font-smoothing: antialiased;
    /* clip (et non hidden) : évite le débordement horizontal SANS casser
       le position:sticky du header. */
    overflow-x: clip;
}

h1, h2, h3, h4, h5, h6,
.font-titre {
    font-family: var(--font-titre, "Playfair Display", serif);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 .6em;
}

h1, .h1 { color: var(--color-h1, #12afcc); }
h2, .h2 { color: var(--color-h2, #49c3da); }

a { color: var(--color-h1); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--color-h2); }

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

.section { padding: 3rem 0; }
@media (min-width: 992px) { .section { padding: 5rem 0; } }

/* Sur-titre décoratif (ex: "ABOUT US", "NOS OFFRES PHARES") */
.eyebrow {
    display: inline-block;
    font-family: var(--font-texte);
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--color-h2);
    margin-bottom: .75rem;
}

/* ==================== 2. BOUTONS (pilotés BO) ==================== */
.btn { font-family: var(--font-texte); font-weight: 600; border-radius: 50rem; }
.btn-lg { padding: .7rem 1.9rem; }

.btn-danger  { --bs-btn-bg: var(--color-danger);  --bs-btn-border-color: var(--color-danger);  --bs-btn-color: var(--color-text-bt-danger);  --bs-btn-hover-bg: var(--bg-hover-danger);  --bs-btn-hover-border-color: var(--bg-hover-danger);  --bs-btn-hover-color: var(--color-text-hover-danger); }
.btn-warning { --bs-btn-bg: var(--color-warning); --bs-btn-border-color: var(--color-warning); --bs-btn-color: var(--color-text-bt-warning); --bs-btn-hover-bg: var(--bg-hover-warning); --bs-btn-hover-border-color: var(--bg-hover-warning); --bs-btn-hover-color: var(--color-text-hover-warning); }
.btn-success { --bs-btn-bg: var(--color-success); --bs-btn-border-color: var(--color-success); --bs-btn-color: var(--color-text-bt-succes); --bs-btn-hover-bg: var(--bg-hover-succes); --bs-btn-hover-border-color: var(--bg-hover-succes); --bs-btn-hover-color: var(--color-text-hover-succes); }
.btn-info    { --bs-btn-bg: var(--color-info);    --bs-btn-border-color: var(--color-info);    --bs-btn-color: var(--color-text-bt-info);    --bs-btn-hover-bg: var(--bg-hover-info);    --bs-btn-hover-border-color: var(--bg-hover-info);    --bs-btn-hover-color: var(--color-text-hover-info); }

/* Bouton "Réserver" du header : basé sur la couleur warning/orange du BO */
.btn-reserver {
    --bs-btn-bg: var(--color-warning);
    --bs-btn-border-color: var(--color-warning);
    --bs-btn-color: var(--color-text-bt-warning);
    --bs-btn-hover-bg: var(--bg-hover-warning);
    --bs-btn-hover-border-color: var(--bg-hover-warning);
    --bs-btn-hover-color: var(--color-text-hover-warning);
    font-weight: 600;
    padding: .55rem 1.4rem;
    white-space: nowrap;
    box-shadow: 0 6px 18px -6px rgba(0,0,0,.35);
}
.btn-reserver i { margin-right: .4rem; }

/* ========================= 3. HEADER (commun) ========================= */
/* Dans index.php le header est encapsulé dans <div class="topbar">.
   display:contents efface ce wrapper de la mise en page pour que le
   position:sticky du header se cale sur toute la hauteur de #main-wrapper.
   Sur les pages resa (.relative) on conserve le header dans le flux. */
.topbar { display: contents; }
.topbar.relative { display: block; position: relative; }

.site-header {
    width: 100%;
    z-index: 1030;
    transition: transform .35s ease;
}
/* Masqué au scroll (glisse vers le haut) */
.site-header.header-hidden { transform: translateY(-100%); }

.site-header .navbar { padding: .55rem 0; transition: background .35s ease, box-shadow .35s ease, padding .35s ease; }

.site-header .navbar-brand { display: inline-flex; align-items: center; padding: 0; margin: 0; }
.site-header .navbar-brand img {
    height: 54px;
    width: auto;
    transition: height .35s ease;
}
@media (min-width: 992px) {
    .site-header .navbar-brand img { height: 64px; }
}

/* Liens du menu */
.site-header .navbar-nav .nav-link {
    font-family: var(--font-texte);
    font-weight: 500;
    font-size: .95rem;
    letter-spacing: .02em;
    color: var(--color-lien-menu);
    padding: .5rem .9rem;
    position: relative;
    opacity: .92;
}
.site-header .navbar-nav .nav-link:hover,
.site-header .navbar-nav .nav-link.active { opacity: 1; }

/* Petit trait animé sous le lien (desktop) */
@media (min-width: 992px) {
    .site-header .navbar-nav > .nav-item > .nav-link::after {
        content: "";
        position: absolute;
        left: .9rem; right: .9rem; bottom: .25rem;
        height: 2px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .25s ease;
    }
    .site-header .navbar-nav > .nav-item > .nav-link:hover::after,
    .site-header .navbar-nav > .nav-item > .nav-link.active::after { transform: scaleX(1); }
}

/* Sous-menus */
.site-header .dropdown-menu {
    border: 0;
    border-radius: .6rem;
    padding: .4rem;
    margin-top: .4rem;
    box-shadow: 0 12px 34px -12px rgba(0,0,0,.3);
    background: var(--bg-sous-menu);
}
.site-header .dropdown-item {
    color: var(--color-lien-menu);
    border-radius: .4rem;
    font-size: .92rem;
    padding: .5rem .8rem;
}
.site-header .dropdown-item:hover,
.site-header .dropdown-item:focus {
    background: rgba(0,0,0,.06);
    color: var(--color-lien-menu);
}

/* Ouverture des sous-menus au survol (desktop) */
@media (min-width: 992px) {
    /* pas d'espace entre le lien parent et le sous-menu : survol continu */
    .site-header .navbar-nav .nav-item.dropdown > .dropdown-menu { margin-top: 0; }
    .site-header .navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
        animation: navDropIn .18s ease;
    }
}
@keyframes navDropIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Téléphone dans le header */
.header-tel {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--color-lien-menu);
    font-family: var(--font-texte);
    font-weight: 600;
    font-size: .95rem;
    white-space: nowrap;
}
.header-tel:hover { color: var(--color-lien-menu); opacity: .85; }

/* Bouton burger */
.site-header .navbar-toggler {
    border: 0;
    color: var(--color-lien-menu);
    font-size: 1.5rem;
    line-height: 1;
    padding: .25rem .5rem;
    box-shadow: none !important;
}
.site-header .navbar-toggler:focus { outline: none; }

/* Sélecteur de langue */
.lang-switch { display: inline-flex; align-items: center; gap: .35rem; }
.lang-switch a { display: inline-flex; }
.lang-switch img {
    width: 24px; height: 16px;
    object-fit: cover;
    border-radius: 3px;
    opacity: .8;
    transition: opacity .2s ease, transform .2s ease;
}
.lang-switch a:hover img { opacity: 1; transform: translateY(-1px); }

/* ---- Variante SOLIDE (fond couleur) ---- */
.header-solid {
    position: sticky;
    top: 0;
}
.header-solid .navbar { background: var(--bg-header); box-shadow: 0 4px 24px -14px rgba(0,0,0,.55); border-radius: 0 0 25px 25px; }

/* ---- Variante TRANSPARENTE -> couleur au scroll ---- */
.header-transparent {
    position: fixed;
    top: 0; left: 0; right: 0;
}
.header-transparent .navbar { background: transparent; }
.header-transparent.scrolled .navbar {
    background: var(--bg-header);
    box-shadow: 0 4px 24px -14px rgba(0,0,0,.55);
    padding: .4rem 0;
}
.header-transparent.scrolled .navbar-brand img { height: 48px; }
/* léger dégradé pour la lisibilité au-dessus du hero */
.header-transparent:not(.scrolled)::before {
    content: "";
    position: absolute; inset: 0 0 auto 0;
    height: 140px;
    background: linear-gradient(to bottom, rgba(0,0,0,.35), transparent);
    pointer-events: none;
    z-index: -1;
}

/* ---- Variante LOGO CENTRÉ ---- */
.header-centered { position: sticky; top: 0; }
.header-centered .navbar { background: var(--bg-header); box-shadow: 0 4px 24px -14px rgba(0,0,0,.55); }
.header-centered .nav-split {
    display: none;
    flex: 1 1 0;
    align-items: center;
    gap: .2rem;
}
.header-centered .nav-split.nav-left  { justify-content: flex-end; }
.header-centered .nav-split.nav-right { justify-content: flex-start; }
.header-centered .brand-center { flex: 0 0 auto; padding: 0 2rem; }
@media (min-width: 992px) {
    .header-centered .nav-split { display: flex; }
}

/* ================= 4. OFFCANVAS (menu mobile) ================= */
/* Tiroir autonome : ce comportement ne dépend pas du CSS offcanvas de
   Bootstrap (mêmes valeurs), il garantit que le menu mobile reste masqué
   tant qu'il n'a pas la classe .show ajoutée par Bootstrap au clic burger. */
.offcanvas.menu-mobile {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1045;
    width: min(84vw, 340px);
    max-width: 100%;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s ease-in-out;
    background: var(--bg-header);
    color: var(--color-lien-menu);
}
.offcanvas.menu-mobile.show {
    transform: none;
    visibility: visible;
}
/* Sur desktop : le menu mobile ne doit JAMAIS apparaître (menu desktop dédié) */
@media (min-width: 992px) {
    .offcanvas.menu-mobile { display: none !important; }
}
.offcanvas.menu-mobile .offcanvas-header { border-bottom: 1px solid rgba(255,255,255,.12); }
.offcanvas.menu-mobile .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
.offcanvas.menu-mobile .navbar-nav .nav-link {
    color: var(--color-lien-menu);
    padding: .75rem .25rem;
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    opacity: 1;
}
/* Sous-menu en accordéon : il pousse les items suivants au lieu de les
   recouvrir. Les !important neutralisent le positionnement inline
   (Popper) que Bootstrap applique hors d'une .navbar. */
.offcanvas.menu-mobile .dropdown-menu {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    float: none;
    width: 100%;
    background: rgba(0, 0, 0, .06);
    border: 0;
    border-radius: 12px;
    box-shadow: none;
    margin: .2rem 0 .6rem;
    padding: .35rem .45rem;
}
.offcanvas.menu-mobile .dropdown-item {
    color: var(--color-lien-menu);
    font-size: .98rem;
    padding: .55rem .8rem;
    border-radius: 8px;
    white-space: normal;
}
.offcanvas.menu-mobile .dropdown-item:hover,
.offcanvas.menu-mobile .dropdown-item:focus,
.offcanvas.menu-mobile .dropdown-item.active {
    background: rgba(0, 0, 0, .08);
    color: var(--color-lien-menu);
}
.offcanvas.menu-mobile .btn-menu-mobile-cta {
    background: var(--bg-bt-menu-mobile);
    color: var(--texte-bt-menu-mobile);
    border: 0;
    font-weight: 600;
}
.offcanvas.menu-mobile .mobile-contact { color: var(--color-lien-menu); opacity: .9; font-size: .95rem; }
.offcanvas.menu-mobile .mobile-contact a { color: var(--color-lien-menu); }

/* Décalage du contenu quand le header transparent est fixe : géré côté page hero.
   Pour les headers sticky/solid, aucun décalage nécessaire. */

/* ========================= 5. FOOTER ========================= */
.site-footer {
    position: relative;
    background: var(--bg-footer);
    color: var(--color-text-footer);
    font-size: .95rem;
}
.footer-top { padding: 3.5rem 0 2.5rem; }

.footer-brand img { height: 62px; width: auto; }
.footer-desc {
    color: var(--color-text-footer);
    opacity: .8;
    margin: 0 0 1.2rem;
    max-width: 34ch;
}

/* Titres de colonnes — serif simple, épuré et élégant */
.footer-title {
    font-family: var(--font-texte);
    font-size: 1.2rem;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-titre-footer);
    margin-bottom: 1.15rem;
}

/* Listes de liens */
.footer-links,
.footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-links li { margin-bottom: .6rem; }
.footer-links a {
    color: var(--color-lien-footer);
    opacity: .82;
    transition: opacity .2s ease, padding-left .2s ease;
}
.footer-links a:hover {
    opacity: 1;
    padding-left: .3rem;
    color: var(--color-lien-footer);
}

/* Coordonnées */
.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin-bottom: .8rem;
    line-height: 1.5;
}
.footer-contact i {
    color: var(--color-titre-footer);
    margin-top: .25rem;
    width: 16px;
    text-align: center;
    flex: 0 0 auto;
}
.footer-contact a { color: var(--color-lien-footer); opacity: .85; }
.footer-contact a:hover { opacity: 1; color: var(--color-lien-footer); }

/* Réseaux sociaux */
.footer-social { display: flex; flex-wrap: wrap; gap: .5rem; }
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-bt-reseaux);
    color: var(--texte-bt-reseaux);
    font-size: 1rem;
    transition: transform .2s ease, filter .2s ease;
}
.footer-social a:hover {
    color: var(--texte-bt-reseaux);
    transform: translateY(-3px);
    filter: brightness(1.1);
}

/* Barre basse */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 1.1rem 0;
    font-size: .85rem;
}
.footer-copy { color: var(--color-text-footer); opacity: .7; }
.footer-rea {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--color-text-footer);
    opacity: .7;
}
.footer-rea img { height: 22px; width: auto; }

/* Bouton retour en haut */
.footer-totop {
    position: absolute;
    top: -22px;
    right: 24px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--color-warning);
    color: var(--color-text-bt-warning);
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .5);
    cursor: pointer;
    transition: transform .2s ease, filter .2s ease;
}
.footer-totop:hover { transform: translateY(-3px); filter: brightness(1.05); }

@media (max-width: 575.98px) {
    .footer-bottom .container { text-align: center; }
    .footer-totop { right: 50%; transform: translateX(50%); }
    .footer-totop:hover { transform: translateX(50%) translateY(-3px); }
}

/* ============ 6. BOUTON RÉSERVATION MOBILE (barre fixe bas) ============ */
/* Masqué par défaut (desktop) : le header porte déjà le bouton Réserver. */
#bt_resa_mobile { display: none; }

@media (max-width: 991.98px) {
    #bt_resa_mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1035;
        margin: 0;
        padding: .6rem 0.2rem;
        border-radius: 0;
        font-weight: 600;
        letter-spacing: .02em;
        box-shadow: 0 -6px 18px -8px rgba(0, 0, 0, .5);
    }
    /* Évite que la barre fixe masque le bas du contenu / footer */
    #main-wrapper { padding-bottom: 44px; }
}

/* ==================== 7. CARTES CIRCUITS ==================== */
.circuits-section { padding: 3rem 0; }
@media (min-width: 992px) { .circuits-section { padding: 4.5rem 0; } }

.circuit-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px -18px rgba(20, 50, 64, .45);
    transition: transform .3s ease, box-shadow .3s ease;
}
.circuit-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 42px -20px rgba(20, 50, 64, .55);
}

/* Média + zoom au survol */
.circuit-card__media {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--bg-zone-impaire);
}
.circuit-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.circuit-card:hover .circuit-card__media img { transform: scale(1.06); }

/* Cartouche prix (surimpression) */
.circuit-card__price {
    position: absolute;
    top: .8rem;
    right: .8rem;
    display: flex;
    flex-direction: column;
    gap: .05rem;
    padding: .5rem .8rem;
    border-radius: 12px;
    background: var(--color-h1);                              /* repli */
    background: color-mix(in srgb, var(--color-h1) 90%, transparent);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    text-align: right;
    line-height: 1.25;
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .4);
}
.circuit-card__price small { font-size: .72rem; opacity: .9; }
.circuit-card__price > strong { font-size: 1.05rem; font-weight: 700; }
.circuit-card__price-line { font-size: .82rem; white-space: nowrap; }
.circuit-card__price-line em { font-style: normal; opacity: .9; }
.circuit-card__price-line strong { font-weight: 700; margin-left: .15rem; }

/* Corps */
.circuit-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.5rem 1.4rem 1.6rem;
    text-align: center;
}
.circuit-card__title {
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: .01em;
    margin-bottom: .7rem;
}
.circuit-card__title a { color: var(--color-h1); }
.circuit-card__title a:hover { color: var(--color-h1); }
.circuit-card__desc {
    color: var(--color-texte-site);
    font-size: .95rem;
    margin-bottom: 1rem;
}
.circuit-card__meta {
    color: var(--color-texte-site);
    opacity: .7;
    font-style: italic;
    font-size: .9rem;
    margin-bottom: 1.2rem;
}
.circuit-card__meta i { margin-right: .35rem; font-style: normal; color: var(--color-info); }
.circuit-card__btn {
    align-self: center;
    margin-top: auto;
}
.circuit-card__btn i { margin-right: .4rem; }

/* Texte riche (description) — utilisé par les cartes bateaux */
.circuit-card__text {
    color: var(--color-texte-site);
    font-size: .92rem;
    text-align: left;
    margin-top: .3rem;
}
.circuit-card__text p:last-child { margin-bottom: 0; }
.circuit-card__text ul { padding-left: 1.2rem; margin-bottom: 0; }

/* ==================== 8. ZONES ==================== */
.zone { padding: 3rem 0; }
@media (min-width: 992px) { .zone { padding: 4.5rem 0; } }
/* Alternance de fond (piloté par le dispatcher) */
.zone.fond_zone_color { background: var(--bg-zone-impaire); }

/* --- En-tête de page sans diapo (remplace le hero) --- */
.hero-simple { padding: 3.5rem 0 1.5rem; }
@media (min-width: 992px) { .hero-simple { padding: 5rem 0 2rem; } }
.hero-simple .zone-text .btn { margin-top: 1rem; }

/* --- Zone 1 : image + texte --- */
/* L'image (figure) s'étire à la hauteur de la colonne texte grâce au flex ;
   min-height sert de plancher quand le texte est court. */
.zone-media {
    position: relative;
    width: 100%;
    min-height: 340px;
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 22px 48px -24px rgba(20, 50, 64, .55);
}
.zone-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.zone-content {
    width: 100%;
    max-width: 640px;
}
.zone-title {
    color: var(--color-h1);
    font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.5rem);
    line-height: 1.15;
    margin-bottom: 1.1rem;
}
.zone-text { color: var(--color-texte-site); }
.zone-text p:last-child { margin-bottom: 0; }

/* --- Zone 4 : texte centré + image optionnelle --- */
.zone--center { text-align: center; }
.zone-content--center {
    max-width: 760px;
    margin-inline: auto;
}
.zone-banner {
    position: relative;
    margin: 2.5rem auto 0;
    max-width: 1040px;
    aspect-ratio: 16 / 8;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 50px -26px rgba(20, 50, 64, .55);
}
.zone-banner img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 575.98px) {
    .zone-banner { aspect-ratio: 4 / 3; }
}

/* --- Zone 7 : liste de cartes (image + titre + description) --- */
.zone-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px -18px rgba(20, 50, 64, .45);
    transition: transform .3s ease, box-shadow .3s ease;
}
.zone-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 42px -20px rgba(20, 50, 64, .55);
}
.zone-card__media {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--bg-zone-impaire);
}
.zone-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.zone-card:hover .zone-card__media img { transform: scale(1.06); }
.zone-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.5rem 1.4rem 1.6rem;
    text-align: center;
}
.zone-card__title {
    font-size: 1.15rem;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: var(--color-h2);
    margin-bottom: .7rem;
}
.zone-card__text { color: var(--color-texte-site); font-size: .95rem; }
.zone-card__text p:last-child { margin-bottom: 0; }

/* Lien de la description transformé en bouton */
.zone-card__btn {
    display: inline-block;
    margin-top: .9rem;
    padding: .55rem 1.4rem;
    border-radius: 50rem;
    background: var(--color-info);
    color: #fff !important;
    font-family: var(--font-texte);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
    transition: filter .2s ease, transform .2s ease;
}
.zone-card__btn:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
    color: #fff !important;
}

/* --- Page contact --- */
.contact-intro { padding-bottom: 2rem; }

/* Liste des coordonnées */
.contact-infos {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 0;
    margin: 0 0 1.5rem;
}
.contact-infos li { display: flex; align-items: flex-start; gap: .85rem; }
.contact-infos li i {
    flex: 0 0 auto;
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-info);
    color: #fff;
    font-size: .9rem;
}
.contact-infos li a,
.contact-infos li span { color: var(--color-texte-site); padding-top: .2rem; }
.contact-infos li a:hover { color: var(--color-info); }

/* Carte (embed BO) : arrondie, remplit la hauteur restante */
.contact-map {
    position: relative;
    min-height: 220px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 14px 34px -20px rgba(20, 50, 64, .5);
}
.contact-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Carte blanche du formulaire */
.contact-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 10px 30px -18px rgba(20, 50, 64, .45);
    padding: 2rem 1.6rem;
    height: 100%;
}
@media (min-width: 992px) { .contact-card { padding: 2.4rem 2.2rem; } }
.contact-card__title {
    font-size: 1.4rem;
    color: var(--color-h1);
    margin-bottom: 0;
}
.contact-form .form-control {
    border-radius: 12px;
    padding: .7rem 1rem;
    border-color: rgba(20, 50, 64, .15);
    font-family: var(--font-texte);
}
.contact-form .form-control:focus {
    border-color: var(--color-info);
    box-shadow: 0 0 0 .2rem rgba(20, 50, 64, .12);
}
.contact-note {
    font-size: .82rem;
    color: var(--color-texte-site);
    opacity: .75;
}
.contact-note i { margin-right: .35rem; color: var(--color-info); }

/* --- Zone 21 : bannière contact (texte + carte coordonnées) --- */
.info-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 44px -26px rgba(20, 50, 64, .55);
    padding: 1.6rem 1.8rem;
}
@media (min-width: 992px) { .info-card { padding: 2rem 2.2rem; } }
.info-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.info-card__row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid rgba(20, 50, 64, .10);
}
.info-card__list > .info-card__row:first-child { padding-top: 0; }
.info-card__list > .info-card__row:last-child { padding-bottom: 0; border-bottom: 0; }
.info-card__icon {
    flex: 0 0 auto;
    color: var(--color-h2);
    font-size: 1.1rem;
    line-height: 1.6;
    width: 1.5rem;
    text-align: center;
}
.info-card__body { display: flex; flex-direction: column; }
.info-card__label {
    font-family: var(--font-texte);
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-h2);
    margin-bottom: .2rem;
}
.info-card__value {
    color: var(--color-h1);
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1.4;
}
a.info-card__value { transition: color .2s ease; }
a.info-card__value:hover { color: var(--color-h2); }
.info-card__sub {
    color: var(--color-texte-site);
    opacity: .8;
    font-size: .92rem;
}

/* --- Page détail produit --- */
.produit-intro { padding-bottom: 2rem; }
@media (min-width: 992px) { .produit-intro { padding-bottom: 2.5rem; } }

/* Badges d'infos clés (durée, prix minimum…) */
.produit-badges {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .8rem;
    padding: 0;
    margin: 1.5rem 0 0;
}
.produit-badges li {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem 1.2rem;
    border-radius: 50rem;
    background: #fff;
    border: 1px solid rgba(20, 50, 64, .08);
    box-shadow: 0 10px 24px -16px rgba(20, 50, 64, .45);
    font-family: var(--font-texte);
    font-weight: 500;
    font-size: .95rem;
    color: var(--color-texte-site);
}
.produit-badges li i { color: var(--color-info); }
.produit-badges li strong { color: var(--color-h1); font-weight: 700; }

/* La figure "plan" garde une hauteur mini confortable dans la colonne */
.zone .img-ho .zone-media { min-height: 300px; }
@media (min-width: 992px) { .zone .img-ho .zone-media { min-height: 380px; } }

/* --- Zone 10 : galerie d'images --- */
.zone-gallery .gallery-item {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 14px 34px -20px rgba(20, 50, 64, .5);
}
.zone-gallery .gallery-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.zone-gallery .gallery-item:hover img { transform: scale(1.05); }
/* Image unique / slides : hauteur fixe pleine largeur */
.zone-gallery .gallery-item--wide {
    aspect-ratio: auto;
    height: clamp(320px, 56vh, 580px);
}
/* Indicateur zoom au survol (galerie produit) */
.produit-lightbox { cursor: zoom-in; }
.btn.produit-lightbox { cursor: pointer; }
.gallery-item__zoom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.8);
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    color: #fff;
    font-size: 1.15rem;
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}
.produit-lightbox:hover .gallery-item__zoom {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Lightbox plein écran (galerie produit) */
.pd-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(18, 26, 40, .93);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
.pd-lightbox[hidden] { display: none; }
body.pd-lightbox-open { overflow: hidden; }

.pd-lightbox__figure {
    margin: 0;
    max-width: min(1200px, 94vw);
    text-align: center;
    pointer-events: none;
}
.pd-lightbox__figure img {
    max-width: 100%;
    max-height: 82vh;
    border-radius: 14px;
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
    animation: pd-zoom .25s ease;
    pointer-events: auto;
}
@keyframes pd-zoom {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: none; }
}
.pd-lightbox__figure figcaption {
    color: #fff;
    margin-top: .9rem;
    font-family: var(--font-titre);
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.pd-lightbox__close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
}
.pd-lightbox__prev,
.pd-lightbox__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}
.pd-lightbox__prev:hover,
.pd-lightbox__next:hover { transform: translateY(-50%) scale(1.06); }
.pd-lightbox__prev { left: 16px; }
.pd-lightbox__next { right: 16px; }
.pd-lightbox__count {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    opacity: .8;
    font-family: var(--font-texte);
    font-size: .9rem;
    letter-spacing: .08em;
}

.gallery-item__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.4rem 1.2rem .9rem;
    background: linear-gradient(0deg, rgba(0, 0, 0, .6), transparent);
    color: #fff;
    font-family: var(--font-titre);
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* Slider Swiper (4 images et +) : 3 PC / 2 tablette / 1 mobile, en boucle */
.gallery-swiper {
    position: relative;
    --swiper-theme-color: var(--color-info);
}
.gallery-swiper .gallery-item { width: 100%; border-radius: 18px; }
.gallery-swiper .swiper-pagination { position: static; margin-top: 1.1rem; }
.gallery-swiper .swiper-button-prev,
.gallery-swiper .swiper-button-next { display: none; } /* on utilise nos propres boutons */

/* Boutons ronds de navigation (galerie / sliders) */
.slider-ctrl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .35);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 1.1rem;
    border: 0;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.slider-ctrl:hover {
    background: var(--color-info);
    transform: scale(1.06);
    color: #fff;
}
/* Positionnement des boutons du slider galerie */
.gallery-swiper__prev,
.gallery-swiper__next {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    z-index: 6;
}
.gallery-swiper__prev:hover,
.gallery-swiper__next:hover { transform: translateY(-50%) scale(1.06); }
.gallery-swiper__prev { left: 6px; }
.gallery-swiper__next { right: 6px; }

/* Zone 20 : slider de cartes produits (3 PC / 2 tablette / 1 mobile) */
.circuits-swiper {
    position: relative;
    --swiper-theme-color: var(--color-info);
    /* Laisse de la place aux ombres des cartes malgré l'overflow du swiper */
    padding: 12px 12px 0;
    margin: -12px -12px 0;
}
.circuits-swiper .swiper-slide {
    height: auto; /* cartes de même hauteur sur la rangée */
    padding-bottom: 34px; /* espace pour l'ombre portée des cartes */
}
.circuits-swiper .swiper-pagination { position: static; margin-top: 0; }
.circuits-swiper__prev,
.circuits-swiper__next {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    z-index: 6;
}
.circuits-swiper__prev:hover,
.circuits-swiper__next:hover { transform: translateY(-50%) scale(1.06); }
.circuits-swiper__prev { left: 18px; }
.circuits-swiper__next { right: 18px; }

/* --- Zone 9 : FAQ (accordéon) --- */
.zone-faq .container { max-width: 860px; }
.faq-accordion {
    --bs-accordion-bg: #fff;
    --bs-accordion-border-color: rgba(20, 50, 64, .10);
    --bs-accordion-active-bg: #fff;
    --bs-accordion-active-color: var(--color-h2);
    --bs-accordion-btn-color: var(--color-h1);
    --bs-accordion-btn-focus-box-shadow: none;
}
.faq-accordion .accordion-item {
    border: 1px solid rgba(20, 50, 64, .10);
    border-radius: 14px !important;
    margin-bottom: .9rem;
    overflow: hidden;
    box-shadow: 0 10px 26px -20px rgba(20, 50, 64, .5);
}
.faq-accordion .accordion-button {
    font-family: var(--font-titre);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-h1);
    padding: 1.05rem 1.2rem;
}
.faq-accordion .accordion-button:not(.collapsed) {
    color: var(--color-h2);
    box-shadow: none;
}
.faq-accordion .accordion-button:focus-visible {
    outline: 2px solid var(--color-info);
    outline-offset: 2px;
}
/* Chevron aux couleurs du thème */
.faq-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='%2317435C' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.faq-accordion .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='%232F7EA8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.faq-accordion .accordion-body {
    color: var(--color-texte-site);
    padding: 0 1.2rem 1.2rem;
}
.faq-accordion .accordion-body p:last-child { margin-bottom: 0; }

/* ==================== 9. HERO / SLIDER D'ACCUEIL ==================== */
/* Slider en fond (absolu) + contenu en flux : la hauteur s'adapte au
   texte, min-height garantit un grand hero. Le texte n'est jamais coupé. */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(500px, 82vh, 860px);
    padding: 5rem 0;
    overflow: hidden;
    background: var(--bg-header);
}
/* Repli sans image : dégradé de marque */
.hero--noimg {
    background: linear-gradient(135deg,
        var(--color-h1) 0%,
        color-mix(in srgb, var(--color-h2) 70%, var(--color-h1)) 100%);
}

/* Fond : le slider remplit tout le hero */
.hero__slider { position: absolute; inset: 0; }
.hero__slider,
.hero .carousel-inner,
.hero .carousel-item { height: 100%; }
.hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Voile dégradé pour la lisibilité du texte (plus dense à gauche/bas) */
.hero__slider::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .4) 45%, rgba(0, 0, 0, .08) 75%),
        linear-gradient(0deg, rgba(0, 0, 0, .5) 0%, transparent 40%);
    pointer-events: none;
}

/* Contenu (en flux, au-dessus du fond) */
.hero__overlay {
    position: relative;
    z-index: 3;
    width: 100%;
    pointer-events: none;
}
.hero__content {
    max-width: 640px;
    color: #fff;
    pointer-events: auto;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.hero__eyebrow {
    display: inline-block;
    font-family: var(--font-texte);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #fff;
    opacity: .9;
    margin-bottom: .9rem;
}
.hero__title {
    color: #fff;
    font-size: clamp(2rem, 1.2rem + 3.5vw, 3.6rem);
    line-height: 1.08;
    margin-bottom: 1rem;
}
.hero__text {
    font-size: 1.05rem;
    line-height: 1.6;
    opacity: .95;
}
.hero__text p:last-child { margin-bottom: 0; }

/* Contrôles du carousel */
.hero .carousel-control-prev,
.hero .carousel-control-next {
    z-index: 2;
    width: auto;
    opacity: 1;
}
.hero .carousel-control-prev { left: .5rem; }
.hero .carousel-control-next { right: .5rem; }
.hero__ctrl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 1.1rem;
    transition: background .2s ease, transform .2s ease;
}
.hero .carousel-control-prev:hover .hero__ctrl,
.hero .carousel-control-next:hover .hero__ctrl {
    background: var(--color-info);
    transform: scale(1.06);
}
.hero .carousel-indicators { z-index: 2; margin-bottom: 1.4rem; }
.hero .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .55);
    opacity: 1;
    transition: background .2s ease, transform .2s ease;
}
.hero .carousel-indicators .active {
    background: #fff;
    transform: scale(1.25);
}

@media (max-width: 767.98px) {
    .hero { min-height: 76vh; padding: 4rem 0 4.5rem; }
    .hero .carousel-control-prev,
    .hero .carousel-control-next { display: none; }
}