/* =========================================================
   STYLE.CSS — Styles desktop (maquette 1920px)
   Base : 1rem = 10px à 1920px (cf. responsive.css)
   ========================================================= */

@font-face {
    font-family: 'Barlow Condensed ExtraBold';
    src: url('../fonts/Barlow/BarlowCondensed-ExtraBold.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Barlow Condensed';
    src: url('../fonts/Barlow/BarlowCondensed-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

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

@font-face {
    font-family: 'DMSans';
    src: url('../fonts/DMSans/DMSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

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

:root {
    --red: #F34743;
    --red-dark: #DD3935;
    --orange: #f0a23a;
    --green: #96c553;
    --cream: #ECE7DC;
    --cream-section: #F3EFE5;
    --dark: #090A08;
    --white: #fff;
    --new : #87110E;
    --font-title: 'Barlow Condensed ExtraBold', Impact, sans-serif;
    --font-text: 'Montserrat', Arial, sans-serif;
    --font-text-small: 'DMSans', Arial, sans-serif;
    --gutter: 24rem;
    --ease: cubic-bezier(.2, .8, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --head-h: 10rem;
    /* Bord déchiré réutilisable (masque SVG) */
    --torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M0 10V6l6-2 7 3 9-4 8 3 10-2 6 3 9-4 8 2 11-3 7 4 9-2 8 3 10-4 7 3 9-1 8-3 10 4 7-2 9 3 11-4 6 3 8-2 7 3V10z'/%3E%3C/svg%3E");
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

.desk {
    display: block;
}

.mob {
    display: none;
}


/* Ancres : compense le header fixe */

section[id],
#equivalences {
    scroll-margin-top: var(--head-h);
}

body {
    font-family: var(--font-text);
    font-size: 1.6rem;
    line-height: 1.5;
    color: var(--dark);
    background: var(--cream-section);
    overflow-x: hidden;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    border: 0;
    background: none;
    cursor: pointer;
    color: inherit;
}

ul,
ol {
    list-style: none;
}


/* Chrome, Safari, Edge, Opera */

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


/* Firefox */

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

.red {
    color: var(--red);
}

.dark {
    color: var(--dark);
}


/* ---------- Titres ---------- */

.title {
    font-family: var(--font-title);
    font-size: 10.5rem;
    line-height: .95;
    text-transform: uppercase;
    color: var(--dark);
    margin-bottom: 1.5rem;
}

.title--light {
    color: var(--white);
}

.title--center {
    text-align: center;
}

.title em {
    font-style: italic;
    font-family: var(--font-title);
}


/* ---------- Boutons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19.808rem;
    height: 6.9rem;
    font-family: var(--font-title);
    font-size: 2.4rem;
    text-transform: uppercase;
    letter-spacing: 0.011rem;
    line-height: 1;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transform: translateZ(0);
    transition: transform .3s var(--ease), filter .3s ease;
    /* La forme déchirée du PNG sert aussi de masque : le liquide reste dans la forme */
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.btn-label {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn:hover {
    transform: translateY(-.4rem);
}

.btn--orange {
    width: auto;
    padding: 0 2.5rem;
    background-image: url('../images/back_cta_orange.png');
    -webkit-mask-image: url('../images/back_cta_orange.png');
    mask-image: url('../images/back_cta_orange.png');
    color: var(--cream-section);
}

.btn--orange_small {
    background-image: url('../images/back_cta_orange_small.png');
    -webkit-mask-image: url('../images/back_cta_orange_small.png');
    mask-image: url('../images/back_cta_orange_small.png');
    height: 6.6rem;
}

.btn--red {
    background-image: url('../images/back_cta_red.png');
    -webkit-mask-image: url('../images/back_cta_red.png');
    mask-image: url('../images/back_cta_red.png');
    color: var(--cream-section);
    height: 6.6rem;
}

.btn--white {
    /* background: var(--white); */
    color: var(--red);
}

.btn--light {
    background-image: url('../images/back_cta_creme.png');
    color: var(--red);
    height: 6.6rem;
}

.hero .btn--light {
    filter: drop-shadow(0 1.2rem 3.5rem rgba(0, 0, 0, .27));
}

.hero .btn--light i {
    font-size: 2.2rem;
}

.arrow_incline_ctn {
    width: 1.3rem;
    display: inline-block;
    margin-left: 2rem;
    transition: transform .3s var(--ease);
}

.btn:hover .arrow_incline_ctn {
    transform: translateX(.5rem);
}


/* ---------- Survol liquide des CTA ----------
   Tous les CTA sauf les clairs (light / white) et .btn--static */

.btn:not(.btn--light):not(.btn--white):not(.btn--static)::before {
    content: '';
    position: absolute;
    z-index: 1;
    left: -20%;
    right: -20%;
    height: 190%;
    bottom: -300%;
    background: #8f101b;
    border-radius: 48% 52% 0 0 / 35% 42% 0 0;
    transform: rotate(-7deg);
    transition: bottom .65s cubic-bezier(.22, 1, .36, 1), border-radius .55s, transform .65s;
}

.btn:not(.btn--light):not(.btn--white):not(.btn--static)::after {
    content: '';
    position: absolute;
    z-index: 1;
    width: 65%;
    height: 130%;
    right: -45%;
    bottom: -360%;
    border-radius: 48% 52% 40% 60%;
    background: #f54850;
    transform: rotate(28deg);
    transition: bottom .78s cubic-bezier(.22, 1, .36, 1), right .78s;
}

.btn:not(.btn--light):not(.btn--white):not(.btn--static):hover::before {
    bottom: -70%;
    border-radius: 43% 57% 0 0 / 45% 50% 0 0;
    transform: rotate(4deg);
}

.btn:not(.btn--light):not(.btn--white):not(.btn--static):hover::after {
    bottom: -68%;
    right: -30%;
}

.btn:not(.btn--light):not(.btn--white):not(.btn--static):active::before {
    bottom: -48%;
}


/* ---------- Bords déchirés ---------- */

.torn-top {
    position: relative;
}

.torn-img {
    overflow: hidden;
}

.torn-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    position: relative;
    height: 100VH;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #111;
    color: var(--white);
}

.hero .bottom_back_section_creme {
    bottom: 0;
    z-index: 2;
}


/* Photo en calque séparé pour la parallaxe (surcadrage scale 1.12) */

.hero__media {
    position: absolute;
    inset: 0;
    background: url(../images/Image_header_1x.webp) center / cover no-repeat;
    transform: scale(1.12);
    transition: transform .4s ease-out;
    will-change: transform;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .35) 60%, rgba(0, 0, 0, .2) 100%);
}

.hero__inner {
    position: relative;
    z-index: 2;
    width: 145rem;
    /* padding: 0 var(--gutter) 16rem; */
}

.hero__title {
    font-family: var(--font-title);
    font-size: 14rem;
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--cream-section);
    padding-bottom: 3.6rem;
    border-bottom: .2rem solid rgba(255, 255, 255, .6);
    /* max-width: 142rem; */
}


/* Entrée du titre : chaque ligne remonte derrière un masque */

.hero__title .line {
    display: block;
    overflow: hidden;
    padding-bottom: .06em;
    margin-bottom: -.06em;
}

.hero__title .line i {
    display: inline-block;
    font-style: normal;
    transform-origin: left bottom;
    animation: letterpress 1.25s var(--ease-out) both;
}

.hero__title .line:nth-child(2) i {
    animation-delay: .15s;
}

.hero__title .line:nth-child(3) i {
    animation-delay: .3s;
}


/* Point final qui se déforme en goutte, puis pulse */

.blood-dot {
    display: inline-block;
    position: relative;
    width: .115em;
    height: .115em;
    margin-left: 1.3rem;
    background: var(--red);
    vertical-align: baseline;
    border-radius: 50%;
    transform-origin: 50% 55%;
    animation: drop-morph 1.1s 1.65s cubic-bezier(.22, 1, .36, 1) both, drop-breathe 4.5s 2.8s ease-in-out infinite;
}

@keyframes drop-morph {
    0% {
        border-radius: 50%;
        transform: rotate(0deg) scale(1);
    }
    40% {
        border-radius: 60% 60% 60% 5%;
        transform: rotate(135deg) scale(1.4);
    }
    100% {
        border-radius: 60% 60% 60% 5%;
        transform: rotate(135deg) scale(1.32);
    }
}

@keyframes drop-breathe {
    0%,
    75%,
    100% {
        filter: brightness(1);
    }
    83% {
        filter: brightness(1.38);
    }
}

@keyframes letterpress {
    0% {
        transform: translateY(130%) skewY(8deg);
        opacity: 0;
        filter: blur(1.5rem)
    }
    65% {
        opacity: 1
    }
    100% {
        transform: translateY(0) skewY(0);
        opacity: 1;
        filter: blur(0)
    }
}

@keyframes hero-copy-in {
    from {
        opacity: 0;
        transform: translateY(2.5rem)
    }
    to {
        opacity: 1;
        transform: none
    }
}

.small_goute {
    display: inline;
    width: 2.217rem;
    margin-left: 2rem;
}

.hero__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: 3.6rem;
    animation: hero-copy-in 1.1s .75s var(--ease-out) both;
}

.hero__text {
    width: 39.2rem;
}

.hero__text * {
    font-size: 2rem;
    font-weight: 600;
}

.hero__stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 62.403rem;
}

.hero__number {
    font-family: var(--font-title);
    font-size: 14rem;
    line-height: .8;
    color: var(--red);
    white-space: nowrap;
    width: 37.26rem;
}

.hero__label {
    font-family: var(--font-title);
    font-size: 2.8rem;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--cream-section);
    width: 23.943rem;
}


/* =========================================================
   HEADER
   ========================================================= */

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 1.4rem 0 3rem;
    height: var(--head-h);
    transition: transform .3s var(--ease), background-color .35s;
    z-index: 50;
}


/* Masqué au scroll vers le bas */


/* .header.scroll-hidden {
    transform: translateY(-120%);
    pointer-events: none;
} */


/* Barre de progression de lecture */

.header__progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: .3rem;
    background: var(--red);
    pointer-events: none;
}

.header__logo {
    position: absolute;
    left: 2.6rem;
    top: 3rem;
    transition: .3s;
}

.hero.scrolled .header {
    background-color: var(--cream);
}

.default_logo {
    width: 18.114rem;
    visibility: visible;
    opacity: 1;
}

.second_logo {
    width: 13.114rem;
    visibility: hidden;
    opacity: 0;
}

.hero.scrolled .header__logo {
    left: 2.6rem;
    top: 50%;
    transform: translateY(-50%);
}

.hero.scrolled .default_logo {
    visibility: hidden;
    opacity: 0;
}

.hero.scrolled .second_logo {
    visibility: visible;
    opacity: 1;
}

.header__logo img {
    width: 100%;
    display: block;
}

.header__nav {
    display: flex;
    gap: 1.6rem;
    /* padding-top: 1rem; */
}

.header__nav a {
    font-family: var(--font-text);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--white);
    position: relative;
    transition: color .35s;
}


/* Soulignement de gauche à droite */

.header__nav a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -.5rem;
    border-bottom: .2rem solid;
    transition: right .3s var(--ease);
}

.header__nav a:hover::after {
    right: 0;
}

.hero.scrolled .header__nav a {
    color: var(--dark);
}

.header__nav a:hover {
    color: var(--red);
}

.toast {
    position: fixed;
    top: calc(var(--head-h) + 1.4rem);
    right: 1.4rem;
    z-index: 59;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.6rem;
    background: var(--cream);
    border-radius: .8rem;
    box-shadow: 0 .6rem 2rem rgba(0, 0, 0, .25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1rem);
    pointer-events: none;
    transition: opacity .35s, transform .35s, visibility .35s, top .3s;
}

.toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}


/* Header masqué → la notification remonte */

.toast.menu-hidden {
    top: 1.4rem;
}

.toast__dot {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #3fb44b;
}

.toast__text {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--dark);
}

.toast__text strong {
    font-family: var(--font-title);
    font-weight: 400;
    font-size: 2rem;
    color: var(--red);
    text-transform: uppercase;
    margin-left: .6rem;
}

.toast__close {
    font-size: 2rem;
    line-height: 1;
    color: var(--red);
    margin-left: 2rem;
}


/* =========================================================
   BARRE DON
   ========================================================= */

.don-bar {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 4rem;
    padding: 0 3rem;
    height: 12.28rem;
    /* background: var(--cream); */
    background-image: url(../images/back_sticky_don.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    /* box-shadow: 0 .4rem 1.6rem rgba(0, 0, 0, .08); */
}

.don-bar__countdown {
    display: flex;
    align-items: center;
    color: var(--dark);
    gap: 2rem;
    margin-left: 6rem;
}

.don-bar__title {
    font-family: var(--font-title);
    font-size: 2.4rem;
    line-height: 1;
    text-transform: uppercase;
}

.don-bar__title span {
    color: var(--red);
}

.countdown {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.countdown__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.1rem;
    height: 6.2rem;
    background: var(--white);
    font-family: var(--font-title);
    font-size: 3.5rem;
    color: var(--red);
}

.countdown small {
    font-family: var(--font-text-small);
    font-size: 1.51rem;
    font-weight: 400;
    margin: 0 0.6rem;
}

.don-bar__amounts {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-left: auto;
}

.amount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 9.7rem;
    height: 7.2rem;
    padding: 0 1.2rem;
    background: var(--white);
    color: var(--red);
    font-family: var(--font-title);
    font-size: 3.5rem;
    line-height: .95;
    transition: background .2s, color .2s;
}

.amount--other {
    font-size: 2.1rem;
}

.amount--other.is-active {
    display: none;
}

.amount:hover,
.amount.is-active {
    background: var(--red);
    color: var(--white);
}

.amount-input {
    display: none;
    width: 9.7rem;
    height: 7.2rem;
    padding: 0 1.2rem;
    box-shadow: 0px 0px 0px 2px rgba(243, 71, 67, 1) inset;
    -webkit-box-shadow: 0px 0px 0px 2px rgba(243, 71, 67, 1) inset;
    -moz-box-shadow: 0px 0px 0px 2px rgba(243, 71, 67, 1) inset;
    border: 0;
    font-family: var(--font-title);
    font-size: 2.6rem;
    color: var(--red);
    background: var(--white);
    outline: none;
}

.amount-input.is-visible {
    display: block;
}

.don-bar__fiscal {
    font-family: var(--font-text-small);
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--dark);
}

.don-bar__fiscal strong {
    font-size: 1.3rem;
    color: var(--red);
}

.don-bar__btn.js-don-link.is-pulsed {
    animation: pulse_shrink 0.3s linear infinite alternate;
    -webkit-animation: pulse_shrink 0.3s linear infinite alternate;
    -moz-animation: pulse_shrink 0.3s linear infinite alternate;
}

@keyframes pulse_shrink {
    100% {
        transform: scale(0.9, 0.9);
    }
}

@-webkit-keyframes pulse_shrink {
    100% {
        -webkit-transform: scale(0.9, 0.9);
    }
}

@-moz-keyframes pulse_shrink {
    100% {
        -moz-transform: scale(0.9, 0.9);
    }
}


/* =========================================================
   FERMES A SANG
   ========================================================= */

.fermes {
    position: relative;
    gap: 8rem;
    padding: 12rem 0 16rem;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.back_section_creme {
    position: absolute;
    left: 0;
    width: 100%;
    /* display: block; */
}

.top_back_section_creme {
    top: -0.7rem;
}

.bottom_back_section_creme {
    bottom: -0.7rem;
    /* transform: rotate(180deg); */
}

.container_section {
    width: 145rem;
    margin: 0 auto;
    position: relative;
}

.container_fermes {
    display: flex;
    align-items: center;
}

.fermes__content {
    flex: 0 0 62rem;
}

.fermes__content p {
    margin-bottom: 2.6rem;
    font-size: 2rem;
    font-weight: 500;
}

.fermes__content .btn {
    margin-top: 1.6rem;
}

.fermes__visual {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
}

.badge {
    position: absolute;
    top: -4rem;
    right: -10rem;
    z-index: 3;
    width: 26.763rem;
    height: 26.763rem;
    border-radius: 50%;
    background: var(--red);
    color: var(--cream-section);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: rotate(-6.4deg);
}

.badge img {
    width: 10.819rem;
    margin-bottom: 1rem;
    filter: brightness(0) invert(1);
}

.badge p {
    font-family: var(--font-title);
    font-size: 2.498rem;
    line-height: 1;
    text-transform: uppercase;
    width: 22.481rem;
}

.badge small {
    font-family: var(--font-text-small);
    font-size: 1.8rem;
    font-weight: 900;
    text-transform: none;
}


/* Slider en goutte */

.drop-slider {
    position: relative;
    width: 58.694rem;
    height: 76.17rem;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' preserveAspectRatio='none'%3E%3Cpath d='M50 0 C65 20 100 50 100 75 A50 50 0 0 1 0 75 C0 50 35 20 50 0 Z' fill='white'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' preserveAspectRatio='none'%3E%3Cpath d='M50 0 C65 20 100 50 100 75 A50 50 0 0 1 0 75 C0 50 35 20 50 0 Z' fill='white'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    /* background: #555; */
    transform-origin: 50% 100%;
}

.drop-slider .slick-list,
.drop-slider .slick-track {
    height: 100%;
}

.drop-slide {
    position: relative;
    height: 100%;
    background-size: cover;
    background-position: center;
}


/* Avant l'init de Slick : on n'affiche que la 1re étape */

.drop-slider:not(.slick-initialized) .drop-slide:not(:first-child) {
    display: none;
}

.drop-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .75) 100%);
}

.drop-slide__caption {
    position: absolute;
    left: 50%;
    bottom: 9rem;
    z-index: 2;
    width: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: var(--white);
}

.drop-slide__step {
    display: block;
    font-family: var(--font-text-small);
    font-size: 1.8rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.drop-slide__step img {
    /* content: ''; */
    display: block;
    width: 3rem;
    /* height: 3rem; */
    margin: 0 auto .6rem;
    /* border: .2rem solid var(--white); */
    /* border-radius: 50%; */
}

.drop-slide__caption h3 {
    font-family: var(--font-title);
    font-weight: 400;
    font-size: 4.5rem;
    line-height: .95;
    text-transform: uppercase;
    width: 25.15rem;
    margin: 0 auto 1rem;
}

.drop-slide__caption p {
    font-size: 1.5rem;
    font-weight: 500;
}

.drop-dots {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 6rem;
    gap: 2.4rem;
}

.drop-dots button {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--red);
    font-size: 0;
    position: relative;
    transition: width .3s, height .3s, box-shadow .3s;
}

.drop-dots button.is-active {
    width: 4.4rem;
    height: 4.4rem;
    font-family: var(--font-title);
    font-size: 1.8rem;
    color: var(--white);
    box-shadow: 0 0 0 .6rem var(--red);
    /* box-shadow: 0 0 0 .4rem var(--cream), 0 0 0 .6rem var(--red); */
}


/* Loader de l'étape active : anneau crème de .4rem dessiné
   par stroke-dashoffset (100 → 0), départ en haut, 7 s linéaire */

.step-loader {
    position: absolute;
    inset: -.4rem;
    width: calc(100% + .8rem);
    height: calc(100% + .8rem);
    overflow: visible;
    pointer-events: none;
    transform: rotate(-90deg);
    opacity: 0;
}

.step-loader circle {
    fill: none;
    stroke: var(--cream);
    stroke-width: 4;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}

.drop-dots button.is-active .step-loader {
    opacity: 1;
}

.drop-dots button.is-active .step-loader circle {
    animation: step-progress var(--step-duration, 7s) linear forwards;
    animation-play-state: paused;
}

.drop-dots.is-running button.is-active .step-loader circle {
    animation-play-state: running;
}

@keyframes step-progress {
    to {
        stroke-dashoffset: 0;
    }
}


/* =========================================================
   VIDEO
   ========================================================= */

.video {
    background: var(--red);
    padding: 22.506rem 0 4.769rem;
    overflow: hidden;
    position: relative;
}

.video .top_back_section_creme {
    top: 0;
}

.video__inner {
    position: relative;
    display: flex;
    align-items: center;
    /* padding-left: 48rem; */
    width: 99rem;
    margin: 0 auto;
}

.video__player {
    position: relative;
    /* flex: 0 0 104rem; */
    width: 100%;
    height: 55.688rem;
    cursor: pointer;
    background: #444;
}

.video__player img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11rem;
    height: 11rem;
    border-radius: 50%;
    background: var(--red);
    transform: translate(-50%, -50%);
    transition: transform .35s, background .35s;
}

.video__play::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 1.6rem 0 1.6rem 2.6rem;
    border-color: transparent transparent transparent var(--white);
}

.video__player:hover .video__play {
    transform: translate(-50%, -50%) scale(1.12);
    background: #b71922;
}

.video__content {
    position: absolute;
    right: -33.9rem;
    top: -15rem;
    z-index: 2;
}

.video__content .title {
    font-size: 10.5rem;
    color: var(--cream-section);
}


/* Bandeau */

.banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.4rem;
    padding: 4rem 3rem 6rem;
    background: var(--new);
    color: var(--cream-section);
    text-align: center;
}

.banner .small_goute {
    margin-left: 0;
}

.banner p {
    font-family: var(--font-title);
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}


/* =========================================================
   COMMERCE
   ========================================================= */

.commerce {
    /* background: var(--cream); */
    padding: 10rem 0 12rem;
    position: relative;
    z-index: 1;
}

.commerce__head {
    max-width: 62rem;
    margin-bottom: 8rem;
}

.commerce__head p {
    font-size: 2rem;
    font-weight: 500;
}

.cards-slider__track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6rem;
}

.slider-dots {
    display: none;
}

.route-card {
    display: flex;
    gap: 5rem;
}

.route-card__img {
    position: relative;
    flex: 0 0 33.122rem;
    height: 48rem;
}

.route-card__icon {
    position: absolute;
    left: 2.4rem;
    bottom: 2.4rem;
    width: 3.6rem !important;
    height: auto !important;
    object-fit: unset;
}

.route-card__body {
    display: flex;
    flex-direction: column;
    width: 30.5rem;
}

.route-card__body h3 {
    font-family: var(--font-title);
    /* font-weight: 400; */
    font-size: 4.5rem;
    line-height: .95;
    text-transform: uppercase;
    margin-bottom: 2.4rem;
}

.route-card__body p {
    font-family: var(--font-text-small);
    font-weight: 400;
    font-size: 1.7rem;
    margin-bottom: 3rem;
}

.route-card__body .btn {
    margin-top: auto;
    align-self: flex-start;
    width: 100%;
    height: 5.8rem;
    font-size: 2.2rem;
    background-image: url(../images/back_cta_orange_medium.png);
    -webkit-mask-image: url(../images/back_cta_orange_medium.png);
    mask-image: url(../images/back_cta_orange_medium.png);
}


/* =========================================================
   AVANTAGE FISCAL
   ========================================================= */

.fiscal {
    background: var(--green);
    padding: 12rem var(--gutter) 10rem;
    z-index: 1;
}

.fiscal__inner {
    display: flex;
    align-items: center;
    gap: 6rem;
}

.fiscal__img {
    flex: 0 0 33.122rem;
    /* height: 46rem; */
}

.fiscal__content {
    flex: 1;
    color: var(--white);
    width: 54.6rem;
}

.fiscal__content .title {
    font-size: 6.5rem;
    line-height: 1;
}

.fiscal__content p {
    font-size: 2rem;
    font-weight: 500;
    color: var(--dark);
    max-width: 42.7rem;
}

.fiscal__chart {
    flex: 0 0 37.264rem;
    text-align: center;
}

.donut {
    position: relative;
    width: 38rem;
    height: 38rem;
    margin: 0 auto 3rem;
}


/* Anneau SVG : part rouge = coût réel, piloté en JS (100 → 34 €) */

.donut__svg {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.donut__svg circle {
    fill: none;
    stroke-width: 14.74;
}

.donut__track {
    stroke: var(--cream);
}

.donut__cost {
    stroke: var(--red);
    stroke-dasharray: 100;
    stroke-dashoffset: 66;
}

.donut__center {
    position: absolute;
    inset: 14.74%;
    border-radius: 50%;
    background: var(--green);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--white);
}

.donut__center small {
    font-family: var(--font-title);
    font-size: 2.2rem;
    font-weight: 600;
}

.donut__center span {
    font-family: var(--font-title);
    font-weight: 900;
    font-size: 10.647rem;
    line-height: 0.8;
}

.fiscal__chart p {
    font-size: 2rem;
    font-weight: 400;
    margin-bottom: 2.4rem;
}

.fiscal__chart .btn {
    width: 100%;
    font-size: 2.2rem;
    background-image: url(../images/back_cta_red_medium.png);
    -webkit-mask-image: url(../images/back_cta_red_medium.png);
    mask-image: url(../images/back_cta_red_medium.png);
}


/* =========================================================
   NOS COMBATS
   ========================================================= */

.combats {
    display: flex;
    background: var(--red);
    color: var(--white);
}

.combats__content {
    flex: 0 0 58%;
    padding: 10rem 8rem 10rem var(--gutter);
}

.combats__content .title {
    font-size: 10.5rem;
}

.combats__intro {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 5rem;
}

.combats__list {
    margin-bottom: 5rem;
}

.combats__list li {
    margin-bottom: 3.6rem;
}

.combats__list h3 {
    font-family: var(--font-title);
    font-weight: 900;
    font-size: 4.5rem;
    line-height: 1;
    text-transform: uppercase;
}

.combats__list h3 span {
    margin-right: 1rem;
    width: 5rem;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}

.combats__list p {
    font-family: var(--font-text-small);
    font-size: 2rem;
    font-weight: 400;
    padding-left: 6rem;
    max-width: 58rem;
}

.combats__img {
    flex: 1;
    /* background: #8a1e1a; */
}

.combats__img img {
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
}


/* =========================================================
   VOTRE DON AGIT
   ========================================================= */

.impact {
    /* background: var(--cream); */
    padding: 12rem var(--gutter) 14rem;
}

.impact .title {
    margin-bottom: 8rem;
}

.impact .cards-slider__track {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    /* padding: 0 6rem; */
    width: 128rem;
    margin: 0 auto;
}

.impact-card {
    width: 40rem;
    display: flex;
    flex-direction: column;
    padding: 3.6rem 3.3rem 3.6rem;
    /* background: var(--red); */
    background-image: url(../images/back_equivalence_card.png);
    background-repeat: no-repeat;
    background-size: contain;
    color: var(--white);
    /* clip-path: polygon(0 1%, 100% 0, 99.5% 100%, .5% 99%); */
}

.impact-card__icon {
    width: 6.4rem;
    /* height: 4.4rem; */
    margin-bottom: 1.5rem;
    /* border: .3rem solid var(--white); */
}


/* .impact-card__icon--loop {
    border-radius: 50%;
    border-right-color: transparent;
} */


/* .impact-card__icon--megaphone {
    clip-path: polygon(0 30%, 60% 0, 100% 0, 100% 100%, 60% 100%, 0 70%);
} */

.impact-card__icon--balance {
    /* border-width: .3rem 0 0; */
    /* border-radius: 0; */
    position: relative;
}

.impact-card__label {
    font-family: var(--font-title);
    font-size: 2.4rem;
    line-height: 1;
    text-transform: uppercase;
}

.impact-card__amount {
    font-family: var(--font-title);
    font-size: 10rem;
    line-height: 0.8;
}

.impact-card__fiscal {
    font-size: 1.6rem;
    /* font-weight: 700; */
    font-style: italic;
    margin-top: 2rem;
    margin-bottom: 2.5rem;
    line-height: 1.2;
    /* opacity: .9; */
}

.impact-card__fiscal span {
    /* font-weight: 200; */
}

.impact-card__text {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 2rem;
}

.impact-card .btn {
    margin-top: auto;
    width: 100%;
    font-size: 1.87rem;
    height: 6.4rem;
    background-image: url(../images/back_cta_creme_medium.png);
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer {
    padding: 5rem 0 16rem;
    background: var(--dark);
    color: var(--white);
}

.container_footer {
    width: 131.942rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 3rem;
}

.footer__logo img {
    width: 12rem;
}

.footer__links {
    display: flex;
    gap: 3rem;
}


/* .footer__links li {} */

.footer__links li a {
    font-family: 'Barlow Condensed';
    font-size: 1.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.footer__links a:hover {
    color: var(--red);
}

.footer__socials {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* gap: 1.6rem; */
    margin-left: auto;
    width: 13.9rem;
}

.social {
    display: block;
    width: 2.4rem;
    /* height: 2.4rem; */
    /* border-radius: .6rem; */
    /* background: var(--white); */
    color: var(--cream-section);
    text-align: center;
    font-size: 2.15rem;
    transition: .2s;
}

.social:hover {
    color: var(--white);
}

.social--fb,
.social--ig {
    border-radius: 50%;
}

.footer__trust {
    display: flex;
    align-items: center;
    gap: 2rem;
    max-width: 46rem;
}

.footer__trust img {
    width: 9rem;
    flex: 0 0 auto;
}

.footer__trust p {
    font-family: var(--font-text-small);
    font-weight: 400;
    font-size: 1.2rem;
    /* opacity: .8; */
    width: 24.4rem;
}


/* =========================================================
   MODALE VIDEO
   ========================================================= */

.credit-popup {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    z-index: 999999;
}

.credit-popup-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 2rem;
}

.credit-popup-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    border: 0;
    background: transparent;
    color: var(--red-dark);
    font-size: 7rem;
    cursor: pointer;
}

.credit-container span {
    display: block;
    margin-top: 0.5rem;
}

body.credit-popup-open {
    overflow: hidden;
}


/* =========================================================
   MODALE VIDEO
   ========================================================= */

.modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal.is-open {
    display: flex;
}

.modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .85);
}

.modal__box {
    position: relative;
    width: 120rem;
    max-width: 92vw;
    aspect-ratio: 16 / 9;
}

.modal__frame,
.modal__frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.modal__close {
    position: absolute;
    top: -5rem;
    right: 0;
    font-size: 4.4rem;
    color: var(--white);
    line-height: 1;
}


/* =========================================================
   ANIMATIONS D'APPARITION
   ========================================================= */

.reveal {
    opacity: 0;
    transform: translateY(5rem);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}


/* =========================================================
   MOUVEMENT RÉDUIT
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .hero__title .line i,
    .hero__bottom {
        animation: none;
    }
    .blood-dot {
        animation: none;
        border-radius: 60% 60% 60% 5%;
        transform: rotate(135deg) scale(1.32);
    }
    .hero__media {
        transition: none;
        transform: none;
    }
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .header,
    .toast {
        transition: none;
    }
    .toast {
        transform: none;
    }
    /* CTA : état de survol conservé, sans remplissage animé */
    .btn::before,
    .btn::after {
        display: none;
    }
    .btn,
    .arrow_incline_ctn {
        transition: filter .2s;
    }
    .btn:hover,
    .btn:hover .arrow_incline_ctn {
        transform: none;
    }
    .btn:hover {
        filter: brightness(.88);
    }
    .don-bar__btn.js-don-link.is-pulsed {
        animation: none;
    }
    /* Cycle : loader masqué, anneau crème plein */
    .step-loader {
        display: none;
    }
    .drop-dots button.is-active {
        box-shadow: 0 0 0 .4rem var(--cream), 0 0 0 .6rem var(--red);
    }
    .video__play {
        transition: none;
    }
}