* {
    margin: 0;
    padding: 0;
}

body {
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #F5F5F5;
}

/* A11y : skip-to-content link, visible only on keyboard focus */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #0A0A0A;
    color: #fff;
    padding: 12px 20px;
    font-family: 'Founders Grotesk', 'Helvetica Neue', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    z-index: 100000;
    border-radius: 2px;
}
.skip-to-content:focus {
    left: 12px;
    top: 12px;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@font-face {
    font-family: 'Founders Grotesk M';
    src: url('../font/FoundersGrotesk-Medium.otf');
}

@font-face {
    font-family: 'Kormelink Roman';
    src: url('../font/WT_Kormelink_Roman_DESK_1.1.ttf');
}

@font-face {
    font-family: 'Kormelink Italic';
    src: url('../font/WT_Kormelink_Italic_1.1.ttf');
}

header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 10px 50px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: white;
}

header > .btn-book {
    justify-self: end;
}
header > .header-right {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Lang switcher EN | FR — pill sobre charte luxe */
.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    padding: 8px 12px;
    margin: 0;
    cursor: pointer;
    font-family: 'Founders Grotesk M', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    color: #0A0A0A;
    line-height: 1;
    position: relative;
}
.lang-switcher .lang-opt {
    color: #999;
    transition: color 0.2s;
    position: relative;
    padding: 4px 2px 8px;
}
.lang-switcher .lang-opt:hover { color: #0A0A0A; }
.lang-switcher .lang-opt.is-active {
    color: #0A0A0A;
    font-weight: 500;
}
.lang-switcher .lang-opt.is-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #652800;
}
.lang-switcher .lang-sep {
    color: #ccc;
    font-weight: 300;
    pointer-events: none;
}
@media (max-width: 768px) {
    .lang-switcher {
        font-size: 14px;
        gap: 8px;
        margin: 0 8px 0 0;
        padding: 8px 10px;
    }
    .lang-switcher .lang-opt {
        padding: 4px 4px 10px;
    }
}

nav {
    margin: 0 auto;
}

.logo {
    width: 130px;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 40px;
    font-size: 16px;
}

a {
    text-decoration: none;
    color: #0A0A0A;
    font-family: 'Founders Grotesk';
}

.btn-book {
    background-color: #0A0A0A;
    color: white;
    padding: 14px 28px 10px;
    border-radius: 2px;
    font-size: 14px;
    letter-spacing: 1px;
    font-family: 'Founders Grotesk', sans-serif;
}

h1 {
    text-align: center;
    font-family: 'Kormelink Roman';
    font-size: 72px;
    line-height: 1.1;
    color: #0A0A0A;
}

.hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('https://res.cloudinary.com/djy5i6bhi/image/upload/f_auto,q_auto/oom-inroom-service-hotel');
    background-size: cover;
    background-position: center;
    border-radius: 24px;
    overflow: hidden;
    margin: 90px 20px 20px;
}

.hero h1,
.hero h2,
.scroll-arrow {
    color: #fff;
}

.hero h1 {
    font-weight: 300;
    letter-spacing: 1px;
    -webkit-text-stroke: 0.4px transparent;
    /* Resserre l'espacement h1 -> h2 (default user-agent margin trop ample) */
    margin: 0 0 8px;
}

.hero h2 {
    font-family: 'Founders Grotesk';
    font-weight: normal;
    font-size: 24px;
    margin: 0;
}

.scroll-arrow {
    position: absolute;
    bottom: 20px;
    cursor: pointer;
    font-size: 32px;
    color: #FCF9E0;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
}

.first-fold {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.logo-part {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 40px 60px;
    gap: 40px 60px;
}

.logo-part h3 {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

.logo-part img {
    height: 10vh;
}

.container-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.col-home {
    display: flex;
    height: 100vh;
    padding: 40px;
    color: white;
    text-align: center;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}
.col-home::before {
    content: '';
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform 0.6s ease;
    z-index: 0;
}
.col-home::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 45%);
    z-index: 1;
    transition: background 0.3s ease;
}
.col-home:hover::before {
    transform: scale(1.08);
}
.col-home:hover::after {
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 55%);
}
.col-home > * {
    position: relative;
    z-index: 2;
}

.col-hot::before {
    background-image: url('https://res.cloudinary.com/djy5i6bhi/image/upload/f_auto,q_auto/malle');
}

.col-ent::before {
    background-image: url('https://res.cloudinary.com/djy5i6bhi/image/upload/f_auto,q_auto/oom-corporate-wellness-murex');
}

.col-home h2 {
    font-family: 'Kormelink Roman';
}

p {
    font-family: 'Founders Grotesk';
    font-size: 16px;
    line-height: 1.5;
}

.btn-segment {
    border: solid white 1px;
    padding: 14px 28px 10px;
    color: white;
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    border-radius: 2px;
    transition: background 0.3s ease, color 0.3s ease;
}
.col-home:hover .btn-segment {
    background: #fff;
    color: #0A0A0A;
}

h2 {
    font-family: 'Kormelink Roman';
    font-size: 48px;
    line-height: 1.2;
    text-align: center;
}

.event {
    padding: 40px 0 40px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.event-tag {
    text-align: center;
}

.event-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    align-items: center;
}

.event-intro {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.event-intro h2 {
    text-align: left;
}

.event-intro p {
    text-align: left;
}

.event-intro .btn-cta {
    margin: 0;
    display: inline-block;
}

.container-event {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scrollbar-width: none;
}

.container-event::-webkit-scrollbar {
    display: none;
}

.event-category {
    font-family: 'Founders Grotesk';
    font-size: 12px;
    letter-spacing: 2px;
    color: #652800;
}

.event-item {
    min-width: 400px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
    transition: filter 0.4s ease, opacity 0.4s ease;
}

.event-cta-mobile {
    display: none !important;
}

.event h2 {
    margin-bottom: 10px;
}

.event img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}

h3 {
    font-family: 'Kormelink Roman';
    font-size: 32px;
    line-height: 1.3;
}

.luxury {
    height: auto;
    min-height: 720px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 20px;
    /* Gris OOM cohérent charte : Rich Black → gris charbon (couleur dominante du site) */
    background: linear-gradient(180deg, #1a1a1a 0%, #282828 50%, #1a1a1a 100%);
    color: white;
}

.luxury h2 {
    color: white;
}

.luxury .event-tag {
    color: white;
}

.luxury .btn-cta {
    background-color: white;
    color: #0A0A0A;
}

.carroussel {
    position: relative;
    height: 580px;
    overflow: hidden;
}

.malle {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
    gap: 0px;
    color: inherit;
    text-decoration: none;
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.6s ease,
                gap 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.malle img {
    width: 100%;
    height: 380px;
    object-fit: contain;
    flex-shrink: 0;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.malle-active img {
    width: 65%;
    height: 550px;
}

.malle-shampoo img {
    height: 420px;
}

.malle-shampoo.malle-active img {
    width: 60%;
    height: 510px;
}

.malle-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    flex-shrink: 0;
    width: 35%;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.malle-active .malle-info {
    opacity: 1;
    transition: opacity 0.4s ease 0.5s;
}

.malle-info h3 {
    color: white;
}

.malle-info p {
    color: #e5e5e5;
    max-width: 200px;
}

.malle-info .btn-cta {
    margin: 0;
}

.malle-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 16px 0;
    width: 100%;
    margin-top: 16px;
}
.malle-arrow {
    background: none;
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.malle-arrow svg {
    width: 16px;
    height: 16px;
    display: block;
}
.malle-arrow:hover {
    background: rgba(255,255,255,0.12);
    border-color: #fff;
    transform: scale(1.05);
}

.btn-cta {
    display: block;
    margin: 20px auto 10px;
    width: fit-content;
    padding: 14px 28px 10px;
    background-color: #0A0A0A;
    color: white;
    border-radius: 2px;
    font-size: 14px;
    letter-spacing: 1px;
    font-family: 'Founders Grotesk', sans-serif;
}

.stories {
    background-color: white;
    padding: 60px;
    text-align: center;
}

.stories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 250px;
    gap: 16px;
    margin-top: 30px;
}

.story-item {
    overflow: hidden;
    border-radius: 12px;
    position: relative;
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.story-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.story-tall {
    grid-row: span 2;
}

.story-wide {
    grid-column: span 2;
}

.story-item > img:first-child {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-label {
    font-family: 'Kormelink Italic';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    color: white;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
}

.tailored-section {
    background-color: #FCF9E0;
    padding: 60px 0;
}

.tailored {
    background-color: white;
    padding: 40px 60px;
    text-align: center;
    width: 750px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.1);
}

.form-row {
    display: flex;
    gap: 36px;
    align-items: center;
    width: 100%;
}

.tailored p {
    font-size: 24px;
    font-family: 'Founders Grotesk';
}

.form-row input {
    border: 1px solid #e5e5e5;
    padding: 18px 12px 12px;
    font-family: 'Founders Grotesk';
    font-size: 16px;
    flex: 1;
    background-color: #f7f7f7;
    color: #0A0A0A;
    box-sizing: border-box;
}

.form-row .btn-cta {
    margin: 0;
    padding: 14px 24px 10px;
    font-size: 16px;
    font-family: 'Founders Grotesk';
    white-space: nowrap;
}

.short {
    display: none;
    font-size: 14px;
}

.step-hidden {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.step-hidden.step-visible {
    opacity: 1;
    transform: translateY(0);
}

/* WhatsApp widget */
.whatsapp-widget{
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    box-shadow: 0 4px 16px rgba(37,211,102,0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.whatsapp-widget svg{
    width: 28px;
    height: 28px;
}
.whatsapp-widget:hover{
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(37,211,102,0.5);
}
footer {
    background-color: #0A0A0A;
    display: flex;
    justify-content: center;
    padding: 20px 50px;
}

footer a {
    color: white;
}

.hero video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.hero-ent {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('https://res.cloudinary.com/djy5i6bhi/image/upload/f_auto,q_auto/oom-corporate-hero');
    background-size: cover;
    background-position: center;
}

.hero-hotel {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('https://res.cloudinary.com/djy5i6bhi/image/upload/f_auto,q_auto/oom-inroom-service-hotel');
    background-size: cover;
    background-position: center;
}

.hero-content {
    position: absolute;
    bottom: 60px;
    left: 50px;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hero-content h1 {
    text-align: left;
    font-size: 56px;
}

.hero-content p {
    color: white;
    font-size: 16px;
    text-align: left;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    margin-top: 10px;
}

.btn-outline {
    border: 1px solid white;
    color: white;
    padding: 14px 28px 10px;
    border-radius: 2px;
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
}

.btn-lead {
    background-color: #0A0A0A;
    color: white;
    padding: 14px 28px 10px;
    border-radius: 2px;
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
}

.stats-section {
    padding: 60px;
    background-color: #F5F5F5;
}

.stats-tag {
    display: inline-block;
    background-color: #0A0A0A;
    color: white;
    padding: 8px 14px 5px;
    border-radius: 20px;
    font-size: 10px;
    letter-spacing: 4px;
    font-family: 'Founders Grotesk';
    line-height: 1;
}

.stats-title {
    font-size: 40px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: left;
}

.stats-title em {
    font-family: 'Kormelink Italic';
}

.stats-image-wrapper {
    position: relative;
    border-radius: 12px;
}

.stats-image-wrapper img {
    width: 100%;
    height: 600px;
    object-fit: cover;
    border-radius: 12px;
}

.stats-wrapper {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 0 30px;
    z-index: 2;
    justify-items: center;
}

.stats-card {
    background-color: white;
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 300px;
    justify-content: space-around;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.stats-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.stats-card h3 {
    font-size: 64px;
    font-weight: bold;
    line-height: 1;
}

.stats-card p {
    font-size: 16px;
    line-height: 1.5;
}

.stats-card .stats-tag {
    align-self: flex-start;
}

.social-proof {
    text-align: center;
    padding: 80px 0;
}

.social-proof h2 {
    margin-bottom: 40px;
}

.social-proof p {
    color: #666;
    font-size: 24px;
    margin-bottom: 30px;
}

.bandeau-logo {
    overflow-x: hidden;
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.bandeau-track {
    display: flex;
    animation: scroll 22s linear infinite;
    margin-bottom: 30px;
    width: max-content;
    align-items: center;
}
/* margin-right sur chaque item (y compris le dernier) plutot que gap :
   garantit que la moitie de la piste contient EXACTEMENT 8 items + 8 gaps,
   sinon translateX(-50%) tombe sur 7.5 gap et cree un saut visible (bug "blanc apres logos") */
.bandeau-track > * {
    margin-right: 80px;
    flex-shrink: 0;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.social-proof img {
    width: auto !important;
    height: 80px;
    max-width: 200px;
    object-fit: contain;
    flex-shrink: 0;
}

.bandeau-track img[alt="Le Royal Monceau"] {
    transform: scale(1.35);
    transform-origin: center;
}
.bandeau-track img {
    height: 80px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    flex-shrink: 0;
}

.certif-badges {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    margin-top: 50px;
}

.certif-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #0A0A0A;
    font-family: 'Founders Grotesk';
    font-size: 12px;
    letter-spacing: 1.5px;
}

.certif-item img {
    width: auto !important;
    height: 70px;
}

.certif-item .flag-img {
    height: 12px;
    width: 90px !important;
}

.certif-item p {
    margin: 0;
    font-size: 0.65rem;
}

.gptw-link {
    display: inline-block;
    margin-top: 30px;
    padding: 12px 24px;
    border: 1px solid #0A0A0A;
    color: #0A0A0A;
    font-family: 'Founders Grotesk';
    font-size: 12px;
    letter-spacing: 1px;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}

.gptw-link:hover {
    background-color: #0A0A0A;
    color: white;
}

/* Variante chip (sous les logos) : plus discret que l'ancien gros bouton,
   garde la position originale (apres bandeau) mais avec un look pill. */
.gptw-link.gptw-link-eyebrow {
    margin-top: 24px;
    margin-bottom: 0;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11px;
    background: transparent;
    letter-spacing: 0.6px;
}
.gptw-link.gptw-link-eyebrow:hover {
    background-color: rgba(10,10,10,0.06);
    color: #0A0A0A;
}

.how-it-works {
    padding: 60px;
    text-align: center;
}

.works-tag {
    display: inline-block;
    font-family: 'Founders Grotesk';
    font-size: 10px;
    letter-spacing: 2px;
    color: #666;
    margin-bottom: 16px;
}

.how-it-works h2 {
    font-size: 40px;
    margin-bottom: 50px;
}

.works-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
}

.works-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.works-img-hotel {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 16px;
}

.works-img-hotel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hotel-process-cta {
    text-align: center;
    margin-top: 40px;
}

.hotel-process-cta .btn-outline {
    border-color: #0A0A0A;
    color: #0A0A0A;
}

.works-card {
    background-color: white;
    border-radius: 16px;
    padding: 28px 28px 36px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    min-height: 380px;
    transition: transform 0.3s ease;
}

.works-card:hover {
    transform: scale(1.03);
}

.works-card h3 {
    font-size: 24px;
    font-weight: bold;
    margin-top: 6px;
}

.works-card p {
    font-size: 17px;
    color: #666;
    line-height: 1.7;
}

.works-visuals {
    position: relative;
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f7f7f7;
    border-radius: 12px;
}

.works-visuals img {
    width: 100px;
    height: 130px;
    object-fit: cover;
    border-radius: 10px;
    position: absolute;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: transform 0.6s ease, left 0.6s ease, right 0.6s ease;
}

.works-visuals img:nth-child(1) {
    animation: pos1 4.5s infinite;
}

.works-visuals img:nth-child(2) {
    animation: pos2 4.5s infinite;
}

.works-visuals img:nth-child(3) {
    animation: pos3 4.5s infinite;
}

@keyframes pos1 {
    0%, 30%   { left: calc(50% - 50px); transform: rotate(0deg) scale(1.1); z-index: 3; }
    33%, 63%  { left: calc(50%); transform: rotate(15deg) scale(1); z-index: 1; }
    66%, 96%  { left: calc(50% - 100px); transform: rotate(-15deg) scale(1); z-index: 1; }
    100%      { left: calc(50% - 50px); transform: rotate(0deg) scale(1.1); z-index: 3; }
}

@keyframes pos2 {
    0%, 30%   { left: calc(50%); transform: rotate(15deg) scale(1); z-index: 1; }
    33%, 63%  { left: calc(50% - 100px); transform: rotate(-15deg) scale(1); z-index: 1; }
    66%, 96%  { left: calc(50% - 50px); transform: rotate(0deg) scale(1.1); z-index: 3; }
    100%      { left: calc(50%); transform: rotate(15deg) scale(1); z-index: 1; }
}

@keyframes pos3 {
    0%, 30%   { left: calc(50% - 100px); transform: rotate(-15deg) scale(1); z-index: 1; }
    33%, 63%  { left: calc(50% - 50px); transform: rotate(0deg) scale(1.1); z-index: 3; }
    66%, 96%  { left: calc(50%); transform: rotate(15deg) scale(1); z-index: 1; }
    100%      { left: calc(50% - 100px); transform: rotate(-15deg) scale(1); z-index: 1; }
}

.works-visual-mockup,
.works-visual-trunk {
    background-color: #f7f7f7;
    border-radius: 12px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.works-visual-mockup img,
.works-visual-mockup video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.works-visual-trunk img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    animation: kenBurns 10s ease-in-out infinite alternate;
}

@keyframes kenBurns {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.15) translate(-3%, -3%); }
}

.works-card-horizontal {
    flex-direction: row;
    text-align: left;
    min-height: 380px;
}

.works-card-horizontal .works-visual-mockup,
.works-card-horizontal .works-visual-trunk {
    min-width: 45%;
    height: 100%;
}

.works-card-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.works-visual-stars {
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f7f7f7;
    border-radius: 12px;
}

.works-cta {
    text-align: center;
    margin-top: 48px;
}

.works-cta p {
    font-size: 18px;
    color: #0A0A0A;
    margin-bottom: 24px;
}

.works-cta .btn-cta {
    background-color: #125656;
    color: white;
    padding: 18px 40px 14px;
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 12px;
    transition: opacity 0.3s ease;
}

.btn-cta:not(.btn-buy):not(.btn-rent):not(.btn-discover):hover {
    background-color: #2a2a2a;
}

.rituels {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background-color: #fff;
}

.rituels-left {
    width: 45%;
    padding: 120px 60px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    transition: background-color 0.8s ease;
}

.rituels-left[data-active="aura"] {
    background-color: #282828;
}

.rituels-left[data-active="origin"] {
    background-color: #282828;
}

.rituels-left[data-active="horizon"] {
    background-color: #282828;
}

.rituels-right {
    width: 55%;
    position: relative;
    overflow: hidden;
}

.rituels-bg-img {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease;
    object-fit: cover;
}

.rituels-bg-img.active {
    opacity: 1;
}

.rituels-list {
    display: flex;
    gap: 14px;
    position: absolute;
    top: 40px;
    left: 60px;
}

.rituels-line-indicator {
    display: none;
}

.rituels-item {
    background: none;
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    font-size: 16px;
    opacity: 0.5;
    cursor: pointer;
    padding: 12px 24px 9px;
    font-family: 'Founders Grotesk';
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.rituels-item:hover {
    opacity: 0.8;
}

.rituels-item.active {
    opacity: 1;
    border-color: white;
}

.rituels-big-name {
    font-size: 64px;
    color: white;
    font-family: 'Kormelink Roman';
    margin-bottom: 0;
    line-height: 1.1;
}

.rituels-info {
    text-align: left;
}

.rituels-detail {
    display: none;
    opacity: 0;
}

.rituels-detail.active {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    color: white;
    gap: 20px;
    animation: fadeIn 0.6s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rituels-tag {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.rituels-tag span {
    border: 1px solid rgba(255,255,255,0.4);
    padding: 9px 16px 6px;
    border-radius: 20px;
    font-size: 13px;
    font-family: 'Founders Grotesk';
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.7);
}

.rituels-subtitle {
    font-family: 'Founders Grotesk';
    font-size: 14px;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    margin-bottom: -20px;
}

.rituels-desc {
    color: rgba(255,255,255,0.7);
    font-size: 18px;
    line-height: 1.7;
    max-width: 480px;
}

.rituels-soins {
    border-left: 2px solid rgba(255,255,255,0.2);
    padding-left: 20px;
    padding-top: 4px;
    padding-bottom: 4px;
    list-style: none;
}

.rituels-soins li {
    color: white;
    font-size: 15px;
    font-style: italic;
    line-height: 2;
}

.rituels-capacity {
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    font-family: 'Founders Grotesk';
    letter-spacing: 0.5px;
}

.rituels-soins p {
    color: white;
    font-size: 16px;
    font-style: italic;
    line-height: 1.6;
}

.rituels-soins span {
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    font-family: 'Founders Grotesk';
    letter-spacing: 0.5px;
}

.rituels-detail p {
    color: rgba(255,255,255,0.6);
    font-size: 15px;
    line-height: 1.7;
    max-width: 420px;
}

.rituels-price {
    color: white;
    font-size: 20px;
    font-weight: bold;
    font-style: italic;
}

.rituels-buttons {
    display: flex;
    gap: 16px;
}

.rituels-btn-demo {
    background-color: white;
    color: #282828;
    padding: 16px 28px 12px;
    font-family: 'Founders Grotesk';
    font-size: 13px;
    letter-spacing: 1.5px;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.rituels-btn-demo:hover {
    opacity: 0.85;
}

.rituels-btn-brochure {
    border: 1px solid rgba(255,255,255,0.4);
    color: white;
    padding: 16px 28px 12px;
    font-family: 'Founders Grotesk';
    font-size: 13px;
    letter-spacing: 1.5px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.rituels-btn-brochure:hover {
    background-color: rgba(255,255,255,0.1);
}

.estimateur {
    background-color: #F5F5F5;
    padding: 80px 60px;
    text-align: center;
    position: relative;
}

.estimateur h2 {
    font-family: 'Kormelink Roman';
    font-size: 42px;
    margin-bottom: 40px;
    color: #0A0A0A;
}

.est-step {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    animation: fadeIn 0.4s ease forwards;
    padding: 30px 0;
}

.est-step.active,
.est-step.done {
    display: flex;
}

.est-step.done {
    opacity: 0.5;
    pointer-events: none;
}

.est-step.done .est-btn,
.est-step.done .est-nav,
.est-step.done .est-back {
    display: none;
}

.est-label {
    font-family: 'Founders Grotesk';
    font-size: 12px;
    letter-spacing: 3px;
    color: #652800;
    font-weight: bold;
}

.est-question {
    font-size: 20px;
    color: #0A0A0A;
    margin-bottom: 10px;
}

.est-value {
    font-size: 64px;
    font-family: 'Kormelink Roman';
    color: #0A0A0A;
}

#est-slider,
#est-hotel-slider {
    width: 400px;
    max-width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: #e5e5e5;
    border-radius: 2px;
    outline: none;
}

#est-slider::-webkit-slider-thumb,
#est-hotel-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #652800;
    cursor: pointer;
}

#est-slider::-moz-range-thumb,
#est-hotel-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #652800;
    cursor: pointer;
    border: none;
}

.est-slider-labels {
    position: relative;
    width: 400px;
    max-width: 100%;
    height: 20px;
    font-size: 13px;
    color: #888;
    font-family: 'Founders Grotesk';
}

.est-slider-labels span {
    position: absolute;
    transform: translateX(-50%);
}

.est-slider-labels span:first-child {
    left: 0;
    transform: none;
}

.est-slider-labels span:nth-child(2) {
    left: 50%;
}

.est-slider-labels span:last-child {
    left: 100%;
    transform: translateX(-100%);
}

.est-btn {
    background-color: #652800;
    color: white;
    border: none;
    padding: 18px 48px 14px;
    font-family: 'Founders Grotesk';
    font-size: 14px;
    letter-spacing: 2px;
    cursor: pointer;
    transition: opacity 0.3s ease;
    margin-top: 10px;
}

.est-btn:hover {
    opacity: 0.85;
}

.est-back {
    background: none;
    border: none;
    color: #888;
    font-family: 'Founders Grotesk';
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.est-back:hover {
    color: #0A0A0A;
}

.est-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    align-items: center;
    margin-top: 10px;
}

.est-cards {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.est-card {
    background: white;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 30px 24px;
    width: 180px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.est-card:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.est-card.selected,
section.estimateur .est-card.selected,
.est-cards .est-card.selected {
    border-color: #652800 !important;
    background: #FCF9E0 !important;
    box-shadow: 0 4px 16px rgba(101,40,0,0.15) !important;
}

/* Hint multi-select clientele */
.est-hint {
    text-align: center;
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 13px;
    color: #888;
    letter-spacing: 0.5px;
    margin: 8px 0 4px;
    font-style: italic;
}

.est-card h3 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 6px;
}

.est-card p {
    font-size: 13px;
    color: #888;
    line-height: 1.4;
}

.est-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 360px;
    max-width: 100%;
}

.est-form input {
    border: 1px solid #e5e5e5;
    padding: 14px 16px;
    font-family: 'Founders Grotesk';
    font-size: 15px;
    border-radius: 12px;
    outline: none;
    transition: border-color 0.3s ease;
}

.est-form input:focus {
    border-color: #652800;
}

.est-privacy {
    font-size: 12px;
    color: #888;
    font-style: italic;
}

.est-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.est-result h3 {
    font-family: 'Kormelink Roman';
    font-size: 48px;
    color: #0A0A0A;
}

.est-result-details {
    display: flex;
    gap: 30px;
}

.est-result-item {
    background: white;
    padding: 24px 30px;
    border-radius: 12px;
    min-width: 160px;
}

.est-result-item span {
    font-family: 'Founders Grotesk';
    font-size: 11px;
    letter-spacing: 2px;
    color: #888;
    display: block;
    margin-bottom: 8px;
}

.est-result-item p {
    font-size: 18px;
    font-weight: bold;
    color: #0A0A0A;
}

.est-result-highlight {
    background: white;
}

.est-result-trunk {
    display: flex;
    align-items: center;
    gap: 40px;
    width: 100%;
    max-width: 700px;
}

.est-result-trunk img {
    width: 200px;
    height: 250px;
    object-fit: contain;
}

.est-result-trunk-info {
    flex: 1;
    text-align: center;
}

.est-result-trunk-info .est-result-details {
    justify-content: center;
}

.est-result-trunk-info h3 {
    font-family: 'Kormelink Roman', serif;
    font-size: 2rem;
    color: #0A0A0A;
    margin-bottom: 10px;
}

.est-result-trunk-info > p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
}

.est-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(0,0,0,0.1);
}

.est-progress-bar {
    height: 100%;
    background-color: #652800;
    width: 25%;
    transition: width 0.4s ease;
}

.guest-experience {
    display: flex;
    flex-direction: column;
    gap: 60px;
    padding: 80px 60px;
    background: #FCF9E0;
}

.guest-exp-overlay {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    margin: 0;
    padding: 0;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto;
    gap: 20px;
    justify-items: stretch;
}

.guest-exp-overlay .stats-card {
    max-width: none;
    padding: 28px 26px;
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    grid-template-columns: 1fr;
    row-gap: 28px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.guest-exp-overlay .stats-card .stats-tag {
    align-self: flex-start;
    justify-self: flex-start;
}

.guest-exp-overlay .stats-card h3 {
    font-size: 44px;
    line-height: 1;
    margin: 0;
}

.guest-exp-overlay .stats-card p {
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
}

.guest-exp-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.guest-exp-video {
    border-radius: 16px;
    overflow: hidden;
}

.guest-exp-video video {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 9/16;
    max-height: 550px;
    border-radius: 16px;
    display: block;
}


.guest-exp-content h2 {
    font-family: 'Kormelink Roman', serif;
    font-size: 2.8rem;
    line-height: 1.15;
    color: #0A0A0A;
    margin-bottom: 30px;
    text-align: left;
}

.guest-exp-content blockquote {
    margin: 0 0 30px;
    padding-left: 20px;
    border-left: 2px solid #652800;
}

.guest-exp-content blockquote p {
    font-family: 'Kormelink Italic', serif;
    font-size: 1.15rem;
    color: #282828;
    line-height: 1.6;
    margin-bottom: 8px;
}

.guest-exp-content blockquote cite {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 0.8rem;
    color: #888;
    font-style: normal;
    letter-spacing: 0.5px;
}

.guest-exp-desc {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 400px;
}

.guest-exp-btn {
    border-color: #0A0A0A;
    color: #0A0A0A;
    display: inline-block;
    text-decoration: none;
}



.hotel-trunks {
    padding: 100px 60px;
    background-color: #282828;
}

.hotel-trunks-header {
    margin-bottom: 30px;
    text-align: center;
}

.hotel-trunks-header h2 {
    font-family: 'Kormelink Roman', serif;
    font-size: 2.8rem;
    margin-top: 16px;
    margin-bottom: 16px;
    color: #fff;
}

.hotel-trunks-header h2 em {
    font-family: 'Kormelink Italic', serif;
}

.hotel-trunks-header p {
    font-size: 0.95rem;
    color: #888;
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.6;
}

.hotel-trunks-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 50px;
}

.hotel-trunk-item {
    text-align: left;
}

.hotel-trunk-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hotel-trunk-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.6s ease;
}

.hotel-trunk-item:hover .hotel-trunk-img img {
    transform: scale(1.03);
}

.hotel-trunk-item h3 {
    font-family: 'Founders Grotesk M', sans-serif;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hotel-trunk-arrow {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background 0.3s ease, border-color 0.3s ease;
    text-decoration: none;
    flex-shrink: 0;
    font-family: Arial, sans-serif;
    font-size: 0.75rem;
    line-height: 1;
}

.hotel-trunk-arrow:hover {
    background: #fff;
    color: #0A0A0A;
    border-color: #fff;
}

.hotel-trunk-item p {
    font-family: 'Kormelink Roman', serif;
    font-size: 0.85rem;
    color: #888;
    line-height: 1.6;
    margin-bottom: 16px;
}

.hotel-trunk-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hotel-trunk-tags span {
    font-family: 'Founders Grotesk M', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 1.5px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    color: #888;
}


.service-cards{
    padding: 50px 60px 100px;
}
.service-cards-header{
    text-align: center;
    margin-bottom: 60px;
}
.service-cards-header h2{
    font-family: 'Kormelink Roman', serif;
    font-size: 2.8rem;
    line-height: 1.2;
    margin-top: 12px;
}
.service-cards-header h2 em{
    font-family: 'Kormelink Italic', serif;
}
.service-cards-list{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 260px;
    gap: 20px;
    max-width: 1300px;
    margin: 0 auto;
}
.service-card{
    background: #FFFFFF;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: white;
}
.service-card::after{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.85) 100%);
    z-index: 1;
    pointer-events: none;
}
/* Bento positions */
.service-card:nth-child(1){ grid-column: 1/3; grid-row: 1/3; }
.service-card:nth-child(2){ grid-column: 3/5; grid-row: 1; }
.service-card:nth-child(3){ grid-column: 3; grid-row: 2; }
.service-card:nth-child(4){ grid-column: 4; grid-row: 2; }
.service-card:nth-child(5){ grid-column: 1/5; grid-row: 3; }
.service-card-icon{
    display: none;
}
.service-card-open{
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    color: white;
    transition: background 0.3s ease, transform 0.3s ease;
}
.service-card:hover .service-card-open{
    background: rgba(255,255,255,0.3);
    transform: translate(2px, -2px);
}
.service-card-open svg{
    width: 14px;
    height: 14px;
}
.service-card-text{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    position: relative;
    z-index: 2;
}
.service-card-text h3{
    font-family: 'Kormelink Roman', serif;
    font-size: 1.4rem;
    line-height: 1.3;
    color: white;
}
.service-card-text p{
    font-size: 1rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.55;
}
.service-card-bullets{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}
.service-card-bullets li{
    font-family: 'Founders Grotesk M', sans-serif;
    font-size: 0.85rem;
    color: #0A0A0A;
    padding-left: 24px;
    position: relative;
}
.service-card-bullets li::before{
    content: '✦';
    position: absolute;
    left: 0;
    font-size: 10px;
    color: #652800;
}
.service-card-cta{
    font-family: 'Founders Grotesk';
    font-size: 12px;
    letter-spacing: 1px;
    color: white;
    border: 1px solid rgba(255,255,255,0.6);
    padding: 10px 20px;
    text-decoration: none;
    margin-top: 4px;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, color 0.3s ease;
}
.service-card-cta:hover{
    background: white;
    color: #0A0A0A;
}
.service-card{
    cursor: pointer;
}

/* Service modal */
.service-modal{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
}
.service-modal.open{
    display: flex;
}
.service-modal-backdrop{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    animation: fadeIn 0.3s ease;
}
.service-modal-content{
    position: relative;
    background: white;
    border-radius: 24px;
    max-width: 1100px;
    width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-modal-close{
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.95);
    font-size: 16px;
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s ease;
}
.service-modal-close:hover{
    background: white;
}
.service-modal-image{
    height: 100%;
}
.service-modal-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.service-modal-body{
    padding: 50px 40px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.service-modal-body h2{
    font-family: 'Kormelink Roman', serif;
    font-size: 2.2rem;
    line-height: 1.15;
}
.service-modal-body p{
    color: #333;
    line-height: 1.6;
    font-size: 1.1rem;
}
.service-modal-body ul{
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.service-modal-body ul li{
    padding-left: 24px;
    position: relative;
    font-size: 1.1rem;
    color: #282828;
    line-height: 1.6;
}
.service-modal-body ul li::before{
    content: '✦';
    position: absolute;
    left: 0;
    color: #652800;
}
.service-modal-body .btn-cta{
    margin-top: auto;
    width: fit-content;
}
@keyframes fadeIn{
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideUp{
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInRight{
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
.service-card-cta:hover{
    background: #0A0A0A;
    color: white;
}
.service-card-visual{
    position: absolute;
    inset: 0;
    z-index: 0;
}
.service-card-num{
    display: none;
}
.service-card-visual img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card:hover .service-card-visual img{
    transform: scale(1.08);
}

/* Trunk viewer flat blocks (overview / specs / includes / customization) */
.trunk-viewer-overview,
.trunk-viewer-includes,
.trunk-viewer-customization{
    border-top: 1px solid rgba(0,0,0,0.08);
    padding: 18px 0;
}
.trunk-viewer-specs{
    border-top: none;
    padding: 14px 0;
}
.trunk-viewer-overview:first-child{
    border-top: none;
    padding-top: 0;
}
.trunk-viewer-overview p{
    font-family: 'Founders Grotesk';
    font-size: 14px;
    line-height: 1.6;
    color: #444;
}
.trunk-viewer-specs h3,
.trunk-viewer-includes h3{
    font-family: 'Founders Grotesk';
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #652800;
    margin: 0 0 16px;
    font-weight: 500;
}
.trunk-includes-pills{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.trunk-pill{
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid rgba(101,40,0,0.25);
    border-radius: 999px;
    font-family: 'Founders Grotesk';
    font-size: 12px;
    color: #333;
    background: transparent;
}
.trunk-viewer-customization p{
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #444;
}
.trunk-includes-mif{
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.trunk-includes-mif p{
    margin: 0;
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 9px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #652800;
    line-height: 1;
}
.trunk-includes-mif .flag-img{
    width: 70px;
    height: 5px;
    display: block;
}
@media (max-width: 900px){
    .trunk-viewer-overview,
    .trunk-viewer-specs,
    .trunk-viewer-includes,
    .trunk-viewer-customization{
        padding: 18px 0;
    }
    .trunk-viewer-customization p{
        font-size: 15px;
    }
}

/* Trunk specs grid with icons — tableau cards */
.trunk-specs-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0;
}
.trunk-spec{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 8px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 4px;
    text-align: center;
    min-height: 52px;
}
.trunk-spec svg{
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #652800;
}
.trunk-spec span{
    font-family: 'Founders Grotesk';
    font-size: 12px;
    color: #333;
    line-height: 1.25;
}
.trunk-viewer-specs{
    background: transparent;
    padding: 0;
    margin: 0;
    border-radius: 0;
}

/* Trunk App section */
.trunk-app{
    display: flex;
    align-items: center;
    gap: 60px;
    padding: 100px 60px;
}
.trunk-app-text{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.trunk-app-text h2{
    font-family: 'Kormelink Roman', serif;
    font-size: 2.4rem;
    line-height: 1.2;
}
.trunk-app-text h2 em{
    font-family: 'Kormelink Italic', serif;
}
.trunk-app-text p{
    color: #666;
    line-height: 1.7;
}
.trunk-app-img{
    flex: 1;
    display: flex;
    justify-content: center;
}
.trunk-app-img img{
    max-height: 500px;
    object-fit: contain;
}

/* Trunk CTA card */
.trunk-cta-card{
    display: flex;
    align-items: center;
    background: white;
    border-radius: 32px;
    margin: 60px;
    overflow: hidden;
    padding: 80px 60px;
    gap: 60px;
}
.trunk-cta-card-text{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.trunk-cta-card-text h2{
    font-family: 'Kormelink Roman', serif;
    font-size: 3.5rem;
    line-height: 1.1;
}
.trunk-cta-card-text p{
    color: #666;
    font-size: 15px;
    line-height: 1.6;
}
.trunk-cta-card-buttons{
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}
.trunk-cta-card-img{
    flex: 1;
    display: flex;
    justify-content: center;
}
.trunk-cta-card-img img{
    max-height: 420px;
    object-fit: contain;
}

/* Trunk contact */
.trunk-contact{
    text-align: center;
    padding: 80px 60px;
    background: #282828;
    color: white;
}
.trunk-contact h2{
    font-family: 'Kormelink Roman', serif;
    font-size: 2rem;
    margin-bottom: 12px;
}
.trunk-contact p{
    color: rgba(255,255,255,0.6);
    margin-bottom: 32px;
    font-size: 15px;
}
.trunk-contact-form{
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.trunk-contact-form .form-row{
    display: flex;
    gap: 12px;
}
.trunk-contact-form input,
.trunk-contact-form textarea{
    flex: 1;
    padding: 12px 14px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    color: white;
    font-family: 'Founders Grotesk';
    font-size: 14px;
    transition: border-color 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}
.trunk-contact-form input:focus,
.trunk-contact-form textarea:focus{
    outline: none;
    border-color: rgba(255,255,255,0.5);
}
.trunk-contact-form textarea{
    resize: vertical;
    min-height: 80px;
    font-family: 'Founders Grotesk';
}
.trunk-contact-form input::placeholder,
.trunk-contact-form textarea::placeholder{
    color: rgba(255,255,255,0.4);
}
.trunk-contact-buttons{
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: stretch;
    margin-top: 12px;
}
.trunk-contact .btn-cta{
    background: white;
    color: #0A0A0A;
    padding: 14px 32px;
    font-family: 'Founders Grotesk';
    font-size: 13px;
    letter-spacing: 1px;
    width: fit-content;
    margin: 0;
    border-radius: 8px;
}
.trunk-contact-outline{
    border: 1px solid rgba(255,255,255,0.4);
    color: white;
    padding: 14px 32px;
    font-family: 'Founders Grotesk';
    font-size: 13px;
    letter-spacing: 1px;
    text-align: center;
    flex-shrink: 0;
    align-self: center;
    border-radius: 8px;
}

.temoignages {
    padding: 100px 60px;
    background-color: #0A0A0A;
}

.temoignages-header {
    display: flex;
    align-items: baseline;
    gap: 30px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.temoignages-header .works-tag {
    color: #888;
}

.temoignages-header h2 {
    font-family: 'Kormelink Roman', serif;
    font-size: 2.8rem;
    color: #fff;
    flex: 1;
}

.temoignages-header h2 em {
    font-family: 'Kormelink Italic', serif;
}

.temoignages-nav {
    display: flex;
    gap: 12px;
}

.temoignages-nav button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
    background: transparent;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.temoignages-nav button:hover {
    background: #fff;
    color: #0A0A0A;
    border-color: #fff;
}

.temoignages-carousel {
    position: relative;
    overflow: hidden;
}

.temoignages-slide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    position: absolute;
    width: 100%;
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
    align-items: center;
}

.temoignages-slide.active {
    opacity: 1;
    position: relative;
    pointer-events: all;
}

.temoignages-video {
    border-radius: 12px;
    overflow: hidden;
}

.temoignages-video video {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 9 / 16;
    max-height: 550px;
}

.temoignages-quote {
    font-family: 'Kormelink Italic', serif;
    font-size: 1.2rem;
    color: #fff;
    line-height: 1.6;
    margin-bottom: 30px;
}

.temoignages-author {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.temoignages-author strong {
    font-family: 'Founders Grotesk M', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
}

.temoignages-author span {
    font-size: 0.85rem;
    color: #888;
}

.temoignages-logo {
    margin-top: 20px;
    opacity: 0.5;
}

.temoignages-logo img {
    height: 30px;
    filter: brightness(0) invert(1);
}

/* Témoignages cartes superposées */
.temoignages-stack{
    padding: 100px 60px;
    background-color: #0A0A0A;
}
.temoignages-stack-header{
    text-align: center;
    margin-bottom: 60px;
}
.temoignages-stack-header .works-tag{
    color: #888;
}
.temoignages-stack-header h2{
    font-family: 'Kormelink Roman', serif;
    font-size: 2.8rem;
    color: #fff;
    margin-top: 12px;
}
.temoignages-stack-header h2 em{
    font-family: 'Kormelink Italic', serif;
}
.temoignages-stack-container{
    position: relative;
    height: 620px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.temoignage-card{
    position: absolute;
    width: 280px;
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 16px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Position gauche */
.temoignage-card[data-pos="left"]{
    transform: translateX(-110%) scale(0.9);
    opacity: 0.7;
    z-index: 1;
}
/* Position centre */
.temoignage-card[data-pos="center"]{
    transform: translateX(0) scale(1);
    opacity: 1;
    z-index: 3;
}
/* Position droite */
.temoignage-card[data-pos="right"]{
    transform: translateX(110%) scale(0.9);
    opacity: 0.7;
    z-index: 1;
}
.temoignage-card-video{
    border-radius: 10px;
    overflow: hidden;
}
.temoignage-card-video video{
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
}
.temoignage-card-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 16px 4px 4px;
}
.temoignage-quote{
    font-family: 'Kormelink Italic', serif;
    font-size: 0.9rem;
    color: #fff;
    line-height: 1.6;
}
.temoignage-author{
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.temoignage-author strong{
    font-family: 'Founders Grotesk M', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
}
.temoignage-author span{
    font-size: 0.8rem;
    color: #888;
}
.temoignage-logo{
    max-height: 20px;
    max-width: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.5;
    filter: brightness(0) invert(1);
}

.nav-dropdown {
    position: static;
}
.dropdown-arrow {
    margin-left: 6px;
    display: inline-block;
}

.mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #ffffff;
    padding: 40px 60px;
    border-top: 1px solid rgba(0,0,0,0.1);
    z-index: 100;
    grid-template-columns: 1fr 4fr;
    gap: 30px;
    align-items: center;
}

.nav-dropdown:hover .mega-menu {
    display: grid;
}

.mega-menu-left {
    padding-right: 40px;
    border-right: 1px solid rgba(0,0,0,0.1);
}

.mega-menu-title {
    font-family: 'Kormelink Roman', serif;
    font-size: 1.8rem;
    color: #0A0A0A;
    line-height: 1.3;
    margin-top: 12px;
}

.mega-menu-right {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.mega-item {
    text-decoration: none;
    color: #0A0A0A;
    text-align: center;
}

.mega-item img {
    width: 100%;
    max-height: 140px;
    object-fit: contain;
    margin-bottom: 10px;
}

.mega-item h4 {
    font-family: 'Founders Grotesk M', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.trunk-hero-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 90vh;
    padding: 80px 60px 40px;
    position: relative;
    overflow: hidden;
}

.trunk-hero-bg-text {
    position: absolute;
    font-family: 'Kormelink Roman', serif;
    font-size: 14rem;
    color: rgba(0,0,0,0.06);
    white-space: nowrap;
    z-index: 0;
    pointer-events: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.trunk-hero-title {
    font-family: 'Kormelink Roman', serif;
    font-size: 4rem;
    color: #0A0A0A;
    margin: 0;
    position: relative;
    z-index: 2;
}

.trunk-hero-tagline {
    font-family: 'Kormelink Roman', serif;
    font-size: 1.3rem;
    color: #666;
    line-height: 1.5;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.trunk-hero-img {
    position: relative;
    z-index: 1;
}

.trunk-hero-img img {
    max-height: 55vh;
    object-fit: contain;
}
.trunk-hero-img-zoom img{
    transform: scale(1.8);
    transform-origin: center;
}

.trunk-hero-meta {
    display: flex;
    align-items: stretch;
    gap: 20px;
    margin-top: 20px;
    position: relative;
    z-index: 2;
}

.trunk-hero-meta .btn-outline {
    border-color: #0A0A0A;
    color: #0A0A0A;
}

.trunk-hero-meta .btn-cta,
.trunk-hero-meta .btn-outline {
    padding: 14px 30px;
    margin: 0;
    font-size: 0.85rem;
    font-family: 'Founders Grotesk M', sans-serif;
    letter-spacing: 2px;
    border: 1px solid #0A0A0A;
    box-sizing: border-box;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    text-decoration: none;
}

.trunk-hero-meta .btn-cta {
    background: #0A0A0A;
    color: #fff;
}

.trunk-hero-meta .btn-outline {
    background: transparent;
    color: #0A0A0A;
}

.trunk-video {
    margin: 0 120px;
    border-radius: 2.4rem;
    overflow: hidden;
    position: relative;
}

.trunk-video video {
    width: 100%;
    max-height: 55vh;
    object-fit: contain;
    display: block;
}

.trunk-viewer {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    padding: 80px 60px;
    align-items: center;
}

.trunk-viewer-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.trunk-viewer-right {
    padding-top: 10px;
}

.trunk-viewer-right h2 {
    font-family: 'Kormelink Roman', serif;
    font-size: 2.8rem;
    margin-bottom: 8px;
    text-align: left;
}

.trunk-viewer-thumbs {
    display: flex;
    gap: 8px;
}

.trunk-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 12px;
    cursor: pointer;
    opacity: 0.4;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.trunk-thumb.active,
.trunk-thumb:hover {
    opacity: 1;
    border-color: #0A0A0A;
}

.trunk-viewer-main {
    border-radius: 12px;
    overflow: hidden;
    background: #f5f5f5;
}

.trunk-viewer-main img {
    width: 100%;
    height: 480px;
    object-fit: contain;
    display: block;
}

.trunk-viewer-colors {
    margin-bottom: 14px;
}

.trunk-color-options {
    display: flex;
    gap: 8px;
}

.trunk-color {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #e5e5e5;
    cursor: pointer;
    transition: border-color 0.3s ease;
    outline: none;
}

.trunk-color:hover,
.trunk-color.active {
    border-color: #0A0A0A;
}

.trunk-viewer-label {
    display: none;
}

.trunk-viewer-tagline {
    font-size: 1rem;
    color: #282828;
    line-height: 1.7;
    margin-bottom: 14px;
}

.trunk-viewer-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 24px;
}

.trunk-viewer-price .price-label {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 0.85rem;
    color: #888;
    letter-spacing: 0.5px;
}

.trunk-viewer-price .price-amount {
    font-family: 'Founders Grotesk M', sans-serif;
    font-size: 2rem;
    color: #0A0A0A;
    line-height: 1;
}

.trunk-viewer-price .price-currency {
    font-size: 1.4rem;
    margin-left: 2px;
    color: #0A0A0A;
}

.trunk-viewer-price .price-period {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 0.85rem;
    color: #888;
}

.trunk-viewer-price .btn-cta {
    padding: 12px 24px;
    margin: 0;
    font-size: 0.8rem;
    font-family: 'Founders Grotesk M', sans-serif;
    letter-spacing: 2px;
    background: #0A0A0A;
    color: #fff;
    border: 1px solid #0A0A0A;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.trunk-viewer-buttons {
    display: flex;
    gap: 12px;
    width: 100%;
    margin-top: 8px;
    align-items: stretch;
}
.trunk-viewer-buttons .btn-cta,
.trunk-viewer-buttons .btn-lead {
    flex: 1;
    margin: 0;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.trunk-viewer-buttons .btn-lead {
    background: transparent;
    color: #0A0A0A;
    border: 1px solid #0A0A0A;
}
.trunk-viewer-buttons .btn-lead:hover {
    background: #0A0A0A;
    color: #fff;
}
.trunk-viewer-btn {
    display: block;
    padding: 16px;
    text-align: center;
    background: #0A0A0A;
    color: #fff;
    border-radius: 12px;
    font-family: 'Founders Grotesk M', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-decoration: none;
    border: 1px solid #0A0A0A;
    box-sizing: border-box;
}

.trunk-viewer-accordion {
    border-top: 1px solid #e5e5e5;
}

.trunk-acc-item {
    border-bottom: 1px solid #e5e5e5;
}

.trunk-acc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    cursor: pointer;
}

.trunk-acc-header span:first-child {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 0.95rem;
    color: #0A0A0A;
}

.trunk-acc-arrow {
    font-size: 1rem;
    color: #888;
    transition: transform 0.3s ease;
}

.trunk-acc-item.active .trunk-acc-arrow {
    transform: rotate(180deg);
}

.trunk-acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.trunk-acc-item.active .trunk-acc-body {
    max-height: 300px;
}

.trunk-acc-body p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.7;
    padding-bottom: 28px;
}

.trunk-acc-body ul {
    list-style: none;
    padding: 0 0 28px;
}

.trunk-acc-body ul li {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.4;
    padding: 3px 0;
    padding-left: 14px;
    position: relative;
}

.trunk-acc-body ul li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: #0A0A0A;
}

.trunk-included {
    padding: 80px 60px;
    background: #FCF9E0;
}

.trunk-included-header {
    margin-bottom: 50px;
}

.trunk-included-header h2 {
    font-family: 'Kormelink Roman', serif;
    font-size: 2.5rem;
}

.trunk-included-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.trunk-included-item {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
}

.trunk-included-item img {
    max-height: 150px;
    object-fit: contain;
    margin-bottom: 16px;
}

.trunk-included-item h4 {
    font-family: 'Founders Grotesk M', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.trunk-included-item p {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
}

.trunk-specs {
    background-color: #0A0A0A;
    color: #fff;
    padding: 80px 60px;
}

.trunk-specs-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    align-items: center;
}

.trunk-specs-left h2 {
    font-family: 'Kormelink Roman', serif;
    font-size: 2.5rem;
    margin-top: 12px;
}


.trunk-spec-item h3 {
    font-family: 'Kormelink Roman', serif;
    font-size: 2.5rem;
    margin-bottom: 6px;
}

.trunk-spec-item p {
    font-family: 'Founders Grotesk M', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #666;
}

.trunk-cta {
    padding: 120px 60px;
    text-align: center;
    background-color: #FCF9E0;
}

.trunk-cta h2 {
    font-family: 'Kormelink Roman', serif;
    font-size: 3.5rem;
    margin-bottom: 16px;
}

.trunk-cta > p {
    color: #666;
    margin-bottom: 30px;
}

.trunk-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.trunk-details {
    padding: 20px 20px 60px;
}

.trunk-details p {
    font-size: 36px;
}

.trunk-details-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

.trunk-details-carousel::-webkit-scrollbar {
    display: none;
}

.cards-details-carousel {
    min-width: 400px;
    flex-shrink: 0;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    height: 400px;
}

.cards-details-carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.span-details-carousel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.5));
    padding: 20px;
    color: white;
    font-family: 'Founders Grotesk';
    font-size: 14px;
    letter-spacing: 1px;
}

.trunk-details-left-btn,
.trunk-details-right-btn {
    border-radius: 50%;
    border: solid 0.5px black;
    background: transparent;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.trunk-details-left-btn:hover,
.trunk-details-right-btn:hover {
    background: black;
    color: white;
}

.btn-details-carousel {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
.guest-exp-content{
    display: flex;
    flex-direction: column;
    gap:20px;
}
.guest-exp-steps {
    display: flex;
    flex-direction: column;
    gap: 36px;
    margin-bottom: 40px;
}
.guest-exp-step {
    border-left: 3px solid #652800;
    padding-left: 24px;
}
.guest-exp-step span {
    font-family: 'Founders Grotesk M', sans-serif;
    font-size: 0.8rem;
    color: #652800;
    letter-spacing: 3px;
    display: block;
    margin-bottom: 4px;
}
.guest-exp-step h3 {
    font-family: 'Founders Grotesk M', sans-serif;
    font-size: 1.3rem;
    margin-bottom: 6px;
}
.guest-exp-step p {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
}
.guest-exp-btn {
    width: fit-content;
    padding: 16px 32px;
    font-size: 0.9rem;
}
/* Journal hero */
.journal-hero{
    position: relative;
    margin: 90px 20px 20px;
    border-radius: 24px;
    overflow: hidden;
    height: calc(100vh - 110px);
}
.journal-hero-slide{
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
    text-decoration: none;
    color: inherit;
    display: block;
    pointer-events: none;
}
.journal-hero-slide.active{
    pointer-events: auto;
}
.journal-hero-slide.active{
    opacity: 1;
}
.journal-hero-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.journal-hero-slide::after{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.7) 100%);
}
.journal-hero-content{
    position: absolute;
    bottom: 40px;
    left: 40px;
    right: 40px;
    z-index: 2;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
    align-items: flex-start;
}
.journal-category{
    display: inline-block;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px);
    padding: 6px 14px;
    border-radius: 16px;
    font-family: 'Founders Grotesk';
    font-size: 12px;
    letter-spacing: 1px;
    width: fit-content;
}
.journal-hero-content h2{
    font-family: 'Kormelink Roman', serif;
    font-size: 2.4rem;
    line-height: 1.2;
    max-width: 600px;
    text-align: left;
}
.journal-hero-content > p{
    font-size: 0.95rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.5;
    max-width: 500px;
}
.journal-meta{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    width: 100%;
    margin-top: 8px;
}
.journal-author{
    display: flex;
    align-items: center;
    gap: 10px;
}
.journal-author img{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}
.journal-author span{
    font-family: 'Founders Grotesk';
    font-size: 13px;
}
.journal-info{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-family: 'Founders Grotesk';
    font-size: 12px;
    color: rgba(255,255,255,0.8);
}
.journal-hero-dots{
    position: absolute;
    bottom: 20px;
    left: 40px;
    z-index: 3;
    display: flex;
    gap: 8px;
}
.journal-dot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: background 0.3s ease, width 0.3s ease;
}
.journal-dot.active{
    background: white;
    width: 24px;
    border-radius: 12px;
}

/* Journal blog section */
.journal-blog{
    padding: 80px 40px 80px;
}
.journal-blog-header{
    margin-bottom: 40px;
}
.journal-blog-header h2{
    font-family: 'Kormelink Roman', serif;
    font-size: 2.8rem;
    line-height: 1.15;
    margin-bottom: 12px;
}
.journal-blog-header p{
    color: #666;
    font-size: 1rem;
}
.journal-toolbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e5e5;
    flex-wrap: wrap;
    gap: 16px;
}
.journal-filters{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.journal-filter{
    border: 1px solid #0A0A0A;
    background: #fff;
    padding: 12px 20px;
    border-radius: 24px;
    font-family: 'Founders Grotesk';
    font-size: 14px;
    letter-spacing: 0.5px;
    cursor: pointer;
    color: #0A0A0A;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.journal-filter:hover{
    background: #f4f4f4;
}
.journal-filter.active{
    background: #0A0A0A;
    color: #fff;
    border-color: #0A0A0A;
}
.journal-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 24px;
}
.journal-card{
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.journal-card:hover{
    transform: translateY(-4px);
}
.journal-card-img{
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16/10;
    margin-bottom: 6px;
}
.journal-card-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.journal-card:hover .journal-card-img img{
    transform: scale(1.05);
}
.journal-card-cat{
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    color: white;
    padding: 6px 12px;
    border-radius: 14px;
    font-family: 'Founders Grotesk';
    font-size: 11px;
    letter-spacing: 0.5px;
}
.journal-card-meta{
    font-family: 'Founders Grotesk';
    font-size: 12px;
    color: #888;
    letter-spacing: 0.3px;
}
.journal-card h3{
    font-family: 'Kormelink Roman', serif;
    font-size: 1.2rem;
    line-height: 1.3;
    color: #0A0A0A;
}
.journal-card > p{
    font-size: 0.88rem;
    color: #666;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.journal-card-author{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}
.journal-card-author img{
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}
.journal-card-author span{
    font-family: 'Founders Grotesk';
    font-size: 12px;
    color: #282828;
}
/* Protocoles tabs dans modal */
.modal-protocols-tabs{
    list-style: none;
    padding: 0;
}
.modal-protocols-tabs ~ .btn-cta{
    margin: 0 auto;
}
.protocol-tabs-bar{
    display: flex;
    gap: 8px;
    margin-bottom: 30px;
    justify-content: center;
}
.protocol-tab{
    background: transparent;
    border: 1px solid #e5e5e5;
    
    padding: 10px 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    font-family: 'Founders Grotesk';
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 1;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
}
.protocol-tab:hover{
    background: #f7f7f7;
}
.protocol-tab.active{
    background: #0A0A0A;
    color: white;
    border-color: #0A0A0A;
}
.protocol-panel{
    display: flex;
    gap: 24px;
    animation: fadeIn 0.4s ease;
    background: #FCF9E0;
    border-radius: 16px;
    overflow: hidden;
    align-items: stretch;
}
.protocol-panel img{
    width: 35%;
    max-height: 220px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 12px;
    margin: 16px;
}
.protocol-panel-text{
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* Padding equilibre haut/bas + interieur droit pour respiration */
    padding: 28px 28px 28px 0;
    justify-content: flex-start;
}
/* Layout horizontal (La Malle) : padding plus compact + gap reduit
   pour eviter le blanc en bas du panneau */
.protocol-panel-horizontal .protocol-panel-text{
    padding: 24px 28px 24px 0;
    gap: 10px;
    justify-content: center;
}
/* Titre protocole (REFRESH/PREPARE/RECHARGE) place en haut du panneau jaune */
.modal-protocol-name{
    font-family: 'Kormelink Roman', serif;
    font-size: 2.1rem;
    line-height: 1.05;
    font-weight: 600;
    color: #0A0A0A;
    margin: 0;
    letter-spacing: 0.5px;
}
.modal-protocol-subtitle{
    font-size: 16px;
    color: #652800;
    font-family: 'Kormelink Italic';
}
.modal-protocol-duration{
    display: inline-block;
    background: #0A0A0A;
    color: white;
    padding: 7px 16px 5px;
    border-radius: 20px;
    font-size: 12px;
    font-family: 'Founders Grotesk';
    letter-spacing: 1px;
    width: fit-content;
}
.protocol-panel-text p{
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    font-weight: 500;
}
/* Layout horizontal Apple-style (malle) :
   Pas de min-height -> le contenu dicte la hauteur, evite blanc en bas. */
.protocol-panel-horizontal{
    background: white;
    border: 1px solid #e5e5e5;
    height: auto;
    align-items: stretch;
}
/* Sous-titre Malle (Confort total/Excellence/etc) */
.protocol-panel-horizontal .modal-protocol-subtitle{
    font-size: 20px;
}

.protocol-panel-horizontal .modal-protocol-duration{
    display: none;
}
.protocol-panel-horizontal img{
    /* Largeur reduite (etait 45%) pour mieux matcher l'aspect portrait
       des malles -> moins d'espace vide autour du produit */
    width: 38%;
    max-height: none;
    border-radius: 0;
    margin: 0;
    object-fit: contain;
    background: transparent;
    padding: 24px 0;
    align-self: stretch;
}
.protocol-features{
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.protocol-features li{
    font-size: 20px;
    color: #282828;
    line-height: 1.5;
    padding-left: 24px;
    position: relative;
}
.protocol-features li::before{
    content: '✓';
    position: absolute;
    left: 0;
    color: #652800;
    font-weight: bold;
}
.protocol-footer{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #e5e5e5;
    border-top: 1px solid #e5e5e5;
    margin-top: 24px;
}
.protocol-footer-item{
    background: white;
    padding: 16px 20px;
    text-align: center;
}
.protocol-footer-item strong{
    display: block;
    font-family: 'Founders Grotesk M', sans-serif;
    font-size: 13px;
    color: #0A0A0A;
    margin-bottom: 4px;
}
.protocol-footer-item span{
    font-size: 11px;
    color: #666;
}
/* Gallery (communication) */
.service-modal-body .modal-gallery{
    list-style: none;
    padding: 0;
}
.gallery-track{
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
}
.gallery-track::-webkit-scrollbar{
    display: none;
}
.gallery-slide{
    min-width: 250px;
    flex-shrink: 0;
    scroll-snap-align: start;
    border-radius: 16px;
    overflow: hidden;
    background: #FCF9E0;
}
.gallery-slide img{
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}
.gallery-slide span{
    display: block;
    padding: 14px 16px;
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 0.85rem;
    color: #0A0A0A;
    text-align: center;
}
.gallery-nav{
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}
.gallery-nav button{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #e5e5e5;
    background: white;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.gallery-nav button:hover{
    background: #0A0A0A;
    color: white;
    border-color: #0A0A0A;
}
/* Timeline (process) */
.service-modal-body .modal-timeline{
    list-style: none;
    padding: 0;
}
.modal-timeline-wrapper{
    display: flex;
    gap: 40px;
    align-items: center;
}
.modal-timeline-img{
    width: 35%;
    flex-shrink: 0;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 3/4;
}
.modal-timeline-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.timeline-container{
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: 40px;
    flex: 1;
}
.timeline-container::before{
    content: '';
    position: absolute;
    left: 15px;
    top: 16px;
    bottom: 40px;
    width: 2px;
    background: #e5e5e5;
    overflow: hidden;
}
.timeline-container::after{
    content: '';
    position: absolute;
    left: 15px;
    top: 16px;
    width: 2px;
    height: 0;
    background: #652800;
    /* Animation fluidifiee : 5s ease-in-out + pause finale (hold a 100% jusqu'a 85%) */
    animation: timelineFill 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes timelineFill{
    0%   { height: 0; }
    70%  { height: calc(100% - 56px); }
    100% { height: calc(100% - 56px); }
}
.timeline-step{
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding-bottom: 26px;
    position: relative;
}
.timeline-step:last-child{
    padding-bottom: 0;
}
.timeline-step:last-child .timeline-dot{
    bottom: auto;
}
.timeline-dot{
    position: absolute;
    left: -40px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0A0A0A;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.timeline-dot span{
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 11px;
    color: white;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 1;
    padding-top: 2px;
}
.timeline-content h4{
    font-family: 'Kormelink Roman', serif;
    font-size: 1.35rem;
    color: #0A0A0A;
    margin: 0 0 6px;
}
.timeline-content p{
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 1rem;
    color: #333;
    line-height: 1.5;
    margin: 0;
}
/* Features grid (outil de gestion) */
.service-modal-body .modal-features-bento{
    list-style: none;
    padding: 0;
}
.features-bento-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 12px;
}
.features-bento-img{
    grid-row: 1 / 4;
    grid-column: 2;
    border-radius: 16px;
    overflow: hidden;
    /* Force le stretch sur toute la hauteur du grid pour matcher
       le stack des 3 cards (etait : image plus courte que cards) */
    align-self: stretch;
    min-height: 100%;
}
.features-bento-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.features-bento-card{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    background: #FCF9E0;
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.features-bento-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.features-bento-card .modal-feature-icon{
    width: 24px;
    height: 24px;
    color: #652800;
}
.features-bento-card strong{
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 1rem;
    color: #0A0A0A;
}
.features-bento-card span{
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 0.92rem;
    color: #666;
    line-height: 1.4;
}
.service-modal-body .modal-features-grid li{
    padding-left: 0;
}
.service-modal-body .modal-features-grid li::before{
    display: none;
}
.modal-feature-item{
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: #FCF9E0;
    border-radius: 12px;
    align-items: center;
    text-align: center;
}
.modal-feature-icon{
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: #652800;
}
.modal-feature-icon svg{
    width: 24px;
    height: 24px;
}
.modal-feature-text{
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.modal-feature-text strong{
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 0.85rem;
    color: #0A0A0A;
}
.modal-feature-text span{
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 0.78rem;
    color: #666;
    line-height: 1.4;
}
.modal-feature-item{
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}
.modal-feature-item:hover{
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
/* Team grid (coiffeurs) */
.service-modal-body .modal-team-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    list-style: none;
    padding: 0;
    
    max-width: 900px;
    margin: 0 auto;
}
.service-modal-body .modal-team-grid li{
    padding-left: 0;
}
.service-modal-body .modal-team-grid li::before{
    display: none;
}
.modal-team-card{
    text-align: center;
}
.modal-team-photos{
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 3/4;
    margin-bottom: 16px;
}
.modal-team-portrait,
.modal-team-action{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease;
}

.modal-team-action{
    display: none;
}
.modal-team-card h4{
    font-family: 'Kormelink Roman', serif;
    font-size: 1.2rem;
    color: #0A0A0A;
    margin: 0;
}
.modal-team-card span{
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 0.85rem;
    color: #666;
    letter-spacing: 1px;
}

/* ============== EVENT PAGE ============== */
.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.btn-whatsapp svg {
    width: 18px;
    height: 18px;
}
.hero-event {
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://res.cloudinary.com/djy5i6bhi/image/upload/f_auto,q_auto/oom-private-event-guerlain');
    background-size: cover;
    background-position: center;
}
.hero-event .hero-content h1 {
    color: #FCF9E0;
    text-align: left;
}
.hero-event .hero-content h1 em {
    font-family: 'Kormelink Italic', serif;
}

.hero-event .hero-content p {
    font-size: 22px;
    line-height: 1.4;
    max-width: 640px;
    margin-left: 0;
}
.hero-stats {
    display: flex;
    gap: 40px;
    margin: 24px 0;
}
.hero-stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hero-stat-num {
    font-family: 'Kormelink Roman', serif;
    font-size: 2rem;
    color: #FCF9E0;
    line-height: 1;
}
.hero-stat-label {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 12px;
    color: rgba(245, 241, 230, 0.7);
    letter-spacing: 1px;
}

/* Event categories */
.event-categories {
    padding: 70px 60px;
    background: #fff;
}
.event-categories-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 36px;
}

.event-categories .protocol-tabs-bar {
    margin-bottom: 36px !important;
    gap: 12px !important;
}
.event-categories .protocol-tab {
    padding: 14px 28px !important;
    font-size: 16px !important;
    letter-spacing: 1.2px !important;
    border-radius: 24px !important;
}
.event-categories-header h2 {
    font-family: 'Kormelink Roman', serif;
    font-size: 2.8rem;
    line-height: 1.15;
    color: #0A0A0A;
    margin: 12px 0 16px;
}
.event-categories-header h2 em {
    font-family: 'Kormelink Italic', serif;
    color: #652800;
}
.event-categories-header p {
    color: #666;
    font-size: 1rem;
    line-height: 1.6;
}

.event-cat-panel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1300px;
    margin: 0 auto;
}
.event-cat-card {
    cursor: pointer;
    text-align: center;
}
.event-cat-img {
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 3/4;
    margin-bottom: 16px;
}
.event-cat-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.event-cat-card:hover .event-cat-img img {
    transform: scale(1.06);
}
.event-cat-card h3 {
    font-family: 'Kormelink Roman', serif;
    font-weight: normal;
    font-size: 1.3rem;
    color: #0A0A0A;
    line-height: 1.2;
    margin-bottom: 6px;
}

.event-cat-logo {
    display: block;
    height: 32px;
    max-height: 32px;
    width: 110px;
    max-width: 110px;
    object-fit: contain;
    margin: 10px auto 0;
    filter: grayscale(1);
    opacity: 0.6;
}
/* Logos qui apparaissent visuellement petits (aspect-ratio defavorable
   dans la bounding box) : scale up cible (Accor wordmark) */
.event-cat-logo[src*="Accor_Logo"],
.event-cat-logo[src*="Festival_de_Cannes"] {
    transform: scale(1.25);
    transform-origin: center;
}
.event-categories-cta {
    text-align: center;
    margin-top: 50px;
}

/* Event process */
.event-process {
    padding: 70px 60px;
    background: #FCF9E0;
}
.event-process-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}
.event-process-header h2 {
    font-family: 'Kormelink Roman', serif;
    font-size: 2.8rem;
    line-height: 1.15;
    color: #0A0A0A;
}
.event-process-header h2 em {
    font-family: 'Kormelink Italic', serif;
}
.event-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto 40px;
}
.event-process-grid-4 {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1400px;
    gap: 16px;
}
.process-mockup-card video {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 12px;
    display: block;
}
.process-video {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 14px;
    display: block;
    margin: 0 auto;
}
.process-photo-frame {
    position: relative;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
}
.process-photo-frame img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.event-process-step:hover .process-photo-frame img {
    transform: scale(1.06);
}
.setup-timer {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    border-radius: 10px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.setup-timer-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.setup-timer-num {
    font-family: 'Kormelink Roman', serif;
    font-size: 1.6rem;
    color: #0A0A0A;
    line-height: 1;
    font-feature-settings: "tnum";
}
.setup-timer-unit {
    font-family: 'Kormelink Roman', serif;
    font-size: 1rem;
    color: #0A0A0A;
}
.setup-timer-label {
    font-family: 'Kormelink Roman', serif;
    font-size: 0.7rem;
    color: #888;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 2px;
}
.event-process-step {
    background: #fff;
    border: 1px solid #e8e2d3;
    border-radius: 24px;
    padding: 24px 20px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.event-process-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0A0A0A;
    color: #fff;
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 13px;
    font-feature-settings: "tnum";
    line-height: 1;
    padding-top: 3px;
    margin-bottom: 20px;
    margin-top: -48px;
    text-indent: 0;
    box-sizing: border-box;
}
.event-process-step h3 {
    font-family: 'Kormelink Roman', serif;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.3;
    color: #0A0A0A;
    margin-bottom: 20px;
    max-width: 240px;
}
.event-process-visual {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Step 1 — grille 2x3 de cartes spa */
.process-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 10px;
    width: 100%;
}
.process-service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.process-service-card img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.4s ease;
}
.process-service-card:hover img {
    transform: scale(1.04);
}
.process-service-card span {
    font-family: 'Kormelink Italic', serif;
    font-size: 13px;
    color: #0A0A0A;
    text-align: center;
}

/* Step 2 — mockup card */
.process-mockup-card {
    background: #fff;
    border: 1px solid #e8e2d3;
    border-radius: 18px;
    padding: 12px;
    width: 100%;
    max-width: 280px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.mockup-card-badge {
    position: absolute;
    top: 24px;
    right: 24px;
    background: #652800;
    color: #fff;
    padding: 5px 10px;
    border-radius: 16px;
    font-family: 'Founders Grotesk M', sans-serif;
    font-size: 11px;
    z-index: 2;
}
.process-mockup-card img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 12px;
    transition: transform 0.5s ease;
}
.event-process-step:hover .process-mockup-card img {
    transform: scale(1.06);
}
.mockup-card-tag {
    display: block;
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: #888;
    text-transform: uppercase;
    text-align: left;
    padding: 0 8px;
}
.process-mockup-card h4 {
    font-family: 'Kormelink Roman', serif;
    font-weight: normal;
    font-size: 1rem;
    color: #0A0A0A;
    text-align: left;
    padding: 4px 8px;
    margin: 0;
}
.process-mockup-card p {
    font-size: 0.78rem;
    color: #888;
    text-align: left;
    padding: 0 8px 12px;
    margin: 0;
}
.mockup-card-buttons {
    display: flex;
    gap: 6px;
    padding: 0 8px 8px;
}
.mockup-btn-light, .mockup-btn-dark {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 11px;
    cursor: pointer;
}
.mockup-btn-light {
    background: #FCF9E0;
    color: #0A0A0A;
}
.mockup-btn-dark {
    background: #0A0A0A;
    color: #fff;
}

/* Step 3 — testimonial éditorial (même dimensions que .process-mockup-card) */
.process-testimonial {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    position: relative;
    border-radius: 18px;
    overflow: hidden;
}
.process-testimonial img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block;
}
.process-testimonial-card {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.process-testimonial-stars {
    color: #652800;
    font-size: 13px;
    letter-spacing: 2px;
    line-height: 1;
}
.stars-hover .star-fill {
    position: relative;
    display: inline-block;
    color: #652800;
}
.stars-hover .star-fill::before {
    content: '☆';
}
.stars-hover .star-fill::after {
    content: '★';
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.event-process-step:hover .stars-hover .star-fill::after {
    opacity: 1;
}
.stars-hover .star-fill:nth-child(1)::after { transition-delay: 0.05s; }
.stars-hover .star-fill:nth-child(2)::after { transition-delay: 0.2s; }
.stars-hover .star-fill:nth-child(3)::after { transition-delay: 0.35s; }
.stars-hover .star-fill:nth-child(4)::after { transition-delay: 0.5s; }
.stars-hover .star-fill:nth-child(5)::after { transition-delay: 0.65s; }
.process-testimonial-card p {
    font-family: 'Kormelink Italic', serif;
    font-size: 14px;
    color: #0A0A0A;
    line-height: 1.4;
    margin: 0;
    text-align: center;
}
.process-testimonial-author {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    color: #888;
    text-transform: uppercase;
}
.event-process-step > p {
    color: #666;
    font-size: 1rem;
    line-height: 1.55;
    max-width: 320px;
    margin-top: 24px;
}
.event-process-cta {
    text-align: center;
}

/* Event cases */
.event-cases {
    padding: 80px 60px;
    background: #fff;
}
.event-cases-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}
.event-cases-header h2 {
    font-family: 'Kormelink Roman', serif;
    font-size: 2.8rem;
    color: #0A0A0A;
    margin-top: 12px;
}
.event-cases-header h2 em {
    font-family: 'Kormelink Italic', serif;
    color: #652800;
}
.event-cases-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 60px;
}
.event-cases-grid {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.event-cases-grid::-webkit-scrollbar {
    display: none;
}
.event-cases-grid .event-case-card {
    flex: 0 0 calc((100% - 24px) / 2);
    scroll-snap-align: start;
}
.event-cases-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #e5e5e5;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, color 0.3s ease;
    z-index: 2;
}
.event-cases-arrow:hover {
    background: #0A0A0A;
    color: white;
    border-color: #0A0A0A;
}
.event-cases-arrow svg {
    width: 18px;
    height: 18px;
}
.event-cases-prev { left: 0; }
.event-cases-next { right: 0; }
.event-case-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e8e2d3;
}
.event-case-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 320px;
}
.event-case-content {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.event-case-logo {
    height: 26px;
    width: auto;
    align-self: flex-start;
}
.event-case-quote {
    font-family: 'Kormelink Italic', serif;
    font-size: 1.25rem;
    color: #0A0A0A;
    line-height: 1.4;
    margin: auto 0;
    padding: 12px 0;
}
.event-case-role {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 0.8rem;
    color: #888;
    letter-spacing: 0.3px;
    line-height: 1.4;
}
.event-case-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 12px;
    line-height: 1;
    color: #666;
    border-top: 1px solid #f0eadc;
    padding-top: 14px;
    margin-top: auto;
}
.event-case-meta span {
    white-space: nowrap;
}
.event-case-meta svg {
    width: 13px;
    height: 13px;
    color: #888;
    vertical-align: middle;
    margin-right: 6px;
    margin-top: -2px;
}
.event-case-rating {
    color: #652800;
    font-size: 13px;
    letter-spacing: 2px;
    line-height: 1;
}
.event-case-card:hover .stars-hover .star-fill::after {
    opacity: 1;
}
.event-case-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 12px;
    color: #0A0A0A;
    text-decoration: none;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 12px;
    align-self: flex-start;
    border-bottom: 1px solid #0A0A0A;
    padding-bottom: 2px;
    transition: gap 0.3s ease;
}
.event-case-link:hover {
    gap: 10px;
}
.event-case-link svg {
    width: 14px;
    height: 14px;
}

/* Event feature */
.event-feature {
    padding: 80px 60px;
    background: #FCF9E0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.event-feature-text {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-left: 240px;
}
.event-feature-text h2 {
    font-family: 'Kormelink Roman', serif;
    font-size: 2.6rem;
    line-height: 1.15;
    color: #0A0A0A;
    margin: 8px 0 0;
    text-align: left;
}
.event-feature-text p {
    text-align: left;
}
.event-feature-text h2 em {
    font-family: 'Kormelink Italic', serif;
    color: #652800;
}
.event-feature-text p {
    color: #666;
    font-size: 1rem;
    line-height: 1.6;
}
.event-feature-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.event-feature-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #282828;
    font-size: 0.95rem;
    line-height: 1.4;
}
.event-feature-list li svg {
    width: 22px;
    height: 22px;
    color: #652800;
    flex-shrink: 0;
}
.event-feature-text .btn-cta {
    margin: 16px 0 0;
    width: fit-content;
}
.event-feature-visual {
    display: flex;
    justify-content: center;
}
.phone-frame {
    position: relative;
    width: 280px;
    aspect-ratio: 9/19.5;
    background: #0A0A0A;
    border-radius: 44px;
    padding: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.phone-frame-notch {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 26px;
    background: #0A0A0A;
    border-radius: 14px;
    z-index: 2;
}
.phone-frame-screen {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 34px;
    display: block;
}
.phone-mockup {
    width: 320px;
    background: #fff;
    border: 8px solid #0A0A0A;
    border-radius: 36px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.phone-mockup-header {
    padding: 0 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.phone-mockup-header span {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 11px;
    color: #888;
}
.phone-mockup-header strong {
    font-family: 'Founders Grotesk M', sans-serif;
    font-size: 14px;
    color: #0A0A0A;
}
.phone-mockup-hero {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16/10;
}
.phone-mockup-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.phone-mockup-hero-text {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    color: #fff;
}
.phone-mockup-hero-text h5 {
    font-family: 'Kormelink Roman', serif;
    font-size: 1.1rem;
    margin: 0 0 2px;
    line-height: 1.2;
}
.phone-mockup-hero-text span {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 11px;
    opacity: 0.9;
}
.phone-mockup-card {
    background: #FCF9E0;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.phone-mockup-card strong {
    font-family: 'Founders Grotesk M', sans-serif;
    font-size: 12px;
    color: #0A0A0A;
}
.phone-mockup-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.phone-mockup-card ul li {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 12px;
    color: #666;
    display: flex;
    gap: 10px;
}
.phone-mockup-card ul li span {
    font-family: 'Founders Grotesk M', sans-serif;
    color: #0A0A0A;
    min-width: 38px;
}
.phone-mockup-msg p {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 12px;
    color: #666;
    line-height: 1.5;
    margin: 0;
}
.phone-mockup-author {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.phone-mockup-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #652800;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Founders Grotesk M', sans-serif;
    font-size: 11px;
}
.phone-mockup-author > span {
    font-family: 'Founders Grotesk M', sans-serif;
    font-size: 11px;
    color: #0A0A0A;
}

/* Contact split (Anantara-style) */
.contact-split {
    position: relative;
    margin: 90px 20px 20px;
    border-radius: 24px;
    overflow: hidden;
    min-height: calc(100vh - 110px);
    display: flex;
    align-items: center;
    color: #fff;
}
.contact-split-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.contact-split-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.contact-split-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(10,10,10,0.7) 0%, rgba(10,10,10,0.5) 50%, rgba(10,10,10,0.3) 100%);
}
.contact-split-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    padding: 80px 60px;
    align-items: center;
}

@media (max-width: 1024px) {
    .contact-split-inner {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 16px 12px !important;
    }
    .contact-split-card {
        order: 0;
        padding: 18px 16px !important;
    }
    .contact-split-left {
        order: 1;
    }
    .contact-split-left .contact-info-grid,
    .contact-split-left .contact-intro,
    .contact-split-left .works-tag,
    .contact-split-left h1 {
        display: none !important;
    }
    
    .contact-split-card .contact-whatsapp-inline {
        padding: 10px 12px !important;
    }
    .contact-split-card .contact-divider {
        margin: 8px 0 !important;
    }
    .contact-split-card h2 {
        font-size: 1.3rem !important;
        margin: 0 0 4px !important;
    }
    .contact-split-card > p {
        font-size: 0.8rem !important;
        margin: 0 0 12px !important;
    }
    .contact-card-form {
        gap: 10px !important;
    }
    .contact-card-form .form-row {
        gap: 8px !important;
    }
    .contact-card-form input,
    .contact-card-form textarea {
        padding: 10px 12px !important;
        font-size: 14px !important;
    }
    .contact-card-form textarea {
        min-height: 80px !important;
    }
    .contact-pills-group {
        gap: 6px !important;
    }
    .contact-pills {
        gap: 6px !important;
    }
    .contact-pill {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
    .contact-card-submit {
        padding: 12px 24px !important;
        font-size: 13px !important;
        margin-top: 4px !important;
    }
}
.contact-split-left {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 520px;
}
.works-tag-light {
    color: rgba(255,255,255,0.7);
    border-color: rgba(255,255,255,0.3);
}
.contact-split-left h1 {
    font-family: 'Kormelink Roman', serif;
    font-size: 3rem;
    line-height: 1.1;
    color: #fff;
    margin: 0;
    text-align: left;
}
.contact-split-left h1 em {
    font-family: 'Kormelink Italic', serif;
    color: #fff;
    opacity: 0.85;
}
.contact-intro {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255,255,255,0.8);
    margin: 0;
}
.contact-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 32px;
    margin-top: 16px;
    padding-top: 28px;
    border-top: 1px solid rgba(255,255,255,0.18);
}
.contact-info-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.contact-info-block h4 {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin: 0;
    font-weight: normal;
}
.contact-info-block a,
.contact-info-block p {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 15px;
    color: #fff;
    text-decoration: none;
    margin: 0;
    line-height: 1.5;
    transition: opacity 0.2s ease;
}
.contact-info-block a:hover {
    opacity: 0.7;
}
.contact-socials {
    display: flex;
    gap: 16px;
}

.contact-split-card {
    background: #fff;
    border-radius: 18px;
    padding: 40px 36px;
    color: #0A0A0A;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    max-width: 520px;
    margin-left: auto;
    width: 100%;
    box-sizing: border-box;
}
.contact-split-card h2 {
    font-family: 'Kormelink Roman', serif;
    font-size: 1.6rem;
    margin: 0 0 8px;
    color: #0A0A0A;
    text-align: left;
}
.contact-split-card > p {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 14px;
    color: #888;
    margin: 0 0 24px;
}
.contact-card-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.contact-card-form .form-row {
    display: flex;
    gap: 12px;
}
.contact-card-form input,
.contact-card-form textarea {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 14px 10px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    color: #0A0A0A;
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 14px;
    line-height: 1;
    transition: border-color 0.2s ease;
}
.contact-card-form input:focus,
.contact-card-form textarea:focus {
    outline: none;
    border-color: #652800;
}
.contact-card-form textarea {
    resize: vertical;
    min-height: 90px;
    padding: 14px;
    font-family: 'Founders Grotesk', sans-serif;
    line-height: 1.4;
}
.contact-card-form input::placeholder,
.contact-card-form textarea::placeholder {
    color: #888;
}
.contact-pills-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0;
}
.contact-pills-label {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 12px;
    color: #888;
}
.contact-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.contact-pill {
    padding: 10px 16px 6px;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    background: transparent;
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 13px;
    line-height: 1;
    color: #282828;
    cursor: pointer;
    transition: all 0.2s ease;
}
.contact-pill:hover {
    border-color: #652800;
    color: #652800;
}
.contact-pill.active {
    background: #0A0A0A;
    border-color: #0A0A0A;
    color: #fff;
}
.contact-card-submit {
    margin: 8px 0 0;
    width: 100%;
}

@media (max-width: 900px) {
    .contact-split-inner {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 60px 30px;
    }
    .contact-split-left h1 {
        font-size: 2.2rem;
    }
    .contact-split-card {
        margin-left: 0;
    }
    .contact-info-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* ============================
   STORY / ABOUT US PAGE — éditorial mode
   ============================ */

/* 1. Hero — photo Tom plein écran NB + titre énorme overlap */
.story-hero {
    position: relative;
    height: calc(100vh - 110px);
    margin: 90px 20px 20px;
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
}
.story-hero-img {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.story-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%) contrast(1.05);
}
.story-hero-title {
    position: absolute;
    bottom: 6vh;
    left: 0;
    right: 0;
    z-index: 2;
    margin: 0;
    text-align: center;
    font-family: 'Kormelink Italic', serif;
    font-size: clamp(5rem, 16vw, 18rem);
    line-height: 0.85;
    letter-spacing: -0.02em;
    color: #fff;
    mix-blend-mode: difference;
    pointer-events: none;
}

/* 2-4. Story blocks — alternating image/text à la Byredo */
.story-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding: 70px 8vw;
    max-width: none;
    margin: 0;
    background: #fff;
}
.story-block-text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 480px;
}
.story-block-year {
    font-family: 'Kormelink Roman', serif;
    font-size: clamp(5rem, 10vw, 9rem);
    line-height: 1;
    color: #0A0A0A;
    letter-spacing: -0.02em;
    font-feature-settings: 'tnum';
}
.story-block-label {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 11px;
    letter-spacing: 3px;
    color: #888;
    text-transform: uppercase;
}
.story-block-text h2 {
    font-family: 'Kormelink Roman', serif;
    font-size: clamp(2rem, 3.5vw, 3rem);
    line-height: 1.1;
    color: #0A0A0A;
    margin: 0;
    text-align: left;
    letter-spacing: -0.01em;
}
.story-block-text h2 em {
    font-family: 'Kormelink Italic', serif;
    color: #652800;
}
.story-block-text p {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #0A0A0A;
    margin: 0;
}
.story-block-text p em {
    font-family: 'Kormelink Italic', serif;
    font-style: normal;
    color: #652800;
}
.story-block-img {
    overflow: hidden;
    aspect-ratio: 4/5;
}
.story-block-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.story-block-text-right .story-block-text {
    margin-left: auto;
}

/* 5. Valeurs — photos brand book + SVG icons */
.story-values {
    padding: 140px 60px;
    background: #FCF9E0;
}
.story-values-header {
    text-align: center;
    margin-bottom: 80px;
}
.story-values-header h2 {
    font-family: 'Kormelink Roman', serif;
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.05;
    color: #0A0A0A;
    margin-top: 12px;
    text-align: center;
    letter-spacing: -0.01em;
}
.story-values-header h2 em {
    font-family: 'Kormelink Italic', serif;
    color: #652800;
}
.story-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1300px;
    margin: 0 auto;
}
.story-value-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.story-value-img {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
    background: #f7f7f7;
}
.story-value-img > img:first-child {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.story-value-card:hover .story-value-img > img:first-child {
    transform: scale(1.04);
}
.story-value-icon {
    position: absolute;
    bottom: 24px;
    left: 24px;
    width: 56px;
    height: 56px;
    filter: invert(1) drop-shadow(0 2px 12px rgba(0,0,0,0.4));
    z-index: 2;
    transition: transform 0.4s ease;
}
.story-value-card:hover .story-value-icon {
    transform: rotate(15deg);
}
.story-value-card h3 {
    font-family: 'Kormelink Roman', serif;
    font-size: 1.4rem;
    color: #0A0A0A;
    margin: 0;
    text-align: left;
}
.story-value-card p {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #0A0A0A;
    margin: 0;
}

/* 6. Discover cards — Byredo style */
.story-discover {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0;
    background: #fff;
}
.story-discover-card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/5;
    text-decoration: none;
    color: #fff;
    display: block;
}
.story-discover-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.story-discover-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.5) 100%);
    pointer-events: none;
}
.story-discover-card:hover img {
    transform: scale(1.04);
}
.story-discover-text {
    position: absolute;
    bottom: 40px;
    left: 40px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.story-discover-text span {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 11px;
    letter-spacing: 2.5px;
    color: rgba(255,255,255,0.85);
    text-transform: uppercase;
}
.story-discover-text h3 {
    font-family: 'Kormelink Roman', serif;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    color: #fff;
    margin: 0;
    text-align: left;
    line-height: 1.1;
}

@media (max-width: 900px) {
    .story-hero {
        height: calc(80vh - 110px);
    }
    .story-block {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 80px 24px;
    }
    .story-block-text-right {
        display: flex;
        flex-direction: column-reverse;
    }
    .story-discover {
        grid-template-columns: 1fr;
    }
    .story-discover-card {
        aspect-ratio: 16/10;
    }
    .story-values {
        padding: 80px 24px;
    }
    .story-values-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
}

/* ==========================================================
   RESPONSIVE BASELINE — mobile-first overrides
   Tout est mobile-only via @media — rien ne casse le desktop.
   ========================================================== */

/* ---- Bouton contact mobile (entre logo et burger) ---- */
.btn-contact-mobile {
    display: none;
}

/* ---- Burger menu ---- */
.nav-burger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1200;
    position: fixed;
    top: 14px;
    right: 16px;
    width: 44px;
    height: 44px;
}
.nav-burger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #0A0A0A;
    margin: 5px 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
header.nav-open .nav-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
header.nav-open .nav-burger span:nth-child(2) {
    opacity: 0;
}
header.nav-open .nav-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ====== TABLETTE & MOBILE (≤ 1024px) ====== */
@media (max-width: 1024px) {
    /* Header : burger visible, nav cachée par défaut */
    header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 16px 20px !important;
    }
    .nav-burger {
        display: block !important;
        position: static !important;
        top: auto !important;
        right: auto !important;
    }
    header > nav {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        margin: 0 !important;
        background: #fff !important;
        z-index: 1090 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    header.nav-open > nav {
        opacity: 1;
        pointer-events: auto;
    }
    header > nav ul {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: center !important;
        width: 100%;
    }
    header > nav ul li {
        text-align: center !important;
    }
    header > nav ul li a {
        font-size: 24px !important;
        font-family: 'Kormelink Roman', serif !important;
    }
    header .btn-book {
        display: none !important;
    }
    /* Bouton contact mobile : noir plein, compact, collé près du burger */
    .btn-contact-mobile {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 16px !important;
        background: #0A0A0A !important;
        border: 1px solid #0A0A0A !important;
        color: #fff !important;
        text-decoration: none !important;
        font-family: 'Founders Grotesk', sans-serif !important;
        font-size: 11px !important;
        letter-spacing: 1.2px !important;
        line-height: 1 !important;
        border-radius: 2px !important;
        margin: 0 14px 0 auto !important;
        white-space: nowrap;
        transition: opacity 0.25s ease;
    }
    .btn-contact-mobile:hover,
    .btn-contact-mobile:active {
        opacity: 0.85 !important;
    }
    /* Caché quand menu burger ouvert (le burger reste accessible) */
    header.nav-open .btn-contact-mobile {
        opacity: 0 !important;
        pointer-events: none !important;
    }
    /* Mega menu désactivé en mobile, devient juste un lien */
    .mega-menu {
        display: none !important;
    }
    .nav-dropdown:hover .mega-menu {
        display: none !important;
    }

    /* Heroes universels */
    .hero,
    .hero-event,
    .hero-hotel,
    .hero-ent,
    .story-hero,
    .journal-hero,
    .contact-split,
    .trunk-hero {
        margin: 80px 12px 12px !important;
        border-radius: 16px !important;
    }
    .hero {
        padding: 40px 24px !important;
    }
    .hero-content h1 {
        font-size: 36px !important;
        line-height: 1.1 !important;
    }
    .hero-content p {
        font-size: 14px !important;
    }
    .hero-buttons,
    .hero-stats {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    .hero-stats {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Trunk hero */
    .trunk-hero-title {
        font-size: 2.5rem !important;
    }
    .trunk-hero-bg-text {
        font-size: 22vw !important;
    }
    .trunk-hero-img img {
        max-width: 80vw;
        max-height: 50vh;
    }

    /* H1 & H2 généraux */
    h1 {
        font-size: 40px !important;
    }
    h2 {
        font-size: 28px !important;
    }

    /* Sections génériques : padding réduit */
    .stats-section,
    .estimateur,
    .temoignages,
    .social-proof,
    .stories,
    .luxury,
    .event,
    .works-section,
    .protocols-section,
    .hotel-trunks,
    .service-cards,
    .guest-experience,
    .rituels,
    .trunk-viewer,
    .trunk-cta,
    .trunk-details-carousel,
    .event-categories,
    .event-process,
    .event-cases,
    .event-feature,
    .journal-blog,
    .first-fold + section {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    .stats-section,
    .estimateur,
    .temoignages,
    .stories,
    .luxury,
    .event,
    .works-section,
    .protocols-section,
    .hotel-trunks,
    .service-cards,
    .guest-experience,
    .trunk-viewer,
    .trunk-cta,
    .event-categories,
    .event-process,
    .event-cases,
    .event-feature {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    /* Grids génériques → 1 colonne */
    .container-col,
    .stories-grid,
    .container-event,
    .works-grid,
    .protocols-grid,
    .hotel-trunks-grid,
    .service-cards-list,
    .guest-exp-top,
    .stats-image-wrapper,
    .stats-wrapper,
    .event-cat-grid,
    .event-process-list,
    .event-cases-grid,
    .event-feature,
    .trunk-viewer,
    .trunk-cta-card,
    .form-row {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    /* Carrousel cards événement : reste en scroll horizontal mais cards plein écran */
    .event-cases-grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px !important;
    }
    .event-case-card {
        flex: 0 0 85vw;
        scroll-snap-align: center;
    }

    /* Container col home (hero hôtel/entreprise) */
    .col-home {
        height: 60vh !important;
    }

    /* Rituels : layout vertical */
    .rituels {
        flex-direction: column !important;
        height: auto !important;
    }
    .rituels-left,
    .rituels-right {
        width: 100% !important;
        padding: 40px 24px !important;
    }

    /* Trunk viewer : empilement vertical */
    .trunk-viewer {
        display: flex !important;
        flex-direction: column !important;
    }
    .trunk-viewer-left,
    .trunk-viewer-right {
        width: 100% !important;
    }
    .trunk-viewer-thumbs {
        flex-direction: row !important;
        overflow-x: auto;
    }
    .trunk-viewer-main img {
        max-height: 50vh;
    }

    /* Stats cards */
    .stats-card {
        width: 100% !important;
    }

    /* Service cards bento → grille simple */
    .service-cards-list {
        display: flex !important;
        flex-direction: column !important;
    }
    .pillers-card {
        width: 100% !important;
        aspect-ratio: 4/3 !important;
    }

    /* Forms */
    .trunk-contact,
    .contact-split {
        padding: 60px 20px !important;
    }
    .trunk-contact-form .form-row,
    .contact-card-form .form-row {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .contact-split-inner {
        grid-template-columns: 1fr !important;
        padding: 50px 24px !important;
        gap: 32px !important;
    }
    .contact-split-card {
        margin-left: 0 !important;
        max-width: 100% !important;
        padding: 32px 24px !important;
    }
    .contact-info-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 24px !important;
    }
    .contact-pills {
        flex-wrap: wrap;
    }

    /* Story page */
    .story-hero {
        height: calc(80vh - 100px) !important;
    }
    .story-hero-title {
        font-size: clamp(3.5rem, 18vw, 8rem) !important;
    }
    .story-block {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        padding: 60px 24px !important;
    }
    .story-block-text-right {
        display: flex !important;
        flex-direction: column-reverse !important;
    }
    .story-block-year {
        font-size: 4rem !important;
    }
    .story-discover {
        grid-template-columns: 1fr !important;
    }
    .story-discover-card {
        aspect-ratio: 16/10 !important;
    }

    /* Journal */
    .journal-hero {
        height: calc(70vh - 100px) !important;
    }
    .journal-hero-content h2 {
        font-size: 1.5rem !important;
    }
    .journal-toolbar {
        flex-direction: column !important;
        gap: 16px !important;
    }
    .journal-grid {
        grid-template-columns: 1fr !important;
    }

    /* Process / timeline */
    .event-process-step {
        flex-direction: column !important;
    }
    .event-process-num {
        margin: 0 0 16px 0 !important;
    }

    /* Modal */
    .service-modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 90vh !important;
        flex-direction: column !important;
    }
    .service-modal-image {
        height: 30vh !important;
        width: 100% !important;
    }

    /* Footer */
    footer nav ul {
        flex-direction: column;
        gap: 16px !important;
        align-items: center;
        padding: 30px 20px;
    }

    /* WhatsApp widget — réduit de 20% (56→45) */
    .whatsapp-widget {
        bottom: 20px !important;
        right: 20px !important;
        width: 45px !important;
        height: 45px !important;
    }
    .whatsapp-widget svg {
        width: 22px !important;
        height: 22px !important;
    }

    /* Bandeau marquee logo */
    .bandeau-track img {
        height: 40px !important;
        max-width: 110px !important;
    }
    .bandeau-track > * {
        margin-right: 40px !important;
    }
    .social-proof img {
        height: 40px !important;
        max-width: 110px !important;
    }
    /* Event mobile : flèches cachées (CTA mobile déjà géré par event-cta-mobile) */
    .event-controls {
        display: none !important;
    }
}

/* ====== MOBILE (≤ 600px) — ajustements supplémentaires ====== */
@media (max-width: 600px) {
    .hero-content h1 {
        font-size: 30px !important;
    }
    h1 {
        font-size: 32px !important;
    }
    h2 {
        font-size: 24px !important;
    }
    .trunk-hero-title {
        font-size: 2rem !important;
    }
    .trunk-hero-bg-text {
        display: none;
    }
    .stats-card h3 {
        font-size: 2.2rem !important;
    }
    .story-hero-title {
        font-size: clamp(3rem, 18vw, 6rem) !important;
    }
    .contact-info-grid {
        grid-template-columns: 1fr !important;
    }
    .btn-cta,
    .btn-book,
    .btn-outline,
    .btn-lead,
    .btn-segment {
        font-size: 12px !important;
        padding: 12px 22px 8px !important;
    }
}

/* ==========================================================
   RESPONSIVE PASS 2 — exhaustive overrides per page/section
   Covers gaps left by the baseline above. Mobile-only via @media.
   ========================================================== */

@media (max-width: 1024px) {

    /* ---- Body & globals ---- */
    body {
        overflow-x: hidden !important;
    }
    html, body {
        max-width: 100vw;
    }
    img, video {
        max-width: 100%;
    }

    /* ---- Header / first-fold ---- */
    .first-fold {
        height: 100dvh !important;
        min-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        padding-top: 72px !important;
        box-sizing: border-box !important;
    }
    header {
        padding: 12px 16px !important;
        grid-template-columns: auto auto !important;
    }
    .logo {
        width: 90px !important;
    }
    header > nav ul li a {
        text-decoration: none !important;
        color: #0A0A0A !important;
    }
    /* Logo inside opened nav remains visible above */
    header.nav-open .logo {
        position: relative;
        z-index: 1100;
    }
    /* Dropdown arrow inside mobile nav: hide since mega-menu disabled */
    header > nav .dropdown-arrow {
        display: none !important;
    }

    /* ---- HERO (home, hotel, ent) — hauteur compacte ---- */
    .hero {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 70vh !important;
        max-height: calc(100dvh - 96px) !important;
        margin: 0 12px 12px !important;
        border-radius: 16px !important;
    }
    /* Hero des pages métier (hotel/entreprise/malles) : pas d'écart avec le header */
    .hero.hero-hotel,
    .hero.hero-hotel-video {
        margin-top: 0 !important;
    }
    .hero h1 {
        font-size: clamp(40px, 11vw, 64px) !important;
        text-align: center !important;
        line-height: 1.05 !important;
        letter-spacing: -0.3px;
        padding: 0 12px;
    }
    .hero h2 {
        font-size: 16px !important;
        text-align: center !important;
        padding: 0 24px;
    }
    /* Heroes des pages metier (titres plus longs) — taille intermediaire */
    .hero-content h1 {
        font-size: clamp(42px, 12vw, 60px) !important;
        line-height: 1.05 !important;
    }
    /* Flèche scroll cachée sur mobile (le user sait qu'il faut scroller) */
    .scroll-arrow {
        display: none !important;
    }
    .hero-content {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        padding: 40px 24px !important;
        gap: 14px !important;
    }
    .hero-content h1 {
        font-size: 36px !important;
        text-align: left !important;
    }
    .hero-content p {
        font-size: 14px !important;
        line-height: 1.5 !important;
        text-align: left !important;
    }
    .hero-buttons {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        gap: 10px !important;
    }
    .hero-buttons .btn-outline,
    .hero-buttons .btn-lead,
    .hero-buttons .btn-cta {
        width: 100% !important;
        text-align: center !important;
        box-sizing: border-box;
    }
    .hero-stats {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 18px 24px !important;
        margin: 16px 0 !important;
    }
    .hero-stat-num {
        font-size: 1.4rem !important;
    }
    .hero-stat-label {
        font-size: 11px !important;
    }
    .scroll-arrow {
        font-size: 24px !important;
        bottom: 12px !important;
    }

    /* ---- Container-col home — 2 cols côte à côte pour voir les 2 choix sans scroll ---- */
    .container-col {
        grid-template-columns: 1fr 1fr !important;
    }
    .col-home {
        height: 70vh !important;
        padding: 20px 12px !important;
    }
    .col-home .btn-segment {
        font-size: 11px !important;
        padding: 10px 14px 7px !important;
        letter-spacing: 0.5px !important;
        text-align: center;
    }

    /* ---- Event section home — carrousel mobile ---- */
    .event {
        padding: 40px 0 !important;
    }
    .event-intro {
        padding: 0 24px !important;
    }
    .event-layout {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        align-items: stretch !important;
    }
    /* CTA mobile : visible sous le carrousel, desktop caché */
    .event-cta-desktop {
        display: none !important;
    }
    .event-cta-mobile {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        justify-self: center !important;
        width: auto !important;
        max-width: none !important;
        margin: 36px 0 0 !important;
        padding: 22px 44px !important;
        font-size: 14px !important;
        letter-spacing: 1.8px !important;
        text-align: center !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
    }
    .event-intro h2 {
        font-size: 28px !important;
    }
    .container-event {
        display: flex !important;
        flex-direction: row !important;
        gap: 14px !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        scroll-padding-left: 24px !important;
        padding: 0 24px 12px !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .container-event::-webkit-scrollbar {
        display: none;
    }
    .event-item {
        flex: 0 0 78vw !important;
        min-width: 78vw !important;
        max-width: 78vw !important;
        scroll-snap-align: start !important;
    }
    .event-item img {
        border-radius: 12px;
    }

    /* ---- Luxury — fond noir pur (Rich Black DA) ---- */
    .luxury {
        height: auto !important;
        padding: 60px 0 0 !important;
        background: #0A0A0A !important;
    }
    .luxury h2 {
        font-size: 28px !important;
        padding: 0 24px;
        color: #fff !important;
    }
    .luxury .event-tag {
        padding: 0 24px;
        margin-bottom: 32px;
        color: rgba(255,255,255,0.7) !important;
    }
    .carroussel {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
    }
    .carroussel::-webkit-scrollbar {
        display: none;
    }
    /* Panneau immersif : photo en bg full-bleed, texte en overlay */
    .malle {
        position: relative !important;
        flex: none !important;
        width: 100% !important;
        height: 80vh !important;
        min-height: 520px !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        left: auto !important;
        opacity: 1 !important;
        overflow: hidden;
        background: #0A0A0A;
    }
    /* Image packshot HTML cachée — on utilise des bg-images lifestyle par malle */
    .malle img,
    .malle-active img,
    .malle-shampoo img,
    .malle-shampoo.malle-active img {
        display: none !important;
    }
    /* Photos lifestyle en background, applicables seulement sur mobile */
    .malle-revolution {
        background-image: url('https://res.cloudinary.com/djy5i6bhi/image/upload/f_auto,q_auto/66b0d4c4f4797638802c359a_revolution-cta') !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
    .malle-regency {
        background-image: url('https://res.cloudinary.com/djy5i6bhi/image/upload/f_auto,q_auto/66a73add77811aae85a3ab81_QUEEN_VOUVERT_V2_BLANC_TIROIRS-2x') !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
    .malle-edo {
        background-image: url('https://res.cloudinary.com/djy5i6bhi/image/upload/f_auto,q_auto/66b0da2514260b8971c6653e_edo-cta_20_1') !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
    .malle-shampoo {
        background-image: url('https://res.cloudinary.com/djy5i6bhi/image/upload/f_auto,q_auto/66b35df6ea94e6bc2a6a4740_revolution-sink-2') !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
    /* Gradient cinéma : la photo "émerge du noir" en haut + fond vers noir en bas
       → fondu naturel entre panneaux + lisibilité du texte */
    .malle::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom,
            #0A0A0A 0%,
            rgba(10,10,10,0.5) 18%,
            rgba(10,10,10,0.1) 35%,
            rgba(10,10,10,0.1) 60%,
            rgba(10,10,10,0.5) 82%,
            #0A0A0A 100%);
        z-index: 1;
        pointer-events: none;
    }
    .malle-info {
        position: absolute !important;
        bottom: 40px !important;
        left: 50% !important;
        transform: translateX(-50%);
        width: calc(100% - 48px) !important;
        max-width: 480px;
        opacity: 1 !important;
        padding: 0 !important;
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: center;
        text-align: center;
        z-index: 2;
    }
    .malle-info h3 {
        font-family: 'Kormelink Roman', serif;
        font-size: 32px !important;
        margin: 0 !important;
        color: #fff !important;
        letter-spacing: 0.5px;
    }
    .malle-info p {
        display: none !important;
    }
    /* CTA Moynat-style : juste texte blanc souligné + flèche, pas de boîte */
    .malle-info .btn-cta {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 12px !important;
        letter-spacing: 2px !important;
        color: #fff !important;
        text-transform: uppercase !important;
        border-radius: 0 !important;
        position: relative;
        display: inline-block !important;
        padding-bottom: 4px !important;
        border-bottom: 1px solid rgba(255,255,255,0.6) !important;
    }
    .malle-info .btn-cta::after {
        content: '  →';
        margin-left: 4px;
    }
    .malle-hidden {
        display: flex !important;
    }
    .malle-indicator {
        display: none !important;
    }

    /* ---- Stories grid home ---- */
    .stories {
        padding: 60px 20px !important;
    }
    .stories-grid {
        grid-template-columns: 1fr 1fr !important;
        grid-auto-rows: 180px !important;
        gap: 12px !important;
    }
    .story-tall,
    .story-wide {
        grid-row: auto !important;
        grid-column: auto !important;
    }
    .story-label {
        font-size: 12px !important;
        padding: 12px !important;
    }

    /* ---- Tailored ---- */
    .tailored-section {
        padding: 40px 16px !important;
    }
    .tailored {
        width: 100% !important;
        padding: 32px 20px !important;
        gap: 20px !important;
        box-sizing: border-box;
    }
    .tailored p {
        font-size: 18px !important;
    }
    .form-row {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .form-row input {
        width: 100% !important;
        font-size: 14px !important;
    }
    .form-row .btn-cta {
        width: auto !important;
        max-width: 100% !important;
        margin: 8px auto 0 !important;
        text-align: center;
        padding: 14px 32px 10px !important;
        font-size: 13px !important;
        letter-spacing: 1px !important;
        white-space: normal;
    }

    /* ---- Social proof ---- */
    .social-proof {
        padding: 50px 16px !important;
    }
    .social-proof h2 {
        font-size: 26px !important;
        margin-bottom: 24px !important;
    }
    .social-proof p {
        font-size: 16px !important;
        margin-bottom: 20px !important;
    }
    .social-proof img {
        width: auto !important;
        height: 70px !important;
        object-fit: contain;
    }
    .certif-badges {
        gap: 30px !important;
        margin-top: 24px !important;
        flex-wrap: wrap;
    }
    .certif-item img {
        height: 50px !important;
    }
    .gptw-link {
        font-size: 11px !important;
        padding: 10px 16px !important;
        margin-top: 20px !important;
        text-align: center;
    }

    /* ---- Stats section (entreprise) ---- */
    .stats-section {
        padding: 40px 20px !important;
    }
    .stats-title {
        font-size: 26px !important;
        text-align: center !important;
    }
    .stats-image-wrapper {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .stats-image-wrapper img {
        height: 280px !important;
    }
    .stats-wrapper {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        padding: 0 !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .stats-card {
        max-width: 100% !important;
        padding: 22px 20px !important;
    }
    .stats-card h3 {
        font-size: 44px !important;
    }
    .stats-card p {
        font-size: 14px !important;
    }

    /* ---- Hotel : guest-experience ---- */
    .guest-experience {
        padding: 50px 20px !important;
        gap: 30px !important;
    }
    .guest-exp-top {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    .guest-exp-content h2 {
        font-size: 28px !important;
        text-align: center;
    }
    .guest-exp-step {
        padding-left: 18px !important;
    }
    .guest-exp-step h3 {
        font-size: 1.1rem !important;
    }
    .guest-exp-step p {
        font-size: 0.9rem !important;
    }
    .guest-exp-video video {
        max-height: 360px;
    }
    .guest-exp-overlay {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .guest-exp-overlay .stats-card {
        padding: 22px 20px !important;
        grid-row: auto !important;
        grid-template-rows: auto !important;
    }
    .guest-exp-overlay .stats-card h3 {
        font-size: 36px !important;
    }
    .guest-exp-btn {
        align-self: stretch;
        text-align: center;
    }

    /* ---- Hotel : service-cards (bento) ---- */
    .service-cards {
        padding: 50px 20px !important;
    }
    .service-cards-header {
        margin-bottom: 32px !important;
    }
    .service-cards-header h2 {
        font-size: 26px !important;
    }
    .service-cards-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-auto-rows: 240px !important;
        gap: 14px !important;
    }
    .service-card,
    .service-card:nth-child(1),
    .service-card:nth-child(2),
    .service-card:nth-child(3),
    .service-card:nth-child(4),
    .service-card:nth-child(5) {
        grid-column: 1 !important;
        grid-row: auto !important;
        width: 100% !important;
    }
    .service-card-text h3 {
        font-size: 1.2rem !important;
    }
    .service-card-text p {
        font-size: 0.85rem !important;
    }

    /* ---- Service-modal ---- */
    .service-modal {
        padding: 16px !important;
    }
    .service-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92vh !important;
        grid-template-columns: 1fr !important;
        border-radius: 16px !important;
    }
    .service-modal-image {
        height: 200px !important;
    }
    .service-modal-image img {
        height: 200px;
    }
    .service-modal-body {
        padding: 28px 22px !important;
        gap: 14px !important;
    }
    .service-modal-body h2 {
        font-size: 1.4rem !important;
    }
    .service-modal-body p {
        font-size: 0.92rem !important;
    }
    .service-modal-close {
        top: 12px !important;
        right: 12px !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }
    .protocol-tabs-bar {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .protocol-tab {
        font-size: 11px !important;
        padding: 9px 14px 6px !important;
    }
    .protocol-panel,
    .protocol-panel-horizontal {
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        gap: 0 !important;
    }
    .protocol-panel-text p {
        min-height: 0 !important;
    }
    .protocol-panel img,
    .protocol-panel-horizontal img {
        width: 100% !important;
        max-height: 200px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }
    .protocol-panel-text {
        padding: 10px 18px 18px !important;
        gap: 8px !important;
        justify-content: flex-start !important;
    }
    .modal-protocol-duration {
        white-space: nowrap !important;
    }

    /* ---- Team grid (Nos coiffeurs) : stack vertical avec layout horizontal
            par card — photo carrée 110px à gauche + nom/rôle à droite ---- */
    .service-modal-body .modal-team-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 14px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }
    .service-modal-body .modal-team-grid li {
        flex: unset !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 0 !important;
    }
    .service-modal-body .modal-team-grid li::before {
        display: none !important;
    }
    .modal-team-card {
        display: grid !important;
        grid-template-columns: 140px 1fr !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "photo name"
            "photo role" !important;
        gap: 4px 18px !important;
        align-items: center !important;
        text-align: left !important;
    }
    /* Quinconce : cards paires inversées (photo droite / texte gauche).
       Les cards sont des <div> direct enfants de .modal-team-grid. */
    .service-modal-body .modal-team-grid > .modal-team-card:nth-child(2n) {
        grid-template-columns: 1fr 140px !important;
        grid-template-areas:
            "name photo"
            "role photo" !important;
        text-align: right !important;
    }
    .modal-team-photos {
        grid-area: photo !important;
        aspect-ratio: 1/1 !important;
        margin-bottom: 0 !important;
        border-radius: 14px !important;
        width: 140px !important;
        height: 140px !important;
        align-self: center !important;
    }
    .modal-team-card h4 {
        grid-area: name !important;
        font-family: 'Kormelink Roman', serif !important;
        font-size: 1.6rem !important;
        margin: 0 !important;
        line-height: 1.05 !important;
        letter-spacing: -0.5px !important;
        align-self: end !important;
    }
    .modal-team-card span {
        grid-area: role !important;
        font-family: 'Founders Grotesk M', sans-serif !important;
        font-size: 0.78rem !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase !important;
        margin: 0 !important;
        color: #652800 !important;
        line-height: 1.4 !important;
        align-self: start !important;
    }
    /* Animation slide-in en quinconce — odd glissent depuis la gauche, even depuis la droite */
    @keyframes teamSlideInLeft {
        from { opacity: 0; transform: translateX(-32px); }
        to { opacity: 1; transform: translateX(0); }
    }
    @keyframes teamSlideInRight {
        from { opacity: 0; transform: translateX(32px); }
        to { opacity: 1; transform: translateX(0); }
    }
    .service-modal-body .modal-team-grid > .modal-team-card {
        opacity: 0;
        animation: teamSlideInLeft 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    .service-modal-body .modal-team-grid > .modal-team-card:nth-child(2n) {
        animation-name: teamSlideInRight;
    }
    .service-modal-body .modal-team-grid > .modal-team-card:nth-child(1) {
        animation-delay: 0.15s;
    }
    .service-modal-body .modal-team-grid > .modal-team-card:nth-child(2) {
        animation-delay: 0.35s;
    }
    .service-modal-body .modal-team-grid > .modal-team-card:nth-child(3) {
        animation-delay: 0.55s;
    }

    /* Désactive le hover swap portrait→action sur mobile (tactile) */
    .modal-team-card:hover .modal-team-portrait,
    .modal-team-card:active .modal-team-portrait {
        opacity: 1 !important;
    }
    .modal-team-card:hover .modal-team-action,
    .modal-team-card:active .modal-team-action {
        opacity: 0 !important;
    }

    /* ---- Outil de gestion mobile : image hero TOP + 6 cards carrees 2x3 dessous ---- */
    .features-bento-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    .features-bento-img {
        grid-row: 1 !important;
        grid-column: 1 / -1 !important;
        aspect-ratio: 16/9 !important;
        max-height: 100px !important;
        min-height: 0 !important;
        width: 100% !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        margin-bottom: 2px;
    }
    .features-bento-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    /* Cards super compactes (aspect-ratio 2/1) pour fit iPhone 12 sans scroll */
    .features-bento-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        aspect-ratio: 2 / 1 !important;
        gap: 4px !important;
        padding: 6px 6px !important;
        background: #FCF9E0 !important;
        border-radius: 10px !important;
        overflow: hidden !important;
    }
    .features-bento-card .modal-feature-icon {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
        margin-bottom: 5px !important;
    }
    .features-bento-card strong {
        font-size: 0.7rem !important;
        line-height: 1.1 !important;
    }
    .features-bento-card span {
        font-size: 0.58rem !important;
        line-height: 1.2 !important;
        color: #555 !important;
    }
    /* Service modal body super compact pour Outil de gestion iPhone 12 */
    .service-modal-body:has(.features-bento-grid) {
        padding: 14px 14px !important;
        gap: 8px !important;
    }
    .service-modal-body:has(.features-bento-grid) h2 {
        font-size: 1.2rem !important;
        margin: 0 !important;
    }
    .service-modal-body:has(.features-bento-grid) > p {
        font-size: 0.76rem !important;
        line-height: 1.35 !important;
        margin: 0 !important;
    }
    .service-modal-body:has(.features-bento-grid) .btn-cta {
        padding: 10px 22px !important;
        font-size: 11px !important;
        margin-top: 4px !important;
    }
    .features-bento-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 14px !important;
    }
    .features-bento-card {
        padding: 8px 8px !important;
        gap: 2px !important;
    }
    .features-bento-card .modal-feature-icon {
        width: 18px !important;
        height: 18px !important;
    }
    .features-bento-card strong {
        font-size: 0.72rem !important;
        line-height: 1.15 !important;
    }
    .features-bento-card span {
        font-size: 0.6rem !important;
        line-height: 1.25 !important;
    }

    /* ---- Modal Timeline (De l'audit au lancement) : stack vertical
            image hero top + 4 étapes en pleine largeur dessous ---- */
    .modal-timeline-wrapper {
        flex-direction: column !important;
        gap: 24px !important;
        align-items: stretch !important;
    }
    .modal-timeline-img {
        width: 100% !important;
        aspect-ratio: 16/9 !important;
        max-height: 220px !important;
        border-radius: 14px !important;
    }
    .timeline-container {
        padding-left: 32px !important;
        flex: unset !important;
    }
    .timeline-container::before,
    .timeline-container::after {
        left: 11px !important;
    }
    .timeline-step {
        gap: 14px !important;
        padding-bottom: 28px !important;
    }
    .timeline-dot {
        left: -32px !important;
        width: 26px !important;
        height: 26px !important;
    }
    .timeline-dot span {
        font-size: 10px !important;
    }
    .timeline-content h4 {
        font-size: 1.15rem !important;
    }
    .timeline-content p {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }

    /* ---- Témoignages "They chose OOM" : carrousel horizontal scroll-snap natif
            une card par vue, swipe natif iOS, vidéos visibles partout ---- */
    .temoignages-stack {
        padding: 36px 0 44px !important;
        overflow: hidden !important;
    }
    .temoignages-stack-header {
        padding: 0 24px !important;
        margin-bottom: 24px !important;
    }
    .temoignages-stack-container {
        position: relative !important;
        display: flex !important;
        flex-direction: row !important;
        height: auto !important;
        gap: 12px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 4px 10vw 12px !important;
        margin: 0 !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        scrollbar-width: none !important;
    }
    .temoignages-stack-container::-webkit-scrollbar {
        display: none !important;
    }
    .temoignage-card,
    .temoignage-card[data-pos="left"],
    .temoignage-card[data-pos="center"],
    .temoignage-card[data-pos="right"] {
        position: relative !important;
        flex: 0 0 80vw !important;
        width: 80vw !important;
        max-width: 360px !important;
        min-width: 0 !important;
        scroll-snap-align: center !important;
        margin: 0 !important;
        padding: 14px !important;
        transform: none !important;
        opacity: 1 !important;
        z-index: auto !important;
        pointer-events: auto !important;
    }
    .temoignages-stack-container.dragging .temoignage-card {
        transition: none !important;
    }
    .temoignage-card-video,
    .temoignage-card-video video,
    .temoignage-card-poster {
        aspect-ratio: 4/5 !important;
        max-height: none !important;
    }
    .temoignage-card-content {
        padding: 14px 6px 4px !important;
        gap: 10px !important;
    }
    .temoignage-quote {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
    .temoignage-author strong {
        font-size: 0.8rem !important;
    }
    .temoignage-author span {
        font-size: 0.72rem !important;
    }
    .temoignage-logo {
        max-height: 24px !important;
        width: auto !important;
    }

    /* ---- Carousel dots (témoignages + malles) ---- */
    .carousel-dots {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 14px 0 0 !important;
    }
    .carousel-dot {
        width: 6px !important;
        height: 6px !important;
        border-radius: 50% !important;
        background: rgba(255,255,255,0.3) !important;
        transition: width 0.3s ease, background 0.3s ease !important;
    }
    .carousel-dots[data-theme="light"] .carousel-dot {
        background: rgba(0,0,0,0.2) !important;
    }
    .carousel-dot.active {
        width: 24px !important;
        border-radius: 4px !important;
        background: rgba(255,255,255,0.85) !important;
    }
    .carousel-dots[data-theme="light"] .carousel-dot.active {
        background: #0A0A0A !important;
    }

    /* ---- Bouton modal CTA (RÉSERVER UNE DÉMO) plus grand mobile ---- */
    .service-modal-body .btn-cta {
        padding: 18px 36px !important;
        font-size: 13px !important;
        letter-spacing: 1.8px !important;
        margin-top: 24px !important;
        align-self: stretch !important;
        text-align: center !important;
    }
    .protocol-footer {
        display: none !important;
    }

    /* ---- Hotel : hotel-trunks ---- */
    .hotel-trunks {
        padding: 50px 20px !important;
    }
    .hotel-trunks-header h2 {
        font-size: 26px !important;
    }
    .hotel-trunks-header p {
        font-size: 0.9rem !important;
    }
    .hotel-trunks-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 18px !important;
    }
    .hotel-trunk-item h3 {
        font-size: 0.9rem !important;
    }
    .hotel-trunk-item p {
        font-size: 0.8rem !important;
    }

    /* ---- Estimateur ---- */
    .estimateur {
        padding: 50px 20px !important;
    }
    .estimateur h2 {
        font-size: 24px !important;
    }
    .est-question {
        font-size: 18px !important;
    }
    .est-cards {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    .est-card {
        width: 100% !important;
    }
    .est-form {
        flex-direction: column !important;
    }
    .est-form input {
        width: 100% !important;
        box-sizing: border-box;
    }
    .est-result-trunk {
        flex-direction: column !important;
    }
    .est-result-details {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .est-nav {
        flex-direction: column-reverse !important;
        gap: 10px !important;
    }
    .est-btn,
    .est-back {
        width: 100% !important;
        text-align: center;
    }

    /* ---- Rituels (entreprise) ---- */
    .rituels {
        flex-direction: column !important;
        height: auto !important;
    }
    .rituels-left,
    .rituels-right {
        width: 100% !important;
    }
    .rituels-left {
        padding: 80px 20px 40px !important;
        align-items: stretch !important;
    }
    .rituels-right {
        height: 280px !important;
    }
    .rituels-list {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-bottom: 24px;
    }
    .rituels-item {
        font-size: 12px !important;
        padding: 9px 16px 6px !important;
    }
    .rituels-big-name {
        font-size: 36px !important;
    }
    .rituels-desc {
        font-size: 15px !important;
    }
    .rituels-buttons {
        flex-direction: column !important;
        align-items: stretch;
    }
    .rituels-btn-demo,
    .rituels-btn-brochure {
        width: 100%;
        text-align: center;
        padding: 14px 20px 10px !important;
    }
    .rituels-tag {
        gap: 6px !important;
    }
    .rituels-tag span {
        font-size: 11px !important;
        padding: 7px 12px 4px !important;
    }

    /* ---- Event process ---- */
    .event-process {
        padding: 50px 20px !important;
    }
    .event-process-header h2 {
        font-size: 26px !important;
    }
    .event-process-grid,
    .event-process-grid-4 {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .event-process-step {
        padding: 24px 20px !important;
    }
    .event-process-num {
        margin-top: -36px !important;
    }
    .process-services-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    .process-service-card span {
        font-size: 11px !important;
    }

    /* ---- Event categories ---- */
    .event-categories {
        padding: 50px 20px !important;
    }
    .event-categories-header h2 {
        font-size: 26px !important;
    }
    .event-cat-panel {
        grid-template-columns: 1fr 1fr !important;
        gap: 14px !important;
    }
    .event-cat-card h3 {
        font-size: 1rem !important;
    }
    .event-categories-cta {
        margin-top: 30px !important;
    }

    /* ---- Event cases ---- */
    .event-cases {
        padding: 50px 20px !important;
    }
    .event-cases-header h2 {
        font-size: 26px !important;
    }
    .event-cases-wrapper {
        padding: 0 !important;
    }
    .event-cases-arrow {
        display: none !important;
    }
    .event-cases-grid {
        gap: 14px !important;
    }
    .event-cases-grid .event-case-card {
        flex: 0 0 88vw !important;
    }
    .event-case-card {
        grid-template-columns: 1fr !important;
    }
    .event-case-content {
        padding: 22px !important;
        gap: 10px !important;
    }
    .event-case-quote {
        font-size: 1rem !important;
    }
    .event-case-img img {
        min-height: 200px !important;
        max-height: 240px;
    }

    /* ---- Event feature (phone-frame) ---- */
    .event-feature {
        padding: 50px 20px !important;
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }
    .event-feature-text {
        padding-left: 0 !important;
        text-align: center;
        align-items: stretch;
    }
    .event-feature-text h2 {
        font-size: 26px !important;
        text-align: center !important;
    }
    .event-feature-text p {
        text-align: center !important;
    }
    .event-feature-text .btn-cta {
        align-self: center;
    }
    .event-feature-list {
        margin: 0 auto;
        text-align: left;
    }
    .phone-frame {
        width: 220px !important;
    }
    .phone-mockup {
        width: 100% !important;
        max-width: 280px;
    }

    /* ---- Temoignages stack ---- */
    .temoignages-stack {
        padding: 50px 20px !important;
    }
    .temoignages-stack-header {
        margin-bottom: 32px !important;
    }
    .temoignages-stack-header h2 {
        font-size: 26px !important;
    }
    /* (Anciennes règles de stack vertical neutralisées — voir bloc carrousel
       superposé plus bas dans la même @media) */

    /* ---- Trunk-contact ---- */
    .trunk-contact {
        padding: 50px 20px !important;
    }
    .trunk-contact h2 {
        font-size: 24px !important;
    }
    .trunk-contact-form {
        max-width: 100% !important;
    }
    .trunk-contact-form input,
    .trunk-contact-form textarea {
        font-size: 14px;
    }
    .trunk-contact-buttons {
        flex-direction: column !important;
        gap: 10px;
    }
    .trunk-contact-buttons .btn-cta,
    .trunk-contact-buttons .trunk-contact-outline {
        width: 100%;
        text-align: center;
    }

    /* ---- Trunk hero (regency / revolution / edo / shampoo) ---- */
    .trunk-hero-center {
        min-height: 70vh !important;
        padding: 50px 24px 30px !important;
    }
    .trunk-hero-title {
        font-size: 2.4rem !important;
    }
    .trunk-hero-tagline {
        font-size: 1rem !important;
    }
    .trunk-hero-img img {
        max-height: 36vh !important;
    }
    .trunk-hero-img-zoom img {
        transform: scale(1.3) !important;
    }
    .trunk-hero-meta {
        flex-direction: column !important;
        gap: 10px !important;
        width: 100%;
    }
    .trunk-hero-meta .btn-cta,
    .trunk-hero-meta .btn-outline {
        width: 100%;
        text-align: center;
        padding: 12px 24px !important;
        height: 44px;
    }

    /* ---- Trunk viewer ---- */
    .trunk-viewer {
        padding: 50px 20px !important;
        gap: 30px !important;
    }
    .trunk-viewer-right h2 {
        font-size: 28px !important;
    }
    .trunk-viewer-tagline {
        font-size: 0.95rem !important;
    }
    .trunk-viewer-main img {
        height: 320px !important;
    }
    .trunk-viewer-thumbs {
        gap: 8px !important;
    }
    .trunk-thumb {
        width: 56px !important;
        height: 56px !important;
        flex-shrink: 0;
    }
    .trunk-color {
        width: 26px !important;
        height: 26px !important;
    }
    .trunk-specs-grid {
        grid-template-columns: 1fr !important;
    }
    .trunk-viewer-buttons {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .trunk-viewer-buttons .btn-cta,
    .trunk-viewer-buttons .btn-lead {
        width: 100% !important;
    }

    /* ---- Trunk details carousel ---- */
    .trunk-details {
        padding: 30px 20px 50px !important;
    }
    .trunk-details p {
        font-size: 22px !important;
        line-height: 1.3;
    }
    .trunk-details-carousel {
        gap: 12px !important;
    }
    .cards-details-carousel {
        min-width: 80vw !important;
        height: 320px !important;
    }
    .btn-details-carousel {
        justify-content: center;
    }

    /* ---- Trunk CTA card ---- */
    .trunk-cta {
        padding: 40px 20px !important;
    }
    .trunk-cta h2 {
        font-size: 26px !important;
    }
    .trunk-cta-card {
        flex-direction: column !important;
        margin: 24px 16px !important;
        padding: 36px 24px !important;
        gap: 28px !important;
        border-radius: 20px !important;
    }
    .trunk-cta-card-text h2 {
        font-size: 26px !important;
        text-align: left;
    }
    .trunk-cta-card-buttons {
        flex-direction: column !important;
        align-items: stretch;
    }
    .trunk-cta-card-img img {
        max-height: 240px;
    }
    .trunk-app {
        flex-direction: column !important;
        padding: 50px 20px !important;
        gap: 30px !important;
    }
    .trunk-app-text h2 {
        font-size: 26px !important;
    }
    .trunk-app-img img {
        max-height: 320px;
    }

    /* ---- Journal hero ---- */
    .journal-hero {
        height: calc(70vh - 100px) !important;
        margin: 80px 12px 12px !important;
        border-radius: 16px !important;
    }
    .journal-hero-content {
        bottom: 40px !important;
        left: 20px !important;
        right: 20px !important;
        gap: 10px !important;
    }
    .journal-hero-content h2 {
        font-size: 1.4rem !important;
        line-height: 1.25 !important;
    }
    .journal-hero-content > p {
        font-size: 0.85rem !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .journal-meta {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .journal-info {
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
    }
    .journal-hero-dots {
        left: 20px !important;
        bottom: 14px !important;
    }

    /* ---- Journal blog ---- */
    .journal-blog {
        padding: 50px 20px !important;
    }
    .journal-blog-header h2 {
        font-size: 28px !important;
    }
    .journal-grid {
        grid-template-columns: 1fr !important;
        gap: 28px 0 !important;
    }
    .journal-toolbar {
        align-items: stretch !important;
    }
    .journal-filters {
        gap: 6px !important;
    }
    .journal-filter {
        font-size: 12px !important;
        padding: 8px 14px !important;
    }
    .journal-card h3 {
        font-size: 1.1rem !important;
    }
    .journal-card > p {
        font-size: 0.85rem !important;
    }

    /* ---- Story page ---- */
    .story-hero {
        height: calc(70vh - 100px) !important;
        margin: 80px 12px 12px !important;
        border-radius: 16px !important;
    }
    .story-block {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        padding: 60px 20px !important;
    }
    .story-block-text-right {
        display: flex !important;
        flex-direction: column-reverse !important;
    }
    .story-block-text {
        max-width: 100% !important;
    }
    .story-block-text h2 {
        text-align: center !important;
    }
    .story-block-img {
        aspect-ratio: 4/3;
    }
    .story-values {
        padding: 60px 20px !important;
    }
    .story-values-header {
        margin-bottom: 40px !important;
    }
    .story-values-grid {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }
    .story-discover {
        grid-template-columns: 1fr !important;
    }
    .story-discover-card {
        aspect-ratio: 16/10 !important;
    }
    .story-discover-text {
        bottom: 24px !important;
        left: 24px !important;
    }

    /* ---- Contact split ---- */
    .contact-split {
        margin: 80px 12px 12px !important;
        min-height: auto !important;
        border-radius: 16px !important;
    }
    .contact-split-inner {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        padding: 50px 24px !important;
    }
    .contact-split-left h1 {
        font-size: 2rem !important;
        line-height: 1.15 !important;
    }
    .contact-intro {
        font-size: 14px !important;
    }
    .contact-info-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 18px !important;
    }
    .contact-info-block h4 {
        font-size: 10px !important;
    }
    .contact-info-block a,
    .contact-info-block p {
        font-size: 14px !important;
    }
    .contact-split-card {
        margin-left: 0 !important;
        max-width: 100% !important;
        padding: 28px 22px !important;
    }
    .contact-split-card h2 {
        font-size: 1.3rem !important;
    }
    .contact-card-form .form-row {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .contact-card-form input,
    .contact-card-form textarea {
        font-size: 14px;
    }

    /* ---- Footer ---- */
    footer {
        padding: 24px 20px !important;
    }
    footer nav ul {
        gap: 14px !important;
    }
    footer nav ul li a {
        font-size: 13px !important;
    }
}

/* ====== MOBILE STRICT (≤ 600px) ====== */
@media (max-width: 600px) {

    /* Globals */
    h1 {
        font-size: 30px !important;
    }
    h2 {
        font-size: 22px !important;
    }
    h3 {
        font-size: 22px !important;
    }

    /* Hero — laisse les valeurs du 1024px (clamp 18vw + flex pleine page) */
    .hero-content {
        padding: 28px 20px !important;
    }
    .hero-content h1 {
        font-size: 28px !important;
    }
    .hero-content p {
        font-size: 13px !important;
    }
    .hero-stats {
        gap: 12px 20px !important;
    }
    .hero-stat-num {
        font-size: 1.2rem !important;
    }

    /* Container col home */
    .col-home {
        height: 60vh !important;
    }
    .col-home h2 {
        font-size: 18px !important;
    }

    /* Event home */
    .event-intro h2 {
        font-size: 24px !important;
    }
    .event-item {
        min-width: 82vw !important;
        max-width: 82vw !important;
    }
    .event-item h3 {
        font-size: 20px !important;
    }

    /* Stories — bento compact 2 cols avec hauteurs variées (Pinterest-style) */
    .stories-grid {
        grid-template-columns: 1fr 1fr !important;
        grid-auto-rows: 160px !important;
        gap: 8px !important;
    }
    /* Card 1 (royal monceau) : tall = 2 rows à gauche */
    .stories-grid .story-item:nth-child(1) {
        grid-row: span 2 !important;
        grid-column: 1 !important;
    }
    /* Card 6 (guerlain) : wide = 2 cols pleine largeur en bas */
    .stories-grid .story-item:nth-child(6) {
        grid-column: span 2 !important;
        grid-row: span 1 !important;
    }
    /* Photos label plus compact */
    .stories .story-label {
        font-size: 10px !important;
        padding: 10px !important;
        letter-spacing: 0.5px;
    }
    .stories h2 {
        font-size: 26px !important;
        margin-bottom: 24px !important;
    }

    /* Tailored */
    .tailored p {
        font-size: 16px !important;
    }

    /* Stats */
    .stats-card h3 {
        font-size: 36px !important;
    }
    .guest-exp-overlay .stats-card h3 {
        font-size: 32px !important;
    }
    .stats-image-wrapper img {
        height: 220px !important;
    }

    /* Hotel-trunks */
    .hotel-trunks-grid {
        grid-template-columns: 1fr !important;
    }

    /* Service cards */
    .service-cards-list {
        grid-auto-rows: 220px !important;
    }
    .service-cards-header h2 {
        font-size: 22px !important;
    }
    .service-card-text h3 {
        font-size: 1.05rem !important;
    }
    .service-card-text p {
        font-size: 0.78rem !important;
    }

    /* Service-modal */
    .service-modal {
        padding: 8px !important;
    }
    .service-modal-content {
        max-height: 95vh !important;
    }

    /* Estimateur */
    .est-question {
        font-size: 16px !important;
    }
    .est-value {
        font-size: 36px !important;
    }

    /* Rituels */
    .rituels-big-name {
        font-size: 30px !important;
    }
    .rituels-right {
        height: 220px !important;
    }

    /* Event categories panel — 1 col */
    .event-cat-panel {
        grid-template-columns: 1fr !important;
    }
    .event-cat-img {
        aspect-ratio: 16/10 !important;
    }
    .protocol-tabs-bar {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .protocol-tabs-bar::-webkit-scrollbar {
        display: none;
    }
    .protocol-tab {
        flex-shrink: 0;
    }

    /* Event process */
    .event-process-step h3 {
        font-size: 1.1rem !important;
    }
    .process-services-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Event feature */
    .event-feature-text h2 {
        font-size: 22px !important;
    }
    .phone-frame {
        width: 200px !important;
        border-radius: 36px !important;
    }
    .phone-frame-screen {
        border-radius: 26px !important;
    }

    /* Temoignages */
    .temoignages-stack-header h2 {
        font-size: 22px !important;
    }
    .temoignage-quote {
        font-size: 0.85rem !important;
    }

    /* Trunk hero */
    .trunk-hero-title {
        font-size: 2rem !important;
    }
    .trunk-hero-tagline {
        font-size: 0.92rem !important;
    }
    .trunk-hero-img-zoom img {
        transform: scale(1.1) !important;
    }

    /* Trunk viewer */
    .trunk-viewer-right h2 {
        font-size: 24px !important;
    }
    .trunk-viewer-main img {
        height: 260px !important;
    }
    .trunk-thumb {
        width: 48px !important;
        height: 48px !important;
    }

    /* Trunk details */
    .trunk-details p {
        font-size: 18px !important;
    }
    .cards-details-carousel {
        min-width: 86vw !important;
        height: 280px !important;
    }

    /* Trunk CTA */
    .trunk-cta-card-text h2 {
        font-size: 22px !important;
    }

    /* Journal */
    .journal-hero-content h2 {
        font-size: 1.15rem !important;
    }
    .journal-blog-header h2 {
        font-size: 24px !important;
    }
    .journal-card h3 {
        font-size: 1.05rem !important;
    }

    /* Story */
    .story-block-year {
        font-size: 3rem !important;
    }
    .story-block-text h2 {
        font-size: 1.7rem !important;
    }

    /* Contact */
    .contact-split-left h1 {
        font-size: 1.7rem !important;
    }
    .contact-info-grid {
        grid-template-columns: 1fr !important;
    }

    /* Header logo even smaller */
    .logo {
        width: 80px !important;
    }

    /* Footer items */
    footer nav ul {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
}

/* ====== TRES PETITS ECRANS (≤ 380px) — sécurité ====== */
@media (max-width: 380px) {
    .hero-content h1 {
        font-size: 24px !important;
    }
    .trunk-hero-title {
        font-size: 1.7rem !important;
    }
    .stats-card h3 {
        font-size: 30px !important;
    }
    .col-home {
        height: 50vh !important;
    }
    .btn-cta,
    .btn-book,
    .btn-outline,
    .btn-lead,
    .btn-segment {
        font-size: 11px !important;
        padding: 10px 18px 6px !important;
        letter-spacing: 0.5px !important;
    }
}

/* ==========================================================
   RESPONSIVE PASS 3 — luxury mobile redesign (Aman / Byredo / Hermès)
   Real mobile-first design decisions, not constraint shrinking.
   Added at the end so it overrides PASS 1 & PASS 2.
   ========================================================== */

@media (max-width: 1024px) {

    /* ==========================================================
       1) HOTEL / CORPORATE choice — full-width edge-to-edge stack
       Bouton positionné à 70% de hauteur, sous-titre italique,
       overlay en gradient bottom-only, séparation gold.
       ========================================================== */
    .container-col {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        background: transparent !important;
    }
    .col-home {
        width: 100% !important;
        height: 38vh !important;
        min-height: 240px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: hidden;
        position: relative;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .col-home + .col-home {
        border-top: none !important;
    }
    .col-home::before {
        background-size: cover;
        background-repeat: no-repeat;
        transform: none !important;
        transition: none !important;
    }
    .col-hot::before {
        background-position: center top !important;
    }
    .col-ent::before {
        background-position: center !important;
    }
    /* Overlay réduit à 25% max — préserve la richesse de l'image */
    .col-home::after {
        background: linear-gradient(to bottom,
            rgba(0,0,0,0.15) 0%,
            rgba(0,0,0,0.2) 50%,
            rgba(0,0,0,0.25) 100%) !important;
        position: absolute !important;
        inset: 0 !important;
    }
    .col-home > * {
        position: relative;
        z-index: 3;
        text-align: center;
    }
    /* Bouton — style desktop, padding symétrique + line-height 1 pour centrage propre */
    .col-home .btn-segment {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: 1px solid #fff !important;
        padding: 16px 32px !important;
        font-size: 14px !important;
        line-height: 1 !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        border-radius: 2px !important;
        color: #fff !important;
        text-align: center !important;
        white-space: nowrap;
        font-family: 'Founders Grotesk', sans-serif;
        box-shadow: none !important;
    }
    .col-home .btn-segment::after {
        content: none !important;
    }

    /* ==========================================================
       2) STATS cards — scroll-snap horizontal swipe (Aman / Soho)
       1 card visible à 80vw, peek 12vw de la suivante, dots cachés
       (scroll natif suffit — pas d'indicateurs mécaniques).
       ========================================================== */
    .stats-section {
        padding: 56px 0 56px !important;
    }
    .stats-section .stats-tag,
    .stats-section .stats-title {
        margin-left: 24px !important;
        margin-right: 24px !important;
    }
    .stats-image-wrapper {
        display: block !important;
        position: relative !important;
        margin: 0 24px;
    }
    .stats-image-wrapper img {
        height: 280px !important;
        border-radius: 14px !important;
    }
    /* Stats wrapper : scroll horizontal swipe — on Hotel, Entreprise, Guest-exp */
    .stats-wrapper {
        display: flex !important;
        flex-direction: row !important;
        grid-template-columns: none !important;
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 12px !important;
        padding: 24px 24px 8px !important;
        margin: -32px 0 0 !important;
        z-index: 3;
    }
    .stats-wrapper::-webkit-scrollbar {
        display: none;
    }
    .stats-wrapper .stats-card {
        flex: 0 0 80vw !important;
        max-width: 80vw !important;
        scroll-snap-align: center;
        padding: 28px 24px !important;
        background: #fff !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 30px rgba(0,0,0,0.08) !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .stats-wrapper .stats-card h3 {
        font-size: 48px !important;
    }
    .stats-wrapper .stats-card p {
        font-size: 13px !important;
        color: #666;
    }
    /* Guest-exp overlay version : same swipe pattern */
    .guest-exp-overlay.stats-wrapper {
        margin: 16px 0 0 !important;
    }
    .guest-exp-overlay .stats-card {
        flex: 0 0 80vw !important;
        max-width: 80vw !important;
    }

    /* ==========================================================
       3) SERVICE CARDS bento — 2 cols asymétriques avec hauteurs
       alternées pour garder le rythme bento sur mobile.
       ========================================================== */
    .service-cards {
        padding: 56px 16px !important;
    }
    .service-cards-list {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-auto-rows: minmax(180px, auto) !important;
        gap: 10px !important;
    }
    .service-card,
    .service-card:nth-child(1),
    .service-card:nth-child(2),
    .service-card:nth-child(3),
    .service-card:nth-child(4),
    .service-card:nth-child(5) {
        width: auto !important;
        grid-column: span 1 !important;
        grid-row: auto !important;
    }
    /* Asymétrie : 1ère card grande (2 cols × 1.3 hauteur), puis rythme */
    .service-card:nth-child(1) {
        grid-column: 1 / -1 !important;
        aspect-ratio: 16/10;
    }
    .service-card:nth-child(2) {
        aspect-ratio: 3/4;
    }
    .service-card:nth-child(3) {
        aspect-ratio: 3/4;
    }
    .service-card:nth-child(4) {
        grid-column: 1 / -1 !important;
        aspect-ratio: 16/9;
    }
    .service-card:nth-child(5) {
        grid-column: 1 / -1 !important;
        aspect-ratio: 16/9;
    }
    .service-card-text h3 {
        font-size: 1rem !important;
        line-height: 1.2 !important;
    }
    .service-card-text p {
        font-size: 0.78rem !important;
        line-height: 1.4 !important;
    }

    /* ==========================================================
       4) TRUNK VIEWER — pattern e-commerce mobile (Apple, RIMOWA)
       Image hero swipeable plein largeur, color dots sous l'image,
       thumbs en mini-row optionnel, accordion specs full-width.
       ========================================================== */
    .trunk-viewer {
        padding: 40px 0 56px !important;
        gap: 24px !important;
    }
    .trunk-viewer-left {
        order: 1;
        gap: 14px !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .trunk-viewer-right {
        order: 2;
        padding: 0 24px !important;
    }
    /* Re-order children inside .trunk-viewer-left : main first, thumbs, colors */
    .trunk-viewer-main {
        order: 1;
        width: 100% !important;
        background: #f5f5f5 !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    .trunk-viewer-main img {
        width: 100% !important;
        height: 70vw !important;
        max-height: 420px !important;
        object-fit: contain !important;
        padding: 16px;
        box-sizing: border-box;
    }
    /* Thumbs deviennent une row scrollable de petites vignettes alignées centre */
    .trunk-viewer-thumbs {
        order: 2;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 10px !important;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 0 24px;
    }
    .trunk-viewer-thumbs::-webkit-scrollbar {
        display: none;
    }
    .trunk-thumb {
        width: 52px !important;
        height: 52px !important;
        border-radius: 10px !important;
        opacity: 0.5;
        flex-shrink: 0;
    }
    .trunk-thumb.active {
        opacity: 1;
        border-color: #0A0A0A !important;
    }
    .trunk-viewer-colors {
        order: 3;
        margin: 0 !important;
        padding: 0 24px;
    }
    .trunk-color-options {
        justify-content: center;
        gap: 14px !important;
    }
    .trunk-color {
        width: 30px !important;
        height: 30px !important;
        border-width: 2px !important;
    }
    .trunk-viewer-right h2 {
        font-size: 2.2rem !important;
        text-align: center !important;
    }
    .trunk-viewer-tagline {
        text-align: center !important;
        margin-bottom: 20px !important;
    }
    .trunk-viewer-accordion {
        margin: 0 -8px;
    }
    .trunk-acc-item {
        border-radius: 12px;
    }
    .trunk-acc-header {
        padding: 18px 16px !important;
        font-size: 0.95rem !important;
    }
    .trunk-acc-body {
        padding: 0 16px 18px !important;
    }
    .trunk-viewer-buttons {
        padding-top: 12px;
    }
    .trunk-viewer-buttons .btn-cta,
    .trunk-viewer-buttons .btn-lead {
        padding: 16px 24px !important;
        font-size: 12px !important;
        letter-spacing: 1.5px !important;
    }

    /* ==========================================================
       5) TRUNK HERO PAGES (regency / revolution / edo / shampoo)
       Hero épuré 80vh : photo malle centrée, nom lisible, CTA
       full-width en bas, respiration. Pas de bg-text énorme.
       ========================================================== */
    .trunk-hero-center {
        min-height: 78vh !important;
        height: auto !important;
        padding: 60px 24px 32px !important;
        gap: 14px;
        justify-content: center !important;
    }
    .trunk-hero-bg-text {
        font-size: 30vw !important;
        opacity: 0.5;
        top: 38% !important;
    }
    .trunk-hero-title {
        font-size: clamp(2.5rem, 13vw, 4rem) !important;
        letter-spacing: 1px;
        line-height: 1 !important;
    }
    .trunk-hero-tagline {
        font-size: 0.95rem !important;
        max-width: 320px;
        margin: 0 auto 12px !important;
        text-align: center !important;
    }
    .trunk-hero-img {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: 8px 0;
    }
    .trunk-hero-img img {
        max-height: 42vh !important;
        max-width: 90%;
        width: auto !important;
        object-fit: contain !important;
    }
    .trunk-hero-img-zoom img {
        transform: scale(1.15) !important;
    }
    .trunk-hero-meta {
        flex-direction: column !important;
        width: 100%;
        gap: 10px !important;
        margin-top: 16px !important;
    }
    .trunk-hero-meta .btn-cta,
    .trunk-hero-meta .btn-outline {
        width: 100% !important;
        height: 50px !important;
        font-size: 12px !important;
        letter-spacing: 1.8px !important;
    }

    /* ==========================================================
       6) MEGA-MENU mobile — accordéon E-TRUNK révèle 4 trunks
       (CSS prepares; JS toggles .nav-dropdown.expanded)
       ========================================================== */
    /* Re-enable mega-menu in mobile, but as a stacked accordion */
    header > nav .nav-dropdown {
        width: 100%;
        position: relative;
    }
    header > nav .nav-dropdown > a {
        display: inline-flex !important;
        align-items: center;
        gap: 10px;
        cursor: pointer;
    }
    header > nav .nav-dropdown .dropdown-arrow {
        display: inline-block !important;
        font-size: 14px;
        transition: transform 0.3s ease;
    }
    header > nav .nav-dropdown.expanded .dropdown-arrow {
        transform: rotate(180deg);
    }
    header > nav .mega-menu {
        display: none !important;
        position: static !important;
        width: 100%;
        max-width: 360px;
        margin: 16px auto 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        grid-template-columns: 1fr !important;
        opacity: 1 !important;
        transform: none !important;
    }
    header > nav .nav-dropdown.expanded .mega-menu {
        display: grid !important;
        animation: navMegaFadeIn 0.3s ease;
    }
    @keyframes navMegaFadeIn {
        from { opacity: 0; transform: translateY(-6px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .mega-menu-left {
        display: none !important;
    }
    .mega-menu-right {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 8px !important;
    }
    .mega-menu-right .mega-item {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 14px 8px;
        background: #F5F5F5;
        border-radius: 14px;
        text-decoration: none !important;
    }
    .mega-menu-right .mega-item img {
        width: 100%;
        max-width: 90px;
        height: 90px;
        object-fit: contain;
    }
    .mega-menu-right .mega-item h4 {
        font-family: 'Kormelink Roman', serif !important;
        font-size: 0.95rem !important;
        color: #0A0A0A;
        margin: 0;
        text-align: center;
    }

    /* ==========================================================
       7) JOURNAL CARDS — éditorial 1 col, image 16/10, padding aéré
       ========================================================== */
    .journal-grid {
        gap: 36px 0 !important;
    }
    .journal-card {
        gap: 14px !important;
    }
    .journal-card-img {
        aspect-ratio: 16/10 !important;
        border-radius: 14px !important;
    }
    .journal-card-meta {
        font-size: 11px !important;
        letter-spacing: 1px !important;
        text-transform: uppercase;
        color: #888 !important;
    }
    .journal-card h3 {
        font-size: 1.35rem !important;
        line-height: 1.25 !important;
    }
    .journal-card > p {
        font-size: 0.92rem !important;
        line-height: 1.55 !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
    }
    .journal-card-author {
        margin-top: 10px !important;
    }
    .journal-card-author span {
        font-size: 12px !important;
        color: #666 !important;
    }
    .journal-card-cat {
        background: rgba(255,255,255,0.92) !important;
        color: #0A0A0A !important;
        font-weight: 500;
        backdrop-filter: blur(10px);
    }

    /* ==========================================================
       8) EVENT CASES carousel — soft snap + smooth scroll
       ========================================================== */
    .event-cases-grid {
        scroll-behavior: smooth;
        scroll-padding: 0 12px;
        padding: 0 12px 8px !important;
        scrollbar-width: none;
    }
    .event-cases-grid::-webkit-scrollbar {
        display: none;
    }

    /* ==========================================================
       9) PHONE-FRAME — sur mobile on enlève la frame téléphone
       (l'utilisateur EST sur mobile, pas besoin de mock)
       ========================================================== */
    .event-feature {
        padding: 56px 24px !important;
        gap: 32px !important;
    }
    .event-feature-visual {
        display: flex;
        justify-content: center;
    }
    .phone-frame {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        width: 78vw !important;
        max-width: 320px !important;
        aspect-ratio: auto !important;
        border-radius: 24px !important;
        box-shadow: 0 24px 60px rgba(0,0,0,0.18) !important;
        overflow: hidden;
    }
    .phone-frame-notch {
        display: none !important;
    }
    .phone-frame-screen {
        width: 100% !important;
        height: auto !important;
        border-radius: 24px !important;
        display: block;
    }

    /* ==========================================================
       10) Polish global luxe
       ========================================================== */
    /* Border-radius cohérent partout en mobile : 14-16px */
    .stats-image-wrapper,
    .stats-image-wrapper img,
    .guest-exp-video,
    .guest-exp-video video,
    .event-case-img,
    .event-case-img img {
        border-radius: 14px !important;
    }
    /* Sections : padding latéral 24px standard luxe (sauf .luxury qui est full-bleed sur mobile) */
    .protocols-section,
    .hotel-trunks,
    .stories,
    .temoignages-stack {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    /* Buttons cohérents */
    .hero-buttons .btn-cta,
    .hero-buttons .btn-outline,
    .hero-buttons .btn-lead {
        height: 50px !important;
        font-size: 12px !important;
        letter-spacing: 1.8px !important;
        padding: 14px 24px !important;
    }
}

/* ====== MOBILE STRICT (≤ 600px) — fine tuning ====== */
@media (max-width: 600px) {
    /* HOTEL/CORPORATE stack — hauteur respiration mobile */
    .col-home {
        height: 40vh !important;
        min-height: 280px !important;
    }
    /* Stats cards swipe : 82vw pour iPhone Pro Max */
    .stats-wrapper .stats-card,
    .guest-exp-overlay .stats-card {
        flex: 0 0 82vw !important;
        max-width: 82vw !important;
        padding: 24px 22px !important;
    }
    .stats-wrapper .stats-card h3,
    .guest-exp-overlay .stats-card h3 {
        font-size: 42px !important;
    }
    /* Service cards bento : ratios resserrés */
    .service-card:nth-child(1) {
        aspect-ratio: 4/3;
    }
    .service-card:nth-child(2),
    .service-card:nth-child(3) {
        aspect-ratio: 4/5;
    }
    /* Trunk hero compact */
    .trunk-hero-title {
        font-size: clamp(2rem, 12vw, 3rem) !important;
    }
    .trunk-hero-img img {
        max-height: 38vh !important;
    }
    /* Mega menu mobile : 1 col sur très petits écrans pour plus de respiration */
    .mega-menu-right .mega-item img {
        max-width: 80px;
        height: 80px;
    }
    /* Journal cards encore plus aérées */
    .journal-card h3 {
        font-size: 1.25rem !important;
    }
    /* Phone-frame réduit */
    .phone-frame {
        width: 70vw !important;
        max-width: 280px !important;
    }
}

/* ====== TRES PETITS ECRANS (≤ 380px) — sécurité ====== */
@media (max-width: 380px) {
    .col-home {
        height: 40vh !important;
        min-height: 260px !important;
    }
    .stats-wrapper .stats-card,
    .guest-exp-overlay .stats-card {
        flex: 0 0 86vw !important;
        max-width: 86vw !important;
    }
    .stats-wrapper .stats-card h3,
    .guest-exp-overlay .stats-card h3 {
        font-size: 36px !important;
    }
    .trunk-hero-title {
        font-size: 2rem !important;
    }
    .trunk-hero-img img {
        max-height: 32vh !important;
    }
    .service-card:nth-child(1) {
        aspect-ratio: 1/1;
    }
    .mega-menu-right {
        grid-template-columns: 1fr 1fr !important;
    }
    .mega-menu-right .mega-item img {
        max-width: 70px;
        height: 70px;
    }
}

/* ==========================================================
   FINAL OVERRIDE — bouton DISCOVER EVENTS mobile (home)
   Spécificité .event-cta-mobile.btn-cta + position en fin de fichier
   pour battre les règles .btn-cta des @media 600px et 380px.
   ========================================================== */
@media (max-width: 1024px) {
    a.event-cta-mobile.btn-cta {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        justify-self: center !important;
        width: auto !important;
        max-width: none !important;
        margin: 36px 0 0 !important;
        padding: 22px 44px !important;
        font-size: 14px !important;
        letter-spacing: 1.8px !important;
        text-align: center !important;
        line-height: 1 !important;
        box-sizing: border-box !important;
        background-color: #0A0A0A !important;
        color: #fff !important;
        border-radius: 2px !important;
    }
}

/* ==========================================================
   FIX MOBILE — page Hôtel : bugs identifiés sur screenshots
   1) Bouton CONTINUER (estimateur) orange → noir
   2) Service-card "Nos coiffeurs" : titre n'empiète plus sur l'icône
   3) Image E-Trunk trop haute en mobile : aspect-ratio plus court
   4) Numérotation guest-exp "01/02/03" : letter-spacing réduit
   5) Témoignages : video preload metadata pour afficher 1ère frame
   6) Trunk-contact button cohérence
   ========================================================== */
@media (max-width: 1024px) {
    /* 1) Estimateur CTA noir, cohérent avec tous les autres CTA mobile */
    .est-btn {
        background-color: #0A0A0A !important;
        color: #fff !important;
    }

    /* 2) Service cards : icône arrow ne mange plus le titre */
    .service-card-text h3 {
        padding-right: 44px !important;
    }
    .service-card-open {
        top: 14px !important;
        right: 14px !important;
        width: 32px !important;
        height: 32px !important;
    }

    /* 3) Hotel trunks : image moins haute pour réduire le scroll */
    .hotel-trunks-grid {
        gap: 32px !important;
    }
    .hotel-trunk-img {
        aspect-ratio: 4/3 !important;
        margin-bottom: 14px !important;
    }
    .hotel-trunk-item h3 {
        font-size: 1.05rem !important;
    }

    /* 4) Numérotation guest-experience : pas de gap visuel "0 1" */
    .guest-exp-step span {
        letter-spacing: 1px !important;
    }

    /* 5) Vidéos témoignages : montrent la 1ère frame au lieu de black */
    .temoignage-card-video video {
        background: #1a1a1a;
    }

    /* 6) Trunk-contact button : reste cohérent en blanc sur fond noir
          (ENVOYER apparaît bien blanc avec texte noir, OK) */
}

/* ====== MOBILE STRICT (≤ 600px) — fine tuning page Hôtel ====== */
@media (max-width: 600px) {
    .hotel-trunk-img {
        aspect-ratio: 16/12 !important;
    }
    .service-card-open {
        width: 30px !important;
        height: 30px !important;
        top: 12px !important;
        right: 12px !important;
    }
    .service-card-open svg {
        width: 12px !important;
        height: 12px !important;
    }
}

/* ==========================================================
   REDESIGN MOBILE — page Hôtel/Entreprise : refonte sections critiques
   - HERO : style home (titre centré au milieu) + 1 seul bouton
     "TÉLÉCHARGER LA BROCHURE" ancré en bas du hero
   - GUEST-EXP : video AU-DESSUS, étapes en dessous
   - STATS CARDS : 3 cards côte-à-côte (grid 3 cols)
   - TÉMOIGNAGES : video → image poster
   - E-TRUNKS : layout horizontal compact
   ========================================================== */
@media (max-width: 1024px) {

    /* ---- HERO : titre centré au milieu + 1 seul CTA ancré en bas ---- */
    .hero-hotel,
    .hero-ent,
    .hero-event {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .hero-content {
        position: static !important;
        transform: none !important;
        align-items: center !important;
        text-align: center !important;
        gap: 14px !important;
        padding: 0 24px !important;
        width: 100%;
    }
    .hero-content h1 {
        text-align: center !important;
    }
    .hero-content p {
        text-align: center !important;
        max-width: 320px;
        margin: 0 auto;
    }
    /* Bouton "RESERVER DEMO" caché : déjà CONTACT dans le header */
    .hero-buttons .btn-outline {
        display: none !important;
    }
    /* Bouton TÉLÉCHARGER LA BROCHURE ancré au bas du hero (relative à .hero) */
    .hero-hotel .hero-buttons,
    .hero-ent .hero-buttons,
    .hero-event .hero-buttons {
        position: absolute !important;
        bottom: 28px !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0 !important;
        flex-direction: row !important;
        width: 100%;
    }
    .hero-hotel .hero-buttons .btn-lead,
    .hero-ent .hero-buttons .btn-lead,
    .hero-event .hero-buttons .btn-lead {
        background: #0A0A0A !important;
        color: #fff !important;
        border: none !important;
        padding: 16px 32px !important;
        font-size: 12px !important;
        letter-spacing: 1.5px !important;
        text-decoration: none !important;
        height: auto !important;
        width: auto !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        border-radius: 2px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
    }

    /* ---- STATS CARDS : layout bento — 1 grande en haut + 2 dessous ---- */
    .stats-wrapper,
    .guest-exp-overlay.stats-wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        flex-direction: row !important;
        overflow-x: visible !important;
        scroll-snap-type: none !important;
        gap: 10px !important;
        padding: 0 16px !important;
        margin: 0 !important;
    }
    .stats-wrapper .stats-card,
    .guest-exp-overlay .stats-card {
        flex: unset !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        scroll-snap-align: none !important;
        padding: 18px 16px !important;
        border-radius: 16px !important;
        background: #fff !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        align-items: flex-start !important;
        text-align: left !important;
        opacity: 1 !important;
        transform: none !important;
    }
    /* Carte 1 : grande, full-width, hero */
    .stats-wrapper .stats-card:nth-child(1),
    .guest-exp-overlay .stats-card:nth-child(1) {
        grid-column: 1 / -1 !important;
        padding: 24px 22px !important;
        gap: 10px !important;
    }
    .stats-wrapper .stats-card:nth-child(1) h3,
    .guest-exp-overlay .stats-card:nth-child(1) h3 {
        font-size: 48px !important;
    }
    .stats-wrapper .stats-card:nth-child(1) p,
    .guest-exp-overlay .stats-card:nth-child(1) p {
        font-size: 13px !important;
        max-width: 80% !important;
    }
    /* Cartes 2 & 3 : compactes côte-à-côte */
    .stats-wrapper .stats-card h3,
    .guest-exp-overlay .stats-card h3 {
        font-family: 'Kormelink Roman', serif !important;
        font-size: 30px !important;
        line-height: 1 !important;
        margin: 0 !important;
        color: #0A0A0A !important;
        font-weight: 400 !important;
        letter-spacing: -0.5px !important;
    }
    .stats-wrapper .stats-card p,
    .guest-exp-overlay .stats-card p {
        font-size: 11px !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        color: #555 !important;
    }
    .stats-wrapper .stats-card .stats-tag,
    .guest-exp-overlay .stats-card .stats-tag {
        font-family: 'Founders Grotesk M', sans-serif !important;
        font-size: 8px !important;
        letter-spacing: 1.2px !important;
        padding: 0 !important;
        background: none !important;
        color: #652800 !important;
        text-transform: uppercase !important;
        align-self: flex-start !important;
        justify-self: flex-start !important;
    }

    /* ---- GUEST EXPERIENCE : reorder titre → video → steps → metrics → CTA ---- */
    .guest-experience {
        display: flex !important;
        flex-direction: column !important;
        padding: 28px 0 36px !important;
        gap: 14px !important;
    }
    .guest-exp-top,
    .guest-exp-content {
        display: contents !important;
    }
    .guest-exp-content > h2 {
        order: 1 !important;
        padding: 0 24px !important;
        margin: 0 !important;
    }
    .guest-exp-video {
        order: 2 !important;
        position: relative !important;
        width: auto !important;
        margin: 0 12px !important;
        padding: 0 !important;
        border-radius: 14px !important;
        overflow: hidden;
    }
    .guest-exp-video-poster {
        display: none !important;
    }
    .guest-exp-video video {
        width: 100% !important;
        height: auto !important;
        max-height: 380px !important;
        object-fit: cover;
        border-radius: 14px !important;
        display: block;
    }
    .guest-exp-steps {
        order: 3 !important;
        padding: 0 24px !important;
        gap: 18px !important;
        margin: 0 !important;
    }
    /* Steps appear on scroll */
    .guest-exp-step {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .guest-exp-step.visible {
        opacity: 1;
        transform: translateY(0);
    }
    .guest-exp-overlay.stats-wrapper {
        order: 4 !important;
    }
    .guest-exp-btn {
        order: 5 !important;
    }
    /* Bouton DISCOVER THE EXPERIENCE : même style que DISCOVER EVENTS home */
    a.guest-exp-btn,
    a.guest-exp-btn.btn-outline {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        margin: 16px auto 0 !important;
        padding: 22px 44px !important;
        background: #0A0A0A !important;
        border: none !important;
        color: #fff !important;
        text-decoration: none !important;
        font-family: 'Founders Grotesk', sans-serif !important;
        font-size: 14px !important;
        letter-spacing: 1.8px !important;
        line-height: 1 !important;
        border-radius: 2px !important;
        width: auto !important;
        max-width: none !important;
        text-align: center !important;
    }

    /* ---- TÉMOIGNAGES : vidéos visibles mobile au format 4/5 (poster fallback HTML) ---- */
    .temoignage-card-video video {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4/5 !important;
        object-fit: cover !important;
        border-radius: 10px !important;
    }
    .temoignage-card-poster {
        display: none !important;
    }

    /* ---- E-TRUNKS : carrousel horizontal swipable (RIMOWA / Apple style)
            une malle par vue + peek de la suivante, scroll-snap luxe ---- */
    .hotel-trunks {
        padding: 50px 0 !important;
    }
    .hotel-trunks-header {
        padding: 0 24px;
    }
    .hotel-trunks-grid {
        display: flex !important;
        flex-direction: row !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 14px !important;
        padding: 0 11vw 12px !important;
        margin: 0 !important;
        scrollbar-width: none !important;
    }
    .hotel-trunks-grid::-webkit-scrollbar {
        display: none !important;
    }
    .hotel-trunk-item {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        grid-template-areas: none !important;
        flex: 0 0 78vw !important;
        max-width: 78vw !important;
        min-width: 0 !important;
        scroll-snap-align: center !important;
        background: rgba(255,255,255,0.04) !important;
        border-radius: 16px !important;
        padding: 22px 22px 80px !important;
        gap: 12px !important;
        position: relative !important;
    }
    /* CTA mobile : transforme l'arrow link en bouton blanc full-width "DÉCOUVRIR" */
    .hotel-trunk-item .hotel-trunk-arrow {
        position: absolute !important;
        bottom: 22px !important;
        left: 22px !important;
        right: 22px !important;
        width: auto !important;
        height: auto !important;
        border-radius: 2px !important;
        background: #fff !important;
        color: #0A0A0A !important;
        padding: 13px 0 11px !important;
        font-size: 0 !important;
        line-height: 1 !important;
        border: none !important;
        text-align: center !important;
        text-decoration: none !important;
    }
    .hotel-trunk-item .hotel-trunk-arrow::before {
        content: "DÉCOUVRIR" !important;
        font-family: 'Founders Grotesk M', sans-serif !important;
        font-size: 12px !important;
        letter-spacing: 1.8px !important;
    }
    .hotel-trunk-item h3 {
        display: block !important;
    }
    .hotel-trunk-img {
        grid-area: auto !important;
        aspect-ratio: 1/1 !important;
        width: 100% !important;
        margin: 0 0 6px 0 !important;
        align-self: stretch !important;
        border-radius: 12px;
        overflow: hidden;
        background: rgba(255,255,255,0.02);
    }
    .hotel-trunk-item h3 {
        grid-area: auto !important;
        font-size: 1.1rem !important;
        margin: 0 !important;
    }
    .hotel-trunk-item p {
        grid-area: auto !important;
        font-size: 0.85rem !important;
        margin: 0 !important;
        line-height: 1.55 !important;
    }
    .hotel-trunk-tags {
        grid-area: auto !important;
        gap: 8px !important;
        margin: 0 !important;
        flex-wrap: wrap !important;
    }
    .hotel-trunk-tags span {
        font-size: 0.6rem !important;
        padding: 5px 12px !important;
    }
}

/* Fallback : poster img caché par défaut (visible mobile only via media ci-dessus) */
.temoignage-card-poster,
.guest-exp-video-poster {
    display: none;
}



/* --- Header : logo monogram compact (le padding original 10px suffit, le logo carré donne déjà l'air visuel) --- */
.logo[src*="monogram"] {
    width: 52px !important;
}

/* --- Hero (toutes pages) : plus d'air sous le header (le monogram fait l'header plus haut que prévu) --- */
.first-fold > .hero,
.first-fold > .hero-hotel,
.first-fold > .hero-ent,
.first-fold > .hero-event {
    margin-top: 100px !important;
}

/* --- Hero : italique sur l'em du H1 home (la seule modif sur le hero standard) --- */
.hero h1 em {
    font-style: italic;
    font-weight: 300;
}

/* Made in France : fine bande tricolore SOUS le texte (le SVG est une bande, pas un drapeau carré) */
.hero-made-in-france {
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: #fff;
    z-index: 2;
    opacity: 0.95;
    pointer-events: none;
    background: transparent !important;
}
.hero-made-in-france p {
    margin: 0 !important;
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 9px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #fff;
    line-height: 1;
    background: transparent !important;
}
.hero-made-in-france .flag-img {
    width: 90px !important;
    height: 6px !important;
    display: block;
}

/* --- Social proof : air en haut, peu en bas, bandeau discret --- */
.social-proof {
    padding: 80px 0 14px;
}
/* Note : sur la home, pas de h2 (juste les logos) — sur hotel/ent/event, le h2 reste visible */


.operating-worldwide {
    margin: 50px 20px 24px;
}

/* --- Event : section avec air en haut + CTA sous le paragraphe d'intro --- */
.event {
    padding-top: 60px !important;
}
.event-intro .btn-cta.event-cta {
    margin: 10px 0 0;
    display: inline-block;
    align-self: flex-start;
    border: none;
    cursor: pointer;
}

/* --- Double image : btn-segment centré verticalement (par défaut via flex parent) --- */

/* --- Events : cartes épurées, hover overlay sur l'image, flèches --- */
.event-item {
    position: relative;
    cursor: pointer;
}
.event-media {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}
.event-item img {
    border-radius: 20px;
    transition: transform 0.5s ease;
    display: block;
    width: 100%;
}
.event-item h3 {
    padding: 14px 6px 4px;
    font-size: 24px;
    color: #0A0A0A;
    margin: 0;
}
.event-hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 22px;
    background: linear-gradient(to top, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.25) 55%, rgba(10,10,10,0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.event-hover p {
    color: #fff;
    font-size: 15px;
    margin: 0;
    line-height: 1.45;
}
.event-item:hover .event-hover {
    opacity: 1;
}
.event-item:hover img {
    transform: scale(1.04);
}

.event .event-cta {
    display: block;
    margin: 28px auto 0;
    border: none;
    cursor: pointer;
}

/* Carrousel événementiel : navigation discrète (barre de progression + drag) */
/* IMPORTANT : min-width: 0 force le grid item à respecter la col width (sinon il s'étend à la width du contenu = pas de scroll) */
.container-event-wrap {
    position: relative;
    min-width: 0 !important;
}
.event .container-event {
    overflow-x: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    scroll-behavior: smooth;
    padding: 0;
    box-sizing: border-box;
}
/* Vrais éléments DOM = scrollWidth toujours juste (margin/padding buggés en Chrome sur flex scroll) */
.event-spacer {
    flex: 0 0 16px;
    min-width: 16px;
    align-self: stretch;
    pointer-events: none;
}
.event-layout {
    min-width: 0 !important;
}
.event-layout > * {
    min-width: 0 !important;
}

/* Contrôles sous le carrousel : flèches rondes (style stories) + dots */
.event-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 28px;
}
.event-nav-btn {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #d0d0d0;
    background: #fff;
    color: #0A0A0A;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.event-nav-btn:hover {
    background: #0A0A0A;
    color: #fff;
    transform: scale(1.05);
}
.event-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.event-nav-btn:disabled:hover {
    background: #fff;
    color: #0A0A0A;
    transform: none;
}
.event-dots {
    display: flex;
    gap: 8px;
}
.event-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d0d0d0;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.event-dot.is-active {
    background: #0A0A0A;
    transform: scale(1.2);
}

/* --- Luxury : 2 CTAs Buy/Rent côte à côte (sur fond sombre) --- */
.malle-cta-group {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
.malle-cta-group .btn-cta {
    margin: 0;
    border: none;
    cursor: pointer;
    flex: 1;
    text-align: center;
}
.malle-cta-group .btn-buy {
    background-color: #fff;
    color: #0A0A0A;
}
.malle-cta-group .btn-rent {
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff;
}

/* --- Stories : grid masonry (layout original) + flèches navigation --- */
.stories h2 {
    margin-bottom: 30px;
}
.stories-pager {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}
.stories-viewport {
    flex: 1;
    position: relative;
    min-height: 516px;
}
.stories-page {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.stories-page.is-active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
}
.stories-arrow {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #d0d0d0;
    background: #fff;
    color: #0A0A0A;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stories-arrow:hover {
    background: #0A0A0A;
    color: #fff;
    transform: scale(1.05);
}
/* Overlay sur chaque story-item : logo marque + type de prestation */
.story-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.story-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 22px 18px;
    background: linear-gradient(to top, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.25) 55%, rgba(10,10,10,0) 100%);
    border-radius: 12px;
    text-align: center;
    transition: background 0.3s ease;
}
.story-item:hover .story-overlay {
    background: linear-gradient(to top, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.35) 60%, rgba(10,10,10,0.05) 100%);
}
.story-brand-logo {
    width: auto !important;
    height: 80px !important;
    max-width: 65% !important;
    max-height: 80px !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: brightness(0) invert(1);
    margin: 0 !important;
}
/* Overrides par logo (padding transparent variable selon les fichiers source) */
.story-overlay img[alt="Royal Monceau"],
.story-overlay img[alt="Le Royal Monceau"] {
    height: 130px !important;
    max-height: 130px !important;
    max-width: 75% !important;
}
.story-overlay img[alt="La Réserve Paris"] {
    height: 55px !important;
    max-height: 55px !important;
    max-width: 55% !important;
}
.story-brand-text {
    font-family: 'Kormelink Roman', serif;
    font-size: 26px;
    letter-spacing: 0.5px;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0,0,0,0.6);
    margin: 0;
    line-height: 1.1;
}
.story-type {
    font-family: 'Kormelink Italic', 'Kormelink Roman', serif;
    font-style: italic;
    font-size: 15px;
    color: #fff;
    margin: 0;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.stories-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}
.stories-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d0d0d0;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.stories-dot.is-active {
    background: #0A0A0A;
    transform: scale(1.2);
}

/* --- Tailored : bouton modal --- */
.tailored .btn-cta {
    border: none;
    cursor: pointer;
}

/* --- Modal générique (Demande de devis) --- */
.oom-modal[hidden] {
    display: none !important;
}
.oom-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: oom-modal-fade 0.25s ease;
}
.oom-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
}
.oom-modal-card {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 36px 32px 28px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
    animation: oom-modal-scale 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.oom-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    color: #2a1a0a;
    cursor: pointer;
    transition: background 0.2s ease;
}
.oom-modal-close:hover {
    background: rgba(0,0,0,0.06);
}
.oom-modal-title {
    font-family: 'Kormelink Roman', serif;
    font-size: 26px;
    margin: 0 0 4px;
    color: #2a1a0a;
}
.oom-modal-subtitle {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 14px;
    color: #888;
    margin: 0 0 22px;
}
.oom-modal-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.oom-modal-form .form-row {
    display: flex;
    gap: 12px;
}
.oom-modal-form input,
.oom-modal-form textarea {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 14px 10px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    color: #0A0A0A;
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 14px;
    line-height: 1;
    transition: border-color 0.2s ease;
}
.oom-modal-form input:focus,
.oom-modal-form textarea:focus {
    outline: none;
    border-color: #652800;
}
.oom-modal-form textarea {
    resize: vertical;
    min-height: 90px;
    padding: 14px;
    line-height: 1.4;
}
.oom-modal-form input::placeholder,
.oom-modal-form textarea::placeholder {
    color: #888;
}
.oom-modal-event-field {
    display: none;
}
.oom-modal[data-context="event"] .oom-modal-event-field {
    display: block;
}
.oom-modal-select {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 14px 10px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    color: #0A0A0A;
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 14px;
    line-height: 1;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%230A0A0A' d='M6 8L0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}
.oom-modal-select:focus {
    outline: none;
    border-color: #652800;
}
.oom-modal-select:invalid {
    color: #888;
}
.oom-modal-form .btn-cta {
    margin-top: 8px;
    border: none;
    cursor: pointer;
}
body.oom-modal-open {
    overflow: hidden;
}
@keyframes oom-modal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes oom-modal-scale {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- Responsive mobile (refonte 2026-05-18) --- */
@media (max-width: 1024px) {
    .operating-worldwide {
        font-size: 22px;
        margin: 24px 16px 18px;
    }
    .hero-made-in-france {
        bottom: 56px;
    }
    .hero-made-in-france .flag-img {
        width: 80px !important;
        height: 5px !important;
    }
    .hero-made-in-france p {
        font-size: 11px;
    }
    .event-item h3 {
        font-size: 20px;
    }
    .event-hover {
        opacity: 1;
        background: linear-gradient(to top, rgba(10,10,10,0.7) 0%, rgba(10,10,10,0) 55%);
        padding: 16px;
    }
    .event-hover p {
        font-size: 13px;
    }
    .event-controls {
        margin-top: 20px;
        gap: 14px;
    }
    .event-nav-btn {
        width: 38px;
        height: 38px;
        font-size: 20px;
    }
    .luxury .malle-info p {
        max-width: 100%;
    }
    .malle-cta-group {
        flex-wrap: wrap;
    }
    .stories-arrow {
        width: 38px;
        height: 38px;
        font-size: 20px;
    }
    .stories-viewport {
        min-height: 420px;
    }
    .oom-modal {
        padding: 12px;
    }
    .oom-modal-card {
        padding: 24px 18px 18px;
        border-radius: 14px;
        max-width: 100%;
        max-height: 88vh;
    }
    .oom-modal-title {
        font-size: 18px;
    }
    .oom-modal-subtitle {
        font-size: 13px;
    }
    .oom-modal-form input,
    .oom-modal-form select,
    .oom-modal-form textarea {
        font-size: 14px;
        padding: 10px 12px;
    }
    .oom-modal-form .btn-cta {
        padding: 12px 20px !important;
        font-size: 13px !important;
    }
    .oom-modal-form .form-row {
        flex-direction: column;
        gap: 10px;
    }
}

/* =====================================================================
   REFONTE PAGE HÔTEL — 2026-05-18
   Hero vidéo, social proof, guest exp, stats, trunks, service cards
   ===================================================================== */

/* --- Hero hôtel : background vidéo (override minimal, garde le layout flottant original) --- */
.hero-hotel-video {
    background-image: none !important;
    background-color: #0A0A0A;
}
.hero-hotel-video .hero-bg-video {
    z-index: 0;
}
.hero-hotel-video::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0) 100%);
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
}
.hero-hotel-video .hero-content {
    z-index: 2;
}

/* --- Hero sous-titre agrandi --- */
.hero-hotel .hero-content p {
    font-size: 22px;
    line-height: 1.4;
    max-width: 640px;
}

/* --- Guest experience : sans h3, p devient principal --- */
.guest-exp-step p {
    font-size: 1.1rem;
    color: #0A0A0A;
    margin-top: 4px;
    line-height: 1.55;
}

/* --- Hotel trunks : titres + descriptions plus grands + cards cliquables --- */
.hotel-trunk-item {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.hotel-trunk-item h3 {
    font-size: 32px;
    line-height: 1.2;
}
/* Texte description : Founders Grotesk (pas Kormelink) + pas cliquable
   (le <a> parent reste cliquable via image/titre/flèche) */
.hotel-trunk-item p {
    font-size: 17px;
    line-height: 1.55;
    font-family: 'Founders Grotesk', sans-serif !important;
    pointer-events: none;
}
/* Image : zoom au hover de la card (effet "Tesla / Hermès") */
.hotel-trunk-img {
    overflow: hidden;
}
.hotel-trunk-img img {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.hotel-trunk-item:hover .hotel-trunk-img img {
    transform: scale(1.06);
}
/* Flèche : rond outline qui se remplit de blanc au hover.
   Font system pour garantir le glyphe ↗ (Kormelink ne l'a pas). */
.hotel-trunk-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    line-height: 1;
    margin-left: 14px;
    vertical-align: middle;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hotel-trunk-item:hover .hotel-trunk-arrow {
    background: #fff;
    color: #0A0A0A;
    transform: scale(1.18);
}

/* --- Social proof (hotel/ent/event) : aérer sous le H2 --- */
.social-proof h2 {
    margin-bottom: 64px !important;
}

/* --- Eyebrow labels "OUR E-TRUNKS / EVENT TYPES / WHAT OUR CLIENTS SAY..."
       retours boss : trop de petits titres, on les vire partout --- */
.works-tag {
    display: none !important;
}
/* Exception : le mega-menu du header garde son label de catégorie */
.mega-menu .works-tag {
    display: inline-block !important;
}

/* --- Service cards : signal cliquable visuel renforcé (anim pulse + hover lift) --- */
.service-card-open {
    width: 46px !important;
    height: 46px !important;
    background: rgba(255,255,255,0.25) !important;
    border-color: rgba(255,255,255,0.45) !important;
    animation: oom-card-pulse 2.6s ease-in-out infinite;
}
.service-card-open svg {
    width: 18px !important;
    height: 18px !important;
}
.service-card {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease;
}
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px rgba(0,0,0,0.28);
}
.service-card:hover .service-card-open {
    animation: none;
    background: #fff !important;
    color: #0A0A0A !important;
    transform: translate(3px, -3px) scale(1.1);
}
@keyframes oom-card-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.45); }
    50%      { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
}

/* --- Responsive mobile hôtel --- */
@media (max-width: 1024px) {
    .hero-hotel .hero-content p {
        font-size: 16px !important;
    }
    .hotel-trunk-item h3 {
        font-size: 24px !important;
    }
    .hotel-trunk-item p {
        font-size: 14px !important;
    }
    .service-card-open {
        width: 38px !important;
        height: 38px !important;
    }
}

/* =====================================================================
   REFONTE PAGE ENTREPRISE — 2026-05-18
   Hero vidéo, social proof, stats GPTW, pop-ups rosés, estimateur,
   témoignages, HOW TO START, modal brochure/carte
   ===================================================================== */

/* --- Hero entreprise : background vidéo (override minimal) --- */
.hero-ent-video {
    background-image: none !important;
    background-color: #0A0A0A;
}
.hero-ent-video .hero-bg-video {
    z-index: 0;
}
.hero-ent-video::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%);
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
}
.hero-ent-video .hero-content {
    z-index: 2;
}

/* --- Hero ent sous-titre agrandi --- */
.hero-ent .hero-content p {
    font-size: 22px;
    line-height: 1.4;
    max-width: 640px;
}

/* --- Reset <button> qui doivent garder leur style original de <a> --- */
/* btn-lead = bouton plein noir (le <button> ajoute un border + bg gris par défaut) */
button.btn-lead {
    border: none !important;
    background-color: #0A0A0A !important;
    color: white !important;
    padding: 14px 28px 10px !important;
    border-radius: 2px !important;
    font-family: 'Founders Grotesk', sans-serif !important;
    font-size: 14px !important;
    letter-spacing: 1px !important;
    cursor: pointer;
}
/* btn-outline = bouton outline blanc */
button.btn-outline {
    border: 1px solid white !important;
    background: transparent !important;
    color: white !important;
    padding: 14px 28px 10px !important;
    border-radius: 2px !important;
    font-family: 'Founders Grotesk', sans-serif !important;
    font-size: 14px !important;
    letter-spacing: 1px !important;
    cursor: pointer;
}
/* Boutons pop-ups : reset bg natif sans casser le border existant */
button.rituels-btn-brochure {
    background: transparent !important;
    cursor: pointer;
    font-family: 'Founders Grotesk', sans-serif !important;
}
button.rituels-btn-demo {
    background-color: #fff !important;
    cursor: pointer;
    font-family: 'Founders Grotesk', sans-serif !important;
    border: none !important;
}
/* Bouton ENVOYER du form contact + modal : style standard btn-cta */
.trunk-contact-form button[type="submit"],
.oom-modal-form button[type="submit"] {
    background-color: #0A0A0A !important;
    color: #fff !important;
    border: none !important;
    padding: 16px 36px 12px !important;
    font-family: 'Founders Grotesk', sans-serif !important;
    font-size: 13px !important;
    letter-spacing: 1.5px !important;
    border-radius: 2px !important;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.trunk-contact-form button[type="submit"]:hover,
.oom-modal-form button[type="submit"]:hover {
    opacity: 0.85;
}

/* --- Stats GPTW : eyebrow agrandi (exception au .works-tag display:none) --- */
.stats-tag-eyebrow-large {
    display: inline-block !important;
    font-size: 14px !important;
    letter-spacing: 3px;
    padding: 10px 22px 7px !important;
    margin-bottom: 18px !important;
}

/* --- GPTW link : badge plus visible --- */
.gptw-link-large {
    display: inline-block;
    font-size: 14px;
    padding: 12px 24px 10px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 4px;
    margin-top: 28px;
    font-family: 'Founders Grotesk', sans-serif;
    letter-spacing: 0.3px;
    color: #0A0A0A;
    transition: background 0.2s ease, color 0.2s ease;
}
.gptw-link-large:hover {
    background: #0A0A0A;
    color: #fff;
}

/* --- Mention activations spéciales : centrée + air après les stats --- */
.stats-special-mention {
    text-align: center;
    max-width: 800px;
    margin: 60px auto 0;
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #555;
    padding: 0 20px;
    font-style: italic;
}

/* --- Pop-ups rituels : hauteur réduite (~80vh), fonds CHARTE différenciés --- */
.rituels {
    height: 80vh !important;
    min-height: 640px !important;
    padding: 0 !important;
}
/* Fond panneau gauche : change selon le pop-up actif (data-active sur .rituels-left)
   Palette : Aura = beige rosé (peau), Origin = brun cuir (cheveux/barbier), Horizon = nuit profonde (global) */
.rituels-left[data-active="aura"] {
    background: linear-gradient(135deg, #3a2a25 0%, #2a1e1a 100%) !important;
}
.rituels-left[data-active="origin"] {
    background: linear-gradient(135deg, #2e1f15 0%, #1d130b 100%) !important;
}
.rituels-left[data-active="horizon"] {
    background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%) !important;
}
/* Subtitles propres */
.rituels-subtitle {
    font-family: 'Founders Grotesk', sans-serif !important;
    font-size: 14px !important;
    letter-spacing: 3px !important;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55) !important;
    font-weight: normal !important;
}
/* Titre Pop-up : pas en gras (Kormelink Roman + weight 300) */
.rituels-big-name {
    font-family: 'Kormelink Roman', serif !important;
    font-size: 56px !important;
    font-weight: 300 !important;
    line-height: 1.05 !important;
    margin: 12px 0 16px !important;
    color: #fff !important;
    letter-spacing: 0.5px;
}
.rituels-desc {
    font-family: 'Founders Grotesk', sans-serif !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
    color: rgba(255,255,255,0.85) !important;
    font-weight: normal !important;
}
.rituels-capacity,
.rituels-price {
    font-family: 'Founders Grotesk', sans-serif !important;
    font-size: 18px !important;
    color: rgba(255,255,255,0.85) !important;
    letter-spacing: 0.5px;
    margin-top: 6px !important;
}
.rituels-price {
    font-weight: 500 !important;
    color: #fff !important;
}
.rituels-item {
    font-family: 'Founders Grotesk', sans-serif !important;
}

/* --- Estimateur : bouton RECOMMENCER discret + actions side-by-side --- */
.est-result-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
}
.est-btn-restart {
    background: transparent;
    color: #888;
    border: none;
    cursor: pointer;
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 13px;
    letter-spacing: 1.5px;
    padding: 8px 16px;
    transition: color 0.2s ease;
}
.est-btn-restart:hover {
    color: #0A0A0A;
}

/* --- Témoignages : titre agrandi + fond dégradé (layout stack original conservé) --- */
.temoignages-stack h2 {
    font-size: 56px !important;
    margin-bottom: 50px;
}
.temoignages-gradient {
    background: linear-gradient(180deg, #1a1a1a 0%, #0A0A0A 50%, #1a1a1a 100%) !important;
}
/* Cards : un peu plus grandes pour respecter le retour "agrandir" sans casser les transforms */
.temoignages-gradient .temoignage-card {
    width: 320px;
}
.temoignages-gradient .temoignage-quote {
    font-size: 1rem !important;
    line-height: 1.55 !important;
}
.temoignages-gradient .temoignages-stack-container {
    height: 660px;
}
/* Cards non-adjacentes (au-delà de left/center/right) : cachées totalement */
.temoignage-card[data-pos="hidden"] {
    transform: translateX(0) scale(0.85);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}
/* Différenciation visuelle forte : centrale en avant, latérales discrètes et floues */
.temoignages-gradient .temoignage-card[data-pos="center"] {
    transform: translateX(0) scale(1.08) !important;
    opacity: 1 !important;
    z-index: 5;
    box-shadow: 0 30px 80px rgba(0,0,0,0.5);
    filter: none;
}
.temoignages-gradient .temoignage-card[data-pos="left"] {
    transform: translateX(-100%) scale(0.78) !important;
    opacity: 0.35 !important;
    filter: blur(2px);
}
.temoignages-gradient .temoignage-card[data-pos="right"] {
    transform: translateX(100%) scale(0.78) !important;
    opacity: 0.35 !important;
    filter: blur(2px);
}

/* --- HOW TO START : eyebrow simple texte (style original) mais agrandi --- */
.works-tag-keep {
    display: inline-block !important;
    font-size: 16px !important;
    letter-spacing: 4px !important;
    color: #652800;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0 !important;
    margin-bottom: 24px;
    font-family: 'Founders Grotesk M', 'Founders Grotesk', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
}

/* --- Responsive mobile entreprise --- */
@media (max-width: 1024px) {
    .hero-ent .hero-content p {
        font-size: 16px !important;
    }
    .stats-special-mention {
        font-size: 14px !important;
        margin-top: 40px !important;
    }
    .rituels-big-name {
        font-size: 36px !important;
    }
    .rituels-desc {
        font-size: 15px !important;
    }
    .temoignages-stack h2 {
        font-size: 36px !important;
    }
    .temoignage-card {
        width: 280px !important;
        min-width: 280px !important;
    }
}

/* =====================================================================
   TÉMOIGNAGES V2 — Featured player + thumbnails (Bang & Olufsen style)
   ===================================================================== */
.temoignages-v2 {
    background: linear-gradient(180deg, #1a1a1a 0%, #0A0A0A 50%, #1a1a1a 100%);
    color: #fff;
    padding: 60px 40px 50px;
}
.temoignages-v2-header {
    text-align: center;
    margin-bottom: 40px;
}
.temoignages-v2-header h2 {
    color: #fff;
    font-size: 56px;
    font-family: 'Kormelink Roman', serif;
    margin: 0;
}
.temoignages-v2-header h2 em {
    font-style: italic;
}

/* Featured : player principal + quote à côté */
.testi-featured {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: 60px;
    max-width: 1180px;
    margin: 0 auto 40px;
    align-items: center;
}
.testi-featured-video {
    position: relative;
    aspect-ratio: 9/16;
    border-radius: 24px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.testi-featured-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.testi-sound-toggle {
    position: absolute;
    bottom: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.4);
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    z-index: 10;
    pointer-events: auto !important;
}
.testi-sound-toggle svg {
    pointer-events: none;
}
.testi-sound-toggle:hover {
    background: rgba(0,0,0,0.7);
}
.testi-sound-toggle svg {
    width: 20px;
    height: 20px;
}
.testi-sound-toggle.is-on {
    background: #fff;
    color: #0A0A0A;
}
.testi-featured-info {
    color: #fff;
    /* Hauteur fixe pour eviter les sauts au switch entre quotes de longueurs differentes */
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.testi-featured-quote {
    font-family: 'Kormelink Italic', 'Kormelink Roman', serif;
    font-style: italic;
    font-size: 28px;
    line-height: 1.4;
    color: rgba(255,255,255,0.95);
    margin: 0 0 32px;
    transition: opacity 0.3s ease;
}
.testi-featured-author {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.testi-featured-author strong {
    font-family: 'Founders Grotesk M', 'Founders Grotesk', sans-serif;
    font-size: 18px;
    color: #fff;
    letter-spacing: 0.3px;
}
.testi-featured-author span {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    letter-spacing: 1px;
}

/* Thumbnails carrousel */
.testi-thumbs-wrap {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 14px;
}
.testi-thumbs {
    flex: 1;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 8px 0;
    justify-content: center;
}
.testi-thumbs::-webkit-scrollbar { display: none; }
.testi-thumb {
    flex: 0 0 auto;
    width: 130px;
    height: 130px;
    border-radius: 14px;
    overflow: hidden;
    border: none;
    background: #1a1a1a;
    padding: 0;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
    opacity: 0.7;
    position: relative;
}
.testi-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
/* Overlay : logo marque OU nom marque (fallback texte). Fade au hover pour révéler la vidéo */
.testi-thumb-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.9) 100%);
    color: #fff;
    font-family: 'Kormelink Roman', serif;
    font-size: 18px;
    line-height: 1.15;
    text-align: center;
    z-index: 2;
    transition: opacity 0.3s ease;
    pointer-events: none;
    border-radius: inherit;
}
.testi-thumb-logo {
    max-width: 80%;
    max-height: 60%;
    object-fit: contain;
    /* Logo blanc : si PNG transparent fourni en noir, on l'inverse en blanc */
    filter: brightness(0) invert(1);
}
.testi-thumb:hover {
    opacity: 1;
    transform: translateY(-3px);
}
.testi-thumb:hover .testi-thumb-label {
    opacity: 0.15;
}
.testi-thumb.is-active {
    opacity: 1;
    transform: translateY(-6px) scale(1.05);
    box-shadow: 0 16px 36px rgba(0,0,0,0.55);
}
.testi-thumb.is-active .testi-thumb-label {
    background: linear-gradient(180deg, rgba(10,10,10,0.2) 0%, rgba(10,10,10,0.7) 100%);
}
.testi-thumbs-arrow {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
    background: transparent;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease;
}
.testi-thumbs-arrow:hover {
    background: #fff;
    color: #0A0A0A;
}

/* Responsive */
@media (max-width: 900px) {
    .temoignages-v2 { padding: 60px 20px; }
    .temoignages-v2-header h2 { font-size: 36px; }
    .testi-featured {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .testi-featured-video {
        max-width: 320px;
        margin: 0 auto;
    }
    .testi-featured-quote { font-size: 20px; }
    .testi-thumb { width: 72px; height: 128px; }
    .testi-thumbs-arrow { display: none; }
}


@media (max-width: 600px) {

    
    .hero.hero-hotel .hero-content,
    .hero.hero-hotel-video .hero-content {
        align-items: flex-start !important;
        text-align: left !important;
        padding: 0 24px !important;
    }
    .hero.hero-hotel .hero-content h1,
    .hero.hero-hotel-video .hero-content h1 {
        font-size: 36px !important;
        text-align: left !important;
        padding: 0 !important;
        line-height: 1.1 !important;
    }
    .hero.hero-hotel .hero-content p,
    .hero.hero-hotel-video .hero-content p {
        font-size: 16px !important;
        text-align: left !important;
        padding: 0 !important;
        max-width: none !important;
        margin: 0 !important;
    }

    /* ---- 2. Stories carousel : 1 colonne, pas de spans speciaux ---- */
    .stories-grid {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
        gap: 12px !important;
    }
    .story-item {
        min-height: 240px !important;
        width: 100% !important;
        grid-row: auto !important;
        grid-column: auto !important;
    }
    .stories-grid .story-item:nth-child(1),
    .stories-grid .story-item:nth-child(6),
    .story-tall,
    .story-wide {
        grid-row: auto !important;
        grid-column: auto !important;
    }
    .story-brand-logo {
        width: 120px !important;
        height: 60px !important;
    }
    .story-brand-text {
        font-size: 22px !important;
    }
    .story-type {
        font-size: 13px !important;
    }

    /* ---- 3. Pages malle : trunk-specs-grid garde 2 cols mais compact ---- */
    .trunk-specs-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }
    .trunk-spec {
        padding: 6px 4px !important;
        min-height: 56px !important;
    }
    .trunk-spec svg {
        width: 16px !important;
        height: 16px !important;
    }
    .trunk-spec span {
        font-size: 11px !important;
        line-height: 1.2 !important;
    }

    /* ---- 4. Pages malle : trunk-viewer-buttons stack ---- */
    .trunk-viewer-buttons {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .trunk-viewer-buttons .btn-cta,
    .trunk-viewer-buttons .btn-lead {
        width: 100% !important;
    }

    /* ---- 5. Pages malle : details carousel cards plus petites ---- */
    .trunk-details-carousel,
    .cards-details-carousel {
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .cards-details-carousel {
        min-width: 180px !important;
        width: 180px !important;
        height: 180px !important;
        scroll-snap-align: center !important;
    }
    .trunk-details-carousel {
        gap: 10px !important;
        padding: 0 20px 12px !important;
    }

    /* ---- 6. Pages malle : trunk-viewer left/right stack ---- */
    .trunk-viewer {
        flex-direction: column !important;
    }
    .trunk-viewer-left,
    .trunk-viewer-right {
        width: 100% !important;
    }

    /* ---- 7. Articles/Blog hero h1 plus grand ---- */
    .journal-hero {
        margin: 80px 12px 12px !important;
        height: auto !important;
        min-height: 60vh !important;
    }
    .journal-hero-content h2 {
        font-size: 36px !important;
        line-height: 1.15 !important;
    }
    .journal-hero-content {
        bottom: 24px !important;
        left: 20px !important;
        right: 20px !important;
        gap: 10px !important;
    }
    .journal-hero-content > p {
        font-size: 14px !important;
    }
    /* Pills articles : padding plus genereux mobile (style global deja ajuste hors media) */
    .journal-filter {
        padding: 12px 20px !important;
        font-size: 14px !important;
        border: 1px solid #0A0A0A !important;
        background: #fff !important;
        color: #0A0A0A !important;
    }
    .journal-filter.active {
        background: #0A0A0A !important;
        color: #fff !important;
    }
    .journal-filters {
        gap: 8px !important;
    }

    /* ---- 8. Event page : pills + buttons plus grands ---- */
    .event-categories .protocol-tab,
    .event-categories .protocol-tabs-bar .protocol-tab {
        padding: 12px 22px !important;
        font-size: 14px !important;
    }
    .event-process .btn-cta,
    .event-cases .btn-cta,
    .event-categories .btn-cta,
    .event-process-cta .btn-cta,
    .event-categories-cta .btn-cta,
    .event-feature-text .btn-cta {
        padding: 16px 32px !important;
        font-size: 14px !important;
        letter-spacing: 1.5px !important;
    }
    /* Cards "recemment organises" : scroll snap + hint visuel */
    .event-cases-grid {
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-padding: 24px !important;
    }
    .event-cases-grid .event-case-card {
        scroll-snap-align: center !important;
    }
    .event-cases-wrapper::after {
        content: '\2192';
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 22px;
        color: rgba(10,10,10,0.45);
        pointer-events: none;
        z-index: 2;
    }
    /* Stars : sur mobile, pas de hover possible → forcer le rendu plein doré */
    .stars-hover .star-fill {
        color: #FFC107 !important;
    }
    .stars-hover .star-fill::before {
        content: '\2605' !important;
    }
    .stars-hover .star-fill::after {
        opacity: 1 !important;
        color: #FFC107 !important;
    }

    /* ---- 9. Entreprise : stats containers width same as photo, menu horizon/aura ---- */
    .hero-ent .hero-stats,
    .hero-stats {
        width: 100% !important;
        max-width: 100% !important;
        flex-wrap: wrap !important;
        gap: 16px !important;
    }
    /* Menu horizon/aura en horizontal scroll snap pour rester compact */
    .rituels-list {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 8px !important;
        padding-bottom: 6px !important;
        scrollbar-width: none !important;
    }
    .rituels-list::-webkit-scrollbar { display: none !important; }
    .rituels-item {
        flex: 0 0 auto !important;
        scroll-snap-align: start !important;
        white-space: nowrap !important;
    }
    /* Bouton CONTINUER : font Founders Grotesk (pas Kormelink italic) */
    .est-btn,
    button.est-btn {
        font-family: 'Founders Grotesk', sans-serif !important;
        font-style: normal !important;
        letter-spacing: 1.5px !important;
        padding: 16px 36px 14px !important;
        font-size: 14px !important;
    }

    /* ---- 10. Hotel : slider trunks centre + scroll infini robuste ---- */
    .hotel-trunks-grid {
        justify-content: flex-start !important;
        scroll-snap-type: x mandatory !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .hotel-trunks-header h2 {
        text-align: center !important;
    }
    /* Question/sous-titre plus lisible */
    .hotel-trunks-header p,
    .guest-exp-content h2,
    .guest-exp-content > h2 {
        font-size: 18px !important;
        line-height: 1.35 !important;
    }

    /* ---- 11. Testimony video thumbs plus petits + clickable ring ---- */
    .testi-thumb {
        width: 80px !important;
        height: 80px !important;
    }
    .testi-thumbs {
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .testi-thumb {
        scroll-snap-align: center !important;
        border: 1px solid rgba(255,255,255,0.18) !important;
    }
    .testi-thumb.is-active {
        border: 2px solid #FCF9E0 !important;
        box-shadow: 0 0 0 2px rgba(252,249,224,0.25) !important;
    }
    .testi-thumb-label {
        font-size: 12px !important;
        padding: 8px !important;
    }

    /* ---- 12. First-fold : zero gap entre header et hero ---- */
    .first-fold > .hero,
    .first-fold > .hero-hotel,
    .first-fold > .hero-hotel-video,
    .first-fold > .hero-ent,
    .first-fold > .hero-ent-video,
    .first-fold > .hero-event {
        margin-top: 0 !important;
    }
    .first-fold {
        padding-top: 72px !important;
        gap: 0 !important;
    }
}

/* event-cases-wrapper requires position: relative for ::after hint */
@media (max-width: 600px) {
    .event-cases-wrapper {
        position: relative !important;
    }
}

/* ==========================================================
   2026-05-21 — Mobile polish HOME (iPhone 12 pass v3)
   ========================================================== */
@media (max-width: 1024px) {
    /* 1) Logo : 44px, aspect ratio préservé (height auto), espace à droite */
    .logo {
        width: 44px !important;
        height: auto !important;
        max-height: 44px !important;
        object-fit: contain !important;
    }
    header > a:first-of-type {
        margin-right: 24px !important;
    }

    /* 2) EN/FR : pas de flash bleu, pas de zoom tap, pas de selection texte */
    /* Header right (contient lang switcher) : pousse a droite pour ecarter du logo */
    header > .header-right {
        margin-left: auto !important;
        margin-right: 12px !important;
        gap: 0 !important;
    }
    header > .btn-contact-mobile {
        margin-left: 0 !important;
    }

    .lang-switcher,
    .lang-switcher .lang-opt {
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        touch-action: manipulation;
    }
    .lang-switcher {
        font-size: 12px !important;
        letter-spacing: 1.5px !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 4px 4px !important;
        min-height: 40px;
        background: none !important;
    }
    .lang-switcher .lang-opt {
        padding: 10px 4px 12px !important;
        min-width: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        transition: none !important;
    }
    .lang-switcher .lang-opt:active,
    .lang-switcher .lang-opt:focus {
        outline: none !important;
        background: none !important;
        transform: none !important;
    }

    /* 3) HÔTELLERIE / POP-UP ENTREPRISE — label en BAS À GAUCHE + chevron
       ATTENTION : .col-home a flex-direction: column (ligne 233) donc :
       - justify-content = axe vertical → flex-end = BAS
       - align-items = axe horizontal → flex-start = GAUCHE */
    .col-home {
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        padding: 0 0 36px 28px !important;
        text-align: left !important;
    }
    .col-home > * {
        text-align: left !important;
    }
    .col-home .btn-segment,
    a.col-home .btn-segment {
        display: inline-block !important;
        background: transparent !important;
        color: #fff !important;
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 17px !important;
        letter-spacing: 1.2px !important;
        font-weight: 400 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        text-transform: uppercase !important;
        font-family: 'Founders Grotesk', sans-serif !important;
        text-shadow: 0 2px 14px rgba(0,0,0,0.45);
        text-align: left !important;
        white-space: normal !important;
        line-height: 1.2 !important;
        max-width: calc(100% - 28px) !important;
        box-sizing: border-box !important;
    }
    /* Chevron arrow après le texte — caractère literal UTF-8 */
    .col-home .btn-segment::after {
        content: " →" !important;
        display: inline !important;
        margin-left: 8px;
        position: static !important;
        background: none !important;
        border: none !important;
        opacity: 1 !important;
        color: #fff !important;
        font-size: 1em !important;
        width: auto !important;
        height: auto !important;
        font-family: 'Founders Grotesk', sans-serif !important;
        vertical-align: baseline;
    }
    .col-home:hover .btn-segment {
        background: transparent !important;
        color: #fff !important;
    }

    a.event-cta-mobile.btn-cta,
    .event-cta-mobile.btn-cta,
    button.event-cta-mobile.btn-cta {
        padding: 22px 56px !important;
        margin: 16px 0 0 !important;
        font-size: 15px !important;
        letter-spacing: 2px !important;
        font-weight: 500 !important;
        min-width: 78vw !important;
        max-width: 360px !important;
        border-radius: 2px !important;
    }

    .malle-edo {
        background-image: url('https://res.cloudinary.com/djy5i6bhi/image/upload/f_auto,q_auto/oom-trunk-edo') !important;
        background-color: #0A0A0A !important;
    }

    .stories {
        padding: 60px 0 !important;
    }
    .stories h2 {
        padding: 0 24px;
        margin-bottom: 24px;
    }
    /* Stories pager : flèches CENTREES SOUS les cards (en absolute, bottom du pager) */
    .stories-pager {
        display: block !important;
        position: relative !important;
        gap: 0 !important;
        padding-bottom: 64px !important;
    }
    .stories-arrow {
        display: flex !important;
        position: absolute !important;
        bottom: 8px !important;
        top: auto !important;
        z-index: 5;
        width: 44px !important;
        height: 44px !important;
        font-size: 20px !important;
        background: #fff !important;
        color: #0A0A0A !important;
        border: 1px solid #d0d0d0 !important;
        border-radius: 50% !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        touch-action: manipulation;
    }
    .stories-arrow-prev {
        left: calc(50% - 52px) !important;
        right: auto !important;
    }
    .stories-arrow-next {
        left: calc(50% + 8px) !important;
        right: auto !important;
    }
    .stories-dots {
        display: none !important;
    }
    .stories-viewport {
        position: relative !important;
        min-height: 0 !important;
        flex: none !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 24px 16px !important;
        align-items: stretch;
    }
    .stories-viewport::-webkit-scrollbar {
        display: none;
    }
    .stories-page,
    .stories-page.is-active {
        position: relative !important;
        inset: auto !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 12px !important;
        grid-template-columns: none !important;
        grid-auto-rows: auto !important;
        margin: 0 !important;
        flex: 0 0 auto !important;
        min-height: 0 !important;
        align-items: stretch;
    }
    /* Toutes les stories ont LA MEME hauteur, peu importe story-tall / story-wide / nth-child */
    .stories .story-item,
    .stories .story-item.story-tall,
    .stories .story-item.story-wide,
    .stories-page .story-item,
    .stories-grid .story-item,
    .stories-grid .story-item:nth-child(1),
    .stories-grid .story-item:nth-child(6) {
        flex: 0 0 78vw !important;
        width: 78vw !important;
        max-width: 78vw !important;
        height: 440px !important;
        min-height: 440px !important;
        max-height: 440px !important;
        grid-row: auto !important;
        grid-column: auto !important;
        scroll-snap-align: start !important;
        opacity: 1 !important;
        transform: none !important;
        border-radius: 14px;
        overflow: hidden;
    }
    .stories .story-item > img:first-child {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }
}

@media (max-width: 600px) {
    .stories .story-item,
    .stories .story-item.story-tall,
    .stories .story-item.story-wide,
    .stories-page .story-item,
    .stories-grid .story-item,
    .stories-grid .story-item:nth-child(1),
    .stories-grid .story-item:nth-child(6) {
        flex: 0 0 82vw !important;
        width: 82vw !important;
        max-width: 82vw !important;
        height: 420px !important;
        min-height: 420px !important;
        max-height: 420px !important;
    }
    .col-home .btn-segment {
        font-size: 16px !important;
    }
    a.event-cta-mobile.btn-cta {
        padding: 20px 40px !important;
        font-size: 14px !important;
        min-width: 82vw !important;
    }
}

@media (max-width: 380px) {
    .logo {
        width: 38px !important;
        height: auto !important;
        max-height: 38px !important;
    }
    .stories .story-item,
    .stories .story-item.story-tall,
    .stories .story-item.story-wide,
    .stories-page .story-item,
    .stories-grid .story-item,
    .stories-grid .story-item:nth-child(1),
    .stories-grid .story-item:nth-child(6) {
        flex: 0 0 86vw !important;
        width: 86vw !important;
        max-width: 86vw !important;
        height: 380px !important;
        min-height: 380px !important;
        max-height: 380px !important;
    }
    .col-home .btn-segment {
        font-size: 15px !important;
    }
}

/* Force Founders Grotesk sur tous les .btn-cta (incl. DEMANDER UNE ÉTUDE)
   Les browsers ne propagent pas inherit sur <button> par défaut */
button.btn-cta,
a.btn-cta,
.btn-cta {
    font-family: 'Founders Grotesk', 'Helvetica Neue', Arial, sans-serif !important;
}
.tailored .btn-cta,
.tailored .form-row .btn-cta {
    font-family: 'Founders Grotesk', 'Helvetica Neue', Arial, sans-serif !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
}


/* ==========================================================
   ANTI-OVERFLOW HORIZONTAL — empêche tout scroll lateral de la page
   ========================================================== */
html {
    overflow-x: clip !important;
    overflow-x: hidden !important;
    max-width: 100vw;
}
body {
    overflow-x: clip !important;
    overflow-x: hidden !important;
    max-width: 100vw;
    width: 100%;
}
@media (max-width: 1024px) {
    main,
    section,
    .first-fold,
    footer {
        max-width: 100vw !important;
        overflow-x: clip;
    }
    /* Hôtellerie / Pop-Up Entreprise : pas d'overflow sur le label */
    .col-home {
        overflow: hidden !important;
    }
    .col-home .btn-segment {
        overflow-wrap: anywhere;
        word-break: normal;
    }
}

/* ==========================================================
   2026-05-21 — Mobile polish HOTEL (iPhone 12)
   1) Hero hotel : retire h1/p, garde uniquement CTA "RESERVEZ VOTRE DEMO"
   2) Modals service : compact (pas de scroll interne)
   3) Modal close (X) : noire, entouree, bien visible
   4) Hotel-trunks : scroll horizontal simple (pas d'infinite-scroll jittery)
   5) "Ils ont choisi OOM" : H2 plus petit
   ========================================================== */
@media (max-width: 1024px) {
    /* 1) Hero hotel : cache tout sauf le CTA principal */
    .hero.hero-hotel .hero-content h1,
    .hero.hero-hotel-video .hero-content h1,
    .hero.hero-hotel .hero-content p,
    .hero.hero-hotel-video .hero-content p {
        display: none !important;
    }
    .hero.hero-hotel .hero-content,
    .hero.hero-hotel-video .hero-content {
        justify-content: flex-end !important;
        align-items: center !important;
        padding-bottom: 40px !important;
    }
    .hero.hero-hotel .hero-buttons,
    .hero.hero-hotel-video .hero-buttons {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
        width: 88% !important;
        max-width: 360px !important;
        margin: 0 auto !important;
    }
    /* Anti-lead-loss : cache RESERVEZ DEMO (CONTACT deja dans header), garde TELECHARGER LA BROCHURE */
    .hero.hero-hotel .hero-buttons .btn-outline,
    .hero.hero-hotel-video .hero-buttons .btn-outline {
        display: none !important;
    }
    .hero.hero-hotel .hero-buttons .btn-lead,
    .hero.hero-hotel-video .hero-buttons .btn-lead {
        display: inline-flex !important;
        width: 100% !important;
        background: #0A0A0A !important;
        color: #fff !important;
        border: none !important;
        padding: 18px 24px !important;
        font-size: 13px !important;
        letter-spacing: 1.8px !important;
        border-radius: 2px !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* 2) Service modal : compact, pas de scroll interne autant que possible */
    .service-modal {
        padding: 12px !important;
    }
    .service-modal-content {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        border-radius: 14px !important;
        overflow-y: auto !important;
    }
    .service-modal-image {
        height: 160px !important;
    }
    .service-modal-image img {
        height: 160px !important;
    }
    .service-modal-body {
        padding: 18px 18px 22px !important;
        gap: 10px !important;
    }
    .service-modal-body h2 {
        font-size: 1.2rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }
    .service-modal-body p {
        font-size: 0.85rem !important;
        line-height: 1.45 !important;
        margin: 0 !important;
    }
    .service-modal-body ul li {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }
    .service-modal-body .btn-cta {
        padding: 12px 22px !important;
        font-size: 12px !important;
        margin-top: 8px !important;
    }

    /* 3) Croix X : noire avec contour, bien visible (plus de bleu iOS par defaut) */
    .service-modal-close,
    button.service-modal-close,
    .oom-modal-close,
    button.oom-modal-close {
        background: #fff !important;
        color: #0A0A0A !important;
        border: 1.5px solid #0A0A0A !important;
        width: 36px !important;
        height: 36px !important;
        top: 12px !important;
        right: 12px !important;
        font-size: 18px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* 5) "Ils ont choisi OOM" : H2 reduit pour tenir sur mobile */
    .temoignages-v2 {
        padding: 48px 20px !important;
    }
    .temoignages-v2-header {
        margin-bottom: 24px !important;
    }
    .temoignages-v2-header h2 {
        font-size: 26px !important;
        line-height: 1.15 !important;
    }
}

@media (max-width: 600px) {
    .service-modal-body h2 {
        font-size: 1.1rem !important;
    }
    .temoignages-v2-header h2 {
        font-size: 24px !important;
    }
}

/* ==========================================================
   2026-05-21 — Mobile polish HOTEL v2
   - Gap social-proof -> service-cards reduit
   - Modals La Malle / Protocoles : texte compact
   - Modals Gestion / Process : pas de scroll interne
   - Estimateur slider : centrage propre + bouton retour visible
   ========================================================== */
@media (max-width: 1024px) {
    /* Reduire le gap entre bandeau logos et "ecosysteme de beaute" */
    .social-proof {
        padding: 40px 16px 4px !important;
    }
    .service-cards {
        padding: 12px 16px 56px !important;
    }
    .service-cards-header {
        margin-bottom: 20px !important;
        margin-top: 0 !important;
    }
    .service-cards-header h2 {
        margin-top: 0 !important;
    }

    /* Service-card miniatures (page hotel) : texte tronque pour les petites cards
       malle (nth-child 2) et coiffeurs (nth-child 3) qui font 50% de largeur */
    .service-cards-list .service-card:nth-child(2) .service-card-text p,
    .service-cards-list .service-card:nth-child(3) .service-card-text p {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
        font-size: 0.74rem !important;
        line-height: 1.35 !important;
    }
    .service-cards-list .service-card:nth-child(2) .service-card-text h3,
    .service-cards-list .service-card:nth-child(3) .service-card-text h3 {
        font-size: 0.95rem !important;
    }
    .service-cards-list .service-card:nth-child(2) .service-card-text,
    .service-cards-list .service-card:nth-child(3) .service-card-text {
        padding: 14px !important;
        gap: 6px !important;
    }

    /* Modal protocol panel : texte plus compact (Nos Protocoles + La Malle) */
    .protocol-panel,
    .protocol-panel-horizontal {
        height: auto !important;
    }
    .protocol-panel-text {
        gap: 6px !important;
        padding: 12px 18px 18px !important;
    }
    .protocol-panel-text h3,
    .protocol-panel-text h4 {
        font-size: 1.05rem !important;
        line-height: 1.15 !important;
        margin: 0 !important;
    }
    .protocol-panel-text p {
        font-size: 0.82rem !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .modal-protocol-duration {
        font-size: 11px !important;
    }
    .protocol-panel img,
    .protocol-panel-horizontal img {
        max-height: 160px !important;
    }
    /* La Malle : cache les footer cards (3 features par malle) sur mobile - trop dense */
    .protocol-panel-footer,
    .modal-protocol-footer {
        display: none !important;
    }

    

    /* Modal Audit au lancement : photo + 4 steps avec timeline-line verticale */
    .modal-timeline,
    .service-modal-body .modal-timeline {
        display: block !important;
        overflow: visible !important;
        padding: 0 !important;
    }
    .modal-timeline-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    .modal-timeline-img {
        display: block !important;
        width: 100% !important;
        aspect-ratio: 16/9 !important;
        height: auto !important;
        max-height: 220px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        margin: 0 !important;
        flex: none !important;
        max-width: none !important;
    }
    .modal-timeline-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    /* Math d'alignement :
       Container padding-left:48px -> contenu (h4,p) commence a 48px du bord
       Dot 32px positionne a left:-48px du step -> dot a 0-32px du container, centre a 16px
       Ligne verticale ::before a left:16px width:2px -> EXACTEMENT au centre du dot
       Espace entre dot (fin 32px) et texte (debut 48px) = 16px = pas de collision */
    .timeline-container {
        display: block !important;
        position: relative !important;
        padding-left: 48px !important;
        flex: none !important;
    }
    .timeline-container::before,
    .timeline-container::after {
        left: 16px !important;
    }
    .timeline-step {
        display: block !important;
        position: relative !important;
        padding: 4px 0 14px !important;
        min-height: 36px !important;
    }
    .timeline-dot {
        position: absolute !important;
        left: -48px !important;
        top: 4px !important;
        right: auto !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 0.75rem !important;
        margin: 0 !important;
    }
    .timeline-content {
        min-width: 0 !important;
        padding-left: 0 !important;
    }
    .timeline-dot span {
        font-size: 0.75rem !important;
    }
    .timeline-content h4 {
        font-size: 0.92rem !important;
        margin: 0 0 2px !important;
        line-height: 1.2 !important;
    }
    .timeline-content p {
        font-size: 0.78rem !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* ESTIMATEUR — MEGA RESET centrage strict
       .est-step est display:none par defaut, .active le passe en flex (base rule).
       On force tous les enfants a se centrer via align-self + margin auto. */
    section.estimateur,
    .estimateur {
        text-align: center !important;
        padding: 36px 0 !important;
        box-sizing: border-box !important;
    }
    .estimateur h2 {
        font-size: 24px !important;
        margin: 0 16px 24px !important;
        text-align: center !important;
    }
    .est-step {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 16px 16px !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 360px !important;
        box-sizing: border-box !important;
        gap: 18px !important;
        text-align: center !important;
    }
    .est-step > * {
        align-self: center !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .est-label {
        margin: 0 auto !important;
    }
    .est-value {
        font-size: 56px !important;
        margin: 0 auto !important;
    }
    .est-question {
        font-size: 17px !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }
    /* Slider input range : reset complet iOS + centrage */
    #est-slider,
    #est-hotel-slider,
    .est-step input[type="range"] {
        width: 260px !important;
        max-width: calc(100% - 24px) !important;
        height: 4px !important;
        margin: 8px auto !important;
        display: block !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        background: #e5e5e5 !important;
        border-radius: 2px !important;
        outline: none !important;
        border: none !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        align-self: center !important;
    }
    /* Labels du slider : revient en absolute pour que "150" (middle) soit EXACTEMENT
       au centre sous le milieu du slider (space-between alignait par largeur de texte, pas par position) */
    .est-slider-labels {
        position: relative !important;
        display: block !important;
        width: 260px !important;
        max-width: calc(100% - 24px) !important;
        margin: 0 auto !important;
        height: 22px !important;
        align-self: center !important;
        font-size: 13px !important;
    }
    .est-slider-labels span {
        position: absolute !important;
    }
    .est-slider-labels span:first-child {
        left: 0 !important;
        transform: none !important;
    }
    .est-slider-labels span:nth-child(2) {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    .est-slider-labels span:last-child {
        left: auto !important;
        right: 0 !important;
        transform: none !important;
    }
    /* Cards Business/Luxe/Loisirs (.est-cards) : meme largeur que le slider/boutons,
       centrees, stack vertical avec stretch */
    .est-cards {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 260px !important;
        max-width: calc(100% - 24px) !important;
        margin: 0 auto !important;
        gap: 10px !important;
        align-self: center !important;
        padding: 0 !important;
    }
    .est-card {
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* Boutons slider : LARGEUR EXACTEMENT egale au slider (260px) pour
       alignement visuel parfait. Override de la legacy .est-btn { width: 100% } */
    .est-btn,
    .est-back,
    button.est-btn,
    button.est-back {
        width: 260px !important;
        min-width: 260px !important;
        max-width: calc(100% - 24px) !important;
        margin: 0 auto !important;
        align-self: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    .est-btn,
    button.est-btn {
        font-size: 13px !important;
        padding: 16px 24px !important;
        background: #0A0A0A !important;
        color: #fff !important;
        border: none !important;
        border-radius: 2px !important;
        letter-spacing: 1.5px !important;
    }
    .est-back,
    button.est-back {
        font-size: 13px !important;
        padding: 13px 22px !important;
        color: #0A0A0A !important;
        border: 1px solid #0A0A0A !important;
        background: #fff !important;
        border-radius: 2px !important;
        letter-spacing: 1.5px !important;
        margin-top: 4px !important;
    }

}

/* iOS Safari : cache le play button overlay sur TOUTES les videos
   (apparait quand autoplay echoue). En dehors du @media pour s'appliquer partout. */
video::-webkit-media-controls,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-overlay-enclosure,
video::-internal-media-controls-overlay-cast-button {
    display: none !important;
    -webkit-appearance: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 380px) {
    .temoignages-v2-header h2 {
        font-size: 22px !important;
    }
}

/* ==========================================================
   "Ils ont choisi OOM" mobile — video gauche + colonne thumbnails verticale droite
   Puis quote + author dessous (1 colonne full width)
   ========================================================== */
@media (max-width: 1024px) {
    .temoignages-v2 {
        display: grid !important;
        grid-template-columns: 56% 1fr !important;
        grid-template-areas:
            "header header"
            "video thumbs"
            "info info" !important;
        column-gap: 12px !important;
        row-gap: 4px !important;
        padding: 48px 16px !important;
    }
    .temoignages-v2-header {
        grid-area: header !important;
        margin: 0 !important;
        text-align: left !important;
    }
    .temoignages-v2-header h2 {
        text-align: left !important;
    }
    /* testi-featured contient video + info : on dispatch en grid areas via display: contents */
    .testi-featured {
        display: contents !important;
    }
    /* Featured video : LOCK aspect-ratio 9/16 pour eviter shift entre portrait/landscape
       (sinon une video landscape comme Sofitel raccourcit la rangee et tout bouge) */
    .testi-featured-video {
        grid-area: video !important;
        max-width: 100% !important;
        margin: 0 !important;
        width: 100% !important;
        aspect-ratio: 9 / 16 !important;
        height: auto !important;
        align-self: start !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }
    .testi-featured-video video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }
    .testi-featured-info {
        grid-area: info !important;
        padding: 0 !important;
    }
    .testi-featured-quote {
        font-size: 16px !important;
        line-height: 1.4 !important;
        margin: 0 0 10px !important;
    }
    .testi-featured-author strong {
        font-size: 14px !important;
    }
    .testi-featured-author span {
        font-size: 12px !important;
    }
    /* Thumbs : GRILLE 2x3 de CARRES (aspect 1/1) qui s'alignent avec featured video 4/5 */
    .testi-thumbs-wrap,
    section.temoignages-v2 .testi-thumbs-wrap {
        grid-area: thumbs !important;
        display: block !important;
        position: relative !important;
        align-self: stretch !important;
        height: 100% !important;
        overflow: hidden !important;
    }
    .testi-thumbs,
    section.temoignages-v2 .testi-thumbs {
        display: grid !important;
        flex: none !important;
        flex-direction: row !important;
        grid-template-columns: 1fr 1fr !important;
        grid-auto-rows: 1fr !important;
        gap: 6px !important;
        height: 100% !important;
        overflow: hidden !important;
        scroll-snap-type: none !important;
        -webkit-overflow-scrolling: auto !important;
        padding: 0 !important;
        scrollbar-width: none;
    }
    .testi-thumbs::-webkit-scrollbar { display: none; }
    .testi-thumb,
    section.temoignages-v2 .testi-thumb {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        flex: none !important;
        scroll-snap-align: none !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        padding: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }
    .testi-thumb.is-active,
    section.temoignages-v2 .testi-thumb.is-active {
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }
    .testi-thumb video {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    .testi-thumbs-arrow {
        display: none !important;
    }
}

@media (max-width: 380px) {
    .temoignages-v2 {
        grid-template-columns: 44% 1fr !important;
        padding: 40px 16px !important;
    }
    .testi-thumb {
        height: 68px !important;
        flex-basis: 68px !important;
    }
}

/* H2 "Une experience unique pour vos hotes" : agrandi sur mobile (etait 18px = trop petit) */
@media (max-width: 1024px) {
    .guest-exp-content h2,
    .guest-exp-content > h2,
    section.guest-experience .guest-exp-content h2 {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin: 0 0 16px !important;
    }
    /* Mobile + Tablet (≤1024px) : DECOUVRIR seul, AGGRESSIF cache ACHETER/LOUER */
    .malle-cta-desktop,
    button.malle-cta-desktop,
    .btn-cta.malle-cta-desktop,
    .btn-buy.malle-cta-desktop,
    .btn-rent.malle-cta-desktop {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
}
/* Desktop strict (≥1025px) : cache DECOUVRIR, affiche ACHETER + LOUER */
@media (min-width: 1025px) {
    .malle-cta-group .btn-discover,
    .malle-cta-group a.btn-discover {
        display: none !important;
    }
}

/* ==========================================================
   2026-05-21 — Mobile polish ENTREPRISE (iPhone 12 pass v1)
   1) Hero : retire h1/p/brochure, garde CTA RESERVEZ VOTRE DEMO
   2) Stats : pills marron -> pills black (style desktop), 3 cards stack vertical pleine largeur photo, padding entre photo et cards
   3) Rituels menu : pills scrollables horizontalement
   4) Book a demo button : noir plein contrastant
   5) Curate your experience : works-visuals visibles
   6) They chose OOM : meme layout que hotel (video 56% + grille 2-col same-height)
   ========================================================== */
@media (max-width: 1024px) {
    /* 1) Hero entreprise : cache tout sauf RESERVEZ VOTRE DEMO */
    .hero.hero-ent .hero-content h1,
    .hero.hero-ent-video .hero-content h1,
    .hero.hero-ent .hero-content p,
    .hero.hero-ent-video .hero-content p {
        display: none !important;
    }
    .hero.hero-ent .hero-content,
    .hero.hero-ent-video .hero-content {
        justify-content: flex-end !important;
        align-items: center !important;
        padding-bottom: 40px !important;
    }
    .hero.hero-ent .hero-buttons,
    .hero.hero-ent-video .hero-buttons {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
        width: 88% !important;
        max-width: 360px !important;
        margin: 0 auto !important;
    }
    /* Anti-lead-loss : cache RESERVEZ DEMO (CONTACT deja dans header), garde TELECHARGEZ NOS TARIFS */
    .hero.hero-ent .hero-buttons .btn-outline,
    .hero.hero-ent-video .hero-buttons .btn-outline {
        display: none !important;
    }
    .hero.hero-ent .hero-buttons .btn-lead,
    .hero.hero-ent-video .hero-buttons .btn-lead {
        display: inline-flex !important;
        width: 100% !important;
        background: #0A0A0A !important;
        color: #fff !important;
        border: none !important;
        padding: 18px 24px !important;
        font-size: 13px !important;
        letter-spacing: 1.8px !important;
        border-radius: 2px !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* 2) STATS : memes regles que guest-experience overlay (photo + swipe cards EN-DESSOUS)
       Pills noires (pas marron), cards 80vw, margin-top positif (pas d'overlap) */
    .stats-wrapper .stats-card .stats-tag,
    .guest-exp-overlay .stats-card .stats-tag,
    section.stats-section .stats-card .stats-tag {
        background-color: #0A0A0A !important;
        color: #fff !important;
        padding: 8px 14px 5px !important;
        border-radius: 20px !important;
        font-size: 9px !important;
        letter-spacing: 2px !important;
        text-transform: uppercase !important;
        align-self: flex-start !important;
        justify-self: flex-start !important;
        display: inline-block !important;
        width: auto !important;
        font-family: 'Founders Grotesk', sans-serif !important;
    }
    section.stats-section .stats-image-wrapper {
        margin: 0 12px !important;
    }
    /* STATS : grid 1 card en haut full-width + 2 cards cote a cote en bas, MEME HAUTEUR
       Padding lateral reduit pour cards plus larges */
    section.stats-section .stats-wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto 1fr !important;
        align-items: stretch !important;
        position: static !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
        gap: 10px !important;
        padding: 20px 12px 0 !important;
        margin: 0 !important;
    }
    section.stats-section .stats-wrapper::-webkit-scrollbar {
        display: none;
    }
    section.stats-section .stats-wrapper .stats-card {
        flex: none !important;
        max-width: none !important;
        min-width: 0 !important;
        width: auto !important;
        height: 100% !important;
        scroll-snap-align: none !important;
        padding: 20px 16px !important;
        background: #fff !important;
        border-radius: 14px !important;
        box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
        opacity: 1 !important;
        transform: none !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        align-items: center !important;
        text-align: center !important;
        gap: 14px !important;
        overflow: hidden !important;
    }
    section.stats-section .stats-wrapper .stats-card h3 {
        margin: 0 !important;
        text-align: center !important;
    }
    section.stats-section .stats-wrapper .stats-card p {
        margin: 0 !important;
        text-align: center !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        hyphens: auto !important;
    }
    /* Pills toutes centrees pour coherence visuelle */
    section.stats-section .stats-wrapper .stats-card .stats-tag {
        align-self: center !important;
        justify-self: center !important;
        margin: 0 auto !important;
    }
    /* Premiere card : pleine largeur en haut */
    section.stats-section .stats-wrapper .stats-card:nth-child(1) {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
    }
    /* Cards 2 et 3 : cote a cote en bas, MEME hauteur via align-items stretch */
    section.stats-section .stats-wrapper .stats-card:nth-child(2),
    section.stats-section .stats-wrapper .stats-card:nth-child(3) {
        grid-column: span 1 !important;
        grid-row: 2 !important;
    }
    /* h3 reduit + p text wrap proprement (etait coupe avant) */
    section.stats-section .stats-wrapper .stats-card:nth-child(2) h3,
    section.stats-section .stats-wrapper .stats-card:nth-child(3) h3 {
        font-size: 34px !important;
        line-height: 1 !important;
    }
    section.stats-section .stats-wrapper .stats-card:nth-child(2) p,
    section.stats-section .stats-wrapper .stats-card:nth-child(3) p {
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    /* 3) RITUELS : photo en background visible + overlay sombre semi-transparent
       min-height: la section a une hauteur min mais le photo bg remplit toute la
       section (pas de bande marron qui depasse en bas) */
    section.rituels {
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        position: relative !important;
        overflow: hidden !important;
        background: #2D1A0E !important;
        display: block !important;
    }
    /* .rituels-right occupe TOUT le fond, opacite 1 (le bg-img a sa propre opacity) */
    .rituels-right {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 0 !important;
        opacity: 1 !important;
        pointer-events: none !important;
        overflow: hidden !important;
    }
    /* Image active FULL opacity (au lieu de 0.55 qui la rendait quasi invisible)
       L'overlay noir gradient au-dessus s'occupe du contraste pour lisibilite */
    .rituels-bg-img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    .rituels-bg-img.active {
        opacity: 1 !important;
    }
    /* Overlay noir gradient assez dense pour lisibilite mais laisse voir la photo */
    section.rituels::before {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.7) 100%) !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }
    /* Contenu en z-index 2 par-dessus, avec gap entre nav et titre pour eviter chevauchement */
    .rituels-left {
        position: relative !important;
        z-index: 2 !important;
        width: 100% !important;
        padding: 32px 20px 36px !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
        overflow: hidden !important;
        gap: 0 !important;
    }
    /* Gap entre nav pills (haut) et contenu (en-dessous) */
    .rituels-info {
        margin-top: 12px !important;
    }
    .rituels-detail.active {
        gap: 20px !important;
        padding-top: 12px !important;
    }
    /* Espace explicite entre "RITUELS VISAGE" et le titre "Pop-up Aura" */
    .rituels-subtitle {
        margin: 0 0 4px !important;
        display: block !important;
    }
    .rituels-big-name {
        margin-top: 4px !important;
    }
    /* Nav pills : 3 doivent FIT sur la largeur ecran sans debordement
       (3 items + 2 gaps = total largeur ~ container) */
    nav.rituels-list,
    .rituels-list {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: visible !important;
        scroll-snap-type: none !important;
        gap: 6px !important;
        padding: 0 !important;
        margin: 0 0 20px !important;
        scrollbar-width: none;
        width: 100% !important;
    }
    .rituels-list::-webkit-scrollbar { display: none; }
    .rituels-line-indicator { display: none !important; }
    button.rituels-item,
    .rituels-item {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 8px 6px 6px !important;
        font-size: 10.5px !important;
        background: rgba(255,255,255,0.12) !important;
        border: 1px solid rgba(255,255,255,0.4) !important;
        border-radius: 20px !important;
        color: #fff !important;
        opacity: 1 !important;
        white-space: nowrap !important;
        letter-spacing: 0.5px !important;
        text-transform: none !important;
        text-align: center !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    button.rituels-item.active,
    .rituels-item.active {
        background: #fff !important;
        color: #0A0A0A !important;
        border-color: #fff !important;
        opacity: 1 !important;
    }

    /* Contenu textuel : pas de debordement */
    .rituels-info,
    .rituels-detail {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .rituels-detail {
        gap: 14px !important;
    }
    .rituels-subtitle {
        font-size: 11px !important;
        letter-spacing: 2px !important;
    }
    .rituels-big-name {
        font-size: 32px !important;
        line-height: 1.1 !important;
        margin: 0 !important;
        word-break: break-word !important;
    }
    .rituels-tag {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .rituels-tag span {
        font-size: 10px !important;
        padding: 6px 10px 4px !important;
        letter-spacing: 1px !important;
        white-space: nowrap !important;
    }
    .rituels-desc {
        font-size: 14px !important;
        line-height: 1.5 !important;
        max-width: 100% !important;
    }
    .rituels-capacity,
    .rituels-price {
        font-size: 13px !important;
        display: block !important;
    }

    /* 4) Boutons RESERVER + TELECHARGER : stack vertical, blanc plein + outline */
    .rituels-buttons {
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 8px !important;
        align-items: stretch !important;
        width: 100% !important;
    }
    .rituels-btn-demo,
    a.rituels-btn-demo,
    button.rituels-btn-demo {
        width: 100% !important;
        background: #fff !important;
        color: #0A0A0A !important;
        padding: 16px 24px !important;
        font-size: 13px !important;
        font-family: 'Founders Grotesk', 'Helvetica Neue', Arial, sans-serif !important;
        font-style: normal !important;
        font-weight: 400 !important;
        letter-spacing: 1.8px !important;
        text-align: center !important;
        border: none !important;
        border-radius: 2px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-transform: uppercase !important;
        box-sizing: border-box !important;
    }
    .rituels-btn-brochure,
    button.rituels-btn-brochure {
        width: 100% !important;
        background: transparent !important;
        color: #fff !important;
        border: 1px solid rgba(255,255,255,0.5) !important;
        padding: 16px 24px !important;
        font-size: 13px !important;
        font-family: 'Founders Grotesk', 'Helvetica Neue', Arial, sans-serif !important;
        font-style: normal !important;
        font-weight: 400 !important;
        letter-spacing: 1.8px !important;
        text-align: center !important;
        border-radius: 2px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-transform: uppercase !important;
        box-sizing: border-box !important;
    }

    /* 5) Curate your experience : works-visuals visibles avec hauteur fixe */
    .event-process-step .event-process-visual {
        min-height: 200px !important;
        width: 100% !important;
    }
    .event-process-step .works-visuals {
        height: 200px !important;
        width: 100% !important;
        min-height: 200px !important;
        background-color: #f7f7f7 !important;
        border-radius: 12px !important;
        position: relative !important;
        overflow: visible !important;
    }
    .event-process-step .works-visuals img {
        display: block !important;
    }
}


@media (max-width: 380px) {
    .guest-exp-content h2,
    .guest-exp-content > h2 {
        font-size: 24px !important;
    }
}

/* ==========================================================
   2026-05-21 — Mobile polish PAGES MALLE (revolution/regency/edo/shampoo)
   1) Boutons trunk-viewer-buttons + trunk-contact-buttons : meme style
   2) Anti-overflow strict sur tous les containers trunk-*
   ========================================================== */
@media (max-width: 1024px) {
    /* Anti-overflow strict */
    main,
    section.trunk-viewer,
    section.trunk-details,
    section.trunk-contact,
    .trunk-viewer-left,
    .trunk-viewer-right,
    .trunk-specs-grid,
    .trunk-includes-pills,
    .trunk-details-carousel,
    .trunk-contact-form {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    .trunk-details-carousel {
        overflow-x: auto !important; /* swipe horizontal autorise sur ce seul element */
    }
    /* Pills inclus : wrap propre, pas de debordement */
    .trunk-includes-pills {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .trunk-pill {
        flex: 0 0 auto !important;
        max-width: 100% !important;
        white-space: normal !important;
        word-break: break-word !important;
        font-size: 11px !important;
        padding: 6px 12px 4px !important;
    }
    /* Spec items : icone + texte, pas d'overflow */
    .trunk-spec {
        max-width: 100% !important;
        box-sizing: border-box !important;
        word-break: break-word !important;
    }
    .trunk-spec span {
        word-break: break-word !important;
        max-width: 100% !important;
    }

    /* BOUTONS UNIFIES : meme style pour trunk-viewer-buttons ET trunk-contact-buttons
       Style : primaire = solid noir/blanc selon bg, secondaire = outline assorti */
    .trunk-viewer-buttons,
    .trunk-contact-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        margin-top: 16px !important;
        align-items: stretch !important;
    }
    .trunk-viewer-buttons .btn-cta,
    .trunk-viewer-buttons .btn-lead,
    .trunk-contact-buttons .btn-cta,
    .trunk-contact-buttons .trunk-contact-outline,
    a.trunk-contact-outline,
    button.trunk-viewer-buttons,
    button.trunk-contact-buttons {
        width: 100% !important;
        margin: 0 !important;
        padding: 16px 24px !important;
        font-size: 13px !important;
        font-family: 'Founders Grotesk', 'Helvetica Neue', Arial, sans-serif !important;
        font-style: normal !important;
        font-weight: 400 !important;
        letter-spacing: 1.5px !important;
        text-align: center !important;
        border-radius: 2px !important;
        text-transform: uppercase !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        flex: none !important;
        max-width: 100% !important;
    }
    /* Trunk viewer (light bg) : primaire noir plein + secondaire noir outline */
    .trunk-viewer-buttons .btn-cta {
        background: #0A0A0A !important;
        color: #fff !important;
        border: 1px solid #0A0A0A !important;
    }
    .trunk-viewer-buttons .btn-lead {
        background: transparent !important;
        color: #0A0A0A !important;
        border: 1px solid #0A0A0A !important;
    }
    /* Trunk contact (dark bg) : primaire blanc plein + secondaire blanc outline */
    .trunk-contact-buttons .btn-cta {
        background: #fff !important;
        color: #0A0A0A !important;
        border: 1px solid #fff !important;
    }
    .trunk-contact-buttons .trunk-contact-outline,
    a.trunk-contact-outline {
        background: transparent !important;
        color: #fff !important;
        border: 1px solid rgba(255,255,255,0.5) !important;
    }

    /* Fleches sous trunk-details : reset iOS bleu -> noir, vrais bordures noires */
    .trunk-details-left-btn,
    .trunk-details-right-btn,
    button.trunk-details-left-btn,
    button.trunk-details-right-btn {
        color: #0A0A0A !important;
        background: #fff !important;
        border: 1px solid #0A0A0A !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        -webkit-tap-highlight-color: transparent !important;
        font-family: 'Founders Grotesk', sans-serif !important;
        font-size: 18px !important;
        line-height: 1 !important;
    }
    .btn-details-carousel {
        justify-content: center !important;
        margin-top: 20px !important;
    }

    /* Espace entre la section trunk-details et la section trunk-contact suivante */
    section.trunk-details {
        padding-bottom: 56px !important;
    }
    section.trunk-contact {
        padding-top: 56px !important;
    }

    /* Espace entre le paragraphe "pensée pour les espaces de luxe" et le carrousel */
    section.trunk-details > p {
        margin-bottom: 32px !important;
    }

    /* Photos du carrousel trunk-details : plus grandes (etaient 180x180 trop petites) */
    section.trunk-details .cards-details-carousel {
        min-width: 78vw !important;
        width: 78vw !important;
        height: 78vw !important;
        max-height: 380px !important;
        scroll-snap-align: center !important;
    }

    /* ============================================================
       PAGE HISTOIRE (story.html) - mobile polish
       1) Hero : taille raisonable, titre centré bas
       2) Footer : compact, moins prominent
       3) Valeurs : carrousel horizontal swipe
       ============================================================ */
    /* Story hero : grand, prend tout l'espace dispo dans .first-fold
       (qui fait 100dvh - padding-top 72px) */
    section.story-hero {
        flex: 1 1 auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 12px 12px !important;
        border-radius: 16px !important;
    }

    /* JOURNAL / BLOG mobile : hero plus grand, pills compactes, scroll libre */
    section.journal-hero {
        height: 82vh !important;
        max-height: 720px !important;
        min-height: 0 !important;
        margin: 80px 12px 16px !important;
        touch-action: pan-y !important;
    }
    .journal-hero-content {
        bottom: 24px !important;
        left: 18px !important;
        right: 18px !important;
        gap: 8px !important;
    }
    .journal-hero-content h2 {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
    }
    .journal-filters {
        gap: 6px !important;
        flex-wrap: wrap !important;
    }
    .journal-filter {
        padding: 8px 14px !important;
        font-size: 11px !important;
        letter-spacing: 0.5px !important;
        border-radius: 18px !important;
        border-width: 1px !important;
    }
    .journal-blog-header {
        padding: 0 20px !important;
    }
    .journal-toolbar {
        padding: 0 20px !important;
    }
    .story-hero-img img {
        object-position: center !important;
    }
    .story-hero-title {
        font-size: clamp(3rem, 16vw, 6rem) !important;
        bottom: 4vh !important;
    }

    /* VALEURS : carrousel horizontal swipe au lieu du stack vertical */
    section.story-values {
        padding: 56px 0 !important;
    }
    .story-values-header {
        padding: 0 24px !important;
        margin-bottom: 24px !important;
    }
    .story-values-header h2 {
        font-size: 32px !important;
    }
    .story-values-grid {
        display: flex !important;
        flex-direction: row !important;
        grid-template-columns: none !important;
        gap: 14px !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none;
        padding: 0 24px 12px !important;
        margin: 0 !important;
        max-width: 100% !important;
    }
    .story-values-grid::-webkit-scrollbar { display: none; }
    .story-value-card {
        flex: 0 0 80vw !important;
        max-width: 80vw !important;
        scroll-snap-align: center !important;
        gap: 14px !important;
    }
    .story-value-img {
        aspect-ratio: 4/5 !important;
        border-radius: 14px !important;
    }
    .story-value-icon {
        width: 44px !important;
        height: 44px !important;
        bottom: 16px !important;
        left: 16px !important;
    }
    .story-value-card h3 {
        font-size: 1.2rem !important;
        padding: 0 4px !important;
    }
    .story-value-card p {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
        padding: 0 4px !important;
    }
}

/* ==========================================================
   PAGE ARTICLE (template article.html)
   Hero photo + meta + corps + articles similaires + back
   ========================================================== */
.article-main {
    max-width: 800px;
    margin: 0 auto;
    padding: 120px 24px 80px;
}
.article-back {
    display: inline-block;
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 13px;
    color: #0A0A0A;
    text-decoration: none;
    letter-spacing: 0.5px;
    margin-bottom: 24px;
    transition: opacity 0.2s;
}
.article-back:hover {
    opacity: 0.7;
}

.article-hero {
    margin-bottom: 48px;
}
.article-hero-img {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 28px;
    background: #f4f4f4;
}
.article-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.article-cat {
    display: inline-block;
    background: rgba(0,0,0,0.06);
    padding: 6px 14px;
    border-radius: 14px;
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #0A0A0A;
    margin-bottom: 16px;
}
.article-h1 {
    font-family: 'Kormelink Roman', serif;
    font-size: 2.6rem;
    line-height: 1.15;
    color: #0A0A0A;
    margin: 0 0 24px;
}
.article-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 13px;
    color: #666;
    flex-wrap: wrap;
}
.article-author {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.article-author img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}
.article-meta-sep {
    color: #ccc;
}

.article-body {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #2a2a2a;
}
.article-body p {
    margin: 0 0 22px;
}
.article-body h2 {
    font-family: 'Kormelink Roman', serif;
    font-size: 1.7rem;
    line-height: 1.25;
    color: #0A0A0A;
    margin: 40px 0 16px;
    text-align: left;
}
.article-body h3 {
    font-family: 'Founders Grotesk M', 'Founders Grotesk', sans-serif;
    font-size: 1.15rem;
    color: #0A0A0A;
    margin: 28px 0 12px;
    letter-spacing: 0.3px;
}
.article-quote {
    border-left: 3px solid #0A0A0A;
    margin: 32px 0;
    padding: 8px 0 8px 24px;
}
.article-quote p {
    font-family: 'Kormelink Italic', 'Kormelink Roman', serif;
    font-style: italic;
    font-size: 1.3rem;
    line-height: 1.4;
    color: #0A0A0A;
    margin: 0 0 8px;
}
.article-quote cite {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    color: #666;
    font-style: normal;
    text-transform: uppercase;
}

.article-related {
    margin-top: 80px;
    padding-top: 56px;
    border-top: 1px solid #e5e5e5;
}
.article-related h2 {
    font-family: 'Kormelink Roman', serif;
    font-size: 1.6rem;
    color: #0A0A0A;
    margin: 0 0 32px;
    text-align: left;
}
.article-related-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}
.article-related-card {
    text-decoration: none;
    color: inherit;
    display: block;
}
.article-related-img {
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    position: relative;
    background: #f4f4f4;
}
.article-related-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.article-related-card:hover .article-related-img img {
    transform: scale(1.04);
}
.article-related-img .journal-card-cat {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255,255,255,0.95);
    padding: 5px 11px;
    border-radius: 12px;
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #0A0A0A;
}
.article-related-meta {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 12px;
    color: #888;
    margin-bottom: 6px;
}
.article-related-card h3 {
    font-family: 'Kormelink Roman', serif;
    font-size: 1.1rem;
    line-height: 1.3;
    color: #0A0A0A;
    margin: 0;
}

/* Mobile : article responsive */
@media (max-width: 768px) {
    .article-main {
        padding: 90px 18px 56px;
    }
    .article-back {
        font-size: 12px;
        margin-bottom: 16px;
    }
    .article-hero {
        margin-bottom: 32px;
    }
    .article-hero-img {
        margin-bottom: 20px;
        border-radius: 12px;
    }
    .article-h1 {
        font-size: 1.7rem;
        line-height: 1.2;
        margin: 0 0 16px;
    }
    .article-meta {
        font-size: 12px;
        gap: 6px;
    }
    .article-author img {
        width: 28px;
        height: 28px;
    }
    .article-body {
        font-size: 0.98rem;
        line-height: 1.65;
    }
    .article-body h2 {
        font-size: 1.4rem;
        margin: 28px 0 12px;
    }
    .article-body h3 {
        font-size: 1.05rem;
        margin: 22px 0 10px;
    }
    .article-quote {
        margin: 24px 0;
        padding: 6px 0 6px 18px;
    }
    .article-quote p {
        font-size: 1.1rem;
    }
    .article-related {
        margin-top: 56px;
        padding-top: 36px;
    }
    .article-related h2 {
        font-size: 1.3rem;
        margin: 0 0 20px;
    }
    .article-related-grid {
        display: flex !important;
        flex-direction: row !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 14px !important;
        padding: 4px 0 16px !important;
        margin: 0 -18px !important;
        scrollbar-width: none;
    }
    .article-related-grid::-webkit-scrollbar { display: none; }
    .article-related-grid > .article-related-card:first-child {
        margin-left: 18px;
    }
    .article-related-grid > .article-related-card:last-child {
        margin-right: 18px;
    }
    .article-related-card {
        flex: 0 0 80vw !important;
        max-width: 80vw !important;
        scroll-snap-align: center !important;
    }
    .article-related-card h3 {
        font-size: 1rem;
    }
}

/* ==========================================================
   PAGE Mentions Légales — typographie editoriale simple
   ========================================================== */
.legal-main {
    max-width: 760px;
    margin: 0 auto;
    padding: 120px 24px 80px;
}
.legal-content h1 {
    font-family: 'Kormelink Roman', serif;
    font-size: 2.4rem;
    line-height: 1.15;
    color: #0A0A0A;
    margin: 0 0 32px;
    text-align: left;
}
.legal-content h2 {
    font-family: 'Kormelink Roman', serif;
    font-size: 1.4rem;
    color: #0A0A0A;
    margin: 36px 0 12px;
    text-align: left;
}
.legal-content p,
.legal-content li {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #2a2a2a;
    margin: 0 0 14px;
}
.legal-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
}
.legal-content ul li { margin-bottom: 8px; }
.legal-content a {
    color: #0A0A0A;
    text-decoration: underline;
}
@media (max-width: 768px) {
    .legal-main { padding: 90px 18px 56px; }
    .legal-content h1 { font-size: 1.7rem; margin-bottom: 20px; }
    .legal-content h2 { font-size: 1.2rem; margin: 24px 0 8px; }
    .legal-content p, .legal-content li { font-size: 0.95rem; }
}

/* ==========================================================
   WhatsApp widget EXPANDED (contact + malles desktop only)
   Affiche "Une question ? Contactez-nous" a cote de l'icone
   Sur mobile : seulement l'icone (label cache)
   ========================================================== */
.whatsapp-widget-expanded {
    width: auto !important;
    height: auto !important;
    padding: 10px 18px 10px 46px !important;
    border-radius: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.whatsapp-widget-expanded svg {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
}
.whatsapp-widget-label,
.whatsapp-widget-expanded .whatsapp-widget-label {
    font-family: 'Founders Grotesk', 'Helvetica Neue', Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 300 !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
    color: #fff !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    text-transform: none !important;
}
@media (max-width: 1024px) {
    /* Mobile : on retire le label, l'icone seul reprend sa forme circulaire */
    .whatsapp-widget-expanded {
        padding: 0 !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 50% !important;
        justify-content: center !important;
    }
    .whatsapp-widget-expanded svg {
        position: static !important;
        transform: none !important;
        width: 28px !important;
        height: 28px !important;
    }
    .whatsapp-widget-label {
        display: none !important;
    }
}

/* ==========================================================
   PAGE EVENT mobile : hero titre seul + categories carrousel + cas-clients fix
   ========================================================== */
@media (max-width: 1024px) {
    /* 1) Hero event : garde le H1 uniquement (cache p, stats, buttons) */
    .hero.hero-event .hero-content p,
    .hero.hero-event .hero-content .hero-stats,
    .hero.hero-event .hero-content .hero-buttons {
        display: none !important;
    }
    .hero.hero-event .hero-content {
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        padding: 24px !important;
    }
    .hero.hero-event .hero-content h1 {
        font-size: clamp(2rem, 9vw, 3rem) !important;
        line-height: 1.1 !important;
        text-align: center !important;
        margin: 0 !important;
    }

    /* 2) "Votre evenement, notre rituel" - event-cat-panel en swipe horizontal */
    .event-cat-panel {
        display: flex !important;
        flex-direction: row !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 12px !important;
        padding: 4px 20px 12px !important;
        margin: 0 -20px !important;
        max-width: none !important;
        scrollbar-width: none;
    }
    .event-cat-panel::-webkit-scrollbar { display: none; }
    .event-cat-card {
        flex: 0 0 78vw !important;
        max-width: 78vw !important;
        scroll-snap-align: center !important;
    }

    /* 3) "Recemment organises" - event-cases-grid : fix scroll-snap + padding/margins propres */
    section.event-cases {
        padding: 56px 0 !important;
        overflow: hidden !important;
    }
    .event-cases-header {
        padding: 0 20px !important;
        margin-bottom: 24px !important;
    }
    .event-cases-wrapper {
        position: relative !important;
        padding: 0 !important;
    }
    .event-cases-grid {
        display: flex !important;
        flex-direction: row !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 14px !important;
        padding: 4px 20px 16px !important;
        margin: 0 !important;
        max-width: 100% !important;
        scrollbar-width: none;
    }
    .event-cases-grid::-webkit-scrollbar { display: none; }
    .event-case-card {
        flex: 0 0 82vw !important;
        max-width: 82vw !important;
        min-width: 0 !important;
        scroll-snap-align: center !important;
        box-sizing: border-box !important;
    }
    /* Fleches du carrousel cas-clients : cachees sur mobile (swipe natif) */
    .event-cases-arrow {
        display: none !important;
    }
}

/* ==========================================================
   PAGE CONTACT mobile : form visible sans scroll
   On cache works-tag + intro + info-grid (texte secondaire),
   on garde uniquement H1 compact + le form
   ========================================================== */
@media (max-width: 1024px) {
    section.contact-split {
        min-height: 0 !important;
        margin: 72px 12px 12px !important;
    }
    .contact-split-inner {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 24px 16px 32px !important;
    }
    .contact-split-left {
        padding: 0 !important;
        gap: 8px !important;
    }
    /* Cache les blocs secondaires pour gagner de la place */
    .contact-split-left .works-tag,
    .contact-split-left .contact-intro,
    .contact-split-left .contact-info-grid {
        display: none !important;
    }
    .contact-split-left h1 {
        font-size: 1.4rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
    }
    .contact-split-card {
        padding: 18px 16px !important;
        max-width: 100% !important;
    }
    .contact-split-card h2 {
        font-size: 1.1rem !important;
        margin: 0 0 4px !important;
    }
    .contact-split-card > p {
        font-size: 0.8rem !important;
        margin: 0 0 12px !important;
    }
    .contact-card-form {
        gap: 8px !important;
    }
    .contact-card-form input,
    .contact-card-form textarea {
        font-size: 14px !important;
        padding: 10px 12px !important;
    }
    .contact-card-form textarea {
        min-height: 60px !important;
    }
    .contact-pills-group {
        gap: 6px !important;
    }
    .contact-pill {
        font-size: 11px !important;
        padding: 7px 12px !important;
    }
    .contact-card-submit {
        padding: 14px 24px !important;
        font-size: 13px !important;
    }
}


.form-msg {
    padding: 12px 16px;
    border-radius: 8px;
    font-family: 'Founders Grotesk', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    margin-top: 14px;
    text-align: center;
    box-sizing: border-box;
}
.form-msg-success {
    background: #e8f5ee;
    color: #1d6b3a;
    border: 1px solid #b7d9bf;
}
.form-msg-error {
    background: #fceaea;
    color: #9c2424;
    border: 1px solid #f0b8b8;
}
button[type="submit"]:disabled,
.btn-cta:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}
@media (max-width: 1024px) {
    .form-msg {
        font-size: 13px;
        padding: 10px 14px;
        margin-top: 10px;
    }
}

/* ==========================================================
   Estimateur hotel — step email-gate (input email + submit)
   ========================================================== */
.est-email-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    align-items: stretch;
}
/* Wrapper flex pour centrer verticalement - champ blanc tout simple sans bordure */
.est-email-input-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    padding: 0 14px;
    background: #fff;
    border: none;
    border-radius: 8px;
    box-sizing: border-box;
}
.est-email-input-wrap input[type="email"] {
    flex: 1;
    width: 100%;
    height: 100%;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: 'Founders Grotesk', sans-serif !important;
    font-size: 14px !important;
    color: #0A0A0A !important;
    text-align: left !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
}
.est-email-input-wrap input[type="email"]::placeholder {
    color: #888;
}
/* Anciens styles direct sur l'input retires : on utilise maintenant le wrapper .est-email-input-wrap */
.est-email-form input[type="email"]::placeholder,
.est-form.est-email-form input[type="email"]::placeholder {
    text-align: left;
}
/* RETOUR toujours en dessous de CONTINUER : order sur tous les .est-nav */
.est-nav .est-btn,
.est-nav button[type="submit"].est-btn {
    order: 0;
}
.est-nav .est-back {
    order: 1;
}
.est-email-form input[type="email"]::placeholder {
    color: rgba(10, 10, 10, 0.4);
    font-weight: 300;
}



/* — Hover effects sur tous les CTAs : changement de couleur seul, pas de mouvement — */
.btn-outline, .rituels-btn-demo, .btn-lead, .btn-cta, .btn-book,
.hotel-process-cta .btn-outline {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
/* Hover btn-outline : inversion forte (bg blanc + texte noir), comme les segments
   HOTELLERIE / POP-UP ENTREPRISE de la home. Plus lisible que l'overlay subtil. */
.btn-outline:hover {
    background-color: #fff !important;
    color: #0A0A0A !important;
    border-color: #fff !important;
}
/* Variante sur fond clair (bouton outline noir/sombre) : inversion en bg noir + texte blanc */
.hotel-process-cta .btn-outline:hover,
.guest-exp-btn:hover,
.trunk-hero-meta .btn-outline:hover,
.story-end-cta-secondary:hover {
    background-color: #0A0A0A !important;
    color: #fff !important;
    border-color: #0A0A0A !important;
}
.rituels-btn-demo:hover {
    background-color: #f5f5f5;
}
.btn-book:hover {
    background-color: #2a2a2a;
}
/* btn-lead (TELECHARGER LA BROCHURE / NOS TARIFS) : hover inverse pour bien voir */
.btn-lead:hover {
    background-color: #fff !important;
    color: #0A0A0A !important;
}

/* Pages malle : TÉLÉCHARGER LE CATALOGUE en outline pour bien le dissocier de NOUS CONTACTER (plein noir) */
.trunk-viewer-buttons .btn-lead {
    background-color: transparent !important;
    color: #0A0A0A !important;
    border: 1px solid #0A0A0A !important;
}
.trunk-viewer-buttons .btn-lead:hover {
    background-color: #0A0A0A !important;
    color: #fff !important;
}

/* ============================================================
   LEAD MAGNET TOUJOURS VISIBLE en responsive (anti-lead-loss)
   ============================================================ */

/* Hero btn-lead jamais cache, jamais display:none, tous breakpoints */
@media (max-width: 1024px) {
    .hero-buttons .btn-lead,
    .hero-hotel .hero-buttons .btn-lead,
    .hero-ent .hero-buttons .btn-lead,
    .hero-event .hero-buttons .btn-lead,
    .trunk-viewer-buttons .btn-lead {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    .hero-buttons,
    .trunk-viewer-buttons {
        flex-wrap: wrap !important;
    }
}
@media (max-width: 600px) {
    .hero-buttons .btn-lead,
    .trunk-viewer-buttons .btn-lead {
        display: flex !important;
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        padding: 14px 20px !important;
    }
    /* PAS d'override sur oom-modal-card : le responsive original (max-width 480px + overflow-y auto)
       gere correctement iPhone 12. Mes anciens overrides cassaient les specs. */
}
/* .btn-cta de base (noir/blanc) seulement, pas les variantes — gérées ci-dessous */
.btn-cta:not(.btn-buy):not(.btn-rent):not(.btn-discover):hover {
    background-color: #2a2a2a;
}
/* ACHETER : fond blanc, texte noir -> hover legerement gris */
.malle-cta-group .btn-buy:hover {
    background-color: #ebebeb !important;
    color: #0A0A0A !important;
}
/* LOUER : transparent + border blanc -> hover fond blanc semi-transparent */
.malle-cta-group .btn-rent:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    border-color: #fff !important;
}
/* DECOUVRIR : meme logique selon couleur */
.malle-cta-group .btn-discover:hover {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

/* — Stars toujours remplies (jamais vides) sur "A à Z" + "Vos invités profitent" — */
.event-process-step .stars-hover .star-fill::before,
.event-case-card .stars-hover .star-fill::before,
.process-testimonial-card .stars-hover .star-fill::before {
    content: '★' !important;
}
.event-process-step .stars-hover .star-fill::after,
.event-case-card .stars-hover .star-fill::after,
.process-testimonial-card .stars-hover .star-fill::after {
    opacity: 1 !important;
    transition: none !important;
}

/* — Titres "Choisissez votre formule" : moins gras + plus aérés — */
.hotel-trunk-item h3 {
    font-weight: 400 !important;
    letter-spacing: 0.3px !important;
}

/* — Mega menu : noms malles en Kormelink Roman (pas Founders Grotesque) — */
.mega-item h4 {
    font-family: 'Kormelink Roman', serif !important;
    font-weight: 400 !important;
    letter-spacing: 0.3px !important;
}

/* — Hero pages malle : titres en Kormelink Roman — */
.first-fold .hero-content h1,
.first-fold-content h1,
.malle-hero h1,
.product-hero h1,
.hero h1.malle-name,
h1.product-name {
    font-family: 'Kormelink Roman', serif !important;
    font-weight: 400 !important;
}

/* — TF1 logo dans stories : plus petit — */
.story-overlay img[alt="Production"],
.story-overlay img[alt="TF1"],
img[src*="Logo_TF1"] {
    max-height: 28px !important;
    max-width: 80px !important;
    width: auto !important;
}

/* — Hotel "Choisissez votre formule" : <p> non cliquable, texte sélectionnable
     (les <a class="hotel-trunk-item"> sont restructurés en parallèle dans le HTML) — */
.hotel-trunk-item p {
    pointer-events: auto;
    user-select: text;
    cursor: text;
}
.hotel-trunk-item {
    display: flex;
    flex-direction: column;
}
.hotel-trunk-img {
    text-decoration: none !important;
    display: flex !important;
}
.hotel-trunk-link {
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer;
}
.hotel-trunk-link:hover h3 .hotel-trunk-arrow {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.7);
}
.hotel-trunk-link h3 {
    margin-bottom: 0 !important;
}

/* — "Une question, contactez-nous" : line-height fix Kormelink trop haut — */
.contact-question,
.malle-question,
h2.contact-question,
.section-contact-q {
    line-height: 1 !important;
    padding-top: 4px;
}

/* — Filter outlines articles plus fins — */
.journal-filter {
    border-width: 1px !important;
    font-weight: 300 !important;
}

/* — Article body : font-size un peu plus grand pour confort lecture — */
.article-body p,
.article-body li {
    font-size: 17px !important;
    line-height: 1.7 !important;
}
.article-body h2 {
    font-size: 26px !important;
}
.article-body h3 {
    font-size: 20px !important;
}

/* — Article FAQ (rich snippets FAQPage) — */
.article-faq {
    margin: 56px auto 0;
    max-width: 720px;
    padding: 0;
}
.article-faq h2 {
    font-family: 'Kormelink Roman', serif;
    font-weight: 400;
    font-size: 26px !important;
    margin: 0 0 24px;
    color: #0A0A0A;
    border-top: 1px solid #d6d6cf;
    padding-top: 32px;
}
.article-faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.article-faq-item {
    border-bottom: 1px solid #e2e2db;
    padding: 14px 0;
}
.article-faq-item summary {
    cursor: pointer;
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 17px;
    font-weight: 500;
    color: #0A0A0A;
    list-style: none;
    padding-right: 28px;
    position: relative;
    line-height: 1.4;
}
.article-faq-item summary::-webkit-details-marker { display: none; }
.article-faq-item summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 300;
    color: #777;
    transition: transform 0.2s ease;
}
.article-faq-item[open] summary::after {
    content: '–';
}
.article-faq-item p {
    margin: 12px 0 6px;
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: #444;
}

/* — Article-end CTA box (ajouté via JS / build script article) — */
.article-end-cta {
    margin: 64px auto 0;
    max-width: 720px;
    padding: 36px 40px;
    border: 1px solid #0A0A0A;
    border-radius: 4px;
    text-align: center;
    background: #fafaf7;
}
.article-end-cta h3 {
    font-family: 'Kormelink Roman', serif;
    font-weight: 400;
    font-size: 24px;
    margin: 0 0 14px;
    color: #0A0A0A;
}
.article-end-cta p {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 15px;
    color: #555;
    margin: 0 0 22px;
    line-height: 1.5;
}
.article-end-cta a {
    display: inline-block;
    padding: 14px 32px 10px;
    background: #0A0A0A;
    color: #fff;
    text-decoration: none;
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-radius: 2px;
    transition: background-color 0.25s ease;
}
.article-end-cta a:hover {
    background-color: #2a2a2a;
}

/* — Boutons malle pages : couleurs différenciées Nous contacter vs Télécharger catalogue — */
.malle-cta-secondary,
a.btn-secondary,
.btn-cta.btn-secondary {
    background-color: transparent !important;
    color: #0A0A0A !important;
    border: 1px solid #0A0A0A !important;
}
.malle-cta-secondary:hover,
a.btn-secondary:hover {
    background-color: rgba(10,10,10,0.05) !important;
}

/* — Responsive : hero CTA brochure/tarifs toujours visible (anti-lead loss) — */
@media (max-width: 1024px) {
    .first-fold .hero-content,
    .hero-cta-group,
    .hero-buttons {
        position: relative;
        z-index: 5;
    }
    .first-fold .hero-buttons,
    .first-fold .hero-cta-group {
        margin-top: 16px;
        padding-bottom: 8px;
    }
}
@media (max-width: 600px) {
    .first-fold {
        min-height: auto !important;
        padding-bottom: 24px !important;
    }
    .first-fold .hero-buttons a,
    .first-fold .hero-cta-group a {
        font-size: 13px;
        padding: 12px 22px 8px;
    }
}

/* — Responsive : laptop ~1280-1440px (Asus Zenbook / Tuf typique)
     section malles + coiffeurs + outil de gestion : tenir dans le viewport — */
@media (min-width: 900px) and (max-width: 1500px) {
    .hotel-trunks {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }
    .hotel-trunks-header {
        margin-bottom: 28px !important;
    }
    .hotel-trunks-header h2 {
        font-size: clamp(28px, 2.6vw, 40px) !important;
        margin-bottom: 8px !important;
    }
    .hotel-trunks-header p {
        font-size: 14px !important;
    }
    .hotel-trunks-grid {
        gap: 18px !important;
    }
    .hotel-trunk-item h3 {
        font-size: 14px !important;
        margin-top: 12px !important;
    }
    .hotel-trunk-item p {
        font-size: 12.5px !important;
        line-height: 1.45 !important;
        margin-top: 6px !important;
    }
    .hotel-trunk-img {
        margin-bottom: 0 !important;
    }
    /* Outil de gestion / De l'audit au lancement : laisser respirer mais plus tassé */
    .guest-experience {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }
    .guest-exp-steps {
        gap: 14px !important;
    }
    .guest-exp-step p {
        font-size: 13.5px !important;
    }
    .guest-exp-top {
        gap: 28px !important;
    }
}

/* — Modal: scroll interne propre sur tous breakpoints — */
.service-modal-content {
    overscroll-behavior: contain;
}
.modal-team-grid {
    width: 100%;
}

/* — Story page : CTA encadré à la fin "Envie d'en être ?" — */
.story-end-cta {
    max-width: 720px;
    margin: 64px auto 80px;
    padding: 48px 40px 56px;
    text-align: center;
    border-top: 1px solid #0A0A0A;
    border-bottom: 1px solid #0A0A0A;
}
.story-end-cta h2 {
    font-family: 'Kormelink Roman', serif;
    font-weight: 400;
    font-size: clamp(28px, 3.5vw, 42px);
    color: #0A0A0A;
    margin: 0 0 16px;
    line-height: 1.1;
}
.story-end-cta h2 em {
    font-family: 'Kormelink Italic', serif;
    font-style: italic;
}
.story-end-cta p {
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 15px;
    color: #555;
    margin: 0 auto 32px;
    line-height: 1.6;
    max-width: 520px;
}
.story-end-cta-buttons {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.story-end-cta-buttons .btn-cta,
.story-end-cta-buttons .btn-outline {
    margin: 0;
    
    min-width: 220px;
    text-align: center;
    box-sizing: border-box;
}

.story-end-cta-buttons .btn-cta {
    border: 1px solid #0A0A0A !important;
    padding: 14px 28px 10px !important;
    font-family: 'Founders Grotesk', sans-serif !important;
    font-size: 14px !important;
    letter-spacing: 1px !important;
    border-radius: 2px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    display: inline-block !important;
}
.story-end-cta-secondary {
    border: 1px solid #0A0A0A !important;
    color: #0A0A0A !important;
    background: transparent !important;
    padding: 14px 28px 10px !important;
    font-family: 'Founders Grotesk', sans-serif !important;
    font-size: 14px !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;
    border-radius: 2px !important;
    transition: background-color 0.25s ease;
    display: inline-block;
}
.story-end-cta-secondary:hover {
    background: #0A0A0A !important;
    color: #fff !important;
    border-color: #0A0A0A !important;
}
@media (max-width: 600px) {
    .story-end-cta {
        margin: 40px 16px 56px;
        padding: 36px 24px;
    }
    .story-end-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .story-end-cta-buttons .btn-cta,
    .story-end-cta-buttons .btn-outline,
    .story-end-cta-buttons .story-end-cta-secondary {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }
}

/* — Contact page : carte WhatsApp inline (avant le formulaire) — */
.contact-whatsapp-inline {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    margin-bottom: 18px;
    transition: background 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.18);
}
.contact-whatsapp-inline:hover {
    background: linear-gradient(135deg, #1ebc59 0%, #0f7d70 100%);
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.32);
}
.contact-whatsapp-inline svg {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.contact-whatsapp-inline-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: 'Founders Grotesk', sans-serif;
}
.contact-whatsapp-inline-text strong {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.2px;
}
.contact-whatsapp-inline-text em {
    font-size: 12px;
    font-style: normal;
    opacity: 0.92;
    letter-spacing: 0.3px;
}
.contact-whatsapp-inline-arrow {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}
.contact-whatsapp-inline:hover .contact-whatsapp-inline-arrow {
    transform: translateX(4px);
}
.contact-divider {
    text-align: center;
    margin: 8px 0 20px;
    font-family: 'Founders Grotesk', sans-serif;
    font-size: 11px;
    color: #888;
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
}
.contact-divider::before,
.contact-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 25%;
    height: 1px;
    background: #ddd;
}
.contact-divider::before { left: 0; }
.contact-divider::after { right: 0; }
.contact-divider span {
    background: #fff;
    padding: 0 12px;
    position: relative;
    z-index: 1;
}

.est-email-form input[type="email"]:focus {
    outline: none;
    border-color: #0A0A0A;
    box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.08);
}
.est-email-form .est-btn {
    margin-top: 2px;
}
@media (max-width: 1024px) {
    .est-email-form {
        max-width: calc(100% - 24px);
        gap: 12px;
    }
    .est-email-form input[type="email"],
    .est-form.est-email-form input[type="email"] {
        padding: 14px 14px 10px !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }
}



/* — Chevrons ‹ › dans ronds : centrage visuel (le glyph est haut, on compense) — */
.stories-arrow,
.event-nav-btn,
.testi-thumbs-arrow,
.malle-arrow {
    padding-bottom: 4px !important;
    line-height: 1 !important;
}
.stories-arrow:hover,
.event-nav-btn:hover,
.testi-thumbs-arrow:hover,
.malle-arrow:hover {
    transform: none !important;
}

/* — Pages malles : enlever les ronds color picker (pas géré pour l'instant) — */
.trunk-viewer-colors,
.trunk-color-options,
.trunk-color {
    display: none !important;
}

/* — Pages malles : titre hero (ligne 2 = h2/p sous le h1) en Kormelink — */
.first-fold .hero-content h2,
.first-fold .hero h2,
.hero-hotel h2,
.first-fold-content h2,
.malle-hero h2,
.first-fold .hero-content > p,
.hero-hotel .hero-content > p {
    font-family: 'Kormelink Italic', serif !important;
    font-style: italic;
    font-weight: 400 !important;
}


.hotel-trunk-item h3,
.hotel-trunks .hotel-trunk-item h3 {
    font-family: 'Kormelink Roman', serif !important;
    font-weight: 500 !important;
    font-size: 22px !important;
    letter-spacing: 0.3px !important;
}

/* Hero entreprise : phrase principale sur 1 ligne (assez large pour 'Des rituels qui s'integrent...')
   margin-left: 0 pour aligner avec le H1 a gauche (sinon margin auto centre le bloc) */
.hero-ent .hero-content p,
.hero-ent-video .hero-content p {
    max-width: 900px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}
@media (min-width: 1200px) {
    .hero-ent .hero-content p,
    .hero-ent-video .hero-content p {
        max-width: 1100px !important;
    }
}

/* Testimonials : cache les <strong> author vides (noms retires) + ajuste l'espacement role */
.testi-featured-author strong:empty,
.testi-featured-author strong[id="testi-main-author"]:empty {
    display: none !important;
}
.testi-featured-author strong:empty + #testi-main-role {
    margin-top: 0 !important;
    font-size: 1rem;
    color: #fff;
}

/* — "De l'audit au lancement" + "Outil de gestion" : encore plus serré pour tenir sans scroll — */
@media (min-width: 900px) and (max-width: 1500px) {
    .guest-experience,
    .hotel-services {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    .guest-exp-top {
        gap: 24px !important;
    }
    .guest-exp-step {
        gap: 8px !important;
    }
    .guest-exp-step p {
        font-size: 13px !important;
        line-height: 1.45 !important;
    }
    .guest-exp-step span {
        font-size: 18px !important;
    }
    .service-card {
        padding: 18px !important;
    }
    .service-card-text h3 {
        font-size: 18px !important;
        margin-bottom: 6px !important;
    }
    .service-card-text p {
        font-size: 13px !important;
        line-height: 1.45 !important;
    }
    .service-card-visual {
        max-height: 200px !important;
    }
    .service-card-visual img {
        max-height: 200px !important;
        object-fit: cover !important;
    }
    .stats-card h3 {
        font-size: 30px !important;
    }
    .stats-card p {
        font-size: 12.5px !important;
    }
}

/* Modal coiffeurs : overrides retirees. Le CSS original (aspect-ratio 3/4) reprend la main. */

/* — Logo loop : boucle vraiment infinie + pas de blanc a la fin —
   Note : gap est REMPLACE par margin-right sur chaque item ci-dessous.
   Sinon, translateX(-50%) tombe sur (N/2)*item + ((N-2)/2)*gap au lieu
   de la position de l'item N/2+1, creant un saut de 0.5*gap a la boucle. */
.bandeau-logo {
    overflow: hidden;
}
.bandeau-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: bandeau-scroll 40s linear infinite;
}
.bandeau-track > * {
    margin-right: 60px;
    flex-shrink: 0;
}
@keyframes bandeau-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* — Home section .malle : <p> et <h3> non cliquables, texte sélectionnable — */
.luxury .malle .malle-info h3,
.luxury .malle .malle-info p {
    user-select: text;
    cursor: text;
}
.luxury .malle .malle-info > .malle-cta-group {
    cursor: pointer;
}

.luxury .malle {
    cursor: default;
}
.luxury .malle > img {
    cursor: pointer;
}

/* ============================================================
   2026-06-05 — MODAL FIT-NO-SCROLL leger pour laptops (TUF Gaming)
   Garde les tailles desktop bien lisibles mais compresse padding/gaps/
   image-height pour rentrer dans un viewport ~940px (laptop 1080p + chrome
   browser). Different de l'ancien bloc qui shrinkait les fonts a 0.85rem.
   ============================================================ */
@media (min-width: 1024px) and (max-height: 950px) {
    .service-modal-content {
        max-height: 94vh !important;
    }
    .service-modal-body {
        padding: 32px 36px !important;
        gap: 16px !important;
    }
    /* Petit shave sur le h2 modal (1.5rem ecart cumule = utile) */
    .service-modal-body h2 {
        font-size: 2rem !important;
    }
    /* RECHARGE panel jaune : padding plus serre */
    .protocol-panel-text {
        padding: 24px 24px 24px 0 !important;
    }
    .modal-protocol-name {
        font-size: 2.1rem !important;
    }
    /* Images des protocols + timeline : limite haut pour ne pas pousser le scroll */
    .protocol-panel img,
    .protocol-panel-horizontal img {
        max-height: 200px !important;
    }
    .modal-timeline-img {
        width: 30% !important;
        max-height: 60vh !important;
    }
    .modal-timeline-wrapper {
        gap: 24px !important;
    }
    /* Timeline : padding entre etapes reduit + h4 marge reduite */
    .timeline-step {
        padding-bottom: 14px !important;
    }
    .timeline-content h4 {
        margin: 0 0 2px !important;
    }
    .timeline-dot {
        width: 28px !important;
        height: 28px !important;
    }
    /* Coiffeurs TUF : photos tres compactes pour fit sans scroll */
    .modal-team-grid {
        gap: 16px !important;
        max-width: 680px !important;
    }
    .modal-team-photos {
        max-height: 38vh !important;
        aspect-ratio: 1/1 !important;
        margin-bottom: 8px !important;
    }
    .modal-team-card h4 {
        font-size: 1rem !important;
        margin: 0 !important;
    }
    .modal-team-card span {
        font-size: 0.78rem !important;
    }
    /* Features bento (outil de gestion) : padding card un peu plus serre */
    .features-bento-card {
        padding: 14px !important;
    }
    /* La Malle TUF : compressions aggressives pour fit sans scroll */
    .protocol-panel-horizontal {
        min-height: 0 !important;
        max-height: 280px !important;
    }
    .protocol-panel-horizontal img {
        padding: 8px 0 !important;
        max-height: 264px !important;
    }
    .protocol-panel-horizontal .protocol-panel-text {
        padding: 12px 16px 12px 0 !important;
        gap: 6px !important;
    }
    /* Tabs bar : moins de marge en bas */
    .protocol-tabs-bar {
        margin-bottom: 12px !important;
    }
    .protocol-tab {
        padding: 7px 14px !important;
        font-size: 12px !important;
    }
    /* Footer items La Malle : padding reduit */
    .protocol-footer-item {
        padding: 8px 12px !important;
    }
    .protocol-footer {
        margin-top: 10px !important;
    }
    
    .protocol-features {
        gap: 10px !important;
    }
    .protocol-features li {
        font-size: 19px !important;
        padding-left: 24px !important;
    }
    /* La Malle modal : header (h2 + desc) */
    .service-modal-body:has(.protocol-tabs-bar) h2 {
        font-size: 2.3rem !important;
        margin: 0 !important;
    }
    .service-modal-body:has(.protocol-tabs-bar) > p {
        font-size: 1.15rem !important;
        margin: 0 !important;
    }
    /* La Malle subtitle interieur + pill */
    .protocol-panel-horizontal .modal-protocol-subtitle {
        font-size: 19px !important;
    }
    .protocol-panel-horizontal .modal-protocol-duration {
        font-size: 14px !important;
        padding: 7px 16px 5px !important;
    }
}

/* ============================================================
   FINAL OVERRIDE — LEAD MAGNET DANS LE HERO, EN BAS, CENTRE (mobile)
   ============================================================ */
@media (max-width: 1024px) {
    /* hero-content : position absolute en bas du hero, full width */
    html body section.hero.hero-hotel .hero-content,
    html body section.hero.hero-hotel-video .hero-content,
    html body section.hero.hero-ent .hero-content,
    html body section.hero.hero-ent-video .hero-content {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 32px !important;
        top: auto !important;
        width: 100% !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        box-sizing: border-box !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }
    /* btn-lead : pleine largeur 88% max 360px, centre, en bas du hero */
    html body section.hero.hero-hotel .hero-buttons .btn-lead,
    html body section.hero.hero-hotel-video .hero-buttons .btn-lead,
    html body section.hero.hero-ent .hero-buttons .btn-lead,
    html body section.hero.hero-ent-video .hero-buttons .btn-lead {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: 100% !important;
        max-width: none !important;
        background: #0A0A0A !important;
        color: #fff !important;
        padding: 16px 24px !important;
        font-size: 13px !important;
        letter-spacing: 1.5px !important;
        border-radius: 2px !important;
        justify-content: center !important;
        align-items: center !important;
        text-decoration: none !important;
        border: none !important;
        margin: 0 !important;
        position: relative !important;
    }
    /* Hide RESERVEZ DEMO sur tous les heros */
    html body section.hero .hero-buttons .btn-outline {
        display: none !important;
    }
    /* hero-buttons : pleine largeur dans le hero-content centre */
    html body section.hero.hero-hotel .hero-buttons,
    html body section.hero.hero-hotel-video .hero-buttons,
    html body section.hero.hero-ent .hero-buttons,
    html body section.hero.hero-ent-video .hero-buttons {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 360px !important;
        margin: 0 auto !important;
        gap: 0 !important;
        padding: 0 !important;
        bottom: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ============================================================
   THUMBS GRID : seulement HOTEL (3 thumbs) en vertical compact.
   Entreprise (6+) garde le layout original 2 colonnes.
   Mobile only.
   ============================================================ */
@media (max-width: 1024px) {
    .testi-thumbs:has(> .testi-thumb:nth-child(3):last-child) {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
        gap: 6px !important;
        justify-items: center !important;
    }
    .testi-thumbs:has(> .testi-thumb:nth-child(3):last-child) .testi-thumb {
        aspect-ratio: 1 / 1 !important;
        width: 90px !important;
        height: 90px !important;
        max-width: 90px !important;
    }
}

/* Blog : retire signature OOM World + "X min de lecture" + bloc meta complet */
.journal-author,
.article-author,
.article-meta,
.journal-card-meta,
.journal-meta,
.article-related-meta {
    display: none !important;
}

/* H1 visuellement cache pour articles.html (page listing) - SEO uniquement */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}