/*
Theme Name: ziana-tv
Text Domain: ziana-tv
Description: Thème de Ziana TV — web TV des diasporas congolaise, afrodescendantes et ultramarines. Charte rouge #DA1026 / or #F2B01E, bandeau principal rouge, rubriques, émissions, annonces et direct.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
WPVibe: yes
*/

/* =====================================================================
   Ziana TV — charte validée : rouge #DA1026 · or #F2B01E · blanc
   ===================================================================== */

:root{
  --z-red:#DA1026; --z-red-dark:#A80B1D; --z-gold:#F2B01E; --z-gold-soft:#FDF2DA;
  --z-ink:#141414; --z-ink-2:#4A4A4A; --z-paper:#F6F4F1; --z-line:rgba(0,0,0,.12);
  --z-site:1180px; --z-radius:14px;
  --z-shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
  --z-font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --z-font-title:"Poppins",var(--z-font);
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{ margin:0; background:var(--z-paper); color:var(--z-ink);
  font-family:var(--z-font); font-size:16px; line-height:1.55; padding-bottom:76px }
@media(min-width:860px){ body{ padding-bottom:0 } }

.z-wrap{ max-width:var(--z-site); margin-inline:auto; padding-inline:16px }
img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit }
.z-sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
h1,h2,h3,h4{ font-family:var(--z-font-title); font-weight:800; letter-spacing:-.015em; margin:0 }

.z-dot-live{ width:8px; height:8px; border-radius:50%; background:#fff;
  display:inline-block; animation:z-pulse 1.4s infinite }
@keyframes z-pulse{ 0%,100%{opacity:1} 50%{opacity:.25} }
.z-noscroll::-webkit-scrollbar{ display:none }
.z-noscroll{ scrollbar-width:none }

/* ------------------------------------------------------------ EN-TÊTE */
.z-header{ position:sticky; top:0; z-index:60 }
.z-topbar{ background:var(--z-ink); color:#fff; font-size:12.5px }
.z-topbar .z-wrap{ display:flex; align-items:center; justify-content:space-between; height:36px }
.z-topbar nav{ display:flex; align-items:center; gap:20px; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em }
.z-topbar a:hover{ color:var(--z-gold) }
.z-topbar .z-live{ display:inline-flex; align-items:center; gap:6px }

.z-banner{ background:var(--z-red); color:#fff }
.z-banner .z-wrap{ display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding-block:14px }
.z-banner__logo img{ height:46px; width:auto }
.z-banner__baseline{ display:block; margin-top:6px; font-size:10.5px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.82) }
.z-banner__cta{ display:inline-flex; align-items:center; gap:8px; background:var(--z-gold);
  color:var(--z-ink); font-weight:800; font-size:14px; padding:10px 18px; border-radius:999px;
  box-shadow:0 2px 0 rgba(0,0,0,.18); transition:transform .12s, background .12s }
.z-banner__cta:hover{ background:#ffc548; transform:translateY(-1px) }

.z-nav{ background:#fff; border-bottom:1px solid var(--z-line); box-shadow:var(--z-shadow) }
.z-nav .z-wrap{ display:flex; align-items:center; gap:4px; height:46px; overflow:visible }
.z-nav a{ position:relative; font-weight:700; font-size:14.5px; padding:0 14px; height:46px;
  display:inline-flex; align-items:center; white-space:nowrap; color:var(--z-ink) }
.z-nav a::after{ content:""; position:absolute; left:14px; right:14px; bottom:0; height:3px;
  background:var(--z-red); transform:scaleX(0); transition:transform .16s }
.z-nav a:hover::after,.z-nav a[aria-current="page"]::after,
.z-nav .current-menu-item a::after{ transform:scaleX(1) }
.z-nav ul{ display:flex; list-style:none; margin:0; padding:0 }
/* Sous-menus déroulants (ex. Rubriques > catégories) */
.z-nav li{ position:relative }
.z-nav ul ul{ position:absolute; top:100%; left:0; display:none; flex-direction:column;
  min-width:210px; background:#fff; border:1px solid var(--z-line);
  box-shadow:0 10px 24px rgba(0,0,0,.14); border-radius:0 0 8px 8px; padding:6px 0; z-index:60 }
.z-nav li:hover>ul, .z-nav li:focus-within>ul{ display:flex }
.z-nav ul ul li{ width:100% }
.z-nav ul ul a{ height:auto; width:100%; display:block; padding:9px 16px; font-weight:600 }
.z-nav ul ul a::after{ display:none }
.z-nav ul ul a:hover{ background:var(--z-paper,#f4f6fb) }
.z-nav .menu-item-has-children>a::after,
.z-nav li:has(ul)>a::after{ content:none }
.z-nav li:has(ul)>a{ padding-right:26px }
.z-nav li:has(ul)>a::before{ content:"\25BE"; position:absolute; right:12px; font-size:10px }

/* ------------------------------------------------------ bandeau URGENT */
.z-ticker{ background:var(--z-ink); color:#fff; font-size:13px; overflow:hidden }
.z-ticker .z-wrap{ display:flex; align-items:center; padding-inline:0 }
.z-ticker__tag{ flex:0 0 auto; background:var(--z-red); padding:6px 12px; font-weight:800;
  display:flex; align-items:center; gap:7px; text-transform:uppercase; letter-spacing:.05em }
.z-ticker__track{ display:flex; white-space:nowrap; animation:z-scroll 34s linear infinite;
  padding-block:6px }
.z-ticker__track span{ padding-inline:28px }
.z-ticker:hover .z-ticker__track{ animation-play-state:paused }
@keyframes z-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* --------------------------------------------------------------- CORPS */
.z-main{ padding-block:24px 48px }
.z-grid{ display:grid; gap:32px }
@media(min-width:1000px){ .z-grid{ grid-template-columns:2fr 1fr } }

.z-section-title{ display:flex; align-items:center; gap:10px; margin:34px 0 16px;
  font-size:22px; font-family:var(--z-font-title); font-weight:800 }
.z-section-title::before{ content:""; width:6px; height:24px; background:var(--z-red);
  border-radius:2px }
.z-section-title .z-more{ margin-left:auto; font-size:13px; font-weight:700; color:var(--z-red) }

.z-hero{ position:relative; border-radius:var(--z-radius); overflow:hidden; box-shadow:var(--z-shadow) }
.z-hero img{ width:100%; aspect-ratio:16/9; object-fit:cover }
.z-hero__body{ position:absolute; inset:auto 0 0 0; padding:26px 24px 22px; color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.88) 20%, rgba(0,0,0,0)) }
.z-hero__body h2,.z-hero__body h1{ font-size:clamp(20px,3vw,30px); line-height:1.18; margin-top:8px }
.z-hero__body p{ margin:8px 0 0; font-size:14.5px; color:rgba(255,255,255,.82); max-width:60ch }

.z-cards{ display:grid; gap:20px }
@media(min-width:640px){ .z-cards{ grid-template-columns:repeat(2,1fr) } }
.z-cards--3{ grid-template-columns:1fr }
@media(min-width:640px){ .z-cards--3{ grid-template-columns:repeat(3,1fr) } }

.z-card{ background:#fff; border-radius:var(--z-radius); overflow:hidden; box-shadow:var(--z-shadow);
  display:flex; flex-direction:column; transition:transform .15s, box-shadow .15s }
.z-card:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.11) }
.z-card img{ width:100%; aspect-ratio:16/10; object-fit:cover }
.z-card__body{ padding:14px 16px 18px; display:flex; flex-direction:column; gap:8px; flex:1 }
.z-card__title{ font-size:16.5px; line-height:1.3 }
.z-card__excerpt{ margin:0; font-size:14px; color:var(--z-ink-2) }
.z-card__meta{ font-size:12px; color:var(--z-ink-2); margin-top:auto }

.z-badge{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
  background:var(--z-red); color:#fff; padding:4px 9px; border-radius:4px }
.z-badge--gold{ background:var(--z-gold); color:var(--z-ink) }
.z-badge--ink{ background:var(--z-ink); color:#fff }

.z-panel{ background:#fff; border-radius:var(--z-radius); overflow:hidden;
  box-shadow:var(--z-shadow); margin-bottom:22px }
.z-panel__head{ background:var(--z-red); color:#fff; padding:11px 16px;
  font-family:var(--z-font-title); font-weight:800; font-size:15px;
  display:flex; align-items:center; justify-content:space-between; gap:10px }
.z-panel__head--ink{ background:var(--z-ink) }
.z-panel__head a{ font-size:11.5px; font-weight:700; color:rgba(255,255,255,.85) }
.z-panel__foot{ display:block; text-align:center; font-size:13px; font-weight:700;
  padding:10px; background:var(--z-gold-soft); border-top:1px solid var(--z-line) }

.z-feed{ list-style:none; margin:0; padding:0 16px }
.z-feed li{ padding:12px 0; border-bottom:1px solid var(--z-line); display:flex; gap:12px }
.z-feed li:last-child{ border-bottom:0 }
.z-feed time{ flex:0 0 46px; font-size:11.5px; font-weight:800; color:var(--z-red) }
.z-feed p{ margin:0; font-size:14px; line-height:1.4; font-weight:500 }

.z-live{ border-radius:var(--z-radius); overflow:hidden; background:var(--z-ink); color:#fff }
.z-live__frame{ position:relative; aspect-ratio:16/9; background:#000; cursor:pointer }
.z-live__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.z-live__frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.z-live__play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center }
.z-live__badge{ position:absolute; top:10px; left:10px; z-index:2; display:inline-flex; align-items:center;
  gap:6px; background:var(--z-red); color:#fff; font-size:11px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; padding:5px 10px; border-radius:999px }
.z-live__play span{ width:62px; height:62px; border-radius:50%; background:var(--z-red);
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,.4) }
.z-live__body{ padding:14px 16px 18px }
.z-live__body h3{ font-size:16px; margin-bottom:4px }
.z-live__body p{ margin:0; font-size:13px; color:rgba(255,255,255,.7) }

.z-ad{ background:#fff; border:1px dashed rgba(0,0,0,.22); border-radius:9px; padding:14px;
  text-align:center; margin-block:20px }
.z-ad__label{ font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:#9A9A9A; margin-bottom:8px }
.z-ad--billboard{ min-height:120px; display:flex; flex-direction:column; justify-content:center }

.z-annonce{ display:flex; gap:14px; background:#fff; border-radius:9px; padding:14px;
  box-shadow:var(--z-shadow) }
.z-annonce img{ width:82px; height:98px; object-fit:cover; border-radius:6px; flex:0 0 auto }
.z-annonce h4{ font-size:15px; margin-bottom:4px }
.z-annonce p{ margin:0; font-size:13px; color:var(--z-ink-2) }
.z-annonce__cat{ font-size:11px; font-weight:800; color:var(--z-red);
  text-transform:uppercase; letter-spacing:.06em }

.z-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px }
.z-filters a{ font-size:13px; font-weight:700; padding:7px 14px; border-radius:999px;
  background:#fff; box-shadow:var(--z-shadow) }
.z-filters a[aria-current="page"]{ background:var(--z-red); color:#fff }

/* ------------------------------------------------------- fil « en continu » */
.z-continu-crumbs{ font-size:12.5px; color:var(--z-ink-2); margin:8px 0 14px }
.z-continu-crumbs a{ color:var(--z-ink-2) }
.z-continu-crumbs a:hover{ color:var(--z-red) }
.z-continu-crumbs span[aria-hidden]{ margin:0 6px }

.z-continu-title{ font-size:clamp(26px,3.4vw,38px); font-family:var(--z-font-title);
  font-weight:800; letter-spacing:-.01em; margin:0 0 20px; text-transform:uppercase }

.z-continu-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px }
.z-continu-tags a{ font-size:13px; font-weight:700; padding:8px 16px; border-radius:999px;
  border:1.5px solid var(--z-line); color:var(--z-ink) }
.z-continu-tags a:hover{ border-color:var(--z-red); color:var(--z-red) }

.z-continu-day{ font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  color:var(--z-ink); padding-bottom:10px; border-bottom:2px solid var(--z-ink); margin:34px 0 4px }
.z-continu-day:first-of-type{ margin-top:0 }

.z-continu-list{ list-style:none; margin:0; padding:0 }
.z-continu-item{ display:flex; gap:20px; align-items:flex-start; justify-content:space-between;
  padding:20px 0; border-bottom:1px solid var(--z-line) }
.z-continu-item:last-child{ border-bottom:0 }
.z-continu-item__body{ flex:1 1 auto; min-width:0 }
.z-continu-item__time{ display:block; font-size:13px; font-weight:800; color:var(--z-ink);
  margin-bottom:8px }
.z-continu-item__title{ display:block; font-size:17px; font-weight:800; line-height:1.35;
  color:var(--z-ink); margin-bottom:8px }
.z-continu-item__title:hover{ color:var(--z-red) }
.z-continu-item__meta{ display:inline-flex; align-items:center; gap:7px; font-size:11.5px;
  font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--z-ink-2) }
.z-continu-item__meta::before{ content:""; width:9px; height:9px; background:var(--z-red);
  flex:0 0 auto }
.z-continu-item__thumb{ flex:0 0 150px; width:150px; height:100px; border-radius:8px;
  overflow:hidden; background:var(--z-paper) }
.z-continu-item__thumb img{ width:100%; height:100%; object-fit:cover; display:block }
@media(max-width:640px){
  .z-continu-item{ gap:14px }
  .z-continu-item__thumb{ flex:0 0 108px; width:108px; height:78px }
  .z-continu-item__title{ font-size:15.5px }
}

/* ------------------------------------------------------- carrousel « Nos émissions » */
.z-em-carousel{ position:relative; display:flex; align-items:center; gap:10px }
.z-em-carousel__track{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x proximity;
  scrollbar-width:none; padding:2px 2px 8px; -webkit-overflow-scrolling:touch; scroll-behavior:smooth }
.z-em-carousel__track::-webkit-scrollbar{ display:none }
.z-em-carousel__nav{ flex:0 0 auto; width:36px; height:36px; border-radius:50%; background:#fff;
  box-shadow:var(--z-shadow); font-size:22px; font-weight:700; color:var(--z-ink); border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center }
.z-em-carousel__nav:hover{ background:var(--z-gold-soft) }
@media(max-width:640px){ .z-em-carousel__nav{ display:none } }

.z-em-card{ flex:0 0 220px; scroll-snap-align:start; background:#fff; border-radius:var(--z-radius);
  overflow:hidden; box-shadow:var(--z-shadow); display:flex; flex-direction:column }
/* 3 émissions visibles par page sur grand écran, 2 sur tablette, effet « aperçu » sur mobile (déjà géré plus bas) */
@media(min-width:860px){ .z-em-card{ flex:0 0 calc((100% - 32px)/3) } }
@media(min-width:641px) and (max-width:859px){ .z-em-card{ flex:0 0 calc((100% - 16px)/2) } }
.z-em-card__media{ position:relative; display:block; aspect-ratio:16/9; background:var(--z-paper) }
.z-em-card__media img{ width:100%; height:100%; object-fit:cover; display:block }
.z-em-card__play{ position:absolute; right:8px; bottom:8px; width:30px; height:30px; border-radius:50%;
  background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center }
.z-em-card__title{ font-size:14.5px; font-weight:800; padding:12px 14px 2px; line-height:1.3; color:var(--z-ink) }
.z-em-card__host{ font-size:12px; color:var(--z-ink-2); padding:2px 14px 14px }
@media(max-width:640px){
  .z-em-card{ flex-basis:72vw; max-width:280px }
}
@media(max-width:400px){
  .z-em-card{ flex-basis:78vw }
}

/* ------------------------------------------------------------- page émission (cover) */
.z-em-hero{ position:relative; max-height:440px; overflow:hidden }
.z-em-hero img{ width:100%; height:100%; max-height:440px; object-fit:cover; display:block }
.z-em-hero__body{ position:absolute; inset:auto 0 0 0; padding:34px 24px 26px; color:#fff;
  background:linear-gradient(to top, rgba(0,0,0,.85) 25%, rgba(0,0,0,0)) }
.z-em-hero__body h1{ font-size:clamp(24px,4vw,38px); margin:0 0 8px }
.z-em-hero__body p{ margin:0; font-size:15px; color:rgba(255,255,255,.85) }

.z-em-h2{ font-size:20px; font-family:var(--z-font-title); font-weight:800; margin:8px 0 14px }
.z-em-concept{ background:#fff; border-radius:var(--z-radius); box-shadow:var(--z-shadow);
  padding:24px 26px; margin-bottom:10px; font-size:15.5px; line-height:1.7 }
.z-em-concept p{ margin:0 0 16px }

.z-em-host{ padding:20px 16px; text-align:center }
.z-em-host__pic{ width:96px; height:96px; border-radius:50%; object-fit:cover; margin:0 auto 12px; display:block }
.z-em-host__pic--fallback{ display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--z-red),var(--z-gold)); color:#fff;
  font-family:var(--z-font-title); font-weight:800; font-size:28px; letter-spacing:.02em }
.z-em-host h3{ font-size:16px; margin-bottom:8px }
.z-em-host p{ margin:0; font-size:13.5px; color:var(--z-ink-2); line-height:1.6 }
.z-em-info{ padding:14px 16px; margin:0; font-size:13.5px; color:var(--z-ink-2); line-height:1.6 }

/* ------------------------------------------------------------------- grille émissions : 3 cases par ligne, toujours */
.z-em-grid{ display:grid; gap:20px; grid-template-columns:repeat(3,1fr) }
.z-em-gcard{ background:#fff; border-radius:var(--z-radius); overflow:hidden; box-shadow:var(--z-shadow);
  display:flex; flex-direction:column; transition:transform .15s }
.z-em-gcard:hover{ transform:translateY(-3px) }
.z-em-gcard__media{ position:relative; display:block; aspect-ratio:16/9; background:var(--z-paper) }
.z-em-gcard__media img{ width:100%; height:100%; object-fit:cover; display:block }
.z-em-gcard__body{ padding:14px 16px 18px; display:flex; flex-direction:column; gap:4px }
.z-em-gcard__body strong{ font-size:15.5px; color:var(--z-ink) }
.z-em-gcard__body span{ font-size:12.5px; color:var(--z-ink-2) }
.z-em-gcard__horaires{ color:var(--z-red)!important; font-weight:700 }
@media(max-width:640px){
  .z-em-grid{ gap:8px }
  .z-em-gcard__body{ padding:8px 8px 10px }
  .z-em-gcard__body strong{ font-size:11.5px; line-height:1.25 }
  .z-em-gcard__body span{ font-size:10px }
  .z-em-card__play{ width:22px; height:22px }
  .z-em-card__play svg{ width:13px; height:13px }
}
@media(max-width:400px){
  .z-em-gcard__body strong{ font-size:10.5px }
  .z-em-gcard__body span{ font-size:9px }
}

/* Page de couverture émission : l'animateur (photo/nom) doit rester visible
   sans scroll long, sur tablette et mobile — on le remonte juste après la
   couverture, avant le concept et le carrousel « Autres émissions ». */
@media(max-width:999px){
  .z-em-page > aside{ order:-1; margin-bottom:22px }
  .z-em-page .z-em-host{ display:flex; align-items:center; gap:16px; text-align:left; padding:18px }
  .z-em-page .z-em-host__pic{ margin:0; flex:0 0 auto }
  .z-em-page .z-em-host h3{ margin-bottom:4px }
}
@media(max-width:480px){
  .z-em-page .z-em-host__pic{ width:72px; height:72px }
  .z-em-page .z-em-host__pic--fallback{ font-size:22px }
}

/* ------------------------------------------------------------------------- page Direct */
.z-chan-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px }
.z-chan-tab{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700;
  padding:10px 18px; border-radius:999px; background:#fff; box-shadow:var(--z-shadow); color:var(--z-ink) }
.z-chan-tab[aria-selected="true"]{ background:var(--z-red); color:#fff }
.z-chan-panel{ display:none }
.z-chan-panel[data-active]{ display:block }
.z-chan-out{ background:#fff; border-radius:var(--z-radius); box-shadow:var(--z-shadow); padding:50px 28px;
  text-align:center }
.z-chan-out h3{ font-size:19px; margin-bottom:8px }
.z-chan-out p{ font-size:14px; color:var(--z-ink-2); margin-bottom:20px }
.z-chan-out a{ display:inline-flex; align-items:center; gap:8px; background:var(--z-red); color:#fff;
  font-weight:800; padding:12px 26px; border-radius:999px }
.z-chan-out a:hover{ background:var(--z-red-dark) }
.z-chan-follow{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px }
.z-chan-follow a{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700;
  background:#fff; box-shadow:var(--z-shadow); padding:9px 16px; border-radius:999px; color:var(--z-ink) }
.z-chan-follow a:hover{ color:var(--z-red) }

/* ------------------------------------------------------------------ pagination */
.page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:38px;
  height:38px; padding:0 12px; margin:0 6px 8px 0; border-radius:8px; background:#fff;
  box-shadow:var(--z-shadow); font-size:13.5px; font-weight:700; color:var(--z-ink) }
.page-numbers.current{ background:var(--z-red); color:#fff; box-shadow:none }
.page-numbers.dots{ background:none; box-shadow:none }
a.page-numbers:hover{ background:var(--z-gold-soft) }
.nav-links,.pagination{ display:flex; flex-wrap:wrap; align-items:center }

/* Colonne de lecture centrée, à la façon des sites de presse.
   Réglages en une ligne :
   --z-measure  largeur du texte (en ch : ~1 caractère)  — défaut 74ch
   --z-art-size taille du corps de texte                  — défaut 17.5px  */
.z-article{
  --z-measure:74ch;
  --z-art-size:17.5px;
  background:#fff; border-radius:var(--z-radius); box-shadow:var(--z-shadow); overflow:hidden;
}
.z-article__head{ max-width:var(--z-measure); margin-inline:auto; padding:30px 26px 0 }
.z-article__head h1{ font-size:clamp(24px,3.4vw,40px); line-height:1.15; margin-block:12px }
.z-article__lead{ font-size:clamp(16px,2vw,19px); color:var(--z-ink-2); font-weight:500 }
.z-article__body{ max-width:var(--z-measure); margin-inline:auto; padding:24px 26px 44px }
.z-article__body p{ margin:0 0 20px; font-size:var(--z-art-size); line-height:1.75 }
.z-article__body h2{ font-size:23px; margin:30px 0 12px }
.z-article__body h3{ font-size:19px; margin:24px 0 10px }
.z-article__body ul,.z-article__body ol{ font-size:var(--z-art-size); line-height:1.7;
  margin:0 0 20px; padding-left:22px }
.z-article__body blockquote{ margin:26px 0; padding:6px 0 6px 20px;
  border-left:4px solid var(--z-gold); font-size:20px; font-style:italic }
.z-article__body img{ border-radius:10px; margin-block:18px }
.z-article__body .wp-block-embed{ margin:24px 0 }
.z-article__body iframe{ width:100%; aspect-ratio:16/9; height:auto; border:0; border-radius:10px }

/* Confort selon l'écran : le texte grandit avec la place disponible */
@media(min-width:1240px){ .z-article{ --z-art-size:18px } }
@media(max-width:859px){ .z-article{ --z-art-size:16.5px } }

.z-newsletter{ background:var(--z-red); color:#fff; border-radius:var(--z-radius);
  padding:26px 28px; margin-top:34px }
.z-newsletter h3{ font-size:20px; margin-bottom:6px }
.z-newsletter p{ margin:0 0 16px; font-size:14px; color:rgba(255,255,255,.85) }
.z-newsletter form{ display:flex; gap:10px; flex-wrap:wrap }
.z-newsletter input{ flex:1 1 240px; border:0; border-radius:999px; padding:12px 18px; font:inherit }
.z-newsletter button{ background:var(--z-gold); color:var(--z-ink); font-weight:800;
  border-radius:999px; padding:12px 26px }
.z-newsletter small{ display:block; margin-top:12px; font-size:11.5px; color:rgba(255,255,255,.7) }

/* -------------------------------------------------------------- FOOTER */
.z-footer{ background:var(--z-ink); color:rgba(255,255,255,.72); margin-top:56px; font-size:14px }
.z-footer a:hover{ color:var(--z-gold) }
.z-footer__top{ display:grid; gap:32px; padding-block:44px }
@media(min-width:860px){ .z-footer__top{ grid-template-columns:1.4fr 1fr 1fr 1fr } }
.z-footer h4{ color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.12em;
  margin-bottom:14px }
.z-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px }
.z-footer__logo img{ height:38px; width:auto; margin-bottom:14px }
.z-footer__legal{ border-top:1px solid rgba(255,255,255,.12); padding-block:18px;
  font-size:12.5px; display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between }

/* --------------------------------------------------- bottom nav (PWA) */
.z-bottomnav{ position:fixed; inset:auto 0 0 0; z-index:70; display:flex; background:#fff;
  border-top:1px solid var(--z-line); padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -4px 20px rgba(0,0,0,.08) }
@media(min-width:860px){ .z-bottomnav{ display:none } }
.z-bottomnav a{ flex:1; text-align:center; padding:9px 4px 8px; font-size:10.5px;
  font-weight:700; color:var(--z-ink-2) }
.z-bottomnav a[aria-current="page"]{ color:var(--z-red) }
.z-bottomnav svg{ display:block; margin:0 auto 3px }
.z-bottomnav .z-fab{ flex:0 0 auto; margin:-18px 8px 0; width:52px; height:52px;
  border-radius:50%; background:var(--z-red); color:#fff; display:flex;
  align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(218,16,38,.45) }

/* =====================================================================
   RESPONSIVE — mobile d'abord, l'application se comporte comme une app
   ===================================================================== */

/* Grandes tablettes / petits portables */
@media(max-width:999px){
  .z-grid{ grid-template-columns:1fr }
  .z-hero__body{ padding:20px 18px 18px }
}

/* Tablettes et mobiles : l'en-tête se compacte */
@media(max-width:859px){
  .z-topbar{ display:none }
  .z-banner .z-wrap{ padding-block:10px }
  .z-banner__logo svg{ height:28px!important }
  .z-banner__baseline{ display:none }
  .z-banner__cta{ font-size:0; padding:10px; width:42px; height:42px;
    justify-content:center; border-radius:50% }
  .z-banner__cta span[aria-hidden]{ font-size:20px; line-height:1 }
  .z-nav .z-wrap{ height:44px; gap:0; overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; flex-wrap:nowrap }
  .z-nav .z-wrap::-webkit-scrollbar{ display:none }
  .z-nav ul{ flex-wrap:nowrap }
  .z-nav a{ font-size:13.5px; padding:0 12px; height:44px; flex:0 0 auto }
  .z-section-title{ font-size:19px; margin-top:26px }
  .z-article__head{ padding:20px 18px 0 }
  .z-article__body{ padding:16px 18px 26px }
  .z-article__body p{ font-size:16.5px }
  .z-newsletter{ padding:22px 18px }
  .z-footer__top{ padding-block:32px }
}

/* Téléphones */
@media(max-width:600px){
  body{ font-size:15.5px }
  .z-wrap{ padding-inline:14px }
  .z-cards,.z-cards--3{ grid-template-columns:1fr; gap:16px }
  .z-hero img{ aspect-ratio:4/3 }
  .z-hero__body h1,.z-hero__body h2{ font-size:19px }
  .z-hero__body p{ display:none }
  .z-card__title{ font-size:16px }
  .z-annonce img{ width:68px; height:82px }
  .z-filters{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:4px }
  .z-filters::-webkit-scrollbar{ display:none }
  .z-filters a{ white-space:nowrap }
  .z-newsletter form{ flex-direction:column }
  .z-newsletter button{ width:100% }
  .z-footer__legal{ flex-direction:column; gap:8px }
}

/* Cibles tactiles : 44 px minimum (recommandation WCAG 2.5.5) */
@media(pointer:coarse){
  .z-nav a,.z-topbar a,.z-filters a,.z-bottomnav a{ min-height:44px }
  .z-feed li a{ display:block; padding-block:2px }
}

/* Mode application installée : on récupère les encoches et la barre système */
@media(display-mode:standalone){
  .z-topbar{ display:none }
  .z-header{ padding-top:env(safe-area-inset-top) }
  .z-banner{ padding-top:0 }
  body{ overscroll-behavior-y:contain }
}

/* Écrans très larges */
@media(min-width:1400px){
  :root{ --z-site:1280px }
}

/* Confort de lecture et impression */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important }
  .z-ticker__track{ animation:none }
}
@media print{
  .z-header,.z-ticker,.z-bottomnav,.z-ad,.z-newsletter,.z-footer,
  .z-pwa-install,.z-pwa-offline{ display:none!important }
  body{ background:#fff; padding:0 }
  .z-article{ box-shadow:none }
}

/* ------------------------------------------------------------- PWA (UI) */
.z-pwa-modal{ position:fixed; inset:0; z-index:200; display:flex; align-items:center;
  justify-content:center; padding:20px }
.z-pwa-modal[hidden]{ display:none }
.z-pwa-modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55) }
.z-pwa-modal__card{ position:relative; z-index:1; background:#fff; border-radius:18px;
  padding:34px 28px 28px; max-width:380px; width:100%; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.32); animation:z-slide-up .28s ease-out }
@keyframes z-slide-up{ from{ transform:translateY(24px); opacity:0 } to{ transform:none; opacity:1 } }
.z-pwa-modal__x{ position:absolute; top:10px; right:12px; font-size:26px; line-height:1;
  color:#9A9A9A; padding:6px }
.z-pwa-modal__logo{ width:64px; height:64px; border-radius:14px; display:block;
  margin:0 auto 18px; object-fit:cover }
.z-pwa-modal__msg{ font-size:15px; color:var(--z-ink-2); line-height:1.6; margin:0 0 22px }
.z-pwa-modal__install{ display:block; width:100%; background:var(--z-red); color:#fff;
  font-weight:800; font-size:15px; padding:14px; border-radius:10px; margin-bottom:12px }
.z-pwa-modal__install:hover{ background:var(--z-red-dark) }
.z-pwa-modal__later{ display:block; width:100%; background:none; border:1.5px solid var(--z-line);
  color:var(--z-ink); font-weight:700; font-size:14px; padding:12px; border-radius:10px }
.z-pwa-modal__later:hover{ border-color:var(--z-ink) }

.z-pwa-offline{
  position:fixed; inset:auto 0 0 0; z-index:160; background:var(--z-ink); color:#fff;
  text-align:center; font-size:13px; font-weight:600; padding:10px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
}

/* Vidéos locales (bloc « Vidéo » WordPress + balise video native) */
.wp-block-video, .z-em-concept .wp-block-video, .z-article .wp-block-video{ margin:18px 0 }
.wp-block-video video, video.z-video, .z-article video, .z-em-concept video{
  width:100%; height:auto; display:block; border-radius:12px; background:#000;
  box-shadow:0 8px 30px rgba(0,0,0,.18);
}
.wp-block-video figcaption{ font-size:13px; color:var(--z-ink-2); text-align:center; margin-top:8px }
.z-annonce-thumb{ float:left; margin:2px 10px 6px 0; width:52px; height:52px; border-radius:8px; overflow:hidden }
.z-annonce-thumb img{ width:52px; height:52px; object-fit:cover; display:block }
.z-annonce-cat{ display:block; font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--z-red); margin-top:2px }
.z-card__media{ position:relative; aspect-ratio:16/9; background:#000; border-radius:12px 12px 0 0; overflow:hidden }
.z-card__media video.z-video{ width:100%; height:100%; object-fit:cover; border-radius:0; box-shadow:none; display:block }

/* Bandeau d'installation compact, coin bas (persistant) */
.z-pwa-bar{
  position:fixed; left:16px; bottom:16px; z-index:190;
  width:min(340px, calc(100vw - 32px));
  display:grid; grid-template-columns:44px 1fr auto; gap:6px 12px; align-items:start;
  background:#fff; border:1px solid var(--z-line); border-radius:16px;
  padding:14px 16px; box-shadow:0 16px 44px rgba(0,0,0,.24);
  margin-bottom:env(safe-area-inset-bottom); animation:z-slide-up .28s ease-out;
}
.z-pwa-bar[hidden]{ display:none }
.z-pwa-bar__logo{ grid-row:1; width:44px; height:44px; border-radius:11px; object-fit:cover }
.z-pwa-bar__text{ grid-row:1; display:flex; flex-direction:column; gap:2px; line-height:1.35; min-width:0 }
.z-pwa-bar__text strong{ font-size:14px; color:var(--z-ink) }
.z-pwa-bar__text span{ font-size:12.5px; color:var(--z-ink-2) }
.z-pwa-bar__x{ grid-row:1; align-self:start; font-size:20px; line-height:1; color:#9A9A9A; padding:0 2px }
.z-pwa-bar__x:hover{ color:var(--z-ink) }
.z-pwa-bar__actions{ grid-column:1 / -1; display:flex; align-items:center; gap:14px; margin-top:4px }
.z-pwa-bar__install{ background:var(--z-red); color:#fff; font-weight:800; font-size:13.5px;
  padding:10px 20px; border-radius:9px }
.z-pwa-bar__install:hover{ background:var(--z-red-dark) }
.z-pwa-bar__later{ background:none; border:0; color:var(--z-ink-2); font-weight:700; font-size:13.5px;
  padding:8px 6px; cursor:pointer }
.z-pwa-bar__later:hover{ color:var(--z-ink) }

/* =====================================================================
   Codes de presse (inspiration grands médias, charte Ziana conservée)
   ===================================================================== */

/* Surtitre de rubrique : carré rouge + libellé capitales */
.z-kicker{ display:inline-flex; align-items:center; gap:8px; font-size:12px;
  font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--z-red) }
.z-kicker::before{ content:""; width:10px; height:10px; background:var(--z-red) }

/* Ligne de méta : publié / modifié / auteur */
.z-article__meta{ display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13px;
  color:var(--z-ink-2); margin-top:14px }
.z-article__meta b{ color:var(--z-ink); font-weight:700 }
.z-article__meta a{ text-decoration:underline; text-underline-offset:3px }

/* Chapô plus affirmé */
.z-article__lead{ font-weight:600; line-height:1.55 }

/* Légende + crédit sous l'image */
.z-article figure{ margin:0 }
.z-figcaption, .z-article figcaption, .z-article .wp-caption-text{
  max-width:var(--z-measure,74ch); margin-inline:auto;
  font-size:12.5px; color:var(--z-ink-2); padding:10px 26px 0; line-height:1.5 }

/* Liens soulignés dans le corps, à la façon presse */
.z-article__body a{ color:inherit; text-decoration:underline;
  text-decoration-color:var(--z-red); text-decoration-thickness:2px;
  text-underline-offset:3px }
.z-article__body a:hover{ color:var(--z-red) }

/* « L'essentiel » : fil latéral titré par la date */
.z-essentiel{ list-style:none; margin:0; padding:4px 16px }
.z-essentiel li{ padding:14px 0; border-bottom:1px solid var(--z-line) }
.z-essentiel li:last-child{ border-bottom:0 }
.z-essentiel a{ font-weight:700; font-size:14.5px; line-height:1.35; display:block }
.z-essentiel a:hover{ color:var(--z-red) }
.z-ess-cat{ display:inline-flex; align-items:center; gap:7px; margin-top:7px;
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--z-ink-2) }
.z-ess-cat::before{ content:""; width:9px; height:9px; background:var(--z-red) }
.z-ess-live{ color:var(--z-red) }
.z-ess-live::before{ border-radius:50%; animation:z-pulse 1.4s infinite }

/* ------------------------------------------------- slider (Nécrologie & co) */
.z-slider{ position:relative; overflow:hidden; background:#fff }
.z-slider__track{ display:flex; transition:transform .45s ease }
.z-slide{ flex:0 0 100%; min-width:0; display:block; position:relative }
.z-slide img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:top center;
  display:block; border-radius:0;
  max-height:min(64vh, 500px);          /* jamais plus haut que l'écran */
}

/* Dimensions selon l'appareil : l'encadré reste entier à l'écran partout */
@media(max-width:999px){
  .z-slide img{ aspect-ratio:16/11; max-height:420px }   /* sidebar passée sous le contenu, pleine largeur */
}
@media(max-width:600px){
  .z-slide img{ aspect-ratio:3/4; max-height:70vh }      /* téléphone : format portrait, visible en entier */
  .z-slider__nav{ width:40px; height:40px }              /* flèches tactiles ≥ 40 px */
}
.z-slide__body{
  position:absolute; inset:auto 0 0 0; padding:14px 16px 12px; color:#fff;
  display:grid; gap:2px;
  background:linear-gradient(to top, rgba(0,0,0,.82) 30%, rgba(0,0,0,0));
}
.z-slide__body strong{ font-size:14.5px; line-height:1.3 }
.z-slide__body span{ font-size:12px; color:rgba(255,255,255,.75) }
.z-slider__nav{
  position:absolute; top:50%; transform:translateY(-50%); left:8px;
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.92);
  color:var(--z-ink); font-size:22px; line-height:1; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.z-slider__nav--next{ left:auto; right:8px }
.z-slider__nav:hover{ background:var(--z-gold) }
.z-slider__dots{
  position:absolute; inset:auto 0 6px 0; display:flex; justify-content:center; gap:6px;
}
.z-slider__dots button{
  width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.5); padding:0;
}
.z-slider__dots button[aria-current="true"]{ background:var(--z-gold) }