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

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

@font-face {
  font-family: 'Sherika';
  src: url('./fonts/Sherika-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* v3 refonte */
.accessible {
    background-color: #23652E;
    border-radius: 30px;
    margin: 2rem 1rem 1rem;
    padding: 2rem 1rem;
    color: white;
}

.accessible img {
    width: 75%;
    display: block;
    margin: auto;
}

.accessible h2 {
    font-family: 'Sherika';
    text-align: left;
    font-size: 25px;
    margin-bottom: 2rem;
    margin-top: 1.5rem;
}

.accessible p {
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    margin-top: 0px;
}

.padding-21 {
    padding: 1rem 2rem 0.2rem 2rem;
}

.mt-10 {
    margin-top: 35px!important;
}

.mb-10 {
    margin-bottom: 30px!important;
}

.display-mobile-1265 {
    display: block;
}

.display-desk-1265 {
    display: none;
}

.programs ul {
    padding: 5px;
    margin-bottom: 0px;
}

.programs ul li, .programs .verte3 ul li {
    list-style: none;
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
    font-size: 14px;
}

.programs ul li:before, .programs .verte3 ul li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0rem;
    width: 1.2rem;
    height: 1.2rem;
    background-color: var(--greenHippo);
    mask: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTguMyAxMi43MyA3LjcgNy43IDcuNy03LjciIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2U9IiMwMDAiIGZpbGw9Im5vbmUiPjwvcGF0aD48Y2lyY2xlIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2U9IiMwMDAiIGZpbGw9Im5vbmUiIHI9IjE0Ljk5IiBjeT0iMTYiIGN4PSIxNiI+PC9jaXJjbGU+PC9zdmc+");
    -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTguMyAxMi43MyA3LjcgNy43IDcuNy03LjciIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2U9IiMwMDAiIGZpbGw9Im5vbmUiPjwvcGF0aD48Y2lyY2xlIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2U9IiMwMDAiIGZpbGw9Im5vbmUiIHI9IjE0Ljk5IiBjeT0iMTYiIGN4PSIxNiI+PC9jaXJjbGU+PC9zdmc+");
}

.programs .verte3 ul li:before {
    background-color: var(--white);
}

.obtenir-brochure-btn {
    width: fit-content;
    display: block;
    margin: auto;
    color: var(--white);
    background: var(--greenHippo);
    border-radius: 27px;
    font-family: 'Inter';
    font-weight: 400;
    transition: .2s ease-in-out;
    text-decoration: none;
    padding: 13px 24px;
    font-size: 11pt;
}

.obtenir-brochure-btn:hover {
    border-radius: 30px;
}

.slider-reassurance-section {
    width: 90%;
    margin: auto;
}

.slider-container-hippo {
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    margin-top: 2rem;
}

.four-blocs-reassurance {
    display: flex;
    transition: transform 0.3s ease-in-out;
}

.slide-item {
    min-width: 100%;
    flex: 0 0 100%;
    box-sizing: border-box;
    background: #acd6ca;
    padding: 2rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 12px;
}

.slide-item img {
    width: 40px;
    margin-bottom: 1rem;
}

.slide-item .bigger-logo {
    width: 30px;
}

.slide-item p {
    color: var(--greenHippo);
    font-family: 'inter', sans-serif;
    font-size: 1rem;
    margin: 0;
}

.align-reassurance-p {
    padding-top: 17px;
}

.slider-reassurance-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 1rem;
}

.slider-reassurance-dots .point {
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}

.slider-reassurance-dots .point.active {
    background: var(--greenHippo);
}

.swiper-wrapper {
    height: max-content;
}

.timeline {
    max-width: 900px;
    margin: auto;
    border-radius: 20px;
    padding: 1rem;
    margin-top: 2rem;
    font-family: 'Inter', sans-serif;
}

.timeline li {
    text-decoration: none;
    font-size: 0.8rem;
}

.ax__heading-container {
    margin-bottom: .5rem;
}

.ax__heading {
    font-family: "Inter", sans-serif;
    font-size: 25px;
    color: rgb(35, 101, 46);
    text-align: center;
    margin: 0 0 0.5rem;
}

.ax__subheading {
    font-weight: 600;
    font-size: 1rem;
    color: rgb(35, 101, 46);
    text-align: center;
    margin-bottom: 1rem;
    margin-top: 1.2rem;
}

.rte p {
    font-weight: 400;
    font-size: 1.07rem;
    max-width: 835px;
    margin: 0 auto;
    text-align: center;
    padding: 1px 7px;
    line-height: 1.5;
    color: rgb(35, 101, 46);
}

.swiper-slide {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: column;
    margin-top: 1rem;
}

.timeline__image-wrapper {
    margin-top: 1rem;
    flex: 0 0 45%;
    max-width: 85%;
    border-radius: 20px;
    margin: auto;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.timeline__image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
}

.timeline__slide {
    min-height: 200px;
    height: fit-content;
    box-sizing: border-box;
}

.prose {
    margin: auto;
    max-width: 80%;
    color: var(--greenHippo);
    margin-top: 20px;
}

.prose p {
    font-size: 0.7rem;
}

.prose h3 {
    font-weight: 600;
    font-size: 17px;
    margin-top: 0;
    margin-bottom: 1rem;
    color: #d68c76;
    text-align: center;
}

.prose ul {
    list-style-type: disc;
    padding-left: 1.4rem;
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.6;
}

.prose p em {
    font-style: italic;
    color: var(--greenHippo);
    font-weight: 500;
}

.prose p strong {
    font-weight: 700;
    color: var(--greenHippo);
}

.swiper-pagination {
    position: relative!important;
    max-width: 700px;
    margin: 0.5rem auto 0;
    display: flex;
    justify-content: space-between;
    user-select: none;
    padding: 0 10px;
}

.swiper-pagination::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 10px;
    right: 10px;
    height: 3px;
    background-color: #ddd;
    border-radius: 2px;
    z-index: 0;
}

.pagination-item {
    position: relative;
    z-index: 1;
    text-align: center;
    cursor: pointer;
    flex: 1;
}

.bullet {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background-color: #5e5e5e;
    border: 2px solid #5e5e5e;
    margin: 0 auto 8px;
    transition: all 0.3s ease;
}

.pagination-item.active .bullet {
    background-color: #d68c76;
    border-color: #d68c76;
}

.pagination-item span {
    font-weight: 600;
    font-size: 0.7rem;
    color: #5e5e5e;
    transition: color 0.3s ease;
}

.pagination-item.active span {
    color: #d68c76;
}

.pagination-item:hover span {
    color: #d68c76;
}

.swiper-button-prev,
.swiper-button-next {
    color: var(--white)!important;
    width: 32px!important;
    height: 32px!important;
    border: 2px solid var(--greenHippo);
    border-radius: 50%;
    background: var(--greenHippo);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    top: 50%;
    transform: translateY(-50%);
}

.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
    background: var(--white);
    color: var(--greenHippo)!important;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 10px!important;
    font-weight: 700;
}

.programs {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}

.program {
    display: flex;
    flex-direction: column;
    font-family: 'Inter', sans-serif;
    color: var(--greenHippo);
}

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

.program .svg-programme {
    width: 30%;
}

.verte,
.verte3 {
    background-color: var(--greenLightHippo);
    padding: 5px 15px;
    border-radius: 1.2rem;
}

.verte3,
.verte3 strong {
    background-color: var(--greenHippo);
    color: var(--white);
}

.btnblanc {
    width: fit-content;
    padding: 8px 15px;
    background-color: var(--white);
    text-align: center;
    border-radius: 40px;
    margin-left: 15px;
    margin-top: 15px;
}

.btnblanc p {
    margin: 0px!important;
    color: var(--greenHippo);
    font-weight: bold;
}

.program-content {
    border: .1rem solid var(--greenHippo);
    background-color: transparent;
    border-radius: 1.2rem;
    padding: 15px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    color: var(--greenHippo);
}

.program-content h3 {
    margin: 0 0 10px;
    font-size: 1.5rem;
    font-family: 'Inter', sans-serif;
    color: var(--greenHippo);
}

.program-content p {
    margin: 0 0 15px;
    color: var(--greenHippo);
    flex: 1;
}

.program-content .btn {
    align-self: start;
    padding: 10px 20px;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
}

.program-label {
    display: inline-block;
    width: fit-content;
    position: relative;
    top: -25px;
    font-size: 0.8rem;
    color: var(--white);
    border-radius: 10px;
    padding: 10px;
    background-color: #d68c76;
    font-family: 'inter';
}

.flex-horizontal {
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

.flex-horizontal h4 {
    margin: 0;
    font-size: 11pt;
    text-align: center;
}

.flex-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.programs .svg-plus,
.outils-pedagogiques .svg-plus,
.outils-pedagogiques .svg-egal {
    display: block;
    margin: auto;
    width: 25px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    fill: var(--greenBlueHippo);
}

.outils-pedagogiques .svg-plus {
    margin: 0px;
}

.formation-parcours {
    width: 100%;
    margin-top: 3rem;
}

.formation-container {
    max-width: 1100px;
    margin: 0 auto;
    background: white;
    border-radius: 20px;
    padding: 0rem 1rem;
    box-sizing: border-box;
}

.formation-container h2 {
    text-align: center;
    font-size: 25px;
    margin-bottom: 0.5rem;
    margin-top: 0.3rem;
    color: #23652E;
}

.formation-subtitle {
    width: fit-content;
    margin: auto;
    background-color: var(--greenHippo);
    color: #d2e4b1;
    padding: 0.5rem 0.85rem;
    border-radius: 9999px;
    text-align: center;
    font-family: 'inter', sans-serif;
    font-weight: 600;
    font-size: 11pt;
    position: relative;
    top: -20px;
}

.chapitres-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.chapitre {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.flex-label-dots {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.chapitre-num {
    width: fit-content;
    background-color: #d6edc6;
    color: #1b4e27;
    padding: 0.4rem 1rem;
    border-radius: 8px;
    font-weight: bold;
    font-family: 'inter';
    display: inline-block;
    font-size: 12pt;
}

.dots {
    color: var(--greenHippo);
    font-weight: bold;
    letter-spacing: 1px;
}

.chapitre h3 {
    color: #23652e;
    font-size: 1.7rem;
    margin: 0.5rem 0 0;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
}

.chapitre p {
    color: var(--greenHippo);
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    font-weight: 200;
    font-family: 'inter', sans-serif;
}

.outils-pedagogiques {
    background: #fff;
    padding: 2rem 1rem;
    font-family: 'Inter', sans-serif;
}

.outils-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.outils-container h2 {
    text-align: center;
    font-size: 25px;
    margin-bottom: 0.5rem;
    margin-top: 0.3rem;
    color: #23652E;
}

.outils-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 1rem;
}

.outil {
    background: #fff6e8;
    border-radius: 20px;
    padding: 1.5rem;
    flex: 1 1 240px;
    max-width: 280px;
    text-align: left;
}

.outil .icon {
    font-size: 2rem;
    margin-bottom: 0.8rem;
}

.outil h3 {
    font-size: 1.2rem;
    color: #23652E;
    margin-bottom: 0.5rem;
}

.outil h3 strong {
    font-size: 1.7rem;
}

.outil p {
    font-size: 0.95rem;
    color: #23652E;
}

.separator {
    font-size: 1.5rem;
    color: #23652E;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
}

.outils-egal {
    font-size: 1.5rem;
    margin: 0rem 0 1rem;
    color: #23652E;
}

.outils-slogan {
    background-color: #bfe2ce;
    color: #23652E;
    font-weight: bold;
    padding: 1rem 2rem;
    border-radius: 20px;
    margin-bottom: 2rem;
    display: inline-block;
}

.outils-btn {
    background-color: #23652E;
    color: white;
    padding: 0.8rem 1.5rem;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    transition: background 0.3s;
}

.outils-btn:hover {
    background-color: #145b1f;
}

.outils-pedagogiques svg {
    width: 16%;
}

.slider-section {
    padding: 2rem 1rem;
    font-family: 'Inter', sans-serif;
}

.slider-title-h2 {
    text-align: center;
    font-size: 25px;
    margin-bottom: 2rem;
    margin-top: 0.3rem;
    color: #23652E;
}

.slider-container {
    position: relative;
    overflow: hidden;
    max-width: 1200px;
    margin: 0 auto;
}

.slider-track {
    display: flex;
    transition: transform 0.5s ease;
}

.slide {
    min-width: 100%;
    background-size: cover;
    background-position: center;
    color: white;
    padding: 45px 25px 25px;
    box-sizing: border-box;
    position: relative;
    color: var(--greenHippo);
    border-radius: 30px;
}

.slide-inside {
    background-color: #fff7eb;
    border-radius: 20px;
}

.slide-number {
    display: inline-block;
    background-color: #abd6c9;
    color: var(--greenHippo);
    padding: 8px 16px;
    border-radius: 50%;
    font-size: 1.2rem;
    position: relative;
    top: -15px;
    left: 15px;
}

.slide-title {
    font-size: 1.2rem;
    margin: 0px 10px 0px 15px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    box-shadow: none;
}

.slide-description {
    font-size: 10pt;
    line-height: 1.4;
    padding: 0px 15px 15px;
    font-weight: 600;
}

.slider-dots {
    text-align: center;
    margin-top: 20px;
}

.dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 6px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
}

.dot.active {
    background-color: var(--greenHippo);
}

.bilan-orientation {
    background: #fef7ef;
    padding: 2rem 1rem;
}

.bilan-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 3rem;
    align-items: center;
    flex-wrap: wrap;
}

.bilan-image {
    flex: 1 1 350px;
    display: flex;
    justify-content: center;
}

.bilan-image img {
    width: 100%;
    max-width: 350px;
    border-radius: 50%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

.bilan-texte {
    flex: 1 1 400px;
    color: rgb(35, 101, 46);
    font-family: 'Inter';
    padding: 0rem 1rem;
}

.bilan-texte h2 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 2rem;
    margin-top: 0.3rem;
    color: #23652E;
}

.bilan-texte p {
    margin-bottom: 1rem;
    font-size: 1rem;
    color: rgb(35, 101, 46);
}

.bilan-texte ul {
    padding-left: .2rem;
    margin-bottom: 1.5rem;
}

.bilan-texte li {
    position: relative;
    padding-left: 1.7rem;
    margin-bottom: 1rem;
    font-size: 14px;
    list-style: none;
}

.bilan-texte li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1rem;
    height: 1rem;
    background-color: var(--greenHippo);
    mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI4LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgNDAgNDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwIDQwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0ZGRjdFQjt9Cjwvc3R5bGU+CjxnIGlkPSJoaXBwb2NyYXR1c194NUZfZW1ibGVtZV94NUZfZWNydV8wMDAwMDAzMTkxMTIwNjk3ODU4ODczMTYwMDAwMDAxMjI2MjU5NDI4NzAwMzMzODkxM18iPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTI2LjYsMS4xQzI2LjQsMSwyNi4yLDEsMjYsMC45QzI0LjEsMC4zLDIyLjEsMCwyMCwwQzksMCwwLDksMCwyMGMwLDMsMC43LDUuOSwxLjksOC41YzEsMi4yLDIuNCw0LjIsNC4yLDUuOAoJCUM5LjcsMzcuOCwxNC42LDQwLDIwLDQwYzExLDAsMjAtOSwyMC0yMEM0MCwxMS4zLDM0LjQsMy44LDI2LjYsMS4xTDI2LjYsMS4xeiBNMjUuOSwxOS45Yy0wLjEsMC0wLjEsMC4xLTAuMSwwLjEKCQljLTMuMyw1LjUtOS40LDkuMy0xNi4yLDkuNmMtMS4zLTEuNS0yLjQtMy4xLTIuNi01LjFjLTAuMS0xLjYsMC4zLTMuMiwxLjMtNC41YzEuNS0yLDQuMS0yLjgsNi40LTMuN2M0LjYtMS42LDEwLTMuNiwxMy4xLTcuNQoJCWMwLjEtMC4xLDAuMi0wLjIsMC4zLTAuMmMwLjEsMCwwLjIsMCwwLjIsMC4xYzMuNywyLjcsNiw3LjIsNS43LDEyLjJjLTAuNCw3LjMtNi41LDEzLjItMTMuOCwxMy40Yy0yLjYsMC4xLTUtMC42LTcuMS0xLjcKCQlDMTksMzAuMiwyMy41LDI1LjYsMjYsMjBDMjYuMSwxOS45LDI2LDE5LjksMjUuOSwxOS45TDI1LjksMTkuOXoiLz4KPC9nPgo8L3N2Zz4K");
    -webkit-mask: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI4LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgNDAgNDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwIDQwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0ZGRjdFQjt9Cjwvc3R5bGU+CjxnIGlkPSJoaXBwb2NyYXR1c194NUZfZW1ibGVtZV94NUZfZWNydV8wMDAwMDAzMTkxMTIwNjk3ODU4ODczMTYwMDAwMDAxMjI2MjU5NDI4NzAwMzMzODkxM18iPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTI2LjYsMS4xQzI2LjQsMSwyNi4yLDEsMjYsMC55QzI0LjEsMC4zLDIyLjEsMCwyMCwwQzksMCwwLDksMCwyMGMwLDMsMC43LDUuOSwxLjksOC41YzEsMi4yLDIuNCw0LjIsNC4yLDUuOAoJCUM5LjcsMzcuOCwxNC42LDQwLDIwLDQwYzExLDAsMjAtOSwyMC0yMEM0MCwxMS4zLDM0LjQsMy44LDI2LjYsMS4xTDI2LjYsMS4xeiBNMjUuOSwxOS45Yy0wLjEsMC0wLjEsMC4xLTAuMSwwLjEKCQljLTMuMyw1LjUtOS40LDkuMy0xNi4yLDkuNmMtMS4zLTEuNS0yLjQtMy4xLTIuNi01LjFjLTAuMS0xLjYsMC4zLTMuMiwxLjMtNC41YzEuNS0yLDQuMS0yLjgsNi40LTMuN2M0LjYtMS42LDEwLTMuNiwxMy4xLTcuNQoJCWMwLjEtMC4xLDAuMi0wLjIsMC4zLTAuMmMwLjEsMCwwLjIsMCwwLjIsMC4xYzMuNywyLjcsNiw3LjIsNS43LDEyLjJjLTAuNCw3LjMtNi41LDEzLjItMTMuOCwxMy40Yy0yLjYsMC4xLTUtMC42LTcuMS0xLjcKCQlDMTksMzAuMiwyMy41LDI1LjYsMjYsMjBDMjYuMSwxOS45LDI2LDE5LjksMjUuOSwxOS45TDI1LjksMTkuOXoiLz4KPC9nPgo8L3N2Zz4K");
}

.bilan-btn {
    background-color: var(--greenHippo);
    color: white;
    padding: 0.8rem 1.5rem;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    transition: background 0.3s;
}

.bilan-btn:hover {
    background-color: #145b1f;
}

.funding-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
    color: white;
    font-family: "Inter", sans-serif;
}

.bg-funding-section {
    background-color: var(--greenHippo);
    border-radius: 30px;
}

.funding-section h2 {
    text-align: center;
    font-size: 27px;
    margin-bottom: 0.5rem;
    margin-top: 0.3rem;
    color: white;
    padding: 1.3rem 0.2rem;
}

.funding-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.funding-left,
.funding-right {
    flex: 1;
}

.offer-block {
    border-radius: 12px;
    padding: 0px 24px;
    margin-bottom: 30px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.offer-block h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    margin-top: 0px;
}

.offer-block .intro {
    font-weight: 500;
    margin-bottom: 12px;
}

.offer-block .price {
    display: inline-block;
    width: 80%;
    padding: 10px 20px;
    margin-bottom: 12px;
    font-weight: bold;
    border-radius: 30px;
    font-size: 2rem;
    text-align: center;
}

.btn-un {
    background-color: #d2e4b1;
    color: #23652e;
}

.btn-deux {
    background-color: #acd6ca;
    color: #23652e;
}

.offer-block p {
    margin: 10px 0;
}

.offer-block img {
    margin-top: 10px;
    max-width: 100%;
    height: auto;
}

.mb-offre {
    margin-bottom: 0px;
}

.funding-warning {
    font-size: 0.9rem;
    padding: 1.1rem;
    margin-bottom: -45px;
    margin-top: -30px;
}

.bg-funding-right {
    background-color: #fff7eb;
    border-radius: 25px;
    margin: 15px;
    padding-bottom: 20px;
}

.funding-right h3 {
    font-size: 1.6rem;
    margin-bottom: 8px;
    color: #23652e;
    padding: 1.5rem 0rem 0rem;
    text-align: center;
}

.funding-right .sub-title {
    font-size: 1rem;
    color: #23652e;
    margin-bottom: 20px;
    padding: 0rem 1rem;
}

.logos {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    flex-direction: row;
    align-content: center;
    justify-content: center;
}

.logos img {
    width: 65px;
    height: auto;
    object-fit: contain;
}

.bilan-image-sophro {
    width: 85%;
    display: block;
    margin: auto;
}

.bilan-image-sophro img {
    width: 100%;
    border-radius: 35px;
}

.certificat-hippocratus {
    padding: 0rem 1rem;
}

.certificat-de-formation {
    padding: 0rem 1rem 1.5rem;
}

/* Fade-in animation pour éléments below-the-fold uniquement */
.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Fix CLS: Ne PAS cacher les éléments above-the-fold (logo et header-hippo) */
.logo-hippo.fade-in-on-scroll,
.logo-hippo-up.fade-in-on-scroll,
.header-hippo.fade-in-on-scroll {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.fade-in-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.avis_heading {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin: 15px 0px;
}

.avis_heading img {
    width: 10%;
}

.avis_heading svg {
    width: 11%;
}

.btn-with-reviews {
    background-color: #ffffff;
    align-items: center;
    border-radius: 2.75rem;
    color: #23652e;
    display: flex;
    display: inline-flex;
    flex-direction: row;
    font-family: 'inter', sans-serif;
    font-weight: 700;
    height: 3rem;
    justify-content: flex-start;
    max-width: 90%;
    padding: 0 0.2rem;
    width: auto;
}

.btn-with-reviews p {
    margin: 0;
    font-size: 10pt;
}

.btn-with-reviews em {
    font-size: 9pt;
    font-style: normal;
    font-weight: 200;
}

@media (max-width: 767px) {
    .funding-content {
        flex-direction: column;
    }

    .outils-cards {
        flex-direction: column;
        align-items: center;
    }
}

@media screen and (min-width: 375px) {
    .header-hippo .flex-avis img.etoile {
        width: 20%;
        height: 22px;
    }

    .qualiopi {
        width: 3.2rem;
        height: 1.4rem;
    }

    .logos img {
        width: 55px;
    }

    .logos {
        gap: 5px;
    }

    .slide-item {
        padding: 2rem 2.2rem;
    }

    .header-hippo h1,
    .ax__heading,
    .formation-container h2,
    .outils-container h2,
    .slider-title-h2,
    .bilan-texte h2,
    .funding-section h2 {
        font-size: 29px;
    }
}

@media screen and (min-width: 383px) {
    .flex-horizontal h4 {
        padding: 0px 20px;
    }

    .bigger {
        width: 37% !important;
    }
}

@media screen and (min-width: 425px) {
    .bigger {
        width: 31% !important;
    }

    .header-hippo .flex-avis img.etoile {
        height: 30px;
    }

    .qualiopi {
        width: 4rem;
        height: 1.8rem;
    }

    .logos img {
        width: 65px;
    }

    .logos {
        gap: 5px;
    }

    .prose p {
        font-size: 0.9rem;
    }

    .offer-block img {
        display: none;
        margin: auto;
    }

    .prose {
        max-width: 70%;
    }

    .timeline__image-wrapper {
        max-width: 75%;
    }

    .header-hippo h1,
    .ax__heading,
    .formation-container h2,
    .outils-container h2,
    .slider-title-h2,
    .bilan-texte h2,
    .funding-section h2 {
        font-size: 30px;
    }
}

@media screen and (min-width: 768px) {
    .accessible {
        background-color: #23652E;
        border-radius: 30px;
        margin: 2rem 2.5rem 1rem;
    }

    .accessible img {
        width: 40%;
    }

    .accessible p {
        font-family: 'Inter', sans-serif;
    }

    .program .svg-programme {
        width: 24%;
    }

    .bigger {
        width: 22% !important;
    }

    .flex-horizontal h4 {
        padding: 0px;
    }

    .program-content h3 {
        margin: 15px 0 20px;
        text-align: center;
        font-size: 1.7rem;
    }

    .ax__heading,
    .formation-container h2,
    .outils-container h2,
    .slider-title-h2,
    .bilan-texte h2,
    .funding-section h2 {
        font-size: 32px;
    }

    .slider-container-hippo {
        overflow: visible;
        max-width: none;
    }

    .four-blocs-reassurance {
        flex-wrap: nowrap;
        transform: none !important;
        justify-content: space-between;
    }

    .slide-item {
        flex: 0 0 23.5%;
        padding: 1rem 1rem;
        min-width: auto;
    }

    .slider-reassurance-dots {
        display: none;
    }

    .prose {
        margin-top: 0px;
        margin-bottom: 0px;
        padding: 0 50px 0px 0px;
    }

    .timeline__image-wrapper {
        max-width: 35%;
    }

    .swiper-wrapper {
        padding: 0px 0px 0px 20px;
    }

    .timeline__slid.swiper-slide.swiper-slide-visible {
        max-width: 300px;
    }

    .swiper-pagination {
        margin-top: 3rem;
    }

    .pagination-item span {
        font-size: 0.97rem;
    }

    .padding-21 {
        padding: 2rem 4rem 0.5rem 4rem;
    }

    .bullet {
        width: 22px;
        height: 22px;
    }

    .ax__subheading {
        margin-bottom: 1rem;
        margin-top: 0.1rem;
        font-size: 1.3rem;
    }

    .rte p {
        font-size: 1.3rem;
    }

    .swiper-button-prev::after,
    .swiper-button-next::after {
        font-size: 20px;
    }

    .swiper-button-prev,
    .swiper-button-next {
        width: 42px;
        height: 42px;
    }

    .swiper-slide {
        display: flex!important;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        height: auto;
    }

    .slider-track {
        transform: none !important;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }

    .slide {
        min-width: auto;
    }

    .slider-dots {
        display: none;
    }

    .programs {
        flex-direction: row;
    }

    .program-content {
        flex: none;
    }

    .program {
        width: 100%;
    }

    .obtenir-brochure-btn {
        margin-top: 20px !important;
    }

    .formation-subtitle {
        padding: 1rem 1.85rem;
        border-radius: 20px;
        top: -40px;
    }

    .formation-container {
        margin: 1rem;
        padding: 1rem;
    }

    .outils-cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        gap: 1rem;
        flex-direction: row;
    }

    .outils-slogan {
        margin-bottom: 0.2rem;
    }

    .separator {
        display: none;
    }

    .slide {
        padding: 36px 10px 23px;
    }

    .slider-track {
        gap: 14px;
    }

    .slide-title {
        font-size: 1rem;
        margin: 0px 0px 0px 14px;
    }

    .slide-description {
        font-size: 9pt;
    }

    .slide-desc-3 {
        padding: 0px 15px 31px;
    }

    .bilan-container {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.5rem;
    }

    .bilan-texte h2,
    .funding-section h2 {
        text-align: left;
    }

    .bg-funding-section {
        padding: 1rem;
    }

    .funding-warning {
        padding: 1.1rem;
        margin-bottom: 0px;
        margin-top: -20px;
    }

    .funding-left {
        display: flex;
        align-items: flex-start;
    }

    .offer-block.mb-offre {
        border-left: .2rem solid #fff;
        border-radius: 0px;
    }

    .funding-content {
        gap: 0px;
    }

    .logos {
        flex-wrap: nowrap;
        gap: 15px;
        flex-direction: row;
        align-content: center;
        justify-content: space-around;
        align-items: center;
    }

    .logos img {
        width: 105px;
    }

    .bilan-image-sophro {
        width: 35%;
    }

    .bilan-image {
        flex: 1 1 270px;
    }

    .bilan-text-left {
        flex: 1 1 440px;
    }

    .btn-with-reviews {
        max-width: 40%!important;
        justify-content: space-evenly!important;
    }

    .avis_heading {
        flex-wrap: nowrap!important;
    }
}

@media screen and (min-width: 1024px) {
    .accessible {
        display: flex;
        padding: 3rem;
        gap: 7px;
        flex-direction: row-reverse;
    }

    .accessible img {
        width: 90%;
    }

    .accessible h2 {
        font-size: 30px;
    }

    .flex-etoiles {
        max-width: 25%;
    }

    .flex-avis .etoile {
        width: 1.5rem;
    }

    .header-hippo .flex-avis img.etoile {
        height: 40px;
    }

    .qualiopi {
        width: 5rem;
        height: 2rem;
    }

    .fb {
        height: 2rem;
        width: 1.9rem;
    }

    .gg {
        height: 1.8rem;
        width: 1.8rem;
    }

    .note {
        font-size: 12pt;
    }

    .slide-item p {
        font-size: 11pt;
    }

    .timeline li {
        font-size: 1rem;
    }

    .program-label {
        font-size: 1rem;
    }

    .outil .icon {
        font-size: 0rem;
    }

    .slide-desc-3 {
        padding: 0px 15px 15px;
    }

    .funding-section h2 {
        padding: 0rem 28rem 0rem 1.5rem;
    }

    .funding-left {
        justify-content: space-evenly;
    }

    .funding-right .sub-title {
        text-align: center;
    }

    .bilan-container {
        margin-bottom: 45px;
    }

    .bilan-texte p {
        margin-bottom: 1.2rem;
    }

    .bilan-texte li {
        font-size: 15px;
    }

    .dots {
        letter-spacing: 1px;
    }

    .flex-avis .etoile.avis {
        width: 1.5rem!important;
    }
}

@media screen and (min-width: 1265px) {
    .rte p {
        font-size: 1.2rem;
    }

    .program-content h3 {
        margin: 20px 0 30px;
        font-size: 2rem;
    }

    .accessible p {
        font-size: 14pt;
    }

    .accessible {
        margin: 4rem 4.2rem 2rem 4.2rem;
        padding: 2.5rem 2rem 2rem 2rem;
    }

    .accessible h2 {
        font-size: 38px;
    }

    .avis_heading svg {
        width: 8%!important;
    }

    .avis_heading img {
        width: 7%!important;
    }

    .btn-with-reviews p {
        font-size: 13pt!important;
    }

    .btn-with-reviews em {
        font-size: 11pt!important;
    }

    .flex-contenu {
        flex-direction: row;
    }

    .qualiopi {
        width: 5.2rem;
    }

    .note {
        font-size: 14pt;
    }

    .funding-warning {
        margin-top: -60px;
    }

    .display-mobile-1265 {
        display: none;
    }

    .display-desk-1265 {
        display: block;
    }

    .formation-container {
        margin: auto;
        margin-bottom: 35px;
    }

    .formation-subtitle {
        font-size: 14pt;
    }

    .slider-section,
    .outils-slogan {
        padding: 2rem 2rem;
    }

    .slider-reassurance-section {
        width: 88%;
    }

    .timeline {
        max-width: 1065px;
    }

    .prose h3 {
        font-size: 20px;
    }

    .swiper-button-next,
    .swiper-button-prev {
        top: var(--swiper-navigation-top-offset, 91%)!important;
    }

    .obtenir-brochure-btn {
        font-size: 14pt;
    }

    .slider-container {
        max-width: 1185px;
    }

    .slider-track {
        gap: 35px;
    }

    .slide {
        padding: 52px 51px 23px;
    }

    .slide-title {
        font-size: 1.2rem;
    }

    .slide-description {
        font-size: 12pt;
    }

    .slide-number {
        font-size: 1.3rem;
        font-weight: 400;
    }

    .slide-desc-3 {
        padding: 0px 15px 35px;
    }

    .bilan-image {
        flex: 1 1 345px;
    }

    .funding-content {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: stretch;
    }

    .bg-funding-section {
        padding: 2rem;
    }

    .logos {
        flex-wrap: wrap;
        gap: 0;
    }

    .logos img {
        width: 55px;
    }

    .bilan-image-sophro {
        width: 42%;
    }

    .certificat-hippocratus h6 {
        font-size: 11pt;
    }

    .bilan-texte li {
        font-size: 18px;
    }

    .bilan-texte p {
        font-size: 1.2rem;
    }

    .bilan-texte li:before {
        width: 1.2rem;
        height: 1.2rem;
    }

    .funding-left {
        align-items: center;
    }

    .funding-left,
    .funding-right {
        flex: auto;
        width: max-content;
    }

    .funding-left {
        flex-basis: 50%;
    }

    .mb-offre {
        margin-bottom: 30px;
    }

    .offer-block.mb-offre {
        padding: 7px 4px 5px 15px;
        width: 40%;
    }

    .offer-block {
        width: 40%;
    }

    .bg-funding-right {
        padding: 0rem 1rem 1rem;
        width: 90%;
    }
}

@media screen and (min-width: 1440px) {
    .prose {
        max-width: 40%;
    }

    .accessible p {
        margin-bottom: 0px;
    }

    .bilan-orientation {
        padding: 2rem 1rem 0rem 1rem;
    }

    .bigger {
        width: 17% !important;
    }

    .bg-funding-right {
        padding: 0rem 1rem 0.7rem;
        width: 100%;
    }

    .ax__heading,
    .formation-container h2,
    .outils-container h2,
    .slider-title-h2,
    .bilan-texte h2,
    .funding-section h2 {
        font-size: 45px;
    }

    .slider-reassurance-section {
        width: 94%;
    }

    .align-reassurance-tuteurs {
        padding-top: 17px;
    }

    .slide-item {
        border-radius: 30px;
        flex: 0 0 24%;
        padding: 2rem 2rem;
    }

    .timeline {
        max-width: 1200px;
    }

    .swiper-pagination {
        max-width: 1020px;
    }

    .slide-item img {
        width: 50px;
    }

    .slide-item .bigger-logo {
        width: 38px;
    }

    .align-reassurance-tuteurs,
    .align-reassurance-p {
        padding-top: 15px;
    }

    .program .svg-programme {
        width: 17%;
    }

    .formation-container {
        max-width: 1320px;
    }

    .outils-container {
        max-width: 1285px;
    }

    .outils-cards {
        gap: 0rem;
    }

    .separator {
        display: block;
        margin: auto;
    }

    .chapitre p {
        font-weight: 400;
    }

    .slide-title {
        font-size: 1.4rem;
    }

    .slide-number {
        font-weight: 600;
    }

    .bilan-image {
        flex: 1 1 35%;
    }

    .bilan-container {
        max-width: 1300px;
    }

    .bilan-texte p {
        font-size: 1.1rem;
    }

    .funding-section {
        max-width: 1300px;
    }

    .logos img {
        width: 60px;
    }

    .funding-warning {
        margin-top: -30px;
    }

    .accessible h2 {
        margin-bottom: 1rem;
        margin-top: 0.5rem;
    }

    .accessible img {
        width: 80%;
    }
}

@media screen and (min-width: 1920px) {
    .accessible img {
        width: 85%;
    }

    .accessible {
        margin: 4rem 12rem;
    }

    .accessible h2 {
        font-size: 56px;
    }

    .accessible p {
        font-size: 15pt;
    }

    .bg-funding-right {
        width: 150%;
    }

    .offer-block.mb-offre {
        width: 50%;
    }

    .offer-block {
        width: 50%;
    }

    .slider-reassurance-section {
        width: 82%;
    }

    .timeline,
    .formation-container,
    .outils-container,
    .slider-container,
    .bilan-container,
    .funding-section {
        max-width: 1500px;
    }

    .chapitres-grid {
        display: flex;
        gap: 2rem;
        align-items: flex-start;
        justify-content: center;
    }

    .chapitre {
        width: 255px;
    }

    .dots {
        letter-spacing: 2.5px;
    }

    .bilan-image img {
        max-width: 510px;
    }

    .logos {
        justify-content: space-evenly;
    }
}

@media screen and (min-width: 2560px) {
    .programs {
        max-width: 1500px;
    }

    .accessible img {
        width: 70%;
    }

    .accessible {
        margin: 2rem 32rem;
    }

    .accessible h2 {
        font-size: 40px;
    }
}

@media (max-width: 749.98px) {
    .btn-with-reviews {
        justify-content: center;
        line-height: 1;
        gap: 22px;
    }
}

@media screen and (max-width:768px) {
    .btn-with-reviews {
        width: 100%!important;
    }
}

@media screen and (min-width: 912px) {
    .btn-with-reviews {
        max-width: 35%!important;
    }
}