::selection {
  background-color : grey;
}

body {
  background-color: #f1f2f2;
  font-family: 'ChivoMono';
  font-weight: 200;
  font-style: normal;
  color : #414042;
}

.project-typologie,
.project-meta-right {
  width : 50%;
}

.project-typologie p {
  margin-top  : 0px;
}

a,
a:visited {
  color : #414042;
  text-decoration : underline;
}

a:hover {
  color : #414042;
  text-decoration : none;
}

h1, h2, h3 {
  font-family : 'NewEdge666';
  text-transform: uppercase;
}

h4, h5, h6 {
  font-style: normal;
  font-weight: 200;
  margin-top : 0px;
}

.entry-content {
  line-height : 1.3;
}

.site-main p {
  font-size : 0.95rem;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 100;
    display: flex;
}

/* Barre verticale fixe */
.header-bar {
    width: 65px;
    height: 100vh;
    position: fixed;
    top:0;
    left:0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    background-color:  #f1f2f2;
    z-index: 101;
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}

.header-bar.is-open {
    transform: translateX(320px); /* = largeur du panel */
}

/* Titre vertical, ancré en bas */
.site-branding {
    flex: 1;
    display: flex;
    align-items: flex-end;
}

.site-title {
    margin: 0;
    font-size: 2rem;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    margin-left: 5px;
}

.site-title a {
    color: #414042;
    text-decoration: none;
}

/* Hamburger */
.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 28px;
    margin: 0 auto;
}

.hamburger-line {
    display: block;
    width: 100%;
    height: 1.5px;
    background-color: #414042;
    transform-origin: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* État ouvert — croix */
.menu-toggle.is-active .hamburger-line:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
.menu-toggle.is-active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.menu-toggle.is-active .hamburger-line:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* Panel de navigation */
.main-navigation {
    position: fixed;
    top: 0;
    left: 0px; /* largeur de la barre */
    height: 100vh;
    width: 320px;
    background-color:  #f1f2f2;
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    display: flex;
    flex-direction:column;
    align-items: center;
    padding-top:20px;
    padding-left: 20px;
    z-index: 99;
}

.main-navigation.is-open {
    transform: translateX(0);
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    font-family : 'NewEdge666';
    text-transform: uppercase;


}

.main-navigation ul li {
    margin-bottom: 24px;
    overflow: hidden;
    line-height : 1.2;
}

.main-navigation ul li a {
    font-size: 1.5rem;
    color: #414042;
    text-decoration: none;
    letter-spacing: 0.05em;
    display: block;
    transition: color 0.2s ease;
}

.main-navigation ul li a:hover {
    color: #414042;
    text-decoration : underline;
}

/* Overlay pour fermer en cliquant hors du menu */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 98;
}

.nav-overlay.is-active {
    display: block;
}

.site-main {
  width : calc(100vw - 65px);
  margin-left : 65px;
  padding-right : 20px;
}

/* Hero */
.home-hero {
    margin-bottom: 30px;
}

.home-hero__title {
  font-size : 2rem;
    margin-bottom: 16px;
    margin-top : 20px;
    line-height : 1.2;
}

.home-hero__image {
    width: 100%;
}

.home-hero__image img {
  width: 100%;
  height: 70vh;
  object-fit: cover;
  display: block;
}

/* Colonnes */
.home-columns {
    display: flex;
    gap: 20px;
}

.home-col--creations,
.home-col--collaborations {
    width: 35%;
}

.home-col--agenda {
    width: 30%;
}

.home-col__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 5px;
}



.home-col__label {
    font-size: 1.5rem;
    font-family : 'NewEdge666';
    margin-left: 10px;
}

.home a.home-col__label,
.home a.home-col__label:visited {
  margin-left : 0px;
  text-decoration : none;
}

.home a.home-col__label:hover {
  text-decoration : underline;
}

.home-col__see-all,
.home-col__see-all:visited {
    font-size: 0.8rem;
    text-decoration: underline;
    font-family : 'NewEdge666';

}

.home-col__see-all:hover {
    text-decoration: none;
}

.home-col__see-all:hover {
    opacity: 1;
}

/* Card */
.card {
    margin-bottom: 24px;
}

.card__link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.card__image {
    width: 100%;
    overflow: hidden;
    margin-bottom: 8px;
    aspect-ratio: 4 / 3;
}

.card__image img {
  height: 100%;
    width: 100%;
    object-fit: cover;
}

.wp-block-gallery figcaption {
  font-size : 0.7rem;
}

.home .card__image img {
    width: 100%;
    height : 100%;
    display: block;
    transition: filter 0.3s ease;
    object-fit: cover;
    object-position: center;
}

.home .card__image img {
  filter: grayscale(100%);
}

.home .card:hover .card__image img {
    filter: grayscale(0%);
}

.card:hover .card__image img {
    filter: grayscale(65%);
}

.card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
}

.card__title {
  font-family : 'NewEdge666';
  font-size : 1.1rem;
}

.card__date {
  font-family : 'NewEdge666';
  font-size : 0.9rem;
}

.agenda-content {
  font-size : 0.9rem;
  line-height : 1.3;
  margin-left: 10px;
  margin-right: 10px;
}

/* SINGLE LAYOUT */

.single-project {
  display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
}
.project-col--images {
    grid-column: 1;
}
.project-content-wrapper {
    grid-column: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 20px;
    grid-template-areas:
        "titre   meta"
        "content credits"
        "video   video";
}

.project-col--titre    { grid-area: titre; }
.project-col--content  { grid-area: content; }
.project-col--meta     { grid-area: meta; }
.project-col--credits  { grid-area: credits; }
.project-col--videos   { grid-area: video; margin-bottom: 70px; }
.project-thumbnail     { display: none; }

.project-col--meta,
.project-col--credits {
  padding-left : 15px;
}

.single-project,
.project-content-wrapper {
    align-content: start;
}

.vimeo-embed-wrapper {
  margin-bottom:20px;
}


/* FIN SINGLE LAYOUT */


/* Colonne images — les imgs du wysiwyg prennent toute la largeur */
.project-col--images img {
    width: 100%;
    height: auto;
    display: block;
}

.project-col {
  line-height : 1.3;
}

/* Colonne content */
.project-title {
  margin-top:0px;
    margin-bottom: 0px;
    line-height : 1;
    margin-bottom: 180px;
}

p:has(+ h4),
p:has(+ h5),
p:has(+ h6),
h4:has(+ h4),
h4:has(+ h5),
h4:has(+ h6),
h5:has(+ h4),
h5:has(+ h5),
h5:has(+ h6),
h6:has(+ h4),
h6:has(+ h5),
h6:has(+ h6) {
    margin-bottom: 5px;
}

.site-main h4,
.site-main h5,
.site-main h6 {
    font-size : 0.8rem;
    margin-left: 15px;
}

.gallery-item figcaption {
  text-align: left;
  font-size : 0.8rem;
  margin-top : 4px;
}

.gallery-item:first-of-type {
  margin-top : 0px;
}

.gallery {
  grid-gap : 20px!important;
}


.project-text > *:first-child,
.archive-intro > *:first-child,
.project-credits > *:first-child {
    margin-top: 0;
}


.gallery-item {
  margin : 0;
}

.single .site-main {
  margin-top : 20px;
}



/* Colonne meta */
.project-meta-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-family : 'NewEdge666';
    line-height : 1;
}

.project-meta-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.project-meta-bottom {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

blockquote {
  margin-right : 0px;
  margin-left : 25px;
}




.archive-header {
    margin-bottom: 48px;
}

.archive-title {
  margin-top : 20px;
  line-height : 1;
}

/* Intro sur deux colonnes */
.archive-intro {
    columns: 2;
    column-gap: 40px;
    margin-bottom: 64px;
}

/* Grille trois colonnes */
.archive-grid {
    display: grid;
    grid-template-columns: repeat( 3, 1fr );
    gap: 24px;
}

.page .entry-title {
  margin-top : 20px;
  line-height : 1;
}

.presse-title {
  font-weight : normal;
}

.lang-switcher {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 102;
    font-size: 1.2rem;
    text-decoration: none;
    color: inherit;
    font-family: 'NewEdge666';
}

.single .lang-switcher {
  top : initial;
  bottom : 20px;
}

.lang-switcher:hover {
  text-decoration: underline;

}

@media ( max-width: 750px ) {

  .card:hover .card__image img {
    filter: grayscale(100%);
    }

    .card__image img.is-visible {
        filter: grayscale(0%);
    }

  .single .lang-switcher {
    top : 15px;
    bottom : initial;
  }


  .project-col--meta,
  .project-col--credits {
    padding-left : 0px;
  }

  .project-col--meta {
    margin-bottom : 30px;
  }
  .project-thumbnail {
    display: block;
    margin-bottom : 20px;
  }
  .single-project {
          grid-template-columns: 1fr;
          gap: 0;
          grid-template-areas:
              "titre"
              "meta"
              "thumbnail"
              "content"
              "video"
              "images"
              "credits";
      }
      .project-content-wrapper {
          display: contents;
      }
      .project-col--titre    { grid-area: titre; }
      .project-col--meta     { grid-area: meta; }
      .project-col--content  { grid-area: content; }
      .project-col--credits  { grid-area: credits; }
      .project-col--videos   { grid-area: video; margin-bottom: 0px; }
      .project-col--images   { grid-area: images; }
      .project-thumbnail     { display: block; grid-area: thumbnail; }

    .project-title {
        margin-bottom: 0px;
    }

    .site-main {
        width: 100%;
        margin-left: 0;
        padding-left : 20px;
        position: relative;
        top : 60px;
    }

    .header-bar {
        width: 100%;
        height: 56px;
        flex-direction: row;
        padding: 0 20px;
        position: fixed;
        top: 0;
        left: 0;
    }
    .lang-switcher {
      top : 15px;
    }

    .main-navigation {
      height : auto;
      align-items : flex-start;
    }
    .home-col__label {
      margin-left: 0px;
    }
    .agenda-content {
      margin-left : 0px;
    }


    .site-title {
        writing-mode: horizontal-tb;
        transform: none;
        font-size : 1.3rem;
        margin-top: 5px;
    }

    .main-navigation {
        top: 56px;
        left: 0;
        width: 100%;
        transform: translateY( -100% );
    }

    .main-navigation.is-open {
        transform: translateY( 0 );
    }

    .header-bar.is-open {
        transform: none;
    }

    .home-columns {
        flex-direction: column;
    }

    .home-col--creations,
    .home-col--collaborations,
    .home-col--agenda {
        width: 100%;
    }



    .project-col--images {
        grid-row: auto;
    }

    .archive-grid {
        grid-template-columns: 1fr;
    }

    .archive-intro {
        columns: 1;
    }



}

@media ( max-width: 750px ) {
	.site-title,
	.lang-switcher{
        font-size : 0.9rem;

    }

	.lang-switcher{
        top : 20px;

    }


}