/* ==========================================================================
   Ton Métier Ton Avenir (#TMTA)
   Feuille de styles unique, reconstruite depuis main.583f95c5.css.map.

   Les CSS Modules du projet React généraient des noms de classes uniques.
   Ici chaque classe est préfixée par son composant d'origine, ce qui évite
   les collisions entre les nombreux .mainContainer, .logo et .textContainer.

   Les chemins de polices pointent vers les fichiers réels du build, dont les
   noms comportent une empreinte (Raleway-Bold.2d5ba4784af03c9906b7.ttf).

   Aucune règle ajoutée ni retirée, hormis les media queries vides déjà
   présentes dans les sources et les utilitaires en fin de fichier.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. POLICES
   Source : fonts/Fonts.css
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "ClaireHand";
    src: url('../fonts/ClaireHandLight.otf');
    font-weight: lighter;
}

@font-face {
    font-family: "ClaireHand";
    src: url('../fonts/ClaireHandRegular.otf');
    font-weight: normal;
}

@font-face {
    font-family: "Raleway";
    src: url('../fonts/Raleway-ExtraBold.ttf');
    font-weight: bolder;
}

@font-face {
    font-family: "Raleway";
    src: url('../fonts/Raleway-Bold.ttf');
    font-weight: bold;
}

@font-face {
    font-family: "Raleway";
    src: url('../fonts/Raleway-Light.ttf');
    font-weight: 300;
}

@font-face {
    font-family: "Raleway";
    src: url('../fonts/Raleway-Regular.ttf');
    font-weight: normal;
}

@font-face {
    font-family: "Raleway";
    src: url('../fonts/Raleway-Thin.ttf');
    font-weight: 100;
}


/* --------------------------------------------------------------------------
   2. BASE
   Source : index.css
   -------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}


/* --------------------------------------------------------------------------
   3. ÉLÉMENTS GLOBAUX
   Source : App.css
   -------------------------------------------------------------------------- */

button {
  font-family: Raleway;
  font-size: 0.9rem;
  font-weight: bold;
  padding: 0.8rem 1rem;
  border-radius: 5rem;
  margin: 0 0.5rem;
  border: none;
  transition: opacity 0.3s ease-in-out;
}

button:hover {
  cursor: pointer;
  opacity: 0.7;
}

p {
  font-size: 1.1rem;
}


/* --------------------------------------------------------------------------
   4. EN-TÊTE
   Source : components/Header.module.css
   -------------------------------------------------------------------------- */

.header-headerStyle {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}

.header-mainContainer {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.header-logo {
    height: 200px;
    transition: transform 0.8s ease-in-out;
}

.header-logo:hover {
    cursor: pointer;
    transform: scale(1.1);
}

.header-linksContainer > a,
.header-linksContainer > span > a {
  padding: 1rem 0rem;
}

.header-linksContainer a {
    position: relative;
    color: white;
    text-decoration: none;
    font-family: Raleway;
    font-size: 1.2rem;
    text-transform: uppercase;
    font-weight: bold;
    transition: color 0.2s linear;
    margin: 0 0.8rem;
}

.header-linksContainer a:hover {
    color: #ff7a1f;
}

.header-socialLogoContainer {
    display: flex;
}

.header-socialLogo {
    height: 3rem;
    width: 3rem;
    background-size: cover;
    transition: background-image 0.2s linear;
    display: block;
}

.header-mobileHeaderContainer {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
    z-index: 1;
}

.header-mobileLogo {
    width: 15vh;
}

.header-mobileMenuButton {
    position: absolute;
    right: 2rem;
    top: 2rem;
    filter: invert(1);
    height: 3rem;
    width: 3rem;
}

.header-mobileMenuButton:hover {
    cursor: pointer;
}

.header-fullMobileMenu {
    position: absolute;
    width: 100%;
    top: 0;
    height: 110vh;
    background-color: white;
    z-index: 99;
    text-align: center;
}

.header-fullMobileMenu .header-linksContainer {
    margin: 10vh 0 0 0;
}

.header-fullMobileMenu .header-linksContainer a {
    width: 100%;
    margin: 5rem 0 0 0 !important;
    color: #22344d;
}

.header-fullMobileMenu .header-linksContainer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.header-fullMobileMenu .header-socialLogoContainer {
    position: relative;
    justify-content: center;
    margin: 5rem 0 0 -1rem;
}

.header-menuCloseButton {
    opacity: 0.3;
    position: absolute;
    right: 2rem;
    top: 2rem;
    cursor: pointer;
    height: 3rem;
    width: 3rem;
}

.header-metierLinksContainer {
    position: absolute;
    display: flex;
    flex-direction: column;
    padding: 1rem 0.5rem;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.1);
    left: 131%;
    top: 2rem;
    min-width: 250px;
    padding: 0 0.5rem;
}

.header-metierLinksContainer a {
    margin: 0.5rem 0;
}



/* --------------------------------------------------------------------------
   5. PIED DE PAGE
   Source : components/Footer.module.css
   -------------------------------------------------------------------------- */

.footer-mainContainer {
    width: 100%;
    position: relative;
}

.footer-footerContentContainer {
    background-color: #1d2c44;
    width: 100%;
    top: 90%;
    left: 0;
}

.footer-textContainer {
    color: white;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    font-family: Raleway;
}

.footer-textContainer h3 {
    text-transform: uppercase;
    font-weight: bold;
}

.footer-textContainer p {
    text-transform: uppercase;
    font-size: 0.9rem;
}

.footer-textContainer a {
    font-family: ClaireHand;
    color: white;
    text-decoration: none;
    transition: opacity 0.2s linear;
}

.footer-textContainer a:hover {
    opacity: 0.7;
}

.footer-linkUnderline {
    background-color: #ffc200;
    height: 2px;
    border-radius: 1px;
    margin-top: 2px;
}

.footer-logoContainer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.footer-logo {
    width: 25vw;
    height: auto;
    margin-right: 2rem;
}

.footer-footerBackground {
    position: relative;
    top: 20px;
    width: 100%;
    height: auto;
}


@media screen and (max-width: 768px) {
    .footer-textContainer {
        flex-wrap: wrap;
    }
}


/* --------------------------------------------------------------------------
   6. BANDEAU COOKIES
   Source : components/CookiesBanner.module.css
   -------------------------------------------------------------------------- */

.cookies-mainContainer {
    text-align: center;
    width: 30vw;
    position: fixed;
    right: 2rem;
    bottom: 0.5rem;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 0.25rem;
    padding: 0.5rem;
    z-index: 99;
}

.cookies-mainContainer span {
    margin: 0 0.5rem;
}


@media screen and (max-width: 768px) {
    .cookies-mainContainer {
        width: 100vw;
        left: 0;
        right: unset;
    }

    .cookies-mainContainer button {
        margin: 1rem 0.25rem;
    }
}


/* --------------------------------------------------------------------------
   7. PAGE ACCUEIL
   Source : pages/Home.module.css
   -------------------------------------------------------------------------- */

.home-mainContainer {
    position: relative;
    text-align: center;
    background-repeat: repeat-y;
}

.home-introContainer {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.home-introImage {
    position: relative;
    width: 100%;
    height: auto;
}

.home-introTextContainer {
    position: absolute;
    top: 30%;
    left: 60%;
    width: 38%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.home-introTextContainer h2 {
    color: white;
    text-align: left;
    font-family: ClaireHand;
    font-weight: 100;
    font-size: 2rem;
}

.home-introTextContainer button {
    background-color: #ff7a1f;
    color: white;
}

#home-watermark {
    position: absolute;
    top: 8rem;
    right: 2rem;
    width: 10rem;
    height: auto;
}

#home-splashGreen {
    position: relative;
    width: 10rem;
    height: auto;
    left: 5rem;
    bottom: 12rem;
    transform: rotate(315deg);
}

.home-presidentContainer {
    width: 100%;
    display: flex;
    justify-content: center;
}

.home-presidentContainer img {
    width: 60vw;
    height: auto;
}

.home-introButton {
    position: relative;
    display: flex;
    align-items: flex-end;
}

.mentions-mainContainer {
  position: relative;
}

.mentions-mainContainer #contact-splashBlue,
.mentions-mainContainer #contact-splashOrange {
  z-index: -1;
}

.mentions-container {
  max-width: 1200px;
  margin: auto;
}

@media screen and (max-width: 1200px) {
   .mentions-container {
     padding: 0 5rem;
   }
}

@media screen and (max-width: 1200px) {
   .mentions-mainContainer .contact-headerFillerTextContainer h2 {
     padding-left: 5rem;
   }
}

@media screen and (max-width: 768px) {
   .mentions-mainContainer .contact-headerFillerTextContainer h2 {
     display: block;
   }
}

.contact-headerFillerTextContainer h2

@media screen and (min-width: 1800px) {
    .home-introTextContainer {
        width: 30%;
    }

    .home-introTextContainer h2 {
        font-size: 3rem;
    }

    #home-watermark {
        width: 12rem;
        top: unset;
        bottom: -5rem;
    }

    #home-splashGreen {
        width: 15rem;
        bottom: 15rem;
    }
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
    #home-watermark {
        width: 5rem;
    }

    #home-splashGreen {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    #home-watermark {
        top: -5rem;
        width: 5rem;
    }

    #home-splashGreen {
        display: none;
    }

    .home-introTextContainer {
        position: relative;
        width: 100%;
        left: 0;
        text-align: center;
        align-items: center;
    }

    .home-introTextContainer h2 {
        color: #22344d;
        text-align: center;
    }

    .home-presidentContainer img {
        width: 99vw;
    }

    .home-introButton {
        align-items: center;
    }
}


/* --------------------------------------------------------------------------
   8. TEXTE D'INTRODUCTION
   Source : components/IntroText.module.css
   -------------------------------------------------------------------------- */

.introtext-mainContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 5rem;
}

.introtext-mainLogo {
    width: 32rem;
    height: auto;
    margin: 2rem 0;
}

.introtext-mainContainer button {
    color: white;
    background-color: #f6505c;
    display: flex;
    margin: 1rem 0;
}

.introtext-mainContainer p {
    font-family: Raleway;
    padding: 0 3rem;
    margin-bottom: 0;
    max-width: 80vw;
}

@media screen and (max-width: 768px) {
    .introtext-mainContainer {
        margin: 2rem 0 5rem;
    }

    .introtext-mainContainer img {
        width: 90%;
    }
}


/* --------------------------------------------------------------------------
   9. CARTES MÉTIERS
   Source : components/Jobs.module.css
   -------------------------------------------------------------------------- */

.jobs-mainContainer {
    position: relative;
    margin: 8rem 0;
}

.jobs-jobContainer {
    display: flex;
    justify-content: space-evenly;
}

.jobs-jobCardContainer {
    position: relative;
    width: 26vw;
    padding: 0.5rem 0.25rem 2rem;
    box-shadow: 0 2px 7px 0px #888888;
    border-radius: 0.5rem;
    align-self: center;
    background-color: white;
}

.jobs-jobCardContainer h1 {
    font-family: Raleway;
    font-size: 1.2rem;
    margin: 0 0 0.25rem 0;
}

.jobs-jobCardContainer h4 {
    margin: 0;
    font-family: ClaireHand;
    font-weight: 100;
    font-size: 1.5rem;
}

.jobs-jobCardContainer p {
    font-family: Raleway;
    font-weight: normal;
    padding: 0 1rem;
}

.jobs-jobCardContainer img {
    position: absolute;
    width: 10rem;
}


@media screen and (max-width: 768px) {
    .jobs-jobContainer {
        flex-wrap: wrap;
    }

    .jobs-jobCardContainer {
        width: 80vw;
        margin: 2rem 0;
    }
}


/* --------------------------------------------------------------------------
   10. VIGNETTE VIDÉO ET MODALE
   Source : components/Video.module.css
   -------------------------------------------------------------------------- */

.video-singleVideoContainer {
    position: relative;
    width: 26vw;
    margin: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: 0 2px 10px 2px #888888;
    text-align: left;
    background-color: white;
    transition: transform 0.3s ease-in-out;
}

.video-singleVideoContainer:hover {
    cursor: pointer;
    transform: scale(1.1);
    z-index: 99;
}

.video-singleVideoContainer video {
    width: 100%;
    height: auto;
    border-radius: 0.8rem;
}

.video-singleVideoContainer img {
    width: 100%;
    height: auto;
    border-radius: 0.8rem;
}

.video-singleVideoContainer h3 {
    margin: 1rem 0 0 0;
}

.video-singleVideoContainer p {
    margin: 0 0 0.5rem 0;
}

.video-playButton {
    bottom: 1.5rem;
    right: 1rem;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
    background-color: #ffd618;
    border-radius: 22rem;
    box-shadow: 0 2px 7px 0px #888888;
}

.video-playButton img {
    width: 50%;
    height: auto;
}

.video-videoModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    min-height: 100vh;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.video-modalFiller {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 101;
}

.video-videoContainerInModal {
    max-width: 80vw;
    top: 2rem;
    padding: 2rem 5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #eaeaea;
    border-radius: 1rem;
    z-index: 102;
}

.video-videoContainerInModal span {
    font-family: Raleway;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0 0 1.5rem 0;
}

.video-closeModalButtonContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 1rem;
    top: 1rem;
    width: 6rem;
    border-radius: 2.5rem;
    z-index: 103;
}

.video-closeModalButtonContainer:hover {
    cursor: pointer;
}

.video-closeSplash {
    width: 100%;
    height: auto;
    transform: rotate(-120deg);
}

.video-closeCross {
    width: 10rem;
    position: absolute;
}

.video-nextSplash {
    width: 100%;
    height: auto;
    transform: rotate(-120deg);
}

.video-nextArrow {
    width: 10rem;
    position: absolute;
}

.video-nextModalButtonContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 1rem;
    top: 1rem;
    width: 6rem;
    border-radius: 2.5rem;
    z-index: 103;
}

.video-nextModalButtonContainer:hover {
    cursor: pointer;
}

.video-videoContainerInModal video {
    width: 100%;
    max-height: 60vh;
    margin: 1rem 0 0 0;
    border-radius: 1rem;
    z-index: 103;
}

.video-videoContainerInModal h3 {
    font-size: 2.5rem;
    margin: 0.25rem 0;
    z-index: 103;
}

.video-videoContainerInModal p {
    width: 90%;
    font-family: ClaireHand;
    text-align: center;
    margin: 1rem 0;
}

.video-videoContainerInModal p {
    z-index: 103;
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
    .video-videoContainerInModal {
        overflow-y: auto;
        max-height: 70vh;
    }

    .video-videoContainerInModal h3 {
        margin: 0.5rem 0 0 0;
    }

    .video-closeModalButtonContainer {
        width: 2rem;
        top: 1rem;
        left: 2rem;
    }

    .video-closeCross {
        width: 5rem;
        top: 1rem;
    }
}

@media screen and (max-width: 768px) {
    .video-singleVideoContainer {
        width: 75vw;
    }

    .video-singleVideoContainer h3,
    p {
        text-align: left;
        font-size: 0.9rem;
    }

    .video-videoContainerInModal {
        padding: 2rem 1rem;
    }

    .video-videoContainerInModal h3 {
        font-size: 2rem;
        margin: 1rem 0 0 0;
    }

    .video-closeModalButtonContainer {
        width: 2rem;
        top: 1rem;
        left: 2rem;
    }

    .video-closeCross {
        width: 5rem;
        top: 1rem;
    }

    .video-nextModalButtonContainer {
        width: 2rem;
        top: 1rem;
        right: 2rem;
    }

    .video-nextArrow {
        width: 4rem;
        top: 2.25rem;
    }

}


/* --------------------------------------------------------------------------
   11. GALERIE VIDÉO
   Source : components/VideoGallery.module.css
   -------------------------------------------------------------------------- */

.gallery-mainContainer {
    position: relative;
    width: 100%;
    margin: 5rem 0;
}

.gallery-mainContainer h1 {
    font-family: ClaireHand;
    margin-top: 3rem;
}

.gallery-mainContainer h2 {
    font-family: Raleway;
    font-weight: normal;
    padding: 0 20vw;
    font-size: 1rem;
}

.gallery-splashContainer {
    position: relative;
    width: 100%;
    z-index: -1;
}

.gallery-splashLeft {
    position: absolute;
    width: 12rem;
    height: auto;
    top: 5rem;
    left: 0;
    transform: rotate(45deg);
}

.gallery-splashRight {
    position: absolute;
    width: 12rem;
    height: auto;
    top: 5rem;
    right: 0;
    transform: rotate(-45deg);
}

.gallery-videosContainer {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 0 2rem 0;
    transition: opacity 0.3s linear;
}

.gallery-highlightPicture {
    width: 55vw;
    height: auto;
}

.gallery-arrowContainer {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.gallery-arrowContainer img {
    width: 1rem;
    height: auto;
    margin: 0 0.5rem;
    padding: 0.5rem;
    transition: opacity 0.3s linear;
    border-radius: 1rem;
}

.gallery-arrowContainer img:hover {
    cursor: pointer;
    opacity: 0.7;
}

.gallery-navigationDotContainer {
    width: 100%;
    position: absolute;
    bottom: -1rem;
    display: flex;
    justify-content: center;
}

.gallery-dot {
    width: 0.5rem;
    height: 0.5rem;
    background-color: gray;
    border-radius: 1rem;
}

.gallery-navigationDotContainer div {
    margin: 0 0.25rem;
}

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

.gallery-spanAnchor {
    position: absolute;
    top: -3rem;
}


@media screen and (max-width: 768px) {
    .gallery-highlightPicture {
        width: 99vw;
    }

    .gallery-hightlightContainer {
        flex-wrap: wrap;
    }

    .gallery-arrowContainer img {
        width: 0.8rem;
        margin: 0 0.1rem;
    }

}


/* --------------------------------------------------------------------------
   12. PAROLES DE PROS
   Source : components/Professionals.module.css
   -------------------------------------------------------------------------- */

.professionals-mainContainer {
    position: relative;
    width: 100%;
}

.professionals-mainContainer h1 {
    font-family: ClaireHand;
    color: #f6505c;
}

.professionals-mainContainer p {
    font-family: Raleway;
}

.professionals-textContainer {
    padding: 0 2rem;
}

.professionals-videoContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s linear;
}

.professionals-arrowContainer {
    position: absolute;
    left: 0;
    top: 58%;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.professionals-arrowContainer img {
    width: 1rem;
    height: auto;
    margin: 0 0.5rem;
    padding: 0.5rem;
    transition: opacity 0.3s linear;
    border-radius: 1rem;
}

.professionals-arrowContainer img:hover {
    cursor: pointer;
    opacity: 0.7;
}


@media screen and (max-width: 768px) {
    .professionals-videoContainer {
        flex-wrap: wrap;
    }

}


/* --------------------------------------------------------------------------
   13. LOGOS PARTENAIRES
   Source : components/Partners.module.css
   -------------------------------------------------------------------------- */

.partners-mainContainer {
    margin: 1rem 0;
}

.partners-mainContainer h1 {
    font-family: ClaireHand;
    color: rgb(34, 52, 77);
    font-weight: 100;
}

.partners-logoRow {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem 0;
}

.partners-initiativeLogo {
    width: 25vw;
    height: auto;
    margin: 0 5rem;
    transition: transform 0.8s ease-in-out;
}

.partners-initiativeLogo:hover {
    transform: scale(1.1);
}

.partners-partnerLogo {
    height: auto;
    width: 16vw;
    transition: transform 0.5s ease-in-out;
}

.partners-partnerLogo:hover {
    transform: scale(1.5);
}


@media screen and (max-width: 768px) {
    .partners-logoRow {
        flex-wrap: wrap;
    }

    .partners-logoRow img {
        margin: 1rem;
    }

    .partners-partnerLogo {
        width: 6rem;
    }
}


/* --------------------------------------------------------------------------
   14. PAGE FORMATIONS
   Source : pages/Formations.module.css
   -------------------------------------------------------------------------- */

.formations-mainContainer {
    position: relative;
    top: 20vh;
}

.formations-mainContainer h2 {
    font-size: 2rem;
    font-family: ClaireHand;
    color: #35d6a5;
}

.formations-mainContainer p {
    font-family: Raleway;
}

.formations-headerBackground {
    position: absolute;
    top: 0;
    width: 100%;
    height: auto;
}

.formations-introContainer {
    position: relative;
    text-align: right;
    display: flex;
    flex-direction: column;
    width: 90%;
    align-items: flex-end;
    -webkit-align-items: flex-end;
}

.formations-introContainer h1 {
    font-family: ClaireHand;
    font-weight: 100;
    line-height: 3rem;
    color: #22344d;
    width: 50vh;
}

.formations-introContainer button {
    color: white;
    background-color: #ff7a1f;
    width: 12rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.formations-goodToKnowContainer {
    position: relative;
    margin: 10rem 0 0 0;
}

.formations-goodToKnowContainer h2 {
    text-align: center;
    color: #33aea5;
    font-weight: 100;
    font-size: 2.5rem;
}

.formations-goodToKnowContainer p {
    text-align: center;
}

.formations-highLightSplash {
    width: 50vw;
    height: auto;
}

.formations-formationsContainer {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

.formations-formationsContainer h2 {
    width: 100%;
    font-weight: 100;
}

.formations-formationsContainer h5 {
    width: 100%;
    font-size: 2rem;
    font-family: ClaireHand;
    font-weight: 100;
    color: #22344d;
    margin: 0 0 5rem 0;
}

.formations-threeDots {
    position: relative;
    width: 8rem;
    left: 50%;
    transform: translateX(-50%);
    margin: 2rem 0;
}

.formations-splashOrange {
    position: absolute;
    width: 12rem !important;
    transform: rotate(-45deg);
    right: 30%;
    top: 10rem;
}

.formations-splashGreen {
    position: absolute;
    width: 12rem;
    transform: rotate(100deg);
    left: 1rem;
    top: 15rem;
}

.formations-singleFormationContainer {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 2rem;
}

.formations-offersContainer {
    width: 55vw;
    margin: 0 auto;
    text-align: center;
}

.formations-offersContainer h3 {
    font-size: 2rem;
    font-weight: 100;
    color: #ff7a1f;
    font-family: ClaireHand;
}

.formations-offerLogoContainer {
    display: flex;
    justify-content: center;
    margin: 5rem 0;
}

.formations-offerLogoContainer img {
    width: 25vw;
    height: auto;
    margin: 0 2rem;
}

.formations-highlightedVideoContainer {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.formations-highlightedTextContainer {
    width: 30vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


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

    .formations-splashOrange {
        display: none;
    }

    .formations-splashGreen {
        display: none;
    }

    .formations-highLightSplash {
        width: 99vw;
    }

    .formations-offerLogoContainer img {
        width: 40vw;
        margin: 0 10px;
    }

    .formations-introContainer {
        width: 100%;
        align-items: center;
    }

    .formations-introContainer h1 {
        text-align: center;
        width: 90%;
    }

    .formations-mainContainer p {
        padding: 0 1rem;
        text-align: center;
    }

    .formations-highlightedVideoContainer p {
        text-align: left !important;
        padding: 0 !important;
    }

    .formations-highlightedTextContainer {
        display: none;
    }

    .formations-formationsContainer h5 {
        margin: 0.5rem 0 2rem;
    }

    .formations-offersContainer {
        width: 80vw;
    }
}


/* --------------------------------------------------------------------------
   15. BLOC ALTERNANCE
   Source : components/Alternance.module.css
   -------------------------------------------------------------------------- */

.alternance-mainContainer {
    position: relative;
    margin: 5rem 0 0 0;
}

.alternance-mainContainer p {
    font-family: Raleway;
}

.alternance-mainContainer video {
    border-radius: 2rem;
    box-shadow: 0 2px 10px 2px #888888;
}

.alternance-topSectionContainer {
    margin: 0 0 5rem 0;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.alternance-topSectionContainer h2 {
    font-family: ClaireHand;
    font-size: 2rem;
    font-weight: bold;
    color: #22344d;
}

.alternance-topSectionContainer h3 {
    font-family: Raleway;
    text-transform: uppercase;
    font-size: 1.5rem;
    margin: 0.5rem 0;
}

.alternance-topSectionContainer video {
    margin: 0 0 0 5rem;
}

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

.alternance-alternanceTextContainer p {
    width: 60%;
}

.alternance-textContainer {
    width: 50%;
}

.alternance-bottomSectionContainer {
    margin: 2rem 0 5rem 0;
}

.alternance-bottomSectionContainer h2 {
    font-family: ClaireHand;
    font-size: 2rem;
    font-weight: 100;
    color: #22344d;
}

.alternance-bottomSectionContainer p {
    margin: 0 0 3rem 0;
}

.alternance-bottomSectionContainer video {
    margin: 0 1rem;
}

.alternance-videoThumbnail {
    border-radius: 2rem;
    box-shadow: 0 2px 10px 2px #888888;
    margin: 1rem;
    background-position: center;
    background-size: cover;
}

.alternance-videoThumbnail:hover {
    cursor: pointer;
}

.alternance-bottomVideosContainer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

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

    .alternance-topSectionContainer {
        flex-direction: column;
    }

    .alternance-topSectionContainer video {
        margin: 1rem 0;
    }

    .alternance-textContainer {
        width: 90%;
    }

    .alternance-textContainer p {
        text-align: center !important;
    }

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

    .alternance-bottomSectionContainer {
        padding: 0 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    .alternance-bottomSectionContainer video {
        margin: 2rem 0;
    }
}


/* --------------------------------------------------------------------------
   16. FICHE FÉDÉRATION / ORGANISME
   Source : components/FederationFormation.module.css
   -------------------------------------------------------------------------- */

.federation-mainContainer {
    position: relative;
    display: flex;
    width: 25vw;
    border: 2px #22344d solid;
    border-radius: 1rem;
    padding: 1rem 0.5rem;
    margin: 3rem 2rem;
    flex-wrap: wrap;
    justify-content: center;
    background-color: white;
    box-shadow: 0 2px 10px 2px #888888b7;
}

.federation-mainContainer h4 {
    font-family: ClaireHand;
    color: #ff7a1f;
    margin: 2rem 0 0;
    font-size: 1.3rem;
}

.federation-mainContainer p {
    font-family: Raleway;
    font-weight: bold;
    font-size: 0.9rem;
    color: #22344d;
    width: 100%;
    white-space: pre-line;
}

.federation-logo {
    width: 65%;
    height: auto;
    position: absolute;
    top: -15%;
    border-radius: 1rem;
    border: gray 1px solid;
    background-color: white;
}

.federation-picture {
    width: 95%;
    height: auto;
    border-radius: 1rem;
}

.federation-contactContainer img {
    margin: 0 0.5rem;
}

.federation-extraLink {
    width: 100%;
    margin: 0.5rem 0 1rem 0;
    text-decoration: none;
    color: #ff7a1f;
}



@media screen and (max-width: 768px) {
    .federation-mainContainer {
        width: 70vw;
    }
}


/* --------------------------------------------------------------------------
   17. PAGE CONTACT
   Source : pages/Contact.module.css
   -------------------------------------------------------------------------- */

.contact-mainContainer {
    position: relative;
}

.contact-headerContainer {
    overflow: hidden;
    position: relative;
}

.contact-headerFillerTextContainer {
    position: relative;
    height: 32rem;
    width: 100%;
    background-color: #22344d;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex-direction: column;
}

.contact-headerFillerTextContainer h2 {
    font-size: 2rem;
    font-family: ClaireHand;
    font-weight: 100;
    color: white;
    padding: 0 3rem;
}

.contact-headerFillerTextContainer h3 {
    font-size: 1.2rem;
    font-family: ClaireHand;
    font-weight: 100;
    color: white;
    padding: 0 3rem;
}

.contact-headerBackground {
    height: auto;
    width: 101%;
    left: -1%;
    position: relative;
}

.contact-socialMediaIconsContainer {
    padding: 0 1rem;
    width: 100%;
}

.contact-socialMediaIconsContainer img {
    width: 5rem;
    transition: opacity 0.3s ease-in-out;
}

.contact-socialMediaIconsContainer img:hover {
    opacity: 0.5;
}

.contact-splashImage {
    position: absolute;
    width: 10rem;
}

#contact-splashOrange {
    right: 10rem;
    transform: rotate(-45deg);
}

#contact-splashBlue {
    left: 5rem;
    bottom: 15rem;
    transform: rotate(-80deg);
}

.contact-socialCallToActionContainer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.contact-socialCallToActionContainer h4 {
    font-family: ClaireHand;
    font-weight: 100;
    font-size: 2rem;
    text-align: center;
    color: #fe7a1f;

}

.contact-bigSocialMediaIcons {
    width: 10rem;
    transition: transform 0.3s linear;
}

.contact-bigSocialMediaIcons:hover {
    transform: scale(1.1);
}

.contact-orangeArrow {
    position: relative;
    width: 4rem;
    bottom: 2rem;
    left: 3rem;
}

.contactform-mainContainer form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 10rem;
  position: relative;
}


@media screen and (max-width: 768px) {
    .contact-headerFillerTextContainer {
        height: 30vh;
    }
    .contact-headerFillerTextContainer h2 {
        display: none;
        padding: 0;
    }

    .contact-mainContainer {
        overflow-x: hidden;
    }

    #contact-splashOrange {
        right: -3rem;
    }

    #contact-splashBlue {
        left: -3rem;
    }

    .contact-bigSocialMediaIcons {
        width: 5rem;
    }

    .contact-orangeArrow {
        display: none;
    }

    .contact-socialCallToActionContainer {
        flex-direction: column-reverse;
        align-items: center;
    }
}


/* --------------------------------------------------------------------------
   18. FORMULAIRE DE CONTACT
   Source : components/ContactForm.module.css
   -------------------------------------------------------------------------- */

.contactform-mainContainer {
    position: relative;
    display: flex;
    padding: 0 10rem;
    flex-direction: column;
    justify-content: center;
}

.contactform-mainContainer p {
    font-family: Raleway;
}

.contactform-mainContainer input {
    font-family: Raleway;
    font-size: 1rem;
    border: 2px rgb(52, 174, 164) solid;
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.contactform-mainContainer input:focus-visible {
    outline: 2px #35d6a5 solid;
}

.contactform-mainContainer textarea {
    font-family: Raleway;
    font-size: 1rem;
    border: 2px rgb(52, 174, 164) solid;
    border-radius: 0.5rem;
    padding: 0.5rem;
    min-height: 10rem;
}

.contactform-mainContainer textarea:focus-visible {
    outline: 2px #35d6a5 solid;
}

.contactform-mainContainer h3 {
    font-size: 3rem;
    font-family: ClaireHand;
    font-weight: 100;
    color: rgb(52, 174, 164);
}

.contactform-mainContainer button {
    margin: 2rem 0;
    align-self: flex-end;
    background-color: #ffc200;
    color: white;
    font-size: 1.2rem;
}

.contactform-inputRow {
    display: flex;
    align-self: center;
}

.contactform-smallInput {
    width: 20rem;
}

.contactform-largeInput {
    width: 45rem;
}

.contactform-inputWithTextContainer {
    margin: 0 2rem
}

@media screen and (max-width: 768px) {
    .contactform-mainContainer {
        padding: 0 2rem;
    }

    .contactform-smallInput {
        width: 100%;
    }

    .contactform-largeInput {
        width: 100%;
    }
}


/* --------------------------------------------------------------------------
   19. PAGE PARTENAIRES
   Source : pages/PartnerPage.module.css
   -------------------------------------------------------------------------- */

.partnerpage-headerBackground {
    position: absolute;
    top: 0;
    width: 100%;
    height: auto;
}

.partnerpage-mainContainer {
    position: relative;
    top: 22vh;
}

.partnerpage-introTextContanier {
    padding: 0 5rem;
    font-family: ClaireHand;
    color: white;
    display: flex;
    justify-content: flex-end;
    text-align: right;
}

.partnerpage-introTextContanier h1 {
    width: 50vw;
}


.partnerpage-infoContainer {
    margin: 5rem 0;
}

.partnerpage-tmtaLogo {
    position: relative;
    transform: translateX(-50%);
    left: 50%;
    width: 50vw;
}

.partnerpage-singleInfoContainer {
    position: relative;
    margin: 2rem 0;
    padding: 0 15rem;
}

.partnerpage-singleInfoContainer h3 {
    font-size: 2rem;
    font-family: ClaireHand;
    color: #ff7a1f;
    font-weight: lighter;
}

.partnerpage-president {
    position: relative;
    transform: translateX(-50%);
    left: 50%;
    width: 70vw;
}

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

.partnerpage-initiativeContainer h2 {
    font-size: 1.8rem;
    font-family: ClaireHand;
    color: #22344d
}

.partnerpage-initiativeLogoContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.partnerpage-initiativeLogoContainer img {
    align-self: center;
    width: 22vw;
    height: auto;
    margin: 0 5rem;
}

.partnerpage-federationContainer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 3rem 0 20rem 0;
    text-align: center;
}

.partnerpage-federationContainer h2 {
    font-size: 1.6rem;
    font-family: ClaireHand;
    color: #22344d;
}

.partnerpage-federationContainer p {
    padding: 0 2rem;
}

.partnerpage-splashOrange {
    position: absolute;
    width: 12rem;
    left: -3rem;
    top: 0;
    transform: rotate(-45deg);
    z-index: -1;
}

.partnerpage-splashGreen {
    position: absolute;
    width: 12rem;
    right: 0;
    bottom: 10rem;
    transform: rotate(160deg);
    z-index: -1;
}

@media screen and (min-width: 1900px) {
    .partnerpage-tmtaLogo {
        padding: 6rem 0 25rem 0 !important;
    }
}

@media screen and (min-width: 1200px) {
    .partnerpage-tmtaLogo {
        padding: 6rem 0 15rem 0;
    }
}

@media screen and (max-width: 768px) {
    .partnerpage-splashOrange {
        top: 8.5rem;
    }

    .partnerpage-introTextContanier {
        color: #007ec4;
        padding: 1rem 2rem 0;
        text-align: center;
        justify-content: center;
    }

    .partnerpage-introTextContanier h1 {
        width: 90%;
    }

    .partnerpage-tmtaLogo {
        width: 80vw;
        padding-top: 2rem;
    }

    .partnerpage-singleInfoContainer {
        padding: 0 2rem;
    }

    .partnerpage-president {
        width: 99vw;
    }

    .partnerpage-initiativeLogoContainer img {
        width: 35vw;
        margin: 2rem;
    }

    .partnerpage-federationContainer {
        padding: 0 2rem;
    }
}


/* --------------------------------------------------------------------------
   UTILITAIRES DE CONVERSION
   Reproduisent en CSS ce que React gérait par rendu conditionnel.
   -------------------------------------------------------------------------- */

.is-hidden {
    display: none !important;
}

.no-scroll {
    overflow: hidden;
}

/* React montait soit l'en-tête desktop, soit l'en-tête mobile. Les deux sont
   désormais présents dans le HTML, la bascule se fait ici. */


.mobile-uniquement {
    display: none;
}

@media screen and (max-width: 768px) {
    .desktop-uniquement {
        display: none;
    }

    .mobile-uniquement {
        display: block;
    }
}

/* Filtres de la galerie */
.filtre-secteur {
    opacity: 0.55;
    transition: opacity 0.2s linear;
}

.filtre-secteur.est-actif {
    opacity: 1;
}


/* Piège à robots : le champ doit rester dans le flux pour que les robots
   le remplissent, mais invisible et inaccessible pour un visiteur.
   display:none serait détecté par certains robots, d'où ce décalage. */
.piege-robots {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}