@font-face {
    font-family: 'brushstroke_plainplain';
    src: url('font/Brushstroke/BRUSHSTP-webfont.eot');
    src: url('font/Brushstroke/BRUSHSTP-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/Brushstroke/BRUSHSTP-webfont.woff2') format('woff2'),
         url('font/Brushstroke/BRUSHSTP-webfont.woff') format('woff'),
         url('font/Brushstroke/BRUSHSTP-webfont.ttf') format('truetype'),
         url('font/Brushstroke/BRUSHSTP-webfont.svg#brushstroke_plainplain') format('svg');
    font-weight: normal;
    font-style: normal;

}

a
{
    color: #ff1c05;
    
}

nav a
{
    border : solid #00f50f 2px; /*vert clair*/
    color : black;
    margin-right : 3%;
    margin-bottom : 3%;
    padding : 1%;
    text-align : center;
    font-size: 1.2em;
    font-family: brushstroke_plainplain, Arial, sans-serif;
    background-image: linear-gradient(to bottom left, #ffaa05, #ff1C05);
    text-decoration : none;

}

aside 
{
    flex: 10%;
    height : 721px;
    background-color : black;
}

audio
{
    background-color: none;
    margin-top : 1%;
    align-self: flex-end;
}

body
{
background-color: black;
font-family: Verdana, Arial, sans-serif;
color: white;
}

figure
{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 6%;
    margin-bottom: 6%;
}

.bouton_a_cliquer_page_index  figure
{
    display : flex;
    flex-direction: column;
    justify-content: stretch ;    
}

footer
{
    /*position: relative;*/
    max-width: 1024px;
    border : 2px solid #00f50f;
    padding-left: 2%;
    padding-right: 2%;
    margin-top: 5%;
    margin-bottom: 5%;
}

h1
{
    color: #ff8f05 /*rouge orangé*/;
    /*font-family: cac_champagneregular, Impact, "Arial Black", Arial, Verdana, sans-serif;
    
    */
    font-style: normal;
    border: #ff1c05 /*rouge orangé*/ 5px solid;
    box-shadow: 7px 7px 5px #39b596;
    padding-left: 2px;
    padding-right: 2px;

}

header h1
{
    text-align: center;
}

h2
{
    color : #00f50f;
    border: solid 5px red;
    border-radius : 5px;
    width: 100%;
    font-size: 2em;
    text-align : center;
    word-wrap: break-word;
}


figure h2
{
    width: 100%;
    font-size: 1.5em;
}

h1, h2
{
    font-family : brushstroke_plainplain, Arial, sans-serif;
}


h3
{
    color: #ff1c05 /*rouge orangé*/;
    margin-top : 5%;
}

h4
{
    text-decoration: underline;
    font-weight: bold;
}

#mainwrapper header, #mainwrapper_index header
{
    margin-bottom: 5%;
    margin-top: 2%;  
    width: 100%;
    display: flex;
    flex-direction: row;
    flex : 50%;
    justify-content: space-between;  
    align-items : flex-start;
}

/*
img
{
    max-width: 30 %;
    max-height: 30 %;
    object-fit : contain
    width : auto
}
*/

figure img
{
    /*max-width: 200px;*/
    flex:10%;
    margin-top: : 5%;
    margin-bottom: 5%;
}

header img
{
   max-width: 100px;
}

nav
{
    /*background-color : yellow;*/
    display: flex;
    flex-direction : row;
    /*flex-wrap: wrap;*/
    justify-content: space-between;
    flex-flow: row wrap;
    margin-top: 5%;

}

.section_page_index nav
{
    justify-content: space-around;
}



p
{
    text-align: justify;
}

section
{
    /*background-color: green;*/
    width : 100%;
    border-left: 3px #ff1c05 /*rouge orangé*/ solid;
    border-right: 3px #ff1c05 /*rouge orangé*/ solid;
    display: flex;
    flex-direction: column;
    padding-left : 3%;
    padding-right: 3%;
    margin-left : 3%;
    margin-right : 3%;
    /*flex: 50;*/
    
}



#asideETsection
{
    /*background-color: blue;*/
    width : 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    /*max-width : 1024px;*/
    /*margin-top: 30%;*/
    /*margin: auto;*/
    
}



#mainwrapper, #mainwrapper_index
/*contient header, asideETsection et footer*/
{
    /*background-color: red;*/
    width: 100%;
    max-width: 1024px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: auto;
    /*background: red;*/

}


#pendant_logoETscroll
{
    width: 120px;
    height: 10px;
    background-color: none;
    align-self: flex-start;
}

#pendant_logo
{
    width: 120px;
    height: 10px;
    background-color: none;
    align-self: flex-start;
}

#pour_footer
{
    text-align: left;
}

#section_delphine
{
    flex: 200;
}



.aside_piano
{
    
    /*background: url("photos/clavier_100x103px.jpg") repeat-y;*/
    flex: 10;
    height: 721px;
}

.bouton_a_cliquer_page_index
{
    background: black;
    color: #00f50f;
    vertical-align:  middle;
    font-size: 1em;
    max-width: 100 %;
    height : auto;

}

.bouton_a_cliquer_page_index:hover  
{
    transform: scale(1.1);
}

.centrer
{
    text-align: center;
}


.exposant
{
    vertical-align: super;
}

nav .figure_bouton_a_cliquer
{

    display : flex;
    flex-direction: column;
    max-width: 100%;
    height : auto;
    /*flex:10%;*/    
}

.introduction
{
    color: red;
    font-size: 1em;
    font-style: oblique;
}

.lisere_colore
{
    flex: 10;
    /*background-image: linear-gradient(to bottom left, black, #ff1c05) ;*/


}

.section_page_index
{
    display:flex;
    flex-direction: column;
    
}

.taille
{
    font-size: 2em;
    color: green;
    font-style: italic;
    font-weight: bold;
    text-decoration: line-through;
}

.tarifs
{
    color: #ff1c05 /*rouge orangé*/;
    white-space: nowrap;
}

.tarif_avec_wrap
{
    color: #ff1c05 /*rouge orangé*/;
    white-space: normal;
}

.titre_de_l_enregistrement
{
    background-color: none;
    width : 40%;
    white-space: nowrap;
    align-self: center;
}

.titre_et_enregistrement
{
    background-color: none;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /*align-items: center;*/
    margin-bottom: 20px;
    
}

.underl
{
    text-decoration: underline;
}




@media screen and (max-width : 1024px)
{
    nav a
    {
        margin-right : 3%;
        margin-bottom : 6%;
        width: 30%;
        text-align : center;
        font-size: 1.2em;
        font-family: brushstroke_plainplain, Arial, sans-serif;
        background-image: linear-gradient(to bottom left, #ffaa05, #ff1C05);
        text-decoration : none;

    }
    
    aside
    {
        display: none;
    }

    body
    {
        width: auto;
        margin: 0;
        padding: 0;
    }

    figure figcaption
    {
        font-size : 0.9em;
    }

    footer
    {
        margin-top: 2%;
        max-width: 100%;
        margin-bottom: 5%;
        align-self: center;
    }
    
    #mainwrapper header, #mainwrapper_index header
    {
        flex-direction: column;
        margin-bottom: 2%;
        margin-top: 2%;  
        width: 100%;
        justify-content: flex-start;  
        align-items : center;
    }
    
    img /* La largeur maximale des images correspond à la largeur 
        du device-width et le ratio est conservé*/
    {
       max-width: 100%;
       height: auto;
    }

    header img
    {
       max-width: 100px;
       height: auto;
    }

    
     nav
    {
        flex-direction : column;
        align-items: center;
        margin-top: 3%;

    }

    section
    {
        margin-left : 1%;
        margin-right : 1%;
        /*flex: 10;*/
        
    }

    #mainwrapper
    /*contient header, asideETsection et footer*/
    {
        align-items: flex-start;

    }

    #mainwrapper_index
    {
        align-items: center;
    }

    #pendant_logoETscroll
    {
        display: none;
    }

    .asideETsection
    {
        max-width: 100%;
        height : auto;
        margin-left: 0%;
    }

/*
    .elementCliquable
    {
        display:block;
        height: 48px;
        align-self: center;
    }
*/
   
    .lien_a_cliquer li
    {
        padding-top : 24px;
        padding-bottom : 24px;
    }
    
    .nowrap/*pour que les lignes ne se coupent pas dans le footer*/
    {
        white-space: nowrap;
        
    }

    .nowrapPVO/*pour que les lignes ne se coupent pas dans le footer*/
    {
        white-space: nowrap;
        
    }

}


@media screen and (max-width : 640px)
{
   
    nav a
    {
        max-width: 100%;   
    }

    
    audio
    {
    background-color: none;
    align-self: flex-start;
    }


    body
    {
        max-width: 100%;
    }

    figure figcaption
    {
        font-size : auto;
    }

    footer
    {
        max-width: 100%;
    }

  /*
    figure img

    {
        max-width: 100%;
    }
  */
    
     nav
    {
        flex-direction : column;
        align-items: center;
        margin-top: 3%;

    }
    /*
    nav
    {
        margin-top: 10%;
    }
    */


    #mainwrapper, #mainwrapper_index
        {
            max-width: 98%;
        }

    .titre_de_l_enregistrement
    {
    align-self: flex-start;
    }

    .titre_et_enregistrement
    {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-content : flex-start;
    margin-bottom: 30px;
    
    }


}




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

    figure figcaption
    {
        font-size : 0.8em;
    }


     section
    {
        border-left: none;
        border-right: none;
        padding-left : none;
        padding-right: none;
        margin-left : none;
        margin-right : none;
        flex:1;
    }

    #pendant_logoETscroll
    {
        display: none;
    }

 /* Sur les tout petits écrans, je renonce à la propreté de la figcaption 
associée aux photos de la page d'index */

   figure .nowrap
    {
        white-space: normal;
    }


}


@media screen and (max-width : 250px)
{
/* Sur les tout petits écrans, je renonce à la propreté du footer */
    .nowrap
    {
        white-space: normal;
    }

}