/* ========================================
   Cigalia - Styles custom
   ======================================== */

html { scroll-behavior: smooth; }

/* Le header est en position fixe : sans cette marge, une section ciblée par une
   ancre se cale sous la barre et son titre disparaît. Vaut aussi bien pour les
   ancres internes que pour une arrivée directe sur /#suite depuis une autre page. */
section[id] { scroll-margin-top: 5.5rem; }
@media (min-width: 1024px) { section[id] { scroll-margin-top: 6.5rem; } }
#hero { scroll-margin-top: 0; }

body {
    background-color: #faf7f0;
    color: #3d2f25;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Texture papier très subtile */
.paper-grain {
    background-image:
        radial-gradient(circle at 25% 25%, rgba(111, 127, 109, 0.04) 1px, transparent 1px),
        radial-gradient(circle at 75% 75%, rgba(199, 127, 91, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Fade-in au scroll */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Nom Cigalia en hero : ombre douce pour lisibilité.
   La jambe du « g » descend sous sa ligne (interlignage collé au texte) : on
   réserve la place en em pour qu'elle ne touche pas la phrase du dessous,
   quelle que soit la taille du titre selon l'écran. */
.hero-title {
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
    padding-bottom: 0.22em;
}

/* Hover cards equipements */
.equip-card {
    transition: transform 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease;
}
.equip-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -15px rgba(61, 47, 37, 0.18);
    border-color: #6f7f6d;
}

/* Grid galerie */
.gallery-grid { grid-auto-rows: 180px; }
@media (min-width: 768px) { .gallery-grid { grid-auto-rows: 220px; } }

/* Scroll indicator */
.scroll-indicator { animation: bounce-slow 2.5s ease-in-out infinite; }

/* Back to top */
#back-to-top {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
    transform: translateY(10px);
}
#back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* ========================================
   Bandeau de couverture des pages intérieures
   (élément templates/element/entete_page.php)
   ======================================== */
.entete-page {
    min-height: clamp(400px, 52vh, 560px);
}

/* Le texte se cale sous la navbar, pas en bas du bandeau : tout l'espace sous
   lui est ainsi disponible pour un fondu long vers le crème de la page. */
.entete-page-contenu {
    padding-top: 7.5rem;
    padding-bottom: 8rem;
}

/* Léger travelling avant à l'ouverture : la photo respire sans distraire. */
.entete-page-image {
    animation: entete-page-zoom 14s ease-out forwards;
    transform-origin: center 55%;
}

@keyframes entete-page-zoom {
    from { transform: scale(1.1); }
    to { transform: scale(1); }
}

/* Deux couches distinctes, jamais interpolées l'une dans l'autre : passer
   directement d'un sombre transparent à un crème opaque dans un même dégradé
   traverse une zone grise sale, et sur une hauteur courte ça fait une barre.
   1. Dessous, le voile sombre : franc en haut pour la navbar et le titre, il
      s'éteint complètement avant le bas.
   2. Dessus, le fondu crème : il démarre à 60 % et prend les 40 % restants,
      soit ~200 px de transition. Le sombre s'efface pendant que le crème monte,
      la photo se dissout dans la page sans passer par une couture. */
.entete-page-voile {
    background:
        linear-gradient(
            to bottom,
            rgba(250, 247, 240, 0) 60%,
            rgba(250, 247, 240, 0.55) 84%,
            #faf7f0 100%
        ),
        linear-gradient(
            to bottom,
            rgba(23, 17, 12, 0.62) 0%,
            rgba(23, 17, 12, 0.48) 46%,
            rgba(23, 17, 12, 0.22) 74%,
            rgba(23, 17, 12, 0) 92%
        );
}

.entete-page-eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(250, 247, 240, 0.88);
    font-weight: 500;
    text-shadow: 0 1px 10px rgba(23, 17, 12, 0.45);
}

/* L'ombre portée est large et peu opaque : elle rattrape une photo claire sans
   se voir comme un contour. */
.entete-page-accroche {
    color: rgba(250, 247, 240, 0.94);
    text-shadow: 0 1px 16px rgba(23, 17, 12, 0.55);
}

.entete-page h1 {
    text-shadow: 0 2px 24px rgba(23, 17, 12, 0.35);
}

@media (max-width: 640px) {
    .entete-page-contenu {
        padding-top: 6.5rem;
        padding-bottom: 5.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .entete-page-image {
        animation: none;
        transform: none;
    }
}

/* Header transition */
#main-header { transition: background-color 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease; }
#main-header.scrolled {
    background-color: rgba(250, 247, 240, 0.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px -10px rgba(61, 47, 37, 0.15);
}
#main-header.scrolled .nav-link,
#main-header.scrolled .logo-text { color: #3d2f25; }
#main-header.scrolled .logo-text { color: #6f7f6d; }
#main-header.scrolled .burger-bar { background-color: #3d2f25; }

/* Mobile menu slide */
#mobile-menu {
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
#mobile-menu.open { transform: translateX(0); }

/* Lightbox */
#lightbox {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
#lightbox.open {
    opacity: 1;
    pointer-events: auto;
}

/* La grande version met parfois un instant à arriver : on l'atténue le temps
   du chargement pour que le défilement reste lisible. */
.lightbox-image {
    transition: opacity 0.25s ease;
}
.lightbox-image.chargement { opacity: 0.3; }

/* Flèches de défilement */
.lightbox-fleche {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 9999px;
    color: #faf7f0;
    background-color: rgba(61, 47, 37, 0.55);
    border: 1px solid rgba(250, 247, 240, 0.25);
    backdrop-filter: blur(4px);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.lightbox-fleche:hover {
    background-color: #6f7f6d;
    border-color: #8a9b88;
    color: #faf7f0;
}
.lightbox-fleche:active { transform: translateY(-50%) scale(0.94); }
.lightbox-fleche-gauche { left: 1.5rem; }
.lightbox-fleche-droite { right: 1.5rem; }

/* Compteur « 3 / 12 » */
.lightbox-compteur {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    padding: 0.3rem 0.9rem;
    border-radius: 9999px;
    background-color: rgba(61, 47, 37, 0.55);
    color: #faf7f0;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

/* Les sélecteurs suivants passent par #lightbox : ils écrasent des utilitaires
   Tailwind (max-w-full / max-h-full), il faut donc plus de spécificité. */

/* Sur grand écran la photo s'arrête avant les flèches, on ne clique jamais
   « à travers » l'image. */
@media (min-width: 768px) {
    #lightbox .lightbox-image { max-width: calc(100% - 9rem); }
}

/* Sur petit écran les flèches se rapprochent des bords et rétrécissent, et la
   photo laisse de la place au compteur en bas. */
@media (max-width: 767px) {
    .lightbox-fleche {
        width: 2.75rem;
        height: 2.75rem;
    }
    .lightbox-fleche svg {
        width: 22px;
        height: 22px;
    }
    .lightbox-fleche-gauche { left: 0.5rem; }
    .lightbox-fleche-droite { right: 0.5rem; }
    #lightbox .lightbox-image { max-height: calc(100% - 3.5rem); }
    .lightbox-compteur { bottom: 1rem; }
}

/* Séparateur ornemental */
.ornament-line {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #6f7f6d;
}
.ornament-line::before,
.ornament-line::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #6f7f6d, transparent);
}

/* Petit tag uppercase utilisé au-dessus des H2.
   Olive (#6f7f6d) ne donne que 3.77:1 sur le fond pierre, en dessous du
   minimum WCAG AA ; à cette taille (11 px) le texte doit passer 4.5:1, d'où
   la version foncée. */
.section-eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: #5a6858;
    font-weight: 500;
}

/* ========================================
   Flatpickr : thème Cigalia (olive/crème)
   ======================================== */
.flatpickr-calendar {
    background: #faf7f0 !important;
    border: 1px solid rgba(111, 127, 109, 0.2) !important;
    box-shadow: 0 20px 60px -20px rgba(61, 47, 37, 0.25) !important;
    border-radius: 4px !important;
    font-family: 'Inter', sans-serif;
}
.flatpickr-months .flatpickr-month,
.flatpickr-current-month,
.flatpickr-monthDropdown-months,
.flatpickr-weekday {
    color: #3d2f25 !important;
    fill: #3d2f25 !important;
}
.flatpickr-weekday { font-weight: 500 !important; color: #6f7f6d !important; }
.flatpickr-day {
    color: #3d2f25 !important;
    border-radius: 2px !important;
}
.flatpickr-day:hover {
    background: #f5f1e8 !important;
    border-color: #f5f1e8 !important;
}
.flatpickr-day.today {
    border-color: #c77f5b !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: #6f7f6d !important;
    border-color: #6f7f6d !important;
    color: #faf7f0 !important;
}
.flatpickr-day.inRange {
    background: #e4ebe3 !important;
    border-color: #e4ebe3 !important;
    box-shadow: -5px 0 0 #e4ebe3, 5px 0 0 #e4ebe3 !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: rgba(61, 47, 37, 0.3) !important;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: #6f7f6d !important; }

/* Dates déjà réservées (affichées en rouge, non cliquables via `disable`) */
.flatpickr-day.flatpickr-day-occupied,
.flatpickr-day.flatpickr-day-occupied.flatpickr-disabled {
    background: rgba(199, 127, 91, 0.16) !important;
    color: #a35b3a !important;
    text-decoration: line-through;
    text-decoration-color: rgba(199, 127, 91, 0.55);
    cursor: not-allowed;
    opacity: 1;
}
.flatpickr-day.flatpickr-day-occupied:hover {
    background: rgba(199, 127, 91, 0.22) !important;
    border-color: rgba(199, 127, 91, 0.35) !important;
}

/* Champs formulaire réservation */
.reservation-field {
    background: #faf7f0;
    border: 1px solid rgba(111, 127, 109, 0.25);
    padding: 0.75rem 1rem;
    width: 100%;
    font-family: 'Inter', sans-serif;
    color: #3d2f25;
    border-radius: 2px;
    cursor: pointer;
    transition: border-color 0.3s ease;
}
.reservation-field:hover,
.reservation-field:focus {
    outline: none;
    border-color: #6f7f6d;
}
.reservation-field::placeholder { color: rgba(61, 47, 37, 0.4); }

/* Formulaire d'identification du dépôt de caution générique */
.caution-label {
    display: block;
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #6f7f6d;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.caution-facultatif {
    letter-spacing: 0.08em;
    text-transform: none;
    font-weight: 400;
    color: rgba(61, 47, 37, 0.45);
}
.caution-erreur-champ {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: #c77f5b;
}

/* Option card : état "ajoutée" */
.option-card {
    transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}
.option-card:hover {
    transform: translateY(-4px);
}
.option-card.added {
    border-color: #6f7f6d;
    background-color: rgba(111, 127, 109, 0.06);
}
.option-card.added .option-add {
    background: #6f7f6d;
    color: #faf7f0;
    border-color: #6f7f6d;
}

/* Option « sur demande » : prestation partenaire, jamais ajoutée au panier.
   Même gabarit que le bouton pour ne pas casser l'alignement des cartes. */
.option-sur-demande {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border: 1px dashed rgba(111, 127, 109, 0.55);
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(61, 47, 37, 0.7);
}
a.option-sur-demande {
    transition: border-color 0.3s ease, color 0.3s ease;
}
a.option-sur-demande:hover {
    border-color: #6f7f6d;
    color: #6f7f6d;
}

/* Toast notif (accueil, form hero) */
#toast {
    transform: translateY(100px);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
}
#toast.visible {
    transform: translateY(0);
    opacity: 1;
}

/* ========================================
   Flash messages (toasts)
   ======================================== */
.flash-container {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: calc(100% - 2rem);
    max-width: 560px;
    pointer-events: none;
}
.flash-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.9rem 1rem 0.9rem 1.1rem;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    line-height: 1.45;
    background: #ffffff;
    color: #3d2f25;
    box-shadow: 0 10px 40px -15px rgba(61, 47, 37, 0.3), 0 2px 6px -2px rgba(61, 47, 37, 0.15);
    border-left: 4px solid #6f7f6d;
    cursor: pointer;
    animation:
        flash-slide-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both,
        flash-fade-out 0.5s ease-in 6s forwards;
}
.flash-toast-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
}
.flash-toast-body {
    flex: 1;
    padding-top: 0.2rem;
}
.flash-toast-close {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(61, 47, 37, 0.5);
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}
.flash-toast-close:hover {
    color: #3d2f25;
    background: rgba(61, 47, 37, 0.06);
}

.flash-toast-error {
    border-left-color: #c77f5b;
    background: #fdf4ef;
}
.flash-toast-error .flash-toast-icon {
    background: rgba(199, 127, 91, 0.15);
    color: #a35b3a;
}

.flash-toast-success {
    border-left-color: #6f7f6d;
    background: #f1f5ee;
}
.flash-toast-success .flash-toast-icon {
    background: rgba(111, 127, 109, 0.18);
    color: #5a6858;
}

.flash-toast-warning {
    border-left-color: #d4a574;
    background: #fbf5eb;
}
.flash-toast-warning .flash-toast-icon {
    background: rgba(212, 165, 116, 0.2);
    color: #9a7344;
}

.flash-toast-info {
    border-left-color: #8a9b88;
    background: #f6f8f4;
}
.flash-toast-info .flash-toast-icon {
    background: rgba(138, 155, 136, 0.18);
    color: #5a6858;
}

@keyframes flash-slide-in {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes flash-fade-out {
    to {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
        pointer-events: none;
    }
}

/* ========================================
   Tunnel de réservation
   ======================================== */
.tunnel-step { display: none; }
.tunnel-step.active { display: block; }

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    opacity: 0.45;
    transition: opacity 0.3s ease;
}
.progress-step.active,
.progress-step.completed { opacity: 1; }

.progress-dot {
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background: rgba(111, 127, 109, 0.12);
    color: #5a6858;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
}
.progress-step.active .progress-dot {
    background: #6f7f6d;
    color: #faf7f0;
    box-shadow: 0 0 0 4px rgba(111, 127, 109, 0.18);
}
.progress-step.completed .progress-dot {
    background: #5a6858;
    color: #faf7f0;
}
.progress-label {
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #3d2f25;
    font-weight: 500;
}
.progress-line {
    width: 2.5rem;
    height: 1px;
    background: rgba(111, 127, 109, 0.25);
    margin-bottom: 0.75rem;
}

/* ========================================
   Calendrier custom
   ======================================== */
.calendar-wrapper {
    border: 1px solid rgba(111, 127, 109, 0.2);
    border-radius: 4px;
    background: #faf7f0;
    overflow: hidden;
}
.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(111, 127, 109, 0.15);
    background: #fbf9f2;
}
.calendar-nav-btn {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(111, 127, 109, 0.25);
    color: #3d2f25;
    background: #faf7f0;
    transition: all 0.2s ease;
    cursor: pointer;
}
.calendar-nav-btn:hover:not(:disabled) {
    background: #6f7f6d;
    color: #faf7f0;
    border-color: #6f7f6d;
}
.calendar-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.calendar-weekdays,
.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.calendar-weekday {
    text-align: center;
    padding: 0.45rem 0.25rem;
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #6f7f6d;
    font-weight: 600;
    border-bottom: 1px solid rgba(111, 127, 109, 0.1);
    background: #fbf9f2;
}
.cal-day {
    aspect-ratio: 1.15 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    padding: 0.2rem;
    border-right: 1px solid rgba(111, 127, 109, 0.08);
    border-bottom: 1px solid rgba(111, 127, 109, 0.08);
    transition: all 0.15s ease;
    position: relative;
    font-family: 'Inter', sans-serif;
    user-select: none;
}
.cal-day-available {
    background: rgba(168, 201, 140, 0.14);
    color: #3d2f25;
    cursor: pointer;
}
.cal-day-available:hover,
.cal-day-available:focus-visible {
    background: rgba(168, 201, 140, 0.32);
    outline: none;
    z-index: 1;
}
.cal-day-selected {
    background: #6f7f6d !important;
    color: #faf7f0 !important;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(250, 247, 240, 0.35);
}
.cal-day-selected .cal-day-prix {
    color: rgba(250, 247, 240, 0.9) !important;
}
.cal-day-occupied {
    background: rgba(199, 127, 91, 0.14);
    color: rgba(61, 47, 37, 0.45);
    cursor: not-allowed;
}
.cal-day-occupied .cal-day-num { text-decoration: line-through; text-decoration-color: rgba(199, 127, 91, 0.5); }
.cal-day-occupied .cal-day-prix { color: #c77f5b; }
.cal-day-past {
    background: transparent;
    color: rgba(61, 47, 37, 0.25);
    cursor: not-allowed;
}
.cal-day-empty {
    background: transparent;
    border: none;
    cursor: default;
}
.cal-day-num {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1;
}
.cal-day-prix {
    font-size: 0.58rem;
    color: #6f7f6d;
    font-weight: 500;
    line-height: 1;
}
.cal-legend-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    display: inline-block;
    border: 1px solid rgba(111, 127, 109, 0.25);
}

/* Champs tunnel */
.tunnel-input {
    width: 100%;
    background: #faf7f0;
    border: 1px solid rgba(111, 127, 109, 0.25);
    padding: 0.75rem 1rem;
    color: #3d2f25;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    border-radius: 3px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tunnel-input:focus {
    outline: none;
    border-color: #6f7f6d;
    box-shadow: 0 0 0 3px rgba(111, 127, 109, 0.12);
}
.tunnel-input::placeholder { color: rgba(61, 47, 37, 0.4); }
.tunnel-input.border-terracotta { border-color: #c77f5b; }

/* Champ en erreur + message associé */
.tunnel-input-invalide {
    border-color: #c0563a;
    background: rgba(192, 86, 58, 0.04);
}
.tunnel-input-invalide:focus {
    border-color: #c0563a;
    box-shadow: 0 0 0 3px rgba(192, 86, 58, 0.12);
}
.tunnel-erreur {
    display: none;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #c0563a;
}
.tunnel-erreur.visible { display: block; }

/* Téléphone : indicatif pays + numéro national, collés en un seul bloc */
.tunnel-tel {
    display: flex;
    align-items: stretch;
    gap: 0;
}
.tunnel-tel-indicatif {
    flex: 0 0 auto;
    max-width: 8.5rem;
    background: #f5f1e8;
    border: 1px solid rgba(111, 127, 109, 0.25);
    border-right: 0;
    border-radius: 3px 0 0 3px;
    padding: 0.75rem 0.5rem;
    color: #3d2f25;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
}
.tunnel-tel-indicatif:focus {
    outline: none;
    border-color: #6f7f6d;
}
.tunnel-tel-numero {
    border-radius: 0 3px 3px 0;
    letter-spacing: 0.04em;
}

@media (max-width: 420px) {
    .tunnel-tel-indicatif { max-width: 6rem; font-size: 0.8rem; }
}

.tunnel-label {
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: #6f7f6d;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

@media (max-width: 640px) {
    .cal-day-num { font-size: 0.85rem; }
    .cal-day-prix { font-size: 0.55rem; }
}

/* ========================================
   Carte cadeau - Page
   ======================================== */

.cc-form-wrap { max-width: 560px; }

.cc-montant-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0.5rem;
    border: 1px solid rgba(111, 127, 109, 0.25);
    border-radius: 2px;
    background: #faf7f0;
    cursor: pointer;
    transition: all 0.25s ease;
    user-select: none;
}
.cc-montant-option:hover {
    border-color: #6f7f6d;
    background: #ffffff;
}
.cc-montant-prix {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.55rem;
    color: #3d2f25;
    font-weight: 500;
    line-height: 1;
}
.cc-montant-active {
    background: #6f7f6d;
    border-color: #6f7f6d;
    box-shadow: 0 8px 22px -12px rgba(111, 127, 109, 0.6);
}
.cc-montant-active .cc-montant-prix { color: #faf7f0; }

.cc-montant-custom-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(111, 127, 109, 0.25);
    border-radius: 2px;
    background: #faf7f0;
    cursor: text;
    transition: all 0.25s ease;
}
.cc-montant-custom-wrap:hover { border-color: #6f7f6d; }
.cc-montant-custom-active {
    border-color: #6f7f6d;
    background: #ffffff;
    box-shadow: 0 8px 22px -14px rgba(111, 127, 109, 0.45);
}
.cc-montant-custom-label {
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #6f7f6d;
    font-weight: 600;
    flex-shrink: 0;
}
.cc-montant-custom-inline {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    border-bottom: 1px solid rgba(111, 127, 109, 0.3);
    padding-bottom: 0.15rem;
}
.cc-montant-custom-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    color: #3d2f25;
    min-width: 0;
    -moz-appearance: textfield;
}
.cc-montant-custom-input::-webkit-outer-spin-button,
.cc-montant-custom-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cc-montant-custom-suffix {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    color: #6f7f6d;
}

.cc-separator {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(111, 127, 109, 0.2), transparent);
    margin: 1.75rem 0;
}

/* ============ Carte 3D ============ */

.cc-preview-wrap {
    perspective: 1600px;
    padding: 1rem;
    position: sticky;
    top: 6rem;
}
.cc-preview-scene {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    aspect-ratio: 1.586 / 1;
    transform-style: preserve-3d;
}

@keyframes ccFloat {
    0%, 100% { transform: translateY(0) rotateX(var(--cc-rx, 8deg)) rotateY(var(--cc-ry, -14deg)); }
    50%      { transform: translateY(-14px) rotateX(var(--cc-rx, 6deg)) rotateY(var(--cc-ry, -12deg)); }
}
@keyframes ccGlow {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 0.85; transform: scale(1.06); }
}
@keyframes ccShimmer {
    0%   { transform: rotate(0deg) translateX(-80%); }
    100% { transform: rotate(0deg) translateX(80%); }
}

.cc-card {
    --cc-rx: 8deg;
    --cc-ry: -14deg;
    position: absolute;
    inset: 0;
    border-radius: 14px;
    transform-style: preserve-3d;
    animation: ccFloat 7s ease-in-out infinite;
    transition: transform 0.18s ease-out;
    will-change: transform;
    cursor: default;
}
.cc-card.cc-card-tilt {
    animation-play-state: paused;
    transform: translateY(-6px) rotateX(var(--cc-rx)) rotateY(var(--cc-ry)) scale(1.02);
}

.cc-card-glow {
    position: absolute;
    inset: -18%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(212, 165, 116, 0.45) 0%,
        rgba(111, 127, 109, 0.35) 40%,
        transparent 70%);
    filter: blur(40px);
    animation: ccGlow 4s ease-in-out infinite;
    transform: translateZ(-60px);
}

.cc-card-inner {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 1.6rem 1.8rem;
    background:
        linear-gradient(135deg, rgba(250, 247, 240, 0.06) 0%, rgba(250, 247, 240, 0) 45%),
        linear-gradient(160deg, #5a6858 0%, #6f7f6d 45%, #3d4a3c 100%);
    color: #faf7f0;
    box-shadow:
        0 30px 60px -20px rgba(61, 47, 37, 0.55),
        0 14px 30px -10px rgba(111, 127, 109, 0.4),
        inset 0 1px 1px rgba(255, 255, 255, 0.18),
        inset 0 -1px 1px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform: translateZ(1px);
}
.cc-card-inner::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: linear-gradient(115deg,
        transparent 35%,
        rgba(250, 247, 240, 0.14) 45%,
        rgba(250, 247, 240, 0.24) 50%,
        rgba(250, 247, 240, 0.14) 55%,
        transparent 65%);
    transform: rotate(0deg) translateX(-40%);
    animation: ccShimmer 6s linear infinite;
    pointer-events: none;
    mix-blend-mode: overlay;
}
.cc-card-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 110%, rgba(212, 165, 116, 0.18) 0%, transparent 30%),
        radial-gradient(circle at 110% -10%, rgba(250, 247, 240, 0.12) 0%, transparent 35%);
    pointer-events: none;
}

.cc-card-logo {
    position: absolute;
    top: 1.4rem;
    left: 1.8rem;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.cc-card-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
.cc-card-logo-fallback {
    font-family: 'Parisienne', cursive;
    font-size: 1.6rem;
    color: #faf7f0;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}
.cc-card-logo img + .cc-card-logo-fallback { display: none; }

.cc-card-header {
    position: relative;
    z-index: 2;
    text-align: right;
    padding-left: 70px;
}
.cc-card-eyebrow {
    font-size: 0.58rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(250, 247, 240, 0.7);
    font-weight: 600;
    margin: 0;
}
.cc-card-site {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.85rem;
    color: rgba(250, 247, 240, 0.85);
    margin-top: 0.2rem;
}

.cc-card-body {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}
.cc-card-for {
    font-size: 0.58rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(250, 247, 240, 0.75);
    margin: 0 0 0.3rem;
}
.cc-card-beneficiaire {
    font-family: 'Parisienne', cursive;
    font-size: clamp(1.9rem, 4.5vw, 2.6rem);
    line-height: 1;
    color: #faf7f0;
    margin: 0;
    word-break: break-word;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.cc-card-message {
    margin-top: 0.8rem;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.9rem;
    color: rgba(250, 247, 240, 0.82);
    line-height: 1.4;
    display: none;
    max-height: 3.6rem;
    overflow: hidden;
}

.cc-card-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}
.cc-card-montant {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    font-weight: 500;
    color: #d4a574;
    margin: 0.15rem 0 0;
    line-height: 1;
    text-shadow: 0 2px 10px rgba(212, 165, 116, 0.4);
}
.cc-card-offrant {
    font-family: 'Parisienne', cursive;
    font-size: 1.3rem;
    color: #faf7f0;
    margin: 0.1rem 0 0;
    line-height: 1;
}

@media (max-width: 1023px) {
    .cc-preview-wrap { position: static; margin-top: 1rem; }
    .cc-preview-scene { max-width: 380px; }
    .cc-card { --cc-rx: 5deg; --cc-ry: -8deg; }
}
@media (max-width: 640px) {
    .cc-preview-scene { max-width: 320px; }
    .cc-card-logo { width: 40px; height: 40px; top: 1rem; left: 1.2rem; }
    .cc-card-inner { padding: 1.2rem 1.3rem; }
}

/* ========================================
   Accueil : options, dernière rangée centrée
   Le catalogue est éditable en back-office, le nombre de cartes ne tombe donc
   pas toujours juste : les orphelines de la dernière rangée laisseraient un
   vide à droite. La grille tourne sur des demi-colonnes (4 au lieu de 2, 6 au
   lieu de 3, chaque carte en occupant 2) pour que ces orphelines puissent se
   décaler d'une demi-colonne et se retrouver centrées. Les gouttières se
   compensent : la largeur des cartes reste celle d'une grille normale.
   Sélecteurs partant de l'id pour passer devant les utilitaires Tailwind
   injectés après cette feuille par le CDN.
   ======================================== */
@media (min-width: 768px) {
    #options-deck:not(.deck-actif) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    #options-deck:not(.deck-actif) > .option-card { grid-column: span 2; }

    /* Une seule carte sur la dernière rangée de deux. */
    #options-deck:not(.deck-actif) > .option-card:nth-child(odd):last-child {
        grid-column: 2 / span 2;
    }
}

@media (min-width: 1024px) {
    #options-deck:not(.deck-actif) {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    /* Deux cartes sur la dernière rangée de trois. */
    #options-deck:not(.deck-actif) > .option-card:nth-child(3n + 1):nth-last-child(2) {
        grid-column: 2 / span 2;
    }

    /* Une seule carte sur la dernière rangée de trois. */
    #options-deck:not(.deck-actif) > .option-card:nth-child(3n + 1):last-child {
        grid-column: 3 / span 2;
    }
}

/* ========================================
   Accueil mobile : options en paquet de cartes
   Le JS pose `deck-actif` sous 768 px, mesure la plus haute carte et fige la
   hauteur du paquet : les cartes passent en absolu, empilées et décalées.
   Les sélecteurs partent de l'id pour passer devant les utilitaires Tailwind
   (`grid`, `flex`...) injectés après cette feuille par le CDN.
   ======================================== */
#options-deck.deck-actif {
    display: block;
    position: relative;
    touch-action: pan-y;
}
#options-deck.deck-actif .option-card {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    transform-origin: 50% 50%;
    transition: transform 0.4s cubic-bezier(0.22, 0.75, 0.28, 1), opacity 0.3s ease;
    box-shadow: 0 18px 40px -22px rgba(61, 47, 37, 0.5);
    background-color: #faf7f0;
    touch-action: pan-y;
    will-change: transform;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
#options-deck.deck-actif .option-card:active { cursor: grabbing; }

.options-deck-controles { display: none; }
.options-deck-controles.actif {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    margin-top: 1.75rem;
}
/* Gouttière réduite : les zones tactiles de 24 px écartent déjà les points. */
.options-deck-points {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}
/* Le point visible ne fait que 7 px, bien trop petit pour un doigt. Le bouton
   devient donc une zone tactile transparente de 24 px (minimum WCAG 2.2) et
   c'est ::before qui dessine le point. Bonus : la pastille active s'élargit
   sans décaler ses voisines, la zone cliquable ne bougeant plus. */
.options-deck-point,
.avis-point {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.options-deck-point::before,
.avis-point::before {
    content: '';
    display: block;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 9999px;
    background: rgba(111, 127, 109, 0.28);
    transition: width 0.3s ease, background-color 0.3s ease;
}
.options-deck-point.actif::before,
.avis-point.actif::before {
    width: 1.35rem;
    background: #5a6858;
}
.options-deck-astuce {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(61, 47, 37, 0.45);
}
.options-deck-astuce svg { color: #6f7f6d; }

/* ========================================
   Accueil mobile : galerie repliée aux 6 premières photos
   `repliee` est posée dans le HTML et n'a d'effet que sous 768 px : pas de
   bascule au chargement, la grille complète reste la version desktop.
   ======================================== */
.galerie-enveloppe { position: relative; }

.galerie-fondu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6rem;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(245, 241, 232, 0) 0%, rgba(245, 241, 232, 0.75) 55%, #f5f1e8 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.galerie-bascule-zone {
    display: none;
    justify-content: center;
    margin-top: 1.5rem;
}
.galerie-bascule {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.6rem;
    border: 1px solid #6f7f6d;
    border-radius: 9999px;
    background: transparent;
    color: #6f7f6d;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.galerie-bascule:active {
    background: #6f7f6d;
    color: #faf7f0;
}
.galerie-bascule-chevron {
    transition: transform 0.35s ease;
}
.galerie-bascule[aria-expanded="true"] .galerie-bascule-chevron {
    transform: rotate(180deg);
}

/* Le fondu des photos dépliées doit primer sur `transition-opacity` de
   Tailwind (150 ms), injecté après cette feuille : d'où le sélecteur par id. */
#galerie-enveloppe .galerie-suite {
    transition: opacity 0.5s ease;
}

@media (max-width: 767px) {
    .galerie-enveloppe.repliee .galerie-suite { display: none; }
    .galerie-enveloppe.repliee .galerie-fondu { opacity: 1; }
    .galerie-fondu { display: block; }
    .galerie-bascule-zone { display: flex; }
}

/* ========================================
   Accueil : avis longs repliés avec fondu
   Le repli n'est posé par le JS que sur les avis qui débordent vraiment :
   sans JS, ou pour un avis court, le texte reste affiché en entier.
   ======================================== */
.avis-texte { position: relative; }

.avis-texte.repliee {
    max-height: 12rem;
    overflow: hidden;
}

.avis-texte.depliable {
    transition: max-height 0.45s ease;
}

.avis-texte.repliee::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5rem;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.35s ease;
    background: linear-gradient(to bottom, rgba(250, 247, 240, 0) 0%, rgba(250, 247, 240, 0.85) 55%, #faf7f0 100%);
}

/* Déplié : la hauteur est posée en style inline par le JS, seul le fondu s'efface. */
.avis-texte.repliee.deplie::after { opacity: 0; }

.avis-bascule {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.9rem;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #6f7f6d;
    cursor: pointer;
    transition: color 0.3s ease;
}
.avis-bascule[hidden] { display: none; }
.avis-bascule:hover { color: #3d2f25; }

.avis-bascule svg {
    transition: transform 0.3s ease;
}
.avis-bascule[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .avis-texte.depliable { transition: none; }
    .avis-bascule svg { transition: none; }
}

/* ========================================
   Accueil : avis en carrousel
   Défilement calé (scroll-snap) à toutes les tailles : une carte visible sous
   768 px, deux au-delà, trois à partir de 1024 px. Le pas d'une flèche vaut
   une carte, et le JS ne pose que le nombre de points réellement atteignables
   (4 avis vus 3 par 3 font 2 positions, pas 4).
   ======================================== */
.avis-piste {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-left: 1.5rem;
    /* Le carrousel déborde le padding de section pour que la carte suivante
       se devine sur le bord de l'écran. */
    margin: 0 -1.5rem;
    padding: 0.25rem 1.5rem 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.avis-piste::-webkit-scrollbar { display: none; }

.avis-piste > article {
    flex: 0 0 86%;
    scroll-snap-align: start;
}

@media (min-width: 768px) {
    .avis-piste {
        gap: 2rem;
        margin: 0;
        padding: 0.25rem 0 0.5rem;
        scroll-padding-left: 0;
    }
    /* Deux cartes pleines : la largeur retire la gouttière qui les sépare. */
    .avis-piste > article { flex-basis: calc((100% - 2rem) / 2); }
}

@media (min-width: 1024px) {
    /* Trois cartes pleines, donc deux gouttières à retirer. */
    .avis-piste > article { flex-basis: calc((100% - 4rem) / 3); }
}

.avis-controles {
    /* Passé en flex par le JS, et seulement s'il y a de quoi défiler. */
    display: none;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 2rem;
}
.avis-controles.actif { display: flex; }

.avis-fleche {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid rgba(111, 127, 109, 0.35);
    border-radius: 9999px;
    background: none;
    color: #6f7f6d;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.avis-fleche:hover:not(:disabled) {
    background: #6f7f6d;
    border-color: #6f7f6d;
    color: #faf7f0;
}
.avis-fleche:disabled {
    opacity: 0.3;
    cursor: default;
}

.avis-points {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.125rem;
}

@media (prefers-reduced-motion: reduce) {
    .avis-piste { scroll-behavior: auto; }
}

/* ========================================
   reCAPTCHA v3
   ======================================== */

/* Le badge flottant de Google se pose en bas à droite, exactement sous le
   bouton « retour en haut ». On le masque, ce que Google autorise à condition
   d'afficher sa mention légale dans le formulaire (c'est fait, sous le bouton
   d'envoi). visibility et pas display : le script en a besoin pour fonctionner. */
.grecaptcha-badge {
    visibility: hidden;
}

/* ========================================
   Aperçu vidéo : fond, loader et fondu
   Partagés par la bulle du hero et la vignette de la section « Découvrir ».
   ======================================== */

/* Photo de la suite affichée pendant que l'aperçu se télécharge. Déclarée une
   fois ici, les deux conteneurs la reprennent en fond. */
:root {
    --apercu-fond: url('../img/apercu-video-fond.jpg');
}

/* La vidéo arrive par-dessus la photo et prend le relais en fondu, une fois sa
   première image décodée (classe posée par le JS). */
.bulle-video-apercu,
.video-vignette-apercu {
    opacity: 0;
    transition: opacity 0.7s ease;
}
.apercu-pret .bulle-video-apercu,
.apercu-pret .video-vignette-apercu {
    opacity: 1;
}

/* Aperçu abandonné (visiteur en mouvement réduit, économiseur de données, ou
   téléchargement en échec) : on retire l'élément pour ne pas risquer un cadre
   vide par-dessus la photo. */
.apercu-sans .bulle-video-apercu,
.apercu-sans .video-vignette-apercu {
    display: none;
}

/* Loader : visible tant que ni « pret » ni « sans » n'est posé. */
.apercu-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: rgba(61, 47, 37, 0.35);
    transition: opacity 0.5s ease;
}

.apercu-loader::after {
    content: '';
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(250, 247, 240, 0.35);
    border-top-color: #faf7f0;
    animation: apercu-rotation 0.9s linear infinite;
}

.apercu-pret .apercu-loader,
.apercu-sans .apercu-loader {
    opacity: 0;
}

@keyframes apercu-rotation {
    to { transform: rotate(360deg); }
}

/* Sans animation : pas d'anneau qui tourne, juste un voile discret le temps du
   chargement (qui n'a de toute façon pas lieu dans ce cas). */
@media (prefers-reduced-motion: reduce) {
    .apercu-loader::after { animation: none; }
}

/* ========================================
   Bulle vidéo flottante du hero
   ======================================== */

/* Centrée en bas du hero. Le décalage de -50% vit dans l'animation aussi :
   sans ça, le premier keyframe recollerait la bulle contre le bord. */
.bulle-video {
    position: absolute;
    left: 50%;
    bottom: 2rem;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transform: translateX(-50%);
    animation: bulle-video-flotte 4.5s ease-in-out infinite;
}

/* Le hero réserve la hauteur de la bulle : sans ce padding, elle passerait
   par-dessus le formulaire de réservation sur les écrans courts. Sélecteur
   sur l'id : le CDN Tailwind injecte ses utilitaires après cette feuille, et
   pb-20 / md:py-32 gagneraient à spécificité égale. */
#hero.hero-avec-bulle { padding-bottom: 9.5rem; }
@media (min-width: 768px) {
    #hero.hero-avec-bulle { padding-bottom: 12rem; }
}

/* Rond de l'aperçu. L'anneau clair le détache de la photo du hero, quelle que
   soit la zone de l'image derrière. */
.bulle-video-media {
    position: relative;
    width: 92px;
    height: 92px;
    flex: 0 0 auto;
    border-radius: 50%;
    overflow: hidden;
    background: #3d2f25 var(--apercu-fond) center / cover no-repeat;
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.55);
    border: 2px solid rgba(250, 247, 240, 0.85);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
}

.bulle-video-apercu {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bulle-video-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #faf7f0;
    background: rgba(61, 47, 37, 0.35);
    transition: background 0.3s ease;
    /* Le triangle est optiquement décalé quand il est parfaitement centré. */
    padding-left: 3px;
}

/* Halo qui pulse doucement derrière le rond. Calé sur le centre du rond, qui
   occupe le haut de la colonne. */
.bulle-video-halo {
    position: absolute;
    left: 50%;
    top: 46px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    border: 2px solid rgba(250, 247, 240, 0.6);
    transform: translate(-50%, -50%);
    animation: bulle-video-halo 2.8s ease-out infinite;
    pointer-events: none;
}

.bulle-video-libelle {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.15;
    text-align: center;
    color: #faf7f0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    transition: color 0.3s ease;
}

.bulle-video:hover .bulle-video-media {
    transform: scale(1.06);
    box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.65);
}
.bulle-video:hover .bulle-video-play { background: rgba(61, 47, 37, 0.1); }
.bulle-video:hover .bulle-video-libelle { color: #d4a574; }
.bulle-video:active .bulle-video-media { transform: scale(0.98); }
.bulle-video:focus-visible { outline: 2px solid #d4a574; outline-offset: 6px; }

@keyframes bulle-video-flotte {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, -9px); }
}

@keyframes bulle-video-halo {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    70% { transform: translate(-50%, -50%) scale(1.45); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1.45); opacity: 0; }
}

/* Sur mobile le rond descend à 64px : la bulle et son libellé tiennent alors
   dans la réserve de 9.5rem laissée par .hero-avec-bulle. */
@media (max-width: 767px) {
    .bulle-video {
        bottom: 1.25rem;
        gap: 0.4rem;
    }
    .bulle-video-media,
    .bulle-video-halo {
        width: 64px;
        height: 64px;
    }
    .bulle-video-halo { top: 32px; }
    .bulle-video-libelle { font-size: 0.95rem; }
}

@media (prefers-reduced-motion: reduce) {
    .bulle-video {
        animation: none;
        transform: translateX(-50%);
    }
    .bulle-video-halo { animation: none; opacity: 0.4; }
}

/* ========================================
   Vignette vidéo 16/9 (section « Découvrir »)
   ======================================== */

.video-vignette {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 0;
    border-radius: 1.25rem;
    /* overflow + isolation : sans ça, le zoom de l'aperçu au survol déborde des
       angles arrondis sur WebKit. */
    overflow: hidden;
    isolation: isolate;
    background: #3d2f25 var(--apercu-fond) center / cover no-repeat;
    cursor: pointer;
    box-shadow: 0 25px 50px -12px rgba(61, 47, 37, 0.4);
}

.video-vignette-apercu {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.video-vignette:hover .video-vignette-apercu { transform: scale(1.03); }

/* Voile sombre : garde le HUD lisible quelle que soit l'image de l'aperçu. */
.video-vignette-voile {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(61, 47, 37, 0.15), rgba(61, 47, 37, 0.5));
    transition: background 0.4s ease;
}
.video-vignette:hover .video-vignette-voile {
    background: linear-gradient(to bottom, rgba(61, 47, 37, 0.05), rgba(61, 47, 37, 0.35));
}

.video-vignette-hud {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
}

.video-vignette-play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    color: #faf7f0;
    background: rgba(61, 47, 37, 0.35);
    border: 2px solid rgba(250, 247, 240, 0.9);
    backdrop-filter: blur(2px);
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.5);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease;
    /* Le triangle paraît décentré quand il est calé au pixel près. */
    padding-left: 4px;
}
.video-vignette:hover .video-vignette-play {
    transform: scale(1.1);
    background: rgba(111, 127, 109, 0.75);
}
.video-vignette:active .video-vignette-play { transform: scale(1.02); }

.video-vignette-libelle {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.25rem;
    color: #faf7f0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.video-vignette:focus-visible { outline: 2px solid #d4a574; outline-offset: 4px; }

@media (max-width: 767px) {
    .video-vignette-play {
        width: 64px;
        height: 64px;
    }
    .video-vignette-libelle { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
    .video-vignette:hover .video-vignette-apercu { transform: none; }
}

/* ========================================
   Visionneuse vidéo (YouTube)
   ======================================== */

.video-modale {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(61, 47, 37, 0.95);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.video-modale.open {
    opacity: 1;
    pointer-events: auto;
}

.video-modale-cadre {
    width: 100%;
    max-width: 1100px;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 0.125rem;
    overflow: hidden;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.8);
}

.video-modale-lecteur { width: 100%; height: 100%; }
.video-modale-lecteur iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.video-modale-fermer {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 10;
    border: 0;
    background: none;
    color: #faf7f0;
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: color 0.3s ease;
}
.video-modale-fermer:hover { color: #8a9b88; }

@media (max-width: 767px) {
    .video-modale-fermer {
        top: 0.75rem;
        right: 1rem;
        font-size: 2rem;
    }
}