/* Disable mobile toolbar  -------------------------------------------------- */
/*
@media (max-width:1199px){
  html[lang] { margin-top:0 !important }
  #wpadminbar { display:none }
}*/

/* Global ------------------------------------------------------------------- */
:root{
  accent-color: var(--primary);
}

@media (prefers-reduced-motion:no-preference) {
  /* html.page-loaded {
      scroll-behavior: smooth
  } */
}

*, ::after, ::before {
  box-sizing: border-box
}

::-moz-selection{ background:var(--primary-darker); color:var(--white) }
::selection{ background:var(--primary-darker); color:var(--white) }

/* Scrollbar */
/*
::-webkit-scrollbar { width:0.5em; min-width:10px }
::-webkit-scrollbar-track-piece { background:#f1f1f1; width:2px; -webkit-box-shadow:none }
::-webkit-scrollbar-thumb { background-color:#c1c1c1 }
::-webkit-scrollbar-thumb:hover { background:var(--primary) }
html { scrollbar-color:var(--blue) #f1f1f1; scrollbar-width:thin }
*/

html{ font-size:var(--body-font-size) }
body { color:var(--body-color); background:var(--body-bg); font-size: 1rem; font-family:var(--font-primary); line-height:var(--line-height) }
p { margin-bottom:1.5rem }

img{ max-width:100%; height:auto }
figcaption { font-size:.875em; }
kbd { color:var(--white); background-color:var(--black); }
mark { background-color:var(--bg-darker); color:var(--body-color); }

hr.space,
hr.transparent { background-color:transparent }

iframe{ vertical-align: middle }

a{ color:inherit; text-decoration:none }
a:hover{ text-decoration:underline }

.align-top { vertical-align: top!important }
.align-middle { vertical-align: middle!important }
.align-bottom { vertical-align: bottom!important }

.align-items-start { align-items: flex-start!important }
.align-items-end { align-items: flex-end!important }
.align-items-center { align-items: center!important }

.bigger { font-size:larger }

.border-primary{ border:2px solid var(--primary) }
.border-secondary{ border:2px solid var(--secondary) }
.border-radius { border-radius:var(--border-radius) }
.border-none { border:none !important }

.clamp{ overflow:hidden; display:-webkit-box; text-overflow:ellipsis; -webkit-box-orient:vertical }
.clamp p{ margin:0; }
.clamp.clamp-1{ max-height:calc(1 * var(--line-height)); -webkit-line-clamp:1 }
.clamp.clamp-2{ max-height:calc(2 * var(--line-height)); -webkit-line-clamp:2 }
.clamp.clamp-3{ max-height:calc(3 * var(--line-height)); -webkit-line-clamp:3 }
.clamp.clamp-4{ max-height:calc(4 * var(--line-height)); -webkit-line-clamp:4 }

.font-primary{ font-family:var(--font-primary) }
.font-secondary{ font-family:var(--font-secondary) }

.fw-lighter { font-weight: lighter!important }
.fw-light { font-weight: 300!important }
.fw-normal { font-weight: 400!important }
.fw-medium { font-weight: 500!important }
.fw-semibold { font-weight: 600!important }
.fw-bold { font-weight: 700!important }
.fw-bolder { font-weight: bolder!important }

.g-0{ gap:0 !important }
.g-1{ gap:1rem !important }
.g-2{ gap:2rem !important }
.g-3{ gap:3rem !important }

.m-0{ margin:0 !important }
.m-auto{ margin: auto!important }

.mb-0{ margin-bottom:0 !important }
.mb-1{ margin-bottom:1rem !important }
.mb-2{ margin-bottom:2rem !important }
.mb-3{ margin-bottom:3rem !important }
.mb-4{ margin-bottom:4rem !important }
.mb-5{ margin-bottom:5rem !important }

.mt-0{ margin-top:0 !important }
.mt-1{ margin-top:1rem !important }
.mt-2{ margin-top:2rem !important }
.mt-3{ margin-top:3rem !important }
.mt-4{ margin-top:4rem !important }
.mt-5{ margin-top:5rem !important }

.d-inline { display: inline!important }
.d-inline-block { display: inline-block!important }
.d-inline-flex { display: inline-flex!important }
.d-block { display: block!important }
.d-flex { display: flex!important }
.d-none { display: none!important }

.h-100{ height:100% !important }
.h-auto{ height:auto !important }

.img-circle { border-radius:50% }

.overflow-visible{ overflow:visible !important }
.overflow-hidden { overflow:visible !important }
.overflow-scroll { overflow:scroll  !important }

.lead { font-size:1.25rem; font-weight:300 }

.lh-1 { line-height: 1!important }
.lh-sm { line-height: 1.25!important }
.lh-base { line-height: 1.5!important }
.lh-lg { line-height: 2!important }

.p-0{ padding:0 !important }
.p-1{ padding:1rem !important }
.p-2{ padding:2rem !important }

.pt-0{ padding-top:0 !important }
.pt-1{ padding-top:1rem !important }
.pt-2{ padding-top:2rem !important }
.pt-3{ padding-top:3rem !important }
.pt-4{ padding-top:4rem !important }
.pt-5{ padding-top:5rem !important }

.pb-0{ padding-bottom:0 !important }
.pb-1{ padding-bottom:1rem !important }
.pb-2{ padding-bottom:2rem !important }
.pb-3{ padding-bottom:3rem !important }
.pb-4{ padding-bottom:4rem !important }
.pb-5{ padding-bottom:5rem !important }

.smaller { font-size:smaller }

.sr-only { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.sr-only-focusable:active,
.sr-only-focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

.td-none { text-decoration: none!important }
.td-underline { text-decoration: underline!important }
.td-line-through { text-decoration: line-through!important }

.text-lowercase { text-transform: lowercase!important }
.text-uppercase { text-transform: uppercase!important }
.text-capitalize { text-transform: capitalize!important }

.text-left{ text-align:left }
.text-center{ text-align:center }
.text-right{ text-align:right }

.text-wrap { white-space: normal!important }
.text-nowrap { white-space: nowrap!important }
.text-break { word-wrap: break-word!important; word-break: break-word!important }

/* Titles */
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 { font-family:var(--font-secondary); font-weight:var(--hx-font-weight); margin-bottom:1rem; line-height:1em; }
.h1, h1 { font-size:30px }
@media (min-width: 1200px) {
  .h1, h1 { font-size:var(--h1-font-size); font-weight:var(--h1-font-weight) }
}

.h2, h2 { font-size:20px }
@media (min-width: 1200px) {
  .h2, h2 { font-size:var(--h2-font-size); font-weight:var(--h2-font-weight) }
}

.h3, h3 {  font-size:20px }
@media (min-width: 1200px) {
  .h3, h3 { font-size:var(--h3-font-size); font-weight:var(--h3-font-weight) }
}

.h4, h4 { font-size:15px }
@media (min-width: 1200px) {
  .h4, h4 { font-size:var(--h4-font-size); font-weight:var(--h4-font-weight) }
}

.h5, h5 { font-size: 15px }
@media (min-width: 1200px) {
  .h5, h5 { font-size:20px }
}

.h6, h6 { font-size: 12px }
@media (min-width: 1200px) {
  .h6, h6 { font-size:15px }
}

h2:not(:first-child) { margin-top: 3rem }


/* Blockquote */
blockquote { border-left:5px solid currentColor; background-color:var(--bg-darker); font-size:1.1rem; padding:1.5rem 2rem; font-weight:300 }
blockquote + figcaption{ font-size: .875em; margin-bottom: 1rem }
blockquote>:last-child { margin-bottom:0 }
blockquote>:last-child::before { content: "— " }


/* Table */
table { border-left: var(--border); border-top: var(--border);  border-collapse: separate; border-spacing:0; margin:0 0 1.5rem; width:100%; }
thead th { font-weight:700; text-transform: uppercase; font-family:var(--font-secondary) }
@media (min-width:992px){
  th, td { padding:1.3em; }
}
th, td { padding:.8em; }
caption, th, td { font-weight:400; text-align:left }
th, td { border: var(--border); border-width: 0 1px 1px 0; }

/* Lists */
ul ::marker,
ol ::marker{ color: var(--primary) }


/* Form fields -------------------------------------------------------------- */
input[type="text"],
input[type="name"],
input[type="url"],
input[type="tel"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="week"],
input[type="month"],
select,
textarea { 
  color: var(--black);
  width: 100%;
  padding: 12px 0;
  border-radius: 0;
  line-height: inherit;
  background: transparent;
  border: none;
  border-bottom: 1px solid #000;
  font-family: var(--font-primary);
}
textarea { resize:vertical }

input:focus,
textarea:focus{ outline:0 }

select{ min-height:51px; padding:8px 15px }

/* Color */
input[type="color"]{ cursor: pointer; background-color: #fff; border: var(--border); height: 30px; width: 50px; padding: 5px; display: inline-block; vertical-align: middle; }
input[type="color"] ~ label { cursor: pointer; margin-left: 0.5rem; }
input[type="color"]::-webkit-color-swatch-wrapper { padding:0 }

/* Checkbox */
input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width:1.3rem; height:1.3rem; vertical-align: text-bottom; outline: 0; cursor: pointer; box-shadow: 0 0 0 1px var(--primary); background: #fff }
input[type="checkbox"] ~ label { cursor: pointer; margin-left: 0.5rem; }
input[type="checkbox"]::-ms-check { display: none; }
input[type="checkbox"]:checked { background: var(--primary); border: 4px solid #fff }
input[type="checkbox"]:focus { box-shadow: 0 0 0 1px var(--primary), var(--box-shadow); outline:0 }

/* Radio */
input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width:1.3rem; height:1.3rem; vertical-align: text-bottom; outline: 0; cursor: pointer; box-shadow: 0 0 0 1px var(--primary); border-radius: 2em; background: #fff }
input[type="radio"] ~ label { cursor: pointer; margin-left: 0.5rem; }
input[type="radio"]::-ms-check { display: none; }
input[type="radio"]:checked { background: var(--primary); border: 4px solid #fff }
input[type="radio"]:focus { box-shadow: 0 0 0 1px var(--primary), var(--box-shadow); outline:0 }

/* Placeholders */
::-webkit-input-placeholder { color: rgba(0, 0, 0, .5) }
::-moz-placeholder { color: rgba(0, 0, 0, .5) }
:-ms-input-placeholder { color: rgba(0, 0, 0, .5) }
:-moz-placeholder { color: rgba(0, 0, 0, .5) }

/* Change Autocomplete styles in Chrome*/
/* https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/ */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0px 100px #fff inset; /*-webkit-text-fill-color: green;*/ }

input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0px 100px #fff inset, var(--box-shadow); }


/* Colors text ---------------------------------------------------------------*/
.color-primary{ color:var(--primary) }
.color-secondary{ color:var(--secondary) }
.color-tertiary{ color:var(--tertiary) }
.color-accent{ color:var(--accent) }
.color-light{ color:var(--light) }
.color-dark{ color:var(--dark) }
.color-blanc{ color:var(--white) }
.color-noir{ color:var(--black) }


/* Icons ---------------------------------------------------------------------*/

i.icon { width:2em; height:2em; font-size:1rem; background:var(--bg-darker); display:inline-flex; align-items:center; justify-content:center; max-width:initial; vertical-align:middle }

/* Icons Sizes */
i.medium { font-size:2rem }
i.large { font-size:2.8rem }

/* Icons shapes */
i.square  { border-radius:0px }
i.rounded { border-radius:4px }
i.circle  { border-radius:50% }

/* Colors */
i.primary { color:var(--primary) }

i.reverse,
i.primary.reverse { background:var(--primary); color:#fff }

i.border { background:transparent; border:var(--border) }
i.border-primary { background:transparent; border:1px solid var(--primary) }

.bg-primary i:not([class*="color-"]).primary{ color:var(--body-color) }
.bg-primary i:not([class*="color-"]).border-primary { border-color:var(--body-color) }
.bg-primary i:not([class*="color-"]).reverse { background:var(--black); color:#fff }
.bg-primary i:not([class*="color-"]).primary.reverse { background:#fff; color:var(--primary) }

.bg-primary i[class*="color-"].reverse:not(.primary) { color:var(--primary) }

.bg-dark i.reverse { color:var(--black) }
.bg-dark i.reverse[class*="color-"]:not(.primary) { color:var(--primary) }


/* Background colors  ------------------------------------------------------------- */
.has-primary-background-color{ --bgcolor:var(--primary); background-color:var(--primary) !important }
.has-secondary-background-color{ --bgcolor:var(--secondary); background-color:var(--secondary) !important }
.has-tertiary-background-color{ --bgcolor:var(--tertiary); background-color:var(--tertiary) !important }
.has-accent-background-color{ --bgcolor:var(--accent); background-color:var(--accent) !important }
.has-light-background-color{ --bgcolor:var(--light); background-color:var(--light) !important }
.has-dark-background-color{ --bgcolor:var(--dark); background-color:var(--dark) !important }
.has-blanc-background-color{ --bgcolor:var(--white); background-color:var(--white) !important }
.has-noir-background-color{ --bgcolor:var(--black); background-color:var(--black) !important }

.has-primary-to-secondary-gradient-background { background:linear-gradient(115deg, var(--primary) 0%, var(--secondary) 100%) }
.has-primary-to-tertiary-gradient-background { background:linear-gradient(115deg, var(--primary) 0%, var(--tertiary) 100%) }


/* Text colors  ------------------------------------------------------------- */
.has-primary-color{ color:var(--primary) !important }
.has-secondary-color{ color:var(--secondary) !important }
.has-tertiary-color{ color:var(--tertiary) !important }
.has-accent-color{ color:var(--accent) !important }
.has-light-color{ color:var(--light) !important }
.has-dark-color{ color:var(--dark) !important }
.has-blanc-color{ color:var(--white) !important }
.has-noir-color{ color:var(--black) !important }


/* Layout ------------------------------------------------------------------- */
@media (min-width:1200px){
  .front .hide-desktop{ display: none }
}
@media (max-width:589px){
  .hide-xs{ display:none }
  /* xs reverse */
  .is-style-columns-xs-reverse,
  .xs-reverse{ flex-direction:column-reverse; flex-wrap:initial !important }

  .text-xs-left{ text-align:left }
  .text-xs-center{ text-align:center }
  .text-xs-right{ text-align:right }
}
@media (min-width:590px) and (max-width:781px){
  .hide-sm{ display:none }
  /* sm row */
  .sm-row{ flex-direction: row; flex-wrap: nowrap !important; }
  .sm-row.is-style-columns-sm-reverse{ flex-direction: row-reverse; }
  /* sm reverse */
  .sm-reverse{ flex-direction: column-reverse; flex-wrap: initial !important; gap:30px }
  .sm-reverse.sm-row{ flex-direction:row-reverse }
  .is-style-columns-sm-reverse{ flex-direction:column-reverse; flex-wrap: initial !important; gap: 30px; }
  .is-style-columns-sm-reverse.sm-row{ flex-direction:row-reverse; }
  .is-style-columns-sm-reverse.sm-row > .wp-block-column{ margin-left:0; margin-right:0 }
}
@media (min-width:782px) and (max-width:991px){
  /* md column */
  .md-column{ flex-direction:column; flex-wrap:nowrap }
  .md-column .wp-block-column{ margin-left:0; margin-right:0 }
  .is-style-columns-md-column{ flex-direction:column; flex-wrap:nowrap }
  .is-style-columns-md-column .wp-block-column{ margin-left:0 !important; margin-right:0 !important }
}
@media (min-width:782px) and (max-width:1199px){
  .hide-md{ display:none }
}

/* Container */
.layout-banner .container,
.has-container .container { width:var(--container-width); margin-left: auto; margin-right: auto; padding-left:var(--container-padding); padding-right:var(--container-padding) }
.container .container { padding-left:0; padding-right:0; width:100% }

/* WordPress Core classes  -------------------------------------------------- */
/* https://codex.wordpress.org/CSS#WordPress_Generated_Classes */

/*.alignnone { margin: 5px 20px 20px 0; }*/
.aligncenter,
div.aligncenter { display: block; margin: 5px auto 5px auto; }
.alignright { float:right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }
a img.alignright { float: right; margin: 5px 0 20px 20px; }
a img.alignnone { margin: 5px 20px 20px 0; }
a img.alignleft { float: left; margin: 5px 20px 20px 0; }
a img.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; /* Image does not overflow the content area */ padding: 5px 3px 10px; text-align: center; }
.wp-caption.alignnone { margin: 5px 20px 20px 0; }
.wp-caption.alignleft { margin: 5px 20px 20px 0; }
.wp-caption.alignright { margin: 5px 0 20px 20px; }
.wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; }

.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; }
.screen-reader-text:focus { background-color: #eee; clip: auto !important; clip-path: none; color: #444; display: block; font-size: 1em; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; }


/* Main */
.layout-wrapper{ margin:0 auto; min-height:100%; display:flex; flex-direction:column }
.layout-wrapper > main { flex:1 0 auto }

main{ --main-padding:5rem; padding:var(--main-padding) 0; position:relative }
main > .container.has-sidebar{ display:flex; align-items:flex-start;
  width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding); }
@media (max-width:991px){
  main{ --main-padding:3rem }
  main > .container.has-sidebar{ flex-direction:column; align-items:stretch }
}

.layout-sidebar{ margin:0 3rem 3rem 0; padding:2rem 1.5rem; flex:0 0 300px; border:var(--border); border-radius:var(--border-radius); background-color:transparent; clear:both }
.layout-content{ width:100% }
.layout-content + .layout-sidebar{ margin-left:3rem; margin-right:0 }
@media (max-width:991px){
  .layout-sidebar{ margin-right:0; margin-bottom:1.5rem }
  .layout-content + .layout-sidebar{ margin-left:0; margin-top:1.5rem }
}


/* Navigation --------------------------------------------------------------- */
.navigation + div{ margin-left: auto; } /* Space between menu and icons */
.navigation ul{ list-style:none; padding:0; margin:0; }
.navigation ul ul{ background:var(--bgcolor, #fff) }
.navigation-icon { padding: 1.6rem 0.75rem; }
body.wp-admin .navigation ul li a{ pointer-events:none; }
@media (min-width:1200px){
  .navigation ul{ transition: all 200ms ease }
  .navigation ul li{ position:relative; padding:0 }
  .navigation ul li a{ display: block; text-decoration: none; line-height:1.5rem; transition: all 200ms ease }
  .navigation ul li.menu-item-has-children > a{ padding-right: 30px; }
  .navigation ul li.menu-item-has-children > a:after{ content:"❯"; font-size:0.75rem; font-weight:600; position: absolute; right: 10px; transform: rotate(90deg); transition: all 200ms ease }
  .navigation ul li.menu-item-has-children:hover > a:after,
  .navigation ul li.menu-item-has-children:focus-within > a:after{ transform: rotate(-90deg) }
  /* Lvl 1 */
  .navigation > div{ height:100% }
  .navigation > div > ul{ display: flex; height:100%; gap: 60px; }
  .navigation > div > ul > li { align-items:center; display:flex;  }
  .navigation > div > ul > li > a{ display: inline-flex; padding:2.3rem 0; text-transform: uppercase; height:100%; align-items: center; position: relative;
          font-size: 14px;
        letter-spacing: 1px;
  }
  body:not(.apres-header) .navigation > div > ul > li > a{ color: #fff; }
  .navigation > div > ul > li > a:before,
  .navigation > div > ul > li > span > a:before{
      content: '';
        display: block;
        position: absolute;
        left: 0;
        width: 100%;
        height: 1px;
        background: currentColor;
        bottom: 30px;
        transform: scaleX(0);
        transform-origin: center left;
        transition: all 500ms ease; 
        will-change: transform;
      }
  .bg-primary .navigation > div > ul > li > a:before{ background:#fff }

  .navigation > div > ul > li:hover > a:before,
  .navigation > div > ul > li:focus > a:before,
  .navigation > div > ul > li > span > a:hover:before,
  .navigation > div > ul > li > span > a:focus:before,
  .navigation > div > ul > li.current-anchor > a:before,
  .navigation > div > ul > li.current-menu-item > a:not([href*="#"]):before,
  .navigation > div > ul > li.current-menu-ancestor > a:not([href*="#"]):before{ transform:scaleX(1) translateZ(0) }
  /* Lvl2 & more */
  .navigation ul ul.sub-menu{ display: block; opacity: 0; pointer-events: none; z-index: 2; width: 200px; display: block; position: absolute; top:100%; left:0; transform: translateY(-50px); box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.15) }
  .navigation ul li:hover > ul.sub-menu,
  .navigation ul li:focus-within > ul.sub-menu{ opacity: 1; pointer-events: initial; transform:translateY(0) }
  .navigation ul ul.sub-menu li a{ padding:0.8rem 1rem; border-top: var(--border) }
  .navigation ul ul.sub-menu li.current-anchor > a,
  .navigation ul ul.sub-menu li.current-menu-item > a:not([href*="#"]),
  .navigation ul ul.sub-menu li.current-menu-ancestor > a:not([href*="#"]){ background:var(--bg-darker); cursor:default }
  .navigation ul ul.sub-menu li.menu-item-has-children > a:after{ transform: rotate(0deg) }
  .navigation ul ul.sub-menu li.menu-item-has-children:hover > a:after,
  .navigation ul ul.sub-menu li.menu-item-has-children:focus-within > a:after{ transform: rotate(180deg) }
  /* Lvl3 & more */
  .navigation ul ul.sub-menu ul{ top:0; left: 100%; transform: translateX(-50px) }
  .navigation ul ul.sub-menu li:hover > ul,
  .navigation ul ul.sub-menu li:focus-within > ul{ transform: translateX(0) }
  .navigation ul ul.sub-menu ul li:first-of-type > a{ border-top:1px solid var(--black) }

  /* Btn nav mobile */
  #toggle-nav{ display: none; }
}
@media (max-width:1199px){
  body.js-navigation-opened .layout-header{ background:var(--tertiary) }
  .navigation{ background:var(--bgcolor, var(--tertiary)); opacity:0; transform:translateY(50px); pointer-events:none; 
    height:calc(100dvh - 88px); padding:40px 20px 120px 20px;
    overflow:auto; position:fixed; top:88px; left:0; width:100%; z-index: 999;
    transition:all 200ms ease; }
  .navigation ul{ display: block }
  .navigation ul li{ position: relative; padding: 0; border-bottom:1px solid #EBE6DC; cursor: pointer; }
  .navigation ul li.item-has-mega-menu > a{ display: none; }
  .navigation ul li a { display: block; padding: 21px 0px; text-transform: uppercase; font-weight: 500; }
  .navigation ul li.menu-item-has-children > a{ margin-right:60px; border-right:var(--border) }
  .navigation ul li.menu-item-has-children > a:after{ content:"❯"; font-weight:600; pointer-events: none; position: absolute; top:9px; right:25px; transform: rotate(90deg);}
  .navigation ul li.current-anchor > a,
  .navigation ul li.current-menu-item > a:not([href*="#"]),
  .navigation ul li.current-menu-ancestor > a:not([href*="#"]){ background:var(--bg-darker); cursor:default }
  /* Header Nav Lvl 2 */
  .navigation ul ul.sub-menu{ display: none; border-top:var(--border) }
  .navigation ul ul.sub-menu.active{ display: block }
  .navigation ul ul.sub-menu > li:last-of-type{ border-bottom:none }
  .navigation ul ul.sub-menu > li > a{ padding-left: 30px; }
  .navigation ul ul.sub-menu ul > li > a{ padding-left: 45px; }
  body.js-navigation-opened{ overflow: hidden }
  body.js-navigation-opened .navigation{ opacity: 1; transform: translateY(0); pointer-events: initial; }
  .mega-menu-content > div{ padding: 0 !important;}
  .mega-menu-content .wp-block-spacer{ height: 20px !important;}

  /* Btn nav mobile */
  #toggle-nav { width: 50px; cursor: pointer;position: relative; right: -15px; }
  #toggle-nav div { width: 100%; height: 2px; background:#fff;  margin:8px auto; transition: all 0.3s; will-change: transform; backface-visibility: hidden; }
  body.apres-header #toggle-nav div { background:var(--dark) }
  body #toggle-nav div.one { width: 80%; }
  body #toggle-nav div.three { width: 80%; }
  body.js-navigation-opened #toggle-nav .one { transform: rotate(45deg) translate(5px, 5px); }
  body.js-navigation-opened #toggle-nav .two { opacity: 0; }
  body.js-navigation-opened #toggle-nav .three { transform:rotate(-45deg) translate(9px, -9px) }
}

/* Header ------------------------------------------------------------------- */

.layout-header{ position: sticky; top: 0px; z-index: 99; } 
body.is-sticky-up.is-scroll-down:not(.js-navigation-opened) .layout-wrapper > header{ animation:400ms ease-in 1 forwards stickyHeaderClose; transform: translateY(-100%); }
.layout-wrapper > header > .wp-block-group { transition: transform 500ms ease; transition-delay: .35s;}
body.is-sticky-up.is-scroll-down:not(.js-navigation-opened) .layout-wrapper > header > .wp-block-group { transform: translateY(-100%);transition-delay: 0; }
body.is-sticky-up.is-scroll-down:not(.js-navigation-opened) .layout-wrapper > header {  transition-delay: .55s; }
/* 
body.is-sticky-up.is-scroll-up:not(.has-menu-opened) .layout-wrapper > header{  animation:600ms ease-in 1 forwards stickyHeader } 
*/
body.is-sticky-up.intro-finished:not(.apres-header):not(.has-menu-opened) .layout-wrapper > header{   transition:500ms } 

@media (min-width:1200px){
  body.admin-bar .layout-header{top:32px }
}
@media (max-width:781px){
  body.admin-bar .layout-header{ top:46px }
}


@keyframes stickyHeader{
  from{ pointer-events: none;  }
  to{pointer-events: initial;  }
}
@keyframes stickyHeaderClose{
  from{ pointer-events: initial; }
  to{ pointer-events: none; }
}


/* Header buttons */
.header-buttons{ display: flex }
.header-buttons > *{ padding: 0 0.7rem; display:flex; align-items:center }

.navigation-search .search-btn { background:none; border:none; font-size:1.4rem; padding:0; box-shadow:none; color:unset }
.navigation-search .search-btn svg { width:24px; fill: currentColor; }

.search-form { padding:1.5rem; pointer-events:none; position:fixed; top:0px; left:0px; width:100%; height:100%; background-color:rgba(0, 0, 0, .95); transition:all 0.25s ease-in-out; transform:translateY(50%); display:flex; flex-direction:column; justify-content:center; align-items:center; opacity:0; z-index:1000;  }
.search-form input[type="search"]{ color:rgba(255, 255, 255, .5); border:none; border-bottom:1px solid rgb(255, 255, 255, .15); background:transparent; font-size:3rem; text-align:center; margin:0 auto; padding:0 0.5rem }
.search-form input[type="search"]::-webkit-input-placeholder { color:rgba(255, 255, 255, .3) }
.search-form input[type="search"]::-moz-placeholder { color:rgba(255, 255, 255, .3) }
.search-form input[type="search"]:-ms-input-placeholder { color:rgba(255, 255, 255, .3) }
.search-form input[type="search"]:-moz-placeholder { color:rgba(255, 255, 255, .3) }
.search-form input[type="submit"]{ margin-top:50px }
.search-form button[type="button"]{ position:fixed; top:15px; right:15px; font-size: 1.5rem; font-weight: bold; }

body.js-search-opened { overflow:hidden }
body.js-search-opened .search-form{ transform:translateY(0); opacity:1; pointer-events:initial }
body.js-search-opened .layout-header{ transform:none; animation:initial }
@media (max-width:991px){
  .search-form input[type="search"]{ font-size:2.125rem }
}

/* Footer */
.layout-footer{ overflow:hidden } 

/* Grid custom -------------------------------------------------------------- */
.grid{ --columns:3; display: grid; grid-template-columns:repeat(var(--columns), minmax(100px, 1fr)); grid-gap:2rem }
.grid > div:empty{ display:none }
.grid--align-center{ align-items:center }
.grid.grid-1{ --columns:1 }
.grid.grid-2{ --columns:2 }
.grid.grid-3{ --columns:3 }
.grid.grid-4{ --columns:4 }
.grid.grid-5{ --columns:5 }
.grid.grid-6{ --columns:6 }
@media (max-width:1199px){
  .grid.grid-6{ --columns:3 }
}
@media (max-width:991px){
  .grid.grid-5,
  .grid.grid-3,
  .grid.grid-4{ --columns:3 }
}
@media (max-width:781px){
  .grid.grid-2,
  .grid.grid-3,
  .grid.grid-4,
  .grid.grid-5,
  .grid.grid-6{ --columns:1 }
}
@media (max-width:781px){
  .grid.grid-sm-2{ --columns:2 }
  .grid.grid-sm-3{ --columns:3 }
  .grid.grid-sm-4{ --columns:4 }
  .grid.grid-sm-5{ --columns:5 }
}
@media (max-width:550px){
  .grid.grid-xs-2{ --columns:2 }
  .grid.grid-xs-3{ --columns:3 }
  .grid.grid-xs-4{ --columns:4 }
  .grid.grid-xs-5{ --columns:5 }
}

/* Grid flex ---------------------------------------------------------------- */
.grid-flex > div{ margin-bottom:3rem }
.grid-flex > div:last-of-type{ margin-bottom:0 }
@media (min-width:782px) {
  .grid-flex{ display:flex }
  .grid-flex > div{ flex:1; margin:0 1rem }
  .grid-flex > div:first-of-type{ margin-left:0 }
  .grid-flex > div:last-of-type{ margin-right:0 }
}


/* Banner ------------------------------------------------------------------- */
.layout-banner{ position:relative; min-height:7rem; padding:1rem 0; display:flex; align-items:center; background: rgba(0, 0, 0, .05) }
.layout-banner.has-image .container{ z-index:2; position:absolute; top:50%; margin:auto; left:50%; transform:translate(-50%, -50%) }
.layout-banner > img{ object-fit:cover; width:100% }
.layout-banner .page-title h1{ margin:1rem 0 0 0; word-wrap:break-word; font-size:1.4rem }
.layout-banner .game-logo{ max-width:300px; max-height:150px }
.layout-banner .breadcrumbs{ padding:10px 0; font-size:.9rem }
.layout-banner .breadcrumbs .breadcrumbs__link[href=""]{ pointer-events:none }
@media (min-width:1200px){
    .layout-banner .page-title h1{ margin:0; font-size:1.6rem; font-weight:300 }
}

.layout-banner.has-image { padding:0 }
.layout-banner.has-image:before { content: "";top: 0; left: 0; right:0; width: 100%; height: 100%; background: rgba(0, 0, 0, .8); display: block; z-index: 1; position: absolute; }
.layout-banner.has-image > img{ height:300px; }
.layout-banner.has-image .page-title h1{ color: #fff; }
.layout-banner.has-image .container{ z-index:2; position:absolute; top:50%; margin:auto; left:50%; transform:translate(-50%, -50%) }
@media (min-width:1200px){
  .layout-banner.has-image > img{ height:500px; }
  .layout-banner.has-image .page-title h1{ font-size:3rem }
}

/* Image formats ------------------------------------------------------------ */
.format{ display:block; position:relative; overflow:hidden }

.format iframe,
.format object,
.format embed,
.format video,
.format img{ position:absolute; top:0; left:0; width:100%; height:100%; }
.format img{ object-fit:cover; transition:all 200ms ease }

.format-3-1{ padding-bottom:33.33% }
.format-16-9{padding-bottom:56.25% }
.format-4-3{ padding-bottom:75% }
.format-1-1{ padding-bottom:100% }
.format-6-7{ padding-bottom:116.66% }
.format-3-4{ padding-bottom:133.33% }

.format .components-resizable-box__container {
  position: static !important;
}

.format-video:before {
  content: "";
  pointer-events: none;
  z-index: 3;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg,rgba(0,40,80,1) 0%,rgba(255,255,255,0) 60%)
}

.format-video:after {
  content: "";
  pointer-events: none;
  z-index: 4;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/play.svg) no-repeat center center
}

/* Social networks ---------------------------------------------------------- */
.social-networks{ margin:0; padding:0; list-style:none; font-size:1rem; display:block }
.social-networks li{ display:inline-block; margin:2px; transition:all 200ms ease }
.social-networks li:hover{ transform:rotate(360deg) }
.social-networks li a{ display: inline-flex; width: 30px; height: 30px; background: var(--primary); padding: 7px; border-radius: var(--border-radius); text-decoration:none; justify-content: center; }
.social-networks li a svg{ fill:white }
.social-networks li.network-facebook { --primary:#4c66a4 }
.social-networks li.network-twitter{ --primary:#15b4c9 }
.social-networks li.network-linkedin{ --primary:#006599 }
.social-networks li.network-instagram{ --primary:#bc2a8d }
.social-networks li.network-skype{ --primary:#40beee }
.social-networks li.network-youtube{ --primary:#cc2423 }
.social-networks li.network-twitch { --primary:#9147ff }
.social-networks li.network-steam { --primary:#171a21 }
.social-networks li.network-pinterest { --primary:#bd081c }
.social-networks li.network-whatsapp { --primary:#4CAF50 }
.social-networks li.network-email { --primary:#171a21 }
.social-networks li.network-url { --primary:#171a21 }
.social-networks li.network-myspace { --primary:#003398 }
.social-networks li.network-soundcloud { --primary:#F75219 }
.social-networks li.network-wikipedia { --primary:#000000 }
.social-networks li.network-tumblr { --primary:#34526F }
.header-top .social-networks li{ padding:0; border-top:none }

/* Galerie ------------------------------------------------------------------ */
.galerie-custom .card-image-overlay svg{ width:24px; fill:white }

/* Page 404 ----------------------------------------------------------------- */
.error404 main { text-align:center }
.error404 main h1{ color: var(--primary); font-size: 6.5rem; margin: 0 0 1rem 0 }

/* Page Links --------------------------------------------------------------- */
.page-links a { border-radius: 2px; display: inline-block; border: 0 none; font-size: 14px; font-weight: 600; line-height: 20px; margin: 0px 3px 3px; padding: 7px 18px; text-align: center; transition: all 0.4s ease 0s; }
.page-links a:hover,
.page-links a:focus { text-decoration: none; }

/* Skip-links --------------------------------------------------------------- */
.skip-links{ position: absolute; z-index: 999; left: 50%; transform: translateX(-50%);  }
.skip-links a{ position: absolute; top: -9999px; opacity: 0; transition: opacity 300ms ease; background:var(--blue); color:#fff; padding: 1rem 2rem; text-decoration: none; display: inline-block; }
.skip-links a:focus{ position: static; opacity:1 }

/* Scroll top Button -------------------------------------------------------- */
a.btn-go-top{ background-color:var(--primary); filter: brightness(0.9); color: #fff; z-index:90; bottom:1.3rem; display:none; opacity:1; padding:0.8rem 1.3rem; border-radius: var(--border-radius);position:fixed; right:1.3rem }
a.btn-go-top svg{ width:20px; fill:#fff }

/* Widgets ------------------------------------------------------------------ */
.widget{ clear:both }
.widget ul:not([class*="wp-block"]){ padding:0; list-style:none; margin: 0; }
.widget ul:not([class*="wp-block"]) li{ padding: 10px 0; position: relative; border-top: var(--border); }
.widget ul:not([class*="wp-block"]) li:first-of-type{ border-top:none }
.widget ul:not([class*="wp-block"]) li ul { position: relative; top: 10px; }
.widget ul:not([class*="wp-block"]) li ul li:first-of-type{ border-top: var(--border); }
.widget ul:not([class*="wp-block"]) li ul li { padding-left: 10px; border-bottom:none }

/* Widget in header */
header .widget{ margin:0 .5rem; display:inline-block }
header .widget:first-child{ margin-left:0 }
header .widget:last-child{ margin-right:0 }

/* Widget - Gutenberg blocks */
.widget .wp-block-group h2 { font-size: 1.5rem }

/* Widget - Gallery */
.widget .gallery { grid-gap:15px }


/* Blog Pagination & Woocommerce pagination --------------------------------- */
/*
  1.  #main-content pour la spécificité
  2.  [class*="pagination"] pour cibler les différentes paginations
  3.  :not(ul) car le <ul> de la pagination woocommerce a aussi la classe .page-numbers
*/
#main-content [class*="pagination"]{ margin: 3rem 0 0 0; display:block; text-align: center; }
#main-content [class*="pagination"] *{ border:none; margin:0; overflow:hidden; text-align:center }
#main-content [class*="pagination"] .page-numbers i{ vertical-align:bottom }
#main-content [class*="pagination"] .page-numbers:not(ul){ border-radius:var(--border-radius); background-color:#fff; border:var(--border); color:#242526; cursor:pointer; display:inline-block; font-weight:600;
  transition:all 0.3s ease 0s; font-size:18px; line-height:20px; margin:0 3px 10px; padding:8px; white-space:nowrap; width:40px; height:40px; }
#main-content [class*="pagination"] .page-numbers:not(ul):hover,
#main-content [class*="pagination"] .page-numbers:not(ul):focus,
#main-content [class*="pagination"] .page-numbers:not(ul).current{ border-color: var(--primary); background-color: var(--primary); color:#FFF; text-decoration: none; }
#main-content [class*="pagination"] .page-numbers:not(ul).prev,
#main-content [class*="pagination"] .page-numbers:not(ul).next{ min-width: 150px; }
@media (max-width:767px){
  #main-content [class*="pagination"] .page-numbers:not(ul) { font-size: 16px; padding: 8px 4px; width: 30px; }
  #main-content [class*="pagination"] .page-numbers:not(ul).prev,
  #main-content [class*="pagination"] .page-numbers:not(ul).next{ display: none; }
}


.masonry .card-image img{transition:all 200ms ease }
.masonry .card-image:hover img{ opacity: .85; }

/* Lightspeed cache Lazy Load */
img[data-lazyloaded]{ opacity:0 }
img.litespeed-loaded{ transition:all .15s linear .02s; opacity:1 }


/* BLOCS ------------------------------ */

/* Blog */
article p a{ color:var(--secondary); }
article p a:hover,
article p a:focus{ text-decoration: underline; }

.is-style-chapeau{ font-size:1.25rem; line-height: 2.25rem; font-weight:600 }

.pt-blog { margin:0 0 1rem 0; position: relative }
.pt-blog .pt-blog-image{ margin:0 0 1.7rem 0 }
.pt-blog .pt-blog-description{ margin:0 0 1.5rem 0 }

/* FAQ */
.pt-faq-toggle { position:relative; display:block; border-bottom:var(--border) }
.pt-faq-toggle .pt-faq-title{ position: relative; display:block; padding:22px 50px 22px 0; text-decoration:none }
.pt-faq-toggle .pt-faq-title h3{ margin:0; font-size:1.2rem; font-weight:600; }
.pt-faq-toggle .pt-faq-title svg { width:16px; fill:currentColor; font-size: 1.5rem; position: absolute; top: 0; right:20px; height: 100%; display: flex; align-items: center; justify-content: center; transition:all 200ms ease }
.pt-faq-toggle .pt-faq-title.opened svg { transform:rotate(180deg) }
.pt-faq-toggle .pt-faq-description{ display:none; margin-top:-10px }