/* ===============================
   GALERIE EXTRA FIELD - JA AIGA STYLE
   =============================== */

.isotope-gallery {
  position: relative;
  margin: 2rem auto;
  max-width: 1200px;
  overflow: hidden;
}

/* Élément de grille */
.isotope-gallery .item {
  width: 31%;
  margin-bottom: 2%;
  float: left;
  position: relative;
}

.isotope-gallery .grid-sizer {
  width: 31%;
}

/* Image wrapper */
.image-item {
  position: relative;
  overflow: hidden;
}

/* Images */
.image-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Zoom icon */
.image-item .fa {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  color: #fff;
  font-size: 1.8rem;
  transition: all 0.3s ease;
}

/* Effets hover */
.image-item:hover img {
  transform: scale(1.05);
  opacity: 0.8;
}
.image-item:hover .fa {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* Responsive */
@media (max-width: 991px) {
  .isotope-gallery .item, .isotope-gallery .grid-sizer {
    width: 48%;
  }
}
@media (max-width: 600px) {
  .isotope-gallery .item, .isotope-gallery .grid-sizer {
    width: 100%;
  }
}

/* Wrapper pour centrer la galerie dans section-bottom */
.fullwidth-gallery-wrapper {
    width: 100%;
    max-width: 1200px; /* largeur max du module */
    margin: 0 auto;    /* centrer horizontalement */
    padding: 0 16px;   /* petit padding symétrique */
    box-sizing: border-box;
}

/* Conteneur Masonry */
.fullwidth-gallery {
    position: relative; /* nécessaire pour Isotope */
}

/* Grid-sizer pour Masonry */
.fullwidth-gallery .grid-sizer {
    width: 33.333%; /* base 3 colonnes */
}

/* Items Masonry */
.fullwidth-gallery .item {
    width: 33.333%;
    margin-bottom: 16px;
}

/* Image styling */
.fullwidth-gallery .image-item img {
    width: 100%;
    display: block;
    border-radius: 0; /* coins carrés comme la démo */
    height: auto;
    transition: transform 0.3s ease;
}

.fullwidth-gallery .image-item img:hover {
    transform: scale(1.02);
}

.model-gallery a {
    display: inline-block;
    margin: 15px; /* espace autour de chaque image */
    vertical-align: top;
}

.model-gallery img {
    width: calc(33.333% - 16px); /* 3 colonnes avec marge de 8px de chaque côté */
    height: auto;
    display: block;
    object-fit: cover; /* pour que l'image garde sa proportion dans le cadre */
    border-radius: 8px; /* optionnel, coins arrondis */
}

/* Correction : empêcher la déformation de l'image d'intro dans le thème Light */
.item-image img,
.article-intro img,
.article-fulltext img,
.blog-featured img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

/* Style gold cadre page de contact */
.notice-gold {
  border: 1px solid #d6c48a;
  background: #fffaf0;
  padding: 18px 24px;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(214,196,138,0.15);
  max-width: 700px;
  margin: 30px auto;
  color: #7a693d;
  font-family: "Poppins", sans-serif;
}
.notice-gold h4 {
  margin: 0 0 8px;
  color: #5a4a1f;
  letter-spacing: 0.5px;
}

/* ===============================
   BOUTONS CONTACT - STYLE PREMIUM RECTANGULAIRE
   =============================== */
.contact-buttons {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  margin: 40px 0;
}

/* Bouton général */
.contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;       /* plus large horizontalement pour effet rectangulaire */
  min-width: 300px;       /* largeur minimale uniforme pour tous les boutons */
  border: 1px solid #ddd;
  border-radius: 12px;      /* coins légèrement arrondis */
  text-decoration: none;
  font-family: "Poppins", "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #222;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

/* Icône à gauche */
.contact-btn img {
  width: 22px;
  height: 22px;
  margin-right: 12px;
  transition: transform 0.3s ease;
}

/* Hover global */
.contact-btn:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transform: translateY(-2px);
  color: #000;
}
.contact-btn:hover img {
  transform: scale(1.1);
}

/* Couleurs personnalisées par réseau */
.contact-btn.whatsapp {
  border-color: #25D366;
}
.contact-btn.whatsapp:hover {
  background: #25D366;
  color: #fff;
}
.contact-btn.whatsapp:hover img {
  filter: brightness(0) invert(1);
}

.contact-btn.telegram {
  border-color: #0088CC;
}
.contact-btn.telegram:hover {
  background: #0088CC;
  color: #fff;
}
.contact-btn.telegram:hover img {
  filter: brightness(0) invert(1);
}

.contact-btn.instagram {
  border-color: #E4405F;
}
.contact-btn.instagram:hover {
  background: #E4405F;
  color: #fff;
}
.contact-btn.instagram:hover img {
  filter: brightness(0) invert(1);
}

/* Responsive */
@media (max-width: 600px) {
  .contact-buttons {
    width: 100%;
  }
  .contact-btn {
    width: 90%;
  }
}

/* ===============================
   TITRES PREMIUM - H2 & H3 (Aiga mobile fix)
   =============================== */

/* Appliquer seulement taille, graisse, espacement et style sur toutes résolutions */
h2, h3 {
    margin: 1.2em 0 0.6em 0;
    line-height: 1.3;
    color: #000 !important;
    font-weight: inherit; /* laisse la police du template intacte */
    letter-spacing: inherit;
}

/* TITRE H2 PREMIUM - BARRE DORÉE */
h2 {
    color: inherit;          /* garde la couleur Aiga (noir) */
    font-weight: 600;
    margin: 1.2em 0 0.6em 0;
    line-height: 1.3;
    letter-spacing: 0.5px;
    position: relative;
}

h2::after {
    content: "";
    display: block;
    width: 60px;               
    height: 1px;               
    margin-top: 6px;
    border-radius: 2px;
    background: linear-gradient(90deg, #D4AF37, #FFD700); /* nuances dorées */
    box-shadow: 0 2px 4px rgba(212, 175, 55, 0.4); /* reflet subtil */
}

/* Responsive : taille H2 et barre adaptée */
@media (max-width: 991px) {
    h2 {
        font-size: 32px;
    }
    h2::after {
        width: 50px;
        height: 2.5px;
    }
}

@media (max-width: 600px) {
    h2 {
        font-size: 28px;
        color: inherit;  /* force la couleur Aiga */
    }
    h2::after {
        width: 40px;
        height: 2px;
    }
}

/* H3 plus petit */
h3 {
    font-size: 26px;
}

/* Tablette */
@media (max-width: 991px) {
    h2 {
        font-size: 32px !important;
    }
    h3 {
        font-size: 24px !important;
    }
}

/* Mobile */
@media (max-width: 600px) {
    /* Sélecteurs spécifiques au template pour override */
    .t3-content h2 {
        font-size: 28px !important;
    }
    .t3-content h3 {
        font-size: 22px !important;
    }
}

/* ===============================
   TITRE PREMIUM H1 - EFFET METALLIQUE
   =============================== */
h1 a.premium-metal {
    font-weight: 700;                 /* gras */
    font-size: 48px;                  /* taille principale */
    line-height: 1.2;
    text-decoration: none;
    background: linear-gradient(45deg, #FFD700, #FFAA00, #FFF8DC); /* dégradé or chaud */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    transition: all 0.3s ease;
    position: relative;
}

/* Petit reflet subtile */
h1 a.premium-metal::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
    pointer-events: none;
}

/* Hover : accentuer la brillance */
h1 a.premium-metal:hover {
    background: linear-gradient(45deg, #FFD700, #FFF700, #FFDD55);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 991px) {
    h1 a.premium-metal { font-size: 40px; }
}

@media (max-width: 600px) {
    h1 a.premium-metal { font-size: 32px; }
}

/* H1 cliquable - couleur dorée au survol */
h1 a:hover {
    color: #D4AF37; /* or brillant */
    transition: color 0.3s ease;
    text-decoration: none; /* supprime le soulignement si présent */
}

/* Logo texte cliquable - couleur dorée au survol */
.logo-text a,
h1.logo a {
    color: inherit; /* garde la couleur par défaut */
    text-decoration: none; /* supprime le soulignement */
    transition: color 0.3s ease;
}

.logo-text a:hover,
h1.logo a:hover {
    color: #D4AF37; /* or */
}