/* ============================================================
   BKSI — Styles membres
   Fichier : bksi-membres.css
   Version : 3.1.0 (2025-08-17)
   Auteur : Nagalty
   Notes :
     - Nettoyage complet, suppression des doublons
     - Overlays + fade header/nav
     - Style “ancien” corrigé (titre & badges colorés)
   ============================================================ */

/* === GRILLE FICHE MEMBRE === */
.bksi-member-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
  align-items: start;
}
.col.portrait {
  display: flex;
  align-items: center;
  justify-content: center;
}
.member-photo {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  cursor: zoom-in;
  transition: transform .25s ease, filter .25s ease;
}
.member-photo:hover {
  transform: scale(1.02);
  filter: brightness(1.05);
}
/* === FIN GRILLE FICHE MEMBRE === */

/* === HEADER INFOS === */
.bksi-member-title {
  font-size: 1.8rem;
  margin-bottom: .25rem;
}
.bksi-member-sub {
  font-size: 1.1rem;
  color: #bbb;
}
.bksi-member-desc {
  margin-top: .25rem;
  font-style: italic;
  color: #aaa;
}
/* === FIN HEADER INFOS === */

/* === LIGNES STATUT & GRADE === */
/* === BADGES — STYLES DE BASE UNIFIÉS === */
.badge,
.tag,
.tag-status{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .32rem .64rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .85rem;
  line-height: 1;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: #e8edf3;
  vertical-align: middle;
}

/* petit point couleur en option, comme indicateur */
.tag-status::before{
  content:"";
  width:.5rem; height:.5rem; border-radius:50%;
  background: currentColor;
  opacity:.9;
}

/* Harmonisation : quand une variante colorée est appliquée,
   on renforce le contraste du contour/fond en fonction de la couleur */
.badge[class*="badge-"],
.tag-status[class*="tag-status-"]{
  border-color: color-mix(in oklab, currentColor 65%, #000);
}

/* === FIN BADGES — STYLES DE BASE UNIFIÉS === */

.bksi-member-status-line,
.bksi-member-grade-line {
  margin: .6rem 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bksi-member-status-line .label,
.bksi-member-grade-line .label {
  font-weight: bold;
  color: #fff;
  margin-right: 8px;
}
.status-ico img,
.grade-ico img {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  cursor: zoom-in;
  transition: transform .2s ease, filter .2s ease;
}
.status-ico img:hover,
.grade-ico img:hover {
  transform: scale(1.1);
  filter: brightness(1.1);
}
/* === FIN LIGNES STATUT & GRADE === */

/* === SÉPARATEUR === */
.member-sep {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 1rem 0;
}
/* === FIN SÉPARATEUR === */

/* === CORPS (BIO) === */
.bksi-member-body {
  line-height: 1.6;
  color: #ddd;
}
/* === FIN CORPS (BIO) === */

/* === OVERLAYS GLOBAUX === */
.photo-zoom-overlay,
.status-zoom-overlay,
.grade-zoom-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: min(4vw, 40px);
  background: rgba(0,0,0,.86);
  z-index: 2147483647;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}
.photo-zoom-overlay::before,
.status-zoom-overlay::before,
.grade-zoom-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center,
    rgba(255,155,64,.25) 0%,
    rgba(0,0,0,0) 70%);
  pointer-events: none;
  z-index: 0;
}
.photo-zoom-overlay img,
.status-zoom-overlay img,
.grade-zoom-overlay img {
  max-width: min(95vw, 1600px);
  max-height: 90vh;
  border-radius: 14px;
  box-shadow: 0 30px 50px rgba(0,0,0,.6);
  position: relative;
  z-index: 1;
}
.photo-zoom-overlay.active,
.status-zoom-overlay.active,
.grade-zoom-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.overlay-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  z-index: 2;
  transition: background .2s ease, transform .15s ease, box-shadow .18s ease;
}
.overlay-close:hover,
.overlay-close:focus-visible {
  transform: scale(1.1);
  background: rgba(255,155,64,.9);
  box-shadow: 0 0 12px rgba(255,155,64,.55);
  outline: none;
}
/* === FIN OVERLAYS GLOBAUX === */

/* === ANIMATIONS OVERLAYS === */
@keyframes bksiFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes overlayZoomSmooth {
  0%   { transform: scale(0.96); opacity: 0; filter: blur(2px); }
  60%  { transform: scale(1.02); opacity: 1; filter: none; }
  100% { transform: scale(1); }
}
.photo-zoom-overlay.active,
.status-zoom-overlay.active,
.grade-zoom-overlay.active {
  animation: bksiFadeIn .18s ease-out both;
}
.photo-zoom-overlay.active img,
.status-zoom-overlay.active img,
.grade-zoom-overlay.active img {
  animation: overlayZoomSmooth .35s cubic-bezier(.25,.8,.25,1) both;
}
@keyframes overlayZoomOut {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(.96); opacity: 0; filter: blur(2px); }
}
.photo-zoom-overlay.closing img,
.status-zoom-overlay.closing img,
.grade-zoom-overlay.closing img {
  animation: overlayZoomOut .25s ease forwards;
}
/* === FIN ANIMATIONS OVERLAYS === */

/* === ACCESSIBILITÉ & FADE HEADER/NAV === */
@media (prefers-reduced-motion: reduce){
  .photo-zoom-overlay, .status-zoom-overlay, .grade-zoom-overlay,
  .photo-zoom-overlay img, .status-zoom-overlay img, .grade-zoom-overlay img,
  .overlay-close { animation:none!important; transition:none!important; }
}
header, .site-header, .hero-wrapper, .bksi-hero-nav {
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
}
.overlay-open header,
.overlay-open .site-header,
.overlay-open .hero-wrapper,
.overlay-open .bksi-hero-nav {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-4px);
  z-index: 0 !important;
}
/* === FIN ACCESSIBILITÉ & FADE HEADER/NAV === */

/* === STYLE ANCIEN — LEGACY MEMBER (corrigé) === */
.page-article .legacy-member .bksi-member-grid {
  grid-template-columns: 360px 1fr !important;
  gap: 18px !important;
}
.page-article .legacy-member .col.portrait {
  justify-content: flex-start !important;
}
.page-article .legacy-member .member-photo {
  max-width: 360px !important;
  width: 100% !important;
  height: auto !important;
}

/* TITRE coloré par grade */
.page-article .legacy-member .bksi-member-title {
  font-size: clamp(2rem,3.8vw,2.6rem) !important;
  line-height: 1.15 !important;
  margin: 0 !important;
  text-shadow: none !important;
}
.page-article .legacy-member .bksi-member-title.grade-black-initiate { color:#2196f3 !important; }
.page-article .legacy-member .bksi-member-title.grade-black-operative { color:#ff9800 !important; }
.page-article .legacy-member .bksi-member-title.grade-black-core { color:#e53935 !important; }
.page-article .legacy-member .bksi-member-title.grade-black-ombres { color:#bdbdbd !important; }
.page-article .legacy-member .bksi-member-title.grade-black-fondateur { color:#f6c453 !important; }

/* SOUS-TITRE : barre suit la couleur du titre */
.page-article .legacy-member .bksi-member-sub {
  margin: 6px 0 0 !important;
  font-style: italic !important;
  padding-left: 12px !important;
  border-left: 2px solid var(--bksi-orange) !important; /* toujours orange */
  color:#cfd6dd !important;
  opacity:.95 !important;
}

.page-article .legacy-member .bksi-member-desc {
  margin: 10px 0 0 !important;
  color:#bfc6cc !important;
}

/* SÉPARATEUR */
.page-article .legacy-member .member-sep {
  height: 2px !important;
  background: linear-gradient(90deg, rgba(255,255,255,.40), rgba(255,255,255,0) 42%) !important;
  margin: 12px 0 16px !important;
}

/* BADGES GRADE */
.page-article .legacy-member .badge-black-initiate { background:#2196f3 !important; color:#fff !important; }
.page-article .legacy-member .badge-black-operative { background:#ff9800 !important; color:#000 !important; }
.page-article .legacy-member .badge-black-core { background:#e53935 !important; color:#fff !important; }
.page-article .legacy-member .badge-black-ombres { background:#bdbdbd !important; color:#000 !important; }
.page-article .legacy-member .badge-black-fondateur { background:#f6c453 !important; color:#000 !important; }

/* BADGES STATUT */
.page-article .legacy-member .tag-status-black-initiate { background:#2196f3 !important; color:#fff !important; }
.page-article .legacy-member .tag-status-black-operative { background:#ff9800 !important; color:#000 !important; }
.page-article .legacy-member .tag-status-black-core { background:#e53935 !important; color:#fff !important; }
.page-article .legacy-member .tag-status-black-ombres { background:#bdbdbd !important; color:#000 !important; }
.page-article .legacy-member .tag-status-black-fondateur { background:#f6c453 !important; color:#000 !important; }

/* CORPS TEXTE */
.page-article .legacy-member .bksi-member-body {
  max-width:none !important;
  color:#e9eef3 !important;
}
.page-article .legacy-member .bksi-member-body.bksi-bio.two-cols {
  column-count: 2 !important;
  column-gap: 40px !important;
  max-width: unset !important;
}
@media (max-width:1100px){
  .page-article .legacy-member .bksi-member-body.bksi-bio.two-cols {
    column-count: 1 !important;
    max-width: 78ch !important;
  }
}
.page-article .legacy-member .bksi-member-body p:first-of-type::first-letter {
  float: none !important;
  font-size: inherit !important;
  line-height: inherit !important;
  margin: 0 !important;
  font-weight: inherit !important;
  color: inherit !important;
  text-shadow: none !important;
}

/* LIGNES LABELS */
.page-article .legacy-member .bksi-member-status-line,
.page-article .legacy-member .bksi-member-grade-line {
  margin:.6rem 0 !important;
  gap:8px !important;
}
.page-article .legacy-member .bksi-member-status-line .label,
.page-article .legacy-member .bksi-member-grade-line .label {
  font-weight:700 !important;
  color:#fff !important;
}
/* === FIN LIGNES LABELS === */
/* === POLISHES === */
.page-article .legacy-member .bksi-member-grade-line {
  margin-bottom: 1rem !important; /* un peu plus d’air sous les badges */
}

.page-article .legacy-member .bksi-member-body blockquote {
  max-width: 48ch; /* citation plus compacte */
}
/* === FIN POLISHES === */
/* === FIN STYLE ANCIEN — LEGACY MEMBER === */
/* === CITATIONS (BIO & AUTRES) === */
.page-article .legacy-member blockquote,
.page-article .legacy-member .bksi-quote {
  margin: 1rem 0;
  padding: .9rem 1rem .9rem 1.1rem;
  background: rgba(255,255,255,.03);
  border-left: 3px solid var(--bksi-orange) !important; /* orange BKSI fixe */
  border-radius: .6rem;
  font-style: italic;
  color: #e0e5ea;
}
/* === FIN CITATIONS === */
/* === HARMONISATION BADGES STATUT = BADGES GRADE === */
.tag-status::before { content: none !important; }           /* enlève le point */
.tag-status { text-transform: uppercase !important; }       /* même casse que .badge */
.badge, .tag, .tag-status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .7rem;
  line-height: 1;
  border-radius: 999px;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .02em;
  border: 1px solid color-mix(in oklab, currentColor 65%, #000);
}
/* === CORRECTION CITATIONS EN COLONNES === */
.page-article .legacy-member .bksi-member-body blockquote,
.page-article .legacy-member .bksi-member-body .bksi-quote {
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  display: block;
  width: 100%;
}
/* === FIN CORRECTION CITATIONS === */