:root {
    --papier:#eeeee8;
    --carte:#f9f9f4;
    --encre:#293d3b;
    --discret:#73817a;
    --trait:#d4dbd3;
    --accent:#287f7a;
}
* {
    box-sizing:border-box;
}
body {
    margin:0;
    background:var(--papier);
    color:var(--encre);
    font:14px/1.5 system-ui,sans-serif;
}
header,main,footer {
    max-width:1500px;
    margin:auto;
    padding:22px 30px;
}
header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}
h1 {
    font:500 43px/1.1 Georgia,serif;
    letter-spacing:-1.1px;
    margin:6px 0;
}
h1 span {
    color:var(--accent);
}
header p {
    color:var(--discret);
    font-size:12px;
    margin:8px 0 0;
}
.surtitre {
    font-size:9px;
    letter-spacing:2.7px;
}
.actions {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}
button,select,input {
    font:inherit;
}
button,select {
    min-height:40px;
    border:1px solid var(--trait);
    border-radius:7px;
    padding:8px 11px;
    background:var(--carte);
    color:var(--encre);
}
button {
    cursor:pointer;
}
button:hover {
    border-color:var(--accent);
}
button:disabled {
    opacity:.5;
    cursor:wait;
}
button.principal {
    background:#d9e7df;
    border-color:#b7d0c2;
}
button.sombre {
    background:var(--encre);
    color:white;
    border-color:var(--encre);
}
button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:3px;
}
.version {
    color:var(--discret);
    font-size:9px;
    letter-spacing:1px;
    margin-right:8px;
}
main {
    padding-top:5px;
}
.barreOutils {
    display:flex;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:15px;
}
.barreOutils button,.barreOutils select {
    font-size:12px;
}
.planTravail {
    display:grid;
    grid-template-columns:minmax(0,1fr) 275px;
    gap:22px;
    align-items:start;
}
.zoneScene {
    position:relative;
    height:min(68vh,740px);
    min-height:440px;
    border:1px solid var(--trait);
    background:radial-gradient(ellipse at 50% 42%,#fafbf6,#dce3dc);
    border-radius:12px;
    overflow:hidden;
}
.zoneScene:fullscreen {
    width:100vw;
    height:100vh;
}
.zoneScene canvas {
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
}
#scene {
    touch-action:none;
    cursor:grab;
}
.hautScene,.basScene {
    position:absolute;
    left:18px;
    right:18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    pointer-events:none;
}
.hautScene {
    top:16px;
    font-size:9px;
    letter-spacing:1.3px;
    color:var(--discret);
}
#nombreBoucles {
    background:#ffffffa8;
    padding:5px 9px;
    border-radius:99px;
    letter-spacing:0;
}
.basScene {
    bottom:12px;
    font-size:11px;
    color:#536a61;
}
.basScene button {
    pointer-events:auto;
    font-size:21px;
    min-height:34px;
    padding:0 9px;
}
.aideTrait {
    position:absolute;
    top:58px;
    left:20px;
    right:20px;
    text-align:center;
    pointer-events:none;
    font-size:14px;
    color:var(--accent);
}
.aideTrait small {
    color:var(--discret);
}
.aideTrait button {
    pointer-events:auto;
    display:block;
    margin:10px auto;
}
aside section {
    border-bottom:1px solid var(--trait);
    padding:0 0 18px;
    margin:0 0 18px;
}
h2 {
    font-size:13px;
    font-weight:650;
    margin:0 0 14px;
}
label {
    font-size:11px;
    color:var(--discret);
}
aside select {
    width:100%;
    font-size:12px;
    margin-top:6px;
}
.commande {
    margin:13px 0;
}
.commande label {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
}
.commande input[type=number] {
    width:76px;
    background:transparent;
    border:1px solid var(--trait);
    border-radius:4px;
    padding:4px;
    color:var(--encre);
    font:12px ui-monospace,monospace;
}
input[type=range] {
    width:100%;
    accent-color:var(--accent);
    touch-action:none;
    margin-top:10px;
}
.note {
    font-size:11px;
    color:var(--discret);
    line-height:1.6;
}
details {
    padding:12px 0;
    border-bottom:1px solid var(--trait);
    font-size:11px;
}
summary {
    font-size:12px;
    cursor:pointer;
}
.optionCase {
    display:flex;
    gap:8px;
    align-items:center;
    margin-top:12px;
}
a {
    color:var(--accent);
}
.exports {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    margin-top:14px;
}
.exports button {
    font-size:11px;
}
#messageAtelier {
    color:var(--accent);
    min-height:22px;
    font-size:12px;
}
.intro {
    display:grid;
    grid-template-columns:80px 1fr 1fr;
    gap:25px;
    border-top:1px solid var(--trait);
    padding-top:12px;
    align-items:start;
}
.intro p {
    font-size:12px;
    margin:3px 0;
}
.numeroIntro {
    font:11px ui-monospace,monospace;
    color:var(--discret);
    padding-top:6px;
}
footer {
    font-size:10px;
    color:var(--discret);
    padding-top:10px;
}
.lecteurEcran {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
}
@media(max-width:900px) {
    header,main,footer {
        padding:18px;
    }
    header {
        align-items:flex-start;
        flex-direction:column;
    }
    .planTravail {
        grid-template-columns:1fr;
    }
    .zoneScene {
        height:60vh;
        min-height:360px;
    }
    aside {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:0 24px;
    }
    aside details {
        grid-column:1/-1;
    }
    .intro {
        grid-template-columns:1fr 1fr;
        gap:12px;
    }
    .numeroIntro {
        display:none;
    }
}
@media(max-width:450px) {
    h1 {
        font-size:34px;
    }
    header,main,footer {
        padding:13px;
    }
    .barreOutils .actions {
        gap:5px;
    }
    .barreOutils button,.barreOutils select {
        padding:8px;
        font-size:11px;
    }
    .zoneScene {
        min-height:330px;
    }
    .basScene {
        font-size:9px;
    }
    aside {
        gap:0 14px;
    }
    .intro {
        grid-template-columns:1fr;
    }
}
[hidden] {
    display:none !important;
}
.aideTrait .actions {
    pointer-events:auto;
    justify-content:center;
}
.barreEnregistrement {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    padding:0 0 15px;
    font-size:12px;
}
#enregistrer.enCours {
    background:#a14335;
    color:white;
    border-color:#a14335;
}
#dureeEnregistrement {
    color:#985342;
    font:12px ui-monospace,monospace;
}