.custom-banner-black-top::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Ajustez la hauteur selon vos besoins */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.6) 0%,   /* Noir à 60% d'opacité en haut */
        rgba(0, 0, 0, 0.1) 100%    /* Totalement transparent à la fin */
    );
    z-index: 0; /* Place le dégradé au-dessus de l'image */
}

.text-dotted {
  display: flex;       /* Aligne les pointillés et le texte sur la même ligne */
  align-items: center; /* Centre verticalement les pointillés par rapport au texte */
  text-align: center;
  width: 100%;         /* S'occupe de prendre toute la largeur du bord à l'autre */
}

.text-dotted::before,
.text-dotted::after {
  content: "";
  flex: 1;             /* Force les pointillés à prendre tout l'espace vide disponible */
  border-bottom: 2px dotted var(--base-color); /* Crée les pointillés (change 'dotted' par 'dashed' pour des tirets) */
  margin: 0 15px;      /* Crée l'espace entre le texte et les pointillés */
}

.fixed-actions-container {
  position: fixed;
  right: 30px;
  bottom: 10%;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.btn-circular-fixed {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
  position: relative;
  overflow: hidden; /* Coupe tout ce qui pourrait dépasser du rond */
}

.table-rotate { background-color: var(--base-color); }
.room-rotate { background-color: #c65d24; }
.gift-rotate { background-color: #6aaf50; }

.btn-circular-fixed svg {
  width: 100%; /* On reste à 100% pour que le texte soit contenu */
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  animation: rotationLente 12s linear infinite;
  pointer-events: none;
}

.btn-circular-fixed text {
  fill: white;
  /* On baisse la taille à 7.5px ou 8px pour que le texte ne se chevauche pas */
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.icon-center {
  position: absolute;
  color: white;
  font-size: 24px; /* Un peu plus petite pour laisser de la place au texte */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

@keyframes rotationLente {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.btn-circular-fixed:hover {
  transform: scale(1.1);
}

/* --- CONFIGURATION MOBILE (Ronds conservés) --- */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) and (max-width: 1400px) {

  .fixed-actions-container {
    right: 15px;      /* On les rapproche un peu du bord */
    bottom: 5%;       /* Un peu plus bas pour ne pas gêner la lecture */
    gap: 15px;        /* Espacement réduit entre les deux */
  }

  .btn-circular-fixed {
    width: 65px;      /* Taille réduite (au lieu de 80px) */
    height: 65px;     /* Taille réduite */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  }

  /* On ajuste le texte SVG pour qu'il reste lisible malgré la petite taille */
  .btn-circular-fixed text {
    font-size: 13px;  /* On augmente légèrement la taille relative */
    letter-spacing: 0.5px;
  }

  /* On réduit la taille de l'icône centrale pour l'équilibre */
  .icon-center {
    font-size: 18px;
  }

  /* Optionnel : on peut accélérer un peu la rotation sur mobile
     car le cercle est plus petit, cela dynamise le bouton */
  .btn-circular-fixed svg {
    animation-duration: 10s;
  }
}


/* On enlève les spins sur input number */
.qty-text {
    text-align: center;
    -moz-appearance: textfield;
}

/* Chrome, Safari, Edge, Opera */
.qty-text::-webkit-inner-spin-button,
.qty-text::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    display: none;
}

/* Cartes de menu : hauteur égale automatique + bouton toujours en bas */
.menu-cards-row.align-items-center {
    align-items: stretch !important;
}
.menu-cards-row .pricing-table {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.menu-cards-row .pricing-footer {
    margin-top: auto;
}

/* Espacement entre les catégories de la carte, maintenant toutes affichées à la suite */
.menu-category {
    margin-bottom: 40px;
    scroll-margin-top: var(--menu-anchor-offset, 120px); /* calculé en JS (header + barre des catégories) */
}
.menu-category:last-child {
    margin-bottom: 0;
}

/* Carte : barre des catégories. Fond et padding toujours présents pour que
   la barre garde exactement la même taille quand elle passe en fixed (JS). */
.menu-anchor-nav {
    background-color: var(--very-light-gray);
    padding-top: 12px;
    padding-bottom: 12px;
}
/* Ajoutée par le JS quand la barre atteint le header ; top/left/width
   sont calculés par le script */
.menu-anchor-nav.is-fixed {
    position: fixed;
    z-index: 90;
    margin-bottom: 0 !important;
    box-shadow: 0 8px 15px -8px rgba(0, 0, 0, .12);
}

@media (max-width: 767px) {
    .menu-anchor-nav {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding-bottom: 8px;
    }
    .menu-anchor-nav > li.nav-item {
        margin: 0 10px !important;
        flex: 0 0 auto;
        width: auto !important;
    }
    .menu-anchor-nav > li.nav-item > a.nav-link {
        display: inline-block !important;
        width: auto !important;
        flex: 0 0 auto;
        font-size: 16px !important;
    }
    .menu-anchor-nav::-webkit-scrollbar {
        height: 3px;
    }
    .menu-anchor-nav::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, .2);
        border-radius: 4px;
    }
}

@media (max-width: 991px) {
    .widget-text,
    .widget-text a {
        color: var(--dark-gray) !important;
    }
    .header-language-icon {
        margin-right: 15px;
    }
}

.section-link {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 6px;
}
.section-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--base-color);
    transition: width 0.3s ease, left 0.3s ease;
}
.section-link:hover::after,
.section-link.active::after {
    width: 100%;
    left: 0;
}


/* Bloc "L'hôtel" (page d'accueil) : on fixe la hauteur du panneau chambre
   (image + description) à une valeur proche de la hauteur des 3 onglets à
   gauche, au lieu de laisser le texte (de longueur variable selon la chambre)
   dicter la hauteur de toute la ligne.
   On applique une hauteur explicite (pas un pourcentage) directement sur
   l'image et sur le bloc de texte : ça évite de dépendre de la résolution
   des height:100% en cascade des parents, qui pouvait faire disparaître
   l'image si un des conteneurs intermédiaires n'avait pas de hauteur définie.
   Si l'écart avec les 3 boutons n'est pas parfait, ajustez simplement la
   valeur de --hotel-room-block-height ci-dessous après vérification visuelle. */
@media (min-width: 768px) {
    .hotel-rooms-row {
        --hotel-room-block-height: 420px;
    }
    .hotel-rooms-row .tab-content,
    .hotel-rooms-row .tab-pane {
        max-height: var(--hotel-room-block-height);
        overflow: hidden;
    }
    .hotel-rooms-row .cover-background {
        height: var(--hotel-room-block-height) !important;
    }
    /* Colonne texte : hauteur fixe, avec scroll discret en secours si un
       texte de chambre est exceptionnellement long. */
    .hotel-rooms-row .bg-very-light-gray {
        height: var(--hotel-room-block-height) !important;
        overflow-y: auto;
    }
}

/* Page hotel.php : les 3 vignettes chambres (row-cols-md-2 => la 3e passe
   seule à la ligne entre 768px et 1200px). Sans hauteur fixe, chaque
   vignette prend la hauteur de son propre contenu (texte de longueur
   variable selon la chambre), donc la vignette isolée ne s'aligne pas
   visuellement avec les deux du dessus. On fixe une hauteur identique pour
   l'image et pour la zone de texte, quelle que soit la résolution.
   Si un texte dépasse, il devient scrollable au lieu d'agrandir la carte.
   Ajustez les valeurs ci-dessous après vérification visuelle. */
@media (min-width: 768px) {
    .hotel-room-vignettes {
        --hotel-room-card-img-height: 280px;
        --hotel-room-card-content-height: 380px;
    }
    .hotel-room-vignettes .hotel-room-card .swiper {
        height: var(--hotel-room-card-img-height) !important;
    }
    .hotel-room-vignettes .hotel-room-card .swiper-slide img {
        height: 100%;
        object-fit: cover;
    }
    .hotel-room-vignettes .hotel-room-card .content {
        height: var(--hotel-room-card-content-height) !important;
        overflow-y: auto;
        /* Barre de défilement masquée : le scroll reste actif en secours
           (molette/tactile) si un texte dépasse un jour la hauteur fixe,
           mais elle ne s'affiche plus visuellement. */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* Edge/IE legacy */
    }
    .hotel-room-vignettes .hotel-room-card .content::-webkit-scrollbar {
        display: none; /* Chrome/Safari/Edge Chromium */
    }
}

/* Pied de carte chambre (prix + bouton "Réservez") : les 2 colonnes Bootstrap
   étaient réparties à 50/50, donc sur tablette (2 vignettes par ligne) la
   colonne prix n'avait plus la place pour "/ nuit" et la colonne bouton pas
   assez de place pour "Réservez", qui se cassaient sur 2 lignes. Comme ce
   bloc n'a pas de hauteur fixe (contrairement à .content juste au-dessus),
   une carte avec du texte sur 2 lignes devenait plus haute que les autres :
   c'est ce qui causait le décalage de hauteur entre vignettes.
   On laisse la colonne prix se dimensionner à son contenu (au lieu d'un
   50/50 imposé) et on interdit le retour à la ligne sur le prix et le
   texte du bouton, quelle que soit la largeur d'écran. */
.hotel-room-vignettes .hotel-room-card .row.align-items-center > .col:first-child {
    flex: 0 0 auto;
    width: auto;
}
.hotel-room-vignettes .hotel-room-card h4 {
    white-space: nowrap;
}
.hotel-room-vignettes .hotel-room-card .btn-double-text {
    white-space: nowrap;
}

/* À partir de 768px (2 puis 3 vignettes par ligne selon la largeur), le
   prix + le bouton "Réservez" ne tiennent plus sur une seule ligne une
   fois le texte bloqué en nowrap : le bloc bouton (toute la colonne, pas
   juste le texte) bascule alors en dessous, laissant un vide au-dessus.
   La classe utilitaire du thème xl-ms-25px ne réduit la marge du bouton
   que jusqu'à 1399px, donc pas de limite haute ici non plus : le
   correctif reste actif sur toute cette plage (768px et au-delà), pas
   seulement jusqu'à 1199px. On interdit le retour à la ligne du bloc et
   on redonne un peu de place en réduisant la marge et le padding du
   bouton (aucun effet sur mobile où la vignette est seule sur sa ligne). */
@media (min-width: 768px) {
    .hotel-room-vignettes .hotel-room-card .row.align-items-center {
        flex-wrap: nowrap;
    }
    .hotel-room-vignettes .hotel-room-card .row.align-items-center .btn.ms-30px {
        margin-left: 10px !important;
    }
    .hotel-room-vignettes .hotel-room-card .btn.btn-switch-text.btn-medium > span {
        padding: 16px 18px;
    }
}

/* Les 3 cartes "Escapade" (Supérieure/Deluxe/Suite) n'ont pas de hauteur
   fixe : chaque carte ne prend que la hauteur de son propre contenu. Or
   les offres n'ont pas le même nombre d'avantages listés (5 ou 6) ni les
   mêmes textes, donc dès qu'une ligne passe à 2 lignes sur une carte et
   pas sur une autre, les 3 cartes n'ont plus la même hauteur.
   Bootstrap étire déjà les colonnes (.col) à la même hauteur par défaut,
   mais la boîte visible à l'intérieur ne suivait pas cette hauteur.
   On la fait remplir toute la colonne, et on colle le bloc bouton en bas
   (peu importe la longueur du texte au-dessus), pour que les 3 cartes
   soient toujours alignées visuellement quelle que soit la largeur d'écran. */
.services-box-style-03 {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.services-box-style-03 .bg-white {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.services-box-style-03 .bg-white > .border-top {
    margin-top: auto;
}

/* Le prix est à l'intérieur du même bloc que le titre/texte/avantages, donc
   il suit la hauteur naturelle de ce contenu (variable selon la carte) au
   lieu de rester à hauteur fixe juste au-dessus du bouton. On fait grandir
   ce bloc de contenu pour qu'il remplisse tout l'espace disponible au-dessus
   du bouton, puis on colle le prix en bas de ce bloc : le prix se retrouve
   ainsi toujours à la même hauteur, juste au-dessus du bouton, sur les 3 cartes. */
.services-box-style-03 .progress-bar-style-01 {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.services-box-style-03 .progress-bar-style-01 > .pt-20px {
    margin-top: auto;
}

.btn.btn-orange {
  background-color: #c65d24;
  border-color: #c65d24;
  color: #000000;
}
.btn.btn-orange:hover,
.btn.btn-orange:active {
  background-color: #c65d24;
  border-color: #c65d24;
  color: #000000;
}

.dish-desc {
    white-space: pre-line;
}

/* Icônes réseaux sociaux ajoutées dans le header, à gauche du sélecteur
   de langue, uniquement sur affichage PC (le menu mobile a déjà les
   siennes dans le bloc "Aux Etangs"). */
.header-social-icon-desktop a {
    font-size: 16px;
    margin-left: 16px;
}
.header-social-icon-desktop a:first-child {
    margin-left: 0;
}
.header-social-icon-desktop a:hover {
    opacity: 0.7;
}

/* Icônes réseaux sociaux dans le footer, sous le "© 2026 Aux Etangs". */
.footer-social-icon {
    margin-top: 10px;
}
.footer-social-icon a {
    font-size: 16px;
    margin-right: 16px;
}
.footer-social-icon a:last-child {
    margin-right: 0;
}
.footer-social-icon a:hover {
    opacity: 0.6;
}

/* Menu mobile : texte des liens de navigation encore plus grand et gras,
   uniquement en dessous de 992px — le desktop ne change pas.
   Le menu mobile réel est un CLONE de .navbar-collapse (voir main.js
   ligne 92), inséré hors de <nav class="navbar">, donc le sélecteur ne
   doit PAS exiger d'ancêtre .navbar (sinon il ne matche que la version
   d'origine cachée, jamais le clone visible sur mobile). */
@media (max-width: 991.98px) {
    .navbar-nav .nav-link {
        font-size: 26px !important;
        font-weight: 800 !important;
    }
}

.hero-video-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: -1;
}
.hero-video-bg .hero-video {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#home {
    z-index: 0;
}

.btn.section-link::after {
    display: none;
}

/* ==========================================================================
   Notification "ajouté au panier" (voir _include/cart_toast.php)
   Encart sombre en haut à droite, sous la barre de navigation : la position
   verticale (--cart-toast-top) est calculée en JS selon la hauteur du menu.
   ========================================================================== */
.cart-toast {
    position: fixed;
    top: var(--cart-toast-top, 24px);
    right: 24px;
    z-index: 1050;
    box-sizing: border-box;
    width: 370px;
    max-width: calc(100vw - 24px);
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 44px 22px 20px;
    background: var(--dark-gray, #232323);
    color: #fff;
    border-radius: 6px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28), 0 4px 14px rgba(0, 0, 0, .18);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateX(28px);
    transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .55s;
}
.cart-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}

/* Pastille dorée + coche qui se dessine à l'apparition */
.cart-toast__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--base-color, #ac8d56);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cart-toast__icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.cart-toast__icon path {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
}
.cart-toast.is-visible .cart-toast__icon path {
    animation: cartToastCheck .45s ease-out .35s forwards;
}

.cart-toast__body {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.35;
}
.cart-toast__title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--base-color, #ac8d56);
    margin-bottom: 3px;
}
.cart-toast__name {
    display: block;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
}
.cart-toast__meta {
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, .65);
    margin-top: 3px;
}
.cart-toast__link,
.cart-toast__link:visited {
    display: inline-block;
    margin-top: 14px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--base-color, #ac8d56);
    border-radius: 4px;
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease;
}
.cart-toast__link:hover,
.cart-toast__link:focus {
    background: #fff;
    color: var(--dark-gray, #232323);
}

.cart-toast__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, .6);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease;
}
.cart-toast__close:hover,
.cart-toast__close:focus {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}
.cart-toast__link:focus-visible,
.cart-toast__close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Filet doré qui se vide : temps restant avant fermeture automatique.
   Survol ou focus clavier = pause. */
.cart-toast__timer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: var(--base-color, #ac8d56);
    transform-origin: left center;
}
.cart-toast.is-visible .cart-toast__timer {
    animation: cartToastTimer 7s linear .4s forwards;
}
.cart-toast:hover .cart-toast__timer,
.cart-toast:focus-within .cart-toast__timer {
    animation-play-state: paused;
}

@keyframes cartToastCheck {
    to { stroke-dashoffset: 0; }
}
@keyframes cartToastTimer {
    to { transform: scaleX(0); }
}

@media (max-width: 575px) {
    .cart-toast {
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        transform: translateY(-16px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .cart-toast,
    .cart-toast.is-visible {
        transform: none;
        transition: opacity .2s linear, visibility 0s;
    }
    .cart-toast__icon path {
        stroke-dashoffset: 0;
    }
    .cart-toast.is-visible .cart-toast__icon path {
        animation: none;
    }
}

/* ==========================================================================
   Carte événement avec plusieurs formules (voir cardEvent() dans function.php)
   ========================================================================== */

/* Pastille de prix : "à partir de" au-dessus du prix le plus bas */
.event-price-from {
    flex-direction: column;
    line-height: 1.1;
}
.event-price-from-label {
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    opacity: .8;
    text-transform: lowercase;
    white-space: nowrap;
}

/* Liste déroulante des formules, au-dessus du bouton "Réservez" */
.event-tarif-select {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 10px 38px 10px 14px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--dark-gray);
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23232323' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    text-overflow: ellipsis;
}
.event-tarif-select:focus {
    border-color: var(--base-color);
    outline: 0;
}

/* ==========================================================================
   Page événements : grille de cartes à hauteur égale par ligne
   Le thème place les cartes avec Isotope (masonry) : positions absolues
   calculées en JS, donc chaque carte garde sa propre hauteur. On remplace ce
   placement par une grille CSS : toutes les cartes d'une ligne prennent la
   hauteur de la plus haute. Les !important sont nécessaires car Isotope écrit
   position/top/left/height en style inline sur les éléments.
   Les filtres continuent de fonctionner (Isotope masque les cartes filtrées
   en display:none), seule l'animation de glissement est perdue.
   ========================================================================== */
.events-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: auto !important;
}
.events-grid > li {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
}
.events-grid > li.grid-sizer {
    display: none !important;
}
/* Message "aucun événement" : toute la largeur */
.events-grid > li.w-100 {
    grid-column: 1 / -1;
}
/* La carte remplit toute la hauteur de sa cellule */
.events-grid > li > :first-child {
    height: 100%;
}

@media (max-width: 1199.98px) {
    .events-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 767.98px) {
    .events-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* Cartes événements : heure / places / bouton "Réservez" alignés en bas.
   Structure de cardEvent() (function.php) :
   .services-box-style-06
     ├─ .image
     └─ .bg-white
          ├─ pastille prix (position absolute, hors flux)
          ├─ bloc texte (.border-bottom)   <- prend tout l'espace libre
          ├─ ligne heure + places
          └─ bloc formules + bouton
   Le bloc texte grandit pour remplir la carte : le trait de séparation,
   l'heure, les places et le bouton se retrouvent à la même hauteur sur
   toutes les cartes d'une ligne. */
.events-grid .services-box-style-06 {
    display: flex;
    flex-direction: column;
}
.events-grid .services-box-style-06 > .image {
    flex: 0 0 auto;
}
.events-grid .services-box-style-06 > .bg-white {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.events-grid .services-box-style-06 > .bg-white > .border-bottom {
    flex: 1 1 auto;
}

/* Cartes légèrement floues : Isotope laisse un "transform" en style inline
   sur chaque carte (scale(1) pour les cartes visibles). Une carte avec un
   transform est rendue comme un calque à part, et si elle tombe sur une
   position à virgule (la 2e colonne d'une grille de 3 commence par exemple
   à 433,33px), le navigateur la lisse et le texte paraît flou.
   On n'en a plus besoin puisque c'est la grille CSS qui place les cartes.
   Les filtres marchent toujours : les cartes masquées disparaissent en
   fondu au lieu de rétrécir. */
.events-grid > li {
    transform: none !important;
}

/* Page hotel.php : image du petit déjeuner trop haute. On limite sa hauteur
   et on recadre l'image (object-fit: cover) pour éviter de la déformer.
   Ajustez la valeur après vérification visuelle. */
.hotel-breakfast-img {
    max-height: 450px;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 767px) {
    .hotel-breakfast-img {
        max-height: 300px;
    }
}

/* Hôtel — Escapade aux Étangs : prix toujours alignés à droite, le libellé passe à la ligne si besoin */
.hotel-escapade-price { gap: 12px; }
.hotel-escapade-name { min-width: 0; line-height: 1.35; }
.hotel-escapade-amount { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 575px) {
    .hotel-escapade-price { padding-left: 16px !important; padding-right: 16px !important; }
    .hotel-escapade-name { font-size: 15px; }
    .hotel-escapade-amount { font-size: 18px !important; }
}

/* Hôtel — bouton « Réservez une chambre » du petit-déjeuner : espace avant la photo quand elle passe dessous */
@media (max-width: 991px) {
    .hotel-breakfast-cta { margin-bottom: 30px; }
}

/* Panier / commande : condition d'utilisation du bon cadeau */
.gift-single-use-note { font-style: italic; opacity: .85; }

/* Commande : case « facture au nom d'une société » mise en évidence au-dessus du formulaire */
.checkout-invoice-toggle { background: #f7f4ee; border: 1px solid #e8e1d3; border-radius: 6px; padding: 14px 18px; margin-bottom: 25px; }
.checkout-invoice-toggle label { margin: 0; cursor: pointer; }

/* Page Bar */
/* ==========================================================================
   Page Bar (maquette « Aux Étangs, côté bar »)
   Panneaux colorés : Veuve Clicquot (crème), Davide Campari (brun),
   réservation (vert), événements (sauge).
   ========================================================================== */
.bar-anchor { scroll-margin-top: 90px; }

.bar-scene-img { min-height: 420px; object-fit: cover; display: block; }
.bar-scene-clicquot { background-color: #f2e9cd; color: #242d22; }
.bar-scene-campari  { background-color: #332526; color: #fff8ea; }
.bar-scene-clicquot .bar-scene-title,
.bar-scene-clicquot .bar-menu-item span { color: #242d22; }
.bar-scene-campari .bar-scene-title,
.bar-scene-campari .bar-menu-item span,
.bar-scene-campari p,
.bar-scene-campari summary { color: #fff8ea; }
.bar-scene-tag { opacity: .7; }
.bar-scene-campari p { opacity: .85; }

/* Carte repliable « Un aperçu de la carte… » */
.bar-menu-details { border-top: 1px solid currentColor; padding-top: 18px; }
.bar-scene-clicquot .bar-menu-details { border-color: rgba(36, 45, 34, .25); }
.bar-scene-campari .bar-menu-details { border-color: rgba(255, 248, 234, .25); }
.bar-menu-details summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
.bar-menu-details summary::-webkit-details-marker { display: none; }
.bar-menu-details summary::before { content: "\25B8"; transition: transform .25s ease; }
.bar-menu-details[open] summary::before { transform: rotate(90deg); }
.bar-menu-item { border-left: 2px solid var(--base-color); }

.bar-bite-img { aspect-ratio: 4 / 3; object-fit: cover; }
.bar-moment i { font-size: 48px; }

.bar-cta { background-color: #25392f; }

/* Horaires du bar : jours en pastilles, samedi barré et grisé
   (jours définis par $barDays dans bar.php) */
.bar-hours-days { gap: 12px; padding: 0; }
.bar-hours-day {
    min-width: 120px;
    padding: 10px 22px;
    border: 1px solid var(--base-color);
    border-radius: 50px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
}
.bar-hours-day.is-open { background-color: var(--base-color); color: #fff; }
.bar-hours-day.is-closed {
    color: rgba(35, 35, 35, .4);
    border-color: rgba(35, 35, 35, .15);
    text-decoration: line-through;
}
.bar-hours-note { opacity: .8; }

/* ==========================================================================
   Agenda du bar : popup (bar.php, #barAgendaModal)
   Calendrier à gauche, demande à droite ; une seule colonne sur mobile.
   Mise en page en CSS grid propre à la popup (pas de .row/.col du thème) et
   champs remis à zéro : le thème ajoute marges/hauteurs aux input/select.
   ========================================================================== */
.bar-agenda-lock,
.bar-agenda-lock body { overflow: hidden !important; }

.bar-agenda-modal {
    position: fixed;
    inset: 0;
    z-index: 10050; /* au-dessus du header et des ronds fixes (9999) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    opacity: 0;
    transition: opacity .25s ease;
}
.bar-agenda-modal[hidden] { display: none; }
.bar-agenda-modal.is-open { opacity: 1; }
.bar-agenda-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 24, 21, .72);
    cursor: pointer;
}
.bar-agenda-dialog {
    position: relative;
    width: 100%;
    max-width: 1040px;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
    transform: translateY(16px);
    transition: transform .3s cubic-bezier(.2, .8, .2, 1);
    -webkit-overflow-scrolling: touch;
}
.bar-agenda-modal.is-open .bar-agenda-dialog { transform: none; }
.bar-agenda-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: var(--dark-gray);
    font-size: 28px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}
.bar-agenda-close:hover { background: #f1efea; }

.bar-agenda {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.bar-agenda-cal { padding: 40px; min-width: 0; }
.bar-agenda-side { padding: 40px; min-width: 0; background-color: #f7f4ee; }

.bar-agenda-kicker {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--base-color);
}
.bar-agenda-title {
    display: block;
    margin-bottom: 20px;
    font-family: var(--alt-font, inherit);
    font-size: 28px;
    line-height: 1.2;
    color: var(--dark-gray);
}
.bar-agenda-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}
.bar-agenda-month {
    font-family: var(--alt-font, inherit);
    font-size: 22px;
    color: var(--dark-gray);
    text-transform: capitalize;
}
.bar-agenda-nav {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #e4dccb;
    border-radius: 50%;
    background: #fff;
    color: var(--dark-gray);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}
.bar-agenda-nav:hover:not(:disabled) { border-color: var(--base-color); background-color: #f7f4ee; }
.bar-agenda-nav:disabled { opacity: .3; cursor: default; }

.bar-agenda-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}
.bar-agenda-wd {
    padding-bottom: 4px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: rgba(35, 35, 35, .5);
}
.bar-agenda-day {
    height: 46px;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    color: var(--dark-gray);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.bar-agenda-day.is-closed { color: rgba(35, 35, 35, .25); cursor: default; }
.bar-agenda-day.is-full { color: rgba(35, 35, 35, .4); text-decoration: line-through; background-color: #f1efea; cursor: not-allowed; }
.bar-agenda-day.is-open { background-color: rgba(172, 141, 86, .14); border-color: rgba(172, 141, 86, .35); cursor: pointer; font-weight: 600; }
.bar-agenda-day.is-open:hover { background-color: rgba(172, 141, 86, .28); }
.bar-agenda-day.is-selected,
.bar-agenda-day.is-selected:hover { background-color: var(--base-color); border-color: var(--base-color); color: #fff; }
.bar-agenda-day.is-today { box-shadow: inset 0 -3px 0 rgba(35, 35, 35, .35); }
.bar-agenda-day:focus-visible { outline: 2px solid var(--dark-gray); outline-offset: 2px; }

.bar-agenda-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; font-size: 14px; line-height: 1.4; }
.bar-agenda-legend span { display: inline-flex; align-items: center; gap: 8px; }
.bar-agenda-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.bar-agenda-legend i.is-open { background-color: rgba(172, 141, 86, .3); border: 1px solid rgba(172, 141, 86, .6); }
.bar-agenda-legend i.is-full { background-color: #e6e3dc; }
.bar-agenda-legend i.is-closed { border: 1px solid rgba(35, 35, 35, .2); }

.bar-agenda-chosen {
    margin: 0 0 2px;
    font-family: var(--alt-font, inherit);
    font-size: 22px;
    line-height: 1.3;
    color: var(--dark-gray);
}
.bar-agenda-remaining { min-height: 22px; margin: 0 0 14px; font-size: 14px; line-height: 1.5; }

.bar-agenda-fieldgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.bar-agenda-field { min-width: 0; }
.bar-agenda-field.is-wide { grid-column: 1 / -1; }
.bar-agenda-label {
    display: block;
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--dark-gray);
}
.bar-agenda .bar-agenda-input {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 9px 12px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--dark-gray);
    background-color: #fff;
    border: 1px solid #e4dccb;
    border-radius: 4px;
    box-shadow: none;
}
.bar-agenda .bar-agenda-input:focus { border-color: var(--base-color); outline: 0; }
.bar-agenda .bar-agenda-input:disabled { background-color: #f1efea; opacity: .7; cursor: not-allowed; }
.bar-agenda textarea.bar-agenda-input { resize: vertical; min-height: 64px; }
.bar-agenda-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bar-agenda-error { min-height: 20px; margin: 12px 0 10px; font-size: 14px; line-height: 1.4; color: #b4412b; }
.bar-agenda-submit.is-loading { opacity: .6; pointer-events: none; }
.bar-agenda-submit:disabled { opacity: .5; }
.bar-agenda-note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; opacity: .75; }

.bar-agenda-success { padding-top: 30px; text-align: center; }
.bar-agenda-success p { margin-bottom: 25px; }
.bar-agenda-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    border-radius: 50%;
    background-color: var(--base-color);
    color: #fff;
    font-size: 30px;
}

@media (max-width: 991px) {
    .bar-agenda-cal, .bar-agenda-side { padding: 30px; }
}
/* Tablette / mobile : une colonne, popup plein écran */
@media (max-width: 767px) {
    .bar-agenda-modal { padding: 0; align-items: stretch; }
    .bar-agenda-dialog { max-width: none; max-height: none; height: 100%; border-radius: 0; }
    .bar-agenda { grid-template-columns: minmax(0, 1fr); }
    .bar-agenda-cal { padding: 24px 18px 20px; }
    .bar-agenda-side { padding: 24px 18px 30px; }
    .bar-agenda-title { font-size: 24px; padding-right: 40px; }
    .bar-agenda-grid { gap: 4px; }
    .bar-agenda-day { height: 40px; font-size: 15px; }
}
@media (max-width: 400px) {
    .bar-agenda-fieldgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .bar-agenda-modal, .bar-agenda-dialog { transition: none; }
}

.bar-events { background-color: #e8e8dc; }
.bar-events-img { height: 460px; object-fit: cover; }

@media (max-width: 991px) {
    .bar-scene-img { min-height: 0; height: 360px; }
    .bar-events-img { height: 360px; }
}
@media (max-width: 575px) {
    .bar-scene-img, .bar-events-img { height: 280px; }
    .bar-hours-days { gap: 8px; }
    .bar-hours-day { min-width: 0; padding: 8px 16px; font-size: 15px; }
}

/* ==========================================================================
   Menu mobile (plein écran, fond doré) : liens en grand avec filet + flèche,
   3 boutons ronds à texte tournant, pied « Herve · Belgique » + réseaux.
   Uniquement sous 992px : le desktop ne change pas.
   Rappel : le menu visible sur mobile est un CLONE de .navbar-collapse
   (main.js), placé hors de <nav class="navbar"> -> pas d'ancêtre .navbar
   dans les sélecteurs. Les !important passent devant le thème.
   ========================================================================== */
.mm-svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

@media (max-width: 991.98px) {
    .navbar-nav:has(.mobile-menu-extra) {
        align-items: stretch !important;
        text-align: left !important;
        width: 100%;
        max-width: 560px;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 8px !important;
    }

    /* Liens : grand serif, filet blanc dessous, flèche à droite */
    .navbar-nav > .nav-item {
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, .55);
        text-align: left !important;
    }
    .navbar-nav > .nav-item > .nav-link {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 14px 0 12px !important;
        font-size: 32px !important;
        font-weight: 500 !important;
        line-height: 1.15 !important;
        letter-spacing: -.5px;
        color: #fff !important;
        opacity: 1 !important;
    }
    .navbar-nav > .nav-item > .nav-link::after {
        content: "";
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
        margin-left: 16px;
        border: 0;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h18M14 5l7 7-7 7'/%3E%3C/svg%3E") no-repeat center / contain;
        transition: transform .25s ease;
    }
    .navbar-nav > .nav-item > .nav-link:hover::after,
    .navbar-nav > .nav-item > .nav-link:focus::after {
        transform: translateX(5px);
    }

    /* Bloc sous les liens */
    .mobile-menu-extra {
        width: 100%;
        list-style: none;
        border: 0 !important;
    }

    /* 3 boutons ronds */
    .mobile-menu-ctas {
        display: flex;
        justify-content: center;
        gap: 30px;
        margin-top: 40px;
    }
    .mobile-menu-cta {
        position: relative;
        flex: 0 0 70px;
        width: 70px;      /* même taille que les ronds fixes sur mobile */
        height: 70px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff !important;
        text-decoration: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
        transition: transform .3s ease;
    }
    .mobile-menu-cta:hover,
    .mobile-menu-cta:focus {
        transform: scale(1.06);
    }
    /* Le doré du bouton « table » = le fond du menu : léger contour pour le détacher */
    .mobile-menu-cta.table-rotate {
        box-shadow: 0 4px 12px rgba(0, 0, 0, .2), inset 0 0 0 1px rgba(255, 255, 255, .25);
    }
    .mobile-menu-cta svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
        animation: rotationLente 10s linear infinite;
        pointer-events: none;
    }
    .mobile-menu-cta text {
        fill: #fff;
        font-family: inherit;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .5px;
        text-transform: uppercase;
    }
    .mobile-menu-cta i {
        position: relative;
        font-size: 18px;
        line-height: 1;
    }

    /* Pied : lieu + réseaux sociaux */
    .mobile-menu-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 44px;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, .55);
        color: #fff;
        font-size: 18px;
    }
    .mobile-menu-social a {
        color: #fff !important;
        font-size: 28px;
        margin-left: 20px;
    }
    .mobile-menu-social a:hover {
        opacity: .7;
    }
}

@media (max-width: 400px) {
    .navbar-nav > .nav-item > .nav-link {
        font-size: 27px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-menu-cta svg {
        animation: none;
    }
}

/* Menu mobile ouvert : on masque les ronds fixes de la page (sinon on les
   voit en double avec ceux du menu). Plusieurs détections, en règles
   séparées : classe posée par le thème sur <body>, ou menu/bouton ouvert. */
body.navbar-collapse-show .fixed-actions-container {
    display: none !important;
}
body:has(.navbar-collapse.show) .fixed-actions-container {
    display: none !important;
}
body:has(.navbar-toggler[aria-expanded="true"]) .fixed-actions-container {
    display: none !important;
}

/* Accueil : le titre « about » est devenu le H1 de la page,
   mais il garde l'apparence d'un H2 du thème */
.home-about-title {
    font-size: 3.438rem;   /* à aligner sur le h2 du thème */
    line-height: 3.438rem;
}
@media (max-width: 991px) {
    .home-about-title { font-size: 2.813rem; line-height: 2.813rem; }
}
@media (max-width: 767px) {
    .home-about-title { font-size: 2.188rem; line-height: 2.188rem; }
}
/* Accueil, banner mobile : le tag monte en haut (sous le menu) et le bouton
   « Découvrir notre univers » descend en bas de la vidéo, au-dessus de l'icône souris.
   La colonne perd son position:relative : le bouton se place alors par rapport
   à la section #home, comme l'icône souris. PC/tablette : inchangé (centré). */
@media (max-width: 767.98px) {
    .home-hero-content {
        position: static !important;
        align-self: flex-start;
        padding-top: 110px; /* distance sous le menu : ajuster ici */
    }
    .home-hero-content > span {
        position: relative;
        z-index: 1;
        margin-bottom: 0 !important;
    }
    .home-hero-cta {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100px; /* distance depuis le bas du banner : ajuster ici */
    }
}


/* ==========================================================================
   Page Réceptions (maquette « Vos réceptions Aux Étangs »)
   Préfixe rcp-. Vert = celui du bar (#25392f), crème = #f7f4ee.
   La popup « demande prête » réutilise les classes .bar-agenda-modal.
   ========================================================================== */
.rcp-anchor { scroll-margin-top: 90px; }
.rcp-cream { background-color: #f7f4ee; }
.rcp-dark { background-color: #25392f; color: rgba(255, 255, 255, .8); }
.rcp-accent-light { color: #d8c39a; }
.rcp-muted { color: rgba(255, 255, 255, .7); }

/* Les liens d'ancre gardent .section-link (défilement du thème) sans son style de menu */
.rcp-universe.section-link,
.rcp-scope-link.section-link,
.rcp-text-link.section-link {
    text-transform: none;
    letter-spacing: normal;
    padding-bottom: 0;
}
.rcp-universe.section-link::after,
.rcp-scope-link.section-link::after,
.rcp-text-link.section-link::after { display: none; }

/* Petit libellé en capitales */
.rcp-kicker {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--base-color);
}

/* Lien texte avec flèche */
.rcp-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--dark-gray);
    border-bottom: 1px solid var(--base-color);
    padding-bottom: 3px;
    cursor: pointer;
}
.rcp-text-link i { transition: transform .25s ease; }
.rcp-text-link:hover { color: var(--base-color); }
.rcp-text-link:hover i { transform: translateX(4px); }
.rcp-text-link.is-light { color: #fff; border-color: #d8c39a; }
.rcp-text-link.is-light:hover { color: #d8c39a; }
button.rcp-text-link { border-bottom: 1px solid var(--base-color) !important; }

.rcp-fineprint { font-size: 14px; line-height: 1.6; opacity: .75; }

/* --- Cartes univers --- */
.rcp-universe { color: inherit; }
.rcp-universe-img { aspect-ratio: 6 / 7; }
.rcp-universe-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}
.rcp-universe:hover .rcp-universe-img img { transform: scale(1.05); }
.rcp-universe-num {
    position: absolute;
    top: 18px;
    left: 22px;
    font-size: 26px;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.rcp-round-arrow {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    color: var(--dark-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: background-color .3s ease, color .3s ease, transform .3s ease;
}
.rcp-universe:hover .rcp-round-arrow { background: var(--base-color); color: #fff; transform: rotate(-45deg); }
.rcp-universe-text { color: var(--medium-gray, #828282); }

/* --- Titres de chapitre (01, 02, 03) --- */
.rcp-chapter { position: relative; }
.rcp-chapter-num {
    display: block;
    font-size: 110px;
    line-height: .9;
    margin-bottom: -28px;
    color: transparent;
    -webkit-text-stroke: 1px rgba(172, 141, 86, .55);
    user-select: none;
}
.rcp-dark .rcp-chapter-num { -webkit-text-stroke-color: rgba(216, 195, 154, .45); }

/* --- Mariage : visuel --- */
.rcp-wedding-visual { position: relative; padding-bottom: 70px; padding-right: 60px; }
.rcp-wedding-main { width: 100%; aspect-ratio: 6 / 7; object-fit: cover; display: block; }
.rcp-wedding-caption {
    position: absolute;
    top: 40px;
    left: -20px;
    padding: 22px 28px;
    background: #25392f;
    color: #fff;
    font-size: 26px;
    line-height: 1.2;
    border-radius: 4px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .18);
}
.rcp-wedding-caption .fst-italic { color: #d8c39a; }
.rcp-wedding-small {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 52%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border: 8px solid #fff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
}

.rcp-note-box {
    background: #f7f4ee;
    border-left: 3px solid var(--base-color);
    padding: 22px 26px;
    border-radius: 0 6px 6px 0;
}

/* --- Accordéons (<details>) --- */
.rcp-accordion { border-top: 1px solid #e4dccb; }
.rcp-accordion details { border-bottom: 1px solid #e4dccb; }
.rcp-accordion summary,
.rcp-accordion-single summary,
.rcp-details-light summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 0;
    list-style: none;
    cursor: pointer;
    color: var(--dark-gray);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.35;
}
.rcp-accordion summary::-webkit-details-marker,
.rcp-accordion-single summary::-webkit-details-marker,
.rcp-details-light summary::-webkit-details-marker { display: none; }
.rcp-summary-text { flex: 1 1 auto; }
.rcp-step-num { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--base-color); letter-spacing: 1px; }
.rcp-plus { position: relative; flex: 0 0 16px; width: 16px; height: 16px; }
.rcp-plus::before,
.rcp-plus::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 16px;
    height: 1.5px;
    background: currentColor;
    transition: transform .3s ease;
}
.rcp-plus::after { transform: rotate(90deg); }
details[open] > summary .rcp-plus::after { transform: rotate(0deg); }
.rcp-details-body { padding: 0 0 20px 0; line-height: 1.7; }
.rcp-accordion details:has(.rcp-step-num) .rcp-details-body { padding-left: 34px; }

.rcp-details-light { border-top: 1px solid rgba(255, 255, 255, .2); border-bottom: 1px solid rgba(255, 255, 255, .2); }
.rcp-details-light summary { color: #fff; font-size: 16px; }
.rcp-details-light .rcp-details-body { color: rgba(255, 255, 255, .75); font-size: 15px; }
.rcp-accordion-single { border-top: 1px solid #e4dccb; border-bottom: 1px solid #e4dccb; }
.rcp-accordion-single summary { font-size: 16px; padding: 14px 0; }
.rcp-accordion-single .rcp-details-body { font-size: 15px; }

/* --- Livret + budget --- */
.rcp-brochure {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 30px;
    background: #f7f4ee;
    border-radius: 6px;
    color: inherit;
    transition: box-shadow .3s ease;
}
.rcp-brochure:hover { box-shadow: 0 20px 50px rgba(0, 0, 0, .08); }
.rcp-brochure img {
    flex: 0 0 150px;
    width: 150px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, .2);
    transition: transform .4s ease, box-shadow .4s ease;
}
.rcp-brochure:hover img { transform: translateY(-6px); box-shadow: 0 25px 40px rgba(0, 0, 0, .25); }
.rcp-budget { padding: 30px 35px; border: 1px solid #e4dccb; border-radius: 6px; }

/* --- Réceptions privées --- */
.rcp-scope {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 24px 30px;
    background: #f7f4ee;
    border: 1px solid #e8e1d3;
    border-radius: 6px;
}
.rcp-scope-link { flex: 0 0 auto; text-align: right; }

.rcp-tabs { gap: 10px; }
.rcp-tabs .nav-link {
    padding: 12px 28px;
    border: 1px solid #e4dccb !important;
    border-radius: 50px !important;
    background: #fff;
    color: var(--dark-gray);
    font-size: 17px;
    font-weight: 500;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.rcp-tabs .nav-link:hover { border-color: var(--base-color) !important; }
.rcp-tabs .nav-link.active {
    background: var(--dark-gray);
    border-color: var(--dark-gray) !important;
    color: #fff;
}

.rcp-panel-photo { position: relative; min-height: 420px; }
.rcp-panel-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rcp-panel-label {
    position: absolute;
    left: 20px;
    bottom: 20px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, .92);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--dark-gray);
}
.rcp-panel-content { padding: 45px 50px; }

.rcp-price-rows { border-top: 1px solid #e4dccb; }
.rcp-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid #e4dccb;
}
.rcp-price-row.is-allin { background: linear-gradient(90deg, rgba(172, 141, 86, .1), rgba(172, 141, 86, 0)); padding-left: 14px; margin-left: -14px; }
.rcp-price-name { min-width: 0; }
.rcp-price-name small { display: block; font-size: 14px; line-height: 1.45; opacity: .75; }
.rcp-price-amount { flex: 0 0 auto; font-family: var(--alt-font, inherit); font-size: 26px; font-weight: 500; color: var(--base-color); white-space: nowrap; }

.rcp-big-price strong { font-family: var(--alt-font, inherit); font-size: 52px; font-weight: 500; line-height: 1; color: var(--base-color); }
.rcp-big-price span { font-size: 15px; opacity: .75; }

.rcp-check-list { list-style: none; padding: 0; }
.rcp-check-list li { display: flex; gap: 12px; padding: 7px 0; line-height: 1.5; }
.rcp-check-list i { flex: 0 0 auto; font-size: 18px; margin-top: 2px; }

.rcp-formula-footer,
.rcp-cta-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px 40px;
    flex-wrap: wrap;
}
.rcp-cta-line { padding-top: 35px; border-top: 1px solid #e4dccb; }
.rcp-cta-line.is-light { border-top-color: rgba(255, 255, 255, .2); }

/* --- Entreprises --- */
.rcp-seminars { padding: 40px 45px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 6px; }
.rcp-business-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.rcp-business-price:first-of-type { border-top: 1px solid rgba(255, 255, 255, .15); }
.rcp-business-price strong {
    flex: 0 0 auto;
    text-align: right;
    font-family: var(--alt-font, inherit);
    font-size: 30px;
    font-weight: 500;
    line-height: 1.1;
    color: #d8c39a;
    white-space: nowrap;
}
.rcp-business-price strong small {
    display: block;
    font-family: var(--primary-font, inherit);
    font-size: 12px;
    letter-spacing: .5px;
    color: rgba(255, 255, 255, .6);
}

.rcp-offer { padding: 40px 40px 35px; background: #f7f4ee; border-radius: 6px; color: var(--medium-gray, #828282); }
.rcp-offer-label {
    display: inline-block;
    padding: 6px 14px;
    background: var(--base-color);
    color: #fff;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.rcp-offer-price { font-family: var(--alt-font, inherit); font-size: 46px; line-height: 1; color: var(--base-color); }
.rcp-offer-price small { font-family: var(--primary-font, inherit); font-size: 14px; color: var(--medium-gray, #828282); }

/* --- Espaces --- */
.rcp-space { position: relative; height: 100%; min-height: 460px; border-radius: 6px; overflow: hidden; }
.rcp-space img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.rcp-space:hover img { transform: scale(1.04); }
.rcp-space figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 80px 30px 28px;
    background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0));
}

/* --- Hôtel --- */
.rcp-hotel { background: #f7f4ee; }
.rcp-hotel-img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; display: block; }
.rcp-hotel-content { max-width: 560px; padding: 70px 60px; }

/* --- Contact : demande --- */
.rcp-contact-direct a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #e4dccb;
    font-size: 19px;
    font-weight: 500;
    color: var(--dark-gray);
}
.rcp-contact-direct a:first-child { border-top: 1px solid #e4dccb; }
.rcp-contact-direct a:hover { color: var(--base-color); }
.rcp-contact-direct i { color: var(--base-color); }

.rcp-request { padding: 40px; background: #fff; border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, .06); }
.rcp-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rcp-field { min-width: 0; }
.rcp-field[hidden] { display: none; }
.rcp-field.is-wide,
.rcp-checkbox.is-wide { grid-column: 1 / -1; }
.rcp-label { display: block; margin: 0 0 5px; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--dark-gray); }
.rcp-label span { font-weight: 400; opacity: .6; }
.rcp-request .rcp-input {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 11px 14px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--dark-gray);
    background-color: #fff;
    border: 1px solid #e4dccb;
    border-radius: 4px;
    box-shadow: none;
}
.rcp-request .rcp-input:focus { border-color: var(--base-color); outline: 0; }
.rcp-request textarea.rcp-input { resize: vertical; min-height: 90px; }
.rcp-checkbox { display: flex; align-items: center; gap: 10px; margin: -4px 0 0; font-size: 14px; cursor: pointer; }
.rcp-checkbox input { width: 16px; height: 16px; margin: 0; accent-color: var(--base-color); }
.rcp-request-error { min-height: 20px; margin: 14px 0 12px; font-size: 14px; color: #b4412b; }

/* Formulaire de demande placé dans une popup (bar : « Privatiser le bar ») */
.rcp-request.is-plain { padding: 0; background: transparent; box-shadow: none; border-radius: 0; }
.bar-agenda-dialog.bar-private-dialog { max-width: 680px; }
.js-contact-submit.is-loading { opacity: .6; pointer-events: none; }
.rcp-request .bar-agenda-success { padding: 20px 0 10px; }

/* Popup (structure .bar-agenda-modal) */
.bar-agenda-dialog.rcp-request-dialog { max-width: 620px; padding: 45px 45px 35px; }

/* --- Responsive --- */
@media (max-width: 991px) {
    .rcp-chapter-num { font-size: 84px; margin-bottom: -20px; }
    .rcp-wedding-caption { left: 10px; font-size: 22px; }
    .rcp-panel-photo { min-height: 300px; }
    .rcp-panel-content { padding: 35px 30px; }
    .rcp-seminars, .rcp-offer { padding: 35px 30px; }
    .rcp-space { min-height: 360px; }
    .rcp-hotel-img { min-height: 360px; height: 360px; }
    .rcp-hotel-content { max-width: none; padding: 50px 30px; }
}
@media (max-width: 767px) {
    .rcp-scope { flex-direction: column; align-items: flex-start; }
    .rcp-scope-link { text-align: left; }
    .rcp-brochure { flex-direction: column; align-items: flex-start; }
    .rcp-tabs .nav-link { padding: 10px 20px; font-size: 15px; }
    .rcp-request { padding: 25px 20px; }
    .rcp-field-grid { grid-template-columns: minmax(0, 1fr); }
    .bar-agenda-dialog.rcp-request-dialog { padding: 60px 22px 30px; }
}
@media (max-width: 575px) {
    .rcp-chapter-num { font-size: 68px; margin-bottom: -16px; }
    .rcp-wedding-visual { padding-right: 30px; padding-bottom: 50px; }
    .rcp-wedding-caption { top: 20px; padding: 16px 20px; font-size: 19px; }
    .rcp-price-amount { font-size: 22px; }
    .rcp-business-price { flex-direction: column; align-items: flex-start; gap: 8px; }
    .rcp-business-price strong { text-align: left; }
    .rcp-space { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
    .rcp-universe-img img, .rcp-space img, .rcp-brochure img { transition: none; }
}


/* ==========================================================================
   Liseuse PDF « flipbook » (_include/flipbook.php + js/flipbook.js)
   Popup plein écran sombre : barre (titre, pages, télécharger, fermer),
   livre au centre, flèches sur les côtés.
   ========================================================================== */
.flipbook-lock,
.flipbook-lock body { overflow: hidden !important; }

.flipbook-modal {
    position: fixed;
    inset: 0;
    z-index: 10060; /* au-dessus du header, des ronds fixes et des autres popups */
    display: flex;
    flex-direction: column;
    background: #1b211e;
    opacity: 0;
    transition: opacity .25s ease;
}
.flipbook-modal[hidden] { display: none; }
.flipbook-modal.is-open { opacity: 1; }

.flipbook-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 20px 14px 28px;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.flipbook-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 22px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.flipbook-counter { flex: 0 0 auto; font-size: 14px; letter-spacing: .5px; color: rgba(255, 255, 255, .7); }
.flipbook-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.flipbook-download,
.flipbook-download:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    transition: background-color .2s ease, border-color .2s ease;
}
.flipbook-download:hover { background: var(--base-color); border-color: var(--base-color); color: #fff; }
.flipbook-close {
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 28px;
    line-height: 42px;
    text-align: center;
    cursor: pointer;
    transition: background-color .2s ease;
}
.flipbook-close:hover { background: rgba(255, 255, 255, .22); }

.flipbook-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.flipbook-holder { position: relative; max-width: 100%; }

/* Pages : fond crème + petit loader tant que l'image n'est pas prête */
.flipbook-page { background: #f7f4ee; overflow: hidden; }
.flipbook-page img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity .3s ease;
    user-select: none;
    -webkit-user-drag: none;
}
.flipbook-page.is-ready img { opacity: 1; }
/* Image aux mêmes proportions que la page : elle la remplit entièrement
   (évite un liseré crème à la reliure dû aux arrondis de taille) */
.flipbook-page.is-fill img { object-fit: fill; }
.flipbook-page:not(.is-ready)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 2px solid rgba(172, 141, 86, .25);
    border-top-color: var(--base-color);
    border-radius: 50%;
    animation: flipbookSpin .8s linear infinite;
}

.flipbook-nav {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 52px;
    height: 52px;
    margin-top: -26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease, opacity .2s ease;
}
.flipbook-nav:hover:not(:disabled) { background: var(--base-color); }
.flipbook-nav:disabled { opacity: .25; cursor: default; }
.flipbook-nav.is-prev { left: 24px; }
.flipbook-nav.is-next { right: 24px; }

.flipbook-status {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: rgba(255, 255, 255, .8);
    text-align: center;
    padding: 20px;
    pointer-events: none;
}
.flipbook-status[hidden] { display: none; }
.flipbook-status p { margin: 0; max-width: 420px; color: inherit; }
.flipbook-spinner {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, .2);
    border-top-color: var(--base-color);
    border-radius: 50%;
    animation: flipbookSpin .8s linear infinite;
}
.flipbook-status.is-error .flipbook-spinner { display: none; }
@keyframes flipbookSpin { to { transform: rotate(360deg); } }

/* Mobile : barre compacte, flèches en bas de l'écran (on tourne aussi en glissant) */
@media (max-width: 767px) {
    .flipbook-bar { flex-wrap: wrap; gap: 6px 12px; padding: 10px 12px 10px 16px; }
    .flipbook-title { flex: 1 1 0; font-size: 18px; }
    .flipbook-actions { order: 2; }
    .flipbook-counter { order: 3; flex: 1 1 100%; font-size: 13px; }
    .flipbook-download span { display: none; }
    .flipbook-download { padding: 8px 12px; }
    .flipbook-stage { padding-bottom: 70px; }
    .flipbook-nav { top: auto; bottom: 12px; margin-top: 0; width: 46px; height: 46px; }
    .flipbook-nav.is-prev { left: calc(50% - 60px); }
    .flipbook-nav.is-next { right: calc(50% - 60px); }
}
@media (prefers-reduced-motion: reduce) {
    .flipbook-modal, .flipbook-page img { transition: none; }
}

/* Accueil : carrousel des avis.
   Les bulles étaient en position absolute dans les 55px de padding du bas :
   selon la largeur d'écran ou les ombres des cartes, elles passaient sur
   les avis. On les remet dans le flux, sous les cartes : elles ne peuvent
   plus rien chevaucher. Le padding du haut garde la place pour l'ombre. */
#reviewsSwiper.reviews-swiper {
    padding: 20px 0 10px;
    margin-top: -20px;
}
#reviewsSwiper > .swiper-pagination-reviews {
    position: static !important;
    transform: none !important;
    width: 100%;
    margin-top: 35px;   /* espace entre les cartes et les bulles : ajuster ici */
    line-height: 1;
    text-align: center;
}


/* ==========================================================================
   Page d'un événement (evenement.php)
   ========================================================================== */
.event-page { padding-top: 80px; }
.event-back:hover { opacity: 1 !important; color: #fff; }
.event-page-image img { display: block; }

/* Texte riche saisi dans le CMS (HtmlContent : p, h2-h4, listes, citations, liens) */
.event-content { font-size: 17px; line-height: 1.75; }
.event-content > *:last-child { margin-bottom: 0; }
.event-content p { margin-bottom: 1.1em; }
.event-content h2,
.event-content h3,
.event-content h4 { color: var(--dark-gray); margin: 1.6em 0 .6em; line-height: 1.25; }
.event-content h2 { font-size: 32px; }
.event-content h3 { font-size: 24px; }
.event-content h4 { font-size: 20px; }
.event-content > h2:first-child,
.event-content > h3:first-child { margin-top: 0; }
.event-content ul,
.event-content ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.event-content ul > li { list-style: disc outside; }   /* le thème retire les puces des <li> */
.event-content ol > li { list-style: decimal outside; }
.event-content li { margin-bottom: .35em; }
.event-content ul li::marker { color: var(--base-color); }
.event-content blockquote {
    margin: 1.5em 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--base-color);
    font-size: 19px;
    font-style: italic;
    color: var(--dark-gray);
}
.event-content a { color: var(--base-color); text-decoration: underline; text-underline-offset: 3px; }
.event-content strong, .event-content b { color: var(--dark-gray); }

/* Document PDF */
.event-pdf { padding: 25px 30px; border: 1px solid #e4dccb; border-radius: 6px; }
.event-pdf-icon { font-size: 36px; line-height: 1; color: var(--base-color); }

/* Bloc réservation : reste visible au défilement sur grand écran */
.event-booking-facts li { display: flex !important; align-items: center; padding: 9px 0; border-bottom: 1px solid #e4dccb; color: var(--dark-gray); font-weight: 500; }
.event-booking-facts li:last-child { border-bottom: 0; }
.event-booking-facts i { flex: 0 0 20px; margin-right: 14px; color: var(--base-color); font-size: 18px; text-align: center; }
.event-booking .event-tarif-select { width: 100%; }
@media (min-width: 992px) {
    .event-booking { position: sticky; top: 120px; }
}
@media (max-width: 991px) {
    .event-page { padding-top: 50px; }
    .event-content { font-size: 16px; }
    .event-content h2 { font-size: 26px; }
}