/* =============================================================
   VALISEOFILMS — global.css
   Styles globaux du child theme (variables, reset partiel,
   utilitaires, composants partagés)
============================================================= */

/* ---------------------------------------------------------------
   1. VARIABLES CSS
--------------------------------------------------------------- */
:root {
    /* Couleurs */
    --vs-orange:      #fb8500;
    --vs-orange-dark: #e07600;
    --vs-dark:        #0d0d0d;
    --vs-dark-mid:    #1a1a1a;
    --vs-light:       #f9f9f9;
    --vs-white:       #ffffff;
    --vs-text-dark:   #1a1a1a;
    --vs-text-light:  #f0f0f0;
    --vs-text-muted:  #888888;
    --vs-glass-bg:    rgba(255, 255, 255, 0.06);
    --vs-glass-border: rgba(255, 255, 255, 0.12);

    /* Typographie */
    --vs-font-title:  'Oswald', sans-serif;
    --vs-font-body:   'Lato', sans-serif;

    /* Tailles */
    --vs-h1-desktop:  76px;
    --vs-h1-mobile:   40px;
    --vs-h2-desktop:  48px;
    --vs-h2-mobile:   32px;
    --vs-h3:          22px;
    --vs-body:        16px;
    --vs-label:       13px;

    /* Espacements */
    --vs-section-py:       96px;
    --vs-section-py-sm:    56px;
    --vs-container-max:    1200px;
    --vs-container-px:     40px;

    /* Effets */
    --vs-radius-card:  16px;
    --vs-radius-btn:   8px;
    --vs-shadow:       0 8px 32px rgba(0, 0, 0, 0.24);
    --vs-transition:   0.25s ease;
}

/* ---------------------------------------------------------------
   2. RESET & BASE
   box-sizing scopé UNIQUEMENT au template page-secteur
   pour ne pas interférer avec le layout global Astra
   (header, footer, autres pages).
--------------------------------------------------------------- */
.vs-page-secteur *,
.vs-page-secteur *::before,
.vs-page-secteur *::after {
    box-sizing: border-box;
}

/* Éviter les conflits avec Astra — on cible nos propres classes */
.vs-page-secteur {
    font-family: var(--vs-font-body);
    font-size: var(--vs-body);
    line-height: 1.7;
    color: var(--vs-text-dark);
    text-align: left; /* Astra peut forcer text-align: justify — on annule */
}

/* Neutraliser le justify Astra sur tous les paragraphes du template */
.vs-page-secteur p,
.page-template-page-secteur p,
.page-template-page-secteur .entry-content p {
    text-align: left;
}

.vs-page-secteur *:focus-visible {
    outline: 2px solid var(--vs-orange);
    outline-offset: 3px;
}

/* ---------------------------------------------------------------
   3. LAYOUT — CONTAINER
   Fond pleine largeur sur la section parente,
   contenu centré avec padding horizontal garanti.
--------------------------------------------------------------- */
.vs-container {
    width: 100%;
    max-width: var(--vs-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--vs-container-px);
    padding-right: var(--vs-container-px);
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .vs-container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ---------------------------------------------------------------
   4. SECTIONS — FOND
--------------------------------------------------------------- */
.vs-section-dark {
    background-color: var(--vs-dark);
    color: var(--vs-text-light);
}

.vs-section-light {
    background-color: var(--vs-light);
    color: var(--vs-text-dark);
}

/* ---------------------------------------------------------------
   5. TITRES DE SECTION
--------------------------------------------------------------- */
.vs-section-title {
    font-family: var(--vs-font-title);
    font-weight: 500;
    font-size: var(--vs-h2-desktop);
    line-height: 1.1;
    margin: 0 0 48px;
    color: var(--vs-text-dark);
}

.vs-section-title--light {
    color: var(--vs-text-light);
}

.vs-section-title--centered {
    text-align: center;
}

@media (max-width: 768px) {
    .vs-section-title {
        font-size: var(--vs-h2-mobile);
        margin-bottom: 32px;
    }
}

/* ---------------------------------------------------------------
   6. BOUTONS
--------------------------------------------------------------- */
.vs-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--vs-font-title);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--vs-radius-btn);
    padding: 14px 32px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background var(--vs-transition), transform var(--vs-transition), border-color var(--vs-transition);
    line-height: 1;
    white-space: nowrap;
}

.vs-btn--primary {
    background: var(--vs-orange);
    color: var(--vs-dark);
    border-color: var(--vs-orange);
}

.vs-btn--primary:hover,
.vs-btn--primary:focus-visible {
    background: var(--vs-orange-dark);
    border-color: var(--vs-orange-dark);
    transform: translateY(-2px);
    color: var(--vs-dark);
}

.vs-btn--ghost {
    background: transparent;
    color: var(--vs-text-light);
    border-color: rgba(255, 255, 255, 0.35);
}

.vs-btn--ghost:hover,
.vs-btn--ghost:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
    color: var(--vs-text-light);
}

.vs-btn--lg {
    font-size: 18px;
    padding: 18px 44px;
}

/* ---------------------------------------------------------------
   7. ANIMATIONS AU SCROLL (IntersectionObserver)
--------------------------------------------------------------- */
.vs-animate {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

.vs-animate--delay-1 { transition-delay: 0.1s; }
.vs-animate--delay-2 { transition-delay: 0.2s; }
.vs-animate--delay-3 { transition-delay: 0.3s; }
.vs-animate--delay-4 { transition-delay: 0.45s; }