/* ==========================================================================
   Requête — thème « Ludique » (redesign complet)
   Chargé en tout dernier, après design-premium.css et les finitions iOS.

   Idées directrices
   - Des objets qu'on a envie de toucher : les boutons et les cartes
     cliquables ont un relief (une lèvre sous le bord) et s'enfoncent à
     l'appui. Les blocs d'information, eux, restent à plat.
   - Une police de titre avec du caractère (Bricolage Grotesque, embarquée),
     la police système pour lire les leçons.
   - Pas de sur-titres en capitales : des étiquettes en casse normale.
   - Une seule couleur de marque, le violet, y compris pour « fait » et
     « validé ». Le vert ne sert qu'à « bonne réponse », l'orange qu'à la
     série et aux retards, le rouge qu'aux erreurs.
   - Le fond lilas porte des surfaces blanches bordées, sans ombres grises.
   - Aucune animation d'entrée rejouée à chaque rendu : on n'anime que ce
     que la personne déclenche (appui, ouverture, réussite).

   Tout est limité à html.lq : retirer cette classe rend l'ancien thème.
   ========================================================================== */
/* SOMMAIRE (10 novembre). Pour aller à une partie, cherche « ---------- N. » (les numéros suivent l’ordre où elles ont été ajoutées,
   pas les écrans ; certains reviennent pour des retouches). Les parties sans numéro, plus bas, portent la date de la demande.
   0. Police de titre
   1. Jetons
   2. Fond et texte
   3. Grands titres et en-têtes
   4. Étiquettes : casse normale, police de titre
   5. Boutons
   6. Cartes
   7. Barre d'onglets : gardée telle quelle, juste accordée
   8. Bouton ✎ flottant
   10. Accueil
   11. Chemin des modules
   12. Pièces communes des rubriques
   13. Pratiquer et Bibliothèque : tuiles
   14. Parcours
   15. Jouer
   16. Mon compte
   17. Défis
   18. Console, Notes
   19. Cartes mémo, Entretien
   20. Leçons : cadre, étapes, titres
   21. Code : cadres, éditeur, résultats
   22. Barre d'action du bas
   23. Quiz
   24. Retours : réussi / à corriger
   25. Fin de leçon
   26. Moments de réussite
   27. Premiers pas
   29. Feuilles
   28. Plus de capitales forcées : étiquettes en casse normale
   96. Moins de couleurs
   97. Fluidité : pas de clignotement
   98. Petits écrans
   99. Mouvement réduit
   17. Progression : graphiques
   30. Stickers
   31. Mascotte en autocollant
   32. Derniers écarts avec la vitrine
   33. Barre de touches SQL
   34. Cours en vidéo : la page du cours dans la DA de la vitrine
   35. Lecteur des cours en vidéo : le fond violet de la vitrine
   36. Feuilles, page d’un projet, question d’entretien, pas à pas : la…
   37. Accueil, page du cours, chargement : finitions de la DA
   38. L’appui : chaque bouton répond
   39. Feuilles, page d’un projet, épingles, enregistrement
   40. L’écran de fin du cours en vidéo : « Encore un effort ! », « Leçon…
   41. Le schéma d’un projet : la DA de la vitrine, et ce qui change se voit
   42. Défis : la salle seule, le chrono qui monte, les points, le podium
   43. Barre « Insérer », boutons d’une note, pastilles des modules, page…
   44. Les pages de l’appli dans la DA de la vitrine
   45. La fiche d’une carte mémo dans la DA de la vitrine
   46. Défis : « Tes performances », et le trait de la salle
   47. Retours du 31 octobre, 8 h 37
   48. Retours du 31 octobre, 15 h 16
   49. Retours du 31 octobre, 15 h 52
   50. Retours du 31 octobre, 16 h 29 : la manche, épurée
   51. Retours du 31 octobre, 16 h 49
   52. Retours du 31 octobre, 17 h 39 : le barème en paliers
   62. Cartes mémo : « Scène à collectionner »
   62. Cartes mémo : « Scène à collectionner »
   63. Stickers : l’étiquette de rareté
   63. Le bilan, en chapitres
   64. Les cartes de l’album, sur tous les iPhone
   65. La croix des recherches
   66. Le lecteur des cours, sur tous les iPhone */

/* ---------- 0. Police de titre (OFL, sous-ensemble latin) ----------
   « optional » : la police est préchargée et mise en cache ; si elle n'est
   pas prête au tout premier affichage, la police système reste en place pour
   cette visite, sans permutation en cours de route (pas de titres qui
   sautent ni de clignotement). */
@font-face{font-family:'Bricolage Grotesque';src:url(assets/fonts/bricolage-grotesque-regular.woff2) format('woff2');font-weight:300 550;font-style:normal;font-display:optional}
@font-face{font-family:'Bricolage Grotesque';src:url(assets/fonts/bricolage-grotesque-bold.woff2) format('woff2');font-weight:551 900;font-style:normal;font-display:optional}
/* Elisa, 1er novembre, 19 h 04 : « homogénéiser l’écriture, la taille et la police entre l’app et le site ». L’app prend les polices
   du site : Inter pour le texte (au lieu de la police système, SF Pro sur Apple), JetBrains Mono pour le code (au lieu de SF Mono),
   Bricolage Grotesque pour les titres, avec les mêmes fichiers (assets/fonts) et les mêmes graisses. */
@font-face{font-family:'Inter';src:url(assets/fonts/inter-medium.woff2) format('woff2');font-weight:300 550;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url(assets/fonts/inter-semibold.woff2) format('woff2');font-weight:551 650;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url(assets/fonts/inter-bold.woff2) format('woff2');font-weight:651 760;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url(assets/fonts/inter-extrabold.woff2) format('woff2');font-weight:761 900;font-style:normal;font-display:swap}
@font-face{font-family:'JBM';src:url(assets/fonts/jetbrains-mono.woff2) format('woff2');font-weight:100 800;font-style:normal;font-display:swap}

/* ---------- 1. Jetons ---------- */
html.lq{
  --display:'Bricolage Grotesque','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:'JBM','JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --bg:#F4F2FC;
  --surface:#FFFFFF;
  --surface-2:#F1EEFC;
  --surface-elevated:#FFFFFF;
  --ink:#221C46;
  --ink-2:#4E4872;
  --ink-3:#6A6490;
  --line:#E6E1F6;
  --line-2:#EFECFA;
  --hairline:#E6E1F6;
  --card-border:#E6E1F6;
  --lip:#DCD5F2;

  --accent:#6A4DF4;
  --accent-2:#8B6CFF;
  --accent-soft:#EEE9FF;
  --accent-ink:#5335E0;
  --accent-lip:#4B30CC;
  --accent-grad:linear-gradient(135deg,#7C5CFF,#6A4DF4);

  --success:#0F7A3A;
  --success-fill:#169447;
  --success-lip:#0F7337;
  --success-soft:#E2F6EA;
  --danger:#C2323A;
  --danger-fill:#EF4F55;
  --danger-lip:#C4363B;
  --danger-soft:#FDEBEC;
  --warn:#B45309;
  --warn-fill:#FFB020;
  --warn-soft:#FFF3DC;
  --flame-a:#FFD23F;
  --flame-b:#FF7A00;
  --flame-lip:#E05E00;

  --code-bg:#1E1A3B;
  --code-bg-2:#28234D;
  --code-ink:#EFEBFF;
  /* Code : deux teintes seulement. Mots SQL en lilas, valeurs en jaune. */
  --t-kw:#C9BCFF;
  --t-fn:#C9BCFF;
  --t-str:#FFE08A;
  --t-num:#FFE08A;
  --t-com:#9C96C4;

  --p-radius:22px;
  --p-radius-sm:16px;
  --p-shadow:none;
  --p-shadow-lift:none;
  --card-shadow:none;
  --card-shadow-sm:none;
  --lift-sm:none;
  --lift-md:none;

  --fs-hero:34px;
  --fs-title:22px;
  --tracking-hero:-.025em;
  --tracking-tight:-.012em;

  --press:cubic-bezier(.3,.7,.4,1.5);
  --pop:cubic-bezier(.34,1.56,.64,1);
}

/* Couleur de module (data-mc) : le violet partout, pour rester sobre. */
html.lq,html.lq [data-mc]{--m:#6A4DF4;--m-lip:#4B30CC;--m-soft:#EFEAFF;--m-mid:#B8A6FF;--m-ink:#5335E0}

/* ---------- 2. Fond et texte ---------- */
html.lq,html.lq body{background:var(--bg)}
html.lq body{color:var(--ink)}
html.lq #app,html.lq #app .screen,html.lq #app #scr-learn{background:var(--bg)}

/* ---------- 3. Grands titres et en-têtes ---------- */
html.lq #app .lgtitle h1{
  font-family:var(--display);font-weight:700;font-size:34px;line-height:1.04;
  letter-spacing:-.025em;color:var(--ink);
}
html.lq #app .lgtitle .sub{font-size:15.5px;line-height:1.45;color:var(--ink-2);font-weight:450;letter-spacing:0}
/* Un titre très long sans espace (nom de projet importé, ex. « Dictionnaire_Bpifrance_Glossaire… ») passe à la ligne
   au lieu de déborder de l'écran ; au-delà de 18 caractères il est aussi un peu plus petit. */
html.lq #app .lgtitle>div{min-width:0}
html.lq #app .lgtitle h1{overflow-wrap:anywhere;hyphens:none}
html.lq #app .lgtitle h1.is-long{font-size:26px;line-height:1.12}
html.lq #app .lgtitle .sub{overflow-wrap:anywhere}
/* Exemples de la console : le défilement aimanté ne cale plus le premier exemple contre le bord de l'écran. */
html.lq #scr-console .chips{scroll-padding-left:14px;scroll-padding-right:14px}
html.lq #app .p-bar-title{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.01em}
/* Barre compacte opaque : pas de texte fantôme dessous, et pas de flou à
   recalculer à chaque image du défilement (plus fluide sur iPhone). */
html.lq #app .screen.p-scrolled>.p-bar,
html.lq #app .screen.p-lift>.p-bar{
  background:var(--bg);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 2px 0 var(--line);
}
/* Barre compacte : quand le titre y apparaît, le libellé du retour s'efface
   (la pastille reste) pour que les deux ne se chevauchent jamais, même avec
   un libellé long comme « Bibliothèque ». */
html.lq #app .p-bar-title{max-width:calc(100% - 136px)}
html.lq #app .screen>.home-back span{transition:opacity .16s ease}
html.lq #app .screen.p-scrolled>.home-back span{opacity:0}
/* Bande sous l'heure et la batterie (iPhone, app installée) : le contenu qui
   défile ne passe plus sous la barre d'état. Hauteur nulle dans Safari. */
html.lq #app::before{content:'';position:absolute;left:0;right:0;top:0;height:var(--safe-top);background:var(--bg);z-index:28;pointer-events:none}
/* Retour : pastille ronde en relief + libellé */
html.lq #app .home-back{color:var(--accent-ink);font-weight:650;font-size:16px;letter-spacing:-.01em;gap:8px}
html.lq #app .home-back svg{
  /* overflow visible : Safari coupe l’ombre d’un <svg> (overflow hidden par défaut), la pastille perdait son relief en bas (Elisa, 25 octobre, 16 h 56) */
  overflow:visible;box-sizing:content-box;width:9px;height:15px;padding:7px 10px 7px 9px;
  border-radius:50%;background:#fff;border:2px solid var(--line);
  box-shadow:0 3px 0 var(--lip);
  transition:transform .12s var(--press),box-shadow .12s;
}
html.lq #app .home-back:active{opacity:1}
html.lq #app .home-back:active svg{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
html.lq #app .home-back span{font-family:var(--display);font-weight:700}
/* Entretien, une question ouverte : le retour « Questions » n’a plus de bandeau gris à lui, il se pose sur le fond comme
   sur les autres écrans (Elisa, 29 octobre, 18 h 43 : « le bouton en haut à gauche est bizarre et ne se fond pas »).
   La barre du haut devient opaque dès que le contenu défile dessous, et « Questions » reste affiché. */
html.lq #app #scr-entretien.ent-focus-mode>.home-back{
  width:max-content;max-width:60%;height:calc(var(--safe-top) + 44px);min-height:0;
  /* À droite, la même place que les autres retours (Elisa, 31 octobre, 15 h 16, réf. 1 : « le bouton n’a pas assez d’espace ») */
  padding:var(--safe-top) 26px 0 16px;background:transparent;border-bottom:0;box-shadow:none;
}
html.lq #app #scr-entretien.ent-focus-mode.p-scrolled>.home-back span{opacity:1}
html.lq #app #scr-entretien.ent-focus-mode>.p-bar .p-bar-title{display:none}


/* ---------- 4. Étiquettes : casse normale, police de titre ---------- */
html.lq .journey-kicker,
html.lq .def-focus-kicker,
html.lq .ent-hero-kicker,
html.lq .ent-list-kicker,
html.lq .account-settings-group-title,
html.lq .plan-next-session>small,
html.lq .pl-week-heading>div:first-child>span,
html.lq .home-section-head>div>span,
html.lq .notes-overview-copy small,
html.lq .coll-overview-copy small,
html.lq .coll-overview-next small,
html.lq .console-projects-head small,
html.lq .def-list-head p,
html.lq .l-kicker,
html.lq .sect-label,
html.lq .h2-eye,
html.lq .consigne .tag,
html.lq .qtag,
html.lq .sommaire-t,
html.lq .jeu-lab,
html.lq .qf-bank-h,
html.lq .sit-memo-lab,
html.lq .pl-overview-copy>small,
html.lq .def-focus-level,
html.lq .journey-step-copy .journey-kicker{
  font-family:var(--display)!important;
  text-transform:none!important;
  letter-spacing:-.005em!important;
  font-size:14px!important;
  font-weight:700!important;
  color:var(--accent-ink)!important;
}

/* ---------- 5. Boutons ---------- */
/* Principal : violet plein, lèvre sombre, s'enfonce à l'appui */
html.lq .journey-primary,
html.lq .def-focus-cta,
html.lq .ent-hero-cta,
html.lq .notes-hub-new,
html.lq .btn-run,
html.lq .next-btn,
html.lq .ob-cta,
html.lq .plan-next-actions>button:first-child,
html.lq .coll-overview-next button,
html.lq .ls-nav .ls-next,
html.lq .ijl-next,
html.lq .pdefi-check,
html.lq #scr-lesson .bravo-go,
html.lq .ent-reveal-primary,
html.lq .pl-adjust-apply,
html.lq .dp-go,
html.lq .lq-btn{
  position:relative;
  background:var(--accent)!important;background-image:none!important;
  color:#fff!important;border:0!important;border-radius:16px!important;
  min-height:54px;
  font-family:var(--display)!important;font-weight:700!important;font-size:17px!important;letter-spacing:0!important;
  box-shadow:0 4px 0 var(--accent-lip)!important;
  transform:translateY(0);
  transition:transform .12s var(--press),box-shadow .12s var(--press),filter .15s,background-color .2s!important;
  -webkit-tap-highlight-color:transparent;
}
html.lq .journey-primary:active,
html.lq .def-focus-cta:active,
html.lq .ent-hero-cta:active,
html.lq .notes-hub-new:active,
html.lq .btn-run:active,
html.lq .next-btn:active,
html.lq .ob-cta:active,
html.lq .plan-next-actions>button:first-child:active,
html.lq .coll-overview-next button:active,
html.lq .ls-nav .ls-next:active,
html.lq .ijl-next:active,
html.lq .pdefi-check:active,
html.lq #scr-lesson .bravo-go:active,
html.lq .ent-reveal-primary:active,
html.lq .pl-adjust-apply:active:not(:disabled),
html.lq .dp-go:active,
html.lq .lq-btn:active{
  transform:translateY(4px)!important;opacity:1!important;
  box-shadow:0 0 0 var(--accent-lip)!important;
}
/* Les flèches « › » ne servent plus dans un bouton en relief */
html.lq .journey-primary>svg:last-child,
html.lq .def-focus-cta>svg:last-child,
html.lq .ent-hero-cta>svg:last-child{display:none}

/* Secondaire : blanc bordé, lèvre lilas */
html.lq .plan-next-actions>button+button,
html.lq .journey-planning button,
html.lq .account-connect,
html.lq .jeu-btn,
html.lq .ux-card-review,
html.lq .ls-nav .ls-prev,
html.lq .qf-reset,
html.lq .lq-btn-2{
  background:#fff!important;background-image:none!important;
  color:var(--accent-ink)!important;
  border:2px solid var(--line)!important;border-radius:16px!important;
  font-family:var(--display)!important;font-weight:700!important;letter-spacing:0!important;
  box-shadow:0 4px 0 var(--lip)!important;
  transform:translateY(0);
  transition:transform .12s var(--press),box-shadow .12s var(--press),background-color .2s!important;
}
html.lq .plan-next-actions>button+button:active,
html.lq .journey-planning button:active,
html.lq .account-connect:active,
html.lq .jeu-btn:active,
html.lq .ux-card-review:active,
html.lq .ls-nav .ls-prev:active,
html.lq .qf-reset:active,
html.lq .lq-btn-2:active{
  transform:translateY(4px)!important;box-shadow:0 0 0 var(--lip)!important;
}

/* Désactivé : gris plat, sans relief */
html.lq .ob-cta:disabled,
html.lq .next-btn:disabled,
html.lq .btn-run:disabled,
html.lq .ls-nav .ls-next:disabled,
html.lq .ls-nav .ls-next[aria-disabled="true"],
html.lq .ls-nav .ls-next.locked{
  background:#E4E0F0!important;color:#6F6A8C!important;
  box-shadow:0 4px 0 #D3CEE4!important;opacity:1!important;
}

/* ---------- 6. Cartes ---------- */
/* Information : blanc bordé, à plat */
html.lq .account-identity,
html.lq .account-settings-list,
html.lq .console-quick-actions,
html.lq .console-project-list,
html.lq .def-focus,
html.lq .def-list,
html.lq .ent-hero,
html.lq .ent-group,
html.lq .notes-overview,
html.lq .notes-empty,
html.lq .coll-overview,
html.lq .coll-module,
html.lq .plan-next-session,
html.lq .wk-chrome,
html.lq .day-panel,
html.lq .planning-progress,
html.lq .pl-overview,
html.lq .plan-modules,
html.lq .consigne,
html.lq .quiz-card,
html.lq .qcard,
html.lq .jeu-card,
html.lq .journey-spotlight,
html.lq #scr-lesson .concept-block,
html.lq #scr-lesson .concept-block.lesson-lead,
html.lq #scr-lesson .sommaire,
html.lq #scr-lesson .bravo-recap,
html.lq #scr-lesson .bravo-hero,
html.lq .qcm-card{
  background:var(--surface)!important;background-image:none!important;
  border:2px solid var(--line)!important;
  border-radius:var(--p-radius)!important;
  box-shadow:none!important;
}

/* ---------- 7. Barre d'onglets : gardée telle quelle, juste accordée ---------- */
html.lq #app>.tabbar.tabbar{
  background:#fff;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-top:2px solid var(--line);
}
html.lq #app>.tabbar .tab{color:#77729A}
html.lq #app>.tabbar .tab.active{color:var(--accent)}
html.lq #app>.tabbar .tab.active svg{animation:lqTabPop .32s ease-out}
/* Cinq destinations : libellés lisibles, toujours sur une ligne */
html.lq #app>.tabbar .tab{font-family:var(--display);font-size:11px!important;font-weight:700;letter-spacing:0!important}
html.lq #app>.tabbar .tab-label{max-width:none!important;white-space:nowrap!important;min-height:0!important;height:auto!important;overflow:visible!important}
@keyframes lqTabPop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
/* Onglet Compte : l'initiale de la personne en guise d'icône, pleine quand
   l'onglet est ouvert. */
html.lq #app>.tabbar .tab-avatar{
  flex:none;width:24px;height:24px;margin:1px;box-sizing:border-box;border-radius:50%;
  display:grid;place-items:center;border:2px solid currentColor;
  font:700 11px/1 var(--display);letter-spacing:0;
}
html.lq #app>.tabbar .tab.active .tab-avatar{background:var(--accent);border-color:var(--accent);color:#fff;font-size:12px;animation:lqTabPop .32s ease-out}
/* Onglet ouvert : une pastille douce derrière l’icône, qui s’étire en arrivant ; l’icône et le libellé passent
   à la couleur de l’app. Les autres onglets restent tous gris, Planning compris : quand des activités sont à
   replacer, un petit point le signale sur son icône, au lieu de la colorer comme un onglet ouvert (Elisa,
   26 octobre, 23 h 16 : « le planning en violet et les autres en gris, ça fait bizarre »). */
html.lq #app>.tabbar .tab{position:relative;color:#7A7596}
html.lq #app>.tabbar .tab::before{
  content:"";display:block;position:absolute;left:50%;top:1px;z-index:0;
  width:min(60px,calc(100% - 8px));height:32px;border-radius:999px;
  background:var(--accent-soft,#ECEAFD);box-shadow:none;
  transform:translateX(-50%) scaleX(.45);opacity:0;
  transition:transform .34s cubic-bezier(.34,1.5,.64,1),opacity .18s ease-out;
}
html.lq #app>.tabbar .tab.active::before{transform:translateX(-50%) scaleX(1);opacity:1}
html.lq #app>.tabbar .tab>svg,html.lq #app>.tabbar .tab-avatar,html.lq #app>.tabbar .tab-label{position:relative;z-index:1}
html.lq #app>.tabbar .tab.active{color:var(--accent)}
html.lq #app>.tabbar .tab.active .tab-label{font-weight:800}
html.lq #app>.tabbar .tab.has-late:not(.active)>svg{color:inherit}
html.lq #app>.tabbar .tab.has-late:not(.active)::after{
  content:"";position:absolute;z-index:2;top:3px;left:calc(50% + 7px);
  width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2.5px #fff;
}
html.lq #app>.tabbar .tab-avatar{border-width:1.8px}
@media (prefers-reduced-motion:reduce){html.lq #app>.tabbar .tab::before{transition:opacity .15s linear}}
/* Cinq colonnes égales à toutes les largeurs : les icônes sont espacées régulièrement, et l’onglet ouvert garde sa pastille loin du
   bord (Elisa, 31 octobre, 0 h 40 : « problème d’espacement »). Avant, sous 380 px, chaque onglet prenait la largeur de son libellé :
   les écarts variaient d’un onglet à l’autre, et dès que les libellés ne tenaient plus, « Accueil » et « Compte » débordaient de
   l’écran. Le libellé rapetisse un peu avec l’écran (11 px, puis jusqu’à 10 px vers 330 px) : « Bibliothèque », le plus long,
   tient dans sa colonne ; au pire il mord sur la marge de ses voisins, qui ont des libellés courts, jamais sur le bord. */
html.lq #app>.tabbar .tab{flex:1 1 0!important;min-width:0!important;font-size:clamp(10px,3vw,11px)!important}

/* ---------- 8. Bouton ✎ flottant ---------- */
html.lq body:not(.in-lesson) .fab{
  background:var(--accent)!important;border-radius:18px!important;
  box-shadow:0 4px 0 var(--accent-lip),0 12px 24px -12px rgba(75,48,204,.6)!important;
  transition:transform .12s var(--press),box-shadow .12s!important;
}
html.lq body:not(.in-lesson) .fab:active{transform:translateY(4px)!important;box-shadow:0 0 0 var(--accent-lip),0 6px 14px -10px rgba(75,48,204,.6)!important}
html.lq body.in-lesson .fab{
  background:#fff!important;color:var(--accent)!important;border:2px solid var(--line)!important;
  border-radius:14px!important;box-shadow:0 3px 0 var(--lip)!important;
}

/* ---------- 10. Accueil ---------- */
html.lq #scr-learn>.lgtitle{padding:calc(var(--safe-top) + 12px) 20px 0;min-height:0}
html.lq #scr-learn>.lgtitle .journey-brand{font-family:var(--display)!important;font-size:19px!important;font-weight:700!important;letter-spacing:-.01em!important;gap:10px}
html.lq #scr-learn>.lgtitle .journey-brand::before{width:34px;height:34px;border-radius:11px;background:var(--accent);box-shadow:0 3px 0 var(--accent-lip);font:700 13px/1 var(--mono)}
html.lq #home-hero{padding:0 20px}

/* En-tête : le salut est le grand titre (« Bonsoir, Elisa »), puis la séance */
html.lq .lq-heading{margin:14px 0 14px}
html.lq .lq-hi-title{margin:0 0 6px;font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-.025em;line-height:1.06;color:var(--ink);overflow-wrap:anywhere}
html.lq .lq-hi-title .lq-nw{white-space:nowrap}
html.lq .lq-heading .journey-session-meta{font-size:14.5px;color:var(--ink-2)}
html.lq .lq-heading .journey-session-meta>span{font-weight:550}

/* Série : une seule ligne, la flamme, le compte et les 7 jours */
html.lq .lq-streak{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;width:100%;margin:0 0 14px;padding:10px 12px;box-sizing:border-box;
  border:2px solid var(--line);border-radius:20px;background:#fff;
  box-shadow:0 3px 0 var(--lip);text-align:left;font:inherit;color:inherit;cursor:pointer;
  transition:transform .12s var(--press),box-shadow .12s var(--press);
}
html.lq .lq-streak:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
html.lq .lq-streak:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
html.lq .lq-streak-flame{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:#FFF0DC}
html.lq .lq-streak-flame svg{width:24px;height:24px;transform-origin:50% 90%;animation:lqFlicker 3.4s ease-in-out infinite}
/* Pas encore de flamme (Elisa, 31 octobre, 0 h 40 : « ça fait trop gris sombre quand il n’y a pas encore de flamme ») : la case de la
   flamme est pêche, la flamme pâle mais chaude, prête à s’allumer ; les jours sans flamme sont des ronds blancs à peine cerclés,
   plus des pastilles gris-lilas. */
html.lq .lq-streak:not(.is-on) .lq-streak-flame{background:linear-gradient(160deg,#FFF7EA,#FFEBD2);box-shadow:inset 0 0 0 1.5px #FFE0BD}
html.lq .lq-streak:not(.is-on) .lq-streak-flame svg{animation:none}
html.lq .lq-streak svg .f-o{fill:var(--flame-b)}
html.lq .lq-streak svg .f-i{fill:var(--flame-a)}
html.lq .lq-streak:not(.is-on) .lq-streak-flame .f-o{fill:#FFC58C}
html.lq .lq-streak:not(.is-on) .lq-streak-flame .f-i{fill:#FFEBC4}
html.lq .lq-streak-copy{flex:none;display:flex;flex-direction:column;gap:3px;min-width:0}
html.lq .lq-streak-copy b{font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1;color:var(--ink);white-space:nowrap}
html.lq .lq-streak-copy small{font-size:12px;line-height:1;color:var(--ink-2);white-space:nowrap}
html.lq .lq-week{flex:1 1 auto;display:flex;justify-content:space-between;gap:4px;min-width:0}
html.lq .lq-day{flex:0 1 26px;min-width:19px;display:flex;flex-direction:column;align-items:center;gap:3px}
html.lq .lq-day i{position:relative;width:26px;max-width:100%;height:auto;aspect-ratio:1/1;box-sizing:border-box;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:inset 0 0 0 1.5px #ECE7FA;font-style:normal}
html.lq .lq-day i svg{width:15px;height:15px;transform-origin:50% 90%}
html.lq .lq-day small{font:700 10px/1 var(--display);color:var(--ink-3)}
html.lq .lq-day.is-done i{background:#FFEAD1;box-shadow:none}
html.lq .lq-day.is-missed .f-o{fill:#E3DDF5}
html.lq .lq-day.is-missed .f-i{fill:#F4F1FC}
html.lq .lq-day.is-today i{background:#FFF9F1;border:2px dashed #FF9A3D;box-shadow:none}
html.lq .lq-day.is-today .f-o{fill:#FFD5AE}
html.lq .lq-day.is-today .f-i{fill:#FFF0DF}
html.lq .lq-day.is-now small{color:var(--ink)}
html.lq .lq-day.is-rest .f-m{fill:#B9B1DC}
html.lq .lq-day.is-future i{background:transparent;border:1.5px dashed #E2DCF5;box-shadow:none}
html.lq .lq-day.is-future .f-o{fill:#E9E5F6}
html.lq .lq-day.is-future .f-i{fill:#F4F2FB}
html.lq .lq-streak:active .lq-day.is-done svg{animation:lqWiggle .5s ease both}
/* Des flammes vivantes (Elisa, 29 octobre, 18 h 07 : « anime les flammes »). La grande flamme danse, son cœur jaune palpite, un halo
   chaud respire autour d’elle et deux étincelles s’envolent ; les flammes des jours faits dansent en vague, chacune avec son décalage. */
html.lq .lq-streak.is-on .lq-streak-flame{position:relative;overflow:visible;animation:lqHalo 2.4s ease-in-out infinite}
html.lq .lq-streak.is-on .lq-streak-flame svg{animation:lqDance 1.7s ease-in-out infinite}
html.lq .lq-streak.is-on .lq-streak-flame .f-i,html.lq .lq-day.is-done .f-i{transform-box:fill-box;transform-origin:50% 100%;animation:lqCore 1.15s ease-in-out infinite}
html.lq .lq-streak.is-on .lq-streak-flame::before,html.lq .lq-streak.is-on .lq-streak-flame::after{content:"";position:absolute;left:50%;top:6px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#FFB347;opacity:0;pointer-events:none;animation:lqSpark 2.2s ease-out infinite}
html.lq .lq-streak.is-on .lq-streak-flame::after{width:3px;height:3px;background:#FFD23F;animation-delay:1.1s;animation-duration:2.6s}
html.lq .lq-day.is-done i svg{animation:lqDance 1.9s ease-in-out infinite;animation-delay:calc(var(--d,0) * -.27s)}
html.lq .lq-day.is-done .f-i{animation-delay:calc(var(--d,0) * -.19s)}
@keyframes lqDance{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-5deg) scale(1.05,.95)}50%{transform:rotate(3deg) scale(.96,1.07)}75%{transform:rotate(-2deg) scale(1.03,.98)}}
@keyframes lqCore{0%,100%{transform:scale(1)}30%{transform:scale(.86,1.14)}60%{transform:scale(1.08,.9)}}
@keyframes lqHalo{0%,100%{box-shadow:0 0 0 0 rgba(255,138,30,0)}50%{box-shadow:0 0 14px 3px rgba(255,138,30,.32)}}
@keyframes lqSpark{0%{opacity:0;transform:translate(0,0) scale(1)}15%{opacity:1}100%{opacity:0;transform:translate(6px,-18px) scale(.4)}}
@media (prefers-reduced-motion:reduce){html.lq .lq-streak-flame,html.lq .lq-streak-flame svg,html.lq .lq-streak-flame .f-i,html.lq .lq-day svg,html.lq .lq-day .f-i,html.lq .lq-streak-flame::before,html.lq .lq-streak-flame::after{animation:none!important}}

/* Carte « Reprendre » à la couleur du module */
html.lq .lq-hero{
  position:relative;margin:0 0 20px;padding:18px;border:0!important;border-radius:28px;color:#fff;
  background:
    radial-gradient(130px 130px at 94% 6%,rgba(255,255,255,.2),transparent 70%),
    radial-gradient(200px 150px at -4% 108%,rgba(255,255,255,.14),transparent 70%),
    var(--m);
  box-shadow:0 6px 0 var(--m-lip);
}
html.lq .lq-hero-main{display:flex;align-items:center;gap:12px;margin-top:12px}
html.lq .lq-hero-body{flex:1;min-width:0}
html.lq .lq-hero .mascot-stk{width:84px;margin:0 -6px 0 -4px;align-self:center}
/* Bulle juste au-dessus du chat, dans la colonne de l’autocollant : jamais sur le titre */
html.lq .lq-hero .mstk-bub{right:-4px;bottom:calc(100% + 4px);transform-origin:70% 130%}
html.lq .lq-hero .mstk-bub::after{right:28px}
/* Le raccourci « 😱 Tu supprimes Requête ? » (Elisa, 4 novembre, 9 h 19) : la bulle dit « Je t’avais dit que j’allais te retrouver ! »,
   plus large et plus longtemps, le temps de la lire (mascotDitRetrouve). */
html.lq .lq-hero .mascot-stk.is-retrouve .mstk-bub{max-width:150px}
html.lq .mascot-stk.is-hello.is-retrouve .mstk-bub{animation:mstkBub 5.4s ease-out .18s both}
html.lq .lq-hero-mod{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:4px 11px 4px 4px;border-radius:14px;background:rgba(255,255,255,.2);font:600 13px/1.25 var(--display);color:#fff}
html.lq .lq-hero-mod b{flex:none;align-self:flex-start;padding:3px 9px;border-radius:10px;background:#fff;color:var(--m-ink);font-weight:700}
html.lq .lq-hero-title{margin:0;font:700 34px/1.02 var(--display);letter-spacing:-.025em;color:#fff;overflow-wrap:anywhere}
html.lq .lq-hero-sub{margin:6px 0 0;font-size:15px;line-height:1.4;color:#fff;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
html.lq .lq-hero.is-complete .lq-hero-title{font-size:27px}
/* Bouton blanc en relief */
html.lq .lq-hero .lq-hero-cta{
  gap:10px;min-height:58px;border-radius:18px!important;
  background:#fff!important;color:var(--m-ink)!important;font-size:18px!important;
  box-shadow:0 5px 0 rgba(20,10,60,.24)!important;
}
html.lq .lq-hero .lq-hero-cta:active{transform:translateY(5px)!important;box-shadow:0 0 0 rgba(20,10,60,.24)!important}
html.lq .lq-hero-main+.lq-hero-cta{margin-top:18px}
html.lq .lq-play{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--m);color:#fff}
html.lq .lq-play svg{width:14px;height:14px;margin-left:2px}

/* Activités à replacer : toute la carte est un bouton (tons chauds, voir 14 bis) */
html.lq #home-hero .journey-planning{
  display:flex!important;align-items:center;gap:12px;width:100%;box-sizing:border-box;margin:0 0 16px;padding:14px!important;
  border:2px solid #FFD9A6!important;border-radius:22px!important;background:#FFF6E8!important;box-shadow:0 4px 0 #FFD9A6!important;
  color:var(--ink);font:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;
  transition:transform .12s var(--press),box-shadow .12s var(--press);
}
html.lq #home-hero .journey-planning:active{transform:translateY(4px);box-shadow:0 0 0 #FFD9A6!important}
html.lq #home-hero .journey-planning:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
html.lq #home-hero .journey-planning .journey-tool-icon{flex:none;width:50px!important;height:50px!important;margin:0!important;border-radius:16px!important;background:#fff!important;box-shadow:0 3px 0 #FFD9A6!important;display:grid!important;place-items:center}
html.lq #home-hero .journey-planning .journey-tool-icon svg{width:30px!important;height:30px!important}
html.lq #home-hero .jp-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
html.lq #home-hero .jp-copy b{display:block;margin:0;font:700 17px/1.2 var(--display);letter-spacing:-.01em;color:var(--ink)}
html.lq #home-hero .jp-copy small{display:block;margin:0;font-size:13.5px;line-height:1.35;font-weight:600;color:#9A5B13}
html.lq #home-hero .jp-chev{flex:none;width:40px;height:40px;box-sizing:border-box;border-radius:50%;background:#fff;border:2px solid #FFD9A6;box-shadow:0 3px 0 #FFD9A6;display:grid;place-items:center;color:#9A5B13}
html.lq #home-hero .jp-chev svg{width:16px;height:16px}

/* Raccourcis : deux tuiles en relief */
html.lq .journey-shortcuts{display:grid!important;grid-template-columns:1fr 1fr;gap:12px;padding:0!important;margin:0 0 6px}
html.lq .journey-shortcuts button,html.lq .journey-shortcuts button+button{
  display:flex!important;flex-direction:column;align-items:flex-start;gap:10px;min-height:0!important;padding:14px!important;
  border:2px solid var(--line)!important;border-radius:22px!important;background:#fff!important;box-shadow:0 4px 0 var(--lip)!important;
  text-align:left;transition:transform .12s var(--press),box-shadow .12s var(--press)!important;
}
html.lq .journey-shortcuts button:active{transform:translateY(4px)!important;box-shadow:0 0 0 var(--lip)!important}
html.lq .journey-shortcuts .journey-tool-icon{width:46px!important;height:46px!important;border-radius:15px!important;display:grid!important;place-items:center;color:var(--accent-ink)!important;background:var(--accent-soft)!important;box-shadow:none;margin:0!important}
html.lq .journey-shortcuts .journey-tool-icon svg{width:25px!important;height:25px!important;stroke:currentColor;stroke-width:2.1;fill:none;stroke-linecap:round;stroke-linejoin:round}
html.lq .journey-shortcuts b{display:block;font:700 16px/1.2 var(--display)!important;letter-spacing:-.01em;color:var(--ink)}
html.lq .journey-shortcuts small{display:block;margin-top:3px!important;font-size:13px!important;line-height:1.35;color:var(--ink-2)}

/* ---------- 11. Chemin des modules ---------- */
html.lq #scr-learn #modules{display:block;padding:18px 20px 28px;gap:0}
html.lq .home-catalog-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 14px}
html.lq .home-catalog-head>div>span{display:block;font:700 14px/1.2 var(--display)!important;letter-spacing:0!important;text-transform:none!important;color:var(--accent-ink)!important}
html.lq .home-catalog-head h2{margin:2px 0 2px!important;font:700 27px/1.08 var(--display)!important;letter-spacing:-.022em!important;color:var(--ink)!important}
html.lq #scr-learn .home-catalog-head p{margin:0;font-size:14px;line-height:1.4;color:var(--ink-2)}
html.lq #scr-learn .home-catalog-head .lq-search-toggle{
  flex:none;display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 14px;
  border:2px solid var(--line);border-radius:999px;background:#fff;color:var(--accent-ink);
  font:700 14px/1 var(--display);box-shadow:0 3px 0 var(--lip);
  transition:transform .12s var(--press),box-shadow .12s var(--press);
}
html.lq #scr-learn .home-catalog-head .lq-search-toggle svg{width:18px;height:18px}
html.lq #scr-learn .home-catalog-head .lq-search-toggle:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
html.lq #scr-learn .home-catalog-head .lq-search-toggle[aria-expanded="true"]{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 3px 0 var(--accent-lip)}
/* ---------- Les parcours (3 novembre, 19 h 01 : « Ok pour ça », sur la maquette) ----------
   Accueil, sous « Parcours SQL » : la rangée des parcours, SQL en violet, les suivants « À venir » en pointillés (comme une carte
   mémo pas encore débloquée) ; elle défile à l’horizontale. Page « Parcours » : SQL, puis les parcours à venir ; chacun ouvre sa
   page (alerte de sortie, vote). 19 h 48 : « les écritures et tout ça font tassé » : des pastilles sur deux lignes (le nom, puis
   l’état), des textes un peu plus grands, plus d’air entre les blocs, des colonnes de texte pleine largeur. */
html.lq #scr-learn .pc-head-sub{margin:-6px 0 14px;font:500 14px/1.45 var(--ui);color:var(--ink-2)}
html.lq .pc-chips{display:flex;gap:10px;margin:0 0 22px;padding:2px 0 8px;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
html.lq .pc-chips::-webkit-scrollbar{display:none}
html.lq .pc-chips>li{flex:none;display:flex;margin:0;padding:0}
html.lq .pc-chip{display:inline-flex;align-items:center;gap:10px;min-height:58px;box-sizing:border-box;margin:0;padding:8px 18px 8px 8px;border:2px dashed #C9BFF0;border-radius:20px;background:#fff;color:var(--ink);text-align:left;font:inherit;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s var(--press)}
html.lq .pc-chip:active{transform:translateY(2px)}
html.lq .pc-chip:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
html.lq .pc-chip-stk{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:13px;background:var(--surface-2);font-style:normal}
html.lq .pc-chip-stk svg{width:30px;height:30px}
html.lq .pc-chip-t{display:flex;flex-direction:column;gap:4px}
html.lq .pc-chip-t b{font:700 15px/1.1 var(--display);color:inherit}
html.lq .pc-chip-t small{display:flex;align-items:center;gap:5px;font:600 12px/1.15 var(--ui);color:var(--ink-2)}
html.lq .pc-chip.is-on{padding:10px 20px 10px 10px;border:0;background:var(--accent);box-shadow:0 4px 0 var(--accent-lip);color:#fff;cursor:default}
html.lq .pc-chip.is-on:active{transform:none}
html.lq .pc-chip.is-on .pc-chip-stk{background:rgba(255,255,255,.2)}
html.lq .pc-chip.is-on .pc-chip-t b{font-weight:800}
html.lq .pc-chip.is-on .pc-chip-t small{color:#fff;font-weight:700}
html.lq .pc-chip.is-on .pc-chip-t small::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--mint)}
html.lq .pc-chip.is-all{gap:6px;padding:0 16px 0 18px;border:2px solid var(--line);box-shadow:0 4px 0 var(--lip);color:var(--accent-ink);font:700 14px/1.2 var(--ui)}
html.lq .pc-chip.is-all:active{transform:translateY(3px);box-shadow:0 1px 0 var(--lip)}
html.lq .pc-chip.is-all svg{width:15px;height:15px}
html.lq #parcours-body{padding:16px 20px 32px}
html.lq .pc-view{display:flex;flex-direction:column;gap:16px;animation:pcIn .32s cubic-bezier(.2,.8,.3,1.1) both}
@keyframes pcIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
html.lq .pc-sec{margin:12px 0 -2px;font:800 12.5px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
html.lq .pc-sec:first-child{margin-top:0}
html.lq .pc-list{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
html.lq .pc-list>li{margin:0;padding:0}
html.lq .pc-card{display:flex;align-items:center;gap:16px;width:100%;box-sizing:border-box;margin:0;padding:16px;border:2px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 4px 0 var(--lip);color:var(--ink);text-align:left;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq .pc-card:active{transform:translateY(4px);box-shadow:0 0 0 var(--lip)}
html.lq .pc-card:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
html.lq .pc-card-stk{display:grid;place-items:center;flex:none;width:62px;height:62px;border-radius:18px;background:var(--surface-2);font-style:normal}
html.lq .pc-card-stk svg{width:46px;height:46px}
html.lq .pc-card.is-on .pc-card-stk{background:var(--accent);box-shadow:0 3px 0 var(--accent-lip)}
html.lq .pc-card-copy{display:flex;flex:1;min-width:0;flex-direction:column;align-items:flex-start;gap:8px}
html.lq .pc-card-copy b{font:700 17px/1.25 var(--display);color:var(--ink)}
html.lq .pc-card-top{display:flex;align-items:center;gap:8px}
html.lq .pc-card.is-on .pc-card-top b{font-size:20px;font-weight:800}
html.lq .pc-card-meta{display:flex;align-items:center;gap:6px;font:500 14px/1.3 var(--ui);color:var(--ink-2)}
html.lq .pc-card-meta svg{flex:none;width:17px;height:17px}
html.lq .pc-bar{display:block;align-self:stretch;height:8px;border-radius:999px;background:var(--line-2);overflow:hidden}
html.lq .pc-bar i{display:block;height:100%;border-radius:999px;background:var(--accent)}
html.lq .pc-card-copy small{font:600 13px/1.3 var(--ui);color:var(--ink-3)}
html.lq .pc-tag{padding:5px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font:700 12px/1 var(--ui);font-style:normal}
html.lq .pc-tag.is-on{background:var(--mint);color:#1B1640;font-weight:800}
html.lq .pc-card-go{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink)}
html.lq .pc-card-go svg{width:16px;height:16px}
html.lq .pc-card.is-soon{padding:14px 14px 14px 16px;border:2px dashed #C9BFF0;border-radius:22px;box-shadow:none}
html.lq .pc-card.is-soon:active{transform:translateY(2px);box-shadow:none}
html.lq .pc-card.is-soon .pc-card-stk{width:54px;height:54px;border-radius:16px}
html.lq .pc-card.is-soon .pc-card-stk svg{width:40px;height:40px}
html.lq .pc-bell{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink)}
html.lq .pc-bell svg{width:20px;height:20px}
html.lq .pc-bell.is-on{background:var(--accent);color:#fff;box-shadow:0 3px 0 var(--accent-lip)}
html.lq .pc-vote-cta{display:flex;align-items:center;gap:14px;width:100%;box-sizing:border-box;margin:6px 0 0;padding:18px 16px 18px 20px;border:0;border-radius:22px;background:var(--deep);box-shadow:0 5px 0 #3A22B0;color:#fff;text-align:left;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq .pc-vote-cta:active{transform:translateY(4px);box-shadow:0 1px 0 #3A22B0}
html.lq .pc-vote-cta:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
html.lq .pc-vote-cta>span{flex:1;min-width:0}
html.lq .pc-vote-cta b{display:block;font:800 17px/1.25 var(--display)}
html.lq .pc-vote-cta small{display:block;margin-top:5px;font:500 14px/1.4 var(--ui);color:#fff}
html.lq .pc-vote-cta em{flex:none;padding:13px 18px;border-radius:14px;background:var(--sun);box-shadow:0 3px 0 var(--sun-lip);color:#1B1640;font:800 15px/1 var(--display);font-style:normal}
/* La page d’un parcours à venir : son titre est dans la carte violette (le haut de la page « Parcours » s’efface). */
html.lq #scr-parcours.is-detail>.lgtitle,html.lq #app #scr-parcours.is-detail>.lgtitle.lq-head{display:none!important}
html.lq .pc-hero{position:relative;overflow:hidden;padding:20px 20px 24px;border-radius:28px;background:var(--deep);box-shadow:0 6px 0 #3A22B0;color:#fff}
html.lq .pc-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
html.lq .pc-hero-tag{display:inline-flex;padding:6px 11px;border-radius:10px;background:var(--sun);box-shadow:0 2px 0 var(--sun-lip);color:#1B1640;font:800 12.5px/1.2 var(--display);font-style:normal}
html.lq .pc-hero-k{margin:14px 0 0;font:800 12px/1.3 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--mint)}
html.lq .pc-hero-stk{display:block;flex:none;width:68px;height:68px;margin:-4px -2px 0 0;rotate:7deg;font-style:normal}
html.lq .pc-hero-stk svg{width:100%;height:100%}
html.lq .pc-hero h2{margin:10px 0 0;font:800 29px/1.1 var(--display);letter-spacing:-.01em;color:var(--sun)}
html.lq .pc-hero-sub{margin:10px 0 0;max-width:36ch;font:500 15px/1.5 var(--ui);color:#fff}
html.lq .pc-alert{display:flex;align-items:center;gap:16px;padding:18px 18px 18px 20px;border:2px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 4px 0 var(--lip);cursor:pointer;-webkit-tap-highlight-color:transparent}
html.lq .pc-alert-copy{flex:1;min-width:0}
html.lq .pc-alert-copy b{display:block;font:700 16.5px/1.25 var(--display);color:var(--ink)}
html.lq .pc-alert-copy small{display:block;margin-top:5px;font:500 14px/1.4 var(--ui);color:var(--ink-2)}
html.lq .pc-switch{-webkit-appearance:none;appearance:none;position:relative;flex:none;width:52px;height:32px;margin:0;border-radius:999px;background:#CFC8E8;cursor:pointer;transition:background .18s ease}
html.lq .pc-switch::before{content:"";position:absolute;left:3px;top:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(34,28,70,.25);transition:transform .2s cubic-bezier(.3,.7,.4,1.3)}
html.lq .pc-switch:checked{background:var(--accent)}
html.lq .pc-switch:checked::before{transform:translateX(20px)}
html.lq .pc-switch:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
html.lq .pc-vote{min-width:0;margin:0;padding:18px 18px 20px;border:2px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 4px 0 var(--lip)}
html.lq .pc-vote legend{float:left;width:100%;margin:0 0 6px;padding:0;font:800 17px/1.25 var(--display);color:var(--ink)}
html.lq .pc-vote-sub{clear:both;margin:0 0 16px;font:500 14px/1.45 var(--ui);color:var(--ink-2)}
html.lq .pc-opts{display:flex;flex-direction:column;gap:10px}
html.lq .pc-opt{display:flex;align-items:center;gap:12px;min-height:54px;box-sizing:border-box;padding:0 16px;border:2px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);font:600 15.5px/1.25 var(--ui);cursor:pointer;-webkit-tap-highlight-color:transparent}
html.lq .pc-opt input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--accent)}
html.lq .pc-opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft);font-weight:700}
html.lq .pc-opt:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
html.lq .pc-vote-go{display:flex;align-items:center;justify-content:center;width:100%;height:54px;margin:18px 0 0;border:0;border-radius:16px;background:var(--sun);box-shadow:0 5px 0 var(--sun-lip);color:#1B1640;font:800 16.5px/1 var(--display);cursor:pointer;transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq .pc-vote-go:active{transform:translateY(4px);box-shadow:0 1px 0 var(--sun-lip)}
html.lq .pc-vote-go:disabled{background:var(--surface-2);box-shadow:0 3px 0 var(--lip);color:var(--ink-2);cursor:default;transform:none}
html.lq .pc-vote-ok{margin:12px 0 0;font:700 14px/1.45 var(--ui);color:var(--accent-ink);text-align:center}
html.lq .pc-vote-ok:empty{display:none}
@media (max-width:374.98px){
  html.lq .pc-hero h2{font-size:26px}
  html.lq .pc-card{gap:12px;padding:14px}
  html.lq .pc-card-stk{width:54px;height:54px}
  html.lq .pc-card-stk svg{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){html.lq .pc-view{animation:none}html.lq .pc-switch,html.lq .pc-switch::before{transition:none}}
html[data-motion="reduce"].lq .pc-view{animation:none}
html.lq .catalog-tools{margin:0 0 16px;padding:14px;border:2px solid var(--line);border-radius:22px;background:#fff}
html.lq .catalog-tools .catalog-search{margin:0 0 12px}
html.lq .catalog-search label{font:700 14px/1.3 var(--display)!important;color:var(--ink)!important}
html.lq .catalog-search>div{border:2px solid var(--line)!important;border-radius:16px!important;background:var(--surface-2)!important;padding:4px 12px!important}
html.lq .catalog-search>div:focus-within{outline:0!important;border-color:var(--accent)!important;background:#fff!important;box-shadow:0 0 0 4px var(--accent-soft)}
html.lq .catalog-filters{margin:0!important;gap:8px}
html.lq .catalog-filters button{min-height:40px;padding:8px 12px;border:2px solid var(--line)!important;border-radius:999px!important;background:#fff!important;color:var(--ink-2)!important;font:700 13.5px/1 var(--display)!important;box-shadow:0 3px 0 var(--lip);transition:transform .12s var(--press),box-shadow .12s var(--press),background .15s}
html.lq .catalog-filters button:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
html.lq .catalog-filters button[aria-pressed="true"]{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;box-shadow:0 3px 0 var(--accent-lip)}
html.lq .catalog-filters button span{font:700 12px/1 var(--display)!important;opacity:.8}

/* Un module = une bannière en relief + son chemin de leçons */
html.lq #scr-learn #modules>.home-module{
  margin:0 0 14px!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;overflow:visible!important;
  animation:none!important;
}
html.lq #scr-learn #modules>.home-module:hover{transform:none}
html.lq .home-module-summary{
  display:grid!important;grid-template-columns:54px minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;
  column-gap:12px!important;row-gap:12px!important;align-items:center;min-height:0!important;padding:14px!important;
  border:2px solid var(--line);border-radius:24px;background:#fff!important;box-shadow:0 4px 0 var(--lip);
  transition:transform .12s var(--press),box-shadow .12s var(--press)!important;
}
html.lq .home-module-summary:hover{background:#fff!important}
html.lq .home-module-summary:active{transform:translateY(4px);box-shadow:0 0 0 var(--lip);background:#fff!important}
html.lq .home-module-summary:focus-visible{outline:3px solid var(--accent)!important;outline-offset:3px!important;border-radius:24px!important}
html.lq .home-module[open]>.home-module-summary{border-bottom:2px solid var(--line)!important}
html.lq .home-module-num{
  width:54px!important;height:54px!important;border-radius:17px!important;background:var(--accent-soft)!important;color:var(--accent-ink)!important;
  font:700 22px/1 var(--display)!important;box-shadow:none!important;display:grid!important;place-items:center;
}
html.lq .home-module.validated .home-module-num{background:var(--m)!important;color:#fff!important}
html.lq .home-module-num svg{width:26px!important;height:26px!important;stroke:#fff!important;stroke-width:3!important}
html.lq #scr-learn .home-module-copy small.lq-unit-k{display:block;margin:0 0 2px;font:700 12.5px/1.2 var(--display)!important;color:var(--m-ink)!important}
html.lq #scr-learn .home-module-copy b{font:700 17px/1.2 var(--display)!important;letter-spacing:-.012em!important;color:var(--ink)!important}
html.lq #scr-learn .home-module-copy small:not(.lq-unit-k){display:block;margin-top:3px;font-size:13px!important;line-height:1.35!important;color:var(--ink-2)!important}
/* Compteur (6/17) ou « Validé » au bout de la barre de progression : le
   titre garde toute la largeur, sans retour à la ligne sur petit écran. */
html.lq .home-module-side{display:contents!important}
html.lq .home-module-num{grid-row:1;grid-column:1}
html.lq .home-module-copy{grid-row:1;grid-column:2;min-width:0}
html.lq .home-module-chev{grid-row:1;grid-column:3;justify-self:end}
html.lq .home-module-count,html.lq .home-module-valid{grid-row:2;grid-column:3;justify-self:end;white-space:nowrap}
html.lq .home-module-count{padding:5px 9px!important;border-radius:999px!important;background:var(--m-soft)!important;color:var(--m-ink)!important;font:700 13px/1 var(--display)!important}
html.lq .home-module-valid{padding:5px 9px!important;border-radius:999px!important;background:var(--success-soft)!important;color:var(--success)!important;font:700 12.5px/1 var(--display)!important}
html.lq .home-module-chev{width:30px!important;height:30px!important;border-radius:50%!important;background:var(--surface-2)!important;color:var(--ink-2)!important;transition:transform .3s var(--pop)!important}
html.lq .home-module[open] .home-module-chev{transform:rotate(90deg)!important;background:var(--m-soft)!important;color:var(--m-ink)!important}
html.lq .home-module-progress{grid-row:2;grid-column:1/3!important;height:12px!important;border-radius:99px!important;background:var(--m-soft)!important;overflow:hidden}
html.lq .home-module-progress>i{position:relative;background:var(--m)!important;border-radius:99px!important;min-width:0;animation:none!important}
html.lq .home-module-progress>i::after{content:'';position:absolute;left:7px;right:7px;top:3px;height:3px;border-radius:3px;background:rgba(255,255,255,.4)}
/* Module en cours : bannière pleine */
html.lq .home-module.is-current>.home-module-summary{background:var(--m)!important;border-color:var(--m)!important;box-shadow:0 5px 0 var(--m-lip)}
html.lq .home-module.is-current>.home-module-summary:active{box-shadow:0 0 0 var(--m-lip)}
html.lq .home-module.is-current[open]>.home-module-summary{border-bottom-color:var(--m)!important}
html.lq .home-module.is-current .home-module-num{background:#fff!important;color:var(--m-ink)!important;box-shadow:0 4px 0 rgba(20,10,60,.2)!important}
html.lq .home-module.is-current .home-module-num svg{stroke:var(--m-ink)!important}
html.lq #scr-learn .home-module.is-current .home-module-copy small.lq-unit-k{color:#fff!important}
html.lq #scr-learn .home-module.is-current .home-module-copy b{color:#fff!important}
html.lq #scr-learn .home-module.is-current .home-module-copy small:not(.lq-unit-k){color:#fff!important}
html.lq .home-module.is-current .home-module-count{background:rgba(255,255,255,.22)!important;color:#fff!important}
html.lq .home-module.is-current .home-module-chev{background:rgba(255,255,255,.22)!important;color:#fff!important}
html.lq .home-module.is-current .home-module-progress{background:rgba(255,255,255,.26)!important}
html.lq .home-module.is-current .home-module-progress>i{background:#fff!important}
html.lq .home-module.is-current .home-module-progress>i::after{background:var(--m-mid)}

/* Leçons : pastilles sur un chemin sinueux */
html.lq #scr-learn #modules .home-module>.list{
  position:relative;margin:0;padding:22px 4px 6px 6px;background:none!important;border:0!important;
  border-radius:0!important;box-shadow:none!important;overflow:visible!important;animation:none!important;
}
html.lq .lq-path{position:absolute;left:0;top:0;z-index:0;overflow:visible;pointer-events:none}
html.lq .lq-path-base{fill:none;stroke:#DCD5F2;stroke-width:5;stroke-linecap:round;stroke-dasharray:.1 12}
html.lq .lq-path-done{fill:none;stroke:var(--m);stroke-width:6;stroke-linecap:round;opacity:.85}
/* Seules les pastilles ondulent ; les titres restent alignés sur une même
   colonne, pour une lecture droite sur téléphone. */
html.lq #scr-learn #modules .home-module .row{
  position:relative;z-index:1;display:grid!important;grid-template-columns:90px minmax(0,1fr);grid-template-areas:"n k" "n b";
  column-gap:12px;align-items:center;align-content:center;min-height:86px;margin:0!important;padding:6px 4px!important;
  background:none!important;border:0!important;box-shadow:none!important;flex-wrap:nowrap;width:auto;
}
html.lq #scr-learn #modules .home-module .row:nth-of-type(6n+2){--zz:14px}
html.lq #scr-learn #modules .home-module .row:nth-of-type(6n+3){--zz:24px}
html.lq #scr-learn #modules .home-module .row:nth-of-type(6n+4){--zz:28px}
html.lq #scr-learn #modules .home-module .row:nth-of-type(6n+5){--zz:24px}
html.lq #scr-learn #modules .home-module .row:nth-of-type(6n+6){--zz:14px}
html.lq #scr-learn #modules .home-module .row::after,html.lq #scr-learn #modules .home-module .row::before{display:none!important}
html.lq #scr-learn #modules .home-module .row:hover{background:none!important}
html.lq #scr-learn #modules .home-module .row .lz-num{
  --lipc:var(--lip);grid-area:n;justify-self:start;margin:0 0 0 var(--zz,0px)!important;position:relative;width:62px!important;height:62px!important;border-radius:50%!important;
  background:#fff!important;color:var(--ink-3)!important;border:2px solid var(--line)!important;
  font:700 21px/1 var(--display)!important;box-shadow:0 5px 0 var(--lipc)!important;animation:none!important;
  transition:transform .12s var(--press),box-shadow .12s var(--press)!important;
}
html.lq #scr-learn #modules .home-module .row:active .lz-num{transform:translateY(5px)!important;box-shadow:0 0 0 var(--lipc)!important}
html.lq #scr-learn #modules .home-module .row.done-row .lz-num{--lipc:var(--m-lip);background:var(--m)!important;border-color:var(--m)!important;color:transparent!important}
html.lq #scr-learn #modules .home-module .row.done-row .lz-num::after{
  content:'';position:absolute;inset:0;margin:auto;width:28px;height:28px;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
html.lq #scr-learn #modules .home-module .row.current .lz-num{--lipc:var(--m-lip);border:4px solid var(--m)!important;color:var(--m-ink)!important}
html.lq #scr-learn #modules .home-module .row.current .lz-num::before{
  content:'';position:absolute;inset:-10px;border-radius:50%;border:3px solid var(--m);opacity:0;
  animation:lqPulse 2.4s ease-out infinite;pointer-events:none;
}
html.lq #scr-learn #modules .home-module .row .lz-num.due{--lipc:#C98200;background:var(--warn-fill)!important;border-color:var(--warn-fill)!important;color:#fff!important}
html.lq #scr-learn #modules .home-module .row .lz-body{grid-area:b;min-width:0}
html.lq #scr-learn #modules .home-module .row .lz-body b{display:block;font:700 16px/1.25 var(--display)!important;letter-spacing:-.01em!important;color:var(--ink)!important}
html.lq #scr-learn #modules .home-module .row .lz-body small{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden!important;margin-top:2px;font-size:13px!important;line-height:1.38!important;color:var(--ink-2)!important}
html.lq #scr-learn #modules .home-module .row.done-row .lz-body b{color:var(--ink-2)!important}
html.lq #scr-learn #modules .home-module .row .catalog-lesson-state{grid-area:k;justify-self:start;margin:0 0 5px;padding:4px 10px;border-radius:999px;font:700 12px/1.2 var(--display)}
html.lq #scr-learn #modules .home-module .row .catalog-lesson-state.next{background:var(--m);color:#fff;box-shadow:0 2px 0 var(--m-lip)}
html.lq #scr-learn #modules .home-module .row .catalog-lesson-state.review{background:var(--warn-soft);color:var(--warn)}
html.lq #scr-learn #modules .home-module .row .lesson-validation{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html.lq #scr-learn #modules .home-module .row>svg.chev{display:none}
/* Apparition du chemin à l'ouverture */
html.lq #scr-learn #modules .home-module>.list.lq-in>.row .lz-num{animation:lqNodeIn .45s var(--pop) both!important;animation-delay:calc(min(var(--k,0),12) * 35ms)!important}
html.lq #scr-learn #modules .home-module>.list.lq-in>.row .lz-body,
html.lq #scr-learn #modules .home-module>.list.lq-in>.row .catalog-lesson-state{animation:lqSlideIn .3s ease both;animation-delay:calc(min(var(--k,0),12) * 35ms + 60ms)}
/* Résultats de recherche */
html.lq .catalog-result-group h3{font:700 16px/1.3 var(--display)!important;color:var(--ink)!important}
html.lq .catalog-result-group .list{border:2px solid var(--line)!important;border-radius:20px!important}
/* Les filtres et les résultats (Elisa, 29 octobre, 18 h 11 : « problème de formatage des boutons Tous, À apprendre… ») : dans la carte de
   recherche, les filtres remplissent la ligne (ni défilement ni marges qui les décalent) ; à quatre (« À réviser »), ils passent sur deux
   lignes. Les leçons trouvées ont l’encre des leçons du parcours (sur iPhone, un bouton sans couleur s’écrit en bleu système). */
html.lq .catalog-tools .catalog-filters{display:flex!important;flex-wrap:wrap!important;overflow:visible!important;margin:0!important;padding:0 0 3px!important;gap:8px}
html.lq .catalog-tools .catalog-filters>button{flex:1 1 auto;justify-content:center;white-space:nowrap}
/* Les leçons trouvées ont l’allure du parcours (Elisa, 29 octobre, 18 h 15 : « bien homogénéiser l’aspect ») : la même pastille ronde
   (blanche et numérotée ; violette avec une coche une fois validée ; cerclée de violet pour la leçon en cours ; ambre à réviser), le même
   titre et la même pastille « Tu es ici » ; ni chevron ni mention « Validé », que la coche dit déjà. En liste droite, dans sa carte. */
html.lq #course-search-results .row{display:grid!important;grid-template-columns:52px minmax(0,1fr);grid-template-areas:"n k" "n b";column-gap:14px;align-items:center;align-content:center;
  min-height:78px!important;margin:0!important;padding:12px 16px!important;gap:0 14px!important;color:var(--ink);background:#fff!important;border:0!important;box-shadow:inset 0 -2px 0 var(--line-2)!important}
html.lq #course-search-results .row:last-child{box-shadow:none!important}
html.lq #course-search-results .row::before,html.lq #course-search-results .row::after{display:none!important}
html.lq #course-search-results .row .lz-num{--lipc:var(--lip);grid-area:n;justify-self:start;position:relative;width:52px!important;height:52px!important;margin:0!important;border-radius:50%!important;
  background:#fff!important;color:var(--ink-3)!important;border:2px solid var(--line)!important;font:700 19px/1 var(--display)!important;box-shadow:0 4px 0 var(--lipc)!important;
  transition:transform .12s var(--press),box-shadow .12s var(--press)!important}
html.lq #course-search-results .row:active .lz-num{transform:translateY(4px)!important;box-shadow:0 0 0 var(--lipc)!important}
html.lq #course-search-results .row.done-row .lz-num{--lipc:var(--m-lip);background:var(--m)!important;border-color:var(--m)!important;color:transparent!important}
html.lq #course-search-results .row.done-row .lz-num::after{content:'';position:absolute;inset:0;margin:auto;width:24px;height:24px;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
html.lq #course-search-results .row.current .lz-num{--lipc:var(--m-lip);border:4px solid var(--m)!important;color:var(--m-ink)!important}
html.lq #course-search-results .row .lz-num.due{--lipc:#C98200;background:var(--warn-fill)!important;border-color:var(--warn-fill)!important;color:#fff!important}
html.lq #course-search-results .row .lz-body{grid-area:b;min-width:0}
html.lq #course-search-results .row .lz-body b{display:block;font:700 16px/1.25 var(--display)!important;letter-spacing:-.01em!important;color:var(--ink)!important}
html.lq #course-search-results .row .lz-body small{display:block;margin-top:2px;font-size:13px!important;line-height:1.38!important;color:var(--ink-2)!important}
html.lq #course-search-results .row.done-row .lz-body b{color:var(--ink-2)!important}
html.lq #course-search-results .row .catalog-lesson-state{grid-area:k;justify-self:start;margin:0 0 5px;padding:4px 10px;border-radius:999px;font:700 12px/1.2 var(--display)}
html.lq #course-search-results .row .catalog-lesson-state.next{background:var(--m);color:#fff;box-shadow:0 2px 0 var(--m-lip)}
html.lq #course-search-results .row .catalog-lesson-state.review{background:var(--warn-soft);color:var(--warn)}
html.lq #course-search-results .row .lesson-validation{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html.lq #course-search-results .row>svg.chev{display:none}
html.lq #course-search-results .catalog-result-group .list{overflow:hidden;background:#fff}
html.lq .catalog-result-group h3 span{font:700 13px/1 var(--display)!important;color:var(--ink-3)}

/* ---------- 12. Pièces communes des rubriques ---------- */

/* Carte d'en-tête pleine (même famille que « Reprendre ») */
html.lq .def-focus,
html.lq .journey-spotlight,
html.lq .coll-overview,
html.lq .notes-overview,
html.lq .ent-hero,
html.lq .plan-next-session{
  position:relative;color:#fff!important;border:0!important;border-radius:26px!important;
  background:
    radial-gradient(120px 120px at 96% 4%,rgba(255,255,255,.18),transparent 70%),
    radial-gradient(180px 140px at -4% 110%,rgba(255,255,255,.12),transparent 70%),
    var(--m,var(--accent))!important;
  box-shadow:0 6px 0 var(--m-lip,var(--accent-lip))!important;
  animation:none!important;
}
html.lq .def-focus *,html.lq .journey-spotlight *,html.lq .coll-overview *,html.lq .notes-overview *,html.lq .ent-hero *,html.lq .plan-next-session *{color:inherit}
html.lq .def-focus .def-focus-kicker,
html.lq .journey-spotlight .journey-kicker,
html.lq .coll-overview-copy small,
html.lq .coll-overview-next small,
html.lq .notes-overview-copy small,
html.lq .ent-hero-kicker,
html.lq .plan-next-session>small{color:#fff!important}
html.lq .journey-spotlight h2,html.lq .def-focus-copy h2,html.lq .plan-next-session h2,html.lq .ent-hero-txt b,html.lq .coll-overview-copy strong,html.lq .notes-overview-copy b{
  font-family:var(--display)!important;font-weight:700!important;letter-spacing:-.02em!important;color:#fff!important;
}
html.lq .journey-spotlight>p:not(.journey-kicker),html.lq .def-focus-copy p,html.lq .plan-next-session>p,html.lq .ent-hero-txt>span:not(.ent-hero-kicker),html.lq .coll-overview-copy span,html.lq .notes-overview-copy span{color:#fff!important}
/* Textes secondaires des cartes pleines (l'ancien thème les forçait en gris) */
html.lq #app .notes-overview-copy span,html.lq #app .coll-overview-copy span,
html.lq #app .ent-readiness-stats small,html.lq #app .coll-overview-stats small,html.lq #app .def-focus-stats small,
html.lq #app .ent-hero-stats span,html.lq #app .ent-hero-stats strong,html.lq #app .ent-hero-txt>span,
html.lq #app .journey-spotlight>p:not(.journey-kicker),html.lq #app .def-focus-copy p,html.lq #app .plan-next-session>p,
html.lq #app .pl-overview-copy span,html.lq #app .pl-overview-copy small,html.lq #app .pl-overview-stats small,
html.lq #app .pl-overview-next small,html.lq #app .pl-overview-next em,html.lq #app .coll-overview-next small,
html.lq #app .def-focus-progress strong,html.lq #app .def-focus-total{color:#fff!important}
/* Bouton blanc dans une carte pleine */
html.lq .journey-spotlight .journey-primary,
html.lq .def-focus .def-focus-cta,
html.lq .ent-hero .ent-hero-cta,
html.lq .coll-overview-next button,
html.lq .plan-next-actions>button:first-child{
  background:#fff!important;color:var(--m-ink,var(--accent-ink))!important;box-shadow:0 5px 0 rgba(20,10,60,.24)!important;
}
html.lq .journey-spotlight .journey-primary:active,
html.lq .def-focus .def-focus-cta:active,
html.lq .ent-hero .ent-hero-cta:active,
html.lq .coll-overview-next button:active,
html.lq .plan-next-actions>button:first-child:active{box-shadow:0 0 0 rgba(20,10,60,.24)!important;transform:translateY(5px)!important}
html.lq .plan-next-actions>button+button,
html.lq .coll-overview .ux-card-review{
  background:rgba(255,255,255,.18)!important;color:#fff!important;border:2px solid rgba(255,255,255,.4)!important;box-shadow:0 4px 0 rgba(20,10,60,.18)!important;
}
html.lq .plan-next-actions>button+button:active,html.lq .coll-overview .ux-card-review:active{box-shadow:0 0 0 rgba(20,10,60,.18)!important}
/* Anneaux de progression sur fond plein */
html.lq .def-focus-icon,html.lq .coll-overview-ring,html.lq .ent-hero .ring,html.lq .pl-overview-ring{
  background:conic-gradient(#fff calc(var(--p)*1%),rgba(255,255,255,.26) 0)!important;box-shadow:none!important;
}
html.lq .def-focus-icon::after,html.lq .coll-overview-ring::after,html.lq .ent-hero .ring::after,html.lq .pl-overview-ring::after{background:var(--m)!important}
html.lq .def-focus-icon b,html.lq .coll-overview-ring b,html.lq .ent-hero .ring span,html.lq .pl-overview-ring i{color:#fff!important;font-family:var(--display)!important;font-weight:700!important;font-style:normal}
/* Chiffres des cartes pleines */
html.lq .coll-overview-stats,html.lq .ent-readiness-stats,html.lq .def-focus-stats{border-color:rgba(255,255,255,.22)!important}
html.lq .coll-overview-stats div+div,html.lq .ent-readiness-stats div+div,html.lq .def-focus-stats div+div{border-color:rgba(255,255,255,.22)!important}
html.lq .coll-overview-stats b,html.lq .ent-readiness-stats b,html.lq .def-focus-stats b{font-family:var(--display)!important;font-size:22px!important;font-weight:700!important;color:#fff!important}
html.lq .coll-overview-stats small,html.lq .ent-readiness-stats small,html.lq .def-focus-stats small{color:#fff!important}

/* Contrôles segmentés : piste lilas, pastille blanche en relief */
html.lq .def-levels,html.lq .ent-status,html.lq .account-sections,html.lq .jeu-seg{
  background:#E9E5F8!important;border:0!important;border-radius:18px!important;padding:4px!important;box-shadow:inset 0 2px 0 rgba(34,28,70,.05)!important;gap:4px!important;
}
html.lq .def-levels>button,html.lq .ent-status>button,html.lq .account-sections>button,html.lq .jeu-seg button{
  border-radius:14px!important;min-height:44px;border:2px solid transparent!important;background:transparent!important;
  color:var(--ink-2)!important;font-family:var(--display)!important;font-size:14.5px!important;font-weight:700!important;box-shadow:none!important;
  transition:background .2s,color .2s,transform .12s var(--press),box-shadow .2s!important;
}
html.lq .def-levels>button.on,html.lq .def-levels>button[aria-selected="true"],
html.lq .ent-status>button.on,html.lq .ent-status>button[aria-selected="true"],
html.lq .account-sections>button.on,html.lq .account-sections>button[aria-selected="true"],
html.lq .jeu-seg button.on{
  background:#fff!important;color:var(--accent-ink)!important;border-color:#fff!important;
  box-shadow:0 3px 0 var(--lip)!important;
}
html.lq .def-levels>button:active,html.lq .ent-status>button:active,html.lq .account-sections>button:active,html.lq .jeu-seg button:active{transform:scale(.96)}
html.lq .def-levels small,html.lq .ent-status-btn small{font-family:var(--display)!important;font-weight:700!important;opacity:.75}
/* Défi : choix « Seul / Avec des amis », en violet plein pour ne pas se confondre avec les niveaux
   (Faciles, Moyens, Difficiles) qui restent en blanc. */
html.lq :is(#scr-defis,#scr-lesson) .def-modes{gap:4px;padding:4px;border-radius:20px;background:#E9E5F8;box-shadow:inset 0 2px 0 rgba(34,28,70,.05)}
html.lq :is(#scr-defis,#scr-lesson) .def-mode{min-height:48px;border-radius:16px;border:0;background:transparent;color:var(--ink-2);font:700 15px/1.2 var(--display);transition:background .2s,color .2s,transform .12s var(--press),box-shadow .12s var(--press)}
html.lq :is(#scr-defis,#scr-lesson) .def-mode.on{background:var(--accent);color:#fff;box-shadow:0 3px 0 var(--accent-lip)}
html.lq :is(#scr-defis,#scr-lesson) .def-mode:active{transform:translateY(2px)}

/* Pastilles de filtre */
html.lq .fbar{gap:8px}
html.lq .fbar .fchip,html.lq .fchip{
  min-height:40px;padding:8px 13px!important;border:2px solid var(--line)!important;border-radius:999px!important;
  background:#fff!important;color:var(--ink-2)!important;font-family:var(--display)!important;font-weight:700!important;font-size:13.5px!important;
  box-shadow:0 3px 0 var(--lip)!important;transition:transform .12s var(--press),box-shadow .12s var(--press),background .15s!important;
}
html.lq .fchip:active{transform:translateY(3px)!important;box-shadow:0 0 0 var(--lip)!important}
html.lq .fchip.on{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;box-shadow:0 3px 0 var(--accent-lip)!important}
/* Filtres des cartes : même contrôle segmenté que Défis, sur une ligne */
html.lq #coll-filters{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px!important;padding:4px!important;margin:14px 16px 12px!important;
  background:#E9E5F8!important;border-radius:18px!important;box-shadow:inset 0 2px 0 rgba(34,28,70,.05)!important;overflow:visible!important;
}
html.lq #coll-filters .fchip{
  min-width:0;min-height:44px;margin:0;padding:0 6px!important;gap:4px;justify-content:center;white-space:nowrap;
  border:2px solid transparent!important;border-radius:14px!important;background:transparent!important;box-shadow:none!important;
  color:var(--ink-2)!important;font-size:14px!important;
}
html.lq #coll-filters .fchip.on{background:#fff!important;border-color:#fff!important;color:var(--accent-ink)!important;box-shadow:0 3px 0 var(--lip)!important}
html.lq #coll-filters .fchip:active{transform:scale(.96)!important}
html.lq #coll-filters .fchip small{font-size:11.5px!important;color:inherit!important;opacity:.7!important}
/* Chaque segment prend la place de son libellé, puis l’espace restant se partage : « À débloquer 35 » ne touche plus le bord. */
html.lq #coll-filters{display:flex!important;flex-wrap:nowrap!important}
html.lq #coll-filters .fchip{flex:1 1 auto;padding:0 8px!important}
html.lq .fchip small{font-family:var(--display)!important;font-weight:700!important;opacity:.75}

/* Champs de saisie */
html.lq .jeu-input,html.lq #scr-compte input[type="text"],html.lq .searchbar input,html.lq .notes-hub input[type="search"]{
  border:2px solid var(--line)!important;border-radius:16px!important;background:var(--surface-2)!important;font-size:16px;
  transition:border-color .15s,background .15s,box-shadow .15s!important;
}
html.lq .jeu-input:focus,html.lq .searchbar input:focus{border-color:var(--accent)!important;background:#fff!important;box-shadow:0 0 0 4px var(--accent-soft)!important}

/* Titres de section dans les rubriques */
html.lq .def-list-head h2,html.lq .ent-list-title h2,html.lq .console-projects-head h2,html.lq .pl-week-heading h2,html.lq .home-section-head h2{
  font-family:var(--display)!important;font-weight:700!important;font-size:23px!important;letter-spacing:-.02em!important;color:var(--ink)!important;
}
html.lq .def-list-head>span,html.lq .ent-list-count{
  background:#fff!important;border:2px solid var(--line)!important;color:var(--ink-2)!important;box-shadow:none!important;
  font-family:var(--display)!important;font-weight:700!important;font-size:13px!important;border-radius:999px!important;padding:4px 10px!important;
}

/* ---------- 13. Pratiquer et Bibliothèque : tuiles ---------- */
html.lq #app .journey-hub-list{margin:18px 20px 0;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important;display:flex;flex-direction:column;gap:12px}
html.lq #app .journey-resource{
  gap:14px;min-height:84px;padding:14px 14px 14px 14px;border:2px solid var(--line)!important;border-radius:22px!important;
  background:#fff!important;box-shadow:0 4px 0 var(--lip)!important;
  transition:transform .12s var(--press),box-shadow .12s var(--press)!important;animation:none!important;
}
html.lq #app .journey-resource+.journey-resource::before{display:none}
html.lq #app .journey-resource:active{background:#fff!important;transform:translateY(4px);box-shadow:0 0 0 var(--lip)!important}
html.lq #app .journey-resource b{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:-.012em;color:var(--ink)}
html.lq #app .journey-resource small{font-size:13.5px;color:var(--ink-2)}
html.lq #app .journey-resource .journey-tool-icon{width:52px;height:52px;border-radius:17px;background:var(--accent-soft)!important;color:var(--accent-ink)!important;box-shadow:none!important}
html.lq #app .journey-resource .journey-tool-icon svg{width:26px;height:26px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
html.lq #app .journey-resource>svg{width:18px;height:18px;color:#B3ACD4}
html.lq #app .journey-resource>span:not(.journey-tool-icon){flex:1;min-width:0}
/* Progression dans une ligne (Défis : 2 réussis sur 25) */
html.lq .journey-resource-bar{display:block;margin-top:8px;height:6px;border-radius:99px;background:var(--accent-soft);overflow:hidden}
html.lq .journey-resource-bar>i{display:block;height:100%;min-width:6px;border-radius:99px;background:var(--accent)}
html.lq .journey-spotlight{margin:0 0 4px!important;padding:18px!important}
html.lq .journey-spotlight h2{font-size:25px!important;line-height:1.1!important;margin:4px 0 6px!important}
html.lq .journey-spotlight .journey-primary{margin-top:4px}

/* ---------- 14. Parcours ---------- */
html.lq #scr-planning .planning-toolbar{gap:10px}
html.lq #scr-planning .planning-toolbar button{
  border:2px solid var(--line)!important;border-radius:999px!important;background:#fff!important;color:var(--accent-ink)!important;
  box-shadow:0 3px 0 var(--lip)!important;font-family:var(--display)!important;font-weight:700!important;font-size:14.5px!important;
  transition:transform .12s var(--press),box-shadow .12s var(--press)!important;
}
html.lq #scr-planning .planning-toolbar button:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)!important}
html.lq .plan-next-session{padding:18px!important}
html.lq .plan-next-session h2{font-size:30px!important;line-height:1.05!important;margin:4px 0 6px!important}
html.lq .plan-next-actions{gap:10px!important;margin-top:16px!important}
html.lq .pl-week-heading>div:first-child>span{color:var(--accent-ink)!important}
html.lq .pl-week-heading p{color:var(--ink-2)!important}
/* « Les 7 prochains jours » sur toute la largeur ; la légende se range à
   droite du compteur au lieu de rogner le titre. */
html.lq .pl-week-heading{display:grid!important;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center}
html.lq .pl-week-heading>div:first-child{display:contents}
html.lq .pl-week-heading>div:first-child>span,html.lq .pl-week-heading h2{grid-column:1/-1}
html.lq .pl-week-heading p{grid-column:1;grid-row:3;min-width:0}
html.lq .pl-week-legend{grid-column:2;grid-row:3}
/* Les jours ne touchent plus le bord de la carte. */
html.lq .wk-chrome{padding:12px 10px 14px!important}
html.lq #scr-planning .wk-nav{margin:0}
html.lq .wk-nav>button{border:2px solid var(--line)!important;border-radius:14px!important;background:#fff!important;box-shadow:0 3px 0 var(--lip)!important;transition:transform .12s var(--press),box-shadow .12s var(--press)!important}
html.lq .wk-nav>button:active{transform:translateY(3px)!important;box-shadow:0 0 0 var(--lip)!important}
html.lq .wk-nav .wk-t b{font-family:var(--display);font-weight:700;font-size:17px}
html.lq .wk-day{
  border:2px solid var(--line)!important;border-radius:16px!important;background:#fff!important;box-shadow:0 3px 0 var(--lip)!important;
  transition:transform .12s var(--press),box-shadow .12s var(--press),background .2s!important;
}
html.lq .wk-day .dn{font-family:var(--display);font-weight:700;font-size:17px}
html.lq .wk-day .wd{font-family:var(--display);font-weight:700}
html.lq .wk-day:active{transform:translateY(3px)!important;box-shadow:0 0 0 var(--lip)!important}
html.lq .wk-day.pause{background:var(--surface-2)!important;border-color:var(--surface-2)!important;box-shadow:none!important}
html.lq .wk-day.auj:not(.sel){border-color:var(--accent)!important;box-shadow:0 3px 0 var(--accent-lip)!important}
html.lq .wk-day.sel{background:var(--accent)!important;border-color:var(--accent)!important;box-shadow:0 3px 0 var(--accent-lip)!important;animation:none!important}
/* Jour J : pastille « Auj. » à la place de la lettre, visible qu'il soit sélectionné ou non. */
html.lq .wk-day .wk-auj{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--accent);color:#fff;font:700 10.5px/1.3 var(--display);letter-spacing:.02em}
html.lq .wk-day.sel .wk-auj{background:#fff;color:var(--accent-ink)}
html.lq .wk-day.fait:not(.sel) .ld{color:var(--success)!important;font-weight:800}
/* Carte du jour : en-tête, (avancement), bouton, puis une seule liste de
   lignes séparées, comme la séance du lendemain ; plus de cartes dans la carte. */
html.lq .day-panel{padding-bottom:0!important}
html.lq #scr-planning .dp-head{padding:16px 16px 14px}
html.lq .dp-head b{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.01em}
html.lq #scr-planning .dp-prog{height:8px!important;margin:0 16px 16px!important;border-radius:99px!important;background:var(--surface-2)!important}
html.lq #scr-planning .dp-prog i{background:var(--accent)!important;background-image:none!important}
html.lq #scr-planning .dp-go{display:block;width:calc(100% - 32px)!important;min-height:54px!important;margin:0 16px 18px!important;padding:0 16px!important;filter:none!important}
html.lq .dp-session-valid{background:var(--success-soft)!important;color:var(--success)!important;border-radius:999px!important;font-family:var(--display)!important;font-weight:700!important}
/* Activités du jour : statut à gauche (numéro, puis coche violette une fois
   validée), titre en entier ; plus de poignée, l'appui long suffit pour
   réordonner ; le calendrier (déplacer à un autre jour) reste à droite. */
html.lq #scr-planning .pl-chips{padding:0!important;gap:0!important;min-height:0!important}
html.lq .pl-chip{
  gap:12px!important;padding:10px 4px 10px 16px!important;border:0!important;border-top:2px solid var(--line-2)!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;min-height:64px!important;
}
html.lq .pl-chip.ok,html.lq .pl-chip.defi,html.lq .pl-chip.defi.ok{background:transparent!important;border-color:var(--line-2)!important;box-shadow:none!important}
html.lq .pl-chip:active{background:var(--surface-2)!important;transform:none!important}
html.lq .pl-chips.is-collapsed>.pl-chip.is-extra{display:none!important}
/* Longue journée : le reste de la liste s'ouvre en bas de la carte. */
html.lq .pl-chips-more{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:56px;box-sizing:border-box;padding:8px 16px;
  border:0;border-top:2px solid var(--line-2);border-radius:0;background:none;color:var(--accent-ink);
  font:700 15.5px/1.25 var(--display);text-align:center;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
html.lq .pl-chips-more svg{flex:none;width:18px;height:18px;transition:transform .2s var(--press)}
html.lq .pl-chips-more[aria-expanded="true"] svg{transform:rotate(180deg)}
html.lq .pl-chips-more:active{background:var(--surface-2)}
html.lq .pl-chips-more:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
html.lq .pl-chip .cn,html.lq .pl-next-row .cn{
  flex:none;width:30px;height:30px;min-width:30px!important;box-sizing:border-box;border-radius:50%;display:grid;place-items:center;
  background:#fff;box-shadow:inset 0 0 0 2px var(--lip);color:var(--accent-ink)!important;font:700 14px/1 var(--display)!important;text-align:center;
}
html.lq .pl-chip.ok .cn,html.lq .pl-next-row.ok .cn{background:var(--accent);box-shadow:0 2px 0 var(--accent-lip);color:#fff!important}
html.lq .pl-chip .cn svg,html.lq .pl-next-row .cn svg{width:15px;height:15px}
html.lq .pl-chip .ct,html.lq .pl-next-row .ct{flex:1;min-width:0;overflow:visible!important}
html.lq .pl-chip .ct>span,html.lq .pl-next-row .ct>span{
  display:block!important;-webkit-line-clamp:unset!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
  font-family:var(--display);font-weight:700;font-size:15.5px;line-height:1.25;letter-spacing:-.005em!important;color:var(--ink);overflow-wrap:break-word;
}
html.lq .pl-chip .ct small,html.lq .pl-next-row .ct small{
  display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden!important;white-space:normal!important;
  margin-top:2px;font-size:13px!important;line-height:1.35;font-weight:450;color:var(--ink-2)!important;
}
html.lq #app .pl-chip .pl-chip-valid,html.lq #app .pl-next-row .pl-chip-valid{
  position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;
  overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;
}
html.lq .pl-chip .nx{
  flex:none;width:44px!important;height:44px!important;min-height:44px!important;border:0!important;border-radius:14px!important;
  background:transparent!important;box-shadow:none!important;color:var(--ink-3)!important;
}
html.lq .pl-chip .nx:active{background:var(--accent-soft)!important;color:var(--accent-ink)!important;transform:scale(.92)}
/* La séance suivante, sous aujourd'hui */
html.lq .pl-next-day{margin:22px 16px 0}
html.lq .pl-next-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin:0 2px 10px}
html.lq .pl-next-head h3{margin:0;font:700 18px/1.2 var(--display);letter-spacing:-.01em;color:var(--ink)}
html.lq .pl-next-head small{flex:none;font-size:13px;color:var(--ink-2)}
html.lq .pl-next-list{display:flex;flex-direction:column;border:2px solid var(--line);border-radius:20px;background:#fff;overflow:hidden}
html.lq .pl-next-row{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;box-sizing:border-box;padding:10px 14px;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.lq .pl-next-row+.pl-next-row{border-top:2px solid var(--line-2)}
html.lq .pl-next-row:active{background:var(--surface-2)}
html.lq .planning-progress>summary,html.lq .plan-modules>summary{font-family:var(--display)!important;font-weight:700!important;font-size:17px!important;color:var(--ink)!important}
/* Les deux volets du bas : mêmes marges, même hauteur, « + » au même endroit. */
html.lq #scr-planning .pl-week{padding-bottom:6px!important}
html.lq #scr-planning .pl-hint{margin:14px 24px 0}
@media (max-width:899px){
  html.lq #planning-body>.planning-progress,html.lq #planning-body>.plan-modules{margin:16px 16px 0!important}
  html.lq #planning-body>.plan-modules{margin-bottom:28px!important}
}
@media (min-width:900px){
  html.lq #planning-body>.plan-modules{margin:4px 14px 0!important}
}
html.lq #app .planning-progress>summary,html.lq #app .plan-modules>summary{padding:14px 16px 14px 18px!important;min-height:76px;box-sizing:border-box;column-gap:14px!important}
html.lq #app .planning-progress>summary span,html.lq #app .plan-modules>summary span{margin-top:2px!important;font-family:var(--ui)!important;font-size:13px!important;font-weight:500!important;color:var(--ink-2)!important}
html.lq #app .planning-progress>summary::after,html.lq #app .plan-modules>summary::after{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink);font:700 21px/1 var(--display);
}
html.lq .pl-overview{padding:18px!important}
html.lq .pl-overview-copy strong{font-family:var(--display)!important;font-weight:700!important;color:#fff!important;font-size:20px!important}
html.lq .pl-overview-copy small,html.lq .pl-overview-copy span{color:#fff!important}
html.lq .pl-overview-adjust{background:#fff!important;color:var(--accent-ink)!important;border:2px solid var(--line)!important;border-radius:14px!important;box-shadow:0 3px 0 var(--lip)!important;font-family:var(--display)!important;font-weight:700!important}
html.lq .pl-overview-adjust:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)!important}
html.lq .pl-overview-stats b{font-family:var(--display)!important;color:#fff!important;font-size:22px!important}
html.lq .pl-overview-stats small{color:#fff!important}
html.lq .pl-overview-track{background:rgba(255,255,255,.26)!important;height:10px!important;border-radius:99px!important}
html.lq .pl-overview-track i{background:#fff!important;border-radius:99px!important}
html.lq .pl-overview-next{border-color:rgba(255,255,255,.22)!important}
html.lq .pl-overview-next small,html.lq .pl-overview-next em{color:#fff!important}
html.lq .pl-overview-next b{color:#fff!important;font-family:var(--display)!important}
html.lq .plan-module-row{border-bottom:2px solid var(--line-2)!important}
html.lq .plan-module-row h3{font-family:var(--display)!important;font-weight:700!important;font-size:16px!important}
html.lq .plan-module-row span{color:var(--accent-ink)!important;font-family:var(--display)!important;font-weight:700!important;text-transform:none!important;letter-spacing:0!important}
html.lq .plan-module-row progress{height:10px;border-radius:99px;overflow:hidden;appearance:none;-webkit-appearance:none;border:0;background:var(--surface-2)}
html.lq .plan-module-row progress::-webkit-progress-bar{background:var(--surface-2);border-radius:99px}
html.lq .plan-module-row progress::-webkit-progress-value{background:var(--accent);border-radius:99px}
html.lq .plan-module-row progress::-moz-progress-bar{background:var(--accent);border-radius:99px}
html.lq .plan-module-row>button{border:2px solid var(--line)!important;border-radius:14px!important;background:#fff!important;color:var(--accent-ink)!important;box-shadow:0 3px 0 var(--lip)!important;font-family:var(--display)!important;font-weight:700!important;font-size:13.5px!important}
html.lq .plan-module-row>button:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)!important}
/* Barre du haut : les deux boutons tiennent sur une ligne, sans retour. */
html.lq #scr-planning .planning-toolbar button{white-space:nowrap}
/* iPhone SE et petits écrans : marges internes resserrées d'un cran. */
@media (max-width:374px){
  html.lq #scr-planning .planning-toolbar{gap:8px}
  html.lq #scr-planning .planning-toolbar button{font-size:13.5px!important;padding-left:12px!important;padding-right:12px!important;gap:6px}
  html.lq #scr-planning .planning-toolbar svg{width:16px;height:16px}
  html.lq .wk-chrome{padding:10px 8px 12px!important}
  html.lq #scr-planning .dp-head{padding:14px 14px 12px}
  html.lq #scr-planning .dp-prog{margin:0 14px 14px!important}
  html.lq #scr-planning .dp-go{width:calc(100% - 28px)!important;margin:0 14px 16px!important}
  html.lq .pl-chip{gap:10px!important;padding-left:14px!important}
  html.lq #app .planning-progress>summary,html.lq #app .plan-modules>summary{padding-left:16px!important;padding-right:14px!important}
}
@media (max-width:359px){
  html.lq #scr-planning .planning-toolbar svg{display:none}
}
@media (max-width:340px){
  html.lq #scr-planning .planning-toolbar{gap:6px}
  html.lq #scr-planning .planning-toolbar button{font-size:12.5px!important;padding-left:10px!important;padding-right:10px!important}
}

/* L’autocollant qui se pose en sautillant (la salle de défi) */
@keyframes lrStk{0%{opacity:0;transform:scale(.6) rotate(-12deg)}60%{opacity:1;transform:scale(1.06) rotate(2deg)}100%{opacity:1;transform:none}}
/* Icônes pleines : aucun trait hérité (certains blocs posent stroke:currentColor
   sur leurs svg, ce qui cernait les formes de violet). */
html.lq #home-hero .journey-planning .journey-tool-icon svg{stroke:none!important;fill:none}
/* Petit écran : tuile d'icône plus compacte pour laisser la place au texte */
@media (max-width:374px){
  html.lq #home-hero .journey-planning{gap:10px;padding:12px!important}
  html.lq #home-hero .journey-planning .journey-tool-icon{width:44px!important;height:44px!important;border-radius:14px!important}
  html.lq #home-hero .journey-planning .journey-tool-icon svg{width:26px!important;height:26px!important}
  html.lq #home-hero .jp-copy b{font-size:16px}
}

/* ---------- 15. Jouer ---------- */
html.lq .jeu-card{padding:18px!important;border-radius:24px!important}
html.lq .jeu-card-h{font-family:var(--display)!important;font-weight:700!important;font-size:19px!important;letter-spacing:-.01em!important}
html.lq .jeu-lab{color:var(--ink-2)!important;font-size:13.5px!important}
html.lq .jeu-card.is-join{background:#fff!important}
html.lq .jeu-code{font-family:var(--display)!important;font-size:40px!important;letter-spacing:.14em!important;color:var(--accent-ink)!important}
html.lq .jeu-players li,html.lq .jeu-rank li{border:2px solid var(--line)!important;border-radius:16px!important;background:#fff!important}
html.lq .jeu-players li.is-found{border-color:#D9CFFF!important;background:var(--success-soft)!important}
html.lq .jeu-av{background:var(--accent)!important;color:#fff!important;font-family:var(--display);box-shadow:0 2px 0 var(--accent-lip)}
html.lq .jeu-timer{font-family:var(--display)!important;font-size:16px!important;padding:6px 12px!important;background:var(--ink)!important;color:#fff!important}
html.lq .jeu-timer.is-low{background:var(--danger-fill)!important}
html.lq .jeu-reacts button{border:2px solid var(--line)!important;box-shadow:0 3px 0 var(--lip);transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq .jeu-reacts button:active{transform:translateY(3px) scale(.9);box-shadow:0 0 0 var(--lip)}
html.lq .jeu-step-n{font-family:var(--display)!important}
html.lq .jeu-av[data-c="1"]{background:hsl(152 52% 40%)!important}
html.lq .jeu-av[data-c="2"]{background:hsl(24 88% 52%)!important}
html.lq .jeu-av[data-c="3"]{background:hsl(338 70% 52%)!important}
html.lq .jeu-av[data-c="4"]{background:hsl(202 78% 44%)!important}
html.lq .jeu-av[data-c="5"]{background:hsl(42 90% 44%)!important}
html.lq .jeu-av.is-empty{background:transparent!important;border:2px dashed var(--line);box-shadow:none!important}
html.lq .jeu-chip{font-family:var(--display)}
html.lq .jeu-count,html.lq .jeu-bilan b,html.lq .jeu-drawn b{font-family:var(--display)!important}
html.lq .jeu-players li.jeu-slot{border:2px dashed var(--line)!important;background:transparent!important}
html.lq .jeu-ready{border-width:2px;font-family:var(--display);box-shadow:0 3px 0 var(--lip)}
html.lq .jeu-ready:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
html.lq .jeu-ready.on{box-shadow:0 3px 0 color-mix(in srgb,var(--success) 70%,#000)}
html.lq .jeu-bilan div{border:2px solid var(--line);border-radius:20px;box-shadow:none}

/* ---------- 16. Mon compte ----------
   Une seule page, sans onglets internes : le profil et le niveau dans la
   carte violette, puis la progression, les accomplissements, les données et
   les réglages. Chaque réglage s'ouvre dans une feuille (bas de section). */
html.lq #scr-compte>.account-title{padding-bottom:0!important}
html.lq #scr-compte .acc-stack{display:flex!important;flex-direction:column;align-items:stretch!important;gap:28px!important;padding:18px 20px 32px!important}
html.lq #scr-compte .acct-col{display:flex;flex-direction:column;gap:28px;min-width:0}
html.lq #scr-compte .acct-block{min-width:0}
/* Depuis la série de l'accueil : « Ma progression » s'arrête sous la barre de titre compacte */
html.lq #acct-progress{scroll-margin-top:calc(var(--safe-top) + 60px)}
html.lq .acct-sr{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0!important}

/* Carte violette : initiale (touchée = modifier le profil), niveau, prochain cap */
html.lq .acct-hero{
  position:relative;padding:18px;border-radius:26px;color:#fff;
  background:
    radial-gradient(120px 120px at 96% 4%,rgba(255,255,255,.18),transparent 70%),
    radial-gradient(180px 140px at -4% 110%,rgba(255,255,255,.12),transparent 70%),
    var(--accent);
  box-shadow:0 6px 0 var(--accent-lip);
}
html.lq .acct-id{
  display:flex;align-items:center;gap:14px;width:100%;margin:0;padding:0;border:0;border-radius:18px;
  background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;
  -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;
}
html.lq .acct-id:focus-visible{outline:3px solid #fff;outline-offset:4px}
html.lq .acct-avatar{
  position:relative;flex:none;width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;background:#fff;color:var(--accent-ink);
  font:700 27px/1 var(--display);box-shadow:0 4px 0 rgba(20,10,60,.24);
  transition:transform .12s var(--press),box-shadow .12s var(--press);
}
html.lq .acct-avatar i{
  position:absolute;right:-5px;bottom:-5px;width:26px;height:26px;box-sizing:border-box;border-radius:50%;
  display:grid;place-items:center;background:var(--accent-ink);border:2px solid #fff;color:#fff;
}
html.lq .acct-avatar i svg{width:13px;height:13px}
html.lq .acct-id:active .acct-avatar{transform:translateY(4px);box-shadow:0 0 0 rgba(20,10,60,.24)}
html.lq .acct-id-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
/* Le titre passe à la ligne plutôt que d’être coupé (« Ton espace Req… ») : deux lignes au plus, équilibrées (« Ton espace / Requête »),
   un peu plus petit sur les écrans étroits ; un prénom très long se coupe proprement à la fin de la deuxième ligne. */
html.lq .acct-id-copy b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;padding-bottom:.06em;
  font:700 clamp(20px,6vw,24px)/1.16 var(--display);letter-spacing:-.015em;white-space:normal;overflow-wrap:anywhere;text-wrap:balance}
html.lq .acct-id-copy small{font-size:15px;line-height:1.3;font-weight:600;color:#fff;text-wrap:balance}
html.lq .acct-level{margin-top:16px;padding:14px 14px 15px;border-radius:18px;background:rgba(20,10,60,.18)}
html.lq .acct-level-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13.5px;line-height:1.3;font-weight:600}
html.lq .acct-level-head small,html.lq .acct-level-head em{font:inherit;font-style:normal;color:#fff;text-transform:none;letter-spacing:0}
html.lq .acct-level-next{display:block;margin:4px 0 10px;font:700 19px/1.2 var(--display);letter-spacing:-.01em;color:#fff}
html.lq .acct-level-track{height:10px;border-radius:99px;background:rgba(255,255,255,.24);overflow:hidden}
html.lq .acct-level-track i{display:block;height:100%;min-width:10px;border-radius:99px;background:#fff}

/* Titres de section */
html.lq .acct-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 12px;margin:0 0 12px;padding:0 2px}
html.lq .acct-head h2{margin:0;font:700 22px/1.2 var(--display);letter-spacing:-.015em;color:var(--ink)}
html.lq .acct-head span{font-size:14px;line-height:1.3;color:var(--ink-2);white-space:nowrap}

/* Ma progression : trois chiffres dans une seule carte */
html.lq .acct-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:14px 0;border:2px solid var(--line);border-radius:22px;background:#fff}
html.lq .acct-stat{display:flex;flex-direction:column;align-items:center;min-width:0;padding:0 6px;text-align:center}
html.lq .acct-stat+.acct-stat{border-left:2px solid var(--line-2)}
html.lq .acct-stat-ico{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink)}
html.lq .acct-stat-ico svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html.lq .acct-stat.is-streak .acct-stat-ico{background:#FFF0DC}
html.lq .acct-stat.is-streak .acct-stat-ico svg{width:22px;height:22px;stroke:none}
html.lq .acct-stat.is-streak .f-o{fill:var(--flame-b)}
html.lq .acct-stat.is-streak .f-i{fill:var(--flame-a)}
html.lq .acct-stat.is-streak:not(.is-on) .acct-stat-ico{background:linear-gradient(160deg,#FFF7EA,#FFEBD2);box-shadow:inset 0 0 0 1.5px #FFE0BD}
html.lq .acct-stat.is-streak:not(.is-on) .f-o{fill:#FFC58C}
html.lq .acct-stat.is-streak:not(.is-on) .f-i{fill:#FFEBC4}
html.lq .acct-stat b{margin-top:8px;font:700 28px/1 var(--display);color:var(--ink)}
html.lq .acct-stat small{margin-top:4px;font-size:13.5px;line-height:1.25;color:var(--ink-2)}

/* Cartes d'information : blanches, bordées, à plat */
html.lq .acct-card{margin-top:12px;padding:16px;border:2px solid var(--line);border-radius:22px;background:#fff}
html.lq .acct-head+.acct-card{margin-top:0}
html.lq .acct-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
html.lq .acct-card-head b{font:700 17px/1.25 var(--display);color:var(--ink)}
html.lq .acct-card-head span{font:700 14px/1.2 var(--display);color:var(--accent-ink);white-space:nowrap}
html.lq .acct-card-foot{margin:16px 0 0;font-size:14px;line-height:1.4;color:var(--ink-2)}

/* Cette semaine : repos (lune), séance prévue (anneau), en cours, faite (coche) */
/* Toujours de l’air entre deux ronds (Elisa, 31 octobre, 0 h 40 : « problème d’espace » : les ronds se touchaient, et l’anneau du
   jour mordait sur son voisin) : chaque rond laisse 8 px dans sa colonne, entre 24 et 34 px de diamètre selon la largeur */
html.lq .acct-week{margin:16px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px}
html.lq .acct-day{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
html.lq .acct-day i{width:clamp(24px,calc(100% - 8px),34px);height:auto;aspect-ratio:1/1;box-sizing:border-box;border-radius:50%;display:grid;place-items:center;font-style:normal;background:var(--surface-2)}
html.lq .acct-day i svg{width:16px;height:16px}
html.lq .acct-day .f-m{fill:#B9B1DC}
html.lq .acct-day.is-planned i{background:#fff;border:2px solid var(--lip)}
html.lq .acct-day.is-started i{background:var(--accent-soft);border:2px solid var(--accent)}
html.lq .acct-day.is-started i span{font:700 11px/1 var(--display);color:var(--accent-ink)}
html.lq .acct-day.is-done i{background:var(--accent);color:#fff}
html.lq .acct-day.is-done i svg{width:18px;height:18px}
html.lq .acct-day.is-today i{box-shadow:0 0 0 2px #fff,0 0 0 4px #C9BCFF}
html.lq .acct-day small{font:700 12px/1.2 var(--display);color:var(--ink-3)}
html.lq .acct-day.is-today small{color:var(--ink)}

/* Accomplissements : médaille violette une fois débloquée */
html.lq .acct-badges{margin:0;padding:16px 10px;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border:2px solid var(--line);border-radius:22px;background:#fff}
html.lq .acct-badges>li{display:flex;min-width:0}
html.lq .acct-badge{display:flex;flex-direction:column;align-items:center;width:100%;min-width:0;margin:0;padding:2px 0;border:0;border-radius:16px;background:none;color:inherit;font:inherit;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.lq .acct-badge-stk{display:block;width:64px;transition:transform .15s var(--press)}
html.lq .acct-badge:active .acct-badge-stk{transform:scale(.92)}
html.lq .acct-badges>li.acct-badges-more{grid-column:1/-1;justify-content:center;margin-top:6px;padding-top:12px;border-top:2px solid var(--line-2)}
html.lq .acct-badges-more button{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 12px;border:0;border-radius:12px;background:none;color:var(--accent-ink);font:700 15.5px/1 var(--display);cursor:pointer;-webkit-tap-highlight-color:transparent}
html.lq .acct-badges-more .chev{width:16px;height:16px}
html.lq .acct-badge>b{margin-top:12px;font:700 14px/1.2 var(--display);color:var(--ink);overflow-wrap:anywhere}
html.lq .acct-badge>small{margin-top:4px;font-size:13px;font-weight:600;color:var(--ink-2)}
html.lq .acct-badge.is-on>small{color:var(--accent-ink)}
html.lq .acct-badge-bar{display:block;width:56px;max-width:100%;height:6px;margin-top:6px;border-radius:99px;background:var(--line-2);overflow:hidden}
html.lq .acct-badge-bar i{display:block;height:100%;border-radius:99px;background:var(--accent)}

/* Tes données : l'état du stockage et l'action utile tout de suite */
html.lq .acct-data-top{display:flex;align-items:flex-start;gap:12px}
html.lq .acct-data-ico{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink)}
html.lq .acct-data-ico svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html.lq .acct-data-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
html.lq .acct-data-copy b{font:700 17px/1.25 var(--display);color:var(--ink)}
html.lq .acct-data-copy small{font-size:14.5px;line-height:1.4;color:var(--ink-2);overflow-wrap:anywhere}
html.lq .acct-data-go,html.lq .acct-card-go{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;margin-top:14px;box-sizing:border-box;
  border:2px solid var(--line);border-radius:16px;background:#fff;color:var(--accent-ink);
  font:700 16px/1.2 var(--display);box-shadow:0 4px 0 var(--lip);cursor:pointer;
  -webkit-appearance:none;appearance:none;transition:transform .12s var(--press),box-shadow .12s var(--press);
}
html.lq .acct-data-go svg{width:19px;height:19px;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
html.lq .acct-data-go:active,html.lq .acct-card-go:active{transform:translateY(4px);box-shadow:0 0 0 var(--lip)}
html.lq .acct-id:focus-visible .acct-avatar,html.lq .acct-data-go:focus-visible,html.lq .acct-card-go:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
html.lq .acct-id:focus-visible .acct-avatar{outline-color:#fff}

/* Réglages : listes blanches bordées, une icône lilas par ligne */
html.lq #scr-compte .account-settings-block{display:flex!important;flex-direction:column;gap:0!important}
html.lq #scr-compte .account-settings-group{display:block!important;margin:0!important}
html.lq #scr-compte .account-settings-group+.account-settings-group{margin-top:20px!important}
html.lq #scr-compte .account-settings-group-title{margin:0 4px 8px!important;font-size:14px!important;line-height:1.2!important}
html.lq #scr-compte .account-settings-list{border:2px solid var(--line)!important;border-radius:22px!important;background:#fff!important;overflow:hidden}
html.lq #scr-compte .account-setting-row{min-height:68px!important;padding:12px 14px!important;grid-template-columns:40px minmax(0,1fr) auto!important;gap:12px!important}
html.lq #scr-compte .account-setting-row+.account-setting-row{border-top:2px solid var(--line-2)}
html.lq #scr-compte .account-setting-row::after{display:none!important}
html.lq #scr-compte .account-setting-row:active{background:var(--surface-2)!important;transform:none!important}
html.lq #scr-compte .account-setting-row b{font:700 16px/1.2 var(--display)!important;color:var(--ink)}
html.lq #scr-compte .account-setting-row small{margin-top:2px!important;font-size:13.5px!important;line-height:1.35!important;color:var(--ink-2)!important}
html.lq #scr-compte .plus-row-icon{width:40px!important;height:40px!important;border-radius:13px!important;color:var(--accent-ink)!important;background:var(--accent-soft)!important;box-shadow:none!important}
html.lq #scr-compte .plus-row-icon svg{stroke:currentColor!important}
html.lq #scr-compte svg.chev{flex:none;width:18px!important;height:18px!important;color:#8E88B5!important;stroke:currentColor;transform:none}
html.lq #scr-compte .app-version-note{margin:0!important;text-align:center;font-size:13px!important;font-weight:500!important;letter-spacing:0!important;color:var(--ink-3)!important}

/* Feuilles de réglages : en-tête blanc avec poignée, fermeture en relief */
html.lq #scr-compte .plus-details[open]{
  width:min(520px,100%)!important;border:0!important;border-radius:28px 28px 0 0!important;
  background:#fff!important;box-shadow:0 -12px 40px rgba(34,28,70,.25)!important;
}
html.lq #scr-compte .plus-details[open]>summary{
  position:sticky;top:0;z-index:2;min-height:0!important;padding:26px 18px 16px!important;
  display:grid!important;grid-template-columns:minmax(0,1fr) 40px!important;column-gap:12px!important;row-gap:4px;align-items:start!important;
  background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border-bottom:2px solid var(--line-2)!important;box-shadow:none!important;
}
html.lq #scr-compte .plus-details[open]>summary::before{content:'';position:absolute;top:8px;left:50%;width:44px;height:5px;margin-left:-22px;border-radius:99px;background:#D9D3EE}
html.lq #scr-compte .plus-details[open]>summary>span{grid-column:1;font:700 21px/1.2 var(--display)!important;letter-spacing:-.012em!important;color:var(--ink)}
html.lq #scr-compte .plus-details[open]>summary>small{grid-column:1;margin:0!important;font-size:14.5px!important;line-height:1.35!important;color:var(--ink-2)!important}
html.lq #scr-compte .plus-details[open]>summary>i{
  grid-column:2;grid-row:1 / span 2;align-self:start;width:40px!important;height:40px!important;box-sizing:border-box;
  display:grid!important;place-items:center;border:2px solid var(--line);border-radius:50%;
  background:#fff!important;color:var(--ink-2)!important;box-shadow:0 3px 0 var(--lip);
  font:400 24px/1 var(--ui)!important;font-style:normal;transform:none!important;
}
html.lq #scr-compte .plus-details-body{border-top:0!important;background:#fff!important;padding-bottom:calc(var(--safe-bottom) + 12px)!important}
html.lq #scr-compte .plus-details-body>.acc-row{min-height:66px;padding:12px 18px!important;gap:12px!important;background:#fff!important}
html.lq #scr-compte .plus-details-body>.acc-row+.acc-row{border-top:2px solid var(--line-2)}
html.lq #scr-compte .plus-details-body>.acc-row::after{display:none!important}
html.lq #scr-compte .acc-row:active{background:var(--surface-2)!important;transform:none!important}
html.lq #scr-compte .acc-row .at b{font:700 16px/1.2 var(--display)!important;color:var(--ink)}
html.lq #scr-compte .acc-row .at small{margin-top:2px!important;font-size:13.5px!important;line-height:1.35!important;color:var(--ink-2)!important}
html.lq #scr-compte .acc-row.danger .at b{color:var(--danger)!important}
html.lq #scr-compte .acc-row-ico{flex:none;width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink)}
html.lq #scr-compte .acc-row-ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html.lq #scr-compte .acc-row-ico.danger{background:var(--danger-soft);color:var(--danger)}
html.lq #scr-compte .account-data-note{margin:16px 18px 8px!important;padding:13px 14px!important;border-radius:16px!important;background:var(--accent-soft)!important;color:var(--accent-lip)!important;font-size:14.5px!important;line-height:1.45!important;font-weight:600!important}
html.lq #scr-compte .acc-note{margin:14px 18px 4px!important;padding:12px 14px!important;border-radius:16px;background:var(--accent-soft);color:var(--accent-lip)!important;font-size:14px!important;font-weight:600}
html.lq #scr-compte .acc-field{padding:16px 18px 18px!important;border-bottom:2px solid var(--line-2)!important;background:#fff!important}
html.lq #scr-compte .acc-field label{margin-bottom:8px;font:700 15px/1.2 var(--display)!important;color:var(--ink)!important}
html.lq #scr-compte .acc-field input{min-height:50px;box-sizing:border-box;border:2px solid var(--line)!important;border-radius:16px!important;background:#fff!important;font-size:16px!important}
html.lq #scr-compte .acc-field input:focus{border-color:var(--accent)!important;box-shadow:0 0 0 4px var(--accent-soft)!important}
html.lq #scr-compte .acc-save{min-height:52px;margin-top:12px!important;border:0!important;border-radius:16px!important;background:var(--accent)!important;color:#fff!important;font:700 16px/1.2 var(--display)!important;box-shadow:0 4px 0 var(--accent-lip)!important;transition:transform .12s var(--press),box-shadow .12s var(--press)!important}
html.lq #scr-compte .acc-save:active{transform:translateY(4px)!important;box-shadow:0 0 0 var(--accent-lip)!important}
/* Rappel : interrupteur violet, créneaux en relief */
html.lq #scr-compte .acc-toggle{background:var(--lip)!important;box-shadow:none!important}
html.lq #scr-compte .acc-toggle.on{background:var(--accent)!important}
html.lq .screen:has(.plus-details[open]) .account-sheet-backdrop{background:rgba(34,28,70,.4)!important}
/* Confort de lecture : de vrais interrupteurs (comme le rappel), pas des cases */
html.lq .reading-option{gap:16px!important;border-top:2px solid var(--line-2)!important}
html.lq .reading-option b{font:700 16px/1.25 var(--display)!important;color:var(--ink)}
html.lq .reading-option small{font-size:13.5px!important;line-height:1.4!important;color:var(--ink-2)!important}
html.lq .reading-option input[type=checkbox]{
  -webkit-appearance:none;appearance:none;flex:none;position:relative;width:51px!important;height:31px!important;margin:0;
  border-radius:999px;background:var(--lip);cursor:pointer;transition:background-color .2s ease;
}
html.lq .reading-option input[type=checkbox]::before{
  content:'';position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgba(34,28,70,.22);transition:transform .2s var(--press);
}
html.lq .reading-option input[type=checkbox]:checked{background:var(--accent)}
html.lq .reading-option input[type=checkbox]:checked::before{transform:translateX(20px)}
html.lq #scr-compte .reading-preferences-sheet{padding:4px 18px 8px!important}
html.lq .reading-preferences-sheet .reading-option:first-of-type{border-top:0!important}
html.lq #reading-preferences-status{margin:8px 0 0;font-size:13px;line-height:1.4;font-weight:600;color:var(--accent-ink)}
html.lq #reading-preferences-status:empty{display:none}
html.lq #scr-compte .reading-preferences-sheet .reading-system-note{font-size:13px!important;color:var(--ink-3)!important}
/* Feuille gardée ouverte pendant un changement de réglage : pas de nouvelle apparition */
html.lq #scr-compte .plus-details.is-kept[open],html.lq .account-sheet-backdrop.is-kept{animation:none!important}

/* Écran large (l'app reste une colonne) : dans la carte violette, le
   profil à gauche et le prochain cap à droite. */
@media (min-width:600px){
  html.lq .acct-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:20px;padding:20px}
  html.lq .acct-level{margin-top:0}
}

/* ---------- 17. Défis ---------- */
html.lq #scr-defis .def-focus{padding:18px!important}
html.lq .def-focus-total{color:#fff!important}
html.lq .def-focus-total b{color:#fff!important;font-family:var(--display)!important}
html.lq .def-focus-level{background:#fff!important;color:var(--m-ink)!important;font-family:var(--display)!important;text-transform:none!important;letter-spacing:0!important;font-size:12.5px!important;border-radius:999px!important;padding:4px 10px!important}
html.lq .def-focus-copy h2{font-size:24px!important;line-height:1.12!important}
html.lq .def-focus-progress strong{color:#fff!important}
html.lq .def-progress-ring{background:conic-gradient(#fff calc(var(--p)*1%),rgba(255,255,255,.26) 0)!important}
html.lq .def-progress-ring::after{background:var(--m)!important}
html.lq #scr-defis .def-list{border-radius:22px!important;overflow:hidden}
html.lq .def-row{min-height:74px}
html.lq .def-row+.def-row{border-top:2px solid var(--line-2)!important}
html.lq .def-row-num{width:40px!important;height:40px!important;border-radius:13px!important;background:var(--surface-2)!important;color:var(--ink-2)!important;font-family:var(--display)!important;font-weight:700!important;font-size:15px!important;box-shadow:0 3px 0 var(--lip)!important}
html.lq .def-row.done .def-row-num{background:var(--success-fill)!important;color:#fff!important;box-shadow:0 3px 0 var(--success-lip)!important}
html.lq .def-row-copy b{font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink)}
html.lq .def-row-valid em{font-family:var(--display);font-style:normal;font-weight:700;color:var(--success)}

/* ---------- 18. Console, Notes ---------- */
html.lq .console-quick-actions{border-radius:22px!important;overflow:hidden}
html.lq .console-quick-action+.console-quick-action{border-top:2px solid var(--line-2)!important}
html.lq .console-quick-action b,html.lq .console-project-copy b{font-family:var(--display);font-weight:700;font-size:16.5px;color:var(--ink)}
html.lq .console-quick-action.primary b{color:var(--accent-ink)}
html.lq .console-quick-icon,html.lq .console-project-icon{border-radius:14px!important;background:var(--accent-soft)!important;color:var(--accent-ink)!important;box-shadow:none!important}
html.lq .console-quick-icon svg,html.lq .console-project-icon svg{stroke:currentColor!important}
html.lq .console-project-list{border-radius:22px!important;overflow:hidden}
html.lq .console-project-copy em{font-family:var(--display);font-style:normal;font-weight:700;color:var(--accent-ink)}
html.lq .console-project-copy small.is-muted{color:#A49FC0;font-style:italic}
/* Descriptions du projet et des tables (Elisa, 29 octobre) : un texte qu’on touche pour le modifier. */
html.lq .console-desc{display:flex;align-items:flex-start;gap:8px;width:100%;max-width:440px;box-sizing:border-box;margin:12px 0 2px;padding:11px 13px;border:2px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 3px 0 var(--lip);color:var(--ink-2);font-weight:500;font-size:14.5px;line-height:1.42;font-family:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s,box-shadow .12s}
html.lq .console-desc[hidden]{display:none}
html.lq .console-desc:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
html.lq .console-desc span{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
html.lq .console-desc i{flex:none;width:18px;height:18px;margin-top:1px;color:var(--accent-ink);opacity:.75}
html.lq .console-desc i svg{width:18px;height:18px;display:block}
html.lq .console-desc.is-empty{align-items:center;border-style:dashed;background:transparent;box-shadow:none;color:var(--accent-ink);font-weight:700}
html.lq .console-desc.is-empty span{flex:0 1 auto}
html.lq .console-desc.is-empty i{opacity:1}
html.lq .console-desc.is-empty:active{transform:scale(.98)}
/* Lignes de tables : le nom en entier, des actions en icônes (Restaurer, Supprimer). */
html.lq #scr-console .console-schema-panel .db-trow{gap:6px;padding:6px 6px 6px 4px}
html.lq #scr-console .console-schema-panel .db-tmain{padding:6px 4px;gap:7px}
html.lq #scr-console .console-schema-panel .db-trow .tn{flex:0 1 auto}
html.lq #scr-console .console-schema-panel .db-trow .tc{margin-left:auto;padding-left:4px}
html.lq #scr-console .console-schema-panel :is(.db-trow,.db-tdetail) .tb.reset-table span{display:none}
html.lq #scr-console .console-schema-panel :is(.db-trow,.db-tdetail) .tb.reset-table,html.lq #scr-console .console-schema-panel :is(.db-trow,.db-tdetail) .tb.drop-table{width:36px;min-width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center}
html.lq :is(.db-trow,.db-tdetail) .tb.drop-table svg{width:17px;height:17px;display:block}
html.lq .db-tnote{display:flex;align-items:flex-start;gap:6px;width:100%;box-sizing:border-box;margin:0;padding:6px 12px 9px 46px;border:0;background:transparent;color:var(--ink-3);font-weight:500;font-size:13px;line-height:1.38;font-family:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.lq .db-tnote span{flex:1;min-width:0}
html.lq .db-tnote i{flex:none;width:14px;height:14px;margin-top:2px;opacity:0;color:var(--accent-ink);transition:opacity .16s}
html.lq .db-tnote i svg{width:14px;height:14px;display:block}
html.lq .db-trow.open+.db-tnote i,html.lq .db-tnote:focus-visible i{opacity:.8}
@media (hover:hover) and (pointer:fine){html.lq .db-tnote:hover i{opacity:.8}}
html.lq .db-tnote.is-empty{align-items:center;color:var(--accent-ink);font-weight:700}
html.lq .db-tnote.is-empty span{flex:0 1 auto}
html.lq .db-tnote.is-empty i{opacity:1}
/* Projet vide : une invitation à la place des exemples. */
html.lq .console-empty{margin:0 0 16px;padding:22px 18px 18px;border:2px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 3px 0 var(--lip);text-align:center}
html.lq .console-empty[hidden]{display:none}
html.lq .console-empty-ico{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 10px;border-radius:17px;background:var(--accent-soft);font-size:25px}
html.lq .console-empty>b{display:block;font-family:var(--display);font-weight:700;font-size:19px;color:var(--ink)}
html.lq .console-empty>p{margin:6px auto 0;max-width:330px;font-size:15px;line-height:1.45;color:var(--ink-2)}
html.lq .console-empty-btns{display:grid;gap:10px;margin-top:16px}
html.lq .console-empty-btns button{width:100%;min-height:50px;font-size:16px!important;cursor:pointer}
html.lq #scr-console .chips-wrap[hidden]{display:none}
html.lq .notes-overview{padding:18px!important}
html.lq .notes-overview-icon{background:rgba(255,255,255,.2)!important;color:#fff!important;border-radius:16px!important}
html.lq .notes-overview-icon svg{stroke:#fff!important}
html.lq .notes-overview-copy b{font-size:21px!important}
html.lq .notes-empty{padding:22px 18px!important}
html.lq .notes-empty>b{font-family:var(--display);font-weight:700;font-size:19px}
html.lq .notes-starters button{border:2px solid var(--line)!important;background:#fff!important;color:var(--accent-ink)!important;border-radius:999px!important;box-shadow:0 3px 0 var(--lip)!important;font-family:var(--display)!important;font-weight:700!important;transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq .notes-starters button:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)!important}
html.lq .ncard{border:2px solid var(--line)!important;border-radius:20px!important;box-shadow:0 3px 0 var(--lip)!important;background:#fff!important}
/* Notes : chaque carte repose directement sur le fond de la page. Le cadre blanc de la liste
   (fond, bordure, coins arrondis, rognage) créait un halo blanc derrière les cartes et
   coupait leur relief en bas. */
html.lq .notes-list,html.lq #notes-screen-body .notes-list{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;overflow:visible;gap:12px;padding:0 0 3px}

/* ---------- 19. Cartes mémo, Entretien ---------- */
html.lq .coll-overview{padding:18px!important}
html.lq .coll-overview-copy strong{font-size:21px!important}
html.lq .coll-overview-next{border-color:rgba(255,255,255,.22)!important}
html.lq .coll-overview-next b{color:#fff!important;font-family:var(--display)!important}
html.lq .coll-module,html.lq .ent-topic{border:2px solid var(--line)!important;border-radius:22px!important;box-shadow:0 4px 0 var(--lip)!important;background:#fff!important}
html.lq .coll-module>summary,html.lq .ent-topic>summary{transition:transform .12s var(--press)}
html.lq .coll-module-num,html.lq .ent-topic-num{width:42px!important;height:42px!important;border-radius:14px!important;background:var(--accent)!important;color:#fff!important;font-family:var(--display)!important;font-size:16px!important;font-weight:700!important;box-shadow:0 3px 0 var(--accent-lip)!important}
html.lq .coll-module.complete .coll-module-num,html.lq .ent-topic.complete .ent-topic-num{background:var(--success-fill)!important;box-shadow:0 3px 0 var(--success-lip)!important}
html.lq .coll-module-num svg,html.lq .ent-topic-num svg{stroke:#fff!important}
html.lq .coll-module-copy b,html.lq .ent-topic-copy b{font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink)}
html.lq .coll-module-side em,html.lq .ent-topic-side em{border-radius:999px!important;font-family:var(--display)!important;font-weight:700!important;background:var(--surface-2)!important}
/* Révision du jour dans la carte « Ta collection » */
html.lq .coll-review{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:14px;border-top:2px solid rgba(255,255,255,.22)}
html.lq .coll-review-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;color:#fff}
html.lq .coll-review-copy small{font:600 13px/1.2 var(--display);color:#fff}
html.lq .coll-review-copy b{font:700 22px/1.1 var(--display);letter-spacing:-.015em;color:#fff}
html.lq .coll-review-copy span{font-size:13px;line-height:1.35;color:#fff;overflow-wrap:anywhere}
html.lq .coll-review-go{
  flex:none;min-height:48px;padding:0 18px;border:0;border-radius:16px;background:#fff;color:var(--accent-ink);
  font:700 16px/1 var(--display);box-shadow:0 4px 0 rgba(20,10,60,.24);cursor:pointer;
  transition:transform .12s var(--press),box-shadow .12s var(--press);
}
html.lq .coll-review-go:active{transform:translateY(4px);box-shadow:0 0 0 rgba(20,10,60,.24)}
/* Les cartes mémo (Elisa, 29 octobre, 18 h 54) : des cartes blanches en relief, la notion en grand, son rôle,
   puis la syntaxe sur une ligne sombre colorée comme dans l’éditeur. L’état se lit d’un coup d’œil :
   pastille violette « Acquise » (le vert passe au violet sur cet écran, voir « Moins de couleurs »),
   pastille et bord ambre « À revoir » (l’orange sert aux retards). */
html.lq .coll-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;padding:10px 14px 18px}
html.lq .coll-card{
  position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;min-height:128px;box-sizing:border-box;
  padding:14px 12px 12px;border:2px solid var(--line);border-radius:20px;background:#fff;color:var(--ink);text-align:left;font:inherit;
  box-shadow:0 4px 0 var(--lip);cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .12s var(--press),box-shadow .12s var(--press),border-color .15s;
}
html.lq .coll-card.is-wide{grid-column:1/-1}
html.lq .coll-card:active{transform:translateY(4px);box-shadow:0 0 0 var(--lip)}
html.lq .coll-card:focus-visible{outline:3px solid var(--accent-ink);outline-offset:3px}
@media (hover:hover) and (pointer:fine){html.lq .coll-card:not(.lock):hover{border-color:var(--accent-mid,#B8A6FF)}}
html.lq .coll-card-body{display:flex;flex-direction:column;gap:4px;min-width:0}
html.lq .coll-card-k{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:700 17px/1.18 var(--display);letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
html.lq .coll-card-k.is-sql{font:700 16.5px/1.2 var(--mono);letter-spacing:-.02em;color:var(--accent-ink)}
html.lq .coll-card-t{display:block;font-size:13px;line-height:1.3;color:var(--ink-2)}
html.lq .coll-card-code{
  display:block;margin-top:auto;padding:7px 9px;border-radius:11px;background:var(--code-bg,#1D1A33);color:#EEEAFF;
  font:600 11.5px/1.35 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html.lq .coll-card-code .t-kw{color:var(--t-kw);font-weight:700}
html.lq .coll-card-code .t-fn{color:var(--t-fn)}
html.lq .coll-card-code .t-str,html.lq .coll-card-code .t-num{color:var(--t-str)}
html.lq .coll-card-code .t-com{color:var(--t-com)}
/* Pastilles d’état, posées comme une étiquette sur le bord haut */
html.lq .coll-badge{
  position:absolute;top:-10px;right:10px;z-index:1;padding:4px 9px;border-radius:999px;
  font:700 11px/1.1 var(--display);font-style:normal;white-space:nowrap;box-shadow:0 2px 0 rgba(34,28,70,.12);
}
html.lq .coll-badge.is-ok{background:var(--success-soft);color:var(--success);box-shadow:inset 0 0 0 1.5px rgba(83,53,224,.22)}
html.lq .coll-badge.is-ok::before{content:'✓ '}
html.lq .coll-badge.is-due{background:var(--warn-fill);color:#3D2600}
html.lq .coll-card.is-due{border-color:var(--warn-fill);box-shadow:0 4px 0 #E2A11B}
html.lq .coll-card.is-due:active{box-shadow:0 0 0 #E2A11B}
/* Carte à débloquer : en pointillés, avec la leçon qui la donne */
html.lq .coll-card.lock{
  min-height:112px;gap:8px;border:2px dashed #D6CFF0;background:rgba(255,255,255,.45);box-shadow:none;color:var(--ink-3);
}
html.lq .coll-card.lock:active{transform:scale(.98);box-shadow:none}
html.lq .coll-card-lock{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--surface-2);color:#9C93C9}
html.lq .coll-card-lock svg{width:16px;height:16px}
html.lq .coll-card-lab{font:600 11.5px/1.2 var(--display);color:var(--ink-3)}
html.lq .coll-card-lesson{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:700 14.5px/1.25 var(--display);color:var(--ink-2)}
html.lq .coll-card-go{margin-top:auto;font:700 12.5px/1.2 var(--display);color:var(--accent-ink)}
html.lq .coll-card-go::after{content:' ›'}
html.lq .coll-card.unlocking{animation:lqNodeIn .5s var(--pop) both}
/* Avancement du module : 8/10, en violet plein quand il est complet */
html.lq .coll-module.complete .coll-module-side em{background:var(--accent)!important;color:#fff!important}
@media (min-width:600px){html.lq .coll-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}html.lq .coll-card.is-wide{grid-column:auto}}
html.lq .ent-hero{padding:18px!important}
html.lq .ent-hero-txt b{font-size:22px!important}
html.lq .ent-hero-stats strong,html.lq .ent-hero-stats span{color:#fff!important}
html.lq .ent-progress-line{background:rgba(255,255,255,.26)!important;height:10px!important;border-radius:99px!important}
html.lq .ent-progress-line i{background:#fff!important;border-radius:99px!important}
html.lq .ecard{border-radius:18px!important}

/* ---------- 20. Leçons : cadre, étapes, titres ---------- */
html.lq #scr-lesson:not([data-mc]){--m:#6A4DF4;--m-lip:#4B30CC;--m-soft:#EFEAFF;--m-mid:#B8A6FF;--m-ink:#5335E0}
html.lq #scr-lesson .navbar{
  background:var(--bg)!important;border-bottom:2px solid var(--line)!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
html.lq #scr-lesson .navbar .back{gap:8px;color:var(--accent-ink);font-family:var(--display);font-weight:700;font-size:16px}
html.lq #scr-lesson .navbar .back svg{
  overflow:visible;box-sizing:content-box;width:9px;height:15px;padding:7px 10px 7px 9px;border-radius:50%;
  background:#fff;border:2px solid var(--line);box-shadow:0 3px 0 var(--lip);
  transition:transform .12s var(--press),box-shadow .12s var(--press);
}
html.lq #scr-lesson .navbar .back:active svg{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
/* Pas de fond teinté derrière « ‹ Défis » quand on appuie : seule la flèche s'enfonce. */
html.lq #scr-lesson .navbar .back,html.lq #scr-lesson .navbar .back:active,html.lq #scr-lesson .navbar .back:focus{background:none!important;box-shadow:none!important;-webkit-tap-highlight-color:transparent}
html.lq #scr-lesson .nav-title{font-family:var(--display);font-weight:700}
/* Le titre (Défi, Révision…) prend la place laissée par le retour, sans le
   chevaucher même avec un libellé long comme « Cartes mémo ». 21 h 29 (« le Salle de défi en haut n’est pas centré, faire attention
   aux autres pages aussi ») : au milieu de l’écran, quelle que soit la largeur du retour : trois colonnes, les deux côtés à parts
   égales (le retour à gauche ; à droite, la place du bouton des notes ou des outils) ; quand la place manque, le titre se décale
   plutôt que de toucher l’un ou l’autre, et se coupe d’une ellipse. Pour toutes les pages qui ont cette barre (leçons, défis,
   révisions, salle de défi). */
html.lq #scr-lesson .navbar{display:grid;grid-template-columns:minmax(max-content,1fr) minmax(0,max-content) minmax(var(--nav-r,46px),1fr);align-items:center;column-gap:10px}
html.lq #scr-lesson .navbar.has-tools{--nav-r:96px}
html.lq #scr-lesson .navbar .back{grid-column:1;justify-self:start;max-width:none;min-width:0}
html.lq #scr-lesson .navbar #back-label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
html.lq #scr-lesson .navbar .nav-title{grid-column:2;position:static!important;min-width:0;margin:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Étapes Leçon · Exercice · Quiz */
html.lq #scr-lesson .ls-bars{margin:6px 0 20px!important;padding:0 2px!important}
html.lq #scr-lesson .ls-bar{gap:7px!important;color:var(--ink-3)!important}
html.lq #scr-lesson .ls-bar:not(:last-child)::after{top:17px!important;left:calc(50% + 22px)!important;width:calc(100% - 44px)!important;height:5px!important;border-radius:5px!important;background:var(--line)!important}
html.lq #scr-lesson .ls-bar.done:not(:last-child)::after{background:var(--m)!important}
html.lq #scr-lesson .ls-node{
  width:38px!important;height:38px!important;border-radius:50%!important;background:#fff!important;border:2px solid var(--line)!important;
  font-family:var(--display)!important;font-size:15px!important;font-weight:700!important;box-shadow:0 3px 0 var(--lip)!important;
  transition:transform .12s var(--press),box-shadow .12s var(--press),background .2s!important;
}
html.lq #app .ls-bar:not(.on):not(.done) .ls-node{color:var(--ink-3)!important}
html.lq #scr-lesson .ls-bar.done .ls-node{background:var(--m)!important;border-color:var(--m)!important;color:#fff!important;box-shadow:0 3px 0 var(--m-lip)!important}
html.lq #scr-lesson .ls-bar.on .ls-node{background:var(--m)!important;border-color:var(--m)!important;color:#fff!important;box-shadow:0 3px 0 var(--m-lip),0 0 0 6px var(--m-soft)!important;transform:none!important;animation:none!important}
html.lq #scr-lesson .ls-bar:active .ls-node{transform:translateY(3px)!important;box-shadow:0 0 0 var(--lip)!important}
html.lq #scr-lesson .ls-bar small{font-family:var(--display)!important;font-size:12.5px!important;font-weight:700!important}
html.lq #scr-lesson .ls-bar.on,html.lq #scr-lesson .ls-bar.done{color:var(--m-ink)!important}
html.lq #scr-lesson .ls-bar.lock{opacity:.55!important}
/* Titre de la leçon */
html.lq #scr-lesson .l-kicker{
  display:inline-flex;align-items:center;gap:5px;width:max-content;max-width:100%;margin:4px 0 8px!important;padding:5px 12px;border-radius:999px;
  background:var(--m-soft);color:var(--m-ink)!important;font-size:13.5px!important;
}
html.lq #scr-lesson .l-kicker-mod{color:inherit!important;font:inherit!important;text-transform:none!important;letter-spacing:0!important;opacity:.85}
html.lq #scr-lesson .lesson-rich>h1,html.lq #scr-lesson .l-kicker+h1,html.lq #scr-lesson .ls-main>h1{
  font-family:var(--display)!important;font-size:37px!important;font-weight:700!important;letter-spacing:-.026em!important;line-height:1.02!important;color:var(--ink)!important;margin-top:0!important;
}
html.lq #scr-lesson .l-sub{font-family:var(--display);font-size:18px!important;font-weight:600;color:var(--ink-2)!important}
/* Blocs de cours */
html.lq #scr-lesson .concept-block{padding:22px 20px!important;border-radius:26px!important}
html.lq #scr-lesson .concept-block h2,html.lq #scr-lesson .lesson-rich h2{font-family:var(--display)!important;font-weight:700!important;letter-spacing:-.018em!important;color:var(--ink)}
html.lq #scr-lesson .h2-eye{display:flex!important;align-items:center;gap:8px;margin:0 0 8px!important;color:var(--m-ink)!important;font-size:14.5px!important}
html.lq #scr-lesson .h2-eye::before{content:'';flex:none;width:11px;height:11px;border-radius:4px;background:var(--m);box-shadow:0 2px 0 var(--m-lip)}
html.lq #scr-lesson .h2-eye::after{display:none!important}
html.lq #scr-lesson .h2-txt{font-family:var(--display)!important;font-size:22px!important;font-weight:700!important;letter-spacing:-.018em!important;line-height:1.2!important}
html.lq #scr-lesson .concept-block>p:not([class]),html.lq #scr-lesson .concept-block>ul>li:not([class]),html.lq #scr-lesson .lesson-lead .situation-body{color:#2A2550!important}
html.lq #scr-lesson .pt-syntax-h{font-family:var(--display)!important;font-weight:700!important;font-size:17px!important;color:var(--ink)!important}
html.lq #scr-lesson .concept-block code,html.lq #scr-lesson .lesson-lead code,html.lq #scr-lesson .consigne code,html.lq #scr-lesson .card code,html.lq #scr-lesson .hint-box code,html.lq #scr-lesson .piege code{
  background:var(--m-soft)!important;color:var(--m-ink)!important;border-radius:7px!important;font-weight:650!important;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
/* Sommaire */
html.lq #scr-lesson .sommaire{border-radius:24px!important;overflow:hidden}
html.lq #scr-lesson .sommaire-t{color:var(--m-ink)!important;border-bottom:2px solid var(--line-2)!important;padding:15px 18px 12px!important}
/* Le titre « Sommaire » est plus grand que les titres de parties qu'il liste (11 px contre 15,5 px auparavant). */
html.lq #app .sommaire-t{gap:10px!important;font:700 21px/1.15 var(--display)!important;letter-spacing:-.015em!important;text-transform:none!important}
html.lq #app .sommaire-t svg{width:20px!important;height:20px!important}
html.lq #app .sommaire-t .som-count{font-size:14px!important;line-height:1!important;padding:5px 12px!important;letter-spacing:0!important}
html.lq #scr-lesson .som-count{background:var(--m-soft)!important;color:var(--m-ink)!important;font-family:var(--display)!important;font-weight:700!important;border-radius:999px!important}
html.lq #scr-lesson .som-item+.som-item{border-top:2px solid var(--line-2)!important}
html.lq #scr-lesson .som-item .som-n{width:30px!important;height:30px!important;border-radius:10px!important;background:var(--m-soft)!important;color:var(--m-ink)!important;font-family:var(--display)!important;font-weight:700!important;font-size:13.5px!important}
html.lq #scr-lesson .som-item:active .som-n{background:var(--m)!important;color:#fff!important;transform:scale(1.1)}
html.lq #scr-lesson .som-t{font-family:var(--display);font-weight:700;font-size:15.5px;letter-spacing:-.005em;color:var(--ink)}

/* ---------- 20 bis. Repère de lecture dans une leçon ----------
   En descendant, l'en-tête reste : il indique la partie en cours et la
   progression ; le toucher ouvre le sommaire. */
html.lq #scr-lesson .navbar.has-where.nav-away{transform:none!important}
html.lq body.in-lesson:has(#scr-lesson.active .navbar.has-where) #fab{transform:none!important;opacity:1!important;pointer-events:auto!important}
html.lq #scr-lesson .ls-where{
  display:none;position:absolute;left:62px;right:62px;top:calc(var(--safe-top) + 2px);height:48px;
  flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0 4px;border:0;border-radius:14px;
  background:none;color:var(--ink);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
html.lq #scr-lesson .navbar.where-on .ls-where:not([hidden]){display:flex}
html.lq #scr-lesson .navbar.where-on #back-label,html.lq #scr-lesson .navbar.where-on .nav-title{visibility:hidden}
html.lq #scr-lesson .ls-where:active{background:var(--surface-2)}
/* Outils du cours : schéma de la base et notes, à droite de l'en-tête. Le repère de lecture leur laisse la place, et la bulle « Notes » s'efface. */
html.lq #scr-lesson .navbar .nav-tools{position:absolute;right:12px;top:calc(var(--safe-top) + 6px);display:flex;gap:2px;z-index:2}
html.lq #scr-lesson .navbar .nav-tools[hidden]{display:none}
/* Chaque outil est un seul bouton : la pastille ronde de l'icône, et sous elle son nom (une icône seule ne dit pas ce qu'elle ouvre). */
html.lq #scr-lesson .nav-tool{position:relative;box-sizing:border-box;min-width:44px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 2px;border:0;background:none;color:var(--accent-ink);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.lq #scr-lesson .nav-tool-ico{box-sizing:border-box;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#fff;border:2px solid var(--line);box-shadow:0 3px 0 var(--lip);transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq #scr-lesson .nav-tool-ico svg{width:19px;height:19px}
html.lq #scr-lesson .nav-tool-t{font:700 10.5px/1.1 var(--display);letter-spacing:.01em;white-space:nowrap}
html.lq #scr-lesson .nav-tool:active .nav-tool-ico{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
html.lq #scr-lesson .navbar.has-tools .ls-where{right:106px}
/* Place sous les noms des outils (« Schéma », « Notes ») : ils touchaient le filet du bas de la barre (Elisa, 31 octobre, 13 h 20, Réf 2). */
html.lq #scr-lesson .navbar.has-tools{padding-bottom:17px!important}
html.lq body.in-lesson:has(#scr-lesson.active .navbar.has-tools) #fab{display:none!important}
html.lq #scr-lesson .ls-where small{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:700 12px/1.15 var(--display);color:var(--m-ink,var(--accent-ink))}
html.lq #scr-lesson .ls-where-t{display:flex;align-items:center;gap:4px;max-width:100%;min-width:0}
html.lq #scr-lesson .ls-where-t b{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:700 15.5px/1.2 var(--display);letter-spacing:-.01em;color:var(--ink)}
html.lq #scr-lesson .ls-where-t svg{flex:none;width:13px;height:13px;color:var(--ink-3)}
html.lq #scr-lesson .ls-where-bar{display:none;position:absolute;left:0;right:0;bottom:-2px;height:3px;overflow:hidden;pointer-events:none}
html.lq #scr-lesson .navbar.where-on .ls-where-bar{display:block}
html.lq #scr-lesson .ls-where-bar>i{display:block;height:100%;background:var(--m,var(--accent));transform-origin:0 50%;transform:scaleX(0);border-radius:0 3px 3px 0}
html.lq .ls-where-panel{position:fixed;inset:0;z-index:70}
html.lq .ls-where-panel[hidden]{display:none}
html.lq .ls-where-scrim{position:absolute;inset:0;background:rgba(34,28,70,.28)}
html.lq .ls-where-sheet{
  position:absolute;left:12px;right:12px;top:calc(var(--safe-top) + 58px);max-width:496px;margin:0 auto;max-height:min(68vh,520px);overflow:auto;
  padding:8px;border:2px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 18px 40px -18px rgba(34,28,70,.5);
  animation:lqWhereIn .18s cubic-bezier(.25,.8,.25,1) both;
}
@keyframes lqWhereIn{from{transform:translateY(-8px)}to{transform:none}}
html.lq .ls-where-list{display:flex;flex-direction:column;gap:2px}
html.lq .ls-where-item{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;box-sizing:border-box;padding:8px 10px;border:0;border-radius:14px;background:none;text-align:left;font:inherit;color:var(--ink);cursor:pointer}
html.lq .ls-where-item:active{background:var(--surface-2)}
html.lq .ls-where-item .som-n{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink);font:700 13px/1 var(--display)}
html.lq .ls-where-item .som-t{min-width:0;font:700 15px/1.3 var(--display);letter-spacing:-.005em}
html.lq .ls-where-item.is-on{background:var(--accent-soft)}
html.lq .ls-where-item.is-on .som-n{background:var(--accent);color:#fff}

/* ---------- 21. Code : cadres, éditeur, résultats ---------- */
html.lq .exframe{
  border:0!important;border-radius:22px!important;background:var(--code-bg)!important;
  box-shadow:0 5px 0 #151130!important;overflow:hidden;
}
html.lq .exframe .xf-head{background:var(--code-bg-2)!important;border-bottom:1px solid rgba(255,255,255,.07)!important;padding:10px 12px 10px 16px!important}
html.lq .exframe .xf-name{color:#ABA4D8!important}
html.lq .exframe .xf-name::before{background:#5A5387!important;box-shadow:14px 0 0 #5A5387,28px 0 0 #5A5387!important;opacity:1!important}
html.lq .exframe .ex-code,html.lq .ex-code{background:var(--code-bg)!important;color:var(--code-ink)!important}
html.lq .exframe .xf-actions{background:var(--code-bg)!important;border-top:1px solid rgba(255,255,255,.07)!important;padding:12px 14px 16px!important}
html.lq .exframe .xf-result{background:#fff!important;border-top:0!important}
/* Partie mise en avant dans une requête du cadre « Exécuter » (celle que montrait le cadre surligné juste avant). */
html.lq .exframe .ex-code .fk-syn-hit{display:inline;margin:0 -3px;padding:1px 3px;border-radius:5px;background:rgba(124,92,255,.34);box-shadow:inset 0 0 0 1px rgba(176,158,255,.6);color:inherit;animation:none;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Résultat d'un exemple : la zone blanche remonte en arrondi sur le bloc sombre (plus de coupure
   nette), et le texte du tableau s'aligne à gauche, les nombres restant à droite. */
html.lq .exframe .xf-actions:has(+ .xf-result:not([hidden])){padding-bottom:34px!important}
html.lq .exframe .xf-result:not([hidden]){position:relative;margin-top:-18px;border-radius:22px 22px 0 0}
/* Dans les cartes Situation / Piège, le résultat était décalé de 12 px et laissait un épais contour noir tout autour :
   il reste pleine largeur, comme dans les autres cadres, quel que soit l'endroit où l'exemple est placé. */
html.lq .exframe .xf-result:not([hidden]){margin-left:0!important;margin-right:0!important;margin-bottom:0!important}
/* Résultat affiché : le bas du cadre est blanc, le relief noir formait un croissant sombre sous les coins.
   Il laisse place à une ombre douce. */
html.lq .exframe:has(>.xf-result:not([hidden])){box-shadow:0 10px 22px -14px rgba(21,17,48,.5)!important}
/* Dézoom du navigateur : les arrondis de pixels laissaient filtrer le fond sombre du cadre en fin liseré noir autour de la
   zone blanche. Le fond du cadre devient blanc dès qu'un résultat est affiché (l'en-tête, le code et le bouton gardent
   leur propre fond sombre), et la zone blanche déborde d'un pixel de chaque côté, rogné par le cadre. */
html.lq .exframe:has(>.xf-result:not([hidden])){background:#fff!important}
html.lq .exframe .xf-result:not([hidden]){margin-left:-1px!important;margin-right:-1px!important}
html.lq .exframe .xf-result .table-wrap thead th:not(.rn){text-align:center}
html.lq .exframe .xf-result .table-wrap tbody td:not(.num){text-align:center}
html.lq .exframe .sql-copy,html.lq .editor-bar .sql-copy{color:#C9C3EE!important}
html.lq .editor-shell{border-radius:22px!important;background:var(--code-bg)!important;box-shadow:0 5px 0 #151130!important;border:0!important}
html.lq .editor-bar{background:var(--code-bg-2)!important;border-bottom:1px solid rgba(255,255,255,.07)!important}
html.lq .editor-bar .fname{color:#ABA4D8!important}
/* Exécuter : même violet en relief que les autres actions principales */
html.lq .btn-run,html.lq .exframe .xf-run,html.lq #scr-lesson .xf-run{
  background:var(--accent)!important;background-image:none!important;color:#fff!important;border:0!important;border-radius:16px!important;
  min-height:54px;font-family:var(--display)!important;font-weight:700!important;font-size:17px!important;letter-spacing:0!important;
  box-shadow:0 4px 0 var(--accent-lip)!important;transform:translateY(0);
  transition:transform .12s var(--press),box-shadow .12s var(--press)!important;
}
html.lq .exframe .xf-run,html.lq #scr-lesson .exframe .xf-run{box-shadow:0 4px 0 #120E2A!important;background:#7C5CFF!important}
html.lq .btn-run:active,html.lq #scr-lesson .xf-run:active{transform:translateY(4px)!important;box-shadow:0 0 0 var(--accent-lip)!important}
html.lq .exframe .xf-run:active{transform:translateY(4px)!important;box-shadow:0 0 0 #120E2A!important}
html.lq .exframe .xf-run::after{display:none!important}
html.lq .btn-run:disabled,html.lq .exframe .xf-run:disabled{background:#3A345F!important;color:#A9A3D6!important;box-shadow:0 4px 0 #262047!important}
html.lq .exframe .xf-run.running,html.lq .btn-run.running{opacity:.9}
html.lq .xf-run-ico .ring,html.lq .btn-run svg .ring{stroke:#fff!important;opacity:.55}
html.lq .xf-run-ico .tri,html.lq .btn-run svg .tri{fill:#fff!important}
/* Boutons discrets sous l'éditeur */
html.lq .btn-ghost{
  background:#fff!important;color:var(--ink-2)!important;border:2px solid var(--line)!important;border-radius:16px!important;
  font-family:var(--display)!important;font-weight:700!important;box-shadow:0 4px 0 var(--lip)!important;
  transition:transform .12s var(--press),box-shadow .12s var(--press)!important;
}
html.lq .btn-ghost:active{transform:translateY(4px)!important;box-shadow:0 0 0 var(--lip)!important}
/* Tableaux de résultats */
html.lq .table-wrap{border:2px solid var(--line)!important;border-radius:18px!important;box-shadow:none!important}
html.lq thead th{
  font-family:var(--display)!important;text-transform:none!important;letter-spacing:0!important;font-size:13px!important;font-weight:700!important;
  color:var(--ink)!important;background:var(--m-soft,var(--surface-2))!important;border-bottom:2px solid var(--line)!important;
}
html.lq tbody td{border-bottom:2px solid var(--line-2)!important}
html.lq tbody tr:last-child td{border-bottom:0!important}
html.lq .result-meta{font-family:var(--display)!important;font-weight:600!important;color:var(--ink-2)!important}
/* Consigne d'exercice */
html.lq #scr-lesson .consigne{padding:18px!important;border-radius:24px!important}
html.lq #scr-lesson .consigne .tag{margin-bottom:8px!important;color:var(--m-ink)!important}
html.lq #scr-lesson .consigne>p:not(.tip){font-family:var(--display);font-size:19px!important;font-weight:700!important;letter-spacing:-.012em;line-height:1.3!important;color:var(--ink)!important}
html.lq #scr-lesson .consigne .tip{font-size:14px!important;line-height:1.5!important;color:var(--ink-2)!important}

html.lq :is(.ex-code,.editor-area,.qf-sql,.ob-practice-code) .t-str,html.lq .ob-practice-code .str{color:var(--t-str)!important}
html.lq :is(.ex-code,.editor-area,.qf-sql) .t-num{color:var(--t-num)!important}
html.lq :is(.ex-code,.editor-area,.qf-sql) .t-fn{color:var(--t-fn)!important}
html.lq :is(.ex-code,.editor-area,.qf-sql) .t-com{color:var(--t-com)!important}
html.lq .qf-editor{background:var(--code-bg)!important;box-shadow:0 5px 0 #151130!important;border-radius:22px!important}
html.lq .ob-practice-card{background:var(--code-bg)!important;border-radius:22px!important;box-shadow:0 5px 0 #151130!important;border:0!important}

/* ---------- 22. Barre d'action du bas ---------- */
html.lq #scr-lesson .ls-nav{
  background:#fff!important;border:2px solid var(--line)!important;border-radius:26px!important;
  box-shadow:0 14px 30px -18px rgba(34,28,70,.45)!important;padding:8px!important;gap:8px!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
html.lq #scr-lesson .ls-nav .ls-prev{min-height:54px;padding:0 16px!important;color:var(--ink-2)!important}
html.lq #scr-lesson .ls-nav .ls-next{min-height:54px}

/* ---------- 23. Quiz ---------- */
html.lq .qcm-card{padding:20px 18px 18px!important;border-radius:26px!important}
html.lq .qtag{background:var(--m-soft,var(--accent-soft))!important;color:var(--m-ink,var(--accent-ink))!important;border-radius:999px!important;padding:5px 11px!important;font-size:13px!important}
html.lq .qcm-card.ok .qtag{background:var(--success-soft)!important;color:var(--success)!important}
html.lq .qcm-card .qq,html.lq .qcm-card h3,html.lq .qcm-card .q-text{font-family:var(--display)!important;font-weight:700!important;letter-spacing:-.012em!important}
html.lq .qopts{gap:12px!important}
html.lq .qopt{
  min-height:58px;padding:13px 14px!important;border:2px solid var(--line)!important;border-radius:18px!important;background:#fff!important;
  box-shadow:0 4px 0 var(--lip)!important;font-size:15.5px!important;color:var(--ink)!important;
  transition:transform .12s var(--press),box-shadow .12s var(--press),border-color .15s,background .15s!important;
}
html.lq .qopt:active{transform:translateY(4px)!important;box-shadow:0 0 0 var(--lip)!important}
html.lq .qopt .ql{width:32px!important;height:32px!important;border-radius:11px!important;background:var(--surface-2)!important;border:2px solid var(--line)!important;color:var(--ink-2)!important;font-family:var(--display)!important;font-size:14px!important;font-weight:700!important}
html.lq .qopt.sel{border-color:var(--accent)!important;background:var(--accent-soft)!important;box-shadow:0 4px 0 var(--accent)!important}
html.lq .qopt.sel .ql{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important}
html.lq .qopt.bon{border-color:var(--success-fill)!important;background:var(--success-soft)!important;box-shadow:0 4px 0 var(--success-fill)!important;animation:lqCorrect .5s var(--pop)}
html.lq .qopt.bon .ql{background:var(--success-fill)!important;border-color:var(--success-fill)!important;color:#fff!important}
html.lq .qopt.faux{border-color:var(--danger-fill)!important;background:var(--danger-soft)!important;box-shadow:0 4px 0 var(--danger-fill)!important;animation:lqShake .45s ease}
html.lq .qopt.faux .ql{background:var(--danger-fill)!important;border-color:var(--danger-fill)!important;color:#fff!important}

/* ---------- 24. Retours : réussi / à corriger ---------- */
html.lq .feedback{border:2px solid transparent!important;border-radius:22px!important;box-shadow:none!important;background-image:none!important}
html.lq .feedback.ok{background:var(--success-soft)!important;border-color:#BFE6CF!important;animation:lqCorrect .5s var(--pop)!important}
html.lq .feedback.err{background:var(--danger-soft)!important;border-color:#F6C9CC!important;animation:lqShake .45s ease!important}
html.lq .feedback .fi{border-radius:12px!important;box-shadow:0 3px 0 rgba(0,0,0,.14)!important}
html.lq .feedback.ok .fi{background:var(--success-fill)!important}
html.lq .feedback.err .fi{background:var(--danger-fill)!important}
html.lq .feedback b{font-family:var(--display)!important;font-weight:700!important;font-size:17px!important}
/* Retours (erreur, succès, avertissement) : une puce de code ne se coupe plus en deux au retour
   à la ligne (« clients AS c1 »), sauf le message brut de l'erreur SQL, qui peut être long. */
html.lq .feedback code{-webkit-box-decoration-break:clone;box-decoration-break:clone}
html.lq .feedback p{line-height:1.7!important}
html.lq .feedback p code{white-space:nowrap}
html.lq .feedback.err p:first-child code{white-space:normal}
html.lq #scr-lesson .feedback.ok b{color:var(--success)!important}

/* ---------- 25. Fin de leçon ---------- */
html.lq #scr-lesson .bravo-hero{background:var(--success-fill)!important;border:0!important;color:#fff!important;box-shadow:0 6px 0 var(--success-lip)!important;border-radius:28px!important}
html.lq #scr-lesson .bravo-hero::before{background:radial-gradient(60% 90% at 50% 0%,rgba(255,255,255,.25),transparent 72%)!important}
html.lq #scr-lesson .bravo-hero *{color:inherit}
html.lq #scr-lesson .bravo-ring{background:conic-gradient(#fff calc(var(--p)*1%),rgba(255,255,255,.28) 0)!important;box-shadow:0 0 0 10px rgba(255,255,255,.12)!important;animation:lqNodeIn .7s var(--pop) both}
html.lq #scr-lesson .bravo-kicker{color:#fff!important;font-family:var(--display)!important;font-weight:700!important}
html.lq #scr-lesson .bravo-hero h1{font-family:var(--display)!important;font-size:40px!important;font-weight:700!important;color:#fff!important}
html.lq #scr-lesson .bravo-lesson{color:#fff!important;font-family:var(--display)!important}
html.lq #scr-lesson .bravo-lesson small{color:#fff!important}
html.lq #scr-lesson .bravo-step{background:rgba(255,255,255,.2)!important;color:#fff!important;font-family:var(--display)!important;border-radius:999px!important}
/* Fin de leçon : les boutons (Elisa, 26 octobre, 8 h 10 : « l’UI/UX au niveau des boutons est pas top, on peut faire beaucoup
   mieux »). Une seule action principale, la suite du parcours, en carte violette comme celle de l’accueil, avec son bouton blanc
   « Continuer » ; les autres actions en tuiles égales, plus discrètes, chacune avec son icône ; la carte mémo débloquée a sa ligne. */
html.lq #scr-lesson .bravo-next-btn{
  display:flex;flex-direction:column;align-items:stretch;width:100%;box-sizing:border-box;margin:4px 0 8px;
  padding:18px!important;border:0!important;border-radius:28px!important;text-align:left;color:#fff!important;
  background:radial-gradient(150px 130px at 97% 0%,rgba(255,255,255,.2),transparent 70%),radial-gradient(190px 130px at -6% 112%,rgba(255,255,255,.13),transparent 70%),var(--accent)!important;
  box-shadow:0 6px 0 var(--accent-lip)!important;transition:none!important;-webkit-tap-highlight-color:transparent;
}
html.lq #scr-lesson .bravo-next-btn:active{transform:none!important;box-shadow:0 6px 0 var(--accent-lip)!important}
html.lq #scr-lesson .bravo-next-lab{margin:0 0 4px!important;font:600 14px/1.3 var(--display)!important;letter-spacing:0!important;text-transform:none!important;color:rgba(255,255,255,.9)!important}
html.lq #scr-lesson .bravo-next-btn .bn-copy{display:block;min-width:0}
html.lq #scr-lesson .bravo-next-btn .bn-copy b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;white-space:normal;font:700 24px/1.1 var(--display)!important;letter-spacing:-.02em;color:#fff!important;text-wrap:balance}
html.lq #scr-lesson .bravo-next-btn .bn-copy small{display:block;margin-top:6px;font:500 14.5px/1.35 var(--ui);color:rgba(255,255,255,.86)!important}
html.lq #scr-lesson .bravo-next-btn .bn-cta{
  display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;margin-top:16px;border-radius:18px;
  background:#fff;color:var(--accent-ink);font:700 18px/1 var(--display);box-shadow:0 5px 0 rgba(20,10,60,.24);
  transition:transform .12s var(--press),box-shadow .12s var(--press);
}
html.lq #scr-lesson .bravo-next-btn:active .bn-cta{transform:translateY(5px);box-shadow:0 0 0 rgba(20,10,60,.24)}
html.lq #scr-lesson .bravo-next-btn .bn-num{width:28px;height:28px;flex:none;display:grid;place-items:center;border:0!important;border-radius:50%;background:var(--accent)!important;color:#fff!important;box-shadow:none!important;font:700 14px/1 var(--display)}
html.lq #scr-lesson .bravo-next-btn .bn-num svg{width:14px;height:14px;margin-left:2px;transition:transform .3s var(--pop)}
html.lq #scr-lesson .bravo-next-btn:active .bn-num svg{transform:translateX(2px) scale(1.12)}
/* Juste sous la carte Bravo (sans sticker ni récapitulatif entre les deux) : la carte passe en blanc, pour ne pas coller deux blocs violets. */
html.lq #scr-lesson .bravo-hero+.bravo-next-btn{background:#fff!important;border:2px solid var(--line)!important;box-shadow:0 5px 0 var(--lip)!important}
html.lq #scr-lesson .bravo-hero+.bravo-next-btn :is(.bravo-next-lab,.bn-copy small){color:var(--accent-ink)!important}
html.lq #scr-lesson .bravo-hero+.bravo-next-btn .bn-copy b{color:var(--ink)!important}
html.lq #scr-lesson .bravo-hero+.bravo-next-btn .bn-cta{background:var(--accent);color:#fff;box-shadow:0 5px 0 var(--accent-lip)}
html.lq #scr-lesson .bravo-hero+.bravo-next-btn:active .bn-cta{box-shadow:0 0 0 var(--accent-lip)}
html.lq #scr-lesson .bravo-hero+.bravo-next-btn .bn-num{background:#fff!important;color:var(--accent-ink)!important}
/* Les autres actions : des tuiles égales, l’icône dans sa pastille lilas, le nom dessous ; elles s’enfoncent sous le doigt. */
html.lq #scr-lesson .bravo-actions{gap:12px}
/* Des colonnes égales, jamais plus étroites que leur mot le plus long (« Recommencer » ne se coupe pas). */
html.lq #scr-lesson .bravo-tools{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(min-content,1fr);gap:8px}
html.lq #scr-lesson .bravo-tool{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;min-width:0;margin:0;
  padding:13px 6px 11px;border:2px solid var(--line);border-radius:20px;background:#fff;color:var(--ink);box-shadow:0 4px 0 var(--lip);
  font:700 13.5px/1.2 var(--display);letter-spacing:-.005em;text-align:center;cursor:pointer;
  transition:transform .12s var(--press),box-shadow .12s var(--press);animation:bravoFadeUp .42s var(--spring-ios) .4s both;
}
html.lq #scr-lesson .bravo-tool:nth-child(2){animation-delay:.46s}
html.lq #scr-lesson .bravo-tool:nth-child(3){animation-delay:.52s}
html.lq #scr-lesson .bravo-tool:active{transform:translateY(4px);box-shadow:0 0 0 var(--lip)}
html.lq #scr-lesson .bravo-tool .bi{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:14px;background:var(--accent-soft);color:var(--accent-ink);transition:transform .25s var(--pop)}
html.lq #scr-lesson .bravo-tool .bi svg{width:22px;height:22px;display:block;transition:transform .35s var(--pop)}
html.lq #scr-lesson .bravo-tool:active .bi{transform:scale(.9)}
html.lq #scr-lesson .bravo-tool.restart:active .bi svg{transform:rotate(-50deg)}
html.lq #scr-lesson .bravo-tool .bt{display:block;max-width:100%}
@media (hover:hover) and (pointer:fine){
  html.lq #scr-lesson .bravo-tool:hover{border-color:#D4CAFF}
  html.lq #scr-lesson .bravo-tool:hover .bi{transform:scale(1.06)}
}
/* La carte mémo débloquée : la carte, puis ce qu’elle est et où la retrouver. */
html.lq #scr-lesson .bravo-unlock{display:flex;align-items:center;gap:16px;margin:2px 0;animation:bravoFadeUp .42s var(--spring-ios) .3s both}
html.lq #scr-lesson .bravo-unlock .bravo-card-col{flex:none;width:132px}
html.lq #scr-lesson .bravo-unlock .bravo-gcard-stage{max-width:none}
html.lq #scr-lesson .bravo-unlock-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
html.lq #scr-lesson .bravo-unlock-copy small{font:700 13.5px/1.2 var(--display);color:var(--accent-ink)}
html.lq #scr-lesson .bravo-unlock-copy b{font:700 19px/1.15 var(--display);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
html.lq #scr-lesson .bravo-unlock-copy p{margin:2px 0 0;font-size:14px;line-height:1.4;color:var(--ink-2);text-wrap:balance}
/* Une question en feuille (lqAsk) : « Recommencer cette leçon ? » s’affiche dans le style de l’app, plus dans la boîte du navigateur. */
html.lq .lq-ask{position:fixed;inset:0;z-index:2600;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
html.lq .lq-ask-back{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:rgba(34,28,70,.42);opacity:0;transition:opacity .24s ease;pointer-events:auto;cursor:default;-webkit-tap-highlight-color:transparent}
html.lq .lq-ask-sheet{
  position:relative;width:calc(100% - 16px);max-width:480px;box-sizing:border-box;margin:0 0 calc(8px + env(safe-area-inset-bottom,0px));
  padding:26px 20px 20px;border-radius:30px;background:#fff;text-align:center;pointer-events:auto;
  box-shadow:0 6px 0 var(--lip),0 30px 60px -24px rgba(34,28,70,.5);
  transform:translateY(calc(100% + 40px));transition:transform .36s cubic-bezier(.32,.72,0,1);
}
html.lq .lq-ask.on .lq-ask-back{opacity:1}
html.lq .lq-ask.on .lq-ask-sheet{transform:none}
html.lq .lq-ask.off .lq-ask-back{opacity:0;transition-duration:.2s}
html.lq .lq-ask.off .lq-ask-sheet{transform:translateY(calc(100% + 40px));transition-duration:.24s;transition-timing-function:cubic-bezier(.4,0,1,1)}
html.lq .lq-ask-ico{width:58px;height:58px;margin:0 auto 14px;display:grid;place-items:center;border-radius:19px;background:var(--accent-soft);color:var(--accent-ink)}
html.lq .lq-ask-ico svg{width:28px;height:28px;display:block}
html.lq .lq-ask.on .lq-ask-ico svg{animation:lqAskSpin .7s var(--pop) .12s both}
@keyframes lqAskSpin{from{transform:rotate(80deg)}to{transform:none}}
html.lq .lq-ask h2{margin:0;font:700 23px/1.2 var(--display);letter-spacing:-.015em;color:var(--ink)}
html.lq .lq-ask p{margin:8px 6px 0;font-size:16px;line-height:1.45;color:var(--ink-2)}
html.lq .lq-ask-btns{display:grid;gap:12px;margin-top:22px}
html.lq .lq-ask-btns button{width:100%;min-height:54px;padding:0 16px;font-size:17px!important;cursor:pointer;-webkit-tap-highlight-color:transparent}
html[data-motion="reduce"] .lq-ask-back,html[data-motion="reduce"] .lq-ask-sheet{transition:none!important}
html[data-motion="reduce"] .lq-ask-ico svg{animation:none!important}
@media (prefers-reduced-motion:reduce){html.lq .lq-ask-back,html.lq .lq-ask-sheet{transition:none!important}html.lq .lq-ask-ico svg{animation:none!important}}
/* Action qui efface : le bouton principal passe en rouge. */
html.lq .lq-ask .lq-btn.is-danger{background:var(--danger)!important;box-shadow:0 4px 0 #8E1F26!important}
html.lq .lq-ask .lq-btn.is-danger:active{box-shadow:0 0 0 #8E1F26!important}
/* Question avec un champ (lqPrompt) : 16 px pour que l’iPhone ne zoome pas, compteur discret. */
html.lq .lq-ask.has-field .lq-ask-sheet{padding-top:22px}
html.lq .lq-ask.has-field .lq-ask-ico{width:50px;height:50px;margin-bottom:12px;border-radius:16px;font-size:24px}
html.lq .lq-ask.has-field h2{font-size:21px}
html.lq .lq-ask.has-field p{font-size:15px}
html.lq .lq-ask-field{display:block;margin:16px 0 0;text-align:left}
html.lq .lq-ask-field input,html.lq .lq-ask-field textarea{display:block;width:100%;box-sizing:border-box;margin:0;padding:13px 14px;border:2px solid var(--line);border-radius:16px;background:var(--surface-2);color:var(--ink);font-weight:500;font-size:16px;line-height:1.4;font-family:inherit;outline:none;resize:none;-webkit-appearance:none;appearance:none;transition:border-color .16s,background .16s,box-shadow .16s}
html.lq .lq-ask-field textarea{min-height:96px}
html.lq .lq-ask-field input:focus,html.lq .lq-ask-field textarea:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 4px var(--accent-soft)}
html.lq .lq-ask-field input::placeholder,html.lq .lq-ask-field textarea::placeholder{color:#A49FC0}
html.lq .lq-ask-field small{display:block;margin:6px 4px 0;text-align:right;font-size:12px;font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}
html.lq .lq-ask.has-field .lq-ask-btns{margin-top:16px}
html.lq #scr-lesson .valid-done{background:var(--success-soft)!important;border:2px solid var(--line)!important}
html.lq #scr-lesson .valid-done-ico{background:var(--success-fill)!important;box-shadow:0 3px 0 var(--success-lip)!important}

/* ---------- 26. Moments de réussite ---------- */
html.lq .lq-confetti{position:fixed;inset:0;z-index:9999;pointer-events:none;overflow:hidden}
html.lq .lq-confetti>i{position:absolute;display:block}
#lq-streak-toast{
  position:fixed;left:50%;top:calc(var(--safe-top) + 14px);z-index:9990;display:flex;align-items:center;gap:12px;
  padding:10px 18px 10px 10px;border-radius:22px;background:#fff;border:2px solid #FFD9A6;box-shadow:0 5px 0 #FFD0A0,0 18px 40px -18px rgba(34,28,70,.45);
  transform:translate(-50%,-140%);opacity:0;pointer-events:none;transition:transform .5s var(--pop),opacity .25s;
  font-family:var(--display);color:var(--ink);width:max-content;max-width:calc(100vw - 32px);
}
#lq-streak-toast.on{transform:translate(-50%,0);opacity:1}
#lq-streak-toast b{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em}
#lq-streak-toast small{display:block;font-size:13px;font-weight:600;color:#9A4300}
#lq-streak-toast .lq-st-flame{flex:none;width:46px;height:46px;display:grid;place-items:center;border-radius:15px;background:#FFF0DC}
#lq-streak-toast .lq-st-flame svg{width:32px;height:32px;transform-origin:50% 90%}
#lq-streak-toast.on .lq-st-flame svg{animation:lqFlameIn .7s var(--pop) .15s both,lqFlicker 2.4s ease-in-out .9s infinite}
#lq-streak-toast .f-o{fill:var(--flame-b)}
#lq-streak-toast .f-i{fill:var(--flame-a)}
html.lq .lq-streak.is-up{animation:lqCorrect .7s var(--pop) .35s both}
html.lq .lq-streak.is-up .lq-streak-flame svg{animation:lqFlameIn .8s var(--pop) .3s both,lqFlicker 2.6s ease-in-out 1.2s infinite}
html.lq .lq-streak.is-up .lq-day.is-now svg{animation:lqFlameIn .8s var(--pop) .5s both}
html.lq #scr-learn #modules .home-module .row.lq-just-done .lz-num{animation:lqJustDone .9s var(--pop) .45s both!important}
html.lq #scr-learn #modules .home-module .row.lq-just-done .lz-num::after{animation:lqCheckIn .5s var(--pop) .8s both}
@keyframes lqJustDone{0%{transform:scale(1);background:#fff;border-color:var(--line)}40%{transform:scale(1.28)}70%{transform:scale(.94)}100%{transform:scale(1)}}
@keyframes lqCheckIn{from{transform:scale(0) rotate(-30deg)}to{transform:scale(1) rotate(0)}}

/* Notifications (toast) : pastille blanche bordée, en relief */
/* Les notifications, centrées sur la largeur de l’écran (Elisa, 29 octobre, 18 h 19) : la place du bouton ✎ n’est plus réservée à droite ;
   le bouton s’efface le temps de la notification. */
html.lq .toast{left:16px!important;right:16px!important;max-width:min(520px,calc(100% - 32px))!important;margin:0 auto!important}
html.lq body:has(.toast.on) .fab{opacity:0!important;transform:scale(.85)!important;pointer-events:none}
html.lq .toast{background:#fff!important;border:2px solid var(--line)!important;border-radius:22px!important;box-shadow:0 5px 0 var(--lip),0 18px 36px -20px rgba(34,28,70,.45)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.lq .toast .t-kicker{font-family:var(--display)!important;text-transform:none!important;letter-spacing:0!important;font-size:12.5px!important;font-weight:700!important;color:var(--accent-ink)!important}
html.lq .toast .tmini{border-radius:13px!important;font-family:var(--display)!important;font-size:13px!important;box-shadow:0 3px 0 rgba(20,10,60,.14)}
html.lq .toast #toast-t{font-family:var(--display);font-weight:700}
html.lq .toast .tgo,html.lq .toast #toast-go{background:var(--accent)!important;color:#fff!important;border-radius:14px!important;box-shadow:0 3px 0 var(--accent-lip)!important;font-family:var(--display)!important;font-weight:700!important}

/* ---------- 27. Premiers pas (onboarding) ---------- */
html.lq #onboarding{background:var(--bg)!important}
html.lq #onboarding .ob-title{font-family:var(--display)!important;font-weight:700!important;letter-spacing:-.025em!important;line-height:1.05!important;color:var(--ink)!important}
html.lq #onboarding .ob-lead{color:var(--ink-2)!important}
html.lq #onboarding .ob-brand{font-family:var(--display);font-weight:700;letter-spacing:-.01em}
html.lq #onboarding .ob-brand code{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--accent);color:#fff;box-shadow:0 3px 0 var(--accent-lip);font:700 13px/1 var(--mono)}
html.lq #onboarding .ob-code{background:var(--code-bg)!important;border-radius:22px!important;box-shadow:0 5px 0 #151130!important;border:0!important}
html.lq #onboarding .oc-code .k{color:var(--t-kw)!important;font-weight:700}
html.lq #onboarding .ob-proof-stats{border:0!important;background:none!important;gap:10px;overflow:visible!important}
html.lq #onboarding .ob-proof-stats div{border:2px solid var(--line)!important;border-radius:18px;background:#fff;box-shadow:0 3px 0 var(--lip);padding:10px 6px!important}
html.lq #onboarding .ob-proof-stats div+div{border-left:2px solid var(--line)!important}
html.lq #onboarding .ob-proof-stats strong{font-family:var(--display);font-weight:700;font-size:22px;color:var(--accent-ink)}
html.lq #onboarding .ob-proof-stats span{color:var(--ink-2)!important;font-size:11.5px!important;font-weight:600!important}
/* En-tête des étapes : retour + progression épaisse */
html.lq #onboarding .ob-back{font-family:var(--display);font-weight:700;color:var(--accent-ink)}
html.lq #onboarding .ob-flow-status span{font-family:var(--display);font-weight:700;color:var(--ink-2)}
html.lq #onboarding .ob-mini-progress{gap:6px}
html.lq #onboarding .ob-mini-progress i{height:12px!important;border-radius:99px!important;background:#E3DEF4!important;box-shadow:none!important;transform:none!important;position:relative;overflow:hidden}
html.lq #onboarding .ob-mini-progress i.done{background:var(--accent)!important}
html.lq #onboarding .ob-mini-progress i.on{background:var(--accent)!important;animation:lqGrow .6s cubic-bezier(.5,0,.2,1) both!important;transform-origin:left}
html.lq #onboarding .ob-mini-progress i.done::after,html.lq #onboarding .ob-mini-progress i.on::after{content:'';position:absolute;left:5px;right:5px;top:3px;height:3px;border-radius:3px;background:rgba(255,255,255,.4)}
/* Bulle de la mascotte */
html.lq #onboarding .ob-bubble{border:2px solid var(--line)!important;border-radius:20px!important;box-shadow:0 4px 0 var(--lip)!important;font-family:var(--display);font-weight:700!important;font-size:16px!important;color:var(--ink)!important}
/* Réponses : tuiles en relief */
html.lq #onboarding .ob-answer-list{border:0!important;background:none!important;box-shadow:none!important;overflow:visible!important;display:flex;flex-direction:column;gap:10px}
html.lq #onboarding .ob-answer{
  grid-template-columns:40px 1fr auto!important;min-height:60px;padding:10px 14px!important;border:2px solid var(--line)!important;border-radius:18px!important;
  background:#fff!important;color:var(--ink)!important;font:700 15.5px/1.25 var(--display)!important;box-shadow:0 4px 0 var(--lip);
  transition:transform .12s var(--press),box-shadow .12s var(--press),border-color .15s,background .15s!important;
}
html.lq #onboarding .ob-answer:active{transform:translateY(4px)!important;box-shadow:0 0 0 var(--lip)}
html.lq #onboarding .ob-answer .ob-radio{display:none}
html.lq #onboarding .ob-answer-icon{width:40px!important;height:40px!important;border-radius:13px!important;background:var(--surface-2)!important;color:var(--accent-ink)!important}
html.lq #onboarding .ob-answer.on{border-color:var(--accent)!important;background:var(--accent-soft)!important;color:var(--accent-ink)!important;box-shadow:0 4px 0 var(--accent)!important}
html.lq #onboarding .ob-answer.on .ob-answer-icon{background:var(--accent)!important;color:#fff!important;box-shadow:0 3px 0 var(--accent-lip)}
html.lq #onboarding .ob-answer::after{content:'';width:26px;height:26px;border-radius:50%;border:2px solid var(--line);background:#fff;transition:all .2s var(--pop)}
html.lq #onboarding .ob-answer.on::after{border-color:var(--accent);background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat}
html.lq #onboarding .ob-rhythm-list .ob-answer{grid-template-columns:1fr auto auto!important}
html.lq #onboarding .ob-rhythm-list .ob-answer b{font-size:17px}
html.lq #onboarding .ob-rhythm-list .ob-answer small{font-family:var(--ui);font-weight:500;color:var(--ink-2)}
html.lq #onboarding .ob-rhythm-min{font-family:var(--display);font-weight:700;color:var(--success)!important;background:var(--success-soft);border-radius:999px;padding:3px 9px}
html.lq #onboarding .ob-rhythm-min:empty{display:none}
html.lq #onboarding .ob-field input{border:2px solid var(--line)!important;border-radius:16px!important;background:#fff!important;font-size:17px!important}
html.lq #onboarding .ob-field input:focus{border-color:var(--accent)!important;box-shadow:0 0 0 4px var(--accent-soft)!important}
html.lq #onboarding .ob-name-preview{border:2px solid var(--line)!important;border-radius:18px!important;box-shadow:0 3px 0 var(--lip)}
html.lq #onboarding .ob-name-initial{background:var(--accent)!important;box-shadow:0 3px 0 var(--accent-lip)}
html.lq #onboarding .ob-practice-run{background:var(--success-fill)!important;box-shadow:0 4px 0 var(--success-lip)!important;border-radius:16px!important;font-family:var(--display)!important;font-weight:700!important;font-size:16px!important;min-height:52px}
html.lq #onboarding .ob-practice-run:active{transform:translateY(4px)!important;box-shadow:0 0 0 var(--success-lip)!important}
html.lq #onboarding .ob-provider{border:2px solid var(--line)!important;border-radius:18px!important;box-shadow:0 4px 0 var(--lip);font-family:var(--display)!important;font-weight:700!important}
html.lq #onboarding .ob-ready-summary{border:2px solid var(--line)!important;border-radius:22px!important;box-shadow:none!important;background:#fff!important}
html.lq #onboarding .ob-ready-row+.ob-ready-row{border-top:2px solid var(--line-2)!important}
html.lq #onboarding .ob-ready-row b{font-family:var(--display);font-weight:700;font-size:15px}
html.lq #onboarding .ob-ready-ico{border-radius:12px!important;background:var(--accent-soft)!important;color:var(--accent-ink)!important;font-family:var(--display)!important}
html.lq #onboarding .ob-ready-days i{height:10px!important}
html.lq #onboarding .ob-ready-days i.on{background:var(--accent)!important}
html.lq #onboarding .ob-foot{background:linear-gradient(180deg,rgba(244,242,252,0),var(--bg) 30%)!important}
html.lq #onboarding .ob-skip,html.lq #onboarding .ob-secondary{font-family:var(--display);font-weight:700;color:var(--accent-ink)}
/* Écran de chargement */
html.lq #loader .logo-badge{border-radius:24px;background:var(--accent)!important;box-shadow:0 6px 0 var(--accent-lip)!important;font-family:var(--mono)}
html.lq #loader .spinner{height:10px!important;width:140px!important;background:#E3DEF4!important}
html.lq #loader .spinner::after{background:var(--accent)!important}

/* ---------- 29. Feuilles (notes, schéma, cartes, réglages) ---------- */
html.lq .viz{background:var(--bg)!important;border-radius:30px 30px 0 0!important}
html.lq .viz-head{background:#fff!important;border-bottom:2px solid var(--line)!important}
html.lq .viz-head b{font-family:var(--display);font-size:19px!important;font-weight:700!important;letter-spacing:-.012em!important}
html.lq .viz-head .grab{background:#D9D3EE!important;height:5px!important;width:44px!important;border-radius:99px!important}
html.lq .viz-head button{background:#fff!important;border:2px solid var(--line)!important;box-shadow:0 3px 0 var(--lip);width:36px!important;height:36px!important;color:var(--ink-2)!important;transition:transform .12s var(--press),box-shadow .12s var(--press)!important}
html.lq .viz-head button:active{transform:translateY(3px)!important;box-shadow:0 0 0 var(--lip)!important}
html.lq .ne-ta{border:2px solid var(--line)!important;border-radius:20px!important;font-size:16px!important}
html.lq .ne-ta:focus{border-color:var(--accent)!important;box-shadow:0 0 0 4px var(--accent-soft)!important}
html.lq .ne-row{gap:10px!important}
html.lq .ne-row button{border-radius:16px!important;font-family:var(--display)!important;font-weight:700!important;font-size:16px!important;min-height:54px;transition:transform .12s var(--press),box-shadow .12s var(--press)!important}
html.lq .ne-row .prim{background:var(--accent)!important;box-shadow:0 4px 0 var(--accent-lip)!important}
html.lq .ne-row .prim:active{transform:translateY(4px)!important;box-shadow:0 0 0 var(--accent-lip)!important}
html.lq .ne-row .sec{background:#fff!important;border:2px solid var(--line)!important;color:var(--accent-ink)!important;box-shadow:0 4px 0 var(--lip)!important}
html.lq .ne-row .sec:active{transform:translateY(4px)!important;box-shadow:0 0 0 var(--lip)!important}
/* « Épinglée » se voit : fond violet clair et bord violet (avant, seul le mot changeait). */
html.lq .ne-row .sec.pin-on{background:var(--accent-soft)!important;border-color:var(--accent)!important;color:var(--accent-ink)!important}
html.lq .ne-row .sec svg{transition:transform .28s var(--spring-ios)}
html.lq .ne-row .sec.pin-on svg{transform:rotate(-16deg)}
html.lq .note-back-list{font-family:var(--display);font-weight:700;color:var(--accent-ink)}
html.lq .sch-head,html.lq .sch-table-h,html.lq #schema-sheet .sch-t{font-family:var(--display)}
html.lq #card-sheet .viz-body,html.lq #schema-sheet .viz-body{background:var(--bg)}

/* Réglage du rythme, carte mémo, fin de leçon : derniers boutons */
html.lq .pl-freq-option{border:2px solid var(--line)!important;border-radius:14px!important;box-shadow:0 3px 0 var(--lip)!important;font-family:var(--display)!important;font-weight:700!important;font-size:15px!important;transition:transform .12s var(--press),box-shadow .12s var(--press)!important}
html.lq .pl-freq-option:active{transform:translateY(3px)!important;box-shadow:0 0 0 var(--lip)!important}
html.lq .pl-freq-option.on{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;box-shadow:0 3px 0 var(--accent-lip)!important}
html.lq .pl-rhythm-option,html.lq .pl-pace-option{border:2px solid var(--line)!important;border-radius:18px!important;box-shadow:0 3px 0 var(--lip)!important}
/* Ajuster mon rythme : les deux sélecteurs parlent le même langage (bordure 2 px, relief, choix plein violet),
   les jours ont leur unité, les textes sont lisibles et l'aperçu dit ce qui change. */
html.lq #plan-adjust-sheet .pl-adjust-lead{margin-bottom:16px;font-size:14px;line-height:1.45;color:var(--ink-2)}
html.lq #plan-adjust-sheet .pl-adjust-label{margin-bottom:10px;font:700 14.5px/1.3 var(--display);color:var(--ink)}
html.lq #plan-adjust-sheet .pl-adjust-group.compact{margin-top:20px}
html.lq .pl-load-option{min-height:94px;border:2px solid var(--line)!important;border-radius:18px!important;box-shadow:0 3px 0 var(--lip)!important;transition:transform .12s var(--press),box-shadow .12s var(--press),background-color .15s,border-color .15s!important}
html.lq .pl-load-option b{font:700 25px/1 var(--display)}
html.lq .pl-load-option span{margin-top:7px;font:700 14px/1.1 var(--display)}
html.lq .pl-load-option small{margin-top:4px;font-size:12px;font-weight:600;color:var(--ink-2)}
html.lq .pl-load-option:active{transform:translateY(3px)!important;box-shadow:0 0 0 var(--lip)!important}
html.lq .pl-load-option.on{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;box-shadow:0 3px 0 var(--accent-lip)!important}
html.lq .pl-load-option.on small{color:rgba(255,255,255,.86)}
html.lq .pl-load-option.on::after{top:8px;right:8px;width:19px;height:19px;background:#fff;color:var(--accent);font-size:11px}
html.lq .pl-freq-option{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:66px}
html.lq .pl-freq-option b{font:700 22px/1 var(--display)}
html.lq .pl-freq-option small{font-size:12px;font-weight:600;line-height:1;color:var(--ink-2)}
html.lq .pl-freq-option.on small{color:rgba(255,255,255,.86)}
html.lq .pl-adjust-impact{margin-top:20px;padding:14px;border-radius:18px;gap:12px}
html.lq .pl-adjust-impact b{font:700 15px/1.25 var(--display)}
html.lq .pl-adjust-impact strong{margin-top:3px;font-size:13.5px;line-height:1.4}
html.lq .pl-adjust-impact p{margin-top:6px;font-size:12.5px;line-height:1.45}
html.lq .pl-impact-delta{display:inline-block;margin-top:8px;padding:3px 10px;border-radius:999px;background:#fff;color:var(--accent-ink);font:700 12.5px/1.45 var(--display)}
html.lq .pl-impact-delta.is-good{background:var(--success-soft);color:var(--success)}
html.lq .pl-impact-delta.is-warn{background:var(--warn-soft);color:var(--warn)}
html.lq .pl-adjust-safe{font-size:12.5px}
html.lq .cd-actions button{border-radius:16px!important;font-family:var(--display)!important;font-weight:700!important;font-size:16px!important;min-height:54px;transition:transform .12s var(--press),box-shadow .12s var(--press)!important}
html.lq .cd-share-btn{background:#fff!important;color:var(--accent-ink)!important;border:2px solid var(--line)!important;box-shadow:0 4px 0 var(--lip)!important}
html.lq .cd-share-btn:active{transform:translateY(4px)!important;box-shadow:0 0 0 var(--lip)!important}
html.lq .cd-try-btn{background:var(--success-fill)!important;color:#fff!important;border:0!important;box-shadow:0 4px 0 var(--success-lip)!important}
html.lq .cd-try-btn:active{transform:translateY(4px)!important;box-shadow:0 0 0 var(--success-lip)!important}
html.lq .coda-note{border:2px solid var(--line)!important;background:#fff!important;color:var(--accent-ink)!important;border-radius:16px!important;box-shadow:0 3px 0 var(--lip)!important;font-family:var(--display)!important;font-weight:700!important}
html.lq .coda-note:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)!important}
html.lq .cd-memo{border:2px solid var(--line)!important;border-radius:20px!important;box-shadow:none!important}
html.lq #scr-lesson .bravo-ring::after{background:var(--success-fill)!important;box-shadow:none!important}
html.lq #scr-lesson .bravo-ring i{color:#fff!important;font-family:var(--display)}
html.lq #scr-lesson .bravo-recap{border:2px solid var(--line)!important}

/* ---------- 28. Plus de capitales forcées : étiquettes en casse normale ---------- */
html.lq #scr-learn .cp-k,html.lq #scr-lesson .ij-sms-h,html.lq .acc-field label,html.lq .acc-h,html.lq .account-goal-copy>small,html.lq .account-level-head small,html.lq .account-section-head span,html.lq .account-settings-group-title,html.lq .account-settings-title,html.lq .account-subsection-head span,html.lq .anat-sub span,html.lq .anat-zoom-root,html.lq .bravo-kicker,html.lq .card h4,html.lq .cd-lab,html.lq .cf-attn b,html.lq .cf-imp-prix-cast small,html.lq .cf-iso small,html.lq .cf-kind>small,html.lq .cf-trap-sql small,html.lq .cf-value small,html.lq .cfs-label,html.lq .cmp-tag,html.lq .coll-overview-copy small,html.lq .coll-overview-next small,html.lq .concept-block .table-wrap table.concept-table th,html.lq .consigne .tag,html.lq .console-projects-head small,html.lq .cp-badge,html.lq .cw-case-lab,html.lq .cw-end,html.lq .cw-tbl-h,html.lq .date-functions-page .df-keep-lab,html.lq .date-span-title,html.lq .db-lab > span,html.lq .db-trow .tk,html.lq .def-focus-kicker,html.lq .def-focus-level,html.lq .def-list-head p,html.lq .df-anatomy-kicker,html.lq .df-idea small,html.lq .df-month-node small,html.lq .df-part small,html.lq .df-period-cmp-head span:first-child,html.lq .df-period-cmp-who small,html.lq .df-period-rows small,html.lq .df-pick-to small,html.lq .df-stage-head small,html.lq .df-step i,html.lq .df-trap-sql .df-sql-cap,html.lq .df-tz-city.is-zone small,html.lq .df-tz-utc small,html.lq .df-unit small,html.lq .eans-lab,html.lq .ecom-node.is-end,html.lq .ecom-node.is-hero,html.lq .ecom-trio b,html.lq .ent-focus .esql .esql-lab,html.lq .ent-head h2,html.lq .ent-hero-txt .ent-hero-kicker,html.lq .ent-list-title .ent-list-kicker,html.lq .er-card-h,html.lq .er-pk-head,html.lq .er-th,html.lq .esql-lab,html.lq .ex-label span,html.lq .fk-course .ij-t .ij-tlab,html.lq .fk-duo .fk-duo-lab,html.lq .fk-memo-labs,html.lq .fk-memo-pair b,html.lq .fk-ok > b,html.lq .fk-quiz-pair b,html.lq .fk-ref small,html.lq .fk-tree-root b,html.lq .fk-verdict .fk-verdict-lab,html.lq .fn-nest-lab,html.lq .fn-tip b,html.lq .fn-use .duo-k,html.lq .gc-cell b,html.lq .gc-null p.gc-null-lab,html.lq .gc-order b,html.lq .gc-sep p.gc-sep-lab,html.lq .gc-steps .gc-step-lab,html.lq .grp-bucket-lbl,html.lq .grp-paused-badge,html.lq .h2-eye,html.lq .hc-tag,html.lq .hint-box b,html.lq .home-catalog-head>div>span,html.lq .home-section-head>div>span,html.lq .ij-t .ij-tlab,html.lq .ijl .ijl-col-h,html.lq .ijl .ijl-out-h,html.lq .ijl-count,html.lq .ijl-grid span.is-h,html.lq .imp-field label,html.lq .j3-card .j3-card-h,html.lq .jc-res .jc-res-k,html.lq .jd-card .jd-ex span,html.lq .jd-coach-step,html.lq .jd-result-head small,html.lq .jeu-lab,html.lq .jn-course .fn-use > .pt-syntax-h::before,html.lq .jn-merge-out small,html.lq .jn-merge-src small,html.lq .jn-sides article small,html.lq .join-bridge small,html.lq .join-drop-lab,html.lq .join-guide-kicker,html.lq .join-mini-table .head,html.lq .join-output-label,html.lq .join-phase-label,html.lq .join-question span,html.lq .join-recap th,html.lq .join-side-h,html.lq .journey-spotlight .journey-kicker,html.lq .journey-step-copy .journey-kicker,html.lq .jr-ici,html.lq .key-flow-arr,html.lq .l-kicker,html.lq .learning-check-eyebrow,html.lq .lesson-rich .sit-memo .sit-memo-lab,html.lq .lesson-rich .sit-sql p.rel-card-why b,html.lq .lesson-rich .sit-vue-step .sit-vue-tag,html.lq .lgtitle .eyebrow,html.lq .memory-kicker,html.lq .module-head h2,html.lq .ncard .nctx,html.lq .ne-ctx .cchip,html.lq .ne-lab,html.lq .nf-adv-card small,html.lq .nf-agg small,html.lq .nf-division small,html.lq .nf-hero-val small,html.lq .nf-inorder-card small,html.lq .nf-machine-in small,html.lq .nf-machine-out small,html.lq .nf-mm-col small,html.lq .nf-modulo-result small,html.lq .nf-order-step small,html.lq .nf-read>b,html.lq .nf-sign-item small,html.lq .nf-stage-head small,html.lq .nm-badge,html.lq .nm-tbl-h,html.lq .notes-overview-copy small,html.lq .ob-kicker,html.lq .ob-metrics small,html.lq .ob-name label,html.lq .ob-summary .pt,html.lq .offset-branch-tag,html.lq .offset-demo-badge,html.lq .offset-demo-row small,html.lq .offset-diff-row small,html.lq .offset-scan-keep small,html.lq .offset-scan-skip small,html.lq .offset-shift-label,html.lq .order-hint-chip,html.lq .pd-key small,html.lq .pd-sieve-end,html.lq .piege-tail table.concept-table th,html.lq .pipe-table td.ok,html.lq .pipe-table th,html.lq .pk-bad > b,html.lq .pk-mail-meta span,html.lq .pk-mini span.is-h,html.lq .pl-badge-jour,html.lq .pl-metrics small,html.lq .pl-overview-copy small,html.lq .pl-overview-next small,html.lq .pl-q .qlab,html.lq .pl-summary .pt,html.lq .pl-week-heading>div:first-child>span,html.lq .plan-next-session>small,html.lq .pt-floor-lab,html.lq .pt-hop-k,html.lq .pts-cmd b,html.lq .qf-bank-h,html.lq .qtag,html.lq .rel-card h3,html.lq .rel-pair-h,html.lq .result-label,html.lq .rv-h,html.lq .sect-label span,html.lq .set-demo > b,html.lq .sit-mail-fields span,html.lq .sommaire-t,html.lq .sql-viz:is([data-viz="subquery_in"],[data-viz="subquery_notin"]) .subq-clients-head,html.lq .sql-viz:is([data-viz="subquery_in"],[data-viz="subquery_notin"]) .subq-command.is-head,html.lq .sql-viz:is([data-viz="subquery_in"],[data-viz="subquery_notin"]) .subq-list-head>span,html.lq .sql-viz:is([data-viz="subquery_in"],[data-viz="subquery_notin"]) .subq-source-head>span,html.lq .sql-viz[data-kind="cols"] .sel-head .sel-c,html.lq .sql-viz[data-viz="coalesce"] .coal-cell.is-head,html.lq .sql-viz[data-viz="coalesce"] .coal-head>span,html.lq .sql-viz[data-viz="selfjoin"] .self-audit-head span,html.lq .sql-viz[data-viz="selfjoin"] .self-audit-row em,html.lq .sql-viz[data-viz="selfjoin"] .self-source-head>span,html.lq .sql-viz[data-viz="subquery_from"] .from-amount-cell.is-head,html.lq .sql-viz[data-viz="subquery_from"] .from-cell.is-head,html.lq .sql-viz[data-viz="subquery_from"] .from-head>span,html.lq .studio-today .st-lab,html.lq .table-swipe-hint,html.lq .tbl-tree-branch b,html.lq .toast .t-kicker,html.lq .today-hero .th-tag,html.lq .tx-branch small,html.lq .txt-lab-top small,html.lq .txt-transform-box small,html.lq .valid-card-chip small,html.lq .viz-stepnum,html.lq .vs-tag,html.lq thead th{text-transform:none!important;letter-spacing:normal!important}
html.lq .acc-field label,
html.lq .acc-h,
html.lq .account-goal-copy>small,
html.lq .account-level-head small,
html.lq .account-section-head span,
html.lq .account-settings-title,
html.lq .account-subsection-head span,
html.lq .ob-kicker,
html.lq .ob-name label,
html.lq .ob-metrics small,
html.lq .pl-metrics small,
html.lq .pl-badge-jour,
html.lq .studio-today .st-lab,
html.lq .today-hero .th-tag,
html.lq .ne-lab,
html.lq .ncard .nctx,
html.lq .ne-ctx .cchip,
html.lq .imp-field label,
html.lq .esql-lab,
html.lq .ent-focus .esql .esql-lab,
html.lq .eans-lab,
html.lq .rv-h,
html.lq .result-label,
html.lq .ex-label span,
html.lq .hc-tag,
html.lq .card h4,
html.lq .cp-badge,
html.lq .learning-check-eyebrow,
html.lq .memory-kicker,
html.lq .join-guide-kicker,
html.lq .module-head h2,
html.lq .ent-head h2,
html.lq .valid-card-chip small,
html.lq .hint-box b,
html.lq .fn-tip b,
html.lq .cd-lab,
html.lq .er-card-h,
html.lq .pl-q .qlab,
html.lq .ob-summary .pt,
html.lq .pl-summary .pt,
html.lq #scr-learn .cp-k,
html.lq .bravo-kicker{font-family:var(--display)!important;font-weight:700!important}
/* ---------- Animations partagées ---------- */
@keyframes lqRise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes lqNodeIn{0%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@keyframes lqSlideIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes lqPulse{0%{transform:scale(.86);opacity:.6}100%{transform:scale(1.32);opacity:0}}
@keyframes lqBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes lqFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-2deg)}}
@keyframes lqGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lqFlameIn{0%{opacity:0;transform:scale(0) rotate(-25deg)}60%{opacity:1;transform:scale(1.25) rotate(8deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes lqFlicker{0%,100%{transform:scale(1) rotate(0)}25%{transform:scale(1.06,.95) rotate(-2.5deg)}50%{transform:scale(.96,1.06) rotate(2deg)}75%{transform:scale(1.03,.98) rotate(-1deg)}}
@keyframes lqWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg) scale(1.1)}60%{transform:rotate(10deg) scale(1.08)}}
@keyframes lqTodayPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,154,61,0)}50%{box-shadow:0 0 0 5px rgba(255,154,61,.18)}}
@keyframes lqSegIn{0%{transform:scale(.92)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes lqCorrect{0%{transform:scale(1)}35%{transform:scale(1.04)}70%{transform:scale(.99)}100%{transform:scale(1)}}
@keyframes lqShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes lqRunPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}
@keyframes lqHalo{0%,100%{box-shadow:0 0 0 4px rgba(255,255,255,.34),0 3px 0 rgba(20,10,60,.16)}50%{box-shadow:0 0 0 9px rgba(255,255,255,.1),0 3px 0 rgba(20,10,60,.16)}}

/* ---------- 96. Moins de couleurs ----------
   « Fait », « validé », « terminé » prennent le violet de la marque, partout
   dans l'interface. Le vert ne sert plus qu'à « bonne réponse » (quiz,
   exercice, console), le rouge à « erreur », l'orange à la série et aux
   retards. On redirige les jetons du vert vers le violet sur les écrans et
   les pièces concernés ; les retours de réponse gardent leur vert. */
html.lq :is(#scr-learn,#scr-planning,#scr-defis,#scr-collection,#scr-entretien,#scr-compte,#scr-practice,#scr-library,#scr-notes,#scr-jeu,.toast),
html.lq #scr-lesson :is(.ls-steps,.bravo-hero,.bravo-steps,.bravo-done-note,.valid-done,.vsteps,.lesson-status),
html.lq #onboarding :is(.ob-rhythm-min,.ob-practice-run),
html.lq :is(.cd-try-btn,.pl-week-legend){
  --success:var(--accent-ink);--success-soft:var(--accent-soft);--success-fill:var(--accent);--success-lip:var(--accent-lip);
}
/* Étincelles de la carte Bravo : jaune et blanc sur le violet */
html.lq #scr-lesson .bravo-spark:nth-child(odd){background:var(--flame-a)!important}
html.lq #scr-lesson .bravo-spark:nth-child(even){background:#fff!important}
/* Planning : pastille « Validé » ; Mon compte : icônes des chiffres */
html.lq #app .pl-chip-valid{background:var(--accent-soft)!important;color:var(--accent-ink)!important}
html.lq .account-stat-mark,html.lq .account-stat-mark.lessons,html.lq .account-stat-mark.challenges,html.lq .account-stat-mark.progress{
  border:0!important;background:var(--accent-soft)!important;color:var(--accent-ink)!important;box-shadow:none!important;
}
html.lq .account-stat-mark.streak{background:#FFF0DC!important;color:#E05E00!important}

/* ---------- 97. Fluidité : pas de clignotement ----------
   L'ancien thème faisait apparaître en fondu (depuis l'invisible) les cartes,
   listes et puces à chaque fois qu'elles étaient redessinées : au retour sur
   l'accueil, après chaque action, au changement de filtre… L'écran semblait
   clignoter. Ces animations d'entrée sont neutralisées ici (même nom, sans
   effet) ; seules restent celles que la personne déclenche. */
@keyframes iosSurfaceIn{from{opacity:1}to{opacity:1}}
@keyframes iosItemIn{from{opacity:1}to{opacity:1}}
@keyframes iosPopIn{from{opacity:1}to{opacity:1}}
@keyframes softPanelIn{from{opacity:1}to{opacity:1}}
@keyframes panelIn{from{opacity:1}to{opacity:1}}
@keyframes chipIn{from{opacity:1}to{opacity:1}}
@keyframes entGroupIn{from{opacity:1}to{opacity:1}}
@keyframes rowIn{from{opacity:1}to{opacity:1}}
@keyframes riseIn{from{opacity:1}to{opacity:1}}
@keyframes plusReveal{from{opacity:1}to{opacity:1}}
@keyframes microItemIn{from{opacity:1}to{opacity:1}}
@keyframes completionBadgeIn{from{opacity:1}to{opacity:1}}
@keyframes chipPop{from{opacity:1}to{opacity:1}}
@keyframes iosSelectedPop{from{opacity:1}to{opacity:1}}
@keyframes ringIn{from{opacity:1}to{opacity:1}}
@keyframes consoleCreateIn{from{opacity:1}to{opacity:1}}
@keyframes consoleLibraryIn{from{opacity:1}to{opacity:1}}
@keyframes planToolsIn{from{opacity:1}to{opacity:1}}
@keyframes emptyFloat{from{transform:none}to{transform:none}}
@keyframes flameWob{from{transform:none}to{transform:none}}
@keyframes lsNavIn{from{opacity:1}to{opacity:1}}
@keyframes iosChromeIn{from{opacity:1}to{opacity:1}}
@keyframes lqRise{from{opacity:1}to{opacity:1}}
/* Coches « Validé » : affichées d'emblée, sans tracé rejoué */
html.lq .def-row-status svg path,html.lq .lesson-status svg path{stroke-dashoffset:0!important;animation:none!important}
html.lq .def-row-status::after,html.lq .lesson-status::after{animation:none!important;opacity:0!important}
/* Changement d'onglet : instantané, comme une barre d'onglets iOS.
   Sous-pages : glissement court, sans passer par le transparent. */
/* L'écran quitté ne reste plus affiché (opaque, au-dessus) pendant ~280 ms : il masquait la destination
   et donnait l'impression que le retour / le changement d'onglet était lent. */
html.lq #app .screen.leaving{display:none!important;animation:none!important}
html.lq #app .screen.p-enter-fade{animation:none!important}
html.lq #app .screen.p-enter-push{animation:lqPush .26s cubic-bezier(.25,.8,.25,1) both!important}
html.lq #app .screen.p-enter-back{animation:lqBack .24s cubic-bezier(.25,.8,.25,1) both!important}
@keyframes lqPush{from{transform:translate3d(28px,0,0)}to{transform:none}}
@keyframes lqBack{from{transform:translate3d(-22px,0,0)}to{transform:none}}
/* iOS : pas d'agrandissement automatique du texte, boutons sans style natif */
html.lq{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.lq .lq-streak,html.lq .lq-search-toggle,html.lq .lq-hero-cta{-webkit-appearance:none;appearance:none}

/* ---------- 98. Petits écrans ---------- */
@media (max-width:360px){
  html.lq #home-hero,html.lq #scr-learn #modules{padding-left:16px;padding-right:16px}
  html.lq .lq-heading h2{font-size:27px!important}
  html.lq .lq-hero{padding:16px}
  html.lq .lq-hero .mascot-stk{width:68px}
  html.lq .lq-hero-title{font-size:29px}
  html.lq .lq-streak{gap:8px;padding:9px 10px}
  html.lq .lq-streak-flame{width:30px;height:30px;border-radius:10px}
  html.lq .lq-streak-flame svg{width:20px;height:20px}
  html.lq .lq-week{gap:2px}
  html.lq .lq-day{flex-basis:23px}
  html.lq .lq-day i{width:23px}
  html.lq .lq-day i svg{width:13px;height:13px}
  html.lq .home-catalog-head h2{font-size:23px!important}
  html.lq #scr-learn .home-catalog-head .lq-search-toggle span{display:none}
  html.lq #scr-learn .home-catalog-head .lq-search-toggle{width:44px;height:44px;padding:0;justify-content:center}
  html.lq .home-module-summary{grid-template-columns:46px minmax(0,1fr) auto!important;padding:12px!important}
  html.lq .home-module-num{width:46px!important;height:46px!important;font-size:19px!important;border-radius:15px!important}
  html.lq #scr-learn #modules .home-module .row{grid-template-columns:76px minmax(0,1fr);column-gap:10px}
  html.lq #scr-learn #modules .home-module .row .lz-num{width:54px!important;height:54px!important;font-size:19px!important}
  html.lq #scr-learn #modules .home-module .row:nth-of-type(6n+3){--zz:19px}
  html.lq #scr-learn #modules .home-module .row:nth-of-type(6n+4){--zz:22px}
  html.lq #scr-learn #modules .home-module .row:nth-of-type(6n+5){--zz:19px}
  html.lq #scr-learn #modules .home-module .row:nth-of-type(6n+2),html.lq #scr-learn #modules .home-module .row:nth-of-type(6n+6){--zz:11px}
  html.lq #scr-lesson .lesson-rich>h1,html.lq #scr-lesson .l-kicker+h1{font-size:32px!important}
  html.lq .coll-grid{gap:10px;padding:4px 12px 14px}
  html.lq .coll-card{padding:10px 10px 11px}
  html.lq .coll-card-k{font-size:15px}
  html.lq .coll-card-t{font-size:12px}
  html.lq .coll-review-copy b{font-size:20px}
}

/* Contrôles segmentés avec compteur (Défis, Entretien, Cartes) : sous 375 px,
   le compteur passe sous le libellé au lieu de déborder sur la case voisine. */
html.lq :is(.def-levels,.ent-status,#coll-filters)>button{min-width:0;overflow:hidden}
@media (max-width:374px){
  html.lq :is(.def-levels,.ent-status,#coll-filters)>button{
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    gap:1px!important;padding:4px 2px!important;font-size:13.5px!important;line-height:1.15!important;white-space:nowrap;
  }
  html.lq :is(.def-levels,.ent-status,#coll-filters)>button small{margin:0!important;font-size:11px!important;line-height:1.1!important}
}

/* Grand écran : sans la carte « Prochaine séance », la semaine remonte d'une rangée. */
@media (min-width:900px){
  html.lq #planning-body>.pl-week{grid-row:2 / span 4}
}

/* ---------- 99. Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  html.lq *,html.lq *::before,html.lq *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
html.lq[data-motion="reduce"] *,html.lq[data-motion="reduce"] *::before,html.lq[data-motion="reduce"] *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}

/* ---------- 17. Progression : graphiques (Avancement global, modules) ---------- */
html.lq #app .planning-progress>summary,html.lq #app .plan-modules>summary{row-gap:7px!important}
.pgr-sum-bar,.pgr-strip{grid-column:1/-1;grid-row:3;display:block;height:8px;margin-top:4px}
.pgr-sum-bar{border-radius:99px;background:var(--surface-2);overflow:hidden}
.pgr-sum-bar b{display:block;height:100%;min-width:6px;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.pgr-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px}
.pgr-strip b{display:block;border-radius:4px;background:var(--line)}
.pgr-strip b.is-done{background:var(--accent)}
.pgr-strip b.is-started{background:linear-gradient(90deg,var(--accent) calc(var(--f)*1%),var(--line) 0)}
.pgr{padding:2px 18px 18px}
.pgr small,.pgr em{font-style:normal}
.pgr-top{display:flex;align-items:center;gap:16px}
.pgr-donut{--p:0;position:relative;flex:none;width:104px;height:104px;display:grid;place-items:center}
.pgr-donut svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pgr-track{fill:none;stroke:var(--surface-2);stroke-width:12}
.pgr-arc{fill:none;stroke-width:12;stroke-dasharray:var(--len) 251.33;stroke-dashoffset:var(--off);transform:rotate(-90deg);transform-origin:50% 50%;animation:pgrArc .9s cubic-bezier(.3,.7,.3,1) both}
.pgr-arc.is-l{stroke:var(--accent)}
.pgr-arc.is-d{stroke:#0E9AD6;animation-delay:.25s}
@keyframes pgrArc{from{stroke-dasharray:0 251.33}to{stroke-dasharray:var(--len) 251.33}}
.pgr-donut>i{position:relative;font:700 26px/1 var(--display);color:var(--ink)}
.pgr-donut>i small{margin-left:1px;font:700 13px var(--display);color:var(--ink-2)}
.pgr-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pgr-copy small{font:700 10.5px/1.2 var(--ui);letter-spacing:.07em;text-transform:uppercase;color:var(--accent-ink)}
.pgr-copy strong{font:700 20px/1.2 var(--display);letter-spacing:-.01em;color:var(--ink)}
.pgr-copy span{font:500 13.5px/1.35 var(--ui);color:var(--ink-2)}
.pgr-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
.pgr-stat{min-width:0;padding:11px 11px 12px;border:2px solid var(--line-2);border-radius:16px;background:#fff}
.pgr-stat>small{display:flex;align-items:center;gap:6px;font:700 11.5px/1.2 var(--ui);color:var(--ink-2)}
.pgr-stat.is-l>small::before,.pgr-stat.is-d>small::before{content:'';flex:none;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.pgr-stat.is-d>small::before{background:#0E9AD6}
.pgr-stat>b{display:flex;align-items:baseline;gap:1px;margin-top:6px;font:700 24px/1.1 var(--display);color:var(--ink)}
.pgr-stat>b em{font:600 12.5px var(--ui);color:var(--ink-3)}
.pgr-meter{display:block;height:7px;margin-top:9px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.pgr-meter b{display:block;height:100%;min-width:0;border-radius:inherit;background:var(--accent);transition:width .5s cubic-bezier(.3,.7,.3,1)}
.pgr-stat.is-d .pgr-meter b{background:#0E9AD6}
.pgr-stat.is-s>p{margin:9px 0 0;font:600 11.5px var(--ui);color:var(--ink-3)}
.pgr-stat.is-s.on{border-color:#FFD9B8;background:#FFF8F1}
.pgr-flame{display:inline-grid;align-self:center;width:19px;height:19px;margin-right:3px;color:#F97316}
.pgr-flame svg{width:100%;height:100%}
/* Temps d’étude : tuile pleine largeur sous les trois autres — le total à gauche, aujourd’hui et cette semaine à droite. */
.pgr-stat.is-t{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap}
.pgr-t-main{min-width:0}
.pgr-t-main>small{display:flex;align-items:center;gap:6px;font:700 11.5px/1.2 var(--ui);color:var(--ink-2)}
.pgr-t-main>small svg{flex:none;width:14px;height:14px;color:#0F9F86}
.pgr-t-main>b{display:flex;align-items:baseline;gap:1px;margin-top:6px;font:700 24px/1.1 var(--display);color:var(--ink)}
.pgr-t-main>b em{font:600 12.5px var(--ui);color:var(--ink-3)}
.pgr-t-more{display:flex;gap:6px;margin:0}
.pgr-t-more>div{min-width:0;padding:7px 11px 8px;border-radius:12px;background:var(--surface-2)}
.pgr-t-more dt{font:600 11px/1.2 var(--ui);color:var(--ink-3)}
.pgr-t-more dd{margin:3px 0 0;font:700 14px/1.2 var(--display);color:var(--ink);white-space:nowrap}
.pgr-stat.is-t>p{flex:1 1 170px;margin:0;font:500 12px/1.45 var(--ui);color:var(--ink-3)}
/* Temps passé sur un module : petite pastille ⏱ (planning et accueil), jamais coupée. */
.pgr-mod-time,.home-module-time{display:inline-flex;align-items:center;gap:4px;margin-left:7px;padding:2px 8px 2px 6px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);font:700 11px/1.35 var(--ui);white-space:nowrap;vertical-align:1px}
.pgr-mod-time svg,.home-module-time svg{flex:none;width:11px;height:11px;color:#0F9F86}
.pgr-chart{margin-top:16px;padding:14px 12px 13px;border:2px solid var(--line-2);border-radius:18px;background:#fff}
.pgr-chart-h{display:flex;align-items:baseline;justify-content:space-between;gap:4px 10px;flex-wrap:wrap}
.pgr-chart-h b{font:700 16px var(--display);color:var(--ink)}
.pgr-chart-h small{font:600 12px var(--ui);color:var(--ink-2)}
.pgr-bars{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:4px;height:118px;align-items:end;background:linear-gradient(var(--line-2),var(--line-2)) 0 calc(100% - 22px)/100% 2px no-repeat}
.pgr-bars li{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.pgr-bars li em{font:700 10.5px/1 var(--display);color:var(--accent-ink);margin-bottom:3px;min-height:10px}
.pgr-bars li>i{display:block;width:100%;max-width:20px;height:calc(var(--h)*.74px);min-height:6px;border-radius:7px 7px 3px 3px;background:var(--line-2);transform-origin:bottom;animation:pgrBar .6s cubic-bezier(.3,.8,.3,1.1) both;animation-delay:calc(var(--k,0)*32ms)}
.pgr-bars li.is-done>i{background:linear-gradient(180deg,var(--accent-2),var(--accent))}
.pgr-bars li.is-rest>i{background:repeating-linear-gradient(135deg,var(--line-2) 0 3px,#fff 3px 6px)}
.pgr-bars li.is-today>i{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)}
.pgr-bars li.is-today:not(.is-done)>i{background:#fff;box-shadow:inset 0 0 0 2px var(--accent)}
.pgr-bars li>small{margin-top:7px;height:13px;font:600 10.5px/13px var(--ui);color:var(--ink-3)}
.pgr-bars li.is-today>small{color:var(--accent-ink);font-weight:800}
@keyframes pgrBar{from{transform:scaleY(0)}to{transform:none}}
.pgr-trend{margin:11px 0 0;font:500 12.5px/1.45 var(--ui);color:var(--ink-2)}
.pgr-trend b{color:var(--ink);font-weight:700}
.pgr-next{margin-top:16px;padding:14px;border-radius:18px;background:var(--surface-2)}
.pgr-next>span{display:block;min-width:0}
.pgr-next small{display:block;font:700 10.5px/1.2 var(--ui);letter-spacing:.07em;text-transform:uppercase;color:var(--accent-ink)}
.pgr-next>span>b{display:block;margin-top:4px;font:700 17px/1.25 var(--display);color:var(--ink)}
.pgr-next>span>em{display:block;margin-top:4px;font:500 12.5px/1.4 var(--ui);color:var(--ink-2)}
.pgr-actions{display:flex;gap:8px;margin-top:13px}
.pgr-go{flex:1;min-width:0;min-height:48px;padding:0 14px;display:flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:15px;background:var(--accent);color:#fff;font:700 15px var(--display);box-shadow:0 4px 0 var(--m-lip,#4B30CC);cursor:pointer;-webkit-tap-highlight-color:transparent}
.pgr-go:active{transform:translateY(4px);box-shadow:none}
.pgr-go svg{width:17px;height:17px}
.pgr-actions .pl-overview-adjust{flex:none;min-height:48px;padding:0 14px;display:flex;align-items:center;gap:6px;font-size:14px}
.pgr-actions .pl-overview-adjust svg{width:17px;height:17px}
.pgr-go:focus-visible,.pgr-tile:focus-visible,.pgr-chip:focus-visible,.pgr-mod>button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
/* Par module */
.pgr-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 14px;flex-wrap:wrap}
.pgr-head b{font:700 30px/1 var(--display);color:var(--ink)}
.pgr-head b em{margin-left:2px;font:600 15px var(--ui);color:var(--ink-3)}
.pgr-head small{display:block;margin-top:4px;font:600 12.5px var(--ui);color:var(--ink-2)}
.pgr-legend{list-style:none;margin:0;padding:0;display:flex;gap:4px 12px;flex-wrap:wrap;font:600 11.5px var(--ui);color:var(--ink-2)}
.pgr-legend li::before{content:'';display:inline-block;width:9px;height:9px;margin-right:5px;border-radius:50%;vertical-align:-1px;background:var(--line)}
.pgr-legend .is-done::before{background:var(--accent)}
.pgr-legend .is-started::before{background:linear-gradient(90deg,var(--accent) 50%,var(--line) 0)}
.pgr-map{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px}
.pgr-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 4px 9px;border:2px solid var(--line-2);border-radius:16px;background:#fff;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s,border-color .15s}
.pgr-tile:active{transform:scale(.95)}
.pgr-tile.is-done{border-color:#D9CFFF;background:#FBFAFF}
.pgr-tile>small{font:700 11.5px var(--ui);color:var(--ink-2);font-variant-numeric:tabular-nums}
.pgr-ring{--f:0;position:relative;flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--f)*1%),var(--line-2) 0)}
.pgr-ring::after{content:'';position:absolute;inset:5px;border-radius:50%;background:#fff}
.pgr-ring span{position:relative;z-index:1;display:grid;place-items:center;font:700 13px var(--display);color:var(--ink-3)}
.pgr-ring span svg{width:19px;height:19px}
.is-started .pgr-ring span{color:var(--accent-ink)}
.is-done .pgr-ring{background:var(--accent)}
.is-done .pgr-ring::after{background:var(--accent)}
.is-done .pgr-ring span{color:#fff}
.pgr-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:16px 0 0;padding:0 0 8px}
.pgr-chip{min-height:44px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:2px solid var(--line);border-radius:999px;background:#fff;color:var(--ink-2);font:700 13px var(--display);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s,color .15s,transform .15s}
.pgr-chip em{font:700 12px var(--ui);color:var(--ink-3)}
.pgr-chip.on{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 3px 0 var(--m-lip,#4B30CC)}
.pgr-chip.on em{color:rgba(255,255,255,.85)}
.pgr-chip:active{transform:scale(.96)}
.pgr-mods{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.pgr-mod{display:flex;align-items:center;gap:12px;padding:12px;border:2px solid var(--line-2);border-radius:18px;background:#fff}
.pgr-mod .pgr-ring{width:46px;height:46px}
.pgr-mod-b{flex:1;min-width:0}
.pgr-mod-b h3{margin:0;font:700 15px/1.25 var(--display);color:var(--ink);text-wrap:balance}
.pgr-mod-meta{display:flex;align-items:center;gap:9px;margin-top:7px}
.pgr-mod-meta .pgr-meter{flex:1;margin:0}
.pgr-mod-meta em{font:700 11.5px var(--ui);color:var(--ink-2);font-variant-numeric:tabular-nums}
.pgr-mod-b p{margin:6px 0 0;font:500 12px var(--ui);color:var(--ink-3)}
.pgr-mod>button{flex:none;min-height:44px;padding:0 14px;border:2px solid var(--line);border-radius:14px;background:#fff;color:var(--accent-ink);font:700 13px var(--display);box-shadow:0 3px 0 var(--lip);cursor:pointer;-webkit-tap-highlight-color:transparent}
.pgr-mod>button:active{transform:translateY(3px);box-shadow:none}
.pgr-mod.is-flash{animation:pgrFlash 1.3s ease}
/* Liste étroite (téléphone) : le bouton passe sous le module, sur toute la largeur de la carte ; le titre garde toute la ligne au lieu
   d’être coincé en trois ou quatre lignes à côté de « Commencer » (Elisa, 31 octobre, 0 h 40 : « problème de responsivité »). On regarde
   la largeur de la liste elle-même, pas celle de l’écran : la carte change d’allure là où la place manque vraiment. */
.pgr-mods{container-type:inline-size}
@container (max-width:419.98px){
  .pgr-mod{flex-wrap:wrap;row-gap:12px}
  .pgr-mod-b{flex:1 1 calc(100% - 58px)}
  .pgr-mod>button{flex:1 1 100%;width:100%}
}
@keyframes pgrFlash{0%,65%{box-shadow:0 0 0 4px rgba(106,77,244,.4)}100%{box-shadow:0 0 0 0 rgba(106,77,244,0)}}
.pgr-empty{margin:8px 2px 2px;font:500 13.5px/1.5 var(--ui);color:var(--ink-2)}
.pgr-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:359px){
  .pgr{padding-left:14px;padding-right:14px}
  .pgr-top{gap:12px}.pgr-donut{width:88px;height:88px}.pgr-donut>i{font-size:22px}
  .pgr-stats{gap:6px}.pgr-stat{padding:9px 8px 10px}.pgr-stat>b,.pgr-t-main>b{font-size:21px}
  .pgr-map{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pgr-actions{flex-wrap:wrap}.pgr-actions .pl-overview-adjust{flex:1}
}
@media (prefers-reduced-motion:reduce){.pgr-arc,.pgr-bars li>i,.pgr-mod.is-flash{animation:none!important}.pgr-meter b,.pgr-chip,.pgr-tile{transition:none!important}}
html[data-motion="reduce"] .pgr-arc,html[data-motion="reduce"] .pgr-bars li>i,html[data-motion="reduce"] .pgr-mod.is-flash{animation:none!important}

/* ---------- 30. Stickers ----------
   Le tableau, couleur encre comme un capot d'ordinateur : on y colle les stickers gagnés, on les déplace, les tourne
   et les agrandit. Dessous, la planche (papier de protection lilas) : les stickers gagnés, les découpes vides de ceux
   qui sont sur le tableau, les silhouettes de ceux à gagner. Chaque sticker est un canvas ; une ombre le décolle du
   fond. Les holographiques ont des voiles masqués par leur silhouette (irisation, éclat, paillettes, reflet). */
html.lq .stk-art{position:relative;display:block;width:100%;aspect-ratio:1/1;--px:50%;--py:50%;--tx:0deg;--ty:0deg;--k:1}
html.lq .stk-art.is-holo{isolation:isolate}
/* Net sur iPhone : au repos, ni filtre ni transformation sur le canvas. Un drop-shadow ou un perspective() (même neutre) le fait passer par le
   compositeur, qui le ré-échantillonne dès qu’il n’est pas posé pile sur les pixels de l’écran : contours et texte mous. L’ombre est donc peinte
   dans le canvas (stkShadow), qui déborde du sticker de 10 px de chaque côté pour la loger (STK_PAD) ; la 3D n’existe que pendant le geste. */
html.lq .stk-art>canvas{position:absolute;left:-10px;top:-10px;display:block;width:calc(100% + 20px);height:calc(100% + 20px);pointer-events:none}
html.lq .stk-art.is-tilt,html.lq .stk-item.is-lift .stk-art{transform:perspective(700px) rotateX(var(--tx)) rotateY(var(--ty)) scale(var(--k))}
html.lq .stk-art>i{position:absolute;inset:0;pointer-events:none;-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
html.lq .stk-v1{background:linear-gradient(115deg,#FFB3D1 0%,#FFE7A3 16%,#B8F5CF 32%,#AEE4FF 48%,#D4C2FF 64%,#FFB3D1 80%,#FFE7A3 100%) var(--px) var(--py)/300% 300%;mix-blend-mode:multiply;opacity:.55}
html.lq .stk-v2{background:repeating-linear-gradient(115deg,#FF4FA3 0%,#FFC94F 6%,#4FFFA0 12%,#4FC8FF 18%,#A34FFF 24%,#FF4FA3 30%) var(--px) var(--py)/250% 250%;mix-blend-mode:color-dodge;opacity:.32}
html.lq .stk-v3{background:var(--glit) calc(var(--px) * -.6) calc(var(--py) * -.6)/90px 90px;mix-blend-mode:screen;opacity:.85}
html.lq .stk-v4{background:radial-gradient(circle at var(--px) var(--py),rgba(255,255,255,.75) 0%,rgba(255,255,255,.18) 22%,rgba(255,255,255,0) 48%);mix-blend-mode:soft-light}
html.lq .stk-art.is-sweep>.stk-v1,html.lq .stk-art.is-sweep>.stk-v2{animation:stkSweep 1.3s cubic-bezier(.3,.1,.3,1)}
@keyframes stkSweep{from{background-position:0% 0%}to{background-position:100% 100%}}

/* Le tableau */
html.lq #stk-body{padding:4px 20px 32px}
/* 7 novembre, 7 h 36 (« au niveau espacement on est pas bon sur cette page ») : le tableau à 18 px du sous-titre (14 + les 4 du titre), comme les
   blocs de Bibliothèque et de Pratiquer (il en était à 4 px) ; la légende à 12 px sous le tableau, les boutons à 16 px (12 px visibles sous le
   rebord jaune) ; « Ta collection » à 32 px, une autre partie de la page. */
html.lq .stk-board-sec{margin:14px 0 32px}
html.lq .stk-board{position:relative;aspect-ratio:4/3;border-radius:26px;overflow:hidden;isolation:isolate;
  background:radial-gradient(140% 100% at 18% 0%,#3B3274 0%,#2B2458 46%,#221C46 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.05),0 6px 0 #16112E;touch-action:pan-y;-webkit-user-select:none;user-select:none;
  transition:box-shadow .2s}
html.lq .stk-board.is-target{box-shadow:inset 0 0 0 3px #B8A6FF,0 6px 0 #16112E}
html.lq .stk-board-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:800 64px/1 var(--display);letter-spacing:-.03em;color:rgba(255,255,255,.07);pointer-events:none}
html.lq .stk-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:24px;text-align:center;pointer-events:none}
html.lq .stk-empty b{font:700 20px/1.2 var(--display);letter-spacing:-.01em;color:#fff}
html.lq .stk-empty span{max-width:30ch;font-size:14.5px;line-height:1.4;color:rgba(255,255,255,.74)}
html.lq .stk-item{position:absolute;left:calc(var(--x) * 100%);top:calc(var(--y) * 100%);width:calc(26% * var(--s));margin:0;padding:0;border:0;border-radius:16px;background:none;
  transform:translate(-50%,-50%) rotate(var(--r));touch-action:none;cursor:grab;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
html.lq .stk-item:focus{outline:none}
html.lq .stk-item.is-sel::before,html.lq .stk-item:focus-visible::before{content:'';position:absolute;inset:-6%;border:2px dashed rgba(255,255,255,.72);border-radius:20px;pointer-events:none}
html.lq .stk-item.is-drag{cursor:grabbing}
html.lq .stk-item .stk-art{transition:transform .25s var(--pop)}
html.lq .stk-item.is-lift .stk-art{--k:1.08}
html.lq .stk-item.is-lift .stk-art>canvas{filter:drop-shadow(0 14px 14px rgba(0,0,0,.45))}
/* Collé : le sticker arrive soulevé, s’écrase contre le tableau (l’ombre se resserre), rebondit à peine et se pose */
html.lq .stk-item.is-drop .stk-art{animation:stkDrop .6s cubic-bezier(.3,.7,.3,1)}
@keyframes stkDrop{0%{transform:scale(1.14)}28%{transform:scale(.93)}52%{transform:scale(1.025)}76%{transform:scale(.992)}100%{transform:none}}
html.lq .stk-item.is-drop .stk-art>canvas{animation:stkPress .6s ease-out}
@keyframes stkPress{0%{filter:drop-shadow(0 16px 14px rgba(0,0,0,.42)) drop-shadow(0 4px 8px rgba(0,0,0,.18))}
  28%{filter:drop-shadow(0 0 1px rgba(20,14,48,.6)) drop-shadow(0 1px 2px rgba(20,14,48,.3))}
  100%{filter:none}}
/* Le reflet qui balaie le sticker au contact (masqué à sa découpe par --m) */
html.lq .stk-art>.stk-shine{background:linear-gradient(112deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 60%) 0 0/300% 100% no-repeat;
  mix-blend-mode:screen;animation:stkShine .6s .13s cubic-bezier(.3,.1,.3,1) both}
@keyframes stkShine{from{background-position:100% 0}to{background-position:0% 0}}
/* L’air chassé : une onde et quelques poussières autour du sticker, sous lui */
html.lq .stk-puff{position:absolute;left:calc(var(--x) * 100%);top:calc(var(--y) * 100%);width:var(--w);aspect-ratio:1/1;transform:translate(-50%,-50%);pointer-events:none}
html.lq .stk-puff>b{position:absolute;inset:2%;border-radius:50%;border:3px solid rgba(255,255,255,.75);box-shadow:0 0 22px rgba(184,166,255,.55),inset 0 0 14px rgba(184,166,255,.35);
  animation:stkRing .58s .12s cubic-bezier(.2,.7,.3,1) both}
@keyframes stkRing{from{transform:scale(.92);opacity:1}to{transform:scale(1.55);opacity:0}}
html.lq .stk-puff>i{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(184,166,255,.9);
  animation:stkDust .52s .13s cubic-bezier(.2,.7,.3,1) both}
@keyframes stkDust{from{transform:rotate(var(--a)) translateY(calc(var(--w) * -.44)) scale(1);opacity:1}
  to{transform:rotate(var(--a)) translateY(calc(var(--w) * -.8)) scale(.25);opacity:0}}
html.lq .stk-hd{position:absolute;z-index:2;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;display:none;place-items:center;
  background:#fff;color:var(--ink);box-shadow:0 3px 0 rgba(0,0,0,.3);touch-action:none}
html.lq .stk-hd svg{width:17px;height:17px}
html.lq .stk-hd-del{left:7%;top:7%;cursor:pointer}
html.lq .stk-hd-rot{left:93%;top:93%;background:var(--accent);color:#fff;box-shadow:0 3px 0 var(--accent-lip);cursor:nwse-resize}
html.lq .stk-item.is-sel .stk-hd{display:grid}
html.lq .stk-item.is-lift .stk-hd-del{opacity:0}
html.lq .stk-board-bar{display:flex;flex-direction:column;gap:16px;margin-top:12px}
/* 7 novembre, 0 h 50 (Elisa) : « Ajouter un sticker + », au milieu du tableau vide, puis sous le tableau tant qu’il reste des stickers
   à coller ; jaune, comme les boutons qui font jouer. Vide, le tableau est moins haut. */
html.lq .stk-board.is-empty{aspect-ratio:16/9}
@media (max-width:359px){html.lq .stk-board.is-empty{aspect-ratio:3/2}}
html.lq .stk-empty span{text-wrap:balance}
html.lq .stk-ajout{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;margin:0;padding:0 20px;border:0;border-radius:15px;
  background:var(--sun);color:#1B1640;font:800 15.5px/1.1 var(--display);letter-spacing:-.01em;cursor:pointer;box-shadow:0 4px 0 var(--sun-lip);
  transition:transform .12s var(--press),box-shadow .12s var(--press);-webkit-tap-highlight-color:transparent}
html.lq .stk-ajout:active{transform:translateY(4px);box-shadow:0 0 0 var(--sun-lip)}
html.lq .stk-ajout svg{flex:none}
html.lq:not(.pointer-nav) .stk-ajout:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
html.lq .stk-empty .stk-ajout{margin-top:10px;pointer-events:auto}
html.lq:not(.pointer-nav) .stk-empty .stk-ajout:focus-visible{outline-color:#fff}
html.lq .stk-board-bar>.stk-ajout{width:100%;min-height:52px}
/* La feuille « Ajouter un sticker » : les stickers débloqués pas encore collés */
html.lq .stk-choix-t{margin:2px auto 14px;max-width:32ch;font-size:15px;line-height:1.45;color:var(--ink-2)}
html.lq .stk-choix{margin-bottom:6px}
html.lq .stk-choix .stk-cell{cursor:pointer}
html.lq .stk-board-bar>p{margin:0 6px;font-size:13.5px;line-height:1.4;color:var(--ink-3);text-align:center}
html.lq .stk-board-actions{display:flex;gap:10px}
html.lq .stk-board-actions .stk-btn{flex:1 1 0;min-width:0}
html.lq .stk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 14px;font-size:17px;cursor:pointer}
html.lq .stk-btn svg{flex:none;width:20px;height:20px}

/* La planche */
html.lq .stk-sheet{padding:14px 10px 4px;border:2px solid var(--line);border-radius:24px;
  background:repeating-linear-gradient(135deg,rgba(106,77,244,.045) 0 2px,transparent 2px 16px),#F8F6FF}
html.lq .stk-group{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 8px 4px}
html.lq .stk-group h3{margin:0;font:700 16px/1.25 var(--display);letter-spacing:-.01em;color:var(--ink)}
html.lq .stk-group span{font-size:13.5px;color:var(--ink-3);white-space:nowrap}
html.lq .stk-grid{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 6px}
@media (min-width:600px){html.lq .stk-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
html.lq .stk-cell{position:relative;display:block;width:100%;margin:0;padding:9px;border:0;border-radius:20px;background:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;transition:transform .15s var(--press)}
html.lq .stk-cell:active{transform:scale(.96)}
html.lq .stk-cell:focus{outline:none}
html.lq:not(.pointer-nav) .stk-cell:focus-visible{box-shadow:inset 0 0 0 3px var(--accent)}
html.lq .stk-cell.is-got{cursor:grab}
html.lq .stk-cell.is-placed .stk-art{opacity:.42}
html.lq .stk-cell.is-peeling{transform:none}
html.lq .stk-lock{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:#8C85B3;box-shadow:0 2px 0 var(--lip);pointer-events:none}
html.lq .stk-lock svg{width:15px;height:15px}
html.lq .stk-new{position:absolute;top:2px;right:0;padding:4px 8px;border-radius:99px;background:var(--accent);color:#fff;font:700 11px/1 var(--display);font-style:normal;
  box-shadow:0 2px 0 var(--accent-lip);pointer-events:none}

/* Le sticker décollé qui suit le doigt */
html.lq .stk-ghost{position:fixed;left:0;top:0;z-index:200;pointer-events:none;will-change:transform}
html.lq .stk-ghost .stk-art{transform:rotate(-6deg) scale(1.14);animation:stkLift .2s var(--pop)}
html.lq .stk-ghost .stk-art>canvas{filter:drop-shadow(0 16px 16px rgba(34,28,70,.35))}
html.lq .stk-ghost.is-back .stk-art{transform:none;transition:transform .26s}
@keyframes stkLift{from{transform:none}}

/* La fiche */
html.lq #stk-sheet{top:auto;max-height:calc(100% - max(48px,calc(var(--safe-top) + 20px)))}
html.lq #stk-sheet .viz-body{padding-top:0;text-align:center}
html.lq .stk-stage{position:relative;display:grid;place-items:center;margin:0 -18px 16px;padding:28px 0 24px;touch-action:none;
  background:radial-gradient(70% 70% at 50% 45%,#fff 0%,rgba(255,255,255,0) 100%)}
html.lq .stk-stage .stk-art{width:min(56vw,236px)}
html.lq .stk-stage .stk-lock{width:50px;height:50px;margin:-25px 0 0 -25px;box-shadow:0 3px 0 var(--lip)}
html.lq .stk-stage .stk-lock svg{width:24px;height:24px}
html.lq .stk-kicker{margin:0;font:700 14px/1.3 var(--display);color:var(--accent-ink)}
html.lq .stk-name{margin:4px 0 4px;font:700 27px/1.12 var(--display);letter-spacing:-.02em;color:var(--ink);overflow-wrap:anywhere}
html.lq .stk-when{margin:0 auto;max-width:34ch;font-size:15px;line-height:1.45;color:var(--ink-2)}
html.lq .stk-actions{display:grid;gap:12px;margin:20px 0 0}
html.lq .stk-note{margin:16px 2px 0;font-size:13.5px;line-height:1.45;color:var(--ink-3);text-align:left}
html.lq .stk-prog{max-width:260px;height:10px;margin:16px auto 0;border-radius:99px;background:var(--accent-soft);overflow:hidden}
html.lq .stk-prog i{display:block;height:100%;min-width:10px;border-radius:99px;background:var(--accent)}
html.lq .stk-prog-t{margin:8px 0 0;font-size:14px;font-weight:650;color:var(--ink-2)}

/* Nouveau sticker : dans le bilan d'une leçon, le toast et la Bibliothèque */
html.lq .bravo-stk{display:flex;align-items:center;gap:14px;width:100%;margin:14px 0 0;padding:12px 16px 12px 10px;border:2px solid var(--line);border-radius:22px;
  background:#fff;box-shadow:0 4px 0 var(--lip);color:var(--ink);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq .bravo-stk:active{transform:translateY(4px);box-shadow:0 0 0 var(--lip)}
html.lq .bravo-stk-art{position:relative;flex:none;width:80px;height:80px}
html.lq .bravo-stk-art .stk-art{position:absolute;inset:0;transform:rotate(-4deg)}
html.lq .bravo-stk-art.n2 .stk-art:first-child{transform:translate(-9px,3px) rotate(-12deg) scale(.82)}
html.lq .bravo-stk-art.n2 .stk-art+.stk-art{transform:translate(9px,-2px) rotate(6deg) scale(.82)}
html.lq .bravo-stk-art.n3 .stk-art:nth-child(1){transform:translate(-12px,4px) rotate(-14deg) scale(.72)}
html.lq .bravo-stk-art.n3 .stk-art:nth-child(2){transform:translate(0,-6px) rotate(2deg) scale(.72)}
html.lq .bravo-stk-art.n3 .stk-art:nth-child(3){transform:translate(12px,5px) rotate(12deg) scale(.72)}
html.lq .bravo-stk-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
html.lq .bravo-stk-copy small{font:700 13.5px/1.2 var(--display);color:var(--accent-ink)}
html.lq .bravo-stk-copy b{font:700 19px/1.15 var(--display);letter-spacing:-.01em;color:var(--ink)}
html.lq .bravo-stk-copy em{font-style:normal;font-size:14px;line-height:1.35;color:var(--ink-2)}
html.lq .bravo-stk>svg{flex:none;width:18px;height:18px;color:#B3ACD4}
html.lq .bravo-stk.is-new .bravo-stk-art{animation:stkSlap .75s var(--pop) .45s both}
@keyframes stkSlap{0%{opacity:0;transform:scale(1.8) rotate(-18deg)}55%{opacity:1;transform:scale(.92) rotate(3deg)}100%{opacity:1;transform:none}}
html.lq .toast .tmini.stk{width:44px!important;height:44px!important;background:none!important;box-shadow:none!important;border-radius:0!important}
html.lq .toast .tmini.stk .stk-art{width:44px}
html.lq .journey-new{display:inline-block;margin-left:8px;padding:3px 8px;border-radius:99px;background:var(--accent);color:#fff;font:700 11.5px/1.2 var(--display);font-style:normal;vertical-align:2px;box-shadow:0 2px 0 var(--accent-lip)}


/* ==========================================================================
   Couleurs de la vitrine dans l’appli (Elisa, 30 octobre : « j’adore les couleurs, à ramener sur l’application »)
   Violet profond en dégradé avec un quadrillage léger et une lueur jaune, rubriques en vert menthe, titres en jaune
   soleil, bouton jaune sur le violet, bord arc-en-ciel, étincelles : comme decouvrir/ et l’intro des cours.
   ========================================================================== */
html.lq{--sun:#FFC83D;--sun-hi:#FFD86B;--sun-lip:#E0A100;--mint:#9FF0C6;--deep:linear-gradient(165deg,#7556F8 0%,#5538E6 52%,#4528CA 100%)}
@keyframes lqFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes lqTwinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.7) rotate(20deg);opacity:.75}}
/* L’onde autour du point vert : un anneau qui grandit et s’efface (transform et opacity seulement). Avant le 31 octobre, elle animait
   box-shadow, que l’iPhone redessine sur le fil principal à chaque image, sans fin, tant que l’accueil est ouvert. */
@keyframes lqPing{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(3);opacity:0}}

/* Carte de la séance : violet profond, quadrillage, lueur jaune */
html.lq .lq-hero{isolation:isolate;overflow:hidden;background:var(--deep);box-shadow:0 6px 0 #3A22B0,0 26px 44px -26px rgba(40,20,140,.55)}
html.lq .lq-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(260px 220px at 92% 0%,rgba(255,216,107,.26),transparent 70%),
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 75% 20%,#000 25%,transparent 85%);mask-image:radial-gradient(ellipse 90% 80% at 75% 20%,#000 25%,transparent 85%)}
html.lq .lq-hero::after{content:"";position:absolute;right:16px;top:14px;width:18px;height:18px;pointer-events:none;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.9 6 4.9 10 11 11-6.1 1-10.1 5-11 11-.9-6-4.9-10-11-11 6.1-1 10.1-5 11-11Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.9 6 4.9 10 11 11-6.1 1-10.1 5-11 11-.9-6-4.9-10-11-11 6.1-1 10.1-5 11-11Z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:lqTwinkle 3.2s ease-in-out infinite}
html.lq .lq-hero-mod{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)}
html.lq .lq-hero-mod b{background:var(--mint);color:#1B1640}
html.lq .lq-hero-title{color:var(--sun-hi)}
html.lq .lq-hero-sub{color:rgba(255,255,255,.86)}
/* Bouton jaune sur le violet, comme « Commencer » sur la vitrine */
html.lq .lq-hero .lq-hero-cta{background:var(--sun)!important;color:#1B1640!important;box-shadow:0 5px 0 var(--sun-lip)!important}
html.lq .lq-hero .lq-hero-cta:active{box-shadow:0 0 0 var(--sun-lip)!important}
html.lq .lq-hero .lq-play{background:#1B1640;color:var(--sun-hi)}

/* Série : bord arc-en-ciel qui ondule, comme la carte « Ton objectif » */
html.lq .lq-streak{border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(115deg,var(--sun-hi),var(--mint) 35%,#9CD7FF 65%,#D9B8FF) border-box;background-size:auto,300% 300%;animation:lqFlow 7s ease-in-out infinite}

/* Salutation : le premier mot souligné en jaune */
html.lq .lq-hi-title .lq-nw{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30' preserveAspectRatio='none'%3E%3Cpath d='M4 20C70 8 170 6 296 14' fill='none' stroke='%23FFC83D' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100%/100% .26em;padding-bottom:.06em}

/* Module en cours dans « Ton parcours » : même violet profond, rubrique menthe, titre jaune, barre de progression menthe */
html.lq .home-module.is-current>.home-module-summary{background:radial-gradient(220px 160px at 96% 0%,rgba(255,216,107,.22),transparent 70%),var(--deep)!important;border-color:#5538E6!important;box-shadow:0 5px 0 #3A22B0,0 22px 40px -26px rgba(40,20,140,.55)}
html.lq .home-module.is-current>.home-module-summary:active{box-shadow:0 0 0 #3A22B0}
html.lq #scr-learn .home-module.is-current .home-module-copy small.lq-unit-k{color:var(--mint)!important;font-weight:800;letter-spacing:.04em}
html.lq #scr-learn .home-module.is-current .home-module-copy b{color:var(--sun-hi)!important}
html.lq .home-module.is-current .home-module-progress>i{background:var(--mint)!important}

@media (prefers-reduced-motion:reduce){html.lq .lq-hero::after,html.lq .lq-streak{animation:none!important}}

/* ---------- 31. Mascotte en autocollant ----------
   Elisa, 30 octobre : « pas pro » le médaillon gris. Comme sur la vitrine, la mascotte est un autocollant
   découpé (contour blanc, ombre à rebord peinte dans l’image : pas de filtre, net sur iPhone), penché, qui se balance doucement. Autour : deux étincelles et un
   mot-clé SQL façon console (carte de la séance). Coucou (.is-hello) : il se balance et sautille, des
   confettis partent, la bulle de BD arrive. Arrivée (.is-intro, une fois par séance) : il se colle d’un
   claquement. Fin de leçon réussie (.is-party) : il danse tant que l’écran est là. */
html.lq{--mstk-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.9 6 4.9 10 11 11-6.1 1-10.1 5-11 11-.9-6-4.9-10-11-11 6.1-1 10.1-5 11-11Z'/%3E%3C/svg%3E")}
html.lq .mascot-stk{
  --mr:4deg;
  position:relative;flex:none;display:block;width:84px;height:auto;padding:0;margin:0;border:0;border-radius:0;background:none;
  box-shadow:none;overflow:visible;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  -webkit-appearance:none;appearance:none;font:inherit;color:inherit;-webkit-mask-image:none;mask-image:none;
}
html.lq .mascot-stk:focus{outline:none}
html.lq .mascot-stk:focus-visible{outline:3px solid var(--sun-hi);outline-offset:5px;border-radius:20px}
html.lq .mstk-cat{
  position:relative;z-index:1;display:block;width:100%;height:auto;max-width:none;margin:0;
  pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;
  rotate:var(--mr);transform-origin:50% 92%;transition:scale .14s cubic-bezier(.3,.7,.4,1);
  animation:mstkBob 3.8s ease-in-out infinite;
}
html.lq .mascot-stk:active .mstk-cat{scale:.93}
/* Étincelles */
html.lq .mstk-sp{position:absolute;z-index:3;width:13px;height:13px;pointer-events:none;background:var(--mint);
  -webkit-mask:var(--mstk-star) center/contain no-repeat;mask:var(--mstk-star) center/contain no-repeat;animation:mstkTwinkle 2.8s ease-in-out infinite}
html.lq .mstk-sp-a{left:-9px;top:30%}
html.lq .mstk-sp-b{right:-7px;top:-2px;width:17px;height:17px;background:var(--sun-hi);animation-delay:-1.4s}
/* Mot-clé SQL collé sur l’autocollant, façon console de la vitrine */
html.lq .mstk-kw{position:absolute;z-index:3;right:-5px;bottom:5%;padding:5px 7px 5px;border-radius:8px;background:var(--code-bg,#1E1A3B);color:var(--t-kw,#C9BCFF);
  font:700 11px/1 var(--mono);letter-spacing:.02em;white-space:nowrap;box-shadow:0 3px 0 #0F0B2A;rotate:8deg;pointer-events:none;
  animation:mstkFloat 5.2s ease-in-out -2s infinite}
/* Bulle de BD (comme celle de l’onboarding et de la page de connexion) */
html.lq .mstk-bub{position:absolute;z-index:4;right:42%;bottom:calc(100% - 16px);padding:7px 11px 8px;border:2.5px solid #1B1640;border-radius:14px;background:#fff;
  color:#1B1640;font:800 14px/1 var(--display);letter-spacing:-.01em;white-space:nowrap;box-shadow:0 3px 0 #1B1640;
  transform-origin:88% 120%;opacity:0;transform:scale(.3) rotate(-12deg);pointer-events:none}
html.lq .mstk-bub::after{content:"";position:absolute;right:13px;bottom:-8px;width:11px;height:11px;background:#fff;
  border-right:2.5px solid #1B1640;border-bottom:2.5px solid #1B1640;border-radius:0 0 3px 0;transform:rotate(45deg) skew(6deg,6deg)}
/* Confettis du coucou : les petits morceaux des stickers de la vitrine */
html.lq .mstk-fx{position:absolute;left:50%;top:36%;z-index:0;width:0;height:0;pointer-events:none}
html.lq .mstk-fx i{position:absolute;left:-4px;top:-2px;width:9px;height:5px;border-radius:2px;background:var(--c);opacity:0}
html.lq .mstk-fx i:nth-child(1){--c:#FFD86B;--x:-58px;--y:-30px;--r:-200deg}
html.lq .mstk-fx i:nth-child(2){--c:#9FF0C6;--x:-40px;--y:-62px;--r:160deg;width:5px;height:5px;border-radius:50%}
html.lq .mstk-fx i:nth-child(3){--c:#F0616A;--x:-6px;--y:-76px;--r:-120deg}
html.lq .mstk-fx i:nth-child(4){--c:#fff;--x:34px;--y:-58px;--r:220deg;width:6px;height:6px;border-radius:50%}
html.lq .mstk-fx i:nth-child(5){--c:#C9BCFF;--x:-66px;--y:10px;--r:140deg}
html.lq .mstk-fx i:nth-child(6){--c:#FFC83D;--x:48px;--y:-18px;--r:-160deg;width:0;height:0;border-radius:0;background:none;
  border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:8px solid var(--c)}
/* Coucou */
html.lq .mascot-stk.is-hello .mstk-cat{animation:mstkHello .95s cubic-bezier(.3,.7,.4,1) both,mstkBob 3.8s ease-in-out .95s infinite}
html.lq .mascot-stk.is-hello .mstk-fx i{animation:mstkBurst .9s cubic-bezier(.15,.7,.3,1) .12s both}
html.lq .mascot-stk.is-hello .mstk-bub{animation:mstkBub 2.7s ease-out .18s both}
/* Arrivée : collé d’un claquement, puis confettis, mot-clé, étincelles et bulle */
html.lq .mascot-stk.is-intro .mstk-cat{animation:mstkSlap .72s cubic-bezier(.2,.8,.3,1) .15s both,mstkBob 3.8s ease-in-out .9s infinite}
html.lq .mascot-stk.is-intro .mstk-fx i{animation:mstkBurst .9s cubic-bezier(.15,.7,.3,1) .5s both}
html.lq .mascot-stk.is-intro .mstk-kw{animation:mstkPop .5s cubic-bezier(.34,1.56,.64,1) .62s both,mstkFloat 5.2s ease-in-out 1.12s infinite}
html.lq .mascot-stk.is-intro .mstk-sp{animation:mstkPop .45s cubic-bezier(.34,1.56,.64,1) .78s both,mstkTwinkle 2.8s ease-in-out 1.23s infinite}
html.lq .mascot-stk.is-intro .mstk-bub{animation:mstkBub 2.7s ease-out 1s both}
/* Réussite : il danse tant que l’écran est là */
html.lq .mascot-stk.is-party .mstk-cat,html.lq .mascot-stk.is-party.is-hello .mstk-cat{animation:mstkHello .95s cubic-bezier(.3,.7,.4,1) both,mstkDance 2.6s ease-in-out .95s infinite}
@keyframes mstkBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px) rotate(-2deg)}}
@keyframes mstkTwinkle{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(.55) rotate(25deg);opacity:.6}}
@keyframes mstkFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes mstkHello{0%{transform:none}16%{transform:translateY(-13px) rotate(-10deg) scale(1.07)}34%{transform:translateY(0) rotate(7deg) scale(1.04,.96)}52%{transform:translateY(-5px) rotate(-6deg)}70%{transform:rotate(3deg)}86%{transform:rotate(-1deg)}100%{transform:none}}
@keyframes mstkSlap{0%{opacity:0;transform:translateY(-22px) rotate(-18deg) scale(1.55)}48%{opacity:1;transform:translateY(3px) rotate(4deg) scale(.9)}70%{transform:translateY(-2px) rotate(-2deg) scale(1.05)}86%{transform:rotate(1deg) scale(.99)}100%{opacity:1;transform:none}}
@keyframes mstkBurst{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.3)}14%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1)}}
@keyframes mstkPop{0%{opacity:0;scale:.2}100%{opacity:1;scale:1}}
@keyframes mstkBub{0%{opacity:0;transform:scale(.3) rotate(-16deg)}9%{opacity:1;transform:scale(1.1) rotate(-3deg)}15%{transform:scale(.97) rotate(-7deg)}20%{transform:scale(1) rotate(-6deg)}86%{opacity:1;transform:scale(1) rotate(-6deg)}100%{opacity:0;transform:translateY(-6px) scale(.92) rotate(-6deg)}}
@keyframes mstkDance{0%,58%,100%{transform:translateY(0)}12%{transform:translateY(-8px) rotate(-7deg)}26%{transform:rotate(6deg) scale(1.03,.97)}40%{transform:translateY(-4px) rotate(-3deg)}}
@media (prefers-reduced-motion:reduce){
  html.lq .mascot-stk *{animation:none!important}
  html.lq .mascot-stk.is-hello .mstk-bub{opacity:1;transform:rotate(-6deg)}
}
html.lq[data-motion="reduce"] .mascot-stk *{animation:none!important}
html.lq[data-motion="reduce"] .mascot-stk.is-hello .mstk-bub{opacity:1;transform:rotate(-6deg)}

/* ---------- 32. Derniers écarts avec la vitrine (audit du 30 octobre) ----------
   Planning : la carte d’introduction passe du gris-noir de l’ancien thème au violet profond du héros (quadrillage,
   lueur jaune), avec son calendrier en sticker. Défis : le bouton « Tirer un défi » quitte l’ancien dégradé indigo pour
   le violet à rebord des autres boutons ; « Salle de défi » prend le surtitre de la vitrine (trait + capitales). */
html.lq .pl-intro{position:relative;isolation:isolate;overflow:hidden;margin-bottom:18px;padding:20px;border-radius:24px;background:var(--deep);color:#fff;
  box-shadow:0 6px 0 #3A22B0,0 22px 40px -26px rgba(40,20,140,.55)}
html.lq .pl-intro::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(220px 180px at 96% 0%,rgba(255,216,107,.26),transparent 70%),
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 90% 90% at 80% 10%,#000 25%,transparent 85%);mask-image:radial-gradient(ellipse 90% 90% at 80% 10%,#000 25%,transparent 85%)}
html.lq .pl-intro b{display:block;margin:2px 0 8px;font:700 21px/1.15 var(--display);letter-spacing:-.02em;color:var(--sun-hi)}
html.lq .pl-intro p{margin:0;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.86)}
html.lq .pl-intro-stk{float:right;width:60px;height:60px;margin:-6px -6px 6px 12px;rotate:9deg;overflow:visible;animation:mstkFloat 5.2s ease-in-out infinite}
html.lq .room-go{min-height:56px!important;border-radius:18px!important;background:var(--accent)!important;color:#fff!important;
  box-shadow:0 5px 0 var(--accent-lip)!important;font:700 17px/1 var(--display)!important;letter-spacing:-.01em;
  transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq .room-go:active{transform:translateY(5px)!important;box-shadow:0 0 0 var(--accent-lip)!important}
html.lq .room-kicker{display:inline-flex;align-items:center;gap:8px;font:700 12.5px/1 var(--display)!important;letter-spacing:.06em!important;color:var(--accent-ink)!important}
html.lq .room-kicker::before{content:"";flex:none;width:16px;height:2px;border-radius:2px;background:currentColor}
@media (prefers-reduced-motion:reduce){html.lq .pl-intro-stk{animation:none}}
html.lq[data-motion="reduce"] .pl-intro-stk{animation:none}

/* ---------- 33. Barre de touches SQL ----------
   Elisa, 30 octobre, 16 h 47 : « j’ai l’impression que le clavier est flou et qu’on ne peut pas écrire des lettres ». Plus de verre
   dépoli (le fond flouté laissait voir l’écran en dessous) : un fond plein et net, des touches à rebord comme les autres boutons, en
   texte plus grand. « Insérer » dit ce que fait la barre : elle ajoute un mot SQL là où est le curseur ; les lettres s’écrivent au
   clavier. Sur ordinateur (souris ou pavé tactile), pas de bouton « Masquer le clavier » : il n’y a pas de clavier à l’écran, il ne
   faisait que quitter l’éditeur. Dès 600 px, la barre se pose en bas du cadre de l’app au lieu de couvrir toute la fenêtre. */
html.lq .kbar{background:#FBFAFF;border-top:1.5px solid var(--line);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 -10px 24px -18px rgba(40,30,90,.35)}
html.lq .kbar-wrap{gap:8px}
html.lq .kbar-in{gap:7px;padding:2px 0 4px}
html.lq .kbar button{height:40px;padding:0 13px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:700 14px/1 var(--mono);box-shadow:0 2px 0 var(--lip)}
html.lq .kbar button.kw{background:var(--accent-soft);border-color:#D9CFFF;color:var(--accent-ink);box-shadow:0 2px 0 #D3C8FF}
html.lq .kbar button.kbar-top.kw{border-color:var(--accent);box-shadow:0 2px 0 var(--accent-lip)}
html.lq .kbar button.kbar-top:not(.kw){border-color:var(--accent-2);box-shadow:0 2px 0 #D3C8FF}
html.lq .kbar button.kbar-tbl,html.lq .kbar button.kbar-col{border-style:dashed}
html.lq .kbar button.kbar-tbl{color:#0A6B52}
html.lq .kbar button.kbar-col{color:#5B4A8A}
html.lq .kbar button:active{transform:translateY(2px);box-shadow:0 0 0 var(--lip)}
html.lq .kbar .kbar-dock{width:40px;height:40px;padding:0;border-radius:12px;color:var(--ink-2)}
html.lq .kbar.kb-down .kbar-dock{width:54px;height:30px;border-radius:999px}
html.lq .kbar-lab{display:none;flex:none;align-items:center;padding:0 2px 2px 4px;font:700 13px/1 var(--display);color:var(--ink-3);white-space:nowrap}
@media (hover:hover) and (pointer:fine){
  html.lq .kbar .kbar-dock{display:none}
  html.lq .kbar-lab{display:flex}
}
@media (min-width:600px){
  html.lq .kbar{left:0;right:0;bottom:14px;width:min(1440px,calc(100% - 28px));margin:0 auto;border-radius:0 0 34px 34px}
  html.lq .kbar-wrap{max-width:none;padding:0 20px}
}

/* ---------- 34. Cours en vidéo : la page du cours dans la DA de la vitrine ----------
   Elisa, 30 octobre, 21 h 33 : « ici tu peux améliorer la page, la passer à un niveau supérieur : sticker, animation, etc., DA du site ».
   Le titre et la vignette sont posés sur la carte violette de l’accueil (dégradé profond, quadrillage, lueur jaune, étincelle) :
   pastille du module (menthe), titre en jaune soleil. La vignette y est collée comme un autocollant (bord blanc, ombre à rebord),
   avec la carte mémo à gagner dans son coin et un ▶ jaune qui respire. Toujours en un écran : la vignette rapetisse du dépassement
   (lvCardFit), jamais sous 230 px ; elle déborde pour laisser dépasser la carte mémo, d’où min-height:0 (sans lui, l’image imposait
   sa hauteur au carré). Rien n’est transformé sur la vignette elle-même (Safari y laissait des traits, voir .lv-card) :
   seuls les décors bougent, et la carte n’entre qu’une fois (animation sans état final gardé). */
@keyframes lvHeroIn{from{opacity:0;transform:translateY(14px)}}
@keyframes lvPlayPing{0%{box-shadow:0 0 0 0 rgba(255,216,107,.6)}75%,100%{box-shadow:0 0 0 15px rgba(255,216,107,0)}}
@keyframes lvPrizeF{0%,100%{translate:0 0;rotate:9deg}50%{translate:0 -4px;rotate:6deg}}
html.lq #scr-lesson .lv-hero{position:relative;isolation:isolate;overflow:hidden;gap:0;margin:4px 0 0;padding:15px 16px 16px;border-radius:28px;background:var(--deep);
  box-shadow:0 6px 0 #3A22B0,0 26px 44px -26px rgba(40,20,140,.55);color:#fff;animation:lvHeroIn .5s var(--press,cubic-bezier(.3,.7,.4,1)) backwards}
html.lq #scr-lesson .lv-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(260px 220px at 92% 0%,rgba(255,216,107,.26),transparent 70%),radial-gradient(240px 200px at 0% 100%,rgba(159,240,198,.16),transparent 70%),
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 95% 85% at 70% 20%,#000 30%,transparent 90%);mask-image:radial-gradient(ellipse 95% 85% at 70% 20%,#000 30%,transparent 90%)}
html.lq #scr-lesson .lv-hero::after{content:"";position:absolute;right:16px;top:15px;width:18px;height:18px;pointer-events:none;background:#fff;
  -webkit-mask:var(--mstk-star) center/contain no-repeat;mask:var(--mstk-star) center/contain no-repeat;animation:lqTwinkle 3.2s ease-in-out infinite}
html.lq #scr-lesson .lv-hero .l-kicker{display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:calc(100% - 30px);margin:0 0 10px!important;padding:4px 11px 4px 4px!important;
  border-radius:14px;background:rgba(255,255,255,.14)!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22);color:#fff!important;font:600 13px/1.25 var(--display)!important;letter-spacing:0!important;text-transform:none!important}
html.lq #scr-lesson .lv-hero .l-kicker b{flex:none;padding:3px 9px;border-radius:10px;background:var(--mint);color:#1B1640;font-weight:700}
html.lq #scr-lesson .lv-hero .l-kicker-mod{opacity:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.lq #scr-lesson .lv-hero>h1{margin:0!important;color:var(--sun-hi)!important;font-size:34px!important;line-height:1.02!important;text-wrap:balance}
html.lq #scr-lesson .lv-hero .l-sub{margin:7px 0 0!important;color:rgba(255,255,255,.86)!important;font-size:16px!important;line-height:1.35}
/* La vignette, collée comme un autocollant ; elle s’enfonce par sa position (top), comme avant */
/* L’affiche du cours remplit la vignette (Elisa, 30 octobre, 22 h 58 : « l’espace entre le fond violet du cours TABLE et le reste,
   fond violet clair, je ne sais pas si c’est OK ») : la vignette prend le format de la carte violette de l’affiche (640 × 886 dans
   l’image de 720 × 947, sous ses marges lilas), et l’image est découpée à cette carte (clip-path, coins de la vignette). */
html.lq #scr-lesson .lv-hero .lv-card{aspect-ratio:640/886;width:min(100%,330px,max(160px,min(calc((100svh - 480px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * .722),var(--lv-fit,9999px))));
  margin:18px auto 4px;min-height:0;overflow:visible;border:4px solid #fff;border-radius:26px;background:#5538E6;box-shadow:0 6px 0 rgba(20,10,60,.34),0 24px 40px -22px rgba(10,4,60,.75)}
html.lq #scr-lesson .lv-hero .lv-card>img{position:absolute;left:-6.25%;top:-1.58%;width:112.5%;height:auto;max-width:none;
  -webkit-clip-path:inset(1.478% 5.556% 4.963% 5.556% round 22px);clip-path:inset(1.478% 5.556% 4.963% 5.556% round 22px)}
html.lq #scr-lesson .lv-hero .lv-card:active{top:4px;box-shadow:0 2px 0 rgba(20,10,60,.34),0 14px 26px -18px rgba(10,4,60,.7)}
html.lq #scr-lesson .lv-hero .lv-card img{border-radius:0}
html.lq #scr-lesson .lv-hero .lv-card-meta{border-color:#fff;color:#1B1640;box-shadow:0 3px 0 rgba(20,10,60,.25)}
html.lq #scr-lesson .lv-hero .lv-card-play{position:relative;background:var(--sun);color:#1B1640;box-shadow:0 5px 0 var(--sun-lip),0 16px 34px -14px rgba(20,10,60,.6)}
html.lq #scr-lesson .lv-hero .lv-card-play::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;animation:lvPlayPing 2.4s ease-out 1.2s infinite}
html.lq #scr-lesson .lv-hero .lv-card:active .lv-card-play{box-shadow:0 2px 0 var(--sun-lip)}
/* La carte mémo à gagner : une petite carte de la collection, penchée dans le coin, qui flotte */
html.lq #scr-lesson .lv-prize{position:absolute;z-index:2;right:-9px;top:-15px;display:grid;justify-items:center;gap:0;pointer-events:none;rotate:9deg;animation:lvPrizeF 4.8s ease-in-out 1s infinite}
html.lq #scr-lesson .lv-prize-c{display:grid;grid-template-rows:auto 1fr;justify-items:center;align-items:center;width:54px;height:70px;padding:6px 5px 5px;box-sizing:border-box;border-radius:13px;
  background:linear-gradient(160deg,#fff,#F1EDFF);box-shadow:0 0 0 3px #fff,0 5px 0 3px rgba(20,10,60,.28)}
html.lq #scr-lesson .lv-prize-c b{padding:2px 6px;border-radius:7px;background:var(--accent-soft,#EEE9FF);color:var(--accent-ink,#5335E0);font:800 11px/1 var(--mono,monospace)}
html.lq #scr-lesson .lv-prize-c i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#1B1640;color:var(--sun-hi);font-style:normal}
html.lq #scr-lesson .lv-prize-c i svg{width:15px;height:15px}
html.lq #scr-lesson .lv-prize-c em{max-width:48px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 10px/1.1 var(--mono,monospace);font-style:normal;color:var(--accent-ink,#5335E0);text-align:center}
html.lq #scr-lesson .lv-prize-t{margin-top:-7px;padding:4px 7px;border-radius:8px;background:var(--sun);color:#1B1640;font:800 10.5px/1 var(--display);white-space:nowrap;box-shadow:0 3px 0 var(--sun-lip);rotate:-4deg}
html.lq #scr-lesson .lv-prize.is-won .lv-prize-t{background:var(--mint);box-shadow:0 3px 0 #5FCB98}
@media (max-width:380px){
  html.lq #scr-lesson .lv-hero{padding:13px 13px 14px;border-radius:24px}
  html.lq #scr-lesson .lv-hero>h1{font-size:30px!important}
  html.lq #scr-lesson .lv-hero .l-sub{font-size:15px!important}
  html.lq #scr-lesson .lv-hero .lv-card{margin-top:16px}
}
@media (prefers-reduced-motion:reduce){
  html.lq #scr-lesson .lv-hero,html.lq #scr-lesson .lv-hero::after,html.lq #scr-lesson .lv-hero .lv-card-play::after,html.lq #scr-lesson .lv-prize{animation:none!important}
}
html[data-motion="reduce"].lq #scr-lesson .lv-hero,html[data-motion="reduce"].lq #scr-lesson .lv-hero::after,html[data-motion="reduce"].lq #scr-lesson .lv-hero .lv-card-play::after,html[data-motion="reduce"].lq #scr-lesson .lv-prize{animation:none!important}

/* ---------- 35. Lecteur des cours en vidéo : le fond violet de la vitrine ----------
   Elisa, 30 octobre, 21 h 33 : « les vidéos peuvent avoir la DA du site ? (couleurs etc.) ». Les scènes sont transparentes dans
   le lecteur (assets/anim/core.css, « Couleurs de la vitrine ») : c’est lui qui peint le violet profond, quadrillé, avec ses
   lueurs, d’un seul tenant sous l’image et les commandes. Sur ce fond : boutons blancs à rebord sombre, ▶ jaune soleil, barre de
   lecture blanche (les points dorés des moments « À toi » restent lisibles), temps et flèche des notes en clair. */
html.lq .lv{background:linear-gradient(170deg,#6E50F6 0%,#5538E6 48%,#4529CC 100%)}
html.lq .lv::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 360px at 96% 0%,rgba(255,216,107,.2),transparent 70%),radial-gradient(380px 340px at 0% 100%,rgba(159,240,198,.12),transparent 70%),
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/30px 30px,linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/30px 30px}
html.lq .lv-video{background:transparent}
html.lq .lv-ico,html.lq .lv-chip{border-color:#fff;box-shadow:0 3px 0 rgba(20,10,60,.3)}
html.lq .lv-ico:active,html.lq .lv-chip:active{box-shadow:0 0 0 rgba(20,10,60,.3)}
html.lq .lv-chip.is-set{background:var(--sun-soft,#FFF4D6);border-color:#fff;color:#1B1640}
html.lq .lv-big{background:var(--sun);color:#1B1640;box-shadow:0 5px 0 var(--sun-lip),0 18px 40px -16px rgba(10,4,60,.6)}
html.lq .lv-time{color:rgba(255,255,255,.84)}
html.lq .lv-rail{background:rgba(255,255,255,.24)}
html.lq .lv-fill{background:#fff}
html.lq .lv-knob::before{border-color:var(--sun);background:#fff;box-shadow:0 2px 6px rgba(10,4,60,.4)}
html.lq .lv.is-valid .lv-knob::before{border-color:var(--mint);box-shadow:0 0 0 6px rgba(159,240,198,.3),0 2px 6px rgba(10,4,60,.4)}
html.lq .lv-c{color:#fff}
html.lq .lv-c:active{background:rgba(255,255,255,.14)}
html.lq .lv-c.lv-pp{background:var(--sun);color:#1B1640;box-shadow:0 4px 0 var(--sun-lip)}
html.lq .lv-c.lv-pp:active{background:var(--sun);box-shadow:0 1px 0 var(--sun-lip)}
html.lq .lv-dt{background:rgba(255,255,255,.16);color:#fff}
html.lq .lv-end{background:rgba(30,16,92,.5)}
html.lq .lv-note-arrow path{stroke:#fff}
html.lq .lv-note-arrow .lv-a-halo{stroke:var(--sun-hi);opacity:.35}

/* ---------- 36. Feuilles, page d’un projet, question d’entretien, pas à pas : la DA de la vitrine ----------
   Elisa, 30 octobre, 22 h 11 : « à passer au niveau supérieur (stickers ? animation ? couleur et DA du site ?) ». Partout le même
   langage que l’accueil et la vitrine : le violet profond quadrillé avec sa lueur jaune et son étincelle, les titres en jaune soleil,
   les pastilles menthe, des autocollants découpés (lqStkSvg : contour blanc, ombre à rebord peinte, net sur iPhone) qui se collent
   d’un claquement puis flottent, des cartes blanches à rebord. */
@keyframes lqAskSlap{0%{opacity:0;transform:translateY(-12px) rotate(-16deg) scale(1.6)}50%{opacity:1;transform:translateY(2px) rotate(4deg) scale(.92)}74%{transform:rotate(-2deg) scale(1.04)}100%{opacity:1;transform:none}}
@keyframes lqAskUp{from{opacity:0;transform:translateY(10px)}}
@keyframes lqWave{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
html.lq .lq-stk{display:block;width:100%;height:100%;overflow:visible}
html.lq .lq-stk-wave path{transform-box:fill-box;transform-origin:center;animation:lqWave 1.1s ease-in-out infinite}
html.lq .lq-stk-wave path:nth-child(2){animation-delay:-.25s}
html.lq .lq-stk-wave path:nth-child(3){animation-delay:-.5s}
html.lq .lq-stk-wave path:nth-child(4){animation-delay:-.75s}
html.lq .lq-stk-wave path:nth-child(5){animation-delay:-.95s}

/* Les feuilles (lqAsk, lqPrompt) : un bandeau violet en tête, l’autocollant, le titre en jaune ; champ et boutons sur le blanc. */
html.lq .lq-ask-sheet{padding:0 20px 20px;overflow:hidden}
html.lq .lq-ask-cap{position:relative;isolation:isolate;margin:0 -20px 20px;padding:24px 24px 22px;background:var(--deep);color:#fff}
html.lq .lq-ask-cap::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(240px 190px at 90% 0%,rgba(255,216,107,.3),transparent 70%),radial-gradient(220px 170px at 0% 100%,rgba(159,240,198,.16),transparent 70%),
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/26px 26px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 100% 95% at 60% 10%,#000 35%,transparent 95%);mask-image:radial-gradient(ellipse 100% 95% at 60% 10%,#000 35%,transparent 95%)}
html.lq .lq-ask-cap.is-danger::before{background:radial-gradient(240px 190px at 90% 0%,rgba(255,128,128,.36),transparent 70%),radial-gradient(220px 170px at 0% 100%,rgba(255,216,107,.12),transparent 70%),
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/26px 26px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/26px 26px}
html.lq .lq-ask-cap::after{content:"";position:absolute;right:20px;top:18px;width:16px;height:16px;pointer-events:none;background:#fff;
  -webkit-mask:var(--mstk-star) center/contain no-repeat;mask:var(--mstk-star) center/contain no-repeat;animation:lqTwinkle 3.2s ease-in-out infinite}
html.lq .lq-ask-stk{display:block;width:74px;height:74px;margin:0 auto 12px;rotate:-6deg}
html.lq .lq-ask-stk>svg{animation:mstkFloat 5.2s ease-in-out 1.1s infinite}
html.lq .lq-ask.on .lq-ask-stk{animation:lqAskSlap .7s cubic-bezier(.3,.7,.3,1) .14s both}
html.lq .lq-ask-stk.is-badge{display:grid;place-items:center;width:58px;height:58px;box-sizing:border-box;border-radius:20px;background:#6A4DF4;color:#fff;
  border:2.5px solid #1B1640;box-shadow:0 0 0 4px #fff,0 6px 0 4px rgba(27,22,64,.28);font-size:27px;line-height:1}
html.lq .lq-ask-stk.is-badge i{display:grid;place-items:center;font-style:normal}
html.lq .lq-ask-stk.is-badge svg{width:27px;height:27px;display:block}
html.lq .lq-ask .lq-ask-cap h2{color:var(--sun-hi);text-wrap:balance;overflow-wrap:anywhere}
html.lq .lq-ask .lq-ask-cap p{margin:8px 0 0;color:rgba(255,255,255,.88);text-wrap:pretty}
html.lq .lq-ask.on .lq-ask-cap h2{animation:lqAskUp .4s ease-out .18s both}
html.lq .lq-ask.on .lq-ask-cap p{animation:lqAskUp .4s ease-out .24s both}
html.lq .lq-ask.on .lq-ask-field,html.lq .lq-ask.on .lq-ask-btns{animation:lqAskUp .42s ease-out .28s both}
html.lq .lq-ask-btns{margin-top:0}
/* Avec un champ : bandeau compact (le clavier prend la moitié de l’écran), l’autocollant à gauche du titre */
html.lq .lq-ask.has-field .lq-ask-sheet{padding-top:0}
html.lq .lq-ask.has-field .lq-ask-cap{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding:18px 40px 18px 18px;text-align:left}
html.lq .lq-ask.has-field .lq-ask-stk{flex:none;width:58px;height:58px;margin:0}
html.lq .lq-ask.has-field .lq-ask-stk.is-badge{width:50px;height:50px;border-radius:17px;font-size:23px}
html.lq .lq-ask-cap-t{flex:1;min-width:0}
html.lq .lq-ask.has-field .lq-ask-cap h2{font-size:21px;line-height:1.15;text-wrap:balance}
html.lq .lq-ask.has-field .lq-ask-cap p{margin:5px 0 0;font-size:14.5px;line-height:1.4}
html.lq .lq-ask.has-field .lq-ask-field{margin:0}
html.lq .lq-ask-field input,html.lq .lq-ask-field textarea{border-color:#E1DAFF;background:#F7F5FF;border-radius:18px;box-shadow:inset 0 2px 0 rgba(27,22,64,.04)}
html.lq .lq-ask-field input:focus,html.lq .lq-ask-field textarea:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 4px var(--accent-soft)}
html.lq .lq-ask-field small{width:max-content;margin:8px 2px 0 auto;padding:4px 9px;border-radius:99px;background:var(--accent-soft);color:var(--accent-ink);font:700 12px/1 var(--display);transition:background .2s,color .2s}
html.lq .lq-ask-field small.is-near{background:#FFF1C9;color:#8A5A00}
html.lq .lq-ask-field small.is-max{background:#FFE1E1;color:#B4232C}
html.lq .lq-ask.has-field .lq-ask-btns{margin-top:14px}
@media (max-width:360px){
  html.lq .lq-ask-cap{padding:20px 18px 18px}
  html.lq .lq-ask-stk{width:64px;height:64px}
  html.lq .lq-ask.has-field .lq-ask-cap{padding:16px 34px 16px 16px;gap:12px}
  html.lq .lq-ask.has-field .lq-ask-stk{width:50px;height:50px}
  html.lq .lq-ask.has-field .lq-ask-cap h2{font-size:19px}
}

/* Planning : « Auj. » (revenir à la semaine en cours) était blanc sur blanc ; un jour passé sans séance n’invite plus à y glisser une
   leçon, et un jour libre rappelle où sont les défis. */
html.lq .wk-nav>.wk-now{width:auto!important;min-width:0!important;padding:0 12px!important;background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;
  box-shadow:0 3px 0 var(--accent-lip)!important;font:700 13.5px/1 var(--display)!important}
html.lq .wk-nav>.wk-now:active{box-shadow:0 0 0 var(--accent-lip)!important}
html.lq .dp-pause .dp-defis{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0;padding:9px 12px 9px 14px;border:2px solid var(--line);border-radius:14px;background:#fff;
  box-shadow:0 3px 0 var(--lip);color:var(--accent-ink);font:700 13.5px/1.25 var(--display);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq .dp-pause .dp-defis:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
html.lq .dp-pause .dp-defis svg{flex:none;width:15px;height:15px}
html.lq .dp-pause.is-past .dp-pi{background:#EFEDF8;font-size:17px}
/* Compte : le premier des 7 jours s’appelle « Auj. » ; sur un petit écran, le compte des séances passe sous le titre */
html.lq .acct-day.is-today small{color:var(--accent-ink);white-space:nowrap}
html.lq .acct-week-card .acct-card-head{flex-wrap:wrap;row-gap:2px}
html.lq .acct-week-card .acct-card-head b{white-space:nowrap}

/* La page d’un projet : son nom sur la carte violette de l’accueil (pastille menthe, titre jaune), la base collée en autocollant,
   la description en blanc ; onglets, schéma et exemples à rebord comme les autres cartes. */
html.lq #scr-console .console-title-row.is-project{display:block}
html.lq #scr-console .console-title-row.is-project>div:first-child{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;margin:4px 0 2px;padding:16px 16px 16px;
  border-radius:28px;background:var(--deep);color:#fff;box-shadow:0 6px 0 #3A22B0,0 26px 44px -26px rgba(40,20,140,.55);animation:lvHeroIn .5s var(--press,cubic-bezier(.3,.7,.4,1)) backwards}
html.lq #scr-console .console-title-row.is-project>div:first-child::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:radial-gradient(260px 220px at 92% 0%,rgba(255,216,107,.26),transparent 70%),radial-gradient(240px 200px at 0% 100%,rgba(159,240,198,.16),transparent 70%),
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 95% 85% at 70% 20%,#000 30%,transparent 90%);mask-image:radial-gradient(ellipse 95% 85% at 70% 20%,#000 30%,transparent 90%)}
html.lq #scr-console .console-title-row.is-project>div:first-child::after{content:"";position:absolute;right:26px;top:80px;width:15px;height:15px;pointer-events:none;background:#fff;
  -webkit-mask:var(--mstk-star) center/contain no-repeat;mask:var(--mstk-star) center/contain no-repeat;animation:lqTwinkle 3.2s ease-in-out infinite}
html.lq #scr-console .console-hero-stk{display:none}
html.lq #scr-console .is-project .console-hero-stk{position:absolute;z-index:2;right:10px;top:-14px;display:block;width:80px;height:80px;rotate:9deg;pointer-events:none;animation:lvPrizeF 4.8s ease-in-out 1s infinite}
html.lq #scr-console .console-title-row.is-project p.sub{order:-1;display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 66px);margin:0;padding:4px 11px 4px 4px;border-radius:14px;
  background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22);color:#fff;font:600 13px/1.25 var(--display);letter-spacing:0}
html.lq #scr-console .console-title-row.is-project p.sub b{flex:none;padding:3px 9px;border-radius:10px;background:var(--mint);color:#1B1640;font-weight:700}
html.lq #scr-console .console-title-row.is-project p.sub span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.lq #app #scr-console .console-title-row.is-project h1{margin:12px 0 0;padding-right:72px;color:var(--sun-hi);font-size:34px;line-height:1.02}
html.lq #app #scr-console .console-title-row.is-project h1.is-long{font-size:26px;line-height:1.1}
html.lq #scr-console .is-project .console-desc{max-width:none;margin:14px 0 0;padding:11px 12px 11px 14px;border:1.5px solid rgba(255,255,255,.24);background:rgba(255,255,255,.1);
  box-shadow:none;color:rgba(255,255,255,.92);font-size:14.5px}
html.lq #scr-console .is-project .console-desc:active{transform:scale(.985);box-shadow:none}
html.lq #scr-console .is-project .console-desc i{display:grid;place-items:center;width:28px;height:28px;margin:-4px -2px -4px 0;border-radius:50%;background:var(--sun);color:#1B1640;opacity:1;box-shadow:0 2px 0 var(--sun-lip)}
html.lq #scr-console .is-project .console-desc i svg{width:15px;height:15px}
html.lq #scr-console .is-project .console-desc.is-empty{border-style:dashed;border-color:rgba(255,255,255,.5);background:transparent;color:#fff}
html.lq #scr-console .is-project .console-desc.is-empty i{margin:0;width:24px;height:24px}
/* Onglets : une piste lilas, l’onglet choisi posé dessus à rebord, ses compteurs en pastilles */
html.lq #scr-console .console-project-tabs{height:54px;padding:4px;border:2px solid var(--line);border-radius:19px;background:#EEEAFE;box-shadow:none}
html.lq #scr-console .console-project-tab{border-radius:14px;color:var(--ink-2);font:700 14px/1 var(--display);letter-spacing:-.01em;gap:6px}
html.lq #scr-console .console-project-tab.on{background:#fff;color:var(--accent-ink);box-shadow:0 3px 0 var(--lip)}
html.lq #scr-console .console-project-tab span{background:#fff;color:var(--ink-3);font:700 11px/1 var(--display);box-shadow:inset 0 0 0 1.5px var(--line)}
html.lq #scr-console .console-project-tab.on span{background:var(--accent);color:#fff;box-shadow:none}
/* Schéma : carte à rebord, « Voir » en pastille */
html.lq #scr-console .console-schema-summary{border:2px solid var(--line);border-radius:22px;box-shadow:0 3px 0 var(--lip);transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq #scr-console .console-schema-summary:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip);background:#fff}
html.lq #scr-console .console-schema-summary b{font-family:var(--display);font-size:17px}
html.lq #scr-console .console-schema-action{padding:6px 11px;border-radius:99px;background:var(--accent-soft);color:var(--accent-ink);font:700 13px/1 var(--display)}
/* Exemples : chaque carte dit ce qu’elle fait et montre sa requête, colorée comme dans l’éditeur */
html.lq #scr-console .chips-wrap .db-lab span{font:700 15px/1.2 var(--display);color:var(--ink)}
html.lq #scr-console .chip.console-ex{display:flex;flex-direction:column;align-items:stretch;gap:8px;width:auto;max-width:236px;min-height:0;padding:9px 9px 9px;
  border:2px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 3px 0 var(--lip);text-align:left;white-space:normal;color:var(--ink);font-family:var(--display);
  transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq #scr-console .chip.console-ex:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
html.lq #scr-console .chip.console-ex small{display:flex;align-items:center;gap:7px;padding:1px 3px 0;font:700 13.5px/1.2 var(--display);color:var(--ink);white-space:nowrap}
html.lq #scr-console .chip.console-ex small i{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--sun);color:#1B1640;box-shadow:0 2px 0 var(--sun-lip)}
html.lq #scr-console .chip.console-ex small i svg{width:11px;height:11px;margin-left:1px}
html.lq #scr-console .chip.console-ex code{flex:1 1 auto;display:flex;align-items:center;min-width:150px;padding:8px 10px;border-radius:11px;
  background:#1B1640;color:#E9E5FF;font:600 12px/1.35 var(--mono)}
html.lq #scr-console .chip.console-ex code>span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow:hidden;overflow-wrap:anywhere}
html.lq #scr-console .chip.console-ex code .t-kw{color:#B9A8FF}
html.lq #scr-console .chip.console-ex code .t-fn{color:var(--mint)}
html.lq #scr-console .chip.console-ex code .t-num{color:var(--sun-hi)}
html.lq #scr-console .chip.console-ex code .t-str{color:#FFB8D8}

/* Question d’entretien : la question sur la carte violette (pastilles, titre jaune, micro en autocollant, onde menthe qui parle),
   la réponse sur une carte blanche à rebord avec la bulle collée dessus. */
html.lq .ent-focus-hero{position:relative;isolation:isolate;margin:6px 0 16px;padding:16px 16px 17px;border-radius:28px;background:var(--deep);color:#fff;
  box-shadow:0 6px 0 #3A22B0,0 26px 44px -26px rgba(40,20,140,.55)}
html.lq .ent-focus-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:radial-gradient(260px 220px at 92% 0%,rgba(255,216,107,.26),transparent 70%),radial-gradient(240px 200px at 0% 100%,rgba(159,240,198,.16),transparent 70%),
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 95% 85% at 70% 20%,#000 30%,transparent 90%);mask-image:radial-gradient(ellipse 95% 85% at 70% 20%,#000 30%,transparent 90%)}
/* L’étoile scintille sous l’ampoule, à l’écart des flèches du haut (6 novembre, 22 h 56) */
html.lq .ent-focus-hero::after{content:"";position:absolute;right:30px;top:80px;width:15px;height:15px;pointer-events:none;background:#fff;
  -webkit-mask:var(--mstk-star) center/contain no-repeat;mask:var(--mstk-star) center/contain no-repeat;animation:lqTwinkle 3.2s ease-in-out infinite}
html.lq .ent-focus-stk{position:absolute;z-index:2;right:12px;top:-16px;width:76px;height:76px;rotate:10deg;pointer-events:none;animation:lvPrizeF 4.8s ease-in-out 1s infinite}
html.lq .ent-focus .ent-focus-meta{flex-wrap:wrap;gap:6px;max-width:calc(100% - 84px);color:#fff;font:600 13px/1.25 var(--display)}
html.lq .ent-focus .ent-focus-meta b{color:var(--sun-hi);font:800 13px/1 var(--display)}
html.lq .ent-focus .ent-focus-meta>i{display:none}
html.lq .ent-focus .ent-focus-meta>span:last-child{padding:5px 10px;border-radius:12px;background:var(--mint);color:#1B1640;font-weight:700}
html.lq .ent-focus .ent-focus-hero h1{margin:14px 0 12px;color:var(--sun-hi);font:700 31px/1.06 var(--display);letter-spacing:-.025em;text-wrap:balance}
html.lq .ent-focus .ent-coach{margin:0;color:rgba(255,255,255,.9);font:600 14.5px/1.35 var(--display)}
html.lq .ent-focus .ent-wave{display:flex;align-items:center;justify-content:center;gap:3px;width:34px;height:30px;border-radius:10px;background:rgba(255,255,255,.14)}
html.lq .ent-focus .ent-wave i{display:block;width:3px;height:14px;border-radius:2px;background:var(--mint);animation:lqWave 1.1s ease-in-out infinite}
html.lq .ent-focus .ent-wave i:nth-child(1){height:7px;animation-delay:-.2s}
html.lq .ent-focus .ent-wave i:nth-child(2){animation-delay:-.45s}
html.lq .ent-focus .ent-wave i:nth-child(3){height:18px;animation-delay:-.7s}
html.lq .ent-focus .ent-wave i:nth-child(4){animation-delay:-.95s}
html.lq .ent-focus .ent-wave i:nth-child(5){height:8px;animation-delay:-.1s}
html.lq .ent-focus .ent-answer-card{border:2px solid var(--line);border-radius:26px;background:#fff;box-shadow:0 4px 0 var(--lip)}
html.lq .ent-focus .ent-answer-lock{padding:10px 4px 6px}
html.lq .ent-focus .ent-answer-lock-ico{width:72px;height:72px;margin:-4px auto 10px;border-radius:0;background:none;box-shadow:none;rotate:-7deg;animation:mstkFloat 5.2s ease-in-out infinite}
html.lq .ent-focus .ent-answer-lock-ico svg{width:72px;height:72px}
html.lq .ent-focus:not(.ent-static) .ent-answer-lock-ico{animation:lqAskSlap .7s cubic-bezier(.3,.7,.3,1) .2s both,mstkFloat 5.2s ease-in-out 1.1s infinite}
html.lq .ent-focus .ent-answer-lock b{font:700 20px/1.2 var(--display);letter-spacing:-.015em;color:var(--ink)}
html.lq .ent-focus .ent-answer-lock p{color:var(--ink-2);font-size:14.5px}
html.lq .ent-focus .ent-answer-label{display:inline-block;margin:0 0 12px;padding:5px 11px;border-radius:12px;background:var(--mint);color:#1B1640;font:700 13px/1.2 var(--display);letter-spacing:0}
html.lq .ent-focus .eans{color:var(--ink);font-size:15.5px}
html.lq .ent-focus .esql{border-radius:18px;background:#1B1640}
/* La syntaxe d’une question d’entretien (10 novembre, 1 h 26) : 30 caractères par ligne tiennent sans se replier, jusqu’à 320 px */
@media (max-width:359px){html.lq .ent-focus .ent-syntaxe pre{font-size:10.2px}}
html.lq .ent-focus .ent-syntaxe .t-kw{color:var(--t-kw);font-weight:700}html.lq .ent-focus .ent-syntaxe .t-fn{color:var(--t-fn)}html.lq .ent-focus .ent-syntaxe .t-str{color:var(--t-str)}html.lq .ent-focus .ent-syntaxe .t-num{color:var(--t-num)}html.lq .ent-focus .ent-syntaxe .t-com{color:var(--t-com);font-style:italic}
html.lq .ent-focus .ent-assessment{border:2px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 4px 0 var(--lip)}
html.lq .ent-focus .ent-assessment>p{font:700 15px/1.3 var(--display);color:var(--ink)}
html.lq .ent-focus .ent-assessment .estat{min-height:50px;border:2px solid var(--line);border-radius:16px;background:#fff;color:var(--ink-2);font:700 14px/1 var(--display);box-shadow:0 3px 0 var(--lip)}
html.lq .ent-focus .ent-assessment .estat:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
html.lq .ent-focus .ent-assessment .estat.on{border-color:#F2C24B;background:#FFF4D6;color:#7A5200;box-shadow:0 3px 0 #E8C25C}
html.lq .ent-focus .ent-assessment .estat.on.ok{border-color:#62D6A0;background:#DDFBEA;color:#0A6B45;box-shadow:0 3px 0 #62D6A0}
/* En haut de la carte, les flèches autour du numéro (Elisa, 6 novembre, 22 h 56 : « en haut juste des flèches animées vers la gauche et
   droite ») : la précédente en verre, comme la pastille ; la suivante blanche à rebord violet, la touche qu’on presse. 36 px à l’œil,
   44 px sous le doigt. Chacune fait signe vers son côté, à son tour : un pas, un plus petit, puis le repos. */
html.lq .ent-focus .ent-pager{display:flex;align-items:center;gap:6px}
html.lq .ent-focus .ent-pager-n{padding:5px 10px;border-radius:12px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22);white-space:nowrap}
html.lq .ent-focus .ent-pager>button{position:relative;display:grid;place-items:center;flex:none;width:36px;height:36px;margin:0;padding:0;border:0;border-radius:50%;
  cursor:pointer;touch-action:manipulation;transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq .ent-focus .ent-pager>button::after{content:"";position:absolute;inset:-4px}
html.lq .ent-focus .ent-pager svg{width:18px;height:18px}
html.lq .ent-focus .ent-pager-prev{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.26),0 3px 0 rgba(36,18,140,.55)}
html.lq .ent-focus .ent-pager-next{background:#fff;color:var(--accent-ink);box-shadow:0 3px 0 #2E1A9E}
html.lq .ent-focus .ent-pager>button:active{transform:translateY(3px)}
html.lq .ent-focus .ent-pager-prev:active{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.26),0 0 0 rgba(36,18,140,.55)}
html.lq .ent-focus .ent-pager-next:active{box-shadow:0 0 0 #2E1A9E}
html.lq .ent-focus .ent-pager>button:focus-visible{outline:3px solid var(--sun-hi);outline-offset:2px}
html.lq .ent-focus .ent-pager-next svg{animation:entFlD 3.2s ease-in-out 1s infinite}
html.lq .ent-focus .ent-pager-prev svg{animation:entFlG 3.2s ease-in-out 2.6s infinite}
@keyframes entFlD{0%,58%,100%{translate:0 0}68%{translate:4px 0}78%{translate:0 0}86%{translate:2px 0}}
@keyframes entFlG{0%,58%,100%{translate:0 0}68%{translate:-4px 0}78%{translate:0 0}86%{translate:-2px 0}}
/* Sous l’évaluation, « Question suivante » (22 h 56) : le grand bouton de l’app, à rebord */
html.lq .ent-focus .ent-suite{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;margin:14px 0 0;padding:0 18px;border:0;border-radius:16px;
  background:var(--accent);color:#fff;font:700 17px/1 var(--display);box-shadow:0 4px 0 var(--accent-lip);cursor:pointer;touch-action:manipulation;
  transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq .ent-focus .ent-suite:active{transform:translateY(4px);box-shadow:0 0 0 var(--accent-lip)}
html.lq .ent-focus .ent-suite svg{width:20px;height:20px;flex:none}
@media (max-width:380px){
  html.lq .ent-focus .ent-focus-hero h1{font-size:27px}
  html.lq .ent-focus-stk{width:66px;height:66px}
  /* Écrans étroits (iPhone SE et mini) : le numéro seul, « 5 sur 142 », entre les flèches, loin de l’autocollant ; le lecteur d’écran
     entend toujours « Question 5 sur 142 » */
  html.lq .ent-focus .ent-pager-q{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* Exécution pas à pas : l’étape en pastille, son mot-clé façon console, le titre dans la police de la vitrine, « Terminer » à la fin */
html.lq .viz-stepnum{display:flex;align-items:center;gap:8px;margin:2px 0 10px;font:inherit;letter-spacing:0}
html.lq .viz-stepnum span{padding:5px 10px;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink);font:700 13px/1.2 var(--display)}
html.lq .viz-stepnum b{padding:5px 10px;border-radius:12px;background:#1B1640;color:var(--sun-hi);font:700 12.5px/1.2 var(--mono);letter-spacing:.02em;box-shadow:0 2px 0 rgba(27,22,64,.3)}
html.lq .viz-body h3{margin:0 0 8px;font:700 25px/1.12 var(--display);letter-spacing:-.02em;color:var(--ink);overflow-wrap:anywhere;text-wrap:balance}
html.lq .viz-body .viz-e{font-size:15.5px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
html.lq .viz-body .viz-count{display:inline-block;margin:0 0 10px;padding:5px 10px;border-radius:12px;background:#E7FBEF;color:#0A6B45;font:700 13px/1.2 var(--display)}
html.lq .viz-nav{border-top:2px solid var(--line)!important;background:#fff!important}
html.lq .viz-nav button{border-radius:16px!important;font:700 16px/1 var(--display)!important;min-height:52px!important;transition:transform .12s var(--press),box-shadow .12s var(--press)!important}
html.lq .viz-nav .prev{border:2px solid var(--line)!important;background:#fff!important;color:var(--accent-ink)!important;box-shadow:0 3px 0 var(--lip)!important}
html.lq .viz-nav .next{background:var(--accent)!important;color:#fff!important;box-shadow:0 4px 0 var(--accent-lip)!important}
html.lq .viz-nav .next.is-end{background:var(--sun)!important;color:#1B1640!important;box-shadow:0 4px 0 var(--sun-lip)!important}
html.lq .viz-nav button:active{transform:translateY(3px)!important;box-shadow:none!important}
html.lq .viz-nav button:disabled{opacity:.45!important;box-shadow:none!important}
html.lq .viz-dots i.on{background:var(--accent)!important}

@media (prefers-reduced-motion:reduce){
  html.lq .lq-ask.on .lq-ask-stk,html.lq .lq-ask-stk>svg,html.lq .lq-ask-cap::after,html.lq .lq-ask.on .lq-ask-cap h2,html.lq .lq-ask.on .lq-ask-cap p,html.lq .lq-ask.on .lq-ask-field,html.lq .lq-ask.on .lq-ask-btns,
  html.lq .lq-stk-wave path,html.lq #scr-console .is-project .console-hero-stk,html.lq #scr-console .console-title-row.is-project>div:first-child,html.lq #scr-console .console-title-row.is-project>div:first-child::after,
  html.lq .ent-focus-stk,html.lq .ent-focus-hero::after,html.lq .ent-focus .ent-wave i,html.lq .ent-focus .ent-answer-lock-ico{animation:none!important}
}
html[data-motion="reduce"].lq .lq-ask.on .lq-ask-stk,html[data-motion="reduce"].lq .lq-ask-stk>svg,html[data-motion="reduce"].lq .lq-ask-cap::after,html[data-motion="reduce"].lq .lq-ask.on .lq-ask-cap h2,
html[data-motion="reduce"].lq .lq-ask.on .lq-ask-cap p,html[data-motion="reduce"].lq .lq-ask.on .lq-ask-field,html[data-motion="reduce"].lq .lq-ask.on .lq-ask-btns,html[data-motion="reduce"].lq .lq-stk-wave path,
html[data-motion="reduce"].lq #scr-console .is-project .console-hero-stk,html[data-motion="reduce"].lq #scr-console .console-title-row.is-project>div:first-child,html[data-motion="reduce"].lq #scr-console .console-title-row.is-project>div:first-child::after,
html[data-motion="reduce"].lq .ent-focus-stk,html[data-motion="reduce"].lq .ent-focus-hero::after,html[data-motion="reduce"].lq .ent-focus .ent-wave i,html[data-motion="reduce"].lq .ent-focus .ent-answer-lock-ico{animation:none!important}
/* « Question suivante » : le bouton violet à rebord des autres écrans (il gardait l’ancien dégradé) */

/* ---------- 37. Accueil, page du cours, chargement : finitions de la DA ----------
   Elisa, 30 octobre, 22 h 58 : « Ravi de te revoir ! plutôt que coucou », « le bouton en bas ? pas homogène avec le reste »,
   « mettre des micro-interactions », « homogénéiser également la page de chargement ». */
/* La bulle de la mascotte, plus longue, tient en deux lignes au-dessus du chat ; le titre de la séance se coupe en français
   (« relation-nelles ») plutôt qu’au milieu d’un mot sans trait d’union. */
html.lq .lq-hero .mstk-bub{white-space:normal;width:max-content;max-width:106px;padding:7px 10px 8px;text-align:center;line-height:1.08}
@media (max-width:340px){html.lq .lq-hero .mstk-bub{max-width:88px;padding:6px 8px 7px;font-size:12.5px}}
html.lq .lq-hero-title{-webkit-hyphens:auto;hyphens:auto}

/* Une vignette étroite (petit écran, fenêtre basse) : la pastille « Regarder la vidéo · 9 min 19 » ne tient plus à côté du ▶ ; elle
   s’efface (la durée est déjà sur l’affiche), le ▶ reste dans son coin. */
@container (max-width:249.98px){
  html.lq #scr-lesson .lv-hero .lv-card-meta{display:none}
  html.lq #scr-lesson .lv-hero .lv-card-bar{justify-content:flex-end}
}
/* La vignette du cours : survolée, elle se soulève (par sa position, jamais transformée : Safari), le ▶ grossit, la carte à gagner
   se balance plus vite. */
html.lq #scr-lesson .lv-hero .lv-card-play{transition:scale .28s var(--pop)}
@media (hover:hover) and (pointer:fine){
  html.lq #scr-lesson .lv-hero .lv-card:hover{top:-3px;box-shadow:0 9px 0 rgba(20,10,60,.34),0 30px 46px -22px rgba(10,4,60,.8)}
  html.lq #scr-lesson .lv-hero .lv-card:hover .lv-card-play{scale:1.1}
  html.lq #scr-lesson .lv-hero .lv-card:hover .lv-prize{animation-duration:1.6s}
}

/* Le bouton du bas d’un cours pas encore validé (Elisa, 30 octobre, 23 h 42 : « pas ouf le bouton », après « pas homogène avec le
   reste » à 22 h 58) : le bouton violet à rebord des autres écrans (« Passer à l’exercice », « Question suivante »). La cible en
   autocollant déborde de son coin gauche, la règle s’écrit en blanc (« Valide la leçon : » en jaune soleil), les moments de la
   vidéo s’alignent en pastilles en face (menthe : réussi du premier coup), et ▶ dans un rond jaune à droite : un appui ouvre la
   vidéo. Il s’enfonce à l’appui, se soulève au survol ; la cible tremble et le ▶ file quand on le touche. */
@keyframes lqGateFloat{0%,100%{translate:0 0;rotate:-10deg}50%{translate:0 -3px;rotate:-6deg}}
@keyframes lqGateHit{0%{rotate:-10deg;scale:1}22%{rotate:-22deg;scale:1.14}46%{rotate:2deg;scale:.96}70%{rotate:-14deg;scale:1.04}100%{rotate:-10deg;scale:1}}
@keyframes lqGateBreath{0%,100%{scale:1}50%{scale:1.07}}
@keyframes lqGateGo{0%{scale:1}30%{scale:.86}62%{scale:1.16}100%{scale:1}}
html.lq #lesson-body .ls-nav:has(.ls-next[data-jc-gate]){padding:6px!important;box-shadow:0 4px 0 var(--lip),0 14px 30px -18px rgba(34,28,70,.45)!important}
html.lq #lesson-body .ls-nav .ls-next[data-jc-gate]{position:relative;display:block;min-height:62px;padding:10px 54px 11px 56px!important;text-align:left;overflow:visible;
  background:linear-gradient(165deg,#7B5CFF 0%,#6146F2 55%,#5536E4 100%)!important;color:#fff!important;border-radius:18px!important;
  box-shadow:0 4px 0 var(--accent-lip),inset 0 1px 0 rgba(255,255,255,.18)!important;font:700 15px/1.27 var(--display)!important;letter-spacing:-.012em!important;
  text-wrap:balance;transition:transform .12s var(--press),box-shadow .12s var(--press),translate .2s var(--press)!important}
html.lq #lesson-body .ls-nav .ls-next[data-jc-gate]:has(br)::first-line{color:var(--sun-hi);font-size:12.5px;letter-spacing:.01em}
/* Plus de cible dessinée ni de flèche ↑ : la cible est un autocollant (.ls-gate-stk), le ▶ est le rond de droite */
html.lq #lesson-body .ls-nav .ls-next[data-jc-gate]::before{content:none!important}
html.lq #lesson-body .ls-nav .ls-next[data-jc-gate]::after{content:"";position:absolute;right:9px;top:50%;width:36px;height:36px;margin-top:-18px;border-radius:50%;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M14.2 11.6c0-1.3 1.4-2.1 2.5-1.4l9.1 5.6a1.7 1.7 0 0 1 0 2.9l-9.1 5.6c-1.1.7-2.5-.1-2.5-1.4z' fill='%231B1640'/%3E%3C/svg%3E") center/100% no-repeat,
    radial-gradient(circle at 50% 35%,#FFE08A,#FFC83D 70%);
  box-shadow:0 0 0 2.5px #fff,0 4px 0 2.5px rgba(27,22,64,.32);animation:lqGateBreath 2.8s ease-in-out 1.2s infinite;transition:translate .25s var(--pop)}
html.lq #lesson-body .ls-nav .ls-next[data-jc-gate] .ls-gate-x{position:static;display:contents;font-style:normal}
html.lq #lesson-body .ls-nav .ls-next[data-jc-gate] .ls-gate-stk{position:absolute;left:-7px;top:50%;width:52px;height:52px;margin-top:-27px;pointer-events:none;rotate:-10deg;
  animation:lqGateFloat 4.2s ease-in-out .6s infinite}
html.lq #lesson-body .ls-nav .ls-next[data-jc-gate] .ls-gate-stk svg{display:block;width:100%;height:100%}
html.lq #lesson-body .ls-nav .ls-next[data-jc-gate] .ls-pips{position:absolute;right:54px;top:13px;display:flex;gap:3.5px}
html.lq #lesson-body .ls-nav .ls-next[data-jc-gate] .ls-pips i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
html.lq #lesson-body .ls-nav .ls-next[data-jc-gate] .ls-pips i.ok{background:var(--mint);box-shadow:0 0 0 1.5px rgba(27,22,64,.25)}
html.lq #lesson-body .ls-nav .ls-next[data-jc-gate] .ls-pips i.try{background:#FFB4A8;box-shadow:0 0 0 1.5px rgba(27,22,64,.25)}
html.lq #lesson-body .ls-nav .ls-next[data-jc-gate]:active{transform:translateY(4px)!important;box-shadow:0 0 0 var(--accent-lip),inset 0 1px 0 rgba(255,255,255,.18)!important;opacity:1!important}
html.lq #lesson-body .ls-nav .ls-next[data-jc-gate]:active::after{translate:3px 0;animation:none;scale:.92}
html.lq #lesson-body .ls-nav .ls-next[data-jc-gate]:active .ls-gate-stk{animation:lqGateHit .5s cubic-bezier(.3,.7,.3,1)}
html.lq #lesson-body .ls-nav .ls-next[data-jc-gate].is-go::after{animation:lqGateGo .5s cubic-bezier(.3,.7,.3,1) both}
@media (hover:hover) and (pointer:fine){
  html.lq #lesson-body .ls-nav .ls-next[data-jc-gate]:hover{translate:0 -2px;box-shadow:0 6px 0 var(--accent-lip),inset 0 1px 0 rgba(255,255,255,.18)!important}
  html.lq #lesson-body .ls-nav .ls-next[data-jc-gate]:hover::after{animation:none;translate:3px 0}
  html.lq #lesson-body .ls-nav .ls-next[data-jc-gate]:hover .ls-gate-stk{animation:lqGateHit .6s cubic-bezier(.3,.7,.3,1)}
}

/* L’écran de chargement : le violet profond quadrillé de la vitrine (lueur jaune, reflet menthe), le logo en autocollant qui se pose
   en douceur puis flotte, trois étincelles, le nom en blanc et, dessous, un anneau où une comète jaune soleil tourne sans fin.
   Elisa, 31 octobre, 0 h 40 : « je veux que le truc tourne ou quelque chose comme ça, car ça fait mal aux yeux : ça vient et ça apparaît
   d’un coup » : la barre balayait de gauche à droite puis réapparaissait d’un bond à gauche, et le logo arrivait d’un claquement
   (une fois et demie plus grand, tourné). Tout est maintenant continu : l’anneau tourne d’un mouvement régulier, sans début ni fin
   visibles ; le logo, le nom, l’anneau et la phrase montent et s’allument l’un après l’autre ; au départ, tout s’efface doucement.
   Elisa, 31 octobre, 8 h 06 : « pour cette page, fais un truc de chargement ou mets-le en dessous » : l’écran ne restait que 0,3 s, le
   temps que le logo s’allume à moitié ; le nom, l’anneau et la phrase arrivaient trop tard pour être vus. Tout s’allume maintenant en
   moins d’une demi-seconde, et l’écran reste au moins une seconde (hideLoader). */
@keyframes ldIn{0%{opacity:0;transform:translateY(-10px) rotate(-7deg) scale(.94)}100%{opacity:1;transform:none}}
@keyframes ldFloat{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes ldUp{from{opacity:0;transform:translateY(8px)}}
@keyframes ldSpin{to{transform:rotate(1turn)}}
@keyframes ldOut{to{opacity:0;transform:scale(1.05)}}
html.lq #loader{background:var(--deep)!important;color:#fff;isolation:isolate;overflow:hidden;gap:14px}
html.lq #loader::before{z-index:-1;background:radial-gradient(320px 260px at 50% 34%,rgba(255,216,107,.24),transparent 70%),radial-gradient(300px 260px at 0% 100%,rgba(159,240,198,.14),transparent 70%),
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/30px 30px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/30px 30px;
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 40%,#000 30%,transparent 92%);mask-image:radial-gradient(ellipse 85% 75% at 50% 40%,#000 30%,transparent 92%)}
html.lq #loader .logo-badge{width:88px;height:88px;box-sizing:border-box;border-radius:26px;border:4px solid #fff;background:linear-gradient(150deg,#7B5CFF,#4B2FD6)!important;color:var(--sun-hi);
  font:700 32px/1 var(--mono);box-shadow:0 0 0 2.5px #1B1640,0 8px 0 2.5px rgba(16,8,52,.42)!important;rotate:-6deg;
  animation:ldIn .42s cubic-bezier(.2,.75,.25,1) both,ldFloat 4.6s ease-in-out .9s infinite}
html.lq #loader .ld-name{margin-top:4px;font:700 27px/1 var(--display);letter-spacing:-.02em;color:#fff;animation:ldUp .36s ease-out .06s both}
/* L’anneau : la piste blanche translucide, la comète (un dégradé conique en anneau, de transparent à jaune soleil) et sa tête ronde
   lumineuse, qui tournent ensemble en 1,2 s, à vitesse constante */
html.lq #loader .spinner{position:relative;width:46px!important;height:46px!important;margin:6px 0 2px;border-radius:50%;background:none!important;overflow:visible;
  box-shadow:inset 0 0 0 6px rgba(255,255,255,.16);animation:ldUp .36s ease-out .1s both}
html.lq #loader .spinner::after{inset:0;width:auto;border-radius:50%;box-shadow:none;
  background:conic-gradient(rgba(255,200,61,0) 0 120deg,rgba(255,200,61,.5) 250deg,var(--sun) 359deg,rgba(255,200,61,0) 0)!important;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6.5px),#000 calc(100% - 6px));mask:radial-gradient(farthest-side,transparent calc(100% - 6.5px),#000 calc(100% - 6px));
  animation:ldSpin 1.2s linear infinite}
html.lq #loader .spinner::before{content:"";position:absolute;top:0;left:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:var(--sun);
  box-shadow:0 0 10px 2px rgba(255,200,61,.5);transform-origin:3px 23px;animation:ldSpin 1.2s linear infinite}
html.lq #loader p{color:rgba(255,255,255,.86);font-size:14.5px;text-wrap:balance;animation:ldUp .36s ease-out .14s both}
html.lq #loader .ld-spark{position:absolute;width:18px;height:18px;background:#fff;pointer-events:none;
  -webkit-mask:var(--mstk-star) center/contain no-repeat;mask:var(--mstk-star) center/contain no-repeat;animation:lqTwinkle 3s ease-in-out infinite}
html.lq #loader .ld-spark.s1{left:calc(50% - 88px);top:calc(50% - 118px)}
html.lq #loader .ld-spark.s2{left:calc(50% + 62px);top:calc(50% - 82px);width:12px;height:12px;background:var(--sun-hi);animation-delay:-1s}
html.lq #loader .ld-spark.s3{left:calc(50% + 38px);top:calc(50% - 138px);width:10px;height:10px;background:var(--mint);animation-delay:-2s}
html.lq #loader.fade-out .logo-badge{animation:ldOut .4s ease-in forwards}
html.lq #loader.fatal .logo-badge{rotate:0deg;animation:none}

@media (prefers-reduced-motion:reduce){
  html.lq #lesson-body .ls-nav .ls-next[data-jc-gate]::after,html.lq #lesson-body .ls-nav .ls-next[data-jc-gate] .ls-gate-stk,
  html.lq #loader .logo-badge,html.lq #loader .ld-name,html.lq #loader .spinner,html.lq #loader .spinner::before,html.lq #loader .spinner::after,html.lq #loader p,html.lq #loader .ld-spark{animation:none!important}
}
html[data-motion="reduce"].lq #lesson-body .ls-nav .ls-next[data-jc-gate]::after,html[data-motion="reduce"].lq #lesson-body .ls-nav .ls-next[data-jc-gate] .ls-gate-stk,
html[data-motion="reduce"].lq #loader .logo-badge,html[data-motion="reduce"].lq #loader .ld-name,html[data-motion="reduce"].lq #loader .spinner,
html[data-motion="reduce"].lq #loader .spinner::before,html[data-motion="reduce"].lq #loader .spinner::after,
html[data-motion="reduce"].lq #loader p,html[data-motion="reduce"].lq #loader .ld-spark{animation:none!important}

/* ---------- 37 bis. L’ouverture de l’appli iOS ----------
   Elisa, 3 novembre, 21 h 03 : « une animation quand on appuie sur l’application » ; 21 h 56 : « c’est pas waouh et ça a l’air de
   bug ». Dans l’appli seulement (html.is-native). L’écran de lancement fixe d’iOS reste jusqu’à ce que l’appli soit prête ; derrière
   lui, la page se dessine à l’identique (resources/splash.png : un carré de 2732 px étiré sur la hauteur de l’écran, d’où --u ; la
   touche fait 512 de côté, 28 d’épaisseur, coins de 116), si bien que son départ ne se voit pas. Puis tout se déroule d’un seul
   tenant à partir d’une classe (is-play), en transform et opacité seulement, donc sans à-coups : la touche >_ s’enfonce (retour
   haptique) et rebondit comme une touche Entrée ; l’écran devient une table de données : une onde carrée part de la touche, et
   chaque case chiffrée surgit quand elle passe ; « Requête » s’écrit lettre par lettre, puis on plonge dans la touche : elle remplit
   tout l’écran pendant que la table file sur les côtés, et c’est seulement alors que le violet s’efface sur l’appli (jamais de
   touche à moitié transparente par-dessus l’accueil). 1,3 s, puis 2 s (4 novembre, 9 h 28 : « l’arrivée de l’animation au début
   fait mal aux yeux, trop rapide ») : chaque temps est plus lent, les cases surgissent plus doucement, leurs nombres défilent sans
   saccade (plus de scintillement), la plongée dure le double et l’appli apparaît en fondu. Mouvement réduit : un simple fondu.
   4 novembre, 1 h 16 : « en mode data, mettre des chiffres au lieu des confettis » ; 1 h 29, sur la gerbe de nombres qui avait
   remplacé les confettis : « réfléchis mieux, on peut faire mieux ». Des nombres lancés au hasard restaient des confettis ; une
   table qui répond à la touche raconte l’appli : on appuie, la requête part, les données arrivent. */
html.is-native.lq #loader.is-intro{position:fixed;inset:0;z-index:2147483000;display:block;padding:0;background:#F4F2FC!important;color:#1B1640;overflow:hidden;
  --u:calc(max(100vw,100vh) / 2732);--cy:calc(50% - 14*var(--u))}
html.is-native.lq #loader.is-intro::before{content:"";position:absolute;left:50%;top:var(--cy);z-index:0;width:calc(1600*var(--u));height:calc(1600*var(--u));
  margin:calc(-800*var(--u)) 0 0 calc(-800*var(--u));border-radius:50%;opacity:0;-webkit-mask-image:none;mask-image:none;
  background:radial-gradient(closest-side,rgba(128,96,255,.32),rgba(128,96,255,.1) 58%,rgba(128,96,255,0))}
html.is-native.lq #loader.is-intro .logo-badge{position:absolute;z-index:1;left:50%;top:50%;width:calc(512*var(--u));height:calc(512*var(--u));
  margin:calc(-270*var(--u)) 0 0 calc(-256*var(--u));box-sizing:border-box;border:0;border-radius:calc(116*var(--u));rotate:0deg;animation:none;
  background:linear-gradient(135deg,#8060FF,#593CE7)!important;box-shadow:none!important;font-size:0;color:transparent;will-change:transform}
/* Le chevron et le curseur, dessinés comme sur l’écran de lancement */
html.is-native.lq #loader.is-intro .logo-badge::before{content:"";position:absolute;inset:0;background:#fff;
  clip-path:polygon(29.1% 34.375%,46.68% 42.56%,46.68% 47.48%,29.1% 55.66%,29.1% 51.37%,42.75% 45.02%,29.1% 38.67%)}
html.is-native.lq #loader.is-intro .logo-badge::after{content:"";position:absolute;left:52.34%;top:59.18%;width:19.14%;height:4.49%;background:#fff}
/* L’épaisseur de la touche : un socle fixe sous elle, de la même forme ; enfoncée, la touche y descend */
html.is-native.lq #loader.is-intro::after{content:"";position:absolute;z-index:0;left:50%;top:50%;width:calc(512*var(--u));height:calc(512*var(--u));
  margin:calc(-242*var(--u)) 0 0 calc(-256*var(--u));border-radius:calc(116*var(--u));background:#4B30CC}
/* Les ondes et les confettis partent du centre de la touche, de derrière elle (créés par le script qui suit #loader) */
html.is-native.lq #loader.is-intro .in-ring{position:absolute;z-index:0;left:50%;top:var(--cy);width:calc(512*var(--u));height:calc(512*var(--u));
  margin:calc(-256*var(--u)) 0 0 calc(-256*var(--u));box-sizing:border-box;border:calc(8*var(--u)) solid #6A4DF4;border-radius:calc(116*var(--u));
  opacity:0;will-change:transform,opacity}
html.is-native.lq #loader.is-intro .in-ring.is-2{border-color:var(--sun);border-width:calc(6*var(--u))}
/* La table : des cases de 112 sur un pas de 128 (la touche en couvre 4 × 4), rangées autour d’elle et créées par le script qui suit
   #loader. Chaque case est une petite touche, rebord compris (--b, --l), son nombre en --k ; plus elle est loin, plus ses couleurs se
   fondent dans le fond. Les cases proches font défiler leur nombre : une colonne de quatre lignes dans une fenêtre d’une ligne. */
html.is-native.lq #loader.is-intro .in-grid{position:absolute;inset:0;z-index:0;transform-origin:50% var(--cy)}
html.is-native.lq #loader.is-intro .in-t{position:absolute;left:calc(50% + (var(--x) - 56)*var(--u));top:calc(var(--cy) + (var(--y) - 56)*var(--u));
  width:calc(112*var(--u));height:calc(112*var(--u));border-radius:calc(26*var(--u));background:var(--b);box-shadow:0 calc(9*var(--u)) 0 var(--l);
  display:flex;align-items:center;justify-content:center;font:800 calc(44*var(--u))/1 var(--mono);color:var(--k);font-variant-numeric:tabular-nums;opacity:0}
html.is-native.lq #loader.is-intro .in-t>b{display:block;height:1em;overflow:hidden;font:inherit}
html.is-native.lq #loader.is-intro .in-t>b>b{display:block;font:inherit;white-space:pre}
/* Un résultat choisi par la requête : la même case, aux couleurs de l’appli, posée par-dessus */
html.is-native.lq #loader.is-intro .in-t>s{position:absolute;inset:0;border-radius:inherit;background:var(--c);box-shadow:0 calc(9*var(--u)) 0 var(--cl);
  display:flex;align-items:center;justify-content:center;color:var(--ci);text-decoration:none;opacity:0}
html.is-native.lq #loader.is-intro .ld-spark{display:none}
/* « Requête », sous la touche, lettre par lettre (derrière elle : quand on y plonge, la touche le recouvre) */
html.is-native.lq #loader.is-intro .ld-name{position:absolute;z-index:0;left:0;right:0;top:calc(50% + 330*var(--u));margin:0;text-align:center;
  font:700 30px/1 var(--display);letter-spacing:-.02em;color:#1B1640;opacity:0;animation:none}
html.is-native.lq #loader.is-intro .in-l{display:inline-block;opacity:0;transform-origin:50% 90%;will-change:transform,opacity}
/* Si la base met du temps à se préparer : l’anneau et la phrase, dessous */
html.is-native.lq #loader.is-intro .spinner{position:absolute;z-index:1;left:50%;top:calc(50% + 330*var(--u) + 54px);margin:0 0 0 -17px;width:34px!important;height:34px!important;
  box-shadow:inset 0 0 0 5px rgba(106,77,244,.16);opacity:0;transition:opacity .3s ease;animation:none}
html.is-native.lq #loader.is-intro .spinner::after{background:conic-gradient(rgba(106,77,244,0) 0 120deg,rgba(106,77,244,.5) 250deg,#6A4DF4 359deg,rgba(106,77,244,0) 0)!important;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5.5px),#000 calc(100% - 5px));mask:radial-gradient(farthest-side,transparent calc(100% - 5.5px),#000 calc(100% - 5px))}
html.is-native.lq #loader.is-intro .spinner::before{background:#6A4DF4;box-shadow:0 0 8px 2px rgba(106,77,244,.4);transform-origin:3px 17px}
html.is-native.lq #loader.is-intro p{position:absolute;z-index:1;left:24px;right:24px;top:calc(50% + 330*var(--u) + 104px);margin:0;text-align:center;
  color:var(--ink-2);opacity:0;transition:opacity .3s ease;animation:none}
html.is-native.lq #loader.is-intro.is-long :is(.spinner,p){opacity:1}
/* L’animation : une seule classe, tout est réglé ici */
html.is-native.lq #loader.is-intro.is-play .logo-badge{animation:introKey .62s cubic-bezier(.3,.7,.3,1) both,introZoom .55s cubic-bezier(.42,0,.72,.42) 1.25s forwards}
html.is-native.lq #loader.is-intro.is-play .logo-badge::before,html.is-native.lq #loader.is-intro.is-play .logo-badge::after,
html.is-native.lq #loader.is-intro.is-play::after{animation:introFade .16s linear 1.25s forwards}
html.is-native.lq #loader.is-intro.is-play::before{animation:introGlow 1.2s cubic-bezier(.2,.7,.3,1) .12s forwards}
/* L’onde : le contour violet part de la touche à vitesse constante (de 256 à 1 280 unités en 0,6 s, environ 1 650 unités par
   seconde) ; chaque case surgit quand elle passe (--w, en ms, calculé par le script), les proches font défiler leur nombre, d’un
   seul glissé ; de 0,78 à 1,16 s, les résultats s’allument un à un (--p) ; puis la table file sur les côtés pendant la plongée */
html.is-native.lq #loader.is-intro.is-play .in-ring{animation:introWave .6s linear .18s forwards}
html.is-native.lq #loader.is-intro.is-play .in-ring.is-2{animation-delay:.29s}
html.is-native.lq #loader.is-intro.is-play .in-t{animation:introTile .48s cubic-bezier(.3,.7,.4,1) calc(var(--w)*1ms) both}
html.is-native.lq #loader.is-intro.is-play .in-t>b>b{animation:introRoll .6s cubic-bezier(.25,.8,.3,1) calc(var(--w)*1ms) both}
html.is-native.lq #loader.is-intro.is-play .in-t>s{animation:introPick .36s cubic-bezier(.3,1.3,.5,1) calc(var(--p)*1ms) both}
html.is-native.lq #loader.is-intro.is-play .in-grid{animation:introWarp .55s cubic-bezier(.42,0,.72,.42) 1.25s forwards}
html.is-native.lq #loader.is-intro.is-play .ld-name{opacity:1;animation:introFade .22s ease-in 1.25s forwards}
html.is-native.lq #loader.is-intro.is-play .in-l{animation:introLetter .5s cubic-bezier(.3,1.35,.5,1) calc(.28s + var(--i)*55ms) forwards}
html.is-native.lq #loader.is-intro.is-play{animation:introOut .4s ease-out 1.62s forwards}
html.is-native.lq #loader.is-intro.fade-out{animation:introOut .3s linear forwards}
@keyframes introKey{
  0%{transform:none}
  18%{transform:translateY(calc(22*var(--u)))}
  46%{transform:translateY(calc(-18*var(--u))) scale(1.06)}
  70%{transform:translateY(calc(5*var(--u))) scale(.985)}
  86%{transform:translateY(calc(-3*var(--u)))}
  100%{transform:none}}
@keyframes introZoom{from{transform:none}to{transform:scale(9)}}
@keyframes introFade{to{opacity:0}}
@keyframes introGlow{0%{opacity:0;transform:scale(.45)}35%{opacity:1}100%{opacity:0;transform:scale(1.2)}}
@keyframes introWave{0%{opacity:.9;transform:none}60%{opacity:.25}100%{opacity:0;transform:scale(5)}}
@keyframes introTile{0%{opacity:0;transform:scale(.55)}60%{opacity:1;transform:scale(1.05)}100%{opacity:1;transform:none}}
@keyframes introRoll{from{transform:none}to{transform:translateY(calc(1em - 100%))}}
@keyframes introPick{0%{opacity:0;transform:scale(.6)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes introWarp{to{opacity:0;transform:scale(2.4)}}
@keyframes introLetter{from{opacity:0;transform:translateY(calc(70*var(--u))) scale(.3) rotate(-10deg)}to{opacity:1;transform:none}}
@keyframes introOut{to{opacity:0}}
/* Si le moteur SQL ne se charge pas : le message d’erreur, lisible, au centre */
html.is-native.lq #loader.is-intro.fatal{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:32px;animation:none}
html.is-native.lq #loader.is-intro.fatal .logo-badge{position:static;width:88px;height:88px;margin:0;border-radius:26px;background:var(--danger)!important;
  display:flex;align-items:center;justify-content:center;font:700 32px/1 var(--mono);color:#fff;animation:none}
html.is-native.lq #loader.is-intro.fatal .logo-badge::before,html.is-native.lq #loader.is-intro.fatal .logo-badge::after,html.is-native.lq #loader.is-intro.fatal::after,
html.is-native.lq #loader.is-intro.fatal :is(.in-ring,.in-grid){display:none}
html.is-native.lq #loader.is-intro.fatal p{position:static;opacity:1;color:#1B1640}

/* ---------- 38. L’appui : chaque bouton répond ----------
   Elisa, 30 octobre, 23 h 23 : « micro-interaction quand on appuie sur les boutons stp ». Partout, le bouton s’enfonce sous le doigt
   (plus haut) puis rebondit au relâché (assets/curseur.js, sur la vitrine aussi). Ici, ce qui se passe dans les boutons eux-mêmes. */
/* Entretien : l’icône se tasse sous le doigt ; au choix, la coche saute en se dessinant et lâche des confettis, le signet tombe dans
   son bouton, un anneau menthe ou soleil s’échappe du bouton choisi. */
html.lq .ent-focus .ent-assessment .estat{position:relative;overflow:visible;-webkit-tap-highlight-color:transparent}
html.lq .ent-focus .ent-assessment .estat svg{transition:scale .16s var(--press)}
html.lq .ent-focus .ent-assessment .estat:active svg{scale:.78}
html.lq .ent-focus .ent-assessment .estat.ok.is-just svg{animation:lqCheckPop .58s cubic-bezier(.3,1.5,.5,1) both}
html.lq .ent-focus .ent-assessment .estat.ok.is-just svg path{stroke-dasharray:23;animation:lqCheckDraw .4s cubic-bezier(.4,0,.2,1) .08s both}
html.lq .ent-focus .ent-assessment .estat.review.is-just svg{transform-origin:50% 0;animation:lqMarkDrop .62s cubic-bezier(.3,1.3,.5,1) both}
html.lq .ent-focus .ent-assessment .estat.is-just::after{content:"";position:absolute;inset:-2px;border-radius:16px;pointer-events:none;animation:lqRingOut .64s cubic-bezier(.2,.7,.3,1) both}
html.lq .ent-focus .ent-assessment .estat.ok.is-just::after{--lq-ring:98,214,160}
html.lq .ent-focus .ent-assessment .estat.review.is-just::after{--lq-ring:242,194,75}
@keyframes lqRingOut{0%{box-shadow:0 0 0 0 rgba(var(--lq-ring,106,77,244),.6)}100%{box-shadow:0 0 0 13px rgba(var(--lq-ring,106,77,244),0)}}
@keyframes lqCheckPop{0%{scale:.35;rotate:-24deg}55%{scale:1.32;rotate:7deg}100%{scale:1;rotate:0deg}}
@keyframes lqCheckDraw{from{stroke-dashoffset:23}to{stroke-dashoffset:0}}
@keyframes lqMarkDrop{0%{translate:0 -11px;scale:1 .55;opacity:0}45%{translate:0 1px;scale:1 1.14;opacity:1}72%{translate:0 -1px;scale:1 .95}100%{translate:0 0;scale:1 1}}
/* Les confettis s’envolent vers le haut, la gauche et le bas : jamais sur le texte du bouton, à droite de l’icône */
html.lq .lq-burst{position:absolute;z-index:3;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;pointer-events:none;
  box-shadow:12.7px -12.7px 0 1px #3FC98A,3.1px -17.7px 0 -1px #FFC83D,-7.6px -16.3px 0 0 #6A4DF4,-15.6px -9px 0 1px #FFC83D,-17.9px 1.6px 0 -1px #3FC98A,
    -13.8px 11.6px 0 0 #6A4DF4,-4.7px 17.4px 0 1px #FFC83D,6.2px 16.9px 0 -1px #3FC98A;
  animation:lqBurst .66s cubic-bezier(.15,.8,.3,1) both}
@keyframes lqBurst{0%{scale:.2;opacity:1}65%{opacity:1}100%{scale:1.3;opacity:0}}
/* « Question suivante » : la flèche file vers la droite sous le doigt ; « Révéler la réponse » : l’œil cligne */
html.lq .ent-focus .ent-suite svg{transition:transform .24s cubic-bezier(.3,1.5,.5,1)}
html.lq .ent-focus .ent-suite:active svg{transform:translateX(6px)}
html.lq .ent-reveal-primary:active svg{animation:lqBlink .34s ease-in-out}
@keyframes lqBlink{0%,100%{scale:1 1}40%,55%{scale:1 .1}}
/* La réponse se déplie : l’étiquette saute, le texte et l’exemple montent, puis l’évaluation et « Question suivante » (les flèches de la carte ne bougent pas) */
html.lq .ent-focus.is-reveal .ent-answer-card>.ent-answer-label{animation:lqLabelPop .5s cubic-bezier(.3,1.6,.5,1) both}
html.lq .ent-focus.is-reveal .ent-answer-card>:not(.ent-answer-label){animation:lqRevealIn .42s cubic-bezier(.2,.9,.3,1.1) .07s both}
html.lq .ent-focus.is-reveal .ent-answer-card>.esql{animation-delay:.14s}
html.lq .ent-focus.is-reveal .ent-assessment{animation:lqRevealIn .46s cubic-bezier(.2,.9,.3,1.1) .2s both}
html.lq .ent-focus.is-reveal .ent-suite{animation:lqRevealIn .46s cubic-bezier(.2,.9,.3,1.1) .28s both}
@keyframes lqRevealIn{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes lqLabelPop{0%{opacity:0;scale:.5;rotate:-6deg}60%{opacity:1;scale:1.08;rotate:2deg}100%{opacity:1;scale:1;rotate:0deg}}

@media (prefers-reduced-motion:reduce){
  html.lq .ent-focus .ent-assessment .estat svg,html.lq .ent-focus .ent-assessment .estat svg path,html.lq .ent-focus .ent-assessment .estat::after,html.lq .lq-burst,
  html.lq .ent-reveal-primary:active svg,html.lq .ent-focus.is-reveal .ent-answer-card>*,html.lq .ent-focus.is-reveal .ent-assessment,html.lq .ent-focus.is-reveal .ent-suite,html.lq .ent-focus .ent-pager svg{animation:none!important}
  html.lq .ent-focus .ent-assessment .estat:active svg{scale:none}
  html.lq .ent-focus .ent-suite:active svg{transform:none}
}
html[data-motion="reduce"].lq .ent-focus .ent-assessment .estat svg,html[data-motion="reduce"].lq .ent-focus .ent-assessment .estat svg path,
html[data-motion="reduce"].lq .ent-focus .ent-assessment .estat::after,html[data-motion="reduce"].lq .lq-burst,html[data-motion="reduce"].lq .ent-reveal-primary:active svg,
html[data-motion="reduce"].lq .ent-focus.is-reveal .ent-answer-card>*,html[data-motion="reduce"].lq .ent-focus.is-reveal .ent-assessment,
html[data-motion="reduce"].lq .ent-focus.is-reveal .ent-suite,html[data-motion="reduce"].lq .ent-focus .ent-pager svg{animation:none!important}
html[data-motion="reduce"].lq .ent-focus .ent-assessment .estat:active svg{scale:none}
html[data-motion="reduce"].lq .ent-focus .ent-suite:active svg{transform:none}

/* ---------- 39. Feuilles, page d’un projet, épingles, enregistrement ----------
   Elisa, 31 octobre, 0 h 19 (huit captures) : « regarde la page note pour l’améliorer au niveau de la DA du site », « pareil »
   (Ajuster mon rythme), « la taille change en fonction de l’onglet : je veux que ce soit toujours la même taille d’écran »,
   « micro-interaction quand on enregistre quelque chose, ici ou ailleurs », « améliorer le bouton d’épingle (ici ou ailleurs) »,
   « ce n’est pas responsive, et on ne comprend pas c’est la description de quoi au niveau de la table », « pas assez d’espace entre
   les éléments (juste un petit peu) ». */

/* Toujours la même largeur : la place de la barre de défilement est gardée, qu’il y ait de quoi défiler ou non (barres permanentes,
   souris branchée ; sans effet là où elles s’effacent d’elles-mêmes) */
html.lq .screen,html.lq .viz-body{scrollbar-gutter:stable}

/* Feuilles du bas (Notes, Ajuster mon rythme) : l’en-tête violet quadrillé des feuilles « Description », l’autocollant à gauche */
html.lq .viz.has-cap{overflow:hidden}
html.lq .viz-head.viz-cap{isolation:isolate;overflow:hidden;align-items:center;gap:13px;padding:26px 16px 18px!important;background:var(--deep)!important;border-bottom:0!important;color:#fff}
html.lq .viz-head.viz-cap::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(240px 190px at 90% 0%,rgba(255,216,107,.3),transparent 70%),radial-gradient(220px 170px at 0% 100%,rgba(159,240,198,.16),transparent 70%),
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/26px 26px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 100% 95% at 60% 10%,#000 35%,transparent 95%);mask-image:radial-gradient(ellipse 100% 95% at 60% 10%,#000 35%,transparent 95%)}
html.lq .viz-head.viz-cap::after{content:"";position:absolute;right:64px;top:22px;width:14px;height:14px;pointer-events:none;background:#fff;
  -webkit-mask:var(--mstk-star) center/contain no-repeat;mask:var(--mstk-star) center/contain no-repeat;animation:lqTwinkle 3.2s ease-in-out infinite}
html.lq .viz-head.viz-cap .grab{background:rgba(255,255,255,.42)!important}
html.lq .viz-cap-stk{flex:none;width:58px;height:58px;margin:-6px -2px -6px -4px;rotate:-7deg}
html.lq .viz-cap-stk svg{display:block;float:none;width:100%;height:100%;margin:0;rotate:0deg;overflow:visible;animation:mstkFloat 5.2s ease-in-out 1.1s infinite}
html.lq .viz-cap-stk.is-in{animation:lqAskSlap .7s cubic-bezier(.3,.7,.3,1) .12s both}
html.lq .viz-cap-t{flex:1;min-width:0}
html.lq .viz-head.viz-cap .viz-cap-t b{display:block;color:var(--sun-hi)!important;font:700 21px/1.12 var(--display)!important;letter-spacing:-.015em!important;outline:none}
html.lq .viz-cap-sub{display:block;margin-top:4px;color:rgba(255,255,255,.88);font:600 13.5px/1.35 var(--display);text-wrap:pretty}
html.lq .viz-cap-sub:empty{display:none}
html.lq .viz-head.viz-cap button{flex:none;align-self:flex-start;margin-top:-4px;background:#fff!important;border:0!important;box-shadow:0 3px 0 rgba(27,22,64,.38)!important;color:#1B1640!important}
html.lq .viz-head.viz-cap button:active{transform:translateY(3px)!important;box-shadow:0 0 0 rgba(27,22,64,.38)!important}
html.lq #plan-adjust-sheet.has-cap .pl-adjust-lead{display:none}
html.lq #plan-adjust-sheet.has-cap .viz-body{padding-top:18px}

/* Notes vides : l’autocollant qui flotte, les trois amorces */
html.lq .notes-empty .ne-i.is-stk{width:82px;height:82px;margin:0 auto 10px;background:none!important;box-shadow:none!important;border-radius:0;rotate:-6deg}
html.lq .notes-empty .ne-i.is-stk svg{display:block;width:100%;height:100%;animation:mstkFloat 5.2s ease-in-out .4s infinite}
html.lq .notes-empty{position:relative;border:2px solid var(--line)!important;border-radius:24px!important;background:#fff!important;box-shadow:0 4px 0 var(--lip)!important}
html.lq .notes-empty::after{content:"";position:absolute;right:22px;top:20px;width:14px;height:14px;pointer-events:none;background:var(--sun);
  -webkit-mask:var(--mstk-star) center/contain no-repeat;mask:var(--mstk-star) center/contain no-repeat;animation:lqTwinkle 3.4s ease-in-out infinite}
html.lq #note-sheet .notes-starters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
html.lq #note-sheet .notes-starters button{min-height:42px;padding:8px 13px;font:700 14px/1.2 var(--display)}

/* « Ton nouveau parcours » : une fiche blanche à rebord, la cible en autocollant */
html.lq #plan-adjust-sheet .pl-adjust-impact{align-items:center;padding:14px 14px 15px!important;border:2px solid var(--line)!important;background:#fff!important;box-shadow:0 4px 0 var(--lip)}
html.lq #plan-adjust-sheet .pl-impact-icon.is-stk{flex:none;width:50px;height:50px;background:none!important;box-shadow:none!important;border:0!important;rotate:-8deg}
html.lq #plan-adjust-sheet .pl-impact-icon.is-stk svg{display:block;width:100%;height:100%}
html.lq #plan-adjust-sheet .pl-adjust-impact b{color:var(--accent-ink)}
html.lq #plan-adjust-sheet .pl-adjust-impact strong{color:var(--ink)}

/* Enregistré : le bouton passe au menthe, la coche saute en se dessinant (confettis : .lq-burst) */
@keyframes lqSavedPop{0%{scale:.95}45%{scale:1.04}100%{scale:1}}
html.lq .lq-saved{position:relative;overflow:visible!important;pointer-events:none;background:var(--mint)!important;color:#0A6B45!important;border-color:transparent!important;
  box-shadow:0 4px 0 #62D6A0!important;animation:lqSavedPop .5s cubic-bezier(.3,1.5,.5,1) both}
html.lq .lq-saved .lq-saved-ico{display:inline-grid;place-items:center;width:25px;height:25px;margin-right:9px;border-radius:50%;background:#fff;color:#0A6B45;vertical-align:-6px;
  box-shadow:0 2px 0 rgba(10,107,69,.25);animation:lqCheckPop .52s cubic-bezier(.3,1.5,.5,1) both}
html.lq .lq-saved .lq-saved-ico svg{display:block;width:15px;height:15px}
html.lq .lq-saved .lq-saved-ico svg path{stroke-dasharray:23;animation:lqCheckDraw .38s cubic-bezier(.4,0,.2,1) .1s both}
html.lq .ne-row .prim.lq-saved svg{width:15px;height:15px;stroke-dasharray:none;stroke-dashoffset:0}
/* … et ce qu’on vient d’enregistrer s’allume là où il s’affiche */
@keyframes lqFresh{0%{outline:3px solid rgba(255,200,61,.95);outline-offset:0}100%{outline:3px solid rgba(255,200,61,0);outline-offset:10px}}
html.lq .lq-fresh{animation:lqFresh 1.2s cubic-bezier(.2,.7,.3,1)}
/* La notification de réussite : la coche saute et se dessine */
html.lq .toast.on .tmini.ok svg{animation:lqCheckPop .5s cubic-bezier(.3,1.5,.5,1) .05s both}
html.lq .toast.on .tmini.ok svg path{stroke-dasharray:23;animation:lqCheckDraw .36s ease-out .14s both}

/* Épingler : la punaise en autocollant partout (console, historique, notes) ; elle se plante en sautant, se décroche d’un bond */
@keyframes lqPinPlant{0%{translate:0 -12px;rotate:-34deg;scale:1.25}55%{translate:0 2px;rotate:6deg;scale:.92}78%{rotate:-3deg;scale:1.04}100%{translate:0 0;rotate:0deg;scale:1}}
@keyframes lqPinPull{0%{translate:0 0;rotate:0deg}40%{translate:0 -7px;rotate:-24deg}100%{translate:0 0;rotate:-14deg}}
html.lq #scr-console .console-pin-current{position:relative;overflow:visible;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;margin:0 0 14px;padding:8px 16px;
  border:2px solid var(--line)!important;border-radius:16px!important;background:#fff!important;box-shadow:0 4px 0 var(--lip)!important;color:var(--accent-ink)!important;
  font:700 16px/1.2 var(--display)!important;transition:transform .12s var(--press),box-shadow .12s var(--press),background-color .2s}
html.lq #scr-console .console-pin-current b{font:inherit}
html.lq #scr-console .console-pin-current .console-pin-glyph{display:block;flex:none;width:32px;height:32px;margin:-4px 0;padding:0;border:0;border-radius:0;background:none!important;box-shadow:none!important;rotate:-14deg;transition:rotate .3s var(--pop)}
html.lq #scr-console .console-pin-current .console-pin-glyph svg{display:block;width:100%;height:100%}
html.lq #scr-console .console-pin-current:active:not(:disabled){transform:translateY(4px);box-shadow:0 0 0 var(--lip)!important}
html.lq #scr-console .console-pin-current.on{background:#FFF4D6!important;border-color:#F2C24B!important;box-shadow:0 4px 0 #E8C25C!important;color:#7A5200!important}
html.lq #scr-console .console-pin-current.on .console-pin-glyph{rotate:0deg}
html.lq #scr-console .console-pin-current:disabled{opacity:.5;box-shadow:0 2px 0 var(--lip)!important}
html.lq #scr-console .console-pin-current:disabled .console-pin-glyph{filter:grayscale(1);opacity:.7}
@media (hover:hover) and (pointer:fine){html.lq #scr-console .console-pin-current:hover:not(:disabled) .console-pin-glyph{rotate:-4deg}}
html.lq #scr-console .console-query-pin{position:relative;overflow:visible;width:44px;height:44px;border:2px solid var(--line)!important;border-radius:14px!important;background:#fff!important;box-shadow:0 3px 0 var(--lip)!important;color:inherit}
html.lq #scr-console .console-query-pin svg{width:28px;height:28px;rotate:-14deg;filter:grayscale(.85);opacity:.6;transition:rotate .3s var(--pop),filter .2s,opacity .2s}
html.lq #scr-console .console-query-pin.on{background:#FFF4D6!important;border-color:#F2C24B!important;box-shadow:0 3px 0 #E8C25C!important}
html.lq #scr-console .console-query-pin.on svg{rotate:0deg;filter:none;opacity:1}
html.lq #scr-console .console-query-pin:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)!important}
html.lq .ncard .npin-btn{position:relative;overflow:visible;border:0!important;background:none!important}
html.lq .ncard .npin-btn svg{width:26px;height:26px;rotate:-14deg;filter:grayscale(.85);opacity:.55;transition:rotate .3s var(--pop),filter .2s,opacity .2s}
html.lq .ncard.pin .npin-btn svg{rotate:0deg;filter:none;opacity:1}
html.lq .ne-row .sec.ne-pin{position:relative;overflow:visible;display:inline-flex;align-items:center;justify-content:center;gap:8px}
html.lq .ne-row .sec.ne-pin svg{width:28px;height:28px;margin:-4px 0;rotate:-14deg;transform:none!important;transition:rotate .3s var(--pop)}
html.lq .ne-row .sec.ne-pin.pin-on{background:#FFF4D6!important;border-color:#F2C24B!important;box-shadow:0 4px 0 #E8C25C!important;color:#7A5200!important}
html.lq .ne-row .sec.ne-pin.pin-on svg{rotate:0deg}
html.lq .is-pin .lq-stk{animation:lqPinPlant .56s cubic-bezier(.3,1.4,.5,1) both}
html.lq .is-unpin .lq-stk{animation:lqPinPull .42s cubic-bezier(.3,.7,.3,1) both}
/* Aucune requête épinglée : la punaise qui flotte */
html.lq #scr-console .console-query-empty .console-query-stk{display:block;width:58px;height:58px;margin:0 auto 8px;rotate:-10deg}
html.lq #scr-console .console-query-empty .console-query-stk svg{display:block;width:100%;height:100%;animation:mstkFloat 5.2s ease-in-out .4s infinite}

/* Page d’un projet : un peu plus d’air entre la carte, les onglets, le schéma et les tables */
html.lq #scr-console .console-title-row.is-project{margin-bottom:16px}
html.lq #scr-console .console-project-tabs{margin-bottom:16px!important}
html.lq #scr-console .console-schema-summary{margin-bottom:14px!important}
html.lq #scr-console .console-schema-panel{margin-bottom:22px!important;gap:14px!important}
html.lq #scr-console .console-schema-panel .db-tables{gap:10px!important}

/* Lignes de tables : le nom en entier (il passe à la ligne s’il le faut), le nombre de lignes dessous, les actions groupées à droite —
   sous le nom quand la carte est étroite. La description se lit comme une fiche : « Description de la table », puis le texte. */
html.lq #scr-console .console-schema-panel .db-tblock{container-type:inline-size;border-radius:16px;background:#fff;box-shadow:0 0 0 2px var(--line),0 3px 0 2px var(--lip)}
html.lq #scr-console .console-schema-panel .db-trow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 8px 8px 6px!important;border:0!important;background:none!important;box-shadow:none!important}
html.lq #scr-console .console-schema-panel .db-trow.open{background:none!important}
html.lq #scr-console .console-schema-panel .db-tmain{flex:1 1 150px;min-width:0;display:flex;align-items:center;gap:8px;padding:4px!important}
html.lq #scr-console .console-schema-panel .db-trow .tk{display:none}
html.lq #scr-console .console-schema-panel .db-tname{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;text-align:left}
html.lq #scr-console .console-schema-panel .db-trow .tn{display:block;margin:0;font:700 14.5px/1.25 var(--mono);color:var(--ink);white-space:normal;overflow-wrap:anywhere;text-overflow:clip;overflow:visible}
html.lq #scr-console .console-schema-panel .db-trow .tc{margin:0!important;padding:0!important;font:600 12.5px/1.2 var(--display);color:var(--ink-3)}
html.lq #scr-console .console-schema-panel .db-thint{display:none}
html.lq #scr-console .console-schema-panel .db-tacts{display:flex;align-items:center;gap:6px;margin-left:auto;flex:none}
@container (max-width:330px){
  html.lq #scr-console .console-schema-panel .db-tacts{width:100%;justify-content:flex-end;padding:0 0 2px 34px;box-sizing:border-box}
}
html.lq #scr-console .console-schema-panel .db-tnote{display:flex;align-items:flex-start;gap:10px;width:auto;margin:0 10px 10px!important;padding:10px 12px!important;border-radius:14px;
  background:#F6F3FF!important;box-shadow:inset 0 0 0 1.5px #E4DCFF;color:var(--ink-2)!important;font:500 14px/1.4 var(--ui);text-align:left}
html.lq #scr-console .console-schema-panel .db-tnote span{flex:1;min-width:0;overflow-wrap:anywhere}
html.lq #scr-console .console-schema-panel .db-tnote small{display:block;margin-bottom:2px;color:var(--accent-ink);font:700 11.5px/1.2 var(--display);letter-spacing:.04em;text-transform:uppercase}
html.lq #scr-console .console-schema-panel .db-tnote .db-tnote-k{flex:none;width:30px;height:30px;margin:-2px 0 0 -2px;opacity:1!important;rotate:-6deg}
html.lq #scr-console .console-schema-panel .db-tnote .db-tnote-k svg{width:30px;height:30px}
html.lq #scr-console .console-schema-panel .db-tnote>i:last-child{opacity:.7!important;width:16px;height:16px;margin-top:2px}
html.lq #scr-console .console-schema-panel .db-tnote>i:last-child svg{width:16px;height:16px}
html.lq #scr-console .console-schema-panel .db-tnote:active{transform:scale(.985)}
html.lq #scr-console .console-schema-panel .db-tnote.is-empty{align-items:center;justify-content:center;background:transparent!important;box-shadow:inset 0 0 0 1.5px #D9CFFF;border:0;color:var(--accent-ink)!important;font:700 14px/1.2 var(--display)}
html.lq #scr-console .console-schema-panel .db-tnote.is-empty span{flex:0 1 auto}
html.lq #scr-console .console-schema-panel .db-cols{margin:0 10px 10px}

@media (prefers-reduced-motion:reduce){
  html.lq .viz-cap-stk,html.lq .viz-cap-stk svg,html.lq .viz-head.viz-cap::after,html.lq .notes-empty .ne-i.is-stk svg,html.lq .notes-empty::after,html.lq .lq-saved,html.lq .lq-saved .lq-saved-ico,
  html.lq .lq-saved .lq-saved-ico svg path,html.lq .lq-fresh,html.lq .toast.on .tmini.ok svg,html.lq .toast.on .tmini.ok svg path,html.lq .is-pin .lq-stk,html.lq .is-unpin .lq-stk,
  html.lq #scr-console .console-query-empty .console-query-stk svg{animation:none!important}
}
html[data-motion="reduce"].lq .viz-cap-stk,html[data-motion="reduce"].lq .viz-cap-stk svg,html[data-motion="reduce"].lq .viz-head.viz-cap::after,html[data-motion="reduce"].lq .notes-empty .ne-i.is-stk svg,
html[data-motion="reduce"].lq .notes-empty::after,html[data-motion="reduce"].lq .lq-saved,html[data-motion="reduce"].lq .lq-saved .lq-saved-ico,html[data-motion="reduce"].lq .lq-saved .lq-saved-ico svg path,
html[data-motion="reduce"].lq .lq-fresh,html[data-motion="reduce"].lq .toast.on .tmini.ok svg,html[data-motion="reduce"].lq .toast.on .tmini.ok svg path,html[data-motion="reduce"].lq .is-pin .lq-stk,
html[data-motion="reduce"].lq .is-unpin .lq-stk,html[data-motion="reduce"].lq #scr-console .console-query-empty .console-query-stk svg{animation:none!important}
html.lq #plan-adjust-sheet .pl-impact-delta:not(.is-good):not(.is-warn){background:var(--accent-soft)}

/* ---------- 40. L’écran de fin du cours en vidéo : « Encore un effort ! », « Leçon terminée ! » ----------
   Elisa, 31 octobre, 1 h 02 : « améliore la page avec la DA du site (encore un effort / leçon validée, avec animation et
   micro-interaction) ». La carte prend un en-tête violet quadrillé de la vitrine (lueur jaune, reflet menthe, trois étincelles) : la
   mascotte en autocollant au milieu, le titre en blanc (en jaune quand la leçon est validée), puis une pastille par moment « À toi »,
   qui arrivent une à une — la coche menthe se dessine, la croix corail tremble. Leçon validée : des rayons tournent lentement derrière
   la mascotte (qui saute, sa bulle « Bravo ! » arrive), le tampon « ✓ Validée » se pose en biais, le bouton passe au jaune soleil avec
   sa flèche. Pas encore : le bouton violet « Rejouer » prend un ▶, distinct du ↻ de « Tout recommencer ». */
html.lq .lv-end{background:rgba(22,12,70,.6);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);overflow-y:auto}
html.lq .lv-end-card{position:relative;overflow:hidden;padding:0 18px 18px;border:3px solid #fff;border-radius:30px;
  box-shadow:0 8px 0 rgba(27,22,64,.32),0 30px 60px -28px rgba(10,4,60,.75)}
html.lq .lv-end-top{position:relative;isolation:isolate;flex-direction:column;gap:12px;margin:0 -18px 18px;padding:26px 18px 20px;text-align:center;background:var(--deep);color:#fff}
html.lq .lv-end-top::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(210px 160px at 90% 0%,rgba(255,216,107,.32),transparent 70%),radial-gradient(190px 150px at 0% 100%,rgba(159,240,198,.2),transparent 70%),
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/22px 22px}
html.lq .lv.is-win .lv-end-top{padding-top:60px}
html.lq .lv-end-top .mascot-stk{width:92px;margin:0;--mr:-5deg}
html.lq .lv-end h2{color:#fff;font-size:29px;line-height:1.06;text-wrap:balance}
html.lq .lv.is-win .lv-end h2{color:var(--sun-hi)}
/* Les étincelles */
html.lq .lv-end-sp{position:absolute;z-index:-1;width:16px;height:16px;background:#fff;pointer-events:none;
  -webkit-mask:var(--mstk-star) center/contain no-repeat;mask:var(--mstk-star) center/contain no-repeat;animation:lqTwinkle 3s ease-in-out infinite}
html.lq .lv-end-sp.s1{left:22px;top:30px}
html.lq .lv-end-sp.s2{right:26px;top:72px;width:11px;height:11px;background:var(--sun-hi);animation-delay:-1s}
html.lq .lv-end-sp.s3{left:44px;bottom:26px;width:10px;height:10px;background:var(--mint);animation-delay:-2s}
/* Leçon validée : les rayons derrière la mascotte, le tampon */
html.lq .lv-end-cat::before{content:"";position:absolute;left:50%;top:50%;z-index:-1;width:230px;height:230px;margin:-115px 0 0 -115px;border-radius:50%;pointer-events:none;opacity:0;
  background:repeating-conic-gradient(rgba(255,216,107,.26) 0 9deg,rgba(255,216,107,0) 9deg 22.5deg);
  -webkit-mask:radial-gradient(closest-side,#000 30%,transparent 100%);mask:radial-gradient(closest-side,#000 30%,transparent 100%)}
html.lq .lv.is-win.end-in .lv-end-cat::before{animation:lvRaysIn .8s ease-out .35s forwards,lvRays 16s linear infinite}
@keyframes lvRaysIn{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@keyframes lvRays{to{rotate:1turn}}
html.lq .lv-end-stamp{display:none;position:absolute;right:14px;top:14px;z-index:2;padding:7px 11px 6px;border:2.5px solid #fff;border-radius:12px;background:var(--mint);color:#0D5B3B;
  font:800 14px/1 var(--display);letter-spacing:.01em;white-space:nowrap;box-shadow:0 4px 0 rgba(10,4,60,.32);rotate:8deg}
html.lq .lv.is-win .lv-end-stamp{display:block}
html.lq .lv.is-win.end-in .lv-end-stamp{animation:lvStampIn .5s cubic-bezier(.3,.7,.3,1.35) 1.15s both}
@keyframes lvStampIn{0%{opacity:0;transform:scale(1.7) rotate(-16deg)}60%{opacity:1;transform:scale(.94) rotate(2deg)}100%{opacity:1;transform:none}}
/* Le titre arrive juste après la carte */
html.lq .lv.end-in .lv-end h2{animation:lvTitleIn .5s cubic-bezier(.2,.8,.3,1.2) .18s both}
@keyframes lvTitleIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
/* Les pastilles des moments */
html.lq .lv-end-pips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:2px}
html.lq .lv-end-pips[hidden]{display:none}
html.lq .lv-pip{width:30px;height:30px;box-sizing:border-box;border-radius:50%;display:grid;place-items:center;font-style:normal;
  border:2.5px dashed rgba(255,255,255,.45);background:rgba(255,255,255,.1);color:#fff}
html.lq .lv-pip svg{width:17px;height:17px}
html.lq .lv-pip.is-ok{border:2.5px solid #fff;background:var(--mint);color:#0D5B3B;box-shadow:0 3px 0 rgba(10,4,60,.3)}
html.lq .lv-pip.is-ko{border:2.5px solid #fff;background:#FF8E8E;color:#7A1020;box-shadow:0 3px 0 rgba(10,4,60,.3)}
html.lq .lv.end-in .lv-pip{animation:lvPipIn .42s cubic-bezier(.3,.7,.3,1.5) calc(.5s + var(--i) * .12s) both}
html.lq .lv.end-in .lv-pip.is-ko{animation:lvPipIn .42s cubic-bezier(.3,.7,.3,1.5) calc(.5s + var(--i) * .12s) both,lvPipNo .45s ease-in-out calc(.85s + var(--i) * .12s)}
html.lq .lv.end-in .lv-pip svg path{stroke-dasharray:1;stroke-dashoffset:1;animation:lvPipDraw .32s ease-out calc(.72s + var(--i) * .12s) forwards}
@keyframes lvPipIn{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
@keyframes lvPipNo{0%,100%{transform:none}25%{transform:translateX(-3px) rotate(-8deg)}75%{transform:translateX(3px) rotate(8deg)}}
@keyframes lvPipDraw{to{stroke-dashoffset:0}}
/* Le score : une carte bordée, comme les encadrés de l’app */
html.lq .lv-end-score{margin:0 0 16px;padding:12px 14px;border-radius:18px;box-shadow:inset 0 0 0 2px #E4DCFF;background:#F6F3FF}
html.lq .lv.is-retry .lv-end-score{background:#FFF6EA;box-shadow:inset 0 0 0 2px #FFE0BD}
html.lq .lv.is-win .lv-end-score{background:#EEFBF4;box-shadow:inset 0 0 0 2px #BFEBD3}
html.lq .lv.is-win .lv-end-score b{color:#0F7A4C}
html.lq .lv-end-score,html.lq .lv-end-need{text-wrap:balance}
html.lq .lv.end-in .lv-end-score{animation:lvTitleIn .45s ease-out .3s both}
/* Les boutons : leçon validée, jaune soleil et sa flèche ; pas encore, violet et la flèche qui tourne */
html.lq .lv-end .lv-go{gap:10px}
html.lq .lv-end .lv-go::after{content:"";flex:none;width:20px;height:20px;background:currentColor;transition:transform .25s cubic-bezier(.3,.7,.3,1.4);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
html.lq .lv.is-retry .lv-end .lv-go::after{width:18px;height:18px;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.6v12.8a.8.8 0 0 0 1.2.7l10.3-6.4a.8.8 0 0 0 0-1.4L9.2 4.9a.8.8 0 0 0-1.2.7z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.6v12.8a.8.8 0 0 0 1.2.7l10.3-6.4a.8.8 0 0 0 0-1.4L9.2 4.9a.8.8 0 0 0-1.2.7z'/%3E%3C/svg%3E")}
html.lq .lv.is-win .lv-end .lv-go{background:var(--sun)!important;color:#1B1640!important;box-shadow:0 4px 0 var(--sun-lip)!important}
html.lq .lv.is-win .lv-end .lv-go:active{box-shadow:0 0 0 var(--sun-lip)!important}
html.lq .lv.end-in .lv-end .lv-go{animation:lvTitleIn .45s ease-out .42s both}
html.lq .lv.end-in .lv-end .lv-again{animation:lvTitleIn .45s ease-out .5s both}
html.lq .lv-end .lv-go:active::after{transform:translateX(4px)}
html.lq .lv.is-retry .lv-end .lv-go:active::after{transform:scale(1.25)}
html.lq .lv-end .lv-again svg{transition:transform .35s cubic-bezier(.3,.7,.3,1.3)}
html.lq .lv-end .lv-again:active svg{transform:rotate(-200deg)}
@media (hover:hover) and (pointer:fine){
  html.lq .lv-end .lv-go:hover::after{transform:translateX(4px)}
  html.lq .lv.is-retry .lv-end .lv-go:hover::after{transform:scale(1.2)}
  html.lq .lv-end .lv-again:hover svg{transform:rotate(-200deg)}
}
/* Écran bas (iPhone SE, paysage) : la mascotte et l’en-tête se resserrent */
@media (max-height:700px){
  html.lq .lv-end-top{gap:8px;padding:18px 18px 14px}
  html.lq .lv.is-win .lv-end-top{padding-top:52px}
  html.lq .lv-end-top .mascot-stk{width:72px}
  html.lq .lv-end h2{font-size:25px}
}
@media (prefers-reduced-motion:reduce){
  html.lq .lv-end-sp,html.lq .lv-end-cat::before,html.lq .lv-end-stamp,html.lq .lv-end h2,html.lq .lv-pip,html.lq .lv-pip svg path,html.lq .lv-end-score,html.lq .lv-end .lv-go,html.lq .lv-end .lv-again{animation:none!important}
  html.lq .lv.end-in .lv-pip svg path{stroke-dashoffset:0}
  html.lq .lv.is-win .lv-end-cat::before{opacity:1}
}
html[data-motion="reduce"].lq .lv-end-sp,html[data-motion="reduce"].lq .lv-end-cat::before,html[data-motion="reduce"].lq .lv-end-stamp,html[data-motion="reduce"].lq .lv-end h2,
html[data-motion="reduce"].lq .lv-pip,html[data-motion="reduce"].lq .lv-pip svg path,html[data-motion="reduce"].lq .lv-end-score,html[data-motion="reduce"].lq .lv-end .lv-go,
html[data-motion="reduce"].lq .lv-end .lv-again{animation:none!important}
html[data-motion="reduce"].lq .lv.end-in .lv-pip svg path{stroke-dashoffset:0}
html[data-motion="reduce"].lq .lv.is-win .lv-end-cat::before{opacity:1}

/* ---------- 41. Le schéma d’un projet : la DA de la vitrine, et ce qui change se voit ----------
   Elisa, 31 octobre, 1 h 07 : « pareil pour le schéma, et vérifier qu’il est mis à jour en direct à chaque modification du schéma ».
   Le bouton « Schéma » devient un bandeau violet profond quadrillé, l’autocollant de la base dans une tuile blanche penchée, les
   nombres en pastilles (jaune soleil pour les tables, menthe pour les lignes) qui sautent quand ils changent, « Voir » / « Masquer »
   en pastille blanche. Dessous, chaque table est une carte blanche à rebord lilas : son autocollant, son nom en entier, ses lignes en
   pastille, ses actions en puces ; ses colonnes arrivent l’une après l’autre, la clé primaire en jaune, la clé étrangère en menthe.
   Après chaque requête qui change la base (même si elle échoue en route), le schéma se redessine : une nouvelle table arrive avec
   une étiquette « Nouvelle », une table dont les colonnes changent clignote, des lignes en plus font sauter leur pastille. */
html.lq #scr-console .console-schema-summary{position:relative;isolation:isolate;overflow:hidden;border:0!important;background:var(--deep)!important;color:#fff;
  box-shadow:0 5px 0 #3A22B0,0 18px 34px -24px rgba(40,20,140,.6)!important}
html.lq #scr-console .console-schema-summary::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(190px 140px at 92% 0%,rgba(255,216,107,.3),transparent 70%),radial-gradient(170px 130px at 0% 100%,rgba(159,240,198,.18),transparent 70%),
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/22px 22px}
html.lq #scr-console .console-schema-summary:active{transform:translateY(4px);box-shadow:0 1px 0 #3A22B0!important;background:var(--deep)!important}
html.lq #scr-console .console-schema-icon{width:48px;height:48px;border-radius:15px;background:#fff;box-shadow:0 4px 0 rgba(27,22,64,.32);rotate:-6deg;padding:7px;box-sizing:border-box;
  transition:rotate .3s cubic-bezier(.3,.7,.3,1.4)}
html.lq #scr-console .console-schema-icon svg{width:100%;height:100%}
html.lq #scr-console .console-schema-summary:active .console-schema-icon{rotate:-12deg}
html.lq #scr-console .console-schema-summary b{color:#fff}
html.lq #scr-console #console-schema-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px;color:rgba(255,255,255,.82);font:600 12.5px/1.3 var(--display)}
html.lq #scr-console #console-schema-meta span{padding:2px 9px;border-radius:99px;background:rgba(255,216,107,.2);box-shadow:inset 0 0 0 1.5px rgba(255,216,107,.45);color:var(--sun-hi);font-weight:700}
html.lq #scr-console #console-schema-meta span+span{background:rgba(159,240,198,.16);box-shadow:inset 0 0 0 1.5px rgba(159,240,198,.42);color:var(--mint)}
html.lq #scr-console #console-schema-meta.is-bump span{animation:dbBump .5s cubic-bezier(.3,.7,.3,1.6)}
html.lq #scr-console #console-schema-meta.is-bump span+span{animation-delay:.08s}
html.lq #scr-console .console-schema-action{background:#fff;color:var(--accent-ink);box-shadow:0 3px 0 rgba(27,22,64,.3)}
html.lq #scr-console .console-schema-chev{color:#fff}
/* Le panneau et ses tables */
html.lq #scr-console .console-schema-panel{padding:12px!important;border:2px solid var(--line)!important;border-radius:22px!important;box-shadow:0 4px 0 var(--lip)!important}
html.lq #scr-console .console-schema-panel .db-pill.add{min-height:42px;border:2px solid var(--line)!important;border-radius:14px;background:#fff!important;color:var(--accent-ink)!important;box-shadow:0 3px 0 var(--lip)!important;
  font:700 14px/1 var(--display);transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq #scr-console .console-schema-panel .db-pill.add:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)!important}
html.lq #scr-console .console-schema-panel .db-pill.add svg{transition:transform .3s cubic-bezier(.3,.7,.3,1.5)}
html.lq #scr-console .console-schema-panel .db-pill.add:active svg{transform:translateY(-3px)}
html.lq #scr-console .console-schema-panel .db-tables{padding:0!important;background:none!important}
html.lq #scr-console .console-schema-panel .db-tico{flex:none;width:30px;height:30px;rotate:-5deg;transition:rotate .3s cubic-bezier(.3,.7,.3,1.4)}
html.lq #scr-console .console-schema-panel .db-tico svg{width:100%;height:100%}
html.lq #scr-console .console-schema-panel .db-trow.open .db-tico{rotate:4deg}
html.lq #scr-console .console-schema-panel .db-chev{width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink)}
html.lq #scr-console .console-schema-panel .db-trow.open .db-chev{background:var(--accent);color:#fff}
html.lq #scr-console .console-schema-panel .db-trow .tc{align-self:flex-start;margin-top:3px!important;padding:2px 8px!important;border-radius:99px;background:var(--accent-soft);color:var(--accent-ink);font-weight:700}
html.lq #scr-console .console-schema-panel :is(.db-trow,.db-tdetail) .tb{min-height:36px;border:2px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 2px 0 var(--lip);color:var(--accent-ink);
  font:700 12.5px/1 var(--display);transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq #scr-console .console-schema-panel :is(.db-trow,.db-tdetail) .tb:active{transform:translateY(2px);box-shadow:0 0 0 var(--lip)}
html.lq #scr-console .console-schema-panel :is(.db-trow,.db-tdetail) .tb:not(.reset-table):not(.drop-table){display:inline-flex;align-items:center;gap:6px;padding:0 11px;background:var(--accent-soft);border-color:transparent;box-shadow:0 2px 0 #D9CFFF}
html.lq #scr-console .console-schema-panel :is(.db-trow,.db-tdetail) .tb:not(.reset-table):not(.drop-table)::before{content:"";width:9px;height:10px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10'%3E%3Cpath d='M1 .8v8.4a.6.6 0 0 0 .9.5l6.6-4.2a.6.6 0 0 0 0-1L1.9.3A.6.6 0 0 0 1 .8z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10'%3E%3Cpath d='M1 .8v8.4a.6.6 0 0 0 .9.5l6.6-4.2a.6.6 0 0 0 0-1L1.9.3A.6.6 0 0 0 1 .8z'/%3E%3C/svg%3E") center/contain no-repeat}
html.lq #scr-console .console-schema-panel :is(.db-trow,.db-tdetail) .tb.drop-table{color:#D14343}
/* Les colonnes : une ligne chacune, la clé primaire en jaune, la clé étrangère en menthe ; elles arrivent l’une après l’autre */
html.lq #scr-console .console-schema-panel .db-cols{padding:6px!important;border-radius:14px;background:#F8F6FF;box-shadow:inset 0 0 0 1.5px var(--line)}
html.lq #scr-console .console-schema-panel .db-col{gap:7px;padding:8px 9px;border-radius:10px;font-size:13px}
html.lq #scr-console .console-schema-panel .db-col+.db-col{box-shadow:0 -1.5px 0 var(--line-2)}
html.lq #scr-console .console-schema-panel .db-col .badge{padding:3px 7px;border-radius:7px;font:800 10.5px/1 var(--display);letter-spacing:.03em}
html.lq #scr-console .console-schema-panel .db-col .badge.pk{background:var(--sun);color:#1B1640;box-shadow:0 2px 0 var(--sun-lip)}
html.lq #scr-console .console-schema-panel .db-col .badge.fk{background:var(--mint);color:#0D5B3B;box-shadow:0 2px 0 #6FD6A4}
html.lq #scr-console .console-schema-panel .db-col .cref{color:#0F7A4C;font-weight:700}
html.lq #scr-console .console-schema-panel .db-col .ct{padding:2px 7px;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink-3);font-weight:600}
html.lq #scr-console .console-schema-panel .db-cols.on .db-col{animation:dbColIn .32s cubic-bezier(.2,.8,.3,1.2) both}
html.lq #scr-console .console-schema-panel .db-cols.on .db-col:nth-child(2){animation-delay:.04s}
html.lq #scr-console .console-schema-panel .db-cols.on .db-col:nth-child(3){animation-delay:.08s}
html.lq #scr-console .console-schema-panel .db-cols.on .db-col:nth-child(4){animation-delay:.12s}
html.lq #scr-console .console-schema-panel .db-cols.on .db-col:nth-child(5){animation-delay:.16s}
html.lq #scr-console .console-schema-panel .db-cols.on .db-col:nth-child(n+6){animation-delay:.2s}
/* Ce qui vient de changer */
html.lq #scr-console .console-schema-panel .db-tblock{position:relative}
html.lq #scr-console .console-schema-panel .db-tblock.is-new{animation:dbNew 2.4s ease-out both}
html.lq #scr-console .console-schema-panel .db-tblock.is-new::after{content:"Nouvelle";position:absolute;right:10px;top:-9px;z-index:2;padding:4px 9px 3px;border:2px solid #fff;border-radius:9px;
  background:var(--mint);color:#0D5B3B;font:800 11.5px/1.2 var(--display);box-shadow:0 3px 0 rgba(27,22,64,.18);rotate:5deg;pointer-events:none;animation:dbTag 3.2s cubic-bezier(.3,.7,.3,1.35) both}
html.lq #scr-console .console-schema-panel .db-tblock.is-changed{animation:dbFlash 1.6s ease-out both}
html.lq #scr-console .console-schema-panel .db-tblock:is(.is-more,.is-new,.is-changed) .tc{animation:dbBump .55s cubic-bezier(.3,.7,.3,1.6) .15s}
@keyframes dbBump{0%,100%{transform:none}45%{transform:scale(1.18)}}
@keyframes dbColIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes dbNew{0%{opacity:0;transform:translateY(10px) scale(.97);box-shadow:0 0 0 2px var(--line),0 3px 0 2px var(--lip)}
  25%{opacity:1;transform:none;box-shadow:0 0 0 3px #3FC98A,0 3px 0 3px #2FA872,0 0 0 9px rgba(63,201,138,.18)}
  100%{box-shadow:0 0 0 2px var(--line),0 3px 0 2px var(--lip)}}
@keyframes dbFlash{0%,100%{box-shadow:0 0 0 2px var(--line),0 3px 0 2px var(--lip)}20%,55%{box-shadow:0 0 0 3px var(--accent),0 3px 0 3px var(--accent-lip),0 0 0 9px rgba(106,77,244,.16)}}
@keyframes dbTag{0%{opacity:0;transform:scale(.4) rotate(-14deg)}12%{opacity:1;transform:scale(1.08) rotate(2deg)}20%{transform:none}85%{opacity:1}100%{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){
  html.lq #scr-console #console-schema-meta span,html.lq #scr-console .console-schema-panel .db-col,html.lq #scr-console .console-schema-panel .db-tblock,
  html.lq #scr-console .console-schema-panel .db-tblock::after,html.lq #scr-console .console-schema-panel .db-tblock .tc{animation:none!important}
  html.lq #scr-console .console-schema-panel .db-tblock.is-new::after{display:none}
}
html[data-motion="reduce"].lq #scr-console #console-schema-meta span,html[data-motion="reduce"].lq #scr-console .console-schema-panel .db-col,
html[data-motion="reduce"].lq #scr-console .console-schema-panel .db-tblock,html[data-motion="reduce"].lq #scr-console .console-schema-panel .db-tblock::after,
html[data-motion="reduce"].lq #scr-console .console-schema-panel .db-tblock .tc{animation:none!important}
html[data-motion="reduce"].lq #scr-console .console-schema-panel .db-tblock.is-new::after{display:none}
/* La feuille « Schéma · base du cours » : l’en-tête violet des feuilles (lqVizCap), puis une carte par table, comme dans la Console :
   le nom de la table (plus d’autocollant, Elisa, 1er novembre, 1 h 26 : « enlever les stickers sur les tables »), ses lignes en pastille ; les colonnes une à une, la clé primaire en jaune, la clé étrangère en
   menthe. Les cartes arrivent l’une après l’autre à l’ouverture. */
/* Défi sur une autre base (Elisa, 1er novembre, 0 h 29) : le nom et la description de la base en tête du schéma, en carte lilas. */
/* La présentation de la base se plie (Elisa, 3 novembre, 21 h 03) : fermée d’abord, il reste « Base Aéroport » et la flèche ronde ;
   un appui déplie le texte en douceur, un autre le replie. */
html.lq #schema-sheet .sch-base{margin:0 16px 14px;border-radius:18px;background:var(--accent-soft);color:var(--accent-ink);font:500 13.5px/1.45 var(--ui)}
html.lq #schema-sheet .sch-base-h{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;margin:0;padding:10px 11px 10px 14px;border:0;border-radius:18px;
  background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.lq #schema-sheet .sch-base-h b{flex:1;min-width:0;font:700 16px/1.2 var(--display);color:var(--accent-lip)}
html.lq #schema-sheet .sch-base-chev{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--accent-ink);
  box-shadow:0 2px 0 rgba(75,48,204,.18);transition:transform .32s var(--spring-ios,ease),scale .12s ease}
html.lq #schema-sheet .sch-base-chev svg{display:block;width:17px;height:17px}
html.lq #schema-sheet .sch-base-h:active .sch-base-chev{scale:.9}
html.lq #schema-sheet .sch-base.open .sch-base-chev{transform:rotate(180deg)}
html.lq #schema-sheet .sch-base-h:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
html.lq #schema-sheet .sch-base-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--spring-ios,ease)}
html.lq #schema-sheet .sch-base.open .sch-base-body{grid-template-rows:1fr}
html.lq #schema-sheet .sch-base-body>div{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s linear .32s}
html.lq #schema-sheet .sch-base.open .sch-base-body>div{visibility:visible;transition-delay:0s}
html.lq #schema-sheet .sch-base-body p{margin:0;padding:0 14px 14px}
@media (prefers-reduced-motion:reduce){html.lq #schema-sheet :is(.sch-base-chev,.sch-base-body,.sch-base-body>div){transition:none}}
html[data-motion="reduce"].lq #schema-sheet :is(.sch-base-chev,.sch-base-body,.sch-base-body>div){transition:none}
html.lq #schema-sheet .sch-table{margin:0 16px 14px;border:2px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 4px 0 var(--lip)}
html.lq #schema-sheet .sch-sheet-body{padding-top:0}
/* 5 novembre, 7 h 30 (« trou en haut ») : la rangée des pastilles collait à 16 px du haut de la feuille (le retrait du haut) et le
   schéma défilait dans ce trou, sous l’en-tête violet. Le retrait passe au premier bloc : la rangée colle tout en haut. */
html.lq #schema-sheet .sch-sheet-body>:first-child{margin-top:16px}
html.lq #schema-sheet .sch-head{gap:10px;padding:12px 14px;background:#F8F6FF;color:var(--ink);box-shadow:inset 0 -2px 0 var(--line)}
html.lq #schema-sheet .sch-head .ti{display:none}
html.lq #schema-sheet .sch-head b{font:700 15.5px/1.2 var(--mono);color:var(--ink)}
html.lq #schema-sheet .sch-head small{padding:3px 9px;border-radius:99px;background:var(--accent-soft);color:var(--accent-ink);font:700 12px/1.2 var(--display);opacity:1}
html.lq #schema-sheet .sch-col{gap:8px;padding:10px 14px}
html.lq #schema-sheet .sch-col+.sch-col{box-shadow:0 -1.5px 0 var(--line-2)}
html.lq #schema-sheet .sch-col .badge{padding:3px 7px;border-radius:7px;font:800 10.5px/1 var(--display);letter-spacing:.03em}
html.lq #schema-sheet .sch-col .badge.pk{background:var(--sun);color:#1B1640;box-shadow:0 2px 0 var(--sun-lip)}
html.lq #schema-sheet .sch-col .badge.fk{background:var(--mint);color:#0D5B3B;box-shadow:0 2px 0 #6FD6A4}
html.lq #schema-sheet .sch-col .cref{color:#0F7A4C;font-weight:700}
html.lq #schema-sheet .sch-col .ct{padding:2px 7px;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink-3);font-weight:600}
html.lq #schema-sheet.on .sch-table{animation:dbColIn .4s cubic-bezier(.2,.8,.3,1.2) both}
html.lq #schema-sheet.on .sch-table:nth-child(2){animation-delay:.06s}
html.lq #schema-sheet.on .sch-table:nth-child(3){animation-delay:.12s}
html.lq #schema-sheet.on .sch-table:nth-child(n+4){animation-delay:.18s}
@media (prefers-reduced-motion:reduce){html.lq #schema-sheet .sch-table{animation:none!important}}
html[data-motion="reduce"].lq #schema-sheet .sch-table{animation:none!important}

/* ---------- 42. Défis : la salle seule, le chrono qui monte, les points, le podium ----------
   Elisa, 31 octobre, 1 h 34 : « pour défis : pas de défis libres, d’entraînement libre, que la salle de défis (tirage au sort quand
   on entre, parmi le niveau de difficulté) + le chrono compte de 00:00 à … pour avoir des points si on réussit en premier par rapport
   à ses amis + par rapport au temps, qui rajoute des points : comment se départager les points ? + podium avec ses amis (3 places) »,
   et « améliorer la page avec la DA du site ». La salle prend l’en-tête violet quadrillé de la vitrine (l’autocollant de la cible,
   deux étincelles) ; le barème tient dans une carte ; la manche a son chrono en pastille jaune soleil et une fine barre qui avance
   vers les 3 min ; les cartes du tirage sont des autocollants ; « Trouvé » montre les points qui montent et leur détail ; le podium
   est une scène violette où les marches montent l’une après l’autre, les médailles se posent, les pseudos en pastilles. */
html.lq .room-card{position:relative;overflow:hidden;padding:0 16px 16px!important;border:2px solid var(--line)!important;border-radius:26px!important;background:#fff!important;box-shadow:0 5px 0 var(--lip)!important}
html.lq .room-head{position:relative;isolation:isolate;display:flex;align-items:center;gap:14px;margin:0 -16px 4px;padding:20px 16px 18px;background:var(--deep);color:#fff}
html.lq .room-head::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(220px 160px at 92% 0%,rgba(255,216,107,.3),transparent 70%),radial-gradient(200px 150px at 0% 100%,rgba(159,240,198,.18),transparent 70%),
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/22px 22px}
html.lq .room-stk{flex:none;width:62px;height:62px;padding:8px;box-sizing:border-box;border-radius:19px;background:#fff;box-shadow:0 5px 0 rgba(27,22,64,.32);rotate:-7deg;animation:lrStk .6s cubic-bezier(.3,.7,.3,1.35) .1s both}
html.lq .room-stk svg{width:100%;height:100%}
html.lq .room-head .room-kicker{color:var(--mint)!important}
html.lq .room-head h2{margin:4px 0 0;color:var(--sun-hi)!important;font:700 22px/1.12 var(--display)!important;letter-spacing:-.02em!important}
html.lq .room-head .room-sub{margin:6px 0 0;color:rgba(255,255,255,.86)!important;font-size:13.5px;line-height:1.4;text-wrap:balance}
html.lq .room-sp{position:absolute;z-index:-1;width:12px;height:12px;background:#fff;pointer-events:none;-webkit-mask:var(--mstk-star) center/contain no-repeat;mask:var(--mstk-star) center/contain no-repeat;animation:lqTwinkle 3s ease-in-out infinite}
html.lq .room-sp.s1{right:20px;top:16px}
html.lq .room-sp.s2{right:54px;bottom:14px;width:9px;height:9px;background:var(--sun-hi);animation-delay:-1.4s}
html.lq .room-level{border:2px solid var(--line)!important;border-radius:18px!important;background:#fff!important;box-shadow:0 3px 0 var(--lip);transition:transform .12s var(--press),box-shadow .12s var(--press),border-color .2s}
html.lq .room-level:active{transform:translateY(3px)!important;box-shadow:0 0 0 var(--lip)}
html.lq .room-level.on{border-color:var(--accent)!important;background:var(--accent-soft)!important;box-shadow:0 3px 0 var(--accent-lip)!important;animation:lrStk .4s cubic-bezier(.3,.7,.3,1.5)}
html.lq .room-level b{font:700 15px/1.1 var(--display)!important}
html.lq .room-opt{font-family:var(--display)!important;transition:background-color .2s,color .2s,transform .12s var(--press)}
html.lq .room-opt.on{box-shadow:0 3px 0 var(--accent-lip)}
/* Le barème */
html.lq #defis-rules{margin:14px 14px 30px}
html.lq .room-rules{padding:14px 16px 12px;border:2px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 4px 0 var(--lip)}
html.lq .room-rules h2{display:flex;align-items:center;gap:10px;margin:0 0 8px;font:700 17px/1.2 var(--display);letter-spacing:-.01em;color:var(--ink)}
html.lq .room-rules-stk{flex:none;width:30px;height:30px;rotate:-6deg}
html.lq .room-rules-stk svg{width:100%;height:100%}
html.lq .room-rules ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
html.lq .room-rules li{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 10px;padding:9px 0}
html.lq .room-rules li+li{border-top:2px dashed var(--line-2)}
html.lq .room-rules li b{font:700 14.5px/1.3 var(--display);color:var(--ink)}
html.lq .room-rules li span{padding:3px 9px;border-radius:99px;background:var(--sun);color:#1B1640;font:800 12.5px/1.2 var(--display);box-shadow:0 2px 0 var(--sun-lip);white-space:nowrap}
html.lq .room-rules li small{grid-column:1/-1;color:var(--ink-3);font-size:12.5px;line-height:1.35}
html.lq #defis-join{margin:14px 14px 0}
html.lq .def-join{border:2px solid var(--line)!important;border-radius:22px!important;background:#fff!important;box-shadow:0 4px 0 var(--lip)!important}
/* Le tirage : les cartes en autocollants */
html.lq .jeu-deck i{border:4px solid #fff;border-radius:20px;background:var(--deep)!important;box-shadow:0 6px 0 rgba(27,22,64,.28),0 18px 30px -18px rgba(40,20,140,.6)!important}
html.lq .jeu-deck i::after{color:var(--sun-hi);font-family:var(--display)}
html.lq .jeu-count{font-family:var(--display);color:var(--sun-hi);text-shadow:0 4px 0 rgba(27,22,64,.35)}
html.lq .jeu-drawn b{font-family:var(--display)}
/* La manche : le chrono qui monte, sa barre vers les 3 min */
html.lq .jeu-timer{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 10px!important;border-radius:999px;background:var(--sun)!important;color:#1B1640!important;box-shadow:0 3px 0 var(--sun-lip);
  font:800 16px/1 var(--mono)!important;font-variant-numeric:tabular-nums}
html.lq .jeu-timer::before{content:"";width:14px;height:14px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='13' r='8' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3Cpath d='M12 9v4l2.5 2M9.5 2.5h5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='13' r='8' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3Cpath d='M12 9v4l2.5 2M9.5 2.5h5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
html.lq .jeu-timer.is-low{background:#FF8E8E!important;color:#5C0A14!important;box-shadow:0 3px 0 #D85C68}
html.lq .jeu-tbar{display:block;height:6px;margin:10px 0 14px;border-radius:99px;background:var(--accent-soft);overflow:hidden;position:relative}
html.lq .jeu-tbar::after{content:"";position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--t,0));border-radius:inherit;background:linear-gradient(90deg,var(--mint),var(--sun) 70%,#FF8E8E);transition:transform .5s linear}
/* Trouvé : les points qui montent, leur détail */
html.lq .jeu-found .jeu-found-pts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:6px 0 4px!important}
html.lq .jeu-found .jeu-found-pts strong{font:800 26px/1 var(--display);color:#0F7A4C;font-variant-numeric:tabular-nums}
html.lq .jeu-pd{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px;font-style:normal}
html.lq .jeu-pd i{padding:2px 7px;border-radius:99px;background:var(--accent-soft);color:var(--accent-ink);font:700 11px/1.3 var(--display);font-style:normal;white-space:nowrap}
html.lq .jeu-pd i.is-rang{background:#FFF1C9;color:#8A5A00}
html.lq .jeu-pd i.is-vite{background:#DDF8EA;color:#0F7A4C}
html.lq .jeu-rank li b{display:flex;flex-direction:column;align-items:flex-start;white-space:normal}
html.lq .jeu-rank li b>.jeu-pd{margin-top:4px}
html.lq .jeu-rank li>small{font:800 15px/1 var(--display)!important;color:#0F7A4C!important}
html.lq .jeu-rank li>small.is-ms{min-width:0;font:700 12px/1 var(--mono)!important;color:var(--ink-3)!important}
html.lq .jeu-rank li{animation:dbColIn .34s cubic-bezier(.2,.8,.3,1.2) both;animation-delay:calc(var(--i,0) * .07s)}
html.lq .jeu-tie{margin:10px 2px 0!important;color:var(--ink-3);font-size:12.5px;line-height:1.4}
/* À 0, la suite part toute seule (8 novembre, 10 h 10) : le compte à rebours, au-dessus du bouton. */
html.lq .jeu-auto{margin:16px 2px 12px!important;color:var(--ink-2);font:700 14.5px/1.35 var(--ui);text-align:center}
html.lq .jeu-auto b{color:var(--accent-ink);font:800 16px/1 var(--display);font-variant-numeric:tabular-nums}
/* 8 novembre, 17 h 31 : les 5 s passées, la même ligne dit que la suite arrive (plus de bouton « Manche suivante »). */
html.lq .jeu-auto .jeu-auto-att{display:inline-flex;align-items:center;gap:8px}
/* Le podium : une scène violette, trois marches qui montent, les médailles qui se posent */
html.lq .jeu-podium{position:relative;isolation:isolate;overflow:hidden;gap:10px!important;margin:16px 0 4px!important;padding:26px 14px 0;border-radius:26px;background:var(--deep);box-shadow:0 5px 0 #3A22B0}
html.lq .jeu-podium::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(240px 170px at 50% 0%,rgba(255,216,107,.34),transparent 70%),linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/22px 22px}
html.lq .jeu-step{gap:6px!important}
html.lq .jeu-step-av{display:flex;justify-content:center;gap:2px}
html.lq .jeu-step-av .jeu-av{width:44px;height:44px;border:3px solid #fff;font-size:18px;box-shadow:0 3px 0 rgba(27,22,64,.3)!important}
html.lq .jeu-step.is-1 .jeu-step-av .jeu-av{width:54px;height:54px;font-size:22px}
html.lq .jeu-step-n{color:#fff!important;font:700 13.5px/1.25 var(--display)!important}
html.lq .jeu-step-n small{color:rgba(255,255,255,.75)}
html.lq .jeu-step small{color:rgba(255,255,255,.82)!important;font:700 11.5px/1.3 var(--display)!important}
html.lq .jeu-step>i{position:relative;border:3px solid #fff;border-bottom:0;border-radius:16px 16px 0 0!important;box-shadow:inset 0 -6px 0 rgba(0,0,0,.08)}
html.lq .jeu-step>i em{position:absolute;left:0;right:0;top:8px;text-align:center;font:800 26px/1 var(--display);font-style:normal;color:rgba(27,22,64,.55)}
html.lq .jeu-step.is-1>i{height:112px!important;background:linear-gradient(180deg,var(--sun-hi),var(--sun))!important}
html.lq .jeu-step.is-2>i{height:80px!important;background:linear-gradient(180deg,#EEF0F8,#C9CFE3)!important}
html.lq .jeu-step.is-3>i{height:58px!important;background:linear-gradient(180deg,#FFD2A8,#F4A86A)!important}
html.lq .jeu-medal{font-size:34px!important;text-shadow:0 3px 0 rgba(27,22,64,.3)}
html.lq .jeu-step.is-me .jeu-step-av .jeu-av{box-shadow:0 0 0 3px var(--sun),0 3px 0 rgba(27,22,64,.3)!important}
html.lq .jeu-step.is-empty{opacity:.45}
html.lq .jeu-bilan div{border:2px solid var(--line)!important;border-radius:20px!important;box-shadow:0 4px 0 var(--lip)!important;background:#fff!important}
html.lq .jeu-bilan b{color:var(--accent-ink)}
@media (prefers-reduced-motion:reduce){
  html.lq .room-stk,html.lq .room-sp,html.lq .room-level.on,html.lq .jeu-rank li{animation:none!important}
  html.lq .jeu-tbar::after{transition:none}
}
html[data-motion="reduce"].lq .room-stk,html[data-motion="reduce"].lq .room-sp,html[data-motion="reduce"].lq .room-level.on,html[data-motion="reduce"].lq .jeu-rank li{animation:none!important}
/* Le tirage : une scène violette quadrillée, le titre en jaune, les cartes en autocollants */
html.lq .jeu-draw{position:relative;isolation:isolate;overflow:hidden;min-height:0!important;margin:6px 0 0;padding:26px 16px 22px!important;border-radius:28px;background:var(--deep);color:#fff;box-shadow:0 5px 0 #3A22B0,0 22px 40px -26px rgba(40,20,140,.55)}
html.lq .jeu-draw::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(240px 180px at 50% 30%,rgba(255,216,107,.26),transparent 70%),radial-gradient(200px 150px at 0% 100%,rgba(159,240,198,.16),transparent 70%),
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/22px 22px}
html.lq #scr-lesson .jeu-draw .l-kicker{background:rgba(255,255,255,.16)!important;color:#fff!important}
html.lq #scr-lesson .jeu-draw h1,html.lq #scr-lesson .jeu-draw .l-kicker + h1{color:var(--sun-hi)!important}
html.lq .jeu-draw .jeu-draw-note{color:rgba(255,255,255,.82)!important}
html.lq .jeu-draw .jeu-drawn b{color:#fff}
html.lq .jeu-draw .jeu-drawn small{color:var(--mint)}
html.lq .jeu-deck i{background:#fff!important}
html.lq .jeu-deck i::after{color:var(--accent)}
html.lq .jeu-count{color:var(--sun-hi)}
/* « C’est fait », sur place (lqDone) : une petite coche menthe se pose au coin de la chose touchée, son mot à côté, puis s’envole ;
   l’annonce pour le lecteur d’écran reste invisible (lqSay). Elisa, 31 octobre, 1 h 34 : « ne pas mettre de notification, mais des
   micro-interactions pour bien faire comprendre que l’action est faite ». */
.lq-say{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 7 novembre, 8 h 08 (« pas centré », « sans texte », « comme l’épinglé ») : plus de pastille menthe avec son mot au coin. Au centre de la
   chose touchée, une coche ronde se plante d’un rebond, une onde en part et quatre éclats jaillissent (comme la punaise : pinOnde,
   pinEclat) ; une suppression montre une petite poubelle rose dont le couvercle saute. */
html.lq .lq-done{position:fixed;z-index:9500;width:0;height:0;pointer-events:none}
html.lq .lq-done-pastille{position:absolute;left:-19px;top:-19px;display:grid;place-items:center;width:38px;height:38px;box-sizing:border-box;border:3px solid #fff;border-radius:50%;
  background:var(--mint);color:#0F7A4C;box-shadow:0 4px 0 rgba(27,22,64,.18),0 10px 22px -12px rgba(27,22,64,.5);animation:lqDone 1.1s cubic-bezier(.3,1.3,.5,1) both}
html.lq .lq-done-pastille svg{display:block;width:18px;height:18px}
html.lq .lq-done-pastille svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:lqCheckDraw .35s ease-out .14s forwards}
html.lq .lq-done-onde{position:absolute;left:-19px;top:-19px;width:38px;height:38px;box-sizing:border-box;border:2.5px solid var(--mint);border-radius:50%;opacity:0;animation:lqDoneOnde .6s ease-out .12s both}
html.lq .lq-done-eclats b{position:absolute;left:-1.5px;top:-5px;width:3px;height:10px;border-radius:2px;background:var(--sun);opacity:0;animation:lqDoneEclat .5s ease-out .16s both}
html.lq .lq-done-eclats b:nth-child(1){--a:-45deg}
html.lq .lq-done-eclats b:nth-child(2){--a:45deg}
html.lq .lq-done-eclats b:nth-child(3){--a:135deg}
html.lq .lq-done-eclats b:nth-child(4){--a:-135deg}
@keyframes lqDone{0%{opacity:0;transform:translateY(-10px) scale(.3)}22%{opacity:1;transform:scale(1.14)}36%{transform:scale(.95)}48%{transform:scale(1)}78%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.86)}}
@keyframes lqDoneOnde{0%{opacity:0;transform:scale(.5)}15%{opacity:.85}100%{opacity:0;transform:scale(2.1)}}
@keyframes lqDoneEclat{0%{opacity:0;transform:rotate(var(--a)) translateY(-16px) scaleY(.3)}35%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(-34px) scaleY(1)}}
html.lq .lq-done.is-suppr .lq-done-pastille{background:#FFE4E6;color:#C2283C}
html.lq .lq-done.is-suppr .lq-done-onde{border-color:#FDA4AF}
html.lq .lq-done.is-suppr .lq-done-eclats{display:none}
html.lq .lq-done.is-suppr .lq-done-pastille svg{width:19px;height:19px}
html.lq .lq-done.is-suppr .lq-done-pastille svg path{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
html.lq .lq-done.is-suppr .lq-done-pastille svg .lq-pb-couv{transform-box:fill-box;transform-origin:15% 100%;animation:lqPbCouv .62s cubic-bezier(.3,1.4,.5,1) .14s both}
@keyframes lqPbCouv{0%{transform:none}35%{transform:translateY(-3px) rotate(-20deg)}70%{transform:rotate(5deg)}100%{transform:none}}

/* ---------- 43. Barre « Insérer », boutons d’une note, pastilles des modules, page d’un projet ----------
   Elisa, 31 octobre, 1 h 34. « Il y a une coupure je crois » (la barre Insérer) : la barre défile de côté ; son bord s’estompe là où
   il reste des touches (kbarEdges), au lieu de couper net la dernière touche visible, et elle garde un peu d’air au bout. */
html.lq .kbar-in{padding-right:16px!important;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
html.lq .kbar-in:not(.is-start){-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 34px),transparent)}
html.lq .kbar-in.is-end{-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px);mask-image:linear-gradient(90deg,transparent,#000 24px)}
html.lq .kbar-in.is-end.is-start{-webkit-mask-image:none;mask-image:none}
/* « Fais attention à la responsivité » (les boutons d’une note) : « Enregistrer » prend toute la ligne, « Épingler » et « Supprimer » se
   partagent la suivante ; leurs libellés ne se coupent plus. */
html.lq .ne-row{flex-wrap:wrap}
html.lq .ne-row .prim{flex:1 1 100%!important}
html.lq .ne-row .sec,html.lq .ne-row .del{flex:1 1 0!important;min-width:0;padding-left:12px!important;padding-right:12px!important;white-space:nowrap}
html.lq .ne-row .del{border:2px solid #F6CACA!important;border-radius:16px!important;background:#FFF1F1!important;color:#C0303C!important;box-shadow:0 4px 0 #F2B7B7!important;font-family:var(--display)!important;font-weight:700!important}
html.lq .ne-row .del:active{transform:translateY(4px)!important;box-shadow:0 0 0 #F2B7B7!important}
/* « Les min sont mal placées » (les modules de l’accueil) : la pastille du temps d’étude suit « Module 1 · en cours », sur sa ligne
   courte, au lieu de tomber seule au bout de la description selon la largeur. */
html.lq #scr-learn .home-module-copy small.lq-unit-k{display:flex!important;flex-wrap:wrap;align-items:center;gap:4px 8px}
html.lq #scr-learn .home-module-copy small.lq-unit-k .home-module-time{margin-left:0;font-size:11px;letter-spacing:0}
html.lq #scr-learn .home-module.is-current .home-module-time{background:rgba(255,255,255,.18);color:#fff}
html.lq #scr-learn .home-module.is-current .home-module-time svg{color:var(--mint)}
/* « Mettre la description en haut de SELECT etc., et qu’elle ne s’affiche que quand on déplie » (la page d’un projet) : dans la carte
   dépliée, la fiche de la description prend sa propre ligne entre le nom de la table et ses actions, et s’y pose en douceur. */
html.lq #scr-console .console-schema-panel .db-trow>.db-tnote{flex:1 1 100%;min-width:0;margin:2px 2px 2px 4px!important;animation:dbColIn .3s cubic-bezier(.2,.8,.3,1.2) both}
/* « Problème d’espacement » (la console) : les reliefs (l’ombre pleine sous chaque bloc) mangeaient l’écart, il ne restait que 4 à 5 px
   visibles entre l’éditeur, « Exécuter » et « Épingler ». Le même souffle partout : une dizaine de pixels visibles dans le groupe
   éditeur → boutons, une quinzaine entre les groupes (schéma, exemples, résultat). */
html.lq #scr-console .console-schema-summary{margin-bottom:20px!important}
html.lq #scr-console .chips-wrap{margin-bottom:18px!important}
html.lq #scr-console .console-editor-shell{margin-bottom:16px!important}
html.lq #scr-console .console-run-row{margin-bottom:15px!important}
html.lq #scr-console .console-pin-current{margin-bottom:20px!important}
/* « Deux barres au lieu d’une » (les tableaux de résultat) : la barre native du tableau est masquée ; reste la barre de position violette,
   dessous, qui se tire aussi à la souris ou au doigt (tablePosDrag) — une zone de prise de 18 px autour de son trait de 4 px. */
html.lq .table-scroll>.table-wrap{scrollbar-width:none!important}
html.lq .table-scroll>.table-wrap::-webkit-scrollbar,html.lq.rq-sb .table-scroll>.table-wrap::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
html.lq .table-pos{box-sizing:content-box;height:4px;padding:7px 0;margin:1px auto -6px;background-clip:content-box;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent}
html.lq .table-pos>i{background:var(--accent)}
html.lq .table-pos.is-drag{cursor:grabbing}
html.lq .table-pos.is-drag>i{transition:none;background:var(--accent-ink)}
@media (hover:hover) and (pointer:fine){html.lq .table-pos:hover>i{background:var(--accent-ink)}}
@media (prefers-reduced-motion:reduce){html.lq #scr-console .console-schema-panel .db-trow>.db-tnote{animation:none!important}}
html[data-motion="reduce"].lq #scr-console .console-schema-panel .db-trow>.db-tnote{animation:none!important}

/* ---------- 44. Les pages de l’appli dans la DA de la vitrine ----------
   Elisa, 31 octobre, 2 h 18 : « améliorer les pages Stickers, Selon le SGBD, Carte mémo avec la DA du site (stickers, animation,
   micro-interactions, responsivité), notamment les pages de chaque onglet : Accueil, Planning, Pratiquer, Bibliothèque, Compte ; laisser
   la notif de flamme mais ajouter micro-interaction, animation ». Rien ne bouge en mouvement réduit (fin de section). */
@keyframes lqHeadIn{0%{opacity:0;transform:scale(.3) rotate(-28deg) translateY(-10px)}55%{opacity:1;transform:scale(1.14) rotate(5deg)}78%{transform:scale(.96) rotate(-2deg)}100%{transform:none}}
@keyframes lqHeadPoke{0%{transform:none}25%{transform:translateY(-12px) rotate(-12deg) scale(1.08)}50%{transform:translateY(0) rotate(8deg) scale(.95)}72%{transform:rotate(-4deg)}100%{transform:none}}
@keyframes lqHubIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes lqBarIn{from{transform:scaleX(0)}to{transform:none}}
@keyframes lqStkPop{0%{opacity:0;transform:scale(.2) rotate(-30deg)}60%{opacity:1;transform:scale(1.15) rotate(6deg)}100%{transform:none}}
@keyframes lqZone{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(.985)}}

/* 44a. Le haut des pages : rubrique au tiret, titre souligné au trait jaune, autocollant collé de travers (il se colle à chaque arrivée) */
/* flow-root : l’autocollant flotte à droite du titre sans déborder sur la suite (une grille voisine se serait rétrécie de sa largeur) */
html.lq #app .lgtitle.lq-head{--hs:clamp(56px,17vw,74px);display:flow-root}
html.lq #app .lgtitle.lq-head>.lq-head-stk{float:right;position:relative;z-index:1;display:block;width:var(--hs);height:var(--hs);margin:-4px -4px 4px 12px;rotate:-7deg;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.lq #app .lgtitle.lq-head>.lq-head-stk>svg{display:block;width:100%;height:100%}
html.lq #app .screen.active>.lgtitle.lq-head>.lq-head-stk>svg{animation:lqHeadIn .62s var(--pop) .1s backwards}
html.lq #app .lgtitle.lq-head>.lq-head-stk.is-poke>svg{animation:lqHeadPoke .6s var(--pop)}
html.lq #app .lq-head-sp{position:absolute;width:14px;height:14px;background:var(--sun);pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.9 6 4.9 10 11 11-6.1 1-10.1 5-11 11-.9-6-4.9-10-11-11 6.1-1 10.1-5 11-11Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.9 6 4.9 10 11 11-6.1 1-10.1 5-11 11-.9-6-4.9-10-11-11 6.1-1 10.1-5 11-11Z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:lqTwinkle 3s ease-in-out infinite}
html.lq #app .lq-head-sp:first-of-type{left:-12px;top:2px}
html.lq #app .lq-head-sp:last-of-type{right:-6px;bottom:-4px;width:10px;height:10px;background:var(--accent);animation-delay:1.3s}
html.lq #app .lgtitle.lq-head .eyebrow{display:flex!important;align-items:center;gap:8px;margin:0 0 6px;font:800 12px/1.2 var(--display)!important;letter-spacing:.13em!important;text-transform:uppercase!important;color:var(--accent)!important}
html.lq #app .lgtitle.lq-head .eyebrow::before{content:"";flex:none;width:18px;height:3px;border-radius:3px;background:currentColor}
html.lq #app .lgtitle.lq-head h1{font-size:clamp(28px,8.6vw,34px)}
html.lq #app .lgtitle.lq-head h1 .lq-tu{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30' preserveAspectRatio='none'%3E%3Cpath d='M4 20C70 8 170 6 296 14' fill='none' stroke='%23FFC83D' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100%/100% .24em;
  padding-bottom:.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
html.lq #app .lgtitle.lq-head p.sub{margin-top:8px}

/* 44b. Pratiquer et Bibliothèque : l’autocollant de chaque entrée, qui se redresse au survol et s’écrase à l’appui ; les entrées arrivent
   l’une après l’autre, la barre de progression se remplit */
html.lq #app .journey-resource .journey-tool-icon.is-stk{width:54px;height:54px;background:none!important;border-radius:0!important;overflow:visible;rotate:-6deg;transition:rotate .3s var(--pop),transform .25s var(--pop)}
html.lq #app .journey-resource:nth-child(even) .journey-tool-icon.is-stk{rotate:6deg}
html.lq #app .journey-resource .journey-tool-icon.is-stk svg{width:54px!important;height:54px!important;stroke:none!important;fill:none}
html.lq #app .journey-resource:active .journey-tool-icon.is-stk{transform:scale(.9);rotate:-10deg}
@media (hover:hover) and (pointer:fine){html.lq #app .journey-resource:hover .journey-tool-icon.is-stk{rotate:0deg;transform:scale(1.08)}}
html.lq #app .screen.active .journey-hub-list>.journey-resource{animation:lqHubIn .46s cubic-bezier(.2,.8,.3,1.15) backwards!important;animation-delay:calc(.08s + var(--i,0) * .055s)!important}
html.lq #app .screen.active .journey-resource-bar>i{transform-origin:left;animation:lqBarIn .9s cubic-bezier(.2,.8,.2,1) .35s backwards}
/* La carte du prochain défi (et « À réviser ») : la scène violette de la vitrine, titre jaune, bouton jaune, autocollant */
html.lq .journey-spotlight,html.lq .coll-overview,html.lq .notes-overview,html.lq .ent-hero{isolation:isolate;overflow:hidden;background:var(--deep)!important;box-shadow:0 6px 0 #3A22B0,0 24px 40px -26px rgba(40,20,140,.55)!important}
html.lq .journey-spotlight::before,html.lq .coll-overview::before,html.lq .notes-overview::before,html.lq .ent-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(240px 200px at 92% 0%,rgba(255,216,107,.24),transparent 70%),
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/26px 26px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 90% 85% at 78% 18%,#000 25%,transparent 85%);mask-image:radial-gradient(ellipse 90% 85% at 78% 18%,#000 25%,transparent 85%)}
html.lq .journey-spotlight .journey-kicker{color:var(--mint)!important;font:800 12.5px/1.3 var(--display)!important;letter-spacing:.07em!important;text-transform:uppercase!important;padding-right:62px}
html.lq .journey-spotlight h2{color:var(--sun-hi)!important;padding-right:62px}
html.lq .journey-spotlight .journey-primary{background:var(--sun)!important;color:#1B1640!important;box-shadow:0 5px 0 var(--sun-lip)!important}
html.lq .journey-spotlight .journey-primary:active{box-shadow:0 0 0 var(--sun-lip)!important}
html.lq .journey-spot-stk{position:absolute;right:14px;top:12px;width:56px;height:56px;rotate:8deg;pointer-events:none}
html.lq .journey-spot-stk svg{display:block;width:100%;height:100%}
html.lq #app .screen.active .journey-spot-stk svg{animation:lqStkPop .6s var(--pop) .2s backwards}
html.lq .coll-overview-copy strong,html.lq .notes-overview-copy b,html.lq .ent-hero-txt b{color:var(--sun-hi)!important}
html.lq .coll-overview-copy small,html.lq .notes-overview-copy small,html.lq .ent-hero-kicker{color:var(--mint)!important}
html.lq .coll-overview-next button,html.lq .ent-hero .ent-hero-cta{background:var(--sun)!important;color:#1B1640!important;box-shadow:0 5px 0 var(--sun-lip)!important}
html.lq .coll-overview-next button:active,html.lq .ent-hero .ent-hero-cta:active{box-shadow:0 0 0 var(--sun-lip)!important}

/* 44c. Mon compte : les chiffres et les réglages portent leur autocollant ; chaque ligne répond à l’appui */
html.lq #scr-compte .acct-stat-ico.is-stk{width:46px!important;height:46px!important;background:none!important;box-shadow:none!important;border-radius:0!important;rotate:-6deg}
html.lq #scr-compte .acct-stat:nth-child(2) .acct-stat-ico.is-stk{rotate:5deg}
html.lq #scr-compte .acct-stat-ico.is-stk svg{width:46px!important;height:46px!important}
html.lq #scr-compte .acct-stat.is-streak:not(.is-on) .acct-stat-ico.is-stk svg{opacity:.5;filter:saturate(.15)}
html.lq #scr-compte.active .acct-stat-ico.is-stk svg{animation:lqStkPop .55s var(--pop) backwards;animation-delay:calc(.15s + var(--i,0) * .08s)}
html.lq #scr-compte .acct-stat:nth-child(1) .acct-stat-ico.is-stk svg{--i:0}
html.lq #scr-compte .acct-stat:nth-child(2) .acct-stat-ico.is-stk svg{--i:1}
html.lq #scr-compte .acct-stat:nth-child(3) .acct-stat-ico.is-stk svg{--i:2}
html.lq #scr-compte .plus-row-icon.is-stk,html.lq #scr-compte .acct-data-ico.is-stk{width:46px!important;height:46px!important;background:none!important;border-radius:0!important;box-shadow:none!important;rotate:-6deg;transition:rotate .3s var(--pop),transform .25s var(--pop)}
html.lq #scr-compte .account-setting-row:nth-child(even) .plus-row-icon.is-stk{rotate:6deg}
html.lq #scr-compte .plus-row-icon.is-stk svg,html.lq #scr-compte .acct-data-ico.is-stk svg{width:42px!important;height:42px!important;stroke:none!important;fill:none}
html.lq #scr-compte .account-setting-row:active .plus-row-icon.is-stk{transform:scale(.88);rotate:-12deg}
@media (hover:hover) and (pointer:fine){html.lq #scr-compte .account-setting-row:hover .plus-row-icon.is-stk{rotate:0deg;transform:scale(1.08)}}
html.lq #scr-compte .account-setting-row{transition:background .16s ease}
html.lq #scr-compte .account-setting-row:active{background:#F7F4FF!important}

/* La carte d’identité de Mon compte : la même scène violette que l’accueil, le niveau en menthe, la barre du prochain cap en jaune */
html.lq .acct-hero{isolation:isolate;overflow:hidden;background:var(--deep)!important;box-shadow:0 6px 0 #3A22B0,0 24px 40px -26px rgba(40,20,140,.55)!important}
html.lq .acct-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(240px 200px at 92% 0%,rgba(255,216,107,.24),transparent 70%),
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/26px 26px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 90% 85% at 78% 18%,#000 25%,transparent 85%);mask-image:radial-gradient(ellipse 90% 85% at 78% 18%,#000 25%,transparent 85%)}
html.lq .acct-hero .acct-id-copy small{color:var(--mint)!important}
html.lq .acct-hero .acct-level{background:rgba(20,10,60,.24)}
html.lq .acct-hero .acct-level-next{color:var(--sun-hi)}
html.lq .acct-hero .acct-level-track i{background:var(--sun)}
html.lq #scr-compte.active .acct-hero .acct-level-track i{transform-origin:left;animation:lqBarIn .9s cubic-bezier(.2,.8,.2,1) .3s backwards}

/* 44d. Planning : le prochain cap passe en scène violette. Plus d’autocollants sur les tuiles d’« Avancement global » (Elisa, 31 octobre,
   8 h 06 : « enlever les stickers ici ») : la flamme de la série et l’horloge du temps d’étude reviennent à leur place. */
html.lq #scr-planning .pgr-next{position:relative;isolation:isolate;overflow:hidden;padding:16px!important;border-radius:22px!important;background:var(--deep)!important;box-shadow:0 5px 0 #3A22B0,0 20px 36px -24px rgba(40,20,140,.55)}
html.lq #scr-planning .pgr-next::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(200px 160px at 90% 0%,rgba(255,216,107,.24),transparent 70%),linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 90% 90% at 80% 15%,#000 25%,transparent 85%);mask-image:radial-gradient(ellipse 90% 90% at 80% 15%,#000 25%,transparent 85%)}
html.lq #scr-planning .pgr-next small{color:var(--mint)!important}
html.lq #scr-planning .pgr-next>span>b{color:var(--sun-hi)!important}
html.lq #scr-planning .pgr-next>span>em{color:rgba(255,255,255,.86)!important}
html.lq #scr-planning .pgr-next .pgr-go{background:var(--sun)!important;color:#1B1640!important;box-shadow:0 5px 0 var(--sun-lip)!important;border-color:transparent!important}
html.lq #scr-planning .pgr-next .pgr-go:active{box-shadow:0 0 0 var(--sun-lip)!important;transform:translateY(5px)}
html.lq #scr-planning .pgr-next .pl-overview-adjust{background:rgba(255,255,255,.16)!important;color:#fff!important;border:2px solid rgba(255,255,255,.4)!important;box-shadow:0 4px 0 rgba(20,10,60,.2)!important}
html.lq #scr-planning .pgr-next .pl-overview-adjust svg{color:#fff}

/* 44e. Stickers : le tableau devient la scène violette de la vitrine (quadrillage, lueurs, étincelles), la zone où coller respire tant
   qu’il est vide ; « Nouveau » est une étiquette jaune collée de travers ; les stickers de la planche arrivent l’un après l’autre */
html.lq .stk-board{background:radial-gradient(260px 200px at 88% 6%,rgba(255,216,107,.24),transparent 70%),radial-gradient(240px 180px at 0% 100%,rgba(159,240,198,.16),transparent 70%),
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/24px 24px,var(--deep);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.08),0 6px 0 #3A22B0,0 24px 44px -28px rgba(40,20,140,.6)}
html.lq .stk-board.is-target{box-shadow:inset 0 0 0 3px var(--sun-hi),0 6px 0 #3A22B0}
html.lq .stk-board-logo{color:rgba(255,255,255,.1)}
html.lq .stk-board.is-empty::after{content:"";position:absolute;inset:14px;border:2.5px dashed rgba(255,255,255,.32);border-radius:18px;pointer-events:none;animation:lqZone 2.6s ease-in-out infinite}
html.lq .stk-empty b{color:var(--sun-hi)}
html.lq .stk-empty span{color:rgba(255,255,255,.86)}
html.lq .stk-sheet-sec .acct-head span{padding:4px 10px;border-radius:99px;background:var(--sun);color:#1B1640;font:800 12.5px/1.2 var(--display);box-shadow:0 2px 0 var(--sun-lip)}
html.lq .stk-group span{padding:2px 9px;border-radius:99px;background:var(--accent-soft);color:var(--accent-ink);font:700 12.5px/1.4 var(--display)}
html.lq .stk-new{background:var(--sun)!important;color:#1B1640!important;rotate:-7deg;box-shadow:0 2px 0 var(--sun-lip)}
html.lq #scr-stickers.active .stk-grid>li{animation:lqHubIn .42s var(--pop) backwards;animation-delay:calc(.1s + var(--i,0) * .035s)}
html.lq #scr-stickers .stk-board-actions .stk-btn{transition:transform .12s var(--press),box-shadow .12s var(--press)}

/* 44f. Selon le SGBD : l’introduction en fiche, la barre des thèmes accrochée en haut (le thème lu s’allume), les thèmes en
   autocollants, « cours » en étiquette jaune ; deux colonnes de fiches sur un grand écran */
html.lq .sg-intro{position:relative;display:flow-root;background:#fff!important;border:2px solid var(--line)!important;box-shadow:0 4px 0 var(--lip)}
html.lq .sg-intro-stk{float:left;width:46px;height:46px;margin:0 12px 4px -2px;rotate:-8deg}
html.lq .sg-intro-stk svg{display:block;width:100%;height:100%}
html.lq .sg-chips{position:sticky;top:calc(var(--safe-top) + 44px);z-index:20;background:var(--bg);transition:box-shadow .2s ease;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}
html.lq #sgbd-sheet-body .sg-chips{top:0}
html.lq .sg-chips:not(.is-start){-webkit-mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,transparent,#000 26px,#000 calc(100% - 30px),transparent)}
html.lq .sg-chips.is-end{-webkit-mask-image:linear-gradient(90deg,transparent,#000 26px);mask-image:linear-gradient(90deg,transparent,#000 26px)}
html.lq .sg-chips.is-end.is-start{-webkit-mask-image:none;mask-image:none}
html.lq .sg-chips.is-stuck{box-shadow:0 2px 0 var(--line)}
html.lq .sg-chips .fchip{transition:background .2s ease,color .2s ease,transform .25s var(--pop),box-shadow .2s ease}
html.lq .sg-chips .fchip.on{transform:translateY(-1px) scale(1.04)}
html.lq .sg-sec h2 span{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:13px;background:#fff;border:2px solid var(--line);box-shadow:0 3px 0 var(--lip);rotate:-7deg;font-size:20px;line-height:1;transition:rotate .3s var(--pop)}
html.lq .sg-sec.is-focus h2 span{rotate:4deg;border-color:#CFC4FF;box-shadow:0 3px 0 #CFC4FF}
html.lq .sg-wrap.lq-reveal .sg-need{transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.3,1.15)}
html.lq .sg-wrap.lq-reveal .sg-need:not(.is-in){opacity:0;transform:translateY(16px) scale(.98)}
@media (min-width:760px){
  html.lq #scr-sgbd .sg-sec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;align-items:start}
  html.lq #scr-sgbd .sg-sec>h2{grid-column:1/-1}
}

/* 44g. Cartes mémo : chaque carte arrive à son tour et se retourne d’un rien à l’appui, comme une fiche qu’on prend en main */
html.lq #scr-collection.active .coll-module[open] .coll-card{animation:lqHubIn .42s cubic-bezier(.2,.8,.3,1.15) backwards;animation-delay:calc(.08s + var(--i,0) * .04s)}
html.lq #scr-collection .coll-card{transition:transform .18s var(--press),box-shadow .18s var(--press)}
html.lq #scr-collection .coll-card:active{transform:perspective(600px) rotateY(-12deg) scale(.97)}
@media (hover:hover) and (pointer:fine){html.lq #scr-collection .coll-card:not(.lock):hover{transform:translateY(-2px) rotate(-1deg)}}
html.lq #scr-collection .coll-card.lock{border-style:dashed!important}
@media (min-width:900px){html.lq #scr-collection .coll-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}}

/* 44h. Accueil : « Tous les cours » en rubrique au tiret, « Ton parcours » souligné au trait jaune, les modules arrivent l’un après l’autre */
html.lq #scr-learn .home-catalog-head>div>span{display:flex;align-items:center;gap:8px;font:800 12px/1.2 var(--display)!important;letter-spacing:.13em!important;text-transform:uppercase!important;color:var(--accent)!important}
html.lq #scr-learn .home-catalog-head>div>span::before{content:"";flex:none;width:18px;height:3px;border-radius:3px;background:currentColor}
html.lq #scr-learn .home-catalog-head h2{width:fit-content;max-width:100%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30' preserveAspectRatio='none'%3E%3Cpath d='M4 20C70 8 170 6 296 14' fill='none' stroke='%23FFC83D' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100%/100% .24em;padding-bottom:.06em}
html.lq #scr-learn.active #modules>.home-module{animation:lqHubIn .46s cubic-bezier(.2,.8,.3,1.15) backwards!important;animation-delay:calc(.1s + min(var(--i,0),8) * .05s)!important}

/* 44i. La notification de flamme : elle tombe en se balançant, la flamme s’allume dans un anneau jaune et lâche des étincelles, « +1 » se
   colle sur sa case, et le compteur roule de la veille à aujourd’hui */
@keyframes lqStIn{0%{transform:translate(-50%,-150%) rotate(-5deg)}55%{transform:translate(-50%,8px) rotate(2deg)}78%{transform:translate(-50%,-2px) rotate(-.6deg)}100%{transform:translate(-50%,0)}}
@keyframes lqStRing{0%{opacity:0;transform:scale(.5)}25%{opacity:1}100%{opacity:0;transform:scale(1.7)}}
@keyframes lqStSpark{0%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(.4)}20%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(-30px) scale(1)}}
@keyframes lqStPlus{0%{opacity:0;transform:scale(.2) rotate(-40deg)}60%{opacity:1;transform:scale(1.2) rotate(8deg)}100%{opacity:1;transform:rotate(-8deg)}}
@keyframes lqStNew{from{opacity:0;transform:translateY(90%)}to{opacity:1;transform:none}}
@keyframes lqStOld{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-90%)}}
@keyframes lqStGlow{0%,100%{box-shadow:0 0 0 0 rgba(255,200,61,0)}50%{box-shadow:0 0 0 6px rgba(255,200,61,.28)}}
#lq-streak-toast.on{animation:lqStIn .7s var(--pop) both}
#lq-streak-toast .lq-st-flame{position:relative;overflow:visible;background:radial-gradient(circle at 50% 70%,#FFE7B0,#FFF0DC 70%)!important}
#lq-streak-toast.on .lq-st-flame{animation:lqStGlow 1.6s ease-in-out .5s 2}
#lq-streak-toast .lq-st-ring{position:absolute;inset:-4px;border-radius:18px;border:3px solid var(--sun);opacity:0;pointer-events:none}
#lq-streak-toast.on .lq-st-ring{animation:lqStRing .9s ease-out .35s both}
#lq-streak-toast .lq-st-sp{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#FF9A3D;opacity:0;pointer-events:none}
#lq-streak-toast .lq-st-sp:nth-of-type(2){--a:-70deg;background:var(--sun)}
#lq-streak-toast .lq-st-sp:nth-of-type(3){--a:-25deg}
#lq-streak-toast .lq-st-sp:nth-of-type(4){--a:20deg;background:var(--sun)}
#lq-streak-toast .lq-st-sp:nth-of-type(5){--a:65deg}
#lq-streak-toast .lq-st-sp:nth-of-type(6){--a:115deg;background:#FF6B6B}
#lq-streak-toast .lq-st-sp:nth-of-type(7){--a:-115deg;background:#FF6B6B}
#lq-streak-toast.on .lq-st-sp{animation:lqStSpark .75s cubic-bezier(.2,.7,.3,1) .45s both}
#lq-streak-toast .lq-st-plus{position:absolute;right:-9px;top:-9px;padding:3px 6px 2px;border-radius:8px;border:2px solid #fff;background:var(--sun);color:#1B1640;font:800 11.5px/1 var(--display);font-style:normal;box-shadow:0 2px 0 var(--sun-lip);opacity:0}
#lq-streak-toast.on .lq-st-plus{animation:lqStPlus .5s var(--pop) .7s both}
/* Le compteur : le nouveau chiffre monte à la place de l’ancien (clip-path coupe sans toucher à la ligne de base du texte) */
#lq-streak-toast .lq-st-odo{position:relative;display:inline-block;-webkit-clip-path:inset(0 -6px);clip-path:inset(0 -6px)}
#lq-streak-toast .lq-st-new{display:inline-block}
#lq-streak-toast .lq-st-old{position:absolute;left:0;top:0;opacity:0}
#lq-streak-toast.on .lq-st-new{animation:lqStNew .45s var(--pop) .8s both}
#lq-streak-toast.on .lq-st-old{animation:lqStOld .4s ease-in .8s both}

/* 44j. Mouvement réduit : tout est à sa place d’emblée */
@media (prefers-reduced-motion:reduce){
  html.lq #app .lq-head-stk>svg,html.lq #app .lq-head-sp,html.lq #app .journey-resource,html.lq #app .journey-resource-bar>i,html.lq .journey-spot-stk svg,html.lq #scr-compte .acct-stat-ico.is-stk svg,
  html.lq .stk-board.is-empty::after,html.lq #scr-compte .acct-hero .acct-level-track i,html.lq #scr-stickers .stk-grid>li,html.lq #scr-collection .coll-card,html.lq #scr-learn #modules>.home-module,
  #lq-streak-toast,#lq-streak-toast *{animation:none!important}
  #lq-streak-toast .lq-st-plus{opacity:1;rotate:-8deg}
  html.lq .sg-wrap.lq-reveal .sg-need:not(.is-in){opacity:1;transform:none}
}
html[data-motion="reduce"].lq #app .lq-head-stk>svg,html[data-motion="reduce"].lq #app .lq-head-sp,html[data-motion="reduce"].lq #app .journey-resource,html[data-motion="reduce"].lq #app .journey-resource-bar>i,
html[data-motion="reduce"].lq .journey-spot-stk svg,html[data-motion="reduce"].lq #scr-compte .acct-stat-ico.is-stk svg,html[data-motion="reduce"].lq #scr-compte .acct-hero .acct-level-track i,html[data-motion="reduce"].lq .stk-board.is-empty::after,
html[data-motion="reduce"].lq #scr-stickers .stk-grid>li,html[data-motion="reduce"].lq #scr-collection .coll-card,html[data-motion="reduce"].lq #scr-learn #modules>.home-module,
html[data-motion="reduce"] #lq-streak-toast,html[data-motion="reduce"] #lq-streak-toast *{animation:none!important}
html[data-motion="reduce"] #lq-streak-toast .lq-st-plus{opacity:1;rotate:-8deg}

/* ---------- 45. La fiche d’une carte mémo dans la DA de la vitrine ----------
   Elisa, 31 octobre, 7 h 57 : « pareil, élève d’un niveau, surtout le À retenir (DA du site) ». La carte ouverte devient la scène violette
   de la vitrine (notion en jaune, module en menthe, numéro en étiquette), elle arrive en se retournant, s’incline sous le doigt et son
   reflet la balaie ; « À retenir » est une fiche : l’ampoule autocollante qui s’allume, l’étiquette jaune, une phrase par ligne cochée en
   jaune, les mots importants surlignés, le code en touches. Rien ne bouge en mouvement réduit. */
@keyframes cdFlipIn{0%{opacity:0;transform:perspective(800px) rotateY(-75deg) scale(.86)}60%{opacity:1;transform:perspective(800px) rotateY(8deg) scale(1.02)}100%{transform:perspective(800px)}}
@keyframes cdShine{0%{transform:translateX(-120%) skewX(-16deg)}100%{transform:translateX(220%) skewX(-16deg)}}
@keyframes cdGlow{0%{opacity:0;transform:scale(.4)}40%{opacity:1}100%{opacity:0;transform:scale(1.6)}}
@keyframes cdSwing{0%{rotate:-26deg}45%{rotate:4deg}70%{rotate:-14deg}100%{rotate:-8deg}}
@keyframes cdPtIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes cdTick{from{-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0)}to{-webkit-clip-path:inset(0);clip-path:inset(0)}}
@keyframes cdTagIn{0%{opacity:0;transform:scale(.4) rotate(-14deg)}65%{opacity:1;transform:scale(1.08) rotate(2deg)}100%{transform:none}}
/* La carte : scène violette, quadrillage, lueur jaune, étoile */
html.lq #card-sheet .cd-share.collectible{position:relative;isolation:isolate;overflow:hidden;gap:16px;padding:20px 20px 22px;border:0!important;border-radius:26px!important;background:var(--deep)!important;color:#fff;
  box-shadow:0 6px 0 #3A22B0,0 24px 40px -24px rgba(40,20,140,.6)!important;transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s ease-out;touch-action:pan-y}
html.lq #card-sheet .cd-share.collectible.is-tilt{transition:transform .08s linear}
html.lq #card-sheet .cd-share.collectible::before{display:block!important;content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 1c.9 6 4.9 10 11 11-6.1 1-10.1 5-11 11-.9-6-4.9-10-11-11 6.1-1 10.1-5 11-11Z'/%3E%3C/svg%3E") no-repeat right 18px bottom 18px/16px 16px,
    radial-gradient(240px 190px at 92% 0%,rgba(255,216,107,.28),transparent 70%),radial-gradient(200px 150px at 0% 100%,rgba(159,240,198,.16),transparent 70%),
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/24px 24px}
html.lq #card-sheet .cd-share.collectible::after{display:none!important}
html.lq #card-sheet .cd-shine{position:absolute;top:-20%;bottom:-20%;left:0;width:42%;z-index:2;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:translateX(-120%) skewX(-16deg)}
html.lq #card-sheet.viz.on .cd-share.collectible{animation:cdFlipIn .72s var(--pop) .05s backwards!important}
html.lq #card-sheet.viz.on .cd-shine{animation:cdShine 1.1s ease-in-out .55s both}
html.lq #card-sheet .cd-share.collectible.is-tilt .cd-shine{animation:none;transform:translateX(calc(var(--gx,50%) * 2.4 - 120%)) skewX(-16deg)}
html.lq #card-sheet .cd-share .memo-num{height:28px;min-width:38px;padding:0 8px;border:2px solid #fff;border-radius:10px;background:var(--sun);color:#1B1640;font:800 13px/1 var(--mono);box-shadow:0 3px 0 rgba(20,10,60,.3);rotate:-5deg}
html.lq #card-sheet .cd-share .memo-mod{color:var(--mint);font:800 12px/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;white-space:normal;text-align:right}
html.lq #card-sheet .cd-share .memo-copy>b{color:var(--sun-hi);font-size:clamp(26px,8vw,32px);text-wrap:balance}
html.lq #card-sheet .cd-share .memo-copy>span{padding-right:26px;color:rgba(255,255,255,.9)}
/* « À retenir » : l’ampoule et l’étiquette jaune se posent à cheval sur le bord de la fiche */
html.lq #card-body .cd-lab.memo{position:relative;z-index:2;display:flex;align-items:center;gap:6px;margin:0 0 -22px 8px;text-transform:none;letter-spacing:0;pointer-events:none}
html.lq #card-body .cd-memo-stk{position:relative;flex:none;width:52px;height:52px;rotate:-8deg;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.lq #card-body .cd-memo-stk svg{position:relative;display:block;width:100%;height:100%}
html.lq #card-body .cd-memo-stk::before{content:"";position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,rgba(255,216,107,.7),rgba(255,216,107,0) 64%);opacity:0;pointer-events:none}
html.lq #card-sheet.viz.on .cd-memo-stk{animation:cdSwing .9s var(--pop) .3s backwards}
html.lq #card-sheet.viz.on .cd-memo-stk::before{animation:cdGlow 1.3s ease-out .55s both}
html.lq #card-body .cd-memo-stk.is-poke svg{animation:lqHeadPoke .6s var(--pop)}
html.lq #card-body .cd-memo-stk.is-poke::before{animation:cdGlow 1s ease-out both}
html.lq #card-body .cd-memo-tag{padding:6px 11px 5px;border:2px solid #fff;border-radius:11px;background:var(--sun);color:#1B1640;font:800 13px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;box-shadow:0 3px 0 var(--sun-lip);rotate:-3deg}
html.lq #card-sheet.viz.on .cd-memo-tag{animation:cdTagIn .5s var(--pop) .45s backwards}
/* La fiche : blanche à bord lavande et relief ; une phrase par ligne, cochée d’une pastille jaune */
html.lq #card-body .cd-memo{position:relative;margin:0 0 16px;padding:30px 16px 12px!important;border:2px solid var(--line)!important;border-radius:22px!important;background:#fff!important;
  box-shadow:0 4px 0 var(--lip)!important;color:var(--ink);font-size:15.5px;line-height:1.55}
html.lq #card-body .cd-memo::before{display:none}
html.lq #card-body .cd-pts{list-style:none;margin:0;padding:0}
html.lq #card-body .cd-pts>li{position:relative;padding:10px 2px 10px 36px}
html.lq #card-body .cd-pts>li+li{border-top:1.5px dashed #E6E0F8}
html.lq #card-body .cd-pts>li::before{content:"";position:absolute;left:0;top:11px;width:23px;height:23px;box-sizing:border-box;border:2px solid #1B1640;border-radius:50%;background:var(--sun);box-shadow:0 2px 0 rgba(27,22,64,.25)}
html.lq #card-body .cd-pts>li::after{content:"";position:absolute;left:6px;top:17px;width:11px;height:11px;background:#1B1640;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
html.lq #card-sheet.viz.on .cd-pts>li{animation:cdPtIn .4s cubic-bezier(.2,.8,.3,1.15) backwards;animation-delay:calc(.5s + var(--i,0) * .08s)}
html.lq #card-sheet.viz.on .cd-pts>li::after{animation:cdTick .3s ease-out backwards;animation-delay:calc(.72s + var(--i,0) * .08s)}
html.lq #card-body .cd-memo b{color:var(--ink);font-weight:750;background:linear-gradient(transparent 60%,rgba(255,200,61,.55) 60%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
html.lq #card-body .cd-memo code{padding:1px 6px;border:1.5px solid #D9CFFF;border-radius:8px;background:#F4F0FF;color:#4528CA;font-weight:700;box-shadow:0 2px 0 #D9CFFF;-webkit-box-decoration-break:clone;box-decoration-break:clone}
html.lq #card-body .cd-memo .cd-arr{color:var(--accent);font-weight:800}
html.lq #card-body .cd-memo .sgbd-link{font-weight:800}
/* « Ajouter à mes notes » : avec son carnet autocollant */
html.lq #card-body .coda-note{gap:10px}
html.lq #card-body .coda-note-stk{flex:none;display:block;width:32px;height:32px;margin:-6px 0;rotate:-8deg;transition:rotate .3s var(--pop),transform .25s var(--pop)}
html.lq #card-body .coda-note-stk svg{display:block;width:100%;height:100%}
html.lq #card-body .coda-note:active .coda-note-stk{transform:scale(.88);rotate:-14deg}
@media (hover:hover) and (pointer:fine){html.lq #card-body .coda-note:hover .coda-note-stk{rotate:0deg;transform:scale(1.08)}}
/* « Syntaxe » : la rubrique au tiret de la vitrine */
html.lq #card-body .cd-lab:not(.memo){display:flex;align-items:center;gap:8px;margin-left:4px;margin-right:4px;margin-bottom:10px;color:var(--accent)!important;font:800 12px/1.2 var(--display)!important;letter-spacing:.13em!important;text-transform:uppercase!important}
html.lq #card-body .cd-lab:not(.memo)::before{content:"";flex:none;width:18px;height:3px;border-radius:3px;background:currentColor}
@media (prefers-reduced-motion:reduce){
  html.lq #card-sheet .cd-share.collectible,html.lq #card-sheet .cd-shine,html.lq #card-body .cd-memo-stk,html.lq #card-body .cd-memo-stk::before,html.lq #card-body .cd-memo-stk svg,html.lq #card-body .cd-memo-tag,
  html.lq #card-body .cd-pts>li,html.lq #card-body .cd-pts>li::after{animation:none!important;transition:none!important}
  html.lq #card-sheet .cd-shine{display:none}
}
html[data-motion="reduce"].lq #card-sheet .cd-share.collectible,html[data-motion="reduce"].lq #card-sheet .cd-shine,html[data-motion="reduce"].lq #card-body .cd-memo-stk,
html[data-motion="reduce"].lq #card-body .cd-memo-stk::before,html[data-motion="reduce"].lq #card-body .cd-memo-stk svg,html[data-motion="reduce"].lq #card-body .cd-memo-tag,
html[data-motion="reduce"].lq #card-body .cd-pts>li,html[data-motion="reduce"].lq #card-body .cd-pts>li::after{animation:none!important;transition:none!important}
html[data-motion="reduce"].lq #card-sheet .cd-shine{display:none}

/* ---------- 46. Défis : « Tes performances », et le trait de la salle ----------
   Elisa, 31 octobre, 8 h 06 : « avoir un tableau de performance pour la page défis + le trait est grossier ». Le contour lavande ne
   cerne plus l’en-tête violet de la salle : il passe dessous, en ombre intérieure, et l’en-tête va jusqu’au bord de la carte ; la
   pastille choisie (Seul, 3 manches…) garde son relief dans son rail sans déborder du coin ; plus de pointillés épais sous le bouton.
   Le tableau : trois chiffres (les points en jaune soleil), l’anneau de réussite, les deux temps, les barres des dernières parties
   sur une scène violette (la meilleure en jaune ; toucher une barre la détaille), la réussite par niveau, les podiums entre amis,
   l’historique. Les chiffres montent, l’anneau se remplit et les barres poussent quand le tableau arrive à l’écran. */
html.lq .room-card{border:0!important;padding:0 18px 18px!important;box-shadow:inset 0 0 0 2px var(--line),0 5px 0 var(--lip)!important}
html.lq .room-head{margin:0 -18px;padding:14px 18px 12px}
html.lq .room-field{margin-top:12px}
html.lq .room-seg{padding:4px 4px 7px!important}
html.lq .room-opt.on:active{transform:translateY(2px);box-shadow:0 1px 0 var(--accent-lip)}
html.lq .room-stk.is-poke>svg,html.lq .perf-stk.is-poke>svg{animation:lqHeadPoke .6s var(--pop)}
html.lq #defis-perf{margin:14px 14px 0}
html.lq .perf-card{position:relative;padding:16px 16px 16px;border:2px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 5px 0 var(--lip)}
html.lq .perf-head{display:flex;align-items:center;gap:12px;margin:0 0 14px}
html.lq .perf-stk{flex:none;width:48px;height:48px;rotate:-7deg;cursor:pointer}
html.lq .perf-stk svg{width:100%;height:100%}
html.lq .perf-kicker{display:inline-flex;align-items:center;gap:8px;margin:0;font:700 12px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)}
html.lq .perf-kicker::before{content:"";flex:none;width:14px;height:2px;border-radius:2px;background:currentColor}
html.lq .perf-head h2{margin:5px 0 0;font:700 21px/1.12 var(--display);letter-spacing:-.02em;color:var(--ink)}
/* Les trois chiffres */
html.lq .perf-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
html.lq .perf-kpi{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:11px 11px 10px;border:2px solid var(--line);border-radius:17px;background:#fff;box-shadow:0 3px 0 var(--lip)}
html.lq .perf-kpi b{font:800 23px/1 var(--display);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
html.lq .perf-kpi.is-long b{font-size:18px}
html.lq .perf-kpi small{font:700 11.5px/1.2 var(--display);color:var(--ink-3)}
html.lq .perf-kpi.is-sun{border-color:var(--sun);background:var(--sun);box-shadow:0 3px 0 var(--sun-lip)}
html.lq .perf-kpi.is-sun b{color:#1B1640}
html.lq .perf-kpi.is-sun small{color:rgba(27,22,64,.72)}
/* L’anneau de réussite, les deux temps */
html.lq .perf-duo{display:flex;flex-direction:column;gap:8px;margin-top:8px}
html.lq .perf-ratebox{display:flex;align-items:center;gap:14px;padding:10px 14px 10px 10px;border-radius:18px;background:var(--accent-soft)}
html.lq .perf-rate{position:relative;flex:none;width:64px;height:64px}
html.lq .perf-rate svg{display:block;width:100%;height:100%;rotate:-90deg}
html.lq .perf-ring-bg{fill:none;stroke:#fff;stroke-width:8}
html.lq .perf-ring{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;stroke-dasharray:var(--c);stroke-dashoffset:var(--c);transition:stroke-dashoffset 1.1s cubic-bezier(.3,.7,.25,1) .25s}
html.lq .perf-card.is-in .perf-ring{stroke-dashoffset:var(--v)}
html.lq .perf-rate-n{position:absolute;inset:0;display:grid;place-items:center}
html.lq .perf-rate-n b{font:800 15px/1 var(--display);color:var(--accent-ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
html.lq .perf-rate-t{display:flex;flex-direction:column;gap:3px;min-width:0;margin:0}
html.lq .perf-rate-t b{font:700 15.5px/1.15 var(--display);color:var(--ink)}
html.lq .perf-rate-t small{color:var(--ink-2);font-size:13px;line-height:1.35}
html.lq .perf-times{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
html.lq .perf-times>div{display:flex;flex-direction:column;gap:5px;min-width:0;padding:10px 12px;border:2px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 3px 0 var(--lip)}
html.lq .perf-times small{font:700 11.5px/1.2 var(--display);color:var(--ink-3)}
html.lq .perf-times b{font:800 19px/1 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
/* Les blocs : un titre, de l’air, aucun trait */
html.lq .perf-block{margin-top:18px}
html.lq .perf-block h3{margin:0 2px 8px;font:700 13.5px/1.2 var(--display);letter-spacing:-.005em;color:var(--ink-2)}
/* Les dernières parties : une scène violette quadrillée, une barre par partie */
html.lq .perf-chart{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:stretch;gap:6px;height:118px;padding:22px 12px 14px;border-radius:18px;background:var(--deep);box-shadow:0 4px 0 #3A22B0}
html.lq .perf-chart::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(200px 120px at 90% 0%,rgba(255,216,107,.26),transparent 70%),linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/22px 22px}
html.lq .perf-bar{position:relative;flex:1 1 0;max-width:40px;min-width:0;margin:0 auto;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
html.lq .perf-bar i{position:absolute;left:0;right:0;bottom:0;height:var(--h);border-radius:9px 9px 4px 4px;background:rgba(255,255,255,.62);transform:scaleY(0);transform-origin:bottom;
  transition:transform .6s cubic-bezier(.3,.7,.3,1.25) calc(.15s + var(--i,0) * .05s),background-color .2s}
html.lq .perf-card.is-in .perf-bar i{transform:scaleY(1)}
html.lq .perf-bar.is-best i{background:var(--sun)}
html.lq .perf-bar.is-on i{background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
html.lq .perf-bar.is-best.is-on i{background:var(--sun-hi)}
html.lq .perf-bar::after{content:"";position:absolute;left:50%;bottom:-10px;width:5px;height:5px;border-radius:50%;background:var(--mint);translate:-50% 0;opacity:0;transition:opacity .2s}
html.lq .perf-bar.is-on::after{opacity:1}
html.lq .perf-bar.is-poke i{animation:perfPoke .42s cubic-bezier(.3,.7,.3,1.4)}
html.lq .perf-bar em{position:absolute;left:50%;bottom:calc(var(--h) + 5px);translate:-50% 0;font:800 11px/1 var(--display);font-style:normal;color:var(--sun-hi);white-space:nowrap;opacity:0;transition:opacity .3s .7s}
html.lq .perf-card.is-in .perf-bar em{opacity:1}
html.lq .perf-chart.is-ghost .perf-bar{cursor:default}
html.lq .perf-chart.is-ghost .perf-bar i{background:rgba(255,255,255,.16)}
html.lq .perf-cap{margin:9px 2px 0;min-height:1.4em;color:var(--ink-3);font-size:12.5px;line-height:1.4}
@keyframes perfPoke{0%{transform:scaleY(1)}40%{transform:scaleY(1.1) scaleX(.9)}70%{transform:scaleY(.96)}100%{transform:none}}
/* Par niveau */
html.lq .perf-lv{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none}
html.lq .perf-lv li{display:grid;grid-template-columns:66px minmax(0,1fr) 46px;align-items:center;gap:10px}
html.lq .perf-lv b{font:700 13.5px/1.2 var(--display);color:var(--ink)}
html.lq .perf-lvbar{display:block;height:10px;border-radius:99px;background:var(--line-2);overflow:hidden}
html.lq .perf-lvbar i{display:block;width:var(--w);height:100%;border-radius:inherit;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.3,.7,.25,1) calc(.3s + var(--i,0) * .08s)}
html.lq .perf-card.is-in .perf-lvbar i{transform:scaleX(1)}
html.lq .perf-lv .is-m .perf-lvbar i{background:var(--warn)}
html.lq .perf-lv .is-d .perf-lvbar i{background:var(--danger)}
html.lq .perf-lv em{font:700 12.5px/1 var(--mono);font-style:normal;color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums}
/* Podiums entre amis */
html.lq .perf-pods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
html.lq .perf-pods span{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:10px 6px 9px;border:2px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 3px 0 var(--lip)}
html.lq .perf-pods i{font-style:normal;font-size:24px;line-height:1.05;text-shadow:0 2px 0 rgba(27,22,64,.16)}
html.lq .perf-pods b{font:800 20px/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
html.lq .perf-pods small{font:700 11px/1.2 var(--display);color:var(--ink-3);white-space:nowrap}
html.lq .perf-card.is-in .perf-pods i{animation:lqStkPop .5s cubic-bezier(.3,.7,.3,1.35) calc(.3s + var(--i,0) * .08s) both}
html.lq .perf-note{margin:8px 2px 0;color:var(--ink-3);font-size:12.5px;line-height:1.4}
/* L’historique */
html.lq .perf-hist{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
html.lq .perf-hist li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px 8px 8px;border-radius:15px;background:var(--accent-soft)}
html.lq .perf-card.is-in .perf-hist li{animation:dbColIn .34s cubic-bezier(.2,.8,.3,1.2) calc(.25s + var(--i,0) * .06s) both}
html.lq .perf-rk{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:#fff;box-shadow:0 2px 0 var(--lip);font:800 12.5px/1 var(--display);color:var(--accent-ink)}
html.lq .perf-rk.is-medal{font-size:19px}
html.lq .perf-g{min-width:0}
html.lq .perf-g b{display:block;font:700 13.5px/1.25 var(--display);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.lq .perf-g small{display:block;margin-top:2px;color:var(--ink-3);font-size:12px;line-height:1.3}
html.lq .perf-hist em{padding:3px 9px;border-radius:99px;background:var(--sun);box-shadow:0 2px 0 var(--sun-lip);color:#1B1640;font:800 12.5px/1.2 var(--display);font-style:normal;white-space:nowrap}
/* L’arrivée : les tuiles se posent, une après l’autre */
html.lq .perf-kpi,html.lq .perf-ratebox,html.lq .perf-times>div{transition:opacity .35s ease calc(var(--i,0) * .06s),transform .5s cubic-bezier(.3,.7,.3,1.3) calc(var(--i,0) * .06s)}
html.lq .perf-card:not(.is-in) .perf-kpi,html.lq .perf-card:not(.is-in) .perf-ratebox,html.lq .perf-card:not(.is-in) .perf-times>div{opacity:0;transform:translateY(10px) scale(.97)}
@media (min-width:560px){
  html.lq .perf-duo{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
}
/* Le pseudo, choisi dès l’onboarding : la salle le montre au lieu de le redemander (« Ton pseudo : Léa · Changer »). */
html.lq .jeu-me{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;border:2px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 3px 0 var(--lip);animation:dbColIn .3s cubic-bezier(.2,.8,.3,1.2) both}
html.lq .jeu-me .jeu-av{width:40px;height:40px;font-size:17px;rotate:-4deg}
html.lq .jeu-me-t{display:flex;flex:1;flex-direction:column;gap:3px;min-width:0}
html.lq .jeu-me-t small{overflow:hidden;color:var(--ink-3);font-size:12px;font-weight:600;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
html.lq .jeu-me-t b{overflow:hidden;font:700 16.5px/1.15 var(--display);color:var(--ink);text-overflow:ellipsis;white-space:nowrap}
html.lq .jeu-me-edit{flex:none;min-height:38px;padding:0 15px;border:0;border-radius:99px;background:var(--accent-soft);color:var(--accent-ink);font:700 13.5px/1 var(--display);cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .12s var(--press),background-color .2s}
html.lq .jeu-me-edit:active{transform:scale(.94)}
html.lq .jeu-me-field{animation:dbColIn .3s cubic-bezier(.2,.8,.3,1.2) both}
@media (max-width:360px){
  html.lq .jeu-me{gap:10px;padding:8px 8px 8px 10px}
  html.lq .jeu-me .jeu-av{width:34px;height:34px;font-size:15px}
  html.lq .jeu-me-edit{min-height:36px;padding:0 12px;font-size:13px}
}
html.lq #onboarding .ob-field-opt{margin-left:6px;font-size:12px;font-weight:600;opacity:.72}
@media (prefers-reduced-motion:reduce){html.lq .jeu-me,html.lq .jeu-me-field{animation:none!important}}
html[data-motion="reduce"].lq .jeu-me,html[data-motion="reduce"].lq .jeu-me-field{animation:none!important}
@media (prefers-reduced-motion:reduce){
  html.lq .perf-card *,html.lq .perf-card *::after{animation:none!important;transition:none!important}
}
html[data-motion="reduce"].lq .perf-card *,html[data-motion="reduce"].lq .perf-card *::after,html.lq .perf-card.is-static *,html.lq .perf-card.is-static *::after{animation:none!important;transition:none!important}

/* ---------- 47. Retours du 31 octobre, 8 h 37 ---------- */
/* 47a. Réf 1 et 3 : les feuilles de Mon compte (Confort de lecture, Rappel quotidien… toutes celles de la page) passaient sous la barre
   d’onglets sur iPhone : « Réduire les animations » et les heures du rappel étaient coupés, collés au bord. Le temps d’une feuille, la
   page passe devant la barre (le voile la couvre aussi), et la feuille garde de l’air en bas. */
html.lq #app:has(#scr-compte .plus-details[open])>.stage{z-index:40}
html.lq #scr-compte .plus-details-body{padding-bottom:calc(var(--safe-bottom) + 26px)!important}

/* 47b. Réf 4 et 11 : les retours en haut à gauche se voient : une pastille blanche en relief, la flèche dans un rond violet, et le nom
   de la page où l’on revient. Quand la page défile, le nom se replie et le rond reste. */
html.lq #app .screen>.home-back{isolation:isolate;padding-right:34px;gap:10px;transition:padding .22s var(--spring-ios,ease)}
html.lq #scr-sgbd>.home-back{margin-bottom:40px}
html.lq #app .screen>.home-back::before{content:"";position:absolute;z-index:-1;top:calc(var(--safe-top) + 3px);bottom:3px;left:12px;right:12px;
  border:2px solid var(--line);border-radius:99px;background:#fff;box-shadow:0 3px 0 var(--lip);transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq #app .screen>.home-back svg,html.lq #scr-lesson .navbar .back svg{
  box-sizing:content-box;width:8px;height:14px;padding:8px 11px 8px 10px;border:0!important;border-radius:50%;
  background:var(--accent)!important;color:#fff;box-shadow:0 2px 0 var(--accent-lip)!important}
html.lq #app .screen>.home-back span{color:var(--accent-ink);font:700 15.5px/1.1 var(--display)!important;letter-spacing:-.01em;max-width:150px;
  transition:max-width .22s var(--spring-ios,ease),opacity .16s ease,margin .22s var(--spring-ios,ease)}
html.lq #app .screen>.home-back:active::before{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
html.lq #app .screen>.home-back:active>*{transform:translateY(3px)}
html.lq #app .screen>.home-back:active svg{box-shadow:0 0 0 var(--accent-lip)!important}
html.lq #app .screen.p-scrolled:not(.ent-focus-mode)>.home-back{padding-right:16px}
html.lq #app .screen.p-scrolled:not(.ent-focus-mode)>.home-back span{max-width:0;margin-left:-9px;opacity:0}
/* Le retour d’une leçon ou d’un défi : la même pastille */
html.lq #scr-lesson .navbar .back{gap:9px;padding:3px 14px 3px 3px!important;border:2px solid var(--line)!important;border-radius:99px!important;
  background:#fff!important;box-shadow:0 3px 0 var(--lip)!important;transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq #scr-lesson .navbar .back:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)!important}
html.lq #scr-lesson .navbar .back:active svg{transform:none;box-shadow:0 0 0 var(--accent-lip)!important}
html.lq #scr-lesson .navbar #back-label{font:700 15.5px/1.1 var(--display);color:var(--accent-ink)}

/* 47c. Réf 5 : « 2 activités à replacer » dans la DA du site : carte blanche en relief, autocollant du calendrier et sa pastille, les
   séances passées en étiquette jaune soleil, la flèche dans un rond violet. */
html.lq #home-hero .journey-planning{border:2px solid var(--line)!important;background:#fff!important;box-shadow:0 4px 0 var(--lip)!important}
html.lq #home-hero .journey-planning:active{transform:translateY(4px);box-shadow:0 0 0 var(--lip)!important}
html.lq #home-hero .jp-stk{position:relative;flex:none;width:52px;height:52px;rotate:-6deg;animation:lqStkPop .55s var(--pop) .1s both}
html.lq #home-hero .jp-stk svg{display:block;width:100%;height:100%}
html.lq #home-hero .jp-badge{position:absolute;top:-6px;right:-9px;min-width:23px;height:23px;padding:0 6px;box-sizing:border-box;border:2px solid #fff;border-radius:99px;
  background:#FF6B6B;color:#fff;font:800 12px/19px var(--display);font-style:normal;text-align:center;box-shadow:0 2px 0 rgba(27,22,64,.25);rotate:8deg;
  animation:jpBadge 2.8s ease-in-out 1.2s infinite}
@keyframes jpBadge{0%,72%,100%{transform:none}80%{transform:scale(1.18) rotate(-8deg)}88%{transform:scale(.95) rotate(4deg)}}
html.lq #home-hero .jp-copy small{align-self:flex-start;padding:3px 10px;border-radius:99px;background:var(--sun);color:#1B1640!important;font:800 12.5px/1.3 var(--display)!important;
  box-shadow:0 2px 0 var(--sun-lip)}
html.lq #home-hero .jp-chev{background:var(--accent)!important;border:0!important;color:#fff!important;box-shadow:0 3px 0 var(--accent-lip)!important;transition:transform .2s var(--spring-ios,ease)}
html.lq #home-hero .journey-planning:hover .jp-chev{transform:translateX(3px)}

/* 47d. Réf 8 : le tableau de résultat comme le labo de la vitrine : carte blanche en relief, « ✓ 6 lignes » en pastille menthe, en-tête
   en police code, discret ; le texte en police de l’app, les nombres en code, gras, à droite ; de fines lignes, sans rayures. */
html.lq .table-scroll>.table-wrap{background:#fff!important;border:2px solid var(--line)!important;border-radius:18px!important;box-shadow:0 3px 0 var(--lip)!important}
html.lq .table-scroll>.table-wrap thead th{background:#FBFAFF!important;color:#8E8AA8!important;font:700 11.5px/1.25 var(--mono)!important;letter-spacing:0!important;
  text-transform:none!important;text-align:left;border-bottom:2px solid var(--line-2)!important}
html.lq .table-scroll>.table-wrap tbody td{font:600 13.5px/1.35 var(--ui);color:var(--ink);text-align:left;border-bottom:1px solid var(--line-2)!important}
html.lq .table-scroll>.table-wrap tbody tr:nth-child(even) td{background:transparent}
html.lq .table-scroll>.table-wrap tbody tr:last-child td{border-bottom:0!important}
html.lq .table-scroll>.table-wrap tbody td.num{font:800 13.5px/1.35 var(--mono);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
html.lq .table-scroll>.table-wrap tbody td.null{color:#A9A4C7;font:italic 600 12.5px/1.35 var(--ui);opacity:1}
html.lq .table-scroll>.table-wrap th.rn{background:#FBFAFF!important;color:#A9A4C7!important;font:700 11px/1 var(--mono)!important;border-right:1px solid var(--line-2)!important}
@media (hover:hover) and (pointer:fine){html.lq .table-scroll>.table-wrap tbody tr:hover td{background:var(--accent-soft)}}
html.lq .result-meta .rm-n{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:99px;background:#E3F6EC;color:#14955A;font:700 12.5px/1 var(--ui);white-space:nowrap}
html.lq .result-meta .rm-n svg{width:13px;height:13px;flex:none}
html.lq .result-meta .rm-n+span{display:none}
html.lq .result-meta{flex-wrap:wrap;row-gap:6px}
html.lq .result-meta>span{white-space:nowrap}
html.lq .result-meta .rm-n~span{color:#8E8AA8}

/* 47e. Réf 7 : Exécuter répond : l’anneau tourne pendant l’exécution, puis le bouton passe un instant au vert menthe (« ✓ 6 lignes »,
   qui saute) ou au corail (« Erreur », qui secoue). L’écran glisse ensuite jusqu’au résultat. */
html.lq .btn-run.is-ok{background:var(--mint)!important;color:#0D5B3B!important;box-shadow:0 4px 0 #6FD6A4!important;animation:runOk .45s var(--pop)}
html.lq .btn-run.is-ko{background:#FF8E8E!important;color:#5C0A14!important;box-shadow:0 4px 0 #D85C68!important;animation:runKo .42s ease}
html.lq .btn-run .run-fb-ico{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.75);font:900 15px/1 var(--display);animation:lqStkPop .4s var(--pop) both}
html.lq .btn-run .run-fb-ico svg{width:15px;height:15px}
@keyframes runOk{0%{transform:scale(.96)}55%{transform:scale(1.03)}100%{transform:none}}
@keyframes runKo{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

/* 47f. Réf 9 : les tables d’un projet, sans autocollant. Repliée : le nom et le nombre de lignes. Dépliée : la description, puis les
   actions (SELECT en grand, restaurer, supprimer), puis les colonnes. */
html.lq #scr-console .console-schema-panel .db-tdetail{display:flex;flex-direction:column;gap:10px;padding:0 10px 10px;animation:dbColIn .3s cubic-bezier(.2,.8,.3,1.2) both}
html.lq #scr-console .console-schema-panel .db-tdetail>.db-tnote{margin:0!important}
html.lq #scr-console .console-schema-panel .db-tdetail>.db-tacts{display:flex;align-items:center;width:100%;margin:0;padding:0!important;gap:8px;justify-content:flex-start}
html.lq #scr-console .console-schema-panel .db-tdetail .tb:not(.reset-table):not(.drop-table){flex:1;justify-content:center;min-height:42px;font-size:14px}
html.lq #scr-console .console-schema-panel .db-tdetail .tb.reset-table,html.lq #scr-console .console-schema-panel .db-tdetail .tb.drop-table{width:42px;min-width:42px;height:42px}
html.lq #scr-console .console-schema-panel .db-tdetail>.db-cols{margin:0!important}
html.lq #scr-console .console-schema-panel .db-tmain{padding:6px 4px!important}

/* 47g. Réf 10 : une croix en haut à droite des feuilles de question, de saisie et d’import, comme sur les autres feuilles */
html.lq .lq-x{position:absolute;z-index:3;top:12px;right:12px;width:40px;height:40px;box-sizing:border-box;padding:0;display:grid;place-items:center;
  border:2px solid var(--line);border-radius:50%;background:#fff;color:var(--ink-2);box-shadow:0 3px 0 var(--lip);cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq .lq-x svg{width:17px;height:17px}
html.lq .lq-x:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
html.lq .lq-ask-sheet{position:relative}
html.lq .lq-ask-cap{padding-right:62px!important}
html.lq .imp-sheet>h3,html.lq .imp-sheet>.imp-sub{padding-right:52px}

/* 47h. Réf 12 et 13 : la journée libre a son autocollant (une tasse qui fume, qui flotte, deux étincelles), le jour passé sa lune ;
   « Démarrer la séance » a sa flèche qui avance. */
html.lq .dp-pause .dp-stk{position:relative;display:block;width:78px;height:78px;margin:2px 0 6px;rotate:-6deg;animation:dpFloat 4.2s ease-in-out infinite}
html.lq .dp-pause .dp-stk svg{display:block;width:100%;height:100%}
html.lq .dp-pause .dp-stk .stk-steam{animation:dpSteam 2.6s ease-in-out infinite}
html.lq .dp-pause .dp-stk .stk-twk{transform-box:fill-box;transform-origin:50% 50%;animation:dpTwk 2.4s ease-in-out infinite}
html.lq .dp-pause .dp-sp{position:absolute;width:12px;height:12px;background:var(--sun);pointer-events:none;-webkit-mask:var(--mstk-star) center/contain no-repeat;mask:var(--mstk-star) center/contain no-repeat;animation:lqTwinkle 3s ease-in-out infinite}
html.lq .dp-pause .dp-sp.s1{left:-14px;top:18px}
html.lq .dp-pause .dp-sp.s2{right:-12px;top:4px;width:9px;height:9px;background:var(--accent);animation-delay:-1.4s}
html.lq .dp-pause b{font:700 17px/1.2 var(--display)!important;color:var(--ink)!important;letter-spacing:-.01em}
html.lq .dp-pause small{font-size:13.5px!important;color:var(--ink-2)!important}
html.lq .dp-pause.is-past .dp-stk{width:64px;height:64px;rotate:4deg}
@keyframes dpFloat{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes dpSteam{0%,100%{opacity:.55;transform:translateY(2px)}50%{opacity:1;transform:translateY(-2px)}}
@keyframes dpTwk{0%,100%{transform:scale(.8) rotate(0deg)}50%{transform:scale(1.15) rotate(20deg)}}
html.lq #scr-planning .dp-go{display:flex!important;align-items:center;justify-content:center;gap:10px}
html.lq .dp-go .dp-go-arr{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.2);animation:dpArrow 1.5s ease-in-out infinite}
html.lq .dp-go .dp-go-arr svg{width:16px;height:16px}
html.lq .dp-go:active .dp-go-arr{animation:none;transform:translateX(5px)}
@keyframes dpArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

/* 47i. Réf 6 : les pages légales s’ouvrent sur le site ; la ligne le dit (une flèche qui sort) */
html.lq a.acc-row{color:inherit;text-decoration:none}
html.lq #scr-compte .acc-row .acc-ext{flex:none;display:grid;place-items:center;width:32px;height:32px;margin-left:auto;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink)}
html.lq #scr-compte .acc-row .acc-ext svg{width:16px;height:16px}

/* 47j. Mouvement réduit */
@media (prefers-reduced-motion:reduce){
  html.lq #home-hero .jp-stk,html.lq #home-hero .jp-badge,html.lq .btn-run.is-ok,html.lq .btn-run.is-ko,html.lq .btn-run .run-fb-ico,
  html.lq #scr-console .console-schema-panel .db-tdetail,html.lq .dp-pause .dp-stk,html.lq .dp-pause .dp-stk .stk-steam,html.lq .dp-pause .dp-stk .stk-twk,
  html.lq .dp-pause .dp-sp,html.lq .dp-go .dp-go-arr{animation:none!important}
  html.lq #app .screen>.home-back,html.lq #app .screen>.home-back span{transition:none}
}
html[data-motion="reduce"].lq #home-hero .jp-stk,html[data-motion="reduce"].lq #home-hero .jp-badge,html[data-motion="reduce"].lq .btn-run.is-ok,
html[data-motion="reduce"].lq .btn-run.is-ko,html[data-motion="reduce"].lq .btn-run .run-fb-ico,html[data-motion="reduce"].lq #scr-console .console-schema-panel .db-tdetail,
html[data-motion="reduce"].lq .dp-pause .dp-stk,html[data-motion="reduce"].lq .dp-pause .dp-stk .stk-steam,html[data-motion="reduce"].lq .dp-pause .dp-stk .stk-twk,
html[data-motion="reduce"].lq .dp-pause .dp-sp,html[data-motion="reduce"].lq .dp-go .dp-go-arr{animation:none!important}
/* Dans un cours ou un défi, la justesse se lit sur la carte « Correct » ou « Pas encore » : le nombre de lignes reste neutre. */
html.lq #scr-lesson .result-meta .rm-n{background:var(--accent-soft);color:var(--accent-ink)}
html.lq #scr-lesson .result-meta .rm-n svg{display:none}

/* ==========================================================================
   48. Retours de 9 h 24 (31 octobre)
   ========================================================================== */
/* Les fonds des zones Safari sont centralisés dans safari-surface.css. */

/* 48b. Réf 2 : « améliorer le tu es ici et l’animation ». La leçon en cours du chemin se voit d’un coup d’œil : sa pastille passe au
   jaune (la couleur des boutons « Commencer »), cerclée de violet et soulignée de sa lèvre ; deux ondes partent d’elle à tour de rôle,
   comme un repère sur une carte. « Tu es ici » devient une bulle violette avec une épingle jaune, accrochée à la pastille par sa
   pointe, qui flotte doucement. À l’ouverture du module, la bulle arrive juste après sa pastille ; quand on vient de valider la leçon
   d’avant, la pastille d’avant se remplit d’abord, puis le repère « arrive » sur la suivante. Seulement transform et opacity (rien
   n’est redessiné à chaque image) ; rien ne bouge avec « Réduire les animations ». */
html.lq #scr-learn #modules .home-module .row.current .lz-num{
  --lipc:var(--m-lip);width:66px!important;height:66px!important;margin-left:calc(var(--zz,0px) - 2px)!important;
  background:var(--sun)!important;border:4px solid #fff!important;color:#1B1640!important;font-size:23px!important;
  box-shadow:0 0 0 3px var(--m),0 6px 0 3px var(--m-lip)!important}
html.lq #scr-learn #modules .home-module .row.current:active .lz-num{transform:translateY(5px)!important;box-shadow:0 0 0 3px var(--m),0 1px 0 3px var(--m-lip)!important}
html.lq #scr-learn #modules .home-module .row.current .lz-num::before,
html.lq #scr-learn #modules .home-module .row.current .lz-num::after{
  content:'';position:absolute;inset:-9px;margin:0;width:auto;height:auto;border-radius:50%;border:3px solid var(--m);background:none;
  -webkit-mask:none;mask:none;opacity:0;pointer-events:none;animation:lqSonar 2.8s cubic-bezier(.2,.6,.35,1) infinite}
html.lq #scr-learn #modules .home-module .row.current .lz-num::after{animation-delay:1.4s}
@keyframes lqSonar{0%{transform:scale(.9);opacity:.6}75%,100%{transform:scale(1.6);opacity:0}}
html.lq #scr-learn #modules .home-module .row .catalog-lesson-state.next,
html.lq #course-search-results .row .catalog-lesson-state.next{
  position:relative;display:inline-flex;align-items:center;gap:6px;margin:0 0 8px 7px;padding:6px 12px 6px 9px;border-radius:12px;
  background:var(--m);color:#fff;font:800 12.5px/1.15 var(--display);letter-spacing:.01em;box-shadow:0 3px 0 var(--m-lip);transform-origin:0 100%}
html.lq #scr-learn #modules .home-module .row .catalog-lesson-state.next::before,
html.lq #course-search-results .row .catalog-lesson-state.next::before{content:'';flex:none;width:14px;height:14px;background:var(--sun);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.8a7.6 7.6 0 0 0-7.6 7.6c0 5.5 6.3 12.1 7 12.8a.85.85 0 0 0 1.2 0c.7-.7 7-7.3 7-12.8A7.6 7.6 0 0 0 12 1.8Zm0 10.5a2.9 2.9 0 1 1 0-5.8 2.9 2.9 0 0 1 0 5.8Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.8a7.6 7.6 0 0 0-7.6 7.6c0 5.5 6.3 12.1 7 12.8a.85.85 0 0 0 1.2 0c.7-.7 7-7.3 7-12.8A7.6 7.6 0 0 0 12 1.8Zm0 10.5a2.9 2.9 0 1 1 0-5.8 2.9 2.9 0 0 1 0 5.8Z'/%3E%3C/svg%3E") center/contain no-repeat}
/* La pointe de la bulle, vers la pastille */
html.lq #scr-learn #modules .home-module .row .catalog-lesson-state.next::after,
html.lq #course-search-results .row .catalog-lesson-state.next::after{content:'';position:absolute;left:-7px;bottom:5px;width:9px;height:14px;
  background:var(--m);-webkit-clip-path:polygon(0 72%,100% 0,100% 100%);clip-path:polygon(0 72%,100% 0,100% 100%)}
html.lq #scr-learn #modules .home-module .row.current .catalog-lesson-state.next{animation:lqHereBob 2.8s ease-in-out infinite}
@keyframes lqHereBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes lqHerePop{0%{opacity:0;transform:translate(-10px,6px) scale(.5)}60%{opacity:1;transform:translate(0,-3px) scale(1.06)}100%{opacity:1;transform:none}}
/* À l’ouverture du module : la pastille, puis la bulle */
html.lq #scr-learn #modules .home-module>.list.lq-in>.row.current .catalog-lesson-state.next{
  animation:lqHerePop .55s var(--pop) both,lqHereBob 2.8s ease-in-out infinite!important;
  animation-delay:calc(min(var(--k,0),12) * 35ms + 280ms),calc(min(var(--k,0),12) * 35ms + 900ms)!important}
/* La leçon d’avant vient d’être validée : le repère arrive une fois sa pastille remplie */
html.lq #scr-learn #modules .home-module .row.current.lq-arrive .lz-num{animation:lqNodeIn .55s var(--pop) 1.2s both!important}
html.lq #scr-learn #modules .home-module>.list>.row.current.lq-arrive .catalog-lesson-state.next{
  animation:lqHerePop .55s var(--pop) 1.45s both,lqHereBob 2.8s ease-in-out 2.1s infinite!important}
html.lq #scr-learn #modules .home-module .row.current.lq-arrive .lz-num::before{animation-delay:1.7s}
html.lq #scr-learn #modules .home-module .row.current.lq-arrive .lz-num::after{animation-delay:3.1s}
@media (max-width:360px){
  html.lq #scr-learn #modules .home-module .row.current .lz-num{width:58px!important;height:58px!important;font-size:20px!important}
}
@media (prefers-reduced-motion:reduce){
  html.lq #scr-learn #modules .home-module .row.current .lz-num::before,html.lq #scr-learn #modules .home-module .row.current .lz-num::after{animation:none!important;opacity:0!important}
  html.lq #scr-learn #modules .home-module .row.current .catalog-lesson-state.next,
  html.lq #scr-learn #modules .home-module .row.current.lq-arrive .lz-num{animation:none!important}
}
html[data-motion="reduce"] #scr-learn #modules .home-module .row.current .lz-num::before,
html[data-motion="reduce"] #scr-learn #modules .home-module .row.current .lz-num::after{animation:none!important;opacity:0!important}
html[data-motion="reduce"] #scr-learn #modules .home-module .row.current .catalog-lesson-state.next,
html[data-motion="reduce"] #scr-learn #modules .home-module .row.current.lq-arrive .lz-num{animation:none!important}

/* 48c. Réf 3 : « fait attention à la responsivité ». « Un code reçu ? » était plus étroit que les autres cartes de la page : sa carte
   gardait la marge de l’ancienne mise en page (14 px) en plus de celle de son bloc. Toutes les cartes de Défis ont maintenant la même
   largeur et le même écart, de 320 px à la tablette. */
html.lq #defis-join>.def-join{margin:0!important}

/* 48d. Réf 4 : « mettre aussi le lien avec les personnes qu’on a joué, par exemple un podium animé ». Dans « Tes performances », le
   bloc « Entre amis » : le podium de la dernière partie (la scène violette de la fin de partie ; les marches montent, les médailles
   tombent, les pseudos arrivent quand le tableau entre à l’écran), les places gagnées, les amis affrontés avec le score entre vous
   (vert quand tu mènes, pêche quand tu es à rattraper), et « Les redéfier », qui prépare la salle « Entre amis ». */
html.lq .perf-pod-cap{margin:0 2px;color:var(--ink-2);font-size:13px;line-height:1.4}
html.lq .perf-pod-cap b{color:var(--ink);font-weight:700}
html.lq .perf-podium{margin:10px 0 0!important;padding:22px 10px 0}
/* Les médailles autocollantes (or, argent, bronze), au podium de fin de partie comme ici */
html.lq .jeu-podium .jeu-medal{position:relative;display:block;width:38px;height:38px;font-size:0!important;line-height:0;text-shadow:none}
html.lq .jeu-podium .jeu-medal svg{display:block;width:100%;height:100%}
html.lq .jeu-podium .jeu-step.is-1 .jeu-medal{width:44px;height:44px}
html.lq .perf-podium .jeu-medal{width:36px;height:36px}
html.lq .perf-podium .jeu-step.is-1 .jeu-medal{width:42px;height:42px}
html.lq .perf-podium .jeu-step.is-1 .jeu-medal::after{content:"";position:absolute;right:-12px;top:-4px;width:13px;height:13px;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.9 6 4.9 10 11 11-6.1 1-10.1 5-11 11-.9-6-4.9-10-11-11 6.1-1 10.1-5 11-11Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1c.9 6 4.9 10 11 11-6.1 1-10.1 5-11 11-.9-6-4.9-10-11-11 6.1-1 10.1-5 11-11Z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:lqTwinkle 2.6s ease-in-out infinite}
html.lq .perf-podium .jeu-step-av .jeu-av{width:40px;height:40px;font-size:16px}
html.lq .perf-podium .jeu-step.is-1 .jeu-step-av .jeu-av{width:48px;height:48px;font-size:20px}
html.lq .perf-podium .jeu-step.is-1>i{height:92px!important}
html.lq .perf-podium .jeu-step.is-2>i{height:66px!important}
html.lq .perf-podium .jeu-step.is-3>i{height:46px!important}
html.lq .perf-podium .jeu-step>i em{top:6px;font-size:22px}
html.lq .perf-podium .jeu-av.is-empty{background:rgba(255,255,255,.14)!important;border:2px solid rgba(255,255,255,.45)!important;color:rgba(255,255,255,.85)!important;box-shadow:none!important}
html.lq .perf-podium.is-ghost .jeu-step{opacity:.6}
/* Le podium attend que le tableau arrive à l’écran ; puis les marches, les médailles, les joueurs, dans l’ordre des places */
html.lq .perf-friends:not(.is-in) .perf-podium :is(.jeu-step>i,.jeu-medal,.jeu-step-av,.jeu-step-n,.jeu-step>small){animation-play-state:paused!important}
html.lq .perf-podium .jeu-step-av{animation:perfAvDrop .55s var(--pop) .6s both}
html.lq .perf-podium .jeu-step-n,html.lq .perf-podium .jeu-step>small{animation:perfFade .4s ease-out .75s both}
html.lq .perf-podium .jeu-step.is-2 .jeu-step-av{animation-delay:.78s}
html.lq .perf-podium .jeu-step.is-2 :is(.jeu-step-n),html.lq .perf-podium .jeu-step.is-2>small{animation-delay:.92s}
html.lq .perf-podium .jeu-step.is-3 .jeu-step-av{animation-delay:.94s}
html.lq .perf-podium .jeu-step.is-3 :is(.jeu-step-n),html.lq .perf-podium .jeu-step.is-3>small{animation-delay:1.08s}
@keyframes perfAvDrop{0%{opacity:0;transform:translateY(-26px) scale(.6)}60%{opacity:1;transform:translateY(3px) scale(1.06)}100%{opacity:1;transform:none}}
@keyframes perfFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
html.lq .perf-pod-me{margin:8px 2px 0;font:700 13px/1.3 var(--display);color:var(--accent-ink)}
html.lq .perf-friends .perf-pods{margin-top:10px}
html.lq .perf-pods i{font-size:0!important;line-height:0!important;text-shadow:none!important}
html.lq .perf-pods i svg{display:block;width:30px;height:30px}
html.lq .perf-rk.is-medal svg{display:block;width:30px;height:30px}
html.lq .perf-friends h4{margin:16px 2px 8px;font:700 13px/1.2 var(--display);color:var(--ink-2)}
html.lq .perf-mates{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
html.lq .perf-mates li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px 8px 8px;border-radius:15px;background:var(--accent-soft)}
html.lq .perf-mates .jeu-av{width:36px;height:36px;font-size:15px}
html.lq .perf-mate{display:flex;flex-direction:column;gap:2px;min-width:0}
html.lq .perf-mate b{overflow:hidden;font:700 14.5px/1.2 var(--display);color:var(--ink);text-overflow:ellipsis;white-space:nowrap}
html.lq .perf-mate small{color:var(--ink-3);font-size:12px;line-height:1.3}
html.lq .perf-h2h{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
html.lq .perf-h2h em{display:inline-flex;align-items:center;gap:3px;padding:3px 10px;border-radius:99px;background:#fff;box-shadow:0 2px 0 var(--lip);color:var(--ink);font:800 13.5px/1.2 var(--display);font-style:normal;font-variant-numeric:tabular-nums}
html.lq .perf-h2h em i{font-style:normal;opacity:.5}
html.lq .perf-h2h small{color:var(--ink-3);font:700 11px/1.2 var(--display);white-space:nowrap}
html.lq .perf-mates li.is-up .perf-h2h em{background:var(--mint);box-shadow:0 2px 0 #5FC99A;color:#0E4A2E}
html.lq .perf-mates li.is-up .perf-h2h small{color:#1E7A4F}
html.lq .perf-mates li.is-down .perf-h2h em{background:#FFE1D1;box-shadow:0 2px 0 #F4A86A;color:#8A3A12}
html.lq .perf-mates li.is-down .perf-h2h small{color:#A24A1E}
html.lq .perf-friends.is-in .perf-mates li{animation:dbColIn .34s cubic-bezier(.2,.8,.3,1.2) calc(.9s + var(--i,0) * .06s) both}
html.lq .perf-rematch{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:50px;margin-top:12px;padding:0 16px;border:2px solid var(--line);border-radius:16px;
  background:#fff;box-shadow:0 4px 0 var(--lip);color:var(--accent-ink);font:700 15px/1.2 var(--display);cursor:pointer;-webkit-appearance:none;appearance:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq .perf-rematch svg{flex:none;width:20px;height:20px}
html.lq .perf-rematch svg:last-child{width:16px;height:16px;opacity:.7}
html.lq .perf-rematch:active{transform:translateY(4px);box-shadow:0 0 0 var(--lip)}
html.lq .room-go.is-nudge{animation:perfNudge .9s var(--pop) .35s}
@keyframes perfNudge{0%,100%{transform:none}30%{transform:scale(1.05)}55%{transform:scale(.98)}75%{transform:scale(1.02)}}
@media (max-width:360px){
  html.lq .perf-podium{padding:20px 6px 0}
  html.lq .perf-podium .jeu-step-n{font-size:12.5px!important}
  html.lq .perf-podium .jeu-step-av .jeu-av{width:36px;height:36px;font-size:15px}
  html.lq .perf-podium .jeu-step.is-1 .jeu-step-av .jeu-av{width:44px;height:44px;font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  html.lq .perf-podium *,html.lq .perf-podium *::after,html.lq .room-go.is-nudge{animation:none!important}
}
html[data-motion="reduce"] .perf-podium *,html[data-motion="reduce"] .perf-podium *::after,html[data-motion="reduce"] .room-go.is-nudge{animation:none!important}

/* ---------- 48. Retours du 31 octobre, 15 h 16 ---------- */
/* 48a. Réf. 4 : la même largeur de carte partout (Elisa : « faire en sorte que tous les cadres aient la même largeur, ici ou ailleurs ») :
   20 px de marge, celle de l’accueil, de Pratiquer et de Mon compte, alignée sur les grands titres. Défis, Entretien, Notes, Cartes mémo,
   Planning, Console et SGBD avaient 14, 16 ou 18 px. Sur ordinateur, la place de la barre de défilement est gardée des deux côtés : les
   cartes restent au milieu. */
html.lq #app #defis-room,html.lq #app #defis-perf,html.lq #app #defis-join,html.lq #app #defis-rules,
html.lq #app #scr-entretien .ent-hero,html.lq #app #scr-collection .coll-overview,html.lq #app #planning-body .pl-setup,
html.lq #app #planning-body>.plan-modules,html.lq #app #planning-body>.planning-progress{margin-left:var(--gut,20px)!important;margin-right:var(--gut,20px)!important}
html.lq #app #scr-entretien .ent-list,html.lq #app #notes-screen-body,html.lq #app #scr-collection #cards-grid,
html.lq #app #scr-console #console-home.proj-list,html.lq #app #sgbd-screen-body .sg-wrap{padding-left:var(--gut,20px)!important;padding-right:var(--gut,20px)!important}
/* Les pages d’une leçon et la salle de défi aussi (15 ou 16 px jusqu’ici), en dessous de 900 px (au-delà, 28 px) */
@media (max-width:899px){html.lq #app .lesson-wrap{padding-left:var(--gut,20px)!important;padding-right:var(--gut,20px)!important}}
@media (max-width:350px){html.lq #app{--gut:14px}}
html.lq .screen,html.lq .viz-body{scrollbar-gutter:stable both-edges}

/* 48b. Réf. 4 : dans « Comment on marque des points », la pastille se centre sur sa ligne entière (titre et explication), et non plus sur
   le titre seul, tout en haut. */
html.lq .room-rules li{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px}
html.lq .room-rules li b{grid-column:1;grid-row:1}
html.lq .room-rules li small{grid-column:1;grid-row:2}
html.lq .room-rules li span{grid-column:2;grid-row:1;align-self:center;justify-self:end}
html.lq .room-rules li:has(small) span{grid-row:1 / span 2}

/* 48c. Réf. 7 : « Exécution pas à pas » sans étapes à montrer, dans la DA de la vitrine : l’en-tête violet quadrillé des autres feuilles,
   un grand autocollant qui se pose, la phrase qui dit quoi faire, et le chemin d’un SELECT qui s’allume étape par étape. Un seul bouton,
   « Compris », en jaune soleil. */
html.lq .viz-none{display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 22px 12px;max-width:440px;margin:0 auto}
html.lq .viz-none-stk{display:block;width:84px;height:84px;margin-bottom:14px;rotate:-8deg;animation:lqStkPop .55s var(--pop) .05s both}
html.lq .viz-none-stk svg{display:block;width:100%;height:100%}
html.lq .viz-none h3{margin:0 0 8px;font:700 22px/1.2 var(--display)!important;letter-spacing:-.015em;color:var(--ink)}
html.lq .viz-none p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.5}
html.lq .viz-none p code,html.lq .viz-none-path code{padding:1px 6px;border-radius:7px;background:var(--accent-soft);color:var(--accent-ink);font:700 .9em var(--mono)}
html.lq .viz-none-path{display:flex;flex-wrap:nowrap;justify-content:center;gap:4px;margin:22px 0 4px;padding:0;list-style:none}
html.lq .viz-none-path li{position:relative;display:flex;align-items:center;gap:4px;flex:none}
html.lq .viz-none-path li+li::before{content:"";width:8px;height:2px;border-radius:2px;background:var(--line)}
html.lq .viz-none-path code{display:inline-block;padding:6px 8px;border:2px solid var(--line);border-radius:11px;background:#fff;box-shadow:0 3px 0 var(--lip);font-size:12px;white-space:nowrap;
  animation:vizNonePath 4.8s ease-in-out calc(.6s + var(--i,0) * .6s) infinite}
@keyframes vizNonePath{0%,8%{background:#fff;border-color:var(--line);color:var(--accent-ink);transform:none}
  12%,22%{background:var(--sun);border-color:#1B1640;color:#1B1640;transform:translateY(-3px)}30%,100%{background:#fff;border-color:var(--line);color:var(--accent-ink);transform:none}}
html.lq .viz.is-empty .viz-dots{display:none}
html.lq .viz.is-empty .viz-nav .prev{display:none!important}
@media (prefers-reduced-motion:reduce){html.lq .viz-none-stk,html.lq .viz-none-path code{animation:none}}
html[data-motion="reduce"] .viz-none-stk,html[data-motion="reduce"] .viz-none-path code{animation:none!important}

/* 48d. Réf. 9 : clavier ouvert (iPhone), la feuille ouverte se pose au-dessus du clavier (--kb, mesuré avec visualViewport) : le toucher
   d’« Enregistrer » tombe bien sur le bouton, et la feuille se ferme. */
html.lq #scr-compte .plus-details[open]{bottom:var(--kb,0px)!important;max-height:calc(100dvh - 72px - var(--kb,0px))!important}
html.lq .viz.on{bottom:var(--kb,0px)!important}

/* 48e. Top 5 de tous les joueurs (classement général), dans « Tes performances » : les médailles autocollantes, l’initiale de couleur, les
   points en gras ; ta ligne en jaune soleil ; « Signaler » discret sur les autres lignes. Les lignes arrivent l’une après l’autre. */
html.lq .perf-top{margin-top:16px;padding:14px 12px 12px;border:2px solid var(--line);border-radius:20px;background:linear-gradient(180deg,#FBF9FF,#fff 60%)}
html.lq .perf-top-h{display:flex;align-items:center;gap:8px;margin:0 2px 10px!important;color:var(--ink)!important;font-size:15px!important}
html.lq .perf-top-stk{flex:none;width:28px;height:28px;rotate:-8deg}
html.lq .perf-top-stk svg{display:block;width:100%;height:100%}
html.lq .perf-top-list{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
html.lq .perf-top-list li{display:grid;grid-template-columns:30px 34px minmax(0,1fr) auto 30px;align-items:center;gap:8px;min-height:50px;padding:6px 4px 6px 6px;border-radius:15px;background:var(--accent-soft)}
html.lq .perf-top-list li.is-me{grid-template-columns:30px 34px minmax(0,1fr) auto 4px;background:var(--sun);box-shadow:0 3px 0 var(--sun-lip)}
html.lq .perf-top-rk{display:grid;place-items:center;width:30px;height:30px;font:800 15px/1 var(--display);color:var(--ink-2)}
html.lq .perf-top-rk svg{display:block;width:30px;height:30px}
html.lq .perf-top-list li.is-r1 .perf-top-rk svg{animation:perfTopMedal 3.2s ease-in-out 1.4s infinite}
@keyframes perfTopMedal{0%,82%,100%{transform:none}88%{transform:rotate(-12deg) scale(1.12)}94%{transform:rotate(8deg)}}
html.lq .perf-top-list .jeu-av{width:34px;height:34px;font-size:15px;border-radius:50%;display:grid;place-items:center}
html.lq .perf-top-n{display:flex;flex-direction:column;gap:1px;min-width:0}
html.lq .perf-top-n b{overflow:hidden;font:700 14.5px/1.2 var(--display);color:var(--ink);text-overflow:ellipsis;white-space:nowrap}
html.lq .perf-top-n small i{font-style:normal;font-weight:800;color:#1B1640}
html.lq .perf-top-n>small{color:var(--ink-3);font-size:12px;line-height:1.25}
html.lq .perf-top-list em{font:800 15.5px/1 var(--display);font-style:normal;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
html.lq .perf-top-list em small{font:700 11.5px var(--display);color:var(--ink-3)}
html.lq .perf-top-list li.is-me em small,html.lq .perf-top-list li.is-me .perf-top-n>small{color:#5B4A00}
html.lq .perf-top-flag{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink-3);cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color .15s,color .15s,transform .12s var(--press)}
html.lq .perf-top-flag svg{width:16px;height:16px}
html.lq .perf-top-flag:hover{background:#fff;color:#C2410C}
html.lq .perf-top-flag:active{transform:scale(.88)}
html.lq .perf-top-list.is-wait li{background:linear-gradient(90deg,var(--accent-soft) 30%,#F4F1FF 50%,var(--accent-soft) 70%);background-size:300% 100%;animation:perfTopWait 1.4s linear infinite}
html.lq .perf-top-list.is-wait .perf-top-n b{display:block;width:60%;height:12px;border-radius:6px;background:rgba(106,77,244,.12)}
@keyframes perfTopWait{from{background-position:100% 0}to{background-position:0 0}}
html.lq .perf-top-me{margin:10px 4px 0;color:var(--ink-2);font-size:13.5px;line-height:1.4}
html.lq .perf-top-me b{font:800 14px var(--display);color:var(--accent-ink)}
html.lq .perf-top-msg{margin:2px 4px 4px;color:var(--ink-2);font-size:14px;line-height:1.45}
html.lq .perf-top-msg.is-warn{margin-bottom:10px;padding:10px 12px;border-radius:14px;background:#FFF1E6;color:#8A3A12}
html.lq .perf-top-note{margin:10px 4px 0;color:var(--ink-3);font-size:12px;line-height:1.45}
html.lq .perf-top-note button{padding:0;border:0;background:none;color:var(--accent-ink);font:700 12px var(--ui);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
html.lq .perf-top-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;margin-top:10px;border:2px solid var(--line);border-radius:14px;background:#fff;
  box-shadow:0 3px 0 var(--lip);color:var(--accent-ink);font:700 14.5px var(--display);cursor:pointer;transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq .perf-top-btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
html.lq .perf-card.is-in .perf-top-list li,html.lq .perf-top.is-in .perf-top-list li{animation:dbColIn .34s cubic-bezier(.2,.8,.3,1.2) calc(.25s + var(--i,0) * .06s) both}
html.lq .perf-top.is-in .perf-top-list.is-wait li,html.lq .perf-card.is-in .perf-top-list.is-wait li{animation:perfTopWait 1.4s linear infinite}
@media (max-width:350px){html.lq .perf-top-list li{grid-template-columns:26px 30px minmax(0,1fr) auto 28px;gap:6px}html.lq .perf-top-list .jeu-av{width:30px;height:30px}}
@media (prefers-reduced-motion:reduce){html.lq .perf-top *{animation:none!important}}
html[data-motion="reduce"] .perf-top *{animation:none!important}

/* ---------- 49. Retours du 31 octobre, 15 h 52 ---------- */
/* 49a. Réf. 1 : la salle d’attente. Les réglages de la partie en trois autocollants de même largeur (bord lavande, relief en bas,
   police de titre) : le niveau et ses barres (une, deux, trois, comme sur l’écran Défis), les manches, le chrono qui part de 00:00.
   Ils se posent l’un après l’autre. Le niveau du défi tiré reste une pastille. */
html.lq .jeu-chips{list-style:none;margin:16px 0 4px!important;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
html.lq .jeu-chip{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:4px 14px 4px 5px;box-sizing:border-box;border:2px solid var(--line);border-radius:999px;
  background:#fff!important;color:var(--ink)!important;box-shadow:0 3px 0 var(--lip);font:700 14px/1 var(--display)!important;letter-spacing:-.005em;white-space:nowrap}
html.lq .jeu-chip .lq-stk{flex:none;width:28px;height:28px;margin:-3px -1px -3px 0}
html.lq .jeu-chips .jeu-chip{flex-direction:column;justify-content:center;gap:6px;min-width:0;min-height:0;padding:11px 6px 10px;border-radius:18px;text-align:center;white-space:normal;line-height:1.15!important;text-wrap:balance}
html.lq .jeu-chips .jeu-chip .lq-stk{width:34px;height:34px;margin:0}
/* 9 novembre, 9 h 04 (Elisa : « fais le parcours défis avec tous les écrans pour trouver une incohérence ») : Facile était violet sur
   l’écran Défis et dans la feuille « Ta salle de défi », vert dans la salle d’attente et la barre de la manche ; Moyen, ambre puis
   jaune. Les niveaux gardent partout les couleurs de l’écran Défis (refonte du 7 novembre, --dx-f, --dx-m, --dx-d) : Facile violet,
   Moyen ambre, Difficile rouge. Le vert reste à « Bravo, défi résolu ! », le jaune aux points. */
html.lq .jeu-chip.is-f{color:var(--accent-ink)!important}
html.lq .jeu-chip.is-m{color:#B45309!important}
html.lq .jeu-chip.is-d{color:#C2323A!important}
html.lq .jeu-chips .jeu-chip{animation:jeuChipIn .42s var(--pop) backwards;animation-delay:calc(.06s + var(--i,0) * .07s)}
@keyframes jeuChipIn{from{opacity:0;transform:translateY(8px) scale(.85) rotate(-3deg)}to{opacity:1;transform:none}}
html.lq .jeu-chip .jeu-bars{flex:none;display:inline-flex;align-items:flex-end;justify-content:center;gap:2px;width:26px;height:26px;margin:0;padding-bottom:6px;box-sizing:border-box;border-radius:50%;background:var(--accent-soft)}
html.lq .jeu-chips .jeu-chip .jeu-bars{width:34px;height:34px;gap:3px;padding-bottom:9px}
html.lq .jeu-chips .jeu-bars b{width:5px}
html.lq .jeu-chips .jeu-bars b:nth-child(1){height:6px!important}
html.lq .jeu-chips .jeu-bars b:nth-child(2){height:11px!important}
html.lq .jeu-chips .jeu-bars b:nth-child(3){height:16px!important}
html.lq .jeu-bars b{display:block;width:4px;border-radius:2px;background:rgba(34,28,70,.16)}
html.lq .jeu-bars b:nth-child(1){height:5px}
html.lq .jeu-bars b:nth-child(2){height:9px}
html.lq .jeu-bars b:nth-child(3){height:13px}
html.lq .jeu-bars.is-f{background:var(--accent-soft)}
html.lq .jeu-bars.is-f b:nth-child(1){background:var(--accent)}
html.lq .jeu-bars.is-m{background:#FFF3DC}
html.lq .jeu-bars.is-m b:nth-child(-n+2){background:#B45309}
html.lq .jeu-bars.is-d{background:#FDEBEC}
html.lq .jeu-bars.is-d b{background:#C2323A}
/* Sur la scène violette du tirage, le niveau reste un autocollant blanc */
html.lq .jeu-draw .jeu-chip{border-color:#fff;box-shadow:0 3px 0 rgba(27,22,64,.3)}

/* 49b. Réf. 3 : les boutons du bas de la salle (« Clore la manche pour tous », « Changer de niveau », « Quitter la salle ») sont des boutons
   secondaires de l’appli, avec leur pictogramme ; les annonces (réseau coupé, seul dans la salle) sont des cartes, plus des bandeaux. */
html.lq .jeu-close{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:50px;margin:16px 0 0;padding:0 18px;box-sizing:border-box;
  border:2px solid var(--line)!important;border-radius:16px;background:#fff!important;color:var(--ink-2)!important;font:700 15.5px/1.15 var(--display)!important;
  text-decoration:none!important;box-shadow:0 4px 0 var(--lip);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:transform .12s var(--press),box-shadow .12s var(--press),color .15s}
html.lq .jeu-close svg{flex:none;width:20px;height:20px;color:var(--accent-ink)}
html.lq #jeu-hostbar .jeu-close svg{color:var(--danger-fill)}
html.lq .jeu-close:active{transform:translateY(4px);box-shadow:0 0 0 var(--lip)}
html.lq .jeu-close:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
html.lq .journey-primary+.jeu-close{margin-top:14px}
html.lq .jeu-net{display:flex;align-items:center;gap:10px;margin:12px 0 0!important;padding:9px 12px 9px 9px!important;border:2px solid var(--line);border-radius:16px!important;
  background:#fff!important;color:var(--ink)!important;box-shadow:0 4px 0 var(--lip);font-size:inherit!important;animation:jeuNoteIn .45s var(--pop) both}
@keyframes jeuNoteIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
html.lq .jeu-net-ico{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink)}
html.lq .jeu-net-ico .lq-stk{width:38px;height:38px}
html.lq .jeu-net-ico>svg:not(.lq-stk){width:20px;height:20px}
html.lq .jeu-net-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
html.lq .jeu-net-tx b{font:700 14.5px/1.2 var(--display);color:var(--ink)}
html.lq .jeu-net-tx small{font-size:12.5px;line-height:1.35;font-weight:600;color:var(--ink-3)}
html.lq .jeu-net.is-off{border-color:#FFE08A;background:#FFFBEA!important;box-shadow:0 4px 0 #F5D77A}
html.lq .jeu-net.is-off .jeu-net-ico{background:var(--sun);color:#1B1640;box-shadow:0 3px 0 var(--sun-lip)}
html.lq .jeu-net.is-off .jeu-net-ico svg{animation:jeuNetBlink 1.6s ease-in-out infinite}
@keyframes jeuNetBlink{0%,100%{opacity:1}50%{opacity:.4}}

/* 49c. Du tirage à la manche, sans à-coup ni écran vide : une copie de la scène violette (jeu-ghost) reste posée par-dessus et s’efface
   en montant, pendant que la manche arrive en cascade dessous (la barre et son chrono, le titre qui descend de là où était le défi
   tiré, la question, l’éditeur). */
.jeu{position:relative}
.jeu>.jeu-ghost,.jeu.jeu-cascade>.jeu-ghost{animation:jeuGhost .46s cubic-bezier(.4,0,.6,1) forwards!important}
@keyframes jeuGhost{0%{opacity:1;transform:none}65%{opacity:0;transform:translateY(-16px) scale(.96)}100%{opacity:0;transform:translateY(-22px) scale(.95)}}
.jeu>.jeu-ghost .jeu-drawn{animation:none}
.jeu.jeu-cascade>*{animation:jeuCascade .5s cubic-bezier(.2,.8,.3,1.1) backwards;animation-delay:calc(.1s + var(--k,0) * 60ms)}
@keyframes jeuCascade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.jeu.jeu-cascade>h1{animation-name:jeuCascadeTitle}
@keyframes jeuCascadeTitle{from{opacity:0;transform:translateY(-10px) scale(1.04)}to{opacity:1;transform:none}}
html.lq .jeu.jeu-cascade .jeu-timer{animation:jeuTimerIn .5s var(--pop) .16s backwards}
@keyframes jeuTimerIn{from{transform:scale(.6) rotate(-8deg)}to{transform:none}}

/* 49d. Les points gagnés, en notification, épurée (16 h 29 : « pas assez clean ») : une pastille blanche, bord lavande et relief comme
   les boutons de l’appli, qui descend du haut ; la pièce tourne une fois, le nombre monte ; en fin de partie, le total de salle. */
#jeu-pts-pop{position:fixed;left:50%;top:calc(var(--safe-top,0px) + 12px);z-index:9991;display:flex;align-items:center;gap:9px;
  height:48px;padding:0 18px 0 7px;box-sizing:border-box;border-radius:999px;background:#fff;border:2px solid var(--line);box-shadow:0 4px 0 var(--lip),0 16px 34px -20px rgba(34,28,70,.5);
  transform:translate(-50%,-160%);opacity:0;pointer-events:none;transition:transform .45s var(--pop,ease),opacity .2s;
  font-family:var(--display,inherit);color:var(--ink);white-space:nowrap;max-width:calc(100vw - 32px)}
#jeu-pts-pop.on{transform:translate(-50%,0);opacity:1}
#jeu-pts-pop .jpp-coin{flex:none;display:grid;place-items:center;width:34px;height:34px;perspective:200px}
#jeu-pts-pop .jpp-coin svg{width:34px;height:34px}
#jeu-pts-pop.on .jpp-coin svg{animation:jppCoin .75s var(--pop,ease) .1s both}
@keyframes jppCoin{0%{transform:scale(.4) rotateY(180deg)}70%{transform:scale(1.1) rotateY(0)}100%{transform:none}}
#jeu-pts-pop>b{font-size:16px;font-weight:700;letter-spacing:-.01em}
#jeu-pts-pop .jpp-n{font-style:normal;font-size:19px;color:var(--accent-ink);font-variant-numeric:tabular-nums}
#jeu-pts-pop .jpp-sub{margin-left:2px;padding-left:10px;border-left:2px solid var(--line-2);font-size:13px;font-weight:600;color:var(--ink-3)}
#jeu-pts-pop .jpp-sub b{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}

/* 49e. Réf. 4 : Cartes mémo. « Voir la leçon » d’une carte à débloquer devient une pastille, sa flèche fait un petit pas en avant de
   temps en temps (les cartes l’une après l’autre, pas toutes ensemble), et file au toucher. */
.collectible.lock .memo-copy>.memo-go{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;margin-top:4px;padding:5px 8px 5px 11px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-ink);font:700 12.5px/1.1 var(--display,inherit);box-shadow:inset 0 0 0 1.5px rgba(106,77,244,.16);white-space:nowrap;overflow-wrap:normal}
.collectible.lock .memo-go>svg{flex:none;width:14px;height:14px;animation:memoGo 2.6s cubic-bezier(.4,0,.2,1) infinite;animation-delay:calc(.6s + var(--i,0) * .18s)}
@keyframes memoGo{0%,40%,100%{transform:none}15%{transform:translateX(4px)}27%{transform:translateX(-1px)}}
.collectible.lock:active .memo-go>svg{animation:none;transform:translateX(5px);transition:transform .15s}
@media (hover:hover) and (pointer:fine){.collectible.lock:hover .memo-go{background:#E3DBFF}.collectible.lock:hover .memo-go>svg{animation-duration:1.1s;animation-delay:0s}}

/* 49f. Mouvement réduit : tout est à sa place d’emblée */
@media (prefers-reduced-motion:reduce){
  html.lq .jeu-chips .jeu-chip,html.lq .jeu-net,html.lq .jeu-net *,.jeu>.jeu-ghost,.jeu.jeu-cascade>*,html.lq .jeu.jeu-cascade .jeu-timer,
  #jeu-pts-pop,#jeu-pts-pop *,.collectible.lock .memo-go>svg{animation:none!important}
}
html[data-motion="reduce"].lq .jeu-chips .jeu-chip,html[data-motion="reduce"].lq .jeu-net,html[data-motion="reduce"].lq .jeu-net *,html[data-motion="reduce"] .jeu.jeu-cascade>*,
html[data-motion="reduce"].lq .jeu.jeu-cascade .jeu-timer,html[data-motion="reduce"] #jeu-pts-pop,html[data-motion="reduce"] #jeu-pts-pop *,html[data-motion="reduce"] .collectible.lock .memo-go>svg{animation:none!important}

/* ---------- 50. Retours du 31 octobre, 16 h 29 : la manche, épurée ----------
   « Il y a trop de boutons, il y a trop de trucs », « les cadres verts ne font pas assez clean, pareil pour la notif », « si personne
   ne rejoint la salle, alors c’est comme si on est seule ». Pendant la manche : le chrono, qui a trouvé (à plusieurs), la question,
   l’éditeur et « Exécuter », rien d’autre. Trouvé : une carte blanche à la place de l’éditeur. Seul dans la salle : comme seul. */
/* 50a. Le schéma des tables : une pastille dans la barre de l’éditeur (plus de « Schéma » ni de « Pas à pas » sous « Exécuter ») */
html.lq .ed-schema{flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;margin-right:2px;padding:0 11px 0 9px;border:0;border-radius:10px;
  background:rgba(255,255,255,.1);color:#E4DEFF;font:700 12.5px/1 var(--display);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background .15s,transform .12s var(--press)}
html.lq .ed-schema svg{width:15px;height:15px}
html.lq .ed-schema:active{transform:scale(.94);background:rgba(255,255,255,.18)}
@media (hover:hover) and (pointer:fine){html.lq .ed-schema:hover{background:rgba(255,255,255,.16)}}
html.lq .ed-schema:focus-visible{outline:2px solid #C9BCFF;outline-offset:2px}

/* 50b. La bande d’avatars de la manche est devenue le cadre « En direct » (8 novembre, plus bas). */
.jeu-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 50c. Trouvé : une carte blanche de l’appli (plus le grand cadre vert) : la médaille ou la coche, le temps et la place, les points ; à
   plusieurs, sous un trait en pointillés, qui cherche encore et les réactions groupées dans une seule pastille ; l’hôte a un petit
   « Clore la manche pour tous » ; la requête et son résultat restent repliés. */
html.lq .jeu-done{margin:16px 0 0;padding:16px;border:2px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 4px 0 var(--lip);animation:jeuDoneIn .5s var(--pop) both}
@keyframes jeuDoneIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
html.lq .jeu-done-head{display:flex;align-items:center;gap:12px}
html.lq .jeu-done-stk{flex:none;display:grid;place-items:center;width:50px;height:50px}
html.lq .jeu-done-stk svg{width:50px;height:50px;animation:jeuDoneStk .6s var(--pop) .1s both}
@keyframes jeuDoneStk{from{transform:scale(.3) rotate(-25deg)}to{transform:none}}
html.lq .jeu-done-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
html.lq .jeu-done-t b{font:700 19px/1.15 var(--display);color:var(--ink)}
html.lq .jeu-done-t small{font:700 13.5px/1.2 var(--display);color:var(--ink-3)}
html.lq .jeu-done-pts{flex:none;display:inline-flex;align-items:baseline;gap:3px;padding:7px 12px;border-radius:14px;background:var(--accent-soft);color:var(--accent-ink);font:700 13px/1 var(--display)}
html.lq .jeu-done-pts em{font-style:normal;font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
html.lq .jeu-done-wait{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 0;padding-top:12px;border-top:2px dashed var(--line-2)}
html.lq #jeu-waitline{display:flex;align-items:center;gap:8px;min-width:0;margin:0!important;font:700 13.5px/1.3 var(--display);color:var(--ink-2)}
html.lq .jeu-done .jeu-reacts{flex:none;display:flex;gap:0;margin:0;padding:3px;border-radius:999px;background:var(--surface-2)}
html.lq .jeu-done .jeu-reacts button{width:34px;height:34px;border:0!important;border-radius:50%;background:transparent;box-shadow:none!important;font-size:18px;transition:transform .12s var(--press),background .15s}
html.lq .jeu-done .jeu-reacts button:active{transform:scale(.8);background:#fff;box-shadow:none!important}
html.lq #jeu-hostbar:empty{display:none}
html.lq .jeu-mini{display:inline-flex;align-items:center;gap:7px;min-height:38px;margin:12px 0 0;padding:0 14px;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink-2);
  font:700 13.5px/1 var(--display);box-shadow:0 3px 0 var(--lip);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq .jeu-mini svg{width:16px;height:16px;color:var(--danger-fill)}
html.lq .jeu-mini:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
html.lq .jeu-mini:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
html.lq .jeu-done-sql{margin:12px 0 0}
html.lq .jeu-done-sql>summary{display:inline-flex;align-items:center;gap:8px;list-style:none;cursor:pointer;padding:4px 0;font:700 13px/1.2 var(--display);color:var(--accent-ink)}
html.lq .jeu-done-sql>summary::-webkit-details-marker{display:none}
html.lq .jeu-done-sql>summary::before{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .2s}
html.lq .jeu-done-sql[open]>summary::before{transform:rotate(45deg)}
html.lq .jeu-done-sql .ex-code{margin:10px 0 0}
html.lq .jeu-done-sql .result-meta{display:none!important}
html.lq .jeu-done-sql .jeu-sql-code+.feedback{display:none}
html.lq .jeu-sql-pied{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.12);white-space:normal;font:600 12px/1 var(--ui)}
html.lq .jeu-sql-pied .jsp-n{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:99px;background:rgba(74,222,128,.16);color:#6EE7A0;font-weight:700}
html.lq .jeu-sql-pied .jsp-n svg{width:12px;height:12px;flex:none}
html.lq .jeu-sql-pied .jsp-ms{color:rgba(255,255,255,.5)}
/* 20 h 24 : « Retour aux défis » et sa flèche qui avance, dans une feuille lqAsk */
html.lq .lq-ask-oui.has-fl{display:inline-flex;align-items:center;justify-content:center;gap:8px}
/* Le même pied dans tous les éditeurs (9 novembre, 18 h 09) : défi, salle, console, « Teste ». */
html.lq .ed-pied{margin:0 16px;padding:10px 0 12px;border-top:1px solid rgba(255,255,255,.1);transition:opacity .25s}
html.lq .ed-pied.is-detache{margin:0;padding:10px 16px 12px;background:var(--code-bg-2)}
html.lq .ed-pied.is-new .jsp-n{animation:edPiedIn .45s cubic-bezier(.2,.9,.3,1.3)}
html.lq .ed-pied.is-perime{opacity:.4}
@keyframes edPiedIn{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){html.lq .ed-pied.is-new .jsp-n{animation:none}}
/* 18 h 21 : les lignes, les colonnes et le temps sont dans le pied ; au-dessus du tableau, plus rien (la console garde « Résultat »). */
html.lq #lesson-out>.result-meta,html.lq .xf-result>.result-meta{display:none!important}
html.lq #console-out .result-live>.result-meta>span{display:none!important}
html.lq .jeu-sql-pied .jsp-n.is-ko{background:rgba(248,113,113,.18);color:#FCA5A5}
html.lq .jeu-sql-pied .jsp-n.is-ko i{font-style:normal;font-size:11px;font-weight:800}
html.lq .jeu-sql-pied .jsp-c,html.lq .jeu-sql-pied .jsp-dot{color:rgba(255,255,255,.5)}
html.lq .jeu-sql-pied{gap:8px}
html.lq .jeu-done-sql .table-scroll{margin-top:10px}

/* 50d. Résultats et fin de partie, allégés : le détail des points en texte simple, sur sa seule ligne (mise en avant) ; la solution se
   replie quand on a trouvé. */
html.lq .jeu-pd{gap:0 6px!important;margin-top:4px!important}
html.lq .jeu-pd i{padding:0!important;background:none!important;color:var(--ink-3)!important;font:700 11.5px/1.3 var(--display)!important}
/* 9 novembre, 9 h 04 (le parcours) : « Du premier coup +25 » allonge la ligne ; quand elle passe à la ligne, le « · » reste au bout
   du morceau d’avant (comme l’encart vert), il n’ouvre plus la ligne suivante. */
html.lq .jeu-pd i:not(:last-child)::after{content:"·";margin-left:6px;color:#C9C2E6}
html.lq .jeu-pd i.is-rang{color:#8A5A00!important}
html.lq .jeu-pd i.is-vite{color:#0F7A3A!important}
html.lq .jeu-rank li.is-me{border-color:#CFC4FF!important;background:#FAF8FF!important}
html.lq .jeu-rank li{flex-wrap:wrap;row-gap:3px}
html.lq .jeu-rank li b{display:block;white-space:nowrap}
html.lq .jeu-rank li>.jeu-pd{flex-basis:100%;margin:0 0 0 34px!important}
html.lq .jeu-sol>summary{display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:pointer;margin:0!important}
html.lq .jeu-sol>summary::-webkit-details-marker{display:none}
html.lq .jeu-sol>summary::after{content:"";flex:none;width:9px;height:9px;margin-right:4px;border-right:2.5px solid var(--ink-3);border-bottom:2.5px solid var(--ink-3);transform:translateY(-3px) rotate(45deg);transition:transform .2s}
html.lq .jeu-sol[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
html.lq .jeu-sol .ex-code{margin-top:12px!important}
html.lq .jeu-podium+.jeu-tie{margin:12px 4px 0!important}

/* 50e. Mouvement réduit */
@media (prefers-reduced-motion:reduce){html.lq .jeu-done,html.lq .jeu-done *{animation:none!important}}
html[data-motion="reduce"].lq .jeu-done,html[data-motion="reduce"].lq .jeu-done *{animation:none!important}

/* ---------- 51. Retours du 31 octobre, 16 h 49 ---------- */
/* 51a. La valeur du défi, à côté du chrono, tant qu’on cherche : elle baisse avec le temps (200 → 100). */
html.lq .jeu-bar .l-kicker{display:block;flex:1 1 0%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.lq .jeu-bar-r{flex:none;display:flex;align-items:center;gap:6px}
@media (max-width:760px){
  html.lq #scr-lesson .jeu-bar{flex-wrap:wrap;justify-content:flex-start;gap:8px}
  html.lq #scr-lesson .jeu-bar>.l-kicker{flex:1 1 100%;width:100%;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.2}
  html.lq #scr-lesson .jeu-bar>.jeu-bar-r{margin-left:auto;max-width:100%}
}
html.lq .jeu-val{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 10px 0 4px;box-sizing:border-box;border:2px solid var(--line);border-radius:999px;background:#fff;
  color:var(--accent-ink);font:800 15px/1 var(--display);font-variant-numeric:tabular-nums;box-shadow:0 3px 0 var(--lip)}
html.lq .jeu-val .lq-stk{width:24px;height:24px}
html.lq .jeu-val small{font:700 11px/1 var(--display);color:var(--ink-3)}

/* 51b. Le pseudo, unique : sous le champ, « Vérification… » (trois points), « Disponible » (une coche menthe qui se pose), « déjà pris »
   (le champ tremble, trois pseudos libres arrivent l’un après l’autre en pastilles ; en toucher une la met dans le champ). */
.ps-etat{display:flex;align-items:center;gap:7px;margin:9px 2px 0;font:700 13.5px/1.35 var(--display,inherit);color:var(--ink-3)}
.ps-etat:empty{display:none}
.ps-etat.is-libre,.ps-etat.is-mien{color:#0F7A3A}
.ps-etat.is-pris,.ps-etat.is-refuse,.ps-etat.is-invalide{color:var(--danger)}
.ps-ok,.ps-no{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font:800 12px/1 var(--display,inherit);font-style:normal;animation:psPop .45s var(--pop,ease) both}
.ps-ok{background:#9FF0C6;color:#0D5B3B}
.ps-no{background:#FFD9DB;color:var(--danger)}
@keyframes psPop{from{transform:scale(0) rotate(-40deg)}to{transform:none}}
.ps-dots{display:inline-flex;gap:3px;margin-right:2px}
.ps-dots b{width:5px;height:5px;border-radius:50%;background:currentColor;animation:psDot .9s ease-in-out infinite}
.ps-dots b:nth-child(2){animation-delay:.15s}.ps-dots b:nth-child(3){animation-delay:.3s}
@keyframes psDot{0%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.ps-idees{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 2px}
.ps-idees:empty{display:none}
.ps-idee{min-height:40px;padding:0 15px;border:2px solid var(--line);border-radius:999px;background:#fff;color:var(--accent-ink);font:700 14.5px/1 var(--display,inherit);
  box-shadow:0 3px 0 var(--lip);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  animation:psIdee .45s var(--pop,ease) backwards;animation-delay:calc(.08s + var(--i,0) * .09s);transition:transform .12s var(--press,ease),box-shadow .12s var(--press,ease)}
.ps-idee:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
.ps-idee:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@keyframes psIdee{from{opacity:0;transform:translateY(12px) scale(.8) rotate(-4deg)}to{opacity:1;transform:none}}
html.lq #onboarding .ob-field input.is-ok{border-color:#7FD9A8!important}
html.lq #onboarding .ob-field input.is-ko{border-color:#F3A3A7!important}
.is-shake{animation:psShake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes psShake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
.is-pick{animation:psPick .4s var(--pop,ease)}
@keyframes psPick{45%{transform:scale(1.025)}}
html.lq #onboarding .ob-field{position:relative}
html.lq #onboarding .ob-field.is-locked input{background:var(--surface-2)!important;color:var(--ink)!important;padding-right:46px!important}
html.lq #onboarding .ob-field-lock{position:absolute;right:16px;bottom:19px;width:20px;height:20px;color:var(--ink-3)}
html.lq #onboarding .ob-field-lock svg{width:20px;height:20px;display:block}
#ob-next.is-busy{opacity:.72;pointer-events:none}
/* Sur le violet de l’onboarding : le texte en clair (le rouge et le vert foncés s’y lisent mal), la pastille garde sa couleur. */
html #onboarding .ps-etat{color:rgba(255,255,255,.86)}
html #onboarding .ps-etat.is-libre,html #onboarding .ps-etat.is-mien{color:#C8F8DD}
html #onboarding .ps-etat.is-pris,html #onboarding .ps-etat.is-refuse,html #onboarding .ps-etat.is-invalide{color:#FFE0E2}

/* 51c. Le pseudo, verrouillé : dans la salle (« Tu joues en tant que »), dans Mon compte */
html.lq .jeu-me-lock{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:var(--surface-2);color:var(--ink-3)}
html.lq .jeu-me-lock svg{width:17px;height:17px}
html.lq .jeu-me.is-vide{width:100%;font:inherit;text-align:left;cursor:pointer;border-color:#CFC4FF!important;background:#FAF8FF!important;-webkit-tap-highlight-color:transparent}
html.lq .acc-pseudo{display:flex;align-items:center;gap:12px;width:100%;margin:2px 0 14px;padding:12px 14px;box-sizing:border-box;border:2px solid var(--line);border-radius:18px;background:#fff;
  color:var(--ink);font:inherit;text-align:left}
html.lq .acc-pseudo.is-vide{border-color:#CFC4FF;background:#FAF8FF;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.lq .acc-pseudo-av{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--accent);color:#fff;font:700 17px/1 var(--display);box-shadow:0 2px 0 var(--accent-lip)}
html.lq .acc-pseudo-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
html.lq .acc-pseudo-t small{font:700 12.5px/1.2 var(--display);color:var(--ink-3)}
html.lq .acc-pseudo-t b{font:700 17px/1.2 var(--display);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.lq .acc-pseudo-t em{font-style:normal;font-size:12.5px;line-height:1.3;color:var(--ink-3)}

/* 51d. Réf. 5 : « Un code reçu ? », de l’air : le code, puis le bouton, avec la même marge que les autres cartes ; le contour de focus
   se pose à l’intérieur de la carte au lieu de doubler son bord. */
html.lq .def-join>summary{border-radius:20px}
html.lq:not(.pointer-nav) .def-join>summary:focus-visible{box-shadow:inset 0 0 0 2.5px rgba(106,77,244,.45)!important;border-radius:20px!important}
html.lq .def-join-body{padding:2px 16px 18px!important;gap:10px!important}
html.lq .def-join-body>.jeu-lab{margin:4px 2px 0!important}
html.lq .def-join-body>.journey-primary{margin-top:4px}
html.lq .def-join-body>.jeu-msg:empty{display:none}

/* 51e. Réf. 6 : « Tes dernières parties » : une partie à plusieurs se voit — sa barre en menthe, le nombre de joueurs à son pied, les
   points de chacun des autres en pastilles de sa couleur, à leur hauteur ; dessous, la partie joueur par joueur. */
html.lq .perf-bar.is-vs i{background:rgba(159,240,198,.82)}
html.lq .perf-bar.is-vs.is-on i{background:#C9F7DF}
html.lq .perf-bar.is-best i{background:var(--sun)}
html.lq .perf-bar.is-best.is-on i{background:var(--sun-hi)}
html.lq .perf-o{position:absolute;left:50%;bottom:var(--y);z-index:2;width:12px;height:12px;margin:0 0 -6px -6px;box-sizing:border-box;border:2px solid #fff;border-radius:50%;
  background:hsl(338 70% 52%);box-shadow:0 1px 0 rgba(27,22,64,.35);pointer-events:none;
  opacity:0;transform:translateX(var(--x,0px)) scale(.3);transition:opacity .3s,transform .5s var(--pop);transition-delay:calc(.65s + var(--i,0) * .05s)}
html.lq .perf-card.is-in .perf-o{opacity:1;transform:translateX(var(--x,0px)) scale(1)}
html.lq .perf-o[data-c="0"]{background:#8B6CFF}
html.lq .perf-o[data-c="1"]{background:hsl(152 52% 40%)}
html.lq .perf-o[data-c="2"]{background:hsl(24 88% 52%)}
html.lq .perf-o[data-c="3"]{background:hsl(338 70% 52%)}
html.lq .perf-o[data-c="4"]{background:hsl(202 78% 44%)}
html.lq .perf-o[data-c="5"]{background:hsl(42 90% 44%)}
html.lq .perf-n{position:absolute;left:50%;bottom:4px;z-index:3;min-width:17px;height:17px;padding:0 3px;box-sizing:border-box;border-radius:9px;translate:-50% 0;
  background:#fff;color:#0D5B3B;font:800 10.5px/17px var(--display);text-align:center;box-shadow:0 1px 0 rgba(27,22,64,.25)}
html.lq .perf-cap-t{display:block;margin:0 0 7px}
html.lq .perf-cap-ppl{display:flex;flex-wrap:wrap;gap:6px}
html.lq .perf-cap-ppl>span{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border:2px solid var(--line);border-radius:999px;background:#fff;font:700 13px/1 var(--display);color:var(--ink);animation:dbColIn .3s cubic-bezier(.2,.8,.3,1.2) both}
html.lq .perf-cap-ppl>span.is-me{border-color:#CFC4FF;background:#FAF8FF}
html.lq .perf-cap-ppl .jeu-av{width:22px;height:22px;font-size:11px;font-style:normal;box-shadow:none!important}
html.lq .perf-cap-ppl b{color:var(--accent-ink);font-variant-numeric:tabular-nums}
html.lq .perf-legend{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:8px 2px 0;font-size:12px;line-height:1.3;color:var(--ink-3)}
html.lq .perf-legend-o{flex:none;width:12px;height:12px;box-sizing:border-box;border-radius:50%;background:conic-gradient(hsl(152 52% 40%) 0 25%,hsl(24 88% 52%) 0 50%,hsl(202 78% 44%) 0 75%,hsl(338 70% 52%) 0);border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line)}
/* Elisa, 31 octobre, 18 h 19 : « pourquoi nombre de joueurs = 3 ? » : la pastille d’exemple portait un chiffre au hasard ; la légende le dit
   en mots, sans chiffre. */
html.lq .perf-legend{flex-direction:column;align-items:flex-start;gap:3px}
html.lq .perf-legend>span{display:flex;align-items:center;gap:6px}
html.lq .perf-legend-t{padding-left:18px}

/* 51f. Mouvement réduit */
@media (prefers-reduced-motion:reduce){.ps-ok,.ps-no,.ps-dots b,.ps-idee,.is-shake,.is-pick,html.lq .perf-cap-ppl>span{animation:none!important}html.lq .perf-o{transition:none!important}}
html[data-motion="reduce"] .ps-ok,html[data-motion="reduce"] .ps-no,html[data-motion="reduce"] .ps-dots b,html[data-motion="reduce"] .ps-idee,html[data-motion="reduce"] .is-shake,html[data-motion="reduce"] .is-pick,html[data-motion="reduce"].lq .perf-cap-ppl>span{animation:none!important}

/* ---------- 52. Retours du 31 octobre, 17 h 39 : le barème en paliers ---------- */
/* 52a. Lecteurs d’écran seulement */
.lq-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}

/* 52b. « Comment on marque des points » : des filets pleins (plus de pointillés), les paliers en marches qui descendent, la manche
   parfaite en bas. */
html.lq .room-rules>ul>li+li{border-top:1.5px solid var(--line-2)!important}
html.lq .room-rules .room-rule-vite>.room-paliers,html.lq .room-rules .room-rule-vite>.room-paliers-u{grid-column:1/-1;grid-row:auto}
html.lq .room-rules .room-paliers{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:end;gap:5px;margin:12px 0 0;padding:0;list-style:none}
html.lq .room-rules .room-paliers li{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:5px;padding:0;border:0!important;min-width:0}
html.lq .room-rules .room-paliers li b{grid-column:auto;grid-row:auto;font:800 12.5px/1 var(--display);color:var(--ink);text-align:center;font-variant-numeric:tabular-nums}
html.lq .room-rules .room-paliers li i{display:block;height:var(--h);border-radius:8px 8px 4px 4px;background:var(--sun);box-shadow:inset 0 -3px 0 var(--sun-lip);
  transform:scaleY(.12);transform-origin:50% 100%;opacity:.55;transition:transform .55s var(--pop,ease),opacity .3s;transition-delay:calc(var(--i,0) * 70ms)}
html.lq .room-rules.is-in .room-paliers li i{transform:none;opacity:1}
html.lq .room-rules .room-paliers li small{grid-column:auto;grid-row:auto;font:700 11px/1 var(--display);color:var(--ink-3);text-align:center;white-space:nowrap}
html.lq .room-rules .room-paliers-u{margin:6px 0 0;font-size:11.5px;line-height:1.2;color:var(--ink-3);text-align:center}
html.lq .room-rules-max{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:4px 6px;margin:6px 0 4px;padding:10px 12px 12px;border-radius:16px;background:var(--surface-2);
  font:700 13.5px/1.2 var(--display);color:var(--ink-2)}
html.lq .room-rules-max span{flex-basis:100%;text-align:center;font:700 12px/1.2 var(--display);letter-spacing:.02em;color:var(--ink-3)}
html.lq .room-rules-max b{font:800 17px/1 var(--display);color:var(--accent-ink);font-variant-numeric:tabular-nums}
html.lq .room-rules-max small{font-size:12.5px;color:var(--ink-3)}
html.lq .room-rules-max i{font-style:normal;color:#C9C2E6}
/* Le barème d’un niveau (6 novembre, 15 h, « Multiplicateur ×2 / ×4 ») : trois pastilles au-dessus des marches, celle du niveau montré en blanc */
html.lq .room-rules-niv{display:flex;gap:4px;margin:2px 0 8px;padding:4px;border-radius:999px;background:var(--surface-2)}
html.lq .room-rules-niv button{flex:1;display:inline-flex;align-items:baseline;justify-content:center;gap:4px;min-height:36px;padding:6px 8px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);font:700 13.5px/1.1 var(--display);cursor:pointer;transition:background .2s ease,box-shadow .2s ease}
html.lq .room-rules-niv button small{font:800 11px/1 var(--display);color:var(--accent-ink)}
html.lq .room-rules-niv button.is-on{background:#fff;color:var(--ink);box-shadow:0 2px 0 var(--lip)}
html.lq .room-rules-niv button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
html.lq[data-reading="large"] .room-rules-niv button{font-size:15px;min-height:42px}
@media (prefers-reduced-motion:reduce){html.lq .room-rules-niv button{transition:none}}

/* 52c. La barre de jeu : le palier qui change fait un petit saut ; « +25 » tant que la première requête peut être la bonne */
html.lq .jeu-val{position:relative}
html.lq .jeu-val.is-drop #jeu-val-n{display:inline-block;animation:jeuValDrop .5s var(--pop,ease)}
@keyframes jeuValDrop{0%{transform:translateY(-6px) scale(1.18);color:var(--accent)}60%{transform:translateY(1px)}100%{transform:none}}
html.lq .jeu-val-b{position:absolute;top:-9px;right:-7px;padding:2px 5px;border-radius:99px;background:#9FF0C6;color:#0D5B3B;font:800 10.5px/1.15 var(--display);font-style:normal;
  box-shadow:0 2px 0 rgba(13,91,59,.25);rotate:6deg;animation:jeuValB .45s var(--pop,ease) .3s backwards}
@keyframes jeuValB{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
html.lq .jeu-val-b.is-out{animation:jeuValBOut .36s ease-in forwards}
@keyframes jeuValBOut{to{opacity:0;transform:translateY(-14px) scale(.6) rotate(-20deg)}}
html.lq .jeu-pd i.is-essai{color:#0F7A3A!important}
/* Le bonus de niveau dans le détail des points (6 novembre, 12 h 42) : la couleur du niveau, comme ses pastilles */
html.lq .jeu-pd i.is-niv.is-m{color:#B45309!important}
html.lq .jeu-pd i.is-niv.is-d{color:#C2323A!important}

/* 52d. Mouvement réduit */
@media (prefers-reduced-motion:reduce){html.lq .room-rules .room-paliers li i{transition:none!important}html.lq .jeu-val.is-drop #jeu-val-n,html.lq .jeu-val-b{animation:none!important}}
html[data-motion="reduce"].lq .room-rules .room-paliers li i{transition:none!important}
html[data-motion="reduce"].lq .jeu-val.is-drop #jeu-val-n,html[data-motion="reduce"].lq .jeu-val-b{animation:none!important}

/* 52e. Retours de 17 h 53 et 18 h 02 : jusqu’à 8 joueurs dans « Tes dernières parties » (deux couleurs de plus) ; la tuile Défis du
   planning et Mon compte : les manches trouvées sur jouées, et les points. */
html.lq .perf-o[data-c="6"],html.lq .perf-cap-ppl .jeu-av[data-c="6"]{background:hsl(176 62% 33%)!important}
html.lq .perf-o[data-c="7"],html.lq .perf-cap-ppl .jeu-av[data-c="7"]{background:hsl(222 34% 34%)!important}
.pgr-stat.is-d>p{margin:9px 0 0;font:600 11.5px/1.3 var(--ui);color:var(--ink-3)}
.pgr-stat.is-d>p b{display:block;margin-top:2px;font:800 12.5px/1.2 var(--display);color:var(--accent-ink)}
html.lq .acct-stat b em{font:700 .62em/1 var(--display);font-style:normal;color:var(--ink-3)}
html.lq .acct-stat small.acct-stat-pts{margin-top:2px;font-weight:800;color:var(--accent-ink)}
html.lq .perf-top-pick{margin-left:4px;padding:0;border:0;background:none;color:var(--accent-ink);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* 52f. Elisa, 31 octobre, 18 h 22 : le pseudo en identifiant — le @ posé dans le champ, en violet ; l’état du pseudo un peu plus
   loin du champ. Les bandes claires en haut et en bas de l’écran (barre d’état, barre de Safari) prennent le violet de l’onboarding. */
html #onboarding .ob-at-box{position:relative;display:block}
html #onboarding .ob-at{position:absolute;left:18px;top:50%;z-index:1;translate:0 -50%;margin-top:-2px;font:800 19px/1 var(--v-display,inherit);color:#6A4DF4;pointer-events:none}
html #onboarding.ob-vitrine .ob-field.ob-field-at input{padding-left:36px!important;text-transform:lowercase}
html #onboarding .ob-pseudo .ps-etat{margin-top:14px}
html.lq:has(#onboarding.on){background:#4529CC!important}
html.lq:has(#onboarding.on) body{background:#6E50F6!important}
/* 52g. Mon compte : le pseudo sous le prénom (Elisa, 31 octobre, 18 h 28), en pastille claire sur le violet. */
html.lq .acct-id-copy .acct-id-pseudo{align-self:flex-start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 10px;border-radius:999px;
  background:rgba(255,255,255,.16);color:#fff;font:700 14px/1.2 var(--display);font-style:normal}
/* 52h. « Profil et objectif » (Elisa, 31 octobre, 18 h 39) : le cadre du pseudo prenait toute la largeur de la feuille, collé aux
   bords. Il devient une ligne comme « Personnalisation » et « Revoir l’intro » : même marge, avatar aligné sur leurs icônes, texte
   sur leur texte, cadenas sur leurs chevrons, séparée de la suivante par le même trait. (Remplacé par 52i.) */
/* 52i. Elisa, 1er novembre, 0 h 06 : « améliore la vue du pseudo en DA avec le site internet ». Le pseudo devient la carte du
   site, posée avec la marge de « Comprendre mes données » (plus collée aux bords) : l’aplat violet et la grille du héros,
   l’avatar contouré d’encre des avis avec le cadenas dans sa pastille, « Pseudo » en surtitre menthe dont le point pulse,
   le @ en jaune, le trait menthe qui se dessine sous le pseudo comme sous « le SQL », les confettis des autocollants.
   Le texte reste celui de 18 h 39 (ni sous-titre ni « Unique »). Le pseudo rétrécit s’il est long (--l = nombre de
   caractères). Sans pseudo : la même carte, avatar en pointillés et pastille jaune pour aller le choisir. */
html.lq #scr-compte .plus-details-body>.acc-pseudo{position:relative;isolation:isolate;display:flex;align-items:center;gap:16px;
  width:calc(100% - 36px);min-height:0;margin:22px 18px 16px;padding:18px 18px 20px;box-sizing:border-box;border:0;border-radius:24px;
  color:#fff;font:inherit;text-align:left;-webkit-appearance:none;appearance:none;
  background:radial-gradient(140px 110px at 100% 0%,rgba(255,255,255,.2),transparent 70%),
    radial-gradient(170px 120px at 0% 120%,rgba(159,240,198,.2),transparent 70%),
    linear-gradient(170deg,#6E50F6 0%,#5538E6 48%,#4529CC 100%);
  box-shadow:0 5px 0 #3A22B0,0 18px 30px -18px rgba(52,34,150,.65)}
html.lq #scr-compte .plus-details-body>.acc-pseudo::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px) 0 0/22px 22px;
  -webkit-mask:linear-gradient(115deg,transparent 35%,#000 100%);mask:linear-gradient(115deg,transparent 35%,#000 100%)}
html.lq #scr-compte .plus-details-body>.acc-pseudo .acc-pseudo-av{position:relative;flex:none;display:grid;place-items:center;width:58px;height:58px;
  box-sizing:border-box;border:3px solid #fff;border-radius:50%;background:#C9BCFF;color:var(--ink);font:800 25px/1 var(--display);
  box-shadow:0 0 0 2px var(--ink),0 4px 0 2px var(--ink);rotate:-4deg}
/* 5 novembre, 21 h 01 : « mettre que le pseudo avec le drapeau, le niveau actuel (comme sur l’accueil) et l’objectif défini dans
   l’onboarding ». Le drapeau dans sa pastille blanche au coin de l’avatar, à la place du cadenas (comme le rond de Mon compte) ;
   sous le pseudo, l’étiquette du niveau de la mascotte de l’accueil, couchée (« Niv. 2 » jaune soleil sur le nom du niveau, menthe
   sur l’encre), puis l’objectif, son pictogramme dans une tuile translucide. */
html.lq #scr-compte .plus-details-body>.acc-pseudo .acc-pseudo-flag{position:absolute;right:-12px;bottom:-7px;display:grid;place-items:center;width:30px;height:23px;
  border-radius:7px;background:#fff;box-shadow:0 0 0 2px #fff,0 2px 5px rgba(20,10,60,.3);font:normal 400 18px/1 system-ui,-apple-system,sans-serif;rotate:-8deg}
html.lq #scr-compte .plus-details-body>.acc-pseudo .acc-pseudo-niv{display:inline-flex;align-items:center;align-self:flex-start;max-width:100%;margin-top:3px;rotate:-2deg}
html.lq #scr-compte .plus-details-body>.acc-pseudo .acc-pseudo-niv>i{position:relative;z-index:1;flex:none;display:inline-flex;align-items:baseline;gap:3px;margin-right:-9px;
  padding:5px 10px;border-radius:999px;background:var(--sun);color:#1B1640;font:800 13.5px/1 var(--display);font-style:normal;box-shadow:0 2px 0 var(--sun-lip)}
html.lq #scr-compte .plus-details-body>.acc-pseudo .acc-pseudo-niv>i>span{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
html.lq #scr-compte .plus-details-body>.acc-pseudo .acc-pseudo-niv-l{min-width:0;padding:6px 11px 6px 16px;border-radius:10px;background:#1E1A3B;color:var(--mint);
  font:700 12px/1.2 var(--display);box-shadow:0 3px 0 #0F0B2A;text-wrap:balance}
html.lq #scr-compte .plus-details-body>.acc-pseudo .acc-pseudo-obj{display:flex;align-items:center;gap:9px;min-width:0;margin-top:4px;color:rgba(255,255,255,.82);font:600 13.5px/1.3 var(--ui)}
html.lq #scr-compte .plus-details-body>.acc-pseudo .acc-pseudo-obj strong{color:#fff;font-weight:800}
html.lq #scr-compte .plus-details-body>.acc-pseudo .acc-pseudo-obj-ico{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
html.lq #scr-compte .plus-details-body>.acc-pseudo .acc-pseudo-obj-ico .ob-answer-icon{display:grid;place-items:center;width:100%;height:100%;border-radius:inherit;background:none;color:#fff}
html.lq #scr-compte .plus-details-body>.acc-pseudo .acc-pseudo-obj-ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
html.lq #scr-compte .plus-details-body>.acc-pseudo .acc-pseudo-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
html.lq #scr-compte .plus-details-body>.acc-pseudo .acc-pseudo-t small{display:inline-flex;align-items:center;gap:8px;font:800 12px/1.2 var(--ui);
  letter-spacing:.07em;text-transform:uppercase;color:var(--mint)}
html.lq #scr-compte .plus-details-body>.acc-pseudo .acc-pseudo-t small::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 0 4px rgba(159,240,198,.22)}
html.lq #scr-compte .plus-details-body>.acc-pseudo .acc-pseudo-t b{display:flex;align-items:baseline;min-width:0;overflow:visible;white-space:nowrap;
  font:800 clamp(17px,calc(31px - var(--l,8) * .9px),24px)/1.15 var(--display);letter-spacing:-.01em;color:#fff}
html.lq #scr-compte .plus-details-body>.acc-pseudo .acc-pseudo-at{flex:none;margin-right:1px;font-style:normal;color:var(--sun)}
html.lq #scr-compte .plus-details-body>.acc-pseudo .acc-pseudo-nm{position:relative;display:block;min-width:0;margin:0 -4px -.36em;padding:0 4px .36em;
  overflow:hidden;text-overflow:ellipsis}
html.lq #scr-compte .plus-details-body>.acc-pseudo .acc-pseudo-sw{position:absolute;left:4px;right:4px;bottom:0;width:calc(100% - 8px);height:.34em;overflow:visible}
html.lq #scr-compte .plus-details-body>.acc-pseudo .acc-pseudo-sw path{fill:none;stroke:var(--mint);stroke-width:4px;stroke-linecap:round;
  vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
/* Les confettis des autocollants du site, aux couleurs qui ressortent sur le violet (purement décoratifs). */
html.lq #scr-compte .plus-details-body>.acc-pseudo::after{content:'';position:absolute;right:16px;top:12px;width:22px;height:26px;pointer-events:none;rotate:10deg;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 26'%3E%3Cpath d='M14 1l6 3.5-6 3.5z' fill='%23FFC83D'/%3E%3Crect x='2' y='10' width='8' height='3.5' rx='1' transform='rotate(-25 6 11.75)' fill='%23F0616A'/%3E%3Crect x='5' y='19' width='8' height='3.5' rx='1' transform='rotate(20 9 20.75)' fill='%239FF0C6'/%3E%3C/svg%3E") no-repeat center/contain}
html.lq #scr-compte .plus-details-body>.acc-pseudo.is-vide::after{display:none}
/* Sans pseudo : un bouton. */
html.lq #scr-compte .plus-details-body>.acc-pseudo.is-vide{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq #scr-compte .plus-details-body>.acc-pseudo.is-vide:active{transform:translateY(5px);box-shadow:0 0 0 #3A22B0,0 12px 22px -18px rgba(52,34,150,.55)}
html.lq #scr-compte .plus-details-body>.acc-pseudo.is-vide .acc-pseudo-av{border:2.5px dashed rgba(255,255,255,.75);background:rgba(255,255,255,.12);color:#fff;
  box-shadow:none;rotate:0deg}
html.lq #scr-compte .plus-details-body>.acc-pseudo.is-vide .acc-pseudo-t b{font-size:20px}
html.lq #scr-compte .plus-details-body>.acc-pseudo .acc-pseudo-go{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--sun);box-shadow:0 3px 0 var(--sun-lip)}
html.lq #scr-compte .plus-details-body>.acc-pseudo .acc-pseudo-go svg.chev{width:20px!important;height:20px!important;color:var(--ink)!important;stroke-width:3}
/* À l’ouverture de la feuille : la carte arrive, l’avatar tourne en place, le trait se dessine, les confettis éclatent.
   Les images-clés partent d’un état et finissent sur le style au repos : si l’animation saute, tout reste visible. */
html.lq #plus-profile-settings[open] .plus-details-body>.acc-pseudo{animation:accPsIn .5s var(--pop) backwards}
html.lq #plus-profile-settings[open] .plus-details-body>.acc-pseudo .acc-pseudo-av{animation:accPsAv .65s var(--pop) .1s backwards}
html.lq #plus-profile-settings[open] .plus-details-body>.acc-pseudo .acc-pseudo-sw path{animation:accPsDraw .8s cubic-bezier(.3,.7,.4,1) .38s backwards}
html.lq #plus-profile-settings[open] .plus-details-body>.acc-pseudo::after{animation:accPsConf .6s var(--pop) .5s backwards}
html.lq #plus-profile-settings[open] .plus-details-body>.acc-pseudo .acc-pseudo-t small::before{animation:accPsPing 2.4s ease-out 1.2s infinite}
@keyframes accPsIn{from{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes accPsAv{from{scale:.4;rotate:-30deg}}
@keyframes accPsDraw{from{stroke-dashoffset:1}}
@keyframes accPsConf{from{opacity:0;scale:.2;rotate:-50deg}}
@keyframes accPsPing{0%{box-shadow:0 0 0 0 rgba(159,240,198,.6)}70%,100%{box-shadow:0 0 0 9px rgba(159,240,198,0)}}
/* Mouvement réduit : mêmes sélecteurs que les animations (sinon elles l’emportent et le trait attend son délai). */
@media (prefers-reduced-motion:reduce){
  html.lq #plus-profile-settings[open] .plus-details-body>.acc-pseudo,
  html.lq #plus-profile-settings[open] .plus-details-body>.acc-pseudo .acc-pseudo-av,
  html.lq #plus-profile-settings[open] .plus-details-body>.acc-pseudo .acc-pseudo-sw path,
  html.lq #plus-profile-settings[open] .plus-details-body>.acc-pseudo::after,
  html.lq #plus-profile-settings[open] .plus-details-body>.acc-pseudo .acc-pseudo-t small::before{animation:none}
  html.lq #scr-compte .plus-details-body>.acc-pseudo.is-vide{transition:none}
}
html.lq[data-motion="reduce"] #plus-profile-settings[open] .plus-details-body>.acc-pseudo,
html.lq[data-motion="reduce"] #plus-profile-settings[open] .plus-details-body>.acc-pseudo .acc-pseudo-av,
html.lq[data-motion="reduce"] #plus-profile-settings[open] .plus-details-body>.acc-pseudo .acc-pseudo-sw path,
html.lq[data-motion="reduce"] #plus-profile-settings[open] .plus-details-body>.acc-pseudo::after,
html.lq[data-motion="reduce"] #plus-profile-settings[open] .plus-details-body>.acc-pseudo .acc-pseudo-t small::before{animation:none!important}

/* 53. Mon compte (Elisa, 31 octobre, 18 h 49) : « pour aide, fais plutôt l’onglet pour contacter, reporter un bug » et
   « comprendre mes données dans Données et confidentialité ».
   53a. Tes données, tes choix (6 novembre, 10 h 16 : « le texte est beaucoup trop dense pour une application mobile ») : quatre
   rubriques fermées au départ, une carte blanche chacune ; le fond lilas seulement sur le titre de la rubrique ouverte. */
html.lq #scr-compte .dc{display:flex;flex-direction:column;gap:10px;margin:16px 18px 4px}
html.lq #scr-compte .dc-r{border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);overflow:hidden}
/* Ouverte depuis « Confidentialité des parties » (8 novembre, 9 h 57) : la rubrique se cale sous l’en-tête collant de la feuille. */
html.lq #scr-compte .dc-r{scroll-margin-top:110px}
html.lq #scr-compte .dc-t{display:flex;align-items:center;gap:12px;width:100%;min-height:72px;margin:0;padding:12px 14px;box-sizing:border-box;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s var(--spring-ios)}
html.lq #scr-compte .dc-r.is-open .dc-t{background:var(--accent-soft)}
html.lq #scr-compte .dc-t:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;border-radius:18px}
html.lq #scr-compte .dc-ico{flex:none;display:grid;place-items:center;width:42px;height:42px;rotate:-6deg}
html.lq #scr-compte .dc-ico svg{display:block;width:42px;height:42px}
html.lq #scr-compte .dc-tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
html.lq #scr-compte .dc-tt b{font:700 16.5px/1.2 var(--display);color:var(--ink)}
html.lq #scr-compte .dc-tt small{font:600 13.5px/1.35 var(--ui);color:var(--ink-2)}
html.lq #scr-compte .dc-chev{flex:none;width:20px;height:20px;color:var(--accent-ink);transition:transform .22s var(--spring-ios)}
html.lq #scr-compte .dc-t.is-open .dc-chev{transform:rotate(180deg)}
html.lq #scr-compte .dc-c{padding:14px 16px 16px;color:var(--ink-2);font-size:14.5px;line-height:1.5;animation:ctReveal .26s var(--spring-ios) both}
html.lq #scr-compte .dc-c[hidden]{display:none}
html.lq #scr-compte .dc-l{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:8px}
html.lq #scr-compte .dc-l li::marker{color:var(--accent)}
html.lq #scr-compte .dc-l b{color:var(--ink)}
html.lq #scr-compte .dc-note{margin:12px 0 0;font:600 13px/1.35 var(--ui);color:var(--accent-ink)}
html.lq #scr-compte .dc-actions{margin:-6px 0 14px;border-bottom:2px solid var(--line-2)}
html.lq #scr-compte .dc-actions>.acc-row{min-height:62px;padding:10px 0!important;gap:12px!important;background:#fff!important}
html.lq #scr-compte .dc-actions>.acc-row+.acc-row{border-top:2px solid var(--line-2)}
html.lq #scr-compte .dc-actions>.acc-row::after{display:none!important}
html.lq #scr-compte .dc-legal-t{margin:18px 18px 2px;font:700 12.5px/1.2 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
html.lq[data-reading="large"] #scr-compte .dc-tt b{font-size:18px}
html.lq[data-reading="large"] #scr-compte .dc-tt small,html.lq[data-reading="large"] #scr-compte .dc-c{font-size:16px}
@keyframes ctReveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* 53b. Nous contacter : le sujet en pastilles (comme les créneaux du rappel), le message, l’e-mail, les infos techniques d’un
   bug, l’envoi ; puis le merci. */
html.lq #scr-compte .ct-form{padding:16px 18px 6px}
html.lq #scr-compte .ct-l{display:block;margin:0 0 8px;font:700 15px/1.25 var(--display);color:var(--ink)}
html.lq #scr-compte .ct-l small{margin-left:4px;font:600 13px/1 var(--ui);color:var(--ink-3)}
html.lq #scr-compte .ct-types{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
html.lq #scr-compte .ct-type{min-height:44px;margin:0;padding:0 14px;border:2px solid var(--line);border-radius:14px;background:#fff;color:var(--ink-2);
  font:700 14.5px/1 var(--display);box-shadow:0 3px 0 var(--lip);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform .12s var(--press),box-shadow .12s var(--press),background-color .15s,color .15s}
html.lq #scr-compte .ct-type:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
html.lq #scr-compte .ct-type.on{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 3px 0 var(--accent-lip)}
html.lq #scr-compte .ct-msg{position:relative;margin:0 0 18px}
html.lq #scr-compte .ct-msg textarea,html.lq #scr-compte .ct-mail{display:block;width:100%;box-sizing:border-box;margin:0;padding:13px 14px;
  border:2px solid #E1DAFF;border-radius:18px;background:#F7F5FF;color:var(--ink);font:500 16px/1.45 var(--ui);outline:none;
  -webkit-appearance:none;appearance:none;box-shadow:inset 0 2px 0 rgba(27,22,64,.04);transition:border-color .16s,background .16s,box-shadow .16s}
html.lq #scr-compte .ct-msg textarea{min-height:112px;padding-bottom:32px;resize:none}
html.lq #scr-compte .ct-msg textarea:focus,html.lq #scr-compte .ct-mail:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 4px var(--accent-soft)}
html.lq #scr-compte .ct-msg textarea::placeholder,html.lq #scr-compte .ct-mail::placeholder{color:#A49FC0}
html.lq #scr-compte .ct-count{position:absolute;right:14px;bottom:11px;font:600 12px/1 var(--ui);color:var(--ink-3);pointer-events:none}
html.lq #scr-compte .ct-mail{min-height:52px;margin-bottom:16px}
html.lq #scr-compte .ct-infos{display:flex;align-items:flex-start;gap:12px;margin:0;padding:12px 14px;border:2px solid var(--line);border-radius:16px;background:#fff;cursor:pointer}
html.lq #scr-compte .ct-infos[hidden]{display:none}
html.lq #scr-compte .ct-infos input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--accent)}
html.lq #scr-compte .ct-infos span{display:flex;flex-direction:column;gap:3px;min-width:0}
html.lq #scr-compte .ct-infos b{font:700 14.5px/1.25 var(--display);color:var(--ink)}
html.lq #scr-compte .ct-infos small{font:500 12.5px/1.35 var(--ui);color:var(--ink-3);overflow-wrap:anywhere}
html.lq #scr-compte .ct-etat{margin:12px 0 0;font:600 14px/1.35 var(--ui);color:var(--ink-2)}
html.lq #scr-compte .ct-etat:empty{display:none}
html.lq #scr-compte .ct-etat.is-ko{color:var(--danger)}
html.lq #scr-compte .ct-go{display:block;width:100%;margin:16px 0 0}
html.lq #scr-compte .ct-go:disabled{opacity:.7}
html.lq #scr-compte .ct-merci{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 24px 12px;text-align:center;animation:ctReveal .3s var(--spring-ios) both}
html.lq #scr-compte .ct-merci-stk{display:block;width:76px;height:76px;rotate:-8deg}
html.lq #scr-compte .ct-merci-stk svg{display:block;width:100%;height:100%}
html.lq #scr-compte .ct-merci>b{font:700 21px/1.2 var(--display);color:var(--ink)}
html.lq #scr-compte .ct-merci p{margin:0;font-size:15px;line-height:1.45;color:var(--ink-2)}
html.lq #scr-compte .ct-merci p b{font-weight:700;color:var(--accent-ink)}
html.lq #scr-compte .ct-encore{width:100%;min-height:52px;margin-top:12px}
@media (prefers-reduced-motion:reduce){
  html.lq #scr-compte .dc-chev,html.lq #scr-compte .dc-t,html.lq #scr-compte .ct-type{transition:none}
  html.lq #scr-compte .dc-c,html.lq #scr-compte .ct-merci{animation:none}
}

/* 54. Défis Aéroport (Elisa, 1er novembre, 0 h 55 : « je veux les défis sur la base aeroport mtn »).
   54a. La situation au-dessus de la mission, en texte courant ; « Un indice » se déplie sous la consigne, en carte jaune. */
html.lq .defi-ctx{margin:0 4px 14px;font:500 15.5px/1.55 var(--ui);color:var(--ink-2)}
html.lq #scr-lesson .consigne>p.defi-ctx{margin:0;font:500 16px/1.55 var(--ui)!important;letter-spacing:normal;color:var(--ink)}
html.lq .defi-indice{margin:12px 0 16px;border:2px solid #FBE5A6;border-radius:18px;background:var(--sun-soft);box-shadow:0 3px 0 #F2D78B;overflow:hidden}
html.lq .defi-indice summary{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;font:700 15px/1.2 var(--display);color:#8A5A00;
  list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.lq .defi-indice summary::-webkit-details-marker{display:none}
html.lq .defi-indice summary::before{content:'💡';font-size:18px}
html.lq .defi-indice summary::after{content:'';margin-left:auto;width:9px;height:9px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
  rotate:45deg;translate:0 -3px;transition:rotate .2s var(--press)}
html.lq .defi-indice[open] summary::after{rotate:-135deg;translate:0 2px}
html.lq .defi-indice p{margin:0;padding:0 14px 14px;font:500 14.5px/1.5 var(--ui);color:var(--ink)}
/* 54b. Un niveau sans défi pour l’instant : grisé, « Bientôt », pas touchable. */
html.lq .room-level.is-bientot,html.lq .room-level:disabled{opacity:.5;cursor:default;box-shadow:none!important;transform:none!important}
html.lq .jeu-seg button:disabled{opacity:.45;cursor:default}
@media (prefers-reduced-motion:reduce){html.lq .defi-indice summary::after{transition:none}}
/* 54c. Elisa, 1er novembre, 1 h 01 (« texte coupé ») : le nom d’un projet s’affiche en entier dans « Tes projets », sur plusieurs
   lignes s’il le faut — un nom de fichier importé (Dictionnaire_Bpifrance_…) se coupe après ses _ - . (des <wbr>), et au milieu
   d’un mot seulement si un morceau ne tient pas sur la ligne. */
html.lq .console-project-copy b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word;line-height:1.25}
/* 54d. Elisa, 1er novembre, 1 h 01, réf. 1 : la salle de défi (on rejoint la salle, salle introuvable, vide, complète) dans la DA du
   site — la carte de l’écran Défis, le code en tuiles comme les touches du site, trois points qui sautent pendant la connexion. */
html.lq #jeu-root .jeu-etat{margin:6px 0 0;animation:dbColIn .45s cubic-bezier(.2,.8,.3,1.2) both}
html.lq #jeu-root .jeu-etat .room-head h1{margin:4px 0 0;color:var(--sun-hi)!important;font:700 24px/1.12 var(--display)!important;letter-spacing:-.02em!important}
html.lq #jeu-root .jeu-etat.is-lost .room-stk{rotate:6deg}
html.lq .jeu-etat-code{display:flex;flex-direction:column;align-items:center;gap:10px;margin:18px 0 16px}
html.lq .jeu-etat-code small{font:800 11.5px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
html.lq .jeu-etat-code>span{display:flex;gap:6px}
html.lq .jeu-etat-code b{display:grid;place-items:center;width:40px;height:48px;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--accent-ink);
  font:700 22px/1 var(--mono);box-shadow:0 3px 0 var(--lip);animation:jeuTuile .5s var(--pop) calc(.15s + var(--i) * 60ms) both}
html.lq .jeu-etat.is-lost .jeu-etat-code b{color:var(--ink-3);border-style:dashed;box-shadow:none}
@keyframes jeuTuile{from{opacity:0;transform:translateY(8px) rotate(-6deg)}}
html.lq .jeu-etat-wait{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 0 6px;font:700 14.5px/1.3 var(--display);color:var(--ink-2)}
html.lq .jeu-etat-wait i{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:jeuSaut 1s ease-in-out infinite}
html.lq .jeu-etat-wait i:nth-child(2){animation-delay:.15s;background:var(--sun)}
html.lq .jeu-etat-wait i:nth-child(3){animation-delay:.3s;background:var(--mint)}
html.lq .jeu-etat-wait span{margin-left:6px}
@keyframes jeuSaut{0%,60%,100%{transform:none}30%{transform:translateY(-6px)}}
html.lq .jeu-etat .room-go{display:flex;align-items:center;justify-content:center;gap:10px;width:100%}
@media (prefers-reduced-motion:reduce){html.lq #jeu-root .jeu-etat,html.lq .jeu-etat-code b,html.lq .jeu-etat-wait i{animation:none}}
html[data-motion="reduce"].lq #jeu-root .jeu-etat,html[data-motion="reduce"].lq .jeu-etat-code b,html[data-motion="reduce"].lq .jeu-etat-wait i{animation:none!important}
/* 54e. Le crayon des notes dans la DA du site, mais discret : un vrai crayon dessiné (plus le caractère ✎) ; dans une leçon ou un
   défi, une pastille lilas claire sans bordure, le crayon violet. Hors leçon, le bouton violet garde son crayon blanc. */
html.lq .fab .fab-pen{display:block;width:22px;height:22px;margin:auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html.lq .fab .fab-pen-b{fill:currentColor;fill-opacity:.14}
html.lq body:not(.in-lesson) .fab{color:#fff!important}
html.lq body:not(.in-lesson) .fab .fab-pen{width:24px;height:24px}
html.lq body.in-lesson .fab{display:grid;place-items:center;background:var(--accent-soft)!important;color:var(--accent-ink)!important;border:0!important;
  box-shadow:0 2px 0 #DDD5FF!important;transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq body.in-lesson .fab:active{transform:translateY(2px);box-shadow:0 0 0 #DDD5FF!important}
html.lq body.in-lesson .fab .fab-pen{width:19px;height:19px}
/* 54f. Elisa, 1er novembre, 1 h 07 : « Tu joues en tant que » dans la DA du site, la carte du pseudo de Mon compte en plus compact —
   aplat violet quadrillé, avatar lilas contouré d’encre, cadenas dans sa pastille jaune, surtitre menthe, @ jaune. Sans pseudo :
   la même carte, avatar en pointillés, pastille jaune pour aller le choisir. */
html.lq body .jeu-me{position:relative;isolation:isolate;gap:14px;padding:14px 14px 14px 14px;border:0!important;border-radius:20px;color:#fff;
  background:radial-gradient(120px 90px at 100% 0%,rgba(255,255,255,.18),transparent 70%),linear-gradient(170deg,#6E50F6 0%,#5538E6 48%,#4529CC 100%)!important;
  box-shadow:0 4px 0 #3A22B0,0 14px 24px -16px rgba(52,34,150,.6)!important}
html.lq body .jeu-me::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px) 0 0/20px 20px;
  -webkit-mask:linear-gradient(115deg,transparent 35%,#000 100%);mask:linear-gradient(115deg,transparent 35%,#000 100%)}
html.lq body .jeu-me-av{position:relative;flex:none}
html.lq body .jeu-me .jeu-av{display:grid;place-items:center;width:46px;height:46px;box-sizing:border-box;border:2.5px solid #fff;border-radius:50%;
  background:#C9BCFF!important;color:var(--ink)!important;font:800 20px/1 var(--display);box-shadow:0 0 0 2px var(--ink),0 3px 0 2px var(--ink)!important;rotate:-4deg}
html.lq body .jeu-me .jeu-me-lock{position:absolute;right:-9px;bottom:-7px;display:grid;place-items:center;width:23px;height:23px;box-sizing:border-box;
  border:2px solid #fff;border-radius:50%;background:var(--sun);color:var(--ink);box-shadow:0 2px 0 rgba(27,22,64,.3);rotate:-8deg}
html.lq body .jeu-me .jeu-me-lock svg{display:block;width:11px;height:11px}
html.lq body .jeu-me .jeu-me-lock svg *{stroke-width:2.9}
html.lq body .jeu-me-t{gap:5px}
html.lq body .jeu-me-t small{display:inline-flex;align-items:center;gap:7px;color:var(--mint);font:800 11px/1.2 var(--ui);letter-spacing:.07em;text-transform:uppercase}
html.lq body .jeu-me-t small::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px rgba(159,240,198,.22)}
html.lq body .jeu-me-t b{font:800 19px/1.15 var(--display);letter-spacing:-.01em;color:#fff}
html.lq body .jeu-me-at{font-style:normal;color:var(--sun)}
html.lq body .jeu-me.is-vide{cursor:pointer;transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq body .jeu-me.is-vide:active{transform:translateY(4px);box-shadow:0 0 0 #3A22B0!important}
/* La coche verte après le pseudo (Elisa, 8 novembre, 9 h 57 : « met la coche valide à côté du pseudo ») : le pseudo est réservé ; un long
   pseudo se coupe avant elle, elle reste visible. */
html.lq .jeu-me-nom{display:flex;align-items:center;gap:7px;min-width:0}
html.lq .jeu-me-nom>b{min-width:0}
/* 10 h 38 (« bien à droite, à l’opposé ») : la coche ferme la ligne, en face de l’avatar, un peu plus grande */
html.lq .jeu-me-ok{flex:none;display:inline-grid;width:24px;height:24px;margin-left:auto;border-radius:50%;color:#1E9E57;box-shadow:0 0 0 2px #fff}
html.lq .jeu-me-ok svg{display:block;width:100%;height:100%}
html.lq body .jeu-me.is-vide .jeu-av{border:2.5px dashed rgba(255,255,255,.75)!important;background:rgba(255,255,255,.12)!important;color:#fff!important;box-shadow:none!important;rotate:0deg}
html.lq body .jeu-me-go{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--sun);color:var(--ink);box-shadow:0 3px 0 var(--sun-lip)}
html.lq body .jeu-me-go svg{width:18px;height:18px}
/* 54g. Même feuille « Profil et objectif » : sous la carte du pseudo, « Personnalisation » et « Revoir l’intro » deviennent des cartes
   du site (blanches, bord lilas, relief en dessous qui s’écrase au toucher), dans la même marge, au lieu de lignes séparées par
   un trait (1 h 07 : « les autres boutons du coup ne sont pas cohérents »). */
html.lq #plus-profile-settings .plus-details-body>.acc-row{width:calc(100% - 36px);margin:0 18px 12px;min-height:72px;padding:14px 14px 14px 14px!important;
  border:2px solid var(--line)!important;border-radius:20px;background:#fff!important;box-shadow:0 4px 0 var(--lip);
  transition:transform .12s var(--press),box-shadow .12s var(--press),border-color .15s}
html.lq #plus-profile-settings .plus-details-body>.acc-row+.acc-row{border-top:2px solid var(--line)!important}
html.lq #plus-profile-settings .plus-details-body>.acc-row:active{transform:translateY(4px)!important;box-shadow:0 0 0 var(--lip);background:#fff!important;border-color:#D6CEF3!important}
html.lq #plus-profile-settings .plus-details-body>.acc-row .acc-row-ico{border-radius:14px}
html.lq #plus-profile-settings .plus-details-body>.acc-note{margin:4px 22px 0}
/* 54h. Tuiles Défis (Elisa, 1er novembre, 1 h 12 : « améliore l’ui ux des kpi »). Mon compte : les points en grand, la réussite
   en pastille lilas (grise tant qu’aucune manche n’est jouée). Planning : un libellé court à la taille des autres tuiles, les
   points dans une pièce jaune. */
html.lq .acct-stat .kpi-chip{margin-top:7px;padding:4px 9px;border-radius:99px;background:var(--accent-soft);color:var(--accent-ink);
  font:700 12px/1.2 var(--display);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
html.lq .acct-stat .kpi-chip.is-vide{background:var(--surface-2);color:var(--ink-3)}
html.lq .pgr-stat.is-d{display:flex;flex-direction:column}
html.lq .pgr-stat.is-d>p{margin:8px 0 0!important;font:600 11.5px/1.3 var(--ui)!important;color:var(--ink-3)!important}
html.lq .kpi-pts{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:3px 8px 3px 4px;border-radius:99px;
  background:var(--sun-soft);box-shadow:inset 0 0 0 1.5px #FBE5A6;color:#8A5A00;font:800 12px/1.2 var(--display);white-space:nowrap}
html.lq .kpi-pts svg{flex:none;width:16px;height:16px}
html.lq .pgr-stat.is-d .kpi-pts{max-width:100%;gap:4px;padding:2px 7px 2px 3px;font-size:11.5px}
html.lq .pgr-stat.is-d .kpi-pts svg{width:14px;height:14px}
/* 54i. Elisa, 1er novembre, 1 h 20. Le bouton Schéma pendant un défi : il pulse et se balance doucement, avec une pastille jaune,
   jusqu’à ce qu’on l’ouvre (« il faudra la regarder avant »). En mouvement réduit : l’anneau et la pastille, sans mouvement. */
html.lq .sch-attn{position:relative;overflow:visible}
html.lq .sch-attn::after{content:'';position:absolute;right:-3px;top:-3px;width:9px;height:9px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 2px #fff}
html.lq .ed-schema.sch-attn{background:rgba(255,255,255,.2);box-shadow:0 0 0 0 rgba(159,240,198,.7);animation:schAttn 2.2s ease-in-out infinite}
html.lq .ed-schema.sch-attn::after{box-shadow:0 0 0 2px #2A2350}
html.lq .btn-ghost.sch-attn{border-color:var(--accent)!important;color:var(--accent-ink)!important;box-shadow:0 0 0 0 rgba(106,77,244,.45);animation:schAttnL 2.2s ease-in-out infinite}
@keyframes schAttn{0%{box-shadow:0 0 0 0 rgba(159,240,198,.7);rotate:0deg}12%{rotate:-4deg}24%{rotate:4deg}36%{rotate:0deg}70%,100%{box-shadow:0 0 0 9px rgba(159,240,198,0)}}
@keyframes schAttnL{0%{box-shadow:0 0 0 0 rgba(106,77,244,.45);rotate:0deg}12%{rotate:-3deg}24%{rotate:3deg}36%{rotate:0deg}70%,100%{box-shadow:0 0 0 9px rgba(106,77,244,0)}}
@media (prefers-reduced-motion:reduce){html.lq .sch-attn{animation:none!important;box-shadow:0 0 0 2px var(--mint)!important}}
html[data-motion="reduce"].lq .sch-attn{animation:none!important;box-shadow:0 0 0 2px var(--mint)!important}
/* Le chrono d’un défi seul, à droite du surtitre ; vert quand le défi est trouvé. */
html.lq .defi-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
html.lq .defi-top .l-kicker{margin:0!important}
html.lq .defi-top .jeu-timer.is-ok{background:var(--ok-soft,#E3F6EC)!important;color:var(--ok,#14955A)!important;box-shadow:0 3px 0 #9FDDBC}
html.lq .defi-fin .ex-code{margin:10px 0 12px}
html.lq .defi-fin .room-go{display:flex;align-items:center;justify-content:center;width:100%}
/* 54j. Schéma : sur un téléphone, « → passagers » ne se coupe plus en deux et le type (INTEGER) ne déborde plus de la carte : la
   ligne passe à la ligne d’un bloc s’il le faut. */
html.lq #schema-sheet .sch-col{flex-wrap:wrap;row-gap:4px}
html.lq #schema-sheet .sch-col .cref{white-space:nowrap}
html.lq #schema-sheet .sch-col .ct{flex:none;margin-left:auto}
/* 54k. Console › Tables : le bouton « Importer » n’a plus son relief coupé (Elisa, 1er novembre, 1 h 29 : « bouton coupé ») — la barre
   défile à l’horizontale, ce qui coupait tout ce qui dépasse en bas ; elle garde la place du relief et de l’enfoncement. */
html.lq #scr-console .console-schema-panel .db-bar{padding:2px 2px 6px;margin:-2px -2px -6px}
/* 54l. Elisa, 1er novembre, 1 h 32 : « pas assez d’espace sous les boutons flèche ». La barre compacte (quand la page défile) descend
   de 8 px sous la pastille du retour : sa ligne ne touche plus le relief du bouton. Le titre reste centré sur la pastille, et la
   marge négative suit pour que rien d’autre ne bouge. */
html.lq #app .p-bar{height:calc(var(--safe-top) + 52px);padding-bottom:8px;box-sizing:border-box;margin-bottom:calc(-1 * (var(--safe-top) + 52px))}
/* 54m. Elisa, 1er novembre, 1 h 45 : la description de chaque table et colonne d’Aéroport. Schéma des défis : le rôle de la table
   sous son nom, et sous chaque colonne une ligne grise ; Console : la même ligne sous chaque colonne dépliée. */
html.lq #schema-sheet .sch-tnote{margin:0;padding:10px 14px 12px;font:500 13px/1.45 var(--ui);color:var(--ink-2);box-shadow:inset 0 -2px 0 var(--line-2)}
html.lq #schema-sheet .sch-col .cd,html.lq #scr-console .db-col .cd{flex-basis:100%;order:9;margin:2px 0 0;font:500 12.5px/1.4 var(--ui);color:var(--ink-3);white-space:normal}
/* Le cadre exemple de chaque colonne (Elisa, 5 novembre, 7 h 38 : « ex : 4 », « ex : menu ») : sa valeur, devant ce que dit la
   colonne ; une clé étrangère y dit où elle va (« ex : 2 → categories »), sur sa propre ligne, sans repousser le type. */
html.lq #schema-sheet .sch-col .cxl{flex-basis:100%;order:9;min-width:0;margin:3px 0 0;font:500 12.5px/1.55 var(--ui);color:var(--ink-3)}
html.lq #schema-sheet .sch-col .cx{display:inline-flex;align-items:center;gap:5px;max-width:100%;overflow:hidden;margin:0 7px 0 0;padding:3px 8px;border-radius:8px;background:#F6F4FD;box-shadow:inset 0 0 0 1.5px var(--line);vertical-align:1px;font:600 12px/1.2 var(--mono);color:var(--ink-2)}
html.lq #schema-sheet .sch-col .cx small{flex:none;font:700 11px/1 var(--display);color:var(--ink-3)}
html.lq #schema-sheet .sch-col .cx b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;line-height:1.4;color:var(--ink)}
html.lq #schema-sheet .sch-col .cx.is-null b{font-style:italic;font-weight:600;color:var(--ink-3)}
html.lq #schema-sheet .sch-col .cx.is-fk{background:#EAFBF2;box-shadow:inset 0 0 0 1.5px #B9EED3}
html.lq #schema-sheet .sch-col .cx .cref{flex:none;margin:0;font:700 12px/1.2 var(--mono)}
html.lq #schema-sheet .sch-col .cxl .cd{margin:0}
html.lq #scr-console .db-col{flex-wrap:wrap;row-gap:2px}
/* 54n. Elisa, 1er novembre, 1 h 48 : « enlever le stickers » de la barre Schéma de la Console — plus d’autocollant de base ni de
   pictogramme : le titre, ses pastilles (tables, lignes) et « Voir / Masquer ». */
html.lq #scr-console .console-schema-summary .console-schema-icon{display:none}
html.lq #scr-console .console-schema-summary{grid-template-columns:minmax(0,1fr) auto 19px!important;padding-left:18px}
/* 54o. Elisa, 1er novembre, 8 h 55 : le pas à pas en grand après une exécution. La carte du site au-dessus du résultat : surtitre
   violet, titre, les étapes en pastilles (FROM → WHERE → SELECT…) qui s’allument l’une après l’autre en boucle, et un gros bouton
   violet dont la flèche respire. Le petit bouton de l’éditeur pulse (anneau menthe) tant qu’on n’a pas ouvert le pas à pas. */
html.lq .viz-cta{margin:0 0 14px;padding:16px;border:2px solid #D9CFFF;border-radius:22px;background:linear-gradient(180deg,#F6F2FF,#fff);box-shadow:0 4px 0 #E3DAFF;
  animation:vizCtaIn .5s var(--pop) both}
html.lq .viz-cta-h{display:flex;flex-direction:column;gap:3px}
html.lq .viz-cta-k{font:800 11.5px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
html.lq .viz-cta-h b{font:700 18px/1.2 var(--display);color:var(--ink)}
html.lq .viz-cta-h small{font:500 13px/1.35 var(--ui);color:var(--ink-3)}
html.lq .viz-cta-steps{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin:12px 0 14px;padding:0;list-style:none}
html.lq .viz-cta-steps li{position:relative;display:inline-flex;align-items:center;padding:6px 10px;border-radius:10px;background:#fff;border:1.5px solid var(--line);
  color:var(--ink-3);font:700 12px/1 var(--mono);animation:vizStep calc(var(--n) * .7s) ease-in-out calc(.4s + var(--i) * .7s) infinite}
html.lq .viz-cta-steps li+li::before{content:'→';position:absolute;left:-16px;top:50%;translate:0 -50%;color:#B9AEE6;font:600 13px/1 var(--ui)}
@keyframes vizStep{0%,20%,100%{color:var(--ink-3);background:#fff;border-color:var(--line)}4%,15%{color:#fff;background:var(--accent);border-color:var(--accent);transform:translateY(-2px)}}
html.lq .viz-cta-go{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;border:0;border-radius:16px;background:var(--accent);color:#fff;
  font:700 17px/1 var(--display);box-shadow:0 4px 0 var(--accent-lip);cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq .viz-cta-go:active{transform:translateY(4px);box-shadow:0 0 0 var(--accent-lip)}
html.lq .viz-cta-go svg{width:18px;height:18px;fill:currentColor;animation:vizGo 1.6s ease-in-out infinite}
@keyframes vizGo{0%,100%{transform:none}50%{transform:translateX(3px) scale(1.12)}}
@keyframes vizCtaIn{from{opacity:0;transform:translateY(10px) scale(.98)}}
html.lq #scr-console .console-viz-tool.viz-attn{position:relative;overflow:visible;background:rgba(255,255,255,.18);animation:schAttn 2.2s ease-in-out infinite}
html.lq #scr-console .console-viz-tool.viz-attn::after{content:'';position:absolute;right:4px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 2px #2A2350}
@media (prefers-reduced-motion:reduce){html.lq .viz-cta,html.lq .viz-cta-steps li,html.lq .viz-cta-go svg,html.lq #scr-console .console-viz-tool.viz-attn{animation:none!important}}
html[data-motion="reduce"].lq .viz-cta,html[data-motion="reduce"].lq .viz-cta-steps li,html[data-motion="reduce"].lq .viz-cta-go svg,html[data-motion="reduce"].lq #scr-console .console-viz-tool.viz-attn{animation:none!important}
/* 54p. Elisa, 1er novembre, 8 h 59 : les indices d’un défi raté, un par essai, trois au plus, jamais la requête. Des cartes jaunes
   empilées sous l’éditeur (la DA des autocollants « sun » du site) : « Indice 1/3 » en pastille, le titre, le texte ; la dernière
   arrive en sautant. Le squelette du 3e indice dans le bloc de code de l’appli. */
html.lq .defi-indices{display:flex;flex-direction:column;gap:10px;margin:14px 0 4px}
html.lq .defi-ind{padding:12px 14px 13px;border:2px solid #FBE5A6;border-radius:18px;background:var(--sun-soft);box-shadow:0 3px 0 #F2D78B}
html.lq .defi-ind.is-new{animation:defiInd .5s var(--pop) both}
html.lq .defi-ind>b{display:flex;align-items:center;gap:8px;margin-bottom:5px;font:700 15px/1.25 var(--display);color:#6B4500}
html.lq .defi-ind>b span{flex:none;padding:3px 8px;border-radius:99px;background:var(--sun);color:var(--ink);font:800 11px/1.2 var(--ui);letter-spacing:.03em}
html.lq .defi-ind-t{font:500 14.5px/1.5 var(--ui);color:var(--ink)}
html.lq .defi-ind-t code{padding:1px 6px;border-radius:6px;background:#fff;color:var(--accent-ink);font:600 13px/1.4 var(--mono)}
html.lq .defi-ind-t .ex-code{margin-top:8px;white-space:pre-wrap}
html.lq .defi-ind-fin{margin:2px 4px 0;font:600 13px/1.45 var(--ui);color:var(--ink-3);text-align:center}
@keyframes defiInd{from{opacity:0;transform:translateY(8px) scale(.97) rotate(-1deg)}}
@media (prefers-reduced-motion:reduce){html.lq .defi-ind.is-new{animation:none}}
html[data-motion="reduce"].lq .defi-ind.is-new{animation:none!important}
/* Les indices suivent le résultat de près : la marge du bas (place de la barre fixe) passe sous les indices quand il y en a. */
html.lq #lesson-out:has(+ #hint-slot .defi-indices){padding-bottom:0!important}
html.lq #hint-slot:has(.defi-indices){padding-bottom:100px}
/* 54q. Elisa, 1er novembre, 9 h 12 : « trop de boutons encore, c’est pas UI/UX ». Une action principale à la fois.
   Avant d’exécuter : « Exécuter », et « Épingler » réduit à une icône carrée à sa droite (jaune quand la requête est épinglée).
   Après un SELECT : une seule rangée « Pas à pas » au-dessus du résultat, légère (lilas, sans bouton dans un bouton), avec la
   flèche de lecture qui respire et les étapes qui s’allument l’une après l’autre. */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.lq #scr-console .console-run-row{display:flex;align-items:stretch;gap:10px}
html.lq #scr-console .console-run-row .btn-run{flex:1 1 auto;width:auto}
html.lq #scr-console .console-run-row .console-pin-current.is-icon{flex:none;display:grid;place-items:center;width:58px;min-height:0;margin:0!important;padding:0!important;
  border:2px solid var(--line)!important;border-radius:16px!important;background:#fff!important;box-shadow:0 4px 0 var(--lip)!important}
html.lq #scr-console .console-run-row .console-pin-current.is-icon .console-pin-glyph{margin:0;width:30px;height:30px}
html.lq #scr-console .console-run-row .console-pin-current.is-icon .console-pin-glyph svg{width:100%;height:100%}
html.lq #scr-console .console-run-row .console-pin-current.is-icon.on{background:var(--sun-soft)!important;border-color:#FBE5A6!important;box-shadow:0 4px 0 #F2D78B!important}
html.lq #scr-console .console-run-row .console-pin-current.is-icon:active{transform:translateY(4px);box-shadow:0 0 0 var(--lip)!important}
html.lq #scr-console .console-run-row .console-pin-current.is-icon:disabled{opacity:.45;box-shadow:none!important}
html.lq .viz-row{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 12px;padding:10px 12px 10px 10px;border:0;border-radius:16px;background:var(--accent-soft);
  color:var(--accent-ink);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:inset 0 0 0 1.5px #DDD3FF;animation:vizCtaIn .45s var(--pop) both;transition:transform .12s var(--press)}
html.lq .viz-row:active{transform:scale(.98)}
html.lq .viz-row-play{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;box-shadow:0 3px 0 var(--accent-lip)}
html.lq .viz-row-play svg{width:15px;height:15px;margin-left:2px;fill:currentColor;animation:vizGo 1.6s ease-in-out infinite}
html.lq .viz-row-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
html.lq .viz-row-t b{font:700 15.5px/1.2 var(--display);color:var(--accent-lip)}
html.lq .viz-row-steps{display:flex;flex-wrap:wrap;gap:3px 20px}
html.lq .viz-row-steps i{position:relative;font:700 11px/1.3 var(--mono);font-style:normal;color:#8E84C8;animation:vizStepRow calc(var(--n) * .6s) ease-in-out calc(.3s + var(--i) * .6s) infinite}
html.lq .viz-row-steps i+i::before{content:"→";position:absolute;left:-15px;color:#C4BAEC;font-family:var(--ui)}
@keyframes vizStepRow{0%,22%,100%{color:#8E84C8}5%,16%{color:var(--accent-ink)}}
html.lq .viz-row-chev{flex:none;width:20px;height:20px;color:var(--accent)}
html.lq .viz-row-chev svg{width:100%;height:100%}
@media (prefers-reduced-motion:reduce){html.lq .viz-row,html.lq .viz-row-play svg,html.lq .viz-row-steps i{animation:none!important}}
html[data-motion="reduce"].lq .viz-row,html[data-motion="reduce"].lq .viz-row-play svg,html[data-motion="reduce"].lq .viz-row-steps i{animation:none!important}
/* 54r. Elisa, 1er novembre, 9 h 16 : « bug, on est un cran plus loin que ce qu’on devrait être (curseur dans la requête) ». Le texte
   visible de l’éditeur est une copie colorée posée sur la zone de saisie (dont le texte est transparent, mais qui porte le curseur).
   Les mots-clés y étaient en gras (600) et les commentaires en italique : sur Safari, quand la police n’a pas cette graisse, le
   navigateur la fabrique et les lettres s’élargissent — la copie se décale de la zone de saisie et le curseur paraît plus loin.
   La copie garde exactement la graisse et le style de la zone de saisie ; les mots-clés se distinguent par leur couleur seule. */
html.lq .editor-area pre code,html.lq .editor-area pre code span{font-weight:inherit!important;font-style:normal!important;letter-spacing:inherit!important;font-synthesis:none}
/* 54s. Elisa, 1er novembre, 9 h 19. « Améliore juste le pas à pas dans la DA du site » : la rangée devient une petite carte du site —
   aplat violet quadrillé, surtitre menthe, titre blanc, bouton de lecture jaune qui respire, étapes en pastilles qui s’allument
   en jaune l’une après l’autre, flèche menthe. */
html.lq .viz-row{position:relative;isolation:isolate;overflow:hidden;gap:14px;padding:13px 14px;border-radius:20px;color:#fff;
  background:linear-gradient(170deg,#6E50F6 0%,#5538E6 48%,#4529CC 100%);box-shadow:0 4px 0 #3A22B0,0 14px 26px -18px rgba(52,34,150,.6)}
html.lq .viz-row::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(140px 100px at 100% 0%,rgba(255,216,107,.25),transparent 70%),
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/20px 20px}
html.lq .viz-row:active{transform:translateY(4px);box-shadow:0 0 0 #3A22B0}
html.lq .viz-row-play{width:40px;height:40px;background:var(--sun);color:var(--ink);box-shadow:0 3px 0 var(--sun-lip)}
html.lq .viz-row-t b{display:flex;align-items:center;gap:8px;color:#fff;font-size:16px}
html.lq .viz-row-t b::before{content:'Comprendre';padding:2px 7px;border-radius:99px;background:rgba(159,240,198,.18);color:var(--mint);font:800 10px/1.4 var(--ui);letter-spacing:.07em;text-transform:uppercase}
html.lq .viz-row-steps{gap:5px 18px}
html.lq .viz-row-steps i{padding:3px 7px;border-radius:7px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.75);animation-name:vizStepDa}
html.lq .viz-row-steps i+i::before{left:-14px;color:rgba(159,240,198,.8)}
@keyframes vizStepDa{0%,22%,100%{background:rgba(255,255,255,.12);color:rgba(255,255,255,.75)}5%,16%{background:var(--sun);color:var(--ink)}}
html.lq .viz-row-chev{color:var(--mint)}
/* L’épingle, partout la même : une icône carrée (Console, note), qui se balance de temps en temps tant que rien n’est épinglé, et
   se plante quand on la touche (lqPinFx). */
html.lq .ne-row .sec.ne-pin{flex:none;width:58px;padding:0!important}
html.lq .ne-row .sec.ne-pin svg{width:30px;height:30px;margin:0}
html.lq #scr-console .console-run-row .console-pin-current.is-icon:not(.on):not(:disabled):not(.is-pin):not(.is-unpin) .lq-stk,
html.lq .ne-row .sec.ne-pin:not(.pin-on):not(.is-pin):not(.is-unpin) svg{animation:pinSway 4.5s ease-in-out 1.5s infinite;transform-origin:50% 85%}
@keyframes pinSway{0%,82%,100%{rotate:-14deg}87%{rotate:-26deg}92%{rotate:-4deg}96%{rotate:-17deg}}
html.lq #scr-console .console-run-row .console-pin-current.is-icon .lq-stk{rotate:-14deg;transition:rotate .3s var(--pop)}
html.lq #scr-console .console-run-row .console-pin-current.is-icon.on .lq-stk{rotate:0deg}
@media (prefers-reduced-motion:reduce){html.lq .viz-row-steps i,html.lq #scr-console .console-pin-current .lq-stk,html.lq .ne-row .sec.ne-pin svg{animation:none!important}}
html[data-motion="reduce"].lq .viz-row-steps i,html[data-motion="reduce"].lq #scr-console .console-pin-current .lq-stk,html[data-motion="reduce"].lq .ne-row .sec.ne-pin svg{animation:none!important}
html.lq .viz-row-t b::before{content:none}
html.lq .viz-row-steps{gap:4px 5px;align-items:center}
html.lq .viz-row-steps i{padding:2px 6px;font-size:10.5px}
html.lq .viz-row-steps i+i::before{content:none}
html.lq .viz-row-steps em{font:700 13px/1 var(--ui);font-style:normal;color:var(--mint)}
/* 54t. Elisa, 1er novembre, 9 h 24.
   Réf. 1 (« ce n’est pas corrigé ») : le curseur paraissait toujours un cran plus loin sur Safari. Safari ajoute de lui-même un
   léger espacement des lettres aux polices système d’Apple tant que l’espacement vaut « normal », et pas forcément de la même façon
   dans la zone de saisie et dans le texte affiché : sur une ligne, l’écart s’additionne lettre après lettre. Zone de saisie et copie
   colorée reçoivent les mêmes réglages explicites (espacement 0, ni crénage ni ligatures ni taille optique). */
html.lq .editor-area textarea,html.lq .editor-area pre,html.lq .editor-area pre code,html.lq .editor-area pre code span{
  letter-spacing:0!important;word-spacing:0!important;font-kerning:none!important;font-optical-sizing:none!important;
  font-variant-ligatures:none!important;font-feature-settings:"liga" 0,"calt" 0,"kern" 0!important;text-rendering:auto!important;font-stretch:normal!important}
/* Réf. 3 : « Prochaine carte » trop fade. Une mini-carte blanche de travers avec l’autocollant des cartes, le surtitre menthe et le
   nom de la carte en jaune, plus grand. */
html.lq .coll-overview-next.has-next{display:flex;align-items:center;gap:14px}
html.lq .coll-overview-next .coll-next-card{flex:none;display:grid;place-items:center;width:46px;height:58px;border-radius:10px;background:#fff;
  box-shadow:0 4px 0 rgba(27,22,64,.3);rotate:-8deg}
/* Plus d’animation en boucle (Elisa, 2 novembre, 21 h 58, Réf 2 : « icône pixelisée ») : bougée sans arrêt, la mini-carte passait
   sur un calque rastérisé et l’autocollant devenait flou sur iPhone. Elle reste penchée, nette. */
html.lq .coll-overview-next .coll-next-card i{display:block;width:34px;height:34px}
html.lq .coll-overview-next .coll-next-card svg{width:100%;height:100%}
html.lq .coll-overview-next.has-next>span:not(.coll-next-card){flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
html.lq .coll-overview-next.has-next small{color:var(--mint)!important;font:800 11.5px/1.2 var(--ui)!important;letter-spacing:.07em!important;text-transform:uppercase}
html.lq .coll-overview-next.has-next b{color:var(--sun-hi)!important;font:700 19px/1.15 var(--display)!important;letter-spacing:-.01em}
@keyframes collNext{0%,100%{rotate:-8deg;translate:0 0}50%{rotate:-3deg;translate:0 -3px}}
@media (prefers-reduced-motion:reduce){html.lq .coll-overview-next .coll-next-card{animation:none}}
html[data-motion="reduce"].lq .coll-overview-next .coll-next-card{animation:none!important}
html.lq #app .coll-overview-next.has-next small{color:var(--mint)!important;font:800 11.5px/1.2 var(--ui)!important;letter-spacing:.07em!important;text-transform:uppercase!important;opacity:1!important}
html.lq #app .coll-overview-next.has-next b{color:var(--sun-hi)!important}

/* 54u. Elisa, 1er novembre, 9 h 30 : « Nous contacter » — joindre une image, un fichier. Une rangée pointillée lilas
   (comme une zone de dépôt), le trombone dans une pastille violette ; chaque pièce est une carte blanche à liseré, sa
   miniature ou son extension, et une croix ronde pour la retirer. */
html.lq #scr-compte .ct-pj{margin:-6px 0 18px}
html.lq #scr-compte .ct-pieces{display:flex;flex-direction:column;gap:8px;margin:0 0 8px}
html.lq #scr-compte .ct-pieces[hidden],html.lq #scr-compte .ct-ajout[hidden]{display:none}
html.lq #scr-compte .ct-piece{display:flex;align-items:center;gap:12px;min-height:58px;padding:8px 8px 8px 8px;border:2px solid var(--line);
  border-radius:16px;background:#fff;box-shadow:0 3px 0 var(--lip);animation:ctPiece .28s var(--spring-ios) both}
html.lq #scr-compte .ct-piece-v{flex:none;display:grid;place-items:center;width:42px;height:42px;overflow:hidden;border-radius:11px;
  background:var(--accent-soft);color:var(--accent-ink);font:800 11px/1 var(--ui);letter-spacing:.04em}
html.lq #scr-compte .ct-piece-v.is-img{background:#F4F1FF}
html.lq #scr-compte .ct-piece-v img{display:block;width:100%;height:100%;object-fit:cover}
html.lq #scr-compte .ct-piece-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
html.lq #scr-compte .ct-piece-t b{overflow:hidden;font:700 14px/1.25 var(--ui);color:var(--ink);text-overflow:ellipsis;white-space:nowrap}
html.lq #scr-compte .ct-piece-t small{font:600 12px/1.2 var(--ui);color:var(--ink-3)}
html.lq #scr-compte .ct-piece-x{flex:none;display:grid;place-items:center;width:36px;height:36px;margin:0;padding:0;border:0;border-radius:50%;
  background:var(--accent-soft);color:var(--accent-ink);font:700 20px/1 var(--ui);cursor:pointer}
html.lq #scr-compte .ct-piece-x:active{transform:scale(.92)}
html.lq #scr-compte .ct-ajout{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;margin:0;padding:9px 14px 9px 9px;
  border:2px dashed #CFC6F5;border-radius:16px;background:#FAF8FF;color:var(--ink);text-align:left;cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease,transform .15s var(--spring-ios)}
html.lq #scr-compte .ct-ajout:hover,html.lq #scr-compte .ct-ajout.is-drop{border-color:var(--accent);background:var(--accent-soft)}
html.lq #scr-compte .ct-ajout.is-drop{transform:scale(1.01)}
html.lq #scr-compte .ct-ajout:active{transform:translateY(2px)}
html.lq #scr-compte .ct-ajout-i{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--accent);
  color:#fff;box-shadow:0 3px 0 var(--accent-lip);rotate:-6deg}
html.lq #scr-compte .ct-ajout-i svg{width:21px;height:21px}
html.lq #scr-compte .ct-ajout>span:last-child{display:flex;flex-direction:column;gap:3px;min-width:0}
html.lq #scr-compte .ct-ajout b{font:700 14.5px/1.25 var(--display);color:var(--ink)}
html.lq #scr-compte .ct-ajout small{font:600 12.5px/1.3 var(--ui);color:var(--ink-3)}
html.lq #scr-compte .ct-merci .ct-merci-pj{margin-top:4px;padding:10px 12px;border-radius:12px;background:#FFF6DA;color:#7A5300;font:600 13.5px/1.4 var(--ui)}
@keyframes ctPiece{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html.lq #scr-compte .ct-piece{animation:none}html.lq #scr-compte .ct-ajout{transition:none}}
html[data-motion="reduce"].lq #scr-compte .ct-piece{animation:none!important}

/* 54v. Elisa, 1er novembre, 9 h 43.
   Le niveau devient un badge, sous le prénom dans Mon compte et sous « Bonjour » à l’accueil : la pastille jaune soleil porte le
   numéro du palier (comme les étiquettes de la vitrine), le nom du palier suit. Sur le violet : verre clair et texte menthe ; sur
   l’accueil : pastille blanche en relief, comme les cartes. */
html.lq .lvl-badge{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;max-width:100%;box-sizing:border-box;padding:3px 12px 3px 3px;
  border-radius:999px;font:700 14px/1.2 var(--display);letter-spacing:-.005em;white-space:nowrap}
html.lq .lvl-badge>i{flex:none;display:inline-flex;align-items:baseline;gap:3px;height:24px;padding:0 9px;border-radius:999px;background:var(--sun);
  color:#3A2A00;font:800 14px/24px var(--display);font-style:normal;box-shadow:0 2px 0 var(--sun-lip)}
html.lq .lvl-badge>i .lvl-k{font:800 9.5px/1 var(--ui);letter-spacing:.07em;text-transform:uppercase;opacity:.72}
html.lq .lvl-badge>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
html.lq .lvl-badge.is-on-deep{background:rgba(255,255,255,.14);color:var(--mint);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
html.lq .lvl-badge.is-home{padding:2px 12px 2px 2px;border:2px solid var(--line);background:#fff;color:var(--ink);box-shadow:0 3px 0 var(--lip)}
html.lq .acct-id-copy{gap:8px}
/* Une seule ligne d'identité, puis le niveau : le pseudo reste secondaire. */
html.lq .acct-identity-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 12px;min-width:0}
html.lq .acct-identity-line>b{min-width:0}
html.lq .acct-id-copy .acct-id-pseudo{flex:0 1 auto;align-self:auto;max-width:100%;padding:0;background:none;border-radius:0;color:rgba(255,255,255,.72);font:500 13px/1.35 var(--ui);letter-spacing:0}
/* L’accueil : le prénom, puis une seule ligne, le badge et la séance du jour, alignés et à la même échelle. */
html.lq .lq-hi-title{margin:0}
html.lq .lq-heading .journey-session-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:8px 12px;margin-top:12px;font:600 14.5px/1.3 var(--ui);color:var(--ink-2)}
html.lq .lq-heading .journey-session-meta>span:not(.lvl-badge){font-weight:600}

/* Selon le SGBD : la barre des thèmes s’accroche sous la barre du haut (52 px depuis 54…), plus dessus ; de l’air au-dessus des
   pastilles et sous leur relief. */
html.lq .sg-chips{top:calc(var(--safe-top) + 52px);padding:10px 18px 13px}
html.lq #sgbd-sheet-body .sg-chips{top:0}

/* Nous contacter : la fusée du merci décolle, puis flotte. */
html.lq #scr-compte .ct-merci-stk{animation:ctDecolle .7s cubic-bezier(.2,.9,.3,1.25) both,ctFlotte 2.6s ease-in-out .7s infinite}
@keyframes ctDecolle{0%{opacity:0;translate:-14px 26px;scale:.6;rotate:-24deg}60%{opacity:1;translate:3px -8px;scale:1.06;rotate:-4deg}100%{translate:0 0;scale:1;rotate:-8deg}}
@keyframes ctFlotte{0%,100%{translate:0 0;rotate:-8deg}50%{translate:3px -6px;rotate:-3deg}}
@media (prefers-reduced-motion:reduce){html.lq #scr-compte .ct-merci-stk{animation:none}}
html[data-motion="reduce"].lq #scr-compte .ct-merci-stk{animation:none!important}
html.lq .lq-heading .journey-session-meta>.lvl-badge{font:700 14px/1.2 var(--display)}
/* Un nom de palier long passe à la ligne dans la carte de Mon compte, plutôt que d’être coupé. */
html.lq .lvl-badge.is-on-deep{white-space:normal;border-radius:16px;text-wrap:balance}
html.lq .lvl-badge.is-on-deep>span{overflow:visible;padding:2px 0}

/* 54w. Elisa, 1er novembre, 10 h 19 : « record » dit de quoi (« en une partie », en petit) ; la description d’un projet accepte
   celles des bases d’entraînement (jusqu’à 272 caractères) : limite à 400, 240 pour une table. */
html.lq .perf-kpi small em{display:block;margin-top:2px;font:600 10.5px/1.2 var(--ui);font-style:normal;color:var(--ink-3);opacity:.8}

/* 54x. Elisa, 1er novembre, 13 h 46 — réf. 5 : la barre Schéma dans la carte violette du projet, sous la description, en verre clair
   comme la description ; réf. 4 : « Voir » s’anime (un petit élan vers la droite, la flèche qui suit) tant que le schéma est fermé. */
html.lq #scr-console .console-title-row.is-project .console-schema-summary.in-hero{width:100%;box-sizing:border-box;margin:12px 0 0!important;padding:10px 10px 10px 14px;
  border-radius:16px;background:rgba(255,255,255,.12)!important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18)!important;overflow:visible}
html.lq #scr-console .console-title-row.is-project .console-schema-summary.in-hero::before{display:none}
html.lq #scr-console .console-title-row.is-project .console-schema-summary.in-hero:active{transform:translateY(2px);background:rgba(255,255,255,.18)!important}
html.lq #scr-console .console-title-row.is-project .console-schema-summary.in-hero b{font-size:16px}
html.lq #scr-console .console-schema-summary:not(.open) .console-schema-action{animation:voirNudge 2.8s cubic-bezier(.3,.7,.3,1.4) 1s infinite}
html.lq #scr-console .console-schema-summary:not(.open) .console-schema-chev{animation:voirChev 2.8s ease-in-out 1s infinite}
@keyframes voirNudge{0%,62%,100%{transform:none}70%{transform:translateX(3px) scale(1.07)}78%{transform:translateX(-1px) scale(.98)}86%{transform:none}}
@keyframes voirChev{0%,62%,100%{transform:none}72%{transform:translateX(5px)}84%{transform:none}}
@media (prefers-reduced-motion:reduce){html.lq #scr-console .console-schema-summary .console-schema-action,html.lq #scr-console .console-schema-summary .console-schema-chev{animation:none}}
html[data-motion="reduce"].lq #scr-console .console-schema-summary .console-schema-action,html[data-motion="reduce"].lq #scr-console .console-schema-summary .console-schema-chev{animation:none!important}

/* 54y. La salle de défi se place au niveau de la personne : une pastille menthe « Ton niveau » sur ce niveau-là (les autres restent
   choisissables, seul ou entre amis). */
html.lq .room-level{position:relative}
html.lq .room-level .room-lv-auto{position:absolute;top:-9px;left:50%;translate:-50% 0;padding:2px 8px;border-radius:99px;background:var(--mint);color:#1B1640;
  font:800 9.5px/1.3 var(--ui);font-style:normal;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;box-shadow:0 2px 0 rgba(27,22,64,.18);pointer-events:none}

/* 54z. Elisa, 1er novembre, 13 h 46 : « avant un cours, toujours avoir une page avec la DA du site internet : Commencer ». Plein
   écran lilas ; la carte violette quadrillée de la vitrine (halo soleil, étincelles), le module en menthe, la place dans le module,
   le titre en jaune soleil, le résumé, ce que contient le cours en pastilles de verre, la mascotte qui dépasse de la carte ; dessous,
   un seul bouton jaune en relief, « Commencer », dont la flèche respire. */
.lst{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;justify-content:center;gap:22px;box-sizing:border-box;
  padding:calc(var(--safe-top,0px) + 24px) 18px calc(var(--safe-bottom,0px) + 26px);background:var(--bg,#F4F1FF);animation:lstIn .32s cubic-bezier(.2,.8,.3,1.15) both}
.lst.is-out{animation:lstOut .22s ease both}
.lst-card{position:relative;isolation:isolate;overflow:visible;padding:26px 22px 30px;border-radius:30px;background:var(--deep);color:#fff;
  box-shadow:0 7px 0 #3A22B0,0 30px 50px -28px rgba(40,20,140,.6)}
.lst-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(220px 170px at 92% 0%,rgba(255,216,107,.32),transparent 70%),radial-gradient(200px 160px at 0% 100%,rgba(159,240,198,.2),transparent 70%),
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/26px 26px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/26px 26px}
.lst-close{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:38px;height:38px;margin:0;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.16);color:#fff;font:600 22px/1 var(--ui);cursor:pointer}
.lst-kicker{display:flex;align-items:center;gap:8px;margin:0 52px 0 0;color:var(--mint,#9FF0C6);font:800 12px/1.3 var(--ui);letter-spacing:.08em;text-transform:uppercase}
.lst-kicker::before{content:"";flex:none;width:18px;height:3px;border-radius:2px;background:currentColor}
.lst-pos{margin:6px 0 0;color:rgba(255,255,255,.72);font:600 13px/1.3 var(--ui)}
.lst-title{margin:14px 0 0;max-width:calc(100% - 92px);color:var(--sun-hi,#FFD86B);font:800 clamp(30px,8.4vw,40px)/1.04 var(--display);letter-spacing:-.025em;overflow-wrap:break-word}
.lst-sub{margin:10px 0 0;max-width:calc(100% - 96px);color:rgba(255,255,255,.88);font:600 16px/1.4 var(--ui)}
.lst-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;max-width:calc(100% - 70px)}
.lst-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2);
  color:#fff;font:700 13px/1.2 var(--display)}
.lst-chip.is-play{background:#fff;color:var(--accent-ink,#5335E0);box-shadow:0 3px 0 rgba(27,22,64,.28)}
.lst-chip i{font-style:normal;font-size:10px}
.lst-stk{position:absolute;right:-6px;bottom:-26px;width:96px;height:auto;rotate:6deg;filter:drop-shadow(0 6px 0 rgba(27,22,64,.25));pointer-events:none;
  animation:lstStk 3.4s ease-in-out .4s infinite}
.lst-sp{position:absolute;width:14px;height:14px;background:#fff;pointer-events:none;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:lstSp 2.6s ease-in-out infinite}
.lst-sp.s1{right:76px;top:58px}.lst-sp.s2{right:118px;bottom:40px;width:9px;height:9px;background:var(--sun-hi,#FFD86B);animation-delay:1.2s}
.lst-go{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:62px;margin:0;border:0;border-radius:20px;background:var(--sun,#FFC83D);
  color:var(--ink,#1B1640);font:800 19px/1 var(--display);box-shadow:0 5px 0 var(--sun-lip,#E0A100);cursor:pointer;transition:transform .12s,box-shadow .12s}
.lst-go:active{transform:translateY(4px);box-shadow:0 1px 0 var(--sun-lip,#E0A100)}
.lst-go svg{width:22px;height:22px;animation:lstArrow 1.6s ease-in-out infinite}
@keyframes lstIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes lstOut{to{opacity:0;transform:scale(.98)}}
@keyframes lstStk{0%,100%{translate:0 0;rotate:6deg}50%{translate:0 -6px;rotate:2deg}}
@keyframes lstSp{0%,100%{opacity:.35;scale:.7}50%{opacity:1;scale:1}}
@keyframes lstArrow{0%,100%{transform:none}50%{transform:translateX(4px)}}
@media (min-width:700px){.lst{padding-left:calc(50% - 300px);padding-right:calc(50% - 300px)}}
@media (prefers-reduced-motion:reduce){.lst,.lst.is-out,.lst-stk,.lst-sp,.lst-go svg{animation:none}}
html[data-motion="reduce"] .lst,html[data-motion="reduce"] .lst-stk,html[data-motion="reduce"] .lst-sp,html[data-motion="reduce"] .lst-go svg{animation:none!important}
.lst{justify-content:flex-start;overflow-y:auto}
.lst-plan{display:flex;flex-direction:column;gap:10px;margin:8px 0 0;padding:0;list-style:none}
.lst-plan li{display:flex;align-items:center;gap:12px;padding:12px 14px;border:2px solid var(--line,#E6E1F6);border-radius:18px;background:#fff;box-shadow:0 3px 0 var(--lip,#DCD5F2);
  animation:lstPlan .45s cubic-bezier(.2,.8,.3,1.15) calc(.18s + var(--i,0) * .08s) both}
.lst-n{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:11px;background:var(--accent-soft,#EEE9FF);color:var(--accent-ink,#5335E0);font:800 15px/1 var(--display)}
.lst-plan li>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.lst-plan li>span b{color:var(--ink,#1B1640);font:700 15.5px/1.25 var(--display)}
.lst-plan li>span small{color:var(--ink-3,#6A6490);font:600 13px/1.35 var(--ui)}
.lst-go{margin-top:auto}
.lst-go:focus{outline:none}.lst-go:focus-visible{outline:3px solid var(--accent,#6A4DF4);outline-offset:3px}
@keyframes lstPlan{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lst-plan li{animation:none}}

/* 55a. Elisa, 1er novembre, 14 h 33 : « Pas encore » et les indices fusionnés en un seul cadre, homogène ; un indice à la fois.
   La carte blanche à rebord lilas de la vitrine. En haut, le dernier essai (pastille orange « ≈ », « Pas encore », ce qui cloche) ;
   un trait ; dessous, l’indice du moment (étiquette jaune « Indice 2/3 », son titre, trois pastilles pour revoir les précédents) ;
   en salle, une ligne menthe « Indice suivant pour tout le monde dans 1:12 ». Un essai raté : la ligne du haut secoue d’un rien ;
   un nouvel indice : la carte rebondit et l’indice glisse à sa place. */
html.lq .coach{margin:14px 0 16px;padding:14px 16px;border:2px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 4px 0 var(--lip)}
html.lq .coach.has-hint{border-color:#F3DC97;box-shadow:0 4px 0 #F1D27A}
html.lq .coach-st{display:flex;align-items:flex-start;gap:12px}
html.lq .coach-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#B4561F;color:#fff;font:800 16px/1 var(--display);box-shadow:0 3px 0 #8A3F14}
html.lq .coach-st b{display:block;color:#A44E1C;font:800 16px/1.2 var(--display)}
html.lq .coach-st p{margin:3px 0 0;color:var(--ink-2);font:600 14px/1.45 var(--ui)}
html.lq .coach-st+.coach-hint,html.lq .coach-st+.coach-next,html.lq .coach-hint+.coach-next{margin-top:12px;padding-top:12px;border-top:2px solid var(--line-2,#EFECFA)}
html.lq .coach-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
html.lq .coach-tag{flex:none;padding:4px 10px;border-radius:99px;background:var(--sun);color:var(--ink);font:800 13px/1.2 var(--display);box-shadow:0 2px 0 var(--sun-lip)}
html.lq .coach-h>b{flex:1;min-width:0;color:#7A5300;font:800 16px/1.2 var(--display)}
html.lq .coach-dots{display:inline-flex;gap:6px;margin-left:auto}
html.lq .coach-dot{width:12px;height:12px;margin:0;padding:0;border:2px solid #E9DDB3;border-radius:50%;background:#fff;cursor:pointer;transition:transform .2s var(--pop),background-color .2s}
html.lq .coach-dot.is-on{border-color:var(--sun-lip);background:var(--sun-hi)}
html.lq .coach-dot.is-cur{transform:scale(1.3);background:var(--sun);box-shadow:0 0 0 3px rgba(255,200,61,.3)}
html.lq .coach-dot:disabled{cursor:default}
html.lq .coach-t{margin-top:8px;color:var(--ink);font:600 15px/1.5 var(--ui)}
html.lq .coach-t code{padding:1px 7px;border-radius:7px;background:var(--accent-soft);color:var(--accent-ink);font-weight:700}
html.lq .coach-t .ex-code{margin-top:8px}
html.lq .coach-fin{margin:10px 0 0;color:var(--ink-3);font:600 13px/1.4 var(--ui)}
html.lq .coach-next{display:flex;align-items:center;gap:8px;margin:0;color:var(--ink-3);font:600 13px/1.3 var(--ui)}
/* 9 novembre, 9 h 04 (le parcours) : « Premier indice dans 02:23 » était vert, juste sous « Pas tout à fait. Réessaie ! » : le vert dit
   « réussi » (l’encart « Bravo, défi résolu ! »). Le compte à rebours prend l’ambre des indices et du chrono. */
html.lq .coach-next i{flex:none;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--sun-lip,#E0A100);position:relative}
html.lq .coach-next i::after{content:"";position:absolute;left:7px;top:3px;width:2px;height:6px;border-radius:1px;background:var(--sun-lip,#E0A100);transform-origin:50% 100%;animation:coachHand 2s linear infinite}
html.lq .coach-next b{color:#8A5A00;font:800 13px/1 var(--mono);font-variant-numeric:tabular-nums}
html.lq .coach.is-new-ko .coach-st{animation:coachKo .45s ease}
html.lq .coach.is-new-hint{animation:coachHint .55s var(--pop)}
html.lq .coach.is-new-hint .coach-hint,html.lq .coach-hint.is-swap{animation:coachSwap .4s cubic-bezier(.2,.8,.3,1.1)}
html.lq .coach.is-new-hint .coach-tag{animation:coachTag .5s var(--pop) .1s both}
@keyframes coachKo{0%,100%{transform:none}20%{transform:translateX(-5px)}45%{transform:translateX(4px)}70%{transform:translateX(-2px)}}
@keyframes coachHint{0%{transform:scale(.97)}55%{transform:scale(1.015)}100%{transform:none}}
@keyframes coachSwap{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes coachTag{from{transform:scale(.4) rotate(-10deg)}to{transform:none}}
@keyframes coachHand{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){html.lq .coach,html.lq .coach *{animation:none!important}}
html[data-motion="reduce"].lq .coach,html[data-motion="reduce"].lq .coach *{animation:none!important}
/* 55b — Page de départ d’une leçon : tout tient sur un écran (Elisa, 1er novembre, 15 h 12 : « doit tenir sur une page, rien de coupé »).
   lstFit() resserre par paliers, du plus discret au plus serré, tant que la page dépasse la hauteur de l’écran. */
.lst{overflow:hidden}
.lst.lst-fit-1{gap:14px;padding-top:calc(var(--safe-top,0px) + 16px);padding-bottom:calc(var(--safe-bottom,0px) + 18px)}
.lst.lst-fit-1 .lst-card{padding:20px 18px 22px;border-radius:26px}
.lst.lst-fit-1 .lst-title{margin-top:10px;font-size:clamp(26px,7vw,34px)}
.lst.lst-fit-1 .lst-sub{margin-top:8px;font-size:15px;line-height:1.35}
.lst.lst-fit-1 .lst-chips{margin-top:12px}
.lst.lst-fit-1 .lst-plan{gap:8px;margin-top:0}
.lst.lst-fit-1 .lst-plan li{padding:10px 12px;border-radius:16px}
.lst.lst-fit-1 .lst-go{min-height:56px;font-size:18px}
.lst.lst-fit-2{gap:10px}
.lst.lst-fit-2 .lst-card{padding:16px 16px 18px}
.lst.lst-fit-2 .lst-close{top:10px;right:10px;width:34px;height:34px;font-size:20px}
.lst.lst-fit-2 .lst-kicker{font-size:11px}
.lst.lst-fit-2 .lst-pos{margin-top:4px;font-size:12px}
.lst.lst-fit-2 .lst-title{margin-top:8px;font-size:clamp(23px,6.2vw,29px)}
.lst.lst-fit-2 .lst-sub{font-size:14px}
.lst.lst-fit-2 .lst-chip{padding:5px 10px;font-size:12px}
.lst.lst-fit-2 .lst-stk{width:80px;bottom:-18px}
.lst.lst-fit-2 .lst-plan{gap:7px}
.lst.lst-fit-2 .lst-plan li{gap:10px;padding:8px 11px}
.lst.lst-fit-2 .lst-n{width:28px;height:28px;border-radius:9px;font-size:14px}
.lst.lst-fit-2 .lst-plan li>span b{font-size:14.5px}
.lst.lst-fit-2 .lst-plan li>span small{font-size:12.5px;line-height:1.3}
.lst.lst-fit-2 .lst-go{min-height:52px;border-radius:18px;font-size:17px}
.lst.lst-fit-3{gap:8px}
.lst.lst-fit-3 .lst-title{font-size:clamp(21px,5.6vw,25px)}
.lst.lst-fit-3 .lst-sub{margin-top:6px;font-size:13.5px}
.lst.lst-fit-3 .lst-chips{margin-top:9px}
.lst.lst-fit-3 .lst-stk{width:68px;bottom:-14px}
.lst.lst-fit-3 .lst-plan{gap:6px}
.lst.lst-fit-3 .lst-plan li{padding:7px 10px;border-radius:14px;box-shadow:0 2px 0 var(--lip,#DCD5F2)}
.lst.lst-fit-3 .lst-plan li>span b{font-size:14px}
.lst.lst-fit-3 .lst-plan li>span small{font-size:12px}
.lst.lst-fit-3 .lst-go{min-height:48px;font-size:16px}
.lst.lst-fit-4{gap:6px;padding-top:calc(var(--safe-top,0px) + 12px);padding-bottom:calc(var(--safe-bottom,0px) + 14px)}
.lst.lst-fit-4 .lst-card{padding:14px 14px 16px;border-radius:22px}
.lst.lst-fit-4 .lst-pos{margin-top:2px}
.lst.lst-fit-4 .lst-title{margin-top:6px;font-size:20px}
.lst.lst-fit-4 .lst-sub{font-size:13px;line-height:1.3}
.lst.lst-fit-4 .lst-plan{gap:5px}
.lst.lst-fit-4 .lst-plan li{padding:6px 10px}
.lst.lst-fit-4 .lst-plan li>span b{font-size:13.5px}
.lst.lst-fit-4 .lst-plan li>span small{font-size:11.5px}
.lst.lst-fit-4 .lst-go{min-height:46px}
/* Ultime recours (écrans minuscules) : les étapes gardent leur titre, la phrase d’explication s’efface. */
.lst.lst-fit-5 .lst-plan li>span small{display:none}
.lst.lst-fit-5 .lst-pos{display:none}
/* 55c — Elisa, 1er novembre, 15 h 36 : la carte des indices « dans la DA du site », juste après la question, avec un « À toi de jouer »
   animé qui se transforme en indice. Carte blanche à rebord lilas (comme les cartes de la vitrine) ; étiquette violette à curseur
   clignotant ; au premier indice elle se retourne en vignette jaune « Indice 1/3 » ; « Pas encore » dans un encart rose. */
html.lq .coach{margin:4px 0 14px;padding:14px 16px 15px;border:2px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 5px 0 var(--lip)}
html.lq .coach.has-hint{border-color:var(--line);box-shadow:0 5px 0 var(--lip)}
html.lq .coach-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
html.lq .coach-tag{flex:none;display:inline-flex;align-items:center;gap:2px;padding:6px 13px;border-radius:999px;font:800 13.5px/1.1 var(--display);transform-origin:50% 50%;-webkit-font-smoothing:antialiased}
/* 8 novembre, 10 h 10 (« la pill violette À toi de jouer est de mauvaise qualité ») : droite, sans l’inclinaison de 2° que Safari
   rendait en bords dentelés ; une vraie pastille arrondie. */
html.lq .coach-tag.is-go{background:var(--accent);color:#fff;box-shadow:0 3px 0 var(--accent-ink)}
html.lq .coach-caret{display:inline-block;width:2px;height:14px;margin-left:5px;border-radius:1px;background:var(--sun-hi);animation:coachCaret 1s steps(1) infinite}
html.lq .coach-tag.is-hint{background:var(--sun);color:var(--ink);box-shadow:0 3px 0 var(--sun-lip)}
html.lq .coach-h>b{flex:1;min-width:0;color:var(--ink);font:800 16px/1.2 var(--display)}
html.lq .coach-dot{border-color:var(--lip)}
html.lq .coach-dot.is-on{border-color:var(--sun-lip);background:var(--sun-hi)}
html.lq .coach-intro{margin:10px 0 0;color:var(--ink-2);font:600 14.5px/1.5 var(--ui)}
html.lq .coach-intro b{color:var(--ink);font-weight:800}
html.lq .coach-t{margin-top:10px}
/* 9 novembre, 7 h 37 (Elisa) : « Réessaie » avec une icône, « en mode erreur sql ui ux ». Dans la carte, sous l’indice, l’encart
   reprend la boîte « Erreur SQL » : fond rose pâle, bord rose de 2 px, pastille rouge « ! » à l’ombre portée, titre rouge dans la
   police des titres, puis le message ; les noms de tables et de colonnes en puces de code. Il secoue d’un rien à chaque essai manqué. */
html.lq .coach-st{display:flex;align-items:flex-start;gap:12px;margin-top:12px;padding:12px 14px 13px 12px;border:2px solid #F6C9CC;border-radius:16px;background:var(--danger-soft);animation:none}
html.lq .coach-st .coach-st-ico{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:12px;background:var(--danger-fill);color:#fff;font:800 14px/1 var(--ui);box-shadow:0 3px 0 rgba(0,0,0,.14)}
html.lq .coach-st .coach-st-tx{flex:1;min-width:0}
html.lq .coach-st .coach-st-k{display:block;margin:3px 0 2px;color:var(--danger);font:700 17px/1.2 var(--display)}
html.lq .coach-st p{margin:0;color:var(--ink-2);font:600 14px/1.55 var(--ui);overflow-wrap:anywhere}
/* 8 h 04 : l’erreur SQL comme dans la boîte « Erreur SQL » : son message, puis son aide, 6 px plus bas. */
html.lq .coach-st p+p{margin-top:6px}
html.lq .coach-st p code{padding:1px 6px;border-radius:6px;background:rgba(0,0,0,.05);color:var(--ink);font:600 12.5px/1.4 var(--mono);-webkit-box-decoration-break:clone;box-decoration-break:clone}
html.lq .coach-st+.coach-next,html.lq .coach-hint+.coach-next,html.lq .coach-intro+.coach-next{margin-top:12px;padding-top:11px;border-top:2px dashed var(--line)}
html.lq .coach-st+.coach-hint{border-top:0;padding-top:0}
html.lq .coach.is-new-ko .coach-st{animation:coachKo .45s ease}
/* 9 novembre, 8 h 20 (Elisa) : « je veux que l’encart rouge se transforme en vert avec Bravo défi résolu… En attente des autres ou qui
   passe à la manche suivante si autre manche, avec résolu en 2 min etc. » Trouvé : la carte de l’indice reste à sa place, son encart
   passe au vert, comme la boîte « Défi résolu » (fond vert pâle, bord vert, pastille verte ✓, titre vert) ; après un essai manqué, il
   part du rouge de « Pas tout à fait. Réessaie ! ». Les points dans une pastille blanche ; la suite sous un filet pointillé. */
html.lq .coach-ok{display:flex;align-items:flex-start;gap:12px;padding:12px 14px 13px 12px;border:2px solid #BFE6CF;border-radius:16px;background:var(--success-soft);animation:coachOkIn .5s var(--pop) both}
html.lq .coach-ok .coach-ok-ico{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:12px;background:var(--success-fill);color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.14)}
html.lq .coach-ok .coach-ok-ico svg{width:16px;height:16px}
html.lq .coach-ok .coach-ok-tx{flex:1;min-width:0}
html.lq .coach-ok .coach-ok-k{display:block;margin:3px 0 2px;color:var(--success);font:700 17px/1.2 var(--display)}
html.lq .coach-ok p{margin:0;color:var(--ink-2);font:600 14px/1.55 var(--ui)}
html.lq .coach-ok p b{color:var(--ink);font-weight:800}
/* 8 h 50 (« améliore l’ui ux des composants que t’as rajouté ») : les points à droite du titre, en grand chiffre vert, sans cadre (la
   pastille blanche à ombre avait l’air d’un bouton) ; le premier coup, en petite pastille menthe dans le détail. */
html.lq .coach-ok .coach-ok-pts{align-self:center;display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin:0 0 0 2px;padding:0;border-radius:0;background:none;box-shadow:none;color:var(--success)}
/* La grille : la pastille ✓ | le titre | les points ; dessous, le détail sur toute la largeur (sous les points aussi) */
html.lq .coach-ok{display:grid;grid-template-columns:28px minmax(0,1fr) auto;column-gap:12px;row-gap:3px;align-items:center}
html.lq .coach-ok .coach-ok-ico{grid-column:1;grid-row:1;align-self:center}
html.lq .coach-ok .coach-ok-tx{display:contents}
html.lq .coach-ok .coach-ok-k{grid-column:2;grid-row:1;margin:0}
html.lq .coach-ok p{grid-column:2 / 4;grid-row:2}
html.lq .coach-ok .coach-ok-pts{grid-column:3;grid-row:1}
html.lq .coach-ok .coach-ok-d{white-space:nowrap}
@media (max-width:380px){html.lq .coach-ok .coach-ok-k{font-size:16px}}
html.lq #jeu-waitline .jeu-wl{display:flex;flex-direction:column;gap:2px;min-width:0}
html.lq #jeu-waitline .jeu-wl-k{font:inherit;color:var(--ink-2)}
html.lq #jeu-waitline .jeu-wl small{font:600 13px/1.3 var(--ui);color:var(--ink-3)}
html.lq .coach-ok .coach-ok-pts em{font:800 24px/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
html.lq .coach-ok .coach-ok-pts small{font:800 11.5px/1.2 var(--display);opacity:.8}
html.lq .coach-ok .coach-ok-bonus{display:inline-block;padding:1px 7px;border-radius:99px;background:#9FF0C6;color:#0D5B3B;font:800 12px/1.45 var(--display);white-space:nowrap}
html.lq .coach-ok.was-ko{animation:coachOkDuRouge .8s ease both}
html.lq .coach-ok.was-ko .coach-ok-ico{animation:coachOkIcoDuRouge .8s ease both}
@keyframes coachOkIn{0%{opacity:0;transform:scale(.96)}60%{opacity:1;transform:scale(1.015)}100%{opacity:1;transform:none}}
@keyframes coachOkDuRouge{0%,30%{background:var(--danger-soft);border-color:#F6C9CC;transform:none}65%{transform:scale(1.02)}100%{background:var(--success-soft);border-color:#BFE6CF;transform:none}}
@keyframes coachOkIcoDuRouge{0%,30%{background:var(--danger-fill)}100%{background:var(--success-fill)}}
/* La carte trouvée de la salle est la carte de l’indice : ses marges, son rebord, pas de second cadre qui saute */
html.lq .coach.jeu-done{margin:4px 0 14px;padding:14px 16px 15px;border-radius:22px;box-shadow:0 5px 0 var(--lip);animation:none}
/* 9 novembre, 10 h 01 (Elisa : « pas de répétition de page, il faut vraiment l’essentiel ») : seul, le chrono à 0, la carte de l’indice
   reste à sa place et son encart dit « Temps écoulé » : la grille de l’encart vert, dans la pêche des défis à rattraper (l’écran Défis :
   « pêche = à rattraper ») ; « Retenter ce défi » dedans quand la partie s’arrête là. */
html.lq .coach-to{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:12px;row-gap:3px;align-items:center;padding:12px 14px 13px 12px;border:2px solid #FFD2BC;border-radius:16px;background:#FFF1E8;animation:coachOkIn .5s var(--pop) both}
html.lq .coach-to .coach-to-ico{grid-column:1;grid-row:1;display:grid;place-items:center;width:28px;height:28px;border-radius:12px;background:#E8743B;color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.14)}
html.lq .coach-to .coach-to-ico svg{width:15px;height:15px}
html.lq .coach-to .coach-to-tx{display:contents}
html.lq .coach-to .coach-to-k{grid-column:2;grid-row:1;margin:0;color:#A24A1E;font:700 17px/1.2 var(--display)}
html.lq .coach-to p{grid-column:2;grid-row:2;margin:0;color:var(--ink-2);font:600 14px/1.55 var(--ui)}
html.lq #app .coach-to .jr-retry{grid-column:2;grid-row:3;justify-self:start;margin-top:8px}
@media (prefers-reduced-motion:reduce){html.lq .coach-to{animation:none}}
html[data-motion="reduce"].lq .coach-to{animation:none}
/* Une partie d’une seule manche se termine sur place : ses boutons sous la carte, ceux du bilan */
/* 9 novembre, 20 h 29 (Elisa : « problème d’espace ») : un même pas de 16 px entre les blocs des pages de la salle (fin de partie,
   podium, résultats, salle d’attente) ; les paires titre / sous-titre restent à 8, les paires de boutons à 14. Avant : 4 px entre le
   récap et « Réessayer », 18 sous le sous-titre et sous la carte des résultats, 14 ailleurs. */
html.lq .jeu-fin-actions{margin:16px 0 6px}
html.lq #jeu-root>.l-sub{margin-bottom:16px!important}
html.lq #jeu-root>.jeu-card,html.lq #jeu-root>.jeu-bilan+.jeu-card{margin-top:16px}
html.lq #jeu-root>.jeu-podium{margin-bottom:0}
html.lq .jeu-fin-actions>.journey-primary{margin-top:0}
/* Un nouveau record, dans le détail de l’encart vert : la pastille soleil des points */
html.lq .coach-ok .coach-ok-bonus.is-record{background:var(--sun);color:#1B1640}
/* Le bilan : deux cases quand un seul défi est résolu (pas de « temps moyen » d’un seul temps) */
html.lq #app .jeu-bilan.is-2{grid-template-columns:repeat(2,minmax(0,1fr))}
html.lq .coach-ok-suite{margin:14px 0 0;padding-top:12px;border-top:2px dashed var(--line-2)}
html.lq .coach-ok-suite .jeu-auto{margin:0!important;text-align:left}
/* Seul : une barre qui se remplit jusqu’à la manche suivante, ou jusqu’au bilan (8 h 50) */
html.lq .coach-ok-barre{display:block;height:5px;margin:10px 0 0;border-radius:99px;background:var(--surface-2);overflow:hidden}
html.lq .coach-ok-barre::after{content:"";display:block;height:100%;border-radius:inherit;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--p0,0));animation:coachOkBarre var(--d,5s) linear forwards}
@keyframes coachOkBarre{from{transform:scaleX(var(--p0,0))}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){html.lq .coach-ok-barre{display:none}}
html[data-motion="reduce"].lq .coach-ok-barre{display:none}
/* « En attente des autres · @matime cherche encore… » prend la ligne ; les réactions passent dessous quand la place manque */
html.lq .coach.jeu-done .jeu-done-wait{flex-wrap:wrap;row-gap:10px}
html.lq .coach.jeu-done #jeu-waitline{flex:1 1 200px}
/* Seul, la manche trouvée : le chrono s’arrête, au vert, comme celui d’un défi seul */
html.lq #jeu-root .jeu-hud-box .jeu-timer.is-ok{background:var(--ok-soft,#E3F6EC)!important;color:var(--ok,#14955A)!important}
@media (prefers-reduced-motion:reduce){html.lq .coach-ok,html.lq .coach-ok *{animation:none!important}}
html[data-motion="reduce"].lq .coach-ok,html[data-motion="reduce"].lq .coach-ok *{animation:none!important}
html.lq .coach.is-new-hint{animation:coachHint .55s var(--pop)}
html.lq .coach.is-new-hint .coach-tag.is-hint{animation:coachFlip .6s var(--pop) both}
html.lq .coach.is-new-hint .coach-h>b,html.lq .coach.is-new-hint .coach-hint{animation:coachSwap .45s cubic-bezier(.2,.8,.3,1.1) .12s both}
html.lq .coach-peek{position:fixed;left:50%;bottom:calc(var(--safe-bottom,0px) + 22px);z-index:90;display:inline-flex;align-items:center;gap:8px;
  padding:11px 16px;border:2px solid #fff;border-radius:99px;background:var(--accent);color:#fff;font:800 14px/1 var(--display);
  box-shadow:0 4px 0 var(--accent-ink),0 14px 28px -12px rgba(40,20,140,.55);white-space:nowrap;cursor:pointer;transform:translateX(-50%);animation:coachPeekIn .4s var(--pop) both;transition:opacity .25s}
html.lq .coach-peek[hidden]{display:none}
html.lq .coach-peek.is-out{opacity:0}
@keyframes coachPeekIn{from{opacity:0;transform:translate(-50%,16px) scale(.9)}to{opacity:1;transform:translateX(-50%)}}
html.lq .coach-peek span{animation:coachUp 1.2s ease-in-out infinite}
/* coachGo retiré : l’animation infinie (scale) forçait un calque rastérisé, le texte devenait flou sur iPhone. */
/* 5 novembre, 14 h 24 (réf. 1, « la pill violette est pixelisée ») : le curseur clignotait en opacité, une animation que Safari
   confie à un calque à part ; l’étiquette penchée qui le contient passait alors en calque elle aussi, rastérisée flou sur iPhone.
   Le curseur clignote maintenant par sa couleur : rien ne sort de la page, le texte de l’étiquette reste net. */
@keyframes coachCaret{50%{background-color:transparent}}
@keyframes coachFlip{0%{transform:perspective(300px) rotateX(-90deg) scale(.9);background:var(--accent)}55%{transform:perspective(300px) rotateX(12deg) scale(1.08)}100%{transform:none}}
@keyframes coachUp{0%,100%{transform:none}50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){html.lq .coach-peek,html.lq .coach-peek span{animation:none!important}}
html[data-motion="reduce"].lq .coach-peek,html[data-motion="reduce"].lq .coach-peek span{animation:none!important}
/* 55d — Page de départ : des espacements réguliers (Elisa, 15 h 36 : « faire attention aux espaces et espacements »). Le bloc entier
   (carte, étapes, bouton) est centré dans l’écran, avec le même écart de 18 px entre la carte, les étapes et le bouton ; le titre est
   un peu moins massif ; la mascotte ne mord plus sur la première étape. */
.lst{justify-content:center;gap:18px}
.lst .lst-go{margin-top:0}
.lst-card{padding:24px 22px 26px}
.lst-title{margin-top:12px;font-size:clamp(28px,7.2vw,36px);line-height:1.06}
.lst-sub{margin-top:10px;font-size:15.5px}
.lst-chips{margin-top:16px}
.lst-stk{width:90px;bottom:-14px;right:-4px}
.lst-plan{gap:9px;margin:0}
.lst-plan li{padding:12px 14px;gap:12px}
.lst.lst-scroll{overflow-y:auto;justify-content:flex-start}
/* 15 h 51 : « Niveau recommandé » plutôt que « Ton niveau » ; sur les écrans étroits l’étiquette se fait plus fine pour tenir sur la carte. */
@media (max-width:460px){html.lq .room-level .room-lv-auto{padding:2px 6px;font-size:8px;letter-spacing:.02em}}
/* 15 h 54 : sans sous-texte, la carte de niveau se resserre (plus de vide en bas) ; elle garde sa hauteur pour « Bientôt ». */
html.lq .room-level{min-height:0;justify-content:center;padding:16px 6px 14px}
html.lq .room-level.is-bientot{min-height:88px}
/* 16 h : « trop d’espace en bas des niveaux » : la carte épouse son contenu, autant d’air en haut qu’en bas. */
html.lq .room-level{min-height:0!important;justify-content:center;gap:6px;padding:13px 6px 13px!important}
/* Elisa, 1er novembre, 18 h 20 : « à pousser vers la verticale, pareil ailleurs ». Sous le bouton retour, le titre de la page
   (Selon le SGBD, Mes notes, Cartes mémo, Stickers, Console, Entretien, Défis…) descend d’un cran, le même écart partout. */
html.lq #app .screen>.home-back{margin-bottom:12px}
html.lq #scr-sgbd>.home-back{margin-bottom:12px}
/* 18 h 58 : « un peu trop d’espace » : 12 px sous le retour (au lieu de 28), le même partout. */
/* 55e — Selon le SGBD : la ligne de notre moteur (SQLite) surlignée en jaune soleil, avec l’étiquette autocollant « Notre moteur » ;
   la pastille menthe « Toutes ces écritures marchent dans l’app » ; « pas dans l’app » en gris sur les rares exceptions (18 h 24). */
html.lq .sg-row.is-moteur{margin:2px -8px;padding:9px 10px;border-top-color:transparent;border-radius:14px;background:#FFF4D2;box-shadow:inset 3px 0 0 var(--sun)}
html.lq .sg-row.is-moteur+.sg-row{border-top-color:transparent}
html.lq .sg-row.is-moteur .sg-who{color:#7A5300}
html.lq .sg-row.is-moteur .sg-code{background:#fff;box-shadow:inset 0 0 0 1.5px #F3D27A}
html.lq .sg-n.is-moteur{color:#7A5300}
html.lq .sg-tag{display:inline-block;margin-top:5px;padding:3px 8px;border-radius:8px;background:var(--sun);color:var(--ink);font:800 9.5px/1.2 var(--display);font-style:normal;
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;box-shadow:0 2px 0 var(--sun-lip);rotate:-2deg}
html.lq .sg-who .sg-tag{display:table}
html.lq .sg-leg{white-space:nowrap}
html.lq .sg-leg .sg-tag{margin:0 2px 0 0;vertical-align:1px}
html.lq .sg-val{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
html.lq .sg-val>.sg-code{align-self:stretch}
html.lq .sg-row.is-off .sg-code{opacity:.75}
html.lq .sg-off{padding:2px 8px;border-radius:99px;background:#EFEDF5;color:var(--ink-3);font:700 11px/1.3 var(--ui);font-style:normal}
html.lq .sg-ok{display:flex;align-items:center;gap:7px;margin:10px 0 2px;padding:7px 11px;border-radius:12px;background:#E3FBEF;color:#147A4E;font:700 12.5px/1.3 var(--ui)}
html.lq .sg-ok span{display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;background:#1E9E68;color:#fff;font:800 11px/1 var(--display)}
/* 55f — Entretien (Elisa, 1er novembre, 18 h 38) : le bouton « Voir selon le SGBD » sous l’exemple, en carte de la vitrine (rebord lilas,
   autocollant info, chevron). « Question précédente » et « Question suivante », côte à côte, sont passées dans la carte violette
   (6 novembre, 22 h 20), puis en flèches autour du numéro (22 h 56 : .ent-pager) ; « Question suivante » est revenue sous l’évaluation (.ent-suite). */
html.lq .ent-sgbd{display:flex;align-items:center;gap:12px;width:100%;margin:14px 0 0;padding:10px 14px 10px 10px;border:2px solid var(--line);border-radius:16px;background:#fff;
  color:var(--ink);text-align:left;box-shadow:0 4px 0 var(--lip);cursor:pointer;transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq .ent-sgbd:active{transform:translateY(4px);box-shadow:0 0 0 var(--lip)}
html.lq .ent-sgbd-ico{flex:none;width:40px;height:40px;rotate:-6deg}
html.lq .ent-sgbd-ico svg{display:block;width:100%;height:100%}
html.lq .ent-sgbd>span:nth-child(2){display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
html.lq .ent-sgbd b{color:var(--accent-ink);font:800 15.5px/1.2 var(--display)}
html.lq .ent-sgbd small{color:var(--ink-3);font:600 12.5px/1.3 var(--ui)}
html.lq .ent-sgbd>svg{flex:none;width:18px;height:18px;color:var(--accent-ink)}
html.lq .eans code{padding:1px 7px;border-radius:7px;background:var(--accent-soft);color:var(--accent-ink);font:700 .9em/1.4 var(--mono);-webkit-box-decoration-break:clone;box-decoration-break:clone}
html.lq .eans code.ins,.ent-focus .eans code.ins{white-space:nowrap}
/* 55g — Console : base d’entraînement en lecture seule (Elisa, 1er novembre, 18 h 42). */
html.lq .db-pill.is-lock{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:14px;background:#FFF4D2;color:#7A5300;font:700 13.5px/1.2 var(--display);box-shadow:inset 0 0 0 1.5px #F3D27A}
html.lq #db-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
html.lq .console-lock code{padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.7);font:700 .9em var(--mono)}
html.lq .console-lock-go{margin-top:10px;min-height:42px;padding:0 16px;border:0;border-radius:13px;background:var(--accent);color:#fff;font:700 14.5px/1 var(--display);box-shadow:0 3px 0 var(--accent-lip);cursor:pointer}
html.lq .console-lock-go:active{transform:translateY(3px);box-shadow:0 0 0 var(--accent-lip)}
/* 55h — Selon le SGBD : un ✓ menthe au bout de chaque écriture qui marche dans l’app ; la légende dans le cadre du haut (18 h 56). */
html.lq .sg-okrow{display:flex;align-items:flex-start;gap:8px;align-self:stretch;min-width:0}
html.lq .sg-okrow>.sg-code{flex:1;min-width:0}
html.lq .sg-check{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;margin-top:4px;border-radius:50%;background:#1E9E68;color:#fff;
  font:800 12px/1 var(--display);font-style:normal;box-shadow:0 2px 0 #147A4E}
html.lq .sg-legende{display:flex;flex-wrap:wrap;gap:8px 16px;margin:12px 0 0;padding-top:12px;border-top:2px dashed var(--line);color:var(--ink-2);font:600 13.5px/1.3 var(--ui)}
html.lq .sg-legende>span{display:inline-flex;align-items:center;gap:7px}
html.lq .sg-legende .sg-tag{margin:0}
html.lq .sg-legende .sg-check{margin:0}
/* Entretien : « Continuer la préparation » avec sa flèche animée (même geste que « Commencer » d’un cours). */
html.lq .ent-hero .ent-hero-cta>svg:last-child{display:block!important;width:20px;height:20px;flex:none;animation:lstArrow 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){html.lq .ent-hero .ent-hero-cta>svg:last-child{animation:none}}
html[data-motion="reduce"].lq .ent-hero .ent-hero-cta>svg:last-child{animation:none!important}
/* 19 h 00 : « ne pas surligner en jaune et mettre Notre moteur » : la ligne de SQLite redevient une ligne comme les autres, avec
   seulement l’étiquette « Notre moteur ». */
html.lq .sg-row.is-moteur{margin:0;padding:8px 2px;border-radius:0;background:none;box-shadow:none;border-top-color:var(--line-2,#EFECFA)}
html.lq .sg-need h3+.sg-row.is-moteur{border-top-color:var(--line-2,#EFECFA)}
html.lq .sg-row.is-moteur+.sg-row{border-top-color:var(--line-2,#EFECFA)}
html.lq .sg-row.is-moteur .sg-who,html.lq .sg-n.is-moteur{color:var(--ink-3,#6A6490)}
html.lq .sg-row.is-moteur .sg-code{background:var(--surface-2,#F1EEFC);box-shadow:none}
/* 55i — Planche de stickers : sous chaque sticker, en petit, ce qui le fait gagner (19 h 02). */
html.lq .stk-grid>li{display:flex;flex-direction:column;align-items:center;min-width:0}
html.lq .stk-cap{display:block;max-width:100%;margin:-2px 2px 8px;color:var(--ink-3);font:700 11.5px/1.25 var(--ui);text-align:center;overflow-wrap:anywhere}
/* 55j — Accueil (Elisa, 1er novembre, 19 h 08 : « il y a trop d’espace, on peut optimiser ») : l’en-tête se resserre. Le logo, le
   bonjour, le niveau et la série se suivent avec des écarts réguliers et plus courts (8 à 12 px au lieu de 14 à 24). */
html.lq #scr-learn>.lgtitle{padding-top:calc(var(--safe-top) + 10px)!important}
html.lq #scr-learn>.lgtitle .journey-brand{margin-bottom:0!important}
html.lq #scr-learn #home-hero>.journey-heading{margin-top:6px!important;margin-bottom:10px!important}
html.lq #scr-learn .journey-heading .journey-session-meta{margin-top:8px!important}
html.lq #scr-learn #home-hero>.lq-streak{margin-bottom:12px!important}
/* 55k — Accueil (Elisa, 1er novembre, 19 h 25 : « fusionner les 2 ») : le bonjour, le niveau et la séance en haut de la carte violette.
   Le salut en blanc (son trait jaune soleil reste), le niveau sur fond translucide, la séance en lilas clair ; un trait fin les
   sépare du module. La série passe sous la carte. */
html.lq .lq-hero.has-hi .lq-hero-hi{position:relative;z-index:1;margin:0 0 14px;padding:0 0 14px;border-bottom:1.5px solid rgba(255,255,255,.18)}
html.lq .lq-hero.has-hi .lq-hi-title{margin:0;color:#fff;font-size:24px;line-height:1.1}
html.lq .lq-hero.has-hi .journey-session-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px;font:600 14px/1.3 var(--ui);color:rgba(255,255,255,.86)}
html.lq .lq-hero.has-hi .journey-session-meta>.lvl-badge{font:700 13.5px/1.2 var(--display)}
html.lq .lq-hero.has-hi .journey-session-meta time{display:none}
html.lq #scr-learn #home-hero>.lq-hero.has-hi{margin-top:6px}
html.lq #scr-learn #home-hero>.lq-hero.has-hi+.lq-streak{margin-top:14px}
html.lq .lq-hero.has-hi .lvl-badge.is-home{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.14);color:#fff;box-shadow:none}
html.lq .lq-hero.has-hi .lvl-badge.is-home>span{color:var(--mint)}
html.lq #home-hero .lq-hero.has-hi .journey-session-meta,html.lq #home-hero .lq-hero.has-hi .journey-session-meta>span{color:rgba(255,255,255,.86)!important}
/* 55l — Haut de la carte de l’accueil sur une ligne (19 h 36) : « Bonsoir, Elisa » + la pastille jaune « Niv. 2 » à gauche, la
   séance du jour en petite étiquette à droite ; si la place manque (prénom long, petit écran), l’étiquette passe dessous. */
html.lq .lq-hero.has-hi .lq-hero-hi{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 14px;padding:0 0 12px}
html.lq .lq-hero.has-hi .lq-hi-title{font-size:22px;white-space:nowrap}
html.lq .lq-hi-niv{flex:none;display:inline-flex;align-items:baseline;gap:3px;padding:4px 9px;border-radius:999px;background:var(--sun);color:#1B1640;
  font:800 14px/1 var(--display);box-shadow:0 2px 0 var(--sun-lip);cursor:default}
html.lq .lq-hi-niv .lvl-k{font:800 10.5px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;opacity:.75}
html.lq .lq-hero.has-hi .journey-session-meta{flex:none;margin:0 0 0 auto!important;gap:0}
html.lq .lq-hero.has-hi .journey-session-meta>span{padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  color:#fff!important;font:700 12.5px/1.1 var(--ui);white-space:nowrap}
/* « Commencer la leçon » : la flèche de lecture avance et revient, comme les autres boutons d’action. */
html.lq .lq-hero .lq-hero-cta .lq-play svg{animation:lqPlayNudge 1.6s ease-in-out infinite}
@keyframes lqPlayNudge{0%,100%{transform:none}50%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){html.lq .lq-hero .lq-hero-cta .lq-play svg{animation:none}}
html[data-motion="reduce"].lq .lq-hero .lq-hero-cta .lq-play svg{animation:none!important}
html.lq .lq-hero.has-hi .lq-hero-hi{gap:8px}
html.lq .lq-hero.has-hi .lq-hi-title{font-size:20px}
html.lq .lq-hi-niv{padding:3px 8px;font-size:13px}
html.lq .lq-hi-niv .lvl-k{font-size:10px}
html.lq .lq-hero.has-hi .journey-session-meta>span{padding:4px 9px;font-size:12px}
html.lq .lq-hero.has-hi .lq-hero-hi{gap:6px}
html.lq .lq-hero.has-hi .journey-session-meta>span{padding:0;background:none;box-shadow:none;color:rgba(255,255,255,.88)!important;font:700 12.5px/1.2 var(--ui)}
html.lq .lq-hero.has-hi .lq-hi-title{font-size:18.5px}
/* 19 h 39 : « le Niv. 2 Constructeur… : le mettre sur le chat ». L’étiquette du niveau se colle en bas de la mascotte de l’accueil,
   légèrement de travers comme un autocollant : la pastille jaune « Niv. 2 », puis le nom du niveau sur fond sombre. */
html.lq .mstk-niv{position:absolute;z-index:3;left:50%;bottom:-6px;display:flex;flex-direction:column;align-items:center;gap:0;width:max-content;max-width:132px;
  translate:-42% 0;rotate:-5deg;pointer-events:none;animation:mstkFloat 5.2s ease-in-out -2s infinite}
html.lq .mstk-niv>i{position:relative;z-index:1;display:inline-flex;align-items:baseline;gap:3px;margin-bottom:-6px;padding:4px 9px;border-radius:999px;background:var(--sun);
  color:#1B1640;font:800 13px/1 var(--display);font-style:normal;box-shadow:0 2px 0 var(--sun-lip)}
html.lq .mstk-niv>i>span{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
html.lq .mstk-niv>b{display:block;padding:9px 9px 6px;border-radius:10px;background:#1E1A3B;color:var(--mint);font:700 11px/1.2 var(--display);text-align:center;
  box-shadow:0 3px 0 #0F0B2A;text-wrap:balance}
html.lq .mascot-stk.is-intro .mstk-niv{animation:mstkPop .5s cubic-bezier(.34,1.56,.64,1) .62s both,mstkFloat 5.2s ease-in-out 1.12s infinite}
@media (prefers-reduced-motion:reduce){html.lq .mstk-niv{animation:none!important}}
html.lq .lq-hero.has-hi .lq-hi-title{font-size:20px}
/* L’étiquette reste dans la carte à toutes les largeurs : calée sur le bord droit du chat, plus étroite ; l’étoile décorative du coin
   haut droit ne chevauche plus « Aujourd’hui · 6 min » (elle passe sous la ligne). */
html.lq .mstk-niv{left:auto;right:-2px;translate:none;max-width:118px}
html.lq .mstk-niv>b{font-size:10.5px;padding:8px 8px 5px}
html.lq .lq-hero.has-hi::after{display:none}
/* 19 h 48 : « Ta session » et son animation. Le sablier : le sable du haut coule vers le bas (filet qui scintille), puis le sablier se
   retourne d’un coup, sans à-coup (en fin de tour, le sable plein en bas devient le sable plein en haut). Pause : le sablier à moitié
   plein, arrêté, se balance doucement, un petit « z » s’envole. Faite / Parcours terminé : la coche se trace dans son rond. */
html.lq .lq-hero.has-hi .journey-session-meta>.lq-ses{display:inline-flex;align-items:center;gap:6px}
html.lq .lq-ses-n{font:inherit;font-variant-numeric:tabular-nums;color:var(--sun)}
html.lq .lq-ses-ic{flex:none;display:inline-grid;place-items:center;width:15px;height:17px;font-style:normal}
html.lq .lq-ses-ic svg{width:100%;height:100%;overflow:visible}
html.lq .lq-sab{transform-box:view-box;transform-origin:7px 8px;animation:lqSabFlip 4.2s cubic-bezier(.65,0,.35,1) infinite}
html.lq .lq-sab-f{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
html.lq .lq-sab-t,html.lq .lq-sab-b{fill:var(--sun)}
html.lq .lq-sab-t{transform-box:view-box;transform-origin:7px 7.2px;animation:lqSabHaut 4.2s linear infinite}
html.lq .lq-sab-b{transform-box:view-box;transform-origin:7px 13.8px;animation:lqSabBas 4.2s linear infinite}
html.lq .lq-sab-s{stroke:var(--sun);stroke-width:1;stroke-dasharray:1.2 1.3;animation:lqSabFilet 4.2s linear infinite}
@keyframes lqSabFlip{0%,80%{rotate:0deg}100%{rotate:180deg}}
@keyframes lqSabHaut{0%{scale:1 1}78%,100%{scale:0 0}}
@keyframes lqSabBas{0%{scale:0 0}78%,100%{scale:1 1}}
@keyframes lqSabFilet{0%{opacity:1;stroke-dashoffset:0}76%{opacity:1;stroke-dashoffset:-10}80%,100%{opacity:0;stroke-dashoffset:-10}}
html.lq .lq-sab.is-couche{animation:lqSabDort 3.6s ease-in-out infinite}
html.lq .lq-sab.is-couche .lq-sab-t,html.lq .lq-sab.is-couche .lq-sab-b{animation:none}
@keyframes lqSabDort{0%,100%{rotate:-9deg}50%{rotate:9deg}}
html.lq .lq-zz{fill:var(--mint);font:800 6px/1 var(--display);animation:lqZz 3.6s ease-out infinite}
@keyframes lqZz{0%{opacity:0;translate:0 3px}25%{opacity:1}80%,100%{opacity:0;translate:3px -4px}}
html.lq .lq-chk-o{fill:var(--mint);opacity:.22}
html.lq .lq-chk{fill:none;stroke:var(--mint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:12;stroke-dashoffset:12;animation:lqChk .6s cubic-bezier(.3,1.4,.6,1) .5s forwards}
@keyframes lqChk{to{stroke-dashoffset:0}}
html.lq .lq-ses.is-late .lq-ses-n{color:#FFB3C7}
@media (prefers-reduced-motion:reduce){html.lq .lq-ses-ic *{animation:none!important}html.lq .lq-chk{stroke-dashoffset:0}}
html.lq[data-motion="reduce"] .lq-ses-ic *{animation:none!important}
html.lq[data-motion="reduce"] .lq-chk{stroke-dashoffset:0}
/* 19 h 53 : « trop d’espace » entre la série et « Tous les cours · Ton parcours » : 44 px ramenés à 22 px (le même rythme que
   l’écart entre la carte du cours et la série). */
html.lq #scr-learn #modules{margin-top:6px;padding-top:16px}

/* 54. Parcours terminé (Elisa, 1er novembre, 20 h 31) : « Continuer à pratiquer » avec une flèche qui avance et revient ; au
   toucher, elle file à droite avant d’ouvrir les défis. */
html.lq .lq-hero .lq-hero-cta-defis .lq-fleche{display:inline-grid;place-items:center;width:22px;height:22px}
html.lq .lq-hero .lq-hero-cta-defis .lq-fleche svg{display:block;width:22px;height:22px;animation:lqFlecheNudge 1.6s ease-in-out infinite}
html.lq .lq-hero .lq-hero-cta-defis.is-go .lq-fleche svg{animation:lqFlecheFile .3s cubic-bezier(.5,0,.75,0) forwards}
@keyframes lqFlecheNudge{0%,100%{transform:none}50%{transform:translateX(4px)}}
@keyframes lqFlecheFile{0%{transform:none;opacity:1}100%{transform:translateX(38px);opacity:0}}
@media (prefers-reduced-motion:reduce){html.lq .lq-hero .lq-hero-cta-defis .lq-fleche svg{animation:none}}
html[data-motion="reduce"].lq .lq-hero .lq-hero-cta-defis .lq-fleche svg{animation:none!important}

/* 55. Réf. 1 (Elisa, 1er novembre, 20 h 50 : « les cadres n’ont pas la même largeur ») : la barre « Valide la leçon » sous la carte
   de la vidéo prend exactement sa largeur (plus de cadre de 6 px autour, qui la rétrécissait). */
html.lq #lesson-body .ls-nav:has(.ls-next[data-jc-gate]){margin-left:0!important;margin-right:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}


/* ===== 56 · Fin de leçon et planning (Elisa, 1er novembre, 23 h 07) =====
   Réf. 1 : « le cadre orange n’est pas au niveau du reste » : le score devient une carte comme les boutons dessous (même rebord,
   même rayon), avec la jauge de l’objectif. Réf. 2 : « le point 1 2 etc. ne ressort pas, on dirait la date » : le nombre d’activités
   du jour devient une pastille, avec l’icône d’une séance, distincte du numéro du jour. */
html.lq .lv-end-score{border-radius:20px!important;padding:14px 16px 13px!important;box-shadow:inset 0 0 0 2px #E4DCFF,0 5px 0 #E4DCFF!important}
html.lq .lv.is-retry .lv-end-score{background:#FFF6EA!important;box-shadow:inset 0 0 0 2px #FFD9A8,0 5px 0 #FFD9A8!important}
html.lq .lv.is-win .lv-end-score{box-shadow:inset 0 0 0 2px #BFEBD3,0 5px 0 #BFEBD3!important}
html.lq .lv-end-score{margin-bottom:20px!important}
html.lq .lv-end-gauge{display:flex;gap:6px;width:min(100%,250px);margin:11px auto 1px}
html.lq .lv-end-gauge i{position:relative;flex:1;height:11px;border-radius:6px;background:#EDE7FF;box-shadow:inset 0 0 0 1.5px #DCD3FA}
html.lq .lv.is-retry .lv-end-gauge i{background:#FFE9CC;box-shadow:inset 0 0 0 1.5px #FFD39E}
html.lq .lv-end-gauge i.on{background:var(--accent);box-shadow:none}
html.lq .lv.is-retry .lv-end-gauge i.on{background:linear-gradient(180deg,#F6B14E,#E58F16)}
html.lq .lv.is-win .lv-end-gauge i.on{background:linear-gradient(180deg,#4FD192,#22A866)}
html.lq .lv-end-gauge{margin-top:14px!important}
html.lq .lv-end-gauge i{height:20px;border-radius:10px}
/* Objectif : le drapeau est dans la case à atteindre, bien lisible */
html.lq .lv-end-gauge i.goal::before{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -6px;
  background:var(--accent-ink);-webkit-mask:var(--lq-flag) center/contain no-repeat;mask:var(--lq-flag) center/contain no-repeat}
html.lq .lv-end-gauge i.goal:not(.on){box-shadow:inset 0 0 0 2px #B9A8F5}
html.lq .lv.is-retry .lv-end-gauge i.goal::before{background:#C86F10}
html.lq .lv.is-retry .lv-end-gauge i.goal:not(.on){box-shadow:inset 0 0 0 2px #F0B866}
html.lq .lv-end-gauge i.goal.on::before{background:#fff}
html.lq{--lq-flag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 21V4m0 0h11l-2 4 2 4H5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M5 4h11l-2 4 2 4H5z'/%3E%3C/svg%3E")}
html.lq .lv.end-in .lv-end-gauge i{animation:lvPipIn .35s cubic-bezier(.3,.7,.3,1.5) both}
html.lq .lv.end-in .lv-end-gauge i:nth-child(2){animation-delay:.08s}html.lq .lv.end-in .lv-end-gauge i:nth-child(3){animation-delay:.16s}
html.lq .lv.end-in .lv-end-gauge i:nth-child(4){animation-delay:.24s}html.lq .lv.end-in .lv-end-gauge i:nth-child(5){animation-delay:.32s}
html.lq .lv.end-in .lv-end-gauge i:nth-child(n+6){animation-delay:.4s}
@media (prefers-reduced-motion:reduce){html.lq .lv-end-gauge i{animation:none!important}}
html[data-motion="reduce"].lq .lv-end-gauge i{animation:none!important}

html.lq #scr-planning .wk-day .ld{display:inline-flex!important;align-items:center;gap:3px;margin-top:4px!important;min-height:0!important;padding:2px 7px 2px 6px!important;
  border-radius:999px!important;background:#EEE9FF!important;color:var(--accent-ink)!important;font:800 10.5px/1.2 var(--display)!important}
html.lq #scr-planning .wk-day .ld::before{display:none!important}
html.lq #scr-planning .wk-day .ld-ic{display:block;width:7px;height:8px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%);border-radius:1px}
html.lq #scr-planning .wk-day.sel .ld{background:#fff!important;color:var(--accent-ink)!important}
html.lq #scr-planning .wk-day.fait .ld{background:var(--accent)!important;color:#fff!important}
html.lq #scr-planning .wk-day.ret .ld{background:#FFF0DC!important;color:#B4610E!important}
html.lq #scr-planning .wk-day.sel.fait .ld,html.lq #scr-planning .wk-day.sel.ret .ld{background:#fff!important}
html.lq #scr-planning .wk-day.sel.fait .ld{color:var(--accent-ink)!important}
html.lq #scr-planning .wk-day .ld.pause{padding:2px 0!important;background:transparent!important;color:#B4B4BE!important}
html.lq #scr-planning .wk-day.sel .ld.pause{color:#fff!important}

/* Légende du planning : mêmes pastilles que les jours */
html.lq #scr-planning .pl-week-legend{gap:10px;font-size:11px!important;font-weight:750;color:#6E6A8A}
html.lq #scr-planning .pl-week-legend span{gap:5px}
html.lq #scr-planning .pl-week-legend i:not(.ld-ic){display:none}
html.lq #scr-planning .lg-pill{display:inline-flex;align-items:center;justify-content:center;gap:3px;min-width:22px;height:18px;padding:0 6px 0 5px;border-radius:999px;font:800 10.5px/1 var(--display);font-style:normal}
html.lq #scr-planning .lg-pill.planned{background:#EEE9FF;color:#6A6490}
html.lq #scr-planning .lg-pill.done{background:var(--accent);color:#fff;padding:0 6px}
html.lq #scr-planning .lg-pill .ld-ic{display:block;width:6px;height:7px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%);border-radius:1px}
html.lq .lv.is-win .lv-end-gauge i:not(.on){background:#DDF3E7;box-shadow:inset 0 0 0 1.5px #BDE5CF}

/* Selon le SGBD (Elisa, 2 novembre, 0 h 51, réf. 3) : « ! » rouge quand l’écriture ne marche pas dans l’app, à la place du ✓ */
html.lq .sg-bang{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;margin-top:4px;border-radius:50%;background:#E5484D;color:#fff;font:900 13px/1 var(--display);font-style:normal;box-shadow:0 2px 0 #B42328}
html.lq .sg-legende .sg-bang{margin:0}
html.lq .sg-row.is-off .sg-code{opacity:1}
/* iPhone SE et écrans de moins de 400 px (vérification du 10 novembre) : le code se coupait au milieu des mots (« iso_wee k »,
   « 'month ' ») ; la colonne du SGBD rétrécit et le code passe en 11,5 px : « DATETRUNC(iso_week, » tient sur une ligne. */
@media (max-width:400px){html.lq .sg-row{grid-template-columns:minmax(0,84px) minmax(0,1fr);gap:8px}html.lq .sg-code{font-size:11.5px;padding:5px 8px}}

/* Page de départ d’une leçon validée : « Voir le bilan » avec la coche verte (Elisa, 2 novembre, 1 h 06, réf. 4) */
.lst-go .lst-ok{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:#1E9E68;color:#fff;font:900 15px/1 var(--display,inherit);font-style:normal;box-shadow:0 2px 0 #147A4E}

/* Épingles : une punaise qui se plante (Elisa, 4 novembre, 8 h 36 : « change l’épingle avec la coche validée pour une jolie épingle
   micro-animée, pour bien qu’on voie quand une épingle a bien été mise, sans notification » ; avant, 2 novembre, 7 h 26, une coche
   ronde). Libre, la punaise est penchée, en lavande ; épinglée, elle est droite, rouge et plantée, son ombre au pied. À l’appui, elle
   tombe et se plante d’un rebond, une onde part de la pointe et quatre éclats jaillissent ; retirée, elle se décroche d’un petit bond
   et se penche. Le bouton de l’éditeur ne se penche plus lui-même : c’est la punaise qui le fait. */
html.lq .pin-pp{display:block;width:26px;height:26px;overflow:visible;rotate:0deg!important;filter:none!important;opacity:1!important;animation:none!important}
html.lq .pin-pp :is(.pin-pp-tete,.pin-pp-base,.pin-pp-cou){stroke-width:2.5;stroke-linejoin:round;transition:fill .22s,stroke .22s}
html.lq .pin-pp :is(.pin-pp-tete,.pin-pp-base){fill:#fff;stroke:#A99DDB}
html.lq .pin-pp .pin-pp-cou{fill:#EFEBFF;stroke:#A99DDB}
html.lq .pin-pp .pin-pp-aiguille{fill:none;stroke:#A99DDB;stroke-width:3;stroke-linecap:round;transition:stroke .22s}
html.lq .pin-pp .pin-pp-reflet{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;opacity:0;transition:opacity .22s}
html.lq .pin-pp .pin-pp-corps{transform-box:view-box;transform-origin:50% 87.5%;transform:rotate(-24deg);transition:transform .34s cubic-bezier(.3,1.5,.5,1)}
html.lq .pin-pp .pin-pp-trou{fill:#1B1640;opacity:0;transition:opacity .2s}
html.lq .pin-pp .pin-pp-onde{fill:none;stroke:#FF6B6B;stroke-width:2.2;opacity:0;transform-box:fill-box;transform-origin:center}
html.lq .pin-pp .pin-pp-eclats path{fill:none;stroke:#FFC83D;stroke-width:2.8;stroke-linecap:round;opacity:0;transform-box:fill-box;transform-origin:center}
html.lq :is(.ncard.pin .npin-btn,.console-query-pin.on,.console-pin-current.on) .pin-pp :is(.pin-pp-tete,.pin-pp-base){fill:#FF6B6B;stroke:#1B1640}
html.lq :is(.ncard.pin .npin-btn,.console-query-pin.on,.console-pin-current.on) .pin-pp .pin-pp-cou{fill:#FF9494;stroke:#1B1640}
html.lq :is(.ncard.pin .npin-btn,.console-query-pin.on,.console-pin-current.on) .pin-pp .pin-pp-aiguille{stroke:#1B1640}
html.lq :is(.ncard.pin .npin-btn,.console-query-pin.on,.console-pin-current.on) .pin-pp .pin-pp-reflet{opacity:.85}
html.lq :is(.ncard.pin .npin-btn,.console-query-pin.on,.console-pin-current.on) .pin-pp .pin-pp-corps{transform:none}
html.lq :is(.ncard.pin .npin-btn,.console-query-pin.on,.console-pin-current.on) .pin-pp .pin-pp-trou{opacity:.22}
html.lq .is-pin .pin-pp .pin-pp-corps{animation:pinPlante .5s cubic-bezier(.3,1.2,.5,1) both}
html.lq .is-pin .pin-pp .pin-pp-onde{animation:pinOnde .46s ease-out .2s both}
html.lq .is-pin .pin-pp .pin-pp-eclats path{animation:pinEclat .42s ease-out .22s both}
html.lq .is-pin .pin-pp .pin-pp-trou{animation:pinTrou .5s ease-out both}
html.lq .is-unpin .pin-pp .pin-pp-corps{animation:pinDecroche .4s cubic-bezier(.3,.7,.3,1) both}
@keyframes pinPlante{0%{transform:translateY(-11px) rotate(-24deg)}48%{transform:translateY(1.5px) rotate(3deg) scale(1.05,.9)}72%{transform:translateY(0) rotate(-2deg) scale(.98,1.03)}100%{transform:none}}
@keyframes pinOnde{0%{opacity:0;transform:scale(.3)}12%{opacity:.85}100%{opacity:0;transform:scale(1.7)}}
@keyframes pinTrou{0%,42%{opacity:0}100%{opacity:.22}}
@keyframes pinEclat{0%{opacity:0;transform:scale(.2)}35%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
@keyframes pinDecroche{0%{transform:none}38%{transform:translateY(-8px) rotate(-8deg)}100%{transform:rotate(-24deg)}}
html.lq #scr-console .console-pin-current .console-pin-glyph{rotate:0deg!important}
html.lq #scr-console .console-pin-current.on>.console-pin-glyph{animation:none}
/* Désépinglée depuis la liste : la punaise se décroche, puis la ligne s’efface (unpinConsoleQuery) */
html.lq #scr-console .console-query-row.is-leaving{pointer-events:none;animation:pinLigneSort .3s ease .14s both}
@keyframes pinLigneSort{to{opacity:0;transform:translateX(10px) scale(.98)}}
@media (prefers-reduced-motion:reduce){html.lq .pin-pp *,html.lq #scr-console .console-query-row.is-leaving{animation:none!important;transition:none!important}}
html[data-motion="reduce"].lq .pin-pp *,html[data-motion="reduce"].lq #scr-console .console-query-row.is-leaving{animation:none!important;transition:none!important}

/* ---------- Le bilan d’une leçon dans la DA du site ----------
   Elisa, 2 novembre, 8 h 01 : « cette page est encore de l’ancienne DA (je préférais la DA du site internet) ». Le haut reprend la carte de
   la page de départ du cours : scène violette quadrillée (halo soleil, lueur menthe, étincelles), module en menthe, place dans le module,
   « Bravo ! » en jaune soleil, pastilles de verre (la première blanche), étiquette menthe « Validée » inclinée, mascotte qui dépasse.
   « Ce que tu retiens » devient une fiche, comme « À retenir » des cartes mémo : l’ampoule autocollante et l’étiquette jaune à cheval sur
   le bord, les mots importants surlignés, le code en touches. La séance suivante : même scène, titre en jaune, bouton jaune en relief. */
html.lq #scr-lesson .bravo-hero.bv{position:relative;isolation:isolate;overflow:visible!important;display:block;margin:14px 0 6px;padding:28px 22px 26px!important;text-align:left;
  border:0!important;border-radius:30px!important;background:var(--deep)!important;color:#fff!important;box-shadow:0 7px 0 #3A22B0,0 30px 50px -28px rgba(40,20,140,.6)!important;
  animation:bravoFadeUp .42s var(--spring-ios) both}
html.lq #scr-lesson .bravo-hero.bv::before{content:"";position:absolute;inset:0;z-index:-1;height:auto;border-radius:inherit;pointer-events:none;
  background:radial-gradient(220px 170px at 92% 0%,rgba(255,216,107,.32),transparent 70%),radial-gradient(200px 160px at 0% 100%,rgba(159,240,198,.2),transparent 70%),
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/26px 26px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/26px 26px!important}
html.lq #scr-lesson .bravo-hero.bv::after{display:none}
html.lq #scr-lesson .bravo-hero.bv .lst-kicker{margin-right:0;color:var(--mint)!important}
html.lq #scr-lesson .bravo-hero.bv .lst-pos{color:rgba(255,255,255,.72)!important}
html.lq #scr-lesson .bravo-hero.bv .lst-sp.s1{top:auto;bottom:96px;right:30px}
html.lq #scr-lesson .bravo-hero.bv h1{margin:14px 0 0!important;color:var(--sun-hi)!important;font:800 clamp(38px,11vw,50px)/1 var(--display)!important;letter-spacing:-.03em!important;text-align:left}
html.lq #scr-lesson .bravo-hero.bv .bravo-lesson{max-width:calc(100% - 92px);margin:10px 0 0!important;color:#fff!important;font:700 19px/1.25 var(--display)!important;letter-spacing:-.01em;text-align:left;text-wrap:balance}
html.lq #scr-lesson .bravo-hero.bv .bravo-lesson small{display:block;margin-top:4px;color:rgba(255,255,255,.78)!important;font:600 14px/1.3 var(--ui)!important}
html.lq #scr-lesson .bravo-hero.bv .bravo-steps{justify-content:flex-start;gap:8px;max-width:calc(100% - 84px);margin:16px 0 0}
html.lq #scr-lesson .bravo-hero.bv .bravo-step{gap:6px;padding:6px 11px!important;border:0!important;border-radius:99px!important;background:rgba(255,255,255,.14)!important;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2)!important;color:#fff!important;font:700 13px/1.2 var(--display)!important}
html.lq #scr-lesson .bravo-hero.bv .bravo-step:first-child{background:#fff!important;color:var(--accent-ink)!important;box-shadow:0 3px 0 rgba(27,22,64,.28)!important}
html.lq #scr-lesson .bravo-hero.bv .bravo-step i{width:auto;height:auto;border-radius:0;background:none!important;color:inherit;font-style:normal;font-size:12px}
html.lq #scr-lesson .bravo-hero.bv .bravo-step:first-child i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--accent)!important;color:#fff!important;font-size:10px}
html.lq #scr-lesson .bv-ok{position:absolute;top:-15px;right:16px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:7px 12px 6px;border:2px solid #fff;border-radius:12px;
  background:var(--mint);color:#1B1640!important;font:800 14px/1 var(--display);rotate:7deg;box-shadow:0 4px 0 rgba(20,10,60,.3);animation:bvOkIn .55s var(--pop) .35s backwards}
html.lq #scr-lesson .bv-ok i{font-style:normal;color:#1B1640!important}
html.lq #scr-lesson .bravo-hero.bv .bv-stk{right:-8px;bottom:-24px;width:92px}
@keyframes bvOkIn{0%{opacity:0;transform:scale(.4) rotate(-16deg)}65%{opacity:1;transform:scale(1.1) rotate(3deg)}100%{transform:none}}
/* « Ce que tu retiens » : la fiche */
html.lq #scr-lesson .bravo-recap{position:relative;overflow:visible!important;margin-top:30px;padding:30px 16px 16px!important;border:2px solid var(--line)!important;
  border-radius:24px!important;background:#fff!important;box-shadow:0 4px 0 var(--lip)!important}
html.lq #scr-lesson .bravo-recap-head.bv-lab{position:absolute;top:-27px;left:10px;z-index:2;display:flex;align-items:center;gap:6px;margin:0;pointer-events:none}
html.lq #scr-lesson .bv-bulb{flex:none;width:52px;height:52px;rotate:-8deg;animation:cdSwing .9s var(--pop) .3s backwards}
html.lq #scr-lesson .bv-bulb svg{display:block;width:100%;height:100%}
html.lq #scr-lesson .bv-tag{padding:6px 11px 5px;border:2px solid #fff;border-radius:11px;background:var(--sun);color:#1B1640;rotate:-2deg;box-shadow:0 3px 0 rgba(27,22,64,.25);
  animation:cdTagIn .5s var(--pop) .45s backwards}
html.lq #scr-lesson .bv-tag b{color:#1B1640!important;font:800 13px/1 var(--display)!important;letter-spacing:.06em!important;text-transform:uppercase}
html.lq #scr-lesson .bravo-recap .fk-syn-map.is-recap{margin:0!important;padding:0 2px!important;border:0!important;background:none!important;box-shadow:none!important}
html.lq #scr-lesson .bravo-recap .fk-syn-map.is-recap li{padding:13px 0}
html.lq #scr-lesson .bravo-recap .fk-syn-map.is-recap li+li{border-top:1.5px dashed #E6E0F8}
html.lq #scr-lesson .bravo-recap .fk-syn-map.is-recap>li>b{border:2px solid #fff;background:var(--accent-soft);box-shadow:0 3px 0 var(--lip)}
html.lq #scr-lesson .bravo-recap .fk-syn-map.is-recap strong b{color:var(--ink)!important;font-weight:800;background:linear-gradient(transparent 58%,rgba(255,200,61,.55) 58%)!important;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
html.lq #scr-lesson .bravo-recap .fk-syn-map.is-recap code.fk-rc{padding:4px 8px;border:1.5px solid #D9CFFF;border-radius:9px;background:#F4F0FF;color:#4528CA;box-shadow:0 2px 0 #D9CFFF}
/* La séance suivante : la même scène, le titre en jaune, le bouton jaune */
html.lq #scr-lesson .bravo-wrap .bravo-recap~.bravo-next-btn,html.lq #scr-lesson .bravo-wrap .bravo-unlock~.bravo-next-btn{position:relative;isolation:isolate;margin-top:10px;padding:20px!important;
  border-radius:28px!important;background:var(--deep)!important;box-shadow:0 7px 0 #3A22B0,0 26px 44px -28px rgba(40,20,140,.55)!important}
html.lq #scr-lesson .bravo-wrap :is(.bravo-recap,.bravo-unlock)~.bravo-next-btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(200px 150px at 96% 0%,rgba(255,216,107,.28),transparent 70%),
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/26px 26px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/26px 26px}
html.lq #scr-lesson .bravo-wrap :is(.bravo-recap,.bravo-unlock)~.bravo-next-btn .bravo-next-lab{display:flex;align-items:center;gap:8px;color:var(--mint)!important;font:800 12px/1.3 var(--ui)!important;letter-spacing:.08em!important;text-transform:uppercase!important}
html.lq #scr-lesson .bravo-wrap :is(.bravo-recap,.bravo-unlock)~.bravo-next-btn .bravo-next-lab::before{content:"";flex:none;width:18px;height:3px;border-radius:2px;background:currentColor}
html.lq #scr-lesson .bravo-wrap :is(.bravo-recap,.bravo-unlock)~.bravo-next-btn .bn-copy b{margin-top:6px;color:var(--sun-hi)!important;font:800 25px/1.08 var(--display)!important}
html.lq #scr-lesson .bravo-wrap :is(.bravo-recap,.bravo-unlock)~.bravo-next-btn .bn-cta{background:var(--sun);color:var(--ink);font:800 18px/1 var(--display);box-shadow:0 5px 0 var(--sun-lip)}
html.lq #scr-lesson .bravo-wrap :is(.bravo-recap,.bravo-unlock)~.bravo-next-btn:active .bn-cta{box-shadow:0 1px 0 var(--sun-lip)}
html.lq #scr-lesson .bravo-wrap :is(.bravo-recap,.bravo-unlock)~.bravo-next-btn .bn-num{background:var(--ink)!important;color:var(--sun)!important}
@media (prefers-reduced-motion:reduce){html.lq #scr-lesson :is(.bravo-hero.bv,.bv-ok,.bv-bulb,.bv-tag,.bv-stk,.bravo-hero.bv .lst-sp){animation:none!important}}
html[data-motion="reduce"].lq #scr-lesson :is(.bravo-hero.bv,.bv-ok,.bv-bulb,.bv-tag,.bv-stk,.bravo-hero.bv .lst-sp){animation:none!important}
/* « Ajouter à mes notes » au pied de la fiche (Elisa, 2 novembre, 8 h 11 : « ce bouton fait bizarre avec le reste ») : toute la largeur de
   la fiche sous un trait pointillé, comme une ligne de plus ; ajouté (ou déjà là), il passe en menthe avec sa coche, sans bloc lavande. */
html.lq #scr-lesson .bravo-recap .bravo-note{margin:4px 0 0;padding-top:64px}
html.lq #scr-lesson .bravo-recap .bravo-note:is(.is-had,.is-done){padding-top:14px}
html.lq #scr-lesson .bravo-recap .bravo-note::before{content:"";position:absolute;left:2px;right:2px;top:0;border-top:1.5px dashed #E6E0F8}
html.lq #scr-lesson .bravo-recap .bravo-note .lv-note-in{width:100%}
html.lq #scr-lesson .bravo-recap .bravo-note .lv-note-btn{width:100%;justify-content:center;height:52px;padding:0 16px;font-size:16.5px}
html.lq #scr-lesson .bravo-recap .bravo-note .lv-note-arrow{right:14px}
html.lq #scr-lesson .bravo-recap .bravo-note:is(.is-done,.is-already) .lv-note-btn{background:#E9FBF2;border-color:#BDEFD5;color:#0F7A4A;box-shadow:0 4px 0 #BDEFD5}
html.lq #scr-lesson .bravo-recap .bravo-note:is(.is-done,.is-already) .lv-note-ico{display:none}
html.lq #scr-lesson .bravo-recap .bravo-note:is(.is-done,.is-already) .lv-note-ok{position:static;margin:0;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--mint);color:#0F5C38}
html.lq #scr-lesson .bravo-recap .bravo-note:is(.is-done,.is-already) .lv-note-ok svg{width:15px;height:15px}
/* La flèche sur la fiche blanche (Elisa, 2 novembre, 8 h 19 : « la flèche est transparente, bizarre ») : blanche sur halo jaune pâle, elle
   était faite pour le fond violet des vidéos ; sur le blanc elle prend le violet du bouton, posé sur un halo jaune plein. */
html.lq #scr-lesson .bravo-recap .bravo-note .lv-note-arrow path{stroke:var(--accent-ink,#5335E0)}
html.lq #scr-lesson .bravo-recap .bravo-note .lv-note-arrow .lv-a-halo{stroke:var(--sun-hi);opacity:.75}
/* Schéma (Elisa, 2 novembre, 21 h 33 : « faire plutôt par onglet… mettre les pills en haut » ; « pas de bouton retour ») :
   une table à la fois, choisie dans une rangée de pastilles collée en haut ; un vrai bouton Retour en bas, à portée du pouce. */
html.lq #schema-sheet .sch-tabs{position:sticky;top:0;z-index:2;display:flex;gap:8px;margin:0 -18px 12px;padding:14px 34px 12px;overflow-x:auto;scrollbar-width:none;background:var(--bg);scroll-padding-inline:34px}
html.lq #schema-sheet .sch-tabs::-webkit-scrollbar{display:none}
html.lq #schema-sheet .sch-tab{flex:none;min-height:38px;padding:8px 14px;border-radius:99px;border:2px solid var(--line);background:#fff;box-shadow:0 3px 0 var(--lip);color:var(--ink-2);font:700 14px/1 var(--mono);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq #schema-sheet .sch-tab:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
html.lq #schema-sheet .sch-tab.on{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 3px 0 var(--accent-lip)}
html.lq #schema-sheet .sch-tabs:first-child{margin-top:0}
html.lq #schema-sheet .sch-table[hidden]{display:none}
html.lq #schema-sheet.on .sch-table[role="tabpanel"]{animation-delay:0s}
html.lq #schema-sheet .viz-body{padding-bottom:12px}
html.lq #schema-sheet .sch-foot{flex:none;padding:10px 16px calc(10px + var(--safe-bottom));background:var(--bg);box-shadow:0 -2px 0 var(--line)}
html.lq #schema-sheet .sch-ret{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:50px;border:2px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 4px 0 var(--lip);color:var(--accent-ink);font:700 16px/1 var(--display);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq #schema-sheet .sch-ret svg{width:20px;height:20px;flex:none}
html.lq #schema-sheet .sch-ret:active{transform:translateY(4px);box-shadow:0 0 0 var(--lip)}
/* Le schéma UML (Elisa, 5 novembre, 7 h 03 : « faire une première pill en jaune ? ») : la première pastille, jaune soleil comme les
   boutons forts de la vitrine, avec ses deux classes reliées ; la toile, un papier quadrillé lilas ; une carte par table aux couleurs
   des classes du cours UML (sa teinte en bandeau, son nom, ses lignes en pastille, ses colonnes PK et FK) ; les liens en encre douce,
   leurs multiplicités dans le même code que le cours ; une table survolée allume ses liens. Les cartes arrivent une à une, puis les
   traits se dessinent. */
html.lq #schema-sheet .sch-tab.is-uml{display:inline-flex;align-items:center;gap:7px;border-color:#FFD86B;background:#FFF4CF;box-shadow:0 3px 0 var(--sun-lip);color:#6B4A00;font:800 14px/1 var(--display)}
html.lq #schema-sheet .sch-tab.is-uml svg{flex:none;width:18px;height:18px}
html.lq #schema-sheet .sch-tab.is-uml.on{border-color:var(--sun);background:var(--sun);color:#1B1640;box-shadow:0 3px 0 var(--sun-lip)}
html.lq #schema-sheet .sch-tab.is-uml:active{box-shadow:0 0 0 var(--sun-lip)}
html.lq #schema-sheet .sch-uml{margin:0 16px 14px}
html.lq #schema-sheet .sch-uml[hidden]{display:none}
html.lq #schema-sheet .umd-tete{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:2px 4px 10px}
html.lq #schema-sheet .umd-tete b{font:800 17px/1.2 var(--display);color:var(--ink);letter-spacing:-.01em}
html.lq #schema-sheet .umd-tete span{flex:none;padding:3px 9px;border-radius:99px;background:var(--accent-soft);color:var(--accent-ink);font:700 12px/1.2 var(--display)}
/* Les réglages (7 h 38) : l’interrupteur « Exemples de données », et « Les liens en clair », qui descend jusqu’à la liste. */
html.lq #schema-sheet .umd-outils{display:flex;flex-wrap:wrap;gap:8px;margin:0 2px 12px}
html.lq #schema-sheet .umd-bt{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 13px 0 10px;border:2px solid var(--line);border-radius:99px;background:#fff;box-shadow:0 3px 0 var(--lip);color:var(--ink-2);font:700 13.5px/1 var(--display);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s var(--press),box-shadow .12s var(--press),background .2s,border-color .2s,color .2s}
html.lq #schema-sheet .umd-bt:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
html.lq #schema-sheet .umd-bt>svg{flex:none;width:17px;height:17px;color:var(--accent)}
html.lq #schema-sheet .umd-bt:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
html.lq #schema-sheet .umd-sw{position:relative;flex:none;width:30px;height:18px;border-radius:99px;background:#D9D3EE;transition:background .2s}
html.lq #schema-sheet .umd-sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(27,22,64,.28);transition:transform .22s cubic-bezier(.3,.7,.4,1.3)}
html.lq #schema-sheet .umd-bt.is-ex[aria-pressed="true"]{border-color:#D9D0FF;background:var(--accent-soft);color:var(--accent-ink)}
html.lq #schema-sheet .umd-bt.is-ex[aria-pressed="true"] .umd-sw{background:var(--accent)}
html.lq #schema-sheet .umd-bt.is-ex[aria-pressed="true"] .umd-sw::after{transform:translateX(12px)}
html.lq #schema-sheet .umd-toile{position:relative;overflow:hidden;border-radius:22px;background-color:#FBFAFF;
  background-image:linear-gradient(rgba(106,77,244,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(106,77,244,.07) 1px,transparent 1px);background-size:22px 22px;
  box-shadow:inset 0 0 0 2px var(--line),0 4px 0 var(--lip)}
html.lq #schema-sheet .umd-plan{position:relative;margin:0 auto}
html.lq #schema-sheet .umd-l{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
/* Les liens (7 h 38 : « rendre plus clairs les liens ») : chaque trait à la couleur de la table qu’il désigne, comme ses
   multiplicités ; une table touchée allume les siens (plus épais, ses multiplicités pleines) et efface les autres. */
html.lq #schema-sheet .umd-a{fill:none;stroke:var(--lc,#9A92C9);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.88;transition:opacity .2s,stroke-width .2s}
html.lq #schema-sheet .umd-a:is(.is-on,.is-sur){stroke-width:3.4;opacity:1}
html.lq #schema-sheet .umd-m{transition:opacity .2s}
html.lq #schema-sheet .umd-m rect{fill:#fff;stroke:var(--lc,var(--line));stroke-width:1.5px;transition:fill .2s}
html.lq #schema-sheet .umd-m text{font:800 9.5px/1 var(--mono);fill:var(--lci,var(--accent-ink));transition:fill .2s}
html.lq #schema-sheet .umd-m:is(.is-on,.is-sur) rect{fill:var(--lc)}
html.lq #schema-sheet .umd-m:is(.is-on,.is-sur) text{fill:#fff}
html.lq #schema-sheet .umd-plan.is-focus .umd-a:not(.is-on){opacity:.1}
/* Sur un trait allumé, des points qui coulent de la clé étrangère vers la clé primaire : le sens du lien (9 h 18 : « une flèche animée ») */
html.lq #schema-sheet .umd-f{fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-dasharray:.1 7;opacity:0;pointer-events:none;transition:opacity .2s}
html.lq #schema-sheet .umd-f:is(.is-on,.is-sur){opacity:.95;animation:umdFlux .75s linear infinite}
@keyframes umdFlux{to{stroke-dashoffset:-7.1}}
html.lq #schema-sheet .umd-plan.is-focus .umd-m:not(.is-on){opacity:.16}
html.lq #schema-sheet .umd-t{position:absolute;display:flex;flex-direction:column;margin:0;padding:0;border:0;border-radius:16px;background:#fff;box-shadow:0 3px 0 var(--lip);
  overflow:hidden;color:var(--ink);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s var(--press),box-shadow .12s var(--press),opacity .2s,filter .2s}
html.lq #schema-sheet .umd-t::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px var(--line);pointer-events:none;transition:box-shadow .2s}
html.lq #schema-sheet .umd-t:active:not(:has(.umd-pli:active)){transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
html.lq #schema-sheet .umd-hb:focus-visible,html.lq #schema-sheet .umd-pli:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
html.lq #schema-sheet .umd-t.is-sel{box-shadow:0 3px 0 var(--c)}
html.lq #schema-sheet .umd-t.is-sel::after{box-shadow:inset 0 0 0 2.5px var(--c)}
html.lq #schema-sheet .umd-t.is-lie::after{box-shadow:inset 0 0 0 2px var(--c)}
html.lq #schema-sheet .umd-plan.is-focus .umd-t:not(.is-sel):not(.is-lie){opacity:.4;filter:saturate(.35)}
html.lq #schema-sheet .umd-h{flex:none;display:flex;align-items:center;gap:6px;height:34px;padding:0 5px 0 14px;background:var(--cs);box-shadow:inset 4px 0 0 var(--c),inset 0 -2px 0 var(--line)}
/* L’en-tête : le nom et les lignes (le toucher allume les liens), puis la flèche qui plie ou déplie la table (9 h 18). */
html.lq #schema-sheet .umd-hb{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.lq #schema-sheet .umd-pli{flex:none;display:grid;place-items:center;width:28px;height:28px;margin:0;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.75);color:var(--ci);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s,transform .12s var(--press)}
html.lq #schema-sheet .umd-pli:active{transform:scale(.9)}
html.lq #schema-sheet .umd-pli svg{width:15px;height:15px;transition:transform .32s cubic-bezier(.33,1,.68,1)}
html.lq #schema-sheet .umd-t.is-plie .umd-pli svg{transform:rotate(-90deg)}
html.lq #schema-sheet .umd-h b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 13px/34px var(--mono);color:var(--ci)}
html.lq #schema-sheet .umd-h small{flex:none;padding:3px 7px;border-radius:99px;background:#fff;color:var(--ci);font:800 10.5px/1 var(--display)}
html.lq #schema-sheet .umd-cs{display:flex;flex-direction:column;padding:7px 0}
/* Une colonne : une ligne de 20 px (sa clé, son nom, son type ou « → sa table ») ; avec les exemples, 40 px : 2 px d’air, son nom,
   son cadre dessous, puis 4 px avant la colonne suivante (6 novembre, 7 h 52, réf. 3 : « augmente juste un tout petit peu »). */
html.lq #schema-sheet .umd-c{display:flex;flex-direction:column;flex:none;height:20px;padding:0 10px 0 14px;font:600 11.5px/1 var(--mono);color:var(--ink);overflow:hidden;transition:height .32s cubic-bezier(.33,1,.68,1),padding-top .32s cubic-bezier(.33,1,.68,1),opacity .22s,background .2s}
html.lq #schema-sheet .umd-t.is-ex .umd-c:not(.is-plus){height:40px;padding-top:2px}
html.lq #schema-sheet .umd-c.is-cache,html.lq #schema-sheet .umd-c.is-plus.is-vide{height:0!important;opacity:0}
html.lq #schema-sheet .umd-t:not(.is-ex) .umd-x{opacity:0}
html.lq #schema-sheet .umd-c.is-on{background:var(--lcs,var(--cs))}
html.lq #schema-sheet .umd-r{display:flex;align-items:center;gap:6px;flex:none;height:20px;min-width:0}
html.lq #schema-sheet .umd-r>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:20px}
html.lq #schema-sheet .umd-c i{flex:none;padding:2px 4px;border-radius:5px;font:800 8.5px/1 var(--display);font-style:normal;letter-spacing:.03em}
html.lq #schema-sheet .umd-c i.is-pk{background:var(--sun);color:#1B1640}
html.lq #schema-sheet .umd-c i.is-fk{background:var(--mint);color:#0D5B3B}
html.lq #schema-sheet .umd-c.is-fk .umd-r>span{color:#0F7A4C}
html.lq #schema-sheet .umd-r em{flex:none;margin-left:auto;font:600 9.5px/1 var(--mono);font-style:normal;color:var(--ink-3)}
/* « → la table » rétrécit avant le nom de la colonne (320 px : « comma… » ne se lisait plus) ; les lignes gardent la place des accents. */
html.lq #schema-sheet .umd-v{flex:0 3 auto;min-width:34px;max-width:58%;margin-left:auto;padding:1px 6px;border-radius:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--lcs);color:var(--lci);font:800 9.5px/14px var(--mono)}
html.lq #schema-sheet .umd-c.is-on .umd-v{background:var(--lc);color:#fff}
/* Le cadre de l’exemple (7 h 38 : « ex : 4 », « ex : menu ») ; celui d’une clé étrangère, à la couleur de la table qu’elle désigne. */
html.lq #schema-sheet .umd-x{display:flex;align-items:center;gap:4px;align-self:flex-start;max-width:100%;height:14px;padding:0 5px;border-radius:5px;background:#F6F4FD;box-shadow:inset 0 0 0 1px var(--line);font:600 9.5px/14px var(--mono);color:var(--ink-2);transition:opacity .25s ease}
html.lq #schema-sheet .umd-x small{flex:none;font:700 8.5px/14px var(--display);color:var(--ink-3)}
html.lq #schema-sheet .umd-x b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;line-height:14px;color:var(--ink)}
html.lq #schema-sheet .umd-x.is-null b{font-style:italic;font-weight:600;color:var(--ink-3)}
html.lq #schema-sheet .umd-c.is-lien .umd-x{background:var(--lcs);box-shadow:none}
html.lq #schema-sheet .umd-c.is-lien .umd-x b{color:var(--lci)}
html.lq #schema-sheet .umd-c.is-on .umd-x{background:#fff}
html.lq #schema-sheet .umd-c.is-plus{flex-direction:row;align-items:center;color:var(--ink-3);font:600 11px/1 var(--display)}
/* La bulle d’une table touchée (ou d’un lien de la liste) : collée en bas de la feuille tant que la toile est là. */
html.lq #schema-sheet .umd-bulle{position:sticky;bottom:12px;z-index:3;margin:12px 0 0}
html.lq #schema-sheet .umd-bulle[hidden]{display:none}
html.lq #schema-sheet .umd-bc{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:10px 50px 12px 14px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 2px var(--c),0 4px 0 var(--lip),0 14px 30px rgba(27,22,64,.16);animation:umdBulle .3s cubic-bezier(.2,.8,.3,1.2) backwards}
/* Un nom long (« Lignes_de_commande ») passe à la ligne au lieu d’être coupé. */
html.lq #schema-sheet .umd-bh{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;width:100%;min-width:0}
html.lq #schema-sheet .umd-bn{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;font:800 15px/1.3 var(--mono);color:var(--ci)}
html.lq #schema-sheet .umd-bl{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;color:var(--ink-3);font:600 12.5px/1.2 var(--ui)}
html.lq #schema-sheet .umd-bl>.sr{margin:0}
html.lq #schema-sheet .umd-bme{display:inline-flex;align-items:center;min-height:32px;padding:0 11px;border-radius:99px;background:var(--c);color:#fff;font:800 12.5px/1 var(--mono)}
html.lq #schema-sheet .umd-bps{display:inline-flex;flex-wrap:wrap;gap:6px}
html.lq #schema-sheet .umd-ar{flex:none;display:inline-grid;place-items:center;width:46px;height:14px;color:var(--lc,var(--c))}
html.lq #schema-sheet .umd-ar svg{width:46px;height:14px;overflow:visible}
html.lq #schema-sheet .umd-ar.is-boucle,html.lq #schema-sheet .umd-ar.is-boucle svg{width:30px;height:18px}
html.lq #schema-sheet .umd-ar path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
html.lq #schema-sheet .umd-ar-l{stroke-dasharray:5 4;animation:umdArL .7s linear infinite}
html.lq #schema-sheet .umd-ar-p{animation:umdArP 1.4s ease-in-out infinite}
@keyframes umdArL{to{stroke-dashoffset:-9}}
@keyframes umdArP{0%,100%{transform:translateX(0)}50%{transform:translateX(2px)}}
html.lq #schema-sheet .umd-bl code{padding:3px 7px;border-radius:7px;background:var(--cs);color:var(--ci);font:700 12px/1 var(--mono)}
html.lq #schema-sheet .umd-bl.is-vide{font-weight:500;line-height:1.4}
html.lq #schema-sheet .umd-bp{display:inline-flex;align-items:center;min-height:32px;padding:0 11px;border:0;border-radius:99px;background:var(--cs);box-shadow:inset 0 0 0 1.5px var(--c);color:var(--ci);font:700 12.5px/1 var(--mono);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s var(--press)}
html.lq #schema-sheet .umd-bp:active{transform:scale(.95)}
html.lq #schema-sheet .umd-bx{position:absolute;top:11px;right:10px;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:#F3F1FA;color:var(--ink-2);cursor:pointer;-webkit-tap-highlight-color:transparent}
html.lq #schema-sheet .umd-bx svg{width:15px;height:15px}
html.lq #schema-sheet .umd-bc.is-lien{gap:7px;padding-top:13px}
/* Les liens en clair, pliables (7 h 38) : chaque lien à la couleur de sa table, ses deux phrases, sa jointure toute prête. */
html.lq #schema-sheet .umd-liens{margin:12px 0 0;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 2px var(--line),0 4px 0 var(--lip);overflow:hidden}
html.lq #schema-sheet .umd-liens>summary{display:flex;align-items:center;gap:9px;min-height:52px;padding:0 12px 0 14px;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.lq #schema-sheet .umd-liens>summary::-webkit-details-marker{display:none}
html.lq #schema-sheet .umd-liens>summary:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;border-radius:18px}
html.lq #schema-sheet .umd-li-i{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:10px;background:#FFF4CF;color:#6B4A00}
html.lq #schema-sheet .umd-li-i svg{width:18px;height:18px}
html.lq #schema-sheet .umd-liens>summary b{flex:1;min-width:0;font:800 15px/1.2 var(--display);color:var(--ink)}
html.lq #schema-sheet .umd-liens>summary small{flex:none;padding:3px 8px;border-radius:99px;background:var(--accent-soft);color:var(--accent-ink);font:800 12px/1 var(--display)}
html.lq #schema-sheet .umd-chev{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:#F3F1FA;color:var(--accent-ink);transition:transform .25s cubic-bezier(.3,.7,.4,1)}
html.lq #schema-sheet .umd-chev svg{width:16px;height:16px}
html.lq #schema-sheet .umd-liens[open] .umd-chev{transform:rotate(180deg)}
html.lq #schema-sheet .umd-liens ol{display:flex;flex-direction:column;gap:8px;margin:0;padding:2px 10px 10px;list-style:none}
html.lq #schema-sheet .umd-li{display:flex;flex-direction:column;align-items:stretch;gap:7px;width:100%;margin:0;padding:11px 12px;border:0;border-radius:14px;background:#FBFAFF;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s,box-shadow .2s,transform .12s var(--press)}
html.lq #schema-sheet .umd-li:active{transform:scale(.985)}
html.lq #schema-sheet .umd-li.is-on{background:var(--lcs);box-shadow:inset 0 0 0 2px var(--lc)}
html.lq #schema-sheet .umd-lt{display:flex;flex-wrap:wrap;align-items:center;gap:4px 7px;min-width:0;font:700 12.5px/1.3 var(--mono);color:var(--ink)}
html.lq #schema-sheet .umd-lt code{min-width:0;font:inherit;overflow-wrap:anywhere}
html.lq #schema-sheet .umd-lt code:last-of-type{color:var(--lci)}
/* « deviné au nom » (client_id → clients, sans FOREIGN KEY), « clé composite » */
html.lq #schema-sheet .umd-dv{padding:2px 7px;border-radius:99px;background:#F3F1FA;color:var(--ink-3);font:700 10.5px/1.2 var(--display)}
html.lq #schema-sheet .umd-fl{color:var(--lc);font:800 14px/1 var(--ui)}
html.lq #schema-sheet .umd-lp{display:flex;align-items:baseline;gap:8px;font:500 13px/1.42 var(--ui);color:var(--ink-2)}
html.lq #schema-sheet .umd-lp>b{flex:none;min-width:36px;padding:2px 5px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--lc);color:var(--lci);font:800 10.5px/1.25 var(--mono);text-align:center}
html.lq #schema-sheet .umd-lp code{font:700 12px/1 var(--mono);color:var(--ink)}
html.lq #schema-sheet .umd-j{display:block;padding:8px 10px;border-radius:11px;background:var(--code-bg);color:var(--code-ink);font:600 11.5px/1.5 var(--mono);white-space:normal;overflow-wrap:anywhere}
html.lq #schema-sheet .umd-leg{display:flex;flex-wrap:wrap;gap:6px;margin:12px 2px 0}
html.lq #schema-sheet .umd-lg{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink-2);font:600 12px/1 var(--display)}
html.lq #schema-sheet .umd-lg b{font:800 11px/1 var(--mono);color:var(--accent-ink)}
html.lq #schema-sheet .umd-lg i{padding:2px 5px;border-radius:5px;font:800 9px/1 var(--display);font-style:normal}
html.lq #schema-sheet .umd-lg.is-pk i{background:var(--sun);color:#1B1640}
html.lq #schema-sheet .umd-lg.is-fk i{background:var(--mint);color:#0D5B3B}
html.lq #schema-sheet .umd-lg.is-v b{padding:2px 6px;border-radius:6px;background:var(--accent-soft);font-size:12px}
html.lq #schema-sheet .umd-lg.is-x b{padding:2px 5px;border-radius:5px;background:#F6F4FD;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-3);font:700 9.5px/1 var(--display)}
html.lq #schema-sheet .umd-note{margin:10px 4px 0;color:var(--ink-3);font:500 12.5px/1.45 var(--ui)}
/* L’arrivée : les cartes une à une, puis les traits, puis leurs multiplicités. Le remplissage « backwards » laisse ensuite la main
   aux styles (une carte qu’on presse s’enfonce, une table touchée efface les autres). Redessinée (les exemples pliés ou dépliés, la
   largeur) : les traits reviennent seuls, vite. */
html.lq #schema-sheet.on .umd-t{animation:umdCarte .45s cubic-bezier(.2,.8,.3,1.2) backwards;animation-delay:calc(var(--i) * .05s)}
html.lq #schema-sheet.on .umd-a{animation:umdTrait .5s ease-out backwards;animation-delay:calc(.25s + var(--i) * .05s)}
html.lq #schema-sheet.on .umd-m{animation:umdMult .3s ease-out backwards;animation-delay:calc(.55s + var(--i) * .05s)}
/* Une toile qui glisse d’une mise en page à l’autre (les exemples, une table pliée) : rien ne rejoue son arrivée, les cartes et la toile
   suivent leurs nouvelles places en 320 ms. */
html.lq #schema-sheet.on .umd-plan.is-fixe :is(.umd-t,.umd-a,.umd-m,.umd-x){animation:none}
html.lq #schema-sheet .umd-plan.is-anim{transition:height .32s cubic-bezier(.33,1,.68,1)}
html.lq #schema-sheet .umd-plan.is-anim .umd-t{transition:top .32s cubic-bezier(.33,1,.68,1),height .32s cubic-bezier(.33,1,.68,1),opacity .2s,filter .2s}
html.lq #schema-sheet.on .umd-plan.is-maj .umd-t{animation:none}
html.lq #schema-sheet.on .umd-plan.is-maj :is(.umd-a,.umd-m){animation:umdTrait .3s ease-out backwards;animation-delay:0s}
html.lq #schema-sheet.on .umd-plan.is-maj .umd-x{animation:umdEx .3s ease-out backwards}
@keyframes umdCarte{0%{opacity:0;transform:translateY(10px) scale(.96)}100%{opacity:1;transform:none}}
@keyframes umdTrait{from{opacity:0}}
@keyframes umdMult{from{opacity:0}}
@keyframes umdEx{from{opacity:0;transform:translateY(-3px)}}
@keyframes umdBulle{from{opacity:0;transform:translateY(10px) scale(.97)}}
@media (prefers-reduced-motion:reduce){html.lq #schema-sheet :is(.umd-t,.umd-a,.umd-m,.umd-x,.umd-bc,.umd-f,.umd-ar-l,.umd-ar-p){animation:none!important}html.lq #schema-sheet :is(.umd-c,.umd-pli svg){transition:none!important}html.lq #schema-sheet .umd-chev,html.lq #schema-sheet .umd-sw::after{transition:none}}
html[data-motion="reduce"].lq #schema-sheet :is(.umd-t,.umd-a,.umd-m,.umd-x,.umd-bc,.umd-f,.umd-ar-l,.umd-ar-p){animation:none!important}
html[data-motion="reduce"].lq #schema-sheet :is(.umd-c,.umd-pli svg){transition:none!important}
html[data-motion="reduce"].lq #schema-sheet .umd-chev,html[data-motion="reduce"].lq #schema-sheet .umd-sw::after{transition:none}
/* La Console (7 h 03 : « au niveau de la console ») : la même pastille jaune, à côté d’« Importer », dès que la base a deux tables ;
   après l’import d’un projet, « Voir le schéma UML » sous la liste de ses tables. */
html.lq #scr-console .console-schema-panel .db-pill.is-uml{flex:1 1 100%;justify-content:flex-start;gap:9px;background:var(--sun);color:#1B1640;box-shadow:0 3px 0 var(--sun-lip);font-weight:800}
html.lq #scr-console .console-schema-panel .db-pill.is-uml .db-uml-go{margin-left:auto;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.55)}
html.lq #scr-console .console-schema-panel .db-pill.is-uml .db-uml-go svg{width:15px;height:15px}
html.lq #scr-console .console-schema-panel .db-pill.is-uml:active{transform:translateY(2px);box-shadow:0 0 0 var(--sun-lip)}
html.lq #scr-console .imp-uml{display:inline-flex;align-items:center;gap:7px;margin:10px 0 0;min-height:40px;padding:0 14px;border:0;border-radius:12px;background:var(--sun);
  box-shadow:0 3px 0 var(--sun-lip);color:#1B1640;font:800 14px/1 var(--display);cursor:pointer;-webkit-tap-highlight-color:transparent}
html.lq #scr-console .imp-uml svg{width:18px;height:18px;flex:none}
html.lq #scr-console .imp-uml:active{transform:translateY(3px);box-shadow:0 0 0 var(--sun-lip)}
/* Entretien : plusieurs paragraphes de réponse, puis les notions évaluées. */
html.lq .ent-focus .eans+.eans{margin-top:10px}
html.lq .ent-focus .ent-notions{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 2px}
html.lq .ent-focus .ent-notions code{padding:4px 9px;border-radius:9px;background:var(--accent-soft);color:var(--accent-ink);font:700 12.5px/1.2 var(--mono)}
/* Réf 1 (21 h 58) : la coche des notes répond au doigt — elle s’enfonce à l’appui, se remplit et se trace sur place, avec un anneau
   qui s’ouvre ; la carte rejoint ensuite sa place et s’éclaire un instant. */
html.lq .ncard .npin-btn{transition:transform .14s var(--press)}
html.lq .ncard .npin-btn:active{transform:scale(.82)}
html.lq .ncard .npin-btn.is-pin::before{content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  box-shadow:0 0 0 2px var(--accent);pointer-events:none;animation:npinRing .55s cubic-bezier(.2,.8,.3,1) both}
@keyframes npinRing{0%{opacity:.9;transform:scale(.8)}100%{opacity:0;transform:scale(1.9)}}
html.lq .ncard.is-moved{animation:ncardFlash 1s ease-out both}
@keyframes ncardFlash{0%,35%{box-shadow:0 0 0 3px var(--accent-soft),0 4px 0 var(--lip)}100%{box-shadow:0 0 0 0 transparent,0 4px 0 var(--lip)}}
@media (prefers-reduced-motion:reduce){html.lq .ncard .npin-btn.is-pin::before,html.lq .ncard.is-moved{animation:none}}
html[data-motion="reduce"].lq :is(.ncard .npin-btn.is-pin::before,.ncard.is-moved){animation:none!important}

/* Réf 3 (21 h 58) : sur la carte, « Ajouter aux notes » remplace « Partager », à côté d’« Essayer » ; plus de bandeau vert. */
html.lq .cd-actions .cd-note-btn{flex:1 1 0;min-width:0;min-height:48px;margin:0;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:15px;
  background:#fff;color:var(--accent-ink);border:2px solid var(--line);box-shadow:0 4px 0 var(--lip);font:700 14.5px/1.15 var(--display);cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq .cd-actions button.cd-note-btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--lip)}
html.lq .cd-actions .cd-note-stk{flex:none;display:block;width:28px;height:28px;margin:-6px -2px -6px 0;rotate:-8deg;transition:rotate .3s var(--pop),transform .25s var(--pop)}
html.lq .cd-actions .cd-note-stk svg{display:block;width:100%;height:100%}
html.lq .cd-actions button.cd-note-btn:active .cd-note-stk{transform:scale(.88);rotate:-14deg}
html.lq .cd-actions .cd-note-btn.is-had{background:var(--accent-soft);border-color:transparent;box-shadow:none;color:var(--accent-ink);cursor:default;-webkit-user-select:none;user-select:none}
html.lq .cd-actions .cd-note-ok{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff}
html.lq .cd-actions .cd-note-ok svg{width:13px;height:13px}
html.lq .cd-actions .cd-try-btn{flex:1 1 0;min-width:0}
/* Réf 3 (22 h 03) : la feuille de saisie suit le clavier en glissant, d’un seul mouvement, au lieu de sauter à chaque étape. */
html.lq .lq-ask.on{transition:top .3s cubic-bezier(.25,.8,.25,1),height .3s cubic-bezier(.25,.8,.25,1)}
@media (prefers-reduced-motion:reduce){html.lq .lq-ask.on{transition:none}}
html[data-motion="reduce"].lq .lq-ask.on{transition:none!important}
/* Réf 1 (22 h 08) : clavier ouvert, la feuille s’arrête au-dessus de la barre d’adresse de Safari ; le voile, lui, doit continuer
   dessous (avant, une bande claire non voilée restait entre la feuille et le clavier). */
html.lq .lq-ask-back{top:-100vh;bottom:-100vh;height:auto}
/* Entretien : la recherche (Elisa, 2 novembre, 23 h 01 : « mettre une recherche, DA site internet »). Un champ blanc bordé de lilas
   comme les pastilles, la loupe violette ; au toucher, l’anneau violet des autres champs. La croix est une petite pastille lilas.
   Les mots trouvés sont surlignés du jaune de « À retenir ». */
html.lq #app #scr-entretien .ent-search{margin-top:16px}
html.lq #app #scr-entretien .ent-search input{
  min-height:52px;padding:12px 52px 12px 46px;border:2px solid var(--line);border-radius:18px;background:#fff;
  color:var(--ink);font:600 16px/1.25 var(--display);letter-spacing:-.01em;box-shadow:0 3px 0 var(--lip);
  transition:border-color .15s,box-shadow .15s;
}
html.lq #app #scr-entretien .ent-search input::placeholder{color:var(--ink-3);font-weight:600}
html.lq #app #scr-entretien .ent-search input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft),0 3px 0 var(--lip)}
html.lq #app #scr-entretien .ent-search-ico{left:15px;color:var(--accent)}
html.lq #app #scr-entretien .ent-search-ico svg{width:21px;height:21px}
html.lq #app #scr-entretien .ent-search-clear{
  right:9px;width:34px;height:34px;border-radius:999px;background:#E9E5F8;color:var(--accent-ink);
  transition:transform .12s var(--press),background .15s;
}
html.lq #app #scr-entretien .ent-search-clear::before{content:'';position:absolute;inset:-5px}
html.lq #app #scr-entretien .ent-search-clear svg{width:14px;height:14px}
html.lq #app #scr-entretien .ent-search-clear:active{transform:translateY(-50%) scale(.9);background:#DCD5F2}
html.lq #app #scr-entretien .ent-search-clear:focus-visible{outline:3px solid rgba(106,77,244,.35);outline-offset:2px}
html.lq #app #scr-entretien .ent-hit{background:#FFE49A;color:var(--ink);border-radius:5px;padding:0 2px;margin:0 -1px}
html.lq #app #scr-entretien .ent-empty-search .ent-empty-ico{background:var(--accent-soft);color:var(--accent)}
html.lq #app #scr-entretien .ent-empty-search span:not(.ent-empty-ico){display:block;max-width:300px;margin:0 auto}
/* Salle d’attente : « Copier le code » (Elisa, 2 novembre, 23 h 52), sous les pastilles avec le code juste au-dessus (23 h 55).
   Micro-interaction au copiage (23 h 55) : le bouton s’enfonce puis rebondit, passe au menthe, sa coche se dessine et lâche des
   confettis ; les tuiles du code sautent l’une après l’autre en passant au menthe, puis reviennent. */
html.lq #jeu-root .jeu-lobby-body .jeu-etat-code{margin:18px 0 14px}
html.lq #jeu-root .jeu-copy{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;overflow:visible}
html.lq #jeu-root .jeu-copy svg{width:20px;height:20px;flex:none}
html.lq #jeu-root .jeu-copy.is-done{background:#E3F8EC!important;border-color:#9FE0BC!important;color:#1E7A4A!important;box-shadow:0 3px 0 #9FE0BC!important;animation:jeuCopyPress .42s cubic-bezier(.3,.7,.4,1.5) both}
html.lq #jeu-root .jeu-copy.is-done svg path{stroke-dasharray:24;stroke-dashoffset:24;animation:jeuCopyCheck .34s ease-out .12s forwards}
html.lq #jeu-root .jeu-copy.is-done span{animation:jeuCopyLabel .3s ease-out both}
html.lq .jeu-etat-code.is-settled b{animation:none}
html.lq .jeu-etat-code.is-copied b{animation:jeuCodeHop .5s cubic-bezier(.3,.7,.4,1.5) both;animation-delay:calc(var(--i,0)*55ms);
  background:#E3F8EC;border-color:#9FE0BC;color:#1E7A4A;box-shadow:0 3px 0 #9FE0BC;transition:background .2s,border-color .2s,color .2s,box-shadow .2s;transition-delay:calc(var(--i,0)*55ms)}
html.lq .jeu-etat-code b{transition:background .35s,border-color .35s,color .35s,box-shadow .35s}
html.lq #jeu-root .jeu-copied.is-ok{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0!important}
@keyframes jeuCodeHop{0%{transform:none}35%{transform:translateY(-9px) rotate(-4deg)}65%{transform:translateY(1px) rotate(1deg)}100%{transform:none}}
@keyframes jeuCopyPress{0%{transform:translateY(3px) scale(.97)}55%{transform:translateY(-1px) scale(1.02)}100%{transform:none}}
@keyframes jeuCopyCheck{to{stroke-dashoffset:0}}
@keyframes jeuCopyLabel{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html.lq .jeu-etat-code.is-copied b,html.lq #jeu-root .jeu-copy.is-done,html.lq #jeu-root .jeu-copy.is-done span{animation:none}html.lq #jeu-root .jeu-copy.is-done svg path{animation:none;stroke-dashoffset:0}}
html[data-motion="reduce"].lq .jeu-etat-code.is-copied b{animation:none!important}
/* Le crayon en haut à droite d’une leçon ou d’une salle (Elisa, 3 novembre, 0 h 04 : « améliore le bouton à droite en haut, dans la
   DA du site ») : la même pastille que le retour en face — rond blanc bordé de lilas avec sa lèvre, et dedans le rond violet plein à sa
   propre lèvre, le crayon blanc. À l’appui, tout s’enfonce de 3 px. */
html.lq body.in-lesson .fab{
  width:40px!important;height:40px!important;padding:3px!important;margin-top:2px;border-radius:50%!important;
  background:#fff!important;border:2px solid var(--line)!important;box-shadow:0 3px 0 var(--lip)!important;color:#fff!important;
  transition:transform .12s var(--press),box-shadow .12s var(--press)!important;
}
html.lq body.in-lesson .fab .fab-pen{box-sizing:content-box;width:16px!important;height:16px!important;padding:7px;border-radius:50%;
  background:var(--accent);color:#fff;stroke-width:2.2;box-shadow:0 2px 0 var(--accent-lip);transition:box-shadow .12s var(--press)}
html.lq body.in-lesson .fab .fab-pen-b{fill-opacity:.28}
html.lq body.in-lesson .fab:active{transform:translateY(3px)!important;box-shadow:0 0 0 var(--lip)!important}
html.lq body.in-lesson .fab:active .fab-pen{box-shadow:0 0 0 var(--accent-lip)}
html.lq body.in-lesson .fab:focus-visible{outline:3px solid rgba(106,77,244,.35);outline-offset:2px}
html.lq #jeu-root .jeu-copy.is-done svg{width:26px;height:26px}
/* Entretien : pas de ligatures dans le code (-> et ->> devenaient des flèches, 3 novembre). */
html.lq .ent-focus,html.lq .ent-focus *{font-variant-ligatures:none!important;font-feature-settings:"liga" 0,"calt" 0!important}
/* Salle de défi, fin de manche (Elisa, 3 novembre, 7 h 22) : « Classement de la salle », en attendant que l’hôte passe à la suite. */
html.lq .jeu-room-wait{margin-top:14px}
html.lq .jeu-rw-h{display:flex;align-items:center;gap:10px}
html.lq .jeu-rw-ico{flex:none;width:32px;height:32px;margin:-4px 0;rotate:-8deg}
html.lq .jeu-rw-ico svg{display:block;width:100%;height:100%}
html.lq .jeu-rw-h b{flex:1;min-width:0;font:700 16px/1.2 var(--display);color:var(--ink)}
html.lq .jeu-rw-h small{flex:none;color:var(--ink-3);font:600 13px/1.2 var(--ui)}
html.lq .jeu-rw-p{margin:8px 0 12px;color:var(--ink-2);font:500 14px/1.45 var(--ui)}
html.lq .jeu-rw-load{display:flex;align-items:center;gap:10px;margin:0;padding:12px 14px;border-radius:14px;background:#F6F4FD;box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--ink);font:600 14px/1.3 var(--ui)}
html.lq .jeu-spin{flex:none;width:16px;height:16px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--accent);animation:jeuSpin .9s linear infinite}
@keyframes jeuSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){html.lq .jeu-spin{animation-duration:2.4s}}
/* Fin de manche sans réponse validée (Elisa, 3 novembre, 7 h 25) : la croix, ce qui s’est passé, 0 point et « Non validée ». */
html.lq .jeu-miss-h{display:flex;align-items:center;gap:10px}
html.lq .jeu-miss-ico{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#FFE4E1;color:#C2410C;box-shadow:0 2px 0 #FFC9C0}
html.lq .jeu-miss-ico svg{width:20px;height:20px}
html.lq .jeu-miss-h b{font:700 18px/1.2 var(--display);color:var(--ink)}
html.lq .jeu-miss-p{margin:8px 0 14px;color:var(--ink-2);font:500 14.5px/1.45 var(--ui)}
html.lq .jeu-miss-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
html.lq .jeu-miss-tiles div{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px;border:2px solid var(--line);border-radius:18px;background:#F8F6FF;box-shadow:0 3px 0 var(--lip)}
html.lq .jeu-miss-tiles b{font:800 22px/1.1 var(--display);color:var(--ink)}
html.lq .jeu-miss-tiles div+div b{font-size:17px;line-height:1.3;color:#C2410C}
html.lq .jeu-miss-tiles small{color:var(--ink-3);font:600 12.5px/1.2 var(--ui)}
html.lq .jeu-miss{animation:lqRevealIn .42s cubic-bezier(.2,.9,.3,1.1) both}
@media (prefers-reduced-motion:reduce){html.lq .jeu-miss{animation:none}}
/* Bilan de la partie seule (Elisa, 3 novembre, 7 h 31 : « sur la même page, les couleurs de la DA du site ») : une carte violette
   comme les cartes héros de l’accueil, les chiffres en jaune, les libellés en menthe. */
html.lq #app .jeu-bilan{position:relative;isolation:isolate;overflow:hidden;gap:0;margin:16px 0 16px;padding:18px 8px;border-radius:24px;background:var(--deep);box-shadow:0 5px 0 #3A22B0}
html.lq #app .jeu-bilan::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:22px 22px}
html.lq #app .jeu-bilan div{border:0!important;border-radius:0!important;box-shadow:none!important;background:none!important;padding:2px 6px!important;display:flex;flex-direction:column;align-items:center;gap:4px}
html.lq #app .jeu-bilan div+div{border-left:1.5px solid rgba(255,255,255,.18)!important}
html.lq #app .jeu-bilan b{color:var(--sun-hi)!important;font:800 26px/1.05 var(--display)!important;letter-spacing:-.01em}
html.lq #app .jeu-bilan small{color:var(--mint)!important;font:700 12px/1.2 var(--ui)!important;text-transform:none;opacity:1}
/* « Manche par manche » : la question en entier, sur plusieurs lignes s’il le faut (Elisa, 3 novembre, 7 h 35). */
html.lq #app .jeu-recap .jeu-rank li{align-items:flex-start}
html.lq #app .jeu-recap .jeu-rank li b{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.3}
html.lq #app .jeu-recap .jeu-rank li :is(.jeu-rk,em,small){margin-top:1px}
html.lq #app .jeu-recap .jeu-rank li.is-miss :is(em,small){color:var(--ink-3)!important}
/* Schéma : seulement la croix en haut à droite, comme les autres feuilles, et plus de flèche de retour (Elisa, 3 novembre, 21 h 03,
   qui remplace le retour de 7 h 39). Sans autocollant, le titre « Schéma · base Aéroport » tient sur une ligne. */
html.lq #schema-sheet .viz-cap-stk{display:none}
html.lq #schema-sheet .viz-body{padding-bottom:calc(18px + var(--safe-bottom))}
/* 7 h 42 : le bilan seul, revu. Un point par manche sous « trouvés », le record en autocollant, et chaque manche en carte : la coche
   verte ou la croix, « Manche 2 », la question en entier, ce qui s’est passé, les points ; une manche manquée se retente. */
html.lq #app .jeu-bilan .jeu-record{grid-column:1/-1;justify-self:center;display:inline-flex;align-items:center;gap:6px;margin:-4px 0 12px;padding:5px 12px 5px 6px;border-radius:99px;
  background:var(--sun);color:#1B1640;font:800 13px/1 var(--display);box-shadow:0 3px 0 var(--sun-lip);animation:jeuRecord .6s var(--pop,ease) .5s both}
html.lq #app .jeu-bilan .jeu-record svg{width:24px;height:24px;margin:-6px 0;rotate:-8deg}
@keyframes jeuRecord{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:none}}
html.lq #app .jeu-bilan .jeu-dots{display:flex;justify-content:center;gap:5px;margin-top:6px}
html.lq #app .jeu-bilan .jeu-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.28)}
html.lq #app .jeu-bilan .jeu-dots i.ok{background:var(--mint);box-shadow:0 0 0 2px rgba(159,240,198,.25)}
html.lq #app .jeu-rounds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
html.lq #app .jeu-rounds .jr{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:12px;padding:13px 14px;border:2px solid var(--line);border-radius:18px;background:#fff;
  box-shadow:0 3px 0 var(--lip);animation:lqRevealIn .4s cubic-bezier(.2,.9,.3,1.1) both;animation-delay:calc(.15s + var(--i,0) * .07s)}
html.lq #app .jeu-rounds .jr.is-miss{background:#FBFAFF;border-style:dashed}
html.lq #app .jr-ico{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;margin-top:2px}
html.lq #app .jr-ico svg{width:17px;height:17px}
html.lq #app .jr.is-ok .jr-ico{background:var(--mint);color:#0D5B3B;box-shadow:0 2px 0 #6FD6A4}
html.lq #app .jr.is-miss .jr-ico{background:#EEEBF8;color:var(--ink-3);box-shadow:0 2px 0 var(--line)}
html.lq #app .jr-t{min-width:0;display:flex;flex-direction:column;gap:3px}
html.lq #app .jr-n{color:var(--ink-3);font:700 11.5px/1.2 var(--display);letter-spacing:.02em}
html.lq #app .jr-t>b{color:var(--ink);font:700 15.5px/1.3 var(--display);overflow-wrap:anywhere}
html.lq #app .jr-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:2px;font:600 12.5px/1.3 var(--ui)}
html.lq #app .jr-meta i{font-style:normal}
html.lq #app .jr-time{color:#0F7A4C}
html.lq #app .jr-why{color:var(--ink-3)}
html.lq #app .jr-meta .jeu-pd{margin:0!important}
html.lq #app .jr-retry{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:7px 10px 7px 12px;border:0;border-radius:99px;
  background:var(--accent-soft);color:var(--accent-ink);font:700 13px/1 var(--display);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s var(--press)}
html.lq #app .jr-retry svg{width:14px;height:14px}
html.lq #app .jr-retry:active{transform:scale(.96)}
html.lq #app .jr-pts{display:flex;align-items:baseline;gap:2px;margin-top:4px;color:#0F7A4C;font:800 17px/1 var(--display);white-space:nowrap}
html.lq #app .jr-pts small{font:700 11px/1 var(--ui);color:inherit;opacity:.75}
html.lq #app .jr.is-miss .jr-pts{color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){html.lq #app .jeu-rounds .jr,html.lq #app .jeu-bilan .jeu-record{animation:none}}
/* Les points gagnés se posent sous la barre du haut, sans cacher le retour (7 h 42). */
#jeu-pts-pop{top:calc(var(--safe-top,0px) + 70px)}
/* Salle de défi : « Rejoindre » rejoint « En solo » et « Entre amis » (Elisa, 3 novembre, 7 h 49). Trois choix sur une ligne ; le code
   de la salle en grand, lettres espacées, dans la DA des champs de l’appli. */
html.lq .room-seg.is-3 .room-opt{flex:1 1 0;min-width:0;gap:5px;padding-left:6px!important;padding-right:6px!important;font-size:14.5px!important;white-space:nowrap}
html.lq .room-seg.is-3 .room-opt svg{width:17px;height:17px;flex:none}
html.lq .room-join{display:flex;flex-direction:column;gap:8px}
html.lq .room-join[hidden],html.lq .room-card [data-create][hidden]{display:none!important}
html.lq .room-join .jeu-lab{margin:0!important}
html.lq .room-join .jeu-input.is-code{height:58px;padding:0 16px;border:2px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 3px 0 var(--lip);
  font:800 24px/1 var(--mono);letter-spacing:.32em;text-align:center;color:var(--ink);transition:border-color .15s,box-shadow .15s}
html.lq .room-join .jeu-input.is-code::placeholder{color:#C9C2E6;letter-spacing:.32em}
html.lq .room-join .jeu-input.is-code:focus{outline:none;border-color:var(--accent);box-shadow:0 3px 0 var(--accent-lip),0 0 0 4px rgba(106,77,244,.14)}
html.lq .room-join .jeu-input.is-shake{animation:roomShake .38s cubic-bezier(.36,.07,.19,.97)}
@keyframes roomShake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
html.lq .room-hint{color:var(--ink-3);font:500 13px/1.4 var(--ui)}
html.lq .room-invite{margin:0;padding:10px 12px;border-radius:14px;background:var(--accent-soft);color:var(--accent-ink);font:600 14px/1.4 var(--ui)}
html.lq .room-invite .jeu-code-inline{font-family:var(--mono);letter-spacing:.12em}
@media (prefers-reduced-motion:reduce){html.lq .room-join .jeu-input.is-shake{animation:none}}
/* Bulle de l’onglet Planning : le nombre d’activités du jour (3 novembre, 7 h 54), violette, pâle à 0. */
html.lq #app>.tabbar #badge-planning:not([hidden]){display:flex!important;align-items:center;justify-content:center;position:absolute;z-index:2;top:1px;left:calc(50% + 5px);right:auto;
  min-width:19px;height:19px;padding:0 5px;box-sizing:border-box;border-radius:99px;background:var(--accent);color:#fff;font:800 11px/1 var(--display);
  box-shadow:0 0 0 2.5px #fff;font-variant-numeric:tabular-nums}
html.lq #app>.tabbar #badge-planning.is-zero{background:#E9E5FA;color:var(--ink-3)}
html.lq #app>.tabbar #badge-planning.is-bump{animation:tabBump .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes tabBump{0%{transform:scale(.6)}60%{transform:scale(1.18)}100%{transform:none}}
html.lq #app>.tabbar .tab.has-late:not(.active)::after{content:none}
/* Console : SELECT d’une table, sur place (3 novembre, 7 h 58). Les lignes s’ouvrent sous les boutons, dans une carte ; « Ouvrir dans
   l’éditeur » pour retravailler la requête. */
html.lq #scr-console .db-tpreview{margin:10px 0 12px;padding:10px;border:2px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 3px 0 var(--lip)}
html.lq #scr-console .db-tpreview.is-in{animation:lqRevealIn .32s cubic-bezier(.2,.9,.3,1.1) both}
html.lq #scr-console .db-tpreview .result-meta{margin:0 2px 8px!important}
html.lq #scr-console .db-tpreview .table-scroll{max-height:320px;overflow:auto;border-radius:12px}
html.lq #scr-console .db-tpreview-more{margin:8px 4px 0;color:var(--ink-3);font:600 12.5px/1.3 var(--ui)}
html.lq #scr-console .db-tpreview-open{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:42px;margin-top:10px;border:0;border-radius:12px;
  background:var(--accent-soft);color:var(--accent-ink);font:700 14px/1 var(--display);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s var(--press)}
html.lq #scr-console .db-tpreview-open svg{width:16px;height:16px}
html.lq #scr-console .db-tpreview-open:active{transform:scale(.98)}
@media (prefers-reduced-motion:reduce){html.lq #scr-console .db-tpreview.is-in{animation:none}}
html.lq #scr-console .console-schema-panel .db-tdetail .tb.db-tsel.on::before{content:none}
html.lq #scr-console .console-schema-panel .db-tdetail .tb.db-tsel.on{background:#fff;border-color:var(--line);box-shadow:0 2px 0 var(--lip)}
/* L’avis sur la leçon, dans le bilan (Elisa, 4 novembre, 12 h 35 : « à chaque fin de leçon, mettre une partie “Donne ton avis sur la
   leçon” avec des étoiles animées ») : la fiche blanche du bilan, son étiquette jaune, cinq étoiles. Elles arrivent une à une, ondulent
   tant qu’on n’a rien dit, se remplissent de jaune l’une après l’autre au toucher ; l’étoile touchée lance ses étincelles (avisEclats). */
html.lq #scr-lesson .bravo-avis{position:relative;margin:28px 0 6px;padding:26px 14px 18px;border:2px solid var(--line);border-radius:24px;background:#fff;
  box-shadow:0 4px 0 var(--lip);text-align:center;animation:bravoFadeUp .42s var(--spring-ios) .32s both}
html.lq #scr-lesson .bravo-avis .av-lab{position:absolute;top:-17px;left:14px;z-index:2;display:flex;pointer-events:none}
html.lq #scr-lesson .bravo-avis .av-h{margin:4px 0 4px;color:var(--ink);font:800 21px/1.15 var(--display);letter-spacing:-.01em;text-wrap:balance}
html.lq #scr-lesson .bravo-avis .av-sub{margin:0 auto 12px;max-width:30ch;color:var(--ink-2);font:500 14.5px/1.4 var(--ui);text-wrap:balance}
html.lq #scr-lesson .bravo-avis .av-stars{display:flex;justify-content:center;gap:4px}
html.lq #scr-lesson .bravo-avis .av-star{position:relative;display:grid;place-items:center;width:54px;height:54px;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.lq #scr-lesson .bravo-avis .av-star input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
html.lq #scr-lesson .bravo-avis .av-star svg{display:block;width:46px;height:46px;overflow:visible;transition:transform .14s var(--press)}
html.lq #scr-lesson .bravo-avis .av-star path{fill:#F1EDFC;stroke:#D6CCF7;stroke-width:1.5;stroke-linejoin:round;transition:fill .22s ease,stroke .22s ease}
html.lq #scr-lesson .bravo-avis .av-star.on path{fill:var(--sun);stroke:var(--sun-lip)}
html.lq #scr-lesson .bravo-avis .av-star:active svg{transform:scale(.86)}
html.lq #scr-lesson .bravo-avis .av-star:has(input:focus-visible) svg{outline:3px solid var(--accent);outline-offset:2px;border-radius:12px}
html.lq #scr-lesson .bravo-avis .av-mot{min-height:23px;margin:10px 0 0;color:var(--accent-ink);font:800 17px/1.35 var(--display)}
html.lq #scr-lesson .bravo-avis .av-mot.is-hint{color:var(--ink-3);font:600 13px/1.75 var(--ui)}
html.lq #scr-lesson .bravo-avis .av-spark{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;pointer-events:none;opacity:0;
  animation:avSpark .65s cubic-bezier(.2,.7,.3,1) forwards}
html.lq #scr-lesson .bravo-avis .av-star{animation:avStarIn .5s var(--pop) calc(.42s + var(--i) * .07s) backwards}
html.lq #scr-lesson .bravo-avis:not(.is-rated) .av-star svg{animation:avWave 3.4s ease-in-out calc(1.5s + var(--i) * .13s) infinite}
html.lq #scr-lesson .bravo-avis .av-star.pop svg{animation:avPop .55s var(--pop) calc((var(--i) - 1) * .07s) both}
html.lq #scr-lesson .bravo-avis .av-mot.in{animation:avMotIn .4s var(--pop) both}
@keyframes avStarIn{0%{opacity:0;transform:scale(.3) rotate(-30deg)}70%{opacity:1;transform:scale(1.14) rotate(6deg)}100%{transform:none}}
@keyframes avWave{0%,78%,100%{transform:none}86%{transform:translateY(-6px) scale(1.12) rotate(-7deg)}93%{transform:translateY(0) scale(.97)}}
@keyframes avPop{0%{transform:scale(.55) rotate(-18deg)}55%{transform:scale(1.3) rotate(8deg)}100%{transform:none}}
@keyframes avMotIn{0%{opacity:0;transform:translateY(6px) scale(.9)}100%{opacity:1;transform:none}}
@keyframes avSpark{0%{opacity:1;transform:rotate(var(--a)) translateY(0) scale(.4)}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(1)}}
/* Le commentaire (13 h 48 : « veux-tu laisser un commentaire, en mode lien qu’on clique si jamais ») : un lien sous la note ; touché,
   le champ s’ouvre, avec son compteur et « Envoyer ». Laissé, il se relit entre guillemets, et « Modifier mon commentaire » le rouvre. */
html.lq #scr-lesson .bravo-avis .av-com{margin:8px 0 0}
html.lq #scr-lesson .bravo-avis .av-com.is-cache{display:none}
html.lq #scr-lesson .bravo-avis .av-com-lien{margin:0;padding:6px 8px;border:0;background:none;color:var(--accent-ink);font:700 14.5px/1.35 var(--ui);cursor:pointer;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:rgba(106,77,244,.35);-webkit-tap-highlight-color:transparent}
html.lq #scr-lesson .bravo-avis .av-com-lien:active{opacity:.7}
html.lq #scr-lesson .bravo-avis .av-com.is-ouvert>.av-com-lien{display:none}
html.lq #scr-lesson .bravo-avis .av-com-lu{margin:2px 10px 0;color:var(--ink-2);font:italic 500 14.5px/1.45 var(--ui);overflow-wrap:anywhere}
html.lq #scr-lesson .bravo-avis .av-com.is-ouvert .av-com-lu{display:none}
html.lq #scr-lesson .bravo-avis .av-com-champ{margin:6px 0 0;text-align:left}
html.lq #scr-lesson .bravo-avis .av-com-zone{display:block}
html.lq #scr-lesson .bravo-avis .av-com-zone textarea{display:block;width:100%;min-height:92px;box-sizing:border-box;margin:0;padding:12px 14px;border:2px solid var(--line);border-radius:16px;
  background:#F8F6FF;color:var(--ink);font:500 16px/1.45 var(--ui);resize:vertical;-webkit-appearance:none;appearance:none}
html.lq #scr-lesson .bravo-avis .av-com-zone textarea:focus{outline:none;border-color:var(--accent);background:#fff}
html.lq #scr-lesson .bravo-avis .av-com-pied{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 0}
html.lq #scr-lesson .bravo-avis .av-com-n{color:var(--ink-3);font:600 12.5px/1 var(--ui)}
html.lq #scr-lesson .bravo-avis .av-com-go{min-height:44px;margin:0;padding:0 20px;border:0;border-radius:14px;background:var(--accent);color:#fff;font:800 15.5px/1 var(--display);
  box-shadow:0 4px 0 var(--accent-lip);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq #scr-lesson .bravo-avis .av-com-go:active{transform:translateY(4px);box-shadow:0 0 0 var(--accent-lip)}
html.lq #scr-lesson .bravo-avis .av-com-merci{display:inline-block;margin:2px 0 4px;padding:7px 12px;border-radius:12px;background:#E9FBF2;color:#0F7A4A;font:700 14px/1.3 var(--ui)}
html.lq #scr-lesson .bravo-avis .av-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html.lq #scr-lesson .bravo-avis .av-com.is-ouvert .av-com-champ{animation:avMotIn .35s var(--pop) both}
html.lq #scr-lesson .bravo-avis .av-com-merci{animation:avMotIn .4s var(--pop) both}
@media (prefers-reduced-motion:reduce){html.lq #scr-lesson .bravo-avis :is(.av-star,.av-star svg,.av-mot,.av-spark,.av-com-champ,.av-com-merci),html.lq #scr-lesson .bravo-avis{animation:none!important}}
html[data-motion="reduce"].lq #scr-lesson .bravo-avis :is(.av-star,.av-star svg,.av-mot,.av-spark,.av-com-champ,.av-com-merci),html[data-motion="reduce"].lq #scr-lesson .bravo-avis{animation:none!important}
/* Le pays (Elisa, 4 novembre, 13 h 18 : « mettre le drapeau au niveau du rond compte ») : le drapeau en pastille au coin du rond de
   l’onglet Compte et de Mon compte, en autocollant dans la ligne « Pays » des réglages ; la liste des pays en feuille (paysFeuille),
   dans l’onboarding comme dans Mon compte. */
html.lq #app>.tabbar .tab-avatar .av-drapeau{position:absolute;right:-8px;bottom:-6px;display:grid;place-items:center;min-width:16px;height:13px;padding:0 1px;
  border-radius:4px;background:#fff;box-shadow:0 0 0 1.5px #fff,0 1px 3px rgba(27,22,64,.32);font:normal 400 11px/1 system-ui,-apple-system,sans-serif;font-style:normal}
html.lq .acct-avatar .acct-drapeau{position:absolute;right:-7px;top:-5px;display:grid;place-items:center;width:30px;height:23px;border-radius:7px;background:#fff;
  box-shadow:0 0 0 2px #fff,0 2px 5px rgba(20,10,60,.3);font:normal 400 19px/1 system-ui,-apple-system,sans-serif}
html.lq #scr-compte .plus-row-icon.is-drapeau{width:46px!important;height:46px!important;background:none!important;border-radius:0!important;box-shadow:none!important;rotate:-6deg;
  font:normal 400 31px/1 system-ui,-apple-system,sans-serif;
  text-shadow:1.7px 0 #fff,-1.7px 0 #fff,0 1.7px #fff,0 -1.7px #fff,1.2px 1.2px #fff,-1.2px -1.2px #fff,1.2px -1.2px #fff,-1.2px 1.2px #fff,0 2.5px 3px rgba(27,22,64,.3)}
.pays-feuille{position:fixed;inset:0;z-index:2700;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.pays-feuille .pays-fond{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:rgba(27,22,64,.45);opacity:0;transition:opacity .24s ease;
  pointer-events:auto;cursor:default;-webkit-tap-highlight-color:transparent}
.pays-feuille .pays-boite{position:relative;display:flex;flex-direction:column;width:min(560px,100%);height:min(82vh,760px);box-sizing:border-box;
  padding:16px 16px calc(14px + var(--safe-bottom,0px));border-radius:28px 28px 0 0;background:#fff;color:#221C46;box-shadow:0 -12px 40px rgba(27,22,64,.25);
  transform:translateY(105%);transition:transform .3s cubic-bezier(.2,.9,.3,1);pointer-events:auto}
.pays-feuille.on .pays-fond{opacity:1}
.pays-feuille.on .pays-boite{transform:none}
.pays-feuille .pays-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 4px 12px}
.pays-feuille .pays-tete h2{margin:0;font:800 21px/1.2 'Bricolage Grotesque','Inter',-apple-system,system-ui,sans-serif;letter-spacing:-.01em}
.pays-feuille .pays-x{flex:none;width:38px;height:38px;border:2px solid #E6E1F6;border-radius:50%;background:#fff;color:#4E4872;font:700 15px/1 system-ui,sans-serif;
  cursor:pointer;box-shadow:0 3px 0 #DCD5F2;-webkit-tap-highlight-color:transparent}
.pays-feuille .pays-x:active{transform:translateY(3px);box-shadow:0 0 0 #DCD5F2}
.pays-feuille .pays-cherche{display:flex;align-items:center;gap:10px;height:48px;margin:0 0 6px;padding:0 14px;border:2px solid #E6E1F6;border-radius:16px;background:#F8F6FF}
.pays-feuille .pays-cherche:focus-within{border-color:#6A4DF4;background:#fff}
.pays-feuille .pays-cherche svg{flex:none;width:20px;height:20px;fill:none;stroke:#6A6490;stroke-width:2.2;stroke-linecap:round}
.pays-feuille .pays-cherche input{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;background:none;color:#221C46;font:600 16px/1.2 'Inter',-apple-system,system-ui,sans-serif;
  outline:none;-webkit-appearance:none;appearance:none}
.pays-feuille .pays-liste{flex:1;min-height:0;margin:0 -4px;padding:0 4px 6px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.pays-feuille .pays-titre{margin:12px 6px 6px;color:#6A6490;font:800 12px/1.2 'Inter',-apple-system,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.pays-feuille .pays-ul{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.pays-feuille .pays-ligne{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;margin:0;padding:8px 10px;border:0;border-radius:14px;background:none;color:#221C46;
  font:700 16px/1.25 'Inter',-apple-system,system-ui,sans-serif;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pays-feuille .pays-ligne:active{background:#F1EDFC}
.pays-feuille .pays-ligne.is-on{background:#FFF8E1;box-shadow:inset 0 0 0 2px #FFC83D}
.pays-feuille .pays-ligne:focus-visible{outline:3px solid #6A4DF4;outline-offset:1px}
.pays-feuille .pays-drapeau{flex:none;width:32px;font:normal 400 26px/1 system-ui,-apple-system,sans-serif;text-align:center}
.pays-feuille .pays-nom{flex:1;min-width:0}
.pays-feuille .pays-ok{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#FFC83D;color:#1B1640;font:800 13px/1 system-ui,sans-serif;font-style:normal}
.pays-feuille .pays-rien{margin:24px 8px;color:#6A6490;font:600 15px/1.4 'Inter',-apple-system,system-ui,sans-serif;text-align:center}
.pays-feuille [hidden]{display:none!important}
@media (hover:hover){.pays-feuille .pays-ligne:hover{background:#F6F3FF}.pays-feuille .pays-ligne.is-on:hover{background:#FFF8E1}}
@media (prefers-reduced-motion:reduce){.pays-feuille .pays-boite,.pays-feuille .pays-fond{transition:none}}
html[data-motion="reduce"] .pays-feuille .pays-boite,html[data-motion="reduce"] .pays-feuille .pays-fond{transition:none}

/* ---------- Le bouton de la carte du cours, sur deux lignes (Elisa, 5 novembre, 20 h 44) ----------
   Le grand % du module qui était ici (20 h 32 – 21 h 09) a laissé la place à la carte « La leçon d’abord » (6 novembre, section A,
   plus bas). Ce qu’on avait écrit le 5 novembre :
   La carte « Ton objectif », qui le donnait sous la série, est supprimée (20 h 34). 20 h 44 : « la partie de gauche sur la leçon (les
   détails) fusionnée dans le bouton, pour laisser la place au % ». À gauche de la mascotte, comme l’était la leçon : « Ton module »
   en menthe (20 h 53 : « le % du module »), la part faite en grand chiffre jaune, sa barre, puis les leçons validées. Le bouton porte la leçon sur deux lignes :
   « Reprendre ma leçon », puis « Leçon 11 sur 12 · ORDER BY » (sur deux lignes au plus). La barre et les leçons validées s’arrêtent
   avant l’étiquette du niveau, collée sur la mascotte, qui dépasse à sa gauche (plus large sur les petits écrans). */
/* 21 h 09 : « j’aime pas que ça tienne en deux lignes » : la séance reste à droite du bonjour, sur la même ligne ; faute de place, elle
   perd « Ta session · » (lqSesAjuste). Plus de « Ton module » en menthe (le module est nommé juste au-dessus). */
html.lq .lq-hero.has-hi .lq-hero-hi.is-court .lq-ses-suf{display:none}
html.lq .lq-hero .lq-hero-cta-lecon{min-height:64px;padding-top:9px!important;padding-bottom:9px!important}
html.lq .lq-hero .lq-hero-cta-lecon .lq-cta-t{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;max-width:calc(100% - 40px);text-align:left}
html.lq .lq-hero .lq-hero-cta-lecon .lq-cta-t b{font:800 18px/1.1 var(--display)}
html.lq .lq-hero .lq-hero-cta-lecon .lq-cta-t small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-width:100%;overflow:hidden;font:700 13px/1.2 var(--ui);color:rgba(27,22,64,.7)}
@media (max-width:360px){
  html.lq .lq-hero .lq-hero-cta-lecon .lq-cta-t b{font-size:17px}
  html.lq .lq-hero .lq-hero-cta-lecon .lq-cta-t small{font-size:12px}
}


/* ---------- Les défis en trois onglets (Elisa, 4 novembre, 18 h 55 – 19 h 10) ----------
   Jouer (la carte du joueur, la partie rapide, les salles ouvertes), Classement (5 joueurs par page qu’on fait glisser) et Amis ;
   un drapeau au coin de chaque avatar des défis. */
html.lq .jeu-av{position:relative}
html.lq .jeu-av .jeu-flag{position:absolute;right:-6px;bottom:-5px;z-index:1;font-style:normal;font-size:clamp(12px,.86em,17px);line-height:1.12;padding:0 1px;border-radius:5px;background:#fff;box-shadow:0 0 0 1.5px #fff;rotate:none;pointer-events:none}
html.lq .jeu-me .jeu-av .jeu-flag{top:-6px;right:-8px;bottom:auto}
html.lq #scr-defis .dx-tabs{margin:2px 0 14px}
html.lq #scr-defis .dx-tabs .room-opt{flex:1 1 0;min-width:0;justify-content:center}
html.lq #scr-defis .defis-panel[hidden]{display:none!important}
html.lq #scr-defis .dx-me{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 14px;padding:12px 14px;border:2px solid var(--card-border);border-radius:18px;background:#fff;box-shadow:0 3px 0 var(--lip);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
html.lq #scr-defis .dx-me:active{transform:translateY(2px);box-shadow:0 1px 0 var(--lip)}
html.lq #scr-defis .dx-me>.jeu-av{width:42px;height:42px;font-size:18px}
html.lq #scr-defis .dx-me-t,html.lq #scr-defis .dx-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
html.lq #scr-defis .dx-me-t>b,html.lq #scr-defis .dx-t>b{overflow:hidden;color:var(--ink);font:800 15.5px/1.2 var(--ui);text-overflow:ellipsis;white-space:nowrap}
html.lq #scr-defis .dx-me-t small,html.lq #scr-defis .dx-t small{color:var(--ink-2);font:600 12.5px/1.3 var(--ui)}
html.lq #scr-defis .dx-t small i{color:var(--accent-ink);font-style:normal;font-weight:800}
html.lq #scr-defis .dx-me-go{flex:none;display:inline-flex;align-items:center;gap:1px;padding:9px 7px 9px 13px;border-radius:999px;background:var(--accent-soft);box-shadow:inset 0 0 0 2px #DDD3FF;color:var(--accent-ink);font:800 13.5px/1 var(--ui);white-space:nowrap}
html.lq #scr-defis .dx-rapide{margin-bottom:16px}
html.lq #scr-defis #defis-tabs,html.lq #scr-defis #defis-moi,html.lq #scr-defis #defis-rapide,html.lq #scr-defis #defis-salles,html.lq #scr-defis #defis-classement,html.lq #scr-defis #defis-amis,html.lq #scr-defis .dx-stats-tete{margin-left:14px;margin-right:14px}
html.lq #scr-defis #defis-tabs{margin-top:16px}
html.lq #scr-defis #defis-room{margin:0 14px}
html.lq #scr-defis #defis-room:not(:empty){margin-bottom:16px}
html.lq #scr-defis #defis-stats>#defis-perf{margin-top:0}
html.lq #scr-defis .dx-salles,html.lq #scr-defis .dx-cls,html.lq #scr-defis .dx-amis{margin-bottom:16px}
html.lq #scr-defis .dx-list{display:flex;flex-direction:column;gap:8px;margin:8px 0 0;padding:0;list-style:none}
html.lq #scr-defis .dx-list>li{display:flex;align-items:center;gap:11px;min-height:60px;padding:10px 12px;border:2px solid var(--card-border);border-radius:16px;background:#fff}
html.lq #scr-defis .dx-list>li>.jeu-av{width:40px;height:40px;font-size:17px}
html.lq #scr-defis .dx-list>li.is-me{border-color:var(--accent);background:var(--accent-soft)}
html.lq #scr-defis .dx-list>li.is-tap{cursor:pointer}
html.lq #scr-defis .dx-list>li.is-tap:active{transform:scale(.99)}
html.lq #scr-defis .dx-list.is-wait>li,html.lq #scr-defis .dx-list>li.is-wait{border-style:dashed}
html.lq #scr-defis .dx-list.is-wait .dx-t b,html.lq #scr-defis .dx-list>li.is-wait .dx-t b{width:46%;height:12px;border-radius:6px;background:var(--accent-soft)}
html.lq #scr-defis .dx-list.is-wait .dx-t small,html.lq #scr-defis .dx-list>li.is-wait .dx-t small{width:30%;height:10px;border-radius:5px;background:#F1EEFB}
html.lq #scr-defis .dx-niv{padding:1px 7px;border-radius:999px;font-style:normal;font-weight:800;font-size:11.5px}
html.lq #scr-defis .dx-niv.is-f{background:#E2F6EA;color:#0F7A3A}
html.lq #scr-defis .dx-niv.is-m{background:#FFF3DC;color:#B45309}
html.lq #scr-defis .dx-niv.is-d{background:#FDEBEC;color:#C2323A}
html.lq #scr-defis .dx-plp{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font:800 11.5px/1.4 var(--ui);vertical-align:1px}
html.lq #scr-defis .dx-join{flex:none;min-height:38px;padding:8px 13px;border:0;border-radius:12px;background:var(--accent);box-shadow:0 3px 0 var(--accent-lip);color:#fff;font:800 13.5px/1 var(--ui);cursor:pointer}
html.lq #scr-defis .dx-join:active{transform:translateY(2px);box-shadow:0 1px 0 var(--accent-lip)}
html.lq #scr-defis .dx-join.is-ghost{border:2px solid var(--card-border);background:#fff;box-shadow:0 3px 0 var(--lip);color:var(--accent-ink);padding:6px 11px}
html.lq #scr-defis .dx-vide{margin:6px 2px 0;color:var(--ink-2);font:600 13.5px/1.5 var(--ui)}
html.lq #scr-defis .dx-live{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:#E2F6EA;color:#0F7A3A;font:800 11.5px/1.3 var(--ui);letter-spacing:.04em}
html.lq #scr-defis .dx-live::before{content:'';width:7px;height:7px;border-radius:50%;background:#169447}
html.lq #scr-defis .dx-filters{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 10px}
html.lq #scr-defis .dx-chip{min-height:36px;padding:6px 12px;border:2px solid var(--card-border);border-radius:999px;background:#fff;color:var(--ink);font:800 13px/1.2 var(--ui);cursor:pointer}
html.lq #scr-defis .dx-chip.on{border-color:var(--ink);background:var(--ink);color:#fff}
html.lq #scr-defis .dx-periode{margin:0 0 10px}
html.lq #scr-defis .dx-periode .room-opt{flex:1 1 0;justify-content:center}
html.lq #scr-defis .dx-pages{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -2px;padding:0 2px 4px;outline:none}
html.lq #scr-defis .dx-pages::-webkit-scrollbar{display:none}
html.lq #scr-defis .dx-pages:focus-visible{box-shadow:0 0 0 3px var(--accent-soft);border-radius:16px}
html.lq #scr-defis .dx-page{flex:0 0 calc(100% - 22px);margin:0;scroll-snap-align:start;scroll-snap-stop:always}
html.lq #scr-defis .dx-rk{flex:none;width:28px;color:var(--ink-2);font:800 15px/1 var(--ui);text-align:center}
html.lq #scr-defis .dx-rk svg{display:block;width:28px;height:28px;margin:auto}
html.lq #scr-defis .dx-pts{flex:none;color:var(--ink);font:800 15px/1 var(--ui);white-space:nowrap}
html.lq #scr-defis .dx-pts small{color:var(--ink-2);font-size:11px}
html.lq #scr-defis .dx-list .perf-top-flag{flex:none;margin-left:-6px}
html.lq #scr-defis .dx-nav{display:flex;align-items:center;gap:10px;margin-top:10px}
html.lq #scr-defis .dx-nav small{margin:0 auto;color:var(--ink-2);font:700 12.5px/1.2 var(--ui)}
html.lq #scr-defis .dx-dots{display:flex;gap:6px}
html.lq #scr-defis .dx-dots i{width:8px;height:8px;border-radius:99px;background:#D9D3F3;transition:width .2s ease,background-color .2s ease}
html.lq #scr-defis .dx-dots i.on{width:22px;background:var(--accent)}
html.lq #scr-defis .dx-arrow{flex:none;display:grid;place-items:center;width:38px;height:38px;padding:0;border:2px solid var(--card-border);border-radius:12px;background:#fff;box-shadow:0 3px 0 var(--lip);color:var(--accent-ink);font:800 20px/1 var(--ui);cursor:pointer}
html.lq #scr-defis .dx-arrow[disabled]{color:#C9C2E6;box-shadow:none;cursor:default}
html.lq #scr-defis .dx-h3{margin:16px 2px 6px;color:var(--ink-2);font:800 12px/1.2 var(--ui);letter-spacing:.07em;text-transform:uppercase}
html.lq #scr-defis .dx-cls-note{text-align:center}
html.lq #scr-defis .dx-h2h{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:1px;font:800 12px/1.1 var(--ui);white-space:nowrap}
html.lq #scr-defis .dx-h2h em{color:var(--ink);font-size:15px;font-style:normal}
html.lq #scr-defis .dx-h2h.is-up small{color:#0F7A3A}
html.lq #scr-defis .dx-h2h.is-down small{color:#C2323A}
html.lq #scr-defis .dx-h2h.is-eq small{color:var(--ink-2)}
html.lq #scr-defis .dx-note{margin:12px 2px 0;color:var(--ink-2);font:600 12.5px/1.5 var(--ui);text-align:center}
html.lq #scr-defis .dx-stats-tete{display:flex;align-items:center;gap:12px;margin:0 14px 12px}
html.lq #scr-defis .dx-stats-h{margin:0;color:var(--ink);font:800 20px/1.2 var(--display)}
html.lq #scr-defis .dx-retour{display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:6px 12px;border:2px solid var(--card-border);border-radius:999px;background:#fff;box-shadow:0 3px 0 var(--lip);color:var(--accent-ink);font:800 13.5px/1 var(--ui);cursor:pointer}
html.lq #scr-defis .dx-retour span{font-size:18px;line-height:.8}
html[data-motion="reduce"].lq #scr-defis .dx-dots i{transition:none}

/* ---------- Le tirage au sort prend tout l’écran (Elisa, 4 novembre, 21 h 27, réf. 2 : « un bug de 2 s, écran plat à ce moment ») ----------
   Le tirage dure 3,3 s (le serveur fixe le départ de la manche) : 3, 2, 1, puis le défi tiré. Il tenait dans une carte en haut d’un
   écran vide, ce qui ressemblait à une page qui ne charge pas. La carte violette remplit maintenant l’écran, son contenu au centre,
   avec des cartes plus grandes. */
html.lq #scr-lesson .jeu-draw{justify-content:center;min-height:max(420px,calc(100svh - var(--safe-top,0px) - var(--safe-bottom,0px) - 104px))!important}
html.lq #scr-lesson .jeu-draw h1{font-size:clamp(34px,10vw,42px)!important}
html.lq #scr-lesson .jeu-draw .jeu-deck{scale:1.22;margin:52px auto 40px}
html.lq #scr-lesson .jeu-draw.is-reveal .jeu-deck{margin:0}
html.lq #scr-lesson .jeu-draw .jeu-draw-note{margin-top:18px}
/* Le paquet et le défi tiré dans la même pile (Elisa, 8 novembre, 10 h 10 : « l’écran avec les cartes saute parfois ») : au tirage,
   le paquet s’efface sur place et le défi apparaît à sa place, au lieu de replier le paquet et d’ajouter le défi dessous ; la scène
   garde sa hauteur, le titre ne bouge plus. */
html.lq .jeu-pile{display:grid;place-items:center;width:100%}
html.lq .jeu-pile>*{grid-area:1/1}
html.lq .jeu-pile>.jeu-drawn{margin:0;max-width:100%}
html.lq #scr-lesson .jeu-draw.is-reveal .jeu-pile>.jeu-deck{height:170px;margin:52px auto 40px;opacity:0;scale:1.05;overflow:visible;transition:opacity .25s ease,scale .3s ease}
@media (prefers-reduced-motion:reduce){html.lq #scr-lesson .jeu-draw.is-reveal .jeu-pile>.jeu-deck{transition:none}}
html.lq[data-motion="reduce"] #scr-lesson .jeu-draw.is-reveal .jeu-pile>.jeu-deck{transition:none}
/* ---------- La consigne des défis, point par point, dans la DA de la vitrine (Elisa, 4 novembre, 20 h 33, 20 h 52 et 21 h) ----------
   20 h 33 : la consigne seule doit tout dire, et dire qu’on a le schéma. 20 h 52 : « la DA du site internet n’est pas trop
   présente ». Chaque point est un bloc teinté, titre en Bricolage et pastilles à rebord, comme les cartes de la vitrine : Affiche
   (lilas, colonnes numérotées en violet), Garde (menthe, coches), Trie (soleil, clés numérotées dans l’ordre), Ordre libre (lilas
   pâle), À savoir (note pointillée). 21 h : sans autocollants ; « anime le Tu as accès au schéma » : le souligné jaune de la
   vitrine se dessine sous « schéma », puis, jusqu’à ce qu’on ouvre le schéma (.sch-attn), l’anneau pulse, l’icône se balance, la
   flèche pousse et la pastille jaune brille. En mouvement réduit : tout est là, sans mouvement. */
html.lq .consigne.dq .dq-sec{margin:12px 0 0;padding:12px 14px 14px;border-radius:18px}
html.lq .consigne.dq>.defi-ctx+.dq-sec{margin-top:14px}
/* « À toi de jouer ! » sous la situation, dans un cadre gris clair (8 novembre, 19 h 57 : « mets le À toi de jouer dans un cadre
   légèrement gris ») : l’appel se détache du récit, sans crier. 20 h 22 : « je le veux plus clair » : un gris à peine posé, son
   filet plus fin. */
html.lq .consigne.dq .dq-atoi{margin:12px 0 0;padding:11px 14px 12px;border-radius:14px;background:#FAF9FC;box-shadow:inset 0 0 0 1px #EEECF3;
  color:var(--ink-2);font:500 15px/1.5 var(--ui)}
html.lq .consigne.dq .dq-atoi b{color:var(--ink);font-weight:800}
/* « schéma », dans la phrase, comme un bouton (20 h 29) : la pastille lilas à rebord, son icône ; touchée, elle s’enfonce */
html.lq .consigne.dq .dq-lien{display:inline-flex;align-items:center;gap:4px;margin:0 1px;padding:1px 8px 2px 6px;border:0;border-radius:9px;vertical-align:baseline;
  background:var(--accent-soft);color:var(--accent-ink);font:800 15px/1.3 var(--ui);box-shadow:0 2px 0 var(--lip);cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .12s var(--press),box-shadow .12s var(--press)}
/* Le doigt n’a pas à viser les 22 px de la puce : la zone de tap déborde (≈ 44 px de haut), sans bouger le texte */
html.lq .consigne.dq .dq-lien{position:relative}
html.lq .consigne.dq .dq-lien::after{content:"";position:absolute;inset:-11px -6px}
html.lq .consigne.dq .dq-lien>svg{flex:none;width:15px;height:15px}
html.lq .consigne.dq .dq-lien:active{transform:translateY(2px);box-shadow:0 0 0 var(--lip)}
html.lq .consigne.dq .dq-lien:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
html.lq .consigne.dq>.dq-atoi+.dq-sec{margin-top:14px}
html.lq .consigne.dq .dq-sec.is-cols{background:var(--accent-soft)}
/* 9 novembre, 8 h 50 (Elisa) : « Change de couleur pour le vert Garde, sinon ça fait trop » : le vert ne dit plus que la bonne réponse
   (« Bravo, défi résolu ! », le chrono arrêté) ; « Garde » passe au bleu ciel de la marque (le dégradé de la série), sa coche aussi. */
html.lq .consigne.dq .dq-sec.is-garde{background:#E8F3FF}
html.lq .consigne.dq .dq-sec.is-tri{background:#FFF4D4}
html.lq .consigne.dq .dq-sec.is-libre{background:var(--surface-2)}
html.lq .consigne.dq .dq-sec.is-info{padding:10px 12px 12px;border:2px dashed var(--lip);background:#fff}
html.lq .consigne.dq .dq-h{display:flex;align-items:center;gap:9px;margin:0 0 10px}
html.lq .consigne.dq .dq-h b{flex:1;min-width:0;color:var(--ink);font:800 17px/1.15 var(--display);letter-spacing:-.012em}
html.lq .consigne.dq .dq-chip{flex:none;padding:4px 10px;border-radius:99px;font:800 12px/1.25 var(--display);white-space:nowrap}
html.lq .consigne.dq .is-cols .dq-chip{background:var(--accent);color:#fff;box-shadow:0 2px 0 var(--accent-lip);rotate:2deg}
/* En salle, la base en pastille (8 novembre, 18 h 28), posée à cheval sur le bord du cadre, en haut à droite (18 h 36 : « entre
   l’intérieur et l’extérieur du cadre, genre posée en haut à droite ») : moitié dehors, moitié dedans ; le cadre laisse la place
   au-dessus pour sa moitié du dehors. 20 h 07 : « la pill violette est de mauvaise qualité » : penchée et décalée d’un demi-pixel
   (translate -50 % d’une hauteur impaire), Safari la dessinait floue, les bords en escalier. Droite, sa hauteur paire (26 px), posée
   au pixel près sur le milieu du bord (2 px) : nette, comme les autres pastilles (5 novembre, 10 h 10 : même cause, même remède). */
html.lq .consigne.dq.has-base{position:relative;margin-top:30px}
/* 21 h 51 (« mettre le titre dans le cadre blanc avant la situation, de la manière la plus UI UX possible ») : la question en tête du
   cadre, en Bricolage, à l’encre, ses lignes équilibrées ; un filet la sépare de « La situation » ; 21 h 58 : en pointillé, celui de
   « À savoir ». Sous la pastille de la base, un peu plus d’air. */
html.lq .consigne.dq>.dq-titre{margin:0 0 14px;padding:0 0 14px;border-bottom:2px dashed var(--lip);color:var(--ink);
  font:800 23px/1.16 var(--display);letter-spacing:-.022em;text-wrap:balance}
html.lq .consigne.dq.has-base>.dq-titre{margin-top:6px}
@media (max-width:360px){html.lq .consigne.dq>.dq-titre{font-size:21px}}
html.lq[data-reading="large"] .consigne.dq>.dq-titre{font-size:26px}
html.lq .consigne.dq .dq-chip.is-base{position:absolute;top:-14px;right:16px;z-index:1;box-sizing:border-box;height:26px;max-width:calc(100% - 32px);overflow:hidden;
  padding:0 12px;background:var(--accent);color:#fff;font:800 12px/26px var(--display);box-shadow:0 3px 0 var(--accent-lip);text-overflow:ellipsis}
html.lq .consigne.dq .is-tri .dq-chip{background:var(--sun);color:var(--ink);box-shadow:0 2px 0 var(--sun-lip);rotate:2deg}
html.lq .consigne.dq .dq-l{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;counter-reset:dq}
html.lq .consigne.dq .dq-l li{position:relative;min-height:23px;padding-left:33px;color:var(--ink);font:500 15px/1.45 var(--ui)}
html.lq .consigne.dq .dq-l li::before{position:absolute;left:0;top:0;display:grid;place-items:center;box-sizing:border-box}
html.lq .consigne.dq .dq-l.is-num li{counter-increment:dq}
html.lq .consigne.dq .dq-l.is-num li::before{content:counter(dq);width:23px;height:23px;border-radius:8px;font:800 13px/1 var(--display)}
html.lq .consigne.dq .is-cols .dq-l li::before{background:var(--accent);color:#fff;box-shadow:0 2px 0 var(--accent-lip)}
html.lq .consigne.dq .is-tri .dq-l li::before{background:var(--sun);color:var(--ink);box-shadow:0 2px 0 var(--sun-lip)}
html.lq .consigne.dq .is-garde .dq-l li::before{content:'';top:1px;width:21px;height:21px;border-radius:50%;background:#9CD7FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23134E7C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:0 2px 0 #63B2F0}
html.lq .consigne.dq .is-info .dq-l li::before{content:'';top:.5em;left:7px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
html.lq .consigne.dq .is-info .dq-l li{padding-left:24px}
html.lq .consigne.dq .dq-t{margin:0!important;color:var(--ink)!important;font:500 15px/1.45 var(--ui)!important;letter-spacing:normal!important}
/* 9 novembre, 0 h 31 (Elisa : « supprimer du coup ») : la carte « Tu as accès au schéma », son icône et ses animations
   s’en vont ; le schéma s’ouvre par la pastille « schéma » d’« À toi de jouer ! » et par la barre de l’éditeur. */

/* Mon compte : « Supprimer mon compte » en rouge (Elisa, 4 novembre, 22 h 08). */
html.lq #scr-compte .account-setting-row.is-danger b{color:var(--danger)}

/* ---------- Retours du 5 novembre, 9 h 18 : la salle de défi ---------- */
/* (Les pastilles des essais des autres, en haut de l’écran, sont devenues le commentateur de « En direct », 8 novembre, 12 h 25.) */
/* Celui qui a pris le +25 (le premier à trouver, du premier coup) : la pastille verte saute sur ses points, deux étincelles. */
html.lq .jeu-done-pts{position:relative}
html.lq .jeu-done-b{position:absolute;top:-12px;right:-9px;padding:3px 7px;border-radius:99px;background:#9FF0C6;color:#0D5B3B;font:800 11.5px/1.1 var(--display,inherit);
  font-style:normal;white-space:nowrap;rotate:6deg;box-shadow:0 2px 0 rgba(13,91,59,.25);animation:jeuDoneB .7s var(--pop,ease) .55s backwards}
html.lq .jeu-done-b::before,html.lq .jeu-done-b::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--sun,#FFD86B);opacity:0;
  pointer-events:none;animation:jeuDoneEt .8s ease-out .8s both}
html.lq .jeu-done-b::before{left:-7px;top:-5px}
html.lq .jeu-done-b::after{right:-6px;bottom:-6px;background:#6A4DF4;animation-delay:.9s}
@keyframes jeuDoneB{0%{opacity:0;transform:translateY(10px) scale(.3) rotate(-24deg)}60%{opacity:1;transform:translateY(-3px) scale(1.16) rotate(4deg)}100%{transform:none}}
@keyframes jeuDoneEt{0%{opacity:0;transform:scale(0)}40%{opacity:1;transform:scale(1.35)}100%{opacity:0;transform:scale(.3)}}
/* Réf. 4 : la question respire sous les badges du haut (points et chrono). */
html.lq #scr-lesson .jeu-bar~h1{margin-top:20px!important}
/* « Quitter la salle ? » : le texte était décalé de 19 px vers la gauche (la marge de droite seule laissait la place à la croix).
   Bandeau centré : marges égales ; sans autocollant, le titre est à hauteur de la croix : la même marge des deux côtés. */
html.lq .lq-ask:not(.has-field) .lq-ask-cap{padding-left:24px!important;padding-right:24px!important}
html.lq .lq-ask:not(.has-field) .lq-ask-cap.is-nostk{padding-left:62px!important;padding-right:62px!important}
@media (max-width:360px){
  html.lq .lq-ask:not(.has-field) .lq-ask-cap{padding-left:18px!important;padding-right:18px!important}
  html.lq .lq-ask:not(.has-field) .lq-ask-cap.is-nostk{padding-left:58px!important;padding-right:58px!important}}
@media (prefers-reduced-motion:reduce){
  html.lq .jeu-done-b,html.lq .jeu-done-b::before,html.lq .jeu-done-b::after{animation:none!important}}
html[data-motion="reduce"].lq .jeu-done-b,html[data-motion="reduce"].lq .jeu-done-b::before,html[data-motion="reduce"].lq .jeu-done-b::after{animation:none!important}

/* ---------- Défis : trois boutons sous la partie rapide, et leurs feuilles (Elisa, 5 novembre, 10 h 16) ---------- */
/* Le cadre du haut (11 h 19) : le niveau, « Créer une salle », puis sous « ou » « J’ai un code » et « Seul » : une rangée blanche, deux
   cases séparées d’un trait (11 h 11 : « juste un cadre unique »). Touchée, une case se teinte de lavande et sa feuille monte du bas. */
html.lq #scr-defis .dx-ou{display:flex;align-items:center;gap:12px;margin:14px 2px 0;color:var(--ink-3);font:700 12px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase}
html.lq #scr-defis .dx-ou::before,html.lq #scr-defis .dx-ou::after{content:"";flex:1;height:2px;border-radius:2px;background:var(--line-2)}
html.lq #scr-defis .dx-rapide .jeu-msg:empty{display:none}
/* Un seul cadre (Elisa, 5 novembre, 12 h 52 : « même bouton dans les deux ») : « Rejoins une partie » sous le niveau, son compte en
   direct ; sans salle à ce niveau, la phrase d’Elisa en pointillés, juste au-dessus de « Créer une salle » ; les autres niveaux à la
   fin du cadre, sous un trait. */
html.lq #scr-defis .dx-rejoindre{margin:18px 0 14px}
html.lq #scr-defis .dx-rj-tete{display:flex;align-items:center;gap:10px;margin:0 2px 9px}
html.lq #scr-defis .dx-rj-h{margin:0;font:700 16px/1.2 var(--display);letter-spacing:-.01em;color:var(--ink)}
html.lq #scr-defis .dx-rejoindre .dx-list{margin-top:0}
html.lq #scr-defis .dx-rejoindre .dx-vide{margin:0 2px}
html.lq #scr-defis .dx-rejoindre .dx-vide.is-aucune{margin:0;padding:12px 14px;border:2px dashed #D6CCFA;border-radius:16px;background:#FAF8FF;color:var(--ink);
  font:700 14px/1.45 var(--ui);text-wrap:pretty}
html.lq #scr-defis .dx-autres:empty{display:none}
html.lq #scr-defis .dx-autres{margin-top:16px;border-top:2px dashed var(--line-2)}
html.lq #scr-defis .dx-autres>.dx-h3{margin-top:14px}
html.lq #scr-defis .dx-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px;border:2px solid var(--line);border-radius:18px;background:#fff;
  box-shadow:0 3px 0 var(--lip);overflow:hidden}
html.lq #scr-defis .dx-act{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;min-height:92px;margin:0;padding:12px 4px 11px;box-sizing:border-box;
  border:0;border-radius:0;background:#fff;color:var(--ink);font:inherit;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:background-color .15s}
html.lq #scr-defis .dx-act+.dx-act{box-shadow:inset 2px 0 0 var(--line)}
html.lq #scr-defis .dx-act:active,html.lq #scr-defis .dx-act[aria-expanded="true"]{background:var(--accent-soft)}
html.lq #scr-defis .dx-act:focus-visible{outline:3px solid var(--accent);outline-offset:-4px;border-radius:16px}
html.lq #scr-defis .dx-act-stk{display:block;flex:none;width:34px;height:34px;margin-bottom:2px;rotate:-7deg;transition:rotate .3s var(--pop),transform .25s var(--pop)}
html.lq #scr-defis .dx-act.is-code .dx-act-stk{rotate:6deg}
html.lq #scr-defis .dx-act-stk svg{display:block;width:100%;height:100%}
html.lq #scr-defis .dx-act:active .dx-act-stk{transform:scale(.88);rotate:-12deg}
html.lq #scr-defis .dx-act b{display:block;max-width:100%;color:var(--ink);font:700 14px/1.15 var(--display);letter-spacing:-.01em;text-wrap:balance}
html.lq #scr-defis .dx-act small{display:block;max-width:100%;color:var(--ink-3);font:600 11.5px/1.2 var(--ui);text-wrap:balance}
@media (hover:hover) and (pointer:fine){html.lq #scr-defis .dx-act:hover{background:#FBFAFF}html.lq #scr-defis .dx-act:hover .dx-act-stk{rotate:0deg;transform:translateY(-2px)}}
@media (max-width:350px){html.lq #scr-defis .dx-act{min-height:86px;padding:10px 2px 9px}html.lq #scr-defis .dx-act b{font-size:13px}html.lq #scr-defis .dx-act small{font-size:11px}}
/* La feuille : un voile, puis la carte d’une salle (bandeau violet, réglages sur blanc) qui monte du bas, avec sa croix. Plus haute que
   l’écran (petits téléphones) : elle défile. */
.dx-feuille{position:fixed;inset:0;z-index:2600;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.dx-feuille.on{transition:top .3s cubic-bezier(.25,.8,.25,1),height .3s cubic-bezier(.25,.8,.25,1)}
.dx-feuille .dx-f-fond{position:absolute;top:-100vh;bottom:-100vh;left:0;right:0;width:100%;height:auto;margin:0;padding:0;border:0;background:rgba(34,28,70,.42);opacity:0;
  transition:opacity .24s ease;pointer-events:auto;cursor:default;-webkit-tap-highlight-color:transparent}
html.lq .dx-feuille .dx-f-boite{position:relative;width:calc(100% - 16px);max-width:480px;max-height:calc(100% - var(--safe-top,0px) - 16px);box-sizing:border-box;
  margin:0 0 calc(8px + env(safe-area-inset-bottom,0px));padding:0 18px 18px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  border-radius:30px;background:#fff;text-align:left;pointer-events:auto;outline:none;box-shadow:0 6px 0 var(--lip),0 30px 60px -24px rgba(34,28,70,.5);
  transform:translateY(calc(100% + 40px));transition:transform .36s cubic-bezier(.32,.72,0,1)}
.dx-feuille.on .dx-f-fond{opacity:1}
html.lq .dx-feuille.on .dx-f-boite{transform:none}
.dx-feuille.off .dx-f-fond{opacity:0;transition-duration:.2s}
html.lq .dx-feuille.off .dx-f-boite{transform:translateY(calc(100% + 40px));transition-duration:.24s;transition-timing-function:cubic-bezier(.4,0,1,1)}
/* Le code à taper (Elisa, 8 novembre, 16 h 18, la feuille pleine hauteur, clavier fermé : « Ça fait trop long ») : une carte posée
   en bas, comme les autres feuilles, qui monte avec le clavier d’un seul mouvement : --dx-clavier, la hauteur du clavier (dxFeuilleCaler ;
   dans l’app, celle que l’iPhone annonce quand il commence à monter). Le cadre ne glisse plus : seule la carte monte, et ne dépasse
   jamais le haut de l’écran ; au-dessus du clavier, plus de marge pour la barre d’accueil. Avant : posée en bas, elle sautait
   (14 h 59) ; seule en haut, elle laissait un vide au-dessus du clavier (15 h 27) ; pleine hauteur, trop longue. */
html.lq .dx-feuille[data-k="code"]{transition:none}
html.lq .dx-feuille[data-k="code"] .dx-f-boite{translate:0 calc(-1 * var(--dx-clavier,0px));max-height:calc(100% - var(--dx-clavier,0px) - var(--safe-top,0px) - 16px);
  margin-bottom:calc(8px + max(0px, env(safe-area-inset-bottom,0px) - var(--dx-clavier,0px)));transition:transform .36s cubic-bezier(.32,.72,0,1),translate .3s cubic-bezier(.2,.8,.2,1)}
@media (pointer:coarse){
  /* Dans l’app, la page rétrécit avec le clavier (Keyboard « native ») et passe sous 720 px de haut : le bandeau garde ses mesures
     d’écran bas dès l’ouverture, pour que le champ ne remonte pas de 4 px quand le clavier arrive. */
  html.lq :is(#scr-defis,.dx-feuille)[data-k="code"] .room-head.dx-f-tete{padding-bottom:26px}
  html.lq :is(#scr-defis,.dx-feuille)[data-k="code"] .room-head.dx-f-tete>.room-sub{margin-top:10px}
  /* Le pied ne colle plus en bas : sur un petit écran, clavier ouvert, il venait couvrir le champ ; la feuille défile. Petit écran
     (iPhone SE, mini : mesuré à l’ouverture, avant le clavier) : le bandeau sans sa phrase, pour que le champ, le message et le
     bouton tiennent au-dessus du clavier. */
  html.lq .dx-feuille[data-k="code"] .dx-f-pied{position:static}
  html.lq :is(#scr-defis,.dx-feuille).is-court[data-k="code"] .room-head.dx-f-tete>.room-sub{display:none}
}
html.lq .dx-feuille .room-head{margin:0 -18px 4px;padding:20px 66px 18px 18px}
html.lq .dx-feuille .room-head .room-sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
html.lq .dx-feuille .room-head .room-sub>span:not(.dx-f-niv){flex:1 1 100%}
html.lq .dx-feuille .dx-f-x{top:14px;right:14px}
html.lq .dx-feuille .room-sp.s2{right:74px}
html.lq .dx-feuille .room-field:first-child{margin-top:14px}
/* Le bouton de la feuille reste en bas quand elle défile (petits téléphones), son message juste au-dessus. */
/* bottom:-18px (5 novembre, 12 h 12) : le pied descend dans la marge du bas de la feuille (-18 px) ; avec bottom:0, sticky le remontait de
   18 px et il couvrait le bas des manches de « Joue seul ». */
html.lq .dx-feuille .dx-f-pied{position:sticky;bottom:-18px;z-index:2;margin:6px -18px -18px;padding:12px 18px 18px;background:#fff}
html.lq .dx-feuille .dx-f-pied::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px;background:linear-gradient(rgba(255,255,255,0),#fff);opacity:0;transition:opacity .2s;pointer-events:none}
html.lq .dx-feuille .dx-f-boite.is-defile .dx-f-pied::before{opacity:1}
html.lq .dx-feuille .dx-f-pied .room-go{margin-top:0}
html.lq .dx-feuille .jeu-msg{margin:0 2px 10px}
html.lq .dx-feuille .jeu-msg:empty{display:none}
html.lq .dx-feuille [data-friends] .jeu-note{margin:12px 2px 0!important}
@media (max-height:720px),(max-width:360px){
  html.lq .dx-feuille .room-head{padding:16px 62px 14px 16px;gap:12px}
  html.lq .dx-feuille .room-stk{width:50px;height:50px;padding:6px;border-radius:16px}
  html.lq .dx-feuille .room-head h2{font-size:20px!important}
  html.lq .dx-feuille .room-field:first-child{margin-top:12px}}
/* Le niveau choisi dans la partie rapide, rappelé dans le bandeau : une pastille blanche, ses barres à la couleur du niveau. */
html.lq .dx-f-niv{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 7px;border-radius:999px;background:#fff;color:var(--ink);font:800 12.5px/1.2 var(--display);
  box-shadow:0 2px 0 rgba(27,22,64,.3)}
html.lq .dx-f-niv .jeu-bars{display:inline-flex;align-items:flex-end;gap:2px;height:13px;width:auto;margin:0;padding:0;background:none!important}
html.lq .dx-f-niv .jeu-bars b{width:4px}
html.lq .dx-feuille.on .dx-f-corps>*{animation:lqAskUp .42s ease-out .2s both}
@media (prefers-reduced-motion:reduce){.dx-feuille,.dx-feuille .dx-f-fond,html.lq .dx-feuille .dx-f-boite{transition:none!important}html.lq .dx-feuille.on .dx-f-corps>*,html.lq #scr-defis .dx-act,html.lq #scr-defis .dx-act-stk{animation:none!important;transition:none!important}}
html[data-motion="reduce"] .dx-feuille,html[data-motion="reduce"] .dx-feuille .dx-f-fond,html[data-motion="reduce"].lq .dx-feuille .dx-f-boite{transition:none!important}
html[data-motion="reduce"].lq .dx-feuille.on .dx-f-corps>*,html[data-motion="reduce"].lq #scr-defis .dx-act,html[data-motion="reduce"].lq #scr-defis .dx-act-stk{animation:none!important;transition:none!important}

/* ---------- Défis, 5 novembre, 11 h 37 (Elisa) : « Mes stats » en avant, « Comment sont calculés les points ? » bien visible ---------- */
/* La flèche de « Mes stats » avance d’un pas, revient, puis repart un peu plus tard ; au toucher, la pastille fonce d’un ton. */
html.lq #scr-defis .dx-me-go svg{display:block;flex:none;width:16px;height:16px;animation:dxMeFleche 2.6s ease-in-out infinite}
html.lq #scr-defis .dx-me:active .dx-me-go{background:#E2D9FF}
@keyframes dxMeFleche{0%,50%,100%{transform:translateX(0)}62%{transform:translateX(4px)}74%{transform:translateX(0)}84%{transform:translateX(2.5px)}}
/* La rangée du barème : lavande, son sticker, le titre et ce qui compte, une flèche ; elle ouvre le barème dans Mes stats. */
html.lq #scr-defis .dx-points{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 16px;padding:13px 12px 13px 14px;box-sizing:border-box;border:2px solid #DDD3FF;
  border-radius:18px;background:var(--accent-soft);box-shadow:0 3px 0 #D2C6FA;color:var(--ink);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
html.lq #scr-defis .dx-points:active{transform:translateY(2px);box-shadow:0 1px 0 #D2C6FA}
html.lq #scr-defis .dx-points:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
html.lq #scr-defis .dx-points-stk{display:block;flex:none;width:40px;height:40px;rotate:-7deg}
html.lq #scr-defis .dx-points-stk svg{display:block;width:100%;height:100%}
html.lq #scr-defis .dx-points-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
html.lq #scr-defis .dx-points-t b{color:var(--ink);font:700 15.5px/1.2 var(--display);letter-spacing:-.01em;text-wrap:balance}
html.lq #scr-defis .dx-points-t small{color:var(--ink-2);font:600 12.5px/1.3 var(--ui);text-wrap:pretty}
html.lq #scr-defis .dx-points>svg{flex:none;width:20px;height:20px;color:var(--accent-ink)}
@media (hover:hover) and (pointer:fine){html.lq #scr-defis .dx-points:hover{background:#E8E1FF}}
/* Petit écran (320 px) : la pastille se resserre, pour que « Joue une partie pour entrer au classement » garde trois lignes. */
@media (max-width:350px){html.lq #scr-defis .dx-me{gap:10px;padding:12px}html.lq #scr-defis .dx-me-go{padding:8px 5px 8px 10px;font-size:13px}html.lq #scr-defis .dx-me-go svg{width:14px;height:14px}}
/* L’onglet Joueurs : « Ajouter un joueur » et « Inviter par lien » avaient perdu leur style le 5 novembre à 10 h 16 (le cadre de Jouer
   n’en avait plus besoin, l’onglet si). Les revoici. */
html.lq #scr-defis .dx-duo{display:flex;gap:10px;margin-top:14px}
html.lq #scr-defis .dx-sec{flex:1;min-height:46px;padding:10px 8px;border:2px solid var(--card-border);border-radius:14px;background:#fff;box-shadow:0 3px 0 var(--lip);color:var(--accent-ink);font:800 14px/1.2 var(--ui);cursor:pointer}
html.lq #scr-defis .dx-sec.on{border-color:var(--accent);background:var(--accent-soft)}
html.lq #scr-defis .dx-sec:active{transform:translateY(2px);box-shadow:0 1px 0 var(--lip)}
@media (prefers-reduced-motion:reduce){html.lq #scr-defis .dx-me-go svg{animation:none}}
html[data-motion="reduce"].lq #scr-defis .dx-me-go svg{animation:none}

/* ---------- Mon compte, 5 novembre, 12 h 12 (Elisa) : supprimer ton compte, Contacte-nous, ton rappel d’entraînement ---------- */
/* Supprimer ton compte (réf. 2 et 3) : sous le bandeau, ce qui sera supprimé (sur Requête, sur cet appareil), puis l’encadré rouge
   « irréversible ». La feuille défile si l’écran est petit. */
html.lq .lq-ask-sheet.has-corps{max-height:calc(100% - var(--safe-top,0px) - 16px - env(safe-area-inset-bottom,0px));overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
html.lq .lq-ask-corps{margin:0 2px 18px;text-align:left}
html.lq .lq-ask.on .lq-ask-corps{animation:lqAskUp .42s ease-out .22s both}
@media (prefers-reduced-motion:reduce){html.lq .lq-ask.on .lq-ask-corps{animation:none}}
html[data-motion="reduce"].lq .lq-ask.on .lq-ask-corps{animation:none}
html.lq .lq-del-h{margin:0 0 4px;font:700 15.5px/1.3 var(--display);color:var(--ink)}
html.lq .lq-del{margin:0;padding:0;list-style:none}
html.lq .lq-del li{display:flex;align-items:flex-start;gap:12px;padding:12px 0}
html.lq .lq-del li+li{border-top:2px solid var(--line-2)}
html.lq .lq-del-i{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink)}
html.lq .lq-del-i svg{display:block;width:21px;height:21px}
html.lq .lq-del li>span:last-child{display:flex;flex-direction:column;gap:3px;min-width:0}
html.lq .lq-del b{font:700 15px/1.25 var(--display);color:var(--ink)}
html.lq .lq-del small{font:500 13.5px/1.45 var(--ui);color:var(--ink-2);text-wrap:pretty}
html.lq .lq-del-warn{display:flex;align-items:flex-start;gap:10px;margin:6px 0 0;padding:12px 14px;border-radius:16px;background:#FDEEEE;color:#8E1F25;font:600 13.5px/1.45 var(--ui);text-wrap:pretty}
html.lq .lq-del-wi{flex:none;width:20px;height:20px;margin-top:1px;color:#C2323A}
html.lq .lq-del-wi svg{display:block;width:100%;height:100%}
html.lq .lq-del-warn>span:last-child{flex:1;min-width:0}
html.lq .lq-del-warn b{font-weight:800;color:#7A1A20}
/* Les deux boutons restent au bas de la fenêtre quand elle défile (iPhone SE, Safari et ses barres) ; sur un écran bas, le bandeau
   se resserre. bottom:-20px : le pied descend dans la marge du bas de la fenêtre, sans remonter sur l’encadré. */
html.lq .lq-ask-sheet.has-corps .lq-ask-btns{position:sticky;bottom:-20px;z-index:2;margin:0 -20px -20px;padding:12px 20px 20px;background:#fff}
html.lq .lq-ask-sheet.has-corps .lq-ask-btns::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px;background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none}
@media (max-height:760px){
  html.lq .lq-ask-sheet.has-corps .lq-ask-cap{padding:16px 20px 16px}
  html.lq .lq-ask-sheet.has-corps .lq-ask-stk{width:52px;height:52px;margin-bottom:8px}
  html.lq .lq-ask-sheet.has-corps .lq-ask-cap h2{font-size:21px}
  html.lq .lq-ask-sheet.has-corps .lq-ask-cap p{margin-top:5px;font-size:14px;line-height:1.4}
  html.lq .lq-ask-sheet.has-corps .lq-ask-cap{margin-bottom:14px}
  html.lq .lq-del li{padding:9px 0}html.lq .lq-del-i{width:34px;height:34px}html.lq .lq-del small{font-size:13px}
  html.lq .lq-del-warn{padding:10px 12px;font-size:13px}
  html.lq .lq-ask-corps{margin-bottom:12px}}
/* Contacte-nous (réf. 7) : « Envoyer mon message » reste au bas de la feuille, visible sans faire défiler (le bouton était coupé), le
   message d’erreur juste au-dessus. */
html.lq #scr-compte .ct-body:has(.ct-pied){padding-bottom:0!important}
html.lq #scr-compte .ct-form{padding-bottom:0}
html.lq #scr-compte .ct-pied{position:sticky;bottom:0;z-index:2;margin:14px -18px 0;padding:12px 18px calc(var(--safe-bottom,0px) + 14px);background:#fff;box-shadow:0 -2px 0 var(--line-2)}
html.lq #scr-compte .ct-pied .ct-etat{margin:0 2px 10px}
html.lq #scr-compte .ct-pied .ct-go{margin:0}
/* Ton rappel d’entraînement (réf. 5 et 6) : l’interrupteur, « À quel moment ? » (trois moments en un bloc, puis les heures), la note sur
   l’autorisation, et « Enregistrer mes préférences » au bas de la feuille. */
html.lq #scr-compte .rp-body:has(.rp-pied){padding-bottom:0!important}
html.lq #scr-compte .rp-quand{padding:8px 18px 2px}
html.lq #scr-compte .rp-l{margin:4px 2px 10px;font:700 15px/1.25 var(--display);color:var(--ink)}
html.lq #scr-compte .rp-seg{display:flex;gap:4px;padding:4px;border-radius:16px;background:#F1EEFB}
html.lq #scr-compte .rp-slot{flex:1 1 0;min-width:0;min-height:44px;margin:0;padding:0 6px;border:0;border-radius:12px;background:transparent;color:var(--ink-2);
  font:700 14.5px/1 var(--display);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color .15s,color .15s,box-shadow .15s}
html.lq #scr-compte .rp-slot{white-space:nowrap}
html.lq #scr-compte .rp-slot.on{background:#fff;color:var(--accent-ink);box-shadow:0 2px 0 #DCD5F2,0 1px 6px rgba(34,28,70,.1)}
@media (max-width:360px){html.lq #scr-compte .rp-slot{padding:0 2px;font-size:13.5px}html.lq #scr-compte .rp-heure{font-size:14px}}
html.lq #scr-compte .rp-heures{display:grid;grid-template-columns:repeat(auto-fit,minmax(54px,1fr));gap:8px;margin-top:12px}
html.lq #scr-compte .rp-heure{min-width:0;min-height:46px;margin:0;padding:0 4px;border:2px solid var(--line);border-radius:14px;background:#fff;color:var(--ink-2);
  font:700 15px/1 var(--display);font-variant-numeric:tabular-nums;box-shadow:0 3px 0 var(--lip);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform .12s var(--press),box-shadow .12s var(--press),background-color .15s,color .15s}
html.lq #scr-compte .rp-heure:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
html.lq #scr-compte .rp-heure.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink);box-shadow:0 3px 0 #C9BCFF}
html.lq #scr-compte .rp-note{display:flex;align-items:flex-start;gap:10px;margin:16px 2px 6px;color:var(--ink-2);font:500 13.5px/1.45 var(--ui);text-wrap:pretty}
html.lq #scr-compte .rp-note.is-ko{color:var(--danger)}
html.lq #scr-compte .rp-note-i{flex:none;width:20px;height:20px;margin-top:1px;color:var(--ink-3)}
html.lq #scr-compte .rp-note.is-ko .rp-note-i{color:var(--danger)}
html.lq #scr-compte .rp-note-i svg{display:block;width:100%;height:100%}
html.lq #scr-compte .rp-pied{position:sticky;bottom:0;z-index:2;margin-top:10px;padding:12px 18px calc(var(--safe-bottom,0px) + 14px);background:#fff;box-shadow:0 -2px 0 var(--line-2)}
html.lq #scr-compte .rp-go{display:block;width:100%;margin:0}
@media (prefers-reduced-motion:reduce){html.lq #scr-compte .rp-slot,html.lq #scr-compte .rp-heure{transition:none}}

/* ---------- Retours du 5 novembre, 14 h 24 ----------
   Pratiquer (réf. 3) : « Relever un défi », avec la flèche qui avance des boutons jaunes de l’onboarding. */
html.lq .journey-spotlight .journey-primary .prat-fleche{display:inline-flex;margin-left:8px;vertical-align:-3px}
html.lq .journey-spotlight .journey-primary .prat-fleche svg{width:19px;height:19px}
@keyframes pratFleche{0%,100%{transform:none}50%{transform:translateX(5px)}}
html.lq:not([data-motion="reduce"]) .journey-spotlight .journey-primary .prat-fleche{animation:pratFleche 1.1s ease-in-out .4s infinite}
@media (prefers-reduced-motion:reduce){html.lq .journey-spotlight .journey-primary .prat-fleche{animation:none}}

/* Projets de la Console (14 h 24, « pb de formatage des noms de colonnes ») : un long nom de colonne passe à la ligne après un « _ »,
   comme les noms de tables, au lieu de sortir de la carte. */
html.lq #scr-console .db-col .cn{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}

/* Schéma UML (6 novembre, 7 h 52 : « efface les Voir ») : la ligne « +4 colonnes » d’une table pliée, sans pastille ; touchée, elle
   déplie la table, comme sa flèche. */
html.lq #schema-sheet button.umd-c.is-deplier{width:100%;margin:0;border:0;background:none;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}
html.lq #schema-sheet button.umd-c.is-deplier:active span{color:var(--ink-2)}
html.lq #schema-sheet button.umd-c.is-deplier:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:8px}

/* ---------- Retours du 5 novembre, 15 h 01 ----------
   Réinitialiser une table (réf. 2) : sous le bandeau, l’avertissement sans encadré : le triangle, « Attention, tes modifications seront
   perdues. » en gras, puis la phrase en gris. */
html.lq .lq-del-warn.is-attention{margin:2px 0 0;padding:2px 2px 0;border-radius:0;background:none;color:var(--ink-3);font:500 14.5px/1.45 var(--ui)}
html.lq .lq-del-warn.is-attention .lq-del-wi{width:22px;height:22px;margin-top:2px;color:#9B2C33}
html.lq .lq-del-warn.is-attention b{display:block;margin-bottom:4px;color:var(--ink);font:800 16.5px/1.3 var(--display)}
html.lq .lq-ask-formats{margin:0;color:var(--ink-3);font:500 13.5px/1.45 var(--ui);text-align:center;text-wrap:pretty}

/* « Tables du projet » (réf. 8) : le titre, le nombre de tables, une phrase ; « Ajouter une table » et « Schéma UML » ; puis les tables. */
html.lq #scr-console .console-schema-panel{padding:16px 14px 14px!important;gap:12px!important}
html.lq #scr-console .tbl-entete{display:flex;flex-direction:column;gap:4px;padding:0 4px}
html.lq #scr-console .tbl-entete-l{display:flex;align-items:center;justify-content:space-between;gap:10px}
html.lq #scr-console .tbl-titre{margin:0;color:var(--ink);font:800 20px/1.2 var(--display);letter-spacing:-.01em}
html.lq #scr-console .tbl-compte{flex:none;padding:6px 11px;border-radius:99px;background:var(--accent-soft);color:var(--accent-ink);font:700 12.5px/1 var(--display)}
html.lq #scr-console .tbl-compte[hidden]{display:none}
html.lq #scr-console .tbl-sous{margin:0;color:var(--ink-3);font:500 14px/1.4 var(--ui);text-wrap:pretty}
html.lq #scr-console .console-schema-panel .db-bar{flex-wrap:wrap;gap:8px;overflow:visible}
html.lq #scr-console .console-schema-panel .db-pill.add.is-plus{gap:7px;padding:0 15px}
html.lq #scr-console .console-schema-panel .db-pill.add.is-plus svg{width:17px;height:17px}
html.lq #scr-console .console-schema-panel .db-pill.add.is-plus:active svg{transform:rotate(90deg)}

html.lq #scr-console .console-schema-panel .db-tblock{border-radius:18px}

/* Dépliée (réf. 5) : la description, « Voir les données » et deux ronds */
html.lq #scr-console .tbl-corps{display:flex;flex-direction:column;gap:14px;padding:0 12px 14px;animation:dbColIn .3s cubic-bezier(.2,.8,.3,1.2) both}
html.lq #scr-console .tbl-desc{display:flex;flex-direction:column;gap:11px;margin:0;padding:12px;border:0;border-radius:16px;background:#F6F4FC}
html.lq #scr-console .tbl-desc-vide{display:flex;align-items:center;gap:9px;margin:0;color:var(--ink-3);font:500 14.5px/1.35 var(--ui)}
html.lq #scr-console .tbl-desc-i{flex:none;display:grid;place-items:center;width:20px;height:20px;color:var(--ink-3)}
html.lq #scr-console .tbl-desc-i svg{width:20px;height:20px}
html.lq #scr-console .tbl-decrire{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;margin:0;padding:0 16px;border:2px solid var(--line);border-radius:99px;
  background:#fff;color:var(--accent-ink);font:700 14.5px/1 var(--display);box-shadow:0 3px 0 var(--lip);cursor:pointer;transition:transform .12s var(--press,ease),box-shadow .12s var(--press,ease)}
html.lq #scr-console .tbl-decrire svg{width:16px;height:16px}
html.lq #scr-console .tbl-decrire:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
html.lq #scr-console .tbl-desc.is-on{flex-direction:row;align-items:flex-start;gap:10px;width:100%;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
html.lq #scr-console .tbl-desc.is-on .tbl-desc-i{margin-top:1px}
html.lq #scr-console .tbl-desc-t{flex:1;min-width:0;font:500 14.5px/1.45 var(--ui);overflow-wrap:anywhere}
html.lq #scr-console .tbl-desc-t small{display:block;margin-bottom:2px;color:var(--ink-3);font:700 12px/1.2 var(--display);letter-spacing:.02em}
html.lq #scr-console .tbl-desc-e{flex:none;display:grid;place-items:center;width:18px;height:18px;margin-top:1px;color:var(--ink-3)}
html.lq #scr-console .tbl-desc-e svg{width:18px;height:18px}
html.lq #scr-console .tbl-desc.is-on:active{transform:scale(.985)}
html.lq #scr-console .tbl-acts{display:flex;align-items:center;gap:10px}
html.lq #scr-console .tbl-voir{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;margin:0;padding:0 12px;border:0;border-radius:99px;
  background:var(--ink);color:#fff;font:750 15.5px/1 var(--display);box-shadow:0 4px 0 #0E0A26;cursor:pointer;transition:transform .12s var(--press,ease),box-shadow .12s var(--press,ease)}
html.lq #scr-console .tbl-voir svg{flex:none;width:21px;height:21px}
html.lq #scr-console .tbl-voir span{white-space:nowrap}
html.lq #scr-console .tbl-voir:active{transform:translateY(4px);box-shadow:0 0 0 #0E0A26}
html.lq #scr-console .tbl-rond{position:relative;flex:none;display:grid;place-items:center;width:50px;height:50px;margin:0;padding:0;border:2px solid var(--line);border-radius:50%;
  background:#fff;color:var(--ink-2);box-shadow:0 3px 0 var(--lip);cursor:pointer;transition:transform .12s var(--press,ease),box-shadow .12s var(--press,ease)}
html.lq #scr-console .tbl-rond svg{width:21px;height:21px}
html.lq #scr-console .tbl-rond span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.lq #scr-console .tbl-rond:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
html.lq #scr-console .tbl-rond.is-danger{border-color:#F4CDD0;color:var(--danger);box-shadow:0 3px 0 #F0C1C5}
html.lq #scr-console .tbl-rond.is-danger:active{box-shadow:0 0 0 #F0C1C5}
html.lq #scr-console .tbl-rond:disabled{opacity:.45;cursor:default;box-shadow:none;transform:none}
html.lq #scr-console .tbl-rond.ok{border-color:#A8E6C4;background:#EFFBF4;color:#13804F}
html.lq #scr-console .tbl-orig{display:flex;align-items:flex-start;gap:6px;margin:0;padding:0 4px;color:var(--ink-3);font:500 13px/1.45 var(--ui);text-wrap:pretty}
html.lq #scr-console .tbl-orig svg{flex:none;width:15px;height:15px;margin-top:2px}
html.lq #scr-console .tbl-orig span{min-width:0;overflow-wrap:anywhere}
html.lq #scr-console .tbl-orig code{font:600 12px/1 var(--mono);color:var(--ink-2)}
html.lq #scr-console .db-tblock:is(.is-more,.is-new,.is-changed) .tbu-k{animation:dbBump .55s cubic-bezier(.3,.7,.3,1.6) .15s}
/* Une carte étroite (jusqu’aux écrans de 390 px) : « Voir les données » sur toute la ligne, puis « Réinitialiser » et « Supprimer » en deux pastilles nommées */
@container (max-width:336px){
  html.lq #scr-console .tbl-acts{flex-wrap:wrap}
  html.lq #scr-console .tbl-voir{flex:1 1 100%}
  html.lq #scr-console .tbl-rond{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:7px;width:auto;height:46px;border-radius:99px;font:700 14px/1 var(--display)}
  html.lq #scr-console .tbl-rond svg{width:18px;height:18px}
  html.lq #scr-console .tbl-rond span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
}

/* Les exemples dans un cadre (réf. 6) : « Requêtes prêtes à tester », ce qu’on en fait, puis les cartes qui défilent dans le cadre */
html.lq #scr-console .chips-wrap.ex-cadre{margin:0 0 18px!important;padding:16px 0 12px;border:2px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 4px 0 var(--lip)}
html.lq #scr-console .ex-tete{padding:0 18px 12px}
html.lq #scr-console .ex-titre{margin:0 0 4px;color:var(--ink);font:800 20px/1.2 var(--display);letter-spacing:-.01em}
html.lq #scr-console .ex-sous{margin:0;color:var(--ink-3);font:500 14px/1.45 var(--ui);text-wrap:pretty}
html.lq #scr-console .ex-cadre .chips{margin:0!important;padding:2px 16px 6px!important;scroll-padding-left:16px;scroll-padding-right:16px}

/* « Vérifier les données » (réf. 9) : les colonnes et leurs types, ou les tables du fichier, puis « Créer la table » */
html.lq .imp-sheet{max-height:calc(100dvh - 12px);overflow-y:auto;overscroll-behavior:contain}
html.lq .imp-prev.is-riche{max-height:min(44vh,360px);padding:12px 12px 4px;background:#F7F6FC;border:1.5px solid var(--line);border-radius:16px;font:500 14px/1.35 var(--ui);color:var(--ink)}
html.lq .imp-prev .iv-t{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin:0 2px 9px}
html.lq .imp-prev .iv-t b{font:800 15.5px/1.25 var(--display);color:var(--ink)}
html.lq .imp-prev .iv-t small{flex:none;color:var(--ink-3);font:500 12.5px/1.2 var(--ui)}
html.lq .imp-prev :is(.iv-cols,.iv-tabs){display:flex;flex-direction:column;margin:0 0 8px;padding:0;list-style:none;border:1.5px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
html.lq .imp-prev .iv-col{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;padding:9px 12px}
html.lq .imp-prev :is(.iv-col,.iv-tab)+:is(.iv-col,.iv-tab){border-top:1px solid #EFECF8}
html.lq .imp-prev .iv-col:nth-child(odd){background:#FAF9FD}
html.lq .imp-prev .iv-cn{flex:1 1 auto;min-width:0;font:600 14.5px/1.3 var(--ui);color:var(--ink);overflow-wrap:anywhere}
html.lq .imp-prev .iv-ct{flex:none;padding:3px 8px;border-radius:99px;background:#ECEAF5;color:var(--ink-2);font:700 11px/1.1 var(--ui);letter-spacing:.05em;text-transform:uppercase}
html.lq .imp-prev .iv-ex{flex:1 1 100%;min-width:0;color:var(--ink-3);font:500 12.5px/1.35 var(--ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.lq .imp-prev .iv-tab{display:flex;align-items:flex-start;gap:10px;padding:10px 12px}
html.lq .imp-prev .iv-ico{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink)}
html.lq .imp-prev .iv-ico svg{width:18px;height:18px}
html.lq .imp-prev .iv-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
html.lq .imp-prev .iv-tx b{font:750 14.5px/1.3 var(--display);color:var(--ink);overflow-wrap:anywhere}
html.lq .imp-prev .iv-tx small{color:var(--ink-3);font:500 12.5px/1.35 var(--ui)}
html.lq .imp-prev .iv-tx .iv-tc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.lq .imp-prev .iv-deja{align-self:flex-start;margin-top:3px;padding:3px 8px;border-radius:8px;background:#FFF1E0;color:#9A4A12;font:700 11.5px/1.2 var(--ui);font-style:normal}
html.lq .imp-ou{margin:-4px 2px 14px;color:var(--ink-3);font:500 13px/1.45 var(--ui)}
html.lq .imp-ou[hidden]{display:none}
@media (prefers-reduced-motion:reduce){html.lq #scr-console .tbl-corps,html.lq #scr-console .db-tblock .tbu-k{animation:none!important}html.lq #scr-console .tbu-pli svg{transition:none}}
html[data-motion="reduce"].lq #scr-console .tbl-corps,html[data-motion="reduce"].lq #scr-console .db-tblock .tbu-k{animation:none!important}html[data-motion="reduce"].lq #scr-console .tbu-pli svg{transition:none}

/* ---------- Retours du 5 novembre, 16 h 56 (le fichier d’entretiens d’Elisa, importé dans la Console) ----------
   Un long texte dans le résultat : trois lignes au plus, sur une colonne de 17 em, le reste déplié d’un toucher ; le titre de la
   feuille Schéma passe à la ligne au lieu de sortir de l’écran (un nom de projet sans espace). */
html.lq #console-out .table-wrap tbody td.is-long{white-space:normal;text-align:left;vertical-align:top;cursor:pointer}
html.lq #console-out .table-wrap tbody td.is-long>span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;width:max-content;min-width:11em;max-width:17em;overflow-wrap:anywhere;text-wrap:pretty}
html.lq #console-out .table-wrap tbody td.is-long.is-open>span{display:block;-webkit-line-clamp:unset}
html.lq #schema-sheet .viz-head b,html.lq #schema-sheet .viz-head h2{min-width:0;overflow-wrap:anywhere}

/* ---------- Retours du 5 novembre, 17 h 09 ----------
   L’accueil, les activités à rattraper (réf. 3) : plus de pastille rouge ni d’étiquette jaune, « informer sans donner l’impression
   d’accumuler des obligations » ; les séances en gris, puis ce que la carte permet. */
html.lq #home-hero .journey-planning.is-calme{align-items:center}
html.lq #home-hero .journey-planning.is-calme .jp-copy small.jp-meta{align-self:auto;padding:0;border-radius:0;background:none;box-shadow:none;color:var(--ink-3)!important;font:600 13.5px/1.35 var(--ui)!important}
html.lq #home-hero .journey-planning.is-calme .jp-copy small.jp-desc{margin-top:3px;padding:0;background:none;box-shadow:none;color:var(--ink-2)!important;font:500 13.5px/1.4 var(--ui)!important;text-wrap:pretty}
/* La série : « Garde le rythme ! » et sa phrase en haut, les sept flammes de la semaine dessous, sur toute la largeur. */
html.lq .lq-streak{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"f c" "w w";align-items:center;gap:10px 11px;padding:12px 14px}
html.lq .lq-streak-flame{grid-area:f}
html.lq .lq-streak-copy{grid-area:c;flex:initial;gap:4px}
html.lq .lq-streak-copy b{font-size:17px;line-height:1.15;white-space:normal}
html.lq .lq-streak-copy small{font:500 13px/1.35 var(--ui);color:var(--ink-2);white-space:normal;text-wrap:pretty}
html.lq .lq-week{grid-area:w;justify-content:space-between;padding-top:10px;border-top:1.5px dashed var(--line)}
html.lq .lq-day{flex:0 1 30px}
html.lq .lq-day i{width:30px}
html.lq .lq-day i svg{width:16px;height:16px}

/* ---------- Retours du 5 novembre, 17 h 35 ----------
   L’épingle (« le fond de l’épingle est trop sombre ») : épinglée, son fond restait transparent, car la teinte --sun-soft n’était
   définie nulle part : le gris lavande de la page sous un anneau jaune et une lèvre kaki. Une crème lumineuse, un bord et une lèvre
   plus clairs ; la pastille des points de Mes stats, dessinée avec la même teinte, la retrouve aussi. */
html.lq{--sun-soft:#FFF8E4}
html.lq #scr-console .console-run-row .console-pin-current.is-icon.on{background:var(--sun-soft)!important;border-color:#FBE6A8!important;box-shadow:0 4px 0 #F6E1A2!important}
/* « Voir les données » (« ça saute ») : la carte ouverte ne rejoue son apparition que quand on l’ouvre, plus à chaque fois qu’elle est
   redessinée. */
html.lq #scr-console .tbl-corps{animation:none}
html.lq #scr-console .tbl-corps.is-ouvre{animation:dbColIn .3s cubic-bezier(.2,.8,.3,1.2) both}
/* ---------- Retours du 5 novembre, 21 h 19 ----------
   Mon compte › Mon engagement (« permettre à l’utilisateur de retrouver son engagement dans Mon compte, sous Parcours et rythme ») :
   le certificat de l’onboarding dans un panneau violet (la DA de la vitrine, comme la carte du pseudo), et le bouton à l’empreinte pour
   le prendre s’il ne l’a pas été (les mêmes mesures que onboarding-vitrine.css, 19 h 41). Déjà pris à l’ouverture (is-deja) : la coche
   est là, sans rejouer son rebond. */
html.lq #plus-pacte .pc-pacte{--v-ink:#1B1640;--v-ink-2:#4E4872;--v-ink-3:#6A6490;--v-accent-soft:#EEE9FF;--v-accent-ink:#5335E0;--v-shadow-lip:rgba(27,22,64,.3);
  --v-mint:#9FF0C6;--v-sun:#FFC83D;--v-sun-hi:#FFD86B;--v-sun-lip:#E0A100;--v-display:var(--display);--v-ui:var(--ui);
  --v-press:cubic-bezier(.3,.7,.4,1);--v-pop:cubic-bezier(.34,1.56,.64,1);
  position:relative;isolation:isolate;margin:24px 18px 16px;padding:30px 18px 12px;border-radius:24px;color:#fff;
  background:radial-gradient(140px 110px at 100% 0%,rgba(255,255,255,.2),transparent 70%),radial-gradient(170px 120px at 0% 120%,rgba(159,240,198,.2),transparent 70%),
    linear-gradient(170deg,#6E50F6 0%,#5538E6 48%,#4529CC 100%);
  box-shadow:0 5px 0 #3A22B0,0 18px 30px -18px rgba(52,34,150,.65)}
html.lq #plus-pacte .pc-nw{white-space:nowrap}
html.lq #plus-pacte>summary>small{text-wrap:balance}
html.lq #plus-pacte .pc-pacte::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px) 0 0/22px 22px;
  -webkit-mask:linear-gradient(115deg,transparent 35%,#000 100%);mask:linear-gradient(115deg,transparent 35%,#000 100%)}
html.lq #plus-pacte .ob-pact-card{position:relative;padding:20px 18px 14px;border-radius:22px;background:#fff;color:var(--v-ink);
  box-shadow:inset 0 0 0 3px var(--v-accent-soft),inset 0 0 0 5px #fff,inset 0 0 0 7px #D9CFFF,0 5px 0 var(--v-shadow-lip)}
html.lq #plus-pacte .ob-pact-k{margin:0 0 10px;color:var(--v-accent-ink);font:800 11.5px/1.2 var(--v-ui);letter-spacing:.1em;text-transform:uppercase;text-align:center}
html.lq #plus-pacte .ob-pact-txt{margin:0;color:var(--v-ink-2);font:600 15px/1.5 var(--v-ui);text-align:center;text-wrap:pretty}
html.lq #plus-pacte .ob-pact-txt b{color:var(--v-ink);font-weight:800}
html.lq #plus-pacte .ob-pact-txt+.ob-pact-txt{margin-top:8px}
html.lq #plus-pacte .ob-pact-date{margin:12px 0 0;color:var(--v-ink-3);font:600 12px/1 var(--v-ui);text-align:center}
html.lq #plus-pacte .ob-pact-stamp{position:absolute;right:14px;top:-14px;padding:6px 12px;border-radius:12px;background:var(--v-mint);color:var(--v-ink);font:800 13px/1 var(--v-display);
  box-shadow:0 3px 0 rgba(27,22,64,.25);rotate:8deg;opacity:0;transform:scale(1.6);pointer-events:none;transition:opacity .2s,transform .35s var(--v-pop)}
html.lq #plus-pacte .ob-pact-card.is-signed .ob-pact-stamp{opacity:1;transform:none}
html.lq #plus-pacte .ob-hold-zone{display:flex;flex-direction:column;align-items:center;gap:16px;margin:20px 0 4px}
html.lq #plus-pacte .ob-hold-hint{display:flex;align-items:center;justify-content:center;min-height:2.7em;margin:0;max-width:300px;color:rgba(255,255,255,.86);font:650 14.5px/1.35 var(--v-ui);text-align:center;text-wrap:balance}
html.lq #plus-pacte .ob-hold-hint.is-relance{color:var(--v-sun-hi)}
html.lq #plus-pacte .ob-hold{position:relative;display:grid;place-items:center;width:96px;height:96px;margin:9px 0 16px;padding:0;border:0;border-radius:50%;
  background:var(--v-sun);color:#1B1640;box-shadow:0 6px 0 var(--v-sun-lip),0 16px 30px -12px rgba(27,22,64,.6);cursor:pointer;touch-action:none;
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .16s var(--v-press),box-shadow .16s var(--v-press),background .3s}
html.lq #plus-pacte .ob-hold::before{content:'';position:absolute;inset:-12px;border-radius:50%;background:rgba(255,216,107,.28);pointer-events:none}
html.lq #plus-pacte .ob-hold:focus-visible{outline:3px solid #fff;outline-offset:14px}
html.lq #plus-pacte .ob-hold.is-holding{transform:translateY(4px) scale(.97);box-shadow:0 2px 0 var(--v-sun-lip),0 8px 18px -10px rgba(27,22,64,.55)}
html.lq #plus-pacte .ob-hold:is(.is-holding,.is-done)::before{opacity:0}
html.lq #plus-pacte .ob-hold-ring{position:absolute;inset:-9px;width:calc(100% + 18px);height:calc(100% + 18px);overflow:visible;transform:rotate(-90deg);pointer-events:none}
html.lq #plus-pacte .ob-hold-track{fill:none;stroke:rgba(255,255,255,.2);stroke-width:4.5}
html.lq #plus-pacte .ob-hold-fill{fill:none;stroke:#fff;stroke-width:4.5;stroke-linecap:round;stroke-dasharray:289.03;stroke-dashoffset:289.03}
html.lq #plus-pacte .ob-hold.is-lache .ob-hold-fill{transition:stroke-dashoffset .35s ease-out}
html.lq #plus-pacte .ob-hold-ico{position:relative;display:block;width:54px;height:54px;transition:opacity .15s,transform .2s var(--v-press)}
html.lq #plus-pacte .ob-hold-ico svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html.lq #plus-pacte .ob-hold-ico>svg{opacity:.38}
html.lq #plus-pacte .ob-hold-plein{position:absolute;inset:0;clip-path:inset(calc((1 - var(--p,0)) * 100%) 0 0 0)}
html.lq #plus-pacte .ob-hold.is-lache .ob-hold-plein{transition:clip-path .35s ease-out}
html.lq #plus-pacte .ob-hold-ok{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.4);pointer-events:none}
html.lq #plus-pacte .ob-hold-ok svg{width:46px;height:46px;fill:none;stroke:#0D5B3B;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:0}
html.lq #plus-pacte .ob-hold.is-done{background:var(--v-mint);box-shadow:0 6px 0 #5FCB97,0 16px 30px -12px rgba(27,22,64,.6);cursor:default}
html.lq #plus-pacte .ob-hold.is-done .ob-hold-ico{opacity:0;transform:scale(.6)}
html.lq #plus-pacte .ob-hold.is-done .ob-hold-ok{opacity:1;transform:none;transition:opacity .2s .05s,transform .35s var(--v-pop) .05s}
html.lq #plus-pacte .ob-hold.is-done .ob-hold-fill{stroke:var(--v-mint)}
/* Déjà pris à l’ouverture : le certificat tamponné et « C’est noté : ton engagement est pris en compte. », sans le bouton (la coche
   ne sert qu’au moment où on le prend) */
html.lq #plus-pacte .pc-pacte.is-deja .ob-hold{display:none}
html.lq #plus-pacte .pc-pacte.is-deja .ob-hold-zone{margin:16px 0 6px}
html.lq #plus-pacte .pc-pacte.is-deja .ob-hold-hint{min-height:0;color:#fff}
/* Téléphones peu hauts (iPhone SE, mini) : tout tient sans faire défiler la feuille */
@media (max-height:760px){
  html.lq #plus-pacte .pc-pacte{margin:16px 14px 12px;padding:24px 14px 10px}
  html.lq #plus-pacte .ob-pact-card{padding:14px 14px 10px}
  html.lq #plus-pacte .ob-pact-k{margin-bottom:6px}
  html.lq #plus-pacte .ob-pact-txt{font-size:13.5px;line-height:1.4}
  html.lq #plus-pacte .ob-pact-txt+.ob-pact-txt{margin-top:5px}
  html.lq #plus-pacte .ob-pact-date{margin-top:8px}
  html.lq #plus-pacte .ob-hold-zone{gap:8px;margin-top:12px}
  html.lq #plus-pacte .ob-hold-hint{font-size:13.5px}
  html.lq #plus-pacte .ob-hold{width:76px;height:76px;margin:6px 0 12px}
  html.lq #plus-pacte .ob-hold::before{inset:-8px}
  html.lq #plus-pacte .ob-hold-ico{width:42px;height:42px}
  html.lq #plus-pacte .ob-hold-ok svg{width:38px;height:38px}
}
@media (max-height:600px){
  html.lq #plus-pacte>summary>small{display:none!important}
  html.lq #scr-compte #plus-pacte .plus-details-body{padding-bottom:calc(var(--safe-bottom) + 8px)!important}
  html.lq #plus-pacte .pc-pacte{padding-top:20px}
  html.lq #plus-pacte .ob-hold-zone{margin-top:8px}
  html.lq #plus-pacte .ob-pact-txt{font-size:12.5px;line-height:1.34}
  html.lq #plus-pacte .ob-hold{width:66px;height:66px}
  html.lq #plus-pacte .ob-hold-ico{width:36px;height:36px}
  html.lq #plus-pacte .ob-hold-ok svg{width:32px;height:32px}
}
@media (prefers-reduced-motion:no-preference){
  html.lq:not([data-motion="reduce"]) #plus-pacte .ob-hold:not(.is-holding):not(.is-done)::before{animation:obvHoldHalo 2.4s ease-out infinite}
  html.lq:not([data-motion="reduce"]) #plus-pacte .ob-hold-hint.is-relance{animation:obvHoldHint .42s ease-out}
  html.lq:not([data-motion="reduce"]) #plus-pacte .pc-pacte:not(.is-deja) .ob-hold.is-done{animation:obvHoldOk .5s var(--v-pop)}
  html.lq:not([data-motion="reduce"]) #plus-pacte .pc-pacte:not(.is-deja) .ob-hold.is-done .ob-hold-ok svg{animation:obvHoldCoche .35s ease-out .12s backwards}
}

/* ---------- Retours du 5 novembre, 21 h 54 ----------
   Mon compte : l’objectif de l’onboarding sur la carte du profil, sous le niveau (la ligne « Profil et objectif » des réglages part ;
   la carte ouvre la même feuille). Une petite tuile claire et son icône, « Objectif : » puis l’objectif en gras, comme dans la feuille. */
html.lq .acct-hero .acct-obj{display:flex;align-items:center;gap:8px;min-width:0;color:rgba(255,255,255,.82);font:600 13.5px/1.3 var(--ui);text-wrap:balance}
html.lq .acct-hero .acct-obj strong{color:#fff;font-weight:800}
html.lq .acct-hero .acct-obj-ico{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
html.lq .acct-hero .acct-obj-ico .ob-answer-icon{display:grid;place-items:center;width:100%;height:100%;border-radius:inherit;background:none;color:#fff}
html.lq .acct-hero .acct-obj-ico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Retours du 5 novembre, 22 h 19 ----------
   « Projet importé » (réf. 2 : « une micro-interaction en mode validé ») : la coche du compte rendu rebondit en tournant, une onde
   verte part d’elle, et les tables arrivent une à une (net, après un léger flou) ; la coche « Importé » se pose sur la carte
   (lqDone). Rien en mouvement réduit. */
@media (prefers-reduced-motion:no-preference){
  html.lq:not([data-motion="reduce"]) #console-out .feedback.ok.is-valide .fi{position:relative;animation:lqImpCoche .55s cubic-bezier(.3,1.5,.5,1) .05s backwards}
  html.lq:not([data-motion="reduce"]) #console-out .feedback.ok.is-valide .fi::after{content:'';position:absolute;inset:-2px;border-radius:50%;box-shadow:0 0 0 0 rgba(22,163,74,.45);animation:lqImpOnde .9s ease-out .25s both}
  html.lq:not([data-motion="reduce"]) #console-out .feedback.ok.is-valide code{animation:lqImpTable .38s ease-out calc(.2s + var(--i,0) * 55ms) backwards}
  html.lq:not([data-motion="reduce"]) #console-out .feedback.ok.is-valide .imp-uml{animation:lqImpUml .42s cubic-bezier(.3,1.4,.5,1) .55s backwards}
}
@keyframes lqImpCoche{0%{transform:scale(0) rotate(-40deg)}60%{transform:scale(1.25) rotate(8deg)}100%{transform:none}}
@keyframes lqImpOnde{0%{box-shadow:0 0 0 0 rgba(22,163,74,.45)}100%{box-shadow:0 0 0 14px rgba(22,163,74,0)}}
@keyframes lqImpTable{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:none}}
@keyframes lqImpUml{from{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:none}}

/* ---------- Retours du 5 novembre, 22 h 35 ----------
   Mon compte, la carte du profil (l’avis qu’Elisa a demandé : « la barre semble remplie à 45 % alors que le texte indique 11 % » ;
   « Jointures est un chapitre, Constructeur de requêtes un niveau ») : « Ma progression » et son chiffre, la barre du parcours ; dessous,
   le chapitre qui suit, qui s’ouvre (une pastille jaune et sa flèche) ; sous le badge, le niveau suivant en leçons. */
html.lq .acct-hero .acct-level-head{align-items:center;margin-bottom:10px}
html.lq .acct-hero .acct-level-head small{font:700 15.5px/1.2 var(--display);letter-spacing:-.005em;color:#fff}
html.lq .acct-hero .acct-level-head em{font:800 19px/1 var(--display);color:var(--sun-hi)}
html.lq .acct-hero .acct-chap{display:flex;align-items:center;gap:12px;width:100%;margin:14px 0 0;padding:12px 0 0;border:0;border-top:1px solid rgba(255,255,255,.14);
  background:none;color:#fff;font:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
html.lq .acct-hero .acct-chap-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
html.lq .acct-hero .acct-chap-t small{font:600 12.5px/1.2 var(--ui);color:rgba(255,255,255,.72)}
html.lq .acct-hero .acct-chap-t b{font:700 18px/1.2 var(--display);letter-spacing:-.01em;color:#fff;text-wrap:balance}
html.lq .acct-hero .acct-chap-go{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--sun);color:#1B1640;
  box-shadow:0 3px 0 var(--sun-lip);transition:transform .16s var(--press),box-shadow .16s var(--press)}
html.lq .acct-hero .acct-chap-go svg{width:16px;height:16px}
html.lq .acct-hero .acct-chap:active .acct-chap-go{transform:translateY(3px);box-shadow:0 0 0 var(--sun-lip)}
html.lq .acct-hero .acct-chap:focus-visible{outline:3px solid #fff;outline-offset:4px;border-radius:12px}

/* ============================================================================================================================
   6 novembre, 0 h 40 — les widgets dans Mon compte (Elisa : « dans compte mettre ça (widget) avec les animations de comment
   procéder »). 11 h 12 (« améliore les pages pour que ça soit plus clair », avec deux captures de son iPhone) : un pas-à-pas.
   Une étape à la fois : un iPhone plus grand (libellés à l’échelle de l’écran dessiné, en cqw), le geste de l’étape (data-step,
   rejoué par wtuJouer), le doigt sur les boutons mesurés (--plus-x, --ok-y… posés par wtuCibles) ; dessous, la barre des étapes,
   le texte de l’étape, « Précédent » et « Suivant ».
   ============================================================================================================================ */
html.lq #scr-compte .plus-widget .plus-details-body{padding-top:12px!important}
html.lq .wtu{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:0 18px}
html.lq .wtu-scene{display:grid;place-items:center;padding:12px 0 10px;border-radius:24px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:radial-gradient(120% 90% at 50% 0%,#EEE9FF 0%,#F6F4FE 62%,#fff 100%);box-shadow:inset 0 0 0 2px var(--line-2)}
html.lq .wtu-tel{position:relative;display:block;width:min(212px,56vw);padding:6px;border-radius:38px;background:#1B1640;box-shadow:0 16px 34px rgba(34,28,70,.28),inset 0 0 0 2px #3A3270}
/* Un petit écran (iPhone SE) : l’iPhone dessiné rétrécit pour que le texte de l’étape et « Suivant » restent visibles sans défiler */
html.lq .wtu-tel{width:min(212px,56vw,calc((100svh - 360px) / 2))}
@media (max-height:720px){
  html.lq .wtu{gap:8px}
  html.lq .wtu-scene{padding:8px 0 6px}
  html.lq .wtu-tel{width:min(212px,56vw,calc((100svh - 400px) / 2))}
  html.lq .wtu-txt{font-size:15.5px}
  html.lq .wtu-astuce{font-size:12.5px}
}
html.lq .wtu-ecran{position:relative;display:block;aspect-ratio:9/18;overflow:hidden;border-radius:32px;container-type:inline-size;font-family:var(--ui);-webkit-user-select:none;user-select:none;
  background:linear-gradient(172deg,#E6DEFF 0%,#F2DAF0 52%,#FCE3D3 100%)}
html.lq .wtu-ile{position:absolute;z-index:9;left:50%;top:2.2%;width:31%;height:4.2%;transform:translateX(-50%);border-radius:99px;background:#1B1640}
html.lq .wtu-doigt{position:absolute;z-index:12;left:50%;top:74%;width:15cqw;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.66);border:2px solid #fff;box-shadow:0 4px 14px rgba(27,22,64,.32);transform:translate(-50%,-50%);opacity:0;pointer-events:none}
html.lq .wtu-doigt::after{content:'';position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(255,255,255,.95);opacity:0}
/* Les boutons du haut, comme sur l’iPhone : des pastilles de verre, « + » et « OK » (« Annuler » et « OK » sur l’écran verrouillé) */
html.lq .wtu-pill{position:absolute;z-index:6;top:2.1%;height:8.4cqw;min-width:15.6cqw;padding:0 3.8cqw;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:99px;
  background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.95),0 1px 4px rgba(27,22,64,.14);color:#1B1640;font:800 5.6cqw/1 var(--ui);white-space:nowrap;opacity:0;transform:scale(.8)}
html.lq .wtu-pplus,html.lq .wtu-annuler{left:9%}
html.lq .wtu-pplus{font-size:8cqw;font-weight:600}
html.lq .wtu-ok{right:9%}
html.lq .wtu-statut{position:absolute;z-index:5;left:0;right:0;top:3%;display:flex;align-items:center;justify-content:space-between;padding:0 8% 0 12%;color:#1B1640;font:800 5.4cqw/1 var(--ui)}
html.lq .wtu-statut svg{width:15cqw;height:auto}
html.lq .wtu-poignee{position:absolute;left:50%;top:2.6cqw;width:12cqw;height:1.4cqw;margin-left:-6cqw;border-radius:99px;background:#CFCAE0}

/* L’écran d’accueil : vingt apps et leur nom, les points des pages, le Dock */
html.lq .wtu-grille{position:absolute;left:7%;right:7%;top:12.5%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:6.4cqw;row-gap:3.2cqw}
html.lq .wtu-app{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.8cqw}
html.lq .wtu-app>i{display:block;width:100%;aspect-ratio:1;border-radius:24%;background:#CDBFFB;box-shadow:inset 0 -2px 0 rgba(27,22,64,.07)}
html.lq .wtu-app:nth-child(5n+2)>i{background:#BFEBD5}
html.lq .wtu-app:nth-child(5n+3)>i{background:#FFE29A}
html.lq .wtu-app:nth-child(5n+4)>i{background:#FFC9DA}
html.lq .wtu-app:nth-child(5n)>i{background:#C6DAFF}
html.lq .wtu-app>u{display:block;width:62%;height:1.9cqw;border-radius:2cqw;background:rgba(27,22,64,.2)}
html.lq .wtu-app>em{position:absolute;left:-6%;top:-6%;width:6.6cqw;height:6.6cqw;border-radius:50%;background:rgba(244,240,252,.96);box-shadow:0 1px 3px rgba(27,22,64,.25);opacity:0;transform:scale(.4)}
html.lq .wtu-app>em::before{content:'';position:absolute;left:26%;right:26%;top:calc(50% - .55cqw);height:1.1cqw;border-radius:1cqw;background:#5A5488}
html.lq .wtu-points{position:absolute;left:50%;top:79%;display:flex;gap:2cqw;padding:1.6cqw 3.2cqw;transform:translateX(-50%);border-radius:99px;background:rgba(255,255,255,.3)}
html.lq .wtu-points i{display:block;width:1.8cqw;height:1.8cqw;border-radius:50%;background:rgba(27,22,64,.25)}
html.lq .wtu-points i:nth-child(2){background:#1B1640}
html.lq .wtu-dock{position:absolute;left:4%;right:4%;bottom:2.6%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6.4cqw;padding:3.4cqw 3.6cqw;border-radius:9cqw;background:rgba(255,255,255,.34)}
html.lq .wtu-dock i{display:block;aspect-ratio:1;border-radius:24%;background:#B8E8CF}
html.lq .wtu-dock i:nth-child(2){background:#C6DAFF}
html.lq .wtu-dock i:nth-child(3){background:#BFEBD5}
html.lq .wtu-dock i:nth-child(4){background:#FFC9DA}
html.lq .wtu-pose{grid-area:1/1/3/3;position:relative;z-index:2;display:block;opacity:0;visibility:hidden}
/* Le menu du « + », comme sur l’iPhone : quatre lignes, une icône chacune */
html.lq .wtu-menu{position:absolute;z-index:7;left:5%;top:8.6%;width:72%;display:flex;flex-direction:column;padding:2.2cqw;border-radius:7cqw;box-sizing:border-box;
  background:rgba(252,251,255,.93);box-shadow:0 10px 26px rgba(27,22,64,.25),inset 0 0 0 1px #fff;opacity:0;transform:scale(.55);transform-origin:12% 0}
html.lq .wtu-mi{display:flex;align-items:center;gap:3.2cqw;padding:2.6cqw 2.8cqw;border-radius:4.6cqw;color:#1B1640;font:700 5.5cqw/1.2 var(--ui)}
html.lq .wtu-mi svg{flex:none;width:7.4cqw;height:7.4cqw}
/* La galerie des widgets : la recherche, l’app Requête, puis sa fiche et « Ajouter le widget » */
html.lq .wtu-galerie{position:absolute;z-index:8;left:0;right:0;top:11%;bottom:0;display:block;border-radius:8cqw 8cqw 0 0;background:#F3F1F8;box-shadow:0 -8px 24px rgba(27,22,64,.18);transform:translateY(102%)}
html.lq .wtu-cherche{position:absolute;left:6%;right:6%;top:8cqw;height:10.6cqw;display:flex;align-items:center;gap:2.4cqw;padding:0 3.6cqw;box-sizing:border-box;border-radius:5.3cqw;background:#E4E1EE;color:#8C86A8;font:600 5.2cqw/1 var(--ui)}
html.lq .wtu-loupe{flex:none;position:relative;width:3.6cqw;height:3.6cqw;border:.9cqw solid #8C86A8;border-radius:50%}
html.lq .wtu-loupe::after{content:'';position:absolute;right:-2.1cqw;bottom:-1.6cqw;width:2.2cqw;height:.9cqw;border-radius:1cqw;background:#8C86A8;transform:rotate(45deg)}
html.lq .wtu-ph{white-space:nowrap}
html.lq .wtu-tape{position:absolute;left:11.6cqw;top:50%;transform:translateY(-50%);color:#1B1640;font:700 5.6cqw/1 var(--ui);white-space:nowrap;clip-path:inset(0 100% 0 0)}
html.lq .wtu-res{position:absolute;left:6%;right:6%;top:24cqw;height:13.6cqw;display:flex;align-items:center;gap:3cqw;padding:0 3.6cqw;box-sizing:border-box;border-radius:4.4cqw;background:#fff;color:#1B1640;font:800 5.8cqw/1 var(--display);opacity:0;transform:translateY(3cqw)}
html.lq .wtu-res em{margin-left:auto;width:2.4cqw;height:2.4cqw;border-right:.8cqw solid #B3ADCB;border-top:.8cqw solid #B3ADCB;transform:rotate(45deg)}
html.lq .wtu-res-ic{flex:none;display:grid;place-items:center;width:8.6cqw;height:8.6cqw;padding:1.7cqw;box-sizing:border-box;border-radius:2.4cqw;background:linear-gradient(170deg,#7A5CFF,#5538E6);color:#FFC83D}
html.lq .wtu-res-ic svg{display:block;width:100%;height:auto}
html.lq .wtu-fiche{position:absolute;left:0;right:0;top:7cqw;bottom:0;display:flex;flex-direction:column;align-items:center;padding:0 8%;opacity:0;transform:translateX(14%)}
html.lq .wtu-fiche-app{display:flex;align-items:center;gap:2.4cqw;color:#1B1640;font:800 5.8cqw/1 var(--display)}
html.lq .wtu-fiche-wg{display:block;width:44%;margin-top:7cqw}
html.lq .wtu-fiche-t{margin-top:5cqw;color:#1B1640;font:800 6.6cqw/1.1 var(--display)}
html.lq .wtu-fiche-d{margin-top:1.2cqw;color:#7A7499;font:600 4.6cqw/1.25 var(--ui);text-align:center}
html.lq .wtu-ajout{position:absolute;left:0;right:0;bottom:8%;width:max-content;margin:0 auto;padding:3.4cqw 6cqw;border-radius:99px;background:#0A84FF;color:#fff;font:800 5.6cqw/1 var(--ui);white-space:nowrap}
/* Le widget, comme sur l’iPhone : la flamme du jour, « 0/1 », le chat qui dépasse du bas */
html.lq .wtu-wg{position:relative;display:block;width:100%;aspect-ratio:1;overflow:hidden;border-radius:22%;container-type:inline-size;background:linear-gradient(170deg,#7A5CFF 0%,#5538E6 58%,#4529CC 100%);box-shadow:0 6px 14px rgba(69,41,204,.35)}
html.lq .wtu-wg-top{position:absolute;left:0;right:0;top:12%;display:flex;align-items:center;justify-content:center;gap:5%}
html.lq .wtu-wg-fl{display:block;width:26%;color:rgba(255,255,255,.62);transform-origin:50% 90%}
html.lq .wtu-wg-fl svg,html.lq .wtu-lw svg,html.lq .wtu-apps i.rq svg{display:block;width:100%;height:auto}
html.lq .wtu-wg.is-fait .wtu-wg-fl{color:#FFC83D}
html.lq .wtu-wg-top b{color:#fff;font:800 22px/1 var(--display);font-size:22cqw;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
html.lq .wtu-wg-top b small{font-size:.58em;opacity:.85}
html.lq .wtu-wg.is-fait .wtu-wg-top b{color:#FFD86B}
html.lq .wtu-wg-chat{position:absolute;left:50%;bottom:-44%;width:66%;height:auto;transform:translateX(-50%);pointer-events:none}

/* L’écran verrouillé : le fond d’écran est dans la carte, qui rétrécit quand on maintient le doigt */
html.lq .wtu-ecran.is-nuit{background:#0E0A26}
html.lq .wtu-carte{position:absolute;z-index:1;inset:0;display:block;border-radius:32px;overflow:hidden;transform-origin:50% 42%;
  background:radial-gradient(120% 70% at 18% 8%,rgba(124,92,255,.95) 0%,rgba(124,92,255,0) 60%),radial-gradient(90% 55% at 92% 96%,rgba(255,138,61,.75) 0%,rgba(255,138,61,0) 58%),linear-gradient(180deg,#2A1B6E 0%,#3A2596 55%,#1B1046 100%)}
html.lq .wtu-date{position:absolute;left:0;right:0;top:13.5%;text-align:center;color:rgba(255,255,255,.88);font:700 5cqw/1.2 var(--ui)}
html.lq .wtu-heure{position:absolute;left:16%;right:16%;top:17%;text-align:center;color:#fff;font:800 25cqw/1 var(--display);letter-spacing:-.02em;border-radius:5cqw}
html.lq .wtu-zone{position:absolute;left:6%;right:6%;top:36.5%;height:11%;display:flex;align-items:center;justify-content:center;gap:5%;border-radius:5cqw}
html.lq .wtu-plus{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;font:600 10cqw/1 var(--ui);opacity:0}
html.lq .wtu-pose-r,html.lq .wtu-pose-b{display:block;opacity:0}
html.lq .is-nuit .wtu-pill{min-width:13cqw;padding:0 3cqw;background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);color:#fff;font-size:4.6cqw}
html.lq .is-nuit .wtu-annuler{left:6%}   /* « Annuler » est plus long que « + » : il reste à côté de la Dynamic Island */
html.lq .is-nuit .wtu-ok{right:6%}
html.lq .wtu-perso{position:absolute;z-index:6;left:0;right:0;bottom:8%;width:max-content;margin:0 auto;padding:2.8cqw 6cqw;border-radius:99px;background:rgba(255,255,255,.24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);color:#fff;font:800 5.6cqw/1.2 var(--ui);white-space:nowrap;opacity:0;transform:scale(.8)}
html.lq .wtu-choix{position:absolute;z-index:7;left:9%;right:9%;top:20%;display:flex;gap:8%;opacity:0}
html.lq .wtu-choix>span{flex:1;display:flex;flex-direction:column;align-items:center;gap:3.4cqw;color:#fff;font:700 4.6cqw/1.2 var(--ui);text-align:center}
html.lq .wtu-choix i{position:relative;display:block;width:100%;aspect-ratio:9/17;border-radius:5cqw;box-shadow:0 6px 16px rgba(0,0,0,.35)}
html.lq .wtu-choix-v i{background:radial-gradient(120% 70% at 18% 8%,rgba(124,92,255,.95) 0%,rgba(124,92,255,0) 60%),linear-gradient(180deg,#2A1B6E,#1B1046)}
html.lq .wtu-choix-v i b{position:absolute;left:0;right:0;top:16%;text-align:center;color:#fff;font:800 9cqw/1 var(--display)}
html.lq .wtu-choix-a i{background:radial-gradient(circle,#C9EEDC 0 1.8cqw,transparent 2.1cqw) 0 0/6.4cqw 6.4cqw,linear-gradient(180deg,#F1EEFC,#E2DBFA);background-position:2.4cqw 5.4cqw,0 0}
html.lq .wtu-liste{position:absolute;z-index:8;left:0;right:0;bottom:0;height:54%;display:flex;flex-direction:column;align-items:stretch;gap:2.6cqw;padding:9cqw 7% 0;box-sizing:border-box;border-radius:8cqw 8cqw 0 0;background:rgba(246,244,252,.98);box-shadow:0 -8px 24px rgba(0,0,0,.25);transform:translateY(102%)}
html.lq .wtu-liste-t{color:#1B1640;font:800 6cqw/1.2 var(--display);text-align:center}
html.lq .wtu-apps{display:flex;flex-direction:column;gap:1.4cqw}
html.lq .wtu-apps>span{display:flex;align-items:center;gap:3cqw;padding:2.2cqw 2.6cqw;border-radius:4cqw;color:#1B1640;font:700 5.4cqw/1.2 var(--ui)}
html.lq .wtu-apps i{flex:none;width:8cqw;height:8cqw;border-radius:2.4cqw;background:#CFE0FF}
html.lq .wtu-apps i.a2{background:#FFE7A8}
html.lq .wtu-apps i.rq{display:grid;place-items:center;padding:1.5cqw;box-sizing:border-box;background:linear-gradient(170deg,#7A5CFF,#5538E6);color:#FFC83D}
html.lq .wtu-choixw{position:absolute;left:6%;right:6%;top:24cqw;display:flex;flex-direction:column;align-items:center;gap:3.4cqw;opacity:0}
html.lq .wtu-choixw>span{display:block;padding:3cqw;border-radius:5cqw;background:#fff;box-shadow:0 2px 8px rgba(27,22,64,.12)}
html.lq .wtu-lw{display:flex;align-items:center;color:#fff}
html.lq .wtu-lw-rond{flex-direction:column;justify-content:center;gap:.4cqw;width:15cqw;height:15cqw;border-radius:50%;background:rgba(255,255,255,.2)}
html.lq .wtu-lw-rond svg{width:5.6cqw}
html.lq .wtu-lw-rond b{font:800 4cqw/1 var(--display)}
html.lq .wtu-lw-bande{gap:2cqw;padding:0 1cqw}
html.lq .wtu-lw-bande>svg{flex:none;width:6.4cqw}
html.lq .wtu-lw-bande b{display:block;font:800 4.4cqw/1.15 var(--display)}
html.lq .wtu-lw-bande small{display:block;font:600 3.6cqw/1.2 var(--ui);color:rgba(255,255,255,.86);white-space:nowrap}
html.lq .wtu-lw:not(.is-fait) svg{opacity:.78}
html.lq .wtu-choixw .wtu-lw{color:#1B1640}
html.lq .wtu-choixw .wtu-lw-rond{background:rgba(27,22,64,.1)}
html.lq .wtu-choixw .wtu-lw-bande small{color:#5A5488}

/* Le mode modification de l’écran d’accueil (étapes 2 à 4 en entier ; il arrive à l’étape 1 et s’en va à la 5) */
html.lq .wtu[data-wtu="accueil"]:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"]) :is(.wtu-pill,.wtu-app>em){opacity:1;transform:none}
html.lq .wtu[data-wtu="accueil"]:is([data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"]) .wtu-statut{opacity:0}
html.lq .wtu[data-wtu="accueil"]:is([data-step="3"],[data-step="4"]) .wtu-galerie{transform:none}
html.lq .wtu[data-wtu="accueil"][data-step="4"] :is(.wtu-cherche,.wtu-res){opacity:0}
html.lq .wtu[data-wtu="accueil"]:is([data-step="4"],[data-step="5"]) .wtu-pose{visibility:visible}
html.lq .wtu[data-wtu="accueil"][data-step="5"] .wtu-pose{opacity:1}
html.lq .wtu[data-wtu="accueil"][data-step="5"] :is(.t0,.t1,.t4,.t5){opacity:0}
/* Le mode modification de l’écran verrouillé (étapes 3 et 4 ; il arrive à la fin de la 2 et s’en va à la 5) */
html.lq .wtu[data-wtu="verrou"]:is([data-step="3"],[data-step="4"],[data-step="5"]) .wtu-pill{opacity:1;transform:none}
html.lq .wtu[data-wtu="verrou"]:is([data-step="3"],[data-step="4"],[data-step="5"]) :is(.wtu-heure,.wtu-zone){box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
html.lq .wtu[data-wtu="verrou"]:is([data-step="3"],[data-step="4"]) .wtu-zone{background:rgba(255,255,255,.08)}
html.lq .wtu[data-wtu="verrou"]:is([data-step="3"],[data-step="4"]) .wtu-plus{opacity:1}
html.lq .wtu[data-wtu="verrou"][data-step="5"] :is(.wtu-pose-r,.wtu-pose-b){opacity:1}
html.lq .wtu[data-wtu="verrou"][data-step="5"] .wtu-liste{transform:none}
html.lq .wtu[data-wtu="verrou"][data-step="5"] .wtu-apps{opacity:0}
html.lq .wtu[data-wtu="verrou"][data-step="5"] .wtu-choixw{opacity:1}
html.lq .wtu[data-wtu="verrou"][data-step="5"] .wtu-choixw>span{opacity:.45}

/* Sous l’iPhone : la barre des étapes, l’étape du moment, « Précédent » et « Suivant » */
html.lq .wtu-etapes{list-style:none;margin:2px 0 0;padding:0;display:flex;gap:6px}
html.lq .wtu-etapes li{flex:1;display:flex}
html.lq .wtu-etape{flex:1;display:flex;align-items:center;height:24px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.lq .wtu-etape .wtu-barre{position:relative;display:block;width:100%;height:6px;overflow:hidden;border-radius:99px;background:#E6E1F7}
html.lq .wtu-etape .wtu-barre::after{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
html.lq .wtu-etape.is-fait .wtu-barre::after{transform:none}
html.lq .wtu-etape:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
html.lq .wtu-guide{display:grid}
html.lq .wtu-pas{grid-area:1/1;display:flex;flex-direction:column;gap:5px;visibility:hidden}
html.lq .wtu-pas.is-on{visibility:visible;animation:wtuPasArrive .32s ease both}
html.lq .wtu-num{color:var(--accent-ink);font:800 12.5px/1.2 var(--display);letter-spacing:.04em;text-transform:uppercase}
html.lq .wtu-txt{margin:0;color:var(--ink);font:600 17px/1.4 var(--ui)}
html.lq .wtu-txt b{font-weight:800;color:var(--accent-lip)}
html.lq .wtu-astuce{margin:2px 0 0;color:var(--ink-3);font:600 13.5px/1.4 var(--ui)}
html.lq .wtu-astuce b{font-weight:800;color:var(--ink-2)}
html.lq .wtu:is([data-step="1"],[data-step="2"],[data-step="3"],[data-step="4"],[data-step="5"]) .wtu-etape.is-on .wtu-barre::after{animation:wtuBarre var(--wtu-d,3s) linear both}

/* Les gestes de l’écran d’accueil */
html.lq .wtu[data-wtu="accueil"][data-step="1"] .wtu-doigt{animation:wtuA1Doigt 3.4s cubic-bezier(.3,.7,.3,1) both}
html.lq .wtu[data-wtu="accueil"][data-step="1"] .wtu-doigt::after{animation:wtuOnde 3.4s ease-out both}
html.lq .wtu[data-wtu="accueil"][data-step="1"] .wtu-app{animation:wtuBouge .26s ease-in-out calc(1.6s + var(--i) * .03s) infinite alternate}
html.lq .wtu[data-wtu="accueil"][data-step="1"] .wtu-app>em{animation:wtuPastille .25s cubic-bezier(.34,1.56,.64,1) 1.6s both}
html.lq .wtu[data-wtu="accueil"][data-step="1"] .wtu-pill{animation:wtuApparait .3s ease 1.65s both}
html.lq .wtu[data-wtu="accueil"][data-step="1"] .wtu-statut{animation:wtuDisparait .25s ease 1.6s both}
html.lq .wtu[data-wtu="accueil"]:is([data-step="2"],[data-step="3"],[data-step="4"]) .wtu-app{animation:wtuBouge .26s ease-in-out calc(var(--i) * .03s) infinite alternate}
html.lq .wtu[data-wtu="accueil"][data-step="2"] .wtu-doigt{animation:wtuA2Doigt 3.8s ease-in-out both}
html.lq .wtu[data-wtu="accueil"][data-step="2"] .wtu-pplus{animation:wtuA2Plus 3.8s linear both}
html.lq .wtu[data-wtu="accueil"][data-step="2"] .wtu-menu{animation:wtuA2Menu 3.8s cubic-bezier(.34,1.56,.64,1) both}
html.lq .wtu[data-wtu="accueil"][data-step="2"] .wtu-mi:first-child{animation:wtuA2Ligne 3.8s linear both}
html.lq .wtu[data-wtu="accueil"][data-step="3"] .wtu-galerie{animation:wtuA3Galerie 4.6s cubic-bezier(.3,.8,.3,1) both}
html.lq .wtu[data-wtu="accueil"][data-step="3"] .wtu-ph{animation:wtuA3Ph 4.6s linear both}
html.lq .wtu[data-wtu="accueil"][data-step="3"] .wtu-tape{animation:wtuA3Tape 4.6s linear both}
html.lq .wtu[data-wtu="accueil"][data-step="3"] .wtu-res{animation:wtuA3Res 4.6s cubic-bezier(.34,1.56,.64,1) both}
html.lq .wtu[data-wtu="accueil"][data-step="3"] .wtu-doigt{animation:wtuA3Doigt 4.6s ease-in-out both}
html.lq .wtu[data-wtu="accueil"][data-step="4"] .wtu-galerie{animation:wtuA4Galerie 3.8s cubic-bezier(.5,0,.6,1) both}
html.lq .wtu[data-wtu="accueil"][data-step="4"] .wtu-fiche{animation:wtuA4Fiche 3.8s ease both}
html.lq .wtu[data-wtu="accueil"][data-step="4"] .wtu-ajout{animation:wtuA4Ajout 3.8s linear both}
html.lq .wtu[data-wtu="accueil"][data-step="4"] .wtu-doigt{animation:wtuA4Doigt 3.8s ease-in-out both}
html.lq .wtu[data-wtu="accueil"][data-step="4"] .wtu-pose{animation:wtuA4Pose 3.8s cubic-bezier(.34,1.56,.64,1) both}
html.lq .wtu[data-wtu="accueil"][data-step="4"] :is(.t0,.t1,.t4,.t5){animation:wtuA4Sous 3.8s ease both}
html.lq .wtu[data-wtu="accueil"][data-step="5"] .wtu-app{animation:wtuBouge .26s ease-in-out calc(var(--i) * .03s) 6 alternate}
html.lq .wtu[data-wtu="accueil"][data-step="5"] :is(.wtu-pplus,.wtu-app>em){animation:wtuDisparait .3s ease 1.7s both}
html.lq .wtu[data-wtu="accueil"][data-step="5"] .wtu-ok{animation:wtuA5Ok 3.4s linear both,wtuDisparait .3s ease 1.7s both}
html.lq .wtu[data-wtu="accueil"][data-step="5"] .wtu-statut{animation:wtuApparait .3s ease 1.75s both}
html.lq .wtu[data-wtu="accueil"][data-step="5"] .wtu-pose .wtu-wg-fl{animation:wtuFlamme 1.2s ease-in-out 2.2s 1}
html.lq .wtu[data-wtu="accueil"][data-step="5"] .wtu-doigt{animation:wtuA5Doigt 3.4s ease-in-out both}

/* Les gestes de l’écran verrouillé */
html.lq .wtu[data-wtu="verrou"][data-step="1"] .wtu-carte{animation:wtuV1Carte 3.6s cubic-bezier(.3,.8,.3,1) both}
html.lq .wtu[data-wtu="verrou"][data-step="1"] .wtu-perso{animation:wtuV1Perso 3.6s ease both}
html.lq .wtu[data-wtu="verrou"][data-step="1"] .wtu-doigt{animation:wtuV1Doigt 3.6s ease-in-out both}
html.lq .wtu[data-wtu="verrou"][data-step="1"] .wtu-doigt::after{animation:wtuOnde 3.6s ease-out both}
html.lq .wtu[data-wtu="verrou"][data-step="2"] .wtu-carte{animation:wtuV2Carte 3.4s cubic-bezier(.3,.8,.3,1) both}
html.lq .wtu[data-wtu="verrou"][data-step="2"] .wtu-choix{animation:wtuV2Choix 3.4s ease both}
html.lq .wtu[data-wtu="verrou"][data-step="2"] .wtu-choix-v i{animation:wtuV2Toucher 3.4s linear both}
html.lq .wtu[data-wtu="verrou"][data-step="2"] :is(.wtu-pill,.wtu-plus){animation:wtuApparait .3s ease 2.75s both}
html.lq .wtu[data-wtu="verrou"][data-step="2"] :is(.wtu-heure,.wtu-zone){animation:wtuV2Cadre .3s ease 2.75s both}
html.lq .wtu[data-wtu="verrou"][data-step="2"] .wtu-doigt{animation:wtuV2Doigt 3.4s ease-in-out both}
html.lq .wtu[data-wtu="verrou"][data-step="3"] .wtu-plus{animation:wtuPouls 1s ease-in-out infinite}
html.lq .wtu[data-wtu="verrou"][data-step="3"] .wtu-zone{animation:wtuV3Zone 2.8s linear both}
html.lq .wtu[data-wtu="verrou"][data-step="3"] .wtu-doigt{animation:wtuV3Doigt 2.8s ease-in-out both}
html.lq .wtu[data-wtu="verrou"][data-step="4"] .wtu-liste{animation:wtuV4Liste 5.2s cubic-bezier(.3,.8,.3,1) both}
html.lq .wtu[data-wtu="verrou"][data-step="4"] .wtu-apps{animation:wtuV4Apps 5.2s ease both}
html.lq .wtu[data-wtu="verrou"][data-step="4"] .wtu-app-rq{animation:wtuV4Rq 5.2s linear both}
html.lq .wtu[data-wtu="verrou"][data-step="4"] .wtu-choixw{animation:wtuV4Choixw 5.2s ease both}
html.lq .wtu[data-wtu="verrou"][data-step="4"] .wtu-cw-rond{animation:wtuV4CwRond 5.2s linear both}
html.lq .wtu[data-wtu="verrou"][data-step="4"] .wtu-cw-bande{animation:wtuV4CwBande 5.2s linear both}
html.lq .wtu[data-wtu="verrou"][data-step="4"] .wtu-pose-r{animation:wtuV4PoseR 5.2s cubic-bezier(.34,1.56,.64,1) both}
html.lq .wtu[data-wtu="verrou"][data-step="4"] .wtu-pose-b{animation:wtuV4PoseB 5.2s cubic-bezier(.34,1.56,.64,1) both}
html.lq .wtu[data-wtu="verrou"][data-step="4"] .wtu-plus{animation:wtuV4Plus 5.2s linear both}
html.lq .wtu[data-wtu="verrou"][data-step="4"] .wtu-doigt{animation:wtuV4Doigt 5.2s ease-in-out both}
html.lq .wtu[data-wtu="verrou"][data-step="5"] .wtu-liste{animation:wtuV5Liste 3.4s cubic-bezier(.5,0,.6,1) both}
html.lq .wtu[data-wtu="verrou"][data-step="5"] .wtu-ok{animation:wtuA5Ok 3.4s linear both,wtuDisparait .3s ease 2.05s both}
html.lq .wtu[data-wtu="verrou"][data-step="5"] .wtu-annuler{animation:wtuDisparait .3s ease 2.05s both}
html.lq .wtu[data-wtu="verrou"][data-step="5"] :is(.wtu-heure,.wtu-zone){animation:wtuV5Cadre .3s ease 2.05s both}
html.lq .wtu[data-wtu="verrou"][data-step="5"] .wtu-lw svg{animation:wtuFlamme 1.2s ease-in-out 2.4s 2}
html.lq .wtu[data-wtu="verrou"][data-step="5"] .wtu-doigt{animation:wtuV5Doigt 3.4s ease-in-out both}

@keyframes wtuPasArrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes wtuBarre{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes wtuBouge{from{transform:rotate(-2.2deg)}to{transform:rotate(2.2deg)}}
@keyframes wtuPastille{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes wtuApparait{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes wtuDisparait{from{opacity:1}to{opacity:0}}
@keyframes wtuOnde{0%,20%{opacity:0;transform:scale(.6)}32%{opacity:1}64%,100%{opacity:0;transform:scale(1.7)}}
@keyframes wtuPouls{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.18)}}
@keyframes wtuFlamme{0%,100%{transform:scale(1)}40%{transform:scale(1.22) rotate(-4deg)}70%{transform:scale(.96) rotate(3deg)}}
@keyframes wtuA1Doigt{0%{opacity:0;left:50%;top:74.5%;transform:translate(-50%,-50%) scale(1.25)}10%{opacity:1;transform:translate(-50%,-50%) scale(1)}16%,50%{transform:translate(-50%,-50%) scale(.84)}58%{opacity:1;transform:translate(-50%,-50%) scale(1)}72%,100%{opacity:0;left:50%;top:74.5%;transform:translate(-50%,-50%) scale(1)}}
@keyframes wtuA2Doigt{0%{opacity:0;left:56%;top:56%;transform:translate(-50%,-50%) scale(1)}12%{opacity:1;left:56%;top:56%}28%{left:var(--plus-x,17%);top:var(--plus-y,4%);transform:translate(-50%,-50%) scale(1)}32%{transform:translate(-50%,-50%) scale(.84)}36%{left:var(--plus-x,17%);top:var(--plus-y,4%);transform:translate(-50%,-50%) scale(1)}56%{left:var(--ajout-x,36%);top:var(--ajout-y,13%);transform:translate(-50%,-50%) scale(1)}61%{transform:translate(-50%,-50%) scale(.84)}66%{opacity:1;transform:translate(-50%,-50%) scale(1)}82%,100%{opacity:0;left:var(--ajout-x,36%);top:var(--ajout-y,13%);transform:translate(-50%,-50%) scale(1)}}
@keyframes wtuA2Plus{0%,31.9%{background:rgba(255,255,255,.62)}32%,40%{background:#fff;transform:scale(.94)}41%,100%{background:rgba(255,255,255,.62);transform:none}}
@keyframes wtuA2Menu{0%,35%{opacity:0;transform:scale(.55)}43%,100%{opacity:1;transform:none}}
@keyframes wtuA2Ligne{0%,60.9%{background:transparent;color:#1B1640}61%,100%{background:#E9E3FF;color:#4A2FD6}}
@keyframes wtuA3Galerie{0%{transform:translateY(102%)}12%,100%{transform:none}}
@keyframes wtuA3Ph{0%,30%{opacity:1}31%,100%{opacity:0}}
@keyframes wtuA3Tape{0%,32%{clip-path:inset(0 100% 0 0);animation-timing-function:steps(7,end)}52%,100%{clip-path:inset(0 0 0 0)}}
@keyframes wtuA3Res{0%,53%{opacity:0;transform:translateY(3cqw);background:#fff}58%,69.9%{opacity:1;transform:none;background:#fff}70%,100%{opacity:1;transform:none;background:#E9E3FF}}
@keyframes wtuA3Doigt{0%,12%{opacity:0;left:56%;top:46%;transform:translate(-50%,-50%) scale(1)}16%{opacity:1;left:56%;top:46%}24%{left:var(--cherche-x,50%);top:var(--cherche-y,17%);transform:translate(-50%,-50%) scale(1)}27%{transform:translate(-50%,-50%) scale(.84)}30%{opacity:1;left:var(--cherche-x,50%);top:var(--cherche-y,17%);transform:translate(-50%,-50%) scale(1)}36%{opacity:0;left:var(--cherche-x,50%);top:var(--cherche-y,17%)}52%{opacity:0;left:56%;top:46%}58%{opacity:1;left:56%;top:46%;transform:translate(-50%,-50%) scale(1)}66%{left:var(--res-x,50%);top:var(--res-y,26%);transform:translate(-50%,-50%) scale(1)}70%{transform:translate(-50%,-50%) scale(.84)}74%{opacity:1;transform:translate(-50%,-50%) scale(1)}88%,100%{opacity:0;left:var(--res-x,50%);top:var(--res-y,26%);transform:translate(-50%,-50%) scale(1)}}
@keyframes wtuA4Galerie{0%,50%{transform:none}64%,100%{transform:translateY(102%)}}
@keyframes wtuA4Fiche{0%{opacity:0;transform:translateX(14%)}10%,100%{opacity:1;transform:none}}
@keyframes wtuA4Ajout{0%,35.9%{filter:none}36%,40%{filter:brightness(.8)}41%,100%{filter:none}}
@keyframes wtuA4Doigt{0%,8%{opacity:0;left:50%;top:56%;transform:translate(-50%,-50%) scale(1)}14%{opacity:1;left:50%;top:56%}32%{left:var(--valider-x,50%);top:var(--valider-y,88%);transform:translate(-50%,-50%) scale(1)}36%{transform:translate(-50%,-50%) scale(.84)}40%{opacity:1;transform:translate(-50%,-50%) scale(1)}50%,100%{opacity:0;left:var(--valider-x,50%);top:var(--valider-y,88%);transform:translate(-50%,-50%) scale(1)}}
@keyframes wtuA4Pose{0%,62%{opacity:0;transform:scale(.55) translateY(30%)}74%{opacity:1;transform:scale(1.06)}80%,100%{opacity:1;transform:none}}
@keyframes wtuA4Sous{0%,62%{opacity:1;transform:none}70%,100%{opacity:0;transform:scale(.5)}}
@keyframes wtuA5Ok{0%,43.9%{background:rgba(255,255,255,.62)}44%,50%{background:#fff;transform:scale(.94)}51%,100%{transform:none}}
@keyframes wtuA5Doigt{0%{opacity:0;left:56%;top:52%;transform:translate(-50%,-50%) scale(1)}12%{opacity:1;left:56%;top:52%}40%{left:var(--ok-x,83%);top:var(--ok-y,4%);transform:translate(-50%,-50%) scale(1)}44%{transform:translate(-50%,-50%) scale(.84)}48%{opacity:1;transform:translate(-50%,-50%) scale(1)}60%,100%{opacity:0;left:var(--ok-x,83%);top:var(--ok-y,4%);transform:translate(-50%,-50%) scale(1)}}
@keyframes wtuV1Carte{0%,30%{transform:none;border-radius:32px;box-shadow:none}40%,100%{transform:scale(.74) translateY(-7%);border-radius:24px;box-shadow:0 10px 26px rgba(0,0,0,.45)}}
@keyframes wtuV1Perso{0%,38%{opacity:0;transform:scale(.8)}46%,69.9%{opacity:1;transform:none}70%,74%{opacity:1;transform:scale(.94);background:rgba(255,255,255,.42)}75%,100%{opacity:1;transform:none}}
@keyframes wtuV1Doigt{0%{opacity:0;left:50%;top:60%;transform:translate(-50%,-50%) scale(1.25)}8%{opacity:1;left:50%;top:60%;transform:translate(-50%,-50%) scale(1)}12%,34%{transform:translate(-50%,-50%) scale(.84)}40%{left:50%;top:60%;transform:translate(-50%,-50%) scale(1)}64%{left:var(--perso-x,50%);top:var(--perso-y,90%);transform:translate(-50%,-50%) scale(1)}70%{transform:translate(-50%,-50%) scale(.84)}74%{opacity:1;transform:translate(-50%,-50%) scale(1)}86%,100%{opacity:0;left:var(--perso-x,50%);top:var(--perso-y,90%);transform:translate(-50%,-50%) scale(1)}}
@keyframes wtuV2Carte{0%,60%{opacity:0;transform:scale(.6) translateY(-7%)}80%,100%{opacity:1;transform:none}}
@keyframes wtuV2Choix{0%{opacity:0;transform:scale(.92)}10%,56%{opacity:1;transform:none}66%,100%{opacity:0;transform:scale(1.04)}}
@keyframes wtuV2Toucher{0%,43.9%{box-shadow:0 6px 16px rgba(0,0,0,.35)}44%,100%{box-shadow:0 0 0 2.5px #fff,0 6px 16px rgba(0,0,0,.35)}}
@keyframes wtuV2Cadre{from{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0)}to{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}}
@keyframes wtuV2Doigt{0%{opacity:0;left:50%;top:80%;transform:translate(-50%,-50%) scale(1)}12%{opacity:1;left:50%;top:80%}38%{left:var(--choix-x,30%);top:var(--choix-y,40%);transform:translate(-50%,-50%) scale(1)}44%{transform:translate(-50%,-50%) scale(.84)}48%{opacity:1;transform:translate(-50%,-50%) scale(1)}60%,100%{opacity:0;left:var(--choix-x,30%);top:var(--choix-y,40%);transform:translate(-50%,-50%) scale(1)}}
@keyframes wtuV3Zone{0%,51.9%{background:rgba(255,255,255,.08)}52%,100%{background:rgba(255,255,255,.24)}}
@keyframes wtuV3Doigt{0%{opacity:0;left:56%;top:66%;transform:translate(-50%,-50%) scale(1)}14%{opacity:1;left:56%;top:66%}45%{left:var(--zone-x,50%);top:var(--zone-y,42%);transform:translate(-50%,-50%) scale(1)}52%{transform:translate(-50%,-50%) scale(.84)}58%{opacity:1;transform:translate(-50%,-50%) scale(1)}76%,100%{opacity:0;left:var(--zone-x,50%);top:var(--zone-y,42%);transform:translate(-50%,-50%) scale(1)}}
@keyframes wtuV4Liste{0%{transform:translateY(102%)}10%,100%{transform:none}}
@keyframes wtuV4Apps{0%,30%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateX(-14%)}}
@keyframes wtuV4Rq{0%,23.9%{background:transparent}24%,34%{background:#E4DDFF}35%,100%{background:transparent}}
@keyframes wtuV4Choixw{0%,32%{opacity:0;transform:translateX(14%)}38%,100%{opacity:1;transform:none}}
@keyframes wtuV4CwRond{0%,46.9%{opacity:1;transform:none}47%,49%{opacity:1;transform:scale(.92)}50%,100%{opacity:.45;transform:none}}
@keyframes wtuV4CwBande{0%,65.9%{opacity:1;transform:none}66%,68%{opacity:1;transform:scale(.94)}69%,100%{opacity:.45;transform:none}}
@keyframes wtuV4PoseR{0%,49%{opacity:0;transform:scale(.4)}55%{opacity:1;transform:scale(1.12)}60%,100%{opacity:1;transform:none}}
@keyframes wtuV4PoseB{0%,68%{opacity:0;transform:scale(.4)}74%{opacity:1;transform:scale(1.08)}79%,100%{opacity:1;transform:none}}
@keyframes wtuV4Plus{0%,48%{opacity:1}52%,100%{opacity:0}}
@keyframes wtuV4Doigt{0%,10%{opacity:0;left:50%;top:72%;transform:translate(-50%,-50%) scale(1)}15%{opacity:1;left:50%;top:72%}22%{left:var(--rq-x,34%);top:var(--rq-y,79%);transform:translate(-50%,-50%) scale(1)}24%{transform:translate(-50%,-50%) scale(.84)}27%{left:var(--rq-x,34%);top:var(--rq-y,79%);transform:translate(-50%,-50%) scale(1)}42%{left:var(--rond-x,50%);top:var(--rond-y,62%);transform:translate(-50%,-50%) scale(1)}47%{transform:translate(-50%,-50%) scale(.84)}50%{left:var(--rond-x,50%);top:var(--rond-y,62%);transform:translate(-50%,-50%) scale(1)}61%{left:var(--bande-x,50%);top:var(--bande-y,74%);transform:translate(-50%,-50%) scale(1)}66%{transform:translate(-50%,-50%) scale(.84)}69%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%,100%{opacity:0;left:var(--bande-x,50%);top:var(--bande-y,74%);transform:translate(-50%,-50%) scale(1)}}
@keyframes wtuV5Liste{0%,12%{transform:none}32%,100%{transform:translateY(102%)}}
@keyframes wtuV5Cadre{from{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5);background:transparent}to{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0);background:transparent}}
@keyframes wtuV5Doigt{0%{opacity:0;left:50%;top:64%;transform:translate(-50%,-50%) scale(1)}8%{opacity:1;left:50%;top:64%}30%{opacity:1;left:50%;top:95%;transform:translate(-50%,-50%) scale(1)}36%{opacity:0;left:50%;top:95%}42%{opacity:0;left:var(--ok-x,84%);top:calc(var(--ok-y,4%) + 6%)}48%{opacity:1;left:var(--ok-x,84%);top:var(--ok-y,4%);transform:translate(-50%,-50%) scale(1)}54%{transform:translate(-50%,-50%) scale(.84)}58%{opacity:1;transform:translate(-50%,-50%) scale(1)}68%,100%{opacity:0;left:var(--ok-x,84%);top:var(--ok-y,4%);transform:translate(-50%,-50%) scale(1)}}

/* Moins d’animations : chaque étape s’arrête sur une image fixe, au moment qui la montre le mieux (--wtu-cle, posé par wtuJouer) ;
   les apps ne tremblent pas. On passe toujours d’une étape à l’autre. */
html[data-motion="reduce"].lq .wtu *,html[data-motion="reduce"].lq .wtu *::after{animation-play-state:paused!important;animation-delay:calc(var(--wtu-d,3s) * var(--wtu-cle,.62) * -1)!important}
html[data-motion="reduce"].lq .wtu .wtu-app{animation:none!important}
@media (prefers-reduced-motion:reduce){
  html.lq .wtu *,html.lq .wtu *::after{animation-play-state:paused!important;animation-delay:calc(var(--wtu-d,3s) * var(--wtu-cle,.62) * -1)!important}
  html.lq .wtu .wtu-app{animation:none!important}
}

/* ============================================================================================================================
   6 novembre, 6 h 10 — Mon compte (Elisa : « enlève niveau 3 dans 8 leçons », « Niv 2 mets-le juste en bas de son icône ronde »,
   « mets la date d’inscription », « mettre aussi un élément FAQ vers le site internet », sur la capture d’une carte « Invite & gagne »).
   ============================================================================================================================ */
html.lq .acct-pic{flex:none;display:flex;flex-direction:column;align-items:center;gap:10px}
html.lq .acct-hero .acct-niv{display:inline-flex;align-items:baseline;gap:3px;height:24px;padding:0 10px;border-radius:999px;background:var(--sun);color:#3A2A00;
  font:800 14px/24px var(--display);white-space:nowrap;box-shadow:0 2px 0 var(--sun-lip)}
html.lq .acct-hero .acct-niv .lvl-k{font:800 9.5px/1 var(--ui);letter-spacing:.07em;text-transform:uppercase;opacity:.72}
html.lq .acct-hero .acct-rang{color:var(--mint);font:700 14.5px/1.25 var(--display);letter-spacing:-.005em;text-wrap:balance}
html.lq .acct-hero .acct-depuis{color:rgba(255,255,255,.76)}
html.lq .acct-hero .acct-depuis strong{font-weight:700}
/* La FAQ : une carte comme celle de la capture — le titre, une ligne d’explication, l’illustration à droite ; elle ouvre le site. */
html.lq #scr-compte .acct-faq{display:flex;align-items:center;gap:14px;margin:0 0 12px;padding:16px 14px 16px 18px;border:2px solid var(--line);border-radius:22px;
  background:#fff;color:var(--ink);text-decoration:none;box-shadow:0 4px 0 var(--lip);-webkit-tap-highlight-color:transparent;transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq #scr-compte .acct-faq:active{transform:translateY(3px);box-shadow:0 1px 0 var(--lip)}
html.lq #scr-compte .acct-faq:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
html.lq .acct-faq-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
html.lq .acct-faq-t b{font:800 18px/1.2 var(--display);letter-spacing:-.01em}
html.lq .acct-faq-t small{color:var(--ink-2);font:600 14.5px/1.38 var(--ui);text-wrap:pretty}
html.lq .acct-faq-ill{flex:none;display:block;width:60px;height:60px}
html.lq .acct-faq-ill svg{display:block;width:100%;height:100%}
/* 6 novembre, 7 h 29 (« Ma progression du parcours ») : sur un écran étroit, le titre de la barre passe à la ligne en deux moitiés. */
html.lq .acct-hero .acct-level-head small{text-wrap:balance}

/* ---------- Retours du 6 novembre, 7 h 52 ----------
   « Reprendre exactement ce format dans base » : une table de la Console est la carte du schéma UML, à la taille de la Console.
   L’en-tête à la couleur de la table (le trait à gauche, le nom en mono, ses lignes dans une pastille blanche, la flèche ronde,
   couchée quand la table est pliée) ; ses colonnes : PK ou FK devant le nom, le type à droite ou « → la table » à la couleur de cette
   table, le cadre « ex : » dessous. Dépliée, elle est comme une table touchée du schéma : son contour et ses liens allumés. */
html.lq #scr-console .console-schema-panel .db-tblock.tbu{overflow:hidden;border-radius:16px;background:#fff;box-shadow:0 0 0 2px var(--line),0 3px 0 2px var(--lip);transition:box-shadow .2s}
html.lq #scr-console .console-schema-panel .db-tblock.tbu.is-open{box-shadow:0 0 0 2.5px var(--c),0 3px 0 2.5px var(--c)}
html.lq #scr-console .tbu-h{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;margin:0;padding:6px 8px 6px 16px;border:0;border-radius:0;background:var(--cs);box-shadow:inset 4px 0 0 var(--c),inset 0 -2px 0 var(--line);color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.lq #scr-console .tbu-h:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
html.lq #scr-console .tbu-n{flex:1;min-width:0;color:var(--ci);font:800 14.5px/1.25 var(--mono);overflow-wrap:anywhere}
html.lq #scr-console .tbu-k{flex:none;padding:4px 8px;border-radius:99px;background:#fff;color:var(--ci);font:800 11.5px/1 var(--display)}
html.lq #scr-console .tbu-pli{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.75);color:var(--ci);transition:transform .12s var(--press,ease)}
html.lq #scr-console .tbu-pli svg{width:16px;height:16px;transform:rotate(-90deg);transition:transform .32s cubic-bezier(.33,1,.68,1)}
html.lq #scr-console .db-tblock.tbu.is-open .tbu-pli svg{transform:none}
html.lq #scr-console .tbu-h:active .tbu-pli{transform:scale(.9)}
html.lq #scr-console .tbu-cs{display:flex;flex-direction:column;padding:8px 0}
html.lq #scr-console .tbu-c{display:flex;flex-direction:column;gap:3px;margin:0;padding:3px 12px 3px 16px;color:var(--ink);font:600 13px/1 var(--mono)}
html.lq #scr-console .db-tblock.tbu.is-open .tbu-c:not(.is-plus){padding-top:5px;padding-bottom:5px}
html.lq #scr-console .tbu-r{display:flex;align-items:center;gap:7px;min-width:0;min-height:22px}
html.lq #scr-console .tbu-cn{min-width:0;line-height:1.3;overflow-wrap:anywhere}
html.lq #scr-console .tbu-c i{flex:none;padding:3px 5px;border-radius:5px;font:800 9.5px/1 var(--display);font-style:normal;letter-spacing:.03em}
html.lq #scr-console .tbu-c i.is-pk{background:var(--sun);color:#1B1640}
html.lq #scr-console .tbu-c i.is-fk{background:var(--mint);color:#0D5B3B}
html.lq #scr-console .tbu-c.is-fk .tbu-cn{color:#0F7A4C}
html.lq #scr-console .tbu-r em{flex:none;margin-left:auto;padding-left:6px;color:var(--ink-3);font:600 10.5px/1 var(--mono);font-style:normal}
html.lq #scr-console .tbu-v{flex:0 3 auto;min-width:40px;max-width:58%;margin-left:auto;padding:2px 7px;border-radius:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--lcs);color:var(--lci);font:800 10.5px/15px var(--mono)}
html.lq #scr-console .tbu-xl{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
html.lq #scr-console .tbu-x{display:inline-flex;align-items:center;gap:4px;max-width:100%;height:18px;padding:0 6px;border-radius:5px;background:#F6F4FD;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);font:600 10.5px/18px var(--mono)}
html.lq #scr-console .tbu-x small{flex:none;color:var(--ink-3);font:700 9.5px/18px var(--display)}
html.lq #scr-console .tbu-x b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-weight:700}
html.lq #scr-console .tbu-x.is-null b{color:var(--ink-3);font-style:italic;font-weight:600}
html.lq #scr-console .tbu-c.is-lien .tbu-x{background:var(--lcs);box-shadow:none}
html.lq #scr-console .tbu-c.is-lien .tbu-x b{color:var(--lci)}
html.lq #scr-console .tbu-d{flex:1 1 150px;min-width:0;color:var(--ink-3);font:500 12.5px/1.35 var(--ui);text-wrap:pretty}
html.lq #scr-console .tbu-c.is-on{background:var(--lcs,var(--cs))}
html.lq #scr-console .tbu-c.is-on .tbu-v{background:var(--lc);color:#fff}
html.lq #scr-console .tbu-c.is-on .tbu-x{background:#fff;box-shadow:none}
html.lq #scr-console .tbu-c.is-plus{flex-direction:row;align-items:center;min-height:24px;color:var(--ink-3);font:600 12.5px/1 var(--display)}
html.lq #scr-console button.tbu-c.is-plus{width:100%;border:0;background:none;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.lq #scr-console button.tbu-c.is-plus:active{color:var(--ink-2)}
html.lq #scr-console button.tbu-c.is-plus:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:8px}
html.lq #scr-console .tbu-pied{padding-top:14px;border-top:2px solid var(--line)}


/* ---------- Retours du 6 novembre, 8 h 47 – 8 h 49 : la carte de l’accueil « La leçon d’abord » ----------
   La piste A de l’audit UI/UX, sans la pastille « Rappel » (« finalement je préfère ça ») : le module, le titre de la leçon en grand,
   sa vidéo et les points du module, le chat et sa pastille « Niv. 2 », puis le bouton et le temps qui reste.
   Le bonjour tient sur une ligne (lqSesAjuste : --hi-fs, .is-ses-bas, .is-serre). */
html.lq .lq-hero.has-hi .lq-hi-title{font-size:var(--hi-fs,20px)}
html.lq .lq-hero.is-lecon .lq-hero-hi{flex-wrap:nowrap}
html.lq .lq-hero.is-lecon .lq-hi-title{flex:0 1 auto;min-width:0;overflow:hidden}
html.lq .lq-hero-hi.is-serre .lq-hi-nom{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
/* L’étiquette de la séance sur une pastille sombre (audit, bug 2 : 2,3 à 3,9:1 sur la lueur ; mesuré après, 5,8 à 8,8:1) */
html.lq .lq-hero.has-hi .journey-session-meta>.lq-ses,html.lq .lq-ses-copie{padding:5px 10px 5px 8px!important;border-radius:999px;background:rgba(16,8,64,.34)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)!important;color:#fff!important;font:700 12.5px/1.1 var(--ui)!important;white-space:nowrap}
html.lq .lq-hero .lq-ses-n{color:var(--sun-hi)}
html.lq .lq-hero .lq-ses.is-late{background:rgba(64,8,52,.36)!important;box-shadow:inset 0 0 0 1.5px rgba(255,179,199,.55)!important;color:#FFE3EA!important}
html.lq .lq-hero .lq-ses.is-late .lq-ses-n{color:#FFD3DE}
html.lq .lq-hero .lq-ses.is-late .lq-ses-ic{color:#FFB3C7}
/* La lueur jaune quitte le coin de l’étiquette et passe derrière le chat ; la pastille du module, plus sombre (4,4:1 avant) */
html.lq .lq-hero.is-lecon::before{background:radial-gradient(230px 200px at 90% 58%,rgba(255,216,107,.22),transparent 70%),
  linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/28px 28px}
html.lq .lq-hero.is-lecon .lq-hero-mod{background:rgba(16,8,64,.24);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)}
/* Le module, puis (faute de place sur la ligne du bonjour) l’étiquette de la séance */
html.lq .lq-a-kick{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0}
html.lq .lq-ses-copie{display:none;align-items:center;gap:6px}
html.lq .lq-ses-copie .lq-ses-ic{color:inherit}
html.lq .lq-hero.is-ses-bas .lq-ses-copie{display:inline-flex}
html.lq .lq-hero.is-ses-bas .lq-ses-copie .lq-ses-suf{display:none}
html.lq .lq-hero.is-ses-bas .lq-hero-hi .journey-session-meta{position:absolute!important;width:1px;height:1px;margin:0!important;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* La leçon : son titre en grand, sa vidéo, les points du module */
html.lq .lq-hero.is-lecon .lq-a-main{display:flex;align-items:center;gap:10px;margin-top:10px}
html.lq .lq-hero.is-lecon .lq-a-body{flex:1;min-width:0}
html.lq .lq-a-titre{margin:0;font:800 25px/1.05 var(--display);letter-spacing:-.025em;color:var(--sun-hi);text-wrap:balance;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:anywhere}
html.lq .lq-a-prog{margin-top:12px;max-width:240px}
html.lq .lq-a-bar{display:block;height:8px;border-radius:99px;background:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(20,10,60,.18);overflow:hidden}
html.lq .lq-a-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--sun),var(--sun-hi))}
html.lq .lq-a-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 7px;margin:8px 0 0;font:600 13px/1.25 var(--ui);color:rgba(255,255,255,.92);font-variant-numeric:tabular-nums}
html.lq .lq-a-bar+.lq-a-meta{margin-top:8px}
html.lq .lq-a-prog>.lq-a-meta:first-child{margin-top:0}
html.lq .lq-a-meta.is-ico svg{flex:none;width:18px;height:18px;color:var(--mint)}
html.lq .lq-a-pt{opacity:.6}
html.lq .lq-a-pos{margin-top:10px}
html.lq .lq-a-dots{display:inline-flex;flex-wrap:wrap;gap:4px}
html.lq .lq-a-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.24)}
html.lq .lq-a-dots i.is-done{background:var(--mint)}
html.lq .lq-a-dots i.is-cur{background:linear-gradient(90deg,var(--sun-hi) var(--pv,0%),rgba(255,255,255,.3) var(--pv,0%));box-shadow:0 0 0 2px rgba(255,216,107,.55)}
/* Le chat et sa pastille « Niv. 2 », à ses pieds (le nom du niveau se lit avec le bouton) */
html.lq .lq-hero.is-lecon .mascot-stk{width:78px;margin:0 -4px 0 0}
html.lq .mstk-niv.is-court{right:-6px;bottom:4px;rotate:-6deg;max-width:none}
html.lq .mstk-niv.is-court>i{margin-bottom:0}
html.lq .lq-hero.is-lecon .lq-hero-cta{margin-top:16px}
@media (max-width:360px){
  html.lq .lq-a-titre{font-size:22px}
  html.lq .lq-hero.is-lecon .mascot-stk{width:66px}
  html.lq .lq-hero.has-hi .journey-session-meta>.lq-ses,html.lq .lq-ses-copie{padding:4px 8px 4px 7px!important;gap:5px}
}
/* « Texte plus grand » (Mon compte › Confort de lecture) : la carte grandit d’un cran, sans casser ses titres */
html.lq[data-reading="large"] .lq-hero.is-lecon .lq-a-meta{font-size:15px;line-height:1.35}
html.lq[data-reading="large"] .lq-hero.has-hi .journey-session-meta>.lq-ses,html.lq[data-reading="large"] .lq-ses-copie{font-size:14px!important}
html.lq[data-reading="large"] .lq-hero.is-lecon .lq-cta-t small{font-size:15px!important}
html.lq[data-reading="large"] .lq-hero.has-hi p.lq-hi-title{line-height:1.2}
/* ---------- Accueil plus positif (Elisa, 7 novembre, 8 h 38, d'après sa maquette) ----------
   Le bonjour de l'heure et la main qui salue (« 👋 Bonjour, Elisa ! »), puis une phrase qui dit où on en est, son bout souligné en
   jaune ; plus de trait entre le bonjour et le module. Sous la carte, trois chiffres sur des cartes blanches en relief, jamais un zéro ;
   la carte des activités à rattraper a quitté l'accueil. */
html.lq .lq-hero.has-hi .lq-hero-hi{margin-bottom:4px;padding-bottom:0;border-bottom:0}
html.lq .lq-hi-mot{white-space:nowrap}
html.lq .lq-hi-wave{display:inline-block;transform-origin:72% 80%;animation:lqSalut 1.5s .45s ease-in-out both}
@keyframes lqSalut{0%,62%,100%{rotate:0deg}12%,36%{rotate:16deg}24%,48%{rotate:-8deg}}
html.lq .lq-hi-sub{position:relative;z-index:1;margin:0 0 14px;font:600 16px/1.3 var(--ui);color:rgba(255,255,255,.92);text-wrap:balance}
html.lq .lq-hi-u{padding-bottom:.12em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30' preserveAspectRatio='none'%3E%3Cpath d='M4 20C70 8 170 6 296 14' fill='none' stroke='%23FFC83D' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100%/100% .3em;white-space:nowrap}
html.lq .lq-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 14px;padding:0;list-style:none}
html.lq .lq-stats:has(>li:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
html.lq .lq-stat{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;align-content:start;gap:6px 7px;min-width:0;margin:0;padding:10px 10px 11px;border:2px solid var(--line);border-radius:18px;
  background:#fff;box-shadow:0 3px 0 var(--lip)}
html.lq .lq-stat-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#EFEAFF;color:var(--accent)}
html.lq .lq-stat-ic svg{display:block;width:17px;height:17px}
html.lq .lq-stat.is-coche .lq-stat-ic{background:#DCF6E9;color:#14935A}
html.lq .lq-stat.is-cartes .lq-stat-ic{background:#FFF1CC;color:#9A6300}
html.lq .lq-stat>b{min-width:0;font:800 21px/1 var(--display);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
html.lq .lq-stat>span:last-child{grid-column:1/-1;min-width:0;font:600 12px/1.25 var(--ui);color:var(--ink-2);text-wrap:balance}
@media (max-width:360px){
  html.lq .lq-hi-sub{font-size:15px}
  html.lq .lq-stats{gap:6px}
  html.lq .lq-stat{gap:5px 6px;padding:9px 8px 10px;border-radius:16px}
  html.lq .lq-stat-ic{width:26px;height:26px}
  html.lq .lq-stat-ic svg{width:15px;height:15px}
  html.lq .lq-stat>b{font-size:19px}
  html.lq .lq-stat>span:last-child{font-size:11.5px}
}
html.lq[data-reading="large"] .lq-hi-sub{font-size:17.5px}
html.lq[data-reading="large"] .lq-stat>span:last-child{font-size:13.5px}
@media (prefers-reduced-motion:reduce){html.lq .lq-hi-wave{animation:none}}
html.lq[data-motion="reduce"] .lq-hi-wave{animation:none}
/* ---------- La semaine en feu (Elisa, 7 novembre, 9 h 08 et 9 h 20 : « trop d'icônes feu ») ----------
   La semaine faite, le chat prend la place de la flamme de la carte, immobile (10 h 30 : « on ne met pas d'animation au niveau de la
   série du haut » ; la fête est sur la page « Bravo » de la flamme du jour, plus bas). */
html.lq .lq-streak.is-semaine .lq-streak-flame{position:relative;z-index:3;width:40px;height:40px;background:none!important;box-shadow:none!important;animation:none!important}
html.lq .lq-streak.is-semaine .lq-streak-flame::before,html.lq .lq-streak.is-semaine .lq-streak-flame::after{display:none}
html.lq .lq-streak-chat{display:block;width:34px;height:auto;margin:-12px auto -3px;pointer-events:none;-webkit-user-drag:none;user-select:none}
@media (max-width:360px){html.lq .lq-streak.is-semaine .lq-streak-flame{width:34px;height:34px}html.lq .lq-streak-chat{width:29px;margin-top:-10px}}
/* « Fier de sa semaine » (Elisa, 7 novembre, 12 h 47 : son GIF, la flamme tenue comme un trophée) : le buste remplit la case de la
   flamme, un rien plus grand qu'elle, pour rester lisible en tout petit */
html.lq .lq-streak-chat.is-trophee{width:44px;margin:-3px -2px -1px}
@media (max-width:360px){html.lq .lq-streak-chat.is-trophee{width:38px;margin:-3px -2px -1px}}

/* ---------- La flamme du jour : la page « Bravo » (Elisa, 7 novembre, 10 h 30 ; la DA du site) ----------
   Le violet du site, son quadrillage et ses lueurs ; le chat qui allume sa bougie (son GIF, détouré) sur une lueur jaune ; « Bravo ! »
   en étiquette soleil penchée ; le titre en blanc ; les sept jours de la semaine (celui du jour s'allume en dernier) ; ce qui reste ;
   un grand bouton jaune. Mouvement réduit : rien ne bouge, le chat est sa dernière image. */
html.lq .lq-flamme{position:fixed;inset:0;z-index:9985;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;overflow:auto;
  padding:calc(var(--safe-top,0px) + 20px) 22px calc(var(--safe-bottom,0px) + 20px);color:#fff;text-align:center;
  background:radial-gradient(280px 230px at 100% 0%,rgba(255,255,255,.18),transparent 70%),radial-gradient(320px 260px at 0% 100%,rgba(159,240,198,.16),transparent 70%),
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(170deg,#6E50F6 0%,#5538E6 48%,#4529CC 100%);animation:lqFlammeIn .3s ease-out both}
html.lq .lq-flamme.is-sort{animation:lqFlammeOut .22s ease-in both}
@keyframes lqFlammeIn{from{opacity:0}to{opacity:1}}
@keyframes lqFlammeOut{to{opacity:0}}
html.lq .lq-flamme-in{display:flex;flex-direction:column;align-items:center;width:100%;max-width:390px;margin:auto 0}
html.lq .lq-flamme-scene{position:relative;isolation:isolate;width:min(62vw,240px);margin:0 auto 4px}
html.lq .lq-flamme-scene::before{content:"";position:absolute;inset:4% -16% -2%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,216,107,.5),rgba(255,216,107,.14) 62%,rgba(255,216,107,0))}
html.lq .lq-flamme-chat{display:block;width:100%;height:auto;-webkit-user-drag:none;user-select:none;animation:lqFlammeChat .6s cubic-bezier(.34,1.56,.64,1) .08s both}
@keyframes lqFlammeChat{from{opacity:0;transform:translateY(22px) scale(.8) rotate(-5deg)}to{opacity:1;transform:none}}
html.lq .lq-flamme-bravo{display:inline-block;margin:0 0 12px;padding:7px 15px 6px;border:2.5px solid #fff;border-radius:12px;background:var(--sun);color:#1B1640;
  font:800 17px/1 var(--display);rotate:-4deg;box-shadow:0 3px 0 var(--sun-lip,#E0A100);animation:lqFlammeTag .5s cubic-bezier(.34,1.56,.64,1) .32s both}
@keyframes lqFlammeTag{from{opacity:0;transform:scale(.5) rotate(-12deg)}to{opacity:1;transform:none}}
html.lq .lq-flamme-t{margin:0;font:800 28px/1.08 var(--display);letter-spacing:-.025em;color:#fff;text-wrap:balance;animation:lqFlammeUp .45s cubic-bezier(.2,.8,.3,1) .42s both}
@keyframes lqFlammeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
html.lq .lq-flamme-sem{display:flex;justify-content:center;gap:8px;margin:20px 0 0;padding:0;list-style:none;animation:lqFlammeUp .45s cubic-bezier(.2,.8,.3,1) .55s both}
html.lq .lq-flamme-sem li{display:flex;flex-direction:column;align-items:center;gap:5px;margin:0}
html.lq .lq-flamme-sem i{display:grid;place-items:center;width:36px;height:36px;box-sizing:border-box;border-radius:50%;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.26)}
html.lq .lq-flamme-sem svg{width:19px;height:19px}
html.lq .lq-flamme-sem small{font:700 11px/1 var(--display);color:rgba(255,255,255,.72)}
html.lq .lq-flamme-sem .f-o,html.lq .lq-flamme-sem .f-i,html.lq .lq-flamme-sem .f-m{fill:rgba(255,255,255,.42)}
html.lq .lq-flamme-sem .is-done i{background:#fff;box-shadow:0 3px 0 rgba(27,22,64,.28)}
html.lq .lq-flamme-sem .is-done .f-o{fill:#FF8A3D}
html.lq .lq-flamme-sem .is-done .f-i{fill:#FFD23F}
html.lq .lq-flamme-sem .is-future i{background:transparent;box-shadow:none;border:2px dashed rgba(255,255,255,.42)}
html.lq .lq-flamme-sem .is-rest .f-m{fill:rgba(255,255,255,.6)}
html.lq .lq-flamme-sem .is-now i{box-shadow:0 0 0 3px var(--sun),0 3px 0 rgba(27,22,64,.28);animation:lqFlammeJour .6s cubic-bezier(.34,1.56,.64,1) 1.05s both}
html.lq .lq-flamme-sem .is-now small{color:#fff}
@keyframes lqFlammeJour{0%{transform:scale(.4)}60%{transform:scale(1.28)}100%{transform:none}}
html.lq .lq-flamme-d{margin:16px 0 0;font:600 17px/1.4 var(--ui);color:rgba(255,255,255,.93);text-wrap:balance;animation:lqFlammeUp .45s cubic-bezier(.2,.8,.3,1) .65s both}
html.lq .lq-flamme-d b{color:var(--sun-hi);font-weight:800}
html.lq .lq-flamme-ok{width:100%;min-height:54px;margin:28px 0 0;border:0;border-radius:18px;background:var(--sun);color:#1B1640;font:800 18px/1 var(--display);
  box-shadow:0 5px 0 var(--sun-lip,#E0A100);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s var(--press),box-shadow .12s var(--press);
  animation:lqFlammeUp .45s cubic-bezier(.2,.8,.3,1) .75s both}
html.lq .lq-flamme-ok:active{transform:translateY(4px);box-shadow:0 1px 0 var(--sun-lip,#E0A100)}
html.lq .lq-flamme-ok:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (max-width:360px){html.lq .lq-flamme{padding-left:16px;padding-right:16px}html.lq .lq-flamme-t{font-size:25px}html.lq .lq-flamme-sem{gap:5px}html.lq .lq-flamme-sem i{width:32px;height:32px}html.lq .lq-flamme-sem svg{width:17px;height:17px}}
@media (max-height:680px){html.lq .lq-flamme-scene{width:min(46vw,180px)}html.lq .lq-flamme-ok{margin-top:20px}}
@media (prefers-reduced-motion:reduce){html.lq .lq-flamme,html.lq .lq-flamme *{animation:none!important}}
html.lq[data-motion="reduce"] .lq-flamme,html.lq[data-motion="reduce"] .lq-flamme *{animation:none!important}

/* ---------- La semaine en feu : le feu de camp (Elisa, 10 novembre, 15 h 39 : « Le deuxième parfait », sa piste B) ----------
   La nuit tombe sur le violet ; les étoiles s'allument ; les flammes des jours faits glissent de l'arc et tombent une à une dans le
   foyer (0,17 s d'écart), qui grandit à chacune puis s'embrase ; braises qui montent ; le chat s'assoit ; le texte vient en dernier.
   Mouvement réduit (règles de .lq-flamme) : rien ne bouge, le feu est grand et les flammes restent dans l'arc. */
html.lq .lq-flamme.lq-feu{background:#16123F;animation:lqFlammeIn .3s ease-out both,lqFeuNuit .9s ease-in-out both}
@keyframes lqFeuNuit{from{background-color:#5538E6}to{background-color:#16123F}}
html.lq .lq-feu.is-sort{animation:lqFlammeOut .22s ease-in both}
html.lq .lq-feu::after{content:"";position:fixed;left:-20%;right:-20%;bottom:0;height:20%;z-index:-1;border-radius:50% 50% 0 0/22% 22% 0 0;background:#0E0B2C;pointer-events:none}
html.lq .lq-feu-ciel{position:fixed;inset:0;z-index:-1;pointer-events:none}
html.lq .lq-feu-ciel i{position:absolute;border-radius:50%;background:#FFF3CC;animation:lqFeuEtoile .5s ease-out calc(.35s + var(--e) * .08s) both,lqFeuScintille 2.6s ease-in-out calc(1.2s + var(--e) * .3s) infinite alternate}
@keyframes lqFeuEtoile{from{opacity:0;transform:scale(.2)}}
@keyframes lqFeuScintille{to{opacity:.45}}
html.lq .lq-feu .lq-flamme-in{position:relative;z-index:1}
html.lq .lq-feu-scene{position:relative;width:min(88vw,342px,37vh);aspect-ratio:342/390;margin:0 auto 6px}
html.lq .lq-feu-arc{position:absolute;inset:0;margin:0;padding:0;list-style:none}
html.lq .lq-feu-arc li{position:absolute;display:flex;flex-direction:column;align-items:center;gap:3px;margin:0;transform:translate(-50%,-50%)}
html.lq .lq-feu-arc svg{display:block;width:28px;height:28px}
html.lq .lq-feu-arc .f-o{fill:#FF8A3D}html.lq .lq-feu-arc .f-i{fill:#FFD23F}html.lq .lq-feu-arc .f-m{fill:rgba(255,255,255,.58)}
html.lq .lq-feu-arc small{font:700 12px/1 var(--display);color:#CFC8FF}
html.lq .lq-feu-arc .is-done{animation:lqFeuTombe .55s cubic-bezier(.55,0,.75,.4) calc(.7s + var(--k) * .17s) both}
@keyframes lqFeuTombe{to{left:57.3%;top:70%;opacity:0;transform:translate(-50%,-50%) scale(.3)}}
html.lq .lq-feu-foyer{position:absolute;left:33.9%;top:41%;width:46.8%;aspect-ratio:24/28;transform-origin:50% 92%;
  animation:lqFeuGrandit calc(var(--n) * .17s + .6s) cubic-bezier(.3,.7,.4,1) .75s both}
@keyframes lqFeuGrandit{from{transform:scale(.26)}}
html.lq .lq-feu-halo{position:absolute;inset:-14% -24% -8%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,138,61,.34),rgba(255,200,61,.12) 62%,rgba(255,200,61,0));
  animation:lqFeuHalo 1.7s ease-in-out 2.2s infinite alternate}
@keyframes lqFeuHalo{to{opacity:.7;transform:scale(.94)}}
html.lq .lq-feu-feu{position:relative;display:block;width:100%;height:100%;transform-origin:50% 92%;
  animation:lqFeuEmbrase .6s cubic-bezier(.34,1.56,.64,1) calc(.75s + var(--n) * .17s + .5s) both}
@keyframes lqFeuEmbrase{45%{transform:scale(1.14)}}
html.lq .lq-feu-feu path{transform-box:fill-box;transform-origin:50% 100%}
html.lq .lq-feu-feu .f1{fill:#FF6A2B;animation:lqFeuDanse 1.1s ease-in-out infinite alternate}
html.lq .lq-feu-feu .f2{fill:#FFC83D;animation:lqFeuDanse .8s ease-in-out .2s infinite alternate}
html.lq .lq-feu-feu .f3{fill:#FFF3CC;animation:lqFeuDanse .6s ease-in-out .1s infinite alternate}
@keyframes lqFeuDanse{to{transform:scale(.96,1.06) skewX(-2deg)}}
html.lq .lq-feu-braises{position:absolute;inset:0;pointer-events:none}
html.lq .lq-feu-braises i{position:absolute;left:calc(36% + var(--b) * 7%);top:38%;width:4px;height:4px;border-radius:50%;background:#FFC83D;opacity:0;
  animation:lqFeuBraise 1.9s ease-out calc(2.1s + var(--b) * .38s) infinite}
html.lq .lq-feu-braises i:nth-child(even){background:#FF8A3D;width:3px;height:3px}
@keyframes lqFeuBraise{0%{opacity:0}15%{opacity:1}100%{opacity:0;transform:translate(calc((var(--b) - 2) * 9px),-110px)}}
html.lq .lq-feu-buche{position:absolute;left:34.5%;top:88.2%;width:45.6%;height:4.6%;box-sizing:border-box;border:2px solid #4E2E17;border-radius:99px;background:#7A4A2A;rotate:-9deg}
html.lq .lq-feu-buche.is-2{background:#8E5A33;rotate:9deg}
html.lq .lq-feu-chat{position:absolute;left:0;top:62%;width:36.3%;height:auto;-webkit-user-drag:none;user-select:none;animation:lqFlammeChat .6s cubic-bezier(.34,1.56,.64,1) 1.9s both}
html.lq .lq-feu .lq-flamme-t{font-size:32px;animation-delay:2.15s}
html.lq .lq-feu .lq-flamme-d{color:#D9D4FF;animation-delay:2.3s}
html.lq .lq-feu-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:14px 0 0;animation:lqFlammeUp .45s cubic-bezier(.2,.8,.3,1) 2.45s both}
html.lq .lq-feu-pills span{padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.1);font:600 14px/1.2 var(--ui);color:#FFE9A8}
html.lq .lq-feu-pills .is-record{color:#9FF0C6}
html.lq .lq-feu .lq-flamme-ok{animation:lqFlammeUp .45s cubic-bezier(.2,.8,.3,1) 2.55s both}
html.lq .lq-feu-partage{width:100%;min-height:48px;margin:8px 0 0;border:0;border-radius:16px;background:transparent;color:#FFE9A8;font:600 16px/1 var(--ui);cursor:pointer;
  animation:lqFlammeUp .45s cubic-bezier(.2,.8,.3,1) 2.65s both}
html.lq .lq-feu-partage:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (max-width:360px){html.lq .lq-feu .lq-flamme-t{font-size:28px}html.lq .lq-feu-arc svg{width:24px;height:24px}}

/* Le coucou (Elisa, 7 novembre, 11 h 04 : son GIF) : plus large que l'autocollant, à la même hauteur sur la carte de la leçon */
html.lq .lq-hero.is-lecon .mascot-stk:has(.mstk-cat.is-coucou){width:92px;margin-right:-8px}
@media (max-width:360px){html.lq .lq-hero.is-lecon .mascot-stk:has(.mstk-cat.is-coucou){width:80px}}
/* Le chat au poisson (10 novembre, 8 h 29), plus large que le coucou : la même hauteur. */
html.lq .lq-hero.is-lecon .mascot-stk:has(.mstk-cat.is-poisson){width:104px;margin-right:-10px}
@media (max-width:360px){html.lq .lq-hero.is-lecon .mascot-stk:has(.mstk-cat.is-poisson){width:90px}}
/* Le « Bravo » (Elisa, 7 novembre, 11 h 31 : son GIF, il saute de joie, les bras en l'air) : le GIF porte la joie, l'autocollant
   ne se balance ni ne danse plus par-dessus ; à peu près la hauteur de l'autocollant (le GIF est plus large) */
html.lq .mascot-stk .mstk-cat.is-bravo,html.lq .mascot-stk:is(.is-hello,.is-intro,.is-party) .mstk-cat.is-bravo,html.lq .mascot-stk.is-party.is-hello .mstk-cat.is-bravo{animation:none}
html.lq .lv.is-win.end-in .lv-end-cat:has(.mstk-cat.is-bravo){animation:none}
html.lq .lv-end-top .mascot-stk:has(.mstk-cat.is-bravo){width:128px;margin:-8px -8px -6px -6px}
@media (max-height:700px){html.lq .lv-end-top .mascot-stk:has(.mstk-cat.is-bravo){width:100px}}
html.lq #scr-lesson .bravo-hero.bv .bv-stk.is-bravo{right:-10px;bottom:-22px;width:122px;animation:none}
/* « C'est parti ! » (Elisa, 7 novembre, 12 h 13 : son GIF, pouce levé puis il pointe devant lui) : le GIF bouge déjà, plus de
   balancement par-dessus ; il se colle toujours à l'arrivée et sautille au toucher */
html.lq .mascot-stk .mstk-cat.is-parti{animation:none}
html.lq .mascot-stk.is-intro .mstk-cat.is-parti{animation:mstkSlap .72s cubic-bezier(.2,.8,.3,1) .15s both}
html.lq .mascot-stk.is-hello .mstk-cat.is-parti{animation:mstkHello .95s cubic-bezier(.3,.7,.4,1) both}
/* « Il présente » (Elisa, 7 novembre, 12 h 20 : son GIF, il tend la patte vers le titre) : l'ouverture d'un cours. À la hauteur de
   l'autocollant, plus large (la patte tendue, à gauche) ; il ne flotte plus par-dessus son geste */
.lst-stk.is-presente{width:117px;animation:none}
.lst.lst-fit-2 .lst-stk.is-presente{width:104px}
.lst.lst-fit-3 .lst-stk.is-presente{width:88px}
/* « Diplômé » (Elisa, 7 novembre, 12 h 38 : son GIF, il lance sa toque et brandit son diplôme) : la fin du parcours et l'accueil du
   parcours terminé, à la hauteur de l'autocollant (le GIF est plus large) */
html.lq .lq-hero.is-complete .mascot-stk:has(.mstk-cat.is-diplome){width:104px;margin-right:-12px}
@media (max-width:360px){html.lq .lq-hero.is-complete .mascot-stk:has(.mstk-cat.is-diplome){width:84px;margin-right:-8px}}
html.lq .lv-fe .mascot-stk:has(.mstk-cat.is-diplome){width:104px}
/* À la fin du parcours, il fête en boucle : ni danse ni balancement par-dessus ; il arrive toujours d'un rebond (lvFeIn : sans lui,
   le chat et sa bulle « Bravo ! » restaient invisibles) */
html.lq .lv-fe .mascot-stk .mstk-cat.is-diplome,html.lq .lv-fe .mascot-stk:is(.is-hello,.is-party) .mstk-cat.is-diplome,html.lq .lv-fe .mascot-stk.is-party.is-hello .mstk-cat.is-diplome{animation:none}
html.lq .lv.end-in .lv-fe>.lv-end-cat:has(.mstk-cat.is-diplome){animation:lvFeIn .6s cubic-bezier(.2,.9,.3,1.3) .1s both}
/* Les GIF « bonus » (Elisa, 7 novembre, 12 h 54) : la loupe d'une recherche sans résultat, le chat qui dort un jour de repos, le
   chrono de la carte des défis ; à la place des pictos et autocollants, sans mouvement par-dessus le leur */
.chat-bonus{display:block;height:auto;max-width:none;pointer-events:none;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}
.chat-bonus.is-vide{width:86px;margin:0 auto 8px}
.chat-bonus.is-vide.is-petit{width:66px;margin-bottom:6px}
html.lq .dp-pause .dp-stk.is-dodo{width:94px;height:auto;margin:0 0 4px;rotate:0deg;animation:none}
html.lq .dp-pause.is-past .dp-stk.is-dodo{width:76px}
html.lq .dp-pause .dp-stk.is-dodo .chat-bonus{width:100%}
html.lq .room-head .room-chat{flex:none;width:80px;margin:-10px -4px -12px -6px;animation:lrStk .6s cubic-bezier(.3,.7,.3,1.35) .1s both}
@media (prefers-reduced-motion:reduce){html.lq .room-head .room-chat{animation:none}}
html[data-motion="reduce"].lq .room-head .room-chat{animation:none}
/* Ses deux autres GIF (Elisa, 7 novembre, 13 h 02) : la patte qui salue dans la question « Se déconnecter », le chat qui s'en va après
   la déconnexion (la page « À bientôt ! », du même violet que le « Bravo »), le jongleur de tables de la base vide de la console */
html.lq .lq-ask-stk.is-chat{width:96px;height:auto;margin-bottom:8px;rotate:0deg}
html.lq .lq-ask-stk.is-chat .chat-bonus{width:100%}
html.lq .lq-aurevoir{cursor:pointer}
html.lq .lq-aurevoir .lq-flamme-scene{width:min(54vw,210px)}
html.lq .lq-aurevoir .lq-flamme-chat{animation:lqFlammeChat .6s cubic-bezier(.34,1.56,.64,1) .08s both,lqAuRevoirPart .9s ease-in 5.05s both}
@keyframes lqAuRevoirPart{to{opacity:0;transform:translateX(16%)}}
html.lq .lq-aurevoir .lq-flamme-d{margin:10px 0 0;color:rgba(255,255,255,.88);font-size:16px;line-height:1.4}
html.lq .console-empty-ico.is-chat{width:112px;height:auto;margin:-8px auto 6px;border-radius:0;background:none}
html.lq .console-empty-ico.is-chat .chat-bonus{width:100%}
/* Six GIF de plus (Elisa, 7 novembre, 14 h 27). « Message envoyé ! » : l'avion en papier, une fois, à la place de la fusée (ni
   décollage ni flottement par-dessus son lancer). « Pas de réseau » : le téléphone levé, dans la feuille (.lq-ask-stk.is-chat). */
html.lq #scr-compte .ct-merci-stk.is-chat{width:128px;height:auto;margin:-10px 0 -2px;rotate:0deg;animation:none!important}
html.lq #scr-compte .ct-merci-stk.is-chat .chat-bonus{width:100%}
/* Le trophée levé sous les confettis : un défi tout trouvé, un nouveau record, une partie gagnée entre amis ; à droite du titre,
   qui lui laisse la place. 8 novembre, 10 h 24 (« Le chat est coupé ») : posé 12 px au-dessus du haut de l’écran, il passait sous la
   barre du haut dès que la marge de la page était plus petite (l’iPhone) ; il part maintenant du haut du contenu. Et la phrase sous
   le titre gardait sa marge de la leçon (#scr-lesson .l-sub, en !important) : elle passait sous le chat, elle s’arrête avant lui. */
html.lq #jeu-root>.jeu-fin-chat{position:absolute;top:0;right:-10px;z-index:1;width:116px;pointer-events:none}
html.lq #jeu-root>.jeu-fin-chat .chat-bonus{width:100%}
html.lq #jeu-root:has(>.jeu-fin-chat)>:is(h1,.l-sub){margin-right:100px!important}
@media (max-width:360px){html.lq #jeu-root>.jeu-fin-chat{width:96px}html.lq #jeu-root:has(>.jeu-fin-chat)>:is(h1,.l-sub){margin-right:82px!important}}
html.lq #jeu-root .jeu-nw{white-space:nowrap}
/* « En direct » pendant la manche, à plusieurs (8 novembre, 11 h 33 : « un mini-tableau de bord multijoueur », sous le titre du défi,
   avant la question). 12 h 48, « d’un niveau, pour que ce soit premium » : le bandeau violet des Défis (le dégradé profond, sa lèvre,
   la grille et ses lueurs), la pastille « en direct » qui bat, le verre clair ; en bas du bandeau, le commentateur, comme le bandeau
   d’une émission. 21 h 13 (« supprimer le Toi, etc., et mettre une couronne pour le premier avec un validé pour les autres ») : plus
   de tableau des scores accroché dessous, ni de flèche pour le déplier : la rangée des avatars dit tout. 21 h 29 (« la lignée des
   présents avec le nombre de points à côté du drapeau », « enlève le 0/1 », « laisser de l’espace entre les icônes », « homogénéiser
   le cadre ») : trois étages alignés sur le même bord (16 px) : la manche, puis « En direct » en légende et les présents espacés,
   chacun ses points à côté, puis le commentateur. */
html.lq #jeu-root .jeu-direct{position:relative;margin:14px 0 20px}
html.lq #jeu-root .jeu-direct-bande{position:relative;z-index:1;isolation:isolate;overflow:hidden;border-radius:22px;background:var(--deep);color:#fff;box-shadow:0 4px 0 #3420A6}
html.lq #jeu-root .jeu-direct-bande::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(200px 140px at 96% 0%,rgba(255,216,107,.28),transparent 70%),radial-gradient(180px 130px at 0% 100%,rgba(159,240,198,.16),transparent 70%),
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/22px 22px}
html.lq #jeu-root .jeu-direct-h{display:flex;align-items:center;gap:7px;margin:0;padding:13px 16px 0;color:#fff}
/* Le cadre de la manche (8 novembre, 17 h 48 : « mettre tout ce qu’il y a en haut aussi dans le cadre (manche, points, temps) de
   manière UI UX ») : la tête du bandeau ; un filet la sépare d’« En direct » ; seul, le bandeau n’a que sa tête. 20 h 15 (« on peut
   faire beaucoup mieux niveau UI UX, peut-être intégrer à l’intérieur un cadre avec point | chrono ») : à gauche « Manche 2 » en
   grand, « /3 » plus discret et, dessous, le niveau dans la pastille blanche des feuilles ; à droite, un seul cadre blanc à rebord :
   ce que vaut le défi (sa pièce, ses points, son « +25 » posé sur le coin) | le chrono, dans sa pastille soleil au bout, rouge les 30
   dernières secondes, son anneau qui bat. Une ligne de moins, rien d’empilé, le chrono à côté de ce qu’il fait baisser. */
html.lq #jeu-root .jeu-hud{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 12px 14px 16px}
html.lq #jeu-root .jeu-direct:not(.is-seul) .jeu-hud{box-shadow:inset 0 -1px 0 rgba(255,255,255,.14)}
html.lq #jeu-root .jeu-hud-g{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:7px}
html.lq #jeu-root .jeu-hud-m{min-width:0;color:#fff;font:800 21px/1.1 var(--display);letter-spacing:-.015em;white-space:nowrap}
html.lq #jeu-root .jeu-hud-m small{margin-left:1px;color:rgba(255,255,255,.62);font:800 15px/1 var(--display);letter-spacing:0}
html.lq #jeu-root .jeu-hud-g .dx-f-niv{flex:none}
html.lq #jeu-root .jeu-hud-box{position:relative;flex:none;display:flex;align-items:center;gap:2px;height:44px;margin-left:auto;padding:4px;box-sizing:border-box;
  border-radius:999px;background:#fff;box-shadow:0 3px 0 rgba(22,12,74,.45)}
html.lq #jeu-root .jeu-hud-box .jeu-val{position:static;height:36px;padding:0 9px 0 2px;border:0;border-radius:999px;background:none;box-shadow:none}
html.lq #jeu-root .jeu-hud-box .jeu-val-b{top:-9px;right:auto;left:-5px}
html.lq #jeu-root .jeu-hud-box .jeu-timer{height:36px;box-sizing:border-box;padding:0 12px 0 10px!important;font-size:17px!important;box-shadow:none}
html.lq #jeu-root .jeu-hud-box .jeu-timer.is-low{animation:jdChronoBat 1s ease-out infinite}
@keyframes jdChronoBat{0%{box-shadow:0 0 0 0 rgba(229,72,77,.55)}100%{box-shadow:0 0 0 7px rgba(229,72,77,0)}}
html.lq #jeu-root .jeu-direct.is-seul .jeu-hud{padding-bottom:15px}
/* Après un rechargement, le temps de retrouver sa partie : une ligne calme au milieu de l’écran (8 novembre, 18 h 01). */
html.lq #jeu-root .jeu-reprise{display:flex;align-items:center;justify-content:center;gap:10px;min-height:42vh;margin:0;color:var(--ink-2);font:600 15px/1.3 var(--ui)}
@media (max-width:380px){
  html.lq #jeu-root .jeu-hud{gap:8px;padding:13px 10px 13px 13px}
  html.lq #jeu-root .jeu-hud-m{font-size:19px}
  html.lq #jeu-root .jeu-hud-m small{font-size:14px}
  html.lq #jeu-root .jeu-hud-box .jeu-val{padding-right:7px}
  html.lq #jeu-root .jeu-hud .jeu-val small{display:none}
  html.lq #jeu-root .jeu-hud-box .jeu-timer{padding:0 10px 0 8px!important;font-size:16px!important}}
html.lq[data-reading="large"] #jeu-root .jeu-hud-m{font-size:23px}
/* La pastille « en direct » : un point menthe et son onde qui s’élargit */
html.lq #jeu-root .jeu-direct-live{position:relative;flex:none;width:8px;height:8px;margin:0 2px 0 1px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px rgba(159,240,198,.22)}
html.lq #jeu-root .jeu-direct-live::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--mint);opacity:0;animation:jdLive 1.6s ease-out infinite}
@keyframes jdLive{0%{opacity:.85;transform:scale(.45)}100%{opacity:0;transform:scale(1.25)}}
html.lq #jeu-root .jeu-direct-h>b{flex:none;color:rgba(255,255,255,.9);font:800 14px/1.2 var(--display);letter-spacing:0}
/* Les présents, espacés (plus d’avatars qui se chevauchent) : l’avatar cerclé de blanc (de menthe s’il a trouvé, de soleil s’il écrit
   ou teste) et, à côté de son drapeau, ses points de la partie, comme ceux du cadre blanc ; les tiens en soleil.
   21 h 58 (« montre-moi quand il y a 5 invités, dont moi ») : à cinq, la rangée passait à la ligne au hasard (4 + 1, puis 3 + 2 dès
   que les points grandissaient) et la 2e ligne ne tombait pas sous la 1re. Trois colonnes égales : chacun garde sa case quand ses
   points grandissent, les lignes s’alignent (3 + 2 à cinq), et entre deux lignes il y a la place d’une couronne. */
html.lq #jeu-root .jeu-direct-av{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:21px 10px;margin:0;padding:15px 14px 13px 16px}
html.lq #jeu-root .jd-j{display:flex;align-items:center;gap:11px;min-width:0}
html.lq #jeu-root .jeu-direct-av .jeu-av{position:relative;flex:none;width:30px;height:30px;border:2px solid #fff;font-size:13px;box-shadow:none!important}
/* Le nombre ne se coupe jamais ; l’unité, elle, passe à la ligne (cachée) si la case est trop étroite pour elle (gros caractères,
   quatre chiffres) au lieu de déborder sur le voisin */
html.lq #jeu-root .jd-j-pts{display:flex;flex-wrap:wrap;align-items:baseline;min-width:min-content;height:20px;overflow:hidden;
  color:#fff;font:800 14.5px/20px var(--display);letter-spacing:-.01em;white-space:nowrap;font-variant-numeric:tabular-nums}
html.lq #jeu-root .jd-j-pts small{color:rgba(255,255,255,.66);font:700 11.5px/20px var(--ui);letter-spacing:0}
@media (max-width:380px){html.lq #jeu-root .jd-j-pts small{display:none}}   /* comme « pts » dans le cadre blanc du chrono */
html.lq #jeu-root .jd-j.is-moi .jd-j-pts b{color:var(--sun-hi)}
html.lq #jeu-root .jd-j.is-ok>.jeu-av{border-color:var(--mint)}
html.lq #jeu-root .jd-j.is-test>.jeu-av{border-color:var(--sun);animation:jdRespire 1.1s ease-in-out infinite}
@keyframes jdRespire{0%,100%{transform:none;box-shadow:0 0 0 0 rgba(106,77,244,.35)}50%{transform:scale(1.07);box-shadow:0 0 0 4px rgba(106,77,244,.14)}}
html.lq #jeu-root .jd-j.is-ecrit>.jeu-av{border-color:var(--sun)}
/* 20 h 39 (« quand quelqu’un tape une requête, on a un … juste au-dessus de lui, et un validé aussi quand la personne a eu juste à la
   manche ») : sur la tête de l’avatar, la bulle blanche et ses trois petits points violets qui sautent tant qu’il écrit ; la coche
   menthe, cerclée de blanc, quand il a trouvé. Elle se pose (une fois) quand ça change. La rangée lui fait de la place en haut. */
html.lq #jeu-root .jd-av-b{position:absolute;left:calc(50% - 9px);bottom:calc(100% - 2px);z-index:1;display:flex;align-items:center;justify-content:center;gap:2px;width:18px;height:11px;
  box-sizing:border-box;border-radius:999px;background:#fff;box-shadow:0 1.5px 0 rgba(22,12,74,.4);font-style:normal;transform-origin:50% 100%;pointer-events:none}
html.lq #jeu-root .jd-av-b>b{flex:none;width:3px;height:3px;border-radius:50%;background:var(--accent);animation:jdBulle 1s ease-in-out infinite}
html.lq #jeu-root .jd-av-b>b:nth-child(2){animation-delay:.15s}
html.lq #jeu-root .jd-av-b>b:nth-child(3){animation-delay:.3s}
@keyframes jdBulle{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-2px);opacity:1}}
@keyframes jdPose{0%{opacity:0;transform:scale(.3)}100%{opacity:1;transform:none}}
html.lq #jeu-root .jd-av-b.is-ok{left:calc(50% - 7px);bottom:calc(100% - 4px);width:14px;height:14px;background:#2DB67C;color:#fff;box-shadow:0 0 0 2px #fff,0 2.5px 0 1px rgba(22,12,74,.32)}
html.lq #jeu-root .jd-av-b.is-ok svg{width:9px;height:9px}
html.lq #jeu-root .jd-av-b.is-neuf{animation:jdPose .55s cubic-bezier(.3,.7,.3,1.5) both}
/* 21 h 13 : la couronne, posée sur la tête du premier qui a trouvé (les suivants ont la coche) */
html.lq #jeu-root .jd-av-b.is-roi{left:calc(50% - 10px);bottom:calc(100% - 6px);width:20px;height:20px;background:none;box-shadow:none;rotate:-10deg}
html.lq #jeu-root .jd-av-b.is-roi svg{display:block;width:100%;height:100%}
/* 21 h 04 (« tu peux mettre les drapeaux ? ») : le drapeau au coin bas de l’avatar, comme ailleurs dans les défis, assez bas pour
   laisser lire l’initiale ; les points suivent, juste à côté de lui. */
html.lq #jeu-root .jeu-direct-av .jeu-av .jeu-flag{right:-6px;bottom:-5px;font-size:11px}
/* Le commentateur (8 novembre, 12 h 25), en bas du bandeau : une bande plus sombre, le texte blanc, les pseudos en soleil ; la
   phrase nouvelle monte en place, son pictogramme se pose (la croix secoue) */
html.lq #jeu-root .jeu-direct-dit{display:flex;align-items:center;min-height:34px;margin:0 12px 12px;padding:0 10px 0 8px;overflow:hidden;border-radius:13px;
  background:rgba(22,12,74,.32);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:rgba(255,255,255,.94);font:600 13.5px/1.3 var(--ui)}
html.lq #jeu-root .jd-dit-m{display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap}
html.lq #jeu-root .jd-dit-m>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
html.lq #jeu-root .jd-dit-m b{color:var(--sun-hi);font-weight:800}
html.lq #jeu-root .jd-dit-m small{color:rgba(255,255,255,.7);font:600 12.5px/1 var(--ui)}
html.lq #jeu-root .jd-dit-m.is-go{color:rgba(255,255,255,.8)}
html.lq #jeu-root .jd-dit-i{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.16);color:var(--mint);font-style:normal}
html.lq #jeu-root .jd-dit-i svg{width:12px;height:12px}
html.lq #jeu-root .jd-dit-m:is(.is-tete,.is-serie) .jd-dit-i{background:#FFF1C9}
html.lq #jeu-root .jd-dit-m:is(.is-tete,.is-serie) .jd-dit-i svg{width:15px;height:15px}
html.lq #jeu-root .jd-dit-m.is-ok .jd-dit-i{background:#2DB67C;color:#fff}
html.lq #jeu-root .jd-dit-m.is-tous .jd-dit-i{background:#2DB67C;color:#fff}   /* « Tout le monde a trouvé ! » (9 novembre, 9 h 04) */
html.lq #jeu-root .jd-dit-m.is-ko .jd-dit-i{background:#FFE1E1;color:#B4232C}
html.lq #jeu-root .jd-dit-m.is-monte .jd-dit-i{background:#DDF7EA;color:#1E7A4F}
html.lq #jeu-root .jd-dit-m.is-seul .jd-dit-i{color:#fff}
html.lq #jeu-root .jd-dit-m.is-minute{color:#FFC4C9}
html.lq #jeu-root .jd-dit-m.is-minute .jd-dit-i{background:#FFE1E1;color:#C42B36}
html.lq #jeu-root .jd-dit-b{flex:none;padding:1px 7px;border-radius:999px;background:var(--sun);box-shadow:0 2px 0 var(--sun-lip);color:var(--ink);font:800 12px/1.35 var(--display);font-style:normal}
html.lq #jeu-root .jd-dit-m.is-neuf{animation:jdDit .5s cubic-bezier(.2,.8,.25,1) both}
@keyframes jdDit{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
html.lq #jeu-root .jd-dit-m.is-neuf .jd-dit-i,html.lq #jeu-root .jd-dit-m.is-neuf .jd-dit-b{animation:jdPose .55s cubic-bezier(.3,.7,.3,1.5) .12s both}
html.lq #jeu-root .jd-dit-m.is-neuf.is-ko .jd-dit-i{animation:jdNon .6s cubic-bezier(.36,.07,.19,.97) .12s both}
@keyframes jdNon{0%{transform:scale(0)}30%{transform:scale(1.15)}45%{transform:translateX(-3px) rotate(-8deg)}60%{transform:translateX(3px) rotate(6deg)}75%{transform:translateX(-1px)}100%{transform:none}}
/* Une réaction jaillit de l’avatar de celui qui l’envoie : une bulle blanche qui monte et s’efface (1 s) */
html.lq #jeu-root .jd-react{position:absolute;z-index:6;display:grid;place-items:center;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#fff;
  box-shadow:inset 0 0 0 1.5px var(--line),0 3px 0 var(--lip);font-size:19px;line-height:1;pointer-events:none;animation:jdReact 1s cubic-bezier(.2,.8,.25,1) both}
@keyframes jdReact{0%{opacity:0;transform:translateY(6px) scale(.4)}22%{opacity:1;transform:translateY(-14px) scale(1.12)}70%{opacity:1;transform:translateY(-26px) scale(1)}100%{opacity:0;transform:translateY(-34px) scale(.92)}}
/* La dernière minute : le bandeau bat en rouge, la pastille « en direct » aussi */
html.lq #jeu-root .jeu-direct.is-urgent .jeu-direct-bande{animation:jdUrgent 1s ease-in-out infinite}
@keyframes jdUrgent{0%,100%{box-shadow:0 4px 0 #3420A6,0 0 0 2.5px #FF8F98}50%{box-shadow:0 4px 0 #3420A6,0 0 0 2.5px #E5484D,0 0 0 7px rgba(229,72,77,.2)}}
html.lq #jeu-root .jeu-direct.is-urgent .jeu-direct-live{background:#FF6B78;box-shadow:0 0 0 3px rgba(255,107,120,.25)}
html.lq #jeu-root .jeu-direct.is-urgent .jeu-direct-live::after{border-color:#FF6B78}
@media (max-width:360px){
  html.lq #jeu-root .jeu-direct-h{padding:12px 13px 0}
  /* Sur un petit écran : des avatars un peu plus petits, un peu moins d’espace */
  html.lq #jeu-root .jeu-direct-av{gap:19px 8px;padding:14px 11px 12px 13px}
  html.lq #jeu-root .jeu-direct-av .jeu-av{width:26px;height:26px;font-size:11.5px}
  html.lq #jeu-root .jd-j{gap:10px}
  html.lq #jeu-root .jd-j-pts{font-size:13.5px}
  html.lq #jeu-root .jeu-direct-av .jeu-av .jeu-flag{font-size:10px}
  html.lq #jeu-root .jeu-direct-dit{margin:0 10px 10px;font-size:12.5px}
}
html.lq[data-reading="large"] #jeu-root .jeu-direct-h>b{font-size:16px}
html.lq[data-reading="large"] #jeu-root .jd-j-pts{font-size:16.5px}
html.lq[data-reading="large"] #jeu-root .jeu-direct-dit{font-size:15px}
@media (prefers-reduced-motion:reduce){
  html.lq #jeu-root :is(.jeu-direct-av .jeu-av,.jd-dit-m,.jd-dit-m *,.jd-react,.jeu-direct.is-urgent .jeu-direct-bande),html.lq #jeu-root .jeu-direct-live::after{animation:none!important}
  html.lq #jeu-root .jeu-direct.is-urgent .jeu-direct-bande{box-shadow:0 4px 0 #3420A6,0 0 0 2.5px #E5484D}
  html.lq #jeu-root .jd-av-b,html.lq #jeu-root .jd-av-b>b{animation:none!important}
}
html.lq[data-motion="reduce"] #jeu-root :is(.jeu-direct-av .jeu-av,.jd-dit-m,.jd-dit-m *,.jd-react,.jeu-direct.is-urgent .jeu-direct-bande),html.lq[data-motion="reduce"] #jeu-root .jeu-direct-live::after{animation:none!important}
html.lq[data-motion="reduce"] #jeu-root .jeu-direct.is-urgent .jeu-direct-bande{box-shadow:0 4px 0 #3420A6,0 0 0 2.5px #E5484D}
html.lq[data-motion="reduce"] #jeu-root .jd-av-b,html.lq[data-motion="reduce"] #jeu-root .jd-av-b>b{animation:none!important}
/* « Réagir », posé en bas à droite de l’écran (8 novembre, 19 h 37 : « le Réagir, laisse-le en bas à droite, et il s’enlève quand on
   écrit dans l’endroit de la requête ») : la pastille violette à bord blanc et à rebord de « Un coup de patte ? », le sourire en
   soleil, fin (19 h 57 : « mets le bouton Réagir en plus fin »). Ouvert : la croix à sa place, les quatre réactions dans une bulle
   blanche à sa gauche, qui arrivent une à une. On écrit :
   il descend et s’efface. La pastille « Un coup de patte ? » là (.is-haut) : il monte au-dessus d’elle, et passe devant elle s’ils se
   croisent (19 h 49 : « faire en sorte que la pill Réagir soit au-dessus »). La manche garde de quoi défiler sous lui.
   20 h 39 (« le bouton Réagir, fais en sorte qu’il soit style glass et contour orange comme la DA de l’appli ») : une pastille de verre
   (blanc translucide, ce qui passe dessous est flouté), « Réagir » à l’encre. 21 h 13 (« je voulais dire ce jaune », la pastille
   « l’ordre compte ») : le contour soleil et son rebord doré, le sourire jaune cerclé d’encre ; la bulle des réactions, du même verre,
   au contour jaune pâle des cartes d’indice. */
html.lq .jeu-reagir{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(var(--safe-bottom,0px) + 22px);z-index:91;display:flex;align-items:center;gap:8px;
  transition:translate .28s cubic-bezier(.3,.7,.3,1),opacity .2s,visibility 0s}
html.lq .jeu-reagir.is-ecrit{opacity:0;visibility:hidden;translate:0 18px;pointer-events:none;transition:translate .2s ease-in,opacity .15s,visibility 0s .2s}
html.lq .jeu-reagir.is-haut:not(.is-ecrit){translate:0 -58px}
html.lq body:has(.viz.on) .jeu-reagir{opacity:0;visibility:hidden;pointer-events:none}
html.lq body:has(>.jeu-reagir) #jeu-root{padding-bottom:76px}
html.lq .jeu-reagir-b{order:2;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;margin:0;padding:0 14px 0 10px;border:2px solid var(--sun);border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.64));-webkit-backdrop-filter:blur(14px) saturate(1.8);backdrop-filter:blur(14px) saturate(1.8);
  color:var(--ink);font:800 13.5px/1 var(--display);box-shadow:inset 0 1px 0 #fff,0 3px 0 var(--sun-lip),0 10px 22px -12px rgba(224,161,0,.55);cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq .jeu-reagir-b:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #fff,0 1px 0 var(--sun-lip),0 6px 14px -10px rgba(224,161,0,.55)}
html.lq .jeu-reagir-b:focus-visible,html.lq .jeu-reagir-l button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
html.lq .jeu-reagir-b>svg{flex:none;width:18px;height:18px;color:var(--ink)}
html.lq .jeu-reagir-b>svg>circle:first-child{fill:var(--sun)}
html.lq .jeu-reagir-b>.jeu-reagir-x{display:none;width:15px;height:15px;color:var(--ink)}
html.lq .jeu-reagir.is-ouvert .jeu-reagir-b{width:38px;padding:0}
html.lq .jeu-reagir.is-ouvert .jeu-reagir-b>:not(.jeu-reagir-x){display:none}
html.lq .jeu-reagir.is-ouvert .jeu-reagir-b>.jeu-reagir-x{display:block}
html.lq .jeu-reagir-l{display:none;align-items:center;gap:4px;padding:4px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.66));-webkit-backdrop-filter:blur(14px) saturate(1.8);backdrop-filter:blur(14px) saturate(1.8);
  box-shadow:inset 0 0 0 2px #FBE5A6,0 4px 0 #F2D78B,0 14px 28px -14px rgba(27,22,64,.45)}
html.lq .jeu-reagir.is-ouvert .jeu-reagir-l{display:flex;transform-origin:right center;animation:jeuReagirTray .32s cubic-bezier(.3,1.35,.5,1) backwards}
html.lq .jeu-reagir-l button{display:grid;place-items:center;width:34px;height:34px;margin:0;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.78);font-size:18px;line-height:1;
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s var(--press),background .15s}
html.lq .jeu-reagir-l button:active{transform:scale(.84);background:var(--sun-soft)}
html.lq .jeu-reagir.is-ouvert .jeu-reagir-l button{animation:jeuReagirIn .42s cubic-bezier(.3,1.5,.5,1) calc(70ms + var(--i,0)*50ms) backwards}
html.lq .jeu-reagir.is-neuf .jeu-reagir-b>svg:first-child{animation:jeuReagirSalut 1.3s ease-in-out .9s 2}
@keyframes jeuReagirTray{0%{opacity:0;transform:scaleX(.4)}100%{opacity:1;transform:none}}
@keyframes jeuReagirIn{0%{opacity:0;transform:scale(.3)}100%{opacity:1;transform:none}}
@keyframes jeuReagirSalut{0%,62%,100%{rotate:0deg}12%{rotate:-16deg}26%{rotate:13deg}40%{rotate:-8deg}52%{rotate:4deg}}
@media (prefers-reduced-motion:reduce){html.lq .jeu-reagir,html.lq .jeu-reagir *{transition:none!important;animation:none!important}}
html.lq[data-motion="reduce"] .jeu-reagir,html.lq[data-motion="reduce"] .jeu-reagir *{transition:none!important;animation:none!important}
/* Les réactions en direct (18 h 36 : « voir la réaction des autres en temps réel sur l’écran avec leur pseudo ») : elles montent le long
   du bord droit de l’écran, comme dans un live, l’emoji dans sa bulle blanche à rebord, le pseudo dessous sur la couleur de son avatar ;
   elles passent par-dessus la page sans rien bloquer. En mouvement réduit : sur place, en fondu. */
html.lq .jeu-rl{position:fixed;top:64%;right:max(16px,env(safe-area-inset-right));z-index:8990;width:0;height:0;pointer-events:none}
html.lq .jeu-rl-b{position:absolute;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;translate:var(--x,0px) var(--y,0px);
  animation:jeuRl 2.8s cubic-bezier(.22,.7,.3,1) both}
html.lq .jeu-rl-e{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:#fff;font-size:27px;line-height:1;font-style:normal;
  box-shadow:inset 0 0 0 2px var(--line),0 3px 0 var(--lip),0 16px 28px -14px rgba(27,22,64,.5)}
html.lq .jeu-rl-n{position:relative;max-width:120px;margin-top:-8px;padding:3px 9px 4px;overflow:hidden;border-radius:999px;background:var(--accent);color:#fff;
  font:800 12px/1.15 var(--display);white-space:nowrap;text-overflow:ellipsis;box-shadow:0 2px 0 rgba(27,22,64,.22)}
html.lq .jeu-rl-b.is-suite .jeu-rl-e{width:42px;height:42px;font-size:23px}
/* 21 h 29 (« comme les réactions : les … avec le pseudo si quelqu’un écrit, la couronne avec le pseudo s’il a réussi, et validé avec le
   pseudo ») : ce qui se passe chez les autres monte dans la même bulle blanche : les trois petits points violets qui sautent, la
   couronne, la coche verte. */
html.lq .jeu-rl-b.is-ecrit .jeu-rl-e{display:flex;align-items:center;justify-content:center;gap:4px}
html.lq .jeu-rl-b.is-ecrit .jeu-rl-e>b{flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent);animation:jeuRlPoint 1s ease-in-out infinite}
html.lq .jeu-rl-b.is-ecrit .jeu-rl-e>b:nth-child(2){animation-delay:.15s}
html.lq .jeu-rl-b.is-ecrit .jeu-rl-e>b:nth-child(3){animation-delay:.3s}
@keyframes jeuRlPoint{0%,60%,100%{transform:none;opacity:.45}30%{transform:translateY(-4px);opacity:1}}
html.lq .jeu-rl-b.is-roi .jeu-rl-e svg{width:32px;height:32px}
html.lq .jeu-rl-b.is-ok .jeu-rl-e{color:#1E9E62}
html.lq .jeu-rl-b.is-ok .jeu-rl-e svg{width:26px;height:26px}
@media (prefers-reduced-motion:reduce){html.lq .jeu-rl-b.is-ecrit .jeu-rl-e>b{animation:none;opacity:1}}
html.lq[data-motion="reduce"] .jeu-rl-b.is-ecrit .jeu-rl-e>b{animation:none;opacity:1}
html.lq .jeu-rl-n[data-c="1"]{background:hsl(152 52% 40%)}
html.lq .jeu-rl-n[data-c="2"]{background:hsl(24 88% 52%)}
html.lq .jeu-rl-n[data-c="3"]{background:hsl(338 70% 52%)}
html.lq .jeu-rl-n[data-c="4"]{background:hsl(202 78% 44%)}
html.lq .jeu-rl-n[data-c="5"]{background:hsl(42 90% 44%)}
@keyframes jeuRl{0%{opacity:0;transform:translateY(16px) scale(.35)}10%{opacity:1;transform:translateY(-6px) scale(1.12)}18%{transform:translateY(-14px) scale(1)}
  45%{transform:translate(var(--s,10px),-74px)}74%{opacity:1;transform:translate(calc(var(--s,10px)*-.5),-132px)}100%{opacity:0;transform:translate(0,-176px) scale(.9)}}
@keyframes jeuRlCalme{0%{opacity:0}12%,80%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){html.lq .jeu-rl-b{animation:jeuRlCalme 2.8s ease both}}
html.lq[data-motion="reduce"] .jeu-rl-b{animation:jeuRlCalme 2.8s ease both}
/* Le fou rire, quand on touche le chat de l'accueil : le GIF tient dans le cadre de l'autocollant (posé en bas, un peu agrandi : le
   GIF garde de la place pour la roulade), sans balancement ni confettis par-dessus ; sa bulle « Hi hi, ça chatouille ! » */
html.lq .mascot-stk .mstk-cat.is-rire{object-fit:contain;object-position:50% 100%;scale:1.25;transform-origin:50% 100%;animation:none!important}
/* Au repos sur l’accueil (10 novembre) : la première image du fou rire, dans le même cadre que lui (le cadre du coucou) : pas de saut au toucher. */
html.lq .mascot-stk .mstk-cat.is-repos{aspect-ratio:289/352;object-fit:contain;object-position:50% 100%;scale:1.25;transform-origin:50% 100%}
/* Dans le cadre du chat au poisson : le rire et le repos à la même taille que lui. */
html.lq .mascot-stk .mstk-cat.is-poisson.is-repos{aspect-ratio:376/402;scale:1.12}
html.lq .mascot-stk .mstk-cat.is-poisson.is-rire{scale:1.12}
html.lq .mascot-stk.is-rire .mstk-bub.is-chatouille{animation:mstkBub 3.4s ease-out .3s both}
@media (prefers-reduced-motion:reduce){html.lq .mascot-stk.is-rire .mstk-bub.is-chatouille{opacity:1;transform:rotate(-6deg)}}
html.lq[data-motion="reduce"] .mascot-stk.is-rire .mstk-bub.is-chatouille{opacity:1;transform:rotate(-6deg)}
/* Huit GIF de plus (Elisa, 7 novembre, 15 h 38). « Encore un effort ! » : déçu, puis le poing levé, à la place de l'autocollant de la
   fin de leçon (à la hauteur du « Bravo »), sans balancement par-dessus */
html.lq .mascot-stk .mstk-cat.is-effort,html.lq .mascot-stk:is(.is-hello,.is-intro,.is-party) .mstk-cat.is-effort{animation:none}
html.lq .lv-end-top .mascot-stk:has(.mstk-cat.is-effort){width:120px;margin:-8px -8px -6px -6px}
@media (max-height:700px){html.lq .lv-end-top .mascot-stk:has(.mstk-cat.is-effort){width:96px}}
/* Le tableau de stickers vide : le chat colle un sticker, à gauche du texte */
html.lq .stk-empty.is-chat{flex-direction:row;gap:14px;padding:14px 18px;text-align:left}
html.lq .stk-empty.is-chat .stk-empty-chat{flex:none;width:clamp(78px,26%,112px)}
html.lq .stk-empty-t{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
html.lq .stk-empty.is-chat span{max-width:22ch}
/* « Nouvelle carte mémo ! » : le chat retourne la sienne, au coin bas droit de la carte (le texte de la carte est à gauche, le
   compteur en haut à droite) */
html.lq .mc-reveal-chat{position:absolute;z-index:3;right:-14px;bottom:-10px;width:calc(86px * var(--mc-fs,1));pointer-events:none}
@media (max-width:360px){html.lq .mc-reveal-chat{width:70px;right:-10px}}
html.lq .mc-reveal-chat .chat-bonus{width:100%}
html.lq .is-flipped .mc-reveal-chat{opacity:0;scale:.6;transition:opacity .2s,scale .2s}
/* Les indices des défis : eurêka, au bout de la ligne de l'indice (après les pastilles), sans grandir la ligne */
html.lq .coach-chat{flex:none;width:50px;margin:-16px -6px -14px -2px;pointer-events:none}
html.lq .coach-chat .chat-bonus{width:100%}
@media (max-width:360px){html.lq .coach-chat{display:none}}
/* « Ce que tu retiens » : eurêka à la place de l'ampoule */
html.lq #scr-lesson .bv-bulb.is-chat{width:60px;height:auto;margin:-14px 0 0 -6px;rotate:0deg;animation:none}
html.lq #scr-lesson .bv-bulb.is-chat .chat-bonus{width:100%}
/* Le parcours terminé : « Parcours / terminé » sur deux lignes (Elisa, 7 novembre, 10 h 25), dans une pastille aux coins arrondis */
html.lq .lq-hero.has-hi .journey-session-meta>.lq-ses.is-end{border-radius:14px;padding:6px 11px 6px 9px!important;line-height:1.12!important;text-align:left}
html.lq .lq-a-meta.is-ico{flex-wrap:nowrap;align-items:flex-start}
html.lq .lq-a-meta.is-ico>span{min-width:0}
html.lq .lq-a-meta.is-ico svg{margin-top:-1px}

/* ---------- Audit UI/UX de Mon compte, 6 novembre (Elisa, 10 h 13 : « reconstruise le petit cadre ») : direction B, « Le parcours dans l’ordre » ----------
   Contraste (bug 6 : « @elisa_sql » 3,2:1, « Constructeur de requêtes » 3,8:1, « Mon objectif : » 4,1:1, « Membre depuis le » 4,0:1, il faut
   4,5:1) : le haut de la carte un peu plus sombre, la lueur jaune descend derrière la progression, la grille s’efface sous le texte ; les
   textes secondaires passent à 92 % de blanc, le nom du niveau à une menthe plus claire. Mesuré après : 4,9 à 10:1. */
html.lq .acct-hero{background:linear-gradient(165deg,#6B4CF3 0%,#5236E2 52%,#4528CA 100%)!important}
html.lq .acct-hero::before{background:radial-gradient(260px 160px at 96% 100%,rgba(255,216,107,.2),transparent 70%),
  linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/26px 26px,linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 100% 0%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 100% 0%,#000 10%,transparent 75%)}
html.lq .acct-hero .acct-id-copy .acct-id-pseudo{color:rgba(255,255,255,.92)}
html.lq .acct-hero .acct-rang{color:#C2F7DA}
html.lq .acct-hero .acct-obj,html.lq .acct-hero .acct-depuis{color:rgba(255,255,255,.92)}
html.lq .acct-hero .acct-niv .lvl-k{opacity:.86}
html.lq .acct-hero .acct-chap-t small{color:rgba(255,255,255,.86)}
/* La barre du parcours, leçon par leçon dans l’ordre (acctParcoursHTML) : les validées en jaune, un trait entre deux modules, la leçon
   en cours cerclée de blanc (remplie de ce qui est vu de sa vidéo) et son repère dessous */
html.lq .acct-parc{position:relative;display:block;margin:2px 0 0;padding-bottom:9px}
html.lq .acct-parc-in{position:relative;display:block;height:12px;border-radius:99px;background:rgba(255,255,255,.2)}
html.lq .acct-parc-z,html.lq .acct-parc-y{position:absolute;left:5px;right:5px;top:0;bottom:0}
html.lq .acct-parc-y{top:auto;height:9px}
html.lq .acct-parc-z>i{position:absolute;top:0;bottom:0;display:block;background:var(--sun)}
html.lq .acct-parc-z>i.is-ici{z-index:1;min-width:8px;margin-left:-1px;top:-1px;bottom:-1px;border-radius:3px;background:linear-gradient(90deg,var(--sun-hi) var(--vu,0%),rgba(255,255,255,.7) var(--vu,0%));box-shadow:0 0 0 2px #fff}
html.lq .acct-parc-z>b{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:#3B25A8}
html.lq .acct-parc-ici{position:absolute;bottom:0;width:0;height:0;margin-left:-5px;border:5px solid transparent;border-top:0;border-bottom:6px solid #fff}
html.lq .acct-level-leg{margin:4px 0 0;font:600 13px/1.3 var(--ui);color:rgba(255,255,255,.92)}
/* Le module : « En cours » en jaune, « À commencer » en blanc ; tout le parcours fait : la coche menthe */
html.lq .acct-hero .acct-chap-k{color:var(--sun-hi);font-weight:800}
html.lq .acct-hero .acct-chap[data-etat="neuf"] .acct-chap-k{color:#fff}
html.lq .acct-fini{display:flex;align-items:center;gap:12px;margin:14px 0 0;padding:12px 0 0;border-top:1px solid rgba(255,255,255,.14)}
html.lq .acct-fini>span:last-child{display:flex;flex-direction:column;gap:3px}
html.lq .acct-fini b{font:700 18px/1.2 var(--display);color:#fff}
html.lq .acct-fini small{font:600 13px/1.3 var(--ui);color:rgba(255,255,255,.88)}
html.lq .acct-fini-ok{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--mint);color:#0E5B36}
html.lq .acct-fini-ok svg{width:18px;height:18px}
/* « Se déconnecter » et « Supprimer mon compte » : leur propre bloc, en bas ; sans chevron (elles ouvrent une confirmation, pas une page) */
html.lq #scr-compte .acct-compte-actions{margin-top:12px}
html.lq #scr-compte .acct-compte-actions .account-setting-row{grid-template-columns:40px minmax(0,1fr)!important}
/* « Texte plus grand » (Mon compte › Confort de lecture ; bug 7 : rien ne changeait sur la carte) : un cran de plus, comme la carte de l’accueil */
html.lq[data-reading="large"] .acct-hero .acct-id-copy .acct-id-pseudo{font-size:15.5px}
html.lq[data-reading="large"] .acct-hero .acct-rang{font-size:17px}
html.lq[data-reading="large"] .acct-hero .acct-obj{font-size:16px;line-height:1.35}
html.lq[data-reading="large"] .acct-hero .acct-niv{height:28px;font-size:16.5px;line-height:28px}
html.lq[data-reading="large"] .acct-hero .acct-niv .lvl-k{font-size:11.5px}
html.lq[data-reading="large"] .acct-hero .acct-level-head small{font-size:17.5px}
html.lq[data-reading="large"] .acct-hero .acct-level-head em{font-size:21px}
html.lq[data-reading="large"] .acct-hero .acct-chap-t small,html.lq[data-reading="large"] .acct-level-leg{font-size:15px}
html.lq[data-reading="large"] .acct-hero .acct-chap-t b,html.lq[data-reading="large"] .acct-fini b{font-size:20px}
html.lq[data-reading="large"] .acct-hero .acct-chap-go{width:40px;height:40px}
/* Direction C, « Niveau et parcours, deux mesures » (Elisa, 6 novembre, 11 h 12) : le niveau et le parcours côte à côte, chacun nommé.
   12 h 28 : tout le monde commence au même endroit, plus de leçons « acquises au départ » en hachures. */
html.lq .acct-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
html.lq .acct-tuile{min-width:0;padding:12px 12px 13px;border-radius:18px;background:rgba(20,10,60,.24)}
html.lq .acct-tuile>span[aria-hidden]{display:flex;flex-direction:column;gap:5px;min-width:0}
html.lq .acct-tuile small{font:700 12.5px/1.2 var(--ui);letter-spacing:.02em;color:rgba(255,255,255,.9)}
html.lq .acct-t-l{display:flex;align-items:center;min-height:30px}
html.lq .acct-hero .acct-tuile .acct-niv{height:28px;padding:0 12px;font-size:17px;line-height:28px}
html.lq .acct-tuile b{font:700 15px/1.25 var(--display);color:#fff;text-wrap:balance;overflow-wrap:break-word;-webkit-hyphens:manual;hyphens:manual}
html.lq .acct-t-niv>span>b{color:#C2F7DA}
html.lq .acct-tuile em{font:600 12.5px/1.3 var(--ui);font-style:normal;color:rgba(255,255,255,.9);text-wrap:balance}
html.lq .acct-tuile .acct-t-n{font:800 28px/1 var(--display);color:var(--sun-hi);letter-spacing:-.02em}
html.lq .acct-t-n i{font-style:normal;font-size:.7em}
html.lq .acct-sw{display:inline-block;width:14px;height:8px;margin-right:6px;border-radius:99px;vertical-align:1px}
html.lq .acct-sw.is-v{background:var(--sun)}
html.lq .acct-hero .acct-level-c{margin-top:10px}
html.lq .acct-level-c .acct-chap{margin-top:10px}
html.lq[data-reading="large"] .acct-tuile small,html.lq[data-reading="large"] .acct-tuile em{font-size:15px}
html.lq[data-reading="large"] .acct-tuile b:not(.acct-t-n){font-size:17px}
html.lq[data-reading="large"] .acct-tuile .acct-t-n{font-size:32px}
/* Texte plus grand sur un petit écran : les deux tuiles l’une sous l’autre, plutôt qu’un mot coupé */
@media (max-width:400px){html.lq[data-reading="large"] .acct-duo{grid-template-columns:1fr}}
@media (max-width:360px){
  html.lq .acct-duo{gap:8px}
  html.lq .acct-tuile{padding:11px 10px 12px}
  html.lq .acct-tuile .acct-t-n{font-size:25px}
  html.lq .acct-tuile>span>b{font-size:14px;letter-spacing:-.01em}
}

/* Le coefficient de chaque niveau sous son nom (Elisa, 6 novembre, 15 h 20) : ×1, ×2, ×4, dans la couleur de ses barres. */
html.lq .room-level .room-lv-x{display:inline-flex;align-items:center;justify-content:center;min-width:32px;padding:3px 9px;border-radius:99px;font:800 12.5px/1 var(--display);letter-spacing:.01em;font-variant-numeric:tabular-nums;background:var(--accent-soft);color:var(--accent-ink)}
html.lq .room-level.is-m .room-lv-x{background:#FDF1E2;color:var(--warn)}
html.lq .room-level.is-d .room-lv-x{background:#FDE8EA;color:var(--danger)}
html.lq .room-level.on .room-lv-x{background:#fff;box-shadow:0 1px 0 var(--lip)}
html.lq[data-reading="large"] .room-level .room-lv-x{font-size:14px;padding:4px 10px}
/* « Clore la manche dans 01:42 » (6 novembre, 16 h) : le bouton de l’hôte attend 2 min après le premier qui a trouvé */
html.lq .jeu-mini.is-attente{cursor:default;opacity:1;background:var(--surface-2);border-style:dashed;color:var(--ink-3);box-shadow:none}
html.lq .jeu-mini.is-attente:active{transform:none}
html.lq .jeu-mini.is-attente svg{color:var(--ink-3)}
html.lq .jeu-mini.is-attente b{font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink-2)}

/* ---------- 62. Cartes mémo : « Scène à collectionner » (Elisa, 6 novembre, direction A) ---------- */
/* ---------- 62. Cartes mémo : « Scène à collectionner » ----------
   Elisa, 6 novembre, 14 h 11 : « les cartes mémo doivent être super bien designées dans la DA du site internet ». Une seule carte, deux faces,
   la même partout (album, fiche, bilan, récompense) :
   - recto : la scène violette quadrillée du site, le numéro en autocollant jaune penché, le mot-clé en jaune, l'idée en blanc ;
   - verso : blanc, « À retenir » (ampoule et étiquette jaune), les trois points numérotés, la syntaxe, le piège.
   Toutes les tailles suivent « Texte plus grand » (--mc-fs). Le mot-clé s'ajuste à la largeur de la carte (--kn, posé par memoKw(), et les
   unités cqi) : jamais coupé dans un mot, de 320 px à 430 px. Rien ne bouge avec « Réduire les animations ». */
html.lq{--mc-fs:1;--mc-ink:#1B1640;--mc-key:#FFE08A;--mc-lip:#CFC4F7;--mc-grid:rgba(255,255,255,.05);
  --mc-face:linear-gradient(162deg,#5638E6 0%,#4C2FD8 54%,#3F25BE 100%)}
html.lq[data-reading="large"]{--mc-fs:1.15}

/* La carte (bouton dans l'album et au bilan, image dans la fiche) */
html.lq .mc{position:relative;display:grid;width:100%;min-width:0;margin:0;padding:0;border:0;border-radius:20px;background:none;box-shadow:none;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;container-type:inline-size;touch-action:manipulation}
html.lq .mc:focus-visible{outline:3px solid var(--accent-ink);outline-offset:4px}
html.lq .mc[role="img"]{cursor:default;touch-action:pan-y}

/* Recto : la scène */
html.lq .mc-face{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:5px;min-width:0;min-height:calc(148px * var(--mc-fs));padding:11px 12px 13px;
  border:3px solid #fff;border-radius:20px;background:var(--mc-face);color:#fff;
  box-shadow:0 5px 0 var(--mc-lip),0 18px 26px -20px rgba(40,20,140,.75);transition:transform .14s var(--press),box-shadow .14s var(--press)}
html.lq .mc-face::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(64% 46% at 106% -10%,rgba(255,216,107,.3),transparent 70%),radial-gradient(70% 50% at -10% 112%,rgba(159,240,198,.16),transparent 66%),
    linear-gradient(var(--mc-grid) 1px,transparent 1px) 0 0/18px 18px,linear-gradient(90deg,var(--mc-grid) 1px,transparent 1px) 0 0/18px 18px}
html.lq .mc-face::after{content:"";position:absolute;right:10px;bottom:10px;z-index:-1;width:13px;height:13px;opacity:.9;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 1c.9 6 4.9 10 11 11-6.1 1-10.1 5-11 11-.9-6-4.9-10-11-11 6.1-1 10.1-5 11-11Z'/%3E%3C/svg%3E") center/contain no-repeat}
html.lq button.mc:active .mc-face{transform:translateY(4px);box-shadow:0 1px 0 var(--mc-lip),0 10px 18px -16px rgba(40,20,140,.7)}
html.lq .mc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:calc(26px * var(--mc-fs))}
html.lq .mc-num{flex:none;display:inline-grid;place-items:center;min-width:34px;min-height:calc(24px * var(--mc-fs));padding:0 7px;box-sizing:border-box;border:2px solid #fff;border-radius:9px;
  background:var(--sun);color:var(--mc-ink);font:800 calc(12px * var(--mc-fs))/1 var(--mono);letter-spacing:.02em;box-shadow:0 2px 0 rgba(20,10,60,.35);rotate:-5deg}
html.lq .mc-k{display:block;margin-top:auto;color:var(--mc-key);font-family:var(--mono);font-weight:800;letter-spacing:-.02em;line-height:1.06;
  font-size:calc(17px * var(--mc-fs));font-size:clamp(12px,calc((100cqi - 30px) / (var(--kn,8) * .6)),calc(21px * var(--mc-fs)));
  text-wrap:balance;overflow-wrap:normal;word-break:normal;hyphens:manual}
html.lq .mc-k.is-mot{font-family:var(--display);letter-spacing:-.015em;line-height:1.08;font-size:clamp(12.5px,calc((100cqi - 30px) / (var(--kn,8) * .58)),calc(20px * var(--mc-fs)))}
html.lq .mc-t{display:block;padding-right:20px;font:600 calc(12.5px * var(--mc-fs))/1.3 var(--ui);color:#fff;text-wrap:pretty}
html.lq .mc-shine{position:absolute;top:-25%;bottom:-25%;left:0;z-index:2;width:46%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transform:translateX(-130%) skewX(-18deg)}

/* Album : deux cartes par ligne, toutes de la même taille */
html.lq .coll-grid.mc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:16px 12px;padding:8px 14px 18px;align-items:stretch}
@media (min-width:600px){html.lq .coll-grid.mc-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}}
@media (max-width:360px){html.lq .coll-grid.mc-grid{gap:14px 10px;padding:8px 11px 16px}html.lq .mc--album :is(.mc-face,.mc-back){padding:10px 10px 11px}}
html.lq #scr-collection.active .coll-module[open] .mc{animation:lqHubIn .42s cubic-bezier(.2,.8,.3,1.15) backwards;animation-delay:calc(.08s + var(--i,0) * .04s)}
html.lq #scr-collection.collection-static .mc{animation:none}
/* À l’appui, la carte s’enfonce et se retourne d’un rien : elle a deux faces */
html.lq button.mc--album:active :is(.mc-face,.mc-back){transform:perspective(600px) translateY(4px) rotateY(-10deg)}
/* Nouvelle, à revoir : l'étiquette penchée du site, posée sur le coin */
html.lq .mc-flag{position:absolute;z-index:3;top:-10px;right:-6px;display:inline-flex;align-items:center;gap:4px;padding:5px 8px 5px 7px;border:2px solid #fff;border-radius:10px;
  background:var(--sun);color:var(--mc-ink);font:800 calc(11.5px * var(--mc-fs))/1 var(--display);white-space:nowrap;box-shadow:0 3px 0 var(--sun-lip);rotate:6deg;pointer-events:none}
html.lq .mc-flag svg{width:13px;height:13px}
html.lq .mc-flag.is-new{padding:5px 9px;background:var(--mint);box-shadow:0 3px 0 #5FCB98}
html.lq .mc.is-due .mc-face{box-shadow:0 5px 0 var(--sun-lip),0 18px 26px -20px rgba(120,80,0,.6)}
html.lq button.mc.is-due:active .mc-face{box-shadow:0 1px 0 var(--sun-lip)}
/* Acquise : une pastille menthe cochée */
html.lq .mc-ok{position:absolute;z-index:3;top:9px;right:9px;display:grid;place-items:center;width:calc(24px * var(--mc-fs));height:calc(24px * var(--mc-fs));border:2px solid #fff;border-radius:50%;background:var(--mint);color:var(--mc-ink);box-shadow:0 2px 0 rgba(20,10,60,.35)}
html.lq .mc-ok svg{width:62%;height:62%}
/* À débloquer : le dos de la carte, lavande quadrillée, contour pointillé (3,7:1), cadenas autocollant, la leçon qui la donne */
html.lq .mc-back{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:4px;min-width:0;min-height:calc(148px * var(--mc-fs));padding:11px 12px 12px;
  border:3px solid #fff;border-radius:20px;background:var(--accent-soft);color:var(--ink);box-shadow:0 5px 0 var(--lip);transition:transform .14s var(--press),box-shadow .14s var(--press)}
html.lq .mc-back::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(106,77,244,.1) 1px,transparent 1px) 0 0/18px 18px,linear-gradient(90deg,rgba(106,77,244,.1) 1px,transparent 1px) 0 0/18px 18px}
html.lq .mc-back::after{content:"";position:absolute;inset:4px;border:2px dashed #7C5CFF;border-radius:14px;pointer-events:none}
html.lq button.mc:active .mc-back{transform:translateY(4px);box-shadow:0 1px 0 var(--lip)}
html.lq .mc-back .mc-num{border-color:#fff;background:#fff;color:var(--accent-ink);box-shadow:0 2px 0 var(--lip);rotate:0deg}
html.lq .mc-lock{display:block;width:calc(38px * var(--mc-fs));height:calc(38px * var(--mc-fs));margin:auto auto 4px;rotate:-6deg}
html.lq .mc-lock svg{display:block;width:100%;height:100%}
html.lq .mc-lesson{font:700 calc(13.5px * var(--mc-fs))/1.2 var(--display);font-size:clamp(11px,calc((100cqi - 32px) / (var(--kn,10) * .66)),calc(13.5px * var(--mc-fs)));color:var(--ink);text-wrap:balance;overflow-wrap:normal;hyphens:manual}

/* La grande carte (fiche, bilan) */
html.lq .mc--big{border-radius:26px}
html.lq .mc--big .mc-face{min-height:0;gap:8px;padding:16px 18px 18px;border-width:4px;border-radius:26px;box-shadow:0 6px 0 var(--mc-lip),0 26px 40px -26px rgba(40,20,140,.8);
  transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s ease-out}
html.lq .mc--big.is-tilt .mc-face{transition:transform .08s linear}
html.lq .mc--big.is-tilt .mc-shine{animation:none;transform:translateX(calc(var(--gx,50%) * 2.4 - 130%)) skewX(-18deg)}
html.lq .mc--big .mc-face::after{right:16px;bottom:16px;width:17px;height:17px}
html.lq .mc--big .mc-num{min-width:44px;min-height:calc(30px * var(--mc-fs));padding:0 9px;border-radius:10px;font-size:calc(14px * var(--mc-fs))}
html.lq .mc--big .mc-k{margin-top:16px;font-size:clamp(20px,calc((100cqi - 44px) / (var(--kn,8) * .6)),calc(40px * var(--mc-fs)))}
html.lq .mc--big .mc-k.is-mot{font-size:clamp(20px,calc((100cqi - 44px) / (var(--kn,8) * .58)),calc(36px * var(--mc-fs)))}
html.lq .mc--big .mc-t{padding-right:30px;font:650 calc(17px * var(--mc-fs))/1.3 var(--display)}
html.lq .mc-mod{display:inline-flex;align-items:center;min-width:0;max-width:calc(100% - 60px);padding:2px;border:1.5px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(27,22,64,.22);font:700 calc(12.5px * var(--mc-fs))/1.15 var(--display);color:#fff}
html.lq .mc-mod b{flex:none;padding:4px 8px;border-radius:999px;background:var(--mint);color:var(--mc-ink);font-weight:800}
html.lq .mc-mod span{min-width:0;padding:0 9px 0 7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Fiche : le recto, puis le verso blanc qui dépasse dessous */
html.lq .mc-fiche{display:grid}
html.lq .mc-fiche>.mc--big{position:relative;z-index:1}
html.lq .mc-verso{position:relative;margin:-22px 7px 0;padding:36px 16px 18px;border:2px solid var(--line);border-top:0;border-radius:0 0 24px 24px;background:#fff;box-shadow:0 5px 0 var(--lip);color:var(--ink)}
/* 7 novembre, 7 h 48 (« met juste un petit espace avant l’ampoule ») : dans la fiche, l’ampoule touchait le bas du recto violet ;
   12 px de plus sous le recto. */
html.lq .mc-fiche>.mc-verso{padding-top:48px}
html.lq .mc-h{display:flex;align-items:center;gap:6px;margin:0 0 4px -4px;outline:none}
html.lq .mc-h-stk{flex:none;width:calc(46px * var(--mc-fs));height:calc(46px * var(--mc-fs));margin:-10px -2px -8px 0;rotate:-8deg}
html.lq .mc-h-stk svg{position:relative;display:block;width:100%;height:100%}
/* L’ampoule se balance à l’ouverture de la fiche et se rallume au toucher (lqHeadPoke), comme sur l’ancienne fiche */
html.lq .mc-h-stk{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.lq .mc-h-stk::before{content:"";position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,rgba(255,216,107,.7),rgba(255,216,107,0) 64%);opacity:0;pointer-events:none}
html.lq .mc-h-stk.is-poke svg{animation:lqHeadPoke .6s var(--pop)}
html.lq .mc-h-stk.is-poke::before{animation:cdGlow 1s ease-out both}
html.lq #card-sheet.viz.on .mc-fiche .mc-h-stk{animation:cdSwing .9s var(--pop) .55s backwards}
html.lq #card-sheet.viz.on .mc-fiche .mc-h-stk::before{animation:cdGlow 1.3s ease-out .8s both}
html.lq .mc-h-tag{padding:6px 10px 5px;border:2px solid #fff;border-radius:11px;background:var(--sun);color:var(--mc-ink);font:800 calc(13px * var(--mc-fs))/1 var(--display);letter-spacing:.06em;text-transform:uppercase;box-shadow:0 3px 0 var(--sun-lip);rotate:-3deg}
html.lq .mc-pts{list-style:none;margin:0;padding:0;counter-reset:mc}
html.lq .mc-pts>li{position:relative;padding:10px 0 10px 38px;counter-increment:mc;font:500 calc(15.5px * var(--mc-fs))/1.5 var(--ui);color:var(--ink);text-wrap:pretty}
html.lq .mc-pts>li+li{border-top:1.5px dashed #E6E0F8}
html.lq .mc-pts>li::before{content:counter(mc);position:absolute;left:0;top:calc(10px + .1em);display:grid;place-items:center;width:calc(26px * var(--mc-fs));height:calc(26px * var(--mc-fs));box-sizing:border-box;
  border:2px solid var(--mc-ink);border-radius:50%;background:var(--sun);color:var(--mc-ink);font:800 calc(13px * var(--mc-fs))/1 var(--display);box-shadow:0 2px 0 rgba(27,22,64,.25)}
html.lq .mc-pts b{font-weight:750;background:linear-gradient(transparent 62%,rgba(255,200,61,.55) 62%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
html.lq :is(.mc-pts,.mc-piege) code{padding:1px 5px;border:1.5px solid #D9CFFF;border-radius:7px;background:#F4F0FF;color:#4528CA;font:700 .88em/1.3 var(--mono);box-shadow:0 2px 0 #D9CFFF;-webkit-box-decoration-break:clone;box-decoration-break:clone;white-space:nowrap}
html.lq :is(.mc-pts,.mc-piege) code.long{white-space:normal}
html.lq .mc-syn{position:relative;margin:18px 0 0;container-type:inline-size}
html.lq .mc-lab{position:absolute;z-index:3;left:12px;top:-12px;margin:0;padding:5px 9px 4px;border:2px solid #fff;border-radius:9px;background:var(--mint);color:var(--mc-ink);font:800 calc(11.5px * var(--mc-fs))/1 var(--display);letter-spacing:.06em;text-transform:uppercase;rotate:-3deg;box-shadow:0 2px 0 #5FCB98}
/* 30 signes par ligne au plus (contrat) : la police suit la largeur, aucune ligne ne défile, même à 320 px */
html.lq .mc-syn .ex-code.mc-code{margin:0;padding:22px 14px 14px!important;border-radius:16px;background:var(--code-bg)!important;color:var(--code-ink)!important;box-shadow:0 4px 0 #110E26;white-space:pre;word-break:normal;overflow-x:auto;
  font:500 13px/1.6 var(--mono);font-size:min(calc(14px * var(--mc-fs)),calc((100cqi - 30px) / 18.3))}
/* La copie (mountSqlCopyButtons) se pose à cheval sur le bord, comme l'étiquette : la syntaxe garde toute la largeur */
html.lq .mc-syn .sql-copy-wrap>.sql-copy{top:-15px;right:10px;width:38px;height:38px;border:2px solid #fff;border-radius:12px;background:var(--code-bg-2);color:#fff;box-shadow:0 3px 0 #110E26;-webkit-backdrop-filter:none;backdrop-filter:none}
html.lq .mc-nw{white-space:nowrap}
html.lq .mc-sgbd{margin:12px 4px 0;font:500 calc(14px * var(--mc-fs))/1.45 var(--ui);color:var(--ink-2);text-wrap:pretty}
html.lq .mc-sgbd .sgbd-link{font-weight:800}
html.lq .mc-piege{position:relative;margin:22px 0 0;padding:20px 14px 13px;border:2px solid #FFE08A;border-radius:16px;background:#FFF8E6;box-shadow:0 4px 0 #F1D68C}
html.lq .mc-piege-tag{position:absolute;left:10px;top:-14px;display:inline-flex;align-items:center;gap:6px;margin:0;padding:4px 10px 4px 4px;border:2px solid #fff;border-radius:10px;background:var(--mc-ink);color:var(--sun-hi);font:800 calc(12px * var(--mc-fs))/1 var(--display);letter-spacing:.06em;text-transform:uppercase;rotate:-3deg;box-shadow:0 3px 0 rgba(27,22,64,.25)}
html.lq .mc-piege-tag i{display:block;width:calc(22px * var(--mc-fs));height:calc(22px * var(--mc-fs));margin:-6px 0 -4px}
html.lq .mc-piege-tag svg{display:block;width:100%;height:100%}
html.lq .mc-piege p:last-child{margin:0;font:500 calc(15px * var(--mc-fs))/1.5 var(--ui);color:var(--ink);text-wrap:pretty}
html.lq #card-body .mc-fiche+.cd-actions{margin-top:22px}
@media (max-width:360px){html.lq .mc-verso{margin:-22px 4px 0;padding:34px 12px 16px}html.lq .mc-fiche>.mc-verso{padding-top:46px}html.lq .mc-syn .ex-code.mc-code{padding:22px 12px 12px!important;font-size:min(calc(14px * var(--mc-fs)),calc((100cqi - 26px) / 18.3))}}
/* Ouverture de la fiche (déclenchée par la personne) : la carte se pose, le reflet passe, le verso glisse dessous, les points arrivent */
@keyframes mcFlipIn{0%{opacity:0;transform:perspective(800px) rotateY(-70deg) scale(.88)}60%{opacity:1;transform:perspective(800px) rotateY(7deg) scale(1.02)}100%{opacity:1;transform:none}}
@keyframes mcRise{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
@keyframes mcPtIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
html.lq #card-sheet.viz.on .mc-fiche>.mc--big{animation:mcFlipIn .7s var(--pop) .05s backwards}
html.lq #card-sheet.viz.on .mc-fiche>.mc--big .mc-shine{animation:mcShine 1.1s ease-in-out .55s both}
html.lq #card-sheet.viz.on .mc-fiche>.mc-verso{animation:mcRise .42s cubic-bezier(.2,.8,.3,1.15) .3s backwards}
html.lq #card-sheet.viz.on .mc-fiche .mc-pts>li{animation:mcPtIn .4s cubic-bezier(.2,.8,.3,1.15) backwards;animation-delay:calc(.5s + var(--i,0) * .08s)}

/* Bilan : « Nouvelle carte mémo ! », la carte qu'on retourne. Garde la classe bravo-unlock (le bouton « Séance suivante » qui suit en dépend). */
html.lq #scr-lesson .bravo-unlock.mc-reveal{display:block;margin:6px 0 4px;text-align:center}
html.lq .mc-reveal-h{margin:0 0 16px;font:800 calc(26px * var(--mc-fs))/1.1 var(--display);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
html.lq .mc-reveal-h em{font-style:normal;color:var(--accent)}
/* Les deux faces dans la même case ; la boîte prend la hauteur de la face visible (--mc-h, mesurée par memoFlipFit()) */
html.lq .mc-flip{position:relative;display:grid;align-items:start;max-width:360px;height:var(--mc-h,auto);margin:0 auto;perspective:1400px;text-align:left;transition:height .55s cubic-bezier(.3,1.1,.5,1)}
html.lq .mc-flip>.mc-side{grid-area:1/1;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .7s cubic-bezier(.3,1.3,.5,1),visibility 0s linear .35s}
html.lq .mc-flip>.is-verso{transform:rotateY(180deg);visibility:hidden}
html.lq .is-flipped .mc-flip>.is-recto{transform:rotateY(-180deg);visibility:hidden}
html.lq .is-flipped .mc-flip>.is-verso{transform:none;visibility:visible}
html.lq .mc-flip .is-recto .mc-face{justify-content:center;min-height:calc(250px * var(--mc-fs));padding-top:52px;padding-bottom:30px}
html.lq .mc-flip .is-recto .mc-top{position:absolute;left:18px;top:16px}
html.lq .mc-flip .is-recto .mc-k{margin-top:0}
html.lq .mc-verso.is-card{margin:0;padding:16px 16px 14px;border-top:2px solid var(--line);border-radius:26px;box-shadow:0 6px 0 var(--lip)}
html.lq .mc-verso-top{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding-bottom:12px;border-bottom:1.5px dashed #E6E0F8}
html.lq .mc-verso-top .mc-num{rotate:-4deg}
html.lq .mc-k.is-mini{margin:0;color:var(--accent-ink);font-size:calc(17px * var(--mc-fs));line-height:1.15}
html.lq .mc-recto-btn{display:flex;align-items:center;gap:6px;min-height:44px;margin:14px auto 0;padding:0 16px;border:2px solid var(--line);border-radius:14px;background:#fff;color:var(--accent-ink);font:700 calc(14px * var(--mc-fs))/1 var(--display);box-shadow:0 3px 0 var(--lip);cursor:pointer}
html.lq .mc-recto-btn svg{width:17px;height:17px}
html.lq .mc-recto-btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
/* Le compteur de la collection, en pastille ronde comme « Série 3 jours » dans la vidéo du site */
html.lq .mc-seal{position:absolute;z-index:3;right:-8px;top:-18px;display:grid;place-items:center;align-content:center;gap:1px;width:calc(70px * var(--mc-fs));height:calc(70px * var(--mc-fs));border:4px solid #fff;border-radius:50%;
  background:var(--sun);color:var(--mc-ink);box-shadow:0 4px 0 rgba(27,22,64,.22),0 14px 24px -14px rgba(27,22,64,.5);rotate:12deg;pointer-events:none;transition:opacity .25s,scale .25s}
html.lq .mc-seal b{font:800 calc(24px * var(--mc-fs))/1 var(--display)}
html.lq .mc-seal small{font:800 calc(10px * var(--mc-fs))/1.1 var(--display);letter-spacing:.04em;text-transform:uppercase}
html.lq .is-flipped .mc-seal{opacity:0;scale:.6}
html.lq .mc-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin:18px auto 0;font:700 calc(14.5px * var(--mc-fs))/1.25 var(--display);color:var(--accent-ink)}
html.lq .mc-hint-ico{display:block;flex:none;width:18px;height:18px}
html.lq .mc-hint-ico svg{display:block;width:100%;height:100%}
html.lq .mc-hint .when-verso,html.lq .is-flipped .mc-hint .when-recto{display:none}
html.lq .is-flipped .mc-hint .when-verso{display:inline}
/* Arrivée de la carte au bilan, une seule fois, à sa première réussite (is-new, puis is-in quand le bloc entre à l'écran) */
@keyframes mcDeal{0%{opacity:0;transform:translateY(44px) rotate(-9deg) scale(.86)}62%{opacity:1;transform:translateY(-6px) rotate(1.5deg) scale(1.02)}100%{opacity:1;transform:none}}
@keyframes mcShine{from{transform:translateX(-130%) skewX(-18deg)}to{transform:translateX(260%) skewX(-18deg)}}
@keyframes mcPop{0%{opacity:0;transform:scale(.3) rotate(-30deg)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:none}}
@keyframes mcTurn{0%,62%,100%{rotate:0deg}80%{rotate:-200deg}}
@keyframes mcWobble{0%,100%{rotate:6deg}30%{rotate:-4deg}60%{rotate:9deg}}
@keyframes mcFloat{0%,100%{translate:0 0}50%{translate:0 -4px}}
html.lq .mc-reveal.is-new:not(.is-in) .mc-flip{opacity:0}
html.lq .mc-reveal.is-in .mc-flip{animation:mcDeal .8s var(--pop) both}
html.lq .mc-reveal.is-in .is-recto .mc-shine{animation:mcShine 1.1s ease-in-out .75s both}
html.lq .mc-reveal.is-in .mc-seal{animation:mcPop .5s var(--pop) 1s both}
html.lq .mc-reveal.is-in .mc-hint-ico{animation:mcTurn 3.2s ease-in-out 1.6s 2}
html.lq .mc.is-new .mc-shine{animation:mcShine 1.1s ease-in-out .4s both}
html.lq .mc.is-new .mc-flag{animation:mcPop .45s var(--pop) .2s both}
html.lq .mc.is-due .mc-flag{animation:mcWobble .9s ease-in-out .5s 1}

/* Récompense pendant la leçon : la mini-carte collée dans le coin du héros (le héros coupe ce qui dépasse : elle reste dedans) */
html.lq #scr-lesson .lv-hero.has-prize>.l-kicker{max-width:calc(100% - 68px)}
html.lq #scr-lesson .lv-hero.has-prize>h1{padding-right:64px}
html.lq .mc-prize{position:absolute;z-index:3;top:10px;right:12px;display:grid;justify-items:end;pointer-events:none;rotate:8deg;animation:mcFloat 5s ease-in-out 1s infinite}
html.lq .mc-prize-card{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-rows:auto 1fr;justify-items:center;align-items:center;width:48px;height:58px;padding:5px 4px 8px;box-sizing:border-box;
  border:3px solid #fff;border-radius:12px;background:var(--mc-face);box-shadow:0 4px 0 rgba(20,10,60,.35),0 12px 20px -12px rgba(10,4,60,.6)}
html.lq .mc-prize-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--mc-grid) 1px,transparent 1px) 0 0/12px 12px,linear-gradient(90deg,var(--mc-grid) 1px,transparent 1px) 0 0/12px 12px}
html.lq .mc-prize .mc-num{min-width:28px;min-height:19px;padding:0 4px;border-width:1.5px;border-radius:7px;font-size:10.5px;rotate:-4deg}
html.lq .mc-prize-ico{display:grid;place-items:center;width:25px;height:25px;font-style:normal}
html.lq .mc-prize-ico svg{display:block;width:100%;height:100%}
html.lq .mc-prize.is-won .mc-prize-ico{width:22px;height:22px;border:2px solid #fff;border-radius:50%;background:var(--mint);color:var(--mc-ink)}
html.lq .mc-prize.is-won .mc-prize-ico svg{width:64%;height:64%}
html.lq .mc-prize-t{margin:-12px -8px 0 0;padding:5px 8px;border:2px solid #fff;border-radius:9px;background:var(--sun);color:var(--mc-ink);font:800 12px/1 var(--display);white-space:nowrap;box-shadow:0 3px 0 var(--sun-lip);rotate:-7deg}
html.lq .mc-prize.is-won .mc-prize-t{background:var(--mint);box-shadow:0 3px 0 #5FCB98}

/* Réduire les animations : rien ne bouge (le retournement se fait d'un coup) */
@media (prefers-reduced-motion:reduce){
  html.lq :is(.mc,.mc-face,.mc-back,.mc-verso,.mc-pts>li,.mc-flip,.mc-flip>.mc-side,.mc-shine,.mc-seal,.mc-hint-ico,.mc-flag,.mc-prize,.mc-h-stk,.mc-h-stk>svg){animation:none!important;transition:none!important}
  html.lq .mc-h-stk::before{animation:none!important}
  html.lq .mc-shine{display:none}
  html.lq .mc--big .mc-face{transform:none}
  html.lq .mc-reveal.is-new:not(.is-in) .mc-flip{opacity:1}
}
html[data-motion="reduce"].lq :is(.mc,.mc-face,.mc-back,.mc-verso,.mc-pts>li,.mc-flip,.mc-flip>.mc-side,.mc-shine,.mc-seal,.mc-hint-ico,.mc-flag,.mc-prize,.mc-h-stk,.mc-h-stk>svg){animation:none!important;transition:none!important}
html[data-motion="reduce"].lq .mc-h-stk::before{animation:none!important}
html[data-motion="reduce"].lq .mc-shine{display:none}
html[data-motion="reduce"].lq .mc--big .mc-face{transform:none}
html[data-motion="reduce"].lq .mc-reveal.is-new:not(.is-in) .mc-flip{opacity:1}
html.lq .mc-lab .mc-dial{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px;background:var(--surface-2);color:var(--ink-2);font:700 11px/1.5 var(--ui);letter-spacing:0;text-transform:none;vertical-align:1px}

/* ---------- 63. Stickers : l’étiquette de rareté (Elisa, 6 novembre) ----------
   Sur sa capture de la planche : « Ne pas mettre sur le tableau mais « rare » ou « de collection » pour ceux difficile à avoir /
   Pour les stickers difficile à obtenir mettre : Légendaire (étiquette) qui gêne paa avec des étoile peut être sur l’étiquette en
   mode paillette ». Elle a choisi « Rare » (10 défis trouvés) et « Légendaire » (7 jours de suite, tous les modules).
   L’étiquette se colle sous la légende, un peu de travers comme « Nouveau » : jamais sur le dessin, le cadenas ni « Nouveau ».
   Rare : l’irisation des stickers holo. Légendaire : la scène violette, le jaune soleil des titres, les paillettes des stickers holo
   à paillettes et deux étoiles d’autocollant. Une fois le sticker gagné, paillettes et étoiles scintillent doucement (opacité et
   transformation seulement : rien à repeindre à chaque image) ; à gagner, elle est là aussi, immobile et sans paillettes. */
html.lq .stk-rar{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;margin:-3px 0 10px;padding:3px 7px;
  border:2px solid #fff;border-radius:99px;font:800 11px/1 var(--display);font-style:normal;letter-spacing:.01em;white-space:nowrap;pointer-events:none;rotate:-3deg}
html.lq .stk-rar.is-rare{background:linear-gradient(115deg,#FFB3D1 0%,#FFE7A3 28%,#B8F5CF 52%,#AEE4FF 76%,#D4C2FF 100%);color:#1B1640;box-shadow:0 2px 0 var(--lip)}
/* Le violet de la scène, sans son haut le plus clair : le jaune soleil y garde un contraste d’au moins 4,9:1 */
html.lq .stk-rar.is-leg{background:linear-gradient(165deg,#5538E6 0%,#4528CA 100%);color:var(--sun-hi);box-shadow:0 2px 0 #3A22B0;text-shadow:0 1px 0 rgba(27,22,64,.45)}
/* Les paillettes : deux couches de la même tuile, décalées, qui s’allument tour à tour */
html.lq .stk-rar.is-leg::before,html.lq .stk-rar.is-leg::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--glit) 0 0/64px 64px;mix-blend-mode:screen;opacity:.8;pointer-events:none}
html.lq .stk-rar.is-leg::after{background-position:29px 13px;background-size:52px 52px;opacity:.45}
html.lq .stk-rar.is-leg.is-lock::before,html.lq .stk-rar.is-leg.is-lock::after{display:none}
/* Deux étiquettes voisines ne scintillent pas en même temps : chaque case a son rang (--i, posé par renderStickers) */
html.lq .stk-rar.is-leg:not(.is-lock)::before{animation:stkRarGlit 2.6s ease-in-out calc(var(--i,0) * -.9s) infinite}
html.lq .stk-rar.is-leg:not(.is-lock)::after{animation:stkRarGlit 2.6s ease-in-out calc(var(--i,0) * -.9s - 1.3s) infinite}
@keyframes stkRarGlit{0%,100%{opacity:.15}50%{opacity:1}}
/* Les étoiles, à cheval sur deux coins de l’étiquette */
html.lq .stk-rar-sp{position:absolute;z-index:1;display:block;width:13px;height:13px;pointer-events:none}
html.lq .stk-rar-sp svg{display:block;width:100%;height:100%}
html.lq .stk-rar-sp:first-of-type{left:-6px;top:-7px}
html.lq .stk-rar-sp+.stk-rar-sp{right:-5px;bottom:-6px;width:10px;height:10px}
html.lq .stk-rar.is-leg:not(.is-lock) .stk-rar-sp{animation:stkRarStar 2.8s ease-in-out calc(var(--i,0) * -.9s) infinite}
html.lq .stk-rar.is-leg:not(.is-lock) .stk-rar-sp+.stk-rar-sp{animation-delay:calc(var(--i,0) * -.9s - 1.4s)}
@keyframes stkRarStar{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.6) rotate(24deg)}}
/* iPhone SE (320 px) : trois étiquettes côte à côte, un peu plus fines, pour que les étoiles voisines ne se touchent pas */
@media (max-width:359px){html.lq .stk-rar{padding:3px 6px;font-size:10.5px}html.lq .stk-rar-sp:first-of-type{left:-5px}html.lq .stk-rar-sp+.stk-rar-sp{right:-4px}}
/* Mouvement réduit : l’étiquette reste telle quelle, immobile */
@media (prefers-reduced-motion:reduce){html.lq .stk-rar::before,html.lq .stk-rar::after,html.lq .stk-rar-sp{animation:none!important}}
html.lq[data-motion="reduce"] .stk-rar::before,html.lq[data-motion="reduce"] .stk-rar::after,html.lq[data-motion="reduce"] .stk-rar-sp{animation:none!important}
/* Dans la fiche (Elisa, 6 novembre, 22 h : « Étiquette à paillettes ») : la même étiquette, un peu plus grande, remontée sous le grand
   sticker, dans le bas de sa scène ; le doigt passe au travers, la scène s’incline toujours. */
html.lq .stk-rar-fiche{position:relative;margin:-30px 0 18px;line-height:1;pointer-events:none}
html.lq .stk-rar-fiche .stk-rar{margin:0;padding:5px 11px;font-size:14px}
html.lq .stk-rar-fiche .stk-rar-sp:first-of-type{left:-8px;top:-9px;width:17px;height:17px}
html.lq .stk-rar-fiche .stk-rar-sp+.stk-rar-sp{right:-7px;bottom:-8px;width:13px;height:13px}

/* Défis, relecture d’Elisa (7 novembre, 21 h 44) : des textes plus courts, les actions principales plus évidentes, et des liens entre
   Jouer, Classement et Joueurs (la fiche d’un joueur). */
/* « Niveau », et ce que rapporte un niveau plus dur, sur la même ligne ; les multiplicateurs plus visibles (« ×2 pts »). */
html.lq #scr-defis .dx-niv-tete{display:flex;align-items:baseline;justify-content:space-between;gap:4px 10px;flex-wrap:wrap;margin:0 0 12px}
html.lq #scr-defis .dx-niv-tete .jeu-lab{margin:0}
html.lq #scr-defis .dx-niv-plus{color:var(--accent-ink);font:800 12px/1.3 var(--ui)}
html.lq .room-level .room-lv-x{gap:2px;min-width:44px;padding:4px 10px;font-size:15px}
html.lq .room-level .room-lv-x small{font:800 10.5px/1 var(--ui);letter-spacing:.02em;opacity:.85}
html.lq[data-reading="large"] .room-level .room-lv-x{font-size:16px;padding:5px 11px}
@media (max-width:350px){html.lq .room-level .room-lv-x{min-width:0;padding:3px 7px;font-size:13.5px}html.lq .room-level .room-lv-x small{font-size:9.5px}}
/* Les deux tuiles sous « ou » : un seul libellé, un peu plus grand. */
html.lq #scr-defis .dx-act b{font-size:14.5px;line-height:1.2}
/* Les états vides : un titre qui donne envie, puis la phrase. */
html.lq #scr-defis .dx-vide-bloc{margin:6px 2px 2px}
html.lq #scr-defis .dx-vide-t{margin:0 0 4px;color:var(--ink);font:800 16px/1.3 var(--display);letter-spacing:-.01em}
html.lq #scr-defis .dx-vide-bloc .perf-top-msg,html.lq #scr-defis .dx-vide-bloc .dx-vide{margin:0}
/* « Jouer un défi », sous ta place. */
html.lq #scr-defis .dx-cls-go{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px}
/* Une ligne qui ouvre une fiche : son nom est un bouton (clavier, lecteur d’écran), qui garde l’allure du texte. */
html.lq #scr-defis button.dx-t-btn{margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.lq #scr-defis button.dx-t-btn:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:8px}
/* La fiche d’un joueur : son avatar dans l’autocollant, ses chiffres en trois tuiles, votre face-à-face. */
html.lq .dx-feuille .dx-fiche-av{display:grid;place-items:center;padding:0;background:#fff}
html.lq .dx-feuille .dx-fiche-av>.jeu-av{position:relative;width:46px;height:46px;font-size:20px;rotate:7deg}
/* Toujours deux tuiles (ses points, ses parties). En « auto-fit », la phrase « Pas de connexion » (sur toute la largeur) gardait des
   centaines de pistes de 1 px : les deux tuiles s’écrasaient à gauche (vu le 8 novembre, sans réseau). */
html.lq .dx-feuille .dx-fiche-kpi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:16px 0 0}
html.lq .dx-feuille .dx-fiche-kpi>div{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:12px 6px 10px;border:2px solid var(--card-border);border-radius:16px;background:#fff;box-shadow:0 3px 0 var(--lip)}
html.lq .dx-feuille .dx-fiche-kpi b{color:var(--ink);font:800 20px/1.1 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
html.lq .dx-feuille .dx-fiche-kpi small{color:var(--ink-2);font:700 12px/1.2 var(--ui)}
html.lq .dx-feuille .dx-fiche-err{grid-column:1/-1;margin:2px 2px 0;color:var(--ink-2);font:600 12.5px/1.4 var(--ui)}
html.lq .dx-feuille .dx-fiche-h2h{margin:12px 2px 0;color:var(--ink-2);font:600 13px/1.4 var(--ui);text-align:center}
/* Tes adversaires : « Inviter un ami » (8 novembre, 14 h 48 : on se retrouve avec un code, le seul bouton). */
html.lq #scr-defis .dx-amis .dx-duo{flex-direction:column;gap:10px}
html.lq #scr-defis .dx-amis .dx-duo .dx-sec{flex:none;width:100%}
html.lq #scr-defis .dx-sec.is-main{border-color:var(--accent);background:var(--accent);box-shadow:0 3px 0 var(--accent-lip);color:#fff}
html.lq #scr-defis .dx-sec.is-main:active{box-shadow:0 1px 0 var(--accent-lip)}
html.lq #scr-defis .dx-sec.is-main.on{background:var(--accent-soft);color:var(--accent-ink);box-shadow:0 3px 0 var(--lip)}
/* Tes adversaires, vide (7 novembre, 22 h 13) : la mascotte qui salue, centrée au-dessus de la phrase. */
html.lq #scr-defis .dx-vide-bloc.is-amis{margin:2px 2px 0;text-align:center}
html.lq #scr-defis .dx-vide-bloc.is-amis .chat-bonus{display:block;width:96px;height:auto;margin:0 auto 8px}
html.lq #scr-defis .dx-vide-bloc.is-amis .dx-vide{max-width:300px;margin:0 auto}
/* La fiche, 22 h 19 : le face-à-face lisible (ses victoires sous son pseudo, les tiennes sous « Toi »), « 4 confrontations » qui déplie
   vos dernières parties (gagnée, perdue, tes points contre les siens). */
html.lq .dx-feuille .dx-fiche-duel{margin:10px 0 0;padding:12px 12px 8px;border:2px solid var(--card-border);border-radius:18px;background:#fff;box-shadow:0 3px 0 var(--lip);text-align:center}
html.lq .dx-feuille .dx-fiche-duel.is-up{border-color:#BFE8CF;background:#F6FCF8}
html.lq .dx-feuille .dx-fiche-duel.is-down{border-color:#F6CDD0;background:#FFF8F8}
html.lq .dx-feuille .dx-duel-score{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:4px 10px}
html.lq .dx-feuille .dx-duel-score>span{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
html.lq .dx-feuille .dx-duel-score b{color:var(--ink-2);font:800 34px/1 var(--display);font-variant-numeric:tabular-nums}
html.lq .dx-feuille .dx-duel-score .is-tete b{color:var(--ink)}
html.lq .dx-feuille .dx-fiche-duel.is-up .dx-duel-score .is-tete b{color:#0F7A3A}
html.lq .dx-feuille .dx-fiche-duel.is-down .dx-duel-score .is-tete b{color:#C2323A}
html.lq .dx-feuille .dx-duel-score small{max-width:100%;overflow:hidden;color:var(--ink-2);font:800 13px/1.2 var(--ui);text-overflow:ellipsis;white-space:nowrap}
html.lq .dx-feuille .dx-duel-score>i{padding-top:4px;color:var(--ink-3);font:800 26px/1 var(--display);font-style:normal}
html.lq .dx-feuille .dx-duel-voir{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:36px;margin:6px auto 0;padding:4px 10px;border:0;border-radius:10px;background:none;color:var(--ink-2);font:700 13px/1.2 var(--ui)}
html.lq .dx-feuille button.dx-duel-voir{color:var(--accent-ink);cursor:pointer}
html.lq .dx-feuille button.dx-duel-voir svg{width:15px;height:15px;transition:rotate .2s}
html.lq .dx-feuille button.dx-duel-voir[aria-expanded="true"] svg{rotate:90deg}
html.lq .dx-feuille .dx-duel-liste{display:flex;flex-direction:column;gap:6px;margin:6px 0 4px;padding:0;list-style:none;text-align:left}
html.lq .dx-feuille .dx-duel-plus[hidden]{display:none}
html.lq .dx-feuille .dx-duel-liste li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:2px 10px;padding:8px 10px;border-radius:12px;background:#F7F5FE}
html.lq .dx-feuille .dx-duel-liste b{font:800 13.5px/1.2 var(--ui)}
html.lq .dx-feuille .dx-duel-liste li.is-w b{color:#0F7A3A}
html.lq .dx-feuille .dx-duel-liste li.is-l b{color:#C2323A}
html.lq .dx-feuille .dx-duel-liste li.is-e b{color:var(--ink-2)}
html.lq .dx-feuille .dx-duel-liste span{color:var(--ink);font:700 13px/1.3 var(--ui);text-align:right}
html.lq .dx-feuille .dx-duel-liste small{grid-column:1/-1;color:var(--ink-2);font:600 12px/1.3 var(--ui)}
html.lq .dx-feuille .dx-duel-note{margin:2px 2px 4px;color:var(--ink-3);font:600 12px/1.4 var(--ui)}
@media (prefers-reduced-motion:reduce){html.lq .dx-feuille button.dx-duel-voir svg{transition:none}}
/* « Aucune salle disponible », remonté à côté de « Rejoins une partie » (7 novembre, 22 h 29) : la même pastille que « 2 en direct », en gris. */
html.lq #scr-defis .dx-rj-tete{flex-wrap:wrap;row-gap:6px}
html.lq #scr-defis .dx-live.is-off{background:#F1EEFB;color:var(--ink-2)}
html.lq #scr-defis .dx-live.is-off::before{content:none}

/* La barre collée du chrono (Elisa, 8 novembre, 23 h 44 : « corrige : À corriger en premier », la relecture des défis : « la barre
   manche / points / chrono défile avec la page ») : le cadre du haut sorti de l’écran, sa version compacte reste collée sous
   l’en-tête, et monte avec lui quand il s’efface. Le bandeau violet en pilule, « Manche 1/3 » à gauche, le cadre blanc points | chrono
   à droite. Elle ne prend aucune place (ancre de hauteur nulle) et laisse passer les touchers. */
html.lq .jeu-collee-ancre{position:sticky;top:var(--jeu-collee-top,0px);z-index:19;height:0;margin:0!important;padding:0!important;pointer-events:none;
  transition:transform .24s var(--spring-ios,ease)}
html.lq #scr-lesson:has(.navbar.nav-away) .jeu-collee-ancre{transform:translateY(calc(var(--safe-top,0px) - var(--jeu-collee-top,0px)))}
html.lq .jeu.jeu-cascade>.jeu-collee-ancre{animation:none!important}
html.lq .jeu-collee{position:absolute;left:0;right:0;top:8px;display:flex;align-items:center;gap:10px;height:50px;padding:0 5px 0 16px;box-sizing:border-box;
  border-radius:999px;background:var(--deep);color:#fff;box-shadow:0 3px 0 #3420A6,0 12px 26px rgba(27,22,64,.24);pointer-events:none;
  opacity:0;transform:translateY(-10px) scale(.97);transition:opacity .18s ease,transform .26s var(--spring-ios,ease)}
html.lq .jeu-collee.is-on{opacity:1;transform:none}
html.lq .jeu-collee.is-masque{display:none}
html.lq .jeu-collee-m{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font:800 17px/1.1 var(--display);letter-spacing:-.01em}
html.lq .jeu-collee-m small{margin-left:1px;color:rgba(255,255,255,.62);font:800 13.5px/1 var(--display);letter-spacing:0}
html.lq .jeu-collee-box{flex:none;display:flex;align-items:center;gap:2px;height:40px;padding:3px;box-sizing:border-box;border-radius:999px;background:#fff;box-shadow:0 3px 0 rgba(22,12,74,.45)}
html.lq .jeu-collee .jeu-val{position:static;height:34px;padding:0 8px 0 2px;border:0;border-radius:999px;background:none;box-shadow:none}
html.lq .jeu-collee .jeu-val[hidden]{display:none}
html.lq .jeu-collee .jeu-timer{height:34px;box-sizing:border-box;padding:0 11px 0 9px!important;font-size:15px!important;box-shadow:none}
html.lq .jeu-collee .jeu-timer.is-ok{background:var(--ok-soft,#E3F6EC)!important;color:var(--ok,#14955A)!important}
@media (max-width:380px){html.lq .jeu-collee{gap:8px;padding-left:13px}html.lq .jeu-collee-m{font-size:16px}html.lq .jeu-collee .jeu-val small{display:none}}
@media (prefers-reduced-motion:reduce){html.lq .jeu-collee,html.lq .jeu-collee-ancre{transition:none!important}html.lq .jeu-collee .jeu-timer.is-low{animation:none!important}}
html[data-motion="reduce"].lq .jeu-collee,html[data-motion="reduce"].lq .jeu-collee-ancre{transition:none!important}
html[data-motion="reduce"].lq .jeu-collee .jeu-timer.is-low{animation:none!important}

/* ==========================================================================
   9 novembre, 10 h 37 (Elisa, la relecture qu’elle a fait faire, et ses notes : « Chrono arrête -> seulement en solo », « pouvoir
   voir la correction et le résultat finalement, mais sur l’écran bilan, qui ouvre une page en restant sur celle-ci », « faire passer
   les pages à un niveau plus que premium »).
   ========================================================================== */
/* Seul, le chrono arrêté : le temps mis, une coche à la place du réveil ; fini au chrono, « 00:00 » qui ne bat plus, dans la pêche. */
html.lq .jeu-timer.is-ok::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.6l4.4 4.4L19 7.4' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.6l4.4 4.4L19 7.4' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
html.lq .jeu-timer.is-fin{background:#FFE9DC!important;color:#A24A1E!important;box-shadow:0 3px 0 #F4C4A6;animation:none!important}
html.lq :is(#jeu-root .jeu-hud-box,.jeu-collee) .jeu-timer:is(.is-fin,.is-ok){box-shadow:none;animation:none!important}

/* « Temps écoulé » : plus bas, une phrase courte, le réveil */
html.lq .coach-to{padding:11px 14px 12px 12px;row-gap:2px}
html.lq .coach-to p{line-height:1.45}
html.lq .coach-to .coach-to-ico svg{width:16px;height:16px}

/* « Voir la correction » : une pastille violette ; sa zone de toucher déborde en douce (44 px de haut). */
html.lq #app .jr-corr{position:relative;align-self:flex-start;display:inline-flex;align-items:center;gap:4px;margin-top:9px;padding:7px 10px 7px 12px;border:0;border-radius:99px;
  background:var(--accent-soft);color:var(--accent-ink);font:700 13px/1 var(--display);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s var(--press),background .15s}
html.lq #app .jr-corr::after{content:"";position:absolute;inset:-9px -6px}
html.lq #app .jr-corr svg{width:14px;height:14px;flex:none}
html.lq #app .jr-corr:active{transform:scale(.96)}
html.lq #app .jr-corr:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media (hover:hover) and (pointer:fine){html.lq #app .jr-corr:hover{background:#E2DAFF}}
html.lq #app .coach.jeu-done>.jr-corr{margin:12px 0 0 2px}
html.lq #app .coach-to .jr-corr{grid-column:2;grid-row:3;justify-self:start;margin-top:8px;background:#fff;box-shadow:0 2px 0 #F4C4A6}

/* Le bilan : une manche ratée dans la pêche des défis à rattraper (le réveil, « Temps écoulé ») ; les trois cases du bandeau, toujours. */
html.lq #app .jeu-rounds .jr.is-miss{border-style:solid;border-color:#FFDCC8;background:#FFF9F5;box-shadow:0 3px 0 #FBE3D4}
html.lq #app .jr.is-miss .jr-ico{background:#FFE1D1;color:#A24A1E;box-shadow:0 2px 0 #F4B48E}
html.lq #app .jr.is-miss .jr-why{color:#A24A1E;font-weight:700}
html.lq #app .jr.is-miss .jr-pts{color:#C98B6B}
html.lq #app .jeu-bilan{grid-template-columns:repeat(3,minmax(0,1fr))}

/* La prochaine étape (11 h 38 : « trop de cadres, trop de boutons ») : une ligne sans cadre, centrée, à la couleur du niveau. */
html.lq #app .jeu-prog{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin:0 0 12px;padding:6px 10px;box-sizing:border-box;border:0;border-radius:14px;
  background:none;color:#9A5B0C;font:800 15.5px/1.2 var(--display);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s var(--press),background .15s}
html.lq #app .jeu-prog.is-d{color:#A3262E}
html.lq #app .jeu-prog:active{transform:scale(.97);background:rgba(27,22,64,.04)}
html.lq #app .jeu-prog:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
html.lq #app .jeu-prog .jeu-bars{display:inline-flex;align-items:flex-end;gap:2px;width:auto;height:14px;margin:0;padding:0;background:none!important}
html.lq #app .jeu-prog .jeu-bars b{width:4px;border-radius:1.5px}
html.lq #app .jeu-prog .jeu-bars b:nth-child(1){height:5px}
html.lq #app .jeu-prog .jeu-bars b:nth-child(2){height:9.5px}
html.lq #app .jeu-prog .jeu-bars b:nth-child(3){height:14px}
html.lq #app .jeu-prog-x{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:99px;background:var(--sun);color:#1B1640;font:800 12.5px/1 var(--display)}
html.lq #app .jeu-prog>svg:last-child{flex:none;width:16px;height:16px;margin-left:-2px}
@media (hover:hover) and (pointer:fine){html.lq #app .jeu-prog:hover{background:rgba(27,22,64,.04)}}
/* Le bilan, moins de vert (Elisa, 11 h 57 : « ne pas tout mettre en vert, mettre des pills ou pointillé si besoin ») : le vert reste à
   la coche ; le temps et le détail des points en pastilles neutres, le premier coup en pastille soleil, les points de la manche en
   pastille soleil (les points, c’est le jaune) ; « Voir la correction » sous un filet pointillé. */
html.lq #app .jr-meta{gap:6px;margin-top:6px}
html.lq #app .jr-meta .jr-time,html.lq #app .jr-meta .jeu-pd i{display:inline-flex;align-items:center;height:24px;padding:0 9px!important;border-radius:99px;
  background:#F3F1FA!important;color:var(--ink-2)!important;font:700 12px/1 var(--display)!important;white-space:nowrap}
html.lq #app .jr-meta .jeu-pd{display:contents!important}   /* ses pastilles suivent « Résolu en … » sur la même ligne */
html.lq #app .jr-meta .jeu-pd i::after{content:none!important}
html.lq #app .jr-meta .jeu-pd i.is-essai,html.lq #app .jr-meta .jeu-pd i.is-rang{background:#FFF1C9!important;color:#7A4E00!important}
html.lq #app .jr-meta .jeu-pd i:not([class]){display:none!important}   /* « Défi 200 » : les points de la manche le disent */
html.lq #app .jeu-rounds .jr{grid-template-columns:auto minmax(0,1fr)}
html.lq #app .jr.is-miss .jr-why{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:99px;background:#FFE7DA;color:#A24A1E;font:700 12px/1 var(--display)}
html.lq #app .jr-pts{align-items:center;gap:3px;height:24px;margin:0;padding:0 9px;box-sizing:border-box;border-radius:99px;background:var(--sun);color:#1B1640;font:800 14.5px/1 var(--display);box-shadow:0 2px 0 var(--sun-lip)}
html.lq #app .jr-pts small{font:800 10.5px/1 var(--display);opacity:.7}
html.lq #app .jr-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:26px}
html.lq #app .jr-top>.jr-pts{flex:none}
html.lq #app .jr.is-miss .jr-pts{background:#F3F1FA;color:var(--ink-3);box-shadow:none}
html.lq #app .jr-t>.jr-corr{margin-top:22px}   /* 12 h 09 : un peu d’espace avant « Voir la correction » */
html.lq #app .jeu-rounds .jr-t>.jr-corr::before{content:"";position:absolute;left:-2px;right:-200px;top:-12px;border-top:2px dashed #E4DFF5;pointer-events:none}
/* 12 h 09 (« les flèches de Voir la correction sont animées ? ») : la flèche avance d’un pas, de temps en temps, comme pour inviter à
   ouvrir ; elle file plus loin au toucher. Rien en mouvement réduit. */
html.lq #app .jr-corr>svg{animation:jrCorrPas 2.8s ease-in-out 1.2s infinite}
html.lq #app .jr-corr:active>svg{animation:none;transform:translateX(3px)}
@media (hover:hover) and (pointer:fine){html.lq #app .jr-corr:hover>svg{animation:none;transform:translateX(3px);transition:transform .15s}}
@keyframes jrCorrPas{0%,62%,100%{transform:none}72%{transform:translateX(3px)}82%{transform:none}90%{transform:translateX(2px)}}
@media (prefers-reduced-motion:reduce){html.lq #app .jr-corr>svg{animation:none}}
html[data-motion="reduce"].lq #app .jr-corr>svg{animation:none}
html.lq #app .jeu-rounds .jr{overflow:hidden}
/* « Tu progresses à chaque défi ! » (12 h 17) : sous la phrase du bilan, une pastille menthe et sa flèche qui monte. */
html.lq #jeu-root>.jeu-progres{display:flex;width:fit-content;align-items:center;gap:7px;margin:-8px 0 0;padding:6px 12px 6px 9px;border-radius:99px;background:#DDF8EA;color:#0E4A2E;
  font:800 13.5px/1.2 var(--display);animation:lqRevealIn .42s cubic-bezier(.2,.9,.3,1.1) .35s both}
html.lq #jeu-root>.jeu-progres svg{flex:none;width:18px;height:18px;color:#14955A}
@media (prefers-reduced-motion:reduce){html.lq #jeu-root>.jeu-progres{animation:none}}
html[data-motion="reduce"].lq #jeu-root>.jeu-progres{animation:none}
/* « Schéma » pendant une manche (12 h 28 : « un mini doigt qui s’anime pour dire de cliquer dessus ») : un doigt sous le bouton qui
   tapote, tant que le schéma n’a pas été ouvert (sch-attn) ; immobile en mouvement réduit. */
html.lq .ed-schema .sch-doigt{position:absolute;left:50%;top:100%;z-index:4;margin-top:2px;font-style:normal;font-size:19px;line-height:1;pointer-events:none;
  text-shadow:0 2px 3px rgba(0,0,0,.4);transform:translateX(-50%);animation:schDoigt 1.6s ease-in-out infinite}
html.lq .ed-schema:not(.sch-attn) .sch-doigt{display:none}
@keyframes schDoigt{0%,100%{transform:translate(-50%,7px)}35%{transform:translate(-50%,0)}50%{transform:translate(-50%,-1px) scale(.86)}65%{transform:translate(-50%,1px)}}
@media (prefers-reduced-motion:reduce){html.lq .ed-schema .sch-doigt{animation:none}}
html[data-motion="reduce"].lq .ed-schema .sch-doigt{animation:none}
/* La consigne, plus claire (11 h 38) : Affiche, Garde, Trie, un ton plus pâle ; leurs pastilles gardent leur couleur. */
html.lq .consigne.dq .dq-sec.is-cols{background:#F6F3FF}
html.lq .consigne.dq .dq-sec.is-garde{background:#F1F8FF}
html.lq .consigne.dq .dq-sec.is-tri{background:#FFF9E9}
html.lq #app .jeu-fin-actions>.journey-primary+.jeu-close{margin-top:14px}
@media (prefers-reduced-motion:reduce){html.lq #app .jeu-prog{animation:none}}
html[data-motion="reduce"].lq #app .jeu-prog{animation:none}

/* Entre amis, sous le classement : les défis de la partie, chacun ouvre sa correction. */
html.lq #app .jeu-corr-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
html.lq #app .jcl-b{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px 11px 14px;box-sizing:border-box;border:2px solid var(--line);border-radius:16px;background:#fff;
  box-shadow:0 3px 0 var(--lip);color:var(--ink);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq #app .jcl-b:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
html.lq #app .jcl-b:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
html.lq #app .jcl-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
html.lq #app .jcl-t small{color:var(--ink-3);font:700 12px/1.25 var(--display)}
html.lq #app .jcl-t small i{font-style:normal;color:#A24A1E}
html.lq #app .jcl-t small i.is-ok{color:#0F7A4C}
html.lq #app .jcl-t b{font:700 15px/1.3 var(--display);overflow-wrap:anywhere}
html.lq #app .jcl-v{margin-top:2px;color:var(--accent-ink);font:700 13px/1.2 var(--display)}
html.lq #app .jcl-b>svg{flex:none;width:18px;height:18px;color:var(--accent-ink)}


/* 9 novembre, 15 h 48 (Elisa : « améliore l’UI/UX de cette page, pour que ça soit vraiment waouh ») : les résultats d’une manche à
   plusieurs. Le cadre violet du bandeau de la manche (son quadrillage, sa lueur soleil), la médaille qui tombe, les points qui
   montent ; le classement en lignes qui arrivent l’une après l’autre ; « Au total » et ses ▲ ▼ ; la barre de la suite. */
html.lq #jeu-root .jr2-hero{position:relative;isolation:isolate;overflow:hidden;margin:14px 0 16px;padding:16px 16px 18px;border-radius:24px;background:var(--deep);color:#fff;box-shadow:0 5px 0 #3420A6;animation:jr2In .5s cubic-bezier(.2,.9,.3,1.2) both}
html.lq #jeu-root .jr2-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(220px 160px at 92% 8%,rgba(255,216,107,.34),transparent 70%),radial-gradient(200px 140px at 0% 100%,rgba(159,240,198,.18),transparent 70%),
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/22px 22px}
html.lq #jeu-root .jr2-hero.is-ko::before{background:radial-gradient(220px 160px at 92% 8%,rgba(255,170,130,.30),transparent 70%),
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) 0 0/22px 22px}
html.lq #jeu-root .jr2-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
html.lq #jeu-root .jr2-k{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.16);font:750 12px/1.2 var(--display);letter-spacing:.02em}
html.lq #jeu-root .jr2-niv{display:inline-flex;align-items:center;gap:5px;padding:4px 10px 4px 8px;border-radius:999px;background:#fff;color:var(--accent-ink);font:750 12px/1 var(--display)}
html.lq #jeu-root .jr2-main{display:flex;align-items:center;gap:14px;margin:14px 0 4px}
html.lq #jeu-root .jr2-ico{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18);animation:jr2Medaille .7s cubic-bezier(.2,1.4,.4,1) .15s both}
html.lq #jeu-root .jr2-ico svg{width:46px;height:46px}
html.lq #jeu-root .jr2-hero.is-or .jr2-ico{background:rgba(255,216,107,.22);box-shadow:inset 0 0 0 2px rgba(255,216,107,.55),0 0 26px rgba(255,216,107,.35)}
html.lq #jeu-root .jr2-hero.is-ko .jr2-ico{background:#FFE4D6;color:#B4522A;box-shadow:none}
html.lq #jeu-root .jr2-hero.is-ko .jr2-ico svg{width:30px;height:30px}
html.lq #jeu-root .jr2-tx{min-width:0}
html.lq #jeu-root .jr2-chat{position:relative;flex:none;width:92px;height:96px;margin:-6px -4px -8px -6px;animation:jr2Medaille .7s cubic-bezier(.2,1.4,.4,1) .15s both}
html.lq #jeu-root .jr2-chat .chat-bonus{display:block;width:100%;height:100%;max-width:none;margin:0;object-fit:contain}
html.lq #jeu-root .jr2-med{position:absolute;left:-2px;bottom:-2px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;box-shadow:0 3px 0 rgba(27,22,64,.25);font-style:normal;animation:jr2Pill .45s cubic-bezier(.2,1.4,.4,1) .7s both}
html.lq #jeu-root .jr2-med svg{width:30px;height:30px}
html.lq #jeu-root .jr2-hero.is-or .jr2-med{box-shadow:0 3px 0 rgba(27,22,64,.25),0 0 0 3px rgba(255,216,107,.6)}
html.lq #jeu-root .jr2-hero h1{margin:0;color:var(--sun,#FFD86B);font:800 25px/1.12 var(--display);letter-spacing:-.01em;text-wrap:balance}
html.lq #jeu-root .jr2-hero.is-ko h1{color:#fff}
html.lq #jeu-root .jr2-defi{margin:5px 0 0;color:rgba(255,255,255,.82);font-size:14px;font-weight:600;line-height:1.35}
html.lq #jeu-root .jr2-bas{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.16)}
html.lq #jeu-root .jr2-pts{display:flex;align-items:baseline;gap:6px;margin:0}
html.lq #jeu-root .jr2-n{font:850 40px/1 var(--display);color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
html.lq #jeu-root .jr2-hero.is-or .jr2-n{color:var(--sun,#FFD86B)}
html.lq #jeu-root .jr2-pts small{font:750 14px/1 var(--display);color:rgba(255,255,255,.75)}
html.lq #jeu-root .jr2-sub{margin:0;color:rgba(255,255,255,.82);font-size:13px;font-weight:650;text-align:right}
html.lq #jeu-root .jr2-hero.is-ko .jr2-bas{flex-direction:column;align-items:flex-start;gap:6px}
html.lq #jeu-root .jr2-hero.is-ko .jr2-sub{text-align:left}
html.lq #jeu-root .jr2-hero.is-ko .jr2-n{color:rgba(255,255,255,.7)}
html.lq #jeu-root .jr2-pills{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
html.lq #jeu-root .jr2-pills i{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font:700 12px/1.2 var(--display);font-style:normal;animation:jr2Pill .4s ease-out both}
html.lq #jeu-root .jr2-pills i:nth-child(2){animation-delay:.12s}
html.lq #jeu-root .jr2-pills i:nth-child(3){animation-delay:.24s}
html.lq #jeu-root .jr2-pills i.is-essai{background:rgba(159,240,198,.22);color:#C6F7DD}
html.lq #jeu-root .jr2-pills i.is-rang{background:var(--sun,#FFD86B);color:#1B1640}
html.lq #jeu-root .jr2-card{margin-bottom:14px}
html.lq #jeu-root .jr2-list{display:flex;flex-direction:column;gap:8px;margin:12px 0 0;padding:0;list-style:none}
html.lq #jeu-root .jr2-row{display:flex;align-items:center;gap:10px;padding:9px 12px 9px 8px;border:2px solid var(--line);border-radius:16px;background:#fff;animation:jr2Ligne .42s cubic-bezier(.2,.9,.3,1.15) calc(var(--i,0)*90ms + 250ms) both}
html.lq #jeu-root .jr2-row.is-me{border-color:#D9CFFF;background:#F6F3FF}
html.lq #jeu-root .jr2-row.is-p1{border-color:#FFE08A;background:#FFFBEA}
html.lq #jeu-root .jr2-row.is-p1.is-me{border-color:#FFD24D}
html.lq #jeu-root .jr2-row.is-miss{background:#FAFAFC;border-style:dashed}
html.lq #jeu-root .jr2-row.is-miss .jr2-nm small{color:#A24A1E}
html.lq #jeu-root .jr2-nm small.is-pas{color:#A24A1E}
html.lq #jeu-root .jr2-pl{flex:none;display:grid;place-items:center;width:30px;height:30px;color:var(--ink-3);font:800 14px/1 var(--display)}
html.lq #jeu-root .jr2-pl svg{width:30px;height:30px}
html.lq #jeu-root .jr2-row .jeu-av{flex:none}
html.lq #jeu-root .jr2-nm{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
html.lq #jeu-root .jr2-nm b{font:750 15px/1.2 var(--display);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.lq #jeu-root .jr2-nm b small{font-weight:600;color:var(--ink-3)}
html.lq #jeu-root .jr2-nm>small{font-size:12px;font-weight:600;color:var(--ink-3)}
html.lq #jeu-root .jr2-ms em{font-family:var(--mono);font-style:normal;font-weight:700;color:var(--ink-2)}
html.lq #jeu-root .jr2-p{flex:none;padding:4px 10px;border-radius:999px;background:var(--success-soft);color:var(--success);font:800 13.5px/1 var(--display);font-style:normal;font-variant-numeric:tabular-nums}
html.lq #jeu-root .jr2-row.is-miss .jr2-p{background:#F0EEF5;color:#6E6A80}
html.lq #jeu-root .jr2-p.is-tot{background:var(--accent-soft);color:var(--accent-ink)}
html.lq #jeu-root .jr2-p.is-tot small{font-weight:700;opacity:.75}
html.lq #jeu-root .jr2-mv{flex:none;padding:3px 8px;border-radius:999px;font:800 11.5px/1 var(--display);font-style:normal;animation:jr2Pill .4s ease-out calc(var(--i,0)*90ms + 550ms) both}
html.lq #jeu-root .jr2-mv.is-up{background:var(--success-soft);color:var(--success)}
html.lq #jeu-root .jr2-mv.is-down{background:#FFE4D6;color:#B4522A}
html.lq #jeu-root .jr2-auto{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px}
html.lq #jeu-root .jr2-barre{display:block;width:min(240px,70%);height:6px;border-radius:999px;background:var(--accent-soft);overflow:hidden}
html.lq #jeu-root .jr2-barre::after{content:"";display:block;height:100%;width:var(--depart,0%);border-radius:inherit;background:var(--accent);animation:jr2Barre var(--reste,5000ms) linear forwards}
@keyframes jr2In{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes jr2Medaille{0%{opacity:0;transform:translateY(-26px) rotate(-18deg) scale(.6)}60%{opacity:1;transform:translateY(3px) rotate(6deg) scale(1.08)}100%{transform:none}}
@keyframes jr2Ligne{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes jr2Pill{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes jr2Barre{from{width:var(--depart,0%)}to{width:100%}}
@media (prefers-reduced-motion:reduce){html.lq #jeu-root .jr2-hero,html.lq #jeu-root .jr2-hero *,html.lq #jeu-root .jr2-row,html.lq #jeu-root .jr2-mv{animation:none!important}html.lq #jeu-root .jr2-barre::after{animation:none;width:100%}}
html[data-motion="reduce"].lq #jeu-root .jr2-hero,html[data-motion="reduce"].lq #jeu-root .jr2-hero *,html[data-motion="reduce"].lq #jeu-root .jr2-row,html[data-motion="reduce"].lq #jeu-root .jr2-mv{animation:none!important}


/* ===== 9 novembre, 20 h 49 (Elisa : « problème d’espace, vérifie sur toute l’appli ») : le même pas vertical partout =====
   16 entre deux blocs d’un écran (cartes, bandeaux, listes), 12 entre les éléments d’une liste de cartes, 8 entre un titre et ce qui le
   suit. Mesuré écran par écran : l’accueil avait 14, 20 et 22 ; Mon compte 28 ; la console 25 et 10 ; l’entretien 15, 19 et 20 ; les
   cartes mémo 10, 14 et 19 ; les stickers 32. Les écrans de la salle ont été alignés à 20 h 29. */
html.lq #scr-learn #home-hero>.lq-hero{margin-bottom:16px!important}
html.lq #scr-learn #home-hero>.lq-stats{margin:0 0 16px!important}
html.lq #scr-learn .pc-head-sub{margin-bottom:12px!important}
html.lq #scr-learn .pc-chips{margin-bottom:16px!important}
html.lq #scr-learn #modules.group-stack{gap:12px!important}
html.lq #app .journey-hub-list{margin-top:16px!important}
html.lq #scr-compte .acc-stack{gap:16px!important}
html.lq #scr-compte .acct-col{gap:16px!important}
html.lq #scr-defis #defis-jouer>#defis-moi,html.lq #scr-defis #defis-jouer>#defis-rapide{margin-bottom:16px!important}
html.lq #scr-defis #defis-jouer>#defis-rapide,html.lq #scr-defis #defis-jouer>#defis-salles{margin-top:0!important}
html.lq #scr-console .console-projects-head{margin:16px 1px 12px!important}
html.lq #scr-collection .lq-head{margin-bottom:16px!important}
html.lq #scr-collection #coll-overview{margin-bottom:16px!important}
html.lq #scr-collection #coll-filters{margin-top:0!important}
html.lq #scr-collection #cards-grid.group-stack{gap:12px!important}
html.lq #scr-stickers .stk-board-sec{margin-bottom:16px!important}
html.lq #scr-stickers .stk-sheet-sec{margin-top:0!important}
html.lq #scr-entretien .lq-head{margin-bottom:16px!important}
html.lq #scr-entretien .ent-search{margin-bottom:16px!important}
html.lq #scr-entretien .ent-status{margin-top:0!important}
html.lq #scr-entretien .ent-readiness-stats+.ent-hero-cta{margin-top:16px!important}
html.lq #scr-entretien .ent-list{display:flex;flex-direction:column;gap:12px!important}
html.lq #scr-entretien .ent-list>*{margin:0!important}
html.lq #scr-lesson .defi-top{margin-bottom:8px!important}
html.lq #scr-lesson .consigne.dq+.def-modes{margin-top:16px!important}
html.lq #scr-learn #modules>.home-module{margin-bottom:12px!important}
html.lq #scr-learn #modules>.home-module:last-of-type{margin-bottom:0!important}
html.lq #scr-collection #coll-overview>.coll-overview{margin-top:0!important}
html.lq #scr-collection .coll-overview{margin-top:0!important}
html.lq #scr-entretien #ent-progress.ent-hero{margin-top:0!important}
/* À l’intérieur des écrans : les listes à 12, les blocs à 16 (SGBD, Planning, Mon compte, Console, Notes, Parcours, cours, Défis). */
html.lq #scr-sgbd .sg-wrap>.sg-chips{margin-bottom:16px!important}
html.lq #scr-sgbd .sg-wrap>.sg-sec{margin-top:0!important;margin-bottom:16px!important}
html.lq #scr-sgbd .sg-sec>h2{margin-bottom:12px!important}
html.lq #scr-sgbd .sg-sec>.sg-need{margin:0 0 12px!important}
html.lq #scr-sgbd .sg-sec>.sg-need:last-child{margin-bottom:0!important}
html.lq #scr-planning .pl-setup>.pl-intro{margin-bottom:16px!important}
html.lq #scr-planning .pl-setup>.pl-q{margin:0 0 16px!important}
html.lq #scr-planning .pl-setup>.pl-go{margin-top:0!important}
html.lq #scr-compte .acct-col>.acct-block+.acct-block{margin-top:0!important}
html.lq #scr-compte .acct-col{gap:16px!important}
html.lq #scr-compte .account-settings-group+.account-settings-group{margin-top:16px!important}
html.lq #scr-compte .account-settings-block{display:flex;flex-direction:column;gap:0!important}
html.lq #scr-console .chips-wrap.ex-cadre{margin-bottom:16px!important}
html.lq #scr-lesson .lv-lesson>.l-sub+.lv-card{margin-top:16px!important}
html.lq #scr-lesson .lv-lesson>.l-sub{margin-bottom:0!important}
html.lq #scr-defis .dx-rapide>.dx-r-niv{margin-bottom:16px!important}
html.lq #scr-defis .dx-rapide>.dx-rejoindre{margin-top:0!important;margin-bottom:16px!important}
html.lq #scr-defis .dx-rapide>.dx-rejoindre+.dx-act-go{margin-top:0!important}
html.lq #notes-screen-body .notes-hub{gap:16px!important}
html.lq #scr-notes .notes-empty>b{margin-bottom:8px!important}
html.lq #scr-notes .notes-empty>span{display:block;margin-bottom:0!important}
html.lq #scr-notes .notes-empty>.notes-starters{margin-top:16px!important}
html.lq #scr-parcours .pc-view>.pc-vote-cta{margin-top:0!important}
html.lq #scr-compte .acct-card>.acct-card-go,html.lq #scr-compte .acct-card>.acct-data-go{margin-top:16px!important}
html.lq #scr-learn .lq-hero>.lq-hi-sub+.lq-a-kick{margin-top:16px!important}
html.lq #scr-collection .coll-overview>.coll-overview-main+.coll-overview-next{margin-top:16px!important}
html.lq #scr-planning .pgr>.pgr-head+.pgr-map{margin-top:12px!important}
html.lq #scr-defis .dx-r-niv>.dx-niv-tete+.room-levels{margin-top:12px!important}
html.lq #scr-lesson #defi-solo-block>#hint-slot:not(:empty)+.editor-shell{margin-top:16px!important}

/* 9 novembre, 21 h 15 : la bulle du schéma UML, une relation par ligne (umlBulle). */
html.lq #schema-sheet .umd-bcap{margin:4px 0 -2px;font:800 11px/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
html.lq #schema-sheet .umd-bcap:first-of-type{margin-top:0}
html.lq #schema-sheet .umd-bl.is-rel{flex-wrap:nowrap;width:100%;min-width:0}
html.lq #schema-sheet .umd-bl.is-rel>.umd-bme,html.lq #schema-sheet .umd-bl.is-rel>.umd-bp{flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;line-height:32px}
html.lq #schema-sheet .umd-bvia{display:block;margin:-4px 0 2px;color:var(--ink-3);font:600 11.5px/1.3 var(--ui)}
html.lq #schema-sheet .umd-bvia code{padding:2px 6px;border-radius:6px;background:#F3F1FA;color:var(--ink-2);font:700 11px/1.2 var(--mono)}
html.lq #schema-sheet .umd-bc:not(.is-lien){padding-right:14px}
html.lq #schema-sheet .umd-bc:not(.is-lien)>.umd-bh{padding-right:40px}
html.lq #schema-sheet .umd-bl.is-rel>.umd-bme{flex:none}
html.lq #schema-sheet .umd-bl.is-rel>.umd-ar,html.lq #schema-sheet .umd-bl.is-rel>.umd-ar svg{width:34px}

/* 9 novembre, 21 h 24 : la carte d’une table dépliée : son nom, sa description et ses actions, puis ses colonnes, puis d’où elles viennent. */
html.lq #scr-console .tbu-haut{padding:12px 12px 14px;border-bottom:2px solid var(--line)}
html.lq #scr-console .tbu-pied{padding-top:12px;padding-bottom:12px}

/* ===== 9 novembre, 21 h 30 (Elisa : « là ça fait trop coloré » ; « pareil dans schéma, défi et console, à aligner de la même manière »)
   Les cartes de table, dans la Console et dans le schéma (défi comme console), au même calme : en-tête blanc, le nom à l’encre, la
   couleur de la table réduite à une pastille devant son nom (c’est elle qui la relie aux traits du schéma) ; le compte et la flèche en
   gris doux ; « FK » et son nom à l’encre ; « → la table » sur fond neutre, sa pastille de couleur devant. La couleur pleine ne revient
   que sur ce qu’on touche : la carte ouverte ou choisie (son contour), et les liens allumés. */
html.lq #scr-console .tbu-h,html.lq #schema-sheet .umd-h{background:#fff!important;box-shadow:inset 0 -1.5px 0 var(--line)!important}
html.lq #scr-console .tbu-n,html.lq #schema-sheet .umd-h b{display:flex;align-items:center;gap:8px;color:var(--ink)!important}
html.lq #scr-console .tbu-n::before,html.lq #schema-sheet .umd-h b::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px var(--cs)}
html.lq #schema-sheet .umd-h b{display:block}
html.lq #schema-sheet .umd-h b::before{display:inline-block;margin-right:8px;vertical-align:1px}
html.lq #scr-console .tbu-k,html.lq #schema-sheet .umd-h small{background:#F3F1FA!important;color:var(--ink-2)!important}
html.lq #scr-console .tbu-pli,html.lq #schema-sheet .umd-pli{background:#F3F1FA!important;color:var(--ink-2)!important}
html.lq #scr-console .tbu-c i.is-pk,html.lq #schema-sheet .umd-c i.is-pk{background:#FFF1C2;color:#6B4E00}
html.lq #scr-console .tbu-c i.is-fk,html.lq #schema-sheet .umd-c i.is-fk{background:#EEEBF8;color:var(--ink-2)}
html.lq #scr-console .tbu-c.is-fk .tbu-cn,html.lq #schema-sheet .umd-c.is-fk .umd-r>span{color:var(--ink)}
html.lq #scr-console .tbu-v,html.lq #schema-sheet .umd-v{display:inline-flex;align-items:center;gap:5px;background:#F3F1FA;color:var(--ink-2);font-weight:700}
html.lq #scr-console .tbu-v::first-letter,html.lq #schema-sheet .umd-v::first-letter{color:var(--ink-3)}
html.lq #scr-console .tbu-c.is-lien .tbu-x,html.lq #schema-sheet .umd-c.is-lien .umd-x{background:#F6F4FD;box-shadow:inset 0 0 0 1px var(--line)}
html.lq #scr-console .tbu-c.is-lien .tbu-x b,html.lq #schema-sheet .umd-c.is-lien .umd-x b{color:var(--ink)}
html.lq #scr-console .tbu-c.is-on .tbu-v,html.lq #schema-sheet .umd-c.is-on .umd-v{background:var(--lcs);color:var(--lci)}
html.lq #scr-console .console-schema-panel .db-tblock.tbu.is-open{box-shadow:0 0 0 2px var(--c),0 3px 0 2px var(--c)}

/* L’onglet d’une table dans le schéma, comme sa carte dans la Console (21 h 30). */
html.lq #schema-sheet .sch-table.is-tbu{border:0;border-radius:16px;box-shadow:0 0 0 2px var(--line),0 3px 0 2px var(--lip);overflow:hidden}
html.lq #schema-sheet .sch-table.is-tbu .sch-head{gap:8px;min-height:44px;padding:6px 12px 6px 16px;background:#fff;box-shadow:inset 0 -1.5px 0 var(--line)}
html.lq #schema-sheet .sch-table.is-tbu .sch-head b{flex:1;min-width:0;display:flex;align-items:center;gap:8px;overflow-wrap:anywhere;font:800 14.5px/1.25 var(--mono);color:var(--ink)}
html.lq #schema-sheet .sch-table.is-tbu .sch-head b::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px var(--cs)}
html.lq #schema-sheet .sch-table.is-tbu .sch-head small{margin-left:0;padding:4px 8px;border-radius:99px;background:#F3F1FA;color:var(--ink-2);font:800 11.5px/1 var(--display)}
html.lq #schema-sheet .sch-table.is-tbu .sch-col{display:flex;flex-direction:column;align-items:stretch;gap:3px;padding:6px 12px 6px 16px;box-shadow:none;font:600 13px/1 var(--mono)}
html.lq #schema-sheet .sch-table.is-tbu .sch-col:first-of-type{padding-top:10px}
html.lq #schema-sheet .sch-table.is-tbu .sch-col:last-child{padding-bottom:12px}
html.lq #schema-sheet .sch-table.is-tbu .sch-r{display:flex;align-items:center;gap:7px;min-width:0;min-height:22px}
html.lq #schema-sheet .sch-table.is-tbu .sch-col .cn{min-width:0;line-height:1.3;overflow-wrap:anywhere;font-weight:600;color:var(--ink)}
html.lq #schema-sheet .sch-table.is-tbu .sch-col .badge{flex:none;padding:3px 5px;border-radius:5px;box-shadow:none;font:800 9.5px/1 var(--display)}
html.lq #schema-sheet .sch-table.is-tbu .sch-col .badge.pk{background:#FFF1C2;color:#6B4E00}
html.lq #schema-sheet .sch-table.is-tbu .sch-col .badge.fk{background:#EEEBF8;color:var(--ink-2)}
html.lq #schema-sheet .sch-table.is-tbu .sch-col .ct{flex:none;margin-left:auto;padding:0 0 0 6px;border-radius:0;background:none;box-shadow:none;color:var(--ink-3);font:600 10.5px/1 var(--mono)}
html.lq #schema-sheet .sch-table.is-tbu .sch-col .cref{flex:0 3 auto;min-width:40px;max-width:58%;margin-left:auto;padding:2px 7px;border-radius:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#F3F1FA;color:var(--ink-2);font:700 10.5px/15px var(--mono)}
html.lq #schema-sheet .sch-table.is-tbu .sch-col .cxl{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;font:500 12.5px/1.35 var(--ui)}
html.lq #schema-sheet .sch-table.is-tbu .sch-col .cx{height:18px;margin:0;padding:0 6px;border-radius:5px;background:#F6F4FD;box-shadow:inset 0 0 0 1px var(--line);font:600 10.5px/18px var(--mono)}
html.lq #schema-sheet .sch-table.is-tbu .sch-col .cx small{font:700 9.5px/18px var(--display)}
html.lq #schema-sheet .sch-table.is-tbu .sch-col .cd{flex:1 1 150px;min-width:0;margin:0;color:var(--ink-3);font:500 12.5px/1.35 var(--ui)}

html.lq #schema-sheet .sch-table.is-tbu .sch-col,html.lq #schema-sheet .sch-table.is-tbu .sch-col+.sch-col{border:0!important;box-shadow:none!important}
/* La bulle des relations, au même calme : chaque table en pastille blanche, sa couleur en point devant son nom ; la table touchée en
   lavande, à l’encre. Les flèches gardent la couleur du lien. */
html.lq #schema-sheet .umd-bl.is-rel>.umd-bme,html.lq #schema-sheet .umd-bl.is-rel>.umd-bp{display:inline-flex;align-items:center;gap:6px}
html.lq #schema-sheet .umd-bl.is-rel>.umd-bme{background:#EEEBF8;color:var(--ink)}
html.lq #schema-sheet .umd-bl.is-rel>.umd-bp{background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--ink)}
html.lq #schema-sheet .umd-bl.is-rel>:is(.umd-bme,.umd-bp)::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--c)}
html.lq #schema-sheet .umd-bc{box-shadow:inset 0 0 0 2px var(--line),0 4px 0 var(--lip)}
html.lq #schema-sheet .umd-bn{color:var(--ink)}

/* 9 novembre, 21 h 38 (Elisa : « à l’ajout, ne pas mettre les pills vertes sur les tables ») : plus d’étiquette « Nouvelle » sur la
   carte d’une table qui vient d’arriver ; elle entre en douceur, et le compte rendu de l’import dit lesquelles sont arrivées. */
html.lq #scr-console .console-schema-panel .db-tblock.is-new::after{content:none!important;display:none!important}

/* ===== 9 novembre, 21 h 46 (Elisa : « pill gris et fond gris, on ne sait pas où sont les colonnes », « problème d’espace », « les
   colonnes ne sont pas à la même hauteur ») — la ligne d’une colonne, la même partout (Console, onglet du schéma, schéma UML).
   Mesuré avant : le cadre « ex : » flottait entre 6 et 64 px sous le nom (centré contre une description longue), le type 3 px au-dessus
   de la ligne de base du nom, les colonnes clés sur fond gris avec leurs cadres gris.
   Maintenant : chaque colonne a sa ligne, séparée de la suivante par un filet ; le nom et son type sur la même ligne de base ; dessous,
   toujours au même endroit, le cadre « ex : » blanc à bord fin, puis la description qui coule à sa suite et revient à la ligne sous lui.
   Plus de fond sur les colonnes clés : les lier se voit à « PK », « FK » et « → la table », et une colonne allumée par un lien prend un
   trait de la couleur de ce lien sur son bord gauche. */
html.lq #scr-console .db-tblock.tbu .tbu-cs{padding:0}
html.lq #scr-console .db-tblock.tbu .tbu-c,html.lq #scr-console .db-tblock.tbu.is-open .tbu-c:not(.is-plus){gap:0;padding:11px 14px 11px 16px;background:none}
html.lq #scr-console .db-tblock.tbu .tbu-c+.tbu-c{box-shadow:inset 0 1px 0 var(--line-2,#EEEBF8)}
html.lq #scr-console .db-tblock.tbu .tbu-c.is-on{box-shadow:inset 3px 0 0 var(--lc,var(--c))}
html.lq #scr-console .db-tblock.tbu .tbu-c.is-on+.tbu-c,html.lq #scr-console .db-tblock.tbu .tbu-c+.tbu-c.is-on{box-shadow:inset 0 1px 0 var(--line-2,#EEEBF8)}
html.lq #scr-console .db-tblock.tbu .tbu-c+.tbu-c.is-on{box-shadow:inset 3px 0 0 var(--lc,var(--c)),inset 0 1px 0 var(--line-2,#EEEBF8)}
html.lq #scr-console .db-tblock.tbu .tbu-r{align-items:baseline;min-height:0}
html.lq #scr-console .db-tblock.tbu .tbu-r>i{align-self:center}
html.lq #scr-console .db-tblock.tbu .tbu-r>em{font-size:11px}
html.lq #scr-console .db-tblock.tbu .tbu-v{align-self:center}
html.lq #scr-console .db-tblock.tbu .tbu-xl{display:block;margin-top:6px;color:var(--ink-3);font:500 13px/1.45 var(--ui)}
html.lq #scr-console .db-tblock.tbu .tbu-x{display:inline-flex;vertical-align:1px;height:20px;margin:0 8px 0 0;padding:0 7px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font:600 11px/20px var(--mono)}
html.lq #scr-console .db-tblock.tbu .tbu-c.is-lien .tbu-x{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
html.lq #scr-console .db-tblock.tbu .tbu-d{display:inline;font:inherit;color:inherit}
html.lq #scr-console .db-tblock.tbu .tbu-c.is-plus{padding-top:12px;padding-bottom:12px}
/* L’onglet d’une table dans le schéma : la même ligne. */
html.lq #schema-sheet .sch-table.is-tbu .sch-col,html.lq #schema-sheet .sch-table.is-tbu .sch-col:first-of-type,html.lq #schema-sheet .sch-table.is-tbu .sch-col:last-child{gap:0;padding:11px 14px 11px 16px}
html.lq #schema-sheet .sch-table.is-tbu .sch-col+.sch-col{box-shadow:inset 0 1px 0 var(--line-2,#EEEBF8)!important}
html.lq #schema-sheet .sch-table.is-tbu .sch-r{align-items:baseline;min-height:0}
html.lq #schema-sheet .sch-table.is-tbu .sch-r>.badge,html.lq #schema-sheet .sch-table.is-tbu .sch-col .cref{align-self:center}
html.lq #schema-sheet .sch-table.is-tbu .sch-col .ct{font-size:11px}
html.lq #schema-sheet .sch-table.is-tbu .sch-col .cxl{display:block;margin-top:6px;color:var(--ink-3);font:500 13px/1.45 var(--ui)}
html.lq #schema-sheet .sch-table.is-tbu .sch-col .cx{display:inline-flex;vertical-align:1px;height:20px;margin:0 8px 0 0;padding:0 7px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font:600 11px/20px var(--mono)}
html.lq #schema-sheet .sch-table.is-tbu .sch-col .cd{display:inline;font:inherit;color:inherit}
/* Le schéma UML : ses lignes gardent leur hauteur (les traits s’y accrochent) ; un filet entre deux colonnes, pas de fond, le trait de
   couleur à gauche d’une colonne allumée, le cadre « ex : » blanc. */
html.lq #schema-sheet .umd-c{background:none!important}
html.lq #schema-sheet .umd-c+.umd-c:not(.is-plus):not(.is-cache){box-shadow:inset 0 1px 0 var(--line-2,#EEEBF8)}
html.lq #schema-sheet .umd-c.is-on{box-shadow:inset 3px 0 0 var(--lc,var(--c))}
html.lq #schema-sheet .umd-c+.umd-c.is-on:not(.is-plus){box-shadow:inset 3px 0 0 var(--lc,var(--c)),inset 0 1px 0 var(--line-2,#EEEBF8)}
html.lq #schema-sheet .umd-x,html.lq #schema-sheet .umd-c.is-lien .umd-x,html.lq #schema-sheet .umd-c.is-on .umd-x{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
html.lq #schema-sheet .umd-r{align-items:baseline}
html.lq #schema-sheet .umd-r>i,html.lq #schema-sheet .umd-v{align-self:center}

/* 9 novembre, 21 h 50 (Elisa : « le bouton Annuler n’est pas au bon endroit, un peu bizarre ») : le nom du projet sur toute la largeur,
   puis les deux choix côte à côte, à la même taille : « Annuler » en blanc, « Créer le projet » en violet. Avant : « Créer » collé au
   champ, et « Annuler » en petit texte gris centré dessous, comme oublié. */
html.lq #scr-console .console-create-card{padding:16px}
html.lq #scr-console .console-create-card label{margin:0 2px 8px}
html.lq #scr-console .console-create-row input{height:48px}
html.lq #scr-console .console-create-acts{display:flex;gap:12px;margin-top:12px}
html.lq #scr-console .console-create-acts>button{flex:1;min-height:48px;margin:0;border-radius:14px;font:750 15px/1 var(--display);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s var(--press,ease)}
html.lq #scr-console .console-create-acts>button:active{transform:translateY(2px)}
html.lq #scr-console .console-create-acts>.console-create-cancel{display:block;padding:0 12px;border:0;background:#fff;color:var(--ink-2);box-shadow:inset 0 0 0 2px var(--line),0 3px 0 var(--lip)}
html.lq #scr-console .console-create-acts>.console-create-cta{height:auto;padding:0 12px;border:0;background:var(--accent);color:#fff;box-shadow:0 3px 0 #3A22B0}

/* 9 novembre, 21 h 53 (Elisa : « bizarre, le bouton Importer disparaît ») : un classeur de 12 feuilles rendait la feuille plus haute que
   l’écran ; « Importer » restait en bas, à faire défiler, sous une liste qui défilait elle-même. Maintenant la feuille défile seule (la
   liste des tables n’a plus son propre défilement), et « Importer » reste collé en bas, toujours visible, sur un fond blanc qui
   recouvre ce qui passe dessous. */
html.lq .imp-prev.is-riche{max-height:none;overflow:visible}
html.lq .imp-sheet>.imp-go{position:sticky;bottom:0;z-index:3;margin-top:4px;box-shadow:0 -14px 0 8px var(--surface,#fff),0 calc(28px + var(--safe-bottom,0px)) 0 18px var(--surface,#fff)}
html.lq .imp-sheet>.imp-go::before{content:"";position:absolute;left:-18px;right:-18px;top:-30px;height:16px;background:linear-gradient(rgba(255,255,255,0),var(--surface,#fff));pointer-events:none}
html.lq .imp-sheet>.imp-ou:not([hidden])+.imp-go{margin-top:0}

html.lq .lq-ask .lq-ask-btns .lq-ask-trois.is-danger{color:#C2362F!important}

/* 9 novembre, 22 h 44 (Elisa : « le bouton importer marche bien, avec des % », « nouveau projet : comme l’autre ») : le bouton se
   remplit pendant l’import ; une table qui arrive entre en douceur, sans anneau vert. */
html.lq .imp-sheet>.imp-go.is-busy{cursor:progress;opacity:1;font-variant-numeric:tabular-nums}
html.lq .imp-sheet>.imp-go.is-busy::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgba(28,14,104,.34);transform-origin:left center;transform:scaleX(var(--imp-pc,0));pointer-events:none}
html.lq #scr-console .console-schema-panel .db-tblock.is-new{animation:dbNewDoux .45s ease-out both}
@keyframes dbNewDoux{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
html[data-motion="reduce"].lq #scr-console .console-schema-panel .db-tblock.is-new{animation:none}

/* 9 novembre, 23 h 05 (Elisa : « ça bug quand il est un peu lourd ») : la lecture d’un gros fichier se voit tout de suite, en %. */
.imp-lecture{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:flex-end;justify-content:center;padding:0 16px calc(24px + var(--safe-bottom,0px));background:rgba(26,20,58,.32);opacity:0;transition:opacity .2s ease}
.imp-lecture.on{opacity:1}
.imp-lecture-carte{width:100%;max-width:440px;display:grid;gap:8px;padding:20px 20px 18px;border-radius:24px;background:#fff;box-shadow:0 0 0 2px #E7E2FB,0 5px 0 2px #D9D2F7,0 18px 40px -16px rgba(40,24,120,.45);font-family:var(--ui,inherit);color:var(--ink,#1F1B3A)}
.imp-lecture-carte b{font:800 18px/1.25 var(--display,inherit)}
.imp-lecture-carte small{font-size:14px;line-height:1.35;color:var(--ink-3,#6B6690);overflow-wrap:anywhere}
.imp-lecture-barre{height:10px;margin-top:8px;border-radius:99px;background:#ECE8FF;overflow:hidden}
.imp-lecture-barre i{display:block;height:100%;width:0;border-radius:inherit;background:var(--accent,#6A4DF4);transition:width .25s ease-out}
.imp-lecture-pc{justify-self:end;font-size:14px;font-weight:800;color:var(--accent,#6A4DF4);font-variant-numeric:tabular-nums}
html[data-motion="reduce"] .imp-lecture,html[data-motion="reduce"] .imp-lecture-barre i{transition:none}

/* 9 novembre, 23 h 15 (Elisa : « problème de formatage », « on ne voit pas la fin de la page, faire en sorte que ça n’arrive pas
   ailleurs ») — les noms longs ne sortent plus de leur cadre, et rien ne reste caché sous un bouton collé en bas.
   L’onglet d’une table : la ligne d’une colonne tient dans la carte (elle s’élargissait à son nom, et la carte coupait le type et
   le cadre « ex : »). */
html.lq #schema-sheet .sch-table.is-tbu .sch-r{flex:1 1 100%;width:100%;min-width:0}
html.lq #schema-sheet .sch-table.is-tbu .sch-col .cn{flex:1 1 auto;min-width:0}
html.lq #schema-sheet .sch-table.is-tbu .sch-col .cxl,html.lq #scr-console .db-tblock.tbu .tbu-xl{min-width:0;max-width:100%}
html.lq #schema-sheet .sch-table.is-tbu .sch-col .cx,html.lq #scr-console .db-tblock.tbu .tbu-x,html.lq #schema-sheet .umd-x{max-width:100%;min-width:0;overflow:hidden}
/* Un compte rendu, une question, une bulle : un nom de table en « code » passe à la ligne au lieu de sortir du cadre. */
html.lq .feedback>div{min-width:0}
html.lq .feedback code,html.lq .feedback p code,html.lq .lq-ask code,html.lq #schema-sheet .umd-bulle code,html.lq .imp-sheet code{white-space:normal;overflow-wrap:anywhere;word-break:break-word;max-width:100%}
/* La liste des projets : un nom long tient sur deux lignes, coupé proprement. */
html.lq .console-project-copy b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:normal}
/* La feuille d’import : la dernière ligne (« Elles seront ajoutées… », le bas de la liste des tables) reste au-dessus du bouton collé
   en bas et de son fondu blanc (elle passait dessous : 18 px d’écart pour 22 px de fondu). */
html.lq .imp-sheet>.imp-go,html.lq .imp-sheet>.imp-ou:not([hidden])+.imp-go{margin-top:28px}
html.lq .imp-sheet>.imp-ou:not([hidden]){margin-bottom:0}
/* Une question avec une liste (has-corps) : la fin de la liste remonte au-dessus des boutons collés en bas et de leur fondu. */
html.lq .lq-ask-sheet.has-corps .lq-ask-corps{padding-bottom:20px}

/* 9 novembre, 23 h 44 (Elisa : « améliorer la position du bouton Ajouter une table ») : un « + » rond dans le titre « Tables du
   projet », à droite de leur nombre, et « Ajouter une table » en pointillés au bout de la liste, là où la prochaine se rangera. */
html.lq #scr-console .tbl-entete-l{justify-content:flex-start}
html.lq #scr-console .tbl-entete-l .tbl-titre{margin-right:auto;min-width:0}
html.lq #scr-console .tbl-ajout{position:relative;flex:none;display:grid;place-items:center;width:40px;height:40px;margin:-4px 0;padding:0;border:0;border-radius:50%;background:var(--accent,#6A4DF4);color:#fff;box-shadow:0 3px 0 var(--accent-lip,#4A2FD0);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s ease,box-shadow .12s ease}
html.lq #scr-console .tbl-ajout::before{content:"";position:absolute;inset:-4px;border-radius:50%}
html.lq #scr-console .tbl-ajout svg{width:20px;height:20px}
html.lq #scr-console .tbl-ajout:active{transform:translateY(3px);box-shadow:0 0 0 var(--accent-lip,#4A2FD0)}
html.lq #scr-console .tbl-ajout[hidden]{display:none}
html.lq #scr-console .tbl-ajout-fin{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;margin:0;padding:0 16px;border:2px dashed #CFC6F5;border-radius:20px;background:transparent;color:var(--accent-ink,#4A2FD0);font:700 16px/1.2 var(--display);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s ease,border-color .15s ease}
html.lq #scr-console .tbl-ajout-fin svg{width:20px;height:20px}
html.lq #scr-console .tbl-ajout-fin:active{background:var(--accent-soft,#EEE9FF);border-color:var(--accent,#6A4DF4)}
html.lq #scr-console .db-bar[hidden]{display:none}

/* 10 novembre, 0 h 14 (Elisa : « le sélecteur Projet cible, plus rapide ») : la liste s’ouvre au premier toucher (pas d’attente
   du double-toucher), sans transition au focus, et rien ne bouge sous la feuille floutée tant qu’elle est ouverte (chaque mouvement
   dessous obligeait l’iPhone à recalculer le flou). */
html.lq .imp-field select{touch-action:manipulation;transition:none}
html.imp-ouvert [id^="scr-"] *,html.imp-ouvert [id^="scr-"] *::before,html.imp-ouvert [id^="scr-"] *::after,html.imp-ouvert .tabbar *{animation-play-state:paused!important}

/* 10 novembre, 0 h 24 (Elisa : « ne mets pas les bords violets ») : une question maîtrisée garde sa coche et sa pastille, sans trait
   de couleur à gauche. */
html.lq #scr-entretien .ecard.ok{box-shadow:none}

/* 10 novembre, 0 h 27 : la ligne d’annonce de la question (notion · niveau en points), entre les flèches et la question. */
html.lq .ent-focus .ent-focus-kick{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:20px 0 8px;max-width:calc(100% - 84px);color:rgba(255,255,255,.86);font:700 14px/1.2 var(--display)}
html.lq .ent-focus .ent-focus-cat{color:#fff}
html.lq .ent-focus .ent-niv{display:inline-flex;align-items:center;gap:4px;padding-left:12px;box-shadow:inset 1.5px 0 0 rgba(255,255,255,.35);color:rgba(255,255,255,.8);font-weight:600}
html.lq .ent-focus .ent-niv b{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3)}
html.lq .ent-focus .ent-niv b:last-of-type{margin-right:4px}
html.lq .ent-focus .ent-niv[data-n="1"] b:nth-of-type(-n+1),html.lq .ent-focus .ent-niv[data-n="2"] b:nth-of-type(-n+2),html.lq .ent-focus .ent-niv[data-n="3"] b{background:var(--sun-hi,#FFD84D)}
html.lq .ent-focus .ent-focus-kick+h1{margin-top:0}

/* ---------- 63. Le bilan, en chapitres (10 novembre, 8 h 36 : « on dirait des briques empilées, pas vraiment de cohérence ») ----------
   Une seule page : la carte « Bravo ! », puis trois chapitres de même allure (Ta récompense, Ton avis, Et maintenant). Chacun : une
   étiquette (le trait et les capitales de la carte du haut, en violet), un titre à gauche, puis son contenu ; le même pas entre eux. Les
   cartes blanches perdent leur autocollant et leur grosse ombre ; les autres actions se collent à la séance suivante, en pastilles. */
html.lq #scr-lesson .bravo-wrap{--bv-pas:34px}
html.lq #scr-lesson .bravo-wrap .bv-sec-k{display:flex;align-items:center;gap:8px;margin:0 0 6px;color:var(--accent-ink);font:800 12px/1.3 var(--ui);letter-spacing:.08em;text-transform:uppercase;text-align:left}
html.lq #scr-lesson .bravo-wrap .bv-sec-k::before{content:"";flex:none;width:18px;height:3px;border-radius:2px;background:currentColor}
html.lq #scr-lesson .bravo-wrap :is(.mc-reveal-h,.av-h,.bv-sec-h){margin:0 0 14px!important;color:var(--ink);font:800 23px/1.15 var(--display)!important;letter-spacing:-.015em;text-align:left;text-wrap:balance}
html.lq #scr-lesson .bravo-wrap .mc-reveal-h em{color:var(--accent)}
/* Ta récompense */
html.lq #scr-lesson .bravo-wrap .bravo-unlock.mc-reveal{margin:var(--bv-pas) 0 0!important;text-align:center}
html.lq #scr-lesson .bravo-wrap .bravo-unlock .mc-hint{margin-top:14px}
/* Ton avis : le titre dehors, comme les autres ; les étoiles dans une carte simple */
html.lq #scr-lesson .bravo-wrap .bravo-avis{margin:var(--bv-pas) 0 0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;text-align:left}
html.lq #scr-lesson .bravo-wrap .bravo-avis .av-h{margin-bottom:4px!important}
html.lq #scr-lesson .bravo-wrap .bravo-avis .av-sub{margin:0 0 12px;max-width:none;text-align:left}
html.lq #scr-lesson .bravo-wrap .bravo-avis .av-carte{padding:16px 12px 14px;border:2px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 4px 0 var(--lip);text-align:center}
/* Et maintenant : la séance suivante, et les autres actions collées dessous, en pastilles */
html.lq #scr-lesson .bravo-wrap .bravo-suite{margin:var(--bv-pas) 0 8px}
/* La séance suivante : la carte violette de la vitrine, comme avant (ses règles visaient un frère de la carte mémo). */
html.lq #scr-lesson .bravo-wrap .bravo-suite .bravo-next-btn{position:relative;isolation:isolate;margin-top:10px;padding:20px!important;
  border-radius:28px!important;background:var(--deep)!important;box-shadow:0 7px 0 #3A22B0,0 26px 44px -28px rgba(40,20,140,.55)!important}
html.lq #scr-lesson .bravo-wrap .bravo-suite .bravo-next-btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(200px 150px at 96% 0%,rgba(255,216,107,.28),transparent 70%),
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/26px 26px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/26px 26px}
html.lq #scr-lesson .bravo-wrap .bravo-suite .bravo-next-btn .bravo-next-lab{display:flex;align-items:center;gap:8px;color:var(--mint)!important;font:800 12px/1.3 var(--ui)!important;letter-spacing:.08em!important;text-transform:uppercase!important}
html.lq #scr-lesson .bravo-wrap .bravo-suite .bravo-next-btn .bravo-next-lab::before{content:"";flex:none;width:18px;height:3px;border-radius:2px;background:currentColor}
html.lq #scr-lesson .bravo-wrap .bravo-suite .bravo-next-btn .bn-copy b{margin-top:6px;color:var(--sun-hi)!important;font:800 25px/1.08 var(--display)!important}
html.lq #scr-lesson .bravo-wrap .bravo-suite .bravo-next-btn .bn-cta{background:var(--sun);color:var(--ink);font:800 18px/1 var(--display);box-shadow:0 5px 0 var(--sun-lip)}
html.lq #scr-lesson .bravo-wrap .bravo-suite .bravo-next-btn:active .bn-cta{box-shadow:0 1px 0 var(--sun-lip)}
html.lq #scr-lesson .bravo-wrap .bravo-suite .bravo-next-btn .bn-num{background:var(--ink)!important;color:var(--sun)!important}
html.lq #scr-lesson .bravo-wrap .bravo-suite .bravo-next-btn{margin-top:0!important}
html.lq #scr-lesson .bravo-wrap .bravo-suite .bravo-actions{margin-top:12px;gap:10px}
html.lq #scr-lesson .bravo-wrap .bravo-suite .bravo-tools{display:grid!important;grid-auto-flow:row!important;grid-template-columns:repeat(auto-fit,minmax(0,1fr))!important;gap:8px}
html.lq #scr-lesson .bravo-wrap .bravo-suite .bravo-tool{min-width:0!important}
html.lq #scr-lesson .bravo-wrap .bravo-suite .bravo-tool{gap:5px!important;min-height:76px!important;padding:10px 4px!important;border-radius:18px!important;box-shadow:0 3px 0 var(--lip)!important}
html.lq #scr-lesson .bravo-wrap .bravo-suite .bravo-tool .bi{width:34px!important;height:34px!important;border-radius:11px!important}
html.lq #scr-lesson .bravo-wrap .bravo-suite .bravo-tool .bi svg{width:19px!important;height:19px!important}
html.lq #scr-lesson .bravo-wrap .bravo-suite .bravo-tool .bt{font-size:13px!important;line-height:1.15!important;text-align:center;white-space:normal;text-wrap:balance;overflow-wrap:anywhere}
@media (max-width:360px){html.lq #scr-lesson .bravo-wrap .bravo-suite .bravo-tool .bt{font-size:12.5px!important}}
/* ---------- 64. Les cartes de l’album, sur tous les iPhone (10 novembre, 8 h 50 : « Base relationnelle » coupé, plus de « Voir la leçon ») ----------
   Safari mesurait le mot-clé avant de connaître la largeur de la carte (cqi), comme la pastille « Voir la leçon » le 7 novembre : le
   mot restait sur une ligne, trop grand, coupé au bord. Dans l’album, sa taille suit la largeur de l’écran. Carte = 50vw − 52 px (deux
   colonnes, gouttière de 20 px), 50vw − 44 px sous 351 px ; à partir de 600 px, au moins 160 px (on prend 160). Mesuré de 320 à 440 px.
   La carte à débloquer : le numéro, le cadenas au milieu, la leçon en bas ; elle se touche toujours pour ouvrir la leçon. */
html.lq .mc--album{--mc-w:calc(50vw - 52px)}
@media (max-width:350px){html.lq .mc--album{--mc-w:calc(50vw - 44px)}}
@media (min-width:600px){html.lq .mc--album{--mc-w:160px}}
html.lq .mc--album .mc-k{font-size:clamp(12px,calc((var(--mc-w) - 30px) / (var(--kn,8) * .6)),calc(21px * var(--mc-fs)))}
html.lq .mc--album .mc-k.is-mot{font-size:clamp(12.5px,calc((var(--mc-w) - 30px) / (var(--kn,8) * .58)),calc(20px * var(--mc-fs)))}
html.lq .mc--album .mc-lesson{font-size:clamp(11px,calc((var(--mc-w) - 32px) / (var(--kn,10) * .62)),calc(14px * var(--mc-fs)))}
html.lq .mc--album .mc-back{gap:6px}
html.lq .mc--album .mc-lock{margin:auto}
@media (max-width:360px){html.lq .mc--album .mc-t{padding-right:12px;font-size:calc(11.5px * var(--mc-fs));hyphens:auto}}
/* La fiche d’un sticker de module : ses leçons, cochées une fois validées, la prochaine en violet ; chacune ouvre sa leçon. */
html.lq .stk-lecons{display:grid;gap:8px;max-width:340px;margin:18px auto 0;padding:0;list-style:none;text-align:left}
html.lq .stk-lecons button{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;margin:0;padding:8px 14px 8px 8px;border:2px solid var(--line);border-radius:16px;
  background:#fff;color:var(--ink);font:650 15px/1.25 var(--ui);text-align:left;box-shadow:0 3px 0 var(--lip);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq .stk-lecons button:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
html.lq .stk-lecons b{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);font:800 13px/1 var(--mono)}
html.lq .stk-lecons b svg{width:17px;height:17px}
html.lq .stk-lecons span{min-width:0;overflow-wrap:anywhere}
html.lq .stk-lecons .is-ok b{background:var(--mint);color:var(--mc-ink,#1B1640)}
html.lq .stk-lecons .is-ok span{color:var(--ink-2)}
html.lq .stk-lecons .is-suite button{border-color:var(--accent)}
html.lq .stk-lecons .is-suite b{background:var(--accent);color:#fff}

/* ---------- 65. La croix des recherches (10 novembre, 9 h 10 : « mettre une croix à côté de la recherche pour enlever, micro interaction ; fais la même chose ailleurs ») ----------
   Accueil (Trouver une notion), Entretien, Mes notes, Console : la même croix que les feuilles, dans une pastille lavande de 30 px
   (44 px au toucher). Elle arrive en tournant dès qu’on tape ; au toucher, elle s’enfonce, passe en violet et fait un quart de tour.
   Mouvement réduit : elle apparaît, simplement. */
html.lq .lq-clear{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:50%;
  background:radial-gradient(circle,var(--accent-soft) 0 15px,transparent 15.5px);color:var(--accent-ink);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
  animation:lqClearIn .36s cubic-bezier(.3,1.6,.5,1) both;transition:scale .14s cubic-bezier(.3,.7,.4,1.5),rotate .22s ease}
html.lq .lq-clear svg{display:block;width:14px;height:14px}
html.lq .lq-clear:active{scale:.82;rotate:90deg;background:radial-gradient(circle,var(--accent) 0 15px,transparent 15.5px);color:#fff}
html.lq .lq-clear:focus-visible{outline:3px solid rgba(106,77,244,.35);outline-offset:-4px}
html.lq .lq-clear[hidden],html.lq #scr-notes .searchbar:not(.has) .lq-clear,html.lq .searchbar:not(.has) .lq-clear{display:none}
html.lq .catalog-search>div>.lq-clear{margin-right:-8px}
html.lq #scr-notes .searchbar .lq-clear{right:2px;opacity:1}
html.lq #scr-notes .searchbar .lq-clear:active{opacity:1}
html.lq .console-query-clear.lq-clear{margin-right:-8px}
html.lq #app #scr-entretien .ent-search-clear.lq-clear{right:6px;width:30px;height:30px;min-width:30px;min-height:30px;background:var(--accent-soft);
  transition:scale .14s cubic-bezier(.3,.7,.4,1.5),rotate .22s ease,background .15s}
html.lq #app #scr-entretien .ent-search-clear.lq-clear::before{inset:-7px}
html.lq #app #scr-entretien .ent-search-clear.lq-clear:active{transform:translateY(-50%);scale:.82;rotate:90deg;background:var(--accent);color:#fff}
@keyframes lqClearIn{from{scale:.2;rotate:-120deg;opacity:0}to{scale:1;rotate:0deg;opacity:1}}
@media (prefers-reduced-motion:reduce){html.lq .lq-clear{animation:none;transition:none}html.lq .lq-clear:active{rotate:0deg}}
html[data-motion="reduce"].lq .lq-clear{animation:none;transition:none}

/* ---------- 66. Le lecteur des cours, sur tous les iPhone (10 novembre : « verrouiller tous les cours une fois pour toutes ») ----------
   Vérifié de 320 × 568 à 440 × 956, en paysage (844 × 390) et en grand texte : lecture, pause, moment « À toi », hauteur réduite
   de 300 px, écran de fin. Ce qui change :
   - Le double toucher ne zoome plus nulle part dans le lecteur : seuls la scène, les boutons et les étiquettes avaient
     touch-action:manipulation ; deux appuis rapides sur la barre du bas (entre les boutons), sur le texte d’un plateau « À toi » ou
     sur la carte de fin agrandissaient la page dans Safari. Le pincement reste permis (accessibilité) : la scène garde sa taille,
     elle se cale sur la fenêtre du cadre, que le pincement ne change pas.
   - Le rebond d’iOS ne passe plus derrière le lecteur : le geste reste dans le voile de fin quand il défile, et le lecteur lui-même
     ne le transmet pas à la page.
   - En paysage (844 × 390), la carte de fin (478 px) dépassait en haut et en bas, sans pouvoir défiler jusqu’à son haut (centrée par
     align-items:center, la partie au-dessus était hors d’atteinte) : elle reste centrée quand elle tient, sinon elle part du haut et
     le voile défile.
   - Une fenêtre très basse (paysage en grand texte) : le plateau « À toi » ne dépasse plus le haut de l’écran, il défile.
   - Pendant la vidéo, sur téléphone, les animations en boucle de la page sous le lecteur (invisibles) se figent (lvFond, dans
     index.html ; html.lv-couvre le signale) : moins de calcul à chaque image. */
html.lq .lv{touch-action:manipulation;overscroll-behavior:none}
html.lq .lv-end{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
html.lq .lv:not(.is-fin-end) .lv-end{align-items:flex-start}
html.lq .lv:not(.is-fin-end) .lv-end-card{flex:none;margin-top:auto;margin-bottom:auto}
@media (max-height:500px){
  html.lq .lv-pk-card{max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 52px);overflow-y:auto;overscroll-behavior:contain}
}

/* ==========================================================================
   Défis — la refonte du 7 novembre (« il faut que quelqu’un m’aide pour la partie design/product design sur la partie défi »).
   Deux designers : le produit (structure, parcours, états : les fonctions de rendu de index.html) et le visuel (la DA du site en un
   seul jeu de composants : sections 1 à 19), réunis en une feuille (section 20 : la nouvelle structure habillée de la DA).
   Portée : html.lq #scr-defis (les trois onglets et Mes stats) et html.lq .dx-feuille (les feuilles et la fiche d’un joueur).

   Le système, en bref (détails dans DA.md) :
   - Trois surfaces seulement. La carte blanche en relief (bord 2 px lilas, coins 24 px, lèvre 4 px). Dedans, des tuiles
     lilas à plat (coins 18 px, ni bord ni lèvre) pour regrouper : listes, chiffres, messages. Les objets qu’on touche
     gardent seuls leur lèvre (boutons, choix, pastilles de filtre) : « ce qui a du relief s’enfonce ».
   - Une échelle de coins : 28 (feuille) · 24 (carte) · 18 (tuile, choix, grand bouton) · 14 (petit bouton, champ) · pastille.
   - Deux lèvres : 4 px (cartes, grands boutons), 3 px (tout le reste).
   - Titres : Bricolage Grotesque (titre de carte 22 px, intertitre 17 px, nom 15,5 px) ; texte : Inter. Capitales réservées aux
     surtitres (comme le site) ; les étiquettes passent en casse normale (règle de ludique.css, « pas de sur-titres en capitales »).
   - Couleurs : violet = agir et « toi » ; jaune = points et récompenses ; menthe = en direct, tu mènes ; pêche = à rattraper ;
     rouge = Difficile et erreurs seulement. Le vert « bonne réponse » ne sert plus dans les défis.
   ========================================================================== */

/* ---------- Défis v2 · 1. Jetons ---------- */
html.lq #scr-defis,html.lq .dx-feuille{
  --dx-r-feuille:28px;--dx-r-carte:24px;--dx-r-tuile:18px;--dx-r-ctl:14px;
  --dx-bord:2px solid var(--line);
  --dx-relief:0 4px 0 var(--lip);--dx-relief-s:0 3px 0 var(--lip);
  --dx-relief-v:0 4px 0 var(--accent-lip);--dx-relief-vs:0 3px 0 var(--accent-lip);
  --dx-tuile:#F2EFFC;--dx-filet:#fff;
  --dx-lav:var(--accent-soft);--dx-lav-bord:#DDD3FF;--dx-lav-relief:0 4px 0 #D2C6FA;
  --dx-mene:#9FF0C6;--dx-mene-ink:#0E4A2E;--dx-mene-t:#1E7A4F;--dx-mene-lip:#5FC99A;
  --dx-retard:#FFE1D1;--dx-retard-ink:#8A3A12;--dx-retard-t:#A24A1E;--dx-retard-lip:#F4A86A;
  --dx-f:var(--accent-ink);--dx-f-soft:var(--accent-soft);
  --dx-m:#B45309;--dx-m-soft:#FFF3DC;
  --dx-d:#C2323A;--dx-d-soft:#FDEBEC;
  --dx-marge:18px;
  --dx-vague:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 46C240 86 520 86 760 58S1220 6 1440 34V80H0Z' fill='%23fff'/%3E%3C/svg%3E");
  --dx-swoosh:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 30' preserveAspectRatio='none'%3E%3Cpath d='M4 20C70 8 170 6 296 14' fill='none' stroke='%239FF0C6' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- Défis v2 · 2. Rythme de la page : une gouttière, un écart entre cartes ---------- */
html.lq #scr-defis #defis-tabs{margin-top:16px}
html.lq #scr-defis .dx-tabs{margin:0 0 16px}
html.lq #scr-defis :is(.dx-me,.dx-rapide,.dx-points,.dx-cls,.dx-amis,.dx-salles){margin-bottom:14px}
html.lq #scr-defis #defis-room:not(:empty){margin-bottom:14px}

/* ---------- Défis v2 · 3. Cartes : une seule recette ---------- */
html.lq #scr-defis .room-card{border-radius:var(--dx-r-carte)!important;padding:0 var(--dx-marge) var(--dx-marge)!important;box-shadow:inset 0 0 0 2px var(--line),var(--dx-relief)!important}
html.lq #scr-defis .room-card>.room-head{margin:0 calc(-1 * var(--dx-marge))}
html.lq #scr-defis .perf-card{padding:var(--dx-marge);border:var(--dx-bord);border-radius:var(--dx-r-carte);box-shadow:var(--dx-relief)}
html.lq #scr-defis .room-rules{padding:var(--dx-marge) var(--dx-marge) 10px;border:var(--dx-bord);border-radius:var(--dx-r-carte);box-shadow:var(--dx-relief)}
/* La carte du joueur et la rangée du barème : des cartes qu’on touche, la même lèvre qui s’écrase. */
html.lq #scr-defis :is(.dx-me,.dx-points){min-height:72px;padding:12px 14px 12px 16px;border:var(--dx-bord);border-radius:var(--dx-r-carte);box-shadow:var(--dx-relief);
  transition:transform .12s var(--press),box-shadow .12s var(--press),background-color .15s}
html.lq #scr-defis :is(.dx-me,.dx-points):active{transform:translateY(4px);box-shadow:0 0 0 var(--lip)}
html.lq #scr-defis .dx-points{border-color:var(--dx-lav-bord);background:var(--dx-lav);box-shadow:var(--dx-lav-relief)}
html.lq #scr-defis .dx-points:active{box-shadow:0 0 0 #D2C6FA}
html.lq #scr-defis .dx-me>.jeu-av{width:44px;height:44px;font-size:19px}
html.lq #scr-defis .dx-me-t{gap:2px}
html.lq #scr-defis .dx-me-t>b{font:700 17px/1.2 var(--display);letter-spacing:-.01em}
html.lq #scr-defis .dx-me-t small{color:var(--ink-2);font:600 13px/1.35 var(--ui)}
html.lq #scr-defis .dx-me{gap:12px}
html.lq #scr-defis .dx-me-go{min-height:36px;padding:0 7px 0 12px;box-shadow:none;background:var(--accent-soft);font:700 13.5px/1 var(--display)}
html.lq #scr-defis .dx-points-stk{width:44px;height:44px}
html.lq #scr-defis .dx-points-t{gap:3px}
html.lq #scr-defis .dx-points-t b{font:700 16px/1.2 var(--display)}
html.lq #scr-defis .dx-points-t small{color:var(--ink-2);font:600 13px/1.35 var(--ui)}

/* ---------- Défis v2 · 4. En-tête violet : la famille du héros du site (quadrillage, lueur, vague blanche en bas) ---------- */
html.lq #scr-defis :not(.dx-rapide)>.room-head{padding-bottom:30px}
html.lq :is(#scr-defis,.dx-feuille) :not(.dx-rapide)>.room-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:14px;background:var(--dx-vague) center bottom/100% 100% no-repeat;pointer-events:none}
html.lq :is(#scr-defis,.dx-feuille) .room-kicker:not(.dx-rapide .room-kicker){font:800 12px/1.2 var(--ui)!important;letter-spacing:.07em!important}
html.lq :is(#scr-defis,.dx-feuille) :not(.dx-rapide)>.room-head .room-sub{margin-top:8px;font:500 14.5px/1.45 var(--ui);text-wrap:pretty}
/* Le cadre de « Jouer » garde son bandeau d’avant (Elisa, 8 novembre, 0 h 17 : « je veux garder ça ») : le chat à gauche, le texte
   à droite, sans vague ni souligné (les règles du bandeau ci-dessus ne le visent pas).*/
/* La vague passe sur le bord lilas de la carte : on le redessine sous la courbe (2 px de chaque côté). */
html.lq #scr-defis .room-card:not(.dx-rapide)>.room-head::after{background:linear-gradient(var(--line),var(--line)) left bottom/2px 46% no-repeat,linear-gradient(var(--line),var(--line)) right bottom/2px 60% no-repeat,var(--dx-vague) center bottom/100% 100% no-repeat}
/* Feuilles et fiche : le même bandeau, plus compact ; la croix à 44 px. */
html.lq .dx-feuille .room-head{margin-bottom:0;padding-bottom:30px}
html.lq .dx-feuille .dx-f-x{top:12px;right:12px;width:44px;height:44px}
@media (max-height:720px),(max-width:360px){html.lq .dx-feuille .room-head{padding-bottom:26px}}

/* ---------- Défis v2 · 5. Titres : surtitre, titre de carte, intertitre, libellé ---------- */
html.lq #scr-defis .perf-head{gap:12px;margin:0 0 16px}
html.lq #scr-defis .perf-kicker{gap:8px;font:800 12px/1.2 var(--ui);letter-spacing:.07em}
html.lq #scr-defis .perf-kicker::before{width:16px}
html.lq #scr-defis .perf-head h2,html.lq #scr-defis .room-rules h2,html.lq #scr-defis .dx-stats-h{margin-top:4px;font:700 22px/1.12 var(--display);letter-spacing:-.02em;color:var(--ink)}
html.lq #scr-defis .room-rules h2{margin:0 0 12px}
/* Intertitre : chaque partie d’une carte (« Niveau », « Rejoins une partie », « Salles disponibles », « Tes dernières parties »…),
   en casse normale, au lieu de trois styles (gris 13,5 px, capitales 12 px, titre 16 px). */
html.lq #scr-defis :is(.dx-rj-h,.dx-h3,.perf-block>h3,.perf-friends>h4),
html.lq #scr-defis .dx-niv-tete>.jeu-lab{margin:0 0 10px;color:var(--ink)!important;font:700 17px/1.2 var(--display)!important;letter-spacing:-.01em!important;text-transform:none!important}
html.lq #scr-defis .dx-h3{margin:22px 0 10px}
html.lq #scr-defis .perf-block{margin-top:24px}
html.lq #scr-defis .perf-friends>h4{margin-top:20px}
html.lq #scr-defis .dx-niv-tete{align-items:baseline;margin:0 0 14px}
html.lq #scr-defis .dx-niv-tete>.jeu-lab{margin:0}
/* « Plus c’est dur, plus ça rapporte » : une note, pas un lien (le violet gras se lisait comme un lien). */
html.lq #scr-defis .dx-niv-plus{color:var(--ink-3);font:600 13px/1.3 var(--ui)}
html.lq #scr-defis .dx-rejoindre{margin:24px 0 0}
html.lq #scr-defis .dx-rj-tete{gap:8px 10px;margin:0 0 10px}
html.lq #scr-defis .dx-rj-tete .dx-rj-h{margin:0}
/* Libellé de champ (feuilles) : le nom de la question, en titre court. */
html.lq .dx-feuille .jeu-lab{margin:0 0 10px!important;color:var(--ink)!important;font:700 15.5px/1.25 var(--display)!important;letter-spacing:-.005em}
html.lq .dx-feuille .room-field{margin-top:20px}
html.lq .dx-feuille .room-field:first-child{margin-top:20px}
/* « ou » entre « Créer ma partie » et les deux tuiles : en casse normale. */

/* ---------- Défis v2 · 6. Contrôle segmenté : celui de toute l’appli (piste lilas, pastille blanche en relief) ----------
   Onglets Jouer · Classement · Joueurs, période, manches, « Qui peut entrer ? », barème : un seul dessin. Le violet plein reste aux
   boutons d’action. */
html.lq :is(#scr-defis,.dx-feuille) .room-seg,html.lq #scr-defis .room-rules-niv{gap:4px;padding:4px!important;border-radius:var(--dx-r-tuile);background:#E9E5F8;box-shadow:inset 0 2px 0 rgba(34,28,70,.05)}
html.lq :is(#scr-defis,.dx-feuille) .room-seg .room-opt,html.lq #scr-defis .room-rules-niv button{min-height:44px;border:0;border-radius:var(--dx-r-ctl);background:transparent;color:var(--ink-2);
  font:700 14.5px/1.15 var(--display)!important;box-shadow:none;transition:background-color .15s,color .15s,transform .12s var(--press),box-shadow .12s var(--press)}
html.lq :is(#scr-defis,.dx-feuille) .room-seg .room-opt.on,html.lq #scr-defis .room-rules-niv button.is-on{background:#fff;color:var(--accent-ink);box-shadow:var(--dx-relief-s)}
html.lq :is(#scr-defis,.dx-feuille) .room-seg .room-opt.on:active{transform:translateY(2px);box-shadow:0 1px 0 var(--lip)}
html.lq #scr-defis .room-rules-niv{margin:0 0 10px}
html.lq #scr-defis .room-rules-niv button small{color:inherit;opacity:.75}
/* « ×2 pts » sous le nom du niveau (Elisa, 8 novembre, 13 h 35 : « met pts pour les coefficients ») : les trois onglets tiennent à 320 px */
html.lq #scr-defis .room-rules-niv button{flex-direction:column;align-items:center;gap:3px;padding-top:5px;padding-bottom:5px}
html.lq #scr-defis .dx-periode{margin:0 0 16px}

/* ---------- Défis v2 · 7. Pastilles de filtre (Monde, pays, Mes amis) : les pastilles .fchip de l’appli ---------- */
html.lq #scr-defis .dx-filters{gap:8px;margin:0 0 12px}
html.lq #scr-defis .dx-chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 13px;border:var(--dx-bord);border-radius:999px;background:#fff;
  box-shadow:var(--dx-relief-s);color:var(--ink-2);font:700 13.5px/1 var(--display);transition:transform .12s var(--press),box-shadow .12s var(--press),background-color .15s}
html.lq #scr-defis .dx-chip.on{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:var(--dx-relief-vs)}
html.lq #scr-defis .dx-chip:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
html.lq #scr-defis .dx-chip.on:active{box-shadow:0 0 0 var(--accent-lip)}

/* ---------- Défis v2 · 8. Choix du niveau : les cartes de choix du site (.g), le coefficient dans la couleur du niveau ---------- */
html.lq #scr-defis .room-levels{gap:10px}
html.lq #scr-defis .room-level{gap:7px;padding:16px 6px 13px!important}
html.lq #scr-defis .room-level b{font:700 15.5px/1.1 var(--display)!important}
html.lq #scr-defis .room-level.on b{color:var(--accent-ink)}
html.lq #scr-defis .room-level .room-lv-auto{top:-11px;padding:3px 7px;background:var(--mint);color:var(--ink);font:800 10.5px/1.2 var(--ui);letter-spacing:0;text-transform:none;
  rotate:-2deg;box-shadow:0 2px 0 rgba(27,22,64,.18)}
/* Les barres et les coefficients : Facile violet (plus de vert dans la feuille), Moyen orange, Difficile rouge, partout pareil. */
html.lq #scr-defis .room-level.is-f .room-bars i:nth-child(-n+1),html.lq .dx-feuille .jeu-bars.is-f b:nth-child(1){background:var(--accent)}
html.lq #scr-defis .room-level.is-m .room-bars i:nth-child(-n+2),html.lq .dx-feuille .jeu-bars.is-m b:nth-child(-n+2){background:var(--dx-m)}
html.lq #scr-defis .room-level.is-d .room-bars i,html.lq .dx-feuille .jeu-bars.is-d b{background:var(--dx-d)}

/* ---------- Défis v2 · 9. Pastilles d’information ---------- */
html.lq :is(#scr-defis,.dx-feuille) :is(.dx-plp,.dx-niv,.dx-live){display:inline-flex;align-items:center;gap:5px;padding:1px 7px;border-radius:999px;font:800 11.5px/1.4 var(--ui);font-style:normal;letter-spacing:0;vertical-align:1px}
html.lq #scr-defis .dx-plp{margin-left:6px;background:var(--accent-soft);color:var(--accent-ink)}
html.lq #scr-defis .dx-niv.is-f{background:var(--dx-f-soft);color:var(--dx-f)}
html.lq #scr-defis .dx-niv.is-m{background:var(--dx-m-soft);color:var(--dx-m)}
html.lq #scr-defis .dx-niv.is-d{background:var(--dx-d-soft);color:var(--dx-d)}
/* « 2 en direct » : la pastille « Disponible » du site (menthe, point vert) ; « Aucune salle disponible » en gris. */
html.lq #scr-defis .dx-live{padding:3px 10px;background:var(--mint);color:var(--ink);font-size:12px}
html.lq #scr-defis .dx-live::before{width:7px;height:7px;background:#14955A}
html.lq #scr-defis .dx-live.is-off{background:#F1EEFB;color:var(--ink-2)}

/* ---------- Défis v2 · 10. Listes : une tuile lilas, des rangées à plat séparées d’un filet blanc ----------
   Salles, classement, ta place, adversaires : la même liste. Plus de cadre par rangée (des cartes dans la carte). */
html.lq #scr-defis :is(.dx-list,.perf-mates,.perf-hist){gap:0;margin:0;padding:2px 10px;border-radius:var(--dx-r-tuile);background:var(--dx-tuile);list-style:none}
html.lq #scr-defis .dx-list>li,html.lq #scr-defis :is(.perf-mates,.perf-hist)>li{position:relative;gap:10px;min-height:64px;margin:0 -8px;padding:10px 8px;border:0!important;border-radius:var(--dx-r-ctl);
  background:transparent;box-shadow:none;transition:background-color .15s}
html.lq #scr-defis .dx-list>li+li::before,html.lq #scr-defis :is(.perf-mates,.perf-hist)>li+li::before{content:"";position:absolute;left:8px;right:8px;top:-1px;height:2px;border-radius:2px;background:var(--dx-filet)}
html.lq #scr-defis .dx-list>li.is-tap:active{transform:none;background:rgba(255,255,255,.7)}
/* Toi : la rangée lilas cerclée de violet (le violet reste à « Toi », comme dans les barres de Mes stats). */
html.lq #scr-defis .dx-list>li.is-me{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}
html.lq #scr-defis .dx-list>li.is-me::before,html.lq #scr-defis .dx-list>li.is-me+li::before{display:none}
html.lq #scr-defis #dx-place .dx-list{padding:0;background:none}
html.lq #scr-defis #dx-place .dx-list>li{margin:0}
/* Chargement : des barres grises, sans pointillés. */
html.lq #scr-defis .dx-list.is-wait>li,html.lq #scr-defis .dx-list>li.is-wait{border-style:none}
html.lq #scr-defis :is(.dx-list.is-wait,.dx-list>li.is-wait) .dx-t :is(b,small){background:#E3DEF5}
html.lq #scr-defis :is(.dx-list.is-wait,.dx-list>li.is-wait) .jeu-av.is-empty{border:0;background:#E3DEF5!important}
/* Le contenu d’une rangée */
html.lq #scr-defis :is(.dx-list,.perf-mates)>li>.jeu-av,html.lq #scr-defis .dx-me>.jeu-av,html.lq .dx-feuille .dx-fiche-av>.jeu-av{box-shadow:0 2px 0 rgba(27,22,64,.22)!important}
html.lq #scr-defis .dx-list>li>.jeu-av{width:40px;height:40px;font-size:17px}
html.lq #scr-defis .dx-t{gap:3px}
/* Le pseudo d’une rangée est un bouton (clavier, lecteur d’écran) : 44 px de haut, centré dans la rangée qu’on touche. */
html.lq #scr-defis button.dx-t-btn{min-height:44px;justify-content:center}
html.lq #scr-defis .dx-t>b{font:700 15.5px/1.2 var(--display);letter-spacing:-.005em}
html.lq #scr-defis .dx-t small{color:var(--ink-3);font:600 12.5px/1.35 var(--ui);text-wrap:pretty}
html.lq #scr-defis .dx-t small i{color:var(--accent-ink)}
html.lq #scr-defis .dx-rk{width:26px;color:var(--ink-2);font:800 15px/1 var(--display);font-variant-numeric:tabular-nums}
html.lq #scr-defis .dx-rk svg{width:28px;height:28px}
html.lq #scr-defis .dx-pts{color:var(--ink);font:800 16px/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
html.lq #scr-defis .dx-pts small{color:var(--ink-3);font:700 11.5px/1 var(--ui);letter-spacing:0}
/* Le classement en pages : une page = une tuile ; la page suivante dépasse à droite comme une carte qu’on fait glisser.
   min-width:0 : sans lui, une page s’élargissait à la taille de son plus long pseudo et la rangée sortait du cadre (320 px). */
html.lq #scr-defis .dx-pages{gap:12px}
html.lq #scr-defis .dx-page{min-width:0}
html.lq #scr-defis .dx-nav{margin-top:12px}
html.lq #scr-defis .dx-nav small{color:var(--ink-3);font:600 13px/1.2 var(--ui);font-variant-numeric:tabular-nums}
/* Signaler : l’icône reste discrète, la zone de toucher fait 44 px. */
html.lq #scr-defis .perf-top-flag{position:relative;width:32px;height:32px}
html.lq #scr-defis .perf-top-flag::after{content:"";position:absolute;inset:-6px}

/* ---------- Défis v2 · 11. Boutons : deux tailles, deux tons ---------- */
/* Grand (56 px) : « Créer ma partie », « Jouer un défi », « Inviter un ami », les boutons des feuilles. */
html.lq :is(#scr-defis,.dx-feuille) .room-go{min-height:56px!important;border-radius:var(--dx-r-tuile)!important;box-shadow:var(--dx-relief-v)!important;font:700 17px/1.1 var(--display)!important}
html.lq :is(#scr-defis,.dx-feuille) .room-go:active{transform:translateY(4px)!important;box-shadow:0 0 0 var(--accent-lip)!important}
html.lq #scr-defis .dx-rapide .room-go{margin-top:16px}
html.lq #scr-defis .dx-cls-go{margin-top:14px}
html.lq #scr-defis .dx-sec,html.lq #scr-defis .perf-top-btn,html.lq #scr-defis .perf-rematch{display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:56px;padding:0 16px;border:var(--dx-bord);border-radius:var(--dx-r-tuile);background:#fff;box-shadow:var(--dx-relief);color:var(--accent-ink);font:700 16.5px/1.15 var(--display);
  transition:transform .12s var(--press),box-shadow .12s var(--press),background-color .15s}
html.lq #scr-defis :is(.dx-sec,.perf-top-btn,.perf-rematch):active{transform:translateY(4px);box-shadow:0 0 0 var(--lip)}
html.lq #scr-defis .dx-sec.is-main{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:var(--dx-relief-v);font-size:17px}
html.lq #scr-defis .dx-sec.is-main:active{box-shadow:0 0 0 var(--accent-lip)}
html.lq #scr-defis .dx-sec.is-main.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink);box-shadow:var(--dx-relief-v)}
html.lq #scr-defis .dx-amis .dx-duo{gap:12px;margin-top:18px}
/* Petit (44 px) : « Rejoindre », « Défier », les flèches des pages, « ‹ Jouer ». */
html.lq #scr-defis .dx-join{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;border-radius:var(--dx-r-ctl);box-shadow:var(--dx-relief-vs);font:700 14px/1 var(--display);
  transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq #scr-defis .dx-join:active{transform:translateY(3px);box-shadow:0 0 0 var(--accent-lip)}
html.lq #scr-defis .dx-join.is-ghost{padding:0 12px;border:var(--dx-bord);box-shadow:var(--dx-relief-s)}
html.lq #scr-defis .dx-join.is-ghost:active{box-shadow:0 0 0 var(--lip)}
html.lq #scr-defis .dx-arrow{width:44px;height:44px;border:var(--dx-bord);border-radius:var(--dx-r-ctl);box-shadow:var(--dx-relief-s)}
html.lq #scr-defis .dx-arrow:not([disabled]):active{transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
html.lq #scr-defis .dx-arrow[disabled]{border-color:var(--line-2);box-shadow:none}
html.lq #scr-defis .dx-stats-tete{gap:14px;margin-bottom:14px}
/* Lien dans une phrase (« Ne plus apparaître ») : 44 px de zone de toucher, sans agrandir la ligne. */
html.lq #scr-defis .perf-top-note button{position:relative;font-size:inherit}
html.lq #scr-defis .perf-top-note button::after{content:"";position:absolute;inset:-14px -6px}
html.lq #scr-defis .perf-top-note{margin:12px 0 0;color:var(--ink-3);font:500 13px/1.5 var(--ui)}

/* ---------- Défis v2 · 12. « Rejoindre avec un code » · « Jouer en solo » : une rangée de deux tuiles, du même relief que les choix ---------- */
/* Les salles des autres niveaux, à la fin du cadre : de l’air, plus de pointillés (le pointillé dit « à venir », pas « séparé »). */
html.lq #scr-defis .dx-autres{margin-top:22px;border-top:2px solid var(--line-2)}
html.lq #scr-defis .dx-autres>.dx-h3{margin-top:20px}

/* ---------- Défis v2 · 13. États vides : un titre, une phrase, et la mascotte quand la carte est vide ---------- */
/* « Aucune salle à ton niveau ? … » prend la place de la liste, dans la même tuile (plus de cadre pointillé). */
html.lq #scr-defis .dx-vide{color:var(--ink-2);font:500 14.5px/1.5 var(--ui)}
html.lq #scr-defis .dx-vide-bloc{margin:0 0 4px;text-align:center}
html.lq #scr-defis .dx-vide-t{margin:0 0 6px;font:700 18px/1.25 var(--display)}
html.lq #scr-defis .perf-top-msg{margin:0;color:var(--ink-2);font:500 14.5px/1.5 var(--ui)}
html.lq #scr-defis #dx-place .perf-top-msg{margin:0 0 2px}
/* Le classement vide : le chat au trophée (une pose existante, posée par clsVideHTML) au-dessus de « Le classement n’attend que toi ! ». */
html.lq #scr-defis .dx-vide-bloc .chat-bonus.dx-cls-chat{display:block;width:100px;height:auto;margin:-2px auto 8px}
/* 8 novembre, 14 h 40 : un peu moins de vide autour de la mascotte, les actions plus vite à portée. */
html.lq #scr-defis .dx-vide-bloc.is-amis{margin:0}
html.lq #scr-defis .dx-vide-bloc.is-amis .chat-bonus{width:96px;margin-bottom:6px}
html.lq #scr-defis .dx-vide-bloc.is-amis .dx-vide{max-width:290px}
html.lq #scr-defis .dx-cls>.dx-h3{margin-top:22px}

/* ---------- Défis v2 · 14. Tuiles de chiffres : à plat (on les lit, on ne les touche pas) ---------- */
html.lq #scr-defis :is(.perf-kpi,.perf-times>div,.perf-pods>span),html.lq .dx-feuille .dx-fiche-kpi>div{border:0;border-radius:var(--dx-r-tuile);background:var(--dx-tuile);box-shadow:none}
html.lq #scr-defis .perf-kpis{gap:8px}
html.lq #scr-defis .perf-kpi{gap:5px;padding:13px 12px 12px}
html.lq #scr-defis .perf-kpi b{font:800 26px/1 var(--display);letter-spacing:-.025em}
html.lq #scr-defis .perf-kpi.is-long b{font-size:20px}
html.lq #scr-defis .perf-kpi small{color:var(--ink-2);font:600 12.5px/1.25 var(--ui)}
html.lq #scr-defis .perf-kpi small em{display:block;color:var(--ink-3);font-style:normal}
/* Les points : la tuile jaune soleil, à plat comme les autres. */
html.lq #scr-defis .perf-kpi.is-sun{background:var(--sun)}
html.lq #scr-defis .perf-kpi.is-sun small{color:rgba(27,22,64,.78)}
html.lq #scr-defis .perf-duo{gap:8px;margin-top:8px}
html.lq #scr-defis .perf-ratebox{border-radius:var(--dx-r-tuile);background:var(--dx-tuile);padding:12px 14px 12px 12px}
html.lq #scr-defis .perf-rate-t b{font:700 16px/1.2 var(--display)}
html.lq #scr-defis .perf-rate-t small{color:var(--ink-2);font:500 13.5px/1.4 var(--ui)}
html.lq #scr-defis .perf-times>div{gap:6px;padding:12px 13px}
html.lq #scr-defis .perf-times small{color:var(--ink-2);font:600 12.5px/1.2 var(--ui)}
html.lq #scr-defis .perf-times b{font-size:20px}
/* 9 novembre, 9 h 04 (le parcours) : les durées en clair (« 58 s », « 2 min 05 ») comme le bilan d’une partie ; la police des
   chiffres du tableau, plus celle du chrono. */
html.lq #scr-defis .perf-times b{font-family:var(--display);letter-spacing:-.01em}
html.lq #scr-defis .perf-pods span{padding:12px 6px 10px}
html.lq #scr-defis .perf-pods small{color:var(--ink-2);font:600 12px/1.2 var(--ui)}
html.lq #scr-defis :is(.perf-cap,.perf-note,.perf-legend){color:var(--ink-3);font:500 13px/1.45 var(--ui)}
html.lq #scr-defis .perf-pod-cap{color:var(--ink-2);font:500 13.5px/1.45 var(--ui)}
html.lq #scr-defis .perf-lv b{font:700 14px/1.2 var(--display)}
html.lq #scr-defis .perf-lv .is-f .perf-lvbar i{background:var(--accent)}
html.lq #scr-defis .perf-lv .is-m .perf-lvbar i{background:var(--dx-m)}
html.lq #scr-defis .perf-lv .is-d .perf-lvbar i{background:var(--dx-d)}
html.lq #scr-defis .perf-lvbar{background:var(--dx-tuile)}
html.lq #scr-defis .perf-lv em{color:var(--ink-2)}
/* Les listes de Mes stats (tes derniers adversaires, l’historique) : la liste commune. */
html.lq #scr-defis :is(.perf-mates,.perf-hist)>li{min-height:60px}
html.lq #scr-defis .perf-mate b,html.lq #scr-defis .perf-g b{font:700 15px/1.2 var(--display)}
html.lq #scr-defis .perf-mate small,html.lq #scr-defis .perf-g small{color:var(--ink-3);font:600 12.5px/1.35 var(--ui)}
html.lq #scr-defis .perf-rk{background:#fff;box-shadow:0 2px 0 var(--lip)}
html.lq #scr-defis .perf-rematch{margin-top:14px}

/* ---------- Défis v2 · 15. Le face-à-face : un seul code, de la liste des joueurs à la fiche ----------
   Le score dans une pastille ; menthe quand tu mènes, pêche quand il faut rattraper (l’orange des retards), blanche à égalité.
   Le rouge ne sert plus ici : perdre un duel n’est pas une erreur (le site met aussi une tendance qui baisse en gris, pas en rouge). */
html.lq #scr-defis :is(.dx-h2h,.perf-h2h){display:flex;flex-direction:column;align-items:flex-end;gap:4px}
html.lq #scr-defis :is(.dx-h2h,.perf-h2h) em{display:inline-flex;align-items:center;gap:3px;padding:3px 10px;border-radius:999px;background:#fff;box-shadow:0 2px 0 var(--lip);
  color:var(--ink);font:800 14px/1.2 var(--display);font-style:normal;font-variant-numeric:tabular-nums}
html.lq #scr-defis :is(.dx-h2h,.perf-h2h) small{color:var(--ink-3);font:700 11.5px/1.2 var(--ui);white-space:nowrap}
html.lq #scr-defis :is(.dx-h2h.is-up,.perf-mates li.is-up .perf-h2h) em{background:var(--dx-mene);box-shadow:0 2px 0 var(--dx-mene-lip);color:var(--dx-mene-ink)}
html.lq #scr-defis :is(.dx-h2h.is-up,.perf-mates li.is-up .perf-h2h) small{color:var(--dx-mene-t)}
html.lq #scr-defis :is(.dx-h2h.is-down,.perf-mates li.is-down .perf-h2h) em{background:var(--dx-retard);box-shadow:0 2px 0 var(--dx-retard-lip);color:var(--dx-retard-ink)}
html.lq #scr-defis :is(.dx-h2h.is-down,.perf-mates li.is-down .perf-h2h) small{color:var(--dx-retard-t)}
/* La rangée d’un adversaire : son nom garde toute la largeur ; le score passe sous le nom, « Défier » à droite.
   (Avant, à 320 px, le nom tombait à « l… » et « 4 parties · hier » sur trois lignes.) */
/* La fiche : le tableau du face-à-face, une tuile ; le chiffre de celui qui mène dans sa pastille. */
html.lq .dx-feuille .dx-fiche-kpi{gap:8px;margin:18px 0 0}
html.lq .dx-feuille .dx-fiche-kpi>div{gap:4px;padding:14px 8px 12px}
html.lq .dx-feuille .dx-fiche-kpi b{font:800 24px/1.05 var(--display);letter-spacing:-.02em}
html.lq .dx-feuille .dx-fiche-kpi small{color:var(--ink-2);font:600 12.5px/1.2 var(--ui)}
html.lq .dx-feuille .dx-fiche-duel{margin:8px 0 0;padding:16px 14px 8px;border:0!important;border-radius:var(--dx-r-tuile);background:var(--dx-tuile)!important;box-shadow:none}
html.lq .dx-feuille .dx-duel-score{gap:4px 8px;align-items:center}
html.lq .dx-feuille .dx-duel-score>span{gap:6px}
html.lq .dx-feuille .dx-duel-score b{min-width:58px;padding:5px 12px;border-radius:16px;color:var(--ink-3);font:800 38px/1 var(--display);letter-spacing:-.02em}
html.lq .dx-feuille .dx-duel-score .is-tete b{background:#fff;box-shadow:var(--dx-relief-s);color:var(--ink)!important}
html.lq .dx-feuille .dx-fiche-duel.is-up .dx-duel-score .is-tete b{background:var(--dx-mene);box-shadow:0 3px 0 var(--dx-mene-lip);color:var(--dx-mene-ink)!important}
html.lq .dx-feuille .dx-fiche-duel.is-down .dx-duel-score .is-tete b{background:var(--dx-retard);box-shadow:0 3px 0 var(--dx-retard-lip);color:var(--dx-retard-ink)!important}
html.lq .dx-feuille .dx-fiche-duel:not(.is-up):not(.is-down) .dx-duel-score b{color:var(--ink)}
html.lq .dx-feuille .dx-duel-score small{color:var(--ink-2);font:700 13.5px/1.2 var(--ui)}
html.lq .dx-feuille .dx-duel-score>span:last-child small{color:var(--accent-ink);font-weight:800}
html.lq .dx-feuille .dx-duel-score>i{padding:0;color:var(--ink-3);font:800 24px/1 var(--display);align-self:center;margin-top:-22px}
html.lq .dx-feuille .dx-duel-voir{min-height:44px;margin-top:8px;font:700 14px/1.2 var(--display)}
html.lq .dx-feuille .dx-duel-liste{gap:0;margin:2px 0 2px}
html.lq .dx-feuille .dx-duel-liste li{position:relative;padding:10px 4px;border-radius:0;background:transparent}
html.lq .dx-feuille .dx-duel-liste li+li::before{content:"";position:absolute;left:4px;right:4px;top:-1px;height:2px;border-radius:2px;background:#fff}
html.lq .dx-feuille .dx-duel-liste b{font:800 14px/1.2 var(--display)}
html.lq .dx-feuille .dx-duel-liste li.is-w b{color:var(--dx-mene-t)}
html.lq .dx-feuille .dx-duel-liste li.is-l b{color:var(--dx-retard-t)}
html.lq .dx-feuille .dx-duel-liste li.is-e b{color:var(--ink-3)}
html.lq .dx-feuille .dx-duel-liste span{color:var(--ink);font:700 13.5px/1.3 var(--ui);font-variant-numeric:tabular-nums}
html.lq .dx-feuille .dx-duel-liste small{color:var(--ink-3);font:600 12.5px/1.35 var(--ui)}
html.lq .dx-feuille .dx-duel-note{margin:6px 4px 8px;color:var(--ink-3);font:500 12.5px/1.4 var(--ui);text-align:center}
html.lq .dx-feuille .dx-fiche-h2h{margin:14px 0 0;color:var(--ink-3);font:600 13px/1.4 var(--ui)}
html.lq .dx-feuille .dx-fiche-av{border-radius:20px}

/* ---------- Défis v2 · 16. Feuilles ---------- */
html.lq .dx-feuille .dx-f-boite{border-radius:var(--dx-r-feuille)}
html.lq .dx-feuille .room-hint{display:block;margin-top:10px;color:var(--ink-3);font:500 13.5px/1.45 var(--ui)}
html.lq .dx-feuille .jeu-note{margin:16px 2px 0!important;color:var(--ink-3);font:500 13px/1.5 var(--ui)}
html.lq .dx-feuille .dx-f-pied{margin-top:12px}
html.lq .dx-feuille .room-join .jeu-input.is-code{border-radius:var(--dx-r-ctl);box-shadow:var(--dx-relief-s)}
html.lq .dx-feuille .room-join .jeu-input.is-code::placeholder{color:#8E8AA8}
html.lq .dx-feuille .dx-f-niv{gap:6px;padding:4px 11px 4px 8px;font:800 13px/1.2 var(--display)}
/* ---------- Défis v2 · 16 bis. Clavier, souris, formulaire ---------- */
/* Focus clavier : l’anneau du site (3 px violet encre, 3 px d’écart), sur tout ce qui se touche. Les tuiles sous « ou » gardent leur
   anneau intérieur (leur rangée coupe ce qui dépasse) ; le champ du code garde son halo. */
html.lq :is(#scr-defis,.dx-feuille) :is(button,[role="button"]):not(.dx-act):focus-visible{outline:3px solid var(--accent-ink);outline-offset:3px}
html.lq #scr-defis .dx-list>li[role="button"]:focus-visible{outline-offset:-2px}
/* Souris (ordinateur) : les bords foncent d’un ton, le violet s’éclaircit, comme les boutons du site. */
@media (hover:hover) and (pointer:fine){
  html.lq #scr-defis :is(.dx-me,.dx-chip:not(.on),.dx-sec:not(.is-main),.perf-top-btn,.perf-rematch,.dx-join.is-ghost,.dx-arrow:not([disabled]),.dx-retour):hover{border-color:#D6CEF3}
  html.lq :is(#scr-defis,.dx-feuille) .room-go:hover{background:#7457FF!important}
  html.lq #scr-defis :is(.dx-join:not(.is-ghost),.dx-sec.is-main:not(.on),.dx-chip.on):hover{background:#7457FF;border-color:#7457FF}
  html.lq #scr-defis .dx-list>li.is-tap:hover{background:rgba(255,255,255,.6)}
  html.lq #scr-defis .dx-points:hover{background:#E8E1FF}
}

/* ---------- Défis v2 · 17. Téléphones étroits (jusqu’à 380 px : iPhone SE, mini, 320) ---------- */
@media (max-width:380px){
  /* Les trois pastilles tiennent sur une ligne à 375 px. */
  html.lq #scr-defis .dx-filters{gap:6px}
  html.lq #scr-defis .dx-chip{padding:0 10px;font-size:13px}
  /* Classement : le rang, l’avatar et les points se serrent pour laisser la place au pseudo (48 px avant, à 320 px). */
  html.lq #scr-defis .dx-list>li:has(>.dx-rk){gap:6px}
  html.lq #scr-defis .dx-list>li:has(>.dx-rk)>.jeu-av{width:34px;height:34px;font-size:14.5px}
  html.lq #scr-defis .dx-rk{width:20px;font-size:14px}
  html.lq #scr-defis .dx-rk svg{width:24px;height:24px}
  html.lq #scr-defis .dx-pts{font-size:14.5px}
  html.lq #scr-defis .dx-pts small{font-size:10.5px}
  /* « Depuis toujours » tient sur une ligne. */
  html.lq #scr-defis .dx-periode .room-opt{padding:0 4px!important;font-size:13.5px!important}
}
/* ---------- Défis v2 · 17 bis. Petits écrans (320 à 360 px) : marges plus serrées, les rangées gardent les pseudos ---------- */
@media (max-width:360px){
  html.lq #scr-defis,html.lq .dx-feuille{--dx-marge:14px}
  html.lq :is(#scr-defis,.dx-feuille) .room-kicker:not(.dx-rapide .room-kicker){font-size:11.5px!important;letter-spacing:.05em!important}
  html.lq #scr-defis :is(.dx-list,.perf-mates,.perf-hist){padding:2px 8px}
  html.lq #scr-defis .dx-list>li,html.lq #scr-defis :is(.perf-mates,.perf-hist)>li{gap:8px;margin:0 -6px;padding:10px 6px}
  html.lq #scr-defis .dx-list>li>.jeu-av{width:36px;height:36px;font-size:15px}
  html.lq #scr-defis .dx-t>b{font-size:15px}
  html.lq #scr-defis .dx-join{padding:0 11px;font-size:14px}
  html.lq #scr-defis .dx-join.is-ghost{padding:0 10px}
  html.lq #scr-defis .dx-list>li:has(>.dx-rk)>.jeu-av{width:32px;height:32px;font-size:14px}
  html.lq #scr-defis .dx-pts{font-size:14px}
  html.lq #scr-defis .dx-periode .room-opt{font-size:13px!important}
  /* « Niveau recommandé » sur deux lignes, pour rester dans la largeur de sa carte (coupé par le bord du cadre avant). */
  html.lq #scr-defis .dx-niv-tete{margin-bottom:24px}
  html.lq #scr-defis .room-level .room-lv-auto{top:-18px;width:max-content;max-width:76px;padding:3px 6px;white-space:normal;text-align:center;line-height:1.05}
  /* Pas de page qui dépasse : la largeur va aux pseudos ; les flèches et les points disent qu’il y a d’autres pages. */
  html.lq #scr-defis .dx-page{flex-basis:100%}
  html.lq #scr-defis .perf-kpi b{font-size:22px}
  html.lq #scr-defis .perf-kpi{padding:11px 10px 10px}
  html.lq .dx-feuille .dx-duel-score b{font-size:34px}
}

/* ---------- Défis v2 · 18. Confort de lecture « grand texte » : les textes grandissent, les surtitres et pastilles restent mesurés ----------
   (la règle générale de l’appli passe chaque <p> à 17 px : les surtitres en capitales dépassaient alors les titres). */
html.lq[data-reading="large"] #scr-defis .perf-kicker,html.lq[data-reading="large"] :is(#scr-defis,.dx-feuille) .room-kicker:not(.dx-rapide .room-kicker){font-size:13.5px!important;line-height:1.2!important}
html.lq[data-reading="large"] :is(#scr-defis,.dx-feuille) :not(.dx-rapide)>.room-head .room-sub{font-size:16.5px;line-height:1.5}
html.lq[data-reading="large"] #scr-defis :is(.dx-rj-h,.dx-h3,.perf-block>h3,.perf-friends>h4),html.lq[data-reading="large"] #scr-defis .dx-niv-tete>.jeu-lab{font-size:19px!important;line-height:1.2!important}
html.lq[data-reading="large"] .dx-feuille .jeu-lab{font-size:17px!important;line-height:1.25!important}
html.lq[data-reading="large"] #scr-defis :is(.dx-vide:not(.is-aucune),.perf-top-msg){font-size:16.5px;line-height:1.5}
html.lq[data-reading="large"] #scr-defis .dx-vide-t{font-size:20px;line-height:1.25}
html.lq[data-reading="large"] #scr-defis .dx-t>b,html.lq[data-reading="large"] #scr-defis .dx-me-t>b{font-size:17px}
html.lq[data-reading="large"] #scr-defis :is(.dx-t small,.dx-me-t small,.dx-points-t small,.perf-mate small,.perf-g small,.perf-rate-t small){font-size:15px}
html.lq[data-reading="large"] #scr-defis :is(.perf-cap,.perf-note,.perf-legend,.perf-pod-cap,.perf-top-note,.dx-niv-plus){font-size:15px;line-height:1.5}
html.lq[data-reading="large"] #scr-defis :is(.perf-kpi small,.perf-times small,.perf-pods small),html.lq[data-reading="large"] .dx-feuille .dx-fiche-kpi small{font-size:14px}
html.lq[data-reading="large"] :is(#scr-defis,.dx-feuille) :is(.dx-plp,.dx-niv,.dx-live){font-size:13.5px}
html.lq[data-reading="large"] .dx-feuille :is(.room-hint,.jeu-note,.dx-fiche-h2h,.dx-duel-note,.dx-duel-liste small){font-size:15px;line-height:1.5}
html.lq[data-reading="large"] .dx-feuille :is(.dx-duel-liste span,.dx-duel-voir){font-size:15.5px}
/* Grand texte : pas de page qui dépasse dans le classement, la largeur va aux pseudos. */
html.lq[data-reading="large"] #scr-defis .dx-page{flex-basis:100%}

/* ---------- Défis v2 · 19. Mouvement réduit : rien ne bouge, l’appui se voit par la couleur ---------- */
@media (prefers-reduced-motion:reduce){
  html.lq #scr-defis :is(.dx-me,.dx-points,.dx-chip,.dx-join,.dx-sec,.dx-arrow,.dx-retour,.perf-top-btn,.perf-rematch,.dx-list>li,.room-opt,.room-rules-niv button),
  html.lq .dx-feuille .room-opt{transition:none!important}
  html.lq #scr-defis :is(.dx-me,.dx-points,.dx-chip,.dx-join,.dx-sec,.dx-arrow,.dx-retour,.perf-top-btn,.perf-rematch):active,
  html.lq :is(#scr-defis,.dx-feuille) .room-go:active{transform:none!important}
}
html.lq[data-motion="reduce"] #scr-defis :is(.dx-me,.dx-points,.dx-chip,.dx-join,.dx-sec,.dx-arrow,.dx-retour,.perf-top-btn,.perf-rematch,.dx-list>li,.room-opt,.room-rules-niv button),
html.lq[data-motion="reduce"] .dx-feuille .room-opt{transition:none!important}
html.lq[data-motion="reduce"] #scr-defis :is(.dx-me,.dx-points,.dx-chip,.dx-join,.dx-sec,.dx-arrow,.dx-retour,.perf-top-btn,.perf-rematch):active,
html.lq[data-motion="reduce"] :is(#scr-defis,.dx-feuille) .room-go:active{transform:none!important}







/* ==========================================================================
   Défis v2 · 20. La nouvelle structure (designer produit, 7 novembre), habillée de la DA ci-dessus
   Jouer : un bandeau court, « Créer ma partie » visible sans défiler, deux boutons secondaires, des salles à plat.
   Classement et Joueurs : plus de carte autour de l’onglet ; une surface blanche par liste ; une ligne par joueur.
   ========================================================================== */

/* ---------- Défis v2 · 20.1 Jouer : la carte du joueur, un peu plus basse ---------- */
html.lq #scr-defis .dx-me{min-height:62px;gap:10px;padding:8px 10px 8px 12px}
html.lq #scr-defis .dx-me>.jeu-av{width:42px;height:42px;font-size:18px}
html.lq #scr-defis .dx-me-t small{font-size:12.5px}

/* ---------- Défis v2 · 20.2 Jouer : le bandeau d’avant, le chat à gauche et la phrase entière (8 novembre, 0 h 17) ---------- */

/* ---------- Défis v2 · 20.3 Jouer : le niveau, des cartes de choix un peu moins hautes ---------- */
html.lq #scr-defis .dx-rapide.is-v2 .dx-r-niv{margin-top:16px}
html.lq #scr-defis .dx-rapide.is-v2 .dx-niv-tete{margin-bottom:13px}
html.lq #scr-defis .dx-rapide.is-v2 .dx-niv-tete .jeu-lab{margin:0!important}
html.lq #scr-defis .dx-rapide.is-v2 .room-level{gap:4px;padding:10px 6px 8px!important}
html.lq #scr-defis .dx-rapide.is-v2 .room-level .room-bars{height:16px}

/* ---------- Défis v2 · 20.4 Jouer : « Rejoins une partie », puis « Créer ma partie » ---------- */
html.lq #scr-defis .dx-rapide.is-v2 .dx-rejoindre{margin:18px 0 0}
html.lq #scr-defis .dx-rapide.is-v2 .dx-rj-tete{min-height:28px;gap:6px 8px;margin-bottom:8px}
/* « Aucune salle disponible » tient à côté de « Rejoins une partie » à 390 px (Elisa, 22 h 29 : « monte le "aucune salle disponible" »). */
html.lq #scr-defis .dx-rapide.is-v2 .dx-live.is-off{padding:3px 8px;font-weight:700;font-size:11.5px}
html.lq #scr-defis .dx-live.is-off::before{display:none}   /* pas de point « en direct » quand rien ne l’est */
/* Rien à son niveau : la phrase d’Elisa garde son cadre en pointillés (8 novembre, 0 h 17), le lien vers les autres niveaux dessous. */
html.lq #scr-defis .dx-rapide.is-v2 .dx-rejoindre .dx-vide.is-aucune+.dx-ancre{margin-top:4px}
/* « Voir les 2 autres salles » : un lien de 44 px, sa flèche vers le bas. */
html.lq #scr-defis .dx-ancre{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin:0 0 -8px;padding:0 2px;border:0;background:none;color:var(--accent-ink);font:800 14px/1.2 var(--ui);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.lq #scr-defis .dx-ancre svg{flex:none;width:16px;height:16px;rotate:90deg}
html.lq #scr-defis .dx-ancre:focus-visible{border-radius:8px}
/* Une salle : deux lignes de texte au plus ; le pseudo se coupe avant la pastille « 2/5 ». */
html.lq #scr-defis .dx-rapide.is-v2 .dx-t>b{display:flex;align-items:center;gap:6px;min-width:0}
html.lq #scr-defis .dx-rapide.is-v2 .dx-nom{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.lq #scr-defis .dx-rapide.is-v2 .dx-plp{flex:none;margin-left:0}
html.lq #scr-defis .dx-rapide.is-v2 .dx-t small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.lq #scr-defis .dx-rapide.is-v2 .dx-act-go{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px}
html.lq #scr-defis .dx-rapide.is-v2 .dx-act-go svg{width:20px;height:20px}

/* ---------- Défis v2 · 20.5 Jouer : « Rejoindre avec un code » · « Jouer en solo », deux boutons secondaires (plus de « ou » ni de tuiles) ---------- */
html.lq #scr-defis .dx-rapide.is-v2 .dx-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
html.lq #scr-defis .dx-rapide.is-v2 .dx-act{flex-direction:row;justify-content:center;gap:6px;min-height:52px;padding:6px 8px;border:var(--dx-bord);border-radius:var(--dx-r-tuile);background:#fff;
  box-shadow:var(--dx-relief-s);transition:transform .12s var(--press),box-shadow .12s var(--press),background-color .15s}
html.lq #scr-defis .dx-rapide.is-v2 .dx-act+.dx-act{box-shadow:var(--dx-relief-s)}
html.lq #scr-defis .dx-rapide.is-v2 .dx-act:active{transform:translateY(3px);box-shadow:0 0 0 var(--lip);background:#fff}
html.lq #scr-defis .dx-rapide.is-v2 .dx-act[aria-expanded="true"]{background:var(--accent-soft)}
html.lq #scr-defis .dx-rapide.is-v2 .dx-act:focus-visible{outline:3px solid var(--accent-ink);outline-offset:3px;border-radius:var(--dx-r-tuile)}
html.lq #scr-defis .dx-rapide.is-v2 .dx-act-stk{width:26px;height:26px;margin:0}
/* Deux lignes au plus (« Rejoindre / avec un code ») : le retour à la ligne normal, pas l’équilibré (qui en faisait trois). */
html.lq #scr-defis .dx-rapide.is-v2 .dx-act b{color:var(--accent-ink);font:700 14.5px/1.15 var(--display)!important;text-align:left;text-wrap:wrap}

/* ---------- Défis v2 · 20.6 Jouer : les salles des autres niveaux, à la fin du cadre (le lien y descend sans passer sous l’en-tête collant) ---------- */
html.lq #scr-defis .dx-rapide.is-v2 .dx-autres{scroll-margin-top:76px}
html.lq #scr-defis .dx-rapide.is-v2 .dx-autres:empty{margin:0;border:0}
html.lq #scr-defis .dx-rapide.is-v2 .dx-autres>.dx-h3{outline:none}

/* ---------- Défis v2 · 20.7 Classement : les filtres sur le fond, une légende, une carte blanche par page ---------- */
html.lq #scr-defis .dx-cls.is-v2{margin:0 0 14px}
html.lq #scr-defis .dx-cls.is-v2 .dx-filtres{display:flex;flex-direction:column;gap:10px;margin:0 0 14px}
html.lq #scr-defis .dx-cls.is-v2 .dx-filters,html.lq #scr-defis .dx-cls.is-v2 .dx-periode{margin:0}
html.lq #scr-defis .dx-cls.is-v2 .dx-cls-compte{margin:0 4px 8px;color:var(--ink-2);font:700 13px/1.3 var(--ui)}
html.lq #scr-defis .dx-cls.is-v2 .dx-cls-compte:empty{display:none}
html.lq #scr-defis .dx-cls.is-v2 .dx-pages{padding-bottom:6px}
/* Une page : la carte blanche (sur le fond lavande, une tuile lilas ne se verrait pas) ; ses rangées à plat, un filet lilas entre elles. */
html.lq #scr-defis .dx-cls.is-v2 .dx-page{padding:4px 12px;border:var(--dx-bord);border-radius:var(--dx-r-carte);background:#fff;box-shadow:var(--dx-relief);box-sizing:border-box}
html.lq #scr-defis .dx-cls.is-v2 .dx-pages.is-seule .dx-page{flex-basis:100%}
html.lq #scr-defis :is(.dx-cls.is-v2 .dx-page,.dx-amis.is-v2 .dx-adv)>li+li::before{background:var(--line-2)}
html.lq #scr-defis :is(.dx-cls.is-v2 .dx-page,.dx-amis.is-v2 .dx-adv)>li.is-tap:active{background:var(--dx-tuile)}
html.lq #scr-defis .dx-cls.is-v2 .dx-page>li.is-me{margin:4px -6px}
html.lq #scr-defis .dx-cls.is-v2 .dx-go{flex:none;display:grid;place-items:center;width:16px;margin-left:-4px;color:var(--ink-3)}
html.lq #scr-defis .dx-cls.is-v2 .dx-go svg{width:16px;height:16px}
html.lq #scr-defis .dx-nav[hidden]{display:none}
/* Les messages (hors ligne, filtre indisponible, aucun ami classé) et l’état vide : la même carte que la liste. */
html.lq #scr-defis .dx-cls.is-v2 :is(.dx-cls-msg,#dx-pager>.dx-vide-bloc){margin:0;padding:18px 16px;border:var(--dx-bord);border-radius:var(--dx-r-carte);background:#fff;box-shadow:var(--dx-relief)}
html.lq #scr-defis .dx-cls.is-v2 .dx-cls-msg .perf-top-btn{margin-top:14px}
html.lq #scr-defis .dx-cls.is-v2 .dx-vide-bloc.is-cls{text-align:center}
html.lq #scr-defis .dx-cls.is-v2 .dx-vide-bloc.is-cls .perf-top-msg{max-width:290px;margin:0 auto}
/* « Ta place dans le classement » : le titre, (ta ligne), l’écart avec le joueur devant, puis « Jouer un défi ». */
html.lq #scr-defis .dx-cls.is-v2 #dx-place-h{margin:20px 4px 10px}
html.lq #scr-defis .dx-cls.is-v2 #dx-place-h[hidden]{display:none}
html.lq #scr-defis .dx-cls.is-v2 #dx-pager>.dx-vide-bloc~*,html.lq #scr-defis .dx-cls.is-v2 #dx-place:has(>.dx-cls-go:only-child){margin-top:4px}
html.lq #scr-defis .dx-cls.is-v2 .dx-ecart{display:flex;align-items:flex-start;gap:10px;margin:0 4px;color:var(--ink);font:600 14.5px/1.45 var(--ui);text-wrap:pretty}
html.lq #scr-defis .dx-cls.is-v2 #dx-place>.dx-list+.dx-ecart{margin-top:12px}
html.lq #scr-defis .dx-cls.is-v2 .dx-ecart b{font-weight:800}
html.lq #scr-defis .dx-cls.is-v2 .dx-ecart-ico{flex:none;display:grid;place-items:center;width:24px;height:24px;margin-top:-1px;border-radius:50%;background:var(--sun);box-shadow:0 2px 0 #E0A100;color:#1B1640;font:800 13px/1 var(--ui)}
html.lq #scr-defis .dx-cls.is-v2 #dx-place>.perf-top-msg{margin:0 4px}
html.lq #scr-defis .dx-cls.is-v2 .dx-cls-note{margin:12px 4px 0}

/* ---------- Défis v2 · 20.8 Adversaires : le titre sur le fond, les deux boutons, puis la liste dans sa carte ---------- */
html.lq #scr-defis .dx-amis.is-v2{margin:0 0 14px}
html.lq #scr-defis .dx-amis.is-v2 .dx-amis-tete{display:flex;align-items:center;gap:12px;margin:2px 4px 14px}
html.lq #scr-defis .dx-amis.is-v2 .dx-amis-tete .perf-stk{flex:none;width:44px;height:44px}
html.lq #scr-defis .dx-amis.is-v2 .dx-amis-tete h2{margin:4px 0 0;color:var(--ink);font:700 22px/1.12 var(--display);letter-spacing:-.02em}
html.lq #scr-defis .dx-amis.is-v2 .dx-amis-actions{margin:0 0 14px}
html.lq #scr-defis .dx-amis.is-v2 .dx-amis-actions .dx-duo{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0}
html.lq #scr-defis .dx-amis.is-v2 .dx-amis-actions .dx-sec{width:auto;min-height:52px;padding:0 10px;font-size:15px;text-align:center}
html.lq #scr-defis .dx-sec>svg{flex:none;width:22px;height:22px}
/* La liste : une carte blanche, une ligne par joueur ; le score du face-à-face en pastille à côté du pseudo. */
html.lq #scr-defis .dx-amis.is-v2 .dx-adv{padding:4px 12px;border:var(--dx-bord);border-radius:var(--dx-r-carte);background:#fff;box-shadow:var(--dx-relief)}
html.lq #scr-defis .dx-amis.is-v2 .dx-adv .dx-t>b{display:flex;align-items:center;gap:7px;min-width:0}
html.lq #scr-defis .dx-amis.is-v2 .dx-adv .dx-nom{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.lq #scr-defis .dx-amis.is-v2 .dx-adv .dx-t small{display:flex;align-items:center;gap:5px;min-width:0;overflow:hidden;white-space:nowrap}
html.lq #scr-defis .dx-amis.is-v2 .dx-adv .dx-t small em{font-style:normal;font-weight:800}
html.lq #scr-defis .dx-amis.is-v2 .dx-adv .dx-t small em.is-up{color:var(--dx-mene-t)}
html.lq #scr-defis .dx-amis.is-v2 .dx-adv .dx-t small em.is-down{color:var(--dx-retard-t)}
html.lq #scr-defis .dx-amis.is-v2 .dx-score{flex:none;padding:2px 8px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line),0 2px 0 var(--lip);color:var(--ink);
  font:800 13px/1.3 var(--display);font-variant-numeric:tabular-nums}
html.lq #scr-defis .dx-amis.is-v2 .dx-score.is-up{background:var(--dx-mene);box-shadow:0 2px 0 var(--dx-mene-lip);color:var(--dx-mene-ink)}
html.lq #scr-defis .dx-amis.is-v2 .dx-score.is-down{background:var(--dx-retard);box-shadow:0 2px 0 var(--dx-retard-lip);color:var(--dx-retard-ink)}
/* En salle maintenant : le point vert (le « Disponible » du site), le texte en vert foncé. */
html.lq #scr-defis .dx-amis.is-v2 .dx-adv li.is-live .dx-t small{color:var(--dx-mene-t);font-weight:800}
html.lq :is(#scr-defis,.dx-feuille) .dx-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#14955A;box-shadow:0 0 0 3px rgba(20,149,90,.18)}
/* Liste vide : une carte, la mascotte, le titre, la phrase, puis les deux boutons (« Créer une partie », « Rejoindre avec un code »). */
html.lq #scr-defis .dx-amis.is-v2 .dx-amis-vide{padding:12px 16px 16px;border:var(--dx-bord);border-radius:var(--dx-r-carte);background:#fff;box-shadow:var(--dx-relief)}
html.lq #scr-defis .dx-amis.is-v2 .dx-amis-vide .dx-duo{display:flex;flex-direction:column;margin-top:14px;gap:10px}
html.lq #scr-defis .dx-amis.is-v2 .dx-amis-vide .dx-duo .dx-sec{flex:none;width:100%}

/* ---------- Défis v2 · 20.9 La fiche : « En salle maintenant » et « Signaler ce pseudo » ---------- */
html.lq .dx-feuille .dx-fiche-live{display:flex;align-items:center;gap:10px;margin:16px 0 0;padding:8px 8px 8px 14px;border-radius:var(--dx-r-tuile);background:#E6FAF0}
html.lq .dx-feuille .dx-fiche-live p{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;margin:0}
html.lq .dx-feuille .dx-fiche-live b{color:var(--dx-mene-t);font:700 15px/1.2 var(--display)}
html.lq .dx-feuille .dx-fiche-live small{color:var(--ink-2);font:600 12.5px/1.3 var(--ui);white-space:nowrap}
html.lq .dx-feuille .dx-fiche-live .dx-niv{display:inline-flex;padding:1px 7px;border-radius:999px;font:800 11.5px/1.4 var(--ui);font-style:normal}
html.lq .dx-feuille .dx-fiche-live .dx-niv.is-f{background:var(--dx-f-soft);color:var(--dx-f)}
html.lq .dx-feuille .dx-fiche-live .dx-niv.is-m{background:var(--dx-m-soft);color:var(--dx-m)}
html.lq .dx-feuille .dx-fiche-live .dx-niv.is-d{background:var(--dx-d-soft);color:var(--dx-d)}
html.lq .dx-feuille .dx-fiche-live .dx-join{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border:0;border-radius:var(--dx-r-ctl);
  background:var(--accent);box-shadow:var(--dx-relief-vs);color:#fff;font:700 14px/1 var(--display);cursor:pointer;transition:transform .12s var(--press),box-shadow .12s var(--press)}
html.lq .dx-feuille .dx-fiche-live .dx-join:active{transform:translateY(3px);box-shadow:0 0 0 var(--accent-lip)}
html.lq .dx-feuille .dx-fiche-live+.dx-fiche-kpi{margin-top:10px}
html.lq .dx-feuille .dx-fiche-signal{display:block;min-height:44px;margin:4px auto -10px;padding:0 12px;border:0;background:none;color:var(--ink-3);font:600 13px/1.2 var(--ui);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
html.lq .dx-feuille .dx-fiche-signal:focus-visible{outline:3px solid var(--accent-ink);outline-offset:2px;border-radius:8px}

/* ---------- Défis v2 · 20.10 Les feuilles Créer, Code, Solo : le bandeau plus bas, les réglages montent ; « Tu joues en tant que » reste violet ---------- */
html.lq .dx-feuille:not([data-k="joueur"]) .room-head{gap:12px;padding:16px 62px 28px 16px}
html.lq .dx-feuille:not([data-k="joueur"]) .room-stk{width:46px;height:46px;padding:6px;border-radius:15px}
html.lq .dx-feuille:not([data-k="joueur"]) .room-head h2{margin-top:3px;font-size:20px!important}
html.lq .dx-feuille:not([data-k="joueur"]) .room-head .room-sub{margin-top:5px;font-size:13.5px;line-height:1.4}
html.lq .dx-feuille:not([data-k="joueur"]) .room-field:first-child{margin-top:16px}
html.lq body .dx-feuille .jeu-me{gap:12px;padding:10px 12px}
html.lq body .dx-feuille .jeu-me .jeu-av{width:38px;height:38px}

/* ---------- Défis v2 · 20.11 Mes stats : une page à part (les onglets se cachent, defisPeindre) ; un seul titre ---------- */
html.lq #scr-defis #defis-tabs[hidden]{display:none}
html.lq #scr-defis #defis-stats .dx-stats-tete{margin:18px 0 14px}
html.lq #scr-defis #defis-perf>.perf-card>.perf-head{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%)}

/* ---------- Défis v2 · 20.12 Écrans bas (iPhone SE, 8 : 667 px de haut) : le bandeau sans sous-titre, tout se resserre un peu ---------- */
@media (max-height:700px){
  html.lq #scr-defis .dx-me{min-height:58px;padding:7px 12px}
  html.lq #scr-defis .dx-rapide.is-v2 .dx-r-niv{margin-top:14px}
  html.lq #scr-defis .dx-rapide.is-v2 .room-level{padding:9px 4px 8px!important}
  html.lq #scr-defis .dx-rapide.is-v2 .dx-act-go{margin-top:14px}
}

/* ---------- Défis v2 · 20.13 Téléphones étroits ---------- */
@media (max-width:360px){
  html.lq #scr-defis .dx-rapide.is-v2 .dx-act{padding:6px 8px}
  html.lq #scr-defis .dx-rapide.is-v2 .dx-act-stk{display:none}
  html.lq #scr-defis .dx-rapide.is-v2 .dx-act b{font-size:14px!important;text-align:center}
  html.lq #scr-defis .dx-amis.is-v2 .dx-amis-actions .dx-sec{font-size:14px;padding:0 8px}
  /* « Adversaires » (8 novembre, 15 h 09) : les trois onglets tiennent à 320 px ; « Rejoindre avec un code » sur une ligne dans la carte vide. */
  html.lq #scr-defis .dx-tabs .room-opt{padding-left:4px!important;padding-right:4px!important;font-size:clamp(13px,4.06vw,14.5px)!important}
  html.lq #scr-defis .dx-amis.is-v2 .dx-amis-vide .dx-sec{gap:7px;padding:0 10px;font-size:15px}
  html.lq #scr-defis .dx-amis.is-v2 .dx-sec>svg{width:20px;height:20px}
  html.lq #scr-defis .dx-amis.is-v2 .dx-adv>li>.jeu-av{width:36px;height:36px;font-size:15px}
  html.lq #scr-defis .dx-amis.is-v2 .dx-large{display:none}
  html.lq #scr-defis .dx-amis.is-v2 .dx-adv>li{gap:8px}
  html.lq #scr-defis .dx-amis.is-v2 .dx-adv .dx-join{padding:0 10px;font-size:13.5px}
  html.lq #scr-defis .dx-amis.is-v2 .dx-score{padding:2px 6px;font-size:12px}
  html.lq #scr-defis .dx-cls.is-v2 .dx-page,html.lq #scr-defis .dx-amis.is-v2 .dx-adv{padding:4px 10px}
}

/* ---------- Défis v2 · 20.14 Grand texte et mouvement réduit, pour les nouveaux éléments ---------- */
html.lq[data-reading="large"] #scr-defis .dx-ecart{font-size:16.5px;line-height:1.5}
html.lq[data-reading="large"] #scr-defis :is(.dx-cls-compte,.dx-ancre){font-size:15px}
html.lq[data-reading="large"] #scr-defis .dx-rapide.is-v2 .dx-act b{font-size:15.5px!important}
html.lq[data-reading="large"] .dx-feuille :is(.dx-fiche-live small,.dx-fiche-signal){font-size:15px}
html.lq[data-reading="large"] #scr-defis .dx-amis.is-v2 .dx-large{display:none}
@media (prefers-reduced-motion:reduce){
  html.lq #scr-defis .dx-rapide.is-v2 .dx-act,html.lq .dx-feuille .dx-fiche-live .dx-join{transition:none!important}
  html.lq #scr-defis .dx-rapide.is-v2 .dx-act:active,html.lq .dx-feuille .dx-fiche-live .dx-join:active{transform:none!important}
  html.lq #scr-defis .dx-rapide.is-v2 .dx-autres{scroll-behavior:auto}
}
html.lq[data-motion="reduce"] #scr-defis .dx-rapide.is-v2 .dx-act,html.lq[data-motion="reduce"] .dx-feuille .dx-fiche-live .dx-join{transition:none!important}
html.lq[data-motion="reduce"] #scr-defis .dx-rapide.is-v2 .dx-act:active,html.lq[data-motion="reduce"] .dx-feuille .dx-fiche-live .dx-join:active{transform:none!important}

/* ---------- Défis v2 · 20.15 La feuille du code (8 novembre, 0 h 23) : le bouton s’allume à 6 caractères (la confidentialité, repliée ici
   d’abord, est passée dans Mon compte le même jour à 9 h 57) ---------- */
html.lq :is(#scr-defis,.dx-feuille) .room-go:disabled{background:#E3DEF5!important;box-shadow:0 4px 0 #D3CCEE!important;color:#6A6490!important;cursor:default}
html.lq :is(#scr-defis,.dx-feuille) .room-go:disabled:active{transform:none!important;box-shadow:0 4px 0 #D3CCEE!important}
html.lq :is(#scr-defis,.dx-feuille) .room-go:disabled svg{opacity:.55}

/* ---------- Défis v2 · 20.16 Le coefficient mis en avant (8 novembre, 8 h 00 : « une animation ou une micro interaction qui le met en avant ») ----------
   À l’arrivée sur Jouer, les trois pastilles ×1, ×2, ×4 sautent l’une après l’autre ; celle du niveau choisi brille de loin en loin
   (un reflet doré la traverse) ; choisir un niveau la fait sauter et en fait sortir des étincelles (dxCoefFete). */
html.lq #scr-defis .dx-rapide .room-level .room-lv-x{position:relative;isolation:isolate;overflow:hidden}
html.lq #scr-defis .dx-rapide.is-entree .room-level .room-lv-x{animation:dxXEntree .55s cubic-bezier(.3,.7,.3,1.5) .25s both}
html.lq #scr-defis .dx-rapide.is-entree .room-level:nth-child(2) .room-lv-x{animation-delay:.37s}
html.lq #scr-defis .dx-rapide.is-entree .room-level:nth-child(3) .room-lv-x{animation-delay:.49s}
@keyframes dxXEntree{0%{opacity:0;transform:scale(.4) rotate(-10deg)}60%{opacity:1;transform:scale(1.2) rotate(3deg)}100%{opacity:1;transform:none}}
html.lq #scr-defis .dx-rapide .room-level .room-lv-x.is-pop{animation:dxXPop .6s cubic-bezier(.3,.7,.3,1.4) both}
@keyframes dxXPop{0%{transform:none}30%{transform:scale(1.34) rotate(-6deg)}62%{transform:scale(.93) rotate(2deg)}100%{transform:none}}
html.lq #scr-defis .dx-rapide .room-level.on .room-lv-x::after{content:"";position:absolute;top:-4px;bottom:-4px;left:0;z-index:-1;width:65%;
  background:linear-gradient(100deg,rgba(255,200,61,0),rgba(255,200,61,.8) 50%,rgba(255,200,61,0));transform:translateX(-170%) skewX(-18deg);animation:dxXReflet 4.6s ease-in-out 1.2s infinite}
@keyframes dxXReflet{0%,60%{transform:translateX(-170%) skewX(-18deg)}80%,100%{transform:translateX(260%) skewX(-18deg)}}
/* Les étincelles : posées au centre de la pastille (dxCoefFete), une onde dorée s’élargit autour d’elle et des étoiles partent en
   gerbe, puis s’éteignent. */
html.lq #scr-defis .dx-x-fete{position:absolute;z-index:3;width:0;height:0;pointer-events:none}
html.lq #scr-defis .dx-x-fete::before{content:"";position:absolute;left:-34px;top:-17px;width:68px;height:34px;border:2.5px solid var(--sun);border-radius:999px;
  box-sizing:border-box;opacity:0;animation:dxXOnde .62s cubic-bezier(.2,.7,.3,1) both}
html.lq #scr-defis .dx-x-fete.is-fort::before{border-width:3px;animation-duration:.72s}
@keyframes dxXOnde{0%{opacity:.95;transform:scale(.75)}100%{opacity:0;transform:scale(1.75)}}
html.lq #scr-defis .dx-x-fete i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;background:var(--sun);opacity:0;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:dxXEtincelle .8s cubic-bezier(.2,.7,.3,1) both}
html.lq #scr-defis .dx-x-fete i:nth-child(1){--dx:-52px;--dy:-30px}
html.lq #scr-defis .dx-x-fete i:nth-child(2){--dx:50px;--dy:-34px;animation-delay:.04s}
html.lq #scr-defis .dx-x-fete i:nth-child(3){--dx:-46px;--dy:20px;animation-delay:.08s;left:-5px;top:-5px;width:10px;height:10px;background:var(--mint)}
html.lq #scr-defis .dx-x-fete i:nth-child(4){--dx:48px;--dy:22px;animation-delay:.11s;left:-5px;top:-5px;width:10px;height:10px;background:var(--accent)}
html.lq #scr-defis .dx-x-fete i:nth-child(5){--dx:-12px;--dy:-52px;animation-delay:.06s;left:-8px;top:-8px;width:16px;height:16px}
html.lq #scr-defis .dx-x-fete i:nth-child(6){--dx:16px;--dy:42px;animation-delay:.13s;left:-6px;top:-6px;width:12px;height:12px;background:var(--mint)}
@keyframes dxXEtincelle{0%{opacity:0;transform:translate(0,0) scale(.3) rotate(0)}20%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1) rotate(100deg)}}
@media (prefers-reduced-motion:reduce){
  html.lq #scr-defis .dx-rapide .room-level .room-lv-x,html.lq #scr-defis .dx-rapide .room-level .room-lv-x::after{animation:none!important}
  html.lq #scr-defis .dx-x-fete{display:none}
}
html.lq[data-motion="reduce"] #scr-defis .dx-rapide .room-level .room-lv-x,html.lq[data-motion="reduce"] #scr-defis .dx-rapide .room-level .room-lv-x::after{animation:none!important}
html.lq[data-motion="reduce"] #scr-defis .dx-x-fete{display:none}

/* ---------- Défis v2 · 20.17 La feuille « Joue seul » d’après la maquette d’Elisa (8 novembre, 8 h 21) : le bandeau en deux temps
   (l’autocollant à côté du surtitre et du titre ; la phrase, puis le niveau et « Points ×N », sur toute la largeur), « Combien de
   manches ? » en trois cartes, « Jusqu’à 30 min de jeu » dessous. « Créer ma partie » et le code prennent le même bandeau. Les
   couleurs et les reliefs restent ceux de l’appli (le bouton violet, pas noir). ---------- */
html.lq .dx-feuille:not([data-k="joueur"]) .room-head.dx-f-tete{display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;column-gap:12px;row-gap:0;padding:16px 16px 28px}
html.lq .dx-feuille .dx-f-tete>.dx-f-titres{min-width:0;padding-right:46px}
html.lq .dx-feuille .dx-f-tete>.dx-f-titres>.room-kicker{margin:0}
html.lq :is(#scr-defis,.dx-feuille) .room-head.dx-f-tete>.room-sub{grid-column:1/-1;display:block;margin:12px 0 0}
html.lq .dx-feuille .dx-f-tete>.dx-f-niv-l{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0 0}
html.lq .dx-feuille .dx-f-tete .dx-f-niv{padding:6px 13px 6px 10px;font-size:14px}
@media (max-height:720px),(max-width:360px){
  html.lq .dx-feuille:not([data-k="joueur"]) .room-head.dx-f-tete{padding-bottom:26px}
  html.lq :is(#scr-defis,.dx-feuille) .room-head.dx-f-tete>.room-sub{margin-top:10px}
  html.lq .dx-feuille .dx-f-tete>.dx-f-niv-l{margin-top:10px}
}
/* Les manches : trois cartes côte à côte, le chiffre en grand, « manche(s) » dessous ; choisie : le bord violet, le fond lilas,
   la lèvre violette (comme les cartes de niveau de « Jouer »). */
html.lq .dx-feuille .dx-manches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
html.lq .dx-feuille .dx-manche{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:74px;margin:0;padding:10px 6px;
  border:2px solid var(--line);border-radius:var(--dx-r-tuile);background:#fff;box-shadow:var(--dx-relief-s);color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .12s var(--press),box-shadow .12s var(--press),border-color .18s,background-color .18s}
html.lq .dx-feuille .dx-manche b{color:inherit;font:800 26px/1 var(--display);letter-spacing:-.01em;font-variant-numeric:tabular-nums;transition:color .18s}
html.lq .dx-feuille .dx-manche span{color:var(--ink-2);font:600 13.5px/1.2 var(--ui)}
html.lq .dx-feuille .dx-manche.on{border-color:var(--accent);background:var(--accent-soft);box-shadow:var(--dx-relief-vs)}
html.lq .dx-feuille .dx-manche.on b{color:var(--accent-ink)}
html.lq .dx-feuille .dx-manche:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 0 var(--lip)}
html.lq .dx-feuille .dx-manche.on:active:not(:disabled){box-shadow:0 0 0 var(--accent-lip)}
html.lq .dx-feuille .dx-manche:disabled{opacity:.45;cursor:default;box-shadow:none}
html.lq .dx-feuille .dx-manche:focus-visible{outline:3px solid var(--accent-ink);outline-offset:2px}
html.lq[data-reading="large"] .dx-feuille .dx-manche b{font-size:28px}
html.lq[data-reading="large"] .dx-feuille .dx-manche span{font-size:15px}
@media (prefers-reduced-motion:reduce){html.lq .dx-feuille .dx-manche,html.lq .dx-feuille .dx-manche b{transition:none}}
html.lq[data-motion="reduce"] .dx-feuille .dx-manche,html.lq[data-motion="reduce"] .dx-feuille .dx-manche b{transition:none}

/* ---------- Défis v2 · 20.18 « Ta salle de défi », relue le 8 novembre (9 h 42) : la durée au plus sur chaque carte de manches,
   « 5 joueurs max » à côté des points, « Tu joues en tant que » en ligne simple sous un filet (la coche verte après le pseudo : 9 h 57),
   une phrase sous « Ouvrir la salle ». ---------- */
html.lq .dx-feuille .dx-manche{min-height:84px;padding:9px 4px;gap:2px}
html.lq .dx-feuille .dx-manche .dx-m-duree{margin-top:3px;color:var(--ink-3);font:600 12.5px/1.2 var(--ui);font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .18s}
html.lq .dx-feuille .dx-manche.on .dx-m-duree{color:var(--accent-ink)}
html.lq[data-reading="large"] .dx-feuille .dx-manche .dx-m-duree{font-size:14px}
/* 10 h 38 (« comment mettre en avant le coefficient et le 5 joueurs max ») : deux pastilles de la hauteur de celle du niveau. Les
   points en jaune (le jaune des récompenses, une lèvre dorée), la pièce blanche à l’étoile ; les joueurs en verre clair, les
   silhouettes en menthe. Elles passent à la ligne ensemble sur un petit écran. */
html.lq .dx-feuille .dx-f-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 6px;border-radius:999px;font:800 14px/1.2 var(--display);letter-spacing:-.005em;white-space:nowrap;font-variant-numeric:tabular-nums}
html.lq .dx-feuille .dx-f-chip>svg{flex:none;display:block;width:19px;height:19px}
html.lq .dx-feuille .dx-f-chip b{font:inherit;color:inherit}
html.lq .dx-feuille .dx-f-chip.is-pts{padding-right:13px;background:var(--sun);color:var(--ink);box-shadow:0 2px 0 var(--sun-lip)}
html.lq .dx-feuille .dx-f-chip.is-pts b{font-size:16.5px;line-height:1;letter-spacing:-.01em}
/* « pts » après le coefficient (Elisa, 8 novembre, 13 h 35 : « met pts pour les coefficients ») */
html.lq .dx-feuille .dx-f-chip.is-pts small{font:800 12.5px/1 var(--display);opacity:.78}
html.lq .dx-feuille .dx-f-chip.is-max{padding-left:9px;background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34)}
html.lq .dx-feuille .dx-f-chip.is-max>svg{width:18px;height:18px;color:var(--mint)}
html.lq body .dx-feuille .dx-f-moi{margin-top:18px;padding-top:16px;border-top:2px solid var(--line)}
html.lq body .dx-feuille .dx-f-moi .jeu-me{gap:12px;padding:0;border-radius:0;background:none!important;box-shadow:none!important;color:var(--ink);animation:none}
html.lq body .dx-feuille .dx-f-moi .jeu-me::before{display:none}
html.lq body .dx-feuille .dx-f-moi .jeu-me .jeu-av{width:40px;height:40px;font-size:17px;border-width:2px;box-shadow:0 0 0 2px var(--ink),0 2px 0 2px var(--ink)!important}
html.lq body .dx-feuille .dx-f-moi .jeu-me .jeu-me-lock{right:-7px;bottom:-6px;width:21px;height:21px}
html.lq body .dx-feuille .dx-f-moi .jeu-me-t{gap:3px}
html.lq body .dx-feuille .dx-f-moi .jeu-me-t small{color:var(--ink-3);font-size:11px;letter-spacing:.06em}
html.lq body .dx-feuille .dx-f-moi .jeu-me-t small::before{display:none}
html.lq body .dx-feuille .dx-f-moi .jeu-me-t b{color:var(--ink);font-size:17.5px}
html.lq body .dx-feuille .dx-f-moi .jeu-me-at{color:var(--accent-ink)}
html.lq .dx-feuille .dx-f-note{margin:10px 0 0;color:var(--ink-3);font:600 12.5px/1.35 var(--ui);text-align:center}

/* ---------- Défis v2 · 20.19 La feuille du code (8 novembre, 15 h 27, la relecture qu’Elisa a fait faire) : au 6e caractère, le contour
   du champ s’illumine (une onde violette, une fois) ; « On cherche ta salle… » et sa roue dans le bouton, qui reste violet ; un code qui
   ne mène nulle part : le champ rougit et tremble ; le message dessous, en rouge ---------- */
html.lq .dx-feuille .room-join .jeu-input.is-code.is-pret{border-color:var(--accent)!important;animation:dxCodeOnde .6s ease-out}
@keyframes dxCodeOnde{0%{outline:3px solid rgba(106,77,244,.5);outline-offset:0}100%{outline:3px solid rgba(106,77,244,0);outline-offset:10px}}
html.lq .dx-feuille .room-join .jeu-input.is-code.is-ko{border-color:#E5484D!important;box-shadow:0 0 0 4px rgba(229,72,77,.16)!important}
html.lq .dx-feuille .room-join .jeu-input.is-code.is-ko.is-shake{animation:roomShake .38s cubic-bezier(.36,.07,.19,.97)}
/* 16 h 50 (Elisa : « est-ce que le message peut être mieux comme UI UX, car là c’est pas top ») : une bulle sous le champ, qui se
   déplie en douceur (la carte grandit vers le haut, le bouton reste où il est). L’autocollant « ! » corail, contour d’encre, arrive
   d’un petit rebond ; ce qui se passe en gras, quoi faire dessous. La bulle reprend les cartes de l’appli : bord, fond clair, lèvre.
   Elle colle au champ dont elle parle (14 px) et laisse de l’air avant le bouton (18 px) ; corrigé, elle s’efface et se replie. */
html.lq .dx-feuille[data-k="code"] .jeu-msg,html.lq .dx-feuille[data-k="code"] .jeu-msg:empty{display:grid;grid-template-rows:0fr;min-height:0;margin:0!important;
  transition:grid-template-rows .3s cubic-bezier(.2,.8,.2,1),margin .3s cubic-bezier(.2,.8,.2,1)}
html.lq .dx-feuille[data-k="code"] .jeu-msg.is-ko{grid-template-rows:1fr;margin:-10px 0 18px!important}
html.lq .dx-feuille[data-k="code"] .dx-alerte-plie{min-height:0;overflow:hidden;padding:0 0 4px}
html.lq .dx-feuille[data-k="code"] .dx-alerte{display:flex;align-items:flex-start;gap:11px;padding:11px 14px 12px 11px;border:2px solid #FFD3CF;border-radius:var(--dx-r-tuile,18px);
  background:#FFF5F3;box-shadow:0 3px 0 #FFD3CF;animation:dxAlerte .32s cubic-bezier(.2,.8,.2,1) both}
html.lq .dx-feuille[data-k="code"] .dx-alerte-ico{flex:none;display:block;width:32px;height:32px;rotate:-8deg;animation:dxAlertePop .45s cubic-bezier(.3,1.6,.5,1) .06s both}
html.lq .dx-feuille[data-k="code"] .dx-alerte-ico svg{display:block;width:100%;height:100%}
html.lq .dx-feuille[data-k="code"] .dx-alerte-t{display:flex;flex-direction:column;gap:2px;min-width:0;padding-top:1px}
html.lq .dx-feuille[data-k="code"] .dx-alerte-t b{color:#B8323A;font:700 16px/1.25 var(--display);letter-spacing:-.01em}
html.lq .dx-feuille[data-k="code"] .dx-alerte-t small{color:var(--ink-2);font:500 13.5px/1.4 var(--ui)}
html.lq .dx-feuille[data-k="code"] .jeu-msg:not(.is-ko) .dx-alerte{animation:dxAlerteFin .2s ease both}
@keyframes dxAlerte{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes dxAlertePop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes dxAlerteFin{to{opacity:0}}
@media (prefers-reduced-motion:reduce){html.lq .dx-feuille[data-k="code"] .jeu-msg{transition:none}html.lq .dx-feuille[data-k="code"] :is(.dx-alerte,.dx-alerte-ico){animation:none!important}}
html.lq[data-motion="reduce"] .dx-feuille[data-k="code"] .jeu-msg{transition:none}
html.lq[data-motion="reduce"] .dx-feuille[data-k="code"] :is(.dx-alerte,.dx-alerte-ico){animation:none!important}
/* Pendant qu’on cherche, le code ne change pas : il pâlit, sans curseur. Trouvée : le bord et le bouton passent au vert, la coche
   arrive d’un petit rebond, « Salle trouvée ! », puis la salle. */
html.lq .dx-feuille.is-cherche .room-join .jeu-input.is-code{color:var(--ink-3);caret-color:transparent}
html.lq .dx-feuille .room-join .jeu-input.is-code.is-trouvee{border-color:#17A35E!important;box-shadow:0 0 0 4px rgba(23,163,94,.16)!important}
html.lq .dx-feuille .room-go .dx-go-ok{display:none}
html.lq :is(#scr-defis,.dx-feuille) .room-go.is-trouvee:disabled{background:#17A35E!important;box-shadow:0 4px 0 #0F7A45!important;color:#fff!important}
html.lq .dx-feuille .room-go.is-trouvee .dx-go-ok{display:flex;flex:none;animation:dxOk .35s cubic-bezier(.3,1.6,.5,1)}
html.lq .dx-feuille .room-go.is-trouvee .dx-go-ok svg{width:22px;height:22px}
html.lq .dx-feuille .room-go.is-trouvee>svg{display:none}
@keyframes dxOk{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
html.lq .dx-feuille .room-go .dx-go-roue{display:none}
html.lq :is(#scr-defis,.dx-feuille) .room-go.is-cherche:disabled{background:var(--accent)!important;box-shadow:var(--dx-relief-v)!important;color:#fff!important;cursor:progress}
html.lq .dx-feuille .room-go.is-cherche .dx-go-roue{display:block;flex:none;width:18px;height:18px;box-sizing:border-box;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:dxRoue .8s linear infinite}
html.lq .dx-feuille .room-go.is-cherche>svg{display:none}
@keyframes dxRoue{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){html.lq .dx-feuille .room-join .jeu-input.is-code.is-pret,html.lq .dx-feuille .room-go.is-cherche .dx-go-roue,html.lq .dx-feuille .room-go.is-trouvee .dx-go-ok{animation:none}}
html.lq[data-motion="reduce"] .dx-feuille .room-join .jeu-input.is-code.is-pret,html.lq[data-motion="reduce"] .dx-feuille .room-go.is-cherche .dx-go-roue,html.lq[data-motion="reduce"] .dx-feuille .room-go.is-trouvee .dx-go-ok{animation:none}
/* ---------- Défis v2 · 21. Le niveau de « Ta salle de défi » dans toutes les pages (8 novembre, 11 h 08, sur la feuille : « voilà
   parfait, c’est le niveau que j’attends ; modifie donc les pages défis pour ce niveau premium ») ----------
   Les pastilles de la feuille partout : le niveau en blanc avec ses barres, les points en jaune après la pièce (la lèvre dorée), les
   joueurs avec leurs silhouettes ; sur le violet, le verre clair. Joueurs et Mes stats s’ouvrent sur le bandeau violet de la feuille
   (l’autocollant, le surtitre menthe, le titre jaune, les pastilles) ; la carte du joueur prend l’avatar contouré d’encre de « Tu joues
   en tant que ». */
html.lq :is(#scr-defis,.dx-feuille) .dx-pc{display:inline-flex;align-items:center;gap:5px;flex:none;min-height:24px;padding:2px 9px 2px 6px;box-sizing:border-box;border-radius:999px;
  font:800 12.5px/1.2 var(--display);letter-spacing:-.005em;font-style:normal;white-space:nowrap;font-variant-numeric:tabular-nums;vertical-align:middle}
html.lq :is(#scr-defis,.dx-feuille) .dx-pc>svg{flex:none;display:block;width:16px;height:16px}
html.lq :is(#scr-defis,.dx-feuille) .dx-pc.is-blanc{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line),0 2px 0 var(--lip)}
html.lq :is(#scr-defis,.dx-feuille) .dx-pc.is-pts{padding-left:4px;background:var(--sun);color:var(--ink);box-shadow:0 2px 0 var(--sun-lip)}
html.lq :is(#scr-defis,.dx-feuille) .dx-pc.is-doux{background:var(--accent-soft);color:var(--accent-ink)}
html.lq :is(#scr-defis,.dx-feuille) .dx-pc.is-doux>svg{color:var(--accent)}
html.lq :is(#scr-defis,.dx-feuille) .dx-pc.is-verre{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34)}
html.lq :is(#scr-defis,.dx-feuille) .dx-pc.is-verre>svg{color:var(--mint)}
html.lq :is(#scr-defis,.dx-feuille) .dx-pc.is-gens>svg{width:15px;height:15px}
html.lq :is(#scr-defis,.dx-feuille) .dx-pc.is-live{gap:7px;padding-left:9px}
html.lq :is(#scr-defis,.dx-feuille) .dx-pc.is-live .dx-dot{width:7px;height:7px;background:var(--mint);box-shadow:0 0 0 3px rgba(159,240,198,.25)}
/* Le niveau : ses barres à sa couleur, comme dans la feuille (Facile violet, Moyen orange, Difficile rouge) */
html.lq :is(#scr-defis,.dx-feuille) .dx-pc.is-niv{gap:6px;padding-left:8px}
html.lq :is(#scr-defis,.dx-feuille) .dx-pc .jeu-bars{display:inline-flex;align-items:flex-end;gap:1.5px;width:auto;height:11px;margin:0;padding:0;border-radius:0;background:none!important}
html.lq :is(#scr-defis,.dx-feuille) .dx-pc .jeu-bars b{width:3.5px;border-radius:1.5px;background:rgba(34,28,70,.16)}
html.lq :is(#scr-defis,.dx-feuille) .dx-pc .jeu-bars b:nth-child(1){height:4px}
html.lq :is(#scr-defis,.dx-feuille) .dx-pc .jeu-bars b:nth-child(2){height:7.5px}
html.lq :is(#scr-defis,.dx-feuille) .dx-pc .jeu-bars b:nth-child(3){height:11px}
html.lq :is(#scr-defis,.dx-feuille) .dx-pc.is-f .jeu-bars b:nth-child(1){background:var(--accent)}
html.lq :is(#scr-defis,.dx-feuille) .dx-pc.is-m .jeu-bars b:nth-child(-n+2){background:var(--dx-m)}
html.lq :is(#scr-defis,.dx-feuille) .dx-pc.is-d .jeu-bars b{background:var(--dx-d)}
/* Une rangée de pastilles sous un pseudo (une salle ouverte, « En salle maintenant ») */
html.lq :is(#scr-defis,.dx-feuille) .dx-pcs{display:flex;align-items:center;gap:6px;min-width:0}
html.lq :is(#scr-defis,.dx-feuille) .dx-pc-t{min-width:0;overflow:hidden;color:var(--ink-2);font:600 12.5px/1.3 var(--ui);text-overflow:ellipsis;white-space:nowrap}

/* Jouer · la carte du joueur : l’avatar contouré d’encre, les points en pastille jaune, le rang à côté */
html.lq #scr-defis .dx-me>.jeu-av{box-sizing:border-box;border:2px solid #fff;box-shadow:0 0 0 2px var(--ink),0 2px 0 2px var(--ink)}
html.lq #scr-defis .dx-me-t small{display:flex;flex-wrap:wrap;align-items:center;gap:3px 5px;min-width:0;margin-top:2px}
html.lq #scr-defis .dx-me-t small .dx-pc.is-pts{gap:4px;padding:2px 8px 2px 3px}
html.lq #scr-defis .dx-me-t small .dx-pc.is-pts>svg{width:15px;height:15px}
html.lq #scr-defis .dx-me-rang{min-width:0;overflow:hidden;color:var(--ink-2);font:700 12px/1.25 var(--ui);text-overflow:ellipsis;white-space:nowrap}
html.lq #scr-defis .dx-me-rang sup{font-size:.7em}

/* Jouer · le niveau : la pastille de la feuille, la pièce puis ×N ; à plat sur les autres niveaux, en jaune sur le niveau choisi */
html.lq #scr-defis .room-level .room-lv-x{gap:4px;min-width:0;padding:3px 10px 3px 4px;border-radius:999px;background:var(--dx-tuile);color:var(--ink);box-shadow:none;
  font:800 15px/1.1 var(--display);letter-spacing:-.01em;transition:background-color .2s,box-shadow .2s}
html.lq #scr-defis .room-level .room-lv-x>svg{flex:none;display:block;width:18px;height:18px}
html.lq #scr-defis .room-level.on .room-lv-x{background:var(--sun);box-shadow:0 2px 0 var(--sun-lip);color:var(--ink)}
html.lq #scr-defis .dx-rapide .room-level.on .room-lv-x::after{background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.75) 50%,rgba(255,255,255,0))}
@media (max-width:350px){html.lq #scr-defis .room-level .room-lv-x{padding:2px 8px 2px 3px;font-size:14px}html.lq #scr-defis .room-level .room-lv-x>svg{width:16px;height:16px}}

/* Jouer · une salle ouverte : les joueurs à côté du pseudo, le niveau puis les manches dessous */
html.lq #scr-defis .dx-list .dx-t>b{display:flex;align-items:center;gap:7px;min-width:0}
html.lq #scr-defis .dx-list .dx-t>b>.dx-nom{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.lq #scr-defis .dx-list .dx-t small.dx-pcs{margin-top:3px;gap:6px;overflow:hidden}
html.lq #scr-defis .dx-list .dx-t small.dx-pcs .dx-pc.is-niv{gap:5px;padding:2px 8px 2px 7px;font-size:12px}
html.lq #scr-defis .dx-list .dx-t small.dx-pcs .dx-pc .jeu-bars{height:10px}
html.lq #scr-defis .dx-list .dx-t small.dx-pcs .dx-pc .jeu-bars b:nth-child(1){height:3.5px}
html.lq #scr-defis .dx-list .dx-t small.dx-pcs .dx-pc .jeu-bars b:nth-child(2){height:6.5px}
html.lq #scr-defis .dx-list .dx-t small.dx-pcs .dx-pc .jeu-bars b:nth-child(3){height:10px}
html.lq #scr-defis .dx-list .dx-t small.dx-pcs .dx-pc-t{font-size:12px}
html.lq #scr-defis .dx-rapide.is-v2 .dx-list>li{gap:9px}
html.lq #scr-defis .dx-rapide.is-v2 .dx-list .dx-join{padding:0 11px;font-size:13.5px}
/* « Ta salle » (8 novembre, 23 h 44) : en tête de « Rejoins une partie », la ligne de sa propre salle, en violet clair comme sa ligne
   dans le classement ; « Revenir », puis une croix pour la fermer (44 px à toucher). */
html.lq #scr-defis .dx-list.is-mienne{margin-top:8px;padding:0;background:none}   /* sa rangée seule, sans le fond des listes (comme « Ta place ») */
html.lq #scr-defis .dx-list.is-mienne+.dx-list{margin-top:10px}
html.lq #scr-defis .dx-list.is-mienne>li{gap:8px;margin:0;padding:10px 2px 10px 14px}
html.lq #scr-defis .dx-ma-x{flex:none;display:grid;place-items:center;width:38px;height:44px;margin:-4px 0 -4px -4px;padding:0;border:0;border-radius:50%;background:none;color:var(--accent-ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
html.lq #scr-defis .dx-ma-x svg{width:18px;height:18px}
html.lq #scr-defis .dx-ma-x:active{background:rgba(91,61,245,.12)}
html.lq #scr-defis .dx-ma-x:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media (max-width:380px){html.lq #scr-defis .dx-list .dx-t small.dx-pcs .dx-pc .jeu-bars{display:none}html.lq #scr-defis .dx-list .dx-t small.dx-pcs .dx-pc.is-niv{padding-left:8px}}

/* Joueurs et Mes stats · le bandeau de la feuille, posé sur le fond : le violet quadrillé, l’autocollant, le surtitre menthe, le titre
   jaune, une phrase, les pastilles en verre clair */
html.lq #scr-defis .dx-bande{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:14px;margin:0 0 14px;padding:18px 16px 18px;
  border-radius:var(--dx-r-carte);background:var(--deep);color:#fff;box-shadow:0 4px 0 #3420A6}
html.lq #scr-defis .dx-bande::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(220px 160px at 92% 0%,rgba(255,216,107,.3),transparent 70%),radial-gradient(200px 150px at 0% 100%,rgba(159,240,198,.18),transparent 70%),
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/22px 22px}
html.lq #scr-defis .dx-bande>div{flex:1;min-width:0}
html.lq #scr-defis .dx-bande .room-stk{width:56px;height:56px;padding:7px;border-radius:18px}
html.lq #scr-defis .dx-bande .room-kicker{margin:0;color:var(--mint)!important;font:800 12px/1.2 var(--ui)!important;letter-spacing:.07em!important;text-transform:uppercase}
html.lq #scr-defis .dx-bande h2{margin:3px 0 0;overflow:hidden;color:var(--sun-hi)!important;font:700 22px/1.12 var(--display)!important;letter-spacing:-.02em!important;text-overflow:ellipsis}
html.lq #scr-defis .dx-bande .room-sub{margin:6px 0 0;color:rgba(255,255,255,.86)!important;font:500 14px/1.4 var(--ui);text-wrap:pretty}
html.lq #scr-defis .dx-bande-pcs{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
html.lq #scr-defis .dx-bande-pcs:empty{display:none}
html.lq #scr-defis .dx-bande .dx-pc{min-height:28px;padding:4px 11px 4px 9px;font-size:13.5px}
html.lq #scr-defis .dx-bande .room-sp.s1{right:18px;top:14px}
html.lq #scr-defis .dx-bande .room-sp.s2{right:46px;bottom:12px}
/* Joueurs : le bandeau à la place du titre posé sur le fond */
html.lq #scr-defis .dx-amis.is-v2 .dx-amis-tete.dx-bande{margin:0 0 14px}
/* Mes stats et ta place au classement : ton avatar en autocollant, comme la fiche d’un autre joueur */
html.lq #scr-defis .dx-bande .room-stk.dx-fiche-av{display:grid;place-items:center;padding:0;background:#fff}
html.lq #scr-defis .dx-bande .dx-fiche-av .jeu-av{position:relative;width:44px;height:44px;font-size:19px;rotate:0deg}
html.lq #scr-defis .dx-bande .dx-fiche-av .jeu-flag{top:-7px;right:-9px;bottom:auto}
html.lq #scr-defis .dx-stats-tete>.dx-bande{flex:1;min-width:0;margin:0 var(--gut,20px)}   /* aligné sur le tableau de bord dessous */
html.lq #scr-defis .dx-stats-bande h2{white-space:nowrap}   /* le pseudo sur une ligne */
/* Classement : ta place, un bandeau au-dessus de « Jouer un défi » ; « Page 3 › » se touche (44 px avec sa marge) */
html.lq #scr-defis .dx-cls.is-v2 .dx-place-bande{margin:6px 0 14px}
html.lq #scr-defis .dx-place-bande .room-sub sup{font-size:.7em}
html.lq #scr-defis .dx-place-go{position:relative;gap:2px;padding-right:6px;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s var(--press)}
html.lq #scr-defis .dx-place-go::after{content:"";position:absolute;inset:-8px -4px}
html.lq #scr-defis .dx-place-go>svg{width:15px;height:15px;color:#fff}
html.lq #scr-defis .dx-place-go:active{transform:translateY(1px)}
html.lq #scr-defis .dx-place-go:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* La fiche · les pastilles sous le pseudo, celles de la feuille */
html.lq .dx-feuille .room-head .dx-f-pcs{display:flex;flex-wrap:wrap;gap:8px;margin:9px 0 0}
html.lq .dx-feuille .room-head .dx-f-pcs:empty{display:none}
html.lq .dx-feuille .room-head .dx-f-pcs .dx-pc{min-height:28px;padding:4px 11px 4px 10px;font-size:13.5px}
html.lq .dx-feuille .dx-fiche-live small.dx-pcs{margin-top:2px;white-space:normal}

/* Petits écrans, grand texte */
@media (max-width:360px){
  html.lq #scr-defis .dx-bande{gap:12px;padding:16px 14px}
  html.lq #scr-defis .dx-bande .room-stk{width:48px;height:48px;padding:6px;border-radius:15px}
  html.lq #scr-defis .dx-bande h2{font-size:20px!important}
  html.lq #scr-defis .dx-amis.is-v2 .dx-adv .dx-t small .dx-pc.is-niv{display:none}   /* « En salle » seul : le niveau est dans sa fiche */
  html.lq #scr-defis .dx-list .dx-t>b .dx-pc.is-gens{gap:0;padding:2px 7px}
  html.lq #scr-defis .dx-list .dx-t>b .dx-pc.is-gens>svg{display:none}   /* « 2/5 » sans les silhouettes : le pseudo garde sa place */
}
html.lq[data-reading="large"] :is(#scr-defis,.dx-feuille) .dx-pc{font-size:14px}
html.lq[data-reading="large"] #scr-defis .dx-me-rang{font-size:14.5px}
/* Joueurs : « 2/5 » d’un adversaire en salle, seulement quand il y a la place (il est dans sa fiche) */
@media (max-width:430px){html.lq #scr-defis .dx-amis.is-v2 .dx-large{display:none}}
html.lq :is(#scr-defis,.dx-feuille) .dx-pc>span sup{font-size:.68em;line-height:0}

/* La feuille de la correction : l’en-tête violet (la question, le niveau, ce qui s’est passé), puis une solution à copier, ce qu’elle
   renvoie, le raisonnement, ta requête. */
html.lq .dx-feuille .dx-pc.is-ok{background:var(--mint);color:#0E4A2E;box-shadow:0 2px 0 rgba(27,22,64,.3)}
html.lq .dx-feuille .dx-pc.is-to{background:#FFE1D1;color:#8A3A12;box-shadow:0 2px 0 rgba(27,22,64,.3)}
html.lq .dx-feuille .dx-pc:is(.is-ok,.is-to)>svg{width:15px;height:15px}
html.lq .dx-feuille[data-k="corr"] .room-head h2{font-size:21px!important;line-height:1.18!important;text-wrap:balance}
html.lq .dx-feuille .jc-sec{margin:14px 0 0}
html.lq .dx-feuille .jc-sec:first-child{margin-top:18px}
html.lq .dx-feuille .jc-sec:is(.is-sol,.is-piste,.is-moi,.is-essai){padding:12px 14px 14px;border-radius:18px}
html.lq .dx-feuille .jc-sec.is-sol{background:var(--accent-soft)}
html.lq .dx-feuille .jc-sec.is-piste{padding:11px 13px 13px;border:2px dashed var(--lip);background:#fff}
html.lq .dx-feuille .jc-sec.is-moi{background:#EAF8F0}
html.lq .dx-feuille .jc-sec.is-essai{background:#FFF1E8}
html.lq .dx-feuille .jc-h{display:flex;align-items:center;gap:9px;margin:0 0 10px}
html.lq .dx-feuille .jc-h b{flex:1;min-width:0;color:var(--ink);font:800 17px/1.15 var(--display);letter-spacing:-.012em}
html.lq .dx-feuille .jc-sec.is-piste .jc-h b::before{content:"";display:inline-block;width:17px;height:17px;margin:0 7px -2px 0;background:#E0A100;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.6.5 1 1.2 1 2V16h5.2v-.2c0-.8.4-1.5 1-2A6 6 0 0 0 12 3z' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.6.5 1 1.2 1 2V16h5.2v-.2c0-.8.4-1.5 1-2A6 6 0 0 0 12 3z' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
html.lq .dx-feuille .jc-chip{flex:none;padding:4px 10px;border-radius:99px;font:800 12px/1.25 var(--display);white-space:nowrap}
html.lq .dx-feuille .jc-chip.is-ok{background:var(--mint);color:#0E4A2E;box-shadow:0 2px 0 #5FC99A;rotate:2deg}
html.lq .dx-feuille .jc-sec .ex-code{margin:0;font-size:13px}
html.lq .dx-feuille .jc-note{margin:9px 2px 0;color:var(--ink-2);font:500 13px/1.45 var(--ui)}
html.lq .dx-feuille .jc-p{margin:0;color:var(--ink);font:500 14.5px/1.5 var(--ui)}
html.lq .dx-feuille .jc-p code{padding:1px 5px;border-radius:6px;background:var(--accent-soft);color:var(--accent-ink);font:600 .92em/1 var(--mono)}
html.lq .dx-feuille .jc-h{flex-wrap:wrap;row-gap:6px}
html.lq .dx-feuille .jc-h>.result-meta{flex:none;margin:0;padding:0}
html.lq .dx-feuille .jc-sec.is-res .jc-h>b{flex:1 0 auto}   /* le titre garde sa ligne : « Glisse » passe dessous quand la place manque */
html.lq .dx-feuille .jc-sec.is-res .jc-h>.result-meta{margin-left:auto}
html.lq .dx-feuille .result-meta .rm-n+.table-swipe-hint{display:inline-flex}   /* sans durée, « Glisse » suit le nombre de lignes : il reste */
html.lq .dx-feuille .jc-sec.is-res .table-scroll{margin:0}
html.lq .dx-feuille[data-k="corr"] .dx-f-pied{margin-top:16px}
html.lq[data-reading="large"] .dx-feuille .jc-p{font-size:15.5px}