/* ======================================================= */
/* == ACCUEIL.CSS - L'ATELIER ORGANIQUE                  == */
/* == Vision "Luxe Artisanal" - Mobile-First Strict     == */
/* == Palette "Soleil Couchant 18h30"                   == */
/* ======================================================= */

/* ======================================================= */
/* === VARIABLES CSS - PALETTE "SOLEIL COUCHANT"      === */
/* ======================================================= */

:root {
    /* === COULEURS PRINCIPALES === */
    --ivoire-veloute: #FFF5E1;        /* Fond principal doux */
    --vert-sauge: #4A4644;             /* Fond de section/carte naturel */
    --brun-olive-fonce: #2B2A2E;       /* Textes principaux & titres */
    --argile-rose: #D95D39;            /* CTA, boutons, accents chaleureux */
    --bleu-brume: #F0A27B;
    --noir-brume: #0B0C1D;   
    --blanc-brume: #FFF5E1;          /* Bordures, détails subtils */
    --terre-ombre: #5C2E35;
    
    /* === NOUVELLES COULEURS SOLEIL COUCHANT === */
    --ambre-fonce: #2B2A2E;
    --bourgogne-profond: #5C2E35;
    --brun-cendre: #4A4644;
    --bleu-nuit: #0B0C1D;
    
    /* Lumière & Textes */
    --or-pale: #FFF5E1;
    
    /* Accents Chauds */
    --orange-sanguine: #D95D39;
    --peche-douce: #F0A27B;
    --degrade-rayons: linear-gradient(45deg, #D95D39, #F0A27B);
    
    /* Dégradés principaux */
    --degrade-principal: linear-gradient(135deg, var(--ambre-fonce), var(--bourgogne-profond));
    --degrade-hero: linear-gradient(rgba(43, 42, 46, 0.85), rgba(92, 46, 53, 0.85));
    
    /* Ombres et effets */
    --ombre-douce: 0 8px 32px rgba(0, 0, 0, 0.3);
    --lueur-doree: 0 0 20px rgba(255, 245, 225, 0.3);
    --lueur-intense: 0 0 40px rgba(255, 245, 225, 0.5);
    
    /* === VARIATIONS DE TEINTES === */
    --ivoire-veloute-alpha: rgba(255, 245, 225, 0.95);
    --brun-olive-alpha: rgba(43, 42, 46, 0.8);
    --argile-rose-hover: #C44B2F;
    --bleu-brume-light: rgba(240, 162, 123, 0.3);
    
    /* === TYPOGRAPHIE === */
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;
    
    /* === ESPACEMENTS (Mobile-First) === */
    --spacing-xs: 0.5rem;    /* 8px */
    --spacing-sm: 1rem;      /* 16px */
    --spacing-md: 1.5rem;    /* 24px */
    --spacing-lg: 2rem;      /* 32px */
    --spacing-xl: 3rem;      /* 48px */
    --spacing-xxl: 4rem;     /* 64px */
    
    /* === BORDURES & OMBRES === */
    --border-radius-sm: 0.5rem;
    --border-radius-md: 1rem;
    --border-radius-lg: 1.5rem;
    --shadow-soft: var(--ombre-douce);
    --shadow-medium: 0 12px 40px rgba(0, 0, 0, 0.4);
    
    /* === TRANSITIONS === */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ======================================================= */
/* === RESET & BASE - ANTI-DÉBORDEMENT                === */
/* ======================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    background-color: var(--or-pale);
    color: var(--ambre-fonce);
    line-height: 1.6;
    overflow-x: hidden; /* ANTI-DÉBORDEMENT CRITIQUE */
    scroll-behavior: smooth;
}

/* ======================================================= */
/* === TYPOGRAPHIE DE BASE                            === */
/* ======================================================= */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    color: var(--ambre-fonce);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
}

a {
    color: var(--orange-sanguine);
    text-decoration: none;
    transition: var(--transition-smooth);
}

a:hover {
    color: var(--peche-douce);
}

/* ======================================================= */
/* === BOUTONS GLOBAUX                                === */
/* ======================================================= */

.btn-primary,
.btn-secondary {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-bounce);
    border: 2px solid transparent;
    text-decoration: none;
    min-width: 160px;
}

.btn-primary {
    background: var(--degrade-rayons);
    color: white;
    box-shadow: var(--lueur-doree);
}

.btn-primary:hover {
    background: var(--orange-sanguine);
    transform: translateY(-2px);
    box-shadow: var(--lueur-intense);
    color: white;
}

.btn-secondary {
    background-color: transparent;
    color: var(--or-pale);
    border-color: var(--or-pale);
}

.btn-secondary:hover {
    background-color: var(--or-pale);
    color: var(--ambre-fonce);
    transform: translateY(-2px);
}

/* ======================================================= */
/* === ACTE 1 : HERO SECTION (#hero-birth)           === */
/* ======================================================= */

#hero-birth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-md);
    position: relative;
    background-image: var(--background-image-url);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

#hero-birth::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--degrade-hero);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    width: 100%;
}

#ink-drop-animation {
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, var(--orange-sanguine) 30%, transparent 70%);
    border-radius: 50%;
    margin: 0 auto var(--spacing-lg);
    opacity: 0.8;
    box-shadow: var(--lueur-doree);
}

.hero-logo {
    font-size: 3rem;
    font-family: var(--font-display);
    color: var(--or-pale);
    margin-bottom: var(--spacing-sm);
    font-weight: 700;
    text-shadow: var(--lueur-doree);
}

.hero-slogan {
    font-size: 1.2rem;
    color: var(--peche-douce);
    font-style: italic;
    margin-bottom: var(--spacing-lg);
}

.hero-intro-text {
    font-size: 1rem;
    color: var(--or-pale);
    opacity: 0.9;
    max-width: 500px;
    margin: 0 auto;
}

/* ======================================================= */
/* === ACTE 2 : PROMESSE (#our-promise)               === */
/* ======================================================= */

#our-promise {
    padding: var(--spacing-xxl) var(--spacing-md);
    background: var(--degrade-principal);
}

.promise-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: var(--spacing-xl);
    align-items: center;
}

.promise-image-container img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--ombre-douce);
}

.promise-text-container h2 {
    margin-bottom: var(--spacing-lg);
    color: var(--or-pale);
}

.promise-text-container p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--or-pale);
    opacity: 0.9;
}

/* ======================================================= */
/* === ACTE 3 : GALERIE (#orbital-journey)           === */
/* ======================================================= */

#orbital-journey {
    padding: var(--spacing-xxl) var(--spacing-md);
    position: relative;
    background-image: var(--background-image-url);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

#orbital-journey::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(74, 70, 68, 0.6);
    z-index: 1;
}

.showcase-container {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.showcase-container h2 {
    color: var(--or-pale);
    margin-bottom: var(--spacing-xl);
    font-size: 2.2rem;
    text-shadow: var(--lueur-doree);
}

.project-details {
    background-color: var(--or-pale);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--ombre-douce);
    margin-top: var(--spacing-xl);
}

.project-details h3 {
    color: var(--ambre-fonce);
    margin-bottom: var(--spacing-md);
}

.project-details p {
    color: var(--ambre-fonce);
    opacity: 0.8;
    margin-bottom: var(--spacing-lg);
}

.project-link {
    display: inline-block;
    background: var(--degrade-rayons);
    color: white;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    transition: var(--transition-bounce);
    text-decoration: none;
    box-shadow: var(--lueur-doree);
}

.project-link:hover {
    background-color: var(--orange-sanguine);
    transform: translateY(-2px);
    color: white;
    box-shadow: var(--lueur-intense);
}

/* ======================================================= */
/* === ACTE 4 : BIBLIOTHÈQUE (#principles-gallery)   === */
/* ======================================================= */

#principles-gallery {
    padding: var(--spacing-xxl) var(--spacing-md);
    background-color: var(--brun-cendre);
}

.library-container {
    max-width: 1200px;
    margin: 0 auto;
}

.principles-intro {
    text-align: center;
    margin-bottom: var(--spacing-xxl);
}

.principles-intro h2 {
    color: var(--or-pale);
    margin-bottom: var(--spacing-lg);
}

.principles-intro p {
    color: var(--or-pale);
    opacity: 0.8;
    max-width: 600px;
    margin: 0 auto;
}

/* === MOBILE : ACCORDÉON CLASSIQUE === */
.accordion-visual {
    margin-bottom: var(--spacing-xxl);
}

.principle-column {
    background-color: var(--or-pale);
    margin-bottom: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--ombre-douce);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.principle-column h3 {
    padding: var(--spacing-lg);
    color: var(--ambre-fonce);
    margin: 0;
    position: relative;
}

.principle-column h3::after {
    content: '+';
    position: absolute;
    right: var(--spacing-lg);
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: var(--orange-sanguine);
    transition: var(--transition-smooth);
}

.principle-column.is-active h3::after {
    content: '−';
    transform: translateY(-50%) rotate(180deg);
}

.principle-column:hover {
    transform: translateY(-2px);
    box-shadow: var(--lueur-doree);
}

.principle-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.principle-content p {
    padding: 0 var(--spacing-lg) var(--spacing-lg);
    color: var(--ambre-fonce);
    opacity: 0.8;
    margin: 0;
}

/* === DESKTOP : ONGLETS CÔTE À CÔTE === */
.principles-titles,
.principle-display {
    display: none; /* Masqués par défaut sur mobile */
}

/* === CARTE ARTICLE VEDETTE === */
.featured-article-card {
    background-color: var(--or-pale);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--ombre-douce);
    overflow: hidden;
    transition: var(--transition-smooth);
}

.featured-article-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--lueur-doree);
}

.featured-article-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.article-content {
    padding: var(--spacing-lg);
}

.article-content h4 {
    color: var(--ambre-fonce);
    margin-bottom: var(--spacing-sm);
}

.article-content p {
    color: var(--ambre-fonce);
    opacity: 0.8;
    margin-bottom: var(--spacing-lg);
}

.article-link {
    color: var(--orange-sanguine);
    font-weight: 600;
    text-decoration: none;
}

.article-link:hover {
    color: var(--peche-douce);
}

/* ======================================================= */
/* === ACTE 5 : FAQ (#stellar-dialogue)               === */
/* ======================================================= */

#stellar-dialogue {
    padding: var(--spacing-xxl) var(--spacing-md);
    position: relative;
    background-image: var(--background-image-url);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

#stellar-dialogue::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(92, 46, 53, 0.85);
    z-index: 1;
}

.faq-container {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.faq-container h2 {
    color: var(--or-pale);
    margin-bottom: var(--spacing-lg);
    text-shadow: var(--lueur-doree);
}

.faq-container > p {
    color: var(--or-pale);
    opacity: 0.9;
    margin-bottom: var(--spacing-xxl);
}

.faq-cards-container {
    text-align: left;
}

.faq-card {
    background-color: var(--bleu-nuit);
    margin-bottom: var(--spacing-md);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--ombre-douce);
    overflow: hidden;
    transition: var(--transition-smooth);
}

.faq-card:hover {
    box-shadow: var(--lueur-doree);
}

.faq-card h4 {
    padding: var(--spacing-lg);
    color: var(--or-pale);
    margin: 0;
    cursor: pointer;
    position: relative;
    transition: var(--transition-smooth);
}

.faq-card h4::after {
    content: '+';
    position: absolute;
    right: var(--spacing-lg);
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    color: var(--orange-sanguine);
    transition: var(--transition-smooth);
}

.faq-card.is-open h4::after {
    content: '−';
    transform: translateY(-50%) rotate(180deg);
}

.faq-card h4:hover {
    background-color: rgba(240, 162, 123, 0.1);
}

/* === ANIMATION FAQ AVEC GRID === */
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-card.is-open .faq-answer {
    grid-template-rows: 1fr;
}

.faq-answer-content {
    overflow: hidden;
}

.faq-answer-content p {
    padding: 0 var(--spacing-lg) var(--spacing-lg);
    color: var(--or-pale);
    opacity: 0.8;
    margin: 0;
}

/* ======================================================= */
/* === ACTE 6 : SIGNATURE (#final-signature)          === */
/* ======================================================= */

#final-signature {
    padding: var(--spacing-xxl) var(--spacing-md);
    background: var(--degrade-principal);
    text-align: center;
}

.signature-content {
    max-width: 700px;
    margin: 0 auto;
}

.signature-content h2 {
    color: var(--or-pale);
    margin-bottom: var(--spacing-lg);
}

.signature-content p {
    color: var(--or-pale);
    opacity: 0.9;
    margin-bottom: var(--spacing-xl);
}

#hand-animation-container {
    margin: var(--spacing-xl) 0;
}

.hand-drawing-svg {
    width: 200px;
    height: 100px;
    color: var(--orange-sanguine);
}

.cta-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: center;
}

/* ======================================================= */
/* === RESPONSIVE DESIGN - TABLETTE (768px+)          === */
/* ======================================================= */

@media (min-width: 768px) {
    :root {
        --spacing-xl: 4rem;
        --spacing-xxl: 6rem;
    }
    
    .hero-logo {
        font-size: 4rem;
    }
    
    .hero-slogan {
        font-size: 1.4rem;
    }
    
    .hero-intro-text {
        font-size: 1.1rem;
    }
    
    /* === PROMESSE EN DEUX COLONNES === */
    .promise-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xxl);
    }
    
    /* === BOUTONS CTA EN LIGNE === */
    .cta-buttons {
        flex-direction: row;
        justify-content: center;
    }
}

/* ======================================================= */
/* === RESPONSIVE DESIGN - DESKTOP (992px+)           === */
/* ======================================================= */

@media (min-width: 992px) {
    #hero-birth,
    #our-promise,
    #orbital-journey,
    #principles-gallery,
    #stellar-dialogue,
    #final-signature {
        padding: 8rem 2rem;
    }
    
    /* === PRINCIPES : PASSAGE EN MODE ONGLETS === */
    .accordion-visual {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: var(--spacing-xxl);
        align-items: start;
    }
    
    /* Masquer le mode accordéon mobile */
    .principle-column {
        display: none;
    }
    
    /* Afficher les conteneurs desktop */
    .principles-titles,
    .principle-display {
        display: block;
    }
    
    .principles-titles .principle-column {
        display: block;
        margin-bottom: var(--spacing-sm);
        cursor: pointer;
        transition: var(--transition-smooth);
    }
    
    .principles-titles .principle-column h3::after {
        display: none;
    }
    
    .principles-titles .principle-column.is-active {
        background: var(--degrade-rayons);
        transform: translateY(-2px);
        box-shadow: var(--lueur-doree);
    }
    
    .principles-titles .principle-column.is-active h3 {
        color: white;
    }
    
    .principle-display {
        background-color: var(--or-pale);
        border-radius: var(--border-radius-lg);
        padding: var(--spacing-xl);
        box-shadow: var(--ombre-douce);
        min-height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .principle-display .principle-content {
        display: none;
        max-height: none;
        text-align: center;
    }
    
    .principle-display .principle-content.is-active {
        display: block;
    }
    
    .principle-display .principle-content p {
        padding: 0;
        font-size: 1.1rem;
        line-height: 1.7;
    }
}

/* ======================================================= */
/* === RESPONSIVE DESIGN - LARGE DESKTOP (1200px+)    === */
/* ======================================================= */

@media (min-width: 1200px) {
    .hero-logo {
        font-size: 5rem;
    }
    
    .hero-slogan {
        font-size: 1.6rem;
    }
    
    h2 {
        font-size: 2.5rem;
    }
    
    /* === PROMESSE AVEC ESPACEMENTS GÉNÉREUX === */
    .promise-grid {
        gap: 4rem;
    }
    
    .promise-text-container p {
        font-size: 1.2rem;
    }
}

/* ======================================================= */
/* === ANIMATIONS & TRANSITIONS PRÉPARÉES POUR JS    === */
/* ======================================================= */

/* === ÉTATS INITIAL DES SECTIONS (POUR GSAP) === */
section {
    opacity: 0;
    transform: translateY(40px);
}

section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* === ÉTATS POUR LES ANIMATIONS GSAP === */
.principle-column.is-active,
.faq-card.is-open,
.hero-content > * {
    /* États gérés par GSAP et les transitions CSS */
}

/* ======================================================= */
/* === AMÉLIORATIONS UX & ACCESSIBILITÉ               === */
/* ======================================================= */

/* === FOCUS VISIBLE POUR L'ACCESSIBILITÉ === */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.principle-column:focus-visible,
.faq-card h4:focus-visible {
    outline: 2px solid var(--orange-sanguine);
    outline-offset: 2px;
}

/* === PRÉFÉRENCE POUR LES ANIMATIONS RÉDUITES === */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .hand-drawing-svg * {
        animation: none !important;
    }
}

/* === AMÉLIORATION DU CONTRASTE === */
@media (prefers-contrast: high) {
    :root {
        --ambre-fonce: #1A1A1A;
        --orange-sanguine: #E6643D;
        --ombre-douce: 0 8px 32px rgba(0, 0, 0, 0.5);
    }
}

/* ======================================================= */
/* === FIN DU FICHIER - PRÊT POUR L'ATELIER ORGANIQUE === */
/* ======================================================= */