/*
Theme Name: ZotNews
Description: ZotNews 3.0 — presse de masse mauricienne, premium & moderne.
Version: 3.0.0
Requires PHP: 8.0
Text Domain: zotnews-theme
*/

/* ===================== TOKENS ===================== */
:root{
  --ink:#15161A; --paper:#FFFFFF; --soft:#F5F5F2; --panel:#FAFAF8;
  --line:#E6E6E1; --mut:#6C6D73; --dim:#9A9BA1;
  --brand:#E23A2C;          /* rouge presse — variable, swappable */
  --brand-d:#C22C20;
  --dark:#14161c;           /* fond foncé CONSTANT (bandes/footer/newsletter) — jamais inversé en dark mode */
  --on-dark:#f4f4f2; --on-dark-mut:rgba(244,244,242,.66);
  --ink-06:rgba(21,22,26,.06);
  --wrap:1200px; --gut:clamp(16px,4vw,40px);
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif;
  --ui:"Archivo","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root{--ink:#EDEDEA;--paper:#0C0D10;--soft:#15161B;--panel:#131419;--line:#25262D;--mut:#9A9BA1;--dim:#5E5F66;--brand:#FF5A47;--brand-d:#E23A2C;--ink-06:rgba(255,255,255,.06);}}
:root[data-theme="dark"]{--ink:#EDEDEA;--paper:#0C0D10;--soft:#15161B;--panel:#131419;--line:#25262D;--mut:#9A9BA1;--dim:#5E5F66;--brand:#FF5A47;--ink-06:rgba(255,255,255,.06);}
:root[data-theme="light"]{--ink:#15161A;--paper:#FFFFFF;--soft:#F5F5F2;--panel:#FAFAF8;--line:#E6E6E1;--mut:#6C6D73;--dim:#9A9BA1;--brand:#E23A2C;--ink-06:rgba(21,22,26,.06);}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;letter-spacing:-.006em;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.zwrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.zot-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
::selection{background:var(--brand);color:#fff}

/* kickers / meta */
.zot-kicker{font-family:var(--ui);font-weight:700;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--brand)}
.zot-mono{font-family:var(--ui);font-size:.75rem;letter-spacing:.01em;color:var(--dim);font-weight:500}

/* ===================== TOP UTILITY BAR ===================== */
.zbar{background:var(--dark);color:var(--on-dark)}
.zbar-in{max-width:var(--wrap);margin:0 auto;padding:7px var(--gut);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.zbar-date{font-family:var(--ui);font-size:.72rem;font-weight:500;letter-spacing:.03em;color:rgba(244,244,242,.62);text-transform:capitalize}
.zbar-live{display:inline-flex;align-items:center;gap:6px;font-family:var(--ui);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.zbar-live .dot{width:7px;height:7px;border-radius:50%;background:var(--brand);animation:zp 1.7s infinite}
@keyframes zp{0%,100%{box-shadow:0 0 0 0 rgba(226,58,44,.5)}50%{box-shadow:0 0 0 5px rgba(226,58,44,0)}}
/* live data pills */
.zticker{display:flex;gap:16px;margin-left:auto;overflow:hidden;white-space:nowrap}
.zticker .it{font-family:var(--ui);font-size:.72rem;color:rgba(244,244,242,.6);display:flex;gap:6px;align-items:center}
.zticker .it b{color:#fff;font-weight:600}
.zticker .up{color:#2ec26e;font-weight:700}.zticker .dn{color:#ff6a5a;font-weight:700}
.zbar-social{display:flex;gap:12px}
.zbar-social a{font-family:var(--ui);font-size:.7rem;font-weight:600;color:rgba(244,244,242,.62);text-transform:uppercase;letter-spacing:.03em}
.zbar-social a:hover{color:#fff}
@media(max-width:820px){.zticker{display:none}}

/* ===================== MASTHEAD ===================== */
.zhead{background:var(--paper);border-bottom:4px solid var(--brand)}   /* filet rouge de masthead */
.zhead-in{max-width:var(--wrap);margin:0 auto;padding:24px var(--gut) 16px;text-align:center}
.zlogo{display:inline-flex;align-items:center;justify-content:center}
.zw{font-family:var(--display);font-weight:800;font-size:clamp(2.3rem,6vw,3.6rem);letter-spacing:-.035em;line-height:1;color:var(--ink)}
.zbaseline{font-family:var(--ui);font-size:.66rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);margin-top:11px}

/* ===================== NAV ===================== */
.znav{background:var(--paper);position:sticky;top:0;z-index:50;border-bottom:2px solid var(--ink)}
.znav.stuck{box-shadow:0 6px 20px -12px rgba(0,0,0,.25)}
.znav-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);display:flex;align-items:stretch;gap:2px;overflow-x:auto;scrollbar-width:none}
.znav-in::-webkit-scrollbar{display:none}
.znav-link{display:inline-flex;align-items:center;gap:7px;font-family:var(--ui);font-weight:600;font-size:.82rem;letter-spacing:.01em;text-transform:uppercase;padding:.8rem .85rem;white-space:nowrap;color:var(--ink);border-bottom:3px solid transparent;transition:.15s}
.znav-link:hover{color:var(--brand)}
.znav-link.is-active{border-color:var(--brand)}
.znav-sq{width:7px;height:7px;flex:none;border-radius:50%}
.znav-mini{display:none;font-family:var(--display);font-weight:800;font-size:1.05rem;padding:.7rem 0;margin-right:.5rem;align-items:center}
.znav-mini .o{display:inline-block;width:.6em;height:.6em;border-radius:50%;background:var(--brand);margin:0 .02em}

/* ===================== HOME ===================== */
.zsplit{max-width:var(--wrap);margin:0 auto;padding:2.2rem var(--gut) 0;display:grid;grid-template-columns:1.7fr 1fr;gap:0}
.zsplit>*{min-width:0}
.zlead{padding-right:2.2rem;border-right:1px solid var(--line)}
.zaside{padding-left:2.2rem}
@media(max-width:900px){.zsplit{grid-template-columns:1fr}.zlead{padding-right:0;border-right:0;border-bottom:1px solid var(--line);padding-bottom:1.6rem}.zaside{padding-left:0;padding-top:1.6rem}}

.zsec{display:block;font-family:var(--ui);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.zsec-line{display:flex;align-items:center;gap:.55rem;margin-bottom:.7rem}
.zsec-line .sq{width:9px;height:9px;border-radius:50%}
.zsec-line .rule{flex:1;height:2px;background:var(--ink)}

.zlead h1{font-family:var(--display);font-weight:800;font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.0;letter-spacing:-.025em;margin:.5rem 0 .7rem}
.zlead h1 a:hover{color:var(--brand)}
.zlead-img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--ink-06);border-radius:6px;margin-bottom:1rem}
.zlead-dek{font-family:var(--body);font-size:1.16rem;color:var(--mut);line-height:1.5;max-width:58ch}
.zlead-meta{margin-top:.9rem}

.zlist{list-style:none}
.zlist li{padding:1rem 0;border-top:1px solid var(--line)}
.zlist li:first-child{border-top:0;padding-top:0}
.zlist .k{margin-bottom:.3rem}
.zlist h3{font-family:var(--display);font-weight:700;font-size:1.12rem;line-height:1.14;letter-spacing:-.02em}
.zlist h3 a:hover{color:var(--brand)}
.zlist .zot-mono{display:block;margin-top:.35rem}

.zgrid-wrap{max-width:var(--wrap);margin:2.6rem auto 0;padding:0 var(--gut)}
.zgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.zgrid .zcard{padding:1.4rem 1.6rem;border-left:1px solid var(--line)}
.zgrid .zcard:first-child{border-left:0;padding-left:0}
@media(max-width:820px){.zgrid{grid-template-columns:1fr}.zgrid .zcard{border-left:0;border-top:1px solid var(--line);padding:1.3rem 0}.zgrid .zcard:first-child{border-top:0}}
.zcard-img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--ink-06);border-radius:6px;margin-bottom:.85rem}
.zcard h3{font-family:var(--display);font-weight:700;font-size:1.28rem;line-height:1.12;letter-spacing:-.02em;margin:.4rem 0 .45rem}
.zcard h3 a:hover{color:var(--brand)}
.zcard p{font-size:.96rem;color:var(--mut);line-height:1.5}

.zband{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:2.8rem;padding:2.4rem 0}
.zband .zwrap{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;text-align:center}
.zband .n{font-family:var(--display);font-weight:800;font-size:1.6rem;color:var(--brand);line-height:1;letter-spacing:-.02em}
.zband .l{font-family:var(--ui);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);margin-top:.5rem;font-weight:600}
@media(max-width:640px){.zband .zwrap{grid-template-columns:1fr;gap:1.2rem}}

/* ===================== ARTICLE ===================== */
.zprogress{position:fixed;top:0;left:0;height:3px;background:var(--brand);z-index:99;width:0}
.zart{max-width:700px;margin:0 auto;padding:2.6rem var(--gut) 0}
.zbread{font-family:var(--ui);font-size:.72rem;letter-spacing:.02em;text-transform:uppercase;color:var(--mut);margin-bottom:1.1rem;font-weight:600}
.zbread a:hover{color:var(--brand)}
.zart-kicker{margin-bottom:.7rem;display:inline-flex;align-items:center;gap:.5rem}
.zart-kicker .sq{width:9px;height:9px;border-radius:50%}
.zart h1{font-family:var(--display);font-weight:800;font-size:clamp(2rem,5vw,3rem);line-height:1.04;letter-spacing:-.03em;margin-bottom:1rem}
.zart-dek{font-family:var(--body);font-size:1.28rem;line-height:1.45;color:var(--mut);margin-bottom:1.4rem;font-weight:400}
.zart-byline{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;padding:.9rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:1.7rem}
.zart-by{font-family:var(--ui);font-size:.86rem;font-weight:600}
.zart-by span{color:var(--mut);font-weight:500}
.zart-share{margin-left:auto;display:flex;gap:.5rem}
.zart-share a{font-family:var(--ui);font-size:.68rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;border:1px solid var(--line);border-radius:100px;padding:.4rem .8rem;transition:.15s}
.zart-share a:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.zhero-img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--ink-06);border-radius:8px;margin-bottom:.5rem}
.zhero-cap{font-family:var(--ui);font-size:.72rem;color:var(--dim);margin-bottom:1.9rem}

.zbody{font-family:var(--body);font-size:1.16rem;line-height:1.7}
.zbody>p{margin:0 0 1.2rem}
.zbody>p:first-of-type::first-letter{font-family:var(--display);font-weight:800;font-size:3.2em;line-height:.76;float:left;margin:.05em .1em 0 0;color:var(--brand)}
.zbody h2{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;margin:1.9rem 0 .4rem}
.zbody a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.zbody blockquote{border-left:3px solid var(--brand);padding-left:1.2rem;margin:1.5rem 0;font-size:1.3rem;color:var(--ink);font-weight:500}

.zot-retenir{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:0 8px 8px 0;padding:1.3rem 1.4rem;margin:2.2rem 0}
.zot-retenir-label{font-family:var(--ui);font-weight:700;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--brand)}
.zot-retenir ul{margin:.7rem 0 .6rem;padding-left:1.1rem}
.zot-retenir li{font-size:.98rem;margin:.25rem 0}
.zot-retenir li a{color:var(--brand);text-decoration:underline}
.zot-retenir-note{font-family:var(--ui);font-size:.78rem;color:var(--mut);margin:0}

.zauthor{display:flex;gap:1rem;align-items:flex-start;border-top:1px solid var(--line);padding-top:1.4rem;margin-top:2rem}
.zauthor .av{width:54px;height:54px;flex:none;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:1.3rem}
.zauthor .n{font-family:var(--ui);font-weight:700;font-size:1rem}
.zauthor .b{font-size:.95rem;color:var(--mut);line-height:1.5;margin-top:.2rem}
.zrelated{max-width:700px;margin:2.6rem auto 0;padding:0 var(--gut)}

/* ===================== CATEGORY ===================== */
.zcat-head{background:var(--dark);color:var(--on-dark);padding:2.6rem 0 2.2rem}
.zcat-head .zwrap{display:flex;align-items:center;gap:1rem}
.zcat-head .sq{width:16px;height:16px;flex:none;border-radius:50%}
.zcat-head h1{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,6vw,3.4rem);letter-spacing:-.03em;line-height:1}
.zcat-head .zcount{font-family:var(--ui);font-size:.78rem;color:rgba(244,244,242,.6);margin-left:auto;font-weight:600}
.zindex{max-width:900px;margin:0 auto;padding:0 var(--gut)}
.zrow{display:grid;grid-template-columns:auto 1fr auto;gap:1.2rem;align-items:baseline;padding:1.3rem 0;border-top:1px solid var(--line)}
.zrow:first-child{border-top:0}
.zrow .num{font-family:var(--display);font-size:1rem;color:var(--brand);font-weight:700}
.zrow h2{font-family:var(--display);font-weight:700;font-size:1.4rem;line-height:1.12;letter-spacing:-.02em}
.zrow h2 a:hover{color:var(--brand)}
.zrow .zot-mono{white-space:nowrap}
.zrow .dek{grid-column:2;font-size:1rem;color:var(--mut);margin-top:.3rem;line-height:1.45;max-width:64ch}
@media(max-width:640px){.zrow{grid-template-columns:auto 1fr}.zrow .zot-mono{grid-column:2;margin-top:.3rem}}

/* ===================== NEWSLETTER ===================== */
.zot-nl{background:var(--dark);color:var(--on-dark);padding:2.4rem var(--gut);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem}
.zot-nl--block{max-width:var(--wrap);margin:2.8rem auto 0;border-radius:10px}
.zot-nl--inline{margin:2.6rem 0;border-radius:10px}
.zot-nl-copy{flex:1 1 320px}
.zot-nl-copy h3{font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,3vw,2rem);line-height:1.08;margin:.35rem 0 .3rem;letter-spacing:-.02em}
.zot-nl-copy p{color:rgba(244,244,242,.66);font-size:.98rem;max-width:44ch}
.zot-nl .zot-kicker{color:var(--brand)}
.zot-nl-form{display:flex;gap:.5rem;flex:1 1 320px;max-width:440px;flex-wrap:wrap}
.zot-nl-form input[type=email]{flex:1 1 200px;min-width:0;border:0;border-radius:8px;padding:.9rem 1rem;font-family:var(--body);font-size:.95rem;color:var(--ink);background:#fff}
.zot-nl-form button{border:0;border-radius:8px;padding:.9rem 1.5rem;background:var(--brand);color:#fff;font-family:var(--ui);font-weight:700;font-size:.9rem;cursor:pointer;transition:.15s}
.zot-nl-form button:hover{background:var(--brand-d)}
.zot-nl-ok{flex:1 1 320px;color:var(--brand);font-family:var(--ui);font-weight:700;font-size:1.05rem;max-width:440px}

/* ===================== FOOTER ===================== */
.zfoot{background:var(--dark);color:var(--on-dark);margin-top:3rem;padding:2.8rem 0 1.8rem}
.zfoot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2rem;padding-bottom:1.8rem;border-bottom:1px solid rgba(244,244,242,.14)}
@media(max-width:720px){.zfoot-top{grid-template-columns:1fr}}
.zfoot .np{font-family:var(--display);font-weight:800;font-size:1.7rem;display:inline-flex;align-items:center;letter-spacing:-.02em}
.zfoot .np .o{display:inline-block;width:.6em;height:.6em;border-radius:50%;background:var(--brand);margin:0 .02em}
.zfoot p{color:rgba(244,244,242,.6);font-size:.92rem;line-height:1.6;margin-top:.6rem;max-width:42ch}
.zfoot h4{font-family:var(--ui);font-weight:700;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(244,244,242,.5);margin-bottom:.7rem}
.zfoot ul{list-style:none}
.zfoot ul li{margin:.35rem 0}
.zfoot ul a{color:rgba(244,244,242,.8);font-family:var(--ui);font-size:.9rem}
.zfoot ul a:hover{color:var(--brand)}
.zcolophon{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-top:1.4rem;font-family:var(--ui);font-size:.74rem;color:rgba(244,244,242,.5);letter-spacing:.02em}

/* pagination */
.pagination,.navigation.pagination{max-width:900px;margin:1.4rem auto 0;padding:0 var(--gut) 1rem}
.pagination .nav-links{display:flex;gap:.4rem;flex-wrap:wrap;font-family:var(--ui)}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 .6rem;border:1px solid var(--line);border-radius:6px;font-weight:700;color:var(--ink)}
.pagination .page-numbers:hover{border-color:var(--brand);color:var(--brand)}
.pagination .page-numbers.current{background:var(--brand);color:#fff;border-color:var(--brand)}

@media(max-width:600px){body{font-size:16px}.znav-mini{display:inline-flex}.zbar-date{display:none}}