/* ═══════════════════════════════════════════════════════════════
   La Charbonnière du Vercors — Hero v5.0
   Optimisé : will-change, prefers-reduced-motion, dvh, perf LCP
   ═══════════════════════════════════════════════════════════════ */

/* ── Section hero ────────────────────────────────────────────── */
#chr-hero.chr-hero {
    position         : relative;
    width            : 100%;
    background-color : var(--c-nav, #4A7C59);
    display          : flex;
    align-items      : center;
    overflow         : hidden;
    margin-top       : 0;
    box-sizing       : border-box;
    /* Empêche le CLS (Cumulative Layout Shift) */
    contain          : layout style;
}

.chr-hero--align-left   { justify-content: flex-start; text-align: left; }
.chr-hero--align-center { justify-content: center;     text-align: center; }
.chr-hero--align-right  { justify-content: flex-end;   text-align: right; }

/* ── Fond image générique ────────────────────────────────────── */
.chr-hero__bg {
    position           : absolute;
    inset              : 0;
    background-size    : cover;
    background-repeat  : no-repeat;
    z-index            : 0;
    /* Optimisation GPU pour transitions */
    will-change        : transform, opacity;
}
.chr-hero__bg--fallback {
    background-color   : var(--c-nav, #4A7C59);
}

/* ── Overlay sombre ──────────────────────────────────────────── */
.chr-hero__overlay {
    position       : absolute;
    inset          : 0;
    z-index        : 2;
    pointer-events : none;
}

/* ── Contenu ─────────────────────────────────────────────────── */
.chr-hero__content {
    position   : relative;
    z-index    : 5;
    max-width  : 900px;
    padding    : 2.5rem 3rem;
    width      : 100%;
    /* Apparition douce du texte */
    animation  : chr-content-in 0.8s ease 0.3s both;
}

/* Voile de lisibilité : dégradé doux centré derrière le texte, pour garantir
   un bon contraste même sur une photo de fond claire ou chargée.
   Purement décoratif, n'assombrit pas toute l'image comme le fait l'overlay. */
.chr-hero__content::before {
    content       : "";
    position      : absolute;
    inset         : -10% -5%;
    z-index       : -1;
    background    : radial-gradient(ellipse at center,
                      rgba(0,0,0,.45) 0%,
                      rgba(0,0,0,.28) 45%,
                      rgba(0,0,0,0)   75%);
    pointer-events: none;
}
/* Désactivable proprement si le rendu est déjà assez contrasté */
.chr-hero--no-scrim .chr-hero__content::before { display: none; }
@keyframes chr-content-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.chr-hero--align-left  .chr-hero__content { padding-left:  clamp(2rem, 8vw, 6rem); }
.chr-hero--align-right .chr-hero__content { padding-right: clamp(2rem, 8vw, 6rem); }

.chr-hero__title {
    font-weight  : 700;
    line-height  : 1.12;
    margin       : 0 0 1rem;
}
.chr-hero__subtitle {
    line-height  : 1.55;
    margin       : 0 0 1.75rem;
    opacity      : 0.93;
    text-shadow  : 0 1px 5px rgba(0,0,0,.35);
}

/* ── Boutons CTA ─────────────────────────────────────────────── */
.chr-hero__btn {
    display         : inline-block;
    padding         : .9rem 2.4rem;
    border-radius   : var(--radius, 4px);
    font-weight     : 700;
    font-size       : 1rem;
    text-transform  : uppercase;
    letter-spacing  : .07em;
    text-decoration : none !important;
    transition      : background .25s, transform .2s, border-color .25s, box-shadow .25s;
    box-shadow      : 0 4px 16px rgba(0,0,0,.25);
}
.chr-hero__btn:focus-visible {
    outline        : 2px solid #fff;
    outline-offset : 3px;
    box-shadow     : 0 4px 16px rgba(0,0,0,.25), 0 0 0 5px rgba(74,124,89,0.5);
}

.chr-hero__btn--solid {
    background : var(--c-accent, #4A7C59);
    color      : #fff !important;
    border     : 2px solid transparent;
}
.chr-hero__btn--solid:hover {
    background  : var(--c-accent-dark, #355C41) !important;
    color       : #fff !important;
    transform   : translateY(-2px);
}

.chr-hero__btn--outline {
    background   : transparent;
    color        : #fff !important;
    border       : 2px solid rgba(255,255,255,.85);
    box-shadow   : none;
}
.chr-hero__btn--outline:hover {
    background   : rgba(255,255,255,.15) !important;
    border-color : #fff;
    color        : #fff !important;
}

.chr-hero__btn--ghost {
    background     : rgba(255,255,255,.18);
    color          : #fff !important;
    border         : 1px solid rgba(255,255,255,.4);
    backdrop-filter: blur(4px);
    box-shadow     : none;
}
.chr-hero__btn--ghost:hover {
    background : rgba(255,255,255,.28) !important;
    color      : #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
   FOND VIDÉO
   ═══════════════════════════════════════════════════════════════ */
.chr-hero__video {
    position       : absolute;
    inset          : 0;
    width          : 100%;
    height         : 100%;
    object-fit     : cover;
    object-position: center center;
    z-index        : 0;
    pointer-events : none;
    /* GPU compositing */
    will-change    : transform;
}
.chr-hero__video::-webkit-media-controls { display: none !important; }

/* ── Fond YouTube (iframe) ──────────────────────────────────────
   Une iframe YouTube conserve un ratio 16/9 fixe : on la surdimensionne
   et on la centre pour qu'elle recouvre le hero sans bandes noires.
   Les dimensions exactes sont calculées en JS d'après la taille réelle du
   conteneur (les unités vw/vh ne conviennent pas : le hero n'occupe pas
   forcément toute la fenêtre — barre d'admin, hauteur personnalisée…).
   Les valeurs ci-dessous servent de repli avant l'exécution du JS. */
.chr-hero__video-wrap {
    position      : absolute;
    inset         : 0;
    overflow      : hidden;
    z-index       : 0;
    pointer-events: none;
    background    : #000;
}
.chr-hero__video--yt {
    position      : absolute;
    top           : 50%;
    left          : 50%;
    transform     : translate(-50%, -50%);
    width         : 100%;
    height        : 100%;
    border        : 0;
    pointer-events: none;
}

/* Voile de démarrage : masque le logo YouTube et le chargement initial,
   puis disparaît en fondu une fois la lecture lancée. */
.chr-hero__yt-cover {
    position      : absolute;
    inset         : 0;
    z-index       : 1;
    background-size    : cover;
    background-position: center center;
    background-color   : #1a1a1a;
    opacity       : 1;
    transition    : opacity .6s ease;
    pointer-events: none;
}
.chr-hero__yt-cover.is-hidden { opacity: 0; }

/* ═══════════════════════════════════════════════════════════════
   EFFETS IMAGE
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Zoom lent (Ken Burns) ──────────────────────────────── */
.chr-hero--fx-zoom .chr-hero__bg {
    animation: chr-ken-burns 10s ease forwards;
    will-change: transform;
}
@keyframes chr-ken-burns {
    from { transform: scale(1);    }
    to   { transform: scale(1.08); }
}

/* ── 2. Fondu à l'entrée ───────────────────────────────────── */
.chr-hero--fx-fade {
    animation: chr-fade-in 1.4s ease both;
}
@keyframes chr-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── 3. Zoom + fondu ───────────────────────────────────────── */
.chr-hero--fx-zoom_fade .chr-hero__bg {
    animation: chr-ken-burns 10s ease forwards;
    will-change: transform;
}
.chr-hero--fx-zoom_fade {
    animation: chr-fade-in 1.4s ease both;
}

/* ── 4. Parallaxe ──────────────────────────────────────────── */
.chr-hero--fx-parallax .chr-hero__bg { display: none; }
.chr-hero__parallax-img {
    position          : absolute;
    inset             : -20% 0;
    background-size   : cover;
    background-repeat : no-repeat;
    z-index           : 1;
    will-change       : transform;
}

/* ── 5. Rideau (reveal) ────────────────────────────────────── */
.chr-hero__reveal {
    position         : absolute;
    inset            : 0;
    background       : #ffffff;
    z-index          : 8;
    transform-origin : right center;
    animation        : chr-reveal 1.2s cubic-bezier(.77,0,.18,1) .1s both;
    pointer-events   : none;
    will-change      : transform;
}
@keyframes chr-reveal {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* ── 6. Fondu bas ──────────────────────────────────────────── */
.chr-hero__blur-edge {
    position       : absolute;
    left: 0; right: 0; bottom: 0;
    height         : 45%;
    z-index        : 4;
    pointer-events : none;
}

/* ── 7. Fondu d'entrée vidéo ───────────────────────────────── */
.chr-hero--fx-video {
    animation: chr-fade-in .6s ease both;
}

/* ── Indicateur de scroll ──────────────────────────────────── */
.chr-hero__scroll-hint {
    position   : absolute;
    bottom     : 2rem;
    left       : 50%;
    transform  : translateX(-50%);
    z-index    : 6;
    animation  : chr-bounce 2s ease infinite 2s;
    opacity    : 0.7;
    color      : #fff;
    transition : opacity 0.3s;
}
.chr-hero__scroll-hint svg {
    width  : 28px;
    height : 28px;
    filter : drop-shadow(0 1px 3px rgba(0,0,0,.4));
}
@keyframes chr-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0);    }
    50%      { transform: translateX(-50%) translateY(8px);  }
}

/* ── Vague SVG ──────────────────────────────────────────────── */
.chr-hero__wave {
    position       : absolute;
    bottom         : -1px;
    left: 0; right: 0;
    width          : 100%;
    overflow       : hidden;
    line-height    : 0;
    z-index        : 6;
    pointer-events : none;
}
.chr-hero__wave svg { display: block; width: 100%; height: auto; }

/* ═══════════════════════════════════════════════════════════════
   HEADER TRANSPARENT SUR LE HERO
   ═══════════════════════════════════════════════════════════════ */
body.chr-has-hero #chr-header-spacer,
body.chr-has-hero .charbonniere-header-spacer { display: none !important; }

body.chr-has-hero #chr-header:not(.scrolled),
body.chr-has-hero .et_header_style_left.et-fixed-header,
body.chr-has-hero #main-header:not(.et-fixed-header) {
    background : transparent !important;
    box-shadow : none !important;
}

#chr-header { transition: background .35s ease, box-shadow .35s ease; }

body.chr-has-hero #chr-header:not(.scrolled) .nav-link,
body.chr-has-hero #chr-header:not(.scrolled) .nav-item > a,
body.chr-has-hero #chr-header:not(.scrolled) .et_menu_speed,
body.chr-has-hero #chr-header:not(.scrolled) #et-top-navigation nav ul li a {
    color : #ffffff !important;
}

body.chr-has-hero #chr-header:not(.scrolled) .chr-logo img {
    filter: drop-shadow(0 0 6px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(0,0,0,.4));
}

body.chr-has-hero #chr-header.scrolled {
    background : var(--c-header-bg, #ffffff) !important;
    box-shadow : 0 2px 12px rgba(0,0,0,.1) !important;
}
body.chr-has-hero #chr-header.scrolled .chr-logo img { filter: none; }
body.chr-has-hero #chr-header.scrolled .nav-link,
body.chr-has-hero #chr-header.scrolled .nav-item > a {
    color : var(--c-nav, #4A7C59) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .chr-hero__content {
        padding    : 2rem 1.25rem !important;
        max-width  : 100%;
    }
    .chr-hero__btn {
        padding    : .75rem 1.75rem !important;
        font-size  : .9rem !important;
        /* Touch-target minimum 48px */
        min-height : 48px;
        display    : inline-flex;
        align-items: center;
        justify-content: center;
    }
    .chr-hero__title    { font-size: clamp(1.75rem, 8vw, 2.75rem) !important; }
    .chr-hero__subtitle { font-size: clamp(.95rem, 4vw, 1.2rem)   !important; }

    .chr-hero__video {
        object-position : center center;
    }
    .chr-hero__parallax-img {
        background-attachment : scroll !important;
    }

    /* Header mobile transparent au-dessus du hero */
    body.chr-has-hero #chr-header:not(.scrolled) {
        background : linear-gradient(to bottom, rgba(0,0,0,.35) 0%, transparent 100%) !important;
    }
    body.chr-has-hero #chr-header.scrolled {
        background : var(--c-header-bg, #ffffff) !important;
    }

    /* Masquer l'indicateur de scroll sur mobile */
    .chr-hero__scroll-hint {
        bottom : 1.2rem;
    }
    .chr-hero__scroll-hint svg {
        width  : 24px;
        height : 24px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PREFERS-REDUCED-MOTION
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .chr-hero__bg,
    .chr-hero__parallax-img,
    .chr-hero__video,
    .chr-hero__reveal,
    .chr-hero__content,
    .chr-hero__scroll-hint,
    .chr-hero--fx-fade,
    .chr-hero--fx-video,
    .chr-hero--fx-zoom .chr-hero__bg,
    .chr-hero--fx-zoom_fade .chr-hero__bg,
    .chr-hero--fx-zoom_fade {
        animation: none !important;
        transition: none !important;
        will-change: auto !important;
    }
    .chr-hero__content {
        opacity: 1 !important;
        transform: none !important;
    }
    /* Pas de parallaxe si reduced-motion */
    .chr-hero__parallax-img {
        inset: 0 !important;
        transform: none !important;
    }
    .chr-hero__scroll-hint { display: none; }
    /* Vidéo : afficher le poster sans lecture */
    .chr-hero__video,
    .chr-hero__video-wrap {
        display: none !important;
    }
    .chr-hero--fx-video .chr-hero__bg--poster {
        display: block !important;
    }
}