:root{
    --indigo-deep:#20304C;
    --indigo-ink:#161F30;
    --washi:#F1E9D3;
    --washi-soft:#F8F3E6;
    --chalk:#AE3A2A;
    --gold:#B4913F;
    --gold-soft:#D8C089;
    --ink:#221D17;
    --cream-text:#F1E7D6;
    --line: rgba(34,29,23,0.32);

    --display:'Fraunces', serif;
    --jp:'Shippori Mincho', serif;
    --body:'Work Sans', sans-serif;
    --mono:'Space Mono', monospace;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    background:var(--washi-soft);
    color:var(--ink);
    font-family:var(--body);
	text-align: left;
    font-weight:300;
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  a{ color:inherit; text-decoration:none; }
  img{ display:block; max-width:100%; }
  :focus-visible{ outline:2px solid var(--chalk); outline-offset:3px; }
  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
    html{ scroll-behavior:auto; }
  }

  .container{ width:min(1200px, 90vw); margin-inline:auto; }

  .eyebrow{
    font-family:var(--jp);
    font-size:0.72rem;
    letter-spacing:0.28em;
    text-transform:uppercase;
    display:flex;
    align-items:center;
    gap:0.6em;
  }
  .eyebrow::before{ content:""; width:22px; height:1px; background:currentColor; opacity:0.7; }

  .mono-label{
    font-family:var(--mono);
    font-size:0.66rem;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--chalk);
  }

  h1,h2,h3{ font-family:var(--display); font-weight:500; }

  .reveal{ opacity:0; transform:translateY(24px); transition:opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1); text-align: justify;}
  .reveal.in{ opacity:1; transform:none; }

  .btn{
    display:inline-flex; align-items:center; gap:0.6em;
    font-family:var(--mono); font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase;align-items:left;
    padding:0.9em 1.7em; border:1.3px solid currentColor;
    transition:background .3s, color .3s, transform .3s;
  }
  .btn:hover{ transform:translateY(-2px); }
  .btn-solid{ background:var(--gold); border-color:var(--gold); color:var(--indigo-ink); }
  .btn-solid:hover{ background:var(--gold-soft); border-color:var(--gold-soft); }
  .btn-line{ color:inherit; }
  .btn-line:hover{ background:var(--ink); color:var(--washi-soft); }

  /* ---------- header ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:1.3rem 0;
    background:rgba(248,243,230,0.88);
    backdrop-filter:blur(8px);
    border-bottom:1px dashed var(--line);
    transition:background .3s, padding .3s;
  }
  header.scrolled{ padding:0.85rem 0; }
  nav{ display:flex; align-items:center; justify-content:space-between; }
  .brand{ display:flex; align-items:center; gap:0.7em; font-family:var(--display); font-style:italic; font-size:1.2rem; }
  .hanko{
    width:34px; height:34px; border-radius:50%;
    border:1.3px solid var(--indigo-deep);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--jp); font-size:0.78rem; color:var(--indigo-deep);
    flex-shrink:0;
  }
  .hanko-img{ width:34px; height:34px; object-fit:contain; flex-shrink:0; display:block; }
  .nav-links{ display:flex; gap:2rem; font-family:var(--mono); font-size:0.7rem; letter-spacing:0.05em; text-transform:uppercase; }
  .nav-links a{ position:relative; padding-bottom:3px; }
  .nav-links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--chalk); transition:width .3s; }
  .nav-links a:hover::after{ width:100%; }
  @media (max-width:820px){ .nav-links{ display:none;} }

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    min-height:100svh;
    display:flex; align-items:center;
    padding-top:6rem;
    background:
      radial-gradient(60% 50% at 80% 20%, rgba(180,145,63,0.18), transparent 60%),
      linear-gradient(180deg, var(--indigo-deep), var(--indigo-ink));
    color:var(--cream-text);
    overflow:hidden;
  }
  .hero-grid{
    position:relative; z-index:2;
    display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;
  }
  .hero .eyebrow{ color:var(--gold-soft); margin-bottom:1.4rem; }
  .hero h1{
    font-size:clamp(2.6rem, 6vw, 5rem);
    line-height:1.02;
    font-style:italic;
    font-weight:400;
  }
  .hero p.lead{
    margin-top:1.7rem; max-width:32em; font-size:1.03rem; color:#DCD2BC; font-weight:300; line-height:1.85;
  }
  .hero-cta{ display:flex; gap:1rem; margin-top:2.3rem; flex-wrap:wrap; }
  .stitch{ margin-top:2.8rem; max-width:380px; }
  .stitch svg{ width:100%; height:16px; }
  .stitch path{
    stroke:var(--gold); stroke-width:1.4; fill:none; stroke-dasharray:6 7;
    stroke-dashoffset:600; animation:stitchIn 2.2s ease forwards 0.5s;
  }
  @keyframes stitchIn{ to{ stroke-dashoffset:0; } }

  .hero-photo{
    position:relative;
    justify-self:end;
    width:min(100%, 500px);
    aspect-ratio:1/1;
    border:1.3px dashed var(--gold-soft);
    padding:10px;
  }
  .hero-photo .notch{
    position:absolute; width:9px; height:9px;
    background:var(--indigo-ink);
    border:1.3px dashed var(--gold-soft);
    transform:rotate(45deg);
  }
  .hero-photo .notch.tl{ top:-6px; left:-6px; } .hero-photo .notch.tr{ top:-6px; right:-6px; }
  .hero-photo .notch.bl{ bottom:-6px; left:-6px; } .hero-photo .notch.br{ bottom:-6px; right:-6px; }
  .hero-photo img{ width:100%; height:100%; object-fit:cover; }
  .hero-photo .tag{
    position:absolute; left:10px; bottom:22px;
    font-family:var(--mono); font-size:0.62rem; letter-spacing:0.05em; text-transform:uppercase;
    color:var(--washi-soft); padding:0.35em 0.6em;
    text-shadow:0 1px 4px rgba(0,0,0,0.55);
  }
  @media (max-width:860px){
    .hero-grid{ grid-template-columns:1fr; display: flex; flex-direction: column; align-items: center; }
    .hero-photo{ justify-self:start; width:min(100%, 500px); margin-top:1rem; }
  }

  /* ---------- marquee / selvage strip ---------- */
  .marquee{
    background:var(--gold); color:var(--indigo-ink);
    overflow:hidden; white-space:nowrap;
    padding:0.7rem 0;
  }
  .marquee .track{
    display:inline-block;
    font-family:var(--mono); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase;
    animation:scroll 22s linear infinite;
  }
  .marquee .track span{ margin:0 1.2rem; }
  @keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

  /* ---------- ruler divider ---------- */
  .ruler{ width:100%; background:var(--washi-soft); }
  .ruler svg{ width:100%; height:24px; display:block; }
  .ruler line{ stroke:var(--ink); opacity:0.4; }
  .ruler text{ font-family:var(--mono); font-size:8px; fill:var(--ink); opacity:0.4; }

  /* ---------- sections ---------- */
  section{ padding:6.5rem 0; }
  .section-head{ max-width:640px; margin-bottom:3.5rem; }
  .section-head .eyebrow{ color:var(--chalk); margin-bottom:1rem; }
  .section-head h2{ font-size:clamp(1.9rem, 3.4vw, 2.6rem); font-style:italic; color:var(--indigo-deep); }
  .section-head p{ margin-top:1.2rem; line-height:1.85; color:#3a3227; font-size:0.97rem; }

  /* ---------- pattern-piece collection cards ---------- */
  .pieces{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; }
  .piece{
    position:relative;
    border:1.3px dashed var(--indigo-deep);
    padding:0.85rem;
    background:var(--washi);
    opacity:0; transform:translateY(20px);
    transition:opacity .8s ease, transform .8s ease;
  }
  .piece.in{ opacity:1; transform:none; }
  .notch{
    position:absolute; width:9px; height:9px;
    background:var(--washi-soft);
    border:1.3px dashed var(--indigo-deep);
    transform:rotate(45deg);
  }
  .notch.tl{ top:-6px; left:-6px; } .notch.tr{ top:-6px; right:-6px; }
  .notch.bl{ bottom:-6px; left:-6px; } .notch.br{ bottom:-6px; right:-6px; }

  .piece-media{ aspect-ratio:3/4; overflow:hidden; }
  .piece-media img{
    width:100%; height:100%; object-fit:cover;
    filter:saturate(0.95);
    transition:transform .8s cubic-bezier(.16,.84,.44,1);
  }
  .piece:hover .piece-media img{ transform:scale(1.05); }

  .piece-label{
    display:flex; justify-content:space-between; align-items:baseline;
    padding:0.7rem 0.05rem 0.2rem;
    font-family:var(--mono); font-size:0.6rem; letter-spacing:0.04em; text-transform:uppercase;
    color:var(--chalk);
  }
  .piece h3{ font-size:1.05rem; font-style:italic; padding:0 0.05rem; color:var(--indigo-deep); }
  .piece p{ text-align: justify; font-size:0.83rem; line-height:1.65; color:#4a4132; padding:0.5rem 0.05rem 0.1rem; }

  @media (max-width:900px){ .pieces{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .pieces{ grid-template-columns:1fr; } }

  /* ---------- gallery mosaic (uncropped, masonry) ---------- */
  .gallery{ background:var(--washi); }
  .mosaic{
    column-count:3;
    column-gap:1.4rem;
  }
  .mosaic_1{
    display: grid;
	column-count:1;
    column-gap:1.4rem;
	justify-items:center;
  }
  .tile{
    position:relative;
    overflow:hidden;
    break-inside:avoid;
    margin-bottom:1.4rem;
    opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s ease;
  }
  .tile.in{ opacity:1; transform:none; }
  .tile img{ width:100%; height:auto; display:block; transition:transform .8s cubic-bezier(.16,.84,.44,1); }
  .tile:hover img{ transform:scale(1.03); }
  .tile .cap{
    position:absolute; left:0; right:0; bottom:0;
    padding:0.7rem 0.9rem;
    font-family:var(--mono); font-size:0.64rem; letter-spacing:0.05em; text-transform:uppercase;
    color:var(--washi-soft);
    background:linear-gradient(to top, rgba(22,31,48,0.72), transparent);
  }
  .tiles{
    position:relative;
    overflow:hidden;
    break-inside:avoid;
    margin-bottom:1.4rem;
    opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s ease;
  }
  .tiles.in{ opacity:1 }
  .tiles img{ width:230px; height:auto; display:block; transition:transform .8s cubic-bezier(.16,.84,.44,1); }
  .tiles:hover img{ transform:scale(1.03); }
  .tiles .cap{
    position:absolute; left:0; right:0; bottom:0;
    padding:0.7rem 0.9rem;
    font-family:var(--mono); font-size:0.64rem; letter-spacing:0.05em; text-transform:uppercase;
    color:var(--washi-soft);
  }
  @media (max-width:900px){ .mosaic{ column-count:2; } }
  @media (max-width:560px){ .mosaic{ column-count:1; } }

  /* ---------- deux marques (split w/ seam) ---------- */
  .maisons{ display:grid; grid-template-columns:1fr auto 1fr; background:var(--indigo-ink); color:var(--cream-text); }
  .maison{ padding:5rem 4vw; }
  .maison .eyebrow{ color:var(--gold-soft); margin-bottom:1rem; }
  .maison h3{ font-size:2rem; font-style:italic; margin-bottom:1.2rem; }
  .maison p{ text-align: justify; line-height:1.85; font-size:0.95rem; color:#d9d2bd; }
  .maison .meaning{ margin-top:1.4rem; font-family:var(--jp); font-size:0.85rem; color:var(--gold-soft); }
  .seam{ position:relative; width:60px; }
  .seam svg.line{ position:absolute; inset:0; width:100%; height:100%; }
  .seam-mark{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:42px; height:42px; border-radius:50%;
    background:var(--washi-soft);
    display:flex; align-items:center; justify-content:center;
  }
  @media (max-width:860px){
    .maisons{ grid-template-columns:1fr; }
    .seam{ width:100%; height:44px; }
    .seam svg.line{ transform:rotate(90deg) scale(1.6); }
  }
  @media (max-width:860px){
	  .seam {
		  display: none;
	  }
  }

  /* ---------- carnet d'atelier ---------- */
  .carnet-grid{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:4rem; align-items:start; }
  .carnet-figure{
    width:min(75%, 280px);
    aspect-ratio:4/5; background:var(--washi);
    border:1.3px dashed var(--indigo-deep);
    display:flex; align-items:center; justify-content:center; position:relative;
    overflow:hidden;
  }
  .carnet-figure img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
  .carnet-figure .initials{ font-family:var(--display); font-style:italic; font-size:3.4rem; color:var(--indigo-deep); }
  .carnet-figure .cap{
    position:absolute; bottom:0; left:0; right:0;
    padding:0.5rem 0.4rem 0.4rem;
    font-family:var(--mono); font-size:0.58rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--washi-soft); text-align:center;
    background:linear-gradient(to top, rgba(22,31,48,0.75), transparent);
  }
  .pull{
    font-family:var(--display); font-style:italic; font-size:1.3rem; color:var(--indigo-deep);
    border-left:2px solid var(--gold); padding-left:1.2rem; margin:1.6rem 0 2rem;
  }
  .entries{ border-top:1.3px dashed var(--line); }
  .entry{ display:grid; grid-template-columns:110px 1fr; gap:1.6rem; padding:1.3rem 0; border-bottom:1.3px dashed var(--line); }
  .entry .yr{ font-family:var(--mono); font-size:0.82rem; color:var(--chalk); }
  .entry p{ text-align: justify; font-size:0.92rem; line-height:1.75; color:#3a3227; }
  @media (max-width:860px){ .carnet-grid{ grid-template-columns:1fr; display: flex; flex-direction: column-reverse; align-items: center;} }

  /* ---------- cta band ---------- */
  .cta-band{ text-align:center; }
  .cta-band .eyebrow{ justify-content:center; color:var(--chalk); margin-bottom:1rem; }
  .cta-band h2{ font-size:clamp(1.9rem,3.6vw,2.7rem); font-style:italic; color:var(--indigo-deep); max-width:720px; margin:0 auto 2.2rem; }
  .cta-band .hero-cta{ justify-content:center; color:var(--indigo-deep); }
  .cta-band .btn-line{ border-color:var(--indigo-deep); }
  .cta-band .btn-line:hover{ background:var(--indigo-deep); color:var(--washi-soft); }

  /* ---------- footer ---------- */
  footer{ background:var(--indigo-ink); color:var(--cream-text); padding:0 0 2.2rem; }
  .footer-grid{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.6rem;
    padding:2.4rem 0 0;
  }
  .footer-social{ display:flex; gap:1.4rem; font-family:var(--mono); font-size:0.72rem; letter-spacing:0.05em; text-transform:uppercase; }
  .footer-social a:hover{ color:var(--gold-soft); }
  .footer-meta{ font-family:var(--mono); font-size:0.68rem; color:#9d947e; display:flex; gap:1.4rem; flex-wrap:wrap; }

 /* ---------- burger ---------- */
.nav-toggle-btn{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:32px; height:37px;
  background:none; border:none; cursor:pointer;
  padding:0;
}
.nav-toggle-btn span{
  display:block; width:100%; height:2px;
  background:var(--indigo-deep);
  transition:transform .3s ease, opacity .3s ease;
}
.nav-toggle-btn[aria-expanded="true"] span:nth-child(1){ opacity:0; }
.nav-toggle-btn[aria-expanded="true"] span:nth-child(2){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle-btn[aria-expanded="true"] span:nth-child(3){ opacity:0; }
.nav-toggle-btn[aria-expanded="true"] span:nth-child(4){ transform:translateY(-6.5px) rotate(-45deg); }
.nav-toggle-btn[aria-expanded="true"] span:nth-child(5){ opacity:0; }

@media (max-width:950px){
  .nav-toggle-btn{ display:flex;}
  .nav-links{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--washi-soft);
    border-bottom:1px dashed var(--line);
  }
  .nav-links.open{ display:flex; }
  .nav-links a{
    padding:1rem 6vw;
    border-top:1px dashed var(--line);
  }
  
}

 /* ---------- diaporama ---------- */
 .carousel-container {
  position: relative;
  width: 100%;
  margin: auto;
  overflow: hidden;
  border-radius: 10px;
}

.carousel-slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  width: 100%;
  display: none; /* Cache toutes les images par défaut */
}

.slide.active {
  display: block; /* Affiche l'image active */
}

.btndiap {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 18px;
}

.prev { left: -10px;}
.next { right: -10px;}

.carousel-dots {
  position: absolute;
  bottom: 15px;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.dot {
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.dot.active, .dot:hover {
  background-color: white;
}