/* Réviser · Verbes (js/pages/verbs.js) : styles de la maquette, limités à la partie « Verbes » */
#rv-verbs{--ok:#1f9d55;--ok-soft:#e3f6ea;--bad:#d64545;--bad-soft:#fbe7e7;--hl:#b45309;--hl-soft:#fdf0dd;--hl2:#7c3aed;--hl2-soft:#efe7fd}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) #rv-verbs{--ok:#4cc38a;--ok-soft:#173527;--bad:#f07070;--bad-soft:#3d1f22;--hl:#f0a54a;--hl-soft:#3a2a14;--hl2:#b69cff;--hl2-soft:#2d2347}}
:root[data-theme="dark"] #rv-verbs{--ok:#4cc38a;--ok-soft:#173527;--bad:#f07070;--bad-soft:#3d1f22;--hl:#f0a54a;--hl-soft:#3a2a14;--hl2:#b69cff;--hl2-soft:#2d2347}
#rv-verbs .opt.right, #rv-verbs .next{color:var(--accent-ink)}
#rv-verbs .chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
#rv-verbs .chip{font:inherit;font-size:.88rem;padding:7px 14px;border-radius:999px;border:1.5px solid var(--line);
    background:var(--surface);color:var(--ink);cursor:pointer}
#rv-verbs .chip.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
#rv-verbs .why{font-size:.8rem;line-height:1.4;color:var(--muted);margin:0 0 10px}
#rv-verbs .astuces{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:0 12px;margin-bottom:12px}
#rv-verbs .astuces summary{cursor:pointer;font-weight:600;padding:10px 0;font-size:.95rem}
#rv-verbs .astuce{padding:10px 0;border-top:1px solid var(--line)}
#rv-verbs .astuce h3{font-size:.9rem;margin:0 0 4px}
#rv-verbs .astuce p{font-size:.85rem;line-height:1.45;margin:0 0 6px}
#rv-verbs .astuce .ex{font-size:.84rem;color:var(--muted);padding-left:10px;border-left:3px solid var(--hl-soft);margin:2px 0}
#rv-verbs .astuce .ex b{color:var(--hl)}
#rv-verbs .note{font-size:.85rem;line-height:1.45;background:var(--accent-soft);border-radius:10px;
    padding:9px 12px;margin-bottom:14px}
#rv-verbs .bar{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
#rv-verbs .consigne{color:var(--muted);font-size:.9rem;margin:0 0 14px}
#rv-verbs .score{font-size:.88rem;color:var(--muted);white-space:nowrap}
/* Étoile : mise en page en flux (aucun chevauchement possible) */
#rv-verbs .star{position:relative;display:flex;flex-direction:column;gap:20px;padding:4px 0}
#rv-verbs .star svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
#rv-verbs .star line{stroke:var(--line);stroke-width:2;stroke-dasharray:4 5;transition:stroke .3s}
#rv-verbs .star.solved line{stroke:var(--ok);stroke-dasharray:none}
#rv-verbs .slot-tb{display:flex;justify-content:center}
#rv-verbs .slot-tb .sent{max-width:66%}
#rv-verbs .mid{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}
#rv-verbs .col{display:flex;flex-direction:column;gap:16px}
#rv-verbs .center{width:110px;height:110px;border-radius:50%;background:var(--accent-soft);
    border:3px solid var(--accent);display:flex;align-items:center;justify-content:center;
    text-align:center;font-weight:700;font-size:.95rem;padding:8px;z-index:1;position:relative;
    overflow-wrap:anywhere;transition:background .3s,border-color .3s}
#rv-verbs .center.ok{background:var(--ok-soft);border-color:var(--ok)}
#rv-verbs .center .q{font-size:2rem;color:var(--accent)}
#rv-verbs .sent{position:relative;z-index:1;background:var(--surface);border:1.5px solid var(--line);
    border-radius:12px;padding:9px 11px;font-size:.9rem;line-height:1.4;
    box-shadow:0 1px 3px rgba(0,0,0,.06);transition:border-color .3s}
#rv-verbs .star.solved .sent{border-color:var(--ok)}
#rv-verbs .blank{display:inline-block;min-width:3em;border-bottom:2px solid var(--accent);
    text-align:center;color:var(--accent);font-weight:600}
#rv-verbs .blank.filled{border-bottom-color:var(--ok);color:var(--ok);min-width:0;padding:0 2px}
#rv-verbs .hl{border-radius:4px;padding:0 2px;transition:background .3s,color .3s}
#rv-verbs .star.solved .hl{background:var(--hl-soft);color:var(--hl);font-weight:600}
#rv-verbs .hl2{border-radius:4px;padding:0 2px;transition:background .3s,color .3s}
#rv-verbs .star.solved .hl2{background:var(--hl2-soft);color:var(--hl2);font-weight:600}
#rv-verbs .tr{display:none;color:var(--muted);font-size:.8rem;margin-top:4px;font-style:italic}
#rv-verbs .star.solved .tr:not(:empty){display:block}
#rv-verbs .options{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px}
#rv-verbs .opt{font:inherit;font-size:1rem;font-weight:600;padding:12px;border-radius:10px;
    border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
#rv-verbs .opt:hover:not(:disabled){border-color:var(--accent)}
#rv-verbs .opt.wrong{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
#rv-verbs .opt.right{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
#rv-verbs .opt:disabled{cursor:default}
#rv-verbs .shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
#rv-verbs .feedback{min-height:1.4em;margin-top:12px;font-size:.92rem;text-align:center}
#rv-verbs .feedback.ok{color:var(--ok)}
#rv-verbs .feedback.bad{color:var(--bad)}
#rv-verbs .legend{display:none;text-align:center;font-size:.82rem;color:var(--muted);margin-top:4px}
#rv-verbs .legend.show{display:block}
#rv-verbs .legend b{background:var(--hl-soft);color:var(--hl);padding:0 4px;border-radius:4px}
#rv-verbs .legend b.b2{background:var(--hl2-soft);color:var(--hl2)}
#rv-verbs .tip{display:none;margin:12px 0 0;font-size:.88rem;line-height:1.45;border-left:4px solid var(--hl);
    background:var(--hl-soft);border-radius:8px;padding:9px 12px}
#rv-verbs .tip.show{display:block}
#rv-verbs .tip strong{color:var(--hl)}
#rv-verbs .next{display:none;margin:14px auto 0;font:inherit;font-weight:600;padding:11px 22px;
    border-radius:10px;border:none;background:var(--accent);color:#fff;cursor:pointer}
#rv-verbs .next.show{display:block}
#rv-verbs .list{margin-top:34px}
#rv-verbs .list h2{font-size:1.05rem;margin:0 0 4px}
#rv-verbs .list .hint{font-size:.82rem;color:var(--muted);margin:0 0 10px}
#rv-verbs .row{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;
    padding:10px 12px;background:var(--surface);border:1.5px solid var(--line);border-radius:10px;
    margin-bottom:8px;cursor:pointer;width:100%;text-align:left;font:inherit;color:inherit}
#rv-verbs .row:hover{border-color:var(--accent)}
#rv-verbs .row.current{border-color:var(--accent);background:var(--accent-soft)}
#rv-verbs .row .de{font-weight:700}
#rv-verbs .row .pat{font-size:.8rem;color:var(--muted);font-weight:400;margin-left:6px}
#rv-verbs .row .tl{grid-column:1;font-size:.88rem;color:var(--muted)}
#rv-verbs .count{grid-row:1 / span 2;grid-column:2;font-size:.82rem;white-space:nowrap;text-align:right}
#rv-verbs .count b{font-size:1.15rem;display:block;line-height:1.1}
#rv-verbs .count.zero{color:var(--bad)}
#rv-verbs .count.some{color:var(--ok)}
@media (max-width:520px){
#rv-verbs .mid{gap:8px}
#rv-verbs .col{gap:12px}
#rv-verbs .star{gap:16px}
#rv-verbs .slot-tb .sent{max-width:82%}
#rv-verbs .sent{font-size:.8rem;padding:7px 8px}
#rv-verbs .center{width:86px;height:86px;font-size:.78rem;padding:6px}
}

/* after the answer: the translation of the verb in the circle and under each of the 4 answers */
#rv-verbs .center{flex-direction:column;gap:2px}
#rv-verbs .center .cv{line-height:1.15}
#rv-verbs .center .ctr{font-weight:400;font-size:.72rem;line-height:1.2;color:var(--muted)}
#rv-verbs .opt .otr{display:block;font-weight:400;font-size:.8rem;margin-top:2px;color:var(--muted)}
#rv-verbs .opt.right .otr{color:inherit;opacity:.85}
#rv-verbs #vb-ad{margin-top:22px} #rv-verbs #vb-promo{margin-top:16px}
