/*
Mise en pages des articles de la page home
Classification selon le code articles_home.php
Attention !

*/


/*
Données générales de la section des articles pour la page home
*/
.articles_home
{
     float:left;
     width:100%;
     position: relative;
     top: 0;
     z-index: 5;
     background: linear-gradient(to left,#a02714,#006bb3);
}

/*
Div générale pour l'article important et les articles secondaires
*/
.articles_importants
{
     float:left;
     width: 100%;
     position: relative;
}

/*
Div avec un id générale pour l'article important
*/
#article_important
{
     float: left;
     /*! height: 600px; */
     width: 100%;
     min-width: 280px;
     margin: 40px 0;
}

/*
L'article important
*/
.article_important
{

     /*! height: 600px; */
     width:100%;
     background: #50496320;
     color: #ffffff;
     text-decoration-line: unset;
     display: table;
     float:left;

}

/*
le div avec un id pour le titre de l'article important
*/
#titre_article_important
{
     float: left;
     width: 100%;
     /*! margin: 5%; */
     height: 100px;
}

/*
Le titre de l'article important
*/
.titre_article_important
{
     margin: 20px 10% 0px 10%;
     font-size: 1.2em;
     border-bottom: 2px solid #fff;
}

/*
Le div  avec un id pour le paragraphe général de l'article important
*/
#paragraphe_article_important
{

     float: left;
     width: 100%;
     /*! margin: 2% 5%; */
     /*! height: 500px; */
}

/*
Le div avec un id pour le paragraphe seul de l'article important
*/
#paragraphe_ai
{

     /*! height: 400px; */
     float: left;
     width: 100%;
}

/*
Le paragraphe de l'article important
*/
.paragraphe_article_important
{
     margin: 20px 10px 0px 10px;
     font-size: 0.9em;
}

.texte1_paragraphe_article_important
{
    display:none;
    font-style: normal;
}

.texte2_paragraphe_article_important
{
    display:none;
    font-style: normal;
}

/*
Le div avec un id pour le lien du paragraphe de l'article important
*/
#lien_paragraphe_ai
{

     height: 50px;
     float: left;
     width: 100%;
     margin:20px 0;
}

/*
Le lien du paragraphe de l'article important

Le lien normal et le lien:hover
*/
.lien_paragraphe_ai
{
     background-color: #222222;
     box-shadow: 0px 11px 5px -10px #222222;
     float: right;
     color: white;
     cursor: pointer;
     height: 27px;
     width: 120px;
     margin-right: 10px;
     text-decoration: none;
     text-align: center;
     padding-top: 5px;
     margin-top: 12px;
     border-radius: 10px;
     font-size: 0.8em;
}

.lien_paragraphe_ai:hover
{
     background-color: #fbba00dd;
     color: #222222;
}


/*
div pour les articles secondaires
*/
.articles_secondaires
{
     /*! height: 600px; */
     width: 100%;
     float: left;
     min-width: 280px;
}

/*
L'article secondaire premier et l'article secondaire
*/
.article_secondaire_p
{

     /*! height: 300px; */
     width:100%;
     background: #50496320;
     color: #ffffff;
     text-decoration-line: unset;
     display: table;
     float:left;
     margin: 0 0 40px 0;
}

.article_secondaire
{
     /*! height: 300px; */
     width: 100%;
     background: #50496320;
     color: #ffffff;
     text-decoration-line: unset;
     display: table;
     float:left;
     margin: 0 0 40px 0;
}

/*
Div pour le titre des articles secondaires
*/
.titre_as
{
    float:left;
    height:50px;
    width:100%;
}

/*
Titre des articles secondaires
*/
.titre_article_secondaire
{
    /*! margin: 20px 10px 0px 10px; */
    /*! font-size: 1.2em; */
    /*! text-align: center; */
    /*! border-bottom: 2px solid #fff; */
    /*! border-top: 2px solid #fff; */
    margin: 20px 10% 0px 10%;
    font-size: 1.2em;
    border-bottom: 2px solid #fff;
}

.article_secondaire .titre_article_secondaire
{
     color:#fff;
}

/*
Div pour la section des paragraphes des articles secondaires
*/
.paragraphe_as
{
    float: left;
    /*! height: 250px; */
    width: 100%;
}

/*
Div pour le texte des paragraphes des articles secondaires
*/
.texte_as
{
     /*! height: 200px; */
     float: left;
     width: 100%;
}

/*
Les paragraphes des articles secondaires
*/
.paragraphe_article_secondaire
{
    margin: 10px 10px 0px 10px;
    font-size: 0.9em;
}

.article_secondaire .paragraphe_article_secondaire
{
     color:#fff;
}

/*
Div pour les liens des paragraphes des articles secondaires
*/
.lien_as
{
     float: left;
     height: 50px;
     width: 100%;
}

/*
Liens des paragraphes des articles secondaires
*/
.lien_paragraphe_as
{
     background-color: #222222;
     box-shadow: 0px 11px 5px -10px #222222;
     float: right;
     color: white;
     cursor: pointer;
     height: 25px;
     width: 50px;
     margin-right: 10px;
     text-decoration: none;
     text-align: center;
     padding-top: 4px;
     margin-top: 15px;
     border-radius:10px;
     font-size: 0.8em;
}

.article_secondaire_p .lien_paragraphe_as:hover
{
     background-color: #fbba00dd;
     color:#222222;
}

.article_secondaire .lien_paragraphe_as:hover
{
     background-color: #fbba00dd;
     color: #222222;
}


/*
Div générale pour les articles tertiaires
*/
.articles_tertiaires
{
     float:left;
     width: 100%;
     position: relative;
     /*! height: 920px; */
}

/*
L'article tertiaires premier, plus les deux du milieu et le dernier
*/
.article_tertiaire_p
{

    height: 200px;
    width: 100%;
    min-width: 280px;
    background: #50496320;
    color: #ffffff;
    text-decoration-line: unset;
    display: table;
    float:left;

    margin: 0 0 40px 0;
}

.article_tertiaire_d
{
    height: 200px;
    width: 100%;
    min-width: 280px;
    background: #50496320;
    /*! color: #fff; */
    text-decoration-line: unset;
    display: table;
    float:left;
    margin: 0 0 40px 0;
}

.article_tertiaire
{
    height: 200px;
    width: 100%;
    min-width: 280px;
    background: #50496320;
    color: #ffffff;
    text-decoration-line: unset;
    display: table;
    float:left;
    margin: 0 0 40px 0;
}

/*
Div pour le titre des articles tertiaires
*/
.titre_at
{

     float: left;
     width: 100%;
     height: 50px;
}

/*
Titre des articles tertiaires
*/
.titre_article_tertiaire
{

     /*! font-size: 1em; */
     /*! margin: 5px 10px 0px 10px; */
     /*! text-align: center; */
     /*! border-bottom: 2px solid #fff; */
     /*! border-top: 2px solid #fff; */
     margin: 20px 10% 0px 10%;
     font-size: 1.2em;
     border-bottom: 2px solid #fff;
}

.article_tertiaire_d .titre_article_tertiaire
{
     color:#fff;
}

/*
Div pour les paragraphes en entier des articles tertiaires
*/
.paragraphe_at
{

     float: left;
     width: 100%;
     height: 180px;
}

/*
Div pour les textes du paragraphe des articles tertiaires
*/
.texte_at
{

     float: left;
     width: 100%;
     height: 120px;
}

/*
Paragraphe des articles tertiaires
*/
.paragraphe_article_tertiaire
{

     margin: 10px 10px 0 10px;
     font-size: 0.9em;
}

.article_tertiaire_d .paragraphe_article_tertiaire
{
     color:#fff;
}

/*
Div pour les liens du paragraphe des articles tertiaires
*/
.lien_at
{

     float: left;
     width: 100%;
     height: 60px;
}

/*
Liens du paragraphe des articles tertiaires
*/
.lien_paragraphe_at
{

     background-color: #222222;
     box-shadow: 0px 11px 5px -10px #222222;
     float: right;
     color: white;
     cursor: pointer;
     height: 25px;
     width: 25px;
     margin-right: 10px;
     text-decoration: none;
     text-align: center;
     margin-top: 8px;
     border-radius: 20px;
     font-size: 1.3em;
}

.article_tertiaire_p .lien_paragraphe_at:hover
{
     background-color: #fbba00dd;
     color: #222222;
}

.article_tertiaire .lien_paragraphe_at:hover
{
     background-color: #fbba00dd;
     color: #222222;
}

.article_tertiaire_d .lien_paragraphe_at:hover
{
     background-color: #fbba00dd;
     color: #222222;
}

@media (min-width:370px){

    .texte1_paragraphe_article_important
    {
        display:inherit;
    }


}

@media (min-width:600px){

    .texte2_paragraphe_article_important
    {
        display:inherit;
    }
}

@media (min-width:1138px){

     /*
     L'article important
     */
     .article_important
     {
          width: 80%;
          color: #ffffff;
          margin: 0px 10% 0px 10%;
          background: #50496320;
     }


     /*
     Le div  avec un id pour le paragraphe général de l'article important
     */
     #paragraphe_article_important
     {

          float: left;
          width: 100%;
          /*! height: 440px; */
     }

     /*
     Le div avec un id pour le paragraphe seul de l'article important
     */
     #paragraphe_ai
     {

          /*! height: 390px; */
          float: left;
          width: 100%;
     }
     /*
     Le div avec un id pour le lien du paragraphe de l'article important
     */
     #lien_paragraphe_ai
     {

          height: 50px;
          float: left;
          width: 100%;
     }

     /*
     Le lien du paragraphe de l'article important

     Le lien normal et le lien:hover
     */
     .lien_paragraphe_ai
     {
          background-color: #222222;
          box-shadow: 0px 11px 5px -10px #222222;
          float: right;
          color: white;
          cursor: pointer;
          height: 30px;
          width: 120px;
          margin-right: 10px;
          text-decoration: none;
          text-align: center;
          padding-top: 5px;
          margin-top: 10px;
          border-radius: 10px;
          font-size: 0.9em;
     }

     .lien_paragraphe_ai:hover
     {
          background-color: #fbba00dd;
     }


     /*
     div pour les articles secondaires
     */
     .articles_secondaires
     {
          /*! height: 300px; */
          width: 100%;
          float: left;
     }

     /*
     L'article secondaire premier et l'article secondaire
     */
     .article_secondaire_p
     {

         /*! height: 300px; */
         width: 35%;
         /*! width: 40%; */
         /*! background: #006bb320; */
         color: #ffffff;
         text-decoration-line: unset;
         display: table;
         margin: 0px 5% 40px 10%;
         float:left;

     }

     .article_secondaire
     {

         /*! height: 300px; */
         width: 35%;
         /*! width: 40%; */
         background: #50496320;
         color: #ffffff;
         text-decoration-line: unset;
         display: table;
         margin: 0px 10% 40px 5%;
         float:left;
     }

     .article_secondaire .titre_article_secondaire
     {
          color:#fff;
     }

     /*
     Les paragraphes des articles secondaires
     */
     .paragraphe_article_secondaire
     {
         margin: 10px 10px 0px 10px;
     }

     .article_secondaire .paragraphe_article_secondaire
     {
          color:#fff;
     }

     /*
     Div pour les liens des paragraphes des articles secondaires
     */
     .lien_as
     {
          float: left;
          height: 50px;
          width: 100%;
     }

     /*
     Liens des paragraphes des articles secondaires
     */
     .lien_paragraphe_as
     {
          background-color: #222222;
          box-shadow: 0px 11px 5px -10px #222222;
          float: right;
          color: white;
          cursor: pointer;
          height: 30px;
          width: 60px;
          margin-right: 10px;
          text-decoration: none;
          text-align: center;
          padding-top: 5px;
          margin-top: 10px;
          border-radius:10px;
          font-size: 0.9em;
     }

     .article_secondaire_p .lien_paragraphe_as:hover
     {
          background-color: #fbba00dd;
          color:#222222;
     }

     .article_secondaire .lien_paragraphe_as:hover
     {
          background-color: #fbba00dd;
     }


     /*
     Div générale pour les articles tertiaires
     */
     .articles_tertiaires
     {
          float:left;
          width: 100%;
          position: relative;
          /*! height: 230px; */
     }

     /*
     L'article tertiaires premier, plus les deux du milieu et le dernier
     */
     .article_tertiaire_p
     {

         height: 230px;
         width: 20%;
         min-width: 20%;
         background: #50496320;
         color: #ffffff;
         text-decoration-line: unset;
         display: table;
         margin: 0px 0% 40px 10%;
         float:left;
     }

     .article_tertiaire_d
     {
         height: 230px;
         width: 10%;
          min-width: 20%;
         background: #50496320;
         color: #ffffff;
         text-decoration-line: unset;
         display: table;
         margin: 0px 10% 40px 0%;
         float:left;
     }

     .article_tertiaire
     {
         height: 230px;
         width: 10%;
          min-width: 20%;
         background: #50496320;
         color: #ffffff;
         text-decoration-line: unset;
         display: table;
         margin: 0px 0% 40px 0%;
         float:left;
     }

     .article_tertiaire_p .titre_article_tertiaire
     {
          color:#fff;
     }

     .article_tertiaire_d .titre_article_tertiaire
     {
          color:#ffffff;
     }

     /*
     Paragraphe des articles tertiaires
     */
     .paragraphe_article_tertiaire
     {

          margin: 10px 10px 0 10px;
          font-size: 0.8em;
     }

     .article_tertiaire_p .paragraphe_article_tertiaire
     {
          color:#fff;
     }

     .article_tertiaire_d .paragraphe_article_tertiaire
     {
          color:#ffffff;
     }
     /*
     Div pour les liens du paragraphe des articles tertiaires
     */
     .lien_at
     {

          float: left;
          width: 100%;
          height: 60px;
     }

     /*
     Liens du paragraphe des articles tertiaires
     */
     .lien_paragraphe_at
     {

          background-color: #222222;
          box-shadow: 0px 11px 5px -10px #222222;
          float: right;
          color: white;
          cursor: pointer;
          height: 25px;
          width: 25px;
          margin-right: 10px;
          text-decoration: none;
          text-align: center;
          margin-top: 27px;
          border-radius: 20px;
          font-size: 1.3em;
     }

     .article_tertiaire_p .lien_paragraphe_at:hover
     {
          background-color: #fbba00dd;
     }

     .article_tertiaire .lien_paragraphe_at:hover
     {
          background-color: #fbba00dd;
          color: #222222;
     }

     .article_tertiaire_d .lien_paragraphe_at:hover
     {
          background-color: #fbba00dd;
     }

}