/* GLOBAL */ /* Marianne */ @font-face { font-family: 'Marianne'; src: url("../fonts/Marianne/Marianne-Light.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Light.woff") format("woff"); font-weight: 400; font-style: normal; } @font-face { font-family: 'Marianne'; src: url("../fonts/Marianne/Marianne-Light_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Light_Italic.woff") format("woff"); font-weight: 400; font-style: italic; } @font-face { font-family: 'Marianne'; src: url("../fonts/Marianne/Marianne-Medium.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Medium.woff") format("woff"); font-weight: 800; font-style: normal; } @font-face { font-family: 'Marianne'; src: url("../fonts/Marianne/Marianne-Medium_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Medium_Italic.woff") format("woff"); font-weight: 800; font-style: italic; } /* Barlow */ @font-face { font-family: 'Barlow'; src: url("../fonts/Barlow/barlow-light.woff2") format("woff2"), url("../fonts/Barlow/barlow_light.woff") format("woff"); font-weight: 300; font-style: normal; } /* BREAKPOINTS */ .layout-container { display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; } /* SIZES */ /* MIXINS */ a { text-decoration: none; } main[role="main"] { margin-top: 13vh; } strong { font-weight: bold; } em { font-style: italic; } /* PARTIALS */ body.toolbar-tray-open header[role="banner"] { left: 15rem !important; width: calc(100% - 15rem) !important; } body.toolbar-fixed header[role="banner"] { top: 2.4em !important; } .layout-container { width: 100%; overflow: hidden; } .layout-container header[role="banner"] { width: 100%; background: white; position: fixed; top: 0; left: 0; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2); z-index: 99; } .layout-container header[role="banner"] div { max-width: 100%; max-height: 10vh; display: flex; flex-wrap: nowrap; justify-content: space-between; } .layout-container header[role="banner"] div #block-erabletheme-logorepublique { width: 15%; } .layout-container header[role="banner"] div #block-erabletheme-logorepublique a { display: flex; align-items: center; } .layout-container header[role="banner"] div #block-erabletheme-logorepublique a img { padding-left: 3vw; height: auto; width: 100%; } @media (min-width: 1080px) { .layout-container header[role="banner"] div #block-erabletheme-logorepublique a img { padding-right: 1.5vw; } } @media (min-width: 760px) { .layout-container header[role="banner"] div #block-erabletheme-logorepublique { padding-right: 2rem; } } @media (min-width: 1080px) { .layout-container header[role="banner"] div #block-erabletheme-logorepublique { width: 10%; padding-right: 1%; } } .layout-container header[role="banner"] div #block-erabletheme-logoerable { max-height: 100%; width: 20%; } .layout-container header[role="banner"] div #block-erabletheme-logoerable > div { width: auto; } .layout-container header[role="banner"] div #block-erabletheme-logoerable > div a { width: 100%; display: flex; align-items: center; justify-content: center; } .layout-container header[role="banner"] div #block-erabletheme-logoerable > div a img { height: 100%; width: auto; padding-top: 3px; padding-bottom: 3px; } @media (min-width: 1080px) { .layout-container header[role="banner"] div #block-erabletheme-logoerable { width: 10%; padding-left: 3%; padding-top: 0.4rem; padding-bottom: 0.4rem; } } .layout-container header[role="banner"] div #block-erabletheme-navigationprincipale { display: none; width: 60%; } .layout-container header[role="banner"] div #block-erabletheme-navigationprincipale ul { width: 100%; display: flex; height: 100%; align-items: center; justify-content: space-around; padding: 0 2vw; } .layout-container header[role="banner"] div #block-erabletheme-navigationprincipale ul li { font-family: 'Marianne', sans-serif; font-size: 0.9rem; } .layout-container header[role="banner"] div #block-erabletheme-navigationprincipale ul li a { font-weight: 800; padding: 4px 6px; color: black; background-color: rgba(255, 255, 255, 0); transition: background-color 0.3s ease; } .layout-container header[role="banner"] div #block-erabletheme-navigationprincipale ul li a:hover { background-color: #00ff80; } .layout-container header[role="banner"] div #block-erabletheme-navigationprincipale ul li a.is-active { background-color: #00ff80; } @media (min-width: 1080px) { .layout-container header[role="banner"] div #block-erabletheme-navigationprincipale { display: block; } } .layout-container header[role="banner"] div #block-erabletheme-socialmedialinks { width: 7%; margin: 0 calc((20% - (7% + 7vh)) / 2); display: none; } .layout-container header[role="banner"] div #block-erabletheme-socialmedialinks ul { height: 100%; display: flex; align-items: center; justify-content: space-between; } .layout-container header[role="banner"] div #block-erabletheme-socialmedialinks ul li a span { font-weight: lighter; font-size: 1.4rem; width: 2.2rem; height: 2.2rem; padding: 0.4rem; border-radius: 1.1rem; color: white; background-color: #038788; } .layout-container header[role="banner"] div #block-erabletheme-socialmedialinks ul li a svg.ext { display: none; } @media (min-width: 1080px) { .layout-container header[role="banner"] div #block-erabletheme-socialmedialinks { display: block; } } .layout-container header[role="banner"] div #block-erabletheme-header #hamburger { cursor: pointer; width: 10vh; height: 100%; background-color: #00ff80; display: flex; flex-direction: column; align-items: center; justify-content: space-around; padding: 0.5rem 0; } .layout-container header[role="banner"] div #block-erabletheme-header #hamburger h2 { font-size: 0.8rem; font-family: 'Marianne', sans-serif; font-weight: 800; text-align: center; } .layout-container header[role="banner"] div #block-erabletheme-header #hamburger .burger-icon { width: 2rem; height: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 0.5rem; } .layout-container header[role="banner"] div #block-erabletheme-header #hamburger .burger-icon div { border-bottom: solid 1px black; width: 100%; background-color: black; opacity: 1; transition: opacity 0.2s ease-out, transform 0.4s ease-out; transform: none; } .layout-container header[role="banner"] div #block-erabletheme-header #hamburger .burger-icon.open div:first-of-type { transform: translate(0rem, 0.5rem) rotate(-45deg); } .layout-container header[role="banner"] div #block-erabletheme-header #hamburger .burger-icon.open div:nth-of-type(2) { opacity: 0; } .layout-container header[role="banner"] div #block-erabletheme-header #hamburger .burger-icon.open div:last-of-type { transform: translate(0rem, -0.5rem) rotate(45deg); } .layout-container header[role="banner"] div #block-erabletheme-header ul:not(.social-media-links--platforms) { display: none; height: auto; max-height: 0vh; transition: max-height 0.9s ease, padding 0.5s ease-out; position: fixed; background-color: #314e41; top: 10vh; left: 0; width: 100vw; z-index: 0; padding: 0; align-items: center; flex-direction: column; } .layout-container header[role="banner"] div #block-erabletheme-header ul:not(.social-media-links--platforms) > li { width: 100%; display: flex; justify-content: center; padding: 6px 0; opacity: 0; transition: opacity 0.3s ease; max-width: 60vw; } .layout-container header[role="banner"] div #block-erabletheme-header ul:not(.social-media-links--platforms) > li > a { text-align: center; line-height: 1.2; color: white; font-family: 'Marianne', sans-serif; font-weight: 800; padding: 4px 6px; background-color: rgba(255, 255, 255, 0); transition: background-color 0.3s ease, color 0.3s ease; } .layout-container header[role="banner"] div #block-erabletheme-header ul:not(.social-media-links--platforms) > li > a:hover { background-color: white; color: #314e41; } .layout-container header[role="banner"] div #block-erabletheme-header ul:not(.social-media-links--platforms) > li > a.is-active { background-color: white; color: #314e41; } @media (min-width: 760px) { .layout-container header[role="banner"] div #block-erabletheme-header ul:not(.social-media-links--platforms) > li { max-width: 30vw; } } .layout-container header[role="banner"] div #block-erabletheme-header ul:not(.social-media-links--platforms) > li #socials-in-menu-wrapper { display: flex; width: auto; } .layout-container header[role="banner"] div #block-erabletheme-header ul:not(.social-media-links--platforms) > li #socials-in-menu-wrapper li { width: auto; padding: 0 1rem; margin-top: 1rem; } .layout-container header[role="banner"] div #block-erabletheme-header ul:not(.social-media-links--platforms) > li #socials-in-menu-wrapper li a span { color: white; } .layout-container header[role="banner"] div #block-erabletheme-header ul:not(.social-media-links--platforms) > li #socials-in-menu-wrapper li a svg { display: none; } .layout-container header[role="banner"] div #block-erabletheme-header ul:not(.social-media-links--platforms) > li.visible { opacity: 1; } .layout-container header[role="banner"] div #block-erabletheme-header ul:not(.social-media-links--platforms) > li:nth-of-type(1), .layout-container header[role="banner"] div #block-erabletheme-header ul:not(.social-media-links--platforms) > li:nth-of-type(2), .layout-container header[role="banner"] div #block-erabletheme-header ul:not(.social-media-links--platforms) > li:nth-of-type(6) { border-bottom: solid 1px white; padding: 12px 0; } @media (min-width: 1080px) { .layout-container header[role="banner"] div #block-erabletheme-header ul:not(.social-media-links--platforms) { width: 25vw; right: 0; left: auto; } .layout-container header[role="banner"] div #block-erabletheme-header ul:not(.social-media-links--platforms) li { width: calc(100% - $x_margin * 2); } .layout-container header[role="banner"] div #block-erabletheme-header ul:not(.social-media-links--platforms) li a { width: 100%; text-align: left; } } .layout-container header[role="banner"] div #block-erabletheme-header ul.active { padding: 30px 0; max-height: 100vh; } .layout-container > footer { width: 100vw; background-color: white; z-index: 99; box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2); margin-top: 50px; padding: 0 3vw; } .layout-container > footer #footer_middle #footer_left > div { margin-top: 5px; display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; } .layout-container > footer #footer_middle #footer_left > div #block-erabletheme-logorep { width: 30vw; } .layout-container > footer #footer_middle #footer_left > div #block-erabletheme-logorep img { width: 100%; height: auto; } @media (min-width: 760px) { .layout-container > footer #footer_middle #footer_left > div #block-erabletheme-logorep { width: 10vw; } } .layout-container > footer #footer_middle #footer_left > div #block-erabletheme-logoepau { width: 50vw; } .layout-container > footer #footer_middle #footer_left > div #block-erabletheme-logoepau img { width: 100%; height: auto; } @media (min-width: 760px) { .layout-container > footer #footer_middle #footer_left > div #block-erabletheme-logoepau { width: 15vw; padding-left: 2vw; } } @media (min-width: 760px) { .layout-container > footer #footer_middle #footer_left > div { width: 25vw; padding-left: 3vw; } } .layout-container > footer #footer_middle #footer_section { display: flex; width: 100%; justify-content: space-between; align-items: center; margin-top: 10px; margin-bottom: 20px; position: relative; } .layout-container > footer #footer_middle #footer_section #footer_center { padding-left: 2vw; width: 50%; } .layout-container > footer #footer_middle #footer_section #footer_center nav ul { display: flex; justify-content: space-between; } .layout-container > footer #footer_middle #footer_section #footer_center nav ul li a { color: #314e41; font-size: 0.8rem; font-family: 'Marianne', sans-serif; font-weight: 800; text-decoration: underline; } @media (min-width: 760px) { .layout-container > footer #footer_middle #footer_section #footer_center nav ul { width: 50vw; padding: 0 15vw; } } @media (min-width: 760px) { .layout-container > footer #footer_middle #footer_section #footer_center { padding-left: 0; width: auto; } } .layout-container > footer #footer_middle #footer_section #footer_right { width: 30%; } .layout-container > footer #footer_middle #footer_section #footer_right #block-erabletheme-socialmedialinks-2 ul { display: flex; justify-content: space-between; } .layout-container > footer #footer_middle #footer_section #footer_right #block-erabletheme-socialmedialinks-2 ul li a span { font-weight: lighter; font-size: 1.4rem; width: 2.2rem; height: 2.2rem; padding: 0.4rem; border-radius: 1.1rem; color: white; background-color: #038788; } .layout-container > footer #footer_middle #footer_section #footer_right #block-erabletheme-socialmedialinks-2 ul li a svg.ext { display: none; } @media (min-width: 760px) { .layout-container > footer #footer_middle #footer_section #footer_right { width: 25vw; padding-left: 15vw; padding-right: 3vw; } } @media (min-width: 760px) { .layout-container > footer #footer_middle { display: flex; } } @media (min-width: 760px) { .layout-container > footer { padding: 0; } } .slick-container { background: linear-gradient(to bottom, #fcf9ee 80%, white 100%); width: 100vw; border-bottom: solid 2px #038788; } .slick-container div.views-row article { width: 100%; } .slick-container div.views-row article > div:first-of-type { width: 100%; height: 30vh !important; overflow-y: hidden; padding: 0 !important; display: flex; align-items: center; } .slick-container div.views-row article > div:first-of-type > div { width: 100%; } .slick-container div.views-row article > div:first-of-type > div > a { max-width: 100%; } .slick-container div.views-row article > div:first-of-type > div > a img { width: 100%; height: auto; } @media (min-width: 1080px) { .slick-container div.views-row article > div:first-of-type { height: 50vh !important; } } @media (min-width: 760px) { .slick-container div.views-row article .preview_meta { margin-left: 0; margin-right: 0; } .slick-container div.views-row article h2, .slick-container div.views-row article .preview_sous_titre { padding-left: 0; padding-right: 0; } } .slick-container .slick-arrow { display: none !important; width: 2rem; height: 2rem; border-radius: 1.5rem; border: solid 1px #038788; top: unset; bottom: 5%; background-color: rgba(255, 255, 255, 0.4) !important; transition: background-color 0.3s ease; } @media (min-width: 1080px) { .slick-container .slick-arrow { transform: translateY(-5rem); } } .slick-container .slick-arrow:hover { background-color: rgba(255, 255, 255, 0.8) !important; } .slick-container .slick-arrow::before { color: #038788; font-family: 'Marianne', sans-serif; display: block; padding-bottom: 3px; } .slick-container #carousel_dots { position: relative; margin-top: -15px; } .slick-container #carousel_dots ul { position: relative; bottom: 0; } .slick-container #carousel_dots ul li.slick-active button::before { color: #00ff80; } .slick-container #carousel_dots ul li button::before { color: #010101; } @media (min-width: 1080px) { .slick-container #carousel_dots { margin-top: 4vh; } } .slick-container footer { text-align: center; margin-top: 4rem; margin-bottom: 4rem; } .slick-container footer a { text-align: center; color: black; font-family: "Marianne", sans-serif; font-weight: 800; font-size: 0.9rem; background-color: white; border: solid 2px #00ff80; padding: 9px 18px; transition: background-color 0.3s ease; } .slick-container footer a svg { display: none; } .slick-container footer a:hover { background-color: #00ff80; } @media (min-width: 760px) { .slick-container { padding: 0 12.5vw; } .slick-container .slick-prev, .slick-container .slick-next { display: block !important; } .slick-container .slick-prev { left: -5rem; } .slick-container .slick-next { right: -5rem; } } .actu_full div { font-family: "Marianne", sans-serif; font-size: 1rem; line-height: 1.4; } .actu_full .retour_actus { padding-top: 3vh; padding-left: 3vw; } .actu_full .retour_actus a { font-size: 0.8rem; font-weight: 800; color: #038788; } .actu_full .article_meta { padding-left: 3vw; margin: 20px 0; } .actu_full .article_meta div { font-size: 0.8rem; margin-bottom: 5px; } .actu_full h2 { padding-top: 0 !important; margin-bottom: 2rem !important; } .actu_full h2 + div { position: relative; padding: 0 3vw; } .actu_full h2 + div .visually-hidden { width: 0% !important; } .actu_full h2 + div .sous_titre { margin-top: -1.5rem; } .actu_full h2 + div .sous_titre > div > div { font-size: 1.3rem; margin-bottom: 30px; } .actu_full h2 + div > div > div { width: 100%; margin-bottom: 40px; } .actu_full h2 + div > div > div img { width: 100%; height: auto; } .actu_full p { margin-bottom: 1rem; } .actu_full h3, .actu_full h4, .actu_full h5, .actu_full h6 { font-family: "Marianne", sans-serif; font-size: 1.3rem; color: #038788; font-weight: 800; margin-bottom: 1rem; } .actu_full .liens_fixed > div > div:nth-of-type(2), .actu_full .file_fixed > div > div > div { padding: 0 calc($x_margin / 2); text-align: right; margin: 2rem 0; } .actu_full .liens_fixed > div > div:nth-of-type(2) a, .actu_full .file_fixed > div > div > div a { text-align: center; color: black; font-family: "Marianne", sans-serif; font-weight: 800; font-size: 0.9rem; background-color: white; border: solid 2px #00ff80; padding: 9px 18px; transition: background-color 0.3s ease; } .actu_full .liens_fixed > div > div:nth-of-type(2) a svg, .actu_full .file_fixed > div > div > div a svg { display: none; } .actu_full .liens_fixed > div > div:nth-of-type(2) a:hover, .actu_full .file_fixed > div > div > div a:hover { background-color: #00ff80; } .actu_full .liens_fixed > div > div:nth-of-type(2) a, .actu_full .file_fixed > div > div > div a { display: inline-block; } @media (min-width: 1080px) { .actu_full .liens_fixed > div > div:nth-of-type(2), .actu_full .file_fixed > div > div > div { margin-bottom: 0 !important; margin: 0; position: fixed; left: 75vw; bottom: 10vh; } .actu_full .liens_fixed > div > div:nth-of-type(2) > div, .actu_full .file_fixed > div > div > div > div { height: 3vh; } .actu_full .liens_fixed > div > div:nth-of-type(2) a, .actu_full .file_fixed > div > div > div a { max-width: calc(25vw - $x_margin * 2); } } .actu_full .file_fixed span:last-of-type { display: none; } .views-row article > div:first-of-type { width: 100%; height: 30vh; overflow: hidden; padding-left: 3vw; padding-right: 3vw; display: flex; align-items: center; } .views-row article > div:first-of-type a img { height: auto; width: 100%; } @media (min-width: 760px) { .views-row article > div:first-of-type { height: 20vh; } } .views-row article .preview_meta { font-family: "Marianne", sans-serif; font-size: 0.9rem; width: auto; display: flex; justify-content: space-between; color: #038788; border-top: solid 1px #038788; margin: 0 3vw; margin-top: 1.3rem; padding-top: 0.7rem; } .views-row article .preview_meta > div:first-of-type { font-weight: 800; } .views-row article .preview_sous_titre { font-family: "Marianne", sans-serif; font-size: 1.3rem; padding: 5px 3vw; } @media (min-width: 760px) { .views-row article .preview_sous_titre { padding-top: 0; } } .views-row article h2 { font-family: "Barlow", sans-serif; font-size: 2.3rem; padding: 0 3vw; margin-top: 1rem; color: #038788; } .views-row article h2 a { color: #038788; } .ornements_top_over { pointer-events: none; position: absolute; width: 100vw; height: 30vh; right: -55vw; top: -5vh; z-index: 0; transition: left 0.05s ease, top 0.05s ease; } .ornements_top_over > div { position: absolute; background-repeat: no-repeat; background-size: contain; width: 100%; height: 100%; transition: left 0.05s ease, top 0.05s ease; } .ornements_top_over > div:first-of-type { background-image: url(../assets/formes/forme_4.png); top: -3vh; right: 5vw; } .ornements_top_over > div:nth-of-type(2) { background-image: url(../assets/formes/forme_5.png); right: -13vw; } .ornements_top_over > div:nth-of-type(3) { background-image: url(../assets/formes/forme_3.png); top: 4vh; right: -8vw; } @media (min-width: 760px) { .ornements_top_over { left: -35vw; top: -20vw; } .ornements_top_over > div { transform: scaleX(-1); left: -55vw; } .ornements_top_over > div:first-of-type { display: none; } .ornements_top_over > div:nth-of-type(2) { display: none; } .ornements_top_over > div:nth-of-type(3) { background-image: url(../assets/formes/forme_6.png); } } .ornements_top_under { pointer-events: none; display: none; position: absolute; width: 100vw; height: 30vh; left: -30vw; top: 0vw; transition: left 0.05s ease, top 0.05s ease; } .ornements_top_under > div { position: absolute; background-repeat: no-repeat; background-size: contain; width: 100%; height: 100%; transform: scaleX(-1); transition: left 0.05s ease, top 0.05s ease; } .ornements_top_under > div:first-of-type { background-image: url(../assets/formes/forme_4.png); top: -3vh; left: -45vw; } .ornements_top_under > div:nth-of-type(2) { background-image: url(../assets/formes/forme_5.png); left: -60vw; } @media (min-width: 760px) { .ornements_top_under { display: block; } } @media (min-width: 1080px) { .ornements_top_under > div:first-of-type { top: 1vh; left: -50vw; } .ornements_top_under > div:nth-of-type(2) { top: 6vh; left: -56.5vw; } } .ornements_bottom_over { pointer-events: none; position: absolute; width: 100vw; height: 30vh; left: -30vw; bottom: -20vh; } .ornements_bottom_over > div { position: absolute; background-repeat: no-repeat; background-size: contain; width: 100%; height: 100%; } .ornements_bottom_over > div:first-of-type { background-image: url(../assets/formes/forme_1.png); left: 8vw; bottom: -4vh; } .ornements_bottom_over > div:nth-of-type(2) { background-image: url(../assets/formes/forme_2.png); bottom: -15vh; left: -3vw; } @media (min-width: 760px) { .ornements_bottom_over { left: unset; right: -8vw; bottom: -25vh; } .ornements_bottom_over > div { transform: scaleX(-1); } .ornements_bottom_over > div:nth-of-type(2) { left: 18vw; bottom: -11vh; } } @media (min-width: 1080px) { .ornements_bottom_over > div:first-of-type { bottom: 6vh; left: 20vw; } .ornements_bottom_over > div:nth-of-type(2) { bottom: -9vh; left: 25vw; } } .fullpage.actus .ornements_top_over, .fullpage.actus .ornements_top_under { top: -12vh; } .fullpage.actus .ornements_bottom_over { bottom: -28vh; } .fullpage.actus .ornements_bottom_over > div:nth-of-type(2) { bottom: -10vh; left: -7vh; } @media (min-width: 760px) { .fullpage.actus { width: auto; margin-left: 3vw; margin-right: 3vw; } .fullpage.actus .actus_list { display: grid; grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .fullpage.actus .actus_list { grid-template-columns: repeat(3, 1fr); } .fullpage.actus .ornements_top_over > div:nth-of-type(3) { top: -28vh; } .fullpage.actus .ornements_bottom_over > div:first-of-type { bottom: 0vh; left: -3vw; } .fullpage.actus .ornements_bottom_over > div:nth-of-type(2) { left: 6vh; } } .carousel_container { position: relative; } .carousel_container .ornements_carousel_top { position: absolute; display: none; background-repeat: no-repeat; background-size: contain; background-image: url(../assets/formes/forme_5.png); } @media (min-width: 760px) { .carousel_container .ornements_carousel_top { display: block; width: 20vw; height: 50vh; top: -25vh; left: 3vw; transform: rotate(-90deg); } } @media (min-width: 1080px) { .carousel_container .ornements_carousel_top { top: 20vh; left: -10vw; height: 30vh; } } .carousel_container .ornements_carousel_bottom { position: absolute; display: none; overflow: hidden; } @media (min-width: 760px) { .carousel_container .ornements_carousel_bottom { display: block; width: 20vw; height: 50vh; right: 0; bottom: 1px; } .carousel_container .ornements_carousel_bottom > div:first-of-type { width: 100%; height: 100%; background-repeat: no-repeat; background-size: contain; background-image: url(../assets/formes/forme_5.png); position: absolute; top: 35vh; } .carousel_container .ornements_carousel_bottom > div:nth-of-type(2) { width: 100%; height: 100%; background-repeat: no-repeat; background-size: contain; background-image: url(../assets/formes/forme_2.png); position: absolute; top: 40vh; left: 12vw; } } @media (min-width: 1080px) { .carousel_container .ornements_carousel_bottom { width: 12vw; bottom: unset; top: 0; right: -2vw; } .carousel_container .ornements_carousel_bottom > div:first-of-type { top: -16vh; } .carousel_container .ornements_carousel_bottom > div:nth-of-type(2) { top: -8vh; left: 4vw; } } .ornements_presentation_left { pointer-events: none; position: absolute !important; height: 20vh; width: 20vw; bottom: 0; left: 0; z-index: 0; overflow: hidden; } .ornements_presentation_left > div { background-repeat: no-repeat; background-size: contain; position: absolute; width: 100%; height: 100%; } .ornements_presentation_left > div:first-of-type { background-image: url(../assets/formes/forme_4.png); transform: rotate(180deg); width: 200%; left: -20vw; bottom: -8vh; } .ornements_presentation_left > div:nth-of-type(2) { background-image: url(../assets/formes/forme_5.png); transform: rotate(180deg); width: 130%; left: -10vw; bottom: -5vh; } @media (min-width: 760px) { .ornements_presentation_left > div:nth-of-type(2) { width: 170%; height: 120%; left: -21vw; bottom: -3vh; } } .ornements_presentation_left > div:nth-of-type(3) { background-image: url(../assets/formes/forme_3.png); transform: rotate(180deg); position: absolute; width: 100%; height: 100%; width: 200%; left: -22vw; bottom: -3vh; } .ornements_presentation_right { pointer-events: none; position: absolute !important; height: 20vh; width: 20vw; bottom: 0; right: 0; z-index: 0; overflow: hidden; } .ornements_presentation_right > div { background-repeat: no-repeat; background-size: contain; position: absolute; width: 100%; height: 100%; } .ornements_presentation_right > div:first-of-type { background-image: url(../assets/formes/forme_1.png); transform: rotate(-90deg); right: -15vw; bottom: -6vh; } @media (min-width: 760px) { .ornements_presentation_right > div:first-of-type { bottom: -3vh; right: -6vw; } } .ornements_presentation_right > div:nth-of-type(2) { background-image: url(../assets/formes/forme_2.png); bottom: -12vh; right: -12vw; } .ornements_consultation_left { pointer-events: none; position: absolute !important; height: 20vh; width: 30vw; bottom: -8vh; left: 0; z-index: 0; overflow: hidden; } .ornements_consultation_left > div { background-repeat: no-repeat; background-size: contain; position: absolute; width: 100%; height: 100%; } .ornements_consultation_left > div:first-of-type { background-image: url(../assets/formes/forme_4.png); transform: rotate(180deg); width: 200%; height: 120%; left: -30vw; bottom: -10vh; } @media (min-width: 1080px) { .ornements_consultation_left > div:first-of-type { transform: rotate(0deg); bottom: 5vh; left: 0; width: 60%; } } .ornements_consultation_left > div:nth-of-type(2) { background-image: url(../assets/formes/forme_5.png); transform: rotate(180deg); left: -12vw; } @media (min-width: 1080px) { .ornements_consultation_left > div:nth-of-type(2) { left: -20vw; top: -5vh; } } @media (min-width: 1080px) { .ornements_consultation_left { top: 0; } } .ornements_consultation_right { pointer-events: none; position: absolute !important; height: 20vh; width: 30vw; bottom: -8vh; right: 0; z-index: 0; overflow: hidden; } .ornements_consultation_right > div { background-repeat: no-repeat; background-size: contain; position: absolute; width: 100%; height: 100%; } .ornements_consultation_right > div:first-of-type { background-image: url(../assets/formes/forme_1.png); transform: rotate(-90deg); width: 80%; height: 80%; right: -8vw; bottom: -2vh; } @media (min-width: 1080px) { .ornements_consultation_right > div:first-of-type { right: -3vw; bottom: 6vh; transform: rotate(180deg); } } .ornements_consultation_right > div:nth-of-type(2) { background-image: url(../assets/formes/forme_3.png); transform: rotate(180deg); right: -4vw; width: 100%; } @media (min-width: 760px) { .ornements_consultation_right > div:nth-of-type(2) { width: 30%; bottom: 3vh; } } @media (min-width: 1080px) { .ornements_consultation_right > div:nth-of-type(2) { transform: none; width: 60%; } } @media (min-width: 1080px) { .ornements_consultation_right { bottom: unset; top: 0; right: 0; } } .login, .user { width: 100vw; height: 50vh; background: linear-gradient(to bottom, #fcf9ee 80%, white 100%); padding-top: 15vh; } .login > h2, .user > h2 { font-family: "Barlow", sans-serif; color: black; font-size: 1.6rem; text-align: center; } .login > div, .user > div { height: 100%; } .login > div > div:not(.hidden), .user > div > div:not(.hidden) { margin-top: 5vh !important; display: flex; align-items: center; justify-content: center; } .login > div > div:not(.hidden) form, .user > div > div:not(.hidden) form { font-family: 'Marianne', sans-serif; } .login > div > div:not(.hidden) form .form-item, .user > div > div:not(.hidden) form .form-item { margin: 1.8rem 0; } .login > div > div:not(.hidden) form .form-item .form-checkbox, .user > div > div:not(.hidden) form .form-item .form-checkbox { width: 1rem; height: 1rem; -webkit-appearance: auto; } .login > div > div:not(.hidden) form .form-item .form-required, .user > div > div:not(.hidden) form .form-item .form-required { font-weight: 800; padding-right: 1rem; } .login > div > div:not(.hidden) form .form-item .description, .user > div > div:not(.hidden) form .form-item .description { margin-top: 0.3rem; } .login > div > div:not(.hidden) form input, .user > div > div:not(.hidden) form input { border: solid 1px #038788; } .login > div > div:not(.hidden) form .button, .user > div > div:not(.hidden) form .button { font-family: 'Marianne', sans-serif; font-weight: 800; border: solid 1px #038788; background-color: white; cursor: pointer; } .login > div > div:not(.hidden) form .button:hover, .user > div > div:not(.hidden) form .button:hover { background-color: rgba(255, 255, 255, 0.6); } .user .contextual-region > div { display: flex; font-family: 'Marianne', sans-serif; } .user .contextual-region > div > h4 { padding-right: 0.5rem; } /* PAGES */ .home_introduction { position: relative; border-bottom: solid 2px #038788; width: 100%; padding: 4rem 0; } .home_introduction h2 { display: none; } .home_introduction > div { z-index: 1; position: relative; } .home_introduction > .logo { text-align: center; width: 100%; margin-bottom: 3rem; } .home_introduction > .logo img { width: 35vw; } @media (min-width: 760px) { .home_introduction > .logo img { width: 25vw; } } @media (min-width: 1080px) { .home_introduction > .logo img { width: 18vw; } } .home_introduction article > div { height: unset !important; } .home_introduction article > div p { font-family: "Marianne", sans-serif; font-size: 1rem; line-height: 1.4; } @media (min-width: 1080px) { .home_introduction article > div p { margin-left: 12.5vw; max-width: 50vw; } } @media (min-width: 760px) { .home_introduction article > div { padding: 0 !important; } } .home_introduction div.more-link { margin-top: 3rem; margin-bottom: 1.5rem; display: flex; justify-content: center; align-items: center; } .home_introduction div.more-link a { text-align: center; color: black; font-family: "Marianne", sans-serif; font-weight: 800; font-size: 0.9rem; background-color: white; border: solid 2px #00ff80; padding: 9px 18px; transition: background-color 0.3s ease; } .home_introduction div.more-link a svg { display: none; } .home_introduction div.more-link a:hover { background-color: #00ff80; } @media (min-width: 1080px) { .home_introduction div.more-link { display: flex; justify-content: flex-end; } } @media (min-width: 760px) { .home_introduction { padding-left: 12.5vw; padding-right: 12.5vw; } } .home_consultation { position: relative; background: linear-gradient(to bottom, #fcf9ee 80%, white 100%); width: 100%; padding: 4rem 0; } .home_consultation h2 { font-family: "Barlow", sans-serif; font-size: 2.3rem; padding: 0 3vw; margin-top: 1rem; color: #038788; margin-bottom: 1.2rem; } .home_consultation h2 a { color: #038788; } @media (min-width: 760px) { .home_consultation h2 { padding-left: 0 !important; } } @media (min-width: 1080px) { .home_consultation h2 { margin-left: 12.5vw; max-width: 50vw; } } .home_consultation h2 + div h2, .home_consultation h2 + div h3, .home_consultation h2 + div h4 { font-family: "Barlow", sans-serif; color: black; font-size: 1.6rem; } @media (min-width: 1080px) { .home_consultation h2 + div h2, .home_consultation h2 + div h3, .home_consultation h2 + div h4 { max-width: 50vw; margin-left: 12.5vw; } } .home_consultation article > div { height: unset !important; } .home_consultation article > div p { font-family: "Marianne", sans-serif; font-size: 1rem; line-height: 1.4; } @media (min-width: 1080px) { .home_consultation article > div p { margin-left: 12.5vw; max-width: 50vw; } } @media (min-width: 760px) { .home_consultation article > div { padding: 0 !important; } } .home_consultation div.more-link { margin-top: 3rem; display: flex; justify-content: center; align-items: center; } .home_consultation div.more-link a { text-align: center; color: black; font-family: "Marianne", sans-serif; font-weight: 800; font-size: 0.9rem; background-color: white; border: solid 2px #00ff80; padding: 9px 18px; transition: background-color 0.3s ease; } .home_consultation div.more-link a svg { display: none; } .home_consultation div.more-link a:hover { background-color: #00ff80; } @media (min-width: 1080px) { .home_consultation div.more-link { display: flex; justify-content: flex-end; } } @media (min-width: 760px) { .home_consultation { padding-left: 12.5vw; padding-right: 12.5vw; } } .fullpage { margin-bottom: 10vh; margin-top: -3vh; padding-top: 3vh; background: linear-gradient(to bottom, #fcf9ee 80%, white 100%); position: relative; } .fullpage > h2 { font-family: "Barlow", sans-serif; font-size: 2.3rem; padding: 0 3vw; margin-top: 1rem; color: #038788; margin-top: 5vh; margin-bottom: 7vh; background-color: #fcf9ee; z-index: 1; position: relative; width: auto; display: inline-block; } .fullpage > h2 a { color: #038788; } @media (min-width: 760px) { .fullpage > h2 { background-color: unset; } } .fullpage .legende { display: block !important; font-size: 0.8rem; color: #314e41; } .fullpage .fullpage_content > h2 { font-family: "Barlow", sans-serif; font-size: 2.3rem; padding: 0 3vw; margin-top: 1rem; color: #038788; margin-top: 5vh; margin-bottom: 1rem; background-color: #fcf9ee; z-index: 1; position: relative; width: auto; display: inline-block; } .fullpage .fullpage_content > h2 a { color: #038788; } @media (min-width: 760px) { .fullpage .fullpage_content > h2 { background-color: unset; } } .fullpage .fullpage_content .sous_titre { font-family: "Marianne", sans-serif; font-size: 1rem; line-height: 1.4; font-size: 1.3rem; padding: 0 3vw; } .fullpage .fullpage_content p { font-family: "Marianne", sans-serif; font-size: 1rem; line-height: 1.4; padding: 0 3vw; margin-bottom: 2rem; } .fullpage .fullpage_content p:first-of-type { margin-top: 7vh; } .fullpage .fullpage_content .liens_fixed > div > div, .fullpage .fullpage_content .file_fixed > div > div { padding: 0 calc($x_margin / 2); text-align: right; margin: 2rem 0; } .fullpage .fullpage_content .liens_fixed > div > div a, .fullpage .fullpage_content .file_fixed > div > div a { text-align: center; color: black; font-family: "Marianne", sans-serif; font-weight: 800; font-size: 0.9rem; background-color: white; border: solid 2px #00ff80; padding: 9px 18px; transition: background-color 0.3s ease; } .fullpage .fullpage_content .liens_fixed > div > div a svg, .fullpage .fullpage_content .file_fixed > div > div a svg { display: none; } .fullpage .fullpage_content .liens_fixed > div > div a:hover, .fullpage .fullpage_content .file_fixed > div > div a:hover { background-color: #00ff80; } .fullpage .fullpage_content .liens_fixed > div > div a, .fullpage .fullpage_content .file_fixed > div > div a { display: inline-block; } @media (min-width: 1080px) { .fullpage .fullpage_content .liens_fixed > div > div, .fullpage .fullpage_content .file_fixed > div > div { margin-bottom: 0 !important; margin: 0; position: fixed; left: 75vw; bottom: 10vh; } .fullpage .fullpage_content .liens_fixed > div > div > div, .fullpage .fullpage_content .file_fixed > div > div > div { height: 3vh; } .fullpage .fullpage_content .liens_fixed > div > div a, .fullpage .fullpage_content .file_fixed > div > div a { max-width: calc(25vw - $x_margin * 2); } } .fullpage .fullpage_content .file_fixed span:last-of-type { display: none; } .fullpage .fullpage_content h3, .fullpage .fullpage_content h4, .fullpage .fullpage_content h5, .fullpage .fullpage_content h6 { font-family: "Marianne", sans-serif; font-size: 1.3rem; color: #038788; font-weight: 800; margin-bottom: 1rem; padding-left: 3vw; } .fullpage .views-row { margin-bottom: 8vh; } @media (min-width: 760px) { .fullpage { margin-top: 12vh; padding-top: 0; width: 75vw; margin-left: 12.5vw; } } @media (min-width: 1080px) { .fullpage { width: 50%; margin-left: 25%; } } .content_gouvernance .views-row { margin-bottom: 2vh; } .content_gouvernance .views-row article > h2 { margin-bottom: 2vh; font-family: "Barlow", sans-serif; color: black; font-size: 1.6rem; } .content_gouvernance .views-row article > h2 + div > div { font-family: "Marianne", sans-serif; font-size: 1rem; line-height: 1.4; margin-bottom: 2em; } .content_gouvernance .views-row article > div:first-of-type { height: unset; flex-direction: column; } .content_gouvernance .views-row article .paragraph--type--membre-equipe { height: auto; display: grid; grid-template-columns: 30vw auto 1fr; grid-auto-rows: auto; margin-bottom: 5vh; } .content_gouvernance .views-row article .paragraph--type--membre-equipe > div:first-of-type { grid-row: 1 / 3; display: flex; align-items: center; } .content_gouvernance .views-row article .paragraph--type--membre-equipe > div:first-of-type > div { width: 20vw; height: 20vw; overflow: hidden; border-radius: 10vw; } .content_gouvernance .views-row article .paragraph--type--membre-equipe > div:first-of-type > div img { width: 100%; height: 100%; object-fit: cover; } .content_gouvernance .views-row article .paragraph--type--membre-equipe > div:nth-of-type(2), .content_gouvernance .views-row article .paragraph--type--membre-equipe > div:nth-of-type(3) { font-family: "Marianne", sans-serif; font-size: 1.3rem; color: #038788; font-weight: 800; margin-bottom: 2vh; align-self: flex-end; } .content_gouvernance .views-row article .paragraph--type--membre-equipe > div:nth-of-type(3) { padding-left: 0.5rem; } .content_gouvernance .views-row article .paragraph--type--membre-equipe > div:last-of-type { font-family: "Marianne", sans-serif; font-size: 1rem; line-height: 1.4; grid-column: 2 / 4; } @media (min-width: 760px) { .content_gouvernance .views-row article .paragraph--type--membre-equipe { grid-template-columns: 10vw auto 1fr; } .content_gouvernance .views-row article .paragraph--type--membre-equipe > div:first-of-type > div { width: 10vw; height: 10vw; border-radius: 5vw; } .content_gouvernance .views-row article .paragraph--type--membre-equipe > div:nth-of-type(2) { padding-left: 3vw; } .content_gouvernance .views-row article .paragraph--type--membre-equipe > div:last-of-type { padding-left: 3vw; } } .content_partenaires .views-row { margin-bottom: 2vh; } .content_partenaires .views-row article > h2 { margin-bottom: 2vh; font-family: "Barlow", sans-serif; color: black; font-size: 1.6rem; } .content_partenaires .views-row article > div:first-of-type { height: unset !important; display: grid; grid-template-columns: 0.3fr 1fr; align-items: center; } .content_partenaires .views-row article > div:first-of-type > div:first-of-type > div { width: 30vw; height: auto; overflow: hidden; margin-bottom: 1rem; } .content_partenaires .views-row article > div:first-of-type > div:first-of-type > div img { width: 100%; height: auto; mix-blend-mode: darken; } @media (min-width: 760px) { .content_partenaires .views-row article > div:first-of-type > div:first-of-type > div { width: 20vw; } } @media (min-width: 1080px) { .content_partenaires .views-row article > div:first-of-type > div:first-of-type > div { width: 10vw; } } .content_partenaires .views-row article > div:first-of-type > div:nth-of-type(2) { font-family: "Marianne", sans-serif; font-size: 1rem; line-height: 1.4; margin-bottom: 2rem; padding-left: 3vw; } .content_partenaires .views-row article > div:first-of-type > div:last-of-type { grid-column: 1 / 3; width: 100%; text-align: right; padding-bottom: 2rem; margin-top: 1rem; } .content_partenaires .views-row article > div:first-of-type > div:last-of-type a { text-align: center; color: black; font-family: "Marianne", sans-serif; font-weight: 800; font-size: 0.9rem; background-color: white; border: solid 2px #00ff80; padding: 9px 18px; transition: background-color 0.3s ease; } .content_partenaires .views-row article > div:first-of-type > div:last-of-type a svg { display: none; } .content_partenaires .views-row article > div:first-of-type > div:last-of-type a:hover { background-color: #00ff80; }