/* ROOT VARIABLES */
:root {
    --color-cabinet-marc: #62341d;
    --color-cabinet-marc-transparent: #62341d;
    --color-cabinet-marc-hover: #9B3922;
    --color-danger: #00ff44;
    --color-success: #41f1b6;
    --color-warning: #ffbb55;
    --color-white: #fff;
    --color-white-transparent: #ffffffeb;
    --color-white-transparent-2: #ffffff52;
    --color-white-transparent-2-hover:hsla(39, 100%, 96%, 0.845);

    --color-black: #000;
    --color-font-dark: #0B2447;
    --color-info-dark: #7d8da1;
    --color-info-light: #dce1eb;
    --color-dark: #363949;
    --color-light: rgba(132, 139, 200, 0.18);
    --color-dark-variant: #f5faff;
    --color-background: #f6f6f9;
    --color-background-blur-1: #ff84007d;
    --color-background-blur-2: #f3b600;
    --color-background-blur-3: #F2EAD3;
    --color-background-blur-4: #F5F5F5;
    --color-background-cabinet-marc-identité: #fdf9f7;
    --color-boxes-background: rgba(227, 227, 227, 0.1);
    --color-background-transparent: #ffffff00;
    --color-aside-background: #F5EFE6;
    --color-course-aside-hover: #d2f4ea;

    --color-linear-gradient-1: linear-gradient(90deg, #c0824f, #b89078);
    --color-linear-gradient-2: #ac8663;
    --color-linear-gradient-3: linear-gradient(270deg, #a47454, #9e8267);
    --color-linear-gradient-4: #b9977b;

    --font-family: poppins, sans-serif;

    --card-border-radius: 2rem;
    --border-radius-1: 0.4rem;
    --border-radius-2: 0.8rem;
    --border-radius-3: 1.2rem;

    --card-padding: 1.8rem;
    --padding-1: 1.2rem;

    --box-shadow: 0 2rem 3rem var(--color-light);
    --box-shadow-boxes-background: 0px 0px 20px 1px rgba(0, 0, 0, 0.2);
    --box-shadow-boxes-background-live: 0px 0px 20px 1px rgba(0, 0, 0, 0.2);


    --c-neutral-50: 249, 250, 251;
    --c-neutral-900: 17, 24, 39;

    --tw-bg-opacity:1;
    --color-linear-gradient: rgba(var(--c-neutral-900), var(--tw-bg-opacity));


    --color-minuteur: #9B3922;
    --color-input-quiz: #310d02c5;
    --color-input-quiz-after: #741e05b7;
    --color-quiz-textarea:rgba(180, 120, 102, 0.718);
    --color-payment-form: #fff;


    --item1-transform: translate(-100%, -5%) scale(1.5);
    --item1-filter: blur(30px);
    --item1-zIndex: 11;
    --item1-opacity: 0;

    --item2-transform: translate(0, 0);
    --item2-filter: blur(0);
    --item2-zIndex: 10;
    --item2-opacity: 1;

    --item3-transform: translate(50%, 10%) scale(0.8);
    --item3-filter: blur(10px);
    --item3-zIndex: 9;
    --item3-opacity: 1;

    --item4-transform: translate(90%, 20%) scale(0.5);
    --item4-filter: blur(30px);
    --item4-zIndex: 8;
    --item4-opacity: 1;

    --item5-transform: translate(120%, 30%) scale(0.3);
    --item5-filter: blur(40px);
    --item5-zIndex: 7;
    --item5-opacity: 0;



    --c-dark: #212529;
    --c-brand: #4e57d4;
    --c-brand-light: #6970dd;
    --c-brand-rgb: 78, 87, 212;
    --c-body: #727272;
    --box-shadow: 0px 15px 35px rgba(0,0,00,0.08);
    --transition: all 0.5s ease;


}

/* .paragraphe {
    margin-bottom: 1rem; /* Espacement entre les paragraphes */


/* -------------------------------------- DARK THEME VARIABLES -------------------------------*/
.dark-theme-variables {
    --color-cabinet-marc: #FFF5E0;
    --color-cabinet-marc-hover: #fff;
    --color-background: rgba(var(--c-neutral-900), var(--tw-bg-opacity));
    --color-black: #fff;
    --color-white: #202528;
    --color-white-transparent: #0c1a23ec;
    --color-white-transparent-2: #202528ae;
    --color-white-transparent-2-hover:#202528d6;
    --color-dark: #edeffd;
    --color-dark-variant: #a3bdcc;
    --color-light: rgba(0,0,0,0.4);
    --color-boxes-background: rgba(255, 255, 255, 0.1);
    --color-info-light: #000;
    --color-background-transparent: #ffffff00;
    --color-aside-background: #000000;
    --color-linear-gradient:  rgba(var(--c-neutral-900), var(--tw-bg-opacity));;
    --color-course-aside-hover: #0b3d47;


    --color-linear-gradient-1: linear-gradient(90deg, #000000, rgba(var(--c-neutral-900), var(--tw-bg-opacity)));
    --color-linear-gradient-2: linear-gradient(90deg, #0023c0, rgba(var(--c-neutral-900), var(--tw-bg-opacity)));
    --color-linear-gradient-3: linear-gradient(90deg, #0300ced0, rgba(var(--c-neutral-900), var(--tw-bg-opacity)));
    --color-linear-gradient-4: linear-gradient(90deg, #000d47, rgba(var(--c-neutral-900), var(--tw-bg-opacity)));


    --color-background-cabinet-marc-identité: rgb(17, 31, 39);

    --box-shadow: 0 2rem 3rem var(--color-light);
    --box-shadow-boxes-background: 0px 0px 20px 1px rgba(0, 0, 0, 0);
    --box-shadow-boxes-background-live: 0px 0px 20px 1px rgb(20, 20, 20);

    --color-font-dark: #fff;
    --color-input-quiz: #b7b7bb;
    --color-input-quiz-after: #FFF5E0;
    --color-quiz-textarea: #b7b7bb;
    --color-minuteur: #9595a3;
    --color-payment-form: rgb(17, 31, 39);
}

* {
    margin: 0;
    padding: 0;
    outline: 0;
    appearance: none;
    border: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, summary, time, video {
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
    margin: 0;
    padding: 0;
}

html body {
    font-family: var(--font-family), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body {
    --tw-bg-opacity: 1;
    background-color: var(--color-background);
    /* background-image: linear-gradient(var(--color-background),var(--color-background-cabinet-marc-identité)) ; */
    font-family: var(--font-family);
    position: relative;
}

a, button {
    text-decoration: none;
}

ul, li {
    list-style-type: none; /* Remove bullet points */
    padding: 0; /* Remove any default padding */
    margin: 0; /* Remove any default margin */
}

ul li {
    user-select: none;
}


/* ----------------------------------------- CLASS STYLES------------------------------------------------ */

.revblo {
    pointer-events: none;
}

/* ----------------------------- PRELOADER ----------------*/

.material-symbols-outlined {
    color: var(--color-black);
}


/* ---------------------------- CONTAINER ----------------*/

/* --------------- PREHEADER------- */

.custom-img-style {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
  }  

.phone-media-header {
    display: none;
}



.pre-header {
    /* Add necessary styles for the pre-header */
    transition: opacity 0.3s;
}


.login-language-toggle {
    padding: 1% 30px 0.3% 2%;
}

.login-language-toggle-position {
    display: grid;
    grid-template-columns: minmax(100px, auto) 10% 10% 10%;
    margin-left: 85%;
    gap: 1.5rem;
}

.login-language-toggle-position-2 {
    display: grid;
    grid-template-columns: 15% 15%;
    margin-left: 95%;
    gap: 1.5rem;
}

.button-style {
    font-family: var(--font-family);
    display: inline-block;
    /* padding: 10px 20px; */
    background-color: var(--color-cabinet-marc);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius-1); /* Applies to all four corners */
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 11px;
    font-weight: bold;
    padding: 0.5rem;
    min-width: 6rem;
}

.button-style:hover {
    background-color: var(--color-cabinet-marc-hover);
}

.button-style-pre-header {
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.388);
}

.language {
    visibility: hidden;
    z-index: 5;
    font-family: var(--font-family);
    font-size: 11px;
    font-weight: 600;
    background-color: transparent;
}

.language-icon:hover + .language {
    visibility: visible;
    z-index: 5;
}

.dark_mode-display {
    display: none;
}

/* ----------------- HEADER --------- */

.menu,
.menu-lesson {
    display: none;
}

.close {
    display: none;

}

.header-style {
    padding: 0.5% 0% 0.5% 1%;
    position: fixed;
    z-index: 10000;
    background-color: var(--color-white-transparent);
    width: 100%;
    height: 4.7rem;
}

/* #header {
    transition: box-shadow 0.3s;
} */

.topbar {
    display: grid;
    grid-template-columns: 25% auto;
}

/* --------- HEADER CONTENT ----------- */

.header-content {
    display: grid;
    margin-top: 3%;
    grid-template-columns: repeat(3, minmax(10%, 1fr)) minmax(14%, 1fr) repeat(2, minmax(12%, 1fr)) repeat(2, minmax(3%, 1fr));
    color: var(--color-black);
    font-family: var(--font-family);
    font-size: 0.87rem;
    font-weight: bold;
    line-height: 1;
}

.a-header-style { 
    color: var(--color-font-dark);
    /* background-color: #ffffff6e; */
    /* border-radius: 45px; */
    padding: 5px 8px;
    z-index: 101;
    font-weight: bolder;
    transition: background-color 0.4s ease, font-size 0.4s ease, padding 0.4s ease;
}

.a-header-style:hover {
    /* background-color: var(--color-white); */
    /* border-radius: 45px; */
    cursor: pointer;
    text-align: center;
    text-decoration: none;

    /* font-size: 14px; 
    padding: 7px 10px;  */
}


.dropdown {
    position: relative;
}

.dropdown-content {
    display: none;
    background-color: transparent;
    position: absolute; /* Position absolutely */
    top: 50%; /* Position below the parent */
    display: none;
    background-color: var(--color-white-transparent);
    width: auto;
    box-shadow: 0px 0px 10px 0.2px rgba(0, 0, 0, 0.151);
    z-index: 4;
    font-weight: 500;
    left: 50%; /* Position the left edge of the dropdown at the center */
    transform: translate(-50%); /* Shift the dropdown back by half of its width */
}


.dropdown-e-learning {
    display: none;
    background-color: transparent;
    position: absolute;
    top: 100%;
    background-color: var(--color-info-light);
    width: 7rem;
    z-index: 4;
    font-weight: 500;
    position: absolute;
    top: 0; /* Align with the top of the parent */
    left: 100%; /* Place it to the right of the parent */    
    color: var(--color-font-dark);
    font-size: 0.6rem;
    font-weight: bold;
    line-height: 0;
}

.dropdown-cours-quiz-live {
    position: relative; /* Ensure it's the anchor point for the dropdown */
}

.titre-style {
    font-weight: bold;
    font-size: 1rem;
}

.dropdown:hover .dropdown-content,
.dropdown:hover .dropdown-content:hover
.dropdown-cours-quiz-live:hover .dropdown-e-learning,
.dropdown-cours-quiz-live:hover .dropdown-e-learning:hover {
    display: block;
    background-color: #fff;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.4s ease;
    transition: font-size 0.4s ease;
    font-size: 12px;
}

.dropdown-content a, .dropdown-e-learning a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    margin-top: 0.5rem;
    font-size: 14.5px;
}

.dropdown-content a:hover {
    background-color: #ffffff00;
}

.dropdown-e-learning:hover {
    display: block;
    background-color: var(--color-white);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.4s ease;
    transition: font-size 0.4s ease;
    font-size: 12px;
}

.titre-style {
    font-weight: bold;
    font-size: 1rem;
}

.top-logo {
    max-width: 95%;
}


/* ----------search button ---------------- */
.search-style {
    font-size: 24px;
    color: var(--color-font-dark);
    font-weight: bold;
 }

.search-button {
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.search-button-position {
   position: relative;
}

.search-dropdown {
    position: absolute;
    transform: translate(-300px, 45px);
    display: none;
    z-index: 2;
}

.search-input {
    width: 300px;
    padding-left: 10px;
    padding-top: 15px;
    /* border: 1px solid #ccc; */
    border-radius: 10px;
    resize: none;
    box-sizing: border-box;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.388);
    height: 3rem;
}



/* --------------------------------------------- WEBSITE BODY ----------------------------------------------- */
.website-body-padding {
    margin-top: 5rem;
}


/* Carousel */
.carousel-control-prev-icon  {
    font-display: red;
}

.carousel-control-next-icon {
    font-display: red;
}

/* Picture container */
.picture-container {
    position: relative;
    width: 100%;
    /* height: 400px; Adjust height as needed */
    overflow: hidden;
}

.picture-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* Gradient overlay */
.gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.website-body {
    height: 27rem;
}

.website-body-2 {
    max-width: 40%;
}

.clear-background p {
    margin: 0;
}


/* .container {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 100%;
} */

.picture-container {
    position: relative;
    transform: translate(0px, 37px);
    width: 85%;
    height: 35rem;
    margin-left: 25%;
    overflow: hidden;
}

/* .picture-container {
    position: relative;
    width: 75%;
    height: 25rem;
    margin-left: 25%;
    overflow: hidden;
} */

.picture-box {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    width: 88%;
}

.picture-box-contenu {
    position: relative;
    overflow: hidden;
    width: 88%;
}

.picture-container img {
    display: block;
    width: 100%;
    height: auto;
}

.inside-colors {
    margin: 0rem;
    width: 40%;
}

.colors-inside-1 {
    /* position: absolute; */
    background-color: #ff820061;
    border-radius: 450px;
    filter: blur(150px);
    box-shadow: 0px 0px 20px 1px rgba(255, 0, 0, 0.265);
    width: 20%;
    height: 70%;
    position: absolute;
    top: 20%;
    left: 0rem;
    transform: translate(3rem, -1rem);
    z-index: 1;
}

.gradient-overlay {
    top: 0;
    left: 0;
    width: 90%; /* Adjust the width of the gradient overlay */
    height: 100%;
    background-image: linear-gradient(to left, var(--color-background-transparent), var(--color-linear-gradient));
}

.text-overlay {
    position: absolute;
    top: 50%;
    left: 5%; /* Adjust as needed */
    transform: translateY(-50%);
    z-index: 3;
    color: white; /* Adjust text color as needed */
}

.clear-background {
    background-color: rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 25px;
    box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.2);
    width: 45%;
    height: 60%;
    position: absolute;
    top: 20%;
    left: 10%;
    transform: translate(0rem, 7rem);
    z-index: 3;
}

.text-margin {
    padding: 3rem 3rem 3rem 7rem;
}

.cabinet-marc-text {
    color: var(--color-black);
    font-weight: bold;
    font-family: var(--font-family);
    font-size: 42px;
    display: inline;
    margin-right: 0.7rem;
}

.color-cabinet-marc {
    color: var(--color-cabinet-marc);
    font-weight: bold;
    font-family: var(--font-family);
    font-size: 42px;
}

.cabinet-marc-description {
    color: var(--color-black);
    font-weight: bold;
    font-family: var(--font-family);
    font-size: 18.9px;
    padding-top: 1rem;
}

/* *((((((((((((((((((((((((((    New CSS codes ))))))))))))))))))))))))))))))) */

.carousel-new {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.carousel-new .list-new .item-new{
    position: absolute;
    inset: 0 0 0 0;
}

.carousel-new .list-new .item-new img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-new .list-new .content-new{
    position: absolute;
    top: 20%;
    width: 1140px;
    max-width: 53%;
    left: 30%;
    transform: translate(-55%);
    box-sizing: border-box;
    color: #fff;
    text-shadow: 0 5px 10px #0004;
    font-family: var(--font-family);
    z-index: 100;
}

.text-pub-left {
    margin-left: 10%;
}

.carousel-new .list-new .content-new .author-new{
    font-weight: bold;
    letter-spacing: 10px;
}

.carousel-new .list-new .content-new .title-new {
    font-size: 4em;
}

.carousel-new .list-new .content-new .title-new,
.carousel-new .list-new .content-new .topic-new {
    font-weight: bold;
    list-style: 1.3em;
}

.carousel-new .list-new .content-new .topic-new {
    color: var(--color-cabinet-marc);
    font-size: 2em;
}

.carousel-new .list-new .content-new .buttons-new{
    display: grid;
    grid-template-columns: repeat(2, 150px);
    grid-template-rows: 40px;
    gap: 5px;
    margin-top: 20px;
}

.carousel-new .list-new .content-new button {
    	border: none;
        background-color: #eee;
        letter-spacing: 3px;
        font-family: var(--font-family);
        font-weight: 500;
}

.carousel-new .list-new .content-new button:nth-child(2){
    background-color: transparent;
    color: var(--color-cabinet-marc-hover);
    border: 1px solid #eee;
    letter-spacing: 2px;
}

.carousel-new .list-new .content-new button:nth-child(2):hover {
    background-color: white;
}

.thumbnail-new {
    position: absolute;
    bottom: 10px;
    left: 50%;
    width: max-content;
    z-index: 100;
    display: flex;
    gap: 20px;
    font-family: var(--font-family)
}

.thumbnail-new .item-new{
    width: 150px;
    height: 220px;
    flex-shrink: 0;
    position: relative;
}

.thumbnail-new .item-new img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.thumbnail-new .item-new .content-new {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
}

.thumbnail-new .item-new .content-new .title-new {
    font-weight: bold;
}

.arrows-new{
    position: absolute;
    top: 80%;
    right: 52%;
    width: 300px;
    max-width: 30%;
    display: flex;
    gap: 10px;
    align-items: center;
}

.arrows-new button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ffffff52;
    border: none;
    font-family: var(--font-family);
    color: var(--color-white);
    font-weight: bold;
    font-size: large;
    transition: .5s; 
    z-index: 100;
}

.arrows-new button:hover{
    background-color: #000;
}

.carousel-new .list-new{
    z-index: 1;
}

.carousel-new .list-new .author-new,
.carousel-new .list-new .title-new,
.carousel-new .list-new .topic-new,
.carousel-new .list-new .des-new,
.carousel-new .list-new .buttons-new {
    transform: translateY(50px);
    filter: blur(20px);
    opacity: 0;
    animation: showContent 0.5s 1s linear 1 forwards;
}


@keyframes showContent {
    to{
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

.carousel-new .list-new .title-new{
    animation-delay: 1.2s;
}

.carousel-new .list-new .topic-new{
    animation-delay: 1.4s;
}

.carousel-new .list-new .des-new{
    animation-delay: 1.6s;
}

.des-new {
    width: 70%;
}

.carousel-new .list-new .buttons-new {
    animation-delay: 1.8s;
}

.carousel-new .list-new .item-new img{
    width: 150px;
    height: 220px;
    position: absolute;
    left: 50%;
    bottom: 50px;
    border-radius: 20px;
    animation: showImage 0.5s linear 1 forwards;
}

@keyframes showImage {
    to{
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: 0;
    };
}

.carousel-new.next .thumbnail-new .item-new:nth-last-child(1) {
    width: 0;
    overflow: hidden;
    animation: showThumbnail 0.5s linear 1 forwards;
}

@keyframes showThumbnail {
    to{
        width: 150px;
    }
}

.carousel-new.next .thumbnail-new{
    transform: translateX(150px);
    animation: transformThumbnail 0.5s linear 1 forwards;
}

@keyframes transformThumbnail {
    to{
        transform: translateX(0);
    }
}

.carousel-new.prev .list-new .item-new:nth-child(2){
    z-index: 2;
}

.carousel-new.prev .list-new .item-new:nth-child(2) img{
    position: absolute;
    bottom: 0;
    left: 0;
    /* animation: outImage 0.5s linear 1 forwards; */
}

/* @keyframes outImage {
    to{
        width: 150px;
        height: 220px;
        border-radius: 20px;
        left: 50%;
        bottom: 50px;
    }
} */

.carousel-new.prev .thumbnail-new .item:nth-child(1){
    width: 0;
    overflow: hidden;
    opacity: 0;
    animation: showThumbnail 0.5s linear 1 forwards;
}

/* .carousel-new .list-new .item:nth-child(2) .author-new,
.carousel-new .list-new .item:nth-child(2) .title-new,
.carousel-new .list-new .item:nth-child(2) .topic-new,
.carousel-new .list-new .item:nth-child(2) .des-new,
.carousel-new .list-new .item:nth-child(2) .buttons-new{
    animation: contentOut 1.5s linear 1 forwards;
}

@keyframes contentOut {
    to{
        transform: translateY(-150px);
        filter: blur(20px);
        opacity: 0;
    }
} */

.carousel-new.next .arrows-new button,
.carousel-new.prev .arrows-new button{
    pointer-events: none;
}

.time-new{
    width: 100%;
    height: 5px;
    /* background-color: var(--color-cabinet-marc); */
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
}

    /* .carousel-new.next .time-new,
    .carousel-new.prev .time-new{
        width: 100%;
        animation: timeRunning 0s linear 1 forwards;
    }
    @keyframes timeRunning{
        to{
            width: 0;
        }
    } */

@media screen and (max-width: 678px) {
    .carousel-new .list-new .content-new {
        padding-right: 30px;
    }

    .carousel-new .list-new .content-new .title-new {
        font-size: 30px;
    }
}

/* -------------------------------- ESPACE DE DESCRIPTION DU CABINET MARC ----------------------- */

.cabinet-marc-identité-margin {
    margin: 0% 10%;
}

.cabinet-marc-identité-text {
    color: var(--color-black);
    font-family: var(--font-family);
}

.identité-text-titre {
    font-weight: 500;
    font-size: 150%;
    line-height: 2;
    padding-top: 1rem;
}

.identité-text-content {
    font-weight: 400;
    font-size: 90%;
    line-height: 1.5;
}

.en-savoir-plus-style {
    font-family: var(--font-family);
    font-size: 0.88rem;
    font-weight: bold;
    line-height: 1.5;
    padding-top: 1rem;
}

.a-color {
    color: var(--color-black);
}

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

.font-color-white {
    color: var(--color-white);
}

.watsapp {
    z-index: 1;
    position: fixed;
    right: 30px;
    bottom: 25px;
}

.watsapp-icons {
    width: 32.5px;
    height: 32.5px;
    border-radius: 1rem;
}

.watsapp-icons:hover {
    cursor: pointer;
    width: 33.5px;
    height: 33.5px;
    transition: 0.5s;
}


/* -----------------------------Services------------------------------------- */

.services {
    background: var(--color-background-cabinet-marc-identité);
}

.services-margin {
    padding: 1rem;
}

.services-box {
    padding: 0% 10% 5% 10%;
}

.services-box-1 {
    padding: 0% 10% 0% 10%;
}


.services-voir-tout {
    margin: 0rem 2rem 0rem 2rem ;
}

.services-voir-tout-grid {
    display: grid;
    grid-template-columns: 50% 50%;
}

.service-padding {
    padding: 1rem;
}


.services-height {
    height: 22rem;
}

.services-height-2 {
    height: auto;
}

.services-box-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(100px, 1fr));
    gap: 1rem;
}

.services-box-grid-fix-size {
    width: 15rem;
    height: 5rem;
}

.services-content {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 25px;
    position: relative;
    text-align: left;
    padding: 1rem;
    box-shadow: var(--box-shadow-boxes-background);
}

.a-propos-services-content {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 25px;
    position: relative;
    text-align: left;
    padding: 1rem;
}

.services-content:hover {
    box-shadow: none;
}

.services-content-box-style {
    height: 21rem;
}

.services-content-box {
    display: grid;
    grid-template-rows: 5rem 9rem 1rem;
}

.services-box-grid-2 {
    padding: 0% 5% 0% 5%;
    display: grid;
    grid-template-columns: repeat(3, minmax(33%, 1fr));
    justify-items: center;
}

.a-propos-services-box-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(420px, 1fr))
}

.services-box-grid-fix-size-2 {
    width: 15rem;
    height: 5rem;
}

.services-box-grid-fix-size-3 {
    width: 80%;
    height: 10rem;
    margin-top: 4rem;
    margin-bottom: 14rem;
    transition: 0.5s cubic-bezier(.87, -1.38, .03, 1.54);
}

.services-box-grid-fix-size-3:hover {
    width: 15.5rem;
    height: 5rem;
    margin-top: 4rem;
    margin-bottom: 18rem;
}

.services-box-grid-fix-size-4{
    width: 100%;
    height: 10rem;
    margin-top: 1.6rem;
    margin-bottom: 14rem;
    transition: 0.5s cubic-bezier(.87, -1.38, .03, 1.54);
}

/* .services-box-grid-2:hover .services-box-grid-fix-size-3{
    filter: grayscale(1);
} */

.services-box-grid-2:hover .services-box-grid-fix-size-3:hover{
    filter: none;
}

.a-propos-services-box-grid-fix-size {
    width: 15rem;
    height: 5rem;
    margin-top: 4rem;
    margin-bottom: 18rem;
}

.services-content-2 {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 25px;
    position: relative;
    text-align: left;
    padding: 0.8rem;
    box-shadow: var(--box-shadow-boxes-background);
}

/* .services-content-2:hover {
    box-shadow: none;
} */

.services-content-box-style-2 {
    height: 21rem;
}

.services-content-box-style-4 {
    height: 14rem;
}


.services-content-box-2 {
    display: grid;
    grid-template-rows: 9rem 2.5rem 7.3rem 1.2rem;
}

.services-content-box-4 {
    display: grid;
    grid-template-rows: 9rem 5rem;
}

.a-propos-services-content-box {
    display: grid;
    grid-template-rows: 15rem 1rem 5rem;
}

.text-display-title-2 {
    font-family: var(--font-family);
    color: var(--color-black);
    font-size: 18px;
    font-weight: 550;
    overflow: hidden;
}

.text-display-title {
    font-family: var(--font-family);
    color: var(--color-black);
    font-size: 15px;
    font-weight: 550;
    overflow: hidden;
}

.text-display-content {
    padding-top: 1rem;
    font-family: var(--font-family);
    color: var(--color-black);
    font-size: 12px;
    overflow: hidden;
}

.apprendre-plus {
    font-size: 12px;
}

/* -------------------------------- Photos du Cabinet MARC ------------------------------------- */

.pictures-margin {
    padding: 5rem 0rem 5rem 12rem;
}

.picture-grid {
    display: grid;
    grid-template-columns: 50% 50%;
}

.photos-container {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
}

.cabinet-marc-pictures {
    display: flex;
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Center the image vertically */
    width: 100%; /* Ensure the container takes up the full width */
    height: 300px; /* Adjust the height as needed */
}

.cabinet-marc-pictures-2 {
    height: 8rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.a-propos-cabinet-marc-pictures {
    height: 13rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
}

.image-display-center {
    width: 100%; /* Ensure the image does not exceed its container */
    height: 100%; /* Ensure the image does not exceed its container */
    object-fit: cover;
}

.tag-words-style {
    text-align: center;
    margin-top: 30%;
}

.tag-words-style-highlight {
    text-align: center;
    line-height: 4rem;
}

.bold {
    font-weight: bold;
}

/* ------------------------------ACHIEVEMENTS------------------------------ */

.achievements {
    height: 50%;
    padding: 4rem;
}

.grid-achievements {
    display: grid;
    grid-template-columns: repeat(2, 25%) 25% 25%;
    gap: 1rem
}

.grid-achievements-margin {
    margin: 0rem;
    display: grid;
    grid-template-columns: repeat(2, 50%);
    gap: 0rem;
}

.achievements-icons {
    font-size: 50px;
    display: flex;
    justify-content: center;
}

.cabinet-marc-achievements {
    color: var(--color-white);
    font-weight: bold;
    font-family: var(--font-family);
    font-size: 16.5px;
}

.cabinet-marc-achievements-text {
    color: var(--color-white);
    font-weight: bold;
    font-family: var(--font-family);
    text-shadow: var(--box-shadow);    
}

/* -----------------------------accueil-Services------------------------------------- */

.accueil-services {
    background: var(--color-background-cabinet-marc-identité);
}

.accueil-services-margin {
    padding: 1rem;
}

.accueil-services-box {
    padding: 0% 10% 5% 10%;
}

.accueil-services-voir-tout {
    margin: 0rem 2rem 0rem 2rem ;
}

.accueil-services-voir-tout-grid {
    display: grid;
    grid-template-columns: 50% 50%;
}

.service-padding {
    padding: 1rem;
}

.voir-tout-padding {
    padding: 1rem;
    margin-left: 80%;
}

.accueil-services-height {
    height: 22rem;
}

.accueil-services-height-2 {
    height: auto;
}

.accueil-services-box-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(100px, 1fr));
    gap: 1rem;
}

.accueil-services-box-grid-fix-size {
    width: 15rem;
    height: 5rem;
}

.accueil-services-content {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 25px;
    position: relative;
    text-align: left;
    padding: 1rem;
    box-shadow: var(--box-shadow-boxes-background);
}

.a-propos-accueil-services-content {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 25px;
    position: relative;
    text-align: left;
    padding: 1rem;
}

.accueil-services-content:hover {
    box-shadow: none;
}

.accueil-services-content-box-style {
    height: 12rem;
}

.accueil-services-content-box {
    display: grid;
    grid-template-rows: 5rem 9rem 1rem;
}

.accueil-services-box-grid-2 {
    display: grid;
    grid-template-columns: repeat(4, minmax(100px, 1fr));
    gap: 1rem;
}

.a-propos-accueil-services-box-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(420px, 1fr))
}

.accueil-services-box-grid-fix-size-2 {
    width: 15rem;
    height: 5rem;
}

.accueil-services-box-grid-fix-size-3 {
    width: 15rem;
    height: 5rem;
    margin-top: 4rem;
    margin-bottom: 18rem;
}

.a-propos-accueil-services-box-grid-fix-size {
    width: 15rem;
    height: 5rem;
    margin-top: 4rem;
    margin-bottom: 18rem;
}

.accueil-services-content-2 {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 25px;
    position: relative;
    text-align: left;
    padding: 1rem;
    box-shadow: var(--box-shadow-boxes-background);
}

.accueil-services-content-2:hover {
    box-shadow: none;
}

.accueil-services-content-box-style-2 {
    height: 19.6rem;
}

.accueil-services-content-box-2 {
    display: grid;
    grid-template-rows: 9rem auto 6rem 1rem;
}

.a-propos-accueil-services-content-box {
    display: grid;
    grid-template-rows: 15rem 1rem 5rem;
}

/* (((((((((((((((((((((((((((((((((((((((((((((((   NEW cODES FOR SERVICES ))))))))))))))))))))))))))))))))))))))))))))))))))) */

.carousel-services {
    height: 800px;
    overflow: hidden;
    position: relative;
}

.carousel-services .list{
    position: absolute;
    top: 0;
    width: 1140px;
    max-width: 90%;
    left: 50%;
    transform: translateX(-50%);
    height: 80%;
}

.carousel-services .list .item {
    position: absolute;
    left: 0;
    top: 0;
    width: 70%;
    height: 100%;
    font-size: 15px;
}

.carousel-services .list .item span{
    width: 50%;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.carousel-services .list .item:nth-child(n+6) {
    opacity: 0;
    pointer-events: auto;
}

.carousel-services .list .item:nth-child(2){
    transform: var(--item2-transform);
    filter:var(--item2-filter);
    opacity: var(--item2-opacity);
    z-index: var(--item2-zIndex);
}

.carousel-services .list .item:nth-child(1){
    transform: var(--item1-transform);
    filter: var(--item1-filter);
    z-index: var(--item1-zIndex);
    opacity: var(--item1-opacity);
    pointer-events: none;
}

.carousel-services .list .item:nth-child(3){
    transform: var(--item3-transform);
    filter:var(--item3-filter);
    opacity: var(--item3-opacity);
    z-index: var(--item3-zIndex);
}

.carousel-services .list .item:nth-child(4){
    transform: var(--item4-transform);
    filter:var(--item4-filter);
    opacity: var(--item4-opacity);
    z-index: var(--item4-zIndex);
}

.carousel-services .list .item:nth-child(5){
    transform: var(--item5-transform);
    filter:var(--item5-filter);
    opacity: var(--item5-opacity);
    z-index: var(--item5-zIndex);
    pointer-events: none;
}

.arrows-services{
    position: absolute;
    bottom: 10px;
    width: 1140px;
    max-width: 90%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.arrows-services #next,
.arrows-services #prev{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-family: monospace;
    font-size: large;
    font-weight: bold;
    border: 1px solid #555;
}

.arrows-services #back{
    font-family: var(--font-family);
    font-weight: 500;
    border: none;
    border-bottom: 1px solid #555;
    letter-spacing: 3px;
    background-color: transparent;
    opacity: 0;
    pointer-events: none;
}






/* (()()()(()))))())())()()()(()()()()()()()()()()()()()(()         New codes working with bootstrap   ())(()()())(())()()()()()(()()()()()()()()()()()()()()()()()()()()()        */

.btn-bootstrap{
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    border-radius: 0;
    padding: 23px 24px;
}

.btn-brand {
    background-color: var(--color-cabinet-marc-hover);
    color: var(--color-white);
}

.btn-brand:hover{
    background-color: var(--color-cabinet-marc);
    border-color: var(--c-brand-light);
    color: var(--color-white);
}

.btn-light {
    color: var(--color-white);
}

/* #hero {
    background: linear-gradient(var(--color-cabinet-marc), var(--color-cabinet-marc));
    background-position: center;
    background-size: cover;
    font-family: var(--font-family);
    z-index: 2;
    color: var(--color-white);
} */

#hero {
    background-color: var(--color-cabinet-marc);
    position: relative;
    font-family: var(--font-family);
    z-index: 2;
    color: var(--color-white);
    overflow: hidden; /* Ensures the background image doesn't exceed the hero section */
    margin: 0rem 8% -8rem 8%;
    border-radius: 1.7rem;
    box-shadow: 0px 0px 40px 10px rgba(0, 0, 0, 0.532);
    padding: 5% 2% 4% 2%;
}

.container {
    position: relative;
    z-index: 1; /* Ensures that the content in the container stays above the image */
}


#about {
    font-family: var(--font-family);
    padding-top: 7%;
    padding-bottom: 10%;
    background: var(--color-background-cabinet-marc-identité);
}

.section-title {
    margin-top: 7rem;
    margin-bottom: 2rem;
}

.section-title .line {
    width: 60px;
    height: 4px;
    background-color: var(--color-cabinet-marc);
    margin: 16px auto 24px auto;
}

.section-title p {
    margin-left: auto;
    margin-right: auto;
}

.iconbox {
    width: 70px;
    height: 70px;
    display: inline-flex;
    justify-content: center;
    background: var(--color-cabinet-marc);
    color: var(--color-white);
    font-size: 34px; 
    flex: none;
}

.theme-shadow {
    box-shadow: var(--box-shadow);
}

/* Service  */

#services {
    font-family: var(--font-family);
    padding: 10% 0% 10% 0%;
    color: var(--color-font-dark);
}

.service {
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.service::after {
    content: "";
    width: 40px;
    height: 40px;
    background: var(--color-cabinet-marc-hover);
    position: absolute;
    bottom: 0;
    right: 0;
    transition: var(--transition);
}

.service:hover::after {
    width: 100%;    
    height: 100%;
    background: var(--color-cabinet-marc);
    z-index: -1;
}

.service:hover h5,
.service:hover p{
    color: var(--color-white);
}

.service:hover .iconbox{
    background-color: rgba(2555, 255, 255, 0.2);
    color: var(--color-white);
}

.material-white-color{
    color: var(--color-white);
}

.linear-background {
    z-index: -1; /* Places the overlay between the image and content */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-cabinet-marc);
    opacity: 0.8; /* Adjust the opacity to make the overlay more or less transparent */
}

#hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire hero section */
    z-index: -2; /* Places the image behind the text */
}

  /* Image zoom */

  .image-zoom {
    position: relative;
    overflow: hidden;
  }

  .image-zoom-wrapper{
    position: relative;
    overflow: hidden;
  }

  .image-zoom-wrapper img{
    transition: var(--transition);    
  }

  .image-zoom:hover .image-zoom-wrapper img {
    transform: scale(1.1);
  }

 /* Portfolio */

 #portfolio{
    font-family: var(--font-family);
    color: var(--color-font-dark);
    padding: 0% 0% 10% 0%;
 }

.portfolio-item .iconbox{
    background-color: var(--color-cabinet-marc);
    color: var(--color-white);
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.portfolio-item:hover .iconbox{
    opacity: 1;
    top: 50%;
}

    /* REVIEWS */
#reviews{
    background: var(--color-background-cabinet-marc-identité);
    padding: 18% 0% 10% 0%;
    color: var(--color-font-dark);
}

.review-head{
    position: relative;
} 

.review-head::after {
    content: "";
    width: 28px;
    height: 28px;
    position: absolute;
    bottom: -14px;
    transform: rotate(45deg);
}
    
.review small{
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-font-dark);
}

.review-person img {
    width: 80px; /* Adjust the size as needed */
    height: 80px; /* Make sure the height is the same as the width */
    border-radius: 50%; /* Makes the image circular */
    object-fit: cover; /* Ensures the image covers the container without distortion */
}

   /* CONTACT US  */

.contact-background {
    background: var(--color-background-cabinet-marc-identité);
    margin-bottom: 12rem;
}

.contact-id{
    position: relative;
    z-index: 4;
    background-color: var(--c-dark);
    margin: 0rem 15% 0rem 15%;
    box-shadow: 0px 0px 40px 10px rgba(0, 0, 0, 0.532);
    padding-bottom: 6rem;
}

.contact-id::after{
    content: "";
    width: 100%;
    height: 70%;
    background-position: center;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.contact-id .form-control{
    border-radius: 0;
    font-size: 14px;
}

.contact-id .form-control:focus {
    box-shadow: none;
    border-color: var(--color-cabinet-marc);
}

/* TEAM  */
.team-member-content{
    background-color: var(--color-cabinet-marc);
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%);
    padding: 24px;
    transition: var(--transition);
    opacity: 0;
}

.team-member:hover .team-member-content{
    opacity: 1;
    bottom: 24px;
}

/* FOOTER  */

#footer{
    background-color: #000;
}

.footer-top{
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom{
    padding-top: 40px;
    padding-bottom: 40px;
}

footer li, 
footer p,
footer a{
    font-size: 13px;
    font-weight: 250;
    color: rgba(255, 255, 255, 0.826);
    line-height: 20px;
}

footer ul{
    padding: 0;
    list-style: none;
}

footer .line{
    width: 40px;
    height: 4px;
    background-color: var(--color-cabinet-marc);
    margin-top: 12px;
    margin-bottom: 22px;
}

.social-icons a{
    margin-top: 5%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    font-size: 22px;
}

.social-icons a:hover {
    background-color: var(--color-cabinet-marc);
    color: white;
} 

/* -----------------------------NEWSLETTER-------------------------- */

.newsletter {
    margin: 3rem 6rem 3rem 6rem;
}

.newsletter-grid {
    display: grid;
    grid-template-columns: auto 20rem 5rem;
    gap: 0.5rem;
    color: var(--color-black);
}

.emailInput {
    width: 300px; /* Adjust width as needed */
    padding: 10px;
    border: 0.1px solid #cccccc70;
    border-radius: 10px;
    font-size: 16px;
}

.emailInput:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Add box shadow when focused */
}

/* Placeholder styling */
.emailInput::placeholder {
    color: #999; /* Placeholder color */
    font-size: 15px;
}

.newsletter-text {
    font-family: var(--font-family);
    font-size: 14px;
    text-align: center;
}

.button-style-sinscrire{
    display: block;
    /* padding: 10px 20px; */
    background-color: var(--color-cabinet-marc);
    color: var(--color-white);
    border: none;
    border-radius: var(--border-radius-1); /* Applies to all four corners */
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 12px;
    font-weight: bold;
    padding: 0.5rem;
    width: 6rem;
}


/* ================================ PAGE 2 : CONTENT VISUALIZATION ================================== */

.lire-margin {
    display: flex;
    font-weight: 400;
}

.lire-margin-top-bottom {
    margin: 2rem 0rem 2rem 0rem;
}

.lire-margin-left-right {
    height: 100%;
    width: 14.5rem;
}

.lire-diplay-flex {
    display: flex;
    justify-content: space-between;
}

.lire-diplay-flex > :last-child {
    margin-right: 0rem;
}

.lire-column-margin {
    width: 13rem;
}

.content-max-width {
    max-width: 100%;
    padding-bottom: 3rem;
    padding-top: 1rem;
}

.grid-aside-lire-content {
    display: grid;
    grid-template-columns: 14.5rem auto;
}

.a-font-color-aside {
    color: var(--color-black); /* Default font color */
    font-weight: 500;
    text-decoration: none; /* Remove underline from links */
    margin: 8px; /* Add padding for better clickability */
    transition: background-color 0.3s ease; /* Add transition for smooth color change */
}

.a-font-color-aside:hover {
    color: var(--color-cabinet-marc); /* Change font color on hover */
    background-color: var(--color-aside-background); /* Change background color on hover */
}

.catégories-style {
    padding-left: 7px;
    font-size: 14px
}

.modules-style {
    padding-left: 15px;
    font-size: 13px;
    padding: 7px;
}

.display-modules {
    cursor: pointer; /* Change cursor to indicate clickable link */
}

.show-modules {
    display: block !important; /*Show lessons when the show-lessons class is present */
}

.leçons {
    padding-left: 25px; /* Indent lessons */
    font-size: 12px;
    padding: 7px;
    display: none;
    flex-direction: column; /* Display items vertically */
    border: 0.01px solid #0000000a; /* Add border */
    border-radius: 5px; /* Add border radius for rounded corners */
}

.show-lessons {
    display: block !important; /* Show lessons when the show-lessons class is present */
}


.button-icon-lire-content-aside:hover {
    background-color: var(--color-cabinet-marc);
}

.aside-grid-rows {
    padding-top: 7px;
    display: grid;
    grid-template-rows: 2rem auto;
    border: 0.01px solid #0000000a; /* Add border */
    border-radius: 5px; /* Add border radius for rounded corners */
    width: 14.5rem;
}

.modules {
    display: flex;
    flex-direction: column;
    border: 0.01px solid #0000000a; /* Add border */
    border-radius: 5px; /* Add border radius for rounded corners */
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.05);
    display: none;
}

.services-box-grid-fix-size-lire-content {
    width: 15rem;
    height: 5rem;
}

.contenu-in-aside {
    display: block;
}

/* ========================= Visualiser les modules ====================== */

.ajouter-titre {
    margin-top: 2.3rem;
    text-align: center;
    margin-bottom: 3.5rem;
}

.ajouter-contenu-options {
    margin: 0rem 10rem 3rem 10rem ;
}

.ajouter-contenu-options-margin {
    padding: 2rem 7% 2rem 7%;
}

.ajouter-contenu-options-margin-leçons {
    padding: 0.5rem 7% 1rem 7%;
}

.container-2columns .ajouter-contenu-options {
    margin: 0.5rem 5rem 0.5rem 5rem;
}

.ajouter-contenu-options .item {
    background: var(--color-white);
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.7rem;
    padding: 1rem var(--card-padding);
    border-radius: var(--border-radius-3);
    box-shadow: none;
    transition: all 300ms ease;
}

.ajouter-contenu-options .item:hover {
    box-shadow: var(--box-shadow);
}

.ajouter-contenu-options .item .right {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin: 0;
    width: 100%;
}

.ajouter-contenu-options .item .icon {
    padding: 0.6rem;
    color: var(--color-white);
    border-radius: 50%;
    background: var(--color-primary);
    display: flex;
}

.ajouter-contenu-options .item.offline .icon {
    background: var(--color-danger);
}

.ajouter-contenu-options .item.customers .icon {
    background: var(--color-success);
}

.ajouter-contenu-options .add-product {
    background-color: transparent;
    border: 5px dashed var(--color-cabinet-marc);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ajouter-contenu-options .add-product div {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.ajouter-contenu-options .add-product div h3 {
    font-weight: 600;
}

.cabinet-marc-identité-contenu {
    font-family: var(--font-family);
    color: var(--color-black);
}

.a-font-color-aside {
    color: var(--color-font-dark);
}

.a-font-color-content {
    color: var(--color-black);
}

.button-payment {
    padding-top: 2rem;
}

.background-gray {
    background-color: var(--color-aside-background);
    height: 20rem;
    display: block;
}

.card-body-background-color {
    background-color: var(--color-background);
    color: var(--color-black);
}

.like-content:hover {
    color: var(--color-cabinet-marc-hover);
}

.card-img-top-image {
    background-image: url(../images/marc\ devant.jpg);
}

/* =============================== Page 3: San Work ===============================*/

/* ------------------------------CONTENUE------------------------------ */


.contenue-video {
    margin: 5rem 4rem 0rem 2rem;
    width: 70%;
    }

.identité-text-content {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
}

.contenue-image-display-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%; /* Use the entire width of the container */
    height: 100%; /* Use the entire height of the container */
    object-fit: cover; /* Crop and scale the image to fit */
  }

  .contenue-a-propos-first {
    display: flex;
    gap: 2rem;
    padding-bottom: 30px;
}

.contenue-title-text {
    padding-left: 3rem;
}


/* =============================== Page 3: EVENTS ===============================*/


.events {
    margin-bottom: 6.5rem;
  }

  .events-margin {
      padding: 2rem;
      margin-left: -5%;
  }

  .events-box {
      padding: 0% 10% 5% 10%;
  }


  .events-height {
      height: 12rem;
  }

  .events-box-grid {
      display: grid;
      grid-template-columns: 200px 1fr;
      grid-template-columns: 300px 1fr;
  }

  .events-box-grid-2 {
    display: grid;
    grid-template-columns: 20px 1fr;
    grid-template-columns: 30px 1fr;
}

  .events-box-grid-fix-size {
      width: 60%;
      height: 5rem;
      margin-top: 155px;
  }

  .events-box-grid-fix-size-1 {
      width: 10rem;
      height: 5rem;
  }

  .events-content {

      border-radius: 25px;
      position: relative;
      text-align: left;
      padding: 1rem;


  }

  .events-content-2 {

      backdrop-filter: blur(10px);
      border-radius: 25px;
      position: relative;
      text-align: left;
      padding: 2rem;
      box-shadow: var(--box-shadow-boxes-background-live);
      width: 88%;
      height: 300px;
  }


  .events-content-2:hover {
      box-shadow: none;
  }

  .event-grid-display {
    display: flex;
  }


  .events-content-box-style {
      height: 7rem;
  }



    .events-content-box {
        display: grid;
        grid-template-rows: 5rem -2rem 1rem;
      }

      .event-picture {
        position: relative;
        left: 30px;
        width: 350px; /* Set the desired width of the container */
        height: 230px; /* Set the desired height of the container */
        overflow: hidden; /* Hide any overflow beyond the container */
      }

      .image-display-right {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%; /* Use the entire width of the container */
        height: 100%; /* Use the entire height of the container */
        object-fit: cover; /* Crop and scale the image to fit */
      }


    .buttons-container {
        position: fixed;
        margin-top: 204px;
        width: 20px;
        height: 32px;
    }

    .buttons-container button {
      flex-grow: 1; /* Allow the buttons to grow and fill the available space */
    }

     .events-textcontainer {
        padding-bottom: 10px;
        width: 248px; /* Adjust the width as needed */
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
      }

      .text-display-content-events {
        padding-top: 1rem;
        font-family: var(--font-family);
        color: var(--color-black);
        font-size: 15px
      }

      .text-display-content-events-1 {
        padding-top: 1rem;
        padding-bottom: 1.5rem;
        font-family: var(--font-family);
        color: var(--color-black);
        font-size: 13px;
        width: 248px; /* Adjust the width as needed */
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
      }

      .textContainer-events {
        padding-bottom: 10px;
      }

      .textContainer-events-1 {
        padding-bottom: 10px;

      }



    /* ------------------------------DETAILED-EVENTS------------------------------ */


.a-propos-second-detailed {
    display: flex;
    gap: 15rem;
    margin: 5rem 0rem 2rem 4rem;
    color: var(--color-black);
}
.ev-det {
    width: 320px;
	padding: 30px;
	padding-top: 70px;
    color: var(--color-black);
    font-size: 12px;
}

.ev-button-text {

	background: #fff;
	font-size: 11px;
	margin-top: 30px;
	padding: 16px 20px;
	border-radius: 26px;
	border: 1px solid #baecee;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	width: 100%;
	color: #03357c;
	box-shadow: 0px 2px 2px #1d1f20;
	cursor: pointer;
	transition: .2s;
}

.ev-button-text:active,
.ev-button-text:focus,
.ev-button-text:hover {
	border-color: #3ceaf7;
	outline: none;
}

.ev-det-input {
	border: none;
	border-bottom: 2px solid #828a94;
	background: none;
	padding: 10px;
	padding-left: 24px;
	font-weight: 700;
	width: 75%;
	transition: .2s;
}

.ev-det-input:active,
.ev-det-input:focus,
.ev-det-input:hover {
	outline: none;
	border-bottom-color: #a6dde0;
}

.event-detaille-video-padding {
    padding: 0% 0% 0% 22%;
}

.event-detaille-video-size {
    margin: 5rem 4rem 0rem 2rem;
    width: 56.4%;
}

#enregistrer-button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    font: inherit;
    outline: inherit;
    text-decoration: underline;
  }

#enregistrer-button:hover {
    text-decoration: none;
  }


 /* ------------------------------COMMENTS------------------------------ */

 .comments-comments {
	margin: 0rem;

}

 .comments {
	margin: 2rem;
    display: flex;
}

.comments-margin {
	padding: 2rem;
      margin-left: -5%;
}

.comments-box {
	padding: 2rem 0rem 2rem 2rem;
    border-radius: 25px;
    position: relative;
    text-align: left;
    box-shadow: var(--box-shadow-boxes-background-live);
    width: 25%;
    height: 15%;
    background-color: #eafdff;
}

.comments-title {
	font-size: 15px;
    padding-bottom: 15px;
}

.comments-paragraph {

    font-size: 15px;
}

.comments-content {
    padding: 0rem 0rem 0rem 0rem;
}

.comments-picture {
	position: relative;
        left: 30px;
        border-radius: 6rem;
        width: 50px; /* Set the desired width of the container */
        height: 50px; /* Set the desired height of the container */
        overflow: hidden; /* Hide any overflow beyond the container */
      }




    /* ------------------------------Quiz------------------------------ */


    .quiz {
    margin: 3% 0% 3% 25%;
    backdrop-filter: blur(10px);
      border-radius: 40px;
      position: relative;
      text-align: left;
      padding-top: 20px;
      padding-bottom: 70px;
      box-shadow: var(--box-shadow-boxes-background-live);
      width: 690px;
      height: 170%;
      font-family: var(--font-family);
    }

    .quiz:hover {
        box-shadow: none;
    }

    .quiz-container {
        margin: 3% 0% 0% 15%;
        color: var(--color-black);

    }

    .timer-container {
        display: flex;
        gap: 1rem;
        margin: 2% 0% 3% 0%;
        color: var(--color-minuteur);
    }

    .quiz-snooze {
        color: var(--color-minuteur);
    }

    .quiz-span {
        color: var(--color-cabinet-marc);;
    }

    .quiz-container label {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .quiz-questions {
        padding-bottom: 50px;
    }

    .quiz-answer {
        width: 450px;
        height: 40px;
        border: 2px solid #ffc7b660;
        border-radius: 6px;
    }

    .quiz-answer:hover {
        border: 1px solid #a8715b;
    }

    .quiz-title {
        padding-bottom: 10px;
        font-weight: bolder;
    }

    .quiz-container label input[type="radio"],
    .quiz-container label input[type="checkbox"] {
        margin-right: 16px;
    }

    .quiz-container label input[type="radio"]::after {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        border: 1.5px solid var(--color-input-quiz);
        border-radius: 8px;
        margin-left: 6px;
    }

    .quiz-container label input[type="checkbox"]::after {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        border: 1.5px solid var(--color-input-quiz);
        border-radius: 3px;
        margin-left: 6px;
    }

    .quiz-container label input[type="radio"]:checked::after,
    .quiz-container label input[type="checkbox"]:checked::after {
        background-color: var(--color-input-quiz-after);

    }

    .quiz-independent {
        padding-top: 20px;
    }

    .quiz-top-bottom {
        padding-bottom: 20px;
    }

    .quiz-text {
        width: 450px;
        height: 100px;
        border: 1px solid var(--color-quiz-textarea);
    }

    .quiz-button-score {
        display: flex;
        gap: 8rem;
    }

    .score-container {
        display: flex;
        gap: 1rem;
        padding-right: 10px;
    }

    .button-style-quiz {
        width: 45px;
        height: 40px;
    }

    .member-width{
        width: 30%;
    }

    @media screen and (max-width: 768px) {
        .quiz {
            margin: 3% 0% 0% 20%;
          }

          .quiz-container {
            margin: 3% 0% 0% 2%;
        }

      }


    /* ------------------------------Live------------------------------ */

    .live {
    margin: 7% 0% 0% 30%;
    backdrop-filter: blur(10px);
    border-radius: 40px;
    position: relative;
    text-align: left;
    box-shadow: var(--box-shadow-boxes-background-live);
    width: 37%;
    height: 50%;
    padding-top: 2px;
}

.live:hover {
    box-shadow: none;
}

.live-container {
    margin: 7% 20% 30% 10%;
}

.live-title {
    margin-bottom: 15px;
    color: var(--color-black);
}

.live-label {
    margin-left: 52px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    font-weight: bold;
    font-style: normal;
    color: var(--color-black);
}

.live-label-container {
    margin-bottom: 25px;
}

.live-input {
    width: 200px;
    height: 30px;
    background-color: var(--color-background-blur-4);
    border-radius: 10px;
    color: black;
    text-indent: 10px;
    font-family: var(--font-family);
}

.live-input::placeholder {
    /* Placeholder styles */
    color: #000000;
    text-align: center;
    }

.button-style-live {

    margin-left: 63px;
    margin-bottom: 20px;
    height: 45px;
    width: 200px;
}

.live-a-color {
    color: var(--color-white);
}

.live-indicator {
	position: relative;
  }

  .live-indicator sup {
	position: absolute;
	top: 4px;
	left: 42px;
	/* background-color: red; */
	/* color: rgb(128, 119, 119); */
	padding: 7px 5px;
	font-size: 7px;
	border-radius: 50%;
  }

  .live-indicator-formation {
	position: relative;
  }

  .live-indicator-formation sup {
	position: absolute;
	bottom: 10px;
	left: 76px;
	/* background-color: red;
	color: rgb(252, 249, 249); */
	padding: 7px 5px;
	font-size: 7px;
	border-radius: 50%;
    display: none;
  }

  .live-indicator-e-learning {
	position: relative;
  }

  .live-indicator-e-learning sup {
	position: absolute;
    top: 6px;
	bottom: 90px;
	left: 80px;
	/* background-color: red;
	color: rgb(252, 249, 249); */
	padding: 7px 5px;
	font-size: 7px;
	border-radius: 50%;
  }

  .live-indicator-page {
	position: relative;
  }

  .live-indicator-page sup {
	position: absolute;
    bottom: 10px;
	left: 30px;
	background-color: red;
	color: rgb(252, 249, 249);
	padding: 7px 5px;
	font-size: 7px;
	border-radius: 50%;
  }


        /* ---------------------------- PAYMENTS ----------------------------*/


        .payments {
            margin: 2rem;
        }

        .payments-container {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .payments-logo {
            width: 270px;
            height: 65px;
            padding-top: 10px;
        }

        .payments-style {
            background-color: var(--color-payment-form);
            position: relative;
            box-shadow: var(--box-shadow-boxes-background-live);
            height: 30%;
            width: 38.8%;
        }

        .payments-title {
            padding-bottom: 10px;
            padding-top: 4px;
            font-size: 40px;
            color: var(--color-black);
            text-align: center;
        }

        .payments-label-input {
            padding-bottom: 20px;
            display: flex;
            flex-direction: column;
        }

        .payments-label {
            font-size: 20px;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
            padding-left: 10px;
            padding-bottom: 7px;
            color: var(--color-black);
        }

        .payments-option {
            font-size: 14px;
            font-family: var(--color-black);
            color: var(--color-black);
            color: #070000;
        }

        .payments-option:hover {
            font-weight: bold;
            transition: background-color 0.3s ease;
        }

        .payments-option:focus {
            outline: none;
        }

        .payments-input {
            background-color: #ffffff;
            width: 100%;
            height: 40px;
            border-radius: 5px ;
            border: 0.5px solid #e2d9d9;
            text-align: center;
            margin-right: 90px;
        }

        .payments-input:hover {
            border: 0.5px solid rgba(112, 54, 45, 0.91);
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .payments-button {
            text-align: center;
            padding-top: 7px;
        }

        .payments-button-style {
            width: 100%;
            height: 45px;
            background-color: #915002;
            font-size: 15px;
        }

        /* --------------------------------------------- A-propos- ----------------------------------------------- */

        .a-propos-container {
            margin: 1rem;
        }

        .a-propos-first {
            display: flex;
            gap: 2rem;
            padding-bottom: 30px;
        }

        .a-propos-image {
            width: 300px;
            height: 300px;
        }

        .qui-sommes-nous {
            width: 600px; /* Adjust the width as needed */
            overflow-wrap: break-word;
            word-wrap: break-word;
            word-break: break-word;
            padding-bottom: 30px;
        }

        .qui-sommes-nous-header {
            padding-bottom: 25px;
        }

        .a-propos-second {
            display: flex;
            gap: 5rem;
            margin: 1rem 0rem 2rem 0rem;
            color: var(--color-black);
        }

        .a-propos-second-image {
            width: 260px;
            height: 450px;
        }

        .historique {
            margin-top: 3rem;
            margin-left: 5.6rem;
        }

        .video-box {
            margin: 5rem 4rem 0rem 2rem;
            width: 56.4%;

        }

        .arrow_right-position {
            transform: translate(0px, 7px);
        }




        /* ---------------------------------------------PUBLICATIONS ----------------------------------------------- */

        .pub {
            margin: 1rem 3rem 1rem 1rem;
        }

        .pub-container {
            display: flex;
        }

        .pub-image {

            position: relative;
            left: 30px;
            width: 500px; /* Set the desired width of the container */
            height: 300px; /* Set the desired height of the container */
            overflow: hidden;
            border-radius: 2rem;
        }

        .pub-text {
            margin-left: 5rem;
        }

        .pub-title {
            margin: 1rem;
            width: 550px; /* Adjust the width as needed */
                overflow-wrap: break-word;
                word-wrap: break-word;
                word-break: break-word;
                color: var(--color-black);
        }

        .pub-taste {
            padding-top: 1rem;
                padding-bottom: 1.5rem;
                font-family: var(--font-family);
                color: var(--color-black);
                font-size: 15.5px;
                width: 550px; /* Adjust the width as needed */
                overflow-wrap: break-word;
                word-wrap: break-word;
                word-break: break-word;
        }

        .pub-flex {
            display: flex;
            padding: 0rem 0rem 3rem 3rem;
        }

        .pub-lire {
            font-style: italic;
            font-size: 13px;
        }

        .pub-img-text {
            padding-right: 90px;
            text-align: center;
        }

        .pub-image-sim {

            position: relative;
            left: 30px;
            width: 350px; /* Set the desired width of the container */
            height: 220px; /* Set the desired height of the container */
            overflow: hidden;
            border-radius: 2rem;
        }

        .pub-text {
            margin: 5rem 5rem 5rem 5rem;
        }

        .pub-title-sim {
            margin: 1rem;
            width: 260px; /* Adjust the width as needed */
                overflow-wrap: break-word;
                word-wrap: break-word;
                word-break: break-word;
                font-size: 17px;
                color: var(--color-black);
        }

        .pub-taste-sim {
            padding-top: 1rem;
                padding-bottom: 1.5rem;
                font-family: var(--font-family);
                color: var(--color-black);
                font-size: 11.5px;
                width: 280px; /* Adjust the width as needed */
                overflow-wrap: break-word;
                word-wrap: break-word;
                word-break: break-word;
        }

        .pub-simillaire {
            text-align: center;
            padding: 2rem 0rem 3rem 0rem;
            color: var(--color-black);
        }

        .pub-date {
            font-style: italic;
            color: var(--color-black);
        }

        .pub-date-sim {
            font-style: italic;
            color: var(--color-black);
            font-size: 12.5px;
        }

        .pub-contenuecontenue {
            padding-left: 3rem;
        }


        /* ---------------------------------------------CONTENUES ----------------------------------------------- */

        .contenu {
            margin: 3rem 3rem 1rem 1rem;
        }

        .contenu-container {
            display: flex;
        }

        .contenu-image {
            position: relative;
            width: 650px; /* Set the desired width of the container */
            height: 280px; /* Set the desired height of the container */
        }

        .contenu-title {

            margin: 1rem;
            width: 450px; /* Adjust the width as needed */
             overflow-wrap: break-word;
            word-wrap: break-word;
            word-break: break-word;
            color: var(--color-black);
            font-size: 17px;
        }

        .contenu-text {
            margin-left: 5rem;
        }

        .contenu-taste {
            padding-top: 1rem;
                padding-bottom: 1.5rem;
                font-family: var(--font-family);
                color: var(--color-black);
                font-size: 12px;
                width: 300px; /* Adjust the width as needed */
                overflow-wrap: break-word;
                word-wrap: break-word;
                word-break: break-word;
                font-style: italic;
        }

        .contenu-img-text {
            padding-right: 90px;
            text-align: center;
        }

        .contenu-text {
            margin: 5rem 5rem 5rem 5rem;
        }

        .contenu-date {
            font-style: italic;
            color: var(--color-black);
        }

        .iframe-size {
            width: 50rem;
            height: 40rem;
        }




        /* =================================fOOTER ========================= */

        .footer-container {
            height: 40rem;
            background-color: black;
        }

        .footer-margin {
            padding: 2rem;
        }

        .footer-collumn {
             display: flex;
             gap: 5rem;

        }

        .footer-social-media {
            color: #FFF;
            padding-left: 60px;
        }

        .footer-social-media-break {
            font-size: 13px;
            width: 320px;
            overflow-wrap: break-word;
            word-wrap: break-word;
            word-break: break-word;
        }

        .footer-title {
            padding-bottom: 1.5rem;
        }

        .footer-fb-Insta-x {
            padding-top: 25px;
            display: flex;
            gap: 3rem;
        }

        .footer-title-list {
            padding-top: 20px;
        }

        .footer-infos {
            color: #FFF;

        }

        .footer-infos-list {
            padding-top: 25px;

        }

        .footer-links-collumn {
            display: flex;
            gap: 50px;
        }

        .footer-infos-list-links {
            padding-top: 15px;
            padding-right: 9px;
        }

        .footer-infos-links {
            padding-bottom: 6px;
        }

        .footer-infos-specific-links {
            color: #FFF;
        }

        .footer-infos-specific-list {
            padding-bottom: 9px;
            color: #FFF;
        }

        .footer-mail {
            padding-top: 15px;
            padding-bottom: 10px;
        }


        .footer-specific-mail {
            color: #FFF;
            font-size: 15px;
        }

        .footer-partners {
            color: #FFF;
             font-size: 13px;
        }

        .footer-invitation {
            padding-top: 20px;
        }

        .footer-vortex {
            padding-top: 12px;
        }

        .footer-vortex-specific-links {
            color: #FFF;
            padding-right: 60px;
        }


        .vortex-links {
            padding-top: 12px;
            gap: 40px;
        }

        .material-symbols-outlined-footer {
            color: #FFF;
        }

        .footer-span {
            color: #FFF;
            display: flex;
        }

        .footer-icons {
            width: 22px;
            height: 22px;
            border-radius: 1rem;
            background-color: white;
        }

        .footer-icons:hover {
            width: 28px;
            height: 28px;
            background-color: white;
            transition: 0.2s;
        }

        .copyright {
            color: #FFF;
            font-size: 15px;
            text-align: center;
            margin-top: 25px;
        }

        .vortex {
            color: #FFF;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

        }

        .vortex-footer {
            color: #FFF;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            height: 10px;
            width: 85px;
            padding-top: 11px;
        }


        .vortex-website {
            display: flex;
            justify-content: center;
            margin-top: 60px;
            margin-bottom: 10px;
        }

        .course-description {
            max-width: 80%;
            margin-left: auto;
            margin-right: auto;
        }

        @keyframes slideIn {
            0% {
                opacity: 0;
                transform: translateX(50px);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        .slide-in {
            animation: slideIn 0.5s ease forwards;
        }
        
        .card-section .slide-in:nth-child(1) {
            animation-delay: 0.2s;
        }
        .card-section .slide-in:nth-child(2) {
            animation-delay: 0.4s;
        }
        .card-section .slide-in:nth-child(3) {
            animation-delay: 0.6s;
        }

        .writing-testimony {
            max-width: 70%; 
            margin-left: 15%; 
            box-shadow: 0 0 8px 2px rgba(102, 204, 153, 0.4);
        }

        #testimonialCarousel .carousel-control-prev-icon,
        #testimonialCarousel .carousel-control-next-icon {
            filter: invert(1); /* Makes the icons appear black */
        }

        #testimonialCarousel .carousel-control-prev,
        #testimonialCarousel .carousel-control-next {
            background-color: var(--color-black);
            opacity: 0.02;
        }

        #testimonialCarousel .carousel-control-prev:hover,
        #testimonialCarousel .carousel-control-next:hover {
            opacity: 0.0; /* Increase opacity on hover */
        }

        .slick-add-button-ajouter {
            position: absolute;
            margin-top: 2rem;
            right: 20px; /* Adjust as needed */
            display: inline-block;
            padding: 10px 20px;
            font-size: 13px;
            font-weight: bold;
            color: white;
            background-color: var(--color-cabinet-marc); /* Green background color */
            border: none;
            border-radius: 5px;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            transition: background-color 0.3s ease;
        }
        
        .slick-add-button {
            font-family: var(--font-family);
            display: inline-block;
            padding: 10px 20px;
            font-size: 16px;
            font-weight: bold;
            color: white;
            background-color: var(--color-cabinet-marc); /* Green background color */
            border: none;
            border-radius: 5px;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            transition: background-color 0.3s ease;
            font-size: 13px;
        }
        
        .button-publier-contenu {
            margin-bottom: 2rem;
        }
        
        /* Hover effect */
        .slick-add-button:hover .slick-add-button-modifier .slick-add-button-supprimer {
            background-color: var(--color-cabinet-marc-hover); /* Darker green on hover */
        }
        
        /* Content container */
        .container-ajouter .slick-add-button-modifier .slick-add-button-supprimer {
            position: relative;
            padding-bottom: 60px; /* Adjust to accommodate button height and spacing */
        } 

        .course-aside {
            display: flex;
        }

        .course-aside .ps-0 {
            width: 14rem;
        }

        .btn-toggle {
            display: inline-flex;
            align-items: center;
            padding: .25rem .5rem;
            font-weight: 600;
            color: rgba(0, 0, 0, .65);
            background-color: var(--color-dark-variant);
            border: 0;
          }
          .btn-toggle:hover,
          .btn-toggle:focus {
            color: rgba(0, 0, 0, .85);
            background-color: var(--color-course-aside-hover);
          }
          
          .btn-toggle::before {
            width: 1.25em;
            line-height: 0;
            content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
            transition: transform .35s ease;
            transform-origin: .5em 50%;
          }
          
          .btn-toggle[aria-expanded="true"] {
            color: rgba(0, 0, 0, .85);
          }
          .btn-toggle[aria-expanded="true"]::before {
            transform: rotate(90deg);
          }
          
          .btn-toggle-nav a {
            display: inline-flex;
            margin-top: .125rem;
            text-decoration: none;
          }
          .btn-toggle-nav a:hover,
          .btn-toggle-nav a:focus {
            background-color: var(--color-course-aside-hover);
          }

          .button-link {
            background: none;
            padding: 10px;
          }
          .button-link:hover {
            color: rgba(0, 0, 0, .85);
            background-color: var(--color-course-aside-hover);
          }

          .btn-modules {
            background: none;
          }

       /* Sidebar default state (hidden on smaller screens) */
        .sidebar {
            background-color: var(--color-background);
            padding: 20px;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
            z-index: 9999;
            display: block; /* Default: visible on large screens */
        }
        
        /* Show the sidebar when toggled */
        .sidebar.show {
            display: block;
        }
        
        /* Show the menu toggle button only on smaller screens */
        #menu-toggle {
            display: block;
        }
        /* Close button styling */
        #close-button {
            display: none; /* Hidden by default */
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 20px;
            cursor: pointer;
        }

        /* Loading screen overlay */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* Slightly transparent background */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000; /* Make sure it's above all other content */
}

/* Spinner animation */
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid var(--color-background);
    border-top: 5px solid var(--color-cabinet-marc);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Spinner animation keyframes */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Fade-out transition */
.loading-screen {
    transition: opacity 0.5s ease;
    opacity: 1;
}

.loading-screen.hidden {
    opacity: 0;
    pointer-events: none;
}

.media-display {
    display: visible;
}

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

.media-display-mobile-img {
    display: none;
    background: var(--color-background);
}





        /* =============================== MEDIA QUERIES: TABLETS ===============================*/

        @media screen and (max-width: 1200px) {
            .login-language-toggle-position {
                display: grid;
                grid-template-columns: minmax(100px, auto) 10% 10% 10%;
                margin-left: 78%;
                gap: 1.5rem;
            }
        }

        /* =============================== MEDIA QUERIES: MOBILE ===============================*/

        @media screen and (max-width: 768px) {
            .login-language-toggle-position {
                display: grid;
                grid-template-columns: minmax(100px, auto) 10% 10% 10%;
                margin-left: 68%;
                gap: 1.5rem;
            }
        }


        /* =============================== MEDIA QUERIES: TABLETS 1 ===============================*/

        @media screen and (max-width: 1300px) {
            .phone-media-header {
                display: none;
            }
            
            .login-language-toggle-position {
                display: grid;
                grid-template-columns: minmax(100px, auto) 10% 10% 10%;
                margin-left: 85%;
                margin-right: 1.5rem;
                gap: 1.5rem;
            }

            /* ----------------- HEADER --------- */

        .header {
            padding: 2% 0% 1% 2%;
        }

        .topbar {
            display: grid;
            grid-template-columns: 25% auto;
        }


        /* --------- HEADER CONTENT ----------- */

        .header-content {
            display: grid;
            margin-top: 3%;
            grid-template-columns: repeat(3, minmax(10%, 1fr)) minmax(14%, 1fr) repeat(2, minmax(12%, 1fr)) repeat(2, minmax(3%, 1fr));
            color: var(--color-black);
            font-family: var(--font-family);
            font-size: 0.87rem;
            font-weight: bold;
            line-height: 1;
        }

        .titre-style {
            font-weight: bold;
            font-size: 0.63rem;
        }

        .top-logo {
            max-width: 95%;
        }

        .search-style {
            font-size: 22px;
            color: var(--color-font-dark);
         }


         /* .dropdown-e-learning {
            display: none;
            background-color: transparent;
            position: absolute;
            top: 100%;
            display: none;
            background-color: var(--color-info-light);
            width: auto;
            z-index: 4;
            font-weight: 500;
            left: 55%;
            transform: translate(5.9rem, -7.8rem);
            color: var(--color-font-dark);
            font-size: 0.6rem;
            font-weight: bold;
            line-height: 0;
        } */
        

        /* --------------------------------------------- WEBSITE BODY ----------------------------------------------- */

        .website-body {
            height: 24rem;
        }

        .clear-background {
            background-color: rgba(255, 255, 255, 0.1);
            background-color: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 25px;
            box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.2);
            width: 40%;
            height: 48%;
            position: absolute;
            top: 25%;
            left: 10%;
            transform: translate(0rem, 7rem);
            z-index: 3;
        }

        .text-margin {
            padding: 1.9rem 1.5rem 2rem 10%;
        }

        .cabinet-marc-text {
            color: var(--color-black);
            font-weight: bold;
            font-family: var(--font-family);
            font-size: 36px;
            display: inline;
            margin-right: 0.4rem;
        }

        .color-cabinet-marc {
            color: var(--color-cabinet-marc);
            font-weight: bold;
            font-family: var(--font-family);
            font-size: 36px;
        }

        .cabinet-marc-description {
            color: var(--color-black);
            font-weight: bold;
            font-family: var(--font-family);
            font-size: 20px;
            padding-top: 0.6rem;
        }

        /* -----------------------------Services------------------------------------- */

        .services {
            background: var(--color-background-cabinet-marc-identité);
        }

        .services-box {
            padding: 0% 6% 3.5% 6%;
        }

        .services-voir-tout {
            margin: 0rem 1.7rem 1rem 1.7rem ;
        }

        .service-padding {
            padding: 1rem;
        }

        .identité-text-titre {
            font-weight: 500;
            font-size: 24px;
            line-height: 2;
            padding-top: 0.9rem;
        }

        .identité-text-content {
            font-weight: 400;
            font-size: 14px;
        }

        .en-savoir-plus-style {
            font-family: var(--font-family);
            font-size: 0.88rem;
            font-weight: bold;
            line-height: 1.5;
            padding-top: 1rem;
        }

        .voir-tout-padding {
            padding: 0.5rem -1rem 1.2rem 0rem;
            margin-left: 70%;
        }

        .text-display-title {
            font-family: var(--font-family);
            color: var(--color-black);
            font-size: 15px;
            font-weight: 550;
        }

        .text-display-content {
            padding-top: 1rem;
            font-family: var(--font-family);
            color: var(--color-black);
            font-size: 12px;
            height: 6.85rem;
            overflow: hidden;
        }

        .ajouter-contenu-options {
            margin: 0rem 7rem 2rem 7rem;
        }

        .cabinet-marc-identité-margin {
            margin: 0% 8%;
        }

        }

        @media (max-width: 1001px) {
            aside {
                display: none;
            }
        }
        /* ------------------------------------------------------------ */
        @media screen and (max-width: 1000px) {
            .phone-media-header{
                display: block;
            }

            .topbar-phone {
                display: grid;
                grid-template-rows: 40px auto;
                display: inline-block;
            }    
    
             .menu {
                display: block;
                height: 4rem;
                margin-top: 0.3rem;
                cursor: pointer;
                position: fixed; 
                top: 0;
                z-index: 999;
                right: 0;
                margin-right: 1.65rem;
            }

            .menu span {
                font-size: 55px;
                padding: 0.5rem 0rem 0rem 0.5rem;
            }
        
            .close {
                display: flex;
                cursor: pointer;
                flex-direction: row-reverse;
            }

            .close span {
                font-size: 40px;
                margin-top: 0.3rem;
            }

            aside {
                position: fixed;
                top: 82px;
                left: 0;
                background: var(--color-white);
                width: 23rem;
                z-index: 999;
                box-shadow: var(--box-shadow-boxes-background);
                padding-right: var(--card-padding);
                overflow-y: auto;
                overflow-x: hidden;
                scroll-behavior: smooth;
                min-height: 100%; /* Allows the sidebar to grow based on content */
                max-height: none; /* No max height constraint */
            }
            
            
            aside .dropdown {
                overflow: visible; /* Ensure dropdowns can expand without cutting off */
            }
                                    
            .header {
                position: fixed;
                left: -100;
                background: var(--color-white);
                width: 18rem;
                z-index: 5;
                box-shadow: 1rem 3rem 4rem var(--color-light);
                height: 100vh;
                padding-right: var(--card-padding);
                display: none;
                animation: showMenu 400ms ease forwards;
            }  
            
            @keyframes showMenu {
                to {
                    left: 0;
                }
            }    

            .top-logo {
                max-width: 70%;
                display: block;
                padding: 0% 0% 0% 23%;
            }
            .header-content {
                margin-top: 1rem;
                color: var(--color-black);
                font-family: var(--font-family);
                font-size: 0.88rem;
                font-weight: bold;
                line-height: 1;
                display: inline-block;
                width: 60%;
            }    

            ul li {
                user-select: none;
            }

            .a-header-style {
                color: var(--color-font-dark);
                transition: background-color 0.4s ease, font-size 0.4s ease, padding 0.4s ease;
                display: flex;
                padding: 1rem;
                margin-top: 0.8rem;
                border-radius: 45px;
                font-size: 17px;
                border-bottom: 1px solid var(--color-font-dark); /* Adds the line */
                box-shadow: var(--box-shadow-boxes-background);
                width: 18rem;
            }

            .search-dropdown {
                transform: translate(-80px, 30px);
            }

            .search-mobile-top {
                font-size: 13px;
                color: var(--color-font-dark);
                position: fixed;
                top: 0;
                right: 0;
                padding: 10px;
                z-index: 100;
            }

            .search-mobile-top.hidden {
                top: -100px; /* Moves the element off the screen when hidden */
            }

            .search-style-mobile {
                font-size: 45px;
                margin-right: 2rem;
                margin-top: 0.4rem;
            }

            .theme-toggle-mobile {
                font-size: 45px;
            }

            .user-profile-mobile {
                margin-top: 1.25rem;
            }

            .dropdown:hover .dropdown-content, .dropdown:hover .dropdown-content:hover .dropdown-cours-quiz-live:hover .dropdown-e-learning, .dropdown-cours-quiz-live:hover .dropdown-e-learning:hover {
                display: block;
                background-color: #fff;
                cursor: pointer;
                text-align: center;
                text-decoration: none;
                transition: background-color 0.4s ease;
                transition: font-size 0.4s ease;
                position: relative;
            }

            .dropdown-e-learning {
                left: 0%;
                transform: translate(0rem, 0rem);
            }
                
            .cabinet-marc-text {
                color: var(--color-black);
                font-weight: bold;
                font-family: var(--font-family);
                font-size: 30px;
                display: inline;
                margin-right: 0.4rem;
            }

            .color-cabinet-marc {
                color: var(--color-cabinet-marc);
                font-weight: bold;
                font-family: var(--font-family);
                font-size: 30px;
            }

            .cabinet-marc-description {
                color: var(--color-black);
                font-weight: bold;
                font-family: var(--font-family);
                font-size: 15px;
                padding-top: 0.6rem;
            }

            /* -------------------------------- ESPACE DE DESCRIPTION DU CABINET MARC ----------------------- */

        .cabinet-marc-identité {
            /* background: var(--color-background-cabinet-marc-identité); */
            margin: 3.5% 5% 5% 5%;
        }

        .cabinet-marc-identité-margin {
            margin: 0% 10%;
        }

        .cabinet-marc-identité-text {
            color: var(--color-black);
            font-family: var(--font-family);
        }

        .identité-text-titre {
            font-weight: 500;
            font-size: 22px;
            line-height: 2;
            padding-top: 1rem;
        }

        .identité-text-content {
            font-weight: 400;
            font-size: 13px;
        }

        .en-savoir-plus-style {
            font-family: var(--font-family);
            font-size: 0.68rem;
            font-weight: bold;
            line-height: 1.5;
            padding-top: 0.8rem;
        }

        .ajouter-contenu-options {
            margin: 0rem 5rem 1.8rem 5rem;
        }

        .cabinet-marc-identité-margin {
            margin: 0% 6%;
        }

        .member-width{
            width: 45%;
        }
        .sidebar {
            display: none; /* Hidden by default on smaller screens */
          }
          
          /* Show the sidebar when .show class is added */
          .sidebar.show {
            display: block;
          }
        
          /* Display the menu toggle button */
          #menu-toggle {
            display: block;
            cursor: pointer;
          }

          #close-button {
            display: block;
          }

          .course-aside {
            background-color: var(--color-background-cabinet-marc-identité);
            display: flex;
            flex-direction: column;
        }
        .section-title {
            margin-top: 1rem; 
        }

        .header-style {
            background-color: transparent;
            height: 30rem;
        }

        .media-display {
            display: none;
        }
        
        .media-display-mobile {
            display: visible;
            display: flex;
            margin: 15% 0% 0% 0%;
            height: 3rem;
        }         
        .menu-lesson{
            margin: 2% 0% 0% 2.5%;
            display: block;
        }
        #about {
            padding-bottom: 10%;
            padding-top: 0%;
        }
        .image-logo {
            /* border-bottom: 1px solid var(--color-cabinet-marc); */
            display: block;
            position: fixed;
            top: 0;
            z-index: 999;
            background: var(--color-background);
        }
}


        /* ------------------------------------------------------------ */
        @media screen and (max-width: 820px) {
            .cabinet-marc-text {
                color: var(--color-black);
                font-weight: bold;
                font-family: var(--font-family);
                font-size: 24px;
                display: inline;
                margin-right: 0.4rem;
            }

            .color-cabinet-marc {
                color: var(--color-cabinet-marc);
                font-weight: bold;
                font-family: var(--font-family);
                font-size: 24px;
            }

            .cabinet-marc-description {
                color: var(--color-black);
                font-weight: bold;
                font-family: var(--font-family);
                font-size: 10px;
                padding-top: 0.6rem;
            }

            .services-box-grid {
                display: grid;
                grid-template-columns: repeat(2, minmax(100, 1fr));
                gap: 1rem;
            }

            .ajouter-contenu-options {
                margin: 0rem 4rem 1.5rem 4rem;
            }

            .cabinet-marc-identité-margin {
                margin: 0% 5%;
            }
            .phone-media-header {
                display: block;
            }
            
        }


        /* =============================== MEDIA QUERIES: MOBILE ===============================*/

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

        /* -------------------------------- Aside -------------------------------------------- */
        .picture-container {
            width: 93%;
            margin-left: 10%;
        }

        .login-language-toggle-position {
            grid-template-columns: minmax(90px, auto) 10% 10% 10%;
            margin-left: 55%;
        }

        .website-body{
            height: 23rem;
        }

        .clear-background {
            width: 60%;
            height: 35%;
            transform: translate(0rem, 5rem);
        }

        .cabinet-marc-text {
            font-size: 18px;
        }

        .pictures-margin {
            padding: 5rem 1rem 5rem 1rem;
        }

        .picture-grid {
            display: block;
        }

        .tag-words-style {
            text-align: center;
            margin-top: 5%;
        }

        .grid-achievements {
            display: block;
        }

        .grid-achievements-margin {
            gap: 0.2rem;
            margin-bottom: 2rem;
        }

        .newsletter-grid {
            display: block;
        }

        .newsletter-font-size {
            font-size: 15px;
        }

        .video-box {
            margin: 5rem 0rem 0rem 0rem;
            width: 95%;
        }

        .video-box-lire-content {
            margin: 5rem 0rem 0rem 0rem;
            width: 95%;
        }

        .lire-margin {
            display: none;
        }

        .iframe-size {
            width: 30rem;
            height: 40rem;
        }




            /* ================================ PAGE 2 : CONTENT VISUALIZATION ================================== */

            .grid-aside-lire-content {
                display: grid;
                grid-template-columns:auto;
            }

            .lire-margin {
                display: none;
            }

            /* ========================= Visualiser les modules ====================== */


        .ajouter-contenu-options {
            margin: 0rem 1.5rem 1.5rem 1.5rem ;
        }


        /* ---------------------------- PAYMENTS ----------------------------*/

        .payments-style {
            width: 100%;
        }

            /* =================================fOOTER ========================= */

        .footer-container {
            height: 75rem;
        }

        .footer-margin {
            padding: 2rem 0rem 2rem 0rem;
        }

        .footer-collumn {
             display: block;
             gap: 5rem;

        }

        .footer-social-media {
            padding-left: 10px;
            transition: 0.2s;
        }

        .footer-social-media-break {
            font-size: 13px;
            width: 320px;
            overflow-wrap: break-word;
            word-wrap: break-word;
            word-break: break-word;
            transition: 0.2s;
        }

        .footer-title {
            padding-bottom: 1.5rem;
        }

        .footer-fb-Insta-x {
            padding-top: 25px;
            display: flex;
            gap: 3rem;
            transition: 0.2s;
        }

        .footer-infos {
            padding: 20px 0px 0px 10px;

        }

        .footer-partners {
             font-size: 13px;
             padding: 20px 0px 0px 10px;
        }

            /* -----------------------------NEWSLETTER-------------------------- */

        .newsletter {
            margin: 1.5rem 0rem 0rem 0rem;
        }

        .button-style-sinscrire{
            font-size: 12px;
            font-weight: bold;
            padding: 0.5rem;
            width: 2rem;
        }


        /* -----------------------------EVENTS-------------------------- */


        .events {
            padding-bottom: 5.5rem;
            height: 35rem;
        }


        .events-margin {
            padding: 2rem;
            margin-left: -5%;
        }

        .events-box-grid {
            display: block;
            grid-template-columns: 50px 1fr;
            grid-template-columns: 50px 1fr;
            margin-bottom: 20px;
        }

        .events-box-grid-fix-size {
            width: 12rem;
            height: 5rem;
            margin-top: 13px;
            margin-bottom: 17px;
        }

        .text-display-content-events {
            display: flex;
            font-size: 15px;
            gap: 2rem;
          }

          .textContainer-events {
             font-size: 14px;
          }

          .events-content-2 {
            position: relative;
            padding: 2rem;
            width: 116%;
            height: 100%;
        }

        .event-grid-display {
            display: block;
        }

        .event-picture {
            left: 0rem;
            width: 100%;
            height: 180px;
            overflow: hidden;
            position: relative;
            margin-top: 1rem;
        }

        .emailInput {
            width: 300px;
            border: 0.1px solid #cccccc70;
            border-radius: 7px;
            font-size: 13px;
            margin: 1rem 0rem 1rem 2rem;
        }

        .button-sinscrire-mobile-view {
            margin: 1rem 0rem 2rem 8rem;
        }

        .event-detaille-video-padding {
            padding: 0% 0% 0% 0%;
        }

        .event-detaille-video-size {
            margin: 0rem 0rem 0rem 0rem;
            width: 100%;
        }

        /* =================================PUBLICATION ========================= */

        .pub-image {
            position: relative;
            left: 30px;
            width: 290px; /* Set the desired width of the container */
            height: 190px; /* Set the desired height of the container */
            overflow: hidden;
            border-radius: 2rem;
        }

        .pub-title {
            width: 200px; /* Adjust the width as needed */
                overflow-wrap: break-word;
                word-wrap: break-word;
                word-break: break-word;
                font-size: 20px;
                color: var(--color-black);
        }

        .pub-taste {
            padding-top: 1rem;
                padding-bottom: 1.5rem;
                font-family: var(--font-family);
                color: var(--color-black);
                font-size: 12.5px;
                width: 280px; /* Adjust the width as needed */
                overflow-wrap: break-word;
                word-wrap: break-word;
                word-break: break-word;
        }

        .pub-image-sim {

            position: relative;
            left: 30px;
            width: 250px; /* Set the desired width of the container */
            height: 150px; /* Set the desired height of the container */
            overflow: hidden;
            border-radius: 2rem;
        }

        .pub-title-sim {
            margin: 1rem;
            width: 220px; /* Adjust the width as needed */
                overflow-wrap: break-word;
                word-wrap: break-word;
                word-break: break-word;
                font-size: 13px;
                color: var(--color-black);
        }

        .pub-taste-sim {
            padding-top: 1rem;
                padding-bottom: 1.5rem;
                font-family: var(--font-family);
                color: var(--color-black);
                font-size: 11px;
                width: 200px; /* Adjust the width as needed */
                overflow-wrap: break-word;
                word-wrap: break-word;
                word-break: break-word;
        }

        .pub-image-sim {
            position: relative;
            left: 30px;
            width: 290px; /* Set the desired width of the container */
            height: 190px; /* Set the desired height of the container */
            overflow: hidden;
            border-radius: 2rem;
        }

        .pub-text {
            margin: 5rem 5rem 5rem 5rem;
        }

        .pub-title-sim {
            margin: 1rem;
            width: 260px; /* Adjust the width as needed */
                overflow-wrap: break-word;
                word-wrap: break-word;
                word-break: break-word;
                font-size: 17px;
                color: var(--color-black);
        }

        .pub-taste-sim {
            padding-top: 1rem;
                padding-bottom: 1rem;
                font-family: var(--font-family);
                color: var(--color-black);
                font-size: 11.5px;
                width: 280px; /* Adjust the width as needed */
                overflow-wrap: break-word;
                word-wrap: break-word;
                word-break: break-word;
        }

        .pub-date {
            font-size: 12px;
        }

        .pub-date-sim {
            font-size: 10.5px;
            text-align: left;
        }

        .pub-simillaire {
            font-size: 24px;
            text-align: left;
            padding-left: 105px;
        }

        .pub-img-text {
            padding-right: 20px;
            text-align: center;
        }

        .pub-flex {
            display: block;
            padding: 0rem 0rem 3rem 1rem;
        }

        .pub-lire {
            font-style: italic;
            font-size: 13px;
            margin-right: 370px;
        }

        .pub-contenuecontenue {
            padding-left: 0rem;
        }

        .voir-tout-padding {
            padding: 0rem;
            margin-left: 0%;
        }


        /* =================================SERVICES ========================= */



        .accueil-services-voir-tout-grid {
            display: block;
        }


        .services-voir-tout-grid {
            display: block;
            grid-template-columns: 50% 50%;
        }


        .services-box-grid {
            display: block;
            grid-template-columns: repeat(4, minmax(100px, 1fr));
            gap: 1rem;
        }


        .services-box-grid {
            display: block;
        }

        .services-content-box {
            display: block;
            grid-template-rows: 5rem 9rem 1rem;
        }

        .services-box-grid-2 {
            display: block;
            grid-template-columns: repeat(4, minmax(100px, 1fr));
            gap: 1rem;
        }

        .service-padding {
            padding: 1rem;
        }

        .accueil-services-box-grid {
            display: block;
        }

        .accueil-services-box-grid-fix-size {
            width: 15rem;
            height: 5rem;
        }

        .accueil-services-content {
            text-align: left;
            padding: 1rem;
        }

        .accueil-services-content-box {
            display: block;
        }

        .accueil-services-box-grid-2 {
            display: block;
        }

        .a-propos-accueil-services-box-grid {
            display: block;
        }

        .accueil-services-voir-tout-grid {
            display: block;
            grid-template-columns: 50% 50%;
        }

        /* ------------------------------CONTENUE------------------------------ */


        .contenue-video {
            margin: 5rem 0rem 0rem 0rem;
            width: 95%;
        }

        .contenue-identité-text-content {
            width: 400px;
            word-break: break-all;
            word-wrap: break-word;
        }

        .contenu-image {
            position: relative;
            width: 100%;
            height: 280px; /* Set the desired height of the container */
        }

        .contenue-image-display-right {
        top: 0;
        height: 80%; /* Use the entire height of the container */
        object-fit: cover; /* Crop and scale the image to fit */
        }

          .contenue-a-propos-first {
            display: block;
            padding-bottom: 30px;
        }

        .contenue-title-text {
            padding-left: 0rem;
        }

        .contenu-taste {
            padding-top: 1rem;
                padding-bottom: 1.5rem;
                font-size: 12px;
                width: 390px; /* Adjust the width as needed */
                overflow-wrap: break-word;
                word-wrap: break-word;
                word-break: break-word;
                font-style: italic;
        }

        .iframe-size {
            width: 26rem;
            height: 30rem;
        }


        /* ------------------------------Quiz------------------------------ */


        .quiz {
            margin: 3% 0% 3% 10%;
              width: 80%;
              height: 170%;
            }

        .quiz-answer {
            width: 97%;
        }

        .quiz-text {
            width: 97%;
        }

        .quiz-button-score {
            display: flex;
            gap: 1rem;
        }


            /* ------------------------------Live------------------------------ */


            .button-style-live {
                margin-left: 15px;
            }

            .live {
                margin: 7% 0% 0% 10%;
                border-radius: 20px;
                width: 82%;
                padding-top: 2px;
            }

            .live-indicator sup {
                position: absolute;
                top: 4px;
                left: 42px;
                background-color: red;
                color: rgb(252, 249, 249);
                padding: 7px 5px;
                font-size: 7px;
                border-radius: 50%;
              }

              .live-indicator-formation sup {
                position: absolute;
                bottom: 10px;
                left: 54px;
                background-color: red;
                color: rgb(252, 249, 249);
                padding: 5px 5px;
                font-size: 7px;
                border-radius: 50%;
              }


              .live-indicator-e-learning sup {
                position: absolute;
                top: 4px;
                left: 42px;
                background-color: red;
                color: rgb(252, 249, 249);
                padding: 7px 5px;
                font-size: 7px;
                border-radius: 50%;
              }



            /* ------------------------------A propos------------------------------ */

            .a-propos-services-box-grid {
                display: block;
                grid-template-columns: repeat(3, minmax(420px, 1fr))
            }

            .a-propos-first {
                display: block;
                gap: 2rem;
                padding-bottom: 0px;
            }

            .a-propos-second {
                display: flex;
                gap: 5rem;
                margin: 5rem 0rem 5rem 2rem;
                color: var(--color-black);
            }

            .a-propos-second-detailed {
                display: block;
            }

            .video-box {
                margin: 5rem 0rem 0rem 0rem;
                width: 95%;
            }

            .historique {
                margin-top: 3rem;
                margin-left: 0.5rem;
            }


            /*_________________website-body-2____________________________________*/

            .website-body-2 {
                max-width: 100%;
            }
        }

        @media screen and (max-width: 500px) {
            #section {
                overflow-x: hidden;
                margin-left: 0%;
                margin-right: 0%;
            }            
            .search-mobile-top {
                right: 16%;
            }
            .carousel-new .list-new .content-new {
                top: 0%;
                width: 100%;
                max-width: 80%;
                left: 3%;
                transform: translate(0%);
                padding-right: 0%;
                text-shadow: 0 5px 10px #0004;
                z-index: 100;
            }
            .carousel-new .list-new .content-new .buttons-new {
                display: grid;
                grid-template-columns: repeat(2, 130px);
                grid-template-rows: 40px;
                gap: 5px;
                margin-top: 20px;
            }
            .text-pub-left {
                margin-left: 5%;
            }
            .des-new {
                width: 90%;
            }  
            .cabinet-marc-identité-margin {
                margin: 0; /* Ensure no extra margin pushing out of view */
                box-sizing: border-box; /* Ensures padding is within width */
                width: 100%;
            }     
            .cabinet-marc-identité-text {
                color: var(--color-black);
                font-family: var(--font-family);
                max-width: 100%; /* Prevents overflow */
            }
            .cabinet-marc-identité {
                margin: 0%;
            }
            .text-pub-top-margin {
                margin: 10% 0rem 10% 0rem;
                right: 0;
            }
            #hero {
                margin: 0% 1.5% 0% 1.5%;
            }
            #reviews {
                margin-left: 0%;
                margin-right: 0%;
            }
            .writing-testimony{
                max-width: 100%;
                margin-left: 0%;
                box-shadow: rgb(245, 222, 179) 0px 0px 10px 2px;
            }
            .contact-id {
                margin: 0% 2% 0% 2%;
            }
            .container, .cabinet-marc-identité-margin {
                max-width: 100%;
                overflow-x: hidden;
            }
            .col-12, .col-lg-4, .col-sm-6 {
                max-width: 100%;
            }
            #reviews, #testimonialCarousel, #pub-text {
                overflow-x: hidden;
            }
            .section-title p {
                padding: 0% 0.5% 0% 0.6%;
            }
            .member-width {
                width: 100%;
            }
            .media-display-mobile-img {
                display: visible;
                padding-bottom: 0.35rem;
            }
    
            .image-logo {
                /* border-bottom: 1px solid var(--color-cabinet-marc);  */
                display: block;
                position: fixed;
                top: 0;
                z-index: 999;
                background: var(--color-background);
            }
            .padding-from-top-header {
                margin-top: 20%;
            }    
            .menu-lesson {
                margin: 2% 0% 0% 2.5%;
                display: block;
            }
            .course-aside {
                margin-top: 5rem;
            }
            .top-logo {
                max-width: 95%;
                padding: 1.5% 23% 0% 2%;
            }
            .menu span {
                font-size: 40px;
                padding: 0.5rem 0rem 0rem 0.5rem;
            }
            aside {
                width: 21rem;
            }
        }

        /* .alert {
            position: relative;
            margin-bottom: 1rem;
            padding: 1rem 1rem;
            margin-bottom: 1rem;
            color:  #0a3622;
            border-radius: 0.4rem;
            border: 1px solid #a3cfbba9;
            font-size: 15px;
            text-align: center;
        }

        .alert-success {
            border-color: #0a3622bd;
            background-color: #d1e7dd;
        } */