/*
Page LPE — 3 pôles / 21 ministères
-------------------------------------------------------------- */
.lpe-poles-page {
    background:
        radial-gradient(circle at 50% 0%, rgba(28, 78, 134, 0.28), transparent 34%),
        var(--lpe-night);
    color: #fff;
}

.lpe-poles-intro {
    padding: clamp(70px, 8vw, 115px) 0 40px;
    text-align: center;
}

.lpe-poles-intro h1 {
    margin: 0.1em 0 0.3em;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.65rem, 5.7vw, 5.7rem);
    font-weight: 500;
    line-height: 1.03;
}

.lpe-poles-intro > .lpe-shell > p:last-of-type {
    max-width: 820px;
    margin-inline: auto;
    color: #b9c5d1;
    font-size: 1.05rem;
}

.lpe-poles-intro__actions {
    justify-content: center;
    margin-top: 28px;
}

.lpe-wordmark {
    font-family: Inter, Arial, sans-serif;
    font-weight: 300;
    letter-spacing: 0.16em;
}

.lpe-wordmark__blue {
    color: #2f91f2;
}

.lpe-wordmark__white {
    color: #f7f3e8;
}

.lpe-wordmark__red {
    color: #ef4239;
}

.lpe-poles {
    overflow: hidden;
    padding: 50px 0 clamp(90px, 10vw, 150px);
}

.lpe-poles__list {
    display: grid;
    gap: clamp(62px, 7vw, 95px);
}

.pole-row {
    --pole-strong: #124a9b;
    --pole-light: #e5f1ff;
    --pole-border: #68adf3;
    --pole-ink: #0b2c5c;
    --pole-glow: rgba(35, 130, 236, 0.44);

    position: relative;
    isolation: isolate;
    min-height: 320px;
    display: grid;
    grid-template-columns: minmax(220px, 285px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(48px, 6vw, 92px);
}

.pole-row--blanc {
    --pole-strong: #f8f4e9;
    --pole-light: #fffdf8;
    --pole-border: #d7c39a;
    --pole-ink: #14233a;
    --pole-glow: rgba(231, 211, 162, 0.3);
}

.pole-row--rouge {
    --pole-strong: #ad2025;
    --pole-light: #ffe5e1;
    --pole-border: #ef8279;
    --pole-ink: #7c171b;
    --pole-glow: rgba(238, 61, 54, 0.4);
}

.pole-row__pixels {
    position: absolute;
    z-index: -1;
    inset: 3% -6% 0 -6%;
    pointer-events: none;
    opacity: 0.47;
    background:
        radial-gradient(circle at center, var(--pole-strong) 0 3px, transparent 3.7px) 0 0 / 24px 24px,
        linear-gradient(90deg, transparent 0 5%, color-mix(in srgb, var(--pole-strong), transparent 55%) 25%, color-mix(in srgb, var(--pole-strong), transparent 67%) 74%, transparent 96%);
    mask-image:
        radial-gradient(ellipse 74% 36% at 50% 50%, #000 0 44%, transparent 74%);
    transform: skewX(-8deg);
}

.diamond {
    position: relative;
    display: block;
    flex: 0 0 auto;
    aspect-ratio: 1;
    border: 1px solid var(--pole-border);
    border-radius: 18px;
    text-decoration: none;
    transform: rotate(45deg);
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.diamond::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 13px;
    pointer-events: none;
}

.diamond:hover,
.diamond:focus-visible {
    z-index: 8;
    outline: none;
    transform: rotate(45deg) scale(1.048);
    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.38),
        0 0 30px var(--pole-glow);
}

.diamond__content {
    position: absolute;
    inset: 9%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: rotate(-45deg);
}

.diamond--pole {
    width: clamp(215px, 19vw, 282px);
    justify-self: center;
    color: #fff;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.13), transparent 42%),
        var(--pole-strong);
    box-shadow:
        0 24px 55px rgba(0, 0, 0, 0.42),
        0 0 25px var(--pole-glow);
}

.pole-row--blanc .diamond--pole {
    color: var(--pole-ink);
}

.diamond__pole-icon {
    width: 45px;
    height: 45px;
    margin-bottom: 7px;
    object-fit: contain;
}

.diamond__eyebrow {
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.diamond__pole-name {
    margin-top: 4px;
    font-size: clamp(2rem, 3vw, 2.8rem);
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.diamond__mission {
    max-width: 185px;
    margin-top: 15px;
    font-size: clamp(0.58rem, 0.86vw, 0.74rem);
    font-weight: 750;
    line-height: 1.48;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.diamond__gold-mark {
    width: 9px;
    height: 9px;
    margin-top: 13px;
    background: var(--lpe-gold);
    transform: rotate(45deg);
    box-shadow: 0 0 12px rgba(216, 180, 103, 0.55);
}

.ministries-cluster {
    min-width: 0;
    display: grid;
    align-content: center;
}

.ministries-line {
    display: flex;
    justify-content: center;
    gap: clamp(19px, 2.2vw, 38px);
}

.ministries-line--bottom {
    margin-top: -18px;
}

.diamond--ministry {
    width: clamp(118px, 10.6vw, 164px);
    color: var(--pole-ink);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.1)),
        var(--pole-light);
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.24),
        0 0 18px var(--pole-glow);
}

.diamond__number {
    margin-bottom: 3px;
    font-size: clamp(0.8rem, 1.2vw, 1.05rem);
    font-weight: 800;
}

.diamond__ministry-icon {
    width: clamp(27px, 2.35vw, 38px);
    height: clamp(27px, 2.35vw, 38px);
    margin-bottom: 6px;
    object-fit: contain;
}

.diamond__title {
    display: -webkit-box;
    max-width: 120px;
    overflow: hidden;
    font-size: clamp(0.55rem, 0.77vw, 0.75rem);
    font-weight: 760;
    line-height: 1.22;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.lpe-poles-outro {
    padding: 78px 0;
    border-top: 1px solid var(--lpe-line-dark);
    background: linear-gradient(120deg, #071c3a, #050d18 58%, #3d1016);
}

.lpe-poles-outro__inner > div {
    max-width: 850px;
}

.lpe-poles-outro h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 500;
    line-height: 1.08;
}

@media (max-width: 1120px) {
    .pole-row {
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 40px;
    }

    .diamond--ministry {
        width: 122px;
    }

    .ministries-line {
        gap: 22px;
    }
}

@media (max-width: 900px) {
    .lpe-poles__list {
        gap: 110px;
    }

    .pole-row {
        grid-template-columns: 1fr;
        gap: 62px;
    }

    .pole-row__pixels {
        inset: -5% -30%;
        opacity: 0.32;
        transform: rotate(90deg) skewX(-8deg);
    }

    .ministries-cluster {
        width: 100%;
    }

    .diamond--ministry {
        width: min(145px, 17vw);
    }
}

@media (max-width: 680px) {
    .lpe-poles-intro h1 {
        font-size: 2.7rem;
    }

    .lpe-wordmark {
        display: block;
        margin-bottom: 10px;
    }

    .lpe-poles {
        padding-top: 30px;
    }

    .diamond--pole {
        width: min(230px, 67vw);
    }

    .ministries-cluster {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 35px 15px;
        justify-items: center;
    }

    .ministries-line {
        display: contents;
    }

    .diamond--ministry {
        width: min(132px, 34vw);
    }

    .diamond__title {
        max-width: 95px;
        font-size: 0.58rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .diamond {
        transition: none;
    }

    .diamond:hover,
    .diamond:focus-visible {
        transform: rotate(45deg);
    }
}