/**************************************************/
/************************FONTS*********************/
/**************************************************/
/*#region*/
/* noto-sans-300 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/noto-sans-v39-latin-300.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-sans-regular - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/noto-sans-v39-latin-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-sans-500 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/noto-sans-v39-latin-500.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-sans-600 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/noto-sans-v39-latin-600.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-sans-700 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/noto-sans-v39-latin-700.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-sans-800 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/noto-sans-v39-latin-800.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/*#endregion*/
/**************************************************/
/**********************VARIABLES*******************/
/**************************************************/
/*#region*/
:root {
    --Black: #000000;
    --White: #FFFFFF;
    --blue: #262B40;
    --blue-light: #1F2E5E;
    --BG-blue: #DDDDED;
    --blue-extra-light: #73709B;
}

/*#endregion*/
/**************************************************/
/***********************GLOBAL*********************/
/**************************************************/
/*#region*/
main {
    background-color: #F4F4F4;
    position: relative;
}

html h1 {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 300;
    font-size: 24px;
    line-height: 36px;
    color: var(--White);
}

html h2 {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 36px;
    color: var(--blue-light);
}

html h3 {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: var(--White);
}

html p {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: var(--Black);
}

html a {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: var(--White);
    text-decoration: none;
}

.container {
    margin-inline: 1rem;
}

/* Style pour les liens */
.access-links {
    position: absolute;
    left: -99999px;
    max-width: max-content;
    z-index: 99999;
}

.access-links a {
    color: var(--Black);
    text-decoration: none;
    font-family: 'Recia';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.access-links:focus-within {
    left: 10px;
    position: relative;
}

@media screen and (min-width: 426px) {
    html h1 {
        font-size: 36px;
        line-height: 54px;
    }

    html h2 {
        font-size: 24px;
        line-height: 36px;
    }

    html h3 {
        font-size: 20px;
        line-height: 30px;
    }

    html p {
        font-size: 16px;
        line-height: 24px;
    }

    .container {
        margin-inline: 3rem;
    }
}

@media screen and (min-width: 769px) {
    html h1 {
        font-size: 64px;
        line-height: 96px;
    }

    html h2 {
        font-size: 36px;
        line-height: 54px;
    }

    html h3 {
        font-size: 24px;
        line-height: 30px;
    }

    html p {
        font-size: 16px;
        line-height: 24px;
    }

    .container {
        margin-inline: 3rem;
    }

    html {
        scroll-behavior: smooth;
    }

    .btn_1 {
        transition: all 0.5s ease-in-out;
    }

    .btn_1:hover {
        box-shadow: 0 0 45px rgba(0, 0, 0, 0.4);
    }

}

@media screen and (min-width: 1025px) {
    html h1 {
        font-size: 64px;
        line-height: 96px;
    }

    html h2 {
        font-size: 48px;
        line-height: 72px;
    }

    html h3 {
        font-size: 24px;
        line-height: 30px;
    }

    html p {
        font-size: 16px;
        line-height: 24px;
    }

    .container {
        margin-inline: 3rem;
    }

    html {
        scroll-behavior: smooth;
    }
}


@media screen and (min-width: 769px) {
    .container {
        margin-inline: 6rem;
    }
}

/*#endregion*/
/**************************************************/
/***********************LAYOUT*********************/
/**************************************************/
/*#region*/
/** Skiplinks **/
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    z-index: 99999;
}

/* Style pour les liens */
nav.access-links {
    position: absolute;
    left: -99999px;
    max-width: max-content;
}

nav.access-links:focus-within {
    left: 0;
}

/**********Scroll up***********/
#scroll_up {
    display: none;
}

#scroll_up:hover {
    cursor: pointer;
}

@media screen and (min-width: 426px) {
    #scroll_up {
        display: block;
        position: absolute;
        right: 2rem;
        bottom: 1rem;
        z-index: 50000;
    }
}

@media screen and (min-width: 769px) {
    #scroll_up {
        right: 5rem;
        bottom: 5rem;
    }
}

/*#endregion*/
/**************************************************/
/***********************HEADER*********************/
/**************************************************/
/*#region*/
header {
    background-color: var(--blue);
    height: 6rem;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    height: 100%;
}

header .container img {
    width: 4.3rem;
    height: 4.3rem;
    position: relative;
    z-index: 10001;
}

header .container .nav-bar .burger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: fixed;
    top: 1.6rem;
    right: 2rem;
    z-index: 1100;
    gap: 5px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
}

header .container .nav-bar .burger .burger-bar {
    width: 30px;
    height: 5px;
    background: var(--White);
    border-radius: 3px;
}

.nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2.4rem;
    width: 80%;
    height: 100vh;
    position: fixed;
    z-index: 1000;
    left: 100%;
    transition: ease-in-out 300ms;
    top: 0;
    right: 0;
    padding-left: 3.4rem;
    background-color: var(--blue-light);
    z-index: 1010;
}



.nav-links a {
    color: var(--White);
    text-align: start;
    text-decoration: none;
    font-family: 'noto-sans', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.nav-links.open {
    transform: translateX(-100%);
}

.burger.open .burger-bar:nth-child(1) {
    transform: translateY(5px) rotate(45deg)
}

.burger.open .burger-bar:nth-child(2) {
    display: none;
}

.burger.open .burger-bar:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

.search-form {
    display: flex;
    align-items: center;
    max-width: 300px;
    border-bottom: 1px solid var(--White);
}

.search-field {
    flex: 1;
    padding: 8px 10px;
    background-color: transparent;
    border: 0;


    outline: none;
}

.search-submit {
    padding: 8px 15px;
    border: none;
    background-color: transparent;
    color: white;
    cursor: pointer;
}

form {
    position: relative;
    z-index: 5000;
}

.lang-switcher-desktop {
    display: none;
}

.rtl .nav-links {
    right: 100%;
    left: 0;
    align-items: flex-end;
}

.rtl header .container .nav-bar .burger {
    right: auto;
    left: 2rem;
}

.rtl .nav-links.open {
    transform: translateX(100%);
}

.rtl .lang-switcher-mobile {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/***************************/
/***********Media***********/
/***************************/
@media screen and (min-width: 426px) {


    header .container .nav-bar .burger {
        right: 6%;
    }


}

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

    header {
        height: 11rem;
    }

    header .container img {
        width: 7.8rem;
        height: 7.8rem;
    }

    header .container {
        height: 10rem;
        margin: 0;
        width: 100%;
    }

    .nav-links {
        left: 0;
        flex-direction: row;
        position: absolute;
        height: 11rem;
        background-color: transparent;
        align-items: center;
        gap: 2.5rem;
    }

    .nav-links a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 44px;
        position: relative;
    }


    .menu-item-24 a::after,
    .menu-item-25 a::after,
    .menu-item-26 a::after,
    .menu-item-27 a::after {
        content: '';
        display: block;
        width: 3rem;
        height: 1px;
        background-color: var(--White);
        position: absolute;
        bottom: 5px;
        left: 50%;
        transform: translateX(-50%);
        transition: width 0.3s ease-in-out;
    }

    .menu-item a:hover::after {
        width: 5rem;
    }

    .nav-links .search-in-menu {
        order: 100;
        /* met la recherche à la fin */
    }

    .search-field {
        width: 0;
    }

    .search-field:focus {
        width: 100%;
        border-bottom: 1px solid var(--White);
    }

    header .container .nav-bar .burger {
        display: none;
    }

    .search-submit {
        border: 1px solid var(--White);
        border-radius: 50px;
    }

    .search-form {
        border-bottom: 0;

    }

    .lang-switcher-mobile {
        display: none;
    }

    .lang-switcher {
        border: 1px solid var(--White);
        padding: 9px 11px 9px 27px;
        border-radius: 26px;
        width: 174px;
        display: flex;
        gap: 1rem;
        margin-right: 6.1rem;
    }

    .lang-switcher select {
        width: 80px;
        height: 30px;
        font-family: 'noto-sans', sans-serif;
        color: var(--White);
        font-size: 2rem;
        border: none;
        background-color: transparent;
        appearance: none;
        -webkit-appearance: none;
        /* Safari/Chrome */
        -moz-appearance: none;
        /* Firefox */
    }

    .lang-switcher option {
        background-color: var(--White);
        color: var(--Black);
        width: 147px;
        font-size: 1.6rem;
        border-radius: 20px;
        text-align: center;
    }

    .lang-switcher-mobile {
        display: none;
    }

    .rtl .nav-links {
        right: 0;
        left: 0;
        align-items: center;
    }

    .rtl .lang-switcher-mobile {
        display: none;

    }

}

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

    .nav-links a {
        justify-content: center;
        width: 124px;

    }
}

/*#endregion*/
/**************************************************/
/***********************Footer*********************/
/**************************************************/
/*#region*/
footer {
    display: grid;
    grid-template-areas:
        "logo"
        "nav"
        "ecole"
        "reseaux";
    background-color: var(--blue);
    padding: 4.4rem 1rem 5.6rem 1rem;

}

footer .logo {
    grid-area: logo;

}

footer .logo img {
    width: 7.8rem;
    height: 7.8rem;
}

footer .footer-nav {
    grid-area: nav;
    display: flex;
    flex-direction: column;
    gap: 1.7rem;
    margin-top: 5.3rem;
}

footer .footer-nav .nav-class .menu-item a {
    text-align: start;
}

footer .logo-ecole {
    grid-area: ecole;
    padding-inline: 1.581rem;
    margin-top: 6.6rem;
}

footer .logo-ecole .item-list {
    display: flex;
    gap: 4.6rem;
    flex-wrap: wrap;
    justify-content: center;
}

footer .reseaux-logo {
    grid-area: reseaux;
    margin-top: 10rem;
}

footer .reseaux-logo nav .icone-list {
    display: flex;
    justify-content: center;
    gap: 1.7rem;
}

/***************************/
/***********Media***********/
/***************************/
@media screen and (min-width: 426px) {
    footer {
        grid-template-areas:
            "logo"
            "nav"
            "ecole"
            "reseaux";
        justify-items: center;
    }

    footer .footer-nav {
        flex-direction: row;
        justify-content: center;
    }

    footer .logo img {
        width: 10rem;
        height: 10rem;
    }

    @media screen and (min-width: 769px) {
        footer {
            grid-template-areas:
                "logo ecole reseaux"
                "logo nav reseaux";
            align-items: start;
        }

        footer .logo img {
            width: 13.7rem;
            height: 13.7rem;
        }

        footer .reseaux-logo {
            margin-top: 0;
        }

        footer .footer-nav {
            margin-top: 1.2rem;
        }

        footer .logo-ecole {
            margin-bottom: 10rem;
            margin-top: 0;
        }

        footer .footer-nav {
            display: flex;
            gap: 5rem;
        }
    }
}

/*#endregion*/
/**************************************************/
/***********************Accueil********************/
/**************************************************/
/*#region*/
/************************Héro**********************/
main .hero.home h1 {

    text-align: center;
    padding-inline: 8rem;
    padding-top: 5.3rem;
    width: 100%;
    z-index: 1001;
}

main .hero.home .background-color {
    background-color: #00000091;
    width: 100%;
    height: 31.8rem;
    z-index: 1000;
    position: absolute;
}

main .hero.home {
    display: flex;
    justify-content: center;
    height: 31.8rem;
    width: 100%;
}

main .hero.home .scroll-down {
    display: none;
}

main .hero.home .embleme {
    display: none;
    z-index: 1001;
}

/**********************Présentation*******************/
main .presentation .container {
    display: grid;
    grid-template-areas:
        "logo"
        "titre"
        "texte"
        "cta"
        "image";
    justify-items: center;
    gap: 1.8rem;
}

main .presentation .container .logo {
    grid-area: logo;
    width: 10.3rem;
    height: 10.3rem;
    margin-top: 1.1rem;
}

main .presentation .container h2 {
    grid-area: titre;
}

main .presentation .container p {
    grid-area: texte;
}

main .presentation .container .cta_presentation {
    grid-area: cta;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 31.3rem;
    height: 5.4rem;
    background-color: var(--blue-light);
    color: var(--White);
    border-radius: 2rem;
    border: none;

}

main .presentation .container .image_de_presentation {
    grid-area: image;
    width: 100%;
    height: 31.3rem;
    border-radius: 20px;
    object-fit: cover;
    margin-bottom: 3.9rem;
}

/********************Card-description******************/
main .description .container {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

main .description .container .card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 42.6rem;
    height: 33.8rem;
    padding: 2.4rem 4.2rem 2.4rem 4.2rem;
    box-shadow: 0 0 4px rgba(0, 0, 15, 0.15);
    gap: 2.7rem;
    border-radius: 2.4rem;

}

main .description .container h2 {
    width: 100%;
    text-align: center;
}

main .description h3 {
    color: var(--Black);
    font-size: 24px;
}

main .description h3::after {
    content: '';
    display: block;
    width: 113px;
    height: 8px;
    background-color: red;
    margin-top: 2.7rem;
}

/********************Nos solutions******************/
main .solutions .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3.7rem;
    margin-top: 3.9rem;
}

main .solutions .container .vignettes-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3.7rem;
}

main .solutions .container h3 {
    color: var(--Black);
}

main .solutions .container .vignette-solution {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.2rem;

}



main .solutions .container .vignette-solution h3 {
    text-align: center;
    width: 100%;
    max-width: 25rem;
}

main .solutions .container .btn-ecole {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 20.5rem;
    height: 5.4rem;
    background-color: var(--blue-light);
    color: var(--White);
    border-radius: 2rem;
    border: none;
}

/********************Touraine******************/
main .touraine .container {
    display: grid;
    grid-template-areas:
        "titre"
        "image"
        "texte"
        "btn";
    justify-items: center;
    align-items: center;
    gap: 3.9rem;
    margin-top: 3.9rem;
}

main .touraine .container img {
    border-radius: 2rem;
    grid-area: image;
}

main .touraine .container p {
    grid-area: texte;
}

main .touraine .container h2 {
    grid-area: titre;
}

main .touraine .container .btn-touraine {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 36.2rem;
    height: 5.4rem;
    background-color: transparent;
    border-radius: 2rem;
    border: 1px solid var(--blue-light);
    margin-bottom: 7.9rem;
    color: var(--blue-light);
    grid-area: btn;
}

/********************Article-blog******************/
main .section-blog .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3.7rem;
}

main .section-blog .container .articles {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3.7rem;
}

main .section-blog .container .articles article {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

main .section-blog .container .articles article a img {
    width: 100%;
    height: 20rem;
    border-radius: 2rem;
    object-fit: cover;
}

main .section-blog .container .articles article h3 a {
    color: var(--Black);
}

/********************Partenaires******************/
main .partenaires {
    background-color: var(--blue-light);
}

main .partenaires .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12.4rem;
    height: 100%;
    padding-bottom: 13.5rem;
}

main .partenaires .container h2 {
    color: var(--White);
    margin-top: 6.3rem;
}

main .partenaires .container .galerie_partenaires {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 9.7rem;
}

/***************************/
/***********Media***********/
/***************************/

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

    /************************Héro**********************/
    main .hero.home {
        height: 42rem;
    }

    main .hero.home h1 {
        font-size: 3.6rem;
    }

    main .hero.home .background-color {
        height: 42rem;
    }


    /**********************Présentation*******************/
    main .presentation .container .image_de_presentation {
        width: 50%;
        height: 31.3rem;
        object-fit: cover;
    }



    /********************Card-description******************/
    main .description .container {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 2.4rem;
    }

    /********************Partenaires******************/

    main .partenaires .container .galerie_partenaires {
        display: flex;
        flex-direction: row;
        gap: 5rem;
        flex-wrap: wrap;
    }
}

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

    /************************Héro**********************/
    main .hero.home {
        height: 76.4rem;

    }

    main .hero.home .background-color {
        height: 76.4rem;
        width: 100%;
    }

    main .hero.home .scroll-down {
        display: block;
        z-index: 10001;
        position: absolute;
        top: 71.2rem;
    }

    main .hero.home .scroll-down:hover {
        cursor: pointer;
        transform: translateY(1rem);
        transition: all 0.3s ease-in-out;

    }

    main .hero.home .embleme {
        display: block;
        width: 9.166rem;
        height: 6.9rem;
        position: absolute;
        top: 18rem;

    }

    main .hero.home h1 {

        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 6.4rem;
        line-height: 9.6rem;
        text-align: center;

    }

    /**********************Présentation*******************/
    main .presentation .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "logo   image"
            "titre  image"
            "texte  image"
            "cta    image";
        justify-items: start;
        align-items: center;
        gap: 1.8rem;
        margin-block: 9rem;
    }

    main .presentation .container p {
        text-align: start;
        width: 100%;
        max-width: 50rem;
    }

    main .presentation .container .image_de_presentation {
        width: 100%;
        height: 50rem;
        object-fit: cover;
    }


    /********************Nos solutions******************/
    main .solutions .container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 3.7rem;
        margin-top: 3.9rem;
    }

    main .solutions .container .vignettes-container {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        padding-inline: 2rem;
    }

    main .solutions .container .vignettes-container .vignette-solution h3 {
        height: 13rem;
    }


    /********************Touraine******************/
    main .touraine .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "image  titre"
            "image  texte"
            "image  btn";
        justify-items: start;
    }

    main .touraine .container img {
        width: 64.9rem;
        height: 45.9rem;
    }

    main .touraine .container h2 {
        margin-top: 5rem;
    }

    main .touraine .container p {
        margin-top: 4rem;
    }

    main .touraine .container a {
        margin-top: 4rem;
    }

    /********************Article-blog******************/
    main .section-blog .container .articles {
        display: flex;
        flex-direction: row;
    }



}

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

    /************************Héro**********************/
    main .hero.home h1 {
        padding-inline: 37rem;
    }

    /**********************Présentation*******************/
    main .presentation .container .image_de_presentation {
        height: 65rem;

    }

    /********************Card-description******************/
    main .description .container {
        gap: 2.1rem;
    }

    /********************Touraine******************/
    main .touraine .container {
        margin-bottom: 12.4rem;
    }

    main .touraine .container img {
        width: 100%;
        height: 67.9rem;
    }

    main .touraine .container h2 {
        margin-top: 6.6rem;
    }

    main .touraine .container p {
        margin-top: 8.5rem;
    }

    main .touraine .container a {
        margin-top: 8.5rem;
        margin-bottom: 9.1rem;
    }


}

/*#endregion*/
/**************************************************/
/***********************A propos*******************/
/**************************************************/
/*#region*/

/*******************Qui sommes nous****************/
main .qui_sommes_nous .container {
    display: grid;
    grid-template-areas:
        "titre"
        "texte1"
        "texte2"
        "image";

}

main .qui_sommes_nous .container .titre {
    grid-area: titre;
    color: var(--blue-light);
    font-weight: 800;
    margin-block: 3.6rem;
}

main .qui_sommes_nous .container .texte_principal {
    grid-area: texte1;
    margin-bottom: 3.6rem;
    font-weight: 500;
}

main .qui_sommes_nous .container .texte_secondaire {
    grid-area: texte2;
    position: relative;
    color: var(--White);
    font-size: 2rem;
    line-height: 3rem;
    font-weight: 600;
    background-color: var(--blue-extra-light);
    border-radius: 2rem;
    margin-bottom: -4rem;
    padding: 4rem 1.5rem 6rem 1.5rem;
    z-index: 1;
}

main .qui_sommes_nous .container img {
    grid-area: image;
    width: 100%;
    border-radius: 2rem;
    z-index: 2;
    margin-bottom: 6rem;
}

/**********************Media*******************/
@media screen and (min-width: 426px) {
    main .qui_sommes_nous .container {
        display: grid;
        grid-template-areas:
            "titre  titre"
            "texte1 texte1"
            "texte2 image";
        grid-template-columns: 1fr 1fr;
        align-items: start;
        margin-bottom: 3.6rem;
    }

    main .qui_sommes_nous .container .texte_secondaire {
        border-radius: 2rem;
        padding: 2rem 4rem 1.5rem 2rem;
        background-color: var(--BG-blue);
        color: var(--Black);
        font-size: 1.6rem;
        margin-bottom: 0;
        margin-right: -3rem;
    }

    main .qui_sommes_nous .container img {
        margin-bottom: 0;
        height: 100%;
    }

}

@media screen and (min-width: 769px) {
    main .qui_sommes_nous .container {
        display: grid;
        grid-template-areas:
            "titre  image"
            "texte1 image"
            "texte2 image";
        grid-template-columns: 1fr 1fr;
        align-items: start;
        margin-bottom: 3.2rem;
        padding-top: 12rem;
    }

    main .qui_sommes_nous .container .titre {
        font-weight: 300;
    }

    main .qui_sommes_nous .container .texte_secondaire {
        font-size: 2rem;
        line-height: 3rem;
    }
}

@media screen and (min-width: 1025px) {
    main .qui_sommes_nous .container .texte_secondaire {
        font-size: 2.4rem;
        line-height: 3.6rem;
        padding: 3.5rem 4rem 3.5rem 2rem;
    }

    main .qui_sommes_nous .container .texte_principal {
        max-width: 53.7rem;
    }
}

/*******************Nos écoles****************/
main .a_propos_ecoles .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6rem;
    margin-bottom: 3.6rem;

}

main .a_propos_ecoles .container .titre {
    text-align: start;
    width: 100%;
}

main .a_propos_ecoles .container .card-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4rem;
}

main .a_propos_ecoles .container .card-container .card_a_propos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

main .a_propos_ecoles .container .card-container .card_a_propos .big {
    width: 20.9rem;
    height: 20.9rem;
    border-radius: 100%;
}

main .a_propos_ecoles .container .btn-ecoles {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--blue-light);
    padding: 1.9rem 1.5rem 1.9rem 1.5rem;
    border-radius: 2rem;
    font-weight: 700;

}

main .a_propos_ecoles .container .card-container .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
}

/**********************Media*******************/
@media screen and (min-width: 426px) {
    main .a_propos_ecoles .container .card-container {
        flex-direction: row;
        flex-wrap: wrap;
        height: 100%;
    }

    main .a_propos_ecoles .container .btn-ecoles {
        margin-inline: 10rem;
    }
}

@media screen and (min-width: 769px) {
    main .a_propos_ecoles .container .btn-ecoles {
        padding: 1.5rem 5rem 1.5rem 5rem;
    }
}

/*******************Pourquoi FLE****************/
main .pourquoi_fle {
    background-color: var(--BG-blue);
    padding-bottom: 4rem;
}

main .pourquoi_fle .container {
    display: grid;
    grid-template-areas:
        "titre"
        "image"
        "texte1"
        "texte2";

}

main .pourquoi_fle .container .titre {
    grid-area: titre;
    color: var(--blue-light);
    font-weight: 800;
    margin: 1.4rem 10rem 3.6rem 0;
}

main .pourquoi_fle .container .texte_principal {
    grid-area: texte1;
    margin-bottom: 3.6rem;
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 2.4rem;
    max-width: 53.7rem;
}

main .pourquoi_fle .container .texte_secondaire {
    grid-area: texte2;
    font-size: 2rem;
    line-height: 3rem;
}

main .pourquoi_fle .container img {
    grid-area: image;
    width: 100%;
    border-radius: 2rem;
    margin-bottom: 4.5rem;
}

/**********************Media*******************/

@media screen and (min-width: 769px) {
    main .pourquoi_fle {
        padding-block: 9.4rem 8.7rem;
    }

    main .pourquoi_fle .container {
        display: grid;
        grid-template-areas:
            "titre  image"
            "texte1 image"
            "texte2 image";
        grid-template-columns: 1fr 1fr;
        align-items: center;

    }

    main .pourquoi_fle .container .texte_principal {
        padding-right: 2rem;
    }

    main .pourquoi_fle .container .texte_secondaire {
        font-weight: 500;
    }

    main .pourquoi_fle .container img {
        margin-bottom: 0;
        max-width: 64.9rem;
    }
}

/*******************Le label FLe****************/
main .le_label_fle .container {
    display: grid;
    grid-template-areas:
        "titre"
        "image"
        "texte";
}

main .le_label_fle .container .titre {
    grid-area: titre;
    padding-bottom: 2.8rem;
}

main .le_label_fle .container img {
    grid-area: image;
    border-radius: 2rem;
    padding-bottom: 3.6rem;
}

main .le_label_fle .container .texte {
    grid-area: texte;
    padding-bottom: 5.2rem;
}

/**********************Media*******************/
@media screen and (min-width: 426px) {
    main .le_label_fle {
        padding-block: 4.2rem;
    }

    main .le_label_fle .container {
        display: grid;
        grid-template-areas:
            "image titre"
            "image texte";
    }

    main .le_label_fle .container .titre {
        padding-bottom: 2rem;
    }

    main .le_label_fle .container img {
        padding-bottom: 0;
        padding-right: 2rem;
    }

    main .le_label_fle .container .texte {
        padding-bottom: 0;
    }
}

/*******************Arriver en France****************/
main .arriver_france {
    background-color: var(--BG-blue);
}

main .arriver_france .container {
    display: grid;
    grid-template-areas:
        "titre"
        "image"
        "texte"
        "btn";
    justify-items: center;
}

main .arriver_france .container .titre {
    grid-area: titre;
    padding-block: 6.1rem 4.9rem;
}

main .arriver_france .container img {
    grid-area: image;
}

main .arriver_france .container .texte {
    grid-area: texte;
    padding-block: 4.8rem 3.6rem;
}

main .arriver_france .container .btn {
    display: flex;
    flex-direction: column;
    grid-area: btn;
}

main .arriver_france .container .btn .btn-region {
    padding-block: 1.5rem;
    border-radius: 2rem;
    border: 1px solid var(--blue-light);
    color: var(--blue-light);
    font-weight: 400;
    margin-bottom: 2.2rem;
    text-align: center;
    width: 30rem;

}

main .arriver_france .container .btn .btn-hebergement {
    padding-block: 1.5rem;
    border-radius: 2rem;
    background-color: var(--blue-light);
    margin-bottom: 9.2rem;
    text-align: center;
    width: 30rem;

}

/**********************Media*******************/
@media screen and (min-width: 426px) {
    main .arriver_france .container {
        display: grid;
        grid-template-areas:
            "titre      image"
            "texte      image"
            "btn        btn ";
        grid-template-columns: 1fr 1fr;
        padding-block: 10rem;
    }

    main .arriver_france .container .btn .btn-hebergement,
    main .arriver_france .container .btn .btn-region {
        margin-bottom: 0;
        margin-top: 5rem;
    }

    main .arriver_france .container .btn {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2rem;
    }

    main .arriver_france .container .titre {
        padding-block: 0rem 4.9rem;
    }

    main .arriver_france .container .texte {
        padding-block: 0rem 3.6rem;
    }

}

@media screen and (min-width: 769px) {
    main .arriver_france .container {
        display: grid;
        grid-template-areas:
            "titre  image"
            "texte  image"
            "btn    btn";
        grid-template-columns: 1fr 1fr;
        padding-block: 10rem;
    }

    main .arriver_france .container .btn .btn-hebergement,
    main .arriver_france .container .btn .btn-region {
        margin-bottom: 0;
    }

    main .arriver_france .container .texte {
        padding: 0rem 4rem 3.6rem 0;
    }

    main .arriver_france .container img {
        padding-left: 2rem;
    }
}

@media screen and (min-width: 1025px) {
    main .arriver_france .container {
        display: grid;
        grid-template-areas:
            "titre  image"
            "texte  image"
            "btn    image";
        justify-items: start;
    }

    main .arriver_france .container .btn {
        align-items: start;
    }

    main .arriver_france .container .btn .btn-region {
        width: 20.6rem;
    }

    main .arriver_france .container .btn .btn-hebergement,
    main .arriver_france .container .btn .btn-region {
        height: 5.4rem;
    }
}

/*#endregion*/
/**************************************************/
/***********************Touraine*******************/
/**************************************************/
/*#region*/

/*******************Hero***********************/
main .hero_touraine {
    width: 100%;
    height: 32rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-inline: 4.9rem;
}

main .hero_touraine .background-color {
    background-color: #00000059;
    width: 100%;
    height: 32rem;
    z-index: 1000;
    position: absolute;
}

main .hero_touraine h2 {
    z-index: 1001;
    font-weight: 800;
    color: var(--White);
}

/*********************Titre************************/
main .titre_touraine {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 7rem;
}

main .titre_touraine h1 {
    color: var(--blue-light);
    font-weight: 800;
    text-align: center;
    max-width: 19rem;

}

/*********************Card************************/
main .card {
    display: grid;
    grid-template-areas:
        "titre"
        "texte"
        "image"
        "btn";
    justify-items: center;
}

main .card .titre {
    grid-area: titre;
    text-align: center;
    padding-bottom: 2.6rem;

}

main .card .texte {
    grid-area: texte;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    background-color: var(--BG-blue);
    height: 54.2rem;
    padding: 4.5rem 2.4rem 0 2.4rem;
    border-radius: 2rem;

}

main .card .texte .paragraphe {
    font-weight: 500;
}

main .card .image {
    grid-area: image;
    border-radius: 2rem;
    padding-inline: 1rem;
    position: relative;
    top: -7.6rem;
}

main .card .btn-hebergement {
    grid-area: btn;
    padding-block: 1.5rem;
    border-radius: 2rem;
    background-color: var(--blue-light);
    margin-bottom: 2.1rem;
    text-align: center;
    width: 30rem;
    position: relative;
    top: -5.2rem;
}

@media screen and (min-width: 426px) {
    main .hero_touraine h2 {
        font-weight: 400;
    }

    main .titre_touraine h1 {
        max-width: 60rem;
        font-weight: 400;
    }

    main .card {
        padding-bottom: 2.6rem;
    }

    main .card .image {
        top: -2rem;
        width: 100%;
    }

    main .card .texte {
        height: auto;
        padding-bottom: 4.5rem;
    }

    main .card .btn-hebergement {
        position: static;
        margin-top: 2rem;
    }

}

@media screen and (min-width: 769px) {
    main .hero_touraine {
        height: 37rem;
    }

    main .hero_touraine .background-color {
        height: 37rem;
    }

    main .titre_touraine h1 {
        font-size: 4rem;
        line-height: 6rem;
    }

    main .titre_touraine {
        background-color: var(--BG-blue);
    }

    main .card {
        display: grid;
        grid-template-areas:
            " image image titre"
            " image image texte"
            " image image texte"
            "btn btn btn";
        position: relative;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: end;
        padding-bottom: 24rem;
        padding-top: 5.4rem;
    }

    main .card.gastronomie {
        grid-template-areas:
            " titre image image "
            " texte image image "
            " texte image image "
            "btn btn btn";
    }

    main .card.gastronomie .texte {
        left: 10rem;
        top: 20rem;

    }

    main .card.ame {
        grid-template-areas:
            " titre image image "
            " texte image image "
            " texte image image "
            "btn btn btn";
    }

    main .card.ame .texte {
        left: 10rem;
        top: 20rem;

    }

    main .card.histoire {
        background-color: var(--BG-blue);
    }

    main .card.histoire .texte {
        background-color: var(--White);
    }

    main .card.environement {
        background-color: var(--BG-blue);
    }

    main .card.environement .texte {
        background-color: var(--White);
    }

    main .card.ame {
        padding-bottom: 2rem;
    }

    main .card .titre {
        font-size: 2.4rem;
        line-height: 3.6rem;
        padding-inline: 2rem;
        margin-top: 5rem;
        position: absolute;
    }

    main .card .image {
        width: 65.4rem;
        height: 47.4rem;
        top: 0;

    }

    main .card .texte {
        position: absolute;
        z-index: 1000;
        width: 80vw;
        padding: 0 5rem 0 5rem;
        right: 10rem;
        top: 20rem;
        height: 28rem;
        justify-content: center;

    }

    main .card .btn-hebergement {
        position: static;
        margin-top: 22rem;
    }
}

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

    main .hero_touraine {
        height: 50rem;
    }

    main .hero_touraine .background-color {
        height: 50rem;
    }

    main .titre_touraine h1 {
        font-size: 6.4rem;
        line-height: 9.6rem;
        max-width: 150rem;

    }

    main .card {
        padding-bottom: 30rem;
    }

    main .card .image {
        width: 87.4rem;
        height: 62.4rem;
    }

    main .card .texte {
        width: 60vw;
        height: 43rem;
        top: 24rem;
    }

    main .card .titre {
        font-size: 4.8rem;
        line-height: 7.2rem;
    }

    main .card .btn-hebergement {
        margin-top: 26rem;
    }
}

/*#endregion*/
/**************************************************/
/**********************Nos ecoles******************/
/**************************************************/
/*#region*/

/*******************Introduction*********************/
main .introduction_nos_ecoles {
    background-color: rgb(255 255 255 / 90%);
    background-blend-mode: overlay;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

main .introduction_nos_ecoles .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4.5rem;
    padding-block: 4.5rem;
}

main .introduction_nos_ecoles .container h1 {
    color: var(--blue-light);
    font-weight: 800;
}

main .introduction_nos_ecoles .container .texte1 {
    font-weight: 300;
    font-size: 2rem;
    line-height: 3rem;
}

/**********************Cards*********************/
main .nos-ecoles .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    padding-block: 3rem;
    padding-bottom: 10rem;
}

main .nos-ecoles .container .card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 3.7rem;
    background-color: var(--BG-blue);
    border-radius: 2rem;
    padding: 2.4rem;
    width: 100%;
}

main .nos-ecoles .container .card img {
    border-radius: 2rem;
    width: 100%;
    height: 24.3rem;
    object-fit: cover;
}

main .nos-ecoles .container .card h3 {
    color: var(--Black);
}

main .nos-ecoles .container .card a {
    font-size: 1.4rem;
    line-height: 2.1rem;
    color: var(--Black);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

main .nos-ecoles .container .card .atouts li p {
    font-weight: 500;
}

/***********************Media*******************/
@media screen and (min-width: 426px) {

    /**********************Cards*********************/
    main .nos-ecoles .container {
        flex-wrap: wrap;
        flex-direction: row;
    }

    main .introduction_nos_ecoles .container .texte1 {
        font-weight: 500;
        text-align: center;
        font: 2.4rem;
        line-height: 3.6rem;
    }

    main .nos-ecoles .container .card img {
        width: 30rem;
        height: 20rem;

    }

    main .nos-ecoles .container .card {
        width: 45%;
    }


}

@media screen and (min-width: 769px) {
    main .introduction_nos_ecoles .container .texte1 {
        font-weight: 500;
        font-size: 3.6rem;
        line-height: 5.4rem;
        text-align: center;
    }

    main .nos-ecoles .container .card:hover {
        box-shadow: 0 0 45px rgba(0, 0, 0, 0.4);

    }

    main .nos-ecoles .container .card {
        max-width: 40rem;
        transition: all 0.4s ease-in-out;
    }

    main .nos-ecoles .container .card img {
        width: 37rem;
        height: 27rem;

    }
}

/*#endregion*/
/**************************************************/
/********************Template ecole****************/
/**************************************************/
/*#region*/
/*******************hero*******************/
main .template_ecoles .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

main .template_ecoles .container .hero {
    display: grid;
    grid-template-areas:
        "image"
        "logo_titre"
        "info"
        "reseaux";
    background-color: var(--BG-blue);
    border-radius: 0 0 2rem 2rem;
    padding-bottom: 5rem;
    position: relative;
}

main .template_ecoles .container .hero .image_principale {
    grid-area: image;
    height: 31.8rem;
    border-radius: 0 0 2rem 2rem;
    width: 100%;
    object-fit: cover;

}

main .template_ecoles .container .hero .logo_titre {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    grid-area: logo_titre;
    transform: translateY(-7.5rem);
}

main .template_ecoles .container .hero .logo_titre .logo {
    width: 13rem;
    height: 13rem;
    border-radius: 100%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;

}

main .template_ecoles .container .hero .info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-inline: 4rem;
}

main .template_ecoles .container .hero .info .info_tel,
main .template_ecoles .container .hero .info .info_mail,
main .template_ecoles .container .hero .info .info_adresse {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

main .template_ecoles .container .hero .info p {
    font-weight: 500;
}

main .template_ecoles .container .hero .reseaux-logo {
    grid-area: reseaux;
}

main .template_ecoles .container .hero .reseaux-logo .icone-list {
    display: flex;
    flex-direction: row;
    gap: 1.7rem;
}

main .template_ecoles .container .hero .lien_ecole {
    display: flex;
    justify-content: start;
    align-items: center;
    width: 100%;
    max-width: 16.3rem;
    height: 5.4rem;
    color: var(--Black);
    position: relative;
}

main .template_ecoles .container .hero .lien_ecole ::after {
    content: '';
    display: block;
    width: 4rem;
    height: 1px;
    background-color: var(--Black);
    position: absolute;
    bottom: 5px;
    left: 0;
}


main .template_ecoles .container .hero .lien_ecole a {
    color: var(--Black);
    font-weight: 500;
}

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

main .template_ecoles .container .a_propos {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
    margin-block: 10.5rem 8.3rem;
}

main .template_ecoles .container .a_propos h2 {
    max-width: 20.5rem;
}

main .template_ecoles .container .a_propos p {
    font-weight: 500;
}

/*******************Galerie*******************/
main .template_ecoles .container .galerie {
    display: flex;
    flex-direction: column;
}

main .template_ecoles .container .galerie .images {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: space-between;
}

main .template_ecoles .container .galerie .images img {
    width: 100%;
    height: 30rem;
}

main .template_ecoles .container .lien_ecole2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28.8rem;
    height: 5.4rem;
    background-color: var(--blue-light);
    color: var(--White);
    border-radius: 2rem;
    margin-block: 8rem;
}

/*******************Media*******************/
@media screen and (min-width: 426px) {

    /*******************hero*******************/
    main .template_ecoles .container .hero {
        width: 100%;
        justify-items: center;
    }

    main .template_ecoles .container .hero .image_principale {
        height: 40rem;
    }

    /*******************A propos*******************/
    main .template_ecoles .container .a_propos h2 {
        max-width: 30.5rem;
    }

    /*******************Gallerie*******************/
    .lightbox {
        display: none;
        position: fixed;
        z-index: 9999;
        padding-top: 150px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.9);
    }

    .lightbox-content {
        margin: auto;
        display: block;
        max-width: 90%;
        max-height: 80%;
    }

    .close {
        position: absolute;
        top: 20px;
        right: 35px;
        color: white;
        font-size: 40px;
        font-weight: bold;
        cursor: pointer;
        z-index: 10000;
    }

    main .template_ecoles .container .galerie {
        gap: 2rem;
    }

    main .template_ecoles .container .galerie .images {
        flex-direction: row;
        flex-wrap: wrap;
    }

    main .template_ecoles .container .galerie .images a {
        width: 48%;
        height: 30rem;
    }

    main .template_ecoles .container .galerie .images a img {
        width: 100%;
        height: 30rem;
        object-fit: cover;
    }
}

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

    /*******************hero*******************/
    main .template_ecoles {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    main .template_ecoles .container .hero {
        display: grid;
        grid-template-areas:
            "image image"
            "logo_titre info"
            " logo_titire reseaux";
        padding-inline: 0;
    }

    main .template_ecoles .container .hero .image_principale {
        height: 45rem;
    }

    main .template_ecoles .container .hero .logo_titre {
        transform: translateY(-9rem);
    }

    main .template_ecoles .container .hero .info {
        padding-top: 2rem;
    }

    /*******************A propos*******************/
    main .template_ecoles .container .a_propos {
        max-width: 65rem;
    }

    main .template_ecoles .container .a_propos h2 {
        max-width: 50rem;
    }

    /*******************Gallerie*******************/

    main .template_ecoles .container .galerie .images a {
        width: 31%;
        height: 28rem;
    }

    main .template_ecoles .container .galerie .images a img {
        width: 100%;
        height: 28rem;
        object-fit: cover;
    }
}

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

    /*******************hero*******************/
    main .template_ecoles .container .hero .image_principale {
        height: 55rem;
    }

    main .template_ecoles .container .galerie .images img {
        width: 32%;
        height: 40rem;
    }
}

/*#endregion*/
/**************************************************/
/***********************Contact********************/
/**************************************************/
/*#region*/
/*******************hero*******************/
main .hero_contact .container {
    height: 32rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4.5rem;
}

main .hero_contact .background-color {
    background-color: #ffffffde;
    width: 100%;
    height: 32rem;
    z-index: 1000;
    position: absolute;
}

main .hero_contact .container h1 {
    color: var(--blue-light);
    font-weight: 800;
    z-index: 1001;
    position: relative;
    width: 100%;
    text-align: center;
}

main .hero_contact .container p {
    position: relative;
    z-index: 1001;
    color: var(--Black);
    font-weight: 500;

}

/*******************Cards*******************/
main .card_contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5rem;

}

main .card_contact .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    padding-block: 3rem;
    padding-bottom: 10rem;
    background-color: var(--White);
    border-radius: 2rem;
    padding: 2rem;
    max-width: 30rem;
}

main .card_contact .container .info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    width: 100%;
}

main .card_contact .container .info h3 {
    padding-bottom: 4.5rem;
    width: 100%;
    text-align: center;
    font-weight: 700;
    color: var(--Black);
    font-size: 2.4rem;
    line-height: 3.6rem;
}

main .card_contact .container img {
    border-radius: 1rem;
    height: 24rem;
    object-fit: cover;
    width: 36rem;
}

main .card_contact .container p,
main .card_contact .container a {
    font-size: 2rem;
    line-height: 3rem;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    color: var(--Black);
}

main .card_contact .container .btn_mail {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 20.1rem;
    height: 5.4rem;
    background-color: var(--BG-blue);
    color: var(--Black);
    border-radius: 2rem;
    margin-top: 3rem;
    margin-left: 50%;
    transform: translateX(-50%);
}

/*******************maps*******************/
main .map {
    margin-bottom: 2rem;
}

#map {
    border-radius: 2rem;
}

main .map_container .container .button_map {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-block: 7rem 1.5rem;
}

main .map_container .container .button_map button {
    background-color: var(--White);
    color: var(--Black);
    font-size: 1.6rem;
    line-height: 2.4rem;
    font-family: 'Noto Sans', sans-serif;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    gap: 1rem;
    width: 25.5rem;
    height: 6.1rem;
    border-radius: 2rem;
    border: none;
}

main .map_container .container .button_map button img {
    max-height: 6rem;

}

main .map_container .container h2 {
    text-align: center;
    margin-top: 7rem;
}

/*******************Media*******************/
@media screen and (min-width: 426px) {

    /*******************hero*******************/
    main .hero_contact {
        background-position: center;
    }

    /*******************Cards*******************/
    main .card_contact {
        margin-inline: 3rem;
    }

    main .card_contact .container {
        flex-direction: column;
        padding: 3rem;
        margin: 0;
        max-width: 34rem;
        height: 71rem;
        margin-inline: 0rem;

    }

    main .card_contact {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2rem;
    }

    main .card_contact .container img {
        width: 29.5rem;
        height: 29.5rem;
    }

    /*******************maps*******************/
    main .map_container .container .button_map {
        flex-direction: column;
        position: absolute;
        bottom: 5rem;
        left: 4rem;
        z-index: 1000;
        margin-block: 0 0;

    }

    main .map_container .container .button_map button:hover {
        cursor: pointer;
    }


}

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

    /*******************hero*******************/
    main .hero_contact .container {
        gap: 10rem;
        height: 55rem;
    }

    main .hero_contact .background-color {
        height: 55rem;
    }

    main .hero_contact .container h1 {
        font-weight: 400;
    }

    main .hero_contact .container p {
        font-size: 2.4rem;
        line-height: 3.6rem;
    }

    /*******************Cards*******************/
    main .card_contact {
        padding-bottom: 0;

    }

    main .card_contact .container {
        max-width: 40rem;
    }

    main .card_contact .container .btn_mail {
        transition: all 0.3s ease-in-out;
    }

    main .card_contact .container .btn_mail:hover {
        background-color: #B3B3CE;

    }

    /*******************maps*******************/
    main .map {
        margin-bottom: 9rem;
        margin-top: 5rem;
    }

    main .map_container .container .button_map {
        bottom: 5rem;
        left: 8rem;

    }

}

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

    /*******************hero*******************/
    main .hero_contact .container {
        gap: 17rem;
        height: 70rem;

    }

    main .hero_contact .background-color {
        height: 70rem;
    }


    /*******************Cards*******************/
    main .card_contact .container {
        flex-direction: row;
        max-width: 67rem;
        max-height: 36.8rem;
    }

    /*******************maps*******************/
    main .map {
        margin-top: 6rem;
    }
}

/*#endregion*/
/**************************************************/
/*********************Hebergement******************/
/**************************************************/
/*#region*/
/*******************hero*******************/
main .hero_hebergement {
    width: 100%;
    height: 32rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 4.5rem;
    padding-inline: 4.9rem;
}

main .hero_hebergement .background-color {
    background-color: #ffffffde;
    width: 100%;
    height: 32rem;
    z-index: 1000;
    position: absolute;
}

main .hero_hebergement h1 {
    z-index: 1001;
    font-weight: 800;
    color: var(--blue-light);
}

main .hero_hebergement p {
    z-index: 1001;
    font-weight: 500;
    color: var(--black);
}

/*******************Card*******************/
main .card_hebergement {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5rem;

}

main .card_hebergement .texte_contact {
    display: none;
}

main .card_hebergement .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5rem;
    margin-top: 4.3rem;
}

main .card_hebergement .container .cards {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    width: 25rem;
    padding-bottom: 2rem;
}

main .card_hebergement .container .cards h2 {
    color: var(--Black);
    text-align: center;
    font-size: 2.4rem;
    line-height: 3.6rem;
}

main .card_hebergement .container .cards img {
    border-radius: 100%;
    width: 20rem;
    height: 20rem;
    object-fit: cover;
}

main .card_hebergement .cta_contact {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28.8rem;
    height: 5.4rem;
    background-color: var(--blue-light);
    color: var(--White);
    border-radius: 2rem;
    margin-bottom: 7.8rem;
}


/*******************Galerie*******************/
main .galerie_hebergement .container {
    display: grid;
    grid-template-areas:
        "image1"
        "image2"
        "image3";
    gap: 2.4rem;
    padding-bottom: 12.7rem;
}

main .galerie_hebergement .container .image_1 {
    grid-area: image1;
}

main .galerie_hebergement .container .image_2 {
    grid-area: image2;
}

main .galerie_hebergement .container .image_3 {
    grid-area: image3;
}

main .galerie_hebergement .container img {
    width: 100%;
    height: 30rem;
    border-radius: 2rem;
    object-fit: cover;
}

/*******************Media*******************/
@media screen and (min-width: 426px) {

    /*******************Card*******************/
    main .card_hebergement .container {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2rem;
    }

}

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

    main .card_hebergement .texte_contact {
        display: block;
        text-align: center;
        margin-inline: 3rem;
    }

    main .card_hebergement .texte_contact h3 {
        font-size: 3.2rem;
        line-height: 4.8rem;
        color: var(--black);
        font-weight: 500;
    }
}


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

    /*******************Card*******************/
    main .card_hebergement .container .cards {
        margin-inline: 8rem;
    }

    /*******************galerie*******************/
    main .galerie_hebergement .container {
        grid-template-areas:
            "image1 image2"
            "image1 image3";
        grid-template-columns: 1fr 1fr;
    }

    main .galerie_hebergement .container .image_1 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    main .card_hebergement .texte_contact {
        margin-inline: 6rem;
    }

}

/*#endregion*/
/**************************************************/
/***********************Search*********************/
/**************************************************/
/*#region*/
.search-results h1 {
    font-size: 2.4rem;
    line-height: 3.6rem;
    color: var(--blue-light);
    font-weight: 800;
    margin-bottom: 2rem;
}

.search-results .container article h2 a {
    font-size: 1.6rem;
    line-height: 2.4rem;
    color: var(--black);
    font-weight: 500;
    margin-bottom: 2rem;
}

/*#endregion*/
/**************************************************/
/***********************blog***********************/
/**************************************************/
/*#region*/
main .actualites .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5rem;
    padding-top: 2rem;
}

main .actualites .container h1 {
    color: var(--blue-light);
    font-weight: 800;
    text-align: center;
}

main .actualites .container .img-txt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

main .actualites .container .img-txt img {
    width: 30rem;
    height: 30rem;
    border-radius: 2rem;
    object-fit: cover;
}

/*******************Navigation*******************/
main .navigation .container a {
    color: var(--black);
}

main .navigation .container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding-block: 2rem;
}

.navigation .after {
    margin-left: auto;
}

.navigation .before {
    margin-right: auto;
}

/*******************Media*******************/


/*#endregion*/
/**************************************************/
/***********************map************************/
/**************************************************/
/*#region*/
.map-page {
    display: flex;
    gap: 2rem;
    padding-block: 6rem;
}

.map-page h2 {
    font-size: 2.4rem;
    line-height: 3.6rem;
}

.map-page ul li a {
    font-size: 1.6rem;
    line-height: 2.4rem;
    color: var(--black);
    font-weight: 500;
}

/*#endregion*/
/**************************************************/
/***********************404************************/
/**************************************************/
/*#region*/
main .erreur-404 .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

main .erreur-404 .container .image {
    position: relative;
    width: 100%;
    height: 30rem;
    border-radius: 2rem;

}

main .erreur-404 .container h1 {
    font-size: 2.4rem;
    line-height: 3.6rem;
    color: var(--blue-light);
    font-weight: 800;
    text-align: center;
    margin-block: 2rem;
}

main .erreur-404 .container h3 {
    color: var(--White);
    font-weight: 500;
    text-align: center;
    position: absolute;
    z-index: 1001;
    max-width: 30rem;
}

main .erreur-404 .container .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2rem;
}

main .erreur-404 .container .image .background-color {
    background-color: #00000065;
    width: 100%;
    height: 30rem;
    top: 0;
    border-radius: 2rem;
    z-index: 1000;
    position: absolute;
}

main .erreur-404 .container a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 28.8rem;
    height: 5.4rem;
    background-color: var(--blue-light);
    color: var(--White);
    border-radius: 2rem;
    margin-block: 2rem;
}

/*******************Media*******************/
@media screen and (min-width: 769px) {

    main .erreur-404 .container .image {
        width: 60rem;
        height: 40rem;
    }

    main .erreur-404 .container h3 {
        max-width: 50rem;
    }

    main .erreur-404 .container .image .background-color {
        width: 60rem;
        height: 40rem;
    }
}

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

    main .erreur-404 .container .image {
        width: 80rem;
        height: 60rem;
    }

    main .erreur-404 .container .image .background-color {
        width: 80rem;
        height: 60rem;
    }
}

/*#endregion*/