/*
Theme Name: CSSCC - Child
Description: Theme custom pour CSSCC - Child
Author: Bourrasque
Author URI: http://bourrasque.ca/
Template: CSSCC
Version: 0.1.0
*/

:root { 
  --main-green: #8c9c3c;
}

/* *************** EHDAA ****************** */
.ehdaa-container {display: flex; flex-direction: row;}
.ehdaa-container>* {padding-top: 80px; padding-bottom: 80px;}
.ehdaa-sidebar {background-color: var(--main-dark-blue); width: min(290px, 30%);  flex: 1 0 auto;}
.ehdaa-sidebar a {color: #fff; font-size: 0.9em;}
.ehdaa-content {flex: 1 1 auto; padding-left: min(45px, 5%);}
.ehdaa-list-tax {position: sticky; top: 0; height: 100vh; overflow-y: auto; padding-left: min(25px, 5%); padding-right: min(25px, 5%); }
.ehdaa-list-tax a.active {transform: translateX(10px); color: var(--main-light-blue); }
.ehdaa-list-tax a.active, .ehdaa-list-tax a:hover {width: calc(100% - 10px);}
#ehdaa-sidebar-mobile-btn {display: none; color: #fff; background-color: var(--main-dark-blue); position: fixed; top: 50vh; transform: translateY(-50%); padding: 10px 3px; opacity: 0; visibility: hidden; transition: all 0.35s;}
#ehdaa-sidebar-mobile-btn.active {transform: translate(290px ,-50%);}

.ehdaa-tax-bloc h2 {color: var(--main-dark-blue); margin-bottom: 25px;}
.ehdaa-tax-desc {margin-bottom: 30px;}
.ehdaa-bloc {display: flex; flex-direction: row;}
.ehdaa-bloc {margin-bottom: 40px;}
.ehdaa-bloc-img {width: min(215px, 30%); flex: 0 0 auto; padding-right: 25px;}
.ehdaa-bloc-img img {width: 100%; object-fit: contain;}
.ehdaa-bloc h4 {color: var(--main-light-blue); font-size: 1.4em; margin-bottom: 15px;}
.ehdaa-auteur {font-style: italic; color: var(--main-grey); font-size: 1.1em; margin-bottom: 10px;}
.ehdaa-auteur i {color: var(--main-light-blue); font-style: normal; margin-right: 6px; padding-bottom: 2px;}
.ehdaa-text {line-height: 1.7em;}

.ehdaa-link {margin-top: 15px;}
.ehdaa-link a { transition: all 0.35s; display: inline-block; font-weight: bold; color: var(--main-light-blue);}
.ehdaa-link a:hover {transform: translateX(10px); }

/* ************* carriere ********************** */
.header-single-carriere {text-align: center;}


/* **************** balado ************************ */
.balado-home-hover img {}

.title-balado {text-shadow: 0 0 80px rgba(0,0,0,0.4), 0 0 90px rgba(0,0,0,0.4), 0 0 70px rgba(0,0,0,0.5), 0 0 60px rgba(0,0,0,0.2), 0 0 50px rgba(0,0,0,0.4), 0 0 40px rgba(0,0,0,0.6) , 0 0 20px rgba(0,0,0,0.7) , 0 0 10px rgba(0,0,0,0.8);}
.balado-short-wrapper:not(:last-child) {margin-bottom: 65px;}
.balado-short {display: flex; flex-direction: row; background: rgb(0,0,0); background: linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(40,41,41,1) 100%); border-radius: 30px; align-items: center; font-size: 1.2em;}
.balado-short-img {width: min(620px, 35%); margin: 15px;}
.balado-short-content {width: 65%; flex: 1 1 auto; padding-left: 4%; padding-right: 6%; padding-top: 15px; padding-bottom: 15px;}


.balado-short-content h4 {color: var(--main-green);}
.balado-short-content {color: #fff; line-height: 1.3em;}
.balado-short-time {color: var(--main-green); font-weight: bold; margin-top: 15px; }
.balado-short-date {margin: 15px 0; display: flex; flex-direction: row; align-items: center; font-weight: bold;}
.balado-short-date:before {content: ""; display: inline-block; width: 34px; height: 34px; background-image:url('images/audio-player/icon-calendar.png'); background-size: 100% 100%; margin-right: 10px;}


/*.player-audio-wrapper {width: 94%; padding: 40px 25px 30px 25px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; background: rgb(0,0,0); background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(40,41,41,1) 100%); border-radius: 0 0px 30px 30px; margin-left: 3%; margin-right: 3%;}

.player-audio-wrapper #controls {flex: 1 1 350px; width: 350px; display: flex; flex-direction: row; align-items:center; }
.audio-data {flex: 1 1 67%; margin: 0 0 0 5%;}
.audio-actions {flex: 1 1 200px; width: 200px; display: flex; flex-direction: column; font-size: 0.85em;}
.audio-volume {width: 4%; flex: 1 1 auto; margin: 0 30px; align-self: flex-end; margin-bottom: 15px;}
.audio-actions>*:not(:last-child) {margin-bottom: 10px;}

.player-audio-wrapper button {background: none; background-color: unset!important; border: none; border-radius: none!important;; padding: 0!important; justify-content: space-between;}
.audio-main-action {flex: 1 1 auto; display: flex; justify-content: center;}

#skipBackwardBtn, #skipForwardBtn {width: 45px; height: 45px; background-size: 100% 100%; background-repeat: no-repeat; flex: 0 0 auto; cursor: pointer;}
#skipBackwardBtn {background-image:url('images/audio-player/icon-back-10.webp');}
#skipForwardBtn {background-image:url('images/audio-player/icon-fast-10.webp');}
.play-wrapper {width: 27px; height: 33px; background-image:url('images/audio-player/icon-play.webp'); background-size: 100% 100%; background-repeat: no-repeat;  cursor: pointer; margin-left: 3px; margin-right: -3px;}
.pause-wrapper {width: 27px; height: 33px; background-image:url('images/audio-player/icon-pause.webp'); background-size: 100% 100%; background-repeat: no-repeat; cursor: pointer; }
.audio-main-action #play, .audio-main-action #pause {padding: 16px 21px!important; border-radius: 50%!important; border: 4px solid var(--main-green); display: none; cursor: pointer;}



.audio-range {display: flex; flex-direction: column;}
.audio-timedata {display: flex; justify-content: space-between; color: #fff; font-weight: bold;}
.audio-title {font-weight: bold; font-size: 1.4em; color: var(--main-green); margin-bottom: 20px;}

input[type="range"] { position: relative; -webkit-appearance: none; width: 100%; margin: 0; padding: 0; height: 20px; margin: 20px 0 20px 0; float: left;  outline: none;}

input[type="range"]::-webkit-slider-runnable-track { width: 100%; left: -2.5%; cursor: pointer;
    background: linear-gradient(to right, rgba(140, 156, 60, 0.6) var(--buffered-width), rgba(140, 156, 60, 0.2) var(--buffered-width));}
input[type="range"]::before { position: absolute; content: ""; top: 8px; left: 0; width: var(--seek-before-width); height: 20px;background-color: #000000;  cursor: pointer;}
input[type="range"]::-webkit-slider-thumb { position: relative; -webkit-appearance: none; box-sizing: content-box; background-color: var(--main-green);
    height: 20px;  width: 20px; border-radius: 50%; cursor: pointer; margin: 0 0 0 0; box-shadow: 0 0 0px 10px var(--main-green), 0 0 0px 11px rgba(0,0,0,0.3);}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.2);}

input[type="range"]::-moz-range-track { width: 100%; cursor: pointer;
    background: linear-gradient(to right, rgba(140, 156, 60, 0.6) var(--buffered-width), rgba(140, 156, 60, 0.2) var(--buffered-width));}
input[type="range"]::-moz-range-progress { background-color: #000000;}
input[type="range"]::-moz-focus-outer { border: 0;}
input[type="range"]::-moz-range-thumb { box-sizing: content-box;  height: 20px; width: 20px; border-radius: 50%; background-color: var(--main-green); cursor: pointer; box-shadow: 0 0 0px 10px var(--main-green), 0 0 0px 11px rgba(0,0,0,0.3);}
input[type="range"]:active::-moz-range-thumb { transform: scale(1.2);}

input[type="range"]::-ms-track { width: 100%; cursor: pointer; background: transparent; border: solid transparent; color: transparent;}
input[type="range"]::-ms-fill-lower { background-color: #000000;}
input[type="range"]::-ms-fill-upper { background: linear-gradient(to right, rgba(140, 156, 60, 0.6) var(--buffered-width), rgba(140, 156, 60, 0.2) var(--buffered-width));}
input[type="range"]::-ms-thumb { box-sizing: content-box; height: 20px; width: 20px; border-radius: 50%;  background-color: var(--main-green); cursor: pointer; box-shadow: 0 0 0px 10px var(--main-green), 0 0 0px 11px rgba(0,0,0,0.3);}
input[type="range"]:active::-ms-thumb { transform: scale(1.2); }

.audio-actions .audio-dl, .audio-actions .audio-share {display: flex; flex-direction: row; align-items: center; color: var(--main-green); font-weight: bold; font-size: 1.2em; position: relative; cursor: pointer;}
.audio-actions .audio-dl:before {content: ""; display: inline-block; width: 27px; height: 32px; background-image:url('images/audio-player/icon-dl.png'); background-size: 100% 100%; margin-right: 10px;}
.audio-actions .audio-share:before {content: ""; display: inline-block; width: 27px; height: 32px; background-image:url('images/audio-player/icon-share.png'); background-size: 100% 100%; margin-right: 10px;}
.audio-share-list {display: none; position: absolute; background-color: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.6); top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 210px; text-align: center; border-radius: 2px; padding: 2px; z-index: 2;}
.audio-dl span {display: block; font-size: 0.75em; font-weight: 400; text-align: center;}
.player-audio-wrapper .copy-link-btn {cursor: pointer; padding: 4px 8px!important; border-radius: 3px!important; background-color: var(--main-green)!important; display: inline-block; margin-top: 3px;}
.copy-link-btn:hover {opacity: 0.7;}*/


/* volume */
/*.audio-volume {position: relative;}
.volume-btn {width: 31px; height: 33px; background-image:url('images/audio-player/icon-volume.png'); background-size: 100% 100%; background-repeat: no-repeat; cursor: pointer;}

.volume-controls {display: block; position: absolute; bottom: calc(100% + 40px); left: 50%; transform: translateX(-55%) rotate(-90deg); transform-origin: center; }
.volume-controls.hidden {display: none;}
#volume-slider { width: 75px; height: 10px; border: 1px solid rgba(0,0,0,0.8); margin: 5px 0;}

#volume-slider::-webkit-slider-runnable-track {height: 10px; background-color: #8c9c3c; background: linear-gradient(to right, #8c9c3c var(--buffered-width), #ccc var(--buffered-width)); }
#volume-slider::-moz-range-track {height: 10px; background: linear-gradient(to right, #8c9c3c var(--buffered-width), #ccc var(--buffered-width));}
#volume-slider::-ms-fill-upper {height: 10px; background: linear-gradient(to right, #8c9c3c var(--buffered-width), #ccc var(--buffered-width));}
#volume-slider::before { width: var(--volume-before-width);}
input[type="range"]::-webkit-slider-thumb { position: relative; -webkit-appearance: none; box-sizing: content-box; background-color: var(--main-green); height: 10px;  width: 10px; border-radius: 50%; cursor: pointer; margin: 0 0 0 0; box-shadow: 0 0 0px 10px var(--main-green), 0 0 0px 11px rgba(0,0,0,0.3);}
input[type="range"]::-moz-range-thumb { box-sizing: content-box;  height: 10px; width: 10px; border-radius: 50%; background-color: var(--main-green); cursor: pointer; box-shadow: 0 0 0px 10px var(--main-green), 0 0 0px 11px rgba(0,0,0,0.3);}
input[type="range"]::-ms-thumb { box-sizing: content-box; height: 10px; width: 10px; border-radius: 50%;  background-color: var(--main-green); cursor: pointer; box-shadow: 0 0 0px 10px var(--main-green), 0 0 0px 11px rgba(0,0,0,0.3);}*/



@media screen and (max-width: 1450px) {

    .balado-short {font-size: 1em;}
}

@media screen and (max-width: 767px) {
  .balado-header {background-position: 25% 100%;}

  .balado-short {flex-direction: column; z-index: 1; position: relative;}
  .balado-short-content {width: 100%; padding-left: 6%; z-index: 1;}
  .balado-short-img {width: 100%; margin: 20px 6%; text-align: center;}
  .balado-short-time {margin-bottom: 20px;}

  .player-audio-wrapper {flex-wrap: wrap; justify-content: center; margin-top: -20px; padding-top: 40px; position: relative; z-index: 0;}
  .player-audio-wrapper #controls {order: 2; width: 90%; flex: 1 1 90%; max-width: 350px; margin-bottom: 20px; justify-content: center; }
  .audio-data {order: 1; width: 100%; flex: 1 1 100%;}
  .audio-volume {order: 3; width: 100%; flex: 0 1 100%; align-self: center; display: flex; flex-direction: row; justify-content: center; align-items: center;}
  .audio-actions {order: 4; width: 100%; flex: 1 1 100%; flex-direction: row; justify-content: center; text-align: center; align-items: center; gap: 30px;}
  .volume-controls {position: static; transform: unset; display: block!important; margin-left: 20px; }
  #volume-slider {width: 140px;}

  .audio-main-action {flex: 0 1 auto; margin: 0 10px 0 10px;}
}

@media screen and (max-width: 400px) {

}