@font-face{font-family:"Section Ten Inter";src:url("fonts/inter.woff2") format("woff2");font-style:normal;font-weight:400 700;font-display:swap}
@font-face{font-family:"Section Ten Inter Tight";src:url("fonts/inter-tight.woff2") format("woff2");font-style:normal;font-weight:400 700;font-display:swap}

.section-ten{--ease-out-expo:cubic-bezier(.16,1,.3,1);--dur-quick:300ms;--dur-slow:700ms;position:relative;isolation:isolate;width:100%;height:100svh;overflow:hidden;background:#050505;color:#fff;font-family:"Section Ten Inter",Arial,sans-serif;-webkit-font-smoothing:antialiased;touch-action:pan-y}
.section-ten__media,.section-ten__poster,.section-ten__film,.section-ten__vignette{position:absolute;inset:0;width:100%;height:100%}
.section-ten__poster,.section-ten__film{object-fit:cover;object-position:center center}
.section-ten__poster{z-index:0}
.section-ten__film{z-index:1;opacity:0;display:block}
.face-spiral-sequence.is-film-ready .section-ten__poster{opacity:0}
.face-spiral-sequence.is-film-ready .section-ten__film{opacity:1}
.section-ten__vignette{z-index:2;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.45) 100%)}
.section-ten__headline{position:absolute;inset:0;z-index:10;pointer-events:none;transform:translate3d(var(--section-ten-x,0px),var(--section-ten-y,0px),0)}
.section-ten__headline h2{margin:0;font:500 clamp(56px,10.5vw,190px)/.86 "Section Ten Inter Tight","Section Ten Inter",sans-serif;letter-spacing:-.035em}
.section-ten__word{position:absolute;display:block;white-space:nowrap;color:#fff}
.section-ten__word--first{top:26%;left:3vw}
.section-ten__word--second{top:52%;right:3vw}
.section-ten__intro{position:absolute;top:44%;left:clamp(32px,3.4vw,48px);z-index:20;width:min(230px,42vw);font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.75)}
.section-ten__intro p{margin:0}
.section-ten__link{position:relative;display:inline-block;margin-top:24px;color:#fff;font-size:13.5px;font-weight:500;text-decoration:none}
.section-ten__link::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:currentColor;transform-origin:right;transform:scaleX(1);transition:transform var(--dur-quick) var(--ease-out-expo)}
.section-ten__link:hover::after,.section-ten__link:focus-visible::after{animation:section-ten-underline .5s var(--ease-out-expo)}
@keyframes section-ten-underline{0%{transform:scaleX(1);transform-origin:right}50%{transform:scaleX(0);transform-origin:right}51%{transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}
.section-ten__footer{position:absolute;z-index:20;left:clamp(32px,3.4vw,48px);right:clamp(32px,3.4vw,48px);bottom:28px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:rgba(255,255,255,.8);font-size:13px}
.section-ten__hint{position:absolute;z-index:20;left:0;right:0;bottom:12%;margin:0;text-align:center;white-space:nowrap;color:rgba(255,255,255,.6);font-size:10px;letter-spacing:.15em;text-transform:uppercase}
.section-ten__hint--touch{display:none}
.section-ten.has-motion:not(.is-active) .section-ten__word{opacity:0;transform:translateY(60%)}
.section-ten.has-motion:not(.is-active) .section-ten__intro,.section-ten.has-motion:not(.is-active) .section-ten__footer span,.section-ten.has-motion:not(.is-active) .section-ten__hint{opacity:0;transform:translateY(24px)}
.section-ten.has-motion.is-active .section-ten__word{animation:section-ten-title-in 1.4s cubic-bezier(.22,1,.36,1) both}
.section-ten.has-motion.is-active .section-ten__word--first{animation-delay:.2s}
.section-ten.has-motion.is-active .section-ten__word--second{animation-delay:.32s}
.section-ten.has-motion.is-active .section-ten__intro,.section-ten.has-motion.is-active .section-ten__footer span,.section-ten.has-motion.is-active .section-ten__hint{animation:section-ten-fade-in 1s cubic-bezier(.22,1,.36,1) both}
.section-ten.has-motion.is-active .section-ten__intro{animation-delay:.7s}
.section-ten.has-motion.is-active .section-ten__footer span:nth-child(1){animation-delay:.78s}
.section-ten.has-motion.is-active .section-ten__footer span:nth-child(2){animation-delay:.86s}
.section-ten.has-motion.is-active .section-ten__footer span:nth-child(3){animation-delay:.94s}
.section-ten.has-motion.is-active .section-ten__footer span:nth-child(4){animation-delay:1.02s}
.section-ten.has-motion.is-active .section-ten__hint{animation-delay:1.1s}
@keyframes section-ten-title-in{from{opacity:0;transform:translateY(60%)}to{opacity:1;transform:translateY(0)}}
@keyframes section-ten-fade-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
body.section-ten-active .site-header{font-family:"Section Ten Inter",Arial,sans-serif}
body.section-ten-active .site-header .brand-wordmark small,body.section-ten-active .site-header .nav-main,body.section-ten-active .site-header .nav-desktop [data-open-contact]{display:none}
body.section-ten-active .site-header .brand-wordmark>span{font-size:15px;font-weight:600;letter-spacing:.08em}
body.section-ten-active .site-header .nav-small,body.section-ten-active .site-header .nav-mobile{font-size:14px;font-weight:500;letter-spacing:0;text-transform:none}
body.section-ten-active .side-rail{opacity:0}


@media(max-width:700px){
  .section-ten__word--first{top:20%;left:6vw}
  .section-ten__word--second{top:58%;right:5vw}
  .section-ten__headline h2{font-size:clamp(56px,13vw,96px)}
  .section-ten__intro{top:39%;left:7vw;width:min(190px,56vw);font-size:12px;line-height:1.45}
  .section-ten__link{margin-top:12px;font-size:12px}
  .section-ten__footer{left:7vw;right:7vw;bottom:22px;font-size:11px}
  .section-ten__footer span:nth-child(2),.section-ten__footer span:nth-child(3){display:none}
  .section-ten__hint{bottom:13%;font-size:8px;letter-spacing:.08em}
  .section-ten__hint--mouse{display:none}.section-ten__hint--touch{display:inline}
  .section-ten__poster,.section-ten__film{object-position:center center}
}
@media(max-width:700px) and (max-height:650px){.section-ten__word--first{top:19%}.section-ten__word--second{top:60%}.section-ten__intro{top:37%}.section-ten__hint{bottom:14%}.section-ten__footer{bottom:14px}}
@media(prefers-reduced-motion:reduce){.section-ten *, .section-ten *::before,.section-ten *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.section-ten__film{display:none}.section-ten__poster{opacity:1!important}.section-ten__headline{transform:none!important}}

/* La vidéo est le fond commun des sections 8 et 9 ; les cartes 3D passent devant. */
.face-spiral-sequence{--dur-slow:700ms;position:relative;isolation:isolate;background:#050505}
.face-spiral-sequence__backdrop{position:sticky;top:0;z-index:0;height:100svh;margin-bottom:-100svh;overflow:hidden;pointer-events:none;background:#050505}
.face-spiral-sequence .section-ten{z-index:1;background:transparent}
.face-spiral-sequence .portfolio-spiral{z-index:2;background:transparent}
.face-spiral-sequence .portfolio-spiral__sticky{background:transparent}
.face-spiral-sequence .section-ten__vignette{display:none}
@media(prefers-reduced-motion:reduce){.face-spiral-sequence .section-ten__poster,.face-spiral-sequence .section-ten__film{transition:none!important}}

/* Le récit défile sur le portrait, sans panneau ni calque entre lui et la spirale. */
.section-ten{height:auto;min-height:100svh;overflow:visible}
.section-ten__stage{position:relative}
.section-ten__opening{position:relative;height:100svh;overflow:hidden}
.section-ten__story{position:relative;padding:0 7vw 8vh}
.section-ten__chapter{min-height:72svh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;max-width:1060px;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.72)}
.section-ten__chapter>span{font:700 10px/1.4 Manrope,"Section Ten Inter",Arial,sans-serif;letter-spacing:.22em}
.section-ten__chapter h3{max-width:1020px;margin:22px 0 26px;font:600 clamp(48px,6.1vw,100px)/.86 "Section Ten Inter Tight","Section Ten Inter",Arial,sans-serif;letter-spacing:-.058em}
.section-ten__line{display:block;width:max-content;max-width:100%}
.section-ten__line--anchor{font:400 1.15em/.82 Cormorant,Georgia,serif;letter-spacing:-.065em;text-transform:none}
.section-ten__line--drop{font-size:.79em;line-height:1.02;letter-spacing:-.045em}
.section-ten__chapter p{max-width:660px;margin:0;font:400 clamp(15px,1.25vw,18px)/1.55 Manrope,"Section Ten Inter",Arial,sans-serif}
.section-ten__chapter a{display:inline-block;margin-top:28px;border-bottom:1px solid currentColor;padding-bottom:7px;font:600 11px/1.3 "Section Ten Inter",Arial,sans-serif;letter-spacing:.11em;color:inherit;text-decoration:none}
.section-ten.has-scroll-story{height:380svh}
.section-ten.has-scroll-story .section-ten__stage{position:sticky;top:0;height:100svh;overflow:hidden}
.section-ten.has-scroll-story .section-ten__opening{transition:opacity .4s ease}
.section-ten.has-scroll-story.is-story .section-ten__opening{opacity:0;pointer-events:none}
.section-ten.has-scroll-story .section-ten__story{position:absolute;inset:0;padding:0;pointer-events:none}
.section-ten.has-scroll-story .section-ten__chapter{position:absolute;inset:0 auto auto 7vw;top:50%;min-height:0;width:min(1060px,86vw);opacity:0;transform:translateY(-50%);transition:opacity .28s ease;pointer-events:none}
.section-ten.has-scroll-story .section-ten__chapter.is-current{opacity:1;pointer-events:auto}
.section-ten.has-scroll-story .section-ten__line--left{transform:translate3d(var(--story-left,0px),0,0)}
.section-ten.has-scroll-story .section-ten__line--right{transform:translate3d(var(--story-right,0px),0,0)}
.section-ten.has-scroll-story .section-ten__line--drop{opacity:var(--story-drop-opacity,1);transform:translate3d(0,var(--story-drop,0px),0)}
.section-ten.has-scroll-story .section-ten__chapter p{opacity:var(--story-copy-opacity,1);transform:translate3d(0,var(--story-copy-y,0px),0)}
@media(max-width:700px){
  .section-ten__story{padding:0 7vw 6vh}
  .section-ten__chapter{min-height:72svh}
  .section-ten__chapter h3{font-size:clamp(40px,10vw,62px);margin:15px 0 18px}
  .section-ten__chapter p{font-size:13px;line-height:1.47}
  .section-ten__line--anchor{font-size:1.1em}
  .section-ten__line--drop{font-size:.76em}
  .section-ten.has-scroll-story .section-ten__chapter{left:7vw;width:86vw}
}
@media(max-width:700px) and (max-height:620px){.section-ten__chapter h3{font-size:clamp(36px,9.2vw,50px)}.section-ten__chapter p{font-size:12px;line-height:1.4}.section-ten.has-scroll-story .section-ten__chapter{top:48%}}
@media(prefers-reduced-motion:reduce){.section-ten__chapter,.section-ten__opening{transition:none!important}.section-ten__line,.section-ten__chapter p{transform:none!important;opacity:1!important}}