/* ═══════════ Blog : mise en page « grande rédaction » ═══════════
   La une se construit seule : la carte la plus récente visible devient
   l'article à la une (classe is-lead posée par blog-editorial.js), les
   deux suivantes forment la colonne de droite. Le balisage des cartes
   reste celui que produit l'agent blog. */

/* ── Masthead ── */
.bl-mast{padding:clamp(96px,14vh,150px) 0 clamp(18px,3vh,28px)}
.bl-mast__rule{height:7px;border-top:3px solid var(--text);border-bottom:1px solid var(--text);margin:clamp(18px,3vh,28px) 0 12px;transform-origin:50% 50%}
.bl-mast__rule--thin{height:0;border-top:1px solid rgba(255,255,255,0.18);border-bottom:none;margin:clamp(22px,3.5vh,34px) 0 0}
.bl-mast__line{display:flex;justify-content:space-between;gap:16px;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted-2);min-height:1.5em}
.bl-mast__date::first-letter{text-transform:uppercase}
.bl-mast__ed{color:var(--yellow)}
.bl-mast__name{margin:clamp(20px,3.5vh,32px) 0 6px;font-family:var(--font-display);font-weight:600;font-size:14px;letter-spacing:0.32em;text-transform:uppercase;color:var(--muted-2)}
.bl-mast__name span{color:var(--text)}
.bl-mast__title{font-family:var(--font-display);font-weight:700;font-size:clamp(36px,5.6vw,86px);line-height:1.02;letter-spacing:-0.035em;max-width:16ch;margin:0 0 clamp(16px,2.5vh,24px)}
.bl-mast__hl .hw__i{color:var(--yellow)}
.bl-mast__lead{max-width:620px;font-size:clamp(16px,1.5vw,19px);line-height:1.6;color:var(--muted-2);margin:0}

/* ── Fil « Dernières parutions » ── */
.bl-ticker{display:flex;align-items:stretch;height:46px;border-bottom:1px solid rgba(255,255,255,0.18);overflow:hidden}
.bl-ticker__label{flex:none;display:flex;align-items:center;gap:9px;padding:0 18px 0 0;margin-right:18px;border-right:1px solid rgba(255,255,255,0.18);font-size:11.5px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--yellow);white-space:nowrap}
.bl-ticker__label i{width:7px;height:7px;border-radius:50%;background:var(--yellow)}
.bl-ticker__view{flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 92%,transparent)}
.bl-ticker__track{display:flex;width:max-content;height:100%}
.bl-ticker__item{display:flex;align-items:center;gap:10px;padding:0 26px;font-size:14px;color:var(--text);text-decoration:none;white-space:nowrap;border-right:1px solid rgba(255,255,255,0.08)}
.bl-ticker__item time{font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted-2)}
.bl-ticker__item:hover{color:var(--yellow)}
.bl-ticker__item:focus-visible{outline:2px solid var(--yellow);outline-offset:-4px}

/* ── Rubriques : onglets de journal avec encre glissante ── */
.bl .bl-rubriques{position:relative;gap:4px 26px;margin-bottom:clamp(30px,5vh,48px);padding-bottom:2px;border-bottom:1px solid rgba(255,255,255,0.1)}
.bl .bl-rubriques .filter{border:none;background:none;border-radius:0;padding:12px 0;font-size:13px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted-2)}
.bl .bl-rubriques .filter:hover{color:var(--text)}
.bl .bl-rubriques .filter.is-active{background:none;color:var(--text)}
.bl .bl-rubriques .filter:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.bl-rubriques__ink{position:absolute;left:0;bottom:-1px;height:3px;width:100px;background:var(--yellow);transform-origin:0 50%;transform:translateX(var(--ink-x,0)) scaleX(var(--ink-w,0));pointer-events:none}

/* ── La une ── */
.bl .blog-grid{grid-auto-flow:row dense}
.bl .blog-card{border-radius:6px}
.bl .blog-card__title{text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:transparent;transition:text-decoration-color 0.35s var(--ease)}
.bl .blog-card:hover .blog-card__title,.bl .blog-card:focus-visible .blog-card__title{text-decoration-color:var(--yellow)}
.bl .blog-grid:not(.is-filtered)>.blog-card:first-child,.bl .blog-card.is-lead{grid-column:span 2;grid-row:span 2}
.bl .blog-grid:not(.is-filtered)>.blog-card:first-child .blog-card__cover,.bl .blog-card.is-lead .blog-card__cover{aspect-ratio:16/9;flex:none}
.bl .blog-grid:not(.is-filtered)>.blog-card:first-child .blog-card__body,.bl .blog-card.is-lead .blog-card__body{flex:1;justify-content:center;padding:clamp(24px,3vw,40px)}
.bl .blog-grid:not(.is-filtered)>.blog-card:first-child .blog-card__title,.bl .blog-card.is-lead .blog-card__title{font-size:clamp(26px,2.9vw,42px);line-height:1.12;letter-spacing:-0.03em}
.bl .blog-grid:not(.is-filtered)>.blog-card:first-child .blog-card__cat::after,.bl .blog-card.is-lead .blog-card__cat::after{content:"À la une";margin-left:6px;padding:3px 9px;border-radius:3px;background:var(--yellow);color:var(--black);font-weight:700;letter-spacing:0.12em}
.bl .blog-grid:not(.is-filtered)>.blog-card:first-child .blog-cover__svg,.bl .blog-card.is-lead .blog-cover__svg{transition:transform 0.6s var(--ease),filter 0.6s var(--ease),opacity 0.6s var(--ease)}

/* Volet d'encre qui découvre la couverture à l'apparition */
.bl .blog-card__cover::after{content:"";position:absolute;inset:0;z-index:2;background:#151515;border-left:3px solid var(--yellow);transform-origin:100% 50%;transform:scaleX(0);pointer-events:none}

@media (prefers-reduced-motion:no-preference){
  .bl-mast__rule{transform:scaleX(0);animation:blRule 0.9s var(--ease) 0.1s forwards}
  .bl-mast__rule--thin{animation-delay:0.6s}
  .bl-mast__line,.bl-mast__name,.bl-mast__lead{opacity:0;transform:translateY(10px);animation:blIn 0.7s var(--ease) forwards}
  .bl-mast__line{animation-delay:0.35s}
  .bl-mast__name{animation-delay:0.45s}
  .bl-mast__lead{animation-delay:0.9s}
  .bl-ticker{opacity:0;animation:blIn 0.7s var(--ease) 1.1s forwards}
  .bl-ticker.is-live .bl-ticker__track{animation:blTick var(--tick-d,60s) linear infinite}
  .bl-ticker:hover .bl-ticker__track,.bl-ticker:focus-within .bl-ticker__track{animation-play-state:paused}
  .bl-rubriques__ink{transition:transform 0.5s cubic-bezier(0.65,0,0.35,1)}
  .bl .blog-card.reveal .blog-card__cover::after{transform:scaleX(1)}
  .bl .blog-card.reveal.is-visible .blog-card__cover::after{transform:scaleX(0);transition:transform 0.9s cubic-bezier(0.77,0,0.18,1) calc(var(--reveal-delay,0s) + 0.15s)}
}
@keyframes blRule{to{transform:none}}
@keyframes blIn{to{opacity:1;transform:none}}
@keyframes blTick{to{transform:translateX(-50%)}}

/* ── Responsive ── */
@media (max-width:980px){
  .bl .blog-grid:not(.is-filtered)>.blog-card:first-child,.bl .blog-card.is-lead{grid-column:1 / -1;grid-row:auto}
}
@media (max-width:640px){
  .bl-mast__line{flex-wrap:wrap;gap:4px 14px}
  .bl-mast__count{display:none}
  .bl .bl-rubriques{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:4px 22px}
  .bl .bl-rubriques::-webkit-scrollbar{display:none}
  .bl .bl-rubriques .filter{white-space:nowrap}
  .bl-ticker{flex-wrap:wrap;height:84px}
  .bl-ticker__label{flex:1 0 100%;height:36px;border-right:none;padding:0;margin:0}
  .bl-ticker__view{flex:1 0 100%;height:48px}
}
@media (prefers-reduced-motion:reduce){
  .bl-ticker__view{overflow-x:auto}
}

/* ═══ Cartes « planche » : monochrome, numéro d'édition, motion ═══ */
.bl .blog-cover__label{display:none}
.bl .blog-card{transform-style:preserve-3d;transition:opacity 0.9s var(--ease) var(--reveal-delay,0s),transform 0.5s var(--ease),border-color 0.45s var(--ease),box-shadow 0.45s var(--ease)}
.bl .blog-card:hover{border-color:rgba(250,181,18,0.45)}
.bl .blog-card__cover{background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px),radial-gradient(70% 90% at 75% 20%,rgba(250,181,18,0.10),transparent 70%);background-size:28px 28px,28px 28px,auto}
.bl .blog-cover__svg{filter:grayscale(1) brightness(0.9);opacity:0.5;transition:filter 0.6s var(--ease),opacity 0.6s var(--ease),transform 0.6s var(--ease)}
.bl .blog-card:hover .blog-cover__svg,.bl .blog-card:focus-visible .blog-cover__svg,
.bl .blog-grid:not(.is-filtered)>.blog-card:first-child .blog-cover__svg,.bl .blog-card.is-lead .blog-cover__svg{filter:none;opacity:1}
/* Numéro d'édition détouré */
.bl-num{position:absolute;top:0;left:0;z-index:3;padding:14px 46px 22px 18px;background:radial-gradient(ellipse 85% 90% at 30% 35%,rgba(13,13,13,0.94) 45%,rgba(13,13,13,0) 78%);font-family:var(--font-display);font-weight:700;font-size:clamp(40px,4vw,58px);line-height:1;letter-spacing:-0.04em;color:transparent;-webkit-text-stroke:1px rgba(245,243,239,0.4);transition:color 0.45s var(--ease),-webkit-text-stroke-color 0.45s var(--ease),transform 0.5s var(--ease);pointer-events:none}
.bl-num::before{content:"N°";font-size:0.3em;letter-spacing:0.08em;margin-right:5px;vertical-align:0.95em;-webkit-text-stroke:0;color:rgba(245,243,239,0.55)}
.bl .blog-card:hover .bl-num{color:var(--yellow);-webkit-text-stroke-color:var(--yellow);transform:translateY(-2px)}
.bl .blog-grid:not(.is-filtered)>.blog-card:first-child .bl-num,.bl .blog-card.is-lead .bl-num{font-size:clamp(56px,6vw,96px);-webkit-text-stroke-color:var(--yellow)}
/* Filet or, halo et « Lire » */
.bl .blog-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:4;background:var(--yellow);transform:scaleX(0);transform-origin:0 50%;transition:transform 0.55s var(--ease)}
.bl .blog-card:hover::before,.bl .blog-card:focus-visible::before{transform:none}
.bl-spot{position:absolute;left:0;top:0;width:340px;height:340px;margin:-170px 0 0 -170px;z-index:3;border-radius:50%;background:radial-gradient(circle,rgba(250,181,18,0.16),transparent 65%);opacity:0;pointer-events:none;transition:opacity 0.4s var(--ease)}
.bl .blog-card:hover .bl-spot{opacity:1}
.bl .blog-card__meta::after{content:"Lire →";margin-left:auto;color:var(--yellow);font-weight:600;opacity:0;transform:translateX(-10px);transition:opacity 0.35s var(--ease),transform 0.35s var(--ease)}
.bl .blog-card:hover .blog-card__meta::after,.bl .blog-card:focus-visible .blog-card__meta::after{opacity:1;transform:none}
.bl .blog-card:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
/* La scène s'assemble à l'apparition */
@media (prefers-reduced-motion:no-preference){
  .bl .blog-card.reveal .blog-cover__svg>*{transform-box:fill-box;transform-origin:50% 50%}
  .bl .blog-card.reveal.is-visible .blog-cover__svg>*{animation:blPiece 0.6s var(--ease) backwards}
  .bl .blog-card.reveal.is-visible .blog-cover__svg>*:nth-child(1){animation-delay:0.45s}
  .bl .blog-card.reveal.is-visible .blog-cover__svg>*:nth-child(2){animation-delay:0.52s}
  .bl .blog-card.reveal.is-visible .blog-cover__svg>*:nth-child(3){animation-delay:0.59s}
  .bl .blog-card.reveal.is-visible .blog-cover__svg>*:nth-child(4){animation-delay:0.66s}
  .bl .blog-card.reveal.is-visible .blog-cover__svg>*:nth-child(5){animation-delay:0.73s}
  .bl .blog-card.reveal.is-visible .blog-cover__svg>*:nth-child(6){animation-delay:0.8s}
  .bl .blog-card.reveal.is-visible .blog-cover__svg>*:nth-child(7){animation-delay:0.87s}
  .bl .blog-card.reveal.is-visible .blog-cover__svg>*:nth-child(8){animation-delay:0.94s}
  .bl .blog-card.reveal.is-visible .blog-cover__svg>*:nth-child(9){animation-delay:1.01s}
  .bl .blog-card.reveal.is-visible .blog-cover__svg>*:nth-child(n+10){animation-delay:1.08s}
  .bl .blog-card.reveal.is-visible .bl-num{animation:blNum 0.8s var(--ease) 0.55s backwards}
}
@keyframes blPiece{from{opacity:0;transform:translateY(14px) scale(0.92)}to{opacity:1;transform:none}}
@keyframes blNum{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .bl-num,.bl .blog-grid:not(.is-filtered)>.blog-card:first-child .bl-num,.bl .blog-card.is-lead .bl-num{font-size:36px;padding:10px 30px 14px 14px}
}