/* === 🌍 RESPONSIVE RIVIANTRIP — VERSION CORRIGÉE === */

/* ✅ TABLETTES (≤1024px) */
@media (max-width: 1024px) {
  .discover-container,
  .subscribe-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .subscribe-form {
    justify-content: center;
  }

  .articles-container {
    gap: 25px;
  }

  .voyages-grid {
    justify-content: center;
  }
}

  /* ✅ MOBILE (≤991px) */
@media (max-width: 991px) {

  /* --- BARRE SUPÉRIEURE --- */
  .top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #ddd;
    padding: 10px 16px;
    z-index: 1000;
  }

  /* --- HAMBURGER À GAUCHE --- */
  .mobile-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #333;
    font-size: 22px;
    cursor: pointer;
    z-index: 1101;
  }

  /* --- RECHERCHE À DROITE --- */
  .search-bar {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  #searchInput {
    display: none;
  }

  #searchInput.active {
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 5px 10px;
    font-size: 13px;
  }

  /* --- MENU D'ORIGINE MASQUÉ SUR MOBILE --- */
  .main-menu {
    display: none !important; /* empêche le menu horizontal de rester visible */
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
  }

  /* --- MENU LATÉRAL (OUVERT) --- */
  .main-menu.open {
    display: block !important;
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100%;
    width: 250px;
    background: #fff;
    box-shadow: 3px 0 10px rgba(0, 0, 0, 0.25);
    padding-top: 70px;
    z-index: 1200;
  }

  .main-menu.open ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    padding: 0 20px;
    margin: 0;
  }

  .main-menu.open li {
    border-bottom: 1px solid #eee;
  }

  .main-menu.open a {
    display: block;
    color: #333;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 500;
    padding: 8px 0;
    transition: color 0.25s;
  }

  .main-menu.open a:hover {
    color: #00455F;
  }

  /* --- FOND SEMI-TRANSPARENT LORSQUE MENU OUVERT --- */
  body.menu-open::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1100;
  }

  /* --- ICÔNES SOCIALES EN BAS --- */
  .social-icons {
    position: static;
    display: flex;
    justify-content: center;
    margin: 40px 0 20px;
  }

  .social-icons a {
    font-size: 22px;
    color: #333;
    padding: 0 8px;
  }

  .social-icons a:hover {
    color: #00455F;
  }

  /* --- CONTENU --- */
  body {
    padding-top: 70px;
  }
}

/* ✅ CACHER LE HAMBURGER SUR PC */
@media (min-width: 992px) {
  .mobile-toggle {
    display: none !important;
  }

  /* Supprime les résidus de position absolue du menu sur PC */
  .main-menu {
    display: flex !important;
    position: static !important;
    transform: none !important;
  }
}


/* === 📱 SLIDER MOBILE (corrigé : bien aligné à gauche, plus du tout collé à droite) === */
@media (max-width: 991px) {

  .discover-container {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 24px;
    justify-items: start;
  }

  /* ✅ Décalage forcé vers la gauche */
  .discover-slider {
    width: 100%;
    margin-left: -8px; /* pousse réellement vers la gauche */
    margin-right: auto;
    padding: 16px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  }

  .slider-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
  }

  .slider-item img {
    width: 94%;
    height: auto;
    max-height: 290px;
    object-fit: cover;
    border-radius: 10px;
  }

 /* === 📱 SLIDER MOBILE (agrandi + photo non collée au cadre blanc) === */
@media (max-width: 991px) {

  .discover-container {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 24px; /* espace général légèrement augmenté */
    justify-items: center;
  }

  /* Slider plus large et bien centré dans la zone grise */
  .discover-slider {
    width: 96%;
    margin: 0 auto;
    padding: 14px; /* espace interne plus large pour éviter que la photo touche */
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  }

  .slider-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
  }

  /* ✅ La photo ne touche plus le bord blanc */
  .slider-item img {
    width: 95%;
    height: auto;
    max-height: 285px;
    object-fit: cover;
    border-radius: 10px;
  }

  .slider-info {
    position: relative;
    width: 100%;
    padding: 14px 18px;
    background: #fff;
    color: #333;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border-radius: 8px;
  }

  .slider-info h3 {
    font-size: 10px;
    color: #222;
    margin-bottom: 6px;
    font-weight: 600;
    text-align: left;
    width: 100%;
  }

  .slider-info p {
    font-size: 8px;
    line-height: 1.4;
    margin-bottom: 8px;
    text-align: left;
    width: 100%;
  }

  .slider-controls {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
  }

  .slider-controls button {
    border: 1px solid #ccc;
    background: #fff;
    color: #333;
    font-size: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    transition: background-color 0.25s ease, color 0.25s ease;
  }

  .slider-controls button:hover {
    background-color: #00455F;
    color: #fff;
  }

  .discover-text h2 {
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    color: #444;
    margin: 0 auto;
    max-width: 92%;
  }
 }

  /* Texte d’intro harmonisé */
  .discover-text h2 {
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
    color: #444;
    margin: 0 auto;
    max-width: 92%;
  }
}

/* === 📱 COPYRIGHT MOBILE (taille réduite) === */
@media (max-width: 991px) {
  footer,
  .footer-bottom,
  .copyright,
  .site-footer {
    font-size: 8px !important;
    line-height: 1.2;
    text-align: center;
  }
}

/* === 📱 FONT GÉNÉRALE MOBILE (réduite à 10px) === */
@media (max-width: 991px) {
  html, body {
    font-size: 10px !important;
    line-height: 1.4;
  }

  /* Ajustement léger pour les titres */
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.4rem; }
  h3 { font-size: 1.1rem; }
  h4, h5, h6 { font-size: 1rem; }

  /* Paragraphes et textes généraux */
  p, li, a, span, label {
    font-size: 1rem;
  }

  /* ✅ Garde le copyright encore plus petit */
  footer,
  .footer-bottom,
  .copyright,
  .site-footer {
    font-size: 8px !important;
    line-height: 1.2;
    text-align: center;
  }
}

/* === 📱 LOGO MOBILE (zone réduite verticalement, logo intact) === */
@media (max-width: 991px) {
  .logo-section {
    margin-top: 15px !important;   /* espace au-dessus réduit */
    margin-bottom: 10px !important; /* espace en dessous réduit */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    text-align: center;
  }

  /* ne change pas la taille du logo */
  .logo-section img {
    max-width: 100%; 
    height: auto;
  }

  /* ajuste le texte si présent sous le logo */
  .logo-section h1,
  .logo-section h2 {
    margin-top: 6px;
    margin-bottom: 4px;
    line-height: 1.2;
  }
}

/* === 📱 LOGO MOBILE (fond beige doux #fdf1d6 sans toucher à la top-bar) === */
@media (max-width: 991px) {
  /* Zone du logo */
  .logo-section {
    background: #fdf1d6 !important;
  }

  /* Seulement les conteneurs du logo — pas la barre du haut */
  .header:not(.top-bar),
  header:not(.top-bar),
  .site-header:not(.top-bar) {
    background: #fdf1d6 !important;
  }

  /* Corps de la page sous la top-bar */
  body {
    background-color: #fdf1d6 !important;
  }

  /* On force la top-bar à rester blanche */
  .top-bar {
    background: #fff !important;
  }
}

/* === 📱 SECTION ABONNEMENT (font réduite à 10px sur mobile) === */
@media (max-width: 991px) {
  .subscribe-section {
    padding: 10px 0;
  }

  .subscribe-container {
    width: 90%;
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 15px;
  }

  .subscribe-text h2 {
    font-size: 10px !important;
  }

  .subscribe-text p {
    font-size: 10px !important;
    line-height: 1.4;
  }

  .subscribe-form input {
    font-size: 10px !important;
    padding: 8px 10px;
  }

  .subscribe-form button {
    font-size: 10px !important;
    padding: 8px 12px;
  }
}

/* === 📱 ESPACEMENTS GLOBAUX ENTRE SECTIONS (compacts + suppression zones jaunes) === */
@media (max-width: 991px) {
  /* Réduction forte des marges et paddings entre sections */
  section,
  .discover-section,
  .subscribe-section,
  .articles-section,
  .voyages-section,
  footer,
  .site-footer {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    background: #fff !important; /* supprime le fond jaune/beige */
  }

  /* Conteneurs internes : espacements internes réduits */
  .discover-container,
  .subscribe-container,
  .articles-container,
  .voyages-grid {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    background: #fff !important; /* fond unifié */
  }

  /* Zone abonnement & copyright : fond blanc uniforme */
  .subscribe-section,
  .footer-bottom,
  .copyright {
    background: #fff !important;
  }
}

/* === 📱 CORRECTION DÉFINITIVE : suppression totale du fond beige sur mobile === */
@media (max-width: 991px) {
  html,
  body,
  section,
  footer,
  .site-footer,
  .footer-bottom,
  .copyright,
  .subscribe-section,
  .articles-section,
  .voyages-section,
  .discover-section,
  .header,
  header,
  .site-header {
    background: #fff !important; /* force blanc pur partout */
  }
}

/* === 📱 SECTION ARTICLES (MOBILE - police réduite à 10px) === */
@media (max-width: 991px) {
  .articles-section {
    padding: 25px 10px !important;
  }

  .articles-container {
    gap: 20px !important;
  }

  .article-item {
    width: 90% !important;
    margin: 0 auto;
  }

  .article-item h3 {
    font-size: 10px !important;
    margin: 10px 12px 6px !important;
  }

  .article-item p {
    font-size: 10px !important;
    line-height: 1.4 !important;
    margin: 0 12px 10px !important;
  }

  .article-item img {
    height: 150px !important;
  }
}

/* === 📱 AJUSTEMENT ESPACEMENT LOUPE VS RÉSEAUX SOCIAUX === */
@media (max-width: 991px) {
  .search-bar {
    margin-right: 45px !important; /* éloigne la loupe des réseaux sociaux */
  }

  .search-bar button,
  .search-button {
    padding-right: 6px !important; /* petit espace interne pour respirer */
  }
}

/* === ✅ CORRECTION FINALE — MENU MOBILE INVISIBLE === */
@media (max-width: 991px) {
  /* Force l’affichage des éléments du menu quand il est ouvert */
  .main-menu.open,
  .main-menu.open ul,
  .main-menu.open li,
  .main-menu.open a {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #222 !important;
  }

  /* Fond blanc clair pour bien détacher du fond gris */
  .main-menu.open {
    background: #ffffff !important;
    z-index: 1201 !important;
    padding-top: 70px !important;
  }

  /* Style propre des liens */
  .main-menu.open a {
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    padding: 10px 20px;
    border-bottom: 1px solid #ddd;
  }

  .main-menu.open a:hover {
    background: #f5f5f5;
    color: #00455F !important;
  }

  /* Assure que le menu reste au-dessus de tout */
  .top-bar {
    z-index: 1300 !important;
  }
}

/* === /* === ✅ MENU MOBILE — VERSION ALIGNÉE PARFAITEMENT (PLUS DE DÉCALAGE ENTRE LES TITRES) === */
@media (max-width: 991px) {
  .main-menu.open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 250px !important;
    height: 100vh !important;
    background: #ffffff !important;
    overflow-y: auto !important;
    z-index: 2000 !important;
    padding-top: 70px !important;
    box-shadow: 3px 0 10px rgba(0, 0, 0, 0.25);
  }

  /* Liste parfaitement régulière */
  .main-menu.open ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    list-style: none !important;
    padding: 0 22px !important;
    margin: 0 !important;
  }

  .main-menu.open li {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border: none !important;
    margin: 0 !important;
    padding: 8px 0 !important; /* même hauteur partout */
  }

  /* Titres uniformes */
  .main-menu.open a {
    display: inline-block !important;
    flex: 1 !important;
    color: #222 !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    font-size: 10px !important;
    letter-spacing: 0.4px !important;
    line-height: 1 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Icône chevron : centrée verticalement et sans espace fantôme */
  .main-menu.open i {
    margin-left: 6px !important;
    margin-right: 0 !important;
    font-size: 8px !important;
    color: #222 !important;
    line-height: 1 !important;
    position: relative !important;
    top: 0 !important; /* annule le décalage */
    vertical-align: middle !important;
  }

  .main-menu.open a:hover {
    background: #f5f5f5 !important;
    color: #00455F !important;
    border-radius: 4px !important;
    padding-left: 6px !important;
  }

  /* Supprime tout effet parasite */
  .main-menu.open a:before,
  .main-menu.open a:after,
  .main-menu.open li:before,
  .main-menu.open li:after,
  .main-menu.open i:before,
  .main-menu.open i:after {
    display: none !important;
    content: none !important;
  }

  body.menu-open::after {
    z-index: 1500 !important;
  }

  .top-bar {
    z-index: 2100 !important;
  }
}

/* === 🌍 PAGE VOYAGES — VERSION RESPONSIVE MOBILE & TABLETTE === */

/* ✅ TABLETTES (jusqu’à 1200px) */
@media (max-width: 1200px) {
  .voyages-section {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    max-width: 95%;
    padding: 0 15px;
  }

  .voyage-card img {
    height: 320px;
  }

  .voyage-card h3 {
    font-size: 14px;
  }

  .voyage-card p {
    font-size: 13px;
    line-height: 1.5;
  }
}

/* === ✅ PAGE VOYAGES — TITRE BIEN PLACÉ SOUS LA BARRE FIXE === */
@media (max-width: 991px) {

  /* Espace sous la top-bar uniquement pour la page Voyages */
  body[data-page="voyages"] {
    padding-top: 90px !important;
  }

  /* Titre bien visible et centré */
  .voyages-section h1,
  .voyages-section .page-title {
    margin-top: 0 !important;
    padding-top: 15px !important;
    display: block !important;
    position: relative !important;
    z-index: 2 !important;
    text-align: center !important;
  }

  /* Uniformisation du texte sur mobile */
  body[data-page="voyages"] h1,
  body[data-page="voyages"] h2,
  body[data-page="voyages"] h3,
  body[data-page="voyages"] p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #222 !important;
  }
}

/* === ✅ TABLETTES (équilibre visuel) === */
@media (min-width: 992px) and (max-width: 1200px) {
  body[data-page="voyages"] {
    padding-top: 80px !important;
  }
}