/* --- Language Switcher --- */
#language-switcher {
    position: absolute;
    top: 0px; /* Adjusted to appear from the top */
    left: 50%;
    transform: translateX(-50%);
    z-index: 100; /* Ensure it's above other content */
    font-size: 0.9rem;
    color: #343a40;
    white-space: nowrap;
    background-color: #ffffff; /* White background */
    padding: 10px 20px; /* Padding inside the tab */
    border-bottom-left-radius: 10px; /* Rounded bottom corners */
    border-bottom-right-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: transform 0.3s ease-out; /* Smooth transition for "emerging" effect */
}

#language-switcher a {
    color: #6c757d; /* Muted color for inactive link */
    text-decoration: none;
    font-weight: normal;
    transition: color 0.3s ease;
}

#language-switcher a:hover {
    color: #E85A4F; /* Highlight on hover */
}

#language-switcher strong {
    color: #343a40; /* Darker color for active language */
    font-weight: 700;
}

/* Responsive adjustments for mobile */
@media (max-width: 992px) {
    #language-switcher {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10; /* Above the landing page, below panels */
        padding: 8px 15px;
        font-size: 0.9rem;
    }
}

#language-switcher.switcher-hidden {
    transform: translate(-50%, -80%);
}

#language-switcher.switcher-hidden:hover {
    transform: translate(-50%, 0);
}

/* --- Global Styles & Desktop Layout --- */
body, html {
    height: 100%;
    margin: 0;
    font-family: 'Lato', sans-serif;
    overflow-x: hidden; /* Empêche le défilement horizontal indésirable par défaut */
    overflow-y: auto;   /* Permet le défilement vertical par défaut sur toutes les pages */
    background-color: #ffffff;
}

html {
    font-size: 16px; /* Base font size, 1rem = 16px */
}

p {
    font-size: 1.05rem; /* Default size for paragraphs, approximately 18.4px */
    line-height: 1.6;
}

@media (min-width: 2560px) { /* Targeting 4K and higher resolutions */
    html {
        font-size: 20px; /* Increase base font size for 4K monitors, 1rem = 20px */
    }
}

/* Hide mobile landing by default (for desktop) */
#mobile-landing {
    display: none;
}

.landing-container {
    display: flex;
    height: 100vh;
    width: 100vw;
    position: relative;
}

/* Styles for the two split panels */
.split {
    width: 50%;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start; /* Aligns content to top of split */
    text-decoration: none;
    transition: width 0.8s cubic-bezier(0.77, 0, 0.175, 1);
    padding-top: 20vh;
    background-color: #ffffff; /* Ensures a white background for the split sections */
}

#techno { justify-content: flex-start; padding-left: 5vw; }
#video { justify-content: flex-end; padding-right: 5vw; }

/* Active split panel state (when clicked) */
.landing-container.left-is-active #techno, 
.landing-container.right-is-active #video { 
    width: 90%; 
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.4); /* Shadow for active panel */
    z-index: 1;
}

/* Inactive split panel state */
.landing-container.left-is-active #video, 
.landing-container.right-is-active #techno { 
    width: 10%; 
}

/* Background images within split panels */
.video-wrapper {
    position: absolute;
    inset: 0; /* Top, right, bottom, left to 0 */
    background-size: cover;
    background-position: center;
    z-index: 0;
    transform: scale(1.05); /* Slightly zoomed for initial state */
    opacity: 0.7;
    overflow: hidden;
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

#video .video-wrapper { background-image: url('images/bg_video.png'); }
#techno .video-wrapper { background-image: url('images/bg_techno.png'); }

/* Masking for background images (gradient effect) */
#techno .video-wrapper { 
    -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%); 
    mask-image: linear-gradient(to right, black 50%, transparent 100%); 
}
#video .video-wrapper { 
    -webkit-mask-image: linear-gradient(to left, black 50%, transparent 100%); 
    mask-image: linear-gradient(to left, black 50%, transparent 100%); 
}

/* Grayscale overlay with masking for hover effect */
.video-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: inherit; /* Inherits background from parent .video-wrapper */
    background-size: cover;
    background-position: center;
    filter: grayscale(100%); /* Makes the overlay grayscale */
    -webkit-mask-size: 200% 100%; /* Allows mask to move across 2x width */
    mask-size: 200% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: -webkit-mask-position 0.8s cubic-bezier(0.77, 0, 0.175, 1), mask-position 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

/* Initial mask positions for the grayscale overlay */
#techno .video-wrapper::before { 
    -webkit-mask-image: linear-gradient(to left, black 45%, transparent 55%); 
    mask-image: linear-gradient(to left, black 45%, transparent 55%); 
    -webkit-mask-position: 100% 0; /* Starts off-screen to the right */
    mask-position: 100% 0; 
}
#video .video-wrapper::before { 
    -webkit-mask-image: linear-gradient(to right, black 45%, transparent 55%); 
    mask-image: linear-image(to right, black 45%, transparent 55%); 
    -webkit-mask-position: 0% 0; /* Starts off-screen to the left */
    mask-position: 0% 0; 
}

/* Hover effects for split panels (when not active) */
.landing-container:not(.view-active) .split:hover .video-wrapper { 
    transform: scale(1.1); /* Zoom in background image */
    opacity: 1; /* Make background image fully opaque */
}
.landing-container:not(.view-active) #techno:hover .video-wrapper::before { 
    -webkit-mask-position: 0% 0; /* Move mask to reveal grayscale */
    mask-position: 0% 0; 
}
.landing-container:not(.view-active) #video:hover .video-wrapper::before { 
    -webkit-mask-position: 100% 0; /* Move mask to reveal grayscale */
    mask-position: 100% 0; 
}
.landing-container:not(.view-active) .split:hover { cursor: pointer; }

/* Overlay text (portfolio titles) */
.overlay-text {
    color: #343a40;
    z-index: 2;
    opacity: 0; /* Hidden by default */
    pointer-events: none; /* Prevents text from interfering with clicks */
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.overlay-text span {
    display: block;
    line-height: 1.1;
    text-transform: uppercase;
}
.overlay-text .title-main { font-size: 2rem; font-weight: 300; }
.overlay-text .title-sub { font-size: 5rem; font-weight: 900; }

#techno .overlay-text { text-align: left; transform: translateX(-30px); }
#video .overlay-text { text-align: right; transform: translateX(30px); }

/* Show overlay text on hover */
.split:hover .overlay-text { 
    opacity: 1; 
    transform: translateX(0); /* Slide in text */
}

/* Hide overlay text when a view is active */
.landing-container.view-active .overlay-text { opacity: 0; }

/* Central text container (David Guillemette name & title) */
.center-text-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Hide central text when a view is active */
.landing-container.view-active .center-text-container { 
    opacity: 0; 
    pointer-events: none; /* Make it unclickable when hidden */
}

.center-text-link {
    display: inline-block;
    padding: 10px 40px;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid #ddd;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 5px;
    transition: all 0.3s ease;
}
.center-text-link:hover {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.central-logo {
    max-width: 400px;
    height: 150px;
    display: block;
    margin: 0 auto;
}

.keyboard-icons-container {
    margin-top: 0px; /* Adjust spacing from the logo */
    display: flex;
    justify-content: center;
    gap: 8px; /* Space between icons */
}

.keyboard-icons-container i {
    font-size: 1rem; /* Make icons smaller */
    color: #6c757d; /* Use a grey color, common for muted text in Bootstrap */
    /* Removed opacity and transition as per feedback (no hover effect) */
}
/* Removed .keyboard-icons-container i:hover block as per feedback (no hover effect) */

/* Portfolio Content within split panels */
.portfolio-content {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    opacity: 0;
    /* Règle de base pour la transition (s'applique à la fermeture) :
       Fade-out rapide de 0.4s SANS délai. */
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* Règle pour l'état ACTIF (s'applique à l'ouverture) */
.landing-container.left-is-active #techno .portfolio-content,
.landing-container.right-is-active #video .portfolio-content { 
    opacity: 1; 
    pointer-events: auto;
    /* On ajoute un délai à la transition UNIQUEMENT pour l'ouverture,
       pour laisser le temps au panneau de s'agrandir. */
    transition-delay: 0.4s;
}

/* Les styles d'alignement restent séparés pour la propreté */
.landing-container.left-is-active #techno .portfolio-content { 
    align-items: flex-start;
}
.landing-container.right-is-active #video .portfolio-content { 
    padding: 0;
    align-items: flex-start; 
}

.portfolio-grid {
    display: flex;
    gap: 3rem;
    width: 100%;
}

.project-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1; /* Each column takes equal space */
}
.project-column h4 {
    color: #343a40;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.2);
    font-weight: bold;
}

.thumbnail {
    background-color: rgba(0,0,0,0.05);
    backdrop-filter: blur(10px); /* Frosted glass effect */
    padding: 0.75rem;
    border-radius: 5px;
    color: #343a40;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: background-color 0.3s ease;
    cursor: pointer;
}
.thumbnail:hover { background-color: rgba(0,0,0,0.1); }
.thumbnail img {
    width: 120px;
    height: 70px;
    object-fit: cover;
    border-radius: 3px;
}

/* Back arrow button */
.back-arrow {
    position: absolute;
    top: 2rem;
    z-index: 5; /* Above portfolio content */
    font-size: 2.5rem;
    text-decoration: none;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
#techno .back-arrow { right: 2rem; color: #343a40; }
#video .back-arrow { left: 2rem; color: #ffffff; }

/* Show back arrow when a split is active */
.landing-container.left-is-active #techno .back-arrow, 
.landing-container.right-is-active #video .back-arrow { 
    opacity: 1; 
    pointer-events: auto; 
}
.back-arrow:hover { transform: scale(1.1); }

/* Hide video wrapper when active (to show content) */
.landing-container.left-is-active #techno .video-wrapper,
.landing-container.right-is-active #video .video-wrapper { 
    opacity: 0; 
}

/* Scrollable content area within active split */
.scrollable-content { 
    width: 100%; 
    height: 100%; 
    overflow-y: auto; /* Enable vertical scrolling */
}
.landing-container.left-is-active #techno .scrollable-content,
.landing-container.right-is-active #video .scrollable-content { 
    padding: 0; 
    background-image: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%); 
}

/* Overall page overlay for subtle texture/shadow */
.landing-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.1) 80%, rgba(0,0,0,0.2) 100%);
    pointer-events: none;
    z-index: 5;
}

/* --- Contact Section --- */
#contact-section {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90vh; /* Takes most of the viewport height */
    background-color: #f8f9fa;
    z-index: 20; /* High z-index to overlay other content */
    transform: translateY(100%); /* Hidden below viewport */
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
    display: flex; /* For centering content */
    align-items: center;
    justify-content: center;
    padding: 2rem;
    overflow-y: auto; /* Enable scrolling for contact content if needed */
}

/* Show contact section when active */
.landing-container.contact-is-active #contact-section { transform: translateY(0); }

/* Back arrow for contact section */
#contact-section .back-arrow {
    position: absolute;
    top: 2rem;
    right: 2rem;
    color: #343a40;
    opacity: 1; /* Always visible when section is active */
    pointer-events: auto;
}

.portrait {
    width: 12.5rem; 
    height: 12.5rem;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1.5rem;
    border: 0.3125rem solid white; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Contact form styles */
#contact-form .form-control {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
}

#success-message {
    border: 1px solid #198754;
    background-color: #d1e7dd;
    color: #0f5132;
}

/* --- Contact Footer inside Contact Section --- */
/* Styles communs pour le footer */
.contact-footer {
    text-align: center;
    padding: 1rem 0;
    font-size: 0.8rem;
    color: #6c757d;
    z-index: 2;
}

/* Styles pour la version BUREAU */
@media (min-width: 993px) {
    .contact-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #f8f9fa; /* On s'assure qu'il a le bon fond */
    }
    
    /* On ajoute un padding en bas de la section contact pour ne pas que le footer cache le formulaire */
    #contact-section .container-fluid {
        padding-bottom: 5rem; /* Espace pour le footer */
    }
}

/* Styles pour la version MOBILE */
@media (max-width: 992px) {
    #contact-section .contact-footer {
        background-color: transparent; /* Sur mobile, il est dans le flux, pas besoin de fond */
        padding-top: 2rem; /* Un peu plus d'espace au-dessus sur mobile */
    }
}

.contact-footer p {
    margin: 0px;
    font-size: 0.8rem; /* Explicitly setting font size for paragraphs within contact-footer */
}
/* --- Lightbox Styles --- */
body.lightbox-open { overflow: hidden; } /* Prevents body scroll when lightbox is open */

#lightbox-container {
    position: fixed;
    inset: 0; /* Occupies full viewport */
    z-index: 1060; /* Above Bootstrap modals (1050) */
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none; /* Unclickable when hidden */
    transition: opacity 0.4s ease;
}

#lightbox-container.is-visible { 
    opacity: 1; 
    pointer-events: auto; 
}

#lightbox-content {
    background-color: #fff;
    color: #343a40;
    padding: 0;
    border-radius: 8px;
    width: 90%;
    max-width: 1140px;
    max-height: 90vh;
    overflow-y: auto; /* Enable scrolling within lightbox content */
    transform: scale(0.95); /* Slightly scaled down when hidden */
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.2s ease;
}

/* Fade transition classes for lightbox content */
#lightbox-content.fading-out {
    opacity: 0;
    transition: opacity 0.2s ease;
}

#lightbox-content.fading-in {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.project-info-container { padding: 0; }

#lightbox-container.is-visible #lightbox-content { transform: scale(1); } /* Scale up when visible */

#lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 1.5rem;
    cursor: pointer;
    filter: invert(1) grayscale(100%) brightness(200%); /* White 'x' icon */
}

.project-hero {
    position: relative;
    height: 35vh; /* Adjusted height */
    min-height: 250px; /* Adjusted min-height */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    overflow: hidden;
}

.project-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1)); /* Dark gradient */
    z-index: 1;
}

/* The .project-title-block is now styled via Bootstrap classes in the HTML */
/* .project-hero-content class and its styles have been removed */

.project-details {
    /* Padding is handled by Bootstrap classes in HTML (p-4 p-lg-5) */
}


/* Responsive video container for iframes */
.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}

.embed-responsive.embed-responsive-16by9 {
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.embed-responsive-item {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    border: 0;
}

.modal-video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio (height / width * 100) */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
}
.modal-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Lightbox carousel controls */
#lightbox-container .carousel-control-prev, 
#lightbox-container .carousel-control-next {
    width: 3rem;
    height: 3rem;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}
#lightbox-container .carousel-control-prev { left: 1rem; }
#lightbox-container .carousel-control-next { right: 1rem; }
#lightbox-container .carousel-control-prev:hover, 
#lightbox-container .carousel-control-next:hover { opacity: 1; }

#lightbox-container .carousel-control-prev-icon, 
#lightbox-container .carousel-control-next-icon { 
    width: 1.5rem; 
    height: 1.5rem; 
}

/* --- Technopedagogy Section Specific Styles --- */
.techno-creative-container-v2 {
    width: 100%;
    color: #343a40;
}

.techno-hero-section {
    position: relative;
    height: 60vh;
    color: #ffffff;
    background-image: url('images/generique/techno-hero.png');
    background-size: cover;
    background-position: right center;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.techno-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to left, rgba(0,0,0,0) 00%, rgba(0,0,0,0.7) 60%);
}

/* Le contenu du hero est maintenant centré et plus large */
.techno-hero-section .hero-text-content {
    max-width: 55%;
}

.techno-content-wrapper {
    padding: 4rem;
}

.techno-intro-story {
    padding: 2rem 0;
}

.techno-advantage {
    padding: 2rem 0;
}

.advantage-icon {
    font-size: 2.5rem;
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1.5rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(232, 90, 79, 0.1);
    color: #E85A4F;
}

/* Styles pour les piliers (légèrement ajustés pour le contexte) */
.pillar-card {
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; /* Assure que les cartes ont la même hauteur */
}
.pillar-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

.pillar-header {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #fff;
}
.pillar-header i { font-size: 1.5rem; }
.pillar-header h3 { margin: 0; font-size: 1.5rem; font-weight: 700; }

#pillar-lms .pillar-header { background: linear-gradient(135deg, #495057, #212529); }
#pillar-module .pillar-header { background: linear-gradient(135deg, #E85A4F, #C8A882); }

.pillar-body { 
    padding: 1.5rem; 
    flex-grow: 1;
}
.pillar-desc { min-height: 90px; } /* Ajusté pour le nouveau texte */

.tech-stack-title, .showcase-title {
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    color: #6c757d;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

.superpowers-list {
    list-style: none;
    padding: 0;
    margin-bottom: 1.5rem; /* Ajout d'une marge en bas */
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.superpowers-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.superpowers-list i {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(232, 90, 79, 0.1);
    color: #E85A4F;
}

#pillar-lms .superpowers-list i {
    background-color: rgba(52, 58, 64, 0.1); /* Gris Bootstrap 700, 10% opacité */
    color: #157347; /* Couleur du texte sombre */
}

#pillar-module .superpowers-list i {
    background-color: rgba(232, 90, 79, 0.1);
    color: #E85A4F;
}
.superpowers-list div strong { 
    display: block; 
    font-weight: 700; 
}
.superpowers-list div span { 
    font-size: 0.9rem; 
    color: #6c757d; 
}

.project-thumb {
    display: flex;
    gap: 1rem;
    align-items: center;
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid #e9ecef;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    background-color: #ffffff; 
    border: 1px solid #dee2e6; 
}
.project-thumb:hover {
    transform: translateY(-5px); 
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    border-color: #E85A4F; 
}
.project-thumb img {
    width: 140px; /* Légèrement plus large */
    height: 80px; /* Légèrement plus haut */
    object-fit: cover;
    border-radius: 0.5rem; /* Arrondis un peu plus doux */
    flex-shrink: 0;
}
.project-thumb-info h6 { 
    margin-bottom: 0.25rem; 
    font-weight: bold; 
}
.project-thumb .stretched-link {
    color: #E85A4F;
    font-weight: bold;
    text-decoration: none;
    font-size: 0.9rem;
}
.project-thumb:hover .stretched-link i { transform: translateX(5px); }




/* --- Video Section Specific Styles --- */
.video-creative-container {
    width: 100%;
}

.video-hero-section {
    position: relative;
    height: 60vh;
    color: #ffffff;
    background-image: url('images/generique/david-guillemette-tournage-espagne-documentaire.jpg');
    background-size: cover;
    background-position: left center;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.video-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right, rgba(0,0,0,0) 20%, rgba(0,0,0,0.7) 55%);
}

.hero-text-content {
    position: relative;
    z-index: 2;
    max-width: 50%;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
    padding: 2rem 5%;
}

.video-content-wrapper {
    padding: 4rem;
}

.category-description {
    font-style: italic;
    color: #6c757d;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    padding-left: 1rem;
    border-left: 2px solid #E85A4F;
}

.video-services-section { padding: 0rem 0; }

.video-section-title {
    margin-top: 5rem;
}

/* Nouveaux styles pour les boutons de features */
.video-features-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 3rem; /* Increased spacing above buttons */
    margin-bottom: 3rem; /* Added spacing below buttons */
}

.offers-wrapper {
    display: flex;
    align-items: center; /* Vertically align items */
    justify-content: center; /* Center content horizontally */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    gap: 1rem; /* Space between title and buttons */
    margin-bottom: 2rem; /* Add some space below the whole section */
}

.offers-title {
    font-weight: bold;
    font-size: 1.1rem; /* Adjust as needed for visual balance */
    color: #343a40; /* Match existing text color */
    white-space: nowrap; /* Prevent title from wrapping */
    margin: 0; /* Remove default paragraph margin */
    line-height: normal; /* Ensure consistent line height */
}

.offers-title {
    font-weight: bold;
    font-size: 1.2rem; /* Adjusted for better visual balance */
    color: #343a40; /* Match existing text color */
    white-space: nowrap; /* Prevent title from wrapping */
    margin: 0; /* Remove default paragraph margin */
    line-height: normal; /* Ensure consistent line height */
    transform: translateY(2px); /* Nudge down for better vertical alignment */
}

.feature-button {
    padding: 0.75rem 1.5rem;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6; /* Revert border to original */
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    color: #495057;
    text-align: center;
    min-width: 140px;
}

.feature-button:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.feature-button.active {
    background-color: #343a40;
    color: #ffffff;
    border-color: #343a40;
    box-shadow: 0 4px 12px rgba(52, 58, 64, 0.3);
}

/* Nouvelle grille pour image + contenu */
.video-services-new-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 3rem;
    align-items: center;
}

.video-service-image {
    background-color: #f8f9fa;
    border-radius: 1rem;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    border: 1px solid #e9ecef;
}

.video-service-image img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    transition: opacity 0.4s ease; /* Add transition for image opacity */
}

.video-service-content {
    padding: 2rem;
    position: relative; 
    /* min-height et overflow sont enlevés */
}

.service-tagline {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #6c757d;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.service-detail-content {
    /* position: absolute et les styles associés sont enlevés */
    display: none; /* Caché par défaut */
    /* Les styles de transition sont conservés pour l'animation */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.service-detail-content.active {
    display: block; /* Affiche l'élément et lui permet de définir la hauteur */
    opacity: 1;
    transform: translateY(0);
    /* Les autres styles restent pour l'animation */
}

.service-detail-content h4 {
    color: #343a40;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.service-detail-content p {
    color: #6c757d;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.service-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.service-buttons .btn {
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.service-buttons .btn-dark {
    background-color: #E85A4F;
    border-color: #E85A4F;
}

.service-buttons .btn-dark:hover {
    background-color: #b5c8b7;
    border-color: #b5c8b7;
    color: #343a40;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(181, 200, 183, 0.3);
}

.service-buttons .btn-outline-dark {
    color: #E85A4F;
    border-color: #E85A4F;
}

.service-buttons .btn-outline-dark:hover {
    background-color: #b5c8b7;
    border-color: #b5c8b7;
    color: #343a40;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(181, 200, 183, 0.3);
}

/* --- CTA Section Styles --- */
.cta-section {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 1rem;
    padding: 3rem 2rem;
    margin-top: 3rem;
}

.cta-button {
    display: inline-block;
    background-color: #E85A4F;
    color: #ffffff;
    padding: 0.8rem 1.8rem;
    border-radius: 50px; /* Pill shape */
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(232, 90, 79, 0.2);
}

.cta-button:hover {
    background-color: #b5c8b7;
    color: #343a40;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(181, 200, 183, 0.3);
}

.cta-button i {
    transition: transform 0.3s ease;
    vertical-align: middle;
    font-size: 1.2rem;
}

.cta-button:hover i {
    transform: translateX(5px);
}

/* --- Button Styles for Mobile and Contact Form --- */
.btn-outline-light {
    color: #E85A4F;
    border-color: #E85A4F;
    background-color: transparent;
}

.btn-outline-light:hover {
    background-color: #b5c8b7;
    border-color: #b5c8b7;
    color: #343a40;
}

.btn-primary {
    background-color: #E85A4F;
    border-color: #E85A4F;
}

.btn-primary:hover {
    background-color: #b5c8b7;
    border-color: #b5c8b7;
    color: #343a40;
}

.feature-button:hover {
    background-color: #b5c8b7;
    border-color: #b5c8b7;
    color: #343a40;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(181, 200, 183, 0.3);
}

.feature-button.active {
    background-color: #E85A4F;
    color: #ffffff;
    border-color: #E85A4F;
    box-shadow: 0 4px 12px rgba(232, 90, 79, 0.3);
}

/* --- Mobile Styles --- */
@media (max-width: 992px) {
    /* Base setup for interactive mobile view */
    html, body {
        overflow: hidden; /* Prevent native scroll */
        height: 100%;
    }

    /* Hide the old static mobile landing, we're making the main view interactive */
    #mobile-landing { display: none !important; }

    /* Main container becomes a flex column */
    .landing-container {
        display: flex;
        flex-direction: column;
        height: 100vh;
        width: 100vw;
        position: relative;
    }

/* Splits are now the top and bottom trigger zones */
.split {
    width: 100% !important;
    height: 50% !important;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.5s ease;
    position: relative; /* For z-index stacking */
    /* Ajout des propriétés de base pour l'image de fond */
    background-size: cover;
    background-position: center;
}

/* NOUVEAU: Ajout d'une surcouche sombre pour la lisibilité */
.split::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1;
}

/* Assign background images instead of colors */
#techno { background-image: url('images/bg_techno.png'); }
#video { background-image: url('images/bg_video.png'); }

/* Hide background images and the radial gradient overlay on mobile landing */
.split .video-wrapper,
.landing-container::after {
    display: none !important;
}

/* Show and style the overlay text for the landing page */
.split .overlay-text {
    opacity: 1;
    pointer-events: auto;
    color: #ffffff; /* MODIFIÉ: Texte en blanc */
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6); /* AJOUT: Ombre pour lisibilité */
    text-align: center;
    transform: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: opacity 0.3s ease;
    z-index: 2; /* AJOUT: S'assure que le texte est au-dessus de la surcouche */
}
    .split .overlay-text .title-main { font-size: 2.2rem; font-weight: 400; padding-left: 20px; padding-right: 20px;}
    .split .overlay-text .title-sub { font-size: 3rem; font-weight: 900; padding-left: 20px; padding-right: 20px;}
    
    /* Central logo/contact trigger */
    .center-text-container {
        opacity: 1;
        pointer-events: auto;
        z-index: 15; /* Above the splits */
    }
    .center-text-link {
        padding: 5px 30px;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    .central-logo {
        max-width: 315px;
        height: 150px;
    }

    /* --- Panel States & Transitions --- */

    /* The content panels that slide in */
    .portfolio-content {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
        z-index: 20;
        transform: translateX(100%); /* Default start off-screen right */
        transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
        opacity: 1;
        pointer-events: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        padding: 0;
        display: block; /* Override flex from desktop */
    }
    #techno .portfolio-content { transform: translateX(-100%); } /* Techno comes from left */
    #video .portfolio-content { transform: translateX(100%); }   /* Video comes from right */

    /* Contact section slides from bottom */
    #contact-section {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: translateY(100%);
        transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
        z-index: 20;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 2rem 1.5rem 2rem 1.5rem; /* Add padding for content and footer */
        display: block;
    }

    /* --- CORRECTED RULES START --- */
    /* When a view is active, only hide the landing screen elements, not the entire split sections */
    .landing-container.view-active .center-text-container,
    .landing-container.view-active .split .overlay-text {
        opacity: 0;
        pointer-events: none;
    }
    /* --- CORRECTED RULES END --- */

    /* Active states to bring panels into view */
    .landing-container.mobile-techno-active #techno .portfolio-content,
    .landing-container.mobile-video-active #video .portfolio-content,
    .landing-container.mobile-contact-active #contact-section {
        transform: translate(0, 0);
        pointer-events: auto;
    }

    /* Back arrow for closing panels */
    .back-arrow {
        position: fixed; /* Use fixed to keep it in place on scroll */
        top: 1.5rem;
        right: 1.5rem;
        z-index: 25; /* Above content panels */
        font-size: 2rem;
        color: #343a40;
        opacity: 1;
        pointer-events: auto;
        display: block !important; /* Ensure it's visible */
    }
    #techno .back-arrow { right: 1.5rem; }
    #video .back-arrow { left: auto; right: 1.5rem; } /* Both on the right */
    #contact-section .back-arrow { right: 1.5rem; }

    /* --- Adjustments for content inside panels --- */
    .scrollable-content {
        height: auto;
        overflow-y: visible;
        padding: 0;
    }
    .techno-hero-section, .video-hero-section {
        height: auto;
        min-height: 40vh;
        padding: 3rem 1.5rem;
        text-align: center;
        justify-content: center;
    }
    .hero-text-content,
.techno-hero-section .hero-text-content {
    max-width: 100% !important; /* On force la priorité pour être sûr */
    padding: 0;
}
    .techno-hero-section::before, .video-hero-section::before {
        background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%);
    }

    .techno-content-wrapper, .video-content-wrapper { padding: 2rem 1.5rem; }
    .portfolio-grid { flex-direction: column; gap: 2rem; }
    .video-services-new-grid { grid-template-columns: 1fr; gap: 2rem; }
    .feature-button { width: calc(50% - 0.5rem); }
    #contact-section .col-lg-4, #contact-section .col-lg-6 { text-align: center; }
    #contact-section .row { align-items: flex-start; }

    /* Hide lightbox on mobile, as project-viewer.html is used */
    #lightbox-container { display: none !important; }

    #language-switcher.switcher-hidden {
        /* Keep it visible when panels are open */
        transform: translate(-50%, 0);
    }
}
/* --- Web Development Section Styles --- */
.web-dev-section {
    padding: 3rem 0;
}

.web-dev-card {
    position: relative;
    background: linear-gradient(135deg, #212529, #343a40);
    color: #ffffff;
    border-radius: 1.5rem;
    overflow: hidden;
    display: flex;
    min-height: 400px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    transition: box-shadow 0.4s ease;
}

.web-dev-card:hover {
    box-shadow: 0 25px 60px rgba(0,0,0,0.3);
}

.web-dev-content {
    flex: 1 1 55%; /* Prend 55% de l'espace */
    padding: 3rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.web-dev-icon {
    font-size: 3rem;
    width: 6rem;
    height: 6rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.web-dev-intro {
    max-width: 500px;
    margin-bottom: 2rem;
    opacity: 0.8;
}

.web-dev-details {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.5s ease;
}

.web-dev-card:hover .web-dev-details {
    max-height: 200px; /* Hauteur suffisante pour le contenu */
    opacity: 1;
}

.tech-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tech-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.tech-list i {
    color: #198754; /* Vert succès de Bootstrap */
}

.web-dev-visual {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 45%;
    z-index: 1;
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%); /* Forme en diagonale */
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.web-dev-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.25;
    transition: opacity 0.4s ease;
}

.web-dev-card:hover .web-dev-visual {
    transform: scale(1.05);
}

.web-dev-card:hover .web-dev-visual img {
    opacity: 0.4;
}

/* --- Styles Mobile pour la section Web Dev --- */
@media (max-width: 992px) {
    .web-dev-card {
        flex-direction: column;
        min-height: auto;
    }

    .web-dev-content {
        flex-basis: auto;
        padding: 2rem;
    }

    .web-dev-details {
        /* Les détails sont toujours visibles sur mobile */
        max-height: 200px;
        opacity: 1;
    }

    .web-dev-visual {
        position: relative;
        width: 100%;
        height: 200px; /* Hauteur fixe pour l'image sur mobile */
        clip-path: none; /* Pas de forme en diagonale */
    }
    .web-dev-visual img {
        opacity: 0.4;
    }
}
/* --- Styles pour le Panneau de Crédibilité Dynamique --- */
.techno-credibility-panel {
    background-color: #f8f9fa;
    border-radius: 1.5rem;
    padding: 4rem;
    margin: 3rem 0;
    border: 1px solid #e9ecef;
    opacity: 0; /* Caché par défaut pour l'animation d'apparition */
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Classe ajoutée par JS lorsque le panneau est visible */
.techno-credibility-panel.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.techno-credibility-panel h3 {
    color: #343a40;
}

.stat-card {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 1rem;
    height: 100%;
    text-align: center;
    border: 1px solid #dee2e6;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.stat-card i {
    font-size: 2.25rem;
    color: #E85A4F;
    margin-bottom: 1rem;
    display: inline-block;
}

.stat-card .stat-value, .stat-card .stat-value-text {
    font-size: 2.5rem;
    font-weight: 900;
    color: #343a40;
    line-height: 1.1;
    min-height: 48px; /* Empêche le sautillement pendant le comptage */
}

.stat-card .stat-value-text {
    font-size: 1.75rem; /* Taille de police ajustée pour le texte */
}

.stat-card .stat-description {
    margin-top: 0.5rem;
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* Media query pour un meilleur affichage sur mobile */
@media (max-width: 991px) {
    .techno-credibility-panel {
        padding: 2rem;
    }
    .techno-credibility-panel .col-lg-5 {
        text-align: center;
        margin-bottom: 2rem;
    }
}

.credibility-title {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Space between icon and text */
    margin-bottom: 1.5rem; /* Add some bottom margin, as it's removed from h3 */
    justify-content: center; /* Center for mobile */
}

.credibility-title i {
    font-size: 2rem; /* Make the icon slightly larger */
    color: #E85A4F;
    line-height: 1; /* Align with text */
}

.credibility-title h3 {
    margin-bottom: 0; /* Remove default h3 margin as it's handled by parent div */
    color: #E85A4F;
}

/* Adjust for larger screens to align left */
@media (min-width: 992px) {
    .credibility-title {
        justify-content: flex-start;
    }
}

.video-services-new-grid > .video-service-content > h4 {
    font-size: 1.5rem;
    color: #343a40;
}

/* --- Lightbox Mobile Adjustments --- */
@media (max-width: 992px) {
    /* Assure que la lightbox est bien affichée, même si elle était cachée avant */
    #lightbox-container {
        display: flex !important;
    }

    /* Fait en sorte que le contenu de la lightbox prenne tout l'écran */
    #lightbox-content {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        transform: scale(1) !important; /* Annule l'effet de zoom de la version desktop */
    }

    /* Positionne le bouton de fermeture en haut à droite de l'écran */
    #lightbox-close {
        position: fixed; /* Fixe par rapport à la fenêtre */
        top: 1rem;
        right: 1.5rem;
        z-index: 1070; /* Au-dessus du contenu de la lightbox */
        font-size: 2rem;
    }

    /* Ajoute un peu d'espace pour que le contenu ne colle pas aux bords */
    .project-details {
        padding: 1.5rem !important;
    }
}
/* --- Lightbox Header --- */
.lightbox-header {
    display: none; /* Caché par défaut */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0.75rem 1.5rem;
    background-color: #ffffff;
    border-bottom: 1px solid #dee2e6;
    z-index: 1065; /* Au-dessus du contenu, en dessous du bouton X */
    text-align: right;
}

/* --- Mobile-Specific Lightbox Adjustments --- */
@media (max-width: 992px) {
    /* ... (vos styles mobiles existants pour la lightbox) ... */

    /* AFFICHE LE HEADER et cache le X sur mobile */
    .lightbox-header {
        display: block; /* Affiche le header sticky */
    }
    #lightbox-close {
        display: none !important; /* Cache le bouton "X" */
    }

    /* AJOUTE DE L'ESPACE pour le header sticky */
    #lightbox-content {
        /* Calcule la hauteur du header (padding + hauteur de ligne) ~65px */
        padding-top: 80px;
    }
}
@media (max-width: 992px) {
    .techno-credibility-panel {
        opacity: 1;
        transform: none;
        transition: none; /* On désactive aussi la transition pour éviter tout délai */
    }
}
@media (max-width: 992px) {
    .video-service-image {
        padding: 1rem; /* On réduit le padding */
        min-height: auto; /* On annule la hauteur minimale qui n'est plus nécessaire */
    }
}
/* --- Ajustement de la position du titre sur mobile --- */
@media (max-width: 992px) {
    #techno .overlay-text {
        transform: translateY(-2rem); /* Remonte le titre de 2rem (32px) */
    }
}
/* Styles pour les carrousels dans la lightbox */
.project-hero.carousel {
    position: relative;
    width: 100%;
    /* On utilise l'astuce du padding pour forcer un ratio 16:9 */
    padding-top: 56.25%; /* 9 / 16 = 0.5625 */
    height: 0; /* La hauteur est maintenant gérée par le padding */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    overflow: hidden; /* Cache tout ce qui pourrait déborder */
    background-color: #000;
}

/* On positionne le contenu du carrousel de manière absolue à l'intérieur */
.project-hero.carousel .carousel-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* On s'assure que l'item actif prend toute la place */
.project-hero.carousel .carousel-item.active {
    height: 100%;
}

/* Les images et vidéos prennent maintenant 100% de la hauteur ET de la largeur */
.project-hero.carousel .carousel-item img,
.project-hero.carousel .modal-video-container {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garde le 'cover' pour les images pour un rendu propre */
}
/* S'assure que le lien de retour prévu pour les pages autonomes est masqué lorsqu'il est chargé dans la lightbox. */
#lightbox-content .manual-back-link {
    display: none !important; /* Force le masquage pour annuler les règles Bootstrap si nécessaire */
}
/* --- Mise en page pour les pages de projet autonomes --- */
/* Applique des marges latérales et une largeur maximale au conteneur principal des projets
   lorsqu'il n'est PAS dans la lightbox (car le body n'a PAS la classe .lightbox-open). */
body:not(.lightbox-open) .project-info-container {
    max-width: 1200px; /* Limite la largeur du contenu pour une meilleure lisibilité sur grands écrans */
    margin: 0 auto;    /* Centre le conteneur horizontalement */
    padding: 2rem;     /* Ajoute un padding général autour du contenu pour éviter qu'il ne touche les bords */
    background-color: #ffffff; /* S'assure que le fond est blanc sous le contenu */
    border-radius: 8px; /* Ajoute un léger arrondi pour un aspect plus doux */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); /* Ajoute une subtile ombre */
    margin-top: 3rem; /* Espace le contenu du haut de la page (du bouton "Retour") */
    margin-bottom: 3rem; /* Espace le contenu du bas de la page */
}

/* Ajustements responsives pour les pages de projet autonomes sur mobile (non lightbox) */
@media (max-width: 992px) {
    body:not(.lightbox-open) .project-info-container {
        max-width: 100%; /* Reprend toute la largeur sur mobile */
        padding: 1.5rem; /* Réduit le padding sur mobile pour mieux utiliser l'espace */
        margin-top: 1rem; /* Réduit la marge supérieure sur mobile */
        margin-bottom: 1rem; /* Réduit la marge inférieure sur mobile */
        border-radius: 0; /* Pas d'arrondi sur les bords sur mobile pour occuper toute la largeur */
        box-shadow: none; /* Pas d'ombre sur mobile si la page prend toute la largeur */
    }
    
    /* Le bouton de retour manuel doit être visible sur les pages autonomes mobiles */
    .manual-back-link.d-none {
        display: block !important; /* Force l'affichage sur mobile si la page est autonome */
        position: sticky; /* Rendre le bouton sticky pour qu'il suive le scroll */
        top: 1rem; /* Positionne le bouton sticky en haut */
        left: 1rem; /* Positionne le bouton sticky à gauche */
        z-index: 100; /* Assure qu'il est au-dessus du contenu */
        background-color: rgba(255, 255, 255, 0.8); /* Fond semi-transparent pour la lisibilité */
        backdrop-filter: blur(5px); /* Effet de flou */
        -webkit-backdrop-filter: blur(5px); /* Pour Safari */
        border-radius: 5px;
        padding: 0.5rem 1rem;
    }

    /* Ajustement de la couleur pour le bouton "Retour au portfolio" sur mobile autonome */
    body:not(.lightbox-open) .manual-back-link {
        color: #343a40; /* Couleur du texte pour qu'il soit lisible */
        border-color: #dee2e6; /* Couleur de la bordure */
    }
}
/* --- Nouveau CTA pour la Démo Storyline --- */
.storyline-cta-container {
    position: absolute;
    top: 50%; /* Positionnement vertical au centre pour commencer */
    left: 50%;
    transform: translate(-50%, 75%); /* Déplacer sous le centre-text-container (~75% de la hauteur du parent) */
    text-align: center;
    z-index: 9; /* Doit être sous le logo central (z-index: 10) */
    transition: opacity 0.5s ease, transform 0.5s ease;
    
    /* Styles pour l'encadré cliquable */
    display: inline-block;
    padding: 8px 30px;
    background-color: rgba(232, 90, 79, 0.9); /* Couleur de marque pour attirer l'attention */
    border: 1px solid #E85A4F;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(232, 90, 79, 0.3);
}

.storyline-cta-container:hover {
    background-color: #E85A4F;
    box-shadow: 0 4px 20px rgba(232, 90, 79, 0.5);
    transform: translate(-50%, 75%) scale(1.05); /* Petit effet de zoom au survol */
}

.storyline-cta-container strong {
    font-weight: 700;
}

/* Masquer la CTA lorsque n'importe quel panneau est actif */
.landing-container.view-active .storyline-cta-container { 
    opacity: 0; 
    pointer-events: none; 
}

/* Ajustement de la position sur mobile */
@media (max-width: 992px) {
    .storyline-cta-container {
        transform: translate(-50%, 120%); /* Déplace encore plus bas sur mobile pour éviter le logo */
        font-size: 0.8rem;
        padding: 6px 20px;
    }
}
.storyline-cta-v2 {
    /* Positionnement juste sous le bloc logo */
    position: absolute;
    top: 5vh;
    left: 50%;
    transform: translate(-50%, 35px); /* 15px d'espacement sous le bloc */
    z-index: 9;

    /* Apparence subtile */
    display: inline-block;
    padding: 8px 30px;
    background-color: #f58020;
    opacity: 90%;
    border: 1px solid #ddd;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 25px;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap; /* S'assure que le texte reste sur une ligne */
    text-decoration: none;
    
    /* Transitions fluides */
    transition: all 0.3s ease;
}

.storyline-cta-v2:hover {
    background-color: #E85A4F;
    border-color: #E85A4F;
    color: #ffffff;
    transform: translate(-50%, 30px); /* Effet de "lift" */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.storyline-cta-v2 .bi-arrow-right-short {
    transition: transform 0.3s ease;
    vertical-align: -2px; /* Mieux aligner la flèche avec le texte */
}

.storyline-cta-v2:hover .bi-arrow-right-short {
    transform: translateX(2px);
}

/* Masquer la CTA lorsque n'importe quel panneau est actif */
.landing-container.view-active .storyline-cta-v2 { 
    opacity: 0; 
    pointer-events: none; 
    transition-delay: 0s;
}

/* Ajustement mobile */
@media (max-width: 992px) {
    .storyline-cta-v2 {
        transform: translate(-50%, 10px);
        font-size: 0.8rem;
        padding: 8px 15px;
    }
}
.project-hero .hero-clickable-link {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #212529; /* Fond sombre au cas où l'image ne charge pas */
}

.project-hero .hero-clickable-link .project-hero-img {
    transition: transform 0.4s ease-out, opacity 0.4s ease;
}

.project-hero .hero-clickable-link:hover .project-hero-img {
    transform: scale(1.05);
    opacity: 0.8;
}

/* Style du nouveau bouton de lancement */
.btn-launch-demo {
    display: inline-block;
    background-color: #198754; /* Vert "succès" de Bootstrap */
    color: #ffffff;
    padding: 0.75rem 1.8rem;
    border-radius: 50px; /* Forme de pilule */
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(25, 135, 84, 0.2);
}

.btn-launch-demo:hover {
    background-color: #157347;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(25, 135, 84, 0.3);
}