/* ═══════════════════════════════════════════════════
   MELANAILS — main.css
═══════════════════════════════════════════════════ */

/* ── Reset & Base ── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Outfit', sans-serif;
    background: #FDFBF8;
    color: #1C1410;
    overflow-x: hidden;
}

/* ── Grain texture ── */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9999;
}

/* ── Navbar ── */
#navbar {
    transition: background 0.35s ease, box-shadow 0.35s ease;
}

#navbar.scrolled {
    background: rgba(253, 251, 248, 0.93);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 1px 0 rgba(28, 20, 16, 0.07);
}

/* Mobile & tablette : fond dès le départ pour lisibilité */
@media (max-width: 1023px) {
    #navbar {
        background: rgba(253, 251, 248, 0.95);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: 0 1px 0 rgba(28, 20, 16, 0.06);
    }
}

.nav-link {
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: #1C1410;
    transition: color 0.2s;
}

.nav-link.active,
.nav-link:hover {
    color: #AD9070;
}

/* ── Hero ── */
.hero-bg-word {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(90px, 20vw, 260px);
    font-weight: 300;
    line-height: 0.85;
    letter-spacing: -0.03em;
    color: rgba(28, 20, 16, 0.06);
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
}

.hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(48px, 7vw, 92px);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

/* ── Buttons ── */
.btn-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1C1410;
    color: #FDFBF8;
    padding: 13px 30px;
    font-size: 0.88rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    border-radius: 999px;
    transition: background 0.3s, letter-spacing 0.3s;
    text-decoration: none;
    border: none;
}

.btn-dark:hover {
    background: #AD9070;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #1C1410;
    color: #1C1410;
    padding: 12px 28px;
    font-size: 0.88rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    border-radius: 999px;
    transition: all 0.3s;
    text-decoration: none;
}

.btn-outline:hover {
    background: #1C1410;
    color: #FDFBF8;
}

.btn-ghost-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(196, 169, 125, 0.45);
    color: #FDFBF8;
    padding: 12px 28px;
    font-size: 0.88rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    border-radius: 999px;
    transition: all 0.3s;
    text-decoration: none;
}

.btn-ghost-light:hover {
    background: rgba(196, 169, 125, 0.15);
    border-color: #C4A97D;
}

.btn-reserve {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(173, 144, 112, 0.4);
    color: #AD9070;
    padding: 5px 13px;
    font-size: 0.72rem;
    font-weight: 400;
    border-radius: 999px;
    transition: all 0.25s;
    text-decoration: none;
}

.btn-reserve:hover {
    background: #AD9070;
    border-color: #AD9070;
    color: #fff;
}

/* ── Accordion ── */
.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
    opacity: 0;
}

.accordion-item.open .accordion-body {
    opacity: 1;
}

.acc-icon {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.accordion-item.open .acc-icon {
    transform: rotate(45deg);
}

/* ── Service row ── */
.service-row {
    border-bottom: 1px solid rgba(196, 169, 125, 0.15);
    padding: 15px 0;
}

.service-row:last-child {
    border-bottom: none;
}

/* ── Gallery grid ── */
/* Six vignettes : trois colonnes sur deux rangs au-delà du mobile, deux
   colonnes sur trois rangs en dessous. Le gap est large — avec six images
   seulement, l'air compte plus que la densité. */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    width: 100%;
}

@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
}

.gallery-item {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-item:hover img {
    transform: scale(1.06);
}


/* ── Reviews ── */
.review-card {
    background: #FDFBF8;
    border: 1px solid rgba(196, 169, 125, 0.2);
}

/* ── Stars ── */
.stars {
    color: #C4A97D;
    letter-spacing: 2px;
    font-size: 0.8rem;
}

/* ── Ornament separator ── */
.ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.ornament::before,
.ornament::after {
    content: '';
    height: 1px;
    width: 55px;
    background: linear-gradient(90deg, transparent, rgba(196, 169, 125, 0.55));
}

.ornament::after {
    background: linear-gradient(270deg, transparent, rgba(196, 169, 125, 0.55));
}

/* Séparateur entre deux sections : le même motif que l'ornement des en-têtes,
   avec un scintillement au centre et des filets plus longs, pour marquer une
   respiration plutôt que d'ouvrir un titre. */
/* Mobile uniquement : sur un écran étroit les sections s'empilent et se
   confondent, le séparateur leur redonne une frontière. Sur desktop la mise
   en page suffit à les distinguer. */
.separateur {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 20px;
    /* Le séparateur vit entre deux sections de fonds différents : il porte son
       propre fond crème pour ne pas dessiner un liseré à la jointure. */
    padding: 40px 24px;
    background: #FDFBF8;
    color: #C4A97D;
    font-size: 0.95rem;
    line-height: 1;
}

@media (max-width: 768px) {
    .separateur { display: flex; }

    /* Dans une grille de cartes empilées : pas de fond propre — la section
       derrière est d'une seule couleur — et moins d'air qu'entre deux
       sections, sinon les cartes se retrouvent trop éloignées. */
    .grid > .separateur {
        padding: 8px 24px;
        background: none;
    }
}

.separateur::before,
.separateur::after {
    content: '';
    height: 1px;
    width: 90px;
    max-width: 22vw;
    background: linear-gradient(90deg, transparent, rgba(196, 169, 125, 0.55));
}

.separateur::after {
    background: linear-gradient(270deg, transparent, rgba(196, 169, 125, 0.55));
}

/* ── Scroll reveal ── */
/* ── Barre de progression de lecture ──
   Animée par le navigateur via animation-timeline, pas par le JS : le scroll
   reste fluide sur mobile, là où un handler JS saccade. Sur un navigateur qui
   ne connaît pas scroll(), la barre reste simplement à zéro — rien ne casse. */
#progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    z-index: 60;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg, #E8D5B7, #C4A97D, #AD9070);
    pointer-events: none;
}

@supports (animation-timeline: scroll()) {
    #progress {
        animation: progression linear;
        animation-timeline: scroll(root block);
    }
}

@keyframes progression {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    #progress { display: none; }
}

/* Apparition au scroll : le fondu mène, le déplacement suit. L'opacité monte
   en ease-out sur toute la durée pour rester douce du début à la fin, et le
   translate est court — un déplacement marqué se lit comme un à-coup et casse
   l'impression de fondu. */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.95s cubic-bezier(0.33, 0, 0.2, 1),
                transform 0.75s cubic-bezier(0.33, 0, 0.2, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }

/* ── Fondu long des cartes « univers » ──
   Fondu franchement plus lent que le .reveal générique, pour qu'on voie la
   carte se charger progressivement. Pas de déplacement : le mouvement détourne
   l'œil du fondu, et c'est le fondu qu'on veut voir ici. */
.univers-card.reveal {
    opacity: 0;
    transform: none;
    transition: opacity 1.6s ease-out;
}

.univers-card.reveal.visible {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .univers-card.reveal { opacity: 1; transition: none; }
}

/* ── Mobile menu ── */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}

#mobile-menu.open {
    max-height: 420px;
    opacity: 1;
}

/* ── Hero image tablet fix ── */
@media (max-width: 1023px) and (min-width: 640px) {
    #hero-image-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        max-width: 420px;
    }
}

/* ── Floating reserve btn ── */
#fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 100;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}

#fab.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

/* ── Lightbox ── */
#lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(28, 20, 16, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#lightbox.active {
    opacity: 1;
    pointer-events: all;
}

#lightbox img {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    border: 1px solid rgba(196, 169, 125, 0.2);
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

#lightbox.active img {
    transform: scale(1);
}

#lightbox-close {
    position: absolute;
    top: 24px;
    right: 28px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(196, 169, 125, 0.3);
    color: rgba(253, 251, 248, 0.7);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1.2rem;
    background: transparent;
}

#lightbox-close:hover {
    border-color: #C4A97D;
    color: #C4A97D;
}

#lightbox-nav {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
}

.lb-arrow {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(196, 169, 125, 0.3);
    color: rgba(253, 251, 248, 0.6);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1rem;
}

.lb-arrow:hover {
    border-color: #C4A97D;
    color: #C4A97D;
}

/* ── Map ── */
.map-wrap iframe {
    filter: contrast(0.92) saturate(0.75);
}

/* ── Contact info block ── */
.contact-info-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    /* Mobile & tablette : le bloc se réduit à la largeur de son contenu et se
       centre, textes ferrés à gauche à l'intérieur */
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    text-align: left;
}

.contact-info-row {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    width: 100%;
}

/* Mobile & tablette : bouton de réservation centré dans le bloc */
@media (max-width: 1023px) {
    .contact-info-row.contact-info-cta {
        justify-content: center;
    }
}

@media (min-width: 1024px) {
    .contact-info-block {
        width: 100%;
        margin: 0;
    }
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: #F5EFE8;
}

::-webkit-scrollbar-thumb {
    background: #C4A97D;
    border-radius: 2px;
}

/* ── Mélanails : surtitre manuscrit & numéro d'accordéon ── */
.section-script {
    font-family: 'Dancing Script', cursive;
    font-size: 1.9rem;
    line-height: 1;
    color: #AD9070;
    margin-bottom: 0.25rem;
}

.acc-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem;
    font-style: italic;
    color: #C4A97D;
    width: 2rem;
}

/* Sur mobile, les 96px de py-24 hérités du desktop créent de longues zones
   vides entre les sections. On les ramène à 56px : l'alternance des fonds
   suffit à séparer les blocs sur un écran étroit. */
@media (max-width: 768px) {
    section.py-24 {
        padding-top: 56px;
        padding-bottom: 56px;
    }
}

/* ── Le cheminement de la page parcours ──
   Un trait vertical qui se remplit au fil du scroll, avec une étape marquée par
   un point à chaque jalon. Animé par le navigateur via animation-timeline, donc
   sans JS : le scroll reste fluide sur mobile. Sur un navigateur qui ne connaît
   pas scroll(), le trait reste plein — le repère visuel tient quand même. */
.chemin {
    position: relative;
    padding-left: 34px;
}

/* Le rail, en fond. */
.chemin::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: rgba(196, 169, 125, 0.22);
}

/* Le trait qui se remplit par-dessus. */
.chemin::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    transform-origin: 50% 0;
    background: linear-gradient(180deg, #E8D5B7, #C4A97D);
}

@supports (animation-timeline: view()) {
    .chemin::after {
        transform: scaleY(0);
        animation: chemin-trace linear both;
        animation-timeline: view();
        animation-range: cover 12% cover 78%;
    }
}

@keyframes chemin-trace {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

/* Le jalon : un point sur le trait, en face de chaque étape. Le contenu part
   légèrement décalé vers le trait et se remet en place, comme s'il était
   déposé par le tracé. */
/* L'étape porte aussi .reveal, qui anime déjà opacity + translateY. On écrase
   donc son transform pour composer les deux déplacements sur un seul axe. */
.chemin-etape.reveal {
    position: relative;
    transform: translate(-12px, 18px);
}

.chemin-etape.reveal.visible {
    transform: translate(0, 0);
}

/* Le point, creux au départ. */
.chemin-etape::before {
    content: '';
    position: absolute;
    left: -34px;
    top: 6px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #FDFBF8;
    border: 1px solid #C4A97D;
    /* Le remplissage doré monte du bas, comme le trait lui-même. */
    background-image: linear-gradient(180deg, #C4A97D, #C4A97D);
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: 100% 0%;
    transition: background-size 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
    z-index: 1;
}

/* Le halo, en couche séparée pour se dilater sans déformer le point. */
.chemin-etape::after {
    content: '';
    position: absolute;
    left: -37px;
    top: 3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 1px solid rgba(196, 169, 125, 0.5);
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.8s ease 0.35s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}

.chemin-etape.visible::before {
    background-size: 100% 100%;
}

.chemin-etape.visible::after {
    opacity: 1;
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .chemin::after { transform: scaleY(1); animation: none; }
    .chemin-etape.reveal { transform: none; transition: none; }
    .chemin-etape::before { background-size: 100% 100%; transition: none; }
    .chemin-etape::after { opacity: 1; transform: scale(1); transition: none; }
}

/* Bandeau du studio partenaire : cinq visuels sur une ligne, en cinq colonnes
   égales. Sur mobile la ligne passe à deux colonnes plutôt que d'écraser les
   vignettes. Les images ne sont pas cliquables, contrairement à la galerie. */
.partenaire-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    width: 100%;
}

.partenaire-grid .gallery-item {
    cursor: default;
}

@media (max-width: 768px) {
    .partenaire-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* Cinq vignettes sur deux colonnes laisseraient la dernière seule. */
    .partenaire-grid .gallery-item:nth-child(5) {
        display: none;
    }
}

/* ── Cartes des formations ── */
.formation-card {
    display: flex;
    flex-direction: column;
    background: #FDFBF8;
    border: 1px solid rgba(196, 169, 125, 0.35);
    border-radius: 14px;
    padding: 2rem 1.75rem;
    height: 100%;
}

.formation-prix {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.4rem;
    line-height: 1;
    color: #AD9070;
}

/* Les repères pratiques : durée, effectif, lieu. */
.formation-meta {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem 0;
    margin: 1.25rem 0;
    border-top: 1px solid rgba(196, 169, 125, 0.25);
    border-bottom: 1px solid rgba(196, 169, 125, 0.25);
    font-size: 0.8rem;
    color: #6E5A4E;
}

/* Le programme : une coche dorée en puce, alignée sur la première ligne. */
.formation-liste {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 300;
    line-height: 1.55;
    color: #6E5A4E;
}

.formation-liste li {
    position: relative;
    padding-left: 1.4rem;
}

.formation-liste li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: #C4A97D;
    font-size: 0.85rem;
}

/* Le bloc bonus, détaché du programme principal. */
.formation-bonus {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(196, 169, 125, 0.25);
}

/* Grande arche du hero de la page salon. Même construction que le trio de
   l'accueil : filet or, liseré intérieur, et une base posée sur une ligne. */
.arche-photo {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 50% 50% 0 0 / 38% 38% 0 0;
    border: 1px solid rgba(196, 169, 125, 0.55);
    border-bottom: none;
    padding: 7px 7px 0;
    background: #FDFBF8;
    box-shadow: 0 -10px 55px rgba(28, 20, 16, 0.09);
}

.arche-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50% 50% 0 0 / 38% 38% 0 0;
}

.arche-photo::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(196, 169, 125, 0.55), transparent);
}

/* Bloc « Un vrai cocon » : pas de carte, juste l'arche et son texte posés sur
   le fond de la section — le cadre blanc alourdissait la page. */
.bloc-arche {
    text-align: center;
    padding: 0 8px;
}

/* L'arche reprend le trio du hero : même filet or, même courbure, et comme
   elles, elle repose sur une ligne plutôt que de flotter dans un cadre. */
.carte-visuel {
    display: block;
    width: 78%;
    max-width: 230px;
    margin: 0 auto 1.6rem;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 50% 50% 0 0 / 42% 42% 0 0;
    background: #F5EFE8;
    border: 1px solid rgba(196, 169, 125, 0.55);
    border-bottom: none;
    padding: 6px 6px 0;
    box-shadow: 0 -10px 45px rgba(28, 20, 16, 0.07);
}

/* Le filet qui ferme le bas de l'arche, comme la ligne du hero. Positionné
   hors du flux pour ne pas manger la hauteur imposée par l'aspect-ratio. */
.carte-visuel {
    position: relative;
}

.carte-visuel::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(196, 169, 125, 0.55), transparent);
}

.carte-visuel img,
.carte-visuel video {
    border-radius: 50% 50% 0 0 / 42% 42% 0 0;
}

.carte-visuel img,
.carte-visuel video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Pastille illustrée en tête de catégorie, à la place du numéro : un aperçu
   de la prestation se lit plus vite qu'un chiffre. flex-shrink pour que la
   bulle garde son cercle quand le titre est long. */
.acc-bulle {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(196, 169, 125, 0.55);
    background: #F5EFE8;
}

.acc-bulle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Arrondis : une seule valeur, 14px, pour tous les blocs ── */
.accordion-item > button {
    border-radius: 14px;
    transition: border-radius 0.2s ease, border-color 0.2s;
}

.accordion-item.open > button {
    border-radius: 14px 14px 0 0;
}

.accordion-body {
    border-radius: 0 0 14px 14px;
}

.review-card,
.gallery-item,
.map-wrap iframe,
#lightbox img {
    border-radius: 14px;
}

/* ── Blocs « univers » de l'accueil ── */
.univers-card {
    display: block;
    background: #FDFBF8;
    border: 1px solid #E8D5B7;
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.univers-card:hover {
    border-color: #C4A97D;
    box-shadow: 0 18px 45px -25px rgba(28, 20, 16, 0.25);
}

.univers-img {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.univers-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.univers-card:hover .univers-img img {
    transform: scale(1.04);
}

.badge-bientot {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(253, 251, 248, 0.92);
    color: #AD9070;
    font-family: 'Dancing Script', cursive;
    font-size: 1.15rem;
    line-height: 1;
}

/* ── Lightbox : cadre fixe, dégagé des commandes ── */
#lightbox img {
    width: min(86vw, 520px);
    height: min(68vh, 693px);
    max-width: none;
    max-height: none;
    object-fit: cover;
    border-radius: 14px;
}

#lightbox-close,
.lb-arrow {
    border-radius: 14px;
}

/* ── Badge « Signature » sur les prestations phares ── */
.badge-signature {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 10px 2px;
    border: 1px solid #E8D5B7;
    border-radius: 999px;
    background: #F5EFE8;
    color: #AD9070;
    font-family: 'Dancing Script', cursive;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.3;
    vertical-align: 1px;
}

/* ── Page salon : photos en format portrait ── */
.salon-photo {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 14px;
    background: #F5EFE8;
}

.salon-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.salon-photo:hover img {
    transform: scale(1.04);
}

/* ── Page contact : boutons ── */
.contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    border-radius: 999px;
    border: 1px solid #E8D5B7;
    background: #FDFBF8;
    color: #1C1410;
    font-size: 0.92rem;
    transition: border-color 0.3s, background 0.3s, color 0.3s;
}

.contact-btn svg {
    color: #AD9070;
    transition: color 0.3s;
}

.contact-btn:hover {
    border-color: #C4A97D;
}

.contact-btn-main {
    background: #1C1410;
    border-color: #1C1410;
    color: #FDFBF8;
}

.contact-btn-main svg {
    color: #FDFBF8;
}

.contact-btn-main:hover {
    background: #AD9070;
    border-color: #AD9070;
}