:root {
  --color-primary-1: #1d1d1b;
  --color-primary-2: #a51e1e;
  --color-primary-3: #d1c6ac;
  --color-primary-4: #eae3d6;
  --color-secondary-1: #444c39;
  --color-secondary-2: #585857;
  --color-light1: #acacac;
  font-size: 14px;
}

@font-face {
  font-family: 'title-regular';
  src: url('../fonts/optima-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'title-bold';
  src: url('../fonts/optima-bold.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'body-regular';
  src: url('../fonts/roboto-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'chiffres-heures';
  src: url('../fonts/chiffres-heures.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* ---------------------------------------- 
      Couleurs (css/presets/default.css)
   ---------------------------------------- */

body,
.sp-preloader {
	background-color: #ffffff;
	color: #1d1d1b
}

.sp-preloader>div {
	background: #1d1d1b
}

.sp-preloader>div:after {
	background: #ffffff
}

#sp-top-bar {
	background: #333333;
	color: #aaaaaa
}

#sp-top-bar a {
	color: var(--color-primary-1);
}

#sp-header {
	background: #ffffff
}

#sp-menu ul.social-icons a:hover,
#sp-menu ul.social-icons a:focus {
	color: var(--color-primary-1)
}

a {
	color: var(--color-primary-1)
}

a:hover,
a:focus,
a:active {
	color: var(--color-primary-1)
}

.tags>li {
	display: inline-block
}

.tags>li a {
	background: rgba(29, 29, 27, 0.1);
	color: #1d1d1b
}

.tags>li a:hover {
	background: #1d1d1b
}

.article-social-share .social-share-icon ul li a {
	color: #1d1d1b
}

.article-social-share .social-share-icon ul li a:hover,
.article-social-share .social-share-icon ul li a:focus {
	background: #1d1d1b
}

.pager>li a {
	border: 1px solid #ededed;
	color: #1d1d1b
}

.sp-reading-progress-bar {
	background-color: #1d1d1b
}

.sp-megamenu-parent>li>a {
	color: #1d1d1b
}

.sp-megamenu-parent>li:hover>a {
	color: #1d1d1b
}

.sp-megamenu-parent>li.active>a,
.sp-megamenu-parent>li.active:hover>a {
	color: #1d1d1b
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
	background: #ffffff
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a {
	color: #252525
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a:hover {
	color: #1d1d1b
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active>a {
	color: #1d1d1b
}

.sp-megamenu-parent .sp-mega-group>li>a {
	color: #252525
}

#offcanvas-toggler>.fa {
	color: #1d1d1b
}

#offcanvas-toggler>.fa:hover,
#offcanvas-toggler>.fa:focus,
#offcanvas-toggler>.fa:active {
	color: #1d1d1b
}

#offcanvas-toggler>.fas {
	color: #1d1d1b
}

#offcanvas-toggler>.fas:hover,
#offcanvas-toggler>.fas:focus,
#offcanvas-toggler>.fas:active {
	color: #1d1d1b
}

#offcanvas-toggler>.far {
	color: #1d1d1b
}

#offcanvas-toggler>.far:hover,
#offcanvas-toggler>.far:focus,
#offcanvas-toggler>.far:active {
	color: #1d1d1b
}

.offcanvas-menu {
	background-color: #ffffff;
	color: #252525
}

.offcanvas-menu .offcanvas-inner a {
	color: #252525
}

.offcanvas-menu .offcanvas-inner a:hover,
.offcanvas-menu .offcanvas-inner a:focus,
.offcanvas-menu .offcanvas-inner a:active {
	color: #1d1d1b
}

.offcanvas-menu .offcanvas-inner ul.menu>li a,
.offcanvas-menu .offcanvas-inner ul.menu>li span {
	color: #252525
}

.offcanvas-menu .offcanvas-inner ul.menu>li a:hover,
.offcanvas-menu .offcanvas-inner ul.menu>li a:focus,
.offcanvas-menu .offcanvas-inner ul.menu>li span:hover,
.offcanvas-menu .offcanvas-inner ul.menu>li span:focus {
	color: #1d1d1b
}

.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>a>.menu-toggler,
.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>.menu-separator>.menu-toggler {
	color: rgba(37, 37, 37, 0.5)
}

.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent .menu-toggler {
	color: rgba(37, 37, 37, 0.5)
}

.offcanvas-menu .offcanvas-inner ul.menu>li li a {
	color: rgba(37, 37, 37, 0.8)
}

.btn-primary,
.sppb-btn-primary {
	border-color: #1d1d1b;
	background-color: #1d1d1b
}

.btn-primary:hover,
.sppb-btn-primary:hover {
	border-color: #1d1d1b;
	background-color: #1d1d1b
}

ul.social-icons>li a:hover {
	color: #1d1d1b
}

.sp-page-title {
	background: #1d1d1b
}

.layout-boxed .body-innerwrapper {
	background: #ffffff
}

.sp-module ul>li>a {
	color: #1d1d1b
}

.sp-module ul>li>a:hover {
	color: #1d1d1b
}

.sp-module .latestnews>div>a {
	color: #1d1d1b
}

.sp-module .latestnews>div>a:hover {
	color: #1d1d1b
}

.sp-module .tagscloud .tag-name:hover {
	background: #1d1d1b
}

.search .btn-toolbar button {
	background: #1d1d1b
}

#sp-footer,
#sp-bottom {
	background: #ffffff;
	color: var(--color-primary-1);
}

#sp-footer a,
#sp-bottom a {
	color: var(--color-primary-1);
}

#sp-footer a:hover,
#sp-footer a:active,
#sp-footer a:focus,
#sp-bottom a:hover,
#sp-bottom a:active,
#sp-bottom a:focus {
	color: var(--color-primary-1);
}

#sp-bottom .sp-module-content .latestnews>li>a>span {
	color: #ffffff
}

.sp-comingsoon body {
	background-color: #1d1d1b
}

.pagination>li>a,
.pagination>li>span {
	color: #1d1d1b
}

.pagination>li>a:hover,
.pagination>li>a:focus,
.pagination>li>span:hover,
.pagination>li>span:focus {
	color: #1d1d1b
}

.pagination>.active>a,
.pagination>.active>span {
	border-color: #1d1d1b;
	background-color: #1d1d1b
}

.pagination>.active>a:hover,
.pagination>.active>a:focus,
.pagination>.active>span:hover,
.pagination>.active>span:focus {
	border-color: #1d1d1b;
	background-color: #1d1d1b
}

.error-code,
.coming-soon-number {
	color: #1d1d1b
}



/* ---------------------------------------- 
            Diverses classes
   ---------------------------------------- */

body {
  font-family: 'body-regular';
  color: var(--color-primary-1);
}

h1, h2, h3, h4, h5 {
  font-family: 'title-regular';
  color: var(--color-primary-1);
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}


/* Icônes sociales Top */
ul.social-icons > li:not(:last-child)
{
  margin-right: 10px;
}


/* liens */
.menu,
.sp-megamenu-parent {
  text-transform: uppercase;
}

a, a:focus, a:active, a:hover,
.sp-megamenu-parent > li:hover > a,
.menu > li:hover > a {
  color: var(--color-primary-1);
  text-shadow: none;
}

#sp-header-topbar a,
.social-icons ul > li > a {
  color: var(--color-primary-3) !important;
  text-shadow: none;  
}

a:not([id^="btn-"]):focus, a:not([id^="btn-"]):active, a:not([id^="btn-"]):hover,
#sp-header-topbar a:hover,
.social-icons ul > li > a:hover,
.sp-megamenu-parent > li.active > a,
.menu > li.active > a {
  color: var(--color-primary-1) !important;
  text-shadow: none;  
}

a:focus, a:active, a:hover,
#sp-header-topbar a:hover,
.social-icons ul > li > a:hover,
.sp-megamenu-parent > li.active > a,
.menu > li.active > a {
  font-weight: bold;
}


/* Boutons */
.dubied-btn {
  text-transform: uppercase;
}


/* Overlay des photos */
.sppb-addon-image-overlay {
  background-color: rgba(166, 30, 30, 0.25) !important;
  border-radius: 0px !important;
}


.center-text {
  text-align: center;
}


.follow-us-space-between > .sppb-column-addons {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

/* ---------------------------------------- 
                Entête
   ---------------------------------------- */

#sp-header-topbar .container-inner {
  border-bottom: 0px;
  display: flex;
  flex-direction: column;
}

#sp-header.lg-header {
  border-top: 1px solid var(--color-primary-4);
  border-bottom: 1px solid var(--color-primary-4);
  box-shadow: none !important;
}

#sp-main-body {
  padding: 50px 0;
}


/* ---------------------------------------- 
                Menu burger
   ---------------------------------------- */
/* Menu burger caché pour toutes les résolutions supérieures à col-sm (>= 576) */
@media screen and (min-width: 576px) {
    .sp-megamenu-parent {
        display: flex !important;
    }
    #offcanvas-toggler {
        display: none !important;
    }
}
/* Menu burger affiché pour toutes les résolutions inférieures à col-sm (>= 576) */
@media screen and (max-width: 576px) {
    .sp-megamenu-parent {
        display: none !important;
    }
    #offcanvas-toggler {
        display: flex !important;
    }
}

/* Taille du menu burger */
@media (max-width: 575px) {
	#offcanvas-toggler
  {
	  height: 50px;
	  line-height: 50px;
	}
}



/* ---------------------------------------- 
               Page "Accueil"
   ---------------------------------------- */

/* Menu H1 avec ligne */
.dubied-title-line > h1 {
  font-weight: bold;
  text-align: left;
  display: inherit;
  overflow:hidden;
}
.dubied-title-line > h1:after {
  content:'';
  display:inline-block;
  width:100%; height:100%;
  margin-right:-100%;
  border-bottom:3px solid #000;
  margin-left: 10px;
}

/* Articles feed */
.dubied-articlesfeed h1,
.dubied-articlesfeed h2 {
  margin: 0;
}

.dubied-articlesfeed h1 {
  margin: 0.5em 0 0 0;
}

.dubied-articlesfeed-latest-article {
  margin-bottom: 1rem;
}

.dubied-articlesfeed-date,
.dubied-articlesfeed-latest-article-date {
  font-size: 0.8em;
  color: var(--color-light1);
}

.dubied-articlesfeed-article1,
.dubied-articlesfeed-article2,
.dubied-articlesfeed-article3 {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-light1);
}



/* ---------------------------------------- 
                Pages "Articles"
   ---------------------------------------- */
/* Articles */
.article-header h1 {
  margin-top: 0px;
}

.article-info {
  display: flex;
  flex-direction: column;
}

.article-info > span.category-name::before {
  display: block;
  content: "Catégorie";
  color: var(--color-light1);
}

.article-info > span.create::before {
  display: block;
  content: "Posté le";
  color: var(--color-light1);
  margin-top: 10px;
}

.article-info > span+span::before {
  display: inline-block;
  padding: 0px;
  content: "";
}

.article-body .sppb-row-container {
  padding: 0px;
}

/* Lettrine */
.article-body .sppb-addon-content:first-child p:nth-child(1)::first-letter {
    color: var(--color-light1);
    float: left;
    font-size: 80px;
    font-weight: 700;
    line-height: .75;
    margin: 6px 12px 0 -6px;
}


/* Carousel d'articles, bas de la page */
.sppb-addon-articles .sppb-row > div {
  margin: 5px 5px 5px 5px;
  padding: 0px;
  border: 1px solid var(--color-light1);
}

.sppb-addon-articles .sppb-article-info-wrap {
  padding: 10px;
}

@media (min-width: 575px) { .sppb-addon-articles .sppb-row .sppb-col-xs-6 { flex: 0 0 45%; max-width: 45%; } }
@media (min-width: 992px) { .sppb-addon-articles .sppb-row .sppb-col-md-3 { flex: 0 0 25%; max-width: 23%; } }



/* ---------------------------------------- 
        Page "Actualités > Timeline"
   ---------------------------------------- */
.dubied-timeline h1,
.dubied-timeline h2 {
  margin: 0;
}

.dubied-timeline h1 {
  margin: 0.5em 0 0 0;
}

.dubied-timeline-date {
  font-size: 0.8em;
  color: var(--color-light1);
}

.timeline {

  --spacing: 50px;
  --spacing-timeline: 50px;
  /* --radius: 4px; */
	 
  --date: 60px;
  --dotborder: 4px;
  --dot: 11px;
  --line: 4px;

  --size-number: 20px;

  border-left: var(--line) solid var(--color-primary-1);
  margin: 0 auto;  
  padding: 0px;
  padding-left: var(--spacing-timeline);
  list-style: none;
  max-width: 80%;
}


  
.timeline .event {
    margin-bottom: var(--spacing);  
    position: relative;
}

.timeline .event:last-of-type { 
      padding-bottom: 0;
      margin-bottom: 0; 
      border: none;      
}

.timeline .event:before,
.timeline .event:after {
      position: absolute;
      display: block;
      top: 0;
}

/* incrément à gauche de la timeline */
.timeline .event:before {
      left: calc((((var(--date) * 0.6) + calc(var(--spacing-timeline)*0.6) + var(--line) + var(--dot) + (var(--dotborder) * 2)) * 1.5) * -1);
      color: var(--color-primary-1);    
      font-family: 'chiffres-heures';
      content: attr(data-date);
      text-align: right;
      font-weight: 100;    
      font-size: var(--size-number);
      min-width: var(--date);
      top: calc(50% - var(--dot)/2 - calc(var(--size-number)/2));
}

/* puce */
.timeline .event:after {
      left: calc((var(--spacing-timeline) + var(--line) + (var(--dot) * 0.35)) * -1);
      box-shadow: 0 0 0 var(--dotborder) var(--color-primary-1);
      background: var(--color-primary-1);
      border-radius: 50%;  
      height: var(--dot);
      width: var(--dot);
      content: "";
      top: calc(50% - var(--dot)/2);
}


/* ---------------------------------------- 
        Page "Nos partenaires"
   ---------------------------------------- */
.nos-partenaires .sppb-addon-accordion .sppb-panel-title {
    color: grey;
    font-weight: normal;
}


/* ---------------------------------------- 
            Corps de la page
   ---------------------------------------- */

/* #sp-main-body [id^="section-id-"] {
  padding: 20px 0px !important;
} */


/* ---------------------------------------- 
                Pied de page
   ---------------------------------------- */

#sp-footer {
  border-top: 10px solid var(--color-primary-1);
}

#copyright {
  color: var(--color-primary-4);
}



