/* Cadre éditorial commun — DA6 active, sources dans DESIGN-LECTEUR.md. */
html{color-scheme:light;scroll-padding-top:120px;background:var(--paper,#fff)}
body.blog-page{margin:0;background:var(--white,#fff);color:var(--ink,#12131c);font:400 17px/1.75 var(--body);overflow-wrap:anywhere}
.blog-page *,.blog-page *::before,.blog-page *::after{box-sizing:border-box}
.blog-page [hidden]{display:none!important}
.blog-page a{color:var(--cobalt);text-underline-offset:.22em;text-decoration-thickness:1px}
.blog-page a:hover{text-decoration-thickness:2px}
.blog-page :focus-visible{outline:3px solid var(--cobalt);outline-offset:4px}
.blog-page :is(button,summary,a){touch-action:manipulation}
.blog-page button{font:800 14px/1.4 var(--display)}
.blog-page .blog-shell{width:min(1180px,calc(100% - 64px));margin-inline:auto}
.blog-page .blog-skip{position:absolute;top:-140px;left:18px;z-index:1100;padding:12px 16px;background:var(--white);border:2px solid var(--cobalt);border-radius:9px;min-height:48px}
.blog-page .blog-skip:focus{top:12px}
.blog-page .blog-header{position:relative;z-index:20;background:var(--white);border-bottom:2px solid var(--brd)}
.blog-page .blog-header-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:96px;padding-block:20px}
.blog-page .blog-brand{display:inline-flex;align-items:center;min-height:48px;padding:7px 0;line-height:0;flex:0 0 auto}
.blog-page .blog-brand img{display:block;width:174px;max-width:100%;height:auto}
.blog-page .blog-desktop-nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.blog-page .blog-desktop-nav a{display:inline-flex;align-items:center;min-height:48px;padding:8px 0;color:var(--ink);font:500 15px/1.4 var(--body);text-decoration:none;border-bottom:2px solid transparent}
.blog-page .blog-desktop-nav a:hover,.blog-page .blog-desktop-nav a[aria-current=page]{color:var(--cobalt);border-bottom-color:var(--pink)}
.blog-page .blog-menu-toggle{display:none;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:11px 14px;border:2px solid var(--cobalt);border-radius:9px;color:var(--cobalt);background:var(--white);cursor:pointer}
.blog-page .blog-menu-icon{position:relative;width:19px;height:16px;display:inline-block}
.blog-page .blog-menu-icon::before,.blog-page .blog-menu-icon::after{content:'';position:absolute;left:0;width:19px;height:2px;background:var(--cobalt);transition:transform 150ms,top 150ms}
.blog-page .blog-menu-icon::before{top:4px}.blog-page .blog-menu-icon::after{top:11px}
.blog-page .blog-menu-toggle[aria-expanded=true] .blog-menu-icon::before{top:8px;transform:rotate(45deg)}
.blog-page .blog-menu-toggle[aria-expanded=true] .blog-menu-icon::after{top:8px;transform:rotate(-45deg)}
.blog-page .blog-mobile-menu:not([open]){display:none}
.blog-page .blog-mobile-menu{position:fixed;inset:0;z-index:1000;width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;background-color:var(--cobalt);background-image:var(--grid-w);background-size:34px 34px;color:var(--white);overflow-y:auto;overscroll-behavior:contain}
.blog-page .blog-mobile-menu::backdrop{background:var(--cobalt)}
.blog-page .blog-mobile-top{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:88px;padding:16px max(20px,env(safe-area-inset-right));background:var(--white)}
.blog-page .blog-mobile-top .blog-brand img{width:152px}
.blog-page .blog-menu-close{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 13px;border:2px solid var(--cobalt);border-radius:9px;color:var(--cobalt);background:var(--white);cursor:pointer}
.blog-page .blog-mobile-body{max-width:760px;margin:auto;padding:40px 24px max(40px,env(safe-area-inset-bottom))}
.blog-page .blog-mobile-title{font:800 clamp(29px,7vw,44px)/1.15 var(--display);letter-spacing:-.035em;margin:0 0 28px;color:var(--white)}
.blog-page .blog-mobile-title span{color:var(--lime)}
.blog-page .blog-mobile-menu nav{display:grid;gap:0}
.blog-page .blog-mobile-menu nav a{display:block;min-height:64px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.35);font:800 clamp(20px,5vw,28px)/1.3 var(--display);color:var(--white);text-decoration:none}
.blog-page .blog-mobile-menu :focus-visible{outline-color:var(--white)}
.blog-page .blog-mobile-top :focus-visible{outline-color:var(--cobalt)}
.blog-page .blog-breadcrumb{display:flex;flex-wrap:wrap;gap:7px 10px;margin:0 0 30px;color:var(--ink-soft);font:500 13px/1.5 var(--body)}
.blog-page .blog-breadcrumb a{display:inline-block;min-height:44px;padding:11px 0}
.blog-page .blog-breadcrumb>span{padding-block:11px}
.blog-page .blog-kicker{display:flex;align-items:center;gap:10px;margin:0 0 20px;color:var(--cobalt);font:400 10px/1.6 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.blog-page .blog-kicker::before{content:'';width:22px;height:6px;flex:0 0 22px;border-radius:3px;background:var(--pink)}
.blog-page .blog-title{font:800 clamp(32px,4.1vw,54px)/1.1 var(--display);letter-spacing:-.04em;color:var(--ink);margin:0 0 28px;text-wrap:balance;overflow-wrap:anywhere}
.blog-page .heading-accent{color:var(--cobalt)}
.blog-page .heading-punct{color:var(--pink)}
.blog-page .blog-intro{font:400 18px/1.7 var(--body);color:var(--ink-soft);max-width:65ch;margin:0 0 24px}
.blog-page .blog-index{padding-block:36px 56px}
.blog-page .blog-hero{padding:clamp(28px,5vw,60px);border-radius:28px;background-color:var(--cobalt);background-image:var(--grid-w);background-size:34px 34px;color:var(--white)}
.blog-page .blog-hero .blog-title{color:var(--white)}
.blog-page .blog-hero .heading-accent{color:var(--lime)}
.blog-page .blog-hero .blog-kicker,.blog-page .blog-hero .blog-intro{color:var(--white)}
.blog-page .blog-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:28px}
.blog-page .blog-button{display:inline-flex;justify-content:center;align-items:center;min-height:48px;padding:13px 18px;border:2px solid var(--cobalt);border-radius:9px;background:var(--cobalt);color:var(--white);font:800 14px/1.45 var(--display);text-align:center;text-decoration:none;transition:transform 150ms var(--cta-ease,cubic-bezier(.22,.78,.25,1))}
.blog-page .blog-button:hover{transform:translateY(-2px)}.blog-page .blog-button:active{transform:translateY(1px)}
.blog-page .blog-button--secondary{color:var(--cobalt);background:var(--white)}
.blog-page .blog-hero .blog-button{background:var(--white);border-color:var(--white);color:var(--cobalt)}
.blog-page .blog-hero .blog-button--secondary{background:var(--lime);border-color:var(--lime);color:var(--cobalt)}
.blog-page .blog-hero :focus-visible{outline-color:var(--white)}
.blog-page .blog-catalog{padding-top:56px}
.blog-page .catalog-title{font:800 clamp(28px,3vw,42px)/1.15 var(--display);letter-spacing:-.035em;margin:0 0 32px;color:var(--ink)}
.blog-page .blog-catalog ol{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0;padding:0}
.blog-page .guide-card{display:grid;grid-template-columns:48px minmax(0,1fr);gap:18px;align-items:start;padding:26px;margin:0;min-width:0;background:var(--white);border:2px solid var(--cobalt);border-radius:22px}
.blog-page .guide-number{display:inline-flex;justify-content:center;align-items:center;width:48px;height:48px;flex:0 0 48px;border-radius:14px;background-color:var(--cobalt);background-image:var(--grid-w);background-size:20px 20px;color:var(--white);font:800 13px/1 var(--display)}
.blog-page .guide-card h3{font:800 clamp(19px,1.8vw,23px)/1.35 var(--display);letter-spacing:-.025em;margin:0 0 14px}
.blog-page .guide-card h3 a{display:inline-block;padding:0 0 5px;min-height:44px;text-decoration:none;color:var(--ink)}
.blog-page .guide-card h3 a:hover{text-decoration:underline;text-underline-offset:.2em}
.blog-page .guide-card p{font:400 15px/1.7 var(--body);color:var(--ink-soft);margin:0}
.blog-page .guide-go{display:inline-flex;align-items:center;min-height:44px;margin-top:14px;font:700 14px/1.5 var(--body)}
.blog-page .article-hero{padding-block:32px 44px;border-bottom:2px solid var(--brd)}
.blog-page .article-hero .blog-title{margin-bottom:0}
.blog-page .article-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:56px;align-items:start;padding-block:40px 56px}
.blog-page .article-toc{position:sticky;top:120px;max-height:calc(100dvh - 144px);overflow:auto;border:2px solid var(--cobalt);border-radius:20px;padding:20px;background:var(--white);font-size:15px}
.blog-page .article-toc h2{font:800 20px/1.3 var(--display);letter-spacing:-.025em;margin:0 0 12px}
.blog-page .article-toc summary{cursor:pointer;min-height:44px;padding:10px 0;font:700 15px/1.5 var(--body);color:var(--cobalt)}
.blog-page .article-toc ul,.blog-page .article-toc ol{list-style:none;margin:10px 0 0;padding:0}
.blog-page .article-toc li{margin:0;padding:0}
.blog-page .article-toc a{display:block;padding:10px 0;min-height:44px;border-bottom:1px solid var(--brd);font:500 16px/1.5 var(--body);color:var(--ink);text-decoration:none}
.blog-page .article-toc a:hover{color:var(--cobalt);text-decoration:underline}
.blog-page .prose{min-width:0;max-width:74ch;font:400 17px/1.8 var(--body);color:var(--ink)}
.blog-page .prose>p,.blog-page .prose>ul,.blog-page .prose>ol{margin:0 0 24px;max-width:74ch}
.blog-page .prose>ul,.blog-page .prose>ol{padding-left:25px}
.blog-page .prose>ul>li,.blog-page .prose>ol>li{margin:.45em 0}
.blog-page .prose>h2,.blog-page .prose>h3,.blog-page .prose>h4{font-family:var(--display);font-weight:800;line-height:1.25;letter-spacing:-.03em;overflow-wrap:anywhere;scroll-margin-top:28px}
.blog-page .prose>h2{font-size:clamp(26px,2.7vw,35px);margin:48px 0 22px;padding-top:28px;border-top:2px solid var(--brd)}
.blog-page .prose>h3{font-size:clamp(22px,2vw,27px);margin:34px 0 16px}
.blog-page .prose>h4{font-size:21px;margin:28px 0 14px}
.blog-page .prose a{overflow-wrap:anywhere}
.blog-page .prose>a[id]{display:block;scroll-margin-top:28px}
.blog-page .table-wrap{max-width:100%;overflow:auto;margin:28px 0;border:2px solid var(--cobalt);border-radius:12px;background:var(--white);scrollbar-color:var(--cobalt) var(--white)}
.blog-page .table-wrap table{width:100%;border-collapse:collapse;font:400 14px/1.6 var(--body)}
.blog-page .table-wrap th,.blog-page .table-wrap td{padding:15px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--brd);min-width:135px;background:var(--white)}
.blog-page .table-wrap th{font-weight:700;color:var(--cobalt);border-bottom:2px solid var(--cobalt)}
.blog-page .table-wrap tbody tr:last-child td{border-bottom:0}
.blog-page .prose code{font:400 .88em/1.6 ui-monospace,Consolas,monospace;color:var(--cobalt);border:1px solid var(--brd);border-radius:4px;padding:2px 4px;background:var(--white);overflow-wrap:anywhere}
.blog-page .prose pre{max-width:100%;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;padding:22px;border:2px solid var(--cobalt);border-radius:12px;background:var(--white);font-size:14px;line-height:1.65;margin:28px 0}
.blog-page .prose pre code{padding:0;border:0;background:var(--white);color:var(--ink)}
.blog-page .prose blockquote{margin:28px 0;padding:18px 22px;border:2px solid var(--cobalt);border-radius:12px;background:var(--white);color:var(--cobalt)}
.blog-page .prose blockquote p{margin:0}
.blog-page .reading-next{margin-top:48px;padding:26px;border:2px solid var(--cobalt);border-radius:22px;background:var(--white)}
.blog-page .reading-next h2{font:800 24px/1.3 var(--display);margin:0 0 12px;letter-spacing:-.025em}
.blog-page .reading-next p{margin:0 0 16px;font-size:16px}
.blog-page .reading-next a{display:inline-block;min-height:44px;padding:9px 0;font:700 16px/1.5 var(--body)}
.blog-page .reading-next a+a{margin-left:18px}
.blog-page .blog-standalone{max-width:1000px;padding-block:32px 56px}
.blog-page .standalone-hero{margin-bottom:32px}
.blog-page .blog-footer{margin:24px auto 32px;padding:40px clamp(24px,4vw,48px);border-radius:28px;background-color:var(--cobalt);background-image:var(--grid-w);background-size:34px 34px;color:var(--white)}
.blog-page .blog-footer-top{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:start}
.blog-page .blog-footer .blog-brand{width:220px;max-width:100%;padding:16px 20px;border-radius:10px;background:var(--white)}
.blog-page .blog-footer .blog-brand img{width:100%;height:auto}
.blog-page .blog-footer p{font-size:15px;line-height:1.7;color:var(--white);margin:20px 0 0;max-width:36ch}
.blog-page .blog-footer h2{font:800 24px/1.3 var(--display);color:var(--lime);margin:0 0 12px}
.blog-page .blog-footer nav{display:grid;gap:2px}
.blog-page .blog-footer nav a{display:block;padding:10px 0;min-height:44px;color:var(--white);font:500 15px/1.5 var(--body)}
.blog-page .blog-footer :focus-visible{outline-color:var(--white)}
.blog-page .blog-footer .blog-brand:focus-visible{outline-color:var(--lime)}
.blog-page .blog-footer-note{border-top:1px solid rgba(255,255,255,.35);padding-top:22px;margin-top:30px!important;max-width:none!important;font-size:12px!important}
@media(max-width:1100px){
 .blog-page .blog-header-inner{flex-wrap:wrap;gap:10px;min-height:84px}.blog-page .blog-desktop-nav{width:100%;gap:10px 20px}
 .reader-enhanced .blog-page .blog-desktop-nav{display:none}.reader-enhanced .blog-page .blog-menu-toggle{display:inline-flex}
 .blog-page .article-layout{grid-template-columns:minmax(0,1fr);gap:30px}.blog-page .article-toc{position:static;max-height:none;overflow:visible}
 .blog-page .prose{max-width:78ch;margin-inline:auto;width:100%}.blog-page .article-toc a{font-size:16px}
}
@media(max-width:760px){
 html{scroll-padding-top:96px}.blog-page .blog-shell{width:calc(100% - 36px)}.blog-page .blog-header-inner{padding-block:12px}.blog-page .blog-brand img{width:152px}
 .blog-page .blog-index{padding-block:24px 36px}.blog-page .blog-hero{padding:28px 22px;border-radius:20px}.blog-page .blog-title{font-size:clamp(30px,7.4vw,40px);line-height:1.12;letter-spacing:-.035em}
 .blog-page .blog-intro{font-size:16px;line-height:1.7}.blog-page .blog-catalog{padding-top:38px}.blog-page .blog-catalog ol{grid-template-columns:minmax(0,1fr)}
 .blog-page .guide-card{padding:22px 18px;gap:14px}.blog-page .guide-card h3{font-size:20px}.blog-page .blog-actions{gap:12px}.blog-page .blog-actions .blog-button{width:100%}
 .blog-page .article-hero{padding-block:24px 30px}.blog-page .blog-breadcrumb{margin-bottom:22px}.blog-page .article-layout{padding-block:24px 36px}
 .blog-page .prose>h2{margin-top:36px;padding-top:24px;font-size:27px}.blog-page .prose>h3{font-size:23px}.blog-page .table-wrap th,.blog-page .table-wrap td{padding:12px;min-width:130px}
 .blog-page .blog-footer{padding:30px 24px;border-radius:20px}.blog-page .blog-footer-top{grid-template-columns:minmax(0,1fr);gap:28px}.blog-page .reading-next a+a{margin-left:0;display:block}
}
@media(prefers-reduced-motion:reduce){.blog-page *,.blog-page *::before,.blog-page *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}.blog-page .blog-button:hover,.blog-page .blog-button:active{transform:none}}
@media print{.blog-page .blog-header,.blog-page .blog-footer,.blog-page .blog-skip,.blog-page .article-toc,.blog-page .reading-next{display:none}.blog-page .blog-shell{width:100%}.blog-page .article-layout{display:block}.blog-page .prose{max-width:none}.blog-page .blog-title{font-size:26pt}.blog-page .table-wrap{overflow:visible}.blog-page .blog-hero{background:var(--white);color:var(--ink)}}

.blog-page .heading-needs-dot::after{content:'.';color:var(--pink)}
.blog-page .blog-mobile-menu.is-opening{animation:blog-menu-in 220ms cubic-bezier(.22,.78,.25,1) both}
.blog-page .blog-mobile-menu.is-closing{animation:blog-menu-out 150ms ease both}
@keyframes blog-menu-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes blog-menu-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){.blog-page .blog-mobile-menu.is-opening,.blog-page .blog-mobile-menu.is-closing{animation:none!important;transform:none!important}}

.blog-page .blog-mobile-title .heading-punct{color:var(--pink)}

.reader-enhanced .blog-page .blog-header{position:sticky;top:0}

.blog-page .heading-tail{white-space:nowrap}

/* Bandeaux éditoriaux B4/B1 : pivot §8/12, agency-components.css et correction du24/09.
   Aucun texte d'offre, avis ou promesse n'est importé avec les composants. */
.blog-page .blog-banner{display:grid;grid-template-columns:minmax(0,1fr) minmax(216px,.8fr);align-items:center;gap:26px;margin:44px 0;padding:32px;border-radius:22px;isolation:isolate}
.blog-page .blog-banner>*{min-width:0}
.blog-page .blog-banner h2{font:800 clamp(26px,2.7vw,34px)/1.15 var(--display);letter-spacing:-.035em;margin:0 0 18px;text-wrap:balance;max-width:none}
.blog-page .blog-banner-copy>p{font:400 16px/1.7 var(--body);margin:0;color:inherit}
.blog-page .blog-banner-copy>.blog-banner-kicker{display:flex;align-items:center;gap:9px;font:400 9px/1.6 var(--mono);letter-spacing:.04em;text-transform:uppercase;margin:0 0 18px;color:var(--cobalt)}
.blog-page .blog-banner-kicker::before{content:'';width:22px;height:6px;flex:0 0 22px;border-radius:3px;background:var(--pink)}
.blog-page .blog-banner-panel{display:flex;align-items:center;justify-content:center;min-height:168px;padding:26px 20px 36px;border-radius:18px}
.blog-page .blog-button--badged{position:relative;border:0;max-width:100%;min-height:56px;padding:16px 20px;margin:0 0 12px;overflow:visible;font:800 16px/1.4 var(--display);letter-spacing:0}
.blog-page .blog-button-label{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:0}
.blog-page .blog-button-arrow{flex:none;font-size:1.12em;line-height:1}
.blog-page .blog-cta-badge{position:absolute;top:auto;bottom:0;left:50%;transform:translate(-50%,50%);display:inline-flex;align-items:center;justify-content:center;gap:5px;width:max-content;max-width:calc(100% - 20px);padding:5px 10px;border-radius:7px;font:700 12px/1.3 var(--body);white-space:nowrap;box-shadow:var(--badge-shadow);pointer-events:none}
.blog-page .blog-button:active{box-shadow:none}
.blog-page .blog-button--badged:focus-visible{outline:3px solid var(--lime);outline-offset:2px;box-shadow:0 0 0 5px var(--cobalt)}
.blog-page .blog-banner--mid{border:2px solid var(--cobalt);background:var(--white);color:var(--ink)}
.blog-page .blog-banner--mid h2{color:var(--cobalt)}
.blog-page .blog-banner--mid h2 .heading-accent{color:var(--ink)}
.blog-page .blog-banner--mid .blog-banner-panel{background-color:var(--cobalt);background-image:var(--grid-w);background-size:34px 34px}
.blog-page .blog-banner--mid .blog-button{background:var(--white);border-color:var(--white);color:var(--cobalt);box-shadow:none}
.blog-page .blog-banner--mid .blog-button-arrow{color:var(--pink)}
.blog-page .blog-banner--mid .blog-cta-badge{background:var(--pink);color:var(--white)}
.blog-page .blog-banner--final{background-color:var(--cobalt);background-image:var(--grid-w);background-size:34px 34px;color:var(--white)}
.blog-page .blog-banner--final .blog-banner-first{color:var(--lime)}
.blog-page .blog-banner--final .blog-banner-kicker{color:var(--white)}
.blog-page .blog-banner--final .blog-banner-second,.blog-page .blog-banner--final .blog-banner-copy a{color:var(--white)}
.blog-page .blog-banner--final .blog-banner-panel{background:var(--pink)}
.blog-page .blog-banner--final .blog-button{background:var(--lime);border-color:var(--lime);color:var(--cobalt);box-shadow:0 12px 26px -14px rgba(10,16,90,.6)}
.blog-page .blog-banner--final .blog-cta-badge{background:var(--white);color:var(--cobalt)}
.blog-page .prose blockquote{background-color:var(--cobalt);background-image:var(--grid-w);background-size:34px 34px;color:var(--white)}
.blog-page .prose blockquote a{color:var(--white)}
.blog-page .table-wrap th{background-color:var(--cobalt);background-image:var(--grid-w);background-size:34px 34px;color:var(--white)}
.blog-page .article-toc summary{padding:12px;border-radius:9px;background-color:var(--cobalt);background-image:var(--grid-w);background-size:34px 34px;color:var(--white)}
.blog-page .article-toc summary::marker{color:var(--lime)}
@media(max-width:1000px){.blog-page .blog-banner{grid-template-columns:minmax(0,1fr);gap:24px}.blog-page .blog-banner-panel{min-height:142px}}
@media(max-width:640px){.blog-page .blog-banner{padding:22px 18px;gap:22px;margin-block:34px}.blog-page .blog-banner h2{font-size:27px;line-height:1.18}.blog-page .blog-banner-panel{padding:24px 16px 34px}.blog-page .blog-button--badged{font-size:14px;padding:15px 16px}}
@media(prefers-reduced-motion:reduce){.blog-page .blog-button,.blog-page .blog-button:hover,.blog-page .blog-button:active{transition:none;transform:none}}
@media print{.blog-page .blog-banner{display:none}.blog-page .prose blockquote,.blog-page .table-wrap th{background:var(--white);color:var(--ink)}}

/* Finition 16/10 : famille article canonique, titre de pleine colonne, rythme allégé. */
.blog-page .article-hero{display:block;padding:8px 0 40px;border-bottom:0}
.blog-page .article-hero--illustrated{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,4vw,60px);align-items:center}
.blog-page .article-hero-copy{min-width:0}
.blog-page .article-hero .blog-title{max-width:none;margin:0 0 24px;font-size:clamp(34px,3.55vw,52px);line-height:1.08;letter-spacing:-.045em}
.blog-page .article-chapo{max-width:68ch;margin:0 0 20px;font:400 18px/1.65 var(--body);color:var(--ink-soft)}
.blog-page .article-meta{margin:0;font:500 13px/1.5 var(--body);color:var(--ink-soft)}
.blog-page .article-meta span{color:var(--pink);padding-inline:7px}
.blog-page .blog-breadcrumb{margin:16px 0 12px}
.blog-page .article-layout{grid-template-columns:230px minmax(0,1fr);gap:clamp(32px,4.5vw,60px);padding-top:40px;border-top:1px solid var(--brd)}
.blog-page .article-toc{padding:0 4px 12px 0;border:0;border-radius:0;background:var(--white);scrollbar-width:thin;scrollbar-color:var(--cobalt-soft) transparent}
.blog-page .article-toc summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0 12px;list-style:none;border-radius:0;background:none;color:var(--ink);font:800 18px/1.3 var(--display)}
.blog-page .article-toc summary::-webkit-details-marker{display:none}
.blog-page .toc-count{font:400 9px/1.5 var(--mono);color:var(--cobalt);white-space:nowrap}
.blog-page .article-toc ul,.blog-page .article-toc ol{counter-reset:toc;list-style:none;margin:0}
.blog-page .article-toc li{counter-increment:toc}
.blog-page .article-toc a{display:flex;align-items:baseline;gap:10px;border:0;border-left:2px solid var(--brd);padding:9px 4px 9px 12px;color:var(--ink-soft);font:500 15px/1.45 var(--body);min-height:44px}
.blog-page .article-toc a::before{content:counter(toc,decimal-leading-zero);font:400 9px/1.5 var(--mono);color:var(--cobalt);flex:none}
.blog-page .article-toc a:hover,.blog-page .article-toc a[aria-current=location]{border-left-color:var(--cobalt);color:var(--cobalt)}
.blog-page .article-toc a[aria-current=location]{font-weight:700}
.blog-page .prose{max-width:none;counter-reset:article-section;font-size:18px;line-height:1.78;color:var(--ink-soft)}
.blog-page .prose>p,.blog-page .prose>ul,.blog-page .prose>ol{max-width:72ch;margin-bottom:1.15em}
.blog-page .prose strong{color:var(--ink)}
.blog-page .prose>h2{counter-increment:article-section;margin:2.2em 0 .75em;padding:0;border:0;font-size:clamp(27px,2.45vw,37px);line-height:1.15;max-width:none}
.blog-page .prose>h2::before{content:counter(article-section,decimal-leading-zero);display:block;width:max-content;margin:0 0 14px;padding-left:32px;background:linear-gradient(var(--pink),var(--pink)) 0 50%/22px 6px no-repeat;font:400 10.5px/1.2 var(--mono);letter-spacing:.08em;color:var(--cobalt)}
.blog-page .prose>h3{font-size:clamp(21px,1.8vw,25px);max-width:none}
.blog-page .prose>h2:first-child{margin-top:0}
.blog-page .table-wrap{border-color:var(--brd);border-radius:20px;margin:28px 0}
.blog-page .table-wrap th{background-size:24px 24px}
.blog-page .table-wrap td{color:var(--ink-soft)}
.blog-page .table-wrap td:first-child{color:var(--ink);font-weight:600}
.blog-page .table-wrap[data-scroll]::before{content:'Faites défiler le tableau →';position:sticky;left:0;display:block;width:max-content;padding:9px 14px;font:600 12px/1.4 var(--body);color:var(--cobalt)}
.blog-page .prose blockquote{border:0;border-left:4px solid var(--pink);border-radius:0;padding:12px 0 12px 22px;background:var(--white);color:var(--ink);font:600 19px/1.6 var(--body)}
.blog-page .prose blockquote a{color:var(--cobalt)}
.blog-page .article-faq{margin:12px 0;border:2px solid var(--brd);border-radius:16px;background:var(--white)}
.blog-page .article-faq>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;list-style:none;padding:18px 20px;min-height:56px}
.blog-page .article-faq>summary::-webkit-details-marker,.blog-page .article-quiz>summary::-webkit-details-marker{display:none}
.blog-page .article-faq>summary h3{margin:0;font:800 18px/1.4 var(--display);letter-spacing:-.02em;color:var(--ink);max-width:none}
.blog-page .article-faq>summary::after,.blog-page .article-quiz>summary::after{content:'+';flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--cobalt);color:var(--lime);font:400 22px/1 var(--body)}
.blog-page .article-faq[open]>summary::after,.blog-page .article-quiz[open]>summary::after{content:'−'}
.blog-page .article-faq>div{padding:0 20px 20px;font-size:17px}
.blog-page .article-faq>div p:last-child{margin-bottom:0}
.blog-page .article-quiz{margin:24px 0 38px;border:2px solid var(--cobalt);border-radius:24px;overflow:hidden;background:var(--white)}
.blog-page .article-quiz>summary{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 30px;gap:5px 18px;align-items:center;cursor:pointer;list-style:none;padding:22px 24px;min-height:82px;color:var(--cobalt);font:800 21px/1.3 var(--display)}
.blog-page .article-quiz>summary>span{grid-column:1;font:400 14px/1.5 var(--body);color:var(--ink-soft)}
.blog-page .article-quiz>summary::after{grid-column:2;grid-row:1 / span 2}
.blog-page .article-quiz>.creation-quiz,.blog-page .article-quiz>.refonte-quiz{margin:0;border:0;border-radius:0}
.blog-page .article-route{display:flex;flex-wrap:wrap;gap:12px 24px;border-top:1px solid var(--brd);padding-top:24px;margin-top:32px}
.blog-page .article-route a{display:inline-flex;align-items:center;min-height:44px;font:600 15px/1.5 var(--body)}
.blog-page .blog-banner{margin-block:44px 30px}
.blog-page .blog-banner-panel{border-radius:24px}
.blog-page .guide-card{border-color:var(--brd);border-radius:20px;transition:border-color 150ms}
.blog-page .guide-card:focus-within{border-color:var(--cobalt)}
.blog-page .guide-card p{max-width:60ch}
.blog-page .standalone-hero{padding:28px 0 0}
.blog-page .standalone-hero .blog-kicker{margin-bottom:12px}
.blog-page .standalone-hero .blog-title{font-size:clamp(26px,3vw,38px);margin:0}
@media(hover:hover) and (pointer:fine){.blog-page .guide-card:hover{border-color:var(--cobalt)}}
@media(max-width:1100px){.blog-page .article-layout{grid-template-columns:minmax(0,1fr);gap:28px}.blog-page .article-toc{position:static;max-height:none;padding-bottom:18px;border-bottom:1px solid var(--brd)}.blog-page .article-toc summary{cursor:pointer}.blog-page .article-toc nav{max-height:60dvh;overflow:auto}.blog-page .article-hero--illustrated{grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}}
@media(max-width:760px){.blog-page .article-hero--illustrated{grid-template-columns:minmax(0,1fr);gap:26px}.blog-page .article-hero .blog-title{font-size:clamp(32px,5.2vw,42px)}.blog-page .article-cover{width:100%}.blog-page .article-chapo{font-size:17px}.blog-page .article-layout{padding-top:24px}}
@media(max-width:640px){.blog-page .article-hero{padding-bottom:28px}.blog-page .blog-breadcrumb{margin-top:6px}.blog-page .article-toc a{font-size:16px}.blog-page .prose{font-size:17px;line-height:1.75}.blog-page .prose>h2{font-size:27px;margin-top:1.8em}.blog-page .article-faq>summary{padding:16px}.blog-page .article-faq>div{padding:0 16px 16px;font-size:16px}.blog-page .article-quiz>summary{padding:18px;font-size:19px}.blog-page .article-route{display:grid;gap:6px}}
@media(prefers-reduced-motion:reduce){.blog-page .guide-card{transition:none}}

/* Dans l’article, le titre de section fournit déjà le contexte du défi. */
.blog-page .article-quiz :is(.creation-quiz__eyebrow,.refonte-quiz__eyebrow,.creation-quiz__intro-text,.refonte-quiz__intro-text){display:none}
.blog-page .article-quiz :is(.creation-quiz__title,.refonte-quiz__title){font-size:clamp(26px,3vw,34px)}
.blog-page .article-quiz :is(.creation-quiz__intro,.refonte-quiz__intro){padding-block:22px}