/* =====================================================================
   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; }

/* Classes héritées des anciens templates (carte cadeau, réservation) */
.btn-deep-pink {
    --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);
    --bs-btn-active-bg: var(--bg-hover-info);
    --bs-btn-active-border-color: var(--bg-hover-info);
    --bs-btn-active-color: var(--color-text-hover-info);
}
.btn-small { padding: .4rem 1.4rem; font-size: .9rem; }
.btn-block { display: block; width: 100%; }
.btn i[class^="ti-"] { margin-left: .4rem; vertical-align: -1px; }

/* ========================= 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: 320px;
    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); }

/* --- 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; }
}

/* ==================== 10. UTILITAIRES (espacements, graisses) ====================
   Classes héritées des anciens templates (m-t-20, margin-20px-bottom…),
   en complément des utilitaires Bootstrap (mt-*, mb-*, p-*).
   ================================================================================ */

/* Graisses */
.font-weight-300 { font-weight: 300 !important; }
.font-weight-400 { font-weight: 400 !important; }
.font-weight-500 { font-weight: 500 !important; }
.font-weight-600 { font-weight: 600 !important; }
.font-weight-700 { font-weight: 700 !important; }
.font-weight-800 { font-weight: 800 !important; }

/* Marges (0, 5, 10, 15, 20, 30, 40, 50 px) — pas de .m-5 : réservé à Bootstrap (3rem) */
.m-0    { margin: 0 !important; }
.m-10   { margin: 10px !important; }
.m-15   { margin: 15px !important; }
.m-20   { margin: 20px !important; }
.m-30   { margin: 30px !important; }
.m-40   { margin: 40px !important; }
.m-50   { margin: 50px !important; }

.m-t-0  { margin-top: 0 !important; }
.m-t-5  { margin-top: 5px !important; }
.m-t-10 { margin-top: 10px !important; }
.m-t-15 { margin-top: 15px !important; }
.m-t-20 { margin-top: 20px !important; }
.m-t-30 { margin-top: 30px !important; }
.m-t-40 { margin-top: 40px !important; }
.m-t-50 { margin-top: 50px !important; }

.m-b-0  { margin-bottom: 0 !important; }
.m-b-5  { margin-bottom: 5px !important; }
.m-b-10 { margin-bottom: 10px !important; }
.m-b-15 { margin-bottom: 15px !important; }
.m-b-20 { margin-bottom: 20px !important; }
.m-b-30 { margin-bottom: 30px !important; }
.m-b-40 { margin-bottom: 40px !important; }
.m-b-50 { margin-bottom: 50px !important; }

.m-l-0  { margin-left: 0 !important; }
.m-l-5  { margin-left: 5px !important; }
.m-l-10 { margin-left: 10px !important; }
.m-l-15 { margin-left: 15px !important; }
.m-l-20 { margin-left: 20px !important; }
.m-l-30 { margin-left: 30px !important; }
.m-l-40 { margin-left: 40px !important; }
.m-l-50 { margin-left: 50px !important; }

.m-r-0  { margin-right: 0 !important; }
.m-r-5  { margin-right: 5px !important; }
.m-r-10 { margin-right: 10px !important; }
.m-r-15 { margin-right: 15px !important; }
.m-r-20 { margin-right: 20px !important; }
.m-r-30 { margin-right: 30px !important; }
.m-r-40 { margin-right: 40px !important; }
.m-r-50 { margin-right: 50px !important; }

.m-x-0  { margin-left: 0 !important; margin-right: 0 !important; }
.m-x-5  { margin-left: 5px !important; margin-right: 5px !important; }
.m-x-10 { margin-left: 10px !important; margin-right: 10px !important; }
.m-x-15 { margin-left: 15px !important; margin-right: 15px !important; }
.m-x-20 { margin-left: 20px !important; margin-right: 20px !important; }
.m-x-30 { margin-left: 30px !important; margin-right: 30px !important; }
.m-x-40 { margin-left: 40px !important; margin-right: 40px !important; }
.m-x-50 { margin-left: 50px !important; margin-right: 50px !important; }

.m-y-0  { margin-top: 0 !important; margin-bottom: 0 !important; }
.m-y-5  { margin-top: 5px !important; margin-bottom: 5px !important; }
.m-y-10 { margin-top: 10px !important; margin-bottom: 10px !important; }
.m-y-15 { margin-top: 15px !important; margin-bottom: 15px !important; }
.m-y-20 { margin-top: 20px !important; margin-bottom: 20px !important; }
.m-y-30 { margin-top: 30px !important; margin-bottom: 30px !important; }
.m-y-40 { margin-top: 40px !important; margin-bottom: 40px !important; }
.m-y-50 { margin-top: 50px !important; margin-bottom: 50px !important; }

.margin-5px-bottom  { margin-bottom: 5px !important; }
.margin-10px-bottom { margin-bottom: 10px !important; }
.margin-20px-bottom { margin-bottom: 20px !important; }
.margin-30px-bottom { margin-bottom: 30px !important; }

/* Paddings (0, 5, 10, 15, 20, 30, 40, 50 px) — pas de .p-5 : réservé à Bootstrap (3rem) */
.p-0    { padding: 0 !important; }
.p-10   { padding: 10px !important; }
.p-15   { padding: 15px !important; }
.p-20   { padding: 20px !important; }
.p-30   { padding: 30px !important; }
.p-40   { padding: 40px !important; }
.p-50   { padding: 50px !important; }

.p-t-0  { padding-top: 0 !important; }
.p-t-5  { padding-top: 5px !important; }
.p-t-10 { padding-top: 10px !important; }
.p-t-15 { padding-top: 15px !important; }
.p-t-20 { padding-top: 20px !important; }
.p-t-30 { padding-top: 30px !important; }
.p-t-40 { padding-top: 40px !important; }
.p-t-50 { padding-top: 50px !important; }

.p-b-0  { padding-bottom: 0 !important; }
.p-b-5  { padding-bottom: 5px !important; }
.p-b-10 { padding-bottom: 10px !important; }
.p-b-15 { padding-bottom: 15px !important; }
.p-b-20 { padding-bottom: 20px !important; }
.p-b-30 { padding-bottom: 30px !important; }
.p-b-40 { padding-bottom: 40px !important; }
.p-b-50 { padding-bottom: 50px !important; }

.p-l-0  { padding-left: 0 !important; }
.p-l-5  { padding-left: 5px !important; }
.p-l-10 { padding-left: 10px !important; }
.p-l-15 { padding-left: 15px !important; }
.p-l-20 { padding-left: 20px !important; }
.p-l-30 { padding-left: 30px !important; }
.p-l-40 { padding-left: 40px !important; }
.p-l-50 { padding-left: 50px !important; }

.p-r-0  { padding-right: 0 !important; }
.p-r-5  { padding-right: 5px !important; }
.p-r-10 { padding-right: 10px !important; }
.p-r-15 { padding-right: 15px !important; }
.p-r-20 { padding-right: 20px !important; }
.p-r-30 { padding-right: 30px !important; }
.p-r-40 { padding-right: 40px !important; }
.p-r-50 { padding-right: 50px !important; }

.p-x-0  { padding-left: 0 !important; padding-right: 0 !important; }
.p-x-5  { padding-left: 5px !important; padding-right: 5px !important; }
.p-x-10 { padding-left: 10px !important; padding-right: 10px !important; }
.p-x-15 { padding-left: 15px !important; padding-right: 15px !important; }
.p-x-20 { padding-left: 20px !important; padding-right: 20px !important; }
.p-x-30 { padding-left: 30px !important; padding-right: 30px !important; }
.p-x-40 { padding-left: 40px !important; padding-right: 40px !important; }
.p-x-50 { padding-left: 50px !important; padding-right: 50px !important; }

.p-y-0  { padding-top: 0 !important; padding-bottom: 0 !important; }
.p-y-5  { padding-top: 5px !important; padding-bottom: 5px !important; }
.p-y-10 { padding-top: 10px !important; padding-bottom: 10px !important; }
.p-y-15 { padding-top: 15px !important; padding-bottom: 15px !important; }
.p-y-20 { padding-top: 20px !important; padding-bottom: 20px !important; }
.p-y-30 { padding-top: 30px !important; padding-bottom: 30px !important; }
.p-y-40 { padding-top: 40px !important; padding-bottom: 40px !important; }
.p-y-50 { padding-top: 50px !important; padding-bottom: 50px !important; }

.padding-fourteen-all { padding: 14px !important; }
.w-200px    { width: 200px; }
.h-200px    { height: 200px; }

.h-10px  { height: 10px; }
.margin-10px-top { margin-top: 10px; }

.card {
    margin-bottom: 20px;
    border: 0px;
}
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .25rem;
}

/* Divers */
.text-large { font-size: 1.125rem; }
.w-300px    { width: 300px; max-width: 100%; }