/*
 * Utilisé dans layouts/partials/head.html
 * Utilisé dans layouts/partials/print_one.html
 */

html, body{
    font-family: "Segoe UI",Roboto,Oxygen, Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #4a4a4a;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
}
*, ::after, ::before {
  box-sizing: inherit;
}

ul {
    list-style: disc outside;
    margin-left: 0;
    margin-top: 5px;  /* avec la ol englobante*/
    margin-bottom: 0.5em;
    padding-left: 1em; /* puce par rapport au debut de ligne */
}
ol {
    list-style-position: outside;
    list-style-type: decimal;
    margin-left: 0;
    margin-top: 1em;
    margin-bottom: 0.5em;
    padding-left: 1em; /* puce par rapport au debut de ligne */
}
li {
    list-style-position: outside;
    margin: 0;
    margin-left: 10px; /* entre la puce et le texte */

    padding-top: 0;
    padding-bottom: 0;
    padding-left: 5px;  /* entre la puce et le texte */
    padding-top: 0;

    color: #303030;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.5;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

th {
    border-bottom: 1px solid black;
}


a {
    text-decoration: none;
    color: #00947e;
}

a:hover {
    color: #3273dc;
/*    font-weight: 600;*/
}

h2 {
    font-size: 1.5em;
    margin-bottom: .5em;
    margin-top: .5em;
}

hr {
    background-color: #f5f5f5;
    border: none;
    display: block;
    height: 2px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    width: 98%;
}




.web_h_icon {
    height: 22px;
}
.web_v_icon{
    width: 22px;
}

.web-noprint{  /* unused */
    @media print {
        display: none; /*!important;*/
    }
    padding-bottom: 0em;
    font-size: 18px;
    list-style-type: disc;
    list-style-position: inside;
}


.web_h4{
    color: #363636;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.125;
    padding: 10px;
}

.web_h1{
    color: #363636;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.125;
    padding: 10px;
    text-align: center;
}

.web_subtitle{
    color: #363636;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.125;
    padding: 10px;
    padding_left: 0.5em;
    text-align: center;
    font-style: italic;
    margin-top: 10px;
    margin-bottom: 0;
}

/*
 * Toplevel menu
 * used in layouts/_partials/header.html
 * defined in hugo.toml with .Pre :
 */


.web_home::before{
  content: url("../images/home-white.svg");
  height: 24px;
  display:inline-block;
}



.web_price::before{
  content: url("../images/euro-white.svg");
  height: 24px;
  display:inline-block;
}



.web_season::before{
  content: url("../images/season-white.svg");
  height: 24px;
  display:inline-block;
}


.web_difficulty::before{
  content: url("../images/toque-white.svg");
  height: 24px;
  display:inline-block;
}


.web_service::before{
  content: url("../images/service-white.svg");
  height: 24px;
  display:inline-block;
}


.web_books::before{
  content: url("../images/books-white.svg");
  height: 24px;
  display:inline-block;
  text-align: center;
}


/*
 * pour le menu de books dans layouts/partials/books.html
 */

.web_menu_color{
    background-color: #00947e;
    color:white;
}
.web_menu_color:hover{
    background-color:#00b89c;
    /*color:#005511;*/
}

.web_dld_td{
    text-align: left ;
    height: 60px;
    vertical-align: middle;
    padding: 5px;
}

.web_dld_a{
    display:inline-block;
    vertical-align: middle;
    width: 100%;
    margin: 0;
 /*   padding: 5px;  un Padding rajoute un espace blanc entre les élements du menu*/
}

.web_dld_img{
    height: 24px ;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 0;
    padding-bottom:0;
}




/* Pour le contenu de summary.html */

.web_card {
    box-sizing: border-box;
    border-radius: 6px;
    box-shadow: 0 .5em 1em -.125em rgba(10,10,10,.1);/**/
    text-align: center;
}

.web_card_content {
    padding-top: 1.3rem;
    padding-left: 1.3rem;
    padding-right: 1.3rem;
    padding-bottom: 1.3rem;
    text-align: left;
}

.web_card_title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.125;
}

.web_card_author {
    text-align: left;
    font-size: 1rem;
    font-weight: 400;
    font-style: italic;
}

.web_card_anchor {
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
    border-radius: 4px;
    padding: .75rem;
    width: 100%;
}




.web_small{
    font-size: 0.9em;
}

.web_calendar{
    font-size: 0.9em;
}
.web_calendar::before{
  padding-right: 11px;
  content: url("../images/calendar.svg");
}

.web_table{
    font-size: 0.9em;
    width: 100%;
    text-align: center; /* Ne fonctionne pas ici, a cause de bulma-min.css donc mettre dans le html*/
    padding: 3px;
    margin-top: 5px;
}

.web_td{
    font-size: 0.9em;
    width: 33%;
    text-align: center; /* Ne fonctionne pas ici, a cause de bulma-min.css donc mettre dans le html*/
    padding: 3px;
    vertical-align: middle;
}
.web-top-border {
    border-top: 1px solid;
 }
/*
.fb_v_icon{
    height: 20px;
    alt: "icon";
}*/


/*
 * on est obligé de mettre l'image dans un background
 * pour avoir une URL absolue qui ne dépend pas de la position de la page dans l'arborescence
 */
.web_summary{
    height: 24px;
    display:block;
    text-align: center;
    background-size: auto 24px;
    background-repeat: no-repeat;
    background-position: center;
    resize: both;
}

.web_servings{
  background-image: url("../images/servings.svg");
}

.web_prep_time{
  background-image: url("../images/prepare.svg");
}

.web_cook_time{
  background-image: url("../images/cook.svg");
}

.web_price_1{
  background-image: url("../images/euro-black.svg");
}

.web_price_2{
  background-image: url("../images/euro-2-black.svg");
}

.web_price_3{
  background-image: url("../images/euro-3-black.svg");
}

.web_difficulty_1{
  background-image: url("../images/toque1.svg");
}

.web_difficulty_2{
  background-image: url("../images/toque2.svg");
}

.web_difficulty_3{
  background-image: url("../images/toque3.svg");
}

.web_season_1{
  background-image: url("../images/été.svg");
}

.web_season_2{
  background-image: url("../images/automne.svg");
}

.web_season_3{
  background-image: url("../images/hiver.svg");
}

.web_season_4{
  background-image: url("../images/printemps.svg");
}


.web_service_1{
  background-image: url("../images/entrée.svg");
}
.web_service_2{
  background-image: url("../images/soupe.svg");
}
.web_service_3{
  background-image: url("../images/plat.svg");
}
.web_service_4{
  background-image: url("../images/dessert.svg");
}

/*
 * Pour le contenu de books.html
 */

.web-book-list{
    margin: 10px;
    padding: 10px;
}

/*
 * Pour le logi dans list.html
 */

.web_big_img{
    height: 30px;
    margin-right: 10px;
}

/*
 * partials/footer.html
 */

.web_left_center {
    text-align:left;
}
.web_right_center {
    text-align:right;
}
.web_footer{
    box-sizing: border-box;
    width: 95%;
    margin-left: 5px;
    margin-right: 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 90%;
    font-style: italic;
}

.web_footer_elem{
    width: 33%;
}
@media (max-width: 800px) {
    .web_footer_elem{
      width:100%;
    }
    .web_left_center {
        text-align:center;
    }
    .web_right_center {
        text-align:center;
    }
}
/*
 * Pour layouts/_defaults/list.html
 */


.web_section {
    box-sizing: border-box;
    padding: 0.8rem;
}
.web_section_header {
    box-sizing: border-box;

    border-radius: 6px;
    font-size: 2.5em;
    /*background-color: red;*/
    padding-left: 1.25%;
    padding-right: 1.25%;
    padding-bottom: 0;
    padding-top: 0;
}

.web_column {   /* The column that holds several items, 4xN or 1xN depending on display */
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.web_column_content {
    box-sizing: border-box;
    border-radius: 6px;
    box-shadow: 0 .5em 1em -.125em rgba(10,10,10,.1);/**/
    width: 22.5%;
    height: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    margin: 1.25%;  /* 8 margins = 10 % */
}
@media (max-width: 800px) {
    .web_column_content {
        width: 100%;
    }
}

/*
 * pour statstable
 */

.web_meta_6{
    font-size: 0.9em;
    width: 16.66%;
    text-align: center; /* Ne fonctionne pas ici, a cause de bulma-min.css donc mettre dans le html*/
    padding: 0;
    vertical-align: middle;
    border-right: 1px solid #dbdbdb;
    display: block;
}

@media (max-width: 1000px) {
    .web_meta_6 {
        width: 50%;
    }
    .web_meta_6_right{
        border-right: 0;
    }
}

/*
 * pour partials/alert.html
 */

.web_alert{
    position: absolute;
    bottom: 0;
    right: 0;
    z-index:99;
    background-color: #f14668;
    color: #fff;
    border-radius: 4px;
    padding: 1.25rem 2.5rem 1.25rem 1.5rem;
}
.web_hidden{
    display: none;
}

.web_menu_a{
    /* display:inline-block; */
    text-align: center; /* Ne fonctionne pas ici, a cause de bulma-min.css donc mettre dans le html*/
    padding: 0;
    padding-left: 10px;
    vertical-align: middle;
    border: 0;
    display: block;
    vertical-align: middle;
    margin: 0;
 /*   padding: 5px;  un Padding rajoute un espace blanc entre les élements du menu*/
}

/* pour _default/single.html */

.web_single{
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    padding: .75rem;

    border-radius: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.web_content {
    padding: .5em;
    padding-bottom: 10px;
    padding-top: 10px;
    margin: 0;


}

/*
 DONE: dans summary, l'ancre n'est pas sur tout le contenu de la cellule verte, mais que sur le texte
 DONE: dans http://localhost:1313/les-recettes-de-la-famille/recettes/moelleux-chocolat/ la table n'est pas à 100%
 DONE: regression resultat de search: images trop grosses
 DONE: layouts/partials/statstable.html
 DONE: layouts/partials/alert.html
 DONE: layouts/partials/searchResults.html
 DONE: layouts/_default/list.html
 DONE: layouts/index.html
 DONE: layouts/_default/single.html
 DONE: taxonomy/terms.html
 DONE: layouts/partials/header.html : le menu du haut
 DONE: layouts/partials/head.html: remove bulma.css
 TODO: Changer le nom de la css
 DONE: changer tous les fb_ en web_
 DONE: partials/book_footer.html : rien a faire, la classe n'est pas prise dans bulma
 DONE: partials/book_header.html : rien a faire, la classe n'est pas prise dans bulma
 TODO: il reste des site.BaseURL dans certains html
 */

.web-menu{  /* le div du menu*/
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    vertical-align: center;
    background-color: #00947e; /**/
    color: white;
    display: flex;
    flex-direction: row;
    /* justify-content: space-between;  */
}


.web-sub-menu{  /* le div du menu*/
    flex-grow: 0;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    vertical-align: center;
    /* background-color: red; /*#00947e;*/
    color: white;
    display: flex;
    flex-direction: row;
   /* justify-content: space-between;*/
}


.web_menu_search{
    display: flex; /*;*/
    flex-direction: row-reverse;
    align-items: center;

    /* pour le positionnement du search dans le menu */
    flex-grow: 1;
    margin-left: auto;
    align-self: stretch;

    margin: 0;
    padding:  10px;

    color:white;
    text-decoration: none;
}


.web_menu_div{
    margin: 0;
    width: 100%;
    text-align: left;

    padding: 10px;
    padding-right: 15px;
}


.a_menu_item{
    display: flex;
    align-items: center;
    margin: 0;
    text-align: left;
    color:white;
    background-color: #00947e;
    text-decoration: none;
    align-self: start center;

    text-align: center;
    padding: 0;
    border: 0;
    vertical-align: middle;
}
.a_menu_item:hover{
    background-color: #00b89c;
    text-decoration: none;
    color:white;
}

@media (min-width: 1070px) {
    .web-sub-menu{
        display: flex;
    }
    #navBarMenu{
        display: flex;
        class: "foo";
    }
    .web_menu_search{
        display: flex;
    }
}

@media (max-width: 1070px) {
    .web-menu{
        flex-direction: column;
    }
    .web-sub-menu{
        display: none;
        flex-direction: column;
    }
    .web_menu_search{
        display: none;
        flex-direction: row;
        margin-left: 0;
        margin-right: auto;
        width: 100%;
        color: #00947e;
        background-color: #f2fff2;
    }
    .a_menu_item{
        color: #00947e;
        background-color: #f2fff2;
    }
    .a_menu_item:hover{
        color: #f2fff2;
        background-color: #00b89c;
    }

    .web_home::before{
      content: url("../images/home-green.svg");
      width: 22px;
    }
    .web_home:hover::before {
      content: url("../images/home-white.svg");
      width: 22px;
    }

   .web_price::before{
      content: url("../images/euro-green.svg");
      width: 22px;
    }
    .web_price:hover::before {
      content: url("../images/euro-white.svg");
      width: 22px;
    }
   .web_season::before{
      content: url("../images/season-green.svg");
      width: 22px;
    }
    .web_season:hover::before {
      content: url("../images/season-white.svg");
      width: 22px;
    }
   .web_difficulty::before{
      content: url("../images/toque-green.svg");
      width: 22px;
    }
    .web_difficulty:hover::before {
      content: url("../images/toque-white.svg");
      width: 22px;
    }

   .web_service::before{
      content: url("../images/service-green.svg");
      width: 22px;
    }
    .web_service:hover::before {
      content: url("../images/service-white.svg");
      width: 22px;
    }

   .web_books::before{
      content: url("../images/books-green.svg");
      width: 22px;
    }
    .web_books:hover::before {
      content: url("../images/books-white.svg");
      width: 22px;
    }


}




.rdf_top{  /* le div avec le logi*/
   padding: 0;
    margin: 0;

    box-sizing: border-box;
    height: 80px;
    vertical-align: center;
    background-color: #00947e;
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}


.rdf_burger{
    position: absolute;
    top: 20px;
    right: 30px;
    padding: 10px;
    align-self: right;
    display: none;
    color: red;
    /* onclick="myFunction()"; */
}


.rdf_burger::before{
  content: url("../images/burger-white.svg");
  width: 45px;
}

@media (max-width: 1070px) {
   .rdf_burger{
        display: inline-block;
        color: green;
   }
   #temoin{
        content: "un autre texte";
        class: "foo";
        color: green;
   }
}


.web_search_int{
     padding:  10px;
     margin: 0;

}

.web_search_button{
     padding:  10px;
     margin: 0;
     margin-right: 20px;
     background-color: #00947e;
     color: white;
     border-style: solid;
     border-color: #f2fff2 #f2fff2 #005533 #005533;
}

.web_search_button:active{
     border-color:  #225533 #225533 #f2fff2 #f2fff2;
}