/* =========================================================
   CHRONIQUES — LISTE + DÉTAIL
   Styles propres aux templates Chroniques.
   Le header, le CTA et le footer restent définis dans style.css.
   ========================================================= */
body.chroniques-page{background:#070707}

/* HERO LISTE */
.chron-hero{position:relative;overflow:hidden;border-bottom:1px solid #514000;background:#080808}
.chron-hero::before{content:"";position:absolute;inset:0;background-image:var(--dg-fond,url("../images/fond.webp"));background-size:cover;background-position:center 32%;opacity:.15;pointer-events:none}
.chron-hero-inner{position:relative;z-index:1;min-height:365px;display:grid;grid-template-columns:minmax(0,.82fr) minmax(420px,1.18fr);align-items:stretch;gap:28px}
.chron-hero-copy{display:flex;flex-direction:column;justify-content:center;padding:48px 0}
.chron-breadcrumb{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:17px;color:#bdbdbd;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px}
.chron-breadcrumb .current{color:var(--yellow)}
.chron-hero-copy h1{margin:0;font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-size:clamp(62px,7vw,94px);line-height:.9;text-transform:uppercase;letter-spacing:.7px}
.chron-stroke{width:160px;height:7px;margin:17px 0 21px;background:var(--yellow);transform:skewX(-18deg);box-shadow:0 3px 0 #4a3900}
.chron-hero-copy p{max-width:490px;margin:0;color:#e0e0e0;font-size:18px;line-height:1.55}
.chron-hero-image{position:relative;min-height:365px;overflow:hidden}
.chron-hero-image::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#080808 0%,rgba(8,8,8,.48) 11%,rgba(8,8,8,.02) 42%,rgba(8,8,8,.08) 82%,#080808 100%);pointer-events:none}
.chron-hero-image img{width:100%;height:100%;object-fit:cover;object-position:center center;transform:scale(1.02)}

/* LAYOUT */
.chron-content{padding:34px 0 52px;background:linear-gradient(180deg,#080808,#060606)}
.chron-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;align-items:start}
.chron-main{min-width:0}
.chron-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}
.chron-kicker{display:block;margin-bottom:4px;color:var(--yellow);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:2px}
.chron-heading h2{margin:0;font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-size:38px;text-transform:uppercase;letter-spacing:.7px}
.chron-count{font-size:11px;text-transform:uppercase;color:#8d8d8d;font-weight:800}
.chron-heading-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.chron-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}

/* CARTES */
.chron-card{overflow:hidden;background:linear-gradient(180deg,#111,#0a0a0a);border:1px solid #4c3a00;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.chron-card:hover{transform:translateY(-3px);border-color:var(--yellow);box-shadow:0 12px 28px rgba(0,0,0,.38)}
.chron-card-image{display:block;aspect-ratio:16/8.5;overflow:hidden;background:#101010;border-bottom:1px solid #2d260e}
.chron-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease,filter .35s ease;filter:saturate(.82) contrast(1.03)}
.chron-card:hover .chron-card-image img{transform:scale(1.045);filter:saturate(1)}
.chron-card-body{padding:16px 16px 17px}
.chron-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.45px;color:#a9a9a9}
.chron-meta span{color:var(--yellow)}
.chron-meta b{color:#665400}
.chron-card h3{margin:0 0 10px;font-size:22px;line-height:1.18;letter-spacing:-.3px}
.chron-card h3 a:hover{color:var(--yellow)}
.chron-card p{margin:0 0 13px;color:#bdbdbd;font-size:13px;line-height:1.55}
.chron-read{display:inline-flex;align-items:center;gap:9px;color:var(--yellow);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.35px}
.chron-read span{font-size:16px;transition:transform .2s ease}
.chron-read:hover span{transform:translateX(4px)}
.chron-pagination{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.chron-pagination .page-numbers{min-width:34px;height:34px;padding:0 10px;border:1px solid #343434;display:grid;place-items:center;font-size:11px;font-weight:800;color:#bdbdbd}
.chron-pagination .page-numbers.current,.chron-pagination a.page-numbers:hover{border-color:var(--yellow);color:#111;background:var(--yellow)}
.chron-pagination .page-numbers.dots{border-color:transparent}
.chron-empty{margin:0;padding:24px;border:1px solid #2b2b2b;color:#bdbdbd}

/* SIDEBAR */
.chron-sidebar{display:grid;gap:14px;position:sticky;top:102px}
.side-panel{background:linear-gradient(180deg,#0e0e0e,#090909);border:1px solid #514000;padding:16px}
.side-title{display:flex;align-items:center;gap:10px;padding-bottom:11px;border-bottom:1px solid #2d2d2d;margin-bottom:12px}
.side-title-icon{width:32px;height:32px;flex:0 0 32px;border:1px solid var(--yellow);border-radius:50%;display:grid;place-items:center;color:var(--yellow);font-size:15px;font-weight:900}
.side-title h2{margin:0;font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;text-transform:uppercase;font-size:22px;letter-spacing:.7px}
.side-title h2::after{content:"";display:inline-block;width:42px;height:3px;margin-left:10px;background:var(--yellow);vertical-align:middle;transform:skewX(-18deg)}
.side-intro{margin:0 0 13px;color:#aaa;font-size:12px;line-height:1.5}
.category-list{display:grid}
.category-list a{display:flex;justify-content:space-between;gap:14px;padding:10px 2px;border-top:1px solid #202020;font-size:12px;color:#d8d8d8}
.category-list a:first-child{border-top:0}
.category-list a:hover,.category-list a.active{color:var(--yellow)}
.category-list span{color:var(--yellow);font-weight:900}
.music-panel{padding-left:14px;padding-right:14px}
.platform-grid{width:100%;display:grid;grid-template-columns:1fr;gap:9px}
.platform-link{
  width:100%;
  min-height:66px;
  padding:10px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.platform-link:hover,
.platform-link:focus-visible{
  transform:translateY(-2px);
}
.platform-link img{
  width:auto;
  max-width:88%;
  height:auto;
  max-height:44px;
  object-fit:contain;
  display:block;
}
.sidebar-social-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sidebar-social-link{height:58px;border:1px solid #2b2b2b;display:flex;align-items:center;gap:9px;padding:9px;background:#0b0b0b;transition:.2s ease}
.sidebar-social-link:hover{border-color:var(--yellow);transform:translateY(-2px)}
.sidebar-social-link img{width:30px;height:30px;object-fit:contain}
.sidebar-social-link span{font-size:9px;font-weight:900;text-transform:uppercase;color:#e6e6e6}

/* ARTICLE DETAIL */
.article-hero{position:relative;overflow:hidden;border-bottom:1px solid #514000;background:#080808}
.article-hero::before{content:"";position:absolute;inset:0;background-image:var(--dg-fond,url("../images/fond.webp"));background-size:cover;background-position:center 60%;opacity:.16;pointer-events:none}
.article-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.9fr);min-height:410px;gap:32px;align-items:center;padding:38px 0}
.article-hero-copy h1{margin:0;max-width:730px;font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-size:clamp(46px,5.1vw,72px);line-height:.98;letter-spacing:.15px}
.article-hero-copy>p{max-width:650px;margin:14px 0 0;color:#d3d3d3;font-size:16px;line-height:1.55}
.article-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:#bdbdbd;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px}
.article-meta b{color:var(--yellow)}
.article-hero-image{min-height:330px;height:330px;overflow:hidden;border:1px solid #5b4700;background:#0a0a0a}
.article-hero-image a{display:block;height:100%}
.article-hero-image img{width:100%;height:100%;object-fit:cover;object-position:center 58%;filter:saturate(.92) contrast(1.04)}
.article-content-wrap{padding-top:28px}
.article-body{min-width:0;background:linear-gradient(180deg,#0e0e0e,#090909);border:1px solid #4e3c00;padding:28px 30px 30px}
.article-body p{color:#d0d0d0;font-size:16px;line-height:1.78;margin:0 0 20px}
.article-body .article-intro{font-size:18px;color:#f0f0f0}
.article-body h2{margin:32px 0 12px;font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-size:31px;text-transform:uppercase;letter-spacing:.5px;color:#fff}
.article-quote,.article-content blockquote{margin:28px 0;padding:20px 22px;border-left:5px solid var(--yellow);background:#111;color:#f1f1f1;font-size:21px;font-style:italic;line-height:1.5}
.article-content blockquote p{margin:0;color:inherit;font-size:inherit}

/* Texte d'une chronique (éditeur classique) */
.article-content>:first-child{margin-top:0}
.article-content h3{margin:28px 0 10px;font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-size:25px;font-weight:400;text-transform:uppercase;letter-spacing:.5px;color:#fff}
.article-content h3 strong{font-weight:inherit}
.article-content a{color:var(--yellow);text-decoration:underline;text-underline-offset:3px}
.article-content a.album-listen-button{display:inline-flex;align-items:center;gap:12px;max-width:100%;box-sizing:border-box;padding:14px 22px;background:var(--yellow);color:#111;border:1px solid var(--yellow);border-radius:8px;font-size:15px;font-weight:800;line-height:1.4;text-decoration:none;box-shadow:0 4px 16px #0004;transition:background .2s,box-shadow .2s}
.article-content a.album-listen-button:hover{background:#ffe066;color:#111;box-shadow:0 6px 22px #0006}
.article-content a.album-listen-button:focus-visible{outline:2px solid #fff;outline-offset:4px}
.album-listen-button .album-play-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:#111;color:var(--yellow);font-size:14px;padding-left:2px;box-sizing:border-box}
.article-content ul,.article-content ol{margin:0 0 20px;padding-left:22px;color:#d0d0d0;line-height:1.7}
.article-content img{max-width:100%;height:auto;border:1px solid #3a2e00}
.article-content .article-zoom{display:inline-block;max-width:100%;margin:0 6px 6px 0;vertical-align:top;cursor:zoom-in;text-decoration:none}
.article-content .article-zoom:hover img,.article-content .article-zoom:focus-visible img{border-color:var(--yellow)}
.article-content .aligncenter{display:block;margin-left:auto;margin-right:auto}
.article-content .alignleft{float:left;margin:4px 20px 12px 0}
.article-content .alignright{float:right;margin:4px 0 12px 20px}
/* Image alignée à droite et agrandissable : c'est le lien (article-zoom) qui flotte */
.article-content .article-zoom:has(> .alignright){float:right;width:min(42%,300px);margin:4px 0 16px 24px}
.article-content .article-zoom > .alignright{float:none;width:100%;height:auto;margin:0}
.article-content blockquote{display:flow-root}
.article-content .article-zoom:has(> .aligncenter){display:block;clear:both;width:fit-content;margin:24px auto 0}
.article-content .wp-caption{max-width:100%}
.article-content .wp-caption-text{margin-top:6px;color:#aaa;font-size:12px}
.article-content::after{content:"";display:block;clear:both}
/* Comparaison de deux images côte à côte (ex. ancienne et nouvelle mascotte) */
.article-content .article-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;clear:both;margin:26px 0}
.article-compare figure{margin:0;min-width:0;text-align:center}
.article-content .article-compare .article-zoom{display:block;margin:0}
.article-content .article-compare img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:#0b0b0b}
.article-compare figcaption{margin-top:8px;color:#aaa;font-size:13px;line-height:1.45}
.article-gallery{margin-top:34px;padding-top:4px}
.article-section-title{display:flex;align-items:center;gap:10px;border-bottom:1px solid #383000;padding-bottom:11px;margin-bottom:14px}
.article-section-title span{color:var(--yellow)}
.article-section-title h2{margin:0;font-size:26px}
.article-gallery-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.article-gallery-grid figure{margin:0;min-width:0}
.article-gallery-grid img{width:100%;height:auto;aspect-ratio:1/1.05;object-fit:cover;border:1px solid #5b4700;background:#111}
.article-gallery-grid figcaption{padding-top:6px;font-size:9px;text-align:center;color:#aaa}
.article-back{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:24px 16px;margin-top:28px;padding-top:18px;border-top:1px solid #252525}
.article-back .article-previous{grid-column:1;grid-row:1;justify-self:start}
.article-back .article-next{grid-column:2;grid-row:1;justify-self:end;text-align:right}
.article-back .article-return{grid-column:1 / -1;justify-self:center;text-align:center}
.article-back a{color:var(--yellow);font-size:11px;font-weight:900;text-transform:uppercase}
/* Flèches précédent / suivant : clignotent et glissent vers leur direction */
.article-back .article-arrow{display:inline-block;font-size:16px;line-height:1;vertical-align:-1px;animation:article-arrow-blink 1.2s ease-in-out infinite}
.article-back .article-previous .article-arrow{--arrow-shift:-5px}
.article-back .article-next .article-arrow{--arrow-shift:5px}
.article-back a:hover .article-arrow,.article-back a:focus-visible .article-arrow{animation:none;opacity:1}
@keyframes article-arrow-blink{0%,100%{opacity:1;transform:translateX(0)}50%{opacity:.25;transform:translateX(var(--arrow-shift,0))}}
@media (prefers-reduced-motion:reduce){.article-back .article-arrow{animation:none}}

/* AGRANDISSEMENT DES IMAGES — PAGE DÉTAIL (Lightbox2) */
.article-hero-image a,.article-gallery-grid a{cursor:zoom-in}
.article-hero-full-image .article-hero-inner{grid-template-columns:minmax(0,1fr)}
.article-hero-full-image .article-hero-image{height:auto;min-height:0;width:100%}
.article-hero-full-image .article-hero-image a{height:auto}
.article-hero-full-image .article-hero-image img{display:block;width:100%;height:auto;object-fit:contain;filter:none}
.article-gallery-grid a{display:block}
.article-gallery-grid img{transition:transform .2s ease,border-color .2s ease,filter .2s ease}
.article-gallery-grid a:hover img,.article-gallery-grid a:focus-visible img{transform:scale(1.025);border-color:var(--yellow);filter:brightness(1.06)}

@media (max-width:1080px){
  .chron-layout{grid-template-columns:minmax(0,1fr) 290px}
  .chron-hero-inner{grid-template-columns:.9fr 1.1fr}
  
}
@media (max-width:900px){
  .chron-hero-inner{grid-template-columns:1fr;gap:0;padding-top:20px}
  .chron-hero-copy{padding:26px 0 18px}
  .chron-hero-image{min-height:290px;height:290px;margin:0 -14px}
  .chron-layout{grid-template-columns:1fr}
  .chron-sidebar{position:static;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
  .side-panel{height:100%}
  .article-hero-inner{grid-template-columns:1fr;padding:28px 0}
  .article-hero-image{height:300px;min-height:300px}
}
@media (max-width:680px){
  .chron-hero-copy h1{font-size:52px}
  .chron-hero-copy p{font-size:15px}
  .chron-stroke{height:6px;margin:12px 0 16px}
  .chron-hero-image{height:220px;min-height:220px}
  .chron-grid{grid-template-columns:1fr}
  .chron-heading{align-items:flex-start;flex-direction:column;gap:5px}
  .chron-heading h2{font-size:31px}
  .chron-heading-actions{justify-content:flex-start}
  .chron-sidebar{grid-template-columns:1fr}
  .sidebar-social-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .article-hero-copy h1{font-size:42px}
  .article-hero-image{height:235px;min-height:235px}
  .article-body{padding:21px 18px 24px}
  .article-body p{font-size:15px;line-height:1.68}
  .article-body .article-intro{font-size:16px}
  .article-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .article-quote{font-size:18px}
}


@media (max-width:680px){
  .music-panel{padding-left:12px;padding-right:12px}
  .platform-grid{width:100%;grid-template-columns:1fr;gap:8px}
  .platform-link{min-height:62px;padding:9px 14px}
  .platform-link img{max-width:90%;max-height:42px}
  .article-content h3{font-size:22px}
  .article-content .alignleft,.article-content .alignright{float:none;margin:0 0 16px}
  .article-content .article-compare{grid-template-columns:1fr}
  .article-content .article-zoom:has(> .alignright){float:none;display:block;width:min(100%,300px);margin:0 auto 18px}
}

@media (max-width:520px){
  .platform-grid{gap:7px}
  .platform-link{min-height:58px;padding:8px 12px}
  .platform-link img{max-width:92%;max-height:40px}
}