/* === GABARIT DE CHARGEMENT (landing -> blog) ===
   Affiché dès le clic sur la landing, puis sur blog.html tant que la page
   n'est pas prête (tags triés, polices et premières couvertures chargées).
   Voir js/page-skeleton.js. */
.rt-skel{--sk-bg:#0a0a0f;--sk-block:rgba(255,255,255,.055);--sk-shine:rgba(255,255,255,.085);--sk-border:rgba(255,255,255,.06);position:fixed;inset:0;z-index:99;overflow:hidden;background:var(--sk-bg);padding:7rem 2rem 0;pointer-events:none;opacity:1;transition:opacity .35s cubic-bezier(.16,1,.3,1)}
[data-theme="light"] .rt-skel{--sk-bg:#fafafa;--sk-block:rgba(0,0,0,.06);--sk-shine:rgba(0,0,0,.025);--sk-border:rgba(0,0,0,.08)}
.rt-skel.is-leaving{opacity:0}
.rt-skel-in{max-width:1100px;margin:0 auto}
.rt-skel b{display:block;border-radius:6px;background:linear-gradient(100deg,var(--sk-block) 30%,var(--sk-shine) 50%,var(--sk-block) 70%) 0 0/300% 100% fixed;animation:rt-skel-shine 1.4s ease-in-out infinite}
@keyframes rt-skel-shine{from{background-position:100% 0}to{background-position:0 0}}
.rt-skel .sk-lbl{width:90px;height:12px;margin-bottom:1.6rem}
.rt-skel .sk-h1{width:min(560px,90%);height:46px;margin-bottom:.7rem;border-radius:8px}
.rt-skel .sk-h1.is-short{width:min(320px,60%);margin-bottom:1.6rem}
.rt-skel .sk-line{width:min(560px,100%);height:14px;margin-bottom:.75rem}
.rt-skel .sk-line.is-short{width:min(380px,70%)}
.rt-skel .sk-meta{display:flex;gap:1rem;margin:1.6rem 0 2.8rem}
.rt-skel .sk-meta b{width:110px;height:12px}
.rt-skel .sk-search{display:grid;grid-template-columns:1fr 150px;gap:1rem;margin-bottom:1.6rem}
.rt-skel .sk-search b{height:44px;border-radius:10px}
.rt-skel .sk-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:2rem}
.rt-skel .sk-chips b{height:28px;border-radius:999px}
.rt-skel .sk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.rt-skel .sk-card{border:1px solid var(--sk-border);border-radius:12px;overflow:hidden}
.rt-skel .sk-card .sk-cover{aspect-ratio:16/9;border-radius:0}
.rt-skel .sk-card div{padding:1.1rem}
.rt-skel .sk-card div b{height:12px;margin-bottom:.7rem}
.rt-skel .sk-card div b:nth-child(1){width:45%}
.rt-skel .sk-card div b:nth-child(2){height:18px;width:92%}
.rt-skel .sk-card div b:nth-child(3){height:18px;width:70%;margin-bottom:1rem}
.rt-skel .sk-card div b:nth-child(4){width:100%}
.rt-skel .sk-card div b:nth-child(5){width:80%;margin-bottom:0}
@media(max-width:900px){.rt-skel .sk-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){
  .rt-skel{padding:6rem 1.2rem 0}
  .rt-skel .sk-h1{height:34px}
  .rt-skel .sk-grid{grid-template-columns:1fr}
  .rt-skel .sk-search{grid-template-columns:1fr 90px}
}
@media(prefers-reduced-motion:reduce){.rt-skel b{animation:none}.rt-skel{transition:none}}

/* Sur blog.html : le contenu reste masqué tant que le gabarit est affiché,
   puis apparaît en fondu. */
html.rt-loading main,html.rt-loading footer,html.rt-loading .cookie-banner,html.rt-loading .elevator{opacity:0}
html.rt-revealing main,html.rt-revealing footer{transition:opacity .35s cubic-bezier(.16,1,.3,1)}