@charset "UTF-8"; @font-face { font-family: "iconfont"; src: url("../fonts/icons/iconfont.eot"); src: url("../fonts/icons/iconfont.eot?#iefix") format("eot"), url("../fonts/icons/iconfont.woff2") format("woff2"), url("../fonts/icons/iconfont.woff") format("woff"), url("../fonts/icons/iconfont.ttf") format("truetype"), url("../fonts/icons/iconfont.svg#iconfont") format("svg"); font-weight: normal; font-style: normal; } .icon--add-2:before { content: "\EA01"; } .icon--add-3:before { content: "\EA02"; } .icon--add:before, .accordion-toggle:before { content: "\EA03"; } .icon--angle-down:before, .custom-select .wpcf7-form-control-wrap::after, .forminator-custom--select::after, .main-header-inner .nav--primary .is-parent > a::after { content: "\EA04"; } .icon--angle-left:before, .slider--primary .slick-arrow.slick-prev:before { content: "\EA05"; } .icon--angle-right:before, .slider--primary .slick-arrow.slick-next:before { content: "\EA06"; } .icon--angle-up:before { content: "\EA07"; } .icon--arrow-down:before { content: "\EA08"; } .icon--arrow-left:before { content: "\EA09"; } .icon--arrow-right:before { content: "\EA0A"; } .icon--arrow-up:before { content: "\EA0B"; } .icon--arrow:before, .btn--send::after, .btn--more::after, .slick-arrow.slick-prev::before, .slick-arrow.slick-next::before { content: "\EA0C"; } .icon--behance:before { content: "\EA0D"; } .icon--calendar:before { content: "\EA0E"; } .icon--check:before, .facetwp-type-fselect .fs-wrap.multiple .fs-option.selected .fs-checkbox:before { content: "\EA0F"; } .icon--close:before { content: "\EA10"; } .icon--cloud:before { content: "\EA11"; } .icon--contact:before { content: "\EA12"; } .icon--cookie:before { content: "\EA13"; } .icon--danger:before { content: "\EA14"; } .icon--download:before, .btn--download:after { content: "\EA15"; } .icon--dribbble:before { content: "\EA16"; } .icon--email:before { content: "\EA17"; } .icon--error:before, .notice.notice--error:before, .notice--error.wpcf7-response-output:before, .wpcf7-form.aborted .wpcf7-response-output:before, .wpcf7-form.failed .wpcf7-response-output:before, .wpcf7-form.invalid .wpcf7-response-output:before { content: "\EA18"; } .icon--facebook-square:before { content: "\EA19"; } .icon--facebook:before { content: "\EA1A"; } .icon--github:before { content: "\EA1B"; } .icon--google-plus:before { content: "\EA1C"; } .icon--home:before { content: "\EA1D"; } .icon--icon-test-1:before { content: "\EA1E"; } .icon--icon-test-2:before { content: "\EA1F"; } .icon--info:before, .notice.notice--info:before, .notice--info.wpcf7-response-output:before { content: "\EA20"; } .icon--information:before { content: "\EA21"; } .icon--instagram:before { content: "\EA22"; } .icon--less:before, .is-opened > .accordion-toggle:before { content: "\EA23"; } .icon--linkedin:before { content: "\EA24"; } .icon--location:before { content: "\EA25"; } .icon--notif:before { content: "\EA26"; } .icon--paper-plane:before { content: "\EA27"; } .icon--phone:before { content: "\EA28"; } .icon--pinterest:before { content: "\EA29"; } .icon--play:before, .btn--play:before { content: "\EA2A"; } .icon--products:before { content: "\EA2B"; } .icon--rss:before { content: "\EA2C"; } .icon--search:before, .single-module--image a:after, .facetwp-type-search .facetwp-icon:before { content: "\EA2D"; } .icon--snapchat:before { content: "\EA2E"; } .icon--soundcloud:before { content: "\EA2F"; } .icon--spotify:before { content: "\EA30"; } .icon--success:before, .notice.notice--success:before, .notice--success.wpcf7-response-output:before, .wpcf7-form.sent .wpcf7-response-output:before { content: "\EA31"; } .icon--time:before { content: "\EA32"; } .icon--twitter:before { content: "\EA33"; } .icon--vimeo:before { content: "\EA34"; } .icon--warning:before, .notice.notice--warning:before, .notice--warning.wpcf7-response-output:before, .wpcf7-form.unaccepted .wpcf7-response-output:before, .wpcf7-form.spam .wpcf7-response-output:before { content: "\EA35"; } .icon--whatsapp:before { content: "\EA36"; } .icon--youtube:before { content: "\EA37"; } /* ========================================================================== COLORS ========================================================================== */ /* ========================================================================== GLOBAL VARS ========================================================================== */ /* ========================================================================== DURATIONS ========================================================================== */ /* ========================================================================== FONTS ========================================================================== */ /* ========================================================================== TEXT ========================================================================== */ /* ========================================================================== TITLE ========================================================================== */ /* ========================================================================== RESPONSIVE ========================================================================== */ /* ========================================================================== GRID ========================================================================== */ /* ========================================================================== ZINDEX ========================================================================== */ /* ========================================================================== BTN ========================================================================== */ /* ========================================================================== INPUT ========================================================================== */ /* ========================================================================== TABLE ========================================================================== */ /* ========================================================================== NOTICE ========================================================================== */ /* ========================================================================== COOKIES ========================================================================== */ /* ========================================================================== MENU ========================================================================== */ /* ========================================================================== HEADER ========================================================================== */ /* ========================================================================== BREADCRUMB ========================================================================== */ /* ========================================================================== FOOTER ========================================================================== */ /* ========================================================================== WORDPRESS ========================================================================== */ /* ========================================================================== PATH ========================================================================== */ @-webkit-keyframes button-animation { 0% { -webkit-transform: translate3d(0px, -50%, 0); transform: translate3d(0px, -50%, 0); } 25% { -webkit-transform: translate3d(5px, -50%, 0); transform: translate3d(5px, -50%, 0); } 75% { -webkit-transform: translate3d(-5px, -50%, 0); transform: translate3d(-5px, -50%, 0); } 100% { -webkit-transform: translate3d(0px, -50%, 0); transform: translate3d(0px, -50%, 0); } } @keyframes button-animation { 0% { -webkit-transform: translate3d(0px, -50%, 0); transform: translate3d(0px, -50%, 0); } 25% { -webkit-transform: translate3d(5px, -50%, 0); transform: translate3d(5px, -50%, 0); } 75% { -webkit-transform: translate3d(-5px, -50%, 0); transform: translate3d(-5px, -50%, 0); } 100% { -webkit-transform: translate3d(0px, -50%, 0); transform: translate3d(0px, -50%, 0); } } @-webkit-keyframes button-download-animation { 0% { -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } 25% { -webkit-transform: translate3d(0, -42%, 0); transform: translate3d(0, -42%, 0); } 75% { -webkit-transform: translate3d(0, -58%, 0); transform: translate3d(0, -58%, 0); } 100% { -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } } @keyframes button-download-animation { 0% { -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } 25% { -webkit-transform: translate3d(0, -42%, 0); transform: translate3d(0, -42%, 0); } 75% { -webkit-transform: translate3d(0, -58%, 0); transform: translate3d(0, -58%, 0); } 100% { -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } } @-webkit-keyframes phone-rigging-animation { 0% { -webkit-transform: rotate(0) scale(1) skew(1deg); transform: rotate(0) scale(1) skew(1deg); } 10% { -webkit-transform: rotate(-25deg) scale(1) skew(1deg); transform: rotate(-25deg) scale(1) skew(1deg); } 30% { -webkit-transform: rotate(25deg) scale(1) skew(1deg); transform: rotate(25deg) scale(1) skew(1deg); } 50% { -webkit-transform: rotate(0) scale(1) skew(1deg); transform: rotate(0) scale(1) skew(1deg); } 100% { -webkit-transform: rotate(0) scale(1) skew(1deg); transform: rotate(0) scale(1) skew(1deg); } } @keyframes phone-rigging-animation { 0% { -webkit-transform: rotate(0) scale(1) skew(1deg); transform: rotate(0) scale(1) skew(1deg); } 10% { -webkit-transform: rotate(-25deg) scale(1) skew(1deg); transform: rotate(-25deg) scale(1) skew(1deg); } 30% { -webkit-transform: rotate(25deg) scale(1) skew(1deg); transform: rotate(25deg) scale(1) skew(1deg); } 50% { -webkit-transform: rotate(0) scale(1) skew(1deg); transform: rotate(0) scale(1) skew(1deg); } 100% { -webkit-transform: rotate(0) scale(1) skew(1deg); transform: rotate(0) scale(1) skew(1deg); } } @-webkit-keyframes blur-image-hp { 0% { -webkit-filter: blur(5px); filter: blur(5px); } 100% { -webkit-filter: blur(0); filter: blur(0); } } @keyframes blur-image-hp { 0% { -webkit-filter: blur(5px); filter: blur(5px); } 100% { -webkit-filter: blur(0); filter: blur(0); } } /* ========================================================================== TEXT & FONTS ========================================================================== */ /* ========================================================================== FONT ICON ========================================================================== */ /* ========================================================================== VISIBILITY ========================================================================== */ /* * Only display content to screen readers */ /* * Use in conjunction with .sr-only to only display content when it's focused. */ /* ========================================================================== COLORS ========================================================================== */ /* ========================================================================== LAYOUT ========================================================================== */ /* ========================================================================== ALIGNMENT ========================================================================== */ /* ========================================================================== OTHER ========================================================================== */ /** * Utilities functions */ /** * $center-v: start/center/end * $center-h: start/center/end/around/beween */ /* */ /** * breakpoint : min width breakpoint * $columns: int or string = inline list * $center-v: start/center/end */ /* */ /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and in iOS. */ html { line-height: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /** * Add the correct display in IE 9-. */ article, aside, footer, header, nav, section { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in IE. */ figcaption, figure, main { /* 1 */ display: block; } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * 1. Remove the bottom border in Chrome 57- and Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Add the correct display in IE 9-. */ audio, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: none; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * 1. Add the correct display in IE 9-. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. */ details, menu { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting ========================================================================== */ /** * Add the correct display in IE 9-. */ canvas { display: inline-block; } /** * Add the correct display in IE. */ template { display: none; } /* Hidden ========================================================================== */ /** * Add the correct display in IE 10-. */ [hidden] { display: none; } .spinner--overlay { position: relative; } .spinner-wrapper { opacity: 0; z-index: -1; pointer-events: none; } .is-loading .spinner-wrapper { opacity: 1; z-index: 50; pointer-events: auto; } .spinner--overlay .spinner-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: fade(#000, 25%); transition: 0.3s; } .spinner--overlay .spinner-wrapperInner { position: absolute; top: 50%; left: 50%; z-index: 5; padding: 15px; margin: -30px; width: 44px; height: 44px; box-shadow: 0 3px 0 fade(#000, 25%); } .spinner--overlay.l-spinner .spinner-wrapperInner { background: no-repeat center #000; border-radius: 50%; } .spinner--overlay.l-spinner.is-loading .spinner-wrapperInner { background-image: url("../images/spinner.svg"); } @font-face { font-family: FiraSansLight; src: url("../fonts/FiraSans-Light.woff2") format("woff2"), url("../fonts/FiraSans-Light.woff") format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: FiraSansMedium; src: url("../fonts/FiraSans-Medium.woff2") format("woff2"), url("../fonts/FiraSans-Medium.woff") format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: FiraSansRegular; src: url("../fonts/FiraSans-Regular.woff2") format("woff2"), url("../fonts/FiraSans-Regular.woff") format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: FiraSansBold; src: url("../fonts/FiraSans-Bold.woff2") format("woff2"), url("../fonts/FiraSans-Bold.woff") format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: FiraSansSemiBold; src: url("../fonts/FiraSans-SemiBold.woff2") format("woff2"), url("../fonts/FiraSans-SemiBold.woff") format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: FiraSansExtraBold; src: url("../fonts/FiraSans-ExtraBold.woff2") format("woff2"), url("../fonts/FiraSans-ExtraBold.woff") format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: FiraSansBlack; src: url("../fonts/FiraSans-Black.woff2") format("woff2"), url("../fonts/FiraSans-Black.woff") format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: FiraSansBookItalic; src: url("../fonts/FiraSans-BookItalic.woff2") format("woff2"), url("../fonts/FiraSans-BookItalic.woff") format("woff"); font-weight: normal; font-style: normal; } /* ========================================================================== GLOBAL ========================================================================== */ html { font-size: 16px; } body { color: #000; font-weight: normal; font-family: "FiraSansRegular", Helvetica, Arial, sans-serif; font-size: 1rem; line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ========================================================================== INLINE ========================================================================== */ a { color: #FF6600; text-decoration: none; outline: none; transition: 0.3s; } a:hover { color: #181818; } strong, b { font-weight: normal; font-family: "FiraSansBold", Helvetica, Arial, sans-serif; } /* ========================================================================== TEXT ========================================================================== */ p { margin: 0 0 1.5em; } blockquote { padding: 0 30px; border-left: solid 2px #EFEFEF; margin: 0; max-width: 600px; } blockquote p { font-weight: normal; font-family: "FiraSansBookItalic", Helvetica, Arial, sans-serif; font-size: 1.5rem; line-height: 1.6; color: #FF6600; } blockquote p:last-of-type { margin-bottom: 0; } /* ========================================================================== SEPARATOR ========================================================================== */ hr { margin: 60px auto; margin-top: -30px; height: 1px; width: 100%; background-color: #EFEFEF; border: none; max-width: 1260px; } /* ========================================================================== LISTES (listes à puces, listes numérotés) ========================================================================== */ ul, ol, li { margin: 0; padding: 0; list-style: none; } ul:not([class]), ol:not([class]) { list-style: none; margin-bottom: 30px; } ul:not([class]) ul, ul:not([class]) ol, ol:not([class]) ul, ol:not([class]) ol { margin-top: 15px; margin-left: 30px; margin-bottom: 15px; } ul:not([class]) li, ol:not([class]) li { position: relative; padding-left: 30px; } ul:not([class]) li { padding-left: 20px; margin-bottom: 0.5rem; } ul:not([class]) li:before { content: ''; position: absolute; top: 8px; left: 0; display: block; width: 7px; height: 7px; margin-right: .5em; background: #181818; border-radius: 50%; } ol:not([class]) { counter-reset: decimal; } ol:not([class]) > li { counter-increment: decimal; margin-bottom: 1em; } ol:not([class]) > li:before { content: counter(decimal); font-weight: normal; font-family: "FiraSansBold", Helvetica, Arial, sans-serif; position: absolute; top: 0; left: 0; margin-right: .5em; width: 24px; height: 24px; line-height: 24px; font-size: 14px; text-align: center; color: #fff; background: #FF6600; border-radius: 50%; } /* ========================================================================== MEDIA ========================================================================== */ img { max-width: 100%; height: auto; } iframe { max-width: 100%; border: 0; } figure { margin: 0; max-width: 100%; } /* ========================================================================== TABLE ========================================================================== */ .table-responsive { display: block; width: 100%; overflow-x: auto; } table { width: 100%; max-width: 100%; border-collapse: collapse; border-spacing: 0; overflow: hidden; text-align: left; } @media (max-width: 767px) { table { text-align: center; } } caption { text-align: left; } @media (min-width: 768px) { caption { text-align: center; } } th, td { vertical-align: middle; padding: 20px 45px; position: relative; } thead { background-color: #FF6600; } thead th, thead td { text-align: left; font-weight: bold; color: #fff; vertical-align: bottom; border: none; font-size: 1.125rem; } thead th:first-child { border-left: none; } thead th:last-child { border-right: none; } thead th { border-left: solid 1px #EFEFEF; border-right: solid 1px #EFEFEF; } tbody tr:nth-of-type(odd) { background-color: #fff; } tbody tr:nth-of-type(even) { background-color: #F8F9FA; } tbody tr > td:first-child { border-left: none; } tbody tr > td:last-child { border-right: none; } tbody tr:last-child > td { border-bottom: none; } tbody td { border: solid 1px #EFEFEF; } /* ========================================================================== CODE ========================================================================== */ code, kbd, pre, samp { font-family: Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; font-size: 1em; } kbd { padding: .2rem .4rem; font-size: 87.5%; color: #fff; background-color: #212529; border-radius: .2rem; } kbd kbd { padding: 0; font-size: 100%; font-weight: bold; } code { font-size: 87.5%; color: #e83e8c; word-wrap: break-word; } pre { display: block; font-size: 87.5%; color: #212529; } pre code { font-size: inherit; color: inherit; word-break: normal; } /* ========================================================================== HELPERS ========================================================================== */ .text-center { text-align: center; } .text-bold { font-weight: normal; font-family: "FiraSansBold", Helvetica, Arial, sans-serif; } /* ========================================================================== Rows ========================================================================== */ .row { position: relative; width: 100%; max-width: 1260px; margin-left: auto; margin-right: auto; padding-left: 30px; padding-right: 30px; box-sizing: border-box; } .row--full { max-width: none; } .row--large { max-width: 1360px; } .row--small { max-width: 1020px; } .row--tiny { max-width: 767px; } /* ========================================================================== Sections ========================================================================== */ .section-container { position: relative; width: 100%; max-width: 1260px; margin-left: auto; margin-right: auto; padding-left: 30px; padding-right: 30px; box-sizing: border-box; } #slider-hp-bg-container_old { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-position: center; background-repeat: no-repeat; background-size: cover; } .section-hp--slider_old { position: relative; margin-top: 0; background-position: center; background-repeat: no-repeat; background-size: cover; min-height: 650px; box-sizing: border-box; padding: 120px 0; } @media (max-width: 767px) { .section-hp--slider_old { padding: 60px; } } .section-hp--slider_old .section-container { background-color: rgba(255, 255, 255, 0.9); padding: 60px; max-width: 800px; margin: auto; } .section-hp--slider_old .section-container .slick-slider { position: initial; } .section-hp--slider_old .section-container .slick-arrow.slick-prev { left: initial; right: 51px; } .section-hp--slider_old .section-container .slick-dots { display: none; } .section-hp--slider_old .slider-item .item-container { display: flex; flex-direction: column; justify-content: space-between; align-items: center; min-height: 250px; } .section-hp--slider_old .slider-item .item-container .section-title { font-size: 2.75rem; color: #FF6600; margin-bottom: 20px; } .section-hp--slider_old .slider-item .item-container .section-subtitle { font-weight: normal; font-family: "FiraSansSemiBold", Helvetica, Arial, sans-serif; font-size: 1.25rem; color: #798E98; margin: 0; } .section-hp--slider_old .slider-item .item-container .btn--section { margin-top: 20px; min-width: 180px; } .section-hp--slider .slick-track { display: flex; } .section-hp--slider .slider-item { position: relative; margin-top: 0; background-position: center; background-repeat: no-repeat; background-size: cover; min-height: 500px; height: inherit; box-sizing: border-box; padding: 120px 0; } @media (max-width: 767px) { .section-hp--slider .slider-item { padding: 60px; } } .section-hp--slider .slider-container { background-color: rgba(255, 255, 255, 0.9); padding: 60px; max-width: 800px; margin: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; -webkit-text-emphasis: 0; text-emphasis: 0; } .section-hp--slider .slider-container .section-title { font-size: 2.75rem; color: #FF6600; margin-bottom: 20px; } .section-hp--slider .slider-container .section-subtitle { font-weight: normal; font-family: "FiraSansSemiBold", Helvetica, Arial, sans-serif; font-size: 1.25rem; color: #798E98; margin: 0; } .section-hp--slider .slider-container .btn--section { margin-top: 20px; min-width: 180px; } .section-hp--slider .slick-arrow { bottom: 0px; } .section-hp--slider .slick-arrow.slick-prev { left: initial; right: 51px; } .section-hp--slider .slick-arrow.slick-next { left: initial; right: 0px; } .section-hp--offres { padding: 120px 0; } .section-hp--offres .section-container .section-title { color: #FF6600; margin-bottom: 60px; font-size: 3rem; } .section-hp--offres .section-container .list--offres .item-offre { min-height: 230px; } .section-hp--offres .section-container .list--offres .item-offre a { height: 100%; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 14px; box-sizing: border-box; padding: 40px 60px; background-position: center; background-repeat: no-repeat; background-size: cover; } .section-hp--offres .section-container .list--offres .item-offre a::after { content: ''; position: absolute; width: 100%; height: 100%; left: 0; right: 0; background-color: #000; opacity: .43; transition: 0.3s; } .section-hp--offres .section-container .list--offres .item-offre a:hover::after { opacity: 0; } .section-hp--offres .section-container .list--offres .item-offre a .item-content { z-index: 1; justify-content: center; text-align: center; } .section-hp--offres .section-container .list--offres .item-offre a .item-content h3 { margin-bottom: 0; } @media (min-width: 1024px) { .section-hp--offres .section-container .list--offres .item-offre.l-half { min-height: 420px; } } .section-hp--offres .section-container .list--offres .item-offre.l-half a .item-content .item-logo { box-sizing: border-box; border-radius: 50%; background-color: #fff; padding: 25px; width: 120px; height: 120px; margin: auto; margin-bottom: 20px; display: flex; justify-content: center; align-items: center; } .section-hp--offres .section-container .list--offres .item-offre.l-half a .item-content .item-title { color: #fff; font-size: 2.375rem; } .section-hp--offres .section-container .list--offres .item-offre.l-half:first-child a::after { background-color: #FF6600; opacity: .7; } .section-hp--offres .section-container .list--offres .item-offre.l-half:first-child a:hover::after { opacity: 1; } .section-hp--offres .section-container .list--offres .item-offre.l-half:nth-child(2) a::after { background-color: #39A4DE; opacity: .7; } .section-hp--offres .section-container .list--offres .item-offre.l-half:nth-child(2) a:hover::after { opacity: 1; } @media (min-width: 1024px) { .section-hp--offres .section-container .list--offres .item-offre.l-third { min-height: 280px; } } .section-hp--offres .section-container .list--offres .item-offre.l-third a .item-content { box-sizing: border-box; border-radius: 14px; background-color: rgba(255, 255, 255, 0.9); padding: 30px; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 10px; } .section-hp--offres .section-container .list--offres .item-offre.l-third a .item-content .item-logo { display: flex; justify-content: center; align-items: center; } .section-hp--offres .section-container .list--offres .item-offre.l-third a .item-content h3 { color: #FF6600; } .section-hp--push { background-color: rgba(255, 102, 0, 0.1); padding: 120px 0; } .section-hp--push .section-container { display: flex; gap: 60px; align-items: center; } @media (max-width: 1023px) { .section-hp--push .section-container { flex-direction: column; } } .section-hp--push .section-container .section-content { flex: 1; } .section-hp--push .section-container .section-content .section-title { text-align: left; color: #FF6600; margin-bottom: 30px; } .section-hp--push .section-container .section-content .section-text p { margin-bottom: 5px; } .section-hp--push .section-container .section-content .section-text p:last-of-type { margin-bottom: 0; } .section-hp--push .section-container .section-content .btn, .section-hp--push .section-container .section-content .post-password-form input[type="submit"], .post-password-form .section-hp--push .section-container .section-content input[type="submit"], .section-hp--push .section-container .section-content .forminator-button, .section-hp--push .section-container .section-content .forminator-repeater-action-button, .section-hp--push .section-container .section-content .comment-reply-link { margin-top: 30px; } .section-hp--partenariat { padding: 120px 0; position: relative; background-position: center; background-size: cover; background-repeat: no-repeat; } .section-hp--partenariat::after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #FF6600; opacity: .8; } .section-hp--partenariat .section-container { z-index: 1; display: flex; align-items: center; gap: 60px; } @media (max-width: 767px) { .section-hp--partenariat .section-container { flex-direction: column; } } .section-hp--partenariat .section-container a { display: flex; justify-content: center; align-items: center; width: 100%; } .section-hp--partenariat .section-container .section-content p { font-size: 1.125rem; font-style: italic; color: #fff; margin-bottom: 5px; } .section-hp--partenariat .section-container .section-content p:last-of-type { margin-bottom: 0; } /* ========================================================================== Layouts ========================================================================== */ .l-wrapper { display: flex; /** * Retour à la ligne autorisé * @see https://developer.mozilla.org/fr/docs/Web/CSS/flex-wrap */ flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } .l-half { position: relative; width: 100%; max-width: 100%; min-height: 1px; box-sizing: border-box; margin-bottom: 30px; padding-left: 15px; padding-right: 15px; /** * (raccourci) définit la capacité d'un élément flexible à modifier ses dimensions afin de remplir l'espace disponible de son conteneur * flex-grow (agrandissement) | flex-shrink (rétressissement) | flex-basis */ flex: 0 0 100%; max-width: 100%; } @media (min-width: 768px) { .l-half { margin-bottom: 30px; padding-left: 15px; padding-right: 15px; /** * (raccourci) définit la capacité d'un élément flexible à modifier ses dimensions afin de remplir l'espace disponible de son conteneur * flex-grow (agrandissement) | flex-shrink (rétressissement) | flex-basis */ flex: 0 0 50%; max-width: 50%; } } .l-third { position: relative; width: 100%; max-width: 100%; min-height: 1px; box-sizing: border-box; margin-bottom: 30px; padding-left: 15px; padding-right: 15px; /** * (raccourci) définit la capacité d'un élément flexible à modifier ses dimensions afin de remplir l'espace disponible de son conteneur * flex-grow (agrandissement) | flex-shrink (rétressissement) | flex-basis */ flex: 0 0 100%; max-width: 100%; } @media (min-width: 768px) { .l-third { margin-bottom: 30px; padding-left: 15px; padding-right: 15px; /** * (raccourci) définit la capacité d'un élément flexible à modifier ses dimensions afin de remplir l'espace disponible de son conteneur * flex-grow (agrandissement) | flex-shrink (rétressissement) | flex-basis */ flex: 0 0 50%; max-width: 50%; } } @media (min-width: 1024px) { .l-third { margin-bottom: 30px; padding-left: 15px; padding-right: 15px; /** * (raccourci) définit la capacité d'un élément flexible à modifier ses dimensions afin de remplir l'espace disponible de son conteneur * flex-grow (agrandissement) | flex-shrink (rétressissement) | flex-basis */ flex: 0 0 33.33333%; max-width: 33.33333%; } } .l-quarter { position: relative; width: 100%; max-width: 100%; min-height: 1px; box-sizing: border-box; margin-bottom: 30px; padding-left: 15px; padding-right: 15px; /** * (raccourci) définit la capacité d'un élément flexible à modifier ses dimensions afin de remplir l'espace disponible de son conteneur * flex-grow (agrandissement) | flex-shrink (rétressissement) | flex-basis */ flex: 0 0 100%; max-width: 100%; } @media (min-width: 768px) { .l-quarter { margin-bottom: 30px; padding-left: 15px; padding-right: 15px; /** * (raccourci) définit la capacité d'un élément flexible à modifier ses dimensions afin de remplir l'espace disponible de son conteneur * flex-grow (agrandissement) | flex-shrink (rétressissement) | flex-basis */ flex: 0 0 50%; max-width: 50%; } } @media (min-width: 1024px) { .l-quarter { margin-bottom: 30px; padding-left: 15px; padding-right: 15px; /** * (raccourci) définit la capacité d'un élément flexible à modifier ses dimensions afin de remplir l'espace disponible de son conteneur * flex-grow (agrandissement) | flex-shrink (rétressissement) | flex-basis */ flex: 0 0 25%; max-width: 25%; } } .l-full { position: relative; width: 100%; max-width: 100%; min-height: 1px; box-sizing: border-box; margin-bottom: 30px; padding-left: 15px; padding-right: 15px; /** * (raccourci) définit la capacité d'un élément flexible à modifier ses dimensions afin de remplir l'espace disponible de son conteneur * flex-grow (agrandissement) | flex-shrink (rétressissement) | flex-basis */ flex: 0 0 100%; max-width: 100%; } .l-table { display: table; width: 100%; height: 100%; } .l-tableCell { display: table-cell; vertical-align: middle; } .l-inlineWrapper { display: flex; align-items: center; } .l-inline { margin: 0; flex-basis: 0; flex-grow: 1; max-width: 100%; } /* ========================================================================== PAGE ========================================================================== */ .page-wrapper { position: relative; margin: 0 auto; } /* ========================================================================== Header ========================================================================== */ .main-header { background-color: #fff; box-shadow: 0 0px 14px rgba(0, 0, 0, 0.1); } .main-header-inner { display: flex; align-items: center; } .main-header-inner .nav--primary { margin-left: auto; height: 115px; } .main-header-inner .nav--primary .nav-menu { height: 100%; justify-content: center; align-items: center; } .main-header-inner .togglemenu-toggle { margin-left: auto; } /* ========================================================================== Contenu ========================================================================== */ .main { position: relative; z-index: 1; } .content-header { padding: 60px 0; color: #FF6600; } .content-header .content-logo { text-align: center; margin-bottom: 30px; } .content-header .content-title { margin: 0; } .content-header .content-introduction { font-weight: normal; font-family: "FiraSansSemiBold", Helvetica, Arial, sans-serif; color: #798E98; text-align: center; max-width: 900px; margin: auto; margin-top: 30px; font-size: 1.25rem; } @media (max-width: 767px) { .content-header .content-introduction { font-size: 1rem; } } .content-inner .single-module:first-child { margin-top: 0; } /* ========================================================================== Footer ========================================================================== */ .main-footer { background-color: #181818; padding: 30px 0; } .main-footer .main-footer-content { display: grid; gap: 30px; grid-template-columns: repeat(4, 1fr); color: #fff; } .main-footer .main-footer-content .content-footer { padding: 15px; } .main-footer .main-footer-content .content-footer h3 { font-size: 1rem; margin-bottom: 15px; } @media (min-width: 768px) { .main-footer .main-footer-content .content-infos { grid-column: span 2; } } .main-footer .main-footer-content .content-infos address { font-style: normal; } .main-footer .main-footer-content .content-infos address .icon { color: #FF6600; } .main-footer .main-footer-content .content-infos address .phone .phone-title { color: #798E98; } .main-footer .main-footer-content .content-infos address .phone:hover .icon::before { color: #FF6600; -webkit-animation: phone-rigging-animation 1.2s infinite ease-in-out; animation: phone-rigging-animation 1.2s infinite ease-in-out; } .main-footer .main-footer-content .content-infos address .phone a { color: #fff; } .main-footer .main-footer-content .content-infos address .phone a:hover { color: #FF6600; } .main-footer .main-footer-content .content-infos .btn, .main-footer .main-footer-content .content-infos .post-password-form input[type="submit"], .post-password-form .main-footer .main-footer-content .content-infos input[type="submit"], .main-footer .main-footer-content .content-infos .forminator-button, .main-footer .main-footer-content .content-infos .forminator-repeater-action-button, .main-footer .main-footer-content .content-infos .comment-reply-link { margin-top: 30px; display: flex; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; align-items: flex-end; } @media (max-width: 767px) { .main-footer .main-footer-content .content-infos .btn, .main-footer .main-footer-content .content-infos .post-password-form input[type="submit"], .post-password-form .main-footer .main-footer-content .content-infos input[type="submit"], .main-footer .main-footer-content .content-infos .forminator-button, .main-footer .main-footer-content .content-infos .forminator-repeater-action-button, .main-footer .main-footer-content .content-infos .comment-reply-link { margin: auto; margin-top: 30px; } } .main-footer .main-footer-content .content-infos .btn .icon, .main-footer .main-footer-content .content-infos .post-password-form input[type="submit"] .icon, .post-password-form .main-footer .main-footer-content .content-infos input[type="submit"] .icon, .main-footer .main-footer-content .content-infos .forminator-button .icon, .main-footer .main-footer-content .content-infos .forminator-repeater-action-button .icon, .main-footer .main-footer-content .content-infos .comment-reply-link .icon { display: inline-flex; font-size: 20px; margin-right: 10px; } .main-footer .main-footer-content .content-menu-footer .menu-title { font-weight: normal; font-family: "FiraSansBlack", Helvetica, Arial, sans-serif; color: #fff; margin-bottom: 10px; } @media (max-width: 767px) { .main-footer .main-footer-content .content-menu-footer ul { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: auto; text-align: left; } } .main-footer .main-footer-content .content-menu-footer ul li { padding-left: 20px; position: relative; margin-bottom: 3px; } .main-footer .main-footer-content .content-menu-footer ul li::before { content: ''; display: block; width: 7px; height: 7px; border-radius: 50%; background-color: #FF6600; position: absolute; left: 0; top: 7px; } .main-footer .main-footer-content .content-menu-footer ul li a { font-size: 0.875rem; color: #798E98; } .main-footer .main-footer-content .content-menu-footer ul li a:hover { color: #FF6600; } .main-footer .main-footer-content .content-schedules ul { margin-bottom: 0; } .main-footer .main-footer-content .content-schedules ul li { padding-left: 15px; } @media (max-width: 1023px) { .main-footer .main-footer-logo { display: flex; justify-content: center; } .main-footer .main-footer-content { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .main-footer .main-footer-content { grid-template-columns: 1fr; text-align: center; gap: 15px; } .main-footer .main-footer-content .content-schedules ul li { padding-left: 0; } .main-footer .main-footer-content .content-schedules ul li::before { display: none; } } /* ========================================================================== MODULES ========================================================================== */ .icon::before { position: relative; display: inline-block; font-family: "iconfont"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* .title--h1 - H1 .title--h2 - H2 .title--h3 - H3 .title--h4 - H4 Markup: Titre Styleguide Titres - 1.title */ h1, .title--h1, .content-title, h2, .title--h2, h3, .title--h3, caption, h4, .title--h4, h5, .title--h5, h6, .title--h6 { margin: 0 0 1em; line-height: 1.2; font-weight: normal; font-family: "FiraSansBold", Helvetica, Arial, sans-serif; } h1, .title--h1, .content-title { font-size: 2.1875rem; text-align: center; } @media (min-width: 768px) { h1, .title--h1, .content-title { font-size: 4rem; } } h2, .title--h2 { font-size: 1.875rem; color: #FF6600; margin-bottom: 30px; } @media (min-width: 768px) { h2, .title--h2 { font-size: 2.1875rem; } } h3, .title--h3, caption { font-size: 1.5rem; color: #798E98; } @media (min-width: 768px) { h3, .title--h3, caption { font-size: 1.5rem; } } h4, .title--h4 { font-size: 1.25rem; } @media (min-width: 768px) { h4, .title--h4 { font-size: 1.25rem; } } h5, .title--h5 { font-size: 1.125rem; } @media (min-width: 768px) { h5, .title--h5 { font-size: 1.125rem; } } h6, .title--h6 { font-size: 1rem; } @media (min-width: 768px) { h6, .title--h6 { font-size: 1rem; } } /* ========================================================================== Global ========================================================================== */ .alignleft { float: left; margin: 0 60px 60px 0; /*@media screen and (max-width: @responsive-smartphone) { float: none; margin: 0 0 $v-align 0; }*/ } .alignright { float: right; margin: 0 0 60px 60px; /*@media screen and (max-width: @responsive-smartphone) { float: none; margin: 0 0 $v-align 0; }*/ } .aligncenter { margin: 60px auto; } .alignnone { margin: 60px 0; } .wp-caption { position: relative; } .wp-caption .wp-caption-text { margin: 0; padding: 8px; font-size: 18px; font-style: italic; } .iframe-container { position: relative; overflow: hidden; } .iframe-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .iframe-container.l-responsive { height: 0; padding-bottom: 56.25%; } /* ========================================================================== MAP ========================================================================== */ .map { width: 100%; min-height: 350px; } /* :hover - Bouton au survol :disabled - Bouton désactivé .btn--primary - Bouton Principal .btn--secondary - Bouton Secondary .btn--tertiary - Bouton Tertiaire .btn--download - bouton de téléchargement .btn--link - bouton Read More .btn--search - Bouton de recherche .btn--play - Bouton de lecture Markup: Styleguide Boutons - 1.btn */ .btn, .post-password-form input[type="submit"], .forminator-button, .forminator-repeater-action-button, .comment-reply-link { position: relative; display: inline-block; padding: 20px 20px; vertical-align: middle; color: #000; font-size: 0.875rem; font-weight: normal; font-family: "FiraSansBold", Helvetica, Arial, sans-serif; text-decoration: none; text-align: center; line-height: 1.25; background-color: transparent; border-radius: 3px; cursor: pointer; box-sizing: border-box; transition: 0.3s ease-in-out; outline: none; } .btn.icon:before, .post-password-form input.icon[type="submit"]:before, .icon.forminator-button:before, .icon.forminator-repeater-action-button:before, .icon.comment-reply-link:before { display: inline-block; vertical-align: middle; font-size: 1.5rem; margin-right: 10px; } .btn + .btn, .post-password-form input[type="submit"] + .btn, .forminator-button + .btn, .forminator-repeater-action-button + .btn, .comment-reply-link + .btn, .post-password-form .btn + input[type="submit"], .post-password-form input[type="submit"] + input[type="submit"], .post-password-form .forminator-button + input[type="submit"], .post-password-form .forminator-repeater-action-button + input[type="submit"], .post-password-form .comment-reply-link + input[type="submit"], .btn + .forminator-button, .post-password-form input[type="submit"] + .forminator-button, .forminator-button + .forminator-button, .forminator-repeater-action-button + .forminator-button, .comment-reply-link + .forminator-button, .btn + .forminator-repeater-action-button, .post-password-form input[type="submit"] + .forminator-repeater-action-button, .forminator-button + .forminator-repeater-action-button, .forminator-repeater-action-button + .forminator-repeater-action-button, .comment-reply-link + .forminator-repeater-action-button, .btn + .comment-reply-link, .post-password-form input[type="submit"] + .comment-reply-link, .forminator-button + .comment-reply-link, .forminator-repeater-action-button + .comment-reply-link, .comment-reply-link + .comment-reply-link { margin-left: 10px; } .btn.is-active, .post-password-form input.is-active[type="submit"], .is-active.forminator-button, .is-active.forminator-repeater-action-button, .is-active.comment-reply-link, .btn:hover, .post-password-form input:hover[type="submit"], .forminator-button:hover, .forminator-repeater-action-button:hover, .comment-reply-link:hover, a:hover .btn, a:hover .post-password-form input[type="submit"], .post-password-form a:hover input[type="submit"], a:hover .forminator-button, a:hover .forminator-repeater-action-button, a:hover .comment-reply-link { color: #000; } .btn.is-disabled, .post-password-form input.is-disabled[type="submit"], .is-disabled.forminator-button, .is-disabled.forminator-repeater-action-button, .is-disabled.comment-reply-link, .btn:disabled, .post-password-form input:disabled[type="submit"], .forminator-button:disabled, .forminator-repeater-action-button:disabled, .comment-reply-link:disabled { opacity: .5; cursor: default; } /* Bouton primaire (fond primaire) Markup: url()->find(.btn--primary) Styleguide Buttons - 1.btn--primary */ .btn--primary, .post-password-form input[type="submit"], .forminator-button, .comment-reply-link { color: #fff; background-color: #FF6600; border: 0; text-transform: uppercase; } .btn--primary.is-active, .post-password-form input.is-active[type="submit"], .is-active.forminator-button, .is-active.comment-reply-link, .btn--primary:hover, .post-password-form input:hover[type="submit"], .forminator-button:hover, .comment-reply-link:hover, a:hover .btn--primary, a:hover .post-password-form input[type="submit"], .post-password-form a:hover input[type="submit"], a:hover .forminator-button, a:hover .comment-reply-link { color: #181818; } /* Bouton secondaire (fond secondaire) Markup: url()->find(.btn--secondary) Styleguide Buttons - 2.btn--secondary */ .btn--secondary { color: #fff; background-color: #181818; border-color: #181818; } .btn--secondary.is-active, .btn--secondary:hover, a:hover .btn--secondary { color: #fff; background-color: #040404; border-color: #040404; } /* Bouton tertiaire (fond tertiaire) Markup: url()->find(.btn--tertiary) Styleguide Buttons - 3.btn--tertiary */ .btn--tertiary, .forminator-repeater-action-button { color: #fff; background-color: #181818; border-color: #181818; min-width: 180px; } .btn--tertiary.is-active, .is-active.forminator-repeater-action-button, .btn--tertiary:hover, .forminator-repeater-action-button:hover, a:hover .btn--tertiary, a:hover .forminator-repeater-action-button { color: #fff; background-color: #040404; border-color: #040404; } /* Bouton Read More Markup: url()->find(.btn--link) Styleguide Buttons - 4.btn--link */ .btn--link { padding: 0; } .btn--link:before { content: ''; display: inline-block; vertical-align: middle; width: 20px; height: 2px; background: #FF6600; margin-right: 10px; transition: width 0.3s; } .btn--link.is-active:before, .btn--link:hover:before, a:hover .btn--link:before { width: 30px; } /* Bouton téléchargement (primaire, avec un icon de téléchargement) Markup: url()->find(.btn--download) Styleguide Buttons - 4.btn--download */ .btn--download { padding-left: 70px; padding-right: 30px; color: #798E98; background-color: #fff; } .btn--download:after { position: relative; display: inline-block; font-family: "iconfont"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 25px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 30px; } .btn--download.is-active, .btn--download:hover, a:hover .btn--download { color: #FF6600; } /* Bouton de recherche (Bouton carré, avec un icone de loupe) Markup: url()->find(.btn--search) Styleguide Buttons - 5.btn--search */ .btn--search { width: 50px; height: 50px; line-height: 50px; padding: 0; text-align: center; border-color: #FF6600; background-color: #FF6600; color: #fff; } .btn--search .icon { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .btn--search.is-active, .btn--search:hover, a:hover .btn--search { background-color: #181818; border-color: #181818; color: #fff; } /* Bouton de lecture (Bouton rond, avec un icône de lecture) Markup: url()->find(.btn--play) Styleguide Buttons - 7.btn--play */ .btn--play { display: block; width: 60px; height: 60px; padding: 0; background-color: #fff; color: #000; border-radius: 50%; } .btn--play:before { position: relative; display: inline-block; font-family: "iconfont"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 14px; width: 14px; text-align: center; } .btn--play.is-active, .btn--play:hover, a:hover .btn--play { color: #FF6600; } .btn--play.is-active:before, .btn--play:hover:before, a:hover .btn--play:before { -webkit-transform: translate(-50%, -50%) scale(1.1); transform: translate(-50%, -50%) scale(1.1); } @media (min-width: 768px) { .btn--play { width: 100px; height: 100px; } .btn--play:before { font-size: 20px; width: 20px; } .btn--play:after { width: 160px; height: 160px; } } .btn--send, .btn--more { padding-right: 60px; } .btn--send::after, .btn--more::after { position: relative; display: inline-block; font-family: "iconfont"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; font-size: 22px; right: 26px; top: calc(50% - 11px); } /* ========================================================================== Placeholder Selectors ========================================================================== */ .form-text, .form-number, .form-email, .form-tel, .form-select, .form-search, .form-textarea, .facetwp-search, .wpcf7-text, .wpcf7-textarea, .wpcf7-select, .post-password-form input[type="password"], .forminator-input, .forminator-textarea, .forminator-select--field { display: block; width: 100%; height: 50px; padding: 15px 15px; color: #798E98; font-size: 16px; background-color: #F9F9F9; border: 1px solid #BABABA; border-radius: 0px; box-sizing: border-box; -webkit-appearance: none; appearance: none; transition: border-color 0.3s; } .form-text::-webkit-input-placeholder, .form-number::-webkit-input-placeholder, .form-email::-webkit-input-placeholder, .form-tel::-webkit-input-placeholder, .form-select::-webkit-input-placeholder, .form-search::-webkit-input-placeholder, .form-textarea::-webkit-input-placeholder, .facetwp-search::-webkit-input-placeholder, .wpcf7-text::-webkit-input-placeholder, .wpcf7-textarea::-webkit-input-placeholder, .wpcf7-select::-webkit-input-placeholder, .post-password-form input[type="password"]::-webkit-input-placeholder, .forminator-input::-webkit-input-placeholder, .forminator-textarea::-webkit-input-placeholder, .forminator-select--field::-webkit-input-placeholder { font-style: italic; } .form-text:-ms-input-placeholder, .form-number:-ms-input-placeholder, .form-email:-ms-input-placeholder, .form-tel:-ms-input-placeholder, .form-select:-ms-input-placeholder, .form-search:-ms-input-placeholder, .form-textarea:-ms-input-placeholder, .facetwp-search:-ms-input-placeholder, .wpcf7-text:-ms-input-placeholder, .wpcf7-textarea:-ms-input-placeholder, .wpcf7-select:-ms-input-placeholder, .post-password-form input[type="password"]:-ms-input-placeholder, .forminator-input:-ms-input-placeholder, .forminator-textarea:-ms-input-placeholder, .forminator-select--field:-ms-input-placeholder { font-style: italic; } .form-text::-ms-input-placeholder, .form-number::-ms-input-placeholder, .form-email::-ms-input-placeholder, .form-tel::-ms-input-placeholder, .form-select::-ms-input-placeholder, .form-search::-ms-input-placeholder, .form-textarea::-ms-input-placeholder, .facetwp-search::-ms-input-placeholder, .wpcf7-text::-ms-input-placeholder, .wpcf7-textarea::-ms-input-placeholder, .wpcf7-select::-ms-input-placeholder, .post-password-form input[type="password"]::-ms-input-placeholder, .forminator-input::-ms-input-placeholder, .forminator-textarea::-ms-input-placeholder, .forminator-select--field::-ms-input-placeholder { font-style: italic; } .form-text::placeholder, .form-number::placeholder, .form-email::placeholder, .form-tel::placeholder, .form-select::placeholder, .form-search::placeholder, .form-textarea::placeholder, .facetwp-search::placeholder, .wpcf7-text::placeholder, .wpcf7-textarea::placeholder, .wpcf7-select::placeholder, .post-password-form input[type="password"]::placeholder, .forminator-input::placeholder, .forminator-textarea::placeholder, .forminator-select--field::placeholder { font-style: italic; } .form-textarea, .wpcf7-textarea { height: auto; resize: vertical; } /* ========================================================================== Template des pages contact ========================================================================== */ .model-template-contact .main-content { background-color: rgba(255, 102, 0, 0.1); } .model-template-contact .main-content .content-body { padding-top: 120px; padding-bottom: 120px; } /* ========================================================================== Formulaires ========================================================================== */ .form-container { padding: 60px; border-radius: 6px; border-top: solid 10px #FF6600; background-color: #fff; } .form-container .form-title { color: #FF6600; margin-bottom: 60px; } /* ========================================================================== Formulaires ========================================================================== */ form { position: relative; } form h2 { text-align: center; margin-bottom: 60px; color: #FF6600; width: 100%; } form:focus { outline: 0; } input { box-sizing: border-box; } .form-group, .form-wrapper, .form-item { margin-bottom: 30px; } .form-footer { text-align: center; } label, .form-label, legend { display: block; margin-bottom: .3em; font-weight: normal; font-family: "FiraSansBold", Helvetica, Arial, sans-serif; } form input, form select, form textarea { border-color: #181818; } form input[disabled], form input[readonly], form input:disabled, form select[disabled], form select[readonly], form select:disabled, form textarea[disabled], form textarea[readonly], form textarea:disabled { opacity: .5; cursor: default; } form input:not([readonly]):focus, form select:not([readonly]):focus, form textarea:not([readonly]):focus { outline: 0; border-color: #FF6600; } .form-label, label { display: inline-block; margin-bottom: 15px; cursor: pointer; color: #FF6600; font-size: 1.5rem; font-weight: 900; } .form-required { color: #F54B5E; } /* ========================================================================== WPCF7 ========================================================================== */ .wpcf7 { border-top: solid 15px #181818; border-radius: 3px; box-shadow: 20px 20px 50px rgba(255, 102, 0, 0.2); margin-bottom: 120px; position: relative; } .wpcf7::before { content: ''; display: block; position: absolute; width: 300px; height: 300px; border-radius: 50%; border: solid 20px #FF6600; bottom: -50px; left: -100px; } .wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; } .wpcf7-form { display: flex; /** * Retour à la ligne autorisé * @see https://developer.mozilla.org/fr/docs/Web/CSS/flex-wrap */ flex-wrap: wrap; margin-left: -15px; margin-right: -15px; margin-left: 0; margin-bottom: 0; margin-right: 0; padding: 30px; background-color: transparent; } .l-form-inline .wpcf7-form-control-wrap { display: inline-block; } .wpcf7-select { position: relative; -webkit-appearance: auto; appearance: auto; } .wpcf7-file { display: block; } .wpcf7-form.init .wpcf7-response-output { display: none; } .wpcf7-not-valid { color: #F54B5E; border-color: #F54B5E; } .wpcf7-not-valid-tip { display: block; padding: 3px 0; color: #F54B5E; font-weight: normal; font-family: "FiraSansRegular", Helvetica, Arial, sans-serif; font-style: italic; font-size: 18px; } .wpcf7-acceptance { display: block; } .wpcf7-acceptance .wpcf7-list-item { display: block; } .wpcf7-acceptance .wpcf7-list-item label { display: flex; flex-wrap: nowrap; align-items: flex-start; } .wpcf7-acceptance .wpcf7-list-item label span { font-size: 1rem; font-weight: inherit; color: #000; } .wpcf7-acceptance .wpcf7-list-item input[type="checkbox"] { margin-top: 5px; margin-right: 10px; } .custom-select .wpcf7-form-control-wrap { position: relative; } .custom-select .wpcf7-form-control-wrap:hover { cursor: pointer; } .custom-select .wpcf7-form-control-wrap::after { position: relative; display: inline-block; font-family: "iconfont"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; width: 52px; height: 52px; background-color: #FF6600; color: #fff; display: flex; justify-content: center; align-items: center; right: 0; top: 41px; } .custom-select select:hover { cursor: pointer; } /* ========================================================================== Formulaire de recherche ========================================================================== */ .form--search { margin: 0 auto; max-width: 767px; padding: 30px; } .form--search .form-item { position: relative; margin: 0; margin-bottom: 30px; } .form--search .form-text { height: 70px; padding: 0 23.33333px; padding-right: 85px; font-size: 25px; line-height: 70px; background-color: #fff; border-color: #EFEFEF; border-radius: 70px; box-sizing: border-box; } .form--search .btn--search { position: absolute; top: 0; right: 0; z-index: 1000; width: 70px; height: 70px; line-height: 70px; border-radius: 0 70px 70px 0; } .form--search .form-results-counter { text-align: center; } .grecaptcha-badge { display: none; } @media (min-width: 768px) { .grecaptcha-badge { display: block; z-index: 9999; } } /* ========================================================================== Forminator ========================================================================== */ .forminator-pagination-steps { position: relative; display: flex; justify-content: center; align-items: center; margin-bottom: 30px; } @media (max-width: 1023px) { .forminator-pagination-steps { flex-direction: column; align-items: inherit; gap: 5px; } .forminator-pagination-steps::before { content: ''; display: block; position: absolute; width: 1px; height: calc(100% - 10px); background-color: #FF6600; left: 16px; top: 5px; z-index: 0; } } .forminator-pagination-steps .forminator-break { flex: 1; height: 1px; background-color: #FF6600; } .forminator-pagination-steps .forminator-break:first-of-type, .forminator-pagination-steps .forminator-break:last-of-type { display: none; } .forminator-pagination-steps .forminator-step { display: flex; align-items: center; justify-content: flex-start; gap: 10px; border: none; margin: 0; text-decoration: none; background: none; color: #FF6600; font-family: sans-serif; font-size: 1rem; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; transition: 0.3s; text-align: left; z-index: 1; } .forminator-pagination-steps .forminator-step::before { display: flex; justify-content: center; align-items: center; content: attr(data-nav); counter-increment: pagination-steps; line-height: 20px; text-align: center; width: 21px; height: 21px; border-radius: 50%; background-color: #FF6600; color: #fff; transition: 0.3s; } .forminator-pagination-steps .forminator-step:hover { color: #181818; } .forminator-pagination-steps .forminator-step:hover::before { background-color: #181818; } .forminator-pagination-steps .forminator-step .forminator-step-dot { display: none; } .forminator-current + .forminator-break { background-color: #798E98; } .forminator-current + .forminator-break + .forminator-step { color: #798E98; } .forminator-current + .forminator-break + .forminator-step::before { background-color: #798E98; } .forminator-current + .forminator-break + .forminator-step + .forminator-break { background-color: #798E98; } .forminator-current + .forminator-break + .forminator-step + .forminator-break + .forminator-step { color: #798E98; } .forminator-current + .forminator-break + .forminator-step + .forminator-break + .forminator-step::before { background-color: #798E98; } .forminator-current + .forminator-break + .forminator-step + .forminator-break + .forminator-step + .forminator-break { background-color: #798E98; } .forminator-current + .forminator-break + .forminator-step + .forminator-break + .forminator-step + .forminator-break + .forminator-step { color: #798E98; } .forminator-current + .forminator-break + .forminator-step + .forminator-break + .forminator-step + .forminator-break + .forminator-step::before { background-color: #798E98; } .forminator-checkbox__wrapper { display: flex; gap: 10px; } .forminator-action-buttons .forminator-col { display: flex; justify-content: flex-end; } .forminator-custom-form p { margin-bottom: 0; } .forminator-checkbox__label, .forminator-label { font-weight: normal; font-family: "FiraSansBold", Helvetica, Arial, sans-serif; color: #798E98; } .forminator-label { display: block; width: 100%; color: #FF6600; } .forminator-repeater-label { font-size: 1.25rem; } .forminator-pagination-footer { display: flex; margin-top: 30px; } .forminator-button-submit { display: block; } .forminator-repeater-action-button { font-size: 10px; padding: 10px 30px; } .forminator-has_error .forminator-error-message { color: #F54B5E; font-style: italic; } .forminator-textarea { min-width: 100%; max-width: 100%; } .forminator-phone { width: 100%; } .forminator-choice-inline { display: flex; align-items: flex-end; } .forminator-choice-inline .forminator-label { display: inline-block; margin-right: 10px; font-size: 1rem; color: #FF6600; margin-bottom: 10px; } @media (min-width: 768px) { .forminator-choice-inline .forminator-label { width: inherit; } } .forminator-radio { margin-right: 10px; display: flex; color: #798E98; } .forminator-radio.forminator-radio-inline { display: inline-block; margin-right: 20px; } .forminator-radio .forminator-radio-label { font-weight: normal; font-family: Helvetica, Arial, sans-serif; margin-left: 10px; } .forminator-checkbox .forminator-checkbox-label { font-weight: normal; font-family: Helvetica, Arial, sans-serif; color: #798E98; margin-left: 10px; } input[type="checkbox"], input[type="radio"] { accent-color: #FF6600; } h4.forminator-label { margin-right: 10px; font-size: 1rem; color: #FF6600; margin-bottom: 10px; } @media (min-width: 768px) { h4.forminator-label { width: inherit; } } .forminator-description { display: block; color: #798E98; font-style: italic; } .forminator-input-with-suffix { position: relative; } .forminator-input-with-suffix .forminator-suffix { position: absolute; right: 10px; top: 15px; } .forminator-consent { text-align: center; } .forminator-consent .forminator-checkbox__wrapper { display: flex; align-items: center; gap: 10px; } .forminator-consent .forminator-checkbox__wrapper .forminator-checkbox input { width: 20px; height: 20px; } .forminator-consent .forminator-checkbox__wrapper p { font-weight: normal; font-family: "FiraSansRegular", Helvetica, Arial, sans-serif; margin-bottom: 0px; font-size: 0.875rem; color: #798E98; } .iti__flag-container { display: none; } .form-mentions-legales { color: #798E98; } .forminator-select--field:hover { cursor: pointer; } .forminator-custom--select { position: relative; } .forminator-custom--select::after { position: relative; display: inline-block; font-family: "iconfont"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; width: 50px; height: 50px; background-color: #FF6600; color: #fff; display: flex; justify-content: center; align-items: center; right: 15px; top: 51px; pointer-events: none; } .forminator-label--forminator-error { display: block; color: #F54B5E; text-align: center; margin: auto; margin-top: 60px; margin-bottom: 60px; } .forminator-label--forminator-success { display: block; color: #5cb85c; text-align: center; margin: auto; margin-top: 60px; margin-bottom: 60px; } .forminator-mentions { font-style: italic; color: #798E98; } /* Markup:
Ce texte est mon message mis en forme selon le niveau de notice.
.notice - Message de base .notice--success - Message de succès .notice--warning - Message de mise en garde .notice--error - Message d'erreur .notice--info - Message d'information Styleguide Notices - 1.notice */ .notice, .wpcf7-response-output { position: relative; margin: 30px 0; padding: 30px; padding-right: 60px; color: #DEE2E6; font-size: 16px; border-width: 0 0 3px 0; border-style: solid; border-color: #DEE2E6; background: #fff; border-radius: 0; box-shadow: 0 9px 24px 0 rgba(0, 0, 0, 0.1); } .notice.is-dismissible, .is-dismissible.wpcf7-response-output { padding-right: 80px; } .notice:before, .wpcf7-response-output:before { position: relative; display: inline-block; font-family: "iconfont"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; top: 50%; left: 25px; font-size: 30px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .notice p, .wpcf7-response-output p { margin-bottom: 15px; } .notice a, .wpcf7-response-output a { font-weight: normal; font-family: "FiraSansBold", Helvetica, Arial, sans-serif; text-decoration: none; color: #fff; } .notice a:hover, .wpcf7-response-output a:hover { text-decoration: underline; } .notice .notice-title, .wpcf7-response-output .notice-title { font-weight: normal; font-family: "FiraSansBold", Helvetica, Arial, sans-serif; color: #313131; font-size: 20px; margin-bottom: 0; } .notice .close, .wpcf7-response-output .close { position: absolute; top: 50%; right: 20px; display: block; border: none; padding: 0; width: 40px; height: 40px; line-height: 40px; font-weight: normal; font-family: "FiraSansBold", Helvetica, Arial, sans-serif; text-align: center; cursor: pointer; font-size: 30px; color: #313131; background-color: transparent; outline: none; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .notice .close span, .wpcf7-response-output .close span { display: block; transition: 0.3s; } .notice .close:hover span, .wpcf7-response-output .close:hover span { -webkit-transform: scale(1.3); transform: scale(1.3); } .notice.notice--success, .notice--success.wpcf7-response-output, .wpcf7-form.sent .wpcf7-response-output { border-color: #5cb85c; padding-left: 80px; } .notice.notice--success a, .notice--success.wpcf7-response-output a, .wpcf7-form.sent .wpcf7-response-output a { color: #5cb85c; } .notice.notice--success a:hover, .notice--success.wpcf7-response-output a:hover, .wpcf7-form.sent .wpcf7-response-output a:hover { color: #449d44; } .notice.notice--success:before, .notice--success.wpcf7-response-output:before, .wpcf7-form.sent .wpcf7-response-output:before { color: #5cb85c; } .notice.notice--warning, .notice--warning.wpcf7-response-output, .wpcf7-form.unaccepted .wpcf7-response-output, .wpcf7-form.spam .wpcf7-response-output { border-color: #f0ad4e; padding-left: 80px; } .notice.notice--warning a, .notice--warning.wpcf7-response-output a, .wpcf7-form.unaccepted .wpcf7-response-output a, .wpcf7-form.spam .wpcf7-response-output a { color: #f0ad4e; } .notice.notice--warning a:hover, .notice--warning.wpcf7-response-output a:hover, .wpcf7-form.unaccepted .wpcf7-response-output a:hover, .wpcf7-form.spam .wpcf7-response-output a:hover { color: #ec971f; } .notice.notice--warning:before, .notice--warning.wpcf7-response-output:before, .wpcf7-form.unaccepted .wpcf7-response-output:before, .wpcf7-form.spam .wpcf7-response-output:before { color: #f0ad4e; } .notice.notice--error, .notice--error.wpcf7-response-output, .wpcf7-form.aborted .wpcf7-response-output, .wpcf7-form.failed .wpcf7-response-output, .wpcf7-form.invalid .wpcf7-response-output { border-color: #F54B5E; padding-left: 80px; } .notice.notice--error a, .notice--error.wpcf7-response-output a, .wpcf7-form.aborted .wpcf7-response-output a, .wpcf7-form.failed .wpcf7-response-output a, .wpcf7-form.invalid .wpcf7-response-output a { color: #F54B5E; } .notice.notice--error a:hover, .notice--error.wpcf7-response-output a:hover, .wpcf7-form.aborted .wpcf7-response-output a:hover, .wpcf7-form.failed .wpcf7-response-output a:hover, .wpcf7-form.invalid .wpcf7-response-output a:hover { color: #f21b33; } .notice.notice--error:before, .notice--error.wpcf7-response-output:before, .wpcf7-form.aborted .wpcf7-response-output:before, .wpcf7-form.failed .wpcf7-response-output:before, .wpcf7-form.invalid .wpcf7-response-output:before { color: #F54B5E; } .notice.notice--info, .notice--info.wpcf7-response-output { border-color: #5bc0de; padding-left: 80px; } .notice.notice--info a, .notice--info.wpcf7-response-output a { color: #5bc0de; } .notice.notice--info a:hover, .notice--info.wpcf7-response-output a:hover { color: #31b0d5; } .notice.notice--info:before, .notice--info.wpcf7-response-output:before { color: #5bc0de; } /* ========================================================================== General ========================================================================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; } /* ========================================================================== Quick notice ========================================================================== */ .notice--cookie { position: fixed; top: 50%; left: 50%; z-index: -1; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); width: 100%; max-width: 800px; max-height: 80vh; padding: 60px 2.5%; display: flex; flex-direction: column; font-size: 14px; color: #000; background: #fff; border-radius: 8px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); opacity: 0; visibility: hidden; transition: .3s; box-sizing: border-box; } .is-cookienotice-notice-open .notice--cookie { z-index: 1010; opacity: 1; visibility: visible; } .notice--cookie p:not(.cookienotice-modal-label) { flex-grow: 1; margin: 0; } .notice--cookie a { color: inherit; } .notice--cookie a:hover { color: inherit; text-decoration: underline; } .cookienotice-notice-actions { display: flex; flex-direction: row-reverse; flex-shrink: 0; align-items: center; margin-top: 30px; /* Responsive ========================================================================== */ } @media screen and (max-width: 767px) { .cookienotice-notice-actions { margin-top: 30px; justify-content: center; flex-direction: column; } } .cookienotice-btn { margin-top: 15px; padding: 10px 15px; color: #fff; font-weight: bold; background: none; border: 2px solid transparent; border-radius: 20px; cursor: pointer; transition: .3s; white-space: nowrap; /* Responsive ========================================================================== */ } .cookienotice-btn:hover, .cookienotice-btn:focus { text-decoration: none; } @media screen and (min-width: 767px) { .cookienotice-btn + .cookienotice-btn { margin-right: 15px; } .cookienotice-btn.cookienotice-customize { margin-right: auto; } } .cookienotice-btn--primary { background: #FF6600; text-transform: uppercase; } .cookienotice-btn--secondary { color: #FF6600; border-color: #FF6600; } .cookienotice-btn--tertiary { padding-left: 0; padding-right: 0; color: #FF6600; text-decoration: underline; } /* ========================================================================== Customize modal ========================================================================== */ .modal--cookie { position: fixed; top: 50%; left: 50%; z-index: -1; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); width: 100%; max-width: 800px; max-height: 80vh; padding: 60px 2.5%; background: #fff; border-radius: 8px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); box-sizing: border-box; opacity: 0; visibility: hidden; overflow: auto; transition: .2s; /* Responsive ========================================================================== */ } .modal--cookie:focus { border: 1px dotted inherit; } .modal--cookie p { margin: 0 0 30px; } .modal--cookie a { text-decoration: none; } .is-cookienotice-modal-open .modal--cookie { z-index: 1015; opacity: 1; visibility: visible; } @media screen and (max-width: 767px) { .modal--cookie { top: 0; left: 0; -webkit-transform: none; transform: none; height: 100vh; max-height: none; border-radius: 0; } .is-cookienotice-modal-open .modal--cookie { -webkit-transform: none; transform: none; } } /* Overlay ========================================================================== */ .cookienotice-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; background-color: rgba(0, 0, 0, 0.3); opacity: 0; visibility: hidden; pointer-events: none; overflow: auto; transition: opacity .3s; } .is-cookienotice-notice-open .cookienotice-modal-overlay, .is-cookienotice-modal-open .cookienotice-modal-overlay { z-index: 1000; opacity: 1; visibility: visible; pointer-events: auto; } /* Close button ========================================================================== */ .cookienotice-modal-close { position: absolute; top: 0; right: -10px; z-index: 5; padding: 0; width: 40px; height: 40px; background: none; border: 0; border-radius: 50%; cursor: pointer; transition: background-color .3s; } .cookienotice-modal-close:hover, .cookienotice-modal-close:focus { background-color: #FF6600; } .cookienotice-modal-close:hover:before, .cookienotice-modal-close:hover:after, .cookienotice-modal-close:focus:before, .cookienotice-modal-close:focus:after { background-color: #fff; } .cookienotice-modal-close:before, .cookienotice-modal-close:after { content: ""; position: absolute; top: 20px; right: 12px; z-index: 5; width: 16px; height: 2px; background: #FF6600; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); transition: background-color .3s; } .cookienotice-modal-close:after { -webkit-transform: rotate(45deg); transform: rotate(45deg); } /* Header ========================================================================== */ .cookienotice-modal-header { position: relative; padding-right: 50px; } .cookienotice-modal-label { display: block; margin: 0 20px 30px 0; color: #FF6600; font-size: 2em; font-weight: bold; text-transform: uppercase; } .cookienotice-modal-description { margin: 30px 0; padding-bottom: 30px; } /* Groups ========================================================================== */ .cookienotice-group { padding: 30px 0; } .cookienotice-group:after { height: 1px; } .cookienotice-group:last-child:after { display: none; } .cookienotice-modal-header, .cookienotice-service--all, .cookienotice-group { position: relative; margin-bottom: 60px; } .cookienotice-modal-header:after, .cookienotice-service--all:after, .cookienotice-group:after { content: ""; position: absolute; bottom: -30px; left: 0; width: 150px; height: 2px; background: #868395; } .cookienotice-group--label { color: #868395; font-size: 1.1em; font-weight: bold; } /* Services ========================================================================== */ .cookienotice-services ul { margin: 0; padding: 0; } .cookienotice-services li { list-style: none; } .cookienotice-services ul li { padding-left: 0; } .cookienotice-services ul li::before { display: none; } .cookienotice-service { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .cookienotice-service .cookienotice-service-description { margin: 6px 0 0; color: #888; font-size: .8em; } .cookienotice-group .cookienotice-service:last-of-type { border-bottom: 0; } a.cookienotice-service-label:focus { outline: 1px dotted #000; } .cookienotice-service-action { cursor: pointer; } .cookienotice-service-action.is-disagreed .cookienotice-service-action-input { grid-template-columns: 0fr 1fr 1fr; } .cookienotice-service-action.is-disagreed .cookienotice-service-action-input:before { background-color: #d9534f; } .cookienotice-service-action.is-agreed .cookienotice-service-action-input { grid-template-columns: 1fr 1fr 0fr; } .cookienotice-service-action.is-agreed .cookienotice-service-action-input:before { background-color: #5cb85c; } .cookienotice-service-action-input { display: grid; grid-template-columns: .5fr 1fr .5fr; padding: 4px; width: 52px; height: 30px; background: #FF6600; border-radius: 15px; box-sizing: border-box; transition: .2s; } .cookienotice-service-action-input:before { content: ""; grid-column: 2; background: #ccc; border-radius: 50%; transition: background .2s; } .cookienotice-service-action-input--checkbox, .cookienotice-service-action-label { position: absolute; z-index: -1; width: 0; height: 0; opacity: 0; visibility: hidden; } .cookienotice-service--all { border-bottom: 0; } .cookienotice-service--all ~ .cookienotice-service--all:after { bottom: auto; top: -30px; } .cookienotice-service--all .cookienotice-service-all-label { margin-bottom: 0; color: #868395; font-size: 1.2em; font-weight: bold; text-transform: uppercase; } /* ========================================================================== Service handler ========================================================================== */ .cookienotice-service-handler-container { position: relative; } .cookienotice-service-handler-container.is-agreed .cookienotice-service-handler { display: none; } .cookienotice-service-handler { position: absolute; top: 0; left: 0; z-index: 50; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; cursor: auto; } .cookienotice-service-handler:before { content: ""; position: absolute; top: 0; left: 0; z-index: 5; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); } .cookienotice-service-handler > * { position: relative; z-index: 10; } .cookienotice-service-handler-label { color: #fff; } .cookienotice-service-handler-btn { cursor: pointer; color: #fff; border-color: #fff; } .cookienotice-service-handler-btn:hover, .cookienotice-service-handler-btn:focus { color: #000; background-color: #fff; } .cookienotice-customize:hover { cursor: pointer; } .logo { position: relative; } .logo img { display: block; } .logo--primary { width: 200px; height: 115px; padding: 0; box-sizing: border-box; } .logo--primary a { display: block; text-indent: -9999px; font-size: 0; line-height: 0; color: transparent; width: 100%; height: 100%; background: url(../images/logos/logo.png) center no-repeat; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s; background-position: center; background-repeat: no-repeat; background-size: contain; } .logo--footer { width: 180px; height: 100px; padding: 0; box-sizing: border-box; } .logo--footer a { display: block; text-indent: -9999px; font-size: 0; line-height: 0; color: transparent; width: 100%; height: 100%; background: url(../images/logos/logo-blanc.png) center no-repeat; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s; background-position: center; background-repeat: no-repeat; background-size: contain; } /* 1.list--primary - Liste Principal 2.list--secondary - Liste Secondary 3.list--results - Liste de recherche Markup: Styleguide Listes - 1.list */ .list { list-style: none; } .list-item { position: relative; } .list-item > a, .list-item .item-media iframe, .list-item .item-media svg, .list-item .item-media img { display: block; } .list-item > a { color: inherit; font-family: inherit; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .list-item .item-media { position: relative; } .list-item .item-wrapper { position: relative; width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; } .list-item .item-header { margin-bottom: 30px; } .list-item .item-title { color: inherit; margin-bottom: 15px; } .list-item .item-date { font-weight: normal; font-family: "FiraSansBold", Helvetica, Arial, sans-serif; font-size: 14px; color: #DEE2E6; } .list-item .item-infos { margin-bottom: 15px; } .list-item .item-body { line-height: normal; box-sizing: border-box; } .list-item .item-link { margin-bottom: 30px; } /* Liste primaire Markup: url()->find(.list--primary) Styleguide Listes - 2.list--primary */ .list--primary .list-item > a { height: 100%; } .list--primary .list-item > a:hover .item-wrapper { box-shadow: 0 10px 40px rgba(49, 49, 49, 0.2); } .list--primary .list-item > a:hover .item-wrapper .item-container .item-infos .item-date { margin-top: 0; } .list--primary .list-item > a:hover .item-media img { -webkit-transform: scale(1.1); transform: scale(1.1); } .list--primary .item-wrapper { box-shadow: 0 5px 20px rgba(222, 226, 230, 0.1); background-color: #fff; transition: box-shadow 0.3s; height: 100%; display: flex; flex-direction: column; } .list--primary .item-wrapper .item-media { overflow: hidden; } .list--primary .item-wrapper .item-media img { transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; } .list--primary .item-wrapper .item-container { display: flex; flex-direction: row; } .list--primary .item-wrapper .item-container .item-infos { z-index: 100; } .list--primary .item-wrapper .item-container .item-infos .item-date { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; border: solid 1px #181818; width: 100px; height: 100px; margin-top: -30px; transition: all ease-in-out .3s; } .list--primary .item-wrapper .item-container .item-infos .item-date .date-day { color: #181818; font-size: 3rem; font-weight: 900; margin-top: -7px; margin-bottom: -14px; } .list--primary .item-wrapper .item-container .item-infos .item-date .date-month { color: #798E98; } .list--primary .item-wrapper .item-container .item-content { padding: 30px 15px; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; min-height: 270px; width: 100%; } .list--primary .item-wrapper .item-container .item-content .item-header { margin-bottom: 0; } .list--primary .item-wrapper .item-container .item-content .item-header .item-title { color: #FF6600; } .list--primary .item-wrapper .item-container .item-content .item-body .item-desc { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 24px; color: #798E98; } .list--primary .item-wrapper .item-container .item-content .item-footer { display: flex; justify-content: flex-end; } .list--primary .item-wrapper .item-container .item-content .item-footer .item-link { margin-bottom: 0; box-shadow: none; } .list--primary .item-title { font-size: 20px; } /* Liste secondaire Markup: url()->find(.list--secondary) Styleguide Listes - 3.list--secondary */ /* Liste tertiaire Markup: url()->find(.list--tertiary) Styleguide Listes - 4.list--tertiary */ /* Liste des résultats de recherche Markup: url()->find(.list--results) Styleguide Listes - 5.list--results */ .list--results { display: flex; /** * Retour à la ligne autorisé * @see https://developer.mozilla.org/fr/docs/Web/CSS/flex-wrap */ flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } .list--results .list-item > a { height: 100%; } .list--results .list-item > a:hover .item-wrapper { box-shadow: 0 10px 40px rgba(49, 49, 49, 0.2); } .list--results .item-header { margin-bottom: 0; } .list--results .item-header .item-title { font-size: 1.4rem; } .list--results .item-wrapper { height: 100%; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 5px 20px rgba(222, 226, 230, 0.1); padding: 30px; background-color: #fff; } .list--results .item-desc { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 24px; color: #798E98; margin-bottom: 0; } .list--results .item-footer { display: flex; justify-content: flex-end; } .list--results .item-footer .btn, .list--results .item-footer .post-password-form input[type="submit"], .post-password-form .list--results .item-footer input[type="submit"], .list--results .item-footer .forminator-button, .list--results .item-footer .forminator-repeater-action-button, .list--results .item-footer .comment-reply-link { margin-bottom: 0; box-shadow: none; } /* Liste des commentaires Markup: url()->find(.list--comments) Styleguide Listes - 5.list--comments */ .list--comments { display: flex; /** * Retour à la ligne autorisé * @see https://developer.mozilla.org/fr/docs/Web/CSS/flex-wrap */ flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } .list--comments .item-wrapper { box-shadow: 0 5px 20px rgba(222, 226, 230, 0.1); padding: 30px; background-color: #fff; } /* .nav--primary - Navigation Principal .nav--secondary - Navigation Secondaire .nav--footer - Navigation Pied de page .nav--breadcrumb - Navigation Fil d'ariane .nav--pager - Navigation Pagination .nav--pager - Navigation Pagination .nav--social - Navigation Social .nav--social-follow - Navigation Social follow .nav--social-share - Navigation Social share Markup: Styleguide Boutons - 1.btn */ .nav { margin-bottom: 60px; } .nav li { list-style: none; } .nav-item { list-style: none; } /* Navigation principale Markup: url()->find(.nav--primary) Styleguide Navigation - 1.nav--primary */ .nav--primary { margin: 0; display: flex; justify-content: center; align-items: center; } .nav--primary > a { display: flex; height: 100%; justify-content: center; align-items: center; color: #fff; font-size: 1.125rem; font-weight: bold; padding: 0 60px; text-transform: uppercase; } .nav--primary > a.header-contact { background-color: #FF6600; } .nav--primary > a.header-contact:hover { background-color: #e65c00; } .nav--primary > a.header-contact .icon { margin-right: 8px; } .nav--primary > a.header-search { background-color: #181818; padding: 0 42px; } .nav--primary > a.header-search:hover { background-color: #0b0b0b; } /* Navigation secondaire Markup: url()->find(.nav--secondary) Styleguide Navigation - 1.nav--secondary */ /* Navigation footer Markup: url()->find(.nav--footer) Styleguide Navigation - 1.nav--footer */ .nav--footer { margin: 0; } /* Navigation footer infos Markup: url()->find(.nav--infos--footer) Styleguide Navigation - 1.nav--infos--footer */ .nav--infos--footer { margin: 0; } .nav--infos--footer .nav-item { text-align: center; } .nav--infos--footer a { font-weight: normal; font-family: "FiraSansBold", Helvetica, Arial, sans-serif; font-size: 14px; color: #000; text-transform: uppercase; } .nav--infos--footer a:hover { color: #FF6600; } @media (min-width: 1024px) { .nav--infos--footer .nav-menu { display: flex; align-items: center; justify-content: center; } .nav--infos--footer .nav-item + .nav-item { margin-left: 30px; } } /* Fil d'ariane Markup: url()->find(.nav--breadcrumb) Styleguide Navigation - 1.nav--breadcrumb */ .nav--breadcrumb { margin-bottom: 0; padding: 15px 0; font-weight: normal; font-family: "FiraSansLight", Helvetica, Arial, sans-serif; font-size: 14px; background-color: #EFEFEF; } .nav--breadcrumb .nav-menu { position: relative; width: 100%; max-width: 1260px; margin-left: auto; margin-right: auto; padding-left: 30px; padding-right: 30px; box-sizing: border-box; display: flex; flex-wrap: wrap; } .nav--breadcrumb .is-separator { margin: 0 .4em 0 .5em; } .nav--breadcrumb .is-last { font-weight: normal; font-family: "FiraSansBold", Helvetica, Arial, sans-serif; } /* Pagination classique Markup: url()->find(.nav--pager) Styleguide Navigation - 1.nav--pager */ .nav--pager .wp-pagenavi { display: flex; justify-content: center; align-items: center; padding: 30px 0; gap: 15px; } /* Menu pages enfants Markup: url()->find(.nav--children) Styleguide Navigation - 1.nav--children */ .nav--children a { display: block; position: relative; font-weight: normal; font-family: "FiraSansBold", Helvetica, Arial, sans-serif; text-align: center; text-transform: uppercase; color: #fff; padding: 15px 15px; height: 100%; min-height: 250px; background: #FF6600 center no-repeat; background-size: cover; box-sizing: border-box; } .nav--children a:after { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.15); z-index: 5; transition: background 0.3s; } .nav--children a:hover:after { background: transparent; } .nav--children .item-title { display: inline-block; position: absolute; top: 50%; left: 30px; right: 30px; margin-bottom: 15px; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 50; background: rgba(0, 0, 0, 0.25); padding: 8px 15px; } /* Réseaux sociaux Markup: url()->find(.nav--social) Styleguide Navigation - 1.nav--social */ .nav--social { margin-bottom: 0; } .nav--social .follow-us { margin-bottom: 10px; font-weight: bold; } .nav--social .nav-menu { display: flex; align-items: center; gap: 10px; } .nav--social a { font-size: 1.7rem; text-align: center; color: #798E98; } .nav--social a:hover { color: #FF6600; } @media (max-width: 767px) { .nav--social .nav-menu { justify-content: center; } } /* Liens vers le réseaux sociaux Markup: url()->find(.nav--social-follow) Styleguide Navigation - 1.nav--social-follow */ /* Partage sur le réseaux sociaux Markup: url()->find(.nav--social-share) Styleguide Navigation - 1.nav--social-share */ /* .slider--primary - Slider Principal .slider--secondary - Slider Page type Markup:
Styleguide Boutons - 1.slider */ .slider { position: relative; z-index: 5; } .slider ul { list-style: none; } .slider .slider-item > a { display: block; outline: none; } .slider-inner { margin-bottom: 60px; } .slick-list.draggable { cursor: -webkit-grab; cursor: grab; } .slider-item { display: none; outline: none; } .slick-initialized .slider-item { display: block; } .slider-item img { width: auto; } .slick-dots { display: flex; justify-content: center; align-items: center; gap: 30px; position: absolute; left: 50%; right: 50%; bottom: 30px; } .slick-dots li { display: flex; justify-content: center; align-items: center; } .slick-dots li button { color: transparent; border: none; padding: 0; font-size: 0; line-height: 0; cursor: pointer; width: 30px; height: 10px; border-radius: 5px; background-color: #fff; transition: 0.3s; } .slick-dots .slick-active button { background-color: #181818; } .slick-arrow { color: transparent; background-color: #181818; border: none; padding: 0; font-size: 0; line-height: 0; cursor: pointer; outline: none; box-sizing: border-box; transition: 0.3s; width: 51px; height: 42px; position: absolute; bottom: 0; z-index: 1; } .slick-arrow:before { position: relative; display: inline-block; font-family: "iconfont"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1; color: #fff; transition: 0.3s; font-size: 15px; } .slick-arrow.slick-disabled { opacity: .25; } .slick-arrow.slick-prev { left: 0; } .slick-arrow.slick-prev::before { position: relative; display: inline-block; font-family: "iconfont"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .slick-arrow.slick-next { right: 0; } .slick-arrow.slick-next::before { position: relative; display: inline-block; font-family: "iconfont"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-arrow:hover::before { color: #FF6600; } /* Slider Page type Markup: url()->find(.slider--primary) Styleguide Slider - 2.slider--primary */ .slider--primary .slick-arrow { position: absolute; top: 50%; width: 50px; height: 50px; background: #FF6600; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .slider--primary .slick-arrow:before { font-size: 24px; color: #fff; } .slider--primary .slick-arrow.slick-prev { left: 0; } .slider--primary .slick-arrow.slick-next { right: 0; } .slider--primary .slick-arrow:hover { background: #181818; } @media (min-width: 768px) { .slider--primary .slick-arrow { width: 86px; height: 80px; } } @media (min-width: 1024px) { .slider--primary { max-width: 585px; margin: 0 auto; } .slider--primary .slick-list { overflow: visible; } .slider--primary .slider-inner { margin-left: -66px; margin-right: -66px; } .slider--primary .slider-item { padding: 0 66px; } .slider--primary .slick-arrow.slick-prev { left: -175px; } .slider--primary .slick-arrow.slick-next { right: -175px; } } /* .accordion--primary - Accordéon Principal Markup:
Styleguide Accordéons - .accordion */ .accordion { margin-bottom: 60px; } .accordion-item { margin-bottom: 30px; border-radius: 0px; overflow: hidden; transition: margin-bottom 0.3s; } .accordion-item.is-opened { border-radius: 3px; } .accordion-toggle { position: relative; font-size: 1.125rem; color: #798E98; font-weight: normal; font-family: "FiraSansBold", Helvetica, Arial, sans-serif; padding: 20px 30px 15px; cursor: pointer; border-bottom: solid 1px #EFEFEF; transition: 0.3s; } .accordion-toggle:before { position: relative; display: inline-block; font-family: "iconfont"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; top: 50%; right: 25px; z-index: 5; -webkit-transform: translateY(-50%); transform: translateY(-50%); transition: 0.3s; display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; color: #fff; background-color: #DEE2E6; border-radius: 50%; font-size: 12px; } .accordion-toggle:hover { color: #FF6600; } .accordion-toggle:hover::before { background-color: #FF6600; } .is-opened > .accordion-toggle { background: #EFEFEF; color: #798E98; border-bottom: 0; } .is-opened > .accordion-toggle:before { position: relative; display: inline-block; font-family: "iconfont"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; top: 50%; right: 25px; z-index: 5; -webkit-transform: translateY(-50%); transform: translateY(-50%); transition: 0.3s; display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; color: #fff; background-color: #DEE2E6; border-radius: 50%; -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); background-color: #fff; color: #FF6600; font-size: 12px; } .accordion-content { display: none; background: #EFEFEF; } .accordion-body { padding: 0 30px 20px; overflow: hidden; } /* Accordéon primaire (fond primaire) Markup: url()->find(.accordion--primary) Styleguide Accordion - 1.accordion--primary */ /* .label--primary - Label primaire .label--secondary - Label secondaire .label--tertiary - Label tertiaire Markup: Styleguide Listes - 1.label */ .label { display: inline-block; padding: 4px 10px; background-color: #313131; color: #fff; border-radius: 0px; } a.label:hover { background-color: #181818; } /* Label primaire Markup: url()->find(.label--primary) Styleguide Labels - 2.label--primary */ .label--primary { display: inline-block; padding: 4px 10px; background-color: #FF6600; color: #fff; border-radius: 0px; } a.label--primary:hover { background-color: #cc5200; } /* Label secondaire Markup: url()->find(.label--secondary) Styleguide Labels - 3.label--secondary */ .label--secondary { display: inline-block; padding: 4px 10px; background-color: #181818; color: #fff; border-radius: 0px; } a.label--secondary:hover { background-color: black; } /* Label tertiaire Markup: url()->find(.label--tertiary) Styleguide Labels - 4.label--tertiary */ .label--tertiary { display: inline-block; padding: 4px 10px; background-color: #181818; color: #fff; border-radius: 0px; } a.label--tertiary:hover { background-color: black; } .gallery { display: flex; /** * Retour à la ligne autorisé * @see https://developer.mozilla.org/fr/docs/Web/CSS/flex-wrap */ flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } .gallery-item { margin: 0; position: relative; width: 100%; max-width: 100%; min-height: 1px; box-sizing: border-box; margin-bottom: 30px; padding-left: 15px; padding-right: 15px; /** * (raccourci) définit la capacité d'un élément flexible à modifier ses dimensions afin de remplir l'espace disponible de son conteneur * flex-grow (agrandissement) | flex-shrink (rétressissement) | flex-basis */ flex: 0 0 100%; max-width: 100%; text-align: center; } .gallery-columns-1 > .gallery-item { flex: 0 0 100%; max-width: 100%; } .gallery-columns-2 > .gallery-item { flex: 0 0 50%; max-width: 50%; } .gallery-columns-3 > .gallery-item { flex: 0 0 33.33333%; max-width: 33.33333%; } .gallery-columns-4 > .gallery-item { flex: 0 0 25%; max-width: 25%; } .gallery-columns-5 > .gallery-item { flex: 0 0 20%; max-width: 20%; } .gallery-columns-6 > .gallery-item { flex: 0 0 16.66667%; max-width: 16.66667%; } .gallery-columns-7 > .gallery-item { flex: 0 0 14.28571%; max-width: 14.28571%; } .gallery-columns-8 > .gallery-item { flex: 0 0 12.5%; max-width: 12.5%; } .gallery-columns-9 > .gallery-item { flex: 0 0 11.11111%; max-width: 11.11111%; } .gallery-item a { display: block; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15); transition: box-shadow 0.3s ease; overflow: hidden; } .gallery-item a:hover, .gallery-item a:focus { box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25); } .gallery-item a:hover img, .gallery-item a:focus img { -webkit-transform: scale(1.1); transform: scale(1.1); } .gallery-item img { display: block; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .gallery-item .gallery-icon { display: inline-block; margin: 0 auto; } /* Single ========================================================================== */ /* Single header ========================================================================== */ .single-header { padding-top: 60px; } .single-header .header-container { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; grid-template-areas: "category category" "date title" "date resume"; gap: 30px; justify-content: center; place-items: center; } @media (max-width: 767px) { .single-header .header-container { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "category" "date" "title" "resume"; } } .single-header .header-container .single-category { grid-area: category; margin: 0; } .single-header .header-container .single-date { grid-area: date; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; border: solid 1px #181818; width: 150px; height: 150px; } @media (max-width: 767px) { .single-header .header-container .single-date { width: 100px; height: 100px; } } .single-header .header-container .single-date .date-day { color: #181818; font-size: 3rem; font-weight: 900; margin-top: -7px; margin-bottom: -14px; } .single-header .header-container .single-date .date-month { color: #798E98; } .single-header .header-container .single-title { grid-area: title; margin: 0; } .single-header .header-container .single-introduction { grid-area: resume; margin: 0; } /* Single image ========================================================================== */ .single-image { margin: 0 auto 30px; } .single-image img { display: block; } /* Single container ========================================================================== */ .single-container { background-color: #fff; } /* Single body ========================================================================== */ /* Single footer ========================================================================== */ .single-footer { text-align: center; background-color: #fff; padding: 0 30px; margin-bottom: 30px; } /* ========================================================================== Modules ========================================================================== */ .single-module { position: relative; margin: 60px 0; } .single-module p:last-child, .single-module li:last-child { margin-bottom: 0; } .single-module:last-child { margin-bottom: 0; } /* Textes ========================================================================== */ .single-module--text .item-wrapper { padding: 0 15px; margin-bottom: 0; } /* Image ========================================================================== */ .single-module--image .item-wrapper { display: flex; justify-content: center; } .single-module--image a, .single-module--image img { display: block; } .single-module--image a { position: relative; } .single-module--image a:before, .single-module--image a:after { opacity: 0; } .single-module--image a:before { content: ''; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.3); opacity: 0; transition: 0.3s; } .single-module--image a:after { position: relative; display: inline-block; font-family: "iconfont"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; font-size: 30px; } .single-module--image a:hover:before, .single-module--image a:hover:after { opacity: 1; } /* Image ========================================================================== */ .single-module--image-banner { height: 540px; background-repeat: no-repeat; background-size: cover; background-position: center; } @media (max-width: 1023px) { .single-module--image-banner { height: 405px; } } @media (max-width: 767px) { .single-module--image-banner { height: 270px; } } /* Push ========================================================================== */ .single-module--push { padding: 60px 0 30px; margin: 0; background: #DEE2E6; color: #fff; text-align: center; } .single-module--push.l-link[href] { display: block; text-decoration: none; } .single-module--push.l-link[href]:hover { color: #fff; } .single-module--push.l-link[href]:hover.l-media:before { background-color: rgba(0, 0, 0, 0.1); } .single-module--push .single-module-wrapper { z-index: 50; } .single-module--push.l-media { background: center no-repeat; background-size: cover; } .single-module--push.l-media:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 5; background-color: rgba(0, 0, 0, 0.2); transition: 0.3s; } .single-module--push .item-title { margin-bottom: 30px; color: inherit; text-transform: none; } .single-module--push .item-content { margin-bottom: 40px; } /* Push Texte ========================================================================== */ .single-module--push-text { margin: 90px 0; } .single-module--push-text .item-wrapper { padding: 30px; border-top: solid 15px #FF6600; border-radius: 3px; } .single-module--push-text--white .item-wrapper { box-shadow: 20px 20px 50px rgba(255, 102, 0, 0.2); } .single-module--push-text--primary .item-wrapper { background-color: #FFEDE0; } /* Push Bouton ========================================================================== */ .single-module--push-button { background-repeat: no-repeat; background-size: cover; background-position: center; padding: 90px 0; position: relative; } .single-module--push-button .container { z-index: 1000; } .single-module--push-button .container .item-wrapper { text-align: center; } .single-module--push-button .container .item-wrapper .item-title { font-weight: normal; font-family: "FiraSansBookItalic", Helvetica, Arial, sans-serif; color: #fff; font-size: 2.1875rem; letter-spacing: 0.56; } .single-module--push-button::after { content: ''; position: absolute; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); top: 0; z-index: 1; } /* Text + Image ========================================================================== */ .single-module--text-image { overflow: inherit; } .single-module--text-image .item-wrapper { display: grid; } .single-module--text-image .item-image { margin-bottom: 30px; box-sizing: border-box; position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; width: auto; height: 300px; } .single-module--text-image .item-image img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .single-module--text-image .item-body { display: flex; flex-direction: column; justify-content: center; } @media (min-width: 768px) { .single-module--text-image .item-wrapper { display: grid; gap: 30px; } .single-module--text-image .item-image { margin-bottom: 0; height: 100%; } } @media (min-width: 768px) and (max-width: 1023px) { .single-module--text-image .item-image { width: 350px; } } @media (min-width: 768px) { .single-module--text-image.l-alignleft .item-wrapper { grid-template-columns: 1fr 1fr; } .single-module--text-image.l-alignright .item-wrapper { grid-template-columns: 1fr 1fr; } .single-module--text-image.l-alignright .item-image { order: 1; } } /* Galerie ========================================================================== */ .single-module--gallery .list .list-item { margin-bottom: 0; padding: 0; position: relative; } .single-module--gallery .list .list-item > a { height: 600px; } .single-module--gallery .list .list-item figure { height: 600px; } .single-module--gallery .list .list-item figure img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media (max-width: 1023px) { .single-module--gallery .list .list-item > a { height: 100%; } .single-module--gallery .list .list-item figure { height: 100%; } } @media (max-width: 1023px) { .single-module--gallery .list { justify-content: center; } } /* Galerie d'images ========================================================================== */ .single-module--gallery-images .list .list-item::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; background-color: rgba(255, 102, 0, 0.8); transition: all ease-in-out 0.5s; } .single-module--gallery-images .list .list-item:hover::after { height: 0; } .single-module--gallery-images .list .list-item:nth-child(3n+1):hover::after { width: 0; height: 100%; } .single-module--gallery-images .list .list-item:nth-child(3n+3)::after { right: 0; } .single-module--gallery-images .list .list-item:nth-child(3n+3):hover::after { width: 0; height: 100%; } @media (max-width: 1023px) { .single-module--gallery-images .list .list-item > a { height: 300px; } .single-module--gallery-images .list .list-item figure { height: 300px; } .single-module--gallery-images .list .list-item::after { display: none; } } /* Galerie de contenus ========================================================================== */ .single-module--gallery-content .list .list-item::after { display: none; } .single-module--gallery-content .list .list-item > a { background-size: cover; background-repeat: no-repeat; background-position: center; } .single-module--gallery-content .list .list-item > a .item-content { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: 30px; box-sizing: border-box; background-color: rgba(255, 102, 0, 0.8); transition: all ease-in-out 0.5s; } .single-module--gallery-content .list .list-item > a .item-content .content-title { color: #fff; font-size: 1.875rem; font-weight: 900; text-align: left; margin-bottom: 0; } .single-module--gallery-content .list .list-item > a .item-content .btn, .single-module--gallery-content .list .list-item > a .item-content .post-password-form input[type="submit"], .post-password-form .single-module--gallery-content .list .list-item > a .item-content input[type="submit"], .single-module--gallery-content .list .list-item > a .item-content .forminator-button, .single-module--gallery-content .list .list-item > a .item-content .forminator-repeater-action-button, .single-module--gallery-content .list .list-item > a .item-content .comment-reply-link { display: none; width: auto; margin-right: auto; transition: 0.3s; } .single-module--gallery-content .list .list-item > a:hover .item-content { background: linear-gradient(180deg, transparent 0%, #ff6600 100%); } .single-module--gallery-content .list .list-item > a:hover .item-content .content-title { margin-bottom: 1em; } .single-module--gallery-content .list .list-item > a:hover .item-content .btn, .single-module--gallery-content .list .list-item > a:hover .item-content .post-password-form input[type="submit"], .post-password-form .single-module--gallery-content .list .list-item > a:hover .item-content input[type="submit"], .single-module--gallery-content .list .list-item > a:hover .item-content .forminator-button, .single-module--gallery-content .list .list-item > a:hover .item-content .forminator-repeater-action-button, .single-module--gallery-content .list .list-item > a:hover .item-content .comment-reply-link { display: inline-block; } @media (max-width: 1023px) { .single-module--gallery-content .list .list-item > a { height: 300px; } .single-module--gallery-content .list .list-item > a .item-content { background: linear-gradient(180deg, transparent 0%, #ff6600 100%); } .single-module--gallery-content .list .list-item > a .item-content .content-title { margin-bottom: 1em; } .single-module--gallery-content .list .list-item > a .item-content .btn, .single-module--gallery-content .list .list-item > a .item-content .post-password-form input[type="submit"], .post-password-form .single-module--gallery-content .list .list-item > a .item-content input[type="submit"], .single-module--gallery-content .list .list-item > a .item-content .forminator-button, .single-module--gallery-content .list .list-item > a .item-content .forminator-repeater-action-button, .single-module--gallery-content .list .list-item > a .item-content .comment-reply-link { display: inline-block; } } /* Citation ========================================================================== */ .single-module--quote { margin: 60px 0; } .single-module--quote blockquote .btn, .single-module--quote blockquote .post-password-form input[type="submit"], .post-password-form .single-module--quote blockquote input[type="submit"], .single-module--quote blockquote .forminator-button, .single-module--quote blockquote .forminator-repeater-action-button, .single-module--quote blockquote .comment-reply-link { margin-top: 20px; } .single-module--quote blockquote footer { margin-top: 20px; color: #798E98; font-size: 0.875rem; font-weight: bold; position: relative; padding-left: 20px; } .single-module--quote blockquote footer::before { content: ''; position: absolute; top: calc(50% - 2px); left: 0; display: block; width: 15px; height: 2px; border-radius: 50%; background-color: #798E98; } /* Vidéo ========================================================================== */ .single-module--video .video-title { text-align: center; margin-bottom: 20px; } .single-module--video .item-video--resume { max-width: 800px; text-align: center; margin: auto; margin-bottom: 30px; font-size: 1.25rem; } .single-module--video iframe { height: clamp(200px, 70vw, 585px); } /* iframe ========================================================================== */ .single-module--iframe .responsive-iframe { position: relative; overflow: hidden; width: 100%; } .single-module--iframe .responsive-iframe.aspect-ratio-16-9 { padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ } .single-module--iframe .responsive-iframe.aspect-ratio-4-3 { padding-top: 75%; /* 4:3 Aspect Ratio */ } .single-module--iframe .responsive-iframe.aspect-ratio-3-2 { padding-top: 66.66%; /* 3:2 Aspect Ratio */ } .single-module--iframe .responsive-iframe.aspect-ratio-8-5 { padding-top: 62.5%; /* 8:5 Aspect Ratio */ } .single-module--iframe .responsive-iframe.aspect-ratio-1-1 { padding-top: 100%; } .single-module--iframe .responsive-iframe iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } /* Documents téléchargeables ========================================================================== */ .single-module--documents { padding: 60px 0; background-color: #EFEFEF; } .single-module--documents .item-title { margin-bottom: 30px; } /* Sommaire ========================================================================== */ .single-module--sommaire .list--sommaire { margin-bottom: 60px; justify-content: center; } .single-module--sommaire .list-item a { position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; min-height: 200px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 30px; border-radius: 14px; overflow: hidden; } @media (min-width: 768px) { .single-module--sommaire .list-item a { min-height: 300px; } } @media (min-width: 1024px) { .single-module--sommaire .list-item a { min-height: 400px; } } .single-module--sommaire .list-item a::after { content: ''; display: block; position: absolute; width: 100%; height: 100%; background-color: #a3b0b7; opacity: .5; transition: 0.3s; top: 0; left: 0; } .single-module--sommaire .list-item a:hover::after { opacity: .2; } .single-module--sommaire .list-item a .item-content { text-align: center; color: #fff; z-index: 1; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 12px; } .single-module--sommaire .list-item a .item-content .item-logo { box-sizing: border-box; width: 90px; height: 90px; padding: 15px; border-radius: 50%; background-color: #fff; display: flex; justify-content: center; align-items: center; } .single-module--sommaire .list-item a .item-content .item-title { margin-bottom: 0; } .block { position: relative; z-index: 1; padding-top: 60px; padding-bottom: 60px; } .block .row { z-index: 2; } .block-title { font-weight: normal; font-family: "FiraSansBold", Helvetica, Arial, sans-serif; text-align: center; margin-bottom: 60px; } .block-title span { display: block; } .block-footer { margin-top: 60px; margin-bottom: 30px; text-align: center; } /* Markup: url()->find(.block--primary) Styleguide Blocs - 1.block--primary */ .comment-form { display: flex; /** * Retour à la ligne autorisé * @see https://developer.mozilla.org/fr/docs/Web/CSS/flex-wrap */ flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } .comment-form .comment-notes, .comment-form .comment-form-comment, .comment-form .comment-form-author, .comment-form .comment-form-email, .comment-form .form-submit { position: relative; width: 100%; max-width: 100%; min-height: 1px; box-sizing: border-box; margin-bottom: 30px; padding-left: 15px; padding-right: 15px; /** * (raccourci) définit la capacité d'un élément flexible à modifier ses dimensions afin de remplir l'espace disponible de son conteneur * flex-grow (agrandissement) | flex-shrink (rétressissement) | flex-basis */ flex: 0 0 100%; max-width: 100%; } @media (min-width: 768px) { .comment-form .comment-form-author, .comment-form .comment-form-email { margin-bottom: 30px; padding-left: 15px; padding-right: 15px; /** * (raccourci) définit la capacité d'un élément flexible à modifier ses dimensions afin de remplir l'espace disponible de son conteneur * flex-grow (agrandissement) | flex-shrink (rétressissement) | flex-basis */ flex: 0 0 50%; max-width: 50%; } } body .facetwp-facet { margin-bottom: 0; } .facetwp-facet .facetwp-input-wrap { display: block; } .facetwp-type-fselect { font-weight: normal; font-family: "FiraSansSemiBold", Helvetica, Arial, sans-serif; position: relative; } .facetwp-type-fselect.facetwp-facet .fs-wrap, .facetwp-type-fselect.facetwp-facet .fs-dropdown { width: 100%; max-width: 100%; box-sizing: border-box; } .facetwp-type-fselect .fs-wrap { display: block; border: solid 1px #BABABA; outline: none; border-radius: 0px; } .facetwp-type-fselect .fs-wrap.fs-open { border-radius: 0px 0px 0 0; } .facetwp-type-fselect .fs-label-wrap { border: none; border-radius: 0px; cursor: pointer; } .facetwp-type-fselect .fs-label-wrap .fs-label { font-weight: normal; font-family: "FiraSansBold", Helvetica, Arial, sans-serif; padding: 21px 50px 21px 15px; } .facetwp-type-fselect .fs-arrow { width: 50px; height: auto; border: none; right: 0; text-align: center; } .facetwp-type-fselect .fs-arrow:before { content: ""; display: block; width: 0; height: 0; border-style: inset; border-top-style: solid; border-color: #000 transparent transparent; border-width: 11px 7px 0 7px; position: absolute; top: 23px; right: 18px; } .facetwp-type-fselect .fs-dropdown { left: 0; margin-top: -1px; border-color: #BABABA; } .facetwp-type-fselect .fs-open .fs-dropdown { border-radius: 0 0 0px 0px; } .facetwp-type-fselect .fs-search { padding: 0; } .facetwp-type-fselect .fs-search input { border-radius: 0; padding: 15px 15px; } .facetwp-type-fselect .fs-options { max-height: 250px; } .facetwp-type-fselect .fs-options .fs-option { padding: 12px 16px; border-color: #BABABA; word-break: normal; } .facetwp-type-fselect .fs-options .fs-option.selected { background: #FF6600; color: #fff; } .facetwp-type-fselect .fs-options .fs-option .fs-option-label { white-space: normal; } .facetwp-type-fselect .fs-wrap.multiple .fs-option .fs-checkbox i { border-color: #181818; } .facetwp-type-fselect .fs-wrap.multiple .fs-option .fs-checkbox:before { position: relative; display: inline-block; font-family: "iconfont"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 14px; height: 14px; line-height: 14px; font-size: 10px; text-align: center; color: #181818; z-index: 5; } .facetwp-type-fselect .fs-wrap.multiple .fs-option.selected .fs-checkbox i { background-color: #fff; background-image: none; } .facetwp-type-search .facetwp-icon { width: 50px; } .facetwp-type-search .facetwp-icon:before { position: relative; display: inline-block; font-family: "iconfont"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; width: auto; height: auto; background: none; } .facetwp-type-search .facetwp-icon.f-loading:before { -webkit-animation: none; animation: none; } .facetwp-type-search .facetwp-search { padding: 15px 50px 15px 15px; } .facetwp-facet-pagination { position: relative; width: 100%; max-width: 1260px; margin-left: auto; margin-right: auto; padding-left: 30px; padding-right: 30px; box-sizing: border-box; text-align: center; border-top: solid 1px #EFEFEF; padding-top: 30px; } .facetwp-pager { display: inline-block; margin: 0 auto 60px; } .facetwp-pager::after { display: block; clear: both; content: ""; } .facetwp-pager .facetwp-page { display: block; float: left; font-weight: normal; font-family: "FiraSansBold", Helvetica, Arial, sans-serif; text-decoration: none; border: 1px solid transparent; width: 30px; height: 30px; line-height: 30px; padding: 0; margin: 0; color: #000; text-align: center; cursor: pointer; box-sizing: border-box; } .facetwp-pager .active { color: #181818; border-color: #181818; } .modal--oldbrowser { display: table; position: fixed; top: 0; left: 0; z-index: 9999; background: #EFEFEF; text-align: center; width: 100%; height: 100%; } .modal--oldbrowser .modal-wrapper { display: table-cell; vertical-align: middle; } .modal--oldbrowser .modal-container { max-width: 800px; margin: 0 auto; padding: 0 30px; } .modal--oldbrowser .modal-btn .btn, .modal--oldbrowser .modal-btn .post-password-form input[type="submit"], .post-password-form .modal--oldbrowser .modal-btn input[type="submit"], .modal--oldbrowser .modal-btn .forminator-button, .modal--oldbrowser .modal-btn .forminator-repeater-action-button, .modal--oldbrowser .modal-btn .comment-reply-link { margin: 0 15px 30px; } /* ========================================================================== OVERRIDES ========================================================================== */ /* The element to apply the animation to */ /* The element to apply the animation to */ .clearfix::after { display: block; clear: both; content: ""; } .is-visuallyHidden, .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; -webkit-clip-path: inset(50%); clip-path: inset(50%); border: 0; } .sr-only-focusable:active, .sr-only-focusable:focus { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; -webkit-clip-path: none; clip-path: none; } @media (min-width: 768px) { .is-mobile { display: none !important; } } @media (max-width: 767px) { .is-desktop { display: none !important; } } /* ========================================================================== Background primary ========================================================================== */ .theme--bg-primary { background-color: #FF6600; } .theme--bg-primary, .theme--bg-primary a { color: #fff; } /* ========================================================================== Background secondary ========================================================================== */ .theme--bg-secondary { background-color: #181818; } .theme--bg-secondary, .theme--bg-secondary a { color: #fff; } /* Background gray ========================================================================== */ .theme--bg-muted { background-color: #EFEFEF; } /* ========================================================================== LIBRARIES ========================================================================== */ /* ========================================================================== Toggle ========================================================================== */ .togglemenu-toggle { position: relative; width: 50px; height: 40px; color: #FF6600; border: 0; padding: 0; background: transparent; cursor: pointer; transition: 0.3s; box-shadow: none; } .togglemenu-toggle span { position: absolute; top: 50%; left: 50%; display: block; width: 28px; height: 3px; text-indent: -9999px; font-size: 0; background: #FF6600; border-radius: 3px; margin: 0 auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: 0.3s; } .togglemenu-toggle span:before, .togglemenu-toggle span:after { content: ""; display: block; position: absolute; top: -9px; width: 28px; height: 3px; background: #FF6600; border-radius: 3px; transition: 0.3s; } .togglemenu-toggle span:after { top: 9px; } .is-togglemenu-open .togglemenu-toggle span { width: 0; } .is-togglemenu-open .togglemenu-toggle span:before, .is-togglemenu-open .togglemenu-toggle span:after { top: 0; left: -14px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .is-togglemenu-open .togglemenu-toggle span:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } @media (min-width: 1024px) { .togglemenu-toggle { display: none; } } /* ========================================================================== Togglemenu ========================================================================== */ .togglemenu-copy { display: none; } .togglemenu-copy.logo { display: block !important; } .main-header-inner .nav--primary .item-depth { margin: 0; padding: 0; } .main-header-inner .nav--primary .nav-item { position: relative; list-style: none; } .main-header-inner .nav--primary .nav-item a { font-weight: normal; font-family: "FiraSansMedium", Helvetica, Arial, sans-serif; display: block; padding: 10px 20px; color: #313131; text-decoration: none; transition: 0.3s; } .main-header-inner .nav--primary .nav-item a:hover, .main-header-inner .nav--primary .nav-item a:focus { color: #FF6600; } .main-header-inner .nav--primary .is-parent { position: relative; } .main-header-inner .nav--primary .is-parent > a { position: relative; display: flex; justify-content: center; align-items: center; gap: 10px; } .main-header-inner .nav--primary .is-parent > a::after { position: relative; display: inline-block; font-family: "iconfont"; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: 0.3s; color: #FF6600; } .main-header-inner .nav--primary .is-parent:hover > a::after { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .main-header-inner .nav--primary .is-parent > .item-depth { position: absolute; top: 97px; z-index: -1; width: 250px; max-height: 0; overflow: hidden; } .main-header-inner .nav--primary .is-parent > .item-depth.depth-3 { top: 0; left: 250px; } .main-header-inner .nav--primary .is-parent.is-active > .item-depth { z-index: 50; max-height: 1000px; overflow: visible; } .main-header-inner .nav--primary .depth-1 { display: flex; flex-direction: row; justify-content: center; width: 100%; margin-right: 30px; } .main-header-inner .nav--primary .depth-1 > .nav-item { position: relative; height: 80px; display: flex; text-align: center; align-items: center; } .main-header-inner .nav--primary .depth-1 > .nav-item:not(:last-child)::after { content: '/'; color: #4A4A4A; } .main-header-inner .nav--primary .depth-2 { background-color: #fff; } .main-header-inner .nav--primary .depth-2 a { text-transform: none; background-color: #fff; text-align: left; border: solid 1px #FF6600; } .main-header-inner .nav--primary .depth-2 li:not(:first-child) a { border-top: 0; } .main-header-inner .nav--primary .depth-2 .is-parent > a { position: relative; } .main-header-inner .nav--primary .depth-2 .is-parent > a:before, .main-header-inner .nav--primary .depth-2 .is-parent > a:after { content: ""; position: absolute; top: 18px; right: 9px; z-index: 5; width: 10px; height: 2px; background: #181818; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .main-header-inner .nav--primary .depth-2 .is-parent > a:after { top: 24px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .main-header-inner .nav--primary .depth-2 .is-parent.is-active > a:before, .main-header-inner .nav--primary .depth-2 .is-parent.is-active > a:after, .main-header-inner .nav--primary .depth-2 .is-parent > a:hover:before, .main-header-inner .nav--primary .depth-2 .is-parent > a:hover:after { background-color: #fff; } /* ========================================================================== Togglemenu push ========================================================================== */ /* Contexte de page ========================================================================== */ body.is-togglemenu-open { overflow-x: hidden; } body.is-togglemenu-open .togglemenu--push { -webkit-transform: translateX(0); transform: translateX(0); box-shadow: -5px 0 24px rgba(0, 0, 0, 0.24); } /* Menu ========================================================================== */ .togglemenu--push { position: fixed; top: 0; right: 0; z-index: 50; width: 100%; height: 100vh; background: #fff; overflow: auto; overflow-x: hidden; -webkit-transform: translateX(100%); transform: translateX(100%); transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; box-sizing: border-box; } .togglemenu--push .item-depth { margin: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; } .togglemenu--push .nav-item { list-style: none; } .togglemenu--push .nav-item a { position: relative; display: block; padding: 15px 20px; font-size: 20px; font-weight: bold; text-decoration: none; } .togglemenu--push .nav-item + .nav-item > a { border-top: 1px solid rgba(24, 24, 24, 0.1); } .logged-in .togglemenu--push { top: 46px; } @media (min-width: 783px) { .logged-in .togglemenu--push { top: 32px; } } /* Close ========================================================================== */ .togglemenu-close, .l-panel .item-back { position: relative; } .togglemenu-close button, .l-panel .item-back button { position: absolute; top: 0; right: 0; display: block; padding: 0; width: 50px; height: 50px; color: #fff; text-indent: -9999px; background: #FF6600; border: 0; cursor: pointer; transition: 0.3s; } .togglemenu-close button:hover, .l-panel .item-back button:hover { background-color: #e65c00; -webkit-transform: scale(1.1); transform: scale(1.1); } .togglemenu-close button:before, .l-panel .item-back button:before, .togglemenu-close button:after, .l-panel .item-back button:after { content: ""; position: absolute; top: 46%; left: 29%; width: 22px; height: 1px; background-color: #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .togglemenu-close button:after, .l-panel .item-back button:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } /* Layout accordéon ========================================================================== */ .l-accordion > .item-depth { padding-left: 20px; max-height: 0; overflow: hidden; transition: max-height ease-out 0.3s; } .l-accordion > .item-depth > .nav-item > a { font-weight: normal; font-family: "FiraSansRegular", Helvetica, Arial, sans-serif; padding: 10px 20px; } .l-accordion > .item-depth > .nav-item + .nav-item > a { border: 0; } .l-accordion > a:before, .l-accordion > a:after { content: ""; position: absolute; top: 31px; right: 22px; z-index: 5; width: 10px; height: 2px; background: #181818; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: center -3px; transform-origin: center -3px; transition: -webkit-transform-origin 0.3s; transition: transform-origin 0.3s; transition: transform-origin 0.3s, -webkit-transform-origin 0.3s; } .l-accordion > a:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .l-accordion.is-active > .item-depth { z-index: 50; max-height: 500px; overflow: scroll; } .l-accordion.is-active > a:before, .l-accordion.is-active > a:after { -webkit-transform-origin: center 5px; transform-origin: center 5px; } /* Layout panel ========================================================================== */ .l-panel { /* Retour ========================================================================== */ } .l-panel > a:before, .l-panel > a:after { content: ""; position: absolute; bottom: 31px; right: 22px; z-index: 5; width: 10px; height: 2px; background: #181818; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: right center; transform-origin: right center; transition: -webkit-transform-origin 0.3s; transition: transform-origin 0.3s; transition: transform-origin 0.3s, -webkit-transform-origin 0.3s; } .l-panel > a:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .l-panel > .item-depth { position: absolute; top: 0; left: 0; z-index: 55; width: 100%; height: 100%; background: #fff; -webkit-transform: translateX(-100%); transform: translateX(-100%); transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; } .l-panel.is-active > .item-depth { -webkit-transform: translateX(0); transform: translateX(0); } .l-panel .item-back .item-btn { float: left; } .l-panel .item-back .item-btn:before, .l-panel .item-back .item-btn:after { -webkit-transform-origin: 0 center; transform-origin: 0 center; } .l-panel .item-back .item-title { float: left; padding-left: 20px; color: #fff; font-size: 1.4em; font-weight: bold; } .is-togglemenu-submenu-open .togglemenu--push { overflow: hidden; } .is-togglemenu-submenu-open .l-panel > .item-depth { overflow-y: auto; } /* Logo ========================================================================== */ .togglemenu--push .togglemenu-logo { margin: 25px 50px 10px; } .togglemenu--push .togglemenu-logo .logo { margin: auto; width: auto; height: 100px; } /* Menu principal ========================================================================== */ .togglemenu--push .togglemenu-menu .nav--primary { flex-direction: column; } .togglemenu--push .togglemenu-menu .nav--primary .nav-menu { width: 100%; overflow: auto; } .togglemenu--push .togglemenu-menu .nav--primary > a { height: 50px; width: 100%; }