/* Free exercises on durations. Loaded after clock-exercise.css (dial, pad, choices), imparfait-exercise.css (the display) and nombres-1000-exercise.css
   (the boxes of the pad): this sheet adds the parts of the dial to colour, the two dials of a duration and the number line of time. */
.duree-exercise .duree-display{font-size:22px}
/* The dial: twelve parts of 5 minutes, coloured in blue with a finger. */
.duree-clock{display:block;width:min(300px,100%);height:auto;margin:0 auto}
.duree-sector{fill:transparent;stroke:#d6defc;stroke-width:.8;stroke-dasharray:3 3}
.duree-sector.is-on{fill:#3d6dff;fill-opacity:.5;stroke:#034cff;stroke-dasharray:none}
.duree-sector.is-correct{fill:#3d6dff;fill-opacity:.55;stroke:#16794a;stroke-width:1.6;stroke-dasharray:none}
.duree-sector.is-wrong{fill:#e5383b;fill-opacity:.45;stroke:#b3261e;stroke-dasharray:none}
.duree-sector.is-missing{fill:#16794a;fill-opacity:.22;stroke:#16794a;stroke-width:1.6;stroke-dasharray:4 3}
.duree-clock .clock-number,.duree-clock .clock-tick,.duree-clock .clock-hand,.duree-clock .clock-pin{pointer-events:none}
.duree-clock--paint{touch-action:none;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.duree-paint{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:16px}
.duree-paint .clock-hint{margin:0;text-align:center}
.duree-clear{min-height:40px}
/* Two dials side by side: the start and the end. */
.duree-clocks{display:flex;flex-wrap:nowrap;justify-content:center;gap:18px}
.duree-clock-card{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0}
.duree-clock-card .duree-clock{width:min(200px,36vw)}
.duree-clock-card figcaption{font:800 18px Inter,sans-serif;color:#12208c}
/* The number line of time, with its bonds. */
.duree-figure{margin:0 0 16px;padding:8px 4px;border-radius:16px;background:#f4f7ff}
.duree-figure--after{margin:12px 0}
.duree-line{display:block;width:100%;height:auto;overflow:visible}
.duree-axis{stroke:#101052;stroke-width:3}
.duree-axis-head{fill:#101052}
.duree-tick{stroke:#101052;stroke-width:3;stroke-linecap:round}
.duree-mark{fill:#101052;font:800 27px Inter,sans-serif}
.duree-jump{fill:none;stroke:#034cff;stroke-width:3;stroke-linecap:round}
.duree-jump-head{fill:#034cff}
.duree-jump-label{fill:#034cff;font:800 25px Inter,sans-serif}
.duree-mark.is-unknown,.duree-jump-label.is-unknown{fill:#e5383b}
.duree-entry .n1000-fixed{white-space:normal}
@media(max-width:560px){
 .duree-exercise .duree-display{font-size:19px}
 .duree-clock{width:min(250px,100%)}
 .duree-clocks{gap:10px}
 .duree-clock-card figcaption{font-size:16px}
}