.ordre-exercice {
max-width: 68em;
margin: 0 0 3.5em;
}

.ordre-exercice__actions {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
align-items: center;
margin: 1.8rem 0 0.9rem;
}

.ordre-exercice__button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45em;
min-height: 42px;
padding: 0 1em;
border: 1px solid var(--couleur-lien);
border-radius: 4px;
background: var(--couleur-lien);
color: #fff;
font: inherit;
font-size: 0.95em;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ordre-exercice__button:hover,
.ordre-exercice__button:focus-visible {
background: #1d6a85;
border-color: #1d6a85;
}

.ordre-exercice__button--secondary {
background: transparent;
color: var(--couleur-lien);
}

.ordre-exercice__button--secondary:hover,
.ordre-exercice__button--secondary:focus-visible {
background: color-mix(in srgb, var(--couleur-lien) 12%, transparent);
border-color: var(--couleur-lien);
color: var(--couleur-lien);
}

.ordre-exercice__liste {
display: grid;
gap: 0.8rem;
width: 100%;
margin: 0;
padding: 0;
font: inherit;
list-style: none;
text-shadow: none;
}

.ordre-exercice__fragment {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
gap: 0.75rem;
align-items: start;
padding: 0.95rem;
border: 1px solid var(--couleur-bordure);
border-radius: 6px;
background: #fff;
color: var(--couleur-texte);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.ordre-exercice__fragment.is-dragging {
opacity: 0.58;
border-style: dashed;
box-shadow: none;
}

.ordre-exercice__fragment.is-correct {
border-color: #5caa76;
background: #f6fbf7;
}

.ordre-exercice__fragment.is-incorrect {
border-color: #d4937f;
background: #fff8f5;
}

.ordre-exercice__drag-handle,
.ordre-exercice__feedback,
.ordre-exercice__moves button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
}

.ordre-exercice__drag-handle {
border: 1px solid transparent;
border-radius: 4px;
background: transparent;
color: #8a8a8a;
cursor: grab;
opacity: 0.55;
touch-action: none;
user-select: none;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.ordre-exercice__drag-handle:active,
.ordre-exercice__fragment.is-dragging .ordre-exercice__drag-handle {
cursor: grabbing;
}

.ordre-exercice__drag-handle:hover,
.ordre-exercice__drag-handle:focus-visible {
border-color: #d8d8d8;
background: #f7f7f7;
color: var(--couleur-lien);
opacity: 1;
outline: none;
}

.ordre-exercice__texte {
min-width: 0;
font-size: 1.03em;
line-height: 1.55;
text-align: left;
overflow-wrap: anywhere;
}

.ordre-exercice__texte img {
float: left;
width: 3.2rem;
max-width: 24%;
height: auto;
margin: 0.15rem 0.55rem 0.25rem 0;
}

.ordre-exercice__texte--titre {
font-family: "Fraunces", Georgia, serif;
font-size: 1.2em;
font-weight: 600;
text-align: center;
}

.ordre-exercice__feedback {
color: transparent;
font-size: 1.05em;
}

.ordre-exercice__fragment.is-correct .ordre-exercice__feedback {
color: #247545;
}

.ordre-exercice__fragment.is-incorrect .ordre-exercice__feedback {
color: #b85b3d;
}

.ordre-exercice__moves {
display: inline-flex;
gap: 0.35rem;
}

.ordre-exercice__moves button {
border: 1px solid transparent;
border-radius: 4px;
background: transparent;
color: #858585;
font: inherit;
cursor: pointer;
opacity: 0.5;
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

.ordre-exercice__moves button:hover,
.ordre-exercice__moves button:focus-visible {
border-color: #d8d8d8;
background: #f7f7f7;
color: var(--couleur-lien);
opacity: 1;
outline: none;
}

.ordre-exercice__moves button:disabled {
opacity: 0.18;
cursor: not-allowed;
}

.ordre-exercice__fragment:hover .ordre-exercice__drag-handle,
.ordre-exercice__fragment:focus-within .ordre-exercice__drag-handle,
.ordre-exercice__fragment:hover .ordre-exercice__moves button:not(:disabled),
.ordre-exercice__fragment:focus-within .ordre-exercice__moves button:not(:disabled) {
opacity: 0.82;
}

.ordre-exercice__drag-handle:hover,
.ordre-exercice__drag-handle:focus-visible,
.ordre-exercice__moves button:hover,
.ordre-exercice__moves button:focus-visible {
opacity: 1;
}

html[data-theme="dark"] .ordre-exercice__fragment {
background: #191919;
border-color: #3b3b3b;
box-shadow: none;
}

html[data-theme="dark"] .ordre-exercice__fragment.is-correct {
background: #152217;
border-color: #4e9465;
}

html[data-theme="dark"] .ordre-exercice__fragment.is-incorrect {
background: #261915;
border-color: #a76552;
}

html[data-theme="dark"] .ordre-exercice__drag-handle,
html[data-theme="dark"] .ordre-exercice__moves button {
background: transparent;
border-color: transparent;
color: #a8a8a8;
}

html[data-theme="dark"] .ordre-exercice__drag-handle:hover,
html[data-theme="dark"] .ordre-exercice__drag-handle:focus-visible,
html[data-theme="dark"] .ordre-exercice__moves button:hover,
html[data-theme="dark"] .ordre-exercice__moves button:focus-visible {
background: #222;
border-color: #444;
color: var(--couleur-lien);
}

@media (hover: none) {
.ordre-exercice__drag-handle,
.ordre-exercice__moves button {
opacity: 0.68;
}

.ordre-exercice__moves button:disabled {
opacity: 0.22;
}
}

@media screen and (max-width: 640px) {
.ordre-exercice__actions {
align-items: stretch;
}

.ordre-exercice__button {
flex: 1 1 9rem;
}

.ordre-exercice__fragment {
grid-template-columns: auto minmax(0, 1fr);
gap: 0.65rem;
padding: 0.8rem;
}

.ordre-exercice__feedback {
grid-column: 1;
grid-row: 2;
}

.ordre-exercice__moves {
grid-column: 2 / -1;
grid-row: 2;
justify-self: start;
}

.ordre-exercice__texte {
font-size: 1em;
}
}