/*
 * The cookie notice and the cookie settings: the whole look of the consent library's markup (js/consent.js).
 * The library's own stylesheet is not loaded; this file takes its place at the end of the page
 * (bulltraders_page_bottom() in bulltraders.module), so every state the library switches is styled here:
 * `html.show--consent` shows the notice (.cm), `html.show--preferences` the settings (.pm) and their veil
 * (.pm-overlay), and `.is-expanded` unfolds a row's description. docs/design.md, "The building blocks".
 */
#cc-main{position:fixed;z-index:2147483647;color:var(--color-text);font:400 var(--text-sm)/1.3 var(--font-sans)}
/* The site's own rules for buttons, headings and form fields stop here. */
#cc-main :is(button,h2,p,label,input){all:unset;box-sizing:border-box}
#cc-main :is(button,label,input){cursor:pointer;touch-action:manipulation}
/* The library moves the focus to an empty element at the start of each dialog; that one shows no ring. */
#cc-main div{outline:0;animation:none}
#cc-main :is(button,a):focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;border-radius:var(--radius-m)}
/* Read by a screen reader, not drawn: the notice's title and the name of each switch. */
#cc-main :is(.cm__title,.toggle__label){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#cc-main :is(.pm__section-arrow,.toggle__icon-on,.toggle__icon-off){display:none}

/* The notice: a band along the bottom edge, 100 px high on a phone (8 px, two lines of 16 px, 8 px, buttons of 40 px, 12 px). It appears without moving, because nothing moves while a page loads; it leaves and steps aside in 180 ms. */
#cc-main .cm{position:fixed;inset:auto 0 0;visibility:hidden;overflow:hidden;border-radius:var(--radius-l) var(--radius-l) 0 0;background:var(--color-bg-card);box-shadow:inset 0 0 0 1px var(--color-line),var(--shadow-sheet);translate:0 110%;transition:translate var(--t-exit) var(--ease-in),visibility var(--t-exit)}
.show--consent #cc-main .cm{visibility:visible;translate:0 0;transition-duration:var(--t-sheet);transition-timing-function:var(--ease-sheet)}
/* It never covers what the visitor is doing: while a filter sheet, the menu or the language list is open it steps aside. */
html:has(.tool-sheet:target,.nav-toggle:checked,.language-sheet:target) #cc-main .cm{visibility:hidden;translate:0 110%;transition-duration:var(--t-exit);transition-timing-function:var(--ease-in)}
#cc-main .cm__body{display:flex;flex-direction:column;gap:8px;padding:8px var(--gutter) calc(12px + env(safe-area-inset-bottom,0px))}
#cc-main .cm__desc{display:block;color:var(--color-text-muted);font-size:var(--text-xs);line-height:1rem;text-wrap:pretty}
/* "Manage" is a link inside the sentence; the area around it gives the finger 44 px without reaching the two buttons. */
#cc-main .cm__desc button{position:relative;color:var(--color-text);font-weight:700;text-decoration:underline;text-underline-offset:3px}
#cc-main .cm__desc button::after{content:"";position:absolute;inset:-24px -8px -4px}
/* "Reject all" and "Accept all" are an equal pair: one size, one weight, one neutral colour, with the ring of an outlined button.
   A button is drawn 40 px high and its ::after gives the finger 44 px. */
#cc-main .cm__btn-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#cc-main :is(.cm__btn,.pm__btn){position:relative;display:flex;align-items:center;justify-content:center;min-height:40px;padding:2px 8px;border-radius:var(--radius-m);background:var(--color-consent);box-shadow:inset 0 0 0 1.5px var(--color-control);color:var(--color-on-consent);font-weight:800;letter-spacing:-.005em;line-height:1.15;text-align:center;overflow-wrap:anywhere}
#cc-main :is(.cm__btn,.pm__btn)::after{content:"";position:absolute;inset:-2px 0}
#cc-main :is(.cm__btn,.pm__btn):active{scale:.97}
/* The code keeps "Accept all" first; the eye meets "Reject all" first, in the notice and in the settings. */
#cc-main [data-role=necessary]{order:-1}
/* One row from 768 px and on a low screen (a phone held sideways). */
@media(min-width:768px),(max-height:31rem) and (min-width:35rem){
  #cc-main .cm__body{flex-direction:row;align-items:center;gap:24px;width:min(1200px,100% - 2 * var(--gutter));margin-inline:auto;padding:8px 0}
  #cc-main .cm__texts{flex:1}
  #cc-main .cm__desc{font-size:var(--text-row);line-height:1.125rem}
  #cc-main .cm__desc button::after{inset:-16px -8px -10px}
  #cc-main .cm__btns{flex:none;min-width:17rem}
}

/* The settings: the site's sheet under the black bar, 202 px high on a phone until a row is unfolded. */
#cc-main .pm-overlay{position:fixed;inset:0;visibility:hidden;background:var(--color-scrim);opacity:0;transition:opacity var(--t-exit) linear,visibility var(--t-exit)}
#cc-main .pm{position:fixed;inset:auto 0 0;display:flex;flex-direction:column;visibility:hidden;max-height:calc(100dvh - var(--header-height) - 8px);border-radius:var(--radius-l) var(--radius-l) 0 0;background:var(--color-bg-card);box-shadow:var(--shadow-sheet);translate:0 100%;transition:translate var(--t-exit) var(--ease-in),visibility var(--t-exit),opacity var(--t-exit)}
/* The library marks a dialog with `cc--anim` a moment after it has made it, so the settings rise on their first opening too. */
.show--preferences #cc-main .cc--anim .pm-overlay{visibility:visible;opacity:1}
.show--preferences #cc-main .cc--anim .pm{visibility:visible;translate:0 0;transition-duration:var(--t-sheet);transition-timing-function:var(--ease-sheet)}
#cc-main .pm__header{display:flex;flex:none;align-items:center;justify-content:space-between;padding:4px 4px 0 16px}
#cc-main .pm__title{font-size:var(--text-body);font-weight:800;letter-spacing:-.02em}
#cc-main .pm__close-btn{display:grid;flex:none;place-items:center;width:44px;height:44px}
#cc-main .pm__close-btn svg{width:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
#cc-main .pm__body{padding:0 16px;overflow-y:auto;overscroll-behavior:contain}
#cc-main .pm__section--toggle+.pm__section--toggle,#cc-main .pm__footer{border-top:1px solid var(--color-line)}
/* A row: its name, which unfolds the description on a tap, and one switch of 44 x 26 px in a tap area of 44 x 44 px. */
#cc-main .pm__section-title-wrapper{position:relative;display:flex}
#cc-main .pm__section-title{display:flex;flex:1;flex-direction:column;justify-content:center;min-height:44px;padding:4px 56px 4px 0;font-weight:600;line-height:1.3}
#cc-main small{color:var(--color-text-dim);font-size:var(--text-micro);font-weight:400}
#cc-main .section__toggle-wrapper{position:absolute;inset:0 0 0 auto;display:grid;place-items:center;width:44px}
#cc-main .section__toggle{position:absolute;inset:0;width:100%;height:100%}
/* Off: the track is the control colour (3 to 1 against the sheet) with a white knob; the knob is a dot. */
#cc-main .toggle__icon{width:44px;height:26px;border-radius:var(--radius-m);background:var(--color-control);transition:background-color var(--t-release)}
#cc-main .toggle__icon-circle{display:block;width:22px;height:22px;margin:2px;border-radius:50%;background:var(--color-tile);transition:translate var(--t-release) var(--ease-out)} /* design-standard: dot */
/* On: the theme's primary with the knob in the primary's own text colour (white on evergreen, dark on the calm green). */
#cc-main :checked~.toggle__icon{background:var(--color-primary)}
#cc-main :checked~.toggle__icon .toggle__icon-circle{background:var(--color-on-primary);translate:18px}
/* The row that cannot be switched off is the primary at half strength. The ring of a focused switch is drawn around its track. */
#cc-main :disabled{cursor:default}
#cc-main :disabled~.toggle__icon{background:color-mix(in srgb,var(--color-primary) 50%,var(--color-bg-card))}
#cc-main :disabled~.toggle__icon .toggle__icon-circle{background:var(--color-tile)}
#cc-main :focus-visible~.toggle__icon{outline:2px solid var(--color-focus);outline-offset:2px}
#cc-main .pm__section-desc-wrapper{display:none;padding:0 0 12px;color:var(--color-text-muted);font-size:var(--text-row);line-height:1.5}
#cc-main .is-expanded .pm__section-desc-wrapper{display:block}
#cc-main .pm__section-desc a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* One row of three compact buttons; "Save" is outlined. */
#cc-main .pm__footer{display:grid;flex:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}
#cc-main .pm__btn-group{display:contents}
/* 13 px on a phone, so that "akzeptieren" and "Enregistrer" stay whole in a third of 360 px. */
#cc-main .pm__btn{font-size:var(--text-row)}
#cc-main .pm__btn--secondary{background:none}
/* A tablet and a desktop: the same settings as a card in the middle of the window. */
@media(min-width:640px){
  #cc-main .pm{inset:50% auto auto 50%;width:min(30rem,100% - 32px);max-height:calc(100dvh - 32px);border-radius:var(--radius-l);box-shadow:var(--shadow-float);translate:-50% calc(12px - 50%);opacity:0}
  .show--preferences #cc-main .cc--anim .pm{translate:-50% -50%;opacity:1}
  #cc-main .pm__btn{font-size:var(--text-sm)}
}