:root {
  --cnvs-primary-font: var(--primary-font);
  --cnvs-secondary-font: var(--secondary-font);
  --secondary-font : 'Poppins', sans-serif;
  --cnvs-color-twitter : var(--noir);
  --cnvs-body-font : 'Roboto', san-serif;
  --body-font : 'Roboto', san-serif;
  --cnvs-post-meta-fontsize : 
}


/* Body ------------------------------------------------*/

/* Surcharge : on enlève le padding de spip > layout.css */
@media (max-width: 767px) {
  body {width: 100%; padding: 0 0;}}

  /* ----------------------------------------------------------------
  Typography
-----------------------------------------------------------------*/


body {
  line-height: 1.5;
  font-size: var(--cnvs-font-size-body);
  font-family: var(--cnvs-body-font);
  background: var(--cnvs-body-bg-boxed);
}

a {
    text-decoration: none !important;
    color: var(--cnvs-link-color);

}
a:hover {
  color: var(--cnvs-link-hover-color);
}
a img {
  border: none;
}

/* Fonts ------------------------------------------------*/

h1, h2, h3, h4, .h1, .h2, .h3, .h5, h3.spip, h2.spip
{font-family:var(--primary-font)}

/*  Titraille ------------------------------------------*/

h1, .h1 {
  font-size: calc(1.5rem);
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2rem;
  }
}

h2, .h2 {
  font-size: calc(1.325rem);
}
@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 1.7rem;
  }
}

h3, .h3 {
  font-size: calc(1.3rem);
}
@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 1.5rem;
  }
}

h4, .h4 {
  font-size: calc(1.275rem);
}
@media (min-width: 1200px) {
  h4, .h4 {
    font-size: 1.4rem;
  }
}

h5, .h5 {
  font-size: 1.2rem;
}

h6, .h6 {
  font-size: 1rem;
}



/* Header ------------------------------------------------*/
:root {
  --cnvs-primary-menu-font:  var(--primary-font);}

#header {
--cnvs-primary-menu-font: var(--secondary-font);
--cnvs-primary-menu-tt: uppercase;
--cnvs-primary-menu-font-weight:600;
--cnvs-primary-menu-font-size:  .9rem;
--cnvs-primary-menu-submenu-font: var(--secondary-font);
--cnvs-primary-menu-submenu-font-size: 0.8rem;
--cnvs-primary-menu-submenu-font-weight: 500;
--cnvs-topbar-font-weight : 600;
--cnvs-topbar-font-transform : uppercase;
}


/* Topbar ------------------------------------------------*/
#top-bar, #copyrights {
--cnvs-topbar-font-transform: var(--body-font);
--cnvs-topbar-font-transform: uppercase;
font-family: var(--secondary-font);
--cnvs-topbar-font-weight : 600;}

    /*Top social + Footer  social*/
    /*REM : Comptabilité kit personnel fontawesome et styles du template CANVAS*/
    #top-bar .fa, #top-bar .fa-brands, #top-bar .fa-classic, #top-bar .fa-duotone, #top-bar .fa-light, #top-bar .fa-regular, #top-bar .fa-sharp, #top-bar .fa-sharp-solid, #top-bar .fa-solid, #top-bar .fa-thin, #top-bar .fab, #top-bar .fad, #top-bar .fal, #top-bar .far, #top-bar .fas, #top-bar .fasl, #top-bar .fasr, #top-bar .fass, #top-bar .fat,
    #copyrights .fa, #copyrights .fa-brands, #copyrights .fa-classic, #copyrights .fa-duotone, #copyrights .fa-light, #copyrights .fa-regular, #copyrights .fa-sharp, #copyrights .fa-sharp-solid, #copyrights .fa-solid, #copyrights .fa-thin, #copyrights .fab, #copyrights .fad, #copyrights .fal, #copyrights .far, #copyrights .fas, #copyrights .fasl, #copyrights .fasr, #copyrights .fass, #copyrights .fat
    {line-height:inherit} 
    #top-social a {font-weight: var(--cnvs-topbar-font-weight)}
    #top-social li {border: none}

/* Submenu  ------------------------------------------------*/
.is-expanded-menu .mega-menu-style-2 .mega-menu-title > .menu-link {
  text-transform: uppercase;
  font-weight: var(--cnvs-primary-menu-font-weight);
  font-size: var(--cnvs-primary-menu-font-size);
}
/* Formulaire de recherche   ------------------------------------------------*/
.top-search-form input {
  font-family: var(--body-font);
  font-weight: normal;
}

/* 0Menu de langues   ---------------------------------------------------- */

.top-links-item {
font-family:var(--secondary-font);

}


/* Heading ------------------------------------------------*/

    /* Heading::Page title  ------------------------------------------------*/
    :root, 
    #page-title.page-title-parallax h1, #page-title h1, .page-title-content .h1 {
      --cnvs-page-title-font-size: 2rem;
    }

    root, 
    #page-title {
    --cnvs-page-title-bg: transparent}
    
    .page-title.page-title-mini h1 {text-transform: uppercase}
    .page-title.page-title-mini {border-bottom : none}

  .page-title .title-block h1 span.nocolor {
    color:var(--cnvs-page-title-color);
    font-size: var(--cnvs-page-title-font-size);
    margin-top: none;
    }

    /* Heading::Page title::Image  ------------------------------------------------*/
    .title-block {
      padding-left:  30px;
      border-left: 0px;
      margin-bottom: 30px;
    }
    .title-block:before{
    content: "";
    position: absolute;
    display: block;
    top: -25px;
    left: -5px;
    width:  70px;
    height: 70px;
    background-image: url('../img/bg/bg_title/bg_title_start_light.png');
    background-position: top left;
    background-repeat :no-repeat;
    background-size: 70px 70px;
    }
      @media (min-width: 1200px) {
      .title-block:before{
        content: "";
        position: absolute;
        display: block;
        top: -55px;
        left: -10px;
        width:  100px;
        height: 100px;
        background-image: url('../img/bg/bg_title/bg_title_start_light.png');
        background-position: top left;
        background-repeat :no-repeat;
        background-size: 100px 100px;
      }}


    /* Heading-block Descriptif */
    .heading-block > span:not(.before-heading) {
      font-size: 1.25rem;
    }

    /* Heading::Breadcrumb  ------------------------------------------------*/
    .breadcrumb{
     --bs-breadcrumb-item-active-color: var(--cnvs-themecolor);
     font-family:var(--secondary-font);
     font-weight: 600;
     text-transform: uppercase;
    justify-content: flex-end;}
    .breadcrumb, .page-title-parallax .breadcrumb {font-size: .7rem;}
    .breadcrumb-item.active {color:var(--grismoyen)}
    .dark .breadcrumb-item.active {color:var(--grisclair)}
    .page_album .breadcrumb, .page_rubrique .heading-twocolumns .breadcrumb {
    position: static !important; }


/* Intertitre ------------------------------------------------*/

      .w-max-50 {max-width:50%}
        @media (min-width: 1200px) { .w-max-50 {max-width:75%}}

      .intertitre .button {margin :0px} /* poistionnement du bouton dans l'intertitre */



     /* Intertitre::alignement  ------------------------------------------------*/
      .intertitre-center {text-align:center}
      .intertitre-left, .intertitre-start, .intertitre-right, .intertitre-end {text-align:left}
      .title-right::before {display: none;}
      .title-right::after {display: block;}      
          @media (min-width: 992px) {
          .intertitre-left, .intertitre-start {text-align:left}
          .intertitre-right, .intertitre-end  {text-align:right}
          .title-right::before {display: block;}
          .title-right::after {display: none;}
          }

     /* Intertitre::Surtitre  ------------------------------------------------*/
      .intertitre h4.baseline {margin-bottom: .5rem !important;}
      .intertitre-left h4.baseline, .intertitre-start h4.baseline, .intertitre-right h4.baseline, .intertitre-end h4.baseline {padding-left : 3rem}
          @media (min-width: 992px) {
          .intertitre-left h4.baseline, .intertitre-start h4.baseline {padding-left : 3rem;padding-right:0px;}
          .intertitre-right h4.baseline, .intertitre-end h4.baseline {padding-right : 3rem;padding-left:0px;}
          }
     /* Intertitre::Titre  -----------------------------------------------*/
      .intertitre-center h2:before {
        content: "";
        position: absolute;
        display: block;
        top: -38px;
        background-repeat :no-repeat;
        background-size: 75px 75px;
        width:  75px;
        height: 75px;
        opacity: .2;
        left: auto; right:auto;
        background-position: top center;
      }

      .intertitre-left h2:before, .intertitre-start h2:before,
      .intertitre-right h2:before, .intertitre-end h2:before {
        content: "";
        position: absolute;
        display: block;
        top: -38px;
        background-repeat :no-repeat;
        background-size: 75px 75px;
        width:  75px;
        height: 75px;
        opacity: .2;
        left: -38px;
        background-position: top left;
      }
          @media (min-width: 1200px) {
          .intertitre-center h2:before, 
          .intertitre-left h2:before, .intertitre-start h2:before,
          .intertitre-right h2:before, .intertitre-end h2:before {
            background-size: 100px 100px;
            width:  100px;
            height: 100px;
            top : -50px;}
          .intertitre-left h2:before, .intertitre-start h2:before{
          left: -50px;right:auto;}
          .intertitre-right h2:before, .intertitre-end h2:before{
          right: -50px;left:auto;}
          }

     /* Intertitre::Titre::Image ------------------------------------------*/

      .intertitre-center h2:before{
        background-image: url('../img/bg/bg_title/light/bg_title_center_light.png');}
      .dark .intertitre-center h2:before {
        background-image: url('../img/bg/bg_title/dark/bg_title_center_dark.png');}

      .intertitre-left h2:before, .intertitre-start h2:before,
      .intertitre-right h2:before, .intertitre-end h2:before {
        background-image: url('../img/bg/bg_title/light/bg_title_start_light.png');}
      .dark .intertitre-left h2:before, .dark .intertitre-start h2:before,
      .dark .intertitre-right h2:before, .dark .intertitre-end h2:before {
      background-image: url('../img/bg/bg_title/dark/bg_title_start_dark.png');}
          @media (min-width: 1200px) {
          .intertitre-right h2:before, .intertitre-end h2:before {
            background-image: url('../img/bg/bg_title/light/bg_title_end_light.png');}
          .dark .intertitre-right h2:before, .dark .intertitre-end h2:before {
          background-image: url('../img/bg/bg_title/dark/bg_title_end_dark.png');}
          }
     /* Intertitre::Mode Dark  -----------------------------------------------*/
      .dark .fancy-title::before,
      .dark .fancy-title::after {
        border-top-color: var(--grisclair);}
      .dark .title-border::before,
      .dark .title-border::after {
          border-top-color: var(--grisclair);
          opacity: 0.8;}

    /* Intertitre - Sidebar ------------------------------------------------*/

      .sidebar .intertitre .fancy-title h2.h3 {font-size:1.25rem}
      .sidebar .intertitre-left h2:before, .sidebar .intertitre-start h2:before,
      .sidebar .intertitre-center h2:before, 
      .sidebar .intertitre-right h2:before, .sidebar .intertitre-end h2:before {background-image:none}

      /* Modele intertitre sans affichage de l'intertitre mais juste du bouton */
      .pasdintertitre.fancy-title {margin-top: 1.5rem !important} /* equivaut à mt-4*/
      .pasdintertitre.fancy-title::after {margin-left: 4rem}

      /* Modele intertitre - Si baseline, on ajuste le positionnement du bouton */
      .intertitre .bouton .mt-3 {margin-top: 1,3rem}


/* Submenu  /index-onepage-2.html*/
.is-expanded-pagemenu .page-menu-item > a {
border-radius: 0px;}
.page-menu-item > a {color: var(--blanc);font-family: var(--secondary-font)}
.page-menu-item:hover > a, .page-menu-item:hover > a:hover{color: var(--blanc)}



/* Sticky */
    @media (min-width: 992px) {
      .block-portfolio-single .content-wrap { overflow: inherit; }

      .block-portfolio-single .portfolio-single-content.content-sticky {
        position: -webkit-sticky;
        position: sticky;
        top: 60px;
        height: 100%;
      }
    }

/* Styles issu /demo-articles.html et utilisé dans le modèle revuedepresse_bloc
pour que l'intertitre soit bien positionné à gauche et que les colonnes d'artciles et de documents remontent */
.services-info{position:absolute;top: 0;left: 30px;z-index: 9;text-align: left!important; }


/* Button ------------------------------------------------*/

.button{
font-size : 1rem;
font-family: var(--secondary-font);
font-weight: 600;
}

.formulaire_spip p.boutons input[type=submit] {



padding:6px 10px;color:#ffffff;font-weight:normal;border: 1px solid #ff9300;text-transform:uppercase;background:#ff9300;font-family:var(--font-title);font-size: 110%; border-radius: 0px;}
.formulaire_spip p.boutons input[type=submit]:hover {
background-color:#FFFFFF;border: 1px solid #ff9300;color:#ff9300;}




/*  On transpose le style button canvas au style btn bootstrap*/
.btn {
  display: inline-block;
  position: relative;
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  margin: 5px;
  padding: 8px 22px;

  line-height: 24px;
  background-color: none;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 2px solid;
}
body:not(.device-touch) .btn {
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

button.btn.btn-close {border:none}
.btn-group button.btn {margin: 0px;border-width :  1px}

/* Boutons de partage */
.social-icon {
  border: 1px solid var(--grisclair);
}
.dark .social-icon {
  color: #EEE;
  border-color: 1px solid var(--blanc);
}

.button, button {text-transform: uppercase}
.button, .button.button-border:hover  {
  background-color: var(--theme-color);
  color: var(--blanc); 
  border: 2px solid var(--theme-color);
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

.button:hover, .button.button-border, .dark .button .button-border:hover  {
  background-color: var(--blanc); 
  color: var(--theme-color);
  border: 2px solid var(--theme-color);
  text-shadow: none;
}

.dark .button.button-border:not(.button-light):not(.button-fill) {
  border-color: var(--blanc); 
  color: var(--blanc);
}


.button.button-border.button-red
{color:var(--rouge);border-color: var(--rouge);background-color: transparent;}  
a.button.button-red:visited:not(.button-border) 
{color:var(--blanc)}  
a.button.button-red:hover:not(.button-border), a.button.button-red:visited:hover:not(.button-border) 
{color:var(--rouge)}
.dark a.button.button-red:hover:not(.button-border), .dark a.button.button-red:visited:hover:not(.button-border) 
{color:var(--blanc)}
.button-red:not(.button-border) 
{border-color: var(--rouge);background-color: var(--rouge)}
.button-red:hover:not(.button-border)
{background-color: transparent !important; border-color: var(--rouge);color:var(--rouge);text-shadow: none}
.dark .button-red:hover:not(.button-border)
{background-color: transparent !important; border-color: var(--blanc);color:var(--blanc);text-shadow: none}
.dark .button.button-border.button-red:not(.button-light):not(.button-fill) 
{border-color: var(--rouge);color: var(--rouge);background-color: transparent;}
.dark .button.button-border.button-red:hover:not(.button-light):not(.button-fill) 
{color: var(--blanc);}


.button.button-border.button-theme
{color:var(--theme-color);border-color: var(--theme-color);background-color: transparent;}  
a.button.button-theme:visited:not(.button-border) {color:var(--blanc)}  
a.button.button-theme:hover:not(.button-border), a.button.button-theme:visited:hover:not(.button-border) {color:var(--theme-color)}  
.button-theme:not(.button-border) 
{border-color: var(--theme-color);background-color: var(--theme-color)}
.button-theme:hover:not(.button-border), .dark .button-theme:hover:not(.button-border)
{background-color: transparent !important; border-color: var(--theme-color);color:var(--theme);text-shadow: none}
.dark .button.button-border.button-theme:not(.button-light):not(.button-fill) {
  border-color: var(--theme-color);color: var(--theme-color);background-color: transparent;}
.dark .button.button-border.button-theme:hover:not(.button-light):not(.button-fill) {
color: var(--blanc);}


.button.button-border.button-facebook
{color:var(--facebook);border-color: var(--facebook);background-color: transparent;}  
a.button.button-facebook:visited:not(.button-border) {color:var(--blanc)}  
a.button.button-facebook:hover:not(.button-border), a.button.button-facebook:visited:hover:not(.button-border) {color:var(--facebook)}  
.button-facebook:not(.button-border) {border-color: var(--facebook);background-color: var(--facebook)}
.button-facebook:hover:not(.button-border), .dark .button-facebook:hover:not(.button-border)
{background-color: transparent !important; border-color: var(--facebook);color:var(--facebook);text-shadow: none}
.dark .button.button-border.button-facebook:not(.button-light):not(.button-fill) {
  border-color: var(--facebook);color: var(--facebook);background-color: transparent;}
.dark .button.button-border.button-facebook:hover:not(.button-light):not(.button-fill) {
color: var(--blanc);}

.button.button-border.button-youtube
{color:var(--youtube);border-color: var(--youtube);background-color: transparent;}  
a.button.button-youtube:visited:not(.button-border) {color:var(--blanc)}  
a.button.button-youtube:hover:not(.button-border), a.button.button-youtube:visited:hover:not(.button-border) {color:var(--youtube)}  
.button-youtube:not(.button-border) {border-color: var(--youtube);background-color: var(--youtube)}
.button-youtube:hover:not(.button-border), .dark .button-youtube:hover:not(.button-border)
{background-color: transparent !important; border-color: var(--youtube);color:var(--youtube);text-shadow: none}
.dark .button.button-border.button-youtube:not(.button-light):not(.button-fill) {
  border-color: var(--youtube);color: var(--youtube);background-color: transparent;}
.dark .button.button-border.button-youtube:hover:not(.button-light):not(.button-fill) {
color: var(--blanc);}

.button.button-border.button-twitter
{color:var(--twitter);border-color: var(--twitter);background-color: transparent;}  
a.button.button-twitter:visited:not(.button-border) {color:var(--blanc)}  
a.button.button-twitter:hover:not(.button-border), a.button.button-twitter:visited:hover:not(.button-border) {color:var(--twitter)}  
.button-twitter:not(.button-border) {border-color: var(--twitter);background-color: var(--twitter)}
.button-twitter:hover:not(.button-border), .dark .button-twitter:hover:not(.button-border)
{background-color: transparent !important; border-color: var(--twitter);color:var(--twitter);text-shadow: none}
.dark .button.button-border.button-twitter:not(.button-light):not(.button-fill) {
  border-color: var(--twitter);color: var(--twitter);background-color: transparent;}
.dark .button.button-border.button-twitter:hover:not(.button-light):not(.button-fill) {
color: var(--blanc);}


.button.button-border.button-orange
{color:var(--orange);border-color: var(--orange);background-color: transparent;}  
a.button.button-orange:visited:not(.button-border) {color:var(--blanc)}  
a.button.button-orange:hover:not(.button-border), a.button.button-orange:visited:hover:not(.button-border) {color:var(--orange)}  
.button-orange:not(.button-border) 
{border-color: var(--orange);background-color: var(--orange)}
.button-orange:hover:not(.button-border), .dark .button-orange:hover:not(.button-border)
{background-color: transparent !important; border-color: var(--orange);color:var(--orange);text-shadow: none}
.dark .button.button-border.button-orange:not(.button-light):not(.button-fill) {
  border-color: var(--orange);color: var(--orange);background-color: transparent;}
.dark .button.button-border.button-orange:hover:not(.button-light):not(.button-fill) {
color: var(--blanc);}



.button.button-border:not(.button-light):not(.button-fill).button-link
{color:var(--theme-color);border-color: transparent;background-color: transparent; text-shadow: none}  
.button.button-border:not(.button-light):not(.button-fill).button-link:visited {color:var(--theme-color)}
.button.button-border:not(.button-light):not(.button-fill).button-link:hover,
.button.button-border:not(.button-light):not(.button-fill).button-link:visited:hover
{color:var(--theme-color);border: 2px solid var(--theme-color);background-color: transparent}  
/* custom styles.css IMPORTANT ! */
.button.button-border:not(.button-fill):hover {border-color: var(--theme-color) !important;}



.dark .button.button-border:not(.button-light):not(.button-fill).button-link
{color:var(--blanc);border-color: transparent;background-color: transparent; text-shadow: 1px 1px 1px rgba(0,0,0,0.2);}  
.dark .button.button-border:not(.button-light):not(.button-fill).button-link:visited {color:var(--blanc)}
.dark .button.button-border:not(.button-light):not(.button-fill).button-link:hover,
.dark .button.button-border:not(.button-light):not(.button-fill).button-link:visited:hover
{color:var(--grisclair);border: 2px solid var(--grisclair);background-color: transparent}  
/* custom styles.css IMPORTANT ! */
.dark .button.button-border:not(.button-fill):hover {border-color: var(--grisclair) !important;}





.button.button-border.button-morelink
{color:var(--noir);border-color: transparent;background-color: transparent;}  
a.button.button-morelink:visited:not(.button-border) {color:var(--noir)}
a.button.button-morelink:hover:not(.button-border), a.button.button-morelink:visited:hover:not(.button-border) {color:var(--grisfonce);text-decoration:underline;}  
.button-morelinklink:not(.button-border) 
{border-color: transparent ;background-color: transparent; color:var(--noir);text-shadow: none}
a.button.button-border.button-morelink:hover {background: transparent;color:var(--noir);text-shadow: none}



.dark .button.button-border.button-morelink
{color:var(--blanc);border-color: transparent;background-color: transparent;} 


.dark a.button.button-morelink:visited:not(.button-border) {color:var(--blanc);border:none;}
.dark a.button.button-morelink:hover:not(.button-border), .dark a.button.button-morelink:visited:hover:not(.button-border) {color:var(--grisclair);text-decoration:underline;}  
.dark .button-morelink:not(.button-border) 
{border-color: transparent ;background-color: transparent;color:transparent;text-shadow: none}
.dark .button.button-border.button-morelink:hover {background: transparent;}





.button.button-border.button-white
{color:var(--blanc);border-color: var(--blanc);background-color: transparent;}  
a.button.button-white:visited:not(.button-border) {color:var(--blanc)}  
a.button.button-white:hover:not(.button-border), a.button.button-white:visited:hover:not(.button-border) {color:var(--blanc)}  
.button-white:not(.button-border) 
{border-color: var(--blanc);background-color: var(--blanc)}
.button-white:hover:not(.button-border), .dark .button-white:hover:not(.button-border)
{background-color: transparent !important; border-color: var(--blanc);color:var(--facebook);text-shadow: none}
.dark .button.button-border.button-white:not(.button-light):not(.button-fill) {
  border-color: var(--blanc);color: var(--blanc);background-color: transparent;}
.dark .button.button-border.button-white:hover:not(.button-light):not(.button-fill) {
color: var(--noir); background-color: var(--blanc) ;border: var(--noir) 1px solid; text-shadow: none;}




/* Button Play icon adapté de /html/canvas/demo-yoga.html 

Play icon normal > portfolio
Play icon small > images logo/doc
*/

.play-icon, .play-icon-small {transition:transform .3s ease}
.play-icon:hover, .play-icon-small:hover {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform:scale(1.2)
}
.play-icon i, .play-icon-small i {
    padding-left: 5px;
    text-align: center;
    border-radius: 50%;
    color: var(--noir);
    background-color: var(--blanc);
    z-index: 2;
    transition:all .3s ease
}
.play-icon i  {
    width: 80px;
    height: 80px;
    line-height: 81px;
    font-size: 28px;
}

.play-icon-small i {
    width: 30px;
    height: 30px;
    
}
.bg-overlay .play-icon-small i.fa-solid {line-height: 30px;}


.play-icon:hover i, .play-icon-small:hover i {
    background-color: var(--cnvs-themecolor); color:var(--blanc)}

a.play-icon, a.play-icon-small
a:visited.play-icon, a:visited.play-icon-small{color:var(--blanc);}

/* fichier inclure inc-video-facade.html */

.video-facade-title{
  font-family:var(--secondary-font);
  text-shadow : 1px 1px 1px rgba(0,0,0,0.2);
  font-size : 95%;
  font-weight: 600;
  text-transform: uppercase;
}
.video-facade-subtitle   {
font-family:var(--secondary-font);
text-shadow : 1px 1px 1px rgba(0,0,0,0.2);
font-size : 65%;
font-weight: 600;
text-transform: uppercase;
}



/* Filtre image  -------------------------------------------*/

.grid-filter {
        display: block;
        width: 100%;
        background-color: black;
        background-image: url('/squelettes/img/diagonal-noise.png');
        opacity: 0.4;
        position: absolute;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

@media (min-width: 1200px) {.grid-filter {opacity: 0.3;}}



.filter-image:after {
  
        background-color: black;
        background-image: url('/squelettes/img/diagonal-noise.png');
        opacity: 0.4;
        bottom: 0;
        content: "";
        background-position: center;
        background-size: cover;
        background-repeat: repeat;
        top: 0; left: 0;
        width: 100%; height: 100%;
        position: absolute;
        z-index: 1;
 
}

.bg-overlay-bg-gridfilter {
    --cnvs-bg-overlay-bg-opacity: 0.75;
    --cnvs-bg-overlay-bg: rgba(var(--cnvs-invert-contrast-rgb), var(--cnvs-bg-overlay-bg-opacity));
    background-image: url('/squelettes/img/diagonal-noise.png');
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow:hidden
}

@media (min-width: 992px) {
.img-overlap .bg-overlay {
        width: calc(100% + 30%);
        max-width:none
    }
.img-overlap .justify-content-center {
  justify-content: center !important;
  width : calc(100% - 30%);
}

}

/* Boutons coin inférieur droit */

/* on copie et adpoate le style de #gotoTop */
#gotoTop {
border-radius: 50%;
border: 1px solid var(--grismoyen);
background-color: var(--grismoyen);}
#PrintIcon, #ShareIcon {
  display: block;
  z-index: 599;
  position: fixed;
  width: 40px;
  height: 40px;
  font-size: 1.25rem;
  line-height: 36px;
  text-align: center;
  color: var(--blanc);
  top: auto;
  left: auto;
  right: 30px;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid var(--grismoyen);
  background-color: var(--grismoyen);}


/* Important pour la disposition */

.page_article #gotoTop, .page_evenement #gotoTop{bottom: 150px; }
.page_rubrique #gotoTop, .page_sommaire #gotoTop, .page_formulaire #gotoTop, .page_mot #gotoTop  { bottom: 90px; }

.page_article #ShareIcon, .page_evenement #ShareIcon{ bottom: 90px; }
.page_rubrique #ShareIcon, .page_sommaire #ShareIcon, .page_formulaire #ShareIcon, .page_mot #ShareIcon { bottom: 30px; }


.page_article #PrintIcon, .page_evenement #PrintIcon{ bottom: 30px; }
.page_rubrique #PrintIcon, .page_sommaire #PrintIcon, .page_formulaire #PrintIcon, .page_mot #PrintIcon{ display:none }



#PrintIcon a:not(.social-icon) i {color: var(--blanc);}
#gotoTop:hover, #PrintIcon:hover, #ShareIcon:hover{background-color: var(--theme-color);border-color: var(--theme-color)}





/* Feature box Modèle iconmenu ou auteur_footer inspiré de .iconbox ------------------------------------ */
:root,
.fbox-content h3, .fbox-content .h3{
--cnvs-featured-box-font-tt : uppercase;
--cnvs-featured-box-font-weight : 600;
 font-family: var(--cnvs-secondary-font);
}
  


.fbox-bg.fbox-center .fbox-icon {background:var(--blanc);}
.dark .fbox-bg.fbox-center {border-color: var(--grisclair);}
.dark .fbox-bg.fbox-center .fbox-icon {background-color:var(--theme-color)}
.bg-light .fbox-bg.fbox-center .fbox-icon {background:var(--grisclair);}


.fbox-plain .fbox-icon {border: 1px;}
.fbox-border .fbox-icon a {border: none;}
.i-theme {
  background-color: var(--blanc);
  color: var(--theme-color);
  text-shadow: 1px 1px 1px var(--blanc);
  box-shadow: inset 0 0 15px rgba(0,0,0,0.2);
}

        /* Style pour unifier la hauteur des blocs et l'adapter à la taille de l'écran */
        .height-50 {height: 50px; }
        .height-90 {height: 90px; }
        .height-170 {height: 170px; }
        .height-200 {height: 170px; }

        @media (min-width: 576px) {
          .height-50 {height: 70px; }
          .height-90 {height: 110px;}
          .height-170 {height: 250px;}
          .height-200 {height: 250px; }
        }



    /* cf. modèle iconmenu liens */
      /* light mode */
        .fbox-plain h3 a, .dark .fbox-plain h3 a:visited  {color :var(--noir)}
        .fbox-plain h3 a:hover {color :var(--ggrisfonce); border-bottom: 1px dotted var(--grisfonce)}
      /* dark mode */
        .dark .fbox-plain h3 a, .dark .fbox-plain h3 a:visited  {color :var(--blanc)}
        .dark .fbox-plain h3 a:hover {color :var(--grisclair); border-bottom: 1px dotted var(--grisclair)}
        .dark .fbox-plain .fbox-icon i, .dark .fbox-plain .fbox-icon img {
          color: var(--blanc);
}

/* PLUGIN  - Adaptation de la class .socialtags issue du plugin social ----------------------*/
div.social {margin: 0;padding: 0;clear:none;}

/* Share Buttons - Adaptation https://codepen.io/chandrashekhar/pen/ypvdRR*/

.menu .share:hover.leftbottom .submenu li:nth-child(1) {
  opacity: 1;
  left: -51px;
  transform: rotate(0deg);
  transition-delay: 0.24s;
}
.menu .share:hover.leftbottom .submenu li:nth-child(2) {
  opacity: 1;
  left: -102px;
  transform: rotate(0deg);
  transition-delay: 0.32s;
}
.menu .share:hover.leftbottom .submenu li:nth-child(3) {
  opacity: 1;
  left: -153px;
  transform: rotate(0deg);
  transition-delay: 0.4s;
}
.menu .share:hover.leftbottom .submenu li:nth-child(4) {
  opacity: 1;
  left: -204px;
  transform: rotate(0deg);
  transition-delay: 0.48s;
}
.menu .share:hover.leftbottom .submenu li:nth-child(5) {
  opacity: 1;
  left: -255px;
  transform: rotate(0deg);
  transition-delay: 0.56s;
}

.menu .submenu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.menu .submenu li {
  transition: all ease-in-out 0.5s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
}
.menu .submenu li a {
  color: #212121;
}


/* Footer*/
.copyright-links {font-size: 85%}
.dark #copyrights, .dark #copyright-links, .dark .copyright-links a {color:var(--grisclair); }
.dark .copyright-links a  {border-bottom-color: var(--grisclair);}
.dark .copyright-links a:hover {color: var(--blanc);border-bottom-color: var(--blanc);}



/* FLIPCARD Adaptation flipcard.html ------------------------------------------------------- */
.flip-card .card-title {color: var(--blanc)}
.flip-card-back::after, .flip-card-front::after {
opacity : .4; border-radius : 0px;}

/* ICONS ------------------------------------------------------- */
/*REM : Comptabilité kit perosnnel fontawesome et styles du template CANVAS*/
.bg-overlay .fa-solid {line-height: inherit}



/* Styles issu du template demo-skin pour le blocdeuxcolonnes variante overlap */


 .img-overlap + div {
    padding:40px}

@media (min-width: 992px) {
.img-overlap img {
        width: calc(100% + 30%);
        max-width:none
    }
.img-overlap + div {
        border-radius: .3rem;
        padding:60px
    }
}

/* Gradient background https://canvastemplate.com/gradients.html utilisé pour les articles-revue de presse ---------------------- */
.gradient-theme,
.h-gradient-theme:hover {
 background-image:linear-gradient(to right, #535353, var(--theme-color)) !important
}



/* Shape Dividers ------------------------------------------------------- */

.section-curve::after {
  height: 50px;
  background-image: url('/squelettes/img/shape-dividers/curve.svg');
  background-size: 100% 100%;
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  z-index: 0;
  bottom: 0;}

  .section-tilt::after {
  height: 50px;
  background-image: url('/squelettes/img/shape-dividers/tilt.svg');
  background-size: 100% 100%;
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  z-index: 0;
  bottom: 0;}


/* Post entry ------------------------------------------------------- */

:root {
--cnvs-post-entry-link-font-family: var(--primary-font);
}


/* Portfolio > desc + reveal cf. mots ou sites variante clients---------- */
root,  
#oc-clients .portfolio-desc h3, #oc-clients .portfolio-desc .h3,
#clients .portfolio-desc h3, #clients .portfolio-desc .h3 {
font-family : var(--secondary-font);
text-transform: uppercase;
font-weight : 500;
text-align:center;
--cnvs-portfolio-desc-title-size : 95%;

}

 
/* Portfolio-meta cf. inc-modal infos sur les documents ---------- */
.portfolio-meta li span {
   font-family:var(--secondary-font);
    font-weight: 600;
    color: var(--noir);
    text-transform: uppercase;

}


/* Dark mode ------------------------------------------------------ */

#content .dark p {text-shadow :1px 1px 1px rgba(0,0,0,0.2)}





  /* Social Icons Colors pour plugin SPIP Social Tags-------------- */
.color-mail,
.h-color-mail:hover { color: var(--grisfonce) !important;}

.bg-mail, .h-bg-mail:hover {
  background-color: var(--grisfonce)  !important;}

/* Type de bg */

/* Source : https://canvastemplate.com/demo-articles.html */ 
.bg-features {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-image: url('../img/bg/bg-canvas/section-features.svg');
    background-size:auto 100%
}
/* Source : https://canvastemplate.com/demo-articles.html */ 
.bg-dots-tl, .bg-dots-tr, .bg-dots-bl, .bg-dots-br {
  padding: 120px 0; 
  background-position: 100% 0;
  background-repeat: no-repeat;
  background-size:40%;
  background-color: transparent;
}

.bg-dots-tl{background-image: url('../img/bg/bg-canvas/dots-topleft.png');background-position: top left;}
.bg-dots-tr{background-image: url('../img/bg/bg-canvas/dots-topright.png');background-position: top right;}
.bg-dots-bl{background-image: url('../img/bg/bg-canvas/dots-bottomleft.png');background-position: bottom left;}
.bg-dots-br{background-image: url('../img/bg/bg-canvas/dots-bottomright.png');background-position: bottom right;}

/* Owl Carousel.*/ 

    /*Affichage centré des items lorsque ceux-ci sont moins nombreux que les colonnes 
    .owl-stage {margin-left:auto;margin-right:auto;} */

    /* Correction flèche navigation ----- */
    .owl-carousel .owl-nav [class*=owl-] {line-height: 32px;}

    /* Reprise du template /html/canvas/demo-yoga.html pour vignettes liste article */
    .owl-carousel .jumbotron { height: 400px; }
    .owl-item .jumbotron {
      opacity: .5;transform: scale(0.95);transition: all .5s ease;}
    .owl-item .jumbotron-text {
      opacity: 0;transform: scale(0.9);transition: all .4s .2s ease;}
    .owl-item.active .jumbotron,
    .owl-item.active .jumbotron-text {
      opacity: 1;transform: scale(1);}

    /* cf.carousel clients */
    #oc-clients .owl-item {border:1px solid var(--grisclair)}

    /* cf.carousel clients desc animé */
    #oc-clients .portfolio-reveal .portfolio-desc {margin-top: 82px}

    /*  cf. Surcharge nonprofit.css > modèle charity-card */
    .oc-desc {
      position: absolute;top: 5%;left: 5%;bottom: 16px;background-color: #FFF;padding: 25px;border-radius: 0px;height: 90%;width: 90%;}
    .charity-card p {
      overflow: hidden;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;}
    .owl-carousel .owl-item .oc-desc {
      opacity: 0;transform: scale(0.7); transition: all .3s cubic-bezier(0.4, 0.2, 0.2, 1);}
    /* .owl-carousel .owl-item:hover .oc-desc, */
    .owl-carousel .owl-item.active.center .oc-desc {opacity: .9;transform: scale(1);}


/*Entry*/

/* Adaptations des tailles de la titraille
.entry-title.title-xs h2,
.entry-title.title-xs h3 {
  font-size: 1.2rem;
}*/


.entry-title span{
  font-family:var(--font-title);
  color: var(--grismoyen);
  font-size: 1.2rem}
  

.entry-meta li {  
font-weight: 500;text-transform:uppercase;font-family:var(--cnvs-secondary-font);color: var(--cnvs-contrast-600);}
.entry-meta a {text-transform:none;}
.entry-meta a:visited{color: var(--cnvs-post-meta-color);}
.entry-meta a:hover {color: var(--grisfonce);}

/* Page article > meta > on ajoute le style perso .meta-btn pour agrandir les icones d'impression et de téléchargement*/
.meta-btn i {
font-size : 150%;
}
.meta-btn i.i-bordered {
  border-color: var(--cnvs-contrast-600);
 color : var(--cnvs-contrast-600)}
 .meta-btn i.i-bordered:hover {
  background-color : var(--cnvs-themecolor) !important;
  --cnvs-i-color: var(--blanc) !important;
  border-color: var(--cnvs-i-color);
}

/* Badge */
root, .badge {
--bs-badge-font-weight: 600;}

.badge {
  font-family:var(--secondary-font);
  text-transform: uppercase;
}

/* Slide Homepage cncd.be */
.slide-overlay-mask {
    opacity: .85;
    top: auto;
    bottom: 0;
    height: auto;
    padding: 40px 15px 15px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .85) 100%);
}/* adaptation de text-overlay-mask */


/* Class bg-icon */
.bg-icon .fa::before,
.bg-icon [class^="fa-"]::before,
.bg-icon [class*=" fa-"]::before {
  display: inline-block;
  font-family: Font Awesome 6 !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}




.fa-newsletter::before { content: "\f1d8"; }


/* Page sommaire cncd.be / 
Card avec scroll 
> styles indipensables issu de news.ccs, le style du template /demo-news.html  Version 7.2.2 */
.scroll-wrap {
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.scroll { width: calc(100% - 10px); }
.scroll-wrap::-webkit-scrollbar {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  height: 10px;
  width: 6px;
}
.scroll-wrap::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;
}