@import url('font.css');


body{
  background-color: var(--second);
  font-family: 'ES-Rebond';
  font-variation-settings: 'wght' 450, "CNRT" 300;
  font-feature-settings: 'ss02' 1, 'ss03' 1, 'kern' 1;
}

strong{
  font-weight: inherit;
}

button{
  border: 0;
  font-weight: inherit;
  background: transparent;
  font-family: 'ES-Rebond';
  font-variation-settings: 'wght' 500, "CNRT" 150;
  font-feature-settings: 'ss02' 1, 'ss03' 1, 'kern' 1;
}

a{
  color: var(--primary);
  text-decoration: none;
}

img, video{
  display: block;
  
}


/* HEADER */

.site-header{
  padding: 2rem;
  display: grid;
  row-gap: 0.5em;
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100%;
}

.site-header section{
  display: flex;
  justify-content: center;
}




.site-header a{
  padding: 4px 8px;
    background: white;
    border-radius: 100em;
    width: fit-content;
}

.site-header nav{
  grid-column: 3;
}

.site-header nav ul{
  display: flex;
  gap: 1em;
  justify-content: flex-end;
}

/* cacher les médias filtrés */
.media-card.is-hidden { 
  display: none !important; 
}


/* filtre types (réutilise le style des filtres index si tu l'as) */
.isab-home-filters .isab-filter__list { 
  display:flex; 
  flex-wrap:wrap; 
  gap: 0.5em;
}

.isab-filter-chip { 
  display:flex; 
  align-items:center; 
}

.meta-title{
}

.isab-project__meta-group{
  font-size: 0.8em;
  display: flex;
  gap: 0.5em;
  padding: 0 0.5em 0.5em;
  border-left: 1px solid;
  flex-wrap: wrap;
}

.isab-filter-chip span {  
  padding:4px 8px; 
  cursor:pointer; 
  background: white;
  border-radius: 100em;
  box-shadow: 0 0 0 rgb(150, 250, 150);
  transition: box-shadow 0.2s ease-in-out;
}

.isab-filter-chip span:hover {  
  box-shadow: 0 0 20px rgb(150, 250, 150);
  transition: box-shadow 0.2s ease-in-out;
}

.isab-filter-chip input { display:none;}

.isab-filter-chip.is-selected span{
  background: rgb(150, 250, 150);
  color: var(--primary);
}

/* Badges / taxos */
.isab-badge {
  border: 0;
  background: white;
  border-radius: 100em;
  cursor: pointer;
  padding: 2px 4px;
}

.isab-badge.is-active {
  background: rgb(150, 255, 150);
  color: var(--primary);
}
/* Filtrage visuel commun */
.isab-filtered .is-hidden {
  display: none;
}

.isab-selected__clear,
.isab-filter-clear-types{
  background: rgb(240, 200, 255);
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 100em;
  height: fit-content;
}

.isab-filter__body{
  display: flex;
  align-items: center;
  gap: 0.5em;
}



/* =========================================
   ISAB — Base Front Styles (Home + Index)
   ========================================= */

/* Layout principal */

.container {
  padding: 1em;
}

/* Grille média commune */
.media-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.media-card{
  overflow: visible;
}

.media-card a > *{
  position: relative;
  box-shadow: 0 0 0px yellow;
  transition: box-shadow 0.2s ease-in-out;
  height: fit-content;
  align-items: center;
}

.media-card a{
    cursor: pointer;
}




.media-card:hover a > *{
  box-shadow: 0 0 100px yellow;
  z-index: 99;
  transition: box-shadow 0.2s ease-in-out;
}

.media-card[data-disabled="1"]:hover{
  box-shadow: inherit;
}


/* supprime les contrôles vidéo natifs */
video::-webkit-media-controls {
  display: none !important;
}

.isab-lightbox_ytv{
  display: flex;
  justify-content: center;
  margin: var(--gap) 0;
}

iframe {
    max-height: calc(80dvh - (2 * var(--gap)));
    
    aspect-ratio: 16 / 9;
}



.isab-competences {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.isab-competence {
  margin: 0;
}

.isab-competence-link {
  display: inline-flex;
  align-items: center;
  gap: .5ch;
  padding: 6px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  text-decoration: none;
}

.isab-project.is-hidden { display:none; }

/* curseur d’aperçu */
#isab-cursor-preview { position:fixed; top:0; left:0; pointer-events:none; z-index:10000; display:none; }
#isab-cursor-preview.is-open { display:block; }
#isab-cursor-preview img { max-width:260px; max-height:180px; object-fit:cover; border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,.25); }


.isab-filter__actions {
  display: none;
}
.isab-filtered .isab-filter__actions {
  display: block;
}

.media-card[data-disabled="1"] a,
.media-card[data-disabled="1"] .media-card__disabled {
  pointer-events: none;
}

/* INTRO */
.isab-home-intro{
  padding: 0 var(--gap);
  display: flex;
  align-items: center;
}

.introText{
  font-size: clamp(24px, 2vw, 150px);
}


/* FOOTER */
.site-footer{
  padding: var(--gap);
}

#navMobile{
  display: none;
}


.home #goBadges{
  display: none;
}

/* INFOS */

.isab-infos{
  display: flex;
  gap: var(--gap);
}


.isab-infos .isab-infos__content{
  grid-column: span 10;
  font-size: clamp(18px, 1.5vw, 75px);
  columns: 2;
  column-gap: var(--gap);
}
.isab-infos .isab-infos__infos{
 
  display: grid;
  gap: var(--gap);
}

.isab-infos .isab-infos__infos section{
   min-width: max-content;
}




.isab-infos h2{
  margin-bottom: 0.25em;

  border-bottom: 1px solid;
}


 #navTitle{
  display: none;
 }

 .isab-scroll-locked {
  overflow: hidden;
  height: 100%;
}

/* CURSOR */
#cursor-title {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;

  padding: .35em .6em;
  font-size: 1em;
  line-height: 1.2;
  white-space: nowrap;

  background: rgb(255, 255, 255);
  color: black;
  border-radius: 100em;

  opacity: 0;
  transform: translate3d(14px,-8px,0);
  transition: opacity .15s ease;
}

/* SHOWREEL *//* conteneur = pile */
.page-id-341 #intro{

  display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100dvh;
}
.bigTitle{
  position: absolute;
    z-index: 99;
    font-size: 21vw;
    text-align: center;
    line-height: 0.8em;
    color: black;
    background: var(--second);
    mix-blend-mode: lighten;
    font-family: 'ES Rebond Alte';
    font-weight: 900;
    letter-spacing: -0.03em;
    font-feature-settings: 'kern' 0, 'ss02';
    /*aspect-ratio: 16/9;*/ height: 100dvh;
    display: flex;
    align-items: center;

    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: backdrop-filter 0.05s linear;
}

.bigTitle span{

  filter: blur(0px);
  transition: filter 0.05s linear;
}

.isab-showreel--xfade{
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16/9;
  background: #000;
  overflow: hidden;
}

/* 2 videos = superposées */
.isab-showreel--xfade > .isab-sr-v{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;

  display: block !important; /* ok même si global */
  margin: 0 !important;

  opacity: 0;
  transition: opacity 200ms linear;
  will-change: opacity;
}

.isab-showreel--xfade > .isab-sr-v.is-active{
  opacity: 1;
}
/*BOUNCY LETTER*/
.bigTitle span .word{
  display: inline-block;
  white-space: nowrap; /* mot insécable */
}
.bigTitle span .char{
  display:inline-block;
  will-change: transform;
  transform: translate3d(0,0,0);
}

.bigTitle span .char.is-leaving{
  transition: transform 520ms cubic-bezier(.18,.95,.25,1);
}

.bigTitle span .char.is-bounce{
  animation: isab-char-bounce 520ms cubic-bezier(.18,.95,.25,1);
}

@keyframes isab-char-bounce{
  0%   { transform: translate3d(var(--tx,0px), var(--ty,0px), 0); }
  60%  { transform: translate3d(0px, 2px, 0); } /* micro-overshoot */
  100% { transform: translate3d(0,0,0); }
}




/* Responsive */
@media (max-width: 1280px){

}

@media (max-width: 920px){

  .isab-infos{
    flex-direction: column;
  }

  .isab-infos .isab-infos__infos{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap);
  }

  .isab-infos .isab-infos__content{
    columns: inherit;
  }

  .isab-infos__content p{
    margin-bottom: 0.75em ;
  }

}

@media (max-width: 640px) {
  #navTitle{
    display: flex;
  padding: 4px 8px;
  background: white;
  width: fit-content;
  border-radius: 100em;
}
  .site-header{grid-template-columns: repeat(2, 1fr);}
  .media-grid { grid-template-columns: 1fr; }
  .isab-project__header h2 { font-size: 8vw; margin-left: 0;}
  .site-header a{padding: 0}
  #navMobile{display: block;
    position: fixed; z-index: 999; bottom: 0; padding: var(--gap);
    background: var(--second);
    width: 100%;
  }
  

}