/* assets/styles.css */

:root {
    --noir: #231F20;
    --blanc_casse: #ECF2D8;
    --blanc: #ECF2D8;
    --orange: #FFA600;
    --rouge: #FF563F;
    --violet: #C292FF;
    --vert: #18AB3C;
    --header-height: 80px;
}

main#content {
    overflow-x: hidden;
}

#wpadminbar {
    z-index: 9999999 !important;
}

/* Prevent Multiple Contact Form 7 Submissions */

.wpcf7-form.submitting .wpcf7-submit {
    pointer-events: none;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[data-elementor-type="wp-page"] {
  overflow: visible;
}

.gpa-slide {
    box-sizing: border-box;
}

.gpa-slide-100vh {
    height: auto;
    min-height: 100vh;
    box-sizing: border-box;
}

@media only screen and (max-width : 767px) {

    .gpa-slide-100vh {
        height: auto;
        min-height: 0;
    }
}

/* header */

.elementor-location-header {
	position: fixed !important;
	width: 100%;
	z-index: 99999;
}

@media only screen and (max-width : 767px) {
    .elementor-location-header {
        background-color: var(--vert);
    }
}

.elementor-location-header svg.sortir_vite_svg {
  height: 32px;
}

.elementor-location-header svg.header_menu_svg {
  height: 32px;
}

@media only screen and (max-width : 349px) {

    .elementor-location-header .header_logo_group {
        width: 100px;
    }

    .elementor-location-header .header_menu_group {
        width: calc(100% - 100px);
    }
}

/* change color in svg per page id */

.pense_bete_logo .background {
    fill: var(--vert);
}

body.header_menu_red .pense_bete_logo .background {
    fill: var(--rouge);
}

svg.sortir_vite_svg .background,
svg.sortir_vite_svg .background rect {
    fill: var(--vert);
}

body.header_menu_red svg.sortir_vite_svg .background,
body.header_menu_red svg.sortir_vite_svg .background rect {
    fill: var(--rouge);
}



body.home svg.sortir_vite_svg .dossier {
	opacity: 1;
	z-index: 1;
    transition: all .3s ease;
}

body.home svg.sortir_vite_svg.open .dossier {
	opacity: 0;
}

/* sortir_vite_svg */

.sortir_vite_svg {
	cursor: pointer;
}

.sortir_vite_svg .sortir_vite_mask_rect {
	transition: width 0.35s ease, x 0.35s ease;
}

.sortir_vite_svg .sortir_vite_texte {
	opacity: 0;
	transition: opacity 0.25s ease;
	transition-delay: 0.15s;
}

.sortir_vite_svg:hover .sortir_vite_mask_rect,
.sortir_vite_svg:focus-within .sortir_vite_mask_rect,
.sortir_vite_svg.open .sortir_vite_mask_rect {
	width: 116px;
	x: 0px;
}

.sortir_vite_svg:hover .sortir_vite_texte,
.sortir_vite_svg:focus-within .sortir_vite_texte,
.sortir_vite_svg.open .sortir_vite_texte {
	opacity: 1;
}

.sortir_vite_svg .dossier {
	transition: all .3s ease;
}

.sortir_vite_svg:hover .dossier {
	opacity: 0 !important;
}

.sortir_vite_svg.open .dossier {
    opacity: 0 !important;
}

/* dossier noir */

body.dossier_noir .sortir_vite_svg .dossier * {
    fill: var(--noir) !important;
}

body.dossier_noir .sortir_vite2 button {
    color: var(--blanc_casse) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 46 30'%3E%3Crect x='.224' y='3.9245' width='45.5966' height='25.8961' rx='1.4518' ry='1.4518' style='fill: %23231F20;'/%3E%3Cpath d='M16.2234,4.0308c-.3202,0-.5877-.3227-.6181-.7446l-.3263-2.0338c-.0405-.5571-.3931-.9826-.8167-.9826H3.7542c-.4225,0-.7751.4255-.8167.9826l-.3263,2.0338c-.0304.4219-.2979.7446-.6181.7446' style='fill: %23231F20;'/%3E%3C/svg%3E");
}

/* header_menu_box */

@media only screen and (max-width : 767px) {

    body.page .header_menu_box {
        display: block !important;
    }
}

/* .header_menu_box .elementor-button-text {
  text-shadow:
    1px 0 0 rgba(255,255,255,0.6),
   -1px 0 0 rgba(255,255,255,0.6),
    0 1px 0 rgba(255,255,255,0.6),
    0 -1px 0 rgba(255,255,255,0.6);
} */

@media only screen and (max-width : 767px) {

    .header_menu_box .elementor-button-text {
        text-shadow:none;
    }
}

/* header_menu_svg */

.header_menu_svg .texte {
	cursor: pointer;
}

.header_menu_svg .texte .hitbox {
	pointer-events: all;
}

.header_menu_svg .texte path {
	pointer-events: none;
}

.header_menu_svg.open {
	opacity: 0 !important;
}

.header_buttons_box {
	line-height: 0 !important;
}

.pense_bete_logo_box {
	min-height: 1px !important;
	line-height: 0 !important;
	z-index: 100000;
	position: fixed !important;
	min-height: 1px !important;
	line-height: 0 !important;
	position: relative !important;
	z-index: 9999999 !important;
	opacity: 1;
}

.pense_bete_logo_box svg {
	width: 100% !important;
	height: auto !important;
	line-height: 0 !important;
	opacity: 1;
}

body.home .pense_bete_logo_box svg {
	opacity: 0;
}

body.green_box_hidden .pense_bete_logo_box svg {
	opacity: 1 !important;
}

@media only screen and (max-width : 767px) {

    .pense_bete_logo_box svg {
        opacity: 1 !important;
    }
}

body.home {
	position: relative;
}

.green_box {
	display: none;
}

body.home .green_box {
	display: block;
	/* background-color: var(--vert); */
    background-color: transparent;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
}

body.home.green_box_hidden .green_box {
	display: none !important;
}

@media only screen and (max-width : 767px) {

    .green_box {
        display: none !important;
    }
}

.green_box .pense_bete_logo {
	opacity: 0;
}

/* main menu folder */

.menu_folder {
	width: 325px;
    height: 170px;
	margin-bottom: 22px;
	overflow: visible;
	position: fixed;
	top: -9999px;
	left: -9999px;
	z-index: 101;
	line-height: 0;
	transform-origin: center;
	animation: none;
	animation-fill-mode: forwards;
}

.menu_folder.open {
    transform-origin: center !important;
}

.menu_folder.open:hover {
	z-index: 9999999;
}

.menu_folder_inner_shadow {
	position: absolute;
	inset: -2px;
	background: black;
	opacity: 0.1;
	transform: translateY(0px);
	filter: blur(0px);
    mask: url('/wp-content/uploads/2026/01/main_menu_folder.svg') no-repeat center / 100% 100%;
    -webkit-mask: url('/wp-content/uploads/2026/01/main_menu_folder.svg') no-repeat center / 100% 100%;
}

.menu_folder_inner {
	position: absolute;
  	inset: 0;
	width: 325px;
    height: 170px;
	-webkit-mask-size: contain;
    mask-size: contain;
    mask: url('/wp-content/uploads/2026/01/main_menu_folder.svg') no-repeat center;
    -webkit-mask: url('/wp-content/uploads/2026/01/main_menu_folder.svg') no-repeat center;
	filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3));
}

.menu_folder_inner a {
	position: absolute;
	inset: 0;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding: 35px 15px 12px 15px;
}

.menu_folder_inner .image {
    flex: 0 0 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.menu_folder_inner .image img {
    display: block;
    line-height: 0;
}

.menu_folder_inner .info {
    flex: 0 0 calc( 100% - 120px - 15px );
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    line-height: 1.3;
}

.menu_folder_inner .titre {
    font-family: "Dela Gothic One", Sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1em;
    color: var(--noir);
    padding-top: 12px;
}

.menu_folder.sexualite_et_consentement .image {
    flex: 0 0 110px;
}

.menu_folder.sexualite_et_consentement .info {
    flex: 0 0 calc( 100% - 110px - 15px );
}

.menu_folder.sexualite_et_consentement .titre {
    font-size: 19px;
}

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

.menu_folder_inner .button .mot {
    transition: all .3s ease;
    flex: 0 0 auto;
    background: var(--noir);
    -webkit-mask:
        radial-gradient(circle 3px at top left, transparent 98%, black),
        radial-gradient(circle 3px at top right, transparent 98%, black),
        radial-gradient(circle 3px at bottom left, transparent 98%, black),
        radial-gradient(circle 3px at bottom right, transparent 98%, black);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle 3px at top left, transparent 98%, black),
        radial-gradient(circle 3px at top right, transparent 98%, black),
        radial-gradient(circle 3px at bottom left, transparent 98%, black),
        radial-gradient(circle 3px at bottom right, transparent 98%, black);
    mask-composite: intersect;
    padding: 6px 9px 4px 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--blanc_casse);
    transform: rotate(-1deg) translateZ(0);
    will-change: transform;
    line-height: 1;
}

.menu_folder_inner .button .fleche {
    flex: 0 0 22px;
}

.menu_folder.relations_saines .menu_folder_inner {
    background-color: var(--blanc_casse);
}

.menu_folder.sexualite_et_consentement .menu_folder_inner {
    background-color: var(--orange);
}

.menu_folder.violence .menu_folder_inner {
    background-color: var(--rouge);
}

.menu_folder.trouver_de_l_aide .menu_folder_inner {
    background-color: var(--violet);
}

.menu_folder.open {
    transform-origin: center !important;
}

.menu_folder.open.relations_saines:hover,
.menu_folder.open.violence:hover {
    animation: mainMenuHoverAnim 0.3s ease-out forwards;
}

.menu_folder.open.relations_saines:not(:hover).is-animated,
.menu_folder.open.violence:not(:hover).is-animated {
    animation: mainMenuHoverAnim 0.3s ease-out reverse forwards;
}

.menu_folder.open.sexualite_et_consentement:hover,
.menu_folder.open.trouver_de_l_aide:hover {
    animation: mainMenuHoverAnimReverse 0.3s ease-out forwards;
}

.menu_folder.open.sexualite_et_consentement:not(:hover).is-animated,
.menu_folder.open.trouver_de_l_aide:not(:hover).is-animated {
    animation: mainMenuHoverAnimReverse 0.3s ease-out reverse forwards;
}

@keyframes mainMenuHoverAnim {
    0% {
      transform: rotate(0deg) scale(1);
    }
    80% {
      transform: rotate(-6deg) scale(1.075);
    }
    100% {
      transform: rotate(-6deg) scale(1.05);
    }
}

@keyframes mainMenuHoverAnimReverse {
    0% {
      transform: rotate(0deg) scale(1);
    }
    80% {
      transform: rotate(6deg) scale(1.075);
    }
    100% {
      transform: rotate(6deg) scale(1.05);
    }
}

.menu_folder.sexualite_et_consentement .button .mot {
    color: var(--orange);
}

.menu_folder.violence .button .mot {
    color: var(--rouge);
}

.menu_folder.trouver_de_l_aide .button .mot {
    color: var(--violet);
}

.menu_folder.open:hover .button .mot {
    background-color: var(--blanc_casse);
    color: var(--noir);
}

.menu_folder.open.relations_saines:hover .button .mot {
    background-color: var(--vert);
    color: var(--blanc_casse);
}

/* tabbed_div */

.tab_link {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    width: 109px;
    height: 29px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 109 29'><path fill='%23231F20' d='M109 29C106.55 29 104.496 26.5115 104.267 23.2584L101.765 7.5767C101.452 3.28092 98.7516 0 95.5092 0H13.4908C10.2484 0 7.54816 3.28092 7.23539 7.5767L4.73324 23.2584C4.50387 26.5115 2.45002 29 0 29'/></svg>") no-repeat center / contain;
    cursor: pointer;
}

.tab_link.tab_link_gauche {
    left: 0;
    transform: translateX(0);
}

.tab_link.tab_link_blanc_casse {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 109 29'><path fill='%23ECF2D8' d='M109 29C106.55 29 104.496 26.5115 104.267 23.2584L101.765 7.5767C101.452 3.28092 98.7516 0 95.5092 0H13.4908C10.2484 0 7.54816 3.28092 7.23539 7.5767L4.73324 23.2584C4.50387 26.5115 2.45002 29 0 29'/></svg>") no-repeat center / contain
}

.tab_link.tab_link_orange {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 109 29'><path fill='%23FFA600' d='M109 29C106.55 29 104.496 26.5115 104.267 23.2584L101.765 7.5767C101.452 3.28092 98.7516 0 95.5092 0H13.4908C10.2484 0 7.54816 3.28092 7.23539 7.5767L4.73324 23.2584C4.50387 26.5115 2.45002 29 0 29'/></svg>") no-repeat center / contain
}

.tab_link.tab_link_violet {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 109 29'><path fill='%23C292FF' d='M109 29C106.55 29 104.496 26.5115 104.267 23.2584L101.765 7.5767C101.452 3.28092 98.7516 0 95.5092 0H13.4908C10.2484 0 7.54816 3.28092 7.23539 7.5767L4.73324 23.2584C4.50387 26.5115 2.45002 29 0 29'/></svg>") no-repeat center / contain
}

.tab_link.tab_link_rouge {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 109 29'><path fill='%23FF563F' d='M109 29C106.55 29 104.496 26.5115 104.267 23.2584L101.765 7.5767C101.452 3.28092 98.7516 0 95.5092 0H13.4908C10.2484 0 7.54816 3.28092 7.23539 7.5767L4.73324 23.2584C4.50387 26.5115 2.45002 29 0 29'/></svg>") no-repeat center / contain
}

.tab_link.tab_link_vert {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 109 29'><path fill='%2318AB3C' d='M109 29C106.55 29 104.496 26.5115 104.267 23.2584L101.765 7.5767C101.452 3.28092 98.7516 0 95.5092 0H13.4908C10.2484 0 7.54816 3.28092 7.23539 7.5767L4.73324 23.2584C4.50387 26.5115 2.45002 29 0 29'/></svg>") no-repeat center / contain
}

@media only screen and (max-width : 767px) {

    .tab_link {
        /* top: -18px;
        width: 70px;
        height: 20px; */
        display: none;
    }
}


/* footer */

.fake_footer {
    opacity: 0 !important;
    pointer-events: none !important;
    cursor: default !important;
}

@media only screen and (max-width : 767px) {

    .fake_footer {
        display: none !important;
    }

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

    .footer_contact_menu ul li:nth-child(1) {
        flex: 1 0 auto;
        margin-bottom: 0 !important;
    }

    .footer_contact_menu ul li:nth-child(1) a {
        background-color: var(--rouge);
        color: var(--blanc_casse);
        display: inline-block !important;
        padding: 9px 12px !important;
        line-height: 1 !important;
        transform: rotate(-1deg);
    }

    .footer_contact_menu ul li:nth-child(2) {
        flex: 0 0 38px;
        margin-left: 8px;
        margin-bottom: 0 !important;
    }

    .footer_contact_menu ul li:nth-child(2) a {
        font-size: 0 !important;
        line-height: 0 !important;
        background-color: red;
        width: 38px !important;
        height: 38px !important;
        display: block !important;
        font-size: 0 !important;
        line-height: 0 !important;
        background-color: transparent;
        background-image: url(/wp-content/uploads/2026/01/Instagram.svg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
    }

    .footer_contact_menu ul li:nth-child(3) {
        flex: 0 0 38px;
        margin-left: 8px;
        margin-bottom: 0 !important;
    }

    .footer_contact_menu ul li:nth-child(3) a {
        font-size: 0 !important;
        line-height: 0 !important;
        width: 38px !important;
        height: 38px !important;
        display: block !important;
        font-size: 0 !important;
        line-height: 0 !important;
        background-color: transparent;
        background-image: url(/wp-content/uploads/2026/01/Facebook.svg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
    }

    .footer_contact_menu ul li:nth-child(4) {
        flex: 0 0 38px;
        margin-left: 8px;
        margin-bottom: 0 !important;
    }

    .footer_contact_menu ul li:nth-child(4) a {
        font-size: 0 !important;
        line-height: 0 !important;
        width: 38px !important;
        height: 38px !important;
        display: block !important;
        font-size: 0 !important;
        line-height: 0 !important;
        background-color: transparent;
        background-image: url(/wp-content/uploads/2026/01/LinkedIn.svg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
    }
}

/* home */

.home_hide_titre,
.hide_titre {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.elementor-editor-active .home_hide_titre,
.elementor-editor-active .hide_titre {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 1rem;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

#repond_au_quiz_anim #cercle {
    pointer-events: all;
}

#repond_au_quiz_anim #texte,
#repond_au_quiz_anim #image {
    pointer-events: none;
}

/* Hover color */
#repond_au_quiz_anim #cercle:hover circle {
    fill: var(--orange) !important;
}

/* Rotation (Safari FIX) */
#repond_au_quiz_anim #texte-rotator {
    transform-origin: 60.5px 60.5px;
    animation: repond_au_quiz_anim_spin 30s linear infinite;
}

/* Keyframes */
@keyframes repond_au_quiz_anim_spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* home - comprendre_box */

.comprendre_box_inner {
    position: absolute;
    inset: 0;
    background-color: var(--blanc_casse);
    -webkit-mask:
        radial-gradient(circle 9px at top left, transparent 98%, black),
        radial-gradient(circle 9px at top right, transparent 98%, black),
        radial-gradient(circle 9px at bottom left, transparent 98%, black),
        radial-gradient(circle 9px at bottom right, transparent 98%, black);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle 9px at top left, transparent 98%, black),
        radial-gradient(circle 9px at top right, transparent 98%, black),
        radial-gradient(circle 9px at bottom left, transparent 98%, black),
        radial-gradient(circle 9px at bottom right, transparent 98%, black);
    mask-composite: intersect;
}

@media only screen and (max-width : 767px) {

    .comprendre_box {
        position: relative;
    }
}

@media only screen and (max-width : 374px) {

    .comprendre_box .comprendre_titre h2 {
        font-size: 30px !important;
    }
}

/* home - quiz */

.home_quiz_5_minutes {
    display: inline-block !important;
    width: auto !important;
    margin: 0 auto 0 0 !important;
    background: var(--blanc_casse);
    -webkit-mask:
        radial-gradient(circle 3px at top left, transparent 98%, black),
        radial-gradient(circle 3px at top right, transparent 98%, black),
        radial-gradient(circle 3px at bottom left, transparent 98%, black),
        radial-gradient(circle 3px at bottom right, transparent 98%, black);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle 3px at top left, transparent 98%, black),
        radial-gradient(circle 3px at top right, transparent 98%, black),
        radial-gradient(circle 3px at bottom left, transparent 98%, black),
        radial-gradient(circle 3px at bottom right, transparent 98%, black);
    mask-composite: intersect;
    padding: 6px 9px 4px 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    /* transform: rotate(-1deg); */
    transform: rotate(-1deg) translateZ(0);
    will-change: transform;
}

.home_quiz_resultats {
    display: inline-block !important;
    width: auto !important;
    margin: 0 auto 0 0 !important;
    background: var(--blanc_casse);
    -webkit-mask:
        radial-gradient(circle 3px at top left, transparent 98%, black),
        radial-gradient(circle 3px at top right, transparent 98%, black),
        radial-gradient(circle 3px at bottom left, transparent 98%, black),
        radial-gradient(circle 3px at bottom right, transparent 98%, black);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle 3px at top left, transparent 98%, black),
        radial-gradient(circle 3px at top right, transparent 98%, black),
        radial-gradient(circle 3px at bottom left, transparent 98%, black),
        radial-gradient(circle 3px at bottom right, transparent 98%, black);
    mask-composite: intersect;
    padding: 6px 9px 4px 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    /* transform: rotate(-1deg); */
    transform: rotate(1deg) translateZ(0);
    will-change: transform;
}

@media only screen and (max-width : 767px) {

    .home_quiz_5_minutes,
    .home_quiz_resultats {
        margin: 0 auto !important;
    }
}

.commencer_quiz_anim_link {
    display: block;
    line-height: 0;
}

#commencer_quiz_anim {
    width: 160px;
    height: auto;
    pointer-events: all;
}

#commencer_quiz_anim #texte {
    transform-origin: 50% 50%;
    transform-box: fill-box;
    animation: commencer_quiz_anim_spin 30s linear infinite;
}

#commencer_quiz_anim #cercle circle,
#commencer_quiz_anim #texte path {
  transition: fill 0.3s ease;
}

#commencer_quiz_anim:hover #cercle circle {
    fill: var(--vert) !important;
}

#commencer_quiz_anim:hover #texte path {
    fill: var(--blanc_casse) !important;
}

@keyframes commencer_quiz_anim_spin {
    to {
        transform: rotate(360deg);
    }
}

#commencer_quiz_anim #cercle circle {
  pointer-events: visiblePainted;
}

#commencer_quiz_anim #texte,
#commencer_quiz_anim #image {
  pointer-events: none;
}

@media only screen and (max-width : 767px) {

    .commencer_quiz_anim_sc {
        transform: translateX(-50%);
    }
}

.mobile_folder_menu_sc {
    display: none;
}

.mobile_menu_folder.relations_saines .menu_folder_inner {
    background-color: var(--vert);
}

.mobile_menu_folder.relations_saines .button .mot {
    background-color: var(--noir);
    color: var(--vert);
}

.mobile_menu_folder.relations_saines:hover .button .mot {
    background-color: var(--blanc_casse);
    color: var(--noir);
}

.mobile_menu_folder.sexualite_et_consentement .button .mot {
    background-color: var(--noir);
    color: var(--orange);
}

.mobile_menu_folder.sexualite_et_consentement:hover .button .mot {
    background-color: var(--blanc_casse);
    color: var(--noir);
}

.mobile_menu_folder.violence .button .mot {
    background-color: var(--noir);
    color: var(--rouge);
}

.mobile_menu_folder.violence:hover .button .mot {
    background-color: var(--blanc_casse);
    color: var(--noir);
}

.mobile_menu_folder.trouver_de_l_aide .button .mot {
    background-color: var(--noir);
    color: var(--violet);
}

.mobile_menu_folder.trouver_de_l_aide:hover .button .mot {
    background-color: var(--blanc_casse);
    color: var(--noir);
}

@media only screen and (max-width : 767px) {

    .mobile_folder_menu_sc {
        display: block;
    }

    .mobile_menu_folder {
        position: relative;
        top:0;
        left:0;
        margin: 0 auto;
    }
}

@media only screen and (max-width : 374px) {

    .mobile_folder_menu_sc {
        margin: 0 -20px;
        width: calc( 100% + 40px ) !important;
        max-width: calc( 100% + 40px ) !important;
    }

    .mobile_menu_folder {
        transform: scale(.9);
        transform-origin: center;

    }
}

/* explorer_btn */

.explorer_btn {
    display: block;
}

.explorer_btn .background {
  pointer-events: visiblePainted;
  transition: all .3s ease;
}

.explorer_btn .texte {
  transition: all .3s ease;
  pointer-events: none;
}

.explorer_btn .explorer_btn_link:hover .background {
    fill: var(--noir) !important;
}

.explorer_btn .explorer_btn_link:hover ~ .texte {
    fill: var(--blanc_casse) !important;
}

.explorer_btn.explorer_noir .background {
    fill: var(--noir);
}

.explorer_btn.explorer_noir .texte {
    fill: var(--blanc_casse)
}

/* trouvez_de_l_aide_btn * /

.trouvez_de_l_aide_btn {
    display: block;
}

.trouvez_de_l_aide_btn .background {
  pointer-events: visiblePainted;
  transition: all .3s ease;
}

.trouvez_de_l_aide_btn .texte {
  transition: all .3s ease;
  pointer-events: none;
}

.trouvez_de_l_aide_btn.trouvez_de_l_aide_noir .background {
    fill: var(--noir);
}

.trouvez_de_l_aide_btn.trouvez_de_l_aide_noir .texte {
    fill: var(--blanc_casse)
}

.trouvez_de_l_aide_btn.trouvez_de_l_aide_noir .background {
    fill: var(--noir);
}

.trouvez_de_l_aide_btn.trouvez_de_l_aide_noir .texte {
    fill: var(--blanc_casse)
}

.trouvez_de_l_aide_btn.trouvez_de_l_aide_btn_link:hover .background {
    fill: var(--orange) !important;
}

.trouvez_de_l_aide_btn.trouvez_de_l_aide_btn_link:hover ~ .texte {
    fill: var(--noir) !important;
}

/* */

.en_savoir_plus_btn .background {
    pointer-events: visiblePainted;
    transition: all .3s ease;
}

.en_savoir_plus_btn .texte {
    transition: all .3s ease;
    pointer-events: none;
}

.en_savoir_plus_btn .en_savoir_plus_btn_link:hover .background {
    fill: var(--vert) !important;
}

.en_savoir_plus_btn .en_savoir_plus_btn_link:hover ~ .texte {
    fill: var(--noir) !important;
}

.en_savoir_plus_mobile .elementor-shortcode {
    display: flex;
    justify-content: center;
}

.en_savoir_plus_mobile .en_savoir_plus_btn {
    transform: rotate(9deg);
}

@media only screen and (max-width : 767px) {

    .reponds_au_quiz_sc {
        left: 50% !important;
        right: 0 !important;
        transform: translate(-50%, 24px) !important;
    }
}

.nav_btn .elementor-button {
    /* background-color: green; */
    background-color: transparent !important;
    padding: 0;
}

.nav_btn .elementor-button-icon svg path {
    fill: var(--noir);
}

.nav_btn .elementor-button-text {
    transition: all .3s ease;
    background: transparent;
    -webkit-mask:
        radial-gradient(circle 3px at top left, transparent 98%, black),
        radial-gradient(circle 3px at top right, transparent 98%, black),
        radial-gradient(circle 3px at bottom left, transparent 98%, black),
        radial-gradient(circle 3px at bottom right, transparent 98%, black);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle 3px at top left, transparent 98%, black),
        radial-gradient(circle 3px at top right, transparent 98%, black),
        radial-gradient(circle 3px at bottom left, transparent 98%, black),
        radial-gradient(circle 3px at bottom right, transparent 98%, black);
    mask-composite: intersect;
    padding: 6px 9px 4px 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--noir);
    transform: rotate(0deg) translateZ(0);
    will-change: transform;
    line-height: 1;
}


/*
.nav_btn.nav_btn_rotate .elementor-button-text {
    transform: rotate(1deg) translateZ(0);
}

.nav_btn.nav_btn_rotate_inverse .elementor-button-text {
    transform: rotate(-1deg) translateZ(0);
}

.nav_btn.nav_btn_vert .elementor-button-text{
    background: var(--vert);
    color: var(--noir);
}

.nav_btn.nav_btn_orange .elementor-button-text{
    background: var(--orange);
    color: var(--noir);
}

.nav_btn.nav_btn_rouge .elementor-button-text{
    background: var(--rouge);
    color: var(--noir);
}

.nav_btn.nav_btn_violet .elementor-button-text{
    background: var(--violet);
    color: var(--noir);
}
*/

.nav_btn:hover .elementor-button-text{
    background: var(--noir) !important;
    color: var(--blanc_casse) !important;
}

.menu_box {
    transition: all .3s ease;
    /* background: var(--blanc_casse); */
    -webkit-mask:
        radial-gradient(circle 13px at top left, transparent 98%, black),
        radial-gradient(circle 13px at top right, transparent 98%, black),
        radial-gradient(circle 13px at bottom left, transparent 98%, black),
        radial-gradient(circle 13px at bottom right, transparent 98%, black);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle 13px at top left, transparent 98%, black),
        radial-gradient(circle 13px at top right, transparent 98%, black),
        radial-gradient(circle 13px at bottom left, transparent 98%, black),
        radial-gradient(circle 13px at bottom right, transparent 98%, black);
    mask-composite: intersect;
    transform: rotate(0deg) translateZ(0);
    will-change: transform;
}

.menu_box_rotate {
    transform: rotate(1deg) translateZ(0);
}

.menu_box_rotate_inverse {
    transform: rotate(-1deg) translateZ(0);
}

.menu_box .explorer_btn {
    width: 190px;
    height: auto;
}

@media only screen and (max-width : 1023px) {
    .menu_box .explorer_btn {
        width: 150px;
    }
}

@media only screen and (max-width : 767px) {
    .menu_box .explorer_btn {
        width: 125px;
    }
}

.menu_box:hover {
    background-color: var(--noir) !important;
}

.menu_box:hover h2 {
    color: var(--blanc_casse) !important;
}

.menu_box:hover .explorer_btn .background {
    fill: var(--blanc_casse) !important;
}

.menu_box:hover .explorer_btn .texte {
    fill: var(--noir) !important;
}

.flip_horizontal img {
  transform: scaleX(-1) !important;
}

.hero_section_tag {
    transition: all .3s ease;
    -webkit-mask:
        radial-gradient(circle 3px at top left, transparent 98%, black),
        radial-gradient(circle 3px at top right, transparent 98%, black),
        radial-gradient(circle 3px at bottom left, transparent 98%, black),
        radial-gradient(circle 3px at bottom right, transparent 98%, black);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle 3px at top left, transparent 98%, black),
        radial-gradient(circle 3px at top right, transparent 98%, black),
        radial-gradient(circle 3px at bottom left, transparent 98%, black),
        radial-gradient(circle 3px at bottom right, transparent 98%, black);
    mask-composite: intersect;
    transform: rotate(-1deg) translateZ(0);
    will-change: transform;
}

.hero_section_tag.hero_section_tag_rotate_inverse {
    transform: rotate(1deg) translateZ(0);
}

.vrai_faux_text_link a {
    color: var(--vert) !important;
    text-decoration: none !important;
}

.vrai_faux_text_link .bolder {
    font-family: "Pipetton Sans", Sans-serif;
    font-weight: 400;
}

.explorer .elementor-heading-title {
    transition: all .3s ease;
    flex: 0 0 auto;
    background: var(--noir) !important;
    color: var(--blanc_casse) !important;
    -webkit-mask:
        radial-gradient(circle 3px at top left, transparent 98%, black),
        radial-gradient(circle 3px at top right, transparent 98%, black),
        radial-gradient(circle 3px at bottom left, transparent 98%, black),
        radial-gradient(circle 3px at bottom right, transparent 98%, black);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle 3px at top left, transparent 98%, black),
        radial-gradient(circle 3px at top right, transparent 98%, black),
        radial-gradient(circle 3px at bottom left, transparent 98%, black),
        radial-gradient(circle 3px at bottom right, transparent 98%, black);
    mask-composite: intersect;
    padding: 3px 6px 3px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* transform: rotate(-1deg); */
    transform: rotate(-1deg) translateZ(0);
    will-change: transform;
    line-height: 1;
}

.folder_anim {
    transition: all .3s ease;
}

.folder_anim:hover {
    transform: rotate(-6deg);
}

.comprendre_internet_titre {
    transition: all .3s ease;
    flex: 0 0 auto;
    background: var(--vert) !important;
    color: var(--noir) !important;
    -webkit-mask:
        radial-gradient(circle 3px at top left, transparent 98%, black),
        radial-gradient(circle 3px at top right, transparent 98%, black),
        radial-gradient(circle 3px at bottom left, transparent 98%, black),
        radial-gradient(circle 3px at bottom right, transparent 98%, black);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle 3px at top left, transparent 98%, black),
        radial-gradient(circle 3px at top right, transparent 98%, black),
        radial-gradient(circle 3px at bottom left, transparent 98%, black),
        radial-gradient(circle 3px at bottom right, transparent 98%, black);
    mask-composite: intersect;
    padding: 4px 6px 2px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: rotate(1deg) translateZ(0);
    will-change: transform;
    line-height: 1;
}

.les_emotions_titre {
    transition: all .3s ease;
    flex: 0 0 auto;
    background: var(--rouge) !important;
    color: var(--noir) !important;
    -webkit-mask:
        radial-gradient(circle 3px at top left, transparent 98%, black),
        radial-gradient(circle 3px at top right, transparent 98%, black),
        radial-gradient(circle 3px at bottom left, transparent 98%, black),
        radial-gradient(circle 3px at bottom right, transparent 98%, black);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle 3px at top left, transparent 98%, black),
        radial-gradient(circle 3px at top right, transparent 98%, black),
        radial-gradient(circle 3px at bottom left, transparent 98%, black),
        radial-gradient(circle 3px at bottom right, transparent 98%, black);
    mask-composite: intersect;
    padding: 4px 6px 2px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: rotate(1deg) translateZ(0);
    will-change: transform;
    line-height: 1;
}

.comprendre_internet_orange {
    transition: all .3s ease;
    flex: 0 0 auto;
    background: var(--orange) !important;
    color: var(--noir) !important;
    -webkit-mask:
        radial-gradient(circle 13px at top left, transparent 98%, black),
        radial-gradient(circle 13px at top right, transparent 98%, black),
        radial-gradient(circle 13px at bottom left, transparent 98%, black),
        radial-gradient(circle 13px at bottom right, transparent 98%, black);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle 13px at top left, transparent 98%, black),
        radial-gradient(circle 13px at top right, transparent 98%, black),
        radial-gradient(circle 13px at bottom left, transparent 98%, black),
        radial-gradient(circle 13px at bottom right, transparent 98%, black);
    mask-composite: intersect;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-3deg) translateZ(0);
    will-change: transform;
}

.comprendre_internet_vert {
    transition: all .3s ease;
    flex: 0 0 auto;
    background: var(--vert) !important;
    color: var(--noir) !important;
    -webkit-mask:
        radial-gradient(circle 13px at top left, transparent 98%, black),
        radial-gradient(circle 13px at top right, transparent 98%, black),
        radial-gradient(circle 13px at bottom left, transparent 98%, black),
        radial-gradient(circle 13px at bottom right, transparent 98%, black);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle 13px at top left, transparent 98%, black),
        radial-gradient(circle 13px at top right, transparent 98%, black),
        radial-gradient(circle 13px at bottom left, transparent 98%, black),
        radial-gradient(circle 13px at bottom right, transparent 98%, black);
    mask-composite: intersect;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: rotate(3deg) translateZ(0);
    will-change: transform;
}

.sexualire_en_ligne_createurs {
    transition: all .3s ease;
    flex: 0 0 auto;
    background: var(--blanc_casse) !important;
    color: var(--noir) !important;
    -webkit-mask:
        radial-gradient(circle 45px at top left, transparent 98%, black),
        radial-gradient(circle 45px at top right, transparent 98%, black),
        radial-gradient(circle 45px at bottom left, transparent 98%, black),
        radial-gradient(circle 45px at bottom right, transparent 98%, black);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle 45px at top left, transparent 98%, black),
        radial-gradient(circle 45px at top right, transparent 98%, black),
        radial-gradient(circle 45px at bottom left, transparent 98%, black),
        radial-gradient(circle 45px at bottom right, transparent 98%, black);
    mask-composite: intersect;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateZ(0);
    will-change: transform;

}

@media only screen and (max-width : 767px) {

    .sexualire_en_ligne_createurs {
        -webkit-mask:
            radial-gradient(circle 25px at top left, transparent 98%, black),
            radial-gradient(circle 25px at top right, transparent 98%, black),
            radial-gradient(circle 25px at bottom left, transparent 98%, black),
            radial-gradient(circle 25px at bottom right, transparent 98%, black);
        -webkit-mask-composite: source-in;
        mask:
            radial-gradient(circle 25px at top left, transparent 98%, black),
            radial-gradient(circle 25px at top right, transparent 98%, black),
            radial-gradient(circle 25px at bottom left, transparent 98%, black),
            radial-gradient(circle 25px at bottom right, transparent 98%, black);
        mask-composite: intersect;
    }
}

.developper_tags {
    transition: all .3s ease;
    flex: 0 0 auto;
    background: var(--blanc_casse) !important;
    color: var(--noir) !important;
    -webkit-mask:
        radial-gradient(circle 3px at top left, transparent 98%, black),
        radial-gradient(circle 3px at top right, transparent 98%, black),
        radial-gradient(circle 3px at bottom left, transparent 98%, black),
        radial-gradient(circle 3px at bottom right, transparent 98%, black);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle 3px at top left, transparent 98%, black),
        radial-gradient(circle 3px at top right, transparent 98%, black),
        radial-gradient(circle 3px at bottom left, transparent 98%, black),
        radial-gradient(circle 3px at bottom right, transparent 98%, black);
    mask-composite: intersect;
    padding: 4px 6px 2px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateZ(0);
    will-change: transform;
}

.sextage {
    transition: all .3s ease;
    flex: 0 0 auto;
    background: var(--vert) !important;
    color: var(--noir) !important;
    -webkit-mask:
        radial-gradient(circle 13px at top left, transparent 98%, black),
        radial-gradient(circle 13px at top right, transparent 98%, black),
        radial-gradient(circle 13px at bottom left, transparent 98%, black),
        radial-gradient(circle 13px at bottom right, transparent 98%, black);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle 13px at top left, transparent 98%, black),
        radial-gradient(circle 13px at top right, transparent 98%, black),
        radial-gradient(circle 13px at bottom left, transparent 98%, black),
        radial-gradient(circle 13px at bottom right, transparent 98%, black);
    mask-composite: intersect;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateZ(0);
    will-change: transform;
}

.sexualite_en_ligne_photos {
    transition: all .3s ease;
    flex: 0 0 auto;
    background: var(--blanc_casse) !important;
    color: var(--noir) !important;
    -webkit-mask:
        radial-gradient(circle 13px at top left, transparent 98%, black),
        radial-gradient(circle 13px at top right, transparent 98%, black),
        radial-gradient(circle 13px at bottom left, transparent 98%, black),
        radial-gradient(circle 13px at bottom right, transparent 98%, black);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle 13px at top left, transparent 98%, black),
        radial-gradient(circle 13px at top right, transparent 98%, black),
        radial-gradient(circle 13px at bottom left, transparent 98%, black),
        radial-gradient(circle 13px at bottom right, transparent 98%, black);
    mask-composite: intersect;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateZ(0);
    will-change: transform;
}

.rotate_2_deg {
    transform: rotate(2deg);
}

.rotate_2_deg_reverse {
    transform: rotate(-2deg);
}

@media only screen and (max-width : 767px) {

    .rotate_2_deg {
    transform: rotate(1deg);
}

    .rotate_2_deg_reverse {
        transform: rotate(-1deg);
    }
}

.lien_blanc_orange a {
    color: var(--blanc_casse) !important;
    text-decoration: none !important;
}

.lien_blanc_orange a:hover {
    color: var(--orange) !important;
    text-decoration: none !important;
}

.lien_vert_orange a {
    color: var(--vert) !important;
    text-decoration: none !important;
}

.lien_vert_orange a:hover {
    color: var(--orange) !important;
    text-decoration: none !important;
}

.lien_blanc_vert a {
    color: var(--blanc_casse) !important;
    text-decoration: none !important;
}

.lien_blanc_vert a:hover {
    color: var(--vert) !important;
    text-decoration: none !important;
}



.chiffre_bloc_rotate_5 {
    transform: rotate(5deg);
}

.arret_letter {
    font-family: 'Dela Gothic One', sans-serif;
    font-size: 114px;
    font-weight: 400;
}
.arret_letter_t {
    display: inline-block;
    margin-right: -30px;
}

.emotiion_trop_grande_bg_rouge {
    transition: all .3s ease;
    background: var(--rouge) !important;
    color: var(--noir) !important;
    -webkit-mask:
        radial-gradient(circle 13px at top left, transparent 98%, black),
        radial-gradient(circle 13px at top right, transparent 98%, black),
        radial-gradient(circle 13px at bottom left, transparent 98%, black),
        radial-gradient(circle 13px at bottom right, transparent 98%, black);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle 13px at top left, transparent 98%, black),
        radial-gradient(circle 13px at top right, transparent 98%, black),
        radial-gradient(circle 13px at bottom left, transparent 98%, black),
        radial-gradient(circle 13px at bottom right, transparent 98%, black);
    mask-composite: intersect;
    transform: translateZ(0);
    will-change: transform;
}

.soutenir {
    transition: all .3s ease;
    flex: 0 0 auto;
    background: var(--blanc_casse) !important;
    color: var(--noir) !important;
    -webkit-mask:
        radial-gradient(circle 13px at top left, transparent 98%, black),
        radial-gradient(circle 13px at top right, transparent 98%, black),
        radial-gradient(circle 13px at bottom left, transparent 98%, black),
        radial-gradient(circle 13px at bottom right, transparent 98%, black);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle 13px at top left, transparent 98%, black),
        radial-gradient(circle 13px at top right, transparent 98%, black),
        radial-gradient(circle 13px at bottom left, transparent 98%, black),
        radial-gradient(circle 13px at bottom right, transparent 98%, black);
    mask-composite: intersect;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateZ(0);
    will-change: transform;
}

.pour_parler_violet {
    transition: all .3s ease;
    flex: 0 0 auto;
    background: var(--violet) !important;
    color: var(--noir) !important;
    -webkit-mask:
        radial-gradient(circle 6px at bottom left, transparent 98%, black),
        radial-gradient(circle 6px at bottom right, transparent 98%, black);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle 6px at bottom left, transparent 98%, black),
        radial-gradient(circle 6px at bottom right, transparent 98%, black);
    mask-composite: intersect;
    transform: translateZ(0);
    will-change: transform;
}

.pour_parler_vert {
    transition: all .3s ease;
    flex: 0 0 auto;
    background: var(--vert) !important;
    color: var(--noir) !important;
    -webkit-mask:
        radial-gradient(circle 6px at top left, transparent 98%, black),
        radial-gradient(circle 6px at top right, transparent 98%, black),
        radial-gradient(circle 6px at bottom left, transparent 98%, black),
        radial-gradient(circle 6px at bottom right, transparent 98%, black);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle 6px at top left, transparent 98%, black),
        radial-gradient(circle 6px at top right, transparent 98%, black),
        radial-gradient(circle 6px at bottom left, transparent 98%, black),
        radial-gradient(circle 6px at bottom right, transparent 98%, black);
    mask-composite: intersect;
    transform: translateZ(0);
    will-change: transform;
}

.organismes {
    transition: all .3s ease;
    flex: 0 0 auto;
    background: var(--blanc_casse) !important;
    color: var(--noir) !important;
    -webkit-mask:
        radial-gradient(circle 6px at top left, transparent 98%, black),
        radial-gradient(circle 6px at top right, transparent 98%, black),
        radial-gradient(circle 6px at bottom left, transparent 98%, black),
        radial-gradient(circle 6px at bottom right, transparent 98%, black);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle 6px at top left, transparent 98%, black),
        radial-gradient(circle 6px at top right, transparent 98%, black),
        radial-gradient(circle 6px at bottom left, transparent 98%, black),
        radial-gradient(circle 6px at bottom right, transparent 98%, black);
    mask-composite: intersect;
    transform: rotate(2deg) translateZ(0);
    will-change: transform;
}

.organismes_reverse {
    transition: all .3s ease;
    flex: 0 0 auto;
    background: var(--blanc_casse) !important;
    color: var(--noir) !important;
    -webkit-mask:
        radial-gradient(circle 6px at top left, transparent 98%, black),
        radial-gradient(circle 6px at top right, transparent 98%, black),
        radial-gradient(circle 6px at bottom left, transparent 98%, black),
        radial-gradient(circle 6px at bottom right, transparent 98%, black);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle 6px at top left, transparent 98%, black),
        radial-gradient(circle 6px at top right, transparent 98%, black),
        radial-gradient(circle 6px at bottom left, transparent 98%, black),
        radial-gradient(circle 6px at bottom right, transparent 98%, black);
    mask-composite: intersect;
    transform: rotate(-2deg) translateZ(0);
    will-change: transform;
}


.sante_relation_degrade {
    background: linear-gradient( to right, #c00000 0%, #feff00 33%, #38b64a 66%, #3cb0eb 100% );
}

.accordeon_besoins summary {
    border: none !important;
    transition: all .3s ease;
    flex: 0 0 auto;
    background: var(--noir) !important;
    color: var(--blanc_casse) !important;
    -webkit-mask:
        radial-gradient(circle 13px at top left, transparent 98%, black),
        radial-gradient(circle 13px at top right, transparent 98%, black),
        radial-gradient(circle 13px at bottom left, transparent 98%, black),
        radial-gradient(circle 13px at bottom right, transparent 98%, black);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle 13px at top left, transparent 98%, black),
        radial-gradient(circle 13px at top right, transparent 98%, black),
        radial-gradient(circle 13px at bottom left, transparent 98%, black),
        radial-gradient(circle 13px at bottom right, transparent 98%, black);
    mask-composite: intersect;
    transform: translateZ(0);
    will-change: transform;
    z-index: 1 !important;
}


.accordeon_besoins .e-n-accordion-item > div {
    margin-left: 50px;
    margin-right: 50px;
    width: calc( 100% - 100px );

    -webkit-mask:
        radial-gradient(circle 13px at bottom left, transparent 98%, black),
        radial-gradient(circle 13px at bottom right, transparent 98%, black);
    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(circle 13px at bottom left, transparent 98%, black),
        radial-gradient(circle 13px at bottom right, transparent 98%, black);
    mask-composite: intersect;
    transform: translateZ(0);
    will-change: transform;
    z-index: 1 !important;

}

.accordeon_texte ol {
    font-family: "Pipetton Sans", Sans-serif;
    font-size: 30px;
}

.accordeon_texte ol ol {
    font-family: "Roboto", Sans-serif;
    margin: .5em 0 0 0;
    font-size: 24px;
}

.accordeon_texte ol li {
    margin: 0 0 30px 0;
}

.accordeon_texte ol li:last-child {
    margin: 0;
}

.accordeon_texte ol li li {
    margin: 0 0 15px 0;
}

.accordeon_texte ol li li:last-child {
    margin: 0;
}

@media only screen and (max-width : 1199px) {

    .accordeon_besoins summary {
        -webkit-mask:
            radial-gradient(circle 9px at top left, transparent 98%, black),
            radial-gradient(circle 9px at top right, transparent 98%, black),
            radial-gradient(circle 9px at bottom left, transparent 98%, black),
            radial-gradient(circle 9px at bottom right, transparent 98%, black);
        -webkit-mask-composite: source-in;
        mask:
            radial-gradient(circle 9px at top left, transparent 98%, black),
            radial-gradient(circle 9px at top right, transparent 98%, black),
            radial-gradient(circle 9px at bottom left, transparent 98%, black),
            radial-gradient(circle 9px at bottom right, transparent 98%, black);
        mask-composite: intersect;
    }

    .accordeon_texte ol {
        font-size: 24px;
    }

    .accordeon_texte ol ol {
        font-size: 20px;
    }

    .accordeon_texte ol li {
        margin: 0 0 20px 0;
    }

    .accordeon_texte ol li:last-child {
        margin: 0;
    }

    .accordeon_texte ol li li {
        margin: 0 0 10px 0;
    }

    .accordeon_texte ol li li:last-child {
        margin: 0;
    }
}

@media only screen and (max-width : 1023px) {

    .accordeon_besoins .e-n-accordion-item > div {
        margin-left: 25px;
        margin-right: 25px;
        width: calc( 100% - 50px );
    }
}

@media only screen and (max-width : 767px) {

    .accordeon_besoins summary {
        -webkit-mask:
            radial-gradient(circle 6px at top left, transparent 98%, black),
            radial-gradient(circle 6px at top right, transparent 98%, black),
            radial-gradient(circle 6px at bottom left, transparent 98%, black),
            radial-gradient(circle 6px at bottom right, transparent 98%, black);
        -webkit-mask-composite: source-in;
        mask:
            radial-gradient(circle 6px at top left, transparent 98%, black),
            radial-gradient(circle 6px at top right, transparent 98%, black),
            radial-gradient(circle 6px at bottom left, transparent 98%, black),
            radial-gradient(circle 6px at bottom right, transparent 98%, black);
        mask-composite: intersect;
    }

    .accordeon_texte ol {
        font-size: 18px;
    }

    .accordeon_texte ol ol {
        font-size: 16px;
    }

    .accordeon_texte ol li {
        margin: 0 0 10px 0;
    }

    .accordeon_texte ol li:last-child {
        margin: 0;
    }

    .accordeon_texte ol li li {
        margin: 0 0 5px 0;
    }

    .accordeon_texte ol li li:last-child {
        margin: 0;
    }
}

/* * /

.exemple_list ul {
    margin-bottom: 1em !important;
}

.exemple_list ul:last-child {
    margin-bottom: 0em !important;
}


.exemple_list li {
    margin-bottom: .5em !important;
}

.exemple_list li:last-child {
    margin-bottom: 0em !important;
}

.exemple_list p {
    margin-bottom: 1em !important;
}

.exemple_list p:last-child {
    margin-bottom: 0em !important;
}

/* */

.exemple_list li {
    margin-bottom: .5em;
}

.exemple_list li:last-child {
    margin-bottom: 0;
}

.exemple_list ul,
.exemple_list ol {
    margin-top: 1em;
    margin-bottom: 1em;
}

.exemple_list ul ol,
.exemple_list ol ul,
.exemple_list ul ul,
.exemple_list ol ol {
    margin-top: .5em;
}



.exemple_list p {
    margin-bottom: 1em !important;
}

.exemple_list p:last-child {
    margin-bottom: 0em !important;
}



.texte_vert {
    color: var(--vert) !important;
}

.texte_jaune {
    color: var(--orange) !important;
}

.texte_rouge {
    color: var(--rouge) !important;
}

.texte_violet {
    color: var(--violet) !important;
}

























.tableau_recapitulatif {
    width: 100% !important;
}

.tableau_recapitulatif_inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 25px;
}

.tableau_recapitulatif .table-wrapper {
    display: flex;
    align-items: center;
}

.tableau_recapitulatif .label {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    padding: 9px;
    text-align: center;
    margin-right: 5px;
}

.tableau_recapitulatif .axis-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    padding: 9px;
    text-align: center;
    margin-right: 5px;
}

.tableau_recapitulatif table {
    width: 100%;
    border-collapse: collapse;
}

.tableau_recapitulatif th,
.tableau_recapitulatif td {
    border: 3px solid var(--noir) !important;
    padding: 9px;
    text-align: center;
    vertical-align: middle;
    font-size: 20px;
    line-height: 1;
    font-family: "Roboto", sans-serif;
}

.tableau_recapitulatif th {
    font-weight: 700;
    white-space: nowrap;
}

.tableau_recapitulatif .row-header {
    font-weight: 700;
    white-space: nowrap !important;
}

.tableau_recapitulatif .oui {
    background-color: var(--vert);
    color: var(--blanc_casse);
    font-weight: 700;
}

.tableau_recapitulatif .non {
    background-color: var(--rouge);
    color: var(--blanc_casse);
    font-weight: 700;
}

.tableau_recapitulatif .source {
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    line-height: 1.3;
    color: var(--noir);
}

@media only screen and (max-width : 1199px) {

    .tableau_recapitulatif .label {
        font-size: 18px;
        padding: 6px;
    }

    .tableau_recapitulatif .axis-label {
        font-size: 18px;
        padding: 6px;
    }

    .tableau_recapitulatif th,
    .tableau_recapitulatif td {
        border: 2px solid var(--noir) !important;
        padding: 6px;
        font-size: 18px;
    }
}

@media only screen and (max-width : 1023px) {

}

@media only screen and (max-width : 767px) {

    .tableau_recapitulatif .label {
        font-size: 16px;
        padding: 3px;
    }

    .tableau_recapitulatif .axis-label {
        font-size: 16px;
        padding: 3px;
    }

    .tableau_recapitulatif th,
    .tableau_recapitulatif td {
        border: 1px solid var(--noir) !important;
        padding: 3px;
        font-size: 16px;
    }
}

.background_attachment_fixed {
    background-attachment: fixed !important;
}

@media only screen and (max-width : 1023px) {

    .background_attachment_fixed {
        background-attachment: scroll !important;
    }

    .background_attachment_fixed_tablet {
        background-attachment: fixed !important;
    }
}

@media only screen and (max-width : 767px) {

    .background_attachment_fixed_tablet {
        background-attachment: scroll !important;
    }

    .background_noir_mobile {
        background-image: none !important;
        background-color: var(--noir) !important;
    }
}

/* footer fix */


body:not(.home) .fake_footer {
    display: none !important;
}

body:not(.home) .gpa-slide-100vh,
body:not(.home) .gpa-slide-100vh .footer_top {
    min-height: 1px !important;
}

.censure {
    text-decoration: line-through;
    text-decoration-color: #FF563FCC;
    text-decoration-thickness: 8px;
}

.sortir_vite2 {
    display: flex;
    column-gap: 37px;
    background-color: rgba(0,0,0,.05);
    border-radius: 50px;
    padding: 6px 6px 6px 12px;
    margin: -5px -5px 0 0;
}

.sortir_vite2 button {
    background-color: transparent;
    border: 0px solid #000;
    color: var(--noir);
    font-family: "Pipetton Sans", Sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 46 30'%3E%3Crect x='.224' y='3.9245' width='45.5966' height='25.8961' rx='1.4518' ry='1.4518' style='fill: %23ecf2d8;'/%3E%3Cpath d='M16.2234,4.0308c-.3202,0-.5877-.3227-.6181-.7446l-.3263-2.0338c-.0405-.5571-.3931-.9826-.8167-.9826H3.7542c-.4225,0-.7751.4255-.8167.9826l-.3263,2.0338c-.0304.4219-.2979.7446-.6181.7446' style='fill: %23ecf2d8;'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain; /* or cover, or a fixed size */
    background-position: center;
    outline: none;
    width: 46px;
    height: 30px;
    padding: 5px 0 0 0;
}

.sortir_vite2 a {
    padding: 10px 10px 10px 0;
    background-color: var(--vert);
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-width: 32px;
    height: 32px;
}

.sortir_vite2 a svg {
    display: block;
    width: 12px;
    height: 12px;
    fill: var(--noir);
    margin-left: 10px;
}

.sortir_vite2 a span {
    width: 0px;
    /* width: 90px; */
    overflow: hidden;
    transition: all .3s ease;
    font-family: "Pipetton Sans", Sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1em;
    color: var(--noir);
    display: block;
    padding: 1px 0 0 0;
    white-space: nowrap;
    text-align: right;
}

.sortir_vite2 a:hover span {
    width: 90px;
}

body.header_menu_red .sortir_vite2 a {
    background-color: var(--rouge);
}

.sortir_vite2 a:hover

.main_menu_folder_item:not(.open) {
  transition: margin-right 0.3s;
}