/* === CLEANED styles.css (safe) === */

img{max-width:100%;height:auto;}
:root{--primary-color: #000000;
    --secondary-color: #ffffff;
    --accent-color: #666666;
    --light-gray: #f8f9fa;
    --medium-gray: #e9ecef;
    --dark-gray: #495057;
    --font-primary: 'Inter', sans-serif;
    --font-heading: 'Montserrat', sans-serif;
    --font-serif: 'Playfair Display', serif;
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 30px;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
    --gold-gradient: linear-gradient(135deg, #F9A312, #F895AC);
    --animation-duration: 0.6s;
    --animation-delay: 0.1s;
    --animation-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
*{margin: 0;
    padding: 0;
    box-sizing: border-box;}
body{font-family: var(--font-primary);
    line-height: 1.6;
    color: var(--primary-color);
    background: var(--secondary-color);}
.container{max-width: 1200px;
  margin-top:3rem !important;
    margin: 0 auto;
    padding: 0 var(--spacing-md);}
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: all 0.3s ease;
    padding: 1rem 0;
}
.nav-container{width: 100%;
    margin: 0;
    padding: 0 50px; 
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;}
.logo {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: var(--text-primary);
}
.logo-icon {
    width: 40px;
    height: 40px;
    background: var(--accent-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    color: white;
}
.logo-text {
    text-align: left;
}
.logo-title {
    font-size: 18px;
    font-weight: bold;
    color: var(--text-primary);
    line-height: 1.2;
}
.logo-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.2;
}
.nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 30px;
    align-items: center;
    margin: 0 auto;
}
.nav-link {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
}
.nav-link:hover {
    color: var(--accent-primary);
}
  .nav-link.active {
    /* Pas de background, juste le soulignement */
  }
.dropdown-menu{position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    margin-top: 10px;
    list-style: none;
    padding: 0;}
.nav-dropdown.active .dropdown-menu{opacity: 1;
    visibility: visible;
    transform: translateY(0);}
.dropdown-link{display: block;
    padding: 12px 20px;
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 1px solid var(--border-color);}
.dropdown-link:last-child{border-bottom: none;}
.dropdown-link:hover{background: var(--accent-primary);
    color: white;}
.nav-actions{display: flex;
    align-items: center;
    gap: 40px;
    margin-left: auto;}
.language-selector{position: relative;
    margin-left: 20px;}
.language-btn{display: flex;
    align-items: center;
    gap: 8px;
    background: var(--light-gray);
    border: none;
    padding: 10px 15px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
    color: var(--dark-gray);
    font-weight: 500;}
.language-btn:hover{background: var(--medium-gray);
    transform: translateY(-2px);}
.language-btn i:first-child{color: var(--primary-color);}
.language-dropdown{position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--transition);
    z-index: 1000;
    margin-top: 5px;}
.language-dropdown.show{opacity: 1;
    visibility: visible;
    transform: translateY(0);}
.language-option{display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--dark-gray);
    transition: var(--transition);
    border-bottom: 1px solid var(--light-gray);}
.language-option:last-child{border-bottom: none;}
.language-option:hover{background: var(--light-gray);
    color: var(--primary-color);}
.language-option.active{background: var(--primary-color);
    color: white;}
.flag{font-size: 1.2rem;}
.lang-name{font-weight: 500;}
.language-change-notification{position: fixed;
    top: 20px;
    right: 20px;
    background: var(--primary-color);
    color: white;
    padding: 15px 20px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1000;}
.language-change-notification.show{transform: translateX(0);}
.language-change-notification i{color: #27ae60;}
.filter-btn.active{background: var(--primary-color);
    color: white;}
.no-articles i{font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.5;}
.no-articles h3{font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--dark-gray);}
.no-articles p{font-size: 1.1rem;
    opacity: 0.8;}
.logo{display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    height: 40px;}
.logo-icon{width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #F9A312, #F895AC);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    
    
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);}
.logo-icon::before{content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 0%,
        transparent 40%,
        rgba(255, 255, 255, 0.15) 45%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0.15) 55%,
        transparent 60%,
        transparent 100%
    );
    transform: translateX(-100%) translateY(-100%);
    animation: shine 10s ease-in-out infinite;
    z-index: 1;
    transition: all 0.3s ease;}
.logo-icon:hover::before{animation: shine 3s ease-in-out infinite;
    background: linear-gradient(
        45deg,
        transparent 0%,
        transparent 35%,
        rgba(255, 255, 255, 0.25) 40%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0.25) 60%,
        transparent 65%,
        transparent 100%
    );}
.logo-icon span{color: var(--secondary-color);
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);}
.logo-text{display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 100%;}
.logo-title{font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--primary-color);
    letter-spacing: 1px;
    line-height: 1;}
.logo-subtitle{font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--accent-color);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1;
    margin-top: 1px;}
.nav-link{text-decoration: none;
    color: var(--primary-color);
    font-weight: 500;
    transition: var(--transition);
    font-size: 0.9rem;}
.nav-link:hover{color: var(--accent-color);}
.nav-dropdown{position: relative;}
.nav-dropdown .nav-link{display: flex;
    align-items: center;
    gap: 0.3rem;}
.dropdown-menu{position: absolute;
    top: 100%;
    left: 0;
    background: var(--secondary-color);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) 0;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--transition);
    z-index: 1001;
    list-style: none;}
.nav-dropdown:hover .dropdown-menu{opacity: 1;
    visibility: visible;
    transform: translateY(0);}
.dropdown-link{display: block;
    padding: 0.8rem var(--spacing-md);
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: var(--transition);}
.dropdown-link:hover{background: var(--light-gray);
    color: var(--accent-color);}
.nav-actions{display: flex;
    align-items: center;
    gap: var(--spacing-sm);}
.btn{display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;}
.btn-primary{background: var(--gold-gradient);
    color: var(--secondary-color);
    border: none;
    position: relative;
    overflow: hidden;}
.btn-primary::before{content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;}
.btn-primary:hover::before{left: 100%;}
.btn-primary:hover{background: linear-gradient(135deg, #F895AC, #F9A312);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);}
.btn-outline{background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);}
.btn-outline:hover{background: var(--primary-color);
    color: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);}
.hero-actions .btn{opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    display: inline-flex !important;
    position: relative !important;
    z-index: 10 !important;}
.hero-actions .btn:hover{transform: translateY(-2px) !important;}
.hero-actions .btn-primary{background: var(--gold-gradient) !important;
    color: var(--secondary-color) !important;
    border: none !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;}
.hero-actions .btn-primary:hover{background: linear-gradient(135deg, #F895AC, #F9A312) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;}
.hero-actions .btn-outline{background: transparent !important;
    color: var(--primary-color) !important;
    border: 2px solid var(--primary-color) !important;
    font-weight: 600 !important;}
.hero-actions .btn-outline:hover{background: var(--primary-color) !important;
    color: var(--secondary-color) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;}
.btn-sm{padding: 0.6rem 1rem;
    font-size: 0.8rem;}
.btn-phone{background: var(--primary-color);
    color: var(--secondary-color);
    border: none;
    position: relative;
    overflow: hidden;}
.btn-phone i{font-size: 0.9rem;
    margin-right: 0.3rem;}
/* Styles spécifiques à l'accueil uniquement */
.page-accueil .hero,
.index .hero,
body:not([class*="page-"]) .hero {
  padding: 0;
  background: var(--secondary-color);
  height: calc(100vh - 80px);
  display: flex;
  align-items: center;
}

.page-accueil .hero-container,
.index .hero-container,
body:not([class*="page-"]) .hero-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  align-items: center;
  height: 100%;
}

.page-accueil .hero-content,
.index .hero-content,
body:not([class*="page-"]) .hero-content {
  padding-right: var(--spacing-lg);
}

.page-accueil .hero-title,
.index .hero-title,
body:not([class*="page-"]) .hero-title {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: var(--spacing-md);
  color: #000000;
  text-transform: uppercase;
  letter-spacing: -1px;
}

.nice-accent{color: var(--primary-color);}

.page-accueil .hero-subtitle,
.index .hero-subtitle,
body:not([class*="page-"]) .hero-subtitle {
  font-size: 1.1rem;
  color: var(--dark-gray);
  margin-bottom: var(--spacing-lg);
  line-height: 1.6;
}
.hero-actions{display: flex;
    gap: 5px;
    flex-wrap: wrap;}
.hero-image{position: relative;
    perspective: 1000px;
    transform-style: preserve-3d;}
.hero-image-card{position: relative;
    width: 100%;
    height: 500px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: transform 0.8s ease;
    transform-style: preserve-3d;
    cursor: pointer;}
.hero-image-card:hover{transform: scale(1.005);}
.hero-image-card img{width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-xl);
    transition: transform 0.8s ease;
    animation: heroZoom 30s cubic-bezier(0.4, 0, 0.2, 1) infinite;}
.hero-image-card:hover img{transform: scale(1.005);}
.hero-badge{position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    background: rgba(0, 0, 0, 0.8);
    color: var(--secondary-color);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 2;
    transition: all 0.3s ease;}
.hero-image-card:hover .hero-badge{transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);}
.section-header{text-align: center !important;}
.section-header .section-title{text-align: center !important;}
.section-header .section-subtitle{text-align: center !important;}

.section-left {
  text-align: left !important;
}
.section-title{font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: -1px;
    text-align: center;}
.section-subtitle{font-size: 1.1rem;
    color: var(--dark-gray);
    margin: 0 auto;
    text-align: center;}
.why-choose-us{padding: 80px 0;
    background: var(--light-gray);}
.why-choose-grid{display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);}
.why-choose-card{background: var(--secondary-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: var(--transition);
    border: 1px solid var(--medium-gray);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);}
.why-choose-card:hover{transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);}
.why-choose-icon{width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #F9A312, #F895AC);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition);}
.why-choose-icon i{color: var(--secondary-color);
    font-size: 1.5rem;}
.why-choose-card:hover .why-choose-icon{transform: scale(1.1);}
.why-choose-content h3{font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: -0.5px;}
.why-choose-content p{color: var(--dark-gray);
    line-height: 1.6;
    font-size: 0.95rem;}
.testimonials{padding: 80px 0;
    background: var(--secondary-color);
    position: relative;}
.testimonials::before{content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--medium-gray), transparent);}
.testimonials-slider{position: relative;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;}
.testimonial-slide{display: none;
    animation: fadeIn 0.5s ease-in-out;}
.testimonial-slide.active{display: block;}
.testimonial-quote{margin-bottom: var(--spacing-lg);
    position: relative;}
.testimonial-quote i{font-size: 3rem;
    color: var(--accent-color);
    opacity: 0.3;
    margin-bottom: var(--spacing-md);
    display: block;}
.testimonial-quote p{font-size: 1.2rem;
    line-height: 1.8;
    color: var(--dark-gray);
    font-style: italic;
    margin: 0;
    position: relative;
    z-index: 1;}
.testimonial-author{display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);}
.author-details h4{font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 0.2rem 0;
    text-transform: uppercase;
    letter-spacing: -0.5px;}
.author-details span{font-size: 0.9rem;
    color: var(--accent-color);
    font-weight: 500;}
.testimonial-nav{display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xl);}
.nav-dot{width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--medium-gray);
    border: none;
    cursor: pointer;
    transition: var(--transition);}
.nav-dot.active, .nav-dot:hover{background: linear-gradient(135deg, #F9A312, #F895AC);
    transform: scale(1.2);}

    /* ==== Trust Banner — variante SOBRE / DISCRÈTE ==== */
.trust-banner.trust-banner--minimal { padding: 12px 0 26px; }
.trust-banner.trust-banner--minimal .trust-wrap {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.trust-banner.trust-banner--minimal .trust-wrap::before { display: none; }

/* Grille compacte, centrée, sans cartes */
.trust-banner.trust-banner--minimal .trust-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 6px 0 0;
}

/* Items “plats” + séparateurs fins entre eux */
.trust-banner.trust-banner--minimal .trust-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 8px 14px;
  border-radius: 0;
  display: inline-grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  transition: none;
}
.trust-banner.trust-banner--minimal .trust-card:hover { transform: none; box-shadow: none; }
.trust-banner.trust-banner--minimal .trust-card + .trust-card {
  position: relative;
}
.trust-banner.trust-banner--minimal .trust-card + .trust-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 22px;
  background: var(--medium-gray);
  opacity: .35;
  transform: translateY(-50%);
}

/* Icônes sobres (contour léger) */
.trust-banner.trust-banner--minimal .trust-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid var(--medium-gray);
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
}
.trust-banner.trust-banner--minimal .trust-icon svg,
.trust-banner.trust-banner--minimal .trust-icon i[data-lucide] {
  width: 16px; height: 16px;
  stroke-width: 2;
  color: var(--dark-gray);
}

/* Typo plus neutre */
.trust-banner.trust-banner--minimal .trust-kpi { line-height: 1.25; }
.trust-banner.trust-banner--minimal .trust-kpi strong {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-color, #111);
  font-size: 1rem;
}
.trust-banner.trust-banner--minimal .trust-label {
  color: var(--dark-gray);
  font-weight: 500;
  font-size: .86rem;
}

/* Responsive : 2 colonnes puis 1, séparateurs adaptés */
@media (max-width: 1023px) {
  .trust-banner.trust-banner--minimal .trust-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    grid-auto-flow: row;
    gap: 0;
  }
  .trust-banner.trust-banner--minimal .trust-card {
    padding: 10px 12px;
  }
  /* séparateur vertical supprimé en mobile, on met un filet horizontal subtil */
  .trust-banner.trust-banner--minimal .trust-card::before { display: none; }
  .trust-banner.trust-banner--minimal .trust-card {
    border-top: 1px solid rgba(0,0,0,.06);
  }
  .trust-banner.trust-banner--minimal .trust-card:nth-child(-n+2) {
    border-top: 0; /* pas de ligne sur la première rangée */
  }
}
@media (max-width: 560px) {
  .trust-banner.trust-banner--minimal .trust-grid { grid-template-columns: 1fr; }
  .trust-banner.trust-banner--minimal .trust-card { padding: 12px 10px; }
}

@keyframes fadeIn{from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }}
.collection{padding: 80px 0;
    background: var(--light-gray);}
.collection-grid{display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
  }
.collection-card{background: var(--secondary-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    border: 1px solid var(--medium-gray);}
.collection-card:hover{transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);}
.collection-image{height: 200px;
    overflow: hidden;}
.collection-image img{width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);}
.collection-card:hover .collection-image img{transform: scale(1.05);}
.collection-content{padding: var(--spacing-lg);
    text-align: center;}
.collection-content h3{font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: -0.5px;}
.collection-content p{color: var(--dark-gray);
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
    font-size: 0.95rem;}
.collection-link{display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: #F9A312;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition);
    padding: var(--spacing-sm) 0;
    border-bottom: 2px solid transparent;}
.collection-link:hover{color: #F9A312;
    border-bottom-color: #F9A312;}
.collection-link i{transition: var(--transition);}
.collection-link:hover i{transform: translateX(4px);}
.collection-cta{text-align: center;
    margin-top: var(--spacing-xl);}
.properties{padding: 80px 0;
    background: var(--secondary-color);}
.properties-grid{display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);}
.property-card{background: var(--light-gray);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    border: 1px solid var(--medium-gray);}
.property-card:hover{transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);}
.property-image{height: 200px;
    position: relative;
    overflow: hidden;}
.property-image img{width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);}
.property-card:hover .property-image img{transform: scale(1.05);}
.property-badge{position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background: linear-gradient(135deg, #F9A312, #F895AC);
    color: var(--secondary-color);
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 2;}
.property-content{padding: var(--spacing-lg);
    text-align: center;}
.property-content h3{font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: -0.5px;}
.property-content p{color: var(--dark-gray);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
    font-size: 0.95rem;}
.property-price{font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: #F9A312;
    text-transform: uppercase;
    letter-spacing: -0.5px;}
.lifestyle{padding: 80px 0;
    background: var(--light-gray);}
.lifestyle-grid{display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);}
.lifestyle-card{background: var(--secondary-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
    border: 1px solid var(--medium-gray);}
.lifestyle-card:hover{transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);}
.lifestyle-image{height: 200px;
    overflow: hidden;}
.lifestyle-image img{width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);}
.lifestyle-card:hover .lifestyle-image img{transform: scale(1.05);}
.lifestyle-content{padding: var(--spacing-lg);
    text-align: center;}
.lifestyle-content h3{font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: -0.5px;}
.lifestyle-content p{color: var(--dark-gray);
    line-height: 1.6;
    font-size: 0.95rem;}
.estimation-section{padding: 80px 0;
    background: var(--secondary-color);}
.estimation-content{display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);}
.estimation-process{margin-top: var(--spacing-xl);
    text-align: center;}
.estimation-process h3{font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-lg);
    text-transform: uppercase;
    letter-spacing: -0.5px;}
.services{
    padding: 80px 0;
    background: var(--secondary-color);
    position: relative;
    z-index: auto;
    /* S'assurer que la section est bien séparée du hero */
    margin-top: 0;
    /* S'assurer que la section ne coupe pas le hero */
    clear: both;
    overflow: visible;
}
.services-grid{display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
    align-items: stretch;}
.service-card{background: var(--light-gray);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: var(--transition);
    border: 1px solid var(--medium-gray);
    position: relative;
    overflow: hidden;
    text-align: left;}
.service-card:hover{transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);}
.service-icon{width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #F9A312, #F895AC);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 var(--spacing-md) 0;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);}
.service-icon i{color: var(--secondary-color);
    font-size: 1.8rem;}
.service-card:hover .service-icon{background: linear-gradient(135deg, #F895AC, #F9A312);
    transform: scale(1.05) rotate(5deg);
    box-shadow: var(--shadow-md);}
.service-content h3{font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: -0.5px;}
.service-description{font-size: 0.95rem;
    color: var(--dark-gray);
    line-height: 1.5;
    margin-bottom: var(--spacing-md);}
.service-features{list-style: none;
    margin-bottom: var(--spacing-lg);}
.service-features li{display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-sm);
    color: var(--dark-gray);
    margin-bottom: var(--spacing-xs);
    font-size: 0.9rem;}
.service-features li i{color: #F9A312;
    font-size: 1rem;
    flex-shrink: 0;}
.service-link{display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: #F9A312;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition);
    padding: var(--spacing-sm) 0;
    border-bottom: 2px solid transparent;}
.service-link:hover{color: #F9A312;
    border-bottom-color: #F9A312;}
.service-link i{transition: var(--transition);}
.service-link:hover i{transform: translateX(4px);}
.lifestyle-neighborhoods{padding: 80px 0;
    background: var(--light-gray);}
.lifestyle-filters{display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;}
.filter-btn i{width: 18px; height: 18px;}
.filter-btn:hover, .filter-btn.active{background: linear-gradient(135deg, #F9A312, #F895AC);
    border-color: transparent;
    color: var(--secondary-color);
    box-shadow: var(--shadow-md);}
.neighborhoods-grid.teasing{gap: var(--spacing-lg);}
.neighborhoods-grid.teasing .neighborhood-card{opacity: 1; transform: none;}
.neighborhood-card[data-hidden="true"]{display: none;}
.neighborhood-content .neighborhood-meta, .neighborhood-content .neighborhood-meta-pills{display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.3rem 0 var(--spacing-sm);}
.meta-pill.meta-price{background: linear-gradient(135deg, #F9A312, #F895AC);
    border-color: transparent;
    color: var(--secondary-color);
    font-weight: 700;}
.lifestyle-cta{text-align: center;
    margin-top: var(--spacing-xl);}
.neighborhood-image img{width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);}
.neighborhood-card:hover .neighborhood-image img{transform: scale(1.05);}
.neighborhood-content h3{font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-xs);}
.neighborhood-content p{color: var(--dark-gray);
    margin-bottom: var(--spacing-sm);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3.2em;}
.neighborhood-features li{color: var(--dark-gray);
    margin-bottom: 0.5rem;
    position: relative;
    padding-left: 1.5rem;}
.neighborhood-features li::before{content: "•";
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;}
.contact{padding: 80px 0;
    background: var(--secondary-color);}
.contact-content{display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;}
.contact-info h2{font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: -1px;}
.contact-info p{font-size: 1.1rem;
    color: var(--dark-gray);
    margin-bottom: var(--spacing-lg);}
.contact-details{display: flex;
    flex-direction: column;
    gap: var(--spacing-md);}
.contact-item{display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--dark-gray);}
.contact-item i{color: var(--primary-color);
    font-size: 1.2rem;}
.contact-form{background: var(--light-gray);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);}
.subject-form-contact{
  margin-bottom:25px !important;
}
.form-group{margin-bottom: var(--spacing-md);}
.form-group input, .form-group textarea{width: 100%;
    padding: 1rem;
    border: 2px solid var(--medium-gray);
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: 0.9rem;
    transition: var(--transition);
    background: var(--secondary-color);}
.form-group input:focus, .form-group textarea:focus{outline: none;
    border-color: var(--primary-color);}
.form-group textarea{resize: vertical;
    min-height: 120px;}

.estimation-hero{padding: 120px 0 60px;
    background: linear-gradient(135deg, rgba(249, 163, 18, 0.05) 0%, rgba(248, 149, 172, 0.05) 100%);
    text-align: center;}
.estimation-info-section{padding: 60px 0;
    background: var(--light-gray);}
.estimation-info-section .estimation-info{display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    max-width: 1200px;
    margin: 0 auto;}
.estimation-hero .hero-title{font-size: 3rem;
    margin-bottom: var(--spacing-md);}
.estimation-hero .hero-subtitle{font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto var(--spacing-lg);}
.hero-badges{display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;}
.hero-badges .hero-badge{display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--secondary-color);
    padding: 0.8rem 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--medium-gray);}
.hero-badges .hero-badge i{color: var(--primary-color);
    font-size: 1.2rem;}
.hero-badges .hero-badge span{font-weight: 600;
    color: var(--primary-color);
    font-size: 0.9rem;}
.estimation-content{display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--spacing-xl);}
.estimation-info{display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);}
.info-card{background: var(--secondary-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--medium-gray);
    transition: var(--transition);}
.info-card:hover{transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);}
.info-icon{width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #F9A312, #F895AC);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);}
.info-icon i{color: var(--secondary-color);
    font-size: 1.5rem;}
.info-card h3{font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);}
.info-card p{color: var(--dark-gray);
    line-height: 1.6;
    font-size: 0.95rem;}
.estimation-form-container{background: var(--secondary-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    border: 1px solid var(--medium-gray);
    box-shadow: var(--shadow-sm);}
.form-header{text-align: center;
    margin-bottom: var(--spacing-xl);}
.form-header h3{font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);}
.form-header p{color: var(--dark-gray);
    font-size: 1rem;}
.estimation-form{display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
padding-bottom:3rem;}
.form-row{display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);}
.form-group{display: flex;
    flex-direction: column;
    gap: 5px;}
.form-group label{font-weight: 600;
    color: var(--primary-color);
    font-size: 0.9rem;}
.form-group input, .form-group select, .form-group textarea{padding: 0.8rem;
    border: 2px solid var(--medium-gray);
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: 0.9rem;
    transition: var(--transition);
    background: var(--secondary-color);}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);}
.form-group textarea{resize: vertical;
    min-height: 100px;}
.checkbox-group{margin-top: var(--spacing-sm);}
.checkbox-label{display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--dark-gray);
    line-height: 1.5;}
.checkbox-label input[type="checkbox"]{display: none;}
.checkmark{width: 20px;
    height: 20px;
    border: 2px solid var(--medium-gray);
    border-radius: var(--radius-sm);
    position: relative;
    flex-shrink: 0;
    margin-top: 2px;
    transition: var(--transition);}
.checkbox-label input[type="checkbox"]:checked + .checkmark{background: linear-gradient(135deg, #F9A312, #F895AC);
    border-color: transparent;}
.checkbox-label input[type="checkbox"]:checked + .checkmark::after{content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);}
.estimation-submit{margin-top: var(--spacing-lg);
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;}
.estimation-process-section{padding: 80px 0;
    background: var(--secondary-color);}
.process-step{background: var(--light-gray);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--medium-gray);
    transition: var(--transition);
    text-align: center;}
.process-step:hover{transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);}
.step-number{width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #F9A312, #F895AC);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-color);
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0 auto var(--spacing-md);}
.process-step h4{font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);}
.process-step p{color: var(--dark-gray);
    line-height: 1.6;
    font-size: 0.9rem;}

.mobile-menu{position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: white !important; 
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
    padding: 20px;}
.mobile-menu-header{display: none;}
.mobile-nav-link{display: block;
    padding: 15px 20px;
    color: #1f2937;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: #f9fafb;}
.mobile-dropdown-btn{width: 100%;
    padding: 15px 20px;
    background: #f9fafb;
    border: none;
    color: #1f2937;
    font-size: 18px;
    font-weight: 500;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;}
.mobile-dropdown-link{display: block;
    padding: 12px 20px;
    color: #6b7280;
    text-decoration: none;
    font-size: 16px;
    border-radius: 6px;
    transition: all 0.3s ease;}
.mobile-dropdown-link:hover{color: var(--accent-primary);
    background: #f9fafb;}
.mobile-actions{display: flex;
    flex-direction: column;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;}
@keyframes titleGlow{0% {
        filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.1));
    }
    100% {
        filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.2));
    }}
@keyframes underlineGlow{0%, 100% {
        opacity: 0.3;
        transform: scaleX(0.8);
    }
    50% {
        opacity: 1;
        transform: scaleX(1);
    }}
@keyframes heroZoom{0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.10);
    }
    100% {
        transform: scale(1);
    }}
.lifestyle-chips{display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;}
.filter-chip i{width: 18px; height: 18px;}
.filter-chip:hover, .filter-chip.active{background: linear-gradient(135deg, #F9A312, #F895AC);
    border-color: transparent;
    color: var(--secondary-color);
    box-shadow: var(--shadow-md);}
.neighborhood-card-cta i{transition: var(--transition); width: 18px; height: 18px;}
.neighborhood-card:hover .neighborhood-card-cta i{transform: translateX(3px);}
.search-box i{color: var(--accent-color);}
.search-box input{border: none;
    outline: none;
    width: 100%;
    font-size: 0.95rem;
    background: transparent;}
.toggle-btn i{width: 18px; height: 18px;}
.toggle-btn.active{background: var(--light-gray);}
.list-item .thumb{width: 56px; height: 56px; border-radius: var(--radius-sm); overflow: hidden;}
.list-item .thumb img{width: 100%; height: 100%; object-fit: cover;}
.list-item .info{display: flex; flex-direction: column; gap: 0.2rem;}
.list-item .info h4{font-size: 1rem; margin: 0;}
.list-item .info .meta{display: flex; gap: 0.35rem; flex-wrap: wrap;}
.list-item .info .meta .meta-pill{padding: 0.2rem 0.5rem; font-size: 0.75rem;}
.list-item .cta{display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; color: #F9A312;}
.quartiers-page .neighborhoods-grid{grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--spacing-md);}
.quartiers-page .neighborhood-card{height: 360px;}
.quartiers-page .neighborhood-image{height: 150px;}
.quartiers-page .neighborhood-content{padding: var(--spacing-md);}
.quartiers-page .neighborhood-content h3{font-size: 1rem; margin-bottom: 0.3rem;}
.quartiers-page .neighborhood-content p{display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    min-height: 2.8em;}
.quartiers-page .meta-pill{padding: 0.2rem 0.5rem; font-size: 0.75rem;}
.quartier-hero-image img{width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);}
.quartier-hero-card:hover .quartier-hero-image img{transform: scale(1.02);}
.quartier-hero-content h1{font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-color);
    margin: 0;
    line-height: 1.1;}
.quartier-hero-content .subtitle{font-size: 1.25rem;
    color: var(--accent-color);
    font-weight: 500;
    margin: 0;}
.quartier-hero-content .meta-pills{display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);}
.quartier-hero-content .meta-pill{background: var(--light-gray);
    color: var(--accent-color);
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid var(--medium-gray);}
.content-grid{display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;}
.quartier-article h2{font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-lg);
    margin-top: 0;}
.quartier-article h3{font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
    margin-top: var(--spacing-xl);}
.quartier-article p{font-size: 1.1rem;
    line-height: 1.7;
    color: var(--dark-gray);
    margin-bottom: var(--spacing-md);}
.info-card{background: var(--secondary-color);
    border: 1px solid var(--medium-gray);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-lg);}
.info-card:last-child{margin-bottom: 0;}
.info-card h3{font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
    margin-top: 0;}
.quick-facts .qf-item{display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--light-gray);
    border-radius: var(--radius-md);
    border: 1px solid var(--medium-gray);}
.quick-facts .qf-item:last-child{margin-bottom: 0;}
.quick-facts .qf-item i{color: var(--accent-color);
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;}
.quick-facts .qf-item span{color: var(--dark-gray);
    line-height: 1.5;}
.quick-facts .qf-item strong{color: var(--primary-color);
    font-weight: 600;}
.score-section h4{font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
    margin-top: 0;}
.score-item span{font-size: 0.875rem;
    color: var(--dark-gray);}
.info-list li{display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--light-gray);
    border-radius: var(--radius-md);
    border: 1px solid var(--medium-gray);
    font-size: 0.875rem;
    color: var(--accent-color);
    line-height: 1.4;}
.info-list li:last-child{margin-bottom: 0;}
.info-list li i{color: var(--accent-color);
    width: 18px;
    height: 18px;
    flex-shrink: 0;}
.info-card .btn{width: 100%;
    margin-top: var(--spacing-md);}
.faq-section h3{font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: var(--spacing-lg);
    margin-top: 0;}
.faq-question i{color: var(--accent-color);
    width: 20px;
    height: 20px;
    transition: var(--transition);}
.faq-question.active i{transform: rotate(180deg);}
.faq-answer.active{padding: var(--spacing-md);
    max-height: 200px;}
.breadcrumbs{font-size: 0.875rem;
    color: var(--accent-color);
    margin-bottom: var(--spacing-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;}
.breadcrumbs a{color: var(--accent-color);
    text-decoration: none;
    transition: var(--transition);}
.breadcrumbs a:hover{color: var(--primary-color);}
.breadcrumbs .sep{color: var(--medium-gray);
    margin: 0 var(--spacing-xs);}
.metric-chip i{color: var(--accent-color);
    width: 16px;
    height: 16px;}
.hero-cta .btn{font-size: 1.125rem;
    padding: var(--spacing-md) var(--spacing-xl);}
.hero-cta .btn i{width: 20px;
    height: 20px;}
.btn-secondary{background: var(--secondary-color);
    color: var(--accent-color);
    border: 1px solid var(--medium-gray);}
.btn-secondary:hover{background: var(--light-gray);
    border-color: var(--accent-color);
    color: var(--primary-color);}
.cta-buttons .btn{flex: 1;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.875rem;
    min-height: 40px;}
.cta-buttons .btn i{width: 16px;
    height: 16px;
    margin-right: var(--spacing-xs);}
.quartier-hero-content h1, .quartier-hero-content p, .quartier-hero-content .meta-pills, .quartier-article h2, .quartier-article h3, .quartier-article p, .quartier-article .neighborhood-tags, .quartier-article .quick-facts, .quartier-article .fact-item, .info-card h3, .info-card p, .price-note, .neighborhood-content h3, .neighborhood-content p, .contact-info h2, .contact-info p, .contact-details .contact-item{text-align: left;}
@keyframes shine{0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    20% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }}

.mobile-menu{position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--bg-primary);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
    padding: 20px;}
.mobile-menu-header{display: none !important;}
.mobile-nav-links{list-style: none;
    padding: 0;
    margin: 0 0 30px 0;}
.mobile-nav-links li{margin-bottom: 15px;}
.mobile-nav-link{display: block;
    padding: 15px 20px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: var(--bg-secondary);}
.mobile-nav-link:hover{background: var(--accent-primary);
    color: white;
    transform: translateX(10px);}
.mobile-dropdown{margin-bottom: 15px;}
.mobile-dropdown-btn{width: 100%;
    padding: 15px 20px;
    background: var(--bg-secondary);
    border: none;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 500;
    text-align: left;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;}
.mobile-dropdown-btn:hover{background: var(--accent-primary);
    color: white;}
.mobile-dropdown-btn i{transition: transform 0.3s ease;}
.mobile-dropdown-menu{list-style: none;
    padding: 0;
    margin: 10px 0 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;}
.mobile-dropdown.active .mobile-dropdown-menu{max-height: 200px;}
.mobile-dropdown-link{display: block;
    padding: 12px 20px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 16px;
    border-radius: 6px;
    transition: all 0.3s ease;}
.mobile-dropdown-link:hover{color: var(--accent-primary);
    background: var(--bg-secondary);}
.mobile-actions{display: flex;
    flex-direction: column;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);}
.btn-phone.btn-full{width: 100%;
    justify-content: center;
    padding: 15px 20px;
    font-size: 16px;}
.mobile-language-selector{display: flex;
    justify-content: center;}
.coming-soon-section{padding: 4rem 0;
    background: var(--bg-secondary);}
.coming-soon-content{text-align: center;
    max-width: 600px;
    margin: 0 auto;
    padding: 3rem 2rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);}
.coming-soon-content h2{font-size: 2.5rem;
    color: var(--accent-primary);
    margin-bottom: 1.5rem;
    font-weight: 700;}
.coming-soon-content p{font-size: 1.2rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 2rem;}
.coming-soon-icon{font-size: 4rem;
    margin-top: 1rem;}
.coming-soon-note p{margin: 0;
    font-size: 0.9rem;
    color: var(--text-tertiary);
    font-style: italic;}
.neighborhoods-teaser{padding: 80px 0;
  background:
    radial-gradient(800px 300px at 0% 0%, rgba(249,163,18,.08), transparent),
    radial-gradient(800px 300px at 100% 100%, rgba(248,149,172,.08), transparent),
    var(--secondary-color);}
.teaser-grid{display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--spacing-xl);
  align-items: center;}
.teaser-content .section-title{margin-bottom: var(--spacing-sm); text-align: left !important;}
.teaser-content .section-subtitle{margin-bottom: var(--spacing-lg); text-align: left !important;}
.teaser-highlights{list-style: none;
  display: grid;
  gap: .75rem;
  margin: 0 0 var(--spacing-lg) 0;
  padding: 0;}
.teaser-highlights li{display: flex; align-items: center; gap: .6rem;
  color: var(--dark-gray); font-weight: 600;}
.teaser-highlights i{width: 18px; height: 18px; color: #F9A312;}
.teaser-cta .btn{font-weight: 700;}
.teaser-media{position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  min-height: 320px;
  background: var(--light-gray);}
.teaser-media img{width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.02);
  transition: transform .6s ease;}
.teaser-media:hover img{transform: scale(1.04);}
.teaser-illustration{width: 100%; height: 100%;
  background:
    radial-gradient(220px 220px at 20% 30%, rgba(249,163,18,.25), transparent 60%),
    radial-gradient(220px 220px at 80% 70%, rgba(248,149,172,.25), transparent 60%),
    linear-gradient(180deg, #fff, #fafafa);}

/* Forcer l'alignement à gauche pour la section quartiers sur tous les écrans */
.neighborhoods-teaser .teaser-content .section-title,
.neighborhoods-teaser .teaser-content .section-subtitle {
  text-align: left !important;
}

/* Responsive pour la section quartiers */
@media (max-width: 768px) {
  .neighborhoods-teaser .teaser-content .section-title,
  .neighborhoods-teaser .teaser-content .section-subtitle {
    text-align: left !important;
  }
  
  .teaser-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  
  .teaser-content {
    order: 1;
  }
  
  .teaser-media {
    order: 2;
    min-height: 250px;
  }
}



.mobile-menu{position:fixed; inset:0; background:#fff; transform:translateX(-100%); transition:transform .3s ease; z-index:1000; padding:20px 16px; overflow-y:auto;}
.mobile-menu.active{transform:translateX(0);}
.mobile-nav-link, .mobile-dropdown-btn, .mobile-dropdown-link{min-height:44px;}
body.mobile-menu-open{overflow:hidden;}
.anchor-target{position: relative; top: -90px; height: 0;}
.service-card{scroll-margin-top: 90px;}
.trust-bar{text-align: center;}
.trust-metrics{display: flex;
    justify-content: center;
    gap: 2rem;}
.trust-metrics .metric{display: flex;
  flex-direction: column;
  min-width: 120px;}
.metric-value{font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--primary-color);}
.metric-label{color: var(--dark-gray);
  font-size: 0.9rem;}
.trust-logos{display: flex;
  align-items: center;
  gap: 18px;
  opacity: .8;}
.trust-logos img{height: 28px; width: auto;}
.testimonials .nav-dot{width: 10px; height: 10px;}
.mobile-actions-bar{position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #ffffff;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
  display: none;
  z-index: 1000;
  border-top: 1px solid var(--medium-gray);}
.mobile-actions-bar .mobile-action{flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  text-decoration: none;
  color: var(--primary-color);
  font-weight: 600;
  font-size: 12px;}
.mobile-actions-bar .mobile-action i{width: 18px; height: 18px;}
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:#fff;border-top:1px solid var(--medium-gray);box-shadow:0 -10px 30px rgba(0,0,0,.06)}
.cookie-inner{max-width:1100px;margin:0 auto;padding:16px;display:flex;gap:16px;align-items:center;justify-content:space-between}
.cookie-actions{display:flex;gap:8px;flex-wrap:wrap}
.cookie-form{margin-top:10px;border-top:1px dashed var(--medium-gray);padding-top:10px}
.cookie-row{display:flex;gap:8px;margin-top:6px}
@media(max-width:768px){
  .cookie-inner{flex-direction:column;align-items:stretch}
  .cookie-actions{justify-content:flex-start}
}
.trust-bar{background: var(--secondary-color);
  padding: 16px 0;}
.trust-content{display:flex;
  justify-content:center;}
.trust-metrics{display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;}
.trust-metrics .metric{display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;}
.trust-metrics .metric-value{font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.25rem;
  color: var(--primary-color);
  letter-spacing: -0.5px;
  line-height: 1.1;}
.trust-metrics .metric-label{font-size: .95rem;
  color: var(--dark-gray);
  line-height: 1.3;}

@media (max-width: 768px){
.language-change-notification{right: 10px;
        left: 10px;
        transform: translateY(-100%);}
.language-change-notification.show{transform: translateY(0);}
.language-selector{margin-left: 10px;}
.language-btn{padding: 8px 12px;}
.language-dropdown{right: -20px;}
.estimation-hero .hero-title{font-size: 2.5rem;}
.hero-badges{flex-direction: column;
        align-items: center;}
.page-accueil .hero-container,
.index .hero-container,
body:not([class*="page-"]) .hero-container{
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        text-align: center;}
.page-accueil .hero-content,
.index .hero-content,
body:not([class*="page-"]) .hero-content{padding-right: 0; padding-bottom: 25px;}
.page-accueil .hero-title,
.index .hero-title,
body:not([class*="page-"]) .hero-title{font-size: 2.5rem;}
.page-accueil .hero-actions,
.index .hero-actions,
body:not([class*="page-"]) .hero-actions{justify-content: center;}
.page-accueil .hero-image-card,
.index .hero-image-card,
body:not([class*="page-"]) .hero-image-card{height: 400px;}
.page-accueil .hero-image-card:hover,
.index .hero-image-card:hover,
body:not([class*="page-"]) .hero-image-card:hover{transform: rotateY(-5deg) rotateX(3deg);}
.nav-links{display: none;}
.dropdown-menu{position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: transparent;
        padding: 0;
        margin-top: var(--spacing-sm);}
.dropdown-link{padding: 0.5rem 0;
        color: var(--accent-color);}
.services-grid, .properties-grid, .lifestyle-grid, .neighborhoods-grid, .why-choose-grid, .testimonials-grid{grid-template-columns: 1fr;}
.contact-content{grid-template-columns: 1fr;
        gap: var(--spacing-lg);}
.estimation-content{grid-template-columns: 1fr;
        gap: var(--spacing-lg);}
.form-row{grid-template-columns: 1fr;}
.estimation-info{grid-template-columns: 1fr;}
.progress-steps{flex-direction: column;
        gap: var(--spacing-md);}
.progress-step{flex-direction: row;
        gap: var(--spacing-sm);}
.form-navigation{flex-direction: column;
        gap: var(--spacing-md);}
.quartier-hero-content h1{font-size: 2rem;}
.metric-chip i{width: 14px;
        height: 14px;}
.hero-cta .btn{font-size: 1rem;
        padding: var(--spacing-sm) var(--spacing-lg);}
.nav-links{display: none !important;}
.logo{margin: 0;}
.nav-container{justify-content: space-between; 
        align-items: center;
        padding: 15px 20px;}
body.mobile-menu-open{overflow: hidden;}
.coming-soon-content{padding: 2rem 1rem;
        margin: 0 1rem;}
.coming-soon-content h2{font-size: 2rem;}
.coming-soon-content p{font-size: 1.1rem;}
.coming-soon-icon{font-size: 3rem;}
.page-accueil .hero,
.index .hero,
body:not([class*="page-"]) .hero{
    padding: 88px 0 32px;
    /* S'assurer que le hero garde sa hauteur complète sur mobile */
    min-height: calc(100vh - 120px);
    height: auto;
}

/* S'assurer que la section services suit bien le hero */
.services {
    position: relative;
    z-index: auto;
}
.page-accueil .hero-title,
.index .hero-title,
body:not([class*="page-"]) .hero-title{font-size: clamp(1.8rem, 4.5vw, 2.4rem);}
.section-title{font-size: clamp(1.6rem, 4.5vw, 2rem);}
.container{padding: 0 16px;}
.services-grid, .properties-grid, .lifestyle-grid, .neighborhoods-grid, .why-choose-grid{grid-template-columns: 1fr;}
.contact-content{grid-template-columns: 1fr;}
.trust-content{flex-direction: column; align-items: stretch; gap: 16px;}
.trust-metrics{justify-content: space-between;}
.trust-logos{justify-content: center; flex-wrap: wrap;}
.mobile-actions-bar{display: flex;}
body{padding-bottom: 64px;}
.trust-bar{padding: 12px 0;}
.trust-metrics{gap: 16px;}
.trust-metrics .metric-value{font-size: 1.1rem;}
.trust-metrics .metric-label{font-size: .9rem;}
}


@media (max-width: 992px){
.navbar{background: white !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);}
.logo{margin: 0;}
.nav-container{justify-content: space-between; 
        align-items: center;
        padding: 5px 10px; 
        gap: 5px;}
body.mobile-menu-open{overflow: hidden;}
.navbar{background: #fff; box-shadow: var(--shadow-sm);}
.nav-links{display:none !important;}
.nav-container{padding: 10px 14px; gap: 8px; justify-content: space-between; align-items: center;}
}


@media (max-width: 480px){
.page-accueil .hero-title,
.index .hero-title,
body:not([class*="page-"]) .hero-title{font-size: 2rem;}
.section-title{font-size: 2rem;
        text-align: center !important;}
.page-accueil .hero-actions,
.index .hero-actions,
body:not([class*="page-"]) .hero-actions{flex-direction: column;
        align-items: center;}
.btn{width: 100%;
        justify-content: center;}
.page-accueil .hero-image-card,
.index .hero-image-card,
body:not([class*="page-"]) .hero-image-card{
    height: 300px;
    /* S'assurer que l'image s'affiche complètement */
    overflow: visible;
    position: relative;
}
.page-accueil .hero-badge,
.index .hero-badge,
body:not([class*="page-"]) .hero-badge{top: var(--spacing-sm);
        left: var(--spacing-sm);
        padding: 0.4rem 0.8rem;
        font-size: 0.7rem;}
}


@media (max-width: 1024px){
.content-grid{grid-template-columns: 1fr;
        gap: var(--spacing-lg);}
.hero-cta .btn{width: 100%;
        max-width: 400px;}
}


@media (min-width: 769px){
.mobile-menu{display: none;}
}


@media (max-width: 980px){
.teaser-grid{grid-template-columns: 1fr;
    gap: var(--spacing-lg);}
.teaser-media{min-height: 260px;}
}


@media (max-width: 600px){
.cookie-inner{flex-direction: column; align-items: stretch; gap: 10px;}
.cookie-actions{width: 100%;}
.cookie-actions .btn{width: 100%; justify-content: center;}
}


/* =========================================================
   /acheter — Typographie & lisibilité (prose)
   ========================================================= */
   .page-acheter .container.prose {
    max-width: 920px; /* colonne de lecture confortable */
  }
  
  /* Colonne de lecture (texte courant) */
  .page-acheter .prose :where(p, ul, ol, blockquote){
    max-width: 72ch;
  }
  .page-acheter .prose p{
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--primary-color);
    margin-block: 0.9em;              /* rythme vertical */
    text-wrap: pretty;                 /* évite césures moches */
    hyphens: auto;                     /* césure FR (lang=fr ok) */
  }
  
  /* Titres dans les sections éditoriales (hors hero/section-header) */
  .page-acheter .prose h2,
  .page-acheter .prose h3,
  .page-acheter .prose h4{
    letter-spacing: -0.3px;
    line-height: 1.25;
    margin-top: 1.6em;
    margin-bottom: 0.5em;
  }
  .page-acheter .prose h2:first-child,
  .page-acheter .prose .section-header + *{ /* après l'en-tête de section */
    margin-top: 0.8em;
  }
  
  /* Listes */
  .page-acheter .prose ul,
  .page-acheter .prose ol{
    margin: 1em 0 1.2em;
    padding-left: 1.25rem; /* puces à l'extérieur */
  }
  .page-acheter .prose li{
    margin: 0.35em 0;
    line-height: 1.65;
  }
  .page-acheter .prose ol{ list-style: decimal; }
  .page-acheter .prose ul{ list-style: disc; }
  
  /* Liens éditoriaux */
  .page-acheter .prose a{
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: auto;
  }
  .page-acheter .prose a:hover{
    text-decoration-thickness: 2px;
  }
  
  /* Citations */
  .page-acheter .prose blockquote{
    margin: 1.2em 0;
    padding: 0.8em 1em;
    border-left: 4px solid var(--medium-gray);
    background: var(--light-gray);
    border-radius: var(--radius-md);
    color: var(--dark-gray);
  }
  
  /* Images dans le flux texte */
  .page-acheter .prose :where(img, figure){
    display: block;
    margin: 1.2em 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }
  
  /* Détails / FAQ */
  .page-acheter .faq details{
    border: 1px solid var(--medium-gray);
    border-radius: var(--radius-lg);
    padding: 0.75rem 1rem;
    margin: 0.75rem 0;
    background: #fff;
  }
  .page-acheter .faq summary{
    cursor: pointer;
    font-weight: 700;
    list-style: none;           /* supprime le caret UA */
  }
  .page-acheter .faq summary::-webkit-details-marker { display: none; }
  .page-acheter .faq summary::after{
    content: "▸";
    float: right;
    transform: translateY(1px);
    transition: transform .2s ease;
    opacity: .5;
  }
  .page-acheter .faq details[open] summary::after{
    transform: rotate(90deg) translateY(-1px);
    opacity: .7;
  }
  .page-acheter .faq p{ margin-top: .6rem; color: var(--dark-gray); }
  
  /* Hero — limite la longueur de ligne */
  .page-acheter .hero-content{
    max-width: 62ch;
  }
  .page-acheter .hero-subtitle{
    max-width: 62ch;
    margin-bottom: var(--spacing-md);
  }
  
  /* Grille des quartiers (centrée, cartes propres) */
  .page-acheter .aq-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--spacing-lg);
    max-width: 1000px;
    margin: 0 auto;
  }
  .page-acheter .aq-card{
    background: #fff;
    border: 1px solid var(--medium-gray);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
  }
  .page-acheter .aq-card:hover{
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }
  .page-acheter .aq-card .aq-image{
    display: block; height: 180px; overflow: hidden;
  }
  .page-acheter .aq-card .aq-image img{
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .4s ease;
  }
  .page-acheter .aq-card:hover .aq-image img{ transform: scale(1.04); }
  .page-acheter .aq-card .aq-content{
    padding: 14px;
    display: grid; gap: 6px; justify-items: center; text-align: center;
  }
  .page-acheter .aq-card .aq-title{
    font-weight: 800; letter-spacing: -.2px;
  }
  .page-acheter .aq-section-cta{ text-align: center; margin-top: var(--spacing-xl); }
  
  /* Petites améliorations responsive */
  @media (max-width: 900px){
    .page-acheter .container.prose{ max-width: 92vw; }
    .page-acheter .prose p{ font-size: 1rem; }
  }
/* =========================================================
   /acheter — Layout média-texte alterné + lisibilité
   ========================================================= */

/* Alternance de fond (déjà présent mais au cas où) */
.page-acheter .section { padding: 80px 0; }
.page-acheter .section--white { background: var(--secondary-color); }
.page-acheter .section--tint  { background: var(--light-gray); }
@media (max-width: 900px){ .page-acheter .section { padding: 40px 0; } }

/* En-têtes sans vignette */
.page-acheter .section-header{
  display: grid;
  grid-template-columns: 1fr;
}

/* Réduire l'espacement sur mobile */
@media (max-width: 768px){
  .page-acheter .section-header{
    margin-bottom: var(--spacing-md);
  }
}
.page-acheter .section-header .section-title,
.page-acheter .section-header .section-subtitle{
  text-align: center;
  margin: 0;
}

/* Corps de section : grille 2 colonnes + alternance */
.page-acheter .section-body{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: start;
}
.page-acheter .section-body.media-right .section-copy{ order: 1; }
.page-acheter .section-body.media-right .section-media{ order: 2; }

@media (max-width: 1024px){
  .page-acheter .section-body{
    grid-template-columns: 1fr;
  }
  .page-acheter .section-body .section-media{ order: -1; } /* image avant texte sur mobile */
}

/* Zone texte : colonne de lecture confortable */
.page-acheter .prose.prose-acheter { max-width: 68ch; }
.page-acheter .prose.prose-acheter p{ line-height: 1.75; margin-block: .9em; }
.page-acheter .prose.prose-acheter ul,
.page-acheter .prose.prose-acheter ol{ margin: 1em 0 1.2em; padding-left: 1.25rem; }

/* Responsive mobile : texte aligné à gauche */
@media (max-width: 768px){
  .page-acheter .prose.prose-acheter { 
    max-width: none; 
    text-align: left;
  }
  .page-acheter .prose.prose-acheter p{ 
    text-align: left; 
  }
  .page-acheter .prose.prose-acheter ul,
  .page-acheter .prose.prose-acheter ol{ 
    text-align: left; 
  }
  .page-acheter .marketing-list li{
    text-align: left;
  }
}

/* Zone média : visuel large avec ratio stable */
.page-acheter .section-media .visual{
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: #f6f6f6;
}
.page-acheter .section-media .visual img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3 / 2; /* garde un ratio si pas de hauteur dispo */
  object-fit: cover;
}

/* Hero — maîtrise de la hauteur */
.page-acheter .hero-image-card{
  height: clamp(260px, 38vw, 520px) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.page-acheter .hero-image-card img{ animation: none; object-fit: cover; }
@media (max-width: 900px){
  .page-acheter .hero-image-card{ height: 240px !important; }
}

/* Grille des quartiers (centrée) + cartes */
.page-acheter .aq-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--spacing-lg);
  max-width: 1000px;
  margin: 0 auto;
}
.page-acheter .aq-card{
  background: #fff;
  border: 1px solid var(--medium-gray);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.page-acheter .aq-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.page-acheter .aq-card .aq-image{ display:block; height: 180px; overflow:hidden; }
.page-acheter .aq-card .aq-image img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.page-acheter .aq-card:hover .aq-image img{ transform: scale(1.04); }
.page-acheter .aq-card .aq-content{ padding: 14px; display:grid; gap: 6px; justify-items:center; text-align:center; }

/* Responsive mobile : cartes des quartiers alignées à gauche */
@media (max-width: 768px){
  .page-acheter .aq-card .aq-content{ 
    justify-items: start; 
    text-align: left; 
  }
  .page-acheter .aq-section-cta{ 
    text-align: left; 
  }
}
.page-acheter .aq-card .aq-title{ font-weight: 800; letter-spacing: -.2px; }
.page-acheter .aq-section-cta{ text-align:center; margin-top: var(--spacing-xl); }

/* === /acheter — Media column = same height as text (desktop), no gap === */
@media (min-width: 1025px){
    /* La ligne suit la plus grande colonne */
    .page-acheter .section-body{ align-items: stretch; }
  
    /* La colonne media prend 100% de la hauteur de la ligne */
    .page-acheter .section-media{ display: flex; }
    .page-acheter .section-media .visual{ width: 100%; height: 100%; }
  
    /* L'image remplit la colonne (crop doux via cover) */
    .page-acheter .section-media .visual picture,
    .page-acheter .section-media .visual img{
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;          /* remplit verticalement */
      object-position: center;    /* centre le cadrage */
      aspect-ratio: auto;         /* override de la règle 3/2 existante */
    }
  }
  
  /* Mobile/Tablet : on garde un ratio agréable 3:2, pas d'étirement */
  @media (max-width: 1024px){
    .page-acheter .section-media .visual img{
      height: auto;
      aspect-ratio: 3 / 2;
      object-fit: cover; /* safe, mais ne s'applique pas si height:auto */
    }
  }

/* === HERO VENTE : structure centrée 2 colonnes, CTA alignés, image proportionnée === */
.page-vente .hero.hero--revamp{
    /* Héro plein écran (moins le header), centré verticalement */
    padding: 0;
    min-height: calc(100svh - var(--header-h, 80px));
    display: grid; /* pour éviter tout effet de hauteur résiduelle */
  }
  
  .page-vente .hero--revamp .hero-container{
    display: grid;
    grid-template-columns: 1.15fr 0.85fr; /* + d'espace pour le texte */
    align-items: center;                 /* alignement vertical des 2 colonnes */
    gap: clamp(24px, 6vw, 64px);
    max-width: 1200px;
    margin-inline: auto;
    padding: clamp(24px, 6vw, 48px);
  }
  
  .page-vente .hero--revamp .hero-content{
    max-width: 640px;        /* largeur de ligne idéale pour lisibilité */
    margin-inline: auto;     /* recentre si le contenu est plus court */
  }
  
  .page-vente .hero--revamp .hero-title{
    font-size: clamp(2.2rem, 4.2vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: -0.5px;  /* uppercase OK mais plus compact */
    margin-bottom: var(--spacing-md);
  }
  
  .page-vente .hero--revamp .hero-subtitle{
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    margin-bottom: var(--spacing-lg);
  }
  
  .page-vente .hero--revamp .hero-actions{
    display: flex;
    gap: var(--spacing-md);
    align-items: center;     /* CTA sur la même ligne, mêmes bases */
    flex-wrap: wrap;         /* passe à la ligne proprement si besoin */
    justify-content: flex-start;
  }
  
  .page-vente .hero--revamp .hero-image{
    align-self: center;      /* image centrée verticalement vs texte */
  }
  
  .page-vente .hero--revamp .hero-media-frame{
    /* image proportionnée à sa colonne */
    width: 100%;
    aspect-ratio: 4 / 3;     /* proportion élégante, stable */
    border-radius: var(--radius-xl);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-lg);
  }
  
  .page-vente .hero--revamp .hero-media-frame img{
    width: 100%;
    height: 100%;
    object-fit: cover;        /* remplit le cadre sans déformer */
  }
  
  /* éléments déco : ne perturbent pas la mise en page ni les clics */
  .page-vente .hero--revamp .floating-card,
  .page-vente .hero--revamp .hero-badge,
  .page-vente .hero--revamp .hero-media-overlay{
    pointer-events: none;
  }
  
  /* Responsive : pile au centre, CTA centrés, image un peu plus large */
  @media (max-width: 1024px){
    .page-vente .hero.hero--revamp{
      min-height: unset;
    }
    .page-vente .hero--revamp .hero-container{
      grid-template-columns: 1fr;
      text-align: center;
    }
    .page-vente .hero--revamp .hero-content{ margin-bottom: var(--spacing-xl); }
    .page-vente .hero--revamp .hero-actions{ justify-content: center; }
    .page-vente .hero--revamp .hero-media-frame{ aspect-ratio: 16 / 10; }
  }
/* ================================
   PAGE VENTE — Raffinement global
   (structure, lisibilité, hiérarchie)
   ================================ */

   .page-vente .section{
    padding-block: clamp(56px, 7vw, 96px);
  }
  .page-vente .section--white{ background: var(--secondary-color); }
  .page-vente .section--tint{
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.02) 100%);
  }
  
  /* Eyebrow (petit surtitre) */
  .page-vente .eyebrow{
    font-family: var(--font-heading);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .75rem;
    color: var(--accent-color);
    margin-bottom: var(--spacing-xs);
  }
  
  /* Typo & rythme de lecture */
  .page-vente .prose{ font-size: 1rem; line-height: 1.75; color: var(--primary-color); }
  .page-vente .prose p,
  .page-vente .prose ul,
  .page-vente .prose ol{ max-width: 62ch; }
  .page-vente .prose-vente strong{ font-weight: 700; }
  .page-vente .muted{ color: var(--dark-gray); }
  
  /* Spacing utilitaire (empilement fluide) */
  .page-vente .flow > * + *{ margin-top: var(--spacing-sm); }
  
  /* Liens contextuels (ex: numéro de tel dans le texte) */
  .page-vente .link{
    color: #F9A312;
    text-decoration: none;
    border-bottom: 1px solid rgba(249,163,18,.35);
    transition: var(--transition);
  }
  .page-vente .link:hover{ border-bottom-color: #F9A312; }
  
  /* ====== HERO (compléments légers déjà posés) ====== */
  .page-vente .hero--revamp .hero-media-overlay{
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.25), rgba(0,0,0,0) 55%);
  }
  .page-vente .hero--revamp .floating-card{
    position: absolute;
    right: clamp(12px, 3vw, 24px);
    bottom: clamp(12px, 3vw, 24px);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    background: rgba(255,255,255,.7);
    border: 1px solid rgba(255,255,255,.5);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-lg);
    max-width: 320px;
    color: #111;
  }
  .page-vente .floating-card .fc-row{ display: flex; align-items: center; gap: .75rem; }
  .page-vente .floating-card .fc-row + .fc-row{ margin-top: .5rem; }
  .page-vente .floating-card i{ color: #F9A312; }
  .page-vente .hero-badge{
    position: absolute; top: 12px; left: 12px;
    background: rgba(0,0,0,.6); color: #fff;
    padding: .4rem .7rem; border-radius: var(--radius-md);
    font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  }
  
  /* ====== TRUST BAR (sous le hero) ====== */
  .page-vente .trust-bar{
    background: var(--secondary-color);
  }
  .page-vente .trust-bar .container{ padding-block: clamp(16px, 2.5vw, 22px); }
  .page-vente .trust-metrics{
    display: flex; gap: clamp(16px, 5vw, 48px);
    justify-content: center; align-items: baseline;
    list-style: none; padding: 0; margin: 0; flex-wrap: wrap;
  }
  .page-vente .trust-metrics .metric{ text-align: center; }
  .page-vente .trust-metrics .metric-value{
    display: block; font-family: var(--font-heading);
    font-weight: 900; font-size: clamp(1rem, 2.2vw, 1.25rem);
    letter-spacing: .06em; text-transform: uppercase;
  }
  .page-vente .trust-metrics .metric-label{
    display: block; color: var(--dark-gray); font-size: .9rem;
  }
  
  /* ====== HEADERS de section (déjà présents, on affine) ====== */
  .page-vente .section-header.no-thumb{ margin-bottom: clamp(28px, 4vw, 40px); }
  .page-vente .section-header .section-subtitle{ max-width: 60ch; }
  
  /* ====== CORPS de section (texte + visuel en grille) ====== */
  .page-vente .section-body{
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(24px, 5vw, 56px);
    align-items: center;
  }
  .page-vente .section-body.media-right{
    grid-template-columns: .9fr 1.1fr;
  }
  .page-vente .section-body.media-right .section-media{ order: 2; }
  .page-vente .section-body.media-right .section-copy{ order: 1; }
  
  .page-vente .section-media .visual{
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
  }
  .page-vente .section-media .visual img{ display: block; width: 100%; height: auto; }
  
  /* ====== Bénéfices (cartes icône + texte) ====== */
  .page-vente .benefits-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: var(--spacing-lg);
  }
  @media (max-width: 1100px){ .page-vente .benefits-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 640px){ .page-vente .benefits-grid{ grid-template-columns: 1fr; } }
  
  .page-vente .benefit-card{
    background: var(--secondary-color);
    border: 1px solid var(--medium-gray);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    display: flex; align-items: flex-start; gap: var(--spacing-md);
    transition: var(--transition);
  }
  .page-vente .benefit-card i{ color: #F9A312; }
  .page-vente .benefit-card:hover{
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
  }
  .page-vente .benefit-card h3{
    font-family: var(--font-heading);
    font-weight: 800; font-size: 1.05rem;
    margin: 0 0 .25rem 0;
    text-transform: uppercase; letter-spacing: -.3px;
  }
  .page-vente .benefit-card p{ margin: 0; color: var(--dark-gray); font-size: .95rem; }
  
  /* ====== Listes marketing (puces premium) ====== */
  .page-vente .page-vente .page-vente .page-vente .inline-cta{ margin-top: var(--spacing-md); }
  
  /* ====== Estimation / Formulaire ====== */
  .page-vente .estimation-grid{
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(20px, 5vw, 48px);
    align-items: start;
  }
  .page-vente #lead-form .form-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }
  .page-vente #lead-form .form-check label{
    display: inline-flex; gap: .5rem; align-items: flex-start;
    color: var(--dark-gray); font-size: .9rem;
  }
  .page-vente .form-status{
    margin-top: .75rem; font-size: .9rem; color: var(--dark-gray);
    min-height: 1.4em;
  }
  
  /* ====== FAQ (compat <details>) ====== */
  .page-vente #faq-vendeurs .faq-list{ max-width: 900px; margin: 0 auto; }
  .page-vente #faq-vendeurs details{
    border: 1px solid var(--medium-gray);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    background: var(--secondary-color);
    transition: var(--transition);
  }
  .page-vente #faq-vendeurs details + details{ margin-top: var(--spacing-sm); }
  .page-vente #faq-vendeurs summary{
    cursor: pointer; list-style: none;
    font-weight: 700; font-family: var(--font-heading);
  }
  .page-vente #faq-vendeurs summary::-webkit-details-marker{ display: none; }
  .page-vente #faq-vendeurs details[open]{ box-shadow: var(--shadow-sm); }
  
  /* ====== Icônes Lucide cohérentes ====== */
  .page-vente [data-lucide]{ width: 20px; height: 20px; }
  
  /* ====== Responsive global ====== */
  @media (max-width: 1024px){
    .page-vente .section-body,
    .page-vente .section-body.media-right{ grid-template-columns: 1fr; }
    .page-vente .section-body.media-right .section-media{ order: 1; }
    .page-vente .section-body.media-right .section-copy{ order: 2; }
    .page-vente .estimation-grid{ grid-template-columns: 1fr; }
  }
  @media (max-width: 720px){
    .page-vente #lead-form .form-grid{ grid-template-columns: 1fr; }
  }
    

/* === PATCH 2025-08-16 — Revert: titres hors de la colonne texte, sections en 2 parties === */
/* Partie 1 : header centré, au-dessus (aucun repositionnement en colonne) */
.page-vente .section .section-header{
  text-align: center !important;
  margin-bottom: clamp(28px, 4vw, 40px);
}
.page-vente .section .section-title,
.page-vente .section .section-subtitle{
  text-align: center !important;
  margin-left: 0 !important;
}

/* Neutralise la recomposition via :has() si présente */
.page-vente .section .container:has(.section-body){
  display: block !important;
}

/* Partie 2 : corps de section en 2 colonnes (texte + média) */
.page-vente .section .section-body{
  display: grid !important;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
}

/* Variante media-right : on inverse proprement texte / image uniquement */
.page-vente .section .section-body.media-right{
  grid-template-columns: .9fr 1.1fr;
}
.page-vente .section .section-body.media-right .section-media{ order: 2; }
.page-vente .section .section-body.media-right .section-copy{  order: 1; }

/* Visuel propre et épuré */
.page-vente .section .section-media .visual{
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.page-vente .section .section-media .visual img{
  display: block;
  width: 100%;
  height: auto;
}

/* Responsive : flux vertical propre */
@media (max-width: 1024px){
  .page-vente .section .section-body,
  .page-vente .section .section-body.media-right{
    grid-template-columns: 1fr !important;
  }
  .page-vente .section .section-body.media-right .section-media{ order: 1; }
  .page-vente .section .section-body.media-right .section-copy{  order: 2; }
}



/* === PATCH 2025-08-16 — Vendre page tweaks (per request) === */

/* 1) HERO image: remove text overlay (keep hashtag badge) */
.page-vente .hero--revamp .floating-card{ display: none !important; }

/* 2) Section subtitles: ensure centered under title (safety) */
.page-vente .section .section-header .section-subtitle{
  text-align: center !important;
  margin-left: auto; margin-right: auto;
}

/* 3) "Pourquoi vendre..." cards: single column, centered content */
.page-vente #pourquoi-nous-choisir .benefits-grid{
  display: grid;
  grid-template-columns: 1fr !important;
  max-width: 820px;
  margin-inline: auto;
  gap: var(--spacing-lg);
}
.page-vente #pourquoi-nous-choisir .benefit-card{
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.page-vente #pourquoi-nous-choisir .benefit-card i{
  align-self: center;
}
.page-vente #pourquoi-nous-choisir .benefit-card h3{
  text-align: center;
}

/* 4) "Notre méthode": numbered list with gradient round badges */
.page-vente #methode .page-vente #methode .page-vente #methode /* 5) Bullets: unify to "marketing premium" style across sections, and align */
.page-vente .prose-vente ul{ list-style: none; padding: 0; margin: 0 0 var(--spacing-md) 0; }
.page-vente .prose-vente ul li{
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}
/* Keep existing style for .marketing-list, apply to others */
.page-vente .prose-vente ul:not(.marketing-list) li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em; /* aligns dot with text line */
  width: .6rem; height: .6rem; border-radius: 50%;
  background: linear-gradient(135deg, #F9A312, #F895AC);
}
/* Ensure .marketing-list bullets align the same way */
.page-vente .page-vente /* === Fix Vendre uniquement — titres & sous-titres parfaitement centrés === */
.page-vente .section-header h2,
.page-vente .section-header .section-title{
  text-align: center !important;
}

.page-vente .section-header p,
.page-vente .section-header .section-subtitle{
  text-align: center !important;
  max-width: 62ch;       /* largeur de lecture idéale */
  margin: 0 auto;        /* centre le paragraphe sous le titre */
}




/* === VENDRE — Hero image: keep hashtag badge only (hide other overlays) === */
.page-vente .hero-image-card .floating-card,
.page-vente .hero-image-card .overlay,
.page-vente .hero-image-card .overlay-text,
.page-vente .hero-image-card .caption { display: none !important; }




/* === VENDRE — Center subtitles under section titles === */
.page-vente .section-header .section-subtitle,
.page-vente .section-header p.section-subtitle {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
  max-width: 62ch;
}




/* === VENDRE — "Pourquoi vendre..." cards: single column centered === */
.page-vente .why-choose-us .why-choose-grid{
  grid-template-columns: 1fr !important;
  max-width: 820px;
  margin-inline: auto;
}
.page-vente .why-choose-us .why-choose-card{
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.page-vente .why-choose-us .why-choose-icon{ margin: 0 0 var(--spacing-sm) 0; }
.page-vente .why-choose-us .why-choose-content h3,
.page-vente .why-choose-us .why-choose-content p{ text-align: center; }




/* === VENDRE — "Notre méthode" numbers consistency === */
.page-vente .process-step .step-number{
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #F9A312, #F895AC);
  color: var(--secondary-color);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-md);
}




/* === VENDRE — Unified premium bullets across section lists === */
.page-vente .section-copy ul,
.page-vente .prose ul{
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-md) 0;
}
.page-vente .section-copy ul li,
.page-vente .prose ul li{
  position: relative;
  padding-left: 1.5rem;    /* aligns paragraph start */
  margin-bottom: .5rem;
  line-height: 1.6;
}
.page-vente .section-copy ul li::before,
.page-vente .prose ul li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;             /* aligns dot to text baseline */
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #F9A312, #F895AC);
}
/* Don't interfere with icon lists */
.page-vente .section-copy ul.service-features li,
.page-vente .prose ul.service-features li{ padding-left: 0; }
.page-vente .section-copy ul.service-features li::before,
.page-vente .prose ul.service-features li::before{ content: none; }




/* === CONTACT — Apply premium bullets to lists === */
.contact ul{
  list-style: none;
  margin: 0 0 var(--spacing-md) 0;
  padding: 0;
}
.contact ul li{
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.6;
}
.contact ul li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #F9A312, #F895AC);
}



/* === PATCH 2025-08-17 — Vendre wizard + progress bar === */
/* Top progress (reuse blog style) */
.page-vente #readProgress{
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--gold-gradient);
  z-index: 9999; transition: width .2s linear;
}

/* Estimation wizard layout */









@media (max-width: 980px){
  
}


.page-vente .form-group input,
.page-vente .form-group select,

.page-vente .form-group input:focus,
.page-vente .form-group select:focus,











/* === PATCH 2025-08-17 — Fix: section-subtitle centered (no 2-col spill) on Acheter & Vendre === */
.page-acheter .section .section-header,
.page-vente .section .section-header{
  grid-column: 1 / -1 !important;
}

/* Neutralize grid capture on Acheter when a section uses .section-body */
.page-acheter .section .container:has(.section-body){
  display: block !important;
}

/* Center titles & subtitles on Acheter */
.page-acheter .section .section-header .section-title,
.page-acheter .section .section-header .section-subtitle{
  text-align: center !important;
}
.page-acheter .section .section-header .section-subtitle{
  margin-left: auto;
  margin-right: auto;
  max-width: 62ch;
}

/* Aligner tous les textes à gauche sur mobile pour la page acheter */
@media (max-width: 768px){
  .page-acheter .section .section-header .section-title,
  .page-acheter .section .section-header .section-subtitle{
    text-align: left !important;
  }
  .page-acheter .section .section-header .section-subtitle{
    margin-left: 0;
    margin-right: 0;
    max-width: none;
  }
  .page-acheter .prose.prose-acheter{
    text-align: left;
  }
  .page-acheter .prose.prose-acheter p,
  .page-acheter .prose.prose-acheter ul,
  .page-acheter .prose.prose-acheter ol{
    text-align: left;
  }
}

/* Same centering width for Vendre subtitles */
.page-vente .section .section-header .section-subtitle{
  margin-left: auto;
  margin-right: auto;
  max-width: 62ch;
}


/* === PATCH 2025-08-17 — Vendre: ensure header not trapped by estimation-grid === */
/* Header full-width even if the section uses a custom grid */
.page-vente .section .container:has(.estimation-grid){
  display: block !important;
}

/* Safety: header spans full grid when parent remains a grid */
.page-vente .section .section-header{
  grid-column: 1 / -1 !important;
}


/* === PATCH 2025-08-17 — Vendre: decouple header from any 2-col grids, subtitles truly centered === */
.page-vente .section > .container{
  display: block !important;
}
.page-vente .section .section-header{
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  grid-column: 1 / -1 !important;
}
.page-vente .section .section-header .section-title{
  text-align: center !important;
}
.page-vente .section .section-header .section-subtitle{
  display: block !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 62ch;
}
@media (max-width: 1024px){
  .page-vente .section .section-header .section-subtitle{
    max-width: 68ch;
  }
}


/* === PATCH 2025-08-17 — Vendre: Estimation layout equal columns & centered header === */
.page-vente #estimation .section-header{
  text-align: center !important;
}
.page-vente #estimation .section-header .section-title,
.page-vente #estimation .section-header .section-subtitle{
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}
.page-vente #estimation .section-header .section-subtitle{
  max-width: 62ch;
}

/* Two equal columns for note + form, with responsive stacking */
.page-vente #estimation .estimation-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 5vw, 48px);
  align-items: start;
}
@media (max-width: 980px){
  .page-vente #estimation .estimation-grid{
    grid-template-columns: 1fr;
  }
}





/* === VENDRE — RDV Teaser (single column) === */
.page-vente #estimation .estimation-cta{
  display:block;
  max-width: 920px;
  margin: 0 auto;
}
.page-vente .rdv-card{
  background: var(--light-gray);
  border: 1px solid var(--medium-gray);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 2.4vw, 32px);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.page-vente .rdv-eyebrow{
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .75rem;
  color: var(--accent-color);
  margin-bottom: var(--spacing-xs);
}
.page-vente .rdv-card h3{
  font-family: var(--font-heading);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.3px;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  margin: 0 0 var(--spacing-sm);
}
.page-vente .rdv-points{
  list-style: none; padding: 0; margin: 0 0 var(--spacing-md);
}
.page-vente .rdv-points li{
  position: relative; padding-left: 1.5rem; margin-bottom: .5rem; text-align: left;
}
.page-vente .rdv-points li::before{
  content: ""; position: absolute; left: 0; top: 0.65em;
  width: .6rem; height: .6rem; border-radius: 50%;
  background: linear-gradient(135deg, #F9A312, #F895AC);
}
.page-vente .rdv-ways{
  display: flex; gap: var(--spacing-sm); align-items: center; justify-content: center; flex-wrap: wrap;
}
.page-vente .rdv-ways small{ opacity: .8; }

/* Make sure older grid styles don't interfere */
.page-vente #estimation .estimation-grid{ display: none !important; }

/* === VENDRE — FAQ single column, centered (no image) === */
.page-vente #faq-vendeurs .section-body{ display:block; }
.page-vente #faq-vendeurs .section-media{ display:none !important; }
.page-vente #faq-vendeurs .faq,
.page-vente #faq-vendeurs .faq-list{ max-width: 820px; margin: 0 auto; }
.page-vente #faq-vendeurs details{
  border: 1px solid var(--medium-gray);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  background: var(--secondary-color);
  transition: var(--transition);
}
.page-vente #faq-vendeurs details + details{ margin-top: var(--spacing-sm); }
.page-vente #faq-vendeurs summary{
  cursor: pointer; list-style: none;
  font-weight: 700; font-family: var(--font-heading);
}
.page-vente #faq-vendeurs summary::-webkit-details-marker{ display: none; }
.page-vente #faq-vendeurs details[open]{ box-shadow: var(--shadow-sm); }

/* FAQ — force monocolonne centrée */
.page-vente #faq-vendeurs .section-body{
  display:block !important;
}
.page-vente #faq-vendeurs .section-media{ display:none !important; }


/* === HOTFIX 2025-08-17 — Harmoniser le HERO d'Acheter avec Vendre ===
   - Certaines règles dupliquées contenaient un sélecteur mal formé :
     ".page-vente .hero--revamp .hero-media-frame, .page-acheter .hero--revamp .hero-media-frame img"
     Résultat : l'image du hero sur /acheter pouvait se déformer.
   - On force ici les bonnes cibles : l'IMG dans le cadre média pour les deux pages.
*/
.page-vente .hero--revamp .hero-media-frame,
.page-acheter .hero--revamp .hero-media-frame{
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-lg);
}
.page-vente .hero--revamp .hero-media-frame img,
.page-acheter .hero--revamp .hero-media-frame img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Mobile: conserver le ratio plus large comme sur Vendre */
@media (max-width: 1024px){
  .page-vente .hero--revamp .hero-media-frame,
  .page-acheter .hero--revamp .hero-media-frame{
    aspect-ratio: 16 / 10;
  }
}

/* === Simple page hero (aligné Blog / Quartiers) === */
.page-hero{ padding: 3.5rem 0 0; text-align:center; background: var(--secondary-color); }
.page-hero .section-title{ font-size: 2.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: -1px; }
.page-hero .section-subtitle{ margin: 0 auto; max-width: 920px; color: var(--dark-gray); line-height: 1.7; margin-bottom:16px; }

/* === Page Hero media (image large, bords arrondis) === */
.page-hero{ text-align:center; }
.page-hero .hero-media{
  margin: 16px auto 0;
  width: min(1200px, 92vw);
}
.page-hero .hero-media-frame{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--light-gray);
  position: relative;
}
.page-hero .hero-media-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 640px){
  .page-hero .hero-media-frame{ aspect-ratio: 16 / 10; }
}

/* HERO générique (utilisé par Vendre & Acheter) */
.page-hero{
  background: var(--secondary-color);
}
.page-hero .hero-media{
  margin-top: var(--spacing-lg);
}
.page-hero .hero-media-frame{
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.page-hero .hero-media-frame img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* === Pages ACHETER et ESTIMER alignées sur VENDRE === */
/* Les trois pages utilisent maintenant .page-hero avec la même structure */

/* 2) Empêcher les doubles puces (noires + dorées) */
.page-acheter .prose-acheter ul.page-acheter .prose-acheter ul/* 3) Empêcher la double numérotation (1.,2.,3. + médaillon dégradé) */
.page-acheter .prose-acheter /* 4) Étapes : supprimer l'apparence "carte" et garder médaillon + texte à droite */
.page-acheter .prose-acheter .page-acheter .prose-acheter .page-acheter .prose-acheter 


/* Variante page ACHETER — steps en ligne, sans 'carte' */


/* =========================================
   Marketing list (puces dégradées)
   ========================================= */
/* =========================================
   Étapes (process-steps) — base (cartes) + médaillon dégradé
   ========================================= */
/* retire les chiffres natifs */
.process-steps{
  display: grid;
  grid-template-columns: 1fr; /* 1 colonne par défaut */
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
  counter-reset: step;
}
.process-steps li{
  position: relative;
  counter-increment: step;
  background: var(--light-gray);
  border: 1px solid var(--medium-gray);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-lg) calc(36px + 12px);
  line-height: 1.6;
}
.process-steps li::before{
  content: counter(step);
  position: absolute;
  left: var(--spacing-lg);
  top: var(--spacing-lg);
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: .95rem;
  color: #fff;
  background: var(--gold-gradient);
}

/* Variante page ACHETER : pas de carte, médaillon + texte à droite (conserve le dégradé) */

/* === Variante page VENTE : 1 colonne pour les étapes === */
.page-vente .process-steps {
  grid-template-columns: 1fr !important; /* 1 colonne - FORÇAGE */
  gap: var(--spacing-lg) !important;
  max-width: 700px !important; /* Largeur optimale pour la lecture et meilleur centrage */
  margin: 0 auto !important; /* Centre parfaitement la colonne */
  justify-items: center !important; /* Centre chaque carte individuellement */
  width: 100% !important; /* Assure la largeur complète */
}

.page-vente .process-steps li {
  margin-bottom: var(--spacing-lg) !important; /* Espacement vertical entre les étapes */
  width: 100% !important; /* Assure que chaque carte prend toute la largeur disponible */
  max-width: 100% !important; /* Respecte la largeur maximale du conteneur */
}
.page-acheter .process-steps{
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
}
.page-acheter .process-steps li{
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0 0 0 calc(36px + 12px);
  line-height: 1.7;
  min-height: 36px;
}
.page-acheter .process-steps li::before{
  left: 0;
  top: 0;
}
@media (min-width: 768px){
  .page-acheter .process-steps li{
    padding-left: calc(40px + 14px);
    min-height: 40px;
  }
  .page-acheter .process-steps li::before{
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}



/* Marketing list (puces colorées, pas de puce noire native) */
.marketing-list{
  list-style: none !important;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}
.marketing-list li{
  list-style: none !important;
  position: relative;
  padding-left: 1.75rem;
  color: var(--dark-gray);
}
.marketing-list li::marker{ content: ""; }
.marketing-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold-gradient);
}


/* Étapes (process-steps) — supprime chiffres natifs, affiche médaillon dégradé */
ol.process-steps{
  list-style: none !important;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
ol.process-steps > li{
  list-style: none !important;
  counter-increment: step;
  position: relative;
  padding-left: calc(36px + 12px);
  line-height: 1.6;
}
ol.process-steps > li::marker{ content: ""; }
ol.process-steps > li::before{
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: .95rem;
  color: #fff;
  background: var(--gold-gradient);
}
@media (min-width: 768px){
  ol.process-steps > li{
    padding-left: calc(40px + 14px);
    min-height: 40px;
  }
  ol.process-steps > li::before{
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}

/* ====== Page Collection (style aligné "quartier") ====== */
.page-collection-detail .q-container{
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--spacing-md) var(--spacing-xl);
}

.page-collection-detail .q-breadcrumb{
  display:flex;
  gap:.5rem;
  align-items:center;
  color:var(--dark-gray);
  margin-top:20px; /* espace entre header fixe et breadcrumb */
  margin-bottom:var(--spacing-sm);
  flex-wrap: wrap;
}

.page-collection-detail .q-crumb{
  color:var(--dark-gray);
  text-decoration:none;
  font-weight:600;
  transition: color 0.2s ease;
  padding: 0.25rem 0;
}

.page-collection-detail .q-crumb:hover{
  color: var(--primary-color);
}

.page-collection-detail .q-crumb.current{
  color:var(--primary-color);
  font-weight:800;
}
.page-collection-detail .q-crumb{color:var(--dark-gray);text-decoration:none;font-weight:600;}
.page-collection-detail .q-crumb-sep{opacity:.5;}
.page-collection-detail .q-crumb.current{color:var(--primary-color);font-weight:800;}

.page-collection-detail .q-hero{padding:var(--spacing-lg) 0 var(--spacing-md);}
.page-collection-detail .q-title{
  font-family:var(--font-heading);
  font-size:2.2rem;
  font-weight:900;
  letter-spacing:-.5px;
  text-transform:uppercase;
  margin:0 0 .25rem 0;
}
.page-collection-detail .q-subtitle{
  color:var(--dark-gray);
  max-width:820px;
  margin:0 0 var(--spacing-md) 0;
  font-size:1.05rem;
}
.page-collection-detail .q-hero-media{
  position:relative;
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.page-collection-detail .q-hashtag{
  position:absolute;
  top:12px; left:12px;
  background:rgba(0,0,0,.8);
  color:#fff;
  padding:.35rem .6rem;
  border-radius:999px;
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
  z-index:2;
}
.page-collection-detail .q-image{
  display:block;
  width:100%;
  height:420px;
  object-fit:cover;
  transition: transform 0.3s ease;
  will-change: transform;
}

.page-collection-detail .q-image:hover{
  transform: scale(1.02);
}

/* Optimisation des images pour mobile */
@media (max-width: 768px){
  .page-collection-detail .q-image{
    height: 200px;
  }
}

@media (max-width: 480px){
  .page-collection-detail .q-image{
    height: 180px;
  }
}

.page-collection-detail .q-main{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:var(--spacing-xl);
  margin-top:var(--spacing-xl);
}
.page-collection-detail .q-main-content .q-h2{
  font-family:var(--font-heading);
  font-size:1.2rem;
  text-transform:uppercase;
  letter-spacing:.6px;
  margin:0 0 .5rem 0;
}
.page-collection-detail .q-description p{
  margin:0 0 1rem 0;
  color:var(--dark-gray);
  line-height:1.8;
}

.page-collection-detail .q-aside{
  display:flex;
  flex-direction:column;
  gap:var(--spacing-md);
}
.page-collection-detail .q-card{
  background:var(--secondary-color);
  border:1px solid var(--medium-gray);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:var(--spacing-lg);
}
.page-collection-detail .pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
}
.page-collection-detail .pill{
  display:inline-flex;
  align-items:center;
  padding:.35rem .6rem;
  border:1px solid var(--medium-gray);
  border-radius:999px;
  font-size:.85rem;
  color:var(--dark-gray);
}

.page-collection-detail .q-h2{
  font-family:var(--font-heading);
  font-size:1rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.6px;
  margin:0 0 .6rem 0;
  text-align: left;
}

/* FAQ : titre au-dessus, bulle = Q/R uniquement */
.page-collection-detail .q-scores{margin-top:var(--spacing-md);}
.page-collection-detail .q-scores details{
  border:1px solid var(--medium-gray);
  border-radius:var(--radius-md);
  background:var(--secondary-color);
  padding:.9rem 1rem;
}
.page-collection-detail .q-scores details + details{margin-top:.6rem;}
.page-collection-detail .q-scores summary{
  cursor:pointer;
  font-weight:700;
}

/* CTA large */
.page-collection-detail .q-cta-wide{margin-top:var(--spacing-xl);}
.page-collection-detail .q-cta-wide-inner{
  background:linear-gradient(135deg, rgba(249,163,18,.06), rgba(248,149,172,.06));
  border:1px solid var(--medium-gray);
  border-radius:var(--radius-xl);
  padding:var(--spacing-xl);
  text-align:center;
}
.page-collection-detail .q-cta-title{
  font-family:var(--font-heading);
  font-size:1.4rem;
  font-weight:900;
  text-transform:uppercase;
  margin:0 0 .5rem 0;
}
.page-collection-detail .q-cta-actions{
  display:flex;
  gap:.6rem;
  justify-content:center;
  flex-wrap:wrap;
}

/* Sticky CTA mobile */
.page-collection-detail .q-sticky-cta{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:1000;
  display: none; /* Caché par défaut, affiché en JS pour mobile */
}
.page-collection-detail .q-sticky-cta .btn{ 
  box-shadow:var(--shadow-md);
  min-height: 44px; /* Taille minimale pour le tactile */
  touch-action: manipulation;
}

/* Améliorations pour l'expérience tactile */
.page-collection-detail .pill{
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.page-collection-detail .pill:hover{
  background: var(--primary-color) !important;
  color: white !important;
  border-color: var(--primary-color) !important;
  transform: translateY(-1px);
}

.page-collection-detail .pill:active{
  transform: translateY(0);
}

/* Amélioration de la navigation FAQ */
.page-collection-detail .q-scores summary{
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  outline: none;
  padding: 0;
  min-height: 44px; /* Taille minimale pour le tactile */
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
}

.page-collection-detail .q-scores summary:hover{
  color: var(--primary-color);
}

.page-collection-detail .q-scores summary::after{
  content: '▼';
  margin-left: auto;
  font-size: 0.8rem;
  transition: transform 0.2s ease;
}

.page-collection-detail .q-scores details[open] summary::after{
  transform: rotate(180deg);
}

/* Responsive */
@media (max-width: 1000px){
  .page-collection-detail .q-main{grid-template-columns:1fr;}
  .page-collection-detail .q-image{height:260px;}
}

@media (max-width: 768px){
  .page-collection-detail .q-container{
    padding: 0 var(--spacing-sm) var(--spacing-lg);
  }
  .page-collection-detail .q-hero{
    padding: var(--spacing-md) 0 var(--spacing-sm);
  }
  .page-collection-detail .q-title{
    font-size: 1.8rem;
    line-height: 1.2;
  }
  .page-collection-detail .q-subtitle{
    font-size: 1rem;
    line-height: 1.6;
  }
  .page-collection-detail .q-image{
    height: 200px;
  }
  .page-collection-detail .q-main{
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
  }
  .page-collection-detail .q-card{
    padding: var(--spacing-md);
  }
  .page-collection-detail .pill{
    padding: .5rem .8rem;
    font-size: .9rem;
  }
  .page-collection-detail .q-cta-wide-inner{
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
  }
  .page-collection-detail .q-cta-title{
    font-size: 1.2rem;
  }
  .page-collection-detail .q-cta-actions{
    flex-direction: column;
    width: 100%;
  }
  .page-collection-detail .q-cta-actions .btn{
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 480px){
  .page-collection-detail .q-container{
    padding: 0 var(--spacing-xs) var(--spacing-md);
  }
  .page-collection-detail .q-hero{
    padding: var(--spacing-sm) 0;
  }
  .page-collection-detail .q-title{
    font-size: 1.5rem;
    letter-spacing: -0.3px;
  }
  .page-collection-detail .q-subtitle{
    font-size: .95rem;
    line-height: 1.5;
  }
  .page-collection-detail .q-image{
    height: 180px;
  }
  .page-collection-detail .q-hashtag{
    top: 8px;
    left: 8px;
    padding: .25rem .5rem;
    font-size: .7rem;
  }
  .page-collection-detail .q-main{
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
  }
  .page-collection-detail .q-card{
    padding: var(--spacing-sm);
  }
  .page-collection-detail .pill-row{
    gap: .35rem;
  }
  .page-collection-detail .pill{
    padding: .4rem .6rem;
    font-size: .85rem;
  }
  .page-collection-detail .q-cta-wide-inner{
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
  }
  .page-collection-detail .q-cta-title{
    font-size: 1.1rem;
  }
  .page-collection-detail .q-breadcrumb{
    font-size: .9rem;
    gap: .4rem;
  }
  .page-collection-detail .q-sticky-cta{
    right: 12px;
    bottom: 12px;
  }
  .page-collection-detail .q-sticky-cta .btn{
    padding: .75rem 1rem;
    font-size: .9rem;
  }
}


/* Ensure pills are neutral across site */
.pill, .pill.gradient {
  background: transparent !important;
  color: var(--dark-gray) !important;
  border: 1px solid var(--medium-gray) !important;
}

/* HERO collection : fait entrer l'image en entier, sans recadrage */
.q-hero-media {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}

/* La zone visuelle du hero : hauteur responsive */
.q-hero-media .q-image {
  width: 100%;
  height: clamp(260px, 45vw, 800px); /* adapte si tu veux plus ou moins haut */
  display: grid;
  place-items: center;               /* centre l'image quand elle ne prend pas toute la largeur/hauteur */
  background: #f4f7fb;               /* “letterboxing” propre si l'image n'occupe pas tout */
}

/* Le <picture> et <img> occupent la zone, mais sans recadrer */
.q-hero-media picture,
.q-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;    /* clé : l’image est ENTIEREMENT visible */
  object-position: center;
  display: block;
}

/* (optionnel) Le hashtag reste au-dessus */
.q-hero-media .q-hashtag {
  position: absolute;
  z-index: 2;
  inset: 12px auto auto 12px;
  /* le reste de ton style existant */
}


/* Optimisations finales pour mobile */
@media (max-width: 480px) {
  .page-collection-detail .q-hero-media {
    border-radius: var(--radius-lg);
  }
  
  .page-collection-detail .q-hashtag {
    font-size: 0.65rem;
    padding: 0.2rem 0.4rem;
  }
  
  .page-collection-detail .q-breadcrumb {
    margin-top: 16px;
    margin-bottom: var(--spacing-xs);
  }
  
  .page-collection-detail .q-main-content .q-h2 {
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
  }
  
  .page-collection-detail .q-description p {
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 0.8rem;
  text-align: left;
}
}

/* Amélioration de la performance sur mobile */
@media (max-width: 768px) {
  .page-collection-detail .q-hero-media::before {
    display: none; /* Désactiver l'effet de brillance sur mobile pour la performance */
  }
  
  .page-collection-detail .q-image:hover {
    transform: none; /* Désactiver le zoom sur mobile */
  }
  
  /* Correction pour la section services sur mobile */
  .services {
    position: relative;
    z-index: auto;
    margin-top: 0;
    clear: both;
    /* S'assurer que la section est bien visible sur mobile */
    background: var(--secondary-color);
    border-top: 1px solid var(--medium-gray);
  }
  
  .section-header {
    position: relative;
    z-index: auto;
    /* S'assurer que le header est bien visible */
  }
  
  .section-title {
    position: relative;
    z-index: auto;
    /* S'assurer que le titre est bien visible */
    color: var(--primary-color);
    text-shadow: none;
  }
  
  .section-subtitle {
    position: relative;
    z-index: auto;
    /* S'assurer que le sous-titre est bien visible */
    color: var(--dark-gray);
    text-shadow: none;
  }
}


/* =========================
   COLLECTION — Responsive polish (scoped)
   ========================= */
.page-collection-detail .q-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md) var(--spacing-xl);
}

/* HERO: single column, centered title/subtitle, fluid image */
.page-collection-detail .q-hero{
  display: grid;
  grid-template-columns: 1fr;
}
.page-collection-detail .q-hero .q-title,
.page-collection-detail .q-hero .q-subtitle{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.page-collection-detail .q-hero .q-subtitle{
  max-width: 820px;
  margin-bottom: var(--spacing-md);
}
.page-collection-detail .q-hero .q-image{
  width: 100%;
  height: clamp(220px, 58vw, 420px);
  object-fit: cover;
  border-radius: var(--radius-xl);
}

/* CONTENT GRID: 2 cols desktop, 1 col tablet/mobile */
.page-collection-detail .q-main{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-xl);
}

@media (max-width: 1100px){
  .page-collection-detail .q-main{
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
}

@media (max-width: 768px){
  .page-collection-detail .q-main{
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
  }
}

@media (max-width: 480px){
  .page-collection-detail .q-main{
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
  }
}

/* Pills wrapping + tap targets */
.page-collection-detail .pill-row{
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.page-collection-detail .pill{
  line-height: 1.2;
  padding: .4rem .65rem;
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid var(--medium-gray);
  background: transparent;
  color: var(--dark-gray);
  touch-action: manipulation;
}

/* FAQ: single card wrapper, streamlined items */
.page-collection-detail .q-scores{
  background: var(--secondary-color);
  border: 1px solid var(--medium-gray);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-lg);
}
.page-collection-detail .q-scores details{
  border: none;
  background: transparent;
  padding: .75rem 0;
  border-bottom: 1px solid var(--medium-gray);
  border-radius: 0;
}
.page-collection-detail .q-scores details:last-child{ border-bottom: none; }
.page-collection-detail .q-scores summary{
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  outline: none;
  padding: 0;
}
.page-collection-detail .q-scores summary::-webkit-details-marker{ display:none; }
.page-collection-detail .q-scores .q-overview-text{ color: var(--dark-gray); margin-top: .5rem; }

/* CTA banner: keep high quality on mobile */
.page-collection-detail .q-cta-wide{ 
  margin-top: var(--spacing-xl); 
  margin-bottom: var(--spacing-xxl);
}
.page-collection-detail .q-cta-wide-inner{
  background: radial-gradient(1200px 400px at 0% 0%, rgba(249, 163, 18, .18), transparent), radial-gradient(1200px 400px at 100% 100%, rgba(248, 149, 172, .18), transparent), #0b1324;
  color: #fff;
  border: none;
  border-radius: 40px;
  padding: 24px 28px;
  margin-bottom: 96px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
}
.page-collection-detail .q-cta-title{
  color: #fff;
  margin: 0;
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  line-height: 1.2;
}
.page-collection-detail .q-cta-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

/* Amélioration des boutons pour mobile */
.page-collection-detail .q-cta-actions .btn{
  min-height: 44px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  transition: all 0.2s ease;
  touch-action: manipulation;
}

.page-collection-detail .q-cta-actions .btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.page-collection-detail .q-cta-actions .btn:active{
  transform: translateY(0);
}
.page-collection-detail .q-cta-wide-inner .btn-outline{
  background: #ffffff !important;
  color: #000000 !important;
  border: none !important;
}

@media (max-width: 900px){
  .page-collection-detail .q-cta-wide-inner{
    grid-template-columns: 1fr;
    row-gap: 14px;
    text-align: left;
  }
  .page-collection-detail .q-cta-actions{ justify-content: flex-start; }
}

/* Small tweaks on very small screens */
@media (max-width: 640px){
  .page-collection-detail .q-container{ padding: 0 var(--spacing-sm) var(--spacing-xl); }
  .page-collection-detail .q-title{ font-size: 1.75rem; }
  .page-collection-detail .q-subtitle{ font-size: 1rem; }
  .page-collection-detail .q-scores{ padding: var(--spacing-md); }
}

/* Améliorations pour l'accessibilité et la performance */
.page-collection-detail .q-hero-media{
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--secondary-color);
}

.page-collection-detail .q-hero-media::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}

.page-collection-detail .q-hero-media:hover::before{
  transform: translateX(100%);
}

/* Optimisation des cartes pour mobile */
@media (max-width: 768px){
  .page-collection-detail .q-card{
    border-radius: var(--radius-md);
  }
  
  .page-collection-detail .pill-row{
    justify-content: center;
  }
}

@media (max-width: 480px){
  .page-collection-detail .q-card{
    border-radius: var(--radius-sm);
  }
  
  .page-collection-detail .pill-row{
    justify-content: flex-start;
  }
}

/* =========================
   PAGE COLLECTIONS LIST - Responsive complet
   ========================= */

/* Styles de base pour la page collections */
.page-collections-list .collection {
  padding: var(--spacing-xl) 0;
  background: var(--light-gray);
}

.page-collections-list .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.page-collections-list .section-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.page-collections-list .section-title {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--primary-color);
  margin-bottom: var(--spacing-md);
  text-transform: uppercase;
  letter-spacing: -0.5px;
}

.page-collections-list .section-subtitle {
  font-size: 1.1rem;
  color: var(--dark-gray);
  max-width: 800px;
  margin: 0 auto var(--spacing-lg);
  line-height: 1.6;
}



/* Filtres et recherche */
.page-collections-list .filters-wrap {
  display: flex;
  justify-content: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin: var(--spacing-md) 0 var(--spacing-lg);
}

.page-collections-list .filter-btn {
  border: 1px solid var(--medium-gray);
  background: var(--secondary-color);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 999px;
  cursor: pointer;
  transition: var(--transition);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--dark-gray);
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-collections-list .filter-btn:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
  transform: translateY(-2px);
}

.page-collections-list .filter-btn.active {
  background: linear-gradient(135deg, #F9A312, #F895AC);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

.page-collections-list .search-wrap {
  margin-top: var(--spacing-md);
  display: flex;
  justify-content: center;
}

.page-collections-list .search-input {
  width: 100%;
  max-width: 520px;
  padding: var(--spacing-md) var(--spacing-lg);
  border: 2px solid var(--medium-gray);
  border-radius: var(--radius-md);
  font-size: 1rem;
  transition: var(--transition);
  background: var(--secondary-color);
}

.page-collections-list .search-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(249, 163, 18, 0.1);
}

/* Styles de base pour la page collections */
.page-collections-list .collection {
  padding: var(--spacing-xl) 0;
  background: var(--light-gray);
}

.page-collections-list .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.page-collections-list .section-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

/* Grille des collections */
.page-collections-list .collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

.page-collections-list .collection-card {
  background: var(--secondary-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: var(--transition);
  border: 1px solid var(--medium-gray);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.page-collections-list .collection-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-color);
}

.page-collections-list .collection-image {
  height: 220px;
  overflow: hidden;
  position: relative;
}

.page-collections-list .collection-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

.page-collections-list .collection-card:hover .collection-image img {
  transform: scale(1.05);
}

.page-collections-list .collection-content {
  padding: var(--spacing-lg);
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.page-collections-list .collection-content h3 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
  letter-spacing: -0.5px;
}

.page-collections-list .collection-content p {
  color: var(--dark-gray);
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
  font-size: 0.95rem;
  flex: 1;
}

.page-collections-list .pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
  margin: var(--spacing-md) 0;
}

.page-collections-list .pill {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--medium-gray);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--dark-gray);
  background: transparent;
  transition: var(--transition);
  cursor: pointer;
  min-height: 32px;
}

.page-collections-list .pill:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
  transform: translateY(-1px);
}

.page-collections-list .pill.gradient {
  background: transparent;
  color: var(--dark-gray);
  border-color: var(--medium-gray);
  font-weight: 600;
}

.page-collections-list .collection-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: #F9A312;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: var(--transition);
  padding: var(--spacing-sm) 0;
  border-bottom: 2px solid transparent;
  margin-top: auto;
}

.page-collections-list .collection-link:hover {
  color: #F9A312;
  border-bottom-color: #F9A312;
}

.page-collections-list .collection-link i {
  transition: var(--transition);
}

.page-collections-list .collection-link:hover i {
  transform: translateX(4px);
}

.page-collections-list .collection-link.btnlike {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  background: var(--gold-gradient);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border: none;
  transition: var(--transition);
  min-height: 44px;
}

.page-collections-list .collection-link.btnlike:hover {
  transform: translateY(-2px);
}

.page-collections-list .collection-cta {
  text-align: center;
  margin-top: var(--spacing-xl);
}

.page-collections-list .collection-cta .btn {
  min-height: 44px;
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: 1.1rem;
  font-weight: 600;
}

/* Responsive - Breakpoint Tablet */
@media (max-width: 1100px) {
  .page-collections-list .collection-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
  }
  
  .page-collections-list .section-title {
    font-size: 2.2rem;
  }
  
  .page-collections-list .section-subtitle {
    font-size: 1rem;
  }
}

@media (max-width: 900px) {
  .page-collections-list .collection {
    padding: var(--spacing-lg) 0;
  }
  
  .page-collections-list .container {
    padding: 0 var(--spacing-sm);
  }
  
  .page-collections-list .section-header {
    margin-bottom: var(--spacing-lg);
  }
  
  .page-collections-list .section-title {
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
  }
  
  .page-collections-list .section-subtitle {
    font-size: 0.95rem;
    margin-bottom: var(--spacing-md);
  }
  
  .page-collections-list .filters-wrap {
    gap: var(--spacing-xs);
    margin: var(--spacing-sm) 0 var(--spacing-md);
  }
  
  .page-collections-list .filter-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.85rem;
    min-height: 40px;
  }
  
  .page-collections-list .search-input {
    max-width: 480px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.95rem;
  }
  
  .page-collections-list .collection-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
  }
  
  .page-collections-list .collection-image {
    height: 200px;
  }
  
  .page-collections-list .collection-content {
    padding: var(--spacing-md);
  }
  
  .page-collections-list .collection-content h3 {
    font-size: 1.2rem;
  }
  
  .page-collections-list .collection-content p {
    font-size: 0.9rem;
  }
}

/* Responsive - Breakpoint Mobile Large */
@media (max-width: 768px) {
  .page-collections-list .collection {
    padding: var(--spacing-md) 0;
  }
  
  .page-collections-list .section-title {
    font-size: 1.8rem;
    letter-spacing: -0.3px;
  }
  
  .page-collections-list .section-subtitle {
    font-size: 0.9rem;
    line-height: 1.5;
  }
  
  .page-collections-list .filters-wrap {
    justify-content: center;
    gap: var(--spacing-xs);
  }
  
  .page-collections-list .filter-btn {
    font-size: 0.8rem;
    padding: var(--spacing-xs) var(--spacing-sm);
    min-height: 36px;
  }
  
  .page-collections-list .search-input {
    max-width: 100%;
    padding: var(--spacing-sm);
    font-size: 0.9rem;
  }
  
  .page-collections-list .collection-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
  }
  
  .page-collections-list .collection-card {
    border-radius: var(--radius-md);
  }
  
  .page-collections-list .collection-image {
    height: 180px;
  }
  
  .page-collections-list .collection-content {
    padding: var(--spacing-sm);
  }
  
  .page-collections-list .collection-content h3 {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-xs);
  }
  
  .page-collections-list .collection-content p {
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: var(--spacing-sm);
  }
  
  .page-collections-list .pill-row {
    gap: var(--spacing-xs);
    margin: var(--spacing-sm) 0;
  }
  
  .page-collections-list .pill {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.75rem;
    min-height: 28px;
  }
  
  .page-collections-list .collection-link {
    font-size: 0.8rem;
    padding: var(--spacing-xs) 0;
  }
  
  .page-collections-list .collection-link.btnlike {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.9rem;
    min-height: 40px;
  }
  
  .page-collections-list .collection-cta {
    margin-top: var(--spacing-lg);
  }
  
  .page-collections-list .collection-cta .btn {
    min-height: 40px;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 1rem;
  }
}

/* Responsive - Breakpoint Mobile Small */
@media (max-width: 480px) {
  .page-collections-list .collection {
    padding: var(--spacing-sm) 0;
  }
  
  .page-collections-list .container {
    padding: 0 var(--spacing-xs);
  }
  
  .page-collections-list .section-header {
    margin-bottom: var(--spacing-md);
  }
  
  .page-collections-list .section-title {
    font-size: 1.6rem;
    letter-spacing: -0.2px;
  }
  
  .page-collections-list .section-subtitle {
    font-size: 0.85rem;
    line-height: 1.4;
  }
  
  .page-collections-list .filters-wrap {
    gap: 0.5rem;
    margin: var(--spacing-xs) 0 var(--spacing-sm);
  }
  
  .page-collections-list .filter-btn {
    font-size: 0.75rem;
    padding: 0.5rem 0.8rem;
    min-height: 32px;
  }
  
  .page-collections-list .search-input {
    padding: 0.75rem;
    font-size: 0.85rem;
    border-width: 1px;
  }
  
  .page-collections-list .collection-grid {
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
  }
  
  .page-collections-list .collection-card {
    border-radius: var(--radius-sm);
  }
  
  .page-collections-list .collection-image {
    height: 160px;
  }
  
  .page-collections-list .collection-content {
    padding: var(--spacing-xs);
  }
  
  .page-collections-list .collection-content h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }
  
  .page-collections-list .collection-content p {
    font-size: 0.8rem;
    line-height: 1.4;
    margin-bottom: var(--spacing-xs);
  }
  
  .page-collections-list .pill-row {
    gap: 0.4rem;
    margin: var(--spacing-xs) 0;
    justify-content: center;
  }
  
  .page-collections-list .pill {
    padding: 0.4rem 0.6rem;
    font-size: 0.7rem;
    min-height: 24px;
  }
  
  .page-collections-list .collection-link {
    font-size: 0.75rem;
    padding: 0.5rem 0;
  }
  
  .page-collections-list .collection-link.btnlike {
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
    min-height: 36px;
  }
  
  .page-collections-list .collection-cta {
    margin-top: var(--spacing-md);
  }
  
  .page-collections-list .collection-cta .btn {
    min-height: 36px;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
  }
}

/* Optimisations pour l'expérience tactile */
@media (hover: none) and (pointer: coarse) {
  .page-collections-list .collection-card:hover {
    transform: none;
  }
  
  .page-collections-list .collection-card:hover .collection-image img {
    transform: none;
  }
  
  .page-collections-list .filter-btn:hover {
    transform: none;
  }
  
  .page-collections-list .collection-link.btnlike:hover {
    transform: none;
  }
  
  .page-collections-list .pill:hover {
    transform: none;
  }
}

/* Amélioration de l'accessibilité */
.page-collections-list .filter-btn:focus,
.page-collections-list .search-input:focus,
.page-collections-list .collection-link:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.page-collections-list .collection-card:focus-within {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* =========================
   HÉROS UNIFIÉS - Toutes les pages (sauf accueil)
   ========================= */

/* Classes unifiées pour tous les héros de pages */
.page-hero,
.page-acheter .hero,
.page-vente .hero,
.page-vente .hero.hero--revamp,
.page-collection-detail .q-hero,
.page-collections-list .collection,
.quartier .q-hero,
.quartiers .q-hero {
  /* Espacement unifié : 96px au-dessus (après header fixe) + 48px en dessous */
  padding: 10px 0 0px !important;
  background: var(--secondary-color) !important;
}

/* Container unifié pour tous les héros */
.page-hero-container,
.page-acheter .hero-container,
.page-vente .hero--revamp .hero-container,
.page-collection-detail .q-container,
.page-collections-list .container,
.quartier .q-container,
.quartiers .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  margin-bottom:3rem;
}

/* Titres unifiés pour tous les héros */
.page-hero-title,
.page-acheter .hero-title,
.page-acheter .hero h1,
.page-vente .hero--revamp .hero-title,
.page-vente .hero h1,
.page-collection-detail .q-title,
.page-collections-list .section-title,
.quartier .q-title,
.quartiers h1 {
  font-family: var(--font-heading) !important;
  font-size: 2.5rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  color: var(--primary-color) !important;
  text-transform: uppercase !important;
  letter-spacing: -0.5px !important;
  text-align: center !important;
}

/* Sous-titres unifiés pour tous les héros */
.page-hero-subtitle,
.page-acheter .hero-subtitle,
.page-acheter .hero p,
.page-acheter .hero .hero-subtitle,
.page-vente .hero--revamp .hero-subtitle,
.page-vente .hero p,
.page-vente .hero .hero-subtitle,
.page-collection-detail .q-subtitle,
.page-collections-list .section-subtitle,
.quartier .q-subtitle,
.quartiers .q-hero-sub {
  font-size: 1.1rem !important;
  color: var(--dark-gray) !important;
  line-height: 1.6 !important;
  margin: 0 0 var(--spacing-lg) 0 !important;
  text-align: center !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Headers de section unifiés */
.page-section-header,
.page-acheter .section-header,
.page-vente .section-header,
.page-collection-detail .q-main,
.page-collections-list .section-header,
.quartier .q-main,
.quartiers .section-header {
  text-align: center;
}

/* Titres de section unifiés */
.page-section-title,
.page-acheter .section-header .section-title,
.page-vente .section-header .section-title,
.page-collection-detail .q-h2,
.page-collections-list .section-title,
.quartier .q-h2,
.quartiers .section-title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: -0.5px;
  text-align: left;
}

/* Sous-titres de section unifiés */
.page-section-subtitle,
.page-acheter .section-header .section-subtitle,
.page-vente .section-header .section-subtitle,
.page-collection-detail .q-description,
.page-collections-list .section-subtitle,
.quartier .q-description,
.quartiers .section-subtitle {
  font-size: 1.05rem;
  color: var(--dark-gray);
  line-height: 1.6;
  margin: 0 auto;
  text-align: left;
  max-width: 700px;
}

.page-collection-detail q.description {
  text-align:left !important;
}

/* Responsive unifié pour tous les héros */
@media (max-width: 1100px) {
  .page-hero-title,
  .page-acheter .hero-title,
  .page-acheter .hero h1,
  .page-vente .hero--revamp .hero-title,
  .page-vente .hero h1,
  .page-collection-detail .q-title,
  .page-collections-list .section-title,
  .quartier .q-title,
  .quartiers h1 {
    font-size: 2.2rem !important;
  }
  
  .page-hero-subtitle,
  .page-acheter .hero-subtitle,
  .page-acheter .hero p,
  .page-acheter .hero .hero-subtitle,
  .page-vente .hero--revamp .hero-subtitle,
  .page-vente .hero p,
  .page-vente .hero .hero-subtitle,
  .page-collection-detail .q-subtitle,
  .page-collections-list .section-subtitle,
  .quartier .q-subtitle,
  .quartiers .q-hero-sub {
    font-size: 1rem !important;
  }
}

@media (max-width: 900px) {
  .page-hero,
  .page-acheter .hero,
  .page-vente .hero,
  .page-collection-detail .q-hero,
  .page-collections-list .collection,
  .quartier .q-hero,
  .quartiers .q-hero {
    padding: 80px 0 40px;
  }
  
  .page-hero-title,
  .page-acheter .hero-title,
  .page-vente .hero--revamp .hero-title,
  .page-collection-detail .q-title,
  .page-collections-list .section-title,
  .quartier .q-title,
  .quartiers h1 {
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
  }
  
  .page-hero-subtitle,
  .page-acheter .hero-subtitle,
  .page-vente .hero--revamp .hero-subtitle,
  .page-collection-detail .q-subtitle,
  .page-collections-list .section-subtitle,
  .quartier .q-subtitle,
  .quartiers .q-hero-sub {
    font-size: 0.95rem;
    margin-bottom: var(--spacing-md);
  }
  
  .page-section-title,
  .page-acheter .section-header .section-title,
  .page-vente .section-header .section-title,
  .page-collection-detail .q-h2,
  .page-collections-list .section-title,
  .quartier .q-h2,
  .quartiers .section-title {
    font-size: 1.8rem;
  }
  
  .page-section-subtitle,
  .page-acheter .section-header .section-subtitle,
  .page-vente .section-header .section-subtitle,
  .page-collection-detail .q-description,
  .page-collections-list .section-subtitle,
  .quartier .q-description,
  .quartiers .section-subtitle {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .page-hero,
  .page-acheter .hero,
  .page-vente .hero,
  .page-collection-detail .q-hero,
  .page-collections-list .collection,
  .quartier .q-hero,
  .quartiers .q-hero {
    padding: 72px 0 32px;
  }
  
  .page-hero-title,
  .page-acheter .hero-title,
  .page-vente .hero--revamp .hero-title,
  .page-collection-detail .q-title,
  .page-collections-list .section-title,
  .quartier .q-title,
  .quartiers h1 {
    font-size: 1.8rem;
    letter-spacing: -0.3px;
  }
  
  .page-hero-subtitle,
  .page-acheter .hero-subtitle,
  .page-vente .hero--revamp .hero-subtitle,
  .page-collection-detail .q-subtitle,
  .page-collections-list .section-subtitle,
  .quartier .q-subtitle,
  .quartiers .q-hero-sub {
    font-size: 0.9rem;
    line-height: 1.5;
  }
  
  .page-section-title,
  .page-acheter .section-header .section-title,
  .page-vente .section-header .section-title,
  .page-collection-detail .q-h2,
  .page-collections-list .section-title,
  .quartier .q-h2,
  .quartiers .section-title {
    font-size: 1.6rem;
  }
  
  .page-section-subtitle,
  .page-acheter .section-header .section-subtitle,
  .page-vente .section-header .section-subtitle,
  .page-collection-detail .q-description,
  .page-collections-list .section-subtitle,
  .quartier .q-description,
  .quartiers .section-subtitle {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .page-hero,
  .page-acheter .hero,
  .page-vente .hero,
  .page-collection-detail .q-hero,
  .page-collections-list .collection,
  .quartier .q-hero,
  .quartiers .q-hero {
    padding: 64px 0 24px;
  }
  
  .page-hero-title,
  .page-acheter .hero-title,
  .page-vente .hero--revamp .hero-title,
  .page-collection-detail .q-title,
  .page-collections-list .section-title,
  .quartier .q-title,
  .quartiers h1 {
    font-size: 1.5rem;
    letter-spacing: -0.2px;
  }
  
  .page-hero-subtitle,
  .page-acheter .hero-subtitle,
  .page-vente .hero--revamp .hero-subtitle,
  .page-collection-detail .q-subtitle,
  .page-collections-list .section-subtitle,
  .quartier .q-subtitle,
  .quartiers .q-hero-sub {
    font-size: 0.85rem;
    line-height: 1.4;
  }
  
  .page-section-title,
  .page-acheter .section-header .section-title,
  .page-vente .section-header .section-title,
  .page-collection-detail .q-h2,
  .page-collections-list .section-title,
  .quartier .q-h2,
  .quartiers .section-title {
    font-size: 1.4rem;
  }
  
  .page-section-subtitle,
  .page-acheter .section-header .section-subtitle,
  .page-vente .section-header .section-subtitle,
  .page-collection-detail .q-description,
  .page-collections-list .section-subtitle,
  .quartier .q-description,
  .quartiers .section-subtitle {
    font-size: 0.9rem;
  }
}

/* =========================
   FORÇAGE DE L'UNIFICATION - Règles spécifiques
   ========================= */

/* Forcer l'unification sur les pages avec structures complexes */
.page-acheter .hero,
.page-acheter .hero *,
.page-vente .hero,
.page-vente .hero *,
.page-vente .hero--revamp,
.page-vente .hero--revamp * {
  /* S'assurer que l'unification s'applique */
}

/* Règles spécifiques pour la page acheter */
.page-acheter .hero {
  padding: 96px 0 48px !important;
  background: var(--secondary-color) !important;
}

.page-acheter .hero h1,
.page-acheter .hero .hero-title {
  font-family: var(--font-heading) !important;
  font-size: 2.5rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  margin: 0 0 var(--spacing-md) 0 !important;
  color: var(--primary-color) !important;
  text-transform: uppercase !important;
  letter-spacing: -0.5px !important;
  text-align: center !important;
}

.page-acheter .hero p,
.page-acheter .hero .hero-subtitle {
  font-size: 1.1rem !important;
  color: var(--dark-gray) !important;
  line-height: 1.6 !important;
  margin: 0 0 var(--spacing-lg) 0 !important;
  text-align: center !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Règles spécifiques pour la page vendre */
.page-vente .hero,
.page-vente .hero.hero--revamp {
  padding: 96px 0 48px !important;
  background: var(--secondary-color) !important;
}

.page-vente .hero h1,
.page-vente .hero .hero-title,
.page-vente .hero--revamp h1,
.page-vente .hero--revamp .hero-title {
  font-family: var(--font-heading) !important;
  font-size: 2.5rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  margin: 0 0 var(--spacing-md) 0 !important;
  color: var(--primary-color) !important;
  text-transform: uppercase !important;
  letter-spacing: -0.5px !important;
  text-align: center !important;
}

.page-vente .hero p,
.page-vente .hero .hero-subtitle,
.page-vente .hero--revamp p,
.page-vente .hero--revamp .hero-subtitle {
  font-size: 1.1rem !important;
  color: var(--dark-gray) !important;
  line-height: 1.6 !important;
  margin: 0 0 var(--spacing-lg) 0 !important;
  text-align: center !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Responsive spécifique pour forcer l'unification */
@media (max-width: 900px) {
  .page-acheter .hero,
  .page-vente .hero,
  .page-vente .hero.hero--revamp {
    padding: 80px 0 40px !important;
  }
  
  .page-acheter .hero h1,
  .page-acheter .hero .hero-title,
  .page-vente .hero h1,
  .page-vente .hero .hero-title,
  .page-vente .hero--revamp h1,
  .page-vente .hero--revamp .hero-title {
    font-size: 2rem !important;
  }
}

@media (max-width: 768px) {
  .page-acheter .hero,
  .page-vente .hero,
  .page-vente .hero.hero--revamp {
    padding: 72px 0 32px !important;
  }
  
  .page-acheter .hero h1,
  .page-acheter .hero .hero-title,
  .page-vente .hero h1,
  .page-vente .hero .hero-title,
  .page-vente .hero--revamp h1,
  .page-vente .hero--revamp .hero-title {
    font-size: 1.8rem !important;
  }
}

@media (max-width: 480px) {
  .page-acheter .hero,
  .page-vente .hero,
  .page-vente .hero.hero--revamp {
    padding: 64px 0 24px !important;
  }
  
  .page-acheter .hero h1,
  .page-acheter .hero .hero-title,
  .page-vente .hero h1,
  .page-vente .hero .hero-title,
  .page-vente .hero--revamp h1,
  .page-vente .hero--revamp .hero-title {
    font-size: 1.5rem !important;
  }
}

/* === PATCH — Vendre : "Notre méthode" en 1 colonne, contenu centré === */
.page-vente #methode .section-body{
  grid-template-columns: 1fr !important; /* retire la 2e colonne */
  align-items: start;                     /* évite l'étirement vertical */
}

.page-vente #methode .section-copy{
  max-width: 820px;       /* largeur de lecture confortable */
  margin: 0 auto;         /* centre le bloc */
}

.page-vente #methode .process-steps{
  max-width: 760px;       /* centre la liste d'étapes (les "cards") */
  margin: 0 auto;
}

/* optionnel : si une variante .process-step existe, on la centre aussi */
.page-vente #methode .process-step{
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* === SUPPRESSION NAVBAR MOBILE EN BAS D'ÉCRAN === */
.mobile-actions-bar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(100%) !important;
}

/* Suppression de la navbar mobile des quartiers */
.q-sticky-cta {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Suppression de toute navbar mobile fixe en bas */
[class*="mobile"][class*="bottom"],
[class*="bottom"][class*="mobile"],
[class*="sticky"][class*="bottom"],
[class*="bottom"][class*="sticky"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Suppression des éléments fixes en bas sur mobile */
@media (max-width: 768px) {
    [class*="mobile"][class*="actions"],
    [class*="actions"][class*="mobile"],
    [class*="sticky"][class*="cta"],
    [class*="cta"][class*="sticky"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* === Estimer : compléments spécifiques (scopés) === */
.page-estimer .form-progress{margin-bottom: var(--spacing-lg);}
.page-estimer .progress-bar{height: 8px; border-radius: 999px; background: var(--medium-gray); overflow: hidden;}
.page-estimer .progress-fill{height: 100%; width: 0; background: var(--gold-gradient); transition: width .3s ease;}
.page-estimer .progress-steps{display: grid; grid-template-columns: repeat(3,1fr); gap: var(--spacing-md); margin-top: var(--spacing-sm);}
.page-estimer .progress-step{display:flex; align-items:center; gap:.6rem; justify-content:center; color: var(--accent-color);}
.page-estimer .progress-step .step-number{width:28px;height:28px;border-radius:999px;background: var(--light-gray);display:flex;align-items:center;justify-content:center;font-weight:800;}
.page-estimer .progress-step.active .step-number{background: linear-gradient(135deg,#F9A312,#F895AC); color:#fff;}
.page-estimer .progress-step.current span{font-weight:700; color: var(--primary-color);}

.page-estimer .form-step{display:none; animation: fadeIn .25s ease;}
.page-estimer .form-step.active{display:block;}
.page-estimer .form-navigation{display:flex; gap: var(--spacing-sm); justify-content:center; margin-top: var(--spacing-md);}

.page-estimer .field-error{color:#ef4444; font-size:.85rem; margin-top:6px;}
.page-estimer .form-group input.error,
.page-estimer .form-group select.error,
.page-estimer .form-group textarea.error{border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.08);}

.page-estimer .faq .info-card details{border-bottom:1px solid var(--medium-gray); padding: .6rem 0;}
.page-estimer .faq .info-card details:last-child{border-bottom:none;}
.page-estimer .faq summary{cursor:pointer; list-style:none; font-weight:600; color: var(--primary-color);}
.page-estimer .faq summary::-webkit-details-marker{display:none;}
.page-estimer .faq details p{margin: .6rem 0 0 0; color: var(--dark-gray);}

.page-estimer .loading-spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.35);border-top:2px solid #fff;border-radius:50%;animation: spin 1s linear infinite;display:inline-block;margin-right:.5rem;vertical-align:-4px;}
@keyframes spin{to{transform: rotate(360deg);}}

/* === STYLES POUR LA CASE RGPD (ESTIMER) === */
.checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
    position: relative;
    cursor: pointer;
}

.form-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
    z-index: 1;
}

.checkmark {
    height: 20px;
    width: 20px;
    background-color: #ffffff;
    border: 2px solid #6b7280;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    flex-shrink: 0;
    transition: all 0.3s ease;
    cursor: pointer;
    pointer-events: auto;
}

.checkbox-container:hover .checkmark {
    border-color: var(--primary-color);
    background-color: #f9fafb;
    transform: scale(1.05);
}

.form-checkbox:focus + .checkmark {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
}

.form-checkbox:checked + .checkmark {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-checkbox:checked + .checkmark:after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--dark-gray);
    line-height: 1.5;
    position: relative;
    width: 100%;
    margin-left: 0;
    pointer-events: auto;
}

.checkbox-text {
    flex: 1;
    line-height: 1.5;
    cursor: pointer;
    pointer-events: auto;
}

/* Rendre toute la zone cliquable */
.checkbox-container:hover {
    cursor: pointer;
}

.checkbox-container * {
    pointer-events: auto;
}

.checkbox-error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--radius-sm);
    color: #dc2626;
    font-size: 0.9rem;
    font-weight: 500;
    animation: fadeIn 0.3s ease;
}

.checkbox-error i {
    width: 16px;
    height: 16px;
    color: #dc2626;
    flex-shrink: 0;
}

.checkbox-error span {
    line-height: 1.4;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.required-indicator {
    color: #dc2626;
    font-weight: 600;
    margin-left: 2px;
}

/* === PADDING ENTRE FAQ ET FOOTER (ESTIMER) === */
.page-estimer .faq {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
}

.page-estimer .faq .container {
    margin-bottom: var(--spacing-xl);
}

/* === RESPONSIVE MOBILE - PAGE ESTIMER === */
@media (max-width: 768px) {
    /* === HERO SECTION === */
    .page-estimer .page-hero {
        padding: 2rem 0 1.5rem;
    }
    
    .page-estimer .page-hero .section-title {
        font-size: clamp(1.75rem, 5vw, 2.5rem);
        line-height: 1.2;
        margin-bottom: 1rem;
    }
    
    .page-estimer .page-hero .section-subtitle {
        font-size: clamp(1rem, 3.5vw, 1.125rem);
        line-height: 1.5;
        margin-bottom: 1.5rem;
    }
    
    .page-estimer .hero-badges {
        flex-direction: column;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }
    
    .page-estimer .hero-badge {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
        justify-content: center;
    }
    
    .page-estimer .hero-media {
        margin-top: 1.5rem;
    }
    
    .page-estimer .hero-media-frame {
        border-radius: 12px;
        overflow: hidden;
    }
    
    /* === SECTION RÉASSURANCE === */
    .page-estimer .estimation-info-section {
        padding: 2rem 0;
    }
    
    .page-estimer .estimation-info {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .page-estimer .info-card {
        padding: 1.5rem;
        text-align: center;
    }
    
    .page-estimer .info-card .info-icon {
        width: 48px;
        height: 48px;
        margin: 0 auto 1rem;
    }
    
    .page-estimer .info-card h3 {
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
    }
    
    .page-estimer .info-card p {
        font-size: 0.95rem;
        line-height: 1.6;
    }
    
    /* === FORMULAIRE === */
    .page-estimer .estimation-form-section {
        padding: 3rem 0;
    }
    
    .page-estimer .estimation-form-container {
        padding: 3rem 0 0 !important;
        border-radius: 16px;
    }
    
    .page-estimer .form-header {
        text-align: center;
        margin-bottom: 1.5rem;
    }
    
    .page-estimer .form-header h3 {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }
    
    .page-estimer .form-header p {
        font-size: 1rem;
        line-height: 1.5;
    }
    
    .page-estimer .form-progress {
        margin-bottom: 2rem;
    }
    
    .page-estimer .progress-bar {
        height: 6px;
        border-radius: 3px;
    }
    
    /* === CASE RGPD === */
    .page-estimer .checkbox-container {
        gap: 0.75rem;
        margin-bottom: 1rem;
    }
    
    .page-estimer .checkmark {
        height: 18px;
        width: 18px;
        flex-shrink: 0;
    }
    
    .page-estimer .checkbox-text {
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    .page-estimer .checkbox-error {
        margin-top: 0.75rem;
        padding: 0.75rem;
        font-size: 0.85rem;
    }
    
    /* === NAVIGATION FORMULAIRE === */
    .page-estimer .form-navigation {
        flex-direction: column;
        gap: 1rem;
        margin-top: 2rem;
    }
    
    .page-estimer .form-navigation button {
        width: 100%;
        padding: 1rem;
        font-size: 1rem;
        justify-content: center;
    }
    
    /* === MÉTHODOLOGIE === */
    .page-estimer .estimation-process-section {
        padding: 2rem 0;
    }
    
    .page-estimer .process-steps {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .page-estimer .process-step {
        padding: 1.5rem;
        text-align: center;
    }
    
    .page-estimer .process-step .step-number {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
        margin: 0 auto 1rem;
    }
    
    .page-estimer .process-step h4 {
        font-size: 1.125rem;
        margin-bottom: 0.75rem;
    }
    
    .page-estimer .process-step p {
        font-size: 0.9rem;
        line-height: 1.6;
    }
    
    /* === TÉMOIGNAGES === */
    .page-estimer .testimonials {
        padding: 2rem 0;
    }
    
    .page-estimer .testimonial-slide {
        padding: 1.5rem;
    }
    
    .page-estimer .testimonial-quote {
        margin-bottom: 1.5rem;
    }
    
    .page-estimer .testimonial-quote i {
        width: 32px;
        height: 32px;
        margin-bottom: 1rem;
    }
    
    .page-estimer .testimonial-quote p {
        font-size: 1rem;
        line-height: 1.6;
    }
    
    .page-estimer .testimonial-author {
        text-align: center;
    }
    
    .page-estimer .author-details h4 {
        font-size: 1.125rem;
        margin-bottom: 0.25rem;
    }
    
    .page-estimer .author-details span {
        font-size: 0.9rem;
    }
    
    .page-estimer .testimonial-nav {
        justify-content: center;
        gap: 0.75rem;
        margin-top: 1.5rem;
    }
    
    .page-estimer .nav-dot {
        width: 12px;
        height: 12px;
    }
    
    /* === FAQ === */
    .page-estimer .faq {
        padding: 2rem 0;
    }
    
    .page-estimer .faq .info-card {
        padding: 1.5rem;
    }
    
    .page-estimer .faq-item {
        margin-bottom: 1.25rem;
    }
    
    .page-estimer .faq-item summary {
        padding: 1rem;
        font-size: 1rem;
        line-height: 1.4;
    }
    
    .page-estimer .faq-item p {
        padding: 1rem;
        font-size: 0.95rem;
        line-height: 1.6;
    }
}

/* === RESPONSIVE TRÈS PETIT ÉCRAN === */
@media (max-width: 480px) {
    .page-estimer .container {
        padding: 0;
    }
    
    .page-estimer .estimation-form-container {
        padding: 1rem;
        margin: 0 0.5rem;
    }
    
    .page-estimer .page-hero .section-title {
        font-size: 2.5rem !important;
    }
    
    .page-estimer .page-hero .section-subtitle {
        font-size: 1rem;
    }
    
    .page-estimer .hero-badge {
        padding: 0.625rem 0.875rem;
        font-size: 0.875rem;
    }
    
    .page-estimer .form-step h4 {
        font-size: 1.125rem;
    }
    
    .page-estimer .form-group input,
    .page-estimer .form-group select,
    .page-estimer .form-group textarea {
        padding: 0.75rem;
        font-size: 16px; /* Évite le zoom sur iOS */
    }
    
    .page-estimer .form-navigation button {
        padding: 0.875rem;
        font-size: 0.95rem;
    }
    
    .page-estimer .info-card,
    .page-estimer .process-step,
    .page-estimer .testimonial-slide,
    .page-estimer .faq .info-card {
        padding: 1.25rem;
    }
}

/* === OPTIMISATIONS TOUCH === */
@media (hover: none) and (pointer: coarse) {
    .page-estimer .form-group input:focus,
    .page-estimer .form-group select:focus,
    .page-estimer .form-group textarea:focus {
        transform: scale(1.02);
        transition: transform 0.2s ease;
    }
    
    .page-estimer .form-navigation button:active {
        transform: scale(0.98);
    }
    
    .page-estimer .checkbox-container:active .checkmark {
        transform: scale(0.95);
    }
}

/* === STYLES SPÉCIFIQUES FORMULAIRE ESTIMER === */
.page-estimer .form-step {
    display: none;
    animation: fadeIn 0.3s ease;
}

.page-estimer .form-step.active {
    display: block;
}

.page-estimer .form-step h4 {
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
}

.page-estimer .form-group {
    margin-bottom: 1.5rem;
}

.page-estimer .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--dark-gray);
    font-size: 0.95rem;
}

.page-estimer .form-group input,
.page-estimer .form-group select,
.page-estimer .form-group textarea {
    width: 100%;
    padding: 0.875rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
    background: white;
}

.page-estimer .form-group input:focus,
.page-estimer .form-group select:focus,
.page-estimer .form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
}

.page-estimer .form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.page-estimer .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.page-estimer .form-progress {
    margin: 2rem 0;
}

.page-estimer .progress-bar {
    width: 100%;
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
}

.page-estimer .progress-fill {
    height: 100%;
    background: var(--gold-gradient);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* === RESPONSIVE FORMULAIRE === */
@media (max-width: 768px) {
    .page-estimer .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .page-estimer .form-step h4 {
        font-size: 1.25rem;
        margin-bottom: 1.25rem;
    }
    
    .page-estimer .form-group {
        margin-bottom: 1.25rem;
    }
    
    .page-estimer .form-group label {
        font-size: 0.9rem;
        margin-bottom: 0.375rem;
    }
    
    .page-estimer .form-group input,
    .page-estimer .form-group select,
    .page-estimer .form-group textarea {
        padding: 0.75rem;
        font-size: 16px; /* Évite le zoom sur iOS */
        min-height: 44px;
    }
    
    .page-estimer .form-group textarea {
        min-height: 80px;
    }
    
    .page-estimer .form-progress {
        margin: 1.5rem 0;
    }
    
    .page-estimer .progress-bar {
        height: 6px;
    }
}

@media (max-width: 480px) {
    .page-estimer .form-step h4 {
        font-size: 1.125rem;
        margin-bottom: 1rem;
    }
    
    .page-estimer .form-group {
        margin-bottom: 1rem;
    }
    
    .page-estimer .form-group input,
    .page-estimer .form-group select,
    .page-estimer .form-group textarea {
        padding: 0.625rem;
        font-size: 16px;
    }
    
    .page-estimer .form-progress {
        margin: 1.25rem 0;
    }
}


/* ===== Estimer : Responsive & Mobile-First (scopé) ===== */
html, body { overflow-x: hidden; }

/* Conteneurs sûrs */
.page-estimer .container { max-width: 1120px;}
.page-estimer .estimation-form-container,
.page-estimer .form-row,
.page-estimer .form-group { min-width: 0; }

/* Images héro sans débord */
.page-estimer .hero-media-frame { display:block; width:100%; border-radius: var(--radius-xl); overflow:hidden; }
.page-estimer .hero-media-frame img { width:100%; height:auto; display:block; }

/* Wizard */
.page-estimer .form-progress { margin-bottom: var(--spacing-md); }
.page-estimer .progress-bar { height: 8px; border-radius: 999px; background: var(--medium-gray); overflow: hidden; }
.page-estimer .progress-fill { height: 100%; width: 0; background: var(--gold-gradient); transition: width .3s ease; }

/* CTA nav : sticky sur mobile */
.page-estimer .form-navigation {
  display:flex; gap: 10px; justify-content:center; align-items:center; margin-top: var(--spacing-md);
  position: static;
}
@media (max-width: 768px){
  .page-estimer .form-navigation[data-sticky]{
    position: sticky; bottom: 0; left: 0; right: 0;
    background: #fff; padding: 10px 12px calc(10px + var(--kb-safe, env(safe-area-inset-bottom)));
    box-shadow: 0 -8px 24px rgba(0,0,0,.06), 0 -1px 0 rgba(0,0,0,.06);
    z-index: 50; margin-top: 18px; border-radius: 0;
  }
  .page-estimer .form-navigation .btn { flex:1 1 auto; justify-content:center; }
}

/* Champs : anti-zoom iOS + confort tactile */
@media (max-width: 768px){
  .page-estimer .form-group input,
  .page-estimer .form-group select,
  .page-estimer .form-group textarea{
    font-size: 16px; /* évite le zoom automatique iOS */
    padding: 14px 12px;
  }
  .page-estimer label { font-size: 0.95rem; }
}

/* Grilles → empilement mobile */
  .page-estimer .form-row { display:grid; grid-template-columns: 1fr; gap: var(--spacing-md); }

.page-estimer .estimation-info-section .estimation-info {
  display:grid; grid-template-columns: repeat(3,1fr); gap: var(--spacing-lg);
}
@media (max-width: 992px){ .page-estimer .estimation-info-section .estimation-info { grid-template-columns: 1fr; } }

.page-estimer .process-steps { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--spacing-lg); }
@media (max-width: 992px){ .page-estimer .process-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .page-estimer .process-steps { grid-template-columns: 1fr; } }

/* Cards & paddings */
.page-estimer .info-card,
.page-estimer .process-step { padding: clamp(16px, 3vw, 24px); }

/* FAQ (lisible mobile) */
.page-estimer .faq .info-card { padding: clamp(16px, 3vw, 24px); }
.page-estimer .faq .info-card details { padding: .6rem 0; border-bottom: 1px solid var(--medium-gray); }
.page-estimer .faq .info-card details:last-child { border-bottom:none; }
.page-estimer .faq summary { cursor:pointer; list-style:none; font-weight:600; }
.page-estimer .faq summary::-webkit-details-marker { display:none; }

/* Héro : espacement plus compact en mobile */
@media (max-width: 768px){
  .page-estimer .page-hero .section-title { font-size: 1.8rem; }
  .page-estimer .page-hero .section-subtitle { font-size: 1rem; }
  .page-estimer .hero-badges { gap: 8px; }
}

/* Erreurs champ visibles */
.page-estimer .field-error{color:#ef4444; font-size:.85rem; margin-top:6px;}
.page-estimer .form-group input.error,
.page-estimer .form-group select.error,
.page-estimer .form-group textarea.error{border-color:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.08);}

/* Spinner bouton */
.page-estimer .loading-spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.35);border-top:2px solid #fff;border-radius:50%;animation: spin 1s linear infinite;display:inline-block;margin-right:.5rem;vertical-align:-4px;}
@keyframes spin{to{transform: rotate(360deg);}}

/* Sécurité overflow : empêchez tout débord */
.page-estimer * { max-width: 100%; box-sizing: border-box; }
.page-estimer .container,
.page-estimer section { overflow-x: clip; padding-bottom: 60px; } /* plus safe qu'hidden */

/* === OPTIMISATIONS NAVIGATION FORMULAIRE MOBILE === */
.page-estimer .estimation-form-container {
  scroll-margin-top: 100px;
  scroll-behavior: auto;
  margin-top:3rem;
}

/* Navigation sticky sur mobile pour éviter la perte de contexte */
@media (max-width: 768px) {
    .page-estimer .form-navigation {
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        z-index: 1000;
        padding: 1rem 0;
        margin-top: 2rem;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    }
    
    .page-estimer .form-navigation .btn {
        flex: 1;
        justify-content: center;
        padding: 1rem;
        font-size: 1rem;
        font-weight: 600;
    }

    #next-step{
      margin-top: 5px;
    }
    /* Assurer que le formulaire reste visible */
}

/* Animation douce pour les transitions d'étapes */
.page-estimer .form-step {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.page-estimer .form-step.active {
    opacity: 1;
    transform: translateY(0);
}

.page-estimer .form-step:not(.active) {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

/* Focus visible pour l'accessibilité */
.page-estimer .form-group input:focus,
.page-estimer .form-group select:focus,
.page-estimer .form-group textarea:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Indicateur de progression plus visible sur mobile */
@media (max-width: 768px) {
    .page-estimer .form-progress {
        margin: 1.5rem 0;
        position: sticky;
        top: 0;
        background: white;
        padding: 1rem 0;
        z-index: 50;
        border-bottom: 1px solid #e5e7eb;
    }
    
    .page-estimer .progress-bar {
        height: 6px;
        background: #e5e7eb;
    }
    
    .page-estimer .progress-fill {
        background: var(--gold-gradient);
        transition: width 0.4s ease;
    }
}

/* ===== HEADER & NAVIGATION UNIFIÉ ===== */
/* Styles uniformes pour TOUTES les pages - taille et espacement identiques */

/* Header principal - dimensions et espacement uniformes */
.navbar {
    padding: 1rem 0 !important;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
}

/* Container de navigation - largeur et centrage uniformes */
.nav-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    height: 100% !important;
}

/* Logo - taille et espacement uniformes */
.logo {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    flex-shrink: 0 !important;
}

.logo-icon {
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
}

.logo-title {
    font-size: 18px !important;
    font-weight: bold !important;
    line-height: 1.2 !important;
}

.logo-subtitle {
    font-size: 12px !important;
    line-height: 1.2 !important;
}



.nav-link {
    font-size: 16px !important;
    font-weight: 500 !important;
    padding: 8px 0 !important;
    white-space: nowrap !important;
}

/* Actions de navigation - taille uniforme */
.nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    flex-shrink: 0 !important;
}

/* Bouton téléphone - taille uniforme */
.btn-phone {
    height: 40px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
}

/* Sélecteur de langue - taille uniforme */
.language-btn {
    height: 40px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
}



/* Logo cliquable */
.logo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}

.logo-link:hover {
  transform: scale(1.02);
}

.logo-link:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 4px;
  border-radius: 8px;
}

/* Menu Lifestyle avec flèche visible */
.nav-dropdown .nav-link i[data-lucide="chevron-down"] {
  display: inline-block !important;
  margin-left: 4px;
  transition: transform 0.2s ease;
  opacity: 1 !important;
  visibility: visible !important;
}

.nav-dropdown.active .nav-link i[data-lucide="chevron-down"] {
  transform: rotate(180deg);
}

/* Menu mobile Lifestyle avec flèche visible */
.mobile-dropdown .mobile-dropdown-btn i[data-lucide="chevron-down"] {
  display: inline-block !important;
  margin-left: 4px;
  transition: transform 0.2s ease;
  opacity: 1 !important;
  visibility: visible !important;
}

.mobile-dropdown.active .mobile-dropdown-btn i[data-lucide="chevron-down"] {
  transform: rotate(180deg);
}

/* === Hardening: icônes du header, tailles stables partout === */
.navbar [data-lucide],
.navbar .btn i[data-lucide],
.navbar .language-btn i[data-lucide] {
  color:black !important;
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2 !important;
  flex-shrink: 0 !important;
  vertical-align: -2px;
}

.navbar .logo-icon { width: 40px !important; height: 40px !important; }
.navbar .logo-title { font-size: 18px !important; }
.navbar .logo-subtitle { font-size: 12px !important; }
.navbar .nav-link { font-size: 16px !important; }
.navbar .btn-phone, .navbar .language-btn { height: 40px !important; }

/* === ESTIMER — HERO : image plein cadre, sans déformation === */
.page-estimer .hero-media{ margin-top: var(--spacing-lg); }
.page-estimer .hero-media-frame{
  width: 100%;
  aspect-ratio: 21 / 9;           /* grand format confortable */
  max-height: 560px;              /* évite les héros trop hauts */
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
@media (max-width: 1024px){
  .page-estimer .hero-media-frame{ aspect-ratio: 16 / 10; max-height: 420px; }
}
.page-estimer .hero-media-frame img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;    /* clé : couvre toute la zone */
  object-position: center;
  display: block;
}


/* === ESTIMER — CTA section premium === */
.page-estimer .estimation-cta-section{
  background: var(--secondary-color);
  border-top: 1px solid var(--medium-gray);
  padding: clamp(32px, 5vw, 56px) 0;
}
.page-estimer .estimation-cta{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
}
@media (max-width: 980px){
  .page-estimer .estimation-cta{ grid-template-columns: 1fr; }
}

.page-estimer .cta-eyebrow{
  font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .12em;
  font-size: .8rem; color: var(--accent-color); margin: 0 0 .25rem 0;
}
.page-estimer .estimation-cta h3{
  font-family: var(--font-heading); font-weight: 900; text-transform: uppercase; letter-spacing: -.3px;
  margin: 0 0 .5rem 0;
}
.page-estimer .estimation-cta p{ color: var(--dark-gray); }

.page-estimer .cta-actions{
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-top: var(--spacing-sm);
}
.page-estimer .cta-actions .btn-large{
  min-height: 48px; padding: 0.85rem 1.25rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: 10px;
}
.page-estimer .cta-note{
  margin-top: 8px; font-size: .95rem; color: var(--dark-gray);
}

.page-estimer .cta-visual .cta-card{
  background: var(--secondary-color);
  border: 1px solid var(--medium-gray);
  border-radius: var(--radius-lg);
  padding: clamp(16px, 3vw, 24px);
  box-shadow: var(--shadow-sm);
}
.page-estimer .cta-visual .cta-icon i{ color: #F9A312; }
.page-estimer .cta-visual h4{
  font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: -.3px; margin: .25rem 0 .5rem 0;
}
.page-estimer .cta-visual .cta-steps{
  list-style: none; padding: 0; margin: 0;
}
.page-estimer .cta-visual .cta-steps li{
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
}
.page-estimer .cta-visual .cta-steps i{ width: 18px; height: 18px; color: var(--primary-color); }

/* ============================
   ESTIMER — Mobile polish (scope : .page-estimer)
   ============================ */

/* === ESTIMER PAGE OPTIMISÉE === */

/* Hero optimisé */
.hero-estimer {
  padding: var(--spacing-xxl) 0;
  text-align: center;
  background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-white) 100%);
}

.hero-estimer .hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.hero-estimer .hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.1;
  margin-bottom: var(--spacing-lg);
  color: var(--color-primary-900);
}

.hero-estimer .hero-subtitle {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  line-height: 1.6;
  margin-bottom: var(--spacing-xl);
  color: var(--color-gray-700);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.hero-estimer .hero-badges {
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  flex-wrap: wrap;
}

.hero-estimer .hero-badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-white);
  border: 1px solid var(--color-primary-200);
  border-radius: var(--border-radius-lg);
  color: var(--color-primary-700);
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.hero-estimer .hero-badge i {
  width: 20px;
  height: 20px;
  color: var(--color-primary-600);
}

.hero-estimer .hero-cta {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
}

.hero-estimer .btn-hero {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: 1.125rem;
  font-weight: 600;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.hero-estimer .hero-note {
  color: var(--color-gray-600);
  font-size: 0.875rem;
}

/* Section des avantages */
.advantages-section {
  padding: var(--spacing-xxl) 0;
  background: var(--color-white);
}

.advantages-section .section-header {
  text-align: center;
  margin-bottom: var(--spacing-xxl);
}

.advantages-section .section-header h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--color-primary-900);
  margin-bottom: var(--spacing-md);
}

.advantages-section .section-header p {
  font-size: 1.25rem;
  color: var(--color-gray-600);
  max-width: 600px;
  margin: 0 auto;
}

.advantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-xl);
  max-width: 1200px;
  margin: 0 auto;
}

.advantage-item {
  text-align: center;
  padding: var(--spacing-xl);
  background: var(--color-white);
  border-radius: var(--border-radius-xl);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.advantage-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.advantage-item .advantage-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--spacing-lg);
  background: var(--color-primary-100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.advantage-item .advantage-icon i {
  width: 40px;
  height: 40px;
  color: var(--color-primary-600);
}

.advantage-item h3 {
  font-size: 1.5rem;
  color: var(--color-primary-900);
  margin-bottom: var(--spacing-md);
}

.advantage-item p {
  color: var(--color-gray-600);
  line-height: 1.6;
}

/* Section processus */
.process-section {
  padding: var(--spacing-xxl) 0;
  background: var(--color-gray-50);
}

.process-section .section-header {
  text-align: center;
  margin-bottom: var(--spacing-xxl);
}

.process-section .section-header h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--color-primary-900);
  margin-bottom: var(--spacing-md);
}

.process-section .section-header p {
  font-size: 1.25rem;
  color: var(--color-gray-600);
}

.process-timeline {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}

.process-timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-primary-200);
  transform: translateX(-50%);
}

.process-step {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-xxl);
  position: relative;
}

.process-step:nth-child(odd) {
  flex-direction: row;
}

.process-step:nth-child(even) {
  flex-direction: row-reverse;
}

.process-step .step-number {
  width: 60px;
  height: 60px;
  background: var(--color-primary-600);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  z-index: 2;
  flex-shrink: 0;
}

.process-step .step-content {
  flex: 1;
  padding: var(--spacing-lg);
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin: 0 var(--spacing-lg);
}

.process-step .step-content h3 {
  font-size: 1.5rem;
  color: var(--color-primary-900);
  margin-bottom: var(--spacing-sm);
}

.process-step .step-content p {
  color: var(--color-gray-600);
  line-height: 1.6;
}

/* CTA final */
.final-cta-section {
  padding: var(--spacing-xxl) 0;
  background: var(--color-primary-900);
  color: var(--color-white);
  text-align: center;
}

.final-cta h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: var(--spacing-md);
  color: var(--color-white);
}

.final-cta p {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-xl);
  opacity: 0.9;
}

.final-cta .cta-actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
}

.final-cta .btn-large {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: 1.125rem;
  font-weight: 600;
  min-height: 56px;
}

/* Section témoignages */
.testimonials-section {
  padding: var(--spacing-xxl) 0;
  background: var(--color-white);
}

.testimonials-section .section-header {
  text-align: center;
  margin-bottom: var(--spacing-xxl);
}

.testimonials-section .section-header h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--color-primary-900);
  margin-bottom: var(--spacing-md);
}

.testimonials-section .section-header p {
  font-size: 1.25rem;
  color: var(--color-gray-600);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--spacing-xl);
  max-width: 1200px;
  margin: 0 auto;
}

.testimonial-item {
  background: var(--color-gray-50);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-xl);
  position: relative;
}

.testimonial-item .quote-icon {
  position: absolute;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  width: 24px;
  height: 24px;
  color: var(--color-primary-300);
}

.testimonial-content p {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-gray-700);
  margin-bottom: var(--spacing-lg);
  font-style: italic;
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.testimonial-author strong {
  color: var(--color-primary-900);
  font-size: 1.125rem;
}

.testimonial-author span {
  color: var(--color-gray-600);
  font-size: 0.875rem;
}

/* Section FAQ */
.faq-section {
  padding: var(--spacing-xxl) 0;
  background: var(--color-gray-50);
}

.faq-section .section-header {
  text-align: center;
  margin-bottom: var(--spacing-xxl);
}

.faq-section .section-header h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--color-primary-900);
  margin-bottom: var(--spacing-md);
}

.faq-section .section-header p {
  font-size: 1.25rem;
  color: var(--color-gray-600);
}

.faq-list {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  background: var(--color-white);
  border-radius: var(--border-radius-lg);
  margin-bottom: var(--spacing-md);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.faq-question {
  padding: var(--spacing-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-white);
  border: none;
  width: 100%;
  text-align: left;
  transition: background-color 0.3s ease;
}

.faq-question:hover {
  background: var(--color-gray-50);
}

.faq-question h3 {
  font-size: 1.125rem;
  color: var(--color-primary-900);
  margin: 0;
}

.faq-question i {
  width: 20px;
  height: 20px;
  color: var(--color-primary-600);
  transition: transform 0.3s ease;
}

.faq-item[open] .faq-question i {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 var(--spacing-lg) var(--spacing-lg);
}

.faq-answer p {
  color: var(--color-gray-600);
  line-height: 1.6;
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-estimer {
    padding: var(--spacing-xl) 0;
  }
  
  .hero-estimer .hero-cta {
    flex-direction: column;
    align-items: center;
  }
  
  .hero-estimer .btn-hero {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
  
  .hero-estimer .hero-badges {
    flex-direction: column;
    align-items: center;
  }
  
  .process-timeline::before {
    left: 30px;
  }
  
  .process-step {
    flex-direction: column !important;
    align-items: flex-start;
    margin-left: 30px;
  }
  
  .process-step .step-content {
    margin: var(--spacing-md) 0 0 0;
    width: 100%;
  }
  
  .advantages-grid,
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  
  .final-cta .cta-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .final-cta .btn-large {
    width: 100%;
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  .hero-estimer .hero-title {
    font-size: 2rem;
  }
  
  .hero-estimer .hero-subtitle {
    font-size: 1rem;
  }
  
  .advantage-item,
  .testimonial-item {
    padding: var(--spacing-lg);
  }
  
  .process-step .step-content {
    padding: var(--spacing-md);
  }
}

/* HERO - COMPLÈTEMENT TRANSPARENT, AUCUNE CARD */
.page-estimer .page-hero{
  padding: 80px 0 20px;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}
.page-estimer .page-hero .container{display:grid;grid-template-columns:1fr;}
.page-estimer .page-hero .section-title{font-size:clamp(1.5rem,6.5vw,2.2rem);letter-spacing:-0.02em;}
.page-estimer .page-hero .section-subtitle{max-width:62ch;margin:0 auto 0;font-size:1rem;color:var(--dark-gray);}
.page-estimer .hero-badges{gap:var(--spacing-sm);}
.page-estimer .hero-badge{padding:.55rem 1rem;border-radius:9999px;font-size:.9rem}
.page-estimer .hero-badge i{width:18px;height:18px}
.page-estimer .hero-media{margin-top:4px}
.page-estimer .hero-media-frame{aspect-ratio:16/9;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg)}
.page-estimer .hero-media-frame img{width:100%;height:100%;object-fit:cover;display:block}

/* Note du hero */
.page-estimer .hero-note {
  margin-top: var(--spacing-md);
  font-size: 0.875rem;
  color: var(--color-gray-600);
  text-align: center;
}

/* CTA centré et mis en avant */
.page-estimer .cta-centered {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.page-estimer .cta-centered .cta-content {
  padding: var(--spacing-xxl) var(--spacing-xl);
  background: linear-gradient(135deg, var(--color-white) 0%, var(--color-primary-50) 100%);
  border-radius: var(--border-radius-xl);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  border: 2px solid var(--color-primary-200);
  position: relative;
  overflow: hidden;
}

.page-estimer .cta-centered .cta-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gold-gradient);
}

.page-estimer .cta-centered .cta-eyebrow {
  color: var(--color-primary-600);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-sm);
}

.page-estimer .cta-centered h3 {
  font-size: 1.75rem;
  color: var(--color-primary-900);
  margin-bottom: var(--spacing-md);
  line-height: 1.3;
}

.page-estimer .cta-centered .cta-actions {
  justify-content: center;
  margin-top: var(--spacing-xl);
  gap: var(--spacing-md);
}

.page-estimer .cta-centered .cta-note {
  margin-top: var(--spacing-lg);
  font-size: 0.875rem;
  color: var(--color-gray-600);
  font-style: italic;
}

/* CTA du hero - complètement nus, sans card */
.page-estimer .hero-cta {
  margin-top: var(--spacing-xs);
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
  flex-wrap: wrap;
}

.page-estimer .hero-cta .btn {
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  min-height: 40px;
  background: transparent;
  border: none;
  box-shadow: none;
  text-decoration: none;
}

.page-estimer .hero-cta .btn-primary {
  background: var(--gold-gradient);
  color: var(--secondary-color);
  border: none;
}

.justify-center{
  display:flex;
  justify-content: center;
}

.page-estimer .hero-cta .btn-outline {
  background: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.page-estimer .hero-note {
  margin-top: var(--spacing-md);
  font-size: 0.875rem;
  color: var(--color-gray-600);
  text-align: center;
}

/* Process steps - style comme acheter/vendre */
.page-estimer .process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  max-width: 700px;
  margin: 0 auto;
}

.page-estimer .process-step {
  background: var(--light-gray);
  border: 1px solid var(--medium-gray);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-lg) calc(48px + 16px);
  line-height: 1.6;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page-estimer .process-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.page-estimer .process-step .step-number {
  position: absolute;
  left: var(--spacing-lg);
  top: var(--spacing-lg);
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: var(--gold-gradient);
  color: var(--secondary-color);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-estimer .process-step .step-content h4 {
  font-size: 1.1rem;
  color: var(--primary-color);
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
}

.page-estimer .process-step .step-content p {
  color: var(--dark-gray);
  line-height: 1.6;
  margin: 0;
}

/* Navigation des témoignages centrée */
.page-estimer .testimonials-nav {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-xl);
}

.page-estimer .nav-dots-container {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
}

/* CTA SECTION (alternance white) */
.estimation-cta-section{background:var(--secondary-color);padding:60px 0}
.estimation-cta{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--spacing-xl);align-items:center}
@media (max-width:992px){.estimation-cta{grid-template-columns:1fr}}
.page-estimer .cta-content .cta-eyebrow{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-color);margin-bottom:.35rem}
.page-estimer .cta-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-sm)}
@media (max-width:768px){.page-estimer .cta-actions{grid-template-columns:1fr}}
.btn-large{padding:1rem 1.25rem;font-size:1rem}
@media (max-width:768px){.btn-large{width:100%;justify-content:center}}

/* RÉASSURANCE (tint) */
.estimation-info-section{background:var(--light-gray);padding:56px 0}
.estimation-info-section .estimation-info{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-lg)}
@media (max-width:992px){.estimation-info-section .estimation-info{grid-template-columns:1fr 1fr}}
@media (max-width:768px){
  .estimation-info-section .estimation-info{grid-template-columns:1fr;gap:var(--spacing-md)}
  .page-estimer .info-card{background:var(--secondary-color);border:1px solid var(--medium-gray);box-shadow:none;padding:var(--spacing-lg)}
}

/* MÉTHODO (tint + timeline mobile, moins "card") */
.page-estimer .estimation-process-section{background:var(--light-gray);padding:72px 0}
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-lg)}
@media (max-width:992px){.process-steps{grid-template-columns:1fr 1fr}}
@media (max-width:768px){
  .process-steps{grid-template-columns:1fr;gap:var(--spacing-md);position:relative}
  .process-steps::before{content:"";position:absolute;left:28px;top:0;bottom:0;width:2px;background:var(--medium-gray)}
  .process-step{background:var(--secondary-color);border-color:var(--medium-gray);text-align:left;padding-left:68px;box-shadow:none}
  .process-step .step-number{position:absolute;left:0;top:18px}
}

/* AVIS (white) */
.page-estimer .testimonials{background:var(--secondary-color);padding:64px 0}
@media (max-width:768px){.testimonial-quote p{font-size:1.06rem}}
.nav-dot{width:12px;height:12px}
@media (max-width:768px){.nav-dot{width:14px;height:14px}}

/* FAQ (tint) */
.page-estimer .faq{background:var(--light-gray);padding:64px 0}
.faq .faq-item{border:1px solid var(--medium-gray);border-radius:var(--radius-lg);background:var(--secondary-color);overflow:hidden}
.faq .faq-item + .faq-item{margin-top:var(--spacing-sm)}
.faq .faq-question{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:1rem 1rem;cursor:pointer}
.faq .faq-question h3{font-size:1rem}
.faq .faq-question i{transition:transform .25s ease}
.faq details[open] .faq-question i{transform:rotate(180deg)}
.faq .faq-answer{padding:0 1rem 1rem;color:var(--dark-gray);line-height:1.7}

/* Rythme & confort de lecture mobile */
@media (max-width:768px){
  .page-estimer section{padding:48px 0}
  .page-estimer .section-title{font-size:clamp(1.4rem,6vw,2rem)}
  .page-estimer .section-subtitle{font-size:1rem}
}

/* ============================
   ESTIMER — Mobile/UI polish
   Scope: .page-estimer
   ============================ */

/* HERO */
.page-estimer .page-hero{
  padding: 110px 0 28px; /* passe sous le header fixe */
  background: var(--secondary-color);
}
.page-estimer .page-hero .container{
  display: grid;
  grid-template-columns: 1fr;
}
.page-estimer .page-hero .section-title{
  font-size: 2.5rem !important;
  letter-spacing: -0.02em;
}
.page-estimer .page-hero .section-subtitle{
  max-width: 64ch;
  font-size: 1rem;
  color: var(--dark-gray);
}
.page-estimer .hero-badges{
  gap: var(--spacing-sm);
  justify-content: center;
  flex-wrap: wrap;
}
.page-estimer .hero-badge{
  padding: .55rem 1rem;
  border-radius: 9999px;
  font-size: .92rem;
  background: var(--secondary-color);
  border: 1px solid var(--medium-gray);
  box-shadow: var(--shadow-sm);
}
.page-estimer .hero-badge i{ width: 18px; height: 18px; }
.page-estimer .hero-cta{
  margin-top: var(--spacing-xs);
}
@media (max-width: 768px){
  .page-estimer .hero-cta{ grid-template-columns: 1fr; }
  .page-estimer .hero-cta .btn{ width: 100%; justify-content: center; }
  
  /* Réduction drastique des espaces sur mobile */
  .page-estimer .page-hero {
    padding: 96px 0 24px !important;
  }
  
  .page-estimer .page-hero .container {
    gap: 0 !important;
  } 

  
  .page-estimer .hero-note {
    margin-top: var(--spacing-xs) !important;
  }
}

/* Tap targets */
.page-estimer .btn{ min-height: 48px; margin-top:5px;}

/* AVANTAGES (tint) */
.page-estimer .estimation-info-section{
  background: var(--light-gray);
  padding: 56px 0;
}
.page-estimer .estimation-info-section .estimation-info{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--spacing-lg);
}
@media (max-width: 992px){
  .page-estimer .estimation-info-section .estimation-info{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px){
  .page-estimer .estimation-info-section .estimation-info{
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  .page-estimer .info-card{
    background: var(--secondary-color);
    border: 1px solid var(--medium-gray);
    box-shadow: none;
    padding: var(--spacing-lg);
  }
}

/* PROCESS (tint + timeline mobile) */
.page-estimer .estimation-process-section{
  background: var(--light-gray);
  padding: 72px 0;
}
.page-estimer .process-steps{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--spacing-lg);
}
@media (max-width: 992px){
  .page-estimer .process-steps{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px){
  .page-estimer .process-steps{
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    position: relative;
  }
  .page-estimer .process-steps::before{
    content:""; position:absolute; left:28px; top:0; bottom:0; width:2px; background: var(--medium-gray);
  }
  .page-estimer .process-step{
    background: var(--secondary-color);
    border-color: var(--medium-gray);
    text-align: left;
    padding-left: 68px;
    box-shadow: none;
    position: relative;
  }
  .page-estimer .process-step .step-number{
    position:absolute; left:0; top:18px;
  }
}

/* CTA (white) */
.page-estimer .estimation-cta-section{ background: var(--secondary-color); padding: 60px 0; }
.page-estimer .estimation-cta{
  display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); align-items: center; text-align: center;
}
.page-estimer .cta-eyebrow{ font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color: var(--primary-color); margin-bottom:.35rem; }
.page-estimer .cta-actions{
  display:grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-sm);
}
@media (max-width: 768px){
  .page-estimer .cta-actions{ grid-template-columns: 1fr; }
  .page-estimer .btn-large{ width: 100%; justify-content: center; }
}

/* AVIS (white) — compatibilité .testimonials-nav / .testimonial-nav */
.page-estimer .testimonials{ background: var(--secondary-color); padding: 64px 0; }
.page-estimer .testimonials-nav,
.page-estimer .testimonial-nav{
  display: flex; justify-content: center; gap: var(--spacing-sm); margin-top: var(--spacing-xl);
}
.page-estimer .nav-dot{ width: 14px; height: 14px; border-radius: 50%; background: var(--medium-gray); border: none; cursor: pointer; transition: var(--transition); }
.page-estimer .nav-dot.active, 
.page-estimer .nav-dot:hover{ background: var(--primary-color); transform: scale(1.12); }

/* FAQ (tint) */
.page-estimer .faq{ background: var(--light-gray); padding: 64px 0; }
.page-estimer .faq .faq-item{
  border: 1px solid var(--medium-gray);
  border-radius: var(--radius-lg);
  background: var(--secondary-color);
  overflow: hidden;
}
.page-estimer .faq .faq-item + .faq-item{ margin-top: var(--spacing-sm); }
.page-estimer .faq .faq-question{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:1rem 1rem; cursor:pointer;
}
.page-estimer .faq .faq-question h3{ font-size:1rem; margin:0; }
.page-estimer .faq .faq-question i{ transition: transform .25s ease; width: 20px; height: 20px; }
.page-estimer .faq details[open] .faq-question i{ transform: rotate(180deg); }
.page-estimer .faq .faq-answer{ padding:0 1rem 1rem; color: var(--dark-gray); line-height: 1.7; }

/* Rythme & lecture */
@media (max-width: 768px){
  .page-estimer section{ padding: 48px 0; }
  .page-estimer .container{ padding-left: 10px; padding-right: 10px; padding-bottom: 0px !important;}
  .page-estimer .section-title{ font-size: clamp(1.4rem, 6vw, 2rem); }
  .page-estimer .section-subtitle{ font-size: 1rem; }
}

/* === ESTIMER — retirer la "card" autour du CTA === */
.page-estimer .cta-centered .cta-content{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.page-estimer .cta-centered .cta-content::before{ 
  display: none !important; 
}

/* (Optionnel) confort d’espacement sans la card */
.page-estimer .estimation-cta-section{ padding: clamp(40px, 6vw, 72px) 0; }
.page-estimer .cta-centered .cta-actions{ margin-top: var(--spacing-lg); } /* déjà présent, on le renforce au cas où */


/* === PATCH 2025-08-19 — ESTIMER: aligner le HERO mobile (titre & sous-titre)
   exactement sur /acheter et /vendre (même typo, tailles, espacements) === */
@media (max-width: 480px){
  /* Titre du hero */
  .page-estimer .page-hero .section-title{
    font-family: var(--font-heading) !important;
    font-size: 2.5rem !important;           /* taille mobile spécifique */
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.5px !important;
    margin-bottom: var(--spacing-sm) !important; /* même écart titre → sous-titre */
    text-align: center !important;
  }

  /* Sous-titre du hero */
  .page-estimer .page-hero .section-subtitle{
    font-size: 1.1rem !important;         /* harmonisé */
    line-height: 1.6 !important;
    color: var(--dark-gray) !important;
    margin-top: 0 !important;
    margin-bottom: var(--spacing-lg) !important;
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}

/* === ESTIMER — Méthodo : 1 seule carte, propre et respirante === */

/* Section en fond "tint" déjà OK plus haut, on s'aligne sur le style mobile en allégeant desktop */
.page-estimer .estimation-process-section {
  background: var(--light-gray);
  padding: clamp(48px, 6vw, 72px) 0;
}

/* Grille responsive simple (3 colonnes max) */
.page-estimer .process-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-lg);
  max-width: 1100px;
  margin-inline: auto;
}
@media (max-width: 992px){ .page-estimer .process-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px){ .page-estimer .process-steps { grid-template-columns: 1fr; } }

/* ✔︎ Un seul "contenant" par étape (fin du card-in-card) */
.page-estimer .process-step {
  position: relative;
  background: var(--secondary-color);          /* surface claire (white --tint) */
  border: 1px solid var(--medium-gray);        /* trait discret */
  border-radius: var(--radius-lg);
  box-shadow: none;                             /* stop aux grosses ombres */
  text-align: left;
  padding: clamp(18px, 2.5vw, 24px) clamp(18px, 2.5vw, 24px) clamp(18px, 2.5vw, 24px) 72px;
  transition: transform .2s ease;
}
@media (hover:hover){
  .page-estimer .process-step:hover { transform: translateY(-2px); }
}

/* Médaillon numéroté, cohérent avec le gradient de marque */
.page-estimer .process-step .step-number {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg,#F9A312,#F895AC);
  box-shadow: 0 6px 16px rgba(249,163,18,.25);
}

/* On supprime toute “deuxième carte” éventuelle sur le contenu */
.page-estimer .process-step .step-content {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Typo respirante */
.page-estimer .process-step h4 {
  margin: 0 0 .35rem 0;
  font-size: 1.15rem;
  color: var(--primary-color);
  line-height: 1.25;
}
.page-estimer .process-step p {
  margin: 0;
  color: var(--dark-gray);
  line-height: 1.6;
}

/* Mobile : timeline nette (on garde la logique déjà présente mais sans carte dans la carte) */
@media (max-width: 768px){
  .page-estimer .process-steps { position: relative; }
  .page-estimer .process-steps::before{
    content:""; position:absolute; left:28px; top:0; bottom:0; width:2px; background: var(--medium-gray);
  }
  .page-estimer .process-step{
    padding-left: 72px;
    background: var(--secondary-color);
    border-color: var(--medium-gray);
    box-shadow: none;
  }
  .page-estimer .process-step .step-number{ left: 6px; top: 18px; }
}

/* === HEADER · logo gauche | nav centré | actions droite === */
.nav-container.nav-three-zones{
  /* passe de flex (défaut actuel) à grid sur cette variante seulement */
  width: 100%;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
}

/* Zones */
.nav-left{display:flex; align-items:center; gap:16px;}
.nav-center{display:flex; align-items:center; justify-content:center;}
.nav-right{display:flex; align-items:center; gap:16px;}


/* La colonne droite n'a plus besoin de "push" */
.nav-actions.nav-right{ margin-left: 0 !important; }

/* Dropdown centré visuellement sous "Lifestyle" (optionnel) */
.nav-dropdown .dropdown-menu{ left: 50%; transform: translate(-50%, -10px); }
.nav-dropdown:hover .dropdown-menu{ transform: translate(-50%, 0); }

/* Responsive : bascule sur menu mobile */
@media (max-width: 1024px){
  .nav-links.nav-center{ display:none; }
  .hamburger-btn{ display:flex !important; }
  .nav-right{ gap:12px; }
}

/* === NUMÉRO DE TÉLÉPHONE DANS LE HEADER === */

/* Container pour le numéro et le bouton Appeler sur desktop */
.header-phone-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Numéro de téléphone sur desktop */
.phone-number {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--dark-gray);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: color 0.2s ease;
}

.phone-number:hover {
  color: var(--primary-color);
}

.phone-number i {
  width: 16px;
  height: 16px;
  color: var(--primary-color);
}

/* Numéro de téléphone sur mobile (dans le header du menu) */
.mobile-phone-number {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.mobile-phone-number a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--dark-gray);
  text-decoration: none;
  font-weight: 500;
  font-size: 18px;
  transition: color 0.2s ease;
}

.mobile-phone-number a:hover {
  color: var(--primary-color);
}

.mobile-phone-number i {
  width: 16px;
  height: 16px;
  color: var(--primary-color);
}

/* === MENU MOBILE - DESIGN PARFAITEMENT CALIBRÉ === */

/* Bouton hamburger - Droite, noir, même taille que le logo */
.hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 1001;
  transition: all 0.2s ease;
}

.hamburger-btn:hover {
  background: var(--light-gray);
}

.hamburger-btn i {
  width: 20px;
  height: 20px;
  color: #000000 !important;
  transition: all 0.3s ease;
}

/* Animation du bouton hamburger actif */
.hamburger-btn.active i {
  color: #000000 !important;
}

/* Menu mobile - plein écran avec overlay */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  padding: 0;
}

.mobile-menu.active {
  transform: translateX(0);
}

/* Header du menu mobile avec logo */
.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 20px;
  border-bottom: 1px solid var(--light-gray);
  background: var(--secondary-color);
}

.mobile-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mobile-logo .logo-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 900;
  font-size: 18px;
}

.mobile-logo .logo-text {
  display: flex;
  flex-direction: column;
}

.mobile-logo .logo-title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 800;
  color: var(--primary-color);
  line-height: 1.1;
}

.mobile-logo .logo-subtitle {
  font-size: 11px;
  color: var(--dark-gray);
  font-weight: 600;
  line-height: 1.1;
}

/* Navigation mobile */
.mobile-nav-links {
  list-style: none;
  margin: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-nav-link,
.mobile-dropdown-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  color: var(--primary-color);
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  border-radius: 12px;
  transition: all 0.2s ease;
  min-height: 56px;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.mobile-nav-link:hover,
.mobile-dropdown-btn:hover {
  background: var(--light-gray);
  color: var(--accent-color);
  transform: translateX(4px);
}

/* Dropdown mobile */
.mobile-dropdown {
  margin-bottom: 0;
}

.mobile-dropdown-btn i {
  transition: transform 0.3s ease;
  width: 20px;
  height: 20px;
}

.mobile-dropdown.active .mobile-dropdown-btn i {
  transform: rotate(180deg);
}

.mobile-dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: var(--light-gray);
  border-radius: 12px;
  margin: 0 20px 8px 20px;
}

.mobile-dropdown.active .mobile-dropdown-menu {
  max-height: 200px;
  padding: 8px 0;
}

.mobile-dropdown-link {
  display: block;
  padding: 14px 24px;
  color: var(--dark-gray);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.mobile-dropdown-link:hover {
  color: var(--accent-color);
  background: rgba(249, 163, 18, 0.1);
  padding-left: 28px;
}

/* Boutons spécifiques au menu mobile */
.mobile-menu-buttons {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid var(--light-gray);
}

/* Sélecteur de langue mobile - même style que desktop, aligné à gauche */
.mobile-menu-buttons .language-selector {
  display: flex;
  justify-content: flex-start;
}

.mobile-menu-buttons .language-btn {
  background: transparent !important;
  border: none !important;
  padding: 10px 15px !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer !important;
  transition: var(--transition) !important;
  color: var(--dark-gray) !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.mobile-menu-buttons .language-btn:hover {
  background: transparent !important;
  transform: translateY(-2px) !important;
}

.mobile-menu-buttons .language-btn i:first-child {
  color: var(--primary-color);
}

/* Bouton Appeler mobile - style principal */
.mobile-menu-buttons .btn-phone {
  width: 100%;
  height: 56px;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.mobile-menu-buttons .btn-phone:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(249, 163, 18, 0.3);
}





/* Responsive - afficher le bouton hamburger sur mobile */
@media (max-width: 1023px) {
  .hamburger-btn {
    display: flex !important;
  }
  
  .nav-actions {
    display: flex !important;
  }
  
  .nav-links {
    display: none !important;
  }
  
  /* Masquer le sélecteur de langue et le bouton Appeler du header desktop sur mobile */
  .language-selector {
    display: none !important;
  }
  
  .nav-actions .btn-phone {
    display: none !important;
  }
  
  /* Afficher les actions dans le menu mobile */
  .mobile-header-actions {
    display: flex !important;
  }
}

/* Responsive - masquer le bouton hamburger sur desktop */
@media (min-width: 1024px) {
  .hamburger-btn {
    display: none !important;
  }
  
  .mobile-menu {
    display: none !important;
  }
  
  /* Afficher le sélecteur de langue et le bouton Appeler dans le header desktop */
  .language-selector,
  .nav-actions .btn-phone {
    display: flex !important;
  }
  
  /* Masquer les actions du menu mobile sur desktop */
  .mobile-header-actions {
    display: none !important;
  }
}

/* État du body quand le menu mobile est ouvert */
body.mobile-menu-open {
  overflow: hidden;
}


/* --- Estimation Longform (SEO block sous le formulaire) --- */
.estimation-longform{
  padding: 80px 0;
  background: var(--light-gray);
}
.estimation-longform .longform-content{
  max-width: 100%;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--dark-gray);
  text-align: left;
}

/* S'assurer que les titres et sous-titres dans longform restent centrés */
.estimation-longform .section-title,
.estimation-longform .section-subtitle {
  text-align: left !important;
}
.estimation-longform h3{
  font-family: var(--font-heading);
  font-size: 1.6rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--primary-color);
  letter-spacing: -0.3px;
  text-transform: none;
}
.estimation-longform p,
.estimation-longform li{ 
  margin-bottom: 1rem; 
  text-align: left;
}
.estimation-longform ul, .estimation-longform ol{
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: left;
}
.estimation-longform a{
  color: #F9A312;
  text-decoration: none;
  font-weight: 600;
}
.estimation-longform a:hover{ text-decoration: underline; }
.estimation-longform .longform-cta{
  display: flex;
  gap: 1rem;
  margin: 2rem 0 0;
  flex-wrap: wrap;
  justify-content: center;
}

/* S'assurer que les boutons dans longform-cta ont le bon design */
.estimation-longform .longform-cta .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.estimation-longform .longform-cta .btn-primary {
  background: var(--gold-gradient);
  color: var(--secondary-color);
  border: none;
  position: relative;
  overflow: hidden;
}

.estimation-longform .longform-cta .btn-primary:hover {
  background: linear-gradient(135deg, #F895AC, #F9A312);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.estimation-longform .longform-cta .btn-outline {
  background: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.estimation-longform .longform-cta .btn-outline:hover {
  background: var(--primary-color);
  color: var(--secondary-color);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
@media (max-width: 768px){
  .estimation-longform{ padding: 56px 0; }
  .estimation-longform .longform-content{ font-size: 1.02rem; }
  
  /* Styles responsifs pour les boutons sur mobile */
  .estimation-longform .longform-cta {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  
  .estimation-longform .longform-cta .btn {
    width: 100%;
    max-width: 300px;
    justify-content: center;
    padding: 1rem 1.5rem;
    font-size: 1rem;
  }
}

/* === Alternance globale des sections (PC & mobile) === */
.section { padding: 80px 0; }
@media (max-width: 900px){ .section { padding: 64px 0; } }

/* Spécificité + forte que les classes de section individuelles */
.section.section--white { background: var(--secondary-color); }
.section.section--tint  { background: var(--light-gray); }

/* === CTA empilement (sans carte) === */
.cta-card{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  gap: clamp(16px, 2.5vw, 28px) !important;
  align-items: flex-start !important;
  max-width: 980px;             /* joli bloc étroit dans la page */
  margin-inline: auto;           /* centré dans le container */
}

/* Typo & rythme */
.cta-eyebrow{
  background: transparent;
  border: 0;
  padding: 0;
  margin-bottom: 6px;
  opacity: .8;
}
.cta-title{ margin: 0 0 6px 0; }
.cta-subtitle{
  margin: 0;
  max-width: 70ch;
}

/* === CTA — centrage global (desktop + mobile) === */
.cta .cta-card{
  align-items: center !important;
  text-align: center !important;
  max-width: 980px;
  margin-inline: auto;
}
.cta .cta-actions{
  justify-content: center !important;
}
.cta .section-subtitle{
  margin-bottom:10px;
}

/* Optionnel : garder de beaux boutons pleine largeur sur mobile */
@media (max-width: 900px){
  .cta .btn{
    width: 100%;
    margin-bottom: 10px;
    max-width: 420px;
  }
}

/* Forcer l'affichage du sélecteur de langue quand il est DANS le menu mobile */
@media (max-width: 1023px) {
  .mobile-menu .language-selector { 
    display: flex !important; 
    justify-content: flex-start;
  }
}

/* --- MOBILE: afficher le numéro dans la barre, cacher le bouton --- */
@media (max-width: 1023px) {
  /* Affiche le conteneur du téléphone dans la barre du haut */
  .header-phone-info {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
  }

  /* Cache le gros bouton "Appeler" dans la barre (il reste dans le menu mobile) */
  .header-phone-info .btn-phone {
    display: none !important;
  }

  /* Montre le lien numéro à côté du hamburger */
  .header-phone-info .phone-number {
    display: inline-flex !important;
    align-items: center;
    font-size: 16px;
    gap: 6px;
    font-weight: 600;
    text-decoration: none;
    padding: 6px 8px;
  }

  .header-phone-info .phone-number i {
    margin-right: 2px;
  }

  /* Un peu d’air entre numéro et hamburger */
  .nav-right {
    display: flex !important;
    align-items: center;
    gap: 12px;
  }
}

/* Optionnel — si l’espace est très réduit (<360px), on réduit la typo du numéro */
@media (max-width: 360px) {
  .header-phone-info .phone-number span { font-size: 13px; }
}

/* MOBILE: n'afficher que le "T" du logo dans le header (et header du menu mobile) */
@media (max-width: 1023px) {
  /* Barre du haut */
  .navbar .logo .logo-text { 
    display: none !important; 
  }
  .navbar .logo { 
    gap: 8px; /* resserre un peu l'espace */
  }
  .navbar .logo .logo-icon {
    width: 36px;
    height: 36px; /* optionnel: réduit légèrement l'icône sur petits écrans */
  }

  /* En-tête du panneau mobile (si affiché) */
  .mobile-menu .mobile-logo .logo-text {
    display: none !important;
  }
}

/* === ANIMATIONS D'APPARITION RÉUTILISABLES === */

/* Animation de base pour l'apparition des sections */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Classes d'animation réutilisables */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--animation-duration) var(--animation-easing),
              transform var(--animation-duration) var(--animation-easing);
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

/* Variantes d'animation */
.animate-fade-in-up {
  animation: fadeInUp var(--animation-duration) var(--animation-easing) forwards;
}

.animate-fade-in-left {
  animation: fadeInLeft var(--animation-duration) var(--animation-easing) forwards;
}

.animate-fade-in-right {
  animation: fadeInRight var(--animation-duration) var(--animation-easing) forwards;
}

.animate-fade-in-scale {
  animation: fadeInScale var(--animation-duration) var(--animation-easing) forwards;
}

/* Délais d'animation pour créer un effet cascade */
.animate-delay-1 { animation-delay: calc(var(--animation-delay) * 1); }
.animate-delay-2 { animation-delay: calc(var(--animation-delay) * 2); }
.animate-delay-3 { animation-delay: calc(var(--animation-delay) * 3); }

/* Désactiver les animations sur les appareils qui préfèrent moins de mouvement */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .animate-fade-in-up,
  .animate-fade-in-left,
  .animate-fade-in-right,
  .animate-fade-in-scale {
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Section sans chips */
.neighborhoods-cta .section-subtitle{
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
}

.rq-body-single{
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

/* Grille & cartes (inchangé si déjà présent) */
.rq-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--spacing-lg);
  margin: 0 0 var(--spacing-lg) 0;
  text-align: left;
}

.rq-card{
  background: var(--secondary-color);
  border: 1px solid var(--medium-gray);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.rq-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-color);
}
.rq-card h3{
  font-family: var(--font-heading);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: -.5px;
  margin: .4rem 0 .4rem;
}
.rq-card .muted{ color: var(--dark-gray); }

.rq-icon{
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--gold-gradient);
  box-shadow: var(--shadow-sm);
}
.rq-icon i[data-lucide]{ color: #fff; width: 22px; height: 22px; }

.rq-cta{ display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }

/* Mobile */
@media (max-width: 980px){
  .rq-grid{ grid-template-columns: 1fr; gap: .9rem; }
  .rq-body-single{ text-align: left; }
}

/* === ACHETER — micro-fixes d'alignement & rythme (safe) === */

/* A. HERO : centre correctement le CTA si "justify-center" est présent */
.hero-actions.justify-center { justify-content: center; }

/* B. Sections "media-left" / "media-right" : grille stable + visuel propre (Acheter) */
.page-acheter .section .section-body{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr; /* texte / image par défaut */
  gap: var(--spacing-xl);
  align-items: start;
}
.page-acheter .section .section-body.media-right{
  grid-template-columns: 0.9fr 1.1fr; /* inverse proprement quand media-right */
}
.page-acheter .section .section-media .visual{
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.page-acheter .section .section-media .visual img{
  display:block; width:100%; height:auto;
}

/* Responsive : flux vertical sans chevauchement */
@media (max-width: 1024px){
  .page-acheter .section .section-body,
  .page-acheter .section .section-body.media-right{
    grid-template-columns: 1fr;
  }
}

/* C. Sous-titres : largeur de lecture et centrage déjà forcés, on homogénéise la marge bas */
.page-acheter .section .section-header .section-subtitle{
  margin-top: .25rem;          /* rapproché du H2 */
  margin-bottom: var(--spacing-md);
}

/* D. Listes "marketing" : espacement régulier des puces dans la page Acheter */
.page-acheter .prose-acheter .marketing-list{
  list-style: none;
  margin: 0 0 var(--spacing-md) 0;
  padding: 0;
}
.page-acheter .prose-acheter .marketing-list li{
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .5rem;
  line-height: 1.6;
}
.page-acheter .prose-acheter .marketing-list li::before{
  content: "";
  position: absolute; left: 0; top: .65em;
  width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--gold-gradient);
}

/* E. Section Quartiers (version sans chips) : rythme vertical et centrage des CTA */
.rq-body-single{ max-width: 1100px; margin: 0 auto; text-align: center; }
.rq-grid{ margin-bottom: var(--spacing-lg); }
.rq-cta{ justify-content: center; }

/* F. Budget & coûts : garantis un en-tête collé en haut du bloc (remplace le inline) */
.page-acheter #budget-frais .section-copy h3:first-child{ margin-top: 0; }


/* === /acheter — Budget/Frais: largeur harmonisée + puces sur titres === */
.page-acheter .muted,
.page-acheter .prose p.muted,
.page-acheter .prose h3.muted{
  color: var(--dark-gray) !important;
}

#budget-frais .section-copy{
  max-width: 70ch;              /* même largeur de lecture que les autres sections */
  margin-left: auto;
  margin-right: auto;
}

#budget-frais .section-copy h3{
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .15rem;
  margin-bottom: .5rem;
}

#budget-frais .section-copy h3.h3-bullet::before{
  content: "";
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold-gradient);  /* charte */
  box-shadow: var(--shadow-sm);
}

#budget-frais .section-copy p{
  margin-bottom: var(--spacing-md);
}

/* === PATCH 2025-08-24 — /acheter : responsive mobile & rythme === */
@media (max-width: 600px){

  /* Padding latéral standard (≈16px) */
  .page-acheter .container{
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Vertical rhythm des sections (plus compact que 64px) */
  .page-acheter .section{
    padding: 48px 0;
  }

  /* En-tête de section : moins d’air sous le sous-titre */
  .page-acheter .section-header{                       /* présent dans la page */
    margin-bottom: var(--spacing-md);                  /* au lieu de var(--spacing-lg) */
  }
  .page-acheter .section-header .section-title{
    margin-bottom: 6px;                                /* rapproche titre → sous-titre */
  }
  .page-acheter .section-header .section-subtitle{
    margin: 0 auto var(--spacing-sm) !important;       /* réduit l’écart sous le sous-titre */
    max-width: 62ch;                                   /* reste lisible et centré */
    text-align: center !important;
  }

  /* Grille contenu (texte↔visuel) : gap plus court en mobile */
  .page-acheter .section-body{
    gap: var(--spacing-md);                            /* ex : clamp(..., 48px) → md */
    grid-template-columns: 1fr;                        /* sécurité mobile */
  }

  /* Prose : interlignes et marges plus serrés */
  .page-acheter .prose.prose-acheter p{
    margin-block: .7em;                                /* .9em → .7em */
  }
  .page-acheter .prose.prose-acheter ul,
  .page-acheter .prose.prose-acheter ol{
    margin: .6em 0 .9em;                               /* 1em+ → plus compact */
  }

  /* Visuels : léger adoucissement & espacement */
  .page-acheter .section-media .visual{
    border-radius: var(--radius-md);
    margin-top: 6px;
  }

  /* Section “Conseils” : liste marketing plus dense */
  #conseils .marketing-list{ margin: 0; }
  #conseils .marketing-list li{ margin-bottom: .5rem; }
}

@media (max-width: 375px){
  .page-acheter .section{ padding: 44px 0; }
  .page-acheter .section-body{ gap: var(--spacing-sm); }
}

/* /acheter — images calées sur la hauteur du texte en desktop */
@media (min-width: 900px){
  .page-acheter .section-media .visual{
    overflow: hidden;            /* coupe proprement si besoin */
  }
  .page-acheter .section-media .visual img{
    display: block;
    width: 100%;
    height: 100%;                /* rempli la hauteur fixée en JS */
    object-fit: cover;           /* garde un cadrage propre */
  }
}

/* === FOOTER — dark premium, texte blanc intégral === */
.footer{
  background: var(--primary-color);
  color: #fff;
  padding: 56px 0 24px;
}
.footer a{ color: #fff; text-decoration: none; opacity: .95; transition: opacity .15s ease; }
.footer a:hover, .footer a:focus{ opacity: 1; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 2px; }

/* Layout principal */
.footer-main{
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* brand / nav */
  gap: 40px;
  align-items: start;
  margin-bottom: 24px;
}

/* Aligner le logo au même niveau que le titre Navigation */
.footer-brand {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.footer-brand .logo {
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0 !important;
}
@media (max-width: 980px){
  .footer-main{ grid-template-columns: 1fr; gap: 24px; }
}

.footer-section h3{
  font-family: var(--font-heading);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .6px;
  margin: 0 0 .75rem 0;
}

/* Aligner le titre Navigation avec le logo */
.footer-links h3 {
  margin-top: 0;
  padding-top: 0;
}

/* Marque (même logo que le header) */
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
}

/* Logo du footer : écritures blanches */
.footer .logo .logo-title {
  color: #fff !important;
}

.footer .logo .logo-subtitle {
  color: #fff !important;
}

/* Logo du footer : pas de soulignement au hover + padding bottom */
.footer .logo .logo-link:hover {
  text-decoration: none !important;
}

.footer .logo {
  padding-bottom: 30px !important;
}

.footer .footer-brand .logo {
  padding-bottom: 30px !important;
}



.footer-description{ color: rgba(255,255,255,.92); margin: 0 0 1rem 0; max-width: 46ch; }

/* Réseaux */
.footer-social{ display: flex; gap: .6rem; flex-wrap: wrap; }
.footer-social a{
  display: inline-flex; width: 36px; height: 36px; border-radius: 9999px;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  transition: transform .2s, background .2s, border-color .2s;
}
.footer-social a:hover{ transform: translateY(-2px); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); }
.footer-social i[data-lucide]{ width: 18px; height: 18px; color: #fff; }

/* Liens */
.footer-links ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .5rem .75rem;
}

/* Contact */
.footer-contact .contact-info{ display: grid; gap: .8rem; }
.footer-contact .contact-item{ display: flex; gap: .6rem; }
.footer-contact .contact-item i[data-lucide]{ width: 18px; height: 18px; color: #fff; opacity: .95; margin-top: .2rem; }

/* Bas de page */
.footer-bottom{ border-top: 1px solid rgba(255,255,255,.14); padding-top: 16px; }
.footer-bottom-content{
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
.copyright p{ margin: 0; color: #fff; opacity: .9; font-size: .95rem; }
.legal-links{ display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.legal-links a{ color: #fff; opacity: .9; }
.legal-links .separator{ color: rgba(255,255,255,.5); }

/* Mobile / tablette */
@media (max-width: 980px){
  .footer-main{
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}
@media (max-width: 680px){
  .footer{ padding: 44px 0 20px; }
  .footer-main{ grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom-content{ flex-direction: column; gap: 8px; text-align: center; }
  .footer-description{ max-width: none; }
}

/* Force tout le texte en blanc dans la zone contact du footer */
.footer .contact-item,
.footer .contact-item div,
.footer .contact-item strong,
.footer .contact-item a { 
  color: #fff !important;
}

/* (déjà OK pour les icônes, on laisse) */
/* .footer-contact .contact-item i[data-lucide]{ color:#fff; } */

/* === AVIS CLIENTS — section premium === */
.reviews .reviews-score{
  margin: .35rem 0 0;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.reviews .score-text{ color: var(--text-muted, rgba(20,20,20,.7)); }

/* Etoiles en dégradé or via ta var --gold-gradient */
.stars{
  font-weight: 800;
  letter-spacing: .08em;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;           /* fallback multi-navigateurs */
  -webkit-text-fill-color: transparent;
}
.stars-lg{ font-size: 1.15rem; }

/* Grille des avis */
.reviews-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  margin-top: 16px;
}
.review-card{
  grid-column: span 6;          /* 2 par ligne en desktop */
  background: #fff;
  color: #1b1b1b;
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-sm, 0 10px 30px rgba(0,0,0,.06));
  transition: transform .2s ease, box-shadow .2s ease;
}
.review-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 14px 40px rgba(0,0,0,.10));
}

/* En-tête de carte */
.review-meta{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.review-meta .avatar{
  width: 40px; height: 40px; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; background: var(--gold-gradient);
  box-shadow: var(--shadow-sm, 0 6px 20px rgba(0,0,0,.08));
}
.review-author{ margin: 0; font-size: 1rem; line-height: 1.2; }
.review-loc{ margin: 0; }

/* Corps + étoiles des cartes */
.review-text{ margin: 0 0 10px 0; color: rgba(20,20,20,.85); }
.review-stars{ margin: 0; line-height: 1; }

/* Responsif */
@media (max-width: 980px){
  .review-card{ grid-column: span 12; }  /* 1 par ligne en tablette/mobile */
}

/* === Estimation — wizard 4 étapes (add-on) === */
.page-estimer .estimation-form-container { scroll-behavior: auto; } /* stop micro scroll au load */

.form-progress { margin: 6px 0 18px; }
.form-progress .progress-bar {
  width: 100%; height: 6px; background: var(--medium-gray); border-radius: 9999px; overflow: hidden;
}
.form-progress .progress-fill {
  height: 100%; width: 0%; background: var(--gold-gradient); transition: width .25s ease;
}
.form-progress .progress-steps { display:flex; gap:8px; justify-content:center; margin-top:10px; }
.form-progress .step-dot {
  width: 26px; height: 26px; border-radius: 9999px; display:inline-flex; align-items:center; justify-content:center;
  background: var(--medium-gray); color:#fff; font-weight:700; font-size:.8rem; opacity:.7;
}
.form-progress .step-dot.is-active { background: #111; opacity:1; }

.type-switch { display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 14px; }
.type-choice { position: relative; }
.type-choice input { position:absolute; inset:0; opacity:0; pointer-events: none; }
.type-pill {
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px;
  border:2px solid var(--medium-gray); cursor:pointer; user-select:none; background:#fff; font-weight:600;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.type-choice input:checked + .type-pill {
  border-color:#111; box-shadow: var(--shadow-sm); transform: translateY(-1px);
}
.type-pill i[data-lucide]{ width:18px; height:18px; }

.toggle-group { display:flex; flex-wrap:wrap; gap:8px; margin-top: 6px; }
.toggle-group .toggle-label { width:100%; font-weight:600; color:#111; margin-bottom: 2px; }
.toggle { display:inline-flex; align-items:center; gap:8px; background: var(--light-gray); border:1px solid var(--medium-gray);
  padding:8px 12px; border-radius:9999px; cursor:pointer; transition: background .15s ease, transform .15s ease; }
.toggle input { display:none; }
.toggle input:checked + span,
.toggle input:checked ~ span {
  font-weight:700;
}
.toggle:has(input:checked){ background:#fff; border-color:#111; transform: translateY(-1px); }

.checkbox-label { display:flex; align-items:flex-start; gap:10px; }
.checkbox-label .checkmark { width: 20px; height: 20px; border: 2px solid var(--medium-gray); border-radius: 6px; margin-top: 2px; }
.checkbox-label input:checked + .checkmark { background: var(--gold-gradient); border-color: transparent; }
.checkbox-text { color: var(--dark-gray); }
.consent-note { color: var(--dark-gray); display:block; margin-top:6px; font-size:.8rem; }
.field-error { color: #c03131; font-size: .85rem; margin-top: 6px; }
.form-step h4 { margin-bottom: 8px; }
@media (max-width: 720px){
  .type-pill{ padding:10px 12px; }
}

/* ====== Media = Texte : hauteurs égales (hors HERO) ====== */
.section .section-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--spacing-xl);
  align-items: stretch; /* étire les colonnes à la même hauteur */
}

/* empêche le texte de "rétrécir" : la colonne texte définit la hauteur */
.section .section-body .section-copy {
  display: flex;
  flex-direction: column;
}

/* la colonne média prend 100% de la hauteur de la ligne */
.section .section-body .section-media,
.section .section-body .section-media .visual {
  height: 100%;
}

/* le <picture> et l'<img> remplissent toute la hauteur, recadrage propre */
.section .section-body .section-media .visual picture,
.section .section-body .section-media .visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;           /* recadre sans déformer */
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Variante "media-right" déjà gérée par la grille.
   Si besoin d'inverser l'ordre en CSS sans toucher au DOM : */
/*
.section .section-body.media-right {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.section .section-body.media-right .section-copy { order: 1; }
.section .section-body.media-right .section-media { order: 2; }
*/

/* Mobile : on repasse en une colonne, hauteur d'image raisonnable */
@media (max-width: 900px) {
  .section .section-body {
    grid-template-columns: 1fr;
  }
  .section .section-body .section-media .visual img {
    height: 56vw;         /* visuel responsive sans dépasser l’écran */
    max-height: 420px;    /* garde un ratio premium */
  }
}

/* === PATCH — Vendre > "Notre méthode" responsive === */
.page-vente #methode .section-body{
  /* sort de la grille 2 colonnes utilisée ailleurs */
  display: block !important;
}

.page-vente #methode .section-copy{
  max-width: 100%;
}

/* === Vendre > "Notre méthode" : layout propre mobile & desktop === */

/* Base : une colonne fluide, numéro au-dessus du contenu */
.page-vente #methode .process-steps{
  list-style: none;
  counter-reset: etape;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg, 18px);
  margin: var(--spacing-lg, 18px) 0 0;
  padding: 0;
}

.page-vente #methode .process-steps li{
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-lg, 14px);
  padding: var(--spacing-lg, 18px);            /* pas de marge réservée à gauche en mobile */
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Numéro : en flux (au-dessus), pleine largeur */
.page-vente #methode .process-steps li::before{
  counter-increment: etape;
  content: counter(etape);
  position: static !important;                 /* override des patchs précédents */
  display: inline-grid;
  place-items: center;
  width: 40px; height: 40px;
  margin: 0 0 10px 0;                          /* espace sous le médaillon */
  border-radius: 9999px;
  font-weight: 700;
  background: linear-gradient(135deg,#F9A312,#F895AC);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}

/* Titre de l'étape sur sa propre ligne */
.page-vente #methode .process-steps li > strong{
  display: block;
  margin: 2px 0 6px;
}
.page-vente #methode .inline-cta .btn{
  justify-content: center;
}

/* ===== Desktop (≥900px) : médaillon à gauche, padding réservé ===== */
@media (min-width: 900px){
  .page-vente #methode .process-steps li{
    padding: var(--spacing-lg, 18px) var(--spacing-lg, 18px)
             var(--spacing-lg, 18px) calc(56px + var(--spacing-lg, 18px));
  }
  .page-vente #methode .process-steps li::before{
    position: absolute !important;
    left: var(--spacing-lg, 18px);
    top: var(--spacing-lg, 18px);
    margin: 0;                                  /* plus de marge dessous en desktop */
    width: 40px; height: 40px;
  }
}

/* ===========================
   PRICING MANDATS — ultra épuré
   Structure HTML (déjà en place dans vendre.html) :
   #mandats-pricing .pricing-grid > article.price-card[.price-card--success]
   .price-card__head .price-title + .price-eyebrow
   .price-features > li > i[data-lucide="check"]
   .price-cta > .btn
   =========================== */

   .page-vente #mandats-pricing {
    --card-radius: 18px;
    --card-gap: 22px;
    --card-pad: 22px;
    --ring: 1px solid rgba(0,0,0,.06);
    --ring-strong: 1px solid rgba(0,0,0,.12);
    --shadow: 0 2px 18px rgba(0,0,0,.05);
    --shadow-hover: 0 10px 32px rgba(0,0,0,.10);
    --text: #0b0b0b;
    --muted: var(--dark-gray);
  }
  
  /* Grille fluide */
  .page-vente #mandats-pricing .pricing-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: var(--card-gap);
    align-items: stretch;
  }
  @media (max-width: 980px){
    .page-vente #mandats-pricing .pricing-grid{ grid-template-columns: 1fr; }
  }
  
  /* Carte : fond blanc, contour fin, ombre douce */
  .page-vente #mandats-pricing .price-card{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background:#fff;
    border-radius: var(--card-radius);
    border: var(--ring);
    box-shadow: var(--shadow);
    padding: var(--card-pad);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    text-align: left;
    color: var(--text);
  }
  .page-vente #mandats-pricing .price-card:hover{
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border: var(--ring-strong);
  }
  
  /* En-tête : typographie compacte et premium */
  .page-vente #mandats-pricing .price-card__head{ margin-bottom: 2px; }
  .page-vente #mandats-pricing .price-title{
    margin:0;
    font-family: var(--font-heading);
    font-weight: 900;
    letter-spacing: -0.2px;
    text-transform: none; /* plus élégant que full uppercase */
    font-size: 1.15rem;
    line-height: 1.25;
    color: var(--text);
  }
  .page-vente #mandats-pricing .price-eyebrow{
    margin: 4px 0 0 0;
    font-size: .92rem;
    color: var(--muted);
  }
  
  /* Liste des features : ticks ronds, aérés */
  .page-vente #mandats-pricing .price-features{
    list-style: none;
    margin: 6px 0 10px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .page-vente #mandats-pricing .price-features li{
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    line-height: 1.45;
    color: var(--text);
  }
  .page-vente #mandats-pricing .price-features li i[data-lucide]{
    width: 26px; height: 26px; min-width: 26px;
    border-radius: 999px;
    border: 1.5px solid rgba(0,0,0,.15);
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
    color: var(--primary-color);
  }
  .page-vente #mandats-pricing .price-card:hover .price-features li i[data-lucide]{
    transform: scale(1.05);
    background: rgba(0,0,0,.02);
    border-color: rgba(0,0,0,.25);
  }
  
  /* CTA : bouton pilule large */
  .page-vente #mandats-pricing .price-cta{ margin-top: auto; }
  .page-vente #mandats-pricing .price-cta .btn{
    width: 100%;
    height: 46px;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800;
  }
  
  /* Carte mise en avant (SUCCESS) : anneau dégradé + badge */
  .page-vente #mandats-pricing .price-card--success{
    border: 2px solid transparent;
    background:
      linear-gradient(#fff,#fff) padding-box,
      var(--gold-gradient, linear-gradient(135deg,#F9A312,#F895AC)) border-box;
    box-shadow: 0 10px 40px rgba(248,149,172,.20);
  }
  .page-vente #mandats-pricing .price-card--success .price-title{
    color: var(--primary-color);
  }
  .page-vente #mandats-pricing .price-badge{
    position: absolute;
    top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--gold-gradient, linear-gradient(135deg,#F9A312,#F895AC));
    color:#fff;
    font-weight: 800; font-size: .72rem; letter-spacing: .3px;
    padding: 6px 10px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(248,149,172,.30);
  }
  
  /* Petits plus UX */
  .page-vente #mandats-pricing .price-card u{ text-underline-offset: 2px; }
  .page-vente #mandats-pricing .price-card .muted{ color: var(--muted); }
  
  /* Micro responsive */
  @media (max-width: 560px){
    .page-vente #mandats-pricing { --card-pad: 18px; --card-radius: 16px; }
    .page-vente #mandats-pricing .price-title{ font-size: 1.08rem; }
    .page-vente #mandats-pricing .price-features{ gap: 8px; }
  }

  /* === SOULIGNEMENT PAGE ACTIVE === */
  .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #F9A312;
    border-radius: 2px;
  }
  
  .mobile-nav-link.active::after {
    bottom: -3px;
  }

  /* === BOUTON FLOTTANT ESTIMER === */
  .floating-estimate-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: auto;
    min-width: 180px;
    height: 60px;
    background: linear-gradient(135deg, #F9A312, #F895AC);
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 1000;
    cursor: pointer;
    text-decoration: none;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
    line-height: 1.2;
    padding: 0 25px;
    border: none;
    gap: 10px;
    overflow: hidden;
  }



  .floating-estimate-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 35px rgba(249, 163, 18, 0.6);
  }

  .floating-estimate-btn:active {
    transform: translateY(-1px) scale(1.02);
  }

  .floating-estimate-btn i {
    width: 24px;
    height: 24px;
    margin-bottom: 2px;
  }

  /* Responsive */
  @media (max-width: 768px) {
    .floating-estimate-btn {
      bottom: 20px;
      right: 20px;
      min-width: 160px;
      height: 50px;
      font-size: 0.8rem;
      padding: 0 20px;
    }
    
    .floating-estimate-btn i {
      width: 18px;
      height: 18px;
    }
  }

  /* Masquer sur certaines pages si nécessaire */
  .page-estimer .floating-estimate-btn {
    display: none;
  }

  /* === FIL D'ARIANE (BREADCRUMB) === */
  .breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: var(--accent-color);
    flex-wrap: wrap;
  }

  .breadcrumb-link {
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.2s ease;
    font-weight: 500;
  }

  .breadcrumb-link:hover {
    color: var(--primary-color);
  }

  .breadcrumb-current {
    color: var(--primary-color);
    font-weight: 600;
  }

  .breadcrumb-separator {
    color: var(--medium-gray);
    font-weight: 300;
  }

  /* Responsive */
  @media (max-width: 768px) {
    .breadcrumbs {
      font-size: 0.85rem;
      gap: 0.4rem;
      margin-bottom: 1rem;
    }
  }