:root {
  --main-bg-color: #1a89a0; /* utilisation : var(--main-bg-color)*/
  --second-bg-color: #F1FFF1; /* utilisation : var(--second-bg-color)*/ 
}

/* =========================
   Base générale
   ========================= */
html {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
}


body {
    background: #FFF;
    margin: 0;
    padding: 0;
    font-size: 17px;
    text-align: center;
}
@media (max-width: 640px) {
  body {
    font-size: 14px;
  }
}
#banniere {
	padding: 0.5rem;
	font-size: clamp(1.4rem, 6vw, 2.6rem);
    font-weight: 600;
    text-align: center;
    background: var(--main-bg-color);
    color: #fbfbfb;

}
#banniere>#home {
    position: absolute;
    left: 1rem;
    top: 1rem;
    font-size: 0.7rem;
    color: white;
}
#chapeau {
    padding: 1vw;
    width: 96vw;
    background: var(--second-bg-color);
    border-radius: 1rem;
    text-align: center;
}

#imageBiblio{
	width: min(80%, 400px);
    display: block;
    margin: 0 auto;
}
/* =========================
   Champ de recherche
   ========================= */
#search-bar{
    border: 1px solid #888;
    background: #DDD;
    margin: 4vw;
    padding: 1vw;
    border-radius: 4vw;
    font-size: 0.8rem;
}
button#searchBtn {
    width: 2rem;
    height: 2rem
}

select, input {
    width: 70vw;
    padding: 0.5rem;
    margin: 1vw;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
    background: #d8fed9;
}
.filter, .sorter {
    width: min(40vw, 20rem);
}
#counterMessage {
    font-weight: 600;
    color: #b10000;
}

/* Champs descriptif des ouvrages */
.book-item {   
	position:relative;
    border-top: 1px solid #999;
    padding: 1vw;
	width: 96vw;
	text-align: left;
}
/* Etiquettes des champs*/
.field.col0::before {content: ""}
.field.col1::before {content: "Disponible"; background: #00ab00; color: white;font-size: 0.9rem;;font-weight: 600; padding : 0 1rem;}
.field.col2::before {content: "Année : "}
.field.col3::before {content: "Auteur(s) : "}
.field.col4::before {content: "& "}
.field.col5::before {content: "Code : "}
.field.col6:before {content: "Type ouvrage : "}
.field.col7::before {content: "Editeur : "}
.field.col8::before {content: "Cédé par : "}
.field.col9::before {content: ""}
.field.col10::before {content: ""}
 
/* Champs masqués */
.field.col8 {display: none;}
 
/* Mis en forme des Champs  */
.field.col0	 {font-size: 1rem;; font-weight: 900;}
.field.col1 { font-size: 0;/* masque le texte pour laisser place au before...*/}
.field.col3,
.field.col4 {font-size: 0.9rem;font-style: italic; font-weight: 600; }
.field.col10 img { position: absolute;right: 0rem;height: 6rem;bottom: 1rem; border: 1px #888 solid;border-width: 1px 4px 4px 1px;}

/*Ordonnancement visuel */
.field.col0 {order: 0}
.field.col3 {order: 1}
.field.col4 {order: 2}
.field.col2 {order: 3}
.field.col1 {order: 3}
.field.col6 {order: 4}
.field.col7 {order: 5}
.field.col5 {order: 6}
.field.col9 {order: 7}
.field.col10 {order: 8}



/* FILTERS  ----------------------*/ 
.filter {
    display: none;
}
/*Display and order */
.filter[data-field="auteur"],
.filter[data-field="type"] {
  display: inline-block;
}
.filter[data-field="auteur"] { order: 1; }
.filter[data-field="type"] { order: 2; }

/* SORTERS ----------------------*/ 

.sorter {
  display: none;
}

/*Display and order */
.sorter[data-field^="titre"],
.sorter[data-field="annee"]{
  display: inline-block;
}
.sorter[data-field="titre"] { order: 1; }
.sorter[data-field="annee"] { order: 2; }