/* =========================================================
   EL SOLÉ — FINAL DESIGN SYSTEM
   Loaded last on every published page.

   This layer intentionally owns the visual scale. Legacy page
   styles may still define colors and layouts, but text, controls
   and recurring icons all resolve to the same shared tokens here.
   ========================================================= */

:root {
    /* Compact fluid scale: 10px = 1rem at every viewport width. */
    --type-page-title: clamp(3.2rem, 1.35vw + 2.7rem, 4.6rem);
    --type-section-title: clamp(2.6rem, 0.95vw + 2.25rem, 3.6rem);
    --type-subheading: clamp(2rem, 0.4vw + 1.85rem, 2.4rem);
    --type-card-title: clamp(1.8rem, 0.25vw + 1.75rem, 2.1rem);
    --type-lead: clamp(1.65rem, 0.15vw + 1.6rem, 1.8rem);
    --type-body: 1.6rem;
    --type-small: 1.4rem;
    --type-label: 1.2rem;
    --type-button: 1.3rem;

    --leading-title: 1.15;
    --leading-heading: 1.28;
    --leading-body: 1.65;
    --leading-control: 1.15;

    --control-height: 4.4rem;
    --control-height-small: 4rem;
    --icon-small: 1.5rem;
    --icon-medium: 2.2rem;
    --icon-large: 2.8rem;

    /* One shared visual language. */
    --ds-brand: #ad4b40;
    --ds-brand-hover: #923e35;
    --ds-brand-soft: #f1d8d1;
    --ds-accent: #c89a62;
    --ds-ink: #25211f;
    --ds-text: #57514d;
    --ds-muted: #746d68;
    --ds-surface: #fffdfa;
    --ds-surface-soft: #f7f2eb;
    --ds-border: rgba(91, 65, 56, 0.14);
    --ds-shadow: 0 10px 28px rgba(63, 43, 36, 0.08);
    --ds-radius: 1.4rem;
    --ds-radius-small: 1rem;

    /* Legacy aliases now point to the same palette. */
    --color-primary: var(--ds-brand);
    --color-secondary: var(--ds-brand);
    --color-light: var(--ds-surface-soft);
    --color-dark: #704239;
    --color-gray: var(--ds-muted);
    --color-gray-light: #e8dfd8;
    --color-white: #ffffff;
    --color-text-dark: var(--ds-ink);
    --color-text-secondary: var(--ds-ink);
    --color-cream: #f3eee7;
}

html,
html:has(body) {
    font-size: 62.5% !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-size: var(--type-body) !important;
    line-height: var(--leading-body) !important;
    color: var(--ds-text);
    background: var(--ds-surface);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* One semantic hierarchy across every page. */
body h1,
body .h1,
body .text-h1 {
    font-family: var(--font-heading) !important;
    font-size: var(--type-page-title) !important;
    font-weight: 700 !important;
    line-height: var(--leading-title) !important;
    letter-spacing: -0.025em !important;
}

body h2,
body .h2,
body .text-h2,
body .section-title {
    font-family: var(--font-heading) !important;
    font-size: var(--type-section-title) !important;
    font-weight: 600 !important;
    line-height: var(--leading-title) !important;
    letter-spacing: -0.02em !important;
}

body h3,
body .h3,
body .text-h3 {
    font-family: var(--font-heading) !important;
    font-size: var(--type-subheading) !important;
    font-weight: 600 !important;
    line-height: var(--leading-heading) !important;
    letter-spacing: -0.01em !important;
}

body h4,
body .h4,
body .h5,
body .text-h4,
body .text-h5,
body .card-title {
    font-family: var(--font-heading) !important;
    font-size: var(--type-card-title) !important;
    font-weight: 600 !important;
    line-height: var(--leading-heading) !important;
}

body main p,
body section p,
body .text-body,
body .card-text,
body .legal-section li {
    font-size: var(--type-body) !important;
    line-height: var(--leading-body) !important;
}

body .lead,
body .text-lead,
body .text-body-large,
body .body-large,
body .section-description,
body .hero-description,
body .page-hero p,
body .team-hero p,
body .seo-hero p {
    font-size: var(--type-lead) !important;
    line-height: 1.65 !important;
}

body .section-subtitle,
body .hero-eyebrow,
body .subtitle {
    font-size: var(--type-label) !important;
    line-height: 1.45 !important;
    letter-spacing: 0.18em !important;
}

/* Page titles use exactly the same visual size, including legal pages. */
body .page-hero .hero-title,
body .team-hero .hero-title,
body .seo-hero .hero-title,
body.universe-page .page-hero .hero-title,
body .page-title h1 {
    font-size: var(--type-page-title) !important;
    line-height: var(--leading-title) !important;
}

/* Long-form pages need a compact article hierarchy, consistently. */
body .seo-content h2,
body .legal-section h2 {
    font-size: clamp(2.5rem, 0.45vw + 2.35rem, 2.9rem) !important;
    line-height: var(--leading-heading) !important;
}

body .seo-content h3,
body .legal-section h3 {
    font-size: var(--type-card-title) !important;
    line-height: 1.4 !important;
}

/* Repeated card titles must not inherit oversized page heading rules. */
body :is(.service-card, .contact-card, .info-card, .faq-item, .value-card,
         .member-card, .team-card, .expertise-card, .method-item,
         .method-card-premium, .brand-box, .gallery-info) :is(h3, h4) {
    font-size: var(--type-card-title) !important;
    line-height: var(--leading-heading) !important;
}

/* Shared control geometry and label scale. */
body :is(.btn, .btn-cta, .btn-hero-elegant, .btn-luxe-main,
         .btn-luxe-outline, .products-cta, .form-submit) {
    display: inline-flex !important;
    min-height: var(--control-height) !important;
    padding: 0 2.1rem !important;
    gap: 0.8rem;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--font-body) !important;
    font-size: var(--type-button) !important;
    font-weight: 600 !important;
    line-height: var(--leading-control) !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    letter-spacing: 0.055em !important;
    text-align: center;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease,
                border-color 0.2s ease, transform 0.2s ease,
                box-shadow 0.2s ease !important;
}

body .filter-btn {
    display: inline-flex !important;
    min-width: 0 !important;
    min-height: var(--control-height-small) !important;
    margin: 0 !important;
    padding: 0 1.8rem !important;
    align-items: center;
    justify-content: center;
    font-size: var(--type-small) !important;
    line-height: var(--leading-control) !important;
    border: 1px solid var(--ds-border) !important;
    border-radius: 999px !important;
    background: var(--ds-surface) !important;
    color: var(--ds-text) !important;
}

body .header .booking-btn .btn-primary {
    min-height: 4.2rem !important;
    padding-inline: 1.8rem !important;
    font-size: var(--type-button) !important;
}

/* Three reusable icon levels: navigation, cards, and feature icons. */
body :is(.btn, .btn-cta, .btn-hero-elegant, .btn-luxe-main,
         .btn-luxe-outline, .service-btn) i,
body .footer i,
body .main-nav i {
    font-size: var(--icon-small) !important;
    line-height: 1 !important;
}

body :is(.service-icon, .info-icon, .faq-icon, .advice-icon,
         .platform-icon, .contact-icon) i,
body :is(.service-icon, .info-icon, .faq-icon, .advice-icon,
         .platform-icon, .contact-icon) {
    font-size: var(--icon-medium) !important;
    line-height: 1 !important;
}

body :is(.method-icon-wrap, .texture-icon-wrap, .value-icon,
         .value-icon-large) i,
body :is(.method-icon-wrap, .texture-icon-wrap, .value-icon,
         .value-icon-large) {
    font-size: var(--icon-large) !important;
    line-height: 1 !important;
}

/* Navigation and footer are identical on every template. */
body .header .main-nav > ul > li > a,
body .header .submenu a {
    font-size: var(--type-small) !important;
    line-height: 1.35 !important;
}

body .footer :is(h3, .footer-title) {
    font-size: 1.8rem !important;
    line-height: 1.3 !important;
}

body .footer :is(p, li, a),
body .text-small,
body .small {
    font-size: var(--type-small) !important;
    line-height: 1.6 !important;
}

body .text-micro,
body .micro,
body .last-update {
    font-size: 1.2rem !important;
    line-height: 1.5 !important;
}

/* =========================================================
   SHARED COMPONENT APPEARANCE
   ========================================================= */

body :is(.btn-primary, .btn-cta, .btn-luxe-main,
         .btn-hero-elegant:not(.secondary), .form-submit) {
    border-color: var(--ds-brand) !important;
    background: var(--ds-brand) !important;
    color: #fff !important;
}

body :is(.btn-primary, .btn-cta, .btn-luxe-main,
         .btn-hero-elegant:not(.secondary), .form-submit):is(:hover, :focus-visible) {
    border-color: var(--ds-brand-hover) !important;
    background: var(--ds-brand-hover) !important;
    box-shadow: 0 7px 18px rgba(146, 62, 53, 0.18) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

body :is(.btn-outline, .btn-secondary, .btn-luxe-outline,
         .btn-hero-elegant.secondary) {
    border-color: var(--ds-brand) !important;
    background: transparent !important;
    color: var(--ds-brand) !important;
}

body :is(.btn-outline, .btn-secondary, .btn-luxe-outline,
         .btn-hero-elegant.secondary):is(:hover, :focus-visible) {
    border-color: var(--ds-brand) !important;
    background: var(--ds-brand) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}

body :is(.hero-new, .contact-cta, .cta-premium, .dark-section)
     :is(.btn-outline, .btn-secondary, .btn-luxe-outline,
         .btn-hero-elegant.secondary) {
    border-color: rgba(255, 255, 255, 0.72) !important;
    color: #fff !important;
}

body :is(.hero-new, .contact-cta, .cta-premium, .dark-section)
     :is(.btn-outline, .btn-secondary, .btn-luxe-outline,
         .btn-hero-elegant.secondary):is(:hover, :focus-visible) {
    border-color: #fff !important;
    background: #fff !important;
    color: var(--ds-brand-hover) !important;
}

body .filter-btn:is(.active, :hover, :focus-visible) {
    border-color: var(--ds-brand) !important;
    background: var(--ds-brand) !important;
    color: #fff !important;
}

body .text-link {
    display: inline-flex !important;
    min-height: var(--control-height) !important;
    padding: 0 1.8rem !important;
    gap: 0.7rem;
    border: 1px solid var(--ds-brand) !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ds-brand) !important;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body) !important;
    font-size: var(--type-button) !important;
    font-weight: 600 !important;
    line-height: var(--leading-control) !important;
    letter-spacing: 0.02em;
}

body .text-link:is(:hover, :focus-visible) {
    background: var(--ds-brand) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

body :is(.service-card, .info-card, .profile-card, .method-card-premium,
         .texture-card, .season-card, .faq-item, .reservation-support__item,
         .cta-box, .review-card) {
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius) !important;
    box-shadow: var(--ds-shadow) !important;
}

body :is(.brand-card, .colorimetry-card, .colorimetry-card-premium,
         .gallery-item, .insta-item) {
    border-radius: var(--ds-radius) !important;
}

body :is(.service-icon, .info-icon, .faq-icon, .advice-icon,
         .contact-icon, .method-icon-wrap, .texture-icon-wrap,
         .value-icon, .value-icon-large) {
    border-radius: 50% !important;
    color: var(--ds-brand) !important;
}

body :is(.service-icon, .info-icon, .faq-icon, .advice-icon, .contact-icon) {
    width: 5rem !important;
    height: 5rem !important;
    background: var(--ds-surface-soft) !important;
}

body .section-subtitle,
body .hero-eyebrow,
body .subtitle {
    color: var(--ds-brand) !important;
}

body :is(.seo-content, .legal-section) :is(h2, h3, h4) {
    color: var(--ds-ink) !important;
}

body :is(.seo-content, .legal-section) :is(p, li) {
    max-width: 72ch;
}

body .section-description,
body .hero-description {
    max-width: 68ch;
    color: var(--ds-text) !important;
}

body :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
    min-height: 4.4rem;
    border: 1px solid var(--ds-border) !important;
    border-radius: var(--ds-radius-small) !important;
    background: var(--ds-surface) !important;
    color: var(--ds-ink) !important;
    font-family: var(--font-body) !important;
    font-size: var(--type-body) !important;
    line-height: 1.5 !important;
}

body :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus {
    border-color: var(--ds-brand) !important;
    box-shadow: 0 0 0 3px rgba(173, 75, 64, 0.13) !important;
    outline: none !important;
}

body a:focus-visible,
body button:focus-visible {
    outline: 3px solid rgba(173, 75, 64, 0.25) !important;
    outline-offset: 3px !important;
}

body .footer {
    background: var(--color-cream) !important;
}

body .container {
    width: min(100%, 1180px);
    padding-inline: clamp(1.8rem, 3vw, 2.8rem);
}

body section:not(.page-hero):not(.page-title):not(.team-hero):not(.seo-hero):not(.hero-new):not(.hero-mobile) {
    padding-block: clamp(5rem, 5.5vw, 7rem) !important;
}

body .section-header,
body .section-header.centered {
    margin: 0 auto clamp(3rem, 3.5vw, 4.5rem) !important;
    padding-inline: 0 !important;
}

body :is(.page-hero, .team-hero, .seo-hero),
body.universe-page .page-hero {
    height: 34rem;
    min-height: 34rem;
    padding: 13rem 2rem 5.5rem;
    background: var(--ds-surface-soft);
}

body .page-title {
    min-height: 27rem;
    padding: 13rem 0 5rem !important;
    background: var(--ds-surface-soft) !important;
    text-align: center;
}

body .page-title .breadcrumb {
    color: var(--ds-muted);
    font-size: var(--type-small) !important;
    line-height: 1.5;
}

/* Accessibility helper must remain visually hidden despite global h1 rules. */
body .sr-only {
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    font-size: 1px !important;
    line-height: 1 !important;
}

body .error-message {
    font-size: var(--type-section-title) !important;
}

/* Strongly scoped corrections for legacy responsive blocks embedded in pages. */
body section .coiffure-header .section-header .section-title,
body section .colorimetry-header .section-header .section-title,
body section .intro-header .section-header .section-title {
    font-size: var(--type-section-title) !important;
    line-height: var(--leading-title) !important;
}

body section .coiffure-header .section-header .section-subtitle,
body section .colorimetry-header .section-header .section-subtitle,
body section .intro-header .section-header .section-subtitle {
    font-size: var(--type-label) !important;
    line-height: 1.45 !important;
}

body section .intro-header .section-header .section-description {
    font-size: var(--type-lead) !important;
    line-height: 1.65 !important;
}

body .brand-section .brand-card .brand-content .brand-header h3 {
    font-size: var(--type-card-title) !important;
    line-height: var(--leading-heading) !important;
}

body .brand-section .brand-card .brand-content .brand-description p,
body section.contact-cta .cta-content p {
    font-size: var(--type-lead) !important;
    line-height: 1.65 !important;
}

body section.contact-cta .cta-content h2 {
    font-size: var(--type-section-title) !important;
    line-height: var(--leading-title) !important;
}

body .hero-subtitle-top {
    font-size: 1.6rem !important;
    line-height: 1.35 !important;
}

body .hero-subtitle-bottom {
    font-size: var(--type-body) !important;
    line-height: 1.55 !important;
}

body .insta-follow .btn.btn-outline {
    font-size: var(--type-button) !important;
}

@media (max-width: 768px) {
    /* Keep 1rem stable instead of shrinking the whole website to 8px. */
    html,
    html:has(body) {
        font-size: 62.5% !important;
    }

    body .page-hero,
    body .page-title,
    body .team-hero,
    body .seo-hero,
    body.universe-page .page-hero {
        height: auto;
        min-height: 24rem;
        padding: 10.5rem 1.6rem 4rem;
    }

    body .page-title {
        min-height: 22rem;
        padding: 10.5rem 1.8rem 3.5rem !important;
    }

    body .header .main-nav > ul > li > a {
        font-size: 1.6rem !important;
    }

    body .header .submenu a {
        font-size: 1.5rem !important;
    }

    body :is(.btn, .btn-cta, .btn-hero-elegant, .btn-luxe-main,
             .btn-luxe-outline, .products-cta, .form-submit) {
        min-height: 4.8rem !important;
        font-size: var(--type-button) !important;
    }

    body .filter-btn {
        min-height: 4.4rem !important;
        font-size: 1.4rem !important;
    }

    body .legal-section :is(p, li) {
        font-size: var(--type-body) !important;
    }

    body section:not(.page-hero):not(.page-title):not(.team-hero):not(.seo-hero):not(.hero-new):not(.hero-mobile) {
        padding-block: 4.8rem !important;
    }

    body .container {
        padding-inline: 1.8rem;
    }
}

@media (max-width: 420px) {
    body :is(.btn, .btn-cta, .btn-hero-elegant, .btn-luxe-main,
             .btn-luxe-outline, .products-cta, .form-submit) {
        padding-inline: 1.8rem !important;
    }

    body .filters-container {
        gap: 0.8rem !important;
    }

    body .filter-btn,
    body .filter-btn[data-filter="events"] {
        min-width: 0 !important;
        width: auto !important;
    }
}

/* Home: component-specific corrections. */
body .service-card .service-btn {
    display: block;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

body .trust-summary {
    align-items: stretch;
}

body .trust-summary > :is(.google-badge, .treatwell-badge, .planity-badge) {
    box-sizing: border-box;
    flex: 1 1 21rem;
    width: 21rem;
    max-width: 23rem;
    min-height: 7.2rem;
    padding: 1.4rem 2rem !important;
    border-color: var(--ds-border) !important;
    border-radius: var(--ds-radius-small) !important;
    background: var(--ds-surface) !important;
}

body .trust-summary .trust-rating {
    color: var(--ds-brand) !important;
    font-family: var(--font-body) !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
}

body .trust-summary .trust-logo {
    flex: 0 0 3rem;
    color: #fff !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
}

body .gallery-preview :is(.section-title, .section-subtitle) {
    color: #fff !important;
}

body .gallery-preview .section-description {
    color: rgba(255, 255, 255, 0.86) !important;
}

body .gallery-preview .gallery-info span {
    color: rgba(255, 255, 255, 0.86) !important;
}

body .gallery-preview .btn-primary {
    border-color: #fff !important;
    background: #fff !important;
    color: var(--ds-brand-hover) !important;
}

body .gallery-preview .btn-primary:is(:hover, :focus-visible) {
    border-color: var(--ds-surface-soft) !important;
    background: var(--ds-surface-soft) !important;
    color: var(--ds-brand-hover) !important;
}

@media (max-width: 576px) {
    body .trust-summary > :is(.google-badge, .treatwell-badge, .planity-badge) {
        flex-basis: 100%;
        width: min(100%, 30rem);
        max-width: 30rem;
    }
}