:root {
    --ff-body: "Roboto", sans-serif;
    --ff-title: "Montserrat", sans-serif;


    --clr-primary: #010221;
    --clr-bleu: #002366;
    --clr-bleu-hover: #314874;
    --clr-orange: #db6c41;
    --clr-orange-hover: #ffa143;
    --clr-turquoise: #4e92b5;
    --clr-turquoise-hover: #61b6d8;
    --clr-bleu-ciel: #f0f3f7;
    --clr-white: #fcfdff;
    --clr-grey: #a6a6a6;
    --clr-grey-bckg: #f2f2f2;
    --clr-white-background: #faf8ff;

}


*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

img,
picture {
    max-width: 100%;
    display: block;
    height: auto;
}

html {
    scroll-behavior: smooth;
}

body {
    text-rendering: optimizeSpeed;
    overflow-x: hidden;
    font-family: var(--ff-body);
    font-size: 1rem;
    line-height: 1.5;
    text-rendering: optimizeSpeed;
    background-color: var(--clr-white-background);
    color: var(--clr-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}



.flex {
    display: flex;
}

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

.grid {
    display: grid;
}

a {
    text-decoration: none;
    color: var(--clr-orange);
    font-weight: 700;
}

a:hover {
    color: var(--clr-orange-hover);
}



q,
blockquote {
    font-style: italic;
}

header,
.header,
section,
.section,
footer,
.footer-bottom,
main {
    width: 100%;
}

/*---------------------LES BOUTONS--------------------*/
.btn-white,
.btn-search {
    background-color: var(--clr-white);
    color: var(--clr-primary);
    border: 1px solid var(--clr-white);
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

.btn-white a {
    color: var(--clr-primary);
}

.btn-white,
.btn-search,
.btn-blue,
#menu-btn {
    padding: 0.55rem 0.5rem;
    border-radius: 0.4em;
    text-align: center;
    max-height: 40px;
}

#menu-btn {
    background-color: var(--clr-bleu);
}

.btn-blue,
.btn,
button {
    background-color: var(--clr-bleu);
    color: var(--clr-white);
}

.btn-blue {
    border: 1px solid var(--clr-bleu);
}

.btn,
.wp-block-button__link {
    display: inline-block;
    text-align: center;
    padding: 0.55rem 1rem;
    border-radius: 0.4em;
    margin: 0.75em 0;
    max-width: fit-content;
    border: none;
    background-color: var(--clr-bleu);
    cursor: pointer;
    transition: all .5s ease;
}

.btn:hover,
.wp-block-button__link:hover {
    background-color: var(--clr-bleu-hover);
    color: var(--clr-white);
}




.form-input-search {
    padding: 0.55rem 0.5rem;
}



/*-----------------------------L'ANCRE------------------------------*/
.btn-arrow {
    display: none;
    background-color: var(--clr-primary);
    text-align: center;
    padding: 0.55rem 1rem;
    border-radius: 0.4em;
    position: absolute;
    right: 5%;
    bottom: 2%;
    position: fixed;
}

.btn-arrow-visible {
    display: inline-block;
}

/*-------------------------------------MAIN------------------------------------*/
main {
    background-color: var(--clr-white);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

section {
    margin: 0;
}

section,
.section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section {
    padding: 1em;
    background-color: var(--clr-white);
}

/*-----------------LES COLONES*/
.col {
    display: grid;
    gap: 1em;
}

/*----------------LES PARAGRAPHES--------------*/
.section p {
    width: 100%;
    text-align: justify;
    margin: 0.5em 0 0.8em;
}

.section blockquote {
    width: 90%;
}

.section blockquote p {
    width: 100%;
    font-weight: 300;
}

strong {
    font-style: italic;
}

/*---------------------------LES TITRES------------*/
h1 {
    font-size: 1.7rem;
}

h2 {
    font-size: 1.5rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--ff-title);
     text-transform: uppercase;
    color: var(--clr-primary);
    width: 100%;
    margin: 1em 0 0.5em;
}

.section h2,
section h2,
.txt-center h3,
.txt-center p {
    text-align: center;
    
}
.h2_border{
    font-size: 1.2rem;
    text-align: center;
    border: 2px solid var(--clr-primary);
    margin: 1.5em 0 1em;
    padding: 0.8em 0;
    border-radius: 0.5em;
    width: 100%
}


p.has-text-align-center,
h2.has-text-align-center,
h3.has-text-align-center,
h4.has-text-align-center h5.has-text-align-center {
    text-align: center;
}

p.has-text-align-right,
h2.has-text-align-right,
h3.has-text-align-right,
h4.has-text-align-right,
h5.has-text-align-right,
h6.has-text-align-right {
    text-align: right;
}

p.has-text-align-left,
h2.has-text-align-left,
h3.has-text-align-left,
h4.has-text-align-left,
h5.has-text-align-left,
h6.has-text-align-left {
    text-align: left;
}

/*---------------------LES LISTES----------------------*/
ul,
ol {
    margin: 0.5em 0 0.8em;
    text-align: justify;
    width: 80%;
}

.wp-block-list li {
    margin: 0.5em 0;
}

/*-----------------------TABLEAU-------------------------------*/
table {
    width: 100%;
    margin: 1em 0;
    padding: 1em 0;
    background-color: var(--clr-white-background);
}


/*---------------BACKGROUND COLORS------------*/
.bckg-blue {
    background-color: var(--clr-primary);
    color: var(--clr-white);
}

.bckg-text {
    border: 1px solid var(--clr-grey-bckg);
}

.bckg-bleu-ciel {
    background-color: var(--clr-bleu-ciel);
}

/*-----------------TXT COLORS*--------------*/
.txt-turquoise {
    color: var(--clr-turquoise);
    font-weight: 700;
}

.txt-orange {
    color: var(--clr-orange);
    font-weight: 700;
}

.txt-gris {
    color: var(--clr-grey);
    font-size: 0.9rem;
    font-style: italic;
}

.small-txt {
    font-style: italic;
    font-size: 0.9rem;
}

.bold-txt {
    font-weight: 800;
}

/**------------------------------------------HEADER---------------------------**/
header {
    width: 100%;
    flex-direction: column;
    align-items: center;
}

.header-top {
    width: 100%;
    gap: 1em;
    padding: 0.3em 1em 0.3em;
    justify-content: space-between;
    align-items: center;
    background-color: var(--clr-bleu);
    color: var(--clr-white);
}

.header-top a {
    color: var(--clr-white);
}

.header-menu-logo {
    gap: 1em;
    padding: 0.5em 0;
    align-items: center;
}

/*-------------------MENU MOBILE----------*/
#menu-btn {
    border: 1px solid var(--clr-white);
}

/*-----------------LE LOGO--------------*/
.logo-container {
    gap: 0.5em;
    align-items: center;
}

.logo-container h1 {
    text-transform: uppercase;
    font-size: 0.7em;
    color: var(--clr-white);
}

.logo-container-img {
    min-width: 90px;
}

.logo-container-img img {
    width: 100%;
    height: 80px;
    object-fit: contain;
}

.btn-search,
#menu-btn {
    min-width: 40px;
}

/*------------------------LE FORMULAIRE DE RECHERCHE----------------*/

.header-menu-form {
    gap: 1em;
    padding: 0.5em 0;
}

.header-menu-form a {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
}

/*-------------------LE MENU PRINCIPAL-------------------*/
.main-nav,
.primary-nav {
    width: 100%;
    background-color: var(--clr-white);
}
.main-nav{
    display: flex;
    flex-direction: column;
}
.primary-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1em 0.5em 1em 1em; 
}

.primary-nav li {
    list-style: none;
}

.primary-nav li a {
    display: inline-block;
    color: var(--clr-primary);
    font-family: var(--ff-title);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
}

.primary-nav .active-link {
    color: var(--clr-turquoise);
    font-weight: 800;
}

/*-------------------------------------------------FOOTER-----------------------------------------*/
footer {
    background-color: var(--clr-bleu);
    color: var(--clr-white);
    padding: 1em 0 0.5em;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1em;
    align-items: center;
}

.footer-nav {
    width: 70%;
    display: flex;
    flex-direction: column;
    padding: 0.5em;
}
.footer-nav h3{
    color: var(--clr-white);
}

footer p {
    font-family: var(--ff-title);
    font-weight: 400;
    font-size: 0.9rem;

}

footer a,
footer a:hover {
    color: var(--clr-white);
}

footer li {
    list-style: none;

}

footer li a {
    display: inline-block;
    font-family: var(--ff-title);
    font-weight: 400;
    text-transform: capitalize;
    font-size: 0.9rem;
}


.footer-bottom {
    border-top: 1px solid var(--clr-white);
    padding: 1em 0;
}

/*-------------------FOOTER MENU-------------------*/
.footer-menu,
.footer-formations {
    margin: 0;
}


/*---------------------------------------------PAGE GENERIQUE-----------------------**/
.page-header {
    width: 100%;
    min-height: 350px;
    padding: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: var(--clr-bleu-ciel);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.page-header h1,
.page-header-formation h1,
.page-header-san h1 {
    padding: 1em 0;
    width: 100%;
    text-transform: uppercase;
    text-align: center;
    background-color: var(--clr-white);
}

.page-header-san {
    width: 100%;
    min-height: 150px;
    padding: 1em 0;
    background-color: var(--clr-bleu-ciel);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.page-header-san h1 {
    background-color: var(--clr-bleu-ciel);
}
.page h2{
    font-size: 1.2rem;
    text-align: center;
    border: 2px solid var(--clr-primary);
    margin: 1.5em 0 1em;
    padding: 0.8em 0;
    border-radius: 0.5em;
    width: 100%;
} 

.page h3,
.page h4,
.page h5 {
    text-decoration: 1px solid underline var(--clr-primary);
    text-underline-offset: 0.5em;
}

.page h4,
.page h5 {
    color: var(--clr-bleu);
}

/*----------------------------------------PAGE FORMATIONS---------------------------*/
.page-header-formation {
    width: 100%;
    min-height: 350px;
    padding: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: var(--clr-bleu-ciel);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.formation-section h2 {
    font-size: 1.2rem;
    text-align: center;
    border: 2px solid var(--clr-primary);
    margin: 1.5em 0 1em;
    padding: 0.8em 0;
    border-radius: 0.5em;
    width: 100%;
}

.formation-section h3 {
    width: 100%;
    margin: 1em 0 0;
    font-size: 1.1rem;
}

.formation-section h4 {
    width: 80%;
    color: var(--clr-bleu);
    font-size: 1rem;
    margin: 1em 0 0.5em;
}

.formation-section h5 {
    color: var(--clr-bleu);
}

.nav-formations {
    width: 100%;
    padding: 0.5em 0;
    text-align: center;
}

.nav-formations a {
    font-weight: 800;
    font-family: var(--ff-title);
    font-size: 0.9rem;

}

.info-cours {
    border: 1px solid var(--clr-primary);
    width: 100%;
    padding: 1.5em 1em 1em;
    margin: 1em 0;
}



/*----------------------------------------PAGE NOS FORMATEURS----------------------*/
.page-profs {
    width: 100%;
    display: grid;
    gap: 1em;
    margin: 1em 0;
}

.page-profs ul {
    width: 100%;
    padding: 0.5em;
}

.page-profs ul li {
    list-style: circle;
    text-align: left;
}

.page-profs h3 {
    font-size: 1.1rem;
    color: var(--clr-turquoise);
}

.page-profs h4 {
    font-size: 1rem;
}

.page-profs h2 {
    text-decoration: 1px solid var(--clr-primary) underline;
    text-underline-offset: 0.5em;
}

/*----------------------------------------PAGE ARCHIVE----------------------*/
.archive-header {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
}

.archive-header h1 {
    text-align: center;
}

.archive-container {
    width: 100%;
}

.archive-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1em 0 0;
    padding: 1em;
    background-color: var(--clr-white-background);
}

.archive-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.archive-body {
    margin: 1em 0;
}

/*---------------------------------------PAGE SINGLE------------------*/
.single-header {
    width: 100%;
    min-height: 350px;
    padding: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: var(--clr-bleu-ciel);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.single-header h1 {
    padding: 1em 0;
    width: 100%;
    text-transform: uppercase;
    text-align: center;
    background-color: var(--clr-white);
}

.blog-post-footer {
    width: 100%;
    margin: 1em;
    gap: 1em;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-style: italic;
    color: var(--clr-primary);
}

.categorie-blog-post a,
.date-blog-post {
    font-weight: 600;
}

.btn-prev-next {
    width: 100%;
    margin: 1em 0;
    display: flex;
    justify-content: space-between;
}

/*------------------------------------------------------PAGE FAQ-----------------------------------------*/
.faq-container {
    width: 90%;
    padding: 1em 0;
}

details {
    background-color: var(--clr-white);
    color: var(--clr-primary);
    margin: 0 0 1em;
    border: 1px solid var(--clr-primary);
    box-shadow: 5px 10px 8px var(--clr-grey);
}

summary {
    padding: .5em 1.3rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    transition: height 1s ease;
}

summary::-webkit-details-marker {
    display: none;
}

summary:after {
    content: "\002B";
    color: var(--clr-turquoise);
}

details[open] summary {
    border-bottom: 1px solid var(--clr-primary);
    margin-bottom: .5em;
}

details[open] summary:after {
    content: "\00D7";
    color: var(--clr-turquoise);
}

details[open] div {
    padding: .5em 1em;
}


/*-------------------------------------------------------PAGE CONTACT-------------------------------*/

/*-------------------------FORMULAIRE-------------*/
/* Style inputs with type="text", select elements and textareas */
input[type=text],
input[type=email],
select,
textarea {
    width: 95%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
    background-color: var(--clr-turquoise);
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
    background-color: var(--clr-primary);
}

/* Add a background color and some padding around the form */
.form-container {
    width: 100%;
    margin: 2em 0;
    border-radius: 5px;
    background-color: var(--clr-bleu-ciel);
    padding: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}
.form-container form{
    width: 100%;
    padding: 0 0.5em;
}


/*-------------------------------------------------PAGE HOME----------------------------*/
.hero-section{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60svh;
}
.hero-section,
.carousel {
    padding: 0;
    width: 100%;
}
/*---------------------CAROUSSEL--------------------*/
.carousel-inner {
    width: 100%;
    padding: 0;
    position: relative;
}

.carousel-item {
    width: 100%;
    min-height: 250px;
    padding: 1em;
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-origin: padding-box;
    background-color: var(--clr-bleu-ciel);  
}

.slide-active {
    display: flex;
    animation: fade 0.8s;
}

@keyframes fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.carousel-text {
    width: 90%;
    padding: 1.5em;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.carousel-text h3,
.carousel-text p {
    text-align: center;
     margin-bottom: 1em;
}

/*-------------LES BOUTONS NEXT ET PREVIEW*/
/* Next & previous buttons */
.carousel-inner .prev,
.carousel-inner .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: var(--clr-white);
    background-color: var(--clr-primary);
    font-weight: bold;
    font-size: 18px;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.carousel-inner .next {
    right: 0;
    border-radius: 3px 0 0 3px;
}



/*-------------------------------SECTION BIENVENUE---------*/
.section-bienvenue,
.section-home-news {
    padding: 2em 0;
}

.section-home-news .section{
    width: 90%;
}



/*--------------SECTION FORMATIONS--------------*/
.section-home-formations {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/*-----------------------MENU FORMATIONS------------*/
.menu-formations {
    width: 100%;
    padding: 1em 0;
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(2, 1fr);
}

.menu-formations li {
    list-style: none;
    text-align: center;
    padding: 1em 0;
    border: 2px solid var(--clr-turquoise);

}

.menu-formations a {
    text-align: center;
    max-width: fit-content;
    border: none;
    cursor: pointer;
    color: var(--clr-turquoise);
}

/*------------SECTION TEMOIGNAGES---------------*/
.section-testimonials {
    padding: 1.5em 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--clr-bleu-ciel);
}

.testimony-slide {
    width: 80%;
    background-color: var(--clr-white-background);
}

.slider-container {
    width: 100%;
    overflow: hidden;
}

.testimony-inner {
    display: flex;
    margin: 1em 0;
    animation: slider-1 80s infinite ease-in-out;
}

.testimony-item {
    flex-shrink: 0;
    width: 100%;
    padding: 1em 0.5em;

}

.testimony-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.testimony-text p {
    width: 100%;
    text-align: center;
}

.section-testimonials h3 {
    text-align: center;
    color: var(--clr-bleu);
}


/*------------------animation slider hero------*/
/* 
            5% par transition, nombre choisi arbitrairement.
            6 slides * 5 % = 30 %

            reste divisé par nb de pauses
            70(%) / 6 = 11,5(%) par pause

            */

@keyframes slider-1 {

    0%,
    12% {
        transform: translateX(0);
    }

    17%,
    29% {
        transform: translateX(-100%);
    }

    34%,
    46% {
        transform: translateX(-200%);
    }

    51%,
    63% {
        transform: translateX(-300%);
    }

    68%,
    80% {
        transform: translateX(-400%);
    }

    85%,
    97% {
        transform: translateX(-500%);
    }

    100% {
        transform: translateX(-600%);
    }
}










/*---------------------------------------------------------------MOBILE-------------------------------*/

@media screen and (max-width:767px) {
    .btn-arrow {
        display: none;
    }

    header {
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .logo-container h1 {
        display: none;
    }
    .no-scroll {
        overflow: hidden;
      }
   
    .primary-nav {
        display: none;
        gap: 1em;
        padding: 1em 2.5em 3.5em;
        border-top: 1px solid var(--clr-primary);
        animation: vanish 1s ease-in;
    }

    .primary-nav li {
        width: 100%;
    }

    .sub-menu {
        width: 100%;
        margin: 0.5em 0 0;
        display: flex;
        flex-direction: column;
        padding: 0 0.5em 0;
    }

    .sub-menu li::before {
        content: "* ";
        color: var(--clr-turquoise);
    }

    .visible {
        display: flex;
        animation: appear 1s ease-out;
    }

    @keyframes appear {
        from {
            display: none;
            opacity: 0;
            translate: -100%;

        }

        to {
            display: flex;
            opacity: 1;
            translate: 0%;

        }

    }

    @keyframes vanish {
        from {
            display: flex;
            opacity: 1;
            translate: 0%;

        }

        to {
            display: none;
            opacity: 0;
            translate: -100%;
        }

    }


}

/*-------------------------------------------------------------TABLETTE--------------------------------*/
@media screen and (min-width:768px) {
    body {
        font-size: 1.1rem;
    }

    #menu-btn {
        display: none;
    }

    .primary-nav {
        width: 100%;
        max-height: 60px;
        flex-direction: row;
        justify-content: space-around;
        margin: 0;
    }

    .primary-nav li {
        text-align: center;
    }

    ul.sub-menu {
        width: 100%;
        display: none;
        position: relative;
        padding: 0.5em;
        flex-direction: column;
        gap: 1em;
        background-color: var(--clr-white-background);
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1; 
    }

    ul.sub-menu li {
        text-align: left;
    }

    .primary-nav li:hover ul.sub-menu {
        display: flex;
    }

    /*--------------------FOOTER-----------------*/
    .footer {
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        padding: 0 0.5em;
    }

    .footer-nav {
        width: 30%;
        padding: 1em 0;
    }

    .footer-nav p {
        width: 100%;
        text-align: center;
    }

    .footer-nav h3 {
        text-align: center;
    }

    .footer-menu,
    .footer-formations {
        width: 100%;
        text-align: center;
    }

    /*---------------------------MAIN--------------*/
    .section {
        width: 90%;

    }
    .nav-formations {
        width: 90%;
    }

    table {
        width: 80%;
        padding: 1em;
    }

    section h2 {
        width: 80%;
    }

    .col {
        grid-template-columns: repeat(2, 1fr);
    }

    /*---------------------------------------------PAGE GENERIQUE-----------------------**/
    .page-header {
        min-height: 350px;
    }

    .page-header h1,
    .page-header-formation h1,
    .single-header h1 {
        width: 90%;
    }

    /*---------------------------------------------------PAGE NOS FORMATEURS ET ARCHIVES-------------------------*/
    .page-profs {
        width: 80%;
    }

    .archive-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
    }

    .archive-body {
        min-width: 100%;
    }

    .archive-body p,
    .archive-body h4 {
        width: 100%;
    }

    /*------------------------------------------------PAGE CONTACT--------------------------------*/
    .contact-container {
        flex-direction: row;
        align-items: stretch;
        gap: 1em;
    }

    .contact-container div {
        padding: 0.8em 0.5em 0;
    }

    /*-------------------------------------------------------PAGE ARCHIVE----------------------------*/

    .archive-item {
        margin: 1em 0.5em 0;
    }

    .btn-prev-next {
        width: 90%;
    }


    /*-------------------------------------------------------PAGE HOME----------------------------*/
    /*--------------------------------SECTION HERO----------------------*/
    .menu-hero {
        flex-direction: row;
    }
    .carousel-item{
        width: 100%;
        /* height: 450px; */
    }
    .carousel-text{
        width: 80%;
        /* height: 300px; */
    }

    /*-------------------------------SECTION BIENVENUE-------------------*/
    /* .section-bienvenue .section {
        width: 90%;
    } */
    .section-bienvenue .section h2{
        width: 100%;
    }

    



    /*-------------------------------SECTION TEMOIGNAGES--------------*/
    .testimony-slide {
        width: 70%;
    }


}



/*-------------------------------------------------------------DESKTOP---------------------------------*/

@media screen and (min-width:1024px) {
    body {
        font-size: 1.125rem;
    }

    .header,
    .footer,
    main {
        width: 100%;
    }

    /*----------------------------------------NAV BAR------------------------------*/
    .primary-nav li a::after {
        content: "";
        display: block;
        margin: auto;
        height: 2px;
        background: var(--clr-primary);
        width: 0%;
        transition: 0.3s ease-out;
    }

    .primary-nav li a:hover::after {
        border-bottom: 1px solid var(--clr-primary);
        width: 100%;
    }


    /*-------------------------------------------FOOTER-----------------------------*/
    footer li a::after {
        content: "";
        display: block;
        margin: auto;
        height: 2px;
        background: var(--clr-white);
        width: 0%;
        transition: 0.3s ease-out;
    }

    footer li a:hover::after {
        border-bottom: 1px solid var(--clr-white);
        width: 100%;
    }

    /*-----------------------------------------------------MAIN-----------------*/
    .section {
        width: 80%;

    }

    section h2 {
        width: 70%;
    }


    /*---------------------------------------------------PAGE GENERIQUE---------------*/
    .page-header h1,
    .page-header-formation h1,
    .single-header h1 {
        width: 60%;
    }

    /*---------------------------------------------------PAGE FORMATIONS-------------------*/




    /*---------------------------------------------------PAGE NOS FORMATEURS---------------*/
    .page-profs {
        width: 100%;
    }


    /*--------------------------------------------------PAGE CONTACT-----------------------*/
    .contact-text-container {
        width: 80%;
    }

    .form-container {
        width: 80%;
    }

    /*--------------------------------------------------PAGE HOME------------------------*/
    /*------------------------SECTION HERO--------------------*/
    .carousel {
        width: 90%;
    }

    .carousel-inner {
        width: 100%;
    }

    /*----------------------------SECTION HOME FORMATIONS---------------*/
    .section-home-formations {
        flex-direction: row;
        align-items: stretch;
    }

    .home-formation-img {
        padding: 0;
        max-height: 680px;
    }

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

    /*-------------------------------SECTION TEMOIGNAGES--------------*/
    .testimony-slide {
        width: 60%;
    }

}


@media screen and (min-width:1440px) {

    header,
    footer,
    main {
        width: 90%;
    }

   



}

@media screen and (min-width:2300px) {

    header,
    footer,
    main {
        width: 80%;
    }

}