/* Modern CSS - Styles avancés pour Maison Mayaki - RESPONSIVE COMPLET */



:root {

    --primary-gradient: linear-gradient(135deg, #c4a747 0%, #d4b85e 100%);

    --glass-bg: rgba(255, 255, 255, 0.1);

    --glass-border: rgba(255, 255, 255, 0.2);

    --shadow-elegant: 0 20px 40px rgba(0, 0, 0, 0.1);

    --shadow-hover: 0 30px 60px rgba(0, 0, 0, 0.15);

}



/* Header Moderne - Version Responsive Complète */

.header-modern {

    position: fixed;

    top: 0;

    width: 100%;

    background: rgba(255, 255, 255, 0.98);

    backdrop-filter: blur(20px);

    z-index: 1000;

    padding: 1rem 0;

    border-bottom: 1px solid var(--gris-clair);

    transition: all 0.3s ease;

}



.nav-modern {

    display: flex;

    justify-content: space-between;

    align-items: center;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 2rem;

    position: relative;

}



/* Logo */

.logo-modern {

    display: flex;

    flex-direction: column;

    text-decoration: none;

    z-index: 1002;

}



.logo-text {

    font-family: 'Playfair Display', serif;

    font-size: 1.8rem;

    font-weight: 700;

    color: var(--noir);

    line-height: 1;

}



.logo-subtitle {

    font-size: 0.7rem;

    color: var(--doré);

    letter-spacing: 2px;

    margin-top: 2px;

}



/* Menu Principal - Desktop */

.nav-menu-modern {

    display: flex;

    list-style: none;

    gap: 2rem;

    align-items: center;

    margin: 0;

    padding: 0;

}



.nav-link-modern {

    text-decoration: none;

    color: var(--noir);

    font-weight: 500;

    font-size: 0.9rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    transition: all 0.3s ease;

    position: relative;

    padding: 0.5rem 0;

    white-space: nowrap;

    display: flex;

    align-items: center;

    gap: 0.3rem;

}



.nav-link-modern::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 0;

    height: 2px;

    background: var(--doré);

    transition: width 0.3s ease;

}



.nav-link-modern:hover::after,

.nav-link-modern.active::after {

    width: 100%;

}



/* Dropdown Menu - Desktop */

.nav-dropdown-modern {

    position: relative;

}



.nav-dropdown-modern:hover .dropdown-menu-modern {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.dropdown-menu-modern {

    position: absolute;

    top: 100%;

    left: 0;

    background: var(--blanc);

    min-width: 250px;

    box-shadow: var(--ombre-portée);

    border-radius: 10px;

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition: all 0.3s ease;

    z-index: 1001;

    padding: 0.5rem 0;

    margin-top: 1rem;

}



.dropdown-menu-modern::before {

    content: '';

    position: absolute;

    top: -8px;

    left: 20px;

    width: 0;

    height: 0;

    border-left: 8px solid transparent;

    border-right: 8px solid transparent;

    border-bottom: 8px solid var(--blanc);

}



.dropdown-menu-modern li {

    list-style: none;

    margin: 0;

}



.dropdown-menu-modern a {

    display: block;

    padding: 0.8rem 1.5rem;

    text-decoration: none;

    color: var(--noir);

    border-bottom: 1px solid var(--gris-clair);

    transition: all 0.3s ease;

    font-size: 0.9rem;

}



.dropdown-menu-modern a:hover,

.dropdown-menu-modern a.active {

    background: var(--beige);

    color: var(--doré);

    padding-left: 2rem;

}



.dropdown-menu-modern li:last-child a {

    border-bottom: none;

}



/* Flèche dropdown */

.dropdown-arrow {

    font-size: 0.6rem;

    transition: transform 0.3s ease;

}



.nav-dropdown-modern:hover .dropdown-arrow {

    transform: rotate(180deg);

}



/* Actions de Navigation */

.nav-actions-modern {

    display: flex;

    align-items: center;

    gap: 1rem;

    z-index: 1002;

}



.btn-reserver-modern {

    background: var(--noir);

    color: var(--blanc);

    border: none;

    padding: 0.8rem 1.5rem;

    font-size: 0.9rem;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 1px;

    cursor: pointer;

    transition: all 0.3s ease;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    border-radius: 25px;

    position: relative;

    overflow: hidden;

    white-space: nowrap;

}



.btn-reserver-modern:hover {

    background: var(--doré);

    transform: translateY(-2px);

    box-shadow: 0 5px 15px rgba(196, 167, 71, 0.3);

}



/* Bouton Hamburger pour Mobile */

.nav-toggle-modern {

    display: none;

    flex-direction: column;

    cursor: pointer;

    gap: 4px;

    padding: 0.5rem;

    background: none;

    border: none;

    z-index: 1002;

    width: 30px;

    height: 30px;

    justify-content: center;

    align-items: center;

}



.nav-toggle-modern span {

    width: 25px;

    height: 2px;

    background: var(--noir);

    transition: all 0.3s ease;

    transform-origin: center;

}



.nav-toggle-modern.active span:nth-child(1) {

    transform: rotate(45deg) translate(6px, 6px);

}



.nav-toggle-modern.active span:nth-child(2) {

    opacity: 0;

}



.nav-toggle-modern.active span:nth-child(3) {

    transform: rotate(-45deg) translate(6px, -6px);

}



/* ========================================================================== */

/* RESPONSIVE - Menu Mobile */

/* ========================================================================== */



/* Tablettes (≤ 991px) */

@media (max-width: 991px) {

    .nav-modern {

        padding: 0 1.5rem;

    }

    

    .nav-toggle-modern {

        display: flex;

    }

    

    /* Menu Principal en Mode Mobile */

    .nav-menu-modern {

        position: fixed;

        top: 100%;

        left: 0;

        width: 100%;

        background: var(--blanc);

        flex-direction: column;

        gap: 0;

        padding: 2rem 0;

        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

        opacity: 0;

        visibility: hidden;

        transform: translateY(-10px);

        transition: all 0.3s ease;

        z-index: 999;

        max-height: 80vh;

        overflow-y: auto;

    }

    

    .nav-menu-modern.active {

        opacity: 1;

        visibility: visible;

        transform: translateY(0);

    }

    

    .nav-menu-modern li {

        width: 100%;

        border-bottom: 1px solid var(--gris-clair);

    }

    

    .nav-menu-modern li:last-child {

        border-bottom: none;

    }

    

    .nav-link-modern {

        padding: 1.2rem 2rem;

        font-size: 1rem;

        text-transform: none;

        justify-content: space-between;

        display: flex;

        align-items: center;

        border-left: 4px solid transparent;

    }

    

    .nav-link-modern.active {

        border-left-color: var(--doré);

        background: var(--beige);

    }

    

    .nav-link-modern::after {

        display: none;

    }

    

    /* Dropdown en Mode Mobile */

    .dropdown-menu-modern {

        position: static;

        background: var(--beige);

        box-shadow: none;

        border-radius: 0;

        margin-top: 0;

        opacity: 1;

        visibility: visible;

        transform: none;

        max-height: 0;

        overflow: hidden;

        transition: max-height 0.3s ease;

        padding: 0;

    }

    

    .nav-dropdown-modern.active .dropdown-menu-modern {

        max-height: 1000px;

        padding: 0.5rem 0;

    }

    

    .nav-dropdown-modern.active .dropdown-arrow {

        transform: rotate(180deg);

    }

    

    .dropdown-menu-modern::before {

        display: none;

    }

    

    .dropdown-menu-modern a {

        padding: 0.8rem 2rem 0.8rem 3rem;

        border-bottom: 1px solid rgba(0,0,0,0.05);

    }

    

    .dropdown-menu-modern a:hover {

        padding-left: 3.5rem;

    }

}



/* Mobiles (≤ 767px) */

@media (max-width: 767px) {

    .nav-modern {

        padding: 0 1rem;

    }

    

    .logo-text {

        font-size: 1.5rem;

    }

    

    .logo-subtitle {

        font-size: 0.6rem;

    }

    

    .nav-link-modern {

        padding: 1rem 1.5rem;

    }

    

    .dropdown-menu-modern a {

        padding: 0.8rem 1.5rem 0.8rem 2.5rem;

    }

    

    .btn-reserver-modern {

        padding: 0.7rem 1.2rem;

        font-size: 0.8rem;

    }

}



/* Très petits mobiles (≤ 480px) */

@media (max-width: 480px) {

    .nav-modern {

        padding: 0 0.8rem;

    }

    

    .logo-text {

        font-size: 1.3rem;

    }

    

    .nav-link-modern {

        padding: 0.9rem 1rem;

        font-size: 0.9rem;

    }

    

    .dropdown-menu-modern a {

        padding: 0.7rem 1rem 0.7rem 2rem;

        font-size: 0.85rem;

    }

    

    .btn-reserver-modern {

        padding: 0.6rem 1rem;

        font-size: 0.75rem;

    }

}



/* Hero Section Moderne */

.hero-modern {

    height: 100vh;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--blanc);

    margin-top: 0;

    padding-top: 80px; /* Compensation pour le header fixe */

}



.hero-background {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}



.hero-slides {

    position: relative;

    width: 100%;

    height: 100%;

}



.slide {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-size: cover;

    background-position: center;

    opacity: 0;

    transition: opacity 1s ease-in-out;

}



.slide.active {

    opacity: 1;

}



.hero-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 100%);

}



.hero-content-modern {

    position: relative;

    z-index: 2;

    text-align: center;

    max-width: 800px;

    padding: 0 2rem;

}



.hero-badge {

    background: linear-gradient(135deg, rgba(196, 167, 71, 0.95) 0%, rgba(212, 184, 94, 0.95) 100%);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.3);

    padding: 0.8rem 1.5rem;

    border-radius: 50px;

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    margin-bottom: 2rem;

    font-weight: 600;

    font-size: 0.9rem;

    letter-spacing: 1px;

    animation: pulse 2s infinite;

    position: relative;

    z-index: 3;

}



.hero-title-modern {

    font-size: 4.5rem;

    font-weight: 700;

    margin-bottom: 1rem;

    line-height: 1.1;

    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);

}



.hero-title-modern .accent {

    background: linear-gradient(135deg, #c4a747 0%, #d4b85e 100%);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    position: relative;

}



.hero-subtitle-modern {

    font-size: 1.8rem;

    margin-bottom: 1rem;

    font-weight: 300;

    letter-spacing: 3px;

    opacity: 0.95;

    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);

}



.hero-description-modern {

    font-size: 1.3rem;

    margin-bottom: 3rem;

    opacity: 0.9;

    line-height: 1.6;

    max-width: 600px;

    margin-left: auto;

    margin-right: auto;

    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);

}



/* Animation du badge */

@keyframes pulse {

    0% {

        transform: scale(1);

        box-shadow: 0 0 0 0 rgba(196, 167, 71, 0.7);

    }

    70% {

        transform: scale(1.05);

        box-shadow: 0 0 0 10px rgba(196, 167, 71, 0);

    }

    100% {

        transform: scale(1);

        box-shadow: 0 0 0 0 rgba(196, 167, 71, 0);

    }

}



/* Boutons Magnétiques */

.btn-magnetic {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2.5rem;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: none;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
}

/* Style pour le texte */
.btn-magnetic {
    font-weight: 500;
    letter-spacing: 0.3px;
}



    .btn-magnetic.primary {
        background: linear-gradient(135deg, #c4a747 0%, #d4b85e 100%);
        color: var(--blanc);
        box-shadow: 0 8px 25px rgba(196, 167, 71, 0.3);
    }

    .btn-magnetic.secondary {
        background: transparent;
        color: var(--noir);
        border: 1.5px solid var(--doré);
        box-shadow: 0 4px 15px rgba(196, 167, 71, 0.1);
    }



.btn-magnetic.outline {

    background: transparent;

    color: var(--noir);

    border-color: var(--doré);

}



    .btn-magnetic.large {
        padding: 1.1rem 2.8rem;
        font-size: 1rem;
    }



.btn-magnetic.small {

    padding: 0.8rem 1.5rem;

    font-size: 0.9rem;

}



.btn-magnetic.full {

    width: 100%;

    justify-content: center;

}



.magnetic-effect {
    position: absolute;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.3s ease;
    pointer-events: none;
    mix-blend-mode: overlay;
}

.btn-magnetic.primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(196, 167, 71, 0.4);
}


.btn-magnetic.secondary:hover {
    background: var(--doré);
    color: var(--blanc);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(196, 167, 71, 0.25);
}

/* Animation du texte */
.btn-magnetic span {
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}
.btn-magnetic:hover span {
    transform: translateX(2px);
}



.btn-magnetic:hover .magnetic-effect {

    transform: translate(-50%, -50%) scale(1);

}



.hero-buttons-modern {

    display: flex;

    gap: 1rem;

    justify-content: center;

    flex-wrap: wrap;

}



/* Stats Hero */

.hero-stats {

    display: flex;

    justify-content: center;

    gap: 3rem;

    margin-top: 3rem;

}



.stat {

    text-align: center;

}



.stat-number {

    font-size: 2.5rem;

    font-weight: 700;

    color: var(--doré);

    margin-bottom: 0.5rem;

}



.stat-label {

    font-size: 0.9rem;

    opacity: 0.9;

}



/* Scroll Indicator Moderne */

.scroll-indicator-modern {

    position: absolute;

    bottom: 2rem;

    left: 50%;

    transform: translateX(-50%);

    text-align: center;

    color: var(--blanc);

    z-index: 3;

}



.mouse {

    width: 24px;

    height: 40px;

    border: 2px solid var(--blanc);

    border-radius: 12px;

    position: relative;

    margin: 0 auto 0.5rem;

}



.wheel {

    width: 4px;

    height: 8px;

    background: var(--blanc);

    border-radius: 2px;

    position: absolute;

    top: 8px;

    left: 50%;

    transform: translateX(-50%);

    animation: scroll 2s infinite;

}



@keyframes scroll {

    0% {

        transform: translateX(-50%) translateY(0);

        opacity: 1;

    }

    100% {

        transform: translateX(-50%) translateY(12px);

        opacity: 0;

    }

}



/* Sections Modernes */

.section-header {

    text-align: center;

    margin-bottom: 4rem;

}



.section-title-modern {

    font-size: 3rem;

    margin-bottom: 1rem;

    position: relative;

}



.section-title-modern .accent {

    background: var(--primary-gradient);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.section-subtitle-modern {

    font-size: 1.2rem;

    color: var(--gris-moyen);

    max-width: 600px;

    margin: 0 auto;

}



/* Cartes de Présentation Modernes */

.presentation-grid-modern {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 2rem;

}



.presentation-card-modern {

    background: var(--blanc);

    padding: 3rem 2rem;

    border-radius: 20px;

    text-align: center;

    box-shadow: var(--shadow-elegant);

    transition: all 0.3s ease;

    border: 1px solid var(--gris-clair);

    position: relative;

    overflow: hidden;

}



.presentation-card-modern::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: var(--primary-gradient);

    opacity: 0.1;

    transition: left 0.3s ease;

}



.presentation-card-modern:hover::before {

    left: 0;

}



.presentation-card-modern:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-hover);

}



.card-icon-modern {

    margin-bottom: 1.5rem;

}



.icon-wrapper {

    width: 80px;

    height: 80px;

    background: var(--primary-gradient);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2rem;

    margin: 0 auto;

}



.presentation-card-modern h3 {

    margin-bottom: 1rem;

    font-size: 1.5rem;

    color: var(--noir);

}



.presentation-card-modern p {

    color: var(--gris-moyen);

    margin-bottom: 2rem;

    line-height: 1.6;

}



.card-link-modern {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    color: var(--doré);

    text-decoration: none;

    font-weight: 500;

    transition: all 0.3s ease;

}



.card-link-modern:hover {

    gap: 1rem;

    color: var(--doré-clair);

}



/* Carrousel Suites 3D */

.suites-carousel-3d {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

    gap: 2rem;

    margin-bottom: 3rem;

}



.suite-card-3d {

    background: var(--blanc);

    border-radius: 20px;

    overflow: hidden;

    box-shadow: var(--shadow-elegant);

    transition: all 0.3s ease;

    position: relative;

}



.suite-card-3d:hover {

    transform: translateY(-10px) rotateX(5deg);

    box-shadow: var(--shadow-hover);

}



.suite-image {

    position: relative;

    height: 300px;

    overflow: hidden;

}



.suite-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.3s ease;

}



.suite-card-3d:hover .suite-image img {

    transform: scale(1.1);

}



.suite-overlay {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    background: linear-gradient(transparent, rgba(0,0,0,0.8));

    color: var(--blanc);

    padding: 2rem;

    transform: translateY(100%);

    transition: transform 0.3s ease;

}



.suite-card-3d:hover .suite-overlay {

    transform: translateY(0);

}



.suite-badge {

    background: var(--doré);

    color: var(--blanc);

    padding: 0.3rem 1rem;

    border-radius: 15px;

    font-size: 0.8rem;

    font-weight: 500;

    display: inline-block;

    margin-bottom: 1rem;

}



.suite-overlay h3 {

    margin-bottom: 0.5rem;

    font-size: 1.5rem;

}



.suite-overlay p {

    margin-bottom: 1rem;

    opacity: 0.9;

}



.suite-features {

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

    margin-top: 1rem;

}



.suite-features span {

    background: rgba(255,255,255,0.2);

    padding: 0.3rem 0.8rem;

    border-radius: 12px;

    font-size: 0.8rem;

}



.suite-actions {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    justify-content: center;
}




.btn-tour, .btn-book {
    flex: 1;
    padding: 0.9rem 1.8rem;
    border: none;
    border-radius: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    text-align: center;
    letter-spacing: 0.2px;
    position: relative;
    overflow: hidden;
}



.btn-tour {
    background: transparent;
    color: var(--doré);
    border: 1.5px solid var(--doré);
    position: relative;
}


    .btn-tour::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: var(--doré);
        transition: left 0.3s ease;
        z-index: 1;
    }

    .btn-tour:hover::before {
        left: 0;
    }


.btn-book {

    background: var(--doré);

    color: var(--blanc);

}



.btn-tour:hover {

    background: var(--doré);

    color: var(--blanc);

}



.btn-book:hover {

    background: var(--doré-clair);

}



/* Grid des mini-suites */

.all-suites-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 1rem;

    margin: 2rem 0;

}



.suite-mini-card {

    background: var(--blanc);

    padding: 1.5rem;

    border-radius: 15px;

    text-align: center;

    border: 1px solid var(--gris-clair);

    transition: all 0.3s ease;

    cursor: pointer;

}



.suite-mini-card:hover {

    transform: translateY(-5px);

    box-shadow: var(--shadow-elegant);

}



.mini-suite-icon {

    font-size: 2rem;

    margin-bottom: 0.5rem;

}



.suite-mini-card h4 {

    margin-bottom: 0.5rem;

    color: var(--noir);

    font-size: 1rem;

}



.suite-mini-card p {

    color: var(--gris-moyen);

    font-size: 0.8rem;

    margin: 0;

}



.suites-cta {

    text-align: center;

}



/* Section Équipements Premium */

.premium-equipments {

    background: var(--beige);

}



.equipments-grid-modern {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

    gap: 2rem;

}



.equipment-feature-card {

    background: var(--blanc);

    border-radius: 20px;

    overflow: hidden;

    box-shadow: var(--shadow-elegant);

    transition: all 0.3s ease;

}



.equipment-feature-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-hover);

}



.equipment-image {

    position: relative;

    height: 250px;

    overflow: hidden;

}



.equipment-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.3s ease;

}



.equipment-feature-card:hover .equipment-image img {

    transform: scale(1.1);

}



.equipment-overlay {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    background: linear-gradient(transparent, rgba(0,0,0,0.8));

    color: var(--blanc);

    padding: 1.5rem;

}



.equipment-overlay h3 {

    margin-bottom: 0.5rem;

    font-size: 1.3rem;

}



.equipment-overlay p {

    opacity: 0.9;

}



.equipment-content {

    padding: 2rem;

}



.equipment-content h4 {

    margin-bottom: 1rem;

    color: var(--noir);

    font-size: 1.2rem;

}



.equipment-content ul {

    list-style: none;

    margin-bottom: 1.5rem;

}



.equipment-content li {

    margin-bottom: 0.5rem;

    padding-left: 1.5rem;

    position: relative;

    color: var(--gris-foncé);

}



.equipment-content li::before {

    content: '✓';

    position: absolute;

    left: 0;

    color: var(--doré);

    font-weight: bold;

}



/* Section Jireh Moderne */

.jireh-preview-modern {

    background: var(--beige);

}



.jireh-content-modern {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

    align-items: center;

}



.jireh-text-modern {

    padding-right: 2rem;

}



.jireh-description {

    font-size: 1.1rem;

    line-height: 1.7;

    margin-bottom: 2rem;

    color: var(--gris-foncé);

}



.jireh-types-modern {

    margin: 2rem 0;

}



.type-item-modern {

    display: flex;

    align-items: center;

    gap: 1.5rem;

    margin-bottom: 2rem;

    padding: 1.5rem;

    background: var(--blanc);

    border-radius: 15px;

    box-shadow: var(--ombre);

    transition: transform 0.3s ease;

}



.type-item-modern:hover {

    transform: translateX(10px);

}



.type-icon {

    font-size: 2.5rem;

    width: 60px;

    text-align: center;

}



.type-content h4 {

    margin-bottom: 0.5rem;

    color: var(--noir);

}



.type-content p {

    color: var(--gris-moyen);

    margin: 0;

}



/* Stats Jireh */

.jireh-stats {

    display: flex;

    gap: 2rem;

    margin: 2rem 0;

}



.jireh-stat {

    text-align: center;

}



.jireh-stat .stat-number {

    font-size: 2rem;

    font-weight: 700;

    color: var(--doré);

    margin-bottom: 0.5rem;

}



.jireh-stat .stat-label {

    font-size: 0.9rem;

    color: var(--gris-moyen);

}



.jireh-visual-modern {

    position: relative;

    height: 500px;

}



.image-stack {

    position: relative;

    width: 100%;

    height: 100%;

}



.stack-item {

    position: absolute;

    border-radius: 15px;

    background-size: cover;

    background-position: center;

    box-shadow: var(--shadow-elegant);

    transition: all 0.3s ease;

}



.stack-item.main {

    width: 100%;

    height: 70%;

    top: 0;

    left: 0;

    z-index: 3;

}



.stack-item.secondary {

    width: 80%;

    height: 50%;

    bottom: 0;

    right: 0;

    z-index: 2;

    transform: rotate(-5deg);

}



.stack-item.tertiary {

    width: 70%;

    height: 40%;

    bottom: 20px;

    left: 20px;

    z-index: 1;

    transform: rotate(3deg);

}



.image-stack:hover .stack-item.secondary {

    transform: rotate(-8deg) translateX(10px);

}



.image-stack:hover .stack-item.tertiary {

    transform: rotate(6deg) translateX(-10px);

}



/* CTA Moderne */

.cta-modern {

    background: var(--noir);

    color: var(--blanc);

    text-align: center;

}



.cta-content-modern h2 {

    font-size: 3rem;

    margin-bottom: 1rem;

}



.cta-content-modern .accent {

    background: var(--primary-gradient);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.cta-content-modern p {

    font-size: 1.3rem;

    margin-bottom: 2rem;

    opacity: 0.9;

}



.cta-buttons-modern {

    display: flex;

    gap: 1.5rem;

    justify-content: center;

    flex-wrap: wrap;

}



/* Footer Moderne */

.footer-modern {

    background: var(--noir);

    color: var(--blanc);

    padding: 4rem 0 2rem;

}



.footer-content-modern {

    display: grid;

    grid-template-columns: 2fr 1fr 1fr 1.5fr;

    gap: 3rem;

    margin-bottom: 3rem;

}



.footer-section-modern h4 {

    margin-bottom: 1.5rem;

    color: var(--blanc);

}



.footer-logo h3 {

    margin-bottom: 1rem;

    color: var(--blanc);

}



.footer-logo p {

    opacity: 0.8;

    margin-bottom: 2rem;

}



.social-links-modern {

    display: flex;

    gap: 1rem;

}



.social-link {

    width: 40px;

    height: 40px;

    background: rgba(255,255,255,0.1);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s ease;

}



.social-link:hover {

    background: var(--doré);

    transform: translateY(-3px);

}



.contact-info-modern p {

    margin-bottom: 0.5rem;

    opacity: 0.8;

}



.footer-section-modern ul {

    list-style: none;

}



.footer-section-modern ul li {

    margin-bottom: 0.8rem;

}



.footer-section-modern ul a {

    color: var(--blanc);

    text-decoration: none;

    opacity: 0.8;

    transition: opacity 0.3s ease;

}



.footer-section-modern ul a:hover {

    opacity: 1;

}



.newsletter-form {

    display: flex;

    gap: 0.5rem;

}



.newsletter-form input {

    flex: 1;

    padding: 0.8rem 1rem;

    border: 1px solid rgba(255,255,255,0.2);

    border-radius: 5px;

    background: rgba(255,255,255,0.1);

    color: var(--blanc);

}



.newsletter-form input::placeholder {

    color: rgba(255,255,255,0.6);

}



.newsletter-form button {

    background: var(--doré);

    color: var(--blanc);

    border: none;

    padding: 0.8rem 1.5rem;

    border-radius: 5px;

    cursor: pointer;

    transition: background 0.3s ease;

}



.newsletter-form button:hover {

    background: var(--doré-clair);

}



.footer-bottom-modern {

    border-top: 1px solid rgba(255,255,255,0.1);

    padding-top: 2rem;

    text-align: center;

    opacity: 0.6;

}



/* Responsive Design pour les styles modernes */

@media (max-width: 768px) {

    .nav-menu-modern {

        display: none;

    }



    .mobile-menu-btn-modern {

        display: flex;

    }



    .hero-title-modern {

        font-size: 3rem;

    }



    .hero-stats {

        flex-direction: column;

        gap: 1.5rem;

    }



    .jireh-content-modern {

        grid-template-columns: 1fr;

        gap: 2rem;

    }



    .jireh-text-modern {

        padding-right: 0;

    }



    .footer-content-modern {

        grid-template-columns: 1fr;

        gap: 2rem;

    }



    .cta-buttons-modern {

        flex-direction: column;

        align-items: center;

    }



    .btn-magnetic.large {

        width: 100%;

        max-width: 300px;

    }



    .equipments-grid-modern {

        grid-template-columns: 1fr;

    }



    .all-suites-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media (max-width: 480px) {

    .all-suites-grid {

        grid-template-columns: 1fr;

    }



    .jireh-stats {

        flex-direction: column;

        gap: 1rem;

    }



    .presentation-grid-modern {

        grid-template-columns: 1fr;

    }

}