/* Feuille de style du site henro (reprend la page de test henro-test, adaptée au téléphone) */
:root { --encre: #2b2118; --papier: #faf6ef; --rouge: #a3271f; --gris: #6d6259; --trait: #e4dccf; }
* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.6 Georgia, "Noto Serif JP", serif; color: var(--encre); background: var(--papier); }
a { color: var(--rouge); }
.jp { font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif; }

/* Bandeau et pied */
.bandeau { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: .6em 1.2em; background: var(--encre); font: 15px system-ui, sans-serif; }
.bandeau a { color: #fff; text-decoration: none; }
.bandeau .logo { font-weight: bold; font-size: 1.1em; }
.bandeau nav { display: flex; gap: 1em; }
.pied { border-top: 1px solid var(--trait); color: var(--gris); font: 13px system-ui, sans-serif; text-align: center; padding: 1em 1.2em 2em; }

.page { max-width: 1000px; margin: 0 auto; padding: 1em 1.2em 3em; }
h1 { line-height: 1.2; }
h2 { color: var(--rouge); border-bottom: 2px solid var(--trait); padding-bottom: .2em; margin-top: 2em; }
h2 small { display: block; color: var(--gris); font-size: .55em; font-weight: normal; }
.chapo { font-size: 1.15em; }
.bouton { display: inline-block; background: var(--rouge); color: #fff; padding: .6em 1.2em; border-radius: 4px; text-decoration: none; font: 16px system-ui, sans-serif; }

/* Liste des temples */
.liste-temples { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .4em; }
.liste-temples a { display: grid; grid-template-columns: 2.6em 1fr; grid-template-rows: auto auto; column-gap: .6em; padding: .5em .7em; background: #fff; border: 1px solid var(--trait); border-radius: 6px; text-decoration: none; color: var(--encre); }
.liste-temples a:hover { border-color: var(--rouge); }
.liste-temples .num { grid-row: 1 / 3; align-self: center; text-align: center; background: var(--rouge); color: #fff; border-radius: 4px; font: bold 15px system-ui, sans-serif; padding: .3em 0; }
.liste-temples .ville { font: 13px system-ui, sans-serif; color: var(--gris); }
.liste-temples .pastille { grid-column: 2; font: 12px system-ui, sans-serif; color: #1b7f3b; }

/* En-tête de la fiche temple */
.entete { position: relative; min-height: 260px; background: #333 center/cover; color: #fff; display: flex; align-items: flex-end; }
.entete::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(0,0,0,.75)); }
.entete-texte { position: relative; z-index: 1; padding: 1.2em; max-width: 1000px; margin: 0 auto; width: 100%; }
.entete .numero { display: inline-block; background: var(--rouge); padding: .1em .6em; border-radius: 3px; font: bold 15px system-ui, sans-serif; }
.entete h1 { margin: .2em 0 0; font-size: 2.2em; }
.entete h1 span { font-size: .8em; margin-left: .3em; }
.entete p { margin: .2em 0 0; opacity: .9; }
nav.voisins { display: flex; justify-content: space-between; gap: 1em; font: 15px system-ui, sans-serif; margin: .3em 0 1em; }
nav.voisins a { text-decoration: none; }
.fiche .large { grid-column: 1 / -1; }
.texte img { max-width: 100%; height: auto; }
.pastille-carte { border: 2px solid #a3271f; border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-weight: bold; }
.sous-carte { font: 14px system-ui, sans-serif; margin: .3em 0 0; }
.fiche { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .4em 2em; }
.fiche div { padding: .4em 0; border-bottom: 1px dotted var(--trait); }
.fiche b { display: block; font: 13px system-ui, sans-serif; color: var(--gris); text-transform: uppercase; letter-spacing: .04em; }
.jp { font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif; }
#carte { height: 460px; border-radius: 6px; border: 1px solid var(--trait); }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .6em; }
.galerie figure { margin: 0; cursor: zoom-in; }
.galerie img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; display: block; }
.galerie figcaption { font: 13px system-ui, sans-serif; color: var(--gris); text-transform: capitalize; }
#visionneuse { position: fixed; inset: 0; background: rgba(0,0,0,.9); display: none; align-items: center; justify-content: center; z-index: 2000; cursor: zoom-out; }
#visionneuse.ouvert { display: flex; }
#visionneuse img { max-width: 95vw; max-height: 92vh; }
.acces table { border-collapse: collapse; font: 14px system-ui, sans-serif; }
.acces td, .acces th { border: 1px solid var(--trait); padding: .2em .5em; }
details { background: #fff; border: 1px solid var(--trait); border-radius: 4px; padding: .5em 1em; margin: .5em 0; }
summary { cursor: pointer; color: var(--rouge); }
/* Fiches horaires (plan A) */
#h-barre { position: sticky; top: 0; z-index: 1000; background: var(--papier); border-bottom: 1px solid var(--trait); padding: .5em 0; font: 15px system-ui, sans-serif; display: flex; flex-wrap: wrap; gap: .5em 1.5em; align-items: center; }
#h-barre form { font-size: 13px; color: var(--gris); }
.h-fiche { background: #fff; border: 1px solid var(--trait); border-radius: 6px; padding: 1em; margin: 1em 0; font: 15px/1.5 system-ui, sans-serif; }
.h-titre { font-weight: bold; font-size: 1.05em; margin-bottom: .4em; }
.h-troncons { display: flex; flex-direction: column; gap: .2em; font-size: 14px; margin-bottom: .6em; }
.h-troncons i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: .4em; }
.h-jrpass { color: #1b7f3b; }
.h-prochain { background: #eef6ee; border-left: 4px solid #1b7f3b; padding: .6em .8em; border-radius: 4px; margin: .6em 0; }
.h-prochain.h-fini { background: #fbeeee; border-color: var(--rouge); }
.h-dans { font-weight: bold; font-size: 1.15em; margin-bottom: .2em; }
.h-arrivee, .h-reste { color: var(--gris); font-size: 14px; }
.h-conseil { margin-top: .3em; }
.h-alerte { color: var(--rouge); font-weight: bold; }
.h-attente { color: var(--gris); }
.h-onglets { display: flex; gap: .3em; margin: .6em 0 .3em; flex-wrap: wrap; }
.h-onglets button { border: 1px solid var(--trait); background: #f4efe6; border-radius: 4px; padding: .3em .7em; cursor: pointer; font: inherit; font-size: 14px; }
.h-onglets button.actif { background: var(--rouge); color: #fff; border-color: var(--rouge); }
.h-grille { border-collapse: collapse; width: 100%; }
.h-grille th { background: #b4c2dc; width: 2.5em; text-align: center; font-weight: normal; }
.h-grille th, .h-grille td { border: 1px dotted #ccc; padding: .25em .4em; }
.h-pastille { display: inline-block; padding: 2px 6px; margin: 2px 0; border-radius: 3px; font-size: 14px; white-space: nowrap; }
.h-pastille small { opacity: .8; }
.h-passe { opacity: .35; }
.h-suivant { outline: 3px solid #1b7f3b; outline-offset: 1px; font-weight: bold; }
.h-source { margin-top: .5em; font-size: 13px; color: var(--gris); }
.h-vieux { background: #fff3cd; color: #7a5a00; padding: 1px 6px; border-radius: 3px; margin-left: .4em; }

/* Téléphone */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .entete { min-height: 200px; }
  .entete h1 { font-size: 1.7em; }
  #carte { height: 340px; }
  .h-grille { font-size: 13px; }
  .h-pastille { white-space: normal; }
  #h-barre form input { max-width: 9em; }
  .acces { overflow-x: auto; }
}

/* Étapes à pied depuis le temple précédent et vers le suivant */
.etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .6em; margin-top: 1em; font: 15px/1.5 system-ui, sans-serif; }
.etape { background: #fff; border: 1px solid var(--trait); border-left: 5px solid; border-radius: 6px; padding: .6em .8em; }
.etape.arrivee { border-left-color: #1f6fb5; }
.etape.depart { border-left-color: #a3271f; }
.etape b { display: block; }
.source-etapes { font: 13px system-ui, sans-serif; color: var(--gris); margin: .3em 0 0; }

/* Onglets de la fiche temple (barre collante, défilement horizontal sur téléphone) */
.onglets { position: sticky; top: 0; z-index: 1100; display: flex; gap: .2em; overflow-x: auto; background: var(--papier); border-bottom: 2px solid var(--trait); padding: 0 .8em; font: 15px system-ui, sans-serif; scrollbar-width: none; }
.onglets a { flex: none; padding: .7em .9em; text-decoration: none; color: var(--gris); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.onglets a.actif { color: var(--rouge); border-bottom-color: var(--rouge); font-weight: bold; }
.panneau { padding-top: .5em; }
.liens { display: flex; flex-wrap: wrap; gap: .3em 1.2em; font: 14px system-ui, sans-serif; margin-top: .4em; }
#h-barre { top: 2.9em; }