:root {
    /* Variables couleurs */
    --color-white: #ffffff;
    --color-black: #000000;

    --color-orangeWhite: #CA3904;
    --color-orangeBack: #F8F2EC;

    --color-violet-1: #4C2F91;
    --color-violet-footer: #1B0132;

    /* Variables typo */
    --typo-h2: 2rem;
    --typo-h3: 1.6rem;

    --typo-h2-mobile: 1.75rem;
    --typo-h3-mobile: 1.5rem;
}

*,
*::after,
*::before {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Open Sans", sans-serif;

}

.CTA {
    padding: 8px 28px;
    border-radius: 12px;
    color: var(--color-white);
    text-decoration: none;
    font-size: 1.125rem;
    font-weight: 500;
}

.CTA_IR {
    background-color: var(--color-orangeWhite);
}

.CTA_IFI {
    background-color: var(--color-violet-1);
}



header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 36px;
}

header img {
    width: 128px;
}

.CTA_header {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

    /* Responsive */
    @media (max-width: 640px) {
        header {
            gap: 16px;
        }

        .CTA_header {
            text-align: center;
        }

        .CTA_header .CTA {
            padding: 8px 12px;
        }
    }

    @media (max-width: 520px) {
        header {
            padding: 12px 12px;
            gap: 8px;
        }

        .CTA_header {
            gap: 8px;
        }

        .CTA_header .CTA {
            font-size: 1rem;
        }

        header img {
            width: 104px;
        }
    }




/* Hero Section */
.hero {
    background-image: url(assets/Hero.png);
    background-position: center;
    background-size: cover;
    height: 68vh;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    color: white;
    text-align: center;
}

.text_banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 54%;
}

h1 {
    font-size: 3rem;
    margin: 0;
}

.text_banner p {
    width: 68%;
    font-size: 1.25rem;
}

    /* Responsive */
    @media (max-width: 900px) {
        .hero {
            background-image: url(assets/Hero_900.png);
            background-position: left;
        }

        .text_banner {
            width: 64%;
        }

        h1 {
            font-size: 2.25rem;
        }

        .text_banner p {
            width: 91%;
            font-size: 1.15rem;
        }
    }

    @media (max-width: 680px) {
        .hero {
            height: 48vh;
        }

        h1 {
            font-size: 2rem;
        }

        .text_banner p {
            font-size: 1.1rem;
        }
    }

    @media (max-width: 480px) {
        .hero {
            height: 32vh;
            background-image: url(assets/Hero_480.svg);
        }

        .text_banner {
            width: 96%;
            margin: auto;
        }

        h1 {
            font-size: 1.75rem;
            margin-top: 5px;
        }

        .text_banner p {
            font-size: 1rem;
            margin-top: 8px;
        }
    }
/* End Hero Section */




/* Us Section */
.us {
    position: relative;
    padding: 100px 13% 112px 13%;
}

.us::before {
    content: "";
    position: absolute;
    top: -86px;
    left: -2.5%;
    width: 52%;
    height: auto;
    aspect-ratio: 1 / 1;
    background-image: url(assets/deco/decoUs.svg);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -2;
}

.presentation {
    display: flex;
    align-items: center;
    gap: 7%;
}

.presentation img {
    width: 34%;
    flex-shrink: 0;
}

.us .chiffre_container {
    display: flex;
    justify-content: space-around;
    margin-top: 48px;
}

.us .chiffre {
    width: 18%;
    text-align: center;
}

.us .chiffre p {
    margin: -8px;
}

.us .chiffre_title {
    color: var(--color-orangeWhite);
    text-align: center;
    font-size: 2.25rem;
    font-weight: 800;
}

    /* Responsive */
    @media (max-width: 1110px) {
        .us .chiffre {
            width: 28%;
        }
    }

    @media (max-width: 1040px) {
        .us {
            padding: 100px 7% 112px 7%;
        }

        .us::before {
            top: -11px;
            left: -0.5%;
            width: 56%;
        }

        .presentation {
            gap: 4%;
        }

        .presentation img {
            width: 40%;
        }
    }

    @media (max-width: 860px)  {
        .us {
            padding: 60px 7% 112px 7%;
        }

        .us::before {
            top: -17%;
            left: -3.5%;
            width: 34%;
        }


        .presentation {
            flex-direction: column-reverse;
            gap: 20px;
        }
    }

    @media (max-width: 800px) {
        .us .chiffre_container {
            justify-content: space-between;
        }
    }

    @media (max-width: 720px) {
        .us::before {
            top: -14%;
        }
    }

    @media (max-width: 620px) {
        .us {
            padding: 38px 7% 112px 7%;
        }

        .us::before {
            top: -13%;
        }

        .presentation img {
            width: 56%;
        }

        .us .chiffre_container {
            flex-wrap: wrap;
            justify-content: center;
            gap: 38px;
        }

        .us .chiffre {
            width: 40%;
        }
    }

    @media (max-width: 540px) {
        .us::before{
            width: 0;
        }
    }

    @media (max-width: 480px) {
        .us {
            padding: 40px 7% 112px 7%;
        }

        .presentation {
            flex-direction: column;
        }

        .chiffre_container {
            margin-top: 22px;
        }
    }

    @media (max-width: 440px) {
        .us .chiffre_container {
            margin-top: 28px;
        }

        .us .chiffre {
            width: 72%;
        }

        .presentation img {
            width: 100%;
        }
    }        
/* End Us Section */




/* Equivalence Section */
.engagement {
    position: relative;
    padding: 0 13%;
    text-align: center;
}

.engagement::before {
    content: "";
    background-color: var(--color-orangeBack);
    width: 99vw;
    height: 215px;
    position: absolute;
    left: 0;
    top: -44px;
    z-index: -2;
}

.engagement h2 {
    font-size: 1.35rem;
    width: 64%;
    margin: auto;
    position: relative;
    margin-bottom: 40px;
}

.engagement h2::before {
    content: url(assets/icon/coeur.svg);
    position: absolute;
    top: 2px;
    left: 2%;
}

.equivalence_container {
    display: flex;
    justify-content: space-between;
}

.equivalence {
    border: var(--color-orangeWhite) solid 2px;
    padding: 14px 20px 20px 20px;
    border-radius: 8px;
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    justify-content: space-between;
    background-color: var(--color-white);
}

.equivalence p {
    margin: 0;
    display: flex;
    gap: 8px;
    flex-direction: column;
}

.equivalence_title {
    color: var(--color-orangeWhite);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

    /* Responsive */
    @media (max-width: 1450px) {
        .engagement h2::before {
            left: -4%;
        }
    }

    @media (max-width: 1040px) {
        .engagement {
            padding: 0 7%;
        }

        .engagement h2 {
            width: 85%;
        }
    }

    @media (max-width: 850px) {
        .equivalence_container {
            justify-content: center;
            flex-wrap: wrap;
            gap: 32px;
        }

        .equivalence {
            width: 45%;
        }
    }

    @media (max-width: 600px) {
        .equivalence {
            width: 70%;
        }
    }

    @media (max-width: 460px) {
        .engagement::before {
            height: 240px;
        }

        .engagement h2 {
            width: 100%;
        }

        .equivalence {
            width: 90%;
        }
    }

    
    @media (max-width: 390px) {
        .engagement h2 {
            width: 95%;
        }
    }

    @media (max-width: 370px) {
        .engagement h2 {
            width: 100%;
        }
    }

    @media (max-width: 295px) {
        .engagement h2::before {
            display: none;
        }
    }
/* End Equivalence Section */




/* Témoignage Section */
.temoignage {
    position: relative;
    padding: 156px 13% 88px 13%;
    display: flex;
    gap: 8%;
}

.temoignage::before {
    content: "";
    background-color: var(--color-orangeBack);
    width: 99vw;
    height: 61%;
    position: absolute;
    left: 0;
    top: 79px;
    z-index: -2;
}

.temoignage::after {
    content: url(assets/deco/decoQuote.svg);
    position: absolute;
    top: -28px;
    right: 0;
}

.temoignage_text {
    margin-top: 8%;
    width: 55%;
}

.temoignage img {
    width: 35%;
}

.temoignage_quote {
    margin: 0; 
    position: relative;
}

.temoignage_quote::before {
    content: url(assets/deco/guillemet.svg);
    position: absolute;
    top: -44px;
    left: -20px;
}

.temoignage_quote::after {
    content: url(assets/deco/guillemet.svg);
    position: absolute;
    bottom: -35px;
    right: -5px;
    transform: rotate(180deg);
}

.temoignage_person {
    font-weight: 700;
    font-style: italic;
    margin: 0;
    margin-top: 4px;
}

    /* Responsive */
    @media (max-width: 1430px) {
        .temoignage_text {
            margin-top: 5%;
        }
    }

    @media (max-width: 1290px) {
        .temoignage {
            padding: 132px 13% 88px 13%;
        }

        .temoignage::before {
            height: 63%;
        }
    }

    @media (max-width: 1230px) {
        .temoignage {
            padding: 118px 13% 88px 13%;
            align-items: center;
        }

        .temoignage::before {
            top: 67px;
            height: 79%;
        }

        .temoignage_text{
            width: 100%;
            margin-top: 24px;
        }
    }

    @media (max-width: 1040px) {
        .temoignage {
            padding: 118px 7% 88px 7%;
        }

        .temoignage::after {
            content: "";
            position: absolute;
            top: -18px;
            right: 0;
            width: 8%;
            height: auto;
            aspect-ratio: 1 / 5;
            background-image: url(assets/deco/decoQuote.svg);
            background-size: contain;
            background-repeat: no-repeat;
            z-index: -2;
        }
    }

    @media (max-width: 850px) {
        .temoignage {
            padding: 50px 7% 50px 7%;
            background-color: #F8F2EC;
            margin-top: 56px;
            margin-bottom: 44px;
            flex-direction: column;
        }

        .temoignage::before {
            display: none;
        }

        .temoignage::after {
            top: -12%;
            width: 11%;
            z-index: 0;
        }

        .temoignage_text {
            margin-top: inherit;
        }

        .temoignage img {
            width: 40%;
        }
    }

    @media (max-width: 620px) {
        .temoignage::after {
            top: -11%;
            width: 13%;
        }

        .temoignage img {
            width: 56%;
        }
    }

    @media (max-width: 440px) {
        .temoignage img {
            width: 80%;
        }
    }

    @media (max-width: 300px) {
        .temoignage_quote::before {
            left: -8px;
        }

        .temoignage_quote::after {
            bottom: -56px;
        }
    }
/* End Témoignage Section */



/* Etablissement Section */
.ours {
    padding: 0 13% 84px 13%;
}

.ours h2 {
    color: var(--color-violet-1);
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
}

.ours p {
    text-align: center;
    width: 85%;
    margin: auto;
}

.etabli_container {
    margin-top: 44px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.etablissement {
    border: 2px solid var(--color-black);
    border-radius: 12px;
    padding: 12px 20px;
    background-color: var(--color-orangeBack);
    position: relative;
}

.etablissement.active::after {
    content: url(assets/deco/decoEta.svg);
    position: absolute;
    bottom: -5px;
    right: 0;
}

.etabli_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.etablissement h3 {
    margin: 0;
    font-size: 1.5rem;
}

.etabli_title svg {
    transition: transform 0.5s ease;
    transform: rotate(180deg);
}

.etablissement.active .etabli_title svg {
    transform: rotate(0);
}

.etabli_content {
    width: 87%;
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 24px;
    opacity: 0;
    transition: height 0.35s ease, padding 0.35s ease, opacity 0.25s ease;
}

.etablissement.active .etabli_content {
    opacity: 1;
    padding-top: 16px;
    padding-bottom: 20px;
    position: relative;
}

.etablissement p {
    text-align: left;
    width: 100%;
}

.etablissement .chiffre_container {
    display: flex;
    justify-content: space-evenly;
    padding: 8px 0 12px 0;
}

.etablissement .chiffre {
    width: 21%;
    text-align: center;
}

.etablissement .chiffre .chiffre_title {
    color: var(--color-orangeWhite);
    font-size: 1.75rem;
    font-weight: 800;
}

.etablissement .chiffre p {
    text-align: center;
}

p.etabli_claim {
    font-weight: 700;
    width: 78%;
    text-align: center;
}

.etabli_CTA {
    margin: auto;
    display: flex;
    flex-direction: row;
    gap: 16px;
}

    /* Responsive */
    @media (max-width: 1410px) {
        .etablissement .chiffre {
            width: 30%;
        }
    }

    @media (max-width: 1040px) {
        .ours {
            padding: 12px 7% 84px 7%;
        }

        .ours p {
            width: 100%;
        }

        .etablissement .chiffre_container {
            flex-wrap: wrap;
            justify-content: center;
            gap: 24px;
        }

        .etablissement .chiffre {
            width: 35%;
        }
    }

    @media (max-width: 760px) {
        .etablissement .chiffre {
            width: 44%;
        }
    }
    
    @media (max-width: 620px) {
        .etablissement h3 {
            width: 90%;
        }
        
        .etablissement .chiffre {
            width: 52%;
        }

        .etabli_CTA {
            flex-direction: column;
            gap: 12px;
            text-align: center;
        }
    }

    @media (max-width: 440px) {
        .etabli_content {
            width: 100%;
        }

        .etablissement.active::after {
            display: none;
        }
    }
/* End Etablissement Section */ 



/* IR vs IFI Section */  
.IRvsIFI {
    padding: 64px 13% 64px 13%;
    text-align: center;
    background-color: var(--color-orangeBack);
    position: relative;
}

.IRvsIFI::before {
    content: url(assets/deco/IRvsIFI.svg);
    position: absolute;
    left: 0;
    top: -135px;
}

.IRvsIFI h2 {
    color: var(--color-violet-1);
    font-size: 2rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 20px;
}

.IRvsIFI p {
    width: 85%;
    margin: auto;
}

.cards_container {
    display: flex;
    justify-content: space-evenly;
    margin: 56px 0;
}

.card {
    width: 40%;
    border-radius: 8px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.card.IR {
    border: var(--color-orangeWhite) 2px solid; 
    justify-content: space-between;
    position: relative;
}

.card.IR::before {
    content: url(assets/deco/decoIR.svg);
    position: absolute;
    top: -23px;
    left: -24px;
}

.card.IFI {
    border: var(--color-violet-1) 2px solid;
    position: relative;
}

.card.IFI::before {
    content: url(assets/deco/decoIFI.svg);
    position: absolute;
    top: -23px;
    right: -24px;
}

.card h3 {
    font-size: 1.4rem;
    width: 64%;
    margin: auto;
    margin-top: 0;
    margin-bottom: 14px;
}

.card.IR h3 {
    color: var(--color-orangeWhite);
}

.card.IFI h3 {
    color: var(--color-violet-1);
}

.card p {
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
}

.donInput {
    background: transparent;
    border: none;
    width: 21%;

    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
}

.card.IR .donInput {
    color: var(--color-orangeWhite);
}

.card.IFI .donInput {
    color: var(--color-violet-1);
}

.dates {
    width: 70%;
    margin: auto;
}

.dates h3 {
    font-size: 1.15rem;
}

.dates ul {
    width: 80%;
    margin: auto;
}

.dates li {
    text-align: left;
    list-style: none;
    margin-bottom: 4px;
}

.dates li::before {
    content: url(assets/deco/bullet.svg);
    position: relative;
    top: 5px;
    left: -7px;
}

    /* Responsive */
    @media (max-width: 1130px) {
        .cards_container {
            justify-content: space-between;
        }

        .card {
            width: 48%;
        }
    }

    @media (max-width: 1270px) {
        .dates ul {
            width: 100%;
        }
    }

    @media (max-width: 1040px) {
        .IRvsIFI {
            padding: 64px 7% 64px 7%;
        }

        .IRvsIFI p {
            width: 100%;
        }

        .IRvsIFI::before {
            content: "";
            position: absolute;
            top: -12%;
            left: 0;
            width: 8%;
            height: auto;
            aspect-ratio: 1 / 5;
            background-image: url(assets/deco/IRvsIFI.svg);
            background-size: contain;
            background-repeat: no-repeat;
        }
    }

    @media (max-width: 880px) {
        .dates {
            width: 100%;
        }

        .dates ul {
            width: 84%;
        }
    }

    @media (max-width: 820px) {
        .IRvsIFI::before {
            top: -6%;
        }

        .cards_container {
            flex-direction: column;
            align-items: center;
            gap: 44px;
        }

        .card {
            width: 62%;
        }
    }

    @media (max-width: 740px) {
        .dates ul {
            width: 100%;
        }
    }

    @media (max-width: 650px) {
        .IRvsIFI::before {
            top: -4%;
        }

        .card {
            width: 90%;
        }

        .dates ul {
            padding-left: 0;
        }
    }

    @media (max-width: 400px) {
        .IRvsIFI::before {
            width: 12%;
            top: -4%;
        }
    }

    @media (max-width: 400px) {
        .dates li {
            margin-bottom: 12px;
        }
    }

    @media (max-width: 350px) {
        .IRvsIFI::before {
            width: 13%;
            top: -3%;
        }

        .card h3 {
            width: 100%;
        }
    }
/* End IR vs IFI Section */