/* Débat IA : la télécommande du formateur. D'abord le téléphone (une colonne, le bouton Suivant toujours sous le pouce) ; sur ordinateur, 2 colonnes. */
.r-page { max-width: 1100px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.r-tete { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: max(10px, env(safe-area-inset-top)) 16px 10px; background: var(--action); color: var(--action-t); }
.r-tete-g { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; }
.r-code { font-family: var(--f-titre); font-weight: 800; letter-spacing: .1em; font-size: 14px; opacity: .8; }
.r-etape { font-family: var(--f-titre); font-weight: 800; font-size: 19px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-chrono { display: flex; align-items: center; gap: 6px; }
.r-chrono b { font-family: var(--f-titre); font-weight: 800; font-size: 24px; font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: right; }
.r-chrono b.fini { background: var(--jaune); color: #1A2632; border-radius: 8px; padding: 0 6px; }
.r-mini { border: 1.5px solid currentColor; background: none; color: inherit; border-radius: 99px; padding: 4px 10px; font-weight: 700; font-size: 14px; min-height: 34px; }
.r-retard { font-size: 13px; font-weight: 700; opacity: .9; }
.r-retard.tard { color: #FFD08A; }
.r-alerte { background: var(--alerte); color: #fff; padding: 10px 16px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.r-alerte button { background: #fff; color: var(--alerte); border: 0; border-radius: 99px; padding: 6px 12px; font-weight: 700; }
.r-corps { flex: 1; padding: 16px 16px 120px; display: grid; gap: 14px; align-content: start; }
@media (min-width: 900px) { .r-corps { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } .r-col { display: grid; gap: 14px; align-content: start; } }
.r-col { display: grid; gap: 14px; align-content: start; min-width: 0; }
.r-carte { background: var(--carte); border-radius: 14px; padding: 16px; box-shadow: var(--ombre); display: flex; flex-direction: column; gap: 8px; }
.r-label { font-size: 13px; font-weight: 700; color: var(--doux); letter-spacing: .02em; }
.r-texte { font-size: 18px; line-height: 1.4; color: var(--encre); }
.r-question { font-size: 19px; line-height: 1.35; font-weight: 700; color: var(--encre); }
.r-attendu { font-size: 16px; line-height: 1.4; }
.r-classe { color: var(--doux); font-size: 15px; padding: 0 4px; }
.r-chiffre { display: flex; align-items: baseline; gap: 8px; }
.r-chiffre b { font-family: var(--f-titre); font-weight: 800; font-size: 30px; color: var(--encre); font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; }
.r-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.r-btn { min-height: 46px; border: 2px solid var(--trait); border-radius: 12px; background: var(--carte); font-weight: 700; padding: 8px 14px; color: var(--encre); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.r-btn.plein { background: var(--action); border-color: var(--action); color: var(--action-t); }
.r-btn.danger { border-color: var(--alerte); color: var(--alerte); }
.r-btn.petit { min-height: 36px; padding: 4px 10px; font-size: 14px; border-radius: 10px; }
.r-tour { border-left: 6px solid var(--camp); border-radius: 12px; background: var(--carte2); padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.r-tour b { font-family: var(--f-titre); font-size: 18px; color: var(--encre); }
.r-tour p { font-size: 17px; line-height: 1.35; }
.r-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.r-liste li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--trait); }
.r-liste li:last-child { border-bottom: 0; }
.r-liste .r-nom { flex: 1; min-width: 8em; font-weight: 700; }
.r-liste .r-nom small { display: block; font-weight: 400; color: var(--doux); }
.r-point { width: 10px; height: 10px; border-radius: 50%; background: var(--trait); flex: none; }
.r-point.ok { background: var(--pour); }
.r-camp-pour { color: var(--pour); font-weight: 700; } .r-camp-contre { color: var(--contre); font-weight: 700; }
.r-texte-mod { flex: 1 1 100%; font-size: 16px; }
.r-texte-mod small { color: var(--doux); }
details.r-carte > summary { cursor: pointer; font-family: var(--f-titre); font-weight: 800; font-size: 17px; color: var(--encre); list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 32px; }
details.r-carte > summary::-webkit-details-marker { display: none; }
details.r-carte > summary::after { content: "+"; font-size: 22px; color: var(--doux); }
details.r-carte[open] > summary::after { content: "−"; }
.r-obj { padding: 8px 0; border-bottom: 1px solid var(--trait); }
.r-obj:last-child { border-bottom: 0; }
.r-obj b { display: block; color: var(--encre); }
.r-tours li.ici { background: color-mix(in srgb, var(--focus) 14%, transparent); border-radius: 8px; padding-left: 6px; font-weight: 700; }
.r-tours li.passe { color: var(--doux); }
.r-plan li.ici { background: color-mix(in srgb, var(--encre) 8%, transparent); border-radius: 8px; padding-left: 6px; }
.r-plan li.passe { color: var(--doux); }
.r-plan .r-heure { font-variant-numeric: tabular-nums; color: var(--doux); min-width: 3.2em; }
.r-interrupteur { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; }
.r-interrupteur span small { display: block; color: var(--doux); }
.r-interrupteur input { width: 46px; height: 26px; accent-color: var(--action); flex: none; }
.r-qr { background: #fff; padding: 10px; border-radius: 12px; width: 220px; max-width: 100%; line-height: 0; }
.r-qr svg { width: 100%; height: auto; }
.r-avert { color: var(--alerte); font-weight: 700; }
.r-bas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--carte); border-top: 1px solid var(--trait); box-shadow: 0 -6px 20px rgba(15, 37, 55, .08); }
.r-bas > div { max-width: 1100px; margin: 0 auto; width: 100%; display: flex; gap: 10px; }
.r-suivant { flex: 1; min-height: 60px; border: 0; border-radius: 14px; background: var(--action); color: var(--action-t); font-weight: 800; font-size: 18px; padding: 8px 14px; text-align: left; display: flex; flex-direction: column; justify-content: center; }
.r-suivant small { font-weight: 400; font-size: 14px; opacity: .85; }
.r-retour { min-height: 60px; border: 2px solid var(--trait); border-radius: 14px; background: var(--carte); font-weight: 700; padding: 8px 14px; color: var(--encre); }
.r-equipes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.r-equipes > div { background: var(--carte2); border-radius: 10px; padding: 10px; font-size: 15px; }
.r-equipes > div b { display: block; }
.r-creer { max-width: 520px; margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 18px 40px; display: flex; flex-direction: column; gap: 16px; }
.r-ok { color: var(--pour); font-weight: 700; }
.r-bref { border-left: 6px solid var(--focus); }
.r-bref p:not(.r-label) { font-size: 17px; line-height: 1.4; color: var(--encre); }
/* La création : la banque de phrases, par domaine. */
.r-banque { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.r-banque legend { padding: 0; margin-bottom: 4px; }
.r-domaine { font-size: 13px; font-weight: 700; color: var(--doux); margin-top: 8px; }
.r-phrase { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--trait); border-radius: 10px; padding: 8px 10px; cursor: pointer; font-size: 15px; line-height: 1.35; }
.r-phrase:has(input:checked) { border-color: var(--encre); background: color-mix(in srgb, var(--encre) 6%, var(--carte)); }
.r-phrase:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.r-phrase input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--action); flex: none; }
.r-phrase b { display: block; color: var(--encre); }
.a-aide { color: var(--doux); font-size: 15px; }
.r-duree { font-weight: 700; color: var(--encre); background: var(--carte2); border-radius: 10px; padding: 10px 12px; }
.r-choisies { font-size: 14px; color: var(--encre); background: var(--carte2); border-radius: 8px; padding: 8px 10px; }
.r-dom { border: 1.5px solid var(--trait); border-radius: 10px; background: var(--carte); }
.r-dom > summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; font-weight: 700; color: var(--encre); list-style: none; }
.r-dom > summary::-webkit-details-marker { display: none; }
.r-dom > summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--doux); }
.r-dom[open] > summary::after { content: "−"; }
.r-dom-nom { flex: 1; }
.r-dom-n { font-size: 13px; font-weight: 600; color: var(--doux); white-space: nowrap; }
.r-dom-n.pris { color: var(--action); }
.r-dom-l { display: flex; flex-direction: column; gap: 6px; padding: 0 10px 10px; }
/* le chrono à zéro : un bandeau jaune dans l'en-tête, le bouton Suivant mis en avant */
.r-fini { display: none; }
body.temps-fini .r-fini { display: block; flex: 1 1 100%; background: var(--jaune); color: #1A2632; font-weight: 800; border-radius: 8px; padding: 6px 10px; }
body.temps-fini .r-suivant:not(:disabled) { box-shadow: 0 0 0 4px var(--jaune); animation: appel 1.2s ease-in-out infinite; }
@keyframes appel { 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--jaune) 40%, transparent); } }
@media (prefers-reduced-motion: reduce) { body.temps-fini .r-suivant { animation: none; } }