/*
Theme Name: Portfolio Creative
Theme URI: https://votresite.com
Author: Vous
Description: Thème portfolio créatif — fond clair, footer sombre
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: portfolio-creative
*/

/* ═══════════════════════════════════════════════════════════════════════════
   style.css — Personnalisations visuelles (modifie ici librement)
   La logique structurelle reste dans assets/css/
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Couleurs de fond des panels scroll horizontal ───────────────────────── */
/* Sur fond clair, les panels gardent des fonds sombres pour le contraste */
/*.h-panel--photo  { background: #2a2522; }
.h-panel--web    { background: #1e2a2e; }
.h-panel--music  { background: #1a1e2e; }
.h-panel--design { background: #252218; }
*/
.h-panel:nth-child(odd) {
	background: #1a1e2e; 
}
.h-panel:nth-child(even) {
	background: #1e2a2e; 
}
/* ── Typographie des panels ──────────────────────────────────────────────── */
.h-panel h1,
.h-panel h2,
.h-panel h3 {
    font-family: var(--font-display);
    font-size: clamp(4rem, 12vw, 12rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--color-white);
}

/* ── Lien "Explorer" dans les panels ────────────────────────────────────── */
.h-panel__link {
    display: inline-block;
    margin-top: 2rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255,255,255,0.55);
    border-bottom: 1px solid rgba(255,255,255,0.25);
    padding-bottom: 0.25rem;
    transition: color 0.2s, border-color 0.2s;
}
.h-panel__link:hover { color: white; border-color: white; }

/* ── Overlay hero slider ─────────────────────────────────────────────────── */
.hero-slider__overlay {
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.08) 0%,
        rgba(0,0,0,0.3)  50%,
        rgba(0,0,0,0.72) 100%
    );
}

/* ── Typographie messages hero slider ────────────────────────────────────── */
.hero-slider__msg {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5.5vw, 5rem);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 24px rgba(0,0,0,0.35);
}

/* ── Overlay vidéo Apple ─────────────────────────────────────────────────── */
.scroll-video__overlay {
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.1)  0%,
        rgba(0,0,0,0.3)  50%,
        rgba(0,0,0,0.55) 100%
    );
    pointer-events: none;
}

/* ── Typographie phrases vidéo Apple ────────────────────────────────────── */
.scroll-video__phrase {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 4.5rem);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

/* ── Archive hero (titre en haut des pages liste) ────────────────────────── */
.archive-hero {
    padding: calc(var(--header-h) + var(--space-lg)) var(--container-pad) var(--space-lg);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
}

/* ── Couleur accent du bouton primary ────────────────────────────────────── */
.btn--primary {
    background: var(--color-accent);
    color: var(--color-white);
}
.btn--primary:hover {
    background: var(--color-accent-2);
}

/* ── Timeline : couleur de la ligne et des marqueurs ────────────────────── */
.timeline__line span { background: var(--color-accent); }
.timeline__icon,
.timeline__num {
    color: var(--color-accent);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

/* ── Section title sur fond clair ────────────────────────────────────────── */
.section-title { color: var(--color-text); }

/* ── Techniques tags ─────────────────────────────────────────────────────── */
.techniques-list__item {
    border-color: var(--color-border);
    color: var(--color-text-muted);
    background: var(--color-surface);
}

/* ── Page d'accueil : logo 600px dès le CSS, centré verticalement ────────────
   body.home = classe WP auto sur la page d'accueil statique
   Pas de FOUC : le logo est déjà grand avant que JS s'exécute */
body.home .site-header__logo-wrap .custom-logo,
body.home .site-header__logo-wrap img {
    width: 600px;
    max-width: 80vw;
}

/* Header plein écran au départ sur home */
body.home .site-header {
    min-height: 100svh;
    align-items: flex-start; /* inner en haut, pas centré verticalement */
    background: var(--color-bg, #f8f6f2);
}

/* Logo centré H+V dans le viewport (indépendant du header) */
body.home .site-header__logo-wrap {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}