/* ========================================
   EXN - STRUCTURE
   ======================================== */


/* ========================================
   EXN - HERO
   ======================================== */
.exn-hero {
    display: grid;
    grid-template-columns: 2fr 1fr;
    min-height: 80vh;
    overflow: hidden;
}

.exn-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.exn-hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15vmin;
    gap: 1.5rem;
}

@media (max-width: 1100px) {
    .exn-hero {
        grid-template-columns: 1fr;
    }

    .exn-hero__img {
        width: 100%;
        min-height: 70vh;
        object-fit: cover;
    }
}

/* ========================================
   EXN - DÉCLINAISONS
   ======================================== */
.exn-declinaisons {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.exn-declinaisons img {
    width: 100%;
}

@media (max-width: 1100px) {
    .exn-declinaisons {
        grid-template-columns: repeat(1, 1fr);

    }
}

/* ========================================
   EXN - IDENTITÉ
   ======================================== */
.exn-identite {
    width: 100%;
    padding: 15vmin;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15vmin;
    background-color: var(--color-1);
    color: var(--color-2);
}

.exn-identite__visual {
    width: 50%;
}

.exn-identite__text {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.exn-identite__text img {
    width: 100%;
    margin-top: 2rem;
}

@media (max-width: 1100px) {
    .exn-identite {
        flex-direction: column;
    }

    .exn-identite__visual {
        width: 100%;
    }
}

/* ========================================
   EXN - SCALE
   ======================================== */
.exn-scale {
    width: 100%;
    padding: 15vmin;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-2);
    color: var(--color-1);
}

.exn-scale__visual {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.exn-scale__logo--large {
    max-height: 150px;
}

.exn-scale__logo--middle {
    max-height: 70px;
}

.exn-scale__logo--small {
    max-height: 30px;
}

@media (max-width: 1100px) {
    .exn-scale__visual {
        flex-direction: column;
        gap: 15vmin;
    }
}

/* ========================================
   EXN - TYPOGRAPHIE
   ======================================== */
.exn-typo {
    width: 100%;
    display: flex;
}

.exn-typo__hero {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    /* padding: 15vmin; */
}

.exn-typo__hero img {
    width: 100%;
}

.exn-typo__content {
    padding: 15vmin;
    background-color: var(--color-1);
    color: var(--color-2);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.exn-typo__samples {
    display: flex;
    width: 100%;
    gap: 50px;
    padding-bottom: 50px;
}

.exn-typo__samples img {
    height: 70px;
}

@media (max-width: 1100px) {
    .exn-typo {
        flex-direction: column;
    }

    .exn-typo__hero {
        width: 100%;
    }
}

/* ========================================
   EXN - UNITÉ / 3D
   ======================================== */
.exn-unite {
    width: 100%;
    padding: 15vmin;
    padding-bottom: 5vmin;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    background-color: var(--color-2);
    color: var(--color-1);
}

.exn-unite__img {
    width: 100%;
    object-fit: contain;
    background-color: var(--color-2);
}

#img-unite-resp {
    display: none;
}

@media (max-width: 1100px) {
    #img-unite-resp {
        display: block;
    }

    #img-unite {
        display: none;
    }
}

/* ========================================
   EXN - MANUEL
   ======================================== */
.exn-manuel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
}

.exn-manuel img {
    width: 100%;
    object-fit: contain !important;
}

@media (max-width: 1100px) {
    .exn-manuel {
        display: flex;
        flex-direction: column;
    }

    .exn-manuel img {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
    }
}

/* ========================================
   EXN - ICONOGRAPHIE
   ======================================== */
.exn-icono {
    width: 100%;
    max-width: 100vw;
    /* ← empêche de dépasser l'écran */
    overflow: hidden;
    /* ← coupe ce qui dépasse */
    /* padding: 15vmin; */
    padding-top: 0;
    display: flex;
    align-items: center;
    gap: 5vmin;
    background-color: #d6d6d7;
    box-shadow: 0px 40px 30px 10px #d6d6d7;
    position: relative;
    z-index: 30;
}

.exn-icono__carousel {
    flex: 1;
    min-width: 0;
    /* ← crucial pour flexbox */
    overflow: hidden;
    position: relative;
    padding: 15vmin;
    padding-bottom: 0;
    padding-left: 0;
}

.exn-icono__text {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 15vmin;
    padding-bottom: 0;
}

.exn-icono__track {
    display: flex;
    gap: 50px;
    width: max-content;
    animation: exn-carousel-scroll 40s linear infinite;
}

.exn-icono__track img {
    height: 200px;
    flex-shrink: 0;
}

.exn-icono__mask {
    box-shadow:
        inset 90px 0px 60px -30px #d6d6d7,
        inset -90px 0px 60px -30px #d6d6d7;
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

@keyframes exn-carousel-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-33.33% - 16.66px));
    }
}


/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1100px) {
    .exn-icono {
        width: 100%;
        padding-top: 0;
        gap: 0;
        display: flex;
        flex-direction: column;
        box-shadow: 0px 40px 30px 10px #d6d6d7;
    }

    .exn-icono__carousel {
        padding-top: 5vmin;
    }
}