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

 * Style global

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

body {

  font-family: 'Quicksand';

}



section {

  padding: 2rem 1rem;

}



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

 * Menu

 * + navbar-trans: Menu transparent avec animation

 * + navbar-opaque: Menu opaque avec animation

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

 .navbar-trans {

   background-color: transparent;

   -webkit-transition: all .5s ease-in-out;

 }



/* Nota 992 correspond au écran large (lg) */

 @media only screen and (min-width: 992px) {

   .navbar-trans {

     padding-top: 64px;

     padding-left: 64px;

     padding-right: 64px;

   }

 }



.navbar-opaque {

  background-color: white;

  -webkit-transition: all .5s ease-in-out;

}



/* Permet de changer la couleur des liens du menu en mode transparent */

.navbar-trans .navbar-nav .nav-link {

  color: #444;

  background-color: rgba(200, 200, 200, 0.5);

}



/* Permet de changer la couleur de l'icone du bouton en mode petit et transparent */

.navbar-trans .navbar-toggler-icon {

  background-image: none;

  color: #444;

  -webkit-transition: all .5s ease-in-out;

}



/* Centrage du texte du menu */

.navbar-trans .navbar-nav .nav-link {

  text-align: center;

}



.navbar-opaque .navbar-toggler-icon {

  background-image: none;

  color: #a9a9a9;

  -webkit-transition: all .5s ease-in-out;

}



/* Couleur du texte de la barre de navigation opaque noir */

.navbar-opaque .navbar-nav .nav-link {

  color: black;

  text-align: center;

}



/* Couleur du texte lorsque le curseur est dessus de la barre de navigation opaque blanc */

.navbar-opaque .navbar-nav .nav-link:hover {

    color: #a9a9a9 !important;

}



/* Couleur du texte si sélectionné de la barre de navigation opaque blanc */

.navbar-opaque .navbar-nav .nav-link.active {

    color: #a9a9a9 !important;

}



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

 * Section Home

 * + home: Permet l'affichage de l'image en tête de page

 * + catchphrase: Définit la configuration de la phrase d'accroche

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

.home {

  background-image: url('../img/site/header.jpg');

  background-repeat: no-repeat;

  background-size: cover;

  /* vh signfie vertical height (I.e. hauteur de la fenêtre) */

  /* On indique donc ici 75% de la hauteur. */

  height: 75vh;

}



/*

@media only screen and (min-width: 768px) {

  .home {

    background-image:url('../img/site/header-md.jpg');

  }

}



@media only screen and (min-width: 992px) {

  .home {

    background-image:url('../img/site/header-lg.jpg');

  }

}

*/



.home div {

  height: 100%;

}



/* Configuration pour les petits écrans (Toujours faire les petits écrans

 * en premier).

 * Il est important que la font-size ne soit pas trop grande.

 * Sinon le texte dépasse de la largeur de la fenêtre.

 * Si le texte dépasse, le bouton du menu se décale d'autant et c'est la merde.

 * A priori cela fait foirer aussi lightbox.

 */

h2.catchphrase {

  /* A voir si c'est mieux et surtout si ça marche sur ios */
  /* La fonte est proportionnel à la largeur de l'écran ??? */
  font-size: 4vw;
  /*font-size: 3.3rem;
*/
  font-weight: 200;

  /*line-height: 5.125rem;
*/
  line-height: 7vw;
  text-transform: uppercase;

  text-align: center;

  color: #fff;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}



/* La valeur min-width est à confimer ? */

@media only screen and (min-width: 600px) {

  h2.catchphrase {

    /*font-size: 5.125rem;
*/
    font-size: 4vw;
  }

}



h2.catchphrase span {

  font-weight: 600;

}



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

 * Style commun au section mode block

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

 a:link {

  color: #0F86BD;

 }

 a:hover, a:focus, a:active {

   color: #a9a9a9;

   }



.section-block {

  padding-top: 120px;

  padding-bottom: 120px;

  padding-left: 100px;

  padding-right: 100px;

  align-content: center;

}



.section-block h3 {

  text-align: left;

  font-size: 1.6rem;

  letter-spacing: 0.2rem;

  line-height: 3;

}



.section-block h4 {

  text-align: left;

  font-size: 1.5rem;

}



.section-block p {

  text-align: left;

  font-size: 1.2rem;

}



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

 * Section À PROPOS

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

.ABOUTME {

}


.ABOUTME .row-with-link li {
  display: inline-block;
  padding-top: 0.5rem;
}

/* Couleur du texte et des icônes pour les liens de la section */
.ABOUTME .row-with-link li a {
  color: black;
}

/* Un peu de padding pour décaler le texte des icônes */
.ABOUTME .row-with-link li a i {
  padding-right: 0.5rem;
}

/* Couleur lorsque la souris est dessus */
.ABOUTME .row-with-link li a:hover {
  color: #666666;
}

/* Couleur lorsque activé (Par contre je sais pas quand cela est utilisé...) */
.ABOUTME .row-with-link li a:active {
  color: #999999;
}


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

 * Section PHOTOGRAPHIE

 * work: Permet de définir la partie work

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

.PHOTOGRAPHIE {

  background-image:url('../img/site/rub1.jpg');

  background-repeat: no-repeat;

  background-size: cover;

}



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

* Section INFOGRAPHIE

* work: Permet de définir la partie work

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

.INFOGRAPHIE {

  background-image:url('../img/site/rub2.jpg');

  background-repeat: no-repeat;

  background-size: cover;

}



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

 * Section RETOUCHE

 * work: Permet de définir la partie work

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

.RETOUCHE {

  background-image:url('../img/site/rub3.jpg');

  background-repeat: no-repeat;

  background-size: cover;
}



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

 * Section Work

 * work: Permet de définir la partie work

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

.REALISATIONS {

  background-color: #dadada;

  padding-top: 60px;

  padding-bottom: 60px;

}



.REALISATIONS figure {

  position: relative;

  margin-bottom: 0;

  margin-top: 2rem;

  max-width: 240px;

  margin-left: auto;

  margin-right: auto;

}



.REALISATIONS figure img {

  width: 100%;

}



.REALISATIONS figure figcaption {

  position: absolute;

  top: .5rem;

  right: .5rem;

  bottom: .5rem;

  left: .5rem;

  background-color: #fff;

  opacity: 0;

  transition: opacity .6s ease;

}



.REALISATIONS figure figcaption:hover {

  opacity: .9;

}



.REALISATIONS figure figcaption div {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 100%;

  padding: 0.5rem;

}



.REALISATIONS figure figcaption div h3 {

  font-size:  .875rem;

  font-weight: 700;

  line-height: 1rem;

  color: #282828;

  text-align: center;

}



.REALISATIONS figure figcaption div h4 {

  font-size: .875rem;

  font-weight: 400;

  line-height: .875rem;

  color: #282828;

  text-align: center;

}



.REALISATIONS figure figcaption div img {
  display: block;
  width: 1.625rem;
  margin: auto;
}
.innerFigCation h3 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25rem;
  color: #282828;
  text-align: center;
}

.innerFigCation h4 {
  font-size: .875rem;
  font-weight: 400;
  line-height: .875rem;
  color: #282828;
  text-align: center;
}


/* ===================================================================
 * Section carousel
 * ------------------------------------------------------------------- */
.carouselSection {
  background-image:url('../img/site/rub4.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  width: 100%;
}
.carouselSection h4 {
  padding-top: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1rem;
  letter-spacing: 2px;
  color: white;
}
.carouselSection p {
  font-size: 1rem;
  color: #a9a9a9;
}
/* Pour eviter que le texte marche sur les indicateurs. */
.carouselSection .carousel-inner {
  padding-bottom: 42px;
}

/* Pour styliser les indicateurs. */
.carousel-indicators li {
  width: 10px;
  height: 10px;
  border-radius: 100%;
}


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

 * Section footer

 * + footer-link: Permet de styler les liens instagram, etc.

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

.footer-row {

  text-align: center;

  padding-top: 2rem;

  padding-bottom: 2rem;
}



.footer-link li {

  display: inline-block;

  font-size: 15px;

  padding: 0;

  margin-right: 4px;

}



.footer-link li a {

  background-color: #000;

  color: #ffffff;

  border-radius: 100%;

  display: block;

  line-height: 36px;

  height: 36px;

  width: 36px;

  text-align: center;

}



.footer-link li a:hover,

.footer-link li a:focus,

.footer-link li a:active {

  background-color: #0F86BD;

}



.footer-link li:last-child {

  margin-right: 0;

}


/* ===================================================================
 * Class pour la flêche qui permet de remonter tout en haut.
 * ------------------------------------------------------------------- */
.go-top {
  position: relative;
  top: 40px;
}

.go-top,
.go-top:visited {
  text-decoration: none;
  border: 0 none;
  display: block;
  height: 36px;
  width: 36px;
  line-height: 5.6rem;
  text-align: center;
  background-image: url(../img/site/fleche.svg);
  background-color: #000000;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 10px 15px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  text-transform: uppercase;
  border-radius: 50%;
}

.go-top:hover,
.go-top:focus,
.go-top:active {
  /* Cela ne marche pas car c'est une image et pas une icone façon fa...*/
  /* Du coup, il faudrait une seconde image avec la couleur ou mettre une*/
  /* bordure ronde (Même principe que pour les icônes dans le footer)*/
  background-color: #0F86BD;
}