/* =============================================================================

 *		                _style.css : mise en forme du site
 
 * ============================================================================= */


/* -----------------------------------------------------------------------------
 * Polices de caracteres
 * - Fonts : https://www.fontsquirrel.com/
 * - Convertisseurs ttf / otf / woff : https://everythingfonts.com/
 * ----------------------------------------------------------------------------- */

@font-face {
    font-family: 'f_roboto' ;
    src: url('fonts/roboto-regular.woff') format('woff'),
	 url('fonts/roboto-regular.otf')  format('truetype');
}

@font-face {
    font-family: 'f_greatvibes' ;
    src: url('fonts/greatVibes-regular.woff') format('woff'),
	 url('fonts/greatvibes-regular.otf')  format('truetype');

}@font-face {
    font-family: 'f_lobster' ;
    src: url('fonts/Lobster_1.3.woff') format('woff'),
	 url('fonts/Lobster_1.3.otf')  format('truetype');
}


/* -----------------------------------------------------------------------------
 * Apparition des textes
 * ----------------------------------------------------------------------------- */
@keyframes fadein { from { opacity:0; } to { opacity:1; } }
@keyframes lefttocenter { from { margin-right:200%; } to { margin-left:0%; } }

/* -----------------------------------------------------------------------------
 * Partie principale
 * ----------------------------------------------------------------------------- */
html, body { 
  margin: 0; color: #fff;
  font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 0.75em;
  overflow: hidden; scroll-behavior: smooth; scrollbar-width: none;
}

body {position: fixed; left: 0; top: 0; right: 0; bottom: 0;} 

.top_img {
  position:absolute; top: 25vh; left: 5vw; width:90vw; 
  animation: fadein 2s;
}

h1 {
  animation: lefttocenter 3s; white-space: nowrap;
  text-align: center; margin-top:55vh; font-size: 5vw; 
  font-family: 'f_greatvibes', sans-serif; 
  color:gold ; text-shadow: 2px 2px 5px black;
}

/* -----------------------------------------------------------------------------
 * Sections (qui prennent chacune une hauteur de page)
 * ----------------------------------------------------------------------------- */
.sec_title { 
  display:flex; text-align: top; font-size: 6vw; 
  font-family: 'f_greatvibes', sans-serif; 
  margin-top:5vh; height:20vh;
  color:gold ; text-shadow: 2px 2px 5px black;
}
.section  { height: 100vh; display: flex; justify-content: top; align-items: center; flex-direction: column; }
.accueil  { background: no-repeat center url("backgrounds/accueil.jpg"); background-size: cover; }
.famille  { background: no-repeat center url("backgrounds/famille.jpg"); background-size: cover; }
.marguifr { background: no-repeat center url("backgrounds/margfr.jpg"); background-size: cover; }
.nos30ans { background: no-repeat center url("backgrounds/nos30ans.jpg"); background-size: cover; }
.diapos_p { background: no-repeat center url("backgrounds/diaposp.jpg"); background-size: cover; }
.voyphoto { background: no-repeat center url("backgrounds/voyphot.jpg"); background-size: cover; }
.divers   { background: no-repeat center url("backgrounds/divers.jpg"); background-size: cover; }

/* -----------------------------------------------------------------------------
 * Menu en bas de page
 * ----------------------------------------------------------------------------- */
nav {
  position: fixed; left:0vw; width:100vw; bottom: 0vh; height:9vh; 
  display: flex; justify-content: space-around; align-items:center;
  font-family: /*'f_roboto'*/f_greatvibes ; font-size: 2.3vw; text-shadow: 2px 2px 5px black;
  background:linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 100%);
}

.nav_a { cursor:pointer; display: flex; color:white; text-decoration: none; }
.nav_a:hover { color:yellow; }

/* -----------------------------------------------------------------------------
 * Défilement horizontal images dans les sections
 * ----------------------------------------------------------------------------- */

.defbox {
  margin: 0 auto; width: 91vw;
  display: flex; justify-content: center; align-items:center;
  /* background-color:rgba(0,0,0,0.3); border:solid 1px black ; */
}
.db_1 { height: 32vw; }
.db_2 { height: 20vw; }

.h_scroll {
  margin: 0 auto;
  display: grid; grid-auto-flow: column;
  overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-color: black white ; scrollbar-width: auto;
}

.scroll_1 { padding: 0.4em; gap: 0.2em; height: 25vw; width: 90.4vw; }
.scroll_2 { padding: 0.4em; gap: 0.2em; height: 15vw; width: 90.4vw; }
  
.h_scroll > a {
    scroll-snap-align: center;
}
  
.h_scroll figure {
  width: 21.5vw; max-width: none; height:22.1vw;
  object-fit: contain; margin:0.45vw ; padding:0px ;
  border-radius: 1em; border:solid 0.1vw black;
  filter: brightness(85%); box-shadow: 3px 3px 4px rgba(0,0,0,0.5) ;
  cursor:pointer; 
}

.scroll_1 figure {   width: 21.5vw; max-width: none; height:22.1vw; }
.scroll_2 figure {   width: 14vw; max-width: none; height:13vw; }

.h_scroll figure:hover { 
  box-shadow: 0px 0px 10px white;
  filter: brightness(100%);
  transition: 0.3s; 
}

.h_scroll figure a { text-decoration:none; }

.scroll_1 figure img { display:inline; width:21.5vw; height:15.3vw; border-radius: 1em 1em 0em 0em; }
.scroll_2 figure img { display:inline; width:14vw; height:9vw; border-radius: 1em 1em 0em 0em; }

.h_scroll figure figcaption {
  position:relative; 
  display: flex; flex-direction: column; justify-content: center; 
  background-color:white; margin 0.1vw;
  border-radius: 0em 0em 0.8em 0.8em;
  border-top:solid 0.15vw white ;
}

.scroll_1 figure figcaption { top:-0.4vw; left:0px; width:21.5vw; height:6.9vw; }
.scroll_2 figure figcaption { top:-0.6vw; left:0px; width:14vw; height:4.4vw; }

.h_scroll figure p {
  position:relative; display:inline-block; vertical-align:middle; 
  font-family: 'f_roboto', sans-serif; font-size:1.2vw;
  color:DarkSlateGrey; text-align:center; margin:5px;
  line-height: 1.2em;
}

.h_scroll figure:hover p { color:blue; }

/* -----------------------------------------------------------------------------
 * Superposition du catalogue de photos (caché par défaut)
 * ----------------------------------------------------------------------------- */
.ph_box {
  position: fixed; 
  display: none; /* passe en "flex" via javascript lorsqu'on en a besoin */
  justify-content: space-around; align-items:top;
  width:100vw; left:0vw; height:100vh; top: 0vh; 
  text-shadow: 2px 2px 5px black;
  background-image: url("backgrounds/greybackground.png") ;
}

.ph_list {
  position:fixed; 
  display: flex; justify-content: space-between; align-items:center;
  width:98vw;
}

.ph_secname {
  position:fixed; top:1.5vh; left:2vw; width:95vw; 
  display: flex; justify-content: left; align-items:center;
  color:white; font-size: 2vw; font-family: 'f_greatvibes', sans-serif; 
}

.ph_title {
  position:fixed; top:1.3vh; left:10vw; width:80vw; 
  display: flex; justify-content: center; align-items:center;
  color:gold; font-size: 2.5vw; font-family: 'f_greatvibes', sans-serif; 
}

.ph_leave {
  cursor:pointer; position:fixed; right:1vw; width:2vw; top:1.5vh; 
  display: flex; justify-content: center; align-items:center;
  color:white; font-size: 1.5vw; font-family: 'f_roboto', sans-serif; 
  border:solid white 1px ;
}
.ph_leave:hover {
  background-color:white; color:black;
}

/* -----------------------------------------------------------------------------
 * Format d'un reportage 
 * ----------------------------------------------------------------------------- */
.ph_report {
  position: fixed; left:1vw; width:98vw; top: 8vh; height:90vh; padding:0vw; 
  display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;
  overflow-x: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scrollbar-color: black white ; 
}

.ph_report img {
  height:20vh; filter: brightness(75%);
  object-fit: contain; margin:0.4vw ; padding:0px ;
  border-radius: 0.2em; border:solid 0.15vw white;
  box-shadow: 3px 3px 4px rgba(0,0,0,0.5) ;
  display: -webkit-flex; -webkit-flex-direction: row;
  display: flex; /* width : 49%; */
}
.ph_report img:hover {
  box-shadow: 0px 0px 10px white;
  filter: brightness(100%);
  transition: 0.3s; 
}

/* -----------------------------------------------------------------------------
 * Popup pour faire patienter (gros reportages) 
 * ----------------------------------------------------------------------------- */
.ph_wait {
  position:fixed; display: none; /* passe en "flex" via javascript lorsqu'on en a besoin */
  justify-content: center; align-items:center;
  left:0vw; width:100vw; top:0vh; height:100vh;
  background-color:rgba(0,0,0,0.8) ;
}

.ph_wait_cnt {
  position:fixed; left:0vw; width:100vw; top:auto; height:auto; padding:auto;
  font-size: 3vw; font-family: 'f_roboto', sans-serif; 
  display: flex; justify-content: center; align-items:center;
  color:gold; text-shadow: 2px 2px 5px black;
}

.progressBar {
	width:20vw; 
}

/* -----------------------------------------------------------------------------
 * Popup de demande de mot de passe
 * ----------------------------------------------------------------------------- */
.ph_password {
  position:fixed; display: none; /* passe en "grid" via javascript lorsqu'on en a besoin */
  left:0vw; width:100vw; top: 0vh; bottom:8vh; 
  flex-direction:row; justify-content: center; align-items:center;
  backdrop-filter:blur(5px) ; 
  -webkit-backdrop-filter: blur(10px);
            
}

.ph_password input[type=text] { 
	width:30vw; height:3vh; font-size: 2vw; padding:1.2vw;
	background:rgba(255,255,255,0.8) ; color:darkblue; text-align:center; 
	border:solid 2px darkblue; border-radius: 0.2em; 
}

.ph_password input[type=button] {
	width:10vw; height:6.5vh; font-size: 2vw; margin:1.2vw; 
	background-color: white; border-radius: 0.2em; 
    border: solid 2px darkblue; text-decoration: none; color: red;
	cursor: pointer;
}

/* -----------------------------------------------------------------------------
 * Format d'une image 
 * ----------------------------------------------------------------------------- */
.ph_image {
  position: fixed; display: none; /* passe en "flex" via javascript lorsqu'on en a besoin */
  left:0vw; top:0vh; width:100vw; height:100vh; justify-content: center; align-items:top;
  /* background-color:DarkSlateGrey; */
  background-image: url("backgrounds/greybackground.png") ;
}

.ph_title_sec {
  position:fixed; top:1.5vh; left:1vw; width:30vw; 
  display: flex; justify-content: left; align-items:center;
  color:white; font-size: 2vw; font-family: 'f_greatvibes', sans-serif; 
}

.ph_title_rep {
  position:fixed; top:1.3vh; left:15vw; width:70vw; 
  display: flex; justify-content: center; align-items:center;
  color:gold; font-size: 2.5vw; font-family: 'f_greatvibes', sans-serif; 
}

.ph_number_img {
  position:fixed; top:1.5vh; right:5vw; width:10vw; 
  display: flex; justify-content: right; align-items:center;
  color:gold; font-size: 2vw; font-family: 'f_greatvibes', sans-serif; 
}

.ph_image img {
  height:89vh; max-width:97vw; margin: 8vh auto 5vh auto;
  object-fit: contain; padding:0px ;
  border-radius: 0.5em; border:solid 0.15vw white;
  display: flex; justify-content: center; align-items:center;
  box-shadow: 3px 3px 4px rgba(0,0,0,0.5) ;
}

.ph_image video {
  height:89vh; max-width:97vw; margin: 8vh auto 5vh auto;
  object-fit: contain; padding:0px ;
  border-radius: 0.5em; border:solid 0.15vw white;
  display: flex; justify-content: center; align-items:center;
  box-shadow: 3px 3px 4px rgba(0,0,0,0.5) ;
}

.ph_prev_img {
  position:fixed; top:45vh; left:1vw; width:5vw; height:5vh; padding:0;
  display: flex; justify-content: center; align-items:center;
}

.ph_prev_img img { height:5vh; filter: brightness(50%); border:0px; cursor:pointer; }
.ph_prev_img img:hover { filter: brightness(100%); border:solid 2px white; }

.ph_next_img {
  position:fixed; top:45vh; right:1vw; width:5vw; height:5vh; padding:0;
  display: flex; justify-content: center; align-items:center;
}
.ph_next_img img { height:5vh; filter: brightness(50%); border:0px; cursor:pointer; }
.ph_next_img img:hover { filter: brightness(100%); border:solid 2px white; }

.ph_leave_img {
  cursor:pointer; position:fixed; top:1.5vh; right:1.5vw; width:2vw; 
  display: flex; justify-content: center; align-items:center;
  color:white; font-size: 1.5vw; font-family: 'f_roboto', sans-serif; 
  border:solid white 1px ;
}
.ph_leave_img:hover { background-color:white; color:black; }