@import url(helvetica-ultralight/stylesheet.css);

/*
http://tumblr.gesteves.com/post/36097597/helvetica-neue-light dit qu'il faut mettre "Helvetica Neue" dans 'font-family', et dans 'font-weight' mettre 100 pour ultra-light et 300 pour light. Les autres valeurs dans font-family sont pour la compatibilité.

Pour le corps de texte (body), on reste en Helvetica Neue en poids normal :
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;

Pour les titres sur fond clair (div.texte h2/h3/h4), on utilise Helvetica Neue Light :
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: 300;
  letter-spacing: 1px;

Pour les titres et le texte sur fond sombre (div.download), on utilise Helvetica Neue Ultra Light :
  font-family: "HelveticaNeue-UltraLight", "Helvetica Neue UltraLight", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: 100;
  letter-spacing: 1px;
*/

/******** Structure de la page ********/

/*-------- Toutes les pages --------*/

html {
  background: url(/images/fond-page.jpg) no-repeat center top fixed;
  background-size: 2594px 1500px;
}

body {
  position: relative; /* Pour le positionnement des éléments. */
  width: 1025px;
  margin: 0px auto;
  padding: 0px;
  overflow-x: hidden;
}

div.header {
  overflow: hidden; /* Pour que la hauteur soit suffisante pour afficher tous les floats contenus. */
  position: relative; /* Pour le z-index. Sera surchargé en absolute sur certaines pages. */
  z-index: 50;
}

div.header img.logo {
  display: block;
  float: left;
  margin-left: 45px;
}

div.header ul.menu {
  float: right;
  margin-right: 25px;
  margin-top: 15px;
}

div.boutons {
  margin-top: 15px;
  margin-left: 15px;
  margin-right: 15px;
  overflow: hidden; /* Pour que la hauteur soit suffisante pour afficher tous les floats contenus. */
}

div.vignettes {
  overflow: hidden; /* Pour que la hauteur soit suffisante pour afficher tous les floats contenus. */
}

div.vignettes a.vignette {
  float: left;
  background: transparent no-repeat center center;
  text-indent: -9999px;
}

div.texte-legende a.lire-plus {
  margin-left: 1em;
}

div.photographe {
  position: absolute; /* par rapport à div.legende */
  right: 20px;
  bottom: 10px;
}

div.contact {
  margin-top: 150px;
  margin-bottom: 400px;
  margin-left: 50px; /* comme div.texte - surchargé en page showroom */
}

div.contact ul.menu {
  display: inline-block;
  border-bottom: 1px solid #cccccc;
  margin: 0em 0em 0.25em -1em;
  padding: 0em 0.5em 0.25em 0em;
}

div.download {
  padding-left: 50px;
}

div.download a {
  display: block;
  margin-right: 30px;
  padding-top: 180px;
  background: transparent no-repeat left top;
}

/*-------- Slideshow --------*/
/* L'image est calée en haut. Le header est par dessus. Il y a seulement le bouton de fermeture. Il n'y a pas de vignettes. */

body.page-slideshow div.image {
  /* Contient les deux images, qui sont positionnées en absolu par rapport à cette div. Plus la légende, elle aussi en absolute.
     Il faut donc positionner cette div et spécifier ses dimensions. */
  position: relative;
  width: 1025px;
  height: 692px;
}

body.page-slideshow div.image img {
  position: absolute;  /* Par rapport au slideshow, et pour le z-index (fixé à 10 ou 20 par Javascript). */
  left: 0px; top: 0px;
}

body.page-slideshow div.header {
  /* Placé au-dessus du diaporama. Donc en absolu par rapport au body. */
  position: absolute;
  left: 0px; top: 20px;
  width: 100%;
}

body.page-slideshow div.boutons .box-bouton {
  /* Pas de boutons, sauf celui de fermeture. */
  display: none;
}

body.page-slideshow div.boutons #box-bouton-close {
  /* Bouton de fermeture : à gauche. */
  display: inline;
  float: left;
}

body.page-slideshow div.vignettes {
  /* Pas de vignettes. */
  display: none;
}

/*-------- Showroom --------*/
/* La page commence par le header. Puis vient l'image, les boutons (pas de close), et les vignettes.
   Ces derniers sont dans une colonne centrée de 650px. */

body.page-showroom div.header {
  margin-top: 20px;
  margin-bottom: 90px;
}

body.page-showroom div.image {
  position: relative; /* pour le positionnement de la légende */
  width: 650px;
  margin: 0px auto;
}

body.page-showroom div.image img#photo {
  position: relative; /* pour le z-index */
  z-index: 0;
  /* Utile surtout pour éviter que ce qu'il y a plus bas ne saute pendant le remplissage de l'image. */
  width: 501px;
  height: 384px;
}

body.page-showroom div.image img#loupe {
  position: absolute;
  z-index: 1;
  left: 202px; /* (501 - 96) / 2 */
  top: 133px; /* (384 - 117) / 2 */
}

body.page-showroom div.image div.legende {
  /* La légende est partiellement par-dessus l'image, sur la droite. */
  position: absolute; /* par rapport à div.image */
  right: 0px;
  bottom: 20px;
  width: 215px;
  height: 300px;
  z-index: 10;
}

body.page-showroom div.image div.legende div.photographe {
  display: none;
}

body.page-showroom div.image div.legende a#bouton-close-legend {
  position: absolute; /* par rapport à div.image */
  top: 5px;
  right: 5px;
}

body.page-showroom div.image div.legende div.texte-legende {
  position: absolute; /* par rapport à div.legende */
  left: 20px;
  bottom: 15px;
  width: 175px; /* = 215 - 2 x 20 de padding */
}

body.page-showroom div.boutons {
  width: 650px;
  margin-left: auto;
  margin-right: auto;
}

body.page-showroom div.boutons div#box-bouton-info { float: left; margin-right: 5px; }
body.page-showroom div.boutons div#box-bouton-zoom { float: right; }
body.page-showroom div.boutons div#box-bouton-back-next { float: left; }
body.page-showroom div.boutons div#box-bouton-close { display: none; }

body.page-showroom div.vignettes {
  width: 660px; /* = 650px (comme le div.showroom) + 10 de padding-left */
  padding-left: 10px;
  margin: 20px auto -20px;
}

body.page-showroom div.vignettes a.vignette {
  width: 90px;
  height: 90px;
  margin: 0px 20px 20px 0px;
}

body.page-showroom div.vignettes a.vignette:nth-of-type(5) {
  clear: left;
}

body.page-showroom div.contact {
  width: 650px;
  margin-left: auto;
  margin-right: auto;
}

/*-------- Zoom --------*/
/* L'image est calée en haut. Le header est par dessus. Les boutons sont dessous. Les vignettes chevauchent la photo. */

body.page-zoom div.image {
  position: relative; /* pour le z-index */
  z-index: 0;
  /* Utile surtout pour éviter que ce qu'il y a plus bas ne saute pendant le remplissage de l'image. */
  width: 1025px;
  height: 692px;
}

body.page-zoom div.header {
  /* Placé au-dessus de l'image. Donc en absolu par rapport au body. */
  position: absolute;
  left: 0px; top: 20px;
  width: 100%;
}

body.page-zoom div.image div.legende {
  /* La légende est par-dessus l'image, en bas. */
  position: absolute; /* par rapport à div.image */
  left: 0px;
  bottom: 0px;
  width: 1025px;
  height: 160px;
  z-index: 30;
}

body.page-zoom div.image div.legende a#bouton-close-legend {
  position: absolute; /* par rapport à div.image */
  top: 10px;
  right: 20px;
}

body.page-zoom div.image div.legende div.texte-legende {
  position: absolute; /* par rapport à div.legende */
  left: 80px;
  top: 25px;
  width: 550px;
}

body.page-zoom div.boutons {
  margin-top: 10px; /* au lieu des 15px standard */
}

body.page-zoom div#box-bouton-info { float: left; margin-right: 5px; }
body.page-zoom div#box-bouton-zoom { display: none; }
body.page-zoom div#box-bouton-back-next { float: left; }
body.page-zoom div#box-bouton-close { float: right; }

body.page-zoom div.vignettes {
  /* Placées au-dessus de l'image. Donc en absolu par rapport au body. */
  position: absolute; 
  left: 180px;
  top: 660px; /* = 692 (hauteur de la photo zoomée) - 30 (hauteur de la vignette / 2) - 2 (border de la vignette) */
}

body.page-zoom div.vignettes a.vignette {
  padding: 1px;
  width: 60px;
  height: 60px;
  margin-right: 15px;
}

body.page-zoom div.vignettes a.vue-active {
  padding: 0px;
  border: 1px solid #aaaaaa;
}

/*-------- Pages de texte --------*/

body.page-texte div.header {
  margin-top: 20px;
  margin-bottom: 90px;
}

div.texte {
  width: 600px;
  margin-left: 50px;
  margin-bottom: 20px;
}

/*-------- Book --------*/
/* Le bloc "download" est calé en haut. Le header est par dessus. Puis viennent les blocs "oeuvre". */

body.page-texte-book div.header {
  /* Placé au-dessus du bloc. Donc en absolu par rapport au body. */
  position: absolute;
  left: 0px; top: 20px;
  width: 100%;
}

body.page-texte-book div.download {
  position: relative; /* pour le z-index */
  z-index: 0;
  height: 325px; /* = 450 - 125 de padding-top */
  padding-top: 125px;
}

body.page-texte-book div.download a {
  float: left;
  width: 280px;
}

body.page-texte-book a#book-sculpture   { background-image: url(/images/book-sculpture.png); }
body.page-texte-book a#book-accessoires { background-image: url(/images/book-accessoires.png); }
body.page-texte-book a#book-mobilier    { background-image: url(/images/book-mobilier.png); }

div.oeuvre {
  margin-bottom: 40px;
  padding-left: 170px;
  overflow: hidden; /* Pour que la hauteur soit suffisante pour afficher tous les floats contenus. */
}

div.oeuvre img {
  float: left;
  margin: 3px 0px 12px -170px;
}

div.oeuvre a.suite {
  float: right;
  margin: 2px 0.75em 0px 1em;
}

/*-------- Presse --------*/

body.page-texte-presse div.download {
  height: 325px; /* = 350 - 25 de padding-top */
  padding-top: 25px;
}

body.page-texte-presse div.download a { background-image: url(/images/book-sculpture.png); }

div.texte ul.presse {
  margin-left: 5px;
}

ul.presse li {
  list-style: none;
  overflow: hidden;
  padding-top: 20px;
}

ul.presse li:first-child { padding-top: 0px; }

ul.presse div {
  float: left;
  width: 100px;
  margin-right: 20px;
}

ul.presse img {
  display: block;
  max-width: 100%;
  max-height: 40px;
  margin: 0 auto;
}

ul.presse p {
  font-size: 1.1em;
  margin-left: 120px;
}

ul.presse p > i {
  color: black;
}

/*-------- Bio --------*/
/* Il y a des dessins à l'encre en images de fond. */

body.page-texte-bio {
  background: transparent url(/images/fond-page-bio.png) right 30px no-repeat;
}


/******** Menu ********/

ul.menu li {
  display: inline;
  font-size: 11px;
}

ul.menu li:before {
  content: '•';
}

ul.menu li:first-child:before {
  content: none;
}

ul.menu li a {
  text-transform: uppercase;
  text-decoration: none;
  padding-left: 0.4em;
  padding-right: 0.4em;
}

ul.menu li:first-child a {
  margin-left: -0.4em; /* pour annuler visuellement le padding-left, tout en le laissant actif */
}

ul.menu li, ul.menu li a { color: #999999; }
ul.menu li a:hover       { color: #333333; }

ul.couleur-menu-standard    li, ul.couleur-menu-standard    li a { color: #999999; }
ul.couleur-menu-clair       li, ul.couleur-menu-clair       li a { color: #bbbbbb; }
ul.couleur-menu-extra-clair li, ul.couleur-menu-extra-clair li a { color: #eeeeee; }

ul.couleur-menu-standard    li a:hover { color: #333333; }
ul.couleur-menu-clair       li a:hover { color: #eeeeee; }
ul.couleur-menu-extra-clair li a:hover { color: #000000; }


/******** Boutons ********/

div.box-bouton {
  border: 1px solid #e6e6e6;
  padding: 1px 4px 2px; /* il faut mettre 1px en padding-top parce que le texte lui-même a 1px au-dessus */
  font-size: 13px;
  color: #cccccc;
  cursor: pointer;
}

div.box-bouton a {
  text-transform: uppercase;
  text-decoration: none;
  color: #cccccc;
}

div.box-bouton a:hover {
  color: #666666;
}

a#bouton-close-legend {
  display: block;
  width: 16px;
  height: 16px;
  text-indent: -9999px;
  background: transparent url(/images/close.png) no-repeat center center;
  cursor: pointer;
}

/******** Textes (couleurs, tailles, polices…) ********/

body {
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}

a {
  text-decoration: none;
  color: #3399cc;
}

/*-------- Légendes --------*/

div.legende {
  font-size: 10px;
  text-transform: uppercase;
}

div.texte-legende h2 {
  font-size: 1.5em;
  margin-bottom: 0.5em;
}

div.texte-legende h3 {
  margin-bottom: 0.8em;
}

div.texte-legende p {
  line-height: 1.2em;
  margin-bottom: 0.75em;
}

div.texte-legende p.specs {
  line-height: 1em;
  margin-bottom: 0.45em;
}

/* Spécificités en page zoom */

body.page-zoom div.legende {
  color: #666666;
  background: rgb(238, 238, 238); /* Pour les navigateurs qui ne supportent pas le rgba. */
  background-color: rgba(238, 238, 238, 0.8);
}

body.page-zoom div.texte-legende h2 {
  display: inline-block;
}

body.page-zoom div.texte-legende h3 {
  display: inline-block;
}

body.page-zoom div.texte-legende h3:before {
  content: " — ";
  font-size: 1.5em;
}

html.ie body.page-zoom div.legende {
  background: none;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCEEEEEE,endColorstr=#CCEEEEEE); /* rgba(238, 238, 238, 0.8) */
}

/* Spécificités en page showroom */

body.page-showroom div.legende {
  color: white;
  background: rgb(159, 173, 173); /* Pour les navigateurs qui ne supportent pas le rgba. */
  background-color: rgba(159, 173, 173, 0.7);
}

body.page-showroom div.texte-legende h2 {
  font-weight: bold;
}

body.page-showroom div.texte-legende h3 {
  margin-top: -0.7em;
}

html.ie body.page-showroom div.legende {
  background: none;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B29FADAD,endColorstr=#B29FADAD); /* rgba(159, 173, 173, 0.7) */
}

/*-------- Contact --------*/

div.contact {
  color: #aaaaaa; /* Répété pour la couleur des liens dans div.contact */
  font-size: 12px;
  text-transform: uppercase;
}

div.contact h2 {
  font-size: 1.3em;
  margin-bottom: 0.7em;
}

div.contact p {
  line-height: 1.44em;
  margin-bottom: 0.75em;
}

div.contact a {
  color: #aaaaaa;
  font-size: 0.9em;
  text-decoration: none;
  cursor: pointer;
}

div.contact a:hover {
  color: #3399cc;
}

/*-------- Textes en corps de page --------*/

div.texte {
  color: #666666; /* Répété pour la couleur des liens discrets */
  font-size: 13px;
}

div.texte a.discret {
  color: #666666;
}

div.texte a.discret:hover {
  color: #3399cc;
}

div.texte h2,
div.texte h3,
div.texte h4 {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: 300;
  letter-spacing: 1px;
}

div.texte h2 {
  font-size: 2em;
  margin-top: 2em;
  margin-bottom: 1em;
  text-transform: uppercase;
}

div.texte h3 {
  font-size: 1.6em;
  margin-top: 2em;
  margin-bottom: 1em;
  text-transform: uppercase;
}

div.texte h2 + h3 {
  margin-top: 1.2em;
}

div.texte h4 {
  font-size: 1.2em;
  text-transform: uppercase;
  margin-top: 1.25em;
  margin-bottom: .85em;
}

div.texte div.new-section {
  border-top: 1px solid #aaaaaa;
  margin-left: -0.5em;
  padding-left: 0.5em;
  padding-top: 4px;
  width: 10em;
}

div.texte p {
  line-height: 1.44em;
  margin-bottom: 0.75em;
}

p.citation {
  font-style: italic;
  text-indent: -0.75em; /* Hypothèse : le paragraphe commence par "« ". */
}

div.texte ul {
  list-style: square outside;
  margin-left: 3em;
  margin-right: 1.5em;
}

div.texte li {
  line-height: 1.2em;
  margin-bottom: 0.4em;
}

/*-------- Bio --------*/

body.page-texte-bio div.texte {
  text-transform: uppercase;
}

/*-------- Download --------*/

div.download {
  font-family: "HelveticaNeue-UltraLight", "Helvetica Neue UltraLight", "web-HelveticaNeueUltraLight", "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-weight: 100;
  letter-spacing: 1px;
  color: #bbbbbb;
  background: #323232;
}

div.download h2 {
  text-transform: uppercase;
  font-size: 44px;
  margin-bottom: 25px;
}

div.download a {
  text-transform: uppercase;
  font-size: 14px;
  color: #bbbbbb;
}

div.download a span.first-word {
  color: #3399cc;
}

div.download p {
  font-size: 12px;
  text-transform: none;
  margin-top: 0.5em;
}

div.oeuvre h4 {
  margin-top: 0px;
  color: #333333;
}

div.oeuvre h4 a {
  color: #333333;
}

div.oeuvre a.suite {
  text-transform: uppercase;
  font-size: 0.9em;
  cursor: pointer;
}