/* ======================  BAIE ==================================  */

/*==== Body  : la page complète : FLEX vertical column ====================== */
body    
{
    margin:10px;
    display: flex;
    flex-direction: column; 
    flex-wrap: wrap;
    justify-content:space-around; 
    align-items: center;
    /* justify-content: center; */
    width: 1600px;     /* 1200 - 1600 - 1920 */
    width:auto; 
    min-width: 600px; 
    /* margin-left: 5px; */
    /* background-color: yellow; */
    font-size: 1.5em; 
    font-family: "Times New Roman", Times , "Nimbus Roman No9 L" , Serif ; 
    /* border: 2px black solid;  border-radius: 30px; */
}
@media screen and (max-width: 1000px)
{
    body
    {   
    /*    display: flex; 
        flex-direction: row; 
        flex-wrap: wrap;
        justify-content:space-around; 
    */    
        /* width: auto; */  /* Si on supprime : n'ajuste plus la largeur quand on réduit */
     }    
}


/* ========== header : le titre centré au début du body : Flex Vertical column ================================== */
header
{
    display: flex; 
    flex-direction: column;
    flex-wrap: wrap;
    justify-content:space-around; 
    align-items: center;
    /* margin:0px; */
    margin-top:0px;
    margin-bottom:20px;
    margin-left:20px;
    margin-right:20px;
    /* margin:10px; */
    text-align: center; 
    /* font-size: 1.2em; */
    /* background-color: red; */
    /* width: auto;  */  /* Si on supprime : n'ajuste plus la largeur quand on réduit */
/*    border: 2px black solid; border-radius: 30px;        */
}
@media screen and (max-width: 1000px)
{
    header
    {   
        /* display: flex; */
        flex-direction: column; 
        min-width: 600px; 
     }    
}

/*==========  main  : la page sauf header et footer  FLEX vertical column - Centré ================================*/
main
{
    display: flex;
    flex-direction: column;      
    /* font-size: 1.5em; */
    /* width: auto;  */  /* Si on supprime : n'ajuste plus la largeur quand on réduit */
    text-align:center;
    /* background-color: green; */
    /* border: 2px black solid; border-radius: 30px;  */    
}
@media screen and (max-width: 1000px)
{
    main
    {   
        /* display:flex;  */
        flex-direction: column;   
        /* text-align:center;  */
       
     }    
}

/*==========  section : les divisions de main  FLEX horizontal row - Centré ================================*/
section
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:space-around; 
    /* justify-content: flex-start ; */
    align-items:center; 
    margin-top:    20px;
    margin-right:  20px;
    margin-bottom: 20px;
    margin-left:   20px; 

    /* font-size: 1.5em; */
    /* width: auto;  */  /* Si on supprime : n'ajuste plus la largeur quand on réduit */
    /* text-align:center; */
    /* background-color: yellow; */
    /* background-color: green; */
    /* border: 2px black solid; border-radius: 30px; */
}
@media screen and (max-width: 1000px)
{
    section
    {   
        /* display:flex; */
        flex-direction: column;   
        /* text-align:center;  */
       
     }    
}

/*==========  div  : aligne horizontalement les éléments (menu et texte) alignés à gauche ================================*/
div
{
    /* display: flex; */
    /* flex-direction: column; */    
    font-size: 1.5em;
    width: auto;    /* Si on supprime : n'ajuste plus la largeur quand on réduit */
    /* text-align:left; */
    /* background-color: green; */
    /* border: 2px black solid; border-radius: 30px; */
}
@media screen and (max-width: 1000px)
{
    div
    {   
        display:flex;
        flex-direction: column;   
        /* text-align:center;  */
       
     }    
}


/*==========  span  : aligne verticalement les éléments (menu et texte) alignés à gauche ================================*/
span
{
    /* display: flex; */
    /* flex-direction: column;  */   
    /* font-size: 1.5em; */
    /* width: auto;  */  /* Si on supprime : n'ajuste plus la largeur quand on réduit */
    width:1200px;
    text-align:left; 
    /* background-color: green; */
    /* background-color: red; */
    /* border: 2px black solid; border-radius: 30px; */
}
@media screen and (max-width: 1000px)
{
    span
    {   
        display:flex;
        flex-direction: column;   
        /* text-align:center;  */
       
     }    
}

/*=============  aside : aligne le texte verticalement aligné à gauche ================================*/
aside
{
    display: flex;
    flex-direction: column;      
    text-align:left;
    width:auto; 
    margin:auto;
}
@media screen and (max-width: 1000px)
{
    aside
    {   
        /* flex-direction: column;   */
        /* text-align:center;  */
        /* width: auto; */   /* Si on supprime : n'ajuste plus la largeur quand on réduit */
     }    
}


/* ============== nav : aligne les elements du menu verticalement et centrés ===================*/

nav
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start ;
    align-items:center;
    padding-top:0px;
    padding-right: 30px;
    padding-left: 30px;
    padding-bottom: 20px;
    /* text-align: center; */
    /* background: url('../DOCUMENTS/Titre_MENU.jpg'); */
    /* width:20%; */
    min-width: 600px; 
     
    width:auto; 
    margin:auto; 
    /* margin: 10px; */
    background: linear-gradient(90deg, #FFFF00, #FFA600);
    /* background-color: yellow ; */
    border: 2px black solid; border-radius: 30px; 
}
@media screen and (max-width: 1000px)
{
    nav
    {
/*    display: flex;
    flex-direction: column;
    justify-content: flex-start ;
    align-items:center;  */
    /* text-align: center; */
/*    background: url('../DOCUMENTS/Titre_MENU.jpg');
    width:auto;
    min-width: 300px;  */
/*    border: 2px yellow solid; border-radius: 30px;   */      

/*
        display: flex;
        flex-direction: column;
        min-width: 300px; 
        width:auto; 
        text-align: center;   
*/        
    }
}

/* ------------------------------Footer------------------------------------------- */
footer
{
    display: flex; 
    flex-direction: column;
    flex-wrap: wrap;
    justify-content:space-around; 
    align-items: center;
    text-align: center;
    /* font-size: 1.2em; */
    /* background-color: purple;  */
    width: auto;    /* Si on supprime : n'ajuste plus la largeur quand on réduit */
    
/*    border: 2px black solid; border-radius: 30px; */
}
@media screen and (max-width: 1000px)
{
    footer
    {   
        /* display: flex; */
        
        /* width: auto; */  /* Si on supprime : n'ajuste plus la largeur quand on réduit */
     }    
}   

/*
    align-items: center;
    background-color: purple;
    border: 2px black solid;
    border-radius: 30px;  
*/


/*====================== h1 ===============================*/
h1
{
    /* align-items: center; */
    /* text-align: center; */
    /* font-size: 1.2em;  */
    /* width: auto;   */ /* Si on supprime : n'ajuste plus la largeur quand on réduit */
    /* border: 2px black solid;  border-radius: 30px; */
}
@media screen and (max-width: 1000px)
{
    h1
    {
        /* font-size: 1.8em; */
    }
}


/*====================== h2 ===============================*/
h2
{
    /* font-size: 1.5em; */
    /* margin-bottom: 20px; */
    /* margin-top:40px; */
}
@media screen and (max-width: 1000px)
{
    h2
    {
        /* font-size: 1.8em; */
        /* margin-left: 10px; */
    }
}


/*====================== h3 ===============================*/
h3
{
    /* font-size: 1.5em; */
    /* margin:0px; */
    /* margin-bottom: 0px; */
    /* margin-top:15px; */
    /* padding:0px; */
    /* text-align:center; */
    /* align-items: center; */
}
   
@media screen and (max-width: 1000px)
{
    h3
    {
        /* font-size: 1.8em; */
        /* margin-left: 10px; */
    }
}


/*====================== h4 (Titre centré) ===============================*/
h4
{
    font-size: 1.5em; 
    align-items: center;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 20px;
       
}
@media screen and (max-width: 1000px)
{
    h4
    {
       
    }
}

/*====================== h5 (LES TITRES ENCADRES)===============================*/
h5
{
        font-size: 1.5em; 
        background: linear-gradient(90deg, #FFFF00, #FFA600);
        padding-top:   20px;
        padding-bottom:20px;
        padding-left:  40px;
        padding-right: 40px;
        /* justify-content:space-around; */
        margin-top:0px;
        margin-bottom:0px;
        margin-left:20px;
        margin-right:20px;
        margin:auto; 
        border: 3px black solid;   border-radius: 20px;  
}
@media screen and (max-width: 1000px)
{
    h5
    {
        
    }
}

/*====================== h6 (BOUTONS)===============================*/
h6
{
        font-size: 1.5em; 
        background: linear-gradient(0deg, #1EFF00, #EAFF00); 
        /* background: linear-gradient(0deg, #EEEE00, #EEA700); */
        /* background: linear-gradient(0deg, #FF9D00, #FF4D00); */
        padding-top:   20px;
        padding-bottom:20px;
        padding-left:  40px;
        padding-right: 40px;
        /*margin:50px; */
        margin-top:0px;
        margin-bottom:0px;
        margin-left:20px;
        margin-right:20px; 
        margin:auto; 
        border: 3px black solid;   border-radius: 20px;
        /*align-items: center;*/
        /*text-align: center;  */
}
@media screen and (max-width: 1000px)
{
    h6
    {
        
    }
}

/*==================== p  ====================================*/
p
{
    font-size: 1.2em;  
/*    text-align: left; */
/*     background-color: yellow; */
    padding-top:   10px;
    padding-bottom:10px;
    padding-left:  10px;
    padding-right: 10px;
    margin:0px;
/*    margin-left:10px; */
/*    margin-top:0px; */
/*    margin-bottom:10px; */
/*    border: 2px black solid;   border-radius: 10px;  */
}
@media screen and (max-width: 1000px)
{
    p
    {
/*
        font-size: 1.8em;
        padding-left: 5px; 
        padding-right:5px;
        padding-top:0px;
        padding-bottom:0px;
        margin-left: 10px;
        margin-top: 0px;
        margin-bottom: 5px;
*/
    }
}


/*==================== strong  ====================================*/
strong
{
    /* font-size: 1em;  */
    /* color:red; */
}


/*========================   Commentaires de la rédaction en rouge   ================*/
.redac                        
{
    color:red;
}


/*====================== ul les listes  ===============================*/

ul
{
    text-align:left;  
    font-size: 1.2em; 
    /* margin-top:0px; */
    /* margin-bottom:15px; */
    /* padding:0px; */
}
@media screen and (max-width: 1000px)
{
    ul
    {
        /* font-size: 1.2em;  */     
    }
}


/*====================== li les listes  ===============================*/
li
{
    list-style-type: none; 
    /* list-style-type:disc; */
    /* padding-left: 30px; */
}

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

/*
.avec_puce
{
    
    padding-bottom: 30px;
}
*/



/*==============================  em taille caractères  =================================================================*/

em
{
   /* font-size: x-large; */
   /* text-align: center; */
}

/* ================ figcaption ==============================*/
figcaption
{
       font-size: 1em;

}



/*==============================   FOND D'ECRAN    ==================================================*/

.fond_ecran
{
    /* background-image:url('Essai_Fond_1920_1080.jpg'); */
    /* opacity:0.5; */
}

/*==============================   Taille = 1 em    ==================================================*/

.taille_1em
{
         font-size: 1em;
}





/*===================================Les Containers ===================================================*/

/*--------------------------------  flex_container_titre  --------------------------*/

/*
.flex_container_titre
{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items:center;
    margin:auto;
}
@media screen and (max-width: 1000px)
{
    .flex_container_titre
    {
        
    }
}
*/

/*
.flex_container_accueil
{
    display: flex;
    flex-direction: row;
}
@media screen and (max-width: 1000px)
{
    .flex_container_accueil
    {
        display: flex;
        flex-direction: column;
    }
}
*/

/*
.flex_container_hor_center
{
    display: flex;
    flex-direction: row;
}
@media screen and (max-width: 1000px)
{
    .flex_container_hor_center
    {
        display: flex;
        flex-direction: column;
    }
}
*/


/*----------------------------  On aligne les boites verticalement  ------------------*/
/* .flex_container_vert_center
{
    display: flex;
    flex-direction: column;
    text-align: left;
    align-items: left;
}
@media screen and (max-width: 1000px)
{
    .flex_container_vert_center
    {
        display: flex;
        flex-direction: column;
    }
}
*/

/* #######################"  LES AIDES  ################################ */

/* ======================== center =================================*/
.center
{
    font-size: 1em;
}


.centrage_texte
{
    text-align: center; 
    align-items: center; 
}

.retour_menu
{
/*    margin-top: 50px ; */
/*    width: 1000px;     */
/*    margin: auto;      */
/*    padding: 100px;    */
 /*   text-align:center; */
 /*   align-items: center;*/  
}

/*====================== bouton : joli bouton jaune  ==================*/
.bouton
{
    background: linear-gradient(90deg, #FFFF00, #FFA600);
    /* display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:space-around; */
    background-color: yellow; 
    padding: 30px; 
    margin:20px; 
    /* width: 300px; */
    /* margin:auto; */
    text-align: center; 
    font-size: 1em;
    /* background-color: pink; */
    border: 2px black solid;                 
    border-radius: 30px; 
}
/*
 @media screen and (max-width: 1000px)
{
    .bouton
    {
        
    }
}
*/


/*====================== element : vilain bouton bleu  ==================*/
.element
{
    font-size: 25px;
    background: linear-gradient(90deg, #FFFF00, #FFA600);
    /* background-color: skyblue; */
    border-radius: 10px 30px 0px 90px;
    padding: 100px;
}


/*======================================== .rubrique ===========================================*/
/*
.rubrique
{
    padding: 2px;
    text-align: center;
    font-size: 1.2em;
    border: 2px black solid;                 
    border-radius: 30px;
}

 @media screen and (max-width: 1000px)
{
    .rubrique
    {
        padding: 2px;
        text-align: center;
        font-size: 1.5em;
        border: 2px black solid;                  
        border-radius:50px; 
    }
}
*/

/*======================================== .liens ===========================================*/
/* .liens
{
    display : flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: x-large;
    padding-left: 20px;
    padding-right:20px;
    padding-top: 2px;
    padding-bottom: 2px;
    justify-content: space-around;
}

 @media screen and (max-width: 1000px)
{
    .liens
    {
        display :flex;
        flex-direction:column;
        padding-bottom: 20px;
        margin: 20px ;
        text-align: center;
        font-size: x-large;
    }
}
*/

/*======================================== .en_tete ===========================================*/
/* .en_tete
{
    display : flex; 
    flex-direction: row;
    padding-left: 20px;
    padding-right:20px;
    justify-content: space-around;
    margin-left:150px;
    margin-right:150px;
}

 @media screen and (max-width: 1000px)
{
    .en_tete
    {
 
    }
}
*/