footer {display: none;}
main
{
--hl: rgb(193, 171, 146);
--coins: 6px;
padding: 3em;
background: url(Mosaique.png);
text-align: center;
}
h1
{
margin-bottom: 0.5em;
padding: 0 1em;
text-align: center;
line-height: 0.85em;
text-shadow: 0 0 30px var(--hl);
}
h1 em
{
display: block;
font-size: 0.85em;
}
h2
{
font-family: 'Raleway', Sans-Serif;
font-weight: 700;
font-size: 1.25em;
}
main > h2
{
display: inline-block;
padding: 0.5em;
background: var(--hl);
border-radius: 8px;
transform: scale(0.9) translateY(-1em);
}
form
{
max-width: 1200px;
margin: auto;
text-align: center;
}
form > div
{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
form span.rond, form span.trait, form span.fleche
{
display: block;
margin: 8px auto;
border: dashed black;
}
form span.rond
{
width: 64px;
height: 64px;
border-width: 4px;
border-radius: 100%;
}
form span.trait
{
width: 0px;
height: 32px;
border-width: 0 4px 0 0;
}
form span.fleche
{
width: 48px;
height: 48px;
border-width: 0 4px 4px 0;
transform: translateY(-20px) rotate(45deg);
}

@media (max-width: 700px) {
	#tarifs {padding: 1em;}
	h1 {padding: 0.5em 1em;}
	form span.fleche {margin-bottom: 42px;}
}
@media (max-width: 450px) {
	h1 {padding: 0.5em 0.5em;}
	main {padding: 1em;}
}

/* Fb */
#social.gauche + button.social {display: none;}

/* Bouton de retour */
main #retourAccueil
{
position: absolute;
left: 1em;
top: 2em;
}
main #retourAccueil:before {border-color: black !important;}
main #retourAccueil:hover:before {border-color: var(--hl);}

/* Blocs */
form fieldset, form section
{
position: relative;
box-sizing: border-box;
width: 10em;
margin: 0.5em;
padding: 1em;
background: white;
border: 2px solid var(--hl);
border-bottom-width: 10px;
border-radius: 16px;
}
form fieldset {filter: grayscale(100%);}
form fieldset.on {filter: grayscale(0%);}
form fieldset > *
{
filter: opacity(0.4);
transition: filter 0.35s;
}
form fieldset.on > * {filter: opacity(1);}

/* Survol éléments */
form fieldset, form > label
{
transition: box-shadow 0.25s, transform 0.25s, filter 0.35s;
}
form fieldset:hover, form > label:hover
{
box-shadow: 0 0 1em rgba(0,0,0,0.15);
transform: scale(1.02);
}

@media (max-width: 450px) {
	form fieldset {width: 100%;}
}

/* Titre */
form fieldset h2
{
margin-bottom: 0.5em;
cursor: default;
user-select: none;
}
form fieldset h2 i
{
display: block;
margin-bottom: 0.1em;
font-family: Icones;
font-size: 3em;
font-style: normal;
}
form fieldset h2 em
{
display: block;
position: relative;
margin-top: -0.15em;
font-size: 0.75em;
font-style: normal;
}

/* Case à cocher de bloc */
form fieldset > input[type=checkbox]:first-of-type
{
position: absolute;
left: 1em;
top: 1em;
transform: scale(3);
}
form fieldset.obligatoire > input[type=checkbox]:first-of-type {pointer-events: none;}

@media (max-width: 800px) {

form fieldset > input[type=checkbox]:first-of-type {transform: scale(2.5);}

}

/* Champs */
form label
{
display: block;
position: relative;
max-width: 220px;
min-height: 20px;
margin: auto;
padding-top: 0.4em;
background: var(--hl);
border-radius: var(--coins);
font-size: 0.7em;
font-weight: 700;
text-transform: uppercase;
user-select: none;
}
form label.off, form fieldset:not(.on) label {pointer-events: none;}
form label.off {filter: opacity(0.5) grayscale(100%);}
form fieldset label + label {margin-top: 1em;}
form label *
{
width: 100%;
margin-top: 0.2em;
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
}
form input, form select, form textarea
{
box-sizing: border-box;
padding: 0.25em;
background: white;
border: 1px solid var(--hl);
border-radius: var(--coins);
color: var(--hl);
text-align: center;
}
form input[type=number] {width: 3em;}
form label.checkbox {padding-bottom: 0.4em;}
form label input[type=checkbox]
{
position: absolute;
width: initial;
left: 0.5em;
top: 0.3em;
transform: scale(1.5);
}
form #remarques, form section {max-width: calc(100%);}
form textarea
{
min-height: 8em;
padding: 0.5em;
resize: vertical;
color: black;
font-size: 0.9rem;
text-align: left;
}

@media (max-width: 1650px) {

form label {font-size: 0.8em;}

}

/* Modaliés de livraison */
form section
{
width: initial;
margin: auto;
}
form section h2 {margin-bottom: 0.5em;}
form section ul {list-style: none;}
form section ul li
{
display: inline-block;
width: 7em;
vertical-align: top;
padding: 0.9em;
}
form section ul li i
{
display: block;
font-size: 1.2em;
font-style: normal;
}
form section ul li em
{
display: block;
margin-top: 0.25em;
color: var(--hl);
font-size: 0.7em;
}
form section ul li a
{
color: rgb(75,75,75) !important;
text-decoration: underline;
}

@media (max-width: 800px) {

form section ul li
{
width: 10em;
padding: 0.5em;
}
form section ul li em {font-size: 0.75em;}

}

@media (max-width: 500px) {

form section ul li {width: 90%;}
form section ul li i {display: inline-block;}
form section ul li em {margin-top: -0.20em;}

}

/* Panneau fixe */
aside#contact
{
position: fixed;
width: 100vw;
left: 0;
bottom: 0;
background: rgb(120,150,100);
}
aside#contact > *
{
display: inline-block;
margin: 0.5em 0;
padding: 0.4em 0.6em;
vertical-align: middle;
border-radius: 4px;
font-size: 0.8em;
}
aside#contact > p {cursor: default;}
aside#contact #prix, aside#contact > div [type=submit]
{
background: white;
box-shadow: 0 3px black;
font-size: 1em;
font-weight: 700;
}
aside#contact #photos {border: 1px solid black;}
aside#contact [type=submit]
{
margin-left: 30vw;
background: rgba(0,0,0,0.25);
border: none;
text-transform: uppercase;
}
aside#contact [type=submit]:hover
{
background: white;
color: rgb(50,50,50);
cursor: pointer;
}
aside#contact:not(.contact) [type=submit].anim {animation: nousContacterAnim 2s infinite;}
@keyframes nousContacterAnim {
	50%
	{
	box-shadow: 0 0 30px white;
	transform: scale(1.1);
	}
}
aside#contact [type=submit] > span:last-child {display: none;}
aside#contact.contact [type=submit] > span:first-child {display: none;}
aside#contact.contact [type=submit] > span:last-child {display: initial;}

@media (max-width: 500px) {
aside#contact [type=submit] {margin-left: 15vw;}
}

@media (max-width: 400px) {
aside#contact [type=submit] {margin-left: 5vw;}
}

/* Panneau fixe (contact) */
aside#contact > div
{
overflow: hidden;
display: block;
max-width: 1200px;
max-height: 0em;
margin: 0 auto;
padding: 0;
text-align: center;
}
aside#contact.contact > div
{
max-height: 100em;
margin-bottom: 2em;
transition: max-height 4s, margin 1s;
}
aside#contact > div > *
{
display: inline-block;
vertical-align: middle;
}
aside#contact > div input
{
display: inline-block;
width: 10em;
background: transparent;
border: none;
border-bottom: 1px solid black;
border-radius: 0px;
color: black;
transition: box-shadow 0.5s;
}
aside#contact > div input:hover, aside#contact > div input:focus {box-shadow: 0 0 30px rgba(0,0,0,0.25);}
aside#contact > div input[name=nom]
{
display: block;
margin: auto;
margin-bottom: 2em;
}
aside#contact > div img.maries
{
height: 6em;
margin: 1em;
}
aside#contact > div label
{
max-width: initial;
padding: 0 1em;
background: transparent;
}
aside#contact > div label i
{
position: relative;
top: 0.25em;
margin-right: 0.25em;
font-size: 2em;
font-style: normal;
}
aside#contact > div [type=submit]
{
display: block;
width: 90%;
margin: auto;
margin-top: 3em;
padding: 0.5em;
box-shadow: none;
border-radius: var(--coins);
}
aside#contact > div [type=submit]:hover
{
background: var(--hl);
color: white;
}

@media (max-width: 450px) {

aside#contact > div > input {width: 7em;}
aside#contact > div img.maries
{
height: 4em;
margin: 0.5em;
}

}

/* Bulles */
aside#contact > em
{
display: none;
position: absolute;
width: 200px;
left: 0;
padding: 1.25em 1.5em;
background: white;
border-radius: 12px;
font-size: 15px;
font-weight: 400;
filter: drop-shadow(0 0 15px rgba(0,0,0,0.25));
}
aside#contact > p:hover + em, aside#contact > p.bulle + em
{
display: block;
transform-origin: top;
animation: bulleAnim 0.5s 1;
}
@keyframes bulleAnim {
0% {transform: rotate(0deg)}
25% {transform: rotate(-2deg)}
50% {transform: rotate(2deg)}
75% {transform: rotate(-2deg)}
100% {transform: rotate(0deg)}
}
aside#contact > em:before
{
z-index: -1;
content: '';
display: block;
position: absolute;
width: 32px;
height: 32px;
left: 24px;
bottom: -12px;
background: white;
transform: rotate(45deg);
cursor: default;
}

/* Confirmation */
#confirmation
{
z-index: 5;
position: fixed;
box-sizing: border-box;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
padding: 10vh 2vw;
background: var(--hl);
}
#confirmation > a
{
position: relative;
top: 1em;
padding: 0.5em;
border: 1px solid black;
border-radius: 8px;
color: black;
}