/* ============================================================
   Entreprise K — SHIRO / 白
   Palette : papier, encre, un seul accent vermillon.
   ============================================================ */

:root{
  --paper:      #FCFBF7;
  --paper-2:    #F5F2EA;
  --sumi:       #1C1A17;
  --ink:        #2E2B26;
  --grey:       #6E6A62;
  --grey-2:     #9A958B;
  --hairline:   #DDD8CC;
  --shu:        #A8382B;   /* 朱 vermillon */
  --kin:        #A98B54;   /* 金 */

  --serif:  "Cormorant Garamond", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans:   "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", sans-serif;
  --mincho: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --max: 1120px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(15px, 0.55vw + 13.6px, 17px);
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }

a{ color:inherit; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--sumi); color:var(--paper); padding:.7rem 1.1rem;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--shu); outline-offset:3px; }

/* ── Top bar ─────────────────────────────────────────── */

.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:1.5rem;
  padding:.9rem var(--gutter);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hairline);
}

.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto; }

.brand-mark{
  width:2rem; height:2rem; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--sumi);
  font-family:var(--serif); font-size:1rem; letter-spacing:.02em;
}

.brand-name{
  font-family:var(--serif);
  font-size:1.12rem; letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap;
}

.nav{ display:flex; gap:1.6rem; }
.nav a{
  text-decoration:none; font-size:.82rem; letter-spacing:.09em;
  color:var(--grey); padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:color .25s, border-color .25s;
}
.nav a:hover{ color:var(--sumi); border-bottom-color:var(--shu); }

.lang{ display:flex; gap:.15rem; flex:none; }
.lang button{
  appearance:none; background:none; cursor:pointer;
  border:1px solid transparent; color:var(--grey-2);
  font-family:inherit; font-size:.72rem; letter-spacing:.08em;
  padding:.28rem .55rem; line-height:1;
  transition:color .2s, border-color .2s;
}
.lang button:hover{ color:var(--sumi); }
.lang button[aria-pressed="true"]{ color:var(--sumi); border-color:var(--hairline); }

.menu-toggle{ display:none; }

/* ── Hero ────────────────────────────────────────────── */

.hero{
  position:relative;
  padding:clamp(4.5rem, 13vh, 9rem) var(--gutter) clamp(3.5rem, 9vh, 6rem);
  overflow:hidden;
}

.hero-figure{
  position:absolute; inset:0;
  background-color:var(--paper-2);
  background-size:cover; background-position:center 62%;
  color:var(--kin);
  opacity:.5;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 78%);
          mask-image:linear-gradient(to bottom, #000 0%, transparent 78%);
}
.hero-figure .seigaiha{ width:100%; height:100%; opacity:.5; }
/* Quand une photo est déposée dans images/, elle remplace le motif. */
.hero-figure[style*="background-image"] .seigaiha{ display:none; }

.hero-inner{ position:relative; max-width:var(--max); margin-inline:auto; }

.eyebrow{
  margin:0 0 1.6rem;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--grey-2);
}
html[lang="ja"] .eyebrow{ letter-spacing:.12em; }
html[lang="ja"] .kicker,
html[lang="ja"] .infos dt{ letter-spacing:.16em; text-transform:none; }

.hero-title{
  margin:0 0 1.8rem;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.4rem, 6.4vw, 4.5rem);
  line-height:1.14; letter-spacing:.005em;
  color:var(--sumi);
  max-width:24ch;
}
html[lang="ja"] .hero-title{
  font-family:var(--mincho); font-weight:200;
  font-size:clamp(1.9rem, 5.2vw, 3.5rem);
  line-height:1.42; letter-spacing:.04em; max-width:20ch;
}

.hero-lede{
  margin:0 0 2.6rem; max-width:46ch;
  font-size:1.02rem; color:var(--grey);
}

.hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; }

.btn{
  display:inline-block; text-decoration:none;
  padding:.82rem 1.9rem;
  border:1px solid var(--hairline);
  font-size:.82rem; letter-spacing:.1em;
  color:var(--ink); background:var(--paper);
  transition:border-color .25s, color .25s, background .25s;
}
.btn:hover{ border-color:var(--sumi); }
.btn-primary{ background:var(--sumi); border-color:var(--sumi); color:var(--paper); }
.btn-primary:hover{ background:var(--shu); border-color:var(--shu); }

.hero-rule{
  position:relative; max-width:var(--max);
  margin:clamp(3rem,7vh,5rem) auto 0; height:1px;
  background:linear-gradient(to right, var(--hairline), transparent);
}

/* ── Bandeau de figures ──────────────────────────────── */

.figures{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--hairline);
  border-block:1px solid var(--hairline);
}
.figure{
  aspect-ratio:4/3;
  background-color:var(--paper-2);
  background-size:cover; background-position:center;
  position:relative;
}
.figure::after{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(45deg, transparent 0 11px, color-mix(in srgb, var(--kin) 12%, transparent) 11px 12px),
    repeating-linear-gradient(-45deg, transparent 0 11px, color-mix(in srgb, var(--kin) 12%, transparent) 11px 12px);
  opacity:.75;
}
.figure[style*="background-image"]::after{ display:none; }

@media (max-width:720px){
  .figures{ grid-template-columns:1fr 1fr; }
  .figure:last-child{ display:none; }
}

/* ── Sections ────────────────────────────────────────── */

.section{ padding:clamp(4rem, 11vh, 7.5rem) var(--gutter); }
.section-alt{ background:var(--paper-2); }

.section-head{ max-width:var(--max); margin:0 auto clamp(2.5rem,6vh,4rem); }

.kicker{
  margin:0 0 .9rem;
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--shu);
  display:flex; align-items:center; gap:.8rem;
}
.kicker::after{ content:""; height:1px; flex:1; max-width:5rem; background:var(--hairline); }

.section h2{
  margin:0;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.8rem, 3.6vw, 2.7rem);
  line-height:1.25; color:var(--sumi);
}
html[lang="ja"] .section h2{
  font-family:var(--mincho); font-weight:300;
  font-size:clamp(1.45rem, 3vw, 2.1rem); letter-spacing:.05em;
}

.section-lede{ margin:1.1rem 0 0; max-width:52ch; color:var(--grey); }

/* ── À propos ────────────────────────────────────────── */

.about-grid{
  max-width:var(--max); margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,5rem);
  align-items:start;
}
@media (max-width:860px){ .about-grid{ grid-template-columns:1fr; } }

.about-body p{ margin:0 0 1.35rem; max-width:62ch; }
.about-body .lead{
  font-family:var(--serif); font-size:clamp(1.2rem,2.1vw,1.45rem);
  line-height:1.6; color:var(--sumi);
}
html[lang="ja"] .about-body .lead{
  font-family:var(--mincho); font-size:clamp(1.05rem,1.8vw,1.2rem); line-height:1.9;
}

.facts{ list-style:none; margin:0; padding:0; border-top:1px solid var(--hairline); }
.facts li{
  display:flex; align-items:baseline; gap:1.1rem;
  padding:1.15rem 0; border-bottom:1px solid var(--hairline);
}
.fact-n{
  font-family:var(--serif); font-size:2rem; line-height:1;
  color:var(--sumi); min-width:3.6ch;
}
.fact-l{ font-size:.8rem; line-height:1.6; color:var(--grey); }

/* ── Services ────────────────────────────────────────── */

.cards{
  list-style:none; margin:0 auto; padding:0; max-width:var(--max);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(255px,1fr));
  gap:1px; background:var(--hairline);
  border:1px solid var(--hairline);
}
.card{
  background:var(--paper); padding:2rem 1.8rem 2.2rem;
  transition:background .3s;
}
.card:hover{ background:#fff; }
.card-n{
  display:block; margin-bottom:1.1rem;
  font-family:var(--serif); font-size:.85rem; letter-spacing:.18em;
  color:var(--shu);
}
.card h3{
  margin:0 0 .7rem;
  font-family:var(--serif); font-weight:400;
  font-size:1.25rem; line-height:1.35; color:var(--sumi);
}
html[lang="ja"] .card h3{ font-family:var(--mincho); font-size:1.05rem; letter-spacing:.03em; }
.card p{ margin:0; font-size:.9rem; color:var(--grey); }

/* ── Timeline ────────────────────────────────────────── */

.timeline{ list-style:none; margin:0 auto; padding:0; max-width:var(--max); }
.timeline li{
  display:grid; grid-template-columns:9rem 1fr;
  gap:clamp(1rem,4vw,3rem);
  padding:2rem 0;
  border-top:1px solid var(--hairline);
}
.timeline li:last-child{ border-bottom:1px solid var(--hairline); }
@media (max-width:640px){ .timeline li{ grid-template-columns:1fr; gap:.6rem; } }

.tl-date{
  font-family:var(--serif); font-size:.95rem; letter-spacing:.12em;
  color:var(--grey-2); padding-top:.35rem;
}
.tl-body h3{
  margin:0 0 .55rem;
  font-family:var(--serif); font-weight:400; font-size:1.3rem;
  line-height:1.35; color:var(--sumi);
}
html[lang="ja"] .tl-body h3{ font-family:var(--mincho); font-size:1.1rem; letter-spacing:.03em; }
.tl-body p{ margin:0; max-width:62ch; font-size:.92rem; color:var(--grey); }

/* ── Informations ────────────────────────────────────── */

.infos{ max-width:var(--max); margin:0 auto; }
.infos > div{
  display:grid; grid-template-columns:14rem 1fr; gap:clamp(1rem,4vw,3rem);
  padding:1.15rem 0; border-bottom:1px solid var(--hairline);
}
.infos > div:first-child{ border-top:1px solid var(--hairline); }
@media (max-width:640px){ .infos > div{ grid-template-columns:1fr; gap:.25rem; } }

.infos dt{
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey-2); padding-top:.28rem;
}
.infos dd{ margin:0; font-size:.94rem; color:var(--ink); }

/* ── Contact ─────────────────────────────────────────── */

.contact{ background:var(--sumi); color:var(--paper); }
.contact .kicker{ color:var(--kin); justify-content:center; }
.contact .kicker::after{ display:none; }
.contact h2{ color:var(--paper); }

.contact-inner{ max-width:44rem; margin-inline:auto; text-align:center; }
.contact-lede{
  margin:1.4rem auto 2.4rem; max-width:48ch;
  color:color-mix(in srgb, var(--paper) 72%, transparent);
}

.mail{
  display:inline-block;
  font-family:var(--serif); font-size:clamp(1.1rem,2.6vw,1.6rem);
  letter-spacing:.02em; text-decoration:none;
  color:var(--paper); border-bottom:1px solid color-mix(in srgb, var(--paper) 35%, transparent);
  padding-bottom:.25rem;
  transition:border-color .25s, color .25s;
  word-break:break-all;
}
.mail:hover{ color:#fff; border-bottom-color:var(--kin); }

.contact-note{
  margin:2.2rem 0 0;
  font-size:.76rem; letter-spacing:.12em;
  color:color-mix(in srgb, var(--paper) 45%, transparent);
}

/* ── Footer ──────────────────────────────────────────── */

.footer{
  padding:2rem var(--gutter);
  text-align:center;
  font-size:.74rem; letter-spacing:.1em; color:var(--grey-2);
  border-top:1px solid var(--hairline);
}
.footer p{ margin:0; }

/* ── Mobile ──────────────────────────────────────────── */

@media (max-width:880px){
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--paper); border-bottom:1px solid var(--hairline);
    padding:.5rem var(--gutter) 1.2rem;
    display:none;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:.75rem 0; border-bottom:1px solid var(--hairline); }
  .nav a:last-child{ border-bottom:none; }

  .menu-toggle{
    display:grid; place-content:center; gap:5px;
    width:2.2rem; height:2.2rem; order:3;
    background:none; border:1px solid var(--hairline); cursor:pointer;
  }
  .menu-toggle span{ display:block; width:14px; height:1px; background:var(--sumi); }
}

/* ── Apparition douce ────────────────────────────────── */

@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(14px); }
  .reveal.in{ opacity:1; transform:none; transition:opacity .8s ease, transform .8s ease; }
}

/* ── Impression ──────────────────────────────────────── */

@media print{
  .topbar,.figures,.hero-figure,.hero-actions{ display:none; }
  body{ background:#fff; }
  .contact{ background:#fff; color:#000; }
  .contact h2,.mail{ color:#000; }
}