:root {
  --fond: #0f1a15; --lin: #f3ecdc; --lin-2: rgba(243, 236, 220, .82); --lin-3: rgba(243, 236, 220, .56); --trait: rgba(243, 236, 220, .18);
  --miel: #e3b06a; --miel-2: #f1cf96;
  --f-titre: "Fraunces", Georgia, serif; --f-texte: "Manrope", "Segoe UI", system-ui, sans-serif; --ease: cubic-bezier(.22, .8, .24, 1);
  --bord: clamp(20px, 5vw, 72px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--lin); font-family: var(--f-texte); font-size: clamp(15px, 1.05vw, 17px); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, p, ol { margin: 0; }
:focus-visible { outline: 2px solid var(--miel); outline-offset: 3px; border-radius: 6px; }
.evitement { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--miel); color: #1a1408; padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; transition: top .3s; }
.evitement:focus { top: 16px; }

.im-tete { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; gap: 24px; padding: 18px var(--bord); background: linear-gradient(180deg, rgba(8, 14, 11, .55), rgba(8, 14, 11, 0)); }
.im-tete__logo img { width: 118px; }
.im-tete__nav { display: flex; align-items: center; gap: 22px; margin-left: auto; font-size: .86rem; font-weight: 600; }
.im-tete__nav > a:not(.im-cta) { text-decoration: none; color: var(--lin-2); transition: color .3s; }
.im-tete__nav > a:not(.im-cta):hover { color: var(--lin); }
.im-cta { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; background: var(--miel); color: #1a1408; font-weight: 700; font-size: .88rem; text-decoration: none; white-space: nowrap; transition: transform .4s var(--ease), background .3s; }
.im-cta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #1a1408; opacity: .85; }
.im-cta:hover { transform: translateY(-2px); background: var(--miel-2); }
.im-cta__suite { margin-left: calc(.28em - 10px); }
.im-cta--grand { padding: 16px 28px; font-size: .98rem; }

.im-toile { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; background: var(--fond); }
.im-voile { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(8, 14, 11, .78) 0%, rgba(8, 14, 11, .28) 32%, rgba(8, 14, 11, 0) 55%), radial-gradient(130% 100% at 50% 45%, rgba(8, 14, 11, 0) 55%, rgba(8, 14, 11, .45) 100%); }

.im-intro { position: fixed; z-index: 5; left: var(--bord); right: var(--bord); bottom: clamp(48px, 10vh, 110px); max-width: 900px; transition: opacity .6s, transform .8s var(--ease); }
.im-intro.cache { opacity: 0; transform: translateY(-18px); pointer-events: none; }
.im-surtitre { font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; font-weight: 700; color: var(--miel-2); }
.im-intro h1 { font-family: var(--f-titre); font-weight: 300; font-size: clamp(2.8rem, 7vw, 6.6rem); line-height: .98; letter-spacing: -.025em; margin: 16px 0 28px; text-wrap: balance; }
.im-intro h1 em, .im-scene h2 em { font-style: italic; color: var(--miel-2); font-weight: 300; }
.im-intro__suite { display: flex; align-items: center; gap: 14px; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lin-2); }
.im-intro__trait { position: relative; width: 1px; height: 46px; background: var(--trait); overflow: hidden; }
.im-intro__trait::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--miel); animation: im-descend 2.2s var(--ease) infinite; }
@keyframes im-descend { to { top: 100%; } }

.im-scenes { list-style: none; padding: 0; }
.im:not(.statique) .im-scene img { display: none; }
.im-scene { position: fixed; z-index: 5; left: var(--bord); right: var(--bord); bottom: clamp(70px, 12vh, 130px); max-width: 760px; opacity: 0; transform: translateY(24px); pointer-events: none; transition: opacity .55s, transform .9s var(--ease); }
.im-scene.vu { opacity: 1; transform: none; pointer-events: auto; }
.im-num { font-size: .74rem; letter-spacing: .22em; font-weight: 700; color: var(--miel); }
.im-scene h2 { font-family: var(--f-titre); font-weight: 300; font-size: clamp(2.2rem, 5.2vw, 4.8rem); line-height: 1.02; letter-spacing: -.02em; margin: 12px 0 14px; text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.im-scene > p:not(.im-num):not(.im-fin__actions) { font-size: clamp(1rem, 1.3vw, 1.18rem); color: var(--lin-2); max-width: 32em; }
.im-fin__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 28px; }
.im-lien { font-weight: 600; text-decoration: none; padding-bottom: 3px; background: linear-gradient(var(--miel), var(--miel)) 0 100% / 100% 1px no-repeat; transition: color .3s, background-size .4s var(--ease); }
.im-lien:hover { color: var(--miel-2); background-size: 100% 2px; }

.im-rail { position: fixed; z-index: 6; right: var(--bord); bottom: clamp(70px, 12vh, 130px); display: grid; justify-items: end; gap: 10px; font-family: var(--f-titre); color: var(--lin-3); transition: opacity .5s; }
.im-rail b { font-weight: 300; font-size: 1.9rem; color: var(--lin); font-variant-numeric: tabular-nums; }
.im-rail__ligne { width: 120px; height: 1px; background: var(--trait); overflow: hidden; }
.im-rail__ligne i { display: block; height: 100%; background: var(--miel); transform-origin: left; transform: scaleX(var(--p, 0)); }
.im.au-debut .im-rail { opacity: 0; }
.im-rail { text-shadow: 0 1px 14px rgba(0, 0, 0, .55); }
.im-scene, .im-rail { translate: 0 calc(var(--leve, 0) * -1px); }

.im-piste { height: calc(100vh * 15); height: calc(100svh * 15); }

.im-chemin { position: fixed; z-index: 7; top: 92px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); padding: 12px 18px 14px; border-radius: 10px; background: rgba(10, 18, 14, .74); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px var(--trait); font-size: .84rem; line-height: 1.5; color: var(--lin-2); pointer-events: none; }
.im-chemin[hidden] { display: none; }
.im-chemin__total { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lin-3); margin-bottom: 6px; }
.im-chemin b { color: var(--lin); }
.im-chemin b.ia { color: var(--miel-2); }
.im-chemin small { color: var(--lin-3); }

.im-pied { position: relative; z-index: 10; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 26px var(--bord); background: var(--fond); border-top: 1px solid var(--trait); font-size: .82rem; color: var(--lin-3); }
.im-pied a, .im-pied button { color: var(--lin-2); }
.lien-cookies { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }

.son { position: fixed; right: 24px; top: 86px; z-index: 31; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 13px; border: 0; border-radius: 999px; background: rgba(14, 26, 20, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(243, 236, 220, .24); color: var(--lin-2); font: 600 .78rem var(--f-texte); cursor: pointer; transition: color .3s, box-shadow .3s; }
.son:hover { color: var(--lin); box-shadow: inset 0 0 0 1px var(--miel); }
.son__barres { display: flex; align-items: center; gap: 3px; height: 16px; }
.son__barres i { width: 2px; height: 5px; border-radius: 2px; background: currentColor; }
.son__barres i:nth-child(2) { height: 9px; } .son__barres i:nth-child(3) { height: 7px; }
.son--actif { color: var(--lin); box-shadow: inset 0 0 0 1px rgba(227, 176, 106, .6); }
.son--actif .son__barres i { background: var(--miel); animation: son-onde 1.3s ease-in-out infinite alternate; }
.son--actif .son__barres i:nth-child(2) { animation-delay: -.4s; } .son--actif .son__barres i:nth-child(3) { animation-delay: -.8s; } .son--actif .son__barres i:nth-child(4) { animation-delay: -1.1s; }
@keyframes son-onde { from { height: 4px; } to { height: 15px; } }

@media (max-width: 860px) {
  .im-tete__nav > a:not(.im-cta) { display: none; }
  .im-tete { padding: 14px 18px; }
  .im-tete__logo img { width: 104px; }
  .son { top: auto; bottom: calc(18px + env(safe-area-inset-bottom)); right: 16px; padding: 12px; }
  .son__texte { display: none; }
  .im-rail { top: 84px; bottom: auto; right: 18px; translate: none; }
  .im-scene, .im-intro { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .im-chemin { top: 150px; font-size: .78rem; }
}
@media (max-width: 560px) { .im-cta__suite { display: none; } }

.im.statique .im-toile, .im.statique .im-voile, .im.statique .im-rail, .im.statique .im-piste, .im.statique .im-intro__trait { display: none; }
.im.statique .im-intro, .im.statique .im-scene { position: relative; left: auto; right: auto; bottom: auto; opacity: 1; transform: none; pointer-events: auto; max-width: none; }
.im.statique .im-intro { padding: 140px var(--bord) 60px; }
.im.statique .im-scene { padding: 0 var(--bord) 70px; }
.im.statique .im-scene img { width: 100%; max-height: 80vh; object-fit: cover; border-radius: 14px; margin-bottom: 22px; }