/* VARIABLES */
:root
{
--marges: 32px;
--hl: #CC6140;
}
@media (max-width: 600px) {
	:root {--marges: 16px;}
}

/* GLOBAL */

/**::-moz-selection {}
*::selection {}*/
body
{
background: url(Galeries/Fond.jpg) no-repeat center;
background-size: cover;
background-attachment: fixed;
}
html, body, p, li, button, input, textarea, select
{
color: black;
font-family: 'Muli', Sans-Serif;
font-weight: 400;
font-size: 17px;
}
h1, h2, h3, h4, h5, h6
{
color: black;
font-family: 'Fira Sans', Sans-Serif;
font-weight: 500;
font-size: 20px;
}
hr {background: black;}

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

/* Bouton à l'accueil */
main #retourAccueil
{
position: absolute;
left: 1em;
top: 1em;
}
@media (max-width: 500px) {
	main #retourAccueil {display: none;}
}

/* SECTIONS */

header, section, footer {padding: var(--marges);}

/* Recherche & mot de passe */
input
{
--fond: transparent;
--text: rgba(255,255,255,0.75);
display: block;
margin: auto;
padding-bottom: 0.25em;
background: transparent;
border: none;
border-bottom: 1px solid var(--text);
color: var(--text);
font-size: 20px;
}

/* GALERIES */

/* Recherche */
input[name=recherche]
{
width: calc(100% - (var(--marges) * 2));
max-width: 320px;
margin-top: 1.5em;
background: var(--fond);
box-shadow: 0 0 0 0.5em var(--fond);
}
input[name=recherche]:hover
{
--fond: rgba(255,255,255,0.15);
}
input[name=recherche]:focus
{
--fond: white;
--text: rgba(0,0,0,0.75);
}

/* Liste de galeries */
#galeries section
{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
#galeries section article
{
--largeur: 256px;
width: var(--largeur);
margin: 4px;
transition: box-shadow 0.5s, transform 0.5s;
cursor: pointer;
user-select: none;
}
#galeries section article.charge {text-align: center;}
#galeries section article:not(.charge)
{
transform: scale(0.9) rotate(-5deg);
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
#galeries section article:not(.charge):hover
{
z-index: 1;
box-shadow: 0 2px 60px rgba(0,0,0,0.75);
transform: scale(1.1) !important;
transition: box-shadow 0.25s, transform 0.25s;
}
#galeries section article:not(.charge):before
{
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: radial-gradient(black, white);
transform: rotate(-5deg);
}
#galeries section article a {display: block;}
#galeries section article a img, #galeries section article h3
{
box-sizing: border-box;
width: 100%;
border: 8px solid white;
}
#galeries section article a img
{
height: var(--largeur);
background: white;
object-fit: cover;
}
#galeries section article h3
{
position: relative;
top: -1px;
padding: 8px;
background: white;
border-top: none;
font-size: 15px;
font-weight: 800;
text-align: center;
text-transform: uppercase;
line-height: 110%;
}
#galeries section article i
{
display: block;
position: absolute;
left: 0;
top: 0;
font-size: 1.5em;
font-style: normal;
}
@media (max-width: 600px) {
	#galeries section article {--largeur: calc(45vw - var(--marges));}
	#galeries section article:before {transform: rotate(-3deg);}
	#galeries section article h3 {font-size: 0.9em;}
}

/* Chargement */
#galeries .chargement
{
display: inline-block;
width: 2em;
height: 2em;
background-image: conic-gradient(rgba(155,155,155,0) 50%, rgba(155,155,155,1));
clip-path: circle(50%);
animation: tourne 0.5s linear infinite;
}
#galeries section article a .chargement
{
z-index: 0;
position: absolute;
left: 45%;
top: 40%;
}

/* GALERIE */

/* Barre de navigation */
#galerie nav
{
position: fixed;
z-index: 5;
width: 100%;
left: 0;
top: 0;
padding: 8px;
background: white;
box-shadow: 0 5px 15px rgba(0,0,0,0.25);
white-space: nowrap;
}
#galerie nav > *
{
display: inline-block;
vertical-align: middle;
}

/* Titre */
#galerie nav #retour
{
width: 1.5em;
height: 1.5em;
background: url(Galeries/Retour.svg) no-repeat center;
background-size: contain;
}
#galerie nav #retour:hover {animation: secoue10 0.25s infinite;}
#galerie nav > h2
{
margin-left: 0.5em;
padding-left: 0.5em;
border-left: 1px solid rgb(150,150,150);
font-weight: 300;
}

/* Dossiers */
#galerie nav #dossiers
{
padding-left: 12px;
background: white;
}
#galerie nav #dossiers select
{
position: relative;
width: 7em;
top: -0.1em;
border: none;
font-size: 0.75em;
font-weight: 800;
cursor: pointer;
}
#galerie nav #dossiers select option {}
@media (max-width: 720px) {
	#galerie nav #dossiers
	{
	position: absolute;
	right: 0px;
	padding-right: 24px;
	}
}

/* Panier */
#galerie nav #panier
{
display: none !important; /*-------------------------------------------------------------------------------*/
position: relative;
float: right;
right: -128px;
margin-right: 16px;
transition: right 1s;
}
#galerie nav #panier.on
{
right: 0px;
}
#galerie nav #panier b
{
display: inline-block;
margin-right: 0.25em;
}
#galerie nav #panier span {margin-right: 0.25em;}
#galerie nav #panier i
{
display: inline-block;
vertical-align: -0.1em;
font-family: Icones;
font-size: 20px;
font-style: normal;
}
@media (max-width: 720px) {
	#galerie nav #panier
	{
	position: fixed;
	right: 8px;
	top: 52px;
	margin: 0px;
	padding: 16px;
	background: rgba(255,255,255,0.75);
	border-radius: 8px;
	}
	#galerie nav #panier b
	{
	margin-right: 0.5em;
	transform: scale(1.6);
	}
	#galerie nav #panier > span {display: none;}
}

/* Menu */
#galerie > menu
{
z-index: 5;
position: fixed;
box-sizing: border-box;
overflow: hidden;
width: 100%;
top: -60px;
padding: 0.25em 0;
padding-left: 8px;
background: var(--hl);
white-space: nowrap;
transition: top 0.5s;
}
#galerie > menu.on {top: 0px;}
#galerie > menu > div
{
display: inline-block;
position: relative;
overflow: hidden;
transition: width 0.75s;
}
#galerie > menu > div:first-of-type {width: 100%;}
#galerie > menu > div:last-of-type {width: 0%;}
#galerie > menu.suivant > div:first-of-type {width: 0%;}
#galerie > menu.suivant > div:last-of-type {width: 100%;}
#galerie > menu > div:first-of-type button.page {display: none;}
#galerie > menu button
{
width: 2em;
height: 2em;
padding: 0.5em;
background: transparent;
border: none;
color: black;
font-family: Icones;
font-size: 20px;
text-align: center;
transition: color 0.5s;
}
#galerie > menu button:hover
{
color: white;
transition: color 0s;
}
#galerie > menu hr
{
display: inline-block;
width: 1px;
margin: 0 8px 0 8px;
height: 1em;
}
#galerie > .signet_btn
{
z-index: 3;
display: block;
position: fixed;
left: 16px;
top: 56px;
padding: 8px 12px;
background: var(--hl);
border: none;
border-radius: 4px;
font-family: Icones;
font-size: 20px;
transition: left 0.5s;
}
#galerie > .signet_btn:hover {color: white;}
#galerie > menu.on ~ .signet_btn {left: -56px;}

/* Infobulle */
[data-bulle]:after
{
pointer-events: none;
z-index: 4;
content: attr(data-bulle);
display: block;
position: absolute;
top: 0.25em;
margin-left: 2.5em;
padding: 0.5em 0.75em 0.5em calc(0.75em + 10px);
border-image-source: url(Galeries/InfobulleG.svg);
border-image-slice: 0% 33.3% fill;
border-image-width: 10px;
border-image-outset: 10px 0px;
color: black;
font-family: Sans-Serif;
font-size: 15px;
font-weight: 600;
white-space: nowrap;
transform: scale(0.75);
mask-image: url(Galeries/Masque.svg);	-webkit-mask-image: url(Galeries/Masque.svg);
mask-size: cover;						-webkit-mask-size: cover;
mask-repeat: no-repeat;					-webkit-mask-repeat: no-repeat;
mask-position: 0 200%;					-webkit-mask-position: 0 200%;
transition: transform 0.35s 0.5s cubic-bezier(.5,1.82,.68,.9), mask-position 0.35s 0.5s ease, -webkit-mask-position 0.35s 0.5s ease;
}
[data-bulle]:hover:not(.bulleOff):after
{
transform: scale(1);
mask-position: 0 0%;			-webkit-mask-position: 0 0%;
}

@media (max-width: 600px) {
	[data-bulle]:after
	{
	left: 0;
	margin-left: 0;
	padding: 0.5em 0.75em;
	background: white;
	border: none;
	}
}

/* Compteur de photos sélectionnées */
#photosSelect
{
z-index: 3;
display: block;
position: fixed;
left: -80px;
top: 64px;
padding: 8px 12px;
background: white;
border-radius: 4px;
white-space: nowrap;
transition: left 0.5s;
}
#photosSelect.on {left: 16px;}
#photosSelect strong {font-weight: 800;}
#photosSelect img
{
height: 1em;
vertical-align: -0.1em;
}

/* Mot de passe */
#galerie_pass
{
max-width: 512px;
margin: auto;
margin-top: 20vh;
padding: 28px 24px;
background: white;
text-align: center;
}
#galerie_pass p {}
#galerie_pass p a {color: var(--hl);}
#galerie_pass p strong
{
display: block;
color: red;
}
#galerie_pass input
{
display: inline-block;
width: 4em;
margin-top: 8px;
padding-left: 0.2em;
padding-right: 0.1em;
background: linear-gradient(to right, black 0%, black 20%, transparent 20%, transparent 26.666%, black 26.666%, black 46.666%, transparent 46.666%, transparent 53.332%, black 53.332%, black 73.332%, transparent 73.332%, transparent 79.998%, black 79.998%, black 100%);
background-repeat: no-repeat;
background-position: bottom;
background-size: 100% 1px;
color: black;
font-family: Inconsolata, monospace;
font-size: 1.5em;
font-weight: 800;
text-align: left;
letter-spacing: 0.5em;
-moz-appearance: textfield;
-webkit-appearance: textfield;
appearance: textfield;
}
#galerie_pass.post input {display: none;}
#galerie_pass input + span
{
display: none;
margin-left: 8px;
color: black;
font-size: 1.5em;
animation: tourne 0.75s infinite linear;
}
#galerie_pass.post input + span {display: block;}
@media (max-width: 600px) {
	#galerie_pass
	{
	margin-left: 16px;
	margin-right: 16px;
	}
}

/* Entête */
#galerie header
{
position: relative;
box-sizing: border-box;
overflow: hidden;
width: 100vw;
min-height: 100vh;
background: black;
}
#galerie header #entete_fond
{
position: absolute;
left: -10%;
top: -10%;
width: 120%;
height: 120%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transform: translateX(0vh);
filter: blur(5px) opacity(0.35);
}

@media (min-width: 1000px) {
	#galerie header #entete_fond {animation: mouvement 10s ease-out both;}
}
@keyframes mouvement
{
	to
	{
	left: -20%;
	top: -20%;
	width: 140%;
	height: 140%;
	}
}
#galerie header #entete_contenu
{
position: relative;
top: 25vh;
padding-top: var(--marges);
padding-bottom: calc(var(--marges) * 1.5);
text-align: center;
}
#galerie header #entete_contenu > *
{
position: relative;
color: white;
text-align: center;
text-shadow: 0 0 7px black;
}
#galerie header h1
{
font-family: 'Parisienne', Serif;
font-size: 4em;
}
#galerie header p
{
max-width: 1024px;
margin: 2em auto 2em auto;
font-size: 1.25em;
}
#galerie header button[data-dossier]
{
position: relative;
padding: 0.5em 1em;
background: transparent;
border: none;
font-size: 1.5em;
font-weight: 600;
transition: transform 0.25s;
}
#galerie header button[data-dossier]:after
{
content: '⨠';
opacity: 0;
position: absolute;
width: 100%;
left: 0;
bottom: -0.5em;
transform: rotate(90deg) scaleX(0.6);
font-size: 1.25em;
transition: opacity 0.25s, bottom 0.25s;
}
#galerie header button[data-dossier]:hover:after
{
opacity: 1;
bottom: -0.75em;
}
#galerie header #entete_ombre
{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 20vh;
background: linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0));
}
@media (min-width: 1280px) {
	#galerie header #entete_fond {background-attachment: fixed;}
}
@media (max-width: 960px) {
	#galerie header h1 {font-size: 2em;}
	#galerie header p {font-size: 0.85em;}
	#galerie header button {font-size: 1.15em;}
	#galerie header button[data-dossier] {font-size: 1em;}
}

/* Défile */
#defile {--couleur: white;}
@media (max-width: 500px) {
	#defile	{background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));}
}

/* PHOTOS */

#galerie section
{
--cols: 8;
display: grid;
padding: 0;
grid-template-columns: repeat(var(--cols), 1fr);
grid-auto-flow: dense;
}

/* Photos */
#galerie section .photo
{
position: relative;
overflow: hidden;
cursor: zoom-in;
}
#galerie section .photo.select {}
#galerie section .photo:not([data-etat='chargé']):before
{
z-index: -1;
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-image: linear-gradient(to bottom right, rgba(255,255,255,0) 25%, rgba(255,255,255,0.05), rgba(255,255,255,0) 75%);
background-size: contain;
transform: scale(1.75) translateX(-50%) translateY(-50%);
animation: chargement 1s infinite linear;
}
@keyframes chargement {
	to {transform: scale(1.75) translateX(50%) translateY(50%);}
}
#galerie section .photo > img
{
display: block;
width: 100%;
height: 100%;
min-height: calc(100vw / var(--cols));
object-fit: fill;
background-repeat: no-repeat;
background-position: top;
background-size: cover;
opacity: 0;
transition: opacity 0.25s, transform 0.25s, filter 0.25s;
}
#galerie section .photo[data-etat='chargé'] > img {opacity: 1;}
#galerie section .photo.select > img
{
opacity: 0.5;
transform: scale(1.2);
filter: grayscale(100%);
}

@media (min-width: 601px) {
	#galerie section .photo:nth-child(10n+4)
	{
	grid-column: span 2;
	grid-row: span 2;
	}
	#galerie section .photo:nth-last-child(-n+6)
	{
	grid-column: initial;
	grid-row: initial;
	}
}
@media (min-width: 1101px) {
	#galerie section .photo:nth-child(10n+4)
	{
	grid-column: span 2;
	grid-row: span 2;
	}
	#galerie section .photo:nth-last-child(-n+6)
	{
	grid-column: initial;
	grid-row: initial;
	}
}
@media (max-width: 1100px) {
	#galerie section {--cols: 5;}
}
@media (max-width: 600px) {
	#galerie section {--cols: 3;}
}

/* Dossiers */
#galerie section h3
{
user-select: none;
position: relative;
grid-column: 1 / span var(--cols);
padding: 0.75em;
color: white;
font-size: 30px;
text-align: center;
text-shadow: 0 0 20px rgba(0,0,0,0.5);
}
#galerie section h3 a
{
display: inline-block;
position: relative;
padding: 0.5em 0.5em;
color: black;
font-family: Icones;
font-size: 20px;
}
#galerie section h3 a:hover 
{
color: white;
}
@media (max-width: 960px) {
	#galerie section h3 {font-size: 20px;}
}

/* Coche */
#galerie section .photo i
{
z-index: 2;
display: block;
position: absolute;
width: calc((100vw / var(--cols)) * 0.25);
height: calc((100vw / var(--cols)) * 0.25);
left: calc((100vw / var(--cols)) * 0.05);
top: calc((100vw / var(--cols)) * 0.05);
background: white url(Galeries/Select.svg) no-repeat center;
background-size: 50%;
border-radius: 100%;
font-size: 0px;
transform: scale(0) rotate(35deg);
transition: transform 0.25s ease;
}
#galerie section .photo.select i
{
transform: scale(1) rotate(0deg);
transition: transform 0.4s cubic-bezier(.5,1.82,.68,.9);
}

/* Signet */
#galerie section .photo.signet {}
#galerie section .photo:after
{
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
outline: 3px dashed var(--hl);
outline-offset: 0px;
transition: outline-offset 0.5s ease;
}
#galerie section .photo.signet:after
{
/*background: linear-gradient(-135deg, rgba(0,0,0,0.5), rgba(0,0,0,0) 50%) no-repeat;*/
outline-offset: -7px;
}
#galerie section .photo b
{
z-index: 2;
position: absolute;
width: calc((100vw / var(--cols)) * 0.225);
height: calc((100vw / var(--cols)) * 0.225);
right: calc((100vw / var(--cols)) * 0.05);
top: calc((100vw / var(--cols)) * -0.25);
background: url(Galeries/Signet.svg) no-repeat bottom;
background-size: contain;
filter: drop-shadow(0px 2px 1px rgb(0,0,0,0.5));
transition: top 0.5s ease;
}
#galerie section .photo.signet b {top: 0px;}
@media (max-width: 450px) {
	#galerie section .photo:after {outline-width: 2px;}
	#galerie section .photo.signet:after {outline-offset: -5px;}
}

/* Photos imprimées */
#galerie section .photo span
{
display: block;
position: absolute;
right: 10px;
bottom: 10px;
background: rgba(0,0,0,0.75);
}
#galerie section .photo span img
{
display: inline-block;
height: 32px;
margin: 4px;
}

/* Astuce */
#astuce
{
position: fixed;
left: 48px;
bottom: 48px;
margin-right: 48px;
padding: 1em;
background: white;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
border-radius: 16px;
color: rgb(150,150,150);
font-size: 13px;
cursor: pointer;
}

/* Télécharger */
#telecharger
{
z-index: 6;
display: none;
position: fixed;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
background: rgba(0,0,0,0.9);
}
#telecharger.on {display: block;}
#telecharger a
{
display: block;
width: 100%;
height: 100%;
padding-top: 45vh;
}
#telecharger a p
{
margin: auto;
color: white;
text-align: center;
}
#telecharger a p strong
{
display: block;
margin: 0.25em;
color: white;
font-family: Icones;
font-size: 50px;
font-weight: normal;
transition: transform 0.25s;
}
#telecharger a p strong:hover {transform: translateY(10px);}

/* Imprimer & retoucher */
#imprimer, #retoucher
{
display: none; /*-------------------------------------------------------------------------*/
z-index: 6;
position: fixed;
box-sizing: border-box;
overflow: auto;
width: 90%;
max-width: 720px;
max-height: 90vh;
left: 0;
top: -100vh;
padding: 48px;
background: white;
box-shadow: 0 0 100px rgba(0,0,0,0.75);
border-radius: 32px;
text-align: center;
transition: top 1s;
}
#imprimer.on, #retoucher.on {top: 5vh;}
#imprimer h2, #retoucher h2 {font-size: 40px;}
#imprimer h2 + button, #retoucher h2 + button
{
position: absolute;
right: 16px;
top: 16px;
padding: 4px;
background: transparent;
border: none;
font-family: Icones;
font-size: 30px;
transition: transform 0.25s;
}
#imprimer h2 + button:hover, #retoucher h2 + button:hover {transform: scale(1.1) rotate(-90deg);}
#imprimer p, #retoucher p {margin: 1em 0;}

/* Imprimer */
#imprimer {--impr: rgb(150,200,75)}
#imprimer table {width: 100%;}
#imprimer table tr {box-shadow: inset 0 -1px rgb(200,200,200);}
#imprimer table tr td {}
#imprimer table tr td strong {display: block;}
#imprimer table tr td em
{
display: block;
font-size: 0.75em;
font-style: normal;
}
#imprimer table tr td img {height: 4em;}
#imprimer table tr td button
{
padding: 8px;
background: var(--impr);
border: none;
border-radius: 4px;
color: white;
font-size: 0.75em;
font-weight: 800;
}
#imprimer table tr td button:hover
{
background: white;
color: var(--impr);
box-shadow: 0 0 15px var(--impr);
}

/* Retoucher */
#retoucher {}

/* Partager */

/* PIED */

footer
{
opacity: 0.75;
box-sizing: border-box;
width: 100%;
color: black;
font-size: 11px;
text-align: center;
text-shadow: 0 0 3em rgba(255,255,255,0.75);
}
footer hr
{
width: 64px;
margin: 1em auto;
}
footer a
{
color: black;
font-weight: 800;
}
footer a:hover {text-decoration: underline;}
footer .mdp {color: rgba(0,0,0,0);}