/* ========== Base & Thème ========== */
:root{
  --bg:#f6f3ee; --paper:#fff; --ink:#1a1a1a; --muted:#6b6b6b;
  --primary:#9c7bff; --primary-ink:#2b205a; --accent:#ffb86b;
  --ring:rgba(156,123,255,.35); --shadow:0 10px 25px rgba(0,0,0,.06);
  --radius:18px; --radius-xl:28px; --maxw:1120px;
}
[data-theme="dark"], :root:not([data-theme="light"]){ /* dark par défaut si système dark */
  --bg:#131316; --paper:#18181c; --ink:#fafafa; --muted:#aaa;
  --primary:#b7a0ff; --primary-ink:#f4f1ff; --accent:#ffc58a;
  --ring:rgba(183,160,255,.4); --shadow:0 10px 25px rgba(0,0,0,.35);
}

/* Reset léger */
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
     color:var(--ink); background:var(--bg); line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ========== Header ========== */
header{
  backdrop-filter:saturate(180%) blur(12px);
  background: color-mix(in oklab, var(--bg) 90%, transparent);
  border-bottom:1px solid color-mix(in oklab, var(--ink) 5%, transparent);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:70px}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
/* .logo{font-family:ui-rounded,"SF Pro Rounded","Quicksand",system-ui,sans-serif;
      font-size:clamp(22px,3.5vw,36px);letter-spacing:.5px;font-weight:800;white-space:normal} */
nav ul{display:flex;gap:8px;list-style:none;padding:0;margin:0;flex-wrap:wrap}
nav a{display:inline-flex;align-items:center;padding:8px 12px;border-radius:12px;font-weight:700;
      font-size:clamp(11px,1.1vw,14px);border:1px solid transparent;white-space:nowrap}
nav a:hover{background:var(--paper);border-color:color-mix(in oklab,var(--ink) 8%,transparent)}
.btn-author{
  background:linear-gradient(180deg,var(--primary),color-mix(in oklab,var(--primary) 80%,black));
  color:var(--primary-ink); border:1px solid color-mix(in oklab,var(--primary) 40%, black);
  box-shadow:0 6px 18px var(--ring); font-size:13px; padding:8px 12px;
  flex-shrink:1; min-width:0; max-width:50vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width:768px){
  .nav{flex-wrap:wrap;row-gap:8px;height:auto;padding:8px 0}
  .brand{flex:1 1 100%}
}

/* ========== Footer ========== */
footer{
  padding:40px 0; text-align:center; color:var(--muted);
  border-top:1px solid color-mix(in oklab,var(--ink) 8%, transparent);
}
.foot{font-family: "Railey", sans-serif;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}

.theme-toggle{
  position:fixed; right:16px; bottom:16px; z-index:1000;
  width:50px; height:50px; border-radius:50%;
  background:var(--paper); color:inherit; cursor:pointer;
  border:1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  box-shadow: var(--shadow); font-size:20px; display:grid; place-items:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.theme-toggle:hover{ transform:scale(1.08); box-shadow:0 8px 20px var(--ring) }
@media (max-width:480px){ .theme-toggle{ width:44px; height:44px; font-size:18px; right:12px; bottom:12px } }

/* Évite la coupe du logo dans tous les headers/footers */
:is(header, footer) .logo{
  white-space: normal;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
  line-height: 1.2;
}
/* avant : header .logo, header nav a, .cta a, ...  */
header nav a,
.cta a,
.link,
.btn,
.actions .btn {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  word-break: normal;
  line-height: 1.15;
}
@font-face{
  font-family:"Railey";
  src:url("/fonts/Railey.woff2") format("woff2"),
      url("/fonts/Railey.woff")  format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* Appliquer la police au logo des headers/footers du blog */
:is(header, footer) .logo,
.site-title {                 /* ajoute ton sélecteur titre si différent */
  font-family:"Railey", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:400;
  font-synthesis:none;
  letter-spacing:.2px;
}