/* ============================================================
   SUMO v12 ; pages éditoriales tirées de l'ancienne page unique
   (Histoire, Galerie, FAQ). Les sections gardent leurs styles
   d'origine (style.css) ; ce fichier n'ajoute que le nécessaire.
============================================================ */

/* une page qui commence directement par une section : un peu d'air
   sous la barre de navigation */
.spage > .story:first-child,
.spage > .gallery:first-child,
.spage > .faq:first-child { padding-top: clamp(70px, 10vh, 120px); }

/* ------------------------------------------------------------
   HISTOIRE — la gamme, quatre mots
------------------------------------------------------------ */
.hgamme { background: var(--bg); padding: var(--sp) var(--gut); }
.hgamme__lead {
  max-width: 56ch; margin: 26px auto 0;
  font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.65; color: var(--ink-60);
}
.hgamme__list {
  list-style: none; padding: 0;
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.8vw, 22px);
}
.hword {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
  padding: clamp(24px, 2.6vw, 34px); border-radius: 26px;
  background: var(--noir); color: #fff; min-height: 340px;
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
.hword:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.hword__kanji {
  position: absolute; right: -6px; bottom: -22px;
  font-size: clamp(5rem, 9vw, 7.5rem); font-weight: 700; line-height: 1;
  color: rgba(255,255,255,.06); pointer-events: none;
  font-family: "Yu Gothic", "Hiragino Sans", "Meiryo", "Noto Sans JP", sans-serif;
  transition: color .6s var(--ease), transform .8s var(--ease);
}
.hword:hover .hword__kanji { color: rgba(200,154,75,.22); transform: translateY(-6px); }
.hword__name { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: .08em; color: var(--accent); }
.hword__mean { font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.hword p { margin-top: auto; font-size: .95rem; line-height: 1.55; color: rgba(255,255,255,.72); position: relative; }
.hword p em { display: block; margin-top: 6px; color: #fff; font-style: italic; }
.hword__go {
  position: relative; align-self: flex-start; margin-top: 10px;
  font-size: .82rem; font-weight: 700; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 2px;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.hword__go:hover { color: var(--accent); border-color: var(--accent); }
.hword--title { background: linear-gradient(160deg, #1a1712, #0D0D0D 60%); }

@media (max-width: 1024px) { .hgamme__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .hgamme__list { grid-template-columns: 1fr; } .hword { min-height: 0; } }

/* ------------------------------------------------------------
   GALERIE — les photos s'agrandissent au clic
------------------------------------------------------------ */
.gallery__item img[data-zoom] { cursor: zoom-in; }