/* Fiches commerces, villes et catégories — nouvelle DA « façon My Helsinki » (30/10/2026).
   Mêmes pages que le référencement du 18/10 : seul l'habillage change. */
:root{
  --page:#F4F1EA;--kraft:#E4DDD0;--carte:#FBFAF6;--encre:#14161A;--gris:#5B574F;--filet:#CFC7B8;
  --verm:#DE3B0A;--verm-texte:#C4350A;--rayon:28px;--ombre:0 18px 40px -18px rgba(20,22,26,.45);
  --marge:clamp(16px,6.5vw,96px);
}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--encre);font:18px/1.55 "Hanken Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;letter-spacing:-.02em;margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.evitement{position:absolute;left:-999px;top:8px;background:var(--encre);color:var(--page);padding:10px 16px;border-radius:99px;z-index:30}
.evitement:focus{left:16px}

/* En-tête */
.tete{position:sticky;top:0;z-index:20;background:var(--page);display:flex;align-items:center;gap:20px;padding:14px var(--marge);border-bottom:1px solid transparent}
.marque{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:"Bricolage Grotesque";font-weight:800;font-size:20px;letter-spacing:.02em}
.marque img{width:34px;height:34px;border-radius:9px}
.tete-nav{margin-left:auto;display:flex;align-items:center;gap:28px}
.tete-nav a{text-decoration:none;font-family:"Bricolage Grotesque";font-weight:700;font-size:17px}
.tete-nav a:not(.btn):hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.btn,.btn-ink{display:inline-flex;align-items:center;gap:10px;background:var(--encre);color:var(--page)!important;text-decoration:none;font-weight:600;font-size:16px;padding:13px 22px;border-radius:99px;font-family:"Hanken Grotesk",sans-serif}
.btn:hover,.btn-ink:hover{background:#2a2d33}
.btn-trait{display:inline-flex;align-items:center;padding:12px 21px;border-radius:99px;border:1.5px solid var(--encre);text-decoration:none;font-weight:600;font-size:16px}
.btn-trait:hover{background:var(--encre);color:var(--page)}

/* Fil d'Ariane */
.ariane{padding:8px var(--marge) 0}
.ariane ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0;font-size:14px;color:var(--gris)}
.ariane li+li::before{content:"›";margin:0 10px;opacity:.6}
.ariane a{text-decoration:none}
.ariane a:hover{text-decoration:underline}

main{padding:24px var(--marge) 80px;max-width:1240px;margin:0 auto}

/* Fiche */
.fiche{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:16px 56px;align-items:start}
.fiche>.visuel{grid-row:1 / span 5;position:sticky;top:96px;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--rayon);box-shadow:var(--ombre);display:block}
.visuel.aplat{background:var(--kraft);display:flex;flex-direction:column;justify-content:flex-end;padding:36px 36px 36px 48px;position:relative;overflow:hidden}
.visuel.aplat::before{content:"";position:absolute;right:36px;top:36px;width:18px;height:18px;border-radius:50%;background:var(--verm)}
.visuel.aplat span{font-family:"Kristi",cursive;font-size:clamp(48px,6vw,88px);line-height:.95;color:var(--encre);overflow-wrap:anywhere}
.visuel.aplat em{font-style:normal;font-family:"Bricolage Grotesque";font-weight:700;font-size:18px;margin-top:14px;color:var(--gris)}
.surtitre{display:inline-block;justify-self:start;background:#fff;border-radius:99px;padding:9px 18px;margin:8px 0 0;font-family:"Bricolage Grotesque";font-weight:700;font-size:15px;box-shadow:0 4px 14px rgba(0,0,0,.08)}
.fiche h1{font-size:clamp(40px,5.6vw,76px);line-height:.98;letter-spacing:-.035em}
.accroche{font-size:20px;color:var(--gris);margin:0;max-width:640px}
.gestes{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0 4px}
.fiche>.bloc{grid-column:2}
.bloc{margin-top:28px}
.bloc h2{font-size:26px;margin-bottom:14px}
.infos{margin:0;display:grid;gap:0;background:var(--carte);border:1px solid var(--filet);border-radius:22px;overflow:hidden}
.infos div{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:14px 20px;border-top:1px solid var(--filet)}
.infos div:first-child{border-top:0}
.infos dt{color:var(--gris);font-size:15px}
.infos dd{margin:0;font-weight:500}
.horaires{width:100%;border-collapse:separate;border-spacing:0;background:var(--carte);border:1px solid var(--filet);border-radius:22px;overflow:hidden}
.horaires th,.horaires td{text-align:left;padding:11px 20px;border-top:1px solid var(--filet);font-size:16px}
.horaires tr:first-child th,.horaires tr:first-child td{border-top:0}
.horaires th{font-weight:600;width:130px}
.note{font-size:14px;color:var(--gris);margin:10px 0 0}

/* Listes de commerces : des cartes arrondies */
.liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.liste li a{display:flex;flex-direction:column;gap:4px;height:100%;padding:18px 20px;background:var(--carte);border:1px solid var(--filet);border-radius:22px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.liste li a:hover{transform:translateY(-3px);box-shadow:var(--ombre)}
.liste .nom{font-family:"Bricolage Grotesque";font-weight:700;font-size:18px;line-height:1.2}
.liste .meta{font-size:14px;color:var(--gris)}
.liste.tuiles li a{background:var(--encre);color:var(--page);border-color:var(--encre)}
.liste.tuiles .meta{color:#c9c4ba}
.suite{margin:20px 0 0}
.suite a{font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}

/* Pages ville et catégorie */
.hub>h1,main>section>h1{font-size:clamp(44px,7vw,96px);line-height:.95;letter-spacing:-.04em;margin:10px 0 14px}
.hub .surtitre,main>section>.surtitre{margin-bottom:6px}

/* Pied de page */
.pied{background:var(--encre);color:var(--page);padding:64px var(--marge) 32px}
.pied .colonnes{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1240px;margin:0 auto}
.pied .colonnes div{display:flex;flex-direction:column;gap:9px}
.pied .titre{font-family:"Bricolage Grotesque";font-weight:700;font-size:18px;margin:0 0 6px}
.pied a{text-decoration:none;opacity:.85;font-size:15px}
.pied a:hover{opacity:1;text-decoration:underline}
.pied .bas{max-width:1240px;margin:44px auto 0;padding-top:22px;border-top:1px solid #3a3c42;font-size:13px;opacity:.75}

@media (max-width:860px){
  .tete-nav a:not(.btn){display:none}
  .fiche{grid-template-columns:1fr}
  .fiche>.visuel{grid-row:auto;position:static;aspect-ratio:4/3}
  .fiche>.bloc{grid-column:1}
  .infos div{grid-template-columns:100px 1fr;padding:12px 16px}
  .pied .colonnes{grid-template-columns:1fr 1fr}
}
@media (max-width:420px){.tete-nav .btn{padding:10px 14px;font-size:14px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}