/* ==================== VARIABLES ==================== */
:root {
    --bottom-menu-height: 50px;
}

/* ==================== RESET & BASE ==================== */
* { 
    margin: 0; 
    padding: 0; 
}

@font-face {
    font-family: TASAOrbiter;
    src: url(./fonts/TASAOrbiterVF.woff2);
}

html, body { 
    height: auto; 
    min-height: 100%; 
}

body {
    font-family: TASAOrbiter;
    font-size: 1rem;
    overflow-x: hidden;
    padding: 10px;
}

body.overview { 
    padding: 2rem; 
    overflow: auto; 
}

main { 
    padding-bottom: 80px; 
}

/* ==================== TYPOGRAPHY ==================== */
h1 { 
    font-size: 2rem; 
    padding: 0; 
    margin: 0; 
}

h1.pageTitle {
    font-weight: 550;
    line-height: 1.2;
    font-size: clamp(1.5rem, 2.5vw + 1rem, 1.8rem);
    text-align: center;
}

h2 { 
    margin: 0; 
    padding: 0; 
    font-size: 1.3rem; 
    font-weight: 100; 
}

h3 { 
    font-weight: 100; 
}

.display-4 {
    font-size: 1rem;
    padding: 0;
}

.display-5 { 
    font-size: 1.2rem;
}

.display-6 { 
    font-size: 1rem; 
}

.display-7 {
    font-weight: 300;
    line-height: 1.2;
    font-size: clamp(1.8rem, 2.5vw + 1rem, 2.5rem);
}

.display-8 {
    text-transform: uppercase;
    font-size: 1rem;
}

.display-9 {
    font-size: 1.8rem;
    font-weight: 650;
    line-height: 1.2;
    margin-left: -60px;
}

.description {
    text-indent: 40px;
    font-size: 1.4rem;
    font-weight: 550;
    line-height: 1.2;
}

.description p {
    margin: 0;
}

/* ==================== LINKS ==================== */
a:link, a:visited {
    color: #333;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active { 
    color: #f87800; 
}

a:focus, a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

a.disable-on-mobile { 
    pointer-events: none; 
    cursor: default; 
    text-decoration: none; 
}

/* ==================== LAYOUT ==================== */
.row { 
    margin: 0;
    padding: 0;
}

.container_landing { 
    margin: 5px 10px 0 0; 
}

.o, .r, .j, .b, .g { 
    padding-left: 10px; 
}

/* ==================== NAVIGATION ==================== */
nav .display-1, 
nav .display-2, 
nav .display-3, 
nav .display-4, 
nav .display-5, 
nav .display-6 {
    text-transform: uppercase;
}

nav li { 
    list-style-type: none; 
}

nav li a:link, 
nav li a:visited { 
    color: #000; 
    text-decoration: none; 
}

nav li a:hover { 
    color: #000 !important; 
    text-decoration: underline; 
}

.navbar a { 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    font-size: 0.95rem; 
}

.navbar-toggler, 
.navbar-toggler:focus,
.navbar-toggler:active, 
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
    border: none;
    margin-top: -18px;
}

.navbar-brand { 
    margin: 0; 
}

.navbar, .card, .card img, .modal-content, .btn, .card-img-overlay { 
    border-radius: 0 !important; 
}

/* ==================== BOTTOM MENU ==================== */
.bottom-menu {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: var(--bottom-menu-height);
    background: white;
    color: #000;
    display: flex;
    align-items: center;
    z-index: 1000;
    padding-left: 20px;
    border-top: 1px #eee solid;
    pointer-events: none;
}

.bottom-menu a { 
    color: #000; 
    text-decoration: none;
    pointer-events: auto;
}

.bottom-menu a:hover, 
.bottom-menu a:active { 
    color: #f87800; 
}

.bottom-menu .display-5 { 
    display: inline; 
}

.bottom-menu ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    gap: 20px; 
}

/* ==================== DROPDOWN ==================== */
.dropdown { 
    position: static !important; 
}

.dropdown-menu {
    position: fixed;
    width: 100vw;
    background-color: white;
    border-radius: 0;
    z-index: 1050;
    text-align: left;
    padding: 30px;
    bottom: var(--bottom-menu-height);
}

.dropdown-menu a:focus,
.dropdown-menu a:focus-visible,
.dropdown-item:focus {
    outline: none !important;
    box-shadow: none !important;
}

.dropdown-menu .dropdown-item.display-4 {
    font-size: var(--bs-display3-font-size, 1.9rem);
    font-weight: var(--bs-display-font-weight, 300);
    line-height: var(--bs-display-line-height, 1.2);
}

.dropup {
    width: 100% !important;
    background: white;
    text-align: left;
}

.dropup-item {
    padding-left: 30px;
    padding-right: 30px;
    border-bottom: 0.5px solid #7680d9;
}

/* ==================== MODAL ==================== */
.modal { 
    overflow: hidden; 
}

.modal-open { 
    margin: 0; 
    padding: 0; 
}

.modal-header { 
    height: 10px; 
    padding: 15px;
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
    margin: 0 !important;
    padding: 0.5rem !important;
    border: none !important;
    box-shadow: none !important;
}

.modal-body, 
.container-fluid, 
.col-md-10.lightbox-100vh,
.carousel-item { 
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-body .img-fluid-modal {
    max-width: 100%;
    width: auto;
    max-height: 100%;
}

.col-md-10.lightbox-100vh { 
    border-right: 1px solid #eee; 
}

.lightbox-100vh img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    padding-bottom: 0;
}

.btn-close {
    box-sizing: content-box;
    width: 2em;
    height: 2em;
    padding: .25em;
    color: #000;
    background: transparent url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e) center/1em auto no-repeat;
    border: none;
    font-size: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    z-index: 9999;
}

.modal-close {
    z-index: 2000;
    font-size: 2rem;
    color: white;
    background: rgba(0,0,0,0.5);
    border: none;
    padding: 0.2rem 0.5rem;
    cursor: pointer;
    border-radius: 0.25rem;
}

.modal-close:hover {
    color: #f00;
}

/* ==================== CAPTIONS ==================== */
.caption { 
    font-size: 1rem; 
    padding: 5px 0 0 15px;
    text-align: right !important;
    display: inline;
}

.caption.scroll {
    max-height: 100vh;
    overflow-y: auto;
    padding: 1rem;
}

.caption-container { 
    margin-top: 1rem; 
    text-align: center; 
    max-width: 90%;
    margin-bottom: 30px;
}

.caption-scroll {
    margin: 0 !important;
    padding: 0.5rem !important;
    border: none !important;
    box-shadow: none !important;
}

.captionvideo { 
    margin-top: 1rem; 
    font-size: 0.8rem; 
    text-align: center; 
}

.caption-fix {
    position: fixed;
    bottom: 5px;
    right: 20px;
    max-height: 40vh;
    overflow-y: auto;
    padding: 0.5rem 1rem 0 0;
    z-index: 9999;
    color: #000;
    font-size: 0.9rem;
    display: none;
}

/* ==================== CAROUSEL ==================== */
.carousel-slide { 
    display: none; 
}

.carousel-slide.active { 
    display: flex; 
}

.carousel-slide .lightbox-100vh {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: calc(100vh - 120px);
    max-height: calc(100vh - 120px);
}

.carousel-slide .img-fluid {
    max-height: calc(100vh - 120px);
    max-width: 90vw;
    width: auto;
    height: auto;
    object-fit: contain;
}

.carousel-slide video {
    max-height: calc(100vh - 120px);
    max-width: 90vw;
    width: auto;
    height: auto;
    object-fit: contain;
}

.carousel-slide.text-slide {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2rem;
}

.carousel-slide.text-slide .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.carousel-slide.text-slide .col-xxl-6,
.carousel-slide.text-slide .col-lg-8,
.carousel-slide.text-slide .col-md-10 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.carousel_img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    width: auto;
    height: auto;
    margin: 0 auto;
}

.carousel-controls { 
    text-align: center; 
    margin: 20px 0; 
}

.prev-btn, 
.next-btn {
    font-size: 24px;
    background: #eee;
    border: none;
    width: 40px;
    height: 40px;
    margin: 0 10px;
    cursor: pointer;
}

.prev-btn:disabled, 
.next-btn:disabled { 
    opacity: 0.5; 
    cursor: not-allowed; 
}

.counter { 
    font-size: 18px; 
}

/* ==================== GALLERY ==================== */
.gallery { 
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 3rem;
}

.grid-item { 
    display: flex; 
    flex-direction: column; 
    text-align: center; 
}

.grid-item img { 
    max-width: 100%; 
    height: auto; 
    transition: transform 0.2s ease; 
    object-fit: contain; 
}

.thumbnail { 
    width: 100px; 
    cursor: pointer; 
    transition: transform 0.2s ease; 
}

.thumbnail:hover { 
    transform: scale(1.1); 
}

.span-2 { 
    grid-column: span 2; 
}

.span-3 { 
    grid-column: span 3; 
}

.span-3 img {
    max-height: 80vh; 
}

.span-4 { 
    grid-column: span 4;
    margin: 0 0 20px;
}

.span-4 img {
    max-height: 90vh; 
}

.span-5 {
    grid-column: 1 / span 8;
    margin: 20px 0 100px;
}

.span-5 img {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: 95vh;
    object-fit: contain;
}



.span-6 {
    grid-column: 1 / -1;

}

.span-6 img {
    width: 30%;
    margin: 200px auto;
}

.toggle-caption { 
    cursor: pointer; 
    font-size: 1.5rem; 
    display: inline-block; 
    margin-bottom: 0.5rem; 
}

/* ==================== CARD ==================== */
.hover-overlay-transition { 
    transition: all 1s ease; 
}

.card:hover .hover-overlay-transition { 
    opacity: 1 !important; 
}

/* ==================== MOBILE CAPTION OVERLAY ==================== */
.mobile-caption-overlay {
    position: absolute;
    left: 0; 
    right: 0; 
    bottom: 0;
    background: #f4f4f4;
    color: #000;
    padding: 1rem;
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.32s ease, opacity 0.32s ease;
    font-size: 0.95rem;
    line-height: 1.25;
    max-height: 60vh;
    overflow-y: auto;
}

.carousel-slide.show-caption .mobile-caption-overlay {
    transform: translateY(0);
    opacity: .8;
    pointer-events: auto;
    padding-bottom: 70px;
}

.mobile-caption-overlay h4 { 
    margin: 0 0 .3rem; 
    font-size: 1rem; 
}

.mobile-caption-overlay small, 
.mobile-caption-overlay p { 
    font-size: 0.9rem; 
}

/* ==================== VIDEO ==================== */
.video-centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70vw;
    max-width: 1280px;
}

.video-wrapper {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    overflow: hidden;
}

/* Calcul du ratio 16:9 avec limitation de hauteur */
.video-wrapper::before {
    content: "";
    display: block;
    padding-bottom: min(56.25%, 80vh * 16 / 9);
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Alternative plus simple : limiter la largeur pour contrôler la hauteur */
@media (min-width: 769px) {
    .span-5 .video-wrapper {
        max-width: 80vw;
    }
}

/* ==================== UTILITIES ==================== */
.n-5 { 
    margin-left: -5px; 
    font-style: italic; 
}

.ztop { 
    z-index: 1000; 
}

.mt-6 { 
    margin-top: 60px; 
}

table { 
    font-size: 1rem; 
}

.file {
    width: 250px;
    overflow: hidden;
    background-color: #b50000;
}

.projectTitle {
    position: absolute; 
    left: -22px;       
    top: 0;
    display: inline-block;
    transform: rotate(-90deg) translateX(-100%);
    transform-origin: left top;
    white-space: nowrap;
    height: 20px;
    font-weight: 550;
}

/* ==================== MEDIA QUERIES ==================== */
@media (min-width: 1200px) { 
    .mh { 
        max-height: 80vh; 
    } 
}

@media (max-width: 1200px) { 
    .gallery { 
        grid-template-columns: repeat(6, 1fr); 
    }

    .span-2 {
        grid-column: span 3; /* prend plus de place */
    }

    .caption-fix {
        bottom: 40px;
        left: 0;
        width: 100%;
        height: auto;
        text-align: center;
        overflow-y: auto;
        padding: 0.5rem 0;
        background-color: #fff;
        display: inline;
        border-bottom: 1px solid #eee;
        border-top: 1px solid #eee;
    }
}

@media (max-width: 991px) {
    body { 
        padding-bottom: 85px; 
    }
    
    .mobile-bottom-nav {
        position: fixed; 
        bottom: 0; 
        left: 0; 
        width: 100%;
        background: white; 
        border-top: 1px solid #e5e5e5;
        z-index: 9999; 
        padding: 10px 15px;
    }
    
    .mobile-nav-inner { 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
    }
    
    .mobile-center-items { 
        display: flex; 
        gap: 2rem; 
        margin: 0 auto; 
    }
    
    .mobile-nav-link { 
        font-size: 1rem; 
        text-decoration: none; 
        color: #000; 
    }
    
    .mobile-hamburger { 
        font-size: 1.8rem; 
        background: none; 
        border: none; 
        cursor: pointer; 
        line-height: 1; 
        padding: 0; 
    }
    
    .mobile-slide-up { 
        position: fixed; 
        bottom: -100vh; 
        left: 0; 
        width: 100%; 
        background: #fff; 
        padding: 1.5rem; 
        box-shadow: 0 -8px 30px rgba(0,0,0,0.15); 
        transition: bottom 0.35s ease-out; 
        z-index: 9998; 
        text-align: center; 
    }
    
    .mobile-slide-up ul { 
        list-style: none; 
        padding: 0; 
        margin: 0; 
    }
    
    .mobile-slide-up li { 
        padding: 1rem 0; 
    }
    
    .mobile-slide-up a { 
        font-size: 1.3rem; 
        color: #000; 
        text-decoration: none; 
    }
    
    .mobile-slide-up.show { 
        bottom: 85px; 
    }
}

@media (max-width: 768px) {
    .modal-body, 
    .container-fluid, 
    .row, 
    .col-md-10.lightbox-100vh { 
        height: auto; 
    }
    
    .col-md-10.lightbox-100vh { 
        border-right: none; 
    }
    
    .col-11.lightbox-100vh, 
    .col-1.ms-auto { 
        padding-bottom: 0; 
    }
    
    .row { 
        gap: 0; 
    }

    .gallery { 
        grid-template-columns: 1fr !important;
        margin-top: 3rem;
    }

    .gallery .grid-item {
        grid-column: auto !important;
    }
    
    .span-2,.span-3{
        margin-bottom: 20px;
    }
    .span-2, 
    .span-3, 
    .span-4,
    .span-5,
    .span-6 { 
        grid-column: 1 / -1 !important; 
    }

    .span-6 img,
    .span-4 img {
        width: 100%;
        margin: 200px auto;
    }

    .carousel-slide { 
        position: relative; 
    }
    
    .carousel-slide .caption { 
        display: none !important; 
    }
    
    .carousel-slide .lightbox-100vh, 
    .carousel-slide .lightbox-100vh img, 
    .carousel-slide .img-fluid {
        width: 100%; 
        display: block; 
        margin: 0 auto; 
        cursor: pointer; 
        object-fit: contain;
    }
    
    .carousel-control-prev, 
    .carousel-control-next { 
        display: none !important; 
    }

    .mobile-caption-overlay { 
        display: block; 
    }

    .video-centered {
        width: 100vw;
    }

    .video-wrapper {
        width: 100%;
        padding-bottom: 56.25%;
    }

    h1 { 
        font-size: 1.1rem; 
    }
    
    h2 { 
        font-size: 0.9rem; 
    }
    
    .dropup-item {
        padding-left: 15px;
        padding-right: 15px;
    }

    .projectDate {
        display: none !important;
    }
    
    .display-7 {
        font-weight: 300;
        line-height: 1.2;
        font-size: 1.4rem;
    }
    
    .projectTitle {
        position: static;
        left: auto;
        top: auto;
        
        display: block;
        transform: none;
        transform-origin: initial;
        white-space: normal;
        height: auto;
        text-align: left;
        margin-bottom: 10px;
    }
    
    .display-9 {
        font-size: 1.6rem !important;
        margin-left: -5px !important;
    text-indent: 0px;

    }

    .hide-on-mobile { 
        display: none; 
    }
    
    body.overview { 
        padding: 0.3rem; 
    }
}

@media (min-width: 768px) {
    .mobile-caption-overlay { 
        display: none !important; 
    }
    
    .carousel-slide .caption { 
        display: block !important; 
    }
}

@media (max-width: 576px) {
    .bottom-menu {
        height: 40px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .bottom-menu .display-5 {
        font-size: 1rem;
    }

    .display-4,
    .display-7 {
        font-size: 1rem;
        padding: 0;
    }

    .caption-fix {
        bottom: 40px;
        left: 0;
        width: 100%;
        height: auto;
        text-align: center;
        padding: 0.5rem 0;
        background-color: white;
        font-size: 0.7rem;
        display: inline;
        border-bottom: 1px solid #eee;
        border-top: 1px solid #eee;
    }

    .dropdown-menu .dropdown-item.display-7 { 
        font-size: calc(var(--bs-display3-font-size, 4.5rem) * 0.6); 
    }
}

.caption-fix {
  position: fixed;
  bottom: 5px;
  right: 20px;
  /* width: 40vw; */
  max-height: 40vh;
  overflow-y: auto;
  padding: 0.5rem 1rem 0 0;
  z-index: 9999;
  color: #000;
  font-size: 0.9rem;
  display: none; /* caché par défaut */
}

@media (max-width:1124px) {
        .caption-fix {
        bottom:40px;
        left:0;
        width: 100%;
        height:auto;
        text-align: center;
        overflow-y: auto;
        padding: 0.5rem 0;
        background-color: #fff;
        z-index: 9999;
        color: #000;
        font-size: 0.9rem;
        display: none; caché par défaut
        display: inline;
        border-bottom:1px solid #eee;
        border-top:1px solid #eee;
    }
}

@media (max-width: 576px) {
    /* Réduire la hauteur du menu */
    .bottom-menu {
        height: 40px;
        padding-left: 5px;
        padding-right: 5px;
    }

    /* Réduire la taille des éléments du menu */
    .bottom-menu .display-5 {
        font-size: 1rem;       /* plus petit que 1.5rem */
    }

    .display-4{font-size: 1rem;padding: 0px;}
    .display-7{font-size: 1rem;padding: 0px;}

    .caption-fix {
  /* position: absolute; */
  bottom:40px;
  left:0;
  width: 100%;
height:auto;
text-align: center;
  overflow-y: auto;
  padding: 0.5rem 0;
  background-color: white;
  z-index: 9999;
  color: #000;
  font-size: 0.7rem;
  display: none; caché par défaut
  display: inline;
  border-bottom:1px solid #eee;
  border-top:1px solid #eee;
}

}