/* -------------------------------------------------- */ /* $ > AOX Styles Core /* -------------------------------------------------- */ /* v1.4.2 - 23/10/25 23/10/25 (FJA) - v1.4.2 - Modifs ctn_pattern + ajout variables + modifs a 03/09/25 (FJA) - v1.4.0 - Modifs structure edito 26/08/25 (FJA) - v1.3.0 - Maj variables 11/06/25 (FJA) - v1.0.1 - Ajout variables */ /* ======================================== */ /* Reset /* ======================================== */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /***/ * { box-sizing: border-box; } input, textarea, select, span[role=radio], span[role=checkbox], span[role=combobox] { outline: none; } button { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none; cursor: pointer; transition: all ease 400ms; background-color: transparent; } /* ======================================== */ /* Common /* ======================================== */ body { font-family: var(--aox-font-family); font-weight: var(--aox-font-weight); font-size: var(--aox-font-size); line-height: var(--aox-line-height); color: var(--aox-color-default); } p, ul, ol, li { font-family: inherit; font-weight: inherit; font-size: inherit; line-height: inherit; color: inherit; } strong { font-weight: var(--aox-font-weight-strong); } em { font-style: italic; } sup { position: relative; top: -.3em; font-size: 0.75em; margin: 0 var(--aox-2px); } a { font-family: inherit; font-weight: inherit; font-size: inherit; line-height: inherit; color: var(--aox-link-color); text-decoration: var(--aox-link-text-decoration); transition: all var(--aox-transition-timing-function) var(--aox-transition-duration); } a:hover, a:active { color: var(--aox-link-hover-color); text-decoration: var(--aox-link-hover-text-decoration); } /* ======================================== */ /* obj_button /* ======================================== */ .obj_button { text-decoration: none; outline: none; cursor: pointer; transition: all var(--aox-transition-timing-function) var(--aox-transition-duration); } .obj_button:disabled { opacity: 0.25; cursor: default; } .obj_button.button_default { display: inline-block; margin: 0; padding: var(--aox-button-padding); font-family: var(--aox-button-font-family); font-weight: var(--aox-button-font-weight); font-size: var(--aox-button-font-size); line-height: var(--aox-button-line-height); color: var(--aox-button-color); text-transform: var(--aox-button-text-transform); border-radius: var(--aox-button-border-radius); border: solid var(--aox-button-border-size) var(--aox-button-border-color); background-color: var(--aox-button-background-color); } .obj_button.button_default:hover:not(:disabled) { color: var(--aox-button-hover-color); border-color: var(--aox-button-hover-border-color); background: var(--aox-button-hover-background-color); } /***/ .obj_button.button_default.default_light { color: var(--aox-button-hover-color); border-color: var(--aox-button-hover-background-color); background: var(--aox-button-hover-background-color); } .obj_button.button_default.default_light:hover:not(:disabled) { color: var(--aox-button-color); border-color: var(--aox-button-background-color); background-color: var(--aox-button-background-color); } /***/ .obj_button.button_border { display: inline-block; margin: 0; padding: var(--aox-button-padding); font-family: var(--aox-button-font-family); font-weight: var(--aox-button-font-weight); font-size: var(--aox-button-font-size); line-height: var(--aox-button-line-height); color: var(--aox-button-hover-color); text-transform: uppercase; border-radius: var(--aox-button-border-radius); border: solid var(--aox-button-border-size) var(--aox-button-hover-border-color); background: var(--aox-button-hover-background-color); } .obj_button.button_border:hover:not(:disabled) { color: var(--aox-button-color); border-color: var(--aox-button-border-color); background-color: var(--aox-button-background-color); } /* ======================================== */ /* obj_text /* ======================================== */ .obj_text > * + * { margin-top: var(--aox-text-gap-xl); } .obj_text .ctn_text-header > * + * { margin-top: var(--aox-text-gap-m); } .obj_text .ctn_text-header .t_surtitle { font-family: var(--aox-text-header-surtitle-font-family); font-weight: var(--aox-text-header-surtitle-font-weight); font-size: var(--aox-text-header-surtitle-font-size); line-height: var(--aox-text-header-surtitle-line-height); color: var(--aox-text-header-surtitle-color); text-transform: var(--aox-text-header-surtitle-text-transform); } .obj_text .ctn_text-header .t_title { font-family: var(--aox-text-header-title-font-family); font-weight: var(--aox-text-header-title-font-weight); font-size: var(--aox-text-header-title-font-size); line-height: var(--aox-text-header-title-line-height); color: var(--aox-text-header-title-color); text-transform: var(--aox-text-header-title-text-transform); } .obj_text .ctn_text-header .t_title.title_large { font-size: var(--aox-text-header-title-large-font-size); } .obj_text .ctn_text { font-family: var(--aox-text-font-family); font-weight: var(--aox-text-font-weight); font-size: var(--aox-text-font-size); line-height: var(--aox-text-line-height); color: var(--aox-text-color); } .obj_text .ctn_text > * + * { margin-top: var(--aox-text-gap-l); } .obj_text .ctn_text .t_title { font-family: var(--aox-text-title-font-family); font-weight: var(--aox-text-title-font-weight); font-size: var(--aox-text-title-font-size); line-height: var(--aox-text-title-line-height); color: var(--aox-text-title-color); text-transform: var(--aox-text-title-text-transform); } .obj_text .ctn_text .t_title.title_large { font-size: var(--aox-text-title-large-font-size); } .obj_text .ctn_text .t_subtitle { font-family: var(--aox-text-subtitle-font-family); font-weight: var(--aox-text-subtitle-font-weight); font-size: var(--aox-text-subtitle-font-size); line-height: var(--aox-text-subtitle-line-height); color: var(--aox-text-subtitle-color); text-transform: var(--aox-text-subtitle-text-transform); } .obj_text .ctn_text > * + .t_title, .obj_text .ctn_text > * + .t_subtitle { margin-top: var(--aox-text-gap-xl); } .obj_text .ctn_text p, .obj_text .ctn_text ol li, .obj_text .ctn_text ul li { font-family: inherit; font-weight: inherit; font-size: inherit; line-height: inherit; color: inherit; } .obj_text .ctn_text ol { counter-reset: step; } .obj_text .ctn_text ol > li + li { margin-top: var(--aox-text-gap-s); } .obj_text .ctn_text ol li { position: relative; padding-left: var(--aox-16px); counter-increment: step; } .obj_text .ctn_text ol li::before { content: counter(step)"."; position: absolute; top: 0.25em; left: 0; font-size: var(--aox-font-size-small); color: var(--aox-text-color); } .obj_text .ctn_text ul > li + li { margin-top: var(--aox-text-gap-s); } .obj_text .ctn_text ul li { position: relative; padding-left: var(--aox-16px); } .obj_text .ctn_text ul li::before { content: ""; position: absolute; top: 0.6em; left: 0; display: block; height: var(--aox-6px); width: var(--aox-6px); border-radius: 50%; background: currentColor; } .obj_text .ctn_text a { color: var(--aox-text-link-color); text-decoration: var(--aox-text-link-text-decoration); } .obj_text .ctn_text a:hover, .obj_text .ctn_text a:active { color: var(--aox-text-link-hover-color); text-decoration: var(--aox-text-link-hover-text-decoration); } .obj_text .ctn_text-button { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--aox-text-gap-m); } .obj_text .ctn_text-legal > * + * { margin-top: var(--aox-text-gap-m); } .obj_text .ctn_text-legal p { font-family: var(--aox-text-legal-font-family); font-weight: var(--aox-text-legal-font-weight); font-size: var(--aox-text-legal-font-size); line-height: var(--aox-text-legal-line-height); color: var(--aox-text-legal-color); } /* ======================================== */ /* obj_image /* ======================================== */ .obj_image { position: relative; overflow: hidden; display: block; height: auto; width: 100%; } .obj_image .ctn_image img { display: block; height: auto; width: 100%; } /***/ .obj_image.image_cover, .obj_image.image_cover .ctn_image { height: 100%; width: 100%; } .obj_image.image_cover .ctn_image img { height: 100%; width: 100%; object-fit: cover; object-position: center center; } /* ======================================== */ /* obj_video /* ======================================== */ .obj_video { position: relative; overflow: hidden; display: block; height: auto; width: 100%; } .obj_video .ctn_video { display: block; height: auto; width: 100%; } .obj_video .ctn_video.video_mobile { display: none; } /***/ .obj_video.video_cover { height: 100%; width: 100%; padding-bottom: 0; } .obj_video.video_cover > .ctn_video { height: 100%; width: 100%; object-fit: cover; object-position: center center; } /***/ @media screen and (max-width: 767px) { .obj_video .ctn_video.video_desktop { display: none; } .obj_video .ctn_video.video_mobile { display: block; } } /* ======================================== */ /* obj_player /* ======================================== */ .obj_player { position: relative; overflow: hidden; display: block; height: auto; height: 0; width: 100%; padding-bottom: 56.25%; cursor: pointer; } .obj_player .ctn_player { position: absolute; top: 0; left: 0; display: block; height: 100%; width: 100%; } .obj_player .ctn_player::before { content: ""; position: absolute; top: 50%; left: 50%; display: block; height: var(--aox-80px); width: var(--aox-80px); transform: translate(-50%, -50%); transform-origin: 0 0; border-radius: 50%; background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(10px); transition: all var(--aox-transition-timing-function) var(--aox-transition-duration); } .obj_player .ctn_player::after { content: ""; position: absolute; top: 50%; left: 50%; display: block; height: 0; width: 0; border-style: solid; border-width: var(--aox-16px) 0 var(--aox-14px) var(--aox-24px); border-color: transparent transparent transparent white; transform: translate(-35%, -50%); transform-origin: 0 0; transition: all ease .5s; } .obj_player .ctn_player img { height: 100%; width: 100%; object-fit: cover; object-position: center center; } .obj_player:hover .ctn_player::before { transform: scale(1.1) translate(-50%, -50%); } .obj_player:hover .ctn_player::after { transform: scale(1.1) translate(-35%, -50%); } /* ======================================== */ /* obj_carrousel /* ======================================== */ .obj_carrousel { position: relative; } .obj_carrousel .masque { position: relative; overflow: hidden; z-index: 1; } .obj_carrousel .items { height: 100%; width: 10000vw; max-width: none; } .obj_carrousel .item { height: 100%; float: left; transition: opacity var(--aox-transition-timing-function) var(--aox-transition-duration); } .obj_carrousel .hidden { display: block; } .obj_carrousel .nav { color: var(--aox-color-default); } .obj_carrousel .nav .prev, .obj_carrousel .nav .next { position: absolute; z-index: 10; top: 50%; height: var(--aox-64px); width: var(--aox-64px); margin: 0; padding: 0; border: none; font-size: 0 !important; color: currentColor; transform: translateY(-50%); background-color: rgba(255, 255, 255, 0.50); backdrop-filter: blur(var(--aox-4px)); border-radius: 50%; cursor: pointer; } .obj_carrousel .nav .prev { left: var(--aox-spacing-m); } .obj_carrousel .nav .next { right: var(--aox-spacing-m); } .obj_carrousel .nav .prev::after, .obj_carrousel .nav .next::after { content: ""; display: block; opacity: 1; position: absolute; top: 50%; left: 50%; height: var(--aox-12px); width: var(--aox-12px); border-right: var(--aox-2px) solid currentColor; border-top: var(--aox-2px) solid currentColor; background: none; transition: all var(--aox-transition-timing-function) var(--aox-transition-duration); } .obj_carrousel .nav .next:after { transform: translate(-65%, -50%) rotate(45deg); } .obj_carrousel .nav .prev:after { transform: translate(-35%, -50%) rotate(-135deg); } .obj_carrousel .nav .prev.disabled, .obj_carrousel .nav .next.disabled { opacity: 0.25; cursor: default; } .obj_carrousel .nav .next:not(.disabled):hover:after { left: 55%; } .obj_carrousel .nav .prev:not(.disabled):hover:after { left: 45%; } .obj_carrousel .nav ul { position: absolute; z-index: 10; left: 50%; bottom: var(--aox-spacing-xl); display: flex; flex-direction: row; justify-content: center; align-items: center; } .obj_carrousel .nav ul > * + * { margin-left: var(--aox-spacing-m); } .obj_carrousel .nav ul li a { overflow: hidden; display: block; height: var(--aox-12px); width: var(--aox-12px); text-decoration: none; font-size: 0; background-color: rgba(255, 255, 255, 0.50); backdrop-filter: blur(var(--aox-4px)); border-radius: 50%; } .obj_carrousel .nav ul li:hover a { background-color: rgba(255, 255, 255, 1); } .obj_carrousel .nav ul li.active a { height: var(--aox-16px); width: var(--aox-16px); box-shadow: 0px 0px 0px var(--aox-2px) white; background-color: var(--aox-button-background-color); } /***/ @media screen and (max-width: 767px) { .obj_carrousel .nav .prev, .obj_carrousel .nav .next { height: var(--aox-48px); width: var(--aox-48px); } .obj_carrousel .nav .prev { left: var(--aox-external-gutter); } .obj_carrousel .nav .next { right: var(--aox-external-gutter); } .obj_carrousel .nav .prev::after, .obj_carrousel .nav .next::after { height: var(--aox-8px); width: var(--aox-8px); } } /* ======================================== */ /* obj_aox-single aox-single_background /* ======================================== */ .obj_aox-single.aox-single_background { position: relative; overflow: hidden; height: 100vh; width: 100vw; } .obj_aox-single.aox-single_background #canvas { position: absolute; z-index: 1; top: 0; left: 0; height: 100%; width: 100%; } .obj_aox-single.aox-single_background .obj_content { position: absolute; overflow: hidden; z-index: 2; top: 50%; right: 50%; width: var(--aox-col-6); } .obj_aox-single.aox-single_background .obj_content .ctn_content { overflow-y: auto; padding: var(--aox-64px); max-height: 90vh; background-color: white; } .obj_aox-single.aox-single_background .aox_form .ctn_aox > * + * { margin-top: var(--aox-32px); } .obj_aox-single.aox-single_background .obj_version { position: absolute; z-index: 2; right: 5vh; bottom: 5vh; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: var(--aox-16px); } .obj_aox-single.aox-single_background .obj_version p { font-size: var(--aox-fs-12px); color: black; text-align: right; } /***/ .obj_aox-single.aox-single_background .obj_content { transition-delay: .6s; transition-duration: .75s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-property: transform; transform: translate(-100%, -50%); } .obj_aox-single.aox-single_background .obj_content.is_visible { transform: translate(0%, -50%); } .obj_aox-single.aox-single_background .obj_content .ctn_content { transition-delay: .6s; transition-duration: .75s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-property: transform; transform: translateX(120%); transform: translate3d(120%, 0, 0); } .obj_aox-single.aox-single_background .obj_content.is_visible .ctn_content { transform: translateX(0%); transform: translate3d(0%, 0, 0); } /***/ .obj_aox-single.aox-single_background .obj_content.is_fixed { top: 0; left: 0; right: auto; bottom: 0; height: 100vh; max-height: none; width: 50vw; max-width: none; transform: none !important; } .obj_aox-single.aox-single_background .obj_content.is_fixed .ctn_content { height: 100%; max-height: none; padding: var(--aox-96px); } /***/ @media screen and (max-width: 767px) { .obj_aox-single.aox-single_background .obj_content { top: 50; right: 50%; width: var(--aox-grid); transform: translate(-50%, -50%); } .obj_aox-single.aox-single_background .obj_content.is_visible { transform: translate(50%, -50%); } .obj_aox-single.aox-single_background .obj_content .ctn_content { padding: var(--aox-32px); max-height: 75vh; } .obj_aox-single.aox-single_background .obj_version { left: 2vh; right: 2vh; bottom: 2vh; } } /* ======================================== */ /* aox_icon /* ======================================== */ [class*=" aox_icon-"]:before, [class^=aox_icon-]:before { content: ""; display: inline-block; flex: 0 0 auto; height: var(--aox-icon-input-size); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; vertical-align: calc((.75em - var(--aox-icon-input-size))*.5); width: var(--aox-icon-input-size) } /***/ .aox_icon-user-fill:after,.aox_icon-user-fill:before { -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTQgMjJhOCA4IDAgMSAxIDE2IDB6bTgtOWMtMy4zMTUgMC02LTIuNjg1LTYtNnMyLjY4NS02IDYtNiA2IDIuNjg1IDYgNi0yLjY4NSA2LTYgNiIvPjwvc3ZnPg==); mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTQgMjJhOCA4IDAgMSAxIDE2IDB6bTgtOWMtMy4zMTUgMC02LTIuNjg1LTYtNnMyLjY4NS02IDYtNiA2IDIuNjg1IDYgNi0yLjY4NSA2LTYgNiIvPjwvc3ZnPg==); } .aox_icon-user-line:after,.aox_icon-user-line:before { -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTQgMjJhOCA4IDAgMSAxIDE2IDBoLTJhNiA2IDAgMCAwLTEyIDB6bTgtOWMtMy4zMTUgMC02LTIuNjg1LTYtNnMyLjY4NS02IDYtNiA2IDIuNjg1IDYgNi0yLjY4NSA2LTYgNm0wLTJjMi4yMSAwIDQtMS43OSA0LTRzLTEuNzktNC00LTQtNCAxLjc5LTQgNCAxLjc5IDQgNCA0Ii8+PC9zdmc+); mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTQgMjJhOCA4IDAgMSAxIDE2IDBoLTJhNiA2IDAgMCAwLTEyIDB6bTgtOWMtMy4zMTUgMC02LTIuNjg1LTYtNnMyLjY4NS02IDYtNiA2IDIuNjg1IDYgNi0yLjY4NSA2LTYgNm0wLTJjMi4yMSAwIDQtMS43OSA0LTRzLTEuNzktNC00LTQtNCAxLjc5LTQgNCAxLjc5IDQgNCA0Ii8+PC9zdmc+); } .aox_icon-lock-fill:after,.aox_icon-lock-fill:before { -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTE5IDEwaDFhMSAxIDAgMCAxIDEgMXYxMGExIDEgMCAwIDEtMSAxSDRhMSAxIDAgMCAxLTEtMVYxMWExIDEgMCAwIDEgMS0xaDFWOWE3IDcgMCAwIDEgMTQgMHptLTIgMFY5QTUgNSAwIDAgMCA3IDl2MXptLTYgNHY0aDJ2LTR6Ii8+PC9zdmc+); mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTE5IDEwaDFhMSAxIDAgMCAxIDEgMXYxMGExIDEgMCAwIDEtMSAxSDRhMSAxIDAgMCAxLTEtMVYxMWExIDEgMCAwIDEgMS0xaDFWOWE3IDcgMCAwIDEgMTQgMHptLTIgMFY5QTUgNSAwIDAgMCA3IDl2MXptLTYgNHY0aDJ2LTR6Ii8+PC9zdmc+); } .aox_icon-lock-line:after,.aox_icon-lock-line:before { -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTE5IDEwaDFhMSAxIDAgMCAxIDEgMXYxMGExIDEgMCAwIDEtMSAxSDRhMSAxIDAgMCAxLTEtMVYxMWExIDEgMCAwIDEgMS0xaDFWOWE3IDcgMCAwIDEgMTQgMHpNNSAxMnY4aDE0di04em02IDJoMnY0aC0yem02LTRWOUE1IDUgMCAwIDAgNyA5djF6Ii8+PC9zdmc+); mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTE5IDEwaDFhMSAxIDAgMCAxIDEgMXYxMGExIDEgMCAwIDEtMSAxSDRhMSAxIDAgMCAxLTEtMVYxMWExIDEgMCAwIDEgMS0xaDFWOWE3IDcgMCAwIDEgMTQgMHpNNSAxMnY4aDE0di04em02IDJoMnY0aC0yem02LTRWOUE1IDUgMCAwIDAgNyA5djF6Ii8+PC9zdmc+); } .aox_icon-mail-fill:after,.aox_icon-mail-fill:before { -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTMgM2gxOGExIDEgMCAwIDEgMSAxdjE2YTEgMSAwIDAgMS0xIDFIM2ExIDEgMCAwIDEtMS0xVjRhMSAxIDAgMCAxIDEtMW05LjA2IDguNjgzTDUuNjQ4IDYuMjM4IDQuMzUzIDcuNzYybDcuNzIgNi41NTUgNy41ODEtNi41Ni0xLjMwOC0xLjUxM3oiLz48L3N2Zz4=); mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTMgM2gxOGExIDEgMCAwIDEgMSAxdjE2YTEgMSAwIDAgMS0xIDFIM2ExIDEgMCAwIDEtMS0xVjRhMSAxIDAgMCAxIDEtMW05LjA2IDguNjgzTDUuNjQ4IDYuMjM4IDQuMzUzIDcuNzYybDcuNzIgNi41NTUgNy41ODEtNi41Ni0xLjMwOC0xLjUxM3oiLz48L3N2Zz4=); } .aox_icon-mail-line:after,.aox_icon-mail-line:before { -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTMgM2gxOGExIDEgMCAwIDEgMSAxdjE2YTEgMSAwIDAgMS0xIDFIM2ExIDEgMCAwIDEtMS0xVjRhMSAxIDAgMCAxIDEtMW0xNyA0LjIzOC03LjkyOCA3LjFMNCA3LjIxNlYxOWgxNnpNNC41MTEgNWw3LjU1IDYuNjYyTDE5LjUwMiA1eiIvPjwvc3ZnPg==); mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iY3VycmVudENvbG9yIj48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZD0iTTMgM2gxOGExIDEgMCAwIDEgMSAxdjE2YTEgMSAwIDAgMS0xIDFIM2ExIDEgMCAwIDEtMS0xVjRhMSAxIDAgMCAxIDEtMW0xNyA0LjIzOC03LjkyOCA3LjFMNCA3LjIxNlYxOWgxNnpNNC41MTEgNWw3LjU1IDYuNjYyTDE5LjUwMiA1eiIvPjwvc3ZnPg==); } /* -------------------------------------------------- */ /* $ > AOX Styles Core Custom - 01/01/25 /* -------------------------------------------------- */ /* ======================================== */ /* obj_text /* ======================================== */ .obj_text .ctn_text-header .t_title { letter-spacing: -0.03em; } /* ======================================== */ /* obj_image /* ======================================== */ .obj_image.image_cover, .obj_image.image_cover .ctn_image { display: block; } /* ======================================== */ /* obj_button /* ======================================== */ .is-processing .obj_button{ position: relative; cursor: default; } .is-processing .obj_button:disabled{ opacity: 1; } .is-processing .obj_button::before{ content: ''; position: absolute; left: calc(var(--aox-button-border-size) * -1); top: calc(var(--aox-button-border-size) * -1); width: calc(100% + var(--aox-button-border-size) * 2); height: calc(100% + var(--aox-button-border-size) * 2); background: rgba(255,255,255,0.97); } .is-processing .obj_button::after{ content: ''; position: absolute; left: 50%; top: 50%; width: var(--aox-30px); height: var(--aox-30px); border-radius: 100vw; transform: translate(-50%, -50%); transform-origin: 0 0; border: var(--aox-4px) solid var(--aox-color-grey-300); border-top-color: var(--aox-button-background-color); animation: loader-button-rotate-animation 1.5s infinite linear; } @keyframes loader-button-rotate-animation { 0% { transform: rotate(0deg) translate(-50%, -50%); } 100% { transform: rotate(360deg) translate(-50%, -50%); } } /* -------------------------------------------------- */ /* $ > AOX Styles Param /* -------------------------------------------------- */ /* v1.4.2 - 23/10/25 23/10/25 (FJA) - v1.4.2 - Modifs ctn_pattern + ajout variables + a 14/10/25 (KLF) - v1.4.1 - Modifs obj_aox-single 03/09/25 (FJA) - v1.4.0 - Modifs structure edito 26/08/25 (FJA) - v1.3.0 - Maj variables 11/06/25 (FJA) - v1.0.1 - Ajout variables */ /* ======================================== */ /* Param /* ======================================== */ /*** Color ***/ :root { --aox-color-white: #ffffff; --aox-color-black: #000000; --aox-color-primary: #3498db; --aox-color-secondary: #2ecc71; --aox-color-grey-950: #030712; --aox-color-grey-900: #111827; --aox-color-grey-800: #1F2937; --aox-color-grey-700: #374151; --aox-color-grey-600: #4B5563; --aox-color-grey-500: #6B7280; --aox-color-grey-400: #9CA3AF; --aox-color-grey-300: #D1D5DB; --aox-color-grey-200: #E5E7EB; --aox-color-grey-100: #F3F4F6; --aox-color-grey-50: #F8FAFC; /***/ --aox-color-default: var(--aox-color-black); --aox-color-error: #DC2626; --aox-color-warning: #F97316; --aox-color-valid: #22C55E; } /*** Spacing ***/ :root { --aox-spacing-1: var(--aox-8px); --aox-spacing-2: var(--aox-16px); --aox-spacing-3: var(--aox-24px); --aox-spacing-4: var(--aox-32px); --aox-spacing-5: var(--aox-40px); --aox-spacing-6: var(--aox-48px); --aox-spacing-7: var(--aox-56px); --aox-spacing-8: var(--aox-64px); --aox-spacing-9: var(--aox-72px); --aox-spacing-12: var(--aox-96px); --aox-spacing-15: var(--aox-120px); --aox-spacing-xxs: var(--aox-2px); --aox-spacing-2xs: var(--aox-2px); --aox-spacing-xs: var(--aox-4px); --aox-spacing-s: var(--aox-8px); --aox-spacing-m: var(--aox-16px); --aox-spacing-l: var(--aox-24px); --aox-spacing-xl: var(--aox-32px); --aox-spacing-xxl: var(--aox-48px); --aox-spacing-2xl: var(--aox-48px); --aox-spacing-xxxl: var(--aox-64px); --aox-spacing-3xl: var(--aox-64px); --aox-spacing-xxxxl: var(--aox-96px); --aox-spacing-4xl: var(--aox-96px); --aox-border-radius-2xs: var(--aox-2px); --aox-border-radius-xs: var(--aox-4px); --aox-border-radius-s: var(--aox-8px); --aox-border-radius-m: var(--aox-16px); --aox-border-radius-l: var(--aox-24px); --aox-border-radius-xl: var(--aox-32px); --aox-border-radius-2xl: var(--aox-48px); --aox-border-radius-3xl: var(--aox-64px); --aox-border-radius-4xl: var(--aox-96px); --aox-icon-size-s: var(--aox-16px); --aox-icon-size-m: var(--aox-24px); --aox-icon-size-l: var(--aox-32px); } /*** Common ***/ :root { --aox-font-family: "Arial", Sans-serif; --aox-font-weight: 400; --aox-font-weight-strong: 700; --aox-font-size: var(--aox-fs-16px); --aox-font-size-small: var(--aox-fs-12px); --aox-line-height: var(--aox-lh-150); --aox-link-color: var(--aox-color-primary); --aox-link-text-decoration: none; --aox-link-hover-color: var(--aox-color-primary); --aox-link-hover-text-decoration: none; --aox-transition-timing-function: ease; --aox-transition-duration: 400ms; --aox-transition-default: all var(--aox-transition-timing-function) var(--aox-transition-duration); } /*** obj_text ***/ :root { --aox-text-gap-s: var(--aox-spacing-s); --aox-text-gap-m: var(--aox-spacing-m); --aox-text-gap-l: var(--aox-spacing-l); --aox-text-gap-xl: var(--aox-spacing-xl); --aox-text-header-surtitle-font-family: var(--aox-font-family); --aox-text-header-surtitle-font-weight: var(--aox-font-weight-strong); --aox-text-header-surtitle-font-size: var(--aox-font-size); --aox-text-header-surtitle-line-height: var(--aox-line-height); --aox-text-header-surtitle-color: var(--aox-color-primary); --aox-text-header-surtitle-text-transform: uppercase; --aox-text-header-title-font-family: var(--aox-font-family); --aox-text-header-title-font-weight: var(--aox-font-weight); --aox-text-header-title-font-size: var(--aox-fs-48px); --aox-text-header-title-large-font-size: var(--aox-fs-60px); --aox-text-header-title-line-height: var(--aox-lh-100); --aox-text-header-title-color: var(--aox-color-primary); --aox-text-header-title-text-transform: inherit; --aox-text-title-font-family: var(--aox-font-family); --aox-text-title-font-weight: var(--aox-font-weight-strong); --aox-text-title-font-size: var(--aox-fs-28px); --aox-text-title-large-font-size: var(--aox-fs-36px); --aox-text-title-line-height: var(--aox-lh-120); --aox-text-title-color: var(--aox-color-primary); --aox-text-title-text-transform: inherit; --aox-text-subtitle-font-family: var(--aox-font-family); --aox-text-subtitle-font-weight: var(--aox-font-weight-strong); --aox-text-subtitle-font-size: var(--aox-fs-20px); --aox-text-subtitle-line-height: var(--aox-lh-110); --aox-text-subtitle-color: var(--aox-color-default); --aox-text-subtitle-text-transform: uppercase; --aox-text-font-family: var(--aox-font-family); --aox-text-font-weight: var(--aox-font-weight); --aox-text-font-size: var(--aox-font-size); --aox-text-line-height: var(--aox-line-height); --aox-text-color: var(--aox-color-default); --aox-text-link-color: var(--aox-link-color); --aox-text-link-text-decoration: var(--aox-link-text-decoration); --aox-text-link-hover-color: var(--aox-link-hover-color); --aox-text-link-hover-text-decoration: var(--aox-link-hover-text-decoration); --aox-text-legal-font-family: var(--aox-font-family); --aox-text-legal-font-weight: var(--aox-font-weight); --aox-text-legal-font-size: var(--aox-font-size-small); --aox-text-legal-line-height: var(--aox-line-height); --aox-text-legal-color: var(--aox-color-default); } @media screen and (max-width: 767px) { :root { --aox-text-header-title-font-size: var(--aox-fs-30px); --aox-text-header-title-large-font-size: var(--aox-fs-40px); --aox-text-title-font-size: var(--aox-fs-24px); --aox-text-subtitle-font-size: var(--aox-fs-16px); } } /*** Button ***/ :root { --aox-button-padding: var(--aox-16px) var(--aox-32px); --aox-button-font-family: var(--aox-font-family); --aox-button-font-weight: var(--aox-font-weight-strong); --aox-button-font-size: var(--aox-font-size); --aox-button-line-height: var(--aox-lh-100); --aox-button-text-transform: uppercase; --aox-button-border-size: 2px; --aox-button-border-radius: var(--aox-border-radius-xl); --aox-button-color: var(--aox-color-white); --aox-button-border-color: var(--aox-color-primary); --aox-button-background-color: var(--aox-color-primary); --aox-button-hover-color: var(--aox-color-primary); --aox-button-hover-border-color: var(--aox-color-primary); --aox-button-hover-background-color: transparent; } /* -------------------------------------------------- */ /* $ > AOX Styles Param Custom /* -------------------------------------------------- */ /* ======================================== */ /* Custom /* ======================================== */ /*** Color ***/ :root { --aox-color-primary: #003B6F; --aox-color-primary-900: #003B6F; --aox-color-primary-500: #BFD5ED; --aox-color-primary-300: #DFEEFE; --aox-color-primary-100: #ECF5FE; --aox-color-secondary: #0093B2; --aox-color-secondary-600: #0093B2; --aox-color-secondary-300: #B3DFE8; } .animations-off { --aox-transition-duration: 0ms; } /*** Common ***/ :root { --aox-font-family: "Poppins", Arial, Sans-serif; --aox-font-weight: 300; --aox-font-weight-strong: 600; --aox-font-size: var(--aox-fs-18px); --aox-line-height: var(--aox-lh-150); --aox-link-color: var(--aox-color-secondary); --aox-link-hover-color: var(--aox-color-secondary); } @media screen and (max-width: 767px) { :root { --aox-font-size: var(--aox-fs-16px); } } /*** Font ***/ :root { --aox-text-header-title-font-weight: 200; } /*** Button ***/ :root { --aox-button-padding: var(--aox-20px) var(--aox-32px); --aox-button-font-size: var(--aox-fs-14px); --aox-button-line-height: var(--aox-lh-100); --aox-button-border-radius: 0; --aox-button-color: var(--aox-color-white); --aox-button-border-color: var(--aox-color-primary); --aox-button-background-color: var(--aox-color-primary); --aox-button-hover-color: var(--aox-color-primary); --aox-button-hover-border-color: var(--aox-color-primary); --aox-button-hover-background-color: var(--aox-color-white); } /* -------------------------------------------------- */ /* $ > AOX Fluid Core - v1.3.0 - 26/08/25 /* -------------------------------------------------- */ /* 26/08/25 (FJA) - v1.3.0 - Maj variables 03/04/25 (FJA) - v2.2.0 - Ajout fichier Core / Param / Core custom / Param custom */ /* ======================================== */ /* Units /* ======================================== */ /*** Sizes ***/ :root { --aox-2px: calc(var(--aox-1px) * 2); --aox-3px: calc(var(--aox-1px) * 3); --aox-4px: calc(var(--aox-1px) * 4); --aox-5px: calc(var(--aox-1px) * 5); --aox-6px: calc(var(--aox-1px) * 6); --aox-7px: calc(var(--aox-1px) * 7); --aox-8px: calc(var(--aox-1px) * 8); --aox-9px: calc(var(--aox-1px) * 9); --aox-10px: calc(var(--aox-1px) * 10); --aox-11px: calc(var(--aox-1px) * 11); --aox-12px: calc(var(--aox-1px) * 12); --aox-13px: calc(var(--aox-1px) * 13); --aox-14px: calc(var(--aox-1px) * 14); --aox-15px: calc(var(--aox-1px) * 15); --aox-16px: calc(var(--aox-1px) * 16); --aox-17px: calc(var(--aox-1px) * 17); --aox-18px: calc(var(--aox-1px) * 18); --aox-19px: calc(var(--aox-1px) * 19); --aox-20px: calc(var(--aox-1px) * 20); --aox-21px: calc(var(--aox-1px) * 21); --aox-22px: calc(var(--aox-1px) * 22); --aox-23px: calc(var(--aox-1px) * 23); --aox-24px: calc(var(--aox-1px) * 24); --aox-25px: calc(var(--aox-1px) * 25); --aox-26px: calc(var(--aox-1px) * 26); --aox-27px: calc(var(--aox-1px) * 27); --aox-28px: calc(var(--aox-1px) * 28); --aox-29px: calc(var(--aox-1px) * 29); --aox-30px: calc(var(--aox-1px) * 30); --aox-31px: calc(var(--aox-1px) * 31); --aox-32px: calc(var(--aox-1px) * 32); --aox-33px: calc(var(--aox-1px) * 33); --aox-34px: calc(var(--aox-1px) * 34); --aox-35px: calc(var(--aox-1px) * 35); --aox-36px: calc(var(--aox-1px) * 36); --aox-37px: calc(var(--aox-1px) * 37); --aox-38px: calc(var(--aox-1px) * 38); --aox-39px: calc(var(--aox-1px) * 39); --aox-40px: calc(var(--aox-1px) * 40); --aox-41px: calc(var(--aox-1px) * 41); --aox-42px: calc(var(--aox-1px) * 42); --aox-43px: calc(var(--aox-1px) * 43); --aox-44px: calc(var(--aox-1px) * 44); --aox-45px: calc(var(--aox-1px) * 45); --aox-46px: calc(var(--aox-1px) * 46); --aox-47px: calc(var(--aox-1px) * 47); --aox-48px: calc(var(--aox-1px) * 48); --aox-49px: calc(var(--aox-1px) * 49); --aox-50px: calc(var(--aox-1px) * 50); --aox-51px: calc(var(--aox-1px) * 51); --aox-52px: calc(var(--aox-1px) * 52); --aox-53px: calc(var(--aox-1px) * 53); --aox-54px: calc(var(--aox-1px) * 54); --aox-55px: calc(var(--aox-1px) * 55); --aox-56px: calc(var(--aox-1px) * 56); --aox-57px: calc(var(--aox-1px) * 57); --aox-58px: calc(var(--aox-1px) * 58); --aox-59px: calc(var(--aox-1px) * 59); --aox-60px: calc(var(--aox-1px) * 60); --aox-61px: calc(var(--aox-1px) * 61); --aox-62px: calc(var(--aox-1px) * 62); --aox-63px: calc(var(--aox-1px) * 63); --aox-64px: calc(var(--aox-1px) * 64); --aox-65px: calc(var(--aox-1px) * 65); --aox-66px: calc(var(--aox-1px) * 66); --aox-67px: calc(var(--aox-1px) * 67); --aox-68px: calc(var(--aox-1px) * 68); --aox-69px: calc(var(--aox-1px) * 69); --aox-70px: calc(var(--aox-1px) * 70); --aox-71px: calc(var(--aox-1px) * 71); --aox-72px: calc(var(--aox-1px) * 72); --aox-73px: calc(var(--aox-1px) * 73); --aox-74px: calc(var(--aox-1px) * 74); --aox-75px: calc(var(--aox-1px) * 75); --aox-76px: calc(var(--aox-1px) * 76); --aox-77px: calc(var(--aox-1px) * 77); --aox-78px: calc(var(--aox-1px) * 78); --aox-79px: calc(var(--aox-1px) * 79); --aox-80px: calc(var(--aox-1px) * 80); --aox-81px: calc(var(--aox-1px) * 81); --aox-82px: calc(var(--aox-1px) * 82); --aox-83px: calc(var(--aox-1px) * 83); --aox-84px: calc(var(--aox-1px) * 84); --aox-85px: calc(var(--aox-1px) * 85); --aox-86px: calc(var(--aox-1px) * 86); --aox-87px: calc(var(--aox-1px) * 87); --aox-88px: calc(var(--aox-1px) * 88); --aox-89px: calc(var(--aox-1px) * 89); --aox-90px: calc(var(--aox-1px) * 90); --aox-91px: calc(var(--aox-1px) * 91); --aox-92px: calc(var(--aox-1px) * 92); --aox-93px: calc(var(--aox-1px) * 93); --aox-94px: calc(var(--aox-1px) * 94); --aox-95px: calc(var(--aox-1px) * 95); --aox-96px: calc(var(--aox-1px) * 96); --aox-97px: calc(var(--aox-1px) * 97); --aox-98px: calc(var(--aox-1px) * 98); --aox-99px: calc(var(--aox-1px) * 99); --aox-100px: calc(var(--aox-1px) * 100); --aox-105px: calc(var(--aox-1px) * 105); --aox-110px: calc(var(--aox-1px) * 110); --aox-115px: calc(var(--aox-1px) * 115); --aox-120px: calc(var(--aox-1px) * 120); --aox-125px: calc(var(--aox-1px) * 125); --aox-130px: calc(var(--aox-1px) * 130); --aox-135px: calc(var(--aox-1px) * 135); --aox-140px: calc(var(--aox-1px) * 140); --aox-145px: calc(var(--aox-1px) * 145); --aox-150px: calc(var(--aox-1px) * 150); --aox-155px: calc(var(--aox-1px) * 155); --aox-160px: calc(var(--aox-1px) * 160); --aox-165px: calc(var(--aox-1px) * 165); --aox-170px: calc(var(--aox-1px) * 170); --aox-175px: calc(var(--aox-1px) * 175); --aox-180px: calc(var(--aox-1px) * 180); --aox-185px: calc(var(--aox-1px) * 185); --aox-190px: calc(var(--aox-1px) * 190); --aox-195px: calc(var(--aox-1px) * 195); --aox-200px: calc(var(--aox-1px) * 200); --aox-205px: calc(var(--aox-1px) * 205); --aox-210px: calc(var(--aox-1px) * 210); --aox-215px: calc(var(--aox-1px) * 215); --aox-220px: calc(var(--aox-1px) * 220); --aox-225px: calc(var(--aox-1px) * 225); --aox-230px: calc(var(--aox-1px) * 230); --aox-235px: calc(var(--aox-1px) * 235); --aox-240px: calc(var(--aox-1px) * 240); --aox-245px: calc(var(--aox-1px) * 245); --aox-250px: calc(var(--aox-1px) * 250); --aox-255px: calc(var(--aox-1px) * 255); --aox-260px: calc(var(--aox-1px) * 260); --aox-265px: calc(var(--aox-1px) * 265); --aox-270px: calc(var(--aox-1px) * 270); --aox-275px: calc(var(--aox-1px) * 275); --aox-280px: calc(var(--aox-1px) * 280); --aox-285px: calc(var(--aox-1px) * 285); --aox-290px: calc(var(--aox-1px) * 290); --aox-295px: calc(var(--aox-1px) * 295); --aox-300px: calc(var(--aox-1px) * 300); --aox-305px: calc(var(--aox-1px) * 305); --aox-310px: calc(var(--aox-1px) * 310); --aox-315px: calc(var(--aox-1px) * 315); --aox-320px: calc(var(--aox-1px) * 320); --aox-325px: calc(var(--aox-1px) * 325); --aox-330px: calc(var(--aox-1px) * 330); --aox-335px: calc(var(--aox-1px) * 335); --aox-340px: calc(var(--aox-1px) * 340); --aox-345px: calc(var(--aox-1px) * 345); --aox-350px: calc(var(--aox-1px) * 350); --aox-355px: calc(var(--aox-1px) * 355); --aox-360px: calc(var(--aox-1px) * 360); --aox-365px: calc(var(--aox-1px) * 365); --aox-370px: calc(var(--aox-1px) * 370); --aox-375px: calc(var(--aox-1px) * 375); --aox-380px: calc(var(--aox-1px) * 380); --aox-385px: calc(var(--aox-1px) * 385); --aox-390px: calc(var(--aox-1px) * 390); --aox-395px: calc(var(--aox-1px) * 395); --aox-400px: calc(var(--aox-1px) * 400); --aox-405px: calc(var(--aox-1px) * 405); --aox-410px: calc(var(--aox-1px) * 410); --aox-415px: calc(var(--aox-1px) * 415); --aox-420px: calc(var(--aox-1px) * 420); --aox-430px: calc(var(--aox-1px) * 430); --aox-440px: calc(var(--aox-1px) * 440); --aox-450px: calc(var(--aox-1px) * 450); --aox-460px: calc(var(--aox-1px) * 460); --aox-470px: calc(var(--aox-1px) * 470); --aox-480px: calc(var(--aox-1px) * 480); --aox-490px: calc(var(--aox-1px) * 490); --aox-500px: calc(var(--aox-1px) * 500); --aox-510px: calc(var(--aox-1px) * 510); --aox-520px: calc(var(--aox-1px) * 520); --aox-530px: calc(var(--aox-1px) * 530); --aox-540px: calc(var(--aox-1px) * 540); --aox-550px: calc(var(--aox-1px) * 550); --aox-560px: calc(var(--aox-1px) * 560); --aox-570px: calc(var(--aox-1px) * 570); --aox-580px: calc(var(--aox-1px) * 580); --aox-590px: calc(var(--aox-1px) * 590); --aox-600px: calc(var(--aox-1px) * 600); --aox-610px: calc(var(--aox-1px) * 610); --aox-620px: calc(var(--aox-1px) * 620); --aox-630px: calc(var(--aox-1px) * 630); --aox-640px: calc(var(--aox-1px) * 640); --aox-650px: calc(var(--aox-1px) * 650); --aox-660px: calc(var(--aox-1px) * 660); --aox-670px: calc(var(--aox-1px) * 670); --aox-680px: calc(var(--aox-1px) * 680); --aox-690px: calc(var(--aox-1px) * 690); --aox-700px: calc(var(--aox-1px) * 700); --aox-710px: calc(var(--aox-1px) * 710); --aox-720px: calc(var(--aox-1px) * 720); --aox-730px: calc(var(--aox-1px) * 730); --aox-740px: calc(var(--aox-1px) * 740); --aox-750px: calc(var(--aox-1px) * 750); --aox-760px: calc(var(--aox-1px) * 760); --aox-770px: calc(var(--aox-1px) * 770); --aox-780px: calc(var(--aox-1px) * 780); --aox-790px: calc(var(--aox-1px) * 790); --aox-800px: calc(var(--aox-1px) * 800); --aox-810px: calc(var(--aox-1px) * 810); --aox-820px: calc(var(--aox-1px) * 820); --aox-830px: calc(var(--aox-1px) * 830); --aox-840px: calc(var(--aox-1px) * 840); --aox-850px: calc(var(--aox-1px) * 850); --aox-860px: calc(var(--aox-1px) * 860); --aox-870px: calc(var(--aox-1px) * 870); --aox-880px: calc(var(--aox-1px) * 880); --aox-890px: calc(var(--aox-1px) * 890); --aox-900px: calc(var(--aox-1px) * 900); --aox-910px: calc(var(--aox-1px) * 910); --aox-920px: calc(var(--aox-1px) * 920); --aox-930px: calc(var(--aox-1px) * 930); --aox-940px: calc(var(--aox-1px) * 940); --aox-950px: calc(var(--aox-1px) * 950); --aox-960px: calc(var(--aox-1px) * 960); --aox-970px: calc(var(--aox-1px) * 970); --aox-980px: calc(var(--aox-1px) * 980); --aox-990px: calc(var(--aox-1px) * 990); --aox-1000px: calc(var(--aox-1px) * 1000); --aox-1010px: calc(var(--aox-1px) * 1010); --aox-1020px: calc(var(--aox-1px) * 1020); --aox-1030px: calc(var(--aox-1px) * 1030); --aox-1040px: calc(var(--aox-1px) * 1040); --aox-1050px: calc(var(--aox-1px) * 1050); --aox-1060px: calc(var(--aox-1px) * 1060); --aox-1070px: calc(var(--aox-1px) * 1070); --aox-1080px: calc(var(--aox-1px) * 1080); --aox-1090px: calc(var(--aox-1px) * 1090); --aox-1100px: calc(var(--aox-1px) * 1100); --aox-1110px: calc(var(--aox-1px) * 1110); --aox-1120px: calc(var(--aox-1px) * 1120); --aox-1130px: calc(var(--aox-1px) * 1130); --aox-1140px: calc(var(--aox-1px) * 1140); --aox-1150px: calc(var(--aox-1px) * 1150); --aox-1160px: calc(var(--aox-1px) * 1160); --aox-1170px: calc(var(--aox-1px) * 1170); --aox-1180px: calc(var(--aox-1px) * 1180); --aox-1190px: calc(var(--aox-1px) * 1190); --aox-1200px: calc(var(--aox-1px) * 1200); --aox-1210px: calc(var(--aox-1px) * 1210); --aox-1220px: calc(var(--aox-1px) * 1220); --aox-1230px: calc(var(--aox-1px) * 1230); --aox-1240px: calc(var(--aox-1px) * 1240); --aox-1250px: calc(var(--aox-1px) * 1250); --aox-1260px: calc(var(--aox-1px) * 1260); --aox-1270px: calc(var(--aox-1px) * 1270); --aox-1280px: calc(var(--aox-1px) * 1280); --aox-1290px: calc(var(--aox-1px) * 1290); --aox-1300px: calc(var(--aox-1px) * 1300); --aox-1310px: calc(var(--aox-1px) * 1310); --aox-1320px: calc(var(--aox-1px) * 1320); --aox-1330px: calc(var(--aox-1px) * 1330); --aox-1340px: calc(var(--aox-1px) * 1340); --aox-1350px: calc(var(--aox-1px) * 1350); --aox-1360px: calc(var(--aox-1px) * 1360); --aox-1370px: calc(var(--aox-1px) * 1370); --aox-1380px: calc(var(--aox-1px) * 1380); --aox-1390px: calc(var(--aox-1px) * 1390); --aox-1400px: calc(var(--aox-1px) * 1400); --aox-1410px: calc(var(--aox-1px) * 1410); --aox-1420px: calc(var(--aox-1px) * 1420); --aox-1430px: calc(var(--aox-1px) * 1430); --aox-1440px: calc(var(--aox-1px) * 1440); --aox-1450px: calc(var(--aox-1px) * 1450); --aox-1460px: calc(var(--aox-1px) * 1460); --aox-1470px: calc(var(--aox-1px) * 1470); --aox-1480px: calc(var(--aox-1px) * 1480); --aox-1490px: calc(var(--aox-1px) * 1490); --aox-1500px: calc(var(--aox-1px) * 1500); --aox-1510px: calc(var(--aox-1px) * 1510); --aox-1520px: calc(var(--aox-1px) * 1520); --aox-1530px: calc(var(--aox-1px) * 1530); --aox-1540px: calc(var(--aox-1px) * 1540); --aox-1550px: calc(var(--aox-1px) * 1550); --aox-1560px: calc(var(--aox-1px) * 1560); --aox-1570px: calc(var(--aox-1px) * 1570); --aox-1580px: calc(var(--aox-1px) * 1580); --aox-1590px: calc(var(--aox-1px) * 1590); --aox-1600px: calc(var(--aox-1px) * 1600); --aox-1610px: calc(var(--aox-1px) * 1610); --aox-1620px: calc(var(--aox-1px) * 1620); --aox-1630px: calc(var(--aox-1px) * 1630); --aox-1640px: calc(var(--aox-1px) * 1640); --aox-1650px: calc(var(--aox-1px) * 1650); --aox-1660px: calc(var(--aox-1px) * 1660); --aox-1670px: calc(var(--aox-1px) * 1670); --aox-1680px: calc(var(--aox-1px) * 1680); --aox-1690px: calc(var(--aox-1px) * 1690); --aox-1700px: calc(var(--aox-1px) * 1700); --aox-1710px: calc(var(--aox-1px) * 1710); --aox-1720px: calc(var(--aox-1px) * 1720); --aox-1730px: calc(var(--aox-1px) * 1730); --aox-1740px: calc(var(--aox-1px) * 1740); --aox-1750px: calc(var(--aox-1px) * 1750); --aox-1760px: calc(var(--aox-1px) * 1760); --aox-1770px: calc(var(--aox-1px) * 1770); --aox-1780px: calc(var(--aox-1px) * 1780); --aox-1790px: calc(var(--aox-1px) * 1790); --aox-1800px: calc(var(--aox-1px) * 1800); --aox-1810px: calc(var(--aox-1px) * 1810); --aox-1820px: calc(var(--aox-1px) * 1820); --aox-1830px: calc(var(--aox-1px) * 1830); --aox-1840px: calc(var(--aox-1px) * 1840); --aox-1850px: calc(var(--aox-1px) * 1850); --aox-1860px: calc(var(--aox-1px) * 1860); --aox-1870px: calc(var(--aox-1px) * 1870); --aox-1880px: calc(var(--aox-1px) * 1880); --aox-1890px: calc(var(--aox-1px) * 1890); --aox-1900px: calc(var(--aox-1px) * 1900); --aox-1910px: calc(var(--aox-1px) * 1910); --aox-1920px: calc(var(--aox-1px) * 1920); --aox-1024px: calc(var(--aox-1px) * 1024); --aox-1276px: calc(var(--aox-1px) * 1276); --aox-1366px: calc(var(--aox-1px) * 1366); --aox-1536px: calc(var(--aox-1px) * 1536); } /* ======================================== */ /* Grid /* ======================================== */ /*** Calculations ***/ :root { --aox-external-gutter: calc((100vw - var(--aox-grid)) / 2); --aox-col: calc((var(--aox-grid) - (calc(var(--aox-columns) - 1) * var(--aox-gutter))) / var(--aox-columns)); --aox-col-gutter: calc(var(--aox-col) + var(--aox-gutter)); } /*** Sizes ***/ :root { --aox-col-1: calc(var(--aox-col) * 1); --aox-col-2: calc((var(--aox-col) * 2) + (var(--aox-gutter) * 1)); --aox-col-3: calc((var(--aox-col) * 3) + (var(--aox-gutter) * 2)); --aox-col-4: calc((var(--aox-col) * 4) + (var(--aox-gutter) * 3)); --aox-col-5: calc((var(--aox-col) * 5) + (var(--aox-gutter) * 4)); --aox-col-6: calc((var(--aox-col) * 6) + (var(--aox-gutter) * 5)); --aox-col-7: calc((var(--aox-col) * 7) + (var(--aox-gutter) * 6)); --aox-col-8: calc((var(--aox-col) * 8) + (var(--aox-gutter) * 7)); --aox-col-9: calc((var(--aox-col) * 9) + (var(--aox-gutter) * 8)); --aox-col-10: calc((var(--aox-col) * 10) + (var(--aox-gutter) * 9)); --aox-col-11: calc((var(--aox-col) * 11) + (var(--aox-gutter) * 10)); --aox-col-12: calc((var(--aox-col) * 12) + (var(--aox-gutter) * 11)); --aox-col-13: calc((var(--aox-col) * 13) + (var(--aox-gutter) * 12)); --aox-col-14: calc((var(--aox-col) * 14) + (var(--aox-gutter) * 13)); --aox-col-15: calc((var(--aox-col) * 15) + (var(--aox-gutter) * 14)); --aox-col-16: calc((var(--aox-col) * 16) + (var(--aox-gutter) * 15)); } :root { --aox-col-1-gutter: calc(var(--aox-col-1) + var(--aox-gutter)); --aox-col-2-gutter: calc(var(--aox-col-2) + var(--aox-gutter)); --aox-col-3-gutter: calc(var(--aox-col-3) + var(--aox-gutter)); --aox-col-4-gutter: calc(var(--aox-col-4) + var(--aox-gutter)); --aox-col-5-gutter: calc(var(--aox-col-5) + var(--aox-gutter)); --aox-col-6-gutter: calc(var(--aox-col-6) + var(--aox-gutter)); --aox-col-7-gutter: calc(var(--aox-col-7) + var(--aox-gutter)); --aox-col-8-gutter: calc(var(--aox-col-8) + var(--aox-gutter)); --aox-col-9-gutter: calc(var(--aox-col-9) + var(--aox-gutter)); --aox-col-10-gutter: calc(var(--aox-col-10) + var(--aox-gutter)); --aox-col-11-gutter: calc(var(--aox-col-11) + var(--aox-gutter)); --aox-col-12-gutter: calc(var(--aox-col-12) + var(--aox-gutter)); --aox-col-13-gutter: calc(var(--aox-col-13) + var(--aox-gutter)); --aox-col-14-gutter: calc(var(--aox-col-14) + var(--aox-gutter)); --aox-col-15-gutter: calc(var(--aox-col-15) + var(--aox-gutter)); } @media screen and (max-width: 767px) { /*** Calculations ***/ :root { --aox-external-gutter: calc((100vw - var(--aox-grid)) / 2); --aox-col: calc((var(--aox-grid) - (5 * var(--aox-gutter))) / 6); --aox-col-gutter: calc(var(--aox-col) + var(--aox-gutter)); } /*** Sizes ***/ :root { --aox-col-1: calc(var(--aox-col) * 1); --aox-col-2: calc((var(--aox-col) * 2) + (var(--aox-gutter) * 1)); --aox-col-3: calc((var(--aox-col) * 3) + (var(--aox-gutter) * 2)); --aox-col-4: calc((var(--aox-col) * 4) + (var(--aox-gutter) * 3)); --aox-col-5: calc((var(--aox-col) * 5) + (var(--aox-gutter) * 4)); --aox-col-6: calc((var(--aox-col) * 6) + (var(--aox-gutter) * 5)); --aox-col-7: 100%; --aox-col-8: 100%; --aox-col-9: 100%; --aox-col-10: 100%; --aox-col-11: 100%; --aox-col-12: 100%; --aox-col-13: 100%; --aox-col-14: 100%; --aox-col-15: 100%; --aox-col-16: 100%; } } /* ======================================== */ /* Debug /* ======================================== */ .obj_grid-debug { position: fixed; top: 0; left: 0; z-index: 999; height: 100%; width: 100vw; } .obj_grid-debug .ctn_grid-debug { display: flex; flex-direction: row; height: 100%; width: var(--aox-grid); margin: 0 auto; } .obj_grid-debug .ctn_grid-debug > * { position: relative; width: var(--aox-col); border-left: solid 1px rgba(0, 255, 255, 0.3); border-right: solid 1px rgba(0, 255, 255, 0.3); background: rgba(0, 255, 255, 0.15); } .obj_grid-debug .ctn_grid-debug > * + * { margin-left: var(--aox-gutter); } @media screen and (max-width: 767px) { .obj_grid-debug .ctn_grid-debug > * { display: none; } .obj_grid-debug .ctn_grid-debug > *:nth-child(-n+6) { display: block; } } /* ======================================== */ /* Font-sizes /* ======================================== */ /*** Calculations ***/ :root { --aox-fs-resize: calc( (var(--aox-fs-viewport-width) - (var(--aox-fs-min-width) * 1px)) / (var(--aox-fs-max-width) - var(--aox-fs-min-width)) ); } /*** Sizes ***/ :root { --aox-fs-6px: calc((((6 * 0.85) / var(--aox-fs-1rem)) * 1rem) + (6 - (6 * 0.85)) * var(--aox-fs-resize)); --aox-fs-8px: calc((((8 * 0.85) / var(--aox-fs-1rem)) * 1rem) + (8 - (8 * 0.85)) * var(--aox-fs-resize)); --aox-fs-10px: calc((((10 * 0.85) / var(--aox-fs-1rem)) * 1rem) + (10 - (10 * 0.85)) * var(--aox-fs-resize)); --aox-fs-12px: calc((((12 * 0.85) / var(--aox-fs-1rem)) * 1rem) + (12 - (12 * 0.85)) * var(--aox-fs-resize)); --aox-fs-14px: calc((((14 * 0.85) / var(--aox-fs-1rem)) * 1rem) + (14 - (14 * 0.85)) * var(--aox-fs-resize)); --aox-fs-16px: calc((((16 * 0.85) / var(--aox-fs-1rem)) * 1rem) + (16 - (16 * 0.85)) * var(--aox-fs-resize)); --aox-fs-18px: calc((((18 * 0.85) / var(--aox-fs-1rem)) * 1rem) + (18 - (18 * 0.85)) * var(--aox-fs-resize)); --aox-fs-20px: calc((((20 * 0.85) / var(--aox-fs-1rem)) * 1rem) + (20 - (20 * 0.85)) * var(--aox-fs-resize)); --aox-fs-22px: calc((((22 * 0.8) / var(--aox-fs-1rem)) * 1rem) + (22 - (22 * 0.8)) * var(--aox-fs-resize)); --aox-fs-24px: calc((((24 * 0.8) / var(--aox-fs-1rem)) * 1rem) + (24 - (24 * 0.8)) * var(--aox-fs-resize)); --aox-fs-26px: calc((((26 * 0.8) / var(--aox-fs-1rem)) * 1rem) + (26 - (26 * 0.8)) * var(--aox-fs-resize)); --aox-fs-28px: calc((((28 * 0.8) / var(--aox-fs-1rem)) * 1rem) + (28 - (28 * 0.8)) * var(--aox-fs-resize)); --aox-fs-30px: calc((((30 * 0.8) / var(--aox-fs-1rem)) * 1rem) + (30 - (30 * 0.8)) * var(--aox-fs-resize)); --aox-fs-32px: calc((((32 * 0.75) / var(--aox-fs-1rem)) * 1rem) + (32 - (32 * 0.75)) * var(--aox-fs-resize)); --aox-fs-34px: calc((((34 * 0.75) / var(--aox-fs-1rem)) * 1rem) + (34 - (34 * 0.75)) * var(--aox-fs-resize)); --aox-fs-36px: calc((((36 * 0.75) / var(--aox-fs-1rem)) * 1rem) + (36 - (36 * 0.75)) * var(--aox-fs-resize)); --aox-fs-38px: calc((((38 * 0.75) / var(--aox-fs-1rem)) * 1rem) + (38 - (38 * 0.75)) * var(--aox-fs-resize)); --aox-fs-40px: calc((((40 * 0.75) / var(--aox-fs-1rem)) * 1rem) + (40 - (40 * 0.75)) * var(--aox-fs-resize)); --aox-fs-42px: calc((((42 * 0.75) / var(--aox-fs-1rem)) * 1rem) + (42 - (42 * 0.75)) * var(--aox-fs-resize)); --aox-fs-44px: calc((((44 * 0.75) / var(--aox-fs-1rem)) * 1rem) + (44 - (44 * 0.75)) * var(--aox-fs-resize)); --aox-fs-46px: calc((((46 * 0.75) / var(--aox-fs-1rem)) * 1rem) + (46 - (46 * 0.75)) * var(--aox-fs-resize)); --aox-fs-48px: calc((((48 * 0.75) / var(--aox-fs-1rem)) * 1rem) + (48 - (48 * 0.75)) * var(--aox-fs-resize)); --aox-fs-50px: calc((((50 * 0.75) / var(--aox-fs-1rem)) * 1rem) + (50 - (50 * 0.75)) * var(--aox-fs-resize)); --aox-fs-52px: calc((((52 * 0.75) / var(--aox-fs-1rem)) * 1rem) + (52 - (52 * 0.75)) * var(--aox-fs-resize)); --aox-fs-54px: calc((((54 * 0.75) / var(--aox-fs-1rem)) * 1rem) + (54 - (54 * 0.75)) * var(--aox-fs-resize)); --aox-fs-56px: calc((((56 * 0.75) / var(--aox-fs-1rem)) * 1rem) + (56 - (56 * 0.75)) * var(--aox-fs-resize)); --aox-fs-58px: calc((((58 * 0.75) / var(--aox-fs-1rem)) * 1rem) + (58 - (58 * 0.75)) * var(--aox-fs-resize)); --aox-fs-60px: calc((((60 * 0.7) / var(--aox-fs-1rem)) * 1rem) + (60 - (60 * 0.7)) * var(--aox-fs-resize)); --aox-fs-62px: calc((((62 * 0.7) / var(--aox-fs-1rem)) * 1rem) + (62 - (62 * 0.7)) * var(--aox-fs-resize)); --aox-fs-64px: calc((((64 * 0.7) / var(--aox-fs-1rem)) * 1rem) + (64 - (64 * 0.7)) * var(--aox-fs-resize)); --aox-fs-66px: calc((((66 * 0.7) / var(--aox-fs-1rem)) * 1rem) + (66 - (66 * 0.7)) * var(--aox-fs-resize)); --aox-fs-68px: calc((((68 * 0.7) / var(--aox-fs-1rem)) * 1rem) + (68 - (68 * 0.7)) * var(--aox-fs-resize)); --aox-fs-70px: calc((((70 * 0.7) / var(--aox-fs-1rem)) * 1rem) + (70 - (70 * 0.7)) * var(--aox-fs-resize)); --aox-fs-72px: calc((((72 * 0.7) / var(--aox-fs-1rem)) * 1rem) + (72 - (72 * 0.7)) * var(--aox-fs-resize)); --aox-fs-74px: calc((((74 * 0.7) / var(--aox-fs-1rem)) * 1rem) + (74 - (74 * 0.7)) * var(--aox-fs-resize)); --aox-fs-76px: calc((((76 * 0.7) / var(--aox-fs-1rem)) * 1rem) + (76 - (76 * 0.7)) * var(--aox-fs-resize)); --aox-fs-78px: calc((((78 * 0.7) / var(--aox-fs-1rem)) * 1rem) + (78 - (78 * 0.7)) * var(--aox-fs-resize)); --aox-fs-80px: calc((((80 * 0.7) / var(--aox-fs-1rem)) * 1rem) + (80 - (80 * 0.7)) * var(--aox-fs-resize)); --aox-fs-82px: calc((((82 * 0.7) / var(--aox-fs-1rem)) * 1rem) + (82 - (82 * 0.7)) * var(--aox-fs-resize)); --aox-fs-84px: calc((((84 * 0.7) / var(--aox-fs-1rem)) * 1rem) + (84 - (84 * 0.7)) * var(--aox-fs-resize)); --aox-fs-86px: calc((((86 * 0.7) / var(--aox-fs-1rem)) * 1rem) + (86 - (86 * 0.7)) * var(--aox-fs-resize)); --aox-fs-88px: calc((((88 * 0.7) / var(--aox-fs-1rem)) * 1rem) + (88 - (88 * 0.7)) * var(--aox-fs-resize)); --aox-fs-90px: calc((((90 * 0.7) / var(--aox-fs-1rem)) * 1rem) + (90 - (90 * 0.7)) * var(--aox-fs-resize)); --aox-fs-92px: calc((((92 * 0.7) / var(--aox-fs-1rem)) * 1rem) + (92 - (92 * 0.7)) * var(--aox-fs-resize)); --aox-fs-94px: calc((((94 * 0.7) / var(--aox-fs-1rem)) * 1rem) + (94 - (94 * 0.7)) * var(--aox-fs-resize)); --aox-fs-96px: calc((((96 * 0.7) / var(--aox-fs-1rem)) * 1rem) + (96 - (96 * 0.7)) * var(--aox-fs-resize)); --aox-fs-98px: calc((((98 * 0.7) / var(--aox-fs-1rem)) * 1rem) + (98 - (98 * 0.7)) * var(--aox-fs-resize)); --aox-fs-100px: calc((((100 * 0.7) / var(--aox-fs-1rem)) * 1rem) + (100 - (100 * 0.7)) * var(--aox-fs-resize)); --aox-lh-50: 0.5; --aox-lh-60: 0.6; --aox-lh-70: 0.7; --aox-lh-80: 0.8; --aox-lh-90: 0.9; --aox-lh-100: 1; --aox-lh-110: 1.1; --aox-lh-120: 1.2; --aox-lh-130: 1.3; --aox-lh-140: 1.4; --aox-lh-150: 1.5; --aox-lh-160: 1.6; --aox-lh-170: 1.7; --aox-lh-180: 1.8; --aox-lh-190: 1.9; --aox-lh-200: 2; } /*** Utilities ***/ :root .has_accents { --aox-lh-50: 1; --aox-lh-60: 1; --aox-lh-70: 1; --aox-lh-80: 1; --aox-lh-90: 1; } small { font-size: 0.85em; } [data-aox-lc] { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; } [data-aox-lc="1"] { -webkit-line-clamp: 1; } [data-aox-lc="2"] { -webkit-line-clamp: 2; } [data-aox-lc="3"] { -webkit-line-clamp: 3; } [data-aox-lc="4"] { -webkit-line-clamp: 4; } [data-aox-lc="5"] { -webkit-line-clamp: 5; } [data-aox-lc="6"] { -webkit-line-clamp: 6; } [data-aox-lc="7"] { -webkit-line-clamp: 7; } [data-aox-lc="8"] { -webkit-line-clamp: 8; } [data-aox-lc="9"] { -webkit-line-clamp: 9; } [data-aox-lc="10"] { -webkit-line-clamp: 10; } /* -------------------------------------------------- */ /* $ > AOX Fluid Core Custom - 01/01/25 /* -------------------------------------------------- */ /* ======================================== */ /* Custom /* ======================================== */ /* -------------------------------------------------- */ /* $ > AOX Fluid Param - v1.3.0 - 26/08/25 /* -------------------------------------------------- */ /* 26/08/25 (FJA) - v1.3.0 - Maj variables 03/04/25 (FJA) - v2.2.0 - Ajout fichier Core / Param / Core custom / Param custom */ /* ======================================== */ /* Param /* ======================================== */ /* 1920 > 1366px(*) => Fixed 1365px > 768px => Fluid 767px > 520px => Fixed 519px > 320px => Fluid (*) 1366px = Content = margin left (45px) + content width (1276px) + margin right (45px) ATTENTION : Recopier l'intégralité des variables si besoin de surcharger pour ne pas perturber les calculs */ :root { --aox-1px: 1px; --aox-grid: var(--aox-1276px); --aox-gutter: var(--aox-20px); --aox-columns: 12; --aox-fs-1rem: 16; --aox-fs-viewport-width: 1366px; --aox-fs-max-width: 1366; --aox-fs-min-width: calc(var(--aox-fs-max-width) * 0.75); } /***/ @media screen and (max-width: 1366px) { :root { --aox-1px: calc(100vw / 1366); --aox-fs-viewport-width: 100vw; } } /***/ @media screen and (max-width: 767px) { :root { --aox-1px: calc(520px / 420); --aox-grid: var(--aox-370px); --aox-gutter: var(--aox-20px); --aox-fs-max-width: 420; --aox-fs-min-width: 320; --aox-fs-viewport-width: 520px; } } /***/ @media screen and (max-width: 520px) { :root { --aox-1px: calc(100vw / 420); --aox-fs-viewport-width: 100vw; } } /* -------------------------------------------------- */ /* $ > AOX Fluid Param Custom /* -------------------------------------------------- */ /* ======================================== */ /* Custom /* ======================================== */ /* 1920 > 1720px(*) => Fixed 1719px > 768px => Fluid 767px > 520px => Fixed 519px > 320px => Fluid (*) 1720px = Content = margin left (100px) + content width (1520x) + margin right (100px) ATTENTION : Recopier l'intégralité des variables si besoin de surcharger pour ne pas perturber les calculs */ :root { --aox-1px: 1px; --aox-grid: var(--aox-1520px); --aox-gutter: var(--aox-40px); --aox-columns: 12; --aox-fs-1rem: 16; --aox-fs-viewport-width: 1720px; --aox-fs-max-width: 1720; --aox-fs-min-width: calc(var(--aox-fs-max-width) * 0.75); } /***/ @media screen and (max-width: 1720px) { :root { --aox-1px: calc(100vw / 1720); --aox-fs-viewport-width: 100vw; } } /***/ @media screen and (max-width: 767px) { :root { --aox-1px: calc(520px / 420); --aox-grid: var(--aox-370px); --aox-gutter: var(--aox-20px); --aox-fs-max-width: 420; --aox-fs-min-width: 320; --aox-fs-viewport-width: 520px; } } /***/ @media screen and (max-width: 520px) { :root { --aox-1px: calc(100vw / 420); --aox-fs-viewport-width: 100vw; } } /* -------------------------------------------------- */ /* $ > AOX Edito Core /* -------------------------------------------------- */ /* v1.4.0 - 03/09/25 03/09/25 (FJA) - v1.4.0 - Modifs structure edito 26/08/25 (FJA) - v1.3.0 - Maj variables 11/06/25 (FJA) - v1.0.1 - Ajout variables */ /* ======================================== */ /* Core /* ======================================== */ /*** section ***/ .obj_aox-edito .obj_edito-section, .obj_aox-edito .obj_edito-section > * + *, .obj_aox-edito .obj_section { margin-top: var(--aox-edito-gap) !important; } .obj_aox-edito .obj_edito-section:last-child, .obj_aox-edito .obj_section:last-child { margin-bottom: var(--aox-edito-gap) !important; } .obj_aox-edito .obj_edito-section.has_background + .obj_edito-section.has_background { margin-top: 0 !important; } .obj_aox-edito .obj_edito-section { width: 100%; max-width: var(--aox-grid); margin: 0 auto; } /*** row ***/ .obj_aox-edito .obj_edito-section .ctn_edito-row { display: flex; flex-direction: row; gap: var(--aox-edito-gap); width: 100%; } .obj_aox-edito .obj_edito-section .ctn_edito-row .ctn_edito-column { width: 100%; } .obj_aox-edito .obj_edito-section .ctn_edito-row .ctn_edito-column > * + * { margin-top: var(--aox-spacing-8) !important; } /*** toggle ***/ .obj_aox-edito .obj_edito-section .ctn_edito-toggle { width: var(--aox-grid); margin: 0 auto; } .obj_aox-edito .obj_edito-section .ctn_edito-toggle .ctn_edito-toggle-content { display: none; padding-top: var(--aox-spacing-8); } .obj_aox-edito .obj_edito-section .ctn_edito-toggle .ctn_edito-toggle-content > * + * { margin-top: var(--aox-spacing-8) !important; } /*** background ***/ .obj_aox-edito .obj_edito-section .ctn_edito-background { margin-top: 0 !important; } .obj_aox-edito .obj_edito-section.has_background { position: relative; overflow: hidden; max-width: calc(var(--aox-edito-section-background-padding) + var(--aox-grid) + var(--aox-edito-section-background-padding)); padding: var(--aox-edito-section-background-padding); } .obj_aox-edito .obj_edito-section.has_background > .ctn_edito-row { position: relative; z-index: 2; } .obj_aox-edito .obj_edito-section.has_background .ctn_background { position: absolute; z-index: 1; top: 0; left: 0; height: 100%; width: 100%; margin: 0 !important; } .obj_aox-edito .obj_edito-section.has_background .ctn_background .obj_color { height: 100%; width: 100%; background-color: var(--aox-edito-section-background-color); } .obj_aox-edito .obj_edito-section.has_background .ctn_background .obj_image, .obj_aox-edito .obj_edito-section.has_background .ctn_background .obj_image .ctn_image { height: 100%; width: 100%; } .obj_aox-edito .obj_edito-section.has_background .ctn_background .obj_image .ctn_image img { display: block; height: 100%; width: 100%; object-fit: cover; object-position: center center; } .obj_aox-edito .obj_edito-section.has_background .ctn_background .obj_video { height: 100%; width: 100%; } .obj_aox-edito .obj_edito-section.has_background .ctn_background .obj_video .ctn_video { display: block; height: 100%; width: 100%; object-fit: cover; object-position: center center; } /*** width-extended ***/ .obj_aox-edito .obj_edito-section.has_width-extended { max-width: 100%; padding: var(--aox-edito-section-background-padding) 0; } .obj_aox-edito .obj_edito-section.has_width-extended > .ctn_edito-row { width: var(--aox-grid); margin: 0 auto; } /*** width-full ***/ .obj_aox-edito .obj_edito-section.has_width-full { max-width: 100%; padding: var(--aox-edito-section-background-padding); } .obj_aox-edito .obj_edito-section.has_width-full > .ctn_edito-row { width: 100%; margin: 0 auto; } /*** edito-paragraph ***/ .obj_aox-edito .obj_edito-paragraph .ctn_content .ctn_paragraph { padding-right: var(--aox-gutter); } .obj_aox-edito .obj_edito-paragraph .obj_image { position: relative; overflow: hidden; display: block; height: auto; width: 100%; } .obj_aox-edito .obj_edito-paragraph .obj_image .ctn_image { height: 100%; width: 100%; } .obj_aox-edito .obj_edito-paragraph .obj_image .ctn_image img { display: block; height: 100%; width: 100%; object-fit: cover; object-position: center center; } /*** edito-paragraph_hero ***/ .obj_aox-edito .obj_edito-paragraph.edito-paragraph_hero { background: var(--aox-color-grey-500); } .obj_aox-edito .obj_edito-paragraph.edito-paragraph_hero .ctn_edito-paragraph { padding: var(--aox-spacing-6); text-align: center; } /*** edito-paragraph_text-media ***/ .obj_aox-edito .obj_edito-paragraph.edito-paragraph_text-media .ctn_edito-paragraph { display: flex; flex-direction: row; align-items: var(--aox-edito-paragraph-align-items); gap: var(--aox-edito-paragraph-gap); margin: 0 auto; width: 100%; } .obj_aox-edito .obj_edito-paragraph.edito-paragraph_text-media .ctn_content { width: var(--aox-edito-paragraph-content-width); } .obj_aox-edito .obj_edito-paragraph.edito-paragraph_text-media .ctn_media { width: var(--aox-edito-paragraph-media-width); } .obj_aox-edito .obj_edito-paragraph.edito-paragraph_text-media.has_media-left .ctn_edito-paragraph { flex-direction: row-reverse; } .obj_aox-edito .obj_edito-paragraph.edito-paragraph_text-media.has_media-top .ctn_edito-paragraph { flex-direction: column-reverse; align-items: flex-start; gap: var(--aox-gutter); } .obj_aox-edito .obj_edito-paragraph.edito-paragraph_text-media.has_media-top .ctn_media { width: 100%; } .obj_aox-edito .obj_edito-paragraph.edito-paragraph_text-media.has_media-bottom .ctn_edito-paragraph { flex-direction: column; align-items: flex-start; gap: var(--aox-gutter); } .obj_aox-edito .obj_edito-paragraph.edito-paragraph_text-media.has_media-bottom .ctn_media { width: 100%; } @media screen and (max-width: 767px) { .obj_aox-edito .obj_edito-paragraph.edito-paragraph_text-media .ctn_edito-paragraph { flex-direction: column; align-items: flex-start; gap: var(--aox-edito-paragraph-gap); } .obj_aox-edito .obj_edito-paragraph.edito-paragraph_text-media .ctn_content { width: 100%; } .obj_aox-edito .obj_edito-paragraph.edito-paragraph_text-media .ctn_media { width: 100%; } .obj_aox-edito .obj_edito-paragraph.edito-paragraph_text-media.has_media-left .ctn_edito-paragraph { flex-direction: column; } .obj_aox-edito .obj_edito-paragraph.edito-paragraph_text-media.has_media-top .ctn_edito-paragraph, .obj_aox-edito .obj_edito-paragraph.edito-paragraph_text-media.has_media-bottom .ctn_edito-paragraph { flex-direction: column; align-items: flex-start; gap: var(--aox-gutter); } } /* -------------------------------------------------- */ /* $ > AOX Edito Core Custom - 01/01/25 /* -------------------------------------------------- */ /* ======================================== */ /* Custom /* ======================================== */ /*** edito-paragraph_text ***/ .obj_aox-edito .obj_edito-paragraph.edito-paragraph_text { padding-left: var(--aox-col-gutter); } .obj_aox-edito .obj_edito-paragraph.edito-paragraph_text .ctn_text { width: var(--aox-col-8); } /*** edito-paragraph_text-media ***/ .obj_aox-edito .obj_edito-paragraph.edito-paragraph_text-media { padding-left: var(--aox-col-gutter); } .obj_aox-edito .obj_edito-paragraph.edito-paragraph_text-media.has_media-left { padding-left: 0; padding-right: var(--aox-col-gutter); } .obj_aox-edito .obj_edito-paragraph.edito-paragraph_text-media.has_media-top .ctn_text, .obj_aox-edito .obj_edito-paragraph.edito-paragraph_text-media.has_media-bottom .ctn_text { width: var(--aox-col-8); } /*** edito-paragraph ***/ .obj_aox-edito .obj_edito-paragraph .obj_image .ctn_image img { height: auto; } /***/ @media screen and (max-width: 767px) { /*** edito-paragraph_text ***/ .obj_aox-edito .obj_edito-paragraph.edito-paragraph_text { padding-left: 0; } .obj_aox-edito .obj_edito-paragraph.edito-paragraph_text .ctn_text { width: 100%; } /*** edito-paragraph_text-media ***/ .obj_aox-edito .obj_edito-paragraph.edito-paragraph_text-media { padding-left: 0; } .obj_aox-edito .obj_edito-paragraph.edito-paragraph_text-media.has_media-left { padding-left: 0; padding-right: 0; } .obj_aox-edito .obj_edito-paragraph.edito-paragraph_text-media.has_media-top .ctn_text, .obj_aox-edito .obj_edito-paragraph.edito-paragraph_text-media.has_media-bottom .ctn_text { width: 100%; } } /* -------------------------------------------------- */ /* $ > AOX Edito Param /* -------------------------------------------------- */ /* v1.4.0 - 03/09/25 03/09/25 (FJA) - v1.4.0 - Modifs structure edito 26/08/25 (FJA) - v1.3.0 - Maj variables 11/06/25 (FJA) - v1.0.1 - Ajout variables */ /* ======================================== */ /* Param /* ======================================== */ .obj_aox-edito { --aox-edito-width: var(--aox-grid); --aox-edito-gap: var(--aox-col-1-gutter); --aox-edito-section-background-color: var(--aox-color-grey); --aox-edito-section-background-padding: var(--aox-col); --aox-edito-paragraph-align-items: flex-start; --aox-edito-paragraph-gap: var(--aox-gutter); --aox-edito-paragraph-media-width: var(--aox-col-6); --aox-edito-paragraph-content-width: var(--aox-col-6); } /***/ @media screen and (max-width: 767px) { .obj_aox-edito { --aox-edito-gap: var(--aox-80px); } } /* -------------------------------------------------- */ /* $ > AOX Edito Param Custom - 11/08/25 /* -------------------------------------------------- */ /* ======================================== */ /* Custom /* ======================================== */ .obj_aox-edito { --aox-edito-gap: var(--aox-col-1-gutter); --aox-edito-section-background-color: #DFEEFE; --aox-edito-paragraph-align-items: center; --aox-edito-paragraph-gap: var(--aox-col-1); --aox-edito-paragraph-media-width: var(--aox-col-5-gutter); --aox-edito-paragraph-text-width: var(--aox-col-5-gutter); } @media screen and (max-width: 767px) { .obj_aox-edito { --aox-edito-gap: var(--aox-80px); --aox-edito-paragraph-gap: var(--aox-spacing-xl); } } /* -------------------------------------------------- */ /* $ > AOX Form Core /* -------------------------------------------------- */ /* v1.4.2 - 23/10/25 23/10/25 (FJA) - v1.4.2 - Modifs ctn_pattern + ajout variables 14/10/25 (KLF) - v1.4.1 - Modifs obj_aox-single 03/09/25 (FJA) - v1.4.0 - Modifs structure edito 26/08/25 (FJA) - v1.3.0 - Maj variables 11/06/25 (FJA) - v1.0.1 - Ajout variables */ /* ======================================== */ /* .obj_aox-form /* ======================================== */ .obj_aox-form .ctn_aox-form > * + * { margin-top: var(--aox-form-gap-3xl); } /***/ .obj_aox-form .ctn_error p { font-size: var(--aox-font-size-small); color: var(--aox-color-error); } .obj_aox-form .ctn_legal p { font-size: var(--aox-font-size-small); color: var(--aox-color-grey-500); } /* ======================================== */ /* obj_form-hero /* ======================================== */ .obj_aox-form .obj_form-hero { margin-left: auto; margin-right: auto; width: 100%; max-width: var(--aox-form-width); text-align: center; } .obj_aox-form .obj_form-hero .ctn_form-hero { display: flex; flex-direction: column; justify-content: center; } .obj_aox-form .obj_form-hero .ctn_form-hero > * + * { margin-top: var(--aox-form-gap-xl); } .obj_aox-form .obj_form-hero .ctn_logo { display: block; } .obj_aox-form .obj_form-hero .ctn_logo img { height: 100%; width: 100%; object-fit: contain; object-position: center center; } .obj_aox-form .obj_form-hero .ctn_image { display: block; height: auto; width: 100%; } .obj_aox-form .obj_form-hero .ctn_image img { height: 100%; width: 100%; object-fit: contain; object-position: center center; } /***/ .obj_aox-form .obj_form-hero.has_full-width { max-width: 100%; } .obj_aox-form .obj_form-hero.has_background { padding: var(--aox-form-gap-3xl); background: #F5F5F5; } .obj_aox-form .obj_form-hero.has_background-image { position: relative; overflow: hidden; padding: 0 var(--aox-form-gap-3xl); background: #F5F5F5; } .obj_aox-form .obj_form-hero.has_background-image .ctn_form-hero { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: var(--aox-520px); width: 100%; max-width: var(--aox-form-width); margin: 0 auto; padding: var(--aox-form-gap-3xl) 0; } .obj_aox-form .obj_form-hero.has_background-image .ctn_background { position: absolute; z-index: 1; top: 0; left: 0; height: 100%; width: 100%; } .obj_aox-form .obj_form-hero.has_background-image .ctn_background img { object-fit: cover; object-position: center center; height: 100%; width: 100%; } /* ======================================== */ /* obj_form-edito /* ======================================== */ .obj_aox-form .obj_form-edito { margin-left: auto; margin-right: auto; width: 100%; max-width: var(--aox-form-width); text-align: left; } .obj_aox-form .obj_form-edito .ctn_form-edito { display: flex; flex-direction: column; align-items: flex-start; } .obj_aox-form .obj_form-edito .ctn_form-edito > * + * { margin-top: var(--aox-form-gap-xl); } .obj_aox-form .obj_form-edito .ctn_logo { display: block; } .obj_aox-form .obj_form-edito .ctn_logo img { height: 100%; width: 100%; object-fit: contain; object-position: center center; } .obj_aox-form .obj_form-edito .ctn_image { display: block; height: auto; width: 100%; } .obj_aox-form .obj_form-edito .ctn_image img { height: 100%; width: 100%; object-fit: contain; object-position: center center; } /***/ .obj_aox-form .obj_form-edito.has_text-center { text-align: center; } .obj_aox-form .obj_form-edito.has_text-center .ctn_form-edito { align-items: center; } .obj_aox-form .obj_form-edito.has_text-center .ctn_form-edito .ctn_text-button{ justify-content: center; } .obj_aox-form .obj_form-edito.has_text-right { text-align: right; } .obj_aox-form .obj_form-edito.has_text-right .ctn_form-edito { align-items: flex-end; } /***/ .obj_aox-form .obj_form-edito.edito-footer { position: relative; margin-top: var(--aox-spacing-m); } .obj_aox-form .obj_form-edito.edito-footer .ctn_form-edito { padding: var(--aox-24px) 0 0; } .obj_aox-form .obj_form-edito.edito-footer .ctn_form-edito::before { position: absolute; content: ""; transform: translateX(-50%); left: 50%; top: 0; display: inline-block; height: 1px; width: 20%; background: var(--aox-color-grey-200); } /* ======================================== */ /* obj_form /* ======================================== */ .obj_aox-form .obj_form { margin-left: auto; margin-right: auto; width: 100%; max-width: var(--aox-form-width); text-align: left; } .obj_aox-form .obj_form + .obj_form { margin-top: var(--aox-form-gap-3xl); } .obj_aox-form .obj_form .ctn_form > * + * { margin-top: var(--aox-form-gap-3xl); } /***/ .obj_aox-form .obj_form-content .ctn_form-content > * + * { margin-top: var(--aox-form-gap-3xl); } /***/ .obj_aox-form .obj_form-fieldset { display: flex; flex-direction: row; gap: var(--aox-form-gap-xl); } .obj_aox-form .obj_form-fieldset .ctn_form-fieldset { width: 100%; } .obj_aox-form .obj_form-fieldset .ctn_form-fieldset > * + * { margin-top: var(--aox-form-gap-xl); } @media screen and (max-width: 767px) { .obj_aox-form .obj_form-fieldset { flex-direction: column; } } /***/ .obj_aox-form .obj_form-element .ctn_form-element { position: relative; display: flex; flex-direction: column; gap: var(--aox-form-gap-m); } .obj_aox-form .obj_form-element.form-element_inline .ctn_form-element { display: flex; flex-direction: row; align-items: center; } .obj_aox-form .obj_form-element.form-element_inline .ctn_label { min-width: 30%; width: 30%; } .obj_aox-form .obj_form-element.form-element_inline .ctn_element { width: 100%; } .obj_aox-form .obj_form-element.form-element_justify .ctn_form-element { display: flex; flex-direction: row; } .obj_aox-form .obj_form-element.form-element_justify .ctn_label { min-width: 30%; width: 30%; } .obj_aox-form .obj_form-element.form-element_justify .ctn_element { width: auto; margin-left: auto; } @media screen and (max-width: 767px) { .obj_aox-form .obj_form-element.form-element_inline .ctn_form-element { flex-direction: column; align-items: center; } .obj_aox-form .obj_form-element.form-element_inline .ctn_label { min-width: 100%; width: 100%; } .obj_aox-form .obj_form-element.form-element_justify .ctn_form-element { flex-direction: column; } .obj_aox-form .obj_form-element.form-element_justify .ctn_label { min-width: 100%; width: 100%; } .obj_aox-form .obj_form-element.form-element_justify .ctn_form-element { width: 100%; margin-left: 0; } } /***/ .obj_aox-form .obj_form-group .ctn_label, .obj_aox-form .obj_form-table .ctn_label, .obj_aox-form .obj_form-element .ctn_label { display: flex; flex-direction: column; gap: var(--aox-form-gap-s); } .obj_aox-form .obj_form-group .ctn_label .t_label, .obj_aox-form .obj_form-table .ctn_label .t_label, .obj_aox-form .obj_form-element .ctn_label .t_label { font-family: var(--aox-form-label-font-family); font-weight: var(--aox-form-label-font-weight); font-size: var(--aox-form-label-font-size); line-height: var(--aox-form-label-line-height); color: var(--aox-form-label-color); } .obj_aox-form .obj_form-group .ctn_label .t_help, .obj_aox-form .obj_form-table .ctn_label .t_help, .obj_aox-form .obj_form-element .ctn_label .t_help { font-family: var(--aox-form-help-font-family); font-weight: var(--aox-form-help-font-weight); font-size: var(--aox-form-help-font-size); line-height: var(--aox-form-help-line-height); color: var(--aox-form-help-color); } .obj_aox-form .obj_form-group .ctn_element > * + *, .obj_aox-form .obj_form-table .ctn_element > * + *, .obj_aox-form .obj_form-element .ctn_element > * + * { margin-top: var(--aox-form-gap-s); } .obj_aox-form .obj_form-row { display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--aox-form-gap-s); } .obj_aox-form .obj_form-row .ctn_form-row { width: 100%; } .obj_aox-form .obj_form-row.has_space-between .ctn_form-row:last-child { text-align: right; } .obj_aox-form .obj_form-table .ctn_form-table { display: flex; flex-direction: column; gap: var(--aox-form-gap-s); } .obj_aox-form .obj_form-table .ctn_table { display: flex; flex-direction: column; gap: var(--aox-form-gap-s); } .obj_aox-form .obj_form-table .ctn_table > * + * { padding-top: var(--aox-form-gap-s); border-top: solid 1px var(--aox-form-item-border-color); } .obj_aox-form .obj_form-table .ctn_table .ctn_label .t_label { font-size: var(--aox-form-table-label-font-size); } .obj_aox-form .obj_form-table .ctn_table .obj_radios, .obj_aox-form .obj_form-table .ctn_table .obj_checkboxes { gap: var(--aox-form-gap-s); } .obj_aox-form .obj_form-table .ctn_table .obj_radio, .obj_aox-form .obj_form-table .ctn_table .obj_checkbox { width: 100%; } .obj_aox-form .obj_form-table .ctn_table .obj_radio label, .obj_aox-form .obj_form-table .ctn_table .obj_checkbox label { font-size: var(--aox-form-table-item-font-size); } .obj_aox-form .obj_form-group .ctn_form-group { display: flex; flex-direction: column; gap: var(--aox-form-gap-s); } .obj_aox-form .obj_form-group .ctn_group { display: flex; flex-direction: column; gap: var(--aox-form-gap-s); } .obj_aox-form .obj_form-group .ctn_group .ctn_label .t_label { font-size: var(--aox-form-table-item-font-size); } /* ======================================== */ /* obj_form-loader /* ======================================== */ .obj_aox-form .obj_form-loader { height: var(--aox-form-loader-size); width: var(--aox-form-loader-size); border-radius: var(--aox-form-loader-size); border: var(--aox-form-loader-border-size) solid #999999; border-top-color: #333333; animation: loader-rotate-animation 1.5s infinite linear; } @keyframes loader-rotate-animation { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } } /* ======================================== */ /* obj_input /* ======================================== */ .obj_aox-form .obj_input { width: 100%; } .obj_aox-form .obj_input > input { display: block; height: auto; margin: 0; width: 100%; padding: var(--aox-form-item-padding); font-weight: var(--aox-form-item-font-weight); font-family: var(--aox-form-item-font-family); font-size: var(--aox-form-item-font-size); line-height: var(--aox-form-item-line-height); color: var(--aox-form-item-color); border-radius: var(--aox-form-item-border-radius); border: solid var(--aox-form-item-border-size) var(--aox-form-item-border-color); background-color: var(--aox-form-item-background-color); outline: none; } .obj_aox-form .obj_input > input::placeholder { opacity: 0.5; color: inherit; } /***/ .obj_aox-form .obj_input.has_input-icon{ position: relative; } .obj_aox-form .obj_input.has_input-icon input { padding-left: var(--aox-icon-input-padding); } .obj_aox-form .obj_input[class*=" aox_icon-"]:before, .obj_aox-form .obj_input[class^=aox_icon-]:before { background-color: var(--aox-icon-input-color); bottom: calc(var(--aox-form-item-padding) / 2); margin: auto; pointer-events: none; position: absolute; left: var(--aox-form-item-padding); top: calc(var(--aox-form-item-padding) / 2); } /* ======================================== */ /* obj_input input_authentication /* ======================================== */ .obj_aox-form .input_authentication { position: relative; } .obj_aox-form .input_authentication .ctn_label .t_help button { color: var(--aox-color-primary); } .obj_aox-form .input_authentication > input { padding-right: calc(var(--aox-form-item-padding) + var(--aox-32px) + var(--aox-form-item-padding)); } .obj_aox-form .input_authentication .ctn_icon { position: absolute; top: 50%; right: var(--aox-form-item-padding); width: var(--aox-32px); transform: translateY(-50%); } .obj_aox-form .input_authentication .ctn_icon svg { display: block; } /* ======================================== */ /* obj_textarea /* ======================================== */ .obj_aox-form .obj_textarea { width: 100%; } .obj_aox-form .obj_textarea > textarea { display: block; min-height: var(--aox-120px); height: auto; width: 100%; margin: 0; padding: var(--aox-form-item-padding); font-weight: var(--aox-form-item-font-weight); font-family: var(--aox-form-item-font-family); font-size: var(--aox-form-item-font-size); line-height: var(--aox-form-item-line-height); color: var(--aox-form-item-color); border-radius: var(--aox-form-item-border-radius); border: solid var(--aox-form-item-border-size) var(--aox-form-item-border-color); background-color: var(--aox-form-item-background-color); outline: none; } .obj_aox-form .obj_textarea > textarea::placeholder { opacity: 0.5; color: inherit; } /* ======================================== */ /* obj_select /* ======================================== */ .obj_aox-form .obj_select { width: 100%; } .obj_aox-form .obj_select > select { display: block; height: auto; width: 100%; margin: 0; padding: var(--aox-form-item-padding); font-weight: var(--aox-form-item-font-weight); font-family: var(--aox-form-item-font-family); font-size: var(--aox-form-item-font-size); line-height: var(--aox-form-item-line-height); color: var(--aox-form-item-color); border-radius: var(--aox-form-item-border-radius); border: solid var(--aox-form-item-border-size) var(--aox-form-item-border-color); background-color: var(--aox-form-item-background-color); outline: none; cursor: pointer; } /* ======================================== */ /* obj_checkboxes /* ======================================== */ .obj_aox-form .obj_checkboxes { display: flex; flex-direction: column; gap: var(--aox-form-gap-m) var(--aox-form-gap-xl); } .obj_aox-form .obj_checkbox { position: relative; display: flex; flex-direction: column; gap: var(--aox-form-gap-m) var(--aox-form-gap-xl); min-height: var(--aox-form-checkbox-size); } .obj_aox-form .obj_checkbox > input { position: absolute; top: 0; left: 0; height: 1px; width: 1px; margin: 0; opacity: 0; } .obj_aox-form .obj_checkbox > label { position: relative; display: block; min-height: var(--aox-form-checkbox-size); min-width: var(--aox-form-checkbox-size); padding-left: calc(var(--aox-form-checkbox-size) + var(--aox-form-gap-m)); font-weight: var(--aox-form-item-font-weight); font-family: var(--aox-form-item-font-family); font-size: var(--aox-form-item-font-size); line-height: var(--aox-form-checkbox-size); color: var(--aox-form-item-color); cursor: pointer; } .obj_aox-form .obj_checkbox > label::before { content: ""; box-sizing: border-box; position: absolute; top: 0; left: 0; display: block; height: var(--aox-form-checkbox-size); width: var(--aox-form-checkbox-size); border: solid var(--aox-form-item-border-size) var(--aox-form-item-border-color); background-color: var(--aox-form-item-background-color); } .obj_aox-form .obj_checkbox > label::after { opacity: 0; content: ""; box-sizing: border-box; position: absolute; top: calc(var(--aox-form-item-border-size) + var(--aox-3px)); left: calc(var(--aox-form-item-border-size) + var(--aox-3px)); display: block; height: calc(var(--aox-form-checkbox-size) - (var(--aox-form-item-border-size) * 2) - var(--aox-6px)); width: calc(var(--aox-form-checkbox-size) - (var(--aox-form-item-border-size) * 2) - var(--aox-6px)); background-color: var(--aox-color-primary); transition: all ease 400ms; } .obj_aox-form .obj_checkbox > label:hover::after, .obj_aox-form .obj_checkbox > input:checked + label::after { opacity: 1; } /***/ .obj_aox-form .obj_checkboxes.checkboxes_inline { flex-direction: row; } @media screen and (max-width: 767px) { .obj_aox-form .obj_checkboxes.checkboxes_inline { flex-direction: column; } } /***/ .obj_aox-form .obj_checkboxes.checkboxes_inline { flex-direction: row; } .obj_aox-form .obj_checkbox.checkbox_only > label { padding-left: 0; } @media screen and (max-width: 767px) { .obj_aox-form .obj_checkboxes.checkboxes_inline { flex-direction: column; } } /* ======================================== */ /* obj_radios /* ======================================== */ .obj_aox-form .obj_radios { display: flex; flex-direction: column; gap: var(--aox-form-gap-m) var(--aox-form-gap-xl); } .obj_aox-form .obj_radio { position: relative; display: flex; flex-direction: column; gap: var(--aox-form-gap-m) var(--aox-form-gap-xl); min-height: var(--aox-form-radio-size); } .obj_aox-form .obj_radio > input { position: absolute; top: 0; left: 0; height: 1px; width: 1px; margin: 0; opacity: 0; } .obj_aox-form .obj_radio > label { position: relative; display: block; min-height: var(--aox-form-radio-size); min-width: var(--aox-form-radio-size); padding-left: calc(var(--aox-form-radio-size) + var(--aox-form-gap-m)); font-weight: var(--aox-form-item-font-weight); font-family: var(--aox-form-item-font-family); font-size: var(--aox-form-item-font-size); line-height: var(--aox-form-radio-size); color: var(--aox-form-item-color); cursor: pointer; } .obj_aox-form .obj_radio > label::before { content: ""; box-sizing: border-box; position: absolute; top: 0; left: 0; display: block; height: var(--aox-form-radio-size); width: var(--aox-form-radio-size); border: solid var(--aox-form-item-border-size) var(--aox-form-item-border-color); border-radius: 50%; background-color: var(--aox-form-item-background-color); } .obj_aox-form .obj_radio > label::after { opacity: 0; content: ""; box-sizing: border-box; position: absolute; top: calc(var(--aox-form-item-border-size) + var(--aox-3px)); left: calc(var(--aox-form-item-border-size) + var(--aox-3px)); display: block; height: calc(var(--aox-form-radio-size) - (var(--aox-form-item-border-size) * 2) - var(--aox-6px)); width: calc(var(--aox-form-radio-size) - (var(--aox-form-item-border-size) * 2) - var(--aox-6px)); border-radius: 50%; background-color: var(--aox-color-primary); transition: all ease 400ms; } .obj_aox-form .obj_radio > label:hover::after, .obj_aox-form .obj_radio > input:checked + label::after { opacity: 1; } /***/ .obj_aox-form .obj_radios.radios_inline { flex-direction: row; } .obj_aox-form .obj_radio.radio_only > label { padding-left: 0; } @media screen and (max-width: 767px) { .obj_aox-form .obj_radios.radios_inline { flex-direction: column; } } /* ======================================== */ /* obj_feedbacks /* ======================================== */ .obj_aox-form .obj_feedbacks { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--aox-form-gap-m); width: 100%; max-width: var(--aox-460px); } .obj_aox-form .obj_feedbacks .t_scale { display: flex; flex-direction: row; justify-content: space-between; opacity: 0.5; width: 100%; font-size: var(--aox-font-size-small); } .obj_aox-form .obj_feedback { position: relative; width: calc((100% - (var(--aox-form-gap-m) * 4)) / 5); } .obj_aox-form .obj_feedback > input { position: absolute; top: 0; left: 0; height: 1px; width: 1px; margin: 0; opacity: 0; } .obj_aox-form .obj_feedback > label { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; height: 0; width: 100%; padding-top: 100%; border: solid 2px transparent; border-radius: var(--aox-12px); background-color: #F7F7F7; cursor: pointer; transition: all ease 400ms; } .obj_aox-form .obj_feedback > label img, .obj_aox-form .obj_feedback > label svg { position: absolute; z-index: 2; top: 50%; left: 50%; height: 50%; width: 50%; transform: translate(-50%, -50%); } .obj_aox-form .obj_feedback > label::before { opacity: 0; content: ""; position: absolute; top: 0; left: 0; display: block; height: 100%; width: 100%; background-color: var(--aox-color-primary); } .obj_aox-form .obj_feedback > label:hover, .obj_aox-form .obj_feedback > input:checked + label { border-color: var(--aox-color-primary); background-color: #FFFFFF; } .obj_aox-form .obj_feedback > label:hover::before, .obj_aox-form .obj_feedback > input:checked + label::before { opacity: 0.2; } /* ======================================== */ /* obj_ratings /* ======================================== */ .obj_aox-form .obj_ratings { position: relative; display: flex; flex-direction: row-reverse; justify-content: flex-end; min-height: var(--aox-form-rating-size); } .obj_aox-form .obj_ratings > input { position: absolute; top: 0; left: 0; height: 1px; width: 1px; margin: 0; opacity: 0; } .obj_aox-form .obj_ratings > label { position: relative; padding-left: calc(var(--aox-form-rating-size) + var(--aox-form-gap-m)); color: var(--aox-color-primary); cursor: pointer; border-radius: 50%; } .obj_aox-form .obj_ratings > label svg { box-sizing: border-box; position: absolute; top: 0; left: 0; display: block; height: var(--aox-form-rating-size); width: var(--aox-form-rating-size); fill: var(--aox-form-item-background-color); stroke: var(--aox-form-item-border-color); stroke-width: var(--aox-form-item-border-size); transition: all ease 400ms; } .obj_aox-form .obj_ratings > label:hover svg, .obj_aox-form .obj_ratings > label:hover ~ label svg, .obj_aox-form .obj_ratings > input:checked ~ label svg { fill: var(--aox-color-primary); stroke: var(--aox-color-primary); } /* ======================================== */ /* ctn_pattern /* ======================================== */ .obj_aox-form .ctn_pattern { position: relative; width: 100%; } /***/ .obj_aox-form .ctn_pattern .obj_button.button_switch { z-index: 2; position: absolute; top: calc(var(--aox-65px) * -1); right: var(--aox-form-item-padding); height: var(--aox-30px); width: var(--aox-30px); padding: 0; margin: 0; background: transparent; } .obj_aox-form .ctn_pattern .obj_button.button_switch::after { z-index: 2; content: ""; position: absolute; top: 50%; left: 50%; display: block; height: var(--aox-2px); width: var(--aox-30px); background: var(--aox-color-grey-500); transform: translate(-50%, -50%) rotate(45deg); transition: all ease 400ms; } .obj_aox-form .ctn_pattern .obj_button.button_switch svg { position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%); fill: var(--aox-color-grey-500); } .obj_aox-form .ctn_pattern .obj_button.button_switch.is_visible::after { opacity: 0; } /***/ .obj_aox-form .ctn_pattern .ctn_progress { position: relative; overflow: hidden; display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: 0; padding-right: calc(var(--aox-20px) + var(--aox-form-gap-m)); transition: height 0.4s ease; } .obj_aox-form .ctn_pattern .ctn_progress.is_visible { height: var(--aox-20px); } .obj_aox-form .ctn_pattern .obj_progress { height: var(--aox-4px); width: 33%; border-radius: var(--aox-2px); background: var(--aox-color-error); transition: width 0.4s ease; } .obj_aox-form .ctn_pattern .obj_progress[data-step="ko"] { width: 66%; background: var(--aox-color-warning); } .obj_aox-form .ctn_pattern .obj_progress[data-step="ok"] { width: 100%; background: var(--aox-color-valid); } .obj_aox-form .ctn_pattern .obj_button.button_info { position: absolute; top: 0; right: 0; display: block; height: var(--aox-20px); width: var(--aox-20px); margin: 0; padding: 0; border: none; border-radius: 50%; background-color: var(--aox-color-grey-500); cursor: pointer; } .obj_aox-form .ctn_pattern .obj_button.button_info::after { z-index: 2; content: "?"; position: absolute; height: var(--aox-20px); width: 20px; top: 0; left: 0; font-weight: 700; font-size: var(--aox-12px); line-height: var(--aox-20px); text-align: center; color: var(--aox-color-white); } /***/ .obj_aox-form .ctn_pattern .ctn_infos { overflow: hidden; max-height: 0px; transition: max-height 0.4s ease; } .obj_aox-form .ctn_pattern .ctn_infos.is_visible { max-height: 500px; } .obj_aox-form .ctn_pattern .ctn_infos ul, .obj_aox-form .ctn_pattern .ctn_infos ul li { font-size: var(--aox-font-size-small); line-height: var(--aox-line-height); } .obj_aox-form .ctn_pattern .ctn_infos ul .error { color: var(--aox-color-error); } .obj_aox-form .ctn_pattern .ctn_infos ul .valid { color: var(--aox-color-valid); } /* ======================================== */ /* has_error /* ======================================== */ .obj_aox-form .obj_form .has_error .obj_input > input, .obj_aox-form .obj_form .has_error .obj_textarea > textarea, .obj_aox-form .obj_form .has_error .obj_select > select, .obj_aox-form .obj_form .has_error .obj_checkboxes .obj_checkbox > label::before, .obj_aox-form .obj_form .has_error .obj_radios .obj_radio > label::before { border: solid var(--aox-form-item-border-size-error) var(--aox-color-error); } .obj_aox-form .obj_form .has_error .obj_feedbacks .obj_feedback > label { border: solid 2px var(--aox-color-error); } .obj_aox-form .obj_form .has_error .obj_ratings > label svg { stroke: var(--aox-color-error); } /* ======================================== */ /* obj_authentication /* ======================================== */ .obj_aox-form .obj_authentication { position: absolute; z-index: 99; top: 0; left: calc(100% + var(--aox-32px)); display: flex; flex-direction: row; gap: var(--aox-32px); padding: var(--aox-64px) var(--aox-32px); width: 100%; max-width: var(--aox-400px); color: #fff; border-radius: var(--aox-4px); background: #2a2d33; box-sizing: border-box; } .obj_aox-form .obj_authentication:before { content: ""; position: absolute; top: var(--aox-16px); right: 100%; display: block; height: 0; width: 0; border-style: solid; border-width: var(--aox-8px) var(--aox-8px) var(--aox-8px) 0; border-color: transparent #2a2d33 transparent transparent; } .obj_aox-form .obj_authentication .button_close { position: absolute; height: var(--aox-50px); width: var(--aox-50px); top: 0; right: 0; background: transparent; } .obj_aox-form .obj_authentication .button_close::before, .obj_aox-form .obj_authentication .button_close::after { content: ""; position: absolute; top: 50%; left: 50%; display: block; transform: rotate(45deg); background: #87888c; } .obj_aox-form .obj_authentication .button_close::before { height: 2px; width: 20px; margin: -1px 0 0 -10px; } .obj_aox-form .obj_authentication .button_close::after { height: 20px; width: 2px; margin: -10px 0 0 -1px; } .obj_aox-form .obj_authentication .ctn_nav { display: flex; flex-direction: column; gap: var(--aox-16px); margin: 0; padding: 0; } .obj_aox-form .obj_authentication .ctn_nav li { font-size: var(--aox-font-size-small); color: #787e8e; } .obj_aox-form .obj_authentication .ctn_nav .active { color: #fff; } .obj_aox-form .obj_authentication .ctn_steps { position: relative; } .obj_aox-form .obj_authentication .ctn_step > * + * { margin-top : var(--aox-form-gap-m); } .obj_aox-form .obj_authentication .ctn_step .t_title { font-size: var(--aox-fs-12px); text-transform: uppercase; } .obj_aox-form .obj_authentication .ctn_step p { font-size: var(--aox-fs-14px); line-height: var(--aox-lh-140); } .obj_aox-form .obj_authentication .ctn_step .ctn_image { overflow: hidden; display: block; height: auto; width: var(--aox-135px); border-radius: var(--aox-8px); background-color: white; } .obj_aox-form .obj_authentication .ctn_step .ctn_image.image_store { height: var(--aox-96px); width: var(--aox-96px); padding: var(--aox-16px); } .obj_aox-form .obj_authentication .ctn_step .ctn_image img, .obj_aox-form .obj_authentication .ctn_step .ctn_image svg { display: block; height: 100%; width: 100%; object-fit: contain; object-position: center center; } .obj_aox-form .obj_authentication .ctn_step .ctn_button { margin-top: var(--aox-form-gap-xl); } .obj_aox-form .obj_authentication .ctn_step .ctn_button .button_default-form { color: white; border-color: white; } .obj_aox-form .obj_authentication .ctn_step .t_documentation { opacity: 0.5; font-size: var(--aox-font-size-small); } .obj_aox-form .obj_authentication .ctn_step .t_documentation a { color: inherit; } /***/ @media screen and (max-width: 767px) { .obj_aox-form .obj_authentication { position: relative; left: auto; max-width: var(--aox-grid); } .obj_aox-form .obj_authentication:before { content: ""; position: absolute; top: auto; bottom: 100%; left: var(--aox-16px); right: auto; border-width: 0 var(--aox-8px) var(--aox-8px) var(--aox-8px); border-color: transparent transparent #2a2d33 transparent; } } /* -------------------------------------------------- */ /* $ > AOX Form Core Custom - 01/01/25 /* -------------------------------------------------- */ /* ======================================== */ /* Custom /* ======================================== */ .obj_aox-form .obj_form-edito .t_title { font-weight: 400; font-size: var(--aox-fs-20px); text-transform: inherit; } .obj_aox-form .obj_form-edito .t_help { font-family: var(--aox-form-help-font-family); font-weight: var(--aox-form-help-font-weight); font-size: var(--aox-form-help-font-size); line-height: var(--aox-form-help-line-height); color: var(--aox-form-help-color); } /***/ .obj_aox-form input:read-only, .obj_aox-form textarea:read-only { opacity: 0.5; } /***/ .obj_aox-form .obj_form-content .t_forgot { margin-top: var(--aox-spacing-s); font-weight: 600; font-size: var(--aox-fs-12px); color: var(--aox-color-primary-900); text-transform: uppercase; text-align: right; } /*** checkbox_option ***/ .obj_aox-form .obj_checkbox.checkbox_option label:hover .ctn_option, .obj_aox-form .obj_checkbox.checkbox_option input:checked + label .ctn_option { border-color: var(--aox-color-primary-900); } .obj_aox-form .obj_checkbox.checkbox_option label { padding: 0; } .obj_aox-form .obj_checkbox.checkbox_option label::before { content: none; } .obj_aox-form .obj_checkbox.checkbox_option label::after { position: absolute; top: calc(var(--aox-10px) * -1); left: auto; right: calc(var(--aox-10px) * -1); height: var(--aox-32px); width: var(--aox-32px); border-radius: 100%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='12' viewBox='0 0 17 12' fill='none'%3E%3Cpath d='M6.76224 8.03857L2.49769 3.77401L0.666504 5.6052L6.76224 11.7009L16.3332 2.13001L14.502 0.298828L6.76224 8.03857Z' fill='white'/%3E%3C/svg%3E") no-repeat center center / auto var(--aox-color-primary-900); } .obj_aox-form .obj_checkbox.checkbox_option .ctn_option { display: flex; flex-direction: row; gap: var(--aox-spacing-xl); padding: var(--aox-spacing-l); border: solid 1px var(--aox-color-grey-300); background: var(--aox-color-white); } .obj_aox-form .obj_checkbox.checkbox_option .ctn_option { display: flex; flex-direction: row; gap: var(--aox-spacing-xl); padding: var(--aox-spacing-l); border: solid 2px var(--aox-color-grey-300); background: var(--aox-color-white); } .obj_aox-form .obj_checkbox.checkbox_option .ctn_option .ctn_media { min-width: var(--aox-150px); width: var(--aox-150px); } .obj_aox-form .obj_checkbox.checkbox_option .ctn_option .ctn_content > * + * { margin-top: var(--aox-spacing-s); } .obj_aox-form .obj_checkbox.checkbox_option .ctn_option .ctn_content .obj_text .ctn_text-header .t_title { font-weight: 600; font-size: var(--aox-fs-18px); color: var(--aox-color-default); } .obj_aox-form .obj_checkbox.checkbox_option .ctn_option .ctn_content .obj_text .ctn_text { font-size: var(--aox-fs-14px); line-height: var(--aox-lh-150); } .obj_aox-form .obj_checkbox.checkbox_option .ctn_option .ctn_content .obj_text .ctn_text ul li + li { margin-top: 0; } .obj_aox-form .obj_checkbox.checkbox_option .ctn_option .ctn_content .obj_text .ctn_text .t_price { margin-top: var(--aox-spacing-m); font-weight: 600; font-size: var(--aox-fs-18px); } /***/ .obj_aox-form .obj_form-element.is_small .ctn_element { max-width: var(--aox-col-2-gutter); } /*** radios_category ***/ .obj_aox-form .obj_radios.radios_category .obj_radio label { position: relative; padding: 0; height: var(--aox-120px); } .obj_aox-form .obj_radios.radios_category .obj_radio label::before, .obj_aox-form .obj_radios.radios_category .obj_radio label::after { content: none; } .obj_aox-form .obj_radios.radios_category .obj_radio label p { position: absolute; z-index: 2; bottom: var(--aox-spacing-m); left: var(--aox-spacing-m); right: var(--aox-spacing-m); font-weight: var(--aox-font-weight-strong); line-height: var(--aox-lh-100); color: var(--aox-color-white); } .obj_aox-form .obj_radios.radios_category .obj_radio label p small { font-weight: var(--aox-font-weight); font-size: var(--aox-fs-14px); } .obj_aox-form .obj_radios.radios_category .obj_radio label .ctn_background { opacity: 0.35; position: absolute; top: 0; left: 0; height: 100%; width: 100%; transition: var(--aox-transition-default); } .obj_aox-form .obj_radios.radios_category .obj_radio label:hover .ctn_background, .obj_aox-form .obj_radios.radios_category .obj_radio input:checked + label .ctn_background { opacity: 1; } /*** radios_hours ***/ .obj_aox-form .obj_radios.radios_hours { gap: var(--aox-spacing-m); } .obj_aox-form .obj_radios.radios_hours .ctn_radios-header { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: var(--aox-spacing-xl); } .obj_aox-form .obj_radios.radios_hours .ctn_radios-header .obj_button.button_prev { display: block; height: var(--aox-8px); width: var(--aox-8px); border-top: solid 2px currentColor; border-left: solid 2px currentColor; transform: rotate(-45deg); } .obj_aox-form .obj_radios.radios_hours .ctn_radios-header p { font-weight: var(--aox-font-weight-strong); font-size: var(--aox-fs-16px); text-transform: uppercase; } .obj_aox-form .obj_radios.radios_hours .ctn_radios-header .obj_button.button_next { display: block; height: var(--aox-8px); width: var(--aox-8px); border-top: solid 2px currentColor; border-right: solid 2px currentColor; transform: rotate(45deg); } .obj_aox-form .obj_radios.radios_hours .ctn_radios { overflow-y: scroll; max-height: calc((var(--aox-38px) * 6) + (var(--aox-spacing-m) * 2)); padding-right: var(--aox-spacing-s); border: solid var(--aox-spacing-m) var(--aox-color-white); background-color: var(--aox-color-white); } .obj_aox-form .obj_radios.radios_hours .obj_radio { min-height: var(--aox-38px); } .obj_aox-form .obj_radios.radios_hours .obj_radio + .obj_radio { border-top: solid 1px var(--aox-color-grey-300); } .obj_aox-form .obj_radios.radios_hours .obj_radio label { display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; height: var(--aox-38px); padding: var(--aox-spacing-s); background-color: var(--aox-color-grey-50); transition: var(--aox-transition-default); } .obj_aox-form .obj_radios.radios_hours .obj_radio label::before, .obj_aox-form .obj_radios.radios_hours .obj_radio label::after { content: none; } .obj_aox-form .obj_radios.radios_hours .obj_radio label .t_hours { font-size: var(--aox-fs-16px); line-height: var(--aox-22px); } .obj_aox-form .obj_radios.radios_hours .obj_radio label .t_places { font-size: var(--aox-fs-14px); line-height: var(--aox-22px); } .obj_aox-form .obj_radios.radios_hours .obj_radio.has_availability-high label { background-color: #DEF6E7; } .obj_aox-form .obj_radios.radios_hours .obj_radio.has_availability-medium label { background-color: #FAE3D1; } .obj_aox-form .obj_radios.radios_hours .obj_radio label:hover, .obj_aox-form .obj_radios.radios_hours .obj_radio input:checked + label { color: var(--aox-color-white); background: var(--aox-color-primary-900); } /*** radios_filters ***/ .obj_aox-form .obj_checkboxes.checkboxes_filters .ctn_checkboxes { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--aox-spacing-m); } .obj_aox-form .obj_checkboxes.checkboxes_filters .obj_checkbox label { padding: var(--aox-spacing-s) var(--aox-spacing-l); height: var(--aox-44px); font-size: var(--aox-fs-18px); line-height: var(--aox-26px); color: var(--aox-color-primary-900); border: solid 1px var(--aox-color-primary-900); background-color: var(--aox-color-white); border-radius: var(--aox-22px); transition: var(--aox-transition-default); } .obj_aox-form .obj_checkboxes.checkboxes_filters .obj_checkbox label::before, .obj_aox-form .obj_checkboxes.checkboxes_filters .obj_checkbox label::after { content: none; } .obj_aox-form .obj_checkboxes.checkboxes_filters .obj_checkbox label:hover, .obj_aox-form .obj_checkboxes.checkboxes_filters .obj_checkbox input:checked + label { color: var(--aox-color-white); background: var(--aox-color-primary-900); } @media screen and (max-width: 767px) { .obj_aox-form .obj_checkboxes.checkboxes_filters .obj_checkbox { width: 100%; } .obj_aox-form .obj_checkboxes.checkboxes_filters .obj_checkbox label { text-align: center; } } /*** radios_cadeau ***/ .obj_aox-form .obj_radios.radios_cadeau .obj_radio + .obj_radio { margin-top: var(--aox-form-gap-3xl); } .obj_aox-form .obj_radios.radios_cadeau .obj_radio .t_label { font-size: var(--aox-fs-18px); color: var(--aox-color-primary-900); text-transform: uppercase; } /*** .ctn_pattern ***/ .obj_aox-form .ctn_pattern .obj_button.button_switch { top: calc(var(--aox-45px) * -1); } /* -------------------------------------------------- */ /* $ > AOX Form Param /* -------------------------------------------------- */ /* v1.4.1 - 14/10/25 14/10/25 (KLF) - v1.4.1 - Modifs obj_aox-single 03/09/25 (FJA) - v1.4.0 - Modifs structure edito 26/08/25 (FJA) - v1.3.0 - Maj variables 11/06/25 (FJA) - v1.0.1 - Ajout variables */ /* ======================================== */ /* Param /* ======================================== */ .obj_aox-form { --aox-form-width: var(--aox-col-8); --aox-form-gap-s: var(--aox-spacing-s); --aox-form-gap-m: var(--aox-spacing-m); --aox-form-gap-l: var(--aox-spacing-l); --aox-form-gap-xl: var(--aox-spacing-xl); --aox-form-gap-3xl: var(--aox-spacing-3xl); --aox-form-label-font-family: var(--aox-font-family); --aox-form-label-font-weight: var(--aox-font-weight); --aox-form-label-font-size: var(--aox-font-size); --aox-form-label-line-height: var(--aox-line-height); --aox-form-label-color: var(--aox-color-default); --aox-form-help-font-family: var(--aox-font-family); --aox-form-help-font-weight: var(--aox-font-weight); --aox-form-help-font-size: var(--aox-font-size-small); --aox-form-help-line-height: var(--aox-line-height); --aox-form-help-color: var(--aox-color-grey-500); --aox-form-item-padding: var(--aox-20px); --aox-form-item-font-family: var(--aox-font-family); --aox-form-item-font-weight: var(--aox-font-weight); --aox-form-item-font-size: var(--aox-font-size); --aox-form-item-line-height: var(--aox-line-height); --aox-form-item-color: var(--aox-color-default); --aox-form-item-border-size: 1px; --aox-form-item-border-size-error: var(--aox-form-item-border-size); --aox-form-item-border-radius: 0px; --aox-form-item-border-color: var(--aox-color-grey-500); --aox-form-item-background-color: var(--aox-color-white); --aox-form-checkbox-size: var(--aox-20px); --aox-form-radio-size: var(--aox-20px); --aox-form-rating-size: var(--aox-20px); --aox-form-table-label-font-size: var(--aox-font-size); --aox-form-table-item-font-size: var(--aox-font-size-small); --aox-form-loader-size: var(--aox-20px); --aox-form-loader-border-size: var(--aox-4px); --aox-icon-input-size: var(--aox-icon-size-m); --aox-icon-input-padding: calc(3 * var(--aox-form-item-padding)); --aox-icon-input-color: var(--aox-color-grey-600); } /***/ @media screen and (max-width: 767px) { .obj_aox-form { --aox-form-width: var(--aox-grid); } } /* -------------------------------------------------- */ /* $ > AOX Form Core Custom - 25/08/25 /* -------------------------------------------------- */ /* ======================================== */ /* Custom /* ======================================== */ .obj_aox-form { --aox-form-gap-s: var(--aox-spacing-xs); --aox-form-gap-m: var(--aox-spacing-s); --aox-form-gap-l: var(--aox-spacing-m); --aox-form-gap-xl: var(--aox-spacing-l); --aox-form-gap-3xl: var(--aox-spacing-l); --aox-form-label-font-weight: 700; --aox-form-label-font-size: var(--aox-fs-16px); --aox-form-help-font-size: var(--aox-fs-16px); --aox-form-help-color: #6B7280; --aox-form-item-padding: var(--aox-10px); --aox-form-item-font-size: var(--aox-fs-16px); --aox-form-item-border-radius: var(--aox-4px); --aox-form-item-border-color: var(--aox-color-grey-300); --aox-form-checkbox-size: var(--aox-28px); --aox-form-radio-size: var(--aox-28px); --aox-form-rating-size: var(--aox-28px); } /* ---------------------------------------- */ /* $ > Common /* ---------------------------------------- */ /* ======================================== */ /* Main /* ======================================== */ main { position: relative; padding: 0; } main .obj_section + .obj_section { margin-top: var(--aox-96px); } main .obj_section:last-child { margin-bottom: var(--aox-96px); } main .obj_section.has_background + .obj_section.has_background { margin-top: 0; } main .obj_section.has_background:last-child { margin-bottom: 0; } /***/ @media screen and (max-width: 767px) { main { margin-top: var(--aox-80px); } } /* ======================================== */ /* Section /* ======================================== */ .obj_section { width: 100%; } .obj_section .ctn_section { margin: 0 auto; width: var(--aox-grid); } /* ======================================== */ /* .obj_breadcrumb /* ======================================== */ .obj_breadcrumb { color: inherit; } .obj_breadcrumb ul { display: flex; flex-direction: row; flex-wrap: wrap; } .obj_breadcrumb ul li { font-size: var(--aox-fs-14px); line-height: var(--aox-lh-160); } .obj_breadcrumb ul li::after { content: ">"; display: inline-block; margin: 0 var(--aox-8px); } .obj_breadcrumb ul li:last-child::after { content: none; } .obj_breadcrumb ul li a { font-weight: 400; color: inherit; text-decoration: none; box-shadow: inset 0 -1px 0px currentColor; } .obj_breadcrumb ul li span { font-weight: 600; } /* ======================================== */ /* .obj_breadcrumb /* ======================================== */ .obj_breadcrumb { color: inherit; } .obj_breadcrumb ul { display: flex; flex-direction: row; flex-wrap: wrap; } .obj_breadcrumb ul li { font-size: var(--aox-fs-14px); line-height: var(--aox-lh-160); } .obj_breadcrumb ul li::after { content: ">"; display: inline-block; margin: 0 var(--aox-8px); } .obj_breadcrumb ul li:last-child::after { content: none; } .obj_breadcrumb ul li a { font-weight: 400; color: inherit; text-decoration: none; box-shadow: inset 0 -1px 0px currentColor; } .obj_breadcrumb ul li span { font-weight: 600; } #exposeMask{ position:fixed !important; width:100% !important; height:100% !important; opacity:0.6 !important; } .ctn_popin-zone{ display:none; } .obj_popin{ display:none; left:50% !important; top:50% !important; max-width:90vw; max-height:90vh; padding:var(--aox-40px); background:#fff; overflow-y:auto; transform:translate(-50%,-50%); } .obj_popin > .content{ position:relative; z-index:1; } .obj_popin .btn_close{ position:absolute; z-index:100; right:var(--aox-30px); top:var(--aox-30px); width:var(--aox-25px); height:var(--aox-25px); } .obj_popin .btn_close::before, .obj_popin .btn_close::after{ content:''; position:absolute; width:var(--aox-28px); height:0; left:50%; top:50%; margin:-1px 0 0 calc(var(--aox-15px) * -1); transform:rotate(45deg); transition:all var(--aox-transition-duration) ease; border:1px solid #000; } .obj_popin .btn_close::after{ transform:rotate(135deg); } .obj_popin .btn_close:hover::before, .obj_popin .btn_close:focus::before, .obj_popin .btn_close:hover::after, .obj_popin .btn_close:focus::after{ border-color:var(--aox-color-primary-900); } .obj_popin .t_title-1_popin{ font-weight: var(--aox-font-weight-strong); font-size:var(--aox-fs-42px); line-height:1; text-transform:uppercase; } .obj_popin .t_title-2_popin{ font-weight: var(--aox-font-weight-strong); font-size:var(--aox-fs-16px); line-height:1; text-transform:uppercase; } .obj_popin .t_title-1_popin + .t_title-2_popin, .obj_popin .t_desc-main + .t_title-2_popin{ margin-top:var(--aox-30px); } .obj_popin .t_title-1_popin + .t_desc-main, .obj_popin .t_title-2_popin + .t_desc-main, .obj_popin .t_desc-main + .t_desc-main{ margin-top:var(--aox-30px); } .obj_popin .ctn_cta{ margin-top:var(--aox-60px); } @media screen and (max-width:767px){ .obj_popin{ max-width:100vw; max-height:100vh; width:100vw; padding:var(--aox-30px); } .obj_popin.var_small{ top:auto !important; bottom:10px; max-width:calc(100vw - 20px); max-height:calc(100vh - 20px); width:calc(100vw - 20px); transform:translateX(-50%); } .obj_popin .btn_close{ right:var(--aox-20px); top:var(--aox-20px); width:var(--aox-18px); height:var(--aox-18px); } .obj_popin .btn_close::before, .obj_popin .btn_close::after{ width:var(--aox-18px); margin:-1px 0 0 calc(var(--aox-10px) * -1); } .obj_popin .t_title-1_popin{ font-size:var(--aox-fs-26px); } .obj_popin .ctn_cta{ margin-top:var(--aox-30px); } } /**/ .obj_popin-template{ width:var(--aox-1330px); } .obj_popin-template.var_small{ width:var(--aox-610px); padding-right:var(--aox-40px); } .obj_popin-template.var_small .ctn_cta{ margin-top:var(--aox-30px); } @media screen and (max-width:767px){ .obj_popin-template{ width:100%; } .obj_popin-template.var_small{ width:100%; padding-right:var(--aox-30px); } } /**/ .obj_popin-accessibilite{ width:var(--aox-580px); text-align:center; padding-bottom:var(--aox-40px); } .obj_popin-accessibilite .t_title-1_popin{ font-size:var(--aox-fs-30px); } .obj_popin-accessibilite .t_title-2_popin{ display:block; margin-top:0; } .obj_popin-accessibilite .ctn_switch-accessibilite{ margin-top:var(--aox-40px); } .obj_popin-accessibilite .ctn_switch-accessibilite ul{ margin-top:var(--aox-20px); display:flex; justify-content:center; } .obj_popin-accessibilite .ctn_switch-accessibilite ul li{ position:relative; padding:var(--aox-5px); background:var(--aox-color-grey-200); } .obj_popin-accessibilite .ctn_switch-accessibilite ul li input{ position:absolute; left:0; top:0; width:1px; height:1px; opacity:0; } .obj_popin-accessibilite .ctn_switch-accessibilite ul li label{ display:block; padding:var(--aox-10px); width:var(--aox-150px); font-size:var(--aox-fs-16px); line-height:1; transition:color var(--aox-transition-duration) ease, background-color var(--aox-transition-duration) ease; cursor:pointer; } .obj_popin-accessibilite .ctn_switch-accessibilite ul li label:hover{ color:var(--aox-color-primary-900); } .obj_popin-accessibilite .ctn_switch-accessibilite ul li input:focus + label{ outline-width:2px; outline-offset:-2px; outline-color:#000; outline-style:dashed; } .obj_popin-accessibilite .ctn_switch-accessibilite ul li input:checked + label{ font-weight: var(--aox-font-weight-strong); color:var(--aox-color-grey-200); background: var(--aox-color-primary-900); } @media screen and (max-width:767px){ .obj_popin-accessibilite{ width:100%; padding-bottom:var(--aox-20px); } } /**/ .obj_popin-newsletter{ width:var(--aox-580px); padding:0 var(--aox-40px); } .obj_popin-newsletter .t_title-1_popin{ font-size:var(--aox-fs-30px); text-align:center; } .obj_popin-newsletter .t_title-2_popin{ margin-top:var(--aox-15px); text-align:center; text-transform:none; } .obj_popin-newsletter .t_mandatory{ margin-top:var(--aox-10px); margin-bottom:var(--aox-30px); text-align:center; } .obj_popin-newsletter .t_mentions{ margin-top:var(--aox-30px); } .obj_popin-newsletter .t_legend-checkbox{ padding-top:var(--aox-20px); font-size:var(--aox-fs-16px); line-height:1.125; } .obj_popin-newsletter .ctn_cta{ margin-top:var(--aox-30px); text-align:center; } .obj_popin-newsletter .ctn_checkbox{ margin-top:var(--aox-20px); } .obj_popin-newsletter .ctn_confirm, .obj_popin-newsletter.confirm-is-visible .ctn_form{ display:none; } .obj_popin-newsletter.confirm-is-visible .ctn_confirm{ display:block; } .obj_popin-newsletter .ctn_confirm p{ margin-top:var(--aox-40px); font-size:var(--aox-fs-26px); line-height:1; text-align:center; } .obj_popin-newsletter .ctn_confirm .ctn_cta{ margin-top:var(--aox-40px); } .obj_popin-newsletter .t_fieldset-legend{ margin-bottom:var(--aox-10px); } .obj_popin-newsletter .ctn_floating-label{ margin-top:var(--aox-15px); } @media screen and (max-width:767px){ .obj_popin-newsletter{ width:100%; padding:0; } } .obj_mini-cart{ padding:var(--aox-30px) var(--aox-20px) var(--aox-30px) var(--aox-30px); } .obj_mini-cart .ctn_scroll{ max-height:50vh; padding-right:var(--aox-10px); overflow-y:auto; } .obj_mini-cart .t_title-minicart_1{ padding-right:var(--aox-10px); font-size:var(--aox-fs-16px); line-height:1; text-transform:uppercase; } .obj_mini-cart .t_title-minicart_2{ font-size:var(--aox-fs-14px); line-height:1; } .obj_mini-cart .t_duration-minicart{ display:flex; align-items:center; margin-top:var(--aox-5px); font-size:var(--aox-fs-14px); line-height:1; } .obj_mini-cart .t_duration-minicart svg{ margin-right:var(--aox-8px); width:var(--aox-fs-22px); height:var(--aox-fs-22px); fill:rgba(var(--aox-color-primary-900), 1); } .obj_mini-cart .t_price-minicart{ font-size:var(--aox-fs-20px); line-height:1; } .obj_mini-cart .t_price-minicart_crossed{ font-size:var(--aox-fs-14px); line-height:1; text-decoration:line-through; } .obj_mini-cart .btn_delete{ margin-top:var(--aox-10px); font-size:var(--aox-fs-11px); } .obj_mini-cart .btn_delete svg{ margin-right:var(--aox-5px); width:var(--aox-14px); height:var(--aox-16px); } .obj_mini-cart .t_date-minicart{ display:flex; align-items:flex-end; margin-top:var(--aox-10px); padding:var(--aox-10px); font-size:var(--aox-fs-16px); line-height:1; background:rgba(var(--aox-color-grey-200), 1); } .obj_mini-cart .t_date-minicart svg{ margin-right:var(--aox-10px); width:var(--aox-21px); height:var(--aox-21px); } .obj_mini-cart > .t_title-minicart_1.var_top{ padding-bottom:var(--aox-15px); } .obj_mini-cart > .t_title-minicart_1.var_bottom{ display:flex; align-items:flex-end; padding-top:var(--aox-20px); } .obj_mini-cart > .t_title-minicart_1.var_bottom span{ margin-left:auto; font-size:1.25em; } .obj_mini-cart .ctn_cta{ margin-top:var(--aox-25px); } .obj_mini-cart .ctn_row{ padding:var(--aox-20px) 0; border-bottom:1px solid rgba(var(--aox-color-grey-200), 1); } .obj_mini-cart .ctn_row:first-of-type{ border-top:1px solid rgba(var(--aox-color-grey-200), 1); } .obj_mini-cart .ctn_row .ctn_top{ display:flex; } .obj_mini-cart .ctn_row .ctn_img{ height:var(--aox-60px); width:var(--aox-60px); } .obj_mini-cart .ctn_row .ctn_img.var_gift{ height:var(--aox-40px); } .obj_mini-cart .ctn_row .ctn_img img{ width:100%; height:100%; object-fit:cover; } .obj_mini-cart .ctn_row .ctn_txt{ margin-left:var(--aox-15px); } .obj_mini-cart .ctn_row .ctn_txt .t_title-minicart_1{ margin-top:var(--aox-5px); } .obj_mini-cart .ctn_row .ctn_price{ margin-left:auto; text-align:right; } @media screen and (max-width:767px){ .obj_mini-cart .ctn_scroll{ max-height:55vh; } } /* Unminified development version of the datepicker stylesheet. Please use the minified version in production - remember to run a find/replace on the minified file to update the image locations to suit your installation - more info can be found in the header of the minified file. F.Y.I: Here's the HTML produced for each instance of the datePicker, in this case associated with a form element having an id of "demo-1"
... snip ...
January 2013
« ‹ Today › »
Mon Tue Wed Thu Fri Sat Sun
  1 2 3 4 5 6
7 8 9 10 11 12 13
*/ /* Hide the datepickers associated input by using a className */ .fd-hidden-input { display:none; } /* Screen reader class - used to hide spans inside each cell from the visual display. See: http://webaim.org/techniques/css/invisiblecontent/ */ .fd-screen-reader { position:absolute; left:-999em; top:auto; width:1px; height:1px; overflow:hidden; -moz-outline: 0 none; outline: 0 none; } /* The wrapper div */ .date-picker { position:absolute; z-index:999; text-align:center; /* Change the font-size to suit your needs. The following line is for the demo that has a 14px font-size defined on the body tag. All other rules are "em" based and inherit from the font-size set here. */ font:900 0.8em/1em "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Verdana, Arial, "Lucida Grande", sans-serif; background:transparent; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; user-select:none; /* Set the fade in/out animation time here. This is used for browsers that support CSS transitions. Non-supporting browsers receive the fade effect using a Javascript fallback. */ opacity:1; -webkit-transition:opacity .75s ease-in-out; -moz-transition:opacity .75s ease-in-out; -ms-transition:opacity .75s ease-in-out; -o-transition:opacity .75s ease-in-out; transition:opacity .75s ease-in-out; } .date-picker div { border:1px solid rgba(255, 255, 255, 0.8); border-radius:0.8em; } /* The following rule is used whenever CSS Animations are supported by the browser */ .date-picker.fd-dp-fade { opacity:0; } /* Styles for the static datePickers */ .static-datepicker { position:relative; top:5px; left:0; margin-bottom:1.5em; } /* The iframe hack to cover selectlists in IE6 */ .iehack { position:absolute; background:#fff; z-index:9998; padding:0; margin:0; border:0; display:none; } /* The activation "button" created beside each input for popup datePickers */ .date-picker-control span { display:block; width:18px; height:18px; overflow:hidden; margin:auto 0; resize:none; outline:none; } /* The hover effect on the activation button */ .date-picker-button-active span, .date-picker-control:focus span, .date-picker-control:hover span, .date-picker-control:active span { outline:none; box-shadow:0 0 5px rgba(40, 130, 170, 0.7); border-radius:2px; } /* A base64 encoded image-sprite is used for the activation button. IE6 and 7 get fed "normal" png images within the rule that follows. */ .date-picker-control:link, .date-picker-control:visited { position:relative; display: -moz-inline-box; border:0 none; padding:0; margin:0 4px; background-color:transparent; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAB+CAYAAAAp+EF2AAAD8ElEQVRo3u2Zu0scXxTHz8zcXR0H8UnEIpXyQ8TGaJNCFAlqEUyTMlUaWTC/IoR0vxQ2vz8hfZJGIki2URARkkbxhSJq4avI7uqK7x2V9XF/93v83WGzmIezKVLcL1zmvubcc+49w352xurr63tZW1s7EI1GPSkloVxfX5Ou55f8sYuLCz+TybwRMNLf3++dn5+jk8vl5eU39Ww2G/TlX6+urrzZ2dkBAU9gZGVlBZ08If+qC9r5Y6WlpeQ4jmf/714oI9orhCuOj49peXmZDg4OCDo6OqKSkhKswm0stL+/T5WVlWTbNvchVLQxhjpsiEgkQm1tbWwANy8uLlJ9fT2Vl5dzGzePjY1RR0cH1zFvfX2dOjs7ybIs2tjYoOHhYbLhHizrmyBcc0tuH25GKLhCqMOGQEgTExMcKzQ1NUX/vntHjoiS1l8lxbwYdHJywl4cHh5y3/b2NteF53kcGjYQK66urtL1wzYSKjQtMfyRuru7eRz7hT1FG8L8oaEhsmEAljFJb/Bt0uMoOiwdGmxwaOPj48FebG1tUTqRIqfYDSaXp1I0MjLCdZXFtLa2xp7BSCKRuDnxWCwmVZxSnYZU8Ut1QjKVSkl1rFJtolSTZTweD9o7OztydHRUai0sLMiWlhYpckPTp5J7YmgLIQhpokPMVRAakml6eppc1+WbsJG+73Pq64TE4wNDqOs80qeIMHGSAqvV1dUFmQsjjY2NQeZCu7u71NzcHGQ5rq2trUH+wYbARKxeVVXFhlCHERQtpAjGtYeYU11dze2ysrKbFFEe+Ol02kNCYlIymeRnDZN1/DjJmZkZbus8gnGMbW5u0unpqW8pF1/W1NQMKPc8TOQHULCjwROPvqKiIq5jQYSv2zCiUuANGRkZGRl9R5ZiyGcK/2KK3NyQDHmmfn3fgiFjiiHdAhjSVQwZA0O6v4EhXcOQIRiSQSudZjrRAt7dmSHn5uaooaGBKioqAg9Qurq6fsiQ4jaG1GHk8uKdGRJuK/Tjk9NaWloKQvseQ3Jo7e3tvCcwNjk5SU1NTQEvoYA8enp6uL63t0fz8/NBaDjlwcFBMgz5awx5phLQLZAhz8CQzxRDxpR7bkiGPFMp8Nb8RhgZGRn9iCHNe0jDkIYhzXtI8x7SvIc0MjIyuhNDPn/x9NP9qsbeomgxhWHI7MU5HWa/xgWMvOj/mwpgSJqZlb0CnhTKkMKJkmHIkN+y3394T8Xql1QrEomG+5b9+MkjevCgmRxbqJVtev3qn59+y76dIS2HjdgolhOOIUEeXwY+M23chGPxzeZb9p/EkBk/w39iCmFI/9QnMOSnezX3eiMiQmEYEkaSiWT8P0zZxbn5chQoAAAAAElFTkSuQmCC); background-repeat:no-repeat; background-position:0 -72px; min-width:18px; line-height:1; cursor:pointer; visibility:visible; text-decoration:none; vertical-align:text-bottom; resize:none; } /* IE6 & 7 fed "normal" png images */ .oldie .date-picker-control:link, .oldie .date-picker-control:visited { /* IE7 gets a non-base64 encoded image sprite of the base64 encoded image declared above. That's all you have to do for IE7 support as it inherits the background-position declarations used to reposition the sprite */ *background-image:url(http://www.yourdomain.com/the/path/to/the/images/datepicker-sprite.png); /* IE6 gets the filter treatment and an individual image for each animation state. This pattern is repeated for all other image-based rules within the stylesheet */ _background-image:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.yourdomain.com/the/path/to/the/images/datepicker-normal.png'); } /* If the datepicker has a valid date then use a different icon for the activation button to let the user know. It's a little detail but it's the little things in life etc */ .date-picker-dateval:link, .date-picker-dateval:visited { background-position:0 -108px; } /* Again, IE6 gets a "normal" png image from the server. Rinse, repeat. */ .oldie .date-picker-dateval:link, .oldie .date-picker-dateval:visited { _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.yourdomain.com/the/path/to/the/images/datepicker-selected.png'); } /* Hover states etc for the activation button */ .date-picker-button-active:link, .date-picker-button-active:visited, .date-picker-control:focus, .date-picker-control:hover, .date-picker-control:active { background-position:0 0; } /* IE 6 activation button hover states */ .oldie .date-picker-button-active:link, .oldie .date-picker-button-active:visited, .oldie .date-picker-control:focus, .oldie .date-picker-control:hover, .oldie .date-picker-control:active { _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.yourdomain.com/the/path/to/the/images/datepicker-focused.png'); } /* Disabled activation button */ .date-picker-control-disabled:link, .date-picker-control-disabled:visited, .date-picker-control-disabled:hover, .date-picker-control-disabled:active { background-position:0 -36px; cursor:default; } /* IE 6 disabled activation button */ .oldie .date-picker-control-disabled:link, .oldie .date-picker-control-disabled:visited, .oldie .date-picker-control-disabled:hover, .oldie .date-picker-control-disabled:active { _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='http://www.yourdomain.com/the/path/to/the/images/datepicker-disabled.png'); } .date-picker-control-disabled:hover span, .date-picker-control-disabled:active span { box-shadow:none !important; } /* Feed IE6 the following rule, IE7 should handle the min-width declared previously. */ .oldie .date-picker-control { _width:18px; } /* IE, older Safari & Opera. Seperate CSS rule seems to be required. */ .date-picker-control { display:inline-block; outline:none !important; } /* Default datepicker "button" styles */ .date-picker th span { display:block; padding:0; margin:0; text-align:center; line-height:1em; border:0 none; background:transparent; font-weight:bold; cursor:pointer; } /* The "month, year" display */ .date-picker .month-display, .date-picker .year-display { display:inline; text-transform:uppercase; letter-spacing:1px; font-weight:normal; font-size:1.2em; } /* Generic button class for Next & Previous (both month & year) buttons */ .date-picker .prev-but, .date-picker .next-but { font-weight:normal; font-size:2.4em; font-family: georgia, times new roman, palatino, times, bookman, serif; cursor:pointer; } .date-picker .prev-but, .date-picker .next-but, .date-picker .today-but { -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; transition:all .2s ease-in-out; } /* Hover effect for Next & Previous (month, year) buttons */ .date-picker .prev-but:hover, .date-picker .next-but:hover, .date-picker .today-but:hover { color:#a84444; } .date-picker .prev-but:hover, .date-picker .next-but:hover { /* Uncomment this if you want a scale effect -webkit-transform:scale(1.6); -moz-transform:scale(1.6); -ms-transform:scale(1.6); -o-transform:scale(1.6); transform:scale(1.6); text-shadow:0 2px 1px rgba(0,0,0,.4); */ } /* Today button */ .date-picker .today-but { text-align:center; margin:0 auto; font-weight:normal; font-size:1em; width:100%; text-decoration:none; padding-top:0.3em; text-transform:uppercase; vertical-align:middle; cursor:pointer } /* Disabled buttons */ .date-picker-disabled .prev-but, .date-picker-disabled .next-but, .date-picker-disabled .today-but, .date-picker-disabled .prev-but:hover, .date-picker-disabled .next-but:hover, .date-picker-disabled .today-but:hover, .date-picker .prev-but.fd-disabled:hover, .date-picker .next-but.fd-disabled:hover, .date-picker .fd-disabled, .date-picker .fd-disabled:hover { color:#aaa; cursor:default !important; opacity:1; } .date-picker .prev-but.fd-disabled:hover, .date-picker .next-but.fd-disabled:hover { /* Uncomment this if you have uncommented the "scale" rules above -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); */ text-shadow:0 -1px 1px rgba(255,255,255,.8); } /* The gradient background image */ .date-picker table, .date-picker td, .date-picker tbody th, .date-picker .day-disabled, .date-picker .date-picker-hover.day-disabled, .date-picker .date-picker-unused, .date-picker .month-out { background-color:#fff; background-image:url(data:image/gif;base64,R0lGODlhJgBbAMQAAAAAAP////7+/v39/fz8/Pv7+/r6+vn5+fj4+Pf39/b29vX19fT09PPz8/Ly8vHx8fDw8O/v7+7u7u3t7ezs7Ovr6+rq6unp6ejo6Ofn5+bm5uXl5f///wAAAAAAAAAAACH5BAEAABwALAAAAAAmAFsAAAX/4CaOZGmeaKqubOu+cCzPWm3feK7vfO//wCAvQywaj8ikcslsOp/QJWZKrVqv2Kx2y+16v9qLeEwum8/otHqttrjf8Lh8Tq/b7/aKfs/v+/+AgYKDhIWGgRSJiouMjY6PkJGSkROVlpeYmZqbnJ2enRKhoqOkpaanqKmqqRGtrq+wsbKztLW2tRC5uru8vb6/wMHCwQ/FxsfIycrLzM3OzQ7R0tPU1dbX0Q3a29zd3t/g4eLj4gzm5+jp6uvs7e7v7gvy8/T19vf4+fr7+gr+/wADChxIsKDBgwYTKFzIsKHDhxAjSpwoEYHFixgzatzIsaPHjx4PiBxJsqTJkyhTi6pcybKly5QGYsqcSbOmzZs4c+rMWaCnz59AgwodSrSo0aIEkipdyrSp06dQo0qdSrUq1AFYs2rdyrWr169gw4odS/argLNo06pdy7at27dw48qd6zaA3bt48+rdy7ev37+AAwseTLiw4cOIEytezLix48eQI0ueTLmy5cuYM2vezLmz58+gQ4tOHAIAOw==); background-repeat:repeat-x; background-position:0 0; } .oldie .date-picker table, .oldie .date-picker td, .oldie .date-picker tbody th, .oldie .date-picker .day-disabled, .oldie .date-picker .date-picker-hover.day-disabled, .oldie .date-picker .date-picker-unused, .oldie .date-picker .month-out { *background-image:url(http://www.yourdomain.com/the/path/to/the/images/datepicker-gradient.gif); /* Remove from IE6 as it has a bug that never caches images on dynamically created elements which results in one http request being made for each cell of each table rendered by the script. */ _background-image:none; } .date-picker table { table-layout:auto; empty-cells:show; border-spacing:2px; border-collapse:separate; position:relative; margin:0; padding:0; border:1px solid #ccc; background-position:0 -20px; text-align:center; padding:0.3em; width:auto; height:auto; color:#555; font-size:1em; border-radius:0.8em; box-shadow:0px 0px 5px #aaa; } /* Create a "Lifted Corners" effect on the table. Ripped straight from @necolas http://nicolasgallagher.com/css-drop-shadows-without-images/ */ .date-picker:before, .date-picker:after { content:""; position:absolute; z-index:-2; bottom:17px; left:10px; width:50%; height:20%; max-width:300px; max-height:100px; -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); -ms-transform:rotate(-3deg); -o-transform:rotate(-3deg); transform:rotate(-3deg); } .date-picker:after { right:10px; left:auto; -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -ms-transform:rotate(3deg); -o-transform:rotate(3deg); transform:rotate(3deg); } .oldie .date-picker:before, .oldie .date-picker:after { display:none; } /* Common TD & TH styling */ .date-picker td, .date-picker tbody th { padding:0; text-align:center; vertical-align:middle; cursor:pointer; background-position:0 -35px; width:3em; height:3em; overflow:hidden; outline:transparent none 0px; border:1px solid #cfcfcf; text-transform:none; font-weight:normal; text-shadow:0 1px #fff; border-radius:3px; } .date-picker th { border:0 none; padding:0; font-weight:bold; color:#333; text-align:center; vertical-align:middle; text-transform:none; } .date-picker .date-picker-week-header { border:1px solid #dcdcdc; font-style:oblique; background:transparent; cursor:default; } .date-picker .date-picker-thead .date-picker-week-header { border:0 none; cursor:help; } /* The "mon tue wed etc" day header styles */ .date-picker .date-picker-day-header { cursor:help; border:0 none; padding:0 0 0.2em 0; text-transform:lowercase; height:auto; } /* tfoot status bar */ .date-picker .date-picker-statusbar { cursor:default; font-weight:normal; text-transform:uppercase; letter-spacing:0.1em; border:0 none; background:#fff; height:2.8em; } /* TD cell that is _not_ used to display a day of the month */ .date-picker .date-picker-unused { border-color:#dcdcdc; cursor:default !important; background-position:0 -25px; } /* The TH cell used to display the "month, year" title */ .date-picker .date-picker-title { width:auto; height:auto; padding:0.4em 0; } /* The "todays date" cell style */ .date-picker .date-picker-today { background:#fff url(data:image/gif;base64,R0lGODlhKwEoAJEAAKnT6v////X6+gAAACH5BAAAAAAALAAAAAArASgAAALXjI+py+0Po5y02ouz3lz4D4biSJbmiabqyrbuC8fyLAcCgOf0zvf+DwwKhyJbDkdMKpfMpnNo1D2n1Kr1GowCsNyu99uNgsfksnlnPKvX7LbA5o7L51Q4/Y7P8+z6vv9fwgc4SJgnWIiYuHao2OgY9hgpecU4aXkJVIm5yQmj2QkaavIpWmpKapraiaraasnqGusIK1tbSGub64er23vH6xvsBixcfEZsnAyGrNyMxewcPQUtXb1EbZ0thK3d3cPtHV4jTl5Xft4Ejr4eyO6e9R7/LU8/UwAAOw==) no-repeat 0 0; } .oldie .date-picker .date-picker-today { *background:#fff url(http://www.yourdomain.com/the/path/to/the/images/datepicker-today.gif) no-repeat 0 0; } .date-picker .month-out.date-picker-highlight { color:#b87676; } /* The "highlight days" style */ .date-picker .date-picker-highlight { color:#a86666; } /* The "active cursor" style */ .date-picker td { /* Uncomment this if you want a transition on the cursor cells scale effect -webkit-transition: all .2s ease; -moz-transition: all .2s ease; -ms-transition: all .2s ease; -o-transition: all .2s ease; transition: all .2s ease; */ } /* Keyboard users get a scaled cursor. webKit exhibits buggy behaviour when scaling TD cells so commented out until I find a curious CSS based fix. Opera no longer appears to apply the scale... ho hum... */ .date-picker-focus .date-picker-hover { /* -webkit-transform:scale(1.25); */ -moz-transform:scale(1.25); -ms-transform:scale(1.25); -o-transform:scale(1.25); transform:scale(1.25); } .date-picker .date-picker-hover, .date-picker .month-out.date-picker-hover { background:#fff url(data:image/jpg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAASwAA/+4ADkFkb2JlAGTAAAAAAf/bAIQAAwICAgICAwICAwUDAwMFBQQDAwQFBgUFBQUFBggGBwcHBwYICAkKCgoJCAwMDAwMDA4ODg4OEBAQEBAQEBAQEAEDBAQGBgYMCAgMEg4MDhIUEBAQEBQREBAQEBARERAQEBAQEBEQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQ/8AAEQgAIwIIAwERAAIRAQMRAf/EAHgAAQEBAQEBAAAAAAAAAAAAAAABBAMCCQEBAQEBAQEAAAAAAAAAAAAAAAECAwQFEAABAQgBAwMFAQEBAAAAAAAAEwFh0QIDkwQVVDFBgSFRBRFxkaGyczVEEQEAAgMBAAIDAQAAAAAAAAAAARFRAhITMQMhcTIi/9oADAMBAAIRAxEAPwD6R53yGZJm5EkmRUlZLUnYxjKkzGMYyZvb6npiIp8f7Ps26n8z8uOzzuTUuTRNcwx6bZk2WdyalyaI5g9NsybPO5NS5NEcwem2ZNlncmpcmiOYPTbMmyzuTUuTRHMHptmTZZ3JqXJojmD02zJss7k1Lk0RzB6bZk2WdyalyaI5g9NsybLO5NS5NEcwem2ZNlncmpcmiOYPTbMmyzuTUuTRHMHptmTZZ3JqXJojmD02zJss7k1Lk0RzB6bZk2WdyalyaI5g9NsybLO5NS5NEcwem2ZNnncmpcmiOYPTbMmyzuTUuTRHMHptmTZ5vJqXJojmD02zJss7k1Lk0RzB6bZk2WdyalyaI5g9NsybLO5NS5NEcwem2ZNlncmpcmiOYPTbMmyzuTUuTRHMHptmTZZ3JqXJojmD02zJss7k1Lk0RzB6bZk2WdyalyaI5g9NsybLO5NS5NEcwem2ZNlncmpcmiOYPTbMmyzuTUuTRHMHptmTZZvJqXJojmD02zJss7k1Lk0RzB6bZk2WdyalyaI5g9NsybPO5NS5NEcwem2ZNlncmpcmiOYPTbMmyzuTUuTRHMHptmTZZ3JqXJojmD02zJss7k1Lk0RzB6bZk2edyalyaI5g9NsybLO5NS5NEcwem2ZNlncmpcmiOYPTbMmyzmf+mpcmiOYPTbMmyzuTUuTRHMHptmTZZ3JqXJojmD02zJss7k1Lk0RzB6bZk2WdyalyaI5g9NsybLO5NS5NEcwem2ZNlncmpcmiOYPTbMmzzuTUuTRHMHptmTZZ3JqXJojmD02zJss7k1Lk0RzB6bZk2WdyalyaI5g9NsybPO5NS5NEcwem2ZNlncmpcmiOYPTbMmyzuTUuTRHMHptmTZZ3JqXJojmD02zJss7k1Lk0RzB6bZk2WdyalyaI5g9NsybPO5NS5NEcwem2ZNlncmpcmiOYPTbMmyzuTUuTRHMHptmTZ53JqXJojmD02zJss7k1Lk0RzB6bZk2edyalyaI5g9NsybLO5NS5NEcwem2ZZvkqv0+RymfXpVqf201rH4hj7Z/3P7Z1XlpzsWeKLFWiixV4osVeKLFniixZ4osV9miixZ4osWeKLFXiixUUWKvFFioosWeKLFXiixZ4osVaKLFniixZ4osWeKLFWiixUUWKiixV4osWeKLFvXqKLFWiixb06iixZ4osWeKLFniixVoosVFFioosWeKLFniixV4osVeKLFniixZ4osWeKLFXiixUUWKvFFioosWeKLFniixUUWLPFFizxRYq0UWKiixUUWLPFFizxRYs8UWKvFFioosWeKLFXiixZ4osVaKLFXii3n5Wp9PlMxntWq/20a/EL9v9z+5ZWVTTnYq8FirPcFivqCxV4LFXgsVBYo/9gsVBYqCxV4LFQWK+nUFirwWKgFXgsVBYq8FioLFQWKgsVZ7gsVeCxUFirwCoLFX/ALBYqCxUFioLFfUFirwWKs9wWKgsVeCxV4LFQWKv/YLFQWKvBYqAVBYq8FioLFfTqCxV4LFQCr/2CxUFivqCxV4LFWe4LFQWKvBYq8FjaoLFQWKvBYr3+oLFQDKoLFXgsVZ7gsV9QW7fLf8AWzf96v8AbSa/EN/b/c/uWQ05J5AM69QHdoDyBfIACAXsBAHkAzoA7dQHkCsIIUPIBgFYAaBADfuAb0AoEZ9wKBAAAAzqBWgQA37gX2AnkB5AoE8+QKzuBG+AKQQoeQDOgDt1AeQKAAgFaBADfuBfYCeQHkCt6AQA37gOwFIBRPIBnXqA7tA2fLf9bN/3q/20zr8Q6fb/AHP7lkNOQwgFAgNAAOwAB2KJ+AKQOxQIAAIn4KqkAoAAJ+AK0gAADAHcAA7tKAAA0AAIAD2AM6AAABncojfAFAn4ApA7FAgAAAD2KDQAAgAPYAzoAaUAHYgdigRAqjCAUCD/2Q==) no-repeat 0 0; cursor:pointer; border-color:rgb(100,130,170) !important; border-color:rgba(100,130,170,.7) !important; color:rgb(100,130,170); text-shadow: 0px 1px 1px #fff; box-shadow:0 0 6px rgba(100,130,170,.6); background-size:cover; } .oldie .date-picker .date-picker-hover, .oldie .date-picker .month-out.date-picker-hover { *background:#fff url(http://www.yourdomain.com/the/path/to/the/images/datepicker-cursor.jpg) no-repeat 0 0; } /* The "disabled days" style */ .date-picker .day-disabled { color:#888; cursor:default; text-decoration:line-through; background-position:0 -15px; } .date-picker .month-out { border-color:#ddd; border-color:rgba(220,220,220,0.8); color:#aaa; background-position:0 -25px; } /* The "selected date" style - color changed below also */ .date-picker .date-picker-selected-date { border-color:#888 !important; border-color:rgba(7,7,7,.6) !important; } /* The date "out of range" style */ .date-picker .out-of-range, .date-picker .not-selectable { color:#ccc; font-style:oblique; background:#fcfcfc; cursor:default; } /* Week number "out of range" && "month-out" styles */ .date-picker th.month-out, .date-picker th.out-of-range { color:#aaa; font-style:oblique; background:#fcfcfc; } /* Week numbers "out of range" */ .date-picker .out-of-range { opacity:0.6; } /* Used when the entire grid is full but the next/prev months dates cannot be selected */ .date-picker .not-selectable { opacity:0.8; } .oldie .date-picker .out-of-range { filter:alpha(opacity=60); } .oldie .date-picker .not-selectable { filter:alpha(opacity=80); } .date-picker tr { display:table-row; } .date-picker sup { font-size:0.86em; letter-spacing:normal; text-transform:none; height: 0; line-height: 1; position: relative; top:-0.2em; vertical-align: baseline !important; vertical-align: top; } .date-picker .date-picker-day-header, .date-picker .month-display, .date-picker .year-display { text-shadow: 0px 1px 1px #fff; } .date-picker .month-display, .date-picker .year-display { cursor:default; } .date-picker td:focus, .date-picker .date-picker-hover { overflow:hidden; -moz-outline:0 none; outline:0 none; -o-highlight:0 none; } /* The "pulse" animation on focused button and datepicker cursor */ .date-picker-focus .date-picker-hover, .date-picker-control:focus span { -webkit-animation:fd-dp-pulse 1.5s infinite alternate; -moz-animation:fd-dp-pulse 1.5s infinite alternate; -ms-animation:fd-dp-pulse 1.5s infinite alternate; -o-animation:fd-dp-pulse 1.5s infinite alternate; } /* The "selected date" style */ .date-picker .date-picker-selected-date { color:#333; color:rgba(3,3,3,.8); font-weight:bold; font-size:1.2em; width:2.4em; height:2.4em; } /* Remove the box-shadow & lifted corner effect for the inline datepickers */ .static-datepicker table { box-shadow:0 0 0 transparent; } .static-datepicker:before, .static-datepicker:after { display:none; } /* Add a box-shadow and enhance border for datepickers that have keyboard focus */ .date-picker-focus table { border-color:#999; border-color:rgba(153,153,153,.8); box-shadow:0px 0px 5px #aaa; } /* Draggable datepickers */ .date-picker .drag-enabled, .date-picker .drag-enabled span { cursor:move; } /* Disabled datePicker */ .date-picker-disabled table { opacity:.8 !important; } .date-picker-disabled table:before, .date-picker-disabled table:after { display:none; } .oldie .date-picker-disabled table { filter:alpha(opacity=80); } .date-picker-disabled, .date-picker-disabled td, .date-picker-disabled th, .date-picker-disabled th span { cursor:default !important; } .date-picker-disabled .prev-but:hover, .date-picker-disabled .next-but:hover { /* Uncomment this if you have used the previous scale rules previously declared within the file (for the prev-but and next-but classes) -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1); */ text-shadow:none; } body.fd-drag-active { -webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none; user-select:none; } /* Glow effect for the focused (keyboard active) cursor cell and popup datepickers activation button */ @-webkit-keyframes fd-dp-pulse { from{box-shadow:0 0 2px rgba(100, 130, 170, 0.8)} to{box-shadow:0 0 6px rgba(10, 130, 170, 0.5)} } @-moz-keyframes fd-dp-pulse { from{box-shadow:0 0 2px rgba(100, 130, 170, 0.8)} to{box-shadow:0 0 6px rgba(10, 130, 170, 0.5)} } @-ms-keyframes fd-dp-pulse { from{box-shadow:0 0 2px rgba(100, 130, 170, 0.8)} to{box-shadow:0 0 6px rgba(10, 130, 170, 0.5)} } @-o-keyframes fd-dp-pulse { from{box-shadow:0 0 2px rgba(100, 130, 170, 0.8)} to{box-shadow:0 0 6px rgba(10, 130, 170, 0.5)} } /***/ .obj_datepicker .date-picker .date-picker-highlight, .obj_datepicker .date-picker .month-out.date-picker-highlight { color:#DC2626; } .obj_datepicker .static-datepicker{ top:0; margin:0; } .obj_datepicker .static-datepicker table{ box-shadow:none; } .obj_datepicker .date-picker{ height: var(--aox-330px) !important; width: var(--aox-330px) !important; } .obj_datepicker .date-picker div{ border:none; border-radius:0; } .obj_datepicker .date-picker table{ position:relative; padding: 0; width:100%; font-family: var(--aox-font-family); color:#000; border-spacing:var(--aox-20px) var(--aox-5px); border-radius:0; box-shadow:none; border: none; background:transparent; } .obj_datepicker .date-picker .date-picker-title{ padding:0; } .obj_datepicker .date-picker .month-display, .obj_datepicker .date-picker .year-display{ font-weight: 700; font-size:var(--aox-fs-16px); text-transform:uppercase; } .obj_datepicker .date-picker .prev-but.prev-year, .obj_datepicker .date-picker .next-but.next-year{ display:none; } .obj_datepicker .date-picker .prev-but.prev-month, .obj_datepicker .date-picker .next-but.next-month{ position:relative; display:block; width:var(--aox-20px); height:var(--aox-20px); font-size:0; } .obj_datepicker .date-picker .prev-but.prev-month{ margin-right:auto; transform:translate(-100%, -110%); } .obj_datepicker .date-picker .next-but.next-month{ margin-left:auto; transform:translate(100%, -110%); } .obj_datepicker .date-picker .prev-but.prev-month::before, .obj_datepicker .date-picker .next-but.next-month::before{ content:''; position:absolute; top:50%; width:var(--aox-7px); height:var(--aox-7px); border:var(--aox-2px) solid #000; transition:all var(--duration-300ms) ease; } .obj_datepicker .date-picker .prev-but.prev-month::before{ left:var(--aox-7px); border-top:none; border-right:none; transform:translateY(-50%) rotate(45deg); } .obj_datepicker .date-picker .next-but.next-month::before{ right:var(--aox-7px); border-bottom:none; border-left:none; transform:translateY(-50%) rotate(45deg); } .obj_datepicker .date-picker .prev-but.prev-month.fd-disabled, .obj_datepicker .date-picker .next-but.next-month.fd-disabled{ opacity:0.3; } .obj_datepicker .date-picker .prev-but.prev-month:not(.fd-disabled):hover::before, .obj_datepicker .date-picker .next-but.next-month:not(.fd-disabled):hover::before{ border-color:var(--aox-color-primary-900); } .obj_datepicker .date-picker thead{ position:relative; } .obj_datepicker .date-picker thead::before{ content: none; } .obj_datepicker .date-picker th{ font-weight: 700; font-size:var(--aox-fs-14px); text-shadow: none; } .date-picker .date-picker-day-header{ padding-bottom:var(--aox-10px); } .date-picker .date-picker-day-header.date-picker-highlight{ color:#000; } .obj_datepicker .date-picker td{ height:var(--aox-30px); width:var(--aox-30px); font-size:var(--aox-fs-14px); text-shadow: none; border:none; background:none; border-radius:0; } .obj_datepicker .date-picker .out-of-range, .date-picker .not-selectable{ color:var(--aox-color-grey-300); font-style:normal; opacity:1; } .obj_datepicker .date-picker .day-disabled{ color:var(--aox-color-grey-400); text-decoration:none; background:var(--aox-color-grey-200); } .obj_datepicker .date-picker .date-picker-selected-date, .obj_datepicker .date-picker .date-picker-selected-date.date-picker-hover{ width:var(--aox-30px); height:var(--aox-30px); font-size:var(--aox-fs-14px); font-weight:normal; font-weight: 700; color:#fff; background:var(--aox-color-primary-900); } .obj_datepicker .date-picker .date-picker-hover{ font-weight: 700; color:var(--aox-color-primary-900); box-shadow:none; } .obj_datepicker .date-picker .date-picker-hover.day-disabled{ color:var(--aox-color-grey-300); box-shadow:none; } @media screen and (max-width:767px){ .obj_datepicker .date-picker{ width: var(--aox-270px) !important; } .obj_datepicker .date-picker table{ border-spacing: 0; } } /* ======================================== */ /* .obj_toggle /* ======================================== */ .obj_toggle { position: relative; } .obj_toggle .ctn_toggle-header { position: relative; padding-right: var(--aox-spacing-xl); cursor: pointer; } .obj_toggle .ctn_toggle-header::after { content: ""; position: absolute; top: 40%; right: var(--aox-spacing-s); display: block; height: var(--aox-8px); width: var(--aox-8px); border-right: solid 2px var(--aox-color-primary-900); border-bottom: solid 2px var(--aox-color-primary-900); transform: translateY(-50%) rotate(45deg); transition: var(--aox-transition-default); } .obj_toggle .ctn_toggle-header .t_title { font-weight: var(--aox-font-weight-strong); font-size: var(--aox-fs-20px); color: var(--aox-color-primary-900); text-transform: uppercase; } .obj_toggle .ctn_toggle { display: none; padding-top: var(--aox-spacing-m); } /***/ .obj_toggle.is_active .ctn_toggle-header::after { top: 55%; transform: translateY(-50%) rotate(225deg); } /* ======================================== */ /* section_header /* ======================================== */ .main-header_navaox .t_aria-label { position: absolute; width: 1px; height: 1px; overflow: hidden; } @media screen and (max-width: 767px) { .main-header_navaox .t_desktop-only { display: none; } } /***/ .main-header_navaox { position: relative; z-index: 1000; top: 0; left: 0; width: 100%; color: var(--aox-color-black); background: transparent; } .main-header_navaox a { color: inherit; } .mod_navaox > .str_container_navaox { position: relative; display: flex; width: var(--aox-grid); padding: var(--aox-spacing-xl) 0; margin: 0 auto; } /***/ .mod_navaox .obj_logo_navaox { position: relative; z-index: 10; height: var(--aox-150px); width: var(--aox-220px); margin: 0; transition: var(--aox-transition-default); } .mod_navaox .obj_logo_navaox img { position: absolute; width: 100%; height: 100%; object-fit: contain; transition: var(--aox-transition-default); } .mod_navaox .obj_logo_navaox .v_logo.logo_white { opacity: 0; } .mod_navaox .obj_logo_navaox .v_logo.logo_blue { opacity: 1; } /***/ .mod_navaox .ctn_navaox { display: flex; width: 100%; margin-left: calc(var(--aox-spacing-xxxl) * 2); } .mod_navaox nav .ctn_lvl-01_navaox { display: flex; height: 100%; } .mod_navaox nav > ul > li { padding: 0 var(--aox-24px); } .mod_navaox nav > ul > li:first-of-type { padding-left: 0; } .mod_navaox nav > ul > li:last-of-type { padding-right: 0; } .mod_navaox nav > ul > li > span { position: relative; z-index: 10; display: flex; flex-direction: column; justify-content: center; height: 100%; } .mod_navaox nav > ul > li > span > a, .mod_navaox nav > ul > li > span > button { position: relative; display: flex; font-weight: 500; font-size: var(--aox-fs-16px); line-height: var(--aox-lh-100); color: currentColor; text-transform: uppercase; text-align: left; transition: var(--aox-transition-default); } .mod_navaox nav > ul > li > span > a:hover, .mod_navaox nav > ul > li > span > a:focus, .mod_navaox nav > ul > li > span > button:hover, .mod_navaox nav > ul > li > span > button:focus { opacity: 1; } .mod_navaox nav > ul > li > span > a svg, .mod_navaox nav > ul > li > span > button svg{ transition: var(--aox-transition-default); } /* .mod_navaox nav > ul > li > span > a:hover svg, .mod_navaox nav > ul > li > span > a:focus svg, .mod_navaox nav > ul > li > span > button:hover svg, .mod_navaox nav > ul > li > span > button:focus svg { opacity: 0.5; } */ /***/ .mod_navaox nav.ctn_main_navaox > ul > li.has-sub-level > span > a, .mod_navaox nav.ctn_main_navaox > ul > li.has-sub-level > span > button { padding-right: var(--aox-20px); } .mod_navaox nav.ctn_main_navaox > ul > li.has-sub-level > span > a::before, .mod_navaox nav.ctn_main_navaox > ul > li.has-sub-level > span > button::before { content: ""; position: absolute; top: 40%; right: 0; display: block; height: var(--aox-8px); width: var(--aox-8px); transform: translateY(-50%) rotate(45deg); border-right: var(--aox-2px) solid currentColor; border-bottom: var(--aox-2px) solid currentColor; } /***/ .mod_navaox nav.ctn_second_navaox { margin-left: auto; } .mod_navaox nav.ctn_second_navaox li.has-sub-level { position: relative; } .mod_navaox nav.ctn_second_navaox > ul > li { padding: 0 var(--aox-8px); } .mod_navaox nav.ctn_second_navaox > ul > li > span > a svg, .mod_navaox nav.ctn_second_navaox > ul > li > span > button svg { height: fit-content; width: var(--aox-32px); fill: currentColor; } .mod_navaox nav.ctn_second_navaox .ctn_sub_navaox { z-index: 15; top: var(--aox-100px); } /***/ .mod_navaox nav > ul > li.var_language > span { position: relative; } .mod_navaox nav > ul > li.var_language > span > button { padding-right: var(--aox-20px); } .mod_navaox nav > ul > li.var_language > span > button::before { content: ""; position: absolute; top: 40%; right: 0; display: block; height: var(--aox-8px); width: var(--aox-8px); transform: translateY(-50%) rotate(45deg); border-right: var(--aox-2px) solid currentColor; border-bottom: var(--aox-2px) solid currentColor; transition: var(--aox-transition-default); } .mod_navaox nav > ul > li.var_language .ctn_sub_navaox{ left:0; top:var(--aox-50px); width:var(--aox-60px); box-shadow:0 0 var(--aox-5px) 0 rgba(0,0,0,0.1); transform:none; } .mod_navaox nav > ul > li.var_language .ctn_sub_navaox .str_container_navaox{ padding:0; } .mod_navaox nav > ul > li.var_language .ctn_sub_navaox .str_container_navaox .ctn_col_navaox{ width:100%; } .mod_navaox nav > ul > li.var_language .ctn_subcol_navaox li + li{ margin-top:0 !important; } .mod_navaox nav > ul > li.var_language .ctn_subcol_navaox li a{ display:block; padding:var(--aox-7px) var(--aox-10px); transition:color var(--aox-transition-duration) ease; } .mod_navaox nav > ul > li.var_language .ctn_subcol_navaox li a:focus{ outline-width:2px; outline-offset:-2px; } .mod_navaox nav > ul > li.var_language .ctn_subcol_navaox li a.current{ background: var(--aox-color-primary-900); color:#fff; } .mod_navaox nav > ul > li.var_language .ctn_subcol_navaox li a.current:hover, .mod_navaox nav > ul > li.var_language .ctn_subcol_navaox li a.current:focus{ color:white !important; } .mod_navaox nav > ul > li.var_language .ctn_subcol_navaox li:first-of-type a{ padding-top:var(--aox-10px); } /***/ .mod_navaox .mobile_navaox{ display:none; } .overlay_navaox{ display:none; position:fixed; z-index:999; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.6); } /***/ .mod_navaox .ctn_sub_navaox { visibility: hidden; position: absolute; z-index: 5; top: 0; left: 50%; height: 0; width: 100vw; overflow: hidden; transform: translateX(-50%); background: #fff; transition: var(--aox-transition-default); } .mod_navaox .ctn_sub_navaox .str_container_navaox { display: flex; width: 100%; max-width: var(--aox-grid); margin: 0 auto; padding: var(--aox-250px) 0 var(--aox-130px) 0; } .mod_navaox .ctn_sub_navaox .str_container_navaox > * + * { margin-left: var(--aox-gutter); } .mod_navaox .ctn_main_navaox .ctn_col_navaox { width: var(--aox-col-3); } .mod_navaox .ctn_sub_navaox .t_title-sub_navaox { display: inline-block; font-weight: var(--aox-font-weight-strong); font-size: var(--aox-fs-20px); line-height: var(--aox-lh-100); color: var(--aox-color-primary-900); text-transform: uppercase; } .mod_navaox .ctn_sub_navaox .t_title-sub_navaox + * { margin-top: var(--aox-spacing-m); } .mod_navaox .ctn_sub_navaox .ctn_lvl-02_navaox li + li { margin-top: 0; } .mod_navaox .ctn_sub_navaox .ctn_lvl-02_navaox li + li.ctn_buttons { margin-top: var(--aox-spacing-l); } .mod_navaox .ctn_sub_navaox .ctn_lvl-02_navaox li a { font-size: var(--aox-fs-16px); } .mod_navaox .ctn_sub_navaox .ctn_col_navaox.var_intro { width:var(--aox-col-4); } .mod_navaox .ctn_sub_navaox .ctn_col_navaox.var_intro + .ctn_col_navaox { margin-left: calc(var(--aox-gutter) + var(--aox-col) + var(--aox-gutter)); } .mod_navaox .ctn_sub_navaox .ctn_col_navaox.var_intro .t_title-sub_navaox { position: absolute; top: var(180px); font-weight: var(--aox-font-weight); font-size: var(--aox-fs-60px); text-transform: inherit; } .mod_navaox .ctn_sub_navaox .ctn_lvl-02_navaox li a.btn_delete{ font-size:var(--aox-fs-11px); } .mod_navaox .ctn_sub_navaox .ctn_lvl-02_navaox + .ctn_cta{ margin-top:var(--aox-30px); } .mod_navaox .ctn_sub_navaox .ctn_cta + .ctn_cta{ margin-top:var(--aox-20px); } .mod_navaox nav > ul > li.has-triangle.is-active::before{ content:''; position:absolute; z-index:1; left:50%; bottom:0; width:0; height:0; border-style:solid; border-width:0 var(--aox-10px) var(--aox-12px) var(--aox-10px); border-color:transparent transparent #fff transparent; transform:translateX(-50%); } .mod_navaox nav > ul > li.var_mini-cart .ctn_sub_navaox{ left:auto; right:calc(var(--aox-30px) * -1); width:var(--aox-450px); transform:none; box-shadow:0 0 var(--aox-30px) 0 rgba(0,0,0,0.15); } .mod_navaox nav > ul > li.var_mini-cart .ctn_sub_navaox .str_container_navaox{ padding:0; } .mod_navaox nav > ul > li.var_mini-cart .ctn_sub_navaox .str_container_navaox .ctn_col_navaox{ width:100%; } .mod_navaox nav > ul > li.var_informations .ctn_sub_navaox{ left:auto; right:calc(var(--aox-30px) * -1); width:auto; box-shadow:0 0 var(--aox-30px) 0 rgba(0,0,0,0.15); transform:none; } .mod_navaox nav > ul > li.var_informations .ctn_sub_navaox .str_container_navaox{ padding:var(--aox-20px); } .mod_navaox nav > ul > li.var_informations .ctn_sub_navaox .ctn_lvl-02_navaox:not(.obj_push-grid) li{ white-space:nowrap; } .mod_navaox nav > ul > li.var_informations .ctn_sub_navaox .ctn_lvl-02_navaox:not(.obj_push-grid) li + li{ margin-top: var(--aox-spacing-s); } .mod_navaox nav > ul > li.var_compte .ctn_sub_navaox{ left:auto; right:calc(var(--aox-30px) * -1); width:auto; box-shadow:0 0 var(--aox-30px) 0 rgba(0,0,0,0.15); transform:none; } .mod_navaox nav > ul > li.var_compte .ctn_sub_navaox .str_container_navaox{ padding:var(--aox-20px); } .mod_navaox nav > ul > li.var_compte .ctn_sub_navaox .ctn_lvl-02_navaox:not(.obj_push-grid) li{ white-space:nowrap; } .mod_navaox nav > ul > li.var_compte .ctn_sub_navaox .ctn_lvl-02_navaox:not(.obj_push-grid) li + li{ margin-top: var(--aox-spacing-s); } .mod_navaox nav > ul > li.var_compte .ctn_sub_navaox .ctn_lvl-02_navaox:not(.obj_push-grid) li + .ctn_cta{ margin-top: var(--aox-spacing-s); } .mod_navaox .t_user-welcome{ font-size:var(--aox-fs-14px); line-height:1; text-transform:uppercase; color:rgba(var(--brand-main-color), 1); } .mod_navaox .obj_push-grid li img, .mod_navaox .obj_mini-cart .ctn_row .ctn_img img{ display:none; } .mod_navaox .is-active .obj_push-grid li img, .menu-mobile_is-opened .mod_navaox .obj_push-grid li img, .mod_navaox .is-active .obj_mini-cart .ctn_row .ctn_img img, .menu-mobile_is-opened .mod_navaox .obj_mini-cart .ctn_row .ctn_img img{ display:block; } .mod_navaox .ctn_main_navaox > ul > li > span > a, .mod_navaox .ctn_main_navaox > ul > li > span > button { padding-top: var(--aox-10px); padding-bottom: var(--aox-10px); } .mod_navaox .ctn_main_navaox > ul > li:hover > span > a, .mod_navaox .ctn_main_navaox > ul > li:hover > span > button, .mod_navaox .ctn_main_navaox > ul > li.has-sub-level.is-active > span > a, .mod_navaox .ctn_main_navaox > ul > li.has-sub-level.is-active > span > button { color: var(--aox-color-primary-900); box-shadow: inset 0px -2px 0px var(--aox-color-primary-900); } /* .mod_navaox .ctn_second_navaox > ul > li:hover > span > a, .mod_navaox .ctn_second_navaox > ul > li:hover > span > button, .mod_navaox .ctn_second_navaox > ul > li.has-sub-level.is-active > span > a, .mod_navaox .ctn_second_navaox > ul > li.has-sub-level.is-active > span > button { color: var(--aox-color-primary-900); } */ .main-header_navaox.has-background-transparent { position: absolute; } .main-header_navaox.has-background-transparent { background: linear-gradient(0deg,rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 100%); } .main-header_navaox.has-background-transparent .mod_navaox .obj_logo_navaox .v_logo.logo_white { opacity: 1; } .main-header_navaox.has-background-transparent .mod_navaox .obj_logo_navaox .v_logo.logo_blue { opacity: 0; } .main-header_navaox.has-background-transparent:not(.has-sub-level-hover) .mod_navaox nav > ul > li > span > a, .main-header_navaox.has-background-transparent:not(.has-sub-level-hover) .mod_navaox nav > ul > li > span > button { color: var(--aox-color-white); } .main-header_navaox.has-background-transparent.has-sub-level-hover .mod_navaox .obj_logo_navaox .v_logo.logo_white { opacity: 0; } .main-header_navaox.has-background-transparent.has-sub-level-hover .mod_navaox .obj_logo_navaox .v_logo.logo_blue { opacity: 1; } @media screen and (min-width:768px){ .custom_mobile_navaox{ display:none; } } @media screen and (max-width:1024px){ .mod_navaox nav.ctn_main_navaox .ctn_lvl-01_navaox{ padding-right:var(--aox-30px); } } @media screen and (max-width:767px){ .main-header_navaox, .main-header_navaox.has-background-transparent { position: fixed; top: 0; left: 0; background: var(--aox-color-white); } .main-header_navaox .mod_navaox .obj_logo_navaox .v_logo.logo_white, .main-header_navaox.has-background-transparent .mod_navaox .obj_logo_navaox .v_logo.logo_white { opacity: 0; } .main-header_navaox .mod_navaox .obj_logo_navaox .v_logo.logo_white, .main-header_navaox.has-background-transparent .mod_navaox .obj_logo_navaox .v_logo.logo_blue { opacity: 1; } .mod_navaox > .str_container_navaox { width: 100vw; height: var(--aox-80px); padding: 0 var(--aox-external-gutter); } .mod_navaox .obj_logo_navaox { height: var(--aox-70px); width: var(--aox-100px); margin: var(--aox-5px) auto; } .menu-mobile_is-opening.menu-mobile_is-opened .mod_navaox .obj_logo_navaox{ opacity: 0; visibility: hidden; } .menu-mobile_is-opened .main-header_navaox{ position:relative; left:auto; top:auto; } body.navaox_is-opened{ overflow:hidden; position:fixed; width:100%; height:100%; } body.navaox_is-opening.navaox_is-opened main, body.navaox_is-opening.navaox_is-opened .bloc_footer-main{ visibility:hidden; } .mod_navaox .btn_burger_navaox{ position: fixed; z-index: 2; top: var(--aox-32px); left: var(--aox-external-gutter); width: var(--aox-18px); height: var(--aox-16px); color: var(--aox-color-default); transform: translateX(-100vw); } .mod_navaox .btn_burger_navaox .close-text{ display:none; } .mod_navaox .btn_burger_navaox.is-active .close-text{ display:block; } .mod_navaox .btn_burger_navaox.is-active .open-text{ display:none; } .mod_navaox .btn_burger_navaox .i_stroke{ position:absolute; left:50%; top:50%; width:100%; height:2px; background: currentColor; transform:translate(-50%,-50%); transition: var(--aox-transition-default); } .mod_navaox .btn_burger_navaox::before, .mod_navaox .btn_burger_navaox::after{ position:absolute; left:50%; width:100%; height:2px; background: currentColor; transform:translateX(-50%); content:''; transition: var(--aox-transition-default); } .mod_navaox .btn_burger_navaox::before{ top: 0; } .mod_navaox .btn_burger_navaox::after{ bottom: 0; } .menu-mobile_is-opening .mod_navaox .btn_burger_navaox { left: var(--aox-external-gutter); transform: translateX(0); } .menu-mobile_is-opening .mod_navaox .btn_burger_navaox .i_stroke{ width:0; } .menu-mobile_is-opening .mod_navaox .btn_burger_navaox::before, .menu-mobile_is-opening .mod_navaox .btn_burger_navaox::after{ width:130%; } .menu-mobile_is-opening .mod_navaox .btn_burger_navaox::before{ top:45%; transform:translateX(-50%) rotate(45deg); } .menu-mobile_is-opening .mod_navaox .btn_burger_navaox::after{ bottom:45%; transform:translateX(-50%) rotate(-45deg); } .mod_navaox .ctn_navaox, .mod_navaox .ctn_main_navaox, .mod_navaox .ctn_second_navaox{ display:none; } .mod_navaox .mobile_navaox{ position:fixed; z-index:1; display:block; right:0; top:0; width:100%; height:100%; transition: var(--aox-transition-default); transform:translateX(100vw); } .menu-mobile_is-opening .mod_navaox .mobile_navaox{ transform:translateX(0); } .mod_navaox .mobile_navaox .ctn_header-mobile_navaox { position: fixed; z-index: 1000; top: var(--aox-70px); left: 0; display: flex; align-items: center; height: var(--aox-30px); width: 100%; padding: 0 var(--aox-external-gutter); background: #fff; } .mod_navaox .mobile_navaox .ctn_panels_navaox[data-level="1"] .ctn_header-mobile_navaox { display: none; } .mod_navaox .mobile_navaox .ctn_header-mobile_navaox .obj_btn_back_mob_navaox { position: relative; display: flex; flex-direction: row; align-items: center; gap: var(--aox-spacing-m); height: 100%; width: 100%; } .mod_navaox .mobile_navaox .ctn_header-mobile_navaox .obj_btn_back_mob_navaox::before { content: ""; height: var(--aox-8px); width: var(--aox-8px); border-left: solid var(--aox-2px) currentColor; border-bottom: solid var(--aox-2px) currentColor; transform: rotate(45deg); } .mod_navaox .mobile_navaox .ctn_header-mobile_navaox .obj_btn_back_mob_navaox span { font-weight: var(--aox-font-weight-strong); font-size: var(--aox-fs-14px); line-height: var(--aox-lh-100); text-transform: uppercase; } .mod_navaox .mobile_navaox .ctn_back_navaox{ position:relative; width:100%; height:var(--aox-6px); background:#fff; } .mod_navaox .mobile_navaox .ctn_panels_navaox { position: relative; z-index: 1; height: 100vh; padding-top: var(--aox-100px); overflow: hidden; background: #fff; transition: var(--aox-transition-default); } .mod_navaox .mobile_navaox .ctn_panel_navaox{ visibility:hidden; position:absolute; left:0; top:var(--aox-100px); width:100vw; height:calc(100vh - var(--aox-100px)); overflow-x:hidden; overflow-y:auto; transition-duration:var(--aox-transition-duration); transition-timing-function:cubic-bezier(0.4,0,0.2,1); background:#fff; } .mod_navaox .mobile_navaox .ctn_panel_navaox > ul{ display:flex; flex-direction:column; background:#fff; } .mod_navaox .mobile_navaox .ctn_panels_navaox[data-level="1"] .ctn_panel_navaox.level-01{ transform:translateX(0); } .mod_navaox .mobile_navaox .ctn_panels_navaox[data-level="1"] .ctn_panel_navaox.level-02, .mod_navaox .mobile_navaox .ctn_panels_navaox[data-level="1"] .ctn_panel_navaox.level-03{ transform:translateX(100vw); } .mod_navaox .mobile_navaox .ctn_panels_navaox[data-level="2"] .ctn_panel_navaox.level-01{ transform:translateX(-10vw); } .mod_navaox .mobile_navaox .ctn_panels_navaox[data-level="2"] .ctn_panel_navaox.level-02{ transform:translateX(0); } .mod_navaox .mobile_navaox .ctn_panels_navaox[data-level="2"] .ctn_panel_navaox.level-03{ transform:translateX(100vw); } .mod_navaox .mobile_navaox .ctn_panels_navaox[data-level="3"] .ctn_panel_navaox.level-01, .mod_navaox .mobile_navaox .ctn_panels_navaox[data-level="3"] .ctn_panel_navaox.level-02{ transform:translateX(-10vw); } .mod_navaox .mobile_navaox .ctn_panels_navaox[data-level="3"] .ctn_panel_navaox.level-03{ transform:translateX(0); } .navaox_is-opening .mod_navaox .mobile_navaox .ctn_panels_navaox[data-level="1"] .ctn_panel_navaox.level-01, .navaox_is-opening .mod_navaox .mobile_navaox .ctn_panels_navaox[data-level="2"] .ctn_panel_navaox.level-02, .navaox_is-opening .mod_navaox .mobile_navaox .ctn_panels_navaox[data-level="3"] .ctn_panel_navaox.level-03{ visibility:visible; } .mod_navaox .mobile_navaox ul { padding: 0 var(--aox-external-gutter); } .mod_navaox .mobile_navaox ul li + li { border-top: 1px solid var(--aox-color-grey-200); } .mod_navaox .mobile_navaox ul li a:not(.obj_button), .mod_navaox .mobile_navaox ul li button[type="button"]:not(.obj_button) { position: relative; display: flex; align-items: center; width: 100%; padding: var(--aox-spacing-m) 0; font-weight: 500; font-size: var(--aox-fs-18px); line-height: var(--aox-lh-100); color: var(--aox-color-black); text-transform: uppercase; text-align: left; } .mod_navaox .mobile_navaox ul li .obj_button { margin-top: var(--aox-spacing-l); margin-bottom: var(--aox-spacing-l); } .mod_navaox .mobile_navaox ul li button[type="button"]::before { content: ""; position: absolute; top:50%; right: 0; height: var(--aox-8px); width: var(--aox-8px); border-top: solid var(--aox-2px) currentColor; border-right: solid var(--aox-2px) currentColor; transform: translateY(-50%) rotate(45deg); } .mod_navaox .mobile_navaox ul li button[type="button"].btn_function::before, .mod_navaox .mobile_navaox ul li button[type="button"].btn_delete::before { display: none; } .mod_navaox .mobile_navaox .ctn_nav-list { background: #fff; } .mod_navaox .mobile_navaox .ctn_nav-list .t_title-sub_navaox { padding: var(--aox-spacing-m) var(--aox-external-gutter); } .mod_navaox .mobile_navaox .ctn_nav-list .t_title-sub_navaox a, .mod_navaox .mobile_navaox .ctn_nav-list .t_title-sub_navaox span { font-weight: 300; font-size: var(--aox-fs-30px); line-height: var(--aox-lh-100); color: var(--aox-color-primary-900); } .mod_navaox .mobile_navaox .ctn_nav-list .t_title-sub_navaox svg { display: none; } .menu-mobile_is-opened .mod_navaox > .str_container_navaox { display: block; padding: 0; min-height: 100vh; } .mod_navaox .mobile_navaox .ctn_panel_navaox > ul li .t_aria-label, .mod_navaox .mobile_navaox .t_title-sub_navaox .t_aria-label{ position:relative; width:auto; height:auto; overflow:visible; } .mod_navaox .mobile_navaox .ctn_panel_navaox > ul li .t_aria-label{ padding-left:var(--aox-12px); } /* .mod_navaox .mobile_navaox .obj_push-grid li{ width:50%; height:47vw; border:none; } .mod_navaox .mobile_navaox .obj_push-grid li a{ align-items:flex-start !important; padding:0 !important; } .mod_navaox .mobile_navaox .obj_push-grid li a::after{ display:none; } */ .custom_mobile_navaox{ position:absolute; display:flex; align-items:center; right:var(--aox-30px); top:0; height:100%; } .menu-mobile_is-opening.menu-mobile_is-opened .custom_mobile_navaox{ visibility:hidden; } .custom_mobile_navaox li{ margin:0 var(--aox-8px); } .custom_mobile_navaox li:first-of-type{ margin-left:0; } .custom_mobile_navaox li:last-of-type{ margin-right:0; } .custom_mobile_navaox li svg{ width:var(--aox-32px); height:fit-content; } .mod_navaox .mobile_navaox .obj_mini-cart{ padding-top:0; } .mod_navaox .t_user-welcome{ display:block; padding:var(--aox-10px) var(--aox-30px); } .mod_navaox .obj_cta-disconnect::before{ left:var(--aox-30px); transform:rotate(45deg) translateY(-100%); } .mod_navaox .obj_cta-disconnect::after{ left:var(--aox-33px); } .mod_navaox .obj_cta-disconnect span{ padding-left:var(--aox-18px); font-size:var(--aox-fs-14px); } } /* ======================================== */ /* section_footer /* ======================================== */ .section_footer { font-size: var(--aox-fs-16px); color: var(--aox-color-white); background: var(--aox-color-primary-900); } .section_footer .ctn_section { padding: var(--aox-96px) 0 var(--aox-32px) 0; } .section_footer .ctn_section > * + * { margin-top: var(--aox-spacing-xxl); } /*** ctn_top ***/ .section_footer .ctn_top { display: flex; flex-direction: row; justify-content: space-between; } .section_footer .ctn_top .ctn_logo > * + * { margin-top: var(--aox-spacing-l); } .section_footer .ctn_top .ctn_logo { display: block; width: var(--aox-208px); } .section_footer .ctn_top .ctn_logo .v_tsgmb { display: block; width: 100%; } .section_footer .ctn_top .ctn_nav > * + * { margin-top: var(--aox-spacing-m); } .section_footer .ctn_top .ctn_nav .t_title { font-weight: var(--aox-font-weight-strong); font-size: var(--aox-fs-16px); color: var(--aox-color-white); text-transform: uppercase; } .section_footer .ctn_top .ctn_nav ul li a { color: var(--aox-color-white); text-decoration: none; } .section_footer .ctn_top .ctn_nav ul li a:hover { opacity: 0.5; } .section_footer .ctn_top .ctn_social > * + * { margin-top: var(--aox-spacing-xxl); } .section_footer .ctn_top .ctn_social .ctn_nav ul { display: flex; flex-direction: row; align-items: center; gap: var(--aox-spacing-l); } .section_footer .ctn_top .ctn_social .ctn_nav ul li a { display: flex; flex-direction: row; align-items: center; gap: var(--aox-spacing-s); } /*** ctn_bottom ***/ .section_footer .ctn_bottom { padding-top: var(--aox-spacing-xl); border-top: solid 1px rgba(255, 255, 255, 0.2); } .section_footer .ctn_bottom > * + * { margin-top: var(--aox-spacing-l); } .section_footer .ctn_bottom .v_aquacert { display: block; width: var(--aox-90px); margin: 0 auto; } .section_footer .ctn_bottom .ctn_nav ul { display: flex; flex-direction: row; justify-content: center; gap: var(--aox-spacing-l); } .section_footer .ctn_bottom .ctn_nav ul li a { font-size: var(--aox-fs-14px); color: var(--aox-color-white); text-decoration: none; } .section_footer .ctn_bottom .ctn_nav ul li a:hover { opacity: 0.5; } /***/ @media screen and (max-width: 767px) { .section_footer .ctn_section { padding: var(--aox-48px) 0 calc(var(--aox-spacing-xl) + var(--aox-88px)) 0; } /*** ctn_top ***/ .section_footer .ctn_top { flex-direction: column; justify-content: flex-end; gap: var(--aox-spacing-l); } .section_footer .ctn_top .ctn_logo { width: var(--aox-160px); } .section_footer .ctn_top .ctn_nav > * + * { margin-top: var(--aox-spacing-s); } .section_footer .ctn_top .ctn_social > * + * { margin-top: var(--aox-spacing-xl); } /*** ctn_bottom ***/ .section_footer .ctn_bottom .v_aquacert { display: block; width: var(--aox-90px); margin: 0 auto; } .section_footer .ctn_bottom .ctn_nav ul { flex-wrap: wrap; gap: 0 var(--aox-spacing-l); } } /* ======================================== */ /* obj_sticky-buttons /* ======================================== */ .obj_sticky-buttons { position: fixed; bottom: var(--aox-spacing-l); right: var(--aox-spacing-l); z-index: 999; display: flex; flex-direction: column; align-items: flex-end; gap: var(--aox-spacing-s); } .obj_sticky-buttons .obj_sticky { position: relative; display: flex; flex-direction: column; align-items: flex-end; } .obj_sticky-buttons .obj_sticky .ctn_sticky { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--aox-spacing-s); padding: var(--aox-12px) var(--aox-spacing-xl) var(--aox-12px) var(--aox-spacing-l); font-weight: var(--aox-font-weight-strong); font-size: var(--aox-fs-14px); line-height: var(--aox-32px); text-transform: uppercase; color: var(--aox-color-primary-900); border-radius: var(--aox-30px); box-shadow: 0 var(--aox-4px) var(--aox-20px) 0 rgba(0, 0, 0, 0.20); background-color: white; cursor: pointer; transition: color var(--aox-transition-duration) var(--aox-transition-timing-function), background-color var(--aox-transition-duration) var(--aox-transition-timing-function); } .obj_sticky-buttons .obj_sticky .ctn_sticky svg { fill: currentColor; } .obj_sticky-buttons .obj_sticky .ctn_sticky:hover { color: var(--aox-color-white); background: var(--aox-color-primary-900); } .obj_sticky-buttons .obj_sticky .ctn_sticky-nav { position: relative; width: var(--aox-380px); padding: var(--aox-spacing-xl) var(--aox-spacing-2xl) var(--aox-spacing-3xl) var(--aox-spacing-l); border-radius: var(--aox-30px); box-shadow: 0 var(--aox-4px) var(--aox-20px) 0 rgba(0, 0, 0, 0.20); background-color: white; cursor: pointer; } .obj_sticky-buttons .obj_sticky .ctn_sticky-nav ul > * + * { margin-top: var(--aox-spacing-m); } .obj_sticky-buttons .obj_sticky .ctn_sticky-nav ul li { font-weight: var(--aox-font-weight-strong); font-size: var(--aox-fs-16px); text-transform: uppercase; text-align: right; color: var(--aox-color-primary-900); } .obj_sticky-buttons .obj_sticky .ctn_sticky-nav ul li a { color: var(--aox-color-primary-900); } .obj_sticky-buttons .obj_sticky .ctn_sticky-nav .obj_button.button_close { position: absolute; right: var(--aox-spacing-m); bottom: var(--aox-spacing-m); transition: var(--aox-transition-default); } /***/ @media screen and (max-width: 767px) { .obj_sticky-buttons { left: 0; right: 0; bottom: 0; flex-direction: row; justify-content: center; gap: var(--aox-spacing-m); padding: var(--aox-spacing-m) var(--aox-external-gutter); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .obj_sticky-buttons .obj_sticky { width: 100%; } .obj_sticky-buttons .obj_sticky .ctn_sticky { width: 100%; } .obj_sticky-buttons .obj_sticky .ctn_sticky-nav { position: fixed; z-index: 2; left: var(--aox-external-gutter); right: var(--aox-external-gutter); bottom: var(--aox-spacing-m); width: calc(100% - var(--aox-external-gutter) - var(--aox-external-gutter)); } } /* ======================================== */ /* .section_article-hero /* ======================================== */ .section_article-hero { position: relative; } .section_article-hero::after { content: ""; display: block; height: calc(var(--aox-400px) + var(--aox-24px)); width: calc(var(--aox-1100px) + var(--aox-95px)); position: absolute; right: calc(var(--aox-external-gutter) + var(--aox-col-7-gutter)); bottom: calc(var(--aox-50px) * -1); background: url("../images/v_mountain.svg") no-repeat center center / contain transparent; } .section_article-hero .ctn_section { position: relative; z-index: 2; display: flex; flex-direction: row; gap: var(--aox-col); width: 100%; padding: 0 0 0 calc(var(--aox-external-gutter) + var(--aox-col-gutter)); } .section_article-hero .ctn_content { width: var(--aox-col-8-gutter); padding-top: var(--aox-gutter); } .section_article-hero .ctn_content:not(:only-child) { width: var(--aox-col-4-gutter); } .section_article-hero .ctn_content > * + * { margin-top: var(--aox-spacing-l); } .section_article-hero .ctn_content .obj_text .ctn_text { padding-right: var(--aox-gutter); } .section_article-hero .ctn_content .obj_text .ctn_text-header .t_title { font-size: var(--aox-fs-60px); } .section_article-hero .ctn_content .obj_text .ctn_text .t_price { font-size: var(--aox-fs-14px); line-height: var(--aox-lh-120); } .section_article-hero .ctn_content .obj_text .ctn_text .t_price strong { display: block; font-weight: var(--aox-font-weight-strong); font-size: var(--aox-fs-28px); } .section_article-hero .ctn_media { width: calc(var(--aox-col-6-gutter) + var(--aox-external-gutter)); } /***/ @media screen and (max-width: 767px) { .section_article-hero::after { content: none; } .section_article-hero .ctn_section { flex-direction: column-reverse; gap: var(--aox-75px); padding: 0; } .section_article-hero .ctn_content, .section_article-hero .ctn_content:not(:only-child) { width: 100%; padding: 0 var(--aox-external-gutter); } .section_article-hero .ctn_content > * + * { margin-top: var(--aox-spacing-m); } .section_article-hero .ctn_content .obj_breadcrumb { position: absolute; z-index: 2; top: var(--aox-10px); left: var(--aox-external-gutter); color: var(--aox-color-default); } .section_article-hero .ctn_content:not(:only-child) .obj_breadcrumb { top: var(--aox-250px); } .section_article-hero .ctn_content .obj_text { padding-top: var(--aox-70px); } .section_article-hero .ctn_content:not(:only-child) .obj_text { padding-top: 0; } .section_article-hero .ctn_content .obj_breadcrumb + * { margin-top: 0; } .section_article-hero .ctn_content .obj_text .ctn_text { padding-right: 0; } .section_article-hero .ctn_content .obj_text .ctn_text-header .t_title { font-size: var(--aox-fs-40px); } .section_article-hero .ctn_media { width: 100%; height: var(--aox-240px); } .section_article-hero .ctn_media .obj_image { height: 100%; } .section_article-hero .ctn_media .obj_image img { height: 100%; object-fit: cover; } } /* ======================================== */ /* .section_why /* ======================================== */ .section_why .ctn_section { display: flex; flex-direction: row; gap: var(--aox-col); padding: 0 var(--aox-col-gutter); } .section_why .ctn_title { width: var(--aox-col-4-gutter); } .section_why .ctn_title::after { content: ""; display: block; margin-top: var(--aox-spacing-xl); height: var(--aox-39px); width: calc(var(--aox-200px) + var(--aox-32px)); background: url("../images/v_wave.svg") no-repeat center center / contain transparent; } .section_why .ctn_content { width: var(--aox-col-5-gutter); } /***/ @media screen and (max-width: 767px) { .section_why .ctn_section { flex-direction: column; gap: var(--aox-spacing-xl); padding: 0; } .section_why .ctn_title { width: 100%; } .section_why .ctn_content { width: 100%; } } /* ======================================== */ /* .section_products /* ======================================== */ .section_products { position: relative; background-color: var(--aox-color-primary-300); } .section_products .ctn_section { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; min-height: var(--aox-700px); padding: var(--aox-130px) 0 var(--aox-130px) var(--aox-col-gutter); } .section_products .ctn_content { width: var(--aox-col-5); } .section_products .ctn_background { position: absolute; top: 0; left: 0; z-index: 1; height: 100%; width: 100%; } /***/ @media screen and (max-width: 767px) { .section_products .ctn_section { justify-content: flex-start; min-height: var(--aox-710px); padding: var(--aox-spacing-xxl) 0; } .section_products .ctn_text { width: 100%; } .section_products .ctn_background { position: absolute; top: 0; left: 0; z-index: 1; height: 100%; width: 100%; } } /* ======================================== */ /* .section_testimonies /* ======================================== */ .section_testimonies { position: relative; background-color: var(--aox-color-grey-100); } .section_testimonies .ctn_section { padding: var(--aox-col-gutter) 0; } .section_testimonies .ctn_section > * + * { margin-top: var(--aox-spacing-xxxl); } .section_testimonies .ctn_title { text-align: center; } .section_testimonies .ctn_testimonies { display: flex; flex-direction: row; justify-content: center; gap: var(--aox-gutter); } .section_testimonies .ctn_testimonies .ctn_testimony { width: var(--aox-col-4); padding: var(--aox-spacing-xxxl); background: url("../images/v_testimony.svg") no-repeat bottom calc(var(--aox-spacing-m) * -1) right var(--aox-spacing-l) / auto auto var(--aox-color-white); box-shadow: 0 var(--aox-8px) var(--aox-34px) calc(var(--aox-10px) * -1) rgba(0, 0, 0, 0.10); } .section_testimonies .ctn_testimonies .ctn_testimony > * + * { margin-top: var(--aox-spacing-m); } .section_testimonies .ctn_testimonies .ctn_testimony .t_author { font-weight: 600; color: var(--aox-color-primary-900); } /***/ @media screen and (max-width: 767px) { .section_testimonies .ctn_section { padding: var(--aox-spacing-xxl) 0; } .section_testimonies .ctn_section > * + * { margin-top: var(--aox-spacing-xl); } .section_testimonies .ctn_title { text-align: left; } .section_testimonies .ctn_testimonies { flex-direction: column; } .section_testimonies .ctn_testimonies .ctn_testimony { width: 100%; padding: var(--aox-spacing-xl); background-size: var(--aox-110px) auto; } } /* ======================================== */ /* .section_steps /* ======================================== */ .section_steps .ctn_section { padding: 0 var(--aox-col-gutter); } .section_steps .ctn_section > * + * { margin-top: var(--aox-spacing-xxxl); } .section_steps .ctn_title::after { content: ""; display: block; margin-top: var(--aox-spacing-l); height: var(--aox-39px); width: calc(var(--aox-200px) + var(--aox-32px)); background: url("../images/v_wave.svg") no-repeat center center / contain transparent; } .section_steps .ctn_steps { display: flex; flex-direction: row; justify-content: center; gap: var(--aox-gutter); } .section_steps .ctn_steps .ctn_step { width: var(--aox-col-4); } .section_steps .ctn_steps .ctn_step .obj_text .ctn_text-header .t_title { display: flex; flex-direction: row; align-items: flex-end; gap: var(--aox-spacing-m); font-weight: var(--aox-font-weight-strong); font-size: var(--aox-fs-20px); text-transform: uppercase; } .section_steps .ctn_steps .ctn_step .obj_text .ctn_text-header .t_title span { font-weight: 300; font-size: var(--aox-fs-80px); line-height: var(--aox-lh-80); } .section_steps .ctn_steps .ctn_step .obj_text .ctn_text { padding-right: var(--aox-spacing-l); } /***/ @media screen and (max-width: 767px) { .section_steps .ctn_section { padding: 0; } .section_steps .ctn_section > * + * { margin-top: var(--aox-spacing-xl); } .section_steps .ctn_title::after { content: none; } .section_steps .ctn_steps { flex-direction: column; justify-content: flex-start; gap: var(--aox-spacing-xl); } .section_steps .ctn_steps .ctn_step { width: 100%; } .section_steps .ctn_steps .ctn_step > * + * { margin-top: var(--aox-spacing-m); } .section_steps .ctn_steps .ctn_step .t_subtitle span { font-size: var(--aox-fs-60px); } .section_steps .ctn_steps .ctn_step p { padding-right: 0; } } /* ======================================== */ /* .section_articles-list /* ======================================== */ .section_articles-list .ctn_section { padding: 0 var(--aox-col-gutter); } .section_articles-list .ctn_section > * + * { margin-top: var(--aox-spacing-xxxl); } .section_articles-list .ctn_title { padding-right: var(--aox-col); } .section_articles-list .ctn_title > * + * { margin-top: var(--aox-spacing-m); } .section_articles-list .ctn_title p { max-width: var(--aox-col-7); } .section_articles-list .ctn_articles { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--aox-spacing-xxxl) var(--aox-gutter); } .section_articles-list .ctn_articles .ctn_article { width: var(--aox-col-5); } .section_articles-list .ctn_articles .ctn_article > * + * { margin-top: var(--aox-spacing-l); } .section_articles-list .ctn_articles .ctn_article .ctn_text > * + *, .section_articles-list .ctn_articles .ctn_article .ctn_text .ctn_paragraph > * + * { margin-top: var(--aox-spacing-s); } .section_articles-list .ctn_articles .ctn_article .ctn_text .ctn_paragraph { padding-right: var(--aox-col); } .section_articles-list .ctn_articles .ctn_article .ctn_text .ctn_buttons { margin-top: var(--aox-spacing-l); } /***/ @media screen and (max-width: 767px) { .section_articles-list .ctn_section { padding: 0; } .section_articles-list .ctn_section > * + * { margin-top: var(--aox-spacing-xl); } .section_articles-list .ctn_title p { max-width: 100%; } .section_articles-list .ctn_articles { flex-direction: column; gap: var(--aox-spacing-xxxl); } .section_articles-list .ctn_articles .ctn_article { width: 100%; } .section_articles-list .ctn_articles .ctn_article > * + * { margin-top: var(--aox-spacing-m); } .section_articles-list .ctn_articles .ctn_article .ctn_text .ctn_paragraph { padding-right: 0; } } /* ======================================== */ /* .section_hero /* ======================================== */ .section_hero { position: relative; color: var(--aox-color-white); } .section_hero .ctn_section { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: var(--aox-spacing-m); min-height: var(--aox-860px); padding: var(--aox-130px) 0 var(--aox-130px) var(--aox-col-gutter); } .section_hero .ctn_content { display: flex; flex-direction: column; justify-content: center; width: var(--aox-col-6); } .section_hero .ctn_content > * + * { margin-top: var(--aox-spacing-l); } .section_hero .ctn_content .obj_text .ctn_text { max-width: var(--aox-col-4); color: inherit; } .section_hero .ctn_content .obj_text .ctn_text-header .t_title { color: inherit; } .section_hero .ctn_background { position: absolute; top: 0; left: 0; z-index: 1; height: 100%; width: 100%; } .contrast-mode .section_hero .ctn_background::before { content: ""; position: absolute; top: 0; left: 0; z-index: 2; height: 100%; width: 100%; background-color: var(--aox-color-black); opacity: 0.5; } /***/ @media screen and (max-width: 767px) { .section_hero { position: relative; display: flex; flex-direction: column-reverse; gap: var(--aox-75px); color: var(--aox-color-black); } .section_hero .ctn_section { position: static; min-height: auto; padding: 0; } .section_hero .obj_breadcrumb { position: absolute; top: var(--aox-375px); left: var(--aox-external-gutter); color: var(--aox-color-default); } .section_hero .ctn_content { justify-content: flex-start; width: 100%; } .section_hero .ctn_content .obj_text .ctn_text-header .t_title { color: var(--aox-color-primary-900); } .section_hero .ctn_content .obj_text .ctn_text { max-width: 100%; } .section_hero .ctn_background { position: static; height: var(--aox-360px); width: 100%; } } /* ======================================== */ /* .section_hero-carrousel /* ======================================== */ .section_hero-carrousel { position: relative; color: var(--aox-color-white); } .section_hero-carrousel .ctn_section { width: 100%; } .section_hero-carrousel .obj_carrousel .item { position: relative; height: var(--aox-860px); } .section_hero-carrousel .ctn_content { position: absolute; z-index: 5; left: var(--aox-external-gutter); bottom: var(--aox-80px); width: var(--aox-650px); padding: var(--aox-64px); background: rgba(0, 0, 0, 0.40); backdrop-filter: blur(var(--aox-16px)); } .section_hero-carrousel .ctn_content .obj_text .ctn_text-header .t_title, .section_hero-carrousel .ctn_content .obj_text .ctn_text { color: inherit; } .section_hero-carrousel .ctn_background { position: absolute; top: 0; left: 0; z-index: 1; height: 100%; width: 100%; } .section_hero-carrousel .ctn_background .obj_image, .section_hero-carrousel .ctn_background .obj_image .ctn_image { height: 100%; width: 100%; } .section_hero-carrousel .ctn_background .obj_image .ctn_image img { object-fit: cover; object-position: center center; } .contrast-mode .section_hero-carrousel .ctn_background::before { content: ""; position: absolute; top: 0; left: 0; z-index: 2; height: 100%; width: 100%; background-color: var(--aox-color-black); opacity: 0.5; } /***/ @media screen and (max-width: 767px) { .section_hero-carrousel { color: var(--aox-color-black); } .section_hero-carrousel .obj_carrousel .item { display: flex; flex-direction: column-reverse; align-items: center; gap: var(--aox-spacing-l); height: auto; } .obj_carrousel .nav .prev, .obj_carrousel .nav .next { top: var(--aox-180px); } .obj_carrousel .nav ul { top: var(--aox-280px); bottom: auto; } .section_hero-carrousel .ctn_content { position: static; left: auto; bottom: auto; width: var(--aox-grid); padding: 0; background: none; backdrop-filter: none; } .section_hero-carrousel .ctn_content .obj_text .ctn_text-header .t_title { color: var(--aox-color-primary-900); } .section_hero-carrousel .ctn_background { position: static; height: var(--aox-320px); } .section_hero-carrousel .ctn_background .obj_image .ctn_image img { object-fit: cover; } } /* ======================================== */ /* .section_reservation /* ======================================== */ .section_reservation { position: relative; } .section_reservation .ctn_section { display: flex; flex-direction: row; gap: var(--aox-col); padding: 0 var(--aox-col-gutter); } /***/ .section_reservation .ctn_column.column_left { width: var(--aox-col-4-gutter); } .section_reservation .ctn_column.column_left > * + * { margin-top: var(--aox-spacing-xl); } .section_reservation .ctn_column.column_left > .obj_breadcrumb + * { margin-top: var(--aox-spacing-m); } .section_reservation .ctn_column.column_left .ctn_content > * + * { margin-top: var(--aox-spacing-xl); } .section_reservation .ctn_column.column_left .ctn_product { position: relative; margin-top: var(--aox-spacing-l); } .section_reservation .ctn_column.column_left .ctn_product .t_intro { padding-right: var(--aox-130px); font-weight: var(--aox-font-weight-strong); font-size: var(--aox-fs-14px); text-transform: uppercase; } .section_reservation .ctn_column.column_left .ctn_product .t_product { padding-right: var(--aox-130px); font-weight: var(--aox-font-weight-strong); font-size: var(--aox-fs-28px); color: var(--aox-color-primary-900); } .section_reservation .ctn_column.column_left .ctn_product .t_price { position: absolute; top: 0; right: 0; width: var(--aox-130px); font-size: var(--aox-fs-14px); line-height: var(--aox-lh-120); text-align: right; } .section_reservation .ctn_column.column_left .ctn_product .t_price strong { display: block; font-weight: var(--aox-font-weight-strong); font-size: var(--aox-fs-28px); } .section_reservation .ctn_column.column_left .ctn_product .t_disclaimer { font-size: var(--aox-fs-14px); color: var(--aox-color-grey-500); } /***/ .section_reservation .ctn_column.column_right { width: var(--aox-col-5-gutter); } .section_reservation .ctn_column.column_right > * + * , .section_reservation .ctn_column.column_right > div[aox-dev] > * + * { margin-top: var(--aox-spacing-2xl); } .section_reservation .ctn_column.column_right .ctn_steps { counter-reset: step; } .section_reservation .ctn_column.column_right .obj_text .t_confirm, .section_reservation .ctn_column.column_right .obj_text.var_confirm { position: relative; padding-left: calc(var(--aox-48px) + var(--aox-spacing-m)); } .section_reservation .ctn_column.column_right .obj_text .t_confirm::before, .section_reservation .ctn_column.column_right .obj_text.var_confirm::before { content: ""; position: absolute; top: 0; left: 0; display: block; height: var(--aox-48px); width: var(--aox-48px); border-radius: 50%; background: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='48' height='48' rx='24' fill='%23DEF6E7'/%3E%3Cpath d='M21.675 31.3533C21.1391 31.3533 20.6031 31.1496 20.1956 30.7393L14.6133 25.1571C13.7956 24.3393 13.7956 23.0134 14.6133 22.1956C15.4311 21.3778 16.757 21.3778 17.5748 22.1956L21.6777 26.2986L31.3628 16.6133C32.1806 15.7956 33.5064 15.7956 34.3242 16.6133C35.142 17.4311 35.142 18.757 34.3242 19.5748L23.1598 30.7393C22.7467 31.1496 22.2136 31.3533 21.675 31.3533Z' fill='%2322C55E'/%3E%3C/svg%3E%0A") no-repeat center center / contain transparent; } .section_reservation .ctn_column.column_right .obj_text.var_confirm .ctn_text > * + * { margin-top: 0; } .section_reservation .ctn_column.column_right .obj_text .t_error { position: relative; padding-left: calc(var(--aox-48px) + var(--aox-spacing-m)); } .section_reservation .ctn_column.column_right .obj_text .t_error::before { content: ""; position: absolute; top: 0; left: 0; display: block; height: var(--aox-48px); width: var(--aox-48px); border-radius: 50%; background: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='48' height='48' rx='24' fill='%23FFE4E4'/%3E%3Crect x='33.8984' y='31.0858' width='4' height='24' rx='2' transform='rotate(135 33.8984 31.0858)' fill='%23DC2626'/%3E%3Crect x='33.8984' y='31.0858' width='4' height='24' rx='2' transform='rotate(135 33.8984 31.0858)' fill='%23DC2626'/%3E%3Crect x='33.8984' y='31.0858' width='4' height='24' rx='2' transform='rotate(135 33.8984 31.0858)' fill='%23DC2626'/%3E%3Crect width='4' height='24' rx='2' transform='matrix(0.707107 0.707107 0.707107 -0.707107 14.0996 31.0858)' fill='%23DC2626'/%3E%3Crect width='4' height='24' rx='2' transform='matrix(0.707107 0.707107 0.707107 -0.707107 14.0996 31.0858)' fill='%23DC2626'/%3E%3Crect width='4' height='24' rx='2' transform='matrix(0.707107 0.707107 0.707107 -0.707107 14.0996 31.0858)' fill='%23DC2626'/%3E%3C/svg%3E%0A") no-repeat center center / contain transparent; } .section_reservation .ctn_column.column_right > .ctn_button { display: flex; flex-direction: row; justify-content: flex-end; margin-top: var(--aox-spacing-xl); } @media screen and (max-width: 767px) { .section_reservation .ctn_column.column_left .obj_image { height: var(--aox-240px); } .section_reservation .ctn_column.column_left .obj_image img { height: 100%; object-fit: cover; } .section_reservation .ctn_column.column_left .ctn_product { order: -1; padding: 0 var(--aox-external-gutter); } .section_reservation .ctn_column.column_left .ctn_product .t_price { right: var(--aox-external-gutter); } } /* ======================================== */ /* .obj_step /* ======================================== */ .section_reservation .obj_step { position: relative; counter-increment: step; padding-bottom: var(--aox-spacing-m); } .section_reservation .obj_step::before { content: ""; position: absolute; left: var(--aox-23px); bottom: 0; display: block; height: 100%; width: var(--aox-2px); background-color: var(--aox-color-grey-200); } .section_reservation .obj_step.is_last-child::before { content: none; } .section_reservation .obj_step .ctn_step-header { display: flex; flex-direction: row; gap: var(--aox-spacing-l); } .section_reservation .obj_step .ctn_step-header .t_step { position: relative; display: block; height: var(--aox-48px); width: var(--aox-48px); min-width: var(--aox-48px); border-radius: 50%; border: solid 8px white; background-color: var(--aox-color-grey-200); } .section_reservation .obj_step .ctn_step-header .t_step::after { content: counter(step); position: absolute; top: 50%; left: 50%; font-weight: var(--aox-font-weight-strong); font-size: var(--aox-fs-18px); line-height: var(--aox-32px); color: var(--aox-color-default); text-align: center; transform: translate(-50%, -50%); } .section_reservation .obj_step .ctn_step-header .t_title { margin-top: var(--aox-12px); font-weight: 400; font-size: var(--aox-fs-20px); color: var(--aox-color-default); } .section_reservation .obj_step .ctn_step-container { display: none; position: relative; padding: var(--aox-spacing-s) 0 0 calc(var(--aox-48px) + var(--aox-spacing-l)); } .section_reservation .obj_step .ctn_step-content { position: relative; padding: var(--aox-spacing-xl); font-size: var(--aox-fs-16px); background-color: var(--aox-color-grey-100); } .section_reservation .obj_step .ctn_step-content > * + * { margin-top: var(--aox-spacing-m); } .section_reservation .obj_step .ctn_step-content .t_price { font-weight: var(--aox-font-weight-strong); font-size: var(--aox-fs-18px); } .section_reservation .obj_step .ctn_step-content .button_modify { position: absolute; top: 50%; right: var(--aox-spacing-xl); margin: 0; font-weight: 700; font-size: var(--aox-fs-14px); line-height: var(--aox-line-height); color: var(--aox-color-primary-900); text-transform: uppercase; transform: translateY(-50%); } /*** is_active ***/ .section_reservation .obj_step.is_active::before { background-color: var(--aox-color-primary-900); } .section_reservation .obj_step.is_active .ctn_step-header .t_step { border: none; background: var(--aox-color-primary-900); } .section_reservation .obj_step.is_active .ctn_step-header .t_step::after { font-size: var(--aox-fs-22px); line-height: var(--aox-48px); color: var(--aox-color-white); } .section_reservation .obj_step.is_active .ctn_step-header .t_title { font-weight: var(--aox-font-weight-strong); font-size: var(--aox-fs-24px); } .section_reservation .obj_step.is_active .ctn_step-container.step-container_active { display: block; } /*** is_completed ***/ .section_reservation .obj_step.is_completed::before { background-color: var(--aox-color-valid); } .section_reservation .obj_step.is_completed .ctn_step-header .t_step { border: none; background-color: #DEF6E7; } .section_reservation .obj_step.is_completed .ctn_step-header .t_step::after { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='16' viewBox='0 0 21 16' fill='none'%3E%3Cpath d='M7.67495 15.3533C7.13906 15.3533 6.60308 15.1496 6.19558 14.7393L0.613348 9.15705C-0.204449 8.33926 -0.204449 7.01338 0.613348 6.19558C1.43115 5.37778 2.75702 5.37778 3.57482 6.19558L7.67768 10.2986L17.3628 0.613348C18.1806 -0.204449 19.5064 -0.204449 20.3242 0.613348C21.142 1.43115 21.142 2.75702 20.3242 3.57482L9.15978 14.7393C8.74669 15.1496 8.21364 15.3533 7.67495 15.3533Z' fill='%2322C55E'/%3E%3C/svg%3E"); } .section_reservation .obj_step.is_completed .ctn_step-container.step-container_completed { display: block; } .section_reservation .obj_step.is_completed .ctn_step-content { padding: var(--aox-spacing-m) var(--aox-col-gutter) var(--aox-spacing-m) var(--aox-spacing-l); } /* ======================================== */ /* .obj_push /* ======================================== */ .section_reservation .obj_push { position: relative; padding: var(--aox-spacing-l); } .section_reservation .obj_push .ctn_push { position: relative; } .section_reservation .obj_push .ctn_push .obj_text { position: relative; z-index: 2; color: var(--aox-color-white); } .section_reservation .obj_push .ctn_push .obj_text .ctn_text { max-width: var(--aox-360px); font-size: var(--aox-fs-14px); color: var(--aox-color-white); } .section_reservation .obj_push .ctn_push .obj_text .ctn_text > * + * { margin-top: var(--aox-spacing-s); } .section_reservation .obj_push .ctn_push .obj_text .ctn_text .t_title { color: var(--aox-color-white); } .section_reservation .obj_push .ctn_push-background { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .contrast-mode .section_reservation .obj_push .ctn_push-background::before { content: ""; position: absolute; top: 0; left: 0; z-index: 2; height: 100%; width: 100%; background-color: var(--aox-color-black); opacity: 0.5; } /* ======================================== */ /* .obj_item /* ======================================== */ .obj_item > * + * { margin-top: var(--aox-spacing-m); } /***/ .obj_item .ctn_item-header { display: flex; flex-direction: row; gap: var(--aox-spacing-m); } .obj_item .ctn_item-header .v_icon { position: relative; display: block; height: var(--aox-48px); width: var(--aox-48px); border-radius: 50%; background-color: var(--aox-color-primary-900); } .obj_item .ctn_item-header .v_icon img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .obj_item .ctn_item-header .t_title { font-weight: var(--aox-font-weight-strong); font-size: var(--aox-fs-20px); line-height: var(--aox-48px); text-transform: uppercase; } /***/ .obj_item .ctn_item { padding: var(--aox-spacing-xl); background: var(--aox-color-grey-100); } .obj_item .ctn_item > * + * { margin-top: var(--aox-spacing-xl); } .obj_item .ctn_item > .obj_toggle + .obj_toggle { margin-top: var(--aox-spacing-m); } .obj_item .ctn_item .obj_text .ctn_text p small { font-size: var(--aox-fs-14px); color: var(--aox-color-grey-500); } .obj_item .ctn_item .ctn_product { position: relative; } .obj_item .ctn_item .ctn_product .t_intro { padding-right: var(--aox-130px); color: var(--aox-color-grey-500); } .obj_item .ctn_item .ctn_product .t_product { padding-right: var(--aox-130px); font-weight: var(--aox-font-weight-strong); font-size: var(--aox-fs-20px); text-transform: uppercase; } .obj_item .ctn_item .ctn_product .t_price { position: absolute; top: 0; right: 0; width: var(--aox-130px); font-weight: var(--aox-font-weight-strong); font-size: var(--aox-fs-24px); text-align: right; } .obj_item .ctn_item .ctn_product .t_category { font-size: var(--aox-fs-28px); line-height: var(--aox-lh-100); } .obj_item .ctn_item .ctn_product .t_date { margin-top: var(--aox-spacing-s); padding-left: calc(var(--aox-spacing-xl) + var(--aox-spacing-xs)); font-size: var(--aox-fs-16px); line-height: var(--aox-32px); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M16 5C22.0751 5 27 9.92487 27 16C27 22.0751 22.0751 27 16 27C9.92487 27 5 22.0751 5 16C5 9.92487 9.92487 5 16 5ZM16 7C11.0294 7 7 11.0294 7 16C7 20.9706 11.0294 25 16 25C20.9706 25 25 20.9706 25 16C25 11.0294 20.9706 7 16 7ZM16 10.5557C16.5522 10.5557 16.9999 11.0034 17 11.5557V15.5859L20.04 18.626C20.4305 19.0165 20.4305 19.6505 20.04 20.041C19.6495 20.4311 19.0164 20.4313 18.626 20.041L15.293 16.707L15 16.4141V11.5557C15.0001 11.0034 15.4478 10.5557 16 10.5557Z' fill='%23003B6F'/%3E%3C/svg%3E") no-repeat left center / auto transparent; } .obj_item .ctn_item .ctn_product .t_calendar { padding-left: calc(var(--aox-spacing-xl) + var(--aox-spacing-xs)); font-size: var(--aox-fs-16px); line-height: var(--aox-32px); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M6 12.6667H26M10.4444 6V8.22222M21.5556 6V8.22222M9.55556 26H22.4444C23.689 26 24.3113 26 24.7867 25.7578C25.2048 25.5448 25.5448 25.2048 25.7578 24.7867C26 24.3113 26 23.689 26 22.4444V11.7778C26 10.5332 26 9.91093 25.7578 9.43558C25.5448 9.01743 25.2048 8.67748 24.7867 8.46443C24.3113 8.22222 23.689 8.22222 22.4444 8.22222H9.55556C8.311 8.22222 7.68871 8.22222 7.21336 8.46443C6.79521 8.67748 6.45526 9.01743 6.24221 9.43558C6 9.91093 6 10.5332 6 11.7778V22.4444C6 23.689 6 24.3113 6.24221 24.7867C6.45526 25.2048 6.79521 25.5448 7.21336 25.7578C7.68871 26 8.31099 26 9.55556 26Z' stroke='%23003B6F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left center / auto transparent; } .obj_item .ctn_item .ctn_product.product_cure .t_product { font-size: var(--aox-fs-24px); } .obj_item .ctn_item .ctn_product.product_cure .t_date { margin-top: var(--aox-spacing-m); padding-left: 0; font-size: var(--aox-font-size); line-height: var(--aox-line-height); background: none; } .obj_item .ctn_item .ctn_option { display: flex; flex-direction: row; gap: var(--aox-spacing-l); margin-top: var(--aox-spacing-m); } .obj_item .ctn_item .ctn_option .ctn_media { min-width: var(--aox-150px); width: var(--aox-150px); } /***/ .obj_item .ctn_item-discover + .ctn_item-discover { margin-top: var(--aox-spacing-3xl); } .obj_item .ctn_item-discover > * + * { margin-top: var(--aox-spacing-xl); } /***/ .obj_item .ctn_item-button { margin-top: var(--aox-spacing-xl); } /***/ .obj_item .ctn_item.has_error { border: solid 2px var(--aox-color-error); } .obj_item .ctn_item.has_error .ctn_product .t_date { color: var(--aox-color-error); } /* ======================================== */ /* .obj_option /* ======================================== */ .section_reservation .obj_option { position: relative; display: flex; flex-direction: row; gap: var(--aox-spacing-xl); padding: var(--aox-spacing-l) calc(var(--aox-spacing-l) + var(--aox-120px) + var(--aox-spacing-l)) var(--aox-spacing-l) var(--aox-spacing-l); border: solid 1px var(--aox-color-grey-300); background: var(--aox-color-white); } .section_reservation .obj_option .ctn_option-media { min-width: var(--aox-150px); width: var(--aox-150px); } .section_reservation .obj_option .ctn_option > * + * { margin-top: var(--aox-spacing-s); } .section_reservation .obj_option .ctn_option .obj_text .ctn_text { font-size: var(--aox-fs-14px); line-height: var(--aox-lh-150); } .section_reservation .obj_option .ctn_option .obj_text .ctn_text > * + * { margin-top: var(--aox-spacing-s); } .section_reservation .obj_option .ctn_option .obj_text .ctn_text .t_title { font-weight: var(--aox-font-weight-strong); font-size: var(--aox-fs-18px); color: var(--aox-color-default); } .section_reservation .obj_option .ctn_option .obj_text .ctn_text ul li + li { margin-top: 0; } .section_reservation .obj_option .ctn_option .t_price { position: absolute; top: var(--aox-spacing-l); right: var(--aox-spacing-l); margin-top: 0; width: var(--aox-120px); font-weight: var(--aox-font-weight-strong); font-size: var(--aox-fs-24px); line-height: var(--aox-lh-100); text-align: right; } /***/ @media screen and (max-width: 767px) { .section_reservation .obj_option { padding: var(--aox-spacing-l); } .section_reservation .obj_option .ctn_option { width: 100%; } .section_reservation .obj_option .ctn_option .t_price { position: static; top: auto; right: auto; width: 100%; margin-top: var(--aox-spacing-xs) !important; text-align: left; } } @media screen and (max-width: 767px) { .section_reservation .ctn_section { flex-direction: column; gap: var(--aox-col); width: 100%; padding: 0; } /***/ .section_reservation .ctn_column.column_left { position: relative; display: flex; flex-direction: column-reverse; width: 100%; } .section_reservation .ctn_column.column_left > * + * { margin-top: 0; } .section_reservation .ctn_column.column_left .obj_breadcrumb { position: absolute; z-index: 2; top: var(--aox-260px); left: var(--aox-external-gutter); margin: 0; color: var(--aox-color-default); } .section_reservation .ctn_column.column_left .obj_text { padding: var(--aox-50px) var(--aox-external-gutter) 0 var(--aox-external-gutter); } .section_reservation .ctn_column.column_right { width: 100%; padding: 0 var(--aox-external-gutter); } /***/ .section_reservation .obj_step { padding-bottom: var(--aox-spacing-m); } .section_reservation .obj_step::before { left: var(--aox-16px); } .section_reservation .obj_step.is_last-child::before { content: none; } /*** .ctn_step-header ***/ .section_reservation .obj_step .ctn_step-header { gap: var(--aox-spacing-m); } .section_reservation .obj_step .ctn_step-header .t_step { height: var(--aox-32px); width: var(--aox-32px); min-width: var(--aox-32px); border: solid 2px white; } .section_reservation .obj_step .ctn_step-header .t_step::after { line-height: var(--aox-28px); } .section_reservation .obj_step .ctn_step-header .t_title { margin-top: var(--aox-6px); font-size: var(--aox-fs-20px) !important; } /*** .ctn_step-container ***/ .section_reservation .obj_step .ctn_step-container { padding: var(--aox-spacing-s) 0 0 calc(var(--aox-32px) + var(--aox-spacing-m)); } .section_reservation .obj_step .ctn_step-content { padding: var(--aox-spacing-l); } .section_reservation .obj_step .ctn_step-content .button_modify { position: static; top: auto; right: auto; margin: 0; transform: none; } /*** is_active ***/ .section_reservation .obj_step.is_active .ctn_step-header .t_step::after { font-size: var(--aox-fs-20px); line-height: var(--aox-32px); } /*** is_completed ***/ .section_reservation .obj_step.is_completed .ctn_step-content { padding: var(--aox-spacing-l); } } /* ======================================== */ /* .section_products-list /* ======================================== */ .section_products-list .ctn_section { padding: 0 var(--aox-col-gutter); } .section_products-list .ctn_section > * + * { margin-top: var(--aox-spacing-xl); } /***/ .section_products-list .obj_filters { position: relative; } .section_products-list .obj_filters .button_filters { position: absolute; top: 0; right: 0; z-index: 99; padding-left: var(--aox-28px); font-weight: var(--aox-font-weight-strong); font-size: var(--aox-fs-16px); line-height: var(--aox-30px); color: var(--aox-color-grey-500); text-transform: uppercase; } .section_products-list .obj_filters .button_filters::before { content: ""; position: absolute; top: 50%; left: 0; display: block; height: var(--aox-20px); width: var(--aox-20px); transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10.0059 20C7.33259 20 4.81774 18.9505 2.93655 17.0693C1.05536 15.1881 0.00585938 12.6733 0.00585938 10C0.00585938 7.32673 1.05536 4.81188 2.93655 2.93069C4.81774 1.0495 7.33259 0 10.0059 0C12.6791 0 15.194 1.0495 17.0752 2.93069C20.9762 6.83168 20.9762 13.1683 17.0752 17.0693C15.194 18.9505 12.6791 20 10.0059 20ZM10.0059 1.18812C7.64942 1.18812 5.4316 2.09901 3.76824 3.76238C2.10487 5.42574 1.19398 7.64356 1.19398 10C1.19398 12.3564 2.10487 14.5743 3.76824 16.2376C5.4316 17.901 7.64942 18.8119 10.0059 18.8119C12.3623 18.8119 14.5801 17.901 16.2435 16.2376C19.689 12.7921 19.689 7.20792 16.2435 3.76238C14.5801 2.09901 12.3623 1.18812 10.0059 1.18812Z' fill='%236B7280'/%3E%3Cpath d='M14.8536 5.93546L5.94822 14.8406L5.16406 14.0565L14.0694 5.15131L14.8536 5.93546Z' fill='%236B7280'/%3E%3Cpath d='M5.45117 6.21783L6.24325 5.44556L14.8571 14.0594L14.065 14.8515L5.45117 6.21783Z' fill='%236B7280'/%3E%3C/svg%3E") no-repeat center center / 100% 100% transparent; } .section_products-list .obj_filters .ctn_filters-header { position: relative; display: flex; flex-direction: row; justify-content: space-between; padding-left: var(--aox-28px); cursor: pointer; } .section_products-list .obj_filters .ctn_filters-header::before { content: ""; position: absolute; top: 40%; left: 0; display: block; height: var(--aox-8px); width: var(--aox-8px); border-right: solid 2px var(--aox-color-primary-900); border-bottom: solid 2px var(--aox-color-primary-900); transform: translateY(-50%) rotate(45deg); transition: var(--aox-transition-default); } .section_products-list .obj_filters .ctn_filters-header .t_filters { font-weight: var(--aox-font-weight-strong); font-size: var(--aox-fs-20px); color: var(--aox-color-primary-900); text-transform: uppercase; } .section_products-list .obj_filters .ctn_filters-header .t_filters span { font-weight: var(--aox-font-weight); font-size: var(--aox-fs-14px); } .section_products-list .obj_filters.is_active .ctn_filters-header::before { top: 55%; transform: translateY(-50%) rotate(-135deg); } .section_products-list .obj_filters .ctn_filters { margin-top: var(--aox-spacing-m); padding: var(--aox-spacing-l); background-color: var(--aox-color-grey-100); } .section_products-list .obj_filters .ctn_filters .obj_aox-form .obj_form { max-width: 100%; } /***/ .section_products-list .ctn_articles { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--aox-spacing-xxxl) var(--aox-gutter); margin-top: var(--aox-spacing-l); } .section_products-list .ctn_article { max-width: var(--aox-col-5); } .section_products-list .ctn_article > * + * { margin-top: var(--aox-spacing-l); } .section_products-list .ctn_article .ctn_media { position: relative; height: var(--aox-360px); width: 100%; background-color: var(--aox-color-black); } .section_products-list .ctn_article .ctn_media .obj_button { position: absolute; z-index: 2; top: calc(50% + var(--aox-spacing-l)); left: 50%; transform: translate(-50%, -50%); opacity: 0; } .section_products-list .ctn_article .ctn_media .obj_image { transition: var(--aox-transition-default); } .section_products-list .ctn_article .ctn_content .obj_text > * + * { margin-top: var(--aox-text-gap-l); } .section_products-list .ctn_article .ctn_content .obj_text .ctn_text-header { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; } .section_products-list .ctn_article .ctn_content .obj_text .ctn_text-header .t_title { width: var(--aox-col-3-gutter); font-weight: var(--aox-font-weight-strong); font-size: var(--aox-fs-28px); letter-spacing: 0; } .section_products-list .ctn_article .ctn_content .obj_text .ctn_text-header .t_price { margin-top: 0; font-size: var(--aox-fs-14px); line-height: var(--aox-lh-120); text-align: right; } .section_products-list .ctn_article .ctn_content .obj_text .ctn_text-header .t_price strong { display: block; font-weight: var(--aox-font-weight-strong); font-size: var(--aox-fs-28px); } .section_products-list .ctn_article .ctn_content .obj_text .ctn_text { margin-top: var(--aox-spacing-s); } .section_products-list .ctn_article .ctn_content .obj_text .ctn_text .t_disclaimer { font-size: var(--aox-fs-14px); color: var(--aox-color-grey-500); } /***/ @media screen and (min-width: 768px) { .section_products-list .ctn_article .ctn_media:hover .obj_button { top: 50%; opacity: 1; } .section_products-list .ctn_article .ctn_media:hover .obj_image { opacity: 0.7; } } @media screen and (max-width: 767px) { .section_products-list .ctn_section { padding: 0; } /***/ .section_products-list .obj_filters .ctn_filters-header { position: relative; display: flex; flex-direction: row; justify-content: space-between; padding-left: var(--aox-28px); cursor: pointer; } .section_products-list .obj_filters .ctn_filters-header::before { content: ""; position: absolute; top: 40%; left: 0; display: block; height: var(--aox-8px); width: var(--aox-8px); border-right: solid 2px var(--aox-color-primary-900); border-bottom: solid 2px var(--aox-color-primary-900); transform: translateY(-50%) rotate(45deg); transition: var(--aox-transition-default); } .section_products-list .obj_filters .ctn_filters-header .t_filters { font-weight: var(--aox-font-weight-strong); font-size: var(--aox-fs-20px); color: var(--aox-color-primary-900); text-transform: uppercase; } .section_products-list .obj_filters .ctn_filters-header .t_filters span { font-weight: var(--aox-font-weight); font-size: var(--aox-fs-14px); } .section_products-list .obj_filters .ctn_filters-header .button_filters { position: relative; padding-left: var(--aox-28px); font-weight: var(--aox-font-weight-strong); font-size: var(--aox-fs-16px); color: var(--aox-color-grey-500); text-transform: uppercase; } .section_products-list .obj_filters .ctn_filters-header .button_filters::before { content: ""; position: absolute; top: 50%; left: 0; display: block; height: var(--aox-20px); width: var(--aox-20px); transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10.0059 20C7.33259 20 4.81774 18.9505 2.93655 17.0693C1.05536 15.1881 0.00585938 12.6733 0.00585938 10C0.00585938 7.32673 1.05536 4.81188 2.93655 2.93069C4.81774 1.0495 7.33259 0 10.0059 0C12.6791 0 15.194 1.0495 17.0752 2.93069C20.9762 6.83168 20.9762 13.1683 17.0752 17.0693C15.194 18.9505 12.6791 20 10.0059 20ZM10.0059 1.18812C7.64942 1.18812 5.4316 2.09901 3.76824 3.76238C2.10487 5.42574 1.19398 7.64356 1.19398 10C1.19398 12.3564 2.10487 14.5743 3.76824 16.2376C5.4316 17.901 7.64942 18.8119 10.0059 18.8119C12.3623 18.8119 14.5801 17.901 16.2435 16.2376C19.689 12.7921 19.689 7.20792 16.2435 3.76238C14.5801 2.09901 12.3623 1.18812 10.0059 1.18812Z' fill='%236B7280'/%3E%3Cpath d='M14.8536 5.93546L5.94822 14.8406L5.16406 14.0565L14.0694 5.15131L14.8536 5.93546Z' fill='%236B7280'/%3E%3Cpath d='M5.45117 6.21783L6.24325 5.44556L14.8571 14.0594L14.065 14.8515L5.45117 6.21783Z' fill='%236B7280'/%3E%3C/svg%3E") no-repeat center center / 100% 100% transparent; } .section_products-list .obj_filters.is_active .ctn_filters-header::before { top: 55%; transform: translateY(-50%) rotate(-135deg); } .section_products-list .obj_filters .ctn_filters { margin-top: var(--aox-spacing-m); padding: var(--aox-spacing-l); background-color: var(--aox-color-grey-100); } .section_products-list .obj_filters .ctn_filters .obj_aox-form .obj_form { max-width: 100%; } /***/ .section_products-list .ctn_articles { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--aox-gutter); margin-top: var(--aox-spacing-l); } .section_products-list .ctn_article { max-width: 100%; } .section_products-list .ctn_article > * + * { margin-top: var(--aox-spacing-l); } .section_products-list .ctn_article .ctn_media { height: calc(var(--aox-210px) + var(--aox-8px)); width: 100%; } .section_products-list .ctn_article .ctn_media .obj_button { display: none; } .section_products-list .ctn_article .ctn_content .obj_text > * + * { margin-top: var(--aox-text-gap-l); } .section_products-list .ctn_article .ctn_content .obj_text .ctn_text-header { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; } .section_products-list .ctn_article .ctn_content .obj_text .ctn_text-header .t_title { width: var(--aox-col-3-gutter); font-weight: var(--aox-font-weight-strong); font-size: var(--aox-fs-28px); letter-spacing: 0; } .section_products-list .ctn_article .ctn_content .obj_text .ctn_text-header .t_price { margin-top: 0; font-size: var(--aox-fs-14px); line-height: var(--aox-lh-120); } .section_products-list .ctn_article .ctn_content .obj_text .ctn_text-header .t_price strong { display: block; font-weight: var(--aox-font-weight-strong); font-size: var(--aox-fs-28px); } .section_products-list .ctn_article .ctn_content .obj_text .ctn_text { margin-top: var(--aox-spacing-s); } .section_products-list .ctn_article .ctn_content .obj_text .ctn_text .t_disclaimer { font-size: var(--aox-fs-14px); color: var(--aox-color-grey-500); } } /* ======================================== */ /* .section_form /* ======================================== */ .section_form .ctn_section { padding: 0 var(--aox-col-gutter); } .section_form .ctn_section > * + * { margin-top: var(--aox-spacing-3xl); } /***/ .section_form .obj_aox-form .obj_form, .section_form .obj_aox-form .obj_form-edito { max-width: 100%; } /***/ @media screen and (max-width: 767px) { .section_form .ctn_section { padding: 0; } } /* ======================================== */ /* .section_pushes /* ======================================== */ .section_pushes .ctn_section { padding: 0 var(--aox-col-gutter); } .section_pushes .ctn_section > * + * { margin-top: var(--aox-spacing-2xl); } /***/ .section_pushes .ctn_title { max-width: var(--aox-col-6-gutter); } .section_pushes .ctn_pushes { display: flex; flex-direction: row; gap: var(--aox-spacing-m); } .section_pushes .ctn_pushes .ctn_push { width: 100%; } .section_pushes .ctn_pushes .ctn_push .obj_image .ctn_image img { transition: var(--aox-transition-default); } .section_pushes .ctn_pushes .ctn_push .obj_text { margin-top: var(--aox-spacing-m); text-align: center; } .section_pushes .ctn_pushes .ctn_push .obj_text .ctn_text .t_title { font-size: var(--aox-fs-20px); } .section_pushes .ctn_pushes .ctn_push a:hover .obj_image .ctn_image img { transform: scale(1.1); } /***/ @media screen and (max-width: 767px) { .section_pushes .ctn_section { padding: 0; } .section_pushes .ctn_pushes { flex-direction: column; gap: var(--aox-spacing-xl); } }