/* Page Rénovation Intérieure - Dark Theme CSS */
/* Scoped to body.page-renovation-interieure to avoid affecting other pages */

/* Variables & base */
body.page-renovation-interieure {
  --background: #1a1a1a;
  --foreground: #ffffff;
  --card: #2a2a2a;
  --card-foreground: #ffffff;
  --muted: #2f2c34;
  --muted-foreground: #e0e0e0;
  --border: #3a3a3a;
  --input: #2a2a2a;
  --primary: #f2e62b;
  --primary-foreground: #000000;
  --secondary: #2f2c34;
  --secondary-foreground: #ffffff;
  --accent: #f2e62b;
  --accent-foreground: #000000;
}

/* Global background */
body.page-renovation-interieure {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
}

/* Sections / cartes */
body.page-renovation-interieure section {
  background-color: #1a1a1a;
  color: #ffffff;
}

body.page-renovation-interieure [data-slot="card"] {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
  border-color: #3a3a3a !important;
}

body.page-renovation-interieure .bg-muted\/50 {
  background-color: rgba(47, 44, 52, 0.5) !important;
}

body.page-renovation-interieure .bg-background {
  background-color: #1a1a1a !important;
}

body.page-renovation-interieure .bg-card {
  background-color: #2a2a2a !important;
}

/* Hero section */
body.page-renovation-interieure section.relative.h-\[60vh\] {
  background: linear-gradient(to bottom right, rgba(242, 230, 43, 0.1), rgba(47, 44, 52, 0.1));
}

body.page-renovation-interieure .bg-gradient-to-b {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7));
}

/* Badge in hero */
body.page-renovation-interieure .bg-white\/90:first-child {
  background-color: rgba(242, 230, 43, 0.9) !important;
  color: #000000 !important;
}

/* Phone button in hero - keep white background */
body.page-renovation-interieure .bg-white\/90.hover\:bg-white {
  background-color: rgba(255, 255, 255, 0.9) !important;
  color: #000000 !important;
}

body.page-renovation-interieure .bg-white\/90.hover\:bg-white:hover {
  background-color: rgba(220, 220, 220, 0.9) !important;
}

body.page-renovation-interieure .bg-white\/90.hover\:bg-white svg {
  color: #000000 !important;
}

/* Hero primary CTA hover */
body.page-renovation-interieure .bg-primary.hover\:bg-primary\/90:hover {
  background-color: rgba(242, 230, 43, 0.8) !important;
}

/* Header CTA hover */
body.page-renovation-interieure .bg-primary.text-primary-foreground.shadow-xs.hover\:bg-primary\/90.h-8 {
  transition: background-color 0.2s ease;
}

body.page-renovation-interieure .bg-primary.text-primary-foreground.shadow-xs.hover\:bg-primary\/90.h-8:hover {
  background-color: rgba(242, 230, 43, 0.8) !important;
}

/* Titres / textes */
body.page-renovation-interieure h1,
body.page-renovation-interieure h2,
body.page-renovation-interieure h3,
body.page-renovation-interieure h4,
body.page-renovation-interieure h5,
body.page-renovation-interieure h6 {
  color: #ffffff !important;
}

body.page-renovation-interieure .text-foreground {
  color: #ffffff !important;
}

body.page-renovation-interieure .text-muted-foreground {
  color: #e0e0e0 !important;
}

body.page-renovation-interieure p {
  color: #e0e0e0;
}

/* Boutons / CTA */
body.page-renovation-interieure .bg-primary {
  background-color: #f2e62b !important;
  color: #000000 !important;
}

body.page-renovation-interieure .hover\:bg-primary\/90:hover {
  background-color: rgba(242, 230, 43, 0.9) !important;
}

body.page-renovation-interieure .text-primary {
  color: #f2e62b !important;
}

body.page-renovation-interieure .text-primary-foreground {
  color: #000000 !important;
}

body.page-renovation-interieure .bg-secondary {
  background-color: #2f2c34 !important;
  color: #ffffff !important;
}

body.page-renovation-interieure .text-secondary-foreground {
  color: #ffffff !important;
}

body.page-renovation-interieure .bg-accent {
  background-color: #f2e62b !important;
  color: #000000 !important;
}

body.page-renovation-interieure .text-accent {
  color: #f2e62b !important;
}

body.page-renovation-interieure .text-accent-foreground {
  color: #000000 !important;
}

/* CTA section */
body.page-renovation-interieure .bg-primary.text-primary-foreground {
  background-color: #f2e62b !important;
  color: #000000 !important;
}

body.page-renovation-interieure .text-primary-foreground\/90 {
  color: rgba(0, 0, 0, 0.9) !important;
}

/* Icônes / SVG */
body.page-renovation-interieure svg {
  color: currentColor;
}

body.page-renovation-interieure .text-primary svg {
  color: #f2e62b !important;
}

body.page-renovation-interieure .text-accent svg {
  color: #f2e62b !important;
}

/* FAQ / accordéons */
body.page-renovation-interieure .border {
  border-color: #3a3a3a !important;
}

body.page-renovation-interieure .bg-background {
  background-color: #1a1a1a !important;
}

/* Footer */
body.page-renovation-interieure footer {
  background-color: #2f2c34 !important;
  border-color: #3a3a3a !important;
}

body.page-renovation-interieure .bg-muted {
  background-color: #2f2c34 !important;
}

body.page-renovation-interieure .border-t {
  border-color: #3a3a3a !important;
}

/* États hover/focus - WCAG compliant */
body.page-renovation-interieure .hover\:text-primary:hover {
  color: #f2e62b !important;
}

body.page-renovation-interieure .hover\:bg-secondary\/80:hover {
  background-color: rgba(47, 44, 52, 0.8) !important;
}

body.page-renovation-interieure .hover\:bg-primary-foreground:hover {
  background-color: #ffffff !important;
  color: #f2e62b !important;
}

body.page-renovation-interieure .hover\:text-accent-foreground:hover {
  color: #000000 !important;
}

/* Enhanced focus states for accessibility */
body.page-renovation-interieure button:focus-visible,
body.page-renovation-interieure a:focus-visible,
body.page-renovation-interieure [data-slot="button"]:focus-visible {
  outline: 2px solid #f2e62b !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(242, 230, 43, 0.3) !important;
}

/* Ensure sufficient contrast on hover states */
body.page-renovation-interieure .hover\:bg-accent:hover {
  background-color: #f2e62b !important;
  color: #000000 !important;
}

/* Focus visible */
body.page-renovation-interieure .focus-visible\:border-ring:focus-visible {
  border-color: #f2e62b !important;
}

body.page-renovation-interieure .focus-visible\:ring-ring\/50:focus-visible {
  box-shadow: 0 0 0 3px rgba(242, 230, 43, 0.5) !important;
}

/* Section "Notre processus de rénovation" : la bulle 2 doit être du même style que les 1,3 et 4 */
body.page-renovation-interieure .bg-secondary\/10 {
  background-color: rgba(242, 230, 43, 0.1) !important;
}

body.page-renovation-interieure .text-secondary {
  color: #f2e62b !important;
}

/* Process section step 2 */
body.page-renovation-interieure .bg-secondary\/10.w-16.h-16 span {
  color: #f2e62b !important;
}

/* CTA section text */
body.page-renovation-interieure .bg-primary.text-primary-foreground h2 {
  color: #000000 !important;
}

/* CTA section phone button hover */
body.page-renovation-interieure .bg-primary.text-primary-foreground .border-primary-foreground.text-primary-foreground:hover {
  background-color: #000000 !important;
  color: #f2e62b !important;
  border-color: #000000 !important;
}

/* WordPress specific overrides */
body.page-renovation-interieure .wp-block-group,
body.page-renovation-interieure .wp-block-columns,
body.page-renovation-interieure .wp-block-column {
  background-color: #1a1a1a;
  color: #ffffff;
}

body.page-renovation-interieure .wp-block-button__link,
body.page-renovation-interieure .wp-element-button {
  background-color: #f2e62b !important;
  color: #000000 !important;
  border-color: #f2e62b !important;
}

body.page-renovation-interieure .entry-content a {
  color: #f2e62b;
}

body.page-renovation-interieure .wp-block-post-title a {
  color: #ffffff;
}

/* Gallery section card titles and locations - ensure WCAG contrast */
body.page-renovation-interieure .absolute.bottom-4.left-4.text-white p {
  color: #ffffff !important;
}

body.page-renovation-interieure .absolute.bottom-4.left-4.text-white p.font-semibold {
  color: #ffffff !important;
}

body.page-renovation-interieure .absolute.bottom-4.left-4.text-white p.opacity-90 {
  color: #ffffff !important;
  opacity: 1 !important;
}