/* 04/04/2025 */

* {
    box-sizing: border-box;
    max-width: 100%;
    max-height: 100%;
}
body {
    overflow-y: scroll;
}
.card {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5em;
    line-height: 1.5em;
    text-align: center;
    color: black;
    background-color: white;
}
.cloze {
    color: red;
    font-weight: bold;
}
.cloze:nth-of-type(19n) {
    color: #2962ff;
}
.cloze:nth-of-type(19n+1) {
    color: #00c853;
}
.cloze:nth-of-type(19n+2) {
    color: #ffab00;
}
.cloze:nth-of-type(19n+3) {
    color: #ff3d00;
}
.cloze:nth-of-type(19n+4) {
    color: #6200aa;
}
.cloze:nth-of-type(19n+5) {
    color: #698f38;
}
.cloze:nth-of-type(19n+6) {
    color: #ff1744;
}
.cloze:nth-of-type(19n+7) {
    color: #7b1fa2;
}
.cloze:nth-of-type(19n+8) {
    color: #1976d2;
}
.cloze:nth-of-type(19n+9) {
    color: #ffa000;
}
.cloze:nth-of-type(19n+10) {
    color: #afb42b;
}
.cloze:nth-of-type(19n+11) {
    color: #0097a7;
}
.cloze:nth-of-type(19n+12) {
    color: #e64a19;
}
.cloze:nth-of-type(19n+13) {
    color: #455a64;
}
.cloze:nth-of-type(19n+14) {
    color: #80d8ff;
}
.cloze:nth-of-type(19n+15) {
    color: #f57c00;
}
.cloze:nth-of-type(19n+16) {
    color: #00796b;
}
.cloze:nth-of-type(19n+17) {
    color: #0288d1;
}
.cloze:nth-of-type(19n+18) {
    color: #616161;
}

img {
    display: inline-block;
    width: auto;
    height: auto;
    margin: auto;
    vertical-align: middle;
}

/* Départements / Pays / États */
.map img {
    max-height: max(80vh, 15em);
    max-width: 100%;
}
.flag img {
    max-width: min(8em, 100%);
}
.map.north-america img {
    object-fit: none;
    zoom: 7;
    object-position: 20% 20%;
}
.map.carribean img {
    object-fit: none;
    zoom: 20;
    object-position: 26% 38%;
}
.map.europe img {
    object-fit: none;
    zoom: 12;
    object-position: 55% 18%;
}
.map.north-africa img {
    object-fit: none;
    zoom: 12;
    object-position: 45% 40%;
}
.map.south-africa img {
    object-fit: none;
    zoom: 12;
    object-position: 63% 63%;
}
.map.pacific img {
    object-fit: none;
    zoom: 8;
    object-position: 100% 55%;
}
.map.pacific-west img {
    object-fit: none;
    zoom: 8;
    object-position: 0% 55%;
}

p {
    margin: 0.5em 0 0 0;
}
p:first-of-type {
    margin: 0;
}
@media (max-width: 500px) {
    ul {
        padding-left: 1em;
    }
}
.above-map {
    height: 3.4em;
    padding: 0;
    line-height: 1em;
}
@media (min-width: 501px) {
    .above-map {
        height: 1.7em;
    }
}
.above-map .question {
    font-size: 1.2em;
    line-height: 1em;
}
.above-map .answer {
    font-size: 1.4em;
    line-height: 1em;
}
span.question, span.question-word, span.answer, span.information {
    font-weight: bold;
}
span.question-word {
    color: #0a0;
    text-shadow: 0 0 0.125em;
}
span.question, span.answer {
    font-size: 1.8em;
}
span.question small, span.answer small {
    font-size: 0.6em;
}
span.answer {
    color: #f90;
    text-shadow: 0 0 0.125em;
}
span.information {
    color: #888;
}
.abrev {
    display: inline-block;
    transform: scaleX(0.5);
    margin: 0 -1.3em;
}
.hint {
    filter: blur(5px);
    transition: filter 0.4s;
}
.hint:hover {
    filter: none;
}

table {
    border-collapse: collapse;
}
th, td {
    padding: 0.25em 0.5em;
    border: 1px solid black;
}
table.noborder :is(th, td) {
    border: none;
}
table.shrink :is(th, td) {
    padding: 0;
    border: none;
}
table.center {
    text-align: center;
}

@media (min-width: 501px) {
    .columns {
        columns: 20em;
    }
}

/* Socialisation SES */
.answer.garcon, .answer.fille {
    color: unset;
}
.garcon, .answer-card .garcon {
    color: blue;
}
.fille, .answer-card .fille {
    color: hotpink;
}

/* Couleurs physique */
:not(:not(.answer-card) > .answer):is(.blanc, .jaune, .cyan) {
    text-shadow:0 0 4px #000;
}
.blanc {
    color: #ffffff;
}
.jaune {
    color: #ffff00;
}
.rouge {
    color: #ff0000;
}
.vert {
    color: #00ff00;
}
.cyan {
    color: #00ffff;
}
.bleu {
    color: #0000ff;
}
.violet {
    color: #800080;
}
:not(.answer-card) > .answer:is(.blanc, .jaune, .rouge, .vert, .cyan, .bleu, .violet) {
    color: unset;
}

.vec {
    position: relative;
}
.vec::before {
    content: "→";
    position: absolute;
    top: 0;
    transform: translate(-25%, -50%);
}
.vec:has(.cloze):before {
    transform: unset;
    left: 0;
    right: 0;
    text-align: center;
}
.vector, .system {
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
    position: relative;
    --children: 1;
    padding: 0 0.5em;
}
.vector::before, .vector::after, .system::before, .system::after {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    transform: scaleY(calc(1.2 * var(--children)));
}
.vector::before {
    content: "(";
    left: 0;
}
.vector::after {
    content: ")";
    right: 0;
}
.system::before {
    content: "{";
    left: 0;
}
.vector:has(> :nth-child(2))::before,
.vector:has(> :nth-child(2))::after,
.system:has(> :nth-child(2))::before,
.system:has(> :nth-child(2))::after {
    --children: 2;
}
.vector:has(> :nth-child(3))::before,
.vector:has(> :nth-child(3))::after,
.system:has(> :nth-child(3))::before,
.system:has(> :nth-child(3))::after {
    --children: 3;
}

.lim, .lim-pos, .lim-neg, .lim-custom {
    position: relative;
}
.lim::after {
    content: "n → +∞";
}
.lim-pos::after {
    content: "x → +∞";
}
.lim-neg::after {
    content: "x → -∞";
}
.lim::after, .lim-pos::after, .lim-neg::after, .lim-custom > * {
    font-size: 0.1em;
    /*
    Why that?
    For some reason, the width of this element is limitated
    by the width of its parent element (the "lim" text).
    So we write with a very small font size and then we enlarge it.
    */
    transform: scale(5);
    transform-origin: top;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    text-align: center;
    line-height: 1em;
}
.frac {
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
}
.frac > :first-child {
    border-bottom: 0.0625em solid black;
}
.frac .frac {
    padding: 0 0.5em;
    font-size: 0.8em;
    line-height: 1.2em;
}

.spectrum {
    display: inline-block;
    width: 15em;
    height: 2em;
    background: black;
    position: relative;
}
.spectrum.absorption {
    background: linear-gradient(in hsl longer hue 90deg, red 0 100%);
}
.spectrum > * {
    position: absolute;
    left: calc(var(--p) * 1%);
    transform: translateX(-50%);
    width: 0.5%;
    height: 100%;
    background: #000;
}
.spectrum.emission > * {
    background: hsl(calc(var(--p) / 100 * 360), 100%, 50%);
}

.axis {
    display: inline-block;
    position: relative;
    width: 20em;
    height: 0.1em;
    background: black;
    border-radius: 0.1em;
}
.axis::before, .axis::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    background: black;
    width: 1em;
    height: 0.1em;
    transform-origin: right;
    border-radius: 0.1em;
}
.axis::before {
    transform: rotate(30deg);
}
.axis::after {
    transform: rotate(-30deg);
}
.axis-tick {
    position: absolute;
}
.axis-tick::before {
    content: "";
    position: absolute;
    top: 75%;
    left: -0.3em;
    background: black;
    width: 0.1em;
    height: 1em;
}