/* ══════════════════════════════════════════════════════════════════════
   ToriTrip — carte interactive des 9 régions
   Aucun JavaScript. Le SVG est décoratif ; la liste porte la navigation.
   ══════════════════════════════════════════════════════════════════════ */

.tt-carte{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(1.25rem,3vw,2.5rem);align-items:start;}

.tt-carte-svg{width:100%;height:auto;max-height:min(70vh,560px);display:block;margin-inline:auto;}
.tt-carte-svg .tt-encart{fill:none;stroke:var(--tt-keisen-2);stroke-width:1;stroke-dasharray:3 3;}
.tt-carte-svg .tt-encart-lib{font-family:var(--tt-mono);font-size:9px;letter-spacing:.08em;
  fill:var(--tt-sumi-3);text-transform:uppercase;}

.tt-carte-svg .tt-zone{cursor:pointer;}
.tt-carte-svg .tt-zone path{
  fill:#C8D2D8;stroke:var(--tt-paper);stroke-width:1.1;
  transform-box:fill-box;transform-origin:center;      /* sinon la translation part du viewBox */
  transition:fill .18s ease,transform .18s ease;
}
.tt-carte-svg .tt-zone-lib{
  font-family:var(--tt-display);font-weight:600;font-size:13px;
  fill:var(--tt-sumi);text-anchor:middle;pointer-events:none;
  paint-order:stroke;stroke:var(--tt-paper);stroke-width:3px;
  transition:fill .18s ease;
}
.tt-carte-svg .tt-zone:hover path{fill:var(--tt-shu);transform:translateY(-2.5px);}
.tt-carte-svg .tt-zone:hover .tt-zone-lib{fill:var(--tt-shu);}

/* ── liste jumelée : la vraie navigation ── */
.tt-carte-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--tt-keisen);}
.tt-carte-liste li{margin:0;}
.tt-carte-liste a{
  display:grid;grid-template-columns:2.2em 1fr auto;gap:.9em;align-items:baseline;
  padding:.68rem .25rem;min-height:44px;                /* seuil tactile */
  border-bottom:1px solid var(--tt-keisen);color:var(--tt-sumi);text-decoration:none;
  transition:background .14s ease,padding-left .14s ease;
}
.tt-carte-liste a:hover{background:var(--tt-shu-soft);padding-left:.6rem;}
.tt-li-num{font-family:var(--tt-mono);font-size:.68rem;color:var(--tt-sumi-3);}
.tt-carte-liste a:hover .tt-li-num{color:var(--tt-shu);}
.tt-li-corps{display:flex;flex-direction:column;gap:1px;min-width:0;}
.tt-li-nom{font-family:var(--tt-display);font-weight:600;font-size:.98rem;
  display:flex;align-items:baseline;gap:.5em;}
.tt-li-nom i{font-style:normal;font-size:.76rem;color:var(--tt-sumi-3);letter-spacing:.06em;}
.tt-li-villes{font-size:.77rem;color:var(--tt-sumi-3);line-height:1.35;}
.tt-li-fleche{color:var(--tt-keisen-2);font-size:.9rem;
  transition:color .14s ease,transform .14s ease;}
.tt-carte-liste a:hover .tt-li-fleche{color:var(--tt-shu);transform:translateX(3px);}

/* ── survol croisé liste → carte, en CSS pur ──
   :has() est pris en charge par tous les navigateurs modernes.
   Là où il ne l'est pas, tout continue de fonctionner : seul le
   surlignage croisé est absent. */
.tt-carte:has(.tt-carte-liste a[data-region="hokkaido"]:hover) .tt-zone[data-region="hokkaido"] path,
.tt-carte:has(.tt-carte-liste a[data-region="tohoku"]:hover)   .tt-zone[data-region="tohoku"] path,
.tt-carte:has(.tt-carte-liste a[data-region="kanto"]:hover)    .tt-zone[data-region="kanto"] path,
.tt-carte:has(.tt-carte-liste a[data-region="chubu"]:hover)    .tt-zone[data-region="chubu"] path,
.tt-carte:has(.tt-carte-liste a[data-region="kansai"]:hover)   .tt-zone[data-region="kansai"] path,
.tt-carte:has(.tt-carte-liste a[data-region="chugoku"]:hover)  .tt-zone[data-region="chugoku"] path,
.tt-carte:has(.tt-carte-liste a[data-region="shikoku"]:hover)  .tt-zone[data-region="shikoku"] path,
.tt-carte:has(.tt-carte-liste a[data-region="kyushu"]:hover)   .tt-zone[data-region="kyushu"] path,
.tt-carte:has(.tt-carte-liste a[data-region="okinawa"]:hover)  .tt-zone[data-region="okinawa"] path{
  fill:var(--tt-shu);transform:translateY(-2.5px);
}
.tt-carte:has(.tt-carte-liste a[data-region="hokkaido"]:hover) .tt-zone[data-region="hokkaido"] .tt-zone-lib,
.tt-carte:has(.tt-carte-liste a[data-region="tohoku"]:hover)   .tt-zone[data-region="tohoku"] .tt-zone-lib,
.tt-carte:has(.tt-carte-liste a[data-region="kanto"]:hover)    .tt-zone[data-region="kanto"] .tt-zone-lib,
.tt-carte:has(.tt-carte-liste a[data-region="chubu"]:hover)    .tt-zone[data-region="chubu"] .tt-zone-lib,
.tt-carte:has(.tt-carte-liste a[data-region="kansai"]:hover)   .tt-zone[data-region="kansai"] .tt-zone-lib,
.tt-carte:has(.tt-carte-liste a[data-region="chugoku"]:hover)  .tt-zone[data-region="chugoku"] .tt-zone-lib,
.tt-carte:has(.tt-carte-liste a[data-region="shikoku"]:hover)  .tt-zone[data-region="shikoku"] .tt-zone-lib,
.tt-carte:has(.tt-carte-liste a[data-region="kyushu"]:hover)   .tt-zone[data-region="kyushu"] .tt-zone-lib,
.tt-carte:has(.tt-carte-liste a[data-region="okinawa"]:hover)  .tt-zone[data-region="okinawa"] .tt-zone-lib{
  fill:var(--tt-shu);
}

/* ── tablette : liste sur deux colonnes ── */
@media (max-width:1099px){
  .tt-carte-svg{max-width:min(420px,46vw);max-height:none;}
  .tt-carte-liste{display:grid;grid-template-columns:1fr 1fr;
    column-gap:1.5rem;border-top:none;}
  .tt-carte-liste li:nth-child(-n+2) a{border-top:1px solid var(--tt-keisen);}
}
/* ── mobile : carte en repère, liste pleine largeur ── */
@media (max-width:767px){
  .tt-carte-svg{max-width:300px;}
  .tt-carte-liste{grid-template-columns:1fr;border-top:1px solid var(--tt-keisen);}
  .tt-carte-liste li:nth-child(-n+2) a{border-top:none;}
  .tt-carte-liste a{padding-block:.85rem;min-height:56px;}
}