.section-separator {
      border: 0;
      height: 1px;
      background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
      margin-top: 1rem !important;
      margin-bottom: 1rem !important;
    }
    /* Permet aux sections fluides de s'étendre joliment sans être infinies sur les écrans géants */
    .wide-container {
      max-width: 1700px !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

       .custom-list {
      list-style: none;
      padding-left: 0;
      margin-bottom: 0;
    }
    .custom-list li {
      position: relative;
      padding-left: 1.5rem;
      margin-bottom: 0.75rem;
    }
    .custom-list li::before {
      content: "•";
      color: #7A5230;
      font-weight: bold;
      font-size: 1.3rem;
      position: absolute;
      left: 0;
      top: -0.2rem;
    }

    /* --- 1. BASE ET TYPOGRAPHIE --- */
body {
    font-family: 'Inter Tight', sans-serif;
    background-color: #f5f2eb; /* Fond général lin : casse immédiatement l'agressivité du blanc */
    color: #2b2a25; /* Texte foncé adouci pour un meilleur confort de lecture */
    overflow-x: hidden;
}

/* --- 2. STRUCTURE DES SECTIONS & RYTHME VISUEL --- */
/* On force l'alternance des arrière-plans pour segmenter proprement le site */
section {
    background-color: #fdfdfc !important; /* Les sections paires ressortent en blanc pur */
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

section:nth-of-type(odd) {
    background-color: #eae6dc !important; /* Les sections impaires passent sur un sable plus soutenu */
}

/* Zone d'introduction (Hero) : Chaleureuse et enveloppante */
.bg-cream {
    background-color: #e5dfd3 !important;
    border-bottom: 1px solid rgba(115, 114, 87, 0.15);
}

/* Limitation de la largeur maximale pour les grands écrans (23"+) */
.container-wide {
    max-width: 1600px;
}

/* --- 3. ÉLÉMENTS DE DESIGN & CONTRASTES --- */
/* Couleur marron personnalisée pour les titres et accents */
.text-custom-brown {
    color: #5c5a42; /* Marron légèrement assombri pour augmenter le contraste et la lisibilité */
}

/* Titres généraux du site */
h1, h2, h3 {
    color: #2b2a25 !important;
    letter-spacing: -0.02em;
}

/* Puces personnalisées marron */
.bullet-custom::before {
    content: "•";
    color: #737257;
    font-weight: bold;
    font-size: 1.3rem;
    position: absolute;
    left: 0;
    top: -0.2rem;
}

/* --- 4. COMPOSANTS INTERACTIFS (BOUTONS & IMAGES) --- */
/* Boutons Premium "SaaS Style" */
.btn-primary {
    background-color: #737257 !important;
    border-color: #737257 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    padding: 0.9rem 2.4rem !important;
    border-radius: 50px !important;
    box-shadow: 0 6px 18px rgba(115, 114, 87, 0.25) !important; /* Ombre portée affirmée */
    transition: all 0.25s ease-in-out !important;
}

.btn-primary:hover, 
.btn-primary:focus {
    background-color: #5d5c46 !important;
    border-color: #5d5c46 !important;
    transform: translateY(-3px) !important; /* Élévation accentuée */
    box-shadow: 0 10px 25px rgba(115, 114, 87, 0.4) !important;
}

.btn-primary:active {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(115, 114, 87, 0.2) !important;
}

/* Cartes de la galerie (Miniatures) */
.card {
    background-color: #ffffff !important;
    border: 1px solid rgba(115, 114, 87, 0.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.cursor-pointer {
    cursor: pointer;
}

/* Effet au survol des miniatures : détachement net */
.card:hover {
    transform: translateY(-6px) !important;
    border-color: #737257 !important; /* La bordure s'illumine */
    box-shadow: 0 20px 40px rgba(115, 114, 87, 0.15) !important; /* Ombre signature */
}

/* Ajustements pour le lecteur vidéo */
.video-responsive {
    max-height: 70vh;
    object-fit: contain;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important; /* Donne du poids à la vidéo */
}

/* --- 5. L'ÉCRIN DU FORMULAIRE DE CONTACT --- */
.contact-card {
    background-color: #ffffff !important; /* Blanc pur pour trancher nettement avec le fond de section */
    border: 1px solid rgba(115, 114, 87, 0.15);
    border-radius: 24px;
    padding: 4rem 3.5rem;
    box-shadow: 0 20px 50px rgba(115, 114, 87, 0.12) !important; /* Très forte présence visuelle */
}

/* Champs de saisie du formulaire */
.contact-card .form-control {
    background-color: #fcfbfa !important; /* Léger fond crème pour matérialiser le champ */
    border: 1.5px solid #dbd6cb !important; /* Lignes de contour bien définies */
    border-radius: 12px !important;
    padding: 1.1rem 1.2rem !important;
    color: #212529 !important;
    font-size: 1rem !important;
    font-weight: 500;
    transition: all 0.2s ease-in-out !important;
}

.contact-card .form-control:focus {
    outline: none !important;
    background-color: #ffffff !important;
    border-color: #737257 !important;
    box-shadow: 0 0 0 4px rgba(115, 114, 87, 0.18) !important; /* Halo de focus protecteur */
}

.contact-card .form-control::placeholder {
    color: #827e74 !important;
    font-weight: 400;
}

/* Zone d'introduction (Hero) : Chaleureuse et enveloppante */
.bg-cream {
    background-color: #e5dfd3 !important;
    border-bottom: 1px solid rgba(115, 114, 87, 0.15);
}
.carousel-control {
      opacity: 0.8 !important;
  }
  .carousel-control:hover {
      opacity: 1 !important;
  }
  /* Utilisation des flèches natives Bootstrap stylisées en noir/sombre */
  .carousel-control-prev-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333333'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") !important;
      width: 2rem;
      height: 2rem;
  }
  .carousel-control-next-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333333'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
      width: 2rem;
      height: 2rem;
  }