/* ======================== RESET ======================== */ /*** The new CSS reset - version 1.8.4 (last updated 14.2.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; object-fit: cover; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; padding: 5px; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } .carte-root { margin-bottom: var(--wp--preset--spacing--110)!important; } /* ======================== ZONES ======================== */ :root { --color-01: #0f695f; --color-02: #3c8077; --color-03: #538f87; --color-04: #81ada7; } /* Contour */ .outline{ stroke:#c5cfda; stroke-miterlimit:10; } /* Couleur par région */ .region-1{ fill:var(--color-01); } .region-2{ fill:var(--color-04); } .region-3{ fill:var(--color-04); } .region-4{ fill:var(--color-03); } .region-5{ fill:var(--color-01); } .region-6{ fill:var(--color-02); } .region-7{ fill:var(--color-01); } .region-8{ fill:var(--color-02); } .region-9{ fill:var(--color-04); } .region-10{ fill:var(--color-02); } .region-11{ fill:var(--color-01); } .region-12{ fill:var(--color-04); } .region-13{ fill:var(--color-02); } .region-14{ fill:var(--color-03); } .region-15{ fill:var(--color-03); } .region-16{ fill:var(--color-01); } .active-color + .carte-france__departement, .region:focus .carte-france__departement { fill: var(--wp--preset--color--white) !important; } .active-color + .carte-france__departement--out, .region:focus .carte-france__departement--out { fill: var(--wp--preset--color--contrast) !important; } .region.pop-toggle path:focus-within, .region.pop-toggle path:focus, .region.pop-toggle path:focus-visible, .region.pop-toggle:focus-within, .region.pop-toggle:focus, .region.pop-toggle:focus-visible { outline: none; } /* ======================== DESIGNE ======================== */ body { font-family: Arial, Helvetica, sans-serif; } /* Nav */ .nav--carte-france { position: relative } .nav--carte-france--hidden { display: none; } .nav-scroll-right__container { display: none; position: absolute; right: -0.7rem; top: -.35rem; padding: .75rem; z-index: 1; } .nav-scroll-right__button{ display: block; height: 1.5rem; width: 1.5rem; aspect-ratio: 1; background-color: var(--wp--preset--color--base); border-radius: 50%; box-shadow: 0px 8px 24px #2A2C2B33; } .nav-scroll-right__button::before { content: ''; display: block; height: 100%; width: 100%; aspect-ratio: 1; background-color: var(--wp--preset--color--primary); mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWFycm93LXJpZ2h0Ij48cGF0aCBkPSJNNSAxMmgxNCIvPjxwYXRoIGQ9Im0xMiA1IDcgNy03IDciLz48L3N2Zz4='); mask-size: 75%; mask-position: center; mask-repeat: no-repeat; -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWFycm93LXJpZ2h0Ij48cGF0aCBkPSJNNSAxMmgxNCIvPjxwYXRoIGQ9Im0xMiA1IDcgNy03IDciLz48L3N2Zz4='); -webkit-mask-size: 75%; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; } .nav-scroll-right__container:hover { cursor: pointer; } .nav-scroll-right__container:hover .nav-scroll-right__button { background-color: var(--wp--preset--color--primary); } .nav-scroll-right__container:hover .nav-scroll-right__button::before { background-color: var(--wp--preset--color--base); } @media screen and (max-width: 768px) { .nav-scroll-right__container { display: block; } .nav--carte-france div:not(.nav-scroll-right__container) { padding-right: 1.5rem; } } .nav--carte-france div:not(.nav-scroll-right__container) { display: flex; gap: 1.5rem; align-items: stretch; text-align: center; border-bottom: 1px solid var(--wp--preset--color--neutral-300); } .nav--carte-france button { padding: .5rem .5rem 1rem .5rem; color: var(--wp--preset--color--contrast-light); border-bottom: 2px solid transparent; cursor: pointer; font-size: var(--wp--preset--font-size--m); } .nav--carte-france button:hover { color: var(--wp--preset--color--primary); } .nav--carte-france button:focus, .nav--carte-france button.active, .nav--carte-france button[aria-selected="true"] { border-bottom: 2px solid var(--wp--preset--color--secondary); color: var(--wp--preset--color--primary); font-weight: 800; } .eco-is-pro .nav--carte-france button:focus, .eco-is-pro .nav--carte-france button.active, .eco-is-pro .nav--carte-france button[aria-selected="true"], .page-template-page-professionnels .nav--carte-france button:focus, .page-template-page-professionnels .nav--carte-france button.active, .page-template-page-professionnels .nav--carte-france button[aria-selected="true"], .page-template-page-territoires-et-partenaires .nav--carte-france button:focus, .page-template-page-territoires-et-partenaires .nav--carte-france button.active, .page-template-page-territoires-et-partenaires .nav--carte-france button[aria-selected="true"] { border-bottom: 2px solid var(--wp--preset--color--secondary-pro); } .nav--carte-france button:focus span.focus, .nav--carte-france button:active span.focus { color: #0f695f; } .nav--carte-france button.active span, .nav--carte-france button:active { color: #0f695f; font-weight: 700; } @media screen and (max-width: 768px){ .nav--carte-france div:not(.nav-scroll-right__container) { white-space: nowrap; overflow-x: scroll; border: none; } .nav--carte-france button { font-size: 0.9rem; } } /* POP-UP */ /*.list__popup { height: 0 } */ .popup { position: absolute; width: 24rem; padding: 1.25rem 1.8rem 1.25rem 1.25rem; background-color: #fff; background: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20374%20127.5%22%20style%3D%22enable-background%3Anew%200%200%20374%20127.5%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M374%2C127.5V25c0-13.8-11.2-25-25-25H140.4c-8.8-0.2-26.9%2C6.8-33.6%2C12.2L18.9%2C77.7C13%2C82.4%2C8.3%2C88.3%2C5%2C95%20s-5%2C14-5%2C21.3v11.2H374z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff00 120px, #ffffff 120px); background-repeat: no-repeat; background-position: top center; background-size: contain; border-bottom-left-radius: var(--radius-default); border-bottom-right-radius: var(--radius-default); -webkit-appearance: none; filter: drop-shadow(0px 8px 24px rgba(42, 44, 43, 0.12)); -webkit-filter: drop-shadow(0px 8px 24px rgba(42, 44, 43, 0.12)); } .btn--close { position: absolute; display: block; top: 20px; right: 20px; width: 12px; height: 12px; cursor: pointer; background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2011.6%2011.6%22%20style%3D%22enable-background%3Anew%200%200%2011.6%2011.6%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20d%3D%22M0.1%2C10.5c-0.2%2C0.2-0.2%2C0.4%2C0%2C0.6%22%2F%3E%3Cpath%20d%3D%22M0.1%2C11.1l0.4%2C0.4c0.2%2C0.2%2C0.4%2C0.2%2C0.6%2C0%22%2F%3E%3Cpath%20d%3D%22M11.5%2C10.5%22%2F%3E%3Cpath%20d%3D%22M0.1%2C11.1l0.4%2C0.4c0.2%2C0.2%2C0.4%2C0.2%2C0.6%2C0L11.5%2C1.1c0.2-0.2%2C0.2-0.4%2C0-0.6l-0.4-0.4c-0.2-0.2-0.4-0.2-0.6%2C0L0.1%2C10.5%20C0%2C10.6%2C0%2C10.9%2C0.1%2C11.1%22%2F%3E%3Cpath%20d%3D%22M0.6%2C0.1L0.1%2C0.6C0%2C0.7%2C0%2C1%2C0.1%2C1.1l10.4%2C10.4c0.2%2C0.2%2C0.4%2C0.2%2C0.6%2C0l0.4-0.4c0.2-0.2%2C0.2-0.4%2C0-0.6L1.1%2C0.1%20C1%2C0%2C0.7%2C0%2C0.6%2C0.1%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-size: contain; } .list__zone-name { display: flex; justify-content: start; align-items: center; column-gap: 10px; margin-left: 108px; margin-bottom: 2rem; font-weight: 900; font-size: var(--wp--preset--font-size--l); color: #A45546; } .tag-orange { display: block; width: 20px; height: 17px; background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2020%2017.7%22%20style%3D%22enable-background%3Anew%200%200%2020%2017.7%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23FF735F%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M13.6%2C16.9l6-7c0.5-0.6%2C0.5-1.5%2C0-2.1l-6-7C13.2%2C0.3%2C12.5%2C0%2C11.7%2C0h-10C0.8%2C0%2C0%2C0.7%2C0%2C1.6v14.4%20c0%2C0.9%2C0.8%2C1.6%2C1.7%2C1.6h10C12.5%2C17.7%2C13.2%2C17.4%2C13.6%2C16.9%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-size: contain; } .list__contact--item { display: flex; justify-content: start; align-items: center; column-gap: 10px; padding-bottom: 1.5rem; } .list__contact--item:last-child { padding-bottom: 0rem; } .contact--picture { border-radius: 50%; width: 3.125rem; height: 3.125rem; position: relative; aspect-ratio: 1; border-radius: 2px solid white; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXVzZXIiPjxwYXRoIGQ9Ik0xOSAyMXYtMmE0IDQgMCAwIDAtNC00SDlhNCA0IDAgMCAwLTQgNHYyIi8+PGNpcmNsZSBjeD0iMTIiIGN5PSI3IiByPSI0Ii8+PC9zdmc+'); background-position: center; background-repeat: no-repeat; background-size: 75%; } .list__contact--detail { font-size: var(--wp--preset--font-size--s); } .contact--name { font-weight: 900; color: #1a6a5f; } .contact--mail { color: #066cb5; text-decoration: underline; } @media (min-width: 490px){ .popup { position: absolute!important; } } @media (max-width: 490px){ .list__popup { position: relative; top: 0; transform: none; } .popup { position: static!important; width: auto; min-height: none; padding: 10px; font-size: 0.9rem; background-image: none; background-color: #fff; background-size: auto; border: none; border-radius: 0; box-shadow: none; filter: none; -webkit-filter: none; } .list__zone-name { margin-left: 0; } .btn--close { display: none; } .list__contact--item { margin-left: 0; } } /* CARTE */ .carte-france.active { display: flex; } .carte-france.d-none { display: none!important; } .carte-france:nth-child(1) { display: flex; } .carte-france { position: relative; display: none; align-items: center; width: 100%; padding: 14px; } /*.carte-france::before { content: ''; position: absolute; top: 22%; right: 35%; width: 15%; height: 15%; background-color: var(--color-03); z-index: -1; }*/ .carte-france__departement { font-size: 10px; fill: var(--wp--preset--color--white); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); pointer-events: none; } .carte-france__departement--out { fill: var(--wp--preset--color--contrast); } .france-metropolitaine { width: 100%; min-width: calc(100% - 130px); height: 100%; min-height: 100%; padding: 1rem 15% 1rem 20%; overflow: visible; } .france-outre-mer { min-width: 130px; max-width: 130px; padding: 10px; border: 2px solid #c5cfda; } .france-outre-mer p { padding-bottom: 10px; text-align: center; font-size: 0.7rem; color: #666e79; } .opacity-anime { animation: opacity .2s linear; } @keyframes opacity { from { opacity: 0; -webkit-appearance: none; filter: drop-shadow(0px 8px 24px rgba(42, 44, 43, 0.12)); -webkit-filter: drop-shadow(0px 8px 24px rgba(42, 44, 43, 0.12)); } to { opacity: 1; -webkit-appearance: none; filter: drop-shadow(0px 8px 24px rgba(42, 44, 43, 0.12)); -webkit-filter: drop-shadow(0px 8px 24px rgba(42, 44, 43, 0.12)); } } .opacity-anime-disappear { animation: opacity-disappear .5s linear; } @keyframes opacity-disappear { from { opacity: 1; -webkit-appearance: none; filter: drop-shadow(0px 8px 24px rgba(42, 44, 43, 0.12)); -webkit-filter: drop-shadow(0px 8px 24px rgba(42, 44, 43, 0.12)); } to { opacity: 0; -webkit-appearance: none; filter: drop-shadow(0px 8px 24px rgba(42, 44, 43, 0.12)); -webkit-filter: drop-shadow(0px 8px 24px rgba(42, 44, 43, 0.12)); } } @media (max-width: 960px){ .france-metropolitaine { min-width: calc(100% - 100px); padding: 1rem 0; padding-left: 10%; } .france-outre-mer { min-width: 100px; max-width: 100px; padding: 4px; } } @media (max-width: 490px){ .carte-france { flex-direction: column; align-items: center; row-gap: 10px; min-width: calc(100% - 80px); } .france-outre-mer { text-align: center; min-width: 120px; max-width: 120px; } .france-outre-mer svg { min-width: 70px; max-width: 70px; } .france-outre-mer p { white-space: nowrap; } } .region.pop-toggle:hover path.region:not(.active-color) { cursor: pointer; fill: var(--wp--preset--color--secondary)!important }