/**
 * =============================================================================
 * HOME PAGE IMPROVEMENTS - Celine Nail Studio
 * =============================================================================
 * Charte "Artisanat Contemporain Mineral"
 * Améliorations CSS ciblées pour la page d'accueil
 * =============================================================================
 */

/* =============================================================================
   1. SPACING SYSTEM - Variables uniformisées
   ============================================================================= */
:root {
    /* Spacing scale harmonisé */
    --space-1: 0.5rem;   /* 8px */
    --space-2: 1rem;     /* 16px */
    --space-3: 1.5rem;   /* 24px */
    --space-4: 2rem;     /* 32px */
    --space-5: 3rem;     /* 48px */
    --space-6: 4rem;     /* 64px */
    --space-7: 6rem;     /* 96px */
    --space-8: 8rem;     /* 128px */

    /* Rythme vertical sections */
    --section-gap: var(--space-7);
    --section-gap-mobile: var(--space-5);

    /* Or patiné gradient */
    --gold-gradient: linear-gradient(135deg, #C9A857 0%, #E5D4A1 45%, #B8962E 100%);
    --gold-gradient-hover: linear-gradient(135deg, #D4B86A 0%, #F0E4B8 45%, #C9A857 100%);

    /* Panel styles */
    --panel-radius: 6px;
    --panel-border: 1px solid rgba(255, 255, 255, 0.08);
    --panel-shadow: 0 4px 24px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
    --panel-shadow-hover: 0 8px 40px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.12);
    --panel-backdrop: blur(12px);

    /* Typographie améliorée */
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Inter', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    --line-height-body: 1.6;
    --line-height-relaxed: 1.7;

    /* Contraste amélioré */
    --text-secondary: rgba(255, 255, 255, 0.75);
    --text-tertiary: rgba(255, 255, 255, 0.55);
}

/* =============================================================================
   2. TYPOGRAPHIE - Serif éditoriale + Inter
   ============================================================================= */

/* Import Inter si non présent */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

/* Titres H2/H3 - Cormorant avec letter-spacing augmenté */
.Home .Section__title,
.Home .qpi-title,
.Home .Card__title,
.Home .Callout__text .H3,
.Home .ContactCard .H3,
.Home .TCard__name,
.Home .SideCard__title {
    font-family: var(--font-display);
    letter-spacing: 0.08em;
    font-weight: 300;
}

/* Labels/Kickers - letter-spacing augmenté */
.Home .Hero__kicker,
.Home .Kpi__label,
.Home .qpi-label,
.Home .Tag,
.Home .Card__badge {
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* Textes body - Inter avec line-height confortable */
.Home .Hero__lead,
.Home .Section__desc,
.Home .Card__text,
.Home .Callout__text p,
.Home .TCard p,
.Home .qpi-subtitle,
.Home .qpi-footnote {
    font-family: var(--font-body);
    line-height: var(--line-height-relaxed);
}

/* Paragraphes secondaires - opacité réduite */
.Home .Section__desc,
.Home .qpi-subtitle,
.Home .Card__text,
.Home .Callout__text p {
    color: var(--text-secondary);
}

.Home .qpi-footnote,
.Home .Muted {
    color: var(--text-tertiary);
}

/* =============================================================================
   3. PANELS - Harmonisation sections
   ============================================================================= */

/* Tous les panels/sections avec style unifié */
.Home .qpi-container,
.Home .Card,
.Home .TCard,
.Home .Callout,
.Home .ContactCard,
.Home .Form,
.Home .SideCard,
.Home .Quote {
    border-radius: var(--panel-radius);
    border: var(--panel-border);
    box-shadow: var(--panel-shadow);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* Backdrop filter sur grands panels seulement */
.Home .qpi-container,
.Home .Callout,
.Home .ContactCard,
.Home .Form,
.Home .SideCard {
    backdrop-filter: var(--panel-backdrop);
    -webkit-backdrop-filter: var(--panel-backdrop);
}

/* Hover states panels */
.Home .Card:hover,
.Home .TCard:hover {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: var(--panel-shadow-hover);
}

/* Grid interne Qualiopi */
.Home .qpi-grid {
    border-radius: var(--panel-radius);
    border: var(--panel-border);
}

/* =============================================================================
   4. SECTIONS - Rythme vertical uniforme
   ============================================================================= */

.Home .Section {
    margin-bottom: var(--section-gap);
}

.Home .Section__head {
    margin-bottom: var(--space-5);
}

@media (max-width: 768px) {
    .Home .Section {
        margin-bottom: var(--section-gap-mobile);
    }

    .Home .Section__head {
        margin-bottom: var(--space-4);
    }
}

/* Espacement cards */
.Home .Cards3,
.Home .Cards2,
.Home .Testimonials {
    gap: var(--space-4);
}

/* =============================================================================
   5. BOUTONS / CTA - Unification complète
   ============================================================================= */

/* Reset base pour tous les boutons Home */
.Home .Btn {
    position: relative;
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 3px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

/* Primary - Or patiné gradient */
.Home .Btn--primary {
    background: var(--gold-gradient);
    border: 1px solid transparent;
    color: var(--color-black);
    box-shadow: 0 2px 8px rgba(201, 168, 87, 0.25);
}

.Home .Btn--primary:hover {
    background: var(--gold-gradient-hover);
    box-shadow: 0 4px 16px rgba(201, 168, 87, 0.35);
    transform: translateY(-1px);
}

.Home .Btn--primary:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* Secondary/Outline - Outline or patiné */
.Home .Btn--outline,
.Home .Btn--secondary {
    background: transparent;
    border: 1px solid rgba(201, 168, 87, 0.5);
    color: var(--color-gold);
}

.Home .Btn--outline:hover,
.Home .Btn--secondary:hover {
    background: rgba(201, 168, 87, 0.1);
    border-color: var(--color-gold);
    color: var(--color-gold-light);
}

.Home .Btn--outline:focus-visible,
.Home .Btn--secondary:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* Ghost - Border neutre + texte muted */
.Home .Btn--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-secondary);
}

.Home .Btn--ghost:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--color-white);
}

.Home .Btn--ghost:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* Focus visible global WCAG */
.Home a:focus-visible,
.Home button:focus-visible,
.Home input:focus-visible,
.Home textarea:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* LinkReserve amélioré */
.Home .LinkReserve {
    font-weight: 500;
    letter-spacing: 0.05em;
}

.Home .LinkReserve:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* =============================================================================
   6. IMAGES - Traitement harmonisation
   ============================================================================= */

/* Traitement global cartes Atelier + Formations */
.Home .CardMedia img,
.Home .Card--wide .CardMedia img {
    filter: saturate(0.8) contrast(1.06) brightness(0.92);
    transition: filter 0.4s ease, transform 0.4s ease;
}

.Home .Card:hover .CardMedia img {
    filter: saturate(0.9) contrast(1.08) brightness(0.95);
    transform: scale(1.03);
}

/* Placeholder images */
.Home .ImgTemp {
    background: linear-gradient(
        135deg,
        rgba(58, 58, 58, 0.8) 0%,
        rgba(44, 44, 44, 0.9) 50%,
        rgba(58, 58, 58, 0.8) 100%
    );
}

/* Hero image traitement léger */
.Home .Hero__img {
    filter: saturate(0.85) contrast(1.05) brightness(0.9);
}

/* =============================================================================
   7. TAGS - Uniformisation durée/prix
   ============================================================================= */

.Home .Tag {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 var(--space-2);
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.Home .Tag s {
    opacity: 0.5;
    margin-right: 0.5em;
}

/* Badge formation niveau */
.Home .Card__badge {
    height: 24px;
    padding: 0 var(--space-1);
    font-size: 0.625rem;
    font-weight: 600;
    background: rgba(201, 168, 87, 0.12);
    border: 1px solid rgba(201, 168, 87, 0.25);
    border-radius: 2px;
}

/* =============================================================================
   8. ACCESSIBILITE & CONTRASTE
   ============================================================================= */

/* Contraste textes secondaires sur fond sombre */
.Home .Card__text,
.Home .Section__desc,
.Home .Hero__lead,
.Home .Callout__text p {
    color: rgba(255, 255, 255, 0.78);
}

/* Line-height global confort lecture */
.Home {
    line-height: var(--line-height-body);
}

.Home p,
.Home li {
    line-height: var(--line-height-relaxed);
}

/* Skip link visible au focus */
.Home .skip-link:focus {
    background: var(--color-gold);
    color: var(--color-black);
    font-weight: 600;
}

/* Indicateurs Qualiopi - contraste valeurs */
.Home .qpi-value {
    color: var(--color-gold-light);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.Home .qpi-label {
    color: rgba(255, 255, 255, 0.72);
}

/* Stars témoignages - lisibilité */
.Home .Stars {
    color: var(--color-gold);
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
}

/* =============================================================================
   9. KPIs HERO - Améliorations
   ============================================================================= */

.Home .Kpis {
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.Home .Kpi {
    padding: var(--space-1) 0;
    text-align: center;
}

.Home .Kpi__label {
    font-size: 0.625rem;
    color: var(--text-tertiary);
    margin-bottom: var(--space-1);
}

.Home .Kpi__value {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-white);
}

/* =============================================================================
   10. QUOTE SECTION - Raffinement
   ============================================================================= */

.Home .Quote {
    background: rgba(44, 44, 44, 0.3);
    border-left: 3px solid var(--color-gold);
    border-right: none;
    border-top: none;
    border-bottom: none;
    text-align: left;
    padding: var(--space-5) var(--space-4);
}

.Home .Quote p {
    font-size: 1.25rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.8);
    max-width: none;
    margin: 0;
    position: relative;
    padding-left: var(--space-3);
}

.Home .Quote p::before {
    content: '"';
    position: absolute;
    left: 0;
    top: -0.2em;
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-style: normal;
    color: var(--color-gold);
    opacity: 0.5;
    line-height: 1;
}

/* =============================================================================
   11. CALLOUT - Ajustements
   ============================================================================= */

.Home .Callout {
    background: rgba(58, 58, 58, 0.5);
    padding: var(--space-4) var(--space-5);
}

.Home .Callout__text .H3 {
    font-size: 1.25rem;
    margin-bottom: var(--space-2);
}

/* =============================================================================
   12. TESTIMONIALS - Polish
   ============================================================================= */

.Home .TCard {
    background: rgba(44, 44, 44, 0.5);
    padding: var(--space-4);
}

.Home .TCard__top {
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.Home .TCard p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9375rem;
    line-height: 1.7;
}

/* =============================================================================
   13. CONTACT SECTION - Finitions
   ============================================================================= */

.Home .ContactGrid {
    gap: var(--space-4);
}

.Home .ContactCard,
.Home .Form {
    padding: var(--space-5);
}

.Home .Field label {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.7);
}

.Home .Field input,
.Home .Field textarea {
    border-radius: 3px;
    padding: var(--space-2) var(--space-3);
}

.Home .Field input:focus,
.Home .Field textarea:focus {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(201, 168, 87, 0.15);
}

/* =============================================================================
   14. SIDEBAR - Cohérence
   ============================================================================= */

.Home .SideCard {
    padding: var(--space-4);
}

.Home .PostItem {
    border-radius: var(--panel-radius);
    padding: var(--space-3);
}

.Home .PostItem:hover {
    background: rgba(255, 255, 255, 0.02);
}

.Home .PostItem__title {
    font-weight: 500;
    line-height: 1.4;
}

/* =============================================================================
   15. HERO ACTIONS CENTERED & BUTTON STYLES
   ============================================================================= */

/* Hero actions centered */
.Home .Hero__actions--centered {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
}

/* Secondary Gold Button - fond doré avec ton différent du primary */
.Home .Btn--secondary-gold {
    background: linear-gradient(135deg, #8B7355 0%, #A08060 45%, #6B5545 100%);
    border: 1px solid rgba(139, 115, 85, 0.3);
    color: var(--color-white);
    box-shadow: 0 2px 8px rgba(139, 115, 85, 0.25);
}

.Home .Btn--secondary-gold:hover {
    background: linear-gradient(135deg, #9A8265 0%, #B09070 45%, #7A6455 100%);
    box-shadow: 0 4px 16px rgba(139, 115, 85, 0.35);
    transform: translateY(-1px);
}

.Home .Btn--secondary-gold:focus-visible {
    outline: 2px solid #A08060;
    outline-offset: 2px;
}

/* Tertiary Gold Button - fond gris foncé élégant */
.Home .Btn--tertiary-gold {
    background: linear-gradient(135deg, #3A3A3A 0%, #4A4A4A 45%, #2C2C2C 100%);
    border: 1px solid rgba(201, 168, 87, 0.25);
    color: var(--color-gold-light, #E5C85C);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.Home .Btn--tertiary-gold:hover {
    background: linear-gradient(135deg, #4A4A4A 0%, #5A5A5A 45%, #3C3C3C 100%);
    border-color: rgba(201, 168, 87, 0.4);
    color: var(--color-gold, #D4AF37);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
}

.Home .Btn--tertiary-gold:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* =============================================================================
   16. RESPONSIVE - Mobile optimisations
   ============================================================================= */

@media (max-width: 768px) {
    .Home .Btn {
        padding: var(--space-2) var(--space-3);
        font-size: 0.75rem;
        width: 100%;
        justify-content: center;
    }

    .Home .Hero__actions {
        gap: var(--space-2);
    }

    .Home .Hero__actions--centered {
        flex-direction: column;
        align-items: stretch;
    }

    .Home .Callout {
        padding: var(--space-4);
        flex-direction: column;
        text-align: center;
    }

    .Home .Callout__actions {
        width: 100%;
        flex-direction: column;
    }

    .Home .Quote {
        padding: var(--space-4) var(--space-3);
    }

    .Home .Quote p {
        font-size: 1.1rem;
    }

    .Home .qpi-container {
        padding: var(--space-4);
    }

    .Home .ContactCard,
    .Home .Form {
        padding: var(--space-4);
    }

    .Home .Tag {
        height: 26px;
        font-size: 0.625rem;
    }
}

/* =============================================================================
   17. ANIMATIONS SUBTILES
   ============================================================================= */

/* Entrée douce sections */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.Home .Section {
    animation: fadeInUp 0.6s ease-out;
}

/* Hover cards plus fluide */
.Home .Card,
.Home .TCard {
    transform: translateY(0);
}

.Home .Card:hover,
.Home .TCard:hover {
    transform: translateY(-4px);
}

/* =============================================================================
   18. DARK MODE / HIGH CONTRAST SUPPORT
   ============================================================================= */

@media (prefers-contrast: high) {
    .Home .Card__text,
    .Home .Section__desc,
    .Home .TCard p {
        color: rgba(255, 255, 255, 0.9);
    }

    .Home .Tag,
    .Home .qpi-label {
        color: rgba(255, 255, 255, 0.8);
    }

    .Home .Btn--ghost {
        border-color: rgba(255, 255, 255, 0.4);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .Home .Section,
    .Home .Card,
    .Home .TCard,
    .Home .Btn,
    .Home .CardMedia img {
        animation: none;
        transition: none;
    }
}