/**
 * Design Fixes - Phase 14 Front-End Quality Audit
 * Fixes dark text on teal, card heights, brand colors, typography
 * Generated: 2026-01-28
 * Source: .planning/phases/14-frontend-quality-audit/audits/design-audit.md
 *
 * This stylesheet provides override rules to fix design violations identified
 * in the Phase 14 FEQ audit. It should be loaded AFTER all other stylesheets.
 */

/* ==========================================================================
   Section 1: Dark Text on Teal Fixes (FEQ-04)
   Rule: Titles on teal = yellow (#F2FC32), body text on teal = white (#FFFFFF)
   ========================================================================== */

/**
 * CRITICAL: Area Tag Buttons (Zones Desservies)
 * These buttons have teal background - text must be white or yellow
 */
.area-tag,
.service-areas-list a,
.service-areas-list .area-tag,
a.area-tag {
    color: #FFFFFF !important;
    background-color: #37726E !important;
}

.area-tag:hover,
.service-areas-list a:hover,
a.area-tag:hover {
    color: #F2FC32 !important;
    background-color: #2a5956 !important;
}

/**
 * CRITICAL: Pricing Buttons (btn-pricing)
 * Teal buttons in pricing cards - text must be white
 */
.btn-pricing,
a.btn-pricing,
.pricing-card .btn-pricing,
.price-card a {
    color: #FFFFFF !important;
}

.btn-pricing:hover,
a.btn-pricing:hover {
    color: #F2FC32 !important;
}

/**
 * CRITICAL: Price CTA Buttons (Airbnb page pricing)
 */
.price-cta,
a.price-cta {
    color: #FFFFFF !important;
}

.price-cta:hover,
a.price-cta:hover {
    color: #F2FC32 !important;
}

/**
 * CRITICAL: Section Labels with teal background
 */
.section-label {
    color: #FFFFFF !important;
}

/**
 * Generic fix: Any link/button with teal background needs visible text
 */
a[style*="background"][style*="37726E"],
a[style*="background-color"][style*="37726E"],
button[style*="background"][style*="37726E"],
[class*="teal"] a,
[class*="teal"] button {
    color: #FFFFFF !important;
}

/* ==========================================================================
   Section 1b: NO UNDERLINES - Ever (Design Rule)
   GLOBAL RULE: Links must NEVER be underlined anywhere on the site
   ========================================================================== */

/**
 * MASTER RULE: Remove underlines from ALL links globally
 * User requirement: "never underline text in a button, or anytime for that matter"
 */
a,
a:link,
a:visited,
a:hover,
a:active,
a:focus {
    text-decoration: none !important;
}

/**
 * Redundant but explicit: Remove underlines from all buttons and CTAs
 */
a.btn,
a.btn-primary,
a.btn-secondary,
a.btn-pricing,
a.btn-primary-gold,
a.btn-secondary-outline,
a.price-cta,
a.cta-phone,
a.header-cta,
a.footer-cta,
a.area-tag,
.btn a,
.cta a,
.cta-section a,
.pricing-card a,
.price-card a,
[class*="btn"] a,
[class*="cta"] a,
button,
.button,
/* Services page specific */
.services-hero__btn,
.services-cat-card,
.services-section-cat__link,
.services-pkg-card__btn,
.services-packages__btn,
[class*="services-"] a,
/* Card links */
[class*="-card"] a,
[class*="card-"] a,
/* Footer links */
footer a,
.footer a,
.site-footer a,
contentinfo a,
/* Navigation */
nav a,
.nav a,
.navigation a,
.main-nav a,
/* Contact links */
a[href^="tel:"],
a[href^="mailto:"],
/* Sticky CTA */
.sk-sticky-cta a,
.sk-sticky-cta-call,
.sk-sticky-cta-quote,
.sticky-cta a {
    text-decoration: none !important;
}

/**
 * Also remove underline on hover for ALL interactive elements
 */
a:hover,
a.btn:hover,
a.btn-primary:hover,
a.btn-secondary:hover,
a.btn-pricing:hover,
a.btn-primary-gold:hover,
a.btn-secondary-outline:hover,
a.price-cta:hover,
a.cta-phone:hover,
a.header-cta:hover,
a.area-tag:hover,
.btn a:hover,
.cta a:hover,
[class*="btn"] a:hover,
[class*="cta"] a:hover,
.services-hero__btn:hover,
.services-cat-card:hover,
.services-section-cat__link:hover,
.services-pkg-card__btn:hover,
.services-packages__btn:hover,
[class*="services-"] a:hover,
[class*="-card"] a:hover,
[class*="card-"] a:hover,
footer a:hover,
.footer a:hover,
nav a:hover,
a[href^="tel:"]:hover,
a[href^="mailto:"]:hover {
    text-decoration: none !important;
}

/**
 * Generic rules for teal backgrounds using design system classes
 * These apply to any element with sk-bg-primary or sk-bg-teal class
 */
.sk-bg-primary h1,
.sk-bg-primary h2,
.sk-bg-primary h3,
.sk-bg-primary h4,
.sk-bg-primary h5,
.sk-bg-primary h6,
.sk-bg-primary .section-title,
.sk-bg-primary .cta-title,
.sk-bg-teal h1,
.sk-bg-teal h2,
.sk-bg-teal h3,
.sk-bg-teal h4,
.sk-bg-teal h5,
.sk-bg-teal h6,
.sk-bg-teal .section-title,
.sk-bg-teal .cta-title {
    color: var(--sk-accent) !important; /* #F2FC32 - Yellow for titles */
}

.sk-bg-primary p,
.sk-bg-primary span:not(.highlight):not(.badge),
.sk-bg-primary li,
.sk-bg-primary .content,
.sk-bg-primary .cta-text,
.sk-bg-teal p,
.sk-bg-teal span:not(.highlight):not(.badge),
.sk-bg-teal li,
.sk-bg-teal .content,
.sk-bg-teal .cta-text {
    color: var(--sk-white) !important; /* #FFFFFF - White for body text */
}

/**
 * CTA Section Fixes (from audit: about-page.css, services-page.css,
 * programme-partenaire-courtiers.css, page-contact.php)
 * All CTA sections with teal background must use yellow titles
 */
.cta-section .cta-title,
.cta-block .cta-title,
.cta-wrapper .cta-title,
.contact-cta .cta-title,
.service-cta .cta-title,
[class*="cta"] h2[class*="title"],
section[style*="37726E"] h1,
section[style*="37726E"] h2,
section[style*="37726E"] h3,
div[style*="37726E"] h1,
div[style*="37726E"] h2,
div[style*="37726E"] h3 {
    color: var(--sk-accent) !important; /* #F2FC32 */
}

/**
 * Specific page fixes from audit
 */

/* Contact Page Hero (page-contact.php:36) - inline style overrides */
.contact-hero h1,
.contact-hero h2,
.contact-hero .hero-title,
.page-contact .hero-section h1,
.page-contact .hero-section h2,
.page-template-page-contact .hero-section h1,
.page-template-page-contact .hero-section h2 {
    color: var(--sk-accent) !important;
}

.contact-hero p,
.contact-hero .hero-text,
.page-contact .hero-section p,
.page-template-page-contact .hero-section p {
    color: var(--sk-white) !important;
}

/* Home Optimized - section titles on teal (home-optimized.css:67) */
.home-optimized .section-title[style*="teal"],
.home-optimized [style*="37726E"] .section-title,
.template-home-optimized .section-title {
    color: var(--sk-accent) !important;
}

/* Services Page CTA (services-page.css:252) */
.services-cta .cta-title,
.services-page .cta-section .cta-title,
.page-template-template-services .cta-section h2 {
    color: var(--sk-accent) !important;
}

/* Programme Courtiers CTA (programme-partenaire-courtiers.css:1369) */
.broker-program-cta .cta-title,
.partenaire-courtiers .cta-section h2,
.page-programme-partenaire-courtiers .cta-section h2 {
    color: var(--sk-accent) !important;
}

/* Recrutement CTA (recrutement.css:652) */
.recrutement-cta .cta-title,
.page-template-template-recrutement .cta-section h2 {
    color: var(--sk-accent) !important;
}

/* About Page CTA (about-page.css) */
.about-cta .cta-title,
.about-cta h2,
.page-template-about .cta-section h2,
.about-page .cta-section h2 {
    color: var(--sk-accent, #F2FC32) !important;
}

/* ==========================================================================
   Section 1c: Mobile Sticky CTA Fixes
   Ensure sticky CTA buttons at bottom of mobile screens have correct colors
   ========================================================================== */

/**
 * Mobile Sticky CTA - Teal "Appeler" button
 * Must have white text on teal background
 */
.sk-sticky-cta-call,
a.sk-sticky-cta-call {
    color: #FFFFFF !important;
    background-color: #37726E !important;
}

.sk-sticky-cta-call:hover,
a.sk-sticky-cta-call:hover {
    color: #F2FC32 !important;
}

/**
 * Mobile Sticky CTA - Yellow "Soumission" button
 * Must have dark text on yellow background
 */
.sk-sticky-cta-quote,
a.sk-sticky-cta-quote {
    color: #1f4f4b !important;
    background-color: #F2FC32 !important;
}

/**
 * Sticky CTA container
 */
.sk-sticky-cta {
    background: #FFFFFF !important;
}

.sk-sticky-cta a {
    text-decoration: none !important;
}

/* ==========================================================================
   Section 2: Card Height Fixes (FEQ-03)
   Ensures equal height cards in all grid layouts
   ========================================================================== */

/**
 * Generic card container fixes
 * Apply flexbox stretch pattern for equal heights
 */
.service-cards-container,
.feature-cards-container,
.team-cards-container,
.card-grid,
.sk-card-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.service-cards-container > .service-card,
.feature-cards-container > .feature-card,
.team-cards-container > .team-card,
.card-grid > .card,
.sk-card-grid > .sk-card {
    display: flex;
    flex-direction: column;
}

/**
 * Card content fills available space, footer stays at bottom
 */
.service-card .card-content,
.service-card .card-body,
.feature-card .card-content,
.feature-card .card-body,
.team-card .card-content,
.team-card .card-body,
.card .card-content,
.card .card-body,
.sk-card .sk-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.service-card .card-cta,
.service-card .card-footer,
.feature-card .card-cta,
.feature-card .card-footer,
.team-card .card-cta,
.team-card .card-footer,
.card .card-cta,
.card .card-footer,
.sk-card .sk-card-footer {
    margin-top: auto;
}

/**
 * Homepage Advantages Grid (audit: style="--step-index: X" for stagger)
 * Ensure equal heights regardless of animation index
 */
.advantages-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.advantages-grid > .advantage-card,
.advantages-grid > [class*="card"] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/**
 * Services Page Grid (audit: grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)))
 */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--sk-space-6, 1.5rem);
    align-items: stretch;
}

.services-grid > .service-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/**
 * About Page Values List (audit: flex with calc(25% - 15px))
 */
.values-list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--sk-space-4, 1rem);
}

.values-list > .value-item,
.values-list > [class*="value"] {
    flex: 1 1 calc(25% - 15px);
    min-width: 200px;
    display: flex;
    flex-direction: column;
}

/**
 * Feature Grid - responsive with equal heights
 */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sk-space-6, 1.5rem);
    align-items: stretch;
}

.feature-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/**
 * Team Grid
 */
.team-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sk-space-6, 1.5rem);
    align-items: stretch;
}

.team-card {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   Section 3: Brand Color Enforcement (FEQ-03)
   Fix off-brand colors and standardize to design tokens
   ========================================================================== */

/**
 * Fix off-brand accent color in home-optimized.css
 * Audit found: --accent: #E5B23B (gold) should be #F2FC32 (lime yellow)
 */
.home-optimized,
.template-home-optimized,
.page-template-template-home-optimized {
    --accent: var(--sk-accent, #F2FC32);
}

/**
 * Override any hardcoded off-brand primary colors
 * Ensure #37726E is always used for primary teal
 */
[style*="color: #36706C"],
[style*="color:#36706C"],
[style*="background: #36706C"],
[style*="background:#36706C"],
[style*="background-color: #36706C"],
[style*="background-color:#36706C"] {
    /* Cannot override inline styles without !important */
}

/**
 * Typography Hierarchy Standardization
 * Ensure consistent heading sizes using design tokens
 */
.page-title,
main h1:first-of-type,
.entry-title {
    font-size: var(--sk-text-4xl, 2.25rem);
    font-weight: var(--sk-font-bold, 700);
    line-height: var(--sk-leading-tight, 1.25);
    color: var(--sk-primary, #37726E);
}

.section-title,
main h2,
.entry-content h2 {
    font-size: var(--sk-text-3xl, 1.875rem);
    font-weight: var(--sk-font-semibold, 600);
    line-height: var(--sk-leading-tight, 1.25);
}

.subsection-title,
main h3,
.entry-content h3 {
    font-size: var(--sk-text-2xl, 1.5rem);
    font-weight: var(--sk-font-semibold, 600);
}

/**
 * Link colors - ensure brand primary is used
 */
a:not(.sk-btn):not(.btn):not([class*="button"]) {
    color: var(--sk-primary, #37726E);
}

a:not(.sk-btn):not(.btn):not([class*="button"]):hover {
    color: var(--sk-primary-dark, #2a5956);
}

/**
 * Fix section-title-special semantic issue (audit: should be H2 styling)
 */
.section-title-special {
    font-size: var(--sk-text-3xl, 1.875rem);
    font-weight: var(--sk-font-semibold, 600);
    line-height: var(--sk-leading-tight, 1.25);
}

/* ==========================================================================
   Section 4: Inline Style Override Helpers
   Classes to use when extracting inline styles from templates
   ========================================================================== */

/**
 * Contact Hero Section (extracted from page-contact.php inline styles)
 */
.sk-hero-teal {
    background-color: var(--sk-primary, #37726E);
}

.sk-hero-teal h1,
.sk-hero-teal h2,
.sk-hero-teal .hero-title {
    color: var(--sk-accent, #F2FC32) !important;
}

.sk-hero-teal p,
.sk-hero-teal .hero-description {
    color: var(--sk-white, #FFFFFF) !important;
}

/**
 * CTA Section Helper Class
 */
.sk-cta-teal {
    background-color: var(--sk-primary, #37726E);
}

.sk-cta-teal h2,
.sk-cta-teal .cta-title {
    color: var(--sk-accent, #F2FC32) !important;
}

.sk-cta-teal p,
.sk-cta-teal .cta-description {
    color: var(--sk-white, #FFFFFF) !important;
}

/* ==========================================================================
   Section 5: Responsive Adjustments
   Ensure fixes work across all viewport sizes
   ========================================================================== */

@media (max-width: 768px) {
    .values-list > .value-item,
    .values-list > [class*="value"] {
        flex: 1 1 calc(50% - 10px);
        min-width: 150px;
    }

    .team-card {
        flex: 1 1 100%;
    }
}

@media (max-width: 480px) {
    .values-list > .value-item,
    .values-list > [class*="value"] {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   Section 6: Services Page Card Fixes (FEQ-03, FEQ-04)
   Fixes: Underlines, asymmetric heights, professional appearance
   ========================================================================== */

/**
 * CRITICAL: Services Category Cards - Equal Heights
 * The grid must use align-items: stretch and cards must fill height
 */
.services-categories__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: stretch !important;
}

.services-cat-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 320px;
    text-decoration: none !important;
}

.services-cat-card__desc {
    flex-grow: 1 !important;
    display: flex;
    align-items: flex-start;
}

.services-cat-card__link {
    margin-top: auto !important;
    text-decoration: none !important;
}

/**
 * CRITICAL: Services Package Cards - Equal Heights
 * Package cards in same row must have equal heights
 */
.services-pkg-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    align-items: stretch !important;
}

.services-pkg-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.services-pkg-card__body {
    flex-grow: 1 !important;
    display: flex;
    flex-direction: column;
}

.services-pkg-card__features {
    flex-grow: 1;
}

.services-pkg-card__benefit {
    margin-top: auto !important;
}

.services-pkg-card__footer {
    margin-top: auto !important;
}

/**
 * CRITICAL: Why Choose Us Cards - Equal Heights
 */
.services-why__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: stretch !important;
}

.services-why-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 280px;
}

.services-why-card__text {
    flex-grow: 1;
}

/**
 * CRITICAL: Remove ALL underlines from services page
 * Belt-and-suspenders approach for maximum specificity
 */
.services-modern a,
.services-modern a:link,
.services-modern a:visited,
.services-modern a:hover,
.services-modern a:active,
.services-modern a:focus,
.services-cat-card,
.services-cat-card:link,
.services-cat-card:visited,
.services-cat-card:hover,
.services-cat-card:active,
.services-cat-card__link,
.services-cat-card__link:hover,
.services-section-cat__link,
.services-section-cat__link:hover,
.services-pkg-card__btn,
.services-pkg-card__btn:hover,
.services-packages__btn,
.services-packages__btn:hover,
.services-hero__btn,
.services-hero__btn:hover,
.services-cta__btn,
.services-cta__btn:hover {
    text-decoration: none !important;
}

/**
 * Extra underline removal for any element with services- prefix
 */
[class*="services-"] a,
[class*="services-"] a:hover,
[class*="services-"] button,
[class*="services-"][href],
[class*="services-"][href]:hover {
    text-decoration: none !important;
}

/**
 * Services Page Responsive - Maintain equal heights at breakpoints
 */
@media (max-width: 1024px) {
    .services-categories__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .services-cat-card {
        min-height: 300px;
    }

    .services-pkg-grid {
        grid-template-columns: 1fr;
    }

    .services-why__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .services-categories__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .services-cat-card {
        min-height: 280px;
        padding: 28px 20px;
    }

    .services-why__grid {
        grid-template-columns: 1fr;
    }

    .services-why-card {
        min-height: auto;
    }
}

@media (max-width: 480px) {
    .services-categories__grid {
        grid-template-columns: 1fr;
    }

    .services-cat-card {
        min-height: auto;
    }
}