body {
width:100%;
 margin: 0px 0px;
 font-family: 'McLaren', serif;
 /* background-color:rgba(125, 125, 125); */
 background-color:black;
 background:URL('fond2.jpg') center ;
 /*background-size:100% 100%;*/
}

header {   /*logo et menu de navigation*/
width:80%;
margin:5px auto 10px auto;
background-color:white;
border-radius: 5px;
box-shadow:0.2px 0.5px 1px blue;

}
#titre_du_site {
width:100%;
font-family: 'McLaren', serif;
 font-size:1.2em;
 text-align:center;
}


nav {	/*menu de navigation*/
width:99%;
text-align:center;
}
nav #menu{ 
padding-left:0px;
padding-top:5px;
padding-bottom:5px;
background-color:white;
}

nav #menu li {
 display:inline-block;
 cursor:pointer;
 padding-left: 10px;
 padding-right: 10px;
}

#titre {		/*titre de la page*/
width:80%;
margin:5px auto 10px auto;
padding:1px;
color:black;
box-shadow:0.2px 0.5px 1px blue;
border-radius: 5px;
background-color:white;
/*background:URL('FondPartition4.jpg');*/
background-size:40% 100%;
background-repeat:repeat;

}
#titre h1 {
text-align:center;
font-size:1.2em;
} 
 
#liens_navigation {
background-color:transparent;
position:relative;
width:80%;
margin:2px auto 2px auto;
}

#liens_navigation section, aside {
display:inline-block;
}
#liens_navigation section {
width:70%;
border-radius: 5px;
/*box-shadow:0.2px 0.5px 1px black;*/

}
#liens_navigation aside{
vertical-align:top;
width:21%;
text-align:justify;
color:white;
padding:2px;
margin:0% 1% 0% 1%;
padding:2%;

}
#liens_navigation ul {
list-style:none;
}
#liens_navigation li {
padding:2px;
}

#premiere {   /*première section*/
width:80%;
margin:5px auto 10px auto;

}
.deuxieme {   /*première section, largeur entiere*/
width:80%;
margin:5px auto 10px auto;
}

article h2 {
font-size:1.1em;
}
article h3 {
font-size:1em;
}

h4{
margin-left:20px;
}

/*transformation de la colonne d'article en block pour appliquer le display-inline */
.transformblock {display:inline-block;width:70%;}
.transformblockentier {display:block;width:100%;border:none;}
#premiere aside, .deuxieme aside  {
display:inline-block;
width:24%;
vertical-align:top;
text-align:left;
margin-left:1%;
padding:2%;
border-radius:7px;
box-shadow:0.2px 0.5px 1px blue;
background-color:white;

}


article {
width:98%;
margin:0% auto 10px auto;
border-radius: 5px;
box-shadow:0.2px 0.5px 1px blue;
background-color:white;
padding:1%;

} 


footer {
width:80%;
margin:5px auto 10px auto;
border-radius: 5px;
box-shadow:0.2px 0.5px 1px blue;
font-size:65%;
background-color:white;
/*background:URL('FondPartition3.jpg');*/

}
  

.retourhaut {
position: fixed;
width:62px;
right: 2%;
bottom: 0px;
padding:10px;
margin:0px;
z-index:80;
}



.evenement {
font-size:136%;
 }

.sommaire {
margin:10px;
margin-top:20px;
}



#signature {
margin-top:40px;
margin-left:500px;
}



a:link {
/* color:#088A08;*/
 text-decoration: underline;
font-family: 'McLaren', serif;
font-size:17px;

 }
a:visited {
/*color:#088A08;*/
text-decoration: underline;
font-family: 'McLaren', serif;
font-size:17px;

 }
a:hover {
 text-decoration: none;
 font-style : italic;
font-family: 'McLaren', serif;
 }

 
 #liens_navigation a:link {
 color:white;
 text-decoration: underline;
font-family: 'McLaren', serif;
font-size:17px;
 }
#liens_navigation a:visited {
color:white;
text-decoration: underline;
font-family: 'McLaren', serif;
font-size:17px;

 }
#liens_navigation a:hover {
 text-decoration: none;
 font-style : italic;
font-family: 'McLaren', serif;
 }
 
a img {
  border: 0;
}

a:hover img {
border:1px solid black;
}

.retourhaut a:hover img {
border:none;
width:104%;
}



.lienneutre a:link {
 color:black;
 text-decoration: underline;
font-family: 'McLaren', serif;
 }
.lienneutre a:visited {
color:black;
text-decoration: underline;
font-family: 'McLaren', serif;
 }
.lienneutre a:hover {
color:grey;
 text-decoration: none;
 font-family: 'McLaren', serif;
 }


.menu-secours ul li {
margin:5px;
}


.tablatures2 {
text-align:justify;
background-color:transparent;
color:black;
border-collapse: separate;
border-spacing: 10px 15px;
width:95%;

} 
.tablatures2 td {
border:2px outset #EFECCA;
padding:2px;
padding-left:10px;
padding-right:10px;
}
 
.tablatures3 {
text-align:justify;
background-color:transparent;
color:black;
border-collapse:separate;
border-spacing: 10px 0px;
width:95%;
margin-bottom:10px;
} 
.tablatures3 td {
border:2px outset #EFECCA;
padding:2px;
padding-left:10px;
padding-right:10px;
}



.cell {
width:52px;
}

.cell2 {
width:150px;
}
.cell3{
width:35px;
text-align:center;
font-size:12px;
}
.cell4{
width:77px;
text-align:center;
font-size:12px;
}
.cell5{
width:50px;
text-align:center;
font-size:12px;
}
.cellmp3{
width:90px;
}
.tablatures4 {
float:left;
}
.tablatures4:first-letter {
font-family: 'McLaren', serif;
text-transform:capitalize;
}

.tablatures5 {
float:right;
font-style:italic;
font-size:12px;
text-transform:capitalize;
}




.centrerimage2 {
 vertical-align:-170%;
 }
.centrerdeux {
vertical-align:-30%;
margin-left:30px;
margin-right:10px;
 }


.cours li {
padding:5px;
}

.orn {
margin-top:20px;
max-width:96%;
}

.cd {
margin:10px;
}

.haut {
margin-top:20px;
}

.news li {
margin-top:10px;
}


p {
margin-top:25px;
margin-bottom:25px;
text-align:justify;
}
p:first-letter {
margin-left:30px;
}
p.centrer {
margin-top:25px;
margin-bottom:25px;
text-align:center;
width:100%;
}
p.centrer:first-letter {
margin-left:0px;
}
p.sansmarge {
margin-top:25px;
margin-bottom:25px;
text-align:justify;
}
p.sansmarge:first-letter {
margin-left:0px;
}
p.sansmarge2 {
color:white;
}
p.sansmarge2:first-letter {
margin-left:0px;
}

.important {
font-size:130%;
font-weight:bold;
}


.pagetabbreton {
padding-top:40px;
padding-bottom:15px;
font-weight:bold;
}

.policepetite {
font-size:12px;
font-style:italic;
padding-left:15px;
}

.compteur {
color:white;
}


.majuscule {
text-transform:capitalize;
}

.lecturepartition {
padding:5px;
}


.note {
font-style:italic;
color:green;
}

.titre_partie {
font-weight:bold;
padding-top:15px;
padding-bottom:10px;
}


.pagebreton {
color:black;
transition:color 0.5s;
}

.changerCouleur2, .changerCouleur2 a:link, .changerCouleur2 a:visited  {
color:black;
text-shadow:1px 1px 1px grey;
text-decoration:none;
}
.changerCouleur2:hover, .changerCouleur2 a:hover {
font-style:italic;
}



.changerCouleurTablature {
color:green;
text-shadow:1px 1px 1px grey;
}
.changerCouleurTablature:hover {
color:black;
font-style:italic;
}



.tableauPagePartition {  /*et sur la page solfege*/
width:65%;
border:1px solid black;
border-collapse:collapse;
}

.tableauPagePartition tr,td {
border:1px solid black;
}
table.sansbordure td{
border:none;
}

.looggin{
border:none;
}

.blockaidetablature {
width:90%;
margin:30px auto 10px auto;
}

.aidetablature {
width:49%;
display:inline-block;
text-align:center;
margin:30px auto 10px auto;
}

.styledejeu {   /*memoire*/
list-style:none;
}
.styledejeu li {
padding-bottom:20px;
}
.memoire{
list-style:none;
}
ul.memoire li {
padding-bottom:20px;
}
ul.memoire li ul li {
padding:7px;
}


#formulairePrincipal{
width:45%;
margin:auto;
margin-bottom:100px;
}
#write{
width:98%;
margin:auto;
margin-top:35px;
margin-bottom:20px;
border-radius: 5px;
border: 1px solid #f9f9f9;
box-shadow:2px 2px 2px grey;
font: 1em/1.5 Verdana, Sans-Serif;
background: #fff;
}


#login{
position:fixed;
padding:10px;
top:5px;
right:15px;
background-color:transparent;
/*background:URL('fond2.jpeg') center ;*/
color:white;
/*opacity:0.9;*/
border-radius:5px 5px 5px 5px;
}
#login a, #login a:hover, #login a:visited {
color:white;
}

#conten{

width:460px;
margin:auto;

}
#principal{
width:60%;
margin:auto;
}
#valider
{
width:98%;
margin:auto;
}
input[type=submit]
{
padding:5px 15px; 
background:white;
border:1px solid black;
box-shadow:2px 2px 4px grey;
cursor:pointer;
border-radius: 5px; }
input[type=submit]:hover 
{
border:1px solid grey;
cursor:pointer;
opacity:0.9;
}
input[type=reset] 
{
padding:5px 15px; 
background:white;
border:1px solid black;
box-shadow:2px 2px 4px grey;
cursor:pointer;
border-radius: 5px; }
input[type=reset]:hover 
{
border:1px solid grey;
cursor:pointer;
opacity:0.9;
}

#verifier
{
padding:5px 15px; 
background:white;
border:1px solid black;
box-shadow:2px 2px 4px grey;
cursor:pointer;
border-radius: 5px; }
#verifier:hover 
{
border:1px solid grey;
cursor:pointer;
opacity:0.9;
}

audio{
    display : block;
    margin-top: 5px;
    margin-bottom: 5px;
}

.liensTablatures {
    display : flex;
    gap: 10px;
    flex-wrap: wrap;
}

.tableSon td {
  border: 0px;
  padding-right: 40px;
}

.video-container {
    display: flex;
    justify-content: center; /* centrage horizontal */
    align-items: center;     /* centrage vertical */
}


.old-table {
  margin-top: 30px;
  border: 1px solid black;
  border-collapse: collapse;
}

.old-table td,
.old-table th {
  padding: 1px;
  border: 1px solid black;
}

.bouton{
    background-color:white;
    text-align: center;
    width:150px;
    margin-bottom:5px;
    padding:2px;
    border-radius: 3px;
}

.mail-wrapper {
    display: flex;
    justify-content: center; /* centre horizontalement */
    align-items: center;     /* centre verticalement */
}

/* ===== Overlay spécifique ABC ===== */
.abc-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);

    display: flex;
    justify-content: center;
    align-items: flex-start;   /* 🔥 aligne en haut */

    padding-top: 40px;
    overflow-y: auto;

    z-index: 9999;
}

/* ===== Container spécifique ABC ===== */
.abc-container {
    background: #000;
    color: #fff;

    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);

    width: 90%;
    max-width: 900px;

    position: relative;
    padding: 20px;
}

/* iframe spécifique */
.abc-container iframe {
    width: 100%;
    border: none;
    display: block;
}


.boutonlien{
    background-color:white;
    text-align: center;
    width:150px;
    margin-bottom:5px;
    padding:2px;
    border-radius: 3px;
}