/* global variables */
:root{
    /* font-size */
    --font-size-global: 2.5vh;
    --font-size-global-landscape: 25vw;
    --font-size-global-landscape-pc: 3vh;
    --font-size-title: 3rem;
    --font-size-subtitle: 2.5rem;
    --font-size-authors: 2rem;
    
    /* photo landscape aspect ratio */
    --photo-aspect-ratio: calc(7660 / 5107);

  	/* décalage vidéo */
    --video-ratio : calc(1920/1080);
  
  	--margin-cat: 2vw;
    /* width and height categories */
    --width-one: calc(100vw - 4*var(--margin-cat));
    --width-two: calc(var(--width-one)/2);
    --width-three: calc(var(--width-one)/3);
    --width-four: calc(var(--width-one)/4);
    --width-six: calc(var(--width-one)/6);
}

/* custom font */
@font-face
{
  font-family:"flavie";
  src: url("https://nuluma.fr//pages-assets//Flaap-Regular.ttf?1754388312") format("TrueType");
}
@font-face
{
  font-family:"GreycliffCF";
  src: url("https://nuluma.fr//pages-assets//GreycliffCF-Light.ttf?1754388312") format("TrueType");
}

@font-face
{
  font-family:"Shelley";
  src: url("https://nuluma.fr//pages-assets//Shelley Andante Script Regular.otf?1754388312") format("OpenType");
}
/* titles font-size */
#title      { font-size: var(--font-size-title); }
#subtitle   { font-size: var(--font-size-subtitle); }
#authors    { font-size: var(--font-size-authors); }

/* global structure */
html
{
  margin: 0;
  background-color:white;
  color: black;
  font-family: "flavie", "GreycliffCF";
  font-size: var(--font-size-global);
}

body { margin: 0; }

header
{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: top;
  padding-top: 25%; /* for smartphone */
  background-image: url("https://nuluma.fr/pages-assets/Vin_dhonneur_001.jpg?1754388312");
  background-repeat: no-repeat;
  background-position: center center;
  text-align: center;
  background-size: cover;	
  padding-top: 0;
  justify-content: center;
  color: white;
  text-shadow: 0 0 5px black;
}
#myVideo
{
  z-index:0;
  position:absolute;
  width:100%;
  height: 100vh;
  background-color: black;
  top: 0px;
  left: 0px;
}
					  
#videomask
{  
  position:absolute;
  left: 0px;
  z-index:0;
  margin : auto;
  width: 100%;
  height: 100vh;							
  box-sizing: border-box;
  padding-top: calc((100vh - (100vw / var(--video-ratio))) / 2) ;
  padding-bottom: max(calc((100vh - (100vw / var(--video-ratio))) / 2 + 2vh) , 10vh) ;
  padding-left: calc((100vw - (100vh * var(--video-ratio))) / 2) ;
  padding-right: max(calc((100vw - (100vh * var(--video-ratio))) / 2 + 2vw ), 2vw) ;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#muted
{
  background-image: url("https://nuluma.fr/pages-assets/volume off.png?1754388312");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: contain;	
  min-width: max(3vw, 3vh);
  min-height: max(3vw, 3vh);
  filter: drop-shadow(0px 0px 6px black);  
}
#unmuted
{
  display:none;
  position: relative;
  bottom: 0px;
  background-image: url("https://nuluma.fr/pages-assets/volume on.png?1754388312");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: contain;	
  min-width: max(3vw, 3vh);
  min-height: max(3vw, 3vh);
  filter: drop-shadow(0px 0px 6px black);  
}

#muted:hover, #unmuted:hover, .subcategorie:hover, .categories:hover
{
  cursor: pointer;
}



/* liens */
#logo
{
  min-height: 15vw;
  aspect-ratio: 1;
  display:block;
  position:fixed;
  left:5vw;
  top:5vw;
  z-index:2; /* au-dessus de tout */
  background-image: url("https://nuluma.fr/pages-assets/Logo nu.luma bleu cercle.png?1754388312");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;	
}

.downArrow
{
  position: absolute;
  z-index: 1; /* au-dessus de la page mais sous le modal */
  min-width: 100%;
  min-height: 7vh;
  background-image: url("https://nuluma.fr/pages-assets/Logo nu.luma noir.svg?1754388312");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  animation-name: blink;
  animation-direction: alternate;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
  filter: drop-shadow(0px 0px 3px white);  
}
@keyframes blink
{
  0%	{opacity: 0.25;}
  50%	{opacity:    1;}
  100%	{opacity: 0.25;}
}
#d1 { top:90vh; }
#d2 { top:190vh; }
#d3 { top:290vh; }
/* section*/
.section
{
  display: flex;
  flex-direction: column;
  align-content: stretch;
  justify-content: center;
}
.section
{
  width: 100%;
  min-height: 100vh;
}
.presentation
{
  min-width: 100%;
  min-height: 100vh;
}


#gallerie
{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 100%;
  min-height: 100vh;
}
#collection
{
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: auto;
  max-width: 100%;
  max-height: 80vh;
}
.gallerie
{  
  margin: 0.5vh 0.5vw;
  min-height : 50vh;
  background-size: contain;	
  background-repeat: no-repeat;
  background-position: center center;
  flex:1;  
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 0.5vh 0.5vw;
}
.hide
{
  text-align: right;
  display: none;
}
.gallerie:hover .hide
{
  display: block;
  color: white;
  
  text-shadow: 0 0 10px black;
}
#bio 
{  
  margin-top:2vh;
  display: flex;
  justify-content: center;
  flex-direction: column; /*uniquement en mode portrait*/  
  align-items: center;
}
#imgBio 
{
  background-image: url("https://nuluma.fr/pages-assets/Tom et Flavie + logo.png?1754388312");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;	
  min-height : 30vh;
  min-width : 100%;
}
#textBio
{
  display:flex;
  flex-direction: column;
  max-height: 50vh; /* en mode portrait */
  overflow: auto;
  font-size: 1rem;
  margin-left: 3vw;
  margin-right: 3vw;
  text-align: left;
  color:black;
  font-family: "GreycliffCF", "Raleway";
}
#contact
{
  font-size: 0.8rem;
}
#textBio a
{ 
  font-size: 1.1rem;
  font-family: "flavie", "Raleway"; 
  color: rgb(68,128,194);
  text-decoration: none;
}
#textBio a:hover
{
  text-decoration: underline 0.5px;
}
#textBio a:visited 
{  
  color: rgb(68,128,194);
}
/* mariage */
#intro
{
  font-size: 1.25rem;
  padding-left : 20vw;
  padding-top: calc(5vh + 2.5vw);
  padding-bottom: 2vh;
  padding-right : 15vw;
}
#message
{
  font-size: 1.25rem;
  padding-left : 10vw;
  padding-right : 10vw;
  padding-top: 5vh;
  padding-bottom: 2vh;
  text-align: center;
}
#signature
{
  font-family: "Shelley";
  text-align: right;
  padding-top: 2vh;
  padding-bottom: 2vh;
}
#imageMariage
{
  padding-top: 2vh;
  padding-bottom: 2vh;
  min-height: 10vh;
  min-width: 80%;
  background-image: url("https://nuluma.fr/pages-assets/alliance bleu.png?1754388312");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;	
}
#commande
{
  padding-left : 10vw;
  padding-right: 1vw;
  padding-top: calc(5vh + 2.5vw);
  padding-bottom: calc(2.5vw);
  text-align: right;
  font-size: 1.25rem;
  width: 100%;
  color: rgb(68,128,194);
  font-weight: bold;
}
#commande a
{
  text-decoration: underline 0.5px;
}
#commande a:visited 
{  
  color: rgb(68,128,194);
}


/* categories */
#categories
{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
.retour
{
  min-height: 15%;
  min-width: 15%;
  display: none;
  background-image: url("https://nuluma.fr/pages-assets/flèche retour.png?1754388312");
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: contain;
  filter: drop-shadow(0px 0px 6px black);  
}
.majCat
{  
  font-size: 1.8rem;
  display:flex; 
  flex-wrap:wrap;
  vertical-align:center;
  justify-content: space-evenly;
}
.categories
{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
  background-image: url("https://nuluma.fr/pages-assets/2025.06.28_M&A_photo_couverture_mariage_005.jpg?1754388312");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;	
  text-align: right;
  vertical-align: bottom;
  color:white;
  text-decoration: none;					
  box-sizing: border-box;
  text-shadow: 0 0 5px black;
  border-color: rgba(0, 0, 0, 0.0);
  min-width: calc(var( --width-one)); 
  aspect-ratio: calc(var( --photo-aspect-ratio));
  margin-bottom: 2vw;
}
.categories:hover
{ 
  border: 1vw solid rgba(255, 255, 255, 1.0);
}
a.MyleneAntoine 
{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  width:100%;
  height:100%;
  text-align:center;
  vertical-align:center;
  color:white;
  text-decoration:none;
  text-shadow:0 0 10px black;
}
.subcontainer
{
  display:none;
  flex-direction: column;	
  justify-content: flex-start;
  margin-bottom: 1vw;
}
.subcategorie
{
  display: flex;  
  flex-direction: row;
  flex-wrap: wrap;
  min-width: calc(var( --width-two) - 2vw);
  aspect-ratio: 1;  
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.subCatTitle
{
  font-size: 1.5rem;
}

/* modal */
.modal
{
  display: none;
  position: fixed;
  z-index: 2;
  left: 0;
  top: 0;
  width:100%;
  height:100%;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.8);
}
#modalImg
{
  margin: auto;
  position: fixed;
  top: 10%;
  left: 10%;
  min-height: 80%;
  min-width: 80%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
#left, #right
{
  margin: auto;
  position: fixed;
  top: 10%;
  min-height: 80%;
  min-width: 10%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
#left 
{ 
  left:0; 
  background-image: url("https://nuluma.fr/pages-assets/flèche gauche.png?1754388312");
}
#right 
{ 
  right:0; 
  background-image: url("https://nuluma.fr/pages-assets/flèche droite.png?1754388312");
}
#caption
{
  font-size: 1.25rem;
  position: fixed;
  bottom: 0.5%;
  min-height: 5%;
  min-width: 100%;
  text-align: left;
  justify-content:center;
  color: #ccc;
}
.modal-content, #caption
{
  animation-name: zoom;
  animation-duration: 0.6s;
}
@keyframes zoom
{
  from{ transform: scale(0.1); }
  to{ transform: scale(1); }
}
.close
{
  
  background-image: url("https://nuluma.fr/pages-assets/croix.png?1754388312");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;	
  position: fixed;
  min-width: 2vw;
  min-height: 2vh;
  aspect-ratio: 1;
  top: 2.5%;
  right: 2.5%;
  transition: 0.3s;
}
.close:hover, .close:focus
{
  color: #f1f1f1;
  text-decoration: none;
  cursor: pointer;
}
#background
{
  position: fixed;
  top: 0;
  left: 0;
  min-height: 100%;
  min-width: 100%;
}

@media (orientation: landscape) {
		.gallerie
{
  min-height : 70vh;
  background-size: contain;	
  background-repeat: no-repeat;
  background-position: center center;
  flex:1;  
}
  html
  {
	font-size: var(--font-size-global-landscape);
  }  
								
  #logo
  {											
    min-height: 10vh;
  }
  #bio 
  {  
	flex-direction: row;
  }
  #imgBio
  {
	  height:80vh;
	  min-width: 50vw;
	  background-position: center center;
	  background-size: cover;
  }
  #textBio
  {	
	max-height:80vh;
    flex-direction: column;
    justify-content: center;
	font-size: 1rem;
  }
  header
  {
	padding-top: 0;
	justify-content: center;
	color:white;
	text-shadow: 0 0 5px black;
  }
  .categories
  {  
    min-width: var( --width-two);
  }
  .subcategorie
  {
    min-width: calc(var( --width-four) - 1vw);
  }
}
@media (min-width:1400px)
  {
  html
  {
	font-size: calc(var(--font-size-global-landscape-pc));
  }
  .categories
  { 
    min-width: calc(var( --width-three));
  }
  .subcategorie
  {
    min-width: calc(var( --width-six) - 1vw);
  }
  #imgBio
  {
	background-size: cover;
	min-width: 40vw;
	height: 80vh;
  }
  #textBio
  {
    min-height: 80vh;
    max-height: 80vh;
  }
  #modalImg
  {
    min-width: 80vw;
    min-height: 80vh;
  }
  #left, #right
  {
	min-width: 5%;
  }
}

.white
{
  color: white;
}