body
{
	margin: auto;
	max-width: 1200px;
	/*width: 90%;*/
	font-family: sans;
	background-color: #0cceec;
}

#bloc_page
{}


.infobulle
{
    /*text-decoration: none;*/
    /* évite que l'infobulle ne se retrouve dans un coin de l'écran */
    /*position:relative;*/
    /* block -> hauteur fixe pour vertical-align dans l'image */
    /*display: inline-block;*/
    
}
/*.infobulle button
{
    
    display: none;
    position: absolute;
    bottom: 35px;
    left: 10px;
}
.infobulle:hover button
{
    display: inline;

}
.infobulle img
{
    vertical-align: middle;
}*/

main
{
    margin: auto;
    /*max-width: 1200px;*/
    background-color: #E3F3FF;
    padding: 15px;
}
.hidden
{
    display: none; /* attention, conflit si la même balise a déjà une règle display */
}
section
{
    margin-top: 20px;
}
section > h3
{
    padding: 15px;
    margin: 0;
    text-align: center;
}
section .fetch_articles
{
    margin-left: 15px;
}
.basic_div
{
    background-color: white;
    padding: 10px;
}

.section_child
{
    gap: 15px; /* fonctionne avec flexbox et grid, mais pas avec firefox 52 (win XP/vista) */
    margin-top: 15px;
}
.fullwidth > .section_child
{
    display: flex;
    flex-direction: column;
}
.grid > .section_child
{
    display: grid;/* et c'est tout */
    /* la règle grid-template-columns est ajoutée dynamiquement par PHP ou JS*/
}
.mosaic > .section_child
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.mosaic > .section_child article
{
    max-width: 350px;
}
.mosaic > .section_child img /* règle ciblant un élément généré par l'éditeur */
{
    /*max-width: 300px;*/
    max-height: 300px;
    object-fit: contain;
}
article
{
    background-color: white;
    /*margin: 10px;*/ /* rêmplacé par gap */
    padding: 10px;
    /*min-height: 150px;*/
}
article .logo2
{
    vertical-align: middle;
    max-width: 200px;
    max-height: 200px;
    margin-right: 15px;
}
.overflow_hidden div
{
    overflow: hidden;
    max-height: 500px;
}
.new_content button
{
    cursor: pointer;
}
.new_content button:hover
{
    background-color: yellow;
    border-radius: 4px;
}
article img
{
    max-width: 100%; /* règle compliquée, vérifier selon la page et la taille de l'image */
    height: auto;
}

.action_icon
{
    width: 24px;
    vertical-align: bottom;
    border: transparent 2px solid; /* invisible */
}
button .action_icon
{
    border: none;
}
.action_icon:hover
{
    background-color: yellow;
    border-radius: 4px;
    border: lightgrey 2px outset;
    cursor: pointer;
}
button .action_icon:hover
{
    border: none;
}

.button_zone
{
    display: flex;
}

.share
{
    float: right;
}
.under_an_article
{
    display: flex;
    justify-content: space-between;
    font-size: small;
}
.under_an_article img
{
    width: 24px;
    margin-right: 5px;
    vertical-align: middle;
}
.article_admin_zone
{
    display: flex;
    justify-content: end;
    min-width: 100px; /* intéragit avec la règle float sur le bouton "share" */
}
.delete_button
{
    margin-right: 2px;
}
button, section input[type=submit]
{
    color: #ff1d04;
    font-size: medium;
    border-radius: 4px;
    background-color: white;
    border: lightgrey 2px outset; /* rend identiques les boutons firefox et chromium */
}
button:hover, section input[type=submit]:hover
{
    background-color: yellow;
    border-radius: 4px;
    cursor: pointer;
}

article a:hover
{
    cursor: pointer;
}

.user_edit_header
{
    /*display: flex;
    justify-content: space-evenly;
    align-items: center;*/
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    padding: 15px;
}
.user_icon
{
    height: 36px;
}
.user_edit_flex
{
    /*display: flex;
    flex-wrap: wrap;
    justify-content: space-between;*/
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 900px)
{
    .user_edit_flex
    {
        display: block;
    }
}
@media screen and (max-width: 480px)
{
    main{
        padding: 10px 0;
    }
    .empty_column
    {
        display: none;
    }
    .user_edit_header
    {
        grid-template-columns: repeat(2, 1fr);
    }
}

.article_admin_zone p
{
    align-self: center;
}