/* =============================================================================
   DIVI HORIZONTAL CHILD — horizontal-nav.css
   Fichier : css/horizontal-nav.css

   Architecture :
   1. Reset & base
   2. Rail horizontal (.hz-track)
   3. Panels (.hz-panel)
   4. Header Divi fixe
   5. Navigation dots
   6. Boutons prev/next
   7. Labels de section
   8. Animations de contenu
   9. États de transition
   10. Responsive (mobile = scroll vertical normal)
   ============================================================================= */


/* ── 1. RESET & BASE ──────────────────────────────────────────────────────── */

html.divi-horizontal,
html.divi-horizontal body {
    overflow: hidden;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Empêche le layout Divi de créer un scroll vertical parasite */
html.divi-horizontal #page-container,
html.divi-horizontal #main-content {
    overflow: hidden;
    height: 100vh;
}

html.divi-horizontal #et-main-area {
    height: 100vh;
    overflow: hidden;
}


/* ── 2. RAIL HORIZONTAL ──────────────────────────────────────────────────── */

/**
 * .hz-track est créé dynamiquement par le JS.
 * Il contient tous les .hz-panel côte à côte.
 * La translation X est appliquée par le JS via style.transform.
 */
.hz-track {
    display: flex;
    flex-direction: row;
    height: 100vh;
    will-change: transform;
    /* La transition est overridée par le JS selon le contexte */
    transition: transform 0.75s cubic-bezier(0.77, 0, 0.175, 1);
}


/* ── 3. PANELS ───────────────────────────────────────────────────────────── */

.hz-panel {
    position: relative;
    flex-shrink: 0;
    width: 100vw;
    min-width: 100vw;
    height: 100vh;
    overflow-y: auto;       /* scroll interne si le contenu dépasse */
    overflow-x: hidden;
    box-sizing: border-box;
    scrollbar-width: thin;  /* Firefox */
}

/* Scroll interne discret */
.hz-panel::-webkit-scrollbar {
    width: 4px;
}
.hz-panel::-webkit-scrollbar-track {
    background: transparent;
}
.hz-panel::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
}

/* Les sections Divi dans les panels occupent au minimum 100% */
.hz-panel > .et_pb_section {
    min-height: 100vh;
    width: 100%;
    margin: 0 !important;
}


/* ── 4. HEADER DIVI FIXE ────────────────────────────────────────────────── */

html.divi-horizontal #main-header,
html.divi-horizontal .et_header_style_centered,
html.divi-horizontal .et_header_style_left,
html.divi-horizontal .et_header_style_split {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 10000 !important;
}

/* Décale le contenu du premier panel pour ne pas être sous le header */
html.divi-horizontal .hz-panel:first-child > .et_pb_section:first-child {
    padding-top: var(--header-height, 80px);
}


/* ── 5. NAVIGATION DOTS ──────────────────────────────────────────────────── */

#hz-nav-dots {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 9999;
    padding: 8px 18px;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.1);
}

.hz-dot {
    appearance: none;
    -webkit-appearance: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    border: 2px solid rgba(255,255,255,0.6);
    cursor: pointer;
    padding: 0;
    transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.hz-dot:hover {
    background: rgba(255,255,255,0.65);
}

.hz-dot.active {
    background: #ffffff;
    border-color: #ffffff;
    transform: scale(1.4);
}

/* Variante pour panels à fond clair — ajoute la classe .hz-light-bg sur la section Divi */
.hz-panel.hz-light-bg ~ * #hz-nav-dots .hz-dot,
.hz-dots-dark .hz-dot {
    background: rgba(0,0,0,0.2);
    border-color: rgba(0,0,0,0.4);
}
.hz-dots-dark .hz-dot.active {
    background: #333333;
    border-color: #333333;
}


/* ── 6. BOUTONS PREV / NEXT ──────────────────────────────────────────────── */

#hz-btn-prev,
#hz-btn-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.5);
    background: rgba(0,0,0,0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
    user-select: none;
    transition: background 0.25s ease, transform 0.25s ease, opacity 0.3s ease;
}

#hz-btn-prev { left: 18px; }
#hz-btn-next { right: 18px; }

#hz-btn-prev:hover,
#hz-btn-next:hover {
    background: rgba(0,0,0,0.4);
    border-color: rgba(255,255,255,0.8);
    transform: translateY(-50%) scale(1.1);
}

#hz-btn-prev svg,
#hz-btn-next svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* État masqué (premier/dernier panel) */
#hz-btn-prev.hz-hidden,
#hz-btn-next.hz-hidden {
    opacity: 0;
    pointer-events: none;
}


/* ── 7. LABELS DE SECTION ────────────────────────────────────────────────── */

.hz-section-label {
    position: absolute;
    bottom: 70px;           /* au-dessus des dots */
    right: 28px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    pointer-events: none;
    z-index: 100;
    transition: opacity 0.3s ease;
}

/* Compteur de position (ex: "03 / 07") */
.hz-position-counter {
    position: fixed;
    bottom: 28px;
    right: 28px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.5);
    z-index: 9999;
    font-variant-numeric: tabular-nums;
}


/* ── 8. ANIMATIONS DE CONTENU ────────────────────────────────────────────── */

/* État initial : invisible + décalé vers le bas */
html.divi-horizontal .hz-panel .et_pb_text_inner,
html.divi-horizontal .hz-panel .et_pb_blurb_description,
html.divi-horizontal .hz-panel .et_pb_module_header,
html.divi-horizontal .hz-panel .et_pb_button_wrapper {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity  0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Délais en cascade pour chaque enfant */
html.divi-horizontal .hz-panel .et_pb_row .et_pb_column:nth-child(1) .et_pb_text_inner,
html.divi-horizontal .hz-panel .et_pb_row .et_pb_column:nth-child(1) .et_pb_module_header {
    transition-delay: 0.1s;
}
html.divi-horizontal .hz-panel .et_pb_row .et_pb_column:nth-child(2) .et_pb_text_inner,
html.divi-horizontal .hz-panel .et_pb_row .et_pb_column:nth-child(2) .et_pb_module_header {
    transition-delay: 0.2s;
}
html.divi-horizontal .hz-panel .et_pb_row .et_pb_column:nth-child(3) .et_pb_text_inner,
html.divi-horizontal .hz-panel .et_pb_row .et_pb_column:nth-child(3) .et_pb_module_header {
    transition-delay: 0.3s;
}

/* État actif : visible */
html.divi-horizontal .hz-panel.hz-active .et_pb_text_inner,
html.divi-horizontal .hz-panel.hz-active .et_pb_blurb_description,
html.divi-horizontal .hz-panel.hz-active .et_pb_module_header,
html.divi-horizontal .hz-panel.hz-active .et_pb_button_wrapper {
    opacity: 1;
    transform: translateY(0);
}


/* ── 9. ÉTATS DE TRANSITION ──────────────────────────────────────────────── */

/* Curseur wait pendant la transition */
html.divi-horizontal.hz-transitioning {
    cursor: wait;
}

/* Overlay de progression (barre en bas, optionnel) */
#hz-progress-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(255,255,255,0.6);
    z-index: 99999;
    transition: width 0.75s cubic-bezier(0.77, 0, 0.175, 1);
}


/* ── 10. RESPONSIVE ──────────────────────────────────────────────────────── */

/**
 * Sous 980px → on réactive le comportement vertical normal de Divi.
 * Tout ce qui a été mis en place par le JS est neutralisé côté CSS.
 */
@media (max-width: 980px) {

    html.divi-horizontal,
    html.divi-horizontal body {
        overflow: auto !important;
        height: auto !important;
    }

    html.divi-horizontal #page-container,
    html.divi-horizontal #main-content,
    html.divi-horizontal #et-main-area {
        overflow: visible !important;
        height: auto !important;
    }

    .hz-track {
        display: block !important;
        transform: none !important;
        transition: none !important;
        height: auto !important;
    }

    .hz-panel {
        width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    .hz-panel > .et_pb_section {
        min-height: auto !important;
    }

    #hz-nav-dots,
    #hz-btn-prev,
    #hz-btn-next,
    .hz-section-label,
    .hz-position-counter,
    #hz-progress-bar {
        display: none !important;
    }
	
	@media (max-width: 980px) {
    body {
        overflow-y: auto !important;
    }
}

    /* Réactive les animations Divi natives sur mobile */
    html.divi-horizontal .hz-panel .et_pb_text_inner,
    html.divi-horizontal .hz-panel .et_pb_blurb_description,
    html.divi-horizontal .hz-panel .et_pb_module_header,
    html.divi-horizontal .hz-panel .et_pb_button_wrapper {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    html.divi-horizontal #main-header {
        position: relative !important;
    }

    html.divi-horizontal .hz-panel:first-child > .et_pb_section:first-child {
        padding-top: 0 !important;
    }
}