/* Importe la police de caractère 'Tinos' */
@import url('https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap');

article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}

body {font-family: 'Tinos', serif; width:100%; height:100%; margin:0; padding:0;}

a:link {color: #000099; text-decoration: none;} /* lien non-visité */
a:visited {color: #660066; text-decoration: none;} /* lien visité */
a:hover {color: #000099; text-decoration: none;} /* lien survolé */
a:active {color: #000099; text-decoration: none;}

li {list-style-position: outside; font-size : 12pt; text-align: justify;} /*list-style-type: disc;*/

p.paragraph {font-size : 12pt; color: #000000; text-align: justify; text-indent: 20px;}
p.paragraph2 {font-size : 12pt; color: #000000; text-align: justify;}

h1 {font-size : 20pt; color: #8b4513; text-align: center; border: 2px solid #000000; padding: 15px;} /* Titres encadrés */
h5 {font-size : 18pt; color: #000099; text-align: center;}
h2 {font-size : 15pt; color: #8b4513; text-decoration: underline;}
h3 {font-size : 14pt; color: #000099; margin:20px;} /* Titres de blog */
h4 {font-size : 14pt; color: #000000; font-style: italic; font-weight: normal; margin:20px;} /* Dates sur les post de blog */

#container {padding-bottom:10px; padding-right:10px; padding-left:10px; padding-top:20px; margin-top:80px;} /* margin-top permet de commencer en-dessous du header */

#banniere a:link {color: #000000; text-decoration: none;}
#banniere a:visited {color: #000000; text-decoration: none;} /* lien visité */
#banniere a:hover {color: #FF3300; text-decoration: none; font-weight: bold;} /* lien survolé */
#banniere a:active {color: #000000; text-decoration: none;}

#banniere {background:url('Images/bg-header_litt.jpg') top left repeat; height:88px; position:fixed; top:0; left:0; right:0; z-index:10; padding-top:8px;} /* z-index positionne le header au-dessus du reste */

.fournisseur {display: inline-block; margin: 5px; vertical-align: middle;} /* Les blocks avec les logos des sites de vente */
.fournisseur img {max-height: 75px; max-width: 75px;
    opacity: 0; /* règle l'opacité à 0 pour permettre une apparition estompée à l'ouverture de la page */
    animation: 1s ease-in forwards fadein;  /* animation "fadein" d'1s pour faire apparaître les logos */
}
.fournisseur img:hover {filter: blur(1px);} /* applique un flou aux logos au survol */

/* permet de créer des tableaux en ajoutant à un DIV class="table" ou class="table nobg" (si on ne veut pas de background ni d'ombre) */
/* les cellules sont d'autres DIV avec class="table_cell" */
/* box-shadow : ombre déplacé de 0 0 (sur place) floutée d'1em (1 unité relative) grise et à l'intérieur */
/* disposition de type flex avec des éléments qui passent à la ligne suivante si écran trop petit et une distribution horizontale équilibrée */
/* align-items: center aligne les flex-box verticalement au centre */
.table {background-image: url('Images/bg-main.jpg'); padding: 30px; box-shadow: 0 0 1em gray inset; display: flex; flex-flow: row wrap; justify-content: space-evenly; gap: 1rem;}
.nobg {background: none; box-shadow: none;}
.table_cell {display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
/* Pour permettre au texte d'être à côté de l'image, j'ai mis "flex: 1;" et pour que le texte passe en-dessous sur les petits écrans, j'ai mis une "min-width" */
.text_cell {background-color:#FFFFE0; padding: 20px; flex: 1; min-width: 300px;}

* {
  box-sizing: border-box;   /* les bordures sont incluses dans les éléments parents */
}

@keyframes fadein { /* fais apparaitre les logos des fournisseurs (estomper) */
  to {opacity: 1;}
}

.footer {
  display: grid;
  place-items: center;  /* alignement de tous les items verticalement centré et distribue verticalement */
  height: 50vh;
}