body { margin:0; padding:0; background:white; color:black; font-family:Roboto; font-weight:400; }
strong { font-weight:700; }

#top { margin:0 auto 10px; max-width:980px; padding:0; }
#top .menu { display:flex; justify-content:center; gap:20px; list-style:none; padding:0; align-items:baseline; margin:15px 0 25px; justify-content:flex-start; }
#top .menu li { padding:0; flex:1 1 0; font-weight:700; font-size:18px; }
#top .menu li a { display:flex; flex-direction:column; align-items:center; color:green; }
#top .menu li a img { display:block; margin-bottom:8px; height:80px; }

#page { margin:0 auto; max-width:980px; padding:0; display:flow-root; }
#container { width:100%; float:left; margin:0; padding:0; }
#container h1 { font-size:38px; text-align:center; margin:25px 0 30px; padding:0 15px; font-weight:800; width:calc(100% - 15px*2); }
#container .intro { font-size:18px; font-weight:300; line-height:28px; margin:15px; text-align:center; }
#container .intro a { color:green; }

#liste { float:left; width:100%; margin:0 auto; height:100%; position:relative; padding:0; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; -ms-flex-pack:center; justify-content:flex-start; }

h2 { font-size:28px; text-align:center; margin:20px 0 15px; padding:0 30px; font-weight:800; width:calc(100% - 30px*2); }

#liste .livre { width:calc(50% - 4%*2); margin:15px 4%; text-align:center; }
#liste .livre img { width:100%; margin:0; }
#liste .livre span { display:inline-block; border-radius:15px; background:green; color:lightyellow; border:none; padding:6px 18px; margin:5px 0 0; font-weight:700; font-size:15px; }
#liste .info { margin:10px 0 0; }
#liste .info h3 { margin:0; padding:0 0 5px; font-size:16px; color:black; text-align:center; }
#liste .livre a { display:block; text-decoration:none; } 
#liste .livre p { font-style:italic; font-size:13px; margin:6px 0; color:black; }
.home #liste .info p { margin:0; padding:0; font-size:15px; color:#bbb; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-align:center; }
.etagere #liste .info p, .fiche #connexe .info p { margin:0; padding:0; font-size:15px; color:#bbb; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-align:center; }

#footer { margin:30px auto; max-width:980px; border-top:1px dotted #aaa; padding:20px 0; }
#footer p { font-size:18px; font-weight:400; line-height:28px; margin:15px 0; text-align:center; }
#footer ul { font-weight:400; text-align:center; list-style:none; margin:0; padding:0 30px; }
#footer li { display:inline; text-transform:uppercase; font-size:18px; padding:0 20px; }
#footer li a { color:#333; font-weight:300; }

.fiche #data, .fiche #resume, .fiche #plus, .fiche #achat, .fiche #connexe { margin:30px 0; display:flow-root; text-align:center; }
.fiche #data ul { margin:30px 0; padding:0; text-align:center; }
.fiche #data li { display:inline; background:lightgreen; padding:8px 16px; margin:0 10px; border-radius:10px; font-size:16px; }
.fiche #resume p, .fiche #plus p, .fiche #achat p { font-size:18px; font-weight:300; line-height:28px; margin:15px; }
.fiche #resume img, .fiche #plus img { float:left; width:calc(50% - 20px); margin:10px; }
.fiche .couverture, .fiche .pile { width:60%; margin:20px 20%; }
.fiche #achat .bouton { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px; }
.fiche #achat .bouton a { text-align:center; margin:0; color:white; padding:12px 22px; border-radius:20px; font-size:20px; width:320px; text-decoration:none; font-weight:600; }
.fiche #achat .contact a { color:green; font-weight:600; }

.contact #valide { color:green; font-weight:bold; text-align:center; background:lightgreen; margin:15px 0; padding:15px 0; border-radius:10px; }
.contact #nonvalide { color:red; font-weight:bold; text-align:center; background:lightpink; margin:15px 0; padding:15px 0; border-radius:10px; }
.contact #container ul { margin:30px 0; padding:0; }
.contact #container li { font-size:18px; font-weight:300; line-height:26px; margin:0; }
.contact #container li a { color:green; font-weight:600; }

.contact #formcontact { display:block; margin:0; float:left; width:calc(100% - 20px); padding:0; } 
.contact label { display:block; }
.contact input { font-family:Roboto; margin:5px 0 15px; width:250px; display:block; height:30px; font-size:16px; border:1px solid #ababab; border-radius:10px; font-weight:400; padding:5px 10px; }
.contact textarea { font-family:Roboto; margin:5px 0 15px; width:80%; height:200px; font-size:16px; border:1px solid #ababab; border-radius:10px; font-weight:400; padding:5px 10px; }
.contact input[type="submit"] { display:block; border:none; width:150px; height:40px; font-size:18px; line-height:28px; color:white; background:green; border-radius:20px; padding:0; }

.ateliers h2 { margin:30px 0; }
.ateliers p { font-size:18px; font-weight:300; line-height:28px; margin:15px; text-align:center; }
.ateliers #container img { float:left; width:calc(50% - 20px); margin:10px; }
.ateliers #container .paragraphe { width:100%; margin:20px 0; float:left; }
.ateliers #container .photoseule { width:70%; margin:20px 15%; }
.ateliers .bouton { text-align:center; margin:10px 0 20px; }
.ateliers .bouton p { font-weight:600; }
.ateliers .bouton a { margin:0; color:white; padding:12px 22px; border-radius:20px; font-size:20px; width:320px; text-decoration:none; font-weight:600; }

@media (max-width:640px) { 

#liste .livre { width:100%; margin:15px 0; }
#liste .info { margin:10px 10px 0; }
#footer li { display:block; padding:2px 20px; }
#top .menu { margin:15px 0 0; overflow-y:hidden; gap:12px; padding:12px; }
#top .menu li { min-width:140px; }
#top .menu li a img { height:60px; }
.fiche #data li { display:block; margin:10px; }

}