/**::selection {}*/
:root
{
--couleur: rgb(135, 185, 216);

background: white;
color: black;
font-family: 'Open Sans', Sans-Serif;
font-weight: 400;
font-size: 15px;
}
body
{
overflow: auto;
min-height: 100vh;
}
h1, h2, h3, h4, h5, h6, summary
{
color: black;
font-family: 'Source Sans 3', Sans-Serif;
font-weight: 800;
font-size: 1.5em;
text-transform: uppercase;
}
p {}
ul {list-style: none;}
a {color: black;}
i {font-style: normal;}
hr
{
width: 50%;
margin: 1em auto;
background: black;
}
.infobulle:before
{
--fond: rgba(0,0,0,0.9)/*white*/;
--texte: white/*rgb(50,50,50)*/;
}
/*
display: flex;
justify-content: center;
align-items: center;
*/
input
{
display: block;
box-sizing: border-box;
width: 100%;
margin: 0.5em auto;
padding: 0.5em;
border: 1px solid grey;
border-radius: 4px;
}

/* Localhost */
#localhost
{
z-index: 20;
display: flex;
position: fixed;
width: 5em;
height: 5em;
left: 10.6vw;
top: 0.25em;
place-items: center;
place-content: center;
background: red;
color: white;
font-size: 0.75em;
font-weight: 800;
text-align: center;
text-transform: uppercase;
clip-path: circle(50%);
animation: tremble5 0.25s linear infinite;
cursor: pointer;
}

/* MENU */

nav
{
z-index: 5;
display: block;
position: fixed;
width: 320px;
height: 100vh;
left: 0;
top: 0;
background: white;
box-shadow: 0 0 2cm rgba(0,0,0,0.25);
}
@media (max-width: 1400px) {
	nav
	{
	visibility: hidden;
	width: 100%;
	}
}
nav.on {visibility: visible;}
nav > div:first-of-type
{
display: grid;
padding: 0.5em;
grid-template-columns: 4fr repeat(2, 1fr);
gap: 0.5em;
}
nav > div:first-of-type input
{
margin: 0;
font-size: 1.2em;
}
nav > div:first-of-type button
{
padding: 0.55em;
background: var(--couleur);
border: none;
border-radius: 4px;
&.bouton_nouvelle_facture {font-size: 1.2em;}
&.bouton_tsa {font-size: 1em; font-weight: 600;}
}
nav ul
{
overflow-x: hidden;
overflow-y: auto;
height: calc(100% - 4em);
}

/* FACTURES */

.factures li {position: relative;}
.factures li:nth-of-type(even) {background: rgba(0,0,0,0.025);}
.factures li.actif {box-shadow: inset 0 0 0 4px var(--couleur);}
.factures li.actif:after
{
z-index: -1;
content: '';
display: block;
position: absolute;
width: 2em;
height: 2em;
right: 0;
top: 0;
background: var(--couleur);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}
.factures li a
{
display: grid;
grid-template: repeat(2, 1fr) / 75% 25%;
padding: 0.5em;
}
.factures li a > *
{
overflow: hidden;
white-space: nowrap;
}
.factures li a h4
{
font-size: 1em;
text-align: left;
}
.factures li a em
{
padding-right: 0.1em;
text-align: right;
}
.factures li a time {text-align: left;}
.factures li a .prix {text-align: right;}
.factures li a .prix.✓ {color: limegreen;}
.factures li a .prix.✓:before
{
content: '✓';
display: inline-flex;
position: relative;
margin-right: 0.25em;
width: 1.25em;
height: 1.25em;
place-items: center;
place-content: center;
clip-path: circle(50%);
background: limegreen;
color: white;
}

/* Mois */
.factures h3
{
font-size: 1em;
font-weight: 400;
text-align: center;
text-transform: initial;
opacity: 0.4;
background: linear-gradient(black, black) no-repeat center;
background-size: 100% 1px;
clip-path: inset(0 0.5em);
}
.factures h3 span
{
padding: 0 0.5em;
background: white;
}
.factures h3:not(:hover) span:last-of-type {display: none;}
.factures h3:hover span:first-of-type {display: none;}
.factures h3 span i {font-size: 0.9em;}

/* Notre RIB */
#rib_factures
{
display: block;
}

/* NOUVELLE FACTURE */

#nouvelle_facture
{
z-index: 6;
overflow-y: auto;
position: fixed;
width: 320px;
height: 100%;
left: 0;
top: 0;
background: white;
clip-path: circle(0% at 100% 0%);
transition: clip-path 0.5s;
}
#nouvelle_facture.on {clip-path: circle(150% at 100% 0%);}
@media (max-width: 1400px) {
	#nouvelle_facture {width: 100%;}
}
#nouvelle_facture h2
{
padding: 1em 0.75em;
font-size: 1.25em;
}
#nouvelle_facture > button
{
position: absolute;
right: 0.5em;
top: 0.5em;
padding: 0.55em;
background: var(--couleur);
border: none;
border-radius: 4px;
font-size: 1.2em;
}
#nouvelle_facture form
{
padding: 1em;
padding-top: 0;
}
#nouvelle_facture form fieldset
{
margin: 1em 0;
padding: 0.5em;
border: 1px solid grey;
border-radius: 4px;
}
#nouvelle_facture form fieldset legend
{
padding: 0 0.5em;
font-weight: 600;
}
#nouvelle_facture form fieldset legend button
{
position: relative;
margin: -0.5em -0.5em -0.5em -0.25em;
padding: 0.5em;
background: transparent;
background-clip: content-box !important;
border: none;
font-weight: initial;
}
#nouvelle_facture form label
{
display: block;
position: relative;
}
#nouvelle_facture form label i
{
display: inline-block;
width: 1.35em;
text-align: center;
}
#nouvelle_facture form label input
{
display: inline-block;
width: calc(100% - 2em);
margin: 0.25em 0 0.25em 0.5em;
}
#nouvelle_facture form fieldset label input {}
#nouvelle_facture form textarea
{
box-sizing: border-box;
width: 100%;
min-height: 2.5em;
margin: 0.25em 0;
padding: 0.5em;
border: 1px solid grey;
border-radius: 4px;
resize: vertical;
}
#nouvelle_facture form fieldset textarea {width: calc(100% - 0.2em);}
#nouvelle_facture form fieldset textarea[Placeholder=Détails] {height: 5em;}
#nouvelle_facture form fieldset textarea[Placeholder=Remarque] {height: 2.5em;}

/* Autocomplétion client */
#nouvelle_facture form [name=nom] + span
{
z-index: 6;
display: block;
position: absolute;
visibility: hidden;
right: 0.4em;
top: 0.5em;
padding: 0.3em 0.4em;
background: var(--couleur);
border-radius: 4px;
cursor: pointer;
}
#nouvelle_facture form [name=nom] + span.on {visibility: visible;}

/* Prix & sap */
#nouvelle_facture form .prix
{
display: inline-block;
width: calc(100% - 3.15em);
}
#nouvelle_facture form .prix input
{
background: var(--couleur);
border-color: var(--couleur);
font-weight: 700;
}
#nouvelle_facture form .prix + label
{
display: inline-block;
margin-left: 0.25em;
padding: 0.5em;
cursor: pointer;
}
#nouvelle_facture form .prix + label input {visibility: hidden;}
#nouvelle_facture form .prix + label input + span
{
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(Sap.svg) no-repeat center / contain;
filter: grayscale(1) contrast(0.25) brightness(1.25);
}
#nouvelle_facture form .prix + label input:checked + span {filter: initial;}
#nouvelle_facture form [type=submit]
{
display: block;
margin: auto;
margin-top: 0.5em;
padding: 1.25em;
background: rgb(75,255,150);
border: none;
border-radius: 3em;
font-size: 1.5em;
transition: transform 0.5s, filter 0.5s;
}
#nouvelle_facture form [type=submit]:focus
{
transform: scale(1.5);
filter: blur(15px) opacity(0);
}

/* Nouvelle prestation */
#nouvelle_facture form > fieldset#nouvelle_prestation {}
#nouvelle_facture form > fieldset#nouvelle_prestation div
{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5em;
}
@media (max-width: 1400px) {
	#nouvelle_facture form > fieldset#nouvelle_prestation div {grid-template-columns: repeat(3, 1fr);}
}
#nouvelle_facture form > fieldset#nouvelle_prestation div button
{
padding: 0.5em;
background: var(--couleur);
border-radius: 4px;
border: none;
}
#nouvelle_facture form > fieldset#nouvelle_prestation div button:first-of-type {grid-column: 1 / 3;}
#nouvelle_facture form > fieldset#nouvelle_prestation div button i
{
display: block;
font-size: 1.5em;
}
#nouvelle_facture form > fieldset#nouvelle_prestation fieldset {display: none;}

/* MESSAGE */

main:not(.chargée)
{
width: 90%;
max-width: 320px;
text-align: center;
}

/* Introuvable */
#introuvable
{
}
#introuvable strong
{
display: block;
margin-bottom: 0.25em;
}
#introuvable a
{
display: inline-block;
padding: 0.5em;
font-size: 2em;
}

/* FACTURE */

main
{
--marges: 2.5em;
position: relative;
box-sizing: border-box;
margin: 2em auto;
padding: var(--marges);
box-shadow: 0 0 2cm rgba(0,0,0,0.25);
}
main.chargée
{
--espaces: 0.5cm;
width: 210mm;
height: 297mm;
background: white url(Filigrane.svg) no-repeat right bottom / auto 44%;
}
main header, main ul, main section, footer
{
display: block;
width: 100%;
}
@media only screen and (max-width: 850px) {
	main.chargée:not(.zoom)
	{
	--espaces: 0.25cm;
	width: 105mm;
	height: 148.5mm;
	margin-top: calc((100vh / 2) - (148.5mm / 2));
	margin-bottom: calc((100vh / 2) - (148.5mm / 2));
	font-size: 0.5em;
	}
	body > a#zoom {visibility: visible !important;}
}
@media only screen and (max-width: 400px) {
	main.chargée:not(.zoom)
	{
	--espaces: 0.20cm;
	width: 84mm;
	height: 118.8mm;
	margin-top: calc((100vh / 2) - (118.8mm / 2));
	margin-bottom: calc((100vh / 2) - (118.8mm / 2));
	font-size: 0.4em;
	}
}

/* Entête */
main header {text-align: right;}
main header h1 {position: absolute;}
main header h1 img {height: 3.35em;}
main header h2
{
color: var(--couleur);
font-size: 2.5em;
text-transform: uppercase;
}
main header p
{
display: inline-block;
margin-right: 2em;
}
main header p span {font-weight: 600;}
main header time {display: inline-block;}
main header time span {font-weight: 600;}

/* Client */
main #client
{
display: grid;
box-sizing: border-box;
margin: calc(var(--espaces) * 1.5) 0;
padding: 0.5em 1em;
border: 1px solid var(--couleur);
gap: 0.5em;
grid-template-columns: auto auto;

}
main #client li {}
main #client li span {font-weight: 600;}

/* Prestation */
main section
{
columns: 2;
column-gap: var(--espaces);
}
main section article
{
box-sizing: border-box;
position: relative;
margin-bottom: var(--espaces);
padding: var(--espaces);
padding-right: 6em;
break-inside: avoid;
background: white;
box-shadow: 0 0 calc(var(--espaces) * 1.5) rgba(0,0,0,0.15);
}
main section article h3 {font-size: 1.25em;}
main section article > strong:not(.prix)
{
padding: 0.25em 0.5em;
background: var(--couleur);
border-radius: 1em;
line-height: 2.25em;
}
main section article ul
{
list-style: url(Puce.svg);
padding-left: 0.8em;
}
main section article ul li {}
main section article em
{
display: block;
margin-top: 0.25em;
padding-top: 0.25em;
border-top: 1px solid lightgrey;
}
main section article .prix
{
display: block;
position: absolute;
width: 3em;
right: var(--espaces);
bottom: var(--espaces);
padding: 0.15em;
background: var(--couleur);
box-shadow: 0 0 0 0.2em var(--couleur);
font-size: 1.25em;
text-align: center;
white-space: nowrap;
}
main > section article#total
{
padding-right: var(--espaces);
background: var(--couleur);
}
main > section article#total .prix
{
bottom: initial;
top: calc(var(--espaces) - 0.2em);
}

/* SAP */
#sap
{
margin-top: calc(var(--espaces) * 1.5);
background: white url(Sap.svg) no-repeat right / auto 85%;
box-shadow: 0 0 0 calc(var(--espaces) * 0.75) white;
}
#sap h4 {font-size: 1em;}
#sap h4 strong
{
padding: 0 0.2em;
background: var(--couleur);
color: black;
}
#sap ul {font-size: 0.85em;}

/* Notes */
main section > p
{
margin-top: var(--espaces);
column-span: all;
text-align: justify;
}

/* Pied */
main footer
{
position: absolute;
box-sizing: border-box;
width: 100%;
left: 0;
bottom: 0;
padding: var(--marges);
}
main footer ul
{
margin-bottom: 0.5cm;
text-align: center;
}
main footer ul li
{
display: inline-block;
padding: 0 1em;
font-size: 0.85em;
font-weight: 700;
text-align: center;
}
main footer ul li i
{
display: block;
font-size: 2em;

}
main footer p {font-size: 0.9em;}
main footer p:first-of-type
{
font-style: italic;
float: left;
text-align: left;
}
main footer p:last-of-type
{
float: right;
text-align: right;
}
main footer p em
{
display: block;
font-size: 0.85em;
font-style: inherit;
}

/* BOUTONS FACTURE */

body > a, body > a:hover, body > a:focus, body > a:active
{
background: var(--couleur);
box-shadow: inset -0.1em -0.1em 0 rgba(0,0,0,0.15), 0 0 0.5em rgba(0,0,0,0.25);
user-select: none;
}
body > a, a#retour_introuvable
{
display: none;
position: fixed;
padding: 0.75em;
border-radius: 100%;
font-size: 1.5em;
}
body main.chargée ~ a {display: block;}
body > a#retour, a#retour_introuvable
{
left: 0.5em;
top: 0.5em;
}
a#retour_introuvable {display: block;}

/* Admin */
body > a#paye
{
right: 7em;
top: 0.5em;
}
body > a#paye:before {content: '💶';}
body > a#paye:after
{
content: '';
display: block;
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
left: 0;
top: 0;
border: 0.25em solid lightgrey;
border-radius: 100%;
}
body > a#paye.✓:before {content: '✔️';}
body > a#paye.✓:after {border-color: limegreen;}
body > a#courriel
{
right: 3.75em;
top: 0.5em;
&.off {filter: grayscale(1) contrast(0.25) brightness(1.5);}
}
body > a#supprimer
{
right: 0.5em;
top: 0.5em;
background: rgb(255,160,175);
}

/* Zoom */
body > a#zoom
{
visibility: hidden;
left: 0.5em;
bottom: 0.5em;
}

/* SAP */
body > a#sapBtn
{
right: 7em;
bottom: 0.5em;
font-weight: 800;
}
body > a#sapBtn img
{
display: block;
width: 1.3em;
height: 1.3em;
object-fit: contain;
transform: scale(1.5);
}

/* Rib */
body > a#rib
{
right: 3.75em;
bottom: 0.5em;
font-weight: 800;
}
body > a#rib span
{
display: inline-block;
position: relative;
top: -0.1em;
font-size: 0.8em;
transform: scale(1.25);
}
body > a#rib + aside
{
z-index: 10;
display: flex;
position: fixed;
box-sizing: border-box;
width: 100%;
height: 100%;
left: 0;
top: 0;
place-content: center;
place-items: center;
background: rgba(0,0,0,0.9);
color: rgb(200,200,200);
text-align: center;
clip-path: circle(0% at 72% 95%);
transition: clip-path 0.5s;
}
body > a#rib + aside.on {clip-path: circle(200% at 72% 95%);}
body > a#rib + aside h2
{
width: 100%;
color: white;
}
body > a#rib + aside p
{
display: inline-block;
padding: 0.5em;
line-height: 1.75em;
}
body > a#rib + aside strong
{
display: inline-block;
padding: 0 0.5em;
background: black;
color: white;
font-size: 0.9em;
}
body > a#rib + aside hr
{
width: 75%;
background: rgb(200,200,200);
}

/* Imprimer */
body > a#imprimer
{
right: 0.5em;
bottom: 0.5em;
}
body > a#imprimer + aside
{
z-index: 10;
position: fixed;
box-sizing: border-box;
width: calc(90% - 2em);
max-width: 320px;
right: 1em;
bottom: 1em;
padding: 1em;
background: white;
box-shadow: 0 0 2cm rgba(0,0,0,0.25);
text-align: center;
clip-path: circle(0% at 91% 95%);
transition: clip-path 0.5s;
}
body > a#imprimer + aside.on {clip-path: circle(200% at 91% 95%);}
body > a#imprimer + aside i
{
display: block;
margin-bottom: 0.25em;
font-size: 2em;
}
@media print {
	@page {margin: 0;}
	body > *:not(main) {display: none !important;}
	main.chargée
	{
	height: 270mm;
	page-break-inside: avoid;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
	box-shadow: none;
	}
}