@use "partials/variables" as *;
@use "partials/colors" as *;
@use "partials/fonts" as *;
@use "partials/mixins" as *;

a, a:visited{
  text-decoration: none;
  color: inherit;
  transition: color 0.15s ease-out;
}

body{
  margin: 0;
  // background-color: green;
  font-weight: $default_fwght;
  line-height: 1.5;
}

// Splitting met .word ET .char en inline-block :
// - inline-block sur .char crée une opportunité de coupure entre CHAQUE lettre ;
// - inline-block sur .word (dimensionné en max-content) empêche tout retour à la
//   ligne interne, donc les soft hyphens ne peuvent jamais couper le mot.
// On repasse les deux en inline : le mot redevient un flux de texte qui ne coupe
// qu'aux césures logicielles (U+00AD) insérées par le JS.
// Spécificité (0,2,1) pour battre `.splitting .word/.char` de Splitting.
.splitting span.word,
.splitting span.char{
  display: inline;
}


//  _                             _
// | |                           | |
// | |     __ _ _   _  ___  _   _| |_
// | |    / _` | | | |/ _ \| | | | __|
// | |___| (_| | |_| | (_) | |_| | |_
// \_____/\__,_|\__, |\___/ \__,_|\__|
//               __/ |
//              |___/

div.layout-container{
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  max-width:$layout_width;
  margin: 0 auto;
  header[role="banner"]{
    display: block;
    position: relative;
    padding: 0.5em 0;
    flex: 1 1 $header_height;
    z-index: 100;
    // position: fixed;
    // top:0;
    // width: 100%;
    height: $header_height;
    min-height: $header_height;
  }
  main[role="main"]{
    flex: 1 1 auto;
    // padding:5em 0;
    overflow-y: scroll;
  }
  // footer[role="contentinfo"]{
  //   // flex: 0 1 content;
  //   z-index: 100;
  //   position: fixed;
  //   bottom: 0;
  //   width: 100%;
  // }
}



//  _   _                _
// | | | |              | |
// | |_| | ___  __ _  __| | ___ _ __
// |  _  |/ _ \/ _` |/ _` |/ _ \ '__|
// | | | |  __/ (_| | (_| |  __/ |
// \_| |_/\___|\__,_|\__,_|\___|_|


header[role="banner"]{
  background-color: #fff;
  // box-shadow: 0 -5px 15px #000;

  .header-middle{
    display: flex;
    justify-content:space-between;
    align-items: center;
    padding: 0.2em 0;
  }

  #block-leshed-identitedusite{
    a{
      // color: ;
      text-decoration: none;
      font-size: 2em;
      font-weight: 500;
      margin-right: 0.5em;
      // &:hover{
      //   color: $rose;
      // }
    }
  }

  .header-right{
    // position: relative;
    height:20px; width:20px;
    cursor: pointer;
    // background-color: green;

    >div#burger-btn{
      position:relative;
      transition-duration: 0.5s;
      transition-property: transform;
      top: 8.5px;
      &, &::before, &::after{
        // position: absolute;
        width:20px; height:3px;
        background-color: #000;

      }
      &:hover{
        &, &::before, &::after{
          background-color: green;
        }
      }
      &::before, &::after{
        content: "";
        position: absolute;
        left: 0;
        // background-color: red;
      }
      &::before{
        top:6px;
      }
      &::after{
        bottom: 6px;
      }
      &[opened]{
        transform: rotate(90deg);
      }
    }


    &>div.wrapper{
      // fixed (et non absolute) pour échapper à l'overflow:hidden de
      // .layout-container : sinon le débord pleine largeur (et donc le
      // backdrop-filter) est rogné aux bords du conteneur centré.
      position:fixed;
      top:$header_height;
      left: 0;
      width:100vw;
      padding: 0 calc((100vw - $layout_width) / 2) 0 calc((100vw - $layout_width) / 2);

      background-color: rgba(255,255,255,0.3);
      backdrop-filter: blur(7px);

      height: 0;
      overflow: hidden;
      transition-duration: 0.5s;
      &[opened]{
        height: calc(100vh - $header_height);
      }
      nav#block-leshed-navigationprincipale{
        // width: $layout_width;
        // margin: 0 auto;
        padding-top: 10px;
        // background-color: #fff;
        >ul{
          margin: 0;
          padding:0;
          li{
            list-style: none;
            a{
              font-size: 4em;
              font-weight: 200;
              filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #fff) drop-shadow(0 0 15px #fff);
            }
          }
        }
      }
      div#block-leshed-selecteurdelangue{
        ul{
          margin:0;
          padding:0;
          li{
            list-style: none;
            padding:0;
            display: inline-block;
            font-size: 2em;
            &:first-child{
              &:after{
                content: " /";
                font-weight: 200;
              }
            }
            &:last-child{
              padding-left: 0.3em;

            }
            &.is-active{
              font-weight: 400;
            }

          }
        }
      }
    }

  }
} // end of header[role="banner"]{


//    ____ _       _           _
//   / ___| | ___ | |__   __ _| |___
//  | |  _| |/ _ \| '_ \ / _` | / __|
//  | |_| | | (_) | |_) | (_| | \__ \
//   \____|_|\___/|_.__/ \__,_|_|___/

.variable-title{
  margin: 0;
  font-weight: 200;
  text-transform:lowercase;
  line-height: 1;
  // margin-left: -0.04em;
  filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 15px #fff);
  span.word{
    span.char{
      letter-spacing:-0.1em;
    }
  }
  // span.whitespace{
  //   letter-spacing: 0.5em;
  // }
}

// Titres traités par assets/js/titles.js : garder identique à TITLE_SELECTORS.
$variable-title-selectors: (
  '#block-leshed-identitedusite>a',
  'article.node-type-projet>header>h2',
  'article.node-type-projet>.cols>.left>h2',
  'article.node-type-projet.view-mode-full h2.node-title',
  'article.node-type-evenement>header>h2',
  'article.node-type-evenement>header>.field_dates>time',
  'article.node-type-evenement.view-mode-full h2.node-title',
  'article.node-type-evenement.view-mode-full .field_dates.digit-dates span.date-part',
);

// Avant le split : même métrique qu'après, pour éviter un saut de mise en page.
:where(#{$variable-title-selectors}):not(.splitting){
  margin: 0;
  font-weight: 200;
  text-transform: lowercase;
  line-height: 1;
  letter-spacing: -0.1em;
}

// Masqués (place conservée) jusqu'au split ; réaffichés après 3 s si le JS échoue.
@media (scripting: enabled){
  :where(#{$variable-title-selectors}):not(.is-ready){
    visibility: hidden;
    animation: leshed-title-failsafe 0s 3s forwards;
  }
}

@keyframes leshed-title-failsafe{
  to{ visibility: visible; }
}


div#block-leshed-titredelapage h1{
  font-size: 1em;
  font-weight: $default_fwght;
  margin: 0;
}



//   _____ _____        __   ____ ___  _     ____
//  |_   _/ _ \ \      / /  / ___/ _ \| |   / ___|
//    | || | | \ \ /\ / /  | |  | | | | |   \___ \
//    | || |_| |\ V  V /   | |__| |_| | |___ ___) |
//    |_| \___/  \_/\_/     \____\___/|_____|____/

@mixin nodeListe{
  >header{

    >h2{
      font-size: 5em;
    }
  }
  .field_artiste_s_invite_s{
    font-size: 1.8em;
    font-weight: 300;
  }

  .field_type_d_evenement,
  .field_type_de_projet{
    font-weight: 400;
  }

  &.has-image{
    >header{
      >h2{
        position: relative;
        max-height: 1em;
        overflow: visible;
        z-index: 10;
        // text-shadow: 0 0 10px #fff;
        // box-shadow: 0 0 15px #f00;
        // filter: drop-shadow(0 0 5px #fff);

        // Si le titre déborde de N lignes sous l'image, on remet N lignes
        // supplémentaires dans le flux avant l'image pour absorber le débordement.
        @for $i from 1 through 10 {
          &[data-overflow-lines="#{$i}"] {
            max-height: #{$i}em;
          }
        }
      }
      div.field_images{
        position:relative;
        // width: 100%;
        z-index: 5;
        a{
          display:block;
          img{
            width:100%;
            height: auto;
          }
        }
      }
    }
  }
}

@mixin projetListe{
  @include nodeListe();

  div.field_artiste_s_invite_s.field-items.multiple{
    // display: flex;
    // flex-direction: row;
    .field-item{
      display: inline-block;
      &:not(:last-of-type):after{
        content: ", ";
      }
    }
  }
}

@mixin evenementListe{
  @include nodeListe();
  >header{
    .field_dates{
      font-size: 4em;
      line-height: 1;
      time{
        span.date-part:not(:last-child){
          &:after{
            content:".";
          }
        }
      }
    }
  }
}


div.layout.layout--twocol-section--50-50{
  flex-wrap: nowrap;
  // Sans ça, `align-items: stretch` (défaut flex) étire les deux colonnes à la
  // même hauteur : la synchro de scroll ne verrait aucune différence de hauteur.
  // flex-start = chaque colonne prend la hauteur de son contenu.
  align-items: flex-start;

  column-gap: $colsgap;
  div.layout__region{
    max-width: calc(50% - $colsgap / 2);
    flex: 1 0 calc(50% - $colsgap / 2);
    .views-row{
      // border: 1px solid red;
      // box-sizing: border-box;
      margin-bottom: 2em;
      max-width: 100%;
      article.node-type-projet{
        @include projetListe();
      }
      article.node-type-evenement{
        @include evenementListe();
      }

    }
  }
}

//   _   _           _      _____      _ _
//  | \ | | ___   __| | ___|  ___|   _| | |
//  |  \| |/ _ \ / _` |/ _ \ |_ | | | | | |
//  | |\  | (_) | (_| |  __/  _|| |_| | | |
//  |_| \_|\___/ \__,_|\___|_|   \__,_|_|_|


@mixin nodefull{
  div.cols{
    display: flex;
    flex-direction: row;
    gap: $colsgap;
    align-items: flex-start;
    div.col{
      flex:0 0 calc(50% - $colsgap / 2);
      max-width: calc(50% - $colsgap / 2);

      &.left{
        z-index: 10;
        // padding-bottom: 5em;
        // box-sizing: border-box;
        >header{
          transform-origin: 0 0;
          width: 205%;//calc(50% - $colsgap / 2);
          z-index: 100;
          pointer-events: none;

          >h2.node-title{
            position: relative;
            font-size: 12em;
            margin: 0;
            &.leshed-svg-export-target{
              pointer-events: painted;
            }
          }
        }

        .field_artiste_s_invite_s{
          font-size: 1.8em;
          font-weight: 300;
        }
        .field_invite_accompagne_curate_p,
        .field_partenaire_s{
          margin-top: 1em;
          font-weight: 400;
          .field-label{
            font-weight: $default_fwght;
          }
          // >div{
          //   display: inline-block;
          // }
        }
        .field_dates{
          margin-top: 1em;
          time{
            font-weight: 400;
          }
        }

        >div.spacer{
          display: block;
          height: 5em;
        }
      }
      &.right{
        // Étire .field_images sur toute la hauteur de la colonne (= colonne la
        // plus haute, via le stretch de .cols) : le contexte de collage sticky
        // couvre alors tout le scroll, donc les cartes restent figées tant que
        // la colonne gauche défile encore (cf. point 6).
        display: flex;
        .field_images{
          flex: 1;
          // .field-items{
            &:after{
              display: block;
              position: relative;
              content: "";
              // border: 1px solid red;
              width: 100%;
              // Étend le contexte sticky au-delà de la dernière image pour
              // couvrir le scroll restant de la colonne gauche. Hauteur calculée
              // en JS (voir main.js, adjustStickyContext) via --sticky-extent.
              height: var(--sticky-extent, 100vh);
            }
          // }
          .field-item{
            position: relative;
            // Empilement "cartes" : chaque image se fige au même endroit (haut) et
            // est recouverte par la suivante (l'ordre du DOM fait que la dernière
            // passe au-dessus). La 1re image ne bouge pas. Desktop uniquement.
            @media (min-width: 768px){
              position: sticky;
              top: 0;
              // &:last-child:after{
              //   content: "";
              //   // position: relative;
              //   display:block;
              //   // blockquote.image-field-caption{
              //   height: 100vh;
              //   width:100%;
              //   border: 1px solid red;
              //   // }
              // }
            }
            figure{
              margin: 0;
              a{
                display: block;
                img{
                  width: 100%;
                  max-width: 100%;
                  height: auto;
                }
              }
              figcaption.image-field-caption{
                margin: 0;
                position: absolute;
                bottom: 0; left: 0;
                height: 5em;
                width: 100%;
                overflow: visible;
                display: block;
                // border: 1px solid red;
                blockquote{
                  position: absolute;
                  bottom: 0; left: 0;
                  width: 100%;
                  margin: 0;
                  background-color: rgba(0,0,0,0.65);
                  color: #fff;
                  pointer-events: none;
                  p{
                    margin: 0;
                    padding: 1em;
                    font-weight: 300;
                    font-size: 0.8em;
                  }
                  opacity: 0;
                  transition: opacity 0.3s ease-in-out;
                }
                &:hover{
                  // z-index:200;
                  blockquote{
                    opacity: 1;
                  }
                }
              }

            }

            &:hover{
              z-index:200;

            }
          }

        }

      }
    }
  }
}

//   ____            _      _
//  |  _ \ _ __ ___ (_) ___| |_
//  | |_) | '__/ _ \| |/ _ \ __|
//  |  __/| | | (_) | |  __/ |_
//  |_|   |_|  \___// |\___|\__|
//                |__/
article.node-type-projet.view-mode-full{
  @include nodefull();


}


//   _____                                           _
//  | ____|_   _____ _ __   ___ _ __ ___   ___ _ __ | |_
//  |  _| \ \ / / _ \ '_ \ / _ \ '_ ` _ \ / _ \ '_ \| __|
//  | |___ \ V /  __/ | | |  __/ | | | | |  __/ | | | |_
//  |_____| \_/ \___|_| |_|\___|_| |_| |_|\___|_| |_|\__|

@mixin event-date-time($ref: 10em){
  display: flex;
  position: relative;
  time{
    position: relative;
    display: grid;
    grid-template-columns: $ref ($ref * 7 / 18);
    grid-template-rows: $ref / 2.3 $ref / 2.3;
    grid-template-areas:
      "day month"
      "day year";

    span.date-day{
      grid-area: day;
      font-size: $ref;
      font-weight: 100;
      font-style: italic;
    }
    span.date-month{
      grid-area: month;
      align-self: end;
      font-weight: 400;
    }
    span.date-year{
      grid-area: year;
      align-self: end;
      font-weight: 700;
    }
    span.date-month,
    span.date-year{
      font-size: $ref / 2.45;
    }
  }
  span.date-sep{
    font-size: $ref / 2;
    padding:0 0.2em;
  }
}


article.node-type-evenement.view-mode-full{
  @include nodefull();

  .field_dates.digit-dates{
    transform-origin: 0 0;
    @include event-date-time();
  }

  div.field_projet_s_lie_s{
    margin-top: 2em;
    .field-label{
      margin-bottom: 1em;
    }
    article.node-type-projet.view-mode-tableau_liste{
      @include projetListe();
    }
  }

}




//  __     ___                        _             _     _                  ____            _      _
//  \ \   / (_) _____      _____     / \   _ __ ___| |__ (_)_   _____  ___  |  _ \ _ __ ___ (_) ___| |_
//   \ \ / /| |/ _ \ \ /\ / / __|   / _ \ | '__/ __| '_ \| \ \ / / _ \/ __| | |_) | '__/ _ \| |/ _ \ __|
//    \ V / | |  __/\ V  V /\__ \  / ___ \| | | (__| | | | |\ V /  __/\__ \ |  __/| | | (_) | |  __/ |_
//     \_/  |_|\___| \_/\_/ |___/ /_/   \_\_|  \___|_| |_|_| \_/ \___||___/ |_|   |_|  \___// |\___|\__|
//                                                                                        |__/
div.views-archives-projets{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2em;
  gap: $colsgap;
  div.views-row{
      flex: 1 0 calc(25% - $colsgap);
      width: calc(25% - $colsgap);
  }

  article.node-type-projet.view-mode-tableau_liste{

    @include projetListe();
    >header{
      >h2{
        font-size: 3em;
      }
    }

  }
}
form#views-exposed-form-archives-page-1{
  div.bef-links{
    ul{
      margin:0; padding:0;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      li{
        list-style: none;
        flex: 0 1 auto;
        padding: 0.2em 0.5em;
        font-size: 0.756em;
      }
    }
  }
}

//  __     ___                        _             _     _                  _____                                           _
//  \ \   / (_) _____      _____     / \   _ __ ___| |__ (_)_   _____  ___  | ____|_   _____ _ __   ___ _ __ ___   ___ _ __ | |_ ___
//   \ \ / /| |/ _ \ \ /\ / / __|   / _ \ | '__/ __| '_ \| \ \ / / _ \/ __| |  _| \ \ / / _ \ '_ \ / _ \ '_ ` _ \ / _ \ '_ \| __/ __|
//    \ V / | |  __/\ V  V /\__ \  / ___ \| | | (__| | | | |\ V /  __/\__ \ | |___ \ V /  __/ | | |  __/ | | | | |  __/ | | | |_\__ \
//     \_/  |_|\___| \_/\_/ |___/ /_/   \_\_|  \___|_| |_|_| \_/ \___||___/ |_____| \_/ \___|_| |_|\___|_| |_| |_|\___|_| |_|\__|___/
div.views-archives-evenements {

  & > h3{
    border-bottom: 1px solid #999;
  }

  article.node-type-evenement.view-mode-calendrier{
    // @include evenementListe();
    display: flex;
    flex-direction: row;
    gap: 1em;
    header{
      flex:0 1 auto;
      // width: 5em;
      padding:0 1em 0 0;

      .field_dates{
        @include event-date-time(5em);
        flex-direction: column;
        align-items: center;
        gap: 0.6em;
        span.date-sep{
          display: block;
          width: 1em;
          height: 0;
          overflow: visible;
          transform-origin: center;
          transform: rotate(90deg) translateX(0.1em);
          line-height: 0;
          padding: 0;
        }
      }
    }

    section.content{
      flex:0 1 auto;
      h2.node-title{
        font-size: 3em;
      }
    }

    section.last-cel{
      flex:0 1 auto;
      .field_images{
        a{
          display: block;
          width: 12em;
          height: 12em;
          overflow: hidden;
          img{
            width: 100%;
            height: 100%;
            object-fit:contain;
            object-position: top left;
          }
        }
      }
    }

  }
}