/* DOSOBE · éditorial (19/10/2026) : cartes, hub des publications, six mises en page d'article,
   composants de contenu. Inspiré du blog de Frontify : grandes images, titres serif, beaucoup d'air. */

.pig-roi{--pd:var(--roi-d);--pv:var(--roi);--pp:var(--roi-p)}
.pig-soleil{--pd:var(--soleil-d);--pv:var(--soleil);--pp:var(--soleil-p)}
.pig-bordeaux{--pd:var(--bordeaux-d);--pv:var(--bordeaux);--pp:var(--bordeaux-p)}
.pig-magenta{--pd:var(--magenta-d);--pv:var(--magenta);--pp:var(--magenta-p)}
.pig-ciel{--pd:var(--ciel-d);--pv:var(--ciel);--pp:var(--ciel-p)}
.pig-olive{--pd:var(--olive-d);--pv:var(--olive);--pp:var(--olive-p)}
.pig-dsb{--pd:var(--dsb-d);--pv:var(--dsb);--pp:var(--dsb-p)}

/* ——— cartes ——— */
.c2{display:flex;flex-direction:column;gap:16px;color:var(--ink);text-decoration:none;min-width:0}
.c2-img{display:block;position:relative;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--pv,var(--dsb))}
.c2-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.c2:hover .c2-img img{transform:scale(1.035)}
.c2-ph{position:absolute;inset:0;background:var(--pv) radial-gradient(circle,var(--pd) 1.2px,transparent 1.8px) 0 0/9px 9px}
.c2-b{display:flex;flex-direction:column;gap:8px}
.c2-tag{display:inline-flex;align-self:flex-start;align-items:center;gap:7px;font:500 13px/1 var(--f-text);color:var(--stone)}
.c2-tag::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--pv)}
.c2-t{font:400 clamp(21px,1.7vw,26px)/1.16 var(--f-display);letter-spacing:-.005em;text-wrap:balance}
.c2:hover .c2-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.c2-x{font:400 15px/1.5 var(--f-text);color:var(--stone);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.c2-m{font:400 13px/1 var(--f-text);color:var(--stone)}
.c2-big .c2-img{aspect-ratio:16/9}
.c2-big .c2-t{font-size:clamp(30px,3vw,46px);line-height:1.06}
.c2-big .c2-x{font-size:17px;-webkit-line-clamp:3}
.c2-side{display:grid;grid-template-columns:42% 1fr;gap:18px;align-items:start}
.c2-side .c2-img{aspect-ratio:4/3}
.c2-side .c2-t{font-size:clamp(19px,1.4vw,22px)}

/* ——— hub ——— */
.bh-head{padding:calc(var(--hdr-h) + clamp(32px,5vw,72px)) 0 clamp(20px,3vw,40px)}
.bh-t{font:400 clamp(44px,6vw,96px)/1 var(--f-display);letter-spacing:-.015em;margin:18px 0 18px;max-width:14em}
.bh-d{max-width:40em;font:400 clamp(17px,1.3vw,20px)/1.55 var(--f-text);color:var(--stone)}
.bh-sec{padding-top:0}
.bh{display:flex;flex-direction:column;gap:28px}
.bh-feat{display:grid;grid-template-columns:1.45fr 1fr;gap:clamp(24px,3vw,48px);padding-bottom:clamp(28px,4vw,56px);border-bottom:1px solid rgba(1,14,14,.1)}
.bh-feat-s{display:flex;flex-direction:column;gap:28px}
.bh-bar{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;position:sticky;top:calc(var(--hdr-h) - 4px);z-index:5;padding:10px 0;background:linear-gradient(var(--paper) 80%,transparent)}
.bh-chips{display:flex;flex-wrap:wrap;gap:8px}
.bh-chip{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:8px;background:var(--white);box-shadow:inset 0 0 0 1px rgba(1,14,14,.12);font:500 14px/1 var(--f-text);color:var(--ink);text-decoration:none;transition:background .2s,color .2s}
.bh-chip small{font:400 12px/1 var(--f-text);color:var(--stone)}
.bh-chip:hover{background:var(--paper-2)}
.bh-chip.on{background:var(--ink);color:var(--white);box-shadow:none}
.bh-chip.on small{color:rgba(251,250,247,.6)}
.bh-search input{width:min(340px,80vw);height:40px;padding:0 14px 0 38px;border:0;border-radius:8px;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235F594F' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 4 4'/%3E%3C/svg%3E") 12px 50% no-repeat;box-shadow:inset 0 0 0 1px rgba(1,14,14,.12);font:400 15px/1 var(--f-text);color:var(--ink)}
.bh-search input:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--signal-ink)}
.bh-count{margin:-10px 0 0;font:400 14px/1 var(--f-text);color:var(--stone)}
.bh-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,3.4vw,56px) clamp(20px,2.4vw,36px)}
.bh.is-busy .bh-grid{opacity:.45;transition:opacity .2s}
.bh-more{display:flex;justify-content:center;padding-top:12px}
.bh-more .hb{height:46px;padding:0 24px}
@media (max-width:980px){.bh-feat{grid-template-columns:1fr}.bh-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.bh-grid{grid-template-columns:1fr}.c2-side{grid-template-columns:38% 1fr}.bh-bar{position:static}.bh-search,.bh-search input{width:100%}}

/* ——— article : socle commun ——— */
.a8{--meas:44rem}
.a8-h{padding-top:calc(var(--hdr-h) + clamp(28px,4.5vw,64px))}
.a8 .crumbs{margin-bottom:22px}
.a8-tag{display:inline-flex;align-items:center;gap:8px;font:500 13.5px/1 var(--f-text);color:var(--stone)}
.a8-tag::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--pv)}
.a8-t{font:400 clamp(38px,5vw,76px)/1.02 var(--f-display);letter-spacing:-.015em;margin:16px 0 18px;max-width:17em;text-wrap:balance}
.a8-lede{font:400 clamp(18px,1.45vw,22px)/1.5 var(--f-text);color:var(--ink-soft);max-width:38em;margin:0 0 24px}
.a8-meta{display:flex;flex-wrap:wrap;gap:6px 26px;margin:0;font:400 14px/1.3 var(--f-text)}
.a8-meta div{display:flex;gap:6px}.a8-meta dt{color:var(--stone)}.a8-meta dt::after{content:" :"}.a8-meta dd{margin:0}
.a8-cover{margin:clamp(28px,4vw,52px) 0 0;border-radius:12px;overflow:hidden;background:var(--pv)}
.a8-cover img{display:block;width:100%;height:auto;max-height:640px;object-fit:cover}
.a8-cover-band img{aspect-ratio:21/8;max-height:none}
.a8-body{display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr);gap:clamp(28px,5vw,96px);padding-top:clamp(40px,5vw,80px);padding-bottom:clamp(40px,5vw,72px)}
.a8-solo{grid-template-columns:minmax(0,1fr);justify-items:center}
.a8-side{position:sticky;top:calc(var(--hdr-h) + 12px);align-self:start;display:flex;flex-direction:column;gap:26px}
.a8 .toc .tag,.a8-share .tag,.a8-bref .tag,.a8-steps .tag,.a8-abstract .tag{display:block;margin-bottom:10px;font:500 12.5px/1 var(--f-text);letter-spacing:.04em;text-transform:uppercase;color:var(--stone)}
.a8 .toc ol{margin:0}
.a8 .toc a.on{color:var(--ink);font-weight:500}
.a8-share{display:flex;flex-wrap:wrap;gap:8px 14px;font:500 14px/1 var(--f-text)}
.a8-share .tag{width:100%;margin:0}
.a8-share a,.a8-share button{padding:0;border:0;background:none;color:var(--ink);text-decoration:underline;text-underline-offset:4px;cursor:pointer;font:inherit}
.a8-prose{max-width:var(--meas);width:100%;font-size:18.5px;line-height:1.72}
.a8-prose > p:first-of-type{font-size:1.08em}
.a8 .prose h2{font:400 clamp(28px,2.5vw,38px)/1.12 var(--f-display);margin:1.9em 0 .55em;scroll-margin-top:calc(var(--hdr-h) + 20px)}
.a8 .prose h3{font:500 21px/1.3 var(--f-text);margin:1.6em 0 .5em}
.a8 .prose ul,.a8 .prose ol{padding-left:1.2em}
.a8 .prose li + li{margin-top:.35em}
.a8 .prose a{color:var(--signal-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.a8 .prose a.al{color:inherit;text-decoration-color:var(--signal)}
.a8 .prose strong{font-weight:600}
.a8 .prose img{border-radius:10px}
.a8-bref{padding:22px 24px;border-radius:12px;background:var(--pp);color:var(--ink)}
.a8-bref ul{margin:0;padding:0;list-style:none;display:grid;gap:10px;font:400 15.5px/1.45 var(--f-text)}
.a8-bref li{position:relative;padding-left:18px}
.a8-bref li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:2px;background:var(--pd)}

/* comparatif */
.a8-split{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(28px,4vw,72px);align-items:end}
@media (max-width:900px){.a8-split{grid-template-columns:1fr}}
/* guide */
.a8-guide-h{display:grid;grid-template-columns:1.6fr minmax(240px,1fr);gap:clamp(28px,4vw,72px);align-items:end}
.a8-steps{padding:22px 24px;border-radius:12px;background:var(--white);box-shadow:inset 0 0 0 1px rgba(1,14,14,.08);display:flex;flex-direction:column;gap:12px}
.a8-steps b{font:400 28px/1.1 var(--f-display)}
.a8-steps .a8-meta{flex-direction:column;gap:6px}
@media (max-width:900px){.a8-guide-h{grid-template-columns:1fr}}
/* recherche */
.a8-narrow{max-width:58rem;margin-left:auto;margin-right:auto;text-align:left}
.a8-narrow .a8-t{font-size:clamp(34px,4vw,60px)}
.a8-abstract{margin:30px 0 18px;padding:24px 26px;border-left:3px solid var(--pv);background:var(--white);border-radius:0 12px 12px 0}
.a8-abstract p{margin:0;font:400 19px/1.55 var(--f-display)}
.a8-cover-strip{margin:clamp(24px,3vw,44px) var(--gut) 0;border-radius:12px}
.a8-cover-strip img{aspect-ratio:21/5;max-height:none}
.a8-recherche .a8-prose{font-size:18px}
/* terrain : image pleine largeur */
.a8-h-full{position:relative;min-height:min(86vh,820px);display:flex;align-items:flex-end;padding:calc(var(--hdr-h) + 40px) 0 clamp(36px,5vw,64px);color:var(--white);overflow:hidden}
.a8-bg{position:absolute;inset:0}
.a8-bg img{width:100%;height:100%;object-fit:cover}
.a8-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,14,14,.15) 30%,rgba(1,14,14,.82))}
.a8-hin{position:relative}
.a8-h-full .crumbs,.a8-h-full .crumbs a,.a8-h-full .a8-tag,.a8-h-full .a8-meta dt{color:rgba(251,250,247,.75)}
.a8-h-full .a8-lede{color:rgba(251,250,247,.88)}
.a8-h-full .a8-t{color:var(--white)}
/* note */
.a8-note-h{display:grid;grid-template-columns:1.7fr minmax(200px,1fr);gap:clamp(24px,4vw,64px);align-items:end}
.a8-note-h .a8-t{font-size:clamp(34px,4vw,58px)}
.a8-cover-sq{margin:0}.a8-cover-sq img{aspect-ratio:1/1}
.a8-note .a8-prose{font-size:19px}
@media (max-width:900px){.a8-note-h{grid-template-columns:1fr}.a8-cover-sq img{aspect-ratio:16/9}}
/* dossier */
.a8-h-dark{position:relative;background:var(--ink);color:var(--white);padding-bottom:clamp(36px,5vw,72px);overflow:hidden}
.a8-tr{position:absolute!important;inset:0;height:100%!important;opacity:.35}
.a8-h-dark .crumbs,.a8-h-dark .crumbs a,.a8-h-dark .a8-tag,.a8-h-dark .a8-meta dt{color:rgba(251,250,247,.7)}
.a8-h-dark .a8-t{color:var(--white)}.a8-h-dark .a8-lede{color:rgba(251,250,247,.86)}
.a8-chap{position:relative;list-style:none;margin:clamp(28px,4vw,52px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.a8-chap a{display:flex;gap:12px;height:100%;padding:16px 18px;border-radius:10px;background:rgba(251,250,247,.08);color:var(--white);text-decoration:none;font:500 15px/1.35 var(--f-text);transition:background .2s}
.a8-chap a:hover{background:rgba(251,250,247,.16)}
.a8-chap span{color:var(--signal);font-variant-numeric:tabular-nums}
@media (max-width:900px){.a8-body{grid-template-columns:1fr}.a8-side{position:static;order:2}.a8-side .toc{display:none}}

/* FAQ, auteur, suite */
.a8-faq{margin-top:2.4em}
.a8-faq details{border-top:1px solid rgba(1,14,14,.12);padding:4px 0}
.a8-faq details:last-child{border-bottom:1px solid rgba(1,14,14,.12)}
.a8-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:16px 0;font:500 18px/1.35 var(--f-text)}
.a8-faq summary::after{content:"+";font-weight:400;font-size:24px;line-height:1;color:var(--stone)}
.a8-faq details[open] summary::after{content:"–"}
.a8-faq summary::-webkit-details-marker{display:none}
.a8-faq details > div{padding:0 0 16px;color:var(--ink-soft);font-size:17px}
.a8-author{display:flex;gap:16px;align-items:flex-start;margin-top:2.6em;padding-top:24px;border-top:1px solid rgba(1,14,14,.12)}
.a8-av{flex:0 0 48px;height:48px;border-radius:10px;display:grid;place-items:center;background:var(--ink);color:var(--signal);font:400 24px/1 var(--f-display)}
.a8-author b{display:block;font:500 16px/1.3 var(--f-text)}
.a8-author span{display:block;margin-top:4px;font:400 15px/1.5 var(--f-text);color:var(--stone)}
.a8-author a{color:var(--ink)!important}
.nb{margin:0 0 clamp(48px,6vw,96px);padding:clamp(24px,3vw,40px);border-radius:14px;background:var(--white);box-shadow:inset 0 0 0 1px rgba(1,14,14,.07)}
.nb-h{display:block;margin-bottom:18px;font:400 clamp(26px,2.4vw,36px)/1.1 var(--f-display)}
.nb-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.nb-card{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:10px;background:var(--paper);color:var(--ink);text-decoration:none;transition:background .2s,transform .3s var(--ease)}
.nb-card:hover{background:var(--paper-2);transform:translateY(-2px)}
.nb-card b{font:500 19px/1.25 var(--f-text)}
.nb-card > span:not(.tag){font:400 15px/1.45 var(--f-text);color:var(--stone)}
.nb-card i{margin-top:auto;padding-top:8px;font:500 14.5px/1 var(--f-text);font-style:normal;display:inline-flex;gap:8px;align-items:center}
.nb-card i svg{width:13px;height:13px}
.nb-demo{background:var(--ink);color:var(--white)}
.nb-demo:hover{background:#0A3A35}
.nb-demo > span:not(.tag),.nb-demo .tag{color:rgba(251,250,247,.7)!important}
.a8-rel{padding-top:0}
.a8-rel-h{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:28px}
.a8-rel-h h2{font:400 clamp(30px,3vw,46px)/1.05 var(--f-display);margin:0}

/* ——— composants de contenu (classes utilisables dans le texte) ——— */
.prose .dsb-callout{margin:1.8em 0;padding:20px 22px;border-radius:12px;background:var(--pp,var(--dsb-p));font-size:.95em}
.prose .dsb-callout > :first-child{margin-top:0}.prose .dsb-callout > :last-child{margin-bottom:0}
.prose .dsb-callout b:first-child{display:block;margin-bottom:6px;font:500 13px/1 var(--f-text);letter-spacing:.04em;text-transform:uppercase;color:var(--pd,var(--ink))}
.prose .dsb-warn{background:var(--bordeaux-p)}
.prose .dsb-quote{margin:2em 0;padding:0;border:0;font:400 clamp(24px,2.2vw,32px)/1.25 var(--f-display);color:var(--ink);text-wrap:balance}
.prose .dsb-quote::before{content:"";display:block;width:40px;height:3px;margin-bottom:18px;background:var(--pv,var(--signal))}
.prose .dsb-steps{list-style:none;counter-reset:st;padding:0!important;margin:1.6em 0;display:grid;gap:12px}
.prose .dsb-steps > li{counter-increment:st;position:relative;padding:18px 20px 18px 66px;border-radius:12px;background:var(--white);box-shadow:inset 0 0 0 1px rgba(1,14,14,.08);margin:0!important}
.prose .dsb-steps > li::before{content:counter(st,decimal-leading-zero);position:absolute;left:20px;top:17px;font:500 15px/1.4 var(--f-text);color:var(--pd,var(--signal-ink))}
.prose .dsb-steps > li > b:first-child{display:block;font-weight:600;margin-bottom:2px}
.prose .dsb-check{list-style:none;padding:20px 22px!important;margin:1.6em 0;border-radius:12px;background:var(--white);box-shadow:inset 0 0 0 1px rgba(1,14,14,.08)}
.prose .dsb-check > li{position:relative;padding-left:30px}
.prose .dsb-check > li::before{content:"";position:absolute;left:0;top:.3em;width:16px;height:16px;border-radius:4px;box-shadow:inset 0 0 0 1.5px var(--pd,var(--ink))}
.prose .dsb-table-w{margin:1.8em 0;overflow-x:auto;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(1,14,14,.1);background:var(--white)}
.prose table.dsb-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45;min-width:560px}
.prose .dsb-table th,.prose .dsb-table td{padding:12px 14px;border:0;border-bottom:1px solid rgba(1,14,14,.08);text-align:left;vertical-align:top}
.prose .dsb-table thead th{font:500 13px/1.3 var(--f-text);color:var(--stone);background:var(--paper)}
.prose .dsb-table tbody th{font-weight:600}
.prose .dsb-table tr:last-child td,.prose .dsb-table tr:last-child th{border-bottom:0}
.prose .dsb-vs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:1.6em 0}
.prose .dsb-vs > div{padding:18px 20px;border-radius:12px;background:var(--white);box-shadow:inset 0 0 0 1px rgba(1,14,14,.08)}
.prose .dsb-vs > div > b:first-child{display:block;margin-bottom:8px;font:500 13px/1 var(--f-text);letter-spacing:.04em;text-transform:uppercase;color:var(--stone)}
.prose .dsb-vs ul{margin:0}
@media (max-width:620px){.prose .dsb-vs{grid-template-columns:1fr}}
.prose .dsb-fig{margin:2em 0}
.prose .dsb-fig img,.prose .dsb-fig svg{display:block;width:100%;height:auto;border-radius:10px}
.prose .dsb-fig figcaption{margin-top:10px;font:400 14px/1.45 var(--f-text);color:var(--stone)}
.prose .dsb-flow{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;margin:1.6em 0;padding:0;list-style:none}
.prose .dsb-flow li{flex:1 1 140px;margin:0!important;padding:14px 16px;border-radius:10px;background:var(--pp,var(--dsb-p));font:500 15px/1.35 var(--f-text);position:relative}
.prose .dsb-flow li small{display:block;margin-top:4px;font-weight:400;color:var(--ink-soft)}
.prose .dsb-refs{font-size:14.5px;line-height:1.5;color:var(--ink-soft);padding-left:1.4em}
.prose .dsb-refs a{word-break:break-word}
.prose .dsb-disclose{font:400 14.5px/1.5 var(--f-text);color:var(--stone);padding:12px 16px;border-radius:10px;background:var(--white);box-shadow:inset 0 0 0 1px rgba(1,14,14,.08)}

/* ——— offres d'emploi ——— */
.job-facts{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.job-facts li{display:flex;flex-direction:column;gap:4px;padding:12px 16px;border-radius:10px;background:var(--white);box-shadow:inset 0 0 0 1px rgba(1,14,14,.08)}
.job-facts span{font:500 12px/1 var(--f-text);color:var(--stone);text-transform:uppercase;letter-spacing:.04em}
.job-facts b{font:500 16px/1.2 var(--f-text)}
.job-body{grid-template-columns:minmax(0,1fr) minmax(260px,320px)}
.job-card{padding:24px;border-radius:12px;background:var(--ink);color:var(--white);gap:14px}
.job-card b{font:400 26px/1.1 var(--f-display)}
.job-card p{margin:0;font:400 15px/1.5 var(--f-text);color:rgba(251,250,247,.75)}
.job-card .hb-1{background:var(--signal);color:var(--ink)!important}
.job-card .hb-2{background:transparent;color:var(--white)!important;box-shadow:inset 0 0 0 1px rgba(251,250,247,.4)!important}
@media (max-width:900px){.job-body{grid-template-columns:1fr}.job-card{order:-1}}

.a8-share a,.a8-share button{display:inline-flex;align-items:center;gap:6px}
.di{flex:0 0 auto;vertical-align:-2px}