/*
 * ============================================================================
 * Kliks · Lire et comprendre les consignes · présentation
 * ============================================================================
 *
 * Utilisée par la page élève (consignes.php) et, pour les scènes, par la page
 * de vérification de l'administration (admin/consignes.php).
 *
 * Toutes les classes commencent par « kc- » pour ne pas se mélanger avec le
 * reste de Kliks.
 *
 * Sommaire
 *   1. Couleurs et réglages communs
 *   2. Barre du haut
 *   3. Bouton d'écoute 🔊
 *   4. Écrans et textes
 *   5. Gros boutons de menu
 *   6. Profils et avatars
 *   7. Écran d'une activité
 *   8. Scène : la feuille et les objets
 *   9. Classer
 *  10. Compléter
 *  11. Outils
 *  12. Retour après validation (bravo, correction)
 *  13. Choisir, progrès
 *  14. Vue enseignant
 *  15. Messages et fenêtres
 *  16. Animations réduites, survol à la souris
 *
 * Repères pour les couleurs des marques :
 *   --stylo      marques de l'élève (bleu, comme un stylo)
 *   --correct    correction dessinée après une erreur (vert)
 *   --remplissage intérieur colorié par l'élève
 * La couleur ne sert jamais à désigner un objet dans une consigne.
 */

/* ============================================================================
 * 1. Couleurs et réglages communs
 * ========================================================================== */
:root {
  --nuit: #1a1410;
  --nuit-2: #241b15;
  --nuit-3: #33271e;
  --papier: #faf3e7;
  --feuille: #fffdf7;
  --encre: #1a1410;
  --orange: #ff8a3d;
  --orange-fonce: #d85c13;
  --menthe: #b5ebda;
  --jaune: #e7ff67;
  --stylo: #1f5fd6;          /* marques de l'élève */
  --correct: #0f7a3a;        /* correction après une erreur */
  --remplissage: #ffc46b;    /* intérieur colorié */
  --muted: #d8c8b8;
  --ligne: rgba(250, 243, 231, .075);
  --rayon: 20px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(var(--ligne) 1px, transparent 1px),
    linear-gradient(90deg, var(--ligne) 1px, transparent 1px),
    radial-gradient(circle at 12% 4%, rgba(181, 235, 218, .14), transparent 26rem),
    var(--nuit);
  background-size: 32px 32px, 32px 32px, auto, auto;
  color: var(--papier);
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 18px;
  line-height: 1.45;
}
button, input, select { font: inherit; }
button {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 4px solid var(--jaune);
  outline-offset: 3px;
}
[hidden] { display: none !important; }

.kc-app {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 10px 16px calc(28px + env(safe-area-inset-bottom));
}
.kc-noscript { padding: 24px; }

/* ============================================================================
 * 2. Barre du haut
 * ========================================================================== */
.kc-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(26, 20, 16, .94);
  backdrop-filter: blur(6px);
  margin: 0 -16px;
  padding: 6px 16px;
}
.kc-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 8px 16px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-radius: 16px;
  background: #fff8ec;
  color: #201710;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
  flex: none;
}
.kc-topbar-mid {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.kc-topbar-title {
  font-weight: 800;
  font-size: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kc-icon-btn {
  min-width: 50px;
  min-height: 50px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: var(--nuit-2);
  color: var(--papier);
  font-size: 22px;
}
.kc-noz {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 42px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 140, 66, .3);
  background: var(--nuit-2);
}
.kc-alert {
  margin: 8px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: #5b1f12;
  color: #ffe3d6;
  font-weight: 600;
}

/* ============================================================================
 * 3. Bouton d'écoute 🔊
 * ========================================================================== */
.kc-say {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 48px;
  min-height: 48px;
  padding: 0 10px;
  border-radius: 14px;
  border: 2px solid rgba(181, 235, 218, .55);
  background: rgba(181, 235, 218, .12);
  color: var(--papier);
  font-size: 20px;
  font-weight: 800;
}
.kc-say.kc-speaking {
  background: var(--menthe);
  color: var(--encre);
  border-color: var(--menthe);
}
.kc-say-big {
  min-width: 60px;
  min-height: 60px;
  font-size: 26px;
  border-radius: 18px;
}
.kc-say-text { font-size: 19px; }
.kc-help { border-color: rgba(255, 255, 255, .35); }
.kc-danger {
  border-color: #ff9a8a;
  color: #ffd5cc;
  background: rgba(255, 101, 132, .12);
}

/* ============================================================================
 * 4. Écrans et textes
 * ========================================================================== */
.kc-screen {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 8px;
}
.kc-title h1, h1.kc-title {
  font-size: clamp(28px, 7vw, 40px);
  line-height: 1.1;
  margin: 0;
  letter-spacing: -.02em;
}
.kc-subtitle h2 {
  margin: 10px 0 0;
  font-size: 22px;
}
.kc-lisible {
  display: flex;
  align-items: center;
  gap: 12px;
}
.kc-lisible > :first-child {
  flex: 1;
  min-width: 0;
  margin: 0;
}
.kc-panel {
  padding: 18px;
  border-radius: var(--rayon);
  background: var(--nuit-2);
  border: 1px solid rgba(255, 255, 255, .1);
}
.kc-panel h1 {
  font-size: 24px;
  margin: 0 0 12px;
}
.kc-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(181, 235, 218, .08);
  border: 1px solid rgba(181, 235, 218, .25);
  color: var(--muted);
  font-size: 16px;
}
.kc-note p {
  margin: 0;
  flex: 1;
}
.kc-small {
  margin: -6px 0 0;
  color: var(--muted);
  font-size: 16px;
}
.kc-center {
  text-align: center;
  justify-content: center;
}
.kc-hello {
  display: flex;
  align-items: center;
  gap: 14px;
}
.kc-hello .kc-lisible { flex: 1; }

/* ============================================================================
 * 5. Gros boutons de menu
 * ========================================================================== */
.kc-big {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.kc-big-main {
  flex: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon label" "icon detail";
  align-items: center;
  column-gap: 14px;
  min-height: 72px;
  padding: 14px 18px;
  text-align: left;
  border-radius: var(--rayon);
  border: 1px solid rgba(255, 255, 255, .14);
  background: var(--nuit-2);
  color: var(--papier);
}
.kc-big-icon, .kc-big-main > .kc-tool-icon, .kc-big-main > .kc-avatar { grid-area: icon; }
.kc-big-icon {
  font-size: 30px;
  width: 44px;
  text-align: center;
}
.kc-big-main > .kc-tool-icon {
  width: 44px;
  height: 44px;
}
.kc-big-label {
  grid-area: label;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}
.kc-big-detail {
  grid-area: detail;
  color: var(--muted);
  font-size: 16px;
}
.kc-big > .kc-say {
  min-height: auto;
  width: 60px;
  border-radius: var(--rayon);
}
.kc-big-primary .kc-big-main {
  background: var(--menthe);
  color: var(--encre);
  border-color: var(--menthe);
  min-height: 88px;
}
.kc-big-primary .kc-big-detail { color: #2c4a40; }
.kc-big-primary .kc-big-label { font-size: 24px; }
.kc-profiles {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kc-btn {
  min-height: 56px;
  padding: 12px 22px;
  border-radius: 16px;
  border: 2px solid transparent;
  font-size: 19px;
  font-weight: 800;
}
.kc-btn-primary {
  background: var(--orange);
  color: #1a1410;
}
.kc-btn-secondary {
  background: #fff8ec;
  color: #201710;
  border-color: rgba(255, 255, 255, .4);
}
.kc-btn-danger {
  background: transparent;
  color: #ffb4a6;
  border-color: #ff9a8a;
  align-self: flex-start;
}
.kc-link {
  align-self: center;
  background: none;
  border: 0;
  color: var(--muted);
  text-decoration: underline;
  min-height: 48px;
  font-size: 17px;
}

/* ============================================================================
 * 6. Profils et avatars
 * ========================================================================== */
.kc-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: contain;
  background: rgba(255, 255, 255, .08);
  display: inline-grid;
  place-items: center;
  flex: none;
}
.kc-avatar-letter {
  background: var(--orange);
  color: var(--encre);
  font-weight: 900;
  font-size: 24px;
}
.kc-avatar-lg {
  width: 72px;
  height: 72px;
}
.kc-avatars {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
}
.kc-avatar-choice {
  aspect-ratio: 1;
  border-radius: 18px;
  border: 3px solid transparent;
  background: var(--nuit-2);
  display: grid;
  place-items: center;
  padding: 6px;
}
.kc-avatar-choice .kc-avatar {
  width: 100%;
  height: 100%;
}
.kc-avatar-choice.kc-selected {
  border-color: var(--jaune);
  background: var(--nuit-3);
}
.kc-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 700;
}
.kc-field input, .kc-select {
  min-height: 54px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, .3);
  background: var(--feuille);
  color: var(--encre);
  font-size: 20px;
}

/* ============================================================================
 * 7. Écran d'une activité
 * ========================================================================== */
.kc-activity { gap: 12px; }
.kc-dots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.kc-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
}
.kc-dot-done { background: var(--menthe); }
.kc-dot-now {
  background: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 138, 61, .35);
}
.kc-consigne {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 16px 20px;
  border-radius: var(--rayon);
  background: var(--feuille);
  color: var(--encre);
  border-left: 8px solid var(--orange);
}
.kc-consigne-text {
  flex: 1;
  margin: 0;
  font-size: clamp(22px, 5.6vw, 28px);
  font-weight: 700;
  line-height: 1.25;
}
.kc-consigne-small {
  font-size: clamp(18px, 4.6vw, 21px);
  font-weight: 600;
}
.kc-consigne .kc-say {
  border-color: #1f7a64;
  background: #e6f7f1;
  color: var(--encre);
}
.kc-consigne .kc-say.kc-speaking {
  background: #1f7a64;
  color: #fff;
}
.kc-consigne-ecoute { justify-content: center; }
.kc-consigne-ecoute .kc-say-consigne {
  flex: 1;
  min-height: 72px;
  font-size: 24px;
}
.kc-consigne-outil { border-left-color: var(--menthe); }
.kc-outil-big {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: var(--papier);
  display: grid;
  place-items: center;
  border: 2px solid var(--encre);
}
.kc-outil-big .kc-tool-icon {
  width: 52px;
  height: 52px;
}
.kc-try-row { padding: 0 4px; }
.kc-try { font-weight: 700; }

/* ============================================================================
 * 8. Scène : la feuille et les objets
 * ========================================================================== */
.kc-scene-box { position: relative; }
.kc-scene {
  position: relative;
  padding: 14px;
  border-radius: var(--rayon);
  background: var(--feuille);
  color: var(--encre);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.kc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.kc-grid.kc-n4 { grid-template-columns: repeat(2, 1fr); }
.kc-grid.kc-n7, .kc-grid.kc-n8 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 480px) { .kc-grid.kc-n7, .kc-grid.kc-n8 { grid-template-columns: repeat(3, 1fr); } }
.kc-obj {
  position: relative;
  aspect-ratio: 1;
  min-height: 88px;
  padding: 6px;
  border: 2px solid transparent;
  border-radius: 16px;
  background: transparent;
}
.kc-obj.kc-pending {
  border-color: var(--stylo);
  background: rgba(31, 95, 214, .1);
}
.kc-obj-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}
.kc-shape {
  fill: #fff;
  stroke: var(--encre);
  stroke-width: 4.5;
  stroke-linejoin: round;
}
.kc-shape.kc-filled, .kc-num-bg.kc-filled { fill: var(--remplissage); }
.kc-num-bg {
  fill: #fff;
  stroke: rgba(26, 20, 16, .25);
  stroke-width: 2;
}
.kc-num {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 900;
  font-size: 42px;
  fill: var(--encre);
  text-anchor: middle;
}
.kc-checkbox {
  fill: #fff;
  stroke: rgba(26, 20, 16, .55);
  stroke-width: 2.5;
}
.kc-mark {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kc-mark-eleve {
  stroke: var(--stylo);
  stroke-width: 5;
}
.kc-mark-demo {
  stroke: var(--correct);
  stroke-width: 6;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: kc-draw .9s ease-out .2s forwards;
}
.kc-mark-coche { stroke-width: 5.5; }
.kc-with-demo .kc-mark-eleve { opacity: .3; }
.kc-with-demo .kc-filled { fill: #ffe4bb; }
.kc-shape.kc-filled-demo, .kc-num-bg.kc-filled-demo {
  animation: kc-fill .9s ease-out .2s forwards;
}
@keyframes kc-draw { to { stroke-dashoffset: 0; } }
@keyframes kc-fill { from { fill: #fff; } to { fill: #9be0b4; } }
.kc-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.kc-link { stroke-linecap: round; }
.kc-readonly .kc-obj { cursor: default; }
.kc-obj-attendu { background: rgba(15, 122, 58, .06); }

/* ============================================================================
 * 9. Classer
 * ========================================================================== */
.kc-reserve {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  min-height: 96px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(26, 20, 16, .05);
  border: 2px dashed rgba(26, 20, 16, .2);
  align-items: center;
}
.kc-reserve-vide {
  font-size: 28px;
  color: var(--correct);
  font-weight: 900;
}
.kc-boites {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.kc-boites-3 { grid-template-columns: repeat(3, 1fr); }
.kc-boite {
  min-height: 150px;
  border-radius: 16px;
  border: 3px solid var(--encre);
  background: #f4ecdf;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.kc-boite-tete {
  display: flex;
  justify-content: center;
  padding: 6px;
  border-bottom: 3px solid var(--encre);
  background: #fff;
  border-radius: 12px 12px 0 0;
}
.kc-boite-svg {
  width: 42px;
  height: 42px;
}
.kc-boite-svg .kc-shape {
  fill: #f4ecdf;
  stroke-dasharray: 7 5;
}
.kc-boite-contenu {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 6px;
}
.kc-piece {
  width: 72px;
  height: 72px;
  padding: 4px;
  border-radius: 14px;
  border: 3px solid transparent;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .15);
  touch-action: none;
}
.kc-boite .kc-piece {
  width: 58px;
  height: 58px;
}
.kc-piece-svg {
  width: 100%;
  height: 100%;
}
.kc-piece.kc-selected {
  border-color: var(--stylo);
  box-shadow: 0 0 0 4px rgba(31, 95, 214, .25);
}
.kc-piece.kc-dragging { opacity: .35; }
.kc-ghost {
  position: fixed;
  z-index: 90;
  width: 64px;
  height: 64px;
  pointer-events: none;
  border-color: var(--stylo);
}
.kc-with-demo .kc-piece-corrigee {
  border-color: var(--correct);
  animation: kc-pulse 1s ease-out 2;
}
@keyframes kc-pulse { 50% { box-shadow: 0 0 0 8px rgba(15, 122, 58, .25); } }

/* ============================================================================
 * 10. Compléter
 * ========================================================================== */
.kc-cases {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 8px 0;
}
.kc-case {
  width: 76px;
  height: 76px;
  border-radius: 14px;
  border: 3px solid var(--encre);
  background: #fff;
  color: var(--encre);
  font-size: 34px;
  font-weight: 900;
}
.kc-case-vide {
  border-style: dashed;
  background: #fff8e6;
}
.kc-case.kc-selected {
  border-color: var(--stylo);
  border-style: solid;
  box-shadow: 0 0 0 5px rgba(31, 95, 214, .25);
}
.kc-case span { color: var(--stylo); }
.kc-case:not(.kc-case-vide) span { color: var(--encre); }
.kc-case-modifiee span { color: var(--stylo) !important; }
.kc-case-demo {
  border-color: var(--correct);
  border-style: solid;
  background: #e3f5ea;
}
.kc-case-demo span { color: var(--correct) !important; }
.kc-keypad {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.kc-key {
  min-height: 58px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: var(--nuit-2);
  color: var(--papier);
  font-size: 26px;
  font-weight: 900;
}
.kc-key:active { background: var(--nuit-3); }
.kc-key-del { background: #3a2a20; }
@media (max-width: 420px) { .kc-keypad { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================================
 * 11. Outils
 * ========================================================================== */
.kc-toolbar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.kc-tool {
  display: grid;
  place-items: center;
  min-height: 62px;
  border-radius: 16px;
  border: 3px solid transparent;
  background: var(--papier);
  color: var(--encre);
  padding: 4px;
}
.kc-tool .kc-tool-icon {
  width: 44px;
  height: 44px;
}
.kc-tool.kc-tool-on {
  border-color: var(--jaune);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(231, 255, 103, .45);
  transform: translateY(-2px);
}
.kc-tool-help {
  font-size: 28px;
  font-weight: 900;
  background: var(--nuit-2);
  color: var(--papier);
  border-color: rgba(255, 255, 255, .25);
}
.kc-tool-demo { animation: kc-blink 1.2s ease-in-out infinite; }
.kc-tool-demo.kc-tool-on { animation: none; }
@keyframes kc-blink { 50% { box-shadow: 0 0 0 6px rgba(231, 255, 103, .8); } }
.kc-tool-static {
  display: inline-grid;
  min-height: 56px;
  min-width: 56px;
  flex: none;
}
.kc-ti-obj {
  fill: #fff;
  stroke: var(--encre);
  stroke-width: 2.5;
}
.kc-ti-filled { fill: var(--remplissage); }
.kc-ti-open { fill: none; }
.kc-ti-dash {
  stroke-dasharray: 3 2.5;
  fill: #fff8e6;
}
.kc-ti-mark {
  fill: none;
  stroke: var(--stylo);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kc-ti-text {
  font: 900 16px Roboto, Arial, sans-serif;
  text-anchor: middle;
  fill: var(--stylo);
}
.kc-shake { animation: kc-shake .45s ease-in-out; }
@keyframes kc-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.kc-disabled {
  opacity: .45;
  pointer-events: none;
}
@media (max-width: 420px) { .kc-toolbar { grid-template-columns: repeat(4, 1fr); } }

.kc-actions {
  display: flex;
  gap: 10px;
}
.kc-actions .kc-btn { flex: 1; }
.kc-btn-valider {
  flex: 2 !important;
  font-size: 21px;
}

/* ============================================================================
 * 12. Retour après validation (bravo, correction)
 * ========================================================================== */
.kc-feedback {
  padding: 16px;
  border-radius: var(--rayon);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kc-feedback p {
  margin: 0;
  font-size: 19px;
}
.kc-feedback-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.kc-feedback-head h2 {
  flex: 1;
  margin: 0;
  font-size: 26px;
}
.kc-feedback-ok {
  background: #173e2a;
  border: 2px solid #5fd79a;
}
.kc-feedback-erreur {
  background: #3b2a12;
  border: 2px solid #ffc46b;
}
.kc-feedback-neutre {
  background: var(--nuit-2);
  border: 2px solid rgba(255, 255, 255, .25);
}
.kc-rappel {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  font-weight: 700;
}
.kc-tool-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.kc-tool-row p {
  flex: 1;
  margin: 0;
}
.kc-perso {
  width: 110px;
  height: 110px;
  object-fit: contain;
}
.kc-feedback-head .kc-perso {
  width: 72px;
  height: 72px;
}

/* ============================================================================
 * 13. Choisir, progrès
 * ========================================================================== */
.kc-skill-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 620px) { .kc-skill-grid { grid-template-columns: 1fr 1fr; } }
.kc-skill-wrap {
  display: flex;
  gap: 8px;
}
.kc-skill {
  flex: 1;
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-areas: "icon title" "icon status" "icon advice";
  column-gap: 12px;
  align-items: center;
  text-align: left;
  min-height: 78px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: var(--nuit-2);
  color: var(--papier);
}
.kc-skill-icon {
  grid-area: icon;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--papier);
  display: grid;
  place-items: center;
  color: var(--encre);
}
.kc-skill-icon .kc-tool-icon {
  width: 44px;
  height: 44px;
}
.kc-word-icon {
  font-weight: 900;
  font-size: 18px;
  color: var(--encre);
}
.kc-skill-title {
  grid-area: title;
  font-weight: 800;
  font-size: 20px;
}
.kc-skill-status {
  grid-area: status;
  justify-self: start;
  font-size: 15px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
}
.kc-skill-advice {
  grid-area: advice;
  color: var(--muted);
  font-size: 15px;
}
.kc-status-travaillee .kc-skill-status {
  background: #3a2e14;
  color: #ffd98a;
}
.kc-status-sans-audio .kc-skill-status {
  background: #173e2a;
  color: #9be0b4;
}
.kc-status-consolidee .kc-skill-status {
  background: var(--menthe);
  color: var(--encre);
}
.kc-skill-wrap > .kc-say {
  min-height: auto;
  width: 56px;
  border-radius: 18px;
}
.kc-progress-card {
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--nuit-2);
  border: 1px solid rgba(255, 255, 255, .12);
}
.kc-progress-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.kc-progress-head h2 {
  margin: 0;
  font-size: 21px;
  flex: 1;
}
.kc-progress-card ul {
  margin: 10px 0 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 16px;
}
.kc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kc-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: var(--nuit-2);
  font-weight: 800;
}
.kc-chip .kc-tool-icon, .kc-chip .kc-word-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--papier);
  display: inline-grid;
  place-items: center;
}

/* ============================================================================
 * 14. Vue enseignant
 * ========================================================================== */
.kc-link-discret {
  font-size: 15px;
  opacity: .75;
}
.kc-teacher-h2 {
  margin: 12px 0 0;
  font-size: 22px;
}
.kc-note-colonne {
  flex-direction: column;
}
.kc-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px 14px;
  margin: 0;
}
.kc-checklist legend {
  padding: 0 6px;
  font-weight: 700;
}
.kc-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.kc-check input {
  width: 24px;
  height: 24px;
  accent-color: var(--menthe);
}
.kc-attempts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kc-attempts li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--nuit-2);
  border-left: 6px solid #5fd79a;
}
.kc-attempts li.kc-attempt-ko {
  border-left-color: #ffc46b;
}
.kc-attempts small {
  color: var(--muted);
}

/* ============================================================================
 * 15. Messages et fenêtres
 * ========================================================================== */
.kc-toast {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(560px, calc(100% - 32px));
  padding: 12px 12px 12px 18px;
  border-radius: 18px;
  background: var(--papier);
  color: var(--encre);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
  font-weight: 700;
}
.kc-toast span { flex: 1; }
.kc-toast .kc-say {
  color: var(--encre);
  border-color: #1f7a64;
}
.kc-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(10, 7, 5, .75);
  display: grid;
  place-items: center;
  padding: 16px;
}
.kc-overlay-panel {
  width: min(560px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 18px;
  border-radius: var(--rayon);
  background: var(--nuit-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kc-overlay-panel h2 { margin: 0; }
.kc-copy-area {
  position: fixed;
  left: -9999px;
}

/* ============================================================================
 * 16. Animations réduites, survol à la souris
 * ========================================================================== */

/* Réglage « réduire les animations » de l'appareil : pas de tracé animé. */
@media (prefers-reduced-motion: reduce) {
  .kc-mark-demo {
    animation: none;
    stroke-dashoffset: 0;
  }
  .kc-tool-demo, .kc-shake, .kc-piece-corrigee { animation: none; }
  .kc-shape.kc-filled-demo, .kc-num-bg.kc-filled-demo {
    animation: none;
    fill: #9be0b4;
  }
}

/* Survol seulement avec une souris : pas de surlignage collant au toucher. */
@media (hover: hover) {
  .kc-back:hover { background: var(--jaune); }
  .kc-say:hover { background: rgba(181, 235, 218, .25); }
  .kc-big-main:hover { border-color: var(--menthe); }
  .kc-btn-primary:hover { background: #ffa15f; }
  .kc-obj:hover { background: rgba(31, 95, 214, .05); }
  .kc-boite:hover { background: #efe3cf; }
}