:root {
    --color_blanc: rgb(255, 255, 255);
    --color_noir: rgb(17, 17, 17);
    --color_bleu_fonce: rgb(92, 100, 242);
    --color_bleu_clair: rgb(121, 139, 242);
    --color_vert_pomme: rgb(146, 191, 78);
    --color_vert_clair: rgb(182, 204, 177);
    --color_gris: rgb(236, 246, 247);
    --color_beige: rgb(235, 231, 222);
    --padding_LR: 9.3vw;
    --margin_section: 125px;
    --navbar_height: 80px;
    --font_text: 'Comic Sans MS', 'Comic fNeue', cursive, sans-serif;
    --font_title: 'Fuzzy Bubbles', cursive, sans-serif;
}

@font-face {
    font-family: 'Comic Sans MS';
    font-style: normal;
    font-weight: 400;
    src: local('Comic Sans MS'), local('ComicSansMS-Regular'),
        url(https://allfont.ru/cache/fonts/comic-sans-ms_53a8778a817839ef2dbc5dc94ce14334.woff) format('woff'),
        url(https://allfont.ru/cache/fonts/comic-sans-ms_53a8778a817839ef2dbc5dc94ce14334.ttf) format('truetype');
}

body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--font_text);
}

body.no-scroll {
    overflow: hidden;
}

* {
    box-sizing: border-box;
}

.jvflex {
    position: fixed;
    z-index: 9999;
    top: 70px;
    left: 16px;
}

.jvflex>a {
    border-radius: 24px;
    cursor: pointer;
    display: block;
    height: 48px;
    line-height: 48px;
    opacity: .9;
    position: absolute;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    speak: none;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 48px;
    background: url("/themes/jvflex/assets/images/theme-preview.png"), #f8f6f5;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    box-shadow: 0px 0px 3px 1px rgb(0 0 0 / 30%);
}

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

.img_fit {
    object-fit: cover;
    object-position: center;
}

.img_full {
    width: 100%;
    height: 100%;
    position: absolute;
}

.page-fermette #definition .title-left {
    display: none;
}

.fermette-full {
    position: relative;
    max-height: 680px;
    height: 55vh;
}

h1 {
    font-family: var(--font_title);
    font-style: normal;
    font-weight: 700;
    font-size: clamp(4vw, 4.5rem, 10%);
    letter-spacing: -1.1523px;
    color: var(--color_noir);
    margin: 0.5rem;
}

h2 {
    font-family: var(--font_title);
    font-style: normal;
    font-weight: 700;
    font-size: 4vw;
    margin: 0;
    color: var(--color_bleu_fonce);
    margin-bottom: 0.25rem;
}

h2.title-left {
    margin-left: var(--padding_LR);
}

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

header #header-top {
    background-color: var(--color_blanc);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--navbar_height);
    padding: 0 12px;
}

header {
    background-image: url('/themes/jvflex/assets/images/header.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

header#layout-header>#header-top .logo {
    display: none;
}

header#layout-header>#header-top>#burger-menu {
    display: none;
}

header #navbar ul {
    display: flex;
    padding: 0;
    list-style: none;
    gap: 2rem;
}

header #navbar ul a.nav-link {
    color: var(--color_noir);
    text-decoration: none;
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 400;
}

header #header-bottom {
    font-family: var(--font_text);
    display: grid;
    grid-template-columns: 1fr 0.25fr;
    height: 60vh;
    align-items: center;
    padding: 1rem var(--padding_LR);
    gap: 1rem;
}

header #header-bottom .left {
    display: flex;
    flex-direction: column;
}

header #header-bottom .logo img {
    height: 18vh;
    width: auto;
    margin: 0 auto;
    object-fit: contain;
}

header .identite {
    display: flex;
    align-items: center;
    gap: 12px;
}

header .identite div {
    position: relative;
    display: inline-block;
    border-radius: 200px;
}

header .identite div::before,
header #header-bottom .right .submenu li a::before {
    content: "";
    background-image: url("/themes/jvflex/assets/images/identity.png");
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: -2px;
    left: -2px;
    right: -1px;
    bottom: -1px;
    transition: transform 0.3s;
}

header .identite div::before,
header #header-bottom .right .submenu li a:hover::before {
    transform: rotate(180deg);
}

header .identite div img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: inherit;
}

header #header-bottom .right .submenu {
    list-style: none;
    padding: 0;
    display: flex;
    align-items: center;
    column-gap: 10px;
}

header #header-bottom .right .submenu li a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 200px;
    color: var(--color_blanc);
    font-family: var(--font_text);
    font-style: normal;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    padding: 0.75rem;
    cursor: pointer;
    min-width: 105px !important;
    min-height: 105px !important;
}

header #header-bottom .right .submenu li:nth-child(1) a {
    max-width: 200px;
    max-height: 200px;
    width: 15vw;
    height: 15vw;
    font-size: 1.5rem;
    background-color: var(--color_bleu_fonce);
}

header #header-bottom .right .submenu li:nth-child(2) a {
    max-width: 180px;
    max-height: 180px;
    width: 13vw;
    height: 13vw;
    background-color: var(--color_bleu_clair);
    font-size: 1.25rem;
}

header #header-bottom .right .submenu li:nth-child(3) a {
    max-width: 160px;
    max-height: 160px;
    width: 11vw;
    height: 11vw;
    background-color: var(--color_vert_pomme);
    font-size: 1.10rem;
}

main {
    padding: var(--margin_section) var(--padding_LR);
}

.page-accueil main {
    padding: var(--margin_section) var(--padding_LR) 0;
}

footer#layout-footer {
    display: grid;
    grid-template-columns: 1fr 0.25fr 1fr;
    justify-items: center;
    color: var(--color_noir);
    padding: 30px;
    border-top: 1px solid var(--color_gris);
}

footer#layout-footer a {
    color: inherit;
    text-decoration: none;
}

footer#layout-footer a:hover,
header #navbar ul a.nav-link.active,
header #navbar ul a.nav-link:hover {
    color: var(--color_bleu_fonce);
}

footer#layout-footer .footer-infos {
    display: flex;
    align-items: center;
}

footer#layout-footer .footer-infos img {
    margin-right: 6px;
}

footer#layout-footer .footer-socials {
    display: grid;
    grid-template-columns: 0.75fr 1fr;
    column-gap: 1rem;
    row-gap: 0.25rem;
}

footer#layout-footer .footer-legals {
    display: flex;
    align-items: center;
}

footer#layout-footer .footer-legals p+p {
    border-left: 2px solid var(--color_noir);
}

footer#layout-footer .footer-legals p {
    padding: 0.5rem 3vw 0.5rem 0;
    margin: 0;
}

footer#layout-footer .footer-legals p:last-child {
    padding: 0.5rem 0 0.5rem 3vw;
}

footer#layout-footer .logo img {
    width: auto;
    height: 50px;
    object-fit: contain;
}

/* Contact */
.page-contact .title_or {
    text-align: center;
}

.page-contact .title_uppercase {
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color_noir);
    margin-bottom: 1.5rem;
    font-family: var(--font_text);
}

#contact h2 {
    text-align: center;
}

#contact_content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 2.75rem;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto 2rem;
    padding: 5rem;
    box-sizing: border-box;
}

#contact_content .contact_explain {
    grid-area: 1 / 1 / 2 / 3;
}

#contact_content .contact_infos {
    grid-area: 2 / 1 / 3 / 2;
    color: var(--color_noir);
    font-style: normal;
    font-weight: 400;
}

#contact_content .contact_infos iframe {
    width: 100%;
    height: 45vh;
}

#contact_content .contact_infos a,
#contact_content .contact_infos p,
#contact_content .contact_infos address {
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-size: inherit;
    text-decoration: none;
    color: inherit;
    margin: 0;
}

#contact_content .contact_infos_detail {
    display: flex;
    align-items: center;
}

#contact_content .contact_infos_detail+.contact_infos_detail {
    margin-top: 0.5rem;
}

#contact_content .contact_infos_detail img {
    display: block;
    margin-right: 10px;
}

#contact_content .contact_infos .contact_infos_detail:hover a {
    color: var(--color_bleu_clair);
}

#contact_content .contact_infos_detail .styledparagraph {
    margin: 0;
    line-height: 1;
}

#contact_content .contact_form {
    grid-area: 2 / 2 / 3 / 3;
}

#contact_content .contact_form form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#contact_content .contact_form .form-block {
    display: flex;
    flex-direction: column;
}

#contact_content .contact_form .form-block input,
#contact_content .contact_form .form-block textarea {
    width: 100%;
    box-sizing: border-box;
    appearance: none;
    resize: none;
    border-radius: 7px;
    font-family: var(--font_text);
    font-size: 1rem;
    padding: 5px 10px;
    border: 1.5px solid var(--color_noir);
}

#contact_content .contact_form .form-block input:focus-visible,
#contact_content .contact_form .form-block textarea:focus-visible {
    outline-style: none;
    border-color: var(--color_bleu_fonce);
}

#contact_content .contact_form .form-block label {
    letter-spacing: 0.5px;
    font-weight: 400;
    font-family: var(--font_text);
    font-size: 0.875rem;
    padding-bottom: 5px;
    color: var(--color_noir);
}

#contact_content .contact_form .form-submit {
    margin: 0 auto;
}

#contact_content .contact_form .form-submit .button {
    margin-top: 1rem;
    appearance: none;
    background-color: var(--color_bleu_fonce);
    border-radius: 5px;
    padding: 16px 34px;
    border: none;
    color: var(--color_blanc);
    cursor: pointer;
    font-family: var(--font_text);
    font-size: 0.875rem;
}

#contact_content .contact_form .form-submit .button:hover {
    background-color: var(--color_bleu_clair);
}

section.bulles .bulle {
    min-height: 400px;
    display: flex;
    align-items: center;
    border-radius: 400px;
    border: 1px solid var(--color_noir);
    justify-content: space-between;
}

section.bulles .bulle+.bulle {
    margin-top: 70px;
}

section.bulles .swiper {
    margin-top: 3rem;
}

section.bulles .swiper .bulle {
    max-width: 980px;
    width: 100%;
}

section.bulles .swiper .bulle+.bulle {
    margin-top: unset;
}

section.bulles .bulle p {
    padding: 1rem 3rem;
}

section.bulles .bulle img {
    outline: 25px solid var(--color_blanc);
    border: 1px solid var(--color_noir);
    border-radius: 350px;
}

@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {

        /* Les règles CSS ici s'appliquent uniquement à Safari */
        section.bulles .bulle img {
            outline: none;
            box-shadow: 0px 0px 0 25px white;
        }
    }
}

section.bulles .bulle:nth-of-type(1n) {
    background-color: #9BA0FA;
}

section.bulles .bulle:nth-of-type(2n) {
    background-color: #B6CCB1;
}

section+section {
    margin-top: var(--margin_section);
}

.subtitle {
    font-family: var(--font_title);
    font-style: normal;
    font-weight: 700;
    font-size: 1.2rem;
}

.subtitle-blob {
    max-width: 550px;
    margin: 1rem auto;
    text-align: center;
    padding: 0 0.75rem;
}

.title-blob {
    height: 280px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.title-blob img.blob {
    width: 244px;
    height: 280px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    position: absolute;
}

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

section.beige {
    background-color: var(--color_beige);
    margin: var(--margin_section) calc(-1 * var(--padding_LR));
    padding: calc(var(--margin_section) / 2) var(--padding_LR);
}

section.full {
    margin: var(--margin_section) calc(-1 * var(--padding_LR)) 0;
}

section.fulla,
.section-full {
    margin: var(--margin_section) calc(-1 * var(--padding_LR)) calc(-1 * var(--margin_section));
}

section.beige .beige_content {
    display: flex;
    gap: 36px;
    align-items: center;
    margin: 3rem 0;
    justify-content: center;
}

section.beige .beige_img {
    position: relative;
}

section.beige .beige_img img {
    border-radius: 250px;
    border: 3px solid var(--color_vert_pomme);
    position: absolute;
}

section#intervenantes .intervenantes_list .intervenantes_img {
    height: 485px;
    width: 400px;
    margin: 0 auto;
    flex-shrink: 0;
}

section#intervenantes .intervenantes_list .intervenantes_img img {
    transition: transform 0.4s ease-out;
}

section#intervenantes .intervenantes_list .intervenantes_img img:nth-child(1) {
    top: 0;
    left: 0;
    z-index: 2;
}

section#intervenantes .intervenantes_list .intervenantes_img img:nth-child(2) {
    bottom: 50%;
    right: 0;
    transform: translateY(50%);
}

section#intervenantes .intervenantes_list .intervenantes_img img:nth-child(3) {
    bottom: 0;
    left: 0;
}

section#intervenantes .intervenantes_list .intervenantes_text p {
    cursor: pointer;
}

section.beige .beige_text {
    display: flex;
    flex-direction: column;
}

section#objectifs .objectifs_text {
    max-width: 580px;
}

section#amimotdecompagnie .beige_img {
    flex-shrink: 0;
}

section#objectifs .objectifs_img,
section#amimotdecompagnie .objectifs_img {
    max-width: 490px;
    height: 465px;
    width: 100%;
}

section#objectifs .objectifs_img img:nth-child(1),
section#amimotdecompagnie .objectifs_img img:nth-child(1) {
    width: 225px;
    height: 225px;
    top: 0;
    left: 0;
    z-index: 2;
}

section#objectifs .objectifs_img img:nth-child(2),
section#amimotdecompagnie .objectifs_img img:nth-child(2) {
    right: 11%;
    top: 7%;
    z-index: 1;
}

section#objectifs .objectifs_img img:nth-child(3),
section#amimotdecompagnie .objectifs_img img:nth-child(3) {
    bottom: 5%;
}

section#objectifs .objectifs_img img:nth-child(4),
section#amimotdecompagnie .objectifs_img img:nth-child(4) {
    bottom: 0;
    right: 0;
    width: 240px;
    height: 240px;
}

section#animaux .animaux-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    column-gap: 60px;
    row-gap: 30px;
    margin-top: 3rem;
}

.carousselAnimaux {
    width: 240px;
    height: 320px;
}

.carousselAnimaux .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
}

.carousselAnimaux .swiper-slide span {
    position: absolute;
    z-index: 2;
    bottom: 0;
    background-color: rgb(17, 17, 17, 0.55);
    width: 100%;
    text-align: center;
    padding: 0.25rem;
}

.carousselAnimaux .swiper-slide img {
    width: 100%;
    height: 100%;
    position: absolute;
}

.carousselAnimaux .swiper-slide:nth-child(3n - 2) {
    border: 10px solid var(--color_vert_pomme);
}

.carousselAnimaux .swiper-slide:nth-child(3n - 1) {
    border: 10px solid var(--color_bleu_fonce);
}

.carousselAnimaux .swiper-slide:nth-child(3n) {
    border: 10px solid var(--color_bleu_clair);
}

section.beige .beige_text p {
    background-color: var(--color_blanc);
    padding: 25px;
    border-radius: 10px;
}

.circles {
    margin: var(--margin_section) auto;
    position: relative;
    max-width: 750px;
    height: 450px;
}

.circles .circle {
    width: 250px;
    height: 150px;
    padding: 2vh 3.7vw;
    border-radius: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--color_blanc);
    font-size: 1.25rem;
    margin: 0;
}

.circles .circle:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
}

.circles .circle:nth-child(2) {
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
    width: 275px;
    height: 165px;
}

.circles .circle:nth-child(3) {
    position: absolute;
    top: 6%;
    right: 6%;
    height: 125px;
    width: 215px;
}

.circles .circle:nth-child(4) {
    position: absolute;
    top: 47%;
    left: 3%;
    transform: translateY(-50%);
}

.circles .circle:nth-child(5) {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.circles .circle:nth-child(6) {
    position: absolute;
    top: 48%;
    right: 4%;
    transform: translateY(-50%);
}

.circles .circle:nth-child(7) {
    position: absolute;
    bottom: 11%;
    right: 12%;
    height: 125px;
    width: 210px;
    z-index: 3;
}

.circles .circle:nth-child(1),
.circles .circle:nth-child(3),
.circles .circle:nth-child(5) {
    background-color: var(--color_bleu_clair);
}

.circles .circle:nth-child(4),
.circles .circle:nth-child(6) {
    background-color: var(--color_vert_clair);
}

.circles .circle:nth-child(2),
.circles .circle:nth-child(7) {
    color: var(--color_vert_clair);
    border: 2px solid var(--color_vert_clair);
}

@media all and (max-width: 1400px) {
    #contact_content {
        padding: 3rem 0;
    }
}

@media all and (max-width: 1180px) {

    header #header-bottom .right .submenu li:nth-child(1) a {
        font-size: 1.25rem;
    }

    header #header-bottom .right .submenu li:nth-child(2) a {
        font-size: 1.15rem;
    }

    header #header-bottom .right .submenu li:nth-child(3) a {
        font-size: 1rem;
    }

}

@media all and (max-width: 1080px) {

    header #header-bottom .right .submenu li:nth-child(1) a {
        font-size: 1.15rem;
    }

    header #header-bottom .right .submenu li:nth-child(2) a {
        font-size: 1rem;
    }

    header #header-bottom .right .submenu li:nth-child(3) a {
        font-size: 0.95rem;
    }

    section.bulles .bulle img {
        width: 300px;
        height: 300px;
    }

    section.bulles .bulle.border-left {
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
    }

    section.bulles .bulle.border-right {
        border-top-right-radius: 50px;
        border-bottom-right-radius: 50px;
    }

    section.bulles .bulle.border-left p {
        padding-left: 1.25rem;
    }

    section.bulles .bulle.border-right p {
        padding-right: 1.25rem;
    }

    section.beige .beige_content {
        flex-direction: column;
    }

    footer#layout-footer a.logo {
        display: none;
    }

    footer#layout-footer {
        grid-template-columns: 1fr 0.85fr;
    }
}

@media all and (max-width:925px) {
    :root {
        --padding_LR: 5vw;
    }

    header #header-top {
        justify-content: space-between;
        padding: 0 5vw;
    }

    header#layout-header>#header-top .logo {
        display: block;
    }

    header#layout-header>#header-top>#burger-menu {
        display: block;
        justify-self: flex-end;
        width: 2.25rem;
        height: 1.5rem;
        cursor: pointer;
        position: relative;
        appearance: none;
        border: none;
        background: none;
        box-sizing: border-box;
        padding: 0;
        flex-shrink: 0;
    }

    header#layout-header>#header-top>#burger-menu span {
        width: 100%;
        height: 4px;
        background-color: var(--color_noir);
        display: block;
        transition: background-color 0.5s ease-in-out;
        border-radius: 30px;
    }

    header#layout-header>#header-top>#burger-menu span:nth-child(1) {
        transform: translateY(-10px);
    }

    header#layout-header>#header-top>#burger-menu span:nth-child(3) {
        transform: translateY(10px);
    }

    header#layout-header>#header-top>nav>ul>li.nav-item>a.nav-link {
        width: 100%;
        display: block;
        text-align: center;
    }

    header#layout-header>#header-top>#burger-menu.active~nav {
        position: absolute;
        display: flex;
        top: var(--navbar_height);
        flex-direction: column;
        width: 100%;
        background-color: var(--color_blanc);
        left: 0;
        padding: var(--padding_LR);
        box-sizing: border-box;
        height: calc(100vh - var(--navbar_height));
        z-index: 9999999999;
    }

    header#layout-header>#header-top>nav>ul>li.nav-item>a.nav-link {
        font-size: 1.25rem;
    }

    header#layout-header>#header-top>#burger-menu.active~nav>ul {
        height: 100%;
        flex-direction: column;
        justify-content: center;
    }

    header #header-bottom .right .submenu li a::before {
        background-image: url(/themes/jvflex/assets/images/identity-mobile.png);
    }

    header #navbar ul {
        gap: 2.5rem;
    }

    #navbar {
        display: none;
    }

    footer#layout-footer,
    footer#layout-footer .footer-socials {
        display: grid;
        grid-template-columns: 1fr;
    }

    footer#layout-footer {
        row-gap: 1.25rem;
    }

    footer#layout-footer .footer-infos:nth-child(1) {
        order: 1;
    }

    footer#layout-footer .footer-infos:nth-child(2) {
        order: 3;
    }

    footer#layout-footer .footer-infos:nth-child(3) {
        order: 2;
    }

    footer#layout-footer a.logo {
        display: block;
        order: 1;
    }

    footer#layout-footer .footer-socials {
        order: 2;
    }

    footer#layout-footer .footer-legals {
        order: 3;
    }
}

@media all and (max-width:765px) {
    :root {
        --margin_section: 100px;
    }

    h1 {
        font-size: 2.95rem;
    }

    h2 {
        font-size: 2.7rem;
        padding-bottom: 0.5rem;
    }

    header {
        background-image: url('/themes/jvflex/assets/images/header-765.webp');
    }

    header #header-bottom .right .submenu li a {
        font-size: 0.95rem !important;
    }

    #contact_content {
        display: flex;
        flex-direction: column;
        padding: 1rem 0 0;
    }

    section.bulles .bulle img {
        width: 250px;
        height: 250px;
    }

    section.bulles .bulle.border-left {
        flex-direction: column-reverse;
    }

    section.bulles .bulle.border-right {
        flex-direction: column;
    }

    section.bulles .bulle.border-left,
    section.bulles .bulle.border-right {
        border-top-left-radius: 400px;
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
        border-top-right-radius: 400px;
    }

    section.bulles .bulle.border-left p,
    section.bulles .bulle.border-right p {
        padding: 1rem 2rem;
    }

    section#objectifs .objectifs_img,
    section#amimotdecompagnie .objectifs_img {
        max-width: 400px;
        height: 390px;
    }

    section#objectifs .objectifs_img img,
    section#amimotdecompagnie .objectifs_img img {
        width: 200px;
        height: 200px;
    }

    section#objectifs .objectifs_img img:nth-child(1),
    section#amimotdecompagnie .objectifs_img img:nth-child(1) {
        width: 185px;
        height: 185px;
    }

    section#objectifs .objectifs_img img:nth-child(4),
    section#amimotdecompagnie .objectifs_img img:nth-child(4) {
        width: 190px;
        height: 190px;
    }

    .circles {
        height: unset;
        width: unset;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
        align-items: center;
        justify-items: center;
        row-gap: 0.75rem;
    }

    .circles .circle:nth-child(1),
    .circles .circle:nth-child(2),
    .circles .circle:nth-child(3),
    .circles .circle:nth-child(4),
    .circles .circle:nth-child(5),
    .circles .circle:nth-child(6),
    .circles .circle:nth-child(7) {
        position: relative;
        top: unset;
        left: unset;
        right: unset;
        bottom: unset;
        transform: unset;
    }

    .circles .circle:nth-child(3n -1) {
        color: var(--color_vert_clair);
        border: 2px solid var(--color_vert_clair);
        background-color: unset;
    }

    .circles .circle:nth-child(3n -2) {
        background-color: var(--color_bleu_clair);
        border: none;
        color: var(--color_blanc);
    }

    .circles .circle:nth-child(3n) {
        background-color: var(--color_vert_clair);
        border: none;
        color: var(--color_blanc);
    }

    .fermette-full {
        height: 25vh;
    }
}

@media all and (max-width:580px) {

    section.bulles .bulle.border-left p,
    section.bulles .bulle.border-right p {
        padding: 1rem 1.5rem;
    }
}

@media all and (max-width:450px) {
    header #header-bottom .right .submenu li a {
        font-size: 0.85rem !important;
    }

    section#intervenantes .intervenantes_list .intervenantes_img {
        height: 400px;
        width: 325px;
    }

    section#intervenantes .intervenantes_list .intervenantes_img img {
        width: 200px;
        height: 200px;
    }
}

@media all and (max-width:395px) {
    h1 {
        font-size: 2.20rem;
    }

    h2 {
        font-size: 2rem;
        padding-bottom: 0.5rem;
    }

    header#layout-header>#header-top>#burger-menu.active~nav>ul {
        justify-content: flex-start;
        gap: 1.75rem;
    }

    header #header-bottom .right .submenu {
        column-gap: 2px;
        margin: 0;
    }

    header #header-bottom .right .submenu li a {
        font-size: 0.825rem !important;
    }

    section#intervenantes .intervenantes_list .intervenantes_img {
        height: 360px;
        width: 280px;
    }

    section#intervenantes .intervenantes_list .intervenantes_img img {
        width: 180px;
        height: 180px;
    }

    section#objectifs .objectifs_img,
    section#amimotdecompagnie .objectifs_img {
        max-width: 340px;
        height: 345px;
    }

    section#objectifs .objectifs_img img,
    section#amimotdecompagnie .objectifs_img img {
        width: 180px;
        height: 180px;
    }

    section#objectifs .objectifs_img img:nth-child(1),
    section#amimotdecompagnie .objectifs_img img:nth-child(1) {
        width: 165px;
        height: 165px;
    }

    section#objectifs .objectifs_img img:nth-child(4),
    section#amimotdecompagnie .objectifs_img img:nth-child(4) {
        width: 170px;
        height: 170px;
    }

    footer#layout-footer .footer-legals {
        flex-direction: column;
    }

    footer#layout-footer .footer-legals p,
    footer#layout-footer .footer-legals p:last-child {
        padding: 0.5rem;

    }

    footer#layout-footer .footer-legals p+p {
        border: none;
    }
}

@media only screen and (max-device-width: 798px) and (min-device-height:450px) {
    header #header-bottom {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0;
    }

    header #header-bottom .right .logo {
        display: none;
    }
}