/*
Theme Name: La Fronde
Author: Sophie Rentien Lando
*/

@font-face {
  font-family: 'Free Sans';
  src: url('https://lafronde.net/wp-content/themes/lafronde/fonts/FreeSans.otf') format('opentype');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'Free Sans';
  src: url('https://lafronde.net/wp-content/themes/lafronde/fonts/FreeSansBold.otf') format('opentype');
  font-style: normal;
  font-weight: bold;
}
@font-face {
  font-family: 'Free Sans';
  src: url('https://lafronde.net/wp-content/themes/lafronde/fonts/FreeSansOblique.otf') format('opentype');
  font-style: italic;
  font-weight: normal;
}
@font-face {
  font-family: 'Free Sans';
  src: url('https://lafronde.net/wp-content/themes/lafronde/fonts/FreeSansBoldOblique.otf') format('opentype');
  font-style: italic;
  font-weight: bold;
}

* {
  margin:0;
  padding:0;
  font-family: 'Free Sans', sans-serif;
}

/*set variables*/
:root {
  --main-font-size: 14pt;
  --main-line-height: 16pt;
  --sub-font-size: 11pt;
  --sub-line-height: 13pt;
  --margin-val: 15px;
}

/*General*/

@-webkit-keyframes appear {
  0% { opacity:0; }
  100% { opacity:1; }
}

@keyframes appear {
  0% { opacity:0; }
  100% { opacity:1; }
}

p {
  font-size: var(--main-font-size);
  line-height: var(--main-line-height);
  max-width:60ch;
}

a {
  text-decoration: none;
}

table * {
    vertical-align: top;
}

strong {
  font-weight:normal;
  opacity:0.4;
  padding:0 !important;
}

/*Menu*/

.mobile-nav {
  display: none;
}

div.menu {
  position:fixed;
  -webkit-transition-duration:0.5s;
  -webkit-transition-property: bottom;
  transition-duration:0.5s;
  transition-property: bottom;
  bottom:calc(-var(--margin-val) - var(--main-line-height));
  margin-bottom:var(--margin-val);
}

div.menu>div {
  display:block !important;
}

div.menu ul {
  margin-left:var(--margin-val);
  padding-bottom:var(--margin-val);
  width:calc(100vw - 45px);/* custom 2026 : old calc(100vw - 30)*/
    text-align: justify;
  max-height:var(--main-line-height);
}


div.menu ul:after {
    content: '';
    display: inline-block;
    width: 100%;
}

div.menu ul>li, div.menu div {
  font-size: var(--main-font-size);
  display: inline-block;
  list-style: none;
  text-transform: uppercase;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-property: opacity;
  transition-duration: 0.3s;
  transition-property: opacity;
}

div.menu ul>li {
  opacity: 0.4;
}

div.menu ul li a {
  color:black;
}

div.menu ul li:hover {
  opacity:1;
  font-size:var(--main-font-size);
  text-transform: uppercase;
}

div.menu ul li.current-menu-item, div.menu ul li.current-lang {
  opacity: 1;
}

  /* customisation 2026 */
@media only screen and (min-width: 769px) {
  div.menu {background: white;width: 100%;padding-top: 17px;padding-bottom: 15px;}
  body.home div.menu {background: rgba(0,0,0,0.9);mix-blend-mode: luminosity;margin-bottom: 0;line-height: 0;padding-bottom: 0;padding-top: 23px;-webkit-transition-duration:unset;-webkit-transition-property: none;transition-duration:unset;transition-property: none;bottom:0;}
}
@media screen and (min-width: 769px) and (max-width: 992px){
  div.menu {padding-top: 12px;}
  body.home div.menu {padding-top: 19px;}
  div.menu ul li a {font-size: 0.8rem;}
}
@media screen and (min-width: 993px) and (max-width: 1120px){
  div.menu {padding-top: 15px;}
  body.home div.menu {padding-top: 21px;}
  div.menu ul li a {font-size: 1rem;}
}
  /* customisation 2026 - END*/

/*language switcher*/

.lang-item {
  display: none;
}

div.menu .lang-item {
  display: inline-block;
}

body.home div.menu div {
  opacity: 1;
}

div.menu div li {
  display: inline-block;
  opacity:0.4;
}

div.menu div.lang li:first-of-type:after {
  content: ' / ';
  color:black;
  opacity:0.4;
}

body.home div.menu div.lang li:first-of-type:after {
  color:white;
}

/*TRACK*/

nav {
  line-height:var(--main-line-height);
  position:absolute;
  z-index: 2;
  top:var(--margin-val);
  left:var(--margin-val);
  color:white;
  font-size: var(--main-font-size);
  text-transform: uppercase;
  opacity: 1;
}

nav span {
  -webkit-transition-duration: 0.5s;
  -webkit-transition-property: opacity, max-width;
  transition-duration: 0.5s;
  transition-property: opacity, max-width;
  display:block;
  float:left;
}

nav span div {
  width: 270px; /* update 2026 - old = width:95pt */
}

nav span:first-of-type {
  opacity: 0.5;
  overflow:hidden;
  max-width:0;
}

nav span:first-of-type {
  /*opacity: 1;*/
}

nav:hover span:first-of-type {
  max-width: 270px; /* update 2026 - old = max-width:95pt */
}

nav a {
  color:white;
}

/*HOME*/

#img-bg {
  width:100vw;
  height:100vh;
  position:fixed;
  top:0;
  left:0;
  pointer-events: none;
  overflow: hidden;
  background-color:black;
}


#img-bg img {
  width:100%;
  height:auto;
  margin-top: 50vh;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

#logo {
  position:absolute;
  width:16vw;
  top:var(--margin-val);
  left:0px;
  -webkit-animation: appear 0.3s 2s reverse forwards;
  animation: appear 0.3s 2s reverse forwards;
}

@-webkit-keyframes logoMove {
  0% { margin-left:0px;  }
  100% { margin-left:20px;  }
}

@keyframes logoMove {
  0% { margin-left:0px;  }
  100% { margin-left:20px;  }
}


#logo img {
  width:100%;
  -webkit-animation: logoMove 3s ease-out forwards;
  animation: logoMove 3s ease-out forwards;
}

body.home nav {
  opacity: 0;
  /* if logo : remove comments
  -webkit-animation: appear 0.3s 2.5s forwards;
  animation: appear 0.3s 2.5s forwards;
  if logo - END */
  /* if no logo */
  -webkit-animation: appear 3s 0.5s forwards;
  animation: appear 3s 0.5s forwards;
  /* if no logo - END */
}

body.home nav span {
  max-width: 270px; /* update 2026 - old = max-width:95pt */
}

body.home nav span:first-of-type {
  opacity: 0.5;
  padding-right:5px;
}

body.home table {
  position:absolute;
  color:white;
  padding:var(--margin-val);
  /*width:100vw;*/
  width:90vw;
  font-size: var(--sub-font-size);
  line-height: var(--sub-line-height);
  margin-top:32px;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-property: opacity;
  transition-duration: 0.3s;
  transition-property: opacity;
  opacity: 0;
  /* if logo : remove comments
  -webkit-animation: appear 0.3s 2.5s forwards;
  animation: appear 0.3s 2.5s forwards;
  if logo - END */
  /* if no logo */
  -webkit-animation: appear 3s 1.5s ease-in forwards;
  animation: appear 3s 1.5s ease-in forwards;
  /* if no logo - END */
  padding-bottom: 50px;
}

body.home table tbody {
  -webkit-transition-duration: 0.3s;
  -webkit-transition-property: opacity;
  transition-duration: 0.3s;
  transition-property: opacity;
}

body.home table a {
  color:white;
  transition-duration: 0.3s;
  transition-property: opacity;
}

body.home table a:hover {
  opacity:0.5;
}

body.home table tr:first-of-type {
  display: none;
}

/*body.home table td {
  width:12.5%;
}

body.home table td:nth-of-type(4) {
  width:62.5%;


body.home div.menu {
  bottom:0;
}
}*/

body.home table tr td:nth-of-type(3) {
  width: 10%;
}

@-webkit-keyframes menuOpacity {
  0% { opacity:1; }
  100% { opacity:0.4; }
}

@keyframes menuOpacity {
  0% { opacity:1; }
  100% { opacity:0.4; }
}

body.home div.menu ul li {
  opacity: 1;
  -webkit-animation: menuOpacity 0.3s 2.5s forwards;
  animation: menuOpacity 0.3s 2.5s forwards;
} 

body.home div.menu ul li a {
  color:white;
}

body.home div.menu ul li:hover {
  -webkit-animation: menuOpacity 0.3s reverse;
  animation: menuOpacity 0.3s reverse;
}

/*CREATION TEMPLATE*/

dd {
  display:none;
}

.wp-block-embed figcaption {
  padding:0px 15px;
}

.wp-block-table {
  overflow-x: visible;
  padding:var(--margin-val);
}

.wp-block-table thead {
  border-bottom:0px;
}

body.single .wp-container-2>.wp-block-table {
  padding-left:0px;
}

main {
  opacity:0;
  -webkit-animation:  appear 0.7s forwards;
  animation:  appear 0.7s forwards;
}

body.page-template-page-projects main a  {
  width:50%;
  vertical-align:middle;
  overflow:hidden;
}

main a {
  display: inline-block;
}

article {
  overflow: hidden;
  position:relative;
  cursor:pointer;
  height:50vh;
  width:50vw;
}

article img {
  width:100%;
  height:auto;
  min-height: calc(50vh + 1px);
  margin-top:25vh;
  -webkit-transform:translateY(-50%);
  transform:translateY(-50%);
  -webkit-transition-duration: 0.3s;
  -webkit-transition-property: width;
  transition-duration: 0.3s;
  transition-property: width;
}

.info {
  position:absolute;
  bottom:12px;
  left:var(--margin-val);
  color:white;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-property: opacity;
  transition-duration: 0.3s;
  transition-property: opacity;
  z-index: 2;
  cursor: pointer;
}

.info p:first-of-type {
  text-transform: uppercase;
}

article:hover img {
/*  width:101%;
  margin-left:-0.5%;*/
}

article:hover .info {
  opacity:1 !important;
}


body.page-template-page-projects main {
  padding-bottom:50vh;
  width:100%;
}

body.page-template-page-projects main > a {
  height:50vh;
} 



/*ATELIER TEMPLATE*/

body.page-template-page-ateliers nav {
  position:fixed;
}

body.page-template-page-ateliers nav#sub-track {
  display: none;
  opacity:1;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-property: opacity;
  transition-duration: 0.3s;
  transition-property: opacity;
  cursor: pointer;
  margin-left:-5px;
}

body.page-template-page-ateliers nav#sub-track:hover {
  opacity:0.5;
}

body.page-template-page-ateliers .main-intro, body.page-template-page-lanuit .main-intro {
  margin-top:65px; /* before update newsletter : NO margin-top */
  position:absolute;
  width:50vw;
  margin-left:50vw;
}

body.page-template-page-ateliers .main-intro *, body.page-template-page-lanuit .main-intro * {
  padding:var(--margin-val);
  padding-bottom:0px;
}

body.page-template-page-ateliers .main-intro a, body.page-template-page-lanuit .main-intro a {
  padding:0;
  color:black;
  opacity:0.4;
}

body.page-template-page-ateliers .main-intro ul, body.page-template-page-lanuit .main-intro ul {
  padding:30px;
}

body.page-template-page-ateliers .main-intro li, body.page-template-page-lanuit .main-intro li {
  font-size:var(--main-font-size);
  list-style:none;
}

body.page-template-page-ateliers .main-intro li:before, body.page-template-page-lanuit .main-intro li:before { content: '–'; margin-left: -20px; margin-right: 10px; } 

body.page-template-page-ateliers main, body.page-template-page-lanuit main {
  padding-bottom:50vh;
}

body.page-template-page-lanuit .main-intro em {padding:0;}

body.page-template-page-ateliers article {
  float: none;
  z-index: 1;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-property: opacity;
  transition-duration: 0.3s;
  transition-property: opacity;

}

body.page-template-page-ateliers article img {
  width:50vw;
}

body.page-template-page-ateliers div.article-content {
  opacity:0;
  position:fixed;
  width:50vw;
  padding-left:50vw;
  /*height:calc(100vh - var(--margin-val));*/
  height:100vh;
  overflow: scroll;
  top:0px;
  padding-bottom:calc(var(--margin-val));
  background-color: white;
  z-index: 0;
  pointer-events:none;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-property: opacity;
  transition-duration: 0.3s;
  transition-property: opacity;
}

body.page-template-page-ateliers .wp-block-columns {
  margin:0;
  display:block;
  width:100%;
  padding-bottom:50vh;
}

body.page-template-page-ateliers .wp-block-image img {
  display:block;
  height:auto;
}

body.page-template-page-ateliers .wp-block-column {
  min-height:50vh;
  padding-bottom:0;
  padding-top:0;
}
  
body.page-template-page-ateliers .wp-block-column p {
  padding:var(--margin-val);
}


/*PAGES TEMPLATE*/

body.page-template-default nav, body.page-template-default nav a {
  color:black;
}

body.page-template-default main {
  width:100vw;
  font-size: var(--main-font-size);
  line-height: var(--main-line-height);
  min-height:calc(100vh - 145px - var(--main-line-height));
  padding-bottom:50vh;
}

body.page-template-default main table tr {
  height: var(--main-line-height);
}

body.page-template-default main table {
  margin-top:100px;
  padding-left:var(--margin-val);
  padding-right:var(--margin-val);
}

table th {
  font-weight: normal;
  text-transform: uppercase;
  text-align: left;
  padding-bottom: var(--main-line-height);
  opacity: 0.4;
  font-size: var(--main-font-size);
}

body.page-template-default main table a {
  color:black;
}

body.page-template-default td a:hover {
  opacity:0.4;
} 

.wp-block-table td, .wp-block-table th {
  border:0px;
  padding:0;
}

.wp-block-table  table th {
  padding-bottom:var(--main-line-height);
}

/*Calendrier*/ 

body.page-textes-interviews .wp-block-table, body.page-texts-interviews .wp-block-table, body.page-calendrier .wp-block-table, body.page-calendar .wp-block-table {
  padding:var(--margin-val) !important;
}

body.page-calendrier td,  body.page-calendar td, body.page-textes-interviews td,  body.page-texts-interviews td {padding-right:1%};

body.page-calendrier th:nth-of-type(1), body.page-calendar th:nth-of-type(1) { width: 8%; }
body.page-calendrier th:nth-of-type(2), body.page-calendar th:nth-of-type(2) { width: 17%; }
body.page-calendrier th:nth-of-type(3), body.page-calendar th:nth-of-type(3) { width: 22%; }
body.page-calendrier th:nth-of-type(4), body.page-calendar th:nth-of-type(4) { width: 19%; }
body.page-calendrier th:nth-of-type(5), body.page-calendar th:nth-of-type(5) { width: 34%; }


body.page-textes-interviews th:nth-of-type(1), body.page-texts-interviews th:nth-of-type(1) { width: 8%; }


/*Contact*/

body.page-template-default .wp-block-columns {
  margin-top:0;
}

.wp-block-image {
  margin-bottom:0;
}

body.page-template-default .wp-block-column {
  overflow: hidden;
  padding-bottom:0;
}

body.page-template-default .wp-block-gallery {
  height:100vh;
}

body.page-template-default .wp-block-gallery .blocks-gallery-item {
  margin:0;
  height:50vh;
  width: 100%;
  overflow: hidden;
}

body.page-template-default .wp-block-gallery .blocks-gallery-item figure {
  align-items: center;
}

body.page-template-default .wp-block-columns img {
  height:auto;
  width:100%;
  max-width:none;
}

body.page-template-default .wp-block-column table {
  margin-top:65px; /* before update newsletter : margin-top:var(--margin-val);*/
  width:calc(100% - var(--margin-val));
  font-size:var(--main-font-size);
  line-height:var(--main-line-height);
  padding:0;
}

body.page-template-default .wp-block-table {
  padding:0px;
}

body.page-template-default .wp-block-column td {
  padding:0;
  padding-bottom:calc(var(--main-line-height) * 2);
  padding-left:var(--margin-val);
}

body.page-template-default .wp-block-column td strong {
  font-weight: normal;
  opacity: 0.4;
}

body.page-template-default .wp-block-column tr:hover td {
  opacity:1;
}

body.page-contacts nav, body.page-contacts nav a, body.page-contact nav, body.page-contact nav a {
  color:white;
}


body.page-contacts .wp-block-column table td:first-of-type, body.page-contact .wp-block-column table td:first-of-type {
  width:50%;
}

.wp-container-5 {
  gap:0 !important;
}

/*PROJECT PAGE*/

body.single nav {
  opacity: 0.5;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-property: opacity;
  transition-duration: 0.3s;
  transition-property: opacity;
  position:fixed;
  z-index: -1;
}

body.single nav:hover, body.single .info {
  opacity: 1;
}

body.single .info {
  position:fixed;
  z-index: -1;
}
  /* customisation 2026 */
@media only screen and (min-width: 769px) {
body.single .info {bottom: 60px;}
}
  /* customisation 2026 - END*/
body.single .title p:first-of-type {
  padding-top:0;
  text-transform: uppercase;
}

body.single .title p:nth-of-type(2) {
  padding-top:0;
}

body.single .title {
  padding-top:var(--margin-val);
}

.wp-block-columns {
  min-height: 100vh;
  width:100%;
  background-color:white;
  margin-top:100vh;
  margin-bottom:0;
}

body.single .wp-block-columns div:nth-of-type(2) p, body.single .wp-block-columns div:nth-of-type(2) table {
  padding-left:0;
}

.wp-block-column {
  margin-left:0 !important;
  padding-bottom:50px;
}

.wp-block-columns a {
    color: black;
    opacity: 0.5;
  transition-duration:0.3s;
}

.wp-block-columns a:hover {
    opacity: 1;
}

body.single .wp-block-column p, .wp-block-file {
  padding:var(--margin-val);
  padding-bottom: 0;
}

.wp-block-column table {
  font-size: var(--sub-font-size);
  line-height: var(--sub-line-height);
  padding:var(--margin-val);
}

.wp-block-column table tr {
  height: var(--sub-line-height);
}

.wp-block-column table td {
  width:50%;
}

.wp-block-column table td:first-of-type {
  width:25%;
}

.wp-block-column table a {
  color:black;
  opacity:0.5;
}

.wp-block-column table tr:hover a {
  opacity:1;
}

figure.wp-block-embed {
  margin-bottom:0;
}

.wp-block-embed iframe {
  display:block;
}

/*slider*/

section {
  -webkit-transition-duration: 0.3s;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  transition-duration: 0.3s;
  opacity:0;
  position: fixed;
  background-color: black;
  height:100vh;
  width:100vw;
  top:0;
  overflow: hidden;
  z-index: -2;
}

#overlay-left, #overlay-right {
  display: block;
  float:left;
  position: absolute;
  width:50vw;
  height:100vh;
  cursor: url('https://espaceness.com/wp-content/uploads/2021/02/arrow.png'), auto;
  z-index: 1;
}

#overlay-right {
  margin-left: 50vw;
  cursor: url('https://espaceness.com/wp-content/uploads/2021/02/arrowr.png'), auto;
}

section img {
  opacity:0;
  width:100vw;
  height:auto;
  position:absolute;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition-duration :0.5s;
  transition-duration :0.5s;
}

img.portrait {
  width:auto;
  height:100vh;
}

body.page-template-page-projects img.portrait {
/*  height:50vh; TO DELETE
  margin-top: 0;
  margin-left: 25vw;
  transform: translate(-50%, 0);*/
}

section img:first-of-type {
  opacity:1;
}