@charset "UTF-8"; /*! Theme Name: BeFlex Theme URI: http://www.eoxia.com Author: the Eoxia team Description: BeFlex is a free flexible theme made to work with Gutenberg. Position your slider, images, highlights of articles, content where you want. Imagination is the only limit. Requires at least: WordPress 5.0 Version: 3.0.1 License: AGPLv3 License URI: http://www.eoxia.com Since: 3.0.0 Text Domain: beflex BeFlex is based on Underscores https://underscores.me/, (C) 2012-2018 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. */ /*-------------------------------------------------------------- # Normalize --------------------------------------------------------------*/ html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } h1 { font-size: 2em; margin: 0.67em 0; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /*-------------------------------------------------------------- # Typography --------------------------------------------------------------*/ /*! * Font Awesome Pro 5.0.10 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license (Commercial License) */ .fa, .fas, #main-navigation .menu-item.menu-item-has-children > a:after, .far, .fal, .fab { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; } body, button, input, select, optgroup, textarea { color: #333333; font-family: "Open Sans"; font-size: 16px; line-height: 1.5; } h1, h2, h3, h4, h5, h6 { clear: both; font-family: 'Open sans', sans-serif; font-weight: 900; text-transform: none; word-wrap: break-word; } h1 { font-size: 44.8px; } h2 { font-size: 36.8px; } h3 { font-size: 32px; } h4 { font-size: 27.2px; } h5 { font-size: 22.4px; } h6 { font-size: 17.6px; } p { margin-bottom: 1.5em; } dfn, cite, em, i { font-style: italic; } blockquote { margin: 0 1.5em; } address { margin: 0 0 1.5em; } pre { background: #eee; font-family: "Courier 10 Pitch", Courier, monospace; font-size: 15px; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; } code, kbd, tt, var { font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; font-size: 15px; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } mark, ins { background: #fff9c0; text-decoration: none; } big { font-size: 125%; } /*-------------------------------------------------------------- # Modules --------------------------------------------------------------*/ body.hidden-scroll { overflow: hidden; } .sl-overlay { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: #fff; opacity: 0.7; display: none; z-index: 1035; } .sl-wrapper { z-index: 1040; } .sl-wrapper button { border: 0 none; background: transparent; font-size: 28px; padding: 0; cursor: pointer; } .sl-wrapper button:hover { opacity: 0.7; } .sl-wrapper .sl-close { display: none; position: fixed; right: 30px; top: 30px; z-index: 10060; margin-top: -14px; margin-right: -14px; height: 44px; width: 44px; line-height: 44px; font-family: Arial, Baskerville, monospace; color: #000; font-size: 3rem; } .sl-wrapper .sl-close:focus { outline: none; } .sl-wrapper .sl-counter { display: none; position: fixed; top: 30px; left: 30px; z-index: 1060; color: #000; font-size: 1rem; } .sl-wrapper .sl-navigation { width: 100%; display: none; } .sl-wrapper .sl-navigation button { position: fixed; top: 50%; margin-top: -22px; height: 44px; width: 22px; line-height: 44px; text-align: center; display: block; z-index: 10060; font-family: Arial, Baskerville, monospace; color: #000; } .sl-wrapper .sl-navigation button.sl-next { right: 5px; font-size: 2rem; } .sl-wrapper .sl-navigation button.sl-prev { left: 5px; font-size: 2rem; } .sl-wrapper .sl-navigation button:focus { outline: none; } @media (min-width: 35.5em) { .sl-wrapper .sl-navigation button { width: 44px; } .sl-wrapper .sl-navigation button.sl-next { right: 10px; font-size: 3rem; } .sl-wrapper .sl-navigation button.sl-prev { left: 10px; font-size: 3rem; } } @media (min-width: 50em) { .sl-wrapper .sl-navigation button { width: 44px; } .sl-wrapper .sl-navigation button.sl-next { right: 20px; font-size: 3rem; } .sl-wrapper .sl-navigation button.sl-prev { left: 20px; font-size: 3rem; } } .sl-wrapper .sl-image { position: fixed; -ms-touch-action: none; touch-action: none; z-index: 10000; } .sl-wrapper .sl-image img { margin: 0; padding: 0; display: block; border: 0 none; width: 100%; height: auto; } @media (min-width: 35.5em) { .sl-wrapper .sl-image img { border: 0 none; } } @media (min-width: 50em) { .sl-wrapper .sl-image img { border: 0 none; } } .sl-wrapper .sl-image iframe { background: #000; border: 0 none; } @media (min-width: 35.5em) { .sl-wrapper .sl-image iframe { border: 0 none; } } @media (min-width: 50em) { .sl-wrapper .sl-image iframe { border: 0 none; } } .sl-wrapper .sl-image .sl-caption { display: none; padding: 10px; color: #fff; background: rgba(0, 0, 0, 0.8); font-size: 1rem; position: absolute; bottom: 0; left: 0; right: 0; } .sl-wrapper .sl-image .sl-caption.pos-top { bottom: auto; top: 0; } .sl-wrapper .sl-image .sl-caption.pos-outside { bottom: auto; } .sl-wrapper .sl-image .sl-download { display: none; position: absolute; bottom: 5px; right: 5px; color: #000; z-index: 1060; } .sl-spinner { display: none; border: 5px solid #333; border-radius: 40px; height: 40px; left: 50%; margin: -20px 0 0 -20px; opacity: 0; position: fixed; top: 50%; width: 40px; z-index: 1007; -webkit-animation: pulsate 1s ease-out infinite; animation: pulsate 1s ease-out infinite; } .sl-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; } .sl-transition { transition: -webkit-transform ease 200ms; -webkit-transition: -webkit-transform ease 200ms; transition: transform ease 200ms; transition: transform ease 200ms, -webkit-transform ease 200ms; } @-webkit-keyframes pulsate { 0% { -webkit-transform: scale(0.1); transform: scale(0.1); opacity: 0.0; } 50% { opacity: 1; } 100% { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 0; } } @keyframes pulsate { 0% { -webkit-transform: scale(0.1); transform: scale(0.1); opacity: 0.0; } 50% { opacity: 1; } 100% { -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 0; } } /*-------------------------------------------------------------- ## Buttons --------------------------------------------------------------*/ .button, #comments .comment-list .comment-reply-link, button, input[type="button"], input[type="reset"], input[type="submit"] { display: inline-block; border: 0; -webkit-box-shadow: none; box-shadow: none; background: none; text-decoration: none; padding: 6px 14px; line-height: 1.4; vertical-align: middle; height: auto; border-radius: 0; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; position: relative; border-width: 3px; border-style: solid; font-size: 12px; text-transform: uppercase; font-weight: 700; background: #333333; border-color: #333333; color: #fff; } .button:focus, #comments .comment-list .comment-reply-link:focus, button:focus, input:focus[type="button"], input:focus[type="reset"], input:focus[type="submit"], .button:visited, #comments .comment-list .comment-reply-link:visited, button:visited, input:visited[type="button"], input:visited[type="reset"], input:visited[type="submit"] { color: #fff; } .button:hover, #comments .comment-list .comment-reply-link:hover, button:hover, input:hover[type="button"], input:hover[type="reset"], input:hover[type="submit"] { color: #fff; -webkit-box-shadow: inset 0 -2.6em rgba(255, 255, 255, 0.25); box-shadow: inset 0 -2.6em rgba(255, 255, 255, 0.25); cursor: pointer; } .button:focus, #comments .comment-list .comment-reply-link:focus, button:focus, input:focus[type="button"], input:focus[type="reset"], input:focus[type="submit"] { outline: none; } .button.button-primary, #comments .comment-list .button-primary.comment-reply-link, button, input[type="button"], input[type="reset"], input[type="submit"] { background: #0e6eff; border-color: #0e6eff; color: #fff; } .button.button-light, #comments .comment-list .button-light.comment-reply-link, button.button-light, input.button-light[type="button"], input.button-light[type="reset"], input.button-light[type="submit"] { background: #fff; border-color: #fff; color: #333333; } .button.button-light:hover, #comments .comment-list .button-light.comment-reply-link:hover, button.button-light:hover, input.button-light:hover[type="button"], input.button-light:hover[type="reset"], input.button-light:hover[type="submit"] { -webkit-box-shadow: inset 0 -2.6em rgba(0, 0, 0, 0.1); box-shadow: inset 0 -2.6em rgba(0, 0, 0, 0.1); color: #333333; } .button.button-dark, #comments .comment-list .button-dark.comment-reply-link, button.button-dark, input.button-dark[type="button"], input.button-dark[type="reset"], input.button-dark[type="submit"] { background: #333333; border-color: #333333; } .button.bordered, #comments .comment-list .comment-reply-link, button.bordered, input.bordered[type="button"], input.bordered[type="reset"], input.bordered[type="submit"] { background: none; /* Par defaut */ border-color: #0e6eff; color: #0e6eff; } .button.bordered.button-primary, #comments .comment-list .comment-reply-link, button.bordered, input.bordered[type="button"], input.bordered[type="reset"], input.bordered[type="submit"] { border-color: #0e6eff; color: #0e6eff; } .button.bordered.button-primary:hover, #comments .comment-list .comment-reply-link:hover, button.bordered:hover, input.bordered:hover[type="button"], input.bordered:hover[type="reset"], input.bordered:hover[type="submit"] { -webkit-box-shadow: inset 0 -2.6em #0e6eff; box-shadow: inset 0 -2.6em #0e6eff; color: #fff; } .button.bordered.button-light, #comments .comment-list .button-light.comment-reply-link, button.bordered.button-light, input.bordered.button-light[type="button"], input.bordered.button-light[type="reset"], input.bordered.button-light[type="submit"] { border-color: #fff; color: #fff; } .button.bordered.button-light:hover, #comments .comment-list .button-light.comment-reply-link:hover, button.bordered.button-light:hover, input.bordered.button-light:hover[type="button"], input.bordered.button-light:hover[type="reset"], input.bordered.button-light:hover[type="submit"] { -webkit-box-shadow: inset 0 -2.6em #fff; box-shadow: inset 0 -2.6em #fff; color: #333333; } .button.bordered.button-dark, #comments .comment-list .button-dark.comment-reply-link, button.bordered.button-dark, input.bordered.button-dark[type="button"], input.bordered.button-dark[type="reset"], input.bordered.button-dark[type="submit"] { border-color: #333333; color: #333333; } .button.bordered.button-dark:hover, #comments .comment-list .button-dark.comment-reply-link:hover, button.bordered.button-dark:hover, input.bordered.button-dark:hover[type="button"], input.bordered.button-dark:hover[type="reset"], input.bordered.button-dark:hover[type="submit"] { -webkit-box-shadow: inset 0 -2.6em #333333; box-shadow: inset 0 -2.6em #333333; } .button.bordered:hover, #comments .comment-list .comment-reply-link:hover, button.bordered:hover, input.bordered:hover[type="button"], input.bordered:hover[type="reset"], input.bordered:hover[type="submit"] { -webkit-box-shadow: inset 0 -2.6em #0e6eff; box-shadow: inset 0 -2.6em #0e6eff; color: #fff; } .button .button-icon, #comments .comment-list .comment-reply-link .button-icon, button .button-icon, input[type="button"] .button-icon, input[type="reset"] .button-icon, input[type="submit"] .button-icon, .button span, #comments .comment-list .comment-reply-link span, button span, input[type="button"] span, input[type="reset"] span, input[type="submit"] span { position: relative; } .button .button-icon ~ span, #comments .comment-list .comment-reply-link .button-icon ~ span, button .button-icon ~ span, input[type="button"] .button-icon ~ span, input[type="reset"] .button-icon ~ span, input[type="submit"] .button-icon ~ span { margin-left: 10px; } .button span ~ .button-icon, #comments .comment-list .comment-reply-link span ~ .button-icon, button span ~ .button-icon, input[type="button"] span ~ .button-icon, input[type="reset"] span ~ .button-icon, input[type="submit"] span ~ .button-icon { margin-left: 10px; } .button.button-strong span, #comments .comment-list .button-strong.comment-reply-link span, button.button-strong span, input.button-strong[type="button"] span, input.button-strong[type="reset"] span, input.button-strong[type="submit"] span { font-weight: 800; } .button.button-uppercase span, #comments .comment-list .button-uppercase.comment-reply-link span, button.button-uppercase span, input.button-uppercase[type="button"] span, input.button-uppercase[type="reset"] span, input.button-uppercase[type="submit"] span { text-transform: uppercase; font-size: 14px; } .button[class*="button-square-"], #comments .comment-list .comment-reply-link[class*="button-square-"], button[class*="button-square-"], input[class*="button-square-"][type="button"], input[class*="button-square-"][type="reset"], input[class*="button-square-"][type="submit"] { text-align: center; overflow: hidden; padding: 0; } .button.button-square-30, #comments .comment-list .button-square-30.comment-reply-link, button.button-square-30, input.button-square-30[type="button"], input.button-square-30[type="reset"], input.button-square-30[type="submit"] { width: 30px; height: 30px; line-height: 24px; } .button.button-square-30 .button-icon, #comments .comment-list .button-square-30.comment-reply-link .button-icon, button.button-square-30 .button-icon, input.button-square-30[type="button"] .button-icon, input.button-square-30[type="reset"] .button-icon, input.button-square-30[type="submit"] .button-icon { font-size: 12px; } .button.button-square-40, #comments .comment-list .button-square-40.comment-reply-link, button.button-square-40, input.button-square-40[type="button"], input.button-square-40[type="reset"], input.button-square-40[type="submit"] { width: 40px; height: 40px; line-height: 34px; } .button.button-square-50, #comments .comment-list .button-square-50.comment-reply-link, button.button-square-50, input.button-square-50[type="button"], input.button-square-50[type="reset"], input.button-square-50[type="submit"] { width: 50px; height: 50px; line-height: 44px; } .button.button-square-60, #comments .comment-list .button-square-60.comment-reply-link, button.button-square-60, input.button-square-60[type="button"], input.button-square-60[type="reset"], input.button-square-60[type="submit"] { width: 60px; height: 60px; line-height: 54px; } .button.button-float-left, #comments .comment-list .button-float-left.comment-reply-link, button.button-float-left, input.button-float-left[type="button"], input.button-float-left[type="reset"], input.button-float-left[type="submit"] { float: left; } .button.button-float-right, #comments .comment-list .button-float-right.comment-reply-link, button.button-float-right, input.button-float-right[type="button"], input.button-float-right[type="reset"], input.button-float-right[type="submit"] { float: right; } .button.button-margin, #comments .comment-list .button-margin.comment-reply-link, button.button-margin, input.button-margin[type="button"], input.button-margin[type="reset"], input.button-margin[type="submit"] { margin: 1em 0; } .button.button-radius-1, #comments .comment-list .button-radius-1.comment-reply-link, button.button-radius-1, input.button-radius-1[type="button"], input.button-radius-1[type="reset"], input.button-radius-1[type="submit"] { border-radius: 2px; } .button.button-radius-2, #comments .comment-list .button-radius-2.comment-reply-link, button.button-radius-2, input.button-radius-2[type="button"], input.button-radius-2[type="reset"], input.button-radius-2[type="submit"] { border-radius: 4px; } .button.button-radius-3, #comments .comment-list .button-radius-3.comment-reply-link, button.button-radius-3, input.button-radius-3[type="button"], input.button-radius-3[type="reset"], input.button-radius-3[type="submit"] { border-radius: 6px; } .button.button-rounded, #comments .comment-list .button-rounded.comment-reply-link, button.button-rounded, input.button-rounded[type="button"], input.button-rounded[type="reset"], input.button-rounded[type="submit"] { border-radius: 50%; } .button.button-size-small, #comments .comment-list .button-size-small.comment-reply-link, button.button-size-small, input.button-size-small[type="button"], input.button-size-small[type="reset"], input.button-size-small[type="submit"] { font-size: 14px; } .button.button-size-small.button-uppercase span, #comments .comment-list .button-size-small.button-uppercase.comment-reply-link span, button.button-size-small.button-uppercase span, input.button-size-small.button-uppercase[type="button"] span, input.button-size-small.button-uppercase[type="reset"] span, input.button-size-small.button-uppercase[type="submit"] span { font-size: 12px; } .button.button-size-large, #comments .comment-list .button-size-large.comment-reply-link, button.button-size-large, input.button-size-large[type="button"], input.button-size-large[type="reset"], input.button-size-large[type="submit"] { font-size: 18px; } .button.button-size-large.button-uppercase span, #comments .comment-list .button-size-large.button-uppercase.comment-reply-link span, button.button-size-large.button-uppercase span, input.button-size-large.button-uppercase[type="button"] span, input.button-size-large.button-uppercase[type="reset"] span, input.button-size-large.button-uppercase[type="submit"] span { font-size: 16px; } /*-------------------------------------------------------------- ## Accessibility --------------------------------------------------------------*/ /* Text meant only for screen readers. */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } /* Do not show the outline on the skip link target. */ #content[tabindex="-1"]:focus { outline: 0; } /*-------------------------------------------------------------- ## Alignments --------------------------------------------------------------*/ .site-width { width: 100%; padding-left: 12%; padding-right: 12%; } @media (max-width: 770px) { .site-width { padding-left: 8%; padding-right: 8%; } } @media (max-width: 480px) { .site-width { padding-left: 4%; padding-right: 4%; } } /** Garde seulement la marge du site-width global */ #content.site-width .site-width { padding-left: 0 !important; padding-right: 0 !important; } .alignleft { display: inline; float: left; margin-right: 1.5em; } .alignright { display: inline; float: right; margin-left: 1.5em; } .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } #content:not(.active-sidebar) #primary .alignwide { width: 100%; } #content:not(.active-sidebar) #primary .alignwide img { width: 100%; } #content:not(.active-sidebar) #primary .alignfull { margin-left: calc( -100vw / 2 + 100% / 2); margin-right: calc( -100vw / 2 + 100% / 2); max-width: 100vw; width: 100vw; } #content:not(.active-sidebar) #primary .alignfull img { width: 100vw; } body.single #content #primary .alignfull, body.category #content #primary .alignfull, body.archive #content #primary .alignfull, body.single-wpshop_product #content #primary .alignfull, body.search #content #primary .alignfull { margin-left: 0; margin-right: 0; max-width: 100%; width: 100%; } body.single .alignfull img, body.category .alignfull img, body.archive .alignfull img, body.single-wpshop_product .alignfull img, body.search .alignfull img { width: 100%; } /** Ajoute une marge en haut de la page si la navigation est en absolute */ body.sticky-nav #content { padding-top: 80px; } /*-------------------------------------------------------------- ## Infinite scroll --------------------------------------------------------------*/ /* Globally hidden elements when Infinite Scroll is supported and in use. */ .infinite-scroll .posts-navigation, .infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */ display: none; } /* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */ .infinity-end.neverending .site-footer { display: block; } /*-------------------------------------------------------------- ## Clearings --------------------------------------------------------------*/ .clear:before, .clear:after, .entry-content:before, .entry-content:after, .comment-content:before, .comment-content:after, .site-header:before, .site-header:after, .site-content:before, .site-content:after, .site-footer:before, .site-footer:after { content: ""; display: table; table-layout: fixed; } .clear:after, .entry-content:after, .comment-content:after, .site-header:after, .site-content:after, .site-footer:after { clear: both; } /*-------------------------------------------------------------- ## Notification --------------------------------------------------------------*/ .notification { position: relative; font-size: 1em; padding: 1em; overflow: hidden; border-radius: 3px; border: solid #eee 1px; } .notification .notification-icon { margin: 0 0.6em 0 0; } .notification p { margin-bottom: 0; } .notification .alerte-title { font-weight: 600; } .notification .full { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .notification.info { border-left: solid #2e75bf 4px; color: #2e75bf; } .notification.info a { color: #2e75bf; } .notification.info .notification-icon::before { content: "\f05a"; } .notification.empty { padding: 1em; border: dashed #ddd 1px; border-radius: 1em; color: #ccc; } .notification.empty .notification-icon::before { content: ''; } .notification.error { border-left: solid #e74c3c 4px; color: #e74c3c; } .notification.error a { color: #e74c3c; } .notification.error .notification-icon::before { content: "\f057"; } .notification.success { border-left: solid #74c246 4px; color: #74c246; } .notification.success a { color: #74c246; } .notification.success .notification-icon::before { content: "\f058"; } .notification.warning { border-left: solid #fcb231 4px; color: #fcb231; } .notification.warning a { color: #fcb231; } .notification.warning .notification-icon::before { content: "\f071"; } @media (max-width: 480px) { .notification { padding: 1em; } .notification .notification-icon::before { display: none; } } /*-------------------------------------------------------------- ## Grid layout Grid --------------------------------------------------------------*/ .gridlayout { display: grid; grid-gap: 1em 1em; grid-template-columns: repeat(4, 1fr); } /** Définition des tailles */ .gridlayout { /** Du parent */ /** Chaque enfant peut modifier sa propre taille */ /** Chaque enfant peut modifier sa propre taille */ /** Chaque enfant peut modifier sa propre taille */ /** Chaque enfant peut modifier sa propre taille */ /** Chaque enfant peut modifier sa propre taille */ /** Chaque enfant peut modifier sa propre taille */ } .gridlayout.grid-1 { grid-template-columns: repeat(1, 1fr); } .gridlayout.grid-1 > .gridw-1 { grid-column: auto/span 1; } .gridlayout.grid-2 { grid-template-columns: repeat(2, 1fr); } .gridlayout.grid-2 > .gridw-1 { grid-column: auto/span 1; } .gridlayout.grid-2 > .gridw-2 { grid-column: auto/span 2; } @media (max-width: 770px) { .gridlayout.grid-2 > .gridw-2 { grid-column: auto / span 2; } } .gridlayout.grid-3 { grid-template-columns: repeat(3, 1fr); } .gridlayout.grid-3 > .gridw-1 { grid-column: auto/span 1; } .gridlayout.grid-3 > .gridw-2 { grid-column: auto/span 2; } @media (max-width: 770px) { .gridlayout.grid-3 > .gridw-2 { grid-column: auto / span 2; } } .gridlayout.grid-3 > .gridw-3 { grid-column: auto/span 3; } @media (max-width: 770px) { .gridlayout.grid-3 > .gridw-3 { grid-column: auto / span 2; } } .gridlayout.grid-4 { grid-template-columns: repeat(4, 1fr); } .gridlayout.grid-4 > .gridw-1 { grid-column: auto/span 1; } .gridlayout.grid-4 > .gridw-2 { grid-column: auto/span 2; } @media (max-width: 770px) { .gridlayout.grid-4 > .gridw-2 { grid-column: auto / span 2; } } .gridlayout.grid-4 > .gridw-3 { grid-column: auto/span 3; } @media (max-width: 770px) { .gridlayout.grid-4 > .gridw-3 { grid-column: auto / span 2; } } .gridlayout.grid-4 > .gridw-4 { grid-column: auto/span 4; } @media (max-width: 770px) { .gridlayout.grid-4 > .gridw-4 { grid-column: auto / span 2; } } .gridlayout.grid-5 { grid-template-columns: repeat(5, 1fr); } .gridlayout.grid-5 > .gridw-1 { grid-column: auto/span 1; } .gridlayout.grid-5 > .gridw-2 { grid-column: auto/span 2; } @media (max-width: 770px) { .gridlayout.grid-5 > .gridw-2 { grid-column: auto / span 2; } } .gridlayout.grid-5 > .gridw-3 { grid-column: auto/span 3; } @media (max-width: 770px) { .gridlayout.grid-5 > .gridw-3 { grid-column: auto / span 2; } } .gridlayout.grid-5 > .gridw-4 { grid-column: auto/span 4; } @media (max-width: 770px) { .gridlayout.grid-5 > .gridw-4 { grid-column: auto / span 2; } } .gridlayout.grid-5 > .gridw-5 { grid-column: auto/span 5; } @media (max-width: 770px) { .gridlayout.grid-5 > .gridw-5 { grid-column: auto / span 2; } } .gridlayout.grid-6 { grid-template-columns: repeat(6, 1fr); } .gridlayout.grid-6 > .gridw-1 { grid-column: auto/span 1; } .gridlayout.grid-6 > .gridw-2 { grid-column: auto/span 2; } @media (max-width: 770px) { .gridlayout.grid-6 > .gridw-2 { grid-column: auto / span 2; } } .gridlayout.grid-6 > .gridw-3 { grid-column: auto/span 3; } @media (max-width: 770px) { .gridlayout.grid-6 > .gridw-3 { grid-column: auto / span 2; } } .gridlayout.grid-6 > .gridw-4 { grid-column: auto/span 4; } @media (max-width: 770px) { .gridlayout.grid-6 > .gridw-4 { grid-column: auto / span 2; } } .gridlayout.grid-6 > .gridw-5 { grid-column: auto/span 5; } @media (max-width: 770px) { .gridlayout.grid-6 > .gridw-5 { grid-column: auto / span 2; } } .gridlayout.grid-6 > .gridw-6 { grid-column: auto/span 6; } @media (max-width: 770px) { .gridlayout.grid-6 > .gridw-6 { grid-column: auto / span 2; } } /** Définition des hauteur des enfants */ .gridlayout > .gridh-1 { grid-row: auto/span 1; } @media (max-width: 770px) { .gridlayout > .gridh-1 { grid-row: auto / span 1 !important; } } .gridlayout > .gridh-2 { grid-row: auto/span 2; } @media (max-width: 770px) { .gridlayout > .gridh-2 { grid-row: auto / span 1 !important; } } .gridlayout > .gridh-3 { grid-row: auto/span 3; } @media (max-width: 770px) { .gridlayout > .gridh-3 { grid-row: auto / span 1 !important; } } .gridlayout > .gridh-4 { grid-row: auto/span 4; } @media (max-width: 770px) { .gridlayout > .gridh-4 { grid-row: auto / span 1 !important; } } .gridlayout > .gridh-5 { grid-row: auto/span 5; } @media (max-width: 770px) { .gridlayout > .gridh-5 { grid-row: auto / span 1 !important; } } .gridlayout > .gridh-6 { grid-row: auto/span 6; } @media (max-width: 770px) { .gridlayout > .gridh-6 { grid-row: auto / span 1 !important; } } /** Mages */ .gridlayout.grid-margin-0 { margin: 0em 0; } .gridlayout.grid-margin-1 { margin: 1em 0; } .gridlayout.grid-margin-2 { margin: 2em 0; } .gridlayout.grid-margin-3 { margin: 3em 0; } .gridlayout.grid-margin-4 { margin: 4em 0; } .gridlayout.grid-margin-5 { margin: 5em 0; } .gridlayout.grid-margin-6 { margin: 6em 0; } /** Gouttières */ .gridlayout.grid-gap-0 { grid-gap: 0em 0em; } .gridlayout.grid-gap-1 { grid-gap: 1em 1em; } .gridlayout.grid-gap-2 { grid-gap: 2em 2em; } .gridlayout.grid-gap-3 { grid-gap: 3em 3em; } .gridlayout.grid-gap-4 { grid-gap: 4em 4em; } .gridlayout.grid-gap-5 { grid-gap: 5em 5em; } .gridlayout.grid-gap-6 { grid-gap: 6em 6em; } /** Media queries */ @media (max-width: 480px) { .gridlayout.grid-2 { grid-template-columns: repeat(1, 1fr) !important; } } @media (max-width: 770px) { .gridlayout.grid-3 { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .gridlayout.grid-3 { grid-template-columns: repeat(1, 1fr) !important; } } @media (max-width: 770px) { .gridlayout.grid-4 { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .gridlayout.grid-4 { grid-template-columns: repeat(1, 1fr) !important; } } @media (max-width: 770px) { .gridlayout.grid-5 { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .gridlayout.grid-5 { grid-template-columns: repeat(1, 1fr) !important; } } @media (max-width: 770px) { .gridlayout.grid-6 { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .gridlayout.grid-6 { grid-template-columns: repeat(1, 1fr) !important; } } @media (max-width: 480px) { .gridlayout > * { grid-column: auto / span 1 !important; } } /*-------------------------------------------------------------- ## WpShop ------------------------ --------------------------------------*/ .wpsjq-modal-opened { overflow: auto !important; } body [class*="wps-bton-first"], body [class*="wps-bton-second"] { text-transform: uppercase; font-weight: 700; font-size: 12.8px; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; line-height: 1; padding: 0.8em 1.4em; border-radius: 0 !important; } body [class*="wps-bton-first"] i, body [class*="wps-bton-second"] i { padding-right: 8px; } .flexible-bloc .bloc .bloc-title a, #secondary .bloc .bloc-title a { color: #333333; } .flexible-bloc .bloc .wps-product-section, #secondary .bloc .wps-product-section { display: none; } .flexible-bloc .bloc .bloc-price, #secondary .bloc .bloc-price { font-weight: 800; } .single-wpshop_product .entry-title { margin-top: 0; } .single-wpshop_product .entry-title:after { display: none; content: ''; } /*-------------------------------------------------------------- ## Pagination --------------------------------------------------------------*/ .page-numbers { margin: 2em 0 !important; list-style-type: none; text-align: center; } .page-numbers:after { display: block; content: ''; clear: both; } .page-numbers li { display: inline-block; margin: 0 0.4em; } .page-numbers .page-numbers { display: inline-block; padding: 0.4em 0.6em; margin: 0 !important; border-right: 1px solid rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(0, 0, 0, 0.2); font-weight: 700; } .post-navigation .nav-links a { text-transform: uppercase; font-weight: 700; } .post-navigation .nav-links .fa { background: #0e6eff; color: #fff; border-radius: 50%; display: inline-block; width: 20px; height: 20px; text-align: center; line-height: 20px; } .site-main .comment-navigation, .site-main .posts-navigation, .site-main .post-navigation { margin: 0 0 1.5em; overflow: hidden; } .comment-navigation .nav-previous, .posts-navigation .nav-previous, .post-navigation .nav-previous { float: left; width: 50%; } .comment-navigation .nav-next, .posts-navigation .nav-next, .post-navigation .nav-next { float: right; text-align: right; width: 50%; } /*-------------------------------------------------------------- # Theme --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## Core --------------------------------------------------------------*/ #masthead { position: relative; background: #fff; border-bottom: solid #f7f7f7 1px; } #masthead > .site-width { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } #masthead .site-branding { width: 30%; } #masthead .site-navigation { width: 100%; } @media (max-width: 770px) { #masthead .site-branding { width: 50%; } #masthead .site-navigation { margin-left: auto; width: auto; } } @media (max-width: 770px) { #masthead { padding: 0; } } @media (max-width: 480px) { #masthead .site-branding { width: 70%; } #masthead .site-branding img { width: 100%; } } #masthead .site-branding { margin: auto 0; line-height: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } #masthead .site-branding .custom-logo-link { padding-right: 1em; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } #masthead .site-branding .custom-logo-link img { width: auto; max-height: 80px; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } #masthead .site-branding .site-branding-container { margin: auto 0; } #masthead .site-branding .site-title, #masthead .site-branding .site-description { margin: 0; } #masthead .site-branding .site-title a { color: #333333; font-size: 20px; } #masthead .site-branding .site-description { font-size: 12px; } /** Site navigation */ #masthead .site-navigation { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; -ms-flex-wrap: nowrap; flex-wrap: nowrap; margin-top: auto; margin-bottom: auto; } #masthead .site-navigation #main-navigation { margin-left: auto; } /** Site tool */ #masthead .site-tool { padding: 0 0 0 0.6em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; -ms-flex-wrap: nowrap; flex-wrap: nowrap; margin: auto 0; } #masthead .site-tool > a { line-height: 1; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; padding: 2.3em 0.6em; display: inline-block; color: #333333; font-size: 14px; } #masthead .site-tool > a:hover { color: gray; } #masthead .site-tool > a:focus { outline: none; } #masthead .site-tool > a.wps-action-mini-cart-opener { position: relative; } #masthead .site-tool > a.wps-action-mini-cart-opener .wps-numeration-cart { position: absolute; top: 30%; right: 0px; width: 14px; height: 14px; font-size: 10px; text-align: center; line-height: 10px; background: #0e6eff; display: inline-block; color: #fff; border-radius: 50%; } /* Sitcky Header */ #masthead.sticky { position: fixed; width: 100%; z-index: 100; -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0); box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0); } #masthead.sticky.-scroll { top: 0; -webkit-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1); } #masthead.sticky.-scroll #main-navigation .menu > .menu-item > a, #masthead.sticky.-scroll .site-tool > * { padding-top: 1.2em; padding-bottom: 1.2em; } #masthead.sticky.-scroll .site-branding .custom-logo-link img { max-height: 48px; } @media (min-width: 600px) { body.admin-bar #masthead.-scroll { top: 32px; } } #search-area { pointer-events: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 490; } #search-area .search-overlay { opacity: 0; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0e6eff; z-index: 500; } #search-area form { position: absolute; top: 50%; left: 50%; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; opacity: 0; -webkit-transform: translate(-50%, -80%); transform: translate(-50%, -80%); z-index: 510; width: 80%; } #search-area form label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; -ms-flex-wrap: nowrap; flex-wrap: nowrap; border-bottom: 2px solid #fff; } #search-area form .search-icon { margin: auto; padding: 0.6em; display: inline-block; } #search-area form .fa-search { color: #fff; font-size: 32px; } @media (max-width: 480px) { #search-area form .fa-search { font-size: 18px; } } #search-area form input { background: none; color: #fff; border: 0; border-radius: 0; padding-bottom: 0.2em; font-size: 50px; font-weight: 100; width: 100%; -webkit-box-shadow: none; box-shadow: none; outline: none; } #search-area form input:focus { outline: none; } #search-area form input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: rgba(255, 255, 255, 0.4); } #search-area form input::-moz-placeholder { /* Firefox 19+ */ color: rgba(255, 255, 255, 0.4); } #search-area form input:-ms-input-placeholder { /* IE 10+ */ color: rgba(255, 255, 255, 0.4); } #search-area form input:-moz-placeholder { /* Firefox 18- */ color: rgba(255, 255, 255, 0.4); } @media (max-width: 770px) { #search-area form input { font-size: 32px; } } @media (max-width: 480px) { #search-area form input { font-size: 18px; margin-right: 0.6em; } } @media (max-width: 480px) { #search-area form { width: 100%; } } .search-active #search-area { pointer-events: all; } .search-active #search-area .search-overlay { opacity: 0.8; } .search-active #search-area form { opacity: 1; -webkit-transform: translate(-50%, -60%); transform: translate(-50%, -60%); } #colophon { background: #f7f7f7; padding: 2em 0; font-size: 14px; } #colophon .sidebar * { margin: 0; } #colophon .sidebar .widget-title { font-size: 20px; margin-bottom: 0.8em; } #colophon #boxfoot { margin-bottom: 1em; } html { -webkit-box-sizing: border-box; box-sizing: border-box; } ::selection { color: #fff; background: #0e6eff; } *, *:before, *:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ -webkit-box-sizing: inherit; box-sizing: inherit; } body { background: #fff; /* Fallback for when there is no custom background color defined. */ } blockquote, q { quotes: "" ""; padding: 0 0 0 2em; border-left: 4px solid #0e6eff; font-style: italic; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; } ul, ol { margin: 0; padding: 0; } ul li, ol li { margin-left: 1.5em; } ul { list-style: disc; } ol { list-style: decimal; } dt { font-weight: bold; } dd { margin: 0; } .site-content ul, .site-content ol { margin-bottom: 1.5em; margin-left: 0.5em; } .site-content ul ul, .site-content ul ol, .site-content ol ul, .site-content ol ol { margin: 0; } img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ } figure { margin: 1em 0; /* Extra wide images within figure tags don't overflow the content area. */ } table { margin: 0 0 1.5em; width: 100%; } .entry-content .beflex-entete { font-size: 22px; color: rgba(0, 0, 0, 0.4); font-weight: 100; } a { color: #0e6eff; text-decoration: none; } a:visited { color: #0e6eff; } a:hover, a:focus, a:active { color: #0057da; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } /*-------------------------------------------------------------- ## Posts and pages --------------------------------------------------------------*/ #page { overflow-x: hidden; } #primary { position: relative; } .post .post-thumbnail img { width: 100%; } .sticky { display: block; } .updated:not(.published) { display: none; } .page-links { clear: both; margin: 0 0 1.5em; } .error404 #content { text-align: center; } .error404 .link-home { display: inline-block; margin: 2em 0; } .error404 .error-image { border-radius: 50%; max-width: 260px; } .blog .post, .author .post, .archive .post, .category .post { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; -ms-flex-wrap: nowrap; flex-wrap: nowrap; margin: 1em 0; } @media (max-width: 770px) { .blog .post, .author .post, .archive .post, .category .post { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .blog .post:after, .author .post:after, .archive .post:after, .category .post:after { display: block; content: ''; clear: both; } .blog .post .post-thumbnail, .author .post .post-thumbnail, .archive .post .post-thumbnail, .category .post .post-thumbnail { min-width: 50%; max-width: 50%; padding-right: 2em; } @media (max-width: 770px) { .blog .post .post-thumbnail, .author .post .post-thumbnail, .archive .post .post-thumbnail, .category .post .post-thumbnail { min-width: 100%; max-width: 100%; } } .blog .post .post-content, .author .post .post-content, .archive .post .post-content, .category .post .post-content { width: 100%; } .blog .post .post-content .entry-header .entry-title, .author .post .post-content .entry-header .entry-title, .archive .post .post-content .entry-header .entry-title, .category .post .post-content .entry-header .entry-title { margin: 0; } .blog .post .post-content .entry-content, .author .post .post-content .entry-content, .archive .post .post-content .entry-content, .category .post .post-content .entry-content { margin-top: 0.2em; } /** Catégories */ #primary .post-categories .post-categorie { display: inline-block; padding: 0.2em 0.6em; margin: 0.2em 0; background: #ececec; color: rgba(0, 0, 0, 0.6); -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; border-radius: 4px; } #primary .post-categories .post-categorie:hover { background: lightgray; } .single .entry-title { margin-bottom: 0; } #primary .entry-footer .edit-link, #primary .primary-footer .edit-link { display: inline-block; margin: 1.6em auto; } #primary .entry-footer .post-edit-link, #primary .primary-footer .post-edit-link { display: inline-block; padding: 0.4em 0.8em; background: #f1f1f1; color: rgba(0, 0, 0, 0.5); border-radius: 6px; display: inline-block; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } #primary .entry-footer .post-edit-link:hover, #primary .primary-footer .post-edit-link:hover { background: #e0e0e0; } #primary .entry-footer.flexible .post-edit-link { position: absolute; top: 1em; right: 1em; z-index: 80; } /*-------------------------------------------------------------- ## Gutenberg Blocks --------------------------------------------------------------*/ .wp-block-button .wp-block-button__link { padding: 10px 20px; line-height: 1.4; font-size: 12px; text-transform: uppercase; -webkit-box-shadow: none; box-shadow: none; font-weight: 700; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .wp-block-button .wp-block-button__link:hover { -webkit-box-shadow: inset 0 -40px rgba(255, 255, 255, 0.25); box-shadow: inset 0 -40px rgba(255, 255, 255, 0.25); cursor: pointer; } .wp-block-button .wp-block-button__link:focus { outline: none; } ul.wp-block-gallery { margin-left: 0; } ul.wp-block-gallery .blocks-gallery-item a::before { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; vertical-align: -.125em; font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Pro'; font-weight: 600; content: "\f002"; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, 20%); transform: translate(-50%, 20%); color: #fff; font-size: 22px; z-index: 5; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; opacity: 0; pointer-events: none; } ul.wp-block-gallery .blocks-gallery-item a::after { display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0e6eff; opacity: 0; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; z-index: 4; pointer-events: none; } ul.wp-block-gallery .blocks-gallery-item a:hover::before { opacity: 1; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } ul.wp-block-gallery .blocks-gallery-item a:hover::after { opacity: 0.4; } /** Alignements */ .wp-block-media-text.alignfull .wp-block-media-text__media { overflow: hidden; } .wp-block-media-text.alignfull .wp-block-media-text__media img { width: 100% !important; } .wp-block-media-text .wp-block-media-text__content { padding: 0 0 0 8%; } .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { padding: 0 8% 0 0 !important; } .wp-block-cover-image .wp-block-subhead, .wp-block-cover-image h1, .wp-block-cover-image h2, .wp-block-cover-image h3, .wp-block-cover-image h4, .wp-block-cover-image h5, .wp-block-cover-image h6, .wp-block-cover-image p, .wp-block-cover .wp-block-subhead, .wp-block-cover h1, .wp-block-cover h2, .wp-block-cover h3, .wp-block-cover h4, .wp-block-cover h5, .wp-block-cover h6, .wp-block-cover p { max-width: none; padding: 0; } /*-------------------------------------------------------------- ## Sidebar --------------------------------------------------------------*/ .site-content { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .site-content #primary { width: 75%; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .site-content #secondary { min-width: 25%; width: 25%; } @media (max-width: 770px) { .site-content { -ms-flex-wrap: wrap; flex-wrap: wrap; } .site-content #primary, .site-content #secondary { width: 100%; } } #secondary { padding-left: 2em; } #secondary .widget { margin: 2em 0; } #secondary .widget-title { margin: 0 0 0.6em 0; } @media (max-width: 770px) { #secondary { padding-left: 0; } } /*-------------------------------------------------------------- ## Comments --------------------------------------------------------------*/ .comment-content a { word-wrap: break-word; } .bypostauthor { display: block; } #comments ol, #comments ul { list-style-type: none; margin: 0; } #comments ol li, #comments ul li { margin-left: 0; } #comments .children { margin-left: 3em; } #comments .comment-list .comment-body { position: relative; margin: 1em 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } #comments .comment-list .comment-reply-link { position: absolute; top: 0; right: 0; } #comments .comment-list .says { display: none; } #comments .comment-list .comment-author img { border-radius: 50%; } #comments .comment-list .comment-author .fn { font-size: 22.4px; font-weight: 300; } #comments .comment-list .comment-metadata a { color: rgba(0, 0, 0, 0.4); font-size: 14.4px; } #comments .comment-list .comment-metadata .comment-edit-link { color: #0e6eff; } /*-------------------------------------------------------------- ## Forms --------------------------------------------------------------*/ input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], select, textarea { color: #666; border: 1px solid #ccc; border-radius: 3px; padding: 0.6em; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, select:focus, textarea:focus { color: #111; } select { border: 1px solid #ccc; } textarea { width: 100%; } /*-------------------------------------------------------------- ## Navigation --------------------------------------------------------------*/ /*-------------------------------------------------------------- ## Menus --------------------------------------------------------------*/ #main-navigation { display: none; /** Premier niveau */ /** Second niveau */ /** Troisieme niveau */ /** Les niveaux suivants n'existent pas */ } #main-navigation ul, #main-navigation li { margin: 0; padding: 0; list-style-type: none; } #main-navigation .menu a { font-size: 12px; } #main-navigation .menu > .menu-item { float: left; position: relative; } #main-navigation .menu > .menu-item > a { padding: 2.4em 1.4em; height: 100%; display: block; text-transform: uppercase; color: #333333; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; font-weight: 600; } #main-navigation .menu > .menu-item.current_page_item > a, #main-navigation .menu > .menu-item.current-menu-item > a, #main-navigation .menu > .menu-item.current_page_ancestor > a, #main-navigation .menu > .menu-item.current-menu-ancestor > a { color: #0e6eff; } #main-navigation .menu > .menu-item:hover > .sub-menu { opacity: 1; top: 100%; pointer-events: all; } #main-navigation .menu > .menu-item > .sub-menu { position: absolute; opacity: 0; top: 110%; pointer-events: none; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; background: #2b2b2b; z-index: 901; } #main-navigation .menu > .menu-item > .sub-menu > .menu-item { position: relative; } #main-navigation .menu > .menu-item > .sub-menu > .menu-item:first-child > a { padding-top: 1.4em; } #main-navigation .menu > .menu-item > .sub-menu > .menu-item:last-child > a { padding-bottom: 1.4em; } #main-navigation .menu > .menu-item > .sub-menu a { padding: 0.6em 1.6em; display: inline-block; width: 160px; color: rgba(255, 255, 255, 0.8); text-transform: uppercase; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } #main-navigation .menu > .menu-item > .sub-menu a:hover { color: rgba(255, 255, 255, 0.4); } #main-navigation .menu > .menu-item > .sub-menu > .menu-item:hover > .sub-menu { opacity: 1; left: 100%; pointer-events: all; } #main-navigation .menu > .menu-item > .sub-menu > .menu-item > .sub-menu { position: absolute; opacity: 0; top: 0; left: 110%; pointer-events: none; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; border-left: 1px solid rgba(0, 0, 0, 0.1); background: #2b2b2b; padding: 0.8em 0; z-index: 902; } #main-navigation .menu > .menu-item > .sub-menu > .menu-item > .sub-menu .sub-menu { display: none; } #main-navigation .menu-item.menu-item-has-children > a:after { display: inline-block; vertical-align: middle; content: ''; } #main-navigation .menu > .menu-item.menu-item-has-children > a:after { font-family: 'Font Awesome 5 Free'; font-weight: 600; content: "\f107"; margin-left: .5em; margin-bottom: .25em; color: rgba(0, 0, 0, 0.4); } #main-navigation .menu > .menu-item.menu-item-has-children:hover > a:after { content: "\f106"; } #main-navigation .menu > .menu-item > .sub-menu > .menu-item.menu-item-has-children > a:after { font-family: 'Font Awesome 5 Free'; font-weight: 600; content: "\f105"; position: absolute; right: 1em; top: 50%; -webkit-transform: translateY(-80%); transform: translateY(-80%); color: rgba(255, 255, 255, 0.4); } #main-navigation .menu > .menu-item > .sub-menu > .menu-item .menu-item.menu-item-has-children > a::after { display: none; } /* Toggle Menu */ .site-navigation .menu-toggle { display: block; } /* Toggle Link */ .site-navigation .menu-toggle { font-size: 12px; font-weight: 600; padding: 2.4em 1.4em; height: 100%; text-transform: uppercase; color: rgba(0, 0, 0, 0.7); -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .site-navigation .menu-toggle:hover { cursor: pointer; color: rgba(0, 0, 0, 0.9); } .site-navigation .menu-toggle .svg-inline--fa { color: #0e6eff; } @media (max-width: 480px) { .site-navigation .menu-toggle .svg-inline--fa { font-size: 16px; } } .site-navigation .menu-toggle .fa { padding-right: 0.6em; color: #0e6eff; } @media (max-width: 480px) { .site-navigation .menu-toggle .fa { padding-right: 0; font-size: 16px; color: rgba(0, 0, 0, 0.8); } } @media (max-width: 480px) { .site-navigation .menu-toggle span { display: none; } } #masthead.-sticky .site-navigation .menu-toggle { padding-top: 1.2em; padding-bottom: 1.2em; } /*-------------------------------------------------------------- # Mobile Menu --------------------------------------------------------------*/ #burger-menu { opacity: 0; pointer-events: none; position: fixed; width: 100%; height: 100%; left: 0; top: 0; padding-top: 4em; z-index: 9999; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; -webkit-transform: scale(1.1); transform: scale(1.1); } #burger-menu .navigation-overlay { display: block; content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.9; background: #0e6eff; z-index: -1; } #burger-menu .burger-container { position: fixed; width: 100%; height: 100%; left: 0; top: 0; overflow-y: auto; } #burger-menu .close-burger { position: absolute; top: 1em; right: 1em; font-size: 28px; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; color: white; } #burger-menu .close-burger:hover { color: rgba(255, 255, 255, 0.6); cursor: pointer; } #burger-menu .menu { padding: 2em; } #burger-menu ul, #burger-menu li { margin: 0; padding: 0; list-style-type: none; } #burger-menu .menu li a { color: white; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } #burger-menu .menu li a:hover { color: rgba(255, 255, 255, 0.4); } #burger-menu .menu > li { margin-bottom: 1em; } #burger-menu .menu > li > a { font-size: 24px; font-weight: 700; text-transform: uppercase; } #burger-menu .menu > li li { margin-bottom: 1em; } #burger-menu .menu > li li > a { font-size: 20.8px; font-weight: 700; } #burger-menu .menu > li li li { margin-bottom: 0; } #burger-menu .menu > li li li > a { font-size: 14.4px; font-weight: 400; } #burger-menu .sub-menu { margin-left: 1em; padding-left: 1em; border-left: 1px dotted rgba(255, 255, 255, 0.8); } @media (max-width: 770px) { .active-burger #burger-menu { opacity: 1; pointer-events: all; -webkit-transform: scale(1); transform: scale(1); } } @media (min-width: 770px) { .site-navigation .menu-toggle { display: none; } .site-navigation #main-navigation { display: block; } } /*-------------------------------------------------------------- ## Widgets --------------------------------------------------------------*/ .widget { margin: 0 0 1.5em; /* Make sure select elements fit in widgets. */ } .widget select { max-width: 100%; } .widget .widget-title { font-size: 22.4px; font-weight: 600; } /*-------------------------------------------------------------- ## Media --------------------------------------------------------------*/ .page-content .wp-smiley, .entry-content .wp-smiley, .comment-content .wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } /* Make sure embeds and iframes fit their containers. */ embed, iframe, object { max-width: 100%; } .size-auto, .size-full, .size-large, .size-medium, .size-thumbnail { max-width: 100%; height: auto; } @media (max-width: 480px) { .site-content img { max-width: 100% !important; height: auto; } } /*-------------------------------------------------------------- ## Captions --------------------------------------------------------------*/ .wp-caption { margin-bottom: 1.5em; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; } .wp-caption .wp-caption-text { margin: 0.8075em 0; } .wp-caption-text { text-align: center; } /*-------------------------------------------------------------- ## Galleries --------------------------------------------------------------*/ .gallery { margin-bottom: 1.5em; } .gallery.gallery-columns-2 .gallery-item { width: 50%; } .gallery.gallery-columns-3 .gallery-item { width: 33.33333%; } .gallery.gallery-columns-4 .gallery-item { width: 25%; } .gallery.gallery-columns-5 .gallery-item { width: 20%; } .gallery.gallery-columns-6 .gallery-item { width: 16.66667%; } .gallery.gallery-columns-7 .gallery-item { width: 14.28571%; } .gallery.gallery-columns-8 .gallery-item { width: 12.5%; } .gallery.gallery-columns-9 .gallery-item { width: 11.11111%; } .gallery-item { display: inline-block; text-align: center; vertical-align: top; width: 100%; } .gallery-caption { display: block; }