: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-link-hover-color : --cnvs-body-bg;
}




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

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

p i{font-style:italic}


  /* ----------------------------------------------------------------
  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);}
.dark a {color:var(--cnvs-contrast-800);}
a:hover {color: var(--cnvs-themecolor);}
.dark a:hover {color: var(--grisclair);}




.content-wrap p a, .content-wrap table a, .content-wrap .texteencadre-spip a, .page_evenement .sticky-sidebar .card a, 
.content-wrap ul.spip > li > a, .content-wrap ul.spip li a:visited,
.content-wrap ol.spip > li > a, .content-wrap ol.spip li a:visited{
  border-bottom : 1px dotted; 
}

a img, a i, h1, h2, h3 a, h4 a, h5 a, a.menu-link {
  border: none;}


.page-menu-item > a {color: var(--blanc);}


::selection {
  background: var(--theme-color);}

::-moz-selection {
  background: var(--theme-color); /* Firefox */}

::-webkit-selection {
  background: var(--theme-color); /* Safari */}




a.cs_glossaire, a.cs_glossaire:visited,
a.spip_out, a.spip_out:visited{}



/*Surcharge pour adaptation mobile*/
.col-padding { padding: 1.5rem; }
@media (min-width: 992px) {
  .col-padding { padding: 2rem; }
}
@media (min-width: 1200px) {
  .col-padding { padding: 2rem; }
}



/*

ul.list-group > li > a, ul.list-group > li > a:visited; {color:var(--texte) }

p a, p a:visited, ul.spip > li > a, ul.spip > li > a:visited,
ul.list-group > li > a,
ul.list-group > li > a:visited {
   }


.dark p a, .dark p a:visited, .dark ul.spip > li > a, .dark ul.spip > li > a:visited
{border-bottom : 1px dotted; border-color : var(--blanc) }


p a:hover, p a:focus, ul.spip > li > a:hover, ul.spip > li > a:focus 
{color: var(--themehover-color);border-color : var(--themehover-color);}

.dark p a:hover, .dark p a:focus, .dark ul.spip > li > a:hover, .dark ul.spip > li > a:focus
 {color: var(--grisclair);border-color : var(--grisclair)}*/


/* Formulaire 
Adaptation descriptif des listes de diffusion squelettes/saisies/listes_diffusion.html
*/

.formulaire_spip .choix p {
color:var(--grismoyen);
text-decoration:italic;
font-weight: 400;
font-size: 90%;
text-transform:  none;
}

/* Formulaire 
Voir Formulaire NEwsletter n°200 - sélection deots-clés
*/

.formulaire_spip .saisie_mot label {display: block}
.formulaire_spip .saisie_mot .choix label {display: inline-block}



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

h1, h2, h3, h4, .h1, .h2, .h3, .h5, h3.spip, h2.spip
{font-family:var(--primary-font)}
h3.spip {margin: 25px 0 20px 0;}

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

/* 
root, h1, .h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
--cnvs-heading-color : var(--blanc);
}*/


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

:root, #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 : 500;
--cnvs-topbar-font-transform : uppercase;
--cnvs-header-transparent-border-color : transparent;
}

:root, .is-expanded-menu .sub-title .menu-container > .menu-item > .menu-link {
  --cnvs-primary-menu-padding-x : 15px
}
@media (min-width: 992px) {
#header-wrap, .sticky-header #header-wrap {
        box-shadow: 0px 10px 10px -10px rgba(0,0,0,0.1);   
    }}

.is-expanded-menu .full-header .primary-menu .menu-container {border-right: 0px}


/* .transparent-header ne reste transparent dans le style du template que sur des écrans larges car il y a insertion automatique de .is-expanded-menu dans la class de body. Mais sur mobile, la class en question disparaït et alors transparenta adopte le  dark/light scheme, donc on force la transparence en enlevant .is-expanded-menu de .is-expanded-menu #header.transparent-header
#header.transparent-header{
  --cnvs-header-bg: transparent;
}
#header + .include-header {
  margin-top: calc(-1 * var(--cnvs-header-height) - 1px);
  display: inline-block;
  vertical-align: bottom;
  width: 100%;
}
*/


/* header_small - position flèche à droite */
.menu-link i {
    vertical-align:middle;
}



/* Customisation du menu principal en mode mobile afin que le span - le subtitle d-e chaque onglet - apparaisse aussi et sur la même ligne */
@media (max-width: 1999.98px){
.menu-link div, div.no-link {display: inline-block;}
.menu-link span {
    display: inline-block;
    margin-top: 13px;
    line-height: 12px;
    font-size: .825rem;
    font-weight: 400;
    color: var(--cnvs-contrast-600);
    text-transform: none;}
}

/* Pour le mega-menu du site cncd.be, certains sous-titres n'ont pas de lien, donc on adapte leur style pour qu'il corresponde aux sous-titres avec lien */
.menu-item .no-link {
  position: relative;
  font-size: var(--cnvs-primary-menu-font-size);
  font-weight: 600;
  color: var(--cnvs-primary-menu-color);
  letter-spacing: var(--cnvs-primary-menu-submenu-spacing);
  font-family: var(--cnvs-primary-font);
  text-transform: uppercase;
}

/* Pour le mega-menu du site cncd.be, on adapte le tagcloud */
.is-expanded-menu .primary-menu:not(.on-click) .menu-item.mega-menu .mega-menu-content .sub-menu-container:not(.mega-menu-dropdown) {
     padding-top: .5rem;
    padding-bottom: .5rem÷}
.is-expanded-menu .primary-menu:not(.on-click) .menu-item.mega-menu .mega-menu-content .sub-menu-container.tagcloud:not(.mega-menu-dropdown)>* {
    display: inline-block;
 }

/* Pour insérer le menu langues spip dans la navbar, on lui donne son style de la top-bar
Utile pour les sous-sites multilingues ou encore pour menu de cncd.be en mode mobile */
#menu-langues {
    --cnvs-topbar-height: 45px;
    --cnvs-topbar-font-weight: 500;
    --cnvs-topbar-font-transform: uppercase;
    --cnvs-topbar-color: var(--cnvs-contrast-700);
    --cnvs-topbar-border-size: 1px;
    --cnvs-topbar-border-color: rgba(var(--cnvs-contrast-rgb), 0.1);
    --cnvs-topbar-social-icon-color:@ var(--cnvs-contrast-600);
    --cnvs-topbar-submenu-padding: 0.625rem;
    --cnvs-topbar-submenu-font-size: 0.75rem;
    position: relative;
    border-bottom: 0px;
    background-color: transparent;}

.menu_lang_item {
  position: relative;
  border-left: var(--cnvs-topbar-border-size) solid var(--cnvs-topbar-border-color);
}
.menu_lang_item:first-child, .top-links-sub-menu .menu_lang_item {
  border-left: 0 !important;
}
.menu_lang_item > a {
  display: block;
  padding: 12px;
  line-height: calc(var(--cnvs-topbar-height) - 24px);
  font-weight: var(--cnvs-topbar-font-weight);
  text-transform: var(--cnvs-topbar-font-transform);
  color: var(--cnvs-topbar-color);
}
.menu_lang_item > a > i {vertical-align: top;}
.menu_lang_item > a > i.fa-caret-down {margin: 0 0 0 5px !important;}
.menu_lang_item > a > i:first-child {margin-right: 3px;}
.menu_lang_item.full-icon > a > i {
top: 2px;margin: 0;}
.menu_lang_item:hover {background-color: var(--cnvs-contrast-200);}
.top-links:not(.on-click) .menu_lang_item:hover > .top-links-sub-menu, .top-links:not(.on-click) .menu_lang_item:hover > .top-links-section, .top-links.on-click .top-links-sub-menu, .top-links.on-click .top-links-section {
  opacity: 1;visibility: visible; margin-top: 0;pointer-events: auto;z-index: 499;}
.top-links.on-click .top-links-sub-menu, .top-links.on-click .top-links-section {display: none;}
.top-links-sub-menu .top-links-sub-menu {
  top: calc(-1 * var(--cnvs-topbar-border-size));left: 100%;}
.top-links-sub-menu .menu_lang_item:not(:first-child) {
  border-top: var(--cnvs-topbar-border-size) solid rgba(var(--cnvs-contrast-rgb), 0.1);}
.top-links-sub-menu .menu_lang_item:hover {
  background-color: var(--cnvs-contrast-100);}
.top-links-sub-menu .menu_lang_item > a {
  display: flex;align-items: center;padding-top: var(--cnvs-topbar-submenu-padding);padding-bottom: var(--cnvs-topbar-submenu-padding);line-height: 20px;}
.top-links-sub-menu .menu_lang_item > a i.fa-caret-down {
  margin: 0 !important; position: absolute;top: 50%;left: auto;right: 10px;transform: translateY(-50%) rotate(-90deg);}




#menu-langues .top-links-sub-menu .top-links-item, #menu-langues .top-links-sub-menu .menu_lang_item {border-top:  none}
#menu-langues .top-links-item > a > i, #menu-langues .menu_lang_item > a > i {vertical-align: middle}


/* Adapatation de la taille du logo sur un téléphone mobile afin que tout reste sur une seule ligne  ------------------------------------------------*/

@media (max-width: 539px) {
#header-wrap #logo img {height: var(--cnvs-header-height-sm);}}




/* Topbar ------------------------------------------------
:root,
.not-dark {
  --cnvs-topbar-color:  --var(blanc)}


.dark .top-links-item > a {color: var(--cnvs-contrast-1000)}
.dark .top-links-item:hover > a, 
.dark .top-links-item.current > a, 
.dark .top-links-item > .current > a:hover, .dark .top-links-item > .current > a:visited
{color: var(--cnvs-contrast-700)}

.dark .top-links-item:hover, .dark .top-links-item.current {background-color: transparent}*/

.top-links-item {font-size: 90%}

/* Topbar ------------------------------------------------*/
      /* Topbar Important pour qu'on la voie lorsqu'il y aun slider l'englobant */

  #top-bar.transparent-topbar {
    background: transparent;
    z-index: 399;
  }



:root, #top-bar, #copyrights {
--cnvs-topbar-font-transform: var(--body-font);
--cnvs-topbar-font-transform: uppercase;
font-family: var(--secondary-font);
--cnvs-topbar-font-weight : 500;}

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



/*REM : On reproduit le style CSS des balise span.ts-icon et span.ts-text pour insérer du texte */
#top-social li .ts-joinus{
  display: block;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  height: var(--cnvs-topbar-height);
  line-height: calc(var(--cnvs-topbar-height) - 1px);
}
#top-social li .ts-joinus {
  width: auto;
  text-align: center;
  font-size: 0.875rem;
}

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


/* Side panel - Principal menu de navigation  ------------------------------------------------------- */

.nav-tree li a {
    letter-spacing: var(--cnvs-primary-menu-submenu-spacing);
    font-weight: var(--cnvs-primary-menu-submenu-font-weight);
    font-size: var(--cnvs-primary-menu-submenu-font-size);
    font-family: var(--cnvs-primary-menu-submenu-font);
    text-transform: var(--cnvs-primary-menu-tt);
}




/* Heading ------------------------------------------------*/
  /* Dark Modze
  .dark .page-title-content h1 span.nocolor {color: var(--blanc);font-weight: bold} ------------------------------------------------*/

  /* Heading::Page title  ------------------------------------------------*/
    :root, 
    .page-title-content h1, .page-title-content .h1 {
      --cnvs-page-title-font-size: 1.8rem;
      --cnvs-page-title-font-weight : bold;
    }
    :root, 
    #page-title, .page-title {
    --cnvs-page-title-bg: transparent;
    --cnvs-page-title-padding: 2rem;
    }
  
    .page-title.page-title-mini h1 {font-size: 1.5rem;}
    .page-title .title-block h1 span.nocolor {
    color:var(--cnvs-page-title-color);
    font-size: var(--cnvs-page-title-font-size);
    margin-top: none;}
    .page-title-content span {max-width: 40rem;}/*  Important car permet de garder le breadcrumb à droite sur ordinateur */


    /* 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: -20px;
        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: 400;
     text-transform: uppercase;
      justify-content: flex-center;}
    @media (min-width: 992px) {
      #heading-twocolumns .breadcrumb  
      {justify-content: flex-end;}} /* inc-heading-twocolumns > aligner à droite du breadcrumb */



    .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; }
      /* Espace entre descriptif rubrique long et breadcrumb --*/
      .breadcrumb {margin-top :1.5rem;}


    /* Heading::bouton pour agrandir l'image de fond basé sur .sale-flash -*/
    .position-lightbox {
    position: absolute;
    bottom: .2rem;
    right: .2rem;
    z-index:5
  }


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


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

      .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: 1200px) {
          .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;font-size: 95%;color: var(--cnvs-contrast-600)}
      .intertitre-left h4.baseline, .intertitre-start h4.baseline, .intertitre-right h4.baseline, .intertitre-end h4.baseline {
        padding-left : 0rem}
          @media (min-width: 992px) {
          .intertitre-left h4.baseline, .intertitre-start h4.baseline {padding-left : 0rem;padding-right:0px;}
          .intertitre-right h4.baseline, .intertitre-end h4.baseline {padding-right : 0rem;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, .widget .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,
      .widget .intertitre-left h2:before, .widget .intertitre-start h2:before,
      .widget .intertitre-center h2:before, 
      .widget .intertitre-right h2:before, .widget .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);text-transform : uppercase; font-weight:600;}
.page-menu-item:hover > a, .page-menu-item:hover > a:hover{color: var(--blanc)}



/* Position de l'image inc-contenu-evenement-events */
:root, .entry-image img {
  --cnvs-post-image-size : 100%;width: 100%;
 --cnvs-post-image-rounded: 0px}
.entry-image img {width:var(--cnvs-post-image-size) }

.entry .event .entry-title .title-sm h3 {font-size: var(--cnvs-post-title-font-size)}






/* 26 agenda - Event card */

.event .bg-overlay-bg {background-color:rgba(255,255,255,0.5);}

.card-header h3, .event h3.card-title {font-size: 1.25rem;}


.event .entry-image .entry-date {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: var(--theme-color);
    opacity : .9;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
    width: 60px;
    height: 64px;
    text-align: center;
    padding-top: 9px;
    font-size: 28px;
    line-height:1;
    border-radius: 50%;
    z-index: 101;
}

.event .entry-image .entry-date span {
    display: block;
    font-size: 12px;
    margin-top:7px;
    text-shadow :1px 1px 1px rgba(0,0,0,0.2)
}





.event .card-header {
  background-color: var(--blanc);
  border-bottom: 0px 
}
.card-header:first-child {
  border-radius: 0;
}


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




/* Modele alert_sticky */

    @media (min-width: 992px) {
      #header:not(.no-sticky) + .sticky-top {
        top: 100px !important;
        transition: top .4s ease;
      }

      #header.sticky-header-shrink + .sticky-top {
        top: 60px !important;
      }
    }
    

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

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





/*  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: 0px 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 a:visited {color: var(--blanc); }


.dark a.button:hover  {
  color: var(--theme-color);
    background-color: var(--blanc); 
    text-shadow: none;

}


.button.button-border, .dark .button .button-border:hover  {
  background-color: var(--blanc); 
  color: inherit;
  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%);
}

}

.overlay {
        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) {.overlay {opacity: 0.3;}}


/* On adapte le mode dark */


.dark .img-thumbnail {
  background-color: transparent;
padding: 0px; border: none;border-radius: 0px}

/* 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);}

#ShareIcon, #PrintIcon {display:none;}

 @media (min-width: 576px) {
#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);}
#content .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;}
#temoignage .fbox-border .fbox-icon a {
var(--cnvs-featured-box-outline-border) solid var(--cnvs-themecolor)}

.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(--grisfonce); border-bottom: 1px dotted var(--grisfonce)}
      /* dark mode */
        .dark .fbox-plain h3 a, .dark .fbox-plain h3 a:visited  {color :var(--blanc); text-shadow: 1px 1px 1px rgba(0,0,0,0.2);}
        .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);}
        .dark .fbox-content p {color: var(--cnvs-contrast-800);
}

    /* cf.adpatation #footer - Présentation des missions */

    #footer .fbox-bg.fbox-center .fbox-icon {background-color:var(--cnvs-footer-bg)}
    #footer .fbox-icon i {color: var(--blanc)}








/* Share Buttons - Adaptation https://codepen.io/chandrashekhar/pen/ypvdRR 
Sur desktop, bouton de partage s'ouvrant vers les réseaux sociaux disponibles.
*/



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

  .list-group {background-color:none;}
:root, #footer .list-group {
--bs-list-group-bg : none;}

  /* Footer - Couleurs liens*/
  .dark#footer .footer-widgets-wrap h4 a, .dark#footer .footer-widgets-wrap h3 a {
    color: var(--blanc);}
    /* Flèches menu footer*/
  .widget_links:not(.widget-li-noicon) li::before {
    color:var(--theme-color); 
    content: "\f231";
  font-family: "bootstrap-icons";
  display: inline-flex;
  align-self: center;
  justify-self: center;
  position: relative;
  font-size: 0.75rem;
  line-height: inherit;
  left: 0;

  }



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

    /* Lorsqu'il y a 5 flipcards, la 5e est plus grande. Pour qu'elle soit normale sur mobile, on a créé ce style. */
      @media (min-width: 992px) {
      .flipcard-height-584 {height: 584px;}
      .flipcard-h-100 {height: 100%}}

  /* Style concçu pour le flipcard mix evenements/rubriques de la homepage */
      @media (min-width: 992px) {
      .flipcard-fullheight > .flip-card {height: 584px;}
      .flipcard-fullheight > .flip-card > .flip-card-front {height: 100%;}
      .flipcard-fullheight > .flip-card > .flip-card-back {height: 100%;}

      }

      .flipcard-fullheight





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


/* 25 Shop -  Agenda - menu filtre */

.widget-filter-links .widget-filter-reset {
left: 0;}
.widget-filter-links li span:not(.d-inline-block) {
  left: auto;
  right: 0;
}

.widget-filter-links li a, li.widget-filter-reset a, .widget-filter-links li a:visited:not(.button),.widget-filter-links li a:visited{
font-family:var(--secondary-font);text-transform: uppercase;font-size: .9rem; font-weight: 500;color:  var(--grismoyen);}
.widget-filter-links li a:hover ,.widget-filter-links li.active-filter a {color:  var(--themecolor);font-weight: 500}
.widget-filter-links li span{color:  var(--grismoyen); font-size:.9rem;}


/* Dividers */
/*.divider {margin-top: 3rem; margin-bottom: 1rem;}
.divider.divider-border { color: var(--grisclair)}
.divider.divider-border i {border-color: var(--grisclair)}
.divider.divider-rounded i,
.divider.divider-border i {
  color: var(--theme-color);
}*/

.divider i,.divider a, .divider-text {
  font-size: calc(var(--cnvs-divider-size) * 1) !important;

}




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

/* Shape Dividers ------------------------------------------------------- */
.section-curve {
background-color : rgba(var(--bs-light-rgb),var(--bs-bg-opacity))!important;
position:relative;
height:50px
}



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

:root, .portfolio-desc h3, .portfolio-desc .h3 {
  --cnvs-portfolio-desc-title-size: 14px; }
  .portfolio-desc h3, .portfolio-desc .h3 {text-align: center}
:root, .portfolio-desc {
  --cnvs-portfolio-desc-padding-y :10px}



/* Portfolio > desc - Slide-Carousel Homepage---------- 



.portfolio-desc h3 {font-size: 97%}
@media (min-width: 576px) {
.portfolio-desc h3, .portfolio-desc .h3 {
  
}}



root,  
#oc-clients .portfolio-desc h3, #oc-clients .portfolio-desc .h3,
#clients .portfolio-desc h3, #clients .portfolio-desc .h3,
#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 : 93%;
}*/




 
/* 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 {
      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;
}*/

/*Modèle liste*/
.entry-title h4, .entry-title .h4 {
    --cnvs-post-title-font-size: 1rem;
    --cnvs-post-title-font-weight:  500;

}


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

.entry-meta li {  
font-weight: 500;text-transform:none;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);}

.dark .entry-meta li {color: var(--cnvs-contrast-800);}






/* 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 : 130%;}
.meta-btn i.i-bordered:hover {
  background-color : var(--cnvs-themecolor) !important;}

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

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

/* Slide article-posts_fullwidth_overlay */

.text-overlay-mask {
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 50%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.85)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 50%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 50%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 50%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 50%);

}




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

/* Pour la variante témoignages inc-contenu-temoignages, on utilise bg-icon. On crée ici bg-icon-left pour un autre positionnement pour la compo portrait */ 

.bg-icon-left {
    display: block;
    position: absolute;
    bottom: -60px;
    left: -50px;
    font-size: 150px;
    color: rgba(var(--cnvs-contrast-rgb), .1);
}

#temoignages .dark .color {color: var(--blanc) !important;}





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


/* divers */
/* enlève le compteur en anglais lorsque l'on regarde une gallerie d'images (lightbox) */
.mfp-counter {display: none}


/* Modèle blockcontent_tab3 /html/canvas/block-content-tab-3.html   */


    .block-tab-3 .nav-link {
      color :var(--cnvs-featured-box-font-color),
      font-family: var(--secondary-font);
      text-transform : var(--cnvs-featured-box-font-tt);
      font-weight:var(--cnvs-featured-box-font-weight);
      padding: 20px 32px;
      font-size: var(--cnvs-primary-menu-font-size);
      transition: all .2s ease;
    }

        .block-tab-3 .nav-link span {
      color :var(--cnvs-contrast-600);
    }



    .block-tab-3 .nav-link:hover {
      background-color: var(--theme-color);
      color: var(--blanc);
    }








    .card-columns.layout-2 {
      -webkit-column-count: 2;
      -moz-column-count: 2;
      column-count: 2;
    }

    .card-columns a {
      position: relative;
      display: block;
    }

    @media (max-width: 991.98px) {
      .block-tab-3 .nav-link {
        border: 1px solid #CCC;
        padding: 10px 15px;
        margin: 5px;
        font-size: 1.15rem;
      }
    }

/* Iconlist */
:root, .iconlist {
  --cnvs-iconlist-margin: 1rem;}




/* Modèle ressources 
On insére un style en fonction du compteur boucle pour varier le positionnement des publications 

#ressources #top img {
  margin-bottom:-25%;
overflow: hidden}
#ressources #bottom img {
  margin-bottom:-35%;
  overflow: hidden}*/

/* Lettrine*/
/* 30 Lettrine

https://cod-box.net/creer-une-lettrine-en-css-pour-web-ou-calibre/ 
-------------------------------------------------------------------------*/

.lettrine p:first-child::first-letter {
float: left; 
font-size: 500%;  
line-height: 80%; 
margin:-.1em 0px;
padding-right: .1em}




.lettrine strong {color:#000;} 
.lettrine .dark strong{color:var(--blanc);}/* Utile pour le titre duy modèle alert.html en mode dark*/
.lettrine .cs_blocs p:first-child::first-letter, 
.lettrine .onglets_bloc p:first-child::first-letter,
.lettrine .blocs_destination p:first-child::first-letter, .lettrine .blocs_destination:first-child::first-letter, .lettrine .cs_blocs .blocs_destination p:first-child::first-letter, .lettrine .cs_blocs:first-child::first-letter,
.lettrine .media p:first-child::first-letter, .lettrine .encart p:first-child::first-letter, .lettrine .littlefoot-footnote__content p:first-child::first-letter,
.lettrine button.little-footnote__button:first-child::first-letter,
.lettrine blockquote.spip p:first-child::first-letter, .lettrine blockquote.spip:first-child::first-letter, .lettrine blockquote p:first-child::first-letter, .lettrine blockquote:first-child::first-letter,
blockquote.spip p:first-child::first-letter, blockquote.spip:first-child::first-letter, blockquote p:first-child::first-letter, blockquote:first-child::first-letter,
.lettrine .onglets_contenu div p:first-child::first-letter,
.lettrine p q:first-child:first-letter
{ 
  padding:0px;
  margin:0px;
  line-height:inherit;
  font-weight:inherit;
  color:inherit;
  font-size: 100%;
  vertical-align: baseline;
  font: inherit;
   border: 0;
   float:none
}




/* 11 Steps */ 
/* Vertical*/
    .feature-box-border-vertical .feature-box,  { position: relative; }
    .feature-box-border-vertical .feature-box:not(.noborder)::before,
    .feature-box-border-vertical.border-hover-animate .feature-box:not(.noborder)::after, {
      content: "";
      position: absolute;
      top: calc(64px + 13px);
      left: 59px;
      width: 2px;
      height: calc(100% - 90px);
      background-color: #EEE;
      z-index: 0;
    }


    .feature-box-border-vertical.border-hover-animate .feature-box:not(.noborder)::after,
    .feature-box-border-horizontal.border-hover-animate .feature-box:not(.noborder)::after {
      background-color: var(--theme-color);
      height: 0;
      transition: height .3s ease-in-out;
    }

    .feature-box-border-vertical .feature-box:nth-child(1):not(.noborder)::before { var(--theme-color); }

    .feature-box-border-vertical.border-hover-animate .feature-box:hover:not(.noborder)::after { height: calc(100% - 90px); }

    .feature-box-border-vertical .fbox-icon i,
    .feature-box-border-vertical .fbox-border.fbox-light .fbox-icon i {
      line-height: 60px;
      font-size: 24px;
      z-index: 1;
      text-align: center;
    }


    .vertical-steps.fbox-content p {color : var(--bs-body-color)}








.header-stick {
  margin-top: -var(--cnvs-margin-base) !important;
}

.content-wrap .header-stick {
  margin-top: calc(-1 * var(--cnvs-margin-lg)) !important;
}


.read-more-trigger i {
  position: relative;
  top: 10px;
  margin-left: 3px;
}

/* Styles issu du fichhier modèle /block-content-social-follow-1.html
-------------------------------------------------------------------------*/
    .blocks-social-follow a {
      position: relative;
      border-right: 1px solid #EEE;
      padding-top: 2.75rem;
      padding-bottom: 2.75rem;
      border-radius: 4px;
      transition: all .2s ease;
      width: auto;
    }
    .dark .blocks-social-follow a {border-right: 0px;}/* Customisation*/

    .blocks-social-follow:hover > a:not(:hover) {
      opacity: .3;
    }

    .blocks-social-follow a:last-child {
      border-right: 0;
    }

    .blocks-social-follow a:hover i {
      color: #FFF;
      transform: scale(1.3);
    }




/* Fancy Title - Align - complément à styles.css pour le mobile
-----------------------------------------------------------------*/
@media (min-width: 992px) {
.title-md-right::before {
  display: block;
}
.title-md-right::after {
  display: none;
}}


/* figcaption : on diminue la taille de la police et positionne un peu plus bas la légende*/
.mfp-title {
    bottom: 15px;
    font-size: 85%;
    width: 80%;

}

/* Vignette auteur arrondie
-----------------------------------------------------------------*/



@media (min-width: 768px) {
img.aligncenter, div.aligncenter, div.aligncenter img {
    margin-left: 0px;
    clear: both
}}