/* TT Genesis cinematic opening. Scoped exclusively to the first homepage section. */
#accueil.ttg-cinematic-home { padding:0; isolation:isolate; background:#142b43; }
.ttg-cinema { position:relative; overflow:hidden; background:#142b43; }
.ttg-cinema-scene { position:relative; height:100vh; height:100svh; min-height:0; overflow:hidden; }
.ttg-cinema-visual { position:absolute; inset:0; background:#203e57; --ttg-scene-photo:url('./customer/genesis-riverside-v15.png'); }
.ttg-cinema-photo { position:relative; display:block; width:100%; height:100%; object-fit:cover; object-position:50% 42%; }
.ttg-water-canvas { position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none; }
.ttg-cinema.is-water-ready .ttg-water-canvas { opacity:1; }
.ttg-cinema-shade { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(11,29,47,.08),transparent 17%,transparent 78%,rgba(12,31,46,.25)); }
.ttg-cinema-booking { position:absolute; top:100px; left:28px; display:inline-flex; align-items:center; gap:7px; margin:0; max-width:30%; padding:6px 10px; border:1px solid rgba(255,255,255,.16); border-radius:12px; color:#fff8e9; background:rgba(27,49,73,.8); font:500 10px/1.4 var(--font-sans); backdrop-filter:blur(8px); }
.ttg-cinema-booking .ttg-mobile-booking-dot { width:6px; height:6px; flex:none; border-radius:50%; background:#77cf85; animation:ttg-cinema-beacon 1.8s ease-in-out infinite; }
.ttg-cinema-actions { position:absolute; left:50%; bottom:108px; transform:translateX(-50%); width:min(470px,calc(100% - 48px)); z-index:3; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.ttg-cinema-actions > button,.ttg-cinema-actions > a { display:flex; align-items:center; justify-content:center; gap:14px; min-height:56px; padding:14px 20px; border-radius:999px; font:500 15px/1.4 var(--font-sans); text-decoration:none; white-space:nowrap; }
.ttg-cinema-actions > button { color:#223950; background:linear-gradient(115deg,#edc79f,#fff3df); box-shadow:0 12px 28px rgba(8,20,34,.2); }
.ttg-cinema-actions > .ttg-mobile-floor-link { color:#fff6e8; background:rgba(24,44,62,.82); border:1px solid rgba(239,211,170,.7); backdrop-filter:blur(10px); }
.ttg-cinema-scroll { position:absolute; bottom:25px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:5px; color:#fff6e8; font:400 10px/1.5 var(--font-sans); letter-spacing:.12em; text-decoration:none; }
.ttg-cinema-scroll > span:first-child { font-size:27px; line-height:1; animation:ttg-cinema-cue 2.3s ease-in-out infinite; }
.ttg-cinema-intro { display:none; position:absolute; inset:0; z-index:5; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 42%,rgba(255,249,232,.9),transparent 62%),linear-gradient(145deg,#ad987f 4%,#e9dec7 53%,#b2a39a); }
.ttg-cinema.is-intro-pending .ttg-cinema-intro,.ttg-cinema.is-intro .ttg-cinema-intro { display:flex; }
.ttg-cinema.is-intro-out .ttg-cinema-intro { display:flex; opacity:0; transform:scale(1.045); transition:opacity .35s ease,transform .35s ease; pointer-events:none; }
.ttg-ribbon-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.ttg-cinema-brand { position:relative; width:min(720px,85%); display:flex; align-items:center; flex-direction:column; text-align:center; color:#21394b; animation:none; }
.ttg-cinema-logo { width:min(550px,78vw); height:auto; margin-bottom:32px; filter:drop-shadow(0 8px 32px rgba(12,29,42,.1)); }
.ttg-cinema-brand-line { display:block; width:68px; height:1px; background:rgba(68,91,109,.4); margin:0 0 25px; }
.ttg-cinema-brand .ttg-cinema-tagline { margin:0; color:#21394b; font-family:var(--font-display); font-size:clamp(27px,3.7vw,48px); font-weight:650; font-style:normal; line-height:1.27; letter-spacing:-.025em; }
.ttg-cinema-brand .ttg-cinema-tagline > span { color:#47657b; }
.ttg-cinema-brand p:not(.ttg-cinema-tagline) { margin:24px 0 0; color:#47657b; font:400 12px/1.5 var(--font-sans); text-transform:uppercase; letter-spacing:.28em; }
.ttg-cinema-brand p:not(.ttg-cinema-tagline) span { margin:0 14px; }
.ttg-cinema-skip { position:absolute; right:28px; bottom:28px; color:#314d62; padding:9px 12px; border:1px solid rgba(49,77,98,.2); border-radius:999px; background:rgba(255,246,227,.18); font:400 11px/1.4 var(--font-sans); }
.ttg-cinematic-summary { display:grid; grid-template-columns:minmax(300px,.8fr) minmax(440px,1.2fr); align-items:center; gap:50px; padding:30px max(28px,calc((100% - 1280px)/2)); color:#fff7e9; background:linear-gradient(150deg,#182f46,#485a71); }
.ttg-cinematic-summary .ttg-mobile-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin:0; }
.ttg-cinematic-summary dt { font:500 11px/1.4 var(--font-sans); letter-spacing:.16em; color:#d9e3ec; }
.ttg-cinematic-summary dd { margin:8px 0 0; font:400 46px/1.1 var(--font-display); color:#fff7e9; white-space:nowrap; }
.ttg-cinematic-summary dd span { font-size:23px; }
.ttg-cinematic-summary .ttg-mobile-facts { display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; margin:0; padding:0; font:400 12px/1.7 var(--font-sans); color:#e5ecf3; }
.ttg-cinematic-summary .ttg-mobile-facts li { display:flex; gap:8px; align-items:flex-start; min-width:0; }
.ttg-cinematic-summary .ttg-mobile-facts li:nth-child(3) { grid-column:1 / -1; }
.ttg-cinematic-summary .ttg-mobile-facts svg { flex-shrink:0; margin-top:3px; color:#eddbbc; }
@keyframes ttg-cinema-enter { from { opacity:1; transform:translateY(6px) scale(.99); filter:none; } to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }
@keyframes ttg-cinema-beacon { 0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(119,207,133,.4); } 50% { opacity:.48; box-shadow:0 0 0 4px rgba(119,207,133,0); } }
@keyframes ttg-cinema-cue { 0%,100% { transform:translateY(0); } 50% { transform:translateY(5px); } }
@media (max-width:1000px) { .ttg-cinematic-summary { grid-template-columns:1fr; gap:24px; } .ttg-cinematic-summary .ttg-mobile-stats { max-width:600px; } }
@media (max-width:767px) {
  #accueil.ttg-cinematic-home > .ttg-cinema,#accueil.ttg-cinematic-home > .ttg-cinematic-summary { display:block; }
  .ttg-cinema-scene { height:100vh; height:100svh; min-height:0; padding:0; }
  .ttg-cinema-visual { position:absolute; inset:0; width:100%; }
  /* The complete portrait stays sharp; the same image fills its narrow edge space. */
  .ttg-cinema-visual::before { content:''; position:absolute; inset:0; background:var(--ttg-scene-photo) center / cover no-repeat; opacity:.55; }
  .ttg-cinema-photo { height:100%; object-fit:contain; object-position:50% 50%; }
  .ttg-cinema-shade { background:linear-gradient(180deg,rgba(17,37,57,.03),transparent 17%,transparent 80%,rgba(21,39,56,.2)); }
  .ttg-cinema-booking { top:90px; left:12px; font-size:8px; gap:4px; max-width:42%; padding:3px 6px; }
  .ttg-cinema-booking .ttg-mobile-booking-dot { width:5px; height:5px; }
  .ttg-cinema-actions { left:18px; right:18px; bottom:calc(110px + env(safe-area-inset-bottom,0px)); width:auto; gap:14px; transform:none; }
  .ttg-cinema-actions > button,.ttg-cinema-actions > a { min-height:48px; padding:10px 12px; gap:8px; font-size:13px; }
  .ttg-cinema-scroll { bottom:calc(76px + env(safe-area-inset-bottom,0px)); flex-direction:row; gap:9px; white-space:nowrap; font-size:9px; }
  .ttg-cinema-scroll > span:first-child { font-size:18px; }
  .ttg-cinema-brand { padding-top:40px; width:88%; }
  .ttg-cinema-logo { width:76%; margin-bottom:20px; }
  .ttg-cinema-brand-line { margin-bottom:15px; width:38px; }
  .ttg-cinema-brand .ttg-cinema-tagline { font-size:24px; line-height:1.3; }
  .ttg-cinema-brand p:not(.ttg-cinema-tagline) { margin-top:17px; font-size:9px; letter-spacing:.18em; }
  .ttg-cinema-brand p:not(.ttg-cinema-tagline) span { margin:0 8px; }
  .ttg-cinema-skip { right:14px; bottom:calc(84px + env(safe-area-inset-bottom,0px)); font-size:11px; padding:10px 14px; }
  .ttg-cinematic-summary { padding:26px 18px 30px; }
  .ttg-cinematic-summary .ttg-mobile-stats { gap:12px; }
  .ttg-cinematic-summary dt { font-size:10px; }
  .ttg-cinematic-summary dd { font-size:34px; }
  .ttg-cinematic-summary dd span { font-size:17px; }
  .ttg-cinematic-summary .ttg-mobile-facts { margin-top:22px; padding-top:18px; border-top:1px solid rgba(238,221,197,.16); gap:12px 14px; }
  .ttg-cinematic-summary .ttg-mobile-facts li:nth-child(n+3) { grid-column:1 / -1; }
}
@media (prefers-reduced-motion:reduce) {
  .ttg-water-canvas,.ttg-ribbon-canvas { display:none !important; }
  .ttg-cinema-brand,.ttg-cinema-scroll > span:first-child,.ttg-cinema-booking .ttg-mobile-booking-dot { animation:none; }
}

.ttg-cinema.is-intro .ttg-cinema-brand { animation:ttg-cinema-enter .25s cubic-bezier(.17,.67,.26,1) both; }
@media (prefers-reduced-motion:reduce) { .ttg-cinema.is-intro .ttg-cinema-brand { animation:none; } .ttg-cinema.is-intro-out .ttg-cinema-intro { transition:none; transform:none; } }

/* Milk-white ribbon sculptures remain visible even without a canvas context. */
.ttg-intro-ribbons { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.ttg-intro-ribbons span { position:absolute; display:block; left:-18%; top:24%; width:140%; height:40%; border-radius:50%; border-top:28px solid rgba(255,255,255,.88); box-shadow:0 -3px 4px rgba(255,255,255,.68),inset 0 14px 22px rgba(82,66,51,.12); transform:rotate(-12deg); }
.ttg-intro-ribbons span:nth-child(2) { top:35%; left:-12%; height:32%; border-top-width:18px; border-color:rgba(255,255,255,.76); transform:rotate(9deg); }
.ttg-intro-ribbons span:nth-child(3) { top:47%; left:-28%; width:160%; height:30%; border-top-width:11px; border-color:rgba(255,255,255,.72); transform:rotate(-6deg); }
.ttg-cinema.is-intro .ttg-intro-ribbons span { animation:ttg-white-ribbon 1.6s ease-in-out both; }
.ttg-cinema.is-intro .ttg-intro-ribbons span:nth-child(2) { animation-name:ttg-white-ribbon-reverse; }
.ttg-cinema-brand { z-index:1; }
.ttg-cinema-skip { z-index:2; }
@keyframes ttg-white-ribbon { from { transform:translateY(-16px) rotate(-14deg); } to { transform:translateY(14px) rotate(-8deg); } }
@keyframes ttg-white-ribbon-reverse { from { transform:translateY(10px) rotate(12deg); } to { transform:translateY(-12px) rotate(6deg); } }
/* Position follows the displayed photograph, including mobile letterboxing. */
.ttg-scene-wordmark { position:absolute; z-index:2; left:3%; top:49%; width:36%; margin:0; color:#fffaf0; font-family:var(--font-sans); font-size:var(--ttg-wordmark-size,clamp(18px,4.2vw,64px)); font-weight:700; line-height:1.1; letter-spacing:.035em; white-space:nowrap; text-shadow:0 2px 16px rgba(19,41,59,.48),0 1px 3px rgba(19,41,59,.35); pointer-events:none; opacity:0; }
.ttg-cinema.is-intro-done .ttg-scene-wordmark { animation:ttg-wordmark-focus 2s cubic-bezier(.2,.6,.25,1) both; }
@keyframes ttg-wordmark-focus { from { opacity:.22; filter:blur(14px); transform:translateY(4px); } to { opacity:1; filter:blur(0); transform:translateY(0); } }
@media(max-width:767px) { .ttg-intro-ribbons span { left:-45%; width:190%; top:30%; height:29%; border-top-width:24px; } .ttg-intro-ribbons span:nth-child(2) { top:41%; left:-35%; height:27%; border-top-width:16px; } .ttg-intro-ribbons span:nth-child(3) { top:50%; left:-50%; height:24%; border-top-width:10px; } }
@media(prefers-reduced-motion:reduce) { .ttg-cinema.is-intro .ttg-intro-ribbons span { animation:none; } .ttg-cinema.is-intro-done .ttg-scene-wordmark { animation:none; filter:none; transform:none; opacity:1; } }

/* Only the first scene is replaced; the project photograph remains unchanged. */
.ttg-reference-opening { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; pointer-events:auto; background:transparent; }
.ttg-reference-opening[hidden] { display:none; }
.ttg-reference-opening::before { content:''; position:absolute; inset:0; background:linear-gradient(145deg,#6d6570 0%,#12172e 52%,#12172e 100%); transition:opacity .6s ease; }
.ttg-outline-logo { position:relative; display:block; width:min(390px,90vw); height:auto; overflow:visible; transform-origin:50% 50%; transition:transform .9s cubic-bezier(.65,0,.2,1); }
.ttg-outline-logo path { fill:rgba(255,255,255,0); stroke:#fff; stroke-width:.9; stroke-dasharray:1; stroke-dashoffset:1; transition:fill .6s ease,stroke-opacity .6s ease; }
.ttg-reference-opening.is-drawing .ttg-outline-logo path { animation:ttg-reference-draw 2.2s ease-in-out forwards; }
.ttg-reference-opening.is-leaving { pointer-events:none; }
.ttg-reference-opening.is-leaving::before { opacity:0; }
.ttg-reference-opening.is-leaving path { fill:#fff; stroke-opacity:0; }
.ttg-reference-opening.is-flying .ttg-outline-logo { transform:translate(var(--ttg-fly-x,0px),var(--ttg-fly-y,0px)) scale(var(--ttg-fly-scale,1)); }
.ttg-reference-opening.is-fading { animation:ttg-reference-fade .5s ease forwards; }
.ttg-flight-target-hidden { opacity:0!important; }
@keyframes ttg-reference-draw { to { stroke-dashoffset:0; } }
@keyframes ttg-reference-fade { to { opacity:0; visibility:hidden; } }
.ttg-reference-opening[data-device="mobile"] .ttg-outline-logo { transition-duration:.7s; }
.ttg-reference-opening[data-device="mobile"] .ttg-outline-logo path { transition-duration:.45s; }
.ttg-reference-opening[data-device="mobile"].is-drawing .ttg-outline-logo path { animation-duration:1.3s; }
@media(prefers-reduced-motion:reduce) { .ttg-reference-opening .ttg-outline-logo { transition:none; } .ttg-reference-opening .ttg-outline-logo path { animation:none!important; stroke-dashoffset:0; fill:#fff; } }

/* The whole portrait stays in frame on desktop as well as mobile. */
.ttg-cinema-photo { object-fit:contain; object-position:50% 50%; }
@media(min-width:768px) {
  .ttg-cinema-visual { background:radial-gradient(ellipse at 48% 51%,rgba(202,164,116,.42),transparent 55%),linear-gradient(180deg,#123453 0%,#263f59 40%,#a08771 66%,#152e47 100%); }
  .ttg-cinema-visual::before { display:none; }
}
.ttg-scene-copy { position:absolute; z-index:2; left:3%; top:40%; width:38%; pointer-events:none; text-align:center; color:#fffaf0; isolation:isolate; font-family:var(--font-sans); }
.ttg-scene-copy p { position:relative; z-index:1; margin:0; font-style:normal; white-space:nowrap; opacity:0; line-height:1.2; }
.ttg-copy-title { font-size:var(--ttg-title-size,36px); font-weight:700; letter-spacing:.045em; }
.ttg-scene-copy .ttg-copy-description { margin-top:var(--ttg-copy-gap,9px); font-size:var(--ttg-description-size,13px); font-weight:500; letter-spacing:.025em; }
.ttg-scene-copy .ttg-copy-location { margin-top:var(--ttg-copy-small-gap,6px); font-size:var(--ttg-location-size,20px); font-weight:600; letter-spacing:.15em; }
.ttg-liquid-text { color:#fffdf5; text-shadow:0 2px 12px rgba(12,34,54,.42); }
@supports ((background-clip:text) or (-webkit-background-clip:text)) {
  .ttg-liquid-text { display:inline-block; background-color:#fffdf5; background-image:repeating-radial-gradient(ellipse at 15% 160%,#fffdf5 0px,#fffdf5 12px,#bbdbe8 16px,#fff4d8 21px,#fff 29px,#fffdf5 38px); background-size:220% 240%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; text-shadow:none; filter:drop-shadow(0 2px 7px rgba(12,34,54,.4)); }
  .ttg-cinema.is-intro-done .ttg-liquid-text { animation:ttg-letter-current 9s linear infinite; }
}
.ttg-cinema.is-intro-done .ttg-copy-title { animation:ttg-title-descend .6s cubic-bezier(.2,.65,.25,1) .3s both; }
.ttg-cinema.is-intro-done .ttg-copy-description { animation:ttg-copy-ascend 1s cubic-bezier(.2,.65,.25,1) 0s both; }
.ttg-cinema.is-intro-done .ttg-copy-location { animation:ttg-copy-ascend .6s cubic-bezier(.2,.65,.25,1) .3s both; }
@keyframes ttg-title-descend { from { opacity:0; transform:translateY(-24px); filter:blur(4px); } to { opacity:1; transform:translateY(0); filter:blur(0); } }
@keyframes ttg-copy-ascend { from { opacity:0; transform:translateY(20px); filter:blur(4px); } to { opacity:1; transform:translateY(0); filter:blur(0); } }
@keyframes ttg-letter-current { from { background-position:0% 30%; } to { background-position:200% 150%; } }
.ttg-letter-waves { position:absolute; z-index:0; left:-30%; top:-42%; width:160%; height:190%; overflow:visible; opacity:0; filter:drop-shadow(0 0 7px rgba(202,239,255,.28)); }
.ttg-cinema.is-intro-done .ttg-letter-waves { opacity:.68; transition:opacity 1s ease; }
.ttg-water-lines-a,.ttg-water-lines-b { transform-origin:320px 130px; }
.ttg-cinema.is-intro-done .ttg-water-lines-a { animation:ttg-letter-wave-a 7s ease-in-out infinite alternate; }
.ttg-cinema.is-intro-done .ttg-water-lines-b { animation:ttg-letter-wave-b 8.5s ease-in-out -3s infinite alternate; }
@keyframes ttg-letter-wave-a { from { transform:translate(-28px,-8px) rotate(-4deg) scaleY(.8); } to { transform:translate(30px,12px) rotate(5deg) scaleY(1.12); } }
@keyframes ttg-letter-wave-b { from { transform:translate(22px,11px) rotate(4deg) scaleY(1.08); } to { transform:translate(-25px,-12px) rotate(-5deg) scaleY(.8); } }
@media(prefers-reduced-motion:reduce) {
  .ttg-cinema.is-intro-done .ttg-scene-copy p,.ttg-cinema.is-intro-done .ttg-liquid-text,.ttg-cinema.is-intro-done .ttg-water-lines-a,.ttg-cinema.is-intro-done .ttg-water-lines-b { animation:none; transform:none; filter:none; opacity:1; }
  .ttg-cinema.is-intro-done .ttg-letter-waves { transition:none; opacity:.5; }
}

/* v22: original pearl-white lettering and edge-to-edge desktop artwork. */
.ttg-cinema-picture { display:block; position:absolute; inset:0; width:100%; height:100%; }
@media(min-width:992px) {
 .ttg-cinema-visual { background:#173c5d; }
 .ttg-cinema-visual::before { display:none; }
 .ttg-cinema-photo { object-fit:cover; object-position:50% 50%; }
}