/* ============================================================
   custom-fixes.css
   Patches CSS pour le clone WordPress/Astra/Elementor.
   Charge en DERNIER pour gagner contre les regles du theme.
   ============================================================ */

/* --- 1. Header dedouble (desktop + mobile + menu mobile ouvert) ---
   Astra serie sa CSS responsive de maniere fragile dans le clone : les
   blocs de header desktop ET mobile sont rendus simultanement parce que
   les regles @media qui en cachaient un sont parfois absentes du
   dump CSS. On reapplique manuellement le comportement attendu. */

/* Desktop (>= 1025px) : afficher le header desktop, cacher le mobile */
@media (min-width: 1025px) {
  #ast-desktop-header { display: block !important; }
  #ast-mobile-header  { display: none !important; }
}

/* Tablette + Mobile (<= 1024px) : afficher le header mobile (avec burger) */
@media (max-width: 1024px) {
  #ast-desktop-header { display: none !important; }
  #ast-mobile-header  { display: block !important; }
}

/* --- 2. Bouton "Devis gratuit !" double dans le header desktop ---
   Astra rend deux variantes (custom button + menu link). On garde
   uniquement la version stylisee. */
body .ast-builder-button-wrap a.menu-link {
  display: none !important;
}

/* --- 3. Hover/visited link colors dans la section ZoneIntervention ---
   Astra applique des regles globales sur a:hover qui peuvent ecraser
   la couleur des cards. On force la cohérence avec le composant. */
.cct-zone-card:visited,
.cct-zone-card:link {
  color: #000422;
}

/* --- 4. Visual Enhancements for better UX --- */

/* Smooth transitions for all interactive elements */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Improve button hover effects across the site */
.ast-button,
.elementor-button,
.elementor-element.elementor-button {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ast-button:hover,
.elementor-button:hover,
.elementor-element.elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(234, 85, 157, 0.35) !important;
}

/* Enhance testimonial cards with better hover effects */
.elementor-testimonial-wrapper {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.elementor-testimonial-wrapper:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* Improve icon box hover effects */
.elementor-icon-box {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.elementor-icon-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.elementor-icon-box .elementor-icon {
  transition: transform 0.3s ease;
}

.elementor-icon-box:hover .elementor-icon {
  transform: scale(1.1);
}

/* Enhance section backgrounds with subtle gradients */
.elementor-section:not([class*="background"]) {
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}

/* Improve form input styling */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  border-color: #EA559D !important;
  box-shadow: 0 0 0 3px rgba(234, 85, 157, 0.1) !important;
}

/* Enhance navigation menu items */
.main-header-menu a {
  position: relative;
  transition: color 0.3s ease;
}

.main-header-menu a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #EA559D;
  transition: width 0.3s ease;
}

.main-header-menu a:hover::after {
  width: 100%;
}

/* Improve image hover effects */
img:not(.elementor-icon img):not(.custom-logo) {
  transition: transform 0.4s ease, filter 0.4s ease;
}

img:not(.elementor-icon img):not(.custom-logo):hover {
  transform: scale(1.02);
  filter: brightness(1.05);
}

/* Add subtle pulse animation to CTA buttons */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(234, 85, 157, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(234, 85, 157, 0);
  }
}

.ast-button[href*="contact"],
.elementor-button[href*="contact"] {
  animation: pulse-glow 2s infinite;
}

/* Improve zone card visual hierarchy */
.cct-zone-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cct-zone-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

/* Add loading skeleton animation for better perceived performance */
@keyframes skeleton-loading {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

/* Improve footer visual appeal */
.site-footer {
  background: linear-gradient(135deg, #0F172A 0%, #1e293b 100%);
}

/* Enhance social media icons hover */
.elementor-social-icon {
  transition: transform 0.3s ease, color 0.3s ease;
}

.elementor-social-icon:hover {
  transform: translateY(-3px) scale(1.1);
}

/* --- 5. Accessibility Skip Link --- */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #EA559D;
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 10000;
  transition: top 0.3s ease;
  font-weight: 600;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid #0F172A;
  outline-offset: 2px;
}

/* --- 6. Footer Design (DA rose clair) --- */

/* Section principale du footer */
#colophon .elementor-element-e2153a2 {
  background: linear-gradient(180deg, #fceef5 0%, #f9e5f0 100%) !important;
  padding: 48px 0 !important;
}

/* Supprimer les fonds blancs des colonnes/widgets du footer */
#colophon .elementor-element-e2153a2 .elementor-column,
#colophon .elementor-element-e2153a2 .elementor-widget-wrap,
#colophon .elementor-element-e2153a2 .elementor-element,
#colophon .elementor-element-e2153a2 .elementor-widget-container,
#colophon .elementor-element-e2153a2 .elementor-container {
  background: transparent !important;
  background-color: transparent !important;
}

/* Titres de colonnes */
#colophon .elementor-element-e2153a2 h4.elementor-heading-title {
  color: #0F172A !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  margin-bottom: 14px !important;
}

/* Texte du footer */
#colophon .elementor-element-e2153a2 p,
#colophon .elementor-element-e2153a2 span {
  color: #454F5E !important;
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
}

/* Liens */
#colophon .elementor-element-e2153a2 a,
#colophon .elementor-element-e2153a2 .elementor-icon-list-text {
  color: #454F5E !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
  font-size: 0.9rem !important;
}

#colophon .elementor-element-e2153a2 a:hover {
  color: #EA559D !important;
}

/* Espacement des items de liste */
#colophon .elementor-element-e2153a2 .elementor-icon-list-item {
  padding: 3px 0 !important;
}

/* Icônes (téléphone, email) */
#colophon .elementor-element-e2153a2 .elementor-icon-list-icon i {
  color: #EA559D !important;
}

/* Texte gras */
#colophon .elementor-element-e2153a2 strong {
  color: #0F172A !important;
}

/* Icônes réseaux sociaux */
#colophon .elementor-element-e2153a2 .elementor-social-icon {
  background: rgba(234, 85, 157, 0.12) !important;
  color: #EA559D !important;
  border: 1px solid rgba(234, 85, 157, 0.3) !important;
  transition: all 0.3s ease !important;
}

#colophon .elementor-element-e2153a2 .elementor-social-icon:hover {
  background: #EA559D !important;
  color: #ffffff !important;
  border-color: #EA559D !important;
}

/* Bouton "Faire un devis" */
#colophon .elementor-element-e2153a2 .elementor-button {
  background: #EA559D !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  padding: 10px 22px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

#colophon .elementor-element-e2153a2 .elementor-button:hover {
  background: #d43d87 !important;
  box-shadow: 0 6px 20px rgba(234, 85, 157, 0.35) !important;
  transform: translateY(-2px) !important;
}

/* Barre copyright */
#colophon .elementor-element-5550c1b {
  background: #f0d8e8 !important;
  padding: 12px 0 !important;
  border-top: 1px solid rgba(234, 85, 157, 0.2) !important;
}

#colophon .elementor-element-5550c1b span,
#colophon .elementor-element-5550c1b a {
  color: #64748b !important;
  font-size: 0.85rem !important;
}

#colophon .elementor-element-5550c1b a:hover {
  color: #EA559D !important;
}

/* ============================================================
   7. RESPONSIVE MOBILE (< 768px)
   ============================================================ */

@media (max-width: 768px) {

  /* --- Généralités --- */
  body {
    overflow-x: hidden !important;
  }

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* --- Sections Elementor : 1 colonne en mobile --- */
  .elementor-section .elementor-container {
    flex-direction: column !important;
  }

  .elementor-column {
    width: 100% !important;
    max-width: 100% !important;
  }

  .elementor-section-boxed .elementor-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .elementor-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* --- Typographie responsive --- */
  h1.elementor-heading-title {
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
  }

  h2.elementor-heading-title {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }

  h3.elementor-heading-title {
    font-size: 1.2rem !important;
  }

  .elementor-widget-text-editor p {
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
  }

  /* --- Boutons pleine largeur sur mobile --- */
  .elementor-button-wrapper {
    width: 100% !important;
  }

  .elementor-button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 14px 20px !important;
    font-size: 1rem !important;
  }

  /* --- Témoignages : 1 par ligne --- */
  .elementor-testimonial-wrapper {
    margin-bottom: 24px !important;
  }

  /* --- Icon box : centré --- */
  .elementor-icon-box-wrapper {
    text-align: center !important;
    padding: 20px 16px !important;
  }

  .elementor-icon-box-icon {
    margin: 0 auto 12px !important;
  }

  /* --- Images hero pleine largeur --- */
  .elementor-widget-image img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
  }

  /* --- ZoneIntervention grid : 1 colonne --- */
  .cct-zones__grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 16px !important;
  }

  .cct-zone-card {
    padding: 16px !important;
  }

  /* --- Formulaire de contact --- */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* évite le zoom auto iOS */
  }

  /* --- Footer colonnes empilées --- */
  #colophon .elementor-element-e2153a2 .elementor-container {
    flex-direction: column !important;
    padding: 0 20px !important;
  }

  #colophon .elementor-element-e2153a2 .elementor-column {
    width: 100% !important;
    margin-bottom: 32px !important;
  }

  #colophon .elementor-element-e2153a2 {
    padding: 32px 0 !important;
  }

  /* --- Barre copyright centrée --- */
  #colophon .elementor-element-5550c1b .elementor-container {
    flex-direction: column !important;
    text-align: center !important;
    gap: 6px !important;
    padding: 0 16px !important;
  }

  #colophon .elementor-element-5550c1b .elementor-column {
    width: 100% !important;
  }

  /* --- Scroll-to-top button position --- */
  #scrollToTop {
    bottom: 16px !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
  }

  /* --- Floating CTA button --- */
  #floatingCta {
    bottom: 72px !important;
    right: 16px !important;
    font-size: 0.85rem !important;
    padding: 10px 16px !important;
  }
}

/* Tablette (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {

  .elementor-col-25 {
    width: 50% !important;
    max-width: 50% !important;
  }

  .elementor-col-33 {
    width: 50% !important;
    max-width: 50% !important;
  }

  .cct-zone-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  h1.elementor-heading-title {
    font-size: 2.2rem !important;
  }

  h2.elementor-heading-title {
    font-size: 1.8rem !important;
  }
}

/* ============================================================
   8. HEADER RESPONSIF : Burger menu mobile
   ============================================================ */

/* Header transparent : overlay au-dessus du hero (comme /projets) */
.ast-theme-transparent-header #masthead {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
}
.ast-theme-transparent-header #masthead .ast-main-header-wrap {
  background: transparent;
}
.ast-theme-transparent-header { position: relative; }

/* Liens de la navbar transparente : blancs */
.ast-theme-transparent-header #ast-desktop-header .menu-link,
.ast-theme-transparent-header #ast-desktop-header .ast-custom-button {
  color: #ffffff !important;
}
.ast-theme-transparent-header #ast-desktop-header .menu-link:hover,
.ast-theme-transparent-header #ast-desktop-header .current-menu-item .menu-link {
  color: #EA559D !important;
}
/* Bouton Devis gratuit ! encadre */
.ast-theme-transparent-header #ast-desktop-header .ast-custom-button {
  border: 2px solid rgba(255,255,255,0.85);
  padding: 10px 22px;
  border-radius: 6px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ast-theme-transparent-header #ast-desktop-header .ast-custom-button:hover {
  background: #ffffff;
  color: #EA559D !important;
  border-color: #ffffff;
}
/* Cache le doublon de lien menu-link a cote du custom-button (clone WP) */
.ast-builder-button-wrap .ast-custom-button-link + .menu-link { display: none; }

/* Tablette + Mobile (<= 1024px) : styles du burger menu */
@media (max-width: 1024px) {
  /* Le header mobile s'affiche en flex pour aligner logo + burger */
  #ast-mobile-header .ast-builder-grid-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
  }

  /* Bouton burger : carre rose arrondi avec icone blanche */
  body .menu-toggle.main-header-menu-toggle,
  body .ast-mobile-menu-trigger-fill,
  body .ast-mobile-menu-trigger-minimal,
  body button.menu-toggle.main-header-menu-toggle.ast-mobile-menu-trigger-fill {
    background: #EA559D !important;
    background-color: #EA559D !important;
    border: 0 !important;
    border-radius: 12px !important;
    padding: 0 !important;
    cursor: pointer !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
    box-shadow: 0 6px 16px -4px rgba(234, 85, 157, 0.55) !important;
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease !important;
  }
  body .menu-toggle.main-header-menu-toggle:hover,
  body .ast-mobile-menu-trigger-fill:hover {
    background: #c93d83 !important;
    background-color: #c93d83 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 22px -6px rgba(234, 85, 157, 0.7) !important;
  }

  /* L'icone reste blanche meme quand le header est transparent */
  .ast-theme-transparent-header .menu-toggle.main-header-menu-toggle {
    color: #ffffff !important;
  }

  .menu-toggle .ast-mobile-svg {
    width: 26px; height: 26px;
    fill: currentColor;
  }

  /* Icone X cachee par defaut, icone burger visible */
  .menu-toggle .ast-close-svg { display: none; }
  .menu-toggle .ast-menu-svg  { display: inline-block; }

  /* Quand le menu est ouvert : on inverse */
  .menu-toggle[aria-expanded="true"] .ast-menu-svg  { display: none; }
  .menu-toggle[aria-expanded="true"] .ast-close-svg { display: inline-block; }

  /* Panneau du menu mobile : slide-in depuis le haut */
  .ast-mobile-header-content {
    display: none;
    background: #ffffff;
    border-top: 1px solid #f1d6e4;
    box-shadow: 0 12px 24px -8px rgba(0, 4, 34, 0.15);
    padding: 16px 20px 24px;
  }

  /* Quand actif on affiche */
  #ast-mobile-header.toggle-on .ast-mobile-header-content {
    display: block;
    animation: cct-slide-down .25s ease-out;
  }

  @keyframes cct-slide-down {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Liens du menu mobile */
  .ast-mobile-header-content .main-header-menu {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 4px;
  }

  .ast-mobile-header-content .menu-item {
    border-bottom: 1px solid #f4e4ed;
  }

  .ast-mobile-header-content .menu-item:last-child {
    border-bottom: 0;
  }

  .ast-mobile-header-content .menu-link {
    display: block;
    padding: 14px 8px;
    font-size: 1.05rem;
    font-weight: 500;
    color: #000422 !important;
    text-decoration: none;
    transition: color .2s ease, padding-left .2s ease;
  }

  .ast-mobile-header-content .menu-link:hover,
  .ast-mobile-header-content .current-menu-item .menu-link {
    color: #EA559D !important;
    padding-left: 14px;
  }

  /* Cache le bouton "Devis gratuit !" duplique sur mobile dans la barre */
  #ast-mobile-header .ast-header-button-1 { display: none; }

  /* Logo mobile : un peu plus petit */
  #ast-mobile-header .custom-logo {
    max-width: 80px !important;
    height: auto !important;
  }

  /* Header transparent : pas de bandeau de fond sur mobile, on laisse le logo
     et le burger flotter directement sur l'image du hero */
  .ast-theme-transparent-header #ast-mobile-header,
  .ast-theme-transparent-header #ast-mobile-header .ast-main-header-wrap,
  .ast-theme-transparent-header #ast-mobile-header .ast-primary-header-bar,
  .ast-theme-transparent-header #ast-mobile-header .main-header-bar-wrap {
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border: 0 !important;
  }
}

/* ============================================================
   9. FIX HERO VIDEO & TEXT DISPLAY
   ============================================================ */

/* Masquer les éléments encombrants de la vidéo YouTube (titres, contrôles, bords noirs)
   en "zoomant" dans l'iframe via un scale et en désactivant les interactions. */
.elementor-background-video-container {
  overflow: hidden !important;
  pointer-events: none !important;
}

.elementor-background-video-embed iframe {
  transform: scale(1.35) !important;
  pointer-events: none !important;
}

/* Ajustement de la taille du texte H1 sur Desktop pour éviter qu'il ne soit coupé */
@media (min-width: 1025px) {
  h1.elementor-heading-title {
    font-size: 3.5rem !important;
    line-height: 1.2 !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}