/* http://css-tricks.com/snippets/css/using-font-face/ */
@font-face {
    font-family: 'CormorantGaramond-SemiBold.ttf';
    src: url('../font/CormorantGaramond-SemiBold.ttf') format('ttf'),
         url('../font/CormorantGaramond-SemiBold.ttf') format('truetype');
}

html, body {
    width: 100%;
    height: 100%;
}

html {
    background-color: #FFF;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;   /* plein écran réel */
}

/* On cache l'image splash, elle sert juste au JS */
#splash {
    display: none;
}
body {font-family:'CormorantGaramond-SemiBold.ttf';}

#root {width:1020px;margin-left:-510px;padding-bottom:50px;}
#title {font-size:38px;margin-top:40px;letter-spacing: 4px;}
#title .small {font-size:19px;margin-left:5px;letter-spacing: 3px;}
#title:hover {color:#ff278f;}
#sub-title {font-size:17px;text-transform:uppercase;color:#fd3f92;letter-spacing: 4px;}
#banner {padding-bottom:20px;}
#menu {font-size:13px;z-index:2;text-transform:uppercase;letter-spacing: 2px;}
#menu > .section {padding:10px;}
#menu > .section:hover {color:#ff278f;}
#menu > .section.active {color:#ff278f#;}
#body {min-height:100px;z-index:1;padding-top:20px;}
#foot {height:500px;} /* to have some margin at the bottom */

#splash {max-width:800px;}
#contact {font-size:11px;text-transform:uppercase;letter-spacing: 2px;}
#contact-agency {margin-top:17px;letter-spacing: 2px;}
#contact-myself-photo {max-width:370px;}
#contact-myself-mail {margin-top:19px;}
#contact a:hover {color:#ff278f;}

#player-title {font-size:10px;margin-top:9px;color:#000;text-transform:uppercase;letter-spacing: 2px;}
#player-description {font-size:10px;margin-top:5px;color:#000;text-transform:uppercase;letter-spacing: 2px;}
#player-info {font-size:9px;margin-top:20px;text-transform:uppercase;letter-spacing: 2px;}
#player-video {width:800px;height:450px;}
#player-screens {margin-top:50px;text-align:center;}
#player-screens li {width:250px;height:140px;margin:10px;}

.gallery-title {font-size:25px;margin-bottom:20px;color:#000;text-transform:uppercase;}
.gallery-description {font-size:20px;margin-bottom:10px;color:#000;text-transform:uppercase;}

.picture.gallery .gallery-item {margin-bottom:20px;}
.picture.gallery .gallery-item img.loaded {max-width:600px;width:100%;}

.project.gallery .gallery-items {color:#FFF;}
.project.gallery .gallery-item {width:320px;height:180px;margin:10px;}
.project.gallery .gallery-item > .inner > .thumbnail > .title {font-size:9px;text-transform:uppercase;letter-spacing: 2px;}
.project.gallery .gallery-item > .inner > .thumbnail > .description {font-size:8px;text-transform:uppercase;letter-spacing: 2px;}
.project.gallery .gallery-item > .inner > .thumbnail.loading {background-color:#000;opacity:0.4;}
.picture.gallery .gallery-item img.loaded {width:100%;}

/* --------------------------------------------------------------- */

/* max ipad */
@media only screen and (max-width:1019px) {
	#root {width:680px;margin-left:-340px;}
	#splash {max-width:600px;}

	#menu {font-size:13px;letter-spacing: 2px;}
	#menu > .section {padding:5px 10px;}

	#player-title {margin-top:5px;}
	#player-video {width:640px;height:360px;}
}

/* --------------------------------------------------------------- */

/* max iphone */
@media only screen and (max-width:679px) {
	/* html {background-image:none !important;} */
	#root {width:328px;margin-left:-164px;}
	#title {font-size:18px;text-transform:uppercase;letter-spacing: 2px;}
	#title .small { font-size: 14px;margin-left: 5px;}
	#sub-title {font-size:13px;text-transform:uppercase;letter-spacing: 2px;}
	#splash, #contact-myself-photo {max-width:320px;}
	#contact {font-size:10px;text-transform:uppercase;}

	#menu {font-size:10px;text-transform:uppercase;}
	#menu > .section {padding:0;display:block;}



	#player-video {width:320px;height:180px;}
	#player-screens {display:none;}
	#player-screens li {margin-left:4px;margin-right:4px;}

	.project.gallery .gallery-item {margin-left:4px;margin-right:4px;}
}

/* --------------------------------------------------------------- */

/* min ipad */
@media only screen and (min-width:680px) {
	#menu.fixed {position:fixed;top:0;background-color:#FFF;width:680px;}
}

/* --------------------------------------------------------------- */

/* min desktop */
@media only screen and (min-width:1020px) {
	#menu.fixed {position:fixed;top:0;background-color:#FFF;width:1020px;}
}

/* --------------------------------------------------------------- */
/* ==========================================
   IDENTITÉ COULEUR – ROSE SIGNATURE
   ========================================== */

:root {
    --pink-main: #ff278f;     /* rose Director of Photography */
    --pink-hover:  #ff8fc6;    /* rose plus clair (≈ +2 tons) */
}

/* Nom + AFC */
#title,
#title a,
#title span {
    color: var(--pink-main);
}

/* Menu */
#menu,
#menu a,
#menu a:link,
#menu a:visited {
    color: var(--pink-main);
}

/* Director of Photography (sécurité) */
.hero-subtitle,
#subtitle {
    color: var(--pink-main);
}

/* Hover – tout ce qui est cliquable */
#menu a:hover,
#title a:hover,
a:hover {
    color: var(--pink-hover);
    transition: color 0.2s ease;


}
/* HOME: header/menu sur la photo */


/* ==========================================
   MENU SUR IMAGE – HOME (même en fixed)
   ========================================== */

/* Par défaut (autres pages) */
#menu.fixed {
    background-color: #FFF;
}
/* HOME : menu directement sur l’image (sans fond) */
html.is-home #menu,
html.is-home #menu.fixed {
    background-color: transparent !important;
}
/* =========================
   MOBILE – HERO HOME
   ========================= */
@media (max-width: 768px) {

  html.is-home {
    background-position: center 30%; /* recadrage plus flatteur */
  }

}
}