/* =====================================================================
   KmsDev Agency — Expérience 3D de l'accueil (« la rue des commerçants »)
   Sans html.is-3d : les panneaux restent des sections classiques.
   ===================================================================== */

/* ---------- Mode statique (repli) ---------- */
.xp { display: none; }
.story { position: relative; z-index: 2; }
.story-panel { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.story-panel--hero { padding-top: clamp(7rem, 14vh, 11rem); padding-bottom: clamp(2rem, 5vw, 4rem); }
.story-card { padding-block: clamp(1.75rem, 3.5vw, 2.75rem); border-top: 1px solid var(--line); display: grid; gap: .9rem; justify-items: start; }
.story-card p { margin: 0; color: var(--muted); max-width: 46ch; }
.story-card .svc-tags { justify-content: flex-start; }
.story-card .display-3 em { color: var(--forest); font-style: normal; }
.story-panel--fin { padding-block: clamp(2.75rem, 5.5vw, 4.5rem); display: grid; gap: 1rem; justify-items: start; }
.story-panel--fin .lead { margin: 0; }

/* ---------- Lenis (smooth scroll) ----------
   Requis : sans ça, html{scroll-behavior:smooth} de main.css contrarie Lenis
   et la molette ne fait plus défiler (il faut le clic-molette). */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Mode 3D ---------- */
.is-3d body { background: var(--paper); }
.is-3d .xp { display: block; }
.is-3d .xp-canvas { position: fixed; inset: 0; z-index: 0; width: 100vw; height: 100vh; height: 100lvh; }
.is-3d .xp-vignette {
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(20, 20, 16, .16) 100%);
}

/* Piste de scroll : sa hauteur fixe la durée du voyage */
.is-3d .story { height: 1100vh; }
.is-3d main > .section { background: var(--paper); }
.is-3d .site-footer { z-index: 3; }

/* Header toujours lisible par-dessus la scène et le texte du hero (sinon chevauchement) */
.is-3d .site-header {
    background: color-mix(in srgb, var(--paper) 86%, transparent);
    backdrop-filter: blur(10px) saturate(1.05); -webkit-backdrop-filter: blur(10px) saturate(1.05);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}

.is-3d .story-panel {
    position: fixed; z-index: 5; margin: 0; max-width: none;
    opacity: 0; pointer-events: none;
    transform: translate3d(var(--tx, 0), calc(var(--ty, 0%) + var(--y, 0px)), 0);
    will-change: opacity, transform;
}
.is-3d .story-panel.is-on { pointer-events: auto; }

/* Révélation mot à mot des titres : chaque mot glisse depuis un masque (marges pour les accents et jambages) */
.is-3d .xp-mot { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em .03em .16em; margin: -.1em -.03em -.16em; }
.is-3d .xp-mot-i { display: inline-block; will-change: transform; }
.is-3d .story-panel > * { will-change: transform, opacity; }

.is-3d .story-panel--hero {
    left: 0; right: 0; top: 0; bottom: 0; padding: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
    padding-top: clamp(6rem, 11vh, 8rem); padding-bottom: 4.5rem;
}
/* Sur écran court, le contenu démarre sous le header plutôt que de se centrer et déborder dessus */
@media (max-height: 820px) { .is-3d .story-panel--hero { justify-content: flex-start; } }
.is-3d .story-panel--hero > * { max-width: 34rem; }
.is-3d .story-panel--hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, color-mix(in srgb, var(--paper) 82%, transparent) 0%, color-mix(in srgb, var(--paper) 55%, transparent) 38%, transparent 62%);
}
.is-3d .story-panel--hero .hero-title { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 5.2rem); }
.is-3d .story-panel--hero .hero-meta { border-top-color: color-mix(in srgb, var(--ink) 14%, transparent); }
@media (max-height: 860px) { .is-3d .story-panel--hero .hero-meta { display: none; } }

.is-3d .story-card {
    --ty: -50%;
    top: 50%; left: var(--gutter); width: min(25rem, calc(100vw - 2 * var(--gutter)));
    padding: clamp(1.4rem, 2.4vw, 2rem);
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--paper-hi) 86%, transparent);
    backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
    box-shadow: 0 30px 60px -36px rgba(20, 20, 16, .45);
}
.is-3d .story-card--right { left: auto; right: var(--gutter); }

/* Final en miroir de l'ouverture : panneau à gauche, le K reformé occupe la droite */
.is-3d .story-panel--fin {
    --ty: -50%;
    left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); top: 50%;
    width: min(34rem, calc(100vw - 2 * var(--gutter)));
    padding: clamp(1.6rem, 3.5vw, 2.8rem); justify-items: start; text-align: left;
    border-radius: clamp(18px, 3vw, 30px);
    background: color-mix(in srgb, var(--paper-hi) 84%, transparent);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    box-shadow: 0 40px 80px -40px rgba(20, 20, 16, .5);
}
.is-3d .story-panel--fin .hero-actions { justify-content: flex-start; margin-top: .6rem; }
@media (max-width: 900px) {
    .is-3d .story-panel--fin { --ty: 0%; top: auto; bottom: 4.8rem; left: var(--gutter); right: var(--gutter); width: auto; }
}

/* ---------- HUD ---------- */
.xp-chapitre {
    position: fixed; z-index: 6; left: var(--gutter); bottom: 1.6rem;
    display: grid; gap: .55rem; pointer-events: none;
}
.xp-chapitre span {
    font-family: var(--font-body); font-size: .7rem; font-weight: 600;
    letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft);
}
.xp-chapitre i { display: block; width: 180px; height: 2px; background: color-mix(in srgb, var(--ink) 14%, transparent); overflow: hidden; border-radius: 2px; }
.xp-chapitre b { display: block; height: 100%; background: var(--forest); transform: scaleX(0); transform-origin: 0 50%; }

/* Cartouche sur fond flouté : lisible sur la chaussée comme dans l'atelier */
.xp-lieu {
    position: fixed; z-index: 6; right: var(--gutter); bottom: 1.4rem;
    display: grid; justify-items: end; opacity: 0; pointer-events: none;
    padding: .85rem 1.15rem .8rem; border-radius: 16px;
    background: color-mix(in srgb, var(--paper-hi) 84%, transparent);
    backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1);
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    box-shadow: 0 20px 40px -28px rgba(20, 20, 16, .45);
    transition: background-color .6s ease, border-color .6s ease;
}
.xp-lieu-nom { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); line-height: 1; letter-spacing: -.02em; color: var(--forest); }
.xp-lieu-coord {
    display: flex; align-items: center; gap: .5rem; margin-top: .5rem;
    font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.xp-lieu-coord::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 25%, transparent); }

.xp-sous-titre {
    position: fixed; z-index: 6; left: 50%; bottom: 12vh; transform: translateX(-50%);
    width: min(760px, calc(100vw - 2 * var(--gutter))); margin: 0; text-align: center;
    font-family: var(--font-display); font-size: clamp(1.15rem, .9rem + 1vw, 1.7rem); font-weight: 500; line-height: 1.3;
    color: var(--ink); opacity: 0; pointer-events: none; text-wrap: balance;
    text-shadow: 0 0 18px var(--paper), 0 0 2px var(--paper);
}
.xp-sous-titre b { color: var(--forest); font-weight: 700; }

/* Dans l'atelier (scène sombre) : HUD en clair */
.xp-chapitre span, .xp-chapitre i, .xp-lieu-nom, .xp-lieu-coord, .xp-sous-titre, .xp-sous-titre b { transition: color .6s ease, background-color .6s ease, text-shadow .6s ease; }
.is-atelier .xp-chapitre span { color: color-mix(in srgb, var(--paper) 78%, transparent); }
.is-atelier .xp-chapitre i { background: color-mix(in srgb, var(--paper) 20%, transparent); }
.is-atelier .xp-chapitre b { background: #D9C9A8; }
.is-atelier .xp-lieu { background: rgba(28, 22, 18, .72); border-color: rgba(217, 201, 168, .18); }
.is-atelier .xp-lieu-nom { color: #D9C9A8; }
.is-atelier .xp-lieu-coord { color: color-mix(in srgb, var(--paper) 78%, transparent); }
.is-atelier .xp-sous-titre { color: var(--paper); text-shadow: 0 0 18px #1C1612, 0 0 3px #1C1612; }
.is-atelier .xp-sous-titre b { color: #D9C9A8; }

.xp-indice {
    position: fixed; z-index: 6; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
    display: flex; align-items: center; gap: .7rem; pointer-events: none;
    font-size: .78rem; font-weight: 600; letter-spacing: .08em; color: var(--ink-soft);
    opacity: 0; transition: opacity .8s var(--ease);
}
.is-pret .xp-indice { opacity: 1; }
.xp-souris { width: 20px; height: 30px; border: 1.5px solid currentColor; border-radius: 10px; display: grid; justify-items: center; padding-top: 5px; }
.xp-souris i { width: 2px; height: 6px; border-radius: 2px; background: var(--forest); animation: xp-molette 1.6s var(--ease) infinite; }
@keyframes xp-molette { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(8px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- Écran de chargement ---------- */
.xp-chargement {
    position: fixed; inset: 0; z-index: 60; background: var(--paper);
    display: grid; grid-template-rows: auto 1fr auto; padding: clamp(1.25rem, 3vw, 2.2rem) var(--gutter);
    transition: clip-path 1s cubic-bezier(.76, 0, .24, 1) .35s;
    clip-path: inset(0 0 0 0);
}
.xp-chargement::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.xp-chargement.is-parti { clip-path: inset(0 0 100% 0); pointer-events: none; }
.xp-chargement-haut { display: flex; justify-content: space-between; gap: 1rem; font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.xp-chargement-haut span:first-child { color: var(--forest); }
.xp-chargement-logo { place-self: center; width: clamp(96px, 16vw, 168px); height: auto; overflow: visible; transition: transform .9s var(--ease), opacity .6s; }
.xp-trace {
    fill: none; stroke: var(--forest); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 1; stroke-dashoffset: 1; animation: xp-trace 2.2s var(--ease) forwards;
}
.xp-trace + .xp-trace { stroke: var(--brass); stroke-width: 2.1; animation-delay: .5s; }
@keyframes xp-trace { to { stroke-dashoffset: 0; } }
.xp-chargement.is-fini rect.xp-trace { fill: var(--forest); transition: fill .5s; }
.xp-chargement.is-fini .xp-chargement-logo { transform: scale(1.08); }
.xp-chargement.is-parti .xp-chargement-logo { transform: scale(.6); opacity: 0; }

.xp-chargement-bas { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; padding-bottom: 1.2rem; }
.xp-astuce { max-width: 34ch; }
.xp-tag { font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.xp-astuce p { margin: .45rem 0 0; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.45; animation: xp-astuce .5s var(--ease); }
@keyframes xp-astuce { from { opacity: 0; transform: translateY(6px); } }
.xp-compteur { display: grid; justify-items: end; gap: .2rem; }
.xp-compteur > span { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.xp-compteur b { font-family: var(--font-display); font-weight: 800; font-size: clamp(3.4rem, 2rem + 6vw, 7rem); line-height: .85; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--ink); }
.xp-compteur em { font-style: normal; font-size: .4em; color: var(--brass); margin-left: .05em; }
.xp-barre { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--paper-lo); }
.xp-barre span { display: block; height: 100%; background: var(--forest); transform: scaleX(0); transform-origin: 0 50%; transition: transform .25s linear; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
    .is-3d .story-panel--hero { justify-content: flex-start; padding-top: 6.5rem; }
    .is-3d .story-panel--hero .hero-meta { display: none; }
    .is-3d .story-panel--hero::before { background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 88%, transparent) 0%, color-mix(in srgb, var(--paper) 70%, transparent) 55%, transparent 72%); }
    .is-3d .story-card,
    .is-3d .story-card--right { --ty: 0%; top: auto; bottom: 4.8rem; left: var(--gutter); right: var(--gutter); width: auto; }
    .xp-lieu { top: 5.2rem; bottom: auto; }
    .xp-chapitre i { width: 120px; }
    .xp-sous-titre { bottom: auto; top: 30vh; }
}
@media (max-width: 560px) {
    .is-3d .story-panel--hero .hero-lead { font-size: var(--step-0); }
    .is-3d .story-card .svc-tags { display: none; }
    .xp-indice { display: none; }
    .xp-lieu { padding: .6rem .85rem .55rem; border-radius: 12px; }
    .xp-lieu-coord { font-size: .62rem; letter-spacing: .08em; margin-top: .35rem; }
    .xp-chargement-bas { flex-direction: column; align-items: stretch; gap: 1.2rem; }
    .xp-compteur { justify-items: start; }
}

/* Le bouton fantôme reste lisible quand le logo passe derrière (mobile) */
.is-3d .story-panel--hero .btn-ghost { background: color-mix(in srgb, var(--paper) 85%, transparent); }
.is-3d .story-panel--hero .btn-ghost:hover { background: var(--ink); }