/* Page Entrainement : les notions sont des lignes, les exercices des stations.
   Les couleurs generales et les polices viennent de styles/site.css. */
#entr-app {
    --entr-encre: var(--md-typeset-color);
    --entr-doux: var(--md-default-fg-color--light);
    --entr-vert: #0d8a4e;
    --entr-rouge: #d0321c;
    --entr-bleu: #12694a;
    --entr-numero: #b0460f;
    --entr-signal: rgba(255, 212, 0, .55);
    --entr-erreur-fond: rgba(208, 50, 28, .12);
    --entr-jour: #12352a;
    --ligne-1: #0a7cc1; --ligne-2: #e2571e; --ligne-3: #12a15b; --ligne-4: #8e3fb0;
    --ligne-5: #c99a00; --ligne-6: #d6247f; --ligne-7: #0f97a0; --ligne-8: #5a6ff0;
    --ligne-9: #7a8c12; --ligne-10: #b5533c; /* au dela de 10 notions, les couleurs reviennent */
    max-width: 44rem;
    margin: 0 auto;
}
[data-md-color-scheme="slate"] #entr-app {
    --entr-vert: #5ed39a;
    --entr-rouge: #ff8f7d;
    --entr-bleu: #7fd6ae;
    --entr-numero: #ffb37a;
    --entr-signal: rgba(255, 212, 0, .28);
    --entr-erreur-fond: rgba(255, 143, 125, .14);
    --entr-jour: #153a2e;
}

.md-typeset h1 { max-width: 44rem; margin: 0 auto .6rem; }
.md-typeset h1[hidden] { display: none; }
#entr-app h2 { font-size: 1.05rem; margin: 2.2rem 0 .5rem; }
#entr-app :focus-visible { outline: 2px solid var(--entr-encre); outline-offset: 2px; }

.md-typeset .entr-intro { font-size: .9rem; margin: 0 0 1rem; }
.md-typeset .entr-consigne { color: var(--entr-doux); margin: 0 0 .7rem; font-size: .72rem; }
.md-typeset .entr-bilan { margin: .9rem 0 0; font-size: .75rem; }
.md-typeset .entr-note { margin-top: 2rem; font-size: .65rem; color: var(--entr-doux); }

/* Boutons */
.entr-actions, .entr-commandes { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .8rem 0; }
.md-typeset .entr-bouton {
    font: 800 .75rem var(--nsi-titres); cursor: pointer; display: inline-block;
    padding: .45rem .9rem; border-radius: var(--nsi-rayon);
    border: 2px solid var(--nsi-bouton); background: transparent; color: var(--entr-encre);
    text-decoration: none;
}
.md-typeset .entr-bouton:hover:not(:disabled) { background: var(--entr-signal); color: var(--entr-encre); }
.md-typeset .entr-bouton--fort { background: var(--nsi-bouton); color: var(--nsi-bouton-texte); }
.md-typeset .entr-bouton--fort:hover:not(:disabled) { background: var(--md-accent-fg-color); border-color: var(--md-accent-fg-color); color: var(--nsi-bouton-texte); }
[data-md-color-scheme="default"] .md-typeset .entr-bouton--fort:hover:not(:disabled) { color: #fff; }
.entr-bouton:disabled { opacity: .45; cursor: default; }
.entr-lien {
    font: inherit; background: none; border: 0; padding: 0; cursor: pointer;
    text-decoration: underline; text-underline-offset: .15em; color: inherit;
}
.entr-commandes .entr-lien { font-size: .68rem; color: var(--entr-doux); }
.entr-statut { margin-left: auto; font-size: .62rem; color: var(--entr-doux); }
.entr-statut[data-etat="echec"] { color: var(--entr-rouge); }

/* Le panneau du jour */
.entr-jour {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem;
    padding: 1rem 1.3rem; background: var(--entr-jour); color: #fff; border-radius: var(--nsi-rayon);
}
.md-typeset .entr-jour__surtitre { margin: 0; font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.entr-jour__titre {
    display: block; padding: 0; background: none; border: 0; cursor: pointer; text-align: left;
    font: 800 1.25rem/1.3 var(--nsi-titres); color: #fff;
}
.entr-jour__titre:hover { text-decoration: underline; }
#entr-app .entr-jour :focus-visible { outline-color: #fff; }
.md-typeset .entr-bouton--signal { background: var(--nsi-signal); border-color: var(--nsi-signal); color: #12352a; font-size: .8rem; }
.md-typeset .entr-bouton--signal:hover:not(:disabled) { background: #ffe24d; color: #12352a; }

/* Les filtres du hasard */
.entr-filtres { margin-top: .9rem; font-size: .72rem; }
.md-typeset .entr-filtres p { margin: 0 0 .3rem; color: var(--entr-doux); }
.entr-puces { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .35rem; }
.entr-filtre {
    --ligne: var(--entr-encre);
    display: inline-flex; align-items: center; gap: .3rem; padding: .08rem .45rem; cursor: pointer;
    font: 600 .7rem var(--nsi-titres); color: inherit; background: none;
    border: 1.5px solid var(--nsi-filet); border-radius: var(--nsi-rayon);
}
.entr-filtre::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ligne); }
.entr-filtre--neutre::before { content: none; }
.entr-filtre--etiquette { margin-left: .6rem; }
.entr-filtre:hover { border-color: var(--ligne); }
.entr-filtre--active { border-color: var(--ligne); background: color-mix(in srgb, var(--ligne) 18%, transparent); font-weight: 800; }

/* Le plan */
.entr-reseau { display: grid; gap: .45rem; }
.entr-ligne__titre {
    display: flex; align-items: center; gap: .5rem; width: 100%; padding: .2rem .5rem .2rem 0; cursor: pointer;
    background: none; border: 0; border-radius: 1rem; color: inherit; font: 800 .86rem var(--nsi-titres); text-align: left;
}
.entr-ligne__titre:hover { background: color-mix(in srgb, var(--ligne) 14%, transparent); }
.entr-ligne__num {
    flex: none; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%;
    background: var(--ligne); color: #fff; font-size: .78rem; line-height: 1;
}
.entr-ligne__compte { margin-left: auto; font-weight: 600; font-size: .66rem; color: var(--entr-doux); }
.entr-ligne__fleche { font-size: .5rem; color: var(--entr-doux); }

/* Une rangee d'arrets, relies par un trait, qui passe a la ligne au besoin */
.entr-rangee { display: flex; flex-wrap: wrap; gap: .4rem .55rem; padding: .3rem .1rem .3rem .25rem; margin-left: .3rem; overflow: hidden; }
.md-typeset .entr-arret {
    position: relative; flex: none; display: block; width: .84rem; height: .84rem; box-sizing: border-box;
    border-radius: 50%; border: .2rem solid var(--ligne); background: var(--md-default-bg-color);
}
.md-typeset .entr-arret + .entr-arret::before {
    content: ""; position: absolute; right: 100%; top: 50%; width: .9rem; height: .2rem;
    transform: translateY(-50%); background: var(--ligne);
}
.md-typeset .entr-arret--fait, .md-typeset .entr-arret:hover { background: var(--ligne); }
.md-typeset .entr-arret--hors { opacity: .3; }
.md-typeset .entr-arret--ici { outline: .17rem solid var(--entr-encre); outline-offset: 1px; }

/* Les stations d'une ligne ouverte */
.md-typeset ol.entr-stations { list-style: none; margin: .1rem 0 .3rem .57rem; padding: 0; border-left: .32rem solid var(--ligne); }
.md-typeset ol.entr-stations > li { position: relative; margin: 0; padding: .32rem 0 .32rem .85rem; }
.md-typeset ol.entr-stations > li::before {
    content: ""; position: absolute; left: -.58rem; top: .5rem; width: .84rem; height: .84rem; box-sizing: border-box;
    border-radius: 50%; background: var(--md-default-bg-color); border: .2rem solid var(--ligne);
}
.md-typeset ol.entr-stations > li.entr-station--faite::before { background: var(--ligne); }
/* Le trait s'arrete au terminus */
.md-typeset ol.entr-stations > li:last-child::after {
    content: ""; position: absolute; left: -.34rem; top: 1.36rem; bottom: 0; width: .36rem; background: var(--md-default-bg-color);
}
.md-typeset .entr-station--hors a { opacity: .35; }
.md-typeset .entr-stations a { display: block; color: inherit; line-height: 1.25; }
.entr-station__nom { font-size: .78rem; font-weight: 600; }
.md-typeset .entr-stations a:hover .entr-station__nom { text-decoration: underline; text-decoration-color: var(--ligne); text-decoration-thickness: 2px; text-underline-offset: .15em; }
.entr-station__infos { display: block; font-size: .62rem; color: var(--entr-doux); }

.md-typeset .entr-badge { display: inline-block; margin-left: .5rem; font-size: .62rem; font-weight: 800; color: var(--entr-vert); white-space: nowrap; }

/* En-tete d'un exercice */
.md-typeset .entr-retour { margin: 0 0 1rem; font-size: .68rem; }
.md-typeset .entr-retour a { color: var(--entr-doux); }
.md-typeset .entr-surtitre { margin: 0; font-size: .72rem; color: var(--entr-doux); }
.md-typeset .entr-titre { margin: 0; }
.md-typeset .entr-infos { margin: .15rem 0 1rem; font-size: .68rem; color: var(--entr-doux); }
.entr-enonce { margin: .6rem 0 1rem; font-size: .82rem; }
.md-typeset #entr-app code { background: var(--md-code-bg-color); border-radius: 2px; box-shadow: none; }

/* Le petit trajet en haut d'un exercice */
.entr-trajet { margin: 0 0 .4rem -.3rem; }

/* L'editeur et les blocs de code */
.entr-editeur { border: 2px solid var(--nsi-bouton); border-radius: var(--nsi-rayon); overflow: hidden; }
.md-typeset .CodeMirror {
    height: auto; font-family: var(--md-code-font-family, monospace); font-size: .78rem; line-height: 1.2rem;
    color: var(--entr-encre); background: var(--md-code-bg-color);
}
.md-typeset .CodeMirror-scroll { min-height: 9.6rem; }
.md-typeset .CodeMirror pre, .md-typeset .CodeMirror pre.CodeMirror-line { margin: 0; padding: 0 .5rem; background: transparent; font-size: inherit; line-height: inherit; }
.CodeMirror-gutters { background: transparent; border-right: 0; }
.CodeMirror-linenumber { color: var(--entr-doux); opacity: .7; }
.CodeMirror-cursor { border-left: 2px solid var(--entr-encre); }
.CodeMirror-selected, .CodeMirror-focused .CodeMirror-selected { background: var(--entr-signal); }
.cm-s-default .cm-keyword { color: var(--entr-bleu); font-weight: 600; }
.cm-s-default .cm-builtin, .cm-s-default .cm-def { color: var(--entr-bleu); }
.cm-s-default .cm-variable, .cm-s-default .cm-variable-2, .cm-s-default .cm-property, .cm-s-default .cm-operator { color: var(--entr-encre); }
.cm-s-default .cm-string { color: var(--entr-vert); }
.cm-s-default .cm-number { color: var(--entr-numero); }
.cm-s-default .cm-comment { color: var(--entr-doux); font-style: italic; }
.entr-ligne-erreur { background: var(--entr-erreur-fond); }

.md-typeset .entr-code { margin: .5rem 0; }
.md-typeset #entr-app .entr-code code {
    display: block; padding: .3rem .6rem; background: var(--md-code-bg-color); border-radius: var(--nsi-rayon);
    font-size: .76rem; line-height: 1.2rem; white-space: pre-wrap; overflow-wrap: anywhere; color: inherit;
}

/* Les aides */
.md-typeset .entr-aide { margin: .8rem 0; padding: .55rem .8rem .7rem; max-width: 34rem; background: var(--nsi-panneau); border-radius: var(--nsi-rayon); }
.md-typeset .entr-aide p { margin: 0 0 .2rem; font-size: .72rem; font-weight: 800; }
.md-typeset #entr-app .entr-aide .entr-code code { background: none; padding: 0; }
.md-typeset .entr-aide .entr-code { margin: 0; }

/* La correction */
.entr-resultat { margin-top: 1rem; }
.md-typeset .entr-message { margin: .7rem 0; font-size: .78rem; line-height: 1.45; }
.md-typeset .entr-message p { margin: .15rem 0 0; }
.md-typeset #entr-app .entr-message code { font-size: .72rem; }
.md-typeset .entr-message--erreur, .md-typeset .entr-message--alerte { color: var(--entr-rouge); }
.md-typeset .entr-message--reussi { color: var(--entr-vert); }
.md-typeset .entr-message > strong { font-weight: 800; font-size: 1rem; }
.md-typeset .entr-message--reussi > strong { font-size: 1.5rem; line-height: 1.15; }
.md-typeset .entr-message--reussi > div { color: var(--entr-encre); font-size: .8rem; line-height: 1.5; margin-top: .5rem; }
.md-typeset .entr-brut { font: 400 .66rem/1.4 var(--md-code-font-family, monospace); color: var(--entr-doux); }
.md-typeset .entr-sous-titre { margin: .9rem 0 0; font-size: .68rem; color: var(--entr-doux); }
.md-typeset ul.entr-tests { list-style: none; margin: .7rem 0; padding: 0; }
.md-typeset ul.entr-tests li { margin: .25rem 0; }
.entr-test__marque { display: inline-block; width: 1.25rem; font-size: .85rem; font-weight: 800; }
.entr-test--ok .entr-test__marque { color: var(--entr-vert); }
.entr-test--ko .entr-test__marque { color: var(--entr-rouge); }
.entr-test__details { margin: .15rem 0 .5rem 1.25rem; font-size: .72rem; }
.entr-remarque { margin-top: .25rem; font-size: .74rem; color: var(--entr-rouge); }
.md-typeset .entr-caches { margin: .4rem 0; font-size: .74rem; }
.entr-caches--ok { color: var(--entr-vert); }
.entr-caches--ko { color: var(--entr-rouge); }
.entr-solution { margin: .8rem 0; font-size: .72rem; }

/* La prediction : des cases a cocher */
.entr-choix { display: grid; gap: .1rem; margin: 1rem 0; }
.entr-choix__bouton {
    display: flex; align-items: center; gap: .6rem; padding: .25rem .15rem; cursor: pointer;
    background: none; border: 0; color: inherit; font: inherit; text-align: left;
}
.entr-choix__case { position: relative; flex: none; width: .85rem; height: .85rem; border: 1.5px solid var(--entr-encre); border-radius: 2px; }
.entr-choix__bouton:hover:not(:disabled) .entr-choix__case { background: var(--entr-signal); }
.entr-choix__bouton:disabled { cursor: default; }
.entr-choix__bouton:disabled:not(.entr-choix__bouton--juste):not(.entr-choix__bouton--faux) { opacity: .5; }
.entr-choix__bouton--juste .entr-choix__case::after,
.entr-choix__bouton--faux .entr-choix__case::after {
    position: absolute; left: .12rem; bottom: 0; font-size: .85rem; font-weight: 800; line-height: 1;
}
.entr-choix__bouton--juste .entr-choix__case::after { content: "✓"; color: var(--entr-vert); }
.entr-choix__bouton--faux .entr-choix__case::after { content: "✗"; color: var(--entr-rouge); }

/* Le code de sauvegarde */
.md-typeset .entr-code-sauvegarde {
    display: inline-block; margin: .3rem 0; padding: .5rem .9rem;
    border: 1.5px dashed var(--entr-encre); border-radius: var(--nsi-rayon);
    font: 600 1rem var(--md-code-font-family, monospace); letter-spacing: .08em;
    overflow-wrap: anywhere; user-select: all;
}
.entr-sauvegarde { scroll-margin-top: 7rem; font-size: .75rem; }
.entr-reprise { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.entr-champ {
    flex: 1 1 12rem; max-width: 22rem; padding: .4rem .1rem; color: inherit; background: none;
    font: 400 .78rem var(--md-code-font-family, monospace);
    border: 0; border-bottom: 1.5px solid var(--entr-encre); border-radius: 0;
}
.entr-champ::placeholder { font-family: var(--nsi-titres); color: var(--entr-doux); }

/* Le choix du niveau */
.entr-niveaux { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0 0 .8rem; font-size: .72rem; color: var(--entr-doux); }
.entr-niveaux .entr-filtre { color: var(--entr-encre); }
.md-typeset .entr-bouton--grand { font-size: .9rem; padding: .7rem 1.4rem; }

/* Deux boutons dans le panneau du jour */
.entr-jour__boutons { display: flex; flex-wrap: wrap; gap: .5rem; }
.md-typeset .entr-bouton--clair { border-color: rgba(255, 255, 255, .75); color: #fff; }
.md-typeset .entr-bouton--clair:hover:not(:disabled) { background: rgba(255, 255, 255, .15); color: #fff; }

/* Les questions de cours */
.entr-figure { margin: .8rem 0; }
.entr-figure img { display: block; max-width: 100%; height: auto; border: 1px solid var(--nsi-filet); border-radius: var(--nsi-rayon); }
.md-typeset .entr-message > div { color: var(--entr-encre); }
.md-typeset .entr-cours { margin: .45rem 0 0; font-size: .7rem; color: var(--entr-doux); }
.entr-reponse { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.entr-champ--reponse { max-width: 16rem; font-size: .85rem; }
.md-typeset .entr-arret--rate { border-color: var(--entr-rouge); background: var(--entr-erreur-fond); }
.md-typeset .entr-attendue { margin: .3rem 0 .2rem; color: var(--entr-encre); font-weight: 800; }
.md-typeset .entr-message--rappel > .entr-attendue { margin-top: 0; }
.md-typeset .entr-figure figcaption { margin-top: .25rem; font-size: .62rem; color: var(--entr-doux); }
.entr-rate { margin: 1.4rem 0; padding-top: .6rem; border-top: 1px solid var(--nsi-filet); }
.md-typeset .entr-rate h2 { margin: 0 0 .3rem; font-size: .9rem; }

@media (max-width: 34rem) {
    .entr-statut { margin-left: 0; width: 100%; }
    .entr-jour { padding: .9rem 1rem; }
}