/* arte-global.css — @artegeie/design-system@18.12.1-corporate.0 */
/* Contient : @font-face Barna + tokens CSS --ads-* */
/* Généré par extract.js — NE PAS MODIFIER */

@font-face {
    font-family: barna;
    src:
        url('//static-cdn.arte.tv/static/fonts/barna-web/woff2/Barna-Light.woff2'),
        url('//static-cdn.arte.tv/static/fonts/barna-web/woff/Barna-Light.woff');
    font-style: normal;
    font-weight: 100;
    font-display: swap;
}
@font-face {
    font-family: barna-fallback;
    src: local('Arial');
    font-style: normal;
    font-weight: 100;
    size-adjust: 83%;
}
@font-face {
    font-family: barna;
    src:
        url('//static-cdn.arte.tv/static/fonts/barna-web/woff2/Barna-Regular.woff2'),
        url('//static-cdn.arte.tv/static/fonts/barna-web/woff/Barna-Regular.woff');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: barna-fallback;
    src: local('Arial');
    font-style: normal;
    font-weight: 400;
    size-adjust: 84%;
}
@font-face {
    font-family: barna;
    src:
        url('//static-cdn.arte.tv/static/fonts/barna-web/woff2/Barna-SemiBold.woff2'),
        url('//static-cdn.arte.tv/static/fonts/barna-web/woff/Barna-SemiBold.woff');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: barna-fallback;
    src: local('Arial');
    font-style: normal;
    font-weight: 600;
    size-adjust: 84%;
}
@font-face {
    font-family: barna;
    src:
        url('//static-cdn.arte.tv/static/fonts/barna-web/woff2/Barna-Bold.woff2'),
        url('//static-cdn.arte.tv/static/fonts/barna-web/woff/Barna-Bold.woff');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: barna-fallback;
    src: local('Arial');
    font-style: normal;
    font-weight: 700;
    size-adjust: 92%;
}
* {
    outline-style: none;
}
body,
html {
    color: var(--ads-text);
}
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
button,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
i,
iframe,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    border: 0;
}
ul,
ol {
    list-style-type: none;
}
a,
a:hover,
a:focus {
    -webkit-text-decoration: none;
    text-decoration: none;
}
img {
    max-width: 100%;
}
a,
button,
input,
select,
textarea {
    outline: 2px solid transparent;
    outline-offset: 0px;
    border-style: none;
    color: var(--ads-text);
    font-family: inherit;
    margin: 0;
}
html {
    box-sizing: border-box;
    font-size: 16px;
    font-family: barna, barna-fallback, sans-serif;
    scroll-behavior: smooth;
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
*,
::after,
::before {
    box-sizing: inherit;
}
::-webkit-input-placeholder {
    font-size: 16px;
}
::-moz-placeholder {
    font-size: 16px;
}
:-ms-input-placeholder {
    font-size: 16px;
}
::placeholder {
    font-size: 16px;
}
input[type='search']::-webkit-search-decoration,
::-webkit-search-cancel-button,
::-webkit-search-results-button,
::-webkit-search-results-decoration {
    display: none;
}
select {
    -webkit-border-radius: 0px;
}
html.--ads-dark {
    --ads-avatar-sticker-background: hsla(0, 0%, 100%, 0.2);
    --ads-background: hsla(0, 0%, 8%, 1);
    --ads-geoblocking: hsla(0, 0%, 8%, 0.8);
    --ads-primary: hsla(0, 0%, 100%, 1);
    --ads-secondary: hsla(0, 0%, 8%, 1);
    --ads-divider: hsla(0, 0%, 27%, 1);
    --ads-placeholder: hsla(0, 0%, 100%, 0.1);
    --ads-empty-teaser-background: hsla(0, 0%, 13%, 1);
    --ads-empty-teaser-logo: hsla(0, 0%, 33%, 1);
    --ads-teaser-hover: hsla(0, 0%, 0%, 1);
    --ads-text: hsla(0, 0%, 100%, 1);
    --ads-transparent-background: hsla(0, 0%, 8%, 0.1);
    --ads-sub-header-background: hsla(0, 100%, 100%, 1);
    --ads-switch-inactive-background: hsla(0, 0%, 71%, 1);
    --ads-switch-inactive-foreground: hsla(0, 0%, 13%, 1);
    --ads-switch-inactive-circle: hsla(0, 0%, 100%, 1);
    --ads-text-alternative: hsla(0, 0%, 100%, 0.8);
    --ads-teaser-classic-background: hsla(0, 0%, 20%, 1);
    --ads-teaser-info-background: hsla(0, 0%, 100%, 1);
    --ads-teaser-border: hsla(0, 0%, 0%, 0);
    --ads-teaser-info-border: hsla(0, 0%, 20%, 0.2);
}
html.--ads-light {
    --ads-avatar-sticker-background: hsla(0, 0%, 100%, 0.2);
    --ads-background: hsla(0, 0%, 100%, 1);
    --ads-geoblocking: hsla(0, 0%, 100%, 0.8);
    --ads-primary: hsla(0, 0%, 8%, 1);
    --ads-secondary: hsla(0, 0%, 100%, 1);
    --ads-divider: hsla(0, 0%, 81%, 1);
    --ads-placeholder: hsla(0, 0%, 8%, 0.1);
    --ads-empty-teaser-background: hsla(0, 0%, 98%, 1);
    --ads-empty-teaser-logo: hsla(0, 0%, 78%, 1);
    --ads-teaser-hover: hsla(0, 0%, 20%, 1);
    --ads-text: hsla(0, 0%, 8%, 1);
    --ads-transparent-background: hsla(0, 0%, 100%, 0.1);
    --ads-sub-header-background: hsla(0, 0%, 20%, 1);
    --ads-switch-inactive-background: hsla(0, 0%, 61%, 1);
    --ads-switch-inactive-foreground: hsla(0, 0%, 100%, 1);
    --ads-switch-inactive-circle: hsla(0, 0%, 20%, 1);
    --ads-text-alternative: hsla(0, 0%, 8%, 0.8);
    --ads-teaser-classic-background: hsla(0, 0%, 100%, 1);
    --ads-teaser-info-background: hsla(0, 0%, 100%, 1);
    --ads-teaser-border: hsla(0, 0%, 20%, 0.2);
    --ads-teaser-info-border: hsla(0, 0%, 20%, 0.2);
}
:root {
    --ads-spacer-0: 0px;
    --ads-spacer-none: 0px;
    --ads-spacer-xxxs: 4px;
    --ads-spacer-xxs: 8px;
    --ads-spacer-xs: 12px;
    --ads-spacer-s: 16px;
    --ads-spacer-m: 24px;
    --ads-spacer-l: 32px;
    --ads-spacer-xl: 64px;
    --ads-spacer-xxl: 80px;
    --ads-spacer-xxxl: 112px;
    --ads-font-xs: 0.875rem;
    --ads-font-s: 1.0625rem;
    --ads-font-m: 1.25rem;
    --ads-font-l: 1.5625rem;
    --ads-font-xl: 2.5rem;
    --ads-font-xxl: 3.4375rem;
    --ads-screen-min: 320;
    --ads-screen-max: 3840;
    --ads-line_height-xs: 1.1;
    --ads-line_height-s: 1.2;
    --ads-line_height-m: 1.4;
    --ads-line_height-l: 1.6;
    --ads-font-size-xs: clamp(12px, calc(12px + 6 * var(--ads-font-vw-progress)), 18px);
    --ads-font-size-s: clamp(14px, calc(14px + 10 * var(--ads-font-vw-progress)), 24px);
    --ads-font-size-m: clamp(16px, calc(16px + 12 * var(--ads-font-vw-progress)), 28px);
    --ads-font-size-l: clamp(20px, calc(20px + 12 * var(--ads-font-vw-progress)), 32px);
    --ads-font-size-xl: clamp(24px, calc(24px + 40 * var(--ads-font-vw-progress)), 64px);
    --ads-font-size-xxl: clamp(28px, calc(28px + 52 * var(--ads-font-vw-progress)), 80px);
    --ads-font-vw-progress: calc(
        (100vw - var(--ads-screen-min) * 1px) / (var(--ads-screen-max) - var(--ads-screen-min))
    );
    --ads-line-height-xs: 1.1;
    --ads-line-height-s: 1.2;
    --ads-line-height-m: 1.4;
    --ads-grid-gap: 10px;
}
@media (min-width: 768px) {
    :root {
        --ads-grid-gap: 24px;
    }
}
@media (min-width: 1024px) {
    :root {
        --ads-grid-gap: 32px;
    }
}
:root {
    --ads-avatar-sticker-background: hsla(0, 0%, 100%, 0.2);
    --ads-background: hsla(0, 0%, 8%, 1);
    --ads-geoblocking: hsla(0, 0%, 8%, 0.8);
    --ads-primary: hsla(0, 0%, 100%, 1);
    --ads-secondary: hsla(0, 0%, 8%, 1);
    --ads-divider: hsla(0, 0%, 27%, 1);
    --ads-placeholder: hsla(0, 0%, 100%, 0.1);
    --ads-empty-teaser-background: hsla(0, 0%, 13%, 1);
    --ads-empty-teaser-logo: hsla(0, 0%, 33%, 1);
    --ads-teaser-hover: hsla(0, 0%, 0%, 1);
    --ads-text: hsla(0, 0%, 100%, 1);
    --ads-transparent-background: hsla(0, 0%, 8%, 0.1);
    --ads-sub-header-background: hsla(0, 100%, 100%, 1);
    --ads-switch-inactive-background: hsla(0, 0%, 71%, 1);
    --ads-switch-inactive-foreground: hsla(0, 0%, 13%, 1);
    --ads-switch-inactive-circle: hsla(0, 0%, 100%, 1);
    --ads-text-alternative: hsla(0, 0%, 100%, 0.8);
    --ads-teaser-classic-background: hsla(0, 0%, 20%, 1);
    --ads-teaser-info-background: hsla(0, 0%, 100%, 1);
    --ads-teaser-border: hsla(0, 0%, 0%, 0);
    --ads-teaser-info-border: hsla(0, 0%, 20%, 0.2);
}