/* ============================================================
   BASE COMMUNE — structure identique pour toutes les versions
   Les "espaces" (sections) sont modulables : on peut masquer/
   réordonner les blocs .zone via les data-attributes.
   ============================================================ */
:root{
  /* Tokens par défaut (surchargés par chaque thème) */
  --bg:#100a0d; --surface:#1b1115; --surface-2:#241820;
  --text:#f4ece9; --muted:#b59ca3; --line:rgba(255,255,255,.10);
  --accent:#c2425a; --accent-2:#d9a86c; --on-accent:#fff;
  --font-head:'Cormorant Garamond',serif; --font-body:'Inter',sans-serif;
  --radius:14px; --maxw:1120px; --gap:28px;
  --hero-h:clamp(360px,52vh,560px); --head-weight:600; --head-tracking:0px;
  --shadow:0 18px 50px rgba(0,0,0,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased}

/* ---------- Barre de contrôle (hors maquette) ---------- */
.toolbar{position:sticky;top:0;z-index:100;background:#141416;border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:12px 20px;color:#eee;font-family:'Inter',sans-serif}
.toolbar .grp{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.toolbar .lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#888;margin-right:2px}
.swatch{display:inline-flex;align-items:center;gap:8px;background:#1e1e22;border:1px solid #2c2c32;color:#ddd;
  padding:7px 12px;border-radius:999px;cursor:pointer;font-size:13px;transition:.18s;font-family:inherit}
.swatch:hover{border-color:#555;transform:translateY(-1px)}
.swatch.active{border-color:#fff;background:#000;box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.swatch .dot{width:13px;height:13px;border-radius:50%}
.tab{background:#1e1e22;border:1px solid #2c2c32;color:#ddd;padding:7px 16px;border-radius:8px;cursor:pointer;font-size:13px;font-family:inherit;transition:.18s}
.tab:hover{border-color:#555}
.tab.active{background:#fff;color:#111;border-color:#fff}
.tb-spacer{flex:1}
.tb-note{font-size:12px;color:#777}

/* ---------- Cadre de prévisualisation = le "site" ---------- */
body{background:var(--bg);color:var(--text);min-height:100vh;transition:background .4s,color .4s}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.zone[hidden]{display:none}

/* Header du site */
.site-head{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);
  background:color-mix(in srgb,var(--bg) 78%,transparent);border-bottom:1px solid var(--line)}
.site-head .wrap{position:relative}
.brand{font-family:var(--font-head);font-weight:var(--head-weight);font-size:26px;letter-spacing:var(--head-tracking);color:var(--text)}
.brand b{color:var(--accent)}
.nav{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.nav a{color:var(--muted);text-decoration:none;font-size:14px;letter-spacing:.02em;transition:.2s}
.nav a:hover{color:var(--text)}
/* Boutons monétisation dans le menu (VIDÉOS / RENCONTRES) — volontairement vifs sur tous les thèmes */
.nav-cta{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;
  font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;
  position:relative;white-space:nowrap;color:#fff;transition:.18s}
.nav-cta svg{width:15px;height:15px;fill:currentColor}
.nav-cta:hover{transform:translateY(-1px);filter:brightness(1.08);color:#fff}
/* garde le texte blanc même à l'intérieur de la nav (priorité sur .nav a) */
.nav a.nav-cta,.nav a.nav-cta:hover{color:#fff}
/* version compacte quand le bouton est dans le menu */
.nav .nav-cta{padding:4px 11px;font-size:11px;gap:5px;letter-spacing:.04em}
.nav .nav-cta svg{width:13px;height:13px}
.nav .nav-cta .tagnew{top:-7px;right:-6px;font-size:7px;padding:1px 4px}
.nav-videos{background:linear-gradient(135deg,#ff2d6f,#ff7e3d);animation:navflash 1.5s ease-in-out infinite}
@keyframes navflash{0%,100%{box-shadow:0 0 5px rgba(255,45,111,.55)}50%{box-shadow:0 0 17px 3px rgba(255,126,61,.9)}}
.nav-videos .blink{width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1s steps(2,end) infinite}
@keyframes blink{50%{opacity:.15}}
.nav-meet{background:linear-gradient(135deg,#b23bff,#ff3da6)}
.nav-meet:hover{box-shadow:0 0 16px 2px rgba(178,59,255,.6)}
.nav-cta .tagnew{position:absolute;top:-8px;right:-7px;background:#ffd23d;color:#3a1500;font-size:8px;
  font-weight:800;letter-spacing:.06em;padding:2px 5px;border-radius:999px;text-transform:none}
.head-cta{display:flex;gap:12px;align-items:center}
.btn{font-family:var(--font-body);border:none;cursor:pointer;border-radius:var(--radius);padding:11px 20px;font-size:14px;transition:.2s;text-decoration:none;display:inline-block}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* ---- Zone droite du header : modules utilitaires ---- */
.head-cta{gap:12px}
/* recherche */
.h-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;
  padding:8px 14px;background:color-mix(in srgb,var(--bg) 50%,transparent);transition:.2s;cursor:text}
.h-search:focus-within{border-color:var(--accent)}
.h-search svg{width:16px;height:16px;fill:var(--muted);flex:none}
.h-search input{border:none;background:transparent;color:var(--text);font-family:inherit;font-size:13.5px;width:178px;outline:none;transition:width .25s}
.h-search input::placeholder{color:var(--muted)}
/* puce reprendre la lecture */
.h-resume{display:flex;align-items:center;gap:10px;text-decoration:none;border:1px solid var(--line);
  border-radius:999px;padding:4px 16px 4px 4px;background:color-mix(in srgb,var(--bg) 50%,transparent);transition:.2s}
.h-resume:hover{border-color:var(--accent);transform:translateY(-1px)}
.rs-cover{width:30px;height:30px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.rs-txt{display:flex;flex-direction:column;line-height:1.2}
.rs-txt b{color:var(--text);font-size:12.5px;font-weight:600}
.rs-txt i{color:var(--muted);font-size:11px;font-style:normal}
/* pilule écrire */
.h-write{display:none;padding:9px 16px;font-size:13.5px}
/* lien connexion (éditorial) */
.h-login{display:none;color:var(--muted);text-decoration:none;font-size:13.5px;transition:.2s}
.h-login:hover{color:var(--text)}
/* avatar compte + pastille */
.h-account{position:relative;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:transparent;cursor:pointer;padding:2px;flex:none;transition:.2s}
.h-account:hover{border-color:var(--accent);transform:translateY(-1px)}
.h-account .h-av{display:block;width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.h-account::after{content:"";position:absolute;right:-1px;top:0;width:9px;height:9px;border-radius:50%;
  background:#3ad07f;border:2px solid var(--bg)}

/* HERO (zone modulable) */
.hero{position:relative;min-height:var(--hero-h);display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-art{position:absolute;inset:0;z-index:0;opacity:.9}
.hero-art .g1{position:absolute;inset:0;background:
  radial-gradient(60% 80% at 75% 30%,color-mix(in srgb,var(--accent) 55%,transparent),transparent 60%),
  radial-gradient(50% 70% at 20% 80%,color-mix(in srgb,var(--accent-2) 45%,transparent),transparent 60%);}
.hero-art .grain{position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 2px,transparent 2px 6px)}
.hero .wrap{position:relative;z-index:2;padding:56px 24px}
.eyebrow{display:inline-block;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-2);margin-bottom:18px;border:1px solid var(--line);padding:6px 14px;border-radius:999px}
.hero h1{font-family:var(--font-head);font-weight:var(--head-weight);letter-spacing:var(--head-tracking);
  font-size:clamp(40px,6vw,76px);line-height:1.02;max-width:14ch;margin-bottom:20px}
.hero p{color:var(--muted);font-size:clamp(16px,1.6vw,19px);max-width:48ch;margin-bottom:30px}
.hero .actions{display:flex;gap:14px;flex-wrap:wrap}

/* Barre utilitaire d'accueil : recherche + reprendre la lecture (sous le hero) */
.home-bar{border-bottom:1px solid var(--line);background:var(--surface)}
.home-bar .wrap{display:flex;gap:18px;align-items:center;padding:18px 24px;flex-wrap:wrap}
.hb-search{flex:1;min-width:240px;display:flex;align-items:center;gap:12px;background:var(--bg);
  border:1px solid var(--line);border-radius:999px;padding:13px 18px;transition:.2s;cursor:text}
.hb-search:focus-within{border-color:var(--accent)}
.hb-search svg{width:18px;height:18px;fill:var(--muted);flex:none}
.hb-search input{flex:1;border:none;background:transparent;color:var(--text);font-family:inherit;font-size:15px;outline:none}
.hb-search input::placeholder{color:var(--muted)}
.hb-search kbd{font-family:inherit;font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:2px 7px;flex:none}
.hb-resume{display:flex;align-items:center;gap:12px;text-decoration:none;border:1px solid var(--line);
  border-radius:999px;padding:7px 16px 7px 7px;background:var(--bg);transition:.2s;flex:none}
.hb-resume:hover{border-color:var(--accent);transform:translateY(-1px)}
.hb-resume .rs-cover{width:38px;height:38px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.hb-resume .rs-txt{display:flex;flex-direction:column;line-height:1.25}
.hb-resume .rs-txt b{color:var(--text);font-size:13.5px;font-weight:600}
.hb-resume .rs-txt i{color:var(--muted);font-size:12px;font-style:normal}
.hb-resume .rs-go{color:var(--accent);font-size:22px;line-height:1;margin-left:4px}
@media(max-width:620px){.hb-resume{width:100%;justify-content:flex-start}}

/* Bandeau de catégories (zone modulable) */
.cats{padding:26px 0;border-bottom:1px solid var(--line)}
.cats .wrap{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.chip{border:1px solid var(--line);color:var(--muted);padding:8px 16px;border-radius:999px;font-size:13px;cursor:pointer;transition:.2s}
.chip:hover,.chip.on{border-color:var(--accent);color:var(--text);background:color-mix(in srgb,var(--accent) 14%,transparent)}

/* Section titres */
.section{padding:60px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:30px;gap:20px;flex-wrap:wrap}
.sec-head h2{font-family:var(--font-head);font-weight:var(--head-weight);letter-spacing:var(--head-tracking);font-size:clamp(28px,3.4vw,40px)}
.sec-head a{color:var(--accent);text-decoration:none;font-size:14px}

/* Récit à la une (zone modulable) */
.featured{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--gap);align-items:stretch}
.featured .art{border-radius:var(--radius);min-height:300px;position:relative;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 70%,#000),color-mix(in srgb,var(--accent-2) 60%,#000))}
.featured .art::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 14px)}
.featured .body{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:34px;display:flex;flex-direction:column;justify-content:center}
.featured .tagline{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2);margin-bottom:14px}
.featured h3{font-family:var(--font-head);font-weight:var(--head-weight);font-size:clamp(26px,3vw,36px);line-height:1.1;margin-bottom:14px}
.featured p{color:var(--muted);margin-bottom:22px}
.meta{display:flex;gap:18px;color:var(--muted);font-size:13px;margin-bottom:22px}
.meta span{display:flex;align-items:center;gap:6px}

/* Grille de récits (zone modulable) */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.25s;cursor:pointer}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.card .cover{height:180px;position:relative;overflow:hidden}
.card .cover .grad{position:absolute;inset:0}
.card .cover .label{position:absolute;left:14px;top:14px;background:color-mix(in srgb,var(--bg) 70%,transparent);
  color:var(--text);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid var(--line)}
/* Bouton favori (ajout à la bibliothèque) */
.card .cover .fav{position:absolute;right:12px;top:12px;z-index:2;width:34px;height:34px;border-radius:50%;border:none;
  cursor:pointer;background:color-mix(in srgb,var(--bg) 62%,transparent);color:#fff;font-size:16px;line-height:1;
  display:grid;place-items:center;backdrop-filter:blur(4px);transition:.18s}
.card .cover .fav:hover{background:color-mix(in srgb,var(--bg) 82%,transparent);transform:scale(1.1)}
.card .cover .fav.on{color:var(--accent)}
.card .pad{padding:20px}
.card h4{font-family:var(--font-head);font-weight:var(--head-weight);font-size:22px;line-height:1.15;margin-bottom:10px}
.card p{color:var(--muted);font-size:14px;margin-bottom:16px}
.card .foot{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}
.heat{color:var(--accent)}

/* Newsletter (zone modulable) */
.news{margin:20px 0 0;background:var(--surface-2);border:1px solid var(--line);border-radius:calc(var(--radius) + 4px);
  padding:46px;text-align:center}
.news h2{font-family:var(--font-head);font-weight:var(--head-weight);font-size:clamp(26px,3vw,38px);margin-bottom:12px}
.news p{color:var(--muted);max-width:46ch;margin:0 auto 24px}
.news form{display:flex;gap:10px;max-width:440px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.news input{flex:1;min-width:220px;background:var(--bg);border:1px solid var(--line);color:var(--text);padding:13px 16px;border-radius:var(--radius);font-family:inherit;font-size:14px}
.news input::placeholder{color:var(--muted)}

/* ============================================================
   FOOTER — version évoluée & glamour (adaptée aux 5 thèmes)
   ============================================================ */
.site-foot{position:relative;margin-top:70px;color:var(--muted);font-size:14px;overflow:hidden;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 7%,transparent)),var(--surface)}
.site-foot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background:radial-gradient(60% 120% at 15% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 60%),
            radial-gradient(50% 120% at 90% 10%,color-mix(in srgb,var(--accent-2) 14%,transparent),transparent 55%)}
/* filet doré décoratif en haut */
.foot-rule{height:1px;background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);opacity:.7}
/* bandeau d'accroche */
.foot-cta{position:relative;text-align:center;padding:48px 24px 10px}
.foot-cta .orn{color:var(--accent-2);letter-spacing:.5em;font-size:14px;margin-bottom:14px;opacity:.85}
.foot-cta h2{font-family:var(--font-head);font-weight:var(--head-weight);letter-spacing:var(--head-tracking);
  font-size:clamp(28px,4vw,46px);line-height:1.05;color:var(--text);
  background:linear-gradient(90deg,var(--text),var(--accent-2),var(--text));-webkit-background-clip:text;background-clip:text}
.foot-cta p{color:var(--muted);max-width:46ch;margin:14px auto 0}
/* grille principale */
.foot-main{position:relative;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;
  padding:48px 0 38px;border-bottom:1px solid var(--line)}
.foot-brand .brand{font-size:28px;margin-bottom:14px}
.foot-brand p{max-width:34ch;margin-bottom:20px;line-height:1.65}
/* mini newsletter */
.foot-sub{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:5px;max-width:320px;transition:.2s}
.foot-sub:focus-within{border-color:var(--accent)}
.foot-sub input{flex:1;background:transparent;border:none;color:var(--text);font-family:inherit;font-size:13.5px;padding:9px 14px;outline:none}
.foot-sub input::placeholder{color:var(--muted)}
.foot-sub button{border:none;cursor:pointer;border-radius:999px;padding:9px 18px;font-family:inherit;font-size:13px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--on-accent);transition:.2s}
.foot-sub button:hover{filter:brightness(1.08)}
/* colonnes de liens */
.foot-col h5{color:var(--text);font-family:var(--font-body);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:16px;opacity:.85}
.foot-col a{display:block;color:var(--muted);text-decoration:none;padding:6px 0;font-size:14px;position:relative;width:fit-content;transition:.2s}
.foot-col a::after{content:"";position:absolute;left:0;bottom:3px;height:1px;width:0;background:var(--accent);transition:.25s}
.foot-col a:hover{color:var(--text)}
.foot-col a:hover::after{width:100%}
/* réseaux sociaux */
.socials{display:flex;gap:10px;margin-top:22px}
.socials a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  color:var(--muted);transition:.25s;background:color-mix(in srgb,var(--bg) 40%,transparent)}
.socials a:hover{color:var(--on-accent);border-color:transparent;transform:translateY(-3px);
  background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 45%,transparent)}
.socials svg{width:17px;height:17px;fill:currentColor}
/* barre de bas de page */
.foot-bottom{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:24px 0 40px;font-size:13px}
.foot-bottom .links{display:flex;gap:22px;flex-wrap:wrap}
.foot-bottom .links a{color:var(--muted);text-decoration:none;transition:.2s}
.foot-bottom .links a:hover{color:var(--text)}
.foot-bottom .right{display:flex;align-items:center;gap:14px}
.lang{background:var(--bg);border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:7px 12px;
  font-family:inherit;font-size:13px;cursor:pointer}
.age{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--accent);color:var(--accent);
  padding:5px 12px;border-radius:999px;font-size:12px;letter-spacing:.04em;font-weight:500}
@media(max-width:880px){
  .foot-main{grid-template-columns:1fr 1fr;gap:30px}
  .foot-brand{grid-column:1/-1}
}
@media(max-width:560px){.foot-main{grid-template-columns:1fr}.foot-bottom{flex-direction:column;align-items:flex-start}}

/* ============================================================
   PAGE DE LECTURE
   ============================================================ */
.reader-head{border-bottom:1px solid var(--line);padding:46px 0 30px}
.reader-head .wrap{max-width:760px}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:20px}
.crumbs a{color:var(--accent);text-decoration:none}
.reader-head h1{font-family:var(--font-head);font-weight:var(--head-weight);letter-spacing:var(--head-tracking);
  font-size:clamp(34px,5vw,56px);line-height:1.05;margin-bottom:18px}
.reader-head .sub{color:var(--muted);font-size:18px;margin-bottom:22px}
.byline{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:14px}
.byline .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2))}

/* Barre de réglages de lecture */
.reader-tools{position:sticky;top:68px;z-index:15;background:color-mix(in srgb,var(--bg) 85%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.reader-tools .wrap{max-width:760px;display:flex;align-items:center;gap:16px;padding:12px 24px;flex-wrap:wrap}
.reader-tools .t-lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tool-btn{background:transparent;border:1px solid var(--line);color:var(--text);width:34px;height:34px;border-radius:8px;cursor:pointer;font-size:15px;transition:.2s}
.tool-btn:hover{border-color:var(--accent);color:var(--accent)}
.read-prog{flex:1;height:4px;background:var(--line);border-radius:4px;overflow:hidden;min-width:90px}
.read-prog i{display:block;height:100%;width:36%;background:var(--accent)}

/* Corps du récit */
.article{max-width:680px;margin:0 auto;padding:50px 24px 30px;font-size:var(--read-size,19px)}
.article p{margin-bottom:26px;color:color-mix(in srgb,var(--text) 92%,transparent)}
.article p:first-of-type::first-letter{font-family:var(--font-head);font-size:4.4em;float:left;line-height:.8;padding:6px 12px 0 0;color:var(--accent)}
.article .scene{text-align:center;color:var(--accent-2);letter-spacing:.4em;margin:14px 0 30px}
.article h3{font-family:var(--font-head);font-weight:var(--head-weight);font-size:28px;margin:14px 0 18px}
.article blockquote{border-left:3px solid var(--accent);padding-left:22px;margin:0 0 26px;font-family:var(--font-head);
  font-style:italic;font-size:1.2em;color:var(--text)}
.tags{max-width:680px;margin:0 auto;padding:0 24px 10px;display:flex;gap:10px;flex-wrap:wrap}
.tag{font-size:12.5px;color:var(--muted);border:1px solid var(--line);padding:6px 13px;border-radius:999px}

/* Suite / récits liés */
.related{border-top:1px solid var(--line);margin-top:30px;padding-top:10px}

/* ============================================================
   PUBLICITÉ — blocs réutilisables (thème-aware) + sidebars
   ============================================================ */
.ad{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:grid;place-items:center;text-align:center;color:var(--muted);
  background:linear-gradient(135deg,color-mix(in srgb,var(--surface-2) 85%,transparent),var(--surface))}
.ad::before{content:"PUBLICITÉ";position:absolute;top:7px;left:9px;font-size:8.5px;letter-spacing:.2em;color:var(--muted);opacity:.65}
.ad::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 4%,transparent) 0 10px,transparent 10px 22px)}
.ad .ad-in{position:relative;z-index:1;padding:16px}
.ad .ad-in strong{display:block;font-family:var(--font-head);font-weight:var(--head-weight);font-size:20px;color:var(--text)}
.ad .ad-in .sz{font-size:11.5px;opacity:.7;margin-top:6px;letter-spacing:.04em}
/* formats standards */
.ad-300x250{width:300px;height:250px}
.ad-300x600{width:300px;height:600px}
.ad-leaderboard{width:100%;max-width:728px;height:90px;margin:0 auto}
.ad-inline{width:100%;height:120px;margin:8px 0 30px}
/* Vraie publicité (code réel) : on retire l'habillage de démo, on garde un discret label */
.ad.is-live{display:block;height:auto;min-height:0;background:none;border:none;padding:0;text-align:center}
.ad.is-live::before,.ad.is-live::after{display:none!important}
.ad.is-live .ad-label{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);opacity:.6;margin-bottom:5px}
.ad.is-live.ad-leaderboard{max-width:748px;margin:0 auto}
.ad.is-live.ad-inline{margin:8px auto 30px}
.ad.is-live .mopt{margin:0 auto}
/* native (s'intègre comme une carte du flux) */
.card.ad-native{position:relative}
.card.ad-native::before{content:"SPONSORISÉ";position:absolute;z-index:2;top:12px;right:12px;
  background:color-mix(in srgb,var(--bg) 70%,transparent);border:1px solid var(--line);
  font-size:9.5px;letter-spacing:.12em;color:var(--muted);padding:4px 9px;border-radius:999px}
/* note premium sous les blocs */
.ad-premium{font-size:12.5px;color:var(--muted);text-align:center;border:1px dashed var(--line);border-radius:var(--radius);padding:13px 14px}
.ad-premium a{color:var(--accent);text-decoration:none;font-weight:500}
.ad-premium a:hover{text-decoration:underline}

/* --- Carte auteur mise en avant (sidebar lecture) --- */
.author-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;text-align:center;position:relative;overflow:hidden}
.author-card::before{content:"";position:absolute;left:0;right:0;top:0;height:64px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 55%,transparent),color-mix(in srgb,var(--accent-2) 45%,transparent))}
.author-card .ac-photo{position:relative;width:84px;height:84px;border-radius:50%;margin:18px auto 12px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));border:3px solid var(--surface);box-shadow:var(--shadow)}
.author-card .ac-name{font-family:var(--font-head);font-weight:var(--head-weight);font-size:22px;line-height:1.1}
.author-card .ac-handle{color:var(--muted);font-size:13px;margin-top:3px}
.author-card .ac-bio{color:var(--muted);font-size:13px;line-height:1.55;margin:12px 0 16px}
.author-card .ac-stats{display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:16px}
.author-card .ac-stats div{flex:1;padding:12px 4px}
.author-card .ac-stats div+div{border-left:1px solid var(--line)}
.author-card .ac-stats .n{font-family:var(--font-head);font-weight:var(--head-weight);font-size:20px;color:var(--text);line-height:1}
.author-card .ac-stats .l{color:var(--muted);font-size:11px;margin-top:5px;letter-spacing:.03em}
.author-card .ac-since{color:var(--muted);font-size:12px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;gap:6px}
.author-card .ac-actions{display:flex;gap:8px}
.author-card .ac-actions .btn{flex:1;padding:10px;font-size:13.5px}

/* --- Auteurs à découvrir (style réseau, présence en ligne) --- */
.authors-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.au-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 16px;text-align:center;transition:.25s}
.au-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.au-av{position:relative;width:74px;height:74px;border-radius:50%;margin:0 auto 12px;border:2px solid var(--surface);box-shadow:var(--shadow)}
.au-dot{position:absolute;right:2px;bottom:2px;width:16px;height:16px;border-radius:50%;border:3px solid var(--surface)}
.au-dot.on{background:#37cf7e;box-shadow:0 0 0 0 rgba(55,207,126,.5);animation:pulse 2s infinite}
.au-dot.idle{background:#e0a23c}
.au-dot.off{background:#8a8a8a}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(55,207,126,.5)}70%{box-shadow:0 0 0 8px rgba(55,207,126,0)}100%{box-shadow:0 0 0 0 rgba(55,207,126,0)}}
.au-name{font-family:var(--font-head);font-weight:var(--head-weight);font-size:19px;line-height:1.1}
.au-meta{color:var(--muted);font-size:12.5px;margin-top:5px;line-height:1.5}
.au-status{font-size:11.5px;margin:9px 0 14px;display:inline-flex;align-items:center;gap:6px}
.au-status .sd{width:7px;height:7px;border-radius:50%;flex:none}
.au-status.on{color:#37cf7e}.au-status.on .sd{background:#37cf7e}
.au-status.idle{color:var(--accent-2)}.au-status.idle .sd{background:var(--accent-2)}
.au-status.off{color:var(--muted)}.au-status.off .sd{background:var(--muted)}
.au-card .btn{width:100%;padding:9px;font-size:13px}
.shuffle{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:999px;
  padding:8px 16px;font-family:inherit;font-size:13px;cursor:pointer;transition:.2s;display:inline-flex;gap:7px;align-items:center}
.shuffle:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:980px){.authors-grid{grid-template-columns:repeat(3,1fr)}.authors-grid .au-card:nth-child(n+4){display:none}}
@media(max-width:560px){.authors-grid{grid-template-columns:repeat(2,1fr)}.authors-grid .au-card:nth-child(n+3){display:none}}

/* --- Encadré « Auteurs à suivre » (sidebar, dirige vers les pages auteurs) --- */
.au-promo{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.au-promo .aup-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.au-promo .aup-head h5{font-family:var(--font-head);font-weight:var(--head-weight);font-size:16px;color:var(--text)}
.au-promo .aup-head .lbl{font-size:9px;letter-spacing:.18em;color:var(--muted);opacity:.7}
.aup-row{display:flex;align-items:center;gap:11px;padding:12px 16px;text-decoration:none;transition:.18s}
.aup-row+.aup-row{border-top:1px solid var(--line)}
.aup-row:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.aup-av{position:relative;width:44px;height:44px;border-radius:50%;flex:none}
.aup-av .au-dot{width:13px;height:13px;border-width:2px}
.aup-info{flex:1;min-width:0}
.aup-info .nm{color:var(--text);font-family:var(--font-head);font-weight:var(--head-weight);font-size:15px;line-height:1.1}
.aup-info .mt{color:var(--muted);font-size:11.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aup-info .au-status{margin:3px 0 0;font-size:10.5px}
.aup-follow{border:1px solid var(--line);background:transparent;color:var(--accent);border-radius:999px;
  padding:6px 12px;font-size:12px;cursor:pointer;flex:none;font-family:inherit;transition:.18s}
.aup-follow:hover{background:var(--accent);color:var(--on-accent);border-color:transparent}
.au-promo .aup-foot{display:block;text-align:center;padding:12px;color:var(--accent);text-decoration:none;font-size:13px;border-top:1px solid var(--line);transition:.18s}
.au-promo .aup-foot:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}

/* ============================================================
   GAMIFICATION — classements, niveaux & badges, cliffhanger
   ============================================================ */
/* Classements de la semaine */
.ranks{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.rank-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.rc-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.rc-head h3{font-family:var(--font-head);font-weight:var(--head-weight);font-size:19px}
.rc-head .wk{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2)}
.rank-row{display:flex;align-items:center;gap:13px;padding:12px 18px;text-decoration:none;transition:.18s}
.rank-row+.rank-row{border-top:1px solid var(--line)}
.rank-row:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.rk-num{font-family:var(--font-head);font-weight:var(--head-weight);font-size:18px;width:22px;text-align:center;color:var(--muted);flex:none}
.rk-num.top{color:var(--accent)}
.rk-av{width:42px;height:42px;border-radius:50%;flex:none}
.rk-av.cover{width:36px;height:48px;border-radius:6px}
.rk-info{flex:1;min-width:0}
.rk-info .nm{color:var(--text);font-family:var(--font-head);font-weight:var(--head-weight);font-size:15px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-info .mt{color:var(--muted);font-size:12px;margin-top:2px}
.rk-trend{font-size:12px;font-weight:600;flex:none;display:inline-flex;align-items:center;gap:3px}
.rk-trend.up{color:#37cf7e}.rk-trend.down{color:#e0556f}.rk-trend.flat{color:var(--muted)}

/* Niveau + barre de progression (page auteur) */
.level-wrap{display:flex;align-items:center;gap:20px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 20px;margin-bottom:18px;flex-wrap:wrap}
.lvl-medal{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:22px;flex:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--on-accent);box-shadow:var(--shadow)}
.level-id .lt{font-family:var(--font-head);font-weight:var(--head-weight);font-size:18px}
.level-id .ls{color:var(--muted);font-size:12.5px}
.level-prog{flex:1;min-width:220px}
.level-prog .lp-top{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:7px}
.level-prog .bar{height:8px;background:var(--line);border-radius:6px;overflow:hidden}
.level-prog .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2))}

/* Badges */
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}
.badge-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);
  border-radius:999px;padding:8px 14px;font-size:13px;color:var(--text);transition:.18s}
.badge-chip:hover{border-color:var(--accent)}
.badge-chip .bi{font-size:15px}
.badge-chip.locked{opacity:.42}
.badge-chip.locked .bi{filter:grayscale(1)}

/* Carte auteur sidebar : niveau + badges compacts */
.ac-level{display:inline-flex;align-items:center;gap:6px;margin:10px auto 0;padding:5px 12px;border-radius:999px;
  font-size:12px;color:var(--on-accent);background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.ac-badges{display:flex;justify-content:center;gap:8px;margin:14px 0 4px;font-size:18px}
.ac-badges span{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--bg)}

/* Cliffhanger « À suivre » */
.cliff{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
  border-radius:var(--radius);padding:28px;margin:6px 0 30px;text-align:center;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,var(--surface)),var(--surface))}
.cliff .cl-prog{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);margin-bottom:12px}
.cliff h3{font-family:var(--font-head);font-weight:var(--head-weight);font-size:clamp(22px,2.6vw,28px);margin-bottom:10px}
.cliff p{color:var(--muted);max-width:46ch;margin:0 auto 20px}
.cliff .cl-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cliff .feu-bar{display:flex;gap:5px;justify-content:center;margin-top:18px}
.cliff .feu-bar i{width:26px;height:5px;border-radius:3px;background:var(--line)}
.cliff .feu-bar i.done{background:var(--accent)}
.cliff .feu-bar i.cur{background:var(--accent-2)}
@media(max-width:760px){.ranks{grid-template-columns:1fr}}

/* ============================================================
   BOUCLE AUTEUR↔LECTEUR — cloche, notifications, soutien
   ============================================================ */
/* Cloche notifications (header) */
.h-bell{position:relative;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--muted);transition:.2s;flex:none}
.h-bell:hover{border-color:var(--accent);color:var(--accent)}
.h-bell svg{width:18px;height:18px;fill:currentColor}
.h-bell .cnt{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;border-radius:999px;
  background:var(--accent);color:var(--on-accent);font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 4px;border:2px solid var(--bg)}
/* Fil de notifications (espace membre) */
.notif-row{display:flex;gap:13px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px;margin-bottom:10px}
.notif-row.unread{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.notif-ic{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:18px;background:var(--surface-2)}
.notif-bd{flex:1;min-width:0}
.notif-bd .nt{font-size:14px;color:var(--text);line-height:1.45}
.notif-bd .nt b{font-weight:600}
.notif-bd .nd{color:var(--muted);font-size:12px;margin-top:3px}
.notif-row .dotnew{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;margin-top:6px}
/* Bloc soutien / abonnement (page auteur) */
.support{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-bottom:30px}
.support h3{font-family:var(--font-head);font-weight:var(--head-weight);font-size:20px;margin-bottom:4px}
.support .sub{color:var(--muted);font-size:13.5px;margin-bottom:20px}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tier{border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column}
.tier.feat{border-color:var(--accent);position:relative}
.tier.feat::before{content:"POPULAIRE";position:absolute;top:-9px;left:18px;background:var(--accent);color:var(--on-accent);
  font-size:9px;letter-spacing:.12em;padding:3px 10px;border-radius:999px}
.tier .tn{font-family:var(--font-head);font-weight:var(--head-weight);font-size:17px;margin-bottom:6px}
.tier .tp{font-size:26px;font-family:var(--font-head);font-weight:var(--head-weight);line-height:1}
.tier .tp small{font-size:12px;color:var(--muted);font-family:var(--font-body);font-weight:400}
.tier ul{list-style:none;margin:16px 0 20px;display:flex;flex-direction:column;gap:9px}
.tier ul li{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:flex-start}
.tier ul li::before{content:"✓";color:var(--accent);font-weight:700}
.tier .btn{margin-top:auto;text-align:center}

/* ============================================================
   DÉCOUVERTE PERSONNALISÉE — Pour vous, collections, streak
   ============================================================ */
.foryou{display:flex;gap:var(--gap);overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}
.foryou>.card{flex:0 0 262px;scroll-snap-align:start}
.card .reason{display:block;font-size:11.5px;color:var(--accent-2);margin-bottom:10px}
.collections{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.coll{position:relative;height:152px;border-radius:var(--radius);overflow:hidden;display:flex;align-items:flex-end;
  padding:18px;text-decoration:none;border:1px solid var(--line);transition:.25s}
.coll:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.coll .bgg{position:absolute;inset:0}
.coll::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6),transparent 70%)}
.coll .ct{position:relative;z-index:1;color:#fff}
.coll .ct b{font-family:var(--font-head);font-weight:var(--head-weight);font-size:19px;display:block}
.coll .ct span{font-size:12px;opacity:.88}
/* Streak de lecture */
.streak{display:flex;align-items:center;gap:20px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 20px;margin-bottom:26px;flex-wrap:wrap}
.streak .flame{font-size:32px;flex:none}
.streak .si{flex:1;min-width:170px}
.streak .si .st{font-family:var(--font-head);font-weight:var(--head-weight);font-size:20px}
.streak .si .sd{color:var(--muted);font-size:12.5px;margin-top:2px}
.streak .days{display:flex;gap:9px}
.streak .day{display:flex;flex-direction:column;align-items:center;gap:5px}
.streak .day .dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:11px;
  border:1px solid var(--line);color:var(--muted)}
.streak .day.on .dot{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--on-accent);border-color:transparent}
.streak .day .dl{font-size:10px;color:var(--muted)}
/* Pastille streak dans la barre d'accueil */
.hb-streak{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:999px;
  padding:10px 15px;font-size:13px;color:var(--text);background:var(--bg);flex:none;white-space:nowrap}
.hb-streak b{color:var(--accent)}
@media(max-width:880px){.collections{grid-template-columns:repeat(2,1fr)}.tiers{grid-template-columns:1fr}}
@media(max-width:620px){.hb-streak{display:none}}

/* --- Sidebar / rail publicitaire --- */
.side-rail{width:300px;flex:none}
.side-rail .sticky{position:sticky;top:88px;display:flex;flex-direction:column;gap:20px}

/* Article en 2 colonnes (texte + rail) */
.read-wrap{max-width:1040px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start}
.read-wrap .article{max-width:none;margin:0;padding:44px 0 20px}
.read-wrap .tags{max-width:none;margin:0;padding:0 0 14px}

/* Flux d'accueil en 2 colonnes (grille + rail) */
.feed-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--gap);align-items:start}
.feed-wrap .grid{grid-template-columns:repeat(2,1fr)}
body.ads-off .feed-wrap .grid{grid-template-columns:repeat(3,1fr)}

/* Mode sans publicité (premium) : on masque les pubs, on garde la carte auteur */
body.ads-off .ad,body.ads-off .ad-leaderboard,body.ads-off .ad-premium,
body.ads-off .feed-wrap .side-rail{display:none!important}
body.ads-off .feed-wrap{grid-template-columns:1fr}

@media(max-width:1000px){
  .read-wrap,.feed-wrap{grid-template-columns:1fr}
  .side-rail{width:100%}
  .side-rail .sticky{position:static;flex-direction:row;flex-wrap:wrap;justify-content:center}
  .ad-300x600{height:250px;width:300px}
}

/* ============================================================
   ESPACE MEMBRE
   ============================================================ */
.account{padding:42px 0 60px}
.acc-head{display:flex;align-items:center;gap:22px;margin-bottom:14px;flex-wrap:wrap}
.acc-avatar{width:86px;height:86px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));
  flex:none;border:2px solid var(--line);position:relative}
.acc-avatar .vbadge{position:absolute;right:-2px;bottom:-2px;width:26px;height:26px;border-radius:50%;
  background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;font-size:12px;color:var(--accent-2)}
.acc-id h1{font-family:var(--font-head);font-weight:var(--head-weight);font-size:clamp(28px,3.4vw,40px);line-height:1.05}
.acc-id .handle{color:var(--muted);font-size:14px;margin-top:4px}
.acc-id .chips{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.acc-id .chips .chip{cursor:default}
.acc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:26px 0 34px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.stat .n{font-family:var(--font-head);font-weight:var(--head-weight);font-size:30px;line-height:1}
.stat .l{color:var(--muted);font-size:12.5px;margin-top:6px;letter-spacing:.04em}
.acc-layout{display:grid;grid-template-columns:230px 1fr;gap:var(--gap);align-items:start}
.acc-nav{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:10px;position:sticky;top:88px}
.acc-nav button{width:100%;text-align:left;background:transparent;border:none;color:var(--muted);font-family:inherit;
  font-size:14px;padding:11px 14px;border-radius:10px;cursor:pointer;transition:.18s;display:flex;justify-content:space-between;align-items:center}
.acc-nav button:hover{color:var(--text);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.acc-nav button.on{color:var(--text);background:color-mix(in srgb,var(--accent) 16%,transparent);font-weight:500}
.acc-nav .sep{height:1px;background:var(--line);margin:8px 6px}
.acc-nav .pill{font-size:11px;background:var(--accent);color:var(--on-accent);border-radius:999px;padding:1px 8px}
.panel{display:none}
.panel.show{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.panel h2{font-family:var(--font-head);font-weight:var(--head-weight);font-size:26px;margin-bottom:6px}
.panel .lead{color:var(--muted);font-size:14px;margin-bottom:22px}
/* lignes bibliothèque avec progression */
.lib-row{display:flex;gap:18px;align-items:center;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px;margin-bottom:12px}
.lib-row .mini{width:64px;height:84px;border-radius:8px;flex:none}
.lib-row .info{flex:1;min-width:0}
.lib-row .info h4{font-family:var(--font-head);font-weight:var(--head-weight);font-size:20px;margin-bottom:3px}
.lib-row .info .sm{color:var(--muted);font-size:13px}
.bar{height:5px;background:var(--line);border-radius:5px;margin-top:10px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent)}
.lib-row .act{display:flex;gap:8px;flex:none}
.icon-btn{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:8px 10px;cursor:pointer;font-size:13px}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
/* publications de l'auteur (statut) */
.pub-row{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 16px;margin-bottom:12px}
.badge{font-size:11.5px;padding:4px 10px;border-radius:999px;letter-spacing:.04em}
.badge.pubd{background:color-mix(in srgb,var(--accent-2) 24%,transparent);color:var(--accent-2)}
.badge.draft{background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.badge.review{background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent)}
/* réglages : toggles & options */
.setting{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.setting:last-child{border-bottom:none}
.setting .s-t{font-size:15px;color:var(--text)}
.setting .s-d{color:var(--muted);font-size:13px;margin-top:3px;max-width:52ch}
.toggle{width:46px;height:26px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;flex:none;transition:.2s}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s}
.toggle.on{background:var(--accent)}
.toggle.on::after{left:23px}
.notice{display:flex;gap:12px;background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
  border-radius:var(--radius);padding:14px 16px;font-size:13.5px;color:var(--text);margin-bottom:22px}
.notice .ic{color:var(--accent);font-size:16px}

/* ============================================================
   PUBLIER UN RÉCIT (éditeur)
   ============================================================ */
.editor{padding:42px 0 70px}
.editor .wrap{max-width:880px}
.ed-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:8px}
.ed-top h1{font-family:var(--font-head);font-weight:var(--head-weight);font-size:clamp(28px,3.4vw,40px)}
.ed-top .save{display:flex;gap:10px}
.field{margin-bottom:22px}
.field label{display:block;font-size:13px;letter-spacing:.04em;color:var(--muted);margin-bottom:8px}
.field .hint{font-size:12.5px;color:var(--muted);margin-top:6px}
.inp,.sel,.ta{width:100%;background:var(--surface);border:1px solid var(--line);color:var(--text);
  border-radius:var(--radius);padding:13px 15px;font-family:inherit;font-size:15px;transition:.18s}
.inp:focus,.sel:focus,.ta:focus{outline:none;border-color:var(--accent)}
.inp.title{font-family:var(--font-head);font-size:26px;font-weight:var(--head-weight)}
.ta{min-height:260px;resize:vertical;line-height:1.7;font-size:16px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tag-input{display:flex;gap:8px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:10px}
.tag-input .t{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--text);border:1px solid var(--line);
  padding:5px 12px;border-radius:999px;font-size:13px;display:flex;gap:7px;align-items:center}
.tag-input .t b{cursor:pointer;color:var(--muted)}
.tag-input input{border:none;background:transparent;color:var(--text);font-family:inherit;font-size:14px;flex:1;min-width:120px;outline:none}
/* sélecteur de couverture */
.cov-pick{display:flex;gap:12px;flex-wrap:wrap}
.cov-opt{width:70px;height:90px;border-radius:10px;cursor:pointer;border:2px solid transparent;transition:.15s}
.cov-opt:hover{transform:translateY(-2px)}
.cov-opt.sel{border-color:var(--text)}
/* niveau de chaleur */
.heat-pick{display:flex;gap:10px}
.heat-opt{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:var(--radius);
  padding:10px 16px;cursor:pointer;font-size:14px;transition:.18s}
.heat-opt.sel{border-color:var(--accent);color:var(--text);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.ed-toolbar{display:flex;gap:6px;background:var(--surface);border:1px solid var(--line);border-bottom:none;
  border-radius:var(--radius) var(--radius) 0 0;padding:8px}
.ed-toolbar button{background:transparent;border:none;color:var(--muted);width:34px;height:32px;border-radius:6px;cursor:pointer;font-size:14px}
.ed-toolbar button:hover{background:var(--surface-2);color:var(--text)}
.ed-toolbar+.ta{border-radius:0 0 var(--radius) var(--radius)}
.ed-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:8px;
  padding-top:22px;border-top:1px solid var(--line)}
.opt-line{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13.5px}

/* ============================================================
   PAGE AUTEUR (profil public)
   ============================================================ */
.author-banner{height:200px;position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 60%,#000),color-mix(in srgb,var(--accent-2) 55%,#000))}
.author-banner::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 120% at 80% 0%,rgba(255,255,255,.14),transparent 60%)}
.author-top{margin-top:-54px;position:relative;z-index:2;display:flex;gap:22px;align-items:flex-end;flex-wrap:wrap;margin-bottom:12px}
.author-av{width:120px;height:120px;border-radius:24px;background:linear-gradient(135deg,var(--accent),var(--accent-2));
  border:3px solid var(--bg);flex:none}
.author-meta{flex:1;min-width:240px;padding-bottom:6px}
.author-meta h1{font-family:var(--font-head);font-weight:var(--head-weight);font-size:clamp(30px,4vw,46px);line-height:1.02}
.author-meta .handle{color:var(--muted);font-size:14px;margin:4px 0 0}
.author-actions{display:flex;gap:10px;align-items:center;padding-bottom:8px}
.author-bio{max-width:62ch;color:color-mix(in srgb,var(--text) 90%,transparent);font-size:16px;margin:14px 0 20px}
.author-stats{display:flex;gap:34px;flex-wrap:wrap;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:30px}
.author-stats div{display:flex;flex-direction:column}
.author-stats .n{font-family:var(--font-head);font-weight:var(--head-weight);font-size:26px}
.author-stats .l{color:var(--muted);font-size:13px}
.subtabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:28px}
.subtabs button{background:transparent;border:none;border-bottom:2px solid transparent;color:var(--muted);
  font-family:inherit;font-size:14px;padding:12px 16px;cursor:pointer;margin-bottom:-1px;transition:.18s}
.subtabs button.on{color:var(--text);border-bottom-color:var(--accent)}

/* Responsive */
@media(max-width:880px){
  .featured{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
  .acc-layout{grid-template-columns:1fr}
  .acc-nav{position:static;display:grid;grid-template-columns:1fr 1fr}
  .acc-stats{grid-template-columns:1fr 1fr}
  .row2{grid-template-columns:1fr}
}
@media(max-width:560px){
  .grid{grid-template-columns:1fr}
}



/* ============================================================
   LES 5 VERSIONS — chaque thème ne redéfinit que les tokens.
   La structure ci-dessus ne change pas : seules couleurs,
   typographies et quelques rayons/espaces varient.
   ============================================================ */

/* 1 · VELOURS — sombre sensuel, bordeaux & or, serif romantique */
[data-theme="velours"]{
  --bg:#120a0d;--surface:#1d1217;--surface-2:#251820;--text:#f4ece9;--muted:#b89aa1;
  --line:rgba(255,255,255,.09);--accent:#c2425a;--accent-2:#d9a86c;--on-accent:#fff;
  --font-head:'Cormorant Garamond',serif;--font-body:'Inter',sans-serif;
  --radius:14px;--head-weight:600;--head-tracking:0px;
}

/* 2 · AURORE — clair élégant, crème & terracotta, Playfair */
[data-theme="aurore"]{
  --bg:#f7f1ea;--surface:#ffffff;--surface-2:#f0e6da;--text:#2a2320;--muted:#8a7b6e;
  --line:rgba(0,0,0,.10);--accent:#c9694b;--accent-2:#b08968;--on-accent:#fff;
  --font-head:'Playfair Display',serif;--font-body:'Source Sans 3',sans-serif;
  --radius:10px;--head-weight:700;--head-tracking:-.5px;--shadow:0 18px 50px rgba(120,80,60,.18);
}

/* 3 · NÉON NUIT — moderne, bleu nuit & magenta/cyan, grotesque */
[data-theme="neon"]{
  --bg:#0a0a14;--surface:#12122a;--surface-2:#171738;--text:#eef0ff;--muted:#9aa0c8;
  --line:rgba(255,255,255,.10);--accent:#ff3d8b;--accent-2:#36e0d6;--on-accent:#0a0a14;
  --font-head:'Space Grotesk',sans-serif;--font-body:'Jost',sans-serif;
  --radius:6px;--head-weight:700;--head-tracking:-1px;--shadow:0 18px 60px rgba(255,61,139,.20);
}

/* 4 · BOUDOIR — vintage, prune & vieux rose, Baskerville */
[data-theme="boudoir"]{
  --bg:#221019;--surface:#2e1622;--surface-2:#3a1d2c;--text:#f3e3e8;--muted:#c79bb0;
  --line:rgba(255,210,225,.12);--accent:#cf6f93;--accent-2:#d9a36e;--on-accent:#221019;
  --font-head:'Libre Baskerville',serif;--font-body:'EB Garamond',serif;
  --radius:18px;--head-weight:400;--head-tracking:0px;
}

/* 5 · ENCRE — minimal littéraire, papier & émeraude, Lora */
[data-theme="encre"]{
  --bg:#faf8f4;--surface:#ffffff;--surface-2:#f1efe8;--text:#1c1d1a;--muted:#6f7269;
  --line:rgba(0,0,0,.09);--accent:#1f6f5c;--accent-2:#a9743c;--on-accent:#fff;
  --font-head:'Lora',serif;--font-body:'Inter',sans-serif;
  --radius:8px;--head-weight:600;--head-tracking:0px;--shadow:0 18px 50px rgba(40,60,50,.14);
}

/* ============================================================
   HEADER 2 NIVEAUX — logo centré (niveau 1), nav centrée (niveau 2)
   Structure commune à tous les thèmes ; les versions ne varient
   que le style (typo, couleur, casse, ornements).
   ============================================================ */
.head-top .wrap{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;height:62px}
.ht-left{justify-self:start;display:flex;align-items:center;gap:10px}
.head-top .brand{justify-self:center;text-align:center}
.ht-right{justify-self:end;display:flex;align-items:center;gap:14px}
.ht-right .h-login{display:inline}
.head-nav{border-top:1px solid var(--line)}
.head-nav .wrap{display:flex;justify-content:center;align-items:center;min-height:46px}
.head-nav .nav{justify-content:center;gap:26px;flex-wrap:wrap}

/* --- Accents par thème (la structure ne change pas) --- */
/* AURORE — masthead aéré */
[data-theme="aurore"] .head-nav .nav{gap:32px}
[data-theme="aurore"] .head-top .brand{font-size:30px}
/* NÉON — nav en majuscules + accent lumineux sur le logo */
[data-theme="neon"] .site-head{border-bottom-width:2px}
[data-theme="neon"] .head-nav .nav a{text-transform:uppercase;font-size:12px;letter-spacing:.16em}
[data-theme="neon"] .head-top .brand{display:inline-flex;align-items:center;gap:10px}
[data-theme="neon"] .head-top .brand::before{content:"";width:4px;height:24px;background:var(--accent);box-shadow:0 0 14px var(--accent)}
[data-theme="neon"] .h-account::after{background:var(--accent-2);box-shadow:0 0 8px var(--accent-2)}
/* BOUDOIR — nav en italique avec fleurons */
[data-theme="boudoir"] .head-nav .nav a{font-style:italic;letter-spacing:.04em}
[data-theme="boudoir"] .head-nav .nav::before,[data-theme="boudoir"] .head-nav .nav::after{content:"❧";color:var(--accent-2);opacity:.7;align-self:center}
[data-theme="boudoir"] .head-top .brand{font-size:32px}
/* ENCRE — compact, nav fine */
[data-theme="encre"] .head-nav .nav{gap:22px}
[data-theme="encre"] .head-nav .nav a{font-size:13px}
[data-theme="encre"] .h-account{border-radius:9px}

@media(max-width:760px){
  .head-nav{overflow-x:auto}
  .head-nav .nav{flex-wrap:nowrap;white-space:nowrap;gap:18px;padding:0 16px}
}
@media(max-width:560px){
  .head-top .wrap{grid-template-columns:auto 1fr auto;gap:10px}
  .ht-left{gap:6px}
  .ht-right .h-login{display:none}
  .nav-cta{padding:6px 10px;font-size:11px}
}