:root{
  --font-body: 'EB Garamond', Georgia, serif;
  --font-titles: 'Cinzel Decorative', 'Times New Roman', serif;

  /* Palette cuir + cuivre */
  --color-primary: #0f0e0d;            /* anthracite très sombre (btn/headers) */
  --color-secondary: #1f1e1c;          /* anthracite chaud (hover/sections) */
  --color-accent: #D4A15F;             /* cuivre patiné (liens/CTA/bordures actives) */
  --color-text: #f0c286;               /* blanc chaud lisible sur fond sombre */
  --color-muted: rgba(244,242,238,.72);/* texte atténué (blanc chaud) */

  /* Surfaces (cartes, inputs, barres) */
  --color-surface: rgba(20,16,14,.58);       /* brun très sombre translucide */
  --color-surface-strong: rgba(20,16,14,.78);
  --surface-border: rgba(212,161,95,.22);    /* liseré cuivre discret */

  --shadow-soft: 0 10px 30px rgba(0,0,0,.25);
  --ring: 0 0 0 3px rgba(212,161,95,.28);    /* halo cuivre focus */
}

/* Reset de base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
img{ max-width:100%; display:block; }
.hidden{ display:none !important; }

/* Fond global */
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--color-text);
  line-height:1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures;

  background-color:#000; /* fallback */
  background-image:url('assets/img/fond3.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;

  text-shadow: 0 2px 6px rgba(0,0,0,.55);
}

/* Titres : Cinzel Decorative */
h1,h2,h3,h4,h5,h6,.site-title{
  font-family:var(--font-titles);
  letter-spacing:.02em;
  line-height:1.2;
  margin:0 0 .4rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* Conteneur global avec gouttières horizontales resserrées */
.container{
  max-width: 1100px;
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 64px);
}

/* === En-tête & navigation === */
.site-header{
  background: var(--color-surface-strong);
  color: var(--color-text);
  padding:1rem 0;
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(120%) blur(2px);
  border-bottom:1px solid var(--surface-border);
}
.site-header .container{
  padding-inline: clamp(16px, 3.5vw, 48px);
}
.site-title{ font-size:1.9rem; }
.site-nav{ display:flex; gap:1.25rem; margin-top:.5rem; flex-wrap:wrap; }
.site-nav a{
  color: var(--color-accent);
  text-decoration:none;
  font-weight:600;
  letter-spacing:.02em;
}
.site-nav a:hover,
.site-nav a[aria-current="page"]{ text-decoration:underline; }

/* === Sections générales === */
.hero{ padding: 6rem 0 4rem; text-align:center; }
.hero .container{
  max-width: 900px;                                   /* resserrage du bloc hero */
  padding-inline: clamp(20px, 4vw, 64px);             /* cohérent avec .container */
}
.hero h2{ font-size: clamp(2.2rem, 5vw, 3rem); margin-bottom:1rem; }
.hero p{ margin:0 auto 2rem; max-width: 640px; color: var(--color-muted); }

.categories, .topics, .newsletter{ padding: 3.5rem 0; }
.categories h2, .topics h2, .newsletter h2{
  text-align:center; margin-bottom:2rem;
}

/* === Cartes & listes === */
.category-grid{
  display:grid; gap:1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.category-card, .post-card, .admin-post-item, .admin-post-empty,
.category-summary, .category-filter-wrapper, .admin-category-tree, .category-tree-summary{
  background: var(--color-surface);
  border:1px solid var(--surface-border);
  padding:1.25rem;
  border-radius:16px;
  box-shadow: var(--shadow-soft);
}
.category-card{ transition: transform .2s ease, box-shadow .2s ease; }
.category-card:hover{ transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.35); }

.category-card h3{ margin:0 0 .5rem; }
.post-card p{ margin:0; color: var(--color-text); }

.topic-list{ list-style:none; padding:0; margin:0; display:grid; gap:1rem; }
.topic-list li{
  background: var(--color-surface);
  border:1px solid var(--surface-border);
  padding:1rem;
  border-radius:12px;
  box-shadow: var(--shadow-soft);
  display:flex;
  gap:1rem;
  align-items:flex-start;
}
.topic-list a{ color: var(--color-accent); font-weight:600; text-decoration:none; }
.topic-list a:hover{ text-decoration:underline; }
.topic-info{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  flex:1;
}
.topic-icon{
  width:3rem;
  height:3rem;
  flex-shrink:0;
  object-fit:contain;
  display:block;
}
.topic-meta{
  color: var(--color-muted);
  font-size:.95rem;
  display:flex;
  gap:.35rem;
  flex-wrap:wrap;
  align-items:center;
}
.topic-meta span, .topic-meta time{
  display:inline-flex;
  align-items:center;
}
.topic-meta time{
  font-variant-numeric: tabular-nums;
}
.topic-meta-sep{
  color: var(--color-muted);
}

.meta{ display:block; margin-top:.35rem; color: var(--color-muted); font-size:.95rem; }
.post-empty{ text-align:center; color: var(--color-muted); font-style:italic; }

/* === Boutons === */
.cta, .secondary-cta,
.button-primary, .button-secondary, .button-tertiary{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; font-weight:700; text-decoration:none; cursor:pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.cta, .button-primary{
  padding:.85rem 1.4rem; border:none;
  background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
  color:#ffffff; box-shadow: var(--shadow-soft);
  font-family: var(--font-titles);
  letter-spacing:.02em;
}
.cta:hover, .button-primary:hover{ transform: translateY(-1px); }
.secondary-cta, .button-secondary{
  padding:.8rem 1.3rem; background:transparent; color: var(--color-accent);
  border:1px solid var(--color-accent);
}
.secondary-cta:hover, .button-secondary:hover{
  background: var(--color-secondary); color:#fff; border-color: var(--color-secondary);
}
.button-tertiary{
  padding:.6rem 1rem; border:1px solid rgba(212,161,95,.35); 
  color: var(--color-accent); background:transparent;
}

/* === Formulaires === */
.newsletter-form, .admin-login-form, .admin-post-form, .admin-category-form{ display:grid; gap: .9rem; }
.form-group{ display:grid; gap:.5rem; }
input, textarea, button, select{ font-family:var(--font-body); color: var(--color-text); }
input[type="text"], input[type="password"], textarea, select{
  width:100%; font-size:1.02rem; padding:.8rem 1rem; border-radius:12px;
  border:1px solid var(--surface-border);
  background: var(--color-surface-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
select[multiple]{ min-height:160px; }
input::placeholder, textarea::placeholder{ color: rgba(244,242,238,.6); }

.newsletter-form button{ border:none; border-radius:12px; background: var(--color-primary); color:#fff; font-weight:700; padding:.9rem 1rem; font-family:var(--font-titles); }
.newsletter-form button:hover{ background: var(--color-secondary); }

.editor-toolbar{
  display:flex; flex-wrap:wrap; gap:.5rem; padding:.5rem;
  border:1px solid var(--surface-border); border-radius:12px;
  background: var(--color-surface);
}
.editor-toolbar button{
  padding:.35rem .8rem; border-radius:8px; border:1px solid rgba(212,161,95,.30);
  background:transparent; color: var(--color-accent); font-weight:700; font-size:.92rem; line-height:1;
  font-family: var(--font-titles);
}
.editor-toolbar button:hover{ background: var(--color-secondary); color:#fff; border-color: var(--color-secondary); }

.editor-content{
  min-height:220px; border:1px solid var(--surface-border); border-radius:12px;
  padding:1rem 1.1rem; background: var(--color-surface-strong);
  line-height:1.7; overflow-y:auto;
}
.editor-content:focus{ outline:none; box-shadow: var(--ring); border-color: var(--color-accent); }
.editor-content[data-placeholder]:empty::before{
  content: attr(data-placeholder); color: var(--color-muted); pointer-events:none;
}

/* === Détails de post === */
.post-detail{ padding: 3.5rem 0 4.5rem; }
.post-detail h1{ font-size: clamp(2rem, 4vw, 2.6rem); margin:.25rem 0 .5rem; }
.post-detail .meta{ margin-bottom:1.5rem; }
.post-content p{ margin-bottom:1.3rem; font-size:1.06rem; }

/* Lien retour */
.back-link{ display:inline-block; margin-bottom:1.25rem; color: var(--color-accent); font-weight:700; text-decoration:none; font-family: var(--font-titles); }
.back-link:hover{ text-decoration:underline; }

/* === Badges de catégories === */
.category-badges{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem; }
.category-badge{
  display:inline-flex; align-items:center; padding:.25rem .75rem; border-radius:999px;
  background: rgba(212,161,95,.12); color: var(--color-accent); font-size:.82rem; font-weight:700;
}

/* === Arbre de catégories (Admin + filtres) === */
.admin-categories{ padding:3rem 0; }
.admin-categories-grid{ display:grid; gap:1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top:1.5rem; }
.admin-category-tree-wrapper{ display:grid; gap:1rem; }
.category-tree, .category-filter-tree, .category-tree-summary{ list-style:none; margin:0; padding-left:1rem; }
.category-tree-item, .category-filter-item{ margin-bottom:.35rem; }
.category-tree-row{ display:flex; align-items:center; gap:.75rem; }
.category-tree-label, .category-tree-summary-label{ font-weight:700; color: var(--color-text); font-family:var(--font-titles); }
.category-filter{ padding:3rem 0; }
.category-filter-wrapper{ margin-top:1rem; }
.category-filter-tree{ padding-left:0; }
.category-filter-tree .button-tertiary{ width:100%; justify-content:flex-start; }

/* === Admin : posts === */
.admin-main{ padding-bottom:4.5rem; }
.admin-login, .admin-dashboard, .admin-posts{ padding:2.5rem 0; }
.admin-login{ background: var(--color-surface); border:1px solid var(--surface-border); }
.admin-dashboard, .admin-posts{ background: transparent; }

.admin-post-snippet{ margin:.5rem 0 1rem; color: var(--color-text); font-size:.95rem; }
.admin-post-meta{ margin:0 0 1rem; color: var(--color-muted); font-size:.9rem; }
.admin-posts-list{ list-style:none; padding:0; margin:0; display:grid; gap:1rem; }
.admin-post-actions{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.75rem; }
.admin-post-actions a, .admin-post-actions button{
  padding:.6rem 1.1rem; border-radius:999px; font-weight:700; text-decoration:none;
}
.admin-post-actions a{ background: var(--color-secondary); color:#fff; }
.admin-post-actions button{
  border:none; background:#252525; color:#fff; cursor:pointer; transition: opacity .2s ease, transform .1s ease;
}
.admin-post-actions button:hover{ opacity:.9; transform: translateY(-1px); }

.admin-error{ margin:0; color:#B7B1A9; font-weight:700; }
.admin-success{ margin:0; color:#88E29B; font-weight:700; }
.admin-feedback{ margin:0; font-weight:700; }

.helper-text, .muted{ color: var(--color-muted); }

/* === Pied de page === */
.site-footer{
  background: var(--color-surface-strong);
  color:#fff; padding:1.25rem 0; text-align:center;
  border-top:1px solid var(--surface-border);
}

/* === Responsive === */
@media (min-width:768px){
  .site-header .container{ display:flex; align-items:center; justify-content:space-between; }
  .hero{ text-align:left; }
  .hero p{ margin:0 0 2rem; }
  .admin-post-actions{ justify-content:flex-start; }
}

/* === Resserage mobile (option) === */
@media (max-width: 600px){
  .container,
  .site-header .container,
  .hero .container{
    padding-inline: clamp(18px, 6vw, 28px);
  }
}

/* ===== Overrides anti-« bande blanche » forum/admin ===== */
.admin-login,
.admin-dashboard,
.admin-posts,
.admin-main {
  background: transparent !important;
  border: 0 !important;
}
.admin-login .admin-login-form {
  background: var(--color-surface-strong);
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: var(--shadow-soft);
  margin: 0 auto;
}
.forum-main,
.forum-wrapper,
.forum-content,
.posts-main {
  background: transparent !important;
  border: 0 !important;
}
section[role="main"],
main[role="main"],
main.forum,
section.forum {
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
.site-footer { color: #fff !important; }

body.posts-page main,
body[data-page="posts"] main,
.posts-main,
.posts-wrapper,
.posts-content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
body.post-page main,
body[data-page="post"] main,
.post-main,
.post-wrapper,
.post-content-wrap,
.post-detail {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
main.posts,
section.posts,
main.post,
section.post {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* === Patch catégories : suppression du filigrane + icône plume === */

/* 1) Neutraliser tout fond/filigrane résiduel sur le titre de catégorie */
.category-card h3,
.category-card .category-title,
.category-card .category-name {
  background: none !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

/* 1b) Couper d’éventuels pseudo-éléments décoratifs existants */
.category-card h3::before,
.category-card h3::after,
.category-card .category-title::before,
.category-card .category-title::after,
.category-card .category-name::before,
.category-card .category-name::after {
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* 2) Injection de l’icône plume avec une ombre très légère */
.category-card h3,
.category-card .category-title,
.category-card .category-name {
  position: relative;
  padding-left: 36px; /* espace pour l’icône */
  margin-top: 0.15rem;
}

/* Icône décorative à gauche du libellé */
.category-card h3::before,
.category-card .category-title::before,
.category-card .category-name::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  background-image: url('assets/img/plume.png');
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
  opacity: .95;
}

/* 3) Si un « bandeau » sombre existe autour des titres via un wrapper dédié */
.category-header,
.category-card .header,
.category-card .card-header {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* 4) Optionnel : si un voile est appliqué sur toute la carte via ::before */
.category-card::before {
  content: none !important;
  background: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* ===== Catégories & navigation du forum ===== */
.category-summary {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.category-summary::before,
.category-summary::after { content: none; }

.cat-tree,
.cat-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cat-tree { display: block; }
.cat-tree ul {
  margin: 0 0 0 1.5rem;
  padding-left: 0.75rem;
  border-left: 1px solid rgba(244,242,238,.2);
}
.cat-tree ul[hidden] { display: none; }
.cat-item { margin: 0; }

.cat-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
}
.cat-toggle,
.cat-toggle-spacer {
  flex: 0 0 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cat-toggle {
  border: none;
  border-radius: 50%;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M4 2l4 4-4 4' fill='none' stroke='%23D4A15F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.cat-toggle:hover,
.cat-toggle:focus-visible { background-color: rgba(255, 255, 255, 0.08); }
.cat-toggle:focus-visible { outline: none; box-shadow: var(--ring); }
.cat-toggle[aria-expanded="true"] { transform: rotate(90deg); }
.cat-toggle-spacer { pointer-events: none; }

.cat-link {
  position: relative;
  padding-left: 32px;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  transition: color .2s ease;
}
.cat-link:hover { color: var(--color-accent); }
.cat-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  background-image: url('../img/plume.png');
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
  opacity: .95;
}
.cat-item.is-active > .cat-row .cat-link {
  color: var(--color-accent);
  font-weight: 600;
}

.category-summary .cat-tree { padding: 0.25rem 0 0; }
.category-filter-wrapper .cat-tree { padding-top: 0.25rem; }

.topics-header {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.posts-breadcrumb { font-size: 0.95rem; }
.breadcrumb-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
}
.breadcrumb-list li {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--color-muted);
}
.breadcrumb-list li + li::before { content: '>'; opacity: .6; margin-right: 0.5rem; }
.breadcrumb-list a { color: var(--color-accent); text-decoration: none; font-weight: 600; }
.breadcrumb-list a:hover { text-decoration: underline; }
.breadcrumb-list [aria-current="page"] { color: var(--color-text); font-weight: 600; }

@media (max-width: 600px) {
  .cat-tree ul { margin-left: 1rem; padding-left: 0.5rem; }
  .topics-header { gap: 0.5rem; }
}
.video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  margin: 1rem 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.video-embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}