/* Blog moamoa.fr (05/10/2026) — charte « Reel » : aplats, coins francs, aucun dégradé ni ombre.
   Les jetons --r-* viennent de moamoa-reel.css (front public). */
.blog{max-width:1180px;margin:0 auto;padding:28px 20px 80px;color:var(--r-ink,#1A1F36)}
.blog-crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--r-soft,#5b6079);margin-bottom:28px}
.blog-crumbs a{color:inherit;text-decoration:none}
.blog-crumbs a:hover{color:var(--r-ink,#1A1F36);text-decoration:underline}

.blog-head{max-width:780px;margin:0 0 32px}
.blog-head h1{font-size:clamp(38px,5.4vw,68px);margin:14px 0 16px}
.blog-lede{font-family:var(--r-ital,Georgia,serif);font-style:italic;font-variation-settings:"SOFT" 70,"opsz" 36;font-size:clamp(19px,2vw,23px);line-height:1.45;color:var(--r-soft,#5b6079);margin:0}
.blog-byline{font-size:14px;color:var(--r-soft,#5b6079);margin:18px 0 0}

.blog-themes{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 36px}
.blog-themes a{padding:9px 16px;border:2px solid var(--r-ink,#1A1F36);border-radius:999px;font-size:14px;font-weight:600;color:var(--r-ink,#1A1F36);text-decoration:none;background:transparent}
.blog-themes a:hover{background:var(--r-white,#fff)}
.blog-themes a.is-on{background:var(--r-ink,#1A1F36);color:var(--r-paper,#F4F3FB)}

.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.blog-card{--tile:#FFE3E8;--edge:var(--r-pivoine,#FF8DA1);display:flex;flex-direction:column;gap:10px;padding:26px;background:var(--tile);border:3px solid var(--edge);border-radius:0;color:var(--r-ink,#1A1F36);text-decoration:none;transition:transform .3s ease}
.blog-card.tone-mimosa{--tile:#FFF0C4;--edge:var(--r-mimosa,#FFD25E)}
.blog-card.tone-bleuet{--tile:#E2E7FF;--edge:var(--r-bleuet,#8EA2FF)}
.blog-card.tone-lavande{--tile:#EDEBF7;--edge:#C9C3EC}
.blog-card:hover{transform:scale(1.02)}
.blog-card:focus-visible{outline:3px solid var(--r-ink,#1A1F36);outline-offset:3px}
.blog-card h2,.blog-card h3{font-size:22px;margin:0;color:var(--r-ink,#1A1F36)}
.blog-card p{margin:0;font-size:15.5px;line-height:1.5;color:#3d4260}
.blog-card-img{display:block;margin:-26px -26px 6px;aspect-ratio:16/9;overflow:hidden;border-bottom:3px solid var(--edge)}
.blog-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.blog-card-theme{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--r-ink,#1A1F36);text-decoration:none}
.blog-card-date{margin-top:auto;padding-top:6px;font-size:13px;color:var(--r-soft,#5b6079)}
.blog-empty{font-size:18px}
.blog-btn{display:inline-block;padding:12px 22px;border-radius:999px;background:var(--r-ink,#1A1F36);color:var(--r-paper,#F4F3FB);text-decoration:none;font-weight:700}

/* Lecture */
.blog-read article{max-width:760px;margin:0 auto}
.blog-head-article{margin-bottom:40px}
.blog-head-article h1{font-size:clamp(34px,4.6vw,56px)}
.blog-body{font-family:Inter,system-ui,sans-serif;font-size:18px;line-height:1.7;color:#262b45}
.blog-body h2{font-size:clamp(26px,3vw,34px);margin:48px 0 14px}
.blog-body h3{font-size:21px;margin:32px 0 10px}
.blog-body p{margin:0 0 18px}
.blog-body ul,.blog-body ol{margin:0 0 20px;padding-left:22px}
.blog-body li{margin:0 0 8px}
.blog-body a{color:var(--r-ink,#1A1F36);text-decoration:underline;text-decoration-color:var(--r-pivoine,#FF8DA1);text-decoration-thickness:2px;text-underline-offset:3px;font-weight:600}
.blog-body a:hover{text-decoration-color:var(--r-ink,#1A1F36)}
.blog-body blockquote{margin:28px 0;padding:18px 22px;border-left:4px solid var(--r-mimosa,#FFD25E);background:var(--r-white,#fff);font-family:var(--r-ital,Georgia,serif);font-style:italic;font-size:20px}
.blog-body strong{color:var(--r-ink,#1A1F36)}

.blog-cited,.blog-shops,.blog-faq,.blog-related{margin-top:56px}
.blog-cited h2,.blog-shops h2,.blog-faq h2,.blog-related h2{font-size:clamp(26px,3vw,34px);margin:0 0 20px}
.blog-cited-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.blog-product{display:flex;flex-direction:column;gap:4px;padding:10px 10px 14px;background:var(--r-white,#fff);border:2px solid var(--r-ink,#1A1F36);color:var(--r-ink,#1A1F36);text-decoration:none;transition:transform .3s ease}
.blog-product:hover{transform:translateY(-4px)}
.blog-product-img{display:block;aspect-ratio:1;background:var(--r-paper,#F4F3FB);overflow:hidden;margin-bottom:8px}
.blog-product-img img{width:100%;height:100%;object-fit:cover;display:block}
.blog-product-name{font-weight:700;font-size:15px;line-height:1.3}
.blog-product-shop{font-family:var(--r-ital,Georgia,serif);font-style:italic;font-size:14px;color:var(--r-soft,#5b6079)}
.blog-product-price{font-weight:800;font-size:17px;margin-top:2px}
.blog-shops ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.blog-shops a{display:inline-flex;gap:8px;align-items:baseline;padding:10px 16px;border:2px solid var(--r-ink,#1A1F36);border-radius:999px;color:var(--r-ink,#1A1F36);text-decoration:none;background:var(--r-white,#fff)}
.blog-shops a span{font-size:13px;color:var(--r-soft,#5b6079)}
.blog-faq .faq-item{padding:18px 0;border-top:1px solid var(--r-line,#1a1f361f)}
.blog-faq .faq-question{font-size:19px;margin:0 0 8px}
.blog-faq .faq-answer p{margin:0;font-family:Inter,system-ui,sans-serif;font-size:16.5px;line-height:1.65;color:#262b45}
.blog-related{max-width:1180px}

@media (max-width:640px){
  .blog{padding:20px 16px 60px}
  .blog-grid{grid-template-columns:1fr}
  .blog-card{padding:22px}
  .blog-card-img{margin:-22px -22px 6px}
  .blog-body{font-size:17px}
  .blog-cited-grid{grid-template-columns:repeat(2,1fr);gap:12px}
}