* {
    --bandeau: white;
    --titres_bordures: rgb(134, 76, 14);
    --background: rgba(253, 145, 5, 0.83);
    --background_menu: rgba(40, 160, 155, 0.83);
    --hauteur-menu: 5px;
}
body{
    overflow-y: hidden;
}
header {
	display: flex;
    flex-direction: column;
	margin : 0px auto;
	background-color:var(--background);
	border-color: var(--titres_bordures);
}
.titre {
    color: var(--bandeau);
    margin: 0 auto;
    position: relative;
    top: -15%;
}

.frise_historique {
    display: grid;
    grid-template-columns: 2.5fr 2fr 3fr 1fr 2fr 1fr 1.5fr;
    grid-template-rows: 20px;
    color: var(--bandeau);
    width: 82%;
    margin: 0 auto;
    position: relative;
    top: -2%;
}
.repere_oeuvre {
    width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 15px solid var(--background_menu);
    position:relative;
    top: 5px;
    z-index:2;
}
.date_oeuvre {
    position: relative;
    border: 1px solid var(--bandeau);
    width: 40px;
    top: -15px;
    left: -12px;
    text-align: center;
    color: var(--bandeau);
    background-color: var(--background_menu);
}
.couleur {
width:auto;
height:140%;
position: relative;
top: 120%;
}
.ligne_frise {
    position: relative;
    top: 100%;
    border-bottom: 2px solid var(--bandeau);
}
.date {
    position: relative;
    top: 20%;
    left: -15px;
    
}
.periode {
    display: flex;
    align-items: center;
    border-left: solid 2px var(--bandeau);
    height: 140%;
    position: relative;
    top: 120%;
    list-style-type: none;    
}
/* .fleche::after {
    content: '>';
    font-style: normal;
    font-size: 2rem;
} */
.nav_nom_periode div, .nav_nom_periode a {
    padding-left: 5px;;
}
.nav_nom_periode li {
    background-color: var(--background_menu);
    position: relative;
    top: 5px;
}
.nav_nom_titre {
    
    width: 150% ;
    text-align: left;
    max-height: 0;
    border-color: #0D5A90;
    border: 0 2px 2px 12px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    z-index:100;
  }
  .nav_nom_titre a {
      text-decoration: none;
      color: var(--bandeau);
      
  }
  .nav_nom_titre li {
      padding: var(--hauteur-menu) 0;
  }
  .nav_nom_titre a:hover {
      background: #000;
      color:var(--bandeau);
  }
.periode li ul {
        display: none;
}
.periode:hover li ul {
        display: block;
 }

.nav_nom_titre:hover li {
    background-color: var(--background_menu);
}
.case_moment_musical {
	margin:0px 5px;
	text-decoration: none;
	font-size: 1.5em;
	color:white;
	border : 1px solid #2C690A;
	background-color: var(--background_menu) ;
	padding: 2px 4px 2px 4px;
	border-radius: 4px;
	text-align: center;
    position: relative;
    top: 10px;
}
.case_moment_musical:hover:after, .case_moment_musical:focus:after {
	content: attr(aria-label);  /* on affiche aria-label (le titre) */
	position: absolute;
	top: 3em;
	left: 50%;
	transform: translateX(-50%); /* on centre horizontalement  */
	z-index: 1; /* pour s'afficher au dessus des éléments en position relative */
	white-space: pre;  /* permet le retour à la ligne si dans le texte on insère "\n"*/
	padding: 5px 14px;
	background: rgba(40, 160, 154, 0.829);
	border: solid 1px rgb(27, 110, 106);
	border-radius: 4px;
	font-size: 1rem;
	z-index: 20;
}
.case_moment_musical[aria-label]:hover:before, .case_moment_musical[aria-label]:focus:before {
	content: "▼";
	position: absolute;
	top: -1.2em;
	left: 50%;
	transform: translateX(-50%); /* on centre horizontalement  */
	font-size: 12px;
	color: #fff;
}

article {
    border: solid 4px var(--titres_bordures);
    border-radius: 20px;
    margin: 30px auto 0;
    padding:0;
}
article p {
margin: 15px 20px;
}
h3 {
    padding: 0px 15px;
}
.index li {
    list-style-type: circle;
    padding: 0;
    margin: 0 10%;
}
.duree {
    position: relative;
    top: 2px;
    /* background: var(--background_menu); */
    border: solid 2px rgb(27, 110, 106);
    color: rgb(27, 110, 106);
    border-radius: 4px;
    font-style: normal;
    margin-left: 2px;
    font-size: 16px;
    text-indent: 0;
}
.icone_lecteur {
    display: inline-block;
    vertical-align: middle;
    height: 1.5rem;
    border: 0!important;
}
.moment_musical span.duree {
    border: 0px;
}
.couplet {
    /*background: rgba(253, 146, 5, 0.281);*/
    border-bottom: solid 3px var(--background);
    border-top: solid 3px var(--background);
    color: var(--titres_bordures);
    text-align: left;
    max-width: 102px;
    border-radius: 15px;
    padding: 0 5px;
    margin-top: 10px;
    margin-left: -10px;
}
.moment_musical .pasapas {
    text-align: left;
    margin-left: 50px;
}
.moment_musical .pasapas a:first-child{
    color: var(--titres_bordures);
}
.moment_musical .pasapas a:nth-child(2){
    color: rgb(27, 110, 106);
} 
.float {
    display: flex;
    flex-direction: column;
    float: right;
    align-items: center;
}
.float *{
    border: 0;
}
article img {
    border: 2px solid var(--titres_bordures);
    margin : 0 5px;
}

.legende {
    writing-mode: vertical-lr;
    font-style: italic;
    text-decoration: none;
    font-weight: normal;
    text-align: center;
    font-size: 1rem;
}
.definition {
    position: relative;
    text-decoration: none;
    text-decoration: underline;
    font-weight: bold;
    font-style: italic;
}
.definition::after  {
    content:"*";
    position: relative;
    color: var(--titres_bordures);
}
.definition:hover, .definition:visited {
    color: var(--titres_bordures);
}
.definition:hover:after,
.definition:focus:after {
 content: attr(aria-label);   /* on affiche aria-label */
  position: absolute;
  top: 25px;
  left: 50%;
    transform: translateX(-50%); /* on centre horizontalement  */
  z-index: 1; /* pour s'afficher au dessus des éléments en position relative */
  white-space: normal;  /* on autorise le retour à la ligne*/
  padding: 5px 14px;
  background: var(--background);
  border: solid 2px var(--titres_bordures);
  color: #fff;
  font-weight: lighter;
  line-height: 1rem;
  width: 250px;
  border-radius: 4px;
  font-style: normal;
  font-size: 16px;
  text-indent: 0;
}

/* on génère un second élément en :before pour la flèche */

.definition[aria-label]:hover:before,
[aria-label]:focus:before {
  content: "▼";
  position: absolute;
  top: -10px;
	left: 30%;
	transform: translateX(-50%); /* on centre horizontalement  */
  font-size: 0.8em;
  font-style: normal;
  color: var(--titres_bordures);
}

/* pas de contour durant le :focus */
/* .definition[aria-label]:focus {
  outline: none;
} */
section>div:first-child {
    border-top: solid 2px;
    border-bottom: solid 2px;
    border-color: var(--titres_bordures);
    color: white;
    font-size: 1.5rem;
    padding: 8px;
}
.objectifs figcaption {
    color:var(--titres_bordures);
    text-align: center;
}
.objectifs {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    background: rgba(253, 146, 5, 0.281);
    border-top-right-radius:16px ;
    border-top-left-radius:16px ;
}
.objectifs p {
    display: table-cell;
    vertical-align: middle;
    font-size: 1.6rem;
    font-weight: bold;
    font-variant-caps: small-caps;
    text-align: center;
    text-indent: 0; 
    color: var(--titres_bordures);
    padding: 10px 0;
}
.objectifs>div:first-child {
    padding: 10px;
    border-right: 2px solid var(--titres_bordures);
}
.biographie {
    border-bottom: 2px solid var(--titres_bordures);
}
.objectifs>div:nth-child(2) {
    display:table;
}
.compositeur {
    line-height: 1.2rem;
}
.compositeur div span:first-child{
    text-decoration: underline;
    font-weight: normal;
    font-style: normal;
    font-size: 1.2rem;
    color:Black;
}
.compositeur span:nth-child(2){
    text-decoration: none;
    font-style: normal;
    font-size: 1.2rem;
}
.pistes_peda>div:first-child {
    background: var(--background);
    border-color:var(--titres_bordures);
}
.pistes_peda ul {
    margin-left: 50px;
}
.pistes_peda ul li{
    list-style-type:circle;
}
.pistes_peda_jeunes>div:first-child {
    background: var(--background);
    border-color:var(--titres_bordures);
}
.pistes_peda_jeunes li {
    list-style-type: none;
}
.elements_caracteristiques>div:first-child {
    background: rgba(40, 160, 155, 0.83);
    border-color: rgb(27, 110, 106);;
}
.youtube {
    color: var(--titres_bordures);
}

article li {
    list-style-type: cercle;
    padding: 10px 5px;
    margin: -10px 30px;
}
.phrase_musicale{
    display: inline-block;
    border: solid 1px black;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    text-align: center;
    text-indent: 0px;
    margin: 0 5px;
    background: var(--background);
}
.moment_musical fieldset.cadre_enseignants {
	width:500px;
	border:2px solid var(--titres_bordures);
	border-radius:8px;
	padding : 0px 5px;
	background-color:rgba(253, 146, 5, 0.281);
	margin:20px auto;
	text-align:center;
  }
.moment_musical fieldset.cadre_enseignants p {
color: var(--titres_bordures);
}
.consigne {
    font-style: italic;
    font-size: 1.2em;
    font-weight: bold;
    color: var(--titres_bordures);
    text-decoration: underline;
}
.elements_caracteristiques img {
    max-width: 100%;
    border: 2px solid var(--titres_bordures);
}
.elements_caracteristiques {
    background: rgba(40, 160, 154, 0.267);
}
.elements_caracteristiques .colonnes{
    display: grid;
    grid-template-columns: 1fr 0.8fr;
}
.elements_caracteristiques .colonnes>div:nth-child(2) {
    border-left: 2px solid var(--titres_bordures);
}
.elements_caracteristiques .colonnes p, .elements_caracteristiques .colonnes li {
    text-align: left;
}
.elements_caracteristiques .colonnes ol {
    padding-inline-start: 10px;
}
/************************************************
Les structures de tableau
**********************************************/
.structure_tableau {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    grid-template-rows: 7fr;
    padding: 5px;
    font-size: 0.8rem;
}
.structure_tableau div {
    display: table-cell;
    vertical-align: middle;
    border: solid 1px black;
    background: rgba(255, 255, 255, 0.438);
    width: 100%;
}
.colonnes .structure_tableau p {
    text-align: center;
    padding: 0;
    margin: 0;
}
.structure_tableau div:first-child{
    grid-column: 1/3;
    grid-row: 1/3;
}
.structure_tableau div:nth-child(2){
    grid-column: 3/7;
}
.structure_tableau div:nth-child(3){
    grid-column: 7/9;
}
.structure_tableau div:nth-child(4){
    grid-column: 9/10;
    grid-row: 1/8;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 0.6rem;
}
.structure_tableau div:nth-child(5){
    grid-column: 10/14;
    grid-row: 1/2;
}
.structure_tableau div:nth-child(6){
    grid-column: 14/16;
    grid-row: 1/2;
}
.structure_tableau div:nth-child(19){
    grid-column: 1/2;
    grid-row: 3/7;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}
.structure_tableau div:nth-child(20){
    grid-column: 2/3;
    grid-row: 3/4;
}
.structure_tableau div:nth-child(21){
    grid-column: 2/3;
    grid-row: 4/5;
}
.structure_tableau div:nth-child(22){
    grid-column: 2/3;
    grid-row: 5/6;
}
.structure_tableau div:nth-child(23){
    grid-column: 2/3;
    grid-row: 6/7;
}
.structure_tableau div:nth-child(24){
    grid-column: 1/3;
    grid-row: 7/8;
    border-bottom-left-radius: 10px;
}
div>.couleur_soprano {background: #000;
    background:rgba(253, 145, 5, 0.83);
}
div>.couleur_alto {
    background:rgba(5, 154, 253, 0.83);
}
div>.couleur_tenor {
    background:rgba(5, 253, 129, 0.83);
}
div>.couleur_basse {
    background:rgba(145, 74, 9, 0.83);
}
div>.couleur_choeur {
    background:rgba(155, 152, 148, 0.83);
}