/* ===========================================================
   VB.com — modèle commun des pages du menu « Fans » (#fn)
   (/louisxiv, /henriiv, /soraya, /olgaromanov …)
   Maquette validée le 29/10/2026 (thème clair).
   Chargé par chaque page : /assets/css/fans.css
   Toutes les règles sont préfixées .fn (Bootstrap 3 intact).
   =========================================================== */
.fn{
  --fn-bg:#fff; --fn-alt:#f7f5f1; --fn-chip:#efece6; --fn-line:#e4e0d8;
  --fn-ink:#1d1b19; --fn-muted:#6f6a63; --fn-red:#b12121; --fn-orange:#e07a2c; --fn-dark:#171412;
  --fn-fd:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --fn-fb:"Figtree","Segoe UI",Arial,sans-serif;
  max-width:1100px;margin:0 auto;padding:8px 0 40px;text-align:left;
  font:15px/1.55 var(--fn-fb);color:var(--fn-ink);background:var(--fn-bg);
}
.fn *{box-sizing:border-box}
.fn img{max-width:100%;height:auto}
.fn [hidden]{display:none!important}
.fn :focus-visible{outline:2px solid var(--fn-orange);outline-offset:2px}
.fn .fn-eyebrow{font:600 12px/1.2 var(--fn-fb);letter-spacing:.14em;text-transform:uppercase;color:var(--fn-orange);margin:0 0 10px}

/* En-tête */
.fn .fn-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;padding:22px 0 18px}
.fn .fn-hero h1{font:400 52px/1.05 var(--fn-fd);margin:0;color:var(--fn-ink)}
.fn .fn-dates{font:400 22px/1.2 var(--fn-fd);color:var(--fn-red);margin:6px 0 0}
.fn .fn-tag{margin:8px 0 0;color:var(--fn-muted);font-size:16px}
.fn .fn-lang{display:flex;gap:6px}
.fn .fn-lang a{display:inline-flex;align-items:center;border:1px solid var(--fn-line);border-radius:999px;padding:6px 12px;text-decoration:none;color:var(--fn-ink);font:600 12.5px var(--fn-fb)}
.fn .fn-lang a[aria-current="true"]{background:var(--fn-ink);border-color:var(--fn-ink);color:#fff}

/* Diaporama */
.fn .fn-show{background:var(--fn-dark);border-radius:16px;overflow:hidden;color:#fff}
.fn .fn-stage{position:relative;aspect-ratio:16/9;max-height:620px;width:100%;overflow:hidden;background:var(--fn-dark)}
.fn .fn-blur{position:absolute;inset:-30px;background-size:cover;background-position:center;filter:blur(28px) brightness(.45);transform:scale(1.1)}
.fn .fn-stage>img{position:absolute;inset:0;margin:auto;width:100%;height:100%;max-width:none;object-fit:contain;opacity:0;transition:opacity .45s;cursor:zoom-in}
.fn .fn-stage>img.on{opacity:1}
.fn .fn-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.88);color:var(--fn-ink);display:grid;place-items:center;cursor:pointer;z-index:2;padding:0}
.fn .fn-nav:hover{background:#fff;color:var(--fn-red)}
.fn .fn-nav svg{width:20px;height:20px}
.fn .fn-prev{left:14px}.fn .fn-next{right:14px}
.fn .fn-tools{position:absolute;right:14px;top:14px;display:flex;gap:6px;z-index:2}
.fn .fn-tools button{border:0;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font:600 12px var(--fn-fb);padding:7px 11px;cursor:pointer}
.fn .fn-tools button:hover{background:rgba(0,0,0,.8)}
.fn .fn-cap{display:flex;gap:16px;align-items:flex-start;padding:14px 18px;border-top:1px solid rgba(255,255,255,.08)}
.fn .fn-num{flex:none;font:700 13px var(--fn-fb);color:#f0b48a;font-variant-numeric:tabular-nums;padding-top:2px}
.fn .fn-cap p{margin:0;font:400 16px/1.45 var(--fn-fd);color:#f4efe8;min-height:23px}
.fn .fn-thumbs{display:flex;gap:8px;overflow-x:auto;padding:0 18px 16px;scrollbar-width:thin;scrollbar-color:#555 transparent}
.fn .fn-thumbs button{flex:none;width:92px;height:58px;border-radius:8px;overflow:hidden;border:2px solid transparent;padding:0;background:#000;cursor:pointer;opacity:.55;transition:opacity .2s,border-color .2s}
.fn .fn-thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.fn .fn-thumbs button:hover{opacity:.9}
.fn .fn-thumbs button.on{border-color:var(--fn-orange);opacity:1}

/* Lignée / liens */
.fn .fn-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:22px 0 0;padding:14px 16px;background:var(--fn-alt);border-radius:12px;font-size:13.5px}
.fn .fn-line b{font:600 11px var(--fn-fb);letter-spacing:.12em;text-transform:uppercase;color:var(--fn-muted);margin-right:4px}
.fn .fn-line a,.fn .fn-line span.me{display:inline-flex;flex-direction:column;border:1px solid var(--fn-line);background:#fff;border-radius:10px;padding:6px 10px;text-decoration:none;color:var(--fn-ink);line-height:1.2}
.fn .fn-line a:hover{border-color:var(--fn-red);color:var(--fn-red)}
.fn .fn-line small{color:var(--fn-muted);font-size:11.5px}
.fn .fn-line span.me{border-color:var(--fn-red);color:var(--fn-red)}

/* Lecture */
.fn .fn-read{display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;margin-top:40px}
.fn .fn-read.fn-notoc{grid-template-columns:minmax(0,1fr)}
.fn .fn-toc{position:-webkit-sticky;position:sticky;top:calc(var(--vb-sticky-top,0px) + 20px);align-self:start;font-size:13.5px}
.fn .fn-toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--fn-line)}
.fn .fn-toc li a{display:block;padding:6px 0 6px 14px;margin-left:-2px;border-left:2px solid transparent;color:var(--fn-muted);text-decoration:none}
.fn .fn-toc li a:hover{color:var(--fn-ink)}
.fn .fn-toc li a.on{border-left-color:var(--fn-red);color:var(--fn-red);font-weight:600}
.fn .fn-rt{margin:14px 0 0;color:var(--fn-muted);font-size:12.5px}
.fn .fn-art{max-width:700px;font:400 18px/1.75 var(--fn-fd);color:#2a2622}
.fn .fn-notoc .fn-art{margin:0 auto}
.fn .fn-art h2{font:400 32px/1.2 var(--fn-fd);color:var(--fn-ink);margin:48px 0 16px;clear:both;scroll-margin-top:calc(var(--vb-sticky-top,0px) + 20px)}
.fn .fn-art h2:first-child{margin-top:0}
.fn .fn-art p{margin:0 0 18px}
.fn .fn-art .fn-lead{font-size:21px;line-height:1.6;color:var(--fn-ink)}
.fn .fn-art .fn-lead::first-letter{float:left;font:700 76px/.82 var(--fn-fd);color:var(--fn-red);margin:6px 10px 0 0}
.fn .fn-art a{color:var(--fn-red);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.fn .fn-art strong{color:var(--fn-ink)}
.fn .fn-year{font:700 15px var(--fn-fb);color:var(--fn-orange);margin-right:6px}
.fn .fn-art figure{margin:28px 0}
.fn .fn-art figure img{display:block;width:100%;border-radius:10px}
.fn .fn-art figcaption{font:400 13.5px/1.5 var(--fn-fb);color:var(--fn-muted);margin-top:8px}
.fn .fn-art{overflow-wrap:break-word}
.fn .fn-art figure.side{float:right;clear:both;width:46%;margin:6px 0 18px 26px}
.fn .fn-art figure.left{float:left;clear:both;width:46%;margin:6px 26px 18px 0}
.fn .fn-art figure.logo{clear:both}
.fn .fn-art figure.logo img{width:auto;max-width:100%;margin:0 auto;border-radius:0}
.fn .fn-art figure.logo figcaption{text-align:center}
.fn .fn-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:28px 0;clear:both}
.fn .fn-pair figure{margin:0}
.fn .fn-pair img{aspect-ratio:4/3;object-fit:cover}
.fn blockquote.fn-q{margin:34px 0;padding:22px 0;border:0;border-top:1px solid var(--fn-line);border-bottom:1px solid var(--fn-line);font:italic 400 26px/1.35 var(--fn-fd);color:var(--fn-red);text-align:center;clear:both}
.fn .fn-vid{margin:28px 0;clear:both}
.fn .fn-scr{position:relative;display:grid;place-items:center;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;text-decoration:none!important}
.fn .fn-scr img,.fn .fn-scr iframe{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;border:0}
.fn .fn-scr em{position:absolute;left:12px;bottom:10px;z-index:1;font:600 12px var(--fn-fb);font-style:normal;color:#fff;background:rgba(0,0,0,.55);border-radius:999px;padding:4px 10px}
.fn .fn-pl{position:relative;z-index:1;width:60px;height:60px;border-radius:50%;background:var(--fn-red);display:grid;place-items:center;transition:transform .15s}
.fn .fn-pl svg{width:24px;height:24px;margin-left:3px}
.fn .fn-scr:hover .fn-pl{transform:scale(1.08)}
.fn .fn-books{margin:28px 0;clear:both;text-align:center}
.fn .fn-ad{margin:34px 0;padding:10px 0;border-top:1px solid var(--fn-line);border-bottom:1px solid var(--fn-line);text-align:center;clear:both;min-height:120px}
.fn .fn-ad-l{display:block;font:600 10.5px/1 var(--fn-fb);letter-spacing:.12em;text-transform:uppercase;color:var(--fn-muted);margin:0 0 8px}
.fn .fn-clear{clear:both}

/* Généalogie (tableau filtrable) */
.fn .fn-gen{margin:24px 0;clear:both}
.fn .fn-gen-lab{display:block;font:600 13px var(--fn-fb);color:var(--fn-muted);margin:0 0 6px}
.fn .fn-gen-q{width:100%;border:1px solid var(--fn-line);border-radius:12px;padding:12px 14px;font:16px var(--fn-fb);margin:0 0 14px;background:#fff;color:var(--fn-ink);box-shadow:none;height:auto}
.fn .fn-gen-q:focus{outline:none;border-color:var(--fn-orange);box-shadow:0 0 0 3px rgba(224,122,44,.2)}
.fn .fn-gen-list{display:grid;gap:12px}
.fn .fn-gen-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px;border:1px solid var(--fn-line);border-radius:12px;padding:14px;background:#fff;font:400 15px/1.55 var(--fn-fb)}
.fn .fn-gen-row figure{margin:0}
.fn .fn-gen-row figure img{width:100%;border-radius:8px}
.fn .fn-gen-row figcaption{font-size:12.5px;color:var(--fn-muted);margin-top:6px}
.fn .fn-gen-k{display:inline-block;font:700 12px/1 var(--fn-fb);letter-spacing:.1em;text-transform:uppercase;color:var(--fn-orange);background:#fdf1e7;border-radius:999px;padding:5px 9px;margin:0 0 6px}
.fn .fn-gen-t img.fn-gen-mini{display:block;width:100%;max-width:320px;border-radius:8px;margin:10px 0}
.fn .fn-gen-none{color:var(--fn-muted)}
@media (max-width:640px){.fn .fn-gen-row{grid-template-columns:1fr}}

/* Autres Fans */
.fn .fn-fans{margin-top:56px;padding-top:28px;border-top:1px solid var(--fn-line);clear:both}
.fn .fn-fans h2{font:400 28px/1.2 var(--fn-fd);margin:0 0 16px;color:var(--fn-ink)}
.fn .fn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.fn .fn-grid a{display:flex;flex-direction:column;gap:2px;border:1px solid var(--fn-line);border-radius:10px;padding:10px 12px;text-decoration:none;color:var(--fn-ink);font:400 16px/1.25 var(--fn-fd)}
.fn .fn-grid a small{font:12px var(--fn-fb);color:var(--fn-muted)}
.fn .fn-grid a:hover{border-color:var(--fn-red);color:var(--fn-red)}
.fn .fn-grid a[aria-current="page"]{background:var(--fn-ink);border-color:var(--fn-ink);color:#fff}
.fn .fn-grid a[aria-current="page"] small{color:#ddd}

/* Plein écran */
.fn-lb{position:fixed;inset:0;background:rgba(10,8,7,.94);z-index:2000;display:grid;grid-template-rows:1fr auto;padding:20px}
.fn-lb[hidden]{display:none!important}
.fn-lb img{max-width:100%;max-height:100%;margin:auto;object-fit:contain}
.fn-lb p{color:#eee;text-align:center;margin:12px auto 0;max-width:80ch;font:15px/1.5 "Libre Caslon Text",Georgia,serif}
.fn-lb button{position:absolute;top:16px;right:16px;border:0;border-radius:999px;padding:8px 14px;font:600 13px "Figtree",Arial,sans-serif;cursor:pointer;background:#fff;color:#1d1b19}
@media (prefers-reduced-motion:reduce){.fn *{transition:none!important}}
@media (max-width:860px){
  .fn .fn-read{grid-template-columns:minmax(0,1fr);gap:20px}.fn .fn-toc,.fn .fn-art{min-width:0}.fn .fn-toc li{min-width:0;max-width:100%}.fn .fn-toc li a{overflow-wrap:anywhere}
  .fn .fn-toc{position:static}.fn .fn-toc ol{display:flex;flex-wrap:wrap;gap:6px;border:0}.fn .fn-toc li a{border:1px solid var(--fn-line);border-radius:999px;padding:5px 10px;margin:0}.fn .fn-toc li a.on{border-color:var(--fn-red)}
  .fn .fn-hero h1{font-size:38px}
  .fn .fn-art figure.side,.fn .fn-art figure.left{float:none;width:100%;margin:24px 0}
  .fn .fn-art{font-size:17px}.fn .fn-art .fn-lead{font-size:19px}
  .fn .fn-nav{width:38px;height:38px}
  .fn blockquote.fn-q{font-size:21px}
}