.front.template-talvoki {
  --pk-container: 1200px;
  --pk-section-y: 5rem;
  --pk-block-gap: 2rem;
  --pk-radius-sm: 0.25rem;
  --pk-radius-md: 0.5rem;
  --pk-radius-lg: 1rem;
  --pk-radius-pill: 9999px;
  --pk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --pk-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --pk-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
  --pk-text-h1: 2.5rem;
  --pk-text-h2: 2rem;
  --pk-text-h3: 1.5rem;
  --pk-text-body: 1rem;
  --pk-heading-weight: 700;
  --pk-heading-transform: none;
  --pk-heading-tracking: 0;
  --pk-body-leading: 1.6;
  --pk-btn-radius: 0.5rem;
  --pk-btn-px: 1.5rem;
  --pk-btn-py: 0.75rem;
  --pk-btn-weight: 600;
  --pk-btn-transform: none;
}

/* =====================================================
   TEMPLATE: TALVOKI (privé — plateforme de jeux Talvoki)

   Nuit au village. Fond bleu nuit profond, texte crème, l'OR
   réservé à l'étincelle (eyebrows, filets, icônes, boutons).
   Signature : coins ARRONDIS doux, halos lumineux discrets,
   titres en serif « conte » (Playfair Display), corps en sans
   lisible (Inter). Quatre camps colorés pour les cartes de rôle.

   Palette (template privé, identité verrouillée) :
   - nuit       #08131F  fond de page
   - nuit-fond  #050D18  sections profondes / footer
   - surface    #0D2034  cartes / encarts
   - surface+   #132A42  survols / champs
   - crème      #F4E9D2  texte principal
   - crème-off  #9EACC0  texte secondaire
   - or         #D7A84B  accents (= accentColor du tenant)
   - or clair   #F2D28A  dégradés / hover d'accent
   - bouton     #F6AA4B → #FFC064 (hover), texte #101820
   - filet      #38536F  bordures
   - camps      village #3B82D0 · loups #B63838 ·
                solitaire #7D55C7 · peste #58A956

   Typo : Playfair Display (display, via settings.headingFont)
   + Inter (body, via settings.bodyFont), chargées par le layout
   depuis l'allow-list Google Fonts.

   CSS PUR (pas de @apply) — servi tel quel par /template.css.
   ===================================================== */

/* =====================================================
   BASE — variables + fond nuit
   ===================================================== */
.front.template-talvoki {
  --talvoki-bg: #08131f;
  --talvoki-bg-deep: #050d18;
  --talvoki-surface: #0d2034;
  --talvoki-surface-soft: #132a42;
  --talvoki-text: #f4e9d2;
  --talvoki-text-muted: #9eacc0;
  --talvoki-gold: #d7a84b;
  --talvoki-gold-light: #f2d28a;
  --talvoki-button: #f6aa4b;
  --talvoki-button-hover: #ffc064;
  --talvoki-button-text: #101820;
  --talvoki-border: #38536f;
  --talvoki-village: #3b82d0;
  --talvoki-wolves: #b63838;
  --talvoki-solitary: #7d55c7;
  --talvoki-plague: #58a956;

  background: var(--talvoki-bg);
  color: var(--talvoki-text);
}
.front.template-talvoki ::selection {
  background: var(--talvoki-gold);
  color: var(--talvoki-bg-deep);
}

/* -- Typographie -- */
.front.template-talvoki h1,
.front.template-talvoki h2,
.front.template-talvoki h3,
.front.template-talvoki h4,
.front.template-talvoki h5,
.front.template-talvoki h6,
.front.template-talvoki .section-title,
.front.template-talvoki .block-title,
.front.template-talvoki .htc-title {
  font-family: 'Playfair Display', var(--font-heading, Georgia), serif;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--talvoki-text);
}
.front.template-talvoki h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.12;
}
.front.template-talvoki :is(h3, h4, h5, h6) {
  margin: 1.25em 0 0.5em;
  line-height: 1.25;
}
.front.template-talvoki h3 { font-size: 1.45rem; }
.front.template-talvoki h4 { font-size: 1.2rem; }
.front.template-talvoki p {
  line-height: 1.7;
  color: var(--talvoki-text);
}
/* Un mot-clé en gras dans un titre = doré (signature). */
.front.template-talvoki :is(.section-title, .block-title, .htc-title, h1, h2, h3) strong {
  font-weight: inherit;
  color: var(--talvoki-gold);
}

/* =====================================================
   TITRES DE SECTION — centrés, serif, éclat doré en dessous
   (le socle rend déjà le wrapper en text-center).
   ===================================================== */
.front.template-talvoki .section-title {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  margin: 0 auto;
}
/* Petit losange doré sous le titre de section. */
.front.template-talvoki .section-title::after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  margin: 1.1rem auto 0;
  background: var(--talvoki-gold);
  opacity: 0.9;
  transform: rotate(45deg);
  border-radius: 3px;
  box-shadow: 0 0 18px rgba(215, 168, 75, 0.45);
}
.front.template-talvoki .section-subtitle {
  margin: 1.1rem auto 0;
  max-width: 58ch;
  color: var(--talvoki-text-muted);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* =====================================================
   SECTIONS — skins nommés (via background.color)
   ===================================================== */
.front.template-talvoki .section-deep {
  background-color: var(--talvoki-bg-deep);
}
.front.template-talvoki .section-surface {
  background-color: var(--talvoki-surface);
}
/* Liséré bleu entre les sections (pas sous la dernière : le border-top du
   footer assure la séparation au-dessus du pied de page). */
.front.template-talvoki .page-content > section:not(:last-child) {
  border-bottom: 1px solid var(--talvoki-border);
}
/* Sections à image de fond (roles, community, cta) : voile sombre
   par-dessus pour garder le texte lisible. LayoutSection pose l'image ;
   on ajoute le scrim sur la section. */
.front.template-talvoki :is(.section-roles, .section-community, .section-cta) {
  position: relative;
  background-color: var(--talvoki-bg);
}
.front.template-talvoki :is(.section-roles, .section-community, .section-cta)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 13, 24, 0.78), rgba(5, 13, 24, 0.9));
  pointer-events: none;
  z-index: 0;
}
.front.template-talvoki :is(.section-roles, .section-community, .section-cta) > * {
  position: relative;
  z-index: 1;
}

/* =====================================================
   TOPBAR — masquée (identité sobre, pas de bandeau tel/réseaux)
   ===================================================== */
.front.template-talvoki .site-topbar {
  display: none;
}

/* =====================================================
   HEADER — nuit translucide, sticky. Liens crème, soulignement
   doré. DERNIER item du menu = bouton « Jouer maintenant ».
   ===================================================== */
/* Header : fond sombre plein par défaut (pages internes). */
.front.template-talvoki #site-header-wrap header {
  background: rgba(5, 13, 24, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(56, 83, 111, 0.4);
  box-shadow: none;
  transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
/* Accueil (1re section = hero) : header FIXE et TRANSPARENT au-dessus du
   hero ; le fond sombre réapparaît en fondu dès qu'on scrolle (is-scrolled,
   posé par le layout au-delà de 40px). --header-height:0 pour que le hero
   démarre tout en haut, derrière le header. */
.front.template-talvoki:has(.page-content > section:first-child .block-hero-v2.hero-full) {
  --header-height: 0px;
}
.front.template-talvoki:has(.page-content > section:first-child .block-hero-v2.hero-full) #site-header-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.front.template-talvoki:has(.page-content > section:first-child .block-hero-v2.hero-full) #site-header-wrap header {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.front.template-talvoki:has(.page-content > section:first-child .block-hero-v2.hero-full) #site-header-wrap.is-scrolled header {
  background: rgba(5, 13, 24, 0.9);
  border-bottom-color: rgba(56, 83, 111, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* Navbar plus haute pour donner de l'air au logo. */
.front.template-talvoki #site-header-wrap header .container > .flex {
  min-height: 112px;
}
/* Logo nettement plus grand (le socle le pose en h-12 = 48px). */
.front.template-talvoki #site-header-wrap .site-logo {
  height: 82px;
  width: auto;
}
.front.template-talvoki #site-header-wrap :is(a, .text-gray-800, .text-gray-700, .font-bold) {
  color: var(--talvoki-text);
}
/* Menu CENTRÉ dans la navbar, dernier item (bouton « Jouer maintenant »)
   tout à droite. Le <nav> remplit l'espace à droite du logo ; la <ul>
   s'étale sur toute la largeur ; deux marges auto encadrent les items de
   contenu (donc centrés) tout en repoussant le CTA (dernier <li>) au bord
   droit. Scopé à `.flex-1 > nav` pour ne pas toucher le menu burger mobile. */
.front.template-talvoki #site-header-wrap .flex-1 {
  justify-content: stretch;
}
.front.template-talvoki #site-header-wrap .flex-1 > nav {
  flex: 1 1 auto;
  min-width: 0;
}
.front.template-talvoki #site-header-wrap .flex-1 > nav > div,
.front.template-talvoki #site-header-wrap .flex-1 > nav > div > ul {
  width: 100%;
}
.front.template-talvoki #site-header-wrap .flex-1 > nav > div > ul {
  display: flex;
  align-items: center;
}
.front.template-talvoki #site-header-wrap .flex-1 > nav > div > ul > li:first-child {
  margin-left: auto;
}
.front.template-talvoki #site-header-wrap .flex-1 > nav > div > ul > li:nth-last-child(2) {
  margin-right: auto;
}
.front.template-talvoki #site-header-wrap nav a {
  position: relative;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--talvoki-text-muted);
  padding: 0.4rem 0;
}
.front.template-talvoki #site-header-wrap nav a:hover {
  color: var(--talvoki-text);
}
.front.template-talvoki #site-header-wrap nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--talvoki-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}
/* Soulignement doré UNIQUEMENT au survol (pas d'état actif permanent). */
.front.template-talvoki #site-header-wrap nav a:hover::after {
  transform: scaleX(1);
}
/* CTA header = dernier item du menu principal en bouton doré. */
.front.template-talvoki #site-header-wrap .flex-1 > nav li:last-child a {
  background: var(--talvoki-button);
  color: var(--talvoki-button-text);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.6rem 1.35rem;
  border-radius: 10px;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.front.template-talvoki #site-header-wrap .flex-1 > nav li:last-child a:hover {
  background: var(--talvoki-button-hover);
  color: var(--talvoki-button-text);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(246, 170, 75, 0.35);
}
.front.template-talvoki #site-header-wrap .flex-1 > nav li:last-child a::after {
  display: none;
}
/* Header : masquer téléphone + réseaux (sobriété). */
.front.template-talvoki #site-header-wrap header a[href^="tel:"],
.front.template-talvoki #site-header-wrap header a[aria-label="Facebook"],
.front.template-talvoki #site-header-wrap header a[aria-label="Twitter"],
.front.template-talvoki #site-header-wrap header a[aria-label="Instagram"],
.front.template-talvoki #site-header-wrap header a[aria-label="LinkedIn"] {
  display: none;
}
.front.template-talvoki #site-header-wrap header .border-l {
  border-left: 0;
  padding-left: 0;
}

/* =====================================================
   BOUTONS — arrondis dorés, halo au survol
   ===================================================== */
.front.template-talvoki .hero-cta,
.front.template-talvoki .cta-button,
.front.template-talvoki .ic-button,
.front.template-talvoki .pricing-cta,
.front.template-talvoki .list-cta-band-link {
  font-family: var(--font-body, 'Inter'), system-ui, sans-serif;
  font-weight: 600;
  border-radius: 10px;
  background: var(--talvoki-button);
  color: var(--talvoki-button-text);
  border: 0;
  box-shadow: none;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.front.template-talvoki :is(.hero-cta, .cta-button, .ic-button, .pricing-cta, .list-cta-band-link):hover {
  background: var(--talvoki-button-hover);
  color: var(--talvoki-button-text);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(246, 170, 75, 0.35);
}
/* Secondaire : contour doré, fond translucide. */
.front.template-talvoki .hero-cta-secondary {
  background: rgba(215, 168, 75, 0.06);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1.5px var(--talvoki-gold);
  color: var(--talvoki-text);
  font-family: var(--font-body, 'Inter'), system-ui, sans-serif;
  font-weight: 600;
  transition: transform 0.15s ease, background 0.2s ease;
}
.front.template-talvoki .hero-cta-secondary:hover {
  background: rgba(215, 168, 75, 0.16);
  transform: translateY(-2px);
}

/* =====================================================
   BOUTONS DE BLOC (cta-v2 / card) — le socle colore certains boutons en
   « brand » (bleu nuit ≈ le fond → invisibles). On force l'AMBRE pour
   TOUTES les variantes, comme le bouton du menu / du CTA.
   ===================================================== */
/* cta-v2 : primaire ET secondaire en ambre plein (le secondaire arrive
   avec bg-transparent + bordure « currentColor » qu'on écrase). */
.front.template-talvoki .block-cta-v2 .cta-button {
  background: var(--talvoki-button);
  color: var(--talvoki-button-text);
  border: 0;
}
.front.template-talvoki .block-cta-v2 .cta-button:hover {
  background: var(--talvoki-button-hover);
  color: var(--talvoki-button-text);
}
/* Boutons de carte primaire/secondaire (span `rounded-lg` + classes brand). */
.front.template-talvoki .block-card .card-body span[class*="rounded-lg"] {
  background: var(--talvoki-button);
  color: var(--talvoki-button-text);
  border-color: transparent;
}
.front.template-talvoki .block-card .card-body span[class*="rounded-lg"]:hover {
  background: var(--talvoki-button-hover);
  color: var(--talvoki-button-text);
}
/* Bouton de carte type « lien » (sans fond) : texte doré. */
.front.template-talvoki .block-card .card-body span.mt-auto:not([class*="rounded-lg"]):not(.card-location) {
  color: var(--talvoki-gold);
}

/* =====================================================
   BOUTONS INSÉRÉS DANS LES BLOCS TEXTE (éditeur Tiptap) —
   <a class="cta-button pk-btn-primary|pk-btn-secondary">. Le socle
   (main.css) les colore en `--brand-*` (bleu nuit ≈ le fond → invisibles)
   avec un sélecteur TRIPLÉ + !important. On surcharge à la même force, aux
   couleurs des BOUTONS DU HERO : primaire = ambre plein, secondaire =
   contour doré (transparent → ambre au survol).
   ===================================================== */
.front.template-talvoki a.pk-btn-primary.pk-btn-primary.pk-btn-primary {
  background-color: var(--talvoki-button) !important;
  color: var(--talvoki-button-text) !important;
  border-color: transparent !important;
}
.front.template-talvoki a.pk-btn-primary.pk-btn-primary.pk-btn-primary:hover {
  background-color: var(--talvoki-button-hover) !important;
  color: var(--talvoki-button-text) !important;
}
.front.template-talvoki a.pk-btn-secondary.pk-btn-secondary.pk-btn-secondary {
  background-color: rgba(215, 168, 75, 0.06) !important;
  color: var(--talvoki-text) !important;
  border-color: var(--talvoki-gold) !important;
}
.front.template-talvoki a.pk-btn-secondary.pk-btn-secondary.pk-btn-secondary:hover {
  background-color: var(--talvoki-button) !important;
  color: var(--talvoki-button-text) !important;
  border-color: var(--talvoki-button) !important;
}

/* =====================================================
   HÉRO — texte crème sur image de fond (posée sur la section).
   Scrim dégradé pour la lisibilité, halo lune discret.
   ===================================================== */
.front.template-talvoki .block-hero-v2 {
  background: transparent;
  color: var(--talvoki-text);
  position: relative;
  overflow: hidden;
}
.front.template-talvoki .block-hero-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 13, 24, 0.86) 0%, rgba(5, 13, 24, 0.55) 45%, rgba(5, 13, 24, 0.15) 100%);
  z-index: 0;
  pointer-events: none;
}
.front.template-talvoki .block-hero-v2 > * {
  position: relative;
  z-index: 1;
}
.front.template-talvoki .block-hero-v2 .htc-title {
  font-size: clamp(2.6rem, 5.4vw, 4.2rem);
  line-height: 1.05;
  margin-bottom: 1.4rem;
  text-shadow: 0 2px 30px rgba(5, 13, 24, 0.6);
  /* Casse normale (le socle met .htc-title en uppercase) — la maquette
     Talvoki est en casse mixte, plus proche du conte. */
  text-transform: none;
}
.front.template-talvoki .block-hero-v2 .htc-description {
  font-size: 1.2rem;
  color: var(--talvoki-text);
  opacity: 0.92;
  max-width: 46ch;
}
/* Eyebrow du héro : doré, mono-espacé optique, remonté au-dessus du titre. */
.front.template-talvoki .block-hero-v2 div:has(> .htc-title) {
  display: flex;
  flex-direction: column;
}
.front.template-talvoki .block-hero-v2 div:has(> .htc-title) > * {
  width: 100%;
}
.front.template-talvoki .htc-subtitle {
  order: -1;
  margin: 0 0 1.1rem 0;
  font-family: var(--font-body, 'Inter'), system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--talvoki-gold);
}
/* Points clés du héro : petite icône dorée + valeur + label. */
.front.template-talvoki .hero-feature {
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(215, 168, 75, 0.25);
  border-radius: 0;
  padding: 0.9rem 0 0 0;
}
.front.template-talvoki .hero-feature-icon {
  color: var(--talvoki-gold);
  background: transparent;
}
.front.template-talvoki .hero-feature :is(.hf-title, strong.font-bold) {
  color: var(--talvoki-text);
  font-weight: 600;
}
.front.template-talvoki .hero-feature :is(p, .hf-description) {
  color: var(--talvoki-text-muted);
}

/* =====================================================
   SERVICE — 3 piliers : icône en anneau doré, centré
   ===================================================== */
.front.template-talvoki .block-service {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  text-align: center;
}
.front.template-talvoki .block-service:hover {
  transform: none;
}
.front.template-talvoki .service-content {
  align-items: center;
  text-align: center;
}
.front.template-talvoki .service-icon {
  width: 74px;
  height: 74px;
  border-radius: 9999px;
  background: rgba(215, 168, 75, 0.06);
  border: 1.5px solid var(--talvoki-gold);
  color: var(--talvoki-gold);
  margin: 0 auto 1.4rem;
  box-shadow: 0 0 26px rgba(215, 168, 75, 0.18);
}
.front.template-talvoki .service-icon .service-icon-svg {
  width: 30px;
  height: 30px;
}
.front.template-talvoki .block-service h3 {
  font-size: 1.5rem;
  margin: 0 0 0.6rem 0;
}
.front.template-talvoki .block-service :is(p, .service-description) {
  color: var(--talvoki-text-muted);
  font-size: 1rem;
}

/* =====================================================
   CARTES — surface nuit, coin arrondi, image nette.
   Cartes de RÔLE : bordure par camp (via .section-roles).
   ===================================================== */
.front.template-talvoki .block-card {
  background: var(--talvoki-surface);
  border: 1px solid rgba(56, 83, 111, 0.55);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(5, 13, 24, 0.4);
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
}
.front.template-talvoki .block-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(5, 13, 24, 0.6);
}
.front.template-talvoki .block-card .card-media {
  border-radius: 0;
}
.front.template-talvoki .block-card :is(h3, .card-title) {
  color: var(--talvoki-text);
}
.front.template-talvoki .block-card :is(p, .card-description) {
  color: var(--talvoki-text-muted);
}
.front.template-talvoki .card-badge {
  background: var(--talvoki-gold);
  color: var(--talvoki-bg-deep);
  border-radius: 999px;
  font-weight: 700;
}

/* =====================================================
   CARTES « POSTER » — rôles ET villages : l'IMAGE remplit TOUTE la
   carte, le titre + la description sont SUPERPOSÉS en bas sur un
   dégradé sombre, et une hauteur fixe (aspect-ratio) rend toutes les
   cartes IDENTIQUES. On restyle le bloc `card` standard (qui garde sa
   description, contrairement à `card-overlay`).
   Cibles : la section rôles (.section-roles) + toute AUTRE section à
   cartes (= les villages), repérée sans classe dédiée via :has().
   ===================================================== */
.front.template-talvoki .section-roles .grid > .block-card,
.front.template-talvoki .page-content > section:not(.section-roles):has(.block-card) .grid > .block-card {
  position: relative;
  overflow: hidden;
  text-align: center;
  border-width: 2px;
  aspect-ratio: 3 / 4;
}
/* Villages : légèrement moins hautes (images plus paysage). */
.front.template-talvoki .page-content > section:not(.section-roles):has(.block-card) .grid > .block-card {
  aspect-ratio: 4 / 5;
}
.front.template-talvoki .section-roles .grid > .block-card .card-inner,
.front.template-talvoki .page-content > section:not(.section-roles):has(.block-card) .grid > .block-card .card-inner {
  position: absolute;
  inset: 0;
}
.front.template-talvoki .section-roles .grid > .block-card .card-media,
.front.template-talvoki .page-content > section:not(.section-roles):has(.block-card) .grid > .block-card .card-media {
  position: absolute;
  inset: 0;
  height: 100%;
  aspect-ratio: auto;
  min-height: 0;
  border-radius: 0;
}
.front.template-talvoki .section-roles .grid > .block-card .card-body,
.front.template-talvoki .page-content > section:not(.section-roles):has(.block-card) .grid > .block-card .card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1.4rem 1.1rem 1.6rem;
  background: linear-gradient(to top, rgba(5, 13, 24, 0.97) 10%, rgba(5, 13, 24, 0.82) 45%, rgba(5, 13, 24, 0) 100%);
}
/* Équerres dorées aux 4 angles (rôles + villages). */
.front.template-talvoki .section-roles .grid > .block-card::after,
.front.template-talvoki .page-content > section:not(.section-roles):has(.block-card) .grid > .block-card::after {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 2;
  pointer-events: none;
  border-radius: 11px;
  background:
    linear-gradient(var(--talvoki-gold), var(--talvoki-gold)) top left / 18px 2px no-repeat,
    linear-gradient(var(--talvoki-gold), var(--talvoki-gold)) top left / 2px 18px no-repeat,
    linear-gradient(var(--talvoki-gold), var(--talvoki-gold)) top right / 18px 2px no-repeat,
    linear-gradient(var(--talvoki-gold), var(--talvoki-gold)) top right / 2px 18px no-repeat,
    linear-gradient(var(--talvoki-gold), var(--talvoki-gold)) bottom left / 18px 2px no-repeat,
    linear-gradient(var(--talvoki-gold), var(--talvoki-gold)) bottom left / 2px 18px no-repeat,
    linear-gradient(var(--talvoki-gold), var(--talvoki-gold)) bottom right / 18px 2px no-repeat,
    linear-gradient(var(--talvoki-gold), var(--talvoki-gold)) bottom right / 2px 18px no-repeat;
}
.front.template-talvoki .section-roles .grid > .block-card:nth-child(1) {
  border-color: var(--talvoki-village);
}
.front.template-talvoki .section-roles .grid > .block-card:nth-child(1):hover {
  box-shadow: 0 18px 44px rgba(59, 130, 208, 0.35);
}
.front.template-talvoki .section-roles .grid > .block-card:nth-child(2) {
  border-color: var(--talvoki-wolves);
}
.front.template-talvoki .section-roles .grid > .block-card:nth-child(2):hover {
  box-shadow: 0 18px 44px rgba(182, 56, 56, 0.4);
}
.front.template-talvoki .section-roles .grid > .block-card:nth-child(3) {
  border-color: var(--talvoki-solitary);
}
.front.template-talvoki .section-roles .grid > .block-card:nth-child(3):hover {
  box-shadow: 0 18px 44px rgba(125, 85, 199, 0.4);
}
.front.template-talvoki .section-roles .grid > .block-card:nth-child(4) {
  border-color: var(--talvoki-plague);
}
.front.template-talvoki .section-roles .grid > .block-card:nth-child(4):hover {
  box-shadow: 0 18px 44px rgba(88, 169, 86, 0.4);
}

/* =====================================================
   CARTE ILLUSTRÉE — section « communauté » (texte + image)
   ===================================================== */
.front.template-talvoki .block-illustrated-card {
  border-radius: 20px;
  background: transparent;
  color: var(--talvoki-text);
}
.front.template-talvoki .block-illustrated-card img {
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(5, 13, 24, 0.55);
}
.front.template-talvoki .ic-subtitle {
  font-family: var(--font-body, 'Inter'), system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--talvoki-gold);
}
.front.template-talvoki .block-illustrated-card :is(h2, h3, .ic-title) {
  color: var(--talvoki-text);
}
.front.template-talvoki .block-illustrated-card :is(p, .ic-description) {
  color: var(--talvoki-text-muted);
}

/* =====================================================
   CTA (bloc) — transparent, compte sur la section-cta
   ===================================================== */
.front.template-talvoki .block-cta-v2,
.front.template-talvoki .block-cta-v2 > div {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.front.template-talvoki .block-cta-v2 :is(h2, .cta-title) {
  color: var(--talvoki-text);
}
.front.template-talvoki .block-cta-v2 :is(p, .cta-description) {
  color: var(--talvoki-text-muted);
}

/* =====================================================
   FAQ — encarts surface nuit, question en serif
   ===================================================== */
.front.template-talvoki .block-faq details {
  background: var(--talvoki-surface);
  border: 1px solid rgba(56, 83, 111, 0.5);
  border-radius: 12px;
  box-shadow: none;
}
.front.template-talvoki .block-faq summary {
  font-family: 'Playfair Display', var(--font-heading, Georgia), serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--talvoki-text);
}
.front.template-talvoki .block-faq :is(p, .faq-answer) {
  color: var(--talvoki-text-muted);
}
.front.template-talvoki .block-faq .faq-chevron {
  color: var(--talvoki-gold);
}

/* =====================================================
   TEXTE RICHE — liens dorés, listes à puce losange
   ===================================================== */
.front.template-talvoki .block-text :is(h2, h3) {
  color: var(--talvoki-text);
}
.front.template-talvoki .block-text p {
  color: var(--talvoki-text-muted);
}
.front.template-talvoki .block-text a {
  color: var(--talvoki-gold-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.front.template-talvoki .block-text a:hover {
  color: var(--talvoki-gold);
}
.front.template-talvoki .block-text ul {
  list-style: none;
  padding-left: 0;
}
.front.template-talvoki .block-text ul > li {
  position: relative;
  padding-left: 1.6rem;
  margin: 0.5rem 0;
  color: var(--talvoki-text-muted);
}
.front.template-talvoki .block-text ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 9px;
  background: var(--talvoki-gold);
  transform: rotate(45deg);
  border-radius: 2px;
}
/* Listes numérotées : espacées, numéros dorés (le socle les laisse brutes). */
.front.template-talvoki .block-text ol {
  padding-left: 1.5rem;
  margin: 0.75rem 0;
}
.front.template-talvoki .block-text ol > li {
  margin: 0.6rem 0;
  padding-left: 0.4rem;
  color: var(--talvoki-text-muted);
}
.front.template-talvoki .block-text ol > li::marker {
  color: var(--talvoki-gold);
  font-weight: 700;
}

/* =====================================================
   FOOTER — nuit profonde, liens crème, hover doré
   ===================================================== */
.front.template-talvoki .block-footer {
  background: var(--talvoki-bg-deep);
  color: var(--talvoki-text-muted);
  border-top: 1px solid rgba(56, 83, 111, 0.35);
}
.front.template-talvoki .block-footer a {
  color: var(--talvoki-text-muted);
}
.front.template-talvoki .block-footer a:hover {
  color: var(--talvoki-gold);
}
.front.template-talvoki .block-footer .grid p.font-bold {
  color: var(--talvoki-text);
  font-family: 'Playfair Display', var(--font-heading, Georgia), serif;
}
.front.template-talvoki .block-footer .border-t {
  border-color: rgba(56, 83, 111, 0.3);
}
/* Footer 3 colonnes : la colonne du MILIEU (menu) est plus large et son
   menu s'affiche à l'HORIZONTALE, centré. Les colonnes latérales gardent
   leur largeur normale. */
@media (min-width: 1024px) {
  .front.template-talvoki .block-footer .grid {
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
  }
}
.front.template-talvoki .block-footer .grid > div:nth-child(2) {
  text-align: center;
}
.front.template-talvoki .block-footer .grid > div:nth-child(2) ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem 1.75rem;
}
.front.template-talvoki .block-footer .grid > div:nth-child(2) ul > li {
  margin-top: 0;
}
/* Logo du footer plus grand (le socle le pose en h-16 = 64px). */
.front.template-talvoki .block-footer .grid > div:first-child img {
  height: 96px;
  width: auto;
}

/* =====================================================
   GALERIE / IMAGES — coins arrondis
   ===================================================== */
.front.template-talvoki .block-gallery img,
.front.template-talvoki .block-image img {
  border-radius: 14px;
}

/* =====================================================
   FIL D'ARIANE — le socle le colore en gris clair (mode light) → illisible
   sur fond sombre. Crème pour le texte, doré pour le lien et le séparateur.
   ===================================================== */
.front.template-talvoki nav[aria-label="Fil d'ariane"] ol {
  color: var(--talvoki-text-muted);
}
.front.template-talvoki nav[aria-label="Fil d'ariane"] a {
  color: var(--talvoki-text-muted);
  transition: color 0.2s ease;
}
.front.template-talvoki nav[aria-label="Fil d'ariane"] a:hover {
  color: var(--talvoki-gold);
}
.front.template-talvoki nav[aria-label="Fil d'ariane"] :is(svg, .iconify) {
  color: var(--talvoki-gold);
}
.front.template-talvoki nav[aria-label="Fil d'ariane"] span {
  color: var(--talvoki-text);
}

/* =====================================================
   ACCESSIBILITÉ — focus doré, motion réduite
   ===================================================== */
.front.template-talvoki :is(a, button, summary):focus-visible {
  outline: 3px solid var(--talvoki-gold);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .front.template-talvoki * {
    transition: none !important;
    animation: none !important;
  }
}


/* ===== Sommaire d'article (BlogToc) : contraste sur fond sombre =====
   Le composant utilise des classes text-gray-* / brand-* prevues pour un
   fond CLAIR (aucune classe .dark ici), donc invisibles sur le fond nuit.
   On force des couleurs lisibles et l'accent or du template. */
.front.template-talvoki .toc-nav p {
  color: var(--talvoki-text);
}
.front.template-talvoki .toc-nav button {
  color: var(--talvoki-text-muted);
}
.front.template-talvoki .toc-nav button:hover {
  color: var(--talvoki-gold);
}
.front.template-talvoki .toc-nav .bg-gray-200 {
  background-color: var(--talvoki-border);
}
.front.template-talvoki .toc-nav .bg-brand-600 {
  background-color: var(--talvoki-gold);
}
.front.template-talvoki .toc-nav a {
  color: var(--talvoki-text-muted);
}
.front.template-talvoki .toc-nav a:hover {
  color: var(--talvoki-text);
}
.front.template-talvoki .toc-nav a.font-medium {
  color: var(--talvoki-gold);
  border-left-color: var(--talvoki-gold);
}


/* ===== Mode edition (GridEditor) : afficher le vrai fond nuit du template =====
   Le canvas de ContentEditorOverlay force `.front.pk-editing{background:#f9fafb
   !important}` (canvas neutre). On le neutralise via la porte de sortie prevue
   (`.front.template-<slug>.pk-editing`, plus specifique) pour retrouver le fond
   nuit du village en edition, comme sur le site public. */
.front.template-talvoki.pk-editing {
  background: var(--talvoki-bg) !important;
}


/* ===== <strong>/<b> dans le corps : lisibles, MEME couleur que le texte.
   Le socle/prose les colore en --heading-color (brand-900 = navy quasi noir),
   quasi invisible sur le fond nuit. On les fait heriter (pas de couleur
   speciale : le dore reste reserve aux liens). Les titres gardent leur accent
   dore via la regle .htc-title strong plus haut. ===== */
.front.template-talvoki .block-text :is(strong, b) {
  color: inherit;
}