/* ===== CSS POUR LES PAGES SEO - LES SECRETS DU SIAM ===== */

/* Variables CSS pour cohérence */
:root {
    --primary-color: #ffb747;
    --primary-dark: #e6a43a;
    --primary-light: #fff4e6;
    --secondary-color: #2c3e50;
    --accent-color: #e74c3c;
    --text-dark: #2c3e50;
    --text-medium: #5a6c7d;
    --text-light: #7f8c8d;
    --white: #ffffff;
    --light-bg: #f8f9fa;
    --border-color: #e9ecef;
    --shadow: 0 2px 10px rgba(0,0,0,0.1);
    --shadow-hover: 0 4px 20px rgba(0,0,0,0.15);
    --border-radius: 8px;
    --transition: all 0.3s ease;
}

/* ===== GUIDE VOYAGE THAILANDE ===== */
.guide-hero {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    padding: 120px 0 80px;
    text-align: center;
}

.guide-hero-content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.guide-hero-content h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 30px;
    opacity: 0.9;
}

.guide-intro {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
    opacity: 0.95;
}

.guide-toc {
    padding: 60px 0;
    background: var(--light-bg);
}

.guide-toc h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 40px;
    color: var(--text-dark);
}

.toc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}

.toc-item {
    background: white;
    padding: 25px;
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--text-dark);
    box-shadow: var(--shadow);
    transition: var(--transition);
    border-left: 4px solid var(--primary-color);
    font-weight: 500;
}

.toc-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    color: var(--primary-color);
}

.guide-content {
    padding: 80px 0;
}

.guide-section {
    margin-bottom: 80px;
}

.guide-section h2 {
    font-size: 2.5rem;
    color: var(--text-dark);
    margin-bottom: 40px;
    border-bottom: 3px solid var(--primary-color);
    padding-bottom: 15px;
}

.guide-section h3 {
    font-size: 1.8rem;
    color: var(--text-dark);
    margin: 30px 0 20px;
}

.guide-text {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-medium);
}

.seasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.season-card {
    background: white;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border-top: 4px solid var(--primary-color);
}

.season-card h4 {
    font-size: 1.5rem;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.season-price {
    display: inline-block;
    background: var(--primary-light);
    color: var(--primary-dark);
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 15px;
}

.budget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.budget-card {
    background: white;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    text-align: center;
    transition: var(--transition);
}

.budget-card.featured {
    border: 2px solid var(--primary-color);
    transform: scale(1.05);
}

.budget-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.budget-card h3 {
    font-size: 1.5rem;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.budget-amount {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.budget-card ul {
    list-style: none;
    padding: 0;
    text-align: left;
}

.budget-card li {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.budget-card li:last-child {
    border-bottom: none;
}

.visa-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin: 40px 0;
}

.visa-card {
    background: white;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border-left: 4px solid var(--primary-color);
}

.visa-card h3 {
    font-size: 1.5rem;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.visa-card ul {
    margin-top: 15px;
}

.guide-cta {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    padding: 60px 0;
    text-align: center;
    margin: 60px 0;
    border-radius: var(--border-radius);
}

.guide-cta h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.guide-cta p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

/* ===== PAGES DESTINATIONS (BANGKOK, CHIANG MAI) ===== */
.destination-hero {
    position: relative;
    height: 70vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.destination-hero .hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.destination-hero .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0,0,0,0.6), rgba(0,0,0,0.3));
    z-index: 2;
}

.destination-hero .container {
    position: relative;
    z-index: 3;
}

.destination-hero .hero-content {
    text-align: center;
    color: white;
    max-width: 800px;
    margin: 0 auto;
}

.destination-hero h1 {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.destination-hero h2 {
    font-size: 1.5rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.hero-features {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 30px 0;
    flex-wrap: wrap;
}

.hero-features span {
    background: rgba(255,255,255,0.2);
    padding: 10px 20px;
    border-radius: 25px;
    backdrop-filter: blur(10px);
    font-weight: 500;
}

.hero-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.hero-price {
    font-size: 1.2rem;
    font-weight: 600;
    background: var(--primary-color);
    color: white;
    padding: 12px 25px;
    border-radius: 25px;
}

.why-destination {
    padding: 80px 0;
    background: var(--light-bg);
}

.why-destination h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 60px;
    color: var(--text-dark);
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
}

.why-item {
    background: white;
    padding: 40px 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    text-align: center;
    transition: var(--transition);
}

.why-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.why-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    display: block;
}

.why-item h3 {
    font-size: 1.5rem;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.why-item p {
    color: var(--text-medium);
    line-height: 1.6;
}

.attractions {
    padding: 80px 0;
}

.attractions h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 60px;
    color: var(--text-dark);
}

.attractions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}

.attraction-card {
    background: white;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border-left: 4px solid var(--primary-color);
    transition: var(--transition);
}

.attraction-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

.attraction-card h3 {
    font-size: 1.3rem;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.attraction-card p {
    color: var(--text-medium);
    line-height: 1.6;
    margin-bottom: 15px;
}

.attraction-time {
    display: inline-block;
    background: var(--primary-light);
    color: var(--primary-dark);
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.9rem;
    font-weight: 500;
}

/* ===== CIRCUITS SECTIONS ===== */
.circuits-bangkok,
.circuits-chiang-mai {
    padding: 80px 0;
    background: var(--light-bg);
}

.circuits-bangkok h2,
.circuits-chiang-mai h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 60px;
    color: var(--text-dark);
}

.circuits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.circuit-card {
    background: white;
    padding: 40px 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    text-align: center;
    transition: var(--transition);
    position: relative;
}

.circuit-card.featured {
    border: 2px solid var(--primary-color);
    transform: scale(1.05);
}

.circuit-card.featured::before {
    content: "POPULAIRE";
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: white;
    padding: 5px 20px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
}

.circuit-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.circuit-card.featured:hover {
    transform: scale(1.05) translateY(-5px);
}

.circuit-card h3 {
    font-size: 1.5rem;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.circuit-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 25px;
}

.circuit-card ul {
    list-style: none;
    padding: 0;
    text-align: left;
    margin-bottom: 30px;
}

.circuit-card li {
    padding: 8px 0;
    color: var(--text-medium);
    border-bottom: 1px solid var(--border-color);
}

.circuit-card li:last-child {
    border-bottom: none;
}

.destination-cta {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    padding: 80px 0;
    text-align: center;
}

.destination-cta h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.destination-cta p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.cta-features {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 30px 0;
    flex-wrap: wrap;
}

.cta-features span {
    background: rgba(255,255,255,0.2);
    padding: 10px 20px;
    border-radius: 25px;
    backdrop-filter: blur(10px);
    font-weight: 500;
}

.btn-large {
    font-size: 1.2rem;
    padding: 15px 40px;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .guide-hero-content h1,
    .destination-hero h1 {
        font-size: 2.5rem;
    }
    
    .guide-hero-content h2,
    .destination-hero h2 {
        font-size: 1.2rem;
    }
    
    .toc-grid,
    .seasons-grid,
    .budget-grid,
    .why-grid,
    .attractions-grid,
    .circuits-grid {
        grid-template-columns: 1fr;
    }
    
    .hero-features,
    .cta-features {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .hero-cta {
        flex-direction: column;
        gap: 15px;
    }
    
    .circuit-card.featured {
        transform: none;
    }
    
    .circuit-card.featured:hover {
        transform: translateY(-5px);
    }
    
    .destination-hero {
        height: 60vh;
        min-height: 500px;
    }
}

/* ===== FAQ PAGE ===== */
.faq-hero {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    padding: 120px 0 80px;
    text-align: center;
}

.faq-hero-content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.faq-hero-content h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 30px;
    opacity: 0.9;
}

.faq-intro {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
    opacity: 0.95;
}

.faq-categories {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 40px 0 60px;
    flex-wrap: wrap;
}

.faq-category {
    background: white;
    color: var(--text-dark);
    padding: 12px 25px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 500;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.faq-category:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

.faq-content {
    padding: 80px 0;
}

.faq-section {
    margin-bottom: 80px;
}

.faq-section h2 {
    font-size: 2.5rem;
    color: var(--text-dark);
    margin-bottom: 40px;
    border-bottom: 3px solid var(--primary-color);
    padding-bottom: 15px;
}

.faq-grid {
    display: grid;
    gap: 30px;
}

.faq-item {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    border-left: 4px solid var(--primary-color);
}

.faq-item h3 {
    background: var(--light-bg);
    padding: 25px 30px;
    margin: 0;
    font-size: 1.3rem;
    color: var(--text-dark);
    cursor: pointer;
    transition: var(--transition);
}

.faq-item h3:hover {
    background: var(--primary-light);
}

.faq-answer {
    padding: 25px 30px;
    color: var(--text-medium);
    line-height: 1.7;
    font-size: 1.1rem;
}

.faq-cta {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    padding: 60px 0;
    text-align: center;
    margin: 60px 0;
    border-radius: var(--border-radius);
}

.faq-cta h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.faq-cta p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

/* ===== AVIS CLIENTS PAGE ===== */
.reviews-hero {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    padding: 120px 0 80px;
    text-align: center;
}

.reviews-hero-content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.reviews-hero-content h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 40px;
    opacity: 0.9;
}

.rating-showcase {
    background: rgba(255,255,255,0.1);
    padding: 30px;
    border-radius: var(--border-radius);
    backdrop-filter: blur(10px);
    max-width: 500px;
    margin: 0 auto;
}

.rating-stars {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.rating-details {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
    font-size: 1.2rem;
}

.rating-score {
    font-weight: 700;
    font-size: 1.5rem;
}

.google-link {
    color: white;
    text-decoration: underline;
    font-weight: 500;
    transition: var(--transition);
}

.google-link:hover {
    opacity: 0.8;
}

.satisfaction-stats {
    padding: 80px 0;
    background: var(--light-bg);
}

.satisfaction-stats h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 60px;
    color: var(--text-dark);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    max-width: 800px;
    margin: 0 auto;
}

.stat-card {
    background: white;
    padding: 40px 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    text-align: center;
    transition: var(--transition);
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
    display: block;
    margin-bottom: 10px;
}

.stat-label {
    color: var(--text-medium);
    font-weight: 500;
}

.reviews-content {
    padding: 80px 0;
}

.reviews-section h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 60px;
    color: var(--text-dark);
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
}

.review-card {
    background: white;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    transition: var(--transition);
    border-left: 4px solid var(--primary-color);
}

.review-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.reviewer-info {
    display: flex;
    gap: 15px;
    align-items: center;
}

.reviewer-avatar {
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
}

.reviewer-name {
    font-size: 1.2rem;
    color: var(--text-dark);
    margin: 0 0 5px 0;
}

.review-trip {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.review-rating .stars {
    color: #ffc107;
    font-size: 1.1rem;
}

.review-source {
    background: var(--primary-light);
    color: var(--primary-dark);
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
}

.review-content p {
    color: var(--text-medium);
    line-height: 1.7;
    font-size: 1.1rem;
    font-style: italic;
}

.reviews-cta {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    padding: 80px 0;
    text-align: center;
    margin-top: 60px;
}

.reviews-cta h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.reviews-cta p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

@media (max-width: 768px) {
    .faq-categories {
        flex-direction: column;
        align-items: center;
    }

    .reviews-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .rating-details {
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .faq-hero,
    .reviews-hero,
    .destination-cta {
        padding: 60px 0 40px;
    }

    .guide-content,
    .why-destination,
    .attractions,
    .circuits-bangkok,
    .circuits-chiang-mai,
    .faq-content,
    .reviews-content {
        padding: 60px 0;
    }

    .guide-section,
    .faq-section {
        margin-bottom: 60px;
    }

    .guide-section h2,
    .faq-section h2 {
        font-size: 2rem;
    }

    .destination-hero h1,
    .faq-hero-content h1,
    .reviews-hero-content h1 {
        font-size: 2rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .reviews-grid {
        grid-template-columns: 1fr;
    }

    .review-header {
        flex-direction: column;
        gap: 15px;
    }
}

/* ===== PAGES LUXE ===== */
.luxury-hero {
    background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(0,0,0,0.4));
}

.luxury-hero .hero-content h1 {
    background: linear-gradient(45deg, #ffd700, #ffb747);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

.luxury-experiences {
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
}

.luxury-card {
    border-left: 4px solid #ffd700;
    background: linear-gradient(135deg, #ffffff, #fefefe);
    position: relative;
    overflow: hidden;
}

.luxury-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #ffd700, #ffb747);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
}

.luxury-card::after {
    content: '💎';
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 1.2rem;
    z-index: 2;
}

.circuits-luxe {
    background: linear-gradient(135deg, #1a1a1a, #2c2c2c);
    color: white;
}

.circuits-luxe h2 {
    color: #ffd700;
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 60px;
}

.luxury-circuit {
    background: linear-gradient(135deg, #2c2c2c, #1a1a1a);
    border: 2px solid #ffd700;
    color: white;
}

.luxury-circuit h3 {
    color: #ffd700;
}

.luxury-circuit .circuit-price {
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.luxury-circuit li {
    border-bottom-color: rgba(255, 215, 0, 0.2);
    color: #e0e0e0;
}

.luxury-circuit .btn {
    background: linear-gradient(135deg, #ffd700, #ffb747);
    color: #1a1a1a;
    font-weight: 600;
}

.luxury-circuit .btn:hover {
    background: linear-gradient(135deg, #ffb747, #ffd700);
    transform: translateY(-2px);
}

.luxury-advantages {
    padding: 80px 0;
    background: var(--light-bg);
}

.luxury-advantages h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 60px;
    color: var(--text-dark);
}

.advantages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
}

.advantage-item {
    background: white;
    padding: 40px 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    text-align: center;
    transition: var(--transition);
    border-top: 4px solid #ffd700;
}

.advantage-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.advantage-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    display: block;
}

.advantage-item h3 {
    font-size: 1.5rem;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.advantage-item p {
    color: var(--text-medium);
    line-height: 1.6;
}

.luxury-cta {
    background: linear-gradient(135deg, #1a1a1a, #2c2c2c);
    color: #ffd700;
}

.luxury-cta h2 {
    color: #ffd700;
}

.luxury-cta p {
    color: #e0e0e0;
}

.luxury-cta .cta-features span {
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.luxury-cta .btn {
    background: linear-gradient(135deg, #ffd700, #ffb747);
    color: #1a1a1a;
    font-weight: 600;
    border: none;
}

.luxury-cta .btn:hover {
    background: linear-gradient(135deg, #ffb747, #ffd700);
    transform: translateY(-2px);
}

/* Animations luxe */
@keyframes luxeShine {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.luxury-card:hover {
    animation: luxeShine 2s ease-in-out;
    background: linear-gradient(90deg, #ffffff, #ffd700, #ffffff);
    background-size: 200% 100%;
}

/* Responsive luxe */
@media (max-width: 768px) {
    .luxury-hero .hero-content h1 {
        font-size: 2.5rem;
    }

    .advantages-grid {
        grid-template-columns: 1fr;
    }

    .circuits-luxe .circuits-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== PAGES FAMILLE ===== */
.family-hero {
    background: linear-gradient(135deg, rgba(255, 183, 71, 0.9), rgba(255, 183, 71, 0.7));
}

.family-hero .hero-content h1 {
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.family-activities {
    background: linear-gradient(135deg, #fff4e6, #ffffff);
}

.family-card {
    border-left: 4px solid #ff6b6b;
    background: linear-gradient(135deg, #ffffff, #fefefe);
    position: relative;
}

.family-card::before {
    content: '👨‍👩‍👧‍👦';
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.5rem;
    opacity: 0.7;
}

.family-card .attraction-time {
    background: #ff6b6b;
    color: white;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.9rem;
    font-weight: 500;
}

.family-tips {
    padding: 80px 0;
    background: var(--light-bg);
}

.family-tips h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 60px;
    color: var(--text-dark);
}

.tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.tip-card {
    background: white;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    transition: var(--transition);
    border-top: 4px solid #ff6b6b;
}

.tip-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.tip-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
    display: block;
    text-align: center;
}

.tip-card h3 {
    font-size: 1.3rem;
    color: var(--text-dark);
    margin-bottom: 20px;
    text-align: center;
}

.tip-card ul {
    list-style: none;
    padding: 0;
}

.tip-card li {
    padding: 8px 0;
    color: var(--text-medium);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    padding-left: 25px;
}

.tip-card li:last-child {
    border-bottom: none;
}

.tip-card li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #ff6b6b;
    font-weight: bold;
}

.circuits-famille {
    padding: 80px 0;
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    color: white;
}

.circuits-famille h2 {
    color: white;
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 60px;
}

.family-circuit {
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-dark);
    border: 2px solid white;
}

.family-circuit h3 {
    color: #ff6b6b;
}

.family-circuit .circuit-price {
    color: #ff6b6b;
}

.family-circuit li {
    border-bottom-color: rgba(255, 107, 107, 0.2);
}

.family-circuit .btn {
    background: #ff6b6b;
    color: white;
    border: none;
}

.family-circuit .btn:hover {
    background: #ff5252;
    transform: translateY(-2px);
}

.family-cta {
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    color: white;
}

.family-cta h2 {
    color: white;
}

.family-cta .cta-features span {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.family-cta .btn {
    background: white;
    color: #ff6b6b;
    font-weight: 600;
    border: none;
}

.family-cta .btn:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
}

/* Responsive famille */
@media (max-width: 768px) {
    .tips-grid {
        grid-template-columns: 1fr;
    }

    .family-hero .hero-content h1 {
        font-size: 2.5rem;
    }
}

/* ===== ANIMATIONS GÉNÉRALES ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.attraction-card,
.circuit-card,
.tip-card,
.why-item {
    animation: fadeInUp 0.6s ease-out;
}

.attraction-card:nth-child(2) { animation-delay: 0.1s; }
.attraction-card:nth-child(3) { animation-delay: 0.2s; }
.attraction-card:nth-child(4) { animation-delay: 0.3s; }
.attraction-card:nth-child(5) { animation-delay: 0.4s; }
.attraction-card:nth-child(6) { animation-delay: 0.5s; }

/* Hover effects améliorés */
.btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

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

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

/* Améliorations accessibilité */
.btn:focus,
.toc-item:focus,
.faq-category:focus {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .hero-overlay,
    .btn,
    .cta-features,
    .breadcrumbs {
        display: none !important;
    }

    .hero-content h1,
    .hero-content h2 {
        color: black !important;
    }

    .attraction-card,
    .circuit-card {
        break-inside: avoid;
        margin-bottom: 20px;
    }
}

/* ===== ARTICLES DE BLOG ===== */
.blog-article {
    background: white;
}

.article-hero {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    padding: 120px 0 80px;
}

.article-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    align-items: center;
}

.article-category {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
}

.article-date {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.article-hero h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 25px;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.article-intro {
    font-size: 1.3rem;
    line-height: 1.6;
    margin-bottom: 30px;
    opacity: 0.95;
    max-width: 800px;
}

.article-author {
    display: flex;
    gap: 20px;
    align-items: center;
    font-size: 1rem;
    opacity: 0.9;
}

.reading-time {
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.9rem;
}

.article-content {
    padding: 80px 0;
}

.content-section {
    margin-bottom: 60px;
}

.content-section h2 {
    font-size: 2.5rem;
    color: var(--text-dark);
    margin-bottom: 30px;
    border-bottom: 3px solid var(--primary-color);
    padding-bottom: 15px;
}

.content-section h3 {
    font-size: 1.8rem;
    color: var(--text-dark);
    margin: 30px 0 20px;
}

.content-section h4 {
    font-size: 1.4rem;
    color: var(--text-dark);
    margin: 25px 0 15px;
}

.lead {
    font-size: 1.3rem;
    line-height: 1.7;
    color: var(--text-medium);
    font-weight: 500;
    margin-bottom: 40px;
    padding: 30px;
    background: var(--light-bg);
    border-left: 4px solid var(--primary-color);
    border-radius: var(--border-radius);
}

/* Saisons détaillées */
.seasons-detailed {
    display: grid;
    gap: 40px;
}

.season-block {
    background: white;
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border-left: 6px solid var(--primary-color);
}

.season-highlights {
    display: flex;
    gap: 15px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.highlight {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

.highlight.best {
    background: #d4edda;
    color: #155724;
}

.highlight.temp {
    background: #fff3cd;
    color: #856404;
}

.highlight.rain {
    background: #cce7ff;
    color: #004085;
}

.highlight.hot {
    background: #f8d7da;
    color: #721c24;
}

.highlight.dry {
    background: #e2e3e5;
    color: #383d41;
}

.highlight.price {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.highlight.green {
    background: #d1ecf1;
    color: #0c5460;
}

.highlight.cheap {
    background: #d4edda;
    color: #155724;
}

/* Régions grid */
.regions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.region-card {
    background: white;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border-top: 4px solid var(--primary-color);
}

.region-card h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
}

/* Conseils experts */
.expert-tips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.tip-box {
    background: var(--light-bg);
    padding: 25px;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
}

.tip-box.important {
    border-left-color: #dc3545;
    background: #fff5f5;
}

.tip-box h4 {
    color: var(--text-dark);
    margin-bottom: 15px;
    font-size: 1.2rem;
}

/* Plages secrètes */
.beaches-list {
    display: grid;
    gap: 30px;
}

.beach-item {
    display: flex;
    gap: 25px;
    background: white;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.beach-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

.beach-number {
    background: var(--primary-color);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
}

.beach-content h3 {
    color: var(--text-dark);
    margin-bottom: 15px;
}

.beach-tags {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.tag {
    background: var(--primary-light);
    color: var(--primary-dark);
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Conseils d'accès */
.access-tips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.tip-card {
    background: white;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border-top: 4px solid var(--primary-color);
}

.tip-card h4 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

/* Conseils pratiques */
.practical-tips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* Cuisine - Plats grid */
.dishes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.dish-card {
    background: white;
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border-left: 4px solid var(--primary-color);
    position: relative;
}

.dish-card h3 {
    color: var(--text-dark);
    margin-bottom: 15px;
}

.spice-level {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--primary-light);
    color: var(--primary-dark);
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Street food guide */
.streetfood-guide {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.guide-section {
    background: var(--light-bg);
    padding: 30px;
    border-radius: var(--border-radius);
    border-top: 4px solid var(--primary-color);
}

.guide-section h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
}

/* Marchés */
.markets-list {
    display: grid;
    gap: 30px;
}

.market-card {
    background: white;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border-left: 4px solid var(--primary-color);
}

.market-card h3 {
    color: var(--text-dark);
    margin-bottom: 15px;
}

.market-highlights {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

/* Cours de cuisine */
.cooking-classes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.class-card {
    background: white;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border-top: 4px solid var(--primary-color);
}

.class-card.featured {
    border-top-color: #28a745;
    background: linear-gradient(135deg, #ffffff, #f8fff9);
}

.class-card h3 {
    color: var(--text-dark);
    margin-bottom: 15px;
}

.class-features {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.feature {
    background: #d4edda;
    color: #155724;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Conseils alimentation */
.eating-tips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.tip-category {
    background: var(--light-bg);
    padding: 25px;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary-color);
}

.tip-category h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
}

/* CTA article */
.article-cta {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    padding: 60px 40px;
    border-radius: var(--border-radius);
    text-align: center;
    margin-top: 60px;
}

.article-cta h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.article-cta p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.article-cta .btn {
    background: white;
    color: var(--primary-color);
    font-weight: 600;
    padding: 15px 30px;
    font-size: 1.1rem;
}

.article-cta .btn:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
}

/* Responsive articles */
@media (max-width: 768px) {
    .article-hero h1 {
        font-size: 2.5rem;
    }

    .article-meta {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .article-author {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .beach-item {
        flex-direction: column;
        gap: 20px;
    }

    .seasons-detailed,
    .regions-grid,
    .expert-tips,
    .dishes-grid,
    .streetfood-guide,
    .cooking-classes,
    .eating-tips {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .article-hero {
        padding: 80px 0 60px;
    }

    .article-content {
        padding: 60px 0;
    }

    .article-hero h1 {
        font-size: 2rem;
    }

    .content-section h2 {
        font-size: 2rem;
    }

    .article-cta {
        padding: 40px 20px;
    }

    .article-cta h2 {
        font-size: 2rem;
    }
}

/* ===== STYLES SPÉCIFIQUES ARTICLES ===== */

/* Budget profiles */
.budget-profiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.budget-card {
    background: white;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    text-align: center;
    transition: var(--transition);
}

.budget-card.backpacker {
    border-top: 4px solid #28a745;
}

.budget-card.comfort {
    border-top: 4px solid var(--primary-color);
}

.budget-card.comfort.featured {
    transform: scale(1.05);
    border: 2px solid var(--primary-color);
}

.budget-card.luxury {
    border-top: 4px solid #6f42c1;
}

.budget-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.budget-card.comfort.featured:hover {
    transform: scale(1.05) translateY(-5px);
}

.budget-amount {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 20px 0;
}

.budget-card.backpacker .budget-amount {
    color: #28a745;
}

.budget-card.luxury .budget-amount {
    color: #6f42c1;
}

.budget-tips {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap;
}

.budget-tips .tip {
    background: var(--primary-light);
    color: var(--primary-dark);
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Cost breakdown */
.cost-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.cost-category {
    background: white;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border-left: 4px solid var(--primary-color);
}

.cost-category h3 {
    color: var(--primary-color);
    margin-bottom: 25px;
    font-size: 1.5rem;
}

.cost-items {
    display: grid;
    gap: 15px;
}

.cost-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

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

.item-name {
    color: var(--text-medium);
    flex: 1;
}

.item-price {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 1.1rem;
}

/* Saving tips */
.saving-tips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

/* Budget examples */
.budget-examples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.budget-example {
    background: white;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border-top: 4px solid var(--primary-color);
}

.budget-example h3 {
    color: var(--text-dark);
    margin-bottom: 20px;
}

.example-total {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 25px;
    text-align: center;
    padding: 15px;
    background: var(--primary-light);
    border-radius: var(--border-radius);
}

/* Temples styles */
.temples-list {
    display: grid;
    gap: 30px;
}

.temple-card {
    display: flex;
    gap: 25px;
    background: white;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.temple-card.featured {
    border: 2px solid var(--primary-color);
    background: linear-gradient(135deg, #ffffff, #fff9f0);
}

.temple-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

.temple-rank {
    background: var(--primary-color);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.temple-content h3 {
    color: var(--text-dark);
    margin-bottom: 15px;
}

.temple-tips {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    flex-wrap: wrap;
}

/* Protocols grid */
.protocols-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.protocol-card {
    background: white;
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border-left: 4px solid var(--primary-color);
}

.protocol-card h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
}

/* Architecture guide */
.architecture-guide {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.arch-element {
    background: var(--light-bg);
    padding: 25px;
    border-radius: var(--border-radius);
    border-top: 4px solid var(--primary-color);
}

.arch-element h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
}

/* Practical advice */
.practical-advice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.advice-card {
    background: white;
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border-left: 4px solid var(--primary-color);
}

.advice-card h4 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

/* Family benefits */
.family-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.benefit-card {
    background: white;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    text-align: center;
    transition: var(--transition);
    border-top: 4px solid #ff6b6b;
}

.benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.benefit-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    display: block;
}

.benefit-card h3 {
    color: var(--text-dark);
    margin-bottom: 15px;
}

/* Age activities */
.age-activities {
    display: grid;
    gap: 30px;
}

.age-group {
    background: white;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border-left: 4px solid #ff6b6b;
}

.age-group h3 {
    color: #ff6b6b;
    margin-bottom: 20px;
}

/* Accommodation types */
.accommodation-types {
    display: grid;
    gap: 30px;
}

.accom-card {
    background: white;
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border-left: 4px solid var(--primary-color);
}

.accom-card h3 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

/* Health safety */
.health-safety {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.health-card {
    background: white;
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border-left: 4px solid #28a745;
}

.health-card.important {
    border-left-color: #dc3545;
    background: #fff5f5;
}

.health-card h3 {
    color: #28a745;
    margin-bottom: 20px;
}

.health-card.important h3 {
    color: #dc3545;
}

/* Budget breakdown famille */
.budget-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.budget-category {
    background: white;
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border-left: 4px solid var(--primary-color);
}

.budget-category h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
}

/* Responsive pour articles spécifiques */
@media (max-width: 768px) {
    .temple-card {
        flex-direction: column;
        gap: 20px;
    }

    .temple-rank {
        align-self: flex-start;
    }

    .budget-profiles,
    .cost-breakdown,
    .saving-tips,
    .budget-examples,
    .protocols-grid,
    .architecture-guide,
    .practical-advice,
    .family-benefits,
    .accommodation-types,
    .health-safety,
    .budget-breakdown {
        grid-template-columns: 1fr;
    }

    .budget-card.comfort.featured {
        transform: none;
    }

    .budget-card.comfort.featured:hover {
        transform: translateY(-5px);
    }
}