/* =========================================================
   Orovas · Blog (chargé uniquement par les pages blog/)
   S'appuie sur les tokens de site.css (crème, orange, pétrole)
   ========================================================= */
.blog-page{overflow-x:hidden}
.blog-page .nw{white-space:nowrap}
.blog-page sup{font-size:.62em;line-height:0;vertical-align:super}

/* ---------- Héros ---------- */
.post-hero .ph-copy,.blog-hero .ph-copy{max-width:860px}
.post-hero .h-page{font-size:clamp(32px,4.2vw,56px);line-height:1.06;letter-spacing:-.04em;max-width:24ch;text-wrap:balance}
.post-hero .crumbs{margin-bottom:18px}
.post-hero .crumbs span[aria-current]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.post-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-m);font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--pet-txt);margin:0 0 14px}
.post-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}
.post-hero .post-chapo{max-width:62ch;font-size:clamp(17px,1.35vw,19.5px);line-height:1.6;color:var(--t2)}
.post-hero .post-chapo b{color:var(--t1);font-weight:600}
.post-byline{display:flex;align-items:center;gap:14px;margin-top:28px}
.post-byline img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;border:2px solid #fff;box-shadow:0 1px 3px rgba(14,16,34,.15)}
.post-byline .by{display:block;font-size:14px;font-weight:600;color:var(--t1);line-height:1.35}
.post-byline .dates{display:block;font-size:13px;color:var(--t3);margin-top:3px}
.page-hero.simple.post-hero{padding-bottom:56px}

/* ---------- Mise en page article ---------- */
.post-grid{display:grid;gap:28px;padding-top:8px;padding-bottom:110px}
.post-grid > *{min-width:0}
@media (min-width:1080px){
  .post-grid{grid-template-columns:250px minmax(0,700px);gap:64px;justify-content:center;align-items:start}
  .post-aside{position:sticky;top:92px}
}
.post-toc{padding:16px 18px}
.post-toc ol{counter-reset:toc;gap:2px;font-size:13.5px;line-height:1.4}
.post-toc li{counter-increment:toc}
.post-toc a{display:grid;grid-template-columns:24px 1fr;gap:4px;padding:6px 0;color:var(--t2)}
.post-toc sup{font-size:.7em;line-height:0}
.post-toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--f-m);font-size:11px;color:var(--t3);padding-top:2px}
.post-toc a:hover{color:var(--t1)}
@media (max-width:1079px){
  .post-toc ol{grid-template-columns:1fr}
}

.post-figure{margin:0 0 36px;border-radius:18px;overflow:hidden;aspect-ratio:16/9;background:var(--bg-alt)}
.post-figure img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Typographie de lecture ---------- */
.post-body{font-size:17.5px;line-height:1.75;color:var(--t2);max-width:70ch}
.post-body > h2,.post-body section > h2{font-family:var(--f-d);font-size:clamp(23px,2.3vw,30px);line-height:1.2;letter-spacing:-.03em;color:var(--t1);margin:56px 0 14px;scroll-margin-top:92px;text-wrap:balance}
.post-body h3{font-family:var(--f-d);font-size:19px;line-height:1.35;letter-spacing:-.02em;color:var(--t1);margin:28px 0 8px}
.post-body p{margin:0 0 16px}
.post-body b,.post-body strong{color:var(--t1);font-weight:600}
.post-body a{color:var(--t1);text-decoration:underline;text-decoration-color:rgba(255,107,44,.55);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:text-decoration-color .2s}
.post-body a:hover{text-decoration-color:var(--orange)}
.post-body ul,.post-body ol{margin:0 0 18px;padding-left:22px;display:grid;gap:8px}
.post-body li::marker{color:var(--orange)}
.post-body sup{font-size:.62em;line-height:0}
.post-body .reponse{font-size:18.5px;line-height:1.65;color:var(--t1);padding-left:16px;border-left:3px solid var(--orange)}

/* étapes numérotées */
.post-body ol.b-steps{list-style:none;padding:0;counter-reset:st;gap:10px}
.post-body ol.b-steps li{counter-increment:st;position:relative;padding-left:44px;min-height:30px}
.post-body ol.b-steps li::before{content:counter(st);position:absolute;left:0;top:1px;width:30px;height:30px;border-radius:50%;background:var(--pet);color:var(--pet-fg);font-family:var(--f-m);font-size:13px;display:grid;place-items:center}

/* ---------- Encadrés ---------- */
.enbref{background:var(--pet);color:var(--pet-fg);border-radius:18px;padding:24px 26px;margin:0 0 8px}
.enbref .enbref-t{font-family:var(--f-m);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#FFB020;margin:0 0 12px}
.enbref ul{margin:0;padding-left:20px;gap:10px}
.enbref li{font-size:16px;line-height:1.6;color:var(--pet-mute)}
.enbref li b{color:var(--pet-fg)}
.enbref li::marker{color:#FFB020}

.exemple{background:var(--mist);border:1px solid var(--mist-line);border-radius:16px;padding:20px 22px;margin:22px 0}
.exemple .exemple-t,.modele .modele-t{font-family:var(--f-m);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--pet-txt);margin:0 0 10px}
.exemple p{font-size:16.5px;line-height:1.65;color:#2B3E42}
.exemple p:last-child{margin-bottom:0}

.modele{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px 18px 22px;margin:14px 0}
.modele::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--orange)}
.modele p{font-size:16px;line-height:1.65;margin:0;color:var(--t1)}
.modele p.modele-t{color:var(--pet-txt)}

/* ---------- Tableaux responsives ---------- */
.post-body .tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0 8px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.post-body table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.5;min-width:540px}
.post-body th,.post-body td{padding:11px 14px;text-align:left;vertical-align:top;border-top:1px solid var(--line);color:var(--t2)}
.post-body thead th{border-top:0;background:#F6F1EA;color:var(--t1);font-weight:600;font-size:13.5px}
.post-body td b{color:var(--t1)}
.post-body .tbl-src{font-size:13px;line-height:1.5;color:var(--t3);margin:0 0 20px}
@media (max-width:759px){.post-body .tbl{margin-left:0;margin-right:0}}

/* ---------- FAQ ---------- */
.post-faq{margin-top:56px;padding-top:8px;border-top:1px solid var(--line)}
.post-faq h3{margin-top:24px}
.post-faq p{font-size:16.5px}

/* ---------- CTA, liens, sources, auteur ---------- */
.post-cta{margin:48px 0 0;padding:26px 26px 24px;border-radius:18px;background:#FFF4EC;border:1px solid #F5D9C6}
.post-cta .label{margin:0 0 8px;color:#A8400B}
.post-cta .post-cta-t{font-size:17px;line-height:1.6;color:var(--t1);margin:0 0 18px}
.post-cta-b{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.post-body .post-cta a.link{text-decoration:none}
.post-body .post-cta a.btn{text-decoration:none;color:var(--on-orange)}

.post-related{margin-top:48px}
.post-body .post-related-h{font-size:20px;margin:0 0 14px}
.rel-grid{display:grid;gap:12px}
@media (min-width:760px){.rel-grid{grid-template-columns:repeat(3,1fr)}}
.post-body a.rel-card{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:14px;border:1px solid var(--line);background:var(--card);text-decoration:none;transition:border-color .2s,transform .2s}
.post-body a.rel-card:hover{border-color:rgba(var(--fg-rgb),.28);transform:translateY(-2px)}
.rel-card .label{font-size:11px;margin:0}
.rel-card b{font-family:var(--f-d);font-size:16px;line-height:1.3;letter-spacing:-.01em}
.rel-card small{font-size:13px;line-height:1.4;color:var(--t3);margin-top:auto}
.post-body a.rel-prod{background:var(--pet);border-color:var(--pet)}
.rel-prod .label{color:#FFB020}
.rel-prod b{color:var(--pet-fg)}
.rel-prod small{color:var(--pet-mute)}

.post-sources{margin-top:48px;padding-top:8px;border-top:1px solid var(--line)}
.post-body .post-sources h2{font-size:20px;margin-top:28px}
.src-note{font-size:14px;color:var(--t3)}
.post-sources ol{font-size:14.5px;line-height:1.55;gap:10px}
.post-sources li span{color:var(--t3)}
.post-sources a{overflow-wrap:anywhere}

.post-author{display:flex;gap:16px;align-items:flex-start;margin-top:40px;padding:22px;border-radius:16px;background:var(--bg-alt)}
.post-author img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none}
.post-author p{font-size:15px;line-height:1.6;margin:0 0 6px}
.post-author .by{font-weight:600;color:var(--t1)}
.post-author .dates{font-size:13px;color:var(--t3);margin:0}

/* ---------- Index du blog ---------- */
.blog-hero .lead{max-width:58ch}
.blog-list{padding:10px 0 120px;background:var(--bg)}
.bgrid{display:grid;gap:22px}
@media (min-width:760px){.bgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.bgrid{grid-template-columns:repeat(3,1fr)}}
.bcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--card);transition:border-color .25s,transform .25s,box-shadow .25s}
.bcard:hover{border-color:rgba(var(--fg-rgb),.22);transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(14,16,34,.3)}
.bcard-im{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--bg-alt)}
.bcard-im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}
.bcard:hover .bcard-im img{transform:scale(1.03)}
.bcard-c{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.bcard-c .post-tag{margin-bottom:10px}
.bcard h2{font-family:var(--f-d);font-size:20px;line-height:1.25;letter-spacing:-.025em;margin:0 0 10px;text-wrap:balance}
.bcard h2 a{color:var(--t1)}
.bcard h2 a::after{content:"";position:absolute;inset:0}
.bcard{position:relative}
.bcard-c > p{font-size:15px;line-height:1.6;color:var(--t2);margin:0 0 16px}
.bcard-c .bcard-m{margin:auto 0 0;font-size:13px;color:var(--t3);font-family:var(--f-m)}

@media (max-width:759px){
  .post-body{font-size:17px}
  .post-body .reponse{font-size:17.5px}
  .enbref{padding:20px}
  .post-cta{padding:22px 20px}
  .post-cta-b .btn{width:100%}
  .post-author{flex-direction:column}
  .post-byline .by{font-size:13.5px}
}
@media print{.nav,.mmenu,.post-aside,.post-cta,.post-related,footer{display:none!important}}
/* Encadré auteur : texte lisible */
.post-author{background:#FFFAF3;border:1px solid #E4D6C3;color:#3B3632}
.post-author p{color:#3B3632}
.post-author .by{color:#0E1022;font-size:16px}
.post-author a{color:#8C3B22;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.post-author .dates{color:#6A5F57}