/* cartes mémoire : fenêtre plein écran, carte aérée, notes avec les têtes de Grignon */
body.cm-open{overflow:hidden}
.cm{position:fixed;inset:0;z-index:78;background:var(--paper);overflow-y:auto;overscroll-behavior:contain;padding:calc(12px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom))}
.cm-in{max-width:560px;margin:0 auto}
.cm-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.cm-top b{font-family:var(--display);font-size:1.2rem;color:var(--ink)}
.cm-x{width:42px;height:42px;border-radius:50%;border:2px solid var(--line);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer;flex:none}
.cm-barre{height:8px;border-radius:8px;background:var(--line);overflow:hidden}.cm-barre i{display:block;height:100%;background:var(--ogre);border-radius:8px;transition:width .3s}
.cm-n{margin:6px 0 16px;text-align:right;font-size:.8rem;font-weight:800;color:var(--soft)}
.cm-carte{position:relative;background:var(--card);border:2px solid var(--line);border-radius:24px;padding:28px 20px 24px;min-height:190px;display:flex;flex-direction:column;justify-content:center;text-align:center;box-shadow:0 6px 0 var(--line);margin-bottom:18px;animation:cmIn .25s ease}
.cm-carte.ret{animation:cmFlip .35s ease}
.cm-mat{position:absolute;top:12px;left:16px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.cm-recto{font-family:var(--display);font-size:1.3rem;font-weight:800;line-height:1.35;margin:8px 0 0;color:var(--ink)}
.cm-carte.ret .cm-recto{font-size:1rem;color:var(--soft)}
.cm-verso{margin-top:14px;padding-top:14px;border-top:2px dashed var(--line);font-size:1.12rem;font-weight:700;line-height:1.45;color:var(--ink)}
.cm-sous{margin:8px 0 0;color:var(--soft);font-size:.92rem}
.cm-aide{color:var(--soft);text-align:center;margin:0 4px 16px;line-height:1.45}
.cm-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cm-notes button{display:flex;flex-direction:column;align-items:center;gap:6px;border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:18px;padding:12px 6px;font:inherit;font-weight:800;cursor:pointer;box-shadow:0 3px 0 var(--line)}
.cm-notes button:active{transform:translateY(2px);box-shadow:none}
.cm-notes .f svg,.cm-f svg{width:48px;height:48px}
.cm-notes button[data-n="0"]{border-color:color-mix(in srgb,var(--t-crit,#C8413B) 45%,var(--line))}
.cm-notes button[data-n="2"]{border-color:color-mix(in srgb,var(--ogre) 60%,var(--line))}
.cm .btn{display:block;width:100%;margin:0 0 10px}
.cm-moi{display:block;font-weight:700;color:var(--ink);margin-bottom:14px;line-height:1.4}
.cm textarea{display:block;width:100%;box-sizing:border-box;margin-top:8px;border:2px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);font:inherit;padding:12px 14px;resize:vertical}
.cm textarea:focus{outline:none;border-color:var(--ogre)}
.cm-passer{display:block;margin:4px auto 0}
.cm-compare{display:grid;gap:10px;margin-bottom:14px}
.cm-v{border-radius:16px;padding:12px 14px;border:2px solid var(--line);background:var(--card)}
.cm-v small{display:block;font-size:.75rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--soft);margin-bottom:4px}
.cm-v p{margin:0;line-height:1.45;color:var(--ink)}
.cm-v.moi{border-color:color-mix(in srgb,var(--ogre) 55%,var(--line))}
.cm-acts{display:flex;gap:10px}.cm-acts.col{flex-direction:column;align-items:stretch}.cm-acts .btn{margin:0}
.cm-acts .linkbtn2{align-self:center;margin-top:4px}
.cm-vide{text-align:center;padding:20px 4px}.cm-vide h3{font-family:var(--display);font-size:1.35rem;margin:10px 0 8px;color:var(--ink)}.cm-vide p{color:var(--soft);line-height:1.5;margin:0 0 18px}
.cm-f svg{width:96px;height:96px}
.cm-petit{font-size:.88rem;color:var(--soft);margin:-8px 0 16px}
.cm-perso h3{font-family:var(--display);margin:0 0 6px;color:var(--ink)}.cm-perso label{display:block;font-weight:700;margin-bottom:14px;color:var(--ink)}
@keyframes cmIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes cmFlip{0%{transform:rotateY(90deg)}100%{transform:none}}
@media (prefers-reduced-motion: reduce){.cm-carte,.cm-carte.ret{animation:none}}
/* rappels sur l'accueil */
#hCartes{display:grid;gap:10px;margin:14px 0 4px}#hCartes:empty{display:none}
.h-rev{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:2px solid color-mix(in srgb,var(--ogre) 40%,var(--line));background:color-mix(in srgb,var(--ogre) 8%,var(--card));color:var(--ink);border-radius:18px;padding:12px 14px;font:inherit;cursor:pointer}
.h-rev.ctl{border-color:color-mix(in srgb,var(--t-crit,#C8413B) 35%,var(--line));background:color-mix(in srgb,var(--t-crit,#C8413B) 6%,var(--card))}
.h-rev .i{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--card);font-size:1.2rem}
.h-rev .tx{flex:1;min-width:0}.h-rev b{display:block;line-height:1.3}.h-rev small{display:block;color:var(--soft);margin-top:2px}
.h-rev .go{flex:none;font-weight:800;color:var(--ogre-d);font-size:.9rem}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .h-rev .go{color:var(--ogre)}}
/* encadré devoir + Moi */
.d-cartes h3{display:flex;align-items:center;gap:8px}.d-cartes:empty{display:none}
.d-cartes-acts{display:flex;gap:10px;margin-top:12px}.d-cartes-acts .btn{flex:1;margin:0}
.moi-cartes{display:block}.moi-cartes .d-cartes-acts{margin-top:14px}
.g-chip-cartes{border-color:var(--ogre);background:color-mix(in srgb,var(--ogre) 12%,var(--card));font-weight:800}
.d-cartes-acts .btn{display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;padding-left:10px;padding-right:10px}

/* découverte et révision : rapide et ludique */
.cm-notes.deux{grid-template-columns:1fr 1fr}
.cm-notes.deux button{padding:16px 8px;font-size:1.05rem}
.cm-notes.deux .f svg{width:58px;height:58px}
.cm-serie{height:26px;margin:-6px 0 8px;text-align:center;font-weight:800;color:var(--ogre-d);animation:cmPop .35s ease}
.cm-serie.vide{animation:none}
.cm-aide .gi-mic{vertical-align:-2px;color:var(--ogre-d)}
.cm-detail{font-weight:800;color:var(--ink)!important;margin-bottom:6px!important}
@keyframes cmPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.15)}100%{transform:none;opacity:1}}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .cm-serie,:root:not([data-theme="light"]) .cm-aide .gi-mic{color:var(--ogre)}}
/* onglet Réviser */
.rv-intro{color:var(--soft);margin:-4px 0 18px;line-height:1.45}
.rv-sec{background:var(--card);border:2px solid var(--line);border-radius:22px;padding:16px;margin-bottom:16px}
.rv-sec h3{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-family:var(--display);font-size:1.12rem;color:var(--ink)}
.rv-sous{color:var(--soft);margin:0 0 12px;line-height:1.45;font-size:.93rem}
.rv-paquet{margin-top:14px;display:grid;gap:14px}.rv-paquet:empty{display:none}
.rv-mh{display:flex;align-items:baseline;justify-content:space-between;margin:0 2px 6px}.rv-mh b{color:var(--ink)}.rv-mh small{color:var(--soft);font-weight:700}
.rv-ch{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:2px solid var(--line);background:var(--paper);color:var(--ink);border-radius:16px;padding:10px 12px;margin-bottom:8px;font:inherit;cursor:pointer}
.rv-ch .tx{flex:1;min-width:0}.rv-ch b{display:block;line-height:1.3}.rv-ch small{display:block;color:var(--soft);font-size:.82rem;margin:2px 0 6px}
.rv-bar{display:block;height:6px;border-radius:6px;background:var(--line);overflow:hidden}.rv-bar i{display:block;height:100%;background:var(--ogre);border-radius:6px}
.rv-due{flex:none;min-width:26px;height:26px;padding:0 7px;border-radius:13px;background:var(--t-crit,#C8413B);color:#fff;font-weight:800;font-size:.8rem;display:grid;place-items:center}
.rv-ch .go,.rv-l .go{flex:none;opacity:.5}
.rv-liste{display:grid;gap:8px}
.rv-l{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:2px solid var(--line);background:var(--paper);color:var(--ink);border-radius:16px;padding:11px 12px;font:inherit;cursor:pointer}
.rv-l .tx{flex:1;min-width:0}.rv-l b{display:block;line-height:1.3;font-size:.95rem}.rv-l small{display:block;color:var(--soft);font-size:.82rem;margin-top:2px}
.rv-li{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--ogre) 14%,var(--card));color:var(--ogre-d);font-size:1.1rem}
.rv-vide{color:var(--soft);margin:0;font-size:.92rem}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .rv-li{color:var(--ogre)}}
/* expression écrite */
.ec-consigne{display:block;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:14px}
.ec-consigne small{display:block;font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--soft);margin-bottom:4px}
.ec-consigne p{margin:0;line-height:1.45;color:var(--ink)}
.ec-consigne input{width:100%;box-sizing:border-box;border:0;background:none;font:inherit;color:var(--ink);padding:2px 0}.ec-consigne input:focus{outline:none}
.ec-zone{position:relative;border:2px solid var(--line);border-radius:18px;background:var(--card);min-height:220px}
.ec-zone:focus-within{border-color:var(--ogre)}
.ec-miroir,.ec-zone textarea{box-sizing:border-box;width:100%;min-height:220px;margin:0;padding:14px 16px;font:inherit;font-size:1.05rem;line-height:1.7;letter-spacing:normal;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal}
.ec-miroir{position:absolute;inset:0;color:transparent;overflow:hidden;pointer-events:none}
.ec-zone textarea{position:relative;display:block;resize:vertical;border:0;background:transparent;color:var(--ink);height:260px}
.ec-zone textarea:focus{outline:none}
.ec-miroir mark{color:transparent;border-radius:4px;padding:0;box-shadow:inset 0 -3px 0 currentColor}
.ec-miroir mark.m-o{background:rgba(232,69,124,.22);color:transparent;border-bottom:3px solid #E8457C}
.ec-miroir mark.m-a,.ec-miroir mark.m-c{background:rgba(255,138,61,.24);border-bottom:3px solid #E07020}
.ec-miroir mark.m-p{background:rgba(60,157,224,.22);border-bottom:3px solid #2471AE}
.ec-miroir mark.m-v{background:rgba(111,61,184,.18);border-bottom:3px solid #6F3DB8}
.ec-miroir mark{box-shadow:none}
.ec-etat{display:flex;justify-content:space-between;align-items:center;min-height:24px;margin:6px 4px 12px;font-size:.85rem;color:var(--soft);font-weight:700}
.ec-dots{display:inline-flex;gap:3px;vertical-align:middle}.ec-dots i{width:6px;height:6px;border-radius:50%;background:var(--ogre);animation:ecDot 1s infinite}.ec-dots i:nth-child(2){animation-delay:.15s}.ec-dots i:nth-child(3){animation-delay:.3s}
@keyframes ecDot{0%,100%{opacity:.3;transform:none}50%{opacity:1;transform:translateY(-3px)}}
.ec-grignon{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px}.ec-grignon .f svg{width:52px;height:52px}
.ec-dit{flex:1;background:var(--card);border:2px solid var(--line);border-radius:4px 18px 18px 18px;padding:10px 14px}
.ec-dit p{margin:0 0 6px;line-height:1.45;color:var(--ink)}.ec-dit p:last-child{margin:0}.ec-dit .rel{color:var(--soft)}
.ec-bilan{margin-top:10px;padding-top:10px;border-top:2px dashed var(--line)}.ec-bilan ul{margin:4px 0 8px;padding-left:20px}.ec-bilan li{margin-bottom:4px;line-height:1.4}
.ec-rem{display:grid;gap:8px;margin-bottom:16px}.ec-rem:empty{display:none}
.ec-r{border-radius:14px;padding:10px 12px;background:var(--card);border:2px solid var(--line);border-left-width:6px}
.ec-r.m-o{border-left-color:#E8457C}.ec-r.m-a,.ec-r.m-c{border-left-color:#E07020}.ec-r.m-p{border-left-color:#2471AE}.ec-r.m-v{border-left-color:#6F3DB8}
.ec-r .ty{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--soft);margin-right:8px}
.ec-r b{color:var(--ink)}.ec-r p{margin:4px 0 0;line-height:1.4;color:var(--ink)}
@media (prefers-reduced-motion: reduce){.ec-dots i{animation:none}}
/* erreurs → cartes */
.exo-cartes{display:block;width:100%;margin:14px 0 4px}
.rv-sec .d-cartes-acts{flex-wrap:wrap}.rv-sec .d-cartes-acts .btn{min-width:0;flex:1 1 130px;font-size:.95rem}
.rv-sec .d-cartes-acts .btn{padding:12px 8px;font-size:.92rem;white-space:nowrap}

.cm-perso select,.cm-perso input{display:block;width:100%;box-sizing:border-box;margin-top:8px;border:2px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);font:inherit;padding:11px 12px}
.cm-perso select.manque{border-color:var(--t-crit,#C8413B)}
.cm-arch{display:block;margin:14px auto 0;color:var(--soft)}
.rv-arch{display:block;margin:6px auto 0;color:var(--soft)}
.cm-arch-liste{display:grid;gap:10px}
.cm-arch-c{display:flex;gap:12px;align-items:center;background:var(--card);border:2px solid var(--line);border-radius:16px;padding:12px}
.cm-arch-c .tx{flex:1;min-width:0}.cm-arch-c small{display:block;color:var(--soft);font-weight:700;font-size:.78rem}.cm-arch-c b{display:block;margin:2px 0;color:var(--ink)}.cm-arch-c p{margin:0;color:var(--soft);font-size:.92rem}
.cm-arch-c .btn{width:auto;margin:0;flex:none;padding:9px 14px}

/* onglet Réviser : navigation matières → chapitres → cartes */
.rv-back{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--soft);font:inherit;font-weight:800;padding:6px 0;margin-bottom:6px;cursor:pointer}
.rv-titre{margin-top:0}
.rv-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.rv-tuile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:118px;text-align:left;border:2px solid color-mix(in srgb,var(--c) 45%,var(--line));background:color-mix(in srgb,var(--c) 12%,var(--card));color:var(--ink);border-radius:22px;padding:14px;font:inherit;cursor:pointer;box-shadow:0 4px 0 color-mix(in srgb,var(--c) 30%,var(--line))}
.rv-tuile:active{transform:translateY(2px);box-shadow:none}
.rv-tuile .e{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--card);font-size:1.4rem}
.rv-tuile b{font-family:var(--display);font-size:1.05rem;line-height:1.2}
.rv-tuile small{color:var(--soft);font-weight:700;font-size:.82rem}
.rv-tuile .rv-due{position:absolute;top:10px;right:10px}
.rv-big{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:0;background:var(--ogre);color:#fff;border-radius:22px;padding:16px;margin-bottom:18px;font:inherit;cursor:pointer;box-shadow:0 5px 0 var(--ogre-d)}
.rv-big .i{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.2);font-size:1.4rem;flex:none}
.rv-big b{display:block;font-family:var(--display);font-size:1.12rem;line-height:1.25}.rv-big small{display:block;opacity:.92;margin-top:2px}
.rv-big:active{transform:translateY(3px);box-shadow:none}
.rv-mhead{display:flex;align-items:center;gap:12px;margin:0 0 16px}.rv-mhead .e{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 18%,var(--card));font-size:1.6rem}
.rv-mhead h2{margin:0;font-family:var(--display);font-size:1.5rem;color:var(--ink)}
.rv-h3{font-family:var(--display);font-size:1.02rem;color:var(--soft);margin:18px 2px 10px}
.rv-ajout{justify-content:center;border-style:dashed}.rv-ajout b{display:flex!important;align-items:center;gap:6px;justify-content:center;color:var(--ogre-d)}
.rv-gros{margin-bottom:6px}.rv-deux{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px}
.rv-moyen{display:flex;flex-direction:column;align-items:center;gap:6px;border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:18px;padding:14px 8px;font:inherit;cursor:pointer;box-shadow:0 3px 0 var(--line)}
.rv-moyen i{font-size:1.4rem;color:var(--ogre-d)}.rv-moyen b{font-size:.9rem;text-align:center;line-height:1.2}
.rv-cartes{display:grid;gap:10px}
.rv-carte{display:block;width:100%;text-align:left;border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:18px;padding:14px 16px;font:inherit;cursor:pointer;position:relative}
.rv-carte.due{border-color:color-mix(in srgb,var(--t-crit,#C8413B) 45%,var(--line))}
.rv-carte .r{display:block;font-weight:800;line-height:1.35;padding-right:40px}
.rv-carte .v{display:none;margin-top:8px;padding-top:8px;border-top:2px dashed var(--line);line-height:1.4}
.rv-carte.vue .v{display:block}
.rv-carte .b{position:absolute;top:14px;right:14px;display:flex;gap:2px}.rv-carte .b i{width:5px;height:12px;border-radius:2px;background:var(--ogre)}
.rv-astuce{color:var(--soft);font-size:.85rem;text-align:center;margin:10px 0 0}
.rv-arc{margin-top:18px}.rv-arc summary{cursor:pointer;color:var(--soft);font-weight:800;padding:8px 2px}.rv-arc .cm-arch-c{margin-top:8px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .rv-moyen i,:root:not([data-theme="light"]) .rv-ajout b{color:var(--ogre)}}

.cm-qcm{display:grid;gap:10px;margin-bottom:16px}
.cm-qcm button{text-align:left;border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:16px;padding:13px 14px;font:inherit;font-weight:700;cursor:pointer;box-shadow:0 3px 0 var(--line)}
.cm-qcm button.bon{border-color:var(--ok);background:var(--ok-bg)}.cm-qcm button.faux{border-color:var(--ko);background:var(--ko-bg)}
.cm-qcm button:disabled{cursor:default}
/* rappels de l'accueil sur mobile : le texte prend toute la largeur, l'action passe dessous (plus de 3 colonnes serrées) */
.h-rev{display:grid;grid-template-columns:40px 1fr;grid-template-areas:"i tx" ". go";column-gap:12px;row-gap:8px;align-items:start}
.h-rev .i{grid-area:i}.h-rev .tx{grid-area:tx}
.h-rev .go{grid-area:go;justify-self:start;background:var(--ogre);color:#fff;border-radius:999px;padding:6px 14px;font-size:.88rem}
.h-rev.ctl .go{background:color-mix(in srgb,var(--t-crit,#C8413B) 85%,#000)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .h-rev .go{color:#fff}}
/* icônes sur fond coloré (plus de pastilles blanches) */
.h-rev .i{background:color-mix(in srgb,var(--ogre) 30%,var(--card));color:color-mix(in srgb,var(--ogre) 70%,#000)}
.h-rev.ctl .i{background:color-mix(in srgb,var(--t-crit,#C8413B) 25%,var(--card));color:color-mix(in srgb,var(--t-crit,#C8413B) 80%,#000)}
.rv-tuile .e{background:color-mix(in srgb,var(--c) 32%,var(--card));color:color-mix(in srgb,var(--c) 70%,#000)}
.rv-mhead .e{background:color-mix(in srgb,var(--c) 32%,var(--card));color:color-mix(in srgb,var(--c) 70%,#000)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .h-rev .i,:root:not([data-theme="light"]) .rv-tuile .e,:root:not([data-theme="light"]) .rv-mhead .e{color:#fff}}
.h-rev{border:2px solid color-mix(in srgb,var(--ogre) 40%,var(--line));border-radius:22px;box-shadow:0 4px 0 color-mix(in srgb,var(--ogre) 28%,var(--line));transition:transform .08s,box-shadow .08s}
.h-rev.ctl{border-color:color-mix(in srgb,var(--t-crit,#C8413B) 38%,var(--line));box-shadow:0 4px 0 color-mix(in srgb,var(--t-crit,#C8413B) 25%,var(--line))}
.h-rev:active{transform:translateY(3px);box-shadow:none}
#hCartes{gap:14px}

/* bouton écouter sur les cartes en langue */
.cm-son{display:inline-grid;place-items:center;width:36px;height:36px;margin-left:8px;vertical-align:middle;border:0;border-radius:50%;background:color-mix(in srgb,var(--ogre) 22%,var(--card));color:var(--ogre-d);font-size:1.05rem;cursor:pointer}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .cm-son{color:#fff}}

/* matière : deux grosses actions vertes en haut */
.rv-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 16px}
.rv-act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:96px;text-align:center;border:0;border-radius:22px;background:var(--ogre);color:#fff;font:inherit;padding:12px 8px;cursor:pointer;box-shadow:0 5px 0 var(--ogre-d)}
.rv-act i{font-size:1.5rem}.rv-act b{font-family:var(--display);font-size:1rem;line-height:1.2}.rv-act small{opacity:.9;font-size:.78rem}
.rv-act:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ogre-d)}
.rv-act.photo{background:#2F8A4A;box-shadow:0 5px 0 #1E6633}
.rv-act.busy{opacity:.6;pointer-events:none}
.rv-prep{display:flex;gap:10px;align-items:center;background:color-mix(in srgb,var(--ogre) 10%,var(--card));border:2px dashed color-mix(in srgb,var(--ogre) 40%,var(--line));border-radius:16px;padding:12px 14px;margin:0 0 14px;font-weight:700;line-height:1.35}
.rv-prep.manque{background:var(--ko-bg);border-color:color-mix(in srgb,var(--ko) 40%,var(--line))}

/* deux grandes actions, une par ligne, deux couleurs */
.rv-actions{grid-template-columns:1fr}
.rv-act{flex-direction:row;justify-content:flex-start;text-align:left;gap:14px;min-height:0;padding:14px 16px}
.rv-act .i{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.2);font-size:1.4rem}
.rv-act .tx{display:flex;flex-direction:column;gap:2px;min-width:0}.rv-act b{font-size:1.05rem}.rv-act small{font-size:.82rem}
.rv-act.photo{background:#2F8A4A;box-shadow:0 5px 0 #1E6633}
.rv-act.cree{background:#2471AE;box-shadow:0 5px 0 #18557F}

/* ---------- défi entre amis ---------- */
.df-hero{text-align:center;margin:4px 0 18px}.df-hero .f svg{width:90px;height:90px}.df-hero h3{font-family:var(--display);font-size:1.4rem;margin:6px 0 4px;color:var(--ink)}.df-hero p{color:var(--soft);margin:0;line-height:1.45}
.df-gros{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:0;border-radius:22px;padding:16px;color:#fff;font:inherit;cursor:pointer;margin-bottom:18px}
.df-gros.lancer{background:linear-gradient(135deg,#7B3FD1,#C2389E);box-shadow:0 5px 0 #5A2A9E}.df-gros .i{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.2);font-size:1.5rem;flex:none}
.df-gros b{display:block;font-family:var(--display);font-size:1.15rem}.df-gros small{opacity:.9}
.df-rej{background:var(--card);border:2px solid var(--line);border-radius:20px;padding:14px;box-shadow:0 4px 0 var(--line)}.df-rej b{display:block;margin-bottom:10px;color:var(--ink)}
.df-code-in{display:flex;gap:10px}.df-code-in input{flex:1;min-width:0;font:inherit;font-family:var(--display);font-size:1.6rem;letter-spacing:.3em;text-align:center;border:2px solid var(--line);border-radius:14px;padding:8px;background:var(--paper);color:var(--ink)}
.df-code-in .btn{margin:0;width:auto;padding:0 20px}.df-err{color:var(--ko);font-weight:700;margin:8px 0 0;min-height:1em}
.df-h{font-family:var(--display);font-size:1.15rem;margin:6px 0 10px;color:var(--ink)}.df-h.c,.df-sous.c,.df-aide.c{text-align:center}.df-sous{color:var(--soft);font-weight:800;margin:14px 2px 8px}
.df-pin{text-align:center;background:linear-gradient(135deg,#7B3FD1,#C2389E);color:#fff;border-radius:22px;padding:16px;margin:4px 0 12px;box-shadow:0 5px 0 #5A2A9E}.df-pin small{display:block;opacity:.9;font-weight:700}.df-pin b{display:block;font-family:var(--display);font-size:2.6rem;letter-spacing:.12em}
.df-part{display:flex!important;align-items:center;justify-content:center;gap:8px;margin-bottom:16px!important}
.df-salon{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}.df-j{display:flex;align-items:center;gap:8px;background:var(--card);border:2px solid var(--line);border-radius:999px;padding:4px 12px 4px 4px;font-weight:700;animation:cmIn .3s ease}
.df-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,#7B3FD1 25%,var(--card));color:#5A2A9E;font-weight:800;flex:none;overflow:hidden}.df-av.moi{background:var(--ogre);color:#fff}.df-av svg{width:34px;height:34px}.df-av.bot{background:color-mix(in srgb,var(--ogre) 25%,var(--card))}
.df-bot{display:block;margin:0 auto 12px}.df-go{background:#7B3FD1!important;box-shadow:0 5px 0 #5A2A9E!important}.df-aide{color:var(--soft);line-height:1.45;margin:8px 0}
.df-haut{display:flex;justify-content:space-between;font-weight:800;color:var(--soft);font-size:.88rem;margin-bottom:8px}
.df-chrono{position:relative;height:30px;border-radius:999px;background:var(--line);overflow:hidden;margin-bottom:14px}.df-chrono i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#7B3FD1,#C2389E);border-radius:999px;transition:width 1s linear}
.df-chrono b{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-family:var(--display);font-size:1.05rem;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.df-q{font-family:var(--display);font-size:1.25rem;font-weight:800;line-height:1.35;text-align:center;background:var(--card);border:2px solid var(--line);border-radius:20px;padding:18px 14px;margin-bottom:14px;color:var(--ink)}.df-q.petit{font-size:1rem;padding:12px}
.df-choix{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.df-c{display:flex;align-items:center;gap:10px;min-height:76px;border:0;border-radius:18px;padding:10px 12px;color:#fff;font:inherit;font-weight:800;text-align:left;line-height:1.25;cursor:pointer;position:relative}
.df-c .sh svg{width:24px;height:24px;fill:rgba(255,255,255,.9);flex:none}.df-c>i{position:absolute;top:8px;right:8px}
.df-c.c0{background:#E0384C;box-shadow:0 4px 0 #A8263A}.df-c.c1{background:#2471AE;box-shadow:0 4px 0 #18557F}.df-c.c2{background:#D99A00;box-shadow:0 4px 0 #A87600}.df-c.c3{background:#2F8A4A;box-shadow:0 4px 0 #1E6633}
.df-c:active{transform:translateY(3px);box-shadow:none}.df-c.eteint{opacity:.35}.df-c.pris{outline:4px solid var(--ink);outline-offset:2px}.df-c.bon{outline:4px solid #fff;box-shadow:0 0 0 4px var(--ogre)}.df-c.faux{opacity:.6;text-decoration:line-through}
.df-res{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;border-radius:20px;padding:12px;margin-bottom:12px}.df-res.ok{background:var(--ok-bg)}.df-res.ko{background:var(--ko-bg)}.df-res .f svg{width:60px;height:60px}.df-res b{font-family:var(--display);font-size:1.25rem;color:var(--ink)}.df-res small{font-weight:800;color:var(--ogre-d)}
.df-expl{color:var(--soft);line-height:1.4;margin:12px 4px}
.df-classement{display:grid;gap:6px;margin-top:14px}.df-l{display:flex;align-items:center;gap:10px;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:6px 12px}.df-l.moi{border-color:var(--ogre);background:color-mix(in srgb,var(--ogre) 10%,var(--card))}
.df-l .r{font-family:var(--display);font-weight:800;width:20px;color:var(--soft)}.df-l .n{flex:1;font-weight:700}.df-l .plus{color:var(--ogre-d);font-weight:800;font-size:.85rem}.df-l b{font-family:var(--display)}
.df-podium{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin:10px 0 18px}.df-pod{display:flex;flex-direction:column;align-items:center;gap:4px;width:30%;text-align:center}.df-pod .df-av{width:56px;height:56px}.df-pod .df-av svg{width:56px;height:56px}
.df-pod b{font-size:.95rem}.df-pod small{color:var(--soft);font-weight:800}.df-pod .socle{width:100%;border-radius:14px 14px 4px 4px;color:#fff;font-family:var(--display);font-size:1.6rem;display:grid;place-items:center}
.df-pod.p1 .socle{height:110px;background:#E8A300}.df-pod.p2 .socle{height:80px;background:#9AA5B1}.df-pod.p3 .socle{height:60px;background:#C27C4A}.df-pod.moi b{color:var(--ogre-d)}
/* tuile « défi » dans Réviser */
.rv-defi{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:0;border-radius:22px;padding:16px;margin:0 0 16px;color:#fff;font:inherit;cursor:pointer;background:linear-gradient(135deg,#7B3FD1,#C2389E);box-shadow:0 5px 0 #5A2A9E}
.rv-defi .i{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.2);font-size:1.5rem;flex:none}.rv-defi b{display:block;font-family:var(--display);font-size:1.15rem}.rv-defi small{opacity:.92}
.rv-defi:active{transform:translateY(3px);box-shadow:0 2px 0 #5A2A9E}
@media (prefers-reduced-motion: reduce){.df-chrono i{transition:none}}
.rv-moyen.defi{background:linear-gradient(135deg,#7B3FD1,#C2389E);color:#fff;border:0;box-shadow:0 3px 0 #5A2A9E}.rv-moyen.defi i{color:#fff}

.df-gen{background:color-mix(in srgb,#7B3FD1 7%,var(--card));border:2px solid color-mix(in srgb,#7B3FD1 30%,var(--line));border-radius:20px;padding:14px;margin-bottom:14px;box-shadow:0 4px 0 color-mix(in srgb,#7B3FD1 20%,var(--line))}
.df-gen b{display:flex;gap:6px;align-items:center;margin-bottom:10px;color:var(--ink)}
.df-gen input,.df-gen select{display:block;width:100%;box-sizing:border-box;margin-bottom:10px;border:2px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);font:inherit;padding:11px 12px}
.df-gen .btn{margin:0}.df-attente{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:8px}.df-attente .f svg{width:64px;height:64px}.df-attente p{margin:0;font-weight:700}

/* défi : décompte, chrono qui s'affole, podium qui monte, coupe qui brille */
.df-son{width:42px;height:42px;border-radius:50%;border:2px solid var(--line);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer;margin-left:auto;margin-right:8px}
.df-decompte{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center}.df-decompte p{font-weight:800;color:var(--soft);margin:0 0 10px}
.df-decompte b{font-family:var(--display);font-size:7rem;line-height:1;color:#7B3FD1}.df-decompte small{color:var(--soft);font-weight:700;margin-top:12px}
.pulse{animation:dfPulse .9s ease}@keyframes dfPulse{0%{transform:scale(2.2);opacity:0}40%{transform:scale(1);opacity:1}100%{transform:scale(.9)}}
.df-chrono.urgent i{background:linear-gradient(90deg,#E0384C,#FF7A00)}.df-chrono.urgent{animation:dfTremble .5s ease infinite}
@keyframes dfTremble{0%,100%{transform:none}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
.df-pts{color:#7B3FD1}
.df-pod .socle{transform-origin:bottom;animation:dfMonte .6s cubic-bezier(.2,1.3,.4,1) backwards}.df-pod.p3 .socle{animation-delay:.3s}.df-pod.p2 .socle{animation-delay:.8s}.df-pod.p1 .socle{animation-delay:1.4s}
.df-pod>.df-av,.df-pod>b,.df-pod>small{animation:cmIn .4s ease backwards}.df-pod.p3>*{animation-delay:.6s}.df-pod.p2>*{animation-delay:1.1s}.df-pod.p1>*{animation-delay:1.8s}
@keyframes dfMonte{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.df-coupe{width:58px;height:58px;filter:drop-shadow(0 0 10px rgba(245,184,0,.7));animation:dfCoupe 1.2s ease 2s backwards,dfBrille 2s ease-in-out 3.2s infinite}
@keyframes dfCoupe{0%{transform:translateY(-40px) scale(.3) rotate(-30deg);opacity:0}70%{transform:translateY(4px) scale(1.15) rotate(6deg);opacity:1}100%{transform:none}}
@keyframes dfBrille{50%{filter:drop-shadow(0 0 18px rgba(245,184,0,1));transform:scale(1.06)}}
@media (prefers-reduced-motion: reduce){.pulse,.df-chrono.urgent,.df-pod .socle,.df-pod>*,.df-coupe{animation:none}}

/* choix du défi : couleurs Grignon + lettres ; le choix se soulève (plus de bordure noire) */
.df-c{border:3px solid transparent;transition:transform .12s,box-shadow .12s,opacity .2s}
.df-c .sh{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.25);font-family:var(--display);font-size:1rem}
.df-c.c0{background:#3E9B4F;box-shadow:0 5px 0 #2A7038}.df-c.c1{background:#7B3FD1;box-shadow:0 5px 0 #5A2A9E}.df-c.c2{background:#E8892B;box-shadow:0 5px 0 #B5661A}.df-c.c3{background:#1F8E9E;box-shadow:0 5px 0 #146873}
.df-c.pris{outline:none;transform:translateY(-5px);border-color:rgba(255,255,255,.55)}
.df-c.c0.pris{box-shadow:0 10px 0 #2A7038}.df-c.c1.pris{box-shadow:0 10px 0 #5A2A9E}.df-c.c2.pris{box-shadow:0 10px 0 #B5661A}.df-c.c3.pris{box-shadow:0 10px 0 #146873}
.df-c.bon{outline:none;border-color:#fff;transform:translateY(-3px)}
/* choix : tout est calme au départ, mon choix s'allume (opacité pleine + soulevé), les autres s'effacent */
.df-c{opacity:.88}.df-c:not(:disabled):hover{opacity:1}.df-c.pris{opacity:1}.df-c.eteint{opacity:.3}
/* correction : chaque option garde sa couleur ; seule la bordure parle (verte = bonne réponse, rouge = mon erreur + Grignon qui pleure) */
.df-choix{gap:16px 14px}.df-c{border-width:4px}
.df-c.bon{opacity:1;transform:translateY(-3px);border-color:#4ADE6A;animation:dfBon 1.2s ease-in-out 2}
.df-c.c0.bon,.df-c.c1.bon,.df-c.c2.bon,.df-c.c3.bon{box-shadow:0 5px 0 rgba(0,0,0,.25),0 0 14px rgba(74,222,106,.7)}
.df-c.faux{opacity:1;border-color:#FF3B4E;text-decoration:none;animation:dfTremble .4s ease 1}
.df-c.c0.faux,.df-c.c1.faux,.df-c.c2.faux,.df-c.c3.faux{box-shadow:0 5px 0 rgba(0,0,0,.25),0 0 14px rgba(255,59,78,.6)}
.df-c .df-mk{position:absolute;top:-12px;right:-8px;width:30px;height:30px;border-radius:50%;background:#4ADE6A;color:#fff;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.2);font-size:1rem}
.df-c .df-mk.pleure{width:40px;height:40px;top:-16px;padding:2px;background:#FF3B4E}.df-c .df-mk.pleure svg{width:36px;height:36px}
@keyframes dfBon{50%{transform:translateY(-6px)}}
/* mini podium entre deux questions */
.df-mini{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin:18px 0 10px}
.df-mp{position:relative;width:31%;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;animation:cmIn .35s ease backwards}
.df-mp.p1{animation-delay:.25s}.df-mp.p3{animation-delay:.1s}
.df-mp .df-av{width:44px;height:44px}.df-mp.p1 .df-av{width:52px;height:52px}.df-mp .df-av svg{width:100%;height:100%}
.df-mp>b{font-size:.88rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.df-mp.moi>b{color:var(--ogre-d)}
.df-mp .plus{color:var(--ogre-d);font-weight:800;font-size:.8rem;animation:dfPlus .6s ease .4s backwards}
.df-mp .socle{width:100%;border-radius:12px 12px 4px 4px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;transform-origin:bottom;animation:dfMonte .5s cubic-bezier(.2,1.3,.4,1) backwards}
.df-mp .socle span{font-family:var(--display);font-size:1.3rem;line-height:1}.df-mp .socle small{font-weight:800;font-size:.75rem;opacity:.95}
.df-mp.p1 .socle{height:74px;background:#E8A300;box-shadow:0 4px 0 #B57F00}.df-mp.p2 .socle{height:56px;background:#9AA5B1;box-shadow:0 4px 0 #77818C}.df-mp.p3 .socle{height:44px;background:#C27C4A;box-shadow:0 4px 0 #965B33}
.df-mp.moi .socle{outline:3px solid var(--ogre);outline-offset:2px}
.df-mp.monte .df-av{animation:dfSaute .5s ease .3s 2}
.df-couronne .df-coupe{width:30px;height:30px;animation:dfBrille 2s ease-in-out infinite}
.df-mv{display:inline-flex;align-items:center;gap:1px;font-weight:800;font-size:.75rem;border-radius:999px;padding:1px 6px}
.df-mp .df-mv{position:absolute;top:0;right:0}
.df-mv.up{background:color-mix(in srgb,var(--ogre) 18%,var(--card));color:var(--ogre-d)}.df-mv.down{background:color-mix(in srgb,#D7263D 14%,var(--card));color:#C21F35}
.df-mini+.df-l{margin-top:8px}
@keyframes dfSaute{50%{transform:translateY(-8px)}}@keyframes dfPlus{from{opacity:0;transform:translateY(6px)}}
/* revanche : chacun choisit */
.df-rv{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:24px 8px}.df-rv .f svg{width:90px;height:90px}.df-rv h3{margin:0;font-family:var(--display)}.df-rv p{margin:0;color:var(--soft)}
.df-rv .btn{width:100%;margin-top:8px}.df-rv small{color:var(--soft);font-weight:700}
.df-rv-t{text-align:center;font-family:var(--display);color:#7B3FD1;font-weight:800;margin:0 0 4px}
.df-j.hesite{opacity:.55}.df-j .df-ok{color:var(--ogre-d)}.df-j .ec-dots{transform:scale(.7)}
/* fin : de l'air autour de « Revanche » */
.df-podium~.cm-acts,.df-classement+.cm-acts{margin:22px 4px 8px;gap:14px}
.df-podium~.cm-acts .btn{padding-top:14px;padding-bottom:14px}
@media (prefers-reduced-motion: reduce){.df-c.bon,.df-c.faux,.df-mp,.df-mp .socle,.df-mp.monte .df-av,.df-couronne .df-coupe,.df-mp .plus{animation:none}}
/* mon avatar Grignon */
.av-ed{display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 2px 8px}
.av-big{width:132px;height:132px;border-radius:50%;background:color-mix(in srgb,var(--ogre) 10%,var(--card));display:grid;place-items:center;margin-bottom:8px;animation:cmIn .3s ease}.av-big svg{width:112px;height:112px}
.av-l{align-self:flex-start;font-weight:800;color:var(--soft);margin:10px 0 2px;font-size:.9rem}
.av-cols{display:grid;grid-template-columns:repeat(5,40px);gap:12px;justify-content:center;width:100%}
.av-hcols{grid-template-columns:repeat(4,40px)}
.av-col{width:40px;height:40px;border-radius:50%;background:var(--p);border:3px solid var(--card);box-shadow:0 0 0 2px var(--line);cursor:pointer;transition:transform .12s}
.av-col.on{box-shadow:0 0 0 3px var(--ogre);transform:scale(1.12)}
.av-accs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%}
.av-acc{aspect-ratio:1;border-radius:16px;background:var(--card);border:2px solid var(--line);box-shadow:0 3px 0 var(--line);display:grid;place-items:center;cursor:pointer;padding:6px}.av-acc svg{width:100%;height:100%}
.av-acc.on{border-color:var(--ogre);box-shadow:0 3px 0 var(--ogre-d);background:color-mix(in srgb,var(--ogre) 10%,var(--card))}
.av-hasard{margin-top:10px}.av-ok{width:100%;margin-top:14px}
.av-intro{padding-bottom:0}.av-intro h3{margin-bottom:2px}
.df-av svg{width:100%;height:100%}
.moi-av{position:relative;flex:none;width:72px;height:72px;border:0;padding:0;background:none;cursor:pointer}.moi-av>svg{width:72px;height:72px}
.moi-av .ed{position:absolute;right:-2px;bottom:-2px;width:26px;height:26px;border-radius:50%;background:var(--ogre);color:#fff;display:grid;place-items:center;border:2px solid var(--card);font-size:.8rem}
/* réactions rapides */
.df-reacs{display:none;gap:8px;overflow-x:auto;scrollbar-width:none;padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-top:2px solid var(--line);background:var(--paper)}
.df-reacs::-webkit-scrollbar{display:none}.df-reacs.on{display:flex}
.df-reacs button{flex:none;display:inline-flex;align-items:center;gap:6px;border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:5px 12px 5px 5px;font:inherit;font-weight:800;font-size:.85rem;box-shadow:0 3px 0 var(--line);cursor:pointer}
.df-reacs button:active{transform:translateY(2px);box-shadow:none}.df-reacs button:disabled{opacity:.5}
.df-reacs .rf{width:26px;height:26px}.df-reacs .rf svg{width:26px;height:26px}
.df-bulles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.df-bulle{position:absolute;bottom:70px;display:flex;align-items:center;gap:6px;background:var(--card);border:2px solid var(--line);border-radius:999px;padding:4px 12px 4px 4px;box-shadow:0 6px 16px rgba(0,0,0,.15);animation:dfBulle 3.2s ease-out forwards;max-width:70%}
.df-bulle.moi{border-color:var(--ogre)}.df-bulle .df-av{width:32px;height:32px;flex:none}
.df-bulle small{display:block;font-size:.7rem;color:var(--soft);font-weight:800;line-height:1}.df-bulle b{font-size:.95rem;white-space:nowrap}
@keyframes dfBulle{0%{opacity:0;transform:translateY(20px) scale(.6)}12%{opacity:1;transform:translateY(0) scale(1.08)}20%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-240px)}}
@media (prefers-reduced-motion: reduce){.df-bulle{animation:none}}
.df-reacs{position:fixed;left:0;right:0;bottom:0;z-index:80;justify-content:flex-start}
@media (min-width:600px){.df-reacs.on{justify-content:center}}
.df-bulles{position:fixed;z-index:81}
.cm.df-avec-reacs{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.av-cols{flex-wrap:nowrap;gap:8px}.av-col{width:34px;height:34px;flex:none}
.av-accs{grid-template-columns:repeat(5,1fr);gap:8px}.av-acc{border-radius:14px;padding:4px}
/* barre de réactions : bien visible (fond coloré), grosses pastilles */
.df-reacs{flex-direction:column;gap:6px;background:linear-gradient(135deg,#7B3FD1,#C2389E);border-top:0;border-radius:22px 22px 0 0;padding:10px 0 calc(12px + env(safe-area-inset-bottom));box-shadow:0 -8px 24px rgba(123,63,209,.35);animation:dfReacIn .35s cubic-bezier(.2,1.3,.4,1)}
.df-reacs.on{display:flex}
.df-reacs-t{color:#fff;font-family:var(--display);font-weight:800;font-size:.95rem;padding:0 16px}
.df-reacs-l{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 16px 4px;scroll-snap-type:x proximity}.df-reacs-l::-webkit-scrollbar{display:none}
.df-reacs button{background:#fff;color:#2B2A3A;border:0;box-shadow:0 4px 0 rgba(0,0,0,.18);padding:6px 14px 6px 6px;font-size:.92rem;scroll-snap-align:start;transition:transform .12s}
.df-reacs button:active{transform:translateY(3px) scale(.96);box-shadow:0 1px 0 rgba(0,0,0,.18)}
.df-reacs .rf,.df-reacs .rf svg{width:30px;height:30px}
@media (min-width:600px){.df-reacs-l{justify-content:center}}
.cm.df-avec-reacs{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
.df-bulle{bottom:120px;padding:5px 14px 5px 5px;border:3px solid #fff;background:linear-gradient(135deg,#FFF6D6,#fff);box-shadow:0 10px 24px rgba(0,0,0,.2)}
.df-bulle .df-av{width:38px;height:38px}.df-bulle b{font-size:1.05rem}
.df-bulle.moi{border-color:var(--ogre)}
@keyframes dfReacIn{from{transform:translateY(100%)}}
@keyframes dfBulle{0%{opacity:0;transform:translateY(30px) scale(.4) rotate(-6deg)}10%{opacity:1;transform:translateY(-6px) scale(1.15) rotate(3deg)}18%{transform:translateY(0) scale(1) rotate(0)}75%{opacity:1}100%{opacity:0;transform:translateY(-280px) scale(.9)}}
/* défi : choix du quiz, tuiles à la Duolingo */
.df-ts{display:grid;gap:12px;margin-bottom:6px}
.df-t{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--card);border:2px solid var(--line);border-radius:18px;padding:14px;box-shadow:0 4px 0 var(--line);font:inherit;color:var(--ink);cursor:pointer;transition:transform .1s}
.df-t:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.df-t .i{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.3rem;color:#fff}
.df-t.pret .i{background:#7B3FD1;box-shadow:0 3px 0 #5A2A9E}.df-t.ia .i{background:#E8892B;box-shadow:0 3px 0 #B5661A}
.df-t .tx{flex:1;min-width:0}.df-t b{display:block;font-weight:800;line-height:1.25}.df-t small{display:block;color:var(--soft);font-weight:700;margin-top:3px}
.df-t .go{color:var(--soft)}
.df-photo{margin-bottom:14px}
.df .rv-grille{margin-top:14px}
.df-t b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.df-reacs{border-radius:0;left:0;right:0;bottom:0;margin:0;width:100%}
/* réactions : bouton flottant qui se déplie (remplace la barre) */
.df-reacs{display:none!important}
.df-fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:82;display:none;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
.df-fab.on{display:flex}
.df-fab-b{pointer-events:auto;position:relative;width:64px;height:64px;border-radius:50%;border:4px solid #fff;background:linear-gradient(135deg,#7B3FD1,#C2389E);box-shadow:0 8px 22px rgba(123,63,209,.45),0 3px 0 #5A2A9E;display:grid;place-items:center;cursor:pointer;padding:0;animation:dfFabIn .45s cubic-bezier(.2,1.4,.4,1)}
.df-fab-b .o{width:44px;height:44px;transition:transform .25s,opacity .2s}.df-fab-b .o svg{width:44px;height:44px}
.df-fab-b .x{position:absolute;color:#fff;font-size:1.3rem;opacity:0;transform:rotate(-90deg) scale(.4);transition:transform .25s,opacity .2s}
.df-fab.ouvert .df-fab-b .o{transform:rotate(90deg) scale(.3);opacity:0}.df-fab.ouvert .df-fab-b .x{opacity:1;transform:none}
.df-fab-b::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:3px solid #C2389E;opacity:0;animation:dfFabPing 2.4s ease-out 1s 3}
.df-fab-b.tape{animation:dfFabTape .35s ease}
.df-fab-menu{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.df-fab-menu button{pointer-events:none;display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;background:#fff;color:#2B2A3A;padding:6px 16px 6px 6px;font:inherit;font-weight:800;font-size:.98rem;box-shadow:0 6px 18px rgba(43,42,58,.18),0 3px 0 rgba(43,42,58,.12);cursor:pointer;
  opacity:0;transform:translateY(24px) scale(.6);transform-origin:right center;transition:transform .28s cubic-bezier(.2,1.4,.4,1),opacity .18s;transition-delay:0ms}
.df-fab-menu .rf,.df-fab-menu .rf svg{width:34px;height:34px}
.df-fab.ouvert .df-fab-menu button{pointer-events:auto;opacity:1;transform:none;transition-delay:var(--d)}
.df-fab-menu button:active{transform:scale(.94)!important}
.df::before{content:"";position:fixed;inset:0;background:rgba(43,42,58,.0);pointer-events:none;transition:background .25s;z-index:81}
.df:has(.df-fab.ouvert)::before{background:rgba(43,42,58,.28)}
.cm.df-avec-reacs{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.df-bulle{bottom:100px}
@keyframes dfFabIn{from{transform:scale(0) rotate(-30deg)}}
@keyframes dfFabPing{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
@keyframes dfFabTape{50%{transform:scale(1.15) rotate(8deg)}}
@media (prefers-reduced-motion: reduce){.df-fab-b,.df-fab-b::after,.df-fab-menu button{animation:none;transition:none}}
/* invités */
.df-invt{margin:10px 0 4px}.df-invt .i{background:#1F8E9E;box-shadow:0 3px 0 #146873}
.df-j{position:relative}.df-j.inv .df-av{outline:2px dashed #1F8E9E;outline-offset:1px}
.df-inv{display:inline-block;margin-left:6px;font-size:.68rem;font-weight:800;color:#fff;background:#1F8E9E;border-radius:999px;padding:1px 7px;vertical-align:middle}
.df-retire{width:24px;height:24px;border-radius:50%;border:0;background:var(--line);color:var(--soft);display:grid;place-items:center;font-size:.7rem;cursor:pointer;margin-left:2px;flex:none}
.df-pseudo{display:flex;flex-direction:column;gap:6px;margin:6px 0 0}.df-pseudo b{font-weight:800;color:var(--soft);font-size:.9rem}
.df-pseudo input{font:inherit;font-family:var(--display);font-size:1.25rem;text-align:center;border:2px solid var(--line);border-radius:16px;padding:12px;background:var(--card);color:var(--ink);box-shadow:0 3px 0 var(--line)}
.df-pseudo input:focus{outline:none;border-color:#7B3FD1}
.df-bulle{max-width:230px}.df-invt{margin-bottom:16px}
/* code du défi : on le touche pour le copier */
.df-pin{display:block;width:100%;border:0;font:inherit;cursor:pointer;transition:transform .12s}.df-pin:active{transform:translateY(3px);box-shadow:0 2px 0 #5A2A9E}
.df-pin .cp{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:.8rem;font-weight:800;background:rgba(255,255,255,.2);border-radius:999px;padding:3px 10px}.df-pin .cp em{font-style:normal}
.df-pin.copie .cp{background:#fff;color:#7B3FD1}
.df-invt.copie .i{background:var(--ogre);box-shadow:0 3px 0 var(--ogre-d)}
/* file de réactions : empilées à gauche, au-dessus du bas de l'écran, sans chevauchement */
.df-bulle{left:16px!important;bottom:calc(104px + env(safe-area-inset-bottom));max-width:calc(100% - 110px);animation:dfBulleIn .4s cubic-bezier(.2,1.4,.4,1);transition:transform .35s cubic-bezier(.2,1,.4,1),opacity .3s}
.df-bulle.sort{opacity:0!important;transform:translateX(-30px) scale(.8)!important}
@keyframes dfBulleIn{from{opacity:0;transform:translateY(40px) scale(.5)}}
/* temps par question (choisi par l'hôte) */
.df-temps{margin:14px 0 6px}.df-temps>b{display:flex;align-items:center;gap:6px;font-weight:800;color:var(--soft);font-size:.9rem;margin-bottom:8px}
.df-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.df-seg button{border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:16px;padding:10px 4px;box-shadow:0 3px 0 var(--line);font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;transition:transform .1s}
.df-seg button b{font-family:var(--display);font-size:1.15rem}.df-seg button small{font-weight:800;color:var(--soft);font-size:.78rem}
.df-seg button.on{border-color:#7B3FD1;background:color-mix(in srgb,#7B3FD1 12%,var(--card));box-shadow:0 3px 0 #5A2A9E}.df-seg button.on small{color:#7B3FD1}
.df-seg button:active{transform:translateY(2px);box-shadow:none}
.rv-deux{grid-template-columns:1fr 1fr;gap:12px}.rv-deux>.rv-moyen:last-child:nth-child(odd){grid-column:1/-1;flex-direction:row;justify-content:center}
@keyframes dfBulleIn{from{opacity:0;scale:.4}60%{scale:1.08}}.df-bulle{transform-origin:left center}
/* pile de réactions : une colonne en bas à gauche, chaque bulle prend sa place (aucun chevauchement), les autres glissent vers le haut */
.df-bulles{inset:auto auto calc(104px + env(safe-area-inset-bottom)) 16px;display:flex;flex-direction:column;align-items:flex-start;gap:0;max-width:calc(100% - 110px)}
.df-bulle,.df-bulle.moi{position:relative;left:auto!important;bottom:auto;max-width:100%;transform:none!important;margin-top:8px;max-height:64px;overflow:hidden;
  animation:dfPileIn .4s cubic-bezier(.2,1.2,.4,1);transition:max-height .3s ease,margin-top .3s ease,opacity .3s,padding .3s}
.df-bulle.vieille{opacity:.7}
.df-bulle.sort{opacity:0!important;max-height:0;margin-top:0;padding-top:0;padding-bottom:0;border-width:0}
@keyframes dfPileIn{from{max-height:0;margin-top:0;opacity:0}60%{opacity:1}}
/* code privé (cadenas) + message « copié » */
.df-pin small{display:inline-flex;align-items:center;gap:6px;justify-content:center}.df-pin small i{font-size:.9rem}
.df-pin.tape{animation:dfFabTape .35s ease}
.df-toast{position:fixed;left:50%;top:calc(16px + env(safe-area-inset-top));transform:translateX(-50%);z-index:300;display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100vw - 32px);
  background:var(--ogre);color:#fff;border-radius:18px;padding:10px 16px 10px 10px;box-shadow:0 10px 26px rgba(0,0,0,.25),0 4px 0 var(--ogre-d);animation:dfToastIn .4s cubic-bezier(.2,1.4,.4,1);transition:opacity .4s,transform .4s}
.df-toast .ic{width:32px;height:32px;border-radius:50%;background:#fff;color:var(--ogre-d);display:grid;place-items:center;flex:none}
.df-toast b{font-weight:800;line-height:1.3}
.df-toast.out{opacity:0;transform:translate(-50%,-20px)}
@keyframes dfToastIn{from{opacity:0;transform:translate(-50%,-30px) scale(.8)}}
/* salon : les joueurs en grille régulière (3 par ligne), avatar au-dessus, prénom dessous */
.df-salon{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}
@media (min-width:480px){.df-salon{grid-template-columns:repeat(4,minmax(0,1fr))}}
.df-j{flex-direction:column;justify-content:flex-start;gap:4px;border-radius:18px;padding:10px 6px 8px;text-align:center;box-shadow:0 3px 0 var(--line);min-width:0}
.df-j .df-av{width:46px;height:46px}.df-j .df-av svg{width:46px;height:46px}
.df-j .nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.86rem;line-height:1.2;font-weight:800;word-break:break-word;max-width:100%}
.df-j .toi{font-size:.7rem;font-weight:800;color:#fff;background:var(--ogre);border-radius:999px;padding:1px 8px;line-height:1.4}
.df-j.moi{border-color:var(--ogre);box-shadow:0 3px 0 var(--ogre-d)}
.df-j .df-retire{position:absolute;top:4px;right:4px;margin:0;width:22px;height:22px}
.df-j .df-ok{position:absolute;top:6px;left:8px}.df-j .ec-dots{position:absolute;top:6px;left:2px}
.df-temps{margin-bottom:10px}.df .df-go#dfStart{margin-top:22px}.df .df-bot{display:block;margin:16px auto 0}
/* pastille « cartes à revoir aujourd'hui » : une info, pas une alerte → vert Grignon, pas de rouge */
.rv-due{background:var(--ogre);color:#fff;box-shadow:0 2px 0 var(--ogre-d);display:inline-flex;align-items:center;gap:3px;padding:0 8px 0 6px}
.rv-due i{font-size:.75rem}
/* interstitiel « Tu maîtrises ! Défie tes amis » */
.df-prop{position:fixed;inset:0;z-index:400;display:flex;align-items:flex-end;justify-content:center;background:rgba(43,42,58,0);transition:background .3s;padding:0 0 env(safe-area-inset-bottom)}
.df-prop.on{background:rgba(43,42,58,.55)}
.df-prop-in{position:relative;width:min(100%,480px);background:linear-gradient(160deg,#7B3FD1 0%,#9C3CC0 55%,#C2389E 100%);color:#fff;border-radius:28px 28px 0 0;padding:26px 22px calc(22px + env(safe-area-inset-bottom));text-align:center;
  box-shadow:0 -12px 40px rgba(123,63,209,.45);transform:translateY(100%);transition:transform .45s cubic-bezier(.2,1.2,.4,1);overflow:hidden}
.df-prop.on .df-prop-in{transform:none}
.df-prop-in::before{content:"";position:absolute;inset:-40% -20% auto;height:220px;background:radial-gradient(circle,rgba(255,255,255,.28),transparent 65%);pointer-events:none}
.df-prop-h{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;margin:6px 0 12px}
.df-prop-h .f{width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;border:3px solid rgba(255,255,255,.6);animation:dfSaute .6s ease .5s 2}
.df-prop-h .f svg{width:62px;height:62px}.df-prop-h .f.g{animation-delay:.8s}
.df-prop-h .vs{font-family:var(--display);font-weight:800;font-size:1.4rem;background:#F5B800;color:#5A2A00;border-radius:12px;padding:2px 10px;transform:rotate(-8deg);box-shadow:0 3px 0 #C98F00}
.df-prop-h .cp{position:absolute;top:-30px;left:50%;transform:translateX(-50%)}.df-prop-h .cp .df-coupe{width:38px;height:38px;animation:dfBrille 2s ease-in-out infinite}
.df-prop-k{display:inline-block;background:rgba(255,255,255,.2);border-radius:999px;padding:3px 12px;font-weight:800;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase}
.df-prop-in h3{font-family:var(--display);font-size:1.6rem;margin:8px 0 6px}.df-prop-in p{margin:0 auto 18px;max-width:340px;line-height:1.4;opacity:.95}
.df-prop-go{width:100%;background:#fff!important;color:#7B3FD1!important;box-shadow:0 5px 0 rgba(0,0,0,.2)!important;font-size:1.1rem;animation:dfPulseBtn 1.6s ease-in-out 1s infinite}
.df-prop-non{display:block;margin:14px auto 0;color:#fff!important;opacity:.85}
@keyframes dfPulseBtn{50%{transform:scale(1.03)}}
@media (prefers-reduced-motion: reduce){.df-prop-in,.df-prop-h .f,.df-prop-go{animation:none;transition:none}}
/* cartes mémoire en couleur : chaque carte prend la couleur de sa matière (fond teinté, bordure, ombre, étiquette) */
.cm-carte[style*="--c"]{background:linear-gradient(165deg,color-mix(in srgb,var(--c) 22%,var(--card)) 0%,color-mix(in srgb,var(--c) 8%,var(--card)) 70%);border:3px solid color-mix(in srgb,var(--c) 70%,var(--card));box-shadow:0 7px 0 color-mix(in srgb,var(--c) 75%,#000 25%);overflow:hidden}
.cm-carte[style*="--c"]::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:color-mix(in srgb,var(--c) 18%,transparent);pointer-events:none}
.cm-carte[style*="--c"] .cm-mat{display:inline-flex;align-items:center;gap:6px;top:12px;left:12px;background:var(--c);color:#fff;border-radius:999px;padding:4px 10px 4px 4px;letter-spacing:.03em;box-shadow:0 2px 0 color-mix(in srgb,var(--c) 70%,#000 30%)}
.cm-mat .cm-mi{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.25);display:grid;place-items:center;font-size:.75rem}
.cm-mat .cm-mi i{font-size:.75rem}
.cm-carte[style*="--c"] .cm-recto{margin-top:22px;position:relative;z-index:1}
.cm-carte[style*="--c"] .cm-verso{position:relative;z-index:1;border-top:2px dashed color-mix(in srgb,var(--c) 60%,var(--card));background:color-mix(in srgb,var(--card) 70%,transparent);margin:16px -8px 0;padding:14px 12px 4px;border-radius:0 0 14px 14px}
/* les 3 réponses honnêtes, en couleur */
.cm-notes button[data-n="0"]{background:color-mix(in srgb,#E8665A 14%,var(--card));border-color:#E8665A;box-shadow:0 3px 0 #B8473D}
.cm-notes button[data-n="1"]{background:color-mix(in srgb,#E8A300 14%,var(--card));border-color:#E8A300;box-shadow:0 3px 0 #B57F00}
.cm-notes button[data-n="2"]{background:color-mix(in srgb,var(--ogre) 16%,var(--card));border-color:var(--ogre);box-shadow:0 3px 0 var(--ogre-d)}
/* mise en forme du texte (partout) */
/* surligneur : une bande moins haute que la ligne (14 %→88 %), donc les lignes surlignées ne se touchent jamais, même collées */
mark{--hl:#FFE27A;background:linear-gradient(transparent 14%,var(--hl) 14%,var(--hl) 88%,transparent 88%);color:inherit;border-radius:4px;padding:0 .2em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
u{text-decoration-color:var(--ogre);text-decoration-thickness:2px;text-underline-offset:3px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) mark{--hl:#7A6514;color:#FFF6D6}}
:root[data-theme="dark"] mark{--hl:#7A6514;color:#FFF6D6}
.cm-carte[style*="--c"]{justify-content:flex-start;padding-top:16px}
.cm-carte[style*="--c"] .cm-mat{position:static;align-self:flex-start;font-size:.72rem;line-height:1;padding:5px 10px 5px 5px;margin-bottom:4px;z-index:1}
.cm-mat .cm-mi{width:20px;height:20px;overflow:hidden;flex:none}.cm-mat .cm-mi>*{width:14px!important;height:14px!important;font-size:.8rem!important;background:none!important;box-shadow:none!important;padding:0!important;color:#fff!important}
.cm-carte[style*="--c"] .cm-recto{margin-top:14px}
.cm-carte[style*="--c"].ret .cm-recto{margin-top:10px;color:color-mix(in srgb,var(--c) 55%,var(--ink))}
.cm-mat .cm-mi>i{background-color:#fff!important;width:13px!important;height:13px!important}
.cm-carte[style*="--c"] .cm-mat{background:color-mix(in srgb,var(--c) 68%,#000 32%);box-shadow:0 2px 0 color-mix(in srgb,var(--c) 50%,#000 50%)}
/* forces et points faibles dans Réviser */
.rv-st{display:inline-block;vertical-align:middle;margin-left:6px;font-size:.68rem;font-weight:800;letter-spacing:.02em;border-radius:999px;padding:2px 8px;white-space:nowrap}
.rv-st.st-f{background:color-mix(in srgb,#E8665A 16%,var(--card));color:#B8473D;border:1.5px solid #E8665A}
.rv-st.st-c{background:color-mix(in srgb,#E8A300 16%,var(--card));color:#8A5A00;border:1.5px solid #E8A300}
.rv-st.st-m{background:color-mix(in srgb,var(--ogre) 16%,var(--card));color:var(--ogre-d);border:1.5px solid var(--ogre)}
.rv-tuile .rv-st{margin:6px 0 0;align-self:flex-start}
.rv-prio{margin:4px 0 18px}.rv-prio .rv-h3{display:flex;align-items:center;gap:6px}
.rv-p{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;color:var(--ink);cursor:pointer;margin:0 0 10px;padding:12px;border-radius:18px;
  background:color-mix(in srgb,#E8665A 7%,var(--card));border:2px solid color-mix(in srgb,#E8665A 40%,var(--line));box-shadow:0 3px 0 color-mix(in srgb,#E8665A 30%,var(--line))}
.rv-p:active{transform:translateY(2px);box-shadow:none}.rv-p .tx{flex:1;min-width:0}.rv-p b{display:block;line-height:1.25}.rv-p small{display:block;color:var(--soft);font-weight:700;margin-top:2px}
.rv-p .go{flex:none;background:#E8665A;color:#fff;font-weight:800;font-size:.85rem;border-radius:999px;padding:7px 12px;box-shadow:0 3px 0 #B8473D}
.rv-bar.f{display:block;height:6px;border-radius:6px;background:var(--line);margin-top:6px;overflow:hidden}.rv-bar.f i{display:block;height:100%;background:#E8665A;border-radius:6px}
.rv-comble{display:flex;gap:8px;align-items:center;background:color-mix(in srgb,var(--ogre) 14%,var(--card));border:2px solid var(--ogre);border-radius:14px;padding:10px 12px;margin:0 0 10px;font-weight:700}
.rv-comble i{color:var(--ogre-d)}
.rv-bilan{display:flex;flex-direction:column;gap:6px;margin:-4px 0 16px;font-size:.88rem;font-weight:700;color:var(--soft)}.rv-bilan span{display:flex;gap:6px;align-items:baseline}
.rv-bilan .ok{color:var(--ogre-d)}.rv-bilan .ko{color:#B8473D}
.rv-mhead .rv-st{margin-left:auto}
.rv-p .h-ico{flex:none;width:38px!important;height:38px!important;min-width:0!important;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 18%,var(--card));color:var(--c);font-size:1.1rem;margin:0!important}
.rv-p .tx b{font-size:.98rem}.rv-p small{font-size:.8rem}
.rv-p .go{background:none!important;box-shadow:none!important;padding:0!important;color:#B8473D;font-size:1.1rem}
.rv-p i.go{background:currentColor!important;flex:none}
/* plan du jour */
.rv-p.plan{background:color-mix(in srgb,var(--c) 7%,var(--card));border-color:color-mix(in srgb,var(--c) 40%,var(--line));box-shadow:0 3px 0 color-mix(in srgb,var(--c) 30%,var(--line))}
.rv-p.plan .h-ico{background:color-mix(in srgb,var(--c) 18%,var(--card));color:var(--c)}
.rv-p.plan small{color:var(--soft);line-height:1.35}
.rv-p .mn{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;font-size:.72rem;font-weight:800;color:var(--c);margin-bottom:2px}
.rv-p .mn i{width:.95em;height:.95em}
.rv-p.plan i.go{color:var(--c)}
.rv-st.st-r{background:color-mix(in srgb,#E8892B 16%,var(--card));color:#9A5410;border:1.5px solid #E8892B}


/* === Tuiles de réponse (défis, groupes, mode classe) — une seule définition des 4 couleurs, IDENTIQUES en clair et en sombre
   (le tableau du prof et le téléphone d'un élève peuvent être dans des thèmes différents) ; lettre/symbole blancs, contraste ≥ 4,5:1.
   A vert + feuille, B violet + étoile, C orange + lune, D bleu-vert + vagues. Le symbole est AU-DESSUS du texte, texte à l'horizontale.
   .damier (2 × 2) seulement quand toutes les réponses sont courtes ; sinon .lignes : une réponse par ligne, pleine largeur. */
:root{--rep-a:#2F8540;--rep-a-d:#1F5E2C;--rep-b:#7B3FD1;--rep-b-d:#5A2A9E;--rep-c:#B85A0D;--rep-c-d:#8A430A;--rep-d:#16788A;--rep-d-d:#0F5866}
.df-c.c0{background:var(--rep-a);box-shadow:0 5px 0 var(--rep-a-d)}.df-c.c1{background:var(--rep-b);box-shadow:0 5px 0 var(--rep-b-d)}
.df-c.c2{background:var(--rep-c);box-shadow:0 5px 0 var(--rep-c-d)}.df-c.c3{background:var(--rep-d);box-shadow:0 5px 0 var(--rep-d-d)}
.df-c.c0.pris{box-shadow:0 10px 0 var(--rep-a-d)}.df-c.c1.pris{box-shadow:0 10px 0 var(--rep-b-d)}.df-c.c2.pris{box-shadow:0 10px 0 var(--rep-c-d)}.df-c.c3.pris{box-shadow:0 10px 0 var(--rep-d-d)}
.df-c{flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;text-align:left;min-width:0}
.df-c>span:not(.sh):not(.df-mk){width:100%;min-width:0;word-break:normal;overflow-wrap:break-word;hyphens:manual}   /* jamais de mot coupé, sauf un mot plus long que la ligne */
.df-c .sh i{width:1.1em;height:1.1em;color:#fff}
.df-choix.lignes{grid-template-columns:1fr}
.df-choix.lignes .df-c{min-height:0;padding:10px 14px 12px}
.df-choix.damier .df-c{align-items:center;text-align:center}
.df-choix.damier .df-c>span:not(.sh):not(.df-mk){text-align:center}
/* bulles de réaction : fond crème dans les deux thèmes, donc texte foncé (lisible en sombre aussi) */
.df-bulle b{color:#2B2A3A}.df-bulle small{color:#5C5770}
/* zones de toucher ≥ 44 px (le dessin reste petit) */
.df-retire{width:44px;height:44px;background:radial-gradient(circle,var(--line) 0 12px,transparent 13px);margin:-10px -10px -10px -6px}
.df-j .df-retire{top:-8px;right:-8px;width:44px;height:44px;margin:0}
.rv-back{min-height:44px}
/* défi et séance de groupe : bouton rond des réactions flottant en bas à droite, menu vertical vers le haut (règles .df-fab plus haut) */
.df .df-bulles{inset:calc(70px + env(safe-area-inset-top)) 16px auto auto;align-items:flex-end;max-width:calc(100% - 32px)}
.df .df-bulle{left:auto!important;transform-origin:right center}
.df .df-bulle.sort{transform:translateX(30px) scale(.8)!important}
.cm.df.df-avec-reacs{padding-bottom:calc(100px + env(safe-area-inset-bottom))}   /* bouton 64 px + marges : la dernière tuile remonte toujours au-dessus */

/* réponses écartées (après avoir répondu, et à la correction) : teinte claire de leur couleur, texte foncé à plein contraste — pas d'opacité */
.df-c.c0{--c:var(--rep-a)}.df-c.c1{--c:var(--rep-b)}.df-c.c2{--c:var(--rep-c)}.df-c.c3{--c:var(--rep-d)}
/* opacité pleine pour les tuiles (contraste du texte blanc garanti) */
.df-c,.df-c:not(:disabled):hover{opacity:1}
.df-c.eteint{opacity:1;background:color-mix(in srgb,var(--c) 14%,var(--card));color:var(--ink);box-shadow:none;border-color:color-mix(in srgb,var(--c) 50%,var(--line))}
.df-c.eteint .sh{background:var(--c)}
.df-c.faux{opacity:1;background:color-mix(in srgb,var(--c) 14%,var(--card));color:var(--ink);box-shadow:none}
.df-c.faux .sh{background:var(--c)}
/* chrono (défis, mode classe) : les secondes dans une petite pastille sombre au centre de la barre — lisibles quand la barre s'est vidée
   (blanc sur le fond clair de la piste : 1,3:1 ; sur la pastille : ≥ 4,8:1 partout) */
.df-chrono b{inset:3px auto 3px 50%;transform:translateX(-50%);min-width:2.6em;padding:0 10px;border-radius:999px;background:rgba(30,20,50,.55);line-height:1;text-shadow:none}
/* correction du défi : la coche / Grignon qui pleure DANS la tuile, coin haut droit (ils dépassaient de la tuile et du bord de l'écran) */
.df-c .df-mk{top:8px;right:8px}
.df-c .df-mk.pleure{top:4px;right:4px}
/* barre du haut du défi : titre sur une ligne à 375 px même avec le bouton des réactions (plus de « Challenge your / friends ») */
.df .cm-top{gap:8px}
.df .cm-top>b{font-size:1.05rem;line-height:1.15}
.df .cm-top .df-son{margin-right:0}
/* mesure du damier (défi.js / classe.js) : pendant la mesure, aucun mot n'est coupé, pour voir s'il déborde d'une demi-tuile */
.df-choix.mesure .df-c span{overflow-wrap:normal!important;word-break:normal!important}
/* une réponse par ligne : symbole en haut à gauche, texte aligné à gauche ; damier : symbole en haut, texte centré */
.df-choix.lignes .df-c{align-items:flex-start;text-align:left}.df-choix.lignes .df-c>span:not(.sh):not(.df-mk),.df-choix.lignes .df-c .tx{text-align:left}
.df-choix.damier .df-c .tx{text-align:center}
/* mini podium du défi : prénom en entier (plus de « Cousine Grog… »), chiffres foncés sur l'or et l'argent (blanc : 2,2:1) */
.df-mp>b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:normal;line-height:1.15}
.df-mp.p1 .socle,.df-mp.p2 .socle,.df-pod.p1 .socle,.df-pod.p2 .socle{color:#2B2A3A}
/* « 16 pts » du défi en sombre : violet clair (le violet foncé tombait à 2,7:1 sur le fond sombre) */
:root[data-theme="dark"] .df-pts{color:#B18AF5}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .df-pts{color:#B18AF5}}
/* verts « +15 », « Série de 2… », « ↑ 1 » en sombre : vert clair lisible (le vert foncé tombait sous 4,5:1) */
:root[data-theme="dark"] .df-res small,:root[data-theme="dark"] .df-mp .plus,:root[data-theme="dark"] .df-mv.up,:root[data-theme="dark"] .df-mp.moi>b,:root[data-theme="dark"] .df-l .plus{color:#5FD08E}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .df-res small,:root:not([data-theme="light"]) .df-mp .plus,:root:not([data-theme="light"]) .df-mv.up,:root:not([data-theme="light"]) .df-mp.moi>b,:root:not([data-theme="light"]) .df-l .plus{color:#5FD08E}}
/* pendant la question : les bulles reçues passent au-dessus de la question, 2 au plus (jamais sur les tuiles ni le chrono) */
.df.df-en-q .df-bulles{top:calc(150px + env(safe-area-inset-top))}
.df.df-en-q .df-bulle:not(:nth-last-child(-n+2)){display:none}
/* jamais de texte coupé par « … » : titres des quiz du défi en entier ; prénoms des tuiles du salon sans couper un mot */
.df-t b{display:block;-webkit-line-clamp:none;overflow:visible}
.df-j .nm{word-break:normal;overflow-wrap:break-word}