:root { color-scheme: dark; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: #efe4d4; background: #100d19; font-family: Georgia, 'Times New Roman', serif; line-height: 1.7; }
.bibliotheque {
    min-height: 100vh;
    overflow: hidden;
    position: relative;

    background:
        radial-gradient(
            ellipse at 50% 15%,
            rgba(123, 65, 150, 0.35),
            transparent 60%
        ),
        linear-gradient(
            rgba(15, 8, 25, 0.70),
            rgba(10, 5, 18, 0.90)
        ),
        url("../images/bibliotheque-magique.png")
        center top / cover fixed no-repeat;

    background-color: #100d19;
}
.entete { 
	position: relative; 
	max-width: 1100px; 
	margin: 0 auto; 
	padding: 80px 24px 38px; 
	text-align: center; }
	
.retour { 
	position: absolute; 
	left: 24px; 
	top: 25px; 
	color: #e7c58a; 
	text-decoration: none; 
	font-size: .95rem; }
	
.retour:hover, 
	.retour:focus-visible { 
		color: white; 
		text-shadow: 0 0 12px #f7d08d; }
	.sur-titre { color: #bca58b; letter-spacing: .18em; text-transform: uppercase; font-size: .82rem; margin: 0 0 5px; }

h1 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.2; font-weight: normal; color: #edc88d; margin: 0 0 14px; text-shadow: 0 0 22px #d4a35d35; }
.introduction { margin: 0 auto; max-width: 660px; color: #e1d0c8; font-size: 1.1rem; font-style: italic; }
.ornement { color: #dfb879; font-size: 1.7rem; margin-top: 22px; }
.collection { width: min(1080px, calc(100% - 48px)); margin: 0 auto; }
.livre {
    display: grid;
    grid-template-columns: minmax(190px, 310px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 5vw, 72px);
    padding: 40px 34px;

    border: 1px solid rgba(232, 188, 113, 0.35);
    border-radius: 12px;

    background: linear-gradient(
        135deg,
        rgba(38, 20, 52, 0.88),
        rgba(14, 9, 25, 0.92)
    );

    box-shadow:
        0 20px 70px rgba(0, 0, 0, 0.55),
        0 0 35px rgba(132, 65, 180, 0.12),
        inset 0 0 35px rgba(162, 94, 197, 0.07);

    backdrop-filter: blur(6px);

    position: relative;
}

.cadre-couverture {
    padding: 7px;
    border: 1px solid rgba(223, 179, 111, 0.65);
    background: #160e20;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.6),
        0 0 18px rgba(156, 83, 216, 0.18);

    transition:
        transform 0.5s ease,
        box-shadow 0.5s ease;
}

.cadre-couverture:hover {
    transform: translateY(-8px) scale(1.025);

    box-shadow:
        0 0 25px rgba(177, 100, 255, 0.5),
        0 0 55px rgba(226, 174, 103, 0.25),
        0 20px 50px rgba(0, 0, 0, 0.65);
}

.cadre-couverture img { display: block; width: 100%; height: auto; }
.tome { color: #c4a16e; letter-spacing: .2em; text-transform: uppercase; font-size: .84rem; margin: 0 0 4px; }

h2 { color: #efca8c; font-weight: normal; font-size: clamp(1.9rem, 3vw, 2.7rem); line-height: 1.2; margin: 0 0 20px; }
.fiche p:not(.tome) { margin: 0 0 15px; }
.fiche .accroche { color: #f0cb95; font-style: italic; margin-top: 22px !important; }
.bouton { display: inline-block; margin-top: 12px; padding: 11px 22px; color: #f3d5a0; text-decoration: none; border: 1px solid #b98d53; border-radius: 5px; background: rgba(79,47,74,.36); transition: background .25s, box-shadow .25s, transform .25s; }
.bouton:hover, .bouton:focus-visible { background: rgba(125,83,102,.55); box-shadow: 0 0 20px rgba(233,178,96,.25); transform: translateY(-2px); }
.separateur { display: flex; align-items: center; gap: 22px; margin: 35px auto; color: #cfa66d; max-width: 720px; font-size: 1.6rem; }
.separateur::before, .separateur::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(215,166,102,.5)); }
.separateur::after { transform: rotate(180deg); }

footer { padding: 62px 20px 52px; text-align: center; color: #bba489; font-style: italic; }
@media (max-width: 700px) { 
	.entete { padding-top: 92px; } 
	.collection { width: min(540px, calc(100% - 28px)); } 
	.livre { grid-template-columns: 1fr; gap: 25px; padding: 25px 20px; } 
	.cadre-couverture { max-width: 260px; margin: 0 auto; } .fiche { text-align: left; } 
	.sur-titre { font-size: .7rem; } }