/* ===============================================
   CUSTOM BRANDING - VOYAGE MAJORDHOME
   Styles appliqués sur TOUTES les pages
   =============================================== */

/* ========================================
   1. LOGO ROND (parfaitement circulaire)
   ======================================== */

/* Logo header - ROND */
header .logo,
header div.w-10,
header div.sm\:w-16 {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-radius: 50% !important;
}

header .logo img,
header .site-logo,
header img[src*="logo"],
header img[src*="PHOTO"],
header img[alt*="logo"],
header img[alt*="Majordhome"] {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  max-width: 60px !important;
  max-height: 60px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Responsive header logo */
@media (min-width: 640px) {
  header .logo,
  header div.w-10,
  header div.sm\:w-16 {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
  }

  header .logo img,
  header .site-logo,
  header img[src*="logo"],
  header img[src*="PHOTO"],
  header img[alt*="logo"],
  header img[alt*="Majordhome"] {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
  }
}

/* Logo hero - ROND */
section.h-screen .logo,
section.h-screen div.mx-auto[class*="w-"],
section.h-screen div[class*="mb-"][class*="w-"] {
  width: 140px !important;
  height: 140px !important;
  min-width: 140px !important;
  min-height: 140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-radius: 50% !important;
}

section.h-screen img.site-logo,
section.h-screen img[src*="logo"],
section.h-screen img[src*="PHOTO"],
section.h-screen img[alt*="logo"],
section.h-screen img[alt*="Majordhome"] {
  width: 140px !important;
  height: 140px !important;
  min-width: 140px !important;
  min-height: 140px !important;
  max-width: 140px !important;
  max-height: 140px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4)) !important;
}

/* Responsive hero logo */
@media (min-width: 768px) {
  section.h-screen .logo,
  section.h-screen div.mx-auto[class*="w-"],
  section.h-screen div[class*="mb-"][class*="w-"] {
    width: 190px !important;
    height: 190px !important;
    min-width: 190px !important;
    min-height: 190px !important;
  }

  section.h-screen img.site-logo,
  section.h-screen img[src*="logo"],
  section.h-screen img[src*="PHOTO"],
  section.h-screen img[alt*="logo"],
  section.h-screen img[alt*="Majordhome"] {
    width: 190px !important;
    height: 190px !important;
    min-width: 190px !important;
    min-height: 190px !important;
    max-width: 190px !important;
    max-height: 190px !important;
  }
}

@media (min-width: 1536px) {
  section.h-screen .logo,
  section.h-screen div.mx-auto[class*="w-"],
  section.h-screen div[class*="mb-"][class*="w-"] {
    width: 280px !important;
    height: 280px !important;
    min-width: 280px !important;
    min-height: 280px !important;
  }

  section.h-screen img.site-logo,
  section.h-screen img[src*="logo"],
  section.h-screen img[src*="PHOTO"],
  section.h-screen img[alt*="logo"],
  section.h-screen img[alt*="Majordhome"] {
    width: 280px !important;
    height: 280px !important;
    min-width: 280px !important;
    min-height: 280px !important;
    max-width: 280px !important;
    max-height: 280px !important;
  }
}

/* Logo footer - ROND */
footer .logo,
footer div[class*="logo"],
footer div.w-36,
footer div.sm\:w-48 {
  width: 100px !important;
  height: 100px !important;
  min-width: 100px !important;
  min-height: 100px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  border-radius: 50% !important;
}

footer img.site-logo,
footer img[src*="logo"],
footer img[src*="PHOTO"],
footer img[alt*="logo"],
footer img[alt*="Majordhome"] {
  width: 100px !important;
  height: 100px !important;
  min-width: 100px !important;
  min-height: 100px !important;
  max-width: 100px !important;
  max-height: 100px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Responsive footer logo */
@media (min-width: 640px) {
  footer .logo,
  footer div[class*="logo"],
  footer div.w-36,
  footer div.sm\:w-48 {
    width: 120px !important;
    height: 120px !important;
    min-width: 120px !important;
    min-height: 120px !important;
  }

  footer img.site-logo,
  footer img[src*="logo"],
  footer img[src*="PHOTO"],
  footer img[alt*="logo"],
  footer img[alt*="Majordhome"] {
    width: 120px !important;
    height: 120px !important;
    min-width: 120px !important;
    min-height: 120px !important;
    max-width: 120px !important;
    max-height: 120px !important;
  }
}

/* ========================================
   2. COULEUR DORÉE POUR LE NOM (#cca44b)
   ======================================== */

/* Nom de la marque dans le header */
header span.text-xl,
header span.text-2xl,
header span.text-4xl,
header span.sm\:text-4xl,
header span.font-black,
header span.tracking-tighter,
header .flex.flex-col span:first-child,
header a[href="/"] span.font-black {
  color: #cca44b !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* S'assurer que le style s'applique même si Vue recharge */
nav span.tracking-tighter,
nav .flex.flex-col span {
  color: #cca44b !important;
}

/* ========================================
   3. FORCER LE CHARGEMENT DES IMAGES
   ======================================== */

/* S'assurer que toutes les images de logo sont visibles */
img[src*="PHOTO-2025-11-26-21-15-57"],
img[src*="logo"] {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}