/*
 * EterCraft : thème sombre et moderne. Les couleurs de Bootstrap sont redéfinies ici, donc les pages des plugins
 * (vote, boutique, wiki...) prennent le style du thème sans être modifiées. La couleur principale vient des réglages
 * du thème (elements.theme-color).
 */

[data-bs-theme=dark] {
    --bs-body-bg: #0c0a09;
    --bs-body-bg-rgb: 12, 10, 9;
    --bs-body-color: #e7e2dc;
    --bs-secondary-color: rgba(231, 226, 220, .62);
    --bs-tertiary-bg: #16120f;
    --bs-secondary-bg: #1b1613;
    --bs-border-color: rgba(255, 255, 255, .09);
    --bs-border-color-translucent: rgba(255, 255, 255, .09);
    --bs-emphasis-color: #faf7f3;
    --bs-heading-color: #faf7f3;
    --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-border-radius: .75rem;
    --bs-border-radius-sm: .5rem;
    --bs-border-radius-lg: 1rem;

    --ec-display: "Outfit", "Inter", system-ui, sans-serif;
    --ec-glass: rgba(255, 255, 255, .035);
    --ec-glass-strong: rgba(22, 18, 15, .72);
    --ec-glass-border: rgba(255, 255, 255, .08);
    --ec-ease: cubic-bezier(.22, 1, .36, 1);
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(var(--bs-primary-rgb), .10), transparent 60%),
        var(--bs-body-bg);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    transition: color .2s var(--ec-ease);
}

img {
    max-width: 100%;
    height: auto;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ec-display);
    font-weight: 600;
    letter-spacing: -.01em;
}

::selection {
    background: rgba(var(--bs-primary-rgb), .35);
}

/* ---------- Navigation ---------- */

.site-navbar {
    padding: 1rem 0;
    transition: background-color .35s var(--ec-ease), padding .35s var(--ec-ease), border-color .35s var(--ec-ease);
    border-bottom: 1px solid transparent;
}

.site-navbar.scrolled,
.site-navbar:has(.navbar-collapse.show) {
    padding: .6rem 0;
    background: rgba(12, 10, 9, .78);
    backdrop-filter: blur(16px) saturate(140%);
    border-bottom-color: var(--ec-glass-border);
}

.site-brand {
    font-family: var(--ec-display);
    font-weight: 700;
    font-size: 1.5rem;
    background: linear-gradient(90deg, var(--bs-primary), #ffb347);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

.site-navbar .nav-link {
    color: rgba(231, 226, 220, .72);
    border-radius: .6rem;
    padding: .45rem .85rem !important;
    transition: color .2s var(--ec-ease), background-color .2s var(--ec-ease);
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus {
    color: #fff;
    background: rgba(255, 255, 255, .05);
}

.site-navbar .nav-link.active {
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), .1);
}

/* Pages hors accueil : la navigation fixe ne recouvre pas le haut de la page */
/* Image de fond d'Azuriom, en fondu derrière le haut des autres pages */
.page-background {
    position: fixed;
    inset: 0 0 auto;
    height: 60vh;
    z-index: -1;
    pointer-events: none;
    background-size: cover;
    background-position: center;
    opacity: .18;
    mask-image: linear-gradient(to bottom, #000 20%, transparent);
}

.page-content {
    padding-top: 7.5rem;
}

/* Les pages d'Azuriom et des plugins portent leur propre titre : on le met en valeur */
.page-content > h1:first-of-type {
    font-size: clamp(2.25rem, 5vw, 3.25rem);
    margin-bottom: 2rem;
}

/* ---------- Composants ---------- */

.card,
.glass-card,
.list-group-item,
.modal-content,
.accordion-item {
    background: var(--ec-glass);
    border: 1px solid var(--ec-glass-border);
    border-radius: 1rem;
    backdrop-filter: blur(10px);
}

.card-header,
.card-footer {
    background: rgba(255, 255, 255, .02);
    border-color: var(--ec-glass-border);
}

.glass-card {
    display: block;
    color: inherit;
    transition: transform .4s var(--ec-ease), border-color .4s var(--ec-ease), background-color .4s var(--ec-ease);
}

a.glass-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--bs-primary-rgb), .35);
    background: rgba(255, 255, 255, .05);
}

.dropdown-menu {
    background: var(--ec-glass-strong);
    border: 1px solid var(--ec-glass-border);
    border-radius: .9rem;
    backdrop-filter: blur(16px);
    padding: .4rem;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8);
}

.dropdown-item {
    border-radius: .55rem;
    padding: .5rem .75rem;
}

.dropdown-item i {
    margin-right: .35rem;
    opacity: .7;
}

.btn {
    border-radius: .75rem;
    font-weight: 500;
    transition: transform .2s var(--ec-ease), box-shadow .3s var(--ec-ease), background-color .2s var(--ec-ease), border-color .2s var(--ec-ease);
}

.btn:active {
    transform: scale(.98);
}

.btn .bi:not(:last-child) {
    margin-right: .4rem;
}

.btn-lg {
    padding: .8rem 1.5rem;
    font-size: 1.05rem;
}

.btn-glow {
    box-shadow: 0 10px 40px -10px rgba(var(--bs-primary-rgb), .7);
}

.btn-glow:hover {
    box-shadow: 0 14px 50px -10px rgba(var(--bs-primary-rgb), .9);
}

.btn-glass {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    backdrop-filter: blur(10px);
}

.btn-glass:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.form-control,
.form-select {
    background-color: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .12);
    border-radius: .65rem;
}

.form-control:focus,
.form-select:focus {
    background-color: rgba(255, 255, 255, .06);
    border-color: rgba(var(--bs-primary-rgb), .6);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .15);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--ec-glass-border);
}

.table-dark,
.table > thead {
    --bs-table-color: var(--bs-emphasis-color);
    --bs-table-bg: rgba(var(--bs-primary-rgb), .08);
    --bs-table-border-color: var(--ec-glass-border);
}

.badge {
    font-weight: 500;
    border-radius: .5rem;
}

.alert {
    border-radius: .9rem;
    backdrop-filter: blur(10px);
}

.pagination {
    --bs-pagination-bg: var(--ec-glass);
    --bs-pagination-border-color: var(--ec-glass-border);
}

/* ---------- Accueil ---------- */

.hero {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 8rem 0 6rem;
}

/* Images du hero : diaporama en fondu, chaque image se recadre doucement pendant qu'elle est affichée */
.hero-slides {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.hero-slides::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 50% 45%, rgba(12, 10, 9, calc(var(--ec-shade, .6) * .75)), rgba(12, 10, 9, min(calc(var(--ec-shade, .6) + .2), .95))),
        linear-gradient(to bottom, rgba(12, 10, 9, calc(var(--ec-shade, .6) * .5)), var(--bs-body-bg));
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1.6s var(--ec-ease), transform 7s linear;
}

.hero-slide.active {
    opacity: 1;
    transform: scale(1);
    animation: slide-in 7s linear;
}

@keyframes slide-in {
    from {
        transform: scale(1.08);
    }
}

/* Sans image : un dégradé doux aux couleurs du thème */
.hero-glow {
    position: absolute;
    inset: -20%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 30% 30%, rgba(var(--bs-primary-rgb), .22), transparent 40%),
        radial-gradient(circle at 75% 60%, rgba(255, 179, 71, .12), transparent 45%),
        radial-gradient(circle at 50% 100%, rgba(var(--bs-primary-rgb), .1), transparent 50%);
    filter: blur(30px);
    animation: glow-drift 18s ease-in-out infinite alternate;
}

/* Fondu vers le fond de la page : pas de bord net sous l'accueil */
.hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 35%;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--bs-body-bg));
}

/* Hero centré : colonne de texte étroite ; les autres dispositions gardent la largeur du conteneur */
.hero-content.text-center {
    max-width: 52rem;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--ec-glass-border);
    background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(10px);
    font-size: .9rem;
    color: rgba(231, 226, 220, .85);
}

.status-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: #ef4444;
}

.status-dot.online {
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, .6);
    animation: pulse 2s infinite;
}

.hero-title {
    font-family: var(--ec-display);
    font-weight: 700;
    font-size: clamp(3.5rem, 11vw, 7.5rem);
    line-height: 1;
    letter-spacing: -.03em;
    margin: 1.5rem 0 1rem;
    background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, .55));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-lead {
    font-family: var(--ec-display);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    color: var(--bs-primary);
    margin-bottom: .75rem;
}

.hero-text {
    font-size: 1.125rem;
    color: rgba(231, 226, 220, .75);
    max-width: 38rem;
    margin: 0;
}

.hero-scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
    color: rgba(255, 255, 255, .5);
    animation: bounce 2.4s ease-in-out infinite;
}

.hero-scroll:hover {
    color: #fff;
}

.text-center .hero-actions {
    justify-content: center;
}

/* Hero « cinéma » : grand titre en bas à gauche, image dégagée en haut à droite */
.hero-cinematic {
    align-items: flex-end;
    padding-bottom: 7rem;
}

.hero-cinematic .hero-title {
    font-size: clamp(4rem, 13vw, 10rem);
    margin-top: 1.25rem;
}

.hero-cinematic .hero-slides::after {
    background:
        linear-gradient(to top, var(--bs-body-bg) 2%, rgba(12, 10, 9, calc(var(--ec-shade, .6) * .7)) 45%, rgba(12, 10, 9, calc(var(--ec-shade, .6) * .35))),
        linear-gradient(to right, rgba(12, 10, 9, var(--ec-shade, .6)), transparent 65%);
}

.hero-dots {
    position: absolute;
    right: max(1.5rem, calc((100vw - 1320px) / 2 + .75rem));
    bottom: 3rem;
    display: flex;
    gap: .5rem;
}

.hero-dot {
    position: relative;
    width: 2.5rem;
    height: 3px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, .2);
}

.hero-dot.active::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bs-primary);
    transform-origin: left;
    animation: dot-progress 7s linear forwards;
}

@keyframes dot-progress {
    from {
        transform: scaleX(0);
    }
}

/* Hero « partagé » : texte à gauche, images dans un cadre légèrement incliné à droite */
.hero-split .hero-title {
    font-size: clamp(3.5rem, 8vw, 6.5rem);
}

.hero-frame {
    position: relative;
    isolation: isolate;
    aspect-ratio: 4 / 3;
    border-radius: 1.75rem;
    overflow: hidden;
    border: 1px solid var(--ec-glass-border);
    background:
        radial-gradient(circle at 70% 30%, rgba(var(--bs-primary-rgb), .3), transparent 55%),
        var(--ec-glass);
    box-shadow: 0 2.5rem 6rem -2rem rgba(var(--bs-primary-rgb), .35);
    transform: perspective(1400px) rotateY(-7deg) rotateX(2deg);
    transition: transform .9s var(--ec-ease);
}

.hero-frame:hover {
    transform: none;
}

.hero-frame .hero-slides::after {
    background: linear-gradient(to top, rgba(12, 10, 9, .45), transparent 50%);
}

.hero-frame-mark {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--ec-display);
    font-size: clamp(3rem, 7vw, 5rem);
    font-weight: 700;
    color: rgba(255, 255, 255, .08);
}

@media (max-width: 991.98px) {
    .hero-frame {
        transform: none;
    }
}

.section {
    padding: 6rem 0;
}

.section-head {
    max-width: 40rem;
    margin: 0 auto 3rem;
}

.section-head h2 {
    font-size: clamp(2rem, 4vw, 2.75rem);
}

.section-head p {
    color: var(--bs-secondary-color);
    margin: .75rem 0 0;
}

.step-card {
    padding: 2rem;
}

.step-card h3 {
    font-size: 1.3rem;
    margin: 1.25rem 0 .5rem;
}

.step-card p {
    color: var(--bs-secondary-color);
    margin: 0;
}

/* « Ce qui t'attend » : liste éditoriale numérotée, titre de section fixe à gauche */
.features-intro {
    position: sticky;
    top: 7rem;
}

.features-intro h2 {
    font-size: clamp(2.25rem, 4.5vw, 3.25rem);
    line-height: 1.05;
    margin: .75rem 0 1rem;
}

.features-intro p {
    color: var(--bs-secondary-color);
    max-width: 22rem;
    margin: 0;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bs-primary);
}

.eyebrow::before {
    content: "";
    width: 2rem;
    height: 1px;
    background: currentColor;
}

.feature-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--ec-glass-border);
}

.feature-row {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 3.5rem 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 1.5rem;
    border-top: 1px solid var(--ec-glass-border);
    overflow: hidden;
}

/* Au survol, un voile de la couleur du thème glisse depuis la gauche */
.feature-row::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), .1), transparent 70%);
    transform: translateX(-100%);
    transition: transform .6s var(--ec-ease);
}

.feature-row:hover::before {
    transform: none;
}

.feature-index {
    align-self: start;
    padding-top: .35rem;
    font-family: var(--ec-display);
    font-size: .95rem;
    letter-spacing: .1em;
    color: var(--bs-secondary-color);
    transition: color .4s var(--ec-ease);
}

.feature-row h3 {
    font-size: clamp(1.3rem, 2.4vw, 1.75rem);
    margin: 0 0 .4rem;
    transition: transform .5s var(--ec-ease);
}

.feature-row p {
    color: var(--bs-secondary-color);
    max-width: 34rem;
    margin: 0;
}

.feature-glyph {
    font-size: 2.25rem;
    color: rgba(255, 255, 255, .14);
    transition: color .4s var(--ec-ease), transform .5s var(--ec-ease);
}

.feature-row:hover .feature-index,
.feature-row:hover .feature-glyph {
    color: var(--bs-primary);
}

.feature-row:hover h3 {
    transform: translateX(.35rem);
}

.feature-row:hover .feature-glyph {
    transform: scale(1.1) rotate(-6deg);
}

@media (max-width: 575.98px) {
    .feature-row {
        grid-template-columns: 2.5rem 1fr;
        padding: 1.5rem .5rem;
    }

    .feature-glyph {
        display: none;
    }
}

/* « Ce qui t'attend », disposition mosaïque : première carte en grand, halo qui suit la souris */
.bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.bento-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
    padding: 2rem;
    border-radius: 1.25rem;
    background: var(--ec-glass);
    border: 1px solid var(--ec-glass-border);
    transition: border-color .4s var(--ec-ease), transform .5s var(--ec-ease);
}

.bento-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(28rem circle at var(--x, 50%) var(--y, 50%), rgba(var(--bs-primary-rgb), .14), transparent 45%);
    opacity: 0;
    transition: opacity .4s var(--ec-ease);
}

.bento-card:hover {
    border-color: rgba(var(--bs-primary-rgb), .3);
    transform: translateY(-3px);
}

.bento-card:hover::before {
    opacity: 1;
}

.bento-card h3 {
    font-size: 1.3rem;
    margin: 0 0 .5rem;
}

.bento-card p {
    color: var(--bs-secondary-color);
    margin: 0;
}

.bento-glyph {
    font-size: 1.75rem;
    color: var(--bs-primary);
}

.bento-card-lead {
    grid-column: span 2;
    grid-row: span 2;
    min-height: 24rem;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(var(--bs-primary-rgb), .16), transparent 60%),
        var(--ec-glass);
}

.bento-card-lead h3 {
    font-size: clamp(1.75rem, 3vw, 2.4rem);
}

.bento-card-lead p {
    font-size: 1.1rem;
    max-width: 30rem;
}

.bento-card-lead .bento-glyph {
    font-size: 4.5rem;
    line-height: 1;
}

@media (max-width: 991.98px) {
    .bento {
        grid-template-columns: repeat(2, 1fr);
    }

    .bento-card-lead {
        grid-row: auto;
        min-height: 0;
    }
}

@media (max-width: 575.98px) {
    .bento {
        grid-template-columns: 1fr;
    }

    .bento-card-lead {
        grid-column: auto;
    }
}

/* « Ce qui t'attend », disposition vitrine : titres à gauche, grand panneau à droite */
.showcase-title {
    font-size: clamp(2.25rem, 4.5vw, 3.25rem);
    line-height: 1.05;
    margin: .75rem 0 1rem;
}

.showcase-tabs {
    border-bottom: 1px solid var(--ec-glass-border);
}

.showcase-tab {
    position: relative;
    display: grid;
    grid-template-columns: 3rem 1fr auto;
    align-items: center;
    width: 100%;
    padding: 1.15rem 0;
    text-align: left;
    color: var(--bs-secondary-color);
    background: none;
    border: 0;
    border-top: 1px solid var(--ec-glass-border);
}

/* Trait de la couleur du thème qui se déploie sur l'élément actif */
.showcase-tab::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--bs-primary);
    transition: width .6s var(--ec-ease);
}

.showcase-name {
    font-family: var(--ec-display);
    font-size: 1.35rem;
    font-weight: 600;
    transition: color .3s var(--ec-ease);
}

.showcase-arrow {
    color: var(--bs-primary);
    opacity: 0;
    transform: translateX(-.5rem);
    transition: opacity .3s var(--ec-ease), transform .4s var(--ec-ease);
}

.showcase-text {
    grid-column: 2 / -1;
    margin-top: .4rem;
}

.showcase-tab:hover .showcase-name,
.showcase-tab.active .showcase-name {
    color: var(--bs-emphasis-color);
}

.showcase-tab.active::before {
    width: 100%;
}

.showcase-tab.active .feature-index {
    color: var(--bs-primary);
}

.showcase-tab.active .showcase-arrow {
    opacity: 1;
    transform: none;
}

.showcase-stage {
    position: relative;
    min-height: 28rem;
    border-radius: 1.5rem;
    overflow: hidden;
    border: 1px solid var(--ec-glass-border);
    background:
        radial-gradient(ellipse at 80% 15%, rgba(var(--bs-primary-rgb), .2), transparent 55%),
        radial-gradient(ellipse at 10% 100%, rgba(255, 179, 71, .08), transparent 50%),
        var(--ec-glass);
}

.showcase-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 3rem;
    opacity: 0;
    transform: translateY(1rem);
    pointer-events: none;
    transition: opacity .5s var(--ec-ease), transform .6s var(--ec-ease);
}

.showcase-panel.active {
    opacity: 1;
    transform: none;
}

.showcase-panel h3 {
    font-size: clamp(2rem, 3vw, 2.75rem);
    margin: .5rem 0 .75rem;
}

.showcase-panel p {
    color: var(--bs-secondary-color);
    font-size: 1.1rem;
    max-width: 30rem;
    margin: 0;
}

.showcase-glyph {
    position: absolute;
    top: 2.5rem;
    right: 2.5rem;
    font-size: 7rem;
    line-height: 1;
    color: var(--bs-primary);
    filter: drop-shadow(0 0 2.5rem rgba(var(--bs-primary-rgb), .45));
}

/* Images facultatives des éléments de « Ce qui t'attend » (gestionnaire d'images d'Azuriom) */
.card-image {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
    transition: transform 1.2s var(--ec-ease), opacity .5s var(--ec-ease);
}

.card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(12, 10, 9, .96) 15%, rgba(12, 10, 9, .5) 60%, rgba(12, 10, 9, .25));
}

.bento-card .card-image {
    opacity: .18;
}

.bento-card-lead .card-image {
    opacity: 1;
}

.bento-card:hover .card-image {
    opacity: .35;
    transform: scale(1.05);
}

.bento-card-lead:hover .card-image {
    opacity: 1;
}

.showcase-panel {
    isolation: isolate;
}

.showcase-panel .card-image {
    transform: scale(1.08);
}

.showcase-panel .card-image::after {
    background:
        linear-gradient(to top, rgba(12, 10, 9, .95) 20%, transparent 75%),
        linear-gradient(to right, rgba(12, 10, 9, .6), transparent 60%);
}

.showcase-panel.active .card-image {
    animation: hero-zoom 12s var(--ec-ease) forwards;
}

.feature-thumb {
    width: 7rem;
    height: 4.5rem;
    border-radius: .75rem;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--ec-glass-border);
    filter: grayscale(.7) brightness(.7);
    transition: filter .5s var(--ec-ease), transform .5s var(--ec-ease);
}

.feature-row:hover .feature-thumb {
    filter: none;
    transform: scale(1.05) rotate(-2deg);
}

@media (max-width: 575.98px) {
    .feature-thumb {
        display: none;
    }
}

.step-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 15rem;
    transition: border-color .4s var(--ec-ease), transform .5s var(--ec-ease);
}

.step-card:hover {
    border-color: rgba(var(--bs-primary-rgb), .3);
    transform: translateY(-3px);
}

.step-card .card-image {
    opacity: .3;
}

.step-card:hover .card-image {
    opacity: .5;
    transform: scale(1.05);
}

/* « Rejoindre », disposition frise */
.timeline {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.timeline-step {
    position: relative;
}

/* Trait vers l'étape suivante, depuis le centre de la pastille */
.timeline-step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 1.5rem;
    left: 3rem;
    right: -2rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), .7), rgba(var(--bs-primary-rgb), .1));
}

.timeline-dot {
    position: relative;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    font-family: var(--ec-display);
    font-weight: 600;
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), .1);
    border: 1px solid rgba(var(--bs-primary-rgb), .5);
    box-shadow: 0 0 2rem rgba(var(--bs-primary-rgb), .25);
    transition: background-color .4s var(--ec-ease), color .4s var(--ec-ease);
}

.timeline-step:hover .timeline-dot {
    color: #0c0a09;
    background: var(--bs-primary);
}

.timeline-image {
    aspect-ratio: 16 / 10;
    margin-bottom: 1.25rem;
    border-radius: 1rem;
    border: 1px solid var(--ec-glass-border);
    background-size: cover;
    background-position: center;
    filter: saturate(.75) brightness(.85);
    transition: filter .5s var(--ec-ease), transform .5s var(--ec-ease);
}

.timeline-step:hover .timeline-image {
    filter: none;
    transform: translateY(-3px);
}

/* Étape sans image quand d'autres en ont : un cadre au même format garde les titres alignés */
.timeline-image-empty {
    display: grid;
    place-items: center;
    font-family: var(--ec-display);
    font-size: 5rem;
    font-weight: 700;
    color: rgba(var(--bs-primary-rgb), .15);
    background: radial-gradient(circle at 50% 40%, rgba(var(--bs-primary-rgb), .14), transparent 65%), var(--ec-glass);
}

.timeline-step h3 {
    font-size: 1.35rem;
    margin: 0 0 .5rem;
}

.timeline-step p {
    color: var(--bs-secondary-color);
    margin: 0;
}

@media (max-width: 767.98px) {
    .timeline {
        grid-auto-flow: row;
    }

    .timeline-step {
        padding-left: 4.5rem;
    }

    .timeline-dot {
        position: absolute;
        top: 0;
        left: 0;
    }

    .timeline-step:not(:last-child)::before {
        top: 3rem;
        bottom: -2rem;
        left: 1.5rem;
        right: auto;
        width: 1px;
        height: auto;
        background: linear-gradient(rgba(var(--bs-primary-rgb), .7), rgba(var(--bs-primary-rgb), .1));
    }
}

/* « Rejoindre », disposition partagée */
.join-visual {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: 30rem;
    padding: 2.5rem;
    border-radius: 1.75rem;
    overflow: hidden;
    border: 1px solid var(--ec-glass-border);
    background:
        radial-gradient(circle at 30% 20%, rgba(var(--bs-primary-rgb), .25), transparent 55%),
        var(--ec-glass);
}

.join-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(12, 10, 9, .9) 10%, transparent 60%);
}

.join-visual h2 {
    font-size: clamp(2.25rem, 4.5vw, 3.25rem);
    line-height: 1.05;
    margin: .75rem 0 0;
}

.join-visual-image {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity .8s var(--ec-ease), transform 1.4s var(--ec-ease);
}

.join-visual-image.active {
    opacity: 1;
    transform: none;
}

.join-steps {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Ligne verticale qui relie les numéros */
.join-steps::before {
    content: "";
    position: absolute;
    top: 3rem;
    bottom: 3rem;
    left: 3rem;
    width: 1px;
    background: var(--ec-glass-border);
}

.join-step {
    position: relative;
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
    border-radius: 1.25rem;
    border: 1px solid transparent;
    outline: none;
    transition: background-color .4s var(--ec-ease), border-color .4s var(--ec-ease);
}

.join-step.active {
    background: var(--ec-glass);
    border-color: var(--ec-glass-border);
}

.join-step-number {
    position: relative;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    font-family: var(--ec-display);
    font-weight: 600;
    color: var(--bs-secondary-color);
    background: var(--bs-body-bg);
    border: 1px solid var(--ec-glass-border);
    transition: all .4s var(--ec-ease);
}

.join-step.active .join-step-number {
    color: #0c0a09;
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    box-shadow: 0 0 2rem rgba(var(--bs-primary-rgb), .4);
}

.join-step h3 {
    font-size: 1.35rem;
    margin: .55rem 0 .4rem;
}

.join-step p {
    color: var(--bs-secondary-color);
    margin: 0;
}

@media (max-width: 991.98px) {
    .join-visual {
        min-height: 18rem;
    }
}

.step-number {
    position: absolute;
    top: -1.5rem;
    right: .5rem;
    font-family: var(--ec-display);
    font-weight: 700;
    font-size: 8rem;
    line-height: 1;
    color: rgba(var(--bs-primary-rgb), .08);
}

.post-card {
    overflow: hidden;
}

.post-card h3 {
    font-size: 1.25rem;
    margin-bottom: .5rem;
}

.post-image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ec-ease);
}

.post-card:hover .post-image img {
    transform: scale(1.05);
}

.post-date {
    font-size: .8rem;
    color: var(--bs-primary);
    margin-bottom: .4rem;
}

.cta-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 3rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(var(--bs-primary-rgb), .25);
    background:
        radial-gradient(ellipse 60% 120% at 0% 50%, rgba(var(--bs-primary-rgb), .18), transparent 60%),
        var(--ec-glass);
}

.cta-card h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}

.cta-card p {
    color: rgba(231, 226, 220, .75);
}

@media (min-width: 768px) {
    .cta-card {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* ---------- Pied de page ---------- */

.site-footer {
    border-top: 1px solid var(--ec-glass-border);
    background: rgba(255, 255, 255, .015);
}

.footer-brand {
    font-family: var(--ec-display);
    font-weight: 700;
    font-size: 1.6rem;
    color: #fff;
}

.footer-title {
    font-family: var(--ec-display);
    font-weight: 600;
    margin-bottom: 1rem;
}

.footer-links li + li {
    margin-top: .5rem;
}

.footer-links a {
    color: var(--bs-secondary-color);
}

.footer-links a:hover {
    color: #fff;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: .75rem;
    border: 1px solid var(--ec-glass-border);
    background: var(--ec-glass);
    color: rgba(231, 226, 220, .8);
    font-size: 1.15rem;
    transition: color .2s var(--ec-ease), border-color .2s var(--ec-ease), transform .2s var(--ec-ease);
}

.social-link:hover {
    color: #fff;
    border-color: rgba(var(--bs-primary-rgb), .5);
    transform: translateY(-2px);
}

.footer-bottom {
    border-top: 1px solid var(--ec-glass-border);
}

/* ---------- Animations ---------- */

.js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s var(--ec-ease), transform .8s var(--ec-ease);
}

.js-reveal [data-reveal].revealed {
    opacity: 1;
    transform: none;
}

@keyframes hero-zoom {
    to {
        transform: scale(1);
    }
}

@keyframes glow-drift {
    to {
        transform: translate3d(3%, -3%, 0) scale(1.08);
    }
}

@keyframes pulse {
    70% {
        box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translate(-50%, 0);
    }
    50% {
        transform: translate(-50%, 8px);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .js-reveal [data-reveal] {
        opacity: 1;
        transform: none;
    }
}