/* LIVRE */

/*main {background: radial-gradient(#ffe488, #fcb44d);}*/
/*main {background: radial-gradient(#55b3d6, #1f4b65);}*/
/*main {backgroud-color: var(--livreCouleur);}*/
/*main > section {background-color: var(--livreCouleur);}*/

/* Fond */
#fond
{
position: fixed;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
background: no-repeat center / cover;
transform: scale(1.2);
/*filter: blur(50px) contrast(0.75) saturate(0.75) brightness(1.5);*/
filter: blur(50px) contrast(0.2) saturate(0) brightness(1.75);
}

/* Informations sur le livre */
main #retour
{
display: block;
width: fit-content;
margin-bottom: 1em;
padding: 0.25em 0.5em;
background: var(--gris2);
border-radius: 0.5em;
color: var(--gris);
font-size: 0.7em;
font-weight: 700;
text-transform: uppercase;
@media (max-width: 900px) {margin-left: auto; margin-right: auto;}
}
main h1
{
padding-bottom: 0.1em;
font-size: 2.75em;
@media (min-width: 901px) {
padding-right: 1.5em;
text-align: left;
&:before
{
content: '';
display: block;
position: absolute;
width: calc(100%/* - 2em*/);
height: 1px;
left: 0;
bottom: 0;
background: var(--noir);
}
&:after
{
content: '';
display: block;
position: absolute;
width: 3em;
height: 2em;
right: 0;
bottom: 0;
/*background: url(Titre.svg) no-repeat right bottom;*/
}
}
@media (max-width: 900px) {border-bottom: 1px solid var(--noir);}
}
main > section:first-of-type
{
display: grid;
grid-template-columns: 30vmin minmax(0, 50em);
place-content: center;
align-items: center;
gap: 3em;
perspective: 1000px;
@media (max-width: 900px) {
grid-template-columns: 100%;
}
}
main > section:first-of-type time
{
display: block;
position: relative;
top: -2em;
right: 0;
font-size: 0.8em;
text-align: right;
@media (max-width: 900px) {text-align: center;}
}
main > section:first-of-type .note
{
display: block;
width: fit-content;
margin: auto;
margin-bottom: 2em;
padding: 0.5em;
background: rgba(255,255,255,0.15);
border-radius: 0.5em;
text-align: center;
& span
{
display: block;
color: goldenrod;
margin-top: 0.25em;
font-size: 0.7em;
font-weight: 800;
text-transform: uppercase;
}
&:hover {background: var(--rouge);}
@media (min-width: 600px) {
float: left;
margin: 0 0.5em 0 0;
}
}
main > section:first-of-type p {}
/*main > section:first-of-type p:first-letter
{
float: left;
margin-right: 0.05em;
margin-top: 0.1em;
margin-bottom: -0.15em;
font-family: 'Genzsch Initials';
font-size: 2.9em;
text-transform: uppercase;
}*/
main > section:first-of-type blockquote:not(:empty) {margin-bottom: 0;}

/* Livre 3D */
.livre
{
place-self: center;
transform-style: preserve-3d;
& img
{
display: block;
width: 100%;
height: 100%;
max-height: 20em;
object-fit: contain;
}
& div
{
display: block;
position: absolute;
width: 30px;
height: 100%;
left: 0;
top: 0;
background-position: right;
background-size: 10000% 10000%;
transform: rotateY(90deg);
transform-origin: left;
}
& span
{
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: white;
box-shadow: inset 0 0 0.5em rgba(0,0,0,0.4);
&:nth-of-type(1) {transform: translateZ(-5px);}
&:nth-of-type(2) {transform: translateZ(-10px);}
&:nth-of-type(3) {transform: translateZ(-15px);}
&:nth-of-type(4) {transform: translateZ(-20px);}
&:nth-of-type(5) {transform: translateZ(-25px);}
&:nth-of-type(6) {transform: translateZ(-30px);}
}
}

/* Menu (liens & boutons) */
main > section nav
{
display: flex;
overflow: visible;
flex-wrap: wrap;
place-items: center;
place-content: center;
gap: 0.5em 1em;
@media (min-width: 901px) {grid-column: 1 / 3;}
& .btn
{
margin-top: 0;
white-space: nowrap;
box-shadow: 0 0 3em rgba(0,0,0,0.25);
@media (max-width: 650px) {width: 100%;}
}
}
#panier-bouton
{
& strong.prix {}
& span {display: none;}
&.ajout span:nth-of-type(1) {display: flex;}
&.mouline
{
filter: saturate(0) contrast(0.25);
pointer-events: none;
cursor: not-allowed;
& span:nth-of-type(2)
{
display: flex;
& i {animation: tourne 1s linear infinite;}
}
}
&.retrait span:nth-of-type(3) {display: flex;}
}
#telechargement-bouton {}
#telechargement-bouton + menu
{
z-index: 3;
position: absolute;
padding: 0.5em;
background: white;
box-shadow: 0 0 2em rgba(0,0,0,0.25);
border-radius: 0.75em;
transform: translateX(-50%);
visibility: hidden;
&.on {visibility: visible;}
&:before
{
content: '';
display: block;
position: absolute;
width: 2em;
height: 0.625em;
left: 50%;
background: var(--rouge);
transform: translateX(-50%);
}
&:not(.flecheBas)
{
border-top: 6px solid var(--rouge);
&:before {top: -0.75em; clip-path: polygon(0% 100%, 50% 0%, 100% 100%);}
}
&.flecheBas
{
border-bottom: 6px solid var(--rouge);
&:before {bottom: -0.75em; clip-path: polygon(0% 0%, 100% 0%, 50% 100%);}
}
& a
{
display: block;
padding: 0.75em;
font-size: 0.8em;
font-weight: 700;
text-align: left;
text-transform: uppercase;
&:hover {color: var(--rouge);}
}
& a + a {border-top: 1px solid lightgrey;}
}

/* Avis */
main > section#avis {background: white;}
main > section#avis article
{
box-sizing: border-box;
max-width: 30em;
margin: 2em auto;
padding: 1em;
background: white;
box-shadow: 0 1em 5em rgba(0,0,0,0.25);
border-radius: 1em;
}
main > section#avis:not(.tout) article:nth-of-type(n+4) {display: none;}
main > section#avis article > div
{
display: grid;
grid-template-columns: 1fr auto;
}
main > section#avis article h3
{
padding: 0.2em;
overflow: hidden;
color: var(--rouge);
font-family: inherit;
font-size: inherit;
font-weight: 700;
text-align: left;
text-transform: initial;
text-wrap: nowrap;
mask: linear-gradient(to right, black calc(100% - 3em), transparent calc(100% - 1em));
& img
{
display: inline-block;
width: 1em;
height: 1em;
margin-right: 0.5em;
vertical-align: -0.15em;
border-radius: 100%;;
outline: 1px solid var(--rouge);
outline-offset: 2px;
}
}
main > section#avis article .note
{
text-align: right;
}
main > section#avis article hr
{
width: 100%;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
main > section#avis article p {}
main > section#avis article time
{
display: block;
margin-top: 0.5em;
font-size: 0.8em;
font-style: italic;
text-align: right;
opacity: 0.5;
}
main > section#avis:is(:not(:has(article:nth-of-type(4))), .tout) > button:last-of-type {display: none;}
main > section#avis form
{
max-width: 30em;
margin: auto;
text-align: center;
& .note
{
margin-bottom: 0.5em;
border: none;
font-size: 2em;
& em {font-style: normal;}
& em:not(.on) {filter: saturate(0) brightness(0.85);}
}
& textarea
{
min-height: 8em;
border: 4px solid var(--gris);
resize: vertical;
font-weight: inherit;
text-align: justify;
}
& [type=submit] {margin-top: 1em;}
}