/* ============================================================
   MAIN.CSS — Fichier nettoyé
   Fusion de : styles.css → rectangles-FINAL-FIXED.css → FIXES3.css
             → HOVER-FINAL.css → LANDING-TITRE-FINAL.css
             → LANDING-RECTANGLES-FINAL.css → horizontal-projects-7.css
   ============================================================ */


/* ============================================
   VARIABLES
   ============================================ */
:root {
    --bg: #f4f2ee;
    --ink: #0e0e0e;
    --blue: #0047FF;
}

html {
    --main-color: white;
    --second-color: black;
    --scrollbar-color-1: black;
    --scrollbar-color-2: black;
    background-color: var(--second-color);
    margin: 0%;
    padding: 0;
    color: var(--main-color);
    font-family: PracticalGrotesk;
    font-weight: 377;
    line-height: 135%;
    font-size: .7vmax;
    font-variation-settings: "slnt" -11;
    letter-spacing: .05em;
    scroll-behavior: auto;
    overflow-x: hidden;
    scrollbar-color: var(--scrollbar-color-1) var(--scrollbar-color-2);
    scrollbar-width: thin;
    transition: scrollbar-color 0.6s ease;
}

* { cursor: none; box-sizing: border-box; margin: 0; padding: 0; }

body {
    margin: 0%;
    padding: 0;
    overflow-x: hidden;
}

body.scroll-locked {
    overflow: hidden;
    height: 100vh;
}


/* ============================================
   LIENS
   ============================================ */
a,
a:link,
a:visited,
a:active {
    color: var(--main-color);
    text-decoration: none;
}
a:focus {
    color: blue;
    text-decoration: none;
}

#container-footer a { text-decoration: none; }
#container-footer a:visited,
#container-footer a:link {
    color: white;
    text-decoration: none;
}
#container-footer a:hover {
    color: blue;
    text-decoration: none;
}


/* ============================================
   BALISES HTML DE BASE
   ============================================ */
iframe { width: 100%; }

p { margin: 0; padding: 0; }

lite-vimeo {
    aspect-ratio: 16/9;
    overflow: hidden;
}

h2 {
    font-family: 'PracticalGrotesk', sans-serif;
    font-size: 1vmax;
    margin-top: 1%;
    margin-bottom: 0%;
}
h3 {
    font-size: .7vmax;
    margin-top: .5%;
    margin-bottom: .5%;
}
h4 {
    font-size: 1.2vmax;
    padding: 0;
    margin: 0;
}
h5 {
    font-family: GTFlexa_Mono;
    font-size: .7vmax;
    font-weight: 900;
    height: 2vh;
    padding: 0;
    margin: 0;
}


/* ============================================
   CURSEURS
   ============================================ */
#cursor-dot {
    position: fixed;
    top: 0; left: 0;
    width: .6vw; height: .6vw;
    background: var(--main-color);
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transform-origin: center;
    will-change: transform, left, top;
    transition:
        width  .22s cubic-bezier(.35,2.04,.59,.85),
        height .22s cubic-bezier(.35,2.04,.59,.85),
        background .18s ease,
        transform  .28s cubic-bezier(.35,2.04,.59,.85);
}

#cursor-ring {
    position: fixed;
    top: 0; left: 0;
    width: 1.1vw; height: 1.1vw;
    border: 1px solid var(--main-color);
    background: transparent;
    pointer-events: none;
    z-index: 9998;
    transform-origin: center;
    will-change: transform;
    transition:
        width  .22s cubic-bezier(.35,2.04,.59,.85),
        height .22s cubic-bezier(.35,2.04,.59,.85),
        border-color .18s ease,
        transform  .28s cubic-bezier(.35,2.04,.59,.85);
}

body.hovered #cursor-dot {
    width: 1.2vw; height: 1.2vw;
    background: var(--blue);
    transform: translate(-50%, -50%);
}
body.hovered #cursor-ring {
    width: .2vw; height: .2vw;
    border-color: var(--blue);
}
body.cursor-on-footer #cursor-dot,
body.cursor-on-black-cube #cursor-dot {
    background: white;
}
body.cursor-on-footer #cursor-ring,
body.cursor-on-black-cube #cursor-ring {
    border-color: white;
}
body.hovered.cursor-on-footer #cursor-dot,
body.hovered.cursor-on-black-cube #cursor-dot {
    background: var(--blue);
}
body.hovered.cursor-on-footer #cursor-ring,
body.hovered.cursor-on-black-cube #cursor-ring {
    border-color: var(--blue);
}

.cursor-mail {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" viewBox="0 0 32 24" fill="none" stroke="white" stroke-width="3"><path d="M2 4h28c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H2c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="32,6 16,14 0,6"/></svg>') 20 16, pointer;
}
.cursor-phone {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>') 16 16, pointer;
}


/* ============================================
   CLASSES UTILITAIRES
   ============================================ */
.follow-box {
    position: fixed;
    color: var(--main-color);
    padding: 3px 10px 0px 10px;
    transform: translate(2vh, -50%);
    font-weight: 633;
    letter-spacing: 1px;
    font-size: .6vmax;
    white-space: nowrap;
    z-index: 10000;
    display: block;
    background-color: var(--second-color);
}

.weightanimation {
    font-family: 'PracticalGrotesk', sans-serif;
    font-variation-settings: "slnt" 900;
}

/* Merged: rectangles adds align-items, line-height, transition over styles.css */
.text-animation-cube {
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-variant-ligatures: none;
    line-height: 1;
    transition: all .5s ease-out;
}

/* Merged: rectangles replaces with inline-flex !important, adds align/vertical-align/height/margin-left */
.char {
    display: inline-flex !important;
    align-items: center;
    vertical-align: middle;
    line-height: 1;
    height: 1.15em;
    margin-left: 0px;
}

/* Merged: rectangles wins with height 100% !important over styles.css 80% */
.square {
    background-color: black;
    width: 100%;
    height: 100% !important;
}

.scramble { line-height: inherit; }
.flex-list { font-family: GTFlexa_mono; }
.bold { font-weight: 633; }
.in-line { display: inline-flex; }
.button-text { text-decoration: underline; display: inline-flex; word-spacing: 0; }
.margin-bottom-nav { margin-bottom: 4%; }

/* Merged: HOVER-FINAL adds display inline-block, color inherit */
.scramble-rotate {
    font-family: GTFlexa_mono;
    display: inline-block;
    color: inherit;
}


/* ============================================
   LANDING / INTRO
   ============================================ */
#introContainer {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: black;
    overflow: hidden;
    pointer-events: none;
    z-index: 100000;
}

#introContainer video {
    width: 800px;
    height: 800px;
    object-fit: cover;
    display: block;
}

#text_intro {
    font-size: 2.3vmax;
    color: black;
    font-weight: 750;
    line-height: normal;
    z-index: 11000;
}

.rectangle-mask {
    background: white;
    transform-origin: bottom center;
    transform: scaleY(0);
    pointer-events: none;
    z-index: 2;
}

/* Merged: LANDING-RECTANGLES-FINAL wins with !important */
.text_intro_inside.revealed {
    animation: textRevealLanding .9s ease forwards !important;
}

.text_intro_inside.revealed *,
.text_intro_inside.revealed .landing-word-hover {
    animation: textRevealLanding .9s ease forwards !important;
}

@keyframes maskReveal {
    0%   { transform: scaleY(0); transform-origin: bottom center; }
    49%  { transform: scaleY(1); transform-origin: bottom center; }
    50%  { transform: scaleY(1); transform-origin: top center; }
    100% { transform: scaleY(0); transform-origin: top center; }
}

@keyframes textReveal {
    0%, 40% { color: black; }
    50%      { color: white; }
    100%     { color: white; }
}

/* Merged: identical in LANDING-TITRE-FINAL and LANDING-RECTANGLES-FINAL — kept once */
@keyframes textRevealLanding {
    0%, 40%   { color: black !important; }
    50%, 100% { color: white !important; }
}

#logoCanvas {
    position: fixed;
    display: block;
    opacity: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    z-index: -100;
    pointer-events: none;
}

/* === TEXTES LANDING — ÉTAT INITIAL / RÉVÉLÉ === */
/* Merged: LANDING-RECTANGLES-FINAL wins with !important */
#text_intro_up,
#text_intro_down {
    color: black !important;
}

#text_intro_up *,
#text_intro_down * {
    color: black;
}

#text_intro_up .landing-word-hover,
#text_intro_down .landing-word-hover {
    color: black;
}

#text_intro_up.revealed,
#text_intro_down.revealed {
    color: white !important;
}

#text_intro_up.revealed *,
#text_intro_down.revealed *,
.child-revealed {
    color: white;
}

#text_intro_up.revealed .landing-word-hover,
#text_intro_down.revealed .landing-word-hover {
    color: white;
}

/* === LANDING WORD HOVER — identique dans HOVER-FINAL, LANDING-TITRE, LANDING-RECTANGLES === */
.landing-word-hover {
    display: inline-block;
    padding: 0 4px;
    cursor: pointer;
    position: relative;
    background-color: transparent;
    transition: background-color 1s ease, color 1s ease;
}

/* Merged: LANDING-RECTANGLES-FINAL wins with !important on all */
.landing-word-hover.landing-hover-active {
    background-color: white !important;
    color: black !important;
    transition: background-color 0s ease, color 0s ease !important;
}


/* ============================================
   TEXTES PRÉSENTATION
   ============================================ */
#container_presentation {
    padding-top: 70%;
    padding-left: 12%;
    padding-bottom: 20%;
    width: 40%;
    display: flex;
    justify-content: space-between;
}
#text_myself { width: 70%; }
#text_alpes { margin-top: 20%; width: 70%; background-color: white; }

.info-about-me-text {
    margin-top: 100vh;
    width: 100%;
    height: 60vh;
    line-height: normal;
    display: flex;
    justify-content: space-between;
    font-weight: 900;
    font-size: 1.2vmax;
    word-spacing: -7px;
}

/* Merged: styles.css width + rectangles margin-bottom */
.info-about-me-first-part {
    width: 100%;
    margin-bottom: 1.5em;
}

.info-about-me-second-part {
    margin-bottom: 1.5em;
}

.info-about-me-second-part-flex {
    width: 40%;
    display: flex;
    align-items: end;
}

.alpes-text-alignment {
    display: flex;
    width: 40%;
    flex-direction: column;
    align-items: end;
}


/* ============================================
   ABOUT ME PRO
   ============================================ */
.container-about-me-pro {
    width: 100%;
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 15%;
    margin-bottom: 8%;
    line-height: normal;
}
.sub-container-about-me-pro-top { width: 100%; display: flex; justify-content: space-between; }
.sub-container-about-me-pro-top-left { width: 50%; display: flex; flex-direction: column; }
.sub-container-about-me-pro-top-left-text { 
    width: 100%; 
    font-size: 1.2vmax; 
    font-weight: 900; 
    word-spacing: -7px; 
}
.sub-container-about-me-pro-top-right { width: 20%; display: flex; justify-content: space-between; letter-spacing: 0; font-weight: 500; }
.sub-container-about-me-pro-top-right-left { width: 100%; display: flex; flex-direction: column; }
.sub-container-about-me-pro-top-right-right { width: 100%; display: flex; flex-direction: column; }
.sub-container-about-me-pro-bottom { width: 100%; }


.container-image-profile {
     width: 15vw;
     height: 15vw;
     position: relative; 
    }
.image-profile { 
    width: 30%; 
    height: 30%; 
    transition: all .4s ease-in-out; 
}
.image-profile:hover { 
    width: 100%; 
    height: 100%; 
}


/* ============================================
   INFO BAR TOP / BOTTOM
   ============================================ */
/* Merged: styles.css base + rectangles (!important on display, font-weight 377, font-size, letter-spacing, color) + FIXES3 (transition, will-change) */
#info-bar-top {
    display: none !important;
    position: fixed;
    padding: 3vh 2vh 0% 2vh;
    width: 100%;
    justify-content: space-between;
    font-weight: 377;
    font-size: .6vmax;
    letter-spacing: 0;
    color: white;
    transition: opacity 0.5s ease;
    z-index: 10000;
    will-change: opacity;
}

#info-bar-top.visible {
    display: flex !important;
}

#left-bar-top {
    width: 25%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.square-bar-top {
    background-color: var(--main-color);
    height: .5vw;
    width: .5vw;
}

/* Merged: rectangles + FIXES3 (transition, will-change) */
#info-bar-bottom {
    display: none !important;
    position: fixed;
    bottom: 3vh;
    left: 2vh;
    right: 2vh;
    justify-content: space-between;
    font-weight: 377;
    font-size: .6vmax;
    letter-spacing: 0;
    color: white;
    transition: opacity 0.5s ease;
    will-change: opacity;
    z-index: 2;
}

#info-bar-bottom.visible {
    display: flex !important;
}

#contact-bar-top { position: relative; }


/* ============================================
   CONTAINER BOTTOM — BARRE NAV PROJETS
   ============================================ */
/* Merged: styles.css (sticky, margin etc.) overridden by rectangles (!important) */
#container_bottom {
    position: relative !important;
    top: auto !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex;
    justify-content: space-between;
    font-size: .6vmax !important;
}

/* Merged: styles.css (opacity 0, color black) overridden by rectangles (opacity 1 !important, color var(--main-color)) */
#nav {
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    font-weight: 633;
    color: var(--main-color);
    opacity: 1 !important;
}

.nav_container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Merged: rectangles wins with height auto !important, adds flex: 1 */
#nav-justify-content-column {
    height: auto !important;
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

/* Merged: rectangles adds flex: 1 */
#nav-justify-content-column_right {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#nav_first, #nav_second, #nav_third { width: 25%; }

/* Merged: styles.css + rectangles (flex, display flex, align-items) + FIXES3 (line-height 135%, vertical-align) */
.nav_text_animated {
    flex: 1;
    display: flex;
    align-items: center;
    letter-spacing: 0.05em;
    transition: letter-spacing .3s ease-out;
    line-height: 135%;
    vertical-align: baseline;
    color: white;
}

.nav_text_animated:hover {
    letter-spacing: 0.10em;
    font-weight: 900;
    overflow: visible;
    white-space: nowrap;
    color: blue;
}

.nav_text_animated-2 {
    letter-spacing: 0.05em;
    transition: letter-spacing .3s ease-out;
    color: white;
}
.nav_text_animated-2:hover {
    letter-spacing: 0.10em;
    font-weight: 900;
    overflow: visible;
    white-space: nowrap;
    color: blue;
}

.nav_text_animated-project {
    letter-spacing: 0.05em;
    transition: all .3s ease-out;
    font-weight: 633;
    color: black;
}
.nav_text_animated-project:hover {
    letter-spacing: 0.10em;
    font-weight: 900;
    overflow: visible;
    white-space: nowrap;
    color: blue;
}

.blue-animation { color: var(--main-color); font-weight: 377; transition: all .3s ease-out; }
.blue-animation:hover { color: blue !important; font-weight: 900; }

/* Merged: styles.css (opacity 0, letter-spacing 0.1em) overridden by rectangles (opacity 1 !important, letter-spacing 0.05em) */
#info {
    position: sticky;
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    letter-spacing: 0.05em;
    font-weight: 633;
    box-sizing: border-box;
    opacity: 1 !important;
}

/* Merged: styles.css (width 60%) overridden by LANDING-TITRE-FINAL (font-size 1.5vmax, font-weight 700, etc.) */
#title_project {
    font-size: 1.5vmax;
    font-weight: 700;
    color: black;
    text-transform: uppercase;
    display: inline-flex;
    flex: 2;
    justify-content: center;
    flex-direction: column;
}

#title_project .char {
    display: inline-flex;
    position: relative;
    overflow: hidden;
    min-width: 0.5ch;
}

#title_project .square {
    background-color: black;
    will-change: transform;
}

#title_project-image {
    font-size: 1.4rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Merged: styles.css (flex 1 1 auto, font-size) + rectangles (align-items stretch, color black, flex: 1) */
#info_project {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    font-size: .6vmax;
    color: black;
}

/* Merged: styles.css + rectangles (flex: 1, space-evenly, color black) */
.type_project,
.soft_project {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    color: black;
    position: relative;
}

.type_project > span,
.soft_project > span {
    flex: 1;
    display: flex;
    align-items: center;
}

/* Merged: rectangles adds flex: 0 0 auto, padding-top 1vh */
.line-overline {
    flex: 0 0 auto;
    padding-top: 1vh;
    width: 0%;
    transition: width 0.2s ease-out;
    border-top: 1px solid black;
}

.line-underline {
    position: absolute;
    bottom: -3px;
    left: 0;
    height: 1px;
    background-color: black;
    width: 0%;
    transition: width 0.2s ease-out;
}

.line-animation-intro { position: relative; }

#view_project {
    display: none;
    flex: 1 1 auto;
    align-content: flex-end;
    align-items: flex-end;
    margin: 1%;
    flex-direction: column;
    justify-content: space-between;
}


/* ============================================
   VIDÉOS PROJETS (ancienne section)
   ============================================ */
.video_size_vertical { width: 100%; }
.video_size { width: 70%; }
.video-square { aspect-ratio: 1/1; overflow: hidden; }
.vertical_format { aspect-ratio: 4/5; }
.video-square iframe { object-fit: cover; }

#space { width: 100%; height: 10vh; }
#container_total { padding: 3vh 2vh 0 2vh; }

.video-project_type01 { width: 100%; margin-top: 15%; display: flex; }
.video-project { margin-bottom: 5%; }
#videoproject_1 { margin-top: 50%; margin-bottom: 10%; }
.video-project_motiontober { width: 100%; margin-top: 15%; }
.container_motiontober_video { width: 33.3%; }
.container_motiontober_video_2 { margin-top: 15%; }
.container_motiontober_video_3 { margin-top: 30%; }


/* ============================================
   MOBILE / ÉLÉMENTS CACHÉS
   ============================================ */
#container_1 { width: 100%; display: flex; justify-content: space-between; }
#container_left {
    width: 73%;
    display: none;
    flex-direction: column;
    position: relative;
    padding-top: 100vh;
}
#container_right { position: fixed; right: 2%; width: 24%; height: 20vh; }
#videoproject_4 { display: flex; justify-content: center; }
#iframevideoproject_4 { width: 60%; }
#videoproject_5 { display: flex; justify-content: center; }

#info-mobile,
#mobile-project-info,
#mobile-container-top-nav,
#space-bar-mobile-top,
#nav-mobile,
#logo-white-wrapper-mobile,
#logo-above-mobile,
#name-white-wrapper-mobile,
#name-mobile-above,
#container-footer-mobile { display: none; }

#award_part { display: flex; }
#award_part_left { display: flex; flex-direction: column; align-items: flex-end; }
#award_image { width: 1%; }

.container { width: 70.1%; display: flex; justify-content: space-between; padding: 0 0%; }
.position_top { padding-top: 5%; position: relative; }
.bloc_line_info_general { width: 98%; padding-left: 0; position: absolute; }
.top_bloc_general { flex-direction: row-reverse; height: 22vh; }
.top_bloc_right_general { margin-right: 30vh; }
.mid_bloc_general { width: 100%; }
.bottom_bloc_general { top: calc(13vh + 1.5px); left: calc(100% - 1.5px); width: 0; }
.text_top_menu_general,
.text_mid_menu_general { position: absolute; font-family: sans-serif; white-space: nowrap; line-height: 1; }
.text_top_left_general,
.text_top_right_general { top: 22vh; left: calc(100% - 1vh); transform: translateX(-100%) translateY(-100%); }
.text_top_right_end_general { top: 22vh; left: calc(100% - 29vh); transform: translateY(-100%); }
.text_mid_center_general { top: 1vh; font-size: 1.3vmax; }
.text_mid_right_general { top: 1vh; left: 70%; transform: translateX(-100%); }

.container_text_info_project { display: flex; line-height: normal; }
.container_style_text_info_1 { padding-left: 78%; width: 18%; padding-bottom: 3%; }
.container_style_text_info_2 { padding-left: 59%; width: 41%; padding-bottom: 8%; }
.text_info_project_left { background-color: white; border-left: 1px solid black; }
.style_text_info_left_2 { width: 40%; padding-left: 1%; }
.style_text_info_right_1 { width: 100%; }
.style_text_info_right_2 { padding-left: 5%; width: 45%; }


/* ============================================
   TRANSITION FOOTER
   ============================================ */
#transition-footer-container {
    width: 102.1%;
    display: flex;
    flex-direction: column;
}

.transition-footer-container {
    width: 102.2%;
    margin-left: -1.1%;
    display: flex;
    flex-direction: column;
}

.container-line-transition {
    display: flex;
    width: 100%;
}

/* Merged: rectangles wins over styles.css (transparent bg, flex, aspect-ratio, 4vw, z-index) */
.cube-transition {
    flex: 1;
    aspect-ratio: 1/1;
    background-color: transparent;
    position: relative;
    --black-opacity: 0;
    z-index: -102;
    width: 4vw;
    height: 4vw;
}

.cube-transition::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: black;
    opacity: var(--black-opacity);
    transition: opacity 0s ease;
}

.cube-transition[data-black="true"]::before { display: block; }
.cube-transition:not([data-black="true"])::before { display: none; }


/* ============================================
   FOOTER
   ============================================ */
#container-footer {
    background-color: black;
    color: white;
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: -102;
}

#footer-top-part { width: auto; height: 80%; display: flex; justify-content: space-between; padding: 3vh 2vh 0 2vh; }
#footer-left-part-top { display: flex; flex-direction: column; }
#footer-content-space { padding-bottom: 5%; }
#footer-time { display: inline-flex; }
#container-footer-time-info { display: inline-flex; align-items: center; }
#footer-time-badge { margin-left: .2vw; width: 12px; height: 12px; background-color: red; }
#footer-date-link { padding-left: 6%; }
#footer-link-social { padding-left: 6%; display: flex; flex-direction: column; height: 70%; }
#mailtocopy { display: inline-flex; }
#phonetocopy { display: inline-flex; }
#footer-right-part { width: 50%; height: 80%; display: flex; flex-direction: column; justify-content: space-between; padding: 2%; }
#footer-right-part-top { display: flex; align-items: start; justify-content: flex-end; }
#name-desktop-footer { width: 40%; }
#container-footer-right-part-name { padding-top: 3%; display: flex; width: 100%; flex-direction: row; justify-content: space-between; }
#footer-work-field { width: 40%; }
#footer-typography-one { width: 25%; }

#container-footer-bottom {
    display: flex;
    justify-content: space-between;
    width: auto;
    padding-bottom: 3vh;
    padding-left: 2vh;
    padding-right: 2vh;
}

#container-footer-separation-bottom {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    bottom: 0;
}

/* Merged: styles.css (width 30%) + FIXES3 (adds align-items: baseline) */
#container-footer-separation-bottom-right {
    display: flex;
    width: 30%;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    bottom: 0;
}

#footer-version { flex: 1; }
#footer-date-link-top { flex: 3; }
#footer-update { flex: 1; }

/* Merged: styles.css (flex: 1) + FIXES3 (display flex, align-items baseline) */
#footer-homemade {
    flex: 1;
    display: flex;
    align-items: baseline;
}

#footer-copyright { flex: 1; text-align: end; }

.square-footer {
    background-color: white;
    height: .35vw;
    width: .35vw;
    border: none;
    outline: none;
    display: inline-flex;
    margin-right: 1vw;
}

#footer-text-toggle {
    background: black;
    border: none;
    cursor: pointer;
    font-size: .7vmax;
}

#footer-text-container {
    font-family: GTFlexa_mono_light;
    font-size: .5vmax;
    position: absolute;
    transform: translateY(50%);
    line-height: 135%;
    bottom: 50%;
    right: 2%;
    max-width: 80%;
    display: inline-block;
    padding: 20px;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    overflow-y: auto;
}


/* ============================================
   TIMER POPUP
   ============================================ */
#time-spent-popup {
    position: absolute;
    top: 100%;
    right: 0;
    width: 15vw;
    margin-top: 0.5vh;
    color: black;
    background-color: white;
    padding: 1vh 1.5vh;
    font-size: 0.7vmax;
    font-weight: 400;
    z-index: 1000;
    white-space: normal;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.time-popup-hidden { opacity: 0; transform: translateY(-5px); pointer-events: none; }
.time-popup-visible { opacity: 1; transform: translateY(0); }
.time-popup-content { display: flex; flex-direction: column; gap: 0.5vh; }
.time-popup-line { line-height: 1.4; }
#time-info-icon:hover { opacity: 1 !important; }


/* ============================================
   WORD HOVER
   ============================================ */
/* Merged: rectangles + HOVER-FINAL (adds position, background-color, transition !important) */
.word-hover {
    display: inline-block;
    padding: 0 4px;
    cursor: pointer;
    position: relative;
    background-color: transparent;
    transition: background-color 1s ease, color 1s ease !important;
}

[data-hover-mode="fade"] .word-hover {
    transition: background-color 1s ease, color 1s ease;
}

/* Merged: HOVER-FINAL adds !important */
[data-hover-mode="instant"] .word-hover.word-hovered {
    background-color: black !important;
    color: white !important;
}

/* Merged: HOVER-FINAL adds !important */
[data-hover-mode="fade"] .word-hover.word-hover-active {
    background-color: black !important;
    color: white !important;
    transition: background-color 0s ease, color 0s ease !important;
}

.scroll-reveal-grey { color: rgb(235, 235, 235) !important; }
.scroll-reveal-black { color: black !important; }


/* ============================================
   RECTANGLE REVEAL
   ============================================ */
.rectangle-reveal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}


/* ============================================
   SECTION SERVICES
   ============================================ */
#services-section { padding-top: .5%; text-align: center; background-color: white; z-index: 1;}
#services-title { font-size: 2vmax; font-weight: 900; margin-bottom: 1.5%; color: black; }
#services-list { display: flex; flex-direction: column; align-items: center; margin-bottom: 1%; }
.text-list-service { font-size: .8vmax; }

.service-item {
    display: flex;
    width: 20%;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 10px 30px;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 500;
    color: #999;
    transition: all 0.3s ease;
    position: relative;
}

.service-cube {
    width: 12px;
    height: 12px;
    background-color: #999;
    transition: all 0.3s ease;
    transform: rotate(0deg);
}

.service-item:hover,
.service-item.active {
    background-color: black;
    color: white;
    padding: 10px 50px;
    font-weight: 900;
    letter-spacing: .1em;
}

.service-item:hover .service-cube,
.service-item.active .service-cube {
    background-color: white;
    transform: rotate(360deg);
}

#services-visual { width: 100%; height: 65vh; margin: 0 auto; overflow: hidden; position: relative; }

.service-visual-item {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.service-visual-item.active {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    font-size: 3rem;
    font-weight: 633;
    color: #ddd;
}


/* ============================================
   ANIMATIONS TEXTE (SCRAMBLE)
   ============================================ */
.scramble-word { display: inline-block; position: relative; cursor: pointer; }
.scramble-text { display: inline-block; position: relative; cursor: pointer; }


/* ============================================
   PROJETS UI — RECTANGLES FIXES
   ============================================ */
#projects-ui {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
}

#black-rectangle {
    position: fixed;
    left: 2vh;
    right: 2vh;
    width: auto;
    bottom: 0;
    background: var(--second-color);
    z-index: 100;
    pointer-events: auto;
    display: flex;
    justify-content: space-between;
}

#black-rectangle::after {
    content: '';
    position: absolute;
    bottom: -3vh;
    left: 0;
    right: 0;
    height: 3vh;
    background: var(--second-color);
    z-index: -1;
}


/* ============================================
   GREY RECTANGLE
   ============================================ */
/* Merged: rectangles (base) + horizontal-projects (clip-path, overflow visible !important) */
#grey-rectangle {
    position: fixed;
    left: 2vh;
    width: 96vw;
    height: 100vh;
    top: 100vh;
    z-index: 99;
    pointer-events: auto;
    clip-path: inset(0);
    overflow: visible !important;
}

.grey-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#grey-rectangle .grey-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    position: relative;
}

/* Merged: rectangles (display flex, gap, overflow) — overridden by horizontal (display none !important) */
#grey-text-container {
    display: none !important;
}

.grey-text-section { flex: 1; display: flex; flex-direction: column; gap: 0.8rem; }
.grey-section-content { font-size: 1vmax; font-weight: 500; width: 44%; margin: 0; }
.grey-section-list { display: flex; flex-direction: column; gap: 0.3rem; }

.list-item {
    font-size: 0.75rem;
    line-height: 1.4;
    padding-left: 0.5rem;
    position: relative;
}

.list-item::before { content: "→"; position: absolute; left: 0; }

/* Merged: rectangles + horizontal (!important overrides on position, height, margin-top, background, overflow) */
#grey-video-container {
    position: relative !important;
    flex: 1;
    min-height: 0;
    width: 100% !important;
    height: 0 !important;
    margin-top: 0 !important;
    background: transparent;
    overflow: visible !important;
}


/* ============================================
   BALISES DE CONTRÔLE
   ============================================ */
.io-start,
.io-grey-start,
.io-end {
    position: absolute;
    width: 1px;
    height: 1px;
    pointer-events: none;
    visibility: hidden;
}

.io-grey-start { top: 100vh; }
#projects-spacer { width: 100%; }


/* ============================================
   VIDÉOS CONTAINERS (ancienne interface)
   ============================================ */
.project-video-container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    gap: 1%;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.project-video-container.active { display: flex; opacity: 1; }

.grey-video-single { height: 100%; width: auto; }
.grey-video-item { height: 100%; width: auto; }

.video-format-horizontal lite-vimeo { aspect-ratio: 16/9; height: 100%; width: auto; max-width: 100%; }
.video-format-vertical lite-vimeo { aspect-ratio: 9/16; height: 100%; width: auto; }
.video-format-square lite-vimeo { aspect-ratio: 1/1; height: 100%; width: auto; }

.video-format-vertical-triple { gap: 3%; }
.video-format-vertical-triple lite-vimeo { aspect-ratio: 4/5; height: 100%; width: auto; flex: 0 0 auto; }

.video-format-vertical-quintuple { gap: 0.8%; }
.video-format-vertical-quintuple lite-vimeo { aspect-ratio: 4/5; height: 60%; width: auto; flex: 0 0 auto; }


/* ============================================
   SCROLL HORIZONTAL — PROJETS
   ============================================ */
#h-project-presentation {
    position: absolute;
    top: 3vh;
    z-index: 10;
    pointer-events: none;
    font-size: 1vmax;
    font-weight: 500;
    line-height: 1.2;
    width: 36%;
    color: #222;
    margin: 0;
}

#grey-video-track {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 100%;
    will-change: transform;
}

#grey-video-track .project-video-container {
    flex: 0 0 auto;
    min-width: 100vw;
    width: auto;
    height: 100%;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: flex !important;
    opacity: 1 !important;
    transform: none !important;
    background: transparent;
    box-sizing: border-box;
    padding: 0;
}

#grey-video-track .video-format-vertical-quintuple {
    min-width: 160vw;
}

.h-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0;
}

.h-card-videos {
    flex: 0 0 65%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1.2%;
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    padding: 0 3vw;
    overflow: hidden;
}

.video-format-vertical-quintuple .h-card-videos {
    width: 160vw;
    max-width: 160vw;
    gap: 0.8%;
}

.h-card-videos lite-vimeo,
.h-card-videos .grey-video-single {
    height: 100%;
    width: auto;
    flex: 0 0 auto;
}

.video-format-horizontal .h-card-videos lite-vimeo,
.h-card-videos .grey-video-single {
    aspect-ratio: 16 / 9;
}

.video-format-square .h-card-videos lite-vimeo {
    aspect-ratio: 1 / 1;
}

/* SQUARE-TRIPLE : largeur calculée en JS (sizeSquareTripleCards) */
.video-format-square-triple .h-card-videos {
    max-width: none;
    overflow: hidden;
}

.video-format-square-triple .h-card-videos lite-vimeo {
    aspect-ratio: 1 / 1;
    height: 100%;
    width: auto;
    flex: 0 0 auto;
}

.video-format-vertical-triple .h-card-videos { gap: 1.5%; }
.video-format-vertical-triple .h-card-videos lite-vimeo { aspect-ratio: 4 / 5; }

.video-format-vertical-quintuple .h-card-videos lite-vimeo {
    aspect-ratio: 4 / 5;
    height: 100%;
    width: auto;
    flex: 0 0 auto;
}

/* ── NAV SANDWICH VERTICAL ── */
#h-project-nav {
    position: absolute;
    left: 2vh;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    pointer-events: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .3vw;
    height: 12vh;
}

#h-nav-top-bar-wrap {
    width: 2px;
    position: relative;
    height: 100%;
    background: rgba(0, 0, 0, 0.15);
}

#h-nav-top-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0%;
    background: black;
    transition: height 0.06s linear, top 0.06s linear;
}

#h-nav-cubes {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.h-nav-cube {
    width: .3vw;
    height: .3vw;
    background: rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    transition: width 0.3s ease, height 0.3s ease, background 0.3s ease;
}

.h-nav-cube.active {
    width: .6vw;
    height: .6vw;
    background: #2563eb;
}

#h-nav-bot-bar-wrap {
    width: 2px;
    height: 100%;
    position: relative;
    background: rgba(37, 99, 235, 0.2);
}

#h-nav-bot-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0%;
    background: #2563eb;
    transition: height 0.08s linear;
}


/* ============================================
   ABOUT — SCROLL TEXT
   ============================================ */
.about-scroll-text {
    width: 100%;
    padding: 2vh 0;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.about-scroll-line {
    white-space: nowrap;
    font-size: .7vmax;
    font-weight: 900;
    line-height: 1.1;
    color: black;
    will-change: transform;
}

.about-scroll-line--1 {
    transform: translateX(0px);
}

/* Starts hidden to the LEFT — moves right on scroll */
.about-scroll-line--2 {
    transform: translateX(0px);
}

.asl-group {
    display: inline;
}

.asl-group--number {
    font-variant-numeric: tabular-nums;
}

.asl-sep {
    display: inline-block;
    padding: 0 8vw;
    font-weight: 377;
    opacity: 0.4;
}

#mobile_message{
    display: none;
}
/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    #grey-rectangle { height: 55vh; }
    .grey-video-container { height: 35vh; }
    .video-format-vertical-triple { flex-direction: column; gap: 1vh; }
    .video-format-vertical-triple lite-vimeo { width: 100%; height: auto; }
    #grey-text-container { flex-direction: column; gap: 1.5rem; }
    .grey-section-title { font-size: 0.8rem; }
    .grey-section-content,
    .list-item { font-size: 0.7rem; }
    #black-rectangle { bottom: 0.5vh; left: 0.5vh; right: 0.5vh; }
    #services-section { padding: 60px 20px; }
    #services-title { font-size: 2rem; }
    .service-item { font-size: 1.2rem; }
}