/* =========================================================================
   Les bonnes adresses du coin — feuille de style
   Direction : « Editorial Luxury » cosy & moderne.
   Palette ancrée dans le territoire : grès rose des Vosges + crème chaud +
   vert forêt. Cartes à double liseré (effet plateau machiné), ombres
   diffuses, grain papier, micro-animations en ressort.
   ========================================================================= */

:root {
  --paper:     #f4ecdf;   /* page, crème chaud */
  --shell:     #ece2d1;   /* liseré extérieur des cartes (le « plateau ») */
  --paper-2:   #fdfbf5;   /* cœur des cartes, blanc chaud */
  --ink:       #2b2521;   /* texte principal */
  --ink-soft:  #6f655a;   /* texte secondaire */
  --ink-faint: #9a8f81;   /* hints */
  --gres:      #9a3b2e;   /* grès rose des Vosges, foncé — accent */
  --gres-soft: #c0583f;   /* grès clair */
  --foret:     #44543f;   /* vert forêt, adouci */
  --jaune:     #f3ead0;   /* fond du « bon plan » */
  --jaune-line:#e4d4a6;

  --hairline:   rgba(43, 37, 33, .08);
  --hairline-2: rgba(43, 37, 33, .15);

  --shadow-soft: 0 1px 2px rgba(43,37,33,.04), 0 18px 40px -24px rgba(43,37,33,.24);
  --shadow-lift: 0 2px 4px rgba(43,37,33,.05), 0 30px 54px -26px rgba(43,37,33,.30);
  --inner-hi: inset 0 1px 0 rgba(255,255,255,.75);

  --r-card: 24px;
  --r-inner: 18px;
  --r-input: 14px;
  --ease: cubic-bezier(.32, .72, 0, 1);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  /* Grain papier très subtil tissé dans le fond de page. */
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  background-attachment: fixed;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gres); text-decoration-thickness: 1px; text-underline-offset: 2px; }

.icon { width: 1em; height: 1em; display: inline-block; vertical-align: -.13em; flex-shrink: 0; }

/* ---------------------------------------------------------------- En-tête */
.masthead { padding: 3.4rem 1.4rem 2.2rem; }
.masthead__inner { max-width: 1080px; margin: 0 auto; }
.eyebrow {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .34rem .8rem;
  border: 1px solid var(--hairline-2);
  border-radius: 999px;
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--foret);
  font-weight: 600;
  background: rgba(253, 251, 245, .5);
}
.masthead__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.3rem, 7vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 0;
  color: var(--ink);
}
.masthead__tagline {
  margin: .9rem 0 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 2.6vw, 1.18rem);
  max-width: 42ch;
}

/* ---------------------------------------------------------------- Recherche */
.search {
  position: sticky;
  top: .8rem;
  z-index: 600;
  margin: 0 1rem 1.4rem;
}
.search__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  padding: .7rem;
  background: rgba(253, 251, 245, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
}
.search__or { color: var(--ink-faint); font-size: .82rem; padding: 0 .1rem; }
.search__addr { display: flex; gap: .5rem; flex: 1 1 240px; }
.search__addr input { flex: 1; }
.search__status {
  flex-basis: 100%; margin: .15rem .6rem .1rem; font-size: .84rem; color: var(--foret);
}

input[type="text"], input[type="url"], input[type="password"], select, textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-input);
  padding: .62rem .85rem;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.search__inner input[type="text"] { border-radius: 999px; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gres-soft);
  box-shadow: 0 0 0 3px rgba(192, 88, 63, .14);
}
textarea { resize: vertical; }

/* ---------------------------------------------------------------- Boutons */
.btn {
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--hairline-2);
  background: var(--paper-2);
  color: var(--ink);
  padding: .62rem 1.05rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: transform .4s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover { background: #fff; border-color: var(--hairline); }
.btn:active { transform: scale(.97); }
.btn--block { width: 100%; justify-content: center; }

/* CTA principal avec icône en pastille imbriquée (« button-in-button ») */
.btn--primary {
  background: var(--gres);
  border-color: var(--gres);
  color: #fdf2ec;
  padding-right: .5rem;
}
.btn--primary:hover { background: var(--gres-soft); border-color: var(--gres-soft); }
.btn__pin {
  width: 1.75rem; height: 1.75rem; border-radius: 999px;
  background: rgba(253, 242, 236, .18);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .5s var(--ease);
}
.btn--primary:hover .btn__pin { transform: translate(2px, -1px) scale(1.06); }
.btn__pin .icon { width: .95em; height: .95em; vertical-align: 0; }

/* ---------------------------------------------------------------- Filtres */
.filters {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.8rem;
  align-items: center;
}
.filters__group { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.filters__label {
  font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
}
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  font: inherit; font-size: .84rem; font-weight: 500; cursor: pointer;
  border: 1px solid var(--hairline-2); background: rgba(253, 251, 245, .6);
  color: var(--ink-soft); border-radius: 999px; padding: .32rem .8rem;
  transition: all .3s var(--ease);
}
.chip:hover { border-color: var(--gres-soft); color: var(--ink); transform: translateY(-1px); }
.chip--on { background: var(--foret); border-color: var(--foret); color: #eef2ea; }
.filters__reset {
  font: inherit; font-size: .82rem; background: none; border: none;
  color: var(--gres); cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px; padding: 0;
}

/* ---------------------------------------------------------------- Layout */
.layout {
  max-width: 1080px;
  margin: 1.6rem auto 0;
  padding: 0 1.4rem 3rem;
  display: grid;
  gap: 1.6rem;
  grid-template-columns: 1fr;
}
.map-wrap { order: -1; }
#map {
  height: 300px;
  border-radius: var(--r-card);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-soft);
  z-index: 0;
}
.leaflet-container { font-family: var(--font-body); background: var(--shell); }

/* ---------------------------------------------------------------- Cartes (double liseré) */
.list { display: grid; gap: 1.3rem; }

/* Liseré extérieur — le « plateau » */
.card-shell {
  background: var(--shell);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 6px;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.card-shell:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.card-shell:focus-visible { outline: 2px solid var(--gres); outline-offset: 3px; }

/* Cœur intérieur */
.card {
  background: var(--paper-2);
  border-radius: var(--r-inner);
  overflow: hidden;
  box-shadow: var(--inner-hi);
}
.card__photo { width: 100%; height: 180px; object-fit: cover; display: block; }
.card__body { padding: 1.1rem 1.2rem 1.2rem; }
.card__head { display: flex; justify-content: space-between; align-items: baseline; gap: .7rem; }
.card__name {
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.38rem; line-height: 1.1; margin: 0; color: var(--ink);
  letter-spacing: -.01em;
}
.card__dist {
  flex-shrink: 0; font-size: .76rem; font-weight: 600;
  color: var(--foret); background: rgba(68, 84, 63, .1);
  padding: .18rem .6rem; border-radius: 999px;
}
.card__meta { margin: .45rem 0 .2rem; color: var(--gres); font-weight: 500; font-size: .9rem; }
.card__addr { margin: .2rem 0; color: var(--ink-soft); font-size: .9rem; display: flex; gap: .4rem; align-items: flex-start; }
.card__addr .icon { color: var(--ink-faint); margin-top: .18em; }
.card__hours { margin: .2rem 0; color: var(--ink-soft); font-size: .85rem; white-space: pre-line; display: flex; gap: .4rem; align-items: flex-start; }
.card__hours .icon { color: var(--ink-faint); margin-top: .18em; }

/* Le « bon plan » — signature : une note chaleureuse qu'on se refile. */
.goodplan {
  position: relative;
  margin: .95rem 0 .25rem;
  padding: .8rem 1rem .85rem 1.05rem;
  background: var(--jaune);
  border: 1px solid var(--jaune-line);
  border-left: 3px solid var(--gres-soft);
  border-radius: 3px 14px 12px 3px;
}
.goodplan__label {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-display);
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gres); font-weight: 600; margin-bottom: .25rem;
}
.goodplan p { margin: 0; font-size: .95rem; color: #4a3f29; font-style: italic; line-height: 1.5; }

.card__actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .95rem; }
.card__action {
  font-size: .84rem; font-weight: 500; text-decoration: none;
  border: 1px solid var(--hairline-2); border-radius: 999px; padding: .4rem .8rem;
  color: var(--ink); background: var(--paper);
  display: inline-flex; align-items: center; gap: .35rem;
  transition: all .3s var(--ease);
}
.card__action:hover { border-color: var(--gres-soft); color: var(--gres); transform: translateY(-1px); }
.card__action .icon { color: var(--ink-faint); transition: color .3s var(--ease); }
.card__action:hover .icon { color: var(--gres); }

.empty {
  padding: 2.4rem 1.2rem; text-align: center; color: var(--ink-soft);
  border: 1px dashed var(--hairline-2); border-radius: var(--r-card);
  background: rgba(253, 251, 245, .5);
}

/* ---------------------------------------------------------------- Révélation au scroll */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

/* ---------------------------------------------------------------- Pied de page */
.footer {
  border-top: 1px solid var(--hairline);
  margin-top: 1rem;
  padding: 2rem 1.4rem;
  text-align: center;
  color: var(--ink-faint);
  font-size: .85rem;
}

/* ---------------------------------------------------------------- Desktop */
@media (min-width: 880px) {
  .layout { grid-template-columns: 1.05fr .95fr; align-items: start; gap: 2rem; }
  .map-wrap { order: 0; position: sticky; top: 6.2rem; }
  #map { height: calc(100vh - 8rem); min-height: 460px; }
}

/* ---------------------------------------------------------------- Accessibilité */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================================
   BACK-OFFICE (utilitaire, sobre)
   ========================================================================= */
.admin-body {
  background: var(--paper);
  font-family: var(--font-body);
}
.admin-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: .9rem 1.4rem; background: var(--ink); color: #f0ece3;
}
.admin-bar a { color: #f0ece3; text-decoration: none; }
.admin-bar a:hover { text-decoration: underline; }
.admin-shell { max-width: 980px; margin: 1.6rem auto; padding: 0 1.4rem 3rem; }
.admin-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.admin-title { font-family: var(--font-display); font-weight: 500; font-size: 1.9rem; margin: .2rem 0 1rem; }

.stack { display: grid; gap: 1.05rem; }
.stack label { display: grid; gap: .3rem; font-weight: 500; font-size: .92rem; }
.row { display: flex; gap: .8rem; flex-wrap: wrap; align-items: end; }
.row > * { flex: 1 1 140px; }
.grow-1 { flex: 1 1 140px; } .grow-2 { flex: 2 1 220px; }

.fieldset { border: 1px solid var(--hairline-2); border-radius: 16px; padding: 1.1rem; display: grid; gap: .85rem; background: rgba(253,251,245,.5); }
.fieldset legend { font-weight: 600; padding: 0 .45rem; color: var(--foret); }
.checks { display: flex; flex-wrap: wrap; gap: .55rem 1.3rem; }
.check { display: flex; align-items: center; gap: .45rem; font-weight: 400; }
.check input { width: auto; }

.geo-status { font-size: .88rem; }
.muted { color: var(--ink-soft); }
.small { font-size: .82rem; }
.warn { color: var(--gres); font-weight: 500; }

.flash { padding: .75rem .95rem; border-radius: 12px; margin: 0 0 1rem; font-size: .92rem; }
.flash--ok { background: #e7efe1; border: 1px solid #bcd4ac; color: #34522a; }
.flash--err { background: #f6e2dd; border: 1px solid #e3b1a6; color: var(--gres); }

.admin-table { width: 100%; border-collapse: collapse; margin-top: .9rem; background: var(--paper-2); border-radius: 14px; overflow: hidden; border: 1px solid var(--hairline); }
.admin-table th, .admin-table td { text-align: left; padding: .65rem .85rem; border-bottom: 1px solid var(--hairline); }
.admin-table th { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.admin-table tr:last-child td { border-bottom: none; }
.nowrap { white-space: nowrap; }
.inline { display: inline; }
.link-danger { background: none; border: none; color: var(--gres); cursor: pointer; font: inherit; text-decoration: underline; padding: 0 0 0 .6rem; }

.tag { display: inline-block; font-size: .72rem; padding: .14rem .55rem; border-radius: 999px; font-weight: 600; }
.tag--ok { background: #e7efe1; color: #34522a; }
.tag--off { background: #ece3d3; color: var(--ink-soft); }
.tag--warn { background: #f6e2dd; color: var(--gres); }

code { background: #ece3d3; padding: .1rem .35rem; border-radius: 5px; font-size: .88em; }