@font-face {
    font-family: scorpius;
    src: url(Scorpius2.otf);
    size-adjust: 100%;
}

@font-face {
    font-family: scorpius-mono;
    src: url(Scorpius2-mono.otf);
    size-adjust: 100%;
}

:root {
    --couleur: blue;
    --marges: 3rem;
    --fondperdu: 1mm;
}

body {
    /* background-color: black; */
    margin: 0;
    font-family: scorpius;
    font-size: 2rem;
    overflow-x: hidden;
}

.couvertures {
    background-color: var(--couleur);
}

.couverture,
header {
    font-family: scorpius;
    border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAADT0lEQVR4Xu2c4WLCIAyEq77/I09Hra61bl7PS4DO828IJB9JiFR7GBp/LuWzNOFQPoxJqj6z1paxlPFbJmTHqEBUfdZeNN5AESFSbqAkMDS8OlCUolvk5+LV8ebZuuZevkpNvgvLGLYmI2BIvkugwzAjfQIqHnIIGJLvFOjsloGCCNqS8q/aLKSPIkyVp0eo6mBrfRZwPtBzOSTKKmP3Pi7GHhIGutrS1kDU9fuLUPHUVYGo+s2BLh0Ym5tT8HdzFZCqjwCH11DVYKSP5MhhVR/Nb6BkBhlo8CGZDlRNob3rrwHLKR8L5Fz61BNlU+z6fJ/cOVDeIQMNrmm7B9qbA+uUa20fVa9G41sbjE7Z1vYZaHAJMtDaQB9SqNzBHY7vPDf/+5EFSmFVrj5jYksIjFB2wuhDQgZa+bbLQMGOsQFloNlA2R3pLcVRicj27ylCsxdEDmfLs/37QKDnsVf52bfoh4YfCDT355OH7GdA2Smszh9eAsInDH6koAJD+uH+h09ooLk1BUVIa3l4QLF9pGpAa4BofeQfktOnPJoQGdy7HPmH5AZKXt8ZKJkSCBiSp1+OkP50NxwBXBtsoNm3Teyp311IBRvkCO0NKNoRJA/2p/p0yD8kd9vktik3aFEEXuX3f2AUU9b3qY7Q6AhFO4LiQdVH82fLVfuf9MMn9PWdr++WWSA/Y3KEBgdU9DcjdYN2VzNXJY4+5ZHDBkq2DQb6ukQ4QsmuBGVg+vUdMgBFvCpX12f1DXRv96HTDjf8BfN1/flD95nkW3Y2Ruh8G0AbJDoUkvIvLjPQ/OEpn9enTlHLblA0gGj/YIRGL8juOALYm30GGtyHVwdaavxl8SY1p3xvKXYtIYuX4bE1OboE0RHaJVClLQruQgzUQB9z5Cdlb2nPp7z2J4Z1xsoRWrsEqDVP1UdtnIGSt02NgOZ9VZ0iLG9+BAzJ+47QX/5Orqasql8daO2aihzMBph+KBko2mJRrkZIa33W/fAa6ghlt0AcP0fcdFKzb/mevrsX3eMUC6/0xxXKK1LSg2aJpOpi48IohbPlYjxAdQOFiLgBBsrxgqOrA+3t0IKEyAHtgZKPaaM3hOQFh7cHKt5HokMMEgge8E+Avn9ZEsxz+AY2e9dxuf1zVwAAAABJRU5ErkJggg==") 28 / 28px / 0 round;
    border-width: 28px;
    border-style: solid;
    text-align: center;
    max-height: 100vh;
    font-size: 3.2rem;
}

.couvertures .couverture {
    color: white;
}

.couverture header,
.couverture footer,
h1 {
    margin: 28px;
}

.couverture h1 {
    font-size: 6.5rem;
}

.couverture h2 {
    margin-top: 0;
    font-size: 2rem;
}

.couverture {
    display: flex;
    flex-direction: column;
    height: 100vh;
    box-sizing: border-box;

}

.couverture p {
    margin: 0;
}

.page {
    page-break-before: always;
}

.firstPage {
    color: black;
    margin-left: auto;
    width: 50%;
    display: none;

}

.couverture h2 {
    margin-bottom: auto;
}

h1,
h2,
h3 {
    font-family: scorpius;
    font-weight: normal;
}

.recette h2 {
    margin: 0;
}

header {
    margin: 28px;
}

.recette {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}

.recette>* {
    flex: 1 1;
}

code {
    white-space: pre;
    font-family: scorpius-mono;
    /* display: none; */
    font-size: 1rem;
    line-height: 1rem;
}

code .code_comment {
    font-family: scorpius;
}

section .sketchwrapper {
    margin: auto;
    position: relative;
    display: flex;
}

canvas,
iframe {
    max-height: 100vh;
    width: auto !important;
    margin: auto;
}

.programme,
#colophon {
    padding: var(--marges);
}

.programme code {
    display: none;
}

.texte {
    /* max-width: calc(50vw - var(--marges)*2); */
}

.code .texte {
    display: none;
}

.code code {
    display: block;
}

.programme button {
    /* float: left; */
}

.programme h2 {
    margin-right: 1rem;
    /* float: left; */
}

.programme.code h2 {
    /* float: unset; */
}

button {
    background-color: var(--couleur);
}

/* .sketchwrapper canvas{
    margin: auto;
    box-shadow: 1rem 1rem 1rem black;    
} */

.pageEnPlus .programme {
    display: none;
}

.pageEnPlus {
    display: flex;
}


/*toggle switch*/
.toggle_switch>label{
    display: block;
    width: 100%;
    height: 100%;
}

.toggle_switch {
    position: relative;
    display: inline-block;
    width: 2rem;
    height: 1rem;
}

.toggle_switch input[type='checkbox'] {
    display: none;
}


.toggle_switch {
    cursor: pointer;
    background-color: grey;
    -webkit-transition: .4s;
    transition: .4s;
    box-shadow: 0 0 2px black;
    /* border-radius: 34px; */
}

.p5_play_pause{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.toggle_switch:before {
    position: absolute;
    content: "";
    height: 0.8rem;
    width: 0.8rem;
    left: 0.1rem;
    bottom: 0.1rem;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    pointer-events: none;
    /* border-radius: 50%; */
}

.toggle_switch:has(input:checked) {
    background-color: var(--couleur);
}

.toggle_switch:has(input:checked):before {
    -webkit-transform: translateX(1rem);
    -ms-transform: translateX(1rem);
    transform: translateX(1rem);
}

.toggle_switch:after {
    color: white;
    display: block;
    position: absolute;
    font-size: 10px;
    pointer-events: none;
}
.p5_play_pause::after{
    content: '⏸';
    top:3px;
    right: 7px;
}
.toggle_texte_code::after{
    content: 'abc';
    top:5px;
    right: 3px;
}

.toggle_switch:has(input:checked):after {
    pointer-events: none;
}
.p5_play_pause:has(input:checked):after {
    content: '▶';
    left: 5px;
    top:1px;
}
.toggle_texte_code:has(input:checked):after{
    content: '{';
    left: 3px;
    top:4px;
}

@media screen {
    .couverture h1{
        font-size: min(6.5rem,10vw);
    }
    .recette {
        margin-bottom: 28px;
        box-shadow: 0px 14px 14px var(--couleur);
    }

    .pageEnPlus .recette {
        margin: auto;
        box-shadow: unset
    }

    .pageEnPlus {
        box-shadow: 0px 14px 14px var(--couleur);
    }
}

@media print {
    html {
        margin: 0;
    }

    @page {
        size: 297mm 210mm;
        margin: 0;
    }

    body {
        font-size: 1.1rem;
        margin: 0;
        padding: 0;
    }

    code {
        display: none;
    }

    .couvertures {
        padding-top: var(--fondperdu);
        padding-bottom: var(--fondperdu);
        padding-right: var(--fondperdu);
        /* padding-right: var(--fondperdu); */

    }

    .couverture {
        height: calc(210mm - var(--fondperdu)*2 - 0.1px);
        width: calc(50% - var(--fondperdu));
        margin-left: auto;
        box-sizing: border-box;
        font-size: 1.5rem;
    }

    .couverture h1 {
        font-size: 2rem;
    }

    .couverture header {
        font-size: 1.8rem;
    }

    .firstPage {
        display: flex;
        border-color: unset;
        border-image: unset !important;
        background-color: white;
        border-style: none;
        padding: 28px;
    }

    .firstPage header {
        border-image: unset !important;
        border-style: none;
        padding: 28px;
    }

    canvas,
    iframe {
        max-height: 210mm;
        max-width: calc(297mm / 2);
        image-resolution: 300dpi;
        margin: auto;
        height: auto !important;
    }

    .texte {
        max-width: calc(297mm / 2 - var(--marges)*2);
    }

    .recette {
        margin: 0;
    }

    .programme {
        max-width: calc(297mm / 2);
    }

    .page canvas {
        max-height: calc(210mm / 2);
        width: auto !important;
    }

    .toggle_switch {
        display: none;
    }
}