/*
 * Fichier : site_v3/public/static/css/lab_v3_actions.css
 * V3 (2026-10-01) — harmonisation des pages Relatifs et Fractions sur le
 * modèle des pages récentes (Fonctions, Aires, Trigo). Uniquement de la
 * PRÉSENTATION : les boutons et les textes sont ceux de chaque page (mêmes
 * actions, mêmes messages) ; static/js/lab_v3_actions.js ne fait que les
 * ranger dans une rangée de boutons ronds sous la carte (desktop).
 * Les pages v2 ne chargent pas ce fichier.
 */

/* ── Rangée de boutons ronds sous la carte (desktop) ──
   Sélecteurs préfixés « .exo-card .v3-card-footer button… » : plus précis que
   les règles des pages (.input-group .check-btn, .action-buttons-wrapper .btn
   { … !important }) qui imposaient hauteur, bordure et coins. */
.v3-card-footer { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 18px; }
.v3-card-footer > *, .v3-card-footer .d-flex { margin: 0 !important; }
.v3-card-footer .action-buttons-wrapper,
.v3-card-footer .action-buttons-row,
.v3-card-footer .wrong-actions-wrapper,
.v3-card-footer .action-buttons-wrapper > .d-flex { gap: 12px !important; justify-content: center; align-items: center; }
.v3-card-footer .action-buttons-row:not([style*="display: none"]),
.v3-card-footer .wrong-actions-wrapper { display: inline-flex; }

/* Indice, Méthode, Correction : secondaires — fond blanc, contour fin, icône
   colorée ; teinte au survol. Icône seule (le texte reste lu par les lecteurs
   d'écran et repris en infobulle). */
.exo-card .v3-card-footer button.v3-round {
    width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; max-height: 48px !important;
    border-radius: 50% !important; padding: 0 !important; margin: 0 !important;
    display: inline-flex !important; align-items: center; justify-content: center; flex-shrink: 0;
    font-size: 0 !important; line-height: 1 !important;
    background: #fff !important; border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06) !important;
    cursor: pointer; transition: transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    animation: v3RoundIn .2s ease;
}
.exo-card .v3-card-footer button.v3-round[hidden] { display: none !important; }
.exo-card .v3-card-footer button.v3-round i { font-size: 1.15rem !important; margin: 0 !important; line-height: 1; }
.exo-card .v3-card-footer button.v3-round:hover { transform: translateY(-1px); box-shadow: 0 4px 10px -4px rgba(15, 23, 42, .18) !important; }
.exo-card .v3-card-footer button.v3-round:active { transform: translateY(0) scale(.96); }
.exo-card .v3-card-footer button.v3-round:focus-visible { outline: 3px solid rgba(59, 130, 246, .35) !important; outline-offset: 2px; }
/* Indice : neutre, comme le bouton Indice des pages Aires / Pythagore. */
.exo-card .v3-card-footer button.v3-round-hint   { color: #475569 !important; border-color: #cbd5e1 !important; }
.exo-card .v3-card-footer button.v3-round-hint:hover   { background: #f8fafc !important; border-color: #94a3b8 !important; color: #1e293b !important; }
.exo-card .v3-card-footer button.v3-round-method { color: #0284c7 !important; }
.exo-card .v3-card-footer button.v3-round-method:hover { background: #f0f9ff !important; border-color: #7dd3fc !important; }
.exo-card .v3-card-footer button.v3-round-corr   { color: #dc2626 !important; }
.exo-card .v3-card-footer button.v3-round-corr:hover   { background: #fef2f2 !important; border-color: #fca5a5 !important; }
@keyframes v3RoundIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }

/* Valider : action principale — cercle plein de la couleur de la page, sans
   contour (l'ancien bouton « collé au champ » gardait une bordure grise et un
   trait à gauche), légère ombre. */
.exo-card .v3-card-footer button.check-btn {
    width: 56px !important; height: 56px !important; min-width: 56px !important; min-height: 56px !important; max-height: 56px !important;
    border-radius: 50% !important; padding: 0 !important; margin: 0 !important;
    border: 0 !important; outline: 0; flex-shrink: 0;
    display: inline-flex !important; align-items: center; justify-content: center;
    font-size: 1.4rem !important; line-height: 1 !important;
    box-shadow: 0 6px 14px -6px rgba(15, 23, 42, .45) !important;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.exo-card .v3-card-footer button.check-btn i { margin: 0 !important; line-height: 1; }
.exo-card .v3-card-footer button.check-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 10px 18px -8px rgba(15, 23, 42, .5) !important; }
.exo-card .v3-card-footer button.check-btn:active:not(:disabled) { transform: translateY(0) scale(.96); }
.exo-card .v3-card-footer button.check-btn:focus-visible { outline: 3px solid rgba(59, 130, 246, .35) !important; outline-offset: 2px; }
.exo-card .v3-card-footer button.check-btn:disabled { opacity: .4; box-shadow: none !important; }

/* Le champ, privé de son bouton accolé, reprend ses coins arrondis. */
.v3-moved-check .answer-display,
.v3-moved-check .form-control { border-radius: 12px !important; }

/* Indice affiché dans le panneau latéral (texte de la page, inchangé). */
.exo-side-body .v3-hint-panel { background: #fff7ed; border: 1.5px solid #fed7aa; border-radius: 10px; padding: .8rem 1rem; color: #7c2d12; font-size: .95rem; line-height: 1.55; }

/* ── Feedbacks hiérarchisés : 1re ligne = message principal, suivantes =
   explication (même lecture que .ar-rule-main / .ar-rule-sub de Fonctions). ── */
.hint-box.bug-alert { border-left-width: 4px; padding: 12px 14px; }
.hint-box.bug-alert .hint-alert-line:first-child { font-size: 1.05rem; font-weight: 800; color: #0f172a; line-height: 1.35; }
.hint-box.bug-alert .hint-alert-line:first-child i { color: #ea580c; }
.hint-box.bug-alert .hint-alert-line + .hint-alert-line { font-size: .92rem; font-weight: 500; color: #475569; line-height: 1.5; }

/* ── Écran de fin de série (anneau), commun à toutes ces pages ── */
.lab-finish-overlay { position: fixed; inset: 0; z-index: 10700; display: flex; align-items: center; justify-content: center; padding: 24px;
    background: radial-gradient(ellipse 70% 55% at 90% 110%, rgba(79,70,229,.22) 0%, transparent 60%), linear-gradient(155deg, #0b1022 0%, #0f1a34 45%, #1a2a4d 100%); }
.lab-finish-card { width: min(94vw, 380px); text-align: center; color: #fff; }
.lab-finish-ring { --pct: 0; width: 152px; height: 152px; border-radius: 50%; margin: 0 auto 18px; position: relative; display: flex; align-items: center; justify-content: center;
    background: conic-gradient(#818cf8 calc(var(--pct) * 1%), rgba(255,255,255,.12) 0); }
.lab-finish-ring::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: #0f172a; }
.lab-finish-ring-value { position: relative; z-index: 1; font-size: 2.1rem; font-weight: 900; }
.lab-finish-ring-value small { font-size: 1.1rem; font-weight: 700; color: #a5b4fc; }
.lab-finish-record { font-size: .78rem; font-weight: 700; color: #a5b4fc; margin: 0 0 6px; }
.lab-finish-card h2 { font-size: 1.5rem; font-weight: 900; margin: 4px 0 6px; }
.lab-finish-sub { color: #cbd5e1; font-size: .88rem; margin-bottom: 24px; }
.lab-finish-primary, .lab-finish-secondary { width: 100%; border-radius: 14px; padding: 13px; font-weight: 800; border: none; font-size: .92rem; display: flex; align-items: center; justify-content: center; gap: 8px; }
.lab-finish-primary { background: linear-gradient(135deg, #818cf8, #4338ca); color: #fff; box-shadow: 0 14px 26px -10px rgba(67,56,202,.55); margin-bottom: 10px; }
.lab-finish-secondary { background: rgba(255,255,255,.08); color: #cbd5e1; border: 1px solid rgba(255,255,255,.14); }
.lab-finish-progress { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: .85rem; font-weight: 700; color: #a5b4fc; text-decoration: none; }
.lab-finish-progress:hover { color: #c7d2fe; text-decoration: underline; }
@media (min-width: 992px) {
    .lab-finish-overlay { background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(3px); }
    .lab-finish-card { width: min(90vw, 340px); background: #fff; border-radius: 20px; padding: 30px 26px 26px; color: #0f172a;
        box-shadow: 0 24px 60px -14px rgba(15,23,42,.35), 0 4px 16px rgba(15,23,42,.08); }
    .lab-finish-ring { width: 120px; height: 120px; margin-bottom: 14px; background: conic-gradient(#4f46e5 calc(var(--pct) * 1%), #e2e8f0 0); }
    .lab-finish-ring::before { background: #fff; inset: 9px; }
    .lab-finish-ring-value { color: #0f172a; font-size: 1.7rem; }
    .lab-finish-ring-value small { color: #94a3b8; }
    .lab-finish-record { color: #4338ca; }
    .lab-finish-card h2 { color: #0f172a; font-size: 1.25rem; }
    .lab-finish-sub { color: #64748b; }
    .lab-finish-secondary { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
    .lab-finish-progress { color: #4338ca; }
}