/* ===================================================================
   PARISIAN ELEGANCE
   Page-specific styles and editorial enhancements
   Base: design-system.css
   =================================================================== */

/* ===================================
   EDITORIAL IMAGE TREATMENTS
   =================================== */

/* Fullscreen hero backgrounds */
.hero {
    background-image: url('/images/AdobeStock/AdobeStock_113030139-1280x853.jpeg');
    background-size: cover;
    background-position: center;
}

.hero::before {
    background: linear-gradient(
        to bottom,
        rgba(248, 246, 244, 0.85) 0%,
        rgba(248, 246, 244, 0.92) 100%
    );
    opacity: 1;
}

/* Service Page Heroes - Bold imagery */
.hero-augmentation-mammaire {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.7) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/AdobeStock/AdobeStock_244937846_red-1200x900.jpeg');
    background-size: cover;
    background-position: center;
    color: var(--color-white);
}

.hero-rhinoplastie {
    background:
        linear-gradient(to right, rgba(10,10,10,0.7) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/AdobeStock/AdobeStock_284503629-1920x1344.jpeg');
    background-size: cover;
    background-position: center 30%;
    color: var(--color-white);
}

.hero-augmentation-mammaire h1,
.hero-augmentation-mammaire .hero-subtitle,
.hero-augmentation-mammaire .eyebrow,
.hero-rhinoplastie h1,
.hero-rhinoplastie .hero-subtitle,
.hero-rhinoplastie .eyebrow {
    color: var(--color-white);
}

.hero-augmentation-mammaire .eyebrow,
.hero-rhinoplastie .eyebrow {
    color: var(--color-pink-light);
}

/* ============================================================================
   HOMEPAGE HERO - BOLD & ELEGANT
   ============================================================================ */

.hero-home {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/AdobeStock/AdobeStock_262333104-1920x1282.jpeg');
    background-size: cover;
    background-position: center 40%;
    color: var(--color-white);
    position: relative;
}

.hero-home .hero-overlay {
    position: relative;
    z-index: 2;
}

.hero-home h1,
.hero-home .hero-subtitle,
.hero-home .eyebrow {
    color: var(--color-white);
    text-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 4px 24px rgba(0,0,0,0.4);
}

.hero-home .eyebrow {
    color: var(--color-pink-light);
    font-weight: var(--font-weight-bold);
}

.hero-service::before {
    background: linear-gradient(
        to right,
        rgba(26, 26, 26, 0.75) 0%,
        rgba(26, 26, 26, 0.3) 100%
    );
    opacity: 1;
}

/* ============================================================================
   CONTACT CTA - BOLD DARK SECTION WITH PINK ACCENTS
   ============================================================================ */

.contact-cta {
    background: var(--color-black);
    color: var(--color-white);
    position: relative;
    overflow: hidden;
}

.contact-cta::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: var(--gradient-pink);
    border-radius: 50%;
    opacity: 0.15;
    filter: blur(80px);
}

.contact-cta::after {
    content: '';
    position: absolute;
    bottom: -150px;
    left: -150px;
    width: 500px;
    height: 500px;
    background: var(--gradient-pink);
    border-radius: 50%;
    opacity: 0.1;
    filter: blur(100px);
}

.contact-cta .container {
    position: relative;
    z-index: 1;
}

.contact-cta h2 {
    color: var(--color-white);
    margin-bottom: var(--space-lg);
}

.contact-cta p {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--font-size-lg);
    max-width: 700px;
    margin: 0 auto var(--space-2xl);
}

.contact-cta .btn-primary {
    background: var(--gradient-pink);
    border-color: var(--color-pink);
}

/* ============================================================================
   SECTION HEADING ENHANCEMENTS - PINK ACCENT BARS
   ============================================================================ */

.featured-services h2,
.trust-section h2,
.about-preview h2,
.location-section h2,
.services-surgical h2,
.services-nonsurgical h2,
section h2 {
    position: relative;
    padding-bottom: var(--space-md);
}

.featured-services h2::after,
.trust-section h2::after,
.about-preview h2::after,
.location-section h2::after,
.services-surgical h2::after,
.services-nonsurgical h2::after,
section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: var(--gradient-pink);
}

/* ============================================================================
   LOCATION SECTION - EDITORIAL CARDS
   ============================================================================ */

.location-section {
    background: var(--color-cream);
    padding: var(--space-5xl) 0;
}

.location-header {
    text-align: center;
    margin-bottom: var(--space-3xl);
}

.location-header .eyebrow {
    color: var(--color-pink);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    margin-bottom: var(--space-sm);
    display: block;
}

.location-header h2 {
    margin-bottom: var(--space-md);
}

.location-header .section-intro {
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    max-width: 600px;
    margin: 0 auto;
}

.location-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
}

@media (max-width: 900px) {
    .location-grid {
        grid-template-columns: 1fr;
    }
}

.location-card {
    background: var(--color-white);
    overflow: hidden;
    box-shadow: var(--shadow-standard);
    transition: all var(--duration-normal) var(--ease-smooth);
}

.location-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-prominent);
}

.location-card-image {
    overflow: hidden;
    height: 220px;
}

.location-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-smooth);
}

.location-card:hover .location-card-image img {
    transform: scale(1.03);
}

.location-card-content {
    padding: var(--space-xl);
}

.location-card-content h3 {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    color: var(--color-black);
    margin-bottom: var(--space-md);
}

.location-card-content p {
    color: var(--color-text-light);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--space-lg);
}

.location-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.location-detail {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
}

.location-detail .detail-icon {
    color: var(--color-pink);
    font-size: var(--font-size-sm);
    flex-shrink: 0;
    margin-top: 2px;
}

.location-detail .detail-text {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: var(--line-height-normal);
}

/* ===================================
   FOOTER - MINIMAL EDITORIAL
   =================================== */

.site-footer {
    background: var(--color-black);
    color: var(--color-gray-light);
    padding: var(--space-4xl) 0 var(--space-2xl);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-3xl);
    margin-bottom: var(--space-3xl);
}

.footer-section h3 {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-light);
    color: var(--color-white);
    margin-bottom: var(--space-lg);
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section li {
    margin-bottom: var(--space-sm);
}

.footer-section a {
    color: var(--color-gray-light);
    font-size: var(--font-size-sm);
    transition: color var(--duration-normal) var(--ease-smooth);
}

.footer-section a:hover {
    color: var(--color-rose-gold);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--space-xl);
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--color-gray);
}

/* ===================================
   MAGAZINE-STYLE ENHANCEMENTS
   =================================== */

/* Pull quotes */
.pull-quote {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-snug);
    color: var(--color-black);
    padding: var(--space-3xl) 0;
    margin: var(--space-4xl) 0;
    text-align: center;
    border-top: 1px solid var(--color-gray-light);
    border-bottom: 1px solid var(--color-gray-light);
}

.pull-quote cite {
    display: block;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-style: normal;
    color: var(--color-gray-dark);
    margin-top: var(--space-lg);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

/* Image overlays for editorial cards */
.editorial-card {
    position: relative;
    overflow: hidden;
}

.editorial-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4));
    opacity: 0;
    transition: opacity var(--duration-slow) var(--ease-in-out);
}

.editorial-card:hover::after {
    opacity: 1;
}

/* Text alignment utilities */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Figure captions */
figure {
    margin: var(--space-2xl) 0;
}

figcaption {
    font-size: var(--font-size-xs);
    color: var(--color-gray);
    text-align: center;
    margin-top: var(--space-sm);
    font-style: italic;
}

/* ===================================
   RESPONSIVE MEDIA QUERIES
   =================================== */

@media (max-width: 768px) {
    .hero h1 {
        font-size: clamp(2.5rem, 8vw, 4rem);
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .about-content {
        grid-template-columns: 1fr;
    }
    
    .split-layout,
    .split-layout.asymmetric-60-40,
    .split-layout.asymmetric-40-60 {
        grid-template-columns: 1fr;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
    }
    
    /* Mobile menu styles are defined in design-system.css */
    
    .hero-cta {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    section {
        padding: var(--space-3xl) 0;
    }
}

/* ===================================
   UTILITY CLASSES
   =================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ===================================================================
   BLOG STYLES
   Magazine-style editorial layout for blog posts and listings
   =================================================================== */

/* Blog Hero */
.hero-blog {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0.2) 100%),
        url('/images/AdobeStock/AdobeStock_139426847-1500x1080.jpeg');
    background-size: cover;
    background-position: center;
    color: var(--color-white);
    min-height: 50vh;
}

.hero-blog h1,
.hero-blog .hero-subtitle,
.hero-blog .eyebrow {
    color: var(--color-white);
}

/* Blog Grid - 3 columns on desktop */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--space-3xl);
    margin-top: var(--space-3xl);
}

@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
}

/* Blog Card */
.blog-card {
    background: var(--color-white);
    border-radius: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
}

.blog-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, var(--color-pink) 0%, var(--color-pink-light) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 48px rgba(255, 107, 157, 0.2);
}

.blog-card:hover::before {
    transform: scaleX(1);
}

/* Blog Card Image */
.blog-card-image {
    display: block;
    overflow: hidden;
    height: 300px;
    position: relative;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
}

/* Blog Card Content */
.blog-card-content {
    padding: var(--space-2xl);
}

.blog-card-content .eyebrow {
    margin-bottom: var(--space-sm);
}

.blog-card-content h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: var(--space-md);
}

.blog-card-content h3 a {
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-card-content h3 a:hover {
    color: var(--color-pink);
}

.blog-card-content p {
    color: var(--color-text-light);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
}

/* Blog Card Meta */
.blog-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.875rem;
    color: var(--color-text-light);
    margin-bottom: var(--space-lg);
}

.blog-card-meta time {
    color: var(--color-text-light);
}

.blog-card-meta .separator {
    color: var(--color-pink);
}

/* Featured Blog Posts */
.featured-blog-posts {
    background: var(--color-cream);
    padding: var(--space-5xl) 0;
}

.blog-card.featured .blog-card-image {
    height: 400px;
}

/* Blog Post Page */
.blog-post-hero {
    background: var(--color-cream);
    padding: var(--space-5xl) 0 var(--space-3xl);
    text-align: center;
}

.blog-post-hero .breadcrumb {
    margin-bottom: var(--space-lg);
}

.blog-post-hero h1 {
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 300;
    line-height: 1.1;
    margin-bottom: var(--space-lg);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.blog-post-hero .lead {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--color-text-light);
    max-width: 700px;
    margin: 0 auto var(--space-lg);
}

/* Post Meta */
.post-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    font-size: 0.875rem;
    color: var(--color-text-light);
    margin-top: var(--space-lg);
}

.post-meta .separator {
    color: var(--color-pink);
}

.post-meta .reading-time::before {
    content: '📖 ';
}

/* Featured Image */
.featured-image {
    max-width: 1400px;
    margin: 0 auto var(--space-5xl);
    overflow: hidden;
}

.featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Blog Post Content */
.blog-post-content {
    padding: var(--space-5xl) 0;
}

.blog-post-content h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    line-height: 1.2;
    margin-top: var(--space-3xl);
    margin-bottom: var(--space-lg);
    position: relative;
    padding-bottom: var(--space-md);
}

.blog-post-content h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 4px;
    background: linear-gradient(135deg, var(--color-pink) 0%, var(--color-pink-light) 100%);
}

.blog-post-content h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-md);
    color: var(--color-text);
}

.blog-post-content h4 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: var(--space-xl);
    margin-bottom: var(--space-sm);
}

.blog-post-content p {
    margin-bottom: var(--space-lg);
    line-height: 1.8;
}

.blog-post-content ul,
.blog-post-content ol {
    margin-bottom: var(--space-lg);
    padding-left: var(--space-xl);
}

.blog-post-content li {
    margin-bottom: var(--space-sm);
    line-height: 1.7;
}

.blog-post-content blockquote {
    border-left: 4px solid var(--color-pink);
    padding-left: var(--space-xl);
    margin: var(--space-2xl) 0;
    font-size: 1.25rem;
    font-style: italic;
    color: var(--color-text-light);
}

.blog-post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-2xl) 0;
}

.blog-post-content table th {
    background: var(--color-cream);
    padding: var(--space-md);
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--color-pink);
}

.blog-post-content table td {
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.blog-post-content a {
    color: var(--color-pink);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.blog-post-content a:hover {
    color: var(--color-pink-dark);
}

.blog-post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0;
    margin: var(--space-2xl) 0;
}

/* Post Footer (Tags) */
.post-footer {
    background: var(--color-cream);
    padding: var(--space-2xl) 0;
    margin-top: var(--space-5xl);
}

.post-tags {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.post-tags strong {
    color: var(--color-text);
}

.tag {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    background: var(--color-white);
    color: var(--color-text);
    text-decoration: none;
    border-radius: 20px;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    border: 1px solid var(--color-border);
}

.tag:hover {
    background: var(--color-pink);
    color: var(--color-white);
    border-color: var(--color-pink);
}

/* Related Posts */
.related-posts {
    background: var(--color-cream);
    padding: var(--space-5xl) 0;
}

.related-posts h2 {
    text-align: center;
    margin-bottom: var(--space-3xl);
}

/* Blog CTA */
.blog-cta {
    background: var(--color-dark);
    color: var(--color-white);
    padding: var(--space-5xl) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.blog-cta::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 107, 157, 0.15) 0%, transparent 70%);
    filter: blur(60px);
}

.blog-cta h2,
.blog-cta p {
    color: var(--color-white);
    position: relative;
    z-index: 1;
}

/* Breadcrumb */
.breadcrumb ol {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: var(--space-sm);
}

.breadcrumb li::after {
    content: '›';
    margin-left: var(--space-sm);
    color: var(--color-text-light);
}

.breadcrumb li:last-child::after {
    content: '';
}

.breadcrumb a {
    color: var(--color-text-light);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb a:hover {
    color: var(--color-pink);
}

/* Newsletter Section */
.blog-newsletter {
    background: var(--color-cream);
    padding: var(--space-5xl) 0;
    text-align: center;
}

.blog-newsletter h2 {
    margin-bottom: var(--space-md);
}

.newsletter-form {
    max-width: 600px;
    margin: var(--space-2xl) auto 0;
}

.form-group.inline {
    display: flex;
    gap: var(--space-md);
}

.form-group.inline input {
    flex: 1;
    padding: var(--space-md) var(--space-lg);
    border: 2px solid var(--color-border);
    border-radius: 0;
    font-size: 1rem;
}

.form-group.inline input:focus {
    border-color: var(--color-pink);
    outline: none;
}

.form-note {
    font-size: 0.875rem;
    color: var(--color-text-light);
    margin-top: var(--space-md);
}

/* All Blog Posts Section */
.all-blog-posts {
    padding: var(--space-5xl) 0;
}

.all-blog-posts h2 {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.no-posts {
    text-align: center;
    padding: var(--space-5xl) 0;
    color: var(--color-text-light);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .blog-post-hero {
        padding: var(--space-3xl) 0 var(--space-2xl);
    }
    
    .blog-post-content {
        padding: var(--space-3xl) 0;
    }
    
    .blog-card-image {
        height: 250px;
    }
    
    .form-group.inline {
        flex-direction: column;
    }
    
    .blog-post-content h2::after {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Print Styles */
@media print {
    .site-header,
    .site-footer,
    .btn,
    .hero-cta {
        display: none;
    }
    
    body {
        background: white;
        color: black;
    }
}

/* ===================================
   CATEGORY PAGE STYLES
   =================================== */

/* Section headers with "view all" links */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2xl);
}

.section-header h2 {
    margin-bottom: 0;
}

.view-all-link {
    color: var(--color-pink);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.view-all-link:hover {
    color: var(--color-pink-dark);
    transform: translateX(4px);
}

/* Category page hero variants */
/* Category intro section */
.category-intro {
    padding: var(--space-3xl) 0;
}

/* Category intro section */
.category-intro {
    text-align: center;
}

/* Service grid for services/index.njk - optimized for desktop viewing */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-3xl);
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-3xl);
}

/* Limit to 3 columns max on large screens for better card proportions */
@media (min-width: 1200px) {
    .service-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Philosophy section */
.philosophy-section .split-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
}

/* Benefits list styling */
.benefits-list h3 {
    margin-bottom: var(--space-lg);
    color: var(--color-pink);
}

/* Service cards with enhanced detail */
.service-card .procedure-details {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin: var(--space-lg) 0;
    padding: var(--space-md) 0;
    border-top: 1px solid var(--color-border-light);
}

.service-card .detail-item {
    font-size: 0.875rem;
    color: var(--color-text-light);
}

.service-card .detail-item strong {
    color: var(--color-charcoal);
}

/* Zones grid for body category */
.zones-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.zone-card {
    background: var(--color-white);
    padding: var(--space-xl);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.zone-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 48px rgba(255,107,157,0.15);
}

.zone-card h3 {
    color: var(--color-pink);
    margin-bottom: var(--space-sm);
}

.zone-treatments {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.zone-treatments .tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: var(--color-pink-light);
    color: var(--color-pink);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Comparison grid for choosing section */
.comparison-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.comparison-card {
    background: var(--color-white);
    padding: var(--space-xl);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.comparison-card h3 {
    color: var(--color-pink);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--color-pink);
}

.comparison-content p {
    font-weight: 600;
    margin-top: var(--space-md);
    margin-bottom: var(--space-sm);
}

.comparison-content ul {
    margin-bottom: var(--space-md);
}

/* Combinations grid */
.combinations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.combination-card {
    background: var(--color-white);
    padding: var(--space-xl);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.combination-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 48px rgba(255,107,157,0.15);
}

.combination-card h3 {
    color: var(--color-pink);
    margin-bottom: var(--space-md);
}

/* Compact service cards */
.service-card-compact {
    background: var(--color-white);
    padding: var(--space-xl);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.service-card-compact:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 48px rgba(255,107,157,0.15);
}

.service-card-compact h3 {
    color: var(--color-charcoal);
    margin-bottom: var(--space-sm);
    font-size: 1.25rem;
}

/* Subcta styling */
.subcta {
    margin-top: var(--space-xl);
    font-size: 0.875rem;
}

.subcta a {
    color: var(--color-text-light);
    text-decoration: none;
    transition: color 0.3s ease;
}

.subcta a:hover {
    color: var(--color-pink);
}

/* Responsive adjustments for category pages */
@media (max-width: 1024px) {
    .zones-grid,
    .comparison-grid,
    .combinations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .philosophy-section .split-content {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
}

@media (max-width: 768px) {
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
    }
    
    .zones-grid,
    .comparison-grid,
    .combinations-grid {
        grid-template-columns: 1fr;
    }
    
    .service-card .procedure-details {
        flex-direction: column;
        gap: var(--space-sm);
    }
}

/* ============================================================================
   HERO BACKGROUND IMAGES - IMAGE-FIRST DESIGN
   High-quality Adobe Stock images carefully selected for each page
   ============================================================================ */

/* CONTACT PAGE - Elegant consultation setting */
.hero-contact {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/AdobeStock/AdobeStock_122131071-1920x1280.jpeg');
    background-size: cover;
    background-position: center;
    color: var(--color-white);
}

.hero-contact .eyebrow {
    color: var(--color-pink-light);
}

.hero-contact h1,
.hero-contact .hero-subtitle {
    color: var(--color-white);
}

/* FAQ PAGE - Professional and approachable */
.hero-faq {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/AdobeStock/AdobeStock_284503585-1920x1280.jpeg');
    background-size: cover;
    background-position: center;
    color: var(--color-white);
}

.hero-faq .eyebrow {
    color: var(--color-pink-light);
}

.hero-faq h1,
.hero-faq .hero-subtitle {
    color: var(--color-white);
}

/* SERVICES INDEX - Elegant overview */
.hero-services-index {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/AdobeStock/AdobeStock_369478393-1280x1920.jpeg');
    background-size: cover;
    background-position: center;
    color: var(--color-white);
}

.hero-services-index .eyebrow {
    color: var(--color-pink-light);
}

.hero-services-index h1,
.hero-services-index .hero-subtitle {
    color: var(--color-white);
}

/* CHIRURGIE ESTHÉTIQUE MAIN PAGE - Sophisticated */
.hero-chirurgie-esthetique {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/AdobeStock/AdobeStock_262333104-1920x1282.jpeg');
    background-size: cover;
    background-position: center;
    color: var(--color-white);
}

.hero-chirurgie-esthetique .eyebrow {
    color: var(--color-pink-light);
}

.hero-chirurgie-esthetique h1,
.hero-chirurgie-esthetique .hero-subtitle {
    color: var(--color-white);
}

/* MÉDECINE ESTHÉTIQUE MAIN PAGE - Fresh and natural */
.hero-medecine-esthetique {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/AdobeStock/AdobeStock_262323493-1280x1918.jpeg');
    background-size: cover;
    background-position: center;
    color: var(--color-white);
}

.hero-medecine-esthetique .eyebrow {
    color: var(--color-pink-light);
}

.hero-medecine-esthetique h1,
.hero-medecine-esthetique .hero-subtitle {
    color: var(--color-white);
}

/* CATEGORY PAGES - VISAGE */
.hero-visage {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/AdobeStock/AdobeStock_336450879-1920x1280.jpeg');
    background-size: cover;
    background-position: center 40%;
    color: var(--color-white);
}

.hero-visage .eyebrow {
    color: var(--color-pink-light);
}

.hero-visage h1,
.hero-visage .hero-subtitle {
    color: var(--color-white);
}

/* CATEGORY PAGES - SEINS */
.hero-seins {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/AdobeStock/AdobeStock_116169811-1280x1918.jpeg');
    background-size: cover;
    background-position: center;
    color: var(--color-white);
}

.hero-seins .eyebrow {
    color: var(--color-pink-light);
}

.hero-seins h1,
.hero-seins .hero-subtitle {
    color: var(--color-white);
}

/* CATEGORY PAGES - CORPS */
.hero-corps {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/AdobeStock/AdobeStock_117109339-1920x1282.jpeg');
    background-size: cover;
    background-position: center;
    color: var(--color-white);
}

.hero-corps .eyebrow {
    color: var(--color-pink-light);
}

.hero-corps h1,
.hero-corps .hero-subtitle {
    color: var(--color-white);
}

/* INDIVIDUAL SERVICE PAGES - VISAGE */

/* Blépharoplastie - Eye focus */
.hero-blepharoplastie {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/AdobeStock/AdobeStock_335397566-1920x1280.jpeg');
    background-size: cover;
    background-position: center 35%;
    color: var(--color-white);
}

.hero-blepharoplastie .eyebrow {
    color: var(--color-pink-light);
}

.hero-blepharoplastie h1,
.hero-blepharoplastie .hero-subtitle {
    color: var(--color-white);
}

/* Lifting Cervico-Facial - Elegant mature beauty */
.hero-lifting-cervico-facial {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/AdobeStock/AdobeStock_245131336-768x768.jpeg');
    background-size: cover;
    background-position: center 30%;
    color: var(--color-white);
}

.hero-lifting-cervico-facial .eyebrow {
    color: var(--color-pink-light);
}

.hero-lifting-cervico-facial h1,
.hero-lifting-cervico-facial .hero-subtitle {
    color: var(--color-white);
}

/* INDIVIDUAL SERVICE PAGES - SEINS */

/* Lifting Seins - Natural breast beauty */
.hero-lifting-seins {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/AdobeStock/AdobeStock_232074549-1200x900.jpeg');
    background-size: cover;
    background-position: center;
    color: var(--color-white);
}

.hero-lifting-seins .eyebrow {
    color: var(--color-pink-light);
}

.hero-lifting-seins h1,
.hero-lifting-seins .hero-subtitle {
    color: var(--color-white);
}

/* Lipofilling Mammaire - Natural augmentation */
.hero-lipofilling-mammaire {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/AdobeStock/AdobeStock_60886567-1200x900.jpeg');
    background-size: cover;
    background-position: center;
    color: var(--color-white);
}

.hero-lipofilling-mammaire .eyebrow {
    color: var(--color-pink-light);
}

.hero-lipofilling-mammaire h1,
.hero-lipofilling-mammaire .hero-subtitle {
    color: var(--color-white);
}

/* INDIVIDUAL SERVICE PAGES - CORPS */

/* Abdominoplastie - Body contouring */
.hero-abdominoplastie {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/AdobeStock/AdobeStock_117109339-1920x1282.jpeg');
    background-size: cover;
    background-position: center;
    color: var(--color-white);
}

.hero-abdominoplastie .eyebrow {
    color: var(--color-pink-light);
}

.hero-abdominoplastie h1,
.hero-abdominoplastie .hero-subtitle {
    color: var(--color-white);
}

/* Liposuccion - Silhouette sculpting */
.hero-liposuccion {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/AdobeStock/AdobeStock_116169811-684x1024.jpeg');
    background-size: cover;
    background-position: center;
    color: var(--color-white);
}

.hero-liposuccion .eyebrow {
    color: var(--color-pink-light);
}

.hero-liposuccion h1,
.hero-liposuccion .hero-subtitle {
    color: var(--color-white);
}

/* Renuvion - Technology and innovation */
.hero-renuvion {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/renuvion/RENUVIONTRAITEMENTZONES-960w.png');
    background-size: cover;
    background-position: center;
    color: var(--color-white);
}

.hero-renuvion .eyebrow {
    color: var(--color-pink-light);
}

.hero-renuvion h1,
.hero-renuvion .hero-subtitle {
    color: var(--color-white);
}

/* INDIVIDUAL SERVICE PAGES - MÉDECINE ESTHÉTIQUE */

/* Acide Hyaluronique - Youthful freshness */
.hero-acide-hyaluronique {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/AdobeStock/AdobeStock_167579637-1200x900.jpeg');
    background-size: cover;
    background-position: center 40%;
    color: var(--color-white);
}

.hero-acide-hyaluronique .eyebrow {
    color: var(--color-pink-light);
}

.hero-acide-hyaluronique h1,
.hero-acide-hyaluronique .hero-subtitle {
    color: var(--color-white);
}

/* Toxine Botulique - Smooth elegance */
.hero-toxine-botulique {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/AdobeStock/AdobeStock_267729376-1200x900.jpeg');
    background-size: cover;
    background-position: center 35%;
    color: var(--color-white);
}

.hero-toxine-botulique .eyebrow {
    color: var(--color-pink-light);
}

.hero-toxine-botulique h1,
.hero-toxine-botulique .hero-subtitle {
    color: var(--color-white);
}

/* Fils Tenseurs - Lifting effect */
.hero-fils-tenseurs {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/AdobeStock/AdobeStock_335397566-1920x1280.jpeg');
    background-size: cover;
    background-position: center 30%;
    color: var(--color-white);
}

.hero-fils-tenseurs .eyebrow {
    color: var(--color-pink-light);
}

.hero-fils-tenseurs h1,
.hero-fils-tenseurs .hero-subtitle {
    color: var(--color-white);
}

/* Radiofréquence Subdermale ATTIVA - Skin tightening */
.hero-attiva {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/AdobeStock/AdobeStock_336450879-1920x1280.jpeg');
    background-size: cover;
    background-position: center 35%;
    color: var(--color-white);
}

.hero-attiva .eyebrow {
    color: var(--color-pink-light);
}

.hero-attiva h1,
.hero-attiva .hero-subtitle {
    color: var(--color-white);
}

/* ===========================================
   CHIRURGIE ESTHÉTIQUE INDIVIDUAL PAGES
   =========================================== */

/* Lipofilling Visage */
.hero-lipofilling-visage {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/AdobeStock/AdobeStock_189056878-682x1024.jpeg');
    background-size: cover;
    background-position: center;
    color: var(--color-white);
}

.hero-lipofilling-visage .eyebrow { color: var(--color-pink-light); }
.hero-lipofilling-visage h1, .hero-lipofilling-visage .hero-subtitle { color: var(--color-white); }

/* Otoplastie - Chirurgie des oreilles */
.hero-otoplastie {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/AdobeStock/AdobeStock_262323493-684x1024.jpeg');
    background-size: cover;
    background-position: center;
    color: var(--color-white);
}

.hero-otoplastie .eyebrow { color: var(--color-pink-light); }
.hero-otoplastie h1, .hero-otoplastie .hero-subtitle { color: var(--color-white); }

/* Lip Lift - Chirurgie des lèvres */
.hero-lip-lift {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/AdobeStock/AdobeStock_369478393-682x1024.jpeg');
    background-size: cover;
    background-position: center;
    color: var(--color-white);
}

.hero-lip-lift .eyebrow { color: var(--color-pink-light); }
.hero-lip-lift h1, .hero-lip-lift .hero-subtitle { color: var(--color-white); }

/* Augmentation Mammaire */
.hero-augmentation-mammaire {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/beplastic/beplastic_img_06-900x662.jpg');
    background-size: cover;
    background-position: center;
    color: var(--color-white);
}

.hero-augmentation-mammaire .eyebrow { color: var(--color-pink-light); }
.hero-augmentation-mammaire h1, .hero-augmentation-mammaire .hero-subtitle { color: var(--color-white); }

/* Ptose Mammaire */
.hero-ptose-mammaire {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/AdobeStock/AdobeStock_232074549-768x512.jpeg');
    background-size: cover;
    background-position: center;
    color: var(--color-white);
}

.hero-ptose-mammaire .eyebrow { color: var(--color-pink-light); }
.hero-ptose-mammaire h1, .hero-ptose-mammaire .hero-subtitle { color: var(--color-white); }

/* Réduction Mammaire */
.hero-reduction-mammaire {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/AdobeStock/AdobeStock_60886567-768x512.jpeg');
    background-size: cover;
    background-position: center;
    color: var(--color-white);
}

.hero-reduction-mammaire .eyebrow { color: var(--color-pink-light); }
.hero-reduction-mammaire h1, .hero-reduction-mammaire .hero-subtitle { color: var(--color-white); }

/* Gynécomastie */
.hero-gynecomastie {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/AdobeStock/AdobeStock_31123598999991.jpeg');
    background-size: cover;
    background-position: center;
    color: var(--color-white);
}

.hero-gynecomastie .eyebrow { color: var(--color-pink-light); }
.hero-gynecomastie h1, .hero-gynecomastie .hero-subtitle { color: var(--color-white); }

/* Liposuccion des Mollets */
.hero-liposuccion-mollets {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/AdobeStock/AdobeStock_113030139-1920x1280.jpeg');
    background-size: cover;
    background-position: center;
    color: var(--color-white);
}

.hero-liposuccion-mollets .eyebrow { color: var(--color-pink-light); }
.hero-liposuccion-mollets h1, .hero-liposuccion-mollets .hero-subtitle { color: var(--color-white); }

/* Nymphoplastie - Chirurgie Intime */
.hero-nymphoplastie {
    background: 
        linear-gradient(to right, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0.3) 100%),
        url('/images/AdobeStock/AdobeStock_141625305-768x424.jpeg');
    background-size: cover;
    background-position: center;
    color: var(--color-white);
}

.hero-nymphoplastie .eyebrow { color: var(--color-pink-light); }
.hero-nymphoplastie h1, .hero-nymphoplastie .hero-subtitle { color: var(--color-white); }

/* RESPONSIVE HERO IMAGES */
@media (max-width: 768px) {
    .hero-contact,
    .hero-faq,
    .hero-services-index,
    .hero-chirurgie-esthetique,
    .hero-medecine-esthetique,
    .hero-visage,
    .hero-seins,
    .hero-corps,
    .hero-blepharoplastie,
    .hero-lifting-cervico-facial,
    .hero-lifting-seins,
    .hero-lipofilling-mammaire,
    .hero-abdominoplastie,
    .hero-liposuccion,
    .hero-renuvion,
    .hero-acide-hyaluronique,
    .hero-toxine-botulique,
    .hero-fils-tenseurs,
    .hero-attiva {
        background-position: center center;
    }
}

/* ===================================================================
   ABOUT PAGE STYLES
   =================================================================== */

.about-intro {
    padding: var(--space-3xl) 0;
}

.about-intro p {
    max-width: 900px;
    margin: 0 auto var(--space-lg);
    text-align: center;
    font-size: var(--font-size-lg);
}

.parcours {
    padding: var(--space-3xl) 0;
    background: var(--color-cream);
}

.parcours p {
    max-width: 900px;
    margin: 0 auto var(--space-lg);
}

.affiliations {
    padding: var(--space-3xl) 0;
}

.affiliations p {
    max-width: 900px;
    margin: 0 auto var(--space-md);
}

.affiliations-list {
    max-width: 900px;
    margin: 0 auto;
    list-style: disc;
    padding-left: var(--space-xl);
}

.affiliations-list li {
    margin-bottom: var(--space-sm);
}

.consultation {
    padding: var(--space-3xl) 0;
    background: var(--color-cream);
}

.consultation p {
    max-width: 900px;
    margin: 0 auto var(--space-lg);
}

.consultation-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-2xl);
    max-width: 900px;
    margin: var(--space-2xl) auto 0;
}

.consultation-info .info-item {
    text-align: center;
    padding: var(--space-lg);
    background: var(--color-white);
    border-radius: 8px;
}

.consultation-info .info-item h3 {
    color: var(--color-pink);
    margin-bottom: var(--space-sm);
}

.faq {
    padding: var(--space-3xl) 0;
}

.faq-list {
    max-width: 900px;
    margin: var(--space-2xl) auto 0;
}

.faq-item {
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--color-gray-light);
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-item h3 {
    color: var(--color-charcoal);
    margin-bottom: var(--space-md);
    font-size: var(--font-size-lg);
}

.faq-item p {
    color: var(--color-gray-dark);
}

/* ===================================================================
   MEDECINE ESTHETIQUE PAGE STYLES
   =================================================================== */

.body-parts-section {
    padding: var(--space-3xl) 0;
    background: var(--color-cream);
}

.body-part-item {
    max-width: 900px;
    margin: 0 auto var(--space-2xl);
    padding: var(--space-xl);
    background: var(--color-white);
    border-radius: 8px;
}

.body-part-item h3 {
    color: var(--color-pink);
    margin-bottom: var(--space-md);
}

.body-part-item p {
    color: var(--color-gray-dark);
    line-height: 1.8;
}

/* Note style for disclaimer text */
.note {
    font-style: italic;
    color: var(--color-gray);
    border-left: 3px solid var(--color-pink);
    padding-left: var(--space-lg);
    margin-top: var(--space-xl);
}

/* Footer hours */
.footer-hours {
    font-size: var(--font-size-sm);
    color: var(--color-gray);
    margin-top: var(--space-sm);
}

/* ===================================================================
   CONTACT PAGE STYLES - Mobile Responsive Grid
   =================================================================== */

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
}

@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
}

.contact-methods {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.contact-form-section h2 {
    margin-bottom: var(--space-md);
}

.form-intro {
    color: var(--color-gray-dark);
    margin-bottom: var(--space-xl);
}

.booking-highlight {
    background: var(--color-cream);
    padding: var(--space-lg);
    border-radius: 8px;
    border-left: 4px solid var(--color-pink);
}

.hours-section {
    margin-top: var(--space-xl);
}

.hours-section h3 {
    margin-bottom: var(--space-md);
    color: var(--color-charcoal);
}

/* Contact CTA Section */
.contact-cta-section {
    background: var(--color-black);
    color: var(--color-white);
    padding: var(--space-4xl) 0;
    text-align: center;
}

.contact-cta-section h2 {
    color: var(--color-white);
    margin-bottom: var(--space-md);
}

.contact-cta-section p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--space-xl);
}

/* ===================================================================
   ABOUT HERO SECTION - Responsive Layout
   =================================================================== */

.hero-about {
    background: var(--color-cream);
    padding: var(--space-4xl) 0;
    min-height: auto;
}

.about-hero-content {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

@media (max-width: 900px) {
    .about-hero-content {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
        text-align: center;
    }
    
    .about-hero-image {
        max-width: 300px;
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    .hero-about {
        padding: var(--space-2xl) 0;
    }
    
    .about-hero-image {
        max-width: 250px;
    }
}

.about-hero-image img {
    width: 100%;
    height: auto;
    border-radius: 0;
    box-shadow: var(--shadow-prominent);
}

.about-hero-text h1 {
    margin-bottom: var(--space-sm);
}

.about-hero-text .subtitle {
    color: var(--color-pink);
    margin-bottom: var(--space-lg);
}

.about-hero-text .lead {
    font-size: var(--font-size-lg);
    line-height: 1.8;
    margin-bottom: var(--space-md);
}

/* ===================================================================
   TARIFS LIST - Mobile Friendly
   =================================================================== */

.tarifs {
    padding: var(--space-3xl) 0;
    background: var(--color-white);
}

.tarifs-list {
    list-style: none;
    padding: 0;
    margin: var(--space-xl) 0;
    max-width: 600px;
}

.tarifs-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-gray-light);
    flex-wrap: wrap;
    gap: var(--space-sm);
}

@media (max-width: 480px) {
    .tarifs-list li {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===================================================================
   ADDITIONAL MOBILE RESPONSIVE FIXES
   =================================================================== */

/* Safe area insets for notched devices (iPhone X+) */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    
    .site-header {
        padding-left: max(var(--container-padding), env(safe-area-inset-left));
        padding-right: max(var(--container-padding), env(safe-area-inset-right));
    }
    
    .site-footer {
        padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom));
    }
}

/* Hero responsive fixes */
@media (max-width: 768px) {
    .hero-home,
    .hero-service,
    .hero-contact,
    .hero-blog {
        min-height: 60vh;
    }
    
    .hero-content {
        padding: var(--space-2xl) 0;
    }
    
    .hero h1 {
        font-size: clamp(2rem, 7vw, 3rem);
        line-height: 1.2;
    }
    
    .hero-subtitle {
        font-size: var(--font-size-base);
        line-height: 1.6;
    }
    
    .hero-actions {
        flex-direction: column;
        gap: var(--space-sm);
    }
    
    .hero-actions .btn {
        width: 100%;
    }
}

/* Location cards responsive */
@media (max-width: 640px) {
    .location-card-image {
        height: 180px;
    }
    
    .location-card-content {
        padding: var(--space-lg);
    }
    
    .location-card-content h3 {
        font-size: var(--font-size-lg);
    }
}

/* Trust grid responsive */
@media (max-width: 768px) {
    .trust-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
    
    .trust-item {
        padding: var(--space-lg);
    }
}

/* About content responsive */
@media (max-width: 768px) {
    .about-content {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
    
    .about-image {
        text-align: center;
    }
    
    .about-image img {
        max-width: 350px;
        margin: 0 auto;
    }
    
    .about-text {
        text-align: center;
    }
    
    .about-text .btn-secondary {
        display: inline-block;
    }
}

/* Section intro text mobile */
@media (max-width: 640px) {
    .section-intro {
        font-size: var(--font-size-base);
        padding: 0 var(--space-sm);
    }
    
    section h2 {
        font-size: clamp(1.5rem, 5vw, 2rem);
        padding-bottom: var(--space-sm);
    }
    
    section h2::after {
        width: 60px;
        height: 3px;
    }
}

/* Philosophy and consultation sections */
@media (max-width: 640px) {
    .consultation-info {
        grid-template-columns: 1fr;
    }
    
    .parcours p,
    .affiliations p,
    .consultation p,
    .philosophie p {
        text-align: left;
    }
}

/* Blog cards mobile */
@media (max-width: 480px) {
    .blog-card-content {
        padding: var(--space-lg);
    }
    
    .blog-card-image {
        height: 200px;
    }
}

/* Pull quote mobile */
@media (max-width: 640px) {
    .pull-quote {
        font-size: var(--font-size-xl);
        padding: var(--space-xl) 0;
        margin: var(--space-2xl) 0;
    }
}

/* Prevent text overflow */
.container,
.container-narrow {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Make all links tap-friendly */
@media (max-width: 768px) {
    .footer-section a,
    .dropdown-menu a,
    .nav-menu a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}