/*
 * Ziana TV — feuille de style dédiée aux articles (single.php).
 * Chargée uniquement sur les articles, par-dessus style.css (mêmes
 * variables --z-red / --z-gold / --z-ink / --z-measure / --z-art-size).
 * Rien ici ne touche à l'accueil, aux rubriques ni aux annonces.
 */

/* ---------------------------------------------------- barre de lecture */
.z-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:90;
  background:rgba(0,0,0,.08) }
.z-progress span{ display:block; height:100%; width:0%; background:var(--z-red) }

/* -------------------------------------------------------- fil d'Ariane */
.z-crumbs{ background:#fff; border-bottom:1px solid var(--z-line) }
.z-crumbs .z-wrap{ display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding-block:11px; font-size:12.5px; color:var(--z-ink-2) }
.z-crumbs a:hover{ color:var(--z-red) }
.z-crumbs__current{ color:var(--z-ink); font-weight:700 }

/* ------------------------------------------------------- mise en page */
.z-single{ padding-block:24px 48px }
.z-single__grid{ display:grid; gap:32px; align-items:start }
@media(min-width:1000px){ .z-single__grid{ grid-template-columns:2fr 1fr } }
.z-single__aside{ display:grid; gap:22px }
@media(min-width:1000px){ .z-single__aside{ position:sticky; top:96px } }

/* --------------------------------------------------------- surtitre */
.z-pill{ display:inline-flex; align-items:center; font-size:11.5px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--z-red);
  padding:6px 13px; border-radius:999px }
.z-pill:hover{ background:var(--z-red-dark) }

.z-article__title{ font-size:clamp(26px,3.6vw,42px); line-height:1.16; margin:14px 0 10px;
  font-family:var(--z-font-title); font-weight:800 }

/* ------------------------------------------------------------ signature */
.z-byline{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
  margin-top:16px; padding-top:16px; border-top:1px solid var(--z-line);
  font-size:13px; color:var(--z-ink-2) }
.z-byline__author{ display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--z-ink) }
.z-byline__author b{ text-decoration:underline; text-decoration-color:var(--z-red);
  text-underline-offset:3px; text-decoration-thickness:1.5px }
.z-byline__author:hover b{ color:var(--z-red) }
.z-byline__avatar{ border-radius:50% }
.z-byline__sep{ color:var(--z-line) }
.z-byline__item{ display:inline-flex; align-items:center; gap:5px }
.z-byline__item--maj{ color:var(--z-red); font-weight:600 }
.z-byline__item svg{ opacity:.7 }

.z-tools{ display:inline-flex; align-items:center; gap:5px; margin-left:auto; padding-left:6px }
.z-tools__btn{ width:30px; height:30px; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; font-size:12px; font-weight:800;
  background:var(--z-paper); color:var(--z-ink-2) }
.z-tools__btn span{ font-size:9px; vertical-align:super; margin-left:1px }
.z-tools__btn:hover{ background:var(--z-gold-soft); color:var(--z-ink) }
.z-tools__btn[aria-pressed="true"]{ background:var(--z-red); color:#fff }

/* ---------------------------------------------------- image de l'article */
.z-article__media{ margin:0 }
.z-article__media img{ width:100%; display:block; border-radius:0 }

/* --------------------------------------------------- corps + rail latéral */
.z-article__layout{ max-width:calc(var(--z-measure) + 92px); margin-inline:auto;
  display:flex; gap:22px; align-items:flex-start }

.z-sharerail{ position:sticky; top:110px; flex:0 0 auto; width:42px;
  display:flex; flex-direction:column; align-items:center; gap:9px; padding-top:6px }
.z-sharerail__label{ font-size:9.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.1em; color:var(--z-ink-2); writing-mode:vertical-rl; margin-bottom:2px }
.z-sharerail__btn{ width:34px; height:34px; border-radius:50%; background:var(--z-paper);
  display:flex; align-items:center; justify-content:center; color:var(--z-ink-2) }
.z-sharerail__btn:hover{ background:var(--z-red); color:#fff }
@media(max-width:999px){ .z-sharerail{ display:none } }

.z-article__body{ font-family:"Source Serif 4",Georgia,"Times New Roman",serif }
.z-article__body h2,.z-article__body h3{ font-family:var(--z-font-title) }

/* --------------------------------------------------------------- sommaire */
.z-toc{ border:1px solid var(--z-line); border-radius:10px; background:var(--z-paper);
  margin:0 0 28px; overflow:hidden; font-family:var(--z-font) }
.z-toc__head{ width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; font-weight:800; font-size:14px }
.z-toc__head svg{ transition:transform .2s }
.z-toc__head[aria-expanded="false"] svg{ transform:rotate(-90deg) }
.z-toc ol{ list-style:decimal; margin:0; padding:0 16px 14px 30px; display:grid; gap:8px }
.z-toc ol a{ font-weight:600; font-size:14px }
.z-toc ol a:hover{ color:var(--z-red) }
.z-toc__head[aria-expanded="false"] + ol,
.z-toc[data-collapsed] ol{ display:none }

.z-pagelinks{ margin-top:24px; font-size:14px; display:flex; gap:8px; flex-wrap:wrap;
  align-items:center; font-family:var(--z-font) }
.z-pagelinks a,.z-pagelinks span{ padding:6px 12px; border-radius:8px; background:var(--z-paper) }

/* -------------------------------------------------- encart « à lire aussi » */
.z-readmore{ display:block; margin:26px 0; padding:16px 18px; border-left:4px solid var(--z-red);
  background:var(--z-gold-soft); border-radius:0 10px 10px 0; font-family:var(--z-font) }
.z-readmore__tag{ display:block; font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:.08em; color:var(--z-red); margin-bottom:6px }
.z-readmore a{ font-weight:700; font-size:15.5px }
.z-readmore a:hover{ color:var(--z-red) }
.z-inline-zone{ margin:26px 0 }
.z-inline-widget{ background:#fff; border:1px solid var(--z-line); border-radius:10px;
  padding:16px; font-family:var(--z-font) }
.z-inline-widget__title{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; margin:0 0 10px }

/* --------------------------------------------------------------- mots-clés */
.z-tags{ max-width:var(--z-measure); margin:0 auto; padding:0 26px 26px;
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-family:var(--z-font) }
.z-tags__label{ font-size:12px; font-weight:800; color:var(--z-ink-2);
  text-transform:uppercase; margin-right:4px }
.z-tags a{ font-size:13px; font-weight:700; background:var(--z-paper); padding:6px 12px; border-radius:999px }
.z-tags a:hover{ background:var(--z-red); color:#fff }

/* -------------------------------------------------------- partage (pied) */
.z-sharerow{ max-width:var(--z-measure); margin:0 auto; padding:22px 26px 30px;
  border-top:1px solid var(--z-line); display:flex; flex-wrap:wrap; align-items:center;
  gap:14px; font-family:var(--z-font) }
.z-sharerow__label{ font-size:13px; font-weight:800 }
.z-sharerow__btns{ display:flex; flex-wrap:wrap; gap:8px }
.z-sharerow__btn{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px;
  font-weight:700; background:var(--z-paper); padding:8px 12px; border-radius:999px; color:var(--z-ink-2) }
.z-sharerow__btn:hover{ background:var(--z-red); color:#fff }

/* ---------------------------------------------------- article précédent/suivant */
.z-adjacent{ max-width:var(--z-site); margin:28px auto 0; display:grid; gap:16px; padding-inline:16px }
@media(min-width:640px){ .z-adjacent{ grid-template-columns:1fr 1fr; padding-inline:0 } }
.z-adjacent__cell a{ display:block; background:#fff; border-radius:var(--z-radius);
  box-shadow:var(--z-shadow); padding:16px 18px; height:100% }
.z-adjacent__cell--next{ text-align:right }
.z-adjacent__lbl{ display:block; font-size:11px; font-weight:800; text-transform:uppercase;
  color:var(--z-red); margin-bottom:6px }
.z-adjacent__cell strong{ font-size:15px; line-height:1.3 }

/* ------------------------------------------------------------- encadré auteur */
.z-authorbox{ max-width:var(--z-site); margin:24px auto 0; background:#fff;
  border-radius:var(--z-radius); box-shadow:var(--z-shadow); padding:22px;
  display:flex; gap:16px; align-items:flex-start; margin-inline:16px }
@media(min-width:640px){ .z-authorbox{ margin-inline:auto } }
.z-authorbox__pic img{ border-radius:50%; width:64px; height:64px; object-fit:cover }
.z-authorbox__body h3{ font-size:16px; margin-bottom:6px }
.z-authorbox__body p{ margin:0 0 8px; font-size:14px; color:var(--z-ink-2) }
.z-authorbox__more{ font-size:13px; font-weight:700; color:var(--z-red) }

/* --------------------------------------------------------------- articles liés */
.z-related{ max-width:var(--z-site); margin:36px auto 0; padding-inline:16px }
@media(min-width:640px){ .z-related{ padding-inline:0 } }
.z-related__title{ font-size:20px; margin-bottom:16px; font-family:var(--z-font-title); font-weight:800 }
.z-related__grid{ display:grid; gap:16px; grid-template-columns:1fr }
@media(min-width:640px){ .z-related__grid{ grid-template-columns:repeat(3,1fr) } }
.z-rel{ background:#fff; border-radius:var(--z-radius); overflow:hidden; box-shadow:var(--z-shadow) }
.z-rel img,.z-rel__ph{ width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--z-paper); display:block }
.z-rel h3{ font-size:15px; padding:12px 14px 4px; line-height:1.3 }
.z-wmeta{ display:block; font-size:11.5px; color:var(--z-ink-2); padding:0 14px 14px }

/* ----------------------------------------------------------------- commentaires */
.z-comments-wrap{ max-width:var(--z-site); margin:28px auto 0; padding-inline:16px }
@media(min-width:640px){ .z-comments-wrap{ padding-inline:0 } }
.z-comments-toggle{ width:100%; text-align:left; background:#fff; border-radius:var(--z-radius);
  box-shadow:var(--z-shadow); padding:16px 20px; font-weight:800; font-size:15px;
  display:flex; align-items:center; justify-content:space-between }
.z-comments-toggle::after{ content:"+"; font-size:20px; color:var(--z-red) }
.z-comments-toggle[aria-expanded="true"]::after{ content:"\2013" }
.z-comments-panel{ background:#fff; border-radius:0 0 var(--z-radius) var(--z-radius);
  box-shadow:var(--z-shadow); padding:20px; margin-top:-1px }

/* ------------------------------------------------------- colonne latérale (widgets) */
.z-widget{ background:#fff; border-radius:var(--z-radius); box-shadow:var(--z-shadow); padding:18px }
.z-widget__title{ font-size:15px; font-weight:800; margin-bottom:14px; padding-bottom:10px;
  border-bottom:2px solid var(--z-red); font-family:var(--z-font-title) }
.z-wune img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:10px; margin-bottom:10px }
.z-wune h4{ font-size:16px; line-height:1.3; margin-bottom:6px }
.z-wune p{ margin:6px 0 0; font-size:13px; color:var(--z-ink-2) }
.z-wlist{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:12px }
.z-wlist li{ border-top:1px solid var(--z-line); padding-top:12px }
.z-wlist a{ display:flex; gap:10px; align-items:flex-start }
.z-wlist__thumb img{ width:64px; height:64px; object-fit:cover; border-radius:8px; display:block }
.z-wlist__txt strong{ display:block; font-size:13.5px; line-height:1.3; margin-bottom:4px }
.z-wtop{ list-style:none; margin:0; padding:0; display:grid; gap:14px }
.z-wtop a{ display:flex; gap:10px; align-items:center }
.z-wtop img{ width:56px; height:56px; object-fit:cover; border-radius:8px; flex:0 0 auto }
.z-wtop__body{ display:flex; gap:10px; align-items:center }
.z-wtop__num{ font-size:20px; font-weight:900; color:var(--z-gold); flex:0 0 auto; min-width:22px }
.z-wtop__body strong{ display:block; font-size:13.5px; line-height:1.3; margin-bottom:4px }
.z-widget--news{ background:var(--z-ink); color:#fff; text-align:center }
.z-widget--news__ico{ font-size:26px; display:block; margin-bottom:8px }
.z-widget--news h3{ color:#fff; font-size:16px; margin-bottom:6px }
.z-widget--news p{ font-size:13px; color:rgba(255,255,255,.75); margin-bottom:14px }
.z-widget--news form{ display:grid; gap:8px }
.z-widget--news input{ border:0; border-radius:999px; padding:10px 14px; font:inherit }
.z-widget--news button{ background:var(--z-gold); color:var(--z-ink); font-weight:800;
  border-radius:999px; padding:10px }
.z-widget--news small{ display:block; margin-top:10px; font-size:10.5px; color:rgba(255,255,255,.6) }

/* ------------------------------------------------------------------ retour en haut */
.z-totop{ position:fixed; right:18px; bottom:calc(84px + env(safe-area-inset-bottom));
  z-index:90; width:44px; height:44px; border-radius:50%; background:var(--z-ink); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,.25) }
.z-totop[hidden]{ display:none }
@media(min-width:860px){ .z-totop{ bottom:26px } }

/* -------------------------------------------------------------- mode sombre lecture */
body.z-read-dark{ background:#1b1b1b }
body.z-read-dark .z-article,
body.z-read-dark .z-single__aside .z-widget,
body.z-read-dark .z-toc,
body.z-read-dark .z-authorbox,
body.z-read-dark .z-adjacent__cell a,
body.z-read-dark .z-comments-toggle,
body.z-read-dark .z-comments-panel,
body.z-read-dark .z-rel{ background:#242424; color:#eaeaea; box-shadow:none }
body.z-read-dark .z-article__body{ color:#e6e6e6 }
body.z-read-dark .z-article__body a{ color:#fff; text-decoration-color:var(--z-gold) }
body.z-read-dark .z-crumbs,
body.z-read-dark .z-toc{ background:#242424; border-color:rgba(255,255,255,.1) }
body.z-read-dark .z-byline,
body.z-read-dark .z-tags a,
body.z-read-dark .z-sharerow__btn,
body.z-read-dark .z-sharerail__btn,
body.z-read-dark .z-tools__btn{ background:#2f2f2f; color:#ccc }

/* --------------------------------------------------------------- petits écrans */
@media(max-width:999px){
  .z-single__grid{ grid-template-columns:1fr }
  .z-single__aside{ position:static; top:auto }
  .z-article__layout{ max-width:100%; padding-inline:0 }
}
@media(max-width:859px){
  .z-byline{ font-size:12.5px }
  .z-tools{ margin-left:0; width:100%; justify-content:flex-end; margin-top:8px }
}
@media print{
  .z-progress,.z-crumbs,.z-sharerail,.z-tools,.z-toc__head,.z-sharerow,
  .z-totop,.z-single__aside,.z-adjacent,.z-comments-wrap{ display:none!important }
}