/*** FONTS ***/
.text--home {
    font-family: var(--font-dm);
    font-weight: var(--weight-bold);
    font-style: var(--style-normal);
    font-size: clamp(4rem, 12vw, 10rem);
    line-height: var(--height-xs);
    letter-spacing: var(--spacing-n4);
}
.text--home-italic {
    font-family: var(--font-instrument);
    font-weight: var(--weight-regular);
    font-style: var(--style-italic);
    font-size: clamp(4rem, 12vw, 10rem);
    line-height: var(--height-xxs);
    letter-spacing: var(--spacing-p0);
}



/*** HEADER ***/
.header-home {
    position: sticky;
    top: 0;
    z-index: 80;
    background-color: var(--color-black);
}
.header-content,
.header-bottom {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}
.header-annee, 
.informations {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: end;
    align-items: center;
}
.header-annee {
    gap: 16px;
}
.informations {
    gap: 80px;
}
.header-bottom {
    margin-top: 84vh;
    padding: 0px 32px;
}
.reseaux.mobile {
    display: none;
}
/* HERO IMAGE */
.hero-image {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url(../assets/img/autres/jlzstudio-designer-graphique-strasbourg-hero-tb.jpg);
    background-size: cover;
    background-attachment: fixed;
    z-index: 90;
    overflow: hidden;
    transition:
    top 0.9s cubic-bezier(0.77, 0, 0.175, 1),
    bottom 0.9s cubic-bezier(0.77, 0, 0.175, 1);
}
.hero-image.bands-in {
    top: 8%;
    bottom: 9%;
}
/* H1 */
.hero-title-box {
    position: absolute;
    left: 2.5rem; right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
    /*padding: clamp(2rem, 4vh, 4rem) clamp(2rem, 4vw, 4rem);*/
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.35s ease;
}
.hero-title-box.show { opacity: 1; }
/* word-by-word reveal */
.word {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s ease, transform 0.55s ease;
    margin-right: 0.15em;
}
.word:last-child { margin-right: 0;}
.word.in { opacity: 1; transform: translateY(0); }
/* MAIN */
main {
    position: relative;
}


/*** PRÉSENTATION DE JLZ STUDIO ***/
.presentation--texte {
    padding-right: 64px;
}
.presentation--jlz {
    padding-left: 110px;
}
.presentation--jlz > h2,
.presentation--jlz > a {
    margin-left: 110px;
}
.presentation.mobile {
    display: none;
}




/*** PROJETS ***/
.projets-title-mobile {
    display: none;
}
section.projet-highlight {
    background-image: url(../assets/img/vinyle/jlzstudio-vinyle-da-highlight-tb.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin: 110px 0px 160px 0px;
}
.link-projet {
    height: 560px;
    display: flex;
    align-items: end;
    justify-content: center;
    padding-bottom: 80px;
}
.carte-projet--meta {
    background-color: var(--color-black);
}
.projet-highlight:hover .carte-projet--meta {
    background-color: var(--color-yellow);
    color: var(--color-black);
}
.carte-projet:hover .carte-projet--meta {
  background-color: var(--color-yellow);
  color: var(--color-black);
}
.grille-projets-home {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 110px;
  row-gap: 32px;
}
#projet-hightlight {
    margin: 80px 0px;
}
#projet-hightlight > a > div {
    padding-bottom: 8px;
    align-items: end;
}
#projet-hightlight:hover > a > div {
    background-color: var(--color-yellow);
    color: var(--color-black) !important;
}
.domaines.mobile {
    display: none;
}


/*** PROCESSUS ***/
.processus--texte {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.processus--titres {
    display: flex;
    flex-direction: column;
    align-items: end;
    padding-right: 64px;
    padding-top: 110px;
    gap: 110px;
}
.processus--descriptions {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 24px;
    padding-top: 110px;
}
.processus--texte.mobile {
    display: none;
}



/*** DOMAINES ***/
.branding,
.edition,
.webdesign,
.images {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: start;
}

.edition-title {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}


.images-description > p {
    max-width: 88%;
}

.branding-description,
.edition-description,
.webdesign-description,
.images-description {
    opacity: 0;
}

.domaines {
    margin: 110px 0px;
}

.images-cta {
    text-align: right;
    margin-top: 110px;
}

#domaines-expertise > div > div > div.branding:hover > div:nth-child(2) > p,
#domaines-expertise > div > div > div.edition:hover > div.col-4 > p,
div.webdesign:hover > div.webdesign-description,
div.images:hover > div.images-description {
    opacity: 100;
}

@media (min-width: 1199px) {
/* Quand la souris est quelque part dans .domaines… */
.domaines .row:has(.branding:hover) .edition,
.domaines .row:has(.branding:hover) .webdesign,
.domaines .row:has(.branding:hover) .images,

.domaines .row:has(.edition:hover) .branding,
.domaines .row:has(.edition:hover) .webdesign,
.domaines .row:has(.edition:hover) .images,

.domaines .row:has(.webdesign:hover) .branding,
.domaines .row:has(.webdesign:hover) .edition,
.domaines .row:has(.webdesign:hover) .images,

.domaines .row:has(.images:hover) .branding,
.domaines .row:has(.images:hover) .edition,
.domaines .row:has(.images:hover) .webdesign {
  filter: blur(8px);
  transition: filter 0.3s ease;
}

/* La div survolée reste nette */
.domaines .branding,
.domaines .edition,
.domaines .webdesign,
.domaines .images {
  transition: filter 0.3s ease;
}
}