/* ==========================================
   1. RESET & BASE STYLES
   ========================================== */

body,
h1,
h2,
h3,
p,
ul,
ol,
li,
a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    box-sizing: border-box;
    /* Ajouté pour inclure les bordures dans le calcul des dimensions */
}

html,
body {
    width: 100%;
    /* S'assurer que le body occupe toute la largeur */
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    /* Désactive le débordement horizontal */
    box-sizing: border-box;
    /* Inclut les bordures dans le calcul des dimensions */
}


@font-face {
    font-family: 'Cygre Black';
    src: url('../fonts/Cygre-Black.woff2') format('woff2'),
         url('../fonts/Cygre-Black.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cygre Book';
    src: url('../fonts/Cygre-Book.woff2') format('woff2'),
         url('../fonts/Cygre-Book.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ==========================================
   2. NAVBAR
   ========================================== */

/* ==========================================
   NAVBAR FIXE
   ========================================== */
   .custom-navbar {
    background-color: #efc43d;
    padding: 10px 20px;
    width: 100%;
    position: fixed; /* Fixe la navbar en haut */
    top: 0;
    left: 0;
    z-index: 1000; /* Assure que la navbar est au-dessus des autres éléments */
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ajoute une légère ombre */
}

body {
    padding-top: 70px; /* Ajoute un espace pour éviter que le contenu ne soit caché par la navbar */
}

.logo {
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

.brand-title {
    font-family: 'Cygre Black';
    font-weight: bold;
    color: #000000;
}

.navbar-nav .nav-item {
    margin: 0 10px;
}

.nav-link {
    font-family: 'Cygre Book';
    font-size: 1.2em;
    color: #000000;
    transition: color 0.3s ease-in-out;
}

.nav-link:hover {
    color: #ffffff;
}

/* ==========================================
   3. HEADER
   ========================================== */

   .custom-header {
    background-color: #000000;
    color: #ffffff;
    padding: 80px 20px;
    text-align: center;
    position: relative;
}

.header-title {
    font-family: 'Cygre Black';
    font-weight: bold;
    font-size: 3rem;
    margin-bottom: 20px;
    color: #ffffff;
}

.header-highlight {
    font-family: 'Cygre Book', sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 20px;
    letter-spacing: 1px;
    line-height: 1.5;
}

.header-subtitle {
    font-family: 'Cygre Book';
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: #cccccc;
}

.header-subtitle a {
    color: #efc43d;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s ease;
}

.header-subtitle a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.header-logo {
    max-width: 200px;
    /* Augmente la largeur maximum du logo */
    height: auto;
    /* Conserve le ratio d'origine */
    margin: 0 auto;
    /* Centre le logo horizontalement */
    display: block;
    /* Assure que le logo est un bloc centré */
    border-radius: 50%;
    /* Arrondi le logo pour qu'il soit circulaire */
    border: 4px solid #efc43d;
    /* Ajoute une bordure dorée autour du logo */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    /* Ajoute une ombre portée */
}

.button-group {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn-primary {
    background-color: #efc43d;
    color: #000000;
    font-family: 'Cygre Black';
    padding: 10px 30px;
    border-radius: 30px;
    font-size: 1.1rem;
    border: none;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #000000;
    color: #ffffff;
    transform: scale(1.05);
}

.btn-secondary {
    background-color: #000000;
    color: #ffffff;
    font-family: 'Cygre Black';
    padding: 10px 30px;
    border-radius: 30px;
    font-size: 1.1rem;
    border: 2px solid #efc43d;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.btn-secondary:hover {
    background-color: #efc43d;
    color: #000000;
    transform: scale(1.05);
}

/* Responsive */
@media (max-width: 768px) {
    .header-title {
        font-size: 2.5rem;
    }

    .header-highlight {
        font-size: 1.5rem;
    }

    .btn-primary, .btn-secondary {
        font-size: 1rem;
        padding: 10px 20px;
    }

    .header-logo {
        max-width: 150px;
    }
}

/* ==========================================
   4. RÉSERVATION
========================================== */
.reservation-section {
    background-color: #ffffff;
    color: #000000;
    padding: 60px 20px;
    text-align: center;
    position: relative;
}

.reservation-title {
    font-family: 'Cygre Black';
    font-size: 2.5rem;
    margin-bottom: 20px;
    line-height: 1.4;
}

.reservation-title .highlight {
    color: #efc43d;
    background-color: #000000;
    padding: 0 8px;
    border-radius: 4px;
}

.reservation-text {
    font-family: 'Cygre Book';
    font-size: 1.3rem;
    line-height: 1.8;
    margin-bottom: 30px;
}

.btn-primary {
    background-color: #efc43d;
    border: none;
    font-family: 'Cygre Black';
    color: #000000;
    padding: 12px 25px;
    border-radius: 30px;
    box-shadow: 0 4px 10px rgba(239, 196, 61, 0.4);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-secondary {
    background-color: #000000;
    color: #ffffff;
    font-family: 'Cygre Black';
    padding: 12px 25px;
    border-radius: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-primary:hover {
    background-color: #000000;
    color: #ffffff;
    transform: scale(1.05);
}

.btn-secondary:hover {
    background-color: #efc43d;
    color: #000000;
    transform: scale(1.05);
}

.reservation-divider {
    height: 4px;
    width: 80px;
    background-color: #efc43d;
    margin: 20px auto 0;
    border-radius: 2px;
}

.reservation-footer {
    font-family: 'Cygre Book';
    font-size: 1rem;
    margin-top: 20px;
    color: #666666;
}

/* Responsive */
@media (max-width: 768px) {
    .reservation-title {
        font-size: 2rem;
    }

    .reservation-text {
        font-size: 1.1rem;
    }
}

/* ==========================================
   FOOTER
   ========================================== */
   .custom-footer {
    background-color: #000000; /* Fond noir */
    color: #ffffff; /* Texte blanc */
    padding: 20px 20px 10px;
    font-family: 'Cygre Book';
    font-size: 0.9rem;
}

/* Logo */
.footer-logo-img {
    max-width: 140px; /* Taille du logo */
    height: auto;
    display: inline-block;
    border-radius: 50%;
    margin-bottom: 10px;
}

/* Contacts et réseaux sociaux */
.footer-contact {
    text-align: center;
}

.footer-icon-link {
    color: #ffffff; /* Couleur blanche par défaut */
    font-size: 1.4rem; /* Taille des icônes */
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px; /* Espace entre icône et texte */
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer-icon-link:hover {
    color: #efc43d; /* Couleur jaune au survol */
    transform: translateY(-2px); /* Légère élévation */
}

/* Espacement entre icônes des réseaux */
.footer-contact .d-flex {
    gap: 20px; /* Espace entre les icônes */
}

/* Mentions légales */
.footer-link {
    color: #efc43d;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s ease;
    border-bottom: 2px solid transparent;
}

.footer-link:hover {
    color: #ffffff;
    border-bottom: 2px solid #efc43d;
    text-decoration: none;
}

/* Copyright */
.footer-copyright {
    font-size: 0.9rem;
    color: #bbbbbb; /* Couleur grise douce */
    margin-top: 5px;
}

.footer-bottom .developer-link {
    color: #efc43d;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s ease;
    border-bottom: 2px solid transparent;
}

.footer-bottom .developer-link:hover {
    color: #ffffff;
    border-bottom: 2px solid #efc43d;
    text-decoration: none;
}

/* Responsive */
@media (max-width: 995px) {
    .footer-logo-img {
        max-width: 120px; /* Taille réduite du logo sur mobile */
        margin-bottom: 15px;
    }

    .footer-contact .d-flex {
        gap: 15px;
    }

    .footer-icon-link {
        font-size: 1.2rem; /* Réduction de la taille des icônes sur mobile */
    }
}

/* ==========================================
   6. RESPONSIVE STYLES
   ========================================== */

@media (max-width: 768px) {
    .header-title {
        font-size: 2rem;
    }

    .header-subtitle {
        font-size: 1rem;
    }

    .reservation-title {
        font-size: 1.5rem;
    }

    .reservation-text {
        font-size: 1rem;
    }

    .nav-link {
        margin: 5px 0;
    }

    .btn-primary,
    .btn-secondary {
        /* Boutons en pleine largeur */
        margin-bottom: 10px;
        font-size: 0.9rem;
        /* Taille de police réduite sur mobile */
        padding: 12px 15px;
        /* Ajuste les paddings pour équilibrer l'apparence */
    }
}

/* ==========================================
   SECTION À PROPOS
========================================== */
.about-section {
    background-color: #000000;
    /* Fond noir */
    color: #ffffff;
    padding: 60px 20px;
}

.about-title {
    font-family: 'Cygre Black';
    font-size: 2.5rem;
    color: #efc43d;
    margin-bottom: 20px;
    text-align: center;
}

.about-title .highlight {
    color: #ffffff;
}

.about-subtitle {
    font-family: 'Cygre Book';
    font-size: 1.5rem;
    color: #ffffff;
    text-align: center;
    margin-bottom: 30px;
}


.about-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.about-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.about-text {
    flex: 1;
    font-family: 'Cygre Book';
    font-size: 1.3rem;
    line-height: 1.8;
    text-align: justify;
    margin: 10px;
}

.about-text .highlight {
    color: #efc43d;
    font-weight: bold;
}

.about-image {
    flex: 1;
    text-align: center;
    margin: 10px;
}

.about-image video {
    max-width: 40%;
    height: auto;
    border-radius: 10px;
    /* Coins légèrement arrondis */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    /* Ombre légère */
}

.about-image-large {
    flex: 1;
    text-align: center;
    margin: 10px;
}

.about-image-large img {
    max-width: 80%;
    height: auto;
    border-radius: 10px;
    /* Coins légèrement arrondis */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    /* Ombre légère */
}

.image-border {
    position: relative;
    display: inline-block;
}

.image-border::before,
.image-border::after {
    content: '';
    position: absolute;
    border: 4px solid #efc43d; /* Couleur et taille de la bordure */
    width: 20px; /* Longueur des coins, ajustable */
    height: 20px; /* Longueur des coins, ajustable */
}

.image-border::before {
    top: -4px; /* Position au-dessus */
    left: -4px; /* Position à gauche */
    border-right: none; /* Supprime la bordure droite */
    border-bottom: none; /* Supprime la bordure inférieure */
}

.image-border::after {
    bottom: -4px; /* Position en dessous */
    right: -4px; /* Position à droite */
    border-left: none; /* Supprime la bordure gauche */
    border-top: none; /* Supprime la bordure supérieure */
}


/* Responsive */
@media (max-width: 768px) {
    .about-row {
        flex-direction: column;
    }

    .about-image img {
        max-width: 90%;
    }

    .about-text {
        font-size: 1.2rem;
        text-align: center;
    }
}

/* ==========================================
   8. SECTION TARIFS
   ========================================== */

.tarifs-section {
    background-color: #ffffff;
    padding: 60px 20px;
    text-align: center;
    position: relative;
}

.tarifs-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(0,0,0,0.05) 20%, 
        rgba(0,0,0,0.1) 40%, 
        rgba(0,0,0,0.15) 60%, 
        rgba(0,0,0,0.2) 80%, 
        rgba(0,0,0,0.25) 100%);
    pointer-events: none;
    z-index: 1;
}

.tarifs-section .container {
    position: relative;
    z-index: 2;
}

.tarifs-title {
    font-family: 'Cygre Black';
    font-size: 2.5rem;
    color: #000000;
    margin-bottom: 40px;
}

.tarifs-subtitle {
    font-family: 'Cygre Book';
    font-size: 1.5rem;
    color: #666666;
    margin-bottom: 50px;
}

/* Colonnes pour 5 éléments */
.col-lg-2-4 {
    flex: 0 0 auto;
    width: 20%;
}

@media (max-width: 992px) {
    .col-lg-2-4 {
        width: 50%;
    }
}

@media (max-width: 768px) {
    .col-lg-2-4 {
        width: 100%;
    }
}

/* Nouvelles cartes de formules */
.formule-card {
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transition: all 0.4s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 2px solid transparent;
    position: relative;
    transform: perspective(1000px) rotateY(0deg);
}

.formule-card:hover {
    transform: translateY(-15px) perspective(1000px) rotateY(2deg);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    border-color: #efc43d;
}

/* Badge populaire redessiné */
.formule-populaire {
    border: 3px solid #efc43d;
    box-shadow: 0 0 20px rgba(239, 196, 61, 0.3);
    position: relative;
}

.formule-populaire::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #efc43d 0%, #d4ac36 50%, #efc43d 100%);
    z-index: 5;
}

.formule-badge {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #efc43d 0%, #d4ac36 100%);
    color: #000000;
    padding: 6px 18px;
    font-family: 'Cygre Black';
    font-size: 0.65rem;
    font-weight: bold;
    z-index: 10;
    text-align: center;
    box-shadow: 0 4px 15px rgba(239, 196, 61, 0.4);
    border: 2px solid #fff;
    letter-spacing: 0.5px;
    border-radius: 20px;
    text-transform: uppercase;
    white-space: nowrap;
}

.formule-badge::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #efc43d, #d4ac36, #efc43d);
    border-radius: inherit;
    z-index: -1;
}

/* Formule premium */
.formule-premium {
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 50%, #2a2a2a 100%);
    color: #ffffff;
    border: 3px solid #efc43d;
    box-shadow: 0 0 30px rgba(239, 196, 61, 0.4);
}

.formule-premium .formule-name,
.formule-premium .formule-subtitle,
.formule-premium .formule-features li {
    color: #ffffff;
}

.formule-premium .formule-price .currency,
.formule-premium .formule-price .price {
    color: #efc43d;
    text-shadow: 0 0 10px rgba(239, 196, 61, 0.5);
}

/* En-tête des cartes amélioré */
.formule-header {
    padding: 30px 20px 25px;
    text-align: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
}

.formule-populaire .formule-header {
    padding: 45px 20px 25px;
}

.formule-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #efc43d 50%, transparent 100%);
}

.formule-premium .formule-header {
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 50%, #2a2a2a 100%);
    padding: 45px 20px 25px;
}

.formule-premium .formule-header::after {
    background: linear-gradient(90deg, transparent 0%, #efc43d 50%, transparent 100%);
}

.formule-name {
    font-family: 'Cygre Black';
    font-size: 1.3rem;
    color: #000000;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.formule-subtitle {
    font-family: 'Cygre Book';
    font-size: 0.95rem;
    color: #666666;
    margin-bottom: 25px;
    font-style: italic;
}

/* Design des prix simplifié */
.formule-price {
    position: relative;
    margin-bottom: 15px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}

.formule-price .currency {
    font-family: 'Cygre Black';
    font-size: 1.2rem;
    color: #efc43d;
    align-self: flex-start;
    margin-top: 8px;
}

.formule-price .price {
    font-family: 'Cygre Black';
    font-size: 3.5rem;
    color: #efc43d;
    line-height: 1;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    font-weight: 900;
}

/* Contenu des cartes */
.formule-content {
    padding: 25px 20px;
    flex-grow: 1;
    text-align: left;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}

/* Style pour la restriction d'âge */
.age-restriction {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    color: #856404;
    padding: 12px 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-family: 'Cygre Book';
    font-size: 0.9rem;
    font-weight: bold;
    border: 2px solid #ffc107;
    text-align: center;
    box-shadow: 0 3px 10px rgba(255, 193, 7, 0.3);
}

.age-restriction i {
    color: #ffc107;
    margin-right: 8px;
    font-size: 1.1rem;
}

.formule-premium .formule-content {
    background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
}

.formule-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.formule-features li {
    font-family: 'Cygre Book';
    font-size: 0.9rem;
    color: #333333;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    line-height: 1.5;
    transition: all 0.3s ease;
}

.formule-features li:hover {
    transform: translateX(5px);
    color: #000000;
}

.formule-features li i {
    color: #efc43d;
    margin-right: 12px;
    margin-top: 3px;
    font-size: 0.8rem;
    text-shadow: 0 0 5px rgba(239, 196, 61, 0.3);
}

.formule-note {
    font-family: 'Cygre Book';
    font-size: 0.8rem;
    color: #888888;
    margin-top: 15px;
    font-style: italic;
    text-align: center;
}

/* Actions des cartes améliorées */
.formule-actions {
    padding: 25px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid #eee;
}

.formule-premium .formule-actions {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border-top: 1px solid #444;
}

.formule-btn {
    font-family: 'Cygre Book';
    font-size: 0.95rem;
    font-weight: bold;
    padding: 14px 20px;
    border-radius: 30px;
    border: none;
    transition: all 0.4s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.formule-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s ease;
}

.formule-btn:hover::before {
    left: 100%;
}

.formule-actions .btn-primary {
    background: linear-gradient(135deg, #efc43d 0%, #d4ac36 100%);
    color: #000000;
    box-shadow: 0 5px 15px rgba(239, 196, 61, 0.3);
}

.formule-actions .btn-primary:hover {
    background: linear-gradient(135deg, #000000 0%, #333333 100%);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.formule-actions .btn-secondary {
    background: transparent;
    color: #000000;
    border: 2px solid #000000;
}

.formule-actions .btn-secondary:hover {
    background: linear-gradient(135deg, #000000 0%, #333333 100%);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.formule-premium .formule-actions .btn-secondary {
    color: #ffffff;
    border: 2px solid #efc43d;
}

.formule-premium .formule-actions .btn-secondary:hover {
    background: linear-gradient(135deg, #efc43d 0%, #d4ac36 100%);
    color: #000000;
    border-color: #efc43d;
}

/* Responsive amélioré */
@media (max-width: 768px) {
    .tarifs-title {
        font-size: 2rem;
        margin-bottom: 30px;
    }

    .tarifs-subtitle {
        font-size: 1.3rem;
        margin-bottom: 40px;
    }

    .formule-card {
        margin-bottom: 30px;
    }

    .formule-name {
        font-size: 1.2rem;
    }

    .formule-price .price {
        font-size: 3rem;
    }

    .formule-features li {
        font-size: 0.85rem;
    }

    .formule-badge {
        font-size: 0.65rem;
        padding: 8px 25px;
        right: -20px;
    }
}


/* Trait jaune central */
.yellow-divider-small {
    width: 80px;
    height: 4px;
    background-color: #efc43d; /* Jaune */
    margin: 20px auto; /* Centré */
    border-radius: 2px;
}

/* Nouveaux services */
.services-section {
    text-align: center;
}

.services-title {
    font-family: 'Cygre Black';
    font-size: 1.8rem;
    color: #000000;
    margin-bottom: 20px;
}

.service-item {
    background-color: #f8f9fa;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-item:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.service-item h4 {
    font-family: 'Cygre Black';
    font-size: 1.4rem;
    color: #000000;
    margin-bottom: 10px;
}

.service-item .service-price {
    font-family: 'Cygre Book';
    font-size: 1.2rem;
    color: #efc43d;
}

/* Responsive */
@media (max-width: 768px) {
    .service-item {
        margin-bottom: 20px;
    }
}

/* ==========================================
   SECTION RÉSERVATION EN LIGNE
   ========================================== */
.reservation-online-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 80px 20px;
    position: relative;
}

.reservation-online-title {
    font-family: 'Cygre Black';
    font-size: 2.5rem;
    color: #000000;
    margin-bottom: 20px;
    text-align: center;
}

.reservation-online-subtitle {
    font-family: 'Cygre Book';
    font-size: 1.3rem;
    color: #666666;
    margin-bottom: 50px;
    text-align: center;
}

.reservation-online-form {
    background: #ffffff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border: 2px solid #efc43d;
}

/* Styles des formulaires */
.form-group {
    margin-bottom: 25px;
}

.form-label {
    font-family: 'Cygre Black';
    font-size: 1rem;
    color: #000000;
    margin-bottom: 8px;
    display: block;
}

.form-label i {
    color: #efc43d;
    margin-right: 8px;
}

.form-control {
    width: 100%;
    padding: 12px 15px;
    font-family: 'Cygre Book';
    font-size: 1rem;
    border: 2px solid #ddd;
    border-radius: 10px;
    transition: all 0.3s ease;
    background: #fafafa;
}

.form-control:focus {
    outline: none;
    border-color: #efc43d;
    background: #ffffff;
    box-shadow: 0 0 10px rgba(239, 196, 61, 0.2);
}

.form-control.is-invalid {
    border-color: #dc3545;
    background: #fff5f5;
}

.form-control.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.2);
}

/* Titres des sections du formulaire */
.form-section-title {
    font-family: 'Cygre Black';
    font-size: 1.2rem;
    color: #000000;
    margin-bottom: 25px;
    padding: 15px 20px;
    background: linear-gradient(135deg, #efc43d 0%, #d4ac36 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.step-number {
    background: #000000;
    color: #ffffff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: bold;
}

/* Options simplifiées */
.options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.option-item-simple {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 15px;
    transition: all 0.3s ease;
}

.option-item-simple:hover {
    border-color: #efc43d;
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(239, 196, 61, 0.2);
}

.checkbox-container-simple {
    display: flex;
    align-items: center;
    cursor: pointer;
    width: 100%;
}

.checkbox-container-simple input[type="checkbox"] {
    display: none;
}

.checkmark-simple {
    width: 18px;
    height: 18px;
    background: #ffffff;
    border: 2px solid #ddd;
    border-radius: 4px;
    margin-right: 12px;
    position: relative;
    transition: all 0.3s ease;
}

.checkbox-container-simple input[type="checkbox"]:checked + .checkmark-simple {
    background: #efc43d;
    border-color: #efc43d;
}

.checkbox-container-simple input[type="checkbox"]:checked + .checkmark-simple::after {
    content: '✓';
    position: absolute;
    color: #000000;
    font-weight: bold;
    font-size: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.option-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-family: 'Cygre Book';
}

.option-content strong {
    font-family: 'Cygre Black';
    color: #000000;
}

.option-content .option-price {
    font-family: 'Cygre Black';
    color: #efc43d;
    font-weight: bold;
}

/* Récapitulatif simplifié */
.price-summary-simple {
    background: #ffffff;
    border: 3px solid #efc43d;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(239, 196, 61, 0.2);
}

.summary-header {
    background: linear-gradient(135deg, #efc43d 0%, #d4ac36 100%);
    padding: 15px 20px;
    color: #000000;
}

.summary-header h4 {
    margin: 0;
    font-family: 'Cygre Black';
    font-size: 1.1rem;
}

.summary-body {
    padding: 20px;
}

.summary-line-simple {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-family: 'Cygre Book';
    border-bottom: 1px solid #eee;
}

.options-list {
    font-family: 'Cygre Book';
    font-size: 0.9rem;
    color: #666;
    margin: 10px 0;
}

.options-list .option-item-summary {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
}

.total-line-simple {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    margin-top: 15px;
    border-top: 2px solid #efc43d;
    font-family: 'Cygre Black';
    font-size: 1.2rem;
    font-weight: bold;
}

.total-amount-simple {
    color: #efc43d;
    font-size: 1.4rem;
}

/* Titre des options */
.options-title {
    font-family: 'Cygre Black';
    font-size: 1.3rem;
    color: #000000;
    margin-bottom: 20px;
    border-bottom: 2px solid #efc43d;
    padding-bottom: 10px;
}

.options-title i {
    color: #efc43d;
    margin-right: 10px;
}

/* Styles des options checkbox */
.option-item {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 15px;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
    height: 100%;
}

.option-item:hover {
    border-color: #efc43d;
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(239, 196, 61, 0.2);
}

.checkbox-container {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    width: 100%;
}

.checkbox-container input[type="checkbox"] {
    display: none;
}

.checkmark {
    width: 20px;
    height: 20px;
    background: #ffffff;
    border: 2px solid #ddd;
    border-radius: 4px;
    margin-right: 12px;
    margin-top: 2px;
    position: relative;
    transition: all 0.3s ease;
}

.checkbox-container input[type="checkbox"]:checked + .checkmark {
    background: #efc43d;
    border-color: #efc43d;
}

.checkbox-container input[type="checkbox"]:checked + .checkmark::after {
    content: '✓';
    position: absolute;
    color: #000000;
    font-weight: bold;
    font-size: 14px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.option-text {
    flex: 1;
    font-family: 'Cygre Book';
}

.option-text strong {
    font-family: 'Cygre Black';
    color: #000000;
    font-size: 1rem;
}

.option-text small {
    color: #666666;
    font-size: 0.9rem;
}

.option-price {
    font-family: 'Cygre Black';
    color: #efc43d;
    font-weight: bold;
    font-size: 1rem;
    float: right;
}

/* Récapitulatif du prix */
.price-summary {
    background: linear-gradient(135deg, #000000 0%, #333333 100%);
    color: #ffffff;
    padding: 25px;
    border-radius: 15px;
    border: 3px solid #efc43d;
}

.summary-title {
    font-family: 'Cygre Black';
    font-size: 1.3rem;
    color: #efc43d;
    margin-bottom: 20px;
    text-align: center;
}

.summary-title i {
    margin-right: 10px;
}

.summary-content {
    font-family: 'Cygre Book';
}

.summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #444;
}

.summary-line:last-child {
    border-bottom: none;
}

.summary-label {
    color: #cccccc;
}

.total-line {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 2px solid #efc43d;
    font-size: 1.2rem;
}

.total-amount {
    color: #efc43d;
    font-size: 1.5rem;
}

/* Bouton de réservation */
.btn-reservation {
    background: linear-gradient(135deg, #efc43d 0%, #d4ac36 100%);
    color: #000000;
    font-family: 'Cygre Black';
    font-size: 1.2rem;
    padding: 15px 40px;
    border-radius: 30px;
    border: none;
    box-shadow: 0 8px 25px rgba(239, 196, 61, 0.4);
    transition: all 0.4s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-reservation:hover {
    background: linear-gradient(135deg, #000000 0%, #333333 100%);
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}

.btn-reservation i {
    margin-right: 10px;
}

/* Bouton de devis (style outline) */
.btn-outline-primary.btn-reservation {
    background: transparent;
    color: #efc43d;
    border: 2px solid #efc43d;
    box-shadow: 0 4px 15px rgba(239, 196, 61, 0.2);
}

.btn-outline-primary.btn-reservation:hover {
    background: linear-gradient(135deg, #efc43d 0%, #d4ac36 100%);
    color: #000000;
    border-color: #efc43d;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(239, 196, 61, 0.4);
}

/* Conteneur des boutons côte à côte */
.d-flex.gap-3 > .btn-reservation {
    min-width: 200px;
}

@media (max-width: 576px) {
    .d-flex.gap-3 > .btn-reservation {
        min-width: 100%;
        margin-bottom: 10px;
    }
}

.reservation-note {
    font-family: 'Cygre Book';
    color: #666666;
    font-size: 0.9rem;
    margin-top: 15px;
    font-style: italic;
}

.reservation-note i {
    color: #efc43d;
    margin-right: 5px;
}

/* Responsive */
@media (max-width: 768px) {
    .reservation-online-form {
        padding: 25px;
    }
    
    .reservation-online-title {
        font-size: 2rem;
    }
    
    .reservation-online-subtitle {
        font-size: 1.1rem;
    }
    
    .option-item {
        margin-bottom: 15px;
    }
    
    .btn-reservation {
        font-size: 1rem;
        padding: 12px 30px;
    }
}

/* ==========================================
   SECTION FAQ
   ========================================== */
   .faq-section {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
        url('../images/about-bg.jpg') center/cover no-repeat;
    /* Image de fond et overlay */
    color: #ffffff;
    padding: 60px 20px;
    position: relative;
}

.faq-title {
    font-family: 'Cygre Black';
    font-size: 2.5rem;
    color: #efc43d;
    /* Titre en jaune */
    margin-bottom: 20px;
    text-align: center;
    text-transform: uppercase;
}

.faq-subtitle {
    font-family: 'Cygre Book';
    font-size: 1.4rem;
    color: #ffffff;
    text-align: center;
    margin-bottom: 20px;
}

.contact-subtitle {
    font-family: 'Cygre Book';
    font-size: 1.5rem;
    color: #666666;
    margin-bottom: 30px;
}

.faq-content {
    max-width: 800px;
    margin: 0 auto;
    /* Centre la section pour un focus clair */
}

.faq-item {
    margin-bottom: 30px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.1); /* Fond transparent léger */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    /* Ombre douce */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.faq-item:hover {
    transform: scale(1.02);
    /* Zoom léger */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.8);
    /* Ombre accentuée */
}

.faq-question {
    font-family: 'Cygre Black';
    font-size: 1.5rem;
    color: #efc43d;
    /* Jaune */
    margin-bottom: 10px;
}

.faq-answer {
    font-family: 'Cygre Book';
    font-size: 1.2rem;
    color: #f1f1f1;
    /* Blanc cassé */
    line-height: 1.8;
    /* Lisibilité accrue */
}

/* Responsive */
@media (max-width: 768px) {
    .faq-title {
        font-size: 2rem;
    }

    .faq-question {
        font-size: 1.3rem;
    }

    .faq-answer {
        font-size: 1.1rem;
    }
}


/* SECTION AVIS GOOGLE */
.avis-section {
    background-color: #000000;
    /* Fond noir */
    color: #ffffff;
    /* Texte blanc */
    padding: 60px 20px;
}

.avis-title {
    font-family: 'Cygre Black';
    font-size: 2.5rem;
    color: #efc43d;
    /* Jaune doré */
    margin-bottom: 40px;
    text-align: center;
}

a[href*="elfsight"] {
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
}


/* ==========================================
   SECTION PARTENAIRES
   ========================================== */
.partenaires-section {
    background-color: #ffffff;
    /* Fond blanc */
    text-align: center;
}

.partenaires-title {
    font-family: 'Cygre Black';
    font-size: 2.5rem;
    color: #000000;
    /* Texte noir */
    margin-bottom: 40px;
    margin-top: 40px;
}

.partenaires-title .highlight {
    color: #efc43d;
    padding: 0 8px;
}

/* Style des logos */
.partenaire-logo {
    width: 100%;
    /* La largeur s'ajuste automatiquement */
    max-width: 200px;
    /* Taille par défaut des logos */
    height: auto;
    /* Conserve les proportions */
    border-radius: 15px;
    /* Coins arrondis */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    /* Ombre douce */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.partenaire-logo:hover {
    transform: scale(1.1);
    /* Zoom léger au survol */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    /* Ombre accentuée */
}

/* Taille personnalisée pour le logo ODA */
.partenaire-logo.oda-logo {
    max-width: 300px;
    /* Agrandit particulièrement le logo de l'ODA */
}

/* Responsive */
@media (max-width: 768px) {
    .partenaire-logo {
        max-width: 150px;
        /* Taille réduite des logos sur mobile */
    }

    .partenaires-title {
        font-size: 2rem;
    }
}

/* Ligne de démarcation */
.yellow-divider {
    height: 7px;
    background-color: #efc43d;
    /* Jaune respectant la charte */
    margin: 30px;
    border-radius: 7px;
}

/* ==========================================
   SECTION CAROUSEL
   ========================================== */
.media-carousel-section {
    max-width: 100%;
    /* Empêche le débordement */
    overflow-x: hidden;
    padding: 20px;
    text-align: center;
}

/* Titre du carousel */
.carousel-title {
    font-family: 'Cygre Black';
    font-size: 2.5rem;
    color: #000000;
    margin-bottom: 20px;
}

.carousel-title .highlight{
    color: #efc43d;
    background-color: #000000;
    padding: 0 8px;
    border-radius: 4px;
}

/* Images dans le carousel principal */
.carousel-item img,
.carousel-item video {
    max-height: 400px;
    /* Limite la hauteur */
    width: 100%;
    object-fit: contain;
    /* Préserve les proportions */
    border-radius: 10px;
    /* Coins arrondis */
}

/* Contrôles du carousel */
.carousel-control-prev,
.carousel-control-next {
    top: 50%;
    /* Positionne les boutons au centre verticalement */
    transform: translateY(-50%);
    /* Ajuste pour centrer exactement */
    width: 50px;
    height: 50px;
    background-color: #efc43d;
    /* Couleur jaune */
    border-radius: 50%;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background-color: #000000;
    /* Change la couleur au survol */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    color: #ffffff;
    font-size: 1.5rem;
}


@media (max-width: 768px) {

    .carousel-control-prev,
    .carousel-control-next {
        display: none;
        /* Cache les boutons de navigation sur mobile */
    }
}


/* Miniatures */
.miniature-carousel-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    margin-top: 20px;
}

.miniature-nav {
    background-color: #efc43d;
    border: none;
    color: #ffffff;
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.miniature-nav:hover {
    background-color: #000000;
}

/* Miniatures: Conteneur */
.miniature-carousel-container {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 10px;
    max-width: 400px;
    /* Ajuste la largeur pour afficher moins de miniatures visibles */
    margin: 0 auto;
    justify-content: flex-start;
    /* Aligne les miniatures à gauche */
}

/* Barre de défilement */
.miniature-carousel-container::-webkit-scrollbar {
    height: 10px;
    /* Taille réduite de la scrollbar */
    background-color: #f2f2f2;
}

.miniature-carousel-container::-webkit-scrollbar-thumb {
    background-color: #efc43d;
    border-radius: 10px;
}

.miniature-carousel-container::-webkit-scrollbar-thumb:hover {
    background-color: #000000;
}

/* Miniatures */
.thumbnail {
    flex: 0 0 calc(20% - 10px);
    /* Ajuste la largeur pour afficher 5 miniatures visibles à la fois */
    max-height: 70px;
    /* Taille fixe pour la hauteur des miniatures */
    object-fit: contain;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.thumbnail:hover {
    transform: scale(1.1);
    border-color: #efc43d;
}

.thumbnail.active-thumbnail {
    border-color: #000000;
    /* Bordure noire pour l'actif */
    transform: scale(1.1);
}

/* ==========================================
   SECTION CONTACT (MIS À JOUR)
   ========================================== */
   .contact-section {
    background-color: #ffffff; /* Fond blanc */
    padding: 80px 20px; /* Plus d'espace autour */
}

.contact-title {
    font-family: 'Cygre Black';
    font-size: 3rem; /* Augmenté pour un titre plus grand */
    color: #000000;
    margin-bottom: 25px;
}

.contact-form label {
    font-family: 'Cygre Book';
    font-size: 1.1rem; /* Augmenté pour des labels plus grands */
    color: #000000;
    margin-bottom: 10px; /* Plus d'espacement sous les labels */
    display: block;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    font-family: 'Cygre Book';
    font-size: 1.1rem; /* Augmenté pour des champs plus grands */
    padding: 10px; /* Plus d'espace intérieur */
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 20px; /* Plus d'espace entre les champs */
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    border-color: #efc43d;
    outline: none;
    box-shadow: 0 0 8px rgba(239, 196, 61, 0.6); /* Augmenté pour un effet de focus plus visible */
}

.contact-form .btn-primary {
    background-color: #efc43d;
    color: #000000;
    border: none;
    padding: 15px 30px; /* Plus grand pour correspondre aux champs */
    border-radius: 5px;
    font-family: 'Cygre Black';
    font-size: 1.5rem; /* Augmenté pour un bouton plus visible */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.contact-form .btn-primary:hover {
    background-color: #000000;
    color: #ffffff;
    transform: translateY(-2px); /* Effet de survol */
}

/* Champ Description */
#options-description {
    border: 2px solid #efc43d;
    border-radius: 8px; /* Arrondi légèrement plus prononcé */
    padding: 15px; /* Correspond à la taille des autres champs */
    font-size: 1.2rem; /* Correspond aux autres champs */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#options-description:focus {
    border-color: #000000; /* Bordure noire au focus */
    box-shadow: 0 0 10px rgba(239, 196, 61, 0.5); /* Ombre jaune douce */
}

/* Champs cachés (non modifiés, sauf espacement amélioré) */
.hidden-fields {
    display: none; /* Par défaut, les champs sont cachés */
}

.hidden-fields.active {
    display: block; /* Affiche les champs quand la classe "active" est ajoutée */
    margin-top: 20px; /* Ajoute de l'espace au-dessus */
}

/* Responsive */
@media (max-width: 768px) {
    .contact-title {
        font-size: 2.5rem; /* Taille ajustée pour mobile */
    }

    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        font-size: 1rem; /* Réduction pour mobile */
        padding: 12px;
    }

    .contact-form .btn-primary {
        font-size: 1.2rem; /* Ajustement du bouton pour mobile */
        padding: 12px 25px;
    }

    #options-description {
        font-size: 1rem; /* Correspond aux autres champs sur mobile */
        padding: 12px;
    }
}

.required {
    color: red;
    font-weight: bold;
    margin-left: 5px;
}

.is-invalid {
    border: 2px solid red !important;
    background-color: #ffe5e5 !important;
}

/* ==========================================
   ZOOM IMAGE
   ========================================== */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Fond semi-transparent */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050; /* Par-dessus tout le contenu */
}

.lightbox img {
    max-width: 90%;
    max-height: 80%;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    transform: scale(0.8);
    transition: transform 0.3s ease-in-out; /* Effet de zoom */
}

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

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 1051;
    transition: color 0.3s;
}

.lightbox-close:hover {
    color: #efc43d;
}

#video-lightbox video {
    max-width: 90%;
    max-height: 90%;
    border-radius: 12px;
}


/* Cacher la lightbox par défaut */
.d-none {
    display: none;
}

.highlight-keyword {
    color: #efc43d;
    font-weight: bold;
    background-color: #000000;
    padding: 2px 6px;
    border-radius: 3px;
}

/* ==== NOUVEAUX STYLES POUR OPTIONS AVANCÉES ==== */

/* Quantité d'options */
.option-quantity {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin-top: 10px;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

.option-quantity .form-label {
    font-family: 'Cygre Book';
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.option-quantity .form-select {
    border: 2px solid #efc43d;
    border-radius: 8px;
    font-family: 'Cygre Book';
    transition: all 0.2s ease;
}

.option-quantity .form-select:focus {
    border-color: #efc43d;
    box-shadow: 0 0 0 0.2rem rgba(239, 196, 61, 0.25);
}

/* ==== COMPTEUR PHOTOS ==== */

.photos-counter-container {
    text-align: center;
}

.photos-counter-container .form-label {
    display: block;
    font-family: 'Cygre Black';
    color: #333;
    font-size: 1rem;
    margin-bottom: 20px;
}

.counter-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 15px;
}

.counter-btn {
    width: 50px;
    height: 50px;
    border: 2px solid #efc43d;
    background: linear-gradient(135deg, #efc43d 0%, #d4ac36 100%);
    color: #000000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(239, 196, 61, 0.3);
}

.counter-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(239, 196, 61, 0.4);
    background: linear-gradient(135deg, #d4ac36 0%, #efc43d 100%);
}

.counter-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(239, 196, 61, 0.3);
}

.counter-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 2px 5px rgba(239, 196, 61, 0.2);
}

.counter-display {
    background: #ffffff;
    border: 3px solid #efc43d;
    border-radius: 15px;
    padding: 15px 25px;
    min-width: 160px;
    box-shadow: 0 4px 15px rgba(239, 196, 61, 0.2);
}

.counter-number {
    display: block;
    font-family: 'Cygre Black';
    font-size: 2rem;
    color: #efc43d;
    line-height: 1;
    margin-bottom: 5px;
}

.counter-label {
    display: block;
    font-family: 'Cygre Book';
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 2px;
}

.counter-detail {
    display: block;
    font-family: 'Cygre Book';
    font-size: 0.8rem;
    color: #999;
    font-style: italic;
}

.counter-info {
    text-align: center;
}

.counter-info small {
    font-family: 'Cygre Book';
    color: #666;
}

#photos-total-price {
    font-weight: 600;
    color: #efc43d;
}

/* Responsive pour mobile */
@media (max-width: 768px) {
    .counter-control {
        gap: 15px;
    }
    
    .counter-btn {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
    
    .counter-display {
        min-width: 140px;
        padding: 12px 20px;
    }
    
    .counter-number {
        font-size: 1.8rem;
    }
    
    .counter-label {
        font-size: 0.85rem;
    }
    
    .counter-detail {
        font-size: 0.75rem;
    }
}

/* Informations de distance */
#distance-info .alert {
    border: none;
    border-radius: 8px;
    padding: 10px 15px;
    font-family: 'Cygre Book';
    font-size: 0.9rem;
    margin-bottom: 0;
}

#distance-info .alert-info {
    background-color: #e3f2fd;
    color: #1976d2;
}

#distance-info .alert-warning {
    background-color: #fff3e0;
    color: #f57c00;
}

#distance-info .alert-success {
    background-color: #e8f5e8;
    color: #2e7d32;
}

/* Option de déplacement cachée/visible */
.option-item-simple {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.option-item-simple[style*="display: none"] {
    opacity: 0;
    transform: translateY(-10px);
}

.option-item-simple:not([style*="display: none"]) {
    opacity: 1;
    transform: translateY(0);
}

/* ==== AUTOCOMPLÉTION D'ADRESSE ==== */

.address-autocomplete-container {
    position: relative;
    width: 100%;
}

.address-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 2px solid #efc43d;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 15px rgba(239, 196, 61, 0.3);
    z-index: 1000;
    max-height: 250px;
    overflow-y: auto;
    display: none;
}

.address-suggestion-item {
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    font-family: 'Cygre Book';
    font-size: 0.95rem;
    line-height: 1.4;
    transition: all 0.2s ease;
}

.address-suggestion-item:last-child {
    border-bottom: none;
}

.address-suggestion-item:hover,
.address-suggestion-item.highlighted {
    background-color: #efc43d;
    color: #000000;
    font-weight: 600;
}

.address-suggestion-item .address-main {
    font-weight: 600;
    color: #333;
}

.address-suggestion-item .address-details {
    font-size: 0.85rem;
    color: #666;
    margin-top: 2px;
}

.address-suggestion-item:hover .address-main,
.address-suggestion-item.highlighted .address-main {
    color: #000000;
}

.address-suggestion-item:hover .address-details,
.address-suggestion-item.highlighted .address-details {
    color: #444;
}

.address-loading {
    padding: 15px;
    text-align: center;
    color: #666;
    font-family: 'Cygre Book';
    font-style: italic;
}

.address-no-results {
    padding: 15px;
    text-align: center;
    color: #999;
    font-family: 'Cygre Book';
    font-style: italic;
}

/* Styles pour les nouvelles fonctionnalités d'adresse */
.address-suggestion-item .address-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.address-suggestion-item .source-icon {
    font-size: 14px;
    min-width: 20px;
}

.address-suggestion-item.source-nominatim {
    border-left: 3px solid #28a745; /* Vert pour OpenStreetMap/Nominatim */
}

.address-suggestion-item.source-api-adresse {
    border-left: 3px solid #0066cc; /* Bleu pour API Adresse française */
}

.address-suggestion-item.source-local {
    border-left: 3px solid #8e44ad; /* Violet pour base locale */
}

.address-suggestion-item.source-manual {
    border-left: 3px solid #17a2b8; /* Bleu clair pour saisie manuelle */
}

.address-suggestion-item.source-default {
    border-left: 3px solid #6c757d; /* Gris pour source par défaut */
}

/* Anciennes classes - gardées pour compatibilité */
.address-suggestion-item.source-api {
    border-left: 3px solid #28a745; /* Vert pour les APIs fiables */
}

.address-suggestion-item.source-fallback {
    border-left: 3px solid #ffc107; /* Orange pour fallback */
}

.address-suggestion-item.source-unknown {
    border-left: 3px solid #6c757d; /* Gris pour source inconnue */
}

.verification-badge {
    color: #e67e22;
    font-size: 12px;
    margin-left: auto;
    padding: 2px 6px;
    background: rgba(230, 126, 34, 0.1);
    border-radius: 10px;
    font-family: 'Cygre Book';
}

/* Message d'information pour les adresses */
.address-info-message {
    position: fixed;
    top: 20px;
    right: 20px;
    max-width: 400px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-left: 4px solid #17a2b8;
    border-radius: 6px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    display: none;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease-in-out;
    font-family: 'Cygre Book';
}

.address-info-message.show {
    opacity: 1;
    transform: translateX(0);
}

.address-info-message .message-content {
    margin-bottom: 8px;
}

.address-info-message .message-title {
    font-family: 'Cygre Black';
    font-size: 14px;
    color: #495057;
    margin-bottom: 6px;
}

.address-info-message .message-text {
    font-size: 13px;
    color: #6c757d;
    line-height: 1.4;
}

.address-info-message .message-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 18px;
    color: #adb5bd;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.address-info-message .message-close:hover {
    color: #6c757d;
}

@media (max-width: 768px) {
    .address-info-message {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
}

/* Responsive pour mobile */
@media (max-width: 768px) {
    .address-suggestions {
        max-height: 200px;
        font-size: 0.9rem;
    }
    
    .address-suggestion-item {
        padding: 10px 12px;
    }
    
    .address-suggestion-item .address-main {
        font-size: 0.9rem;
    }
    
    .address-suggestion-item .address-details {
        font-size: 0.8rem;
    }
}

/* Animation d'apparition */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.address-suggestions.show {
    display: block;
    animation: fadeInDown 0.3s ease;
}