/* ========================= */
/* styles.css */
/* ========================= */

:root{
  --paper:#f4efe6;
  --sepia-1: #5b3b1f;
  --ink: #2b2b2b;
  --muted:#7b6f63;
  --accent: #a67c52;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family: 'Noto Serif JP', 'Sawarabi Mincho', serif;
  background:linear-gradient(180deg,var(--paper),#efe7d6);
  color:var(--ink);
  font-size:0.8rem;
}

.site-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 24px;
  border-bottom:1px solid rgba(0,0,0,0.08);
  background:rgba(246,238,226,0.85);
  position:sticky;
  top:0;
  z-index:1200;
}
.brand h1{
  font-family: 'Sawarabi Mincho','Noto Serif JP', serif;
  font-size:1.6rem;
}
.brand .tag{
  font-size:0.85rem;
  color:var(--muted);
}

.lang-switch{
  display:flex;
  gap:10px;
}
.lang-switch button{
  background:var(--paper);
  border:2px solid var(--sepia-1);
  border-radius:50%;
  width:42px;
  height:42px;
  font-size:0.8rem;
  cursor:pointer;
  transition:all .3s ease;
  font-weight:bold;
  color:var(--sepia-1);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
}
.lang-switch button:hover{
  background:var(--sepia-1);
  color:#fff;
  transform:translateY(-2px);
}
.lang-switch button.active{
  background:var(--accent);
  color:#fff;
}

.container{
  max-width:1200px;
  margin:28px auto;
  padding:0 18px;
}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.7), rgba(250,244,236,0.6));
  border-radius:12px;
  padding:20px;
  margin-bottom:20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.intro{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  align-items:center;
}
.intro-left{flex:1;min-width:250px}
.sepia-illustration{width:140px;height:140px;flex-shrink:0}

.ink-svg{width:100%;height:100%;opacity:0.85;filter:sepia(0.6) contrast(0.9)}

.map{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start}
.svg-wrap{width:100%;border-radius:8px;overflow:hidden;border:1px solid rgba(0,0,0,0.1)}
.town-map{width:100%;height:auto;display:block}
.map-bg{fill:#efe4d0}
.map-point circle{fill:var(--sepia-1);stroke:#fff;stroke-width:2;cursor:pointer;transition:transform .2s ease}
.map-point circle:hover{transform:scale(1.2)}

.info-panel{padding:14px;border-left:2px dashed rgba(0,0,0,0.05)}
.info-panel h4{margin-bottom:8px;font-size:1.1rem}
.info-panel p{margin-bottom:12px;color:var(--muted)}
.more{display:inline-block;padding:8px 12px;border-radius:8px;background:var(--accent);color:#fff;text-decoration:none;transition:background .3s ease}
.more:hover{background:var(--sepia-1)}

.extras ul{margin:0;padding-left:20px}
.extras li{margin-bottom:6px}

.site-footer{text-align:center;padding:16px 0;color:var(--muted);font-size:0.9rem}

@media (max-width:860px){
  .map{grid-template-columns:1fr}
  .info-panel{border-left:none;border-top:2px dashed rgba(0,0,0,0.05)}
  .lang-switch{flex-wrap:wrap;gap:6px}
}

.svg-wrap {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.1);
}

.map-img {
  width: 100%;
  height: auto;
  display: block;
}


/*###########################*/
.town-map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* désactive les clics par défaut */
}

.map-point circle {
  pointer-events: all; /* réactive les clics uniquement sur les points */
}

.map-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 698; /* conserve le bon ratio */
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.1);
}

.map-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* garde les proportions */
}

.town-map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.map-point circle {
  fill: var(--sepia-1);
  stroke: #fff;
  stroke-width: 2;
  cursor: pointer;
  transition: transform .2s ease;
}

.map-point circle:hover {
  transform: scale(1.2);
}

/*.kamon image {
  cursor: pointer;
  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.4);
  transition: filter 0.2s ease;
}

.kamon:hover image {
  filter: brightness(0) saturate(100%) invert(15%) sepia(80%) saturate(5000%) hue-rotate(350deg) brightness(1) contrast(1);
}

.kamon.active image {
  filter: brightness(0) saturate(100%) invert(15%) sepia(80%) saturate(5000%) hue-rotate(350deg) brightness(1) contrast(1);
}*/

.kamon { cursor: pointer; }
.kamon image { 
  pointer-events: all; /* obligatoire pour que les images soient cliquables */
  cursor: pointer;
  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0.4);
  transition: filter 0.2s ease;
}
.kamon { pointer-events: all; }