/* ==========================================================================
   BKSI — Article Styles (optimisé & harmonisé)
   Version : 2.5 (badges grades publics ajoutés)
   ========================================================================== */

/* ---------- Variables ---------- */
:root {
  --bg:#0b0b0f; --panel:#141418; --panel-2:#1b1b21; --border:#262630;
  --text:#e4e4ea; --muted:#a7a7b3;

  --accent:#D97B29; --accent-2:#FF9B40; --accent-yellow:#FFB373;

  --info:#00b8ff; --warn:#ffb800; --alert:#ff3c3c; --success:#00c864;
  --info-fg:#7fdfff; --warn-fg:#ffe7a3; --alert-fg:#ffb3b3; --success-fg:#b0ffcf;

  --a10:.10; --a12:.12; --a20:.20; --a35:.35;

  --logo-max-h:140px; --affiche-max-w:760px; --bloc-gap:12px;
}

/* ---------- Base ---------- */
html,body{margin:0;height:100%;background:radial-gradient(1200px 800px at 50% -200px,#111 0%,var(--bg) 60%);color:var(--text);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
*{box-sizing:border-box}
.wrap{max-width:980px;margin:0 auto;padding:0 18px}

/* ---------- Header ---------- */
.page-article .post-header{margin:12px 0 14px}
.page-article .post-badge{position:relative;display:inline-flex;align-items:center;gap:8px;font-size:14px;letter-spacing:.08em;
  text-transform:uppercase;color:#a4a6ab;opacity:.95;margin-bottom:6px}
.page-article .post-badge::before{content:"";width:18px;height:18px;display:inline-block;background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'>\
<rect x='3' y='4' width='18' height='17' rx='2' ry='2' stroke='%23D97B29' stroke-width='2'/>\
<path d='M3 9h18' stroke='%23D97B29' stroke-width='2'/>\
<rect x='7' y='12' width='3' height='3' fill='%23D97B29'/>\
<rect x='12' y='12' width='3' height='3' fill='%23D97B29'/>\
<rect x='17' y='12' width='3' height='3' fill='%23D97B29'/>\
</svg>");background-size:contain;background-repeat:no-repeat;transform:translateY(1px)}
.page-article .post-badge::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:linear-gradient(90deg,var(--accent),transparent 60%);border-radius:2px}

/* Title / Subtitle */
.page-article .post-title{display:flex;align-items:center;gap:12px;margin:6px 0;font-weight:800;line-height:1.15;letter-spacing:-.01em;text-wrap:balance}

/* ---------- Sous-titre (sobre / factuel) ---------- */
.page-article .post-subtitle {
  font-size: clamp(14px,1.5vw,17px);
  font-style: italic;
  color: var(--muted);
  margin-top: 2px;
  margin-bottom: 8px;
  opacity: .9;
}

/* ---------- Hero ---------- */
.page-article .post-hero .logo-article{display:block;width:400px;height:auto;margin:14px auto var(--bloc-gap);border-radius:8px}
.post-hero img.hero{display:block;max-width:960px;width:100%;height:auto;margin:0 auto;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.content.bksi-article{margin-top:8px}

/* ---------- Event line ---------- */
.bksi-event-line{
  display:inline-block;
  font-weight:600;
  color: var(--muted);
  background: rgba(217,123,41,.06);
  padding:6px 10px;
  border:1px solid rgba(217,123,41,.22);
  border-radius:6px;
  margin:10px auto 16px;
  max-width:fit-content;
  font-size:13px;
}
.content.bksi-article>.bksi-event-line{display:block;text-align:center}
.bksi-event-line .sep{opacity:.45;padding:0 .45rem}
/* Option ponctuelle pour forcer l’accent si besoin */
.bksi-event-line.is-accent{
  color: var(--accent);
  background: rgba(217,123,41,.10);
  border-color: rgba(217,123,41,.40);
  font-weight:700;
  font-size:14px;
}

/* ---------- Chapo (intro immersive) ---------- */
.page-article .chapo {
  position: relative;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 22px 18px 28px; /* espace gauche + large pour la barre */
  margin: 16px 0 18px;
  font-size: 1.08rem;
  line-height: 1.66;
  font-weight: 500;
  color: #ececef;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.page-article .chapo::before{
  content:"";
  position:absolute;
  top:16px;
  bottom:16px;
  left:10px;
  width:3px;
  background:var(--accent);
  border-radius:3px;
  box-shadow:0 0 12px rgba(255,155,64,.4);
}
.page-article .chapo:first-letter {
  font-size: 1.45em;
  font-weight: 700;
  color: var(--accent-2);
}

/* ---------- Main content ---------- */
.bksi-article .texte{margin:16px 0 18px;background:linear-gradient(180deg,#121820,#0f151c);border:1px solid var(--border);border-radius:14px;padding:16px}
.bksi-article .texte h2,.bksi-article .texte h3,.bksi-article .texte h4{margin:18px 0 10px;font-weight:700;position:relative;padding-bottom:6px}
.bksi-article .texte h2::after,.bksi-article .texte h3::after,.bksi-article .texte h4::after{content:"";position:absolute;left:0;bottom:0;width:60px;height:2px;background:var(--accent);border-radius:2px;box-shadow:0 0 10px rgba(255,155,64,.35)}
.bksi-article .texte p{margin:10px 0;color:#d9dde6}
/* (Supprimé l’encadré auto sur le premier paragraphe — piloté via Porte-Plume désormais) */
.bksi-article .texte ul{margin-left:1.2em}.bksi-article .texte li{margin-bottom:6px}
.bksi-article .texte hr{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--border),transparent);margin:18px 0}
.bksi-article .texte a{color:var(--accent);text-decoration:none}.bksi-article .texte a:hover{text-decoration:underline}

/* Images */
.bksi-article img{max-width:100%;height:auto;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .35s ease}
.bksi-article img:hover{transform:scale(1.02)}


/* BKSI — Légendes sous image : centrées + filet cuivre + cuivre soft */
.bksi-article .spip_document .spip_doc_titre,
.bksi-article .spip_document .spip_doc_legende,
.bksi-article .spip_document .spip_doc_descriptif,
.bksi-article figure figcaption{
  display: block !important;
  visibility: visible !important;
  text-align: center !important;
  font-style: italic;
  margin-top: .65rem;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #ffd6ad; /* fallback lisible sur fond sombre */
  opacity: .95;
  text-shadow: 0 0 1px rgba(255,155,64,.25);
}
/* Garde les crédits non-italiques (optionnel) */
.bksi-article .spip_doc_credits{ font-style: normal; }
.bksi-article .spip_document .spip_doc_legende,
.bksi-article .spip_document .spip_doc_descriptif{ font-style: italic; }


/* teinte “cuivre soft” si color-mix est dispo */
@supports (color: color-mix(in srgb, #fff 85%, #000 15%)) {
  .bksi-article .spip_document .spip_doc_titre,
  .bksi-article .spip_document .spip_doc_legende,
  .bksi-article .spip_document .spip_doc_descriptif,
  .bksi-article figure figcaption{
    color: color-mix(in srgb, #ffffff 85%, var(--bksi-accent, #ff9b40));
  }
}

/* Filet cuivre au-dessus (quelle que soit la balise) */
.bksi-article .spip_document .spip_doc_titre::before,
.bksi-article .spip_document .spip_doc_legende::before,
.bksi-article .spip_document .spip_doc_descriptif::before,
.bksi-article figure figcaption::before{
  content: "";
  position: absolute;
  top: -8px;                 /* ajuste -6/-10 si besoin */
  left: 50%;
  transform: translateX(-50%);
  width: 120px;              /* ajuste 80–160px selon l’image */
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--bksi-accent, #ff9b40), transparent);
  opacity: .7;
}

/* Positionnement relatif pour les éléments qui n’en avaient pas */
.bksi-article .spip_document .spip_doc_titre,
.bksi-article .spip_document .spip_doc_legende,
.bksi-article .spip_document .spip_doc_descriptif,
.bksi-article figure figcaption{
  position: relative;
}



/* ---------- Encadrés BKSI (factorisés) ---------- */
.bksi-rp{border-radius:10px;padding:14px 16px;margin:14px 0 22px;box-shadow:0 8px 24px rgba(0,0,0,.35);
  border:1px solid color-mix(in oklab,var(--rp-color) 35%,transparent);
  background:linear-gradient(180deg,color-mix(in oklab,var(--rp-color) 16%,#0f1319),color-mix(in oklab,var(--rp-color) 8%,#0b0e12))}
.bksi-rp strong{color:var(--rp-fg,var(--text))}
.bksi-rp.info{--rp-color:var(--info);--rp-fg:var(--info-fg)}
.bksi-rp.warning{--rp-color:var(--warn);--rp-fg:var(--warn-fg)}
.bksi-rp.alert,.bksi-rp.danger{--rp-color:var(--alert);--rp-fg:var(--alert-fg)}
.bksi-rp.success{--rp-color:var(--success);--rp-fg:var(--success-fg)}

/* ---------- Couleurs texte ---------- */
.bksi-text-info{color:var(--info-fg)} .bksi-text-warning{color:var(--warn-fg)}
.bksi-text-alert{color:var(--alert-fg)} .bksi-text-success{color:var(--success-fg)}
.bksi-text-accent{color:var(--accent)} .bksi-text-accent-soft{color:var(--accent-2)}
.bksi-muted{color:var(--muted)} .bksi-strong{font-weight:700}

/* ---------- Badges génériques ---------- */
.badge{
  --bdg-fg:var(--text); --bdg-bg:rgba(255,255,255,var(--a12)); --bdg-bd:rgba(255,255,255,var(--a20));
  display:inline-flex;align-items:center;gap:.4em;
  font:700 .8rem/1.3 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;letter-spacing:.02em;text-transform:uppercase;
  padding:.35em .6em;border-radius:.6rem;color:var(--bdg-fg);background:var(--bdg-bg);border:1px solid var(--bdg-bd);
  transition:transform .12s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;white-space:nowrap}
.badge-info{--bdg-fg:var(--info-fg);--bdg-bg:rgba(0,184,255,var(--a12));--bdg-bd:rgba(0,184,255,var(--a35))}
.badge-warning{--bdg-fg:var(--warn-fg);--bdg-bg:rgba(255,184,0,var(--a12));--bdg-bd:rgba(255,184,0,var(--a35))}
.badge-alert{--bdg-fg:var(--alert-fg);--bdg-bg:rgba(255,60,60,var(--a12));--bdg-bd:rgba(255,60,60,var(--a35))}
.badge-success{--bdg-fg:var(--success-fg);--bdg-bg:rgba(0,200,100,var(--a12));--bdg-bd:rgba(0,200,100,var(--a35))}
.badge-orange{--bdg-fg:var(--accent);--bdg-bg:rgba(217,123,41,var(--a12));--bdg-bd:var(--accent)}
.badge:hover{transform:translateY(-1px);box-shadow:0 0 0 2px color-mix(in oklab,var(--bdg-fg) 20%,transparent),0 6px 16px -8px color-mix(in oklab,var(--bdg-fg) 35%,transparent)}
.badge--outline{--bdg-bg:transparent;background:transparent}
.badge--pill{border-radius:9999px}
.badge--sm{font-size:.7rem;padding:.28em .5em}
.badge--lg{font-size:.95rem;padding:.45em .75em}
.badge>svg,.badge>i{width:1em;height:1em;display:inline-block}

/* ---------- Fallback si color-mix non supporté ---------- */
@supports not (background: color-mix(in oklab,#fff 10%,transparent)){
  .bksi-rp.info{background:linear-gradient(180deg,#141a22,#0f1319);border-color:rgba(0,184,255,.35)}
  .bksi-rp.warning{background:linear-gradient(180deg,#1f1a14,#19130f);border-color:rgba(255,184,0,.35)}
  .bksi-rp.alert,.bksi-rp.danger{background:linear-gradient(180deg,#1f1414,#190f0f);border-color:rgba(255,60,60,.35)}
  .bksi-rp.success{background:linear-gradient(180deg,#141f17,#0f1912);border-color:rgba(0,200,100,.35)}
}

/* ---------- Docs ---------- */
.bksi-docs{margin:18px 0}
.doc-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.doc-list .doc{display:block;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.04);text-decoration:none}

/* ---------- Harmonisation & Animations ---------- */
.page-article .bksi-block-title{position:relative;padding-bottom:6px}
.page-article .bksi-block-title::after{content:"";position:absolute;left:0;bottom:0;width:84px;height:3px;background:var(--accent);border-radius:3px;box-shadow:0 0 16px rgba(255,155,64,.4)}
.page-article .bksi-article,.page-article .post-hero,.page-article .bksi-docs{opacity:0;transform:translateY(10px);animation:articleFadeUp .5s ease forwards}
.page-article .bksi-article{animation-delay:.05s}.page-article .post-hero{animation-delay:.15s}.page-article .bksi-docs{animation-delay:.25s}
@keyframes articleFadeUp{to{opacity:1;transform:translateY(0)}}

/* ---------- Layout ---------- */
body.page-article main.wrap{max-width:1200px;width:100%;margin:18px auto 48px;padding:0 16px;box-sizing:border-box}

/* ---------- Hero plein écran safe ---------- */
body.page-article .bksi-lore-banner{width:100%;max-width:100vw;margin-left:0;margin-right:0;overflow:hidden}

/* ---------- Badges BKSI Grades (public) ---------- */
.badge-initiate {
  --bdg-fg: var(--info-fg);
  --bdg-bg: rgba(0,184,255,var(--a12));
  --bdg-bd: rgba(0,184,255,var(--a35));
}
.badge-operative {
  --bdg-fg: var(--accent);
  --bdg-bg: rgba(217,123,41,var(--a12));
  --bdg-bd: var(--accent);
}
.badge-core {
  --bdg-fg: var(--alert-fg);
  --bdg-bg: rgba(255,60,60,var(--a12));
  --bdg-bd: rgba(255,60,60,var(--a35));
}
.badge-ombre {
  --bdg-fg: var(--muted);
  --bdg-bg: rgba(255,255,255,var(--a12));
  --bdg-bd: rgba(255,255,255,var(--a20));
}
.badge-fondateur {
  --bdg-fg: gold;
  --bdg-bg: rgba(255,215,0,.12);
  --bdg-bd: rgba(255,215,0,.35);
}
/* —— BADGES BKSI : application directe des couleurs quand la variante est sur la même balise —— */
.badge.badge-initiate  { --bdg-fg: var(--info-fg);  --bdg-bg: rgba(0,184,255,var(--a12)); --bdg-bd: rgba(0,184,255,var(--a35)); color:var(--bdg-fg); background:var(--bdg-bg); border-color:var(--bdg-bd); }
.badge.badge-operative { --bdg-fg: var(--accent);   --bdg-bg: rgba(217,123,41,var(--a12)); --bdg-bd: var(--accent);          color:var(--bdg-fg); background:var(--bdg-bg); border-color:var(--bdg-bd); }
.badge.badge-core      { --bdg-fg: var(--alert-fg); --bdg-bg: rgba(255,60,60,var(--a12));  --bdg-bd: rgba(255,60,60,var(--a35)); color:var(--bdg-fg); background:var(--bdg-bg); border-color:var(--bdg-bd); }
.badge.badge-ombre     { --bdg-fg: var(--muted);    --bdg-bg: rgba(255,255,255,var(--a12));--bdg-bd: rgba(255,255,255,var(--a20)); color:var(--bdg-fg); background:var(--bdg-bg); border-color:var(--bdg-bd); }
.badge.badge-fondateur { --bdg-fg: gold;            --bdg-bg: rgba(255,215,0,.12);         --bdg-bd: rgba(255,215,0,.35);    color:var(--bdg-fg); background:var(--bdg-bg); border-color:var(--bdg-bd); }

/* —— Cas où Porte-Plume IMBRIQUE (parent .badge + enfant .badge-xxx) —— */
.badge:has(.badge-initiate)  { --bdg-fg: var(--info-fg);  --bdg-bg: rgba(0,184,255,var(--a12)); --bdg-bd: rgba(0,184,255,var(--a35)); }
.badge:has(.badge-operative) { --bdg-fg: var(--accent);   --bdg-bg: rgba(217,123,41,var(--a12)); --bdg-bd: var(--accent); }
.badge:has(.badge-core)      { --bdg-fg: var(--alert-fg); --bdg-bg: rgba(255,60,60,var(--a12));  --bdg-bd: rgba(255,60,60,var(--a35)); }
.badge:has(.badge-ombre)     { --bdg-fg: var(--muted);    --bdg-bg: rgba(255,255,255,var(--a12));--bdg-bd: rgba(255,255,255,var(--a20)); }
.badge:has(.badge-fondateur) { --bdg-fg: gold;            --bdg-bg: rgba(255,215,0,.12);         --bdg-bd: rgba(255,215,0,.35); }

/* (Optionnel) augmente un poil la spécificité si un autre framework force .badge */
.page-article .badge { font-weight: 700; }
/* ---------- Meta Article (date + auteur) ---------- */
.bksi-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 4px 0 10px;
  font-size: .9rem;
  line-height: 1.3;
  color: var(--muted);
  opacity: .9;
}
.bksi-meta__text {
  font-style: italic;
}
.bksi-meta__sep {
  opacity: .5;
  margin: 0 .3rem;
}

/* Icônes */
.bksi-meta__icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  -webkit-mask: no-repeat center/contain;
          mask: no-repeat center/contain;
  background-color: currentColor;
  opacity: .85;
}

/* Icône calendrier */
.bksi-meta__icon--calendar {
  -webkit-mask-image: url('/squelettes/img/icones/icon-calendar.svg');
          mask-image: url('/squelettes/img/icones/icon-calendar.svg');
}

/* Icône auteur */
.bksi-meta__icon--user {
  -webkit-mask-image: url('/squelettes/img/icones/icon-user.svg');
          mask-image: url('/squelettes/img/icones/icon-user.svg');
}

/* Survol léger (optionnel) */
.bksi-meta:hover {
  opacity: 1;
}
/* Anti-doublon : si deux .bksi-meta se suivent dans le header, on n'affiche que le premier */
.post-header .bksi-meta + .bksi-meta,
.post-header .bksi-meta ~ .bksi-meta {
  display: none !important;
}
/* Variante compacte pour la seconde ligne */
.bksi-meta--sm{font-size:.8rem; gap:.35rem; opacity:.8}
.bksi-meta--sm .bksi-meta__icon{width:14px; height:14px; opacity:.8}

/* Icône refresh */
.bksi-meta__icon--refresh{
  -webkit-mask-image: url('/squelettes/img/icones/icon-refresh.svg');
          mask-image: url('/squelettes/img/icones/icon-refresh.svg');
}
/* ----- Palette meta (icônes colorées, texte discret) ----- */
.bksi-meta{ color: var(--muted); }

/* Couleurs d’icônes (masques) */
.bksi-meta__icon--calendar{ background-color: var(--accent); }   /* cuivre/orange BKSI */
.bksi-meta__icon--user    { background-color: color-mix(in srgb, var(--accent) 35%, #fff 65%); } /* cuivre adouci */
.bksi-meta__icon--refresh { background-color: var(--info); }     /* bleu “info” pour MAJ */

/* Séparateur un poil atténué */
.bksi-meta__sep{ opacity:.45; }

/* Micro-hover très soft (ne vole pas la vedette) */
.bksi-meta:hover .bksi-meta__icon{ opacity:.95; }
.bksi-meta:hover{ opacity:1; }