:root {
  --outset-color: #a9b;
}

body {
    font-family: serif;/* police */
    background: #daf;/* couleur de fond */
}

h1 {
    text-align: center;
    font-size: 200%;/* taille du titre principal */
}

h2 {
    text-align: left;
    font-size: 130%;/* taille des titres de listes de méditations */
}

table {
    margin: 20px auto;
    border: thin solid black;/* bordure des tableaux */
    border-collapse: collapse;
}
th {/* en-têtes des tableaux */
    background: #a42;/* couleur de fond */
    border: medium solid black;/* bordure */
    padding: 5px 10px;
}
td {/* cases des tableaux */
    background: #fff;/* couleur de fond */
    border: thin solid black;/* bordure */
    padding: 5px 10px;/* espacements verticaux et horizontaux */
}

a:link {
    color: #448;/* couleur des liens non visités */
}
a:visited {
    color: #111;/* couleur des liens visités */
}

.retour {
    text-align: right;
}

/**********************/
/* paragraphes divers */
/**********************/

#livre-ouvert {
    width:20%;
}
/* menu principal d'accueil du site */
#menu-principal {
    margin: auto;
}
#menu-principal ul {
    font-size: 1.5em;
    text-align: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

}
#menu-principal ul li {
    display: inline-block;
    flex: 1 1 40%;
}
#menu-principal ul li a {
    display: inline-block;
    margin: 0.5em;
    padding: 0.3em;
    border: outset 3px var(--outset-color);
    background: #dcf;
    width: 17em;
}
#menu-principal li#link-quoideneuf {
    flex: 1 1 70%;
}
.index li {
    margin: 0.8em 0 0.8em 0;
}

#download_all {
    text-align: center;
    margin: auto;
}
#download_all button {
    font-size: 1.5em;
    background: #dcf;
    font-weight: bold;
    padding: 3px;
}
#download_all button img{
    height: 48px;
    vertical-align: middle;
    padding: 3px;
}
/* Quoi de neuf? */
.qdn li {
    padding: 5px 0px;
} 
.qdn-date {
    font-weight: bold;
    font-size: 1.2em;
}


/********************/
/* listes d'onglets */
/********************/

.notebook-tab {
    font-family: Sans-Serif;
    list-style-type : none;
    font-size: 1.5em;
    border-bottom : 2px outset #9EA0A1;
    display: flex;
    /*margin-left : 0;*/
}
.notebook-tab li
{
    flex: 0 1 23%;
    /*height : 1.5em; à modifier suivant la taille de la police pour centrer le texte dans l'onglet */
    text-align: center;
    margin-left: 1%;
    background-color: #dba;
    border : 3px outset #9EA0A1;
    border-bottom: 0px;
    padding-bottom: 3px;
}
.notebook-tab a
{
    display : block;
    color : #888;
    text-decoration : none;
    padding : 4px;
}
.notebook-tab a:hover
{
    background-color : #ecb;
}
.notebook-tab li.active
{
    border : 2px inset #9EA0A1;
    border-bottom: 3px solid #daa;
    background-color: #dba;
    padding-bottom: 5px;
    margin-bottom: -2px;
}
.notebook-tab li.active a
{
    color: #000;
}


/**************************************/
/* les styles des listes de lectures */
/**************************************/

#index-lectures ul li {
    list-style-type: none;
    padding-bottom: 8px;
}
#index-lectures ul li .auteur-lecture::before {
    content: '▼';
    transition: 0.3s;
    padding-right: 20px;
}
#index-lectures ul li.repliee .auteur-lecture::before {
    content: '▲';
    transition: 0.3s;
    padding-right: 20px;
}

.auteur-lecture {
    cursor: pointer;
    font-size: 1.1em;
}

#index-lectures ul li ul {
    padding-top: 4px;
    display: block;
    transition: 0.3s;
    border-left: solid 1px #303 ;
    /*border-bottom: solid 2px #303;*/
    margin-left: 6px;
    list-style-type: none;
    padding: 0;
}
#index-lectures ul li ul::after {
    content: '';
    display: block;
    position: relative;
    top: 0;
    left: 0;
    width: 50%;
    padding: 0px;
    margin: 0px;
    border-bottom: 2px solid #303;
}
#index-lectures ul li.repliee ul {
    display: none;
    transition: 0.3s;
}

#index-lectures ul li ul li {
    margin-left: 20pt;
    margin-bottom: 8px;
    margin-top: 8px;
    list-style-type: square;
}

/**************************************/
/* les styles des blocs de méditation */
/**************************************/

/* méditation dépliées */

.meditation {
    clear: both;
    width: 98%;
    border: outset 4px var(--outset-color);
    background: #ebf;
    margin: 1%;
    padding: 1px;
}
.meditation:after {
    content: '';
    display: block;
    clear: both;
}

.meditation .fichier_meditation {
    display: flex;
    transition: 0.3s;
}

.meditation .sujet_meditation:before {
    content: '▲';
    transition: 0.3s;
    padding-right: 20px;
}

/* meditations repliées */

.meditation.repliee .fichier_meditation {
    display: none;
    transition: 0.3s;
}

.meditation.repliee .sujet_meditation:before {
    content: '▼';
    transition: 0.3s;
    padding-right: 20px;
}

.sujet_meditation {
    font-size: 160%;
    font-weight: bold;
    color: #200;
}
.fichier_meditation {
    clear:both;
    display: flex;
    padding: 3px;
}
.details_meditation {
    order: 0;
    flex: 0 1 auto;
    max-width: 60%;
}
.duree_meditation {
}
.duree_meditation:before {
    content: '(';
}
.duree_meditation:after {
    content: ')';
}
.auteur_meditation {
    font-style: italic;
}
.lieu_meditation {
}
.date_meditation {
}
.details_meditation img {
    height: 48px;
    vertical-align: middle;
}
.fichier_meditation audio {
    vertical-align: middle;
    height: 48px;
}
.taille_meditation {
    display: inline-block;
    /*width:6em;*/
    text-align: right;
}
.telecharger_meditation {
    order: 2;
    flex: 0 1 auto;
    max-width: 25%;
}
.telecharger_meditation img {
    height: 48px;
    vertical-align: middle;
}
.pointille_meditation {
    order: 1;
    flex: 1 1 auto;
    border: none;
    border-bottom: dotted 1px #333;
}

/**************************************/
/* les styles des blocs de lectures */
/**************************************/

/* lectures dépliées */

.lecture {
    clear: both;
    width: 98%;
    border: outset 4px var(--outset-color);
    background: #ecf;
    margin: 1%;
    padding: 1px;
}
.lecture:after {
    content: '';
    display: block;
    clear: both;
}

.lecture .fichier_lecture {
    display: flex;
    transition: 0.3s;
}

.lecture .sujet_lecture:before {
    content: '▲';
    transition: 0.3s;
    padding-right: 20px;
}

/* lectures repliées */

.lecture.repliee .fichier_lecture {
    display: none;
    transition: 0.3s;
}

.lecture.repliee .sujet_lecture:before {
    content: '▼';
    transition: 0.3s;
}

.sujet_lecture {
    font-size: 160%;
    font-weight: bold;
    color: #200;
}
.fichier_lecture {
    clear:both;
    display: flex;
    padding: 3px;
}
.details_lecture {
    order: 0;
    flex: 0 1 auto;
    max-width: 60%;
}
.duree_lecture {
}
.duree_lecture:before {
    content: '(';
}
.duree_lecture:after {
    content: ')';
}
.titre_lecture {
    font-weight: bold;
}
.details_lecture img {
    height: 48px;
    vertical-align: middle;
}
.taille_lecture {
    display: inline-block;
    /*width:6em;*/
    text-align: right;
}
.telecharger_lecture {
    order: 2;
    flex: 0 1 auto;
    max-width: 25%;
}
.telecharger_lecture img {
    height: 48px;
    vertical-align: middle;
}
.fichier_lecture audio {
    vertical-align: middle;
    height: 48px;
    display:block;
}
.pointille_lecture {
    order: 1;
    flex: 1 1 auto;
    border: none;
    border-bottom: dotted 1px #333;
}