/* ==========================================================================
   BASILE PARFAIT — portfolio
   Reprend la feuille de style d'origine (gris #D9D9D9, brun #400601, orange #ef8611,
   titres "PolySans Slim" / sans-serif, texte Manrope) et la prolonge :
   méthode, parcours de fabrication des projets, transitions à l'onde orange.
   ========================================================================== */

*, ::after, ::before { box-sizing: border-box; }

html { font-family: sans-serif; line-height: 1.15; overflow-x: visible; }

/* --- BODY GLOBAL --- */
body {
    margin: 0; font-family: "Manrope", sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5;
    color: #400601; background-color: #D9D9D9;
    text-align: left; overflow-x: clip; position: relative;
    cursor: url('../img/cursor-scroll.svg') 0 0, auto;
    transition: background-color 1s ease-in-out, color 1s ease-in-out;
}
img, video { max-width: 100%; }

/* SUPPRESSION MAIN (POINTER) */
a, button, .project-block, .contact-link, .project-link, .accordion-header, .back-button, .btn-live, .btn-contact, .dim, .m-nav-item { cursor: none !important; }

/* --- MODE SOMBRE (ACCUEIL) --- */
body.dark-mode { background-color: #080908 !important; color: #ffffff !important; }
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode p, body.dark-mode a, body.dark-mode span, body.dark-mode .project-title, body.dark-mode .project-desc, body.dark-mode .bio-text, body.dark-mode .contact-link, body.dark-mode .mobile-project-title { color: #ffffff !important; transition: color 1s ease-in-out; }
body.dark-mode .btn { border-color: #ffffff; color: #ffffff; }
body.dark-mode .btn:hover { color: #ef8611 !important; }
body.dark-mode .contact-divider { background-color: #ffffff; opacity: 0.3; }
body.dark-mode #scrollToTopBtn { border: 1px solid #ffffff; }
body.dark-mode .contact-link:hover { color: #ef8611 !important; transition: color 0.2s ease; }
body.dark-mode .parcours li { border-color: rgba(255, 255, 255, 0.3); }
body.dark-mode .parcours b { color: #ef8611 !important; }

/* TYPO & UI */
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .5rem; }
h2, .h2 { font-family: "PolySans Slim", sans-serif; letter-spacing: -2px; font-weight: normal; margin-bottom: 0; transition: color 0.25s ease-out; font-size: 14vw; line-height: 1.1; margin-top: 25px; }
@media (min-width: 1024px) { h2, .h2 { font-size: 6.8vw; line-height: 1.1; white-space: nowrap; margin-top: 0; letter-spacing: -1px; } }

.btn { border: 1px solid #400601; padding: 6px 15px 8px; color: #400601; line-height: 1; text-decoration: none; display: inline-block; transition: all 0.25s ease-in-out; border-radius: 5vw; font-size: 5vw; background: transparent; font-family: inherit; }
@media (min-width: 1024px) { .btn { padding: 6px 24px 8px; border-radius: 1.5vw; font-size: 1.5vw; } }
.btn:hover { border-color: #fff; background-color: #fff; color: #ef8611 !important; text-decoration: none; }
.btn:disabled { opacity: .35; pointer-events: none; }

#scrollToTopBtn { position: fixed; bottom: 20px; right: 20px; font-size: 3rem; padding: 10px 20px; border-radius: 50%; background-color: #ef8611; color: #fff; text-decoration: none; opacity: 0; visibility: hidden; transition: all 0.25s ease; z-index: 100; border: 1px solid transparent; }
#scrollToTopBtn.visible { opacity: 1; visibility: visible; }
#scrollToTopBtn:hover { background-color: #fff; color: #ef8611 !important; }

/* --- CURSEUR CUSTOM --- */
#custom-cursor {
    position: fixed; top: 0; left: 0; pointer-events: none; width: 65px; height: 65px;
    z-index: 99999; opacity: 0; transition: opacity 0.2s ease;
    display: flex; align-items: center; justify-content: center;
    mix-blend-mode: difference;
}
#custom-cursor svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); }
#cursor-default { opacity: 1; transform: scale(1); }
#cursor-hover { opacity: 0; transform: scale(0.5); filter: drop-shadow(0 0 8px #ef8611); }
#custom-cursor.hover-active #cursor-default { opacity: 0; transform: scale(0.5); }
#custom-cursor.hover-active #cursor-hover { opacity: 1; transform: scale(1); }
@media (pointer: coarse) { #custom-cursor { display: none; } }

/* --- RIPPLE --- */
#click-ripple {
    position: fixed; top: 0; left: 0; width: 40px; height: 40px;
    border-radius: 50%; background-color: #ef8611;
    transform: translate(-50%, -50%) scale(0); opacity: 1;
    pointer-events: none; z-index: 99998; will-change: transform, opacity;
}
#click-ripple.is-active {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.1s ease-out 0.3s;
    transform: translate(-50%, -50%) scale(1); opacity: 0;
}

/* --- TRANSITION DE PAGE : l'onde orange du clic grandit jusqu'à couvrir l'écran --- */
#page-wipe {
    position: fixed; top: 0; left: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px;
    border-radius: 50%; background-color: #ef8611; pointer-events: none; z-index: 99997;
    transform: translate(50vw, 50vh) scale(0); will-change: transform;
}
html.wipe-in #page-wipe { transform: translate(50vw, 50vh) scale(140); }

/* --- LAYOUT ACCUEIL --- */
.spacer { height: 10vw; }
.spacer3 { height: 300px; }
.module { position: relative; padding-left: 30px; padding-right: 50px; width: 100%; }
@media (min-width: 1024px) { .module { padding-left: 9.3vw; padding-right: 9.3vw; } }

.fullscreen-image { background-image: url('../img/basile-portrait.webp'); background-position: center; background-size: cover; background-repeat: no-repeat; height: 100vh; width: 100%; position: relative; overflow: hidden; }
.overlay-text { font-weight: 800; position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); font-size: calc(10vw + 30px); color: #ef8611; text-align: center; letter-spacing: calc(1vw + 5px); z-index: 10; white-space: nowrap; display: flex; gap: 30px; }
.overlay-text .word { display: inline-block; will-change: transform; }
.overlay-text .char { display: inline-block; will-change: transform; }
@media (max-width: 768px) { .overlay-text { flex-direction: column; gap: 0; bottom: 20%; line-height: 1.1; } }

.title-wrapper { position: relative; display: inline-block; }
.module1 h2 { position: relative; z-index: 2; margin-bottom: 40px; }
#orange-animation { position: absolute; bottom: 0; left: -1.5vw; width: 36vw; z-index: 3; pointer-events: none; overflow: visible; opacity: 1; }
@media (min-width: 1024px) {
    .module1 { display: grid; grid-template-columns: 60% 35%; justify-content: space-between; align-items: start; min-height: 147vh; padding-top: 10vh; overflow: visible !important; }
    .left-col-module1.sticky-col { position: -webkit-sticky; position: sticky; top: 50vh; transform: translateY(-50%) translateZ(0); height: auto; z-index: 2; }
    .module1 h2 { font-size: 6.8vw; line-height: 1.1; }
    .module1 .btn { margin-top: 20px; position: relative; }
    .module1 .right-col.scrolling-col { margin-top: 60vh; position: relative; padding-bottom: 10vh; z-index: 4; }
    #intro-text { font-size: 2em; line-height: 1.3; color: #ffffff; font-weight: 500; text-align: left; transition: all 0.3s ease-out; will-change: color; transform: translate3d(0,0,0); }
    #intro-text.scroll-active { color: #ef8611 !important; -webkit-text-fill-color: #ef8611 !important; }
}
@media (max-width: 1023px) {
    .spacer3 { height: 100px !important; }
    .module1 { display: block; margin-top: 50px; padding-bottom: 150px; }
    .title-wrapper { width: 100%; }
    .module1 h2 { font-size: 11vw; position: relative; z-index: 2; margin-bottom: 20px; line-height: 1.2; }
    #orange-animation { position: absolute; bottom: 10px; right: 30%; width: 70%; height: auto; z-index: 3; pointer-events: none; left: auto; top: auto; }
    #intro-text { font-size: 1.4rem; color: #ffffff; margin-top: 40px; transition: color 0.5s ease; font-weight: 500; }
    #intro-text.scroll-active { color: #ef8611 !important; }
}

/* Traits orange dessinés à la main (ellipse, soulignés, croquis) */
.hand { fill: none; stroke: #ef8611; stroke-miterlimit: 10; stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; }

/* =========================================
   MA MÉTHODE — même arbre que les projets, couché à l'horizontale
   ========================================= */
.m-label { font-size: 1.5rem; font-weight: 500; margin: 0 0 20px; }
.m-step h2 { display: inline-block; position: relative; }
.m-word { position: relative; display: inline-block; }
.m-word svg { position: absolute; left: -7%; top: -14%; width: 114%; height: 132%; overflow: visible; pointer-events: none; }
.m-quote { color: #ef8611; font-weight: 500; }
.m-text { font-weight: 300; }
.m-tools { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }

@media (min-width: 1024px) {
    .methode { height: 520vh; }
    .methode-sticky { position: -webkit-sticky; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; }
    .m-stage { position: relative; height: 46vh; }
    .m-step { position: absolute; inset: 0; display: grid; grid-template-columns: 55% 35%; justify-content: space-between; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s; }
    .m-step.active { opacity: 1; visibility: visible; }
    .m-step h2 { transform: translateY(30px); transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
    .m-step.active h2 { transform: none; }
    .m-quote { font-size: 2em; line-height: 1.3; margin: 0 0 20px; }
    .m-text { font-size: 1.5rem; line-height: 1.6; margin: 0; }

    .m-nav { position: relative; height: 30px; margin-top: 12vh; }
    .m-nav-line, .m-nav-line-active { position: absolute; left: 0; right: 0; top: 0; height: 1.55px; background: #400601; border-radius: 2px; }
    .m-nav-line-active { background: #ef8611; transform-origin: left center; transform: scaleX(0); z-index: 2; }
    .m-nav-item { position: absolute; top: 0; transform: translateX(-50%); padding-top: 42px; white-space: nowrap; font-size: 1.5rem; font-weight: 500; color: #400601; text-decoration: none; transition: color 0.2s ease; }
    .m-nav-item:first-of-type { transform: none; }
    .m-nav-item:last-child { transform: translateX(-100%); }
    .m-nav-item::before { content: ''; position: absolute; left: 50%; top: 0; width: 1.55px; height: 26px; background: #400601; border-radius: 2px; transition: background-color 0.2s ease; }
    .m-nav-item:first-of-type::before { left: 0; }
    .m-nav-item:last-child::before { left: auto; right: 0; }
    .m-nav-item.active { color: #ef8611; font-weight: 800; }
    .m-nav-item.passed::before, .m-nav-item.active::before { background: #ef8611; }
}
@media (max-width: 1023px) {
    .methode { padding-bottom: 60px; }
    .m-label { margin-top: 0; }
    .m-step { margin-bottom: 70px; }
    .m-step h2 { font-size: 13vw; margin: 0 0 24px; }
    .m-quote { font-size: 1.4rem; margin: 0 0 12px; }
    .m-text { font-size: 1.2rem; margin: 0; }
    .m-nav { display: none; }
}

/* =========================================
   PROJETS RÉCENTS
   ========================================= */
.projects-container { padding-top: 0; padding-bottom: 100px; background-color: transparent; }
.mobile-project-title { display: none; }
.mobile-progress-container { display: none; }
.project-flag { display: inline-block; vertical-align: middle; margin-left: 14px; font-size: 0.8rem; padding: 8px 16px; border-radius: 50px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; background-color: #ef8611; color: #ffffff !important; position: relative; top: -4px; }
@media (min-width: 1024px) {
    .projects-container { display: grid; grid-template-columns: 25% 70%; justify-content: space-between; align-items: start; min-height: 200vh; }
    .projects-nav-col { position: relative; height: 100%; }
    .projects-nav-sticky { position: -webkit-sticky; position: sticky; top: 10vh; min-height: 80vh; }
    #project-main-title { font-size: 6.8vw; color: #400601; margin-bottom: 40px; white-space: nowrap; transform-origin: left top; transition: color 1s ease; }
    .nav-wrapper { position: absolute; top: 13vw; left: 0; display: flex; flex-direction: row; height: 440px; }
    .nav-tree-svg { width: 30px; height: 100%; margin-right: 25px; flex-shrink: 0; position: relative; }
    .nav-tree-svg svg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; overflow: visible; }
    .nav-tree-svg path { fill: none; stroke-linecap: round; stroke-width: 1.55px; }
    #svg-base { z-index: 1; }
    #svg-base path { stroke: #400601; transition: stroke 1s ease; }
    #svg-active { z-index: 2; overflow: visible; }
    #svg-active path { stroke: #ef8611; }
    .projects-menu { list-style: none; padding: 0; margin: 0; height: 100%; position: relative; }
    .menu-item { position: absolute; left: 0; line-height: 1; transform: translateY(-50%); display: inline-block; }
    .project-link { text-decoration: none; font-size: 1.5rem; color: #400601; font-weight: 500; transition: transform 0.3s ease, color 0.2s ease; white-space: nowrap; position: relative; padding-bottom: 2px; }
    .link-hover { position: absolute; bottom: -5px; left: 0; width: 100%; height: 8px; pointer-events: none; overflow: visible; }
    .link-hover path { fill: none; stroke: #400601; stroke-width: 2px; stroke-linecap: round; stroke-dasharray: 101; stroke-dashoffset: 101; transition: stroke-dashoffset 0.3s ease-out, stroke 1s ease; }
    .menu-item:hover .link-hover path { stroke-dashoffset: 0; }
    .menu-item:has(.project-link.active) .link-hover path { stroke-dashoffset: 101 !important; }
    .link-underline { position: absolute; bottom: -5px; left: 0; width: 100%; height: 8px; pointer-events: none; overflow: visible; }
    .link-underline path { fill: none; stroke: #ef8611; stroke-width: 2px; stroke-linecap: round; stroke-dasharray: 101; stroke-dashoffset: 101; transition: stroke-dashoffset 0.3s ease-out; }
    .project-link.active { color: #ef8611 !important; font-weight: 800; }
    .menu-item:has(.project-link.active) .link-underline path { stroke-dashoffset: 0; }

    .projects-content-col { display: flex; flex-direction: column; gap: 15vh; margin-top: 40vh; }
    .project-block { scroll-margin-top: 30vh; transition: transform 0.4s ease; cursor: pointer; }
    .project-card-link { display: block; text-decoration: none; color: inherit; width: 100%; }
    .project-image-wrapper { border: 4px solid #400601; border-radius: 20px; overflow: hidden; margin-bottom: 20px; height: 400px; width: 100%; transition: all 0.4s ease, border-color 1s ease; }
    .project-image-wrapper img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.5s ease; }
    .project-title { font-size: 2.5rem; font-weight: 500; color: #400601; margin-bottom: 10px; transition: color 0.3s ease; }
    .project-desc { font-size: 1.2rem; color: #400601; transition: color 1s ease; margin: 0; }
    .project-block:hover { transform: translateY(-5px); }
    .project-block:hover .project-image-wrapper { border-color: #ef8611 !important; }
    .project-block:hover .project-image-wrapper img { transform: scale(1.05); }
    .project-block:hover .project-title { color: #ef8611 !important; }
}
@media (max-width: 1023px) {
    .projects-nav-col { display: none; }
    .mobile-project-title { display: block; font-family: "PolySans Slim", sans-serif; font-weight: normal; letter-spacing: -2px; font-size: 11vw; white-space: nowrap; text-align: left; color: #400601; margin-top: 25px; margin-bottom: 40px; }
    .mobile-progress-container { display: block; position: -webkit-sticky; position: sticky; top: 20px; z-index: 50; width: 100%; height: 14px; border: 1px solid #400601; border-radius: 99px; padding: 2px; background-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(5px); margin-bottom: 40px; }
    .mobile-progress-bar { height: 100%; background-color: #ef8611; border-radius: 99px; width: 0%; }
    .projects-content-col { display: flex; flex-direction: column; gap: 50px; }
    .project-block { text-align: left; }
    .project-card-link { display: block; text-decoration: none; color: inherit; width: 100%; }
    .project-image-wrapper { border: 2px solid #400601; border-radius: 10px; height: 250px; width: 100%; margin-bottom: 15px; overflow: hidden; }
    .project-image-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .project-title { font-size: 1.8rem; margin-top: 10px; font-weight: 600; margin-bottom: 6px; }
    .project-desc { margin: 0; }
    .project-flag { margin-left: 8px; font-size: 0.65rem; padding: 6px 10px; }
}

/* =========================================
   QUI JE SUIS (VIDEO REVEAL)
   ========================================= */
.passion-container { display: flex; align-items: center; justify-content: space-between; text-align: left; width: 100%; padding: 0 9.3vw; margin-top: 0; }
.bio-text-col { flex: 0 0 45%; margin-right: 50px; }
.bio-video-col { flex: 1; opacity: 0; transition: opacity 0.3s ease; position: relative; user-select: none; display: flex; justify-content: flex-end; margin-top: -160px; height: auto; border-radius: 20px 0 0 20px; overflow: hidden; margin-right: -9.3vw; }
body.dark-mode .bio-video-col { opacity: 1; transition: opacity 2s ease 1.2s; }
.bio-video-col::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 30%; background: linear-gradient(to bottom, transparent, #080908); z-index: 3; pointer-events: none; border-radius: 0 0 0 20px; }
#video-front { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: -5; pointer-events: none; }
#video-back { position: relative; width: 100%; height: auto; display: block; z-index: 1; }
#video-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; cursor: crosshair; }

.bio-text { font-size: 1.5rem; line-height: 1.6; margin-bottom: 2rem; margin-top: 0; color: #400601; font-weight: 300; transition: color 1s ease; }
.bio-text strong { font-weight: 700; color: inherit !important; }

.parcours { list-style: none; padding: 0; margin: 3rem 0 2.5rem; }
.parcours li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 14px 0; border-bottom: 1px solid rgba(64, 6, 1, 0.2); font-size: 1.2rem; transition: border-color 1s ease; }
.parcours li:first-child { border-top: 1px solid rgba(64, 6, 1, 0.2); }
.parcours b { font-weight: 700; }
.parcours span { font-weight: 300; text-align: right; }
@media (max-width: 1023px) { .passion-container { flex-direction: column; padding: 0 20px 0 30px; margin-top: 40px; } .bio-video-col { display: none; } .bio-text-col { width: 100%; margin-right: 0; flex: none; } .bio-text { font-size: 1.2rem; } .parcours li { font-size: 1rem; } }

/* =========================================
   CONTACTS
   ========================================= */
#contactLinks { text-align: center; padding: 20px 20px 90px; }
.contact-item { font-size: 2vw; padding: 10px 0; }
.contact-link { text-decoration: none; color: #400601 !important; transition: color 1s ease; cursor: pointer; }
.contact-link:hover { color: #ef8611 !important; transition: color 0.2s ease; }
.contact-divider { width: 83%; height: 3px; background-color: #400601; margin: 10px auto; border-radius: 10px; transition: background-color 1s ease; }
@media screen and (max-width: 768px) { .contact-item { font-size: 1.5rem; } }
.spacer-bottom-gallery2 { height: 150px; }

/* =========================================
   PAGE PROJET
   ========================================= */
.project-page { background-color: #D9D9D9; color: #400601; overflow-x: hidden; }

.back-button { position: fixed; top: 30px; right: 30px; z-index: 100; font-size: 1rem; text-decoration: none; color: #400601; border: 1px solid #400601; padding: 8px 24px; border-radius: 50px; background: rgba(217, 217, 217, 0.8); backdrop-filter: blur(5px); transition: all 0.3s ease; font-weight: 600; }
.back-button:hover { background: #400601; color: #ef8611; border-color: #400601; }

.project-layout { display: flex; width: 100%; min-height: 100vh; }

.project-sidebar { width: 35%; height: 100vh; position: -webkit-sticky; position: sticky; top: 0; padding: 60px 40px; display: flex; flex-direction: column; justify-content: flex-start; overflow-y: auto; border-right: 1px solid rgba(64, 6, 1, 0.1); background-color: #D9D9D9; z-index: 50; -ms-overflow-style: none; scrollbar-width: none; }
.project-sidebar::-webkit-scrollbar { display: none; }
.sidebar-content { margin: auto 0; width: 100%; }

.p-title { font-family: "PolySans Slim", sans-serif; font-weight: normal; font-size: 3.5vw; line-height: 1; margin-bottom: 10px; color: #ef8611; letter-spacing: -1px; white-space: normal; }
.p-subtitle { font-family: "Manrope", sans-serif; font-size: 1.2rem; font-weight: 400; color: #400601; opacity: 0.7; margin-bottom: 30px; margin-top: 0; letter-spacing: 1px; text-transform: uppercase; line-height: 1.3; white-space: normal; }
.p-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 50px; }

.tag { font-size: 0.8rem; padding: 8px 16px; border-radius: 50px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; border: 1px solid transparent; transition: all 0.3s ease; }
.tag:nth-child(1) { background-color: #ef8611; color: #ffffff; border-color: #ef8611; }
.tag:not(:nth-child(1)) { background-color: #ffffff; color: #ef8611; border: 1px solid #ef8611; }

.accordion { border-top: 1px solid rgba(64, 6, 1, 0.2); width: 100%; }
.accordion-item { border-bottom: 1px solid rgba(64, 6, 1, 0.2); overflow: hidden; }
.accordion-header { padding: 20px 0; cursor: pointer; font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; color: #400601; transition: color 0.3s ease; white-space: normal; }
.accordion-header:hover { color: #ef8611; }
.acc-icon { margin-right: 15px; font-weight: 400; font-size: 1.2rem; display: inline-block; width: 20px; }
.accordion-body { max-height: 0; overflow: hidden; visibility: hidden; opacity: 0; transition: max-height 0.5s ease-out, opacity 0.5s ease, visibility 0.5s; will-change: max-height; }
.accordion-body p { padding-bottom: 20px; font-size: 0.95rem; line-height: 1.6; color: #400601; margin: 0; }
.accordion-item.active .accordion-body { opacity: 1; visibility: visible; transition: max-height 0.5s ease-out, opacity 0.5s ease; }

.sidebar-footer { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; }
.btn-contact { display: inline-block; background-color: transparent; color: #400601 !important; text-decoration: none; padding: 12px 30px; border-radius: 50px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem; transition: all 0.3s ease; border: 1px solid #400601; width: 100%; text-align: center; font-family: inherit; }
.btn-contact:hover { background-color: #ffffff; color: #ef8611 !important; border-color: #ffffff; box-shadow: 0 0 20px rgba(255, 255, 255, 0.6); }
.btn-live { background-color: #ef8611; border-color: #ef8611; color: #ffffff !important; }
.btn-contact:disabled { opacity: 0.35; pointer-events: none; }

.project-gallery { width: 65%; padding: 60px; padding-top: 110px; display: flex; flex-direction: column; gap: 30px; background-color: #D9D9D9; position: relative; }

.gallery-block, .gallery-item { width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid rgba(64, 6, 1, 0.1); background-color: #000; position: relative; }
.gallery-block img, .gallery-item img, .gallery-block video, .gallery-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; width: 100%; }
.bento-asym { grid-template-columns: 2fr 1fr; }
.bento-asym-reverse { grid-template-columns: 1fr 2fr; }
.big-bento { height: 500px; }
.small-bento { height: 500px; }
.gallery-item { min-height: 300px; }
.is-light { background-color: #ffffff; }

.reveal-img { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.reveal-img.visible { opacity: 1; transform: translateY(0); }

/* --- Carnet de fabrication : notes numérotées entre les images, reliées par la ligne orange --- */
.has-trace { padding-left: 110px; }
.trace { position: absolute; left: 52px; top: 110px; bottom: 150px; width: 1.55px; background: #400601; border-radius: 2px; }
.trace i { position: absolute; inset: 0; background: #ef8611; transform-origin: center top; transform: scaleY(0); border-radius: 2px; }
.gallery-note { position: relative; padding: 50px 0 20px; max-width: 640px; }
.gallery-note::before { content: ''; position: absolute; left: -58px; top: 78px; width: 34px; height: 1.55px; background: #400601; border-radius: 2px; transition: background-color 0.3s ease; }
.gallery-note.visible::before { background: #ef8611; }
.note-num { font-family: "PolySans Slim", sans-serif; font-size: 1.5rem; color: #ef8611; font-weight: 500; display: block; margin-bottom: 6px; }
.gallery-note h3 { font-family: "PolySans Slim", sans-serif; font-weight: normal; font-size: 3.5vw; line-height: 1.05; letter-spacing: -1px; margin: 0 0 20px; }
.gallery-note p { font-size: 1.2rem; line-height: 1.6; font-weight: 300; margin: 0; }
.gallery-note p strong { font-weight: 700; }

/* --- Bulleur : avant / après --- */
.before-after { display: flex; align-items: flex-end; gap: 3vw; padding: 20px 0 30px; flex-wrap: wrap; }
.ba-col span { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.ba-col b { font-family: "PolySans Slim", sans-serif; font-weight: normal; font-size: 8vw; line-height: 1; letter-spacing: -2px; display: block; }
.ba-col--before b { opacity: 0.3; }
.ba-col--after b { color: #ef8611; }
.ba-arrow { width: 9vw; min-width: 70px; align-self: center; overflow: visible; }

/* --- Bulleur : démo interactive --- */
.demo { border: 4px solid #400601; border-radius: 20px; overflow: hidden; background: #ffffff; }
.demo-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 22px; border-bottom: 1px solid rgba(64, 6, 1, 0.2); font-weight: 700; flex-wrap: wrap; }
.demo-status { font-weight: 400; }
.demo-status b { color: #ef8611; font-weight: 800; }
.demo-plan { position: relative; border-bottom: 1px solid rgba(64, 6, 1, 0.2); }
.demo-plan svg { display: block; width: 100%; height: auto; }
.demo-part rect, .demo-part circle { fill: rgba(64, 6, 1, 0.04); stroke: #400601; stroke-width: 1.6; }
.demo-axis { fill: none; stroke: rgba(64, 6, 1, 0.35); stroke-width: 0.8; stroke-dasharray: 14 4 2 4; }
.demo-dimlines path { fill: none; stroke: rgba(64, 6, 1, 0.55); stroke-width: 0.9; }
.demo-arrhead { fill: rgba(64, 6, 1, 0.7); }
.dim { outline: none; }
.dim rect { fill: #ffffff; stroke: transparent; stroke-width: 1.2; stroke-dasharray: 4 3; rx: 5; transition: stroke 0.2s, fill 0.2s; }
.dim text { font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 500; text-anchor: middle; fill: #400601; pointer-events: none; }
.dim:hover rect, .dim:focus-visible rect { stroke: #ef8611; fill: rgba(239, 134, 17, 0.1); }
.dim.is-done rect { stroke: #ef8611; stroke-dasharray: none; fill: rgba(239, 134, 17, 0.08); }
.bubble { transform-box: fill-box; transform-origin: center; animation: pop 0.5s cubic-bezier(0.25, 1, 0.5, 1) both; pointer-events: none; }
.bubble circle { fill: #ef8611; }
.bubble text { font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 800; fill: #ffffff; text-anchor: middle; }
@keyframes pop { from { transform: scale(0); } 60% { transform: scale(1.25); } to { transform: scale(1); } }
.demo-stamp { position: absolute; right: 5%; bottom: 8%; padding: 10px 20px; border: 3px solid #ef8611; border-radius: 12px; color: #ef8611; font-weight: 800; font-size: 1.5rem; text-transform: uppercase; line-height: 1.1; background: rgba(255, 255, 255, 0.9); transform: rotate(-8deg) scale(2); opacity: 0; pointer-events: none; transition: transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1), opacity 0.25s; }
.demo-stamp small { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 1px; }
.demo.is-ready .demo-stamp { transform: rotate(-8deg) scale(1); opacity: 1; }
.demo-report { padding: 16px 22px 22px; }
.demo-report-head, .demo-rows li { display: grid; grid-template-columns: 40px 1fr 1fr 30px; gap: 10px; align-items: center; }
.demo-report-head { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding-bottom: 10px; border-bottom: 1px solid rgba(64, 6, 1, 0.2); }
.demo-rows { list-style: none; margin: 0; padding: 0; }
.demo-rows li { padding: 8px 0; border-bottom: 1px solid rgba(64, 6, 1, 0.1); animation: rowin 0.5s ease both; }
.demo-rows li span:first-child { width: 24px; height: 24px; border-radius: 50%; background: #ef8611; color: #fff; display: grid; place-items: center; font-size: 0.8rem; font-weight: 800; }
.demo-rows li span:last-child { color: #ef8611; font-weight: 800; opacity: 0; transition: opacity 0.3s; }
.demo.is-ready .demo-rows li span:last-child { opacity: 1; }
@keyframes rowin { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.demo-empty { margin: 16px 0 0; opacity: 0.7; }
.demo-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.demo-actions .btn-contact { width: auto; }

/* --- Projet suivant --- */
.next-project { display: block; text-decoration: none; color: #400601; padding: 50px 0 0; border-top: 1px solid rgba(64, 6, 1, 0.2); margin-top: 40px; }
.next-project span { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 8px; }
.next-project b { font-family: "PolySans Slim", sans-serif; font-weight: normal; font-size: 6.8vw; line-height: 1.1; letter-spacing: -1px; transition: color 0.25s ease-out; }
.next-project:hover b { color: #ef8611; }

@media (max-width: 1024px) {
    .project-layout { flex-direction: column; }
    .project-sidebar { width: 100%; height: auto; position: relative; padding: 90px 20px 40px; border-right: none; border-bottom: 1px solid rgba(64, 6, 1, 0.2); overflow-y: visible; }
    .project-gallery { width: 100%; padding: 20px; }
    .gallery-grid, .bento-asym, .bento-asym-reverse { grid-template-columns: 1fr; gap: 20px; }
    .big-bento, .small-bento { height: auto; min-height: 250px; }
    .p-title { font-size: 12vw; }
    .has-trace { padding-left: 50px; }
    .trace { left: 22px; top: 30px; bottom: 150px; }
    .gallery-note { padding-top: 30px; }
    .gallery-note::before { left: -28px; top: 58px; width: 18px; }
    .gallery-note h3 { font-size: 9vw; }
    .ba-col b { font-size: 18vw; }
    .next-project b { font-size: 12vw; }
    .demo { border-width: 2px; border-radius: 10px; }
    .demo-stamp { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .reveal-img { opacity: 1; transform: none; transition: none; }
    #page-wipe { display: none; }
}

/* ==========================================================================
   AJOUTS — immersion, entrepreneur, personnalité
   ========================================================================== */

/* --- Hero : trace orange qui suit la souris --- */
#hero-trail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }

/* --- Bandeau défilant (les losanges pixel du curseur servent de séparateurs) --- */
.marquee { overflow: hidden; white-space: nowrap; padding-top: 12vw; }
.marquee-track { display: inline-flex; align-items: center; will-change: transform; }
.marquee-track span { font-family: "PolySans Slim", sans-serif; font-size: 14vw; line-height: 1.1; letter-spacing: -2px; padding: 0 4vw; }
.marquee-track svg { width: 7vw; height: 7vw; flex: none; }
@media (min-width: 1024px) {
    .marquee { padding-top: 8vw; }
    .marquee-track span { font-size: 6.8vw; letter-spacing: -1px; padding: 0 2.5vw; }
    .marquee-track svg { width: 3.4vw; height: 3.4vw; }
    .marquee + .spacer3 { height: 160px; }
}

/* --- Entreprendre --- */
.e-text { font-size: 1.5rem; line-height: 1.6; font-weight: 300; margin: 40px 0 0; }
.e-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vw; margin-top: 40px; }
.e-stats b { display: block; font-family: "PolySans Slim", sans-serif; font-weight: normal; font-size: 4.4vw; line-height: 1; color: #ef8611; letter-spacing: -1px; }
.e-stats span { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.venture { display: block; text-decoration: none; color: #400601; padding: 34px 0 38px; border-top: 3px solid #400601; }
.venture:last-child { border-bottom: 3px solid #400601; }
.venture .project-title { margin: 0 0 10px; transition: color 0.3s ease, transform 0.4s ease; }
.venture .project-desc { max-width: 46ch; margin: 0 0 20px; }
.venture-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag-o { font-size: 0.8rem; padding: 8px 16px; border-radius: 50px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px; background-color: #ffffff; color: #ef8611; border: 1px solid #ef8611; }
.venture-link { display: inline-block; margin-top: 22px; font-weight: 700; border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: color 0.3s ease; }
.venture:hover .project-title { color: #ef8611; transform: translateX(10px); }
.venture:hover .venture-link { color: #ef8611; }
@media (min-width: 1024px) {
    .entreprendre { display: grid; grid-template-columns: 43% 47%; justify-content: space-between; align-items: start; padding-top: 6vh; }
    .entreprendre h2 { font-size: 5.6vw; }
    .e-left { position: -webkit-sticky; position: sticky; top: 14vh; }
}
@media (max-width: 1023px) {
    .entreprendre { padding-top: 20px; }
    .entreprendre h2 { font-size: 12vw; }
    .e-text { font-size: 1.2rem; margin-top: 24px; }
    .e-stats { gap: 24px; margin-bottom: 50px; }
    .e-stats b { font-size: 14vw; }
    .venture .project-flag { display: inline-block; margin: 8px 0 0; top: 0; }
}

/* --- Qui je suis : mots réactifs --- */
.passion-highlight { text-decoration: underline wavy #ef8611; text-decoration-thickness: 2px; text-underline-offset: 6px; }
#passion-fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 99990; overflow: visible; }

/* --- Vidéo à gratter --- */
#video-canvas { touch-action: pan-y; }
.video-hint { position: absolute; left: 22px; bottom: 20px; z-index: 4; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #ffffff; pointer-events: none; }
@media (max-width: 1023px) {
    .bio-video-col { display: flex; width: 100%; flex: none; margin: 30px 0 0; border-radius: 20px; }
    .bio-video-col::after { border-radius: 0 0 20px 20px; }
}

/* --- Au quotidien : liste de verbes, aperçu qui suit la souris --- */
.verbs { padding-top: 14vh; }
.verb { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 1.1vw 0; border-bottom: 1px solid rgba(255, 255, 255, 0.3); transition: opacity 0.3s ease; }
.verb:first-child { border-top: 1px solid rgba(255, 255, 255, 0.3); }
.verb b { font-family: "PolySans Slim", sans-serif; font-weight: normal; font-size: 12vw; line-height: 1.15; letter-spacing: -2px; transition: color 0.25s ease-out, transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); }
.verb span { font-size: 1rem; font-weight: 300; text-align: right; }
@media (min-width: 1024px) {
    .verb b { font-size: 6.8vw; letter-spacing: -1px; white-space: nowrap; }
    .verb span { font-size: 1.5rem; }
    .verbs-list:hover .verb { opacity: 0.35; }
    .verbs-list .verb:hover { opacity: 1; }
    .verb:hover b { color: #ef8611 !important; transform: translateX(1.5vw); }
}
.verb-preview { position: fixed; left: 0; top: 0; width: 24vw; aspect-ratio: 4 / 3; border: 4px solid #ffffff; border-radius: 20px; overflow: hidden; pointer-events: none; z-index: 60; opacity: 0; background: #080908; transform: translate(-50%, -50%) scale(0.8) rotate(-5deg); transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); }
.verb-preview.on { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
.verb-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.verb-doodle { position: absolute; inset: 0; }
.verb-doodle svg { width: 100%; height: 100%; display: block; }
@media (max-width: 1023px) { .verb-preview { display: none; } }
.verb-preview img[hidden] { display: none; }
@media (max-width: 1023px) {
    .verb { flex-direction: column; align-items: flex-start; gap: 0; padding: 10px 0 14px; }
    .verb span { text-align: left; }
    .venture .project-flag { display: table; margin: 10px 0 0; }
}

/* --- Photos perso --- */
.venture-img { border: 4px solid #400601; border-radius: 20px; overflow: hidden; height: 360px; margin-bottom: 24px; transition: border-color 0.4s ease; }
.venture-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; display: block; transition: transform 0.5s ease; }
.venture:hover .venture-img { border-color: #ef8611; }
.venture:hover .venture-img img { transform: scale(1.05); }
.verb-preview.portrait { aspect-ratio: 3 / 4; width: 18vw; }

.escape { padding-top: 14vh; }
.escape-photo { position: relative; margin: 0; border: 4px solid #ffffff; border-radius: 20px; overflow: hidden; aspect-ratio: 3 / 4.6; }
.escape-photo img { width: 100%; height: 112%; object-fit: cover; display: block; will-change: transform; }
.escape-photo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (min-width: 1024px) {
    .escape { display: grid; grid-template-columns: 36% 50%; justify-content: space-between; align-items: center; }
    .escape-text h2 { margin-bottom: 40px; }
}
@media (max-width: 1023px) {
    .venture-img { border-width: 2px; border-radius: 10px; height: 300px; }
    .escape-photo { border-width: 2px; border-radius: 10px; margin-bottom: 30px; }
    .escape-text h2 { margin: 0 0 24px; }
}

/* =========================================
   ENTREPRENDRE (v2) — une phrase, puis quatre cartes qui s'empilent
   ========================================= */
.entreprendre { display: block !important; padding-top: 4vh; }
.entreprendre h2 { font-size: 14vw; }
.e-statement { font-size: 1.6rem; line-height: 1.3; font-weight: 500; color: #ffffff; margin: 36px 0 0; }
.e-stack { display: flex; flex-direction: column; gap: 40px; margin-top: 60px; }
.e-card { display: block; border: 2px solid #400601; border-radius: 10px; overflow: hidden; background: #D9D9D9; color: #400601; text-decoration: none; transition: border-color 0.4s ease; will-change: transform; }
.e-card-text { padding: 24px 20px 28px; display: flex; flex-direction: column; gap: 28px; }
.e-num { display: block; font-size: 1.2rem; font-weight: 500; color: #ef8611; margin-bottom: 10px; }
.e-card h3 { font-family: "PolySans Slim", sans-serif; font-weight: normal; font-size: 11vw; line-height: 1.05; letter-spacing: -1px; margin: 0 0 14px; transition: color 0.3s ease; }
.e-card .project-flag { margin: 0; top: 0; }
.e-pitch { font-size: 1.3rem; line-height: 1.35; font-weight: 500; margin: 0 0 18px; }
.e-role { font-size: 1.05rem; line-height: 1.55; font-weight: 300; margin: 0; }
.e-role b { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #ef8611; margin-bottom: 6px; }
.e-card-img { height: 260px; overflow: hidden; border-top: 2px solid #400601; background: #400601; transition: border-color 0.4s ease; }
.e-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.e-card-img--top img { object-position: left top; }
.e-card-img--face img { object-position: 50% 22%; }
.e-card-img--object img { object-fit: contain; padding: 26px; }
.e-card:hover, .e-card:hover .e-card-img { border-color: #ef8611; }
.e-card:hover h3, .e-card:hover .venture-link { color: #ef8611; }
.e-card:hover .e-card-img img { transform: scale(1.05); }
@media (min-width: 1024px) {
    .entreprendre h2 { font-size: 6.8vw; }
    .e-head { display: grid; grid-template-columns: 50% 42%; justify-content: space-between; align-items: end; }
    .e-statement { font-size: 2em; margin: 0 0 1vw; }
    .e-stack { gap: 8vh; margin-top: 12vh; padding-bottom: 6vh; }
    .e-card { position: -webkit-sticky; position: sticky; top: calc(9vh + var(--i) * 26px); display: grid; grid-template-columns: 1fr 1fr; height: 72vh; min-height: 520px; border-width: 4px; border-radius: 20px; }
    .e-card-text { padding: 3vw; justify-content: space-between; gap: 20px; }
    .e-num { font-size: 1.5rem; margin-bottom: 1.4vw; }
    .e-card h3 { font-size: 4.8vw; white-space: nowrap; margin-bottom: 1.2vw; }
    .e-pitch { font-size: 1.9rem; max-width: 20em; }
    .e-role { font-size: 1.2rem; max-width: 30em; }
    .e-card-img { height: auto; border-top: 0; border-left: 4px solid #400601; }
    .e-card-img--object img { padding: 4vw; }
}

/* =========================================
   HERO façon affiche — texte derrière la tête, texte devant le buste
   ========================================= */
.hero2 { background-image: none; height: 100vh; height: 100svh; min-height: 560px; padding: 0 20px; overflow: hidden; color: #ef8611; }
.h-back, .h-front { position: absolute; left: 20px; right: 20px; margin: 0; font-family: "Manrope", sans-serif; font-weight: 800; line-height: 0.8; letter-spacing: -0.045em; color: #ef8611; white-space: nowrap; overflow: hidden; padding-bottom: 0.06em; will-change: transform; }
.h-back { top: 11svh; z-index: 1; }
.h-front { bottom: 5svh; z-index: 4; }
.h-fit { display: inline-block; font-size: 24vw; will-change: transform; }
.h-fit .char { display: inline-block; will-change: transform; transition: color 0.25s ease; }
.h-front .char:hover { color: #400601; }
#hero-trail { z-index: 2; }
.h-portrait { position: absolute; left: 50%; bottom: 0; z-index: 3; height: 76svh; transform: translateX(-50%); pointer-events: none; }
.h-portrait img { height: 100%; width: auto; max-width: none; display: block; will-change: transform; }

.h-label { position: absolute; z-index: 5; margin: 0; font-size: 0.72rem; line-height: 1.15; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: #ef8611; }
.h-label a { display: block; color: #ef8611; text-decoration: none; transition: color 0.2s ease, transform 0.3s ease; }
.h-label a:hover { color: #400601; transform: translateX(6px); }
.h-l1 { left: 20px; top: 34svh; }
.h-l2 { right: 20px; top: 34svh; text-align: right; }
.h-nav, .h-l3, .h-l4, .h-year { display: none; }
.h-year { position: absolute; z-index: 5; margin: 0; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: #ef8611; }

@media (min-width: 1024px) {
    .hero2 { padding: 0 1.4vw; }
    .h-back, .h-front { left: 1.4vw; right: 1.4vw; }
    .h-back { top: 2.5vh; }
    .h-front { bottom: 3.5vh; }
    .h-portrait { height: 94vh; }
    .h-label { font-size: 0.86vw; }
    .h-nav, .h-l3, .h-l4, .h-year { display: block; }
    /* les mentions se calent sur la hauteur des deux grands mots (qui dépend de la largeur) */
    .h-l1 { left: 24vw; top: calc(2.5vh + 24vw); }
    .h-l2 { left: 24vw; right: auto; top: calc(2.5vh + 27.6vw); text-align: left; }
    .h-nav { left: 76.5vw; top: calc(2.5vh + 24vw); }
    .h-l3 { left: 24vw; bottom: calc(3.5vh + 19.4vw); }
    .h-year { left: 1.4vw; bottom: calc(3.5vh + 18.8vw); font-size: 5vw; }
    .h-l4 { right: 1.4vw; bottom: calc(3.5vh + 19.4vw); text-align: right; }
}

/* ==========================================================================
   RETOUCHES — portrait fondu, méthode en maquette vivante, volets Entreprendre,
   révélation vidéo douce, « En dehors de l'écran » discret
   ========================================================================== */

/* --- 1. Portrait : le bas se fond dans le gris au lieu d'être coupé net --- */
.h-portrait img { -webkit-mask-image: linear-gradient(to bottom, #000 52%, rgba(0, 0, 0, 0.55) 72%, transparent 92%); mask-image: linear-gradient(to bottom, #000 52%, rgba(0, 0, 0, 0.55) 72%, transparent 92%); }
.spacer3 { height: 22vh; }

/* --- 3. Ma méthode --- */
.mt { height: 420vh; }
.mt-sticky { position: -webkit-sticky; position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 4vh; }
.mt-stage { position: relative; height: 34vh; min-height: 210px; }
.mt-step { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s; }
.mt-step.active { opacity: 1; visibility: visible; transition-delay: 0.15s; }
.mt-step h2 { margin: 0 0 18px; transform: translateY(40px); transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1); }
.mt-step.active h2 { transform: none; }
.mt-count { display: block; font-size: 1.2rem; font-weight: 500; color: #ef8611; margin-bottom: 8px; }
.mt-text { font-size: 1.2rem; line-height: 1.45; font-weight: 300; margin: 0; max-width: 24em; }
.mt-dots { display: flex; gap: 10px; }
.mt-dot { width: 34px; height: 6px; border-radius: 6px; border: 0; padding: 0; background: rgba(64, 6, 1, 0.2); cursor: none; transition: background-color 0.3s ease, width 0.4s ease; }
.mt-dot.done { background: #400601; }
.mt-dot.active { background: #ef8611; width: 64px; }

.mock { position: relative; aspect-ratio: 4 / 3; border: 2px solid #400601; border-radius: 10px; overflow: hidden; background: #e9e9e9; }
.mk-ui { position: absolute; inset: 0; padding: 6%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 7% 9% 9% 11% 1fr; gap: 4.5% 5%; transform-origin: 0 50%; transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease; }
.mk-ui > div, .mk-cards i { border: 1.5px dashed rgba(64, 6, 1, 0.55); border-radius: 8px; transition: background-color 0.6s ease, border-color 0.6s ease, border-radius 0.6s ease, opacity 0.6s ease; }
.mk-bar { grid-column: 1 / -1; }
.mk-title { grid-column: 1; }
.mk-title--2 { width: 68%; }
.mk-btn { grid-column: 1; width: 44%; }
.mk-img { grid-column: 2; grid-row: 2 / 5; overflow: hidden; }
.mk-img img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transform: scale(1.15); transition: opacity 0.7s ease, transform 1.2s ease; }
.mk-ui > .mk-cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5%; border: 0; }
.mk-cards i { display: block; }
.mk-circle { position: absolute; left: 1.5%; top: 37%; width: 33%; height: 19%; overflow: visible; }
.mk-circle path { stroke-width: 9px; }
.mk-circle path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s ease 0.3s; }

/* étape 1 : les questions, sur des post-its */
.mk-notes span { position: absolute; padding: 4% 5%; background: #ffffff; color: #400601; font-weight: 700; font-size: clamp(0.8rem, 1.5vw, 1.4rem); border-radius: 6px; box-shadow: 0 10px 24px -12px rgba(64, 6, 1, 0.5); transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease; }
.mk-notes span:nth-child(1) { left: 10%; top: 14%; transform: rotate(-5deg); }
.mk-notes span:nth-child(2) { left: 52%; top: 24%; transform: rotate(4deg); background: #ef8611; color: #ffffff; }
.mk-notes span:nth-child(3) { left: 18%; top: 56%; transform: rotate(3deg); }
.mk-notes span:nth-child(4) { left: 58%; top: 64%; transform: rotate(-4deg); }
.mock[data-step="0"] .mk-ui { opacity: 0; transform: scale(0.94); }
.mock:not([data-step="0"]) .mk-notes span { opacity: 0; }
.mock:not([data-step="0"]) .mk-notes span:nth-child(odd) { transform: translate(-60%, -40%) rotate(-20deg); }
.mock:not([data-step="0"]) .mk-notes span:nth-child(even) { transform: translate(60%, 40%) rotate(20deg); }

/* étape 3 et suivantes : la maquette prend ses couleurs */
.mock:is([data-step="2"], [data-step="3"], [data-step="4"]) .mk-ui > div:not(.mk-cards), .mock:is([data-step="2"], [data-step="3"], [data-step="4"]) .mk-cards i { border-style: solid; border-color: #400601; }
.mock:is([data-step="2"], [data-step="3"], [data-step="4"]) :is(.mk-bar, .mk-title) { background: #400601; }
.mock:is([data-step="2"], [data-step="3"], [data-step="4"]) .mk-title--2 { opacity: 0.45; }
.mock:is([data-step="2"], [data-step="3"], [data-step="4"]) .mk-btn { background: #ef8611; border-color: #ef8611 !important; border-radius: 99px; }
.mock:is([data-step="2"], [data-step="3"], [data-step="4"]) .mk-img img { opacity: 1; transform: none; }
.mock:is([data-step="2"], [data-step="3"], [data-step="4"]) .mk-cards i { background: #ffffff; }

/* étape 4 : le code arrive à côté */
.mk-code { position: absolute; top: 0; right: 0; bottom: 0; width: 44%; background: #080908; padding: 8% 5%; display: flex; flex-direction: column; gap: 4.5%; transform: translateX(101%); transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
.mk-code i { display: block; height: 4%; width: var(--w); margin-left: var(--x); border-radius: 4px; background: rgba(255, 255, 255, 0.45); transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease; }
.mk-code i.o { background: #ef8611; }
.mock[data-step="3"] .mk-code { transform: none; }
.mock[data-step="3"] .mk-code i { transform: none; transition-delay: calc(0.35s + var(--n) * 0.07s); }
.mock[data-step="3"] .mk-ui { transform: scale(0.56); }

/* étape 5 : le détail, entouré à la main */
.mock[data-step="4"] .mk-circle path { stroke-dashoffset: 0; }

@media (min-width: 1024px) {
    .mt-sticky { flex-direction: row; align-items: center; justify-content: space-between; gap: 0; }
    .mt-left { width: 42%; }
    .mt-right { width: 48%; }
    .mt-stage { height: 21vw; }
    .mt-count { font-size: 1.5rem; }
    .mt-text { font-size: 1.5rem; }
    .mock { border-width: 4px; border-radius: 20px; }
}

/* --- 5. Entreprendre : quatre volets --- */
.e-panels { display: flex; flex-direction: column; gap: 10px; margin-top: 40px; }
.e-panel { position: relative; height: 76px; border: 2px solid #400601; border-radius: 10px; overflow: hidden; background: #400601; color: #ffffff; transition: height 0.6s cubic-bezier(0.25, 1, 0.5, 1), flex-grow 0.7s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease; cursor: none; }
.e-panel.active { height: 440px; }
.e-panel-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease, opacity 0.6s ease; opacity: 0.45; }
.e-panel--top .e-panel-bg { object-position: left top; }
.e-panel--face .e-panel-bg { object-position: 50% 20%; }
.e-panel--object .e-panel-bg { object-fit: contain; padding: 30px 30px 150px; }
.e-panel.active .e-panel-bg { opacity: 1; }
.e-panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(8, 9, 8, 0) 35%, rgba(8, 9, 8, 0.88) 78%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }
.e-panel.active::after { opacity: 1; }
.e-panel-tab { position: absolute; left: 18px; top: 0; height: 72px; display: flex; align-items: center; gap: 14px; z-index: 2; transition: opacity 0.3s ease; }
.e-panel-tab span { color: #ef8611; font-weight: 800; }
.e-panel-tab b { font-family: "PolySans Slim", sans-serif; font-weight: normal; font-size: 1.6rem; letter-spacing: -0.5px; white-space: nowrap; }
.e-panel.active .e-panel-tab { opacity: 0; }
.e-panel-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 20px; z-index: 2; opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.5s ease; pointer-events: none; }
.e-panel.active .e-panel-body { opacity: 1; transform: none; transition-delay: 0.25s; pointer-events: auto; }
.e-panel-body .project-flag { margin: 0 0 12px; top: 0; }
.e-panel-body h3 { font-family: "PolySans Slim", sans-serif; font-weight: normal; font-size: 2.4rem; line-height: 1.05; letter-spacing: -1px; margin: 0 0 10px; white-space: nowrap; }
.e-panel-body p { font-size: 1.05rem; line-height: 1.45; font-weight: 400; margin: 0 0 18px; max-width: 30em; }
.e-links { display: flex; gap: 10px; flex-wrap: wrap; }
.e-links .btn { border-color: #ffffff; color: #ffffff; font-size: 1rem; padding: 8px 18px 10px; border-radius: 99px; }
.e-links .btn:hover { background: #ffffff; color: #ef8611 !important; }
@media (min-width: 1024px) {
    .e-panels { flex-direction: row; gap: 14px; height: 62vh; min-height: 440px; margin-top: 8vh; }
    .e-panel, .e-panel.active { height: auto; }
    .e-panel { flex: 1 1 0; min-width: 0; border-width: 4px; border-radius: 20px; }
    .e-panel.active { flex-grow: 5.5; }
    .e-panel:hover { border-color: #ef8611; }
    .e-panel-tab { left: 0; right: 0; top: auto; bottom: 0; height: 100%; flex-direction: column-reverse; justify-content: flex-start; align-items: center; padding-bottom: 26px; gap: 18px; }
    .e-panel-tab b { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 2.2vw; }
    .e-panel-tab span { font-size: 1.2rem; }
    .e-panel-body { padding: 2.4vw; width: 46vw; right: auto; }
    .e-panel-body h3 { font-size: 3.6vw; }
    .e-panel-body p { font-size: 1.2rem; }
    .e-panel--object .e-panel-bg { padding: 3vw 3vw 15vw; }
}

/* --- 6. Vidéo : le libellé, plus discret --- */
.video-hint { font-weight: 500; letter-spacing: 1px; opacity: 0.7; }

/* --- 8. En dehors de l'écran : une simple ligne --- */
.escape2 { padding-top: 12vh; }
.escape2 .escape-photo { border: 0; border-radius: 10px; aspect-ratio: 4 / 5; width: 46%; margin: 0 0 24px; }
.escape2 .bio-text { margin-bottom: 0; }
@media (min-width: 1024px) {
    .escape2 { display: flex; align-items: center; gap: 4vw; }
    .escape2 .escape-photo { width: 15vw; flex: none; margin: 0; border-radius: 20px; }
    .escape2-text { max-width: 36em; }
}

/* Volet Studio PARFAIT : le logo sur son fond brun, avec le halo orange de l'identité du studio */
.e-panel--object { background: radial-gradient(120% 90% at 85% 100%, rgba(239, 134, 17, 0.55), rgba(239, 134, 17, 0) 60%), radial-gradient(90% 70% at 10% 0%, rgba(120, 30, 6, 0.9), rgba(120, 30, 6, 0) 70%), #1c0a05; }
.e-panel--object .e-panel-bg { padding: 22px 60px 268px; }
.e-panel--object::after { background: linear-gradient(to bottom, rgba(8, 9, 8, 0) 45%, rgba(8, 9, 8, 0.7) 85%); }
@media (min-width: 1024px) {
    .e-panel--object .e-panel-bg { padding: 3vw 10vw 21vw; }
    .e-panel--object:not(.active) .e-panel-bg { padding: 2vw 1.2vw 0; object-position: 50% 8%; height: 30%; }
}

/* ==========================================================================
   MOBILE — passe de finition
   ========================================================================== */
[hidden] { display: none !important; }
a, button, .e-panel, .dim, .accordion-header { -webkit-tap-highlight-color: transparent; }

@media (max-width: 1023px) {
    /* marges égales à gauche et à droite : plus de largeur utile */
    .module { padding-left: 24px; padding-right: 24px; }
    .passion-container { padding: 0 24px; }

    /* bouton « retour en haut » : plus petit, il ne recouvre plus le texte */
    #scrollToTopBtn { width: 46px; height: 46px; padding: 0; font-size: 1.5rem; line-height: 1; display: grid; place-items: center; bottom: 14px; right: 14px; }

    /* moins de vide entre le hero et la suite */
    .spacer3 { height: 6vh !important; }
    .spacer { height: 16vw; }
    .module1 { margin-top: 20px; padding-bottom: 80px; }
    /* l'ellipse entoure bien « l'expérience. » */
    #orange-animation { left: -5%; right: auto; width: 80%; bottom: -8px; }

    /* méthode : plus courte à parcourir, bloc resserré et centré */
    .mt { height: 330vh; }
    .mt-sticky { gap: 26px; }
    .mt-stage { height: auto; min-height: 0; display: grid; }
    .mt-step { position: relative; inset: auto; grid-area: 1 / 1; }
    .mt-step h2 { font-size: 15vw; margin: 0 0 12px; }
    .mt-dots { margin-top: 22px; }

    /* projets */
    .project-image-wrapper { height: 230px; }
    .mobile-progress-container { top: 14px; }

    /* entreprendre */
    .e-panel-body { padding: 20px 22px 22px 20px; }
    .e-panel-body h3 { font-size: 2.1rem; white-space: normal; }

    /* qui je suis : le parcours s'empile au lieu de se couper en deux colonnes */
    .parcours li { flex-direction: column; align-items: flex-start; gap: 2px; }
    .parcours span { text-align: left; opacity: 0.8; }
    .bio-video-col { margin-top: 40px; }

    /* contacts */
    .contact-item { font-size: 1.4rem; }
    .contact-divider { width: 100%; height: 2px; }
    #contactLinks { padding: 20px 24px 110px; }

    /* pages projet */
    .back-button { top: 14px; right: 14px; padding: 6px 18px; font-size: 0.9rem; }
    .project-sidebar { padding: 70px 24px 36px; }
    .project-gallery { padding: 24px; }
    .gallery-item, .big-bento, .small-bento { min-height: 0; }
    .gallery-item img, .gallery-item video { height: auto; }   /* les visuels gardent leurs proportions */
    .next-project { padding-top: 34px; }
    /* le plan de la démo reste lisible : il défile à l'horizontale */
    .demo-plan { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .demo-plan svg { width: 560px; max-width: none; }
    .demo-stamp { right: auto; left: 150px; bottom: 14%; }
    .demo-head, .demo-report { padding-left: 16px; padding-right: 16px; }
    .demo-actions .btn-contact { padding: 12px 20px; }
}

/* ==========================================================================
   RETOUCHES 2 — flèches en tracé, portrait décentré sur mobile, Entreprendre en
   carrousel, « Qui je suis » et « Au quotidien » sur mobile, phrase « hors écran »
   ========================================================================== */

/* --- flèches : de petits tracés (les caractères ↗ s'affichent en émoji sur téléphone) --- */
.arr { display: inline-block; width: 0.62em; height: 0.62em; margin-left: 0.45em; vertical-align: 0.04em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
#scrollToTopBtn .arr { margin: 0; width: 0.5em; height: 0.5em; }
@media (min-width: 1024px) { #scrollToTopBtn { width: 64px; height: 64px; padding: 0; display: grid; place-items: center; font-size: 2.6rem; } }

/* --- 1. portrait : position indépendante des animations ; décentré vers la droite sur mobile --- */
.h-portrait { transform: none; translate: -50% 0; }
@media (max-width: 1023px) {
    .h-portrait { translate: -36% 0; height: 80svh; }
    .h-l1 { top: 31svh; }
    .h-l2 { left: 20px; right: auto; text-align: left; top: calc(31svh + 3.2em); }
}

/* --- 4. Au quotidien : vignettes (mobile) --- */
.verb-thumb { display: none; }

/* --- 5. En dehors de l'écran : une phrase, la photo glissée dedans --- */
.escape3 { padding-top: 14vh; }
.escape3-line { font-family: "PolySans Slim", sans-serif; font-size: 9.4vw; line-height: 1.18; letter-spacing: -1px; margin: 0; }
.pill { display: inline-block; width: 1.75em; height: 0.86em; border-radius: 99px; overflow: hidden; vertical-align: -0.1em; transition: width 0.7s cubic-bezier(0.25, 1, 0.5, 1); }
.pill img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 46%; display: block; }
.escape3-sub { font-size: 1.05rem; line-height: 1.6; font-weight: 300; margin: 26px 0 0; max-width: 32em; opacity: 0.85; }
@media (min-width: 1024px) {
    .escape3-line { font-size: 4.6vw; max-width: 17em; }
    .escape3-line:hover .pill { width: 3.6em; }
    .escape3-sub { font-size: 1.3rem; margin-top: 2.4vw; }
}

.e-hint { display: none; }

@media (max-width: 1023px) {
    /* --- 2. Entreprendre : un carrousel de cartes à faire glisser, tout est visible sans toucher --- */
    .e-panels { flex-direction: row; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 34px -24px 0; padding: 0 24px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .e-panels::-webkit-scrollbar { display: none; }
    .e-panel, .e-panel.active { flex: 0 0 84%; height: auto; scroll-snap-align: center; display: flex; flex-direction: column; background: #D9D9D9; color: #400601; }
    .e-panel-bg, .e-panel.active .e-panel-bg { position: relative; inset: auto; flex: none; height: 200px; opacity: 1; border-bottom: 2px solid #400601; }
    .e-panel--object .e-panel-bg { padding: 40px 58px; object-fit: contain; background: radial-gradient(120% 90% at 85% 100%, rgba(239, 134, 17, 0.55), rgba(239, 134, 17, 0) 60%), #1c0a05; }
    .e-panel::after, .e-panel-tab { display: none; }
    .e-panel-body, .e-panel.active .e-panel-body { position: static; opacity: 1; transform: none; pointer-events: auto; transition: none; padding: 18px 18px 22px; display: flex; flex-direction: column; flex: 1; }
    .e-panel-body h3 { font-size: 1.9rem; }
    .e-panel-body p { font-size: 1rem; flex: 1; margin-bottom: 20px; }
    .e-links .btn { border-color: #400601; color: #400601; font-size: 0.95rem; }
    .e-hint { display: block; margin: 16px 0 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; opacity: 0.6; }

    /* --- 3. Qui je suis : la vidéo d'abord, en pleine largeur, puis un texte hiérarchisé --- */
    .passion-container { margin-top: 24px; }
    .bio-video-col { order: -1; width: calc(100% + 48px); margin: 0 -24px 36px; border-radius: 0; }
    .bio-video-col::after { border-radius: 0; }
    body.dark-mode .bio-video-col { transition: opacity 1s ease 0.3s; }
    .video-hint { left: 24px; bottom: 18px; }
    .bio-text { font-size: 1.02rem; line-height: 1.65; margin-bottom: 1.3rem; opacity: 0.9; }
    .bio-text:first-of-type { font-size: 1.35rem; line-height: 1.4; font-weight: 400; opacity: 1; margin-bottom: 1.6rem; }
    .parcours { margin: 2.2rem 0 2rem; }

    /* --- 4. Au quotidien : chaque ligne montre sa vignette, plus besoin de survol --- */
    .verb { display: grid; grid-template-columns: 1fr 92px; column-gap: 16px; align-items: center; padding: 14px 0; }
    .verb b { grid-column: 1; font-size: 10.5vw; line-height: 1.1; }
    .verb span { grid-column: 1; opacity: 0.8; }
    .verb-thumb { display: block; grid-column: 2; grid-row: 1 / span 2; width: 92px; height: 72px; border-radius: 10px; overflow: hidden; }
    .verb-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; }
}
@media (max-width: 1023px) {
    .e-panel-body .project-flag { align-self: flex-start; }
    .pill { width: 2.3em; height: 1em; vertical-align: -0.16em; }
}