/* =========================================
   1. FOND D'ÉCRAN OPTIMISÉ (SANS BUG MOBILE)
   ========================================= */
body {
  margin: 0;
  padding: 0;
}

/* L'image de fond (Fixe, clouée au fond) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: var(--bg-paysage-standard);
}

/* Le voile blanc semi-transparent (Par-dessus l'image) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.40);
  z-index: -1;
}

/* Changement d'image selon l'écran */
@media (orientation: landscape) and (min-width: 2000px) { body::before { background-image: var(--bg-paysage-2k); } }
@media (orientation: landscape) and (max-width: 1999px) { body::before { background-image: var(--bg-paysage-hd); } }
@media (orientation: landscape) and (max-width: 800px)  { body::before { background-image: var(--bg-paysage-tablette); } }
@media (orientation: landscape) and (max-width: 500px)  { body::before { background-image: var(--bg-paysage-mobile); } }

@media (orientation: portrait) and (min-width: 2000px)  { body::before { background-image: var(--bg-portrait-2k); } }
@media (orientation: portrait) and (max-width: 1999px)  { body::before { background-image: var(--bg-portrait-hd); } }
@media (orientation: portrait) and (max-width: 800px)   { body::before { background-image: var(--bg-portrait-tablette); } }
@media (orientation: portrait) and (max-width: 500px)   { body::before { background-image: var(--bg-portrait-mobile); } }

/* =========================================
   2. TYPOGRAPHIE ET BOUTONS
   ========================================= */
span { font-size: clamp(16px, 3vw, 30px); color: black; }
h1 { font-size: clamp(20px, 3vw, 26px); color: white; }
h2 { font-size: clamp(18px, 3vw, 24px); color: white; }
h3, h4, ul { font-size: clamp(16px, 3vw, 22px); color: white; }
li { font-size: clamp(16px, 3vw, 20px); line-height: 1.9; color: black; }
h5, p { font-size: clamp(12px, 3vw, 16px); color: black; }

.text-area { font-size: clamp(28px, 3vw, 34px); color: white; }
.texte-sur-image { background-color: rgba(0, 0, 0, 0.6); padding: 1rem; border-radius: 8px; }
.texte-sur-image2 { background-color: rgb(255, 255, 255, 0.9); padding: 1rem; border-radius: 8px; }

.call-btn { font-size: clamp(1.8rem, 3vw, 4rem); padding: 0.75em 1.5em; }

a { color: inherit; text-decoration: inherit; }
a img { transition: transform 0.3s ease, box-shadow 0.3s ease; max-width: 100%; height: auto; }
a:hover img { transform: scale(1.1); box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.418); }

/* =========================================
   3. NAVIGATION ET STRUCTURE (PAR DÉFAUT)
   ========================================= */
.navbar-space { height: 80px; }
.spacer { height: 85vh; } /* Modifiez ici pour les PC */
.teaser { top: 88%; transform: translateY(-10vh); width: 100%; text-align: center; }

header.fixed-top { transition: transform 0.3s ease-in-out; }
.newsletter-banner { position: relative; z-index: 10; background-color: rgb(0, 170, 255); }

.navbar-custom { position: relative; }
.navbar-custom .container-fluid { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; }
.header-social { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.header-social img { vertical-align: middle; }

.navbar-custom .navbar-toggler { display: flex; align-items: center; justify-content: center; width: 55px; height: 55px; padding: 0; margin: 0 !important; }
.navbar-custom .navbar-collapse { position: absolute; top: 100%; right: 0; width: 100%; max-width: 350px; background: white; padding: 15px; border-radius: 0 0 8px 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 9999; max-height: calc(100vh - 100px); overflow-y: auto; }
.navbar-custom .navbar-collapse.show { display: block; }
.menu-separator { width: 100%; height: 1px; background: linear-gradient(to right, transparent, #555 50%, transparent); margin: 12px auto; list-style: none; }

/* =========================================
   4. ADAPTATION RESPONSIVE (TABLETTES & MOBILES)
   ========================================= */
/* Tablette - Portrait */
@media (max-width: 1100px) and (orientation: portrait) {
  .navbar-space { height: 70px; }
  .spacer { height: 75vh; } /* Réduit légèrement pour voir la suite */
  .navbar-custom .navbar-toggler { width: 40px; height: 40px; }
}

/* Tablette - Paysage */
@media (max-width: 1100px) and (orientation: landscape) {
  .navbar-space { height: 70px; }
  .spacer { height: 45vh; } 
  .navbar-custom .navbar-toggler { width: 40px; height: 40px; }
}

/* Mobile - Portrait */
@media (max-width: 768px) and (orientation: portrait) {
  .navbar-space { height: 50px; }
  .spacer { height: 60vh; } /* Modifiez ici pour les téléphones verticaux */
  .navbar-custom .container-fluid { flex-wrap: wrap; }
  .header-social { gap: 7px; transform: scale(0.8); }
  .navbar-custom .navbar-toggler { width: 35px; height: 35px; }
  .navbar-custom .navbar-collapse { width: 280px !important; right: 5px; }
}

/* Mobile - Paysage */
@media (max-width: 768px) and (orientation: landscape) {
  span { font-size: clamp(12px, 2vw, 16px); }
  .navbar-custom .container-fluid { justify-content: flex-start; padding: 0; flex-wrap: wrap; }
  .navbar-space { height: 50px; }
  .spacer { height: 35vh; } /* Crucial: Évite que le spacer pousse tout en dehors d'un petit écran couché */
  .header-social { gap: 5px; transform: scale(0.8); }
  .navbar-custom .navbar-toggler { width: 35px; height: 35px; }
  .navbar-custom .navbar-collapse { width: 280px !important; right: 5px; }
}

/* =========================================
   5. WIDGET CHAT (LAISSÉ INTACT)
   ========================================= */
#chat-widget-btn { position: fixed !important; bottom: 20px !important; left: 20px !important; display: flex !important; align-items: center; cursor: pointer; z-index: 10000 !important; background: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
#chat-widget-btn:hover { transform: scale(1.05); }
#chat-avatar { width: 60px !important; height: 60px !important; border-radius: 50%; object-fit: cover; border: 3px solid #014dbe !important; margin-right: -5px; position: relative; z-index: 2; }
.chat-text-box { background: white !important; border: 2px solid #014dbe !important; transform: skewX(-20deg); padding: 10px 30px 10px 35px !important; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); margin-left: -15px; }
.chat-btn-text { display: inline-block; font-weight: bold; font-size: 16px; color: #014dbe !important; transform: skewX(20deg); margin: 0; white-space: nowrap; }
#chat-window { position: fixed !important; bottom: 80px !important; left: 20px !important; width: 350px; max-width: calc(100vw - 40px); background: white; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); display: flex; flex-direction: column; z-index: 10000 !important; overflow: hidden; transition: opacity 0.3s, transform 0.3s; }
.chat-hidden { opacity: 0; transform: translateY(20px); pointer-events: none; }
.chat-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#chat-header { background: #0d6efd; color: white; padding: 15px; display: flex; justify-content: space-between; align-items: center; }
#chat-header img { width: 30px; height: 30px; border-radius: 50%; margin-right: 10px;}
.header-info { display: flex; align-items: center; }
.close-chat { background: none; border: none; color: white; font-size: 24px; cursor: pointer; line-height: 1;}
#chat-messages { height: 350px; overflow-y: auto; padding: 15px; background: #f8f9fa; display: flex; flex-direction: column; }
.chat-bubble { max-width: 80%; padding: 10px 15px; border-radius: 15px; margin-bottom: 10px; font-size: 14px; line-height: 1.4; }
.msg-bot { background: #e9ecef; color: #333; align-self: flex-start; border-bottom-left-radius: 2px; }
.msg-user { background: #0d6efd; color: white; align-self: flex-end; border-bottom-right-radius: 2px; }
#chat-input-area { padding: 15px; border-top: 1px solid #dee2e6; background: white; }
#chat-text-input-container { display: flex; gap: 10px; }
#chat-input { flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 20px; outline: none; }
#chat-send-btn { background: #0d6efd; color: white; border: none; padding: 0 15px; border-radius: 20px; cursor: pointer; }
#chat-choice-container { display: flex; gap: 10px; justify-content: center; }
.chat-choice-btn { background: #0d6efd; color: white; border: none; padding: 10px 20px; border-radius: 20px; cursor: pointer; flex: 1; }