/* ============================================================
   LIY10.LEARNING — L’APPLICATION
   Toutes les couleurs viennent de jetons.css. Rien en dur ici.
   ============================================================ */

/* ---------------------------------------------- l’ossature */
.app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--fond);
  max-width: 520px;
  margin: 0 auto;
  box-shadow: 0 0 0 1px var(--bord);
}
/* SUR ORDINATEUR, l'application reste une COLONNE centree : une
   interface pensee pour le pouce, etalee sur 1600 px, est illisible.
   « inset: 0 » avec « margin: 0 auto » ne centre pas de maniere fiable
   un element en position fixed — on force donc le centrage. */
@media (min-width: 560px) {
  body.mode-app { background: var(--fond-2); }
  /* Un decalage en MARGE, pas en transform : la marge ne depend pas de
     la largeur resolue de l'element, et ne se marche pas dessus avec
     d'autres transformations. */
  .app {
    left: 50%;
    right: auto;
    width: 520px;
    margin-left: -260px;
    border-left: 1px solid var(--bord);
    border-right: 1px solid var(--bord);
  }
}

/* ---------------------------------------------- la barre du haut */
.haut {
  flex: none;
  display: flex;
  gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 12px;
  background: var(--fond);
  border-bottom: 1px solid var(--bord);
  z-index: 5;
}
/* LE RETOUR. Il manquait : depuis un parcours ou les statistiques, on ne
   pouvait revenir qu'en cherchant une carte au milieu de l'ecran. Un
   chevron a gauche de la barre du haut, a la place ou tout le monde le
   cherche. Il n'apparait que sur les ecrans qui ont un parent. */
.retour {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--r-m);
  color: var(--texte);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.retour span { font-size: 28px; line-height: 1; margin-top: -3px; }
.retour:hover { border-color: var(--accent); color: var(--accent); }
.retour:active { transform: scale(.94); }

.pastille {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--r-m);
  font-weight: 700;
  font-size: 16px;
  color: var(--texte);
}
.pastille i { font-style: normal; font-size: 19px; line-height: 1; }
.pastille.or i     { color: var(--or); }
.pastille.cle      { border: 1px solid var(--bord); cursor: pointer; }
.pastille.cle i    { color: var(--or); }
.pastille.vie i    { color: var(--vie); }
.pastille.flamme i { color: var(--flamme); }
.pastille.eteinte  { color: var(--texte-3); }
.pastille.eteinte i { filter: grayscale(1) opacity(.5); }

/* ---------------------------------------------- le corps */
.contenu {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.contenu.sans-scroll { overflow: hidden; }
.dedans { padding: 16px 16px 24px; }

/* ---------------------------------------------- la barre du bas */
.bas {
  flex: none;
  display: flex;
  background: var(--fond);
  border-top: 1px solid var(--bord);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 5;
}
.onglet {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: var(--barre-basse);
  background: none;
  border: 0;
  color: var(--texte-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: color var(--transition);
}
.onglet svg { width: 24px; height: 24px; fill: currentColor; flex: none; }
/* Les libelles doivent RETRECIR, pas deborder : sur un petit telephone
   — et dans la maquette du site, large de 280 px — les cinq onglets se
   serrent, et « Profil » se faisait couper. */
.onglet { min-width: 0; padding: 0 2px; }
.onglet span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 360px) {
  .onglet { font-size: 10px; gap: 3px; }
  .onglet svg { width: 21px; height: 21px; }
  .pastille { font-size: 15px; gap: 6px; }
  .pastille i { font-size: 17px; }
  /* le bandeau des cles s empile plutot que de se serrer */
  .bandeau-cles { flex-direction: column; align-items: flex-start; gap: 7px; }
  .noeud { width: 68px; height: 68px; border-radius: 21px; }
  .noeud svg { width: 30px; height: 30px; }
  .noeud-nom { top: 74px; width: 112px; }
}
.onglet.actif { color: var(--accent); }
.onglet:active { transform: scale(.94); }

/* ---------------------------------------------- l’en-tête de parcours */
.carte-cours {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--r-l);
  padding: 16px 18px;
  margin-bottom: 20px;
  cursor: pointer;
  overflow: hidden;
}
.carte-cours::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--accent);
}
.carte-cours .sur { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); }
.carte-cours h2 { margin: 4px 0 12px; font-size: 19px; font-weight: 800; line-height: 1.25; }
.carte-cours .chev { position: absolute; right: 16px; top: 18px; color: var(--texte-3); font-size: 20px; }

.jauge {
  height: 9px;
  background: var(--surface-3);
  border-radius: 99px;
  overflow: hidden;
}
.jauge > i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width 420ms cubic-bezier(.4, 0, .2, 1);
}
.jauge-texte { margin-top: 7px; font-size: 12px; color: var(--texte-2); font-weight: 600; }

/* ---------------------------------------------- le chemin */
.chemin {
  position: relative;
  padding: 0;
  /* le fond à pois : le repère visuel du parcours */
  background-image: radial-gradient(var(--surface-3) 1.6px, transparent 1.6px);
  background-size: 34px 34px;
  background-position: 10px 10px;
}
.chapitre-titre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 26px 0 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--bord);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte-2);
}
.chapitre-titre .pastille-niv {
  flex: none;
  font-style: normal;
  letter-spacing: 0;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--surface-2);
  color: var(--texte-3);
}
.chapitre-titre .pastille-niv.ok { background: var(--accent); color: var(--sur-accent); }

/* ---------- le bandeau des clés ---------- */
.bandeau-cles {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px;
  margin-bottom: 18px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-m);
}
.bandeau-cles b { flex: none; font-size: 17px; letter-spacing: 2px; }
.bandeau-cles b .vide { opacity: .22; }
.bandeau-cles span { font-size: 13px; line-height: 1.4; color: var(--texte-2); }
.bandeau-cles.zero { border-left-color: var(--danger); }
.bandeau-cles.zero b { color: var(--danger); font-size: 22px; }
.bandeau-cles.pro { border-left-color: var(--or); }
.bandeau-cles.pro b { color: var(--or); font-size: 22px; }
.lien {
  background: none; border: 0; padding: 0;
  color: var(--accent); font-weight: 800; font-size: 13px;
  text-decoration: underline; cursor: pointer;
}

/* ---------- un nœud verrouillé faute de clé ---------- */
.noeud.verrou { opacity: .45; }
.noeud.verrou svg { width: 26px; height: 26px; }
.noeud-nom em {
  display: block;
  font-style: normal;
  font-size: 10px;
  color: var(--texte-3);
  opacity: .65;
  margin-top: 2px;
}

/* ---------- les formules, dans l’application ---------- */
.rappel-cles {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--bord);
  border-radius: 99px;
  font-size: 13px;
  color: var(--texte-2);
}
.rappel-cles b { color: var(--accent); font-size: 15px; }
.tarif-app {
  position: relative;
  padding: 20px 20px 18px;
  margin-bottom: 14px;
  background: var(--surface);
  border: 2px solid var(--bord);
  border-radius: var(--r-l);
  overflow: hidden;
}
.tarif-app.mis { border-color: var(--accent); }
.tarif-app.lancement { border-color: var(--or); }
.tarif-app .t-ruban {
  position: absolute; top: 0; right: 0;
  background: var(--accent); color: var(--sur-accent);
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  padding: 5px 12px; border-radius: 0 0 0 10px;
}
.tarif-app .t-ruban.or { background: var(--or); color: #1A1403; }
.tarif-app .t-nom {
  font-size: 12px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--texte-3);
}
.tarif-app .t-prix { font-size: 32px; font-weight: 800; margin: 8px 0 6px; line-height: 1; }
.tarif-app .t-prix small { font-size: 14px; font-weight: 600; color: var(--texte-3); }
.tarif-app .t-sous { font-size: 14px; line-height: 1.45; color: var(--texte-2); margin-bottom: 16px; }
.tarif-app .t-sous b { color: var(--texte); }

/* Les nœuds sont poses en ABSOLU, aux memes pourcentages que le
   trace : c’est ce qui garantit que la courbe tombe pile au centre
   de chacun, quelle que soit la largeur de l’ecran. */
.noeud {
  position: absolute;
  transform: translateX(-50%);
  width: 76px;
  height: 76px;
  border: 0;
  border-radius: 24px;
  background: var(--surface-2);
  color: var(--texte-3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 5px 0 0 var(--surface-3);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.noeud:active { transform: translateX(-50%) translateY(4px); box-shadow: 0 1px 0 0 var(--surface-3); }
.noeud svg { width: 34px; height: 34px; fill: currentColor; }

.noeud.faite {
  background: var(--accent);
  color: var(--sur-accent);
  box-shadow: 0 5px 0 0 var(--accent-sourd);
}
.noeud.faite:active { box-shadow: 0 1px 0 0 var(--accent-sourd); }

.noeud.courante {
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 5px 0 0 var(--surface-3), 0 0 0 3px var(--accent);
}
.noeud.courante::after {
  content: 'COMMENCER';
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--sur-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  animation: flotte 1.6s ease-in-out infinite;
}
@keyframes flotte {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-4px); }
}

.noeud-nom {
  position: absolute;
  top: 82px;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--texte-3);
  line-height: 1.2;
}

/* le trait qui relie les nœuds : un SVG posé derrière */
.trace { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.trace path { fill: none; stroke: var(--surface-3); stroke-width: 7; stroke-linecap: round; }
.trace path.fait { stroke: var(--accent); }

/* ---------------------------------------------- choix du parcours */
.grille-parcours { display: grid; gap: 12px; }
.tuile-parcours {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 18px 18px 18px 20px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--r-l);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--transition), transform 120ms ease;
}
.tuile-parcours:active { transform: scale(.985); }
.tuile-parcours::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--c);
}
.tuile-parcours h3 { margin: 0 0 4px; font-size: 18px; font-weight: 800; color: var(--c); }
.tuile-parcours p { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: var(--texte-2); }
.tuile-parcours .jauge > i { background: var(--c); }
.tuile-parcours .meta { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--texte-3); }

/* ---------------------------------------------- l’écran de leçon */
.lecon-haut {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 14px;
}
.croix {
  flex: none;
  width: 30px; height: 30px;
  border: 0; background: none;
  color: var(--texte-3);
  font-size: 26px; line-height: 1;
  cursor: pointer;
}
.coeurs { flex: none; display: flex; align-items: center; gap: 5px; font-weight: 800; color: var(--vie); }

.lecon-corps { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 18px 20px; }
.consigne {
  font-size: 12px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--texte-3); margin-bottom: 10px;
}
.enonce { font-size: 23px; font-weight: 800; line-height: 1.3; margin: 0 0 20px; }

.bloc {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-m);
  padding: 14px 16px;
  margin: 0 0 20px;
}
.bloc .etiquette {
  font-size: 11px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}
.bloc pre {
  margin: 0;
  font-family: var(--police-mono);
  font-size: 15px;
  line-height: 1.6;
  color: var(--texte);
  white-space: pre-wrap;
  word-break: break-word;
}
.explique { font-size: 15px; line-height: 1.55; color: var(--texte-2); }

/* --- les réponses à choisir --- */
.options { display: grid; gap: 10px; }
.option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 15px 16px;
  background: var(--surface);
  border: 2px solid var(--bord);
  border-radius: var(--r-m);
  color: var(--texte);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.option:active { transform: scale(.99); }
.option .lettre {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 2px solid var(--bord);
  border-radius: 8px;
  font-size: 12px; font-weight: 800;
  color: var(--texte-3);
}
.option.choisie { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.option.choisie .lettre { border-color: var(--accent); color: var(--accent); }
.option.juste { border-color: var(--succes); background: color-mix(in srgb, var(--succes) 16%, var(--surface)); }
.option.faux  { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, var(--surface)); }
.option[disabled] { cursor: default; }

/* --- reconstruire une ligne avec des jetons --- */
.ardoise {
  min-height: 74px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  padding: 14px;
  background: var(--surface);
  border: 2px dashed var(--bord);
  border-radius: var(--r-m);
  margin-bottom: 18px;
  font-family: var(--police-mono);
}
.ardoise:empty::after {
  content: 'Touche les morceaux ci-dessous, dans l’ordre.';
  font-family: var(--police);
  font-size: 13px;
  color: var(--texte-3);
}
.banque { display: flex; flex-wrap: wrap; gap: 8px; }
.jeton {
  padding: 10px 14px;
  background: var(--surface-2);
  border: 2px solid var(--bord);
  border-bottom-width: 4px;
  border-radius: var(--r-s);
  color: var(--texte);
  font-family: var(--police-mono);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 90ms ease, opacity var(--transition);
}
.jeton:active { transform: translateY(2px); border-bottom-width: 2px; }
.jeton.pose { opacity: .25; pointer-events: none; }
.ardoise .jeton { border-color: var(--accent); }

/* --- remettre dans l’ordre --- */
.liste-ordre { display: grid; gap: 10px; }
.puce-ordre {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 2px solid var(--bord);
  border-radius: var(--r-m);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--texte);
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.puce-ordre .num {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 99px;
  background: var(--surface-3);
  color: var(--texte-3);
  font-size: 12px; font-weight: 800;
}
.puce-ordre.placee .num { background: var(--accent); color: var(--sur-accent); }
.puce-ordre.placee { border-color: var(--accent); }
.puce-ordre.juste { border-color: var(--succes); }
.puce-ordre.faux { border-color: var(--danger); }

/* --- le pied de l’écran de leçon --- */
.lecon-pied {
  flex: none;
  padding: 14px 18px calc(env(safe-area-inset-bottom, 0px) + 18px);
  border-top: 1px solid var(--bord);
  background: var(--fond);
}
.lecon-pied.juste { background: color-mix(in srgb, var(--succes) 14%, var(--fond)); border-top-color: var(--succes); }
.lecon-pied.faux  { background: color-mix(in srgb, var(--danger) 12%, var(--fond)); border-top-color: var(--danger); }
.verdict { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; }
.verdict .pict { flex: none; font-size: 22px; line-height: 1.2; }
.verdict b { display: block; font-size: 16px; margin-bottom: 3px; }
.verdict.juste b { color: var(--succes); }
.verdict.faux b { color: var(--danger); }
.verdict p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--texte-2); }

.btn {
  display: block;
  width: 100%;
  padding: 16px;
  border: 0;
  border-radius: var(--r-m);
  background: var(--accent);
  color: var(--sur-accent);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 5px 0 0 var(--accent-sourd);
  transition: transform 90ms ease, box-shadow 90ms ease;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 0 var(--accent-sourd); }
.btn[disabled] { background: var(--surface-3); color: var(--texte-3); box-shadow: 0 5px 0 0 var(--surface-2); cursor: not-allowed; }
.btn.succes { background: var(--succes); box-shadow: 0 5px 0 0 #0E5836; color: #04120B; }
.btn.danger { background: var(--danger); box-shadow: 0 5px 0 0 #7A1C1F; color: #fff; }
.btn.fantome { background: none; color: var(--texte-2); box-shadow: none; border: 2px solid var(--bord); }

/* ---------------------------------------------- l’écran de fin */
.fin { text-align: center; padding: 40px 20px; }
.fin .gros { font-size: 64px; line-height: 1; margin-bottom: 16px; }
.fin h2 { font-size: 26px; font-weight: 800; margin: 0 0 8px; }
.fin p { color: var(--texte-2); font-size: 15px; margin: 0 0 26px; }
.recompenses { display: flex; gap: 12px; justify-content: center; margin-bottom: 28px; }
.recompense {
  flex: 1;
  max-width: 130px;
  padding: 16px 10px;
  background: var(--surface);
  border: 2px solid var(--bord);
  border-radius: var(--r-m);
}
.recompense .v { font-size: 24px; font-weight: 800; color: var(--accent); }
.recompense .e { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); margin-top: 4px; }

/* ---------------------------------------------- le classement */
.ligues { display: flex; gap: 10px; justify-content: space-between; margin-bottom: 18px; }
.ligue {
  flex: 1;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--r-m);
  background: var(--surface);
  border: 1px solid var(--bord);
  font-size: 22px;
  filter: grayscale(1) opacity(.35);
}
.ligue.ouverte { filter: none; }
.ligue.courante { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }

.bandeau-ligue {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 2px 12px;
  border-bottom: 1px solid var(--bord);
  margin-bottom: 4px;
}
.bandeau-ligue b { font-size: 17px; font-weight: 800; }
.bandeau-ligue span { font-size: 13px; color: var(--texte-2); font-weight: 600; }

.rang {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  border-bottom: 1px solid var(--surface-2);
}
.rang .n { flex: none; width: 24px; text-align: center; font-weight: 700; color: var(--texte-2); font-size: 14px; }
.rang .av {
  flex: none; width: 36px; height: 36px; border-radius: 99px;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 800; color: #000;
}
.rang .nom { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rang .xp { flex: none; font-weight: 800; font-size: 14px; color: var(--texte-2); }
.rang.moi { background: color-mix(in srgb, var(--accent) 18%, transparent); border-radius: var(--r-s); border-bottom-color: transparent; }
.rang.moi .nom, .rang.moi .xp, .rang.moi .n { color: var(--texte); }
.zone {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 0; font-size: 11px; font-weight: 800;
  letter-spacing: .1em; color: var(--succes);
}
.zone::before, .zone::after { content: ''; flex: 1; height: 1px; background: var(--succes); opacity: .5; }
.zone.bas { color: var(--danger); }
.zone.bas::before, .zone.bas::after { background: var(--danger); }

/* ---------------------------------------------- le profil */
.profil-haut { text-align: center; padding: 8px 0 22px; }
.avatar {
  width: 104px; height: 104px;
  margin: 0 auto 14px;
  border-radius: 99px;
  background: var(--quatre);
  display: grid; place-items: center;
  font-size: 34px; font-weight: 800; color: #000;
  box-shadow: var(--ombre-2);
}
.profil-haut h2 { margin: 0 0 4px; font-size: 22px; font-weight: 800; }
.profil-haut .sous { font-size: 13px; color: var(--texte-2); }

.tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.tuile {
  padding: 16px 8px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--r-m);
}
.tuile .p { font-size: 22px; line-height: 1; margin-bottom: 8px; }
.tuile .v { font-size: 20px; font-weight: 800; }
.tuile .e { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); margin-top: 4px; }

.ligne-stat {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--r-m);
  margin-bottom: 14px;
}
.ligne-stat .g { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 800; }
.ligne-stat .d { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); }

.section-titre {
  margin: 26px 0 12px;
  font-size: 12px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--texte-3);
}

/* barres de progression par logiciel, sur le profil */
.progres-logiciel { display: grid; gap: 12px; }
.pl { display: flex; align-items: center; gap: 12px; }
.pl .nom { flex: none; width: 92px; font-size: 13px; font-weight: 700; color: var(--c); }
.pl .jauge { flex: 1; }
.pl .jauge > i { background: var(--c); }
.pl .val { flex: none; width: 46px; text-align: right; font-size: 12px; font-weight: 700; color: var(--texte-2); }

/* ---------------------------------------------- la page Pro */
.pro-hero { text-align: center; padding: 20px 4px 28px; }
.pro-hero .marque {
  display: inline-block;
  font-size: 13px; font-weight: 800; letter-spacing: .18em;
  background: var(--quatre);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 14px;
}
.pro-hero h2 { font-size: 28px; font-weight: 800; line-height: 1.2; margin: 0 0 12px; }
.pro-hero p { color: var(--texte-2); font-size: 15px; line-height: 1.5; margin: 0 0 22px; }
.liste-avantages { display: grid; gap: 12px; margin-bottom: 24px; }
.avantage {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 16px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--r-m);
}
.avantage .p { flex: none; font-size: 20px; }
.avantage b { display: block; font-size: 15px; margin-bottom: 3px; }
.avantage span { font-size: 13px; color: var(--texte-2); line-height: 1.45; }

/* ---------------------------------------------- divers */
.vide { text-align: center; padding: 50px 20px; color: var(--texte-3); }
.vide .p { font-size: 40px; margin-bottom: 12px; }
.mini { font-size: 12px; color: var(--texte-3); line-height: 1.5; }

.apparait { animation: apparait 260ms cubic-bezier(.2, .7, .3, 1) both; }
@keyframes apparait {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------- l’écran d’ouverture */
.splash {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: var(--fond);
  transition: opacity 340ms ease;
}
.splash.parti { opacity: 0; pointer-events: none; }
.splash .marque {
  display: flex; align-items: center; gap: 14px;
  font-size: 27px; font-weight: 800; letter-spacing: -.01em;
}
.splash .marque img { width: 48px; height: 48px; border-radius: 13px; }
.splash .marque .pale { color: var(--texte-3); }

/* ============================================================
   L ECRAN DE CONNEXION
   Le nom en petit, un grand titre, les champs, le bouton, les
   trois services en ligne — et LE ROBOT en bas a droite, coupe
   par le bord.
   ============================================================ */
.cnx {
  position: relative;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cnx-dedans {
  position: relative;
  z-index: 2;
  padding: calc(env(safe-area-inset-top, 0px) + 26px) 22px 178px;
}
.cnx-marque {
  text-align: center;
  font-size: 17px; font-weight: 800; letter-spacing: -.01em;
  margin-bottom: 26px;
}
.cnx-marque span { color: var(--texte-3); }
.cnx-titre {
  margin: 0 0 10px;
  font-size: 34px; font-weight: 800; line-height: 1.12;
  letter-spacing: -.02em;
  text-align: center;
}
.cnx-sous {
  margin: 0 0 26px;
  font-size: 14px; line-height: 1.5; color: var(--texte-2);
  text-align: center;
}

.cnx-form { display: grid; gap: 14px; }
.cnx-form label {
  display: grid; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--texte-2);
}
.cnx-form input {
  width: 100%; padding: 15px 16px;
  background: var(--surface-2);
  border: 2px solid transparent;
  border-radius: var(--r-m);
  color: var(--texte); font-family: inherit; font-size: 16px;
}
.cnx-form input::placeholder { color: var(--texte-3); }
.cnx-form input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.cnx-form .btn { margin-top: 4px; }

.cnx-ou {
  display: flex; align-items: center; gap: 14px;
  margin: 22px 0 16px;
  color: var(--texte-3); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
}
.cnx-ou::before, .cnx-ou::after {
  content: ''; flex: 1; height: 1px; background: var(--bord);
}

.cnx-services { display: flex; gap: 10px; }
.cnx-gsi { display: flex; justify-content: center; min-height: 44px; margin-bottom: 10px; }
.cnx-gsi[hidden], .serv[hidden] { display: none; }
.serv {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 8px;
  background: #fff; border: 0; border-radius: var(--r-m);
  color: #14181B; font-size: 13px; font-weight: 800;
  cursor: pointer;
}
.serv:active { transform: scale(.98); }
.serv i { font-style: normal; font-size: 16px; font-weight: 800; line-height: 1; }
.serv.google i   { color: #EA4335; }
.serv.apple i    { color: #000; }
.serv.facebook i { color: #1877F2; }
@media (max-width: 400px) { .serv { font-size: 12px; gap: 7px; padding: 13px 6px; } }

.cnx-sans {
  display: block; width: 100%;
  margin: 20px 0 0;
  background: none; border: 0;
  color: var(--texte-2); font-size: 14px; font-weight: 700;
  text-decoration: underline; cursor: pointer; padding: 8px;
}
.cnx-note {
  margin: 14px 0 0;
  font-size: 12px; line-height: 1.55; color: var(--texte-3); text-align: center;
}
.cnx-note b { color: var(--texte-2); }

/* LE ROBOT — coupe par le bord bas-droit, comme une mascotte qui
   regarde l ecran. Il ne doit jamais intercepter un clic. */
.cnx-robot {
  position: absolute;
  /* Dans le coin, ENTIEREMENT VISIBLE : ni coupe par le bord, ni
     trop bas. Le texte ne passe jamais dessous grace a la marge
     basse de .cnx-dedans. */
  right: 10px; bottom: 14px;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .8));
}
.cnx-robot svg { display: block; }
@media (max-height: 720px) { .cnx-robot svg { width: 118px; height: 131px; } }
/* ============================================================
   LA PASTILLE DU LOGICIEL
   ============================================================ */
.badge { display: block; flex: none; border-radius: 9px; }
.lecon-haut .badge { margin-right: 2px; }
.tuile-parcours { padding-left: 20px; }
.tuile-parcours .t-tete { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; }
.tuile-parcours .t-tete h3 { margin: 0; }
.carte-cours .t-tete { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; }
.chapitre-titre .badge { width: 20px; height: 20px; }

/* ---------- les parcours annonces ---------- */
.tuile-parcours.avenir { cursor: default; opacity: .62; }
.tuile-parcours.avenir:active { transform: none; }
.tuile-parcours.avenir .badge { filter: grayscale(.45); }
.t-tete em {
  margin-left: auto;
  font-style: normal;
  font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte-3);
  border: 1px solid var(--bord);
  border-radius: 99px;
  padding: 3px 9px;
}

/* ============================================================
   UN ECRAN QUI PREND TOUTE LA PAGE
   La connexion n est pas une vue d application : c est une page
   web. Sur ordinateur elle doit respirer, pas rester coincee
   dans la colonne de 520 px.
   ============================================================ */
.app.ecran-plein {
  max-width: none;
  left: 0; right: 0;
  width: auto;
  margin-left: 0;
  border-left: 0; border-right: 0;
  box-shadow: none;
}
@media (min-width: 560px) {
  .app.ecran-plein {
    left: 0; right: 0;
    width: auto;
    margin-left: 0;
    border-left: 0; border-right: 0;
  }
}
.ecran-plein .cnx-dedans {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
}
@media (min-width: 720px) {
  .ecran-plein .cnx-marque { font-size: 21px; margin-bottom: 40px; }
  .ecran-plein .cnx-titre  { font-size: 46px; margin-bottom: 14px; }
  .ecran-plein .cnx-sous   { font-size: 16px; margin-bottom: 34px; }
  .ecran-plein .cnx-robot svg { width: 210px; height: 233px; }
  .ecran-plein .cnx-robot { right: 34px; bottom: 30px; }
  .ecran-plein .cnx-dedans { padding-bottom: 60px; }
}

/* ---------- le champ mot de passe ---------- */
.champ-mdp { position: relative; display: block; }
.champ-mdp input { padding-right: 52px; }
.oeil {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer;
  font-size: 17px; line-height: 1; padding: 8px 10px;
  opacity: .55;
}
.oeil:hover { opacity: 1; }
.cnx-erreur {
  background: color-mix(in srgb, var(--danger) 16%, var(--surface));
  border-left: 3px solid var(--danger);
  border-radius: var(--r-s);
  padding: 11px 13px;
  font-size: 13px; line-height: 1.45; color: var(--texte);
}
.cnx-erreur[hidden] { display: none; }
.cnx-liens { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 18px; }
.lien2 {
  background: none; border: 0; cursor: pointer; padding: 8px;
  color: var(--accent); font-size: 14px; font-weight: 800; text-decoration: underline;
}
.cnx-sans { margin: 0 !important; }

/* ============================================================
   LES STATISTIQUES
   ============================================================ */
.anneau-bloc { display: flex; align-items: center; gap: 18px; }
.anneau {
  flex: none;
  width: 104px; height: 104px;
  border-radius: 99px;
  display: grid; place-items: center;
  /* l anneau est un degrade conique : aucune image, aucun script */
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--surface-3) 0);
}
.anneau span {
  width: 78px; height: 78px;
  border-radius: 99px;
  background: var(--fond);
  display: grid; place-items: center;
  font-size: 26px; font-weight: 800;
}
.anneau span em { font-style: normal; font-size: 14px; color: var(--texte-3); }
.anneau-txt { display: grid; gap: 4px; min-width: 0; }
.anneau-txt b { font-size: 16px; }
.anneau-txt span { font-size: 13px; color: var(--texte-2); line-height: 1.4; }

.barres {
  display: flex; align-items: flex-end; gap: 5px;
  height: 116px;
  padding: 10px 12px 0;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--r-m);
}
.barres .bar { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.barres .bar i {
  width: 100%;
  min-height: 3px;
  background: var(--accent);
  border-radius: 3px 3px 0 0;
  margin-top: auto;
  transition: height 420ms cubic-bezier(.4, 0, .2, 1);
}
.barres .bar u {
  text-decoration: none;
  font-size: 9px; color: var(--texte-3);
  margin-top: 5px;
}

.calendrier {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  grid-auto-flow: column;
  gap: 3px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--r-m);
  overflow-x: auto;
}
.calendrier i {
  width: 100%; aspect-ratio: 1; min-width: 9px;
  border-radius: 2px;
  background: var(--surface-3);
}
.calendrier i.n1 { background: color-mix(in srgb, var(--accent) 30%, var(--surface-3)); }
.calendrier i.n2 { background: color-mix(in srgb, var(--accent) 55%, var(--surface-3)); }
.calendrier i.n3 { background: color-mix(in srgb, var(--accent) 78%, var(--surface-3)); }
.calendrier i.n4 { background: var(--accent); }
.calendrier i.futur { opacity: .25; }
.cal-legende {
  display: flex; align-items: center; gap: 4px; justify-content: flex-end;
  margin-top: 7px; font-size: 11px; color: var(--texte-3);
}
.cal-legende i { width: 10px; height: 10px; border-radius: 2px; background: var(--surface-3); }
.cal-legende i.n1 { background: color-mix(in srgb, var(--accent) 30%, var(--surface-3)); }
.cal-legende i.n2 { background: color-mix(in srgb, var(--accent) 55%, var(--surface-3)); }
.cal-legende i.n3 { background: color-mix(in srgb, var(--accent) 78%, var(--surface-3)); }
.cal-legende i.n4 { background: var(--accent); }

.pl .badge { width: 22px; height: 22px; }

/* ============================================================
   LE CHOIX DU THEME, DANS LE PROFIL
   Trois boutons plutot qu’un interrupteur : « automatique » est
   un etat a part entiere, et c’est celui qu’on recommande.
   ============================================================ */
.choix-theme { display: flex; gap: 8px; margin-bottom: 10px; }
.opt-theme {
  flex: 1;
  min-width: 0;
  padding: 12px 8px;
  background: var(--surface);
  border: 2px solid var(--bord);
  border-radius: var(--r-m);
  color: var(--texte-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.opt-theme.actif {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface-2);
}

/* ============================================================
   L’EXERCICE « EXECUTER » — le code, le trou, et ce qui sort.
   L’editeur reste sombre et le resultat reste clair dans les deux
   themes : ce sont les couleurs du vrai logiciel.
   ============================================================ */
.ide {
  background: var(--ide-fond);
  border: 1px solid var(--ide-bord);
  border-radius: var(--r-m);
  overflow: hidden;
  margin: 0 0 16px;
  box-shadow: var(--ombre-1);
}
.ide-tete {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px;
  background: var(--ide-tete);
  border-bottom: 1px solid var(--ide-bord);
  font: 600 11px/1 var(--police);
  color: var(--ide-ligne);
}
.ide-tete i { width: 9px; height: 9px; border-radius: 50%; background: var(--ide-bord); }
.ide-tete i:nth-child(1) { background: #FF5F57; }
.ide-tete i:nth-child(2) { background: #FEBC2E; }
.ide-tete i:nth-child(3) { background: #28C840; }
.ide-tete span { margin-left: 8px; }
.ide-code {
  margin: 0;
  padding: 12px 14px 14px 0;
  font-family: var(--police-mono);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ide-texte);
  white-space: pre-wrap;
  word-break: break-word;
  counter-reset: ln;
}
.ide-code .ln { display: block; min-height: 1.75em; padding-left: 40px; position: relative; }
.ide-code .ln::before {
  counter-increment: ln; content: counter(ln);
  position: absolute; left: 0; width: 28px; text-align: right;
  color: var(--ide-ligne); font-size: 11.5px;
}
.c-mot { color: var(--c-mot); }
.c-fn  { color: var(--c-fn); }
.c-txt { color: var(--c-txt); }
.c-num { color: var(--c-num); }
.c-com { color: var(--c-com); font-style: italic; }
.c-col { color: var(--c-col); }
.c-tab { color: var(--c-tab); }

/* le trou a remplir */
.trou {
  display: inline-block;
  min-width: 2.2em;
  padding: 0 6px;
  margin: 0 1px;
  border: 2px dashed var(--accent);
  border-radius: 6px;
  color: var(--accent);
  text-align: center;
  line-height: 1.4;
  animation: trou-respire 1.6s ease-in-out infinite;
}
.trou.rempli {
  border-style: solid;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--ide-texte);
  animation: trou-pose 320ms var(--ressort);
}
.trou.ok { border-color: var(--succes); background: color-mix(in srgb, var(--succes) 26%, transparent); }
.trou.ko { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 26%, transparent); animation: secoue 380ms ease; }
@keyframes trou-respire { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); } }
@keyframes trou-pose { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

.banque-exec .jeton { font-size: 14px; }
.banque-exec .jeton.pose {
  opacity: 1; pointer-events: auto;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
}
.banque-exec .jeton.juste { border-color: var(--succes); background: color-mix(in srgb, var(--succes) 18%, var(--surface-2)); opacity: 1; }
.banque-exec .jeton.faux  { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 16%, var(--surface-2)); opacity: 1; }
.banque-exec .jeton[disabled]:not(.juste):not(.faux) { opacity: .35; }

.btn-exec { letter-spacing: .06em; }

/* LA CONSOLE qui monte du bas, comme dans un terrain de jeu de code */
.console {
  margin-top: 18px;
  border-radius: var(--r-m);
  overflow: hidden;
  border: 1px solid var(--bord);
  background: var(--surface);
  animation: console-monte 520ms var(--doux) both;
  transform-origin: bottom center;
}
.console.attendu { animation-delay: 260ms; opacity: .96; }
.console-tete {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texte-2);
  border-bottom: 1px solid var(--bord);
}
.console-tete b { color: var(--accent); }
.console.attendu .console-tete b { color: var(--succes); }
.console-tete em { margin-left: auto; font-style: normal; font-weight: 700; color: var(--texte-3); letter-spacing: .02em; text-transform: none; }
.console-corps {
  padding: 14px;
  background: var(--sortie-toile);
  color: var(--sortie-texte);
  display: grid; gap: 12px;
  overflow-x: auto;
}
@keyframes console-monte {
  from { opacity: 0; transform: translateY(40px) scaleY(.92); }
  to   { opacity: 1; transform: none; }
}
/* chaque morceau du resultat arrive l’un apres l’autre */
.console-corps > * { animation: monte 420ms var(--doux) both; }
.console-corps > *:nth-child(2) { animation-delay: 120ms; }
.console-corps > *:nth-child(3) { animation-delay: 240ms; }

/* la grille Excel */
.s-grille table { border-collapse: collapse; background: var(--sortie-fond); font: 13px/1.2 'Segoe UI', Arial, sans-serif; }
.s-grille th, .s-grille td {
  border: 1px solid var(--sortie-bord);
  padding: 5px 9px; min-width: 46px; height: 26px;
  white-space: nowrap; text-align: left;
}
.s-grille th { background: var(--grille-tete); color: var(--sortie-pale); font-weight: 400; text-align: center; min-width: 30px; }
.s-grille td.num { text-align: right; }
.s-grille td.ecrite {
  background: var(--grille-ecrite);
  box-shadow: inset 0 0 0 2px var(--grille-cadre);
  animation: cellule-ecrite 380ms var(--ressort) both;
  animation-delay: calc(300ms + var(--d, 0) * 90ms);
}
@keyframes cellule-ecrite {
  from { background: var(--sortie-fond); color: transparent; box-shadow: inset 0 0 0 0 var(--grille-cadre); }
}

/* le MsgBox */
.s-msg {
  justify-self: center; width: min(300px, 100%);
  background: var(--sortie-fond);
  border: 1px solid var(--sortie-bord);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
  font: 13px/1.45 'Segoe UI', Arial, sans-serif;
  animation: msg-surgit 380ms var(--ressort) both !important;
}
.s-msg-tete { display: flex; justify-content: space-between; padding: 8px 12px; font-size: 12px; color: var(--sortie-pale); background: var(--msg-tete); border-radius: 8px 8px 0 0; }
.s-msg-tete i { font-style: normal; }
.s-msg-corps { padding: 14px 16px 18px; white-space: pre-line; }
.s-msg-pied { padding: 10px 12px; background: var(--grille-tete); text-align: right; border-radius: 0 0 8px 8px; }
.s-msg-pied span { display: inline-block; padding: 4px 22px; border: 1px solid var(--msg-bouton); border-radius: 4px; color: var(--sortie-texte); background: var(--sortie-fond); }
@keyframes msg-surgit { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }

/* la fenetre Execution (Debug.Print) */
.s-exe { background: var(--sortie-fond); border: 1px solid var(--sortie-bord); font: 13px/1.6 var(--police-mono); }
.s-exe-tete { padding: 4px 10px; background: var(--grille-tete); font: 600 11px/1.6 'Segoe UI', Arial, sans-serif; color: var(--sortie-pale); }
.s-exe > div:not(.s-exe-tete) { padding: 0 10px; animation: monte 300ms ease both; animation-delay: calc(250ms + var(--d, 0) * 110ms); }

/* les cartes KPI de Power BI */
.s-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.s-carte {
  background: var(--pbi-carte);
  border-radius: 6px;
  padding: 14px 12px 12px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  animation: carte-entre 460ms var(--ressort) both;
  animation-delay: calc(200ms + var(--d, 0) * 110ms);
}
.s-carte b { display: block; font: 600 24px/1.15 'Segoe UI', Arial, sans-serif; color: var(--sortie-texte); font-variant-numeric: tabular-nums; }
.s-carte span { display: block; margin-top: 4px; font: 12px/1.3 'Segoe UI', Arial, sans-serif; color: var(--sortie-pale); }
@keyframes carte-entre { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }

/* l’histogramme */
.s-barres { background: var(--sortie-fond); border-radius: 6px; padding: 12px; display: grid; gap: 8px; }
.s-barre { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 8px; font: 12px/1.2 'Segoe UI', Arial, sans-serif; }
.s-lib { color: var(--sortie-pale); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-piste { height: 16px; background: var(--grille-tete); border-radius: 2px; overflow: hidden; }
.s-piste i {
  display: block; height: 100%; width: var(--w); background: var(--pbi-barre);
  transform-origin: left; animation: barre-pousse 700ms var(--doux) both;
  animation-delay: calc(250ms + var(--d, 0) * 90ms);
}
.s-val { font-weight: 600; color: var(--sortie-texte); font-variant-numeric: tabular-nums; }
@keyframes barre-pousse { from { transform: scaleX(0); } }

/* la table / matrice */
.s-tab table { border-collapse: collapse; width: 100%; background: var(--sortie-fond); font: 12.5px/1.3 'Segoe UI', Arial, sans-serif; }
.s-tab th { text-align: left; padding: 7px 9px; border-bottom: 2px solid var(--sortie-bord); color: var(--sortie-pale); font-weight: 600; }
.s-tab td { padding: 6px 9px; border-bottom: 1px solid var(--grille-tete); }
.s-tab td.num, .s-tab th:not(:first-child) { text-align: right; }
.s-tab tr { animation: monte 300ms ease both; animation-delay: calc(220ms + var(--d, 0) * 70ms); }

/* l’erreur */
.s-err { background: var(--erreur-fond); border-left: 4px solid var(--erreur-texte); border-radius: 4px; padding: 10px 12px; font: 13px/1.45 'Segoe UI', Arial, sans-serif; color: var(--sortie-texte); }
.s-err b { display: block; color: var(--erreur-texte); margin-bottom: 2px; }
.s-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--sortie-pale); }

/* ============================================================
   LE MOUVEMENT — partout dans l’application
   ------------------------------------------------------------
   Toutes les entrees sont en fill-mode BACKWARDS, jamais both :
   une animation qui garde sa derniere image ecrase le transform
   de :active, et le bouton ne s’enfonce plus sous le doigt.
   prefers-reduced-motion (jetons.css) coupe tout d’un coup.
   ============================================================ */
.apparait { animation: apparait 380ms var(--doux) backwards; }
@keyframes apparait {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* les tuiles des parcours arrivent en cascade */
.grille-parcours > * { animation: entre-bas 520ms var(--doux) backwards; }
.grille-parcours > *:nth-child(2) { animation-delay: 60ms; }
.grille-parcours > *:nth-child(3) { animation-delay: 120ms; }
.grille-parcours > *:nth-child(4) { animation-delay: 180ms; }
.grille-parcours > *:nth-child(5) { animation-delay: 240ms; }
.grille-parcours > *:nth-child(6) { animation-delay: 300ms; }
.grille-parcours > *:nth-child(n+7) { animation-delay: 340ms; }
@keyframes entre-bas { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.tuile-parcours { transition: border-color var(--transition), transform 160ms var(--ressort), box-shadow 200ms ease; }
@media (hover: hover) {
  .tuile-parcours:not(.avenir):hover { transform: translateY(-3px); border-color: var(--c); box-shadow: 0 10px 28px -12px var(--c); }
  .jeton:hover, .option:hover:not([disabled]) { border-color: var(--bord-fort); }
}
/* la barre de couleur d’une tuile se remplit a l’arrivee */
.tuile-parcours::before { animation: barre-c 700ms var(--doux) backwards; transform-origin: top; }
@keyframes barre-c { from { transform: scaleY(0); } }
/* un reflet passe sur les parcours annonces */
.tuile-parcours.avenir::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .06) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: reflet 3.6s ease-in-out 1s infinite;
  pointer-events: none;
}
@keyframes reflet { 0% { transform: translateX(-100%); } 45%, 100% { transform: translateX(100%); } }

/* les jauges se remplissent depuis la gauche */
.jauge > i { animation: jauge-entre 900ms var(--doux) 150ms backwards; transform-origin: left; }
@keyframes jauge-entre { from { transform: scaleX(0); } }

/* les nœuds du chemin surgissent */
.chemin .noeud { animation: noeud-pop 460ms var(--ressort) backwards; }
.chemin .noeud:nth-of-type(2) { animation-delay: 90ms; }
.chemin .noeud:nth-of-type(3) { animation-delay: 180ms; }
@keyframes noeud-pop {
  from { opacity: 0; transform: translateX(-50%) scale(.5); }
  to   { opacity: 1; transform: translateX(-50%) scale(1); }
}
/* la lecon a faire maintenant respire */
.noeud.courante::before {
  content: ''; position: absolute; inset: -3px; border-radius: inherit;
  border: 3px solid var(--accent);
  animation: onde 1.8s ease-out infinite;
  pointer-events: none;
}
@keyframes onde { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.35); } }

/* la barre du bas : l’onglet choisi rebondit */
.onglet.actif svg { animation: rebond 420ms var(--ressort); }
@keyframes rebond { 0% { transform: scale(.7); } 60% { transform: scale(1.15); } 100% { transform: none; } }

/* les reponses */
.option, .puce-ordre { transition: border-color var(--transition), background var(--transition), transform 140ms var(--ressort); }
.options > .option { animation: entre-bas 380ms var(--doux) backwards; }
.options > .option:nth-child(2) { animation-delay: 50ms; }
.options > .option:nth-child(3) { animation-delay: 100ms; }
.options > .option:nth-child(4) { animation-delay: 150ms; }
.banque > .jeton { animation: trou-pose 300ms var(--ressort) backwards; }
.banque > .jeton:nth-child(2n) { animation-delay: 40ms; }
.banque > .jeton:nth-child(3n) { animation-delay: 80ms; }
.option.choisie { animation: choisi 220ms var(--ressort); }
@keyframes choisi { 50% { transform: scale(1.02); } }
.option.faux, .puce-ordre.faux { animation: secoue 380ms ease; }
.option.juste, .puce-ordre.juste { animation: choisi 300ms var(--ressort); }
@keyframes secoue {
  20% { transform: translateX(-6px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}
.ardoise .jeton { animation: trou-pose 260ms var(--ressort); }

/* le verdict monte du bas */
.lecon-pied.juste, .lecon-pied.faux { animation: pied-monte 300ms var(--doux); }
@keyframes pied-monte { from { transform: translateY(30px); opacity: .4; } to { transform: none; opacity: 1; } }
.verdict .pict { display: inline-block; animation: rebond 520ms var(--ressort); }
.jauge > i { transition: width 520ms var(--ressort); }

/* l’ecran de fin */
.fin .gros { display: inline-block; animation: trophee 900ms var(--ressort) backwards; }
@keyframes trophee {
  0% { transform: scale(.2) rotate(-25deg); opacity: 0; }
  60% { transform: scale(1.15) rotate(6deg); opacity: 1; }
  100% { transform: none; }
}
.recompense { animation: entre-bas 460ms var(--ressort) backwards; }
.recompense:nth-child(1) { animation-delay: 300ms; }
.recompense:nth-child(2) { animation-delay: 400ms; }
.recompense:nth-child(3) { animation-delay: 500ms; }
.confettis { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 60; }
.confettis i {
  position: absolute; top: -12px; left: var(--x);
  width: 8px; height: 14px; border-radius: 2px;
  background: var(--c);
  animation: confetti var(--t) cubic-bezier(.3, .6, .6, 1) var(--r) forwards;
}
@keyframes confetti {
  to { transform: translate(var(--dx), 105vh) rotate(var(--a)); opacity: .9; }
}

/* les boutons : un leger halo quand ils deviennent cliquables */
.btn:not([disabled]) { animation: btn-pret 360ms var(--ressort); }
@keyframes btn-pret { from { transform: scale(.97); } }
/* ============================================================
   LE TOUCHER — l’onde part du doigt (voir mouvement.js)
   ============================================================ */
.onde-tap {
  position: absolute; border-radius: 50%;
  background: currentColor; opacity: .22;
  transform: scale(0); pointer-events: none; z-index: 0;
  animation: onde-tap 620ms cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes onde-tap { to { transform: scale(1); opacity: 0; } }
.btn .onde-tap, .tuile-parcours .onde-tap { background: #fff; }
/* tout ce qu’on touche s’enfonce un peu, et revient en rebondissant */
.pastille, .retour, .opt-theme, .lien, .lien2, .tuile, .ligne-stat, .carte-cours, .puce-ordre {
  transition: transform 260ms var(--ressort), border-color var(--transition), background var(--transition);
}
.pastille:active, .retour:active, .opt-theme:active, .carte-cours:active, .puce-ordre:active { transform: scale(.94); transition-duration: 80ms; }
.tuile-parcours:active { transform: scale(.97); transition-duration: 80ms; }
.option:active { transform: scale(.97); }
.btn { transition: transform 200ms var(--ressort), box-shadow 120ms ease; }
.btn:active { transform: translateY(4px) scale(.985); }

/* l’onglet actif : une pastille de couleur glisse sous l’icone */
.onglet { position: relative; isolation: isolate; }
.onglet.actif::before {
  content: ''; position: absolute; top: 9px; left: 50%; width: 56px; height: 32px; margin-left: -28px;
  border-radius: 99px; background: color-mix(in srgb, var(--accent) 16%, transparent);
  animation: pastille-onglet 420ms var(--ressort);
  z-index: -1;
}
@keyframes pastille-onglet { from { transform: scaleX(.2); opacity: 0; } }

/* ============================================================
   LES ETAPES D’UNE LECON
   ============================================================ */
.etape-entre { animation: etape-entre 460ms var(--doux) backwards; }
@keyframes etape-entre {
  from { opacity: 0; transform: translateX(46%) rotate(2deg); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}
/* l’enonce, puis le reste, en deux temps */
.etape-entre .consigne { animation: entre-bas 420ms var(--doux) 120ms backwards; }
.etape-entre .enonce { animation: entre-bas 480ms var(--doux) 180ms backwards; }
.etape-entre .ide, .etape-entre .bloc, .etape-entre .ardoise { animation: entre-bas 500ms var(--doux) 260ms backwards; }

/* le verdict : le pictogramme se dessine */
.picto { display: block; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.picto circle { stroke-dasharray: 101; stroke-dashoffset: 101; animation: trace-picto 480ms var(--doux) forwards; }
.picto path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: trace-picto 340ms var(--doux) 300ms forwards; }
.picto.juste { stroke: var(--succes); }
.picto.faux { stroke: var(--danger); }
@keyframes trace-picto { to { stroke-dashoffset: 0; } }
.verdict .pict { animation: rebond 560ms var(--ressort); }
.verdict b { animation: entre-bas 360ms var(--doux) 80ms backwards; }
.verdict p { animation: entre-bas 360ms var(--doux) 160ms backwards; }
.lecon-pied.faux .verdict { animation: secoue 420ms ease 120ms; }

/* la jauge brille a chaque bonne reponse */
.lecon-haut .jauge { position: relative; overflow: visible; }
.lecon-haut .jauge > i { position: relative; overflow: hidden; }
.jauge.brille > i { animation: jauge-brille 760ms var(--ressort); }
@keyframes jauge-brille {
  0% { filter: brightness(1); box-shadow: 0 0 0 0 var(--accent); }
  35% { filter: brightness(1.6); box-shadow: 0 0 14px 2px var(--accent); }
  100% { filter: none; box-shadow: none; }
}
.jauge.brille > i::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
  animation: reflet-jauge 700ms ease-out forwards;
}
@keyframes reflet-jauge { from { left: -40%; } to { left: 110%; } }
/* un coeur perdu tremble */
.coeurs.perd { animation: coeur-perd 520ms ease; }
@keyframes coeur-perd {
  0%, 100% { transform: none; } 20% { transform: scale(1.35) rotate(-10deg); color: var(--danger); }
  40% { transform: scale(.9) rotate(8deg); } 60% { transform: scale(1.1) rotate(-4deg); }
}
/* la flamme de serie */
.serie-flamme {
  position: absolute; left: 50%; top: 70px; z-index: 20;
  display: flex; align-items: baseline; gap: 6px;
  padding: 8px 16px; border-radius: 99px;
  background: var(--surface); border: 1.5px solid var(--flamme);
  box-shadow: 0 10px 30px -8px var(--flamme);
  color: var(--texte); pointer-events: none;
  animation: serie 1.7s var(--ressort) forwards;
}
.serie-flamme b { font-size: 20px; color: var(--flamme); }
.serie-flamme span { font-size: 12px; font-weight: 700; color: var(--texte-2); }
@keyframes serie {
  0%   { opacity: 0; transform: translate(-50%, 20px) scale(.5); }
  18%  { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
  30%  { transform: translate(-50%, 0) scale(1); }
  80%  { opacity: 1; transform: translate(-50%, -6px); }
  100% { opacity: 0; transform: translate(-50%, -30px) scale(.9); }
}
.ecran-sortant { z-index: 0; }

/* ============================================================
   LE ROBOT VIVANT
   Il respire, cligne des yeux, sourit, son antenne frétille, et
   son regard suit le doigt. Dans le verdict d’une leçon, il
   HOCHE la tête quand c’est juste et la SECOUE quand c’est faux
   — toujours aimable : seule l’expression change.
   ============================================================ */
.robot g { transform-box: fill-box; }
.robot .r-tete { transform-origin: 50% 100%; animation: r-flotte 3.4s ease-in-out infinite; }
@keyframes r-flotte {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-2px) rotate(-3deg); }
  50% { transform: translateY(0) rotate(0); }
  75% { transform: translateY(-2px) rotate(3deg); }
}
.robot .r-antenne { transform-origin: 50% 100%; animation: r-antenne 2.3s ease-in-out infinite; }
@keyframes r-antenne { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(14deg); } 62% { transform: rotate(-11deg); } }
.robot .r-bulbe { animation: r-bulbe 1.7s ease-in-out infinite; }
@keyframes r-bulbe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.robot .r-oeil { transform-origin: 50% 50%; animation: r-cligne 4.3s ease-in-out infinite; }
.robot .r-oeil-0 { animation-delay: 40ms; }
@keyframes r-cligne { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.08); } }
.robot .r-regard { transform: translate(var(--rx, 0px), var(--ry, 0px)); transition: transform 240ms ease-out; }
.robot .r-bouche { transform-origin: 50% 30%; animation: r-sourit 2.8s ease-in-out infinite; }
@keyframes r-sourit { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14, 1.3); } }
.robot .r-joue { animation: r-bulbe 2.2s ease-in-out infinite; }
.robot .r-z { animation: r-z 2.6s ease-in-out infinite; }
.robot .r-z2 { animation-delay: .7s; }
@keyframes r-z { 0% { opacity: 0; transform: translate(0, 4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -10px); } }

/* l’ecran de connexion : il salue de temps en temps, et saute quand on le touche */
.cnx-robot { pointer-events: auto; cursor: pointer; }
.cnx-robot .robot { animation: r-salut 7s ease-in-out 2s infinite; transform-origin: 50% 100%; }
@keyframes r-salut {
  0%, 84%, 100% { transform: none; }
  88% { transform: translateY(-14px) rotate(-6deg); }
  92% { transform: translateY(0) rotate(4deg) scaleY(.95); }
  96% { transform: translateY(-5px) rotate(-2deg); }
}
.cnx-robot.saute .robot { animation: r-saute 720ms var(--ressort); }
@keyframes r-saute {
  0% { transform: scaleY(.85) scaleX(1.08); }
  35% { transform: translateY(-26px) rotate(-8deg); }
  70% { transform: translateY(0) scaleY(.92); }
  100% { transform: none; }
}

/* dans le verdict : il surgit, puis oui… ou non */
.verdict-robot { flex: none; margin: -10px 0 0 auto; animation: r-entre 520ms var(--ressort) 120ms backwards; }
.verdict-robot svg { display: block; }
@keyframes r-entre { from { opacity: 0; transform: translateY(26px) scale(.4) rotate(-20deg); } }
.verdict-robot.oui .r-tete { animation: r-oui 1s ease-in-out 380ms, r-flotte 3.4s ease-in-out 1.4s infinite; }
@keyframes r-oui {
  0%, 100% { transform: none; }
  18% { transform: translateY(6px) scaleY(.93); }
  36% { transform: translateY(-3px); }
  54% { transform: translateY(6px) scaleY(.93); }
  72% { transform: translateY(-2px); }
}
.verdict-robot.non .r-tete { animation: r-non 1s ease-in-out 380ms, r-flotte 3.4s ease-in-out 1.4s infinite; }
@keyframes r-non {
  0%, 100% { transform: none; }
  15% { transform: rotate(-15deg) translateX(-3px); }
  35% { transform: rotate(13deg) translateX(3px); }
  55% { transform: rotate(-10deg) translateX(-2px); }
  75% { transform: rotate(6deg) translateX(1px); }
}

/* le petit robot de l’accueil, et sa bulle */
.salut-robot { display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; }
.salut-robot .robot { flex: none; animation: r-entre 600ms var(--ressort) backwards; }
.salut-robot .bulle {
  position: relative; padding: 9px 14px; border-radius: 16px 16px 16px 4px;
  background: var(--surface-2); border: 1px solid var(--bord);
  font-size: 14px; font-weight: 700; color: var(--texte);
  animation: bulle 520ms var(--ressort) 350ms backwards;
  transform-origin: 0 100%;
}
@keyframes bulle { from { opacity: 0; transform: scale(.4); } }

/* Sur telephone, le robot de la connexion ne doit RIEN recouvrir. */
@media (max-width: 480px) {
  .cnx-robot svg { width: 78px; height: 86px; }
  .cnx-dedans { padding-bottom: 150px; }
}

/* ============================================================
   LE DEFI DE LA SEMAINE
   ============================================================ */
.haut { align-items: center; }
.defi-bouton {
  flex: none; position: relative; width: 44px; height: 44px; border-radius: var(--r-m);
  display: grid; place-items: center; cursor: pointer;
  background: var(--surface); border: 1px solid var(--bord); color: var(--texte);
  transition: transform 260ms var(--ressort);
}
.defi-icone { font-size: 21px; line-height: 1; filter: grayscale(.8); opacity: .6; }
.defi-bouton.pret { border-color: var(--or); box-shadow: 0 0 0 0 var(--or); animation: defi-pret 2.2s ease-in-out infinite; }
.defi-bouton.pret .defi-icone { filter: none; opacity: 1; animation: defi-secoue 2.2s ease-in-out infinite; }
.defi-bouton b {
  position: absolute; top: -7px; right: -7px; padding: 2px 6px; border-radius: 99px;
  background: var(--or); color: #1A1403; font-size: 10px; font-weight: 800;
}
.defi-bouton:active { transform: scale(.9); }
@keyframes defi-pret { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--or) 50%, transparent); } 50% { box-shadow: 0 0 0 7px transparent; } }
@keyframes defi-secoue { 0%, 70%, 100% { transform: none; } 76% { transform: rotate(-14deg) scale(1.1); } 84% { transform: rotate(12deg) scale(1.1); } 92% { transform: rotate(-6deg); } }
.cles-bonus { font-style: normal; color: var(--or); font-weight: 800; font-size: 13px; margin-left: 4px; }
.defi-accueil { text-align: center; padding-top: 10px; }
.defi-robot { display: flex; justify-content: center; margin-bottom: 10px; animation: r-entre 600ms var(--ressort) backwards; }
.defi-robot.oui .r-tete { animation: r-oui 1s ease-in-out 300ms, r-flotte 3.4s ease-in-out 1.3s infinite; }
.defi-robot.non .r-tete { animation: r-non 1s ease-in-out 300ms, r-flotte 3.4s ease-in-out 1.3s infinite; }
.defi-regles { display: flex; gap: 10px; justify-content: center; margin: 6px 0 18px; }
.defi-regles div { flex: 1; max-width: 120px; padding: 14px 8px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--bord); }
.defi-regles b { display: block; font-size: 22px; font-weight: 800; color: var(--accent); }
.defi-regles span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-3); }
.defi-gain { display: inline-flex; flex-direction: column; gap: 4px; padding: 14px 22px; border-radius: var(--r-l); border: 2px dashed var(--or); background: color-mix(in srgb, var(--or) 10%, transparent); }
.defi-gain b { font-size: 26px; color: var(--or); }
.defi-gain span { font-size: 13px; color: var(--texte-2); }
.defi-gain.pris { border-color: var(--bord-fort); background: none; }
.defi-gain.pris b { color: var(--succes); }
.defi-temps { height: 5px; margin: 0 16px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.defi-temps i { display: block; height: 100%; background: linear-gradient(90deg, var(--danger), var(--or), var(--succes)); transform-origin: left; }
.defi-score { flex: none; font-weight: 800; color: var(--texte-2); }
.defi-score b { color: var(--accent); font-size: 18px; }
.defi-enonce { font-size: 21px; }
.defi-grand { display: block; margin-top: 12px; font-size: 32px; letter-spacing: .04em; color: var(--accent); }
.defi-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.defi-option { justify-content: center; text-align: center; font-size: 18px; min-height: 64px; }
.defi-cles { display: flex; justify-content: center; gap: 6px; font-size: 34px; margin: 6px 0 10px; }
.defi-cles span { animation: cle-gagnee 700ms var(--ressort) backwards; }
.defi-cles span:nth-child(2) { animation-delay: 120ms; }
.defi-cles span:nth-child(3) { animation-delay: 240ms; }
.defi-cles span:nth-child(4) { animation-delay: 360ms; }
.defi-cles span:nth-child(5) { animation-delay: 480ms; }
@keyframes cle-gagnee { from { opacity: 0; transform: translateY(40px) rotate(-200deg) scale(.3); } }

/* ============================================================
   LA FENETRE « DEMARRER L'APPRENTISSAGE » — centree sur la page
   ============================================================ */
.noeud.choisi { box-shadow: 0 5px 0 0 var(--accent-sourd), 0 0 0 5px color-mix(in srgb, var(--accent) 45%, transparent); }
.fenetre-lecon { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 20px; }
.fl-fond {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .58);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: fl-fond 260ms ease both;
}
@keyframes fl-fond { from { opacity: 0; } }
.fl-carte {
  position: relative; width: min(350px, 100%);
  padding: 18px 18px 16px; border-radius: var(--r-l);
  background: var(--surface-2); border: 1.5px solid color-mix(in srgb, var(--accent) 55%, var(--bord));
  box-shadow: var(--ombre-3), 0 0 50px -16px var(--accent);
  animation: fl-carte 460ms var(--ressort) both;
}
@keyframes fl-carte { from { opacity: 0; transform: translateY(40px) scale(.82); } }
.fenetre-lecon.part .fl-fond { animation: fl-sort 220ms ease forwards; }
.fenetre-lecon.part .fl-carte { animation: fl-sort-carte 220ms ease forwards; }
@keyframes fl-sort { to { opacity: 0; } }
@keyframes fl-sort-carte { to { opacity: 0; transform: translateY(16px) scale(.94); } }
.fl-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.fl-tete span { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-3); }
.fl-tete svg { color: var(--accent); animation: rebond 600ms var(--ressort) 200ms backwards; }
.fl-titre { font-size: 22px; font-weight: 800; line-height: 1.2; margin-bottom: 4px; animation: entre-bas 420ms var(--doux) 80ms backwards; }
.fl-sous { font-size: 13px; color: var(--texte-2); margin-bottom: 14px; animation: entre-bas 420ms var(--doux) 140ms backwards; }
.fl-prog { display: flex; justify-content: space-between; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); margin-bottom: 6px; }
.fl-prog b { color: var(--texte); letter-spacing: 0; }
.fl-jauge { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin-bottom: 14px; }
.fl-jauge i { display: block; height: 100%; background: var(--accent); border-radius: 99px; animation: jauge-entre 800ms var(--doux) 250ms backwards; transform-origin: left; }
.fl-cout { font-size: 13px; font-weight: 600; color: var(--texte-2); margin-bottom: 14px; line-height: 1.4; }
.fl-go { animation: entre-bas 460ms var(--ressort) 220ms backwards; }
.fl-second { width: 100%; margin-top: 8px; animation: entre-bas 460ms var(--ressort) 300ms backwards; }

/* LECON VERROUILLEE : le cadenas tremble dans la bulle, le noeud
   touche secoue la tete ; le bouton fait « appeler » la lecon en cours. */
.fenetre-lecon.verrouillee .fl-carte { border-color: color-mix(in srgb, var(--texte-3) 60%, var(--bord)); box-shadow: var(--ombre-3); }
.fenetre-lecon.verrouillee .fl-tete svg { color: var(--texte-2); animation: cadenas-tremble 900ms ease-in-out 250ms backwards; transform-origin: 50% 20%; }
@keyframes cadenas-tremble {
  0% { opacity: 0; transform: scale(.4) rotate(0); }
  30% { opacity: 1; transform: scale(1.15) rotate(-14deg); }
  45% { transform: scale(1) rotate(12deg); } 60% { transform: rotate(-8deg); }
  75% { transform: rotate(5deg); } 100% { transform: rotate(0); }
}
.fenetre-lecon.verrouillee .fl-cout { color: var(--texte); }
/* .noeud est centre par translateX(-50%) : les animations le gardent. */
.chemin .noeud.verrou.secoue { animation: noeud-non 440ms ease; }
@keyframes noeud-non {
  0%, 100% { transform: translateX(-50%); }
  20% { transform: translateX(calc(-50% - 7px)) rotate(-6deg); } 40% { transform: translateX(calc(-50% + 7px)) rotate(6deg); }
  60% { transform: translateX(calc(-50% - 4px)); } 80% { transform: translateX(calc(-50% + 3px)); }
}
.chemin .noeud.appelle { animation: noeud-appelle 900ms var(--ressort); }
@keyframes noeud-appelle {
  0%, 100% { transform: translateX(-50%) scale(1); }
  35% { transform: translateX(-50%) scale(1.22); box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 35%, transparent); }
}

/* ============================================================
   « ETES-VOUS SUR DE PARTIR ? » — le robot triste, en cours de lecon
   Il arrive en tombant doucement, baisse la tete, une larme coule ;
   la bulle sort de sa bouche. Voir demanderDepart() dans lecon.js.
   ============================================================ */
.bulle-depart { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }
.bd-fond {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: fl-fond 260ms ease backwards;
}
.bd-carte {
  position: relative; width: min(340px, 100%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.bd-robot { position: relative; display: block; animation: bd-robot 620ms var(--ressort) backwards; }
.bd-robot svg { display: block; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35)); }
@keyframes bd-robot { from { opacity: 0; transform: translateY(-60px) scale(.6) rotate(-8deg); } }
/* Il baisse la tete, puis la secoue lentement : « oh non… » */
.bd-robot .r-tete { transform-origin: 50% 100%; animation: bd-tete 2.8s ease-in-out 500ms infinite; }
@keyframes bd-tete {
  0%, 100% { transform: rotate(0) translateY(2px); }
  25% { transform: rotate(-7deg) translateY(4px); }
  50% { transform: rotate(0) translateY(5px); }
  75% { transform: rotate(7deg) translateY(4px); }
}
.bd-robot .r-antenne { transform-origin: 64px 30px; animation: bd-antenne 2.8s ease-in-out 500ms infinite; }
@keyframes bd-antenne { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-24deg); } }
.bd-larme {
  position: absolute; left: 30%; top: 58%; width: 8px; height: 11px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: #6EC3FF; box-shadow: 0 0 8px #6EC3FF;
  animation: bd-larme 1.9s ease-in 900ms infinite backwards;
}
@keyframes bd-larme {
  0% { opacity: 0; transform: translateY(-6px) scale(.4); }
  15% { opacity: 1; transform: translateY(0) scale(1); }
  80% { opacity: 1; transform: translateY(30px) scale(.9); }
  100% { opacity: 0; transform: translateY(40px) scale(.6); }
}
.bd-bulle {
  position: relative; width: 100%; text-align: center;
  padding: 16px 18px 14px; border-radius: var(--r-l);
  background: var(--surface-2); border: 1.5px solid color-mix(in srgb, var(--danger) 45%, var(--bord));
  box-shadow: var(--ombre-3), 0 0 46px -18px var(--danger);
  transform-origin: 50% 0;
  animation: bd-bulle 520ms var(--ressort) 180ms backwards;
}
/* la pointe de la bulle, vers le robot */
.bd-bulle::before {
  content: ''; position: absolute; left: 50%; top: -9px; width: 16px; height: 16px;
  background: var(--surface-2);
  border-left: 1.5px solid color-mix(in srgb, var(--danger) 45%, var(--bord));
  border-top: 1.5px solid color-mix(in srgb, var(--danger) 45%, var(--bord));
  transform: translateX(-50%) rotate(45deg);
}
@keyframes bd-bulle { from { opacity: 0; transform: translateY(-14px) scale(.4); } }
.bd-bulle b { display: block; font-size: 19px; font-weight: 800; line-height: 1.25; margin-bottom: 6px; }
.bd-bulle p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--texte-2); }
/* la cle qui s'en va : elle tremble, puis s'eloigne et palit */
.bd-cle {
  position: absolute; right: -10px; top: -14px; font-size: 26px;
  animation: bd-cle 2.4s ease-in-out 700ms infinite backwards;
}
@keyframes bd-cle {
  0% { transform: rotate(0); opacity: 1; }
  10% { transform: rotate(-14deg); } 20% { transform: rotate(12deg); } 30% { transform: rotate(-8deg); }
  40% { transform: rotate(0); opacity: 1; }
  75% { transform: translate(14px, -22px) rotate(30deg) scale(.7); opacity: 0; }
  100% { transform: translate(14px, -22px) rotate(30deg) scale(.7); opacity: 0; }
}
.bd-carte .btn { width: 100%; animation: entre-bas 440ms var(--ressort) backwards; }
.bd-carte [data-rester] { animation-delay: 320ms; }
.bd-carte .bd-partir { animation-delay: 400ms; color: var(--danger); }
.bulle-depart.part .bd-fond { animation: fl-sort 220ms ease forwards; }
.bulle-depart.part .bd-carte { animation: fl-sort-carte 220ms ease forwards; }
@media (prefers-reduced-motion: reduce) {
  .bd-robot, .bd-robot .r-tete, .bd-robot .r-antenne, .bd-larme, .bd-bulle, .bd-cle, .bd-carte .btn { animation: none; }
}




/* ============================================================
   REVENIR EN ARRIERE — une vraie fleche ←, bien visible
   ============================================================ */
.retour {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--bord));
  transition: transform 220ms var(--ressort), background var(--transition), border-color var(--transition);
}
.retour svg { display: block; transition: transform 220ms var(--ressort); }
.retour:hover svg { transform: translateX(-3px); }
.retour:active { transform: scale(.9); }
.haut .retour { animation: retour-entre 420ms var(--ressort) backwards; }
@keyframes retour-entre { from { opacity: 0; transform: translateX(-14px); } }
.carte-cours .chev { display: none; }

/* ============================================================
   LE PORTAIL — deux battants, « liy10 » | « .learning »
   Toutes les animations durent 4,2 s : les pourcentages SONT la
   chronologie (1 % = 0,042 s). Couleurs : celles du logiciel.
   ============================================================ */
.portail { position: fixed; inset: 0; z-index: 95; overflow: hidden; cursor: pointer; background: var(--fond-2); animation: po-entre 260ms ease-out; }
.portail.fin { opacity: 0; transition: opacity 500ms ease; }
@keyframes po-entre { from { opacity: 0; } }
/* la camera : elle se pose, tremble au declic, puis avance vers la lumiere */
.po-scene { position: absolute; inset: 0; animation: po-camera 4.2s ease-out forwards; }
@keyframes po-camera {
  0% { transform: scale(1.1); }
  8% { transform: scale(1); }
  24% { transform: none; }
  25.5% { transform: translate(-4px, 2px); }
  27% { transform: translate(4px, -2px); }
  28.5% { transform: translate(-2px, 1px); }
  30% { transform: none; }
  70%, 100% { transform: scale(1.06); }
}
/* derriere : la couleur du logiciel, et des rayons qui tournent */
.po-derriere { position: absolute; inset: 0; overflow: hidden;
  background: radial-gradient(circle at 42% 42%, color-mix(in srgb, var(--accent) 60%, #fff) 0%, var(--accent) 38%, var(--accent-sourd) 100%); }
.po-rayons {
  position: absolute; left: 42%; top: 42%; width: 240vmax; height: 240vmax; margin: -120vmax 0 0 -120vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .16) 0 6deg, transparent 6deg 18deg);
  opacity: 0; animation: po-rayons 4.2s linear forwards;
}
@keyframes po-rayons { 0%, 30% { opacity: 0; transform: rotate(0); } 55% { opacity: 1; } 100% { opacity: .8; transform: rotate(40deg); } }
/* les deux battants */
.po-mur, .po-porte { position: absolute; inset: 0; }
.po-mur, .po-porte {
  background:
    linear-gradient(180deg, transparent 0 9%, rgba(255, 255, 255, .05) 9% 9.5%, transparent 9.5% 90%, rgba(0, 0, 0, .25) 90% 90.6%, transparent 90.6%),
    linear-gradient(90deg, rgba(0, 0, 0, .18), transparent 30%, transparent 70%, rgba(255, 255, 255, .03)),
    linear-gradient(180deg, var(--surface-3), var(--surface-2) 50%, var(--surface-3));
  box-shadow: inset 0 0 80px rgba(0, 0, 0, .35);
}
.po-mur { clip-path: var(--joint-mur); animation: po-gauche 4.2s cubic-bezier(.65, 0, .3, 1) forwards; }
.po-porte { clip-path: var(--joint-porte); animation: po-droite 4.2s cubic-bezier(.65, 0, .3, 1) forwards; }
@keyframes po-gauche { 0%, 30% { transform: none; } 64%, 100% { transform: translateX(-104%); } }
@keyframes po-droite { 0%, 30% { transform: none; } 64%, 100% { transform: translateX(104%); } }
.po-mur svg, .po-porte svg, .po-fuite svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.po-mur svg, .po-porte svg { filter: drop-shadow(0 0 5px var(--accent)); }
.po-arete { fill: none; stroke: var(--bord-fort); stroke-width: 4; vector-effect: non-scaling-stroke; }
.po-led { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; animation: po-led 4.2s ease forwards; }
@keyframes po-led { 0% { opacity: .35; } 12% { opacity: .7; } 18% { opacity: .35; } 26%, 32% { opacity: 1; } 40%, 100% { opacity: .6; } }
.po-mur line, .po-porte line { stroke: rgba(0, 0, 0, .25); stroke-width: 2; vector-effect: non-scaling-stroke; }
.po-rivet { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--bord-fort), var(--surface)); box-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
/* LE NOM DE L'APPLICATION, coupe en deux par la jointure */
.po-nom {
  position: absolute; top: 72%; font-size: clamp(30px, 10.5vw, 92px); font-weight: 800; letter-spacing: -.02em; line-height: 1;
  background: linear-gradient(100deg, var(--texte) 0 40%, color-mix(in srgb, var(--accent) 70%, #fff) 50%, var(--texte) 60% 100%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 45%, transparent));
  animation: po-nom 4.2s ease forwards;
}
.po-nom-g { right: 57%; }
.po-nom-d { left: 45%; color: transparent; }
.po-nom-d { background-image: linear-gradient(100deg, var(--texte-3) 0 40%, color-mix(in srgb, var(--accent) 70%, #fff) 50%, var(--texte-3) 60% 100%); }
@keyframes po-nom {
  0% { background-position: 100% 0; opacity: 0; transform: translateY(16px); }
  8% { opacity: 1; transform: none; }
  30% { background-position: 0 0; }
  100% { background-position: 0 0; }
}
/* la lumiere qui fuit par la jointure au declic */
.po-fuite { position: absolute; inset: 0; pointer-events: none; opacity: 0; animation: po-fuite 4.2s ease forwards; }
.po-fuite polyline { fill: none; stroke: color-mix(in srgb, var(--accent) 40%, #fff); stroke-width: 5; vector-effect: non-scaling-stroke; }
.po-fuite svg { filter: drop-shadow(0 0 10px var(--accent)) drop-shadow(0 0 24px var(--accent)); }
@keyframes po-fuite { 0%, 24% { opacity: 0; } 28% { opacity: 1; } 34% { opacity: .9; } 42%, 100% { opacity: 0; } }
/* la serrure, la cle et l'etiquette du logiciel : elles partent avec le battant droit */
.po-objets { position: absolute; inset: 0; pointer-events: none; animation: po-droite 4.2s cubic-bezier(.65, 0, .3, 1) forwards; }
.po-etiquette {
  position: absolute; left: 52%; top: calc(34% - 80px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px; padding: 5px 12px 5px 6px; border-radius: 99px;
  background: var(--surface); border: 1.5px solid var(--accent); color: var(--accent);
  font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 0 18px -4px var(--accent);
  animation: po-etiquette 4.2s var(--ressort) forwards;
}
.po-etiquette .badge { border-radius: 6px; }
@keyframes po-etiquette { 0% { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(.7); } 8% { opacity: 1; transform: translateX(-50%); } 100% { opacity: 1; transform: translateX(-50%); } }
.po-serrure {
  position: absolute; left: 52%; top: 34%; width: 80px; height: 80px; margin: -40px 0 0 -40px;
  border-radius: 22px; background: linear-gradient(145deg, var(--surface-3), var(--surface));
  border: 2px solid var(--bord-fort);
  box-shadow: inset 0 0 0 6px var(--surface-2), 0 12px 28px rgba(0, 0, 0, .4);
  animation: po-serrure 4.2s ease forwards;
}
.po-fente { position: absolute; left: 50%; top: 50%; width: 10px; height: 34px; margin: -17px 0 0 -5px; border-radius: 5px; background: var(--fond); animation: po-fente 4.2s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes po-fente { 0%, 17% { transform: none; } 24%, 100% { transform: rotate(90deg); } }
@keyframes po-serrure {
  0%, 23% { box-shadow: inset 0 0 0 6px var(--surface-2), 0 12px 28px rgba(0, 0, 0, .4); }
  26% { box-shadow: inset 0 0 0 6px var(--surface-2), 0 0 0 7px color-mix(in srgb, var(--or) 55%, transparent), 0 0 46px var(--or); transform: scale(1.06); }
  32%, 100% { box-shadow: inset 0 0 0 6px var(--surface-2), 0 12px 28px rgba(0, 0, 0, .4); transform: none; }
}
.po-cle { position: absolute; left: calc(52% - 132px); top: calc(34% - 30px); width: 150px; height: 60px; transform-origin: 132px 30px; animation: po-cle 4.2s cubic-bezier(.3, .7, .3, 1) forwards; }
.cle-svg { display: block; width: 150px; height: 60px; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .45)); }
@keyframes po-cle {
  0%, 3.5% { transform: perspective(500px) translateX(-75vw) rotateX(0); }
  13% { transform: perspective(500px) translateX(0) rotateX(0); }
  16.5% { transform: perspective(500px) translateX(0) rotateX(0); }
  24%, 100% { transform: perspective(500px) translateX(0) rotateX(78deg); }
}
/* le sol, et la poussiere que souleve l'ouverture */
.po-sol { position: absolute; left: 0; right: 0; bottom: 0; height: 21%; background: linear-gradient(180deg, var(--surface-3) 0 6px, var(--surface) 6px, var(--fond-2)); box-shadow: 0 -2px 0 var(--bord-fort); }
.po-poussiere { position: absolute; top: -6px; left: 42%; width: 14px; height: 14px; border-radius: 50%; background: color-mix(in srgb, var(--texte) 30%, transparent); opacity: 0; animation: po-poussiere 4.2s ease-out forwards; }
.po-poussiere:nth-child(odd) { --dx: -90px; }
.po-poussiere:nth-child(even) { --dx: 90px; }
.po-poussiere:nth-child(3n) { width: 22px; height: 22px; }
.po-poussiere:nth-child(4n) { --dx: -150px; }
.po-poussiere:nth-child(5n) { --dx: 160px; }
@keyframes po-poussiere { 0%, 30% { opacity: 0; transform: none; } 36% { opacity: .8; } 58%, 100% { opacity: 0; transform: translate(var(--dx), -34px) scale(2.4); } }
/* le robot : il entre, s'arrete presque au milieu, puis traverse la lumiere */
.po-robot { position: absolute; left: 50%; bottom: 21%; width: 110px; margin-left: -55px; display: flex; flex-direction: column; align-items: center; animation: po-robot 4.2s linear forwards; }
@keyframes po-robot { 0%, 22% { transform: translateX(-70vw); } 56% { transform: translateX(-4vw); } 62% { transform: translateX(2vw); } 85%, 100% { transform: translateX(80vw); } }
.po-robot .r-corps { display: none; }
.pr-tete { animation: pr-tete 210ms ease-in-out infinite alternate; margin-bottom: -16px; position: relative; z-index: 1; }
.pr-tete svg { display: block; }
@keyframes pr-tete { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-6px) rotate(3deg); } }
.pr-jambes { display: block; width: 90px; height: 46px; overflow: visible; position: relative; z-index: 1; }
.pr-jambe { transform-box: fill-box; transform-origin: 50% 0; animation: pr-pas 420ms ease-in-out infinite alternate; }
.pr-jambe.j2 { animation-direction: alternate-reverse; }
.pr-jambe rect { fill: #9AA4AA; }
.pr-pied { fill: #7C868D; }
@keyframes pr-pas { from { transform: rotate(26deg) translateY(-2px); } to { transform: rotate(-26deg); } }
.pr-ombre { display: block; width: 86px; height: 12px; margin-top: -6px; border-radius: 50%; background: rgba(0, 0, 0, .35); filter: blur(3px); animation: pr-ombre 210ms ease-in-out infinite alternate; }
@keyframes pr-ombre { to { transform: scaleX(.86); opacity: .7; } }
.pr-notes { position: absolute; left: 0; right: 0; top: 0; height: 0; }
.pr-notes i { position: absolute; font-style: normal; font-size: 26px; font-weight: 800; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .35); opacity: 0; animation: note-monte 1.3s ease-out infinite; }
.pr-notes i:nth-child(1) { left: -26px; top: 6px; animation-delay: 1s; }
.pr-notes i:nth-child(2) { left: 108px; top: -8px; animation-delay: 1.3s; }
.pr-notes i:nth-child(3) { left: -8px; top: -34px; animation-delay: 1.65s; }
.pr-notes i:nth-child(4) { left: 92px; top: -44px; animation-delay: 1.95s; color: color-mix(in srgb, var(--accent) 50%, #fff); }
.pr-notes i:nth-child(5) { left: 40px; top: -60px; animation-delay: 2.3s; }
@keyframes note-monte { 0% { opacity: 0; transform: translateY(10px) scale(.6) rotate(-12deg); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-56px) scale(1.1) rotate(14deg); } }
/* la couleur balaie l'ecran, et le badge du logiciel surgit */
.po-balayage { position: absolute; inset: 0; display: grid; place-items: center; background: var(--accent); transform: translateX(101%); animation: po-balaie 4.2s cubic-bezier(.7, 0, .3, 1) forwards; }
@keyframes po-balaie { 0%, 79% { transform: translateX(101%); } 88%, 100% { transform: none; } }
.po-badge { opacity: 0; animation: po-badge 4.2s var(--ressort) forwards; filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .35)); }
.po-badge .badge { border-radius: 26px; }
@keyframes po-badge { 0%, 85% { opacity: 0; transform: scale(.2) rotate(-90deg); } 93% { opacity: 1; transform: scale(1.12) rotate(6deg); } 100% { opacity: 1; transform: none; } }
.po-passer { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); text-align: center; font-size: 12px; font-weight: 600; color: var(--texte-3); opacity: .75; z-index: 2; }
.po-badge { padding: 12px; border-radius: 36px; background: rgba(255, 255, 255, .96); box-shadow: 0 18px 50px rgba(0, 0, 0, .3), 0 0 0 10px rgba(255, 255, 255, .18); }

/* ============================================================
   L'INTERFACE INTELLIGENTE (01/10/2026)
   ------------------------------------------------------------
   La revision du jour, le rattrapage, le bilan de fin de lecon,
   la maitrise sur le chemin, « Reprendre », le test de placement.
   Toujours en mouvement : chaque element ARRIVE (fill-mode
   backwards, jamais both — voir « LE MOUVEMENT »), et ce qui
   mesure quelque chose se REMPLIT sous les yeux.
   ============================================================ */

/* ---------- d'ou vient la question ---------- */
.lh-pict { font-size: 22px; line-height: 1; animation: rebond 600ms var(--ressort); }
.origine {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 8px 12px 0; padding: 5px 12px 5px 6px;
  border-radius: 99px; background: var(--surface-2); border: 1px solid var(--bord);
  font-size: 12px; font-weight: 700; color: var(--texte-2);
  animation: origine-entre 420ms var(--ressort) backwards;
}
.origine .badge { flex: none; }
@keyframes origine-entre { from { opacity: 0; transform: translateX(-16px) scale(.9); } }
.origine.rattrapage { padding-left: 12px; border-color: var(--or); color: var(--or); animation-delay: 80ms; }
.origine.echelle { padding-left: 12px; gap: 12px; }
.origine.echelle b { color: var(--accent); font-size: 14px; }
.ech-barres { display: inline-flex; align-items: flex-end; gap: 3px; height: 16px; }
.ech-barres u { display: block; width: 5px; border-radius: 2px; background: var(--surface-3); }
.ech-barres u:nth-child(1) { height: 30%; } .ech-barres u:nth-child(2) { height: 36%; }
.ech-barres u:nth-child(3) { height: 42%; } .ech-barres u:nth-child(4) { height: 48%; }
.ech-barres u:nth-child(5) { height: 54%; } .ech-barres u:nth-child(6) { height: 60%; }
.ech-barres u:nth-child(7) { height: 66%; } .ech-barres u:nth-child(8) { height: 72%; }
.ech-barres u:nth-child(9) { height: 78%; } .ech-barres u:nth-child(10) { height: 84%; }
.ech-barres u:nth-child(11) { height: 92%; } .ech-barres u:nth-child(n+12) { height: 100%; }
.ech-barres u.passe { background: var(--accent); opacity: .55; }
.ech-barres u.ici { background: var(--accent); animation: ech-ici 1.2s ease-in-out infinite; }
@keyframes ech-ici { 50% { transform: scaleY(1.25); filter: brightness(1.4); } }

/* ---------- le mot du robot, dans le verdict ---------- */
.robot-dit {
  position: relative; margin-top: 10px; padding: 8px 12px;
  border-radius: 12px 12px 12px 4px;
  background: var(--surface-2); border: 1px solid var(--bord);
  font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--texte);
  transform-origin: 0 100%;
  animation: bulle 520ms var(--ressort) 420ms backwards;
}

/* ---------- le rattrapage : les cartes tombent sur la pile ---------- */
.interlude { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px 10px 10px; }
.il-cartes { position: relative; width: 120px; height: 86px; margin-bottom: 6px; }
.il-cartes i {
  position: absolute; left: 22px; top: 6px; width: 76px; height: 54px; border-radius: 12px;
  background: var(--surface-2); border: 2px solid var(--danger);
  box-shadow: var(--ombre-1);
  transform: rotate(calc((var(--k) - 2) * 6deg)) translateY(calc(var(--k) * -3px));
  animation: carte-tombe 560ms var(--ressort) backwards;
  animation-delay: calc(var(--k) * 110ms);
}
.il-cartes i::after { content: '?'; position: absolute; inset: 0; display: grid; place-items: center; font: 800 22px/1 var(--police); color: var(--danger); }
@keyframes carte-tombe { from { opacity: 0; transform: translateY(-90px) rotate(-30deg) scale(.6); } }
.il-robot { animation: r-entre 600ms var(--ressort) 300ms backwards; }
.il-robot .r-tete { animation: r-oui 1s ease-in-out 900ms, r-flotte 3.4s ease-in-out 1.9s infinite; }
.il-bulle {
  margin-top: 10px; padding: 14px 18px; border-radius: var(--r-l);
  background: var(--surface-2); border: 1.5px solid color-mix(in srgb, var(--or) 50%, var(--bord));
  max-width: 340px; transform-origin: 50% 0;
  animation: bd-bulle 520ms var(--ressort) 500ms backwards;
}
.il-bulle b { display: block; font-size: 19px; font-weight: 800; margin-bottom: 6px; }
.il-bulle p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--texte-2); }

/* ---------- le bilan de fin de lecon ---------- */
.fin-bilan { padding-top: 26px; }
.fin-bilan .recompenses { margin-bottom: 18px; }
.mot-robot {
  display: flex; align-items: center; gap: 12px; text-align: left;
  margin: 0 auto 16px; max-width: 420px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--r-l);
  animation: entre-bas 480ms var(--ressort) 620ms backwards;
}
.mot-robot .mr-robot { flex: none; }
.mot-robot p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--texte); }
.maitrise-bloc {
  margin: 0 auto 16px; max-width: 420px; text-align: left;
  animation: entre-bas 480ms var(--ressort) 760ms backwards;
}
.mb-tete { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.mb-tete span { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); }
.mb-tete b { font-size: 18px; font-weight: 800; color: var(--accent); }
.mb-jauge { height: 12px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.mb-jauge i {
  display: block; height: 100%; width: var(--a); border-radius: 99px;
  background: linear-gradient(90deg, var(--accent-sourd), var(--accent));
  animation: mb-monte 1.3s var(--doux) 900ms backwards;
}
@keyframes mb-monte { from { width: var(--de); } }
.mb-gain { margin-top: 6px; font-size: 12px; font-weight: 800; color: var(--succes); animation: entre-bas 400ms var(--ressort) 1.9s backwards; }
.a-revoir {
  margin: 0 auto 14px; max-width: 420px; text-align: left;
  border: 1px solid var(--bord); border-radius: var(--r-m); overflow: hidden;
  animation: entre-bas 480ms var(--ressort) 900ms backwards;
}
.ar-titre { padding: 9px 14px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--or); background: var(--surface); border-bottom: 1px solid var(--bord); }
.ar-ligne { display: grid; gap: 4px; padding: 10px 14px; border-bottom: 1px solid var(--surface-2); animation: entre-bas 380ms var(--doux) backwards; animation-delay: calc(1000ms + var(--k) * 110ms); }
.ar-ligne:last-child { border-bottom: 0; }
.ar-q { font-size: 13px; line-height: 1.35; color: var(--texte-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ar-r { font-family: var(--police-mono); font-size: 13px; font-weight: 600; color: var(--succes); word-break: break-word; }
.espace { height: 10px; }
.btn-suite { position: relative; overflow: hidden; animation: btn-pret 360ms var(--ressort), suite-appelle 2.4s ease-in-out 2s infinite; }
@keyframes suite-appelle { 0%, 70%, 100% { transform: none; } 80% { transform: translateX(4px); } 90% { transform: translateX(-2px); } }
.btn-suite::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  animation: reflet-btn 2.4s ease-in-out 1.4s infinite;
}
@keyframes reflet-btn { 0% { left: -40%; } 45%, 100% { left: 120%; } }

/* ---------- le resultat du test de placement : on grimpe ---------- */
.placement-fin { padding-top: 26px; }
.pf-echelle {
  position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 5px;
  height: 150px; margin: 0 auto 26px; max-width: 360px; padding-top: 46px;
}
.pf-echelle u {
  position: relative; flex: 1; max-width: 22px; border-radius: 6px 6px 3px 3px;
  height: calc(18% + var(--k) * 7%);
  background: var(--surface-3);
  animation: pf-barre 420ms var(--ressort) backwards; animation-delay: calc(var(--k) * 60ms);
  transform-origin: bottom;
}
.pf-echelle u em { position: absolute; left: 0; right: 0; bottom: -18px; font-style: normal; font-size: 10px; font-weight: 700; color: var(--texte-3); }
.pf-echelle u.acquis { background: color-mix(in srgb, var(--accent) 55%, var(--surface-3)); }
.pf-echelle u.depart { background: var(--accent); box-shadow: 0 0 22px -4px var(--accent); }
.pf-echelle u.depart em { color: var(--accent); font-weight: 800; }
@keyframes pf-barre { from { transform: scaleY(0); } }
/* le robot grimpe jusqu'au niveau de depart */
.pf-robot {
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(calc((var(--k) - (var(--n) - 1) / 2) * 27px - 50%)) translateY(calc(-1 * (18% + var(--k) * 7%)));
  animation: pf-grimpe 1.1s var(--ressort) 700ms backwards;
}
.pf-robot svg { display: block; }
@keyframes pf-grimpe { from { opacity: 0; transform: translateX(calc((var(--k) - (var(--n) - 1) / 2) * 27px - 50%)) translateY(30px); } }

/* ---------- l'accueil : Reprendre et Revision du jour ---------- */
.accueil-suite { display: grid; gap: 12px; margin-bottom: 6px; }
.carte-reprendre, .carte-revision, .carte-placement {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px 16px; text-align: left; cursor: pointer; overflow: hidden;
  background: var(--surface); border: 1.5px solid var(--bord); border-radius: var(--r-l);
  color: var(--texte); font-family: inherit;
  transition: transform 220ms var(--ressort), border-color var(--transition), box-shadow 220ms ease;
  animation: entre-bas 520ms var(--ressort) backwards;
}
.carte-reprendre { border-color: var(--c); box-shadow: 0 14px 34px -22px var(--c); }
.carte-reprendre::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .07) 50%, transparent 70%);
  transform: translateX(-100%); animation: reflet 4.2s ease-in-out 1.2s infinite;
}
.carte-reprendre:active, .carte-revision:active, .carte-placement:active { transform: scale(.97); }
@media (hover: hover) {
  .carte-reprendre:hover, .carte-revision:hover, .carte-placement:hover { transform: translateY(-2px); }
}
.cr-anneau {
  flex: none; position: relative; width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-3) 0);
  animation: cr-tourne 1.1s var(--doux) 200ms backwards;
}
.cr-anneau::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface); }
.cr-badge { position: relative; display: grid; animation: rebond 600ms var(--ressort) 500ms backwards; }
@keyframes cr-tourne { from { transform: rotate(-120deg) scale(.6); opacity: 0; } }
.cr-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cr-txt em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.cr-txt b { font-size: 17px; font-weight: 800; line-height: 1.25; }
.cr-txt i { font-style: normal; font-size: 12px; color: var(--texte-3); font-weight: 600; }
.cr-go {
  flex: none; position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c); color: #fff;
  animation: rebond 600ms var(--ressort) 600ms backwards;
}
.cr-go::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--c);
  animation: onde 1.9s ease-out 1.2s infinite; pointer-events: none;
}
.cr-go svg { width: 24px; height: 24px; fill: currentColor; margin-left: 3px; }
.carte-revision { border-color: var(--or); animation-delay: 90ms; }
.cv-pict { flex: none; font-size: 30px; line-height: 1; animation: cv-idee 3s ease-in-out 1s infinite; }
@keyframes cv-idee { 0%, 80%, 100% { transform: none; } 85% { transform: scale(1.18) rotate(-8deg); } 92% { transform: scale(1.1) rotate(6deg); } }
.cv-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cv-txt b { font-size: 16px; font-weight: 800; }
.cv-txt em { font-style: normal; font-size: 12px; line-height: 1.35; color: var(--texte-2); }
.cv-nb {
  flex: none; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 99px;
  display: grid; place-items: center; background: var(--or); color: #1A1403; font-weight: 800;
  animation: rebond 600ms var(--ressort) 600ms backwards;
}

/* ---------- le test de placement, sur le chemin ---------- */
.carte-placement { margin: -4px 0 8px; border-style: dashed; border-color: var(--accent); }
.cp-pict { flex: none; font-size: 28px; line-height: 1; animation: cp-cible 2.6s ease-in-out 800ms infinite; }
@keyframes cp-cible { 0%, 70%, 100% { transform: none; } 78% { transform: scale(1.2); } 86% { transform: scale(.95); } }
.cp-txt { flex: 1; display: grid; gap: 2px; }
.cp-txt b { font-size: 15px; font-weight: 800; }
.cp-txt em { font-style: normal; font-size: 12px; color: var(--texte-2); }
.cp-go { flex: none; font-size: 20px; font-weight: 800; color: var(--accent); animation: suite-appelle 2.4s ease-in-out 1.2s infinite; }
.rappel-placement {
  margin: -4px 0 8px; padding: 10px 14px; border-radius: var(--r-m);
  background: var(--surface); border: 1px solid var(--bord);
  font-size: 13px; line-height: 1.5; color: var(--texte-2);
  animation: entre-bas 420ms var(--doux) backwards;
}
.rappel-placement b { color: var(--accent); }
.rappel-placement .lien { margin-left: 6px; }

/* ---------- la maitrise sur le chemin ---------- */
.chapitre-titre .niv-droite { display: flex; align-items: center; gap: 8px; flex: none; }
.maitrise-niv { display: block; width: 46px; height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.maitrise-niv i { display: block; height: 100%; width: var(--m); background: var(--accent); border-radius: 99px; transform-origin: left; animation: jauge-entre 900ms var(--doux) 300ms backwards; }
.chapitre-titre.depart { color: var(--accent); }
/* L'anneau autour d'une lecon finie : il se DESSINE a l'arrivee. */
.noeud .anneau-m {
  position: absolute; left: -9px; top: -9px; width: calc(100% + 18px); height: calc(100% + 18px);
  pointer-events: none; overflow: visible; fill: none;
}
.anneau-m rect { fill: none; stroke-width: 4; }
.am-fond { stroke: var(--surface-3); }
.am-val {
  stroke: var(--accent); stroke-linecap: round;
  stroke-dasharray: var(--l) 300;
  animation: am-trace 1.2s var(--doux) backwards;
  animation-delay: calc(300ms + var(--rang, 0) * 40ms);
}
.am-val.plein { stroke: var(--or); }
@keyframes am-trace { from { stroke-dasharray: 0 300; } }
.noeud-due {
  position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 99px; display: grid; place-items: center;
  background: var(--or); color: #1A1403; font-size: 11px; font-weight: 800;
  box-shadow: 0 0 0 3px var(--fond);
  animation: rebond 600ms var(--ressort) 700ms backwards, due-pouls 2.4s ease-in-out 2s infinite;
}
@keyframes due-pouls { 0%, 75%, 100% { transform: none; } 85% { transform: scale(1.18); } }
/* le trace deja parcouru se dessine dans la couleur du parcours */
.trace path.fait { stroke-dasharray: 2000; animation: trace-fait 1.4s var(--doux) 200ms backwards; }
@keyframes trace-fait { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: 0; } }

/* ---------- Pratique ---------- */
.revision-jour {
  position: relative; padding: 18px; margin-bottom: 8px; overflow: hidden;
  border-radius: var(--r-l); border: 1.5px solid var(--or);
  background: var(--surface);
  box-shadow: 0 18px 40px -26px var(--or);
  animation: entre-bas 520ms var(--ressort) backwards;
}
.revision-jour::before {
  content: ''; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 194, 66, .2), transparent 70%);
  animation: rj-halo 5s ease-in-out infinite; pointer-events: none;
}
@keyframes rj-halo { 50% { transform: scale(1.25); opacity: .6; } }
.revision-jour.calme { border-color: var(--bord); box-shadow: none; }
.revision-jour.calme::before { display: none; }
.rj-tete { position: relative; display: flex; gap: 14px; align-items: flex-start; }
.rj-robot { flex: none; animation: r-entre 600ms var(--ressort) 150ms backwards; }
.rj-sur { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--or); }
.revision-jour h2 { margin: 3px 0 6px; font-size: 20px; font-weight: 800; line-height: 1.25; }
.revision-jour p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--texte-2); }
.rj-memoire { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 14px; }
.rj-memoire div {
  padding: 10px 6px; border-radius: var(--r-m); text-align: center;
  background: var(--surface-2); border: 1px solid var(--bord);
  animation: entre-bas 420ms var(--ressort) backwards;
}
.rj-memoire div:nth-child(2) { animation-delay: 80ms; }
.rj-memoire div:nth-child(3) { animation-delay: 160ms; }
.rj-memoire b { display: block; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rj-memoire div:nth-child(1) b { color: var(--succes); }
.rj-memoire div:nth-child(2) b { color: var(--accent); }
.rj-memoire div:nth-child(3) b { color: var(--or); }
.rj-memoire span { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); }
.rj-note { margin: 16px 0 0; text-align: center; }
.titre-logiciel { display: flex; align-items: center; gap: 8px; }
.points-faibles { display: grid; gap: 10px; }
.point-faible {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  padding: 12px 14px; border-radius: var(--r-m); font-family: inherit; color: var(--texte);
  background: var(--surface); border: 1px solid var(--bord); border-left: 4px solid var(--c);
  animation: entre-bas 440ms var(--ressort) backwards; animation-delay: calc(var(--k) * 80ms);
  transition: transform 220ms var(--ressort);
}
.point-faible:active { transform: scale(.97); }
.pf-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pf-txt b { font-size: 14px; font-weight: 800; }
.pf-txt em { font-style: normal; font-size: 12px; color: var(--texte-3); }
.pf-m { flex: none; display: grid; gap: 4px; justify-items: end; width: 64px; }
.pf-m i { display: block; width: 100%; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--c) var(--m), var(--surface-3) 0); }
.pf-m u { text-decoration: none; font-size: 12px; font-weight: 800; color: var(--texte-2); }
.tr-due { color: var(--or); font-weight: 800; }
.jauge-m { height: 6px; }

/* ---------- les statistiques : la memoire ---------- */
.memoire-barre { height: 14px; border-radius: 99px; overflow: hidden; background: var(--surface-3); }
.memoire-barre i { display: block; height: 100%; width: var(--a); background: var(--succes); border-radius: 99px; transform-origin: left; animation: jauge-entre 1s var(--doux) 200ms backwards; }
.memoire-legende { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 10px 0 6px; font-size: 13px; color: var(--texte-2); }
.memoire-legende span { display: inline-flex; align-items: center; gap: 6px; }
.memoire-legende i { width: 10px; height: 10px; border-radius: 3px; }
.memoire-legende i.acq { background: var(--succes); }
.memoire-legende i.enc { background: var(--surface-3); }
.memoire-legende i.due { background: var(--or); }
.memoire-legende b { color: var(--texte); }

/* ---------- l'execution d'un flux Power Automate ----------
   L'historique d'execution : chaque action s'allume l'une apres
   l'autre, reliee a la precedente par un trait qui se dessine. */
.s-flux { display: grid; gap: 14px; background: var(--sortie-fond); border-radius: 6px; padding: 14px 12px; }
.s-act {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 6px; border: 1px solid var(--sortie-bord);
  background: var(--sortie-fond); color: var(--sortie-texte);
  font: 13px/1.3 'Segoe UI', Arial, sans-serif;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  animation: s-act 420ms var(--ressort) backwards; animation-delay: calc(250ms + var(--d, 0) * 260ms);
}
.s-act + .s-act::before {
  content: ''; position: absolute; left: 22px; top: -15px; width: 2px; height: 14px; background: var(--sortie-bord);
  transform-origin: top; animation: s-lien 260ms ease backwards; animation-delay: calc(150ms + var(--d, 0) * 260ms);
}
@keyframes s-act { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes s-lien { from { transform: scaleY(0); } }
.s-etat {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-weight: 800; font-size: 12px; color: #fff; background: #107C10;
  animation: rebond 500ms var(--ressort) backwards; animation-delay: calc(450ms + var(--d, 0) * 260ms);
}
.s-act.ko { border-color: #D13438; background: #FDE7E9; }
.s-act.ko .s-etat { background: #D13438; }
.s-act.saute { opacity: .6; }
.s-act.saute .s-etat { background: #8A8886; }
.s-act.attente .s-etat { background: #0078D4; }
.s-act-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.s-act-txt b { font-weight: 600; }
.s-act-txt span { font-family: var(--police-mono); font-size: 12px; color: var(--sortie-pale); word-break: break-word; }
.s-act em { flex: none; font-style: normal; font-size: 11px; color: var(--sortie-pale); }
/* la sortie d'une action ou d'une cellule */
.s-sortie { background: var(--sortie-fond); border: 1px solid var(--sortie-bord); border-radius: 6px; overflow: hidden; }
.s-sortie-tete { padding: 5px 10px; background: var(--grille-tete); font: 600 11px/1.6 'Segoe UI', Arial, sans-serif; color: var(--sortie-pale); }
.s-sortie pre {
  margin: 0; padding: 10px 12px; font: 13px/1.55 var(--police-mono); color: var(--sortie-texte);
  white-space: pre-wrap; word-break: break-word;
  animation: monte 360ms ease 300ms backwards;
}

/* Le code cite dans le titre de la console garde SA casse : en capitales,
   « dd/MM/yyyy » devenait « DD/MM/YYYY », un autre format. */
.console-tete .ct-code { text-transform: none; font: 600 12px/1 var(--police-mono); letter-spacing: 0; color: var(--texte); }

/* « La version Pro arrive bientôt » — tant que PRO_OUVERT est faux (etat.js). */
.pro-bientot {
  display: flex; gap: 12px; align-items: center; margin: -8px 0 6px; padding: 14px 16px;
  border-radius: var(--r-l); border: 1.5px dashed var(--or); background: var(--surface);
  animation: entre-bas 520ms var(--ressort) 200ms backwards;
}
.pro-bientot .pb-robot { flex: none; animation: r-entre 600ms var(--ressort) 400ms backwards; }
.pro-bientot b { display: block; font-size: 16px; font-weight: 800; color: var(--or); margin-bottom: 4px; }
.pro-bientot p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--texte-2); }
.pro-bientot.secoue { animation: secoue 420ms ease; }

/* Connexion par Google seulement (02/10/2026) : un seul grand bouton. */
.serv.seul { width: 100%; justify-content: center; padding: 15px 18px; font-size: 16px; gap: 10px; }
.serv.seul i { font-size: 19px; }