/* Yimmo — Le journal (blog & articles). Réutilise les tokens de styles.css. */

/* ---------- En-tête d'article ---------- */
.article-hero{position:relative;isolation:isolate;color:#fff;overflow:hidden;background:var(--grad-hero)}
.article-hero__scene{position:absolute;inset:0;z-index:-2}
.article-hero__scene img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.article-hero__scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,30,71,.42),rgba(6,30,71,.78))}
.article-hero .wrap{padding-block:clamp(56px,8vw,96px);max-width:820px}
.article-hero .kicker{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sunset-onblue)}
/* Sans taille explicite, le SVG du kicker s'affiche à ~56px et écrase le libellé
   (qui passe alors à la ligne). flex:0 0 auto → il ne s'étire ni ne se comprime. */
.article-hero .kicker .ic{width:16px;height:16px;flex:0 0 auto}
.article-hero h1{font-family:var(--font-title);font-weight:600;font-size:clamp(1.9rem,1.2rem+2.6vw,3rem);line-height:1.1;letter-spacing:-1.2px;color:#fff;margin:16px 0 0;text-wrap:balance}
.article-hero .dek{font-size:var(--fs-lead);line-height:1.55;color:rgba(255,255,255,.9);margin-top:18px;max-width:60ch}
.article-hero .meta{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.86rem;color:rgba(255,255,255,.8)}
.article-hero .meta span{display:inline-flex;align-items:center;gap:7px}
.article-hero .meta .ic{width:15px;height:15px;color:var(--sunset-onblue)}

.article-body{max-width:760px;margin-inline:auto;padding-block:clamp(40px,5vw,64px)}

/* ---------- Prose ---------- */
.prose{color:#2c3340;font-size:1.02rem;line-height:1.7}
.prose>h2{font-family:var(--font-title);font-weight:600;font-size:clamp(1.4rem,1.1rem+1.1vw,1.75rem);letter-spacing:-.5px;color:var(--ink);margin:44px 0 14px;line-height:1.18;scroll-margin-top:88px}
.prose h3{font-family:var(--font-title);font-weight:600;font-size:1.12rem;color:var(--ink);margin:26px 0 8px}
.prose p{margin:14px 0}
.prose strong{font-weight:600;color:var(--ink)}
.prose a{color:var(--ocean);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.prose ul,.prose ol{margin:14px 0;display:flex;flex-direction:column;gap:9px;padding-left:2px}
.prose li{position:relative;padding-left:26px;line-height:1.6}
.prose ul li::before{content:"";position:absolute;left:7px;top:.66em;width:6px;height:6px;border-radius:999px;background:var(--sunset)}
.prose ol{counter-reset:li}
.prose ol li{counter-increment:li}
.prose ol li::before{content:counter(li);position:absolute;left:0;top:.05em;color:var(--ocean);font-family:var(--font-title);font-weight:700;font-size:.85rem}
.prose blockquote{margin:22px 0;padding:18px 22px;background:var(--sunset-soft);border-radius:var(--r-tile);color:var(--sand-ink);line-height:1.6;font-size:1rem}
.prose .table-wrap{overflow-x:auto;margin:20px 0;border-radius:var(--r-tile);box-shadow:var(--sh-soft)}
.prose table{border-collapse:collapse;width:100%;background:var(--white);font-size:.92rem;min-width:460px}
.prose th,.prose td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5;font-variant-numeric:tabular-nums}
.prose th{background:var(--ocean-soft);color:var(--ocean);font-family:var(--font-title);font-weight:600;white-space:nowrap}
.prose tr:last-child td{border-bottom:0}

/* ---------- Takeaways ---------- */
.takeaways{background:var(--white);border-radius:var(--r-card);box-shadow:var(--sh-soft);padding:24px 26px;margin:8px 0 28px}
.takeaways h2{font-family:var(--font-title);font-weight:600;font-size:1.05rem;margin:0 0 14px;display:flex;align-items:center;gap:9px;color:var(--ink)}
.takeaways h2 .ic{width:20px;height:20px;color:var(--sunset-deep)}
.takeaways ul{display:flex;flex-direction:column;gap:10px}
.takeaways li{position:relative;padding-left:36px;line-height:1.55;font-size:.98rem;min-height:24px}
.takeaways li .ic{position:absolute;left:0;top:0;width:23px;height:23px;padding:5px;border-radius:50%;background:var(--ocean-soft);color:var(--ocean);box-sizing:border-box;stroke-width:2.6}

/* ---------- CTA d'article ---------- */
.article-cta{margin:36px 0 8px;background:linear-gradient(160deg,var(--ocean),var(--ocean-deep));border-radius:var(--r-card);padding:clamp(24px,3vw,36px);color:#fff;position:relative;overflow:hidden}
.article-cta h2{font-family:var(--font-title);font-weight:600;font-size:1.4rem;letter-spacing:-.4px;color:#fff;margin:0}
.article-cta p{color:rgba(255,255,255,.85);margin:12px 0 20px;max-width:52ch}
.article-cta__geo{position:absolute;right:-10px;bottom:-10px;width:180px;opacity:.5;pointer-events:none}

/* ---------- Bas d'article / disclaimer ---------- */
.article-disclaimer{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);font-size:.84rem;line-height:1.6;color:var(--muted)}

/* ---------- Fil d'ariane ---------- */
.crumbs{display:flex;align-items:center;gap:8px;font-size:.85rem;color:rgba(255,255,255,.72);margin-bottom:6px}
.crumbs a{color:rgba(255,255,255,.72)}.crumbs a:hover{color:#fff}

/* ---------- Index du blog ---------- */
.blog-index-hero{padding-block:clamp(48px,6vw,80px) 8px}
.blog-index-hero h1{font-family:var(--font-title);font-weight:600;font-size:clamp(2rem,1.3rem+2.6vw,3rem);letter-spacing:-1.2px;line-height:1.1;margin-top:10px}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.article-card{display:flex;flex-direction:column;background:var(--white);border-radius:var(--r-card);box-shadow:var(--sh-soft);overflow:hidden;transition:transform var(--dur-ui) var(--ease),box-shadow var(--dur-ui) var(--ease)}
a.article-card,a.article-card:hover,a.article-card:focus{text-decoration:none;color:inherit}
.article-card:hover{transform:translateY(-3px);box-shadow:var(--sh-hover)}
.article-card:focus-within{box-shadow:var(--focus-ring),var(--sh-soft)}
.article-card__media{aspect-ratio:16/10;position:relative;overflow:hidden}
.article-card__media img{width:100%;height:100%;object-fit:cover}
.article-card__media .tag{position:absolute;top:12px;left:12px}
.article-card__body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.article-card__body h2{font-family:var(--font-title);font-weight:600;font-size:1.12rem;line-height:1.25;letter-spacing:-.3px;color:var(--ink);margin:0}
.article-card__body h2 a{color:inherit}
.article-card__body h2 a::after{content:"";position:absolute;inset:0}
.article-card__body p{color:var(--muted);font-size:.92rem;line-height:1.5;margin:10px 0 0}
.article-card__foot{margin-top:16px;display:flex;align-items:center;gap:8px;color:var(--ocean);font-weight:700;font-size:.86rem}
.article-card__foot .ic{width:16px;height:16px;transition:transform var(--dur-ui) var(--ease)}
.article-card:hover .article-card__foot .ic{transform:translateX(3px)}
.article-card__media{position:relative}

/* ---------- Articles liés ---------- */
.related{border-top:1px solid var(--line);padding-top:32px;margin-top:40px}
.related h2{font-family:var(--font-title);font-weight:600;font-size:1.2rem;margin-bottom:18px}

@media (max-width:860px){ .blog-grid{grid-template-columns:1fr} }