/* Polices hébergées sur le site (pas de Google Fonts : aucune donnée des visiteurs envoyée à un tiers).
   Fraunces (titres, 600-700, axe opsz) et Work Sans (texte, 400-700), polices variables, licence SIL OFL,
   fichiers woff2 latin + latin étendu récupérés sur Google Fonts le 8 oct. 2026 dans src/assets/fonts/. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("/assets/fonts/fraunces-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("/assets/fonts/fraunces-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/work-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/work-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Rue Sainte-Catherine — pierre de Bordeaux & lie-de-vin */
:root {
  --bordeaux: #6B1E2E;
  --bordeaux-soft: #8E3A49;
  --pierre: #EFE6D6;
  --pierre-dark: #DCCFB8;
  --fond: #FAF6EF;
  --encre: #1E1A17;
  --gris: #5F5850;
  --ligne: #E3D9C8;
  --soleil: #C08A3E;
  --vert: #4F7A5A;
  --radius: 12px;
  --titre: "Fraunces", Georgia, serif;
  --texte: "Work Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 400 17px/1.6 var(--texte);
}
h1, h2, h3 { font-family: var(--titre); line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: 1.15rem; }
a { color: var(--bordeaux); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
/* `.narrow` (pages de texte) : même largeur que les autres pages, décidé le 8 oct. 2026 (classe gardée sans effet). */
.muted { color: var(--gris); font-size: .9em; }

/* Nav : en-tête collé en haut */
.entete {
  position: sticky; top: 0; z-index: 100;
  background: var(--fond); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.entete.defile { border-bottom-color: var(--ligne); box-shadow: 0 4px 16px rgba(30, 26, 23, .06); }
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 14px 16px; max-width: 1120px; margin: 0 auto;
}
.nav-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--bordeaux); }
.nav-logo-sac { flex: none; width: 38px; height: auto; }
.nav-logo-texte { display: flex; flex-direction: column; line-height: 1.05; }
.nav-logo-nom { font: 700 1.2rem var(--texte); letter-spacing: -.01em; color: var(--bordeaux); }
.nav-logo-ville { margin-top: 3px; font: 600 .62rem var(--texte); letter-spacing: .28em; text-transform: uppercase; color: var(--gris); }
.nav { position: relative; flex-wrap: nowrap; }
.entete.defile .nav { padding-top: 10px; padding-bottom: 10px; }
.nav-burger {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  background: none; border: 1px solid var(--ligne); border-radius: 10px; cursor: pointer; color: var(--encre);
}
.nav-burger:hover { border-color: var(--bordeaux); color: var(--bordeaux); }
.nav-burger-barres, .nav-burger-barres::before, .nav-burger-barres::after {
  display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s;
}
.nav-burger-barres { position: relative; }
.nav-burger-barres::before, .nav-burger-barres::after { content: ""; position: absolute; left: 0; }
.nav-burger-barres::before { top: -6px; }
.nav-burger-barres::after { top: 6px; }
.nav-burger[aria-expanded="true"] .nav-burger-barres { background: transparent; }
.nav-burger[aria-expanded="true"] .nav-burger-barres::before { transform: translateY(6px) rotate(45deg); background: currentColor; }
.nav-burger[aria-expanded="true"] .nav-burger-barres::after { transform: translateY(-6px) rotate(-45deg); background: currentColor; }
.nav-links {
  position: absolute; top: calc(100% - 6px); right: 16px; z-index: 50;
  display: flex; flex-direction: column; min-width: 240px; padding: 8px;
  background: var(--fond); border: 1px solid var(--ligne); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(30, 26, 23, .12);
}
.nav-links[hidden] { display: none; }
.nav-links a { padding: 10px 12px; border-radius: 8px; color: var(--encre); text-decoration: none; }
.nav-links a:hover { background: var(--pierre); color: var(--bordeaux); }
.nav-links a[aria-current="page"] { color: var(--bordeaux); font-weight: 600; }
@media (max-width: 760px) { .nav-links { left: 16px; right: 16px; } }

/* Hero */
.hero { padding: 48px 0 24px; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 600; color: var(--bordeaux); margin: 0 0 12px; }
.lead { font-size: 1.15rem; color: var(--gris); margin: 0; }
.lead-sm { color: var(--gris); }

.section { padding: 40px 0; }
.section.alt { background: var(--pierre); }

/* Toolbar */
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 28px; }
.search { flex: 1 1 260px; }
.search input {
  width: 100%; padding: 11px 14px; border: 1px solid var(--ligne); border-radius: 999px;
  font: inherit; background: #fff; color: var(--encre);
}
.search input:focus { outline: 2px solid var(--bordeaux); outline-offset: 1px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  --c: var(--encre);
  border: 1px solid var(--ligne); background: #fff; border-radius: 999px; padding: 6px 12px;
  font: 500 .85rem var(--texte); color: var(--encre); cursor: pointer;
}
.chip::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 6px; vertical-align: 1px; }
.chip[data-cat=""]::before, .chip[data-type]::before { display: none; }
.chip.is-on { background: var(--encre); color: #fff; border-color: var(--encre); }
.toggle { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; cursor: pointer; }
.toggle input { accent-color: var(--soleil); width: 18px; height: 18px; }

/* Listing */
.shops { list-style: none; margin: 0; padding: 0; display: grid; align-items: start; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.shop { --c: var(--bordeaux); background: #fff; border: 1px solid var(--ligne); border-left: 4px solid var(--c); border-radius: var(--radius); }
.shop.is-hidden { display: none; }
.shop.is-selected { border-color: var(--c); box-shadow: 0 4px 16px rgba(107, 30, 46, .12); }
.shop.is-closed .shop-name { text-decoration: line-through; color: var(--gris); }
.shop-btn { all: unset; box-sizing: border-box; width: 100%; display: flex; gap: 12px; align-items: center; padding: 12px 14px; cursor: pointer; }
.shop-btn:focus-visible { outline: 2px solid var(--bordeaux); border-radius: var(--radius); }
.shop-num { font: 700 .95rem var(--titre); color: var(--c); min-width: 52px; }
.shop-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.shop-name { font-weight: 600; }
.shop-cat { font-size: .8rem; color: var(--gris); }
.shop-tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.shop .tag { white-space: normal; text-align: center; } /* horaires du dimanche longs : à la ligne */
.shop-detail { padding: 0 14px 12px 78px; font-size: .9rem; }
.shop-detail p { margin: 0 0 4px; }
.empty { color: var(--gris); }

.tag { font-size: .7rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.tag-sun { background: #F6E7CC; color: #7A5418; }
.tag-new { background: #DDEBDF; color: #2F5A3A; }
.tag-closed { background: #F2DADD; color: var(--bordeaux); }

/* Sections */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.card { background: #fff; border-radius: var(--radius); padding: 16px 18px; border: 1px solid var(--ligne); display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.card ul { margin: 0; padding-left: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.timeline li { background: #fff; border-radius: var(--radius); padding: 16px 18px; border: 1px solid var(--ligne); }
.timeline strong { display: block; font-family: var(--titre); font-size: 1.15rem; margin: 8px 0 4px; }
.timeline p { margin: 0; color: var(--gris); font-size: .92rem; }

footer { background: var(--encre); color: #D8D0C4; padding: 28px 0; font-size: .9rem; }
.footer-row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-note { color: var(--soleil); }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .hero { padding-top: 24px; }
  .two-col, .grid3 { grid-template-columns: minmax(0, 1fr); }
  .shops { grid-template-columns: minmax(0, 1fr); }
  .shop-detail { padding-left: 14px; }
}

/* Fiches commerces */
.crumbs { font-size: .85rem; color: var(--gris); margin-bottom: 18px; }
.crumbs a { color: var(--gris); }
.hero-fiche { --c: var(--bordeaux); border-bottom: 1px solid var(--ligne); }
.eyebrow-cat { color: var(--c); }
.h1-sub { display: block; font-size: .45em; color: var(--gris); font-weight: 600; margin-top: 6px; }
.fiche-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.fiche-tags .tag { font-size: .8rem; padding: 4px 10px; }
.section-tight { padding-top: 28px; }
.fiche-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.fiche-main h2 { font-size: 1.4rem; margin-top: 28px; }
.fiche-note { font-size: 1.1rem; border-left: 3px solid var(--soleil); padding-left: 14px; }
.fiche-side { display: grid; gap: 14px; }
.fiche-side h3 { margin-bottom: 8px; }
.facts { margin: 0; display: grid; gap: 1px; background: var(--ligne); border: 1px solid var(--ligne); border-radius: var(--radius); overflow: hidden; }
.facts div { background: #fff; display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 12px 16px; }
.facts dt { font-weight: 600; color: var(--gris); font-size: .9rem; }
.facts dd { margin: 0; }
.plain { list-style: none; padding: 0 !important; }
.plain li { padding: 3px 0; }
.more { font-size: .9rem; font-weight: 600; text-decoration: none; margin-top: 8px; display: inline-block; }
.more:hover { text-decoration: underline; }
.pager { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 40px; }
.pager a { display: flex; flex-direction: column; text-decoration: none; font-family: var(--titre); font-weight: 700; font-size: 1.1rem; }
.pager a span { font: 500 .8rem var(--texte); color: var(--gris); }
.pager-next { text-align: right; }
.cat-title { --c: var(--bordeaux); font-size: 1.3rem; margin: 28px 0 12px; }
.cat-title::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--c); margin-right: 10px; vertical-align: 2px; }
a.shop-btn { color: inherit; }

@media (max-width: 760px) {
  .fiche-grid { grid-template-columns: 1fr; }
  .facts div { grid-template-columns: 1fr; gap: 2px; }
}

/* Pages dimanche et parking */
.answer { margin: 18px 0 0; padding: 14px 18px; background: #fff; border: 1px solid var(--ligne); border-left: 4px solid var(--soleil); border-radius: var(--radius); max-width: 680px; }
.calendar { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.calendar li { background: #fff; border: 1px solid var(--ligne); border-radius: var(--radius); padding: 12px 16px; display: flex; flex-direction: column; }
.cal-date { font-family: var(--titre); font-weight: 700; font-size: 1.1rem; }
.cal-date::first-letter { text-transform: uppercase; }
.cal-motif { font-size: .85rem; color: var(--gris); }
.calendar .is-past { opacity: .5; }
.calendar .is-past .cal-date { text-decoration: line-through; }
.calendar .is-next { border-color: var(--soleil); box-shadow: inset 4px 0 0 var(--soleil); }
.calendar .is-unknown { border-style: dashed; background: transparent; }
.parkings { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; align-items: start; }
.parking p { margin: 0; }
.parking-tram { background: var(--fond); }
.tarifs { border-collapse: collapse; width: 100%; margin-top: 10px; font-size: .92rem; }
.tarifs caption { text-align: left; font-size: .78rem; color: var(--gris); padding-bottom: 4px; }
.tarifs th, .tarifs td { padding: 5px 0; border-top: 1px solid var(--ligne); text-align: left; font-weight: 500; }
.tarifs td { text-align: right; font-weight: 600; }
.near { font-size: .92rem; color: var(--gris); margin-top: 16px; }

/* Nouveautés */
.news-list { list-style: none; margin: 18px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.news-list-compact { grid-template-columns: 1fr; }
.news { background: #fff; border: 1px solid var(--ligne); border-radius: var(--radius); padding: 16px 18px; }
.news[hidden] { display: none; }
.news-meta { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--gris); }
.news h3 { margin: 10px 0 6px; font-size: 1.15rem; }
.news p { margin: 0; color: var(--gris); font-size: .93rem; }
.news .news-links { margin-top: 10px; display: flex; gap: 14px; font-size: .88rem; font-weight: 600; }
.tag-ouverture { background: #DDEBDF; color: #2F5A3A; }
.tag-fermeture { background: #F2DADD; color: var(--bordeaux); }
.tag-changement { background: #E2E8F0; color: #3E5C7A; }
.tag-annonce { background: #F6E7CC; color: #7A5418; }
.chip .muted { font-size: .8em; margin-left: 2px; }
.chip.is-on .muted { color: #D8D0C4; }
footer a { color: inherit; }
.horaires li { padding: 0; }

/* Boutons de commande (balade) */
.ctrl {
  min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--ligne); background: #fff; border-radius: 10px;
  font: 600 1rem var(--texte); color: var(--encre); cursor: pointer;
}
.ctrl:hover { border-color: var(--bordeaux); color: var(--bordeaux); }
.ctrl-text { font-size: .85rem; }
.ctrl-geo { display: inline-flex; align-items: center; gap: 6px; background: var(--encre); color: #fff; border-color: var(--encre); }
.ctrl-geo:hover { background: var(--bordeaux); border-color: var(--bordeaux); color: #fff; }
.ico-geo { flex: none; }
@keyframes pulse { 50% { box-shadow: 0 0 0 12px rgba(42, 111, 219, 0); } }

/* Balade verticale (accueil) : la rue se déroule de haut en bas, côtés à gauche et à droite */
.balade-choix { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.sens { display: inline-flex; border: 1px solid var(--ligne); border-radius: 999px; background: #fff; padding: 3px; }
.sens-btn { border: 0; background: none; padding: 8px 14px; border-radius: 999px; font: 600 .85rem var(--texte); color: var(--gris); cursor: pointer; }
.sens-btn[aria-pressed="true"] { background: var(--bordeaux); color: #fff; }
.balade-guide { height: 40px; display: inline-flex; align-items: center; gap: 6px; }
.balade-guide[aria-pressed="true"] { background: var(--bordeaux); border-color: var(--bordeaux); }
.balade-cherche { flex: 1 1 220px; }

.balade-suivi { position: sticky; top: 64px; z-index: 80; background: rgba(250, 246, 239, .96); backdrop-filter: blur(4px); border-bottom: 1px solid var(--ligne); }
.suivi-wrap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px; padding-top: 8px; padding-bottom: 8px; }
.suivi-bout { font: 600 .72rem var(--texte); color: var(--gris); text-transform: uppercase; letter-spacing: .06em; }
.suivi-rail { position: relative; height: 6px; border-radius: 3px; background: var(--pierre-dark); }
.suivi-fait { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px; background: var(--bordeaux); transition: width .2s; }
.suivi-vous { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--bordeaux); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: left .2s; }
.suivi-ou { grid-column: 1 / -1; font-size: .85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.balade { padding: 10px 0 40px; }
.balade-wrap { position: relative; display: flex; flex-direction: column; }
/* Destination en haut, départ en bas (comme un GPS) : vers la Victoire, la rue se lit à l'envers */
.balade[data-sens="victoire"] .balade-wrap { flex-direction: column-reverse; }
.balade-bout { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 22px; margin: 6px 0; background: var(--pierre); border-radius: var(--radius); text-align: center; }
.balade-bout strong { font: 700 1.15rem var(--titre); color: var(--bordeaux); }
.balade-bout span { font-size: .8rem; color: var(--gris); }

.troncon { display: grid; grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr); }
.chaussee { grid-column: 2; grid-row: 1; background: repeating-linear-gradient(0deg, transparent 0 23px, #EEE4D2 23px 24px), #F7F1E6; box-shadow: inset 6px 0 6px -6px rgba(90, 70, 48, .25), inset -6px 0 6px -6px rgba(90, 70, 48, .25); }
.cote { list-style: none; margin: 0; padding: 10px 0; display: flex; flex-direction: column; gap: 8px; grid-row: 1; }
.balade[data-sens="victoire"] .cote { flex-direction: column-reverse; }
.cote.gauche { grid-column: 1; padding-right: 8px; }
.cote.droite { grid-column: 3; padding-left: 8px; }

.vitrine { background: #fff; border: 1px solid var(--ligne); border-radius: 10px; transition: box-shadow .2s, transform .2s; }
.gauche > .vitrine { border-right: 4px solid var(--c, var(--bordeaux)); text-align: right; }
.droite > .vitrine { border-left: 4px solid var(--c, var(--bordeaux)); }
.vitrine-btn { all: unset; box-sizing: border-box; width: 100%; display: flex; flex-direction: column; gap: 1px; padding: 9px 11px; cursor: pointer; }
.gauche .vitrine-btn { align-items: flex-end; }
.vitrine-btn:focus-visible { outline: 2px solid var(--bordeaux); border-radius: 8px; }
.vitrine-num { font: 700 .75rem var(--titre); color: var(--c, var(--bordeaux)); }
.vitrine-nom { font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.vitrine-cat { font-size: .74rem; color: var(--gris); }
.vitrine-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.gauche .vitrine-tags { justify-content: flex-end; }
.vitrine-tags:empty { display: none; }
.vitrine.is-closed .vitrine-nom { text-decoration: line-through; color: var(--gris); }
.vitrine.is-closed { background: #FBF8F2; }
.vitrine.flash, .rue-voisine.flash { animation: flash 1.6s; }
@keyframes flash { 0%, 40% { box-shadow: 0 0 0 3px var(--soleil); } 100% { box-shadow: 0 0 0 0 transparent; } }
.vitrine.is-devant { box-shadow: 0 0 0 3px #2A6FDB, 0 6px 18px rgba(42, 111, 219, .25); }
.vitrine.a-bonplan { border-color: var(--soleil); }
.tag-bonplan { background: var(--soleil); color: #fff; }
.bonplan { margin: 6px 0; padding: 8px 10px; background: #FBF1DF; border-radius: 8px; font-size: .85rem; text-align: left; }
.bonplan strong, .bonplan b { color: #7A5418; }

.vitrine-galerie { border-style: dashed; }
.vitrine.is-selected { box-shadow: 0 0 0 2px var(--c, var(--bordeaux)), 0 6px 16px rgba(30, 26, 23, .15); }

/* Popup (fiche d'un commerce) : panneau du bas sur mobile, carte flottante sur ordinateur, non modale */
.popup {
  position: fixed; inset: auto 16px 16px auto; z-index: 96;
  width: min(420px, calc(100vw - 32px)); max-height: min(70vh, 620px); overflow-y: auto; margin: 0;
  padding: 18px 18px 14px; border: 0; border-radius: 16px; background: #fff; color: var(--encre);
  box-shadow: 0 14px 40px rgba(30, 26, 23, .28);
}
.guidage .popup { bottom: calc(28px + var(--devant-h, 0px)); }
.popup[open] { animation: monte .22s ease-out; }
@keyframes monte { from { transform: translateY(16px); opacity: 0; } }
/* Alerte « bon plan à proximité » réduite : nom et titre du bon plan, le reste au toucher */
.popup-agrandir { display: none; }
.popup.is-reduite { cursor: pointer; padding-bottom: 12px; }
.popup.is-reduite .popup-cat, .popup.is-reduite .popup-adresse, .popup.is-reduite .popup-tags,
.popup.is-reduite .popup-note, .popup.is-reduite .popup-infos, .popup.is-reduite .popup-liens,
.popup.is-reduite .popup-verif, .popup.is-reduite .popup-bonplan > :not(strong) { display: none; }
.popup.is-reduite .popup-nom { font-size: 1.15rem; }
.popup.is-reduite .popup-bonplan { margin: 6px 0 0; padding: 8px 12px; }
.popup.is-reduite .popup-bonplan strong { margin-top: 0; font-size: .98rem; }
.popup.is-reduite .popup-agrandir {
  display: block; margin: 8px 0 0; padding: 0; border: 0; background: none;
  font: 600 .85rem var(--texte); color: var(--bordeaux); cursor: pointer;
}
.popup-fermer { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 1.7rem; line-height: 1; color: var(--gris); cursor: pointer; padding: 2px 6px; }
.popup-alerte { margin: -4px 0 10px; font: 700 .72rem var(--texte); text-transform: uppercase; letter-spacing: .1em; color: #7A5418; }
.popup.is-alerte { box-shadow: 0 0 0 3px var(--soleil), 0 14px 40px rgba(30, 26, 23, .28); }
.popup-cat { margin: 0 30px 2px 0; font: 600 .75rem var(--texte); text-transform: uppercase; letter-spacing: .08em; color: var(--c); }
.popup-nom { margin: 0 30px 2px 0; font-size: 1.4rem; }
.popup-adresse { margin: 0 0 8px; color: var(--gris); font-size: .9rem; }
.popup-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.popup-tags:empty { display: none; }
.popup-bonplan { margin: 0 0 12px; padding: 12px 14px; background: #FBF1DF; border-radius: 12px; }
.popup-bonplan strong { display: block; margin-top: 6px; color: #7A5418; font-size: 1.05rem; }
.popup-bonplan p { margin: 4px 0 0; font-size: .9rem; }
.popup-note { font-size: .92rem; }
.popup-infos { margin: 0 0 10px; display: grid; gap: 6px; font-size: .9rem; }
.popup-infos div { display: grid; grid-template-columns: 90px 1fr; gap: 8px; }
.popup-infos dt { font-weight: 600; color: var(--gris); }
.popup-infos dd { margin: 0; }
.popup-infos ul { margin: 0; }
.popup-liens { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; }
.popup-verif { margin: 8px 0 0; font-size: .8rem; }
.popup-groupe { margin: 12px 0 6px; font: 600 .75rem var(--texte); text-transform: uppercase; letter-spacing: .1em; color: var(--gris); }
.promenade-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .9rem; }
.promenade-mini li { border-left: 3px solid var(--c); padding-left: 8px; }
.promenade-mini button { border: 0; background: none; padding: 2px 0; font: 500 .92rem var(--texte); color: var(--encre); cursor: pointer; text-align: left; }
.promenade-mini button:hover { color: var(--bordeaux); text-decoration: underline; }
.rue-mini-info { color: var(--gris); font-size: .8rem; }
.rue-mini-bonplan { display: block; margin-top: 2px; color: #7A5418; font-weight: 600; font-size: .85rem; }
/* Rue voisine : retour à sa liste, et à la rue Sainte-Catherine (collé en bas de la popup qui défile) */
.popup-retour-liste { display: block; margin-top: 10px; padding: 4px 0; border: 0; background: none; font: 500 .92rem var(--texte); color: var(--bordeaux); text-align: left; cursor: pointer; }
.popup-retour-rue { position: sticky; bottom: -14px; display: block; width: calc(100% + 36px); margin: 12px -18px -14px; padding: 13px 18px; border: 0; border-top: 1px solid var(--ligne); background: #fff; font: 600 .95rem var(--texte); color: var(--bordeaux); text-align: left; cursor: pointer; }
.popup-retour-rue:hover, .popup-retour-liste:hover { text-decoration: underline; }
.popup.is-reduite .popup-retour-rue, .popup.is-reduite .popup-retour-liste { display: none; }
@media (max-width: 760px) {
  .popup { left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 72vh; border-radius: 18px 18px 14px 14px; }
  .guidage .popup { bottom: calc(18px + var(--devant-h, 0px)); }
}
.devant-alertes { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .85rem; font-weight: 600; cursor: pointer; }
.devant-alertes input { accent-color: var(--soleil); width: 18px; height: 18px; }

.balade-filtres { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 14px 0 6px; }
.balade-compte { flex-basis: 100%; margin: 0; font-size: .85rem; color: var(--gris); }
.vitrine.is-dim { opacity: .32; }
.vitrine.is-dim:hover, .vitrine.is-dim:focus-within { opacity: 1; }

/* Rue qui débouche d'un seul côté : petite chaussée qui part vers l'extérieur */
.ruelle { display: flex; align-items: center; gap: 8px; font-size: .75rem; font-weight: 600; color: #8C7F6E; }
.ruelle::before { content: ""; flex: 1; height: 14px; background: #F2EADB; border-radius: 3px; }
.gauche > .ruelle { flex-direction: row; }
.gauche > .ruelle::before { order: 0; }
.droite > .ruelle { flex-direction: row-reverse; }
.ruelle span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
/* Rue voisine avec des boutiques : étiquette « Rue X · N » qui ouvre leur liste */
.rue-voisine { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 4px 5px 4px 10px; border: 1px solid var(--pierre-dark); border-radius: 14px; text-align: left; line-height: 1.2; background: #fff; font: inherit; color: var(--bordeaux); cursor: pointer; vertical-align: middle; }
.rue-voisine:hover { border-color: var(--bordeaux); }
.rue-voisine.is-selected { box-shadow: 0 0 0 2px var(--bordeaux); }
.rue-voisine-nom { min-width: 0; }
.rue-voisine-nb { flex: none; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--bordeaux); color: #fff; font-size: .72rem; line-height: 1.5; text-align: center; }
.rue-voisine.a-bonplan .rue-voisine-nb { background: var(--soleil); color: var(--encre); }
.ruelle .rue-voisine { flex: none; max-width: 85%; }
.carrefour-nom:has(.rue-voisine) { display: flex; align-items: center; gap: 4px; min-width: 0; }
.carrefour-nom.droite:has(.rue-voisine) { justify-content: flex-end; }
.carrefour-nom:has(.rue-voisine)::before, .carrefour-nom:has(.rue-voisine)::after { flex: none; }
.ruelle .rue-voisine span { max-width: none; white-space: normal; overflow: visible; }

/* Carrefour : la rue transversale coupe toute la largeur */
.carrefour { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; margin: 4px 0; background: repeating-linear-gradient(90deg, transparent 0 23px, #EEE4D2 23px 24px), #F2EADB; border-radius: 4px; }
.carrefour.is-grand { min-height: 58px; background-color: #E9DFCB; }
.carrefour-nom { font: 600 .8rem var(--texte); color: #6E6355; }
.carrefour-nom.gauche { order: 0; }
.carrefour-nom.droite { order: 1; text-align: right; }
.carrefour-nom.gauche::before { content: "← "; }
.carrefour-nom.droite::after { content: " →"; }
.carrefour.is-grand .carrefour-nom { font: 700 .95rem var(--titre); color: var(--bordeaux); }

/* Guidage : marqueur sur la chaussée et panneau « Devant vous » */
.balade-vous { position: absolute; left: 50%; z-index: 4; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%; background: #2A6FDB; border: 3px solid #fff; box-shadow: 0 0 0 7px rgba(42, 111, 219, .25); transition: top .8s ease; animation: pulse 2s infinite; }
.balade-vous[hidden] { display: none; }
.balade-vous span { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); font: 600 .7rem var(--texte); background: #2A6FDB; color: #fff; padding: 1px 6px; border-radius: 5px; }
.devant {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 95; max-width: 560px; margin: 0 auto;
  background: #fff; border-radius: 16px; box-shadow: 0 10px 34px rgba(30, 26, 23, .25); padding: 12px 14px 10px;
}
.devant[hidden] { display: none; }
.devant-tete { display: flex; align-items: center; gap: 8px; }
.devant-tete strong { font: 700 1rem var(--titre); }
.devant-etat { flex: 1; font-size: .78rem; color: var(--gris); }
.devant-reprendre { border: 0; background: var(--pierre); border-radius: 999px; padding: 4px 10px; font: 600 .75rem var(--texte); cursor: pointer; }
.devant-stop { border: 0; background: none; font-size: 1.5rem; line-height: 1; color: var(--gris); cursor: pointer; padding: 0 4px; }
.devant-cotes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.devant-cote { border-left: 4px solid var(--c, var(--bordeaux)); background: var(--fond); border-radius: 8px; padding: 6px 9px; cursor: pointer; }
.devant-cote:nth-child(1) { border-left: 0; border-right: 4px solid var(--c, var(--bordeaux)); text-align: right; }
.devant-sens { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); }
.devant-cote strong { display: block; font-size: .92rem; line-height: 1.2; }
.devant-cote.a-bonplan { background: #FBF1DF; }
.devant-cote .bonplan { margin: 4px 0 0; padding: 0; background: none; font-size: .78rem; }
.devant-note { margin: 8px 0 0; font-size: .7rem; color: var(--gris); }
.guidage .haut { display: none !important; }
.guidage .balade { padding-bottom: 220px; }

@media (max-width: 760px) {
  .troncon { grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); }
  .vitrine-btn { padding: 8px 9px; }
  .vitrine-nom { font-size: .9rem; }
  .vitrine-cat { display: none; }
  .carrefour-nom { font-size: .72rem; }
}

/* Plan d'une fiche commerce (SVG d'après OSM, unités en mètres) */
.carte-fiche { margin: 0 0 18px; }
.carte-svg { display: block; width: 100%; max-width: 640px; height: auto; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--ligne); background: #EFE6D5; }
.carte-fiche figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: 8px; font-size: .85rem; }
.carte-fiche figcaption .more { margin-top: 0; }
.c-fond { fill: #EBE2D0; }
.c-place { fill: #F8F3EA; }
.c-rue { fill: none; stroke: #F8F3EA; stroke-linecap: round; stroke-linejoin: round; }
.c-sc { stroke: #F6E6CB; }
.c-bat { fill: #D9CAAE; stroke: #CBBA9A; stroke-width: .35; }
.c-tram { fill: none; stroke: #8E9BA4; stroke-width: .8; stroke-dasharray: 3 2; }
.c-nomrue { font: 600 3.6px var(--texte); fill: #8C7F6E; letter-spacing: .15px; paint-order: stroke; stroke: #F8F3EA; stroke-width: .9px; }
.c-nomrue-sc { font: 700 4.4px var(--titre); fill: var(--bordeaux); letter-spacing: .2px; stroke: #F6E6CB; }
.c-lieu { font: italic 600 3.8px var(--titre); fill: #6E6152; paint-order: stroke; stroke: #D9CAAE; stroke-width: .8px; }
.c-arret circle { fill: #4E6C7E; stroke: #fff; stroke-width: .7; }
.c-arret text { font: 700 3.6px var(--texte); fill: #fff; }
.c-arret .c-arret-nom { font: 600 3.4px var(--texte); fill: #4E6C7E; text-anchor: start; paint-order: stroke; stroke: #F8F3EA; stroke-width: .8px; }
.c-parking rect { fill: #3E5C7A; stroke: #fff; stroke-width: .6; }
.c-parking text { font: 700 4.6px var(--texte); fill: #fff; }
.c-voisin circle { stroke: #fff; stroke-width: .6; }
.c-voisin:hover circle { r: 3; }
.c-halo { fill: var(--bordeaux); opacity: .14; }
.c-ici { fill: var(--bordeaux); stroke: #fff; stroke-width: 1.3; }
.c-ici-nom { font: 700 5px var(--titre); fill: var(--encre); paint-order: stroke; stroke: #fff; stroke-width: 1.6px; stroke-linejoin: round; }
.c-echelle path { fill: none; stroke: var(--encre); stroke-width: .6; }
.c-echelle text, .c-nord text { font: 600 3.2px var(--texte); fill: var(--encre); }
.c-nord path { fill: var(--encre); }
.c-osm { font: 500 2.8px var(--texte); fill: #8C7F6E; }

/* Page histoire : frise chronologique verticale */
.frise { list-style: none; margin: 0; padding: 0 0 0 26px; border-left: 3px solid var(--pierre-dark); }
.frise li { position: relative; padding: 0 0 28px; }
.frise li::before { content: ""; position: absolute; left: -35px; top: 4px; width: 15px; height: 15px; border-radius: 50%; background: var(--fond); border: 3px solid var(--bordeaux); }
.frise-date { margin: 0 0 2px; font: 700 .8rem var(--texte); text-transform: uppercase; letter-spacing: .1em; color: var(--soleil); }
.frise h2 { font-size: 1.4rem; margin: 0 0 8px; }
.frise p { margin: 0 0 8px; }
.frise-aujourdhui { padding: 8px 12px; background: var(--pierre); border-radius: 8px; font-size: .92rem; }
.sources-titre { font-size: 1.1rem; margin-top: 16px; }
.sources { font-size: .85rem; color: var(--gris); padding-left: 18px; }
.sources li { margin-bottom: 4px; }

/* Filtre par catégorie des pages de listes (filtre-categories.njk) */
.filtre-categories { margin: 4px 0 16px; }
[data-groupe][hidden], [data-cat][hidden] { display: none !important; }

/* Accueil en mode annuaire */
.hero-annuaire { padding-bottom: 12px; }
.annuaire-cherche { display: block; max-width: 640px; margin-top: 18px; }
.annuaire-cherche input { font-size: 1.05rem; padding: 14px 18px; }
.entrer-balade {
  display: flex; align-items: center; gap: 12px; width: 100%; max-width: 640px; margin-top: 12px; padding: 12px 16px;
  background: var(--encre); color: #fff; border: 0; border-radius: var(--radius); text-align: left; cursor: pointer; font: inherit;
}
.entrer-balade[hidden] { display: none; }
.entrer-balade span { display: flex; flex-direction: column; }
.entrer-balade small { font-size: .82rem; color: #D8D0C4; }
.annuaire-filtres { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.annuaire-options { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.annuaire-options label[hidden] { display: none; }
.annuaire-tri { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--gris); margin-left: auto; }
.annuaire-tri select { font: inherit; color: var(--encre); padding: 6px 8px; border: 1px solid var(--ligne); border-radius: 8px; background: #fff; }
.annuaire-compte { margin: 0; font-size: .85rem; color: var(--gris); }
.annuaire-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 10px; }
.boutique[hidden] { display: none; }
.annuaire-voisines-titre { margin-top: 2.5rem; }
/* Fondu des éléments affichés par un filtre (window.rscApparition, menu.js) */
@keyframes apparait { from { opacity: 0; transform: translateY(6px); } }
.apparait { animation: apparait .28s ease-out both; animation-delay: calc(var(--i, 0) * 20ms); }
.boutique a {
  display: flex; flex-direction: column; gap: 2px; height: 100%; box-sizing: border-box; padding: 12px 14px;
  background: #fff; border: 1px solid var(--ligne); border-top: 4px solid var(--c); border-radius: var(--radius);
  color: var(--encre); text-decoration: none; transition: box-shadow .15s, transform .15s;
}
.boutique a:hover, .boutique a:focus-visible { box-shadow: 0 6px 18px rgba(30, 26, 23, .1); transform: translateY(-1px); }
.boutique-cat { font: 600 .7rem var(--texte); text-transform: uppercase; letter-spacing: .08em; color: var(--c); }
.boutique-nom { font: 700 1.08rem var(--titre); }
.boutique-adresse { font-size: .85rem; color: var(--gris); }
.boutique-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.boutique-tags:empty { display: none; }
.boutique-tags .tag { white-space: normal; } /* horaires du dimanche longs : à la ligne plutôt que hors de la carte */
.dimanche-resume { align-items: flex-start; }
.dimanche-nb { font: 700 2.4rem/1 var(--titre); color: var(--bordeaux); }
@media (max-width: 760px) {
  .annuaire-liste { grid-template-columns: minmax(0, 1fr); }
  .annuaire-tri { margin-left: 0; }
}

/* Mode balade (mobile) : la balade seule, le reste de l'accueil masqué */
.balade-sortie { padding-top: 12px; }
body.mode-balade main > section:not(#balade-mode), body.mode-balade footer { display: none; }
body.mode-balade .fab-rue { display: none; }

/* Journal : fil, cartes, articles, photos */
.journal-fil { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.carte-journal[hidden] { display: none; }
.carte-journal a {
  display: flex; flex-direction: column; height: 100%; box-sizing: border-box; overflow: hidden;
  background: #fff; border: 1px solid var(--ligne); border-radius: var(--radius); color: var(--encre); text-decoration: none;
  transition: box-shadow .15s, transform .15s;
}
.carte-journal a:hover, .carte-journal a:focus-visible { box-shadow: 0 8px 22px rgba(30, 26, 23, .12); transform: translateY(-2px); }
.carte-breve a { border-top: 4px solid var(--c); }
.carte-journal-corps { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.carte-journal-meta { font-size: .78rem; color: var(--gris); }
.carte-journal-rubrique { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c); }
.carte-journal-titre { font: 700 1.15rem/1.25 var(--titre); }
.carte-journal-texte { font-size: .9rem; color: var(--gris); }
.photo { margin: 0 0 18px; }
.photo img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.photo figcaption { margin-top: 6px; font-size: .82rem; color: var(--gris); }
.photo-credit { font-style: italic; }
.photo-a-venir {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 3 / 2; padding: 16px;
  background: repeating-linear-gradient(135deg, var(--pierre) 0 14px, #F4ECDD 14px 28px); border: 2px dashed var(--pierre-dark);
  border-radius: var(--radius); color: var(--gris); text-align: center;
}
.photo-a-venir span { font: 700 .95rem var(--titre); color: var(--bordeaux); }
.photo-a-venir small { font-size: .8rem; max-width: 34ch; }
.photo-carte { margin: 0; }
.photo-carte img, .photo-carte .photo-a-venir { border-radius: 0; border: 0; aspect-ratio: 16 / 9; object-fit: cover; }
.photo-une { margin-top: 4px; }
.article-meta { margin: 10px 0 0; font-size: .88rem; color: var(--gris); }
.article-corps { padding-bottom: 40px; }
.article-corps h2 { font-size: 1.5rem; margin-top: 30px; }
.article-corps p, .article-corps li { font-size: 1.04rem; }
.article-boutiques { margin: 20px 0 28px; }
.brouillon { display: inline-block; margin: 0 0 12px; padding: 6px 12px; background: #FBF1DF; border: 1px solid var(--soleil); border-radius: 8px; font-size: .85rem; font-weight: 600; color: #7A5418; }
.suivi-maj { margin: 0 0 18px; padding: 10px 14px; background: var(--pierre); border-left: 4px solid #46607A; border-radius: 8px; font-size: .95rem; }
.brouillon-tag { font-weight: 700; color: #7A5418; }

/* Espace commerçants (page /commercants/, liens vers le back-office) */
.bouton {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 11px 20px; border: 0; border-radius: 10px;
  background: var(--bordeaux); color: #fff; font: 600 .95rem var(--texte); text-decoration: none; cursor: pointer;
}
.bouton:hover { background: var(--bordeaux-soft); color: #fff; }
/* « Appeler » : sur écran tactile seulement (sur ordinateur, le numéro est affiché sous l'adresse) */
.bouton-appeler { display: none; }
@media (pointer: coarse) {
  .bouton-appeler { display: inline-flex; margin-top: 14px; }
  .popup .bouton-appeler { margin: 0 0 12px; }
}
.popup.is-reduite .bouton-appeler { display: none; }
.nav-links a.nav-commercant { margin-top: 4px; background: var(--bordeaux); color: #fff; font-weight: 600; }
.nav-links a.nav-commercant:hover { background: var(--bordeaux-soft); color: #fff; }
.footer-commercant { margin-top: 8px; }
.footer-commercant a { color: #fff; font-weight: 600; }
.offre-avantages { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.offre-avantages li { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid var(--ligne); border-top: 4px solid var(--soleil); border-radius: var(--radius); padding: 14px 16px; }
.offre-avantages strong { font: 700 1.1rem var(--titre); color: var(--bordeaux); }
.offre-avantages span { font-size: .92rem; color: var(--gris); }
.offre-etapes li { margin-bottom: 6px; }
.form-commercant { display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid var(--ligne); border-radius: var(--radius); padding: 20px; margin-bottom: 40px; }
.form-commercant label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: .92rem; }
.form-commercant label[hidden] { display: none; }
.form-commercant input, .form-commercant select, .form-commercant textarea { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--pierre-dark); border-radius: 10px; background: #fff; color: var(--encre); }
.form-commercant input:focus, .form-commercant select:focus, .form-commercant textarea:focus { outline: 2px solid var(--bordeaux); outline-offset: 1px; }
.form-commercant .form-case { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; }
.form-commercant .form-case input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--bordeaux); }
.form-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fiche-description { font-size: 1.08rem; }
.fiche-bonsplans { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.fiche-bonplan { background: #FBF1DF; border-radius: var(--radius); padding: 12px 14px; }
.fiche-bonplan[hidden] { display: none; }
.fiche-bonplan strong { display: block; margin-top: 6px; font-size: 1.05rem; color: #7A5418; }
.fiche-bonplan p { margin: 4px 0; }
.fiche-proprio { margin-bottom: 24px; }
.fiche-proprio .card { border-left: 4px solid var(--soleil); }
.fiche-proprio h2 { font-size: 1.25rem; margin: 0 0 4px; }
@media (max-width: 760px) { .form-deux { grid-template-columns: 1fr; } }

/* Bouton flottant « Je suis dans la rue » (accueil), au-dessus de « retour en haut » */
.fab-rue {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px 0 14px;
  background: var(--encre); color: #fff; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 .9rem var(--texte); box-shadow: 0 6px 18px rgba(30, 26, 23, .28);
  transition: bottom .2s, padding .2s, background .2s;
}
.fab-rue[hidden], .guidage .fab-rue { display: none; }
.fab-rue:hover { background: var(--bordeaux); }
.fab-rue:focus-visible { outline: 3px solid var(--soleil); outline-offset: 2px; }
.fab-rue.au-dessus { bottom: 76px; width: 48px; padding: 0; justify-content: center; }
.fab-rue.au-dessus .fab-texte { display: none; }

/* Retour en haut */
.haut {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  display: grid; place-items: center; width: 48px; height: 48px;
  background: var(--bordeaux); color: var(--pierre); border: 0; border-radius: 50%; cursor: pointer;
  box-shadow: 0 6px 18px rgba(30, 26, 23, .2);
  opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s, background .2s;
}
.haut[hidden] { display: none; }
.haut.visible { opacity: 1; transform: none; }
.haut:hover { background: var(--bordeaux-soft); }
.haut:focus-visible { outline: 3px solid var(--soleil); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .haut { transition: none; }
}

/* Logo d'une boutique (envoyé dans le back-office), ou le symbole du site par défaut : src/_includes/logo-boutique.njk */
.logo-b {
  flex: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 44px; height: 44px; padding: 3px; border: 1px solid var(--ligne); border-radius: 10px; background: #fff; overflow: hidden;
}
.logo-b img { display: block; width: 100%; height: 100%; object-fit: contain; }
.logo-b-defaut { background: var(--pierre); border-color: transparent; padding: 7px; }
.logo-b-defaut img { opacity: .55; }
.shop-btn .logo-b { width: 36px; height: 36px; border-radius: 8px; }
.shop-btn .logo-b-defaut { padding: 6px; }
.boutique a { flex-direction: row; align-items: flex-start; gap: 12px; }
.boutique-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.popup-entete { display: flex; align-items: center; gap: 12px; margin: 0 30px 2px 0; }
.popup-entete .popup-cat, .popup-entete .popup-nom { margin-right: 0; }
.popup.is-reduite .popup-entete .logo-b { width: 36px; height: 36px; }
.fiche-entete { display: flex; align-items: center; gap: 18px; }
.logo-b-fiche { width: 96px; height: 96px; padding: 8px; border-radius: 16px; }
.logo-b-fiche.logo-b-defaut { padding: 16px; }
@media (max-width: 600px) {
  .fiche-entete { gap: 12px; }
  .logo-b-fiche { width: 64px; height: 64px; padding: 5px; border-radius: 12px; }
  .logo-b-fiche.logo-b-defaut { padding: 10px; }
}

/* Fiche : encart « Aussi en … » (12 plus proches, le reste repliable) */
.aussi-intro { margin: -4px 0 6px; }
.aussi-plus { margin: 6px 0 10px; }
.aussi-plus summary { cursor: pointer; font-weight: 600; color: var(--bordeaux); padding: 4px 0; }
.aussi-plus[open] summary { margin-bottom: 4px; }
.journal-flux { margin: 6px 0 0; font-size: .9rem; }

/* Pages de textes légaux (mentions légales, confidentialité) */
.texte-legal h2 { font-size: 1.35rem; margin: 30px 0 8px; }
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal h3 { font-size: 1.05rem; margin: 18px 0 6px; }
.texte-legal p { margin: 0 0 12px; line-height: 1.65; }
.footer-legal { margin-top: 8px; font-size: .85rem; }
.footer-legal a { color: inherit; }
/* Page commerçants : les deux formules */
.offre-formules { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 0 0 12px; }
.offre-formule { background: #fff; border: 1px solid var(--ligne); border-radius: var(--radius); padding: 18px 20px; }
.offre-formule-payante { border: 2px solid var(--bordeaux); }
.offre-formule h3 { margin: 0; font-size: 1.25rem; }
.offre-prix { margin: 4px 0 10px; font: 700 1.5rem var(--titre); color: var(--bordeaux); }
.offre-fondatrice { margin: 0 0 10px; padding: 8px 12px; background: #FBF1DF; border-radius: 10px; font-size: .9rem; color: #7A5418; }
.offre-formule ul { margin: 0; padding-left: 18px; font-size: .95rem; }
.offre-formule li { margin-bottom: 6px; }
.form-formule { border: 1px solid var(--ligne); border-radius: 10px; padding: 10px 14px 4px; margin: 0; display: grid; gap: 8px; }
.form-formule legend { font-weight: 600; padding: 0 6px; }
.texte-legal ul { margin: 0 0 12px; padding-left: 20px; line-height: 1.6; }
.texte-legal li { margin-bottom: 6px; }

/* Page « La balade » : captures dans un cadre de téléphone (scripts/captures-balade.mjs) */
.balade-etapes { display: grid; gap: 48px; }
.balade-etape { display: grid; grid-template-columns: minmax(0, 280px) 1fr; gap: 36px; align-items: center; }
.balade-etape:nth-child(even) { grid-template-columns: 1fr minmax(0, 280px); }
.balade-etape:nth-child(even) .telephone { order: 2; }
.telephone { margin: 0; padding: 10px; background: #1E1A17; border-radius: 38px; box-shadow: 0 18px 40px rgba(30, 26, 23, .25); }
.telephone img { display: block; width: 100%; height: auto; border-radius: 28px; }
.balade-num { margin: 0 0 6px; font: 700 2.4rem/1 var(--titre); color: var(--soleil); }
.balade-texte h2 { margin-bottom: 10px; }
.balade-legende { margin-top: 28px; font-size: .85rem; }
.balade-savoir { padding-left: 20px; }
.balade-savoir li { margin-bottom: 8px; }
.balade-commercants { text-align: center; }
.balade-cta-mobile { display: none; }
@media (pointer: coarse) {
  .balade-cta-mobile { display: inline-flex; }
  .balade-cta-ordi { display: none; }
}
@media (max-width: 700px) {
  .balade-etape, .balade-etape:nth-child(even) { grid-template-columns: 1fr; gap: 18px; }
  .balade-etape:nth-child(even) .telephone { order: 0; }
  .telephone { width: min(260px, 75%); margin: 0 auto; }
}
.parking-distance { margin: 0 0 6px; font-weight: 600; }

/* Partenariats (offre /partenariat/) : toujours signalés comme tels */
.tag-partenariat { display: inline-block; padding: 1px 7px; border: 1px solid currentColor; border-radius: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7A5418; }
.mention-partenariat { margin: 12px 0 0; padding: 8px 12px; background: #FBF1DF; border-radius: 10px; font-size: .9rem; color: #7A5418; }
.mention-partenariat a { color: inherit; font-weight: 600; }
.encart-partenaire { margin-top: 8px; margin-bottom: 40px; padding: 14px 18px; background: #fff; border: 1px solid var(--ligne); border-left: 4px solid var(--soleil); border-radius: var(--radius); }
.encart-partenaire p { margin: 0 0 6px; }
.encart-partenaire .muted { margin: 0; font-size: .82rem; }
.encart-partenaire-titre { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7A5418; }
.offre-regles li { margin-bottom: 8px; }
/* Balade : alerte groupée (plusieurs boutiques voisines à bon plan) */
.alerte-groupe { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.alerte-groupe button {
  all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 10px 12px; background: #FBF1DF; border-radius: 12px;
}
.alerte-groupe button:focus-visible { outline: 2px solid var(--bordeaux); }
.alerte-groupe .logo-b { width: 40px; height: 40px; }
.alerte-groupe-texte { display: flex; flex-direction: column; min-width: 0; }
.alerte-groupe-texte strong { font: 700 1.02rem var(--titre); color: var(--encre); }
.alerte-groupe-bonplan { font-weight: 600; font-size: .92rem; color: #7A5418; }
/* Page histoire : une illustration par étape, à droite du texte (src/_data/illustrationsHistoire.js) */
.frise li { display: flow-root; }
.frise-photo { float: right; width: min(40%, 420px); margin: 4px 0 12px 28px; }
.frise-photo figcaption a { color: inherit; }
@media (max-width: 700px) {
  .frise-photo { float: none; width: 100%; margin: 6px 0 12px; }
}
.filtre-recherche { display: block; max-width: 640px; margin: 0 0 12px; }
/* Fiche : spécialités cochées par la boutique (donnees/specialites.json) */
.specialites { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.specialites li { padding: 4px 10px; border-radius: 999px; background: var(--pierre); font-size: .85rem; font-weight: 500; }

/* Pages de démonstration (/demo/) : bandeau « boutique fictive » */
.demo-bandeau { background: #FBF1DF; border-bottom: 1px solid var(--soleil); color: #5A3F12; font-size: .9rem; padding: 10px 0; }
.demo-bandeau strong { color: #7A5418; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; }
.demo-liens { display: block; margin-top: 4px; }
.demo-liens a { color: var(--bordeaux); }
.mode-balade .demo-bandeau { display: none; }
/* Balade sur téléphone tenu en paysage : invitation à repasser en portrait (balade.njk, #paysage-alerte) */
.paysage-alerte { display: none; }
@media (orientation: landscape) and (pointer: coarse) and (max-height: 600px) {
  body.mode-balade:not(.paysage-ok) .paysage-alerte {
    display: flex; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center;
    padding: 16px; background: rgba(250, 246, 239, .97);
  }
}
.paysage-carte { max-width: 460px; text-align: center; color: var(--encre); }
.paysage-tel { color: var(--bordeaux); transform: rotate(90deg); animation: paysage-tourne 2.4s ease-in-out infinite; }
@keyframes paysage-tourne { 0%, 30% { transform: rotate(90deg); } 60%, 100% { transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .paysage-tel { animation: none; transform: none; } }
.paysage-titre { margin: 8px 0 6px; font: 700 1.4rem var(--titre); color: var(--bordeaux); }
.paysage-carte p { margin: 0 0 12px; }
.paysage-continuer { border: 0; background: none; padding: 6px 10px; font: 600 .95rem var(--texte); color: var(--bordeaux); text-decoration: underline; cursor: pointer; }
/* Page /bons-plans/ : cartes des bons plans (bon-plan-carte.njk) */
.bp-liste { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.bp-carte { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--ligne); border-top: 4px solid var(--c); border-radius: var(--radius); padding: 14px 16px; }
.bp-carte[hidden] { display: none; }
.bp-boutique { display: flex; align-items: center; gap: 10px; }
.bp-boutique > div { display: flex; flex-direction: column; min-width: 0; }
.bp-nom { font: 700 1.05rem var(--titre); color: var(--encre); text-decoration: none; }
.bp-nom:hover { color: var(--bordeaux); }
.bp-adresse { font-size: .82rem; color: var(--gris); }
.bp-titre { margin: 4px 0 0; padding: 8px 12px; background: #FBF1DF; border-radius: 10px; font-weight: 700; color: #7A5418; }
.bp-texte { margin: 0; font-size: .92rem; }
.bp-dates { margin: 0; font-size: .82rem; color: var(--gris); }
.bp-liens { margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.bp-liens .more { margin-top: 0; }
.lead strong { color: var(--encre); }
/* Fiche dont les informations ne sont pas confirmées (ni vérifiée sur place, ni tenue par la boutique) */
.fiche-a-confirmer { margin: 18px 0 0; padding: 12px 14px; background: var(--pierre); border-radius: 10px; font-size: .92rem; }
.fiche-a-confirmer-gerant { display: block; margin-top: 6px; color: var(--gris); }