/* Variables CSS Mises à Jour */

:root {

    --noir: #1a1a1a;

    --blanc: #ffffff;

    --beige: #f8f5f2;

    --doré: #c4a747;

    --doré-clair: #d4b85e;

    --gris-clair: #e8e8e8;

    --gris-moyen: #8a8a8a;

    --gris-foncé: #2a2a2a;

    --ombre: 0 5px 15px rgba(0, 0, 0, 0.1);

    --ombre-portée: 0 10px 30px rgba(0, 0, 0, 0.15);

    --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);

}



/* Styles pour le logo image */
.logo-modern {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-image {
    height: 60px; /* Ajustez selon vos besoins */
    width: auto;
    object-fit: contain;
    margin-right: 10px;
}

.logo-subtitle {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
}

/* Version responsive */
@media (max-width: 768px) {
    .logo-image {
        height: 50px;
    }

    .logo-subtitle {
        display: none; /* Optionnel : cacher le sous-titre sur mobile */
    }
}




/* Reset et Base Modernisés */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

    font-size: 16px;

}



body {

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    background-color: var(--blanc);

    color: var(--noir);

    line-height: 1.6;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



h1, h2, h3, h4, h5, h6 {

    font-family: 'Playfair Display', serif;

    font-weight: 600;

    line-height: 1.2;

    color: var(--noir);

}



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 2rem;

}



.section {

    padding: 5rem 0;

}



.section-title {

    font-size: 2.5rem;

    text-align: center;

    margin-bottom: 1rem;

    position: relative;

}



    .section-title::after {

        content: '';

        position: absolute;

        bottom: -10px;

        left: 50%;

        transform: translateX(-50%);

        width: 60px;

        height: 2px;

        background: var(--doré);

    }



.section-subtitle {

    text-align: center;

    font-size: 1.1rem;

    color: var(--gris-moyen);

    margin-bottom: 3rem;

    max-width: 600px;

    margin-left: auto;

    margin-right: auto;

}



/* Header Modernisé */

.header {

    position: fixed;

    top: 0;

    width: 100%;

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

    backdrop-filter: blur(20px);

    z-index: 1000;

    padding: 1rem 0;

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

    transition: all 0.3s ease;

}



.nav {

    display: flex;

    justify-content: space-between;

    align-items: center;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 2rem;

}



.logo {

    font-family: 'Playfair Display', serif;

    font-size: 1.8rem;

    font-weight: 700;

    color: var(--noir);

    text-decoration: none;

}



.nav-menu {

    display: flex;

    list-style: none;

    gap: 2rem;

    align-items: center;

}



.nav-link {

    text-decoration: none;

    color: var(--noir);

    font-weight: 500;

    font-size: 0.9rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    transition: color 0.3s ease;

    position: relative;

    padding: 0.5rem 0;

}



    .nav-link::after {

        content: '';

        position: absolute;

        bottom: 0;

        left: 0;

        width: 0;

        height: 2px;

        background: var(--doré);

        transition: width 0.3s ease;

    }



    .nav-link:hover::after,

    .nav-link.active::after {

        width: 100%;

    }



/* Dropdown Menu */

.nav-dropdown {

    position: relative;

}



.dropdown-menu {

    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;

}



.nav-dropdown:hover .dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}



.dropdown-menu li {

    list-style: none;

}



.dropdown-menu 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 a:hover,

    .dropdown-menu a.active {

        background: var(--beige);

        color: var(--doré);

    }



.dropdown-menu li:last-child a {

    border-bottom: none;

}



/* Navigation Actions */

.nav-actions {

    display: flex;

    align-items: center;

    gap: 1rem;

}



.btn-reserver {

    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-block;

    border-radius: 5px;

}



    .btn-reserver:hover {

        background: var(--doré);

        transform: translateY(-2px);

    }



.mobile-menu-btn {

    display: none;

    flex-direction: column;

    cursor: pointer;

    gap: 4px;

    padding: 0.5rem;

}



    .mobile-menu-btn span {

        width: 25px;

        height: 2px;

        background: var(--noir);

        transition: all 0.3s ease;

    }



/* Hero Section Base */

.hero {

    height: 100vh;

    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../assets/images/hero/hero-main.jpg');

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: var(--blanc);

    position: relative;

}



.hero-content {

    max-width: 800px;

    padding: 0 2rem;

}



.hero-title {

    font-size: 4rem;

    margin-bottom: 1rem;

    font-weight: 700;

}



.hero-subtitle {

    font-size: 1.5rem;

    margin-bottom: 0.5rem;

    font-weight: 300;

    letter-spacing: 3px;

}



.hero-description {

    font-size: 1.1rem;

    margin-bottom: 2rem;

    opacity: 0.9;

}



.hero-buttons {

    display: flex;

    gap: 1rem;

    justify-content: center;

    flex-wrap: wrap;

}



.btn {

    display: inline-block;

    padding: 1rem 2.5rem;

    text-decoration: none;

    font-weight: 500;

    letter-spacing: 1px;

    text-transform: uppercase;

    transition: all 0.3s ease;

    cursor: pointer;

    border: 2px solid transparent;

    text-align: center;

    font-size: 0.9rem;

    border-radius: 5px;

}



.btn-primary {

    background: var(--doré);

    color: var(--blanc);

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

}



    .btn-primary:hover {

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

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

        transform: translateY(-2px);

    }



.btn-secondary {

    background: transparent;

    color: var(--blanc);

    border-color: var(--blanc);

}



    .btn-secondary:hover {

        background: var(--blanc);

        color: var(--noir);

        transform: translateY(-2px);

    }



.scroll-indicator {

    position: absolute;

    bottom: 2rem;

    left: 50%;

    transform: translateX(-50%);

}



.scroll-arrow {

    width: 30px;

    height: 30px;

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

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

    transform: rotate(45deg);

}



/* Presentation Section */

.presentation {

    background: var(--blanc);

}



.presentation-grid {

    display: grid;

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

    gap: 2rem;

    margin-top: 3rem;

}



.presentation-card {

    text-align: center;

    padding: 2.5rem 2rem;

    background: var(--blanc);

    border-radius: 10px;

    box-shadow: var(--ombre);

    transition: all 0.3s ease;

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

}



    .presentation-card:hover {

        transform: translateY(-5px);

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

    }



.card-icon {

    font-size: 3rem;

    margin-bottom: 1.5rem;

}



.presentation-card h3 {

    margin-bottom: 1rem;

    font-size: 1.3rem;

    color: var(--noir);

}



.presentation-card p {

    color: var(--gris-moyen);

    margin-bottom: 1.5rem;

    line-height: 1.6;

}



.card-link {

    color: var(--doré);

    text-decoration: none;

    font-weight: 500;

    transition: color 0.3s ease;

}



    .card-link:hover {

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

    }



/* Footer Base */

.footer {

    background: var(--noir);

    color: var(--blanc);

    padding: 3rem 0 1rem;

}



.footer-content {

    display: grid;

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

    gap: 2rem;

    margin-bottom: 2rem;

}



.footer-section h3,

.footer-section h4 {

    margin-bottom: 1rem;

    color: var(--blanc);

}



.footer-section p {

    margin-bottom: 0.5rem;

    opacity: 0.8;

}



.footer-section ul {

    list-style: none;

}



    .footer-section ul li {

        margin-bottom: 0.5rem;

    }



.footer-section a {

    color: var(--blanc);

    text-decoration: none;

    opacity: 0.8;

    transition: opacity 0.3s ease;

}



    .footer-section a:hover {

        opacity: 1;

    }



.social-links {

    display: flex;

    gap: 1rem;

}



.footer-bottom {

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

    padding-top: 1rem;

    text-align: center;

    opacity: 0.6;

}



/* Page Hero Styles */

.page-hero {

    height: 50vh;

    background-size: cover;

    background-position: center;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--blanc);

    text-align: center;

    margin-top: 80px;

}



.page-hero-content h1 {

    font-size: 3.5rem;

    margin-bottom: 1rem;

}



.page-hero-content p {

    font-size: 1.3rem;

    opacity: 0.9;

}



/* Styles de base pour les autres pages */

.hotel-presentation .presentation-grid,

.restaurant-presentation .presentation-content {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

    align-items: center;

}



.services-grid {

    display: grid;

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

    gap: 2rem;

}



.service-card {

    background: var(--blanc);

    padding: 2rem;

    border-radius: 10px;

    text-align: center;

    box-shadow: var(--ombre);

    transition: transform 0.3s ease;

}



    .service-card:hover {

        transform: translateY(-5px);

    }



.service-icon {

    font-size: 3rem;

    margin-bottom: 1rem;

}



.service-link {

    color: var(--doré);

    text-decoration: none;

    font-weight: 500;

    margin-top: 1rem;

    display: inline-block;

}



/* Formulaires de base */

.form-group {

    margin-bottom: 1.5rem;

}



    .form-group label {

        display: block;

        margin-bottom: 0.5rem;

        font-weight: 500;

        color: var(--noir);

    }



    .form-group input,

    .form-group select,

    .form-group textarea {

        width: 100%;

        padding: 0.8rem 1rem;

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

        border-radius: 5px;

        font-family: inherit;

        font-size: 1rem;

        transition: border-color 0.3s ease;

    }



        .form-group input:focus,

        .form-group select:focus,

        .form-group textarea:focus {

            outline: none;

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

        }



.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1rem;

}



/* Messages d'erreur et succès */

.error-message {

    color: #e74c3c;

    font-size: 0.8rem;

    margin-top: 0.3rem;

}



.success-message,

.error-message-global {

    background: var(--blanc);

    padding: 2rem;

    border-radius: 10px;

    margin-bottom: 2rem;

    text-align: center;

    box-shadow: var(--ombre);

}



.success-message {

    border-left: 4px solid #27ae60;

}



.error-message-global {

    border-left: 4px solid #e74c3c;

}



/* Loading Spinner */

.loading-spinner {

    width: 40px;

    height: 40px;

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

    border-top: 4px solid var(--doré);

    border-radius: 50%;

    animation: spin 1s linear infinite;

    margin: 0 auto;

}



@keyframes spin {

    0% {

        transform: rotate(0deg);

    }



    100% {

        transform: rotate(360deg);

    }

}



/* Accessibilité */

@media (prefers-reduced-motion: reduce) {

    * {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}



/* Mode contraste élevé */

@media (prefers-contrast: high) {

    :root {

        --noir: #000000;

        --blanc: #ffffff;

        --gris-moyen: #666666;

        --doré: #b8860b;

    }

}



/* Navigation au clavier */

.nav-link:focus,

.btn:focus,

.btn-reserver:focus {

    outline: 2px solid var(--doré);

    outline-offset: 2px;

}



/* Textes cachés pour accessibilité */

.visually-hidden {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

}