/* ==========================================================================
   Thème QuietCMS « beecases » v4 : blog et articles (editorial.css)
   Chargé sur le blog et les articles. Composants ed-* saisis dans le contenu,
   animations an-* des infographies (déclenchées par site.js à l'apparition).
   ========================================================================== */

/* En-tête d'article et de blog */
.post-hero{padding:clamp(48px,6vw,96px) 0 var(--s4)}
.post-crumbs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px;font-size:13px;color:var(--ink-3)}
.post-crumbs a{color:var(--ink-2);transition:color var(--t-fast)}
.post-crumbs a:hover{color:var(--red)}
.post-hero h1{max-width:16em;font-size:clamp(38px,5vw,72px);line-height:1.05}
.post-meta{display:flex;flex-wrap:wrap;gap:8px 28px;margin:28px 0 0;font-size:14px;color:var(--ink-3)}
.post-meta span{display:inline-flex;align-items:center;gap:8px}
.post-meta span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red)}
.post-cover{margin:0 0 var(--s5);overflow:hidden;border-radius:var(--radius);background:var(--paper-2)}
.post-cover img{width:100%;aspect-ratio:16/8;object-fit:cover}
.post-cover--art{aspect-ratio:16/8;display:flex;align-items:center;justify-content:center}
.post-cover--art svg{width:min(70%,560px);height:auto}

/* Mise en page : sommaire collant + colonne de lecture */
.post-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--s6);align-items:start;padding-bottom:var(--s6)}
.post-layout--solo{grid-template-columns:minmax(0,1fr)}
.post-toc{position:sticky;top:calc(var(--header-h) + 32px);font-size:14px}
.post-toc-t{margin:0 0 14px;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.post-toc ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);counter-reset:pt}
.post-toc li{counter-increment:pt;border-bottom:1px solid var(--line)}
.post-toc a{display:grid;grid-template-columns:28px 1fr;gap:6px;padding:10px 0;line-height:1.35;color:var(--ink-3);transition:color var(--t-fast)}
.post-toc a::before{content:counter(pt,decimal-leading-zero);font-family:var(--font-accent);font-style:italic;font-size:15px}
.post-toc a:hover,.post-toc a.is-current{color:var(--ink)}
.post-toc a.is-current::before{color:var(--red)}
.post-body{max-width:780px;min-width:0}
.post-body > *+*{margin-top:28px}
.post-body h2{margin-top:var(--s5);font-size:clamp(28px,2.8vw,40px);line-height:1.12;scroll-margin-top:calc(var(--header-h) + 24px)}
.post-body h3{margin-top:var(--s4);font-size:clamp(22px,2vw,27px);scroll-margin-top:calc(var(--header-h) + 24px)}
.post-body h2+p,.post-body h3+p{margin-top:18px}
.post-body p{margin:0;font-size:17.5px;line-height:1.8}
.post-body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:4px;text-decoration-thickness:1px;transition:color var(--t-fast)}
.post-body a:hover{color:var(--red)}
.ed-chapo{font-size:clamp(19px,1.7vw,22px)!important;line-height:1.6!important;color:var(--ink)}
.post-author{display:grid;grid-template-columns:64px 1fr;gap:22px;margin-top:var(--s5)!important;padding:28px;background:var(--paper-2);border-radius:var(--radius)}
.post-author img{width:64px}
.post-author p{font-size:15px!important;line-height:1.65!important}
.post-author .post-author-t{margin-bottom:6px;font-weight:600;color:var(--ink)}

/* Photo */
.ed-photo{margin:0}
.ed-photo img{width:100%;height:auto;border-radius:var(--radius);background:var(--paper-2)}
.ed-photo figcaption,.ed-infog figcaption{padding-top:12px;font-size:13.5px;line-height:1.5;color:var(--ink-3)}
/* Infographie */
.ed-infog{margin:0}
.ed-infog svg{width:100%;height:auto;border-radius:var(--radius)}
/* Encadré */
.ed-note{position:relative;padding:26px 28px 26px 32px;background:var(--sage);border-radius:var(--radius)}
.ed-note::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:3px;background:var(--ink)}
.ed-note .ed-note-t{margin:0 0 8px!important;font-size:12px!important;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.ed-note p{font-size:16.5px!important;line-height:1.7!important}
.ed-note--alerte{background:#f6e3df}
.ed-note--alerte::before{background:var(--red)}
/* Fiches */
.ed-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.ed-card{padding:24px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);transition:transform .45s var(--ease),border-color .3s}
.ed-card:hover{transform:translateY(-4px);border-color:var(--ink)}
.ed-card-ico{width:52px;height:52px;margin-bottom:16px}
.ed-card-ico svg{width:100%;height:100%}
.ed-card .ed-card-t{margin:0 0 8px;font-size:18px!important;font-weight:600;line-height:1.3!important;color:var(--ink)}
.ed-card p{font-size:15.5px!important;line-height:1.6!important}
.ed-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px!important}
.ed-tags span{padding:4px 10px;font-size:12px;font-weight:500;color:var(--ink-2);background:var(--paper);border-radius:999px}
/* Étapes */
.ed-steps{list-style:none;margin:0;padding:0;counter-reset:es;border-left:1px solid var(--line)}
.ed-steps li{position:relative;counter-increment:es;padding:0 0 26px 44px}
.ed-steps li:last-child{padding-bottom:0}
.ed-steps li::before{content:counter(es);position:absolute;left:-17px;top:-2px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-family:var(--font-accent);font-style:italic;font-size:19px;color:#fff;background:var(--ink);border-radius:50%}
.ed-steps strong{display:block;margin-bottom:4px;font-size:18px;color:var(--ink)}
.ed-steps span{display:block;font-size:16px;line-height:1.65}
/* Tableau */
.ed-table-wrap{overflow-x:auto}
.ed-table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.5}
.ed-table th{padding:14px 16px;text-align:left;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink);background:var(--ink)}
.ed-table th:first-child{border-radius:var(--radius) 0 0 0}.ed-table th:last-child{border-radius:0 var(--radius) 0 0}
.ed-table td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.ed-table tbody tr:nth-child(even) td{background:var(--white)}
.ed-table td:first-child{font-weight:600;color:var(--ink)}
/* Repères clés */
.ed-keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.ed-key{padding:26px 22px;background:var(--paper)}
.ed-key b{display:block;font-family:var(--font-accent);font-style:italic;font-weight:400;font-size:56px;line-height:1;color:var(--red)}
.ed-key span{display:block;margin-top:10px;font-size:14.5px;line-height:1.5}
/* Barres qualitatives */
.ed-bars{padding:28px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius)}
.ed-bars .ed-bars-t{margin:0 0 18px!important;font-size:17px!important;font-weight:600;color:var(--ink)}
.ed-bar{display:grid;grid-template-columns:1fr auto;gap:6px 16px;padding:10px 0}
.ed-bar span{font-size:15px}
.ed-bar b{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.ed-bar::after{content:"";grid-column:1/-1;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--ink),var(--red)) 0 0/calc(var(--v,50) * 1%) 100% no-repeat,var(--paper-2);transition:background-size 1.4s var(--ease)}
/* Quiz */
.ed-quiz{padding:30px;color:var(--on-ink-2);background:var(--ink);border-radius:var(--radius)}
.ed-quiz .ed-quiz-t{margin:0 0 6px!important;font-family:var(--font-accent);font-style:italic;font-size:30px!important;color:var(--on-ink)}
.ed-quiz .ed-quiz-score{margin:0 0 6px!important;font-size:13px!important;letter-spacing:.14em;text-transform:uppercase;color:var(--sand)}
.ed-q{padding:20px 0;border-top:1px solid rgba(244,242,237,.15)}
.ed-q > p:first-child{margin:0 0 14px!important;font-size:17px!important;color:var(--on-ink)}
.ed-q button{margin:0 8px 0 0;padding:10px 22px;font:600 14px/1 var(--font);color:var(--on-ink);background:transparent;border:1px solid rgba(244,242,237,.4);border-radius:999px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.ed-q button:hover{border-color:var(--on-ink)}
.ed-q button.is-right{background:#4f9d69;border-color:#4f9d69;color:#fff}
.ed-q button.is-wrong{background:var(--red);border-color:var(--red);color:#fff}
.ed-q .ed-q-exp{display:none;margin-top:14px!important;font-size:15.5px!important;line-height:1.65!important}
.ed-q.is-done .ed-q-exp{display:block;animation:rise .5s var(--ease) both}
.ed-q.is-done button{pointer-events:none}
/* Replis / FAQ */
.ed-fold{border-bottom:1px solid var(--line)}
.post-body .ed-fold+.ed-fold{margin-top:0}
.ed-fold:first-of-type{border-top:1px solid var(--line)}
.ed-fold summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;list-style:none;cursor:pointer;font-size:18px;font-weight:500;color:var(--ink);transition:color var(--t-fast)}
.ed-fold summary::-webkit-details-marker{display:none}
.ed-fold summary:hover{color:var(--red)}
.ed-fold summary::after{content:"";flex:none;width:13px;height:13px;background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;transition:transform .4s var(--ease)}
.ed-fold[open] summary::after{transform:rotate(135deg)}
.ed-fold p{padding:0 0 22px;font-size:16.5px!important}
/* Calculateurs */
.ed-calc{padding:30px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius)}
.ed-calc-t{margin:0 0 18px!important;font-family:var(--font-accent);font-style:italic;font-size:28px!important;color:var(--ink)}
.ed-calc-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
.ed-calc label{display:flex;flex-direction:column;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ed-calc input{width:100%;padding:12px 0;font:500 22px/1.2 var(--font);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);outline:0}
.ed-calc input:focus{border-bottom-color:var(--red)}
.ed-calc-out{display:flex;align-items:baseline;gap:14px;margin-top:24px!important;padding-top:20px;border-top:1px solid var(--line)}
.ed-calc-out b{font-family:var(--font-accent);font-style:italic;font-weight:400;font-size:56px;line-height:1;color:var(--red)}
.ed-calc-out span{font-size:16px;color:var(--ink)}
.ed-calc-viz{display:flex;flex-wrap:wrap;gap:4px;margin-top:18px!important}
.ed-calc-viz i{width:14px;height:20px;border-radius:2px;background:var(--wood,#d9b98c)}
.ed-calc-viz i.is-res{background:var(--sage)}
.ed-calc-viz i.is-busy{background:var(--red)}
.ed-calc-note{margin-top:14px!important;font-size:13.5px!important;color:var(--ink-3)}

/* Liste du blog */
.blog-intro,.blog-outro{padding-bottom:var(--s6)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5) var(--s4);padding:var(--s5) 0 var(--s6);border-top:1px solid var(--line)}
.blog-card{display:flex;flex-direction:column}
.blog-card-media{display:block;overflow:hidden;border-radius:var(--radius);background:var(--paper-2)}
.blog-card-media img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .9s var(--ease)}
.blog-card:hover .blog-card-media img{transform:scale(1.04)}
.blog-card-date{margin:20px 0 10px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.blog-card h2{font-size:22px;line-height:1.25;letter-spacing:-.02em}
.blog-card h2 a{transition:color var(--t-fast)}
.blog-card:hover h2 a{color:var(--red)}
.blog-card p{margin-top:12px;font-size:15.5px;line-height:1.6}
.blog-card--first{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;gap:var(--s5);align-items:center}
.blog-card--first .blog-card-media img{aspect-ratio:16/10}
.blog-card--first h2{font-size:clamp(28px,3vw,40px)}

/* Animations des infographies (an-*) */
@media (prefers-reduced-motion:no-preference){
  .js .an-trace{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200)}
  .js .is-anim .an-trace{transition:stroke-dashoffset 2.2s var(--ease);stroke-dashoffset:0}
  .js .an-pop{opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:center}
  .js .is-anim .an-pop{animation:an-pop .7s var(--ease) forwards}
  .js .is-anim .an-pop:nth-of-type(2n){animation-delay:.15s}
  .js .is-anim .an-pop:nth-of-type(3n){animation-delay:.3s}
  .js .is-anim .an-pop:nth-of-type(4n){animation-delay:.45s}
  .js .an-grow{transform:scaleY(0);transform-box:fill-box;transform-origin:bottom}
  .js .is-anim .an-grow{transition:transform 1.3s var(--ease);transform:none}
  .is-anim .an-blink{animation:an-blink 1.6s ease-in-out infinite}
  .an-float{animation:an-float 4s ease-in-out infinite}
  .is-anim .an-door{animation:an-door 5s var(--ease) 1s infinite}
  .js .ed-bar::after{background-size:0 100%,auto}
  .js .ed-bars.is-anim .ed-bar::after{background-size:calc(var(--v,50) * 1%) 100%,auto}
}
@keyframes an-pop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:none}}
@keyframes an-blink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes an-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes an-door{0%,15%,75%,100%{transform:perspective(600px) rotateY(0)}30%,60%{transform:perspective(600px) rotateY(-38deg)}}

@media (max-width:1024px){
  .post-layout{grid-template-columns:1fr;gap:var(--s4)}
  .post-toc{position:static}
  .post-toc details summary{cursor:pointer}
  .blog-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .post-body p{font-size:16.5px}
  .post-cover img{aspect-ratio:3/2}
  .blog-grid{grid-template-columns:1fr}
  .blog-card--first{display:flex}
  .ed-quiz,.ed-calc,.ed-bars{padding:22px}
  .ed-key b{font-size:46px}
  .post-author{grid-template-columns:1fr}
}