/* =========================================================
   V3 — Expérience : visite guidée, projet, parcours client, micro-animations
   Chargé après styles.css et v2-medias.css
   ========================================================= */

/* ---------- Titres mot à mot ---------- */
.h2 .w { display: inline-block; opacity: 0; transform: translateY(.6em) rotate(1.5deg); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--wi, 0) * 45ms); }
.h2.is-in .w { opacity: 1; transform: none; }
.h2.reveal-up.is-in { transition-delay: 0ms; }
@media (prefers-reduced-motion: reduce) { .h2 .w { opacity: 1 !important; transform: none !important; } }

/* ---------- Révélation d'image en balayage ---------- */
.gcard, .ppanel { --wipe: inset(0 100% 0 0 round var(--r-lg)); }
.gcard.mask-in img { animation: wipeIn 1.1s var(--ease-io) both; }
@keyframes wipeIn { from { clip-path: inset(0 100% 0 0); transform: scale(1.12); } to { clip-path: inset(0 0 0 0); transform: scale(1.06); } }

/* ---------- VISITE GUIDÉE ---------- */
.tour { position: relative; height: 760vh; background: var(--bg); }
.tour__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.tour__media { position: absolute; inset: 0; }
.tour__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.1s ease, transform 8s linear; filter: saturate(.9) contrast(1.05); }
.tour__v.is-active { opacity: 1; transform: scale(1.0); }
.tour__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,15,14,.88) 0%, rgba(11,15,14,.55) 40%, rgba(11,15,14,.15) 70%, rgba(11,15,14,.35) 100%), linear-gradient(180deg, rgba(11,15,14,.75) 0%, transparent 25%, transparent 70%, rgba(11,15,14,.85) 100%); }
.tour__grain { position: absolute; inset: 0; opacity: .08; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.tour__ui { position: relative; z-index: 2; height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding-top: 110px; padding-bottom: 40px; }
.tour__top { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.tour__kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(11,15,14,.45); backdrop-filter: blur(8px); }
.tour__counter { font-family: var(--serif); font-size: 18px; color: var(--muted); }
.tour__counter b { font-weight: 500; color: var(--gold-2); font-size: 30px; }
.tour__body { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 40px; padding-bottom: 30px; }
.tour__step { font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; }
.tour__title { font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 6vw, 92px); line-height: 1; letter-spacing: -.01em; margin: 0 0 18px; text-shadow: 0 6px 40px rgba(0,0,0,.6); }
.tour__desc { font-size: clamp(16px, 1.4vw, 21px); color: var(--ink-2); max-width: 46ch; margin: 0; }
.tour__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.tour__cta[hidden] { display: none; }
.tour__text.is-swap .tour__step, .tour__text.is-swap .tour__title, .tour__text.is-swap .tour__desc, .tour__text.is-swap .tour__cta { animation: tourIn .9s var(--ease) both; }
.tour__text.is-swap .tour__title { animation-delay: .08s; } .tour__text.is-swap .tour__desc { animation-delay: .16s; } .tour__text.is-swap .tour__cta { animation-delay: .24s; }
@keyframes tourIn { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
.tour__card { justify-self: end; width: min(360px, 100%); }
.tour__card.is-swap .xcard { animation: cardIn .8s var(--ease) both; animation-delay: .35s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: none; } }
.xcard { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: rgba(16,22,19,.72); backdrop-filter: blur(16px) saturate(140%); border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); }
.xcard__ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--gold-dim); font-size: 20px; flex: none; }
.xcard b { display: block; font-weight: 500; font-size: 15px; }
.xcard span { display: block; font-size: 13px; color: var(--muted); }
.xcard__ok { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(88,200,138,.18); color: var(--live); font-style: normal; font-size: 13px; flex: none; }
.xcard--chat { flex-direction: column; align-items: stretch; gap: 8px; }
.xcard--chat .bub { padding: 9px 12px; border-radius: 12px; font-size: 13.5px; max-width: 90%; }
.xcard--chat .bub--me { align-self: flex-end; background: var(--gold); color: #0b0f0e; border-bottom-right-radius: 4px; }
.xcard--chat .bub--bot { align-self: flex-start; background: rgba(255,255,255,.08); border-bottom-left-radius: 4px; }
.tour__rail { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; align-items: flex-end; }
.tour__rail li { position: relative; flex: 1; display: grid; gap: 8px; cursor: pointer; }
.tour__rail li i { display: block; height: 2px; background: rgba(255,255,255,.14); border-radius: 2px; overflow: hidden; position: relative; }
.tour__rail li i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--gold), var(--gold-2)); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.tour__rail li.is-done i::after, .tour__rail li.is-active i::after { transform: scaleX(1); }
.tour__rail li span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); transition: color .3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour__rail li.is-active span { color: var(--gold-2); }
.tour__hint { position: absolute; right: max(24px, calc((100vw - var(--container)) / 2)); bottom: 74px; display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); transition: opacity .5s; }
.tour__hint span { width: 40px; height: 1px; background: var(--gold); position: relative; overflow: hidden; }
.tour__hint span::after { content: ""; position: absolute; left: -100%; top: 0; width: 100%; height: 100%; background: #fff; animation: hintLine 1.8s var(--ease-io) infinite; }
@keyframes hintLine { to { left: 100%; } }
.tour.is-past .tour__hint, .tour.is-end .tour__hint { opacity: 0; }
@media (max-width: 900px) {
  /* Refonte mobile 2026-08-18 : carrousel glissable au lieu du défilement figé (620vh) */
  .tour { height: auto; }
  .tour__pin { position: relative; height: 86vw; max-height: 480px; min-height: 340px; }
  .tour__ui { padding-top: 20px; padding-bottom: 16px; }
  .tour__body { grid-template-columns: 1fr; align-items: end; gap: 18px; }
  .tour__card { justify-self: start; width: min(340px, 100%); }
  .tour__rail { cursor: pointer; }
  .tour__rail li span { display: none; }
  .tour__kicker-more { display: none; }
  .tour__hint { display: none; }
  .tour__shade { background: linear-gradient(180deg, rgba(11,15,14,.8) 0%, rgba(11,15,14,.35) 35%, rgba(11,15,14,.55) 70%, rgba(11,15,14,.92) 100%); }
}

/* ---------- PROJET QUI PREND VIE ---------- */
.projet { background: radial-gradient(900px 500px at 15% 30%, rgba(200,164,106,.08), transparent 60%), var(--bg-solid-2); overflow: hidden; }
.projet__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.projet__timeline { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.projet__timeline::before { content: ""; position: absolute; left: 8px; right: 8px; top: 8px; height: 1px; background: rgba(255,255,255,.12); }
.projet__timeline::after { content: ""; position: absolute; left: 8px; top: 8px; height: 1px; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-2)); transition: width 1.6s var(--ease-io) .3s; }
.projet__timeline.is-in::after { width: calc(62% - 8px); }
.projet__timeline li { position: relative; padding-top: 26px; padding-right: 10px; }
.projet__timeline li i { position: absolute; left: 0; top: 0; width: 17px; height: 17px; border-radius: 50%; background: var(--bg-3); border: 1px solid rgba(255,255,255,.2); }
.projet__timeline li.is-done i { background: var(--gold); border-color: var(--gold); }
.projet__timeline li.is-active i { background: var(--gold-2); border-color: var(--gold-2); box-shadow: 0 0 0 6px rgba(200,164,106,.18); animation: pulse 2s infinite; }
.projet__timeline b { display: block; font-weight: 500; font-size: 15px; }
.projet__timeline span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.projet__cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.projet__panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: center; perspective: 1400px; }
.ppanel { position: relative; margin: 0; aspect-ratio: 9/16; border-radius: 26px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-3); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9); transform: rotateY(var(--ry, 0deg)) translateY(var(--py, 0px)); transition: transform .2s linear; will-change: transform; }
.ppanel:first-child { --ry: 10deg; } .ppanel:last-child { --ry: -10deg; }
.ppanel--mid { transform: rotateY(0deg) translateY(calc(var(--py, 0px) - 24px)) scale(1.06); z-index: 1; }
.ppanel video { width: 100%; height: 100%; object-fit: cover; }
.ppanel figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 50px 16px 16px; background: linear-gradient(180deg, transparent, rgba(11,15,14,.85)); display: grid; gap: 2px; }
.ppanel figcaption b { font-family: var(--serif); font-weight: 500; font-size: 17px; }
.ppanel figcaption span { font-size: 12px; color: var(--ink-2); letter-spacing: .05em; }
@media (max-width: 1000px) { .projet__grid { grid-template-columns: 1fr; } .projet__panels { max-width: 620px; margin: 10px auto 0; } }
@media (max-width: 560px) { .projet__timeline { grid-template-columns: 1fr 1fr; row-gap: 18px; } .projet__timeline::before, .projet__timeline::after { display: none; } .projet__panels { grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .ppanel { border-radius: 16px; } .ppanel figcaption { padding: 30px 8px 8px; } .ppanel figcaption b { font-size: 12px; } .ppanel figcaption span { display: none; } .ppanel:first-child, .ppanel:last-child { --ry: 0deg; } }

/* ---------- PARCOURS CLIENT ---------- */
.journey { background: var(--bg); padding: clamp(88px, 11vw, 150px) 0 40px; position: relative; }
.journey__grid { display: grid; grid-template-columns: 1fr minmax(300px, 380px); gap: clamp(40px, 6vw, 100px); align-items: start; }
.journey__steps { display: grid; gap: 30vh; padding: 10vh 0 30vh; }
.jstep { max-width: 520px; opacity: .6; transform: translateY(20px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.jstep.is-current { opacity: 1; transform: none; }
.jstep__n { font-family: var(--serif); font-style: italic; color: var(--gold); font-size: 26px; }
.jstep h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; margin: 10px 0 14px; }
.jstep p { color: var(--ink-2); font-size: 17px; margin: 0 0 22px; }
.journey__phone { position: sticky; top: 90px; height: calc(100vh - 110px); display: grid; place-items: center; }
.phone--journey { width: min(320px, 80vw); }
.phone--journey .phone__frame { transform: rotate(0); }
.pscreen { position: absolute; inset: 0; background: #0f1513; }
.pview { position: absolute; inset: 0; padding: 60px 16px 20px; display: flex; flex-direction: column; gap: 10px; opacity: 0; transform: translateX(30px); transition: opacity .6s var(--ease), transform .7s var(--ease); pointer-events: none; }
.pview.is-active { opacity: 1; transform: none; }
.pview__hdr { display: flex; justify-content: space-between; align-items: center; font-family: var(--serif); font-size: 18px; margin-bottom: 4px; }
.pv-card { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.pv-card img { width: 64px; height: 52px; object-fit: cover; border-radius: 9px; }
.pv-card b { display: block; font-size: 13px; font-weight: 500; }
.pv-card span { display: block; font-size: 11.5px; color: var(--muted); }
.pv-btn { margin-top: auto; padding: 12px; border-radius: 999px; background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: #0b0f0e; font-weight: 600; font-size: 13px; text-align: center; }
.pv-notif { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid var(--line); }
.pv-notif--ok { border-color: rgba(88,200,138,.35); background: rgba(88,200,138,.08); }
.pv-notif > span { font-size: 20px; }
.pv-notif b { display: block; font-size: 13px; font-weight: 500; }
.pv-notif div span { display: block; font-size: 11.5px; color: var(--muted); }
.pv-map { position: relative; height: 110px; border-radius: 14px; overflow: hidden; }
.pv-map img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) brightness(.8); }
.pv-pin { position: absolute; left: 52%; top: 46%; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(200,164,106,.6); animation: pulse 2s infinite; }
.pv-msg { padding: 9px 12px; border-radius: 12px; font-size: 12.5px; max-width: 88%; line-height: 1.4; }
.pv-msg--bot { align-self: flex-start; background: rgba(255,255,255,.08); border-bottom-left-radius: 4px; }
.pv-msg--me { align-self: flex-end; background: var(--gold); color: #0b0f0e; border-bottom-right-radius: 4px; }
.pv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pv-steps li { position: relative; padding: 10px 12px 10px 36px; border-radius: 12px; background: rgba(255,255,255,.05); font-size: 13px; color: var(--muted); }
.pv-steps li::before { content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); }
.pv-steps li.is-done { color: var(--ink); } .pv-steps li.is-done::before { background: var(--live); border-color: var(--live); }
.pv-steps li.is-active { color: var(--gold-2); } .pv-steps li.is-active::before { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 4px rgba(200,164,106,.2); }
.pv-sign { margin-top: auto; padding: 14px; border-radius: 14px; border: 1px dashed rgba(200,164,106,.5); display: grid; gap: 8px; font-size: 12px; color: var(--muted); }
.pv-sign i { display: block; height: 28px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'><path d='M4 30 C 30 -10, 50 50, 80 20 S 130 0, 150 24 S 180 34, 196 12' fill='none' stroke='%23e8d3a3' stroke-width='2' stroke-linecap='round'/></svg>") no-repeat left center / contain; }
.pv-sign b { color: var(--live); font-size: 13px; }
.pv-hero { text-align: center; padding: 22px 12px; border-radius: 16px; background: linear-gradient(160deg, var(--gold-dim), transparent); border: 1px solid rgba(200,164,106,.3); display: grid; gap: 4px; }
.pv-hero span { font-size: 30px; } .pv-hero b { font-family: var(--serif); font-weight: 500; font-size: 18px; } .pv-hero small { color: var(--muted); font-size: 12px; }
.pv-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); font-size: 12.5px; color: var(--ink-2); }
.pv-row b { color: var(--live); font-weight: 500; }
@media (max-width: 900px) {
  .journey__grid { grid-template-columns: 1fr; }
  .journey__phone { position: sticky; top: 70px; height: auto; order: -1; padding-bottom: 20px; background: linear-gradient(180deg, var(--bg) 80%, transparent); z-index: 2; }
  .phone--journey { width: min(230px, 60vw); }
  .journey__steps { gap: 40px; padding: 10px 0 40px; }
  .jstep { opacity: 1; transform: none; }
}