/* FT Construction — couche expérience (V5). Chargée après style.css, page d'accueil seulement. */

/* --- Barre de progression de lecture --- */
.xp-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:80;background:transparent}
.xp-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brass),var(--brass2));transform-origin:0 50%}

/* --- Rail des chapitres (desktop) --- */
.xp-rail{position:fixed;right:1.4rem;top:50%;transform:translateY(-50%);z-index:70;display:none;flex-direction:column;gap:1.05rem}
.xp-rail a{display:flex;align-items:center;gap:.6rem;flex-direction:row-reverse;color:rgba(245,239,231,.75);text-decoration:none}
.xp-rail .xp-dot{width:9px;height:9px;border-radius:50%;border:1px solid rgba(245,239,231,.8);background:transparent;transition:all .35s;flex:none}
.xp-rail .xp-lab{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;opacity:0;transform:translateX(6px);transition:all .35s;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.xp-rail a:hover .xp-lab,.xp-rail a.on .xp-lab{opacity:1;transform:none}
.xp-rail a.on .xp-dot{background:var(--brass);border-color:var(--brass);box-shadow:0 0 0 5px rgba(195,143,75,.22)}
@media (min-width:1250px){.xp-rail{display:flex}}

/* --- Hero : repères d'expérience --- */
.xp-coords{position:absolute;left:1.2rem;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;color:rgba(245,239,231,.66);z-index:3;text-shadow:0 1px 8px rgba(0,0,0,.6)}
@media (max-width:900px){.xp-coords{display:none}}
.xp-cue{display:inline-flex;align-items:center;gap:.8rem;margin-top:2.2rem;color:var(--stone);text-decoration:none;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase}
.xp-cue-line{display:inline-block;width:1px;height:44px;background:linear-gradient(var(--brass),transparent);position:relative;overflow:visible;animation:cueDrop 2.2s ease-in-out infinite}
@keyframes cueDrop{0%{transform:scaleY(.4);transform-origin:top;opacity:.4}55%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.4);transform-origin:bottom;opacity:.4}}

/* --- Révélations (actives seulement si JS) --- */
.js .rvx{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rvx.in{opacity:1;transform:none}

/* --- Acte 02 · Manifeste --- */
.xp-manifesto{background:
  linear-gradient(rgba(195,143,75,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(195,143,75,.05) 1px,transparent 1px),
  radial-gradient(1100px 520px at 85% -10%,rgba(195,143,75,.12),transparent 60%),
  var(--ink);
  background-size:56px 56px,56px 56px,auto,auto;
  padding:9rem 0 8rem}
.xp-big{font-family:var(--disp);font-weight:600;font-size:clamp(2.4rem,6.2vw,5.2rem);line-height:1.06;letter-spacing:-.01em;color:var(--stone);margin:1.2rem 0 2rem;max-width:20ch}
.xp-big .xp-mline{display:block}
.xp-big em{font-style:normal;color:var(--brass)}
.xp-note{max-width:56ch;color:#cfc6b8;font-size:1.12rem}
.xp-dims{display:flex;gap:2.6rem;flex-wrap:wrap;margin-top:3.4rem;color:rgba(245,239,231,.72);font-size:.78rem;letter-spacing:.26em;text-transform:uppercase}
.xp-dims span{display:flex;align-items:center;gap:.9rem}
.xp-dims i{display:block;width:64px;height:1px;background:var(--brass);position:relative}
.xp-dims i::before,.xp-dims i::after{content:"";position:absolute;top:-4px;width:1px;height:9px;background:var(--brass)}
.xp-dims i::before{left:0}.xp-dims i::after{right:0}

/* --- Acte 03 · Panneaux immersifs empilés --- */
.xp-panels{background:var(--stone)}
.xp-panels-head{padding:6.5rem 0 3.5rem}
.xp-panel{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;display:flex;align-items:flex-end;box-shadow:0 -30px 60px rgba(18,16,13,.35)}
.xp-panel img,.xp-panel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xp-panel-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,16,13,.34) 0%,rgba(18,16,13,0) 34%,rgba(18,16,13,.28) 62%,rgba(18,16,13,.88) 100%)}
.xp-panel-body{position:relative;z-index:2;width:min(1240px,92%);margin:0 auto;padding:0 0 4.2rem;color:var(--stone)}
.xp-pnum{font-family:var(--disp);font-size:clamp(3.4rem,7vw,6rem);font-weight:700;color:transparent;-webkit-text-stroke:1.5px rgba(245,239,231,.85);line-height:1;display:block;margin-bottom:.6rem}
.xp-panel-body h3{font-size:clamp(1.9rem,4.4vw,3.4rem);color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.45);max-width:16ch}
.xp-panel-body p{max-width:52ch;color:#efe9df;font-size:1.1rem;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.xp-pcap{display:inline-block;margin-top:1.1rem;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(245,239,231,.85);border:1px solid rgba(245,239,231,.4);padding:.42rem .8rem;border-radius:999px;backdrop-filter:blur(3px)}
.xp-winter{padding:5rem 0 6rem;background:var(--stone)}

/* --- Acte 04 · Galerie horizontale --- */
.xp-gallery{overflow:hidden}
.xp-gal-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.xp-gal-btns{display:flex;gap:.6rem}
.xp-gal-btns button{width:52px;height:52px;border-radius:50%;border:1px solid rgba(245,239,231,.4);background:transparent;color:var(--stone);font-size:1.25rem;cursor:pointer;transition:all .25s}
.xp-gal-btns button:hover{background:var(--brass);border-color:var(--brass);color:#171310}
.xp-track{display:flex;gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:2.4rem max(4vw,1rem) 1.6rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.xp-track::-webkit-scrollbar{display:none}
.xp-track figure{flex:0 0 min(72vw,430px);scroll-snap-align:start;border-radius:20px;overflow:hidden;background:#1b1712;border:1px solid rgba(245,239,231,.1);display:flex;flex-direction:column}
.xp-track figure img{width:100%;height:480px;object-fit:cover;display:block}
.xp-track figcaption{padding:1.15rem 1.25rem 1.35rem}
.xp-track .lab{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin-bottom:.35rem}
.xp-track .ttl{font-family:var(--disp);font-size:1.3rem;font-weight:600;color:#fff}
.xp-track .dsc{color:#b7ad9d;font-size:.96rem;margin-top:.3rem}
.xp-gal-progress{height:3px;background:rgba(245,239,231,.16);border-radius:99px;margin-top:.6rem;overflow:hidden}
.xp-gal-progress span{display:block;height:100%;width:12%;background:var(--brass);border-radius:99px;transition:width .2s linear}
@media (max-width:640px){.xp-track figure{flex-basis:84vw}.xp-track figure img{height:380px}}

/* --- Acte 05 · Parcours guidé --- */
.xp-journey{background:
  linear-gradient(rgba(18,16,13,.045) 1px,transparent 1px),
  linear-gradient(90deg,rgba(18,16,13,.045) 1px,transparent 1px),
  var(--stone);
  background-size:56px 56px}
.xp-journey-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:4rem;align-items:start}
.xp-journey-left{position:sticky;top:7.5rem}
.xp-bignum{margin-top:2.6rem;font-family:var(--disp);display:flex;align-items:baseline;gap:.7rem}
.xp-bignum span{font-size:clamp(5rem,9vw,8.5rem);font-weight:700;line-height:.9;color:transparent;-webkit-text-stroke:2px var(--brass)}
.xp-bignum small{font-size:1.3rem;color:var(--mut);letter-spacing:.2em}
.xp-steps{position:relative;padding-left:2.6rem}
.xp-line{position:absolute;left:10px;top:14px;bottom:14px;width:2px;background:rgba(18,16,13,.14);border-radius:2px;overflow:hidden}
.xp-line span{display:block;width:100%;height:0;background:var(--brass);transition:height .6s ease}
.xp-step{display:flex;gap:1.4rem;padding:1.7rem 1.5rem;margin-bottom:1.1rem;border:1px solid rgba(18,16,13,.1);border-radius:18px;background:rgba(255,255,255,.55);opacity:.45;transition:all .5s ease;position:relative}
.xp-step .n{font-family:var(--disp);font-weight:700;font-size:1.5rem;color:var(--brass2);line-height:1.1}
.xp-step h3{font-size:1.45rem}
.xp-step.on{opacity:1;border-color:rgba(195,143,75,.55);background:#fff;box-shadow:0 18px 40px rgba(18,16,13,.1);transform:translateX(6px)}
@media (max-width:900px){
  .xp-journey-grid{grid-template-columns:1fr;gap:2.2rem}
  .xp-journey-left{position:static}
  .xp-bignum{display:none}
  .xp-step{opacity:1}
}

/* --- Acte 06 · CTA plein cadre --- */
.xp-cta{position:relative;overflow:hidden;padding:9rem 0}
.xp-cta img,.xp-cta video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xp-cta-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,16,13,.92) 22%,rgba(18,16,13,.55) 60%,rgba(18,16,13,.3))}
.xp-cta .wrap{position:relative;z-index:2}
.xp-cta h2{color:#fff;font-size:clamp(2.4rem,5.4vw,4.4rem);max-width:14ch}
.xp-cta .lead{color:#e8e1d4;max-width:52ch}

@media (prefers-reduced-motion:reduce){
  .js .rvx{opacity:1;transform:none;transition:none}
  .xp-cue-line{animation:none}
  .xp-panel{position:relative}
}
/* Hero film (V6) */
.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Splash clé en main (V6) : le film construit, le logo conclut */
.sp-logo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.95rem;opacity:0;transform:scale(.965);transition:opacity 1.1s ease,transform 1.1s ease;pointer-events:none;background:radial-gradient(ellipse at center,rgba(18,16,13,.16),rgba(18,16,13,.48))}
#splash.logo-on .sp-logo{opacity:1;transform:none}
.sp-logo img{width:clamp(92px,14vw,132px);height:auto;filter:drop-shadow(0 8px 32px rgba(0,0,0,.55))}
.sp-logo img.sp-logo-xl{width:min(640px,88vw);border-radius:6px}
.sp-logo-name{font-family:var(--disp);font-weight:700;letter-spacing:.34em;text-indent:.34em;color:#fff;font-size:clamp(1.05rem,2.6vw,1.6rem);text-shadow:0 2px 18px rgba(0,0,0,.6)}
.sp-logo-sub{letter-spacing:.58em;text-indent:.58em;color:var(--brass);font-size:.72rem;font-weight:700;text-shadow:0 2px 12px rgba(0,0,0,.6)}
#splash .sp-sub{transition:opacity .6s ease}
#splash.logo-on .sp-sub{opacity:0}

/* ===== V6.1 · FONDS GÉNÉRÉS + COUCHE OPAQUE + ANIMATIONS PARTOUT ===== */
.has-bg { position: relative; overflow: hidden; isolation: isolate; }
.xp-bg { position: absolute; inset: 0; z-index: -2; }
.xp-bg img, .xp-bg video { width: 100%; height: 100%; object-fit: cover; display: block; animation: xpDrift 26s ease-in-out infinite alternate; will-change: transform; }
@keyframes xpDrift { from { transform: scale(1) translateY(0); } to { transform: scale(1.09) translateY(-1.6%); } }
.xp-veil { position: absolute; inset: 0; z-index: -1; }
.xp-manifesto .xp-veil { background: linear-gradient(180deg, rgba(18,16,13,.9), rgba(18,16,13,.82)); }
#approche .zone-facts { background: rgba(18,16,13,.55); border-color: rgba(245,239,231,.18); color: var(--stone); }
#approche .zone-facts li { border-bottom-color: rgba(245,239,231,.14); }
.xp-journey .xp-veil { background: linear-gradient(180deg, rgba(18,16,13,.85), rgba(18,16,13,.74)); }
#approche .xp-veil { background: linear-gradient(180deg, rgba(18,16,13,.87), rgba(18,16,13,.79)); }
.has-bg > *:not(.xp-bg):not(.xp-veil) { position: relative; z-index: 1; }

/* Révélation au défilement (chaque section) */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .8s ease var(--d, 0s), transform .85s cubic-bezier(.2,.7,.2,1) var(--d, 0s); }
.rv.rv-in { opacity: 1; transform: none; }

/* Panneaux services : zoom doux + reflet qui traverse au survol */
.xp-panel > img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.xp-panel:hover > img { transform: scale(1.055); }
.xp-panel-veil::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.16) 50%, transparent 58%); transform: translateX(-110%); transition: transform 1s ease; pointer-events: none; }
.xp-panel:hover .xp-panel-veil::after { transform: translateX(110%); }

/* Galerie : légendes qui montent au survol */
.xp-track figure figcaption { transition: transform .5s ease, opacity .5s ease; }
.xp-track figure:hover figcaption { transform: translateY(-4px); }

/* CTA : logo généré + reflet sur les boutons */
.xp-cta img.xp-cta-logo { position: relative; inset: auto; width: min(400px, 74vw); height: auto; object-fit: contain; display: block; margin: 0 auto 28px; border-radius: 14px; border: 1px solid rgba(245,239,231,.28); box-shadow: 0 30px 60px -18px rgba(0,0,0,.55); }
.xp-journey-left h2 { color: var(--stone); }
.xp-journey-left .lead { color: rgba(245,239,231,.8); }
.xp-cta .btn { position: relative; overflow: hidden; }
.xp-cta .btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.22) 50%, transparent 58%); transform: translateX(-110%); transition: transform .9s ease; pointer-events: none; }
.xp-cta .btn:hover::after { transform: translateX(110%); }

@media (prefers-reduced-motion: reduce) {
  .xp-bg img { animation: none; }
  .rv { opacity: 1; transform: none; transition: none; }
}