/* ===========================================================================
   tombz — feuille de style (mobile-first, dark gothic-playful)
   Polices : Cinzel (titres gravés) + Inter (UI). Palette cimetière nocturne.
   =========================================================================== */
:root {
  /* Couleurs */
  --bg:        #0f151b;
  --bg-2:      #0c1218;
  --bg-soft:   #161f28;
  --panel:     #1c2733;
  --panel-2:   #20303c;
  --ink:       #e7eae3;
  --ink-soft:  #aab6ac;
  --ink-dim:   #7d8a80;
  --line:      #2c3a46;
  --line-soft: #233039;
  --accent:    #c8a24a;   /* or patiné — bougie / CTA */
  --accent-hi: #e0bd63;
  --accent-2:  #8fae8a;   /* vert mousse */
  --danger:    #c2674f;
  --stone:     #cfd6c8;

  /* Typo */
  --font:    "Cinzel", Georgia, "Times New Roman", serif;     /* titres */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Échelle d'espacement (4/8) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  --radius:   16px;
  --radius-sm:10px;
  --maxw:     1140px;
  --header-h: 60px;

  /* Profondeur (ombres douces empilées) */
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 6px 18px rgba(0,0,0,.35);
  --shadow-3: 0 18px 50px rgba(0,0,0,.5);
  --glow:     0 0 0 1px rgba(200,162,74,.25), 0 8px 28px rgba(200,162,74,.18);

  /* Pilule + transitions standardisées + focus (passe de polish) */
  --radius-pill:     999px;
  --transition:      .18s ease;   /* couleur / fond / ombre (canonique) */
  --transition-snap: .12s ease;   /* transform : hover lift / scale */
  --transition-slow: .25s ease;   /* transitions plus lentes */
  --shadow-inset:    inset 0 1px 2px rgba(0,0,0,.35);
  --focus-ring:      0 0 0 3px rgba(200,162,74,.25);   /* boutons / toggles */
  --focus-ring-soft: 0 0 0 3px rgba(200,162,74,.18);   /* champs de formulaire */

  --z-header: 1100;   /* au-dessus des contrôles Leaflet (z-index 1000) */
  --z-nav:    1200;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(200,162,74,.07), transparent 60%),
    radial-gradient(900px 500px at 10% 0%, rgba(143,174,138,.06), transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;            /* base ≥16px : pas de zoom auto iOS */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Sticky footer : la page occupe toute la hauteur, le footer reste en bas. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-hi); }

h1, h2, h3 { font-family: var(--font); font-weight: 600; line-height: 1.15; letter-spacing: .3px; }

img, svg { max-width: 100%; }

/* Accessibilité : focus visible + lien d'évitement + reduced-motion */
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; border-radius: 4px; }
.skip-link {
  position: absolute; left: 8px; top: -56px; z-index: var(--z-nav);
  background: var(--accent); color: #1a130a; padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm);
  font-weight: 600; transition: top var(--transition);
}
.skip-link:focus { top: 8px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: var(--s-3) var(--s-5); border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-weight: 600; font-size: 1rem; line-height: 1;
  cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  transition: transform var(--transition-snap), background var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.btn:hover { color: inherit; }
.btn:active { transform: scale(.97); }
.btn-cta {
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  color: #1a130a; box-shadow: var(--shadow-2);
}
.btn-cta:hover { box-shadow: var(--glow); color: #1a130a; }
/* Bougie déjà allumée : bouton grisé, non cliquable. */
.btn-cta.is-lit,
.btn-cta:disabled {
  background: var(--bg-soft); color: var(--muted, #8a8276);
  box-shadow: none; cursor: default; opacity: .65; filter: grayscale(1);
}
.btn-cta.is-lit:hover, .btn-cta:disabled:hover { box-shadow: none; color: var(--muted, #8a8276); }
.btn-lg { min-height: 52px; padding: var(--s-4) var(--s-6); font-size: 1.08rem; }
.btn-ghost { border-color: var(--line); color: var(--ink); background: rgba(255,255,255,.02); }
.btn-ghost:hover { background: var(--bg-soft); border-color: var(--accent); color: var(--ink); }
.btn-block { width: 100%; }

/* ---------- En-tête (navbar Bootstrap, thémée) ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(12,18,24,.85);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header .navbar { padding-top: 0; padding-bottom: 0; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink); padding: 6px 0; }
.brand:hover { color: var(--ink); }
.brand-logo { height: 38px; width: 38px; display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
/* Wordmark « tombz » : Cinzel, « tomb » pierre clair + « z » jaune doré. */
.brand-name { font-family: var(--font); font-size: 1.5rem; font-weight: 700; letter-spacing: 1.5px; line-height: 1; }
.brand-name .wm-tomb { color: var(--stone); }
.wm-z { color: var(--accent-hi); }   /* « z » doré (logo + titres) */
@media (max-width: 575.98px) {
  .brand-logo { height: 32px; width: 32px; }
  .brand-name { font-size: 1.3rem; letter-spacing: 1px; }
}

/* Liens de nav */
.site-header .nav-link {
  color: var(--ink-soft); font-weight: 500; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; min-height: 44px;
}
.site-header .nav-link:hover, .site-header .nav-link:focus { color: var(--ink); }
.site-header .nav-link.active { color: var(--accent-hi); }
/* Sous-menu « À propos » — dropdown sur le thème sombre. */
.site-header .dropdown-menu {
  background: rgba(12,18,24,.98); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-3); padding: var(--s-1); margin-top: 6px;
}
.site-header .dropdown-item {
  color: var(--ink-soft); font-weight: 500; border-radius: var(--radius-sm); padding: 8px 12px; white-space: normal;
}
.site-header .dropdown-item:hover, .site-header .dropdown-item:focus { background: rgba(255,255,255,.05); color: var(--ink); }
.site-header .dropdown-item.active, .site-header .dropdown-item:active { background: rgba(200,162,74,.16); color: var(--accent-hi); }
/* Bascule de langue — segmented FR | EN, doré gravé sur le thème sombre. */
.lang-toggle {
  display: inline-flex; align-items: center;
  padding: var(--s-1); border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: rgba(255,255,255,.03); box-shadow: var(--shadow-inset);
}
.site-header .lang-toggle .lang-opt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; padding: var(--s-1) var(--s-3); border-radius: var(--radius-pill);
  font-family: var(--font); font-size: .8rem; font-weight: 700; letter-spacing: 1px;
  line-height: 1; text-decoration: none; color: var(--ink-soft);
  transition: color var(--transition), background var(--transition);
}
.site-header .lang-toggle .lang-opt:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.site-header .lang-toggle .lang-opt.is-active,
.site-header .lang-toggle .lang-opt.is-active:hover {
  color: #1a130a; cursor: default;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  box-shadow: 0 1px 3px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.28);
}
/* Bouton Enterrer du header un peu plus compact. */
.site-header .btn-cta { min-height: 38px; padding: 8px 16px; font-size: .95rem; }

/* Bouton burger (toggler) thémé */
.site-header .navbar-toggler {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0;
  width: 44px; height: 44px; flex: 0 0 auto;
}
.site-header .navbar-toggler:focus { box-shadow: var(--focus-ring); }
.site-header .navbar-toggler-icon { width: 22px; height: 22px; }
/* Burger masqué en desktop (la nav s'affiche en ligne dès md). */
@media (min-width: 768px) { .site-header .navbar-toggler { display: none; } }
.site-header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23e7eae3' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* Menu mobile : panneau flottant sous l'en-tête (ne déplace pas le logo/burger) */
@media (max-width: 767.98px) {
  .site-header .navbar { position: relative; }
  .site-header .navbar-collapse {
    position: absolute; top: calc(100% + 8px); left: var(--s-3); right: var(--s-3);
    padding: var(--s-3); margin-bottom: var(--s-4);
    background: rgba(12,18,24,.98); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow-3); z-index: var(--z-nav);
  }
  .site-header .navbar-nav { gap: 2px; }
  .site-header .nav-link { padding: 11px 8px; }
}

/* ---------- Layout ---------- */
.site-main { flex: 1 0 auto; overflow-x: clip; }   /* pousse le footer en bas + coupe tout débordement horizontal */
.site-footer { flex-shrink: 0; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-4); }

/* ---------- Hero ---------- */
.hero { max-width: 760px; margin: 0 auto; padding: var(--s-6) var(--s-4) var(--s-3); text-align: center; }
.hero h1 { font-size: clamp(1.9rem, 7vw, 3.1rem); margin: 0 0 var(--s-3); }
.hero .lead { color: var(--ink-soft); font-size: clamp(1rem, 3.4vw, 1.18rem); margin: 0 auto; max-width: 56ch; }
/* Bandeau promo « gratuit jusqu'au … » dans le hero d'accueil (période de gratuité). */
.hero-promo {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 auto var(--s-4); padding: 7px 16px 8px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  color: #1a130a; font-weight: 800; font-size: clamp(.82rem, 2.6vw, .98rem);
  letter-spacing: .015em; line-height: 1.1;
  box-shadow: var(--glow);
  position: relative; overflow: hidden;
}
.hero-promo-ico { font-size: 1.05em; }
.hero-promo::after {            /* reflet doré qui balaie le badge */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  transform: translateX(-130%); animation: heroPromoShine 3.4s ease-in-out infinite;
}
@keyframes heroPromoShine {
  0%, 55% { transform: translateX(-130%); }
  100%    { transform: translateX(130%); }
}
@media (prefers-reduced-motion: reduce) { .hero-promo::after { animation: none; opacity: 0; } }
.count { margin-top: var(--s-4); color: var(--ink-soft); font-size: .98rem; }
.count strong { color: var(--accent-hi); font-size: 1.25rem; font-family: var(--font); }

/* Nombre de tombes gravé dans une petite stèle (compact, inline) */
.count { display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.count-tomb {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 10px;
  background: linear-gradient(180deg, #d9dfd2, #b3bba9);
  border: 2px solid #b7bfb0; border-bottom-width: 3px; border-bottom-color: #97a092;
  border-radius: 20px 20px 5px 5px;
  font-family: var(--font); font-weight: 700; font-size: 1.05rem; line-height: 1;
  color: #2c352d; text-shadow: 0 1px 0 rgba(255,255,255,.45);
}

/* ---------- Carte cimetière ---------- */
.cemetery-map {
  /* Hauteur adaptative : remplit la fenêtre moins l'en-tête, le hero et le
     bandeau → évite le scroll vertical de la page. */
  height: clamp(300px, calc(100svh - 430px), 680px);
  margin: var(--s-4) auto var(--s-2); max-width: 1320px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #10171f; box-shadow: var(--shadow-3);
  overflow: hidden;               /* rogne le décor au cadre de la carte */
}
.map-hint { text-align: center; color: var(--ink-dim); font-size: .88rem; margin: var(--s-2) var(--s-4) 0; }
.cem-discover-link { text-align: center; margin: 6px var(--s-4) 0; }
.cem-discover-link a { color: var(--accent-hi); font-size: .9rem; font-family: var(--font); }
.cem-discover-link a:hover { color: var(--ink); }
.cemetery-map .reset-zoom { margin-top: 8px; }
.cemetery-map .reset-zoom a { font-size: 18px; font-weight: 700; }
/* Mobile : carte affichée en grand directement (plus de bouton « agrandir »). */
@media (max-width: 767.98px) { .cemetery-map { height: 76svh; } }

/* Affordance tactile transitoire : « deux doigts pour bouger » (au-dessus de la
   carte, sous le voile de popup z 1100 et la fiche z 1200). */
.cemetery-map .map-touch-hint {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  z-index: 1090; pointer-events: none; max-width: calc(100% - 24px);
  padding: var(--s-2) var(--s-3); border-radius: var(--radius-pill); white-space: nowrap;
  font-size: .78rem; color: var(--ink, #e8eef5);
  background: rgba(8,12,16,.82); border: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
  opacity: 0; animation: mapTouchHintIn .35s ease forwards;
  transition: opacity .6s ease;
}
.cemetery-map .map-touch-hint.is-out { opacity: 0; }
@keyframes mapTouchHintIn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .cemetery-map .map-touch-hint { animation: none; opacity: 1; transition: none; }
}

/* Minimap de navigation (bas droite de la carte) */
.cem-minimap {
  position: relative; cursor: crosshair;
  border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
  background-color: #0c1218;
  background-position: center; background-size: 100% 100%; background-repeat: no-repeat;
  box-shadow: var(--shadow-2);
  opacity: .92; transition: opacity var(--transition);
}
.cem-minimap:hover { opacity: 1; }
.cem-minimap::after {   /* léger voile pour faire ressortir le rectangle */
  content: ""; position: absolute; inset: 0; background: rgba(12,18,24,.36); pointer-events: none;
}
/* Rectangle = zone visible. Pas de box-shadow géant (9999px = repaint coûteux à
   chaque frame) ni de transition sur left/top/width/height (le JS les réécrit
   chaque frame → la transition ne ferait que retarder/saccader le suivi). */
.cem-minimap-vp {
  position: absolute; box-sizing: border-box; z-index: 1;
  border: 2px solid var(--accent-hi);
  background: rgba(224,189,99,.16);
  border-radius: 6px; pointer-events: none;     /* petit arrondi, comme la vignette parente */
}
.cem-minimap-full { opacity: .45; }              /* discrète quand on voit déjà tout */

/* ---------- Sélecteur de cimetière (onglets, partagé accueil + enterrer) ---------- */
/* Pilule sombre type .lang-toggle, pleine largeur, défilable sur mobile (pas de
   wrap pour garder une ligne nette), bords fondus comme le bandeau. */
.map-tabs {
  display: flex; gap: 4px; align-items: center;
  max-width: 1320px; margin: var(--s-4) auto var(--s-2); padding: 7px 6px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: rgba(255,255,255,.03); box-shadow: var(--shadow-inset);
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.map-tabs::-webkit-scrollbar { display: none; }
.map-tab {
  flex: 0 0 auto; scroll-snap-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 32px; padding: 5px 18px; border: 0; border-radius: var(--radius-pill);
  background: none; cursor: pointer; white-space: nowrap;
  font-family: var(--font); font-size: .9rem; font-weight: 700; letter-spacing: .6px;
  line-height: 1; color: var(--ink-soft);
  transition: color var(--transition), background var(--transition);
}
.map-tab:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.map-tab.is-active,
.map-tab.is-active:hover {
  color: #1a130a; cursor: default;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  box-shadow: 0 1px 3px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.28);
}
.map-tab:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
@media (max-width: 575.98px) { .map-tab { padding: 5px 14px; font-size: .84rem; } }
/* Nom du cimetière sélectionné, sous la carte du formulaire. */
.bury-map-name { margin: 8px 0 0; font-size: .9rem; color: var(--ink-dim); text-align: center; }

/* Bandeau défilant des tombes (sous la carte) */
.grave-ticker:empty { display: none; }   /* vide (rempli en JS par carte) → pas de pilule fantôme */
.grave-ticker {
  margin-top: var(--s-3); overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--bg-2); box-shadow: var(--shadow-1);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker-track { display: flex; width: max-content; animation: ticker linear infinite; }
.grave-ticker:hover .ticker-track,
.grave-ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-group { display: flex; flex-shrink: 0; }
.ticker-item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: var(--s-2) var(--s-5); white-space: nowrap; font-size: .9rem;
  border-right: 1px solid var(--line-soft);
}
.ti-emoji { font-size: 1rem; }
.ti-name { color: var(--ink); font-family: var(--font); letter-spacing: .3px; }
.ti-name:hover { color: var(--accent-hi); }
.ti-link { color: var(--accent-hi); text-decoration: none; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .grave-ticker { overflow-x: auto; }
}

/* Popups au-dessus des marqueurs/décor. */
.cemetery-map .leaflet-popup-pane { z-index: 700; }
/* Popup positionné par notre JS (nord/sud/est/ouest) : pas de pointe ni de marge. */
.cemetery-map .leaflet-popup.pop-placed { margin: 0; }
.cemetery-map .leaflet-popup.pop-placed .leaflet-popup-tip-container { display: none; }

/* Carte de sélection d'emplacement (formulaire d'enterrement) */
.bury-map {
  height: 300px; width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #10171f; overflow: hidden; cursor: crosshair;
  box-shadow: var(--shadow-2);
}
.bury-map .leaflet-marker-draggable { cursor: grab; }
/* Tombes déjà posées (repère) : MINI pierres grisées et « traversables »
   (clics → carte). Les variables --t* réduisent la pierre (sync iconSize JS 22×28). */
.bury-map .tomb-ghost { opacity: .42; --tw: 22px; --th: 28px; --tth: 21px; --tsvg: 11px; --trad: 11px; --tfs: .34rem; }
.bury-map .tomb-ghost .tomb { pointer-events: none; }
.bury-map .tomb-ghost .tomb::after { display: none; }
.map-cta { text-align: center; padding: var(--s-5) var(--s-4) var(--s-7); }

/* Pierres tombales (marqueurs) */
/* Zone de survol/clic limitée à la pierre visible (pas au div 44×52 vide). */
.tomb-icon { background: none; border: none; pointer-events: none; }
/* Dimensions des pierres en variables (synchronisées avec l'iconSize JS).
   Défaut = PC (un peu plus petites qu'avant) ; .tombs-sm = mobile (plus petites). */
.cemetery-map { --tw: 32px; --th: 40px; --tth: 30px; --tsvg: 17px; --trad: 16px; --tfs: .46rem; }
.cemetery-map.tombs-sm { --tw: 26px; --th: 33px; --tth: 25px; --tsvg: 14px; --trad: 13px; --tfs: .4rem; }
.tomb { pointer-events: auto; position: relative;
  display: flex; flex-direction: column; align-items: center;
  width: var(--tw, 32px); height: var(--th, 40px);
  transform-origin: 50% 100%; transition: transform var(--transition-snap); }
/* Ombre portée sur les DEUX pierres (box-shadow composite) plutôt qu'un
   filter: drop-shadow sur chaque marqueur (qui force un calque + repaint à
   chaque pan/zoom et ne tient pas la montée en charge). */
/* Pastille de clic invisible : agrandit la zone tactile à ~44px sans changer la
   pierre dessinée (WCAG 2.5.8). pointer-events hérité de .tomb, pas de fond. */
.tomb::after { content: ""; position: absolute; inset: -7px; }
.tombs-sm .tomb::after { inset: -9px; }
.tomb-top { line-height: 1; background: var(--stone); color: #1a130a;
  width: var(--tw, 32px); height: var(--tth, 30px);
  border-radius: var(--trad, 16px) var(--trad, 16px) 5px 5px; display: flex; align-items: center; justify-content: center;
  border: 2px solid #aeb6a8; border-bottom: none; box-shadow: 0 3px 3px -1px rgba(0,0,0,.5); }
.tomb-body { font-family: var(--font); font-size: var(--tfs, .46rem); font-weight: 700; letter-spacing: 1px; color: #3d3729;
  background: var(--stone); width: var(--tw, 32px); flex: 1; display: flex; align-items: center; justify-content: center;
  text-align: center; border: 2px solid #aeb6a8; border-top: none; border-radius: 0 0 3px 3px; box-shadow: 0 4px 3px -2px rgba(0,0,0,.55); }
.tomb-top .tomb-svg { width: var(--tsvg, 17px); height: var(--tsvg, 17px); }
.tomb-icon:hover .tomb, .tomb-icon:focus-visible .tomb { transform: scale(1.12); }
/* Dernière tombe ajoutée : pierre agrandie + halo doré (un seul marqueur / carte,
   donc le filter drop-shadow reste sans coût notable). */
.tomb-icon.is-latest { z-index: 1000; }
.tomb-icon.is-latest .tomb { transform: scale(1.7); filter: drop-shadow(0 0 6px rgba(200,162,74,.85)); }
.tomb-icon.is-latest:hover .tomb, .tomb-icon.is-latest:focus-visible .tomb { transform: scale(1.8); }
@media (prefers-reduced-motion: no-preference) {
  .tomb-icon.is-latest .tomb { animation: latestGlow 2.4s ease-in-out infinite; }
}
@keyframes latestGlow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(200,162,74,.55)); }
  50%      { filter: drop-shadow(0 0 9px rgba(200,162,74,.95)); }
}
.tomb-cluster div { background: linear-gradient(180deg, var(--accent-hi), var(--accent)); color: #1a130a;
  width: 48px; height: 48px; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: var(--font-ui); border: 3px solid #e6c878; box-shadow: var(--shadow-2); }

/* Popups Leaflet */
.grave-popup .leaflet-popup-content-wrapper { background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  /* halo blanc léger autour du popup */
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 0 22px rgba(255,255,255,.14), var(--shadow-3); }
.grave-popup .leaflet-popup-tip { background: var(--panel); }
.grave-pop { text-align: center; font-family: var(--font-ui); padding: 4px 2px; }
/* Badge « fraîchement enterrée » dans la popup de la dernière tombe ajoutée. */
.pop-latest {
  display: inline-block; margin: 0 auto 6px; padding: 2px 11px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  color: #1a130a; font-size: .64rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  box-shadow: 0 2px 8px rgba(200,162,74,.3);
}
.pop-icon { margin-bottom: 2px; }
.pop-icon img { width: 32px; height: 32px; display: inline-block; }
.pop-rip { color: var(--ink-soft); font-size: .68rem; letter-spacing: 3px; }
.pop-name { font-family: var(--font); font-size: 1.15rem; font-weight: 700; margin: 4px 0; }
.pop-dates { color: var(--ink-soft); font-size: .8rem; }
.pop-epitaph { font-style: italic; margin: 8px 0; }
.pop-by { color: var(--ink-soft); font-size: .8rem; }
.pop-link { margin-top: 8px; font-size: .85rem; word-break: break-word; }
.pop-link a { color: var(--accent-hi); }
/* bougies + bouton sur une ligne, 2 colonnes */
.pop-actions { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; margin-top: 10px; }
.pop-candles { font-size: .8rem; color: var(--ink-soft); white-space: nowrap; text-align: left; }
.pop-btn { display: inline-flex; min-height: 30px; padding: 5px 12px; font-size: .8rem; width: 100%; }
/* Leaflet force le bleu sur les liens (.leaflet-container a) : on repasse devant. */
.cemetery-map .leaflet-popup a { color: var(--accent-hi); }
.cemetery-map .leaflet-popup a.pop-btn,
.cemetery-map .leaflet-popup a.pop-btn:hover { color: #1a130a; }

/* Popup maison : enfant direct du conteneur (#cemetery), donc HORS du calque
   carte (qui a un transform). Il peut ainsi passer AU-DESSUS des contrôles
   (minimap, zoom : z-index 1000) sans qu'on ait à les masquer. */
.cemetery-map { position: relative; }
.cemetery-map .grave-pop-box {
  position: absolute; z-index: 1200;
  width: 260px; max-width: calc(100% - 20px);
  color: var(--ink);
  /* Pierre tombale : arche arrondie en haut + dégradé « pierre ». */
  background: linear-gradient(180deg, var(--panel-2), var(--panel) 42%);
  border: 1px solid var(--line); border-radius: 44px 44px 14px 14px;
  padding: var(--s-5) var(--s-4) var(--s-3);
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 0 22px rgba(255,255,255,.14), var(--shadow-3);
  animation: gpIn .12s ease;
}
/* Cadre gravé : fin liseré intérieur qui suit l'arche, comme une stèle. */
.cemetery-map .grave-pop-box::before {
  content: ""; position: absolute; inset: 7px;
  border: 1px solid rgba(255,255,255,.10); border-radius: 38px 38px 9px 9px;
  pointer-events: none;
}
@keyframes gpIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.cemetery-map .gp-close {
  position: absolute; top: 14px; right: 13px;
  background: none; border: 0; color: var(--ink-soft);
  font-size: 19px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: var(--radius-sm);
}
.cemetery-map .gp-close:hover { color: var(--accent-hi); background: rgba(255,255,255,.05); }
/* Flèches de navigation tombe précédente / suivante : sur les bords gauche/droit
   de la stèle, centrées verticalement. */
.cemetery-map .gp-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--panel-2); color: var(--ink);
  font-size: 16px; line-height: 1; cursor: pointer;
  box-shadow: var(--shadow-1); transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.cemetery-map .gp-nav:hover { background: var(--accent); color: #1a130a; border-color: var(--accent); }
.cemetery-map .gp-prev { left: -13px; }
.cemetery-map .gp-next { right: -13px; }
.cemetery-map .grave-pop-box a { color: var(--accent-hi); }
.cemetery-map .grave-pop-box a.pop-btn,
.cemetery-map .grave-pop-box a.pop-btn:hover { color: #1a130a; }

/* Tooltip maison (résumé au survol) : même principe, au-dessus des contrôles. */
.cemetery-map .grave-tip-box {
  position: absolute; z-index: 1150; pointer-events: none;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-2); padding: var(--s-2) var(--s-3);
  min-width: 160px; max-width: 240px; white-space: normal; text-align: center;
  font-family: var(--font-ui); animation: gpIn .1s ease;
}
.cemetery-map .grave-tip-box .tip-name {
  display: block; font-family: var(--font); font-weight: 700; font-size: .95rem; color: var(--ink);
}

/* Tooltip au survol d'une tombe (extrait) */
.leaflet-tooltip.grave-tip {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-2); padding: var(--s-2) var(--s-3);
  min-width: 200px; max-width: 260px; white-space: normal; text-align: center;
  font-family: var(--font-ui); pointer-events: none !important;   
}
.grave-tip .tip-name { display: block; font-family: var(--font); font-weight: 700; font-size: .95rem; color: var(--ink); }
.leaflet-tooltip.grave-tip.leaflet-tooltip-top::before { border-top-color: var(--panel); }
.leaflet-tooltip.grave-tip.leaflet-tooltip-bottom::before { border-bottom-color: var(--panel); }
.leaflet-tooltip.grave-tip.leaflet-tooltip-left::before { border-left-color: var(--panel); }
.leaflet-tooltip.grave-tip.leaflet-tooltip-right::before { border-right-color: var(--panel); }
.leaflet-tooltip.grave-tip.tip-shift::before { display: none; }   /* flèche masquée si recalé */

 

/* Flou léger du décor de la carte quand une popup est ouverte (popup nette). */
/* Fiche ouverte : on n'applique plus de flou (coûteux + flou désagréable) ; on
   assombrit le cimetière avec une ombre interne (vignette) pour faire ressortir
   la fiche. Le voile est SOUS la fiche (z 1100 < 1200) et ne bloque pas les clics. */
.cemetery-map::after {
  content: ""; position: absolute; inset: 0; z-index: 1100; pointer-events: none;
  border-radius: inherit; opacity: 0; transition: opacity var(--transition-slow);
  background: radial-gradient(120% 120% at 50% 45%, rgba(6,9,12,.30), rgba(6,9,12,.62));
  box-shadow: inset 0 0 110px 36px rgba(0,0,0,.6);
}
.cemetery-map.popup-open::after { opacity: 1; }

/* ---------- Liste des tombes (cartes + scroll infini) ---------- */
.grave-grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.grave-card-item {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--panel-2), #161f27);
  border: 1px solid var(--line); border-radius: 16px 16px 10px 10px;
  box-shadow: var(--shadow-2);
  transition: transform var(--transition-snap), border-color var(--transition), box-shadow var(--transition);
}
.grave-card-item:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--glow); }
.gc-main { display: block; padding: var(--s-5) var(--s-4) var(--s-3); color: var(--ink); flex: 1; }
.gc-main:hover { color: var(--ink); text-decoration: none; }
.gc-head { display: flex; align-items: center; gap: 8px; color: var(--ink-dim); font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; }
.gc-emoji { font-size: 1.1rem; }
.gc-name { font-family: var(--font); font-size: 1.3rem; font-weight: 700; margin: 8px 0 4px; overflow-wrap: anywhere; }
.gc-dates { color: var(--ink-soft); font-size: .85rem; }
.gc-epitaph { font-family: var(--font); font-style: italic; color: var(--ink); margin: var(--s-3) 0 0;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.gc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line-soft); color: var(--ink-soft); font-size: .85rem; }
.gc-by { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-meta { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin-left: auto; }
.gc-link { color: var(--accent-hi); text-decoration: none; }

/* Bougie cliquable sur la carte (allumer depuis la liste). */
.gc-candle {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  margin: -3px -2px; padding: 3px 6px; border: 0; background: none; cursor: pointer;
  color: inherit; font: inherit; line-height: 1; border-radius: var(--radius-sm);
  transition: transform var(--transition-snap), background var(--transition);
}
.gc-candle:hover { background: rgba(200,162,74,.12); transform: scale(1.05); }
.gc-candle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.gc-candle-ico { font-size: 1rem; transition: filter var(--transition); }
.gc-candle:hover .gc-candle-ico { filter: drop-shadow(0 0 5px rgba(224,189,99,.85)); }
.gc-candle-n { color: var(--accent-hi); font-weight: 700; }
/* État « déjà allumée » : flamme dorée figée, non cliquable. */
.gc-candle.is-lit { cursor: default; }
.gc-candle.is-lit .gc-candle-ico { filter: drop-shadow(0 0 5px rgba(224,189,99,.95)); }
.gc-candle.is-lit:hover { background: none; transform: none; }

/* Tooltip perso (« Allumer une bougie ») — ancré en haut-droite pour rester
   dans la carte malgré son overflow:hidden. */
.gc-candle::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 9px); right: 0; z-index: 6;
  background: var(--bg-2); color: var(--ink); border: 1px solid var(--line);
  padding: 5px 10px; border-radius: var(--radius-sm); font-size: .78rem; font-weight: 600;
  white-space: nowrap; box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}
.gc-candle::before {   /* petite flèche sous le tooltip, au-dessus de la flamme */
  content: ""; position: absolute; bottom: calc(100% + 4px); right: 11px; z-index: 6;
  border: 5px solid transparent; border-top-color: var(--line);
  opacity: 0; transition: opacity .14s ease;
}
.gc-candle:hover::after, .gc-candle:focus-visible::after { opacity: 1; transform: translateY(0); }
.gc-candle:hover::before, .gc-candle:focus-visible::before { opacity: 1; }

/* Top bougies — grandes cartes complètes */
.top-cards { list-style: none; margin: 0 auto; padding: 0; max-width: 760px;
  display: flex; flex-direction: column; gap: var(--s-5); }
.top-card {
  position: relative; display: flex; gap: var(--s-4);
  background: linear-gradient(180deg, var(--panel-2), #161f27);
  border: 1px solid var(--line); border-radius: 18px 18px 12px 12px;
  padding: var(--s-5); box-shadow: var(--shadow-2);
  transition: transform var(--transition-snap), border-color var(--transition), box-shadow var(--transition);
}
.top-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--glow); }
/* Médaille de rang */
.tc-rank {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font); font-weight: 700; font-size: 1.5rem;
  background: var(--bg-soft); color: var(--ink-soft); border: 1px solid var(--line);
}
.top-card.rank-1 .tc-rank { background: linear-gradient(180deg,#e9c45a,#c8a24a); color:#1a130a; border-color:#e6c878; box-shadow: var(--glow); }
.top-card.rank-2 .tc-rank { background: linear-gradient(180deg,#d7dbe0,#aab2bb); color:#1a130a; border-color:#e2e6ea; }
.top-card.rank-3 .tc-rank { background: linear-gradient(180deg,#cf9a6a,#b07a4d); color:#1a130a; border-color:#e0b48a; }

.tc-content { flex: 1; min-width: 0; }
/* Titre à gauche + bougies en haut à droite, alignés sur la même ligne. */
.tc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.tc-cat { color: var(--ink-dim); font-size: .82rem; text-transform: uppercase; letter-spacing: 1px; }
/* Icône de catégorie : épinglée en bas à droite de la carte (décorative). */
.tc-emoji { position: absolute; right: var(--s-5); bottom: var(--s-5); font-size: 1.1rem; line-height: 1; opacity: .9; }
.tc-candles { flex: 0 0 auto; color: var(--ink-soft); font-size: .9rem; white-space: nowrap; padding-top: 4px; }
.tc-candles strong { color: var(--accent-hi); font-size: 1.25rem; font-family: var(--font); }
.tc-name { flex: 1; min-width: 0; font-family: var(--font); font-size: clamp(1.4rem, 4vw, 1.9rem); font-weight: 700; margin: 0 0 4px; overflow-wrap: anywhere; }
.tc-dates { color: var(--ink-soft); }
.tc-epitaph { font-family: var(--font); font-style: italic; font-size: 1.15rem; color: var(--ink);
  margin: var(--s-4) 0; padding-left: var(--s-3); border-left: 3px solid var(--line); overflow-wrap: anywhere; }
.tc-author { color: var(--ink-soft); font-size: .9rem; }
.tc-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }

@media (max-width: 520px) {
  .top-card { padding: var(--s-4); gap: var(--s-3); flex-direction: column; }
  .tc-rank { width: 44px; height: 44px; font-size: 1.25rem; }
  .tc-actions .btn { width: 100%; }
  /* Carte en colonne : l'icône repasse dans le flux, alignée en bas à droite,
     pour ne pas chevaucher les boutons pleine largeur. */
  .tc-emoji { position: static; align-self: flex-end; }
}

.list-status { text-align: center; padding: var(--s-6) var(--s-4) 0; color: var(--ink-dim); }
.list-end { font-family: var(--font); font-style: italic; }
.list-empty { text-align: center; color: var(--ink-soft); padding: var(--s-7) var(--s-4); }

/* ---------- Contenu texte ---------- */
.content { max-width: 68ch; margin: 0 auto; padding: var(--s-6) var(--s-4) var(--s-8); }
.content h1 { font-size: clamp(1.7rem, 6vw, 2.3rem); margin-bottom: var(--s-4); }
.content h2 { font-size: 1.3rem; margin: var(--s-6) 0 var(--s-2); color: var(--accent-2); }
.content p { color: var(--ink); }

/* ---------- Page « À propos » ---------- */
.about { padding-bottom: var(--s-7); }
.about > section { margin-top: var(--s-7); }
.about h2 { font-family: var(--font); font-size: clamp(1.4rem, 4.4vw, 1.85rem); }

/* Bandeau image partagé (about, contact, listes, formulaire, mentions…),
   calqué sur la page cimetière (.cem-hero) pour la cohérence visuelle. */
.page-hero, .about-hero, .contact-hero {
  position: relative; text-align: center;
  background-size: cover; background-position: center; background-color: #0c1218;
  padding: clamp(64px, 13vw, 130px) var(--s-4) clamp(40px, 8vw, 72px);
}
.page-hero::before, .about-hero::before, .contact-hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,12,16,.5), rgba(8,12,16,.6) 45%, rgba(8,12,16,.92));
}
.page-hero-inner, .about-hero-inner, .contact-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.page-eyebrow, .about-eyebrow, .contact-eyebrow { letter-spacing: 3px; text-transform: uppercase; font-size: .78rem; color: var(--ink-soft); margin: 0 0 var(--s-3); }
.page-hero h1, .about-hero h1, .contact-hero h1 { font-size: clamp(2rem, 7vw, 3.2rem); margin: 0 0 var(--s-2); text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.page-hero .lead, .about-hero .lead, .contact-hero .lead { color: var(--ink-soft); font-size: clamp(1.05rem, 3.2vw, 1.32rem); max-width: 44ch; margin: 0 auto; line-height: 1.6; }
.page-hero .count { margin-top: var(--s-3); }
.page-hero { margin-bottom: var(--s-6); }   /* about/contact gèrent leur propre espacement */

.about-intro { max-width: 680px; }
.about-intro p { color: var(--ink); font-size: 1.1rem; line-height: 1.8; margin-bottom: var(--s-3); }
.about-intro p:last-child { margin-bottom: 0; }

.about-block { max-width: 920px; }
.about-block > h2 { text-align: center; margin-bottom: var(--s-5); }

/* Étapes « comment ça marche » */
.about-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: grid; gap: var(--s-3); }
.about-step { display: flex; gap: var(--s-4); align-items: flex-start;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-4) var(--s-5); box-shadow: var(--shadow-1);
  transition: transform var(--transition-snap), border-color var(--transition); }
.about-step:hover { transform: translateY(-2px); border-color: var(--accent); }
.about-step-n { flex: none; width: 40px; height: 40px; border-radius: var(--radius-pill);
  display: grid; place-items: center; font-family: var(--font); font-weight: 700; font-size: 1.1rem;
  color: #1a130a; background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 3px rgba(0,0,0,.4); }
.about-step-body h3 { margin: 6px 0 4px; font-size: 1.12rem; }
.about-step-body p { margin: 0; color: var(--ink-soft); line-height: 1.6; }

/* Cartes pourquoi / bougies / règles */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.about-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-5); box-shadow: var(--shadow-1); }
.about-card h2 { text-align: left; font-size: 1.3rem; margin: 0 0 var(--s-3); }
.about-card p { color: var(--ink-soft); line-height: 1.75; margin: 0 0 var(--s-2); }
.about-card p:last-child { margin-bottom: 0; }
.about-card-ico { filter: drop-shadow(0 0 8px rgba(224,189,99,.5)); }
.about-card--candles { background: linear-gradient(180deg, var(--panel-2), var(--panel) 60%); }
.about-card--wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .about-grid { grid-template-columns: 1fr; } }

/* FAQ (accordéon natif) */
.about-faq { max-width: 760px; }
.faq-list { display: grid; gap: var(--s-2); }
.faq-item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 var(--s-4); }
.faq-item summary { cursor: pointer; list-style: none; padding: var(--s-3) 0;
  font-family: var(--font); font-weight: 600; font-size: 1.05rem; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; color: var(--accent-hi); font-size: 1.4rem; line-height: 1; transition: transform var(--transition); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--accent-hi); }
.faq-item > p { margin: 0 0 var(--s-3); color: var(--ink-soft); line-height: 1.75; }

/* Appel final */
.about-cta { text-align: center; max-width: 620px; padding: var(--s-6) var(--s-4);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: radial-gradient(120% 130% at 50% 0%, rgba(200,162,74,.12), transparent 65%), var(--panel); }
.about-cta h2 { margin: 0 0 var(--s-2); }
.about-cta p { color: var(--ink-soft); margin: 0 0 var(--s-4); }
/* Encadré « tourner la page » en bas de l'accueil (hors .container : on centre). */
.home-moveon-cta { margin: var(--s-6) auto 0; }

/* ---------- Page « tourner la page » (psychologie / SEO) ---------- */
/* Largeur container-xxl (Bootstrap = 1320px, centré) au lieu des bandes étroites
   héritées de .about (qui écrasaient .container-xxl car chargées après Bootstrap).
   Scopé à .moveon pour ne pas toucher la page « à propos » qui partage ces classes.
   La CTA garde son encadré focal plus resserré. */
.moveon .about-intro,
.moveon .about-block,
.moveon .about-faq,
.moveon-section { max-width: 1320px; }
.moveon-pillars { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .moveon-pillars { grid-template-columns: 1fr; } }
.moveon .about-card h3 { text-align: left; font-family: var(--font); font-weight: 700; font-size: 1.15rem; color: var(--ink); margin: 0 0 var(--s-2); }
.moveon-section > h2 { text-align: left; }
.moveon-section p { color: var(--ink); font-size: 1.05rem; line-height: 1.8; margin: 0 0 var(--s-3); }
.moveon-section p:last-child { margin-bottom: 0; }
/* Encadré « et si c'est plus lourd » : ton plus doux, liseré accent. */
.moveon-care { border-left: 3px solid var(--accent); }
.moveon-care h2 { text-align: left; font-size: 1.2rem; margin: 0 0 var(--s-3); }
.moveon-care p { margin: 0; }

/* ---------- Page contact (raisons d'écrire + note de réponse) ---------- */
.contact-reasons { list-style: none; padding: 0; margin: 0 0 var(--s-5); display: grid; gap: var(--s-2); }
.contact-reasons li { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--s-3) var(--s-4); }
.contact-reasons strong { display: block; font-family: var(--font); color: var(--ink); margin-bottom: 2px; }
.contact-reasons span { color: var(--ink-soft); }
.contact-response { color: var(--ink-soft); font-size: .92rem; margin-top: var(--s-4); }

/* ---------- Page-histoire d'un cimetière ---------- */
.cem-page { padding-bottom: var(--s-7); }
.cem-hero {
  position: relative; text-align: center;
  background-size: cover; background-position: center; background-color: #0c1218;
  padding: clamp(64px, 13vw, 130px) var(--s-4) clamp(40px, 8vw, 72px);
  margin-bottom: var(--s-6);
}
.cem-hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,12,16,.5), rgba(8,12,16,.6) 45%, rgba(8,12,16,.92));
}
.cem-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.cem-eyebrow { letter-spacing: 3px; text-transform: uppercase; font-size: .78rem; color: var(--ink-soft); margin: 0 0 var(--s-3); }
.cem-hero h1 { font-size: clamp(2rem, 7vw, 3.2rem); margin: 0 0 var(--s-2); text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.cem-hero .lead { color: var(--ink-soft); font-size: clamp(1.05rem, 3.2vw, 1.32rem); max-width: 44ch; margin: 0 auto var(--s-3); line-height: 1.6; }
.cem-count { color: var(--accent-hi); font-family: var(--font); font-size: 1rem; margin: 0 0 var(--s-4); }

.cem-story { max-width: 720px; }
.cem-story p { color: var(--ink); font-size: 1.1rem; line-height: 1.8; margin-bottom: var(--s-3); }
.cem-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-5); }

.cem-others { max-width: 980px; margin-top: var(--s-7); }
.cem-others h2 { text-align: center; font-family: var(--font); font-size: clamp(1.4rem, 4.4vw, 1.85rem); margin-bottom: var(--s-4); }
.cem-others-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); }
.cem-other-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 160px; padding: var(--s-4); border-radius: var(--radius); overflow: hidden;
  background-size: cover; background-position: center; text-decoration: none;
  border: 1px solid var(--line); box-shadow: var(--shadow-2);
  transition: transform var(--transition-snap), border-color var(--transition);
}
.cem-other-card::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,12,16,.15), rgba(8,12,16,.9));
}
.cem-other-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.cem-other-name { position: relative; font-family: var(--font); font-weight: 700; font-size: 1.2rem; color: var(--ink); }
.cem-other-lead { position: relative; color: var(--ink-soft); font-size: .9rem; margin-top: 3px; line-height: 1.4; }

/* ---------- Formulaire d'enterrement ---------- */
.bury-head { text-align: center; padding: var(--s-6) var(--s-4) 0; }
.bury-head h1 { font-size: clamp(1.7rem, 6vw, 2.3rem); margin: 0 0 var(--s-2); }
.bury-head p { color: var(--ink-soft); margin: 0; }

/* La grille du formulaire est gérée par Bootstrap (.row/.col). */
.field { margin-bottom: var(--s-4); }
.field label { display: block; font-size: .9rem; color: var(--ink-soft); margin-bottom: 6px; font-weight: 500; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 48px; padding: var(--s-3) var(--s-4); background: var(--bg-soft); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font-ui); font-size: 1rem;
  transition: border-color var(--transition), box-shadow var(--transition); }
.field textarea { min-height: 110px; resize: vertical; }   /* police UI lisible (pas Cinzel, qui n'a que des capitales) */
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--focus-ring-soft); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-dim); }

/* ---------- Champs Bootstrap, thémés (formulaires enterrement + contact) ---------- */
.form-label { display: block; font-size: .9rem; color: var(--ink-soft); font-weight: 500; margin-bottom: 6px; }
.form-control, .form-select {
  width: 100%; min-height: 48px; padding: var(--s-3) var(--s-4);
  background-color: var(--bg-soft); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-size: 1rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
textarea.form-control { min-height: 110px; resize: vertical; }   /* police UI lisible (pas Cinzel, qui n'a que des capitales) */
.form-control:focus, .form-select:focus {
  background-color: var(--bg-soft); color: var(--ink);
  border-color: var(--accent); box-shadow: var(--focus-ring-soft); outline: none;
}
.form-control::placeholder { color: var(--ink-dim); }
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23aab6ac' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 14px;
}
.form-select option { background: var(--panel); color: var(--ink); }
/* État invalide + message sous le champ */
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--danger); box-shadow: none; background-image: none; }
.form-select.is-invalid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23aab6ac' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}
.invalid-feedback { width: 100%; margin-top: 5px; font-size: .85rem; color: var(--danger); }
/* Alertes (erreur générale / succès) */
.alert { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: var(--s-4); border: 1px solid transparent; }
.alert-danger  { background: #2a1c18; border-color: var(--danger); color: #f0c9bd; }
.alert-success { background: #1b2a1e; border-color: var(--accent-2); color: #cfe6cb; }

/* Grille d'icônes à choisir (icônes seules, sans libellé) */
.cat-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: var(--s-2); margin-bottom: var(--s-2); }
.cat-opt { position: relative; min-width: 0; }   /* contient le radio caché */
.cat-opt input { position: absolute; top: 0; left: 0; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; margin: 0; }
.cat-opt label { display: flex; align-items: center; justify-content: center; cursor: pointer;
  aspect-ratio: 1; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-soft);
  color: var(--ink-soft); margin: 0; transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), color var(--transition); }
.cat-opt label:hover { border-color: var(--accent-2); color: var(--ink); }
.cat-opt .cat-svg { width: 30px; height: 30px; }
.cat-opt input:checked + label { border-color: var(--accent); background: var(--panel-2);
  box-shadow: 0 0 0 1px var(--accent); color: var(--accent-hi); }
.cat-opt input:focus-visible + label { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

/* ---------- Icônes SVG des types de tombe (taille + couleur par contexte) ---------- */
.cat-svg, .tomb-svg, .pv-svg { display: block; }
.gc-emoji { color: var(--accent-hi); } .gc-emoji .cat-svg { width: 26px; height: 26px; }
.tc-emoji { color: var(--accent-hi); } .tc-emoji .cat-svg { width: 30px; height: 30px; }
.ti-emoji { color: var(--ink-soft); display: inline-flex; } .ti-emoji .cat-svg { width: 18px; height: 18px; }
.pv-em { color: var(--stone); } .pv-em img { width: 42px; height: 42px; margin: 0 auto; display: block; }
.grave-card .g-em { color: var(--stone); } .grave-card .g-em img { width: 46px; height: 46px; margin: 0 auto; display: block; }

.errors { background: #2a1c18; border: 1px solid var(--danger); color: #f0c9bd;
  padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: var(--s-4); }
.errors ul { margin: 6px 0 0; padding-left: 18px; }
.rules { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-4) var(--s-5); }
.rules h3 { margin: 0 0 var(--s-2); font-size: 1.05rem; }
.rules ul { margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: .92rem; }
.rules li { margin-bottom: 6px; }
.price-note { color: var(--ink-dim); font-size: .85rem; text-align: center; margin: var(--s-2) 0 0; }
.free-banner { background: #1c2a1c; border: 1px solid var(--accent-2); color: var(--accent-2);
  padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm); font-size: .88rem; text-align: center; margin-bottom: var(--s-4); }

/* Aperçu tombe (live) */
.bury-right h3 { text-align: center; }
.preview-tomb { background: linear-gradient(180deg, var(--panel-2), #16202a);
  border: 1px solid var(--line); border-radius: 18px 18px 8px 8px; padding: var(--s-6) var(--s-5);
  text-align: center; position: relative; overflow: hidden; box-shadow: var(--shadow-2); }
.preview-tomb::before { content: ""; position: absolute; inset: 8px; border: 1px solid #3a4a55;
  border-radius: 14px 14px 6px 6px; pointer-events: none; }
.preview-tomb .pv-rip { color: var(--ink-soft); letter-spacing: 4px; font-size: .8rem; }
.preview-tomb .pv-name { font-family: var(--font); font-size: clamp(1.3rem, 5vw, 1.6rem); font-weight: 700; margin: 6px 0; overflow-wrap: anywhere; }
.preview-tomb .pv-dates { color: var(--ink-soft); font-size: .9rem; }
.preview-tomb .pv-epitaph { font-family: var(--font); font-style: italic; margin: var(--s-4) 0; min-height: 1.4em; overflow-wrap: anywhere; }
.preview-tomb .pv-by { color: var(--ink-soft); font-size: .85rem; }
.preview-tomb .pv-em { font-size: 2.2rem; }

/* Aperçu de l'image de partage (Open Graph) sous l'aperçu de la tombe. */
.og-preview { margin: var(--s-4) 0 0; }
.og-preview-cap { color: var(--ink-dim); font-size: .82rem; text-align: center; margin: 0 0 var(--s-2); }
.og-preview-img {
  display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel-2); box-shadow: var(--shadow-1);
}

/* ---------- Page tombe ---------- */
.grave-page { max-width: 640px; margin: 0 auto; padding: var(--s-7) var(--s-4) var(--s-8); text-align: center; }

/* Bandeau image (le cimetière de la tombe) que la pierre tombale chevauche. */
.grave-hero {
  position: relative; height: clamp(200px, 32vw, 320px);
  background-size: cover; background-position: center top; background-color: #0c1218;
}
.grave-hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,12,16,.4), rgba(8,12,16,.72) 55%, var(--bg));
}
/* La stèle remonte pour passer par-dessus le bas du bandeau (effet « par-dessus »). */
.grave-page { padding-top: 0; }
.grave-stage { margin-top: calc(-1 * clamp(80px, 14vw, 130px)); z-index: 2; }

/* Scène : la stèle posée dans une nuit de cimetière (lune, brume, braises). */
.grave-stage { position: relative; }
/* Posée DEVANT la stèle (z au-dessus) et fondue en « screen » : la lumière
   s'ajoute à la pierre au lieu d'être masquée par elle. */
.grave-atmo {
  position: absolute; inset: -70px 0 0; z-index: 3;
  pointer-events: none; overflow: hidden; border-radius: 120px 120px 12px 12px;
}
/* Braises / lucioles dorées qui montent doucement par-dessus la pierre. */
.ember {
  position: absolute; bottom: 8%; width: 3px; height: 3px; border-radius: 50%; mix-blend-mode: screen;
  background: var(--accent-hi); box-shadow: 0 0 8px 2px rgba(224,189,99,.95);
  opacity: 0; animation: emberRise 9s ease-in infinite;
}
.ember:nth-child(3) { left: 12%; animation-delay: 0s;   animation-duration: 8s; }
.ember:nth-child(4) { left: 27%; animation-delay: 2.4s; animation-duration: 10s; }
.ember:nth-child(5) { left: 43%; animation-delay: 4.1s; animation-duration: 9s; }
.ember:nth-child(6) { left: 59%; animation-delay: 1.2s; animation-duration: 11s; }
.ember:nth-child(7) { left: 73%; animation-delay: 3.6s; animation-duration: 8.5s; }
.ember:nth-child(8) { left: 87%; animation-delay: 5.2s; animation-duration: 10.5s; }
.ember:nth-child(9) { left: 50%; animation-delay: 6.3s; animation-duration: 9.5s; }
@keyframes emberRise {
  0%   { opacity: 0; transform: translate(0, 0) scale(1); }
  12%  { opacity: .9; }
  70%  { opacity: .6; }
  100% { opacity: 0; transform: translate(16px, -230px) scale(.35); }
}

/* La stèle : grande arche, pierre dégradée, gravure éclairée. */
.grave-card {
  position: relative; z-index: 1;
  background: linear-gradient(180deg, var(--panel-2), #161f27);
  border: 1px solid var(--line); border-radius: 100px 100px 12px 12px;
  padding: var(--s-8) var(--s-5) var(--s-7);
  box-shadow: var(--shadow-3);
  animation: graveRise .6s ease both;
}
.grave-card::before {
  content: ""; position: absolute; inset: 10px;
  border: 1px solid rgba(255,255,255,.09); border-radius: 92px 92px 6px 6px;
  pointer-events: none;
}
@keyframes graveRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.grave-card > * { position: relative; }
.grave-card .g-em { display: inline-block; font-size: 3rem; line-height: 1; }
.grave-card .g-rip { color: var(--ink-dim); letter-spacing: 6px; font-size: .85rem; margin-top: 10px; }
.grave-card .g-name {
  font-family: var(--font); font-size: clamp(1.7rem, 6vw, 2.2rem); margin: var(--s-2) 0;
  overflow-wrap: anywhere;
}
.grave-card .g-dates { color: var(--ink-soft); }
/* Ornement séparateur gothique entre l'état civil et l'épitaphe. */
.g-divider {
  position: relative; width: 90px; height: 1px; margin: var(--s-5) auto var(--s-4);
  background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .6;
}
.g-divider::after {
  content: "✦"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  color: var(--accent-hi); font-size: .7rem; padding: 0 8px;
  background: #1a232c;
}
.grave-card .g-epitaph { font-family: var(--font); font-style: italic; font-size: clamp(1.05rem, 4vw, 1.22rem); margin: var(--s-4) 0 var(--s-5); overflow-wrap: anywhere; color: var(--ink); }
.grave-card .g-by { color: var(--ink-soft); }
.grave-card .grave-link { margin-top: var(--s-4); font-size: .95rem; word-break: break-word; }
.grave-actions { margin-top: var(--s-6); }    /* disposition gérée par Bootstrap (d-flex) */
.candle-count { font-size: 1.15rem; margin-top: var(--s-5); }
.candle-count strong { color: var(--accent-hi); }

.grave-back { margin-top: var(--s-5); }

/* Partage : libellé + boutons ronds aux logos des réseaux sociaux. */
.grave-share { margin-top: var(--s-5); position: relative; z-index: 1; }
.grave-share-label {
  display: block; color: var(--ink-dim); font-family: var(--font-ui);
  font-size: .9rem; margin-bottom: var(--s-3);
}
.grave-share-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }
.share-btn {
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0));
  transition: transform var(--transition-snap), border-color var(--transition), box-shadow var(--transition-slow), color var(--transition), background var(--transition-slow);
}
.share-btn svg { width: 20px; height: 20px; display: block; fill: currentColor; }
.share-btn:hover { transform: translateY(-2px); }
/* Couleur de marque au survol (sobre au repos, fidèle à la charte au survol). */
.share-btn--x:hover  { color: #fff;     border-color: #fff;     box-shadow: 0 8px 22px -12px rgba(255,255,255,.4); }
.share-btn--fb:hover { color: #1877F2;  border-color: #1877F2;  box-shadow: 0 8px 22px -12px rgba(24,119,242,.6); }
.share-btn--wa:hover { color: #25D366;  border-color: #25D366;  box-shadow: 0 8px 22px -12px rgba(37,211,102,.6); }
.share-btn--tg:hover { color: #229ED9;  border-color: #229ED9;  box-shadow: 0 8px 22px -12px rgba(34,158,217,.6); }
.share-btn--li:hover { color: #0A66C2;  border-color: #0A66C2;  box-shadow: 0 8px 22px -12px rgba(10,102,194,.6); }

@media (prefers-reduced-motion: reduce) {
  .grave-card { animation: none; }
  .ember { display: none; }
}

/* ---------- Histoire (récit long sous la tombe) ---------- */
.grave-story {
  max-width: 60ch; margin: var(--s-7) auto 0; text-align: start;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s-5);
  box-shadow: var(--shadow-1);
}
.grave-story .gs-title {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font); font-weight: 700; font-size: 1.15rem;
  color: var(--ink); margin: 0 0 var(--s-3);
}
.grave-story .gs-orn { color: var(--accent-hi); }
.grave-story .gs-body {
  font-family: var(--font-ui); color: var(--ink-soft);
  font-size: 1rem; line-height: 1.7; overflow-wrap: anywhere;
}

/* ---------- Hommages (commentaires anonymes) ---------- */
.grave-comments { max-width: 60ch; margin: var(--s-7) auto 0; text-align: start; }
.grave-comments .cmt-title {
  font-family: var(--font); font-weight: 700; font-size: 1.2rem; color: var(--ink);
  margin: 0 0 var(--s-4); padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-soft);
}
.grave-comments .cmt-title [data-comment-count] { color: var(--accent-hi); }

.cmt-list {
  list-style: none; margin: 0 0 var(--s-5); padding: 0;
  display: flex; flex-direction: column; gap: var(--s-3);
}
.cmt-item {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: var(--s-3) var(--s-4);
}
.cmt-item.is-new { animation: cmtIn .25s ease; }
@keyframes cmtIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cmt-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); margin-bottom: 4px;
}
.cmt-author { font-family: var(--font); font-weight: 700; font-size: .98rem; color: var(--ink); overflow-wrap: anywhere; }
.cmt-ago { color: var(--ink-dim); font-size: .8rem; white-space: nowrap; flex-shrink: 0; }
.cmt-body { margin: 0; color: var(--ink-soft); line-height: 1.6; overflow-wrap: anywhere; }
.cmt-empty { color: var(--ink-dim); font-style: italic; margin: 0 0 var(--s-5); }

.cmt-form {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s-5); box-shadow: var(--shadow-1);
}
.cmt-form-title { font-family: var(--font); font-weight: 700; font-size: 1.05rem; color: var(--ink); margin: 0 0 var(--s-4); }
.cmt-field { margin-bottom: var(--s-3); }
.cmt-form-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-top: var(--s-4);
}
.cmt-note { margin: 0; color: var(--ink-dim); font-size: .82rem; flex: 1 1 220px; }
.cmt-form-foot .btn-cta { flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .cmt-item.is-new { animation: none; } }

/* ---------- Success ---------- */
.success-box { max-width: 580px; padding: var(--s-8) var(--s-4); text-align: center; }
.success-box .big { font-size: 3rem; }
.success-box h1 { font-size: clamp(1.7rem, 6vw, 2.2rem); }
.share-row { margin-top: var(--s-5); }        /* disposition gérée par Bootstrap (d-flex) */

/* ---------- Pied de page ---------- */
.site-footer { border-top: 1px solid var(--line-soft); background: var(--bg-2); margin-top: var(--s-7); }
.foot-inner { padding-top: var(--s-5); padding-bottom: var(--s-5); color: var(--ink-dim); font-size: .85rem; }
.foot-nav a { color: var(--ink-dim); }
.foot-nav a:hover { color: var(--ink); }
.foot-made { font-style: italic; }
.foot-brand { display: flex; align-items: center; gap: var(--s-2); justify-content: center; }
@media (min-width: 768px) { .foot-brand { justify-content: flex-start; } }
.foot-brand .brand-logo { flex-shrink: 0; }
.text-ink-soft { color: var(--ink-soft); }

/* ---------- Brume décorative (bas d'écran) ----------
   Bande de brume fixée en bas, par-dessus tout le site mais inerte aux clics.
   Image lourde → chargée en différé via JS, puis fondu d'apparition lent. */
.brume {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 60vh;           /* 30 % de la hauteur de la fenêtre */
  z-index: 1500;          /* au-dessus du contenu (header = 1100) */
  pointer-events: none;   /* purement cosmétique : ne bloque jamais l'UI */
  opacity: 0;             /* masquée tant que l'image n'est pas chargée */
  transition: opacity 2.5s ease;
}
.brume.is-on { opacity: .15; }  /* fade-in une fois l'image chargée */
.brume__img {
  position: absolute;
  bottom: -150px; left: 50%;
  height: 100%;
  width: auto;            /* image très large : on garde son ratio (pas de déformation) */
  min-width: 170%;        /* déborde largement l'écran → la dérive ne révèle jamais de bord */
  max-width: none;
  will-change: transform, opacity, filter;
  /* chaque couche : sa dérive/zoom/rotation + une respiration de densité décalée */
}
/* Couche du fond : plus grande, plus lente, plus floue → profondeur */
.brume__img--back {
  animation:
    brumeDriftA 41s ease-in-out infinite alternate,
    brumeBreathe 13s ease-in-out -4s infinite;
}
/* Couche de devant : plus rapide, sens inverse → effet de parallaxe */
.brume__img--front {
  animation:
    brumeDriftB 27s ease-in-out infinite alternate,
    brumeBreathe 9s ease-in-out infinite;
}
/* Dérives : A et B partent dans des sens opposés pour se croiser */
@keyframes brumeDriftA {
  from { transform: translateX(-60%) scale(1.18) rotate(-3deg); }
  50%  { transform: translateX(-50%) scale(1.32) rotate(0deg); }
  to   { transform: translateX(-42%) scale(1.18) rotate(3deg); }
}
@keyframes brumeDriftB {
  from { transform: translateX(-42%) scale(1)   rotate(3deg); }
  50%  { transform: translateX(-52%) scale(1.14) rotate(0deg); }
  to   { transform: translateX(-62%) scale(1)   rotate(-3deg); }
}
/* Respiration : la fumée s'épaissit puis se dissipe, avec un léger flou pulsé */
@keyframes brumeBreathe {
  0%, 100% { opacity: .35; filter: blur(3px); }
  50%      { opacity: 1;   filter: blur(0px); }
}


@media (prefers-reduced-motion: reduce) {
  .brume__img { animation: none; transform: translateX(-50%); }
  .brume { opacity: .10; }
}

/* ---------- Lune décorative ----------
   Posée en haut à droite, DERRIÈRE le contenu (z-index:-1, devant le fond du
   body), elle tourne lentement sur elle-même. Apparition différée + fondu lent,
   comme la brume. Le halo froid (drop-shadow) lui donne sa clarté lunaire. */
.moon {
  position: fixed;
  top: clamp(80px, 12vh, 160px);   /* sous le header (60px) */
  right: clamp(16px, 5vw, 80px);
  z-index: -1;            /* derrière le contenu, au-dessus du fond du body */
  width: clamp(140px, 22vw, 300px);
  height: auto;
  pointer-events: none;   /* purement cosmétique */
  opacity: 0;             /* masquée tant que l'image n'est pas chargée */
  transition: opacity 2.5s ease;   /* fondu d'apparition lent, comme la brume */
  will-change: transform, opacity;
  filter:
    drop-shadow(0 0 28px rgba(150, 180, 235, .45))
    drop-shadow(0 0 90px rgba(120, 150, 210, .22));
  animation: moonSpin 160s linear infinite;   /* rotation lente sur elle-même */
}
.moon.is-on { opacity: .9; }   /* fondu une fois l'image chargée */
/* Sous 1500px : lune plus discrète. */
@media (max-width: 1499.98px) {
  .moon.is-on { opacity: .4; }
}
@keyframes moonSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Mouvement réduit : lune fixe, sans rotation. */
@media (prefers-reduced-motion: reduce) {
  .moon { animation: none; transform: none; }
}

/* ---------- 404 ---------- */
.notfound { text-align: center; padding: var(--s-8) var(--s-4); }
.notfound .big { font-size: 4rem; }
.notfound h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); }

/* ===========================================================================
   Breakpoints
   =========================================================================== */
@media (min-width: 992px) {
  /* Aperçu de la tombe qui suit le scroll à côté du formulaire (≥ lg). */
  .bury-right { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
}

@media (min-width: 1024px) {
  .hero { padding-top: var(--s-6); max-width: 940px; }
  .hero .lead { max-width: 70ch; }
  .cemetery-map { height: clamp(340px, calc(100svh - 440px), 700px); }
}

/* Pas de survol sur écrans tactiles : évite les états collés */
@media (hover: none) {
  .btn:hover, .btn-ghost:hover { box-shadow: var(--shadow-2); }
}

/* ===========================================================================
   Option « Tombe en or » (+1 €) : pierre dorée qui brille partout.
   =========================================================================== */
:root {
  --gold:    #d4af37;
  --gold-hi: #f7e08a;
  --gold-dk: #8a6d1f;
  --gold-glow: 0 0 0 1px rgba(212,175,55,.5), 0 6px 26px rgba(212,175,55,.35);
}

/* -- Toggle dans le formulaire -- */
.gold-opt {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm);
  border: 1px solid var(--gold-dk);
  background: linear-gradient(180deg, rgba(212,175,55,.10), rgba(212,175,55,.03));
  transition: border-color var(--transition), box-shadow var(--transition);
}
.gold-opt:hover { border-color: var(--gold); }
.gold-opt input { width: 20px; height: 20px; accent-color: var(--gold); flex: 0 0 auto; }
.gold-opt:has(input:checked) { border-color: var(--gold); box-shadow: var(--gold-glow); }
.gold-opt-body { display: flex; flex-direction: column; gap: 2px; }
.gold-opt-title { font-family: var(--font); color: var(--gold-hi); font-weight: 600; }
.gold-opt-desc { font-size: .9rem; color: var(--ink-soft); }
/* Option « tombe en or » grisée et non cliquable pendant l'offre gratuite. */
.gold-opt.is-disabled {
  cursor: not-allowed; opacity: .5; filter: grayscale(1);
  border-color: var(--line); background: var(--bg-soft);
}
.gold-opt.is-disabled:hover { border-color: var(--line); box-shadow: none; }
.gold-opt.is-disabled input { cursor: not-allowed; }

/* -- Halo doré commun (aperçu, page tombe, carte liste) -- */
.preview-tomb.is-gold,
.grave-card.is-gold,
.grave-card-item.is-gold {
  border-color: var(--gold) !important;
  box-shadow: var(--gold-glow);
  background-image: linear-gradient(180deg, rgba(212,175,55,.08), rgba(212,175,55,0));
}
.preview-tomb.is-gold { transition: box-shadow var(--transition), border-color var(--transition); }
/* Stèle dorée : on superpose la teinte or au dégradé « pierre » (sinon perdu). */
.grave-card.is-gold {
  box-shadow: var(--gold-glow), 0 0 70px -14px rgba(212,175,55,.35);
  background-image:
    linear-gradient(180deg, rgba(212,175,55,.12), rgba(212,175,55,0) 60%),
    radial-gradient(130% 60% at 50% 0%, rgba(247,224,138,.10), transparent 58%),
    linear-gradient(180deg, var(--panel-2), #161f27);
}

/* Badge doré en haut de la page tombe */
.g-gold-badge {
  display: inline-block; margin-bottom: 10px; padding: 4px 12px;
  border-radius: var(--radius-pill); font-size: .85rem; font-weight: 600;
  font-family: var(--font); color: #1a130a;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  box-shadow: 0 2px 10px rgba(212,175,55,.35);
}

/* Étincelle sur la carte de la liste */
.grave-card-item.is-gold .gc-head { position: relative; }
.gc-gold { position: absolute; top: -2px; right: -2px; font-size: 1.1rem;
  filter: drop-shadow(0 0 4px rgba(247,224,138,.8)); }

/* -- Marqueur doré sur la carte du cimetière -- */
.tomb-icon.is-gold .tomb-top { color: var(--gold-hi);
  filter: drop-shadow(0 0 5px rgba(247,224,138,.85)); }
.tomb-icon.is-gold .tomb-body {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold)) !important;
  color: #1a130a !important; border-color: var(--gold-dk) !important;
  box-shadow: 0 0 10px rgba(212,175,55,.55);
}
/* -- Popup de tombe dorée (carte) : on habille toute la boîte, pas juste le
   contenu, sinon le halo blanc de .grave-pop-box reste argenté. -- */
.cemetery-map .grave-pop-box:has(.grave-pop.is-gold) {
  border-color: var(--gold);
  background-image:
    linear-gradient(180deg, rgba(212,175,55,.13), rgba(212,175,55,0) 62%),
    linear-gradient(180deg, var(--panel-2), var(--panel) 42%);
  box-shadow: 0 0 0 1px rgba(212,175,55,.55), 0 0 26px rgba(212,175,55,.32), var(--shadow-3);
}
.grave-pop.is-gold .pop-name { color: var(--gold-hi); }
.grave-pop.is-gold .pop-rip { color: var(--gold); opacity: .85; }
.grave-pop.is-gold .pop-icon img {
  filter: drop-shadow(0 0 5px rgba(247,224,138,.7));
}
/* Flèches nav + croix de fermeture assorties à l'or pour rester cohérent. */
.cemetery-map .grave-pop-box:has(.is-gold) .gp-nav:hover {
  background: var(--gold); border-color: var(--gold); color: #1a130a;
}
.cemetery-map .grave-pop-box:has(.is-gold) .gp-close:hover { color: var(--gold-hi); }

/* Popup Leaflet natif (au cas où) — même habillage doré. */
.grave-popup:has(.grave-pop.is-gold) .leaflet-popup-content-wrapper {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(212,175,55,.5), 0 0 22px rgba(212,175,55,.3), var(--shadow-3);
}
.grave-popup:has(.grave-pop.is-gold) .leaflet-popup-tip { background: var(--panel); }

/* ===========================================================================
   Accueil — paragraphe de présentation (concept + SEO), sous le bouton CTA.
   =========================================================================== */
.home-about {
  margin: 0 auto;
  padding: var(--s-3) var(--s-4) var(--s-7);
  text-align: center;
}
/* Petit ornement-séparateur, dans l'esprit gothique du site. */
.home-about::before {
  content: ""; display: block; width: 64px; height: 1px; margin: 0 auto var(--s-5);
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.home-about h2 {
  font-family: var(--font); color: var(--ink);
  font-size: clamp(1.35rem, 4.5vw, 1.95rem);
  line-height: 1.25; margin: 0 0 var(--s-4);
}
.home-about p {
  color: var(--ink-soft); line-height: 1.75;
  font-size: clamp(.98rem, 2.6vw, 1.06rem);
  margin: 0 auto var(--s-3); max-width: none;
}
.home-about-intro {
  margin-top: var(--s-5); color: var(--ink-dim);
  font-size: .96rem; font-family: var(--font-ui);
}

/* Deux boutons d'exploration : pierres tombales sobres, dorées au survol. */
.home-explore {
  margin-top: var(--s-4);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s-3);
}
.btn-tomb {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: var(--s-3) var(--s-5);
  font-family: var(--font-ui); font-weight: 600; font-size: 1rem; line-height: 1;
  color: var(--ink); text-decoration: none;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0));
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: transform .15s ease, border-color .2s ease, box-shadow .25s ease,
              color .2s ease, background .25s ease;
}
.btn-tomb:hover {
  color: var(--accent-hi); border-color: var(--accent);
  background: linear-gradient(180deg, rgba(200,162,74,.10), rgba(200,162,74,.02));
  box-shadow: 0 8px 24px -12px rgba(200,162,74,.55);
  transform: translateY(-2px);
}
.btn-tomb:active { transform: translateY(0) scale(.98); }
.btn-tomb-ico { display: inline-flex; color: var(--accent-hi); transition: color var(--transition), filter var(--transition-slow); }
.btn-tomb-ico svg { width: 20px; height: 20px; display: block; }

/* Variante « bougie » : la flamme rayonne un halo doré au survol. */
.btn-tomb--candle .btn-tomb-ico { color: var(--accent); }
.btn-tomb--candle:hover .btn-tomb-ico {
  color: var(--accent-hi); filter: drop-shadow(0 0 6px rgba(224,189,99,.7));
}
.btn-tomb--candle:hover { box-shadow: 0 8px 26px -10px rgba(224,189,99,.6); }

/* Variante « enterrer » : CTA principal, doré plein, plus imposant. */
.btn-tomb--bury {
  min-height: 54px; padding: var(--s-4) var(--s-6); font-size: 1.08rem;
  color: #1a130a; border-color: transparent;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  box-shadow: var(--shadow-2);
}
.btn-tomb--bury .btn-tomb-ico { color: #1a130a; }
.btn-tomb--bury:hover {
  color: #1a130a; border-color: transparent;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  box-shadow: var(--glow);
}
.btn-tomb--bury:hover .btn-tomb-ico { color: #1a130a; filter: none; }
.btn-tomb-price {
  margin-left: 2px; padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: .9em; font-weight: 700;
  background: rgba(26,19,10,.18); color: #1a130a;
}
/* Période de gratuité : ancien prix barré + « gratuit » mis en avant. */
.btn-tomb-price.is-free { display: inline-flex; align-items: baseline; gap: 6px; }
.btn-tomb-price .price-old { opacity: .55; text-decoration: line-through; font-weight: 600; }
.btn-tomb-price .price-free { font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
/* Note de prix barré sous le bouton d'enterrement (page enterrer). */
.price-note s { opacity: .6; margin-right: 6px; }
/* Bougie déjà allumée : bouton grisé, non cliquable. */
.btn-tomb.is-lit, .btn-tomb:disabled {
  background: var(--bg-soft); color: var(--muted, #8a8276);
  border-color: var(--line); box-shadow: none; cursor: default;
  opacity: .65; filter: grayscale(1); transform: none;
}
.btn-tomb.is-lit .btn-tomb-ico, .btn-tomb:disabled .btn-tomb-ico { color: inherit; }
.btn-tomb.is-lit:hover, .btn-tomb:disabled:hover { transform: none; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .btn-tomb, .btn-tomb:hover, .btn-tomb:active { transform: none; }
}

/* ===========================================================================
   Bouton de paiement : libellé + logo Stripe (affiché si Stripe est actif).
   =========================================================================== */
.btn-pay {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
}
.btn-pay .stripe-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding-left: 10px; margin-left: 2px;
  border-left: 1px solid rgba(26,19,10,.25);
  opacity: .85;
}
.btn-pay .stripe-via {
  font-family: var(--font-ui); font-size: .8em; font-weight: 500;
  text-transform: none; letter-spacing: 0;
}
.btn-pay .stripe-logo {
  height: 1.15em; width: auto; display: block;
  color: inherit;            /* le wordmark suit la couleur du texte du bouton */
}

/* Compteur de caractères sous les champs du formulaire (nom, épitaphe, pseudo). */
.char-count {
  display: block; text-align: right; margin-top: 4px;
  font-size: .78rem; color: var(--ink-dim); font-variant-numeric: tabular-nums;
}
.char-count.is-full { color: var(--accent-hi); font-weight: 600; }