/* 
fichier style.css thebigfrog.fr 
*/


@font-face {
  font-family: 'roboto';
  src: url('../uploads/police/roboto-v29-latin-regular.woff') format('woff'),
	   url('../uploads/police/roboto-v29-latin-regular.ttf') format('truetype');
}
@font-face {
  font-family: 'roboto-mono';
  src: 
	   url('../uploads/police/RobotoMono-Regular.ttf') format('truetype');
	}   

@font-face {
  font-family: 'roboto-bold';
  src: url('../uploads/police/Roboto-Bold.ttf') format('truetype');
}


@font-face {
  font-family: 'courier-tab';
  src: url('../uploads/police/courier-new.ttf') format('truetype');
}


@font-face {
  font-family: 'courgette';
  src: url('../uploads/police/Courgette-Regular.ttf') format('truetype');
}   
#exemple2 p
{
font-family: roboto ;	
}

/*  //////////////////////
/
/
/          HEADER
/
/
//////////////////////////
*/

.headertitre
{
color:#008000;
}
.logoimage
{
margin : auto;
margin-top: 25px;
margin-bottom: 5px;
border: 0px solid black;
display: block;

	
}


#head3
{
	width: 80%;
	margin: auto;
display:flex;
border: red solid 0px;
	
}
#head3 .head4
{
display: flex;	
border: green solid 0px;
width: 100%
}
#head3 .head4 .head5
{	
border: yellow solid 0px;
margin-left: auto;
margin-right: auto;
flex: 2;
display: flex;
	
}
#head3 .head4 .head6
{	
border: green solid 0px;
margin-left: auto;
margin-right: auto;
flex: 4;
	
}

#youtube, #pinterest, #facebook {
padding-top: 15px;
border: green solid 0px;
width: 50px;
float: left;
margin-right: 5px;
margin-left: 5px;

	

}
#youtube a
{
display: block;	
height: 35px;
width: 35px;
border-radius: 50%;
background-image: url("../uploads/images/logo/youtube.png");
background-size: 35px;

}

#youtube a:hover
{
display: block;	
background: red;
border-radius: 50%;
background-image: url('../uploads/images/logo/youtube.png');
background-size: 35px;
opacity: 0.7;
}

#facebook a
{
display: block;	
border-radius: 50%;
height: 35px;
width: 35px;
background-image: url("../uploads/images/logo/facebook.png");
background-size: 35px;

}

#facebook a:hover
{
display: block;
border-radius: 50%;	
height: 35px;
width: 35px;
background: red;
background-image: url('../uploads/images/logo/facebook.png');
background-size: 35px;
opacity: 0.7;

}

#pinterest a
{
display: block;	
border-radius: 50%;
height: 35px;
width: 35px;
background-image: url("../uploads/images/logo/pinterest.png");
background-size: 35px;

}

#pinterest a:hover
{
display: block;	
height: 35px;
width: 35px;
background: red;
background-image: url('../uploads/images/logo/pinterest.png');
background-size: 35px;
opacity: 0.7;

}

#headerlogo
{
margin-left: auto;
margin-right: auto;
border: 0px solid black;
width:25%; 

}

.headerslogan
{
color:#008000;	
text-align: center;
font-size: 20px;


}
h1
{
    color: blue;
}

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

#head3
{
	width: 100%;
	margin: auto;
border: red solid 0px;
	
}
#head3 .head4
{	
border: green solid 0px;
display: flex;
flex-direction: column;
}	

#head3 .head4 .head5
{	
border: yellow solid 0px;
margin-left: auto;
margin-right: auto;
display: flex;

}
#headerlogo
{
margin-left: auto;
margin-right: auto;
border: 0px solid black;
width:100%; 

}

.headerslogan
{
color:#1d5628;	
text-align: center;
font-size: 18px;	
}

.logoimage
{
margin : auto;
margin-top: 0px;
margin-bottom: 0px;
border: 0px solid black;
width: 200px;

}

#menu
{
width:100%;	
margin: auto;
border-top: 2px grey solid;
border-bottom: 2px grey solid;

/* position: sticky; 
top: 0px;
 Si l'on veut que le menu soit tjr visible en haut quand on défile la page vers le bas */
text-transform: uppercase;

}


#menu li
{
margin-bottom: 10px;
padding-top: 3px;
padding-bottom: 3px;
text-align:left;
list-style-type: none;
border: 0px solid red;

width: 100%;
margin-left: 0px;

}
#menu ul
{
display: none;
border: 0px solid black;
background-color: white;


}

nav input{ display:none;}

nav label 
{
display: inline-block;
width: 100%;
text-align: center;	
font-size: 30px;
}


#menu input[type=checkbox]:checked + ul
{
display: flex;
flex-flow: column wrap;
background-color: white;
margin: 0px;
padding: 0px;
}



#menu a
{

text-decoration:none;
color: black;
font-size: 20px;
font-family: arial; 
margin-left: 2em;

}

/* Rajouter URL de la balise pour laisser le lien menu de la page active en couleur */
#index #menu ul #nav-index a, #sommaire-tab #menu ul #nav-poemes a, #comptines #menu ul #nav-comptines a, 
#suggestions #menu ul #nav-suggestions a, #guitare-les-bases #menu ul #nav-guitare-les-bases a, #compositions #menu ul #nav-compositions a, #comptines-etrangeres #menu ul #nav-comptines-etrangeres a 
{
color: #008000;

}

#youtube, #pinterest, #facebook {
padding: 0px;
width: 25px;
border: green solid 0px;
margin: 0px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 20px;
padding-top: 5px;

	

}

#youtube a
{
	
display: block;	
border-radius: 50%;
height: 25px;
width: 25px;
background-image: url("../uploads/images/logo/youtube.png");
background-size: 25px;

}

#youtube a:hover
{
display: block;	
border-radius: 50%;
height: 25px;
width: 25px;
background: red;
background-image: url('../uploads/images/logo/youtube.png');
background-size: 25px;
opacity: 0.7;

}

#facebook a
{
display: block;	
border-radius: 50%;
height: 25px;
width: 25px;
background-image: url("../uploads/images/logo/facebook.png");
background-size: 25px;

}

#facebook a:hover
{
display: block;
border-radius: 50%;	
height: 25px;
width: 25px;
background: red;
background-image: url('../uploads/images/logo/facebook.png');
background-size: 25px;
opacity: 0.7;

}

#pinterest a
{
display: block;	
border-radius: 50%;
height: 25px;
width: 25px;
background-image: url("../uploads/images/logo/pinterest.png");
background-size: 25px;

}

#pinterest a:hover
{
display: block;	
height: 25px;
width: 25px;
background: red;
background-image: url('../	uploads/images/logo/pinterest.png');
background-size: 25px;
opacity: 0.7;

}


}

@media screen and (max-width: 391px)
{
#menu a
{

text-decoration:none;
color: black;
font-size: 14px;
font-family: arial; 
margin-left: 2em;

}
nav label 
{
display: inline-block;
width: 100%;
text-align: center;	
font-size: 25px;
}

}

@media screen and (max-width: 500px)
{	
#menu a
{
font-size: 14px;
}	
}
/* ///////////////////////
/
/
/          MENU
/
/
//////////////////////////
*/
#langage2 {
border: 0px green solid; width: 100%
}

#langrespons {
	display:none;
}

#languagediv {
	width: auto;
	float: right;
display:flex;
border: 0px solid blue;
color: black;
font-size: 14px;
font-family: roboto; 
padding-top: 10px;
margin: 0px; 
}



#title-langue:hover {
color: 	#008000;
}

#languagediv a
{
text-decoration: none;
color: black;
font-family: roboto;
}
#languagediv a:hover
{
text-decoration: none;
color: #008000;
}

#languagediv li
{
list-style-type: none;
margin-right: 4px;
}

#languagediv ul
{
display: flex;
border: 0px red solid;

}

@media screen and (max-width: 1000px) 
{
	#langrespons {
	display:flex;
}

#languagediv ul
{
margin: 0px;
padding: 0px;
}
#langdeletscreenfull{
	display:none;
}
#langrespond2{
	display:none;
}
#langage1 {
	width: 100%; 
	padding-top: 10px;

}
#langage2 {
	width: 100%; 
	padding-top: 10px;
	display:none;
	
}	
#languagediv ul
{
	border: 0px solid yellow;
	
}

#languagediv li
{
margin-right: 5px;

}

#languagediv {

width: auto;
float: right;
margin-right: 10px;
border: 0px solid blue;
color: black;
font-size: 14px;
font-family: roboto; 
display: flex;
padding-top: 0px;

}
}

#menu ul li a{
	font-family: roboto-bold;
}

@media screen and (min-width: 1001px) 
{
#menu
{
width:100%;	
margin: auto;
border-top: 2px grey solid;
border-bottom: 2px grey solid;
/* position: sticky; 
top: 0px;
 Si l'on veut que le menu soit tjr visible en haut quand on défile la page vers le bas */

text-transform: uppercase;

}


#menu li
{
float: left;	
text-align:center;

list-style-type: none;



	
}
#menu ul
{
padding-left: 3em;
padding-right: 3em;
border: 0px solid black;
display:flex;
justify-content: space-between;
}
/*   ////////////// monter de 10px le 2eme onglet du men, pour le centrer, mais si on diminue la fenêtre, pas terrible ?? 
#menu ul #nav-exemplepage
{

margin-top: -10px;	
}  
/////////////////////////    */

#menu a
{
display: block;
text-decoration:none;
color: black;

padding: 0px px;
font-size: 16px;
font-family: arial; 

}

/* Rajouter URL de la balise pour laisser le lien menu de la page active en couleur */
#index #menu ul #nav-index a, #sommaire-tab #menu ul #nav-poemes a, #comptines #menu ul #nav-comptines a, 
#suggestions #menu ul #nav-suggestions a, #guitare-les-bases #menu ul #nav-guitare-les-bases a, #compositions #menu ul #nav-compositions a,
#comptines-etrangeres #menu ul #nav-comptines-etrangeres a 
{
color: #008000;

}

#menu a:active
{
color: #008000;
border: 0px dotted #1d5628;


}
#menu a:hover
{
color: #008000;
border-top: 0px dotted #1d5628;
border-bottom: 0px dotted #1d5628;


}
nav input{ display:none;}

nav label 
{
display: none;
width: 100%;
text-align: center;	
font-size: 30px;
}



}



@media screen and (min-width: 1200px) 
{
#menu
{
width:80%;	
margin: auto;
border-top: 2px grey solid;
border-bottom: 2px grey solid;
/* position: sticky; 
top: 0px;
 Si l'on veut que le menu soit tjr visible en haut quand on défile la page vers le bas */

text-transform: uppercase;

}


#menu li
{
float: left;	
text-align:center;

list-style-type: none;



	
}
#menu ul
{
padding-left: 3em;
padding-right: 3em;
border: 0px solid black;
display:flex;
justify-content: space-between;
}
/*   ////////////// monter de 10px le 2eme onglet du men, pour le centrer, mais si on diminue la fenêtre, pas terrible ?? 
#menu ul #nav-exemplepage
{

margin-top: -10px;	
}  
/////////////////////////    */

#menu a
{
display: block;
text-decoration:none;
color: black;

padding: 0px px;
font-size: 16px;
font-family: arial; 

}

/* Rajouter URL de la balise pour laisser le lien menu de la page active en couleur */
#index #menu ul #nav-index a, #poemes #menu ul #nav-poemes a, #comptines #menu ul #nav-comptines a, 
#suggestions #menu ul #nav-suggestions a, #guitare-les-bases #menu ul #nav-guitare-les-bases a, #compositions #menu ul #nav-compositions a, #comptines-etrangeres #menu ul #nav-comptines-etrangeres a 
{
color: #008000;

}

#menu a:active
{
color: #008000;
border: 0px dotted #1d5628;


}
#menu a:hover
{
color: #008000;
border-top: 0px dotted #1d5628;
border-bottom: 0px dotted #1d5628;


}
nav input{ display:none;}

nav label 
{
display: none;
width: 100%;
text-align: center;	
font-size: 30px;
}



}



/*  //////////////////////
/
/
/          EXEMPLEPAGE
/
/
//////////////////////////
*/


#corps
{
width: 80%;
margin: auto;
padding-top: 10px;	
	
}

/*  //////////////////////
/
/
/          EXEMPLEPAGE
/
/
//////////////////////////
*/

#exemple p {
	color: hsla(0,0%,5%,0.9);
}
#exemple u {
        text-decoration-color: black;

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

#exemple
{
border: transparent 0px solid;
width: 100%;
margin-top: 0px;
padding-top:1px;
margin-bottom: 5px;
margin-left: auto;
margin-right: auto;
background-color : rgba(220,220,220,0.5);
background-color : hsla(0,0%,95%,0.5);
}



#exemple2
{
background-color: white;
width: 95%;
margin-left: auto;
margin-right: auto;


}

#nom-page
{
border: transparent solid green;
padding-left: 0px;
width: 80%;
margin-left: 1em;

}

#nom-page H1
{
font-size: 25px;
color:black;
text-transform: capitalize;
font-family: courgette;
}
	
	
/* BLOCK /////////////////////////////// */

.block 
{
border:  0px solid;
margin-left: -2px;
margin-right: -2px;
margin-bottom: 50px;
  display: flex;
  flex-direction: column-reverse;


}

.block-diag 
{
border: transparent 1px solid;
margin-left: -2px;
margin-right: -2px;
margin-bottom: 50px;
  display: flex;
  flex-direction: column;


}



.block1
{
border: transparent 1px solid;	
list-style: none;
padding-left: 2px;
padding-right: 2px;
padding-top: 0em;
margin-bottom: 0em;
font-size: 15px;
line-height: 1.8em;
}

.roboto-mono{
font-family: roboto-mono;
font-size: 14px;
}

.block2
{
border: transparent 1px solid;
list-style: none;
padding-top: 0em;
padding-left: 2px;
padding-right: 2px;
margin-bottom: 0em;
font-size: 15px;
}

.block2 img{
max-width: 800px;

}
.block1 p
{
white-space: pre ;
margin-left: 2px;
}

.block2 .accords2{
max-width: 100%;
width: 50%;
}

.block2 .accords3{
max-width: 100%;
width: 50%;
}

.block2 .audio {
padding-left: 1em;
}


}

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

.block1
{
border: transparent 1px solid;	
list-style: none;
padding-left: 2px;
padding-right: 2px;
padding-top: 0em;
margin-bottom: 0em;
font-size:12px;
line-height: 1.8em;
}

.roboto-mono{
font-family: roboto-mono;
font-size: 11px;
}

.block2
{
border: transparent 1px solid;
list-style: none;
padding-top: 0em;
padding-left: 2px;
padding-right: 2px;
margin-bottom: 0em;
font-size: 12px;
}

.block1 p
{
white-space: pre ;
margin-left: 2px;
}
.block2 .accords2{
max-width: 100%;
width: 60%;
}
.block2 .accords3{
max-width: 100%;
width: 70%;
}

}

@media screen and (max-width: 391px)
{
.block1 p
{
white-space: pre ;
margin-left: 2px;	
font-size: 11px;
line-height: 1.8em;
}

.roboto-mono{
font-family: roboto-mono;
font-size: 10px;
}

.block2 .accords2{
max-width: 100%;
width: 80%;
margin-bottom:-10px;
}

.block2 .accords3{
max-width: 100%;
width: 80%;
margin-bottom:-10px;
}

#nom-page H1
{
font-size: 20px;
color:black;
text-transform: capitalize;
font-family: courgette;
}


}
@media screen and (min-width: 1250px)
{
#exemple
{
border: transparent 3px solid;
width: 100%;
margin-top:10px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
background-color : rgba(220,220,220,0.5);
background-color : hsla(0,0%,95%,0.5);
}



#exemple2
{
background-color: white;
width: 80%;
margin-left: auto;
margin-right: auto;

}

#nom-page
{
border: transparent solid green;
padding-left: 30px;
width: 80%;
margin-left: auto;
margin-right: auto;	

}

#nom-page H1
{
font-size: 35px;
color:black;
text-transform: capitalize;
font-family: courgette;
}


/* BLOCK /////////////////////////////// */

.block 
{
border: transparent 1px solid;
margin-left: -2px;
margin-right: -2px;
margin-bottom: 50px;
display: flex;


}

.block-diag {
border: transparent 1px solid;
margin-left: 3em;
margin-right: 3em;
padding-top: 2em;
margin-bottom: 50px;
display: flex;
flex-direction: column;	
}
.block1
{
border: transparent 1px solid;	
list-style: none;
padding-left: 3em;
padding-top: 2em;
margin-bottom: 3em;
line-height: 1.6em;
flex: 3;
}

.block2
{
border: transparent 1px solid;
list-style: none;
padding-top: 2em;
padding-left: 3em;
padding-right: 3em;
margin-bottom: 3em;
flex: 4;
}

.block1 p
{
white-space: pre ;
font-size: 16px;
}

.roboto-mono{
font-family: roboto-mono;
font-size: 14px;
}

.block2 img{
max-width: 100%;
width: 100%;
}

}

@media screen and (min-width: 1250px)
{
#exemple2
{
background-color: white;
width: 100%;
margin-left: auto;
margin-right: auto;
}

.block1
{
border: transparent 1px solid;	
list-style: none;
padding-left: 3em;
padding-top: 2em;
margin-bottom: 3em;
line-height: 1.6em;
margin-left: 2em;
}

.block2 .accords2{
max-width: 100%;
width: 60%;
}

.block2 .accords3{
max-width: 100%;
width: 80%;
}

}

@media screen and (min-width: 1450px)
{
#exemple2
{
background-color: white;
width: 80%;
margin-left: auto;
margin-right: auto;
}
.block1
{
border: transparent 1px solid;	
list-style: none;
padding-left: 3em;
padding-top: 2em;
margin-bottom: 3em;
line-height: 1.6em;
}

.block2 .accords2{
max-width: 100%;
width: 60%;
}

.block2 .accords3{
max-width: 100%;
width: 80%;
}

}

.no-pre p {
white-space: normal;
}

/*  ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/
/
/          FOOTER  ////////////////////////////////////////////////
/
/
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
*/

.foot 
{
	
	
}
#footer
{
background: black;

border: 2px solid black;
width:100%;
margin: auto;
text-align: center;
color: white;	
}

#footer p
{
font-size: 17px;
color: white;	
}

@media screen and (max-width: 380px)
{
#footer p
{
font-size: 14px;	
}
}



/*////////////////////////////////////////////////////////////////PAGE SOMMAIRE /////////////////////////////////////////////////////////////////////:*/   
   


@media screen and (max-width: 1400px)
{
#comptine-som {
	padding-top:1em;
	padding-bottom: 1em;
display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-row-gap: 0em;
margin-left: 0em;
margin-right: 0em;
justify-content: space-around;
border: black solid 1px;
margin-bottom: 1em;

}

#comptine-som2 { 
display: flex;
flex-direction: column;
border: 0px solid green;
text-align: center;
margin: 1em;
}

#comptine-som2 img { 
width: 100%;

}

#comptine-som2 img:hover { 
width: 100%;
filter: opacity(70%);

}

.sommairetitre {
text-align: center;
padding-top: 1em;
text-decoration: none;
color: black;
text-transform: capitalize;
font-family: roboto-bold ;
}	

.sommairetitre:hover {
text-align: center;
padding-top: 1em;
text-decoration: none;
font-weight: bolder;
color: #1d5628;
text-transform: capitalize;
font-family: roboto-bold ;	
}	
}

@media screen and (min-width: 1400px)
{   
#comptine-som {
	padding-top:1em;
	padding-bottom: 1em;
display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-row-gap: 0em;

margin-left: 0em;
margin-right: 0em;
justify-content: space-around;
border: black solid 1px;
margin-bottom: 1em;
}


#comptine-som2 { 
display: flex;
flex-direction: column;
border: 0px solid black;
border-radius: 30px;
text-align: center;
padding-top: 1em;
padding-bottom: 1em;
margin: 1em;

}
#comptine-som2:hover {
	
	}

#comptine-som2 img { 
width: 90%;

}

#comptine-som2 img:hover { 
width: 90%;
filter: opacity(70%);

}

.sommairetitre {
text-align: center;
padding-top: 1em;
text-decoration: none;
color: black;
text-transform: capitalize;
font-family: roboto-bold ;
font-size: 1.2em;
margin-left:5px;
margin-right: 5px;
}	

.sommairetitre:hover {
text-align: center;
padding-top: 1em;
text-decoration: none;
font-weight: bolder;
color: #1d5628;
text-transform: capitalize;
font-family: roboto-bold ;

}
}

@media screen and (max-width: 850px)
{
#comptine-som {
	padding-top:2em;
	padding-bottom: 2em;
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-row-gap: 1em;
margin-left: 0em;
margin-right: 0em;
padding-left: 5px;
padding-right: 5px;
justify-content: space-around;
border: black solid 1px;


}

#comptine-som2 { 
display: flex;
flex-direction: column;
border: 0px solid green;
text-align: center;
margin: 0.5em;
}

#comptine-som2 img { 
width: 100%;

}

#comptine-som2 img:hover { 
width: 100%;
filter: opacity(70%);

}

.sommairetitre {
text-align: center;
padding-top: 1em;
text-decoration: none;
color: black;
text-transform: capitalize;
font-family: roboto-bold ;
}	

.sommairetitre:hover {
text-align: center;
padding-top: 1em;
text-decoration: none;
font-weight: bolder;
color: #1d5628;
text-transform: capitalize;
font-family: roboto-bold ;	
}	
}

@media screen and (max-width: 500px)
{
#comptine-som {
display:grid;
grid-template-columns: 1fr 1fr;
grid-row-gap: 0px;
margin: 0px;	
padding: 0px;
margin-bottom: 1em;
padding-bottom: 1em;
justify-content: space-around;
border: black solid 1px;
}

#comptine-som2 { 
display: flex;
flex-direction: column;
border: 0px solid green;
text-align: center;
padding: 0.5em;

}

#comptine-som2 img { 
width: 100%;

}


.sommairetitre {
text-align: center;
padding-top: 5px;
text-decoration: none;
color: black;
text-transform: capitalize;
font-family: roboto-bold ;
font-size: 10px;
}	
.sommairetitre:hover {
text-align: center;
padding-top: 5px;
text-decoration: none;
color: black;
text-transform: capitalize;
font-family: roboto-bold ;
font-size: 10px;
}		
}


#video
{
height: 330px ;
width: 560px ;
}

@media screen and (max-width: 601px)
{
#video
{
height: 200px ;
width: 340px ;
}

}

@media screen and (max-width: 380px)
{
#video
{
height: 164px ;
width: 280px ;
}

}


.tab
{
width: 100%;
margin: auto;
}

.tab-image {
	max-width: 900px;	
width: 100%;
margin: left;

}

.chant{
flex: 3;
	margin-left: 2em;
	border: 2px solid yellow;
}
.chant p
{
white-space: pre ;
font-family: roboto;
font-size: 1.3em;

}



#chantaccord {
background-color: white;
width: 80%;
margin-left: auto;
margin-right: auto;	
padding: 2em;
border: green solid 3px;
	
}
#chantaccord img{
	border: solid green 2px;
	margin: auto;
}

.tav {
display: flex;
border: 1px red solid;
margin-top: 10px;

	
}


.accvid
{
display: flex;
flex-direction: column;
flex: 2;
margin-right: 2em;
border: 2px solid blue;
}



/* ACCUEIL ////////////////////////////////////////////////// */

#div-accueil {
padding: 2em;
line-height: 1.8em;	
	
}

#div-accueil img {
padding-top: 2em;
	
	
}

@media screen and (max-width: 500px)
{
	
#div-accueil {
padding: 2px;
line-height: 1.8em;
font-size: 12px;
}

}

.block1 H2 {
font-family: roboto-bold;	
	
}
.block2 H2 {
font-family: roboto-bold;	
	
}

h3  {
font-family: roboto-bold;	
	
}

/*composition ///////////////////*/


#compositions .block-compo {
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 0px;
padding-top: 0px;
t;
grid-template-rows: auto;
padding-bottom: 1em;
border: 0px solid red;
grid-gap: 20px;
}

#compositions .block-compo #video2 {


display: flex;
flex-direction: column;	
border: 0px solid grey;
margin-left: 1em;
margin-right: 1em;

	
	
}

#compositions .block-compo iframe {
width: 400px;
border-radius: 10%;
height: 280px;

	
}

#compositions .block-compo .audio{

border:0px solid blue;
margin-left: 1em;
margin-right: 1em;

	
	
}

#compositions #exemple2 {
margin-bottom: 1em;	
	padding-bottom: 1em;
	border: green 0px solid;
}
#compositions .block-compo a{
color: black;
font-family: roboto-bold;
text-decoration: none;
}

#poemes a{	
color: black;
font-family: roboto-bold;
text-decoration: none;
}	

#poemes a:hover{	
color: green;
font-family: roboto-bold;
text-decoration: none;
}

#comptines-etrangeres li a:hover{	
color: green;
font-family: roboto-bold;
text-decoration: none;
}

#comptines li a:hover{	
color: green;
font-family: roboto-bold;
text-decoration: none;
}

#compositions li a:hover{	
color: green;
font-family: roboto-bold;
text-decoration: none;
}

#suggestions li a:hover{	
color: green;
font-family: roboto-bold;
text-decoration: none;
}

#guitare-les-bases a:hover{	
color: green;
font-family: roboto-bold;
text-decoration: none;
}
#guitare-les-bases a{	
color: black;
font-family: roboto-bold;
text-decoration: none;
}	

#sommaire-tab a:hover{	
color: green;
font-family: roboto-bold;
text-decoration: none;
}
#sommaire-tab a{	
color: black;
font-family: roboto-bold;
text-decoration: none;
}

#index a:hover{	
color: green;
font-family: roboto-bold;
text-decoration: none;
}
#index a{	
color: black;
font-family: roboto-bold;
text-decoration: none;
}

#comptines-noel a:hover{	
color: green;
font-family: roboto-bold;
text-decoration: none;
}
#comptines-noel a{	
color: black;
font-family: roboto-bold;
text-decoration: none;
}

@media screen and (max-width: 980px)
{
	
#compositions .block-compo {
display: flex;
flex-direction: column;
margin-top: 0px;
padding-top: 0px;
justify-self: start;
padding-bottom: 1em;
border: 0px solid red;
}	
	
#poemes a{	
color: black;
font-family: roboto-bold;
text-decoration: none;
}	

#guitare-les-bases a{	
color: black;
font-family: roboto-bold;
text-decoration: none;
}
}

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


#compositions .block-compo .audio{

border:0px solid blue;
margin: 2px;
}

#compositions .block-compo #video2 {
display: flex;
flex-direction: column;	
border: 0px solid grey;
margin: 2px;
}
#compositions .block-compo {
display: flex;
flex-direction: column;
margin: 0px;
padding: 0px;

padding-bottom: 1em;
border: 0px solid red;
}	
#compositions .block-compo iframe {
width: 300px;
border-radius: 10%;
height: 186px;	
}	
#compositions .block-compo p {
font-size: 12px;
}
#compositions .block-compo h2 {
font-size: 16px;
}	

#compositions .block-compo a{
color: black;
font-family: roboto-bold;
text-decoration: none;
font-size: 14px;
}

#poemes a{
color: black;
font-family: roboto-bold;
text-decoration: none;
font-size: 14px;
}

#guitare-les-bases a{
color: black;
font-family: roboto-bold;
text-decoration: none;
font-size: 14px;
}
}


/*  GUITARE LES BASES //////*/

.tab-courier p{
font-family: couriertab;
}


#legend-dia .img-dia {

width: 25px;
height: 25px;
margin-top: auto;
margin-bottom: auto;

}

.exem-anglo
{
width:300px;	
}


@media screen and (min-width: 500px)
{
.tab-courier1
{
width: 470px; 
padding: 0.5em; 	
}

.tab-courier2{
width: 470px; 
padding: 0.5em; 	
}

.tab-courier3 {
width:150px; 
height: 150px; 
padding: 0em;	
}

.tab-courier3-img {
width:150px; 
height: 150px;	
}

.tab-courier-3-egal
{
	font-size:50px; margin-left:20px; margin-right: 20px;
}

.parenthesehammerpull {

border: 0px blue solid; 
width: 10px; 
height: 20px; 
position: absolute; 
margin-top: 77px; 
margin-left: 69px;
transform: rotate(90deg);	
}

}

@media screen and (max-width: 500px)
{
#exemple2 p
{
font-size: 11px;
line-height: 1.8em;
}
#exemple2 h3
{
font-size: 15px;
}

#exemple2 table
{
font-size: 12px;
}

.exem-anglo
{
width:200px;	
}

#exemple2 .tab-courier1 p, #exemple2 .tab-courier2 p, #exemple2 .tab-courier3 p {
line-height: 1.3em;
font-size: 9px;
margin-left:5px;
}

.tab-courier1
{
width: 280px; 
padding: 0em;
padding-top:3px;
padding-bottom:3px;  	
margin-left:0em;
}

.tab-courier2{
width: 280px; 
padding: 0em; 
padding-top:3px;
padding-bottom:3px;  
margin-left:0em;
}

.tab-courier3 {
width:100px; 
height: 100px; 
padding: 0em;	
}

.tab-courier3-img {
width:100px; 
height: 100px;	
border: blue solid 0px;
}

#exemple2 .tab-courier-3-egal
{
	font-size:27px; 
	margin-left:20px; 
	margin-right: 20px;
}

#exemple2 .parenthesehammerpull {

border: 0px blue solid; 
width: 10px; 
height: 20px; 
position: absolute; 
margin-top: 47px; 
margin-left: 43px;
transform: rotate(90deg);
font-size: 12px;	
}
}

.exem-tab2 {
display: none;
}
@media screen and (max-width: 1249px)
{
.exem-tab2 {
display: block;
}
	.exem-tab1 {
	display: none;
	}
	
	.tab-courier1 p, .tab-courrier p {
line-height: 1em;
}
}

.liredia-img-2
{

width: 100%;
border: 0px blue solid;
	
}

.liredia-img
{

width: 70%;
border: 0px blue solid;

	
}

@media screen and (min-width: 600px)
{
.liredia-img
{

width: 400px;
border: 0px blue solid;

	
}

.liredia-img-2
{

width: 600px;
border: 0px blue solid;

	
}



}



.liredia-div{
display:flex;
height: 25px;
border: 0px green solid;	
	
}

#exemple2 .tab-courier3 p, #exemple2 .tab-courier2 p, #exemple2 .tab-courier1 p{
white-space: pre; 
margin-left: 20px; 
font-family: courier-tab;
}


.block a:hover{
color: #008000;	
}

.block a{
color: black;	
text-decoration:none;
font-weight:bold;
}

#languagediv a{
font-family:roboto-bold;

}

/* ===== Volet de tags — Comptines ===== */

.comptines-filtres-wrapper {
  margin: 1.2em 0;
  border: 1px solid black;
  border-radius: 10px;
  padding: 0.6em 0.8em;
  background:;
}

/* Bouton d'ouverture / fermeture du volet */

.comptines-filtres-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  border: none;
  background: transparent;
  padding: 0;
  font-family: roboto-bold, roboto, Arial, sans-serif;
  font-size: 0.95rem;
  cursor: pointer;
  color: #005500; /* un peu plus foncé que #008000 */
}

.comptines-filtres-toggle-icon {
  transition: transform 0.2s ease;
  font-size: 0.9rem;
}

/* Quand le volet est ouvert, on pivote la flèche */
.comptines-filtres-toggle[aria-expanded="true"] .comptines-filtres-toggle-icon {
  transform: rotate(180deg);
}

/* Contenu du volet (liste de tags) */

.comptines-filtres {
  margin-top: 0.7em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}

/* Quand l'attribut hidden est présent, on force le panneau à être caché */
.comptines-filtres[hidden] {
  display: none !important;
}

/* Boutons de tags */

.comptines-filtre-btn {
  border-radius: 999px;
  border: 1px solid #008000;
  background: #ffffff;
  padding: 0.25em 0.7em;
  font-size: 0.85rem;
  font-family: roboto, Arial, sans-serif;
  cursor: pointer;
  color: black;
  line-height: 1.3;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.05s ease;
}

.comptines-filtre-btn:hover {
  background: #e7f6e7;
  box-shadow: 0 0 0 1px #00800011;
}

.comptines-filtre-btn.is-active {
  background: #008000;
  color: #ffffff;
  box-shadow: 0 0 0 1px #00600044;
}

.comptines-filtre-btn.is-active:hover {
  background: #006d00;
}

/* Petit "clic" visuel */
.comptines-filtre-btn:active {
  transform: translateY(1px);
}


/* ===== Section saisonnière ===== */

.seasonal-box {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 14px;
  flex-wrap: wrap; /* mobile-friendly */
  
}

.seasonal-image {
  flex-shrink: 0;
  display: block;
  max-width: 180px;    /* ⬅️ limite max de l'image */
}

.seasonal-image img {
  width: 100%;
  height: auto;
  border-radius: 0px;
  object-fit: cover;
}

/* Corps du texte */
.seasonal-body {
  flex: 1;
  min-width: 200px;
}

/* Texte */
.seasonal-body h3 {
  margin: 0 0 6px;
}

/* Listes saisonnières */
.seasonal-list {
  margin: 8px 0;
  padding-left: 18px;
}

/* Lien “voir plus“ */
.seasonal-more {
  margin-top: 8px;
}

/* ===== VERSION MOBILE ===== */
@media (max-width: 720px) {
  .seasonal-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .seasonal-image {
    max-width: 60%;   /* ⬅️ limite sur mobile */
    margin-bottom: 10px;
  }

  .seasonal-body {
    text-align: left;
    width: 100%;
  }
}