/* ============================================================
   blog.css — Journal de la Loge France N°9
   Esthétique noir & or, lecture éditoriale, performance
   ============================================================ */
:root{
  color-scheme:dark;
  --bg0-rgb:8,8,10; --bg1-rgb:20,20,26; --bg2-rgb:29,29,36; --bgblue-rgb:17,19,31;
  --gold-rgb:201,169,106; --gold-d-rgb:138,109,59; --gold-l-rgb:243,227,176; --gold-r-rgb:255,246,220;
  --ink-rgb:168,162,154;
  --noir:#08080a; --charbon:#14141a; --ardoise:#1d1d24; --bleu-nuit:#11131f;
  --or-sombre:#8a6d3b; --or:#c9a96a; --or-clair:#f3e3b0; --or-reflet:#fff6dc;
  --grad-or:linear-gradient(135deg,#8a6d3b 0%,#c9a96a 32%,#f3e3b0 50%,#c9a96a 68%,#8a6d3b 100%);
  --grad-or-vert:linear-gradient(180deg,#f3e3b0 0%,#c9a96a 45%,#8a6d3b 100%);
  --blanc-casse:#ece7dd; --perle:#a8a29a; --perle-sombre:#6b675f;
  --serif:"Cormorant Garamond",Georgia,serif;
  --lettre:"Spectral","EB Garamond",Georgia,serif;
  --ui:"Inter",system-ui,sans-serif;
  --ease-revele:cubic-bezier(.16,1,.3,1);
  --ease-temple:cubic-bezier(.22,.61,.36,1);
}
/* MODE CLAIR — bone white & bleu métal */
:root[data-theme="light"]{
  color-scheme:light;
  --bg0-rgb:244,240,232; --bg1-rgb:236,229,216; --bg2-rgb:226,218,202; --bgblue-rgb:226,231,240;
  --gold-rgb:44,68,112; --gold-d-rgb:22,35,63; --gold-l-rgb:94,124,178; --gold-r-rgb:150,180,224;
  --ink-rgb:90,97,114;
  --noir:#f4f0e8; --charbon:#ece5d8; --ardoise:#e2dace; --bleu-nuit:#e6eaf1;
  --or-sombre:#16233f; --or:#2c4470; --or-clair:#5e7cb2; --or-reflet:#96b4e0;
  --grad-or:linear-gradient(135deg,#16233f 0%,#2c4470 30%,#5e7cb2 50%,#2c4470 70%,#16233f 100%);
  --grad-or-vert:linear-gradient(180deg,#5e7cb2 0%,#2c4470 45%,#16233f 100%);
  --blanc-casse:#1b2130; --perle:#515a6c; --perle-sombre:#8b8f9b;
  --rouge:#b13a3f; --rouge-rgb:177,58,63;
  --grad-rouge:linear-gradient(135deg,#7a1f24 0%,#b13a3f 30%,#e0686c 50%,#b13a3f 70%,#7a1f24 100%);
}
/* Touches rouge métal, mode clair uniquement — clin d'œil discret à la France */
:root[data-theme="light"] .art-meta .dot{ background:var(--rouge); }
:root[data-theme="light"] .breadcrumb span{ color:var(--rouge); }
:root[data-theme="light"] .prose ul li::before{ color:var(--rouge); }       /* puces ◆ */
:root[data-theme="light"] .post-item .pnum{ color:var(--rouge); }            /* numéros d'articles */
:root[data-theme="light"] .prose blockquote{ border-left-color:var(--rouge); } /* filet des citations */
:root[data-theme="light"] .faq summary::after{ color:var(--rouge); }         /* le + des FAQ */
:root[data-theme="light"] body::before{ mix-blend-mode:multiply; }
:root[data-theme="light"] stop[stop-color="#8a6d3b"]{ stop-color:#16233f; }
:root[data-theme="light"] stop[stop-color="#c9a96a"]{ stop-color:#2c4470; }
:root[data-theme="light"] stop[stop-color="#f3e3b0"]{ stop-color:#5e7cb2; }
:root[data-theme="light"] [stroke="#c9a96a"]{ stroke:#2c4470; }
:root[data-theme="light"] [fill="#c9a96a"]{ fill:#2c4470; }

/* Bascule de thème (injectée dans la nav par theme.js) */
.theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; background:none; border:0; cursor:pointer; color:var(--perle); transition:color .35s var(--ease-temple),transform .6s var(--ease-temple); flex-shrink:0; }
.theme-toggle:hover{ color:var(--or-clair); transform:rotate(20deg); }
.theme-toggle svg{ width:18px; height:18px; }
.theme-toggle .ico-moon{ display:none; }
.theme-toggle .ico-sun{ display:block; }
:root[data-theme="light"] .theme-toggle .ico-sun{ display:none; }
:root[data-theme="light"] .theme-toggle .ico-moon{ display:block; }

body,.bnav,.rcard,.cta-box,.note,.post-item{ transition:background-color .5s var(--ease-temple),border-color .5s var(--ease-temple),color .5s var(--ease-temple); }
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--noir); color:var(--blanc-casse);
  font-family:var(--lettre); font-size:1.16rem; line-height:1.8; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"liga" 1,"onum" 1,"kern" 1;
  overflow-x:hidden;
}
/* Halo doré diffus, très léger, en fond */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%, rgba(var(--gold-rgb),.08), transparent 55%);
}
/* Grain de pierre subtil */
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
::selection{ background:rgba(var(--gold-rgb),.28); color:var(--or-clair); }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
:focus-visible{ outline:2px solid var(--or); outline-offset:3px; border-radius:2px; }

.wrap{ position:relative; z-index:1; }
.container{ width:100%; max-width:740px; margin-inline:auto; padding-inline:clamp(1.3rem,5vw,2rem); }

/* ---------- Navigation ---------- */
.bnav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem clamp(1.3rem,5vw,2.4rem);
  background:rgba(var(--bg0-rgb),.78); backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(var(--gold-rgb),.16);
}
.bnav .brand{ display:flex; align-items:center; gap:.7rem; }
.bnav .brand svg{ width:34px; height:34px; }
.bnav .brand b{ font-family:var(--serif); font-weight:500; font-size:1.05rem; letter-spacing:.06em; }
.bnav .brand span{ display:block; font-family:var(--ui); font-size:.54rem; letter-spacing:.3em; text-transform:uppercase; color:var(--or); }
.bnav .blinks{ display:flex; align-items:center; gap:1.6rem; }
.bnav .blinks a{
  font-family:var(--ui); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--perle); position:relative; transition:color .35s var(--ease-temple);
}
.bnav .blinks a::after{ content:""; position:absolute; left:0; bottom:-3px; height:1px; width:100%; background:var(--grad-or); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease-revele); }
.bnav .blinks a:hover{ color:var(--or-clair); }
.bnav .blinks a:hover::after{ transform:scaleX(1); }
@media (max-width:620px){ .bnav .blinks a.hide-sm{ display:none; } }

/* ---------- Fil d'Ariane ---------- */
.breadcrumb{ font-family:var(--ui); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--perle-sombre); margin-bottom:1.6rem; }
.breadcrumb a{ color:var(--perle); transition:color .3s; }
.breadcrumb a:hover{ color:var(--or); }
.breadcrumb span{ margin:0 .5rem; color:var(--or-sombre); }

/* ---------- En-tête d'article ---------- */
.kicker{ font-family:var(--ui); font-weight:400; font-size:.7rem; letter-spacing:.4em; text-transform:uppercase; color:var(--or); display:inline-flex; align-items:center; gap:1.1em; }
.kicker::before{ content:""; width:42px; height:1px; background:linear-gradient(90deg,transparent,var(--or)); }

.art-header{ padding:clamp(2.5rem,7vw,4.5rem) 0 1.5rem; }
.art-header h1{
  font-family:var(--serif); font-weight:400; line-height:1.08;
  font-size:clamp(2.1rem,5.4vw,3.7rem); letter-spacing:.005em; margin:1rem 0 1.1rem;
}
.art-header h1 em{ font-style:italic; background:var(--grad-or); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.art-meta{ display:flex; flex-wrap:wrap; gap:1rem 1.6rem; align-items:center; font-family:var(--ui); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--perle-sombre); }
.art-meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--or-sombre); }
.art-lead{ font-family:var(--lettre); font-style:italic; font-size:clamp(1.18rem,2vw,1.42rem); color:var(--perle); line-height:1.65; margin:1.8rem 0 0; }

.filet{ height:1px; border:0; background:linear-gradient(90deg,transparent,var(--or-sombre) 20%,var(--or) 50%,var(--or-sombre) 80%,transparent); opacity:.5; margin:2.4rem 0; }

/* ---------- Corps de l'article ---------- */
.prose{ padding-bottom:2rem; }
.prose > p{ margin:0 0 1.4rem; }
.prose .lead-para::first-letter{
  font-family:var(--serif); font-weight:500; font-size:3.9em; line-height:.72;
  float:left; margin:.05em .12em -.06em 0;
  background:var(--grad-or-vert); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.prose h2{
  font-family:var(--serif); font-weight:400; font-size:clamp(1.7rem,3.4vw,2.5rem);
  line-height:1.15; letter-spacing:.005em; margin:2.8rem 0 1rem; color:var(--blanc-casse);
  position:relative; padding-top:1.6rem;
}
.prose h2::before{ content:""; position:absolute; top:0; left:0; width:54px; height:2px; background:var(--grad-or); }
.prose h3{ font-family:var(--serif); font-weight:500; font-size:clamp(1.3rem,2.4vw,1.7rem); margin:2rem 0 .7rem; color:var(--or-clair); }
.prose a:not(.btn){ color:var(--or); border-bottom:1px solid rgba(var(--gold-rgb),.4); transition:border-color .3s,color .3s; }
.prose a:not(.btn):hover{ color:var(--or-clair); border-bottom-color:var(--or-clair); }
.prose strong{ color:var(--blanc-casse); font-weight:500; }
.prose em{ font-style:italic; }
.prose ul,.prose ol{ margin:0 0 1.5rem; padding-left:1.4rem; }
.prose li{ margin-bottom:.6rem; }
.prose ul li{ list-style:none; position:relative; }
.prose ul li::before{ content:"◆"; position:absolute; left:-1.4rem; color:var(--or-sombre); font-size:.7em; top:.45em; }
.prose ol{ list-style:none; counter-reset:li; }
.prose ol li{ counter-increment:li; position:relative; }
.prose ol li::before{ content:counter(li,decimal-leading-zero); position:absolute; left:-1.9rem; top:.05em; font-family:var(--serif); color:var(--or); font-size:.95em; }
.prose blockquote{
  margin:2rem 0; padding:1.2rem 0 1.2rem 1.8rem; border-left:2px solid var(--or-sombre);
  font-family:var(--serif); font-style:italic; font-size:clamp(1.4rem,2.6vw,1.9rem); line-height:1.4; color:var(--or-clair);
}
.prose blockquote cite{ display:block; margin-top:.8rem; font-family:var(--ui); font-style:normal; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--perle-sombre); }

/* Encadré d'information */
.note{ margin:2rem 0; padding:1.6rem 1.8rem; border:1px solid rgba(var(--gold-rgb),.22); border-radius:4px; background:linear-gradient(180deg,rgba(var(--bg2-rgb),.5),rgba(var(--bgblue-rgb),.4)); }
.note p{ margin:0; color:var(--perle); font-size:1.02rem; }
.note .note-t{ display:block; font-family:var(--ui); font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--or); margin-bottom:.6rem; }

/* ---------- Bloc d'appel à l'action ---------- */
.cta-box{
  margin:3rem 0; padding:clamp(2rem,5vw,3rem); text-align:center;
  border:1px solid rgba(var(--gold-rgb),.25); border-radius:5px;
  background:radial-gradient(120% 100% at 50% 0%, rgba(var(--gold-d-rgb),.12), transparent 60%), linear-gradient(180deg,rgba(var(--bg2-rgb),.55),rgba(var(--bgblue-rgb),.5));
}
.cta-box h3{ font-family:var(--serif); font-weight:400; font-size:clamp(1.6rem,3.2vw,2.2rem); margin-bottom:.7rem; }
.cta-box p{ color:var(--perle); max-width:46ch; margin:0 auto 1.6rem; }
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.7rem; overflow:hidden;
  font-family:var(--ui); font-size:.76rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--or-clair); padding:1.05rem 2.2rem; border:1px solid rgba(var(--gold-rgb),.5); border-radius:2px;
  transition:color .5s var(--ease-temple),border-color .5s,box-shadow .5s,transform .4s var(--ease-temple);
}
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--grad-or); transform:translateY(101%); transition:transform .55s var(--ease-revele); }
.btn:hover{ color:var(--noir); border-color:var(--or-clair); box-shadow:0 0 34px rgba(var(--gold-rgb),.3); transform:translateY(-2px); }
.btn:hover::before{ transform:translateY(0); }
.btn svg{ width:15px; height:15px; }
.btn > *{ position:relative; z-index:1; }

/* ---------- FAQ ---------- */
.faq{ margin:2.5rem 0; }
.faq details{ border-bottom:1px solid rgba(var(--gold-rgb),.16); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.4rem 0; display:flex; justify-content:space-between; gap:1.2rem; align-items:center;
  font-family:var(--serif); font-weight:400; font-size:clamp(1.15rem,2.2vw,1.5rem); color:var(--blanc-casse); transition:color .3s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--serif); color:var(--or); font-size:1.5rem; transition:transform .4s var(--ease-temple); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq summary:hover{ color:var(--or-clair); }
.faq details p{ padding:0 0 1.5rem; color:var(--perle); max-width:64ch; }

/* ---------- Articles liés ---------- */
.related{ padding:2rem 0 0; }
.related h2{ font-family:var(--serif); font-weight:400; font-size:1.7rem; margin-bottom:1.5rem; }
.related-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; }
.rcard{
  display:block; padding:1.6rem; border:1px solid rgba(var(--gold-rgb),.16); border-radius:4px;
  background:rgba(var(--bg1-rgb),.5); transition:border-color .45s var(--ease-temple),transform .45s var(--ease-temple);
}
.rcard:hover{ border-color:rgba(var(--gold-rgb),.5); transform:translateY(-4px); }
.rcard .rk{ font-family:var(--ui); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--or); }
.rcard h3{ font-family:var(--serif); font-weight:500; font-size:1.3rem; margin:.6rem 0; color:var(--blanc-casse); line-height:1.2; }
.rcard p{ font-size:.92rem; color:var(--perle); }

/* ---------- Index du blog ---------- */
.blog-hero{ text-align:center; padding:clamp(3rem,8vw,5.5rem) 0 2rem; }
.blog-hero h1{ font-family:var(--serif); font-weight:300; font-size:clamp(2.4rem,6vw,4.2rem); margin:1rem 0 .8rem; }
.blog-hero h1 em{ font-style:italic; background:var(--grad-or); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.blog-hero p{ color:var(--perle); max-width:54ch; margin:0 auto; font-size:1.1rem; }
.post-list{ display:flex; flex-direction:column; gap:0; margin:2rem 0; }
.post-item{
  display:grid; grid-template-columns:auto 1fr auto; gap:1.4rem; align-items:baseline;
  padding:2rem .5rem; border-bottom:1px solid rgba(var(--gold-rgb),.16);
  transition:background .4s var(--ease-temple);
}
.post-item:hover{ background:linear-gradient(90deg,rgba(var(--gold-rgb),.06),transparent 70%); }
.post-item .pnum{ font-family:var(--ui); font-size:.72rem; letter-spacing:.16em; color:var(--or-sombre); padding-top:.5em; }
.post-item h2{ font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,3vw,2.2rem); line-height:1.1; margin-bottom:.5rem; transition:color .4s; }
.post-item:hover h2{ color:var(--or-clair); }
.post-item p{ color:var(--perle); font-size:1rem; max-width:60ch; }
.post-item .pdate{ font-family:var(--ui); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--perle-sombre); white-space:nowrap; padding-top:.6em; }
@media (max-width:620px){
  .post-item{ grid-template-columns:1fr; gap:.5rem; }
  .post-item .pdate{ padding-top:0; }
}

/* ---------- Pied de page ---------- */
.bfooter{ border-top:1px solid rgba(var(--gold-rgb),.14); margin-top:3rem; padding:3rem 0 2.5rem; text-align:center; }
.bfooter svg{ width:54px; margin:0 auto 1.2rem; }
.bfooter p{ color:var(--perle); font-size:.95rem; margin-bottom:.5rem; }
.bfooter .devise{ font-family:var(--serif); font-style:italic; color:var(--or); font-size:1.05rem; margin:1rem 0; }
.bfooter .fl{ display:flex; gap:1.4rem; justify-content:center; flex-wrap:wrap; margin-top:1rem; font-family:var(--ui); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; }
.bfooter .fl a{ color:var(--perle); transition:color .3s; }
.bfooter .fl a:hover{ color:var(--or); }
.bfooter small{ display:block; margin-top:1.6rem; font-family:var(--ui); font-size:.64rem; letter-spacing:.12em; color:var(--perle-sombre); }

/* ---------- Apparition douce ---------- */
.fade{ opacity:0; transform:translateY(20px); animation:fadeUp 1s var(--ease-revele) forwards; }
@keyframes fadeUp{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .fade{ opacity:1; transform:none; animation:none; } }