/**::selection {}*/
:root
{
--rouge: rgb(240,0,0);
--noir: rgb(50,50,50);
--gris: gainsboro; /*rgba(200,200,200,0.5)*/
--gris2: #808080;
--marges: 10vmin;
background: white;
color: var(--noir);
font-family: 'Josefin Sans', 'ITC Kabel', 'Inter', Sans-Serif;
font-weight: 500;
font-size: 17px; /*16*/
}
h1, h2, h3, h4, h5, h6, summary
{
color: inherit;
font-family: 'Pompiere', Sans-Serif;
font-weight: 400;
font-size: 2.5em;
text-align: center;
text-transform: uppercase;
& > em {display: none;}
}
p {}
ul {list-style: none;}
a {color: inherit;}
hr
{
width: 50%;
margin: 3em auto;
background: var(--noir);
}
.infobulle:before
{
--fond: rgba(0,0,0,0.9)/*white*/;
--texte: white/*rgb(50,50,50)*/;
}

/* Markdown */
p.md, .md p
{
& a:not([class]) {text-decoration: underline;}
& img {display: block; max-width: 100%; margin: 1em 0;}
}

/* 404 */
#erreur404
{
width: 320px;
margin: auto;
text-align: center;
}
#erreur404 strong
{
font-size: 1.5em;
font-weight: 800;
line-height: 1.5em;
}
#erreur404 strong span
{
display: block;
font-size: 2em;
}
#erreur404 p {margin: 1em 0;}
#erreur404 a
{
display: inline-block;
padding: 0.25em;
border-radius: 0.25em;
font-size: 0.9em;
}

/* Boutons */
.btn, .btn > span
{
display: inline-flex;
place-items: center;
place-content: center;
gap: 0.25em;
}
.btn
{
--transition: 0.35s;
position: relative;
box-sizing: border-box;
margin-top: 0.5em;
padding: 0.65em 1em;
overflow: hidden;
background: var(--gris);
border: none;
border-radius: 0.75em;
font-size: 0.8em;
font-weight: 700;
text-align: center;
text-transform: uppercase;
transition: color var(--transition), transform var(--transition);
cursor: pointer;
&:before
{
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: var(--rouge);
clip-path: circle(0% at 0% -25%);
transition: clip-path var(--transition);
}
& i
{
margin-right: 0.15em;
font-size: 1.5em;
}
}
.btn.clr
{
outline: 2px solid var(--rouge);
outline-offset: -6px;
}
.btn.mil
{
display: flex;
width: fit-content;
min-width: 14em;
margin: auto;
}
.btn:disabled {filter: saturate(0) contrast(0.25); cursor: not-allowed;}
.btn:not(:disabled):is(:hover, .on)
{
z-index: 1;
color: white; transform: scale(1.075);
&:before {clip-path: circle(155% at 0% -25%);}
}
.btn_rond
{
display: flex;
width: 2em;
height: 2em;
padding: 0.25em;
place-content: center;
place-items: center;
background: var(--gris);
border: none;
font-family: Icones;
border-radius: 100%;
&:hover {background: var(--rouge); color: white;}
}

/* Prix */
.prix
{
display: inline-block;
color: var(--rouge);
font-family: 'Lilita One', fantasy;
font-size: 1.25em;
font-weight: 400;
}
.btn .prix
{
margin-left: 0.75em;
margin-right: -0.15em;
background: white;
box-shadow: 0 0 0 0.4em white;
border-radius: 0.05em;
}

/* Formulaires */
form {}
form label
{
--label: 4em;
display: block;
position: relative;
}
form > :is(label, div) + :is(label, div), form fieldset > :is(label, div) + :is(label, div) {margin-top: 1em;}
form > div:has(label)
{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1em;
}
form label span
{
z-index: 2;
display: block;
position: relative;
width: fit-content;
margin-left: 1.5em;
margin-bottom: -0.5em;
font-size: 0.8em;
font-weight: 600;
text-align: center;
}
form :is(input, textarea, select)
{
display: block;
position: relative;
box-sizing: border-box;
width: 100%;
padding: 0.65em 1em;
border: 1px solid var(--noir);
border-radius: 0.5em;
font-weight: 700;
text-align: center;
clip-path: polygon(0% -2px, 1em -2px, 1em 2px, calc(var(--label) + 1.5em) 2px, calc(var(--label) + 1.5em) -2px, 105% -2px, 105% 105%, 0% 105%);
&:is(:hover, :focus) {border-color: var(--rouge);}
}
form input {}
form input[type=button] {cursor: pointer;}
form input[readonly] {text-decoration: underline; cursor: pointer;}
form textarea
{
height: 4em;
min-height: 4em;
resize: vertical;
}
form label > em
{
display: block;
position: absolute;
padding: 0.65em;
font-style: normal;
bottom: 0em;
&:last-child {right: 0;}
}
form label:has([type=checkbox])
{
& span {transform: translateY(1.75em);}
& input
{
appearance: none;
height: 2.75em;
text-align: right;
clip-path: none;
}
& input:after, & input.inverse:checked:after
{
content: 'square';
display: block;
color: inherit;
font-family: 'Icones';
font-weight: normal;
font-style: normal;
}
& input:checked:after, & input.inverse:after
{
content: 'check-square';
color: var(--rouge);
}
}
form label:has([type=file])
{
& input {text-align: left;}
&.glisse input
{
box-shadow: inset 0 0 0 1px var(--rouge);
border-color: var(--rouge);
text-shadow: 0 0 0.5em var(--rouge);
}
&.depose
{
animation: 0.35s zoom5 1 both;
}
& button
{
display: flex;
position: absolute;
width: 2em;
height: 2em;
right: 0.5em;
bottom: 0.5em;
place-items: center;
place-content: center;
border: none;
border-radius: 0.25em;
font-size: 1em;
&.off {display: none;}
}
&:has(button.off) {opacity: 0.4;}
}

/* Messages */
aside.message
{
z-index: 6;
position: fixed;
box-sizing: border-box;
width: 90vw;
max-width: 20em;
left: 50%;
top: 50%;
padding: 3em;
background: rgba(255,255,255,0.75);
backdrop-filter: blur(20px);
border-top: 6px solid var(--rouge);
box-shadow: 0 0 2em rgba(0,0,0,0.25);
text-align: center;
text-wrap: balance;
transform: translateX(-50%) translateY(-50%);
cursor: pointer;
&.off {display: none;}
&:before
{
content: '×';
display: block;
position: absolute;
right: 0.5em;
top: 0em;
font-size: 1.5em;
font-weight: 300;
}
}
aside.message .btn
{
display: flex;
width: 100%;
&:first-of-type {margin-top: 1em;}
}
aside.message:has(.btn:nth-of-type(4))
{
& .btn
{
display: inline-flex;
width: 46%;
min-height: 6em;
margin: 4% 2% 0% 2%;
flex-direction: column;
}
}
body:has(aside.message:not(.off)) :is(main, footer)
{
filter: blur(10px) grayscale(0.75);
pointer-events: none;
}

/* Rien */
.rien
{
display: block;
grid-column: 1 / -1;
font-size: 0.8em;
font-weight: 700;
text-align: center;
text-transform: uppercase;
}
.rien + .btn {margin-top: 1em;}

/* MENU */

body {--menu_hauteur: 70px;}
body > nav
{
z-index: 5;
display: flex;
position: fixed;
box-sizing: border-box;
width: 100%;
padding: 0 1em;
gap: 1em;
background: white;
box-shadow: 0 0 3em rgba(0,0,0,0.25);
}
body > nav h6
{
padding: 0.25em;
& a {display: block;}
& img {display: block; height: 1.25em;}
}
body > nav button.≡
{
display: none;
border: none;
& i {font-size: 1.25em;}
& span
{
vertical-align: 0.25em;
font-size: 0.8em;
font-weight: 700;
text-transform: uppercase;
}
}
body > nav ul
{
display: flex;
padding: 0 0.5em;
gap: 1em;
&.categories
{
font-size: 0.8em;
font-weight: 700;
text-transform: uppercase;
}
&:last-of-type {margin-left: auto;}
}
body > nav ul li
{
text-align: center;
white-space: nowrap;
& a
{
display: flex;
position: relative;
box-sizing: border-box;
height: 100%;
max-width: 15em;
padding: 1em 0.5em;
place-items: center;
place-content: center;
&:after
{
content: '';
display: block;
position: absolute;
width: 100%;
height: 4px;
left: 0;
bottom: 4px;
background: var(--rouge);
clip-path: circle(0%);
transition: clip-path 0.25s;
}
&:hover
{
color: var(--rouge);
&:hover:after {clip-path: circle(50%);}
}
}
& i {font-size: 1.25em;}
}

/* Mobile */
body > nav.mobile button.≡ {display: initial;}
body > nav.mobile ul.categories
{
position: fixed;
left: 2em;
top: calc(var(--menu_hauteur) + 1.5em);
padding: 1em;
flex-direction: column;
align-items: stretch;
background: rgba(255,255,255,0.75);
backdrop-filter: blur(20px);
border-top: 6px solid var(--rouge);
box-shadow: 0 0 2em rgba(0,0,0,0.25);
clip-path: circle(0% at center -50%);
transition: clip-path 1s;
&.on {z-index: 7; clip-path: circle(150% at top);}
&:before
{
content: '';
display: block;
position: absolute;
width: 4em;
height: 1.25em;
top: -1.25em;
left: 4.15em;
background: var(--rouge);
clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}
body > nav.mobile ul li a:hover:after
{
width: 4px;
height: 100%;
left: 4px;
bottom: 0;
}
& li a {padding: 0.5em;}
& li a:after {background: transparent;}
}

/* Recherche */
#recherche-icone
{
}
#recherche-icone a
{
}
#recherche-icone form
{
z-index: 2;
display: flex;
position: absolute;
width: calc(100% - 1em);
max-width: 27em;
right: 0.5em;
top: 0.5em;
background: white;
box-shadow: inset 0 0 3em rgba(0,0,0,0.15);
border: none;
border-radius: 1em;
clip-path: inset(0 0 0 100%);
transition: clip-path 1s;
&.on {clip-path: inset(0 0 0 0%);}
& button
{
display: flex;
width: 4em;
place-items: center;
place-content: center;
border: none;
font-family: 'Icones';
font-size: 1.25em;
&:first-of-type {}
&[type=submit] {}
&:hover {color: var(--rouge);}
}
& input
{
padding: 1em 0em;
border: none;
text-align: left;
}
}

/* Panier & membre */
:is(#panier-popin, #membre-popin)
{
z-index: 6;
position: fixed;
width: 15em;
max-width: 70vw;
right: 2em;
top: calc(var(--menu_hauteur) + 1.25em);
padding: 1em;
background: rgba(255,255,255,0.75);
backdrop-filter: blur(20px);
box-shadow: 0 0 2em rgba(0,0,0,0.25);
border-top: 6px solid var(--rouge);
border-radius: 0.75em;
clip-path: circle(0% at center -50%);
transition: clip-path 1s;
&.on {z-index: 7; clip-path: circle(150% at top);}
&:before
{
content: '';
display: block;
position: absolute;
width: 4em;
height: 1.25em;
top: -1.25em;
background: var(--rouge);
}
& .btn
{
display: flex;
width: 100%;
&:first-of-type:not(.btn + .btn) {margin-top: 1em;}
}
}

/* Bulles */
:is(#panier-icone, #membre-icone)
{
position: relative;
& em
{
display: flex;
position: absolute;
right: 0;
bottom: 1.25em;
width: 1.5em;
height: 1.5em;
place-content: center;
place-items: center;
background: var(--rouge);
border-radius: 100%;
color: white;
font-size: 0.7em;
font-weight: 700;
font-style: normal;
&:empty {display: none;}
}
}

/* Panier */
#panier-icone
{
& i:first-of-type {}
& i:last-of-type {display: none;}
}
#panier-popin {}
#panier-popin:before
{
right: 1.25em;
clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}
#panier-popin ul
{
display: flex;
max-height: 60vh;
overflow-x: hidden;
overflow-y: auto;
flex-direction: column;
gap: 0.5em;
}
#panier-popin ul li
{
display: flex;
place-items: center;
}
#panier-popin ul li a
{
display: flex;
margin-right: 0.75em;
place-items: center;
font-size: 0.95em;
font-weight: 400;
&:hover {text-decoration: underline;}
& img
{
width: 2em;
height: 2em;
margin-right: 0.75em;
object-fit: contain;
}
& span
{
width: 10em;
max-width: 40vw;
overflow: hidden;
white-space: nowrap;
mask: linear-gradient(to right, white 80%, transparent);
}
}
#panier-popin ul li button {margin-left: auto;}

/* Membre */
#membre-icone {}
#membre-popin {}
#membre-popin:before
{
right: 0.5em;
clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
}
#membre-popin label:has([name=connexion_passe])
{
position: relative;
& a
{
display: flex;
position: absolute;
width: 1.65em;
height: 1.65em;
right: 0.5em;
bottom: 0.5em;
place-items: center;
place-content: center;
background: rgba(175,175,175,0.25);
font-weight: 700;
clip-path: circle(50%);
}
}
#membre-popin img.avatar
{
display: block;
height: 5em;
margin: 4px auto;
border-radius: 100%;
outline: 2px solid var(--rouge);
outline-offset: 3px;
--trou : 1.25em;
}
#membre-popin img.avatar + a
{
display: flex;
position: absolute;
width: 2.25em;
height: 2.25em;
left: 50%;
place-items: center;
place-content: center;
background: var(--gris);
border-radius: 100%;
font-size: 0.75em;
text-align: center;
transform: translateX(1.5em) translateY(-1.9em);
&:hover {background: var(--rouge);}
}
#membre-popin > em
{
display: block;
margin-top: 1em;
text-align: center;
}
#membre-popin fieldset
{
margin-top: 0.5em;
padding: 0.5em 1em 1em 1em;
border: 1px solid grey;
border-radius: 1em;
& legend
{
padding: 0.25em;
color: grey;
font-size: 0.75em;
font-weight: 700;
}
}
#membre-popin fieldset ul
{
display: flex;
gap: 0.5em;
}
#membre-popin fieldset ul li {}
#membre-popin fieldset ul li a {display: block;}
#membre-popin fieldset ul li a > span
{
display: block;
perspective: 200px;
background: white;
box-shadow: 0 0 1em rgba(0,0,0,0.2);
transition: transform 0.35s;
}
#membre-popin fieldset ul li a > span img
{
display: block;
max-width: 3em;
height: 4em;
object-fit: contain;
transform-origin: left;
transition: transform 0.35s, filter 0.35s;
}
#membre-popin fieldset ul li a:hover
{
& > span {transform: scale(0.9);}
& > span img {transform: rotateY(-45deg); filter: brightness(0.85);}
}
#membre-popin fieldset .btn:first-of-type {margin-top: 0.5em;}

/* SECTIONS */

main {padding-top: var(--menu_hauteur);}
main h1
{
position: relative;
margin-bottom: 0.75em;
text-wrap: balance;
}
main :is(h1,h2) {text-shadow: 0 0.15em 0.3em rgba(0,0,0,0.5);}
main > section
{
position: relative;
overflow: hidden;
box-sizing: border-box;
width: 100%;
padding: var(--marges);
background: no-repeat center / cover;
text-align: justify;
}
main:has(section:nth-of-type(2)) > section:first-of-type {background: linear-gradient(to top, rgba(0,0,0,0.1), transparent 4em);}
main > section :is(h2, h3, h4, h5, h6) {width: 100%;}
main > section h2
{
margin-bottom: calc(var(--marges) / 2);
text-align: center;
}
main > section > p
{
max-width: 60em;
margin: auto;
}

/* Livres */
.livres
{
--dispersion: 2;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(calc(7em + (1em * var(--dispersion))), 1fr));
place-items: start center;
gap: calc(var(--marges) * ((var(--dispersion) * 0.5) - 0.25));
font-size: 0.8em;
font-weight: 700;
text-align: center;
text-transform: uppercase;
}
.livres li
{
max-width: 14em;
padding: calc(1em * var(--dispersion));
text-align: center;
text-wrap: balance;
}
.livres li a {display: block;}
.livres li a > span
{
display: block;
perspective: 1000px;
background: white;
box-shadow: 0 0 3em rgba(0,0,0,0.2);
transition: transform 0.35s;
}
.livres li a > span img
{
display: block;
width: 100%;
max-height: 100%;
margin-bottom: 1em;
transform-origin: left;
transition: transform 0.35s, filter 0.35s;
}
.livres li .nouveau
{
display: block;
position: absolute;
padding: 0.5em 1.25em 0.5em 0.5em;
left: 0;
top: 1em;
background: var(--rouge);
color: white;
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}
.livres li a > span progress
{
position: absolute;
box-sizing: border-box;
width: calc(100% - 1em);
height: 4%;
left: 0.5em;
bottom: 0.5em;
background: rgba(255,255,255,0.25);
backdrop-filter: blur(20px);
border: none;
border-radius: 0.5em;
appearance: none;
&::-moz-progress-bar, &::-webkit-progress-value {background: var(--rouge);}
}
.livres li a:hover
{
color: var(--rouge);
& > span {transform: scale(0.9);}
& > span img {transform: rotateY(-45deg); filter: brightness(0.85);}
}
.livres li a em
{
display: block;
font-size: 0.9em;
font-weight: 500;
text-transform: none;
}
.livres li:has(.nouveau) a em {display: none;}
.livres li a i {text-shadow: 0 0 0.15em rgba(0,0,0,0.25);}

/* PIED */

body > footer
{
position: relative;
box-sizing: border-box;
padding: var(--marges);
background: var(--gris) linear-gradient(to bottom, rgba(0,0,0,0.1), transparent 4em);
color: var(--gris2);
text-align: center;
}
body > footer article
{
display: grid;
max-width: 80em;
margin: 0 auto 2em auto;
grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
justify-content: center;
gap: 2em 3em;
}
body > footer article ul
{
display: inline-block;
text-align: left;
}
body > footer article ul li
{
& strong
{
display: block;
margin-bottom: 0.35em;
color: var(--rouge);
}
& a {}
}
body > footer p {flex: 1 0 100%;}
body > footer a:hover {text-decoration: underline;}