:root {
    /* Typographie */
    --font-title: "Chakra Petch", Sans-serif;
    --font-text: "Poppins", Sans-serif;

    /* Layout */
    --admin-bar: 32px;
    --px-global: 20px;
    --listing-gap: 16px;
    --header-height: 150px;
    --nav-height: 100px;

    /* Couleurs Principales (Mapping direct) */
    --orange-brand: #FF4C2E;
    --blue-light-brand: #73CDFF;
    --blue-dark-brand: #326DC3;
    --orange-light: #FF745D;
    --orange-dark: #BB260D;
    --blue-light: #C7EBFF;
    --blue-dark:  #4C9AC5;
    --blue-dark-dimafor:  #252C34;

    /* Neutral */
    --light: #21241B; 
    --grey: #3D483A;
    --grey-mid: #E3F2DC;
    --grey-dark: #ADABA2;
    --dark: #0E1108;

    /* DIMAFOR */
    --dimafor-grey: #858A91;
    --dimafor-dark-blue: #242C34;
    --text: #D0D2D6;
}

.clr-primary{
    color: var(--orange-brand);
}

.clr-secondary{
    color: var(--blue-light-brand);
}

.clr-text{
    color: var(--text);
}

.font-title-family{
    font-family: var(--font-title) !important;
}

.font-text-family{
    font-family: var(--font-text) !important;
}

.normal-case{
    text-transform: capitalize !important;
}

.elementor-button-link{
    height: 50px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: .2s;
    z-index: 1 !important;
    background: radial-gradient(362.39% 59.75% at 94.16% 4.15%, 
                rgba(187, 38, 13, 0.10) 23%, 
                rgba(25, 29, 35, 0.10) 100%), 
                rgba(187, 38, 13, 0.25) !important;

}

.elementor-button-link:hover{
    transition: .2s;
    opacity: .7;
}

.has-icon .elementor-button-link .elementor-button-icon svg{
    width: 12px !important;
}

.button-urgent .elementor-button-link .elementor-button-icon svg path{
    fill: #FF4C2E;
}

.site-global-border,
.elementor-button-link,
.wpforms-field:not(.wpforms-field-name),
.wpforms-field-row-block{
    position: relative;
    border: 1px solid transparent !important;
    background-clip: padding-box !important;
}

.elementor-button-link{
    border-radius: 8px !important;
    background: radial-gradient(362.39% 59.75% at 94.16% 4.15%, 
                rgba(187, 38, 13, 0.15) 23%, 
                rgba(25, 29, 35, 0.15) 100%), 
                rgba(187, 38, 13, 0.25) !important;
}

.site-global-border::after,
.elementor-button-link::after,
.wpforms-field:not(.wpforms-field-name)::after,
.wpforms-field-row-block::after{
    content: "";
    position: absolute;
    top: -1px; left: -1px; right: -1px; bottom: -1px; /* On couvre l'épaisseur de la bordure */
    border-radius: 16px;
    padding: 1px; /* Doit être égal à l'épaisseur de la bordure */
    
    /* LE DÉGRADÉ DE LA BORDURE */
    background: linear-gradient(0deg, #FF4C2E 0%, #C7EBFF 100%) !important;

    /* LA MAGIE DU MASQUE : On dit au navigateur de "creuser" le centre */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, 
                  linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    
    pointer-events: none;
    /* z-index: -1; */
}

.elementor-button-link::after{
    border-radius: 8px !important;
}

.site-global-border.style-2::after{
    background: linear-gradient(34deg, #D0D2D6 13%, #242C34 98%) !important;
}

.site-global-border.style-3::after,
.wpforms-field:not(.wpforms-field-name)::after,
.wpforms-field-row-block::after{
    background: radial-gradient(362.39% 59.75% at 94.16% 4.15%, 
                rgba(25, 29, 35, 0.20) 23.08%, /* Noir Neutre à 20% */
                rgba(255, 76, 46, 0.20) 100%   /* Orange Brand à 20% */
                ), 
                rgba(133, 138, 145, 0.25) !important; /* Fond gris de base */
}

.wpforms-field:not(.wpforms-field-name)::after,
.wpforms-field-row-block::after{
    border-radius: 8px !important;
}

.back-form {
    position: relative;
    /* On définit une base sombre pour que le rouge ressorte */
    background-color: #191D2320 !important; 

    /* DÉGRADÉ LINÉAIRE : du bas (rouge) vers le haut (transparent) */
    background-image: linear-gradient(
        190deg, 
        rgba(255, 76, 46, 0) 0%,
        rgba(255, 76, 46, 0.06) 100% 
    ) !important;

    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.is-badge{
    position: relative;
    border: 1px solid transparent; /* L'épaisseur de ta bordure */
    border-radius: 16px !important;
    background-clip: padding-box;
}

.is-badge::after{
    content: "";
    position: absolute;
    top: -1px; left: -1px; right: -1px; bottom: -1px; /* On couvre l'épaisseur de la bordure */
    border-radius: 16px;
    padding: 1px; /* Doit être égal à l'épaisseur de la bordure */
    
    /* LE DÉGRADÉ DE LA BORDURE */
    background: linear-gradient(0deg, #FF4C2E 0%, #C7EBFF 100%) !important;

    /* LA MAGIE DU MASQUE : On dit au navigateur de "creuser" le centre */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, 
                  linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    
    pointer-events: none;
    z-index: -1;
}

.is-badge.style-3,
.is-badge.style-3::after,
.site-global-border.style-3::after{
    border-radius: 24px !important;
}

.hero {
    /* 1. On définit la couleur de fond de base (ton gris très sombre/noir) */
    /* background-color: #191D23 !important; */

    /* 2. On applique le dégradé radial et les éventuels motifs de fond */
    background-image: 
        radial-gradient(107.6% 50.25% at 50% 123.8%, #FF4C2E 0%, #FF4C2E00) !important;
    
    /* 3. Réglages de positionnement pour que le dégradé vienne du bas */
    background-repeat: no-repeat !important;
    background-size: cover !important;
    
    /* Optionnel : Si tu veux garder l'aspect "texture" du lightgray de Figma */
    position: relative;
    overflow: hidden;

    /* min-height: calc(100vh - var(--header-height)) !important; */
    min-height: calc(100vh - var(--header-height)) !important;
}

.hero > div{
    position: relative !important;
}

.hero-bg{
    position: absolute !important;
    right: -15em;
    bottom: -32px;
}

.hero-bg{
    height: 100% !important;
}

.hero-bg *{
    width: 100% !important;
    height: 100% !important;
}

.hero-bg img{
    object-fit: contain !important;
    object-position: bottom;
}

.hero-content{
    max-width: 620px !important;
}

.block-dm9x{
    max-width: 430px !important;
}

.block-deazo9{
    background: radial-gradient(362.39% 59.75% at 94.16% 4.15%, rgba(187, 38, 13, 0.10) 23%, rgba(25, 29, 35, 0.10)) 100%, linear-gradient(0deg, rgba(187, 38, 13, 0.25) 0%, rgba(187, 38, 13, 0.25) 100%), #252C34;
}

ul li::marker,
ol li::marker{
    font-size: 14px !important;
}

.back-orange-dark {
    background-color: rgba(187, 38, 13, 0.25) !important;
    background-image: radial-gradient(
        362.39% 59.75% at 94.16% 4.15%, 
        rgba(187, 38, 13, 0.10) 23%, 
        rgba(25, 29, 35, 0.10) 100%
    ) !important;
    background-repeat: no-repeat !important;
}

.black-bg-radial {
    background-color: #242C34 !important;
    background-image: radial-gradient(
        362.39% 59.75% at 94.16% 4.15%, 
        rgba(255, 76, 46, 0.10) 23.08%,
        rgba(37, 44, 52, 0.10) 100% 
    ) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.bg-transparent-radial{
    background-color: #242C34 !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
}

.grid-etapes > *{
    border-radius: 8px !important;
}

.grid-etapes > *::after{
    border-radius: 8px !important;
}

.block-title{
    max-width: 690px !important;
}

.grid-tailles > .e-con-inner > *{
    max-width: calc(100% / 4 - 16px + 16px / 4) !important;
}

.wpforms-container .wpforms-field, .wp-core-ui div.wpforms-container .wpforms-field{
    padding: 0 !important;
}

.wpforms-submit-container{
    margin-top: 8px !important;
}

[type="text"],
[type="email"],
select{
    height: 54px !important;
    color: #C8CAD3 !important;
}

textarea{
    color: #C8CAD3 !important;
}

[type="text"]::placeholder,
[type="email"]::placeholder,
select::placeholder,
textarea::placeholder{
    color: #C8CAD3 !important;
}

[type="text"],
[type="email"],
textarea,
select{
    background-color: #858A9140 !important;
    border-radius: 7px !important;
    border: none !important;
}

#wpforms-form-348 .wpforms-field-container{
    display: flex !important;
    flex-wrap: wrap;
    gap: 16px !important;
}

#wpforms-form-348 .wpforms-field-container > *{
    width: 100% !important;
}

#wpforms-form-348 .wpforms-field-container > #wpforms-348-field_6-container,
#wpforms-form-348 .wpforms-field-container > #wpforms-348-field_4-container{
    width: calc(100% / 2 - 16px + 16px / 2) !important;
}

.wpforms-submit-container{
    margin-top: 16px !important;
    text-align: center !important;
}

.wpforms-submit{
    background-color: #FF4C2E !important;
    color: #FAFBFF !important;
    text-transform: uppercase !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
}

textarea{
    min-height: 180px !important;
    height: unset !important;
}

.spiral-1-wrapper{
    position: absolute !important;
    top: 10em !important;
    z-index: -1 !important;
    width: 100% !important;
}

.spiral-2-wrapper{
    position: absolute !important;
    top: -8em !important;
    left: -20em !important;
    min-width: calc(100% + 20em) !important;
    height: calc(100% + 8em) !important;
    overflow: hidden;
    pointer-events: none;
}

.spiral-1-wrapper .elementor-icon,
.spiral-1-wrapper svg,
.spiral-2-wrapper .elementor-icon,
.spiral-2-wrapper svg{
    width: 100% !important;
}

.block-slm29{
    position: absolute !important;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(180deg, #191D23 0%, #252C34 48.42%, #252C34 100%) !important;
}

.back-orange-1{
    background: linear-gradient(207deg, #673C39 0%, #663D39 50%, #503434 100%) !important;
}

.back-orange-2{
    background: linear-gradient(207deg, #4F2B29 0%, #67302B 50%, #662F29 100%) !important;
}

.back-orange-3{
    background: linear-gradient(207deg, #512420 0%, #402221 50%, #3F2121 100%) !important;
}

.bg-grid{
    position: absolute !important;
    right: 0;
    bottom: -15em;
}

.text-d3nc7{
    min-height: 56px !important;
}

.block-23fd424{
    overflow-x: clip !important;
}

.video-presentation *{
    aspect-ratio: 9 / 14 !important;
    height: auto !important;
}

[data-elementor-id="85"]{
    position: relative !important;
    z-index: 5 !important;
}

@media only screen and (min-height: 1000px){
    .hero{
        min-height: 932px !important;
    }
}

@media only screen and (max-width: 1320px) and (min-width: 0px){
    .video-presentation,
    .video-presentation *{
        height: 100% !important;
    }
}

@media only screen and (max-width: 1024px) and (min-width: 0px){
    :root {
        --listing-gap: 24px;
        --px-global: 16px;
        --header-height: 90px;
        --nav-height: 70px;
        --admin-bar: 46px;
    }

    .hero{
        min-height: unset !important;
    }

    .hero-bg{
        width: 100vw !important;
    }

    .block-dnvl98{
        overflow-x: clip !important;
    }

    .grid-tailles > .e-con-inner{
		overflow: scroll !important;
		flex-wrap: nowrap !important;
        flex-direction: row !important;
        align-items: stretch !important;
        padding-right: 16px !important;

        /* 1. Pour Chrome, Edge, Safari et Opera (Webkit) */
        &::-webkit-scrollbar {
            display: none;
        }

        /* 2. Pour Firefox */
        scrollbar-width: none;

        /* 3. Pour Internet Explorer et Edge (ancienne version) */
        -ms-overflow-style: none;
	}

	.grid-tailles > .e-con-inner > *{
		flex: none !important;
		max-width: 70vw !important;
	}
}

@media only screen and (max-width: 767px) and (min-width: 0px){
    .hero-bg{
        right: -3em !important;
    }

    .hero-bg img{
        opacity: .3 !important;
    }

    h1{
        font-size: 60px !important;
    }

    h2{
        font-size: 32px !important;
    }

    h3{
        font-size: 20px !important;
    }

    .header-nav{
        min-height: 70px !important;
    }
}

@media only screen and (max-width: 550px) and (min-width: 0px){
    h1{
        font-size: 48px !important;
    }

    h2{
        font-size: 28px !important;
    }

    .video-presentation,
    .video-presentation *{
        height: 100% !important;
    }
}

@media only screen and (max-width: 400px) and (min-width: 0px){
    h1{
        font-size: 42px !important;
    }

    .grid-tailles > .e-con-inner > *{
		max-width: 75vw !important;
	}
}