/*   'primary-color'              => $this->config->item('css_primary_color') ?? '#EAE4DC',
    'primary-text-color'         => $this->config->item('css_primary_text_color') ?? '#3a3a3a',
    'primary-link-color'         => $this->config->item('css_primary_link_color') ?? '#000000',

    'secondary-color'            => $this->config->item('css_secondary_color') ?? '#3a3a3a',
    'secondary-text-color'       => $this->config->item('css_secondary_text_color') ?? '#ffffff',

    'body-color'                 => $this->config->item('css_body_color') ?? '#ffffff',
    'text-color'                 => $this->config->item('css_text_color') ?? '#000000',
    'link-color'                 => $this->config->item('css_link_color') ?? '#17a2b8',
    'link-color-menu'            => $this->config->item('css_link_color_menu') ?? '#000000',

    'font-family'                => $this->config->item('css_font_family') ?? "'Poppins', sans-serif",
*/
/* ============================
   Couleurs globales et police
   ============================ */
body {
    font-family: var(--font-family);
    background-color: var(--body-color);
    color: var(--text-color);
}

a {
    color: var(--link-color);
}

/* ============================
   Sections, boutons et utilitaires
   ============================ */
.bg-primary {
    background-color: var(--primary-color) !important;
    color: var(--primary-text-color) !important;
}

.bg-primary a {
    color: var(--primary-link-color) !important;
}

.bg-secondary {
    background-color: var(--secondary-color) !important;
    color: var(--secondary-text-color) !important;
}

.btn-primary {
    background-color: var(--primary-color) !important;
    color: var(--primary-text-color) !important;
    border: none;
}

.btn-secondary {
    background-color: var(--secondary-color) !important;
    color: var(--secondary-text-color) !important;
    border: none;
}

.section-title {
    color: var(--primary-text-color);
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}

.footer {
    text-align: center;
    padding: 20px 0;
}

/* ============================
   Barre de navigation
   ============================ */
.navbar {

}

.navbar-brand img {
    height: 50px;
}

.navbar-brand,
.nav-link,
a.nav-link,
.navbar-nav a {
    color: var(--link-color-menu) !important;
}

.navbar .navbar-toggler {
    order: -1;
    background: transparent;
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 0.5rem;
    border: none;
}

.navbar .navbar-toggler:focus {
    box-shadow: none;
}

@media (min-width: 992px) {
  .navbar-nav .dropdown:hover > .dropdown-menu {
    display: block;
  }
}
/* ============================
   Burger personnalisé
   ============================ */
.navbar-toggler-icon {
    background-image: none !important;
    width: 30px;
    height: 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after,
.navbar-toggler-icon span {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: var(--link-color-menu);
    left: 0;
    transition: all 0.3s ease-in-out;
}

.navbar-toggler-icon::before {
    top: 0;
}

.navbar-toggler-icon::after {
    bottom: 0;
}

.navbar-toggler-icon span {
    top: 11px;
}

.navbar-toggler.open .navbar-toggler-icon::before {
    transform: rotate(45deg);
    top: 40%;
}

.navbar-toggler.open .navbar-toggler-icon::after {
    transform: rotate(-45deg);
    bottom: 50%;
}

.navbar-toggler.open .navbar-toggler-icon span {
    opacity: 0;
}

/* ============================
   Pagination
   ============================ */
.active>.page-link, .page-link.active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.page-link {
  color: var(--primary-color);
}

/* ============================
   Animation scroll
   ============================ */
.fade-in {
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.fade-in.visible {
    opacity: 1;
}

/* Autre */
.hero {
    background: no-repeat center center/cover;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    font-size: 2rem;
    font-weight: bold;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

.hero .btn {text-shadow: none;}

.nav-soc {
    background: var(--primary);
    color: var(--primary-text-color);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: 10px;
    font-size: 28px; /* pour FontAwesome uniquement */
}

/* FontAwesome (hérite de font-size ci-dessus) */
.nav-soc i {
    line-height: 1;
}

/* TripAdvisor SVG spécifique (taille ajustée à l’œil) */
.social-tripadvisor svg {
    width: 26px;
    height: 26px;
    display: block;
}

.social-icons .nav-soc {
    background: rgba(0,0,0,.15);
}

.widget-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 150px min par item */
  max-width: 1200px; /* largeur max raisonnable */
  margin: 0 auto;
  gap: 1rem;
}
.widget-photo-grid .item img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 500px) {
  .widget-photo-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes fixes en mobile */
  }
}

.social-icon-wrapper {
  width: 60px;
  height: 60px;
  margin: 0 auto;
  border-radius: 50%;
  background-color: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
}

.social-icon-wrapper i {
  color: #333;
  transition: transform .3s ease;
}
.social-icon-wrapper:hover {
    background: #000;
    color: #fff
}

.social-icon-wrapper.social-facebook:hover, .social-icons .nav-soc.social-facebook:hover {
    background: #3b5997;
    color: #fff
}

.social-icon-wrapper.social-x:hover, .social-icons .nav-soc.social-x:hover {
    background: #000;
    color: #fff
}

.social-icon-wrapper.social-instagram:hover, .social-icons .nav-soc.social-instagram:hover {
    background: linear-gradient(45deg,#405de6,#5851db,#833ab4,#c13584,#e1306c,#fd1d1d,#f56040,#f77737,#fcaf45,#ffdc80);
    color: #fff
}

.social-icon-wrapper.social-youtube:hover, .social-icons .nav-soc.social-youtube:hover, .social-icon-wrapper.social-pinterest:hover, .social-icons .nav-soc.social-pinterest:hover {
    background: red;
    color: #fff
}

.social-icon-wrapper.social-tiktok:hover, .social-icons .nav-soc.social-tiktok:hover {
    background: linear-gradient(45deg, #25F4EE, #FE2C55, #000000);
    color: #fff;
}

.social-icon-wrapper.social-snapchat:hover, .social-icons .nav-soc.social-snapchat:hover {
    background:#fcfc03;
    color:#000;
 }

.social-icon-wrapper.social-tripadvisor:hover, .social-icons .nav-soc.social-tripadvisor:hover {
    background: #00af87;
    color: #fff;
}

.social-icon-wrapper.social-whatsapp:hover, .social-icons .nav-soc.social-whatsapp:hover {
    background: #25D366;
    color: #fff;
}

.social-icon-wrapper.social-email:hover, .social-icons .nav-soc.social-email:hover {
    background: #00BFFF;
    color: #fff;
}

.social-icon-wrapper.social-google:hover, .social-icons .nav-soc.social-google:hover {
    background: #4285f4; /* Couleur Google officielle */
    color: #fff;
}