@charset "UTF-8";.dp-banner-demo p{margin:0}.dp-banner-demo strong{font-weight:700}.dp-banner-demo ul,.dp-banner-demo ol{margin:0;padding:0}@media(prefers-reduced-motion:reduce){.dp-banner-demo .dp-banner-container,.dp-banner-demo .dp-banner-container *,.dp-banner-demo .dp-banner-container *:before,.dp-banner-demo .dp-banner-container *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.dp-banner-demo .dp-banner{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;display:flex;flex-direction:column;max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);overflow:hidden;position:relative;box-sizing:border-box;font-size:.9em;font-weight:400;line-height:1.5;padding-top:60px;text-align:left;z-index:10000;width:100%;background-color:var(--background);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);box-shadow:0 8px 40px #0000001f,0 2px 8px #0000000f,inset 0 0 0 1px #ffffff40;border-radius:20px 20px 0 0}.dp-banner-demo .dp-banner.has-fixed-font{font-size:14px}.dp-banner-demo .dp-banner-content{overflow:auto;padding:.5em 1.25em 1em}@media(min-width:520px){.dp-banner-demo .dp-banner{font-size:1rem;width:500px;border-radius:20px}.dp-banner-demo .dp-banner.has-fixed-font{font-size:16px}}.dp-banner-demo .dp-banner .dp-banner-receipt-link{display:block;padding:8px 16px;border-top:1px solid #f0f0f0;background:var(--background);color:var(--text);opacity:.65;font-size:12px;text-align:center;text-decoration:none;flex-shrink:0;transition:opacity .2s ease}.dp-banner-demo .dp-banner .dp-banner-receipt-link:hover,.dp-banner-demo .dp-banner .dp-banner-receipt-link:focus-visible{opacity:1;text-decoration:underline}.dp-banner-demo .dp-banner .dp-banner-receipt-link.is-preview{cursor:default}.dp-banner-demo .dp-banner .dp-banner-receipt-link.is-preview:hover{opacity:.65;text-decoration:none}@media(prefers-reduced-motion:reduce){.dp-banner-demo .dp-banner .dp-banner-receipt-link{transition:none}}.dp-banner-demo .dp-banner-step-group{position:relative;overflow:hidden}.dp-banner-demo .dp-banner-step-wrapper.is-active{opacity:1}.dp-banner-demo .dp-banner-step-wrapper.is-entering{animation:dp-step-enter .34s cubic-bezier(.22,.61,.36,1) .24s both}.dp-banner-demo .dp-banner-step-wrapper.is-leaving{position:absolute;top:0;left:0;right:0;pointer-events:none;animation:dp-step-leave .24s cubic-bezier(.4,0,1,1) forwards}@keyframes dp-step-enter{0%{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}@keyframes dp-step-leave{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.985)}}.dp-banner-demo .dp-banner-step{display:block}.dp-banner-demo .dp-banner-step-title,.dp-banner-demo .dp-banner-step-subtitle{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;color:var(--title);word-break:break-word;padding:0;margin-top:0;margin-bottom:.75em}.dp-banner-demo .dp-banner-step-title{font-size:1.25rem}.dp-banner.has-fixed-font .dp-banner-demo .dp-banner-step-title{font-size:20px}.dp-banner-demo .dp-banner-step-title{font-weight:600;line-height:1.125}.dp-banner-demo .dp-banner-step-subtitle{font-size:1.15rem}.dp-banner.has-fixed-font .dp-banner-demo .dp-banner-step-subtitle{font-size:18px}.dp-banner-demo .dp-banner-step-subtitle{margin-top:-.75rem;font-weight:400;line-height:1.25}.dp-banner-demo .dp-banner-step-description{color:var(--text);white-space:pre-wrap;margin:0;line-height:1.6}.dp-banner-demo .dp-banner-step-policy-url{font-size:.9em}.dp-banner.has-fixed-font .dp-banner-demo .dp-banner-step-policy-url{font-size:14px}.dp-banner-demo .dp-banner-step-policy-url{display:inline-block;color:#888;transition:color .2s cubic-bezier(.22,.61,.36,1)}.dp-banner-demo .dp-banner-step-policy-url:hover{color:var(--button)}.dp-banner-demo .dp-banner-info{display:flex;margin-top:1.5rem;justify-content:space-between;align-items:center}.dp-banner-demo .dp-banner-info:before,.dp-banner-demo .dp-banner-info:after{display:none}.dp-banner-demo .dp-banner-logo{width:auto;height:36px;opacity:.7}.dp-banner-demo .dp-banner-vendor-group-list{border-radius:12px;border:1px solid #e5e7eb;overflow:hidden}.dp-banner-demo .dp-banner-vendor-group-list .dp-banner-vendor:not(:last-child){border-bottom:1px solid #e5e7eb}.dp-banner-demo .dp-banner-toggle-input-container{display:flex;justify-content:flex-end;margin-bottom:8px}.dp-banner-demo .dp-banner-toggle-input{display:flex;align-items:center;margin:0;padding:0;font-size:.85em;color:#666}.dp-banner-demo .dp-banner-toggle-input label{margin-right:8px}.dp-banner-demo .dp-banner-vendor{position:relative;padding:10px 16px;align-items:center;transition:background-color .2s cubic-bezier(.22,.61,.36,1)}.dp-banner-demo .dp-banner-vendor:hover{background-color:#00000005}.dp-banner-demo .dp-banner-vendor.is-expandable .dp-banner-vendor-chevron{display:block}.dp-banner-demo .dp-banner-vendor.is-expandable .dp-banner-vendor-header{cursor:pointer}.dp-banner-demo .dp-banner-vendor.is-expanded .dp-banner-vendor-chevron{transform:rotate(90deg)}.dp-banner-demo .dp-banner-vendor.is-expanded .dp-banner-vendor-more{max-height:500px;opacity:1}.dp-banner-demo .dp-banner-vendor-header{position:relative;display:grid;grid-template-columns:16px 1fr 50px;grid-template-rows:auto auto;grid-template-areas:"icon name switch" "purpose purpose switch" "more more more";grid-gap:4px;align-items:center;padding-left:1rem}.dp-banner-demo .dp-banner-vendor-chevron{display:none;position:absolute;left:-8px;width:16px;height:16px;color:#aaa;transition:transform .2s cubic-bezier(.22,.61,.36,1)}.dp-banner-demo .dp-banner-vendor-icon{grid-area:icon;width:16px;height:16px;border-radius:3px}.dp-banner-demo .dp-banner-vendor-name{grid-area:name;display:flex;align-items:center;font-size:.9em;font-weight:500;margin:0;padding:0}.dp-banner-demo .dp-banner-vendor-privacy{width:16px;height:16px;line-height:16px;text-align:center;text-decoration:none;color:#000;margin-left:.25rem;outline:0;fill:#aaa;transition:fill .2s cubic-bezier(.22,.61,.36,1)}.dp-banner-demo .dp-banner-vendor-privacy:hover svg{fill:var(--button)}.dp-banner-demo .dp-banner-vendor-privacy svg{width:16px;height:16px}.dp-banner-demo .dp-banner-vendor-purpose{grid-area:purpose;font-size:.75em;margin:0;padding:0;color:#888}.dp-banner-demo .dp-banner-vendor-switch{grid-area:switch;text-align:center}.dp-banner-demo .dp-banner-vendor-more{font-size:.9em}.dp-banner.has-fixed-font .dp-banner-demo .dp-banner-vendor-more{font-size:14px}.dp-banner-demo .dp-banner-vendor-more{grid-area:more;max-height:0;opacity:0;overflow:hidden;transition:max-height .34s cubic-bezier(.45,0,.55,1),opacity .34s cubic-bezier(.22,.61,.36,1)}.dp-banner-demo .dp-banner-vendor-details{display:flex;padding-top:.75rem}.dp-banner-demo .dp-banner-vendor-details-column{flex:1;padding:0 8px}.dp-banner-demo .dp-banner-vendor-details-column:not(:last-child){border-right:1px solid #e5e7eb}.dp-banner-demo .dp-banner-vendor-details-label{text-align:center;font-weight:600;margin-bottom:.25rem}.dp-banner-demo .dp-banner-vendor-details-item{font-size:.75rem}.dp-banner.has-fixed-font .dp-banner-demo .dp-banner-vendor-details-item{font-size:12px}.dp-banner-demo .dp-banner-vendor-details-item{text-align:center;list-style:none}.dp-banner-demo .dp-banner-switch{position:relative;display:inline-block;width:44px;height:34px}.dp-banner-demo .dp-banner-switch.disabled{opacity:.36}.dp-banner-demo .dp-banner-switch-input{opacity:0;width:0;height:0}.dp-banner-demo .dp-banner-switch-slider{position:absolute;cursor:pointer;inset:8px 0;background-color:var(--refusing);transition:background-color .2s cubic-bezier(.22,.61,.36,1);border-radius:34px}.dp-banner-demo .dp-banner-switch-slider:before{position:absolute;content:"";height:22px;width:22px;left:-1px;bottom:-2px;background-color:#fff;box-shadow:0 1px 4px #0003,0 0 0 1px #0000000d;transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s cubic-bezier(.22,.61,.36,1);border-radius:50%}.dp-banner-demo .dp-banner-switch-input:checked+.dp-banner-switch-slider{background-color:var(--accepting)}.dp-banner-demo .dp-banner-switch-input:checked+.dp-banner-switch-slider:before{transform:translate(24px);box-shadow:0 1px 6px #00000040,0 0 0 1px #0000000d}.dp-banner-demo .dp-banner-switch-input:focus-visible+.dp-banner-switch-slider{outline:2px solid var(--button);outline-offset:2px}.dp-banner-demo .dp-banner-button{font-size:.9em}.dp-banner.has-fixed-font .dp-banner-demo .dp-banner-button{font-size:14px}.dp-banner-demo .dp-banner-button{padding:.85em .75em;background:none;border:none;cursor:pointer;font-weight:600;color:var(--text);position:relative;transition:background-color .2s cubic-bezier(.22,.61,.36,1),transform .2s cubic-bezier(.22,.61,.36,1)}.dp-banner-demo .dp-banner-button.dp-accent{color:var(--button);font-weight:700;background-color:#00000005}.dp-banner-demo .dp-banner-button:focus{outline:none}.dp-banner-demo .dp-banner-button:focus-visible{outline:2px solid var(--button);outline-offset:-2px;border-radius:4px}.dp-banner-demo .dp-banner-button:hover{background-color:#0000000a}.dp-banner-demo .dp-banner-button.dp-accent:hover{background-color:#0000000f}.dp-banner-demo .dp-banner-button:active{transform:scale(.97);background-color:#0000000f}.dp-banner-demo .dp-banner-button.dp-accent:active{background-color:#0000001a}.dp-banner-demo .dp-banner .dp-banner-button-group{background:var(--background);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-top:1px solid #e5e7eb;display:flex;align-items:stretch;flex-shrink:0}.dp-banner-demo .dp-banner .dp-banner-button-group .dp-banner-button{flex-basis:0;flex-grow:1;flex-shrink:0}.dp-banner-demo .dp-banner .dp-banner-button-group .dp-banner-button:not(:first-child):before{content:"";border-left:1px solid #e5e7eb;position:absolute;left:0;top:8px;bottom:8px}.dp-banner-demo .dp-banner-progress-bar-container{position:relative;flex-shrink:0;display:block;width:100%;height:4px;background-color:var(--separator);overflow:hidden}.dp-banner-demo .dp-banner-progress-bar{position:absolute;left:0;top:0;bottom:0;max-width:100%;background:var(--button);transition:width .1s linear;border-radius:0 2px 2px 0}.dp-banner-demo .dp-banner-wave{height:50px;z-index:100;position:absolute;width:100%;top:0}.dp-banner-demo .dp-banner-wave:before{content:"";position:absolute;width:100%;height:25px;background-color:var(--wave)}.dp-banner-demo .dp-banner-wave-back,.dp-banner-demo .dp-banner-wave-front{max-height:none;position:absolute;left:0;width:100%;height:auto}.dp-banner-demo .dp-banner-wave-back{top:5px}.dp-banner-demo .dp-banner-wave-front{top:0}.demo2{display:grid;gap:1rem;grid-template-areas:"panel" "banner" "hint"}.demo2__panel{grid-area:panel}.demo2__banner-host{grid-area:banner}.demo2__hint{grid-area:hint}@media(min-width:1024px){.demo2{grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);grid-template-areas:"banner panel" "hint hint";align-items:start;gap:1rem 1.5rem}}.demo2__panel{overflow:hidden}.demo2__tab{margin-inline-start:.5rem;color:var(--color-ink-content)}.demo2__badge{padding:.1rem .5rem;border-radius:9999px;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in oklch,var(--color-primary) 85%,white);background:color-mix(in oklch,var(--color-primary) 18%,transparent);border:1px solid color-mix(in oklch,var(--color-primary) 35%,transparent)}.demo2__url{margin-inline-start:auto;opacity:.55}@media(max-width:380px){.demo2__url{display:none}}.demo2__list{margin:0;padding:.35rem 0;list-style:none}.demo2__row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name pill" "host pill";gap:0 .75rem;align-items:center;padding:.5rem 1rem;border-block-end:1px solid color-mix(in oklch,white 5%,transparent);transition:opacity .3s var(--ease-out-expo)}.demo2__row:last-child{border-block-end:0}.demo2__name{grid-area:name;font-size:.85rem;font-weight:600;transition:opacity .3s var(--ease-out-expo)}.demo2__host{grid-area:host;font-size:.7rem;opacity:.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.demo2__pill{grid-area:pill;justify-self:end;font-size:.68rem;padding:.2rem .55rem;border-radius:9999px;border:1px solid currentColor;white-space:nowrap}.demo2__pill--attente,.demo2__pill--essentiel{color:color-mix(in oklch,var(--color-ink-content) 45%,transparent)}.demo2__pill--charge{color:var(--color-warning)}.demo2__pill--bloque{color:var(--color-mint)}.demo2__row--bloque .demo2__name{opacity:.35;text-decoration:line-through;text-decoration-color:color-mix(in oklch,var(--color-mint) 60%,transparent)}.demo2__banner-host{position:relative}.demo2__banner-host .dp-banner{position:static;max-width:none;width:100%}.demo2__hint{font-size:.72rem;text-align:center;color:color-mix(in oklch,var(--color-base-content) 55%,transparent)}@media(max-width:639px){.demo2__row{grid-template-areas:"name pill";padding-block:.4rem}.demo2__host{display:none}}@media(min-width:640px){.demo2__row{grid-template-columns:10rem minmax(0,1fr) auto;grid-template-areas:"name host pill"}}@media(min-width:1024px){.demo2__url{display:none}.demo2__row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name pill" "host pill";padding-block:.55rem}}
