/*
Theme Name: Stumblr WP
Description: Thème de blog façon Tumblr (flux de cartes par type de post), inspiré du thème Statamic Stumblr.
Version: 1.22
Text Domain: stumblr-wp
*/
:root{--text:#000;--muted:#6b7280;--card-w:512px}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--text);font:17px/1.6 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif}
a{color:inherit;text-decoration:none}
.wrap{max-width:1104px;margin:0 auto;padding:0 16px}

/* En-tête */
.top{display:flex;justify-content:space-between;align-items:center;padding-top:32px}
.site-nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.site-nav{display:flex;gap:24px;font-weight:700;font-size:.95rem}
.top-icons{display:flex;gap:24px}
.icon{width:28px;height:28px;fill:currentColor;display:block}
.site-head{text-align:center;padding:16px 16px 56px}
.site-title{font-size:clamp(2.2rem,6vw,4.5rem);font-weight:900;line-height:1.15;margin:0}
.site-desc{margin:6px 0 0;font-size:1.15rem}

/* Posts */
.feed{padding:0 16px}
.post{position:relative;width:var(--card-w);max-width:100%;margin:0 auto 72px}
.post-meta{position:absolute;right:100%;margin-right:36px;top:64px;width:80px;text-align:center;line-height:1}
.post-meta .m{display:block;font-size:.8rem;font-weight:300;text-transform:uppercase;letter-spacing:.08em}
.post-meta .d{display:block;font-size:1.9rem;font-weight:800;margin-top:4px}
.post-meta .type{display:block;margin-top:24px}
.post-meta .icon{width:36px;height:36px;margin:0 auto}

.card{background:#fff;border-radius:6px;overflow:hidden;
  box-shadow:0 22px 40px -12px rgba(0,0,0,.28),0 0 70px rgba(0,0,0,.05)}
.card-content>*{margin:0 0 16px}
.card-content>p,.card-content>h2,.card-content>h3,.card-content>ul,.card-content>ol,.card-content>pre,.card-content>blockquote{margin-left:24px;margin-right:24px}
.card-content>p:first-child,.card-content>h2:first-child,.card-content>blockquote:first-child{margin-top:24px}
.card-content>:last-child{margin-bottom:0}
.card-content figure,.card-content .wp-block-image,.card-content .wp-block-embed{margin:0 0 16px}
.card img{display:block;width:100%;height:auto}
.card iframe,.card video{display:block;width:100%;aspect-ratio:16/9;border:0}
.card audio{display:block;width:calc(100% - 48px);margin:24px}
.card-title{font-size:1.5rem;font-weight:800;line-height:1.25}
.card-quote blockquote{font-size:1.4rem;font-style:italic;line-height:1.4;padding:0;border:0}
.card-quote cite{display:block;margin:0 24px 24px;color:var(--muted);font-style:normal}
.tags{display:flex;flex-wrap:wrap;gap:12px;padding:26px 16px 28px;font-size:.85rem;color:#555}
.tags a:hover{text-decoration:underline}
.tags .h{opacity:.6}
.tag-cloud{padding:24px}.tag-cloud a{display:inline-block;margin:0 14px 10px 0}

.pagination{display:flex;justify-content:space-between;margin:0 auto 48px;width:var(--card-w);max-width:100%;font-weight:700}
.site-footer{padding:32px 0;color:var(--muted);font-size:.85rem;text-align:center}

/* Flèches de pagination */
.pager{display:flex;justify-content:center;align-items:center;gap:28px;margin:0 auto 64px}
.pager .arrow{width:56px;height:56px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px -6px rgba(0,0,0,.28),0 0 30px rgba(0,0,0,.05);transition:transform .15s}
.pager a.arrow:hover{transform:scale(1.08)}
.pager .arrow.off{opacity:.25;box-shadow:none;border:1px solid #ddd}
.pager .arrow .icon{width:24px;height:24px}
.pager-count{font-weight:700;min-width:60px;text-align:center}

/* Écrans étroits : date et type au-dessus de la carte */
@media (max-width:1000px){
  .post-meta{position:static;width:auto;display:flex;align-items:center;gap:14px;margin:0 0 12px;text-align:left}
  .post-meta .d{display:inline;font-size:1.4rem;margin:0 0 0 6px}
  .post-meta .m{display:inline}
  .post-meta .type{margin:0 0 0 auto}.post-meta .icon{width:26px;height:26px}
}
/* Cartes empilées : chaque carte recouvre la précédente, avec un petit décalage (Personnaliser → Stumblr) */
.stack:not(.single):not(.page) .post{position:sticky;top:calc(16px + var(--i,0) * 18px);margin-bottom:56px}

/* Résumé en liste : lien "Lire la suite" */
.card-content>a{display:block}
.card-content>.more{margin-bottom:0;padding-bottom:6px;font-weight:700}
.card-content>.more a:hover{text-decoration:underline}
.card-content:last-child{padding-bottom:22px}

/* Articles et pages : carte plus large */
.single,.page{--card-w:800px}
.single .card-content>p,.single .card-content>h2,.single .card-content>h3,.single .card-content>ul,.single .card-content>ol,.single .card-content>pre,.single .card-content>blockquote,.page .card-content>p,.page .card-content>h2,.page .card-content>h3,.page .card-content>ul,.page .card-content>ol,.page .card-content>pre,.page .card-content>blockquote{margin-left:32px;margin-right:32px}
.single .card-content>p:first-child,.single .card-content>h2:first-child,.single .card-content>blockquote:first-child,.page .card-content>p:first-child,.page .card-content>h2:first-child,.page .card-content>blockquote:first-child{margin-top:32px}
.single .card-title,.page .card-title{font-size:1.9rem}
.single .tags,.page .tags{padding-left:32px;padding-right:32px}
.page .tag-cloud{padding:32px}

/* Pied de page */
.site-footer{padding:16px 16px 48px}
.footer-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 28px;margin-bottom:12px;font-weight:700;font-size:.95rem;color:var(--text)}
.footer-nav ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;list-style:none;margin:0;padding:0}
.footer-nav a:hover{text-decoration:underline}
.site-footer p{margin:0}

/* Articles récents : 3 petits blocs côte à côte */
.recent{max-width:800px;margin:0 auto 36px}
.recent h3{margin:0 0 14px;font-size:.8rem;font-weight:300;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.recent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left}
.mini{display:block;background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 10px 24px -8px rgba(0,0,0,.25),0 0 30px rgba(0,0,0,.04);transition:transform .15s}
.mini:hover{transform:translateY(-3px)}
.mini .thumb{display:block;aspect-ratio:1/1;background:#f3f4f6}
.mini .thumb img{display:block;width:100%;height:100%;object-fit:cover}
.mini-title{display:block;padding:12px 14px 2px;font-weight:700;font-size:.9rem;line-height:1.3;color:var(--text)}
.mini-date{display:block;padding:0 14px 14px;font-size:.75rem;color:var(--muted)}
@media (max-width:600px){.recent-grid{grid-template-columns:1fr}}

/* Espacement du texte dans les cartes */
.card-content>p,.card-content>ul,.card-content>ol,.card-content>blockquote{line-height:1.7}
.card-content>p{margin-bottom:20px}
.card-content>p.more{margin-bottom:0}
.card-content>a,.card-content>iframe,.card-content>video,.card-content figure,.card-content .wp-block-image,.card-content .wp-block-embed{margin-bottom:24px}
.single .card-content>a,.single .card-content>iframe,.single .card-content>video,.single .card-content figure,.single .card-content .wp-block-image,.single .card-content .wp-block-embed,
.page .card-content figure,.page .card-content .wp-block-image{margin-bottom:28px}
.single .card-content>:last-child,.page .card-content>:last-child{margin-bottom:24px}

/* Titre dans la carte (accueil) */
.card-content>.card-title{margin-bottom:10px}

.post-meta .type{transition:opacity .15s}
.post-meta .type:hover{opacity:.7}

/* Icônes contact et RSS en haut de page */
.top-icons{color:#80C5E8}
.top-icons a{transition:opacity .15s}
.top-icons a:hover{opacity:.7}