/*
====================================================
  main.css — VoyaGéoNat
  Optimisé et réorganisé par section fonctionnelle
  Palette verte/violette, boutons standardisés
====================================================

  Structure :
  1. Variables globales et règles de base
  2. Typographie
  3. Utilitaires (couleurs, ombres, etc.)
  4. Composants de base (boutons, liens, cartes)
  5. Navigation (desktop et mobile)
  6. Layout spécifiques (carte interactive, colonnes)
  7. Composants spécifiques (flip-card, carousel, modal)
  8. Animations et effets
  9. Media queries
====================================================
*/

/* ================================================
   1. Variables globales et règles de base
================================================ */
:root {
    /* Couleurs primaires */
    --color-green: #5c7636;
    --color-purple: #805774;
    --color-light-green: #a8c082;
    
    /* Couleurs secondaires */
    --color-dark-green: #4a5f2b;
    --color-dark-purple: #6d4862;
    --color-dark-light-green: #8a9d6b;
    --color-light-green-transparent: rgba(168, 192, 130, 0.8);
    
    /* Effets et dimensions */
    --transition-default: 0.3s ease;
    --box-shadow-default: 0 2px 4px rgba(0, 0, 0, 0.1);
    --box-shadow-hover: 0 4px 6px rgba(0, 0, 0, 0.1);
    --box-shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    --border-radius-default: 0.5rem;
    
    /* Espacements standards */
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
}

/* Règles universelles responsive */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    background-color: white;
    font-family: 'Lora', serif;
}

img, svg, video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ================================================
   2. Typographie
================================================ */
h1, h2, h3, h4 {
    font-family: 'Alex Brush', cursive;
}

h5, h6, p {
    font-family: 'Lora', serif;
}

ul, ol, li, 
ul li, 
ol li{
    font-family: 'Lora', serif !important;
}

h4 { color: var(--color-purple); }
h5 { color: var(--color-light-green); }
h6 { color: var(--color-green); }

.text-justify { text-align: justify; }

/* Textes en couleur et gras - Regroupés en une classe unifiée avec des modificateurs */
.text-bold {
    font-weight: 900;
    text-rendering: optimizeLegibility;
}

.text-bold--purple,
.custom-purple,
.purple-bold-text {
    color: var(--color-purple);
    font-weight: 900;
    text-rendering: optimizeLegibility;
}

.text-bold--green,
.custom-green,
.green-bold-text {
    color: var(--color-green);
    font-weight: 900;
    text-rendering: optimizeLegibility;
}

.text-bold--light-green,
.custom-light-green,
.light-green-bold-text {
    color: var(--color-light-green);
    font-weight: 900;
    text-rendering: optimizeLegibility;
}

li span.green-bold-text { 
    font-family: 'Lora', serif;
}

/* Style spécifique pour les listes de la FAQ */
.faq-content ul.list-disc li {
    font-family: 'Lora', serif !important;
    font-size: 1rem;
    line-height: 1.5;
}

/* ================================================
   3. Utilitaires (couleurs, ombres, etc.)
================================================ */
/* Backgrounds */
.bg-custom-green { background-color: var(--color-green); }
.bg-custom-purple { background-color: var(--color-purple); }
.bg-custom-light-green { background-color: var(--color-light-green); }
.bg-custom-light-green-transparent { background-color: var(--color-light-green-transparent); }
.bg-custom-dark-purple { background-color: var(--color-dark-purple); }

/* Bordures */
.border-custom-green { border-color: var(--color-green); }
.border-custom-purple { border-color: var(--color-purple); }
.border-custom-light-green { border-color: var(--color-light-green); }
.border-custom-light-green-transparent { 
    border-color: rgba(168, 192, 130, 0.3);
    transition: border-color var(--transition-default);
}

/* Ombres */
.shadow-custom {
    box-shadow: var(--box-shadow-default);
    transition: box-shadow var(--transition-default);
}

.shadow-custom-green { box-shadow: 0 10px 15px -3px rgba(92, 118, 54, 0.3); }
.shadow-custom-purple { box-shadow: 0 10px 15px -3px rgba(128, 87, 116, 0.3); }
.shadow-custom-light-green { box-shadow: 0 10px 15px -3px rgba(168, 192, 130, 0.3); }

.hover\:shadow-custom-green:hover { box-shadow: 0 20px 25px -5px rgba(92, 118, 54, 0.6); }
.hover\:shadow-custom-purple:hover { box-shadow: 0 20px 25px -5px rgba(128, 87, 116, 0.6); }
.hover\:shadow-custom-light-green:hover { box-shadow: 0 20px 25px -5px rgba(168, 192, 130, 0.6); }

/* ================================================
   4. Composants de base (boutons, liens, cartes)
================================================ */
/* Logo */
.logo { 
    position: relative; 
    z-index: 100; 
}

.logo img { 
    transition: transform var(--transition-default); 
}

.logo:hover img { 
    transform: scale(2); 
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo img { 
        image-rendering: crisp-edges; 
    }
}

/* Boutons standardisés - structure commune */
.btn { 
    text-align: center;
    display: inline-block; 
    padding: 0.75rem 1.5rem; 
    border-radius: 0.375rem; 
    transition: all var(--transition-default);
    color: white;
}

/* Forcer le texte blanc sur tous les boutons colorés */
.btn,
.btn-vert,
.btn-violet,
.btn-vert-clair,
#departmentContent .btn {
    color: white !important;
}
/* Variantes de boutons */
.btn-vert { 
    background-color: var(--color-green); 
}

.btn-vert:hover { 
    background-color: var(--color-dark-green); 
}

.btn-violet { 
    background-color: var(--color-purple); 
}

.btn-violet:hover { 
    background-color: var(--color-dark-purple); 
}

.btn-vert-clair { 
    background-color: var(--color-light-green); 
}

.btn-vert-clair:hover { 
    background-color: var(--color-dark-light-green); 
}

/* Boutons contextuels */
#departmentContent .btn { 
    background-color: var(--color-purple); 
}

#departmentContent .btn:hover { 
    background-color: var(--color-dark-purple); 
}

@media (forced-colors: active) {
    .btn-vert, .btn-violet, .btn-vert-clair { 
        forced-color-adjust: none; 
    }
}

/* Liens spéciaux */
.contact-link { 
    transition: color var(--transition-default);
}

.contact-link:hover { 
    border-bottom: 1px solid; 
}

/* Boutons de retour */
.back-button,
.back-arrow {
    transition: all var(--transition-default);
}

.back-button { 
    display: inline-flex; 
    align-items: center; 
    gap: 0.5rem;
    font-weight: 500; 
    margin-bottom: 1rem; 
    padding: 0.5rem 0; 
}

.back-button svg,
.back-arrow { 
    transition: transform var(--transition-default);
}

.back-button:hover svg,
.back-arrow:hover { 
    transform: translateX(-5px); 
}

.back-arrow {
    font-size: 2.5rem;
    color: var(--color-purple);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 20;
    line-height: 1;
    padding: 0;
    position: absolute;
    top: 10px;
    right: 10px;
}

.back-arrow:hover {
    opacity: 0.7;
}

/* Cartes standards */
.card {
    background-color: white;
    border-radius: var(--border-radius-default);
    box-shadow: var(--box-shadow-default);
    transition: var(--transition-default);
}

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

/* Blog cards */
.blog-card img {
    transition: transform var(--transition-default);
}

.blog-card:hover img {
    transform: scale(1.05);
}

/* Styles spécifiques pour les titres des offres principales */
.grid.md\:grid-cols-3 > div > .bg-custom-green, 
.grid.md\:grid-cols-3 > div > .bg-custom-purple, 
.grid.md\:grid-cols-3 > div > .bg-custom-light-green {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 9rem;
}

.grid.md\:grid-cols-3 > div > .bg-custom-green h3, 
.grid.md\:grid-cols-3 > div > .bg-custom-purple h3, 
.grid.md\:grid-cols-3 > div > .bg-custom-light-green h3 {
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    height: auto;
    display: block;
    max-height: 3.6em;
    overflow: hidden;
}

/* Styles pour le séparateur des offres spéciales */
.special-offer-card .h-1 {
    height: 0.25rem;
    width: 4rem;
    margin: 1rem 0;
}

/* ================================================
   5. Navigation (desktop et mobile)
================================================ */
/* Header et navigation principale */
header {
    position: relative;
    background-color: var(--color-green);
    color: white;
    z-index: 10;
}

nav {
    position: relative;
    z-index: 1;
}

.nav-link,
.footer-link,
.mobile-nav-link {
    color: white;
    transition: color var(--transition-default);
}

.nav-link {
    font-family: 'Lora', cursive;
}

.nav-link:hover,
.footer-link:hover {
    border-bottom: 1px solid white;
}

/* Menu mobile unifié */
#mobile-menu,
.mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9;
    width: 100%;
    padding: 0 1rem;
    transition: opacity var(--transition-default), transform var(--transition-default);
    opacity: 0;
    transform: translateY(-10px);
    display: none;
}

#mobile-menu.show,
.mobile-menu.active {
    opacity: 1;
    transform: translateY(0);
    display: block;
}

.menu-container {
    background-color: var(--color-purple);
    color: white;
    border-radius: var(--border-radius-default);
    box-shadow: var(--box-shadow-default);
    padding: 0.5rem;
    margin-top: 0.5rem;
}

.mobile-nav-link {
    color: white;
    font-weight: 500;
    transition: all var(--transition-default);
    border-radius: 4px;
    margin-bottom: 2px;
}

.mobile-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.mobile-nav-link.current {
    background-color: var(--color-light-green);
    color: var(--color-green);
    font-weight: 600;
}

.mobile-nav-link.current i {
    color: var(--color-green);
}

.mobile-nav-link:hover .border-custom-light-green-transparent {
    border-color: var(--color-purple);
}

/* ================================================
   6. Layout spécifiques (carte interactive, colonnes, carrousels)
================================================ */

/* Styles pour le carrousel des avis clients */
.avis-carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 1rem 0;
}

.avis-carousel-track {
    display: flex;
    transition: transform 0.3s ease;
    width: 100%;
    /* Permettre au track de s'étendre pour accueillir les clones */
    will-change: transform;
}

.avis-carousel-slide {
    flex: 0 0 100%;
    padding: 0 0.5rem;
    box-sizing: border-box;
}

/* Flèches de navigation du carrousel */
.avis-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--color-dark-green);
    color: white;
    border: none;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    opacity: 0.9;
    /* Empêcher les clics multiples rapides */
    user-select: none;
}

.avis-carousel-arrow:hover {
    background-color: var(--color-green);
    transform: translateY(-50%) scale(1.1);
}

.avis-carousel-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

.avis-carousel-arrow.left-arrow {
    left: 1rem;
}

.avis-carousel-arrow.right-arrow {
    right: 1rem;
}

/* Ajustements pour les écrans de taille moyenne */
@media (min-width: 768px) {
    .avis-carousel-slide {
        flex: 0 0 50%;
    }
}

/* Ajustements pour les grands écrans */
@media (min-width: 1024px) {
    .avis-carousel-slide {
        flex: 0 0 33.333%;
    }
}

/* Styles pour mobile */
@media (max-width: 767px) {
    .avis-carousel-arrow {
        display: flex; /* Afficher les flèches sur mobile */
        width: 2rem;
        height: 2rem;
        background-color: rgba(92, 118, 54, 0.8); /* Fond semi-transparent */
    }
    
    .avis-carousel-arrow.left-arrow {
        left: 0.5rem;
    }
    
    .avis-carousel-arrow.right-arrow {
        right: 0.5rem;
    }
    
    .avis-carousel-slide {
        padding: 0 0.25rem;
    }
    
    .avis-carousel-container {
        padding: 1rem 0.5rem;
    }
}

/* Style pour les cartes d'avis */
.avis-carousel-slide > div {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.avis-carousel-slide p {
    flex-grow: 1;
}

/* Optimisations de performance pour le carrousel infini */
.avis-carousel-track {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

/* Conteneurs */
.container-map {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Section de la carte interactive */
.map-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    width: 100%;
    height: 100%;
    padding: 1rem;
}

.map-column,
.info-column {
    width: 100%;
    position: relative;
}

.info-column {
    height: fit-content;
    max-height: max-content;
}

/* Conteneur de la carte */
.map-container {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.svg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map {
    width: 100%;
    height: 100%;
    display: block;
    stroke: white;
    stroke-width: 1.5px;
    transition: all var(--transition-default);
}

/* Styles des départements */
.department {
    transition: all var(--transition-default);
    cursor: pointer;
    position: relative;
    z-index: 1;
    fill: var(--color-light-green);
}

.department:hover {
    fill: var(--color-purple);
    filter: brightness(1.1);
}

/* Panneau d'information */
.content-box {
    background: var(--color-light-green-transparent);
    padding: 1.5rem;
    border-radius: var(--border-radius-default);
    height: 100%;
    color: white;
}

#departmentInfo {
    opacity: 1;
    height: 100%;
}

#departmentInfo.visible {
    opacity: 1;
}

/* Tooltip */
.tooltip {
    position: fixed;
    padding: 10px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    pointer-events: none;
    z-index: 9999;
    box-shadow: var(--box-shadow-default);
    display: none;
}

.tooltip.visible {
    display: block;
}

/* Section à deux colonnes */
.section-besoin {
    display: flex;
    gap: 20px;
}

.left-column {
    flex: 2;
}

.right-column {
    flex: 1;
}

.right-column img {
    width: auto;
    height: 200px;
}

/* Ajustements pour le texte dans la colonne de droite */
.info-column h2, 
.info-column p {
    color: white;
}

/* Ajustements pour le contenu */
#defaultContent,
#departmentContent {
    background: var(--color-light-green-transparent);
}

/* Texte du contenu des départements */
#departmentContent h4 {
    color: var(--color-purple);
    font-size: 2rem;
}

#departmentContent p {
    color: white;
}

/* Style pour le titre des départements */
#departmentContent h3 {
    display: block;
    background-color: var(--color-green);
    padding: 0.5rem 1.5rem;
    border-radius: var(--border-radius-default);
    margin: 0 auto 1rem auto;
    max-width: 62%;
    text-align: center;
    color: white;
    font-weight: 500;
    box-shadow: var(--box-shadow-default);
    font-family: 'Lora', serif;
    overflow-wrap: break-word;
}

/* Égaliser les colonnes du tableau comparatif */
.travel-planner-comparison table {
    table-layout: fixed;
    width: 100%;
}

.travel-planner-comparison th,
.travel-planner-comparison td {
    width: 50%;
}

/* ================================================
   7. Composants spécifiques (flip-card, carousel, modal)
================================================ */
/* Cartes retournables (Flip Cards) - structure de base */
.flip-card {
    perspective: 1000px;
    height: 100%;
    min-height: 550px;
    display: flex;
    flex-direction: column;
}

/* Conteneur principal - élément qui tourne */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: left;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    border-radius: var(--border-radius-default);
    flex: 1;
}

.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

/* Faces avant et arrière - styles communs */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: var(--border-radius-default);
    display: flex;
    flex-direction: column;
    background-color: white;
}

/* Structure commune pour les cartes */
.flip-card-front > div, 
.flip-card-back > div,
.special-offer-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Structure pour le contenu et les boutons */
.flip-card-front > div .relative.z-10.flex-grow,
.flip-card-back > div .flex-grow,
.special-offer-card .content-wrapper {
    flex: 1 1 auto;
}

.flip-card-front > div .mt-auto,
.flip-card-back > div .mt-2,
.special-offer-card .button-wrapper {
    margin-top: auto;
}

/* Zone de contenu défilant */
.flip-card-back .scrollbar-thin {
    flex: 1;
    overflow-y: auto;
    max-height: calc(100% - 120px);
}

/* Positionnement du bouton de retour */
.flip-card-back .back-button {
    position: static;
    margin-top: auto;
}

/* Face avant */
.flip-card-front {
    z-index: 2;
}

/* Face arrière (retournée) */
.flip-card-back {
    transform: rotateY(180deg);
    overflow: hidden;
}

/* Carrousel */
.carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    width: 100%;
    transition: transform 0.3s ease;
}

.carousel-slide {
    flex: 0 0 100%;
    padding: 0 1rem;
}

/* Flèches de navigation du carrousel */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    transition: all var(--transition-default);
    background-color: var(--color-purple);
    color: white;
    padding: 1rem;
    border-radius: 50%;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.carousel-arrow:hover {
    background-color: var(--color-dark-purple);
}

.carousel-arrow i {
    font-size: 1.5rem;
    color: inherit;
}

/* FAQ Accordéon */
.faq-item .faq-answer,
.accordion-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all var(--transition-default);
}

.faq-item.active .faq-answer,
.accordion-content.open {
    max-height: 500px;
    opacity: 1;
}

/* Accordéon général */
.accordion-item {
    overflow: hidden;
}

.accordion-button {
    position: relative;
    transition: all var(--transition-default);
}

.accordion-button::after {
    content: '\f107'; /* Icône flèche vers le bas */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 1rem;
    transition: transform var(--transition-default);
}

.accordion-button.open::after {
    transform: rotate(180deg);
}

/* Modal de partage */
.share-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.share-modal.active {
    display: flex;
}

.share-modal-content {
    background-color: white;
    padding: 2rem;
    border-radius: var(--border-radius-default);
    max-width: 90%;
    width: 500px;
    box-shadow: var(--box-shadow-default);
    position: relative;
}

.share-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
    transition: color var(--transition-default);
}

.share-modal-close:hover {
    color: #333;
}

.share-modal-title {
    margin-bottom: 1.5rem;
    color: #333;
    font-size: 1.5rem;
    font-weight: 600;
}

.share-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    justify-content: center;
}

.share-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-default);
    color: white;
    text-decoration: none;
    transition: opacity var(--transition-default);
}

.share-option:hover {
    opacity: 0.9;
}

.share-option svg {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
}

/* Personnalisation des barres de défilement */
.overflow-auto,
.scrollbar-thin {
    scrollbar-width: thin;
    overscroll-behavior: contain;
}

.overflow-auto::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.overflow-auto::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.overflow-auto::-webkit-scrollbar-thumb {
    background: var(--color-purple);
    border-radius: 10px;
}

.overflow-auto::-webkit-scrollbar-thumb:hover {
    background: var(--color-dark-purple);
}

/* Styles pour la barre de défilement fine */
.scrollbar-thin::-webkit-scrollbar {
    width: 4px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Footer */
.social-icon {
    color: white;
    transition: color var(--transition-default);
}

.social-icon:hover {
    color: var(--color-light-green);
}

footer img {
    height: auto; 
    width: 200px;
    max-width: 100%;
    border-radius: 10px;
}

/* ================================================
   8. Animations et effets
================================================ */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity var(--transition-default), transform var(--transition-default);
    animation: fadeIn var(--transition-default);
}


/* ================================================
   9. Media queries
================================================ */

/* Media queries pour affichage mobile (max-width: 759px) */
@media (max-width: 759px) { 
    .map-layout {
        grid-template-columns: 1fr;
    }
    
    .map-container {
        min-width: unset;
    }
    
    .info-column {
        max-width: 100%;
    }
    
    .map {
        transform: scale(1);
    }
}

/* Media query pour les appareils en mode portrait */
@media screen and (orientation: portrait) and (max-width: 759px) {
    .flip-card, .special-offer-card {
        height: auto;
        min-height: 400px;
        margin-bottom: 1.5rem;
    }

    .flip-card-inner {
        min-height: 400px;
    }

    .flip-card-front,
    .flip-card-back {
        min-height: 400px;
        height: 100%;
    }

    .flip-card-front > div,
    .flip-card-back > div {
        padding: 1.25rem;
    }

    /* Ajustement des titres pour la version mobile */
    .grid.md\:grid-cols-3 > div > .bg-custom-green h3,
    .grid.md\:grid-cols-3 > div > .bg-custom-purple h3,
    .grid.md\:grid-cols-3 > div > .bg-custom-light-green h3 {
        font-size: 1.75rem;
        line-height: 1.2;
        margin-bottom: 0.5rem;
    }

    /* Ajustement du contenu pour la version mobile */
    .flip-card-back .scrollbar-thin {
        max-height: none;
        padding: 0.5rem 0;
    }

    /* Optimisation de l'espacement */
    .grid.md\:grid-cols-3 {
        gap: 1rem;
    }
}

/* Media queries pour les carrousels */
@media (min-width: 759px) {
    .carousel-slide {
        flex: 0 0 50%;
    }
}

@media (min-width: 1025px) {
    .carousel-slide {
        flex: 0 0 33.333%;
    }
}

/* Media queries pour les tablettes */
@media (min-width: 759px) and (max-width: 1024px) {
    /* Ajustements responsive pour les titres des offres */
    .grid.md\:grid-cols-3 > div > .bg-custom-green h3, 
    .grid.md\:grid-cols-3 > div > .bg-custom-purple h3, 
    .grid.md\:grid-cols-3 > div > .bg-custom-light-green h3 {
        font-size: 2rem;
        line-height: 1.3;
        max-height: 2.6em;
    }
    
    .grid.md\:grid-cols-3 > div > .bg-custom-green, 
    .grid.md\:grid-cols-3 > div > .bg-custom-purple, 
    .grid.md\:grid-cols-3 > div > .bg-custom-light-green {
        padding: 1.25rem 1rem;
    }

    /* Styles spécifiques pour tablette */
    .map-layout {
        grid-template-columns: 3fr 2fr;
        gap: 1.5rem;
    }
    
    .map-container {
        padding-bottom: 90%;
    }
    
    .info-column {
        max-width: 100%;
    }
    
    /* Ajustement du carousel pour afficher 2 cartes sur tablette */
    .carousel-slide {
        width: 50%;
    }
    
    /* Ajustement des grilles pour 2 colonnes sur tablette */
    .grid-cols-1.md\:grid-cols-3,
    .md\:grid-cols-3,
    .grid-cols-1.md\:grid-cols-4,
    .md\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Ajustement des grilles pour les activités */
    .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Ajustement des espacements */
    .py-16, .py-20 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    
    .gap-8, .gap-10 {
        gap: 1.5rem;
    }
    
    /* Ajustement des tailles de texte */
    h1.text-6xl.md\:text-8xl {
        font-size: 5rem;
    }
    
    .text-4xl {
        font-size: 2.5rem;
    }
    
    .text-2xl {
        font-size: 1.4rem;
    }
    
    .text-xl {
        font-size: 1.1rem;
    }
    
    p {
        line-height: 1.6;
    }
    
    /* Ajustement des marges et paddings */
    .p-8 {
        padding: 1.5rem;
    }
    
    .p-6 {
        padding: 1.25rem;
    }
    
    .px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .mb-8 {
        margin-bottom: 1.5rem;
    }
    
    /* Ajustement des flip cards */
    .flip-card, 
    .special-offer-card {
        min-height: 600px;
    }
    
    .flip-card-inner {
        min-height: 600px;
    }
    
    .flip-card-front,
    .flip-card-back {
        min-height: 600px;
    }
    
    /* Ajustement de la carte cadeau */
    .grid.md\:grid-cols-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    
    /* Ajustement du footer */
    footer .grid-cols-1.md\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 2rem;
    }
    
    footer img {
        width: 150px;
        margin: 0 auto;
    }
    
    /* Amélioration des boutons */
    .btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.95rem;
    }
    
    /* Amélioration des cartes d'activités */
    .flex.items-center.p-4 {
        padding: 1rem;
    }
    
    .flex.items-center.p-4 img {
        width: 70px;
        height: 70px;
    }
    
    /* Amélioration du tableau comparatif */
    .travel-planner-comparison {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .travel-planner-comparison table {
        font-size: 0.9rem;
    }
    
    .travel-planner-comparison th,
    .travel-planner-comparison td {
        padding: 0.75rem 0.5rem;
    }
    
    /* Amélioration des boutons du carousel du carnet */
    #prevPage, #nextPage {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
    
    #prevPage i, #nextPage i {
        font-size: 0.75rem;
    }
    
    .tooltip {
        display: none !important;
    }
}

/* Media queries pour les écrans de taille moyenne à large */
@media (max-width: 1024px) {
    .map-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .info-column {
        max-width: 100%;
    }
    .tooltip {
        display: none !important;
    }
    .mobile-menu-new {
        display: block !important;
    }
    .desktop-nav {
        display: none !important;
    }
}

/* Media queries pour les grands écrans */
@media (min-width: 1025px) {
    .flip-card, .special-offer-card {
        height: 100%; 
    }
    
    .mobile-menu-new {
        display: none !important;
    }
    
    .desktop-nav {
        display: flex !important;
    }
}

/* Media query pour les technologies d'assistance */
@media (forced-colors: active) {
    .btn-vert, .btn-violet, .btn-vert-clair { 
        forced-color-adjust: none; 
    }
}