/* Free exercises on the past, the present and the future. Loaded after clock-exercise.css, imparfait-exercise.css, phrases-exercise.css and noms-exercise.css, whose line, keyboard, table and words to touch it reuses. */
.temps-rows--3 .noms-sort-row{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))}
/* The timeline: an arrow from the past (left) to the future (right), the present in the middle. */
.temps-frise{display:grid;gap:12px;margin:0 0 18px}
.temps-frise-axis{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 0 22px;font:700 14px/1.2 Inter,sans-serif;color:#101052;text-align:center}
.temps-frise-axis::before{content:"";position:absolute;left:0;right:14px;bottom:8px;height:6px;border-radius:3px;background:linear-gradient(90deg,#7e8bff,#034cff)}
.temps-frise-axis::after{content:"";position:absolute;right:0;bottom:1px;border-left:18px solid #034cff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.temps-frise-now{position:relative}
.temps-frise-now::after{content:"";position:absolute;left:50%;bottom:-22px;width:6px;height:20px;margin-left:-3px;border-radius:3px;background:#e0352b}
.temps-frise-row{display:grid;gap:6px}
.temps-frise-sentence{margin:0;font:700 18px/1.35 Inter,sans-serif;color:#101052}
.temps-frise-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.temps-frise .clock-choice{min-height:44px;padding:6px 8px;font-size:15px}
.temps-frise .clock-choice.is-missed{outline:3px dashed #16794a;outline-offset:2px}
/* Events touched in the order they happen. */
.temps-order{display:grid;gap:10px;margin:0 0 18px}
.temps-order-card{display:flex;flex-wrap:wrap;align-items:center;gap:12px;min-height:56px;padding:10px 14px;border:2px solid #cdccff;border-radius:14px;background:#fff;color:#101052;font:650 17px/1.35 Inter,sans-serif;text-align:left;cursor:pointer}
.temps-order-card[aria-pressed="true"]{border-color:#034cff;background:#e7eeff}
.temps-order-card:disabled{cursor:default}
.temps-order-card.is-correct{border-color:#16794a;background:#e4f6ec}
.temps-order-card.is-wrong{border-color:#b3261e;background:#fdeceb}
.temps-order-badge{display:inline-grid;place-items:center;flex:0 0 34px;height:34px;border:2px dashed #9aa3ff;border-radius:50%;font-weight:800;color:#034cff}
.temps-order-card[aria-pressed="true"] .temps-order-badge{border-style:solid;border-color:#034cff;background:#034cff;color:#fff}
.temps-order-text{flex:1 1 200px}
.temps-order-right{flex-basis:100%;padding-left:46px;font-size:14px;color:#b3261e}
@media(max-width:700px){
 .temps-rows--3 .noms-sort-row{grid-template-columns:repeat(3,minmax(0,1fr))}
 .temps-frise-axis{font-size:12px}
 .temps-frise-sentence{font-size:17px}
}