/** Shopify CDN: Minification failed

Line 14:0 Unexpected "{"
Line 14:1 Unexpected "{"
Line 14:3 Expected identifier but found "'luma-histoire.css'"
Line 16:0 Unexpected "<"
Line 108:0 Unexpected "<"
Line 124:59 Unterminated string token
Line 143:296 Unterminated string token
Line 166:311 Unterminated string token
Line 197:223 Unterminated string token

**/
{{ 'luma-histoire.css' | asset_url | stylesheet_tag }}

<style>
:root {
  --bg:    #f9f8f6;
  --bg-2:  #f2efe9;
  --bg-3:  #ece8e0;
  --noir:  #111110;
  --mid:   #6b6560;
  --light: #b5afa7;
  --border:rgba(0,0,0,.07);
  --H: 'Bayon', sans-serif;
  --B: 'Red Hat Display', sans-serif;
  --A: 'Trirong', serif;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--noir); font-family:var(--B); font-weight:300; -webkit-font-smoothing:antialiased; }

nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:0 48px; height:62px; background:rgba(249,248,246,.95); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); }
.nav-logo { font-family:var(--H); font-size:22px; letter-spacing:.5em; text-transform:uppercase; color:var(--noir); text-decoration:none; }
.nav-r { display:flex; gap:32px; }
.nav-r a { font-family:var(--B); font-weight:600; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--mid); text-decoration:none; transition:color .2s; }
.nav-r a:hover, .nav-r a.active { color:var(--noir); }

.cover { padding-top:62px; min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.cover-left { background:linear-gradient(170deg,#FEF4EC 0%,#FEF0F4 50%,#FAF0F8 100%); display:flex; flex-direction:column; justify-content:center; padding:80px 64px; border-right:1px solid var(--border); }
.cover-kicker { font-weight:600; font-size:10px; letter-spacing:.35em; text-transform:uppercase; color:var(--light); margin-bottom:24px; }
.cover-title { font-family:var(--H); font-size:clamp(52px,6vw,96px); text-transform:uppercase; color:var(--noir); line-height:.92; margin-bottom:10px; }
.cover-accent { font-family:var(--A); font-size:clamp(34px,4vw,62px); color:var(--mid); display:block; margin-bottom:40px; }
.cover-intro { font-size:16px; line-height:1.9; color:var(--mid); max-width:440px; font-weight:300; margin-bottom:48px; }
.cover-scroll { display:flex; align-items:center; gap:12px; font-weight:600; font-size:10px; letter-spacing:.25em; text-transform:uppercase; color:var(--light); }
.cover-scroll-line { width:40px; height:1px; background:var(--light); }
.cover-right { overflow:hidden; }
.cover-right img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }

.chapeau { padding:80px 48px; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; border-bottom:1px solid var(--border); }
.chapeau-num { font-family:var(--H); font-size:120px; color:var(--bg-3); line-height:1; margin-bottom:-16px; }
.chapeau-title { font-family:var(--H); font-size:clamp(36px,4vw,60px); text-transform:uppercase; color:var(--noir); line-height:.95; margin-bottom:6px; }
.chapeau-accent { font-family:var(--A); font-size:clamp(26px,3vw,46px); color:var(--mid); display:block; }
.chapeau-right { font-size:16px; line-height:2.0; color:var(--mid); font-weight:300; }
.chapeau-right p { margin-bottom:20px; }

.full-photo { padding:48px; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--border); background:var(--bg-2); }
.full-photo img { width:100%; max-width:480px; height:auto; display:block; }

.citation { padding:80px 48px; text-align:center; background:linear-gradient(135deg,#FEF4EC 0%,#FEF0F6 50%,#FAF4FC 100%); border-bottom:1px solid var(--border); }
.citation-line { width:1px; height:48px; background:var(--light); margin:0 auto 32px; }
.citation-text { font-family:var(--A); font-size:clamp(22px,3vw,44px); color:var(--mid); line-height:1.45; max-width:780px; margin:0 auto 32px; }
.citation-line-bot { width:1px; height:48px; background:var(--light); margin:0 auto 28px; }
.citation-author { font-weight:600; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--light); }

.motif { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--border); }
.motif-content { padding:72px 60px; display:flex; flex-direction:column; justify-content:center; background:var(--bg-2); border-right:1px solid var(--border); }
.motif-img { overflow:hidden; }
.motif-img img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

.collection { border-bottom:1px solid var(--border); background:linear-gradient(135deg,#FEF8F0 0%,#FEF0F8 100%); }
.collection-header { padding:64px 48px 48px; }
.collection-title { font-family:var(--H); font-size:clamp(40px,4vw,64px); text-transform:uppercase; color:var(--noir); line-height:.95; margin-bottom:6px; }
.collection-accent { font-family:var(--A); font-size:clamp(30px,3.2vw,50px); color:var(--mid); display:block; margin-bottom:16px; }
.collection-body { font-size:14px; line-height:1.85; color:var(--mid); font-weight:300; max-width:560px; }
.collection-img { width:100%; height:520px; object-fit:cover; object-position:center; display:block; }

.valeurs { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; border-bottom:1px solid var(--border); }
.valeur-item { padding:52px 40px; background:var(--bg-2); border-right:1px solid var(--border); }
.valeur-item:last-child { border-right:none; }
.valeur-icon { font-size:22px; margin-bottom:18px; opacity:.6; }
.valeur-title { font-family:var(--H); font-size:22px; text-transform:uppercase; color:var(--noir); margin-bottom:12px; }
.valeur-body { font-size:14px; line-height:1.8; color:var(--mid); font-weight:300; }

.cta-final { padding:100px 48px; text-align:center; background:var(--bg); }
.cta-kicker { font-weight:600; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--light); margin-bottom:20px; }
.cta-title { font-family:var(--H); font-size:clamp(48px,6vw,96px); text-transform:uppercase; color:var(--noir); line-height:.92; margin-bottom:8px; }
.cta-accent { font-family:var(--A); font-size:clamp(32px,4vw,64px); color:var(--mid); display:block; margin-bottom:40px; }
.cta-body { font-size:15px; line-height:1.9; color:var(--mid); max-width:520px; margin:0 auto 48px; font-weight:300; }
.btn-dark { display:inline-flex; align-items:center; gap:12px; background:var(--noir); color:var(--bg); border:none; padding:16px 36px; font-family:var(--B); font-weight:600; font-size:10px; letter-spacing:.25em; text-transform:uppercase; cursor:pointer; text-decoration:none; transition:gap .3s; }
.btn-dark:hover { gap:18px; }

.reveal { opacity:0; transform:translateY(20px); transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

@media (max-width:749px) {
  nav { padding:0 20px; }
  .cover, .chapeau, .motif { grid-template-columns:1fr; }
  .cover-left { padding:60px 20px; }
  .chapeau { padding:60px 20px; gap:32px; }
  .motif-content { padding:48px 20px; border-right:none; border-bottom:1px solid var(--border); }
  .citation { padding:60px 20px; }
  .collection-header { padding:48px 20px 32px; }
  .collection-img { height:300px; }
  .valeurs { grid-template-columns:1fr; }
  .cta-final { padding:60px 20px; }
}
</style>

<nav>
  <a href="#" class="nav-logo">Luma</a>
  <div class="nav-r">
    <a href="#">Collection</a>
    <a href="#">Lookbook</a>
    <a href="#" class="active">Notre histoire</a>
    <a href="#">Contact</a>
  </div>
</nav>

<section class="cover">
  <div class="cover-left">
    <p class="cover-kicker">La Maison Luma · Notre histoire</p>
    <h1 class="cover-title">Tombees</h1>
    <span class="cover-accent">amoureuses d'un motif</span>
    <p class="cover-intro">Tout a commence par un coup de coeur. Un tissu apercu en voyage, une texture qu'on n'oublie pas, un motif qui raconte quelque chose sans avoir besoin de mots. C'est de la qu'est nee Luma.</p>
    <div class="cover-scroll">
      <div class="cover-scroll-line"></div>
      Decouvrir
    </div>
  </div>
  <div class="cover-right">
    <img src="/cdn/shop/files/IMG_7995.jpg?v=1781207244" alt="Pochette Luma">
  </div>
</section>

<div class="chapeau reveal">
  <div>
    <div class="chapeau-num">01</div>
    <h2 class="chapeau-title">Un coup</h2>
    <span class="chapeau-accent">de coeur en voyage</span>
  </div>
  <div class="chapeau-right">
    <p>Tout commence dans une ruelle, un marche, une echoppe oubliee quelque part entre deux vols. Un tissu pose la, presque par hasard. Les doigts qui s'arretent. L'oeil qui reste. Ce sentiment immediat, impossible a expliquer — que cette piece-la a quelque chose que les autres n'ont pas.</p>
    <p>C'est exactement ce que nous avons ressenti en decouvrant ces tissus jacquard et brodes, deniches aux quatre coins du monde. Des motifs zigzag aux ondulations hypnotiques, des broderies florales d'une densite rare, des jeux de couleurs qui semblent vivants selon la lumiere.</p>
    <p>Nous ne les fabriquons pas. Nous les choisissons. Avec le meme soin qu'on met a choisir quelque chose qu'on va garder longtemps.</p>
  </div>
</div>

<div class="full-photo reveal">
  <img src="/cdn/shop/files/BeckSondergaard_becksondergaard_Instagram-billeder_og_-videoer.jpg?v=1780343939" alt="Luma en voyage">
</div>

<div class="citation reveal">
  <div class="citation-line"></div>
  <p class="citation-text">« Nous ne cherchions pas a creer une marque. Nous cherchions une pochette qui nous ressemble — qui a voyage, qui a du caractere, qui n'a pas besoin de logo pour qu'on la remarque. »</p>
  <div class="citation-line-bot"></div>
  <p class="citation-author">La Maison Luma</p>
</div>

<div class="motif reveal">
  <div class="motif-content">
    <p style="font-weight:600;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--light);margin-bottom:20px;">03 — Le motif</p>
    <div style="font-family:var(--H);font-size:80px;color:rgba(180,160,150,.15);line-height:1;margin-bottom:-8px;">03</div>
    <h2 style="font-family:var(--H);font-size:clamp(36px,4vw,60px);text-transform:uppercase;color:var(--noir);line-height:.95;margin-bottom:6px;">Des tissus</h2>
    <span style="font-family:var(--A);font-size:clamp(28px,3vw,46px);color:var(--mid);display:block;margin-bottom:28px;">qui ont une ame</span>
    <p style="font-size:15px;line-height:1.95;color:var(--mid);font-weight:300;margin-bottom:20px;">Ce qui nous a seduit dans ces tissus, c'est leur complexite. Les motifs jacquard ne sont pas imprimes — ils sont tisses dans la matiere. Les broderies ne sont pas appliquees — elles font partie du tissu.</p>
    <p style="font-size:15px;line-height:1.95;color:var(--mid);font-weight:300;">Selectionnes en Europe et a travers le monde, chaque tissu est choisi pour son caractere unique. Certains evoquent les marches colores du bassin mediterraneen. D'autres rappellent les motifs geometriques des artisans d'Asie centrale. Tous racontent un voyage.</p>
  </div>
  <div class="motif-img">
    <img src="/cdn/shop/files/57.jpg?v=1780344025" alt="Motif jacquard Luma">
  </div>
</div>

<div class="collection reveal">
  <div class="collection-header">
    <h2 class="collection-title">Seize prenoms.</h2>
    <span class="collection-accent">Seize caracteres.</span>
    <p class="collection-body">Chaque piece denichee aux quatre coins du monde, chacune attendant de partir avec vous.</p>
  </div>
  <img class="collection-img" src="/cdn/shop/files/5EEF6199-555F-4FC2-B60D-47B9F9146FCD.jpg?v=1781203989" alt="Collection Luma">
</div>

<div class="valeurs">
  <div class="valeur-item reveal">
    <div class="valeur-icon">✦</div>
    <h3 class="valeur-title">Selection mondiale</h3>
    <p class="valeur-body">Nos tissus sont deniches en Europe et a travers le monde — chacun choisi pour la richesse de ses motifs, la qualite de son tissage, et cette petite chose qu'on ne sait pas expliquer mais qu'on ressent immediatement.</p>
  </div>
  <div class="valeur-item reveal">
    <div class="valeur-icon">◈</div>
    <h3 class="valeur-title">Un prenom par piece</h3>
    <p class="valeur-body">Chaque pochette recoit un prenom feminin avant d'etre proposee. Parce qu'une piece qui a un caractere merite un nom. Romane n'est pas Sofia. Iris n'est pas Alya.</p>
  </div>
  <div class="valeur-item reveal">
    <div class="valeur-icon">◇</div>
    <h3 class="valeur-title">Faite pour voyager</h3>
    <p class="valeur-body">Concue pour passer de la valise cabine a la table du diner sans effort. Compacte, resistante, toujours elegante — la pochette Luma est la seule dont vous aurez besoin, du depart a l'arrivee.</p>
  </div>
</div>

<section class="cta-final reveal">
  <p class="cta-kicker">Decouvrir la collection</p>
  <h2 class="cta-title">Trouvez</h2>
  <span class="cta-accent">votre prenom</span>
  <p class="cta-body">Seize pochettes. Seize tissus deniches aux quatre coins du monde. Chacune attend de partir avec vous.</p>
  <a href="/collections/all" class="btn-dark">Voir la collection →</a>
</section>

<script>
const io = new IntersectionObserver(e => {
  e.forEach(el => { if(el.isIntersecting){ el.target.classList.add('visible'); io.unobserve(el.target); }});
}, { threshold:.07, rootMargin:'0px 0px -24px 0px' });
document.querySelectorAll('.reveal').forEach(el => io.observe(el));
</script>