/* --- SCROLL CONTAINER --- */
#ea-page-content {
    min-height: 100dvh;
    height: 100dvh;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    background-size: inherit;
    background-position: inherit;
}

/* --- SECTION MAGNETIQUE --- */
.ea-section {
    width:100%;
    min-height:100dvh;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding-top: var(--ea-section-pad-top, var(--ea-section-vspace));
    padding-bottom: var(--ea-section-pad-bottom, var(--ea-section-vspace));
    padding-inline-start: var(--ea-content-offset-left);
    padding-inline-end: var(--ea-pad-inline, var(--ea-pad));
    scroll-snap-align:center;
    scroll-snap-stop:always;
    text-align: left;
    overflow-x: visible;
}

/* --- PORTE EA (fenêtre verticale centrée) --- */
.ea-view {
    height:var(--ea-view-height);
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    max-width: calc(var(--ea-content-max) + var(--ea-content-offset-left) / 3);
    margin-inline-start: calc(var(--ea-content-offset-left) / -3);
    margin-inline-end: auto;
    padding-inline-start: calc(var(--ea-content-offset-left) / 3);
    padding-inline-end: var(--ea-pad-inline);
    text-align: left;
}

/* Container interne */
.ea-section > .ea-container {
    width: min(var(--ea-content-wide, var(--ea-layout-max, 1200px)), 100%);
    max-width: calc(var(--ea-content-wide, var(--ea-layout-max, 1200px)) + var(--ea-content-offset-left) / 3);
    height:var(--ea-view-height);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    margin-inline-start: 0;
    margin-inline-end: auto;
    padding-inline-start: 0;
    padding-inline-end: var(--ea-pad-inline);
    gap: var(--ea-space-sm);
    text-align: left;
}

/* --- PREVIEW / DETAIL MODES --- */
.ea-preview,
.ea-detail {
    width:100%;
    display:flex;
    flex-direction:column;
    gap: clamp(var(--ea-space-sm), 1.6vw, var(--ea-space-md));
    align-items:flex-start;
    max-width: var(--ea-content-max);
    margin-inline-start: 0;
    margin-inline-end: auto;
    text-align: left;
    padding-inline-start: 0;
    padding-inline-end: 0;
}

.ea-detail {
    padding-top: clamp(var(--ea-space-sm), 1.6vw, var(--ea-space-md));
}

.ea-detail[hidden] {
    display:none !important;
}

.ea-section--open {
    padding-inline-start: 0;
}

.ea-section--open .ea-container {
    height:auto;
    min-height:100dvh;
}

.ea-mode-detail .ea-section--open .ea-container {
    height:auto;
    min-height:auto;
}

.ea-section--hidden {
    opacity:0;
    pointer-events:none;
    height:0;
    min-height:0 !important;
    padding:0;
    margin:0;
    overflow:hidden;
}

.ea-section-open,
.ea-section-back {
    display:inline-flex;
    align-items:center;
    gap:0.35rem;
    border:1px solid currentColor;
    background:rgba(255,255,255,var(--ea-alpha-10));
    padding:0.5rem 0.85rem;
    border-radius:999px;
    cursor:pointer;
    text-transform:uppercase;
    letter-spacing:0.04em;
    font-size:0.85rem;
    line-height:1.2;
}

.ea-section-back {
    align-self:flex-start;
    margin-bottom:1rem;
}

.ea-content--detail {
    --ea-left-offset: clamp(2vw, 3vw, 4vw);
    scroll-snap-type:unset;
}

.ea-content--detail#ea-page-content {
    padding:0;
    height:auto;
    min-height:100dvh;
    scroll-snap-type:none;
    width:100%;
}


/* DETAIL: single width/padding contract applied only on section */
.ea-content--detail .ea-section {
    width: 100%;
    min-height: auto;
    height: auto;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: var(--ea-section-pad-top, var(--ea-section-vspace));
    padding-bottom: var(--ea-section-pad-bottom, var(--ea-section-vspace));
    padding-inline: var(--ea-detail-padding-inline);
    max-width: 100vw;
    margin-inline: 0;
    overflow: visible;
}

/* DETAIL: remove descendant width/padding layers */
.ea-content--detail .ea-section .ea-container,
.ea-content--detail .ea-view,
.ea-content--detail .ea-detail,
.ea-content--detail .ea-section-detail {
    min-height: auto;
    height: auto;
    align-items: flex-start;
    max-width: 100%;
    width: 100%;
    margin-inline: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    text-align: left;
    overflow: visible;
}

.ea-content--detail .ea-section > .ea-container {
    height:auto;
}

.ea-mode-detail .ea-section {
    align-items:flex-start;
    justify-content:flex-start;
}

.ea-mode-detail .ea-section--open .ea-preview {
    display:none !important;
}

.ea-mode-detail .ea-section--open .ea-detail {
    display:flex !important;
}

.ea-detail,
.ea-section-detail {
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    overflow: visible;
}

.ea-mode-detail #ea-progress-nav {
    display:none;
}

.ea-mode-detail #ea-layout {
    grid-template-columns: 1fr;
}

@media (max-width: var(--ea-bp-md)) {
    #ea-page-content {
        scroll-snap-type: none;
        height: auto;
    }
    .ea-section {
        align-items: flex-start;
        padding-top: clamp(var(--ea-space-lg), 12dvh, var(--ea-section-pad-top, var(--ea-section-vspace)));
        padding-bottom: clamp(var(--ea-space-lg), 12dvh, var(--ea-section-pad-bottom, var(--ea-section-vspace)));
        padding-inline-start: var(--ea-content-offset-left);
        padding-inline-end: var(--ea-pad-inline);
        scroll-snap-align: unset;
        scroll-snap-stop: unset;
        min-height: auto;
    }
    #ea-page-content:not(.ea-content--detail) .ea-section {
        max-width: clamp(92vw, 96vw, 100vw);
        padding-inline: clamp(2vw, 3vw, 4vw);
        margin-inline: auto;
    }
    #ea-page-content:not(.ea-content--detail) .ea-section > .ea-container {
        max-width: clamp(92vw, 96vw, 100vw);
        padding-inline: clamp(2vw, 3vw, 4vw);
        margin-inline: auto;
    }
    .ea-detail,
    .ea-section-detail {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    .ea-section > .ea-container {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: auto;
        margin-inline: 0;
        padding-inline: 0;
    }
    .ea-view {
        height: auto;
        min-height: auto;
        justify-content: flex-start;
        max-width: 100%;
        margin-inline: 0;
        padding-inline: 0;
    }
    .ea-preview,
    .ea-detail {
        gap: var(--ea-space-md);
    }
    .ea-content--detail .ea-section {
        padding-top: clamp(4vw, 8vw, 12vw);
        padding-bottom: clamp(4vw, 8vw, 12vw);
        max-width: 100vw;
        padding-inline: var(--ea-detail-mobile-pad-inline);
    }
    .ea-content--detail .ea-section .ea-container {
        max-width: 100%;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }
    .ea-section--open .ea-container {
        min-height: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    #ea-page-content {
        scroll-behavior: auto;
        scroll-snap-type: none;
    }
    .ea-section {
        scroll-snap-align: unset;
        scroll-snap-stop: unset;
    }
}

@media (min-width: var(--ea-bp-lg)) {
    .ea-section {
        padding-inline-start: calc(var(--ea-content-offset-left) + var(--ea-axis-desktop-gap-active));
    }
    .ea-section > .ea-container {
        width: min(var(--ea-content-wide, var(--ea-layout-max, 1200px)), calc(100% - calc(var(--ea-content-offset-left) + var(--ea-axis-desktop-gap-active))));
    }
    .ea-content--detail .ea-section {
        padding-inline: var(--ea-detail-padding-inline);
        max-width: 100vw;
    }
    .ea-content--detail .ea-section .ea-container {
        width: 100%;
    }
}

@media (max-width: var(--ea-bp-sm)) {
    #ea-page-content {
        scroll-snap-type: none;
    }
    .ea-section {
        scroll-snap-align: unset;
        scroll-snap-stop: unset;
    }
}