/* Notre Histoire page styles */

/* Import base styles and components */
@import "base-zW0DGQa.css";
@import "components/header-FQ0_1JI.css";
@import "components/hero_short-NUhh4ED.css";
@import "components/text_content-92yg7qr.css";
@import "components/responsive_image-CrAiLWk.css";
@import "components/cta_section-t7KgU1f.css";
@import "components/footer-cxZLcZV.css";

/* ============================================ */
/* HISTOIRE SECTIONS - BASE */
/* ============================================ */

.responsive-image--landscape {
    aspect-ratio: unset;
  }

.histoire-section {
    padding: 52px 16px;
    background-color: var(--color-white);
}

.histoire-section--alternate {
    background-color: var(--color-beige);
}

.histoire-section__wrapper {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 1920px;
    margin: 0 auto;
}

.histoire-section--origines .histoire-section__wrapper {
    gap: 52px;
}

.histoire-section--gestion {
    padding-bottom: 15px;
}

.histoire-section--gestion .histoire-section__wrapper {
    gap: 19px;
}

.histoire-section__image {
    width: 100%;
}

.histoire-section__image--1 {
    margin-left: -16px;
}

.histoire-section__image--4 .responsive-image__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.histoire-section__content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.histoire-section__content-wrapper .histoire-advantages__container {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
}

/* ============================================ */
/* HISTOIRE ADVANTAGES - BASE */
/* ============================================ */

.histoire-advantages {
    padding: 64px 16px;
    background-color: var(--color-white);
}

.histoire-advantages__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 1920px;
    margin: 0 auto;
}

/* ============================================ */
/* MOBILE - MAX 1024px */
/* ============================================ */

@media (max-width: 1024px) {
    /* Afficher image combinée sur mobile, cacher images individuelles */
    .histoire-section__image--desktop {
        display: none;
    }

    .histoire-section .histoire-section--gestion,  {
        padding-bottom: 0px !important;
        padding-top: 0px !important;
    }

    .histoire-section__image--mobile {
        display: block;
    }

    /* Image 2-3 combinée en mobile */
    .histoire-section__image--2-3.responsive-image--portrait {
        aspect-ratio: 335 / 343 !important;
        margin-right: -70px;
        width: auto;
        margin-left: auto;
    }

    .histoire-section__image--2-3.responsive-image--portrait img {
        object-fit: contain;
    }

    /* Image 5 en dessous du texte */
    .histoire-section__image--5 {
        order: 1;
        width: 100%;
        max-width: 626px;
        margin: 0 auto;
    }

    .histoire-section__image--5.responsive-image--portrait {
        aspect-ratio: 335 / 343 !important;
    }

    .histoire-section__image--5 .responsive-image__img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Advantages en mode horizontal */
    .histoire-advantage {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
        text-align: left;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .histoire-advantage__content {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .histoire-advantage__icon {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .histoire-advantage__icon img {
        object-fit: contain;
        width: 57px;
        height: 57px;
    }

    .histoire-advantage__title {
        font-family: 'Lora', serif;
        font-size: 20px;
        font-weight: 600;
        line-height: 24px;
        color: var(--color-bordeaux);
    }

    .histoire-advantage__text {
        font-family: "Grantha Sangam MN";
        font-size: 16px;
        font-weight: 400;
        line-height: 18px;
        color: var(--color-bordeaux);
    }
}

/* ============================================ */
/* DESKTOP - MIN 1025px */
/* ============================================ */

@media (min-width: 1025px) {
    /* Cacher image combinée sur desktop, afficher images individuelles */
    .histoire-section__image--mobile {
        display: none;
    }

    .histoire-section__image--desktop {
        display: block;
    }

    .histoire-section {
        padding: 52px 24px;
        overflow: visible;
    }

    .histoire-section--origines {
        padding-bottom: 0 !important;
    }

    .histoire-section--gestion {
        padding-top: 0 !important;
    }

    .histoire-section--promesse{
        padding-top: 143px !important;
    }

    .histoire-section--promesse > .histoire-section__wrapper > .histoire-section__image--5 {
        margin-top: -143px !important;
    }

    .histoire-section__wrapper {
        flex-direction: row;
        gap: 64px;
        align-items: center;
        justify-content: space-between;
        overflow: visible;
    }

    .histoire-section--reverse .histoire-section__wrapper {
        flex-direction: row-reverse;
        justify-content: space-between;
    }

    .histoire-section--alternate .histoire-section__wrapper {
        flex-direction: row;
    }

    .histoire-section--promesse .histoire-section__wrapper {
        align-items: flex-start;
    }

    .histoire-section__image {
        flex: 0 0 45%;
    }

    .histoire-section__image--1 {
        margin-left: -24px;
    }

    .histoire-section__image--5 {
        order: 0;
    }

    .histoire-section__image .responsive-image,
    .histoire-section__image .responsive-image__img {
        border-radius: 24px;
    }

    .histoire-section__content,
    .histoire-section__content-wrapper {
        flex: 1;
        max-width: 640px;
    }

    .histoire-section__content-wrapper .histoire-advantages__container {
        display: flex;
        flex-direction: column;
        gap: 32px;
        margin-top: 48px;
    }

    .histoire-section__content-wrapper .histoire-advantages__row {
        display: flex;
        flex-direction: row;
        gap: 32px;
    }

    .histoire-section__content-wrapper .histoire-advantage {
        flex: 1;
        max-width: calc(50% - 16px);
    }

    /* Advantages en mode vertical centré */
    .histoire-advantage {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
    }

    .histoire-advantage__content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .histoire-advantage__icon {
        width: 80px;
        height: 80px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .histoire-advantage__icon img {
        object-fit: contain;
        width: 80px;
        height: 80px;
    }

    .histoire-advantage__title {
        font-family: 'Lora', serif;
        font-size: 20px;
        font-weight: 600;
        line-height: 24px;
        color: var(--color-bordeaux);
    }

    .histoire-advantage__text {
        font-family: "Grantha Sangam MN";
        font-size: 16px;
        font-weight: 400;
        line-height: 26px;
        color: var(--color-bordeaux);
    }

    .histoire-advantages {
        padding: 120px 96px;
    }

    .histoire-advantages__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 48px;
    }

    .histoire-advantage:nth-child(4),
    .histoire-advantage:nth-child(5) {
        grid-column: span 1;
    }

    .histoire-advantage:nth-child(4) {
        grid-column-start: 1;
    }

    .histoire-advantage:nth-child(5) {
        grid-column-start: 3;
    }
}

/* ============================================ */
/* DESKTOP - MIN 1200px */
/* ============================================ */

@media (min-width: 1200px) {
    .histoire-section {
        padding: 101px 100px;
    }

    .histoire-section__image--1 {
        position: relative;
        left: -85px;
    }
}

/* ============================================ */
/* DESKTOP - MIN 1600px */
/* ============================================ */

@media (min-width: 1600px) {
    .histoire-section {
        padding-left: 0px;
        padding-right: 0px;
        margin-left: auto;
        margin-right: auto;
        max-width: 1550px;
    }

    .test {
        margin-left: 0px;
        margin-right: 120px;
        max-width: unset;
    }

    .histoire-section__image--1 {
        margin-left: 80px;
    }

    .histoire-advantages {
        padding: 120px 192px;
    }

    .histoire-advantages__grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .histoire-advantage:nth-child(4),
    .histoire-advantage:nth-child(5) {
        grid-column: span 1;
    }

    .histoire-advantage:nth-child(4) {
        grid-column-start: 4;
    }

    .histoire-advantage:nth-child(5) {
        grid-column-start: 5;
    }

    /* Images sizes */
    .histoire-section__image--2 {
        width: 626px !important;
        height: 799px !important;
        max-width: 626px !important;
        flex: 0 0 626px !important;
        flex-shrink: 0;
    }

    .histoire-section__image--2 .responsive-image {
        width: 100%;
        height: 100%;
    }

    .histoire-section__image--3 {
        width: 365px !important;
        height: 456px !important;
        max-width: 365px !important;
        flex: 0 0 365px !important;
        flex-shrink: 0;
    }

    .histoire-section__image--3 .responsive-image {
        width: 100%;
        height: 100%;
    }

    .histoire-section__image--4 {
        width: 694px !important;
        height: 566px !important;
        max-width: 694px !important;
        flex: 0 0 694px !important;
        flex-shrink: 0;
    }

    .histoire-section__image--4 .responsive-image {
        width: 100%;
        height: 100%;
    }

    .histoire-section__image--4 .responsive-image__img {
        object-fit: contain;
    }

    .histoire-section__image--5 {
        width: 626px !important;
        height: 713px !important;
        max-width: 626px !important;
        flex: 0 0 626px !important;
        flex-shrink: 0;
    }

    .histoire-section__image--5 .responsive-image {
        width: 100%;
        height: 100%;
    }
}

/* ============================================ */
/* DESKTOP - MIN 1700px */
/* ============================================ */

@media (min-width: 1700px) {
    .histoire-section {
        min-width: 1550px;
    }

    .histoire-section__content {
        flex: 1;
        max-width: 756px;
    }

    .test {
        margin-left: 0px;
        margin-right: calc((100vw - 1550px) / 2);
        max-width: unset;
    }
}

/* ============================================ */
/* CTA SECTION */
/* ============================================ */

.page--histoire .final-cta__title {
    max-width: 1009px;
}