/* 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) {
  /* Appliquer une fois la page chargée pour éviter 
  mauvaise position du scroll au rafraichissement de la page */
  html.page-loaded {
      scroll-behavior: smooth
  }
} 

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

::-moz-selection{ background:var(--primary-darker); color:white }
::selection{ background:var(--primary-darker); color: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:white; background-color:black; }
mark { background-color:var(--bg-darker); color:var(--body-color); }

iframe{ vertical-align: middle }

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

.bigger { font-size:larger }

.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) }

.fwlr { font-weight: lighter!important }
.fwl { font-weight: 300!important }
.fwn { font-weight: 400!important }
.fwm { font-weight: 500!important }
.fws { font-weight: 600!important }
.fwb { font-weight: 700!important }
.fwbr { 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 }

.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; }

.tdn { text-decoration: none!important }
.tdu { text-decoration: underline!important }
.tdl { text-decoration: line-through!important }

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

.tal{ text-align:left }
.tac{ text-align:center }
.tar{ text-align:right }


/* Titles */
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 { text-transform: uppercase; font-family:var(--font-secondary); font-weight:var(--hx-font-weight); font-style:var(--hx-font-style); margin-bottom:0.5em; line-height:1em; }

.h1, h1 { font-size:var(--h1-font-size-mobile); font-weight:var(--h1-font-weight); font-style:var(--h1-font-style) }
@media (min-width: 1200px) {
  .h1, h1 { font-size:var(--h1-font-size) }
}

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

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

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

.h5, h5 { font-size:var(--h5-font-size-mobile); font-weight:var(--h5-font-weight); font-style:var(--h5-font-style) }
@media (min-width: 1200px) {
  .h5, h5 { font-size:var(--h5-font-size) }
}

.h6, h6 { font-size:var(--h6-font-size-mobile); font-weight:var(--h6-font-weight); font-style:var(--h6-font-style) }
@media (min-width: 1200px) {
  .h6, h6 { font-size:var(--h6-font-size) }
}


/* 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) }
th, td { padding:.8em; border: var(--border); border-width: 0 1px 1px 0; font-weight:400; text-align:left }
caption { font-weight:400; text-align:left }

/* 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:black; width:100%; background-color:#fff; border:var(--border); padding:12px 15px; border-radius:var(--border-radius); line-height:inherit; transition: all 500ms ease; }
textarea { resize:vertical }

input:focus,
textarea:focus{ outline:0; box-shadow:var(--box-shadow) }


/* 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 */
::placeholder { color: rgba(0, 0, 0, .5) }

/* 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:white }
.color-noir{ color:black }


/* 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:white; background-color:white !important }
.has-noir-background-color{ --bgcolor:black; background-color: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:white !important }
.has-noir-color{ color:black !important }


/* Text variations  -------------------------------------------------------- */
.is-style-subtitle{ font-size:1rem; text-transform: uppercase; letter-spacing: 1px; }
.is-style-subtitle + .wp-block-heading{ margin-block-start: 0; }


/* Grid custom -------------------------------------------------------------- */
.grid-container {container-type: inline-size; }
.grid{ --columns:3; display: grid; grid-template-columns:repeat(var(--columns), minmax(100px, 1fr)); grid-gap:2rem }
.grid > div:empty{ display:none }
.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 }
@container (width <= 1250px) {
  .grid.grid-4,
  .grid.grid-5{ --columns:3 }
}
@container (width <= 1000px) {
  .grid.grid-5,
  .grid.grid-4,
  .grid.grid-3{ --columns:2 }
}
@container (width <= 650px) {
  .grid.grid-5,
  .grid.grid-4,
  .grid.grid-3,
  .grid.grid-2{ --columns:1 }
}

@container (width > 1000px) {
  .feature-first:is(.horizontally, .both) .grid.grid-2 > :first-child,
  .feature-first:is(.horizontally, .both) .grid.grid-3 > :first-child,
  .feature-first:is(.horizontally, .both) .grid.grid-4 > :first-child,
  .feature-first:is(.horizontally, .both) .grid.grid-5 > :first-child{ grid-column: 1 / span 2; }
  .feature-first:is(.vertically, .both) .grid.grid-2 > :first-child,
  .feature-first:is(.vertically, .both) .grid.grid-3 > :first-child,
  .feature-first:is(.vertically, .both) .grid.grid-4 > :first-child,
  .feature-first:is(.vertically, .both) .grid.grid-5 > :first-child{ grid-row: 1 / span 2; }
}

/* 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-7-3 { padding-bottom:42.85% }
.format-2-1 { padding-bottom:50% }
.format-16-9{ padding-bottom:56.25% }
.format-5-3 { padding-bottom:60% }
.format-4-3 { padding-bottom:75% }
.format-5-4 { padding-bottom:80% }
.format-1-1 { padding-bottom:100% }
.format-6-7 { padding-bottom:116.66% }
.format-3-4 { padding-bottom:133.33% }
.format-9-16{ padding-bottom:177.77% }
.format-1-2 { padding-bottom:200% }

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

.format-video .video-overlay {
  content: "";
  pointer-events: none;
  z-index: 4;
  display: flex ;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,rgba(0,40,80,1) 0%,rgba(255,255,255,0) 60%)
}
.format-video .video-overlay svg path {
  fill: var(--primary);
}

/* 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-x{ --primary:#15b4c9 }
.social-networks li.network-linkedin{ --primary:#006599 }
.social-networks li.network-insta{ --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 }


/* Layout ------------------------------------------------------------------- */
@media (min-width:1200px){
  .front .hide-desktop{ display: none }
}
@media (min-width:782px) and (max-width:1199px){
  /* tablet */
  .front .hide-tablet{ display:none }
  .tablet-column{ flex-direction:column; flex-wrap:nowrap }
  .tablet-column .wp-block-column{ margin-left:0; margin-right:0 }
  .is-style-columns-tablet-column{ flex-direction:column; flex-wrap:nowrap }
  .is-style-columns-tablet-column .wp-block-column{ margin-left:0 !important; margin-right:0 !important }
}
@media (max-width:781px){
  /* mobile */
  .front .hide-mobile{ display:none }
  .mobile-reverse{ flex-direction: column-reverse; flex-wrap: initial !important; gap:30px }
  .is-style-columns-mobile-reverse{ flex-direction:column-reverse; flex-wrap: initial !important; gap: 30px; }
}

/* 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% }


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

main{ position:relative }
main .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); }
main .has-sidebar .alignwide,
main .has-sidebar .alignfull{ width: 100% !important; padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important;}
@media (max-width:781px){
  main .has-sidebar{ flex-direction:column; align-items:stretch }
}


.layout-sidebar{ margin:var(--spacer-height) 2rem var(--spacer-height) 0; padding:3rem 1.5rem 0 1.5rem; flex:0 0 30%; border:var(--border); border-radius:var(--border-radius); background-color:transparent; clear:both }
main .has-sidebar.has-sidebar-sticky .layout-sidebar{ position: sticky; top:100px; }
.layout-content{ width:100% }
.layout-content + .layout-sidebar{ margin-left:2rem; margin-right:0 }
@media (max-width:781px){
  .layout-sidebar{ margin-right:0 }
  .layout-content + .layout-sidebar{ margin-left:0 }
}


/* 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 a:hover,
  .navigation ul li a:focus,
  .navigation ul li:hover > a,
  .navigation ul li:focus-within > a{ background:var(--bg-darker) }
  .navigation ul li.menu-item-has-children > a{ padding-right: 30px; }
  .navigation ul li.menu-item-has-children > a:after{ content: "\276F"; 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% }
  .navigation > div > ul > li { align-items:center; display:flex }
  .navigation > div > ul > li > a{ display: inline-flex; padding:2rem .75rem; height:100%; align-items: center; position: relative }
  .navigation > div > ul > li > a:before{  content:''; display:block; position:absolute; left:0; width:100%; height:3px; background:var(--primary); bottom:0; transform:scaleX(0); transition:all 200ms ease }
  .bg-primary .navigation > div > ul > li > a:before{ background:#fff }

  .navigation > div > ul > li:focus > a:before,
  .navigation > div > ul > li:hover > a: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) }
  /* Lvl2 & more */
  .navigation ul ul.sub-menu{ display: block; opacity: 0; pointer-events: none; z-index: 2; width: max-content; min-width: 100%; max-width: 160px; display: block; position: absolute; top:100%; left:0; transform: translateY(-50px); box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.05) }
  .navigation ul li:last-of-type ul.sub-menu{ left:initial; right:0; }
  .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.7rem 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 black }

  /* Btn nav mobile */
  #toggle-nav{ display: none; }
}
@media (max-width:1199px){
  .navigation{ background:var(--bgcolor, #fff); opacity:0; transform:translateY(50px); pointer-events:none; height:calc(100dvh - 100%); 
    overflow:auto; position:absolute; top:100%; left:0; width:100%; z-index: 999;
    border-top:var(--border); transition:all 200ms ease; }
  .navigation ul{ display: block }
  .navigation ul li{ position: relative; padding: 0; border-bottom:var(--border); cursor: pointer; }
  .navigation ul li a { display: block; padding:10px 24px }
  .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); transition: all 300ms ease;}
  .navigation ul li.menu-item-has-children:has(> .sub-menu.active) > a:after{ 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; }

  /* Btn nav mobile */
  #toggle-nav { width: 40px; cursor: pointer; padding-right: 0;}
  #toggle-nav div { width: 100%; height: 4px; background:currentColor;  margin: 5px auto; transition: all 0.3s; backface-visibility: hidden; }
  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(7px, -8px); }
}

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

.layout-header{ position: sticky; top: 0px; z-index: 99; transition: all 500ms ease; } 
body.js-navigation-opened .layout-header { transition:none }
body.admin-bar .layout-header{top:32px }
@media (min-width:1200px){	
  body.is-sticky-up.is-scroll-over-header .layout-header{ box-shadow:1px 1px 5px rgba(0, 0, 0, .1) }
  body.is-sticky-up.is-scroll-down:not(.js-navigation-opened) .layout-header{ transform: translateY(-100%);  }
  body.admin-bar .layout-header{top:32px }
}
@media (max-width:781px){
  body.admin-bar .layout-header{ top:46px }
}


/* 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"]::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:781px){
  .search-form input[type="search"]{ font-size:2.125rem }
}

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

/* Cards---------------------------------------------------------------------- */
.card { position:relative; display:flex; flex-direction:column; border:var(--border); padding: 0; border-radius:var(--border-radius) }
.card .card-image { position:relative; overflow:hidden; border-radius:var(--border-radius) var(--border-radius) 0 0 }
.card .card-image img{ width:100% }
.card .card-body { flex:1 1 auto; padding:2rem; display: flex; flex-direction: column; align-items: flex-start; }
.card .card-body .card-image{ margin-bottom:2rem }
.card .card-body .button{ margin-top:auto }
.card .card-title{ font-size:1.5rem }
.card .card-body > :last-child{ margin-bottom:0 }
.card .wp-block-button a{ display: inline-block;}
.card .wp-block-button a:before{ content:""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2;}


/* 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;width: auto }
.layout-banner .game-logo[src*=".svg"]{ width:100% }
.layout-banner .breadcrumbs{ padding:10px 0 0 0 }
.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,
.layout-banner.has-image { 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 }
}


/* 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; margin-bottom: 3rem; }
.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 - 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:781px){
  #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; }
}


body.admin-bar [id]{ scroll-margin-top:32px;}
@media (max-width:781px) {
  body.admin-bar [id]{ scroll-margin-top:46px;}
} 

/* Lenis smoothscroll */ 
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }

/* Header */
.layout-header .site-logo a img{ width: 100%; }
body:not(.front) .site-logo a{ pointer-events: none; }


/* Galerie */
.card-gallery{ position: relative; }
.card-image-overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition:all 200ms ease; opacity:0; background: rgba(255, 255, 255, .4);  }
.card-image-overlay a{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex ; align-items: center; justify-content: center; }
.card-image-overlay a svg{ width: 50px; }
.card-gallery:is(:hover, :focus) .card-image-overlay{ opacity:1; }


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

.post-meta{ margin:1rem 0; font-size:.9rem; opacity:.9 }
.post-meta > *{ display:inline-block; margin:0 0.75rem 0 0 }
.post-meta svg{ margin-right: 0.2rem; width: 12px; vertical-align: middle; fill: currentColor; }

.post-tags{ padding:0; list-style:none; margin:0 0 1rem 0 }
.post-tags li { display:inline-block;  }
.post-tags li a{ display:inline-block; background:var(--light); font-size:0.9rem; margin:0 2px 0 0; border-radius:var(--border-radius); padding:0 10px; line-height:1.6rem; }

.single-post .reading-time{ margin-bottom:2rem }
.single-post .reading-time svg{ margin-right:0.4rem; width: 15px; vertical-align: middle; fill: currentColor; }


/* Comments */
.comment-form-section{ margin:2.5rem 0 0 0; padding:0 0 30px 0 }
.comment-section{ float:none; margin:0 10px 30px 0; padding:3rem 0 0 0 }
.comment{ margin:0 !important; padding:0; position:relative; }
.comment-img{ float:left; margin-right:20px; }
.comment-body { overflow: hidden; display: block !important; }
.comment-detail{ border-bottom:var(--border); margin-bottom:35px; margin-left:0; padding:0 0 15px; }
.comment-detail p{ font-size:14px; text-align:justify;  }
.comment-detail-reply{ font-size:13px; float:right;  }
.comment-detail-reply a{ display:inline-block; font-weight:600; font-size:15px; letter-spacing:0; line-height:20px; padding:0; transition:all 0.3s ease 0s; }
.comment-detail-reply a,
.comment-detail-reply a:hover { color: var(--primary); }
.comment-detail-title{ color:#242526; font-weight:600; font-size:15px; letter-spacing:0; line-height:20px; margin:0 0 7px;  }
.comment-detail-title .comment-date{ display:block; color:#8f969c; font-weight:400; font-size:14px; line-height:20px; margin:0 0 8px; padding-left:0px; vertical-align:middle; }
.comment-detail-title .comment-date a{ color:#8f969c; }
.comment-detail-title .comment-date a:hover { color: var(--primary); }
@media (min-width: 600px) and (max-width: 1199px) {
  .comment-section { margin: 0 0 30px; }
}
@media (max-width: 599px) {
  .comment-section { margin: 0 0 30px; }
  .comment-img { float: none; }
}