@font-face {
    font-family: 'Styrene A';
    src: url('../fonts/Styrene/StyreneA-Light.woff2') format('woff2'), url('../fonts/Styrene/StyreneA-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Styrene A';
    src: url('../fonts/Styrene/StyreneA-LightItalic.woff2') format('woff2'), url('../fonts/Styrene/StyreneA-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Styrene A';
    src: url('../fonts/Styrene/StyreneA-Regular.woff2') format('woff2'), url('../fonts/Styrene/StyreneA-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Styrene A';
    src: url('../fonts/Styrene/StyreneA-RegularItalic.woff2') format('woff2'), url('../fonts/Styrene/StyreneA-RegularItalic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Styrene A';
    src: url('../fonts/Styrene/StyreneA-Medium.woff2') format('woff2'), url('../fonts/Styrene/StyreneA-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Styrene A Web';
    src: url('../fonts/Styrene/StyreneAWeb-Light.woff2') format('woff2'), url('../fonts/Styrene/StyreneAWeb-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Styrene A Web';
    src: url('../fonts/Styrene/StyreneAWeb-LightItalic.woff2') format('woff2'), url('../fonts/Styrene/StyreneAWeb-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Styrene A Web';
    src: url('../fonts/Styrene/StyreneAWeb-Italic.woff2') format('woff2'), url('../fonts/Styrene/StyreneAWeb-Italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Styrene A Web';
    src: url('../fonts/Styrene/StyreneAWeb-Medium.woff2') format('woff2'), url('../fonts/Styrene/StyreneAWeb-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Styrene A Web';
    src: url('../fonts/Styrene/StyreneAWeb-Bold.woff2') format('woff2'), url('../fonts/Styrene/StyreneAWeb-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Styrene A Web';
    src: url('../fonts/Styrene/StyreneAWeb-BoldItalic.woff2') format('woff2'), url('../fonts/Styrene/StyreneAWeb-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Styrene A Web';
    src: url('../fonts/Styrene/StyreneAWeb-Black.woff2') format('woff2'), url('../fonts/Styrene/StyreneAWeb-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Styrene A Web';
    src: url('../fonts/Styrene/StyreneAWeb-BlackItalic.woff2') format('woff2'), url('../fonts/Styrene/StyreneAWeb-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

:root {
    /**/
    --font-Styrene-a: "Styrene A";
    --font-Styrene-a-web: "Styrene A Web";
    --color-bleuciel: #63A6B7;
    --color-bleufonce: #27348A;
    --color-bleufonce2: #0C1343;
    --color-violet: #6D73B5;
    --color-orange: #F59D24;
    --color-orange2: #E67635;
    --color-brown: #A39177;
    --color-rose: #CF7C81;
}

html {
    font-family: var(--font-Styrene-a);
    font-weight: 400;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

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

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

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

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

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

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

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

*,
:after,
:before {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
}

input:focus,
a:focus {
    outline: none;
}


/* img {
    max-width: 100%;
    height: auto;
} */

.centerPadding_5 {
    margin: 0 5.5%;
}

.centerPadding_7 {
    margin: 0 7%;
}

.centerPadding_8 {
    margin: 0 8%;
}

.centerPadding_9 {
    margin: 0 9%;
}

.centerPadding_15 {
    margin: 0 15.62%;
    /* margin: 0 16.62%; */
}

.centerPadding_22 {
    width: 144rem;
    margin: 0 auto;
}

.desk {
    display: block;
}

.mob {
    display: none;
}

.textBold {
    font-weight: 700;
}

.textMedium {
    font-weight: 500;
}

.italic {
    font-style: italic;
}

.str_a_web {
    font-family: var(--font-Styrene-a-web);
}

.str_a {
    font-family: var(--font-Styrene-a);
    font-weight: 900;
    display: inline !important;
    line-height: 1;
}

.str_a_light {
    font-family: var(--font-Styrene-a) !important;
    font-weight: 300;
}

.underLined_text {
    text-decoration: underline;
}

.title-animate {
    opacity: 0;
    transform: translateY(-6rem);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

.title-animate.in-view {
    opacity: 1;
    transform: translateY(0);
}

.del-2 {
    transition-delay: 0.2s;
}

.del-3 {
    transition-delay: 0.3s;
}

.del-4 {
    transition-delay: 0.4s;
}

.del-5 {
    transition-delay: 0.5s;
}

.del-6 {
    transition-delay: 0.5s;
}


/*** Debut header ***/

#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent;
    color: #ffffff;
    z-index: 5;
    transition: .3s;
}

.cadreHeader {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* padding-top: 3.2rem; */
    width: 100%;
    margin: 0 auto;
    position: relative;
    transition: .3s;
}

.cadreHeader::after {
    content: '';
    width: 100%;
    height: 7rem;
    position: absolute;
    left: 0;
    top: 0;
    background-color: transparent;
    transition: .3s;
    z-index: -1;
}

#header.on_scroll .cadreHeader::after {
    background-color: #ffffff;
}

.cont_header_left {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 28.8%;
    height: 12.7rem;
    padding-left: 4rem;
    border-radius: 6.763rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    transition: .3s;
}

[lang="en"] .cont_header_left {
    width: 26.8%;
}

#header.on_scroll .cont_header_left {
    background-color: #ffffff;
    width: 27.8%;
    height: 10.8rem;
    padding-left: 6rem;
    align-items: center;
    box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 1px 0px 5px 0px rgba(0, 0, 0, 0.25);
    z-index: 1;
}

[lang="en"] #header.on_scroll .cont_header_left {
    width: 26.2%;
}

.logo {
    width: 22.152rem;
    height: 7.4rem;
    transition: .3s;
}

#header.on_scroll .logo {
    width: 19.438rem;
    height: 6.4rem;
}

.logo a {
    display: block;
    height: 100%;
    position: relative;
    transition: .3s;
}

.logo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: .3s;
}

.logo img.jpg_logo {
    visibility: hidden;
    opacity: 0;
}

#header.on_scroll .logo img.png_logo {
    visibility: hidden;
    opacity: 0;
}

#header.on_scroll .logo img.jpg_logo {
    visibility: visible;
    opacity: 1;
}

.indicat_logo {
    font-size: 1.881rem;
    font-weight: 300;
    position: relative;
    margin-right: 2rem;
    transition: .3s;
}

.indicat_logo::before {
    content: '';
    width: 0.2rem;
    height: 100%;
    position: absolute;
    left: -1.6rem;
    background-color: #ffffff;
    transition: .3s;
}

#header.on_scroll .indicat_logo::before {
    background-color: var(--color-bleufonce);
    left: -1.7rem;
}

#header.on_scroll .indicat_logo {
    font-size: 1.6rem;
    margin-right: 4.5rem;
}

.indicat_logo ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#header.on_scroll .indicat_logo ul li {
    color: var(--color-bleufonce);
}

.cont_header_right {
    width: 67.83%;
    width: 73.2%;
    height: 7rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    transition: .3s;
}

#header.on_scroll .cont_header_right {
    background-color: #ffffff;
    width: 73.2%;
}

.menu {
    width: 120rem;
    transition: .3s;
}

[lang="en"] .menu {
    width: 87rem;
}

.menu ul {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    list-style: none;
}

.menu ul li {
    position: relative;
}

.menu ul li::after {
    content: '';
    width: 0.2rem;
    height: 100%;
    background-color: var(--color-orange2);
    position: absolute;
    right: -2.5rem;
    top: 50%;
    transform: translateY(-50%);
}

.menu ul li a {
    display: inline-block;
    color: #ffffff;
    font-family: var(--font-Styrene-a-web);
    font-size: 1.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: .3s;
}

#header.on_scroll .menu ul li a {
    color: #000000;
}

.menu ul li a.active,
.menu ul li a:hover,
#header.on_scroll .menu ul li a.active,
#header.on_scroll .menu ul li a:hover {
    color: var(--color-orange2);
    transform: scale(1.05) translateY(-0.2rem);
}

.container_radio {
    display: none;
}


/* DROPDOWN */

.dropdown-el {
    min-width: 6rem;
    min-height: 3rem;
    max-height: 3rem;
    position: relative;
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
    font-size: 1.4rem;
    text-align: left;
    white-space: nowrap;
    color: #000000;
    outline: none;
    border-radius: 1.5rem;
    margin-right: 4rem;
    background-color: #ffffff;
    transition: .3s;
}

.dropdown-el:hover {
    background-color: #cccccc;
}

#header.on_scroll .dropdown-el {
    box-shadow: 0 0 0 0.1rem rgba(0, 0, 0, 1);
    -webkit-box-shadow: 0 0 0 0.1rem rgba(0, 0, 0, 1);
    -moz-box-shadow: 0 0 0 0.1rem rgba(0, 0, 0, 1);
}

.dropdown-el input {
    width: 1px;
    height: 1px;
    display: inline-block;
    position: absolute;
    opacity: 0.01;
}

.dropdown-el label {
    border-top: 0.06em solid #cccccc;
    color: #000000 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3rem;
    line-height: 0.5;
    padding-right: 1.5rem;
    cursor: pointer;
    position: relative;
    transition: 0.3s color ease-in-out;
}

.dropdown-el label:nth-child(2) {
    margin-top: 3rem;
    border-top: 0.06em solid #cccccc;
}

.dropdown-el input:checked+label {
    display: flex;
    border-top: none;
    position: absolute;
    top: 0;
    width: 100%;
}

.dropdown-el input:checked+label:nth-child(2) {
    margin-top: 0;
    position: relative;
}

.dropdown-el::after {
    content: "";
    width: 1.25rem;
    height: 0.8rem;
    position: absolute;
    right: 1.2rem;
    top: 1.25rem;
    background-image: url("../images/arrow_langue.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transition: 0.4s all ease-in-out;
    width: 100%;
    height: 3.1rem;
    background-size: 1.25rem 0.8rem;
    background-position: right 0.9rem top 1.2rem;
    top: 0;
    right: 0;
}

.dropdown-el.expanded {
    background: #fff;
    border-radius: 1.5rem;
    padding: 0;
    box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px;
    max-height: 6rem;
}

.dropdown-el.expanded label {
    border-top: 0.06em solid #cccccc;
}

.dropdown-el.expanded::after {
    transform: rotate(-180deg);
    transform: rotateX(-180deg);
}


/* FIN DROPDOWN */


/* ******** corpsDePage ******* */

.blc {
    width: 143rem;
    margin: 0 auto;
    text-align: center;
}


/* accroche */

.accroche {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    background-image: url(../images/back_slide.webp);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
}

.contentAccroche {
    width: 64.8rem;
    /* width: 71.8rem; */
    color: #ffffff;
    margin-left: 6rem;
    margin-top: 20vh;
}

.title_accroche {
    font-family: var(--font-Styrene-a-web);
    font-size: 1.6rem;
    font-weight: 500;
    text-transform: uppercase;
    display: block;
    position: relative;
    margin-bottom: 2vh;
}

.title_accroche::after {
    content: '';
    width: 38.5rem;
    height: 0.2rem;
    background-color: #ffffff;
    position: absolute;
    bottom: -1rem;
    left: 0;
}

[lang="en"] .title_accroche::after {
    width: 55.5rem;
}

h1 {
    font-family: var(--font-Styrene-a);
    font-weight: 400;
    font-size: 5rem;
    line-height: 1.15;
}

.contentAccroche p {
    font-size: 2.2rem;
    font-weight: 300;
    margin-bottom: 0rem;
    width: 47rem;
    height: 32rem;
    /* opacity: 0;
    visibility: hidden; */
}

.heroArrow {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    /* margin: 0 auto; */
    width: 4.133rem;
    font-size: 4rem;
    color: #ffffff;
    animation: arrowBounce 2s infinite;
    outline: 0;
    display: block;
    text-decoration: none;
    z-index: 1;
}

.heroArrow img {
    width: 100%;
}

@keyframes arrowBounce {
    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }
    20% {
        transform: translateX(-50%) translateY(6px);
    }
    30% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(3px);
    }
    50% {
        transform: translateX(-50%) translateY(0);
    }
}


/* fin accroche */


/*  why-transmit */

.why-transmit {
    padding: 4rem 0 10rem;
    background: #f5f5f5;
}

.title_section {
    text-align: center;
    color: var(--color-orange2);
    font-size: 4rem;
    font-weight: 300;
    margin-bottom: 5rem;
}

.under_title_section {
    font-size: 2.2rem;
    line-height: 1.4;
    color: #000000;
    margin-top: -4rem;
    margin-bottom: 7.5rem;
}

.cards {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
}

.card {
    position: relative;
    overflow: hidden;
    border-radius: 0.8rem;
    height: 65rem;
    width: 45rem;
    transition: .3s;
}

.content_card {
    overflow: hidden;
    height: 100%;
    position: relative;
    cursor: pointer;
}

.card .img_popcard {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .3s;
}

.card:hover .img_popcard {
    transform: scale(1.1) translateY(-0.2rem);
}

.hexagon {
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%, -50%);
    width: 38rem;
    height: 23rem;
}

.text_hexagone {
    position: absolute;
    left: 50%;
    top: 47%;
    transform: translate(-50%, -50%);
    width: 39.6rem;
    font-size: 2.6rem;
    font-weight: 400;
    text-transform: uppercase;
    color: #ffffff;
}

.plus {
    display: block;
    cursor: pointer;
    font-size: 3rem;
    line-height: 1;
    margin-top: 1.5rem;
    width: 3rem;
    margin: 0 auto;
    transition: .3s;
}

.plus:hover {
    transform: scale(1.05) translateY(-0.2rem);
}

.pls {
    display: inline-block;
}

.moin {
    display: none;
}

.pop_card {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: -100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    overflow: hidden;
    z-index: 1;
    transition: .5s;
}

.card.active .pls {
    display: none;
}

.card.active .moin {
    display: inline-block;
}

.card.active .pop_card {
    bottom: 0;
}

.blc_pop_card {
    width: 82%;
    height: 93%;
    position: relative;
    text-align: left;
}

.close_pop_card {
    position: absolute;
    right: -4.05rem;
    top: -2.3rem;
    width: 5rem;
    height: 5rem;
    padding-left: 1rem;
    background-color: rgba(230, 118, 53, 0.75);
    color: #ffffff;
    font-size: 2rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0% 100% 0% 100% / 0% 0% 100% 100%;
}

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

.title_pop_card img {
    width: 8.041rem;
    margin-right: 2rem;
}

.title_pop_card h3 {
    font-family: var(--font-Styrene-a);
    font-weight: 400;
    font-size: 2.4rem;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--color-orange2);
}

.corps_pop_card {
    font-family: var(--font-Styrene-a);
    font-size: 2.2rem;
    line-height: 1.4;
    color: #000000;
    position: relative;
}

.corps_pop_card.corps_pop_card_barred::after {
    content: '';
    width: 56%;
    height: 0.2rem;
    background-color: var(--color-orange2);
    position: absolute;
    bottom: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
}

.corps_pop_card p {
    margin-top: 1.2rem;
    margin-bottom: 1.2rem;
}

.icone_check {
    width: 5.6rem;
    margin: 0 auto;
    display: block;
}

.footer_pop_card {
    font-size: 2.2rem;
    line-height: 1.4;
    /* font-weight: 500; */
    color: #000000;
}


/* fin why-transmit */


/* temoignages */

.temoignages {
    padding: 7rem 0;
    background: linear-gradient(to right, #E67635 0%, #8A3809 100%);
}

.blc_temoignages {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 110.7rem;
    margin: 0 auto;
}

.pic_temoigneges {
    width: 40.8rem;
}

.pic_temoigneges img {
    width: 100%;
}

.content_temoignages {
    width: 63.9rem;
    color: #ffffff;
    font-size: 2rem;
    text-align: left;
}

.guillemet {
    display: inline-block;
    margin-right: 0rem;
    width: 3rem;
}

.content_temoignages span {
    display: block;
}


/* fin temoignages */


/* transmission_modes */

.transmission_modes {
    padding: 4rem 0;
    text-align: center;
}

.transmission_list {
    width: 143rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.transmission_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 19.6rem;
    margin-bottom: 2rem;
    background: #F7F6F6;
    border-radius: 1rem;
    overflow: hidden;
}

.transmission_item .cta_lp {
    display: none;
}

.pic_transmission {
    position: relative;
    width: 46.2rem;
    height: 100%;
}

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

.pic_transmission .label {
    position: absolute;
    right: -7.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 3rem;
    width: 28.3rem;
    height: 10.4rem;
    background-image: url(../images/modes_hexagone.svg);
    background-repeat: no-repeat;
    background-size: contain;
    color: #ffffff;
    font-family: var(--font-Styrene-a-web);
    font-size: 2.6rem;
    font-weight: 500;
    text-align: left;
}

.transmission_item .content {
    width: 80.9rem;
    font-size: 2.2rem;
    color: #000000;
    margin-right: 4rem;
    text-align: left;
}

.transmission_item .content p {
    margin: 0;
}

.cta_lp {
    display: inline-flex;
    margin: 3rem auto 0;
    padding: 2rem 5rem;
    border-radius: 1.4rem;
    border: 0;
    outline: 0;
    text-decoration: none;
    font-family: var(--font-Styrene-a-web);
    font-size: 2rem;
    font-weight: 500;
    text-transform: uppercase;
    background: var(--color-bleufonce);
    color: #fff;
    transition: .3s;
}

.cta_lp:hover {
    transform: scale(1.1) translateY(-0.7rem);
}


/* fin transmission_modes */


/* contact_section */

.contact_section {
    padding: 5.715rem 0;
    background: linear-gradient(to right, #E67635 0%, #8A3809 100%);
}

.contact_section .blc {
    width: 129.4rem;
}

.container_contact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.pic_contact {
    width: 33.4rem;
}

.pic_contact img {
    width: 100%;
}

.content_contact {
    width: 91rem;
    text-align: left;
    color: #ffffff;
}

.content_contact h3 {
    font-size: 5rem;
    font-weight: 400;
}

.content_contact p {
    font-size: 2rem;
    font-weight: 400;
}

.name_responsable {
    font-family: var(--font-Styrene-a-web);
    font-size: 2rem;
    font-weight: 500;
    display: block;
}

.profession {
    font-family: var(--font-Styrene-a-web);
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.6;
}

.link_contact {
    margin: 0.6rem 0 1.2rem;
}

.link_contact a {
    font-family: var(--font-Styrene-a-web);
    font-size: 2rem;
    font-weight: 500;
    color: #ffffff;
    text-decoration: none;
    position: relative;
    text-decoration: underline;
    display: inline-block;
    transition: .3s;
}

.link_contact a:hover {
    transform: scale(1.05);
}

.link_contact i {
    font-size: 2.2rem;
}

.ico_contact {
    font-family: var(--font-Styrene-a-web);
    font-size: 2.5rem;
    font-weight: 700;
    margin-right: 0.5rem;
}


/* fin contact_section */


/* debut timeline */

.timeline {
    padding: 8rem 0 10rem;
    color: #ffffff;
    text-align: center;
    background-image: url(../images/back_timeline.webp);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100rem;
    position: relative;
    overflow: hidden;
}

.timeline .title_section,
.timeline .under_title_section {
    color: #ffffff;
}

.frise {
    position: relative;
    margin-top: 34rem;
    margin-top: 18rem;
}

.timeline_rise {
    position: absolute;
    left: 0;
    top: 17%;
    width: 100%;
    z-index: 1;
}

.frise svg {
    width: 100%;
    position: relative;
    z-index: 2;
}

rect[data-year] {
    cursor: pointer;
}

.under_timeline {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    font-family: var(--font-Styrene-a-web);
    font-size: 1.6rem;
    font-weight: 300;
    text-align: left;
    padding-left: 2rem;
}

.bulle {
    position: absolute;
    bottom: 33rem;
    width: 9.3rem;
    background-color: #fff;
    border-radius: 1rem;
    color: #000;
    font-family: var(--font-Styrene-a-web);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    z-index: 3;
    transition: width .45s cubic-bezier(.4, 0, .2, 1);
}

.bulle.active {
    width: 62.1rem;
    z-index: 4;
}

.blc_bulle {
    position: relative;
    width: 100%;
}

.dots {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    line-height: 1;
    padding: 2.4rem 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    visibility: visible;
    transition: opacity .15s ease, visibility .15s ease, height .15s ease, padding .15s ease;
}

.bulle.active .dots {
    opacity: 0;
    visibility: hidden;
    height: auto;
    padding: 0;
    overflow: hidden;
}

.content_bulle {
    padding: 0 3rem;
    vertical-align: top;
    /* padding horizontal fixe, vertical à 0 par défaut */
    min-height: 6rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height .45s cubic-bezier(.4, 0, .2, 1), padding .45s cubic-bezier(.4, 0, .2, 1), opacity .3s ease .2s, visibility 0s linear .45s;
}

.bulle.active .content_bulle {
    padding: 3rem;
    /* padding complet à l'ouverture */
    max-height: 60rem;
    opacity: 1;
    visibility: visible;
    transition: max-height .45s cubic-bezier(.4, 0, .2, 1), padding .45s cubic-bezier(.4, 0, .2, 1), opacity .3s ease .15s, visibility 0s;
}

.bulle_ico {
    position: absolute;
    bottom: -5.5rem;
    width: 8.1rem;
}

.left_ico {
    left: 0;
}

.right_ico {
    right: 0;
    transform: scaleX(-1);
}

.bulle .date {
    display: block;
    margin-bottom: 1rem;
    font-size: 2.6rem;
    color: var(--color-orange2);
}

.bulle h4 {
    margin: 0 0 1.5rem;
    font-size: 2.2rem;
    line-height: 1.3;
    color: var(--color-orange2);
}

.bulle p {
    margin: 0;
    font-family: var(--font-Styrene-a);
    font-size: 2.2rem;
    line-height: 1.4;
    font-weight: 400;
    color: #000;
}

.bulle_1914 {
    left: 7.25%;
    border-bottom-left-radius: 0;
}

.bulle_1976 {
    left: 54.25%;
    border-bottom-left-radius: 0;
}

.bulle_2016 {
    right: 15.35%;
    border-bottom-right-radius: 0;
}

.bulle_2025 {
    right: 8.5%;
    border-bottom-right-radius: 0;
}


/* bulle_testateur */

.bulle_testateur {
    position: absolute;
    top: 32rem;
    width: 39rem;
    background-color: #fff;
    border-radius: 1rem;
    border-top-left-radius: 0;
    visibility: hidden;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: 0%;
    z-index: 2;
    transition: .5s;
}

.bulle_testateur.right_bulle_testateur {
    transform-origin: right;
    border-top-right-radius: 0;
    border-top-left-radius: 1rem;
}

.bulle_testateur.active {
    transform: scaleX(1);
    visibility: visible;
    opacity: 1;
}

.blc_bulle_testateur {
    position: relative;
    width: 100%;
    height: 100%;
    font-family: var(--font-Styrene-a-web);
    font-size: 2.2rem;
    font-weight: 700;
    text-align: left;
    color: #000000;
    padding: 3rem;
    line-height: 1.4;
}

.bulle_testateur_ico {
    position: absolute;
    top: -5.5rem;
    width: 8.1rem;
    transform: rotate(180deg) scaleX(-1);
}

.left_testateur_ico {
    left: 0;
}

.right_testateur_ico {
    right: 0;
    transform: rotate(180deg) scaleX(1);
}

.date_testateur {
    color: var(--color-orange2);
}

.content_bulle_testateur p {
    margin: 0;
}

.name_1914 {
    left: 7.25%;
}

.name_1936 {
    left: 24%;
}

.name_1941 {
    left: 27.75%;
}

.name_1949 {
    left: 33.8%;
}

.name_1956 {
    left: 39.1%;
}

.name_1958 {
    left: 40.7%;
}

.name_1965 {
    left: 45.98%;
}

.name_1966 {
    left: 46.8%;
}

.name_1967 {
    left: 47.5%;
}

.name_1972 {
    left: 51.3%;
}

.name_1976 {
    left: 54.3%;
}

.name_1986 {
    left: 61.9%;
}

.name_1991 {
    left: 65.7%;
}

.name_1992 {
    left: 66.4%;
}

.name_1994 {
    left: 67.9%;
}

.name_1997 {
    left: 70.3%;
}

.name_1998 {
    left: 71.08%;
}

.name_1999 {
    left: 71.85%;
}

.name_2001 {
    left: 73.25%;
}

.name_2003 {
    left: 74.77%;
}

.name_2007 {
    right: 22.2%;
}

.name_2009 {
    right: 20.7%;
}

.name_2010 {
    right: 19.9%;
}

.name_2013 {
    right: 17.6%;
}

.name_2014 {
    right: 16.89%;
}

.name_2015 {
    right: 16.1%;
}

.name_2016 {
    right: 15.35%;
}

.name_2017 {
    right: 14.58%;
}

.name_2018 {
    right: 13.85%;
}

.name_2019 {
    right: 13.1%;
}

.name_2021 {
    right: 11.55%;
}

.name_2022 {
    right: 10.8%;
}

.name_2023 {
    right: 10%;
}

.name_2024 {
    right: 9.2%;
}

.name_2025 {
    right: 8.5%;
}


/* fin timeline */


/* debut FAQ */

.faq {
    background-color: #F0F4F7;
    padding: 8rem 0 8rem 0;
    position: relative;
}

.conteneurFaq {
    margin-top: 6.3rem;
    margin-bottom: 5rem;
}

.itemFaq {
    width: 100%;
    /* height: 13rem; */
    border-radius: 1rem;
    margin: 3rem 0;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.3);
    background-color: #ffffff;
    font-family: var(--font-Styrene-a-web);
    overflow: hidden;
    transition: .3s;
}

.head_Faq {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0rem 4rem;
    font-size: 2.2rem;
    font-weight: 500;
    text-align: left;
    min-height: 13rem;
    height: auto;
    color: #000000;
    cursor: pointer;
    transition: .3s;
}

.chevron {
    width: 5.1rem;
    height: 5.1rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-orange2);
}

.head_Faq i {
    color: #ffffff;
    font-size: 2.6rem;
    transition: .3s;
}

.chevron:hover i {
    font-size: 3rem;
}

.opned .head_Faq i {
    transform: rotate(180deg);
}

.body_faq {
    font-size: 2.2rem;
    font-weight: 300;
    padding: 0 4rem 3rem 4rem;
    margin-top: -5rem;
    text-align: left;
    width: 135rem;
    display: none;
}

.body_faq a {
    color: #000000;
    text-decoration: underline;
}


/* FIN FAQ */


/* merci */

.merci_section {
    position: relative;
    min-height: 88rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 4rem;
    background-image: url('../images/back_merci.webp');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    overflow: hidden;
}


/* voile blanc dégradé comme sur la maquette */

.merci_section .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to bottom, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .75) 25%, rgba(255, 255, 255, .25) 55%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.merci_section .content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.merci_section h4 {
    margin: 0;
    color: var(--color-orange2);
    font-family: var(--font-Styrene-a-web);
    font-size: 20rem;
    font-weight: 700;
    line-height: 1;
}

.smallMerci {
    display: block;
    font-size: 5.2rem;
    font-weight: 500;
}


/* FIN merci */


/* footer */

footer {
    padding: 3.3rem 0;
    background-color: var(--color-bleufonce2);
}

.container_footer {
    width: 170.8rem;
    margin: 0 auto;
    color: #ffffff;
}

.logo_footer {
    width: 18.8rem;
    display: inline-block;
}

.logo_footer img {
    width: 100%;
}

.first_container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.last_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.socialMedia_footer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 25.941rem;
    margin-left: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.share {
    width: 5.227rem;
    height: 5.227rem;
    color: #ffffff;
    font-size: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: .3s;
}

.share:hover {
    transform: scale(1.15);
}

.infos_donnees {
    font-size: 1.4rem;
    width: 92.6rem;
}

.infos_donnees a {
    color: #ffffff;
    text-decoration: none;
    display: inline-block;
    position: relative;
}

.infos_donnees a::after {
    content: '';
    width: 0;
    height: 0.1rem;
    background-color: #ffffff;
    position: absolute;
    left: 0;
    bottom: -0.2rem;
    transition: .3s;
}

.infos_donnees a:hover::after {
    width: 100%;
}

.link_footer a {
    display: inline-block;
    color: #ffffff;
    font-size: 1.4rem;
    margin: 1rem;
    text-decoration: none;
    position: relative;
}

.link_footer a::after {
    content: '';
    width: 0;
    height: 0.1rem;
    background-color: #ffffff;
    position: absolute;
    left: 0;
    bottom: -0.2rem;
    transition: .3s;
}

.link_footer a:hover::after {
    width: 100%;
}

.link_footer a:last-child {
    margin-right: 0;
}

.don_confiances {
    /* width: 9.6rem; */
    width: 10rem;
}

.don_confiances img {
    width: 100%;
}


/* fin footer */


/*  sticky brochure_form */

.brochure_form {
    position: fixed;
    display: none;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 60rem;
    max-height: 98rem;
    /* overflow-y: scroll; */
    background: #df7b33;
    padding: 4rem;
    color: #fff;
    z-index: 9994;
}

.blc_brochure_form {
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
}

.form_header {
    font-family: var(--font-Styrene-a);
    text-align: left;
}

.form_header h2 {
    font-weight: 400;
    font-size: 2.8rem;
    line-height: 1.15;
    text-transform: uppercase;
    margin-bottom: 1vh;
}

.form_header p {
    font-weight: 400;
    font-size: 1.6rem;
    margin-bottom: 2.5vh;
}

.form_box {
    background: #fff;
    border-radius: 1.6rem;
    overflow: hidden;
    width: 50rem;
    margin: 0 auto;
}

.tabs {
    display: flex;
}

.tab {
    flex: 1;
    border: none;
    background: #efe7e0;
    color: var(--color-orange2);
    font-size: 1.8rem;
    font-weight: 500;
    text-transform: uppercase;
    height: 5.5rem;
    cursor: pointer;
}

.tab.active {
    background: #fff;
}

form.form_broch {
    padding: 2rem 0;
    width: 44rem;
    margin: 0 auto;
}

.civilite {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.civilite button {
    flex: 1;
    background: #fff;
    border: 1px solid var(--color-orange2);
    border-radius: 30px;
    height: 38px;
    cursor: pointer;
}

.blc_input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10rem;
    height: 4rem;
    width: 100%;
    box-shadow: 0 0 0.1rem 0 rgba(230, 118, 53, 1);
    -webkit-box-shadow: 0 0 0.1rem 0 rgba(230, 118, 53, 1);
    -moz-box-shadow: 0 0 0.1rem 0 rgba(230, 118, 53, 1);
    margin-bottom: 1rem;
    overflow: hidden;
}

.blc_input label {
    width: 13rem;
    height: 100%;
    font-size: 1.8rem;
    font-weight: 400;
    color: #000000;
    background-color: rgba(230, 118, 53, 0.3);
    padding-left: 1rem;
    display: flex;
    align-items: center;
}

.blc_input input {
    width: 31rem;
    height: 100%;
    padding: 0 1.5rem;
    outline: none;
    border: 0;
}

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

.row .blc_input.ville {
    width: 24.5rem;
}

.row .blc_input label {
    width: 7.5rem;
}

.row .blc_input input {
    width: 17rem;
}

.row .blc_input.cp {
    width: 18.5rem;
}

.row .blc_input.cp label {
    width: 7.5rem;
}

.row .blc_input.cp input {
    width: 11rem;
}

.form_note {
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1.4;
    text-align: center;
    color: #000;
    margin-top: 1.2rem;
}

.contact_box {
    margin-top: 20px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.contact_box img {
    width: 65px;
    height: auto;
}

.contact_box h3 {
    font-size: 0.95rem;
    text-transform: uppercase;
    margin-bottom: 8px;
    line-height: 1.3;
}

.contact_box p,
.contact_box a {
    color: #fff;
    font-size: 0.8rem;
    line-height: 1.4;
}

.contact_box a {
    display: block;
    margin: 5px 0;
}


/*  fin sticky brochure_form */


/*****   sidebar *****/

.sidebar,
.sidebar * {
    font-family: var(--font-Styrene-a-web) !important;
}

.sidebar {
    position: fixed;
    top: calc(50% + 3.5rem);
    right: 0;
    transform: translate(0, -50%);
    background-color: var(--color-orange2);
    border-right: none;
    border-top-left-radius: 5rem;
    border-bottom-left-radius: 5rem;
    z-index: 1000;
    box-shadow: -0.5rem 0 2.5rem rgba(0, 0, 0, 0.15);
    transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    /* flex-direction: column; */
    /* overflow: hidden; */
}

.sidebar.closed {
    width: 7rem;
    min-height: 84rem;
}

.sidebar.opened {
    width: 60rem;
    align-items: center;
    justify-content: center;
}

.btnArrow_holder {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 20;
    height: 6.4rem;
    width: 3.2rem;
    overflow: hidden;
}

.btnArrow_container {
    position: relative;
    width: 100%;
    height: 100%;
}

.btnArrow {
    position: absolute;
    transform: translateY(-50%);
    left: -3.2rem;
    top: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    height: 6.4rem;
    width: 6.4rem;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    box-shadow: -0.5rem 0 1rem rgba(0, 0, 0, 0.15);
    z-index: 10;
    padding-right: 1.4rem;
}

.btnArrow img {
    width: 1.3rem;
    display: block;
    transition: transform 0.4s ease;
}

.sidebar.opened .btnArrow img {
    transform: rotate(180deg);
}


/* Collapsed content style */

.sidebar-collapsed-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    padding: 4.4rem 0 4.4rem 0;
    box-sizing: border-box;
    position: relative;
}

.sidebar-collapsed-content::after {
    content: '';
    position: absolute;
    top: 4.4rem;
    right: 1.5rem;
    width: 1px;
    height: calc(100% - 8.8rem);
    background-color: #ffffff;
    z-index: 1;
}

.sidebar.opened .sidebar-collapsed-content {
    display: none;
}

.vertical-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 1.8rem;
    font-weight: 400;
    color: #ffffff;
    text-transform: uppercase;
}

.vertical-text span {
    display: none;
}

.sidebar-collapsed-content img {
    width: 14.5rem;
    display: block;
    position: absolute;
    bottom: 15.9rem;
    bottom: 16.22%;
    right: -1.6rem;
    transform: rotate(-7.81deg);
    z-index: 2;
}


/* Expanded content style */

.sidebar-content {
    min-width: 60rem;
    padding: 2rem 5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    position: relative;
    color: #000000;
}

.sidebar.closed .sidebar-content {
    display: none;
}


/* Hide scrollbar but keep functional */

.sidebar-content::-webkit-scrollbar {
    width: 0.4rem;
}

.sidebar-content::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 0.2rem;
}


/* Steps Transition */

.step {
    display: none;
    background-color: #ffffff;
    border-radius: 0 0 2rem 2rem;
    padding: 0 3rem 2rem 3rem;
    flex-direction: column;
    flex: 1;
}

.step.step-1,
.step.step-2 {
    padding-top: 4.5rem;
    position: relative;
}

.step.active {
    display: flex;
}


/* Heading styles */

.sidebar-header-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #28348A;
    line-height: 1.3;
    text-align: center;
    margin-bottom: 0.8rem;
}

.sidebar-header-subtitle {
    font-size: 1.5rem;
    color: #555;
    text-align: center;
    margin-bottom: 2.5rem;
    line-height: 1.4;
}


/* Titles */

.sidebar-title {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 140%;
    margin-bottom: 3.5rem;
    text-align: center;
    color: var(--color-bleufonce);
}


/* Form Tabs / Method Toggle */

.form-tabs {
    display: flex;
    background-color: transparent;
    position: absolute;
    top: -2rem;
    left: 0;
    width: 100%;
    /* height: 4.5rem; */
}

.form-tab-btn {
    border-radius: 2rem 2rem 0 0;
    /* flex: 1; */
    border: none;
    padding: 0;
    font-size: 1.8rem;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    color: var(--color-orange2);
    position: relative;
    background-color: rgba(236, 220, 207, 1);
    width: 25.5rem;
    z-index: 1;
    display: block;
    position: absolute;
    top: 0;
    height: 4.5rem;
}

.form-tab-btn:nth-child(1) {
    left: 0;
}

.form-tab-btn:nth-child(2) {
    right: 0;
}

.form-tab-btn.active {
    background-color: #ffffff;
    z-index: 2;
}


/* Forms styling */

#sidebar-form {
    display: flex;
    flex-direction: column;
    /* gap: 1.8rem; */
}

.civility-group {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.form-group {
    position: relative;
    margin-bottom: 1.5rem;
    display: flex;
    border: 0.2rem solid rgba(230, 118, 53, 0.3);
    border-radius: 10rem;
    height: 3.6rem;
}

.form-group label {
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1;
    color: #000000;
    height: 100%;
    background-color: #F7F6F6;
    z-index: 1;
    width: 29%;
    border-radius: 10rem 0 0 10rem;
    border-right: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 1.4rem;
}

.form-group label .required,
.form-group label .email-required-star {
    color: #e53e3e;
    font-weight: bold;
}

.form-control {
    border: none;
    border-radius: 0;
    background-color: #ffffff;
    padding: 0 1.4rem;
    font-size: 1.7rem;
    font-family: inherit;
    color: #000000;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
    width: 71%;
    border-radius: 0 10rem 10rem 0;
    /* order: 2; */
}

.form-group-1,
.form-group-2 {
    display: flex;
    gap: 1rem;
}

.form-group-1 .form-group:nth-child(1) {
    width: 50%;
}

.form-group-1 .form-group:nth-child(2) {
    width: 50%;
}

.form-group-2 .form-group:nth-child(1) {
    width: 24.5rem;
}

.form-group-2 .form-group:nth-child(2) {
    width: 18.5rem;
}

.form-group-1 .form-group label {
    width: 50%;
}

.form-group-1 .form-group:nth-child(2) label {
    width: 64%;
}


/* CP 4-digit boxes */

.cp-group {
    overflow: visible;
    height: 4rem;
    align-items: center;
}

.cp-group label {
    border-radius: 10rem 0 0 10rem;
    border: 0.2rem solid rgba(230, 118, 53, 0.3);
    border-right: none;
    height: 4rem;
    flex-shrink: 0;
}

.cp-boxes {
    display: flex;
    gap: 0;
    align-items: center;
    height: 100%;
    flex: 1;
    padding: 0 0.6rem;
}

.cp-digit {
    width: 2rem;
    width: 100%;
    height: 1.8rem;
    border: none;
    border-right: 0.1rem solid rgba(230, 118, 53, 0.5);
    border-radius: 0;
    background: transparent;
    text-align: center;
    font-size: 1.8rem;
    font-family: inherit;
    color: #000000;
    caret-color: var(--color-orange2);
    transition: border-color 0.2s ease;
    outline: none;
    padding: 0;
}

.cp-digit:nth-child(5) {
    border-right: none;
}

.cp-digit.error {
    border-bottom-color: #ff4d4d;
}

.cp-group.has-error .cp-boxes {
    box-shadow: 0 0 0.6rem rgba(255, 77, 77, 0.4);
}

.cp-group .error-text {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
}

.form-control::placeholder {
    color: var(--color-orange2);
    font-weight: 300;
    font-style: italic;
    font-size: 1.4rem;
}

.email-required-star.form-control::placeholder {
    color: transparent;
}


/* .form-control:focus, */


/* .form-control:focus+label, */

.form-group:has(.form-control:focus),
.form-group:has(input:focus) {
    box-shadow: 0 0 1rem rgba(230, 118, 53, 0.6);
}

.form-control.error {
    border-color: #ff4d4d;
    background-color: #fff9f9;
}

.error-text {
    font-size: 1.1rem;
    color: #ff4d4d;
    font-weight: 500;
    display: none;
    position: absolute;
    top: calc(100% + 0.15rem);
    right: 0;
}

.form-control.error+.error-text {
    display: block;
}


/* Submit Button */

.btn-submit {
    margin-top: 0.5rem;
    background-color: var(--color-bleufonce);
    color: #ffffff;
    border: none;
    border-radius: 1rem;
    padding: 0;
    height: 5rem;
    font-size: 1.6rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
}

.btn-submit:hover {
    background-color: #1e286b;
    transform: translateY(-0.2rem);
}

.btn-submit:active {
    transform: translateY(0);
}


/* Success Step */

.success-message {
    display: flex;
    background-color: #ffffff;
    position: absolute;
    bottom: 0;
    border-radius: 0 0 2rem 2rem;
    left: 0;
    width: 100%;
    height: calc(100% - 2.6rem);
    z-index: 3;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    padding: 4rem 0;
    z-index: -1;
    opacity: 0;
    transition-duration: 0.5s;
}

.step.active2 .success-message {
    opacity: 1;
    z-index: 3;
}

.success-icon {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background-color: var(--color-orange2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2.5rem;
}

.success-icon svg {
    color: #ffffff;
}

.success-text {
    font-size: 1.8rem;
    line-height: 140%;
    color: #000000;
}


/* Civility selector */

.civility-group {
    flex-direction: row !important;
}

.civility-option {
    flex: 1;
    cursor: pointer;
}

.civility-option input {
    display: none;
}

.civility-btn {
    display: block;
    background-color: #F7F6F6;
    border: 0.2rem solid var(--color-orange2);
    border-radius: 10rem;
    padding: 0.9rem 0;
    text-align: center;
    font-size: 1.6rem;
    line-height: 1.6rem;
    font-weight: 400;
    transition: all 0.2s ease;
    color: #000000;
}

.civility-option input:checked+.civility-btn {
    background-color: var(--color-orange2);
    border-color: var(--color-orange2);
    color: #ffffff;
    box-shadow: 0 0.5rem 1rem rgba(230, 118, 53, 0.1);
}


/* Legalese */

.form-legalese {
    font-size: 1.4rem;
    line-height: 110%;
    color: #000000;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 0;
    font-weight: 300;
}


/* Contact Interlocuteur */

.interlocuteur-block {
    background-color: #F7F6F6;
    border-radius: 2rem;
    padding: 2.2rem;
    margin-top: 3.5rem;
    text-align: center;
    border: 0.1rem solid var(--border-color);
}

.interlocuteur-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #28348A;
    margin-bottom: 1.2rem;
    line-height: 1.4;
    letter-spacing: 0.05rem;
}

.interlocuteur-name {
    font-size: 1.8rem;
    font-weight: 600;
    color: #000000;
    margin-bottom: 0.4rem;
}

.interlocuteur-role {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 1.2rem;
    line-height: 1.4;
}

.interlocuteur-contact a {
    color: var(--color-orange2);
    font-weight: 600;
    text-decoration: none;
    font-size: 1.5rem;
    transition: opacity 0.2s;
}

.interlocuteur-contact a:hover {
    opacity: 0.8;
}

.interlocuteur-phone {
    font-size: 1.3rem;
    color: #000000;
    margin-top: 0.6rem;
    font-weight: 500;
}

.tel-required-label {
    color: #888;
    font-size: 1.3rem;
    font-weight: normal;
}

.success-text-sub {
    font-size: 1.5rem;
    color: #666;
    margin-top: 0.8rem;
}

.success-tabs .form-tab-btn.active {
    background-color: var(--color-orange2);
    color: #ffffff;
    opacity: 0.7;
}

.sidebar-collapsed-content2 h2 {
    font-size: 2.4rem;
    line-height: 120%;
    color: #ffffff;
    text-align: left;
    font-weight: 400;
    margin-bottom: 0.5rem;
    position: relative;
    text-transform: uppercase;
}

[lang="fr"] .sidebar-collapsed-content2 h2::after {
    width: 5.8rem;
}

.sidebar-collapsed-content2 h2::after {
    content: '';
    position: absolute;
    width: 44.8rem;
    height: 0.2rem;
    background-color: #ffffff;
    bottom: 0.55rem;
    right: -5rem;
}

.sidebar-collapsed-content2 p {
    font-size: 1.5rem;
    line-height: 140%;
    color: #ffffff;
    text-align: left;
    font-weight: 400;
    margin-bottom: 3rem;
}

.form-group-2 .form-group:nth-child(1) label {
    width: 7.5rem;
}

.form-group-2 .form-group:nth-child(1) input {
    width: 17rem;
}

.form-group-2 .form-group:nth-child(2) label {
    width: 7.5rem;
}

.form-group-2 .form-group:nth-child(2) .cp-boxes {
    width: 11rem;
    padding: 0;
}

.info-holder {
    display: flex;
    gap: 0.8rem;
    color: #ffffff;
    text-align: left;
    margin-top: 1rem;
    align-items: center;
}

.info-holder img {
    display: block;
    width: 7.9rem;
}

.info-holder h3 {
    font-size: 1.6rem;
    line-height: 120%;
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-weight: 500;
    position: relative;
}

.info-holder h3::after {
    content: '';
    position: absolute;
    width: 26.5rem;
    height: 0.2rem;
    background-color: #ffffff;
    bottom: 0.3rem;
    right: 5rem;
}

[lang="fr"] .info-holder h3::after {
    width: 8.5rem;
}

.info-holder p {
    font-size: 1.6rem;
    line-height: 136%;
    letter-spacing: -0.02rem;
    margin-bottom: 0;
    font-weight: 300;
}

.info-holder p strong {
    font-weight: 400;
}

.info-holder p a {
    color: #ffffff;
    position: relative;
    text-decoration: underline;
    display: inline-block;
    transition: .3s;
}

.info-holder p a:hover {
    transform: scale(1.05);
}


/******  fin sidebar ******/


/*  credits_popup */

.credits_popup {
    padding: 5rem;
    border-radius: 1rem;
    position: fixed;
    width: 154rem;
    background-color: #F7F6F6;
    color: #000000;
    top: 50%;
    right: -100%;
    z-index: 99997;
    transition: .6s;
    transform: translate(0%, -50%);
    box-shadow: 0rem 0rem 1.5rem rgba(0, 0, 0, 0.5);
}

.credits_popup.openCredit {
    right: 50%;
    transform: translate(50%, -50%);
    z-index: 9994;
}

.closeClac {
    position: absolute;
    right: 1.8rem;
    top: 1.8rem;
    width: 5.2rem;
    height: 5.2rem;
    font-size: 3rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-orange2);
    color: #ffffff;
    z-index: 9;
    cursor: pointer;
    transition: .3s;
}

.closeClac:hover {
    transform: scale(1.25);
}

.closeClac img {
    width: 100%;
}

.container_credit h3 {
    font-size: 5rem;
    font-weight: 400;
    position: relative;
    margin-bottom: 3rem;
}

.container_credit p {
    font-size: 2.2rem;
}


/* fin credits_popup */


/* ---- fin recherche_page ---- */

.jump_to_sec {
    position: fixed;
    right: -9.5rem;
    bottom: 15rem;
    width: 6.5rem;
    height: 6.5rem;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4rem;
    color: var(--color-bleufonce);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    border-radius: 50%;
    cursor: pointer;
    transition: .3s;
    z-index: 9994;
}

.jump_to_sec.active {
    right: 3rem;
}


/* */

#tarteaucitronIcon {
    bottom: 0.5rem !important;
}

#tarteaucitronRoot div#tarteaucitron {
    left: 50% !important;
    /* top: 50%; */
    transform: translateX(-50%) !important;
}

.tarteaucitronIconBottomLeft {
    bottom: 9rem !important;
}