/* ============================================
   Design tokens — inspirés de Lille
   ============================================ */
:root {
  --cream: #f6f1e6;
  --band: #ece2ce;
  --stone: #ddd2bb;
  --ink: #322920;
  --brick: #a13c26;
  --brick-dark: #7e2e1c;
  --gold: #b8862e;
  /* Doré pour les petits textes (étiquettes, adresses, « En savoir plus ») :
     plus soutenu que --gold, qui reste pour les filets et les soulignés.
     --gold sur le fond crème ne se lisait pas bien (contraste 2,9 pour 4,5
     demandé) ; --gold-text atteint 4,9. --featured-tag : même rôle sur le
     bandeau « À la une ». */
  --gold-text: #876220;
  --featured-tag: #dcb05a;
  --slate: #3c4652;
  --featured-bg: #3c4652;
  --astuce-bg: #f7ecd6;
  --astuce-label: #7a5a1c;
  --on-brick: #fff;
  --frame-bg: #fff;
  --box-bg: #fbf8f1;
  --max-width: 780px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Public Sans', -apple-system, Segoe UI, sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  color: var(--brick-dark);
  line-height: 1.15;
  margin: 0 0 0.4em;
}

a {
  color: var(--brick);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--gold-text); }

/* height: auto : les photos ont leurs dimensions dans le HTML
   (width, height) pour que la page ne saute pas pendant le chargement. */
img { max-width: 100%; height: auto; display: block; }

/* ---------- Layout shells ---------- */
.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; }
.wide { max-width: 1040px; margin: 0 auto; padding: 0 1.5rem; }

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 1.5rem;
  max-width: 1040px;
  margin: 0 auto;
}

.wordmark {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--ink);
  text-decoration: none;
}
.wordmark:hover { color: var(--brick); }
.wordmark em { color: var(--brick); font-style: normal; }

/* ---------- Sélecteur de langue ---------- */
.lang-switch {
  display: inline-flex;
  border: 1px solid var(--stone);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
.lang-switch a {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--slate);
  text-decoration: none;
  padding: 0.35rem 0.7rem;
  background: transparent;
}
.lang-switch a:hover { color: var(--brick); }
.lang-switch a.active { background: var(--brick); color: var(--on-brick); }
.lang-switch a.active:hover { color: var(--on-brick); }

/* ---------- Navigation principale ---------- */
.mainnav {
  border-top: 1px solid var(--stone);
  border-bottom: 1px solid var(--stone);
  margin-bottom: 2rem;
}
.mainnav-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  gap: 1.6rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mainnav-inner::-webkit-scrollbar { display: none; }
/* Menu trop large pour l'écran (mobile) : fondu sur le bord où des
   rubriques sont cachées, pour montrer qu'on peut faire défiler.
   Les classes sont posées par le petit script placé juste après
   le menu dans chaque page. Sur PC le menu tient : rien ne change. */
.mainnav-inner.suite-droite {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
}
.mainnav-inner.suite-gauche {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent);
          mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent);
}
.mainnav-inner.suite-gauche.suite-droite {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
          mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}
.mainnav a {
  padding: 0.8rem 0;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.mainnav a:hover { color: var(--brick); }
.mainnav a.active { color: var(--brick); border-bottom-color: var(--brick); }

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2.5rem;
  align-items: center;
  max-width: 1040px;
  margin: 1rem auto 3rem;
  padding: 0 1.5rem;
}
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
.hero .lede { font-size: 1.15rem; color: var(--slate); max-width: 46ch; }
@media (max-width: 720px) { .hero { grid-template-columns: 1fr; } }

/* ---------- Titres de section ---------- */
.section-title {
  max-width: 1040px;
  margin: 0 auto 1.5rem;
  padding: 0 1.5rem;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ---------- Section 1 : liste éditoriale ---------- */
.rubriques { max-width: 1040px; margin: 0 auto 3.5rem; padding: 0 1.5rem; }

.rubrique {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1.5rem;
  padding: 1.7rem 0;
  border-bottom: 1px solid var(--stone);
  text-decoration: none;
  color: inherit;
}
.rubrique:last-child { border-bottom: none; }
a.rubrique:hover h3 { color: var(--gold-text); }

.rubrique h3 { margin-bottom: 0.25rem; font-size: 1.3rem; }
.rubrique p { margin: 0; color: var(--slate); }
.rubrique .tag { font-size: 0.85rem; color: var(--gold-text); }

.rubrique .more {
  display: block;
  margin-top: 0.6rem;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--gold-text);
  text-align: right;
}
a.rubrique:hover .more { color: var(--brick); }

@media (min-width: 641px) { .rubrique .more { grid-column: 2; } }
@media (max-width: 640px) { .rubrique { grid-template-columns: 1fr; gap: 0.3rem; } }

/* ---------- Section 2 : bande contrastée ---------- */
.section-band {
  background: var(--band);
  border-top: 1px solid var(--stone);
  border-bottom: 1px solid var(--stone);
  padding: 2.4rem 0 2.6rem;
  margin: 0 0 3rem;
}

.liens-pratiques {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  gap: 0;
}
@media (min-width: 721px) {
  .liens-pratiques { grid-template-columns: repeat(2, 1fr); column-gap: 3rem; }
}

.lien-pratique {
  display: block;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--stone);
  text-decoration: none;
  color: inherit;
}
.lien-pratique:hover strong { color: var(--brick); }
.lien-pratique strong {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--brick-dark);
  display: block;
  margin-bottom: 0.1rem;
}
.lien-pratique span { font-size: 0.88rem; color: var(--slate); }

/* Sur mobile : sommaire compact, deux colonnes, titres seuls */
@media (max-width: 720px) {
  .liens-pratiques { grid-template-columns: repeat(2, 1fr); column-gap: 1.2rem; }
  .lien-pratique { padding: 0.65rem 0; }
  .lien-pratique span { display: none; }
  .rubriques { margin-bottom: 1.8rem; }
  .section-band { padding: 1.8rem 0 2rem; }
}

/* ---------- Venue entries ---------- */
.venue { margin-top: 1.6rem; }
.venue h3 { font-size: 1.2rem; color: var(--brick-dark); margin-bottom: 0.45rem; }
.venue .venue-meta {
  font-size: 0.88rem;
  color: var(--gold-text);
  display: block;
  margin-bottom: 0.4rem;
}
/* « voir sur la carte » : ne se coupe plus sur deux lignes, et la zone
   à toucher est plus haute (sans rien changer à l'affichage). */
.venue .venue-meta a { white-space: nowrap; padding-block: 0.4rem; }
.venue p { margin: 0.2rem 0 0; }

/* ---------- Featured ---------- */
.featured {
  max-width: 1040px;
  margin: 0 auto 3.5rem;
  padding: 2rem 1.5rem;
  background: var(--featured-bg);
  color: var(--cream);
  border-radius: 2px;
}
.featured .tag { color: var(--featured-tag); font-size: 0.9rem; }
.featured h2 { color: var(--cream); margin-top: 0.3rem; }
.featured p { color: #d9dee3; }
.featured a.btn {
  display: inline-block;
  margin-top: 0.8rem;
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}

/* ---------- Article ---------- */
article.post { max-width: var(--max-width); margin: 2rem auto 4rem; padding: 0 1.5rem; }
article.post h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
article.post .meta { color: var(--slate); font-size: 0.95rem; margin-bottom: 1.8rem; }
article.post h2 {
  font-size: 1.4rem;
  margin-top: 2.2rem;
  border-bottom: 2px solid var(--stone);
  padding-bottom: 0.3rem;
}
article.post ul { padding-left: 1.2rem; }
article.post li { margin-bottom: 0.5rem; }

.infos-pratiques {
  border: 1px solid var(--stone);
  border-left: 4px solid var(--brick);
  padding: 1.2rem 1.4rem;
  margin: 2rem 0;
  background: var(--box-bg);
}
/* "article.post .infos-pratiques h2" est plus spécifique que
   "article.post h2" : sans ça, le titre de l'encadré héritait
   d'une grande marge haute et laissait un vide en tête de boîte. */
article.post .infos-pratiques h2,
.infos-pratiques h2 { margin-top: 0; padding-bottom: 0.4rem; }
.infos-pratiques dl { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1rem; margin: 0; }
.infos-pratiques dt { font-weight: 600; color: var(--brick-dark); }
.infos-pratiques dd { margin: 0; }

/* ---------- Monetisation ---------- */
/* Les emplacements publicitaires restent masqués tant que
   le compte AdSense n'est pas approuvé.
   Pour les réafficher : supprimer la ligne "display: none;". */
.ad-slot {
  display: none;
  max-width: var(--max-width);
  margin: 2rem auto;
  padding: 0 1.5rem;
}
.ad-slot .frame {
  border: 1px dashed var(--stone);
  padding: 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--slate);
}

.affiliate-box {
  border: 1px solid var(--stone);
  padding: 1rem 1.2rem;
  margin: 1.6rem 0;
  background: var(--box-bg);
}
.affiliate-box .tag { font-size: 0.8rem; color: var(--gold-text); }

/* ---------- Footer ---------- */
footer {
  max-width: 1040px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;
  color: var(--slate);
  font-size: 0.9rem;
  border-top: 1px solid var(--stone);
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  margin: 0 0 1.3rem;
  padding: 0;
  list-style: none;
}
/* padding-block : zone à toucher plus haute, sans décaler les liens */
.footer-links a { color: var(--ink); text-decoration: none; font-size: 0.92rem; padding-block: 0.3rem; }
.footer-links a:hover { color: var(--brick); }
.footer-note { margin: 0; }

/* ---------- Accessibility ---------- */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--brick);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Lien « Aller au contenu » : caché au-dessus de l'écran,
   il n'apparaît que lorsqu'on navigue au clavier (touche Tab). */
.evitement {
  position: absolute;
  left: 1rem;
  top: 0;
  z-index: 100;
  padding: 0.55rem 0.9rem;
  background: var(--brick);
  color: var(--on-brick);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 3px 3px;
  transform: translateY(-120%);
}
.evitement:focus { transform: none; color: var(--on-brick); }
main { display: block; }

/* Bandeau « This guide is also in English », pages françaises :
   affiché seulement si le navigateur n'est pas réglé en français,
   et plus jamais une fois refermé. */
.bandeau-langue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  background: var(--band);
  border-bottom: 1px solid var(--stone);
  font-size: 0.9rem;
  text-align: center;
}
.bandeau-langue[hidden] { display: none; }
.bandeau-langue p { margin: 0; }
.bandeau-fermer {
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: 0.2rem 0.45rem;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}

/* ---------- Photos ---------- */
.photo-frame {
  display: block;
  max-width: 560px;
  margin: 1.8rem auto;
  background: var(--frame-bg);
  padding: 10px;
  border: 1px solid var(--stone);
  box-shadow: 0 6px 16px rgba(50, 41, 32, 0.12);
}
.photo-frame img { width: 100%; display: block; }
.photo-frame figcaption {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 0.88rem;
  color: var(--slate);
  text-align: center;
  padding-top: 0.6rem;
}
.hero-photo { margin: 0; border: 1px solid var(--stone); overflow: hidden; }
.hero-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
@media (max-width: 720px) { .hero-photo img { aspect-ratio: 3 / 2; } }

/* ---------- Carte ---------- */
.map-wrap { max-width: 1040px; margin: 2rem auto; padding: 0 1.5rem; }
#carte { height: 70vh; min-height: 420px; border: 1px solid var(--stone); }
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin: 1rem auto 2rem;
  padding: 0 1.5rem;
  max-width: 1040px;
  font-size: 0.9rem;
  color: var(--slate);
}
.map-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
/* Points de la carte (et de sa légende) : une couleur ET un pictogramme
   par catégorie, pour qu'on les distingue même sans bien voir les
   couleurs. Couleurs fixes : le fond de carte reste clair en mode sombre.
   Le pictogramme est dessiné par le script de la page carte. */
.pin {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  color: #fff;
}
.pin svg { width: 13px; height: 13px; display: block; }
.pin-lieu { background: #a13c26; }
.pin-resto { background: #a97a24; }
.pin-bar { background: #3c4652; }
.pin-parking { background: #4a7c59; }
.leaflet-popup-content-wrapper { border-radius: 2px; font-family: 'Public Sans', sans-serif; }
.leaflet-popup-content b { font-family: 'Fraunces', Georgia, serif; color: var(--brick-dark); }
.leaflet-popup-content a { font-size: 0.85rem; }

/* ---------- Transitions entre les pages ----------
   Fondu léger d'une page à l'autre. L'en-tête et le menu
   gardent leur place au lieu de clignoter.
   Les navigateurs qui ne gèrent pas ces règles les ignorent :
   la navigation reste alors strictement normale.
   ------------------------------------------------- */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.22s;
  animation-timing-function: ease;
}

.topbar  { view-transition-name: entete; }
.mainnav { view-transition-name: menu; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Pages en chinois : polices adaptées ----------
   Fraunces et Public Sans ne contiennent pas de caractères chinois.
   On bascule sur les polices système, qui rendent correctement.
   --------------------------------------------------------- */
html[lang^="zh"] body,
html[lang^="zh"] h1,
html[lang^="zh"] h2,
html[lang^="zh"] h3,
html[lang^="zh"] .section-title,
html[lang^="zh"] .wordmark,
html[lang^="zh"] .lien-pratique strong,
html[lang^="zh"] .rubrique .more,
html[lang^="zh"] .photo-frame figcaption {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Noto Sans SC", system-ui, sans-serif;
  font-style: normal;
}
html[lang^="zh"] .wordmark { font-family: 'Fraunces', serif; }

/* ============================================
   Adaptations grand écran (900 px et plus)
   Ce bloc ne s'applique jamais sur mobile :
   tout ce qui précède reste inchangé sur petit écran.
   ============================================ */
@media (min-width: 900px) {

  /* --- Hero : plus d'air entre le texte et la photo --- */
  .hero { grid-template-columns: 1.25fr 1fr; gap: 3.5rem; margin-bottom: 3.5rem; }

  /* --- Titres de section : à l'échelle de la largeur --- */
  .section-title { font-size: 2.1rem; margin-bottom: 1.8rem; }

  /* --- Liste de rubriques --- */
  .rubrique {
    grid-template-columns: 21rem 1fr;
    gap: 2.5rem;
    padding: 2.1rem 0;
    align-items: start;
  }
  .rubrique h3 { font-size: 1.45rem; }
  /* Longueur de ligne confortable : environ 60 signes */
  .rubrique p { max-width: 58ch; }
  /* « En savoir plus » revient sous le texte qu'il prolonge */
  .rubrique .more {
    grid-column: 2;
    text-align: left;
    margin-top: 0.9rem;
  }

  /* --- Bloc à la une --- */
  .featured { padding: 2.6rem 2.4rem; }
  .featured h2 { font-size: 1.9rem; }
  .featured p { max-width: 62ch; }

  /* --- Sommaire de fin de page --- */
  .liens-pratiques { column-gap: 4rem; }
  .lien-pratique { padding: 1rem 0; }
  .lien-pratique span { max-width: 44ch; }

  /* --- Pages de contenu : environ 70 signes par ligne ---
     Au-delà, l'œil se perd en revenant à la ligne.
     Les photos (560 px au plus) tiennent toujours dans cette largeur. */
  article.post { max-width: 660px; }

  /* --- Fiches d'adresses dans les pages catégories --- */
  .venue { margin-top: 2.1rem; }
  .venue h3 { font-size: 1.3rem; }

  /* --- Photos : au cas par cas ---
     Par défaut, chaque image garde ses proportions d'origine,
     exactement comme sur mobile : les panoramiques du marché de
     Noël et la Vieille Bourse s'affichent entières.
     Seules deux photos verticales sont recadrées en 4/3, parce
     qu'elles seraient sinon démesurément hautes sur grand écran.
     Pour en ajouter une : reprendre la règle ci-dessous en
     changeant le nom du fichier. */
  .photo-frame { max-width: 560px; }
  .photo-frame img {
    width: 100%;
    height: auto;
    max-height: none;
    margin-inline: 0;
  }
  .photo-frame img[src*="rue-de-gand"],
  .photo-frame img[src*="cafe-oz"] {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
  }

  /* La Vieille Bourse reste entière, mais dans un cadre plus étroit :
     le cadre blanc se resserre autour d'elle au lieu de l'agrandir.
     Même principe pour toute autre verticale qu'on veut voir en entier. */
  .photo-frame:has(img[src*="vieille-bourse"]) { max-width: 340px; }

  /* Photo du hero : carrée, pour que sa hauteur soit proche de
     celle du texte et qu'il ne reste pas de grand vide autour */
  .hero-photo img { aspect-ratio: 1 / 1; object-position: center 65%; }

  /* --- Pied de page --- */
  footer { padding-top: 3rem; }
  .footer-links { gap: 0.7rem 2rem; }
}

/* ==========================================================
   ESSAI — en-tête sur une seule ligne (grand écran seulement)
   Nom du site à gauche, rubriques au centre, langues à droite.

   POUR REVENIR À L'EN-TÊTE ACTUEL : supprimer tout ce bloc,
   jusqu'à la ligne « FIN DE L'ESSAI ».

   POUR ESSAYER PLUTÔT LE MENU CENTRÉ SUR DEUX LIGNES :
   supprimer ce bloc, puis décommenter la variante qui suit
   (voir les indications juste en dessous).
   ========================================================== */
@media (min-width: 900px) {
  .topbar {
    min-height: 4.6rem;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 1px solid var(--stone);
  }
  .mainnav {
    border-top: none;
    border-bottom: none;
    height: 0;
    margin-bottom: 2.4rem;
    /* isole le bloc : sans ceci, la marge négative de
       .mainnav-inner se fusionne avec celle-ci et fait
       remonter tout le contenu de la page dans l'en-tête */
    display: flow-root;
  }
  .mainnav-inner {
    height: 4.6rem;
    margin-top: -4.6rem;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    /* laisse les clics atteindre le nom du site et le sélecteur
       de langue, que cette barre recouvre */
    pointer-events: none;
  }
  .mainnav a {
    pointer-events: auto;
    font-size: 0.9rem;
    padding: 0.2rem 0;
  }
}
/* ===================== FIN DE L'ESSAI ===================== */

/* VARIANTE : menu centré, en gardant les deux lignes.
   Pour l'activer : supprimer cette ligne de commentaire et
   la dernière, de façon à ne laisser que la règle au milieu.

@media (min-width: 900px) {
  .mainnav-inner { justify-content: center; }
}

   Fin de la variante. */

/* ---------- Bouton « revenir en haut » ---------- */
.haut {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brick);
  color: var(--on-brick);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 8px rgba(50, 41, 32, 0.25);
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 50;
}
.haut.visible { opacity: 1; visibility: visible; transform: none; }
.haut:hover { background: var(--brick-dark); color: var(--on-brick); }
.haut svg { width: 17px; height: 17px; display: block; }

@media (prefers-reduced-motion: reduce) {
  .haut { transition: none; }
}

/* ---------- Encadré « Astuce de Lillois » ----------
   Un seul par page, réservé aux vraies astuces de local.
   ------------------------------------------------- */
.astuce {
  margin: 1.6rem 0;
  padding: 1rem 1.2rem 1.05rem;
  background: var(--astuce-bg);
  border-left: 4px solid var(--gold);
  border-radius: 2px;
}
.astuce-label {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--astuce-label);
  margin-bottom: 0.3rem;
}
.astuce p { margin: 0; }
.astuce p + p { margin-top: 0.7rem; }

/* ---------- Mode sombre automatique ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --cream: #201a15;
    --band: #2a231c;
    --ink: #ece4d6;
    --brick: #d97a52;
    --brick-dark: #e8916d;
    --gold: #d1a24a;
    --gold-text: #d1a24a;
    --featured-tag: #d1a24a;
    --stone: #46392c;
    --slate: #aab3bd;
    --featured-bg: #2a3340;
    --astuce-bg: #2e2616;
    --astuce-label: #d1a24a;
    --on-brick: #201a15;
    /* cadre des photos : sombre, au lieu d'un blanc qui éblouit
       et rend la légende illisible */
    --frame-bg: #2a231c;
    --box-bg: #2a231c;
  }
  .photo-frame { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); }
  .featured { color: #ece4d6; }
  .featured h2 { color: #ece4d6; }
  .featured a.btn { color: #ece4d6; }
}