/* media query */

@media (min-width:769px) {
    html {
        font-size: .5208333333333333vw;
    }
}

@media (max-width:768px) {
    html {
        /* font-size: 1.302083333333333vw; */
        font-size: 2.350833vw;
    }
    body {
        position: relative;
        height: 100vh;
    }
    .desk {
        display: none !important;
    }
    .mob {
        display: block !important;
    }
    .page {
        overflow-x: hidden;
    }
    /* header */
    header {
        padding: 0 0;
    }
    .home header {
        background-color: #E7E7EF;
    }
    /* site-header */
    .site-header {
        position: relative;
        top: inherit;
        left: inherit;
        flex-direction: column;
        justify-content: center;
        height: 11.9rem;
        background-color: var(--primary-bg);
        transition: .15s;
    }
    .home .site-header {
        height: 11.9rem;
    }
    .home header.site-header {
        visibility: visible;
        opacity: 1;
        height: 11.9rem;
    }
    .home header.site-header.hidden {
        visibility: hidden;
        opacity: 0;
        height: 0;
    }
    body.on_ios .site-header {
        height: 8.9rem;
    }
    .logo_apr {
        width: 28rem;
    }
    .site-header .btn-don {
        display: none;
    }
    /* home page */
    .fp-section {
        flex-direction: column;
    }
    .fp-section.q {
        padding-top: 11.9rem;
    }
    #header {
        background: var(--primary-light);
    }
    #header.fp-section {
        /* align-items: flex-start; */
        align-items: center;
    }
    .hero-card {
        /* width: 36.2rem; */
        width: 42.2rem;
        padding: 3.6rem 2.5rem 1rem;
        margin-top: -11.9rem;
        transform: scale(0.9);
    }
    body.on_ios .hero-card {
        margin-top: -10rem;
    }
    body.on_ios .hero-card h1,
    body.on_ios .hero-year {
        font-size: 3.8rem;
    }
    .hero-card h1,
    .hero-year {
        font-size: 4.8rem;
    }
    .hero-card h1 {
        margin: 0 0 3.2rem;
    }
    .hero-year {
        margin-top: 1.6rem;
        padding: 0.8rem 3rem;
    }
    .hero-card p.lead {
        font-size: 1.8rem;
        margin: 0 0 1rem;
    }
    .hero-card p.sub {
        font-size: 1.8rem;
        width: auto;
        margin: 0 auto 4rem;
    }
    .home>.btn-don {
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 400;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        width: 100%;
    }
    .time_requis {
        width: 22.8rem;
    }
    #down-arrow {
        bottom: 17.9vh;
        bottom: 15rem;
    }
    body.on_ios #down-arrow {
        bottom: 17rem;
        font-size: 3rem;
    }
    .card {
        /* width: 36.2rem; */
        width: 44.2rem;
        height: auto;
        padding: 2rem 2rem 4rem;
        margin-top: 0;
        border-radius: 2rem;
        border-bottom-right-radius: 2rem;
        transform: translateY(-15vh) scale(0.85);
    }
    body.on_ios .card {
        transform: translateY(-15vh) scale(0.85);
    }
    .step-count {
        font-size: 1.8rem;
    }
    .card h2 {
        font-size: 1.93rem;
        margin: 0 0 2rem;
    }
    .subtitle {
        font-size: 2rem;
        margin: 1.2rem 0 2rem;
    }
    .opt-grid {
        flex-direction: column;
        margin-bottom: 0;
    }
    .opt-grid .opt {
        width: 100%;
        margin-bottom: 2rem;
        padding: 1rem 1.8rem;
        font-size: 1.8rem;
    }
    .opt-grid.cols-1 .opt {
        margin-bottom: 2rem;
    }
    .validate-btn {
        margin-top: 0;
        font-size: 1.8rem;
        padding: 1.4rem;
    }
    .step-arrows {
        width: 2.2rem;
        right: 1rem;
        left: unset;
        bottom: 50%;
        flex-direction: column;
        transform: translate(50%, 0);
    }
    .step-arrows button:hover:not(:disabled) {
        transform: scale(1);
    }
    .checkbox-label {
        margin-bottom: 1.5rem;
    }
    body>.step-arrows.hidden {
        display: flex;
        opacity: 0;
        visibility: hidden;
    }
    body>.step-arrows {
        display: flex;
        opacity: 1;
        visibility: visible;
        /* width:100%; */
        transition: .3s;
    }
    .card .step-arrows {
        display: none;
    }
    .checkbox-label span {
        font-size: 1.6rem;
    }
    #q8 .card {
        padding-bottom: 1rem;
    }
    .step-arrows button {
        font-size: 1.5rem;
        border-radius: 5rem;
        width: 100%;
        height: 5rem;
    }
    .step-arrows button.nav-prev {
        border-top-left-radius: 1rem;
        border-bottom-left-radius: 0;
    }
    .step-arrows button.nav-next {
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 0;
    }
    .step-arrows button {}
    .step-arrows button i {
        /* transform: rotate(90deg); */
    }
    .opt-grid.cols-2 .opt {
        width: 100%;
    }
    .opt-grid.cols-2 {
        gap: 0;
    }
    .opt-grid.force_grid {
        display: flex;
        gap: 0;
    }
    .opt.tile {
        text-align: center;
    }
    .formulaire {
        margin-top: 0;
    }
    .field {
        margin-bottom: 1.5rem;
    }
    .field-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .field label {
        font-size: 1.8rem;
    }
    .consent {
        font-size: 1.4rem;
    }
    .block_error {
        width: 100%;
        bottom: 1rem;
    }
    /* page merci */
    /* first_viewport */
    .first_viewport {
        /* display: block; */
        /* height: calc(100vh - 11.9rem); */
        height: auto;
        padding-bottom: 0;
    }
    .hero {
        background-image: none;
        min-height: auto;
        padding-top: 1rem;
        margin-bottom: 2rem;
    }
    .hero .confirm {
        width: 100%;
        margin-right: 0;
        margin-top: 0rem;
    }
    .msg_thanks {
        font-size: 1.8rem;
        font-weight: 400;
        margin-bottom: 1.5rem;
        display: inline-block;
    }
    .hero h1 {
        font-size: 9.5rem;
    }
    .hero .sub {
        font-size: 3.2rem;
    }
    .pic_hero {
        width: 36.2rem;
        /* width: 31.2rem; */
        /* min-height: 20rem; */
        min-height: 24rem;
        margin: 0 auto;
        border-radius: 5rem;
        border-top-right-radius: 0;
        border-bottom-left-radius: 0;
        overflow: hidden;
    }
    .pic_hero img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* .cta-band  */
    .cta-band {
        margin-top: 0;
        width: 36.2rem;
        margin-left: auto;
        margin-right: auto;
        /* padding: 0.5vh 0 11.5vh; */
        padding: 0.5vh 0 9.5vh;
    }
    .cta-band p.lead {
        /* font-size: 1.92rem; */
        font-size: 1.62rem;
        margin-bottom: 0.8vh;
    }
    .cta-band .chevron {
        margin-top: 0;
    }
    .cta-band .fine-print {
        width: 36.2rem;
    }
    /* section{
        display: block;
        position: relative;
    } */
    .cta-band .btn-don {
        position: fixed;
        bottom: 0;
        left: 0;
        /* transform: translateX(-50%); */
        width: 100%;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        z-index: 9999;
    }
    .btn-don:hover {
        transform: scale(1);
    }
    /* stats */
    .stats {
        padding: 3rem 0 0;
        width: 100%;
        background-color: var(--gray-bg);
    }
    .blc_stats {
        width: 36.2rem;
        margin: -5rem auto 0;
        padding: 2rem 0;
        background-color: #ffffff;
        border-radius: 1rem;
        /* border-top-left-radius: 0;
        border-top-right-radius: 0; */
    }
    .stats .label {
        font-size: 1.8rem;
        margin-bottom: 1.5rem;
    }
    .stats .numbers {
        gap: 2rem;
    }
    .stat-block {
        width: 14rem;
    }
    .stats .stat-block .num {
        font-size: 6rem;
    }
    .stats .stat-block .desc {
        font-size: 1.4rem;
    }
    .stats h2 {
        font-size: 1.8rem;
        color: var(--primary-bg);
        margin-top: 2rem;
    }
    /* cards-don-section */
    .cards-don-section {
        padding: 3rem 0 3rem;
    }
    .blc_cards_don {
        flex-direction: column;
        width: 36.2rem;
        gap: 3rem;
        margin: 3rem auto 5rem;
    }
    .card_don:hover {
        transform: scale(1);
    }
    .card-head {
        padding: 2rem 0 0;
        font-size: 1.6rem;
        line-height: 1.6;
    }
    .card_don .card-caption {
        margin-bottom: 2rem;
        padding: 0 2rem;
    }
    .card-photo img {
        display: block;
        width: 100%;
    }
    .card_don .card-body {
        height: auto;
    }
    .fine-print {
        width: 36.2rem;
        margin: 0 auto;
        color: var(--primary-bg);
        font-size: 1.8rem;
    }
    .card_don {
        width: 100%;
    }
    .card_don .amount {
        font-size: 3rem;
    }
    .card_don .after-tax {
        font-size: 2rem;
    }
    .card_don .desc {
        font-size: 2rem;
        height: auto;
    }
    .card_don .btn-don {
        font-size: 3rem;
    }
    /* .share */
    .share {
        padding: 0 0 3rem;
    }
    .blc_share {
        width: 36.2rem;
        margin: 0 auto;
        position: relative;
        padding: 3rem 0;
    }
    .share p {
        font-size: 1.6rem;
    }
    .share::after {
        content: none;
    }
    .blc_share::after {
        content: '';
        height: 0.2rem;
        background-color: var(--primary-bg);
        position: absolute;
        width: 36.2rem;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .blc_share::before {
        content: '';
        height: 0.2rem;
        background-color: var(--primary-bg);
        position: absolute;
        width: 36.2rem;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    /* .site-footer */
    .site-footer {
        flex-direction: column;
        height: auto;
        padding: 4rem 0 13rem;
    }
    .site-footer .socialMedia {
        margin-left: 0;
        margin-top: 4rem;
        margin-bottom: 4rem;
    }
    .right_footer,
    .site-footer .links {
        flex-direction: column;
        gap: 1.8rem;
    }
}

@media (max-width:1920px) and (min-width:1024px) and (max-height:960px) {
    /* homepage */
    .hero-card {
        transform: scale(0.9);
    }
    .card {
        transform: scale(0.8);
    }
}

@media (max-width:1920px) and (min-width:1024px) and (max-height:1035px) {}


/* hack mobile */

@media (max-width:768px) and (min-width:320px) and (max-height:825px) {}

@media all and (min-aspect-ratio: 1920/1080) and (orientation: landscape) {
    /* page merci */
    .hero {
        min-height: 53rem;
    }
    .cta-band {
        /* padding: 13vh 0; */
        /* margin-top: 0; */
    }
    .cta-band>* {
        transform: scale(0.8);
    }
    .cta-band p.lead {
        margin: 1vh auto;
        /* font-size: 2.6vh; */
    }
    .cta-band .btn-don {
        /* transform: scale(0.85); */
        /* font-size: 2.2vh; */
        /* padding: 1.6rem 10.9rem; */
    }
    .cta-band .btn-don:hover {
        transform: scale(0.9);
    }
    .fine-print {
        margin-top: 2vh;
        font-size: 2.4vh;
    }
    .cta-band .chevron {
        margin: 1vh auto 0;
        font-size: 3.4rem;
    }
    .hero .confirm {
        transform: scale(0.8);
    }
}

@media all and (min-aspect-ratio: 1.7778) and (orientation: landscape) {}

@media only screen and (min-device-width: 414px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}