:root {
    --background-color:#38363f;
    --background-color-secondary:#2b292f;
    --text-color:white;
    --infoText-color:gray;
}

@font-face {
  font-family: 'Oswald';
  src: url('./../font/Oswald.ttf') format('truetype');
}

body {
    margin: 0;
    color: var(--text-color);
    background: var(--background-color);
    font-family: 'Oswald', sans-serif;
    user-select:none;
}

.shooting {
    margin-top:25px;
}

header {
    display:flex;
    align-items:center;
    flex-direction:column;
    background:var(--background-color-secondary);
    padding:8px;
    margin:0;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index: 1000;
}

main {
    padding:10px;
    padding-top: 120px;
}

.subtitle {
    color:var(--infoText-color);
    font-size:0.8rem;
}

p {
    margin:0
}

.mosaique {
    margin-top:10px;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Min 100px, max 1 fraction */
    grid-auto-rows: minmax(100px, 200px); /* hauteur entre 100px et 200px max */
}

.photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition-duration:500ms;
  cursor:pointer;
}

.photo:hover {
    transform:scale(1.1);
}

#un-1 {
    grid-row:span 2;
    grid-column:span 2;
}

#un-2 {
    grid-row:span 1;
    grid-column:span 2;
    object-position: center top;
}

#un-3 {
    grid-row:span 2;
    grid-column:span 2;
}

#un-4 {
    grid-row:span 2;
    grid-column:span 4;
    object-position: 0 -90px;
}

#un-7 {
    grid-row:span 2;
    grid-column:span 1;
}

#un-8 {
    grid-row:span 2;
    grid-column:span 1;
}

#un-9 {
    grid-row:span 1;
    grid-column:span 2;
    object-position: center -10px;
}

#un-10 {
    grid-row:span 1;
    grid-column:span 2;
}

#un-11 {
    grid-row:span 1;
    grid-column:span 2;
    object-position: center -20px;
}

#un-15 {
    grid-row:span 1;
    grid-column:span 2;
    object-position: center top;
}

.fade {
    position: relative;
    width: 100%;
    height: 100%;
}

.fadeImage {
    position:absolute;
}

#fade-5-6 {
    grid-row:span 2;
    grid-column:span 4;
}

#deux-6 {
  opacity: 1;
}

.fade:hover #deux-6 {
  opacity: 0;
}

#deux-5 {
    opacity:0;
}

.fade:hover #deux-5 {
    opacity:1;
  transform:scale(1.1);
}


#deux-7 {
    grid-row:span 2;
    grid-column:span 3;
}

#fade-9-10 {
    grid-row:span 1;
    grid-column:span 2;
}

#deux-10 {
  opacity: 1;
}

.fade:hover #deux-10 {
  opacity: 0;
}

#deux-9 {
    opacity:0;
}

.fade:hover #deux-9 {
    opacity:1;
  transform:scale(1.1);
}

#fade-16-17 {
    grid-row:span 2;
    grid-column:span 2;
}

#deux-17 {
  opacity: 1;
}

.fade:hover #deux-17 {
  opacity: 0;
}

#deux-16 {
    opacity:0;
}

.fade:hover #deux-16 {
    opacity:1;
  transform:scale(1.1);
}

#deux-19 {
  opacity: 1;
}

.fade:hover #deux-19 {
  opacity: 0;
}

#deux-18 {
    opacity:0;
}

.fade:hover #deux-18 {
    opacity:1;
    transform:scale(1.1);
}


#deux-20 {
    grid-row:span 2;
    grid-column:span 2;
    align-self:center;
}

#deux-22 {
    grid-row:span 2;
    grid-column:span 4;
    object-position: center -50px;
}

#deux-26 {
    grid-row:span 2;
    grid-column:span 2;
}

#deux-28 {
    grid-row:span 3;
    grid-column:span 2;
    object-position: center center;
}

#deux-29 {
    grid-row:span 2;
    grid-column:span 1;
    object-position: -99px center;
}

#deux-30 {
    grid-row:span 2;
    grid-column:span 2;
    object-position: center center;
}

#fade-32-33 {
    grid-row:span 2;
    grid-column:span 2;
}

#deux-33 {
  opacity: 1;
}

.fade:hover #deux-33 {
  opacity: 0;
}

#deux-32 {
    opacity:0;
}

.fade:hover #deux-32 {
    opacity:1;
    transform:scale(1.1);
}

#deux-34 {
    grid-row:span 1;
    grid-column:span 2;
    object-position: center -50px;
}

#deux-35 {
    grid-row:span 2;
    grid-column:span 4;
    object-position: center -50px;
}

.overlay {
    z-index:99998;
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:rgba(0, 0, 0, 0.5);
    display:none;
}

.fenetreModal {
    z-index:99999;
    display:none;
    align-items:center;
    flex-direction:column;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.fenetreModal img {
    height:80vh;
    overflow:hidden;
}

#quitIcon {
    display:none;
    z-index:99999;
    position:fixed;
    top:10px;
    right:10px;
    cursor:pointer;
}

footer {
    display:flex;
    align-items:center;
    flex-direction:column;
    background:var(--background-color-secondary);
    padding:8px;
    margin:0;
    text-align:center;
}

footer a {
    color:var(--text-color);
}

.mentionLegales {
    display:grid;
    grid-gap:50px;
}

.contact {
    grid-column:1
}

.hebergement {
    grid-column:2
}

.developpement {
    grid-column:3
}

nav {
    position:fixed;
    z-index:99997;
    bottom:20px;
    right:20px;
    display:flex;
    align-items:center;
    flex-direction:column;
    transition-duration:500ms;
    opacity:0;
    cursor:pointer;
}

h4 {
    margin:5px 0;
}