/*
Theme Name: Kalium - Child Theme
Theme URI: https://laborator.co/themes/kalium/
Author: Laborator
Author URI: https://laborator.co/
Description: Start creating that amazing website that you have always wanted, only with Kalium — Connect with Laborator on: <a href="https://themeforest.net/user/laborator">Envato</a> &bull; <a href="https://twitter.com/thelaborator">Twitter</a> &bull; <a href="https://www.facebook.com/laboratorcreative">Facebook</a> &bull; <a href="https://www.instagram.com/laboratorcreative/">Instagram</a>
Version: 1.0
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Template: kalium
Text Domain: kalium
*/



  /* Spacing system */

  @media screen and (max-width: 767px) {
    :root {
      --margin-giant: 55px;
     --margin-xxl: 48px;
      --margin-xl: 32px;
      --margin-l: 24px;
      --margin-m: 16px;
      --margin-s: 12px;
      --margin-xs: 8px;
      --padding-xl: 12px;
      --padding: 8px;
      --gap: 5px;
      --gap-xs: 5px;
    }
  }


    @media screen and (min-width: 768px) and (max-width: 1023px) {
    :root {
      --margin-giant: 80px;
     
    }
  }


    @media screen and (min-width: 1024px) {
      h1{max-width: 70%;}
      :root {
      --margin-giant: 120px;
      
      }
  }

:root {
  --site-header-h: 90px; /* fallback (sera remplacé par JS) */
  --header-shadow: 0 10px 30px rgba(0,0,0,.12);

  --margin-xxl: 96px;
  --margin-xl: 64px;
  --margin-l: 48px;
  --margin-m: 32px;
  --margin-s: 24px;
  --margin-xs: 16px;
  --padding-xl: 24px;
  --padding: 16px;
  --gap: 30px;
  --gap-xs: 10px;


   /* Fonts size */

--h1-font-size: clamp(2.3rem, 2.1rem + 1.6vw, 3.5rem) !important;
--h2-font-size: clamp(2.1rem, 2.8vw, 3.2rem) !important;
--h3-font-size: clamp(1.75rem, 2.4vw, 2.5rem) !important;
--h4-font-size: clamp(1.55rem, 2.1vw, 2.2rem) !important;
--h5-font-size: clamp(1.15rem, 1.5vw, 1.45rem) !important;
--h6-font-size: clamp(1.05rem, 1.3vw, 1.25rem) !important;
--legend-font-size: clamp(0.75rem, 0.9vw, 0.8rem) !important;
}


.margin-l{margin: var(--margin-l);}
.margin-t-l{margin-top: var(--margin-l);}
.margin-l-l{margin-left: var(--margin-l);}
.margin-r-l{margin-right: var(--margin-l);}
.margin-b-l{margin-bottom: var( --margin-l);}


.margin-xs{margin: var(--margin-xs);}
.margin-xs-t{margin-top: var(--margin-xs);}
.margin-xs-b{margin-bottom: var(--margin-xs);}
.margin-xs-l{margin-left: var(--margin-xs);}
.margin-xs-r{margin-right: var(--margin-xs);}


.margin-s{margin: var(--margin-s);}
.margin-s-t{margin-top: var(--margin-s);}
.margin-s-b{margin-bottom: var(--margin-s);}
.margin-s-l{margin-left: var(--margin-s);}
.margin-s-r{margin-right: var(--margin-s);}


.margin-m{margin: var(--margin-m);}
.margin-m-t{margin-top: var(--margin-m);}
.margin-m-b{margin-bottom: var(--margin-m);}
.margin-m-l{margin-left: var(--margin-m);}
.margin-m-r{margin-right: var(--margin-m);}

.margin-xl{margin: var(--margin-xl);}
.margin-xl-t{margin-top: var(--margin-xl);}
.margin-xl-b{margin-bottom: var(--margin-xl) !important;}
.margin-xl-l{margin-left: var(--margin-xl);}
.margin-xl-r{margin-right: var(--margin-xl);}

.margin-xxl{margin: var(--margin-xxl);}
.margin-xxl-t{margin-top: var(--margin-xxl);}
.margin-xxl-b{margin-bottom: var(--margin-xxl);}
.margin-xxl-l{margin-left: var(--margin-xxl);}
.margin-xxl-r{margin-right: var(--margin-xxl);}

.margin-giant{margin: var(--margin-giant);}
.margin-giant-t{margin-top: var(--margin-giant);}
.margin-giant-b{margin-bottom: var(--margin-giant);}
.margin-giant-l{margin-left: var(--margin-giant);}
.margin-giant-r{margin-right: var(--margin-giant);}





@media screen and (max-width:1024px){
    p,
    body{
    font-size:16px!important;
    line-height:1.2 !important;
          color:var(--k-body-color);
}
}


@media screen and (min-width:1025px){
p,
body{
    font-size:18px!important;
      line-height:1.5 !important;
            color:var(--k-body-color);

}
}

h1{font-size: var(--h1-font-size) !important; font-weight: bold; font-weight: bold !important;
    letter-spacing: -3px;}

.fullscreen-menu nav ul li >a,
.accroche,
.fullscreen-menu nav .menu > li > a::after,
h2{font-size: var(--h2-font-size) !important;}

h3{font-size: var(--h3-font-size) !important;}

h4{font-size: var(--h4-font-size)!important;}
.h5-font-size,
h5{font-size: var(--h5-font-size)!important;}
.h6-font-size,
.category-name,
h6{font-size: var(--h6-font-size)!important;}

.text-uppercase{text-transform: uppercase;}

.accroche{color: var(--k-color-2); font-weight: bold;}

.h5-font-size,
.h6-font-size{font-weight: bold;}

/* Menu principal */

.header-block{padding-top:var(--margin-xs) ! important; padding-bottom:var(--margin-xs) ! important;}

body:not(.home):not(.single) .toggle-bars__bar-line,
.menu-type-full-bg-menu.is-solid  .toggle-bars__bar-line{background-color: var(--k-color-1) !important} 
.home .menu-type-full-bg-menu .toggle-bars__bar-line{background-color:white;} 
.home .menu-type-full-bg-menu .kalium-svg-icon-search svg {fill:white !important;}

body:not(.home):not(.single) .inline-svg-icon svg,
 .menu-type-full-bg-menu.is-solid .kalium-svg-icon-search svg {fill:var(--k-color-1) !important}

/* .fullscreen-menu{background-color:var(--k-color-1) !important; }
.fullscreen-menu nav{width:100%; height:100%;}
.fullscreen-menu nav .menu{width:inherit; height: inherit;     width: inherit;
    height: inherit;
    display: flex;
    justify-content: center;
    flex-direction: column;
} */

/* Empêche la compression */
.menu-type-standard-menu .menu nav .menu > li{
  width: auto !important;
  flex: 0 0 auto;
}

/* Style lien */
.menu-type-standard-menu .menu nav ul li > a{
  color: var(--k-heading-color);
  font-weight: bold;
  position: relative;
  display: inline-block;
  text-align: center;
  white-space: nowrap;
}

.nav-container-mobile-menu .link{font-size: var(--h2-font-size); font-weight: 600;}
.site-header.main-header.menu-type-standard-menu nav ul.menu > li{
  flex: 0 0 auto
}
.header-solid.main-header.menu-type-standard-menu nav ul.menu > li > a.sm-projets-cta:after,
.header-solid .site-header.main-header.menu-type-standard-menu nav ul.menu > li > a.sm-projets-cta:after{
background: currentColor;
}


.header-solid .site-header .inline-svg-icon svg {fill: var(--k-color-1) !important;}
.site-header .inline-svg-icon svg {fill: white;}

.site-header.main-header.menu-type-standard-menu nav ul.menu > li > a.sm-projets-cta:after{
background: white;
}


.header-solid  .site-header.main-header.menu-type-standard-menu nav ul.menu > li > a.sm-projets-cta > span.sm-menu-switch::after,
.header-solid .site-header.main-header.menu-type-standard-menu nav ul.menu > li > a.sm-projets-cta > span.sm-menu-switch::after,
.header-solid .site-header.main-header.menu-type-standard-menu nav ul.menu > li > a.sm-projets-cta > span.sm-menu-switch::before{
    color: var(--k-color-1);
}

.site-header.main-header.menu-type-standard-menu nav ul.menu > li.current_page_item > a.sm-projets-cta:after{
  transform: scaleX(0.9)
}
.site-header.main-header.menu-type-standard-menu nav ul.menu > li > a.sm-projets-cta:after{
height: 3px !important;

}

.site-header.main-header.menu-type-standard-menu nav ul.menu > li > a.sm-projets-cta:hover:after{
width: max-content;

}
/* IMPORTANT: on écrase le .sm-projets-cta global (inline-block) */
.site-header.main-header.menu-type-standard-menu nav ul.menu > li > a.sm-projets-cta{
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  max-width: none !important;
}

/* span support : prend toute la largeur du lien */
.site-header.main-header.menu-type-standard-menu nav ul.menu > li > a.sm-projets-cta > span.sm-menu-switch{
  position: relative;
  display: block !important;
  width: 100% !important;
  white-space: nowrap;
color: transparent; /* on cache le vrai texte, on affiche via ::before/::after */
  text-align: left !important;
}

/* textes superposés, centrés dans la largeur */
.site-header.main-header.menu-type-standard-menu nav ul.menu > li > a.sm-projets-cta > span.sm-menu-switch::before,
.site-header.main-header.menu-type-standard-menu nav ul.menu > li > a.sm-projets-cta > span.sm-menu-switch::after{
  position: absolute;
  inset: 0;
  white-space: nowrap;
  pointer-events: none;
}

/* label */


.site-header.main-header.menu-type-standard-menu nav ul.menu > li > a.sm-projets-cta > span.sm-menu-switch::before{
  content: attr(data-label);
  opacity: 1;
  transform: translateY(0);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}

body:not(.header-solid)  .site-header.main-header.menu-type-standard-menu nav ul.menu > li > a.sm-projets-cta:after{background:white !important}

body:not(.header-solid ) .site-header.main-header.menu-type-standard-menu nav ul.menu > li > a.sm-projets-cta > span.sm-menu-switch::before,
body:not(.header-solid) .site-header.main-header.menu-type-standard-menu nav ul.menu > li > a.sm-projets-cta > span.sm-menu-switch::after{
   color:white !important;

}


/* hover */
.site-header.main-header.menu-type-standard-menu nav ul.menu > li > a.sm-projets-cta > span.sm-menu-switch::after{
  content: attr(data-hover); 
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}

@media (hover:hover){
  .site-header.main-header.menu-type-standard-menu nav ul.menu > li > a.sm-projets-cta:hover > span.sm-menu-switch::before{
    opacity: 0;
    transform: translateY(-4px);
  }
  .site-header.main-header.menu-type-standard-menu nav ul.menu > li > a.sm-projets-cta:hover > span.sm-menu-switch::after{
    opacity: 1;
    transform: translateY(0);
  }
}

 .site-header.main-header.menu-type-standard-menu nav ul.menu > li.current-menu-item > a.sm-projets-cta > span.sm-menu-switch::before{
    opacity: 0;
    transform: translateY(-4px);
  }
  .site-header.main-header.menu-type-standard-menu nav ul.menu > li.current-menu-item > a.sm-projets-cta > span.sm-menu-switch::after{
    opacity: 1;
    transform: translateY(0);
  }

   .site-header.main-header.menu-type-standard-menu nav ul.menu > li.current-menu-item > a.sm-projets-cta:after{display:none;}



.single.header-solid .toggle-bars__bar-line,
.home.header-solid .toggle-bars__bar-line{background:var(--k-color-1)}
.header-block__item--mobile-menu-toggle{order: 3;}
.toggle-bars__bar-line{background:white;}

.toggle-bars__bar-line{ height:2px !important}
.toggle-bars--icon-start {border:none !important;}
.toggle-bars__bars{width:33px !important; border:none !important; height:22px !important}
.toggle-bars__bar-line:nth-child(1){ top: 0; }
.toggle-bars__bar-line:nth-child(2){ top: 10px; }
.toggle-bars__bar-line:nth-child(3){ top: 22px }

body.single:not(.header-solid) .header-logo.logo-image img,
body.home:not(.header-solid) .header-logo.logo-image img{filter:brightness(100)}

body.page .header-logo.logo-image img{filter:none;}

@media screen and (max-width:1024px) {
  .header-logo.logo-image{width:160px !important; height:28px !important}
}
@media screen and (min-width:1025px) {
.header-logo.logo-image{width:230px !important; height:41px !important}
}

/* On maîtrise la transition du logo (sinon Kalium peut animer le filter) */
.site-header.main-header.menu-type-standard-menu .header-logo.logo-image img{
  transition: filter .25s ease, opacity .25s ease, transform .25s ease;
  will-change: filter;
}

/* Quand le header devient "solid", le filter doit changer immédiatement (pas de latence) */
body.header-solid .site-header.main-header.menu-type-standard-menu .header-logo.logo-image img{
  transition-delay: 0s !important;
  filter: none !important;
}

.fullscreen-menu{
  background: var(--k-color-1) !important; /* ORANGE pendant le dessin */

  -webkit-clip-path: circle(0% at 100% 0%);
  clip-path: circle(0% at 100% 0%);
  opacity: 0;

  transition:
 clip-path 0.75s cubic-bezier(.22,1,.36,1),
    -webkit-clip-path 0.75s cubic-bezier(.22,1,.36,1),
    opacity 0.25s ease;

  will-change: clip-path, opacity;


  display: block !important;
  visibility: visible !important;
  pointer-events: none;
}


.fullscreen-menu.menu-is-open{
  background: #fff !important; /* FOND BLANC une fois ouvert */
  -webkit-clip-path: circle(160% at 100% 0%);
  clip-path: circle(160% at 100% 0%);
  opacity: 1;
  pointer-events: auto;
}


/* ==========================================================
   FULLSCREEN MENU : fond ORANGE pendant l'ouverture (cercle)
   - Orange tant que le menu n'est pas totalement ouvert
   - Blanc uniquement quand .menu-is-open est présent
   ========================================================== */
body .fullscreen-menu:not(.menu-is-open){ 
  background: var(--k-color-1) !important; 
}
body .fullscreen-menu.menu-is-opening{
  background: var(--k-color-1) !important;
}

.fullscreen-menu.menu-is-open .container{height:100vh}

.fullscreen-menu.menu-is-closing{
  background: var(--k-color-1) !important; /* ORANGE pendant la fermeture */
  -webkit-clip-path: circle(0% at 100% 0%);
  clip-path: circle(0% at 100% 0%);
  opacity: 0;
  pointer-events: none;
}

.fullscreen-menu nav{
  transform: translate(-24px, 24px);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(.22,1,.36,1), opacity 0.45s ease;
}
.fullscreen-menu.menu-is-open nav{ transform: translate(0,0); opacity: 1; height:100%}
.fullscreen-menu.menu-is-closing nav{ transform: translate(-24px, 24px); opacity: 0; }


@media (prefers-reduced-motion: reduce){
  .fullscreen-menu{
    -webkit-clip-path: none !important;
    clip-path: none !important;
    transition: none !important;
    opacity: 1 !important;
    pointer-events: auto;
  }
  .fullscreen-menu nav{ transform:none !important; opacity:1 !important; transition:none !important; }
}

.fullscreen-menu .container{
  position: relative;
  min-height: 100%;
}


.fullscreen-menu .container .fs-bottom-links{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 32px; 
  margin: 0;
  padding: 0;

  list-style: none;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;

  opacity: 0;
  transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
}


.fullscreen-menu.menu-is-open .container .fs-bottom-links{
  opacity: 1;
  transform: translateY(0);
}

.fullscreen-menu .container .fs-bottom-links a{
  text-decoration: none;
  color: rgba(0,0,0,.7);
  font-size: 14px;
}


@media (max-width: 768px){
  .fullscreen-menu .container .fs-bottom-links{
    bottom: 20px;
    gap: 12px;
  }
}

.vc_tta-panel.vc_active .vc_tta-panel-title{font-weight:bold;}
.vc_tta-title-text,
.vc_tta-panel-title{
  font-size: var(--h6-font-size) !important;
  text-transform: uppercase;
  color:var(--k-color-1);
}
.vc_tta.vc_tta-accordion{border:0 !important;}
.vc_tta-panel .vc_tta-panel-heading{
      border-right:0!important;
          border-top:0!important;
    border-left:0!important;
  border-bottom:1px solid var(--k-heading-color) !important
}
.vc_tta-controls-icon-position-right .vc_tta-controls-icon{right:4px !important;  color:var(--k-color-1);}
.vc_tta-color-white.vc_tta-style-classic .vc_tta-controls-icon:before,
.vc_tta-color-white.vc_tta-style-classic .vc_tta-controls-icon:after{
   border-color:var(--k-color-1) !important;
}
.vc_tta.vc_tta-accordion .vc_tta-controls-icon-position-right.vc_tta-panel-title>a{padding-left:0!important; padding-right:0!important}


.vc_tta.vc_general .vc_tta-panel-body{
  border:none !important;
  padding-top:var(--margin-m) !important;
  padding-bottom:0 !important;

}
.vc_tta.vc_tta-style-classic .vc_tta-panel.vc_active .vc_tta-panel-heading, .vc_tta.vc_tta-style-classic .vc_tta-panel:not(:last-child) .vc_tta-panel-heading{margin-bottom: 0 !important;}

.vc_tta.vc_general .vc_tta-panel-body > .wpb_content_element{width:80%}

.wpb_wrapper .vc_tta-accordion .vc_tta-panel{background:white !important}
.vc_tta-accordion .vc_tta-panel.vc_active .vc_tta-panel-heading{
  border-bottom:1px solid var(--k-heading-color) !important;

}

.vc_tta.vc_tta-shape-rounded .vc_tta-panel-body, .vc_tta.vc_tta-shape-rounded .vc_tta-panel-heading{  border-radius: 0 !important;}

 .vc_tta-panel .vc_tta-panel-heading:hover .vc_tta-panel-title{background:white !important; font-weight:bold;}


 /* team member */
  .thumb:hover .hover-state span{text-transform: uppercase; font-size: var(--legend-font-size); font-weight:600}
 .thumb:hover .hover-state.padding {padding: var(--margin-s);}
 .thumb:hover .hover-state {opacity: 80% !important; }


 /* bloquote*/
blockquote { position:relative;}
blockquote p{
  font-size: var(--h3-font-size) !important;
  font-weight:bold!important;
  font-style: italic;
  color:var(--k-heading-color)!important;
padding-left: 70px;
padding-top: 43px;
width: 90%;
    line-height: 1.2 !important;
 }

 blockquote:before{
  position: absolute;
  content:'';
  background: url(inc/img/quote-icon.svg);
  background-size: cover;
  width:73px;
  height:43px;

 }

     .smush-detected-img {
        border-radius: 0 !important;
     }

/* fetch*/
.page-thumbnail{
  position:relative;
  min-height:240px;
  background:#f2f2f2;
  overflow:hidden;
}

.page-thumbnail__loader{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.page-thumbnail__loader::after{
  content:"";
  width:32px;
  height:32px;
  border:3px solid rgba(0,0,0,.15);
  border-top-color:rgba(0,0,0,.6);
  border-radius:50%;
  animation:spin .8s linear infinite;
}

@keyframes spin{
  to{ transform:rotate(360deg); }
}

.page-thumbnail img{
  width:100%;
  height:auto;
  display:block;
  opacity:0;
  transition:opacity .3s ease;
  object-fit: cover;
 object-position: center;
}

.page-thumbnail.is-loaded img{
  opacity:1;
}

.page-thumbnail.is-loaded .page-thumbnail__loader{
  display:none;
}


.single .container-fulltitle{
padding:0;
max-widht:100%;
position:relative;
}

.single .container.h1title{
position: absolute;
    z-index: 10;
    bottom: 5rem;
    color: white;
    left: 50%;
    transform: translate(-50%, -50%);
}

.single .container.h1title h1{color:white;}
.single .page-thumbnail{
aspect-ratio:16/9;
height:auto;

}

.single .page-thumbnail img{
 width: 100%;
  height: auto;
aspect-ratio:16/9;
  object-fit: cover;
  object-position: center;

}

@media screen and (max-width:1024px) and (orientation : portrait){
.single .page-thumbnail{
aspect-ratio:2/3 !important;
height:auto;
}
.single .page-thumbnail img{
aspect-ratio:2/3 !important;
height:100%;
}
}

.page-thumbnail{
  margin-bottom: var(--margin-xl);
  height:75vh;
  overflow: hidden;
}


/* header*/

.menu-type-standard-menu li {text-transform: uppercase; font-weight: 600;}
.menu-type-standard-menu li.current_page_item a{color: var(--k-color-1) !important;}
/* =========================
   HEADER KALIUM - BASE
   ========================= */
.site-header.main-header.menu-type-standard-menu{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;

  transition: background-color .25s ease, box-shadow .25s ease;
}

/* ==========================================================
   HOME : au chargement => transparent + pas d'ombre
   (tant que le header n'a pas .is-solid)
   ========================================================== */
body.single .site-header.main-header.menu-type-standard-menu:not(.is-solid),
body.home .site-header.main-header.menu-type-standard-menu:not(.is-solid),
body.front-page .site-header.main-header.menu-type-standard-menu:not(.is-solid){
  background: transparent !important;
  box-shadow: none !important;
}

/* ==========================================================
   HOME : après 1er scroll => blanc + ombre
   (quand le header a .is-solid)
   ========================================================== */
body.single .site-header.main-header.menu-type-standard-menu.is-solid,
body.home .site-header.main-header.menu-type-standard-menu.is-solid,
body.front-page .site-header.main-header.menu-type-standard-menu.is-solid{
  background: #fff !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.10) !important;
}

/* ==========================================================
   AUTRES PAGES : toujours blanc + ombre
   ========================================================== */
body:not(.home):not(.front-page):not(.single) .site-header.main-header.menu-type-standard-menu{
  background: #fff !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.10) !important;
}

/* ==========================================================
   ÉVITER LE CONTENU "COUPÉ" SOUS LE HEADER
   -> on pousse le contenu sous le header
   ========================================================== */
@media (max-width: 1024px) {
/* autres pages : toujours */

body.single{padding-top: 0 !important;}
body:not(.home):not(.front-page){
  padding-top: 80px;
}
}
@media (min-width: 1025px) {
body.single{padding-top: 0 !important;}
body:not(.home):not(.front-page){
  padding-top: var(--kaliumHeaderH, 90px);
}
}

/* home : seulement quand on a scroll (classe posée par le JS ci-dessous) */
body.single.header-is-solid,
body.home.header-is-solid,
body.front-page.header-is-solid{
  padding-top: var(--kaliumHeaderH, 116px);
}
 .kalium-icon-remove:before{
    font-size: 33px !important;
        color: var(--k-color-1);
 }
@media (min-width: 768px) {
  .mobile-menu-close{
        margin-top: 14px;
    margin-right: 16px;
}

}

@media (max-width: 767px) {
  .kalium-icon-remove:before{
    
    margin-right: 1px;

}

    .vc_col-sm-2,
      .vc_col-sm-4,
  .vc_col-sm-6,
  .vc_col-sm-8,
  .vc_col-sm-7,
  .vc_col-sm-4,
    .vc_col-sm-5 {
        width: 100% !important;
    }
}

@media (min-width: 1024px) {
  footer .social .wpb_wrapper{display:flex; justify-content:center}
    .vc_col-sm-5 {
        width: 41.66666667% !important;
    }
}

.container-full{overflow: hidden;}

/* ==========================================================
   FULLSCREEN MENU – ORANGE → BLANC AVANT TEXTE
   ========================================================== */

/* menu = BLANC */
.fullscreen-menu{
  background: #fff !important;
}

/* calque ORANGE animé */
.fullscreen-menu::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--k-color-1);
  z-index:0;
  pointer-events:none;

  -webkit-clip-path: circle(0% at 100% 0%);
  clip-path: circle(0% at 100% 0%);
  opacity:1;
  transition:
    clip-path 0.75s cubic-bezier(.22,1,.36,1),
    -webkit-clip-path 0.75s cubic-bezier(.22,1,.36,1),
    opacity 0.18s ease 0.48s;
}

/* ouverture */
.fullscreen-menu.menu-is-open::before{
  -webkit-clip-path: circle(160% at 100% 0%);
  clip-path: circle(160% at 100% 0%);
  opacity:0; /* disparaît AVANT le texte */
}

/* fermeture : orange visible tout du long */
.fullscreen-menu:not(.menu-is-open)::before{
  transition-delay: 0s, 0s, 0s;
}

/* contenu au-dessus */
.fullscreen-menu > *{
  position: relative;
  z-index: 1;
}

/* =========================
   TEXTE DU MENU (delay)
   ========================= */

.fullscreen-menu nav{
  transform: translate(-24px, 24px);
  opacity: 0;
  transition:
    transform 0.7s cubic-bezier(.22,1,.36,1),
    opacity 0.45s ease;
  transition-delay: 0.75s; /* APRES disparition de l’orange */
}

.fullscreen-menu.menu-is-open nav{
  transform: translate(0,0);
  opacity: 1;
}

/* accessibilité */
@media (prefers-reduced-motion: reduce){
  .fullscreen-menu::before,
  .fullscreen-menu nav{
    transition: none !important;
  }
}

.single-portfolio .container .vc_single_image-wrapper{width:100%; margin-bottom: 0;}
.page-template-portfolio-php.page .vc-row-container.intro .vc_row-fluid{display:flex;}
.page-template-portfolio-php.page .vc-row-container.intro{display:flex !important;}
.page-template-portfolio-php.page .vc-row-container.intro .vc_col-sm-6{display:none}

@media screen and (min-width:1024px){

.page-template-portfolio-php.page .vc-row-container.intro .vc_col-sm-6{flex-basis:55% !important; display:flex;}
}


/* =========================
   VIDEO FULLSCREEN RESPONSIVE
   (sans scrollbar horizontale)
   ========================= */

.page-thumbnail.video {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

/* wrapper */
.page-thumbnail.video .video-interne {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* iframe vidéo */
.page-thumbnail.video .video-interne iframe {
  position: absolute;
  top: 50%;
  left: 50%;

  /* ⚠️ clé anti-scrollbar */
  width: 100%;
  height: 56.25vw;        /* 16:9 basé sur largeur */

  min-width: 177.77vh;    /* 16:9 basé sur hauteur */
  min-height: 100%;

  transform: translate(-50%, -50%);
  border: 0;
}

.single-portfolio .recompense.laureat {color:var(--k-color-2); text-transform: uppercase; font-size: var(--h6-font-size); font-weight:500}
.single-portfolio .recompense.nomine{text-transform: uppercase; font-size: var(--h6-font-size); font-weight:500}
.single-portfolio blockquote:before{display: none !important; }
.single-portfolio blockquote p {padding-left:0; padding-top:0;font-size: var(--h3-font-size) !important;}
.single-portfolio blockquote p span {font-size: var(--h3-font-size) !important;}


/* Bouton */
.scroll-to-top{
  background-color: var(--k-color-1) !important;
  border-radius: 0 !important;
  border: 1px solid var(--k-color-1) !important;
}

/* Couleur icône (cas fréquents Kalium) */
.scroll-to-top .kalium-icon-arrow-up,
.scroll-to-top .kalium-icon-arrow-up:before,
.scroll-to-top i,
.scroll-to-top i:before{
  color: #fff !important;
}

/* Hover bouton */
.scroll-to-top:hover{
  background-color: #fff !important;
}

/* Hover icône : couleur + animation */
.scroll-to-top:hover .kalium-icon-arrow-up,
.scroll-to-top:hover .kalium-icon-arrow-up:before,
.scroll-to-top:hover i,
.scroll-to-top:hover i:before{
  color: var(--k-color-1) !important;
  animation: rotating 1s linear infinite !important;
  display: inline-block; /* important si :before */
}

/* Animation */
@keyframes rotating {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


.mobile-menu--fullscreen {max-width:100% !important; height:100% !important; top:0 !important; padding:0; margin:0}
.mobile-menu--fullscreen .list-nav-menu.link-style{width:100%; display:flex; justify-content: center; align-items: center; height:100%}
.mobile-menu__content>div{justify-content: center;}
.mobile-menu--fullscreen ul li .sm-projets-cta{font-size: var(--h2-font-size); font-weight:bold;}
.mobile-menu--fullscreen ul li.current-menu-item .sm-projets-cta{ color:var(--k-color-1 ) !important}
/* ==========================================================
   MOBILE MENU (Kalium) — cercle ORANGE animé, texte au-dessus
   Dépend de:
   - body.mobile-menu-open
   - body.mobile-menu-closing
   (déjà géré dans ton JS) :contentReference[oaicite:1]{index=1}
   ========================================================== */

/* 1) Le conteneur du menu mobile doit être au-dessus de l’overlay */
.mobile-menu.mobile-menu--fullscreen{
  position: fixed;
  inset: 0;
  background: #fff !important; /* fond blanc final */
  z-index: 10000;              /* au-dessus de l’overlay */
  overflow: hidden;
}

/* 2) L’overlay ne doit JAMAIS recouvrir le texte */
.mobile-menu-overlay{
  z-index: 9998 !important;
  background: rgba(0,0,0,0.0) !important; /* transparent */
  opacity: 1 !important;
}

/* 3) Calque ORANGE animé (derrière le contenu) */
.mobile-menu.mobile-menu--fullscreen::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--k-color-1);
  z-index: 0;
  pointer-events:none;

  -webkit-clip-path: circle(0% at 100% 0%);
  clip-path: circle(0% at 100% 0%);
  opacity: 1;

  transition:
    clip-path 0.9s cubic-bezier(.22,1,.36,1),
    -webkit-clip-path 0.9s cubic-bezier(.22,1,.36,1),
    opacity 0.2s ease 0.6s; /* l’orange disparaît avant le texte */
}

/* Ouverture: on “dessine” le cercle puis on fade l’orange */
body.mobile-menu-open .mobile-menu.mobile-menu--fullscreen::before{
  -webkit-clip-path: circle(160% at 100% 0%);
  clip-path: circle(160% at 100% 0%);
  opacity: 0;
}

/* Fermeture: on remet l’orange visible tout du long et on referme */
body.mobile-menu-closing .mobile-menu.mobile-menu--fullscreen::before{
  opacity: 1;
  transition-delay: 0s, 0s, 0s;
  -webkit-clip-path: circle(0% at 100% 0%);
  clip-path: circle(0% at 100% 0%);
}

/* 4) Tout le contenu du menu AU-DESSUS du calque orange */
.mobile-menu.mobile-menu--fullscreen .mobile-menu__content,
.mobile-menu.mobile-menu--fullscreen .mobile-menu__content *{
  position: relative;
  z-index: 1;
}

/* 5) Apparition du texte APRES disparition de l’orange */
.mobile-menu--fullscreen .list-nav-menu.link-style{
  opacity: 0;
  transform: translate(-24px, 24px);
  transition:
    transform 0.7s cubic-bezier(.22,1,.36,1),
    opacity 0.45s ease;
  transition-delay: 0.75s; /* après le fade orange */
}

body.mobile-menu-open .mobile-menu--fullscreen .list-nav-menu.link-style{
  opacity: 1;
  transform: translate(0,0);
}

/* Fermeture: texte repart tout de suite */
body.mobile-menu-closing .mobile-menu--fullscreen .list-nav-menu.link-style{
  opacity: 0;
  transform: translate(-24px, 24px);
  transition-delay: 0s;
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  .mobile-menu.mobile-menu--fullscreen::before,
  .mobile-menu--fullscreen .list-nav-menu.link-style{
    transition: none !important;
  }
}


/* liens*/
.portfolio-filters__term a,
.sm-projets-cta{
  position: relative;
  display: inline-block;          /* IMPORTANT */
  color: inherit;
  text-decoration: none !important;
  background: none !important;
  text-transform: uppercase;
  border: 0 !important;
  color: var(--k-color-1);
  padding-bottom: .3rem;          /* crée l'espace pour la ligne */
}

.portfolio-filters__term:not(.portfolio-filters__terms--active) a:after,
.sm-projets-cta::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: .02rem;                 /* dans le padding -> visible */
  height: 2px;
  width: 100%;
  background: currentColor;
  transform-origin: left center;
  transform: scaleX(.17);          /* 10% au repos */
  transition: transform .35s ease;
  pointer-events: none;
}

.portfolio-filters__term:not(.portfolio-filters__terms--active) a:hover:after,
.portfolio-filters__term:not(.portfolio-filters__terms--active) a:focus-visible::after,
.sm-projets-cta:hover::after,
.sm-projets-cta:focus-visible::after{
  transform: scaleX(1);           /* 100% au hover */
}
.portfolio-filters__term--reset.portfolio-filters__term--active a{ font-weight:bold}
.portfolio-filters__term--reset.portfolio-filters__term--active a:after{transform: scaleX(1) !important;}


/* Fade à l'apparition pour portfolio */
.slide-fade {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms ease, transform 700ms ease;
  will-change: opacity, transform;
}

/* Visible */
.slide-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Accessibilité : respecte "réduire les animations" */
@media (prefers-reduced-motion: reduce) {
  .slide-fade {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Dactylo */

/* Le texte tapé ne doit pas casser ton style */
.dactylo-dynamic { display: inline; }

/* Curseur */
.dactylo-cursor{
  display:inline-block;
  margin-left: .08em;
  transform: translateY(.05em);
  animation: dactyloBlink .9s infinite;
}
@keyframes dactyloBlink { 50% { opacity: 0; } }





.absolute{position:absolute}
.relative{position:relative}
.h1-slider > *{text-align: center; color: var(--k-heading-color) !important;}
.h1-slider span {color: var(--k-heading-color) !important;}
.h1-slider h1{width:100%; display:block; max-width: 100%;}
.h1-slider p{font-size: var(--h1-font-size) !important;}

.h1-slider .dactylo-wrap{display:flex; flex-direction: column;}

.content-wrapper.container-full ul:not(.menu, .portfolio-items) {list-style: none;}
.content-wrapper.container-full ul:not(.menu, .portfolio-items) li strong,
.content-wrapper.container-full ul:not(.menu, .portfolio-items) li{color: var(--k-body-color) !important;}
.content-wrapper.container-full ul:not(.menu, .portfolio-items) li:before{
  content:"";
  background:var(--k-heading-color);
  width:0.5rem; height:0.5rem;
  display: inline-block;
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* footer*/
footer{margin-top: var(--margin-giant); padding-bottom: var(--margin-s);}
footer .container.vc_row-fluid{display:flex; align-items: center; flex-wrap: wrap; justify-content: space-between;}
footer .vc_column-inner {padding-left:0 !important; padding-right:0 !important;}
.footer-wrap,
.footer-wrap > *{font-size: var(--legend-font-size) !important;}
.footer-wrap{display:flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
#menu-footer{margin-bottom: 0 !important;}
#menu-footer,
.footer-elements {list-style: none; display:inline-flex; flex-wrap: wrap; padding-left:0; width:max-content}
#menu-footer li:before,
.footer-elements li:before{display:none !important;}
#menu-footer li{margin: calc(var(--margin-xs)/2)}


@media screen and (max-width:1023px){
   #menu-footer {flex-direction: column; margin-top:var(--margin-xs)}
   .wpb_wrapper.social{margin-top:var(--margin-xs)}

  footer .vc_col-sm-4{width:100% !important; flex-basis: 100% !important;}

  #menu-footer li{margin-left:0 !important; padding-left:0!important;}
}



@media screen and (max-width:1024px){
  .wpb-content-wrapper .vc-row-container .wpb_row{margin-block-end: 20px !important;}
  .margin-xl-b .wpb_content_element,
  .margin-b-l .wpb_content_element{margin-bottom: 20px !important;}

  .single-portfolio .container .vc_single_image-wrapper{margin-bottom: 0 !important;}

}
.lb-element-kalium-social-icon-facebook .social-icon__label{
  background:url(inc/img/icon-facebook.svg);
  background-size: cover;
  width:34px; 
  height:34px;
  display:block;
}
.lb-element-kalium-social-icon-linkedin .social-icon__label{
background:url(inc/img/icon-linkedin.svg);
  background-size: cover;
  width:34px; height:34px;display:block;}
.lb-element-kalium-social-icon-instagram .social-icon__label{
background:url(inc/img/icon-instagram.svg);
  background-size: cover;
  width:34px; height:34px;display:block;}

.lb-element-kalium-social-icon-linkedin .link-style a,
.lb-element-kalium-social-icon-linkedin .link-style a:hover,
.lb-element-kalium-social-icon-linkedin .link-style a:focus,
.lb-element-kalium-social-icon-instagram .link-style a,
.lb-element-kalium-social-icon-instagram .link-style a:hover,
.lb-element-kalium-social-icon-instagram .link-style a:focus,
 .lb-element-kalium-social-icon-facebook .link-style a,
.lb-element-kalium-social-icon-facebook .link-style a:hover,
.lb-element-kalium-social-icon-facebook .link-style a:focus {
  --k-ls-enabled: 0 !important;
  --k-ls-hovered: 0 !important;
  --k-ls-line-width: 0 !important;
  --k-ls-line-bg: none !important;
    background-image: none !important;
    background-size: 0 0 !important;
    background-position: initial !important;
    text-decoration: none !important;
    transition: none !important;
}

.lb-element-kalium-social-icon-linkedin span,
 .lb-element-kalium-social-icon-facebook span,
 .lb-element-kalium-social-icon-instagram span{font-size:0 !important}


 .ls-wrapper::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.022);
  pointer-events: none;
  z-index: 2;
}

/* Ancrage du slider */
.ls-wp-container {
  position: relative;
}

/* Wrapper de la nav du bas (bullets) */
.ls-wp-container .ls-bottom-nav-wrapper{
  position: absolute !important;
  right: 20px;
  bottom: 20px;
  left: auto !important;
  width: auto !important;
  z-index: 9999;
  pointer-events: auto;
}

/* Optionnel : éviter le centrage par défaut */
.ls-wp-container .ls-bottom-nav-wrapper *{
  justify-content: flex-end;
}

.ls-wp-container .ls-bottom-nav-wrapper{
  transform: none !important;
}

.vc_row.vc_column-gap-35>.vc_column_container{padding-top: 0!important;  padding-bottom: 0!important;}

.member-details h2{font-size: var(--h6-font-size)!important;}

@media screen and (max-width:767px){
  .single .suivant-precedent {flex-direction: column;}
  .single .suivant-precedent li {width:100% !important;}
  .single .suivant-precedent li:last-child{text-align: left;}
}

.single .suivant-precedent {width:100%;list-style: none  !important; display:flex; justify-content: space-between; padding-left:0; margin-left:0;}
.single .suivant-precedent li {margin-top: var(--margin-m); width:30%; align-items: center;}
.single .suivant-precedent li:last-child{text-align: right;}
  .single .suivant-precedent li span.title{  font-size: var(--h6-font-size) !important;
text-transform:uppercase;
    font-weight: bold;
  }

   .single .suivant-precedent li .precedent{transform: rotate(90deg);}
      .single .suivant-precedent li .suivant{transform: rotate(-90deg);}
 .single .suivant-precedent li .precedent,
 .single .suivant-precedent li .suivant{
background: url(inc/img/filtre-arrow.svg);
width:20px;
height:20px;
background-size:cover;
display:inline-block;
margin-right:0.5rem;
 }
.cmplz-manage-consent,
.cmplz-cookiebanner.cmplz-dismissed {
  display: none !important;
}
 .single h1{margin-bottom: var(--margin-m);}

 .single .pagination-single {margin-top: var(--margin-giant);}
.member .hover-state {background:var(--k-color-1) !important}