diff --git a/web/modules/custom/erable_mod/assets/svg/carte-old.svg b/web/modules/custom/erable_mod/assets/svg/carte-old.svg deleted file mode 100644 index 5ee852a..0000000 --- a/web/modules/custom/erable_mod/assets/svg/carte-old.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/web/modules/custom/erable_mod/assets/svg/carte.svg b/web/modules/custom/erable_mod/assets/svg/carte.svg index 7700691..df4fcb7 100644 --- a/web/modules/custom/erable_mod/assets/svg/carte.svg +++ b/web/modules/custom/erable_mod/assets/svg/carte.svg @@ -5,112 +5,134 @@ fill="none" version="1.1" id="svg83" + sodipodi:docname="carte.svg" + inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> + diff --git a/web/modules/custom/erable_mod/assets/svg/feuille.svg b/web/modules/custom/erable_mod/assets/svg/feuille.svg deleted file mode 100644 index d9f7405..0000000 --- a/web/modules/custom/erable_mod/assets/svg/feuille.svg +++ /dev/null @@ -1,25 +0,0 @@ - - - - - diff --git a/web/modules/custom/erable_mod/assets/svg/point.svg b/web/modules/custom/erable_mod/assets/svg/point.svg new file mode 100644 index 0000000..a4ae15a --- /dev/null +++ b/web/modules/custom/erable_mod/assets/svg/point.svg @@ -0,0 +1,21 @@ + + + + + diff --git a/web/modules/custom/erable_mod/src/Plugin/Block/SitesMap.php b/web/modules/custom/erable_mod/src/Plugin/Block/SitesMap.php index 1e4b184..c320c6b 100644 --- a/web/modules/custom/erable_mod/src/Plugin/Block/SitesMap.php +++ b/web/modules/custom/erable_mod/src/Plugin/Block/SitesMap.php @@ -55,7 +55,7 @@ class SitesMap extends BlockBase { $lon = $geofield->lon; $lat = $geofield->lat; - $svg_template_path = DRUPAL_ROOT . '/modules/custom/erable_mod/assets/svg/feuille.svg'; + $svg_template_path = DRUPAL_ROOT . '/modules/custom/erable_mod/assets/svg/point.svg'; $svg_template= file_get_contents($svg_template_path); $sites_paths .= str_replace( ['$index', '$lon', '$lat', '$href', '$title', '$place'], diff --git a/web/modules/custom/erable_mod/templates/svg-mapsites.html.twig b/web/modules/custom/erable_mod/templates/svg-mapsites.html.twig index e88f0b7..870a240 100644 --- a/web/modules/custom/erable_mod/templates/svg-mapsites.html.twig +++ b/web/modules/custom/erable_mod/templates/svg-mapsites.html.twig @@ -1,6 +1,9 @@
{{ intro|raw }}
+
{# diff --git a/web/themes/erabletheme/css/styles.css b/web/themes/erabletheme/css/styles.css index ef86f81..3013b7f 100644 --- a/web/themes/erabletheme/css/styles.css +++ b/web/themes/erabletheme/css/styles.css @@ -25,17 +25,11 @@ font-weight: 800; font-style: italic; } -/* Barlow */ +/* Vogun */ @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; -} -@font-face { - font-family: "Barlow Condensed"; - src: url("../fonts/Barlow/BarlowCondensed-Regular.woff2") format("woff2"); - font-weight: normal; + font-family: "Vogun"; + src: url("../fonts/Vogun/Vogun-Regular.woff2") format("woff2"); + font-weight: 500; font-style: normal; } /* BREAKPOINTS */ @@ -46,7 +40,10 @@ min-height: 100vh; } -/* SIZES */ +/* FAMILIES */ +/* FONT SIZES — échelle unique en rem (base 16px) */ +/* LINE HEIGHTS */ +/* FONT WEIGHTS */ /* MIXINS */ a { text-decoration: none; @@ -61,6 +58,8 @@ a { body { height: 100vh; overflow: scroll; + background-color: #f9f9f9; + overflow-x: hidden; } body .layout-container { position: relative; @@ -83,11 +82,9 @@ body .layout-container footer { z-index: 0; } body .layout-container #background { + display: none; z-index: -1; } -body { - overflow-x: hidden; -} html { overflow: hidden; @@ -117,6 +114,36 @@ em { display: none; } +footer.fluo_links { + display: flex; + justify-content: center; + margin-top: 2rem; +} +footer.fluo_links a { + font-family: "Vogun", serif; + font-weight: 500; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.2; + display: inline-block; + text-align: center; + background-color: white; + border: none; + padding: 0.75rem 1.5rem; + text-decoration: none; + transition: color 0.2s ease; + text-wrap: nowrap !important; +} +footer.fluo_links a svg { + display: none; +} +footer.fluo_links a:hover { + color: black; +} +footer.fluo_links p { + margin: 0; +} + /* * { border: solid 1px red !important; } */ @@ -124,171 +151,108 @@ em { .layout-container header[role=banner] { width: 100%; background-color: white; -} -@media (min-width: 1080px) { - .layout-container header[role=banner] { - position: sticky; - top: -12vh; - box-shadow: none; - } + position: sticky; + top: 0; + z-index: 99; + box-shadow: none; } .layout-container header[role=banner] > div:first-of-type { z-index: 99; position: relative; - display: grid; - grid-template-columns: repeat(16, 1fr); + display: flex; + align-items: center; + height: 4.5rem; } .layout-container header[role=banner] > div:first-of-type > div { - height: 12vh; - grid-row: 1; - max-height: 100%; - width: 100%; + height: 4.5rem; + display: flex; + align-items: center; } .layout-container header[role=banner] > div:first-of-type > div > div { - width: 100%; display: flex; - justify-content: center; align-items: center; + height: 100%; } .layout-container header[role=banner] > div:first-of-type > div > div > div { - height: 12vh; + height: 100%; } .layout-container header[role=banner] > div:first-of-type > div > div > div a { - display: block; - height: 100%; - width: 100%; display: flex; - justify-content: center; align-items: center; + height: 100%; } .layout-container header[role=banner] > div:first-of-type > div > div > div img { width: auto; height: auto; - max-width: 100%; - max-height: 100%; + max-height: 3.5rem; } -.layout-container header[role=banner] > div:first-of-type #block-erabletheme-logorep-2 img { - padding-top: 0.8rem; - padding-bottom: 0.8rem; +.layout-container header[role=banner] > div:first-of-type #block-erabletheme-logorep-2, +.layout-container header[role=banner] > div:first-of-type #block-erabletheme-logoepau-2, +.layout-container header[role=banner] > div:first-of-type #block-erabletheme-logoerable { + padding: 0 1rem; } .layout-container header[role=banner] > div:first-of-type #block-erabletheme-logorep-2 { - grid-column: 1/5; -} -@media (min-width: 760px) { - .layout-container header[role=banner] > div:first-of-type #block-erabletheme-logorep-2 { - grid-column: 0/4; - } -} -@media (min-width: 1080px) { - .layout-container header[role=banner] > div:first-of-type #block-erabletheme-logorep-2 { - grid-column: 1/3; - } -} -.layout-container header[role=banner] > div:first-of-type #block-erabletheme-logoepau-2 { - grid-column: 5/9; -} -.layout-container header[role=banner] > div:first-of-type #block-erabletheme-logoepau-2 > div { - align-items: flex-start; - justify-content: flex-start; -} -.layout-container header[role=banner] > div:first-of-type #block-erabletheme-logoepau-2 > div > div > a > img { - transform: translateX(-20px); - padding-top: 1.2rem; - padding-bottom: 1.2rem; -} -@media (min-width: 760px) { - .layout-container header[role=banner] > div:first-of-type #block-erabletheme-logoepau-2 { - grid-column: 4/7; - } - .layout-container header[role=banner] > div:first-of-type #block-erabletheme-logoepau-2 > div > div > a > img { - padding-top: 1.5rem; - padding-bottom: 1.5rem; - } -} -@media (min-width: 1080px) { - .layout-container header[role=banner] > div:first-of-type #block-erabletheme-logoepau-2 { - grid-column: 3/8; - } -} -@media (min-width: 1600px) { - .layout-container header[role=banner] > div:first-of-type #block-erabletheme-logoepau-2 { - grid-column: 3/6; - } - .layout-container header[role=banner] > div:first-of-type #block-erabletheme-logoepau-2 > div > div > a > img { - transform: translateX(-40px); - padding-top: 30px; - padding-bottom: 30px; - } + padding-left: 1.25rem; } .layout-container header[role=banner] > div:first-of-type #block-erabletheme-logoerable { - grid-column: 10/15; -} -@media (min-width: 1080px) { - .layout-container header[role=banner] > div:first-of-type #block-erabletheme-logoerable { - grid-column: 14/16; - } -} -.layout-container header[role=banner] > div:first-of-type #block-erabletheme-logoerable img { - padding-right: 1rem; - padding-top: 0.8rem; - padding-bottom: 0.8rem; + margin-left: auto; } .layout-container header[role=banner] > div:first-of-type #block-erabletheme-socialmedialinks { display: none; } .layout-container header[role=banner] > div:first-of-type #block-erabletheme-header { - grid-column: 15/17; -} -@media (min-width: 1080px) { - .layout-container header[role=banner] > div:first-of-type #block-erabletheme-header { - grid-column: 16/17; - } + height: 4.5rem; } .layout-container header[role=banner] > div:first-of-type #block-erabletheme-header #hamburger { cursor: pointer; - width: auto; - height: 100%; - background-color: #00ff80; + width: 4.5rem; + height: 4.5rem; + background-color: #33ffc4; display: flex; - flex-direction: column; align-items: center; - justify-content: space-around; - padding: 0.5rem 0; -} -.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header #hamburger h2 { - font-size: 0.8rem; - font-family: "Marianne", sans-serif; - font-weight: 800; - text-align: center; + justify-content: center; } .layout-container header[role=banner] > div:first-of-type #block-erabletheme-header #hamburger .burger-icon { - width: 2rem; - height: 1.5rem; - display: flex; - flex-direction: column; - justify-content: space-between; - padding-bottom: 0.5rem; + position: relative; + width: 1.75rem; + height: 1rem; } .layout-container header[role=banner] > div:first-of-type #block-erabletheme-header #hamburger .burger-icon div { - border-bottom: solid 1px black; - width: 100%; + position: absolute; + left: 0; + right: 0; + height: 2px; background-color: black; - opacity: 1; - transition: opacity 0.2s ease-out, transform 0.4s ease-out; - transform: none; + border-radius: 1px; + transform-origin: center center; + transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), top 0.35s cubic-bezier(0.4, 0, 0.2, 1), bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease; } -.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header #hamburger .burger-icon.open div:first-of-type { - transform: translate(0rem, 0.5rem) rotate(-45deg); +.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header #hamburger .burger-icon div:nth-of-type(1) { + top: 0; +} +.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header #hamburger .burger-icon div:nth-of-type(2) { + top: 50%; + transform: translateY(-50%); + opacity: 1; +} +.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header #hamburger .burger-icon div:nth-of-type(3) { + bottom: 0; +} +.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header #hamburger .burger-icon.open div:nth-of-type(1) { + top: 50%; + transform: translateY(-50%) rotate(45deg); } .layout-container header[role=banner] > div:first-of-type #block-erabletheme-header #hamburger .burger-icon.open div:nth-of-type(2) { opacity: 0; } -.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header #hamburger .burger-icon.open div:last-of-type { - transform: translate(0rem, -0.5rem) rotate(45deg); +.layout-container header[role=banner] > div:first-of-type #block-erabletheme-header #hamburger .burger-icon.open div:nth-of-type(3) { + bottom: 50%; + transform: translateY(50%) rotate(-45deg); } .layout-container header[role=banner] > div:first-of-type #block-erabletheme-header ul:not(.social-media-links--platforms) { position: absolute; left: 0; + top: 4.5rem; z-index: -1; display: none; height: auto; @@ -376,7 +340,7 @@ em { .layout-container header[role=banner] > div:first-of-type #block-erabletheme-header ul.active { padding: 30px 0; padding-top: 3rem; - max-height: 100vh; + max-height: calc(100vh - 4.5rem); overflow-y: scroll; } .layout-container header[role=banner] > div:first-of-type #block-erabletheme-navigationprincipale { @@ -406,7 +370,7 @@ em { } .layout-container #block-erabletheme-navigationprincipale ul li { font-family: "Marianne", sans-serif; - font-size: 0.9rem; + font-size: 0.9375rem; padding: 9px 16px; background-color: white; transition: background-color 0.3s ease; @@ -423,14 +387,14 @@ em { margin-left: 0.2rem; } .layout-container #block-erabletheme-navigationprincipale ul li:hover, .layout-container #block-erabletheme-navigationprincipale ul li.submenu-open { - background-color: #00ff80; + background-color: #33ffc4; } .layout-container #block-erabletheme-navigationprincipale ul li a { font-weight: 800; color: black; } .layout-container #block-erabletheme-navigationprincipale ul li a:is-active { - background-color: #00ff80; + background-color: #33ffc4; } .layout-container #block-erabletheme-leprogramme { position: fixed; @@ -448,7 +412,7 @@ em { } .layout-container #block-erabletheme-leprogramme ul li { font-family: "Marianne", sans-serif; - font-size: 0.9rem; + font-size: 0.9375rem; margin: 0.5rem 0; } .layout-container #block-erabletheme-leprogramme ul li a { @@ -462,129 +426,83 @@ em { width: 100%; background-color: white; margin-top: 50px; - padding: 0 3vw !important; + padding: 1rem 3vw; + box-sizing: border-box; } -@media screen and (min-width: 1080px) { +@media (min-width: 1080px) { .layout-container > footer { - width: calc(100% - 50vw); + width: 50vw; margin-left: 25vw; + padding: 1rem; } } .layout-container > footer #footer_middle { display: flex; -} -.layout-container > footer #footer_middle #footer_left > div { - margin-top: 5px; - display: flex; - justify-content: start; + flex-wrap: wrap; + justify-content: space-between; align-items: center; - flex-wrap: nowrap; + gap: 1.5rem; } -.layout-container > footer #footer_middle #footer_left > div #block-erabletheme-logorep { +.layout-container > footer #footer_left > div { + display: flex; + align-items: center; + gap: 1rem; +} +.layout-container > footer #footer_left > div #block-erabletheme-logorep img { max-width: 100px; -} -.layout-container > footer #footer_middle #footer_left > div #block-erabletheme-logorep img { - width: 100%; height: auto; } -.layout-container > footer #footer_middle #footer_left > div #block-erabletheme-logoepau { +.layout-container > footer #footer_left > div #block-erabletheme-logoepau img { max-width: 150px; -} -.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 { - padding-left: 2vw; - } -} -.layout-container > footer #footer_middle #footer_section { +.layout-container > footer #footer_section { display: flex; - width: 100%; - justify-content: space-between; align-items: center; - margin-top: 10px; - margin-bottom: 20px; - position: relative; + gap: 1.5rem; } -.layout-container > footer #footer_middle #footer_section #footer_center { - width: 100%; -} -.layout-container > footer #footer_middle #footer_section #footer_center > div { +.layout-container > footer #footer_center > div { display: flex; - justify-content: space-around; + align-items: center; + gap: 1.5rem; } -.layout-container > footer #footer_middle #footer_section #footer_center > div nav ul { +.layout-container > footer #footer_center > div nav ul { display: flex; - justify-content: space-between; + gap: 1.5rem; + margin: 0; + padding: 0; + list-style: none; } -.layout-container > footer #footer_middle #footer_section #footer_center > div nav ul li a { - color: #314e41; +.layout-container > footer #footer_center > div nav ul li a { + color: #4a4a49; font-family: "Marianne", sans-serif; font-weight: 800; + font-size: 0.8125rem; text-decoration: underline; - font-size: 0.6rem; - text-align: center; - display: inline-block; line-height: 1.2; } -.layout-container > footer #footer_middle #footer_section #footer_center > div nav ul li:last-of-type { - margin-left: 1rem; -} -.layout-container > footer #footer_middle #footer_section #footer_center > div nav ul:first-of-type { - margin-left: 1rem; -} -.layout-container > footer #footer_middle #footer_section #footer_center > div nav ul:last-of-type { - margin-right: 1rem; -} -@media (min-width: 760px) { - .layout-container > footer #footer_middle #footer_section #footer_center { - padding-left: 0; - } -} -.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 { +.layout-container > footer #footer_right #block-erabletheme-socialmedialinks-2 ul { display: flex; - justify-content: end; + gap: 0.5rem; + margin: 0; + padding: 0; + list-style: none; } -.layout-container > footer #footer_middle #footer_section #footer_right #block-erabletheme-socialmedialinks-2 ul li a span { - font-weight: lighter; - font-size: 0.8rem; +.layout-container > footer #footer_right #block-erabletheme-socialmedialinks-2 ul a span { + display: flex; + align-items: center; + justify-content: center; width: 1.6rem; height: 1.6rem; - padding-top: 0.2rem; - border-radius: 0.8rem; - color: white; - background-color: #038788; - display: flex; - justify-content: center; - align-items: center; + border-radius: 50%; + background-color: #33ffc4; + color: #4a4a49; + font-size: 0.8rem; + font-weight: lighter; } -.layout-container > footer #footer_middle #footer_section #footer_right #block-erabletheme-socialmedialinks-2 ul li a svg.ext { +.layout-container > footer #footer_right #block-erabletheme-socialmedialinks-2 ul a svg.ext { display: none; } -.layout-container > footer #footer_middle #footer_section #footer_right #block-erabletheme-socialmedialinks-2 ul li:last-of-type { - margin-left: 5px; -} -@media (min-width: 760px) { - .layout-container > footer #footer_middle #footer_section #footer_right { - width: auto; - } -} -@media (min-width: 760px) { - .layout-container > footer #footer_middle { - display: flex; - } -} -@media (min-width: 760px) { - .layout-container > footer { - display: block; - padding: 0; - } -} @media screen and (min-width: 760px) { .carousel_container { @@ -640,52 +558,54 @@ em { } } .carousel_container .slick-container .slick-arrow { - width: 1.5rem; - height: 1.5rem; - border-radius: 1.5rem; - background-color: #038788 !important; + width: 2.3rem; + height: 2.3rem; + border-radius: 50%; + background-color: #33ffc4 !important; transition: background-color 0.3s ease; top: unset !important; - bottom: calc(-25px - 4rem); -} -@media (min-width: 760px) { - .carousel_container .slick-container .slick-arrow { - width: 2rem; - height: 2rem; - bottom: calc(-25px - 6rem); - } -} -.carousel_container .slick-container .slick-arrow:hover { - background-color: white !important; + bottom: calc(-1 * (4rem + 2.3rem / 2)); + display: flex !important; + align-items: center; + justify-content: center; + padding: 0; } .carousel_container .slick-container .slick-arrow:hover::before { - color: #038788; + color: black; } .carousel_container .slick-container .slick-arrow::before { + position: static; opacity: 1 !important; - color: white; + color: #4a4a49; font-weight: bold; font-family: "Marianne", sans-serif; - display: block; - font-size: 0.8rem !important; -} -@media (min-width: 760px) { - .carousel_container .slick-container .slick-arrow::before { - font-size: 1.2rem !important; - } + font-size: 1.0625rem !important; + line-height: 1; + width: auto; + height: auto; } .carousel_container .slick-container .slick-prev { - left: 20vw; + left: 5vw; } @media (min-width: 760px) { + .carousel_container .slick-container .slick-prev { + left: 60vw; + } +} +@media (min-width: 1080px) { .carousel_container .slick-container .slick-prev { left: 85vw; } } .carousel_container .slick-container .slick-next { - right: 20vw; + right: 5vw; } @media (min-width: 760px) { + .carousel_container .slick-container .slick-next { + right: 60vw; + } +} +@media (min-width: 1080px) { .carousel_container .slick-container .slick-next { right: 85vw; } @@ -700,49 +620,67 @@ em { margin-bottom: 6rem; } } -.carousel_container .slick-container #carousel_dots { - z-index: 1; +.carousel_container #carousel_dots { position: relative; - margin-top: -15px; + z-index: 1; + margin-top: calc(-1 * (4rem + 2.3rem / 2 - 1.25rem)); } -.carousel_container .slick-container #carousel_dots ul { +@media (max-width: 759px) { + .carousel_container #carousel_dots { + margin-top: calc(-1 * (4rem + 2.3rem / 2 - 1.25rem) + 33px); + } +} +.carousel_container #carousel_dots ul { position: relative; bottom: 0; } -.carousel_container .slick-container #carousel_dots ul li.slick-active button::before { - color: #038788; +.carousel_container #carousel_dots ul li { + margin: 0 0.75rem; } -.carousel_container .slick-container #carousel_dots ul li button::before { - color: rgb(0.9, 0.9, 0.9); +.carousel_container #carousel_dots ul li button::before { + font-size: 0.8125rem; + opacity: 1; + color: #4a4a49; + transition: color 0.2s ease; } -.carousel_container .slick-container footer a { - text-align: center; +.carousel_container #carousel_dots ul li:hover button::before { 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; - text-wrap: nowrap !important; } -.carousel_container .slick-container footer a svg { - display: none; +.carousel_container #carousel_dots ul li.slick-active button::before { + color: #33ffc4; } -.carousel_container .slick-container footer a:hover { - background-color: #00ff80; -} -.carousel_container .slick-container footer { +.carousel_container footer { text-align: center; margin-top: 4rem; margin-bottom: 4rem; } +.carousel_container footer a { + font-family: "Vogun", serif; + font-weight: 500; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.2; + display: inline-block; + text-align: center; + background-color: white; + border: none; + padding: 0.75rem 1.5rem; + text-decoration: none; + transition: color 0.2s ease; + text-wrap: nowrap !important; +} +.carousel_container footer a svg { + display: none; +} +.carousel_container footer a:hover { + color: black; +} .views-row article.actu-teaser { background-color: white; padding: 1rem; box-sizing: border-box; + border-bottom: 7px solid #33ffc4; } @media screen and (min-width: 760px) { .views-row article.actu-teaser { @@ -766,11 +704,13 @@ em { } .views-row article.actu-teaser .preview_meta { font-family: "Marianne", sans-serif; - font-size: 0.8rem; + font-weight: 400; + font-size: 0.8125rem; + color: #4a4a49; + line-height: 1.3; width: auto; display: flex; justify-content: space-between; - color: #038788; margin: 0 3vw; margin-top: 1.3rem; padding-top: 0.7rem; @@ -779,45 +719,47 @@ em { @media (min-width: 760px) { .views-row article.actu-teaser .preview_meta { margin-left: unset; - font-size: 0.9rem; } } .views-row article.actu-teaser .preview_sous_titre { font-family: "Marianne", sans-serif; - font-size: 0.9rem; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; padding: 5px 3vw; padding-left: 0 !important; } .views-row article.actu-teaser .preview_sous_titre .sous_titre { line-height: 1.3 !important; + margin-top: 1rem; + margin-bottom: 1.5rem; } @media (min-width: 760px) { .views-row article.actu-teaser .preview_sous_titre { padding-left: unset; - font-size: 1.2rem; padding-top: unset !important; } } .views-row article.actu-teaser h2 { + font-family: "Vogun", serif; + font-weight: 500; + color: black; + font-size: 1.375rem; + line-height: 1.2; margin-bottom: 0.5rem; margin-top: 1rem !important; padding: 0 !important; - line-height: 1.2; - font-family: "Barlow Condensed", sans-serif; - font-size: 1.6rem; - padding: 0 3vw; - margin-top: 1rem; - color: #038788; - text-transform: uppercase; -} -.views-row article.actu-teaser h2 a { - color: #038788; } @media (min-width: 760px) { .views-row article.actu-teaser h2 { - font-size: 2.3rem; + font-size: 2.25rem; } } +.views-row article.actu-teaser h2 a { + color: inherit; + text-decoration: none; +} main.main-login, main.main-user, main.main-register, main.main-contact, main.main-ask, main.main-add-offre { min-height: 50vh; @@ -830,32 +772,38 @@ main.main-login .login, main.main-login .user, main.main-login .register, main.m } main.main-login .login > h2, main.main-login .user > h2, main.main-login .register > h2, main.main-login .contact > h2, main.main-login .ask > h2, main.main-login .add-offre > h2, main.main-user .login > h2, main.main-user .user > h2, main.main-user .register > h2, main.main-user .contact > h2, main.main-user .ask > h2, main.main-user .add-offre > h2, main.main-register .login > h2, main.main-register .user > h2, main.main-register .register > h2, main.main-register .contact > h2, main.main-register .ask > h2, main.main-register .add-offre > h2, main.main-contact .login > h2, main.main-contact .user > h2, main.main-contact .register > h2, main.main-contact .contact > h2, main.main-contact .ask > h2, main.main-contact .add-offre > h2, main.main-ask .login > h2, main.main-ask .user > h2, main.main-ask .register > h2, main.main-ask .contact > h2, main.main-ask .ask > h2, main.main-ask .add-offre > h2, main.main-add-offre .login > h2, main.main-add-offre .user > h2, main.main-add-offre .register > h2, main.main-add-offre .contact > h2, main.main-add-offre .ask > h2, main.main-add-offre .add-offre > h2 { text-align: center; - font-family: "Barlow", sans-serif; + font-family: "Vogun", serif; + font-weight: 500; color: black; - font-size: 1.2rem; + font-size: 1.375rem; + line-height: 1.2; } @media (min-width: 760px) { main.main-login .login > h2, main.main-login .user > h2, main.main-login .register > h2, main.main-login .contact > h2, main.main-login .ask > h2, main.main-login .add-offre > h2, main.main-user .login > h2, main.main-user .user > h2, main.main-user .register > h2, main.main-user .contact > h2, main.main-user .ask > h2, main.main-user .add-offre > h2, main.main-register .login > h2, main.main-register .user > h2, main.main-register .register > h2, main.main-register .contact > h2, main.main-register .ask > h2, main.main-register .add-offre > h2, main.main-contact .login > h2, main.main-contact .user > h2, main.main-contact .register > h2, main.main-contact .contact > h2, main.main-contact .ask > h2, main.main-contact .add-offre > h2, main.main-ask .login > h2, main.main-ask .user > h2, main.main-ask .register > h2, main.main-ask .contact > h2, main.main-ask .ask > h2, main.main-ask .add-offre > h2, main.main-add-offre .login > h2, main.main-add-offre .user > h2, main.main-add-offre .register > h2, main.main-add-offre .contact > h2, main.main-add-offre .ask > h2, main.main-add-offre .add-offre > h2 { - font-size: 1.6rem; + font-size: 2.25rem; } } main.main-login .login h1, main.main-login .user h1, main.main-login .register h1, main.main-login .contact h1, main.main-login .ask h1, main.main-login .add-offre h1, main.main-user .login h1, main.main-user .user h1, main.main-user .register h1, main.main-user .contact h1, main.main-user .ask h1, main.main-user .add-offre h1, main.main-register .login h1, main.main-register .user h1, main.main-register .register h1, main.main-register .contact h1, main.main-register .ask h1, main.main-register .add-offre h1, main.main-contact .login h1, main.main-contact .user h1, main.main-contact .register h1, main.main-contact .contact h1, main.main-contact .ask h1, main.main-contact .add-offre h1, main.main-ask .login h1, main.main-ask .user h1, main.main-ask .register h1, main.main-ask .contact h1, main.main-ask .ask h1, main.main-ask .add-offre h1, main.main-add-offre .login h1, main.main-add-offre .user h1, main.main-add-offre .register h1, main.main-add-offre .contact h1, main.main-add-offre .ask h1, main.main-add-offre .add-offre h1 { text-align: center; margin-top: 3rem; margin-bottom: 2rem; - font-family: "Barlow", sans-serif; + font-family: "Vogun", serif; + font-weight: 500; color: black; - font-size: 1.2rem; + font-size: 1.375rem; + line-height: 1.2; } @media (min-width: 760px) { main.main-login .login h1, main.main-login .user h1, main.main-login .register h1, main.main-login .contact h1, main.main-login .ask h1, main.main-login .add-offre h1, main.main-user .login h1, main.main-user .user h1, main.main-user .register h1, main.main-user .contact h1, main.main-user .ask h1, main.main-user .add-offre h1, main.main-register .login h1, main.main-register .user h1, main.main-register .register h1, main.main-register .contact h1, main.main-register .ask h1, main.main-register .add-offre h1, main.main-contact .login h1, main.main-contact .user h1, main.main-contact .register h1, main.main-contact .contact h1, main.main-contact .ask h1, main.main-contact .add-offre h1, main.main-ask .login h1, main.main-ask .user h1, main.main-ask .register h1, main.main-ask .contact h1, main.main-ask .ask h1, main.main-ask .add-offre h1, main.main-add-offre .login h1, main.main-add-offre .user h1, main.main-add-offre .register h1, main.main-add-offre .contact h1, main.main-add-offre .ask h1, main.main-add-offre .add-offre h1 { - font-size: 1.6rem; + font-size: 2.25rem; } } main.main-login .login div[role=contentinfo], main.main-login .user div[role=contentinfo], main.main-login .register div[role=contentinfo], main.main-login .contact div[role=contentinfo], main.main-login .ask div[role=contentinfo], main.main-login .add-offre div[role=contentinfo], main.main-user .login div[role=contentinfo], main.main-user .user div[role=contentinfo], main.main-user .register div[role=contentinfo], main.main-user .contact div[role=contentinfo], main.main-user .ask div[role=contentinfo], main.main-user .add-offre div[role=contentinfo], main.main-register .login div[role=contentinfo], main.main-register .user div[role=contentinfo], main.main-register .register div[role=contentinfo], main.main-register .contact div[role=contentinfo], main.main-register .ask div[role=contentinfo], main.main-register .add-offre div[role=contentinfo], main.main-contact .login div[role=contentinfo], main.main-contact .user div[role=contentinfo], main.main-contact .register div[role=contentinfo], main.main-contact .contact div[role=contentinfo], main.main-contact .ask div[role=contentinfo], main.main-contact .add-offre div[role=contentinfo], main.main-ask .login div[role=contentinfo], main.main-ask .user div[role=contentinfo], main.main-ask .register div[role=contentinfo], main.main-ask .contact div[role=contentinfo], main.main-ask .ask div[role=contentinfo], main.main-ask .add-offre div[role=contentinfo], main.main-add-offre .login div[role=contentinfo], main.main-add-offre .user div[role=contentinfo], main.main-add-offre .register div[role=contentinfo], main.main-add-offre .contact div[role=contentinfo], main.main-add-offre .ask div[role=contentinfo], main.main-add-offre .add-offre div[role=contentinfo] { font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; } main.main-login .login > div, main.main-login .user > div, main.main-login .register > div, main.main-login .contact > div, main.main-login .ask > div, main.main-login .add-offre > div, main.main-user .login > div, main.main-user .user > div, main.main-user .register > div, main.main-user .contact > div, main.main-user .ask > div, main.main-user .add-offre > div, main.main-register .login > div, main.main-register .user > div, main.main-register .register > div, main.main-register .contact > div, main.main-register .ask > div, main.main-register .add-offre > div, main.main-contact .login > div, main.main-contact .user > div, main.main-contact .register > div, main.main-contact .contact > div, main.main-contact .ask > div, main.main-contact .add-offre > div, main.main-ask .login > div, main.main-ask .user > div, main.main-ask .register > div, main.main-ask .contact > div, main.main-ask .ask > div, main.main-ask .add-offre > div, main.main-add-offre .login > div, main.main-add-offre .user > div, main.main-add-offre .register > div, main.main-add-offre .contact > div, main.main-add-offre .ask > div, main.main-add-offre .add-offre > div { height: 100%; @@ -892,12 +840,12 @@ main.main-login .login > div > div:not(.hidden) form .form-item .description, ma } main.main-login .login > div > div:not(.hidden) form input, main.main-login .login > div > div:not(.hidden) form textarea, main.main-login .user > div > div:not(.hidden) form input, main.main-login .user > div > div:not(.hidden) form textarea, main.main-login .register > div > div:not(.hidden) form input, main.main-login .register > div > div:not(.hidden) form textarea, main.main-login .contact > div > div:not(.hidden) form input, main.main-login .contact > div > div:not(.hidden) form textarea, main.main-login .ask > div > div:not(.hidden) form input, main.main-login .ask > div > div:not(.hidden) form textarea, main.main-login .add-offre > div > div:not(.hidden) form input, main.main-login .add-offre > div > div:not(.hidden) form textarea, main.main-user .login > div > div:not(.hidden) form input, main.main-user .login > div > div:not(.hidden) form textarea, main.main-user .user > div > div:not(.hidden) form input, main.main-user .user > div > div:not(.hidden) form textarea, main.main-user .register > div > div:not(.hidden) form input, main.main-user .register > div > div:not(.hidden) form textarea, main.main-user .contact > div > div:not(.hidden) form input, main.main-user .contact > div > div:not(.hidden) form textarea, main.main-user .ask > div > div:not(.hidden) form input, main.main-user .ask > div > div:not(.hidden) form textarea, main.main-user .add-offre > div > div:not(.hidden) form input, main.main-user .add-offre > div > div:not(.hidden) form textarea, main.main-register .login > div > div:not(.hidden) form input, main.main-register .login > div > div:not(.hidden) form textarea, main.main-register .user > div > div:not(.hidden) form input, main.main-register .user > div > div:not(.hidden) form textarea, main.main-register .register > div > div:not(.hidden) form input, main.main-register .register > div > div:not(.hidden) form textarea, main.main-register .contact > div > div:not(.hidden) form input, main.main-register .contact > div > div:not(.hidden) form textarea, main.main-register .ask > div > div:not(.hidden) form input, main.main-register .ask > div > div:not(.hidden) form textarea, main.main-register .add-offre > div > div:not(.hidden) form input, main.main-register .add-offre > div > div:not(.hidden) form textarea, main.main-contact .login > div > div:not(.hidden) form input, main.main-contact .login > div > div:not(.hidden) form textarea, main.main-contact .user > div > div:not(.hidden) form input, main.main-contact .user > div > div:not(.hidden) form textarea, main.main-contact .register > div > div:not(.hidden) form input, main.main-contact .register > div > div:not(.hidden) form textarea, main.main-contact .contact > div > div:not(.hidden) form input, main.main-contact .contact > div > div:not(.hidden) form textarea, main.main-contact .ask > div > div:not(.hidden) form input, main.main-contact .ask > div > div:not(.hidden) form textarea, main.main-contact .add-offre > div > div:not(.hidden) form input, main.main-contact .add-offre > div > div:not(.hidden) form textarea, main.main-ask .login > div > div:not(.hidden) form input, main.main-ask .login > div > div:not(.hidden) form textarea, main.main-ask .user > div > div:not(.hidden) form input, main.main-ask .user > div > div:not(.hidden) form textarea, main.main-ask .register > div > div:not(.hidden) form input, main.main-ask .register > div > div:not(.hidden) form textarea, main.main-ask .contact > div > div:not(.hidden) form input, main.main-ask .contact > div > div:not(.hidden) form textarea, main.main-ask .ask > div > div:not(.hidden) form input, main.main-ask .ask > div > div:not(.hidden) form textarea, main.main-ask .add-offre > div > div:not(.hidden) form input, main.main-ask .add-offre > div > div:not(.hidden) form textarea, main.main-add-offre .login > div > div:not(.hidden) form input, main.main-add-offre .login > div > div:not(.hidden) form textarea, main.main-add-offre .user > div > div:not(.hidden) form input, main.main-add-offre .user > div > div:not(.hidden) form textarea, main.main-add-offre .register > div > div:not(.hidden) form input, main.main-add-offre .register > div > div:not(.hidden) form textarea, main.main-add-offre .contact > div > div:not(.hidden) form input, main.main-add-offre .contact > div > div:not(.hidden) form textarea, main.main-add-offre .ask > div > div:not(.hidden) form input, main.main-add-offre .ask > div > div:not(.hidden) form textarea, main.main-add-offre .add-offre > div > div:not(.hidden) form input, main.main-add-offre .add-offre > div > div:not(.hidden) form textarea { margin-top: 0.5rem; - border: solid 1px #038788; + border: solid 1px #33ffc4; } main.main-login .login > div > div:not(.hidden) form .button, main.main-login .user > div > div:not(.hidden) form .button, main.main-login .register > div > div:not(.hidden) form .button, main.main-login .contact > div > div:not(.hidden) form .button, main.main-login .ask > div > div:not(.hidden) form .button, main.main-login .add-offre > div > div:not(.hidden) form .button, main.main-user .login > div > div:not(.hidden) form .button, main.main-user .user > div > div:not(.hidden) form .button, main.main-user .register > div > div:not(.hidden) form .button, main.main-user .contact > div > div:not(.hidden) form .button, main.main-user .ask > div > div:not(.hidden) form .button, main.main-user .add-offre > div > div:not(.hidden) form .button, main.main-register .login > div > div:not(.hidden) form .button, main.main-register .user > div > div:not(.hidden) form .button, main.main-register .register > div > div:not(.hidden) form .button, main.main-register .contact > div > div:not(.hidden) form .button, main.main-register .ask > div > div:not(.hidden) form .button, main.main-register .add-offre > div > div:not(.hidden) form .button, main.main-contact .login > div > div:not(.hidden) form .button, main.main-contact .user > div > div:not(.hidden) form .button, main.main-contact .register > div > div:not(.hidden) form .button, main.main-contact .contact > div > div:not(.hidden) form .button, main.main-contact .ask > div > div:not(.hidden) form .button, main.main-contact .add-offre > div > div:not(.hidden) form .button, main.main-ask .login > div > div:not(.hidden) form .button, main.main-ask .user > div > div:not(.hidden) form .button, main.main-ask .register > div > div:not(.hidden) form .button, main.main-ask .contact > div > div:not(.hidden) form .button, main.main-ask .ask > div > div:not(.hidden) form .button, main.main-ask .add-offre > div > div:not(.hidden) form .button, main.main-add-offre .login > div > div:not(.hidden) form .button, main.main-add-offre .user > div > div:not(.hidden) form .button, main.main-add-offre .register > div > div:not(.hidden) form .button, main.main-add-offre .contact > div > div:not(.hidden) form .button, main.main-add-offre .ask > div > div:not(.hidden) form .button, main.main-add-offre .add-offre > div > div:not(.hidden) form .button { font-family: "Marianne", sans-serif; font-weight: 800; - border: solid 1px #038788; + border: solid 1px #33ffc4; background-color: white; cursor: pointer; } @@ -920,8 +868,10 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo .form-item { padding-left: 3rem; font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; } #background { @@ -945,6 +895,10 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo top: 5vh; left: 0; } */ + /* #bg-4 { + top: 18vh; + right: -45vw; + } */ } #background #bg-top #bg-3 { top: 13vh; @@ -994,10 +948,11 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo width: 27vw; } } -#background #bg-top { - /* #bg-4 { - top: 18vh; - right: -45vw; +#background #bg-middle { + /* #bg-8 { + width: 80vw; + top: 45vh; + left: -40vw; } */ } #background #bg-middle #bg-6 { @@ -1009,13 +964,6 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo top: 10vh; right: 0vw; } -#background #bg-middle { - /* #bg-8 { - width: 80vw; - top: 45vh; - left: -40vw; - } */ -} #background #bg-middle #bg-12 { width: 105vw; left: -5vw; @@ -1063,113 +1011,101 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo /* PAGES */ .home_introduction { - background-color: white; - width: 100%; box-sizing: border-box; - padding: 3rem 1rem; - margin: 2rem 0; + width: 100%; + max-width: 70rem; + margin: 8vw auto; + padding: 8vw 6vw; + display: flex; + flex-direction: column; + align-items: center; + gap: 3rem; } .home_introduction h2 { display: none; } -.home_introduction > .logo { +.home_introduction .intro_main { + width: 100%; + display: grid; + grid-template-columns: 1fr; + gap: 6vw; + justify-items: center; +} +@media (min-width: 1080px) { + .home_introduction .intro_main { + grid-template-columns: minmax(8rem, 22%) 1px 1fr; + align-items: center; + gap: 2.5vw; + } +} +.home_introduction .intro_logo { display: flex; justify-content: center; - align-items: center; - width: 100%; - margin-bottom: 2rem; } -.home_introduction > .logo img { - width: 50%; +.home_introduction .intro_logo img { + width: 40vw; + max-width: 14rem; height: auto; } @media (min-width: 1080px) { - .home_introduction > .logo img { + .home_introduction .intro_logo img { width: 100%; } } -@media (min-width: 1080px) { - .home_introduction > .logo { - width: 170%; - margin: 0 3rem; - } -} -.home_introduction article > div { - height: unset !important; - min-height: 100%; -} -.home_introduction article > div p { - font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; - width: 100%; -} -@media (min-width: 760px) { - .home_introduction article > div p { - padding-left: 3rem; - padding-right: 3rem; - } -} -@media (min-width: 1080px) { - .home_introduction article > div p { - padding-left: 0; - } -} -@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; - text-wrap: nowrap !important; -} -.home_introduction div.more-link a svg { +.home_introduction .intro_separator { display: none; } -.home_introduction div.more-link a:hover { - background-color: #00ff80; -} -@media (min-width: 760px) { - .home_introduction div.more-link { - position: absolute; - left: 0; - right: 0; - } -} -@media (min-width: 760px) { - .home_introduction { - padding: 8rem 1rem; - padding-top: 4rem; - margin: 6rem 0; - margin-left: 20vw; - margin-right: 20vw; - width: calc(100% - 40vw); - } -} @media (min-width: 1080px) { - .home_introduction { - display: flex; - justify-content: space-around; - margin-top: 20vh; - margin-bottom: 20vh !important; + .home_introduction .intro_separator { + display: block; + width: 1px; + align-self: stretch; + background-color: #4a4a49; + justify-self: center; } } +.home_introduction .intro_body { + width: 100%; +} +.home_introduction .intro_body article > div { + height: unset !important; + min-height: unset; + width: 100%; + max-width: 45rem; + margin-inline: auto; +} +.home_introduction .intro_body article > div p { + font-family: "Marianne", sans-serif; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; + margin: 0; +} +.home_introduction > div.more-link { + margin-top: 1rem; +} +.home_introduction > div.more-link a { + font-family: "Vogun", serif; + font-weight: 500; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.2; + display: inline-block; + text-align: center; + background-color: white; + border: none; + padding: 0.75rem 1.5rem; + text-decoration: none; + transition: color 0.2s ease; + text-wrap: nowrap !important; +} +.home_introduction > div.more-link a svg { + display: none; +} +.home_introduction > div.more-link a:hover { + color: black; +} .home_consultation { position: relative; @@ -1179,19 +1115,17 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo } .home_consultation h2 { margin-bottom: 1.2rem; - font-family: "Barlow Condensed", sans-serif; - font-size: 1.6rem; + font-family: "Vogun", serif; + font-weight: 500; + font-size: 2.25rem; + color: black; + line-height: 1.2; padding: 0 3vw; margin-top: 1rem; - color: #038788; - text-transform: uppercase; -} -.home_consultation h2 a { - color: #038788; } @media (min-width: 760px) { .home_consultation h2 { - font-size: 2.3rem; + font-size: 3.5625rem; } } @media (min-width: 760px) { @@ -1206,13 +1140,15 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo } } .home_consultation h2 + div h2, .home_consultation h2 + div h3, .home_consultation h2 + div h4 { - font-family: "Barlow", sans-serif; + font-family: "Vogun", serif; + font-weight: 500; color: black; - font-size: 1.2rem; + font-size: 1.375rem; + line-height: 1.2; } @media (min-width: 760px) { .home_consultation h2 + div h2, .home_consultation h2 + div h3, .home_consultation h2 + div h4 { - font-size: 1.6rem; + font-size: 2.25rem; } } @media (min-width: 1080px) { @@ -1226,8 +1162,10 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo } .home_consultation article > div p { font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; } @media (min-width: 1080px) { .home_consultation article > div p { @@ -1240,29 +1178,32 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo 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 { + font-family: "Vogun", serif; + font-weight: 500; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.2; + display: inline-block; 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; + border: none; + padding: 0.75rem 1.5rem; + text-decoration: none; + transition: color 0.2s ease; text-wrap: nowrap !important; } .home_consultation div.more-link a svg { display: none; } .home_consultation div.more-link a:hover { - background-color: #00ff80; -} -.home_consultation div.more-link { - margin-top: 3rem; - display: flex; - justify-content: center; - align-items: center; + color: black; } @media (min-width: 1080px) { .home_consultation div.more-link { @@ -1277,49 +1218,69 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo } } -.map-projets { - background-color: white; - padding: 1rem 0; - margin-left: 3vw; - width: calc(100% - 3vw * 2); -} -@media (min-width: 760px) { - .map-projets { - margin-left: 20vw; - width: calc(100% - 40vw); - } +.map-projets-section { + display: flex; + flex-direction: column; + align-items: center; } @media (min-width: 1080px) { - .map-projets { - margin-left: 25vw; - width: calc(100% - 50vw); + .map-projets-section { margin-top: 10vh; margin-bottom: 10vh; } } -.map-projets > h2 { - font-family: "Barlow Condensed", sans-serif; - font-size: 1.6rem; + +.map-projets-title { + font-family: "Vogun", serif; + font-weight: 500; + font-size: 2.25rem; + color: black; + line-height: 1.2; padding: 0 3vw; margin-top: 1rem; - color: #038788; - text-transform: uppercase; -} -.map-projets > h2 a { - color: #038788; + text-align: center; + padding: 0; + margin: 0 0 4rem; } @media (min-width: 760px) { - .map-projets > h2 { - font-size: 2.3rem; + .map-projets-title { + font-size: 3.5625rem; + } +} + +.map-projets { + background-color: white; + padding: 1rem 0; + margin: 0 auto; + width: calc(100% - 3vw * 2); + border-bottom: 7px solid #33ffc4; +} +.map-projets > footer.fluo_links { + margin-top: 1rem; + margin-bottom: 4rem; +} +.map-projets > footer.fluo_links a { + background-color: #f9f9f9; +} +@media (min-width: 760px) { + .map-projets { + width: 60vw; + } +} +@media (min-width: 1080px) { + .map-projets { + width: 50vw; } } .map-projets > .projets_intro { padding: 0 3vw; margin-top: 1.3rem; - margin-bottom: 6vh; + margin-bottom: 2.5rem; font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; } @media screen and (min-width: 760px) { .map-projets > .projets_intro { @@ -1328,14 +1289,16 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo } .map-projets > .projets_intro h1, .map-projets > .projets_intro h2, .map-projets > .projets_intro h3, .map-projets > .projets_intro h4, .map-projets > .projets_intro h5, .map-projets > .projets_intro h6 { - font-family: "Barlow", sans-serif; + font-family: "Vogun", serif; + font-weight: 500; color: black; - font-size: 1.2rem; + font-size: 1.375rem; + line-height: 1.2; } @media (min-width: 760px) { .map-projets > .projets_intro h1, .map-projets > .projets_intro h2, .map-projets > .projets_intro h3, .map-projets > .projets_intro h4, .map-projets > .projets_intro h5, .map-projets > .projets_intro h6 { - font-size: 1.6rem; + font-size: 2.25rem; } } .map-projets > .projets_intro a { @@ -1348,22 +1311,22 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo margin: 0 2rem; width: calc(100% - 4rem); } +.map-projets > #sites-map-container #popup { + background-color: #f9f9f9; +} .map-projets > #sites-map-container #popup h3 { font-family: "Marianne", sans-serif; - font-size: 0.9rem; - color: #038788; font-weight: 800; + font-size: 0.9375rem; + color: #4a4a49; line-height: 1.3; } -@media (min-width: 760px) { - .map-projets > #sites-map-container #popup h3 { - font-size: 1.2rem; - } -} .map-projets > #sites-map-container #popup p { font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; } .layout-content .fullpage { @@ -1381,19 +1344,17 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo width: auto; display: inline-block; line-height: 1.3; - font-family: "Barlow Condensed", sans-serif; - font-size: 1.6rem; + font-family: "Vogun", serif; + font-weight: 500; + font-size: 2.25rem; + color: black; + line-height: 1.2; padding: 0 3vw; margin-top: 1rem; - color: #038788; - text-transform: uppercase; -} -.layout-content .fullpage h2 a { - color: #038788; } @media (min-width: 760px) { .layout-content .fullpage h2 { - font-size: 2.3rem; + font-size: 3.5625rem; } } .layout-content .fullpage .legende { @@ -1406,21 +1367,25 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo } .layout-content .fullpage .fullpage_content .sous_titre { padding: 0 3vw; - font-family: "Barlow", sans-serif; + font-family: "Vogun", serif; + font-weight: 500; color: black; - font-size: 1.2rem; + font-size: 1.375rem; + line-height: 1.2; } @media (min-width: 760px) { .layout-content .fullpage .fullpage_content .sous_titre { - font-size: 1.6rem; + font-size: 2.25rem; } } .layout-content .fullpage .fullpage_content p { padding: 0 3vw; margin-bottom: 2rem; font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; } .layout-content .fullpage .fullpage_content p:first-of-type { margin-top: 7vh; @@ -1433,15 +1398,18 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo } .layout-content .fullpage .fullpage_content .liens_fixed > div > div a, .layout-content .fullpage .fullpage_content .file_fixed > div > div a, .layout-content .fullpage .fullpage_content .liens > div > div a, .layout-content .fullpage .fullpage_content .file_fixed > div > div a { + font-family: "Vogun", serif; + font-weight: 500; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.2; + display: inline-block; 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; + border: none; + padding: 0.75rem 1.5rem; + text-decoration: none; + transition: color 0.2s ease; text-wrap: nowrap !important; } .layout-content .fullpage .fullpage_content .liens_fixed > div > div a svg, .layout-content .fullpage .fullpage_content .file_fixed > div > div a svg, @@ -1450,7 +1418,7 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo } .layout-content .fullpage .fullpage_content .liens_fixed > div > div a:hover, .layout-content .fullpage .fullpage_content .file_fixed > div > div a:hover, .layout-content .fullpage .fullpage_content .liens > div > div a:hover, .layout-content .fullpage .fullpage_content .file_fixed > div > div a:hover { - background-color: #00ff80; + color: black; } .layout-content .fullpage .fullpage_content .liens_fixed > div > div a, .layout-content .fullpage .fullpage_content .file_fixed > div > div a, .layout-content .fullpage .fullpage_content .liens > div > div a, .layout-content .fullpage .fullpage_content .file_fixed > div > div a { @@ -1478,16 +1446,11 @@ main.main-login .login > div > div:not(.hidden) form .button:hover, main.main-lo margin-bottom: 1rem; padding-left: 3vw; font-family: "Marianne", sans-serif; - font-size: 0.9rem; - color: #038788; font-weight: 800; + font-size: 0.9375rem; + color: #4a4a49; line-height: 1.3; } -@media (min-width: 760px) { - .layout-content .fullpage .fullpage_content h3, .layout-content .fullpage .fullpage_content h4, .layout-content .fullpage .fullpage_content h5, .layout-content .fullpage .fullpage_content h6 { - font-size: 1.2rem; - } -} .layout-content .fullpage .fullpage_content .faded { opacity: 0; transform: translateY(2rem); @@ -1579,13 +1542,6 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > width: 22vw; } } -aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > div > div, -aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-views-block-projets-block-1 > div > div, -aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > div #block-erabletheme-leprogramme-2 > div > div, -aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > div #block-erabletheme-views-block-projets-block-1 > div > div { - width: auto !important; - margin: 0 !important; -} aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2, aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-views-block-projets-block-1, aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > div #block-erabletheme-leprogramme-2, @@ -1594,39 +1550,38 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > background-color: white; margin-left: 2vw; } +aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > div > div, +aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-views-block-projets-block-1 > div > div, +aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > div #block-erabletheme-leprogramme-2 > div > div, +aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > div #block-erabletheme-views-block-projets-block-1 > div > div { + width: auto !important; + margin: 0 !important; +} aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > h2, aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-views-block-projets-block-1 > h2, aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > div #block-erabletheme-leprogramme-2 > h2, aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > div #block-erabletheme-views-block-projets-block-1 > h2 { padding-bottom: 1rem; - border-bottom: solid 1px #038788; + border-bottom: solid 1px #33ffc4; display: flex; justify-content: space-between; cursor: pointer; font-family: "Marianne", sans-serif; - font-size: 0.9rem; - color: #038788; font-weight: 800; + font-size: 0.9375rem; + color: #4a4a49; line-height: 1.3; } -@media (min-width: 760px) { - aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > h2, - aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-views-block-projets-block-1 > h2, - aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > div #block-erabletheme-leprogramme-2 > h2, - aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > div #block-erabletheme-views-block-projets-block-1 > h2 { - font-size: 1.2rem; - } -} aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > h2 > div, aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-views-block-projets-block-1 > h2 > div, aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > div #block-erabletheme-leprogramme-2 > h2 > div, aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > div #block-erabletheme-views-block-projets-block-1 > h2 > div { mask-image: url("/themes/erabletheme/assets/icons/arrow-down-s-line.svg"); background-size: contain; - background-color: #038788; + background-color: #33ffc4; width: 1.3rem; height: 1.3rem; - color: #038788; + color: #33ffc4; transform: rotate(0deg); transition: transform 0.3s ease; } @@ -1667,8 +1622,10 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > div #block-erabletheme-views-block-projets-block-1 .projets_list .views-row { margin: 1rem 0; font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; } aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > ul > li a, aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > ul .views-row a, @@ -1687,7 +1644,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > div #block-erabletheme-views-block-projets-block-1 .projets_list > li a, aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > div #block-erabletheme-views-block-projets-block-1 .projets_list .views-row a { color: black; - font-size: 0.9rem; + font-size: 0.9375rem; } aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > ul > li a:hover, aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > ul > li a.is-active, aside.layout-sidebar-first:has(#block-erabletheme-leprogramme-2) > div #block-erabletheme-leprogramme-2 > ul .views-row a:hover, @@ -1790,25 +1747,21 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > align-self: flex-end; margin-bottom: 2vh; font-family: "Marianne", sans-serif; - font-size: 0.9rem; - color: #038788; font-weight: 800; + font-size: 0.9375rem; + color: #4a4a49; line-height: 1.3; } -@media (min-width: 760px) { - .fullpage_content:has(.paragraph--type--membre-equipe) > div > div:last-of-type:not(.equipe) .paragraph--type--membre-equipe > .prenom, - .fullpage_content:has(.paragraph--type--membre-equipe) > div > div:last-of-type:not(.equipe) .paragraph--type--membre-equipe > .nom { - font-size: 1.2rem; - } -} .fullpage_content:has(.paragraph--type--membre-equipe) > div > div:last-of-type:not(.equipe) .paragraph--type--membre-equipe > .nom > div { padding-left: 0.5rem; } .fullpage_content:has(.paragraph--type--membre-equipe) > div > div:last-of-type:not(.equipe) .paragraph--type--membre-equipe > .texte { grid-column: 2/4; font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; } .fullpage_content:has(.paragraph--type--membre-equipe) > div > div:last-of-type:not(.equipe) .paragraph--type--membre-equipe > .texte p { margin-top: 0 !important; @@ -1887,8 +1840,10 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > */ .content_partenaires header { font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; margin-bottom: 4vh; margin-top: -5vh; } @@ -1900,13 +1855,15 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > } .content_partenaires .views-row article > h2 { margin-bottom: 2vh; - font-family: "Barlow", sans-serif; + font-family: "Vogun", serif; + font-weight: 500; color: black; - font-size: 1.2rem; + font-size: 1.375rem; + line-height: 1.2; } @media (min-width: 760px) { .content_partenaires .views-row article > h2 { - font-size: 1.6rem; + font-size: 2.25rem; } } .content_partenaires .views-row article > div:first-of-type { @@ -1953,8 +1910,10 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > .content_partenaires .views-row article > div:first-of-type > div:nth-of-type(2) { grid-column: 1/3; font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; margin-bottom: 2rem; } @media (min-width: 760px) { @@ -1971,22 +1930,25 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > margin-top: 1rem; } .content_partenaires .views-row article > div:first-of-type > div:last-of-type a { + font-family: "Vogun", serif; + font-weight: 500; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.2; + display: inline-block; 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; + border: none; + padding: 0.75rem 1.5rem; + text-decoration: none; + transition: color 0.2s ease; text-wrap: nowrap !important; } .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; + color: black; } #block-erabletheme-unequestion { @@ -1998,9 +1960,11 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > width: 50vw; margin-left: 1.5vw; font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; - background-color: #038788; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; + background-color: #33ffc4; color: white; font-weight: 800; padding-bottom: 2rem; @@ -2064,7 +2028,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > } .fullpage.meetup > h2 { - border-bottom: solid 1px #038788; + border-bottom: solid 1px #33ffc4; padding: 0; padding-bottom: 4vh; margin-left: 3vw; @@ -2079,8 +2043,10 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > } .fullpage.meetup > header { font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; } .fullpage.meetup > header > div:first-of-type { margin-left: 3vw; @@ -2092,7 +2058,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > } } .fullpage.meetup > header > div:last-of-type { - background-color: #038788; + background-color: #33ffc4; width: 60%; margin-left: calc(40% - 3vw); margin-top: 4vh; @@ -2196,8 +2162,10 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > .fullpage.meetup > .meetup_list > .views-row > a > article > p, .fullpage.meetup > .meetup_list > .views-row > a > article > a, .fullpage.meetup > .meetup_list > .views-row > a > article > div, .fullpage.meetup > .meetup_list > .views-row > a > article > a > h2, .fullpage.meetup > .meetup_list > .views-row > article > p, .fullpage.meetup > .meetup_list > .views-row > article > a, .fullpage.meetup > .meetup_list > .views-row > article > div, .fullpage.meetup > .meetup_list > .views-row > article > a > h2 { padding: 0.2rem 0; font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; } .fullpage.meetup > .meetup_list > .views-row > a > article > a:not(.author, .offre-title, [title="Voir le profil utilisateur."]), .fullpage.meetup > .meetup_list > .views-row > article > a:not(.author, .offre-title, [title="Voir le profil utilisateur."]) { grid-column: 1; @@ -2233,7 +2201,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > grid-row: 1/2; } .fullpage.meetup > .meetup_list > .views-row > a > article > p.occupation > a, .fullpage.meetup > .meetup_list > .views-row > article > p.occupation > a { - color: #038788; + color: #33ffc4; text-transform: uppercase; font-weight: 800; } @@ -2285,8 +2253,10 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > display: flex; margin-left: 3vw; font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; } .fullpage.meetup > .views-exposed-form > div { width: auto; @@ -2294,21 +2264,25 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > .fullpage.meetup > .views-exposed-form > div > select { font-size: 0.8rem; font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; } .fullpage.meetup > .views-exposed-form > div:last-of-type { margin-left: 1rem; } .fullpage.meetup > .views-exposed-form > div:last-of-type > input { font-size: 0.8rem; - background-color: #038788; + background-color: #33ffc4; color: white; cursor: pointer; border: none; font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; } .fullpage.meetup .ornements_top_over { top: -15vh; @@ -2319,38 +2293,38 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > .fullpage.meetup-offre { font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; } .fullpage.meetup-offre > .retour-meetup { padding-top: 3vh; padding-left: 3vw; } .fullpage.meetup-offre > .retour-meetup a { - font-size: 0.8rem; + font-size: 0.8125rem; font-weight: 800; - color: #038788; + color: #33ffc4; } .fullpage.meetup-offre > h2 { margin-bottom: 3vh; width: auto; - font-family: "Barlow Condensed", sans-serif; - font-size: 1.6rem; + font-family: "Vogun", serif; + font-weight: 500; + font-size: 2.25rem; + color: black; + line-height: 1.2; padding: 0 3vw; margin-top: 1rem; - color: #038788; - text-transform: uppercase; -} -.fullpage.meetup-offre > h2 a { - color: #038788; } @media (min-width: 760px) { .fullpage.meetup-offre > h2 { - font-size: 2.3rem; + font-size: 3.5625rem; } } .fullpage.meetup-offre > .offre-content > div { - border-top: solid 1px #038788; + border-top: solid 1px #33ffc4; padding-top: 4vh; margin-left: 3vw; margin-right: 3vw; @@ -2407,32 +2381,32 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > margin: 0.8rem; } } -.fullpage.meetup-offre > .offre-content > div > div > div > div > .offre-structure > h2 { - display: none; -} .fullpage.meetup-offre > .offre-content > div > div > div > div > .offre-structure { grid-column: 2/4; grid-row: 1/2; text-transform: uppercase; - color: #038788; + color: #33ffc4; font-weight: 800; } +.fullpage.meetup-offre > .offre-content > div > div > div > div > .offre-structure > h2 { + display: none; +} +.fullpage.meetup-offre > .offre-content > div > div > div > div > .offre-localisation { + grid-column: 2/4; + grid-row: 3/4; + font-weight: 800; + color: #33ffc4; +} .fullpage.meetup-offre > .offre-content > div > div > div > div > .offre-localisation > h2 { display: none; } .fullpage.meetup-offre > .offre-content > div > div > div > div > .offre-localisation .country { display: none; } -.fullpage.meetup-offre > .offre-content > div > div > div > div > .offre-localisation { - grid-column: 2/4; - grid-row: 3/4; - font-weight: 800; - color: #038788; -} .fullpage.meetup-offre > .offre-content > div > div > div > div > .offre-title { grid-column: 2/4; grid-row: 4/5; - font-size: 1.6rem; + font-size: 2.25rem; font-weight: 800; margin-bottom: 2rem; } @@ -2454,38 +2428,40 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > .fullpage.meetup-offre > .offre-content > div > div > div > div > .offre-contact span > a { display: block; margin-right: 2rem; - background-color: #038788; + background-color: #33ffc4; line-height: 1.1; padding: 0.7rem 1rem; color: white; font-weight: 800; - font-size: 0.8rem; + font-size: 0.8125rem; transform: translateY(0); transition: transform 0.2s ease-out; } .fullpage.meetup-offre > .offre-content > div > div > div > div > .offre-contact span > a:hover { transform: translateY(-2px); } +.fullpage.meetup-offre > .offre-content > div > div > div > div > .offre-time { + align-self: center; + grid-column: 2/4; + grid-row: 6/7; + font-size: 0.8125rem; + margin-top: 1rem; + margin-bottom: 0.5rem; +} .fullpage.meetup-offre > .offre-content > div > div > div > div > .offre-time > h2, .fullpage.meetup-offre > .offre-content > div > div > div > div > .offre-time > div { display: inline-block !important; } .fullpage.meetup-offre > .offre-content > div > div > div > div > .offre-time > h2 { text-transform: unset !important; - font-size: 0.8rem !important; + font-size: 0.8125rem !important; color: black !important; margin: 0 !important; padding: 0 !important; font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; -} -.fullpage.meetup-offre > .offre-content > div > div > div > div > .offre-time { - align-self: center; - grid-column: 2/4; - grid-row: 6/7; - font-size: 0.8rem; - margin-top: 1rem; - margin-bottom: 0.5rem; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; } @media (min-width: 1080px) { .fullpage.meetup-offre > .offre-content > div > div > div > div > .offre-time { @@ -2502,7 +2478,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > .fullpage.meetup-offre > .offre-content > div > div > div > div > .offre-description { grid-column: 1/4; grid-row: 7/8; - border-top: solid 1px #038788; + border-top: solid 1px #33ffc4; margin-top: 2vh; padding-top: 6vh; margin-bottom: 4vh; @@ -2522,22 +2498,25 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > margin: 2rem 0; } .fullpage.meetup-offre > .offre-content > div > div > div > div > .liens_fixed > div a { + font-family: "Vogun", serif; + font-weight: 500; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.2; + display: inline-block; 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; + border: none; + padding: 0.75rem 1.5rem; + text-decoration: none; + transition: color 0.2s ease; text-wrap: nowrap !important; } .fullpage.meetup-offre > .offre-content > div > div > div > div > .liens_fixed > div a svg { display: none; } .fullpage.meetup-offre > .offre-content > div > div > div > div > .liens_fixed > div a:hover { - background-color: #00ff80; + color: black; } .fullpage.meetup-offre > .offre-content > div > div > div > div > .liens_fixed > div a { display: inline-block; @@ -2570,22 +2549,25 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > margin: 2rem 0; } .fullpage.meetup-offre > .offre-content > div > div > div > div > .file_fixed > div > div a { + font-family: "Vogun", serif; + font-weight: 500; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.2; + display: inline-block; 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; + border: none; + padding: 0.75rem 1.5rem; + text-decoration: none; + transition: color 0.2s ease; text-wrap: nowrap !important; } .fullpage.meetup-offre > .offre-content > div > div > div > div > .file_fixed > div > div a svg { display: none; } .fullpage.meetup-offre > .offre-content > div > div > div > div > .file_fixed > div > div a:hover { - background-color: #00ff80; + color: black; } .fullpage.meetup-offre > .offre-content > div > div > div > div > .file_fixed > div > div a { display: inline-block; @@ -2623,8 +2605,10 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > padding: 0 3vw; margin-bottom: 6vh; font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; } @media (min-width: 1080px) { .layout-content .fullpage.projets > .intro_map > header { @@ -2636,33 +2620,33 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > .layout-content .fullpage.projets > .intro_map > header h4, .layout-content .fullpage.projets > .intro_map > header h5, .layout-content .fullpage.projets > .intro_map > header h6 { padding: 0 !important; margin: 0 !important; - font-family: "Barlow", sans-serif; + font-family: "Vogun", serif; + font-weight: 500; color: black; - font-size: 1.2rem; + font-size: 1.375rem; + line-height: 1.2; } @media (min-width: 760px) { .layout-content .fullpage.projets > .intro_map > header h1, .layout-content .fullpage.projets > .intro_map > header h2, .layout-content .fullpage.projets > .intro_map > header h3, .layout-content .fullpage.projets > .intro_map > header h4, .layout-content .fullpage.projets > .intro_map > header h5, .layout-content .fullpage.projets > .intro_map > header h6 { - font-size: 1.6rem; + font-size: 2.25rem; } } .layout-content .fullpage.projets > .intro_map > header > h2 { margin-bottom: 5vh !important; padding-bottom: 3.5vh !important; - border-bottom: 1px solid #038788; - font-family: "Barlow Condensed", sans-serif; - font-size: 1.6rem; + border-bottom: 1px solid #33ffc4; + font-family: "Vogun", serif; + font-weight: 500; + font-size: 2.25rem; + color: black; + line-height: 1.2; padding: 0 3vw; margin-top: 1rem; - color: #038788; - text-transform: uppercase; -} -.layout-content .fullpage.projets > .intro_map > header > h2 a { - color: #038788; } @media (min-width: 760px) { .layout-content .fullpage.projets > .intro_map > header > h2 { - font-size: 2.3rem; + font-size: 3.5625rem; } } @media (min-width: 1080px) { @@ -2696,20 +2680,17 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > } .layout-content .fullpage.projets > .intro_map #sites-map-container #popup h3 { font-family: "Marianne", sans-serif; - font-size: 0.9rem; - color: #038788; font-weight: 800; + font-size: 0.9375rem; + color: #4a4a49; line-height: 1.3; } -@media (min-width: 760px) { - .layout-content .fullpage.projets > .intro_map #sites-map-container #popup h3 { - font-size: 1.2rem; - } -} .layout-content .fullpage.projets > .intro_map #sites-map-container #popup p { font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; } .layout-content .fullpage.projets > .projets_list { display: grid; @@ -2769,21 +2750,14 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > grid-column: 2; grid-row: 1; margin-bottom: 1rem; -} -.layout-content .fullpage.projets > .projets_list > .views-row > .views-field-title a { - color: #038788; -} -.layout-content .fullpage.projets > .projets_list > .views-row > .views-field-title { font-family: "Marianne", sans-serif; - font-size: 0.9rem; - color: #038788; font-weight: 800; + font-size: 0.9375rem; + color: #4a4a49; line-height: 1.3; } -@media (min-width: 760px) { - .layout-content .fullpage.projets > .projets_list > .views-row > .views-field-title { - font-size: 1.2rem; - } +.layout-content .fullpage.projets > .projets_list > .views-row > .views-field-title a { + color: #33ffc4; } .layout-content .fullpage.projets > .projets_list > .views-row > .views-field-field-sous-titre { grid-column: 2; @@ -2791,19 +2765,19 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > font-size: 1.1rem !important; margin-bottom: 1rem; line-height: 1.3; - font-size: 0.9rem !important; + font-size: 0.9375rem !important; + font-family: "Vogun", serif; + font-weight: 500; + color: black; + font-size: 1.375rem; + line-height: 1.2; } .layout-content .fullpage.projets > .projets_list > .views-row > .views-field-field-sous-titre a { color: black; } -.layout-content .fullpage.projets > .projets_list > .views-row > .views-field-field-sous-titre { - font-family: "Barlow", sans-serif; - color: black; - font-size: 1.2rem; -} @media (min-width: 760px) { .layout-content .fullpage.projets > .projets_list > .views-row > .views-field-field-sous-titre { - font-size: 1.6rem; + font-size: 2.25rem; } } .layout-content .fullpage.projets > .projets_list > .views-row > .views-field-field-localisation-textuel { @@ -2813,8 +2787,10 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > padding-left: 1.2rem; padding-top: 0.3rem; font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; } .layout-content .fullpage.projets > .projets_list > .views-row > .views-field-field-localisation-textuel a { color: black; @@ -2831,8 +2807,10 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > margin: 0.2rem; transition: background-color 0.3s ease; font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; } .layout-content .fullpage.projets > .projets_list > .views-row > .views-field-field-th ul li:hover { background-color: #8ec2b8; @@ -2847,30 +2825,36 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > padding-top: 3vh; padding-left: 3vw; font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; } .fullpage.projet_full .retour_projets a { - font-size: 0.8rem; + font-size: 0.8125rem; font-weight: 800; - color: #038788; + color: #33ffc4; } .fullpage.projet_full .sous_titre > div > div { - font-family: "Barlow", sans-serif; + font-family: "Vogun", serif; + font-weight: 500; color: black; - font-size: 1.2rem; + font-size: 1.375rem; + line-height: 1.2; } @media (min-width: 760px) { .fullpage.projet_full .sous_titre > div > div { - font-size: 1.6rem; + font-size: 2.25rem; } } .fullpage.projet_full .localisation { margin-left: 3vw; margin-top: 2rem; font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; } .fullpage.projet_full .thematiques { margin-top: 1rem; @@ -2883,8 +2867,10 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > margin: 0.2rem; transition: background-color 0.3s ease; font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; } .fullpage.projet_full .thematiques > div > div > div:hover { background-color: #8ec2b8; @@ -2923,14 +2909,14 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > width: 1.2rem; height: 1.2rem; border-radius: 1.5rem; - background-color: #038788 !important; + background-color: #33ffc4 !important; transition: background-color 0.3s ease; } .fullpage.projet_full .diapo .slick-arrow:hover { background-color: white !important; } .fullpage.projet_full .diapo .slick-arrow:hover::before { - color: #038788; + color: #33ffc4; } .fullpage.projet_full .diapo .slick-arrow::before { opacity: 1 !important; @@ -2938,7 +2924,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > font-weight: bold; font-family: "Marianne", sans-serif; display: block; - font-size: 0.8rem !important; + font-size: 0.8125rem !important; } .fullpage.projet_full .diapo .slick-prev { left: -2rem; @@ -2949,16 +2935,11 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > .fullpage.projet_full .text-content .intertitre { margin-left: 3vw; font-family: "Marianne", sans-serif; - font-size: 0.9rem; - color: #038788; font-weight: 800; + font-size: 0.9375rem; + color: #4a4a49; line-height: 1.3; } -@media (min-width: 760px) { - .fullpage.projet_full .text-content .intertitre { - font-size: 1.2rem; - } -} .fullpage.projet_full .text-content .paragraph { margin-bottom: 3rem; } @@ -2976,21 +2957,16 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > .fullpage.projet_full .chiffre-clefs > div > div .paragraph > div:first-of-type { font-size: 2rem !important; font-family: "Marianne", sans-serif; - font-size: 0.9rem; - color: #038788; font-weight: 800; + font-size: 0.9375rem; + color: #4a4a49; line-height: 1.3; } -@media (min-width: 760px) { - .fullpage.projet_full .chiffre-clefs > div > div .paragraph > div:first-of-type { - font-size: 1.2rem; - } -} .fullpage.projet_full .chiffre-clefs > div > div .paragraph p { margin: 0; padding: 0; margin-top: 0.5rem; - color: #038788; + color: #33ffc4; } .fullpage.projet_full .carte { width: auto; @@ -3001,9 +2977,9 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > display: none; } .fullpage.projet_full .carte .leaflet-pane path { - stroke: #00ff80; + stroke: #33ffc4; stroke-width: 2; - fill: #00ff80; + fill: #33ffc4; fill-opacity: 0.2; } .fullpage.projet_full .carte .popup .leaflet-popup-tip { @@ -3013,12 +2989,14 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > .fullpage.projet_full .carte .popup .leaflet-popup-content-wrapper { padding: 0.3rem 0.8rem; background-color: white; - font-size: 0.8rem !important; + font-size: 0.8125rem !important; box-shadow: none; border-radius: unset; font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; } .fullpage.projet_full .carte .popup .leaflet-popup-content-wrapper .leaflet-popup-content { margin: 0; @@ -3040,13 +3018,15 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > .fullpage.projet_full .equipe > div > div:first-of-type { margin-left: 3vw; margin-bottom: 2rem; - font-family: "Barlow", sans-serif; + font-family: "Vogun", serif; + font-weight: 500; color: black; - font-size: 1.2rem; + font-size: 1.375rem; + line-height: 1.2; } @media (min-width: 760px) { .fullpage.projet_full .equipe > div > div:first-of-type { - font-size: 1.6rem; + font-size: 2.25rem; } } .fullpage.projet_full .equipe > div > div:nth-of-type(2) > div:first-of-type > div > div:first-of-type > div:last-of-type::before { @@ -3074,16 +3054,11 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > margin-bottom: 2rem; display: inline-block; font-family: "Marianne", sans-serif; - font-size: 0.9rem; - color: #038788; font-weight: 800; + font-size: 0.9375rem; + color: #4a4a49; line-height: 1.3; } -@media (min-width: 760px) { - .fullpage.projet_full .equipe > div > div:nth-of-type(2) > div > div > div:first-of-type { - font-size: 1.2rem; - } -} .fullpage.projet_full .equipe > div > div:nth-of-type(2) > div > div > div:first-of-type > div:last-of-type { display: flex; align-items: center; @@ -3093,7 +3068,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > display: inline-block; width: 1.8rem; height: 1.8rem; - background-color: #038788; + background-color: #33ffc4; mask-repeat: no-repeat; mask-position: center; mask-size: 1.8rem; @@ -3137,18 +3112,13 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > margin: 0; padding: 0; color: black !important; - font-size: 0.9rem !important; + font-size: 0.9375rem !important; font-family: "Marianne", sans-serif; - font-size: 0.9rem; - color: #038788; font-weight: 800; + font-size: 0.9375rem; + color: #4a4a49; line-height: 1.3; } -@media (min-width: 760px) { - .fullpage.projet_full .equipe > div > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > .paragraph > .nom { - font-size: 1.2rem; - } -} .fullpage.projet_full .equipe > div > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > .paragraph > .nom > div { padding-left: 0.2rem !important; } @@ -3158,25 +3128,20 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > margin: 0; padding: 0; color: black !important; - font-size: 0.9rem !important; + font-size: 0.9375rem !important; font-family: "Marianne", sans-serif; - font-size: 0.9rem; - color: #038788; font-weight: 800; + font-size: 0.9375rem; + color: #4a4a49; line-height: 1.3; } -@media (min-width: 760px) { - .fullpage.projet_full .equipe > div > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > .paragraph > .prenom { - font-size: 1.2rem; - } -} .fullpage.projet_full .equipe > div > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > .paragraph > .texte { margin-top: 0.5rem; grid-column: 1/span 2; grid-row: 3; } .fullpage.projet_full .equipe > div > div:nth-of-type(2) > div > div > div:nth-of-type(2) > div > div > .paragraph > .texte p { - font-size: 0.9rem; + font-size: 0.9375rem; margin: 0 !important; padding: 0 !important; } @@ -3240,12 +3205,12 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > @media screen and (min-width: 760px) { .fullpage .actus_list h2 { - font-size: 1.6rem !important; + font-size: 2.25rem !important; } } @media screen and (min-width: 760px) { .fullpage .actus_list .sous_titre { - font-size: 0.9rem !important; + font-size: 0.9375rem !important; } } @@ -3279,13 +3244,15 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > } .ressources > div > h2 > a > span { display: block; - font-family: "Barlow", sans-serif; + font-family: "Vogun", serif; + font-weight: 500; color: black; - font-size: 1.2rem; + font-size: 1.375rem; + line-height: 1.2; } @media (min-width: 760px) { .ressources > div > h2 > a > span { - font-size: 1.6rem; + font-size: 2.25rem; } } .ressources > div > div:has(a) { @@ -3296,22 +3263,25 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > margin-top: -1rem; } .ressources > div > div:has(a) > div > span a { + font-family: "Vogun", serif; + font-weight: 500; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.2; + display: inline-block; 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; + border: none; + padding: 0.75rem 1.5rem; + text-decoration: none; + transition: color 0.2s ease; text-wrap: nowrap !important; } .ressources > div > div:has(a) > div > span a svg { display: none; } .ressources > div > div:has(a) > div > span a:hover { - background-color: #00ff80; + color: black; } .ressources > div > div:has(a) > div > span:last-of-type { display: none; @@ -3324,7 +3294,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > margin-right: 2rem; } .ressources > div > div:has(img) img { - border: solid 1px #038788; + border: solid 1px #33ffc4; width: 100%; height: auto; } @@ -3336,8 +3306,10 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > display: block; padding-bottom: 0.5rem; font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; } .views-row:first-of-type > .ressources { @@ -3346,19 +3318,17 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > .views-row:first-of-type > .ressources > .main-title { display: block; padding-top: 5vh !important; - font-family: "Barlow Condensed", sans-serif; - font-size: 1.6rem; + font-family: "Vogun", serif; + font-weight: 500; + font-size: 2.25rem; + color: black; + line-height: 1.2; padding: 0 3vw; margin-top: 1rem; - color: #038788; - text-transform: uppercase; -} -.views-row:first-of-type > .ressources > .main-title a { - color: #038788; } @media (min-width: 760px) { .views-row:first-of-type > .ressources > .main-title { - font-size: 2.3rem; + font-size: 3.5625rem; } } @@ -3366,13 +3336,15 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > padding-top: 3vh; padding-left: 3vw; font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; } .ressource .retour_ressources a { - font-size: 0.8rem; + font-size: 0.8125rem; font-weight: 800; - color: #038788; + color: #33ffc4; } .ressource > div:not(.retour_ressources) { margin: 3vw; @@ -3392,13 +3364,15 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > } .ressource > div:not(.retour_ressources) > h2 > span { display: block; - font-family: "Barlow", sans-serif; + font-family: "Vogun", serif; + font-weight: 500; color: black; - font-size: 1.2rem; + font-size: 1.375rem; + line-height: 1.2; } @media (min-width: 760px) { .ressource > div:not(.retour_ressources) > h2 > span { - font-size: 1.6rem; + font-size: 2.25rem; } } .ressource > div:not(.retour_ressources) > div:not(.retour_ressources):first-of-type { @@ -3409,22 +3383,25 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > margin-top: -1rem; } .ressource > div:not(.retour_ressources) > div:not(.retour_ressources):first-of-type > div > span a { + font-family: "Vogun", serif; + font-weight: 500; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.2; + display: inline-block; 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; + border: none; + padding: 0.75rem 1.5rem; + text-decoration: none; + transition: color 0.2s ease; text-wrap: nowrap !important; } .ressource > div:not(.retour_ressources) > div:not(.retour_ressources):first-of-type > div > span a svg { display: none; } .ressource > div:not(.retour_ressources) > div:not(.retour_ressources):first-of-type > div > span a:hover { - background-color: #00ff80; + color: black; } .ressource > div:not(.retour_ressources) > div:not(.retour_ressources):first-of-type > div > span:last-of-type { display: none; @@ -3444,14 +3421,18 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > grid-row: 2; margin-top: -1rem; font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; } .faq-fullpage { font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; padding: 0 3vw; } .faq-fullpage .faq-description { @@ -3465,7 +3446,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > padding-bottom: 0.5rem; } .faq-fullpage .faq-question > span > a { - color: #038788; + color: #33ffc4; font-weight: 800; display: flex; align-items: center; @@ -3483,7 +3464,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > padding-top: 1rem; padding-bottom: 0.5rem; margin-left: -40px; - color: #038788; + color: #33ffc4; } .faq-fullpage .faq-question-answer:last-of-type { border-bottom: solid 1px #314e41; @@ -3505,9 +3486,11 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > width: 50vw; margin-left: 1.5vw; font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; - background-color: #038788; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; + background-color: #33ffc4; color: white; font-weight: 800; padding-bottom: 2rem; @@ -3569,24 +3552,26 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > .actu_full div { font-family: "Marianne", sans-serif; - font-size: 1rem; - line-height: 1.4; + font-weight: 400; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.3; } .actu_full .retour_actus { padding-top: 3vh; padding-left: 3vw; } .actu_full .retour_actus a { - font-size: 0.8rem; + font-size: 0.8125rem; font-weight: 800; - color: #038788; + color: #33ffc4; } .actu_full .article_meta { padding-left: 3vw; margin: 20px 0; } .actu_full .article_meta div { - font-size: 0.8rem; + font-size: 0.8125rem; margin-bottom: 5px; } .actu_full .article_meta + h2 { @@ -3607,7 +3592,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > margin-top: -1.5rem; } .actu_full h2 + div .sous_titre > div > div { - font-size: 1.2rem; + font-size: 1.375rem; margin-bottom: 30px; } .actu_full h2 + div > div > div { @@ -3624,38 +3609,36 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > .actu_full h3, .actu_full h4, .actu_full h5, .actu_full h6 { margin-bottom: 1rem; font-family: "Marianne", sans-serif; - font-size: 0.9rem; - color: #038788; font-weight: 800; + font-size: 0.9375rem; + color: #4a4a49; line-height: 1.3; } -@media (min-width: 760px) { - .actu_full h3, .actu_full h4, .actu_full h5, .actu_full h6 { - font-size: 1.2rem; - } -} .actu_full .liens_fixed > div > div:nth-of-type(2) > div, .actu_full .file_fixed > div > div > div { padding: 0 1.5vw; text-align: right; margin: 2rem 0; } .actu_full .liens_fixed > div > div:nth-of-type(2) > div a, .actu_full .file_fixed > div > div > div a { + font-family: "Vogun", serif; + font-weight: 500; + font-size: 0.9375rem; + color: #4a4a49; + line-height: 1.2; + display: inline-block; 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; + border: none; + padding: 0.75rem 1.5rem; + text-decoration: none; + transition: color 0.2s ease; text-wrap: nowrap !important; } .actu_full .liens_fixed > div > div:nth-of-type(2) > div a svg, .actu_full .file_fixed > div > div > div a svg { display: none; } .actu_full .liens_fixed > div > div:nth-of-type(2) > div a:hover, .actu_full .file_fixed > div > div > div a:hover { - background-color: #00ff80; + color: black; } .actu_full .liens_fixed > div > div:nth-of-type(2) > div a, .actu_full .file_fixed > div > div > div a { display: inline-block; @@ -3678,5 +3661,3 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) > .actu_full .file_fixed span:last-of-type { display: none; } - -/*# sourceMappingURL=styles.css.map */ diff --git a/web/themes/erabletheme/fonts/Barlow/BarlowCondensed-Regular.woff2 b/web/themes/erabletheme/fonts/Barlow/BarlowCondensed-Regular.woff2 deleted file mode 100644 index 40440f0..0000000 Binary files a/web/themes/erabletheme/fonts/Barlow/BarlowCondensed-Regular.woff2 and /dev/null differ diff --git a/web/themes/erabletheme/fonts/Barlow/barlow-light.woff b/web/themes/erabletheme/fonts/Barlow/barlow-light.woff deleted file mode 100644 index 5307a95..0000000 Binary files a/web/themes/erabletheme/fonts/Barlow/barlow-light.woff and /dev/null differ diff --git a/web/themes/erabletheme/fonts/Barlow/barlow-light.woff2 b/web/themes/erabletheme/fonts/Barlow/barlow-light.woff2 deleted file mode 100644 index 1d23b0c..0000000 Binary files a/web/themes/erabletheme/fonts/Barlow/barlow-light.woff2 and /dev/null differ diff --git a/web/themes/erabletheme/fonts/Vogun/Vogun-Regular.woff2 b/web/themes/erabletheme/fonts/Vogun/Vogun-Regular.woff2 new file mode 100644 index 0000000..8eba688 Binary files /dev/null and b/web/themes/erabletheme/fonts/Vogun/Vogun-Regular.woff2 differ diff --git a/web/themes/erabletheme/js/erabletheme.js b/web/themes/erabletheme/js/erabletheme.js index 340f270..d50c989 100644 --- a/web/themes/erabletheme/js/erabletheme.js +++ b/web/themes/erabletheme/js/erabletheme.js @@ -9,6 +9,21 @@ Drupal.behaviors.erabletheme = { attach: function (context, settings) { + // + // Home intro : sortir le .more-link (rendu profond par smart_trim) + // de .intro_body pour le placer directement sous .intro_main. + // Ainsi le séparateur vertical s'arrête en bas du texte, pas du bouton, + // et le bouton est centré par rapport à .home_introduction. + // + const intro = document.querySelector('.home_introduction'); + if (intro && !intro.dataset.moreLinkMoved) { + const moreLink = intro.querySelector('.intro_body .more-link'); + if (moreLink) { + intro.appendChild(moreLink); + intro.dataset.moreLinkMoved = 'true'; + } + } + // // Carrousel // diff --git a/web/themes/erabletheme/package.json b/web/themes/erabletheme/package.json index e4a6a61..7d100ea 100644 --- a/web/themes/erabletheme/package.json +++ b/web/themes/erabletheme/package.json @@ -4,7 +4,7 @@ "description": "", "main": "index.js", "scripts": { - "sass": "node-sass -w scss/ -o css/" + "sass": "sass --watch --no-source-map scss/styles.scss:css/styles.css" }, "author": "", "license": "ISC", diff --git a/web/themes/erabletheme/scss/_actualites.scss b/web/themes/erabletheme/scss/_actualites.scss index 0f5edef..e6078cf 100644 --- a/web/themes/erabletheme/scss/_actualites.scss +++ b/web/themes/erabletheme/scss/_actualites.scss @@ -16,12 +16,12 @@ .actus_list { h2 { @media screen and (min-width: $breakpoint_tablet) { - font-size: $xl_font_size !important; + font-size: $fs_xl !important; } } .sous_titre { @media screen and (min-width: $breakpoint_tablet) { - font-size: $m_font_size !important; + font-size: $fs_sm !important; } } } diff --git a/web/themes/erabletheme/scss/_fullpage.scss b/web/themes/erabletheme/scss/_fullpage.scss index ea02750..0fe85b3 100644 --- a/web/themes/erabletheme/scss/_fullpage.scss +++ b/web/themes/erabletheme/scss/_fullpage.scss @@ -193,7 +193,7 @@ aside.layout-sidebar-first:has(#block-erabletheme-views-block-projets-block-1) { a { color: black; - font-size: $m_font_size; + font-size: $fs_sm; &:hover, &.is-active { font-weight: 800; diff --git a/web/themes/erabletheme/scss/_home.scss b/web/themes/erabletheme/scss/_home.scss index 44efb5f..f92fa77 100644 --- a/web/themes/erabletheme/scss/_home.scss +++ b/web/themes/erabletheme/scss/_home.scss @@ -1,74 +1,76 @@ .home_introduction { - background-color: white; - width: 100%; box-sizing: border-box; - padding: 3rem 1rem; - margin: 2rem 0; - h2 { - display: none; + width: 100%; + max-width: 70rem; + margin: 8vw auto; + padding: 8vw 6vw; + + display: flex; + flex-direction: column; + align-items: center; + gap: 3rem; + + h2 { display: none; } // titre du bloc Drupal masqué (logo le remplace) + + // Bloc supérieur : logo | séparateur | texte + .intro_main { + width: 100%; + display: grid; + grid-template-columns: 1fr; // mobile : empilé + gap: 6vw; + justify-items: center; + + @media (min-width: $breakpoint_desktop) { + grid-template-columns: minmax(8rem, 22%) 1px 1fr; + align-items: center; + gap: 2.5vw; + } } - > .logo { + + .intro_logo { display: flex; justify-content: center; - align-items: center; - width: 100%; - margin-bottom: 2rem; img { - width: 50%; + width: 40vw; + max-width: 14rem; height: auto; @media (min-width: $breakpoint_desktop) { - width: 100%; + width: 100%; } } + } + + .intro_separator { + display: none; @media (min-width: $breakpoint_desktop) { - width: 170%; - margin: 0 3rem; + display: block; + width: 1px; + align-self: stretch; + background-color: $text_grey; + justify-self: center; } } - article > div { - height: unset !important; - min-height: 100%; - p { - @include main_text_content(); + + .intro_body { + width: 100%; + article > div { + height: unset !important; + min-height: unset; width: 100%; - @media (min-width: $breakpoint_tablet) { - padding-left: 3rem; - padding-right: 3rem; + max-width: 45rem; + margin-inline: auto; // centrage horizontal du wrapper texte + p { + @include main_text_content(); + margin: 0; } - @media (min-width: $breakpoint_desktop) { - padding-left: 0; - } - } - @media (min-width: $breakpoint_tablet) { - padding: 0 !important; } } - div.more-link { - margin-top: 3rem; - margin-bottom: 1.5rem; - display: flex; - justify-content: center; - align-items: center; + + // CTA "En savoir plus" — déplacé par JS comme enfant direct de + // .home_introduction → centrage naturel via le flex-column du parent. + > div.more-link { @include fluo_button(); - @media (min-width: $breakpoint_tablet) { - position: absolute; - left:0; - right:0; - } - } - @media (min-width: $breakpoint_tablet) { - padding: 8rem 1rem; - padding-top: 4rem; - margin: 6rem 0; - margin-left: 20vw; - margin-right: 20vw; - width: calc(100% - 40vw); - } - @media (min-width: $breakpoint_desktop) { - display: flex; - justify-content: space-around; - margin-top: 20vh; - margin-bottom: 20vh !important; + margin-top: 1rem; } } @@ -128,28 +130,48 @@ } } -.map-projets { - background-color: white; - padding: 1rem 0; - margin-left: $x_margin; - width: calc(100% - #{$x_margin} * 2); - @media (min-width: $breakpoint_tablet) { - margin-left: 20vw; - width: calc(100% - 40vw); - } +// Section "projets lauréats" : titre hors du bloc (centré page), +// puis le bloc lui-même avec son contenu, bordure brand en bas. +.map-projets-section { + display: flex; + flex-direction: column; + align-items: center; @media (min-width: $breakpoint_desktop) { - margin-left: 25vw; - width: calc(100% - 50vw); margin-top: 10vh; margin-bottom: 10vh; } - > h2 { - @include main_title(); +} + +.map-projets-title { + @include main_title(); + text-align: center; + padding: 0; + margin: 0 0 4rem; +} + +.map-projets { + background-color: white; + padding: 1rem 0; + margin: 0 auto; + width: calc(100% - #{$x_margin} * 2); + border-bottom: 7px solid $fluo_green; + // CTA "Voir les projets" : même style fluo_button, fond gris page + // pour se fondre dans la section. + > footer.fluo_links { + margin-top: 1rem; + margin-bottom: 4rem; + a { background-color: $page_bg; } + } + @media (min-width: $breakpoint_tablet) { + width: 60vw; + } + @media (min-width: $breakpoint_desktop) { + width: 50vw; } > .projets_intro { padding: 0 3vw; margin-top: 1.3rem; - margin-bottom: 6vh; + margin-bottom: 2.5rem; @include main_text_content(); @media screen and (min-width: $breakpoint_tablet) { margin-top: 2vh; @@ -169,6 +191,7 @@ margin: 0 2rem; width: calc(100% - 4rem); #popup { + background-color: $page_bg; h3 { @include sous_titre(); } diff --git a/web/themes/erabletheme/scss/_meetup.scss b/web/themes/erabletheme/scss/_meetup.scss index f165f57..0247ad4 100644 --- a/web/themes/erabletheme/scss/_meetup.scss +++ b/web/themes/erabletheme/scss/_meetup.scss @@ -238,7 +238,7 @@ padding-top: 3vh; padding-left: $x_margin; a { - font-size: $sm_font_size; + font-size: $fs_xs; font-weight: 800; color: $teal; } @@ -326,7 +326,7 @@ > .offre-title { grid-column: 2/4; grid-row: 4/5; - font-size: $xl_font_size; + font-size: $fs_xl; font-weight: 800; margin-bottom: 2rem; } @@ -350,7 +350,7 @@ padding: 0.7rem 1rem; color: white; font-weight: 800; - font-size: $sm_font_size; + font-size: $fs_xs; transform: translateY(0); transition: transform 0.2s ease-out; } @@ -364,7 +364,7 @@ } > h2 { text-transform: unset !important; - font-size: $sm_font_size !important; + font-size: $fs_xs !important; color: black !important; margin: 0 !important; padding: 0 !important; @@ -373,7 +373,7 @@ align-self: center; grid-column: 2/4; grid-row: 6/7; - font-size: $sm_font_size; + font-size: $fs_xs; margin-top: 1rem; margin-bottom: 0.5rem; @media (min-width: $breakpoint_desktop) { diff --git a/web/themes/erabletheme/scss/_projets.scss b/web/themes/erabletheme/scss/_projets.scss index c46cce9..a363a16 100644 --- a/web/themes/erabletheme/scss/_projets.scss +++ b/web/themes/erabletheme/scss/_projets.scss @@ -127,7 +127,7 @@ font-size: 1.1rem !important; margin-bottom: 1rem; line-height: 1.3; - font-size: $m_font_size !important; + font-size: $fs_sm !important; a { color: black; } @@ -179,7 +179,7 @@ padding-left: $x_margin; @include main_text_content(); a { - font-size: $sm_font_size; + font-size: $fs_xs; font-weight: 800; color: $teal; } @@ -259,7 +259,7 @@ font-weight: bold; font-family: 'Marianne', sans-serif; display: block; - font-size: $sm_font_size !important; + font-size: $fs_xs !important; } } .slick-prev { @@ -326,7 +326,7 @@ .leaflet-popup-content-wrapper { padding: 0.3rem 0.8rem; background-color: white; - font-size: $sm_font_size !important; + font-size: $fs_xs !important; box-shadow: none; border-radius: unset; @include main_text_content(); @@ -441,7 +441,7 @@ margin: 0; padding: 0; color: black !important; - font-size: $m_font_size !important; + font-size: $fs_sm !important; @include sous_titre(); > div { padding-left: 0.2rem !important; @@ -453,7 +453,7 @@ margin: 0; padding: 0; color: black !important; - font-size: $m_font_size !important; + font-size: $fs_sm !important; @include sous_titre(); } > .texte { @@ -461,7 +461,7 @@ grid-column: 1 / span 2; grid-row: 3; p { - font-size: $m_font_size; + font-size: $fs_sm; margin: 0 !important; padding: 0 !important; } diff --git a/web/themes/erabletheme/scss/_ressources.scss b/web/themes/erabletheme/scss/_ressources.scss index 738ea89..d8ca8c6 100644 --- a/web/themes/erabletheme/scss/_ressources.scss +++ b/web/themes/erabletheme/scss/_ressources.scss @@ -83,7 +83,7 @@ padding-left: $x_margin; @include main_text_content(); a { - font-size: $sm_font_size; + font-size: $fs_xs; font-weight: 800; color: $teal; } diff --git a/web/themes/erabletheme/scss/global/_fonts.scss b/web/themes/erabletheme/scss/global/_fonts.scss index 66be1a4..1fe6af5 100644 --- a/web/themes/erabletheme/scss/global/_fonts.scss +++ b/web/themes/erabletheme/scss/global/_fonts.scss @@ -32,19 +32,11 @@ font-style: italic; } -/* Barlow */ +/* Vogun */ @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 -} - -@font-face { - font-family: 'Barlow Condensed'; - src: url('../fonts/Barlow/BarlowCondensed-Regular.woff2') format('woff2'); - font-weight: normal; + font-family: 'Vogun'; + src: url('../fonts/Vogun/Vogun-Regular.woff2') format('woff2'); + font-weight: 500; font-style: normal; } diff --git a/web/themes/erabletheme/scss/global/_global.scss b/web/themes/erabletheme/scss/global/_global.scss index 38e4777..6195908 100644 --- a/web/themes/erabletheme/scss/global/_global.scss +++ b/web/themes/erabletheme/scss/global/_global.scss @@ -8,6 +8,7 @@ body { height: 100vh; overflow: scroll; + background-color: $page_bg; .layout-container { position: relative; display: flex; @@ -27,6 +28,7 @@ body { z-index: 0; } #background { + display: none; z-index: -1; } } @@ -59,6 +61,15 @@ em { display: none; } +// Footer générique des vues (footer link, ex: "Voir toutes les actualités") +footer.fluo_links { + @include fluo_button(); + display: flex; + justify-content: center; + margin-top: 2rem; + p { margin: 0; } +} + // debug /* * { border: solid 1px red !important; diff --git a/web/themes/erabletheme/scss/global/variables/_colors.scss b/web/themes/erabletheme/scss/global/variables/_colors.scss index 2533f77..6c4ca6c 100644 --- a/web/themes/erabletheme/scss/global/variables/_colors.scss +++ b/web/themes/erabletheme/scss/global/variables/_colors.scss @@ -1,7 +1,9 @@ -$fluo_green: #00ff80; -$teal: #038788; +$fluo_green: #33ffc4; +$teal: $fluo_green; $beige: #fcf9ee; $dark_green: #314e41; +$text_grey: #4a4a49; +$page_bg: #f9f9f9; @mixin beige_gradient() { background: linear-gradient(to bottom, $beige 80%, white 100%); diff --git a/web/themes/erabletheme/scss/global/variables/_typography.scss b/web/themes/erabletheme/scss/global/variables/_typography.scss index 0830d6a..99a9b66 100644 --- a/web/themes/erabletheme/scss/global/variables/_typography.scss +++ b/web/themes/erabletheme/scss/global/variables/_typography.scss @@ -1,71 +1,102 @@ -/* SIZES */ -$sm_font_size: 0.8rem; -$m_font_size: 0.9rem; -$l_font_size: 1.2rem; -$xl_font_size: 1.6rem; -$main_font_size: 1rem; -$title_size: 2.3rem; +/* FAMILIES */ +$vogun: "Vogun", serif; +$marianne: "Marianne", sans-serif; + +/* FONT SIZES — échelle unique en rem (base 16px) */ +$fs_xs: 0.8125rem; // 13px — meta, captions +$fs_sm: 0.9375rem; // 15px — corps texte, CTA, liens footer +$fs_md: 1.0625rem; // 17px — corps texte sections longues +$fs_lg: 1.375rem; // 22px — intertitres +$fs_xl: 2.25rem; // 36px — titres cards +$fs_2xl: 3.5625rem; // 57px — hero title + +/* LINE HEIGHTS */ +$lh_tight: 1.2; +$lh_normal: 1.3; +$lh_loose: 1.4; + +/* FONT WEIGHTS */ +$fw_regular: 400; +$fw_medium: 500; +$fw_bold: 800; /* MIXINS */ +// Titre principal d'une section (H2 grands) @mixin main_title() { - font-family: "Barlow Condensed", sans-serif; - font-size: $xl_font_size; + font-family: $vogun; + font-weight: $fw_medium; + font-size: $fs_xl; + color: black; + line-height: $lh_tight; padding: 0 $x_margin; margin-top: 1rem; - color: $teal; - text-transform: uppercase; - a { - color: $teal; - } @media (min-width: $breakpoint_tablet) { - font-size: $title_size; + font-size: $fs_2xl; } } -@mixin main_text_content() { - font-family: "Marianne", sans-serif; - font-size: $main_font_size; - line-height: 1.4; -} - +// Sous-titre (Marianne bold gris) @mixin sous_titre() { - font-family: "Marianne", sans-serif; - font-size: $m_font_size; - color: $teal; - font-weight: 800; - line-height: 1.3; - @media (min-width: $breakpoint_tablet) { - font-size: $l_font_size; - } + font-family: $marianne; + font-weight: $fw_bold; + font-size: $fs_sm; + color: $text_grey; + line-height: $lh_normal; } +// Variante alternative de sous-titre (Vogun) @mixin sous_titre_alt() { - font-family: "Barlow", sans-serif; + font-family: $vogun; + font-weight: $fw_medium; color: black; - font-size: $l_font_size; + font-size: $fs_lg; + line-height: $lh_tight; @media (min-width: $breakpoint_tablet) { - font-size: $xl_font_size; + font-size: $fs_xl; } } +// Corps de texte principal +@mixin main_text_content() { + font-family: $marianne; + font-weight: $fw_regular; + font-size: $fs_sm; + color: $text_grey; + line-height: $lh_normal; +} + +// Meta (date, type, etc.) +@mixin meta_text() { + font-family: $marianne; + font-weight: $fw_regular; + font-size: $fs_xs; + color: $text_grey; + line-height: $lh_normal; +} + +// Typo CTA (Vogun 15px gris) +@mixin cta_text() { + font-family: $vogun; + font-weight: $fw_medium; + font-size: $fs_sm; + color: $text_grey; + line-height: $lh_tight; +} + +// CTA visuellement complet (typo + fond + padding + hover) @mixin fluo_button() { a { + @include cta_text(); + display: inline-block; text-align: center; - color: black; - font-family: "Marianne", sans-serif; - font-weight: 800; - font-size: $m_font_size; background-color: white; - border: solid 2px $fluo_green; - padding: 9px 18px; - transition: background-color 0.3s ease; + border: none; + padding: 0.75rem 1.5rem; + text-decoration: none; + transition: color 0.2s ease; text-wrap: nowrap !important; - svg { - display: none; - } - } - a:hover { - background-color: $fluo_green; + svg { display: none; } + &:hover { color: black; } } } diff --git a/web/themes/erabletheme/scss/partials/_articles.scss b/web/themes/erabletheme/scss/partials/_articles.scss index 439df0a..03aec07 100644 --- a/web/themes/erabletheme/scss/partials/_articles.scss +++ b/web/themes/erabletheme/scss/partials/_articles.scss @@ -6,7 +6,7 @@ padding-top: 3vh; padding-left: $x_margin; a { - font-size: $sm_font_size; + font-size: $fs_xs; font-weight: 800; color: $teal; } @@ -15,7 +15,7 @@ padding-left: $x_margin; margin: 20px 0; div { - font-size: $sm_font_size; + font-size: $fs_xs; margin-bottom: 5px; } } @@ -36,7 +36,7 @@ margin-top: -1.5rem; > div > div { - font-size: $l_font_size; + font-size: $fs_lg; margin-bottom: 30px; } } diff --git a/web/themes/erabletheme/scss/partials/_articles_teaser.scss b/web/themes/erabletheme/scss/partials/_articles_teaser.scss index 562e195..7e07b81 100644 --- a/web/themes/erabletheme/scss/partials/_articles_teaser.scss +++ b/web/themes/erabletheme/scss/partials/_articles_teaser.scss @@ -3,6 +3,7 @@ background-color: white; padding: 1rem; box-sizing: border-box; + border-bottom: 7px solid $fluo_green; @media screen and (min-width: $breakpoint_tablet) { padding: 2rem; } @@ -26,43 +27,40 @@ } .preview_meta { - font-family: "Marianne", sans-serif; - font-size: $sm_font_size; + @include meta_text(); width: auto; display: flex; justify-content: space-between; - color: $teal; margin: 0 $x_margin; margin-top: 1.3rem; padding-top: 0.7rem; margin-left: 0; @media (min-width: $breakpoint_tablet) { margin-left: unset; - font-size: $m_font_size; } } .preview_sous_titre { - font-family: "Marianne", sans-serif; - font-size: $m_font_size; + @include main_text_content(); padding: 5px $x_margin; padding-left: 0 !important; .sous_titre { - line-height: 1.3 !important; + line-height: $lh_normal !important; + margin-top: 1rem; + margin-bottom: 1.5rem; } @media (min-width: $breakpoint_tablet) { padding-left: unset; - font-size: $l_font_size; padding-top: unset !important; } } h2 { + @include sous_titre_alt(); margin-bottom: 0.5rem; margin-top: 1rem !important; padding: 0 !important; - line-height: 1.2; - @include main_title(); + a { color: inherit; text-decoration: none; } } } diff --git a/web/themes/erabletheme/scss/partials/_carousel.scss b/web/themes/erabletheme/scss/partials/_carousel.scss index 8f2d847..67246f1 100644 --- a/web/themes/erabletheme/scss/partials/_carousel.scss +++ b/web/themes/erabletheme/scss/partials/_carousel.scss @@ -1,3 +1,7 @@ +// Variables pagination du carrousel (flèches + dots slick). +$arrow_size: 2.3rem; +$pagination_line_offset: 4rem; // distance bas carrousel -> centre de la ligne flèches/dots + .carousel_container { @media screen and (min-width: $breakpoint_tablet) { width: 100%; @@ -45,46 +49,52 @@ } } } + // --- Ligne de pagination --- + // Slick rend les flèches dans .slick-list (donc dans .slick-container) + // et les dots dans #carousel_dots (frère, géré plus bas). .slick-arrow { - width: 1.5rem; - height: 1.5rem; - border-radius: 1.5rem; - background-color: $teal !important; + width: $arrow_size; + height: $arrow_size; + border-radius: 50%; + background-color: $fluo_green !important; transition: background-color 0.3s ease; top: unset !important; - bottom: calc(-25px - 4rem); - @media (min-width: $breakpoint_tablet) { - width: 2rem; - height: 2rem; - bottom: calc(-25px - 6rem); - } + // Centre vertical de la flèche aligné sur $pagination_line_offset + bottom: calc(-1 * (#{$pagination_line_offset} + #{$arrow_size} / 2)); + display: flex !important; + align-items: center; + justify-content: center; + padding: 0; &:hover { - background-color: white !important; - &::before { - color: $teal; - } + &::before { color: black; } } &::before { + position: static; opacity: 1 !important; - color: white; + color: $text_grey; font-weight: bold; - font-family: 'Marianne', sans-serif; - display: block; - font-size: $sm_font_size !important; - @media (min-width: $breakpoint_tablet) { - font-size: $l_font_size !important; - } + font-family: $marianne; + font-size: $fs_md !important; + line-height: 1; + width: auto; + height: auto; } } .slick-prev { - left: 20vw; + left: 5vw; @media (min-width: $breakpoint_tablet) { + left: calc(50vw + 10vw); // tablette : proche du bord (repère 200vw) + } + @media (min-width: $breakpoint_desktop) { left: calc(50vw + 35vw); } } .slick-next { - right: 20vw; + right: 5vw; @media (min-width: $breakpoint_tablet) { + right: calc(50vw + 10vw); + } + @media (min-width: $breakpoint_desktop) { right: calc(50vw + 35vw); } } @@ -96,26 +106,56 @@ margin-bottom: 6rem; } } - #carousel_dots { - z-index: 1; - position: relative; - margin-top: -15px; - ul { - position: relative; - bottom: 0; - li.slick-active button::before{ - color: $teal; - } - li button::before{ - color: rgba(0.9, 0.9, 0.9, 1); - } + } // /.slick-container + + // #carousel_dots utilise le ::before unicode de slick comme pastille + // (cf. slick-theme.css ~ligne 178). On stylise donc la couleur du ::before + // au lieu de masquer le ::before et de styler le button — c'est plus simple + // et c'est ainsi que ça fonctionnait avant la refonte. + // + // Alignement vertical avec les flèches : + // - Les flèches sont ancrées via `bottom: -($pagination_line_offset + $arrow_size/2)` + // donc leur centre vertical est à $pagination_line_offset sous le bas du carrousel. + // - Le #carousel_dots arrive juste en dessous (flux normal). Sa rangée de dots + // intrinsèque (ul.slick-dots de slick) fait environ 1.25rem de hauteur visuelle. + // - Pour aligner les centres, on remonte de : + // $pagination_line_offset + $arrow_size/2 - 1.25rem + $slick_dots_intrinsic_height: 1.25rem; + #carousel_dots { + position: relative; + z-index: 1; + // Formule calibrée pour tablette+/desktop (cf. commentaire ci-dessus). + margin-top: calc(-1 * (#{$pagination_line_offset} + #{$arrow_size} / 2 - #{$slick_dots_intrinsic_height})); + // En mobile, slick passe à slidesToShow: 1 → le parent positionné des + // flèches change, ce qui décale leur centre d'~33px vers le haut par + // rapport au flux du #carousel_dots. Magic number pour compenser. + @media (max-width: #{$breakpoint_tablet - 1px}) { + margin-top: calc(-1 * (#{$pagination_line_offset} + #{$arrow_size} / 2 - #{$slick_dots_intrinsic_height}) + 33px); + } + ul { + position: relative; + bottom: 0; + li { + margin: 0 0.75rem; + button::before { + font-size: $fs_xs; + opacity: 1; + color: $text_grey; + transition: color 0.2s ease; + } + &:hover button::before { + color: black; + } + &.slick-active button::before { + color: $fluo_green; } } - footer { - @include fluo_button(); - text-align: center; - margin-top: 4rem; - margin-bottom: 4rem; - } + } + } + footer { + @include fluo_button(); + text-align: center; + margin-top: 4rem; + margin-bottom: 4rem; } } diff --git a/web/themes/erabletheme/scss/partials/_footer.scss b/web/themes/erabletheme/scss/partials/_footer.scss index 807cf44..b2b8e9e 100644 --- a/web/themes/erabletheme/scss/partials/_footer.scss +++ b/web/themes/erabletheme/scss/partials/_footer.scss @@ -1,123 +1,95 @@ +// Footer : 2 groupes — logos à gauche, navs + linkedin à droite. +// +// Structure DOM (cf. page.html.twig + Drupal regions) : +// footer +// section#footer_top (vide actuellement) +// section#footer_middle +// section#footer_left (logos rep + epau) +// div#footer_section +// section#footer_center (nav compte + nav pied de page) +// section#footer_right (icône linkedin) +// section#footer_bottom (vide actuellement) +// +// Largeur : 100% en mobile, réduit à la colonne contenu (50vw centré) +// en desktop, comme le reste du contenu de la home. + .layout-container > footer { - width: 100%; - background-color: white; - margin-top: 50px; - padding: 0 $x_margin !important; - @media screen and (min-width: $breakpoint_desktop) { - width: calc(100% - 50vw); - margin-left: 25vw; - } - #footer_middle { - display: flex; - #footer_left > div { - margin-top: 5px; - display: flex; - justify-content: start; - align-items: center; - flex-wrap: nowrap; - #block-erabletheme-logorep { - max-width: 100px; - img { - width: 100%; - height: auto; - } - } - #block-erabletheme-logoepau { - max-width: 150px; - img { - width: 100%; - height: auto; - } - @media (min-width: $breakpoint_tablet) { - padding-left: 2vw; - } - } - } - #footer_section { - display: flex; - width: 100%; - justify-content: space-between; - align-items: center; - margin-top: 10px; - margin-bottom: 20px; - position: relative; - #footer_center { - width: 100%; - > div { - display: flex; - justify-content: space-around; - nav ul { - display: flex; - justify-content: space-between; - li { - a { - color: $dark_green; - font-family: 'Marianne', sans-serif; - font-weight: 800; - text-decoration: underline; - font-size: 0.6rem; - text-align: center; - display: inline-block; - line-height: 1.2; - } - &:last-of-type { - margin-left: 1rem; - } - } - &:first-of-type { - margin-left: 1rem; - } - &:last-of-type { - margin-right: 1rem; - } - } - } - @media (min-width: $breakpoint_tablet) { - padding-left: 0; - } - } + width: 100%; + background-color: white; + margin-top: 50px; + padding: 1rem $x_margin; + box-sizing: border-box; + @media (min-width: $breakpoint_desktop) { + width: 50vw; + margin-left: 25vw; + padding: 1rem; + } - #footer_right { - width: 30%; - #block-erabletheme-socialmedialinks-2 ul { - display: flex; - justify-content: end; - li { - a { - span { - font-weight: lighter; - font-size: 0.8rem; - width: 1.6rem; - height: 1.6rem; - padding-top: 0.2rem; - border-radius: 0.8rem; - color: white; - background-color: $teal; - display: flex; - justify-content: center; - align-items: center; - } - svg.ext { - display: none; - } - } - &:last-of-type { - margin-left: 5px; - } - } - } - @media (min-width: $breakpoint_tablet) { - width: auto; - } - } + #footer_middle { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + gap: 1.5rem; + } - } - @media (min-width: $breakpoint_tablet) { - display: flex; - } + // --- Groupe gauche : logos --- + #footer_left > div { + display: flex; + align-items: center; + gap: 1rem; + #block-erabletheme-logorep img { max-width: 100px; height: auto; } + #block-erabletheme-logoepau img { max-width: 150px; height: auto; } + } + + // --- Groupe droite : navs + linkedin --- + #footer_section { + display: flex; + align-items: center; + gap: 1.5rem; + } + + // Drupal injecte un
wrapper entre #footer_center et les