@import url('/styles/showcase-tilt.css');
/* Use-case and story illustrations from the approved Outil export. */
/* Plain label wrappers are not the context chips styled by the legacy .cas rule. */
.pv span{font:inherit;background:none;border-radius:0;padding:0}
.vues-sw{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--aub-14);border-radius:999px;margin-bottom:2.6rem;font-family:var(--ui)}
.vues-sw button{min-height:44px;padding:0 1.2rem;border:none;border-radius:999px;background:none;color:var(--aubergine);font:inherit;font-size:.92rem;cursor:pointer;transition:background .2s,color .2s}
.vues-sw button:hover{background:var(--ivoire)}
.vues-sw button.on{background:var(--aubergine);color:var(--ivoire)}
.vues{display:grid}
.vue{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.vue.on{opacity:1;visibility:visible;transition:opacity .35s}
.vue .compo{width:min(300px,86%)}
@media(max-width:940px){.vue{align-self:start;align-content:start}.vue:not(.on){display:none}}
@media(max-width:480px){.vues-sw{display:flex}.vues-sw button{flex:1;padding:0 .6rem;font-size:.86rem}}
.cas .pv{background:var(--ivoire);border-radius:26px;padding:1.3rem;width:min(360px,100%);font-family:var(--ui);display:flex;flex-direction:column;gap:.6rem}
.pv .pv-t{display:flex;flex-direction:column;padding:.2rem .3rem .6rem}
.pv .pv-t b{font-family:'Caslon Doric',Georgia,serif;font-weight:400;font-size:1.3rem}
.cas .pv small{font-size:.76rem;color:var(--aub-70);display:block}
.pv .pv-r{background:var(--blanc);border-radius:16px;padding:.75rem .85rem;display:grid;grid-template-columns:34px 1fr auto;gap:.75rem;align-items:center}
.pv .pv-r b{font-weight:500;font-size:.9rem;display:block}
.pv .pv-i{width:34px;height:34px;border-radius:50%;background:var(--lilas);display:grid;place-items:center}
.pv .pv-i img{width:16px;height:16px}
.pv .pv-r em{font-style:normal;font-size:.72rem;padding:.2rem .6rem;border-radius:999px;background:var(--matcha)}
.pv .pv-r.al .pv-i,.pv .pv-r.al em{background:var(--sable)}
.pv .pv-m{background:var(--aubergine);color:var(--ivoire);border-radius:16px 16px 4px 16px;padding:.75rem .9rem;margin-left:1.6rem}
.pv .pv-m.g{background:var(--blanc);color:var(--aubergine);border-radius:16px 16px 16px 4px;margin:0 1.6rem 0 0}.pv .pv-m.g small{color:var(--aub-70)}
.pv .cx{gap:.6rem}
.cas .pv small.cx-lbl{font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--aub-45);padding:.2rem .2rem 0}
.pv .cx-mail,.pv .cx-web{background:var(--blanc);border-radius:18px;overflow:hidden}
.pv .cx-tete{background:var(--ciel);padding:.7rem 1rem;display:flex;align-items:center;gap:.6rem}
.pv .cx-tete i{width:20px;height:20px;border-radius:50%;background:var(--aubergine);display:block}
.pv .cx-tete b{font-family:'Caslon Doric',Georgia,serif;font-weight:400;font-size:1.02rem}
.pv .cx-corps{padding:.9rem 1rem 1rem;display:flex;flex-direction:column;gap:.6rem}
.pv .cx-titre{font-weight:500;font-size:.98rem;line-height:1.3}
.pv .cx-champ{border-top:1px solid var(--aub-14);padding-top:.5rem}
.pv .cx-champ b{font-weight:500;font-size:.9rem;display:block}
.cas .pv .cx-btn{background:var(--aubergine);color:var(--ivoire);border-radius:999px;padding:.55rem 1rem;font-size:.84rem;font-weight:500;text-align:center;margin-top:.2rem}
.pv .cx-barre{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.7rem .9rem;border-bottom:1px solid var(--aub-14)}
.pv .cx-barre b{font-weight:500;font-size:.86rem;display:block}
.pv .cx-barre em{font-style:normal;font-size:.68rem;background:var(--lilas);border-radius:999px;padding:.3rem .65rem;text-align:center;line-height:1.25;max-width:9.5rem}
.pv .cx-msg{display:grid;grid-template-columns:28px 1fr;gap:.6rem;padding:.8rem .9rem .6rem}
.pv .cx-msg i{width:28px;height:28px;border-radius:50%;background:var(--matcha);font-style:normal;font-size:.68rem;font-weight:500;display:grid;place-items:center}
.pv .cx-msg b{font-weight:500;font-size:.86rem;display:block}
.pv .cx-msg b small{display:inline;margin-left:.3rem}
.pv .cx-msg p{font-size:.88rem;line-height:1.4;margin:.1rem 0 0;color:var(--aubergine)}
.pv .cx-saisie{margin:0 .9rem .8rem;border-radius:999px;background:var(--ivoire);padding:.5rem .9rem;font-size:.8rem;color:var(--aub-70)}
.cas .pv.t-ciel{background:var(--ciel)}.cas .pv.t-sable{background:var(--sable)}.cas .pv.t-lilas{background:var(--lilas)}.cas .pv.t-matcha{background:var(--matcha)}
.cas .pv.t-lilas .pv-i{background:var(--ivoire)}
.pv .tab{background:var(--blanc);border:7px solid var(--aubergine);border-radius:24px;padding:1.1rem 1.1rem 1rem}
.pv .tab-h b{font-family:'Caslon Doric',Georgia,serif;font-weight:400;font-size:1.3rem;display:block}
.pv .tab-q{font-size:.98rem;font-weight:500;margin:.9rem 0 .5rem;color:var(--aubergine)}
.pv .tab-o span{display:block;border:1px solid var(--aub-14);border-radius:12px;padding:.6rem .8rem;font-size:.88rem;margin-top:.4rem}
.pv .tab-o span.on{background:var(--lilas);border-color:transparent;font-weight:500}
.pv .tab-f{display:flex;align-items:center;justify-content:space-between;margin-top:.9rem}.pv .tab-f .cx-btn{margin:0}
.pv .vid{position:relative;aspect-ratio:16/10;border-radius:16px;background:var(--aubergine);display:grid;place-items:center}
.pv .vid-p{width:52px;height:52px;border-radius:50%;background:var(--ivoire);display:grid;place-items:center}.pv .vid-p img{width:20px;height:20px}
.pv .vid em{position:absolute;left:.7rem;bottom:.7rem;font-style:normal;font-size:.7rem;background:var(--ivoire);border-radius:999px;padding:.22rem .6rem}
.cas .pv .vid small{position:absolute;right:.8rem;bottom:.75rem;color:var(--ivoire)}
.pv .av{display:flex;align-items:center}
.pv .av i{width:28px;height:28px;border-radius:50%;background:var(--lilas);box-shadow:0 0 0 2px var(--blanc);font-style:normal;font-size:.64rem;font-weight:500;display:grid;place-items:center;margin-right:.3rem}
.pv .av i.pt{background:var(--sable)}
.cas .pv .av small{margin-left:.4rem}
.pv .t-sable>.av i{background:var(--blanc);box-shadow:none}
.pv .seg{display:flex;gap:4px;background:rgba(255,255,255,.6);border-radius:999px;padding:4px}
.pv .seg span{flex:1;text-align:center;font-size:.8rem;padding:.4rem 0;border-radius:999px}
.pv .seg span.on{background:var(--aubergine);color:var(--ivoire);font-weight:500}
.pv .bx{background:var(--blanc);border-radius:18px;overflow:hidden}
.pv .bx-r{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.8rem .9rem}
.pv .bx-r+.bx-r{border-top:1px solid var(--aub-14)}
.pv .bx-r b{font-weight:500;font-size:.9rem;display:block}
.pv .bx-r em{font-style:normal;font-size:.76rem;font-weight:500;background:var(--aubergine);color:var(--ivoire);border-radius:999px;padding:.35rem .8rem;white-space:nowrap}
.pv .bx-r i{width:28px;height:28px;border-radius:50%;background:var(--ivoire);font-style:normal;font-size:.64rem;font-weight:500;display:grid;place-items:center;flex-shrink:0}
.pv .eq{display:flex;gap:.4rem;flex-wrap:wrap}
.pv .eq span{background:var(--blanc);border-radius:999px;padding:.35rem .8rem;font-size:.82rem}
.pv .tj{background:var(--blanc);border-radius:16px;padding:.75rem .85rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.pv .tj b{font-weight:500;font-size:.9rem;display:block}
.pv .vx{background:var(--blanc);border-radius:18px;padding:.9rem}
.pv .vx-h{display:grid;grid-template-columns:34px 1fr;gap:.75rem;align-items:center}
.pv .vx-h b{font-weight:500;font-size:.9rem;display:block}
.pv .onde{display:flex;align-items:center;gap:3px;height:36px;margin:.8rem 0}
.pv .onde i{flex:1;background:var(--aubergine);border-radius:2px;display:block}
.pv .vx-t{border-top:1px solid var(--aub-14);padding-top:.6rem}
.pv .vx-t p{font-size:.88rem;line-height:1.45;margin:.2rem 0 0;color:var(--aubergine)}
.pv .fm{background:var(--blanc);border-radius:18px;padding:1rem}
.pv .fm-h b{font-family:'Caslon Doric',Georgia,serif;font-weight:400;font-size:1.12rem;display:block}
.pv .fm-c{border-top:1px solid var(--aub-14);margin-top:.6rem;padding-top:.5rem}
.pv .fm-c b{font-weight:500;font-size:.9rem;display:block}
.pv .fm-k{display:grid;grid-template-columns:26px 1fr;gap:.6rem;align-items:center;background:var(--matcha);border-radius:12px;padding:.6rem .7rem;margin-top:.8rem}
.pv .fm-k b{font-weight:500;font-size:.88rem;display:block}
.pv .ck{width:26px;height:26px;border-radius:50%;background:var(--blanc);display:grid;place-items:center}.pv .ck img{width:13px;height:13px}
.pv .pv-m small{color:var(--iv-80);margin-bottom:.25rem}
.pv .pv-m p{font-size:.9rem;line-height:1.45;margin:0}
/* Both readings remain available without JavaScript and in static text exports. */
.vues-sw{display:none}
.vues{display:grid;gap:3rem}
.vue{grid-area:auto;opacity:1;visibility:visible;transition:none}
.vue:not(.on){display:grid}
[data-case-tabs-ready] .vues-sw{display:inline-flex}
[data-case-tabs-ready] .vues{gap:0}
[data-case-tabs-ready] .vue{grid-area:1/1;transition:none}
[data-case-tabs-ready] .vue.on{opacity:1;visibility:visible;transition:none}
[data-case-tabs-ready] .vue[hidden]{display:grid;opacity:0;visibility:hidden;pointer-events:none;transition:none}
[data-case-tabs-ready][data-case-fading] .vue{opacity:var(--case-panel-opacity);visibility:visible}
[data-case-tabs-ready] .vue[inert]{pointer-events:none}
[data-case-tabs-ready] .vues-sw button{transition:none}
.vues-sw button:focus-visible{outline:3px solid var(--aubergine);outline-offset:3px}
.cas-txt a{text-decoration:underline;text-underline-offset:3px}
.case-story-first-lead>h2+p{color:var(--aubergine);font-size:1.1rem}
@media(max-width:940px){[data-case-tabs-ready] .vue[hidden]{display:none}}
@media(max-width:480px){[data-case-tabs-ready] .vues-sw{display:flex}}

/* Scroll chapters hold both readings at one comfortable height. */
.cas[data-case-pinned]{display:block}
.cas[data-case-pinned]>.wrap{position:sticky;top:var(--case-pin-top);overflow-anchor:none}
@media(min-width:941px){
  [data-case-roomier] .case-usecase{grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:32px}
  [data-case-roomier] .case-usecase .cas-txt h2,[data-case-roomier] .case-usecase .cas-txt p{max-width:none}
}
.case-scroll-meta{display:none;visibility:hidden;margin:10px 0 24px}
[data-case-scroll-layout] .case-scroll-meta{display:block}
[data-case-scroll-layout] .vues-sw{margin-bottom:0}
.cas[data-case-pinned] .case-scroll-meta{visibility:visible}
.case-scroll-hint{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;padding:0}
.case-scroll-progress{position:relative;width:min(8rem,calc(var(--case-switcher-width,24rem)*.4));max-width:100%;margin-inline-start:calc(var(--case-switcher-width,24rem)*.5);transform:translateX(-50%);height:3px;overflow:hidden;border-radius:3px;background:rgba(74,57,76,.14)}
.case-scroll-progress>.case-progress-fill{position:absolute;inset:0;padding:0;border-radius:inherit;background:var(--aubergine);transform:scaleX(var(--case-progress,0));transform-origin:left}
.case-scroll-progress::after{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:white}
[data-case-tabs]{scroll-margin-top:100px}
@media(prefers-reduced-motion:reduce){.vue,.vues-sw button{transition:none!important}}
.cas-txt .caps a{text-decoration:underline;text-underline-offset:.14em;color:inherit}