:root{
    --white: #FFFFFF;
    --grey-70: #707070;
    --black-19: #191617;
    --orange: #FF6619;
    --pink: #FF0099;
    --alpha-pink: #FF009980;
    --alpha-pink-2: #FF00997C;
    --gradient-pink: linear-gradient(270deg, #FF0099 0%, #FF6600 100%);
    --alpha-orange: #FF661965;
    --black: #000000;
    --alpha-black: #00000000;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Italic.ttf") format("truetype");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-BoldItalic.ttf") format("truetype");
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-BlackItalic.ttf") format("truetype");
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: "Archer";
    src: url("../fonts/ArcherBoldPro.otf") format("opentype");
    font-weight: 700;
}

@font-face {
    font-family: "Futura";
    src: url("../fonts/Futura-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

.opensans, .helvetica{font-family: "Helvetica", sans-serif;}
.roboto{font-family: "Roboto", sans-serif;}
.archer{font-family: "Archer", serif;}
.fw-extrabold{font-weight: 800}
.fw-black{font-weight: 900}
.ws-nw{white-space: nowrap}

.text-white{ color: #FFFFFF;}
.text-white-green{color: #E4F0E980;}
.text-green{color: #139259;}
.text-black{color: #000000;}
.text-red{color: var(--red);}
.text-light-blue{color: #0067B3;}
.text-white3B{color: #FFFFFF3B;}
.text-dark-red{color: #BE3112;}
.text-grey{color: #00000029;}
.text-light-red{color: #E33F48;}
.text-dark-blue{color: #00529F;}
.text-light-green{color: #1392594D;}
.text-dark-grey{color: #00000040;}
.text-orange{color: var(--orange);}

.bg-white{ background-color: #FFFFFF;}
.bg-white-green{background-color: #E4F0E980;}
.bg-green{background-color: #139259;}
.bg-black{background-color: #191617;}
.bg-red{background-color: var(--red);}
.bg-light-blue{background-color: #0067B3;}
.bg-white3B{background-color: #FFFFFF3B;}
.bg-dark-red{background-color: #BE3112;}
.bg-grey{background-color: #00000029;}
.bg-light-red{background-color: #E33F48;}
.bg-dark-blue{background-color: #00529F;}
.bg-light-green{background-color: #1392594D;}
.bg-dark-grey{background-color: #00000040;}

.btn-pink{
    background-color: var(--pink);
    border: 0;
    color: var(--white);
    transition: all .5s ease;
    font-weight: 700;
    border-radius: 15px;
    font-size: 20px;
    padding: 16px 24px;
    font-family: "Futura", sans-serif;
}
.btn-pink:hover,
.btn-rpink:active{
    background: var(--gradient-pink) !important;
    /*border-color:  var(--gradient-pink) !important;*/
    color: var(--white) !important;
}

.btn-white{
    background-color: var(--white);
    border-color:  var(--white);
    color: var(--red);
}
.btn-white:hover,
.btn-white:active{
    background-color: #e9e9e9 !important;
    border-color:  #e9e9e9 !important;
    color: var(--dark-red) !important;
}

.btn-alpha-light-green{
    background-color: #1392594D;
    border-color:  #13925900;
    color: var(--white);
    font-size: 18px;
}
.btn-alpha-light-green:hover{
    background-color: #139259FF;
    border-color:  #139259FF;
    color: var(--white);
}

.lh-13{line-height: 1.3}

nav{padding: 5px 0 11px;}

nav .logo-link{margin-bottom: 11px}

label{
    cursor: pointer;
    padding: 16px;
}
.blue-entry input[type="checkbox"] + * {display: none;}
.blue-entry input[type="checkbox"]:checked + *{display: block;}

@media screen and (min-width: 991px){
    .logo{
        height: 90px;
        margin-top: 24px;
    }
    label{
        padding: 8px;
    }
    .donation label{
        padding: 16px 0 16px 24px;
    }
    header a.btn{padding: 16px 40px;}
    header a .fw-bold{font-size: 28px;}
    .tab-section .col-12.col-lg-7.order-lg-2.ps-lg-0{
        background-color: white;}
}

@media (max-width: 991px){
    .container, .container-md, .container-sm{
        max-width: 100vw;
    }
}

@media screen and (min-width: 1600px){
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1700px;
    }
}

@media screen and (min-width: 991px){
    nav{padding: 16px 0 11px;}
    header.scrolled{
        background-color: var(--pink);
    }
    header.scrolled nav{
        padding: 8px;
        position: relative;
    }
    header.scrolled a.logo-link,
    header.scrolled .logo{
        height: 48px;
        /*position: absolute;*/
        /*top: 0;*/
        /*left: 0;*/
        /*background-color: var(--red);*/
    }
    /*header.scrolled .logo{*/
    /*    height: 100px;*/
    /*}*/
    header.scrolled a.btn{
        padding: 8px 24px;
        font-size: 18px;
        margin-left: auto;
        background-color: white;
        color: var(--pink);
    }
}



body{
    font-family: "Roboto", sans-serif;
    color: var(--body);
    line-height: 1.3;
}

.pastille{
    border-radius: 100px;
    position: absolute;
    height: 30px;
    width: 30px;
}
.pastille.white{
    background-color: var(--white);
}
.pastille.black{
    background-color: var(--black);
}

/* HEADER */
header{
    position: absolute;
    z-index: 10;
}

header .logo{
    height: 70px;
}

@media screen and (min-width: 768px){
    header .logo{
        margin-top: 0;
        height: 96px;
    }
    .pastille{
        height: 36px;
        width: 36px;
    }
}
@media screen and (min-width: 991px){
    header{
        position: fixed;
        width: 100%;
    }
    .pastille{
        height: 44px;
        width: 44px;
    }
}

/* INTRO */
.intro{
    margin-bottom: 24px;
}
.intro .content{
    padding-top: 24px;
}
.intro .content h1{
    font-size: 28px;
    font-weight: 900;
    line-height: 1.1;
    font-family: "Archer", serif;
    color: var(--orange);
}
.intro .content .subtitle{
    font-family: "Archer", serif;
    font-size: 18px;
    font-weight: 600;
}
.intro .pastille.white{
    bottom: 7px;
    left: 17px;
}
.intro .pastille.black{
    top: 7px;
    left: 17px;
}
.intro .btn-pink{
    margin-top: 40px;
    padding: 16px 32px;
}
@media screen and (min-width: 768px){
    .intro .content h1{font-size: 42px;}
    .intro .content .subtitle{font-size: 34px;}
}
@media screen and (min-width: 991px){
    header .logo {
        height: 80px;
    }
    header a.btn {
        padding: 12px 24px;
    }
    .btn-pink {
        font-size: 18px;
        border-radius: 12px;
    }
    .intro{
        padding-top: 362px;
        /*padding-top: 460px;*/
        padding-bottom: 64px;
        /*padding-bottom: 80px;*/
        background-image: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0)), url("../img/intro-bg.jpg");
        background-size: cover;
        background-position: center;
        color: #ffffff;
        position: relative;
    }
    .intro .content h1 {
        color: white;
        font-size: 32px;
    }
    .intro .content .subtitle {
        font-size: 26px;
    }
    .intro .btn-pink {
        margin-top: 24px;
        padding: 12px 24px;
    }
    .intro .logo-lg-holder{
        bottom: -90px;
        right: 0;
        box-shadow: 0px 3px 6px #00000029;
        clip-path: polygon(10% 16%, 50% 0, 90% 16%, 90% 100%, 10% 100%);
    }
    .intro .logo-lg-holder img{height: 260px}
    .intro .pastille.white{
        left: 50%;
        transform: translate(-50%, 0);
        bottom: calc(44px - 95px);
    }
    .intro .pastille.black{
        left: 50%;
        transform: translate(-50%, 0);
        bottom: calc(23px - 90px - 44px);
        top: auto;
    }
}


/* INFOS */
#donation{
    margin-bottom: 40px;
}
#donation .filters{
    display: flex;
    justify-content: center;
    column-gap: 16px;
    margin-bottom: 8px;
}
#donation .filters button{
    background-color: var(--orange);
    border-radius: 0;
    color: white;
    border: 0;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    padding: 16px 12px;
    opacity: .5;
}
#donation .filters button.active{
    opacity: 1;
}
#donation .ponctuel,
#donation .mensuel{
    row-gap: 16px;
}
#donation input[type="radio"]{display: none;}
#donation input[type="radio"] + label span:not(.amount){display: block;}
#donation input[type="radio"]:checked + label{
    background-color: var(--pink);
}
#donation label,
#donation .freeHolder{
    width: 48%;
    color: var(--white);
    background-color: var(--alpha-pink);
    line-height: 1.15;
    text-align: center;
}
/*#donation .freeHolder span:not(#pfreeSale){*/
/*    font-size: 34px;*/
/*    font-family: "Archer", serif;*/
/*}*/
/*#donation label:hover,*/
/*#donation .freeHolder:hover{background-color: var(--alpha-orange);}*/
#pfree,
#mfree{
    background-color: transparent;
    border: none;
    padding: 0;
    text-align: center;
    font-weight: bold;
    color: white;
    outline: none;
    width: 50%;
    font-family: "Archer", serif;
    font-size: 34px;
}
#donation .freeHolder.active #pfree,
#donation .freeHolder.active #mfree{
    margin-bottom: 4px;
    color: white;
}
#donation .freeHolder{
    padding: 15px 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
}
#donation .freeHolder span{
    font-family: "Archer", serif;
    font-size: 34px;
    line-height: 1;
}
.freeHolder:hover,
.freeHolder.active,
.freeHolder:hover #pfree,
.freeHolder:hover #mfree,
.freeHolder:hover #pfree::placeholder,
.freeHolder:hover #mfree::placeholder,
.freeHolder.active #mfree,
.freeHolder.active #pfree,
.freeHolder.active #pfree::placeholder,
.freeHolder.active #mfree::placeholder,
.freeHolder.active #pfreeSale{color: white;}
#pfree::placeholder,
#mfree::placeholder{
    color: #ffffff67;
}
#donation .freeHolder.active{
    background-color: var(--pink);
}
#donation label span.amount{
    font-size: 34px;
    font-family: "Archer", serif;
}
.donation label span:not(.amount),
#donation #pfreeSale,
#donation #mfreeSale,
#donation #pfreeSale span,
#donation #mfreeSale span{
    font-size: 12px;
    font-weight: 600;
    font-family: "Helvetica", sans-serif;
}

.infos .row.white .img-left{
    background-image: url("../img/bg-img-left.png");
    background-size: cover;
    background-position: top right;
    height: 100%;
    min-height: 300px;
}
.infos .head{
    font-size: 20px;
}
.donation .iscalcul{
    display: none;
}
.donation .iscalcul.active{
    display: flex;
    -webkit-column-gap: 16px;
    -moz-column-gap: 16px;
    column-gap: 16px;
}
.infos .img-right{
    height: 100%;
    min-height: 300px;
    border-bottom-left-radius: 50px;
    background-image: url("../img/bg-img-right.png");
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: end;
    padding: 50px 50px 50px 70px;
    font-weight: 800;
    font-size: 24px;
}
.last{font-size: 18px;}
a.btn-red,
a.btn-white{
    padding: 10px 48px;
    border-radius: 35px;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
}

@media screen and (min-width: 768px){
    .donation .bg-red h2{
        font-size: 30px;
    }
    .donation .bg-red h2 span{
        font-size: 24px;
    }
    .donation label span.amount{font-size: 36px;}
    .donation label span:not(.amount),
    #donation #pfreeSale,
    #donation #mfreeSale{font-size: 18px;}
    #pfreeSale {
        display: block;
        /*margin-top: 16px;*/
    }
    .freeHolder{font-size: 30px}
    #pfree,
    #mfree{
        /*height: 60px;*/
        width: 30%;
        font-size: 32px;
    }
    #content h2 {
        font-size: 28px;
    }
    #donation .filters button {
        padding: 14px 14px;
    }
    #donation .btn-pink {
        padding: 12px 24px;
    }
    a.btn-red,
    a.btn-white{
        font-size: 36px;
        border-radius: 45px;
    }
    .last{font-size: 22px;}
    .infos .row.white .img-left{
        min-height: 500px;
        background-position: center right;
    }
    .infos .img-right{
        min-height: 500px;
        background-position: top;
    }
    #donation .filters button {
        font-size: 20px;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px){
    body{
        font-size: 140%;
    }
    .infos .head {
        font-size: 24px;
    }
    .explanation h2,
    .tab-section h2{
        font-size: 34px !important;
    }
    .explanation h2+p {
        font-size: 20px !important;
    }
    .tab-section .calcul-column .title,
    .tab-section .calcul-column label {
        font-size: 26px !important;
    }
    .explanation h2+p+p.text-white {
        font-size: 24px !important;
    }
    .tab-section .calcul-column .btn-red {
        padding: 12px 24px;
        font-size: 30px !important;
    }
    footer p {
        font-size: 18px !important;
    }
}
@media screen and (min-width: 991px){
    .donation label span.amount{
        font-size: 38px;
    }
    .donation .bg-red{
        padding: 30px 110px;
    }
    .donation .bg-red h2 span{
        font-size: 24px;
    }
    #donation {
        margin-bottom: 24px;
    }
    .infos {
        padding: 24px 0 0px;
    }
    .donation label span:not(.amount),
    #donation #pfreeSale,
    #donation #mfreeSale{font-size: 12px;}
    #donation label span.amount {
        margin-bottom: 16px;
    }
    .infos .container:first-of-type{
        /*max-width: calc(100vw - (200px + 200px));*/
        margin-bottom: 100px;
    }
    #donation .ponctuel, #donation .mensuel {
        row-gap: 8px;
        -webkit-column-gap: 8px;
        -moz-column-gap: 8px;
        column-gap: 8px;
    }
    #donation label, #donation .freeHolder {
        width: 18%;
        padding: 16px 10px
    }
    .infos .container{
        max-width: calc(100vw - (60px + 60px));
        margin-bottom: 100px;
    }
    .infos .container:last-of-type{
        margin-bottom: 0px;
    }
    .infos .row.white{
        --bs-gutter-x: 87px;
        background-color: white;
        box-shadow: inset 4px 3px 6px #00000029;
        padding: 77px 85px;
    }
    .infos .row.white .img-left{
        background-position: bottom right;
        min-height: 500px;
    }
    .infos .img-right{
        background-image: linear-gradient(0deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 50%), url("../img/bg-img-right.png");
        border-bottom-left-radius: 80px;
    }
    a.btn-red,
    a.btn-white{
        font-size: 24px;
        padding: 16px 48px;
    }
    a.btn-red span,
    a.btn-white span{
        font-size: 16px;
    }
    .last{
        width: 82%;
        margin: 0 auto;
        font-size: 24px;
    }
    .donation label,
    .freeHolder{width: 24%;}
    .donation label span.amount{font-size: 28px;}
    .donation label span:not(.amount), #pfreeSale {font-size: 12px;}
    #pfree,
    #mfree{
        /*height: 40px;*/
        font-size: 22px;
        /*width: 80%;*/
    }
    #pfree::placeholder,
    #mfree::placeholder{font-size: 14px;}
    .infos .guillemet-left{
        float: none;
    }
    .infos .guillemet-right{
        margin-bottom: 10px;
        margin-left: 8px;
        float: none;
    }
    #pfreeSale{
        font-size: 14px;
    }
    #pfree::placeholder,
    #mfree::placeholder{
        font-size: 11px!important;
    }
}

@media screen and (min-width: 1600px){
}
@media screen and (min-width: 1200px){
    #pfree::placeholder,
    #mfree::placeholder{font-size: 16px;}
}

@media screen and (min-width: 992px){
    .intro{
        margin-bottom: 0;
    }
    #donation .filters button {
        font-size: 16px;
    }
    .order-lg-6 {
        order: 6 !important;
    }
    .pastille-btn{
        display: block;
        position: absolute;
        top: 50%;
        right: calc(0px - 60px);
        height: 120px;
        width: 120px;
        transform: translate(0, -50%);
    }
    .pastille-reduc{
        display: block;
        position: absolute;
        top: 32%;
        right: calc(0px - 70px);
        height: 120px;
        width: 120px;
        transform: translate(0, -50%);
    }
    .tab-section .container{
        max-width: calc(100vw - (36px + 36px));
    }
    .tab-content {
        padding: 60px 76px;
    }
    .tab-section{
        font-size: 18px;
        padding: 45px 0 85px;
    }
    .tab-section h2{
        font-size: 40px;
    }
    /*.tab-section table{*/
    /*    width: 80%;*/
    /*}*/
    .tab-section .accordion-item{
        padding: 16px 48px;
    }
    .tab-section .calcul-column.active{
        border: 1px solid red;
    }
    .tab-section .calcul-column .inputholder{
        padding: 4px 16px;
    }
    .tab-section #tab-3 .introtxt{
        font-size :15px;
    }
}

/*CONTENT*/
#content .col-12{
    border: 1px solid var(--grey-70);
    padding: 0;
}
#content .col-12.order-lg-1,
#content .col-12.order-lg-4,
#content .col-12.order-lg-5{
    padding: 48px;
}
#content .col-12.order-lg-1,
#content .col-12.order-lg-4,
#content .col-12.order-lg-5{
    padding: 32px 24px 24px;
}
#content h2{
    font-size: 24px;
}
#content .subtitle{
    color: var(--pink);
}
@media screen and (min-width: 992px) {
    #content .col-12.order-lg-2,
    #content .col-12.order-lg-3,
    #content .col-12.order-lg-6{
        background-size: cover;
        background-position: center;
    }
    #content .col-12.order-lg-2{
        background-image: url("../img/content-1.jpg");
    }
    #content .col-12.order-lg-3{
        background-image: url("../img/content-2.jpg");
    }
    #content .col-12.order-lg-6{
        background-image: url("../img/content-3.jpg");
    }
    #content .col-12.order-lg-2,
    #content .col-12.order-lg-4,
    #content .col-12.order-lg-6{
        border-left: 0;
    }
    #content .col-12.order-lg-1,
    #content .col-12.order-lg-2,
    #content .col-12.order-lg-3,
    #content .col-12.order-lg-4{
        border-bottom: 0;
    }
    #content .btn-pink {
        padding: 12px 24px;
    }
}

/*ACTIONS*/
#actions{
    padding: 80px 0 40px;
}
#actions h2{
    color: var(--orange);
    font-size: 24px;
    text-align: center;
    margin-bottom: 24px;
}
#actions .swiper-wrapper{
    padding-bottom: 50px;
}
#actions .action{
    border: 1px solid var(--grey-70);
}
#actions .action .img-holder{
    height: 260px;
    background-position: center;
    background-size: cover;
    border-bottom: 1px solid var(--grey-70);
}
#actions .slide-1 .img-holder,
#actions .action-1 .img-holder{
    background-image: url(../img/action-1.jpg);
}
#actions .slide-2 .img-holder,
#actions .action-2 .img-holder{
    background-image: url(../img/action-2.jpg);
}
#actions .slide-3 .img-holder,
#actions .action-3 .img-holder{
    background-image: url(../img/action-3.jpg);
}
#actions .action .content{
    text-align: center;
    padding: 24px 16px 32px;
    flex-grow: 1;
}
#actions .action .content .title{
    font-size: 22px;
    text-transform: uppercase;
}
#actions .action .content .subtitle{
    font-size: 20px;
    margin-bottom: 24px;
}
#actions .action .content .btn-pink{
    text-transform: uppercase;
    padding: 12px 32px;
    margin-top: 24px;
}

@media screen and (min-width: 992px) {
    #actions{
        padding: 40px 0;
    }
    #actions .action {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    #actions .action .img-holder {
        height: 260px;
    }
    #actions .action .content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #actions .action .content .btn-pink{
        margin-top: auto;
    }
}


/* FOOTER */
footer{
    background-color: var(--orange);
    padding-top: 50px;
    padding-bottom: 120px;
}
footer .logo-holder{
    display: flex;
    align-items: center;
    margin-bottom: 32px;
}
footer .footer-logo{height: 80px;}
footer .footer-logo-baseline{height: 80px;}
footer p{font-size: 16px;}
footer .socials .follow{
    font-size: 16px;
    color: white;
}
footer .socials .icons{
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}
footer .socials .icons a{
    height: 45px;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}
footer .socials img{
    max-height: 45px;
    max-width: 45px;
    vertical-align: middle;
}
footer .socials .links{
    display:flex;
    align-items:center;
    flex-direction: column;
    row-gap: 8px;
    font-size: 16px;
    margin-bottom: 32px;
}
@media screen and (min-width: 768px){
    footer .footer-logo{
        height: 120px;
    }
    footer .footer-logo-baseline{height: 220px;}
    /*footer .socials img{height: 57px;}*/
}
@media screen and (min-width: 991px){
    footer {
        padding-top: 20px;
        padding-bottom: 20px;
        font-size: 14px;
    }
    footer .logo-holder {
        margin-bottom: 0px;
    }
    footer .footer-logo {
        height: 70px;
    }
    footer p {
        padding: 0 0 0 48px;
    }
    footer .socials{
        margin-bottom: 0;
        gap: 32px;
    }
    footer .socials img{height: 20px;}
    footer .socials .follow {
     margin-bottom: 0;
    }
    footer .socials .icons {
        gap: 0px;
        margin-bottom: 0;
    }
    footer .socials .links {
        margin-bottom: 0;
        margin-top: 0!important;
        flex-direction: row;
        gap: 8px;
    }
    footer .credit{margin-left: auto}
}

/* SWIPER */
/*.swiper-pagination{*/
/*    position: initial;*/
/*    padding: 19px 0;*/
/*}*/
/*.swiper-pagination-bullet{*/
/*    height: 19px;*/
/*    width: 19px;*/
/*}*/
/*.swiper-pagination-bullet{*/
/*    background-color: var(--white);*/
/*    border: 1px solid var(--body);*/
/*    opacity: 1;*/
/*}*/
/*.swiper-pagination-bullet-active{*/
/*    background-color: var(--red);*/
/*    border: 1px solid var(--red);*/
/*}*/

.intro .subtitle + p{
    font-size: 17px;
    line-height: 22px;
}
.blue-entry{
    border-radius: 20px 120px 0 0;
    box-shadow: 10px 0 0 var(--alpha-light-blue), 0 5px 5px rgba(0,0,0,.15);
    width: calc(100% - 10px);
    padding: 30px 15px;
}
.blue-entry img{
    height: 93px;
}
.blue-entry img.swoosh{
    top: calc(100% - 34px);
    left: -8px;
    height: 60px;
    transform: rotate(-2deg);
}
.blue-entry.open img.swoosh{
    transform: rotate(-45deg) translate(40px, 40px);
}
.blue-entry p.head span{
    padding: 2px 8px 2px 50px;
    margin-left: -40px;
    font-size: 18px;
}
.blue-entry p{
    line-height: 1.3;
}
.blue-entry a{
    font-size: 26px;
    border-radius: 20px;
}

/*STICKY BUTTON*/
a.sticky-button{
    border-radius: 0;
    background-color: var(--pink);
    padding: 24px 48px;
    color: var(--white);
    font-size: 25px;
    text-decoration: none;
    z-index: 1;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    text-transform: uppercase;
}

@media screen and (min-width: 768px) {
    a.sticky-button{
        font-size: 30px;
    }
}

.accordion-content {
    display: none;
}
.accordion-item.active .accordion-content {
    display: block;
}
.accordion-header {
    cursor: pointer;
    position: relative;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/* Chrome */
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin:0;
}

/* Opéra*/
input::-o-inner-spin-button,
input::-o-outer-spin-button {
    -o-appearance: none;
    margin:0
}

@media screen and (min-width: 1440px){
    .intro .content h1 {
        font-size: 36px;
    }
    #donation label, #donation .freeHolder {
        padding: 32px 10px;
    }
    #donation label span.amount {
        font-size: 40px;
    }
    #pfree, #mfree {
        font-size: 36px;
    }
    #content h2 {
        font-size: 30px;
    }
    #content .col-12.order-lg-1, #content .col-12.order-lg-4, #content .col-12.order-lg-5 {
        padding: 32px 40px 24px 80px;
    }
    #actions .action {
        display: flex;
        flex-direction: column;
    }
    #actions .action .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-grow: 1;
    }
    #actions .action .content .btn-pink{
        margin-top: auto;
    }
}

@media screen and (min-width: 1920px){
    header.scrolled a.logo-link, header.scrolled .logo {
        height: 74px;
    }
    .intro .content h1 {
        font-size: 42px;
    }
    .btn-pink{font-size: 26px}
    header .logo {
        height: 96px;
    }
    header.scrolled a.btn {
        padding: 16px 24px;
        font-size: 26px;
    }
    .intro {
         padding-top: 460px;
        padding-bottom: 80px;
    }
    .intro .content .subtitle {
        font-size: 34px;
    }
    #donation label, #donation .freeHolder {
        padding: 32px 10px;
    }
    #donation label span.amount {
        font-size: 40px;
    }
    #pfree, #mfree {
        font-size: 36px;
    }
    #content h2 {
        font-size: 48px;
    }
    #donation .ponctuel, #donation .mensuel {
        row-gap: 10px;
        -webkit-column-gap: 8px;
        -moz-column-gap: 8px;
        column-gap: 8px;
    }
    #content{
        font-size: 20px;
    }
    #content .col-12.order-lg-1, #content .col-12.order-lg-4, #content .col-12.order-lg-5 {
        padding: 56px 40px 56px 80px;
    }
    #actions {
        padding: 80px 0;
    }
    #actions h2 {
        font-size: 48px;
        margin-bottom: 40px;
    }
    #actions .action {
        display: flex;
        flex-direction: column;
    }
    #actions .action .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        /*height: 100%;*/
        font-size: 20px;
    }
    #actions .action .img-holder {
        height: 306px;
    }
    #actions .action .content .title {
        font-size: 28px;
    }
    #actions .action .content .subtitle {
        font-size: 24px;
    }
    #actions .action .content .btn-pink{
        margin-top: auto;
    }
    footer .footer-logo {
        height: 90px;
        margin-right: 24px;
    }
    footer .socials img {
        height: 25px;
    }
    footer .socials .links {
        margin-left: 80px;
        gap: 24px;
    }
}