/* Foldline Blog — mêmes jetons que foldline.studio */
:root{
  color-scheme:dark;
  --bg:#0A0B09;--g1:#121410;--g2:#1A1C17;--bone:#E8EAE1;--ink:#F1F3EA;--mute:#8C9087;--mute2:#4A4E46;
  --neon:#39FF14;--black:#0A0B09;--line:rgba(241,243,234,.09);
  --r:22px;--gap:10px;--pad:12px;
  --eo:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --fd:"Archivo","IBM Plex Sans Arabic","Arial Narrow",system-ui,sans-serif;--fs:"Instrument Serif",Georgia,serif;--fm:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:24px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--fd);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{max-width:100%;height:auto}
a{color:inherit}
button,input{font:inherit}
:focus-visible{outline:2px solid var(--neon);outline-offset:3px;border-radius:4px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--neon);color:var(--black);padding:10px 16px;border-radius:999px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.muted{color:var(--mute)}

/* surfaces (identiques au site) */
.s-graphite{--s-bg:var(--g1);--s-ink:var(--ink);--s-mute:var(--mute);--s-line:rgba(241,243,234,.1);--s-line2:rgba(241,243,234,.3);--s-btn:var(--neon);--s-btn-ink:var(--black);--s-acc:var(--neon)}
.s-bone{--s-bg:var(--bone);--s-ink:#0A0B09;--s-mute:#5E625A;--s-line:rgba(10,11,9,.13);--s-line2:rgba(10,11,9,.32);--s-btn:#0A0B09;--s-btn-ink:var(--neon);--s-acc:#0A0B09}
.s-neon{--s-bg:var(--neon);--s-ink:#0A0B09;--s-mute:rgba(10,11,9,.64);--s-line:rgba(10,11,9,.17);--s-line2:rgba(10,11,9,.38);--s-btn:#0A0B09;--s-btn-ink:var(--neon);--s-acc:#0A0B09}

/* coque */
.app{position:relative;z-index:1;width:100%;max-width:none;margin:0;padding:0 var(--pad) var(--pad)}
.top{height:60px;display:flex;align-items:center;gap:16px;padding:0 4px}
.logo{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.logo small{font:500 10px/17px var(--fm);color:var(--mute);letter-spacing:.08em;text-transform:uppercase;padding-left:12px;border-left:1px solid var(--line);white-space:nowrap}
.logo-mark{height:17px;width:auto;display:block}
.logo-sub{font:500 10px/17px var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);text-decoration:none;padding-left:12px;border-left:1px solid var(--line);transition:color .3s}
.logo-sub:hover,.logo-sub[aria-current]{color:var(--neon)}
.status{margin:0 auto;display:flex;align-items:center;gap:9px;font:500 11px var(--fm);color:var(--mute);letter-spacing:.03em;padding:8px 14px;border:1px solid var(--line);border-radius:999px;white-space:nowrap}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--neon);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(57,255,20,.55)}70%{box-shadow:0 0 0 9px rgba(57,255,20,0)}100%{box-shadow:0 0 0 0 rgba(57,255,20,0)}}
.nav{display:flex;gap:6px;align-items:center}
.nav-menu{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav-menu a{display:inline-flex;align-items:center;height:40px;padding:0 14px;border-radius:999px;color:var(--mute);text-decoration:none;font:500 13px var(--fd)}
.nav-menu a:hover{color:var(--ink)}
.nav .btn{height:40px;padding:0 16px;font-size:13px}

.btn{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;font:600 14px/1 var(--fd);letter-spacing:-.01em;background:var(--s-btn,var(--neon));color:var(--s-btn-ink,var(--black));transition:transform .5s var(--eo),background-color .3s,color .3s,box-shadow .4s;white-space:nowrap;text-decoration:none}
.btn:hover{box-shadow:0 0 0 5px rgba(57,255,20,.14),0 12px 40px -10px rgba(57,255,20,.55)}
.btn .ar{display:inline-block;transition:transform .5s var(--eo)}
.btn:hover .ar{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--s-ink,var(--ink));box-shadow:inset 0 0 0 1px var(--s-line2,rgba(241,243,234,.25))}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px currentColor}

/* tuiles */
.tile{position:relative;background:var(--s-bg);color:var(--s-ink);border-radius:var(--r);overflow:hidden;isolation:isolate;padding:16px;min-width:0}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(57,255,20,.11),transparent 62%);opacity:0;transition:opacity .5s;pointer-events:none}
.s-bone.tile::before{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.75),transparent 62%)}
.s-neon.tile::before{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.4),transparent 62%)}
.tile:hover::before{opacity:1}
.t-top{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font:500 10px/1 var(--fm);letter-spacing:.07em;text-transform:uppercase;color:var(--s-mute);margin:0}
.chip-s{font:600 10px/1 var(--fm);padding:5px 8px;border-radius:999px;background:#0A0B09;color:var(--neon);letter-spacing:.03em;text-decoration:none;text-transform:uppercase}
.t-arrow{flex:none;width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--s-line2);display:grid;place-items:center;color:var(--s-ink);transition:transform .6s var(--eo),background-color .3s,color .3s,box-shadow .3s}
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}

/* héro du blog */
.jr-hero{margin-top:2px}
.jr-intro{grid-column:1/9;background:transparent;padding:30px 22px 26px 8px;display:flex;flex-direction:column;gap:22px}
.jr-intro::before{display:none}
.jr-cta{grid-column:9/13}
.eyebrow{font:500 11px/1.3 var(--fm);letter-spacing:.09em;text-transform:uppercase;color:var(--mute);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.eyebrow i{width:18px;height:1px;background:var(--mute2)}
.eyebrow .coord{margin-left:auto;color:var(--mute2)}
.h1{margin:0;font-weight:800;font-size:clamp(46px,min(6.4vw,11vh),112px);line-height:.9;letter-spacing:-.052em;font-variation-settings:"wdth" 112}
.h1 em,.post-title em,.cta-h em,.foot-lede em,.sec-h em{font-family:var(--fs);font-style:italic;font-weight:400;letter-spacing:-.015em}
.h1 em{font-size:1.1em;color:var(--neon);text-shadow:0 0 44px rgba(57,255,20,.28)}
.h1--s{font-size:clamp(38px,4.8vw,78px)}
.lede{max-width:54ch;font-size:17px;line-height:1.55;color:var(--mute);margin:0}
.lede p{margin:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chipb{display:inline-flex;align-items:center;gap:7px;font:500 13px/1 var(--fd);padding:10px 14px;border-radius:999px;color:var(--ink);text-decoration:none;box-shadow:inset 0 0 0 1px rgba(241,243,234,.22);transition:background-color .3s,color .3s,box-shadow .3s}
.chipb span{font:500 10px var(--fm);color:var(--mute)}
.chipb:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.chipb[aria-current]{background:var(--neon);color:var(--black);box-shadow:none}
.chipb[aria-current] span{color:rgba(10,11,9,.6)}

/* tuile CTA (néon) */
.cta{display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:280px;padding:18px 18px 20px;text-decoration:none;transition:transform .8s var(--eo)}
.cta-h{font:800 clamp(36px,3.5vw,60px)/.9 var(--fd);letter-spacing:-.055em;font-variation-settings:"wdth" 116;margin:0}
.cta-foot{display:flex;flex-wrap:wrap;gap:6px;padding-right:100px;font:500 11px var(--fm);color:var(--s-mute);margin:0}
.cta-go{position:absolute;right:16px;bottom:16px;width:78px;aspect-ratio:1;border-radius:50%;background:#0A0B09;color:var(--neon);display:grid;place-items:center;transform:rotate(-45deg);transition:transform .8s var(--spring)}
.cta:hover .cta-go{transform:rotate(0) scale(1.07)}

/* flux d'articles */
.feed{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:row dense;gap:var(--gap);margin-top:var(--gap)}
.card{grid-column:span 4;display:flex;flex-direction:column;padding:0;min-height:100%}
.card--lead{grid-column:1/-1;flex-direction:row;align-items:stretch}
.card--lead .card-media{flex:0 0 62%;margin:8px;aspect-ratio:16/9}
.card--lead .card-body{padding:30px 30px 26px 18px;justify-content:flex-end;gap:16px}
.card--lead .card-title em{display:block;margin-top:.08em}
.card-media{margin:8px 8px 0;border-radius:15px;overflow:hidden;aspect-ratio:16/9;background:var(--g2)}
.card-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--eo)}
.card:hover .card-media img{transform:scale(1.035)}
.card-body{flex:1;display:flex;flex-direction:column;gap:12px;padding:16px 18px 18px}
.card-title{margin:0;font-weight:700;font-size:22px;line-height:1.12;letter-spacing:-.025em;font-variation-settings:"wdth" 104;text-wrap:balance}
.card--lead .card-title{font-size:clamp(28px,3vw,46px);font-weight:800;line-height:1;letter-spacing:-.04em;font-variation-settings:"wdth" 108}
.card--lead .card-title em{font-family:var(--fs);font-style:italic;font-weight:400;color:var(--neon);letter-spacing:-.01em}
.card-link{text-decoration:none}
.card-link::after{content:"";position:absolute;inset:0;z-index:1}
.card-ex{margin:0;font-size:14.5px;line-height:1.5;color:var(--s-mute);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card--lead .card-ex{font-size:16px;max-width:60ch}
.card .t-arrow{margin-top:auto;align-self:flex-end}
.card:hover .t-arrow{background:var(--s-ink);color:var(--s-bg);transform:rotate(45deg)}
.t-date{margin-left:auto}
.empty{margin-top:var(--gap);padding:40px 28px}
.filler{display:flex;flex-direction:column;gap:18px;padding:22px 22px 24px;min-height:320px}
.filler-h{margin:auto 0 0;font:800 clamp(28px,2.6vw,42px)/.98 var(--fd);letter-spacing:-.045em;font-variation-settings:"wdth" 110;max-width:14ch}
.filler-h em{font-family:var(--fs);font-weight:400;font-style:italic;letter-spacing:-.01em}
.chips--bone .chipb{color:#0A0B09;box-shadow:inset 0 0 0 1px rgba(10,11,9,.28)}
.chips--bone .chipb span{color:#5E625A}
.chips--bone .chipb:hover{background:#0A0B09;color:var(--neon)}

/* pagination, recherche */
.pager{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:28px 0 10px}
.pager .page-numbers{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 14px;border-radius:999px;color:var(--ink);text-decoration:none;box-shadow:inset 0 0 0 1px rgba(241,243,234,.22);font:500 13px var(--fm)}
.pager .current{background:var(--neon);color:var(--black);box-shadow:none}
.sform{display:flex;gap:8px;max-width:520px}
.sform input{flex:1;min-width:0;height:48px;border-radius:999px;border:0;background:var(--g1);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);padding:0 20px}
.sform input:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--neon)}

/* article */
.progress{position:fixed;inset:0 0 auto;height:3px;z-index:100;pointer-events:none}
.progress i{display:block;height:100%;background:var(--neon);transform-origin:0 50%;transform:scaleX(var(--p,0));box-shadow:0 0 12px rgba(57,255,20,.6)}
.post-head{padding:30px 8px 30px;max-width:1180px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;font:500 10.5px/1.4 var(--fm);letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--mute2)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs [aria-current] span{color:var(--mute2);display:inline-block;max-width:42ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.post-kick{display:flex;align-items:center;gap:12px;margin:26px 0 18px;font:500 11px var(--fm);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.post-title{margin:0;font-weight:800;font-size:clamp(38px,4.9vw,80px);line-height:.95;letter-spacing:-.048em;font-variation-settings:"wdth" 108;max-width:21ch;text-wrap:balance}
.post-title em{display:block;color:var(--neon);font-size:1.02em;margin-top:.06em;text-shadow:0 0 44px rgba(57,255,20,.22)}
.post-dek{margin:24px 0 0;max-width:62ch;font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--mute)}
.post-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin:26px 0 0;font:500 11.5px var(--fm);color:var(--mute);letter-spacing:.02em}
.post-meta b{color:var(--ink);font-weight:500}
.post-meta .upd{color:var(--ink)}
.post-meta .upd::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--neon);margin-right:8px;vertical-align:1px}
.post-cover{margin:0;border-radius:var(--r);overflow:hidden;background:var(--g1)}
.post-cover img{display:block;width:100%;aspect-ratio:16/9;max-height:78vh;object-fit:cover}
.post-cover figcaption{font:500 11px var(--fm);color:var(--mute);padding:10px 16px}
.post-layout{display:grid;grid-template-columns:minmax(230px,3fr) minmax(0,9fr);gap:var(--gap);margin-top:var(--gap);align-items:start}
.post-layout--solo{grid-template-columns:minmax(0,1fr)}
.post-side-in{position:sticky;top:14px;display:flex;flex-direction:column;gap:var(--gap)}
.toc{background:var(--g1);border-radius:var(--r);padding:18px 18px 10px}
.toc-l{margin:0 0 10px;font:500 10px var(--fm);letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.toc ol{list-style:none;margin:0;padding:0}
.toc a{display:flex;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px;line-height:1.35;color:var(--mute);text-decoration:none;transition:color .3s}
.toc a span{flex:none;min-width:18px;font:500 10px/1.9 var(--fm);color:var(--mute2);transition:color .3s}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink)}
.toc a.on span{color:var(--neon)}
.share{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:var(--g1);border-radius:var(--r);padding:14px 16px}
.share .lbl{width:100%;font:500 10px var(--fm);letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.share a,.share button{appearance:none;border:0;background:none;cursor:pointer;font:500 12px/1 var(--fd);color:var(--ink);padding:8px 11px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(241,243,234,.2);text-decoration:none}
.share a:hover,.share button:hover{box-shadow:inset 0 0 0 1px var(--neon);color:var(--neon)}
.post-body{padding:clamp(26px,5vw,76px) clamp(20px,5.5vw,92px);overflow:visible}
.post-body::before{display:none}
.post-tags{max-width:720px;margin:36px auto 0;display:flex;flex-wrap:wrap;gap:6px 14px;font:500 12px var(--fm);color:#5E625A}
.post-end{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);margin-top:var(--gap)}
.author{grid-column:span 7;display:flex;gap:20px;align-items:flex-start;padding:26px}
.author-mark{flex:none;width:58px;height:58px;border-radius:50%;background:var(--black);box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;color:var(--neon)}
.author-svg{width:30px}
.author-name{margin:10px 0 8px;font:700 22px/1.1 var(--fd);letter-spacing:-.025em}
.author-bio{margin:0;font-size:15px;line-height:1.6;color:var(--mute);max-width:62ch}
.post-cta{grid-column:span 5;min-height:240px}
.related{margin-top:22px}
.sec-h{margin:28px 8px 16px;font:800 clamp(28px,2.8vw,44px)/1 var(--fd);letter-spacing:-.045em;font-variation-settings:"wdth" 110}
.feed--3{margin-top:0}

/* ===== contenu éditorial (sur papier « os ») ===== */
.entry{max-width:720px;margin:0 auto;font-size:18.5px;line-height:1.72;color:#23261F;counter-reset:h2;font-variation-settings:"wdth" 100}
.entry>*:first-child{margin-top:0}
.entry p{margin:0 0 1.15em}
.entry h2{counter-increment:h2;margin:2.3em 0 .75em;font-weight:800;font-size:clamp(28px,2.7vw,40px);line-height:1.04;letter-spacing:-.036em;color:#0A0B09;font-variation-settings:"wdth" 108;text-wrap:balance;scroll-margin-top:20px}
.entry h2::before{content:"§" counter(h2,decimal-leading-zero);display:block;padding-top:18px;margin-bottom:16px;border-top:1.5px solid #0A0B09;font:500 11px/1 var(--fm);letter-spacing:.12em;color:#5E625A}
.entry h3{margin:1.9em 0 .5em;font-weight:700;font-size:23px;line-height:1.22;letter-spacing:-.022em;color:#0A0B09;scroll-margin-top:20px}
.entry h4{margin:1.6em 0 .4em;font:600 12px/1.4 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:#0A0B09}
.entry a{color:#0A0B09;text-decoration:underline;text-decoration-color:var(--neon);text-decoration-thickness:.2em;text-underline-offset:.14em;text-decoration-skip-ink:none;transition:background-color .25s}
.entry a:hover{background:var(--neon)}
.entry strong{font-weight:700;color:#0A0B09}
.entry mark{background:var(--neon);color:#0A0B09;padding:0 .15em}
.entry ul,.entry ol{margin:0 0 1.3em;padding-left:1.25em}
.entry li{margin:.45em 0;padding-left:.2em}
.entry ul{list-style:square}
.entry ul li::marker{color:#0A0B09}
.entry ol li::marker{font:600 .8em var(--fm);color:#0A0B09}
.entry code{font:500 .86em var(--fm);background:rgba(10,11,9,.07);padding:.12em .38em;border-radius:6px}
.entry hr,.entry .wp-block-separator{border:0;height:1.5px;background:rgba(10,11,9,.16);margin:2.6em 0}
.entry blockquote,.entry .wp-block-quote{margin:2em 0;padding:0 0 0 24px;border-left:3px solid #0A0B09}
.entry blockquote p{font:italic 400 clamp(24px,2.3vw,31px)/1.25 var(--fs);color:#0A0B09;letter-spacing:-.01em;margin:0 0 .4em}
.entry blockquote cite,.entry .wp-block-quote cite{font:500 12px var(--fm);font-style:normal;color:#5E625A}
.entry img{border-radius:16px}
.entry figure{margin:2em 0}
.entry figcaption,.entry .wp-element-caption{margin-top:10px;font:500 12px/1.5 var(--fm);color:#5E625A;text-align:left}

/* tableaux */
.entry .wp-block-table{margin:2em 0;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:16px;box-shadow:inset 0 0 0 1px rgba(10,11,9,.13)}
.entry table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45;font-variant-numeric:tabular-nums}
.entry thead{border:0}
.entry th{background:#0A0B09;color:var(--bone);text-align:left;font:600 10.5px/1.3 var(--fm);letter-spacing:.07em;text-transform:uppercase;padding:13px 14px;border:0}
.entry td{padding:12px 14px;border:0;border-bottom:1px solid rgba(10,11,9,.12);vertical-align:top}
.entry tbody tr:last-child td{border-bottom:0}
.entry tbody tr:nth-child(even) td{background:rgba(10,11,9,.035)}
.entry td:first-child{font-weight:600;color:#0A0B09}
.entry .wp-block-table figcaption{padding:0 14px 12px}
.entry .is-style-fl-compare td:last-child{font-weight:600}

/* FAQ (bloc Détails) */
.entry .wp-block-details{border-top:1.5px solid rgba(10,11,9,.18);padding:16px 0;margin:0}
.entry .wp-block-details:last-of-type{border-bottom:1.5px solid rgba(10,11,9,.18)}
.entry .wp-block-details summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font-weight:700;font-size:19px;line-height:1.3;color:#0A0B09;letter-spacing:-.015em}
.entry .wp-block-details summary::-webkit-details-marker{display:none}
.entry .wp-block-details summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(10,11,9,.3);display:grid;place-items:center;font:500 16px/1 var(--fm);transition:transform .4s var(--eo)}
.entry .wp-block-details[open] summary::after{transform:rotate(45deg);background:#0A0B09;color:var(--neon);box-shadow:none}
.entry .wp-block-details>*:not(summary){margin-top:12px}
.entry .wp-block-details p:last-child{margin-bottom:0}

/* composants Foldline (styles de blocs) */
.entry .is-style-fl-tldr{background:#0A0B09;color:#D9DCD2;border-radius:20px;padding:26px 28px 14px;margin:0 0 2.2em;font-size:16.5px;line-height:1.6}
.entry .is-style-fl-tldr>p:first-child{font:500 10.5px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--neon);margin-bottom:16px}
.entry .is-style-fl-tldr strong{color:#fff}
.entry .is-style-fl-tldr a{color:#fff}
.entry .is-style-fl-tldr ul{list-style:none;padding:0}
.entry .is-style-fl-tldr li{position:relative;padding-left:26px;margin:.6em 0}
.entry .is-style-fl-tldr li::before{content:"";position:absolute;left:2px;top:.62em;width:10px;height:10px;border-radius:2px;background:var(--neon);transform:rotate(45deg)}
.entry .is-style-fl-note{border:1.5px dashed rgba(10,11,9,.35);border-radius:18px;padding:22px 24px 8px;margin:2em 0;background:rgba(255,255,255,.35);font-size:16.5px}
.entry .is-style-fl-warn{background:var(--neon);color:#0A0B09;border-radius:18px;padding:22px 24px 8px;margin:2em 0;font-size:16.5px}
.entry .is-style-fl-note>p:first-child,.entry .is-style-fl-warn>p:first-child{font:600 10.5px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.entry .is-style-fl-warn a{text-decoration-color:#0A0B09}
.entry .is-style-fl-warn a:hover{background:#0A0B09;color:var(--neon)}
.entry .is-style-fl-check{list-style:none;padding:0}
.entry .is-style-fl-check li{position:relative;padding-left:32px}
.entry .is-style-fl-check li::before{content:"";position:absolute;left:0;top:.28em;width:20px;height:20px;border-radius:50%;background:#0A0B09 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14.5 7' fill='none' stroke='%2339FF14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
.entry .is-style-fl-steps{list-style:none;padding:0;counter-reset:st}
.entry .is-style-fl-steps>li{counter-increment:st;position:relative;padding:0 0 0 54px;margin:0 0 1.1em;min-height:38px}
.entry .is-style-fl-steps>li::before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:.1em;width:38px;height:38px;border-radius:50%;background:#0A0B09;color:var(--neon);display:grid;place-items:center;font:600 12px/1 var(--fm)}

/* infographies SVG en ligne */
.entry .fl-fig{background:#0A0B09;border-radius:20px;padding:clamp(14px,2.4vw,28px);margin:2.2em calc(-1*min(4vw,56px))}
.entry .fl-fig svg{display:block;width:100%;height:auto}
.entry .fl-fig figcaption{color:#8C9087;margin-top:14px}
.entry .fl-fig.is-zoom{position:fixed;inset:0;z-index:150;margin:0;border-radius:0;overflow:auto;padding:56px 16px 24px;-webkit-overflow-scrolling:touch}
.entry .fl-fig.is-zoom svg{width:1000px;max-width:none}
.fl-zoom-x{display:none}
.is-zoom .fl-zoom-x{display:grid;position:fixed;top:10px;right:12px;z-index:151;width:40px;height:40px;border-radius:50%;border:0;background:var(--neon);color:#0A0B09;place-items:center;font:600 18px/1 var(--fm);cursor:pointer}
.entry .fl-cta{background:#0A0B09;color:var(--ink);border-radius:20px;padding:24px 26px;margin:2.4em 0;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.entry .fl-cta p{margin:0;font-weight:600;font-size:19px;line-height:1.3;letter-spacing:-.015em;max-width:40ch}
.entry .fl-cta p em{font-family:var(--fs);font-weight:400;color:var(--neon);font-size:1.1em}
.entry .fl-cta a,.entry .wp-block-button__link{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;background:var(--neon);color:#0A0B09;font:600 14px/1 var(--fd);text-decoration:none;white-space:nowrap}
.entry .fl-cta a:hover,.entry .wp-block-button__link:hover{background:var(--bone);color:#0A0B09}
.entry .fl-chat{background:#0A0B09 radial-gradient(circle at 1px 1px,rgba(241,243,234,.06) 1px,transparent 0) 0 0/14px 14px;border-radius:20px;padding:18px;margin:1.8em 0;display:flex;flex-direction:column;gap:10px}
.entry .fl-msg{margin:0;max-width:88%;align-self:flex-start;background:#1A1C17;color:#F1F3EA;border-radius:4px 16px 16px 16px;padding:12px 14px;font-size:16px;line-height:1.55}
.entry .fl-msg[dir="auto"]:lang(ar),.entry .fl-msg:dir(rtl){align-self:flex-end;border-radius:16px 4px 16px 16px;text-align:right}
.entry .fl-sources{font-size:14px;line-height:1.55;color:#5E625A}
.entry .fl-sources li{margin:.35em 0}
.entry .fl-sources a{text-decoration-thickness:1px;text-decoration-color:rgba(10,11,9,.4);word-break:break-word}
.entry .wp-block-buttons{display:flex;flex-wrap:wrap;gap:10px;margin:1.6em 0}
.entry .wp-block-columns{display:flex;gap:24px;flex-wrap:wrap}
.entry .wp-block-column{flex:1 1 240px;min-width:0}

/* pied de page */
.foot{margin-top:22px}
.foot-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.foot-brand{grid-column:span 4;padding:24px;display:flex;flex-direction:column;gap:14px}
.foot-logo{width:150px;color:var(--ink)}
.foot-lede{margin:6px 0 0;font:800 30px/1 var(--fd);letter-spacing:-.045em;font-variation-settings:"wdth" 112}
.foot-lede em{color:var(--neon)}
.foot-brand .muted{margin:0;font-size:14px;line-height:1.55;max-width:40ch}
.foot-links{grid-column:span 2;padding:22px}
.foot-links ul{list-style:none;margin:14px 0 0;padding:0}
.foot-links li a{display:block;padding:6px 0;color:var(--mute);text-decoration:none;font-size:14px;transition:color .3s}
.foot-links li a:hover{color:var(--ink)}
.foot-cta{grid-column:span 4;min-height:260px}
.foot-line{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin:0;padding:18px 8px 6px;font:500 11px var(--fm);color:var(--mute);letter-spacing:.03em}

.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ===== responsive ===== */
@media (max-width:1199px){
  .status .hide-s{display:none}
}
@media (max-width:1023px){
  :root{--pad:14px}
  .status{display:none}
  .nav{margin-left:auto}
  .jr-intro,.jr-cta{grid-column:1/-1}
  .jr-cta{min-height:220px}
  .card{grid-column:span 6}
  .card--lead{flex-direction:column}
  .card--lead .card-media{flex:none;margin:8px 8px 0}
  .card--lead .card-body{padding:16px 18px 18px}
  .filler{grid-column:1/-1!important;min-height:0}
  .post-layout{grid-template-columns:minmax(0,1fr)}
  .post-side-in{position:static}
  .post-side{order:0}
  .author,.post-cta{grid-column:1/-1}
  .foot-brand,.foot-cta{grid-column:1/-1}
  .foot-links{grid-column:span 6}
  .entry .fl-fig{margin-inline:-8px}
}
@media (max-width:700px){
  .hide-s{display:none}
  .top{gap:10px;height:58px}
  .logo-sub{padding-left:10px}
  .nav .btn{padding:0 14px;font-size:12.5px}
  .nav .btn .ar{display:none}
  .card{grid-column:1/-1}
  .jr-intro{padding:18px 4px 12px;gap:18px}
  .h1{font-size:clamp(42px,12.5vw,70px)}
  .post-head{padding:18px 4px 22px}
  .post-title{font-size:clamp(34px,10vw,52px)}
  .post-body{padding:26px 18px 34px;border-radius:18px}
  .entry{font-size:17.5px;line-height:1.68}
  .entry table{min-width:560px}
  .entry .fl-fig{margin-inline:-12px;border-radius:16px;padding:12px;cursor:zoom-in}
  .entry .fl-fig:not(.is-zoom) figcaption::before{content:"Toucher pour agrandir ↗";display:block;color:var(--neon);margin-bottom:6px}
  .entry .is-style-fl-tldr{padding:22px 20px 10px}
  .cta-go{width:62px}
  .foot-links{grid-column:1/-1}
  .author{flex-direction:column;padding:22px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  html{scroll-behavior:auto}
}
@media print{
  .top,.foot,.post-side,.progress,.grain,.related,.post-end{display:none!important}
  body{background:#fff;color:#000}
  .post-body{background:#fff!important;padding:0}
  .entry .fl-fig{break-inside:avoid}
}

/* ================================================================
   v1.1 — le blog reprend la page d'accueil du site
   (même en-tête, même grille en tuiles, mêmes illustrations)
   ================================================================ */
.status b{color:var(--ink);font-weight:500}
.status .clk{color:var(--ink);font-variant-numeric:tabular-nums}
.status.off .pulse{background:#FFB020;animation:none}
.nav .jl{display:inline-flex;align-items:center;height:40px;padding:0 12px;font:500 13px var(--fd);color:var(--mute);text-decoration:none;border-radius:999px;transition:color .3s}
.nav .jl:hover,.nav .jl:focus-visible,.nav .jl.on{color:var(--neon)}
.nav .nda-b{gap:7px}
.nda-ico{flex:none}
.cta-s{display:none}

/* héro en tuiles (accueil du blog, page 1) */
.jr-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:var(--gap);height:clamp(540px,calc(100svh - 72px),780px);margin-top:2px}
.jr-bento .jr-intro{grid-column:1/7;grid-row:1/3;padding:14px 22px 8px 8px;justify-content:space-between;gap:16px}
.jr-bento .h1{font-size:clamp(46px,min(5.6vw,10vh),104px)}
.hero-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px}
.btns{display:flex;flex-wrap:wrap;gap:8px}
.stats{display:flex;gap:26px}
.stat b{display:block;font:700 30px/1 var(--fd);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:6px;font:500 10px var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}

/* tuiles « thèmes » : mêmes places, surfaces et dessins que les métiers de la page d'accueil */
.th{display:flex;flex-direction:column;justify-content:space-between;gap:8px;text-decoration:none;transition:box-shadow .4s var(--eo),transform .8s var(--eo)}
.th .t-top{justify-content:space-between;flex-wrap:nowrap}
.th .tag{white-space:nowrap}
.th .illo{flex:1;min-height:0;display:grid;place-items:center;padding:4px 6px}
.th .illo svg{display:block;width:100%;height:100%;max-height:170px}
.th .t-name{display:block;font:700 22px/1.05 var(--fd);letter-spacing:-.03em}
.th .t-teaser{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:6px;font-size:12.5px;line-height:1.4;color:var(--s-mute)}
.th .t-teaser b{font:500 10px var(--fm);letter-spacing:.07em;text-transform:uppercase;color:var(--s-acc);margin-right:4px}
.th:hover{box-shadow:inset 0 0 0 1.5px var(--neon)}
.th.s-bone:hover{box-shadow:inset 0 0 0 1.5px #0A0B09}
.th:hover .t-arrow{background:var(--s-ink);color:var(--s-bg);transform:rotate(45deg)}
.jr-bento .th:nth-of-type(1){grid-column:7/9;grid-row:1}
.jr-bento .th:nth-of-type(2){grid-column:9/11;grid-row:1}
.jr-bento .th:nth-of-type(3){grid-column:11/13;grid-row:1}
.jr-bento .th:nth-of-type(4){grid-column:7/9;grid-row:2}
.jr-bento .th:nth-of-type(5){grid-column:9/11;grid-row:2}
.jr-bento .th:nth-of-type(6){grid-column:11/13;grid-row:2}
.th .ill-pen{fill:var(--s-ink)}

/* 1re rangée du flux : article à la une + tuile projet, comme la rangée basse de l'accueil */
.feed .card--lead.card--duo{grid-column:1/10}
.feed .cta--feed{grid-column:10/13;min-height:0}
.card--lead .card-media{flex:0 0 56%;align-self:center} /* garde le 16:9 : l’image n’est jamais rognée */

@media (max-width:1199px){
  .logo small{display:none}
  .feed .card--lead.card--duo{flex-direction:column}
  .card--duo .card-media{flex:none;margin:8px 8px 0}
  .card--duo .card-body{padding:16px 18px 18px}
}
@media (min-width:1024px) and (max-height:760px){
  .jr-bento .lede{display:none}
}
@media (max-width:1023px){
  .jr-bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;height:auto}
  .jr-bento .jr-intro{grid-column:1/-1;grid-row:auto;padding:22px 2px 18px;gap:20px}
  .jr-bento .th:nth-of-type(n){grid-column:auto;grid-row:auto;aspect-ratio:1/1.02}
  .feed .card--lead.card--duo,.feed .cta--feed{grid-column:1/-1}
  .feed .cta--feed{min-height:220px}
}
@media (max-width:700px){
  .nav .nda-b{padding:0 12px}
  .nda-l{display:none}
  .stats{gap:18px}
  .stat b{font-size:26px}
  .th{padding:14px}
  .th .t-name{font-size:18px}
  .th .t-teaser{display:none}
}
@media (max-width:400px){
  .cta-l{display:none}
  .cta-s{display:inline}
  .nav{gap:4px}
  .nav .jl{padding:0 6px}
}


/* === Géométrie commune accueil / blog === */

@media (min-width:1024px){

  /*
   * Les deux rangées de catégories occupent la même hauteur
   * que les deux premières rangées de l'accueil.
   */
  .jr-bento{
    margin-top:0;
    height:calc(68.965517svh - 53.448276px);
    min-height:0;
    max-height:none;
  }

  .jr-bento .jr-intro{
    gap:12px;
  }

  .jr-bento .h1{
    font-size:clamp(40px,min(5.4vw,8vh),108px);
  }

  .jr-bento .lede{
    max-width:48ch;
    font-size:15px;
    line-height:1.55;
  }


  /*
   * Même métrique interne que les cartes métiers
   * de la page d'accueil.
   */
  .th{
    justify-content:flex-start;
    gap:0;
  }

  .th .t-top{
    min-height:28px;
  }

  .th .t-arrow{
    width:28px;
    height:28px;
  }

  .th .illo{
    position:relative;
    flex:1;
    min-height:0;
    margin:4px -6px;
    padding:0;
    display:block;
  }

  .th .illo svg{
    position:absolute;
    left:50%;
    top:50%;
    width:200px;
    height:130px;
    max-width:none;
    max-height:none;
    transform:translate(-50%,-50%);
    overflow:visible;
  }

  .th .meta{
    position:relative;
    height:62px;
    overflow:hidden;
    flex:none;
    display:block;
  }

  .th .t-name{
    position:absolute;
    left:0;
    right:0;
    top:39px;
    font:700 21px/23px var(--fd);
    letter-spacing:-.025em;

    transition:
      transform
      .7s
      var(--eo);
  }

  .th .t-teaser{
    position:absolute;
    left:0;
    right:0;
    top:27px;

    margin:0;

    font-size:12px;
    line-height:17px;
    color:var(--s-mute);

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;

    transform:translateY(39px);
    opacity:0;

    transition:
      transform .7s var(--eo),
      opacity .5s;
  }

  .th:hover .t-name,
  .th:focus-visible .t-name{
    transform:translateY(-39px);
  }

  .th:hover .t-teaser,
  .th:focus-visible .t-teaser{
    transform:none;
    opacity:1;
  }
}
/* Foldline 1.1.13 · blog pixel-mirror responsive du studio */

@media (min-width:1024px) and (min-height:600px){
  /* Même largeur physique, même viewport utile, même grille 12×3 que l'agence. */
  body.home{
    overflow-x:hidden;
    scrollbar-width:none;
  }
  body.home::-webkit-scrollbar{width:0;height:0}

  body.home .app{
    width:100%;
    max-width:none;
    margin:0;
    padding:0 var(--pad) var(--pad);
    box-sizing:border-box;
  }

  body.home .main{min-width:0}

  body.home .fl-blog-stage{
    height:calc(100vh - 72px);
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-template-rows:1fr 1fr .9fr;
    gap:var(--gap);
    min-width:0;
    min-height:0;
    margin:0;
  }

  body.home .fl-blog-stage > *{min-width:0;min-height:0}

  /* ------------------------------------------------------------------
     HERO BLOG = mêmes métriques que .grid>.hero de l'agence.
     Aucun ajustement "proche" : les valeurs sont reprises à l'identique.
     ------------------------------------------------------------------ */
  body.home .fl-blog-stage .jr-intro{
    grid-column:1/7;
    grid-row:1/3;
    position:relative;
    background:transparent;
    cursor:default;
    padding:14px 22px 8px 8px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:12px;
  }
  body.home .fl-blog-stage .jr-intro::before,
  body.home .fl-blog-stage .jr-intro::after{display:none}

  /* Champ de points : même masque final que l'agence. */
  body.home .fl-blog-stage .fl-blog-dots{
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    width:100%;
    height:100%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0 48%,#000 80%);
    mask-image:linear-gradient(90deg,transparent 0 48%,#000 80%);
  }

  body.home .fl-blog-stage .eyebrow{
    font:500 11px/1.3 var(--fm);
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--mute);
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
  }
  body.home .fl-blog-stage .eyebrow i{width:18px;height:1px;background:var(--mute2)}

  body.home .fl-blog-stage .h1{
    margin:0;
    font-weight:800;
    font-size:clamp(40px,min(5.2vw,8.3vh),108px);
    line-height:.9;
    letter-spacing:-.05em;
    font-variation-settings:"wdth" 112;
  }
  body.home .fl-blog-stage .h1 .ln{
    display:block;
    clip-path:inset(-30% -10% 0 -10%);
    padding-bottom:.14em;
    margin-bottom:-.14em;
    cursor:default;
    width:max-content;
    max-width:100%;
  }
  body.home .fl-blog-stage .h1 .ln>span{display:inline-block}
  body.home .fl-blog-stage .h1 em{
    font-family:var(--fs);
    font-style:italic;
    font-weight:400;
    letter-spacing:-.015em;
    font-size:1.14em;
    color:var(--mute2);
  }

  body.home .fl-blog-stage .lede{
    max-width:48ch;
    font-size:15px;
    line-height:1.55;
    color:var(--mute);
    margin:0;
  }
  body.home .fl-blog-stage .lede b{color:var(--ink);font-weight:500}

  body.home .fl-blog-stage .path{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    align-items:stretch;
    max-width:660px;
  }
  body.home .fl-blog-stage .path li{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:3px;
    padding:8px 14px 8px 0;
    cursor:default;
    position:relative;
    min-width:0;
  }
  body.home .fl-blog-stage .path li+li{padding-left:24px}
  body.home .fl-blog-stage .path li+li::before{
    content:"";
    position:absolute;
    left:5px;
    top:8px;
    height:30px;
    width:1.5px;
    background:var(--mute2);
    transform:skewX(-28deg);
  }
  body.home .fl-blog-stage .path .pi{
    font:500 10px var(--fm);
    letter-spacing:.08em;
    color:var(--mute2);
  }
  body.home .fl-blog-stage .path b{
    font:700 17px/1.1 var(--fd);
    letter-spacing:-.02em;
    color:var(--mute);
  }
  body.home .fl-blog-stage .path .pd{
    font-size:12px;
    line-height:1.35;
    color:var(--mute2);
  }
  body.home .fl-blog-stage .path li.on .pi{color:var(--neon)}
  body.home .fl-blog-stage .path li.on b{color:var(--ink)}
  body.home .fl-blog-stage .path li.on .pd{color:var(--mute)}

  body.home .fl-blog-stage .prof{display:flex;flex-direction:column;gap:10px}
  body.home .fl-blog-stage .prof-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  body.home .fl-blog-stage .lbl{
    font:500 10.5px var(--fm);
    text-transform:uppercase;
    letter-spacing:.09em;
    color:var(--mute);
  }
  body.home .fl-blog-stage .seg{
    position:relative;
    display:inline-flex;
    flex-wrap:nowrap;
    gap:2px;
    padding:3px;
    border-radius:999px;
    background:var(--g1);
    box-shadow:inset 0 0 0 1px var(--line);
  }
  body.home .fl-blog-stage .seg a{
    display:inline-flex;
    align-items:center;
    position:relative;
    z-index:1;
    color:var(--ink);
    text-decoration:none;
    font:500 13px/1 var(--fd);
    padding:10px 15px;
    border-radius:999px;
    white-space:nowrap;
    transition:color .4s;
  }
  body.home .fl-blog-stage .seg a:hover{color:var(--neon)}
  body.home .fl-blog-stage .seg-pill{
    position:absolute;
    z-index:0;
    left:0;top:0;width:0;height:0;
    border-radius:999px;
    background:var(--neon);
    opacity:0;
  }

  body.home .fl-blog-stage .prof-msg{
    font:400 12.5px/1.45 var(--fm);
    color:var(--mute);
    min-height:1.45em;
    margin:0;
  }
  body.home .fl-blog-stage .prof-msg .guide{
    appearance:none;
    border:0;
    background:none;
    padding:0;
    color:var(--neon);
    text-decoration:none;
    font:500 12.5px/1.45 var(--fm);
  }

  body.home .fl-blog-stage .hero-foot{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
  }
  body.home .fl-blog-stage .btns{display:flex;gap:8px;flex-wrap:wrap}
  body.home .fl-blog-stage .stats{display:flex;gap:24px}
  body.home .fl-blog-stage .stat b{
    display:block;
    font:700 30px/1 var(--fd);
    font-variation-settings:"wdth" 120;
    letter-spacing:-.03em;
    font-variant-numeric:tabular-nums;
  }
  body.home .fl-blog-stage .stat span{
    display:block;
    margin-top:6px;
    font:500 9.5px var(--fm);
    color:var(--mute);
    text-transform:uppercase;
    letter-spacing:.08em;
  }

  /* ------------------------------------------------------------------
     SIX CARTES = coordonnées + métriques internes exactes de l'agence.
     Les éléments partagés ne devront donc plus jamais être rescalés.
     ------------------------------------------------------------------ */
  body.home .fl-blog-stage .th{
    padding:16px;
    gap:0;
    justify-content:flex-start;
  }
  body.home .fl-blog-stage .th--design{grid-column:7/9;grid-row:1}
  body.home .fl-blog-stage .th--branding{grid-column:9/11;grid-row:1}
  body.home .fl-blog-stage .th--print{grid-column:11/13;grid-row:1}
  body.home .fl-blog-stage .th--packaging{grid-column:7/9;grid-row:2}
  body.home .fl-blog-stage .th--web{grid-column:9/11;grid-row:2}
  body.home .fl-blog-stage .th--ia{grid-column:11/13;grid-row:2}

  body.home .fl-blog-stage .th .t-top{
    min-height:28px;
    flex:none;
    flex-wrap:nowrap;
    gap:8px;
  }
  body.home .fl-blog-stage .th .tag{
    flex:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  body.home .fl-blog-stage .th .t-arrow{width:28px;height:28px}
  body.home .fl-blog-stage .th .illo{
    position:relative;
    flex:1;
    min-height:0;
    margin:4px -6px;
    padding:0;
    display:block;
  }
  body.home .fl-blog-stage .th .illo svg{
    position:absolute;
    left:50%;
    top:50%;
    width:200px;
    height:130px;
    max-width:none;
    max-height:none;
    transform:translate(-50%,-50%);
    overflow:visible;
  }
  body.home .fl-blog-stage .th .meta{
    position:relative;
    height:62px;
    overflow:hidden;
    flex:none;
    display:block;
  }
  body.home .fl-blog-stage .th .meta-in{
    transform:translateY(39px);
    transition:transform .7s var(--eo);
  }
  body.home .fl-blog-stage .th:hover .meta-in,
  body.home .fl-blog-stage .th:focus-visible .meta-in{transform:none}
  body.home .fl-blog-stage .th .t-name{
    display:block;
    font:700 21px/23px var(--fd);
    letter-spacing:-.025em;
    white-space:nowrap;
  }
  body.home .fl-blog-stage .th .t-teaser{
    margin-top:4px;
    font-size:12px;
    line-height:17px;
    color:var(--s-mute);
    opacity:0;
    transition:opacity .5s;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  body.home .fl-blog-stage .th:hover .t-teaser,
  body.home .fl-blog-stage .th:focus-visible .t-teaser{opacity:1}

  /* ------------------------------------------------------------------
     TROISIEME RANGEE.
     Article à la une = union Production + Blog ; CTA = même rectangle.
     ------------------------------------------------------------------ */
  body.home .fl-blog-stage > .card--lead.card--duo{
    grid-column:1/10;
    grid-row:3;
    height:100%;
    min-height:0;
    overflow:hidden;
    flex-direction:row;
    align-items:stretch;
  }
  body.home .fl-blog-stage > .card--lead.card--duo .card-media{
    flex:0 0 auto;
    align-self:center;
    height:calc(100% - 16px);
    width:auto;
    max-width:56%;
    aspect-ratio:16/9;
    margin:8px;
    background:var(--g2);
  }
  body.home .fl-blog-stage > .card--lead.card--duo .card-media img{
    width:100%;
    height:100%;
    object-fit:contain;
    transform:none!important;
  }
  body.home .fl-blog-stage > .card--lead.card--duo:hover .card-media img{transform:none!important}
  body.home .fl-blog-stage > .card--lead.card--duo .card-body{
    min-width:0;
    padding:20px 24px 18px 16px;
    justify-content:flex-end;
    gap:10px;
    overflow:hidden;
  }
  body.home .fl-blog-stage > .card--lead.card--duo .card-title{
    font-size:clamp(24px,2.45vw,40px);
    line-height:.96;
  }
  body.home .fl-blog-stage > .card--lead.card--duo .card-ex{
    font-size:13px;
    line-height:1.42;
    -webkit-line-clamp:2;
  }

  /* CTA BLOG = copie pixel-métrique de [data-k=brief] de l'accueil. */
  body.home .fl-blog-stage > .fl-stage-cta{
    grid-column:10/13;
    grid-row:3;
    height:100%;
    min-height:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    padding:16px;
    gap:0;
    justify-content:space-between;
    text-decoration:none;
    cursor:pointer;
    outline-offset:-3px;
    transition:transform .8s var(--eo),box-shadow .5s;
  }
  body.home .fl-blog-stage > .fl-stage-cta::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    padding:1px;
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(10,11,9,.8),transparent 70%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    opacity:0;
    transition:opacity .4s;
    pointer-events:none;
  }
  body.home .fl-blog-stage > .fl-stage-cta:hover::before,
  body.home .fl-blog-stage > .fl-stage-cta:hover::after{opacity:1}
  body.home .fl-blog-stage > .fl-stage-cta:active{transform:scale(.985)}
  body.home .fl-blog-stage > .fl-stage-cta .t-top{min-height:28px;margin:0}
  body.home .fl-blog-stage > .fl-stage-cta .cta-h{
    font:800 clamp(34px,min(3.7vw,6.6vh),78px)/.88 var(--fd);
    letter-spacing:-.055em;
    font-variation-settings:"wdth" 116;
    margin:0;
  }
  body.home .fl-blog-stage > .fl-stage-cta .cta-h em{
    font-family:var(--fs);
    font-weight:400;
    font-style:italic;
    letter-spacing:-.02em;
  }
  body.home .fl-blog-stage > .fl-stage-cta .cta-foot{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    padding-right:100px;
    font:500 11px var(--fm);
    color:var(--s-mute);
    margin:0;
  }
  body.home .fl-blog-stage > .fl-stage-cta .cta-go{
    position:absolute;
    right:16px;
    bottom:16px;
    width:clamp(56px,7.5vh,86px);
    aspect-ratio:1;
    border-radius:50%;
    background:#0A0B09;
    color:var(--neon);
    display:grid;
    place-items:center;
    transform:rotate(-45deg);
    transition:transform .8s var(--spring);
  }
  body.home .fl-blog-stage > .fl-stage-cta:hover .cta-go{transform:rotate(0) scale(1.07)}

  body.home .fl-blog-stage-empty{
    grid-column:1/10;
    grid-row:3;
    display:flex;
    align-items:flex-end;
  }

  body.home .feed--after-stage{margin-top:var(--gap)}
}

@media (min-width:1024px) and (max-height:760px){
  body.home .fl-blog-stage .path .pd{display:none}
}

@media (min-width:1024px) and (max-height:690px){
  body.home .fl-blog-stage .stats,
  body.home .fl-blog-stage .eyebrow{display:none}
}

/* ------------------------------------------------------------------
   RESPONSIVE = mêmes ruptures que le Studio, pas une approximation.
   Le Studio passe en grille compacte si largeur <=1023 OU hauteur <=599.
   ------------------------------------------------------------------ */
@media (max-width:1023px),(max-height:599px){
  :root{--pad:16px}

  body.home{
    overflow-x:hidden;
    overflow-y:auto;
  }
  body.home .app{
    width:100%;
    max-width:none;
    margin:0;
    padding:0 16px 16px;
    height:auto;
    min-height:100%;
    box-sizing:border-box;
  }
  body.home .top{
    height:60px;
    position:sticky;
    top:env(safe-area-inset-top,0px);
    z-index:40;
    background:rgba(10,11,9,.82);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    margin:0 -16px;
    padding:0 16px;
  }
  body.home .status{display:none}

  body.home .fl-blog-stage{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:none;
    height:auto;
    gap:var(--gap);
    min-width:0;
    min-height:0;
    margin:0;
  }
  body.home .fl-blog-stage > *{min-width:0;min-height:0}

  body.home .fl-blog-stage .jr-intro{
    grid-column:1/-1;
    grid-row:auto;
    padding:26px 2px 22px;
    gap:22px;
  }
  body.home .fl-blog-stage .h1{
    font-size:clamp(40px,11.5vw,84px);
  }

  /* 621–1023 px : exactement les cartes Studio 2 colonnes, ratio 1/1.1. */
  body.home .fl-blog-stage .th--design,
  body.home .fl-blog-stage .th--branding,
  body.home .fl-blog-stage .th--print,
  body.home .fl-blog-stage .th--packaging,
  body.home .fl-blog-stage .th--web,
  body.home .fl-blog-stage .th--ia{
    grid-column:auto;
    grid-row:auto;
    aspect-ratio:1/1.1;
  }
  body.home .fl-blog-stage .th{
    padding:16px;
    gap:0;
    justify-content:flex-start;
  }
  body.home .fl-blog-stage .th .t-top{
    min-height:28px;
    margin:0;
    gap:8px;
    flex-wrap:nowrap;
  }
  body.home .fl-blog-stage .th .t-arrow{
    width:28px;
    height:28px;
  }
  body.home .fl-blog-stage .th .illo{
    position:relative;
    flex:1;
    min-height:0;
    height:auto;
    margin:4px -6px;
    padding:0;
    display:block;
  }
  body.home .fl-blog-stage .th .illo svg{
    position:absolute;
    left:50%;
    top:50%;
    width:200px;
    height:130px;
    max-width:none;
    max-height:none;
    transform:translate(-50%,-50%);
  }
  body.home .fl-blog-stage .th .meta{
    position:relative;
    height:62px;
    overflow:hidden;
    flex:none;
    display:block;
  }
  body.home .fl-blog-stage .th .meta-in{
    transform:translateY(39px);
  }
  body.home .fl-blog-stage .th .t-name{
    font:700 21px/23px var(--fd);
    letter-spacing:-.025em;
  }
  body.home .fl-blog-stage .th .t-teaser{
    margin-top:4px;
    font-size:12px;
    line-height:17px;
  }

  body.home .fl-blog-stage > .card--lead.card--duo,
  body.home .fl-blog-stage > .fl-stage-cta,
  body.home .fl-blog-stage-empty{
    grid-column:1/-1;
    grid-row:auto;
    height:auto;
  }
  body.home .fl-blog-stage > .fl-stage-cta{min-height:250px}

  body.home .fl-blog-stage .path{display:none}
  body.home .fl-blog-stage .fl-blog-dots{display:none}
  body.home .fl-blog-stage .fl-blog-seg{flex-wrap:wrap}
}

/* Studio : lede masquée seulement sur desktop bas, même seuil. */
@media (min-width:1024px) and (min-height:600px) and (max-height:800px){
  body.home .fl-blog-stage .lede{display:none}
}
@media (min-width:1024px) and (min-height:600px) and (max-height:760px){
  body.home .fl-blog-stage .path .pd{display:none}
}
@media (min-width:1024px) and (min-height:600px) and (max-height:690px){
  body.home .fl-blog-stage .stats,
  body.home .fl-blog-stage .eyebrow{display:none}
}

/* <=620 px : même régime que .grid>.svc sur le Studio. */
@media (max-width:620px){
  body.home .fl-blog-stage .th--design,
  body.home .fl-blog-stage .th--branding,
  body.home .fl-blog-stage .th--print,
  body.home .fl-blog-stage .th--packaging,
  body.home .fl-blog-stage .th--web,
  body.home .fl-blog-stage .th--ia{
    aspect-ratio:auto;
  }
  body.home .fl-blog-stage .th{
    padding:16px;
  }
  body.home .fl-blog-stage .th .t-top .tag{
    display:none;
  }
  body.home .fl-blog-stage .th .illo{
    flex:none;
    height:clamp(116px,34vw,170px);
    margin:6px -16px 2px;
  }
  body.home .fl-blog-stage .th .t-name{
    font-size:17px;
    line-height:23px;
  }
  body.home .fl-blog-stage .th .t-teaser{
    display:none;
  }
  body.home .fl-blog-stage > .fl-stage-cta{
    min-height:250px;
  }
}

@media (max-width:370px){
  body.home .fl-blog-stage .prof-row .lbl{display:none}
  body.home .fl-blog-stage .prof .seg a{
    padding:8px 4px;
    font-size:11.5px;
  }
}
/* Foldline 1.1.14 · geometry lock du blog sur le Studio */

/*
 * Ce bloc ne touche pas l'accueil Studio.
 * Il verrouille le blog sur les métriques EXACTES des éléments partagés.
 */
@media (min-width:1024px) and (min-height:600px){
  body.home .fl-blog-stage .jr-intro{
    gap:14px;
  }

  /* Même champ de points / même masque que le héros Studio. */
  body.home .fl-blog-stage .fl-blog-dots{
    -webkit-mask-image:radial-gradient(ellipse 75% 85% at 88% 72%,#000 15%,transparent 72%);
    mask-image:radial-gradient(ellipse 75% 85% at 88% 72%,#000 15%,transparent 72%);
  }

  /* Même géométrie du sélecteur que les boutons du Studio. */
  body.home .fl-blog-stage .fl-blog-seg{
    flex-wrap:wrap;
    gap:2px;
    padding:3px;
  }
  body.home .fl-blog-stage .fl-blog-seg a{
    position:relative;
    z-index:1;
    display:block;
    appearance:none;
    border:0;
    background:none;
    color:var(--ink);
    font:500 13px/1 var(--fd);
    padding:10px 15px;
    border-radius:999px;
    cursor:pointer;
    white-space:nowrap;
    transition:color .4s;
  }

  /*
   * Cartes : même boîte .illo > .fit > svg que le Studio.
   * Aucun SVG n'est dimensionné directement par sa carte.
   */
  body.home .fl-blog-stage .th{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    gap:0;
    padding:16px;
    transition:transform .8s var(--eo),opacity .6s var(--eo),box-shadow .5s;
  }
  body.home .fl-blog-stage .th .illo{
    position:relative;
    flex:1;
    min-height:0;
    margin:4px -6px;
    padding:0;
    display:block;
  }
  body.home .fl-blog-stage .th .illo .fit{
    position:absolute;
    left:50%;
    top:50%;
    width:200px;
    height:130px;
    transform:translate(-50%,-50%) scale(var(--k,1));
  }
  body.home .fl-blog-stage .th .illo .fit svg{
    position:static;
    display:block;
    width:200px;
    height:130px;
    max-width:none;
    max-height:none;
    transform:none;
    overflow:visible;
  }

  /* Même état de repos interne. */
  body.home .fl-blog-stage .th .t-top{
    min-height:28px;
    margin:0;
    gap:8px;
    flex-wrap:nowrap;
  }
  body.home .fl-blog-stage .th .meta{
    position:relative;
    height:62px;
    overflow:hidden;
    flex:none;
  }
  body.home .fl-blog-stage .th .meta-in{
    transform:translateY(39px);
    transition:transform .7s var(--eo);
  }
  body.home .fl-blog-stage .th .t-name{
    display:block;
    font-weight:700;
    font-size:21px;
    line-height:23px;
    letter-spacing:-.025em;
    white-space:nowrap;
  }
  body.home .fl-blog-stage .th .t-teaser{
    margin-top:4px;
    font-size:12px;
    line-height:17px;
  }

  /*
   * CTA Blog = copie métrique de [data-k=brief] du Studio.
   * Le contenu peut différer, pas sa géométrie.
   */
  body.home .fl-blog-stage > .fl-stage-cta{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:0;
    min-height:0;
    padding:16px;
  }
  body.home .fl-blog-stage > .fl-stage-cta .t-top{
    min-height:28px;
    margin:0;
  }
  body.home .fl-blog-stage > .fl-stage-cta .cta-h{
    font:800 clamp(34px,min(3.7vw,6.6vh),78px)/.88 var(--fd);
    letter-spacing:-.055em;
    font-variation-settings:"wdth" 116;
    margin:0;
  }
  body.home .fl-blog-stage > .fl-stage-cta .cta-h em{
    font-family:var(--fs);
    font-weight:400;
    font-style:italic;
    letter-spacing:-.02em;
  }
  body.home .fl-blog-stage > .fl-stage-cta .cta-foot{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    padding-right:100px;
    font:500 11px var(--fm);
    color:var(--s-mute);
    margin:0;
  }
  body.home .fl-blog-stage > .fl-stage-cta .cta-go{
    position:absolute;
    right:16px;
    bottom:16px;
    width:clamp(56px,7.5vh,86px);
    aspect-ratio:1;
    border-radius:50%;
    background:#0A0B09;
    color:var(--neon);
    display:grid;
    place-items:center;
    transform:rotate(-45deg);
    transition:transform .8s var(--spring);
  }
}

/* Tablette : même wrapper d'illustration que le Studio. */
@media (max-width:1023px),(max-height:599px){
  body.home .fl-blog-stage .th .illo .fit{
    position:absolute;
    left:50%;
    top:50%;
    width:200px;
    height:130px;
    transform:translate(-50%,-50%) scale(var(--k,1));
  }
  body.home .fl-blog-stage .th .illo .fit svg{
    position:static;
    display:block;
    width:200px;
    height:130px;
    max-width:none;
    max-height:none;
    transform:none;
    overflow:visible;
  }
}
/* Foldline 1.1.15 · contrat géométrique mesuré Studio -> Blog
 * Source: audit navigateur 1440/1280/1024/820/390.
 * Ne touche pas à la page Studio.
 */

/* ------------------------------------------------------------------
   1) Contrat typographique / box model du shell partagé.
   WordPress garde ses réglages pour les articles, mais le premier écran
   du blog et le header utilisent exactement la métrique du Studio.
   ------------------------------------------------------------------ */
body.home .top,
body.home .fl-blog-stage{
  --fd:"Archivo","Arial Narrow",system-ui,sans-serif;
  font-family:var(--fd);
  font-size:14px;
  line-height:normal;
}

body.home .top,
body.home .top .logo,
body.home .top .logo small,
body.home .top .status,
body.home .top .nav,
body.home .fl-blog-stage,
body.home .fl-blog-stage .jr-intro,
body.home .fl-blog-stage .eyebrow,
body.home .fl-blog-stage .h1,
body.home .fl-blog-stage .h1 .ln,
body.home .fl-blog-stage .h1 .ln>span,
body.home .fl-blog-stage .lede,
body.home .fl-blog-stage .path,
body.home .fl-blog-stage .path li,
body.home .fl-blog-stage .prof,
body.home .fl-blog-stage .prof-row,
body.home .fl-blog-stage .prof-msg,
body.home .fl-blog-stage .hero-foot,
body.home .fl-blog-stage .btns,
body.home .fl-blog-stage .stats,
body.home .fl-blog-stage .stat,
body.home .fl-blog-stage .th,
body.home .fl-blog-stage .th .t-top,
body.home .fl-blog-stage .th .tag,
body.home .fl-blog-stage .th .t-arrow,
body.home .fl-blog-stage .th .illo,
body.home .fl-blog-stage .th .illo .fit,
body.home .fl-blog-stage .th .meta,
body.home .fl-blog-stage .th .meta-in,
body.home .fl-blog-stage .th .t-name,
body.home .fl-blog-stage .th .t-teaser,
body.home .fl-blog-stage>.fl-stage-cta,
body.home .fl-blog-stage>.fl-stage-cta .t-top,
body.home .fl-blog-stage>.fl-stage-cta .cta-h,
body.home .fl-blog-stage>.fl-stage-cta .cta-foot,
body.home .fl-blog-stage>.fl-stage-cta .cta-go{
  box-sizing:content-box;
}

/* Les éléments qui sont explicitement border-box sur le Studio le restent. */
body.home .top .nav .jl,
body.home .top .nav .btn,
body.home .top .nav .nda-b,
body.home .fl-blog-stage .btn,
body.home .fl-blog-stage .seg,
body.home .fl-blog-stage .seg-pill{
  box-sizing:border-box;
}

/* ------------------------------------------------------------------
   2) Header : même géométrie que le Studio. Le libellé Agence est plus
   long que Blog, donc sa boîte est figée à la largeur mesurée du Studio.
   ------------------------------------------------------------------ */
body.home .top{
  justify-content:space-between;
}
body.home .top .status{margin:0 auto}
body.home .top .nav{display:flex;gap:6px;align-items:center}
body.home .top .nav .jl{
  width:68px;
  min-width:68px;
  height:40px;
  padding:0;
  justify-content:center;
}

/* ------------------------------------------------------------------
   3) Héros : mêmes métriques finales que le Studio, y compris les lignes.
   ------------------------------------------------------------------ */
body.home .fl-blog-stage .jr-intro{
  padding:14px 22px 8px 8px;
  justify-content:space-between;
  gap:12px;
}
body.home .fl-blog-stage .eyebrow{
  font:500 11px/1.3 var(--fm);
  letter-spacing:.09em;
  text-transform:uppercase;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
body.home .fl-blog-stage .eyebrow i{width:18px;height:1px}
body.home .fl-blog-stage .h1{
  margin:0;
  font-weight:800;
  font-size:clamp(40px,min(5.4vw,8vh),108px);
  line-height:.9;
  letter-spacing:-.052em;
  font-variation-settings:"wdth" 112;
}
body.home .fl-blog-stage .h1 .ln{
  display:block;
  clip-path:inset(-30% -10% 0 -10%);
  padding-bottom:.14em;
  margin-bottom:-.14em;
  width:max-content;
  max-width:100%;
}
body.home .fl-blog-stage .h1 .ln>span{display:inline-block}
body.home .fl-blog-stage .h1 .ln-fold{clip-path:none;perspective:700px}
body.home .fl-blog-stage .h1 .ln-fold>span{transform-origin:50% 8%}
body.home .fl-blog-stage .h1 em{
  font-family:var(--fs);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.015em;
  font-size:1.14em;
}
body.home .fl-blog-stage .lede{
  max-width:48ch;
  font-size:15px;
  line-height:1.55;
  margin:0;
}
body.home .fl-blog-stage .path{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:stretch;
  max-width:660px;
}
body.home .fl-blog-stage .path li{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:8px 14px 8px 0;
  position:relative;
  min-width:0;
}
body.home .fl-blog-stage .path li+li{padding-left:24px}
body.home .fl-blog-stage .path .pi{font:500 10px var(--fm);letter-spacing:.08em}
body.home .fl-blog-stage .path b{font:700 17px/1.1 var(--fd);letter-spacing:-.02em}
body.home .fl-blog-stage .path .pd{font-size:12px;line-height:1.35}
body.home .fl-blog-stage .prof{display:flex;flex-direction:column;gap:10px}
body.home .fl-blog-stage .prof-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
body.home .fl-blog-stage .lbl{font:500 10.5px var(--fm);text-transform:uppercase;letter-spacing:.09em}
body.home .fl-blog-stage .fl-blog-seg{
  position:relative;
  display:inline-flex;
  flex-wrap:wrap;
  gap:2px;
  padding:3px;
  border-radius:999px;
}
body.home .fl-blog-stage .fl-blog-seg a{
  position:relative;
  z-index:1;
  display:block;
  border:0;
  background:none;
  color:var(--ink);
  font:500 13px/1 var(--fd);
  padding:10px 15px;
  border-radius:999px;
  white-space:nowrap;
  text-decoration:none;
}
body.home .fl-blog-stage .prof-msg{font:400 12.5px/1.45 var(--fm);min-height:1.45em;margin:0}
body.home .fl-blog-stage .hero-foot{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
body.home .fl-blog-stage .btns{display:flex;gap:8px;flex-wrap:wrap}
body.home .fl-blog-stage .stats{display:flex;gap:24px}
body.home .fl-blog-stage .stat b{
  display:block;
  font:700 30px/1 var(--fd);
  font-variation-settings:"wdth" 120;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
body.home .fl-blog-stage .stat span{display:block;margin-top:6px;font:500 9.5px var(--fm);text-transform:uppercase;letter-spacing:.08em}

/* ------------------------------------------------------------------
   4) Les six cartes utilisent le même contrat interne que le Studio.
   La taille du .fit n'est PAS fixe : le JS v1.1.15 applique le même
   ResizeObserver / --k que le Studio.
   ------------------------------------------------------------------ */
body.home .fl-blog-stage .th{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:0;
  padding:16px;
}
body.home .fl-blog-stage .th .t-top{
  display:flex;
  align-items:center;
  gap:8px;
  font:500 10px/1 var(--fm);
  letter-spacing:.07em;
  text-transform:uppercase;
  min-height:28px;
  margin:0;
  flex-wrap:nowrap;
}
body.home .fl-blog-stage .th .tag{display:block}
body.home .fl-blog-stage .th .t-arrow{width:28px;height:28px}
body.home .fl-blog-stage .th .illo{
  position:relative;
  flex:1;
  min-height:0;
  margin:4px -6px;
  padding:0;
  display:block;
}
body.home .fl-blog-stage .th .illo .fit{
  position:absolute;
  left:50%;
  top:50%;
  width:200px;
  height:130px;
  transform:translate(-50%,-50%) scale(var(--k,1));
  transform-origin:center;
}
body.home .fl-blog-stage .th .illo .fit svg{
  position:static;
  display:block;
  width:200px;
  height:130px;
  max-width:none;
  max-height:none;
  transform:none;
  overflow:visible;
}
body.home .fl-blog-stage .th .meta{position:relative;height:62px;overflow:hidden;flex:none;display:block}
body.home .fl-blog-stage .th .meta-in{transform:translateY(39px)}
body.home .fl-blog-stage .th .t-name{display:block;font-weight:700;font-size:21px;line-height:23px;letter-spacing:-.025em;white-space:nowrap}
body.home .fl-blog-stage .th .t-teaser{margin-top:4px;font-size:12px;line-height:17px}

/* ------------------------------------------------------------------
   5) CTA projet : copie métrique de la tuile Studio.
   ------------------------------------------------------------------ */
body.home .fl-blog-stage>.fl-stage-cta{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:0;
  min-height:0;
  padding:16px;
}
body.home .fl-blog-stage>.fl-stage-cta .t-top{min-height:28px;margin:0}
body.home .fl-blog-stage>.fl-stage-cta .cta-h{
  font:800 clamp(34px,min(3.7vw,6.6vh),78px)/.88 var(--fd);
  letter-spacing:-.055em;
  font-variation-settings:"wdth" 116;
  margin:0;
}
body.home .fl-blog-stage>.fl-stage-cta .cta-h em{
  font-family:var(--fs);
  font-weight:400;
  font-style:italic;
  letter-spacing:-.02em;
}

/* ------------------------------------------------------------------
   6) Les mêmes ruptures responsive que le Studio.
   ------------------------------------------------------------------ */
@media (min-width:1024px) and (max-height:800px){
  body.home .fl-blog-stage .lede{display:none}
}
@media (min-width:1024px) and (max-height:760px){
  body.home .fl-blog-stage .path .pd{display:none}
}
@media (min-width:1024px) and (max-height:690px){
  body.home .fl-blog-stage .stats,
  body.home .fl-blog-stage .eyebrow{display:none}
}

@media (max-width:1023px),(max-height:599px){
  body.home .fl-blog-stage .jr-intro{
    padding:26px 2px 22px;
    gap:12px;
  }
  body.home .fl-blog-stage .h1{
    font-size:clamp(40px,min(5.4vw,8vh),108px);
    line-height:.9;
  }
  body.home .fl-blog-stage .path{display:flex!important}
  body.home .fl-blog-stage .prof{display:flex;gap:10px}
  body.home .fl-blog-stage .prof-row{display:flex;gap:12px;flex-wrap:wrap}
  body.home .fl-blog-stage .hero-foot{display:flex;gap:16px}

  body.home .fl-blog-stage .th--design,
  body.home .fl-blog-stage .th--branding,
  body.home .fl-blog-stage .th--print,
  body.home .fl-blog-stage .th--packaging,
  body.home .fl-blog-stage .th--web,
  body.home .fl-blog-stage .th--ia{
    aspect-ratio:1/1.1;
  }

  body.home .fl-blog-stage>.fl-stage-cta{
    min-height:250px;
    padding:16px;
    gap:0;
  }
}

@media (max-width:620px){
  body.home .fl-blog-stage .prof-row{flex-wrap:nowrap;gap:8px}
  body.home .fl-blog-stage .prof-row .lbl{flex:none;font-size:9.5px;letter-spacing:.05em;white-space:nowrap}
  body.home .fl-blog-stage .prof .seg{flex:1;min-width:0}
  body.home .fl-blog-stage .fl-blog-seg a{flex:1 1 auto;padding:9px 6px;font-size:12px;text-align:center}
  body.home .fl-blog-stage .path{gap:10px}
  body.home .fl-blog-stage .path li,
  body.home .fl-blog-stage .path li+li{padding:10px 0 0;border-top:1.5px solid var(--mute2)}
  body.home .fl-blog-stage .path li+li::before{display:none}

  body.home .fl-blog-stage .th--design,
  body.home .fl-blog-stage .th--branding,
  body.home .fl-blog-stage .th--print,
  body.home .fl-blog-stage .th--packaging,
  body.home .fl-blog-stage .th--web,
  body.home .fl-blog-stage .th--ia{aspect-ratio:auto}

  body.home .fl-blog-stage .th .t-top .tag{display:none}
  body.home .fl-blog-stage .th .illo{
    flex:none;
    height:clamp(116px,34vw,170px);
    margin:6px -16px 2px;
  }
  body.home .fl-blog-stage .th .t-name{font-size:17px;line-height:23px}
  body.home .fl-blog-stage .th .t-teaser{display:none}
}

@media (max-width:370px){
  body.home .fl-blog-stage .prof-row .lbl{display:none}
  body.home .fl-blog-stage .fl-blog-seg a{padding:8px 4px;font-size:11.5px}
}
/* Foldline 1.1.16 · finitions géométriques de la page WordPress directe.
 * Le shell persistant utilise le DOM du Studio. Ces règles ne servent que
 * lorsque /blog/ est ouvert ou rechargé directement.
 */
@media (min-width:1024px) and (min-height:600px){
  body.home .top .nav .jl{
    width:68px;
    min-width:68px;
    height:40px;
    padding:0 12px;
    box-sizing:border-box;
    justify-content:center;
  }

  /* height:100% + padding en content-box ajoutait exactement 32 px. */
  body.home .fl-blog-stage > .fl-stage-cta{
    height:auto;
    align-self:stretch;
  }

  /* Le Studio conserve une zone de footer de héros stable. */
  body.home .fl-blog-stage .hero-foot{
    height:112.5px;
    min-height:112.5px;
    flex:none;
  }

  /* Même line-box que le span .gl de la carte Studio. */
  body.home .fl-blog-stage .th .tag{
    min-height:13px;
    line-height:13px;
  }
}

/* Foldline 1.1.17 · micro-métriques Blog direct.
 * Les dimensions du shell restent celles du Studio. Ces règles ne concernent
 * que /blog/ chargé directement, notamment avant activation du shell.
 */
body.home .fl-blog-stage .th .tag{
  height:13px;
  min-height:13px;
  line-height:10px;
  display:flex;
  align-items:center;
  font-kerning:normal;
}
body.home .fl-blog-stage .th .t-name,
body.home .fl-blog-stage .h1,
body.home .fl-blog-stage .h1 .ln,
body.home .fl-blog-stage .h1 .ln-fold{
  font-kerning:normal;
  text-rendering:geometricPrecision;
}

/* Foldline 1.1.18 · micro-métriques Blog direct.
 * Les dimensions du shell restent celles du Studio. Ces règles ne concernent
 * que /blog/ chargé directement, notamment avant activation du shell.
 */
body.home .fl-blog-stage .th .tag{
  height:13px;
  min-height:13px;
  line-height:10px;
  display:flex;
  align-items:center;
  font-kerning:normal;
}
body.home .fl-blog-stage .th .t-name,
body.home .fl-blog-stage .h1,
body.home .fl-blog-stage .h1 .ln,
body.home .fl-blog-stage .h1 .ln-fold{
  font-kerning:normal;
  text-rendering:geometricPrecision;
}


/* Foldline 1.1.18 · finitions éditoriales Blog direct */
.fl-blog-stage .jr-intro .hero-foot .btn, .fl-blog-stage .prof .seg a, .feed a.card-link, .feed .chip-s, .pager a{transition:transform .42s cubic-bezier(.16,1,.3,1),box-shadow .42s cubic-bezier(.16,1,.3,1),background-color .3s ease,border-color .3s ease;}
.fl-blog-stage .jr-intro .hero-foot .btn:hover, .fl-blog-stage .prof .seg a:hover, .feed a.card-link:hover, .feed .chip-s:hover, .pager a:hover{transform:translate3d(0,-1px,0);}


/* Foldline 1.1.22 · parité responsive Studio ↔ Blog
 * Le Studio reste la référence. Ces règles remplacent le rescue 1.1.19.
 */
.cta-sh{display:none}.cta-x{display:inline}
body .top{justify-content:space-between}
body .status{margin-left:0;margin-right:0}
@media (min-width:1024px) and (min-height:600px){
  body .top .nav .jl{width:68px;min-width:68px;max-width:68px;flex:0 0 68px;justify-content:center;box-sizing:border-box}
  body .top .nav .nda-b{width:124px;min-width:124px;max-width:124px;flex:0 0 124px;box-sizing:border-box}
  body .top .nav>.btn:not(.ghost){width:174px;min-width:174px;max-width:174px;flex:0 0 174px;box-sizing:border-box}
}
@media (max-width:1023px),(max-height:599px){
  :root{--pad:16px}
  html,body{height:auto!important;min-height:100%;max-width:100%;overflow-x:hidden!important;overflow-y:auto!important}
  body{min-width:0!important}
  body .app,body.home .app{width:100%!important;max-width:none!important;margin:0!important;height:auto!important;min-height:100%!important;box-sizing:border-box!important}
  body.home .app{padding:0 16px 16px!important}

  /* En-tête = comportement Studio compact. */
  body .top,body.home .top{position:sticky!important;top:env(safe-area-inset-top,0px)!important;z-index:40!important;height:60px!important;max-width:none!important;min-width:0!important;box-sizing:border-box!important;gap:16px!important;background:rgba(10,11,9,.82)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  body.home .top{margin:0 -16px!important;padding:0 16px!important}
  body .status,body.home .status{display:none!important}
  body .nav,body.home .nav{margin-left:auto!important;min-width:0!important;display:flex!important;align-items:center!important;flex-wrap:nowrap!important;gap:6px!important}
  body .top .nav .jl,body.home .top .nav .jl{width:68px!important;min-width:68px!important;max-width:68px!important;height:40px!important;padding:0 8px!important;justify-content:center!important;box-sizing:border-box!important;flex:0 0 68px!important}
  body .top .nav>.btn:not(.ghost),body.home .top .nav>.btn:not(.ghost){width:auto!important;min-width:0!important;box-sizing:border-box!important;flex:0 0 auto!important}
  body .nav .btn,body.home .nav .btn{padding:0 16px!important;font-size:13px!important}

  /* Premier écran Blog = même grille responsive que le Studio. */
  body.home .fl-blog-stage{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:none!important;height:auto!important;min-height:0!important;min-width:0!important;overflow:visible!important;margin:0!important;gap:10px!important}
  body.home .fl-blog-stage>*{min-width:0!important;min-height:0!important}
  body.home .fl-blog-stage .jr-intro{grid-column:1/-1!important;grid-row:auto!important;padding:26px 2px 22px!important;gap:22px!important}
  body.home .fl-blog-stage .h1{font-size:clamp(40px,11.5vw,84px)!important;letter-spacing:-.052em!important}
  body.home .fl-blog-stage .lede{font-size:15px!important;line-height:23.25px!important}
  body.home .fl-blog-stage .path{display:flex!important}
  body.home .fl-blog-stage .fl-blog-dots{display:none!important}
  body.home .fl-blog-stage .prof-row{flex-wrap:nowrap!important;gap:8px!important}
  body.home .fl-blog-stage .fl-blog-seg{flex:1!important;min-width:0!important;display:flex!important;flex-wrap:nowrap!important}
  body.home .fl-blog-stage .fl-blog-seg a{flex:1 1 auto!important;white-space:nowrap!important}

  body.home .fl-blog-stage .th--design,
  body.home .fl-blog-stage .th--branding,
  body.home .fl-blog-stage .th--print,
  body.home .fl-blog-stage .th--packaging,
  body.home .fl-blog-stage .th--web,
  body.home .fl-blog-stage .th--ia{grid-column:auto!important;grid-row:auto!important;aspect-ratio:1/1.1!important}
  body.home .fl-blog-stage .th{padding:16px!important;gap:0!important;justify-content:flex-start!important;min-width:0!important;overflow:hidden!important}
  body.home .fl-blog-stage .th .t-top{min-height:28px!important}
  body.home .fl-blog-stage .th .t-name{font-size:21px!important;line-height:23px!important;letter-spacing:-.525px!important}
  body.home .fl-blog-stage .th .t-teaser{display:-webkit-box!important}
  body.home .fl-blog-stage>.card--lead.card--duo,
  body.home .fl-blog-stage>.fl-stage-cta,
  body.home .fl-blog-stage-empty{grid-column:1/-1!important;grid-row:auto!important;height:auto!important;min-width:0!important}
  body.home .fl-blog-stage>.fl-stage-cta{min-height:250px!important}

  /* Le reste du Blog garde une largeur saine et scrollable. */
  .feed,.post-layout,.related-grid,.foot-grid{min-width:0!important;max-width:100%!important}
  .post-layout{grid-template-columns:minmax(0,1fr)!important}
  .post-side-in{position:static!important}.post-side{order:0}
  .author,.post-cta{grid-column:1/-1!important}
  .foot-brand,.foot-cta{grid-column:1/-1!important}.foot-links{grid-column:span 6!important}
  .entry img,.entry video,.entry iframe{max-width:100%!important;height:auto}
  .entry pre{max-width:100%;overflow-x:auto}
  .entry .wp-block-table,.entry .fl-table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

@media (max-width:620px){
  /* Téléphone : le bouton NDA n'existe pas dans l'en-tête. */
  body .top,body.home .top{gap:8px!important}
  body .logo small,body.home .logo small{display:none!important}
  body .nav,body.home .nav{gap:4px!important;max-width:calc(100vw - 112px)!important}
  body .top .nav .nda-b,body.home .top .nav .nda-b{display:none!important}
  body .top .nav .jl,body.home .top .nav .jl{padding:0 7px!important}
  body .top .nav>.btn:not(.ghost),body.home .top .nav>.btn:not(.ghost){padding-left:10px!important;padding-right:10px!important;font-size:12px!important}
  body .top .nav>.btn:not(.ghost) .ar{display:none!important}
  body .cta-l,body .cta-x{display:none!important}
  body .cta-s,body .cta-sh{display:inline!important}

  body.home .fl-blog-stage .th--design,
  body.home .fl-blog-stage .th--branding,
  body.home .fl-blog-stage .th--print,
  body.home .fl-blog-stage .th--packaging,
  body.home .fl-blog-stage .th--web,
  body.home .fl-blog-stage .th--ia{aspect-ratio:auto!important}
  body.home .fl-blog-stage .th .t-top .tag{display:none!important}
  body.home .fl-blog-stage .th .illo{flex:none!important;height:clamp(116px,34vw,170px)!important;margin:6px -16px 2px!important}
  body.home .fl-blog-stage .th .t-name{font-size:17px!important;line-height:23px!important;letter-spacing:-.425px!important}
  body.home .fl-blog-stage .th .t-teaser{display:none!important}
  body.home .fl-blog-stage .path{gap:10px!important}
  body.home .fl-blog-stage .path li,
  body.home .fl-blog-stage .path li+li{padding:10px 0 0!important;border-top:1.5px solid var(--mute2)!important}
  body.home .fl-blog-stage .path li+li::before{display:none!important}
  body.home .fl-blog-stage .prof-row{flex-wrap:nowrap!important;gap:8px!important}
  body.home .fl-blog-stage .prof-row .lbl{flex:none!important;font-size:9.5px!important;letter-spacing:.05em!important;white-space:nowrap!important}
  body.home .fl-blog-stage .fl-blog-seg a{padding:9px 6px!important;font-size:12px!important}
  body.home .fl-blog-stage .stats{gap:16px!important}.stat b{font-size:24px!important}

  .card{grid-column:1/-1!important;min-width:0!important}
  .card--lead{flex-direction:column!important}.card--lead .card-media{flex:none!important;margin:8px 8px 0!important}.card--lead .card-body{padding:16px 18px 18px!important}
  .post-head{padding-left:4px!important;padding-right:4px!important}
  .post-body{padding:26px 18px 34px!important;border-radius:18px!important;min-width:0!important}
  .entry{font-size:17.5px;line-height:1.68;min-width:0!important}
  .entry table{min-width:560px}.foot-links{grid-column:1/-1!important}.author{flex-direction:column!important;padding:22px!important}
}

@media (max-width:420px){
  body .nav,body.home .nav{max-width:calc(100vw - 104px)!important}
  body .top .nav .jl,body.home .top .nav .jl{padding-left:6px!important;padding-right:6px!important}
}
@media (max-width:370px){
  body .nav,body.home .nav{gap:3px!important;max-width:calc(100vw - 98px)!important}
  body .top .nav .jl,body.home .top .nav .jl{padding-left:5px!important;padding-right:5px!important}
  body .top .nav>.btn:not(.ghost),body.home .top .nav>.btn:not(.ghost){padding-left:8px!important;padding-right:8px!important}
  body.home .fl-blog-stage .prof-row .lbl{display:none!important}
}

/* Foldline 1.1.20 · interaction polish — aucun bouton ne se déplace au survol */

/* Le feedback reste visuel (contraste / contour), jamais spatial. */
.btn,
.top .btn,
.hero .btn,
.stage .btn,
.tech button,
.oc,
.prof .seg button,
.prof .seg a,
.pager a,
.chip-s{
  transform:none!important;
  translate:none!important;
}

.btn,
.top .btn,
.hero .btn{
  transition:background-color .28s ease,color .28s ease,box-shadow .34s cubic-bezier(.16,1,.3,1),border-color .28s ease!important;
}
.btn .ar{transition:color .28s ease,opacity .28s ease!important;transform:none!important}
.btn:hover .ar,.btn:focus-visible .ar{transform:none!important}

@media (hover:hover) and (pointer:fine){
  .btn:hover,.btn:focus-visible{
    transform:none!important;
    box-shadow:inset 0 0 0 1px rgba(241,243,234,.24),0 0 0 4px rgba(57,255,20,.08)!important;
  }
  .s-bone .btn:hover,.s-bone .btn:focus-visible,
  .s-neon .btn:hover,.s-neon .btn:focus-visible{
    box-shadow:inset 0 0 0 1px rgba(10,11,9,.24),0 0 0 4px rgba(10,11,9,.06)!important;
  }
  .btn.ghost:hover,.btn.ghost:focus-visible{
    box-shadow:inset 0 0 0 1px currentColor,0 0 0 4px rgba(241,243,234,.055)!important;
  }
  .tech button:hover,.tech button.hov,.oc:hover,
  .prof .seg button:hover,.prof .seg a:hover,
  .pager a:hover,.chip-s:hover{
    transform:none!important;
  }
}

/* Les flèches de cartes conservent leur langage propre ; seuls les boutons sont stabilisés. */
/* 1.1.23 · héros du blog : chiffres retirés, message et boutons sur une même rangée */
.prof-foot{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.prof-foot .prof-msg{flex:1 1 240px;min-width:0}
.prof-foot .hero-foot{flex:none;margin:0}

/* ==== Foldline 1.1.24 · mode clair « Papier » =====================================================
   Actif quand <html data-theme="light"> (script de tête : choix mémorisé « fl:theme », sinon réglage de l'appareil).
   Mêmes jetons, valeurs claires : le graphite devient papier, l'os devient pierre, le néon reste une matière
   (boutons, tuile brief, puces) ; quand il sert de texte ou de trait il passe en vert encre lisible (5,2:1 sur papier).
   Les couches immersives (fiches services, NDA, brief, film) restent sombres. */
[data-theme="light"]{color-scheme:light;
  --bg:#E9EBE3;--g1:#F8F9F4;--g2:#EFF1E9;--bone:#DCDFD3;--ink:#0A0B09;--mute:#585C54;--mute2:#9A9E93;
  --line:rgba(10,11,9,.11);--line2:rgba(10,11,9,.2);--s-line:rgba(10,11,9,.11);--s-line2:rgba(10,11,9,.28);
  --neon-fill:#39FF14;--neon-ink:#157A0A;--neon-line:#1FB20E;--neon:var(--neon-ink)}
/* Le néon reste néon quand il est une matière : aplats sous un texte sombre, puces, surlignage, blocs sombres par nature. */
[data-theme="light"] :is(.s-neon,.s-bone,.btn,.chip-s,.cta-go,.seg-pill,.skip,.chip,.chipb[aria-current],.pager .current,.seg button[aria-selected=true],.fl-fp-panel .seg button[aria-checked=true],.is-zoom .fl-zoom-x,.lay.p .it,.pk .band,.head,.bx-chip){--neon:var(--neon-fill)}
[data-theme="light"] .entry :is(mark,a:hover,.is-style-fl-tldr,.is-style-fl-warn,.is-style-fl-steps,.fl-fig,.fl-cta,.fl-chat){--neon:var(--neon-fill)}
[data-theme="light"] :is(.s-graphite,.s-dark){--s-line:rgba(10,11,9,.1);--s-line2:rgba(10,11,9,.28);--s-btn:var(--neon-fill);--s-err:#A1071F}
[data-theme="light"] .s-dark{--s-bg:#F3F4EF}
[data-theme="light"] :is(.h1 em,.h1 .ln.on em,.post-title em){text-shadow:none}
/* Anneau de focus clavier : toujours l'encre verte sur fond clair, le néon dans les couches sombres. */
[data-theme="light"] :focus-visible{outline-color:var(--neon-ink)}
[data-theme="light"] :is(.stage,.dl,.entry .is-style-fl-tldr,.entry .fl-cta) :focus-visible{outline-color:#39FF14}
@media (hover:hover) and (pointer:fine){
  [data-theme="light"] .btn.ghost:is(:hover,:focus-visible){box-shadow:inset 0 0 0 1px currentColor,0 0 0 4px rgba(10,11,9,.05)!important}
  [data-theme="light"] .btn:not(.ghost):is(:hover,:focus-visible){box-shadow:inset 0 0 0 1px rgba(10,11,9,.18),0 0 0 4px rgba(57,255,20,.18)!important}
}
/* Illustrations : les couleurs écrites pour un fond sombre passent à l'encre (hors pierre, néon et couches sombres). */
[data-theme="light"] svg [stroke="#F1F3EA" i]:not(:is(.s-bone,.s-neon,.stage,.dl,.flf) *){stroke:var(--ink)}
[data-theme="light"] svg [fill="#F1F3EA" i]:not(:is(.s-bone,.s-neon,.stage,.dl,.flf) *){fill:var(--ink)}
[data-theme="light"] svg [fill="#121410" i]:not(:is(.s-bone,.s-neon,.stage,.dl,.flf) *){fill:var(--g1)}
[data-theme="light"] svg [stroke="#121410" i]:not(:is(.s-bone,.s-neon,.stage,.dl,.flf) *){stroke:var(--g1)}
[data-theme="light"] svg [fill="#1A1C17" i]:not(:is(.s-bone,.s-neon,.stage,.dl,.flf) *){fill:var(--g2)}
[data-theme="light"] svg [fill="#8C9087" i]:not(:is(.s-bone,.s-neon,.stage,.dl,.flf) *){fill:var(--mute)}
[data-theme="light"] svg [stroke="#39FF14" i]:not(:is(.s-bone,.s-neon,.stage,.dl,.flf) *){stroke:var(--neon-line)}
[data-theme="light"] svg [stroke="rgba(241,243,234,.2)"]:not(:is(.s-bone,.s-neon,.stage,.dl,.flf) *){stroke:rgba(10,11,9,.22)}
[data-theme="light"] svg [stroke="rgba(241,243,234,.16)"]:not(:is(.s-bone,.s-neon,.stage,.dl,.flf) *){stroke:rgba(10,11,9,.18)}
[data-theme="light"] svg [stroke="rgba(241,243,234,.3)"]:not(:is(.s-bone,.s-neon,.stage,.dl,.flf) *){stroke:rgba(10,11,9,.3)}
[data-theme="light"] svg [fill="rgba(241,243,234,.16)"]:not(:is(.s-bone,.s-neon,.stage,.dl,.flf) *){fill:rgba(10,11,9,.1)}
[data-theme="light"] svg [stroke="rgba(57,255,20,.28)"]:not(:is(.s-bone,.s-neon,.stage,.dl,.flf) *){stroke:rgba(31,178,14,.45)}
/* Interrupteur clair/sombre (en-tête ; pied de page sur téléphone). Visible seulement si le script de tête a tourné. */
.fl-theme,.fl-theme-foot{display:none}
[data-theme] .fl-theme{display:inline-grid;place-items:center;flex:0 0 40px;box-sizing:border-box;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2,rgba(241,243,234,.16));cursor:pointer;-webkit-tap-highlight-color:transparent;transition:box-shadow .28s ease,color .28s ease}
[data-theme] .fl-theme svg,[data-theme] .fl-theme-foot svg{display:block;width:16px;height:16px;transition:transform .6s cubic-bezier(.16,1,.3,1)}
[data-theme="light"] :is(.fl-theme,.fl-theme-foot) svg{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){[data-theme] .fl-theme:hover{color:var(--neon);box-shadow:inset 0 0 0 1px currentColor}}
@media (max-width:420px){
  [data-theme] .top .fl-theme{display:none}
  [data-theme] .fl-theme-foot{display:inline-flex;align-items:center;gap:8px;margin:0;padding:8px 12px;border:0;border-radius:999px;background:transparent;color:inherit;font:500 10px/1 var(--fm,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;box-shadow:inset 0 0 0 1px var(--line2,rgba(241,243,234,.16));cursor:pointer}
}
[data-theme="dark"] .fl-tl-l,[data-theme="light"] .fl-tl-d{display:none}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
@media (prefers-reduced-motion:reduce){[data-theme] :is(.fl-theme,.fl-theme-foot) svg{transition:none}}
/* -- blog -- */
@media (max-width:1023px),(max-height:599px){[data-theme="light"] :is(body .top,body.home .top){background:rgba(233,235,227,.86)!important}}
[data-theme="light"] .chipb{box-shadow:inset 0 0 0 1px rgba(10,11,9,.2)}
[data-theme="light"] .pager .page-numbers{box-shadow:inset 0 0 0 1px rgba(10,11,9,.2)}
[data-theme="light"] :is(.share a,.share button){box-shadow:inset 0 0 0 1px rgba(10,11,9,.2)}
[data-theme="light"] .post-body{--s-bg:var(--g1)}
[data-theme="light"] .tile::before{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(57,255,20,.14),transparent 62%)}
[data-theme="light"] .grain{opacity:.35}