/* ============================================
   CSS Personnalisé - Généré automatiquement
   ============================================ */

/* Charger les Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');


/* Variables CSS pour faciliter la maintenance */
:root {
    /* Polices */
    --font-headings: 'Ubuntu', serif;
    --font-content: 'Ubuntu', sans-serif;
    --font-size-headings: 36px;
    --font-size-text: 16px;
    --font-weight-headings: 700;
    --font-weight-content: 400;

    /* Couleurs */
    --color-primary: #f2f0e8;
    --color-secondary: #808080;
    --color-background: #f2f0e8;
    --color-text: #2c2c2c;
    --color-main-title: #ffffff;
    --color-headings: #1a1a1a;
    --color-links: #ffffff;
    --color-links-hover: #ffffff;
    --color-nav-bg: #c0c0c0;
    --color-nav-text: #ffffff;
    --color-news-title-underline: #ffffff;

    /* Espacement */
    --spacing-content-padding: 20px;
    --spacing-section-margin: 40px;
    --spacing-line-height: 1.6;
    --spacing-letter-spacing: 0px;
    --spacing-paragraph: 16px;

    /* Transparence */
    --opacity-nav: 1;
    --opacity-cards: 0.55;
    --opacity-footer: 0.45;
    --overlay-color: #000000;
    --overlay-opacity: 0;

    /* Boutons */
    --btn-border-radius: 8px;
    --btn-padding-v: 12px;
    --btn-padding-h: 24px;
    --btn-font-size: 15px;
    --btn-font-weight: 600;
    --btn-text-transform: none;
}

/* ============================================
   NAVBAR POSITION
   ============================================ */


/* Navbar en bas (par défaut) */
body.navbar-bottom {
    padding-bottom: 55px !important;
    padding-top: 0 !important;
}

body.navbar-bottom.home-page {
    padding-bottom: 60px !important;
    padding-top: 60px !important;
}

body.navbar-bottom .main-nav,
.nav-bottom {
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    box-shadow: 0 -2px 15px rgba(0,0,0,0.1) !important;
}

body.navbar-bottom .lang-dropdown-menu {
    bottom: 100% !important;
    top: auto !important;
    margin-bottom: 0.5rem !important;
}

body.navbar-bottom .latest-news-card {
    margin-bottom: 100px !important;
}

/* ============================================
   NAVBAR BUTTON ALIGNMENT
   ============================================ */

/* Bouton de réservation dans la navbar - alignement */
.nav-menu li a.btn.btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

/* En mode desktop, garder le bouton inline avec les autres liens */
@media (min-width: 769px) {
    .nav-menu {
        align-items: center !important;
    }

    .nav-menu li {
        display: flex !important;
        align-items: center !important;
    }

    .nav-menu li a.btn.btn-primary {
        padding: 8px 16px !important;
        font-size: 14px !important;
        white-space: nowrap !important;
    }
}

/* En mode mobile (bottom navbar), adapter le bouton sans emoji */
@media (max-width: 768px) {
    .nav-menu li a.btn.btn-primary {
        padding: 0.5rem 0.5rem !important;
        font-size: 0.7rem !important;
        border-radius: 4px !important;
        background-color: var(--color-secondary) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Pas d'icône pour mobile - texte sobre */
    .nav-menu li:has(a.btn.btn-primary) a::before {
        display: none !important;
        content: none !important;
    }
}

/* ============================================
   TYPOGRAPHIE
   ============================================ */

/* Titre principal (nom du restaurant dans le bandeau supérieur) */
.mobile-logo-text {
    font-family: var(--font-headings) !important;
    font-weight: var(--font-weight-headings) !important;
    color: var(--color-main-title) !important;
    letter-spacing: var(--spacing-letter-spacing) !important;
}

/* Autres titres */
h1, h2, h3, h4, h5, h6,
.page-content h1,
.page-content h2,
.latest-news-title {
    font-family: var(--font-headings) !important;
    font-weight: var(--font-weight-headings) !important;
    color: var(--color-headings) !important;
    letter-spacing: var(--spacing-letter-spacing) !important;
}

h1 {
    font-size: calc(var(--font-size-headings) * 1.2) !important;
}

h2 {
    font-size: var(--font-size-headings) !important;
}

h3 {
    font-size: calc(var(--font-size-headings) * 0.85) !important;
}

h4 {
    font-size: calc(var(--font-size-headings) * 0.7) !important;
}

h5, h6 {
    font-size: calc(var(--font-size-headings) * 0.6) !important;
}

/* Contenu */
body, p, li, a, span, div,
.main-content,
.page-content,
.welcome-card p,
.nav-menu a {
    font-family: var(--font-content) !important;
    font-weight: var(--font-weight-content) !important;
    font-size: var(--font-size-text) !important;
    line-height: var(--spacing-line-height) !important;
    color: var(--color-text) !important;
}

p {
    margin-bottom: var(--spacing-paragraph) !important;
}

/* ============================================
   COULEURS
   ============================================ */

/* Arrière-plan */
body {
    background-color: var(--color-background) !important;
}

/* Liens */
a {
    color: var(--color-links) !important;
}

a:hover {
    color: var(--color-links-hover) !important;
}

/* Navigation */
.main-nav {
    background-color: var(--color-nav-bg) !important;
    opacity: var(--opacity-nav) !important;
}

.nav-menu a {
    color: var(--color-nav-text) !important;
}

.nav-menu a:hover,
.nav-menu a.active {
    color: var(--color-secondary) !important;
}

/* Latest News Title Underline */
.latest-news-title {
    border-bottom-color: var(--color-news-title-underline) !important;
}

/* Boutons */
button, .btn, input[type="submit"],
.button, .read-more, .read-full-article {
    background-color: var(--color-secondary) !important;
    color: #ffffff !important;
    transition: all 0.3s ease !important;
}

button:hover, .btn:hover, input[type="submit"]:hover,
.read-more:hover, .read-full-article:hover {
    background-color: var(--color-primary) !important;
}

/* ============================================
   ESPACEMENT
   ============================================ */

/* Padding du contenu */
.main-content,
.page-container,
.welcome-card,
.page-content {
    padding: var(--spacing-content-padding) !important;
}

/* Marges entre sections */
.main-content > *,
.page-content > *,
section {
    margin-bottom: var(--spacing-section-margin) !important;
}

/* ============================================
   TRANSPARENCE ET OVERLAYS
   ============================================ */

/* Cartes et tuiles */
.welcome-card,
.latest-news-card,
.news-item,
.page-container {
    background-color: rgba(242, 240, 232, var(--opacity-cards)) !important;
    backdrop-filter: blur(10px) !important;
}

/* Footer */
.main-footer {
    background-color: var(--color-nav-bg) !important;
    opacity: var(--opacity-footer) !important;
    color: var(--color-nav-text) !important;
}

/* Overlay de la vidéo/arrière-plan */
.gradient-overlay {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, var(--overlay-opacity)),
        rgba(0, 0, 0, calc(var(--overlay-opacity) * 0.8))
    ) !important;
}

/* Overlay sur les images d'arrière-plan */
.video-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, var(--overlay-opacity));
    pointer-events: none;
}

/* Fallback pour la vidéo de fond - utilise la couleur de fond du thème */
.video-background {
    background-color: var(--color-background) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Classe pour afficher l'image de fallback quand la vidéo échoue */
.video-background.video-failed {
    background-color: var(--color-primary) !important;
}

.video-background.video-failed .bg-video {
    display: none !important;
}

.video-background.video-failed .video-loader {
    display: none !important;
}

/* ============================================
   BOUTONS
   ============================================ */

/* Styles de base pour tous les boutons */
button, .btn, input[type="submit"],
.button, .read-more, .read-full-article {
    padding: var(--btn-padding-v) var(--btn-padding-h) !important;
    font-size: var(--btn-font-size) !important;
    font-weight: var(--btn-font-weight) !important;
    text-transform: var(--btn-text-transform) !important;
    font-family: var(--font-content) !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    border: none !important;
}


/* Style de bouton : ghost */
button, .btn, input[type="submit"], .button, .read-more, .read-full-article {
    border-radius: var(--btn-border-radius) !important;
    background-color: rgba(128, 128, 128, 0.1) !important;
    color: var(--color-secondary) !important;
    border: 1px solid var(--color-secondary) !important;
}

/* Ombre des boutons : medium */
button, .btn, input[type="submit"], .button, .read-more, .read-full-article {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

/* Effet de survol : lift */
button:hover, .btn:hover, input[type="submit"]:hover,
.read-more:hover, .read-full-article:hover {
    transform: translateY(-3px) !important;
        box-shadow: 0 8px 16px rgba(0,0,0,0.2) !important;
    }

/* Couleur de survol pour les styles outline et ghost */
button:hover, .btn:hover, input[type="submit"]:hover,
.read-more:hover, .read-full-article:hover {
    background-color: var(--color-secondary) !important;
    color: #ffffff !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    :root {
        --font-size-headings: calc(36px * 0.8);
        --font-size-text: calc(16px * 0.95);
        --spacing-content-padding: calc(20px * 0.7);
        --spacing-section-margin: calc(40px * 0.7);
    }
}