/* Generated from design.yaml: edit the design, not this file. */

:root {
    --font-small: 85%;
    --font-tiny: 70%;
    --font-credit: 75%;
    --font-section: 150%;
    --font-large: 120%;
    --line-tight: 1.3em;
    --line-section: 1.8em;
    --space-s: 0.5em;
    --space-m: 25px;
    --space-l: 50px;
    --space-xl: 75px;
    --color-muted: gray;
    --color-box-bg: rgb(240,240,240);
    --color-box-border: black;
    --color-good-bg: #eafaf1;
    --color-good-border: #27ae60;
    --color-bad-bg: #fdecea;
    --color-bad-border: #c0392b;
    --color-warn-bg: #fff3cd;
    --color-warn-border: #e0a800;
    --color-key-border: red;
    --aside-top: 150px;
    --aside-right: 100px;
    --cols-gap: 2em;
    --section-top: 300px;
    --section-bottom: 30px;
    --demo-width: 1750px;
    --demo-height: 750px;
    --layout-top: 120px;
    --layout-right: 70px;
    --layout-bottom: 80px;
    --layout-side: 700px;
    --layout-side-s: 500px;
    --layout-side-l: 900px;
    --layout-gap: 60px;
    --placeholder-height: 300px;
    --figure-s: 300px;
    --figure-m: 450px;
    --figure-l: 600px;
}

/* gap:: */
.gap { height: var(--space-m); }
.gap-s { height: var(--space-s); }
.gap-m { height: var(--space-m); }
.gap-l { height: var(--space-l); }
.gap-xl { height: var(--space-xl); }

/* small:: */
.small { font-size: var(--font-small); line-height: var(--line-tight); }

/* tiny:: */
.tiny { font-size: var(--font-tiny); line-height: var(--line-tight); }

/* credit:: */
.credit { font-size: var(--font-credit); line-height: var(--line-tight); color: var(--color-muted); }

/* muted:: */
.muted { color: var(--color-muted); }

/* center:: */
.center { text-align: center; }

/* aside:: */
.aside { position: fixed; top: var(--aside-top); right: var(--aside-right); text-align: center; }

/* cols:: */
.cols { display: flex; align-items: flex-start; gap: var(--cols-gap); }
.cols.even > .col { flex: 1 1 0; }
.cols.spread { justify-content: space-around; }
.cols.middle { align-items: center; }

/* col:: */
.col { flex: 0 1 auto; min-width: 0; }
.col.fixed { flex: none; }
.col > img, .col > video, .col > iframe { max-width: 100%; }

/* box:: */
.box { display: inline-block; vertical-align: top; padding: 0.5em;
       background-color: var(--color-box-bg); border: 1px solid var(--color-box-border); }
.box.good { background-color: var(--color-good-bg); border: 2px solid var(--color-good-border); }
.box.bad { background-color: var(--color-bad-bg); border: 2px solid var(--color-bad-border); }
.box.warn { background-color: var(--color-warn-bg); border: 2px solid var(--color-warn-border); }
.box.key { background-color: transparent; border: 2px solid var(--color-key-border); border-radius: 10px; }

/* section:: */
.section { text-align: center; margin-top: var(--section-top); margin-bottom: var(--section-bottom);
           font-size: var(--font-section); line-height: var(--line-section); }

/* media:: */
.media { display: flex; flex-direction: column; align-items: center; justify-content: center;
         gap: var(--space-s); min-width: 0; min-height: 0; }
.media.top { justify-content: flex-start; }
.media.middle { justify-content: center; }
.media.bottom { justify-content: flex-end; }
.media.row { flex-direction: row; gap: var(--cols-gap); }
.media > img, .media > video, .media > svg, .media > .col > img, .media > .col > video,
.media > .cols > img, .media > .cols > video,
.media > .cols > .col > img, .media > .cols > .col > video {
    flex: 0 1 auto; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; }
.media > img[src$=".svg"], .media.fill > img, .media.fill > video,
.media.fill > .col > img, .media.fill > .col > video { flex: 1 1 0; width: 100%; height: 100%; }
.media.row > img, .media.row > video, .media.row > .col { height: 100%; width: auto; }
.media.row > .col > img, .media.row > .col > video { flex: 1 1 0; height: auto; }
.media.row.even > * { flex: 1 1 0; width: 0; }
.media.row.even > .col > img, .media.row.even > .col > video { flex: 0 1 auto; width: 100%; height: auto; }
.media > iframe, .media > .demo { flex: 1 1 0; width: 100%; height: auto; min-height: 0; }
.media > .col { display: flex; flex-direction: column; align-items: center; min-height: 0;
                max-height: 100%; gap: var(--space-s); }
.media > .media, .media > .cols { flex: 1 1 0; min-height: 0; align-self: stretch; }
.media > .cols > .col { display: flex; flex-direction: column; align-items: center;
                        height: 100%; min-height: 0; gap: var(--space-s); }
.media .credit { text-align: center; }
.media > .center { min-height: 0; }
/* media::(.auto): the height of its figures, not of its area (a row of columns
   sized by its figures, not by a height of 0) */
.media.auto:not(.fill) > .col > img, .media.auto:not(.fill) > .col > video { flex: 0 1 auto; }
.media.row.auto > img, .media.row.auto > video, .media.row.auto > .col { height: auto; }
/* media::(.s), (.m), (.l): maximal height of the figures */
.media.s { --figure-max: var(--figure-s); }
.media.m { --figure-max: var(--figure-m); }
.media.l { --figure-max: var(--figure-l); }
.media:is(.s, .m, .l) :is(img, video, svg, iframe, .demo) { max-height: var(--figure-max); }
.media:is(.s, .m, .l) > :is(iframe, .demo) { flex: none; height: var(--figure-max); }
.media:is(.s, .m, .l) > :is(img, video),
.media:is(.s, .m, .l) > .col > :is(img, video) { flex: 0 1 auto; height: auto; width: auto; max-width: 100%; }
.media:is(.s, .m, .l) > img[src$=".svg"], .media:is(.s, .m, .l) > .col > img[src$=".svg"] {
    height: var(--figure-max); }
.media.row:is(.s, .m, .l) > .col { height: auto; }

/* large:: */
.large { font-size: var(--font-large); }

/* placeholder:: */
.placeholder { display: flex; align-items: center; justify-content: center; box-sizing: border-box;
               min-height: var(--placeholder-height); min-width: 300px; padding: var(--space-s);
               border: 2px dashed var(--color-muted); color: var(--color-muted); font-style: italic;
               text-align: center; }
.media > .placeholder { flex: 1 1 0; width: 100%; min-height: 4em; }

/* demo:: */
.demo { display: block; overflow: hidden; border: 0; width: var(--demo-width); height: var(--demo-height); }

/* source:: */
.source { position: fixed; bottom: 12px; left: 80px; font-size: 45%; color: gray; font-style: italic; }
.source.light { bottom: 8px; left: 15px; color: white; text-shadow: 1px 1px 2px black; }

/* espace:: */
.espace { color: #1f77b4; }

/* temps:: */
.temps { color: #e67e22; }

/* fil:: */
.fil { position: absolute; top: 34px; right: 30px; font-size: 70%; margin: 0; padding: 8px 18px 4px;
       background: #f1f4fa; border: 1.5px solid #d5ddeb; border-radius: 12px; }
h1 { font-size: 60px !important; line-height: 1.08em !important; }
body:has(.fil) h1 { padding-right: 620px; box-sizing: border-box; }

/* legende:: */
.legende { font-size: 65%; line-height: 1.2em; color: gray; font-style: italic; text-align: center; }

/* layout side */
body.layout-side { --layout-width: var(--layout-side); }
body.layout-side-s { --layout-width: var(--layout-side-s); }
body.layout-side-l { --layout-width: var(--layout-side-l); }
/* the text column: the frame keeps its size (main.css: width 1920 - 3 x 30 - 80 px, padding 30 px) */
body.layout-side { padding-right: calc(30px + var(--layout-width) + var(--layout-gap));
                   width: calc(1920px - 30px * 3 - 80px - var(--layout-width) - var(--layout-gap)); }
body.layout-side > h1, body.layout-side > .intro {
    margin-right: calc(-1 * (var(--layout-width) + var(--layout-gap))); }
body.layout-side > .intro { anchor-name: --layout-intro; }
body.layout-side > .media:not(.here) { position: absolute; right: var(--layout-right);
    top: var(--layout-top); top: anchor(--layout-intro bottom, var(--layout-top));
    bottom: var(--layout-bottom); width: var(--layout-width); }
body.layout-side > .media:not(.middle):not(.bottom) { justify-content: flex-start; }
body.layout-side > .media:not(.middle):not(.bottom) > img { object-position: center top; }
/* media::(.here): in the right column, at its place in the text */
body.layout-side > .media.here { float: right; clear: right; width: var(--layout-width);
    margin-right: calc(-1 * (var(--layout-width) + var(--layout-gap))); }
body.layout-side > .media.here > img, body.layout-side > .media.here > video {
    flex: none; height: auto; max-height: none; }
body.layout-side > .media.here > img[src$=".svg"] { width: 100%; }

/* layout stack */
body.layout-stack { display: flex; flex-direction: column; }
body.layout-stack > h1 + * { margin-top: 0; }    /* as the margins collapsing in the flow */
body.layout-stack > .media { flex: 1 1 0; margin: var(--space-s) 0; }
body.layout-stack > .media.auto { flex: 0 1 auto; }
body.layout-stack > :last-child { margin-bottom: var(--layout-bottom); }

/* layout section */
body.layout-section { display: flex; flex-direction: column; justify-content: center;
                      align-items: center; text-align: center; }
body.layout-section > :not(nav) { font-size: var(--font-section); line-height: var(--line-section); }
body.layout-section > h1 { margin: 0 0 var(--space-m) 0; font-size: calc(2 * var(--font-section)); }
body.layout-section ul, body.layout-section ol { text-align: left; }