body
{
    /* vire une bande de la couleur du fond au dessus */
    margin: 0px;
    /* violet lavande */
    background-color: #FFEDED;
    /* marron */
    color: #661D17;
    word-wrap: break-word; /* coupe un mot plus long que ce que permet le bloc qui le contient */
    font-family: sans-serif;
}

#bloc_page
{
    max-width: 980px;
    margin: auto;
}

header
{
    text-align: center;
    margin: 0px;
    /* jaune citron */
    background-color: #FFFCC2;
}

img
{
    /* supprime la bande en dessous de l'image, <img /> est considérée comme une balise inline et par défaut,
    le navigateur applique un «vertical-align: baseline;» à cause des g, p, q qui peuvent dépasser en dessous d'un texte */
    vertical-align: middle;
    /* image dans le bon sens en regardant les données EXIF */
	image-orientation: from-image;
}

p
{
    margin: 10px;
}

i
{
    color: red;
}

h1
{
    margin: 0px;
    font-size: xx-large;
    font-weight: normal;
    /* orange curcuma */
    color: #FC5900;

}

.sakura
{
    margin: 15px;
}

nav
{
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    border-top: 1px purple solid;
    border-bottom: 1px purple solid;
    //font-size: large;
}

h3
{
    margin: 0px;
    padding: 10px 10px 10px 40px;
    text-align: left;
}

ul
{
    /* annule les marges par défaut */
    margin: 0px;
    padding-left: 0px;
}

li
{
    padding: 1px;
    margin: 10px 20px;
    text-transform: uppercase;
    display: inline;
}

ul li
{
    display: inline-block;
}

li a
{
    text-decoration: none;
}

a
{
    color: purple;
    text-decoration: none;
}

a:hover
{
    /* orange curcuma */
    color: #FC5900;
    //text-decoration: underline;
}

#admin
{
    margin: 20px;
    border: 2px violet solid;
    display: flex;
    justify-content: flex-end;
}

.corps
{
    /* jaune citron */
    background-color: #FFFCC2;
    display: flex;
    justify-content: space-between;
}

article
{
    /* rose saumon */
    border: #FFBD8D 2px solid;
    margin: 0px 0px 20px 0px;
    padding: 1px;
    min-height: 336px;
    /* violet lavande */
    background-color: #FFEDED;
}

h2
{
    font-size: x-large;
    margin: 10px;
    font-weight: normal;
}

figure
{
    display: flex;
    width: 180%;
}

figcaption
{
    margin: 10px;
}

.dateheure
{
    font-size: small;
    font-style: italic;
}

section img
{
    max-width: 300px;
    max-height: 300px;
    margin: 0px 10px;
    float: left;
}

.contenutexte
{
    margin: 10px;
}

h4
{
    /* orange curcuma */
    color: #FC5900;
    font-size: large;
    margin: 20px 0px 0px 0px;
    text-transform: uppercase;
    display: inline-block;
}


/* colonne de droite */
aside
{
    text-align: center;
    width: 200px;
    display:flex;
    flex-wrap: wrap;
    /* quand disposition horizontale*/
    justify-content: space-around;
    align-items: flex-start;
    
}

.aside
{
	display:flex;
	flex-wrap: wrap;
	justify-content: center;
}

aside p
{
    width: 180px;
}

.prez
{
    display: inline-block;
}

pre
{
    font-family: sans-serif;    
    white-space: pre-wrap;
    margin: 0px;
}

aside pre
{
    width: 180px;
}


/* pied de page */
footer
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}


/* grands écrans */
@media all and (min-width: 980px) /* bloc_page = 980px, aside = 200px, section = 740px et 20 de marge de chaque côté*/
{
    section
    {
        margin: 20px;
        width: 740px;
    }
}


@media all and (min-width: 780px)
{
    aside
    {
        justify-content: space-around;
    }
}

/* petits écrans */
@media all and (max-width: 979px)
{
    #bloc_page
    {
        max-width: 780px;
    }
    
    #banderole
    {
        width: 780px;
    }
    
    #bloc_page
    {
        max-width: 780px;
    }
    
    section /* bloc_page = 780px, aside = 200px, section = 560px et 10 de marge de chaque côté*/
    {
        margin: 10px;
        width: 560px;
    }
    
    figcaption
    {
        width: 250px;
    }
}


/* tablettes */
@media all and (max-width: 779px)
{
    #bloc_page
    {
        max-width: 580px;
    }
    
    #banderole
    {
        width: 580px;
    }
    
    .corps
    {
        flex-wrap: wrap;
    }
    
    aside
    {
        width: auto;
    }
}

@media all and (max-width: 579px)
{
    header
    {
        width: auto;
    }
    
    figure
    {
        flex-wrap: wrap;
    }
    
    .sakura
    {
        display: none;
    }
}
    
/* téléphones */
@media all and (max-width: 429px)
{
    #banderole
    {
        width: 429px;
    }
    
    .sakura
    {
        display: none;
    }
	
    figure
    {
        flex-wrap: wrap;
    }
}