/* ====== Intellect — style « Pop sticker » ======
   Fond crème à pois, contours à l'encre, ombres décalées « tampon », cartes en autocollants penchés.
   Les couleurs communes sont des « variables » (--nom) définies une seule fois ici.
   Chaque sujet pose ses propres --c (couleur), --cf (couleur foncée) et --ct (texte sur la couleur). */
:root {
  --fond: #FFF6E9;
  --pois: #EADBC3;
  --carte: #FFFFFF;
  --creme2: #F6EBDA;
  --encre: #1B1B2F;
  --texte: #1B1B2F;
  --texte2: #5D5A72;
  --texte3: #A9A3B8;
  --marque: #7B5CFF;
  --marque-f: #5A3EE0;
  --marque-clair: #ECE6FF;
  --corail: #FF7A59;
  --vert: #2FD181;
  --vert-f: #0B8A4C;
  --vert-clair: #D3F8E5;
  --rouge: #FF5A5F;
  --rouge-f: #C81E3A;
  --rouge-clair: #FFE1E2;
  --or: #FFC93C;
  --flamme: #FF8A1F;
  --c: var(--marque);
  --cf: var(--marque-f);
  --ct: #FFFFFF;
  --bord: 2.5px solid var(--encre);
  --ombre: 4px 4px 0 var(--encre);
  --ombre-s: 3px 3px 0 var(--encre);
  --rayon: 18px;
  --titres: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --police: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --ressort: cubic-bezier(.2, 1.5, .4, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background-color: var(--fond);
  background-image: radial-gradient(var(--pois) 1.3px, transparent 1.4px);
  background-size: 22px 22px;
  color: var(--texte);
  font-family: var(--police);
  font-weight: 500;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
input, select { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--titres); letter-spacing: -.01em; }
strong { font-weight: 700; }
.cache { display: none !important; }

/* ====== Boutons autocollants ====== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 24px;
  border-radius: 14px; border: var(--bord);
  font-family: var(--titres); font-weight: 800; font-size: 18px;
  background: var(--c); color: var(--ct);
  box-shadow: var(--ombre);
  transition: transform .12s var(--ressort), box-shadow .12s;
  user-select: none;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--encre); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--encre); transition-duration: .05s; }
.btn--plein { width: 100%; }
.btn--marque { --c: var(--marque); --ct: #fff; }
.btn--vert { --c: var(--vert); --ct: var(--encre); }
.btn--rouge { --c: var(--rouge); --ct: #fff; }
.btn--blanc { background: var(--carte); color: var(--texte); }
.btn--inverse { background: var(--carte); color: var(--encre); }
.btn:disabled, .btn--off {
  background: var(--creme2); color: var(--texte3); border-color: var(--texte3);
  box-shadow: 3px 3px 0 var(--texte3); cursor: default; transform: none;
}
.btn:disabled:hover, .btn--off:hover { transform: none; box-shadow: 3px 3px 0 var(--texte3); }
.lien { font-family: var(--titres); color: var(--marque); font-weight: 800; font-size: 16px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ====== Structure générale ====== */
.coque { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
.rail { display: none; }
.centre { width: 100%; max-width: 600px; margin: 0 auto; padding: 0 16px 130px; }
.panneau { display: none; }

.barre-haut {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 0;
  background: linear-gradient(var(--fond) 75%, transparent);
}
.barre-haut--compteurs-mobile { display: flex; gap: 6px; }
.compteur {
  white-space: nowrap; display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--titres); font-weight: 800; font-size: 16px;
  padding: 5px 10px; border-radius: 999px; border: 2px solid var(--encre); background: var(--carte);
  box-shadow: 2px 2px 0 var(--encre);
}
.compteur--flamme.eteinte { filter: grayscale(1); opacity: .6; }
.puce-theme {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px;
  border: var(--bord); border-radius: 999px; background: var(--carte); box-shadow: var(--ombre-s);
  font-family: var(--titres); font-weight: 800; font-size: 16px;
  transition: transform .15s var(--ressort);
}
.puce-theme:hover { transform: rotate(-2deg) scale(1.03); }
.puce-theme .pastille { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--c); border: 2px solid var(--encre); font-size: 17px; }

.nav-bas {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30;
  display: flex; justify-content: space-around; padding: 6px;
  background: var(--carte); border: var(--bord); border-radius: 22px; box-shadow: var(--ombre);
}
.nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 1px; flex: 1;
  padding: 6px 4px; border-radius: 16px; border: 2px solid transparent;
  font-family: var(--titres); font-size: 12px; font-weight: 700; color: var(--texte2);
  transition: transform .2s var(--ressort), background .2s;
}
.nav-item .ico { font-size: 24px; line-height: 1.1; transition: transform .25s var(--ressort); }
.nav-item:hover .ico { transform: translateY(-3px) rotate(-8deg); }
.nav-item.actif { color: var(--encre); background: var(--or); border-color: var(--encre); transform: rotate(-2deg); }

.logo { display: flex; align-items: center; gap: 8px; font-family: var(--titres); font-weight: 800; font-size: 30px; color: var(--encre); letter-spacing: -.03em; }
.logo .point { color: var(--corail); }
.logo-mini { width: 44px; }
.lettre { display: inline-block; margin-right: -.035em; }
.entree .lettre { animation: lettre .6s var(--ressort) both; animation-delay: calc(var(--i) * 55ms + 150ms); }
@keyframes lettre { from { opacity: 0; transform: translateY(-40px) rotate(-20deg); } }

/* Grand écran : rail à gauche, chemin au centre, panneau à droite */
@media (min-width: 1000px) {
  .coque { grid-template-columns: 250px minmax(0, 1fr) 350px; }
  .rail {
    display: flex; flex-direction: column; gap: 10px;
    position: sticky; top: 0; height: 100vh; padding: 24px 18px;
  }
  .rail .logo { padding: 0 6px 22px; }
  .rail .nav-item { flex: none; flex-direction: row; gap: 14px; font-size: 17px; padding: 10px 14px; }
  .rail .nav-item .ico { font-size: 28px; }
  .rail .nav-item.actif { box-shadow: var(--ombre-s); }
  .nav-bas { display: none; }
  .centre { padding: 0 24px 60px; max-width: 640px; }
  .panneau { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 24px 26px 24px 4px; }
  .barre-haut { padding: 22px 0 8px; }
  .barre-haut--compteurs-mobile { display: none !important; }
}
@media (max-width: 999px) { .compteurs-panneau { display: none !important; } }

/* ====== Cartes autocollants ====== */
.carte { border: var(--bord); border-radius: var(--rayon); padding: 18px; background: var(--carte); box-shadow: var(--ombre); }
.carte h3 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.carte p { color: var(--texte2); line-height: 1.5; }
.compteurs-panneau { display: flex; justify-content: space-between; gap: 6px; }
.panneau .carte:nth-child(2n) { rotate: .6deg; }
.panneau .carte:nth-child(2n+1) { rotate: -.5deg; }

.jauge { height: 20px; border-radius: 99px; background: var(--creme2); border: 2px solid var(--encre); overflow: hidden; position: relative; }
.jauge > span {
  display: block; height: 100%; border-radius: 99px; background-color: var(--c);
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.3) 0 8px, transparent 8px 16px);
  background-size: 22.6px 22.6px;
  box-shadow: inset -2px 0 0 var(--encre);
  animation: rayures 1.2s linear infinite;
  transition: width .6s var(--ressort);
}
@keyframes rayures { to { background-position: 22.6px 0; } }
.jauge--or > span { background-color: var(--or); }

/* ====== Chemin des leçons ====== */
.unite {
  position: relative; margin-top: 34px; border-radius: var(--rayon); padding: 18px 20px;
  background: var(--c); color: var(--ct); border: var(--bord); box-shadow: var(--ombre);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  rotate: -1deg;
}
.unite.impaire { rotate: .8deg; }
.unite::before {
  content: ''; position: absolute; top: -13px; left: 50%; width: 90px; height: 24px; margin-left: -45px;
  background: rgba(255, 228, 140, .9); border: 1.5px solid rgba(27,27,47,.18); transform: rotate(-3deg);
}
.unite small {
  display: inline-block; font-family: var(--titres); font-size: 13px; font-weight: 800;
  padding: 2px 10px; border-radius: 99px; background: var(--carte); color: var(--encre); border: 2px solid var(--encre);
}
.unite h2 { font-size: 24px; font-weight: 800; margin-top: 8px; line-height: 1.15; }
.unite .unite-icone {
  font-size: 32px; width: 62px; height: 62px; flex: none; display: grid; place-items: center;
  background: var(--carte); border: var(--bord); border-radius: 50%; box-shadow: var(--ombre-s);
  animation: balance 4s ease-in-out infinite;
}
@keyframes balance { 50% { transform: rotate(12deg); } }

.chemin { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 44px 0 16px; }
.trace { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.trace-fond { fill: none; stroke: var(--encre); stroke-opacity: .25; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 0 16; }
.trace-fait { fill: none; stroke: var(--c); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 0 16; animation: defile 1.4s linear infinite; }
@keyframes defile { to { stroke-dashoffset: -32; } }
.deco { position: absolute; font-size: 30px; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: var(--carte); border: var(--bord); box-shadow: var(--ombre-s); rotate: var(--r); pointer-events: none; animation: deco 5s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes deco { 50% { transform: translateY(-10px) rotate(14deg); } }

.noeud-zone { position: relative; display: flex; flex-direction: column; align-items: center; z-index: 1; }
.noeud {
  position: relative; width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c); color: var(--ct); border: 3px solid var(--encre);
  box-shadow: 4px 5px 0 var(--encre);
  transition: transform .15s var(--ressort), box-shadow .15s;
}
.noeud svg { width: 34px; height: 34px; }
.noeud:hover { transform: translate(-2px, -3px) rotate(-6deg); box-shadow: 6px 8px 0 var(--encre); }
.noeud:active { transform: translate(4px, 5px); box-shadow: 0 0 0 var(--encre); }
.entree .noeud { animation: pop .5s var(--ressort) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
@keyframes pop { from { scale: 0; } }
.noeud--verrou { background: var(--creme2); color: var(--texte3); }
.noeud--actuel { animation: dandine 2.4s ease-in-out infinite; }
.entree .noeud--actuel { animation: pop .5s var(--ressort) both, dandine 2.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 70ms + 120ms), 1s; }
@keyframes dandine { 0%, 100% { rotate: 0deg; } 25% { rotate: -7deg; } 75% { rotate: 7deg; } }
.noeud--actuel::after {
  content: ''; position: absolute; inset: -13px; border-radius: 50%;
  border: 3px dashed var(--encre); animation: tourne 9s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }
.noeud--coffre { border-radius: 22px; width: 82px; height: 74px; }
.etoiles { display: flex; gap: 1px; margin-top: 12px; height: 18px; }
.etoiles svg { width: 18px; height: 18px; }
.etoiles svg path { stroke: var(--encre); stroke-width: 1.8px; }
.bulle-depart {
  position: absolute; bottom: calc(100% + 22px); left: 50%; transform: translateX(-50%);
  background: var(--carte); color: var(--encre); border: var(--bord); box-shadow: var(--ombre-s);
  padding: 7px 14px; border-radius: 12px; font-family: var(--titres); font-weight: 800; font-size: 15px; white-space: nowrap;
  animation: rebond 1.4s ease-in-out infinite; pointer-events: none; z-index: 2;
}
.bulle-depart::after {
  content: ''; position: absolute; top: calc(100% - 6px); left: 50%; width: 11px; height: 11px; margin-left: -6px;
  background: var(--carte); border-right: var(--bord); border-bottom: var(--bord); transform: rotate(45deg);
}
@keyframes rebond { 50% { transform: translate(-50%, -6px) rotate(-3deg); } }
.mascotte-guide { position: absolute; top: -30px; width: 100px; pointer-events: none; }
.entree .mascotte-guide { animation: arrive .7s var(--ressort) both .55s; }
@keyframes arrive { from { opacity: 0; transform: translateY(30px) scale(.5); } }

.pop-lecon {
  position: absolute; top: calc(100% + 16px); left: 50%; z-index: 15;
  width: min(320px, 88vw); padding: 16px; border-radius: var(--rayon);
  background: var(--c); color: var(--ct); border: var(--bord); box-shadow: var(--ombre);
  transform: translateX(-50%) rotate(-1deg);
  animation: ouvrir .35s var(--ressort);
}
.pop-lecon::before {
  content: ''; position: absolute; top: -9px; left: 50%; width: 16px; height: 16px; margin-left: -8px;
  background: var(--c); border-left: var(--bord); border-top: var(--bord); transform: rotate(45deg);
}
.pop-lecon.verrou { --c: var(--creme2); --ct: var(--texte2); }
.pop-lecon h3 { font-size: 21px; font-weight: 800; }
.pop-lecon p { margin: 4px 0 14px; font-weight: 600; opacity: .9; }
@keyframes ouvrir { from { opacity: 0; transform: translateX(-50%) scale(.6) rotate(-8deg); } }

/* Numéro du niveau, collé sur le rond comme une étiquette */
.noeud .num {
  position: absolute; right: -8px; top: -6px; min-width: 26px; height: 26px; padding: 0 5px; border-radius: 99px;
  display: grid; place-items: center; background: var(--carte); color: var(--encre); border: 2px solid var(--encre);
  font-family: var(--titres); font-size: 13px; font-weight: 800; rotate: 8deg;
}
.noeud--verrou .num { color: var(--texte3); }

/* Carte « Le grand voyage » (365 niveaux) */
.voyage { margin-bottom: 24px; background: var(--or); rotate: -.6deg; }
.voyage-tete { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.voyage-ico { font-size: 30px; width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--carte); border: var(--bord); }
.voyage h3 { margin-bottom: 2px; }
.voyage p { color: var(--encre); }
.voyage .jauge { background: var(--carte); }
.voyage .voyage-total { margin-top: 10px; font-size: 14px; }
.voir-plus {
  display: block; margin: 26px auto 0; padding: 10px 18px; border-radius: 99px; border: var(--bord); background: var(--carte); box-shadow: var(--ombre-s);
  font-family: var(--titres); font-weight: 800; font-size: 15px; transition: transform .2s var(--ressort);
}
.voir-plus:hover { transform: translate(-2px, -2px) rotate(-1deg); }
.voir-plus small { color: var(--texte2); font-weight: 700; }

/* ====== Grille des sujets ====== */
.titre-page { font-size: 34px; font-weight: 800; margin: 18px 0 6px; }
.sous-titre { color: var(--texte2); margin-bottom: 22px; line-height: 1.45; }
.grille-themes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 560px) { .grille-themes { grid-template-columns: repeat(3, 1fr); } }
.carte-theme {
  position: relative; text-align: left; padding: 14px; border-radius: var(--rayon);
  background: var(--c); color: var(--ct); border: var(--bord); box-shadow: var(--ombre);
  display: flex; flex-direction: column; gap: 6px; min-height: 160px;
  rotate: var(--r, -1.2deg);
  transition: transform .2s var(--ressort), box-shadow .2s, rotate .2s var(--ressort);
}
.carte-theme:nth-child(3n+2) { --r: 1.3deg; }
.carte-theme:nth-child(3n) { --r: -.4deg; }
.carte-theme:hover { rotate: 0deg; transform: translate(-2px, -4px) scale(1.03); box-shadow: 7px 8px 0 var(--encre); }
.carte-theme:active { transform: translate(4px, 4px); box-shadow: none; }
.carte-theme .emoji {
  font-size: 28px; width: 54px; height: 54px; display: grid; place-items: center;
  background: var(--carte); border: var(--bord); border-radius: 50%; box-shadow: 2px 2px 0 var(--encre);
  transition: transform .3s var(--ressort);
}
.carte-theme:hover .emoji { transform: rotate(-14deg) scale(1.12); }
.carte-theme strong { font-family: var(--titres); font-size: 19px; font-weight: 800; line-height: 1.1; margin-top: 4px; }
.carte-theme small { font-weight: 700; opacity: .9; font-size: 13px; }
.carte-theme .mini-jauge { margin-top: auto; height: 10px; border-radius: 99px; background: rgba(255,255,255,.6); border: 2px solid var(--encre); overflow: hidden; }
.carte-theme .mini-jauge span { display: block; height: 100%; background: var(--encre); }
.carte-theme.choisi { outline: 3px dashed var(--encre); outline-offset: 5px; }
.carte-theme.choisi::after {
  content: '✓'; position: absolute; top: -12px; right: -10px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--or); color: var(--encre); border: var(--bord); font-weight: 800;
  animation: pop .4s var(--ressort);
}

/* ====== Panneau / cartes d'info ====== */
.objectif-ligne { display: flex; align-items: center; gap: 12px; }
.objectif-ligne .jauge { flex: 1; }
.fait-du-jour { background: var(--marque-clair); }
.installation { background: var(--vert-clair); rotate: .5deg; }
.installation p { color: var(--texte); }
.fait-du-jour .etiquette {
  display: inline-block; font-family: var(--titres); font-size: 13px; font-weight: 800;
  padding: 2px 10px; border-radius: 99px; background: var(--marque); color: #fff; border: 2px solid var(--encre); rotate: -2deg;
}
.fait-du-jour p { color: var(--texte); font-size: 16px; margin-top: 10px; font-weight: 500; }
.semaine { display: flex; justify-content: space-between; margin-top: 14px; }
.semaine div { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--titres); font-size: 13px; font-weight: 800; color: var(--texte3); }
.semaine span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--creme2); border: 2px solid var(--texte3); font-size: 16px; }
.semaine .fait span { background: var(--or); border-color: var(--encre); box-shadow: 2px 2px 0 var(--encre); }
.entree .semaine .fait span { animation: pop .5s var(--ressort) both; animation-delay: calc(var(--i) * 80ms + 300ms); }
.semaine .auj { color: var(--texte); }
.semaine .auj span { border-style: dashed; border-color: var(--encre); }

/* ====== Défi du jour ====== */
.defi-tete {
  position: relative; margin-top: 18px; border-radius: 24px; padding: 22px; color: #fff;
  background-color: var(--marque);
  background-image: radial-gradient(rgba(255,255,255,.2) 2px, transparent 2.5px);
  background-size: 18px 18px;
  border: var(--bord); box-shadow: var(--ombre);
  display: grid; grid-template-columns: 1fr 104px; align-items: center; gap: 10px;
  rotate: -.8deg;
}
.defi-tete small {
  display: inline-block; font-family: var(--titres); font-weight: 800; font-size: 13px;
  padding: 2px 10px; border-radius: 99px; background: var(--or); color: var(--encre); border: 2px solid var(--encre); rotate: -3deg;
}
.defi-tete h2 { font-size: 32px; font-weight: 800; margin: 8px 0 6px; }
.defi-tete p { opacity: .95; line-height: 1.45; margin-bottom: 16px; }
.liste-entrainement { display: grid; gap: 14px; margin-top: 12px; }
.ligne-action { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; transition: transform .2s var(--ressort), box-shadow .2s; }
.ligne-action:hover:not(:disabled) { transform: translate(-2px, -2px) rotate(-.5deg); box-shadow: 6px 6px 0 var(--encre); }
.ligne-action .ico-rond { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; background: var(--or); border: var(--bord); flex: none; rotate: -6deg; }
.ligne-action strong { display: block; font-family: var(--titres); font-size: 18px; font-weight: 800; }
.ligne-action small { color: var(--texte2); font-weight: 600; }
.ligne-action .fleche { margin-left: auto; font-size: 26px; font-weight: 800; }
.ligne-action:disabled { opacity: .5; cursor: default; }
.section-titre { font-size: 24px; font-weight: 800; margin: 32px 0 6px; }

/* ====== Profil & boutique ====== */
.profil-tete { display: flex; align-items: center; gap: 18px; margin-top: 18px; }
.profil-tete .avatar-grand { width: 140px; flex: none; }
.profil-tete h1 { font-size: 32px; font-weight: 800; }
.profil-tete .grade { display: inline-block; font-family: var(--titres); font-weight: 800; padding: 2px 10px; border-radius: 99px; background: var(--marque); color: #fff; border: 2px solid var(--encre); rotate: -2deg; margin-top: 4px; }
.niveau-jauge { margin-top: 12px; }
.niveau-jauge small { color: var(--texte2); font-weight: 600; }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.stat { display: flex; gap: 10px; align-items: center; border: var(--bord); border-radius: 16px; padding: 12px 14px; background: var(--carte); box-shadow: var(--ombre-s); }
.stat:nth-child(odd) { rotate: -.8deg; }
.stat:nth-child(even) { rotate: .7deg; }
.stat .ico { font-size: 26px; }
.stat strong { display: block; font-family: var(--titres); font-size: 22px; font-weight: 800; }
.stat small { color: var(--texte2); font-weight: 600; font-size: 13px; }
.onglets { display: flex; gap: 10px; margin: 14px 0; }
.onglet { padding: 8px 16px; border-radius: 99px; border: var(--bord); font-family: var(--titres); font-weight: 800; background: var(--carte); transition: rotate .2s var(--ressort); }
.onglet.actif { background: var(--encre); color: #fff; rotate: -2deg; }
.boutique { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.article {
  border: var(--bord); border-radius: 16px; padding: 8px 8px 10px; background: var(--carte); box-shadow: var(--ombre-s);
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  transition: transform .2s var(--ressort);
}
.article:hover { transform: rotate(-3deg) scale(1.04); }
.sous-section { font-size: 20px; font-weight: 800; margin: 26px 0 4px; }
.article.porte { background: var(--marque-clair); outline: 3px dashed var(--marque); outline-offset: 3px; }
.article .apercu { width: 84px; }
.article strong { font-family: var(--titres); font-size: 14px; font-weight: 800; line-height: 1.15; min-height: 2.3em; display: grid; place-items: center; }
.article .prix { font-family: var(--titres); font-size: 14px; font-weight: 800; padding: 1px 10px; border-radius: 99px; background: var(--or); border: 2px solid var(--encre); }
.article .etat { font-family: var(--titres); font-size: 13px; font-weight: 800; color: var(--marque-f); }
.champ { display: grid; gap: 6px; margin-bottom: 14px; }
.champ label { font-family: var(--titres); font-weight: 800; font-size: 15px; }
.champ input, .champ select {
  border: var(--bord); border-radius: 12px; padding: 12px 14px; background: var(--fond); font-weight: 600; font-size: 16px; width: 100%;
  transition: box-shadow .15s, transform .15s;
}
.champ input:focus, .champ select:focus { outline: none; background: #fff; box-shadow: var(--ombre-s); transform: translate(-1px, -1px); }
.interrupteur { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; font-family: var(--titres); font-weight: 800; }
.interrupteur input { width: 24px; height: 24px; accent-color: var(--marque); }

/* ====== Accueil (première visite) ====== */
.accueil { min-height: 100vh; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; padding: 24px 16px; }
.accueil-corps { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; }
.accueil h1 { font-size: 34px; font-weight: 800; }
.accueil .intro { color: var(--texte2); font-size: 18px; line-height: 1.5; max-width: 400px; }
.accueil .mascotte-accueil { width: 220px; }
.accueil-pied { display: grid; gap: 12px; padding-top: 12px; }
.option-objectif {
  display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 16px 18px;
  border: var(--bord); border-radius: 16px; background: var(--carte); box-shadow: var(--ombre-s);
  font-family: var(--titres); font-weight: 800; font-size: 18px; transition: transform .2s var(--ressort), rotate .2s var(--ressort);
}
.option-objectif:hover { transform: translate(-2px, -2px); }
.option-objectif small { font-family: var(--police); color: var(--texte2); font-weight: 600; font-size: 14px; }
.option-objectif.choisi { background: var(--or); rotate: -1.2deg; }
.liste-options { display: grid; gap: 12px; width: 100%; text-align: left; }
.etapes { display: flex; gap: 8px; }
.etapes span { flex: 1; height: 10px; border-radius: 9px; background: var(--creme2); border: 2px solid var(--encre); transition: background .3s; }
.etapes span.ok { background: var(--marque); }

/* ====== Mascotte & bulles ====== */
.decoupe { filter: drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(3px 4px 0 rgba(27,27,47,.85)); }
.mascotte-parle { display: flex; align-items: flex-end; gap: 12px; }
.mascotte-parle .elephant-boite { width: 110px; flex: none; }
.bulle {
  position: relative; border: var(--bord); border-radius: 18px; padding: 14px 16px; background: var(--carte); box-shadow: var(--ombre-s);
  font-family: var(--titres); font-size: 20px; font-weight: 700; line-height: 1.35; margin-bottom: 34px; text-align: left;
}
.bulle::before {
  content: ''; position: absolute; left: -9px; top: 60%; width: 16px; height: 16px;
  background: var(--carte); border-left: var(--bord); border-bottom: var(--bord); transform: rotate(45deg);
}

.elephant { display: block; width: 100%; height: auto; overflow: visible; }
.elephant .elephant-oreille--g { transform-origin: 80px 86px; animation: oreille-g 3.2s ease-in-out infinite; }
.elephant .elephant-oreille--d { transform-origin: 120px 86px; animation: oreille-d 3.2s ease-in-out infinite; }
@keyframes oreille-g { 0%, 78%, 100% { transform: rotate(0); } 84% { transform: rotate(-12deg); } 90% { transform: rotate(4deg); } }
@keyframes oreille-d { 0%, 78%, 100% { transform: rotate(0); } 84% { transform: rotate(12deg); } 90% { transform: rotate(-4deg); } }
.elephant .elephant-yeux { transform-box: fill-box; transform-origin: center; animation: cligne 4.6s infinite; }
@keyframes cligne { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
.elephant .elephant-trompe { transform-origin: 100px 100px; animation: trompe 3.4s ease-in-out infinite; }
@keyframes trompe { 50% { transform: rotate(5deg); } }
.danse .elephant { animation: danse .7s ease-in-out infinite; transform-origin: 50% 95%; }
@keyframes danse { 25% { transform: rotate(-7deg) translateY(-8px); } 75% { transform: rotate(7deg) translateY(-8px); } }
.secoue .elephant { animation: secoue .5s ease-in-out; }
@keyframes secoue { 20%, 60% { transform: translateX(-7px) rotate(-4deg); } 40%, 80% { transform: translateX(7px) rotate(4deg); } }
.saute .elephant { animation: saute .7s var(--ressort); transform-origin: 50% 100%; }
@keyframes saute { 0% { transform: scale(1, 1); } 25% { transform: scale(1.1, .85); } 55% { transform: translateY(-26px) scale(.95, 1.08) rotate(-6deg); } 100% { transform: none; } }
.flotte .elephant { animation: flotte 3s ease-in-out infinite; }
@keyframes flotte { 50% { transform: translateY(-7px) rotate(-2deg); } }
.tourbillon .elephant { animation: tourbillon .8s var(--ressort); }
@keyframes tourbillon { from { transform: rotate(-360deg) scale(.5); } }

/* ====== Apparition des écrans (seulement quand on change d'écran) ====== */
.entree .apparait { animation: apparait .55s var(--ressort) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes apparait { from { opacity: 0; translate: 0 26px; scale: .94; } }
.entree .centre > :not(.barre-haut), .entree .panneau > * { animation: apparait .55s var(--ressort) both; }
.entree .centre > :nth-child(3) { animation-delay: .06s; } .entree .centre > :nth-child(4) { animation-delay: .12s; }
.entree .centre > :nth-child(5) { animation-delay: .18s; } .entree .centre > :nth-child(n+6) { animation-delay: .24s; }
.entree .panneau > :nth-child(2) { animation-delay: .1s; } .entree .panneau > :nth-child(3) { animation-delay: .18s; } .entree .panneau > :nth-child(4) { animation-delay: .26s; }
.entree .grille-themes > * { animation: apparait .5s var(--ressort) both; animation-delay: calc(var(--i, 0) * 45ms + .12s); }
.entree .boutique > * { animation: apparait .5s var(--ressort) both; animation-delay: calc(var(--i, 0) * 35ms + .2s); }
.entree .accueil-corps > *, .entree .accueil-pied { animation: apparait .55s var(--ressort) both; }
.entree .accueil-corps > :nth-child(2) { animation-delay: .1s; } .entree .accueil-corps > :nth-child(3) { animation-delay: .2s; } .entree .accueil-pied { animation-delay: .3s; }

/* ====== Leçon ====== */
.lecon { min-height: 100vh; display: flex; flex-direction: column; }
.lecon-haut { display: flex; align-items: center; gap: 16px; max-width: 1000px; width: 100%; margin: 0 auto; padding: 20px 16px 8px; }
.lecon-haut .fermer { font-size: 20px; font-weight: 800; width: 42px; height: 42px; flex: none; border-radius: 50%; border: var(--bord); background: var(--carte); box-shadow: 2px 2px 0 var(--encre); transition: transform .2s var(--ressort); }
.lecon-haut .fermer:hover { transform: rotate(90deg); }
.lecon-haut .jauge { flex: 1; }
.combo {
  position: absolute; right: 0; top: -30px; white-space: nowrap;
  font-family: var(--titres); font-size: 14px; font-weight: 800; color: var(--encre);
  padding: 1px 10px; border-radius: 99px; background: var(--or); border: 2px solid var(--encre);
  animation: combo .5s var(--ressort);
}
@keyframes combo { from { scale: 0; rotate: -20deg; } }
.lecon-corps { flex: 1; width: 100%; max-width: 620px; margin: 0 auto; padding: 26px 16px 240px; display: flex; flex-direction: column; gap: 22px; }
.entree .lecon-corps > * { animation: glisse .5s var(--ressort) both; }
.entree .lecon-corps > :nth-child(2) { animation-delay: .07s; } .entree .lecon-corps > :nth-child(3) { animation-delay: .14s; }
@keyframes glisse { from { opacity: 0; translate: 60px 0; rotate: 2deg; } }
.consigne {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--titres); font-size: 14px; font-weight: 800;
  padding: 3px 12px; border-radius: 99px; background: var(--c); color: var(--ct); border: 2px solid var(--encre); rotate: -2deg;
}
.enonce { font-size: 26px; font-weight: 800; line-height: 1.25; }
.etiquette-theme { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--texte2); margin-top: 8px; }

.choix-liste { display: grid; gap: 12px; }
.choix {
  display: flex; align-items: center; gap: 14px; text-align: left; width: 100%;
  padding: 13px 16px; border: var(--bord); border-radius: 16px; background: var(--carte); box-shadow: var(--ombre-s);
  font-size: 18px; font-weight: 600; line-height: 1.3;
  transition: transform .15s var(--ressort), box-shadow .15s, background .15s;
}
.entree .choix-liste .choix, .entree .vf-liste .choix, .entree .puces .puce, .entree .colonne .puce { animation: apparait .45s var(--ressort) both; animation-delay: calc(var(--i, 0) * 60ms + .2s); }
.choix:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--encre); }
.choix .touche {
  flex: none; width: 32px; height: 32px; border-radius: 10px; border: 2px solid var(--encre); display: grid; place-items: center;
  font-family: var(--titres); font-size: 15px; font-weight: 800; background: var(--fond);
}
.choix.choisi { background: var(--marque-clair); transform: translate(-1px, -1px) rotate(-.6deg); box-shadow: 4px 4px 0 var(--marque); }
.choix.choisi .touche { background: var(--marque); color: #fff; }
.choix.bon { background: var(--vert-clair); animation: bon .45s var(--ressort); }
.choix.bon .touche { background: var(--vert); }
.choix.faux { background: var(--rouge-clair); animation: secoue-x .4s; }
.choix.faux .touche { background: var(--rouge); color: #fff; }
.choix.grise { opacity: .4; box-shadow: none; }
.choix:disabled { cursor: default; }
@keyframes bon { 40% { scale: 1.05; rotate: -1deg; } }

.vf-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vf-liste .choix { flex-direction: column; justify-content: center; padding: 22px 10px; font-family: var(--titres); font-size: 22px; font-weight: 800; }
.vf-liste .choix .gros { font-size: 42px; transition: transform .25s var(--ressort); }
.vf-liste .choix:hover .gros { transform: scale(1.2) rotate(-10deg); }

.phrase-trou { font-family: var(--titres); font-size: 25px; font-weight: 700; line-height: 2; }
.trou { display: inline-block; min-width: 110px; padding: 0 12px; margin: 0 4px; border-bottom: 3px dashed var(--encre); text-align: center; color: var(--marque-f); }
.trou.rempli { border-bottom-style: solid; animation: pop .35s var(--ressort); }
.puces { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.puce {
  padding: 10px 16px; border: var(--bord); border-radius: 14px; background: var(--carte); box-shadow: var(--ombre-s);
  font-size: 17px; font-weight: 600;
  transition: transform .15s var(--ressort), box-shadow .15s;
}
.puce:hover:not(:disabled) { transform: translate(-2px, -2px) rotate(-2deg); box-shadow: 5px 5px 0 var(--encre); }
.puce.utilisee { color: transparent; background: var(--creme2); border-style: dashed; border-color: var(--texte3); box-shadow: none; pointer-events: none; }
.puce.choisi { background: var(--marque-clair); box-shadow: 4px 4px 0 var(--marque); rotate: -2deg; }
.puce.bon { background: var(--vert-clair); }
.puce.faux { background: var(--rouge-clair); animation: secoue-x .35s; }
.puce.trouvee { background: var(--vert-clair); opacity: .55; box-shadow: none; pointer-events: none; animation: bon .4s var(--ressort); }
@keyframes secoue-x { 25%, 75% { translate: -6px 0; rotate: -2deg; } 50% { translate: 6px 0; rotate: 2deg; } }

.paires { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.paires .colonne { display: grid; gap: 12px; align-content: start; }
.paires .puce { width: 100%; min-height: 60px; }

.zone-ordre {
  min-height: 74px; border: 2.5px dashed var(--encre); border-radius: 18px; padding: 12px; background: rgba(255,255,255,.55);
  display: flex; flex-direction: column; gap: 10px;
}
.zone-ordre .puce { display: flex; align-items: center; gap: 12px; text-align: left; }
.zone-ordre .puce.nouvelle { animation: pose .35s var(--ressort); }
@keyframes pose { from { translate: 0 20px; scale: .9; opacity: 0; } }
.zone-ordre .rang { width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: var(--ct); border: 2px solid var(--encre); display: grid; place-items: center; font-family: var(--titres); font-size: 14px; font-weight: 800; flex: none; }
.zone-ordre .vide { color: var(--texte2); font-weight: 600; text-align: center; padding: 12px; }

.lecon-pied { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: linear-gradient(transparent, var(--fond) 32%); }
.lecon-pied-int { max-width: 1000px; margin: 0 auto; padding: 24px 16px calc(20px + env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.lecon-pied-int .btn { min-width: 170px; }
@media (max-width: 640px) { .lecon-pied-int .btn { flex: 1; min-width: 0; } .lecon-pied-int .passer { display: none; } }

.retour { background: none; padding: 0 10px 10px; }
.retour .lecon-pied-int {
  flex-wrap: wrap; position: relative; max-width: 980px;
  border: var(--bord); border-radius: 22px; box-shadow: var(--ombre); padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  animation: monter .5s var(--ressort);
}
.retour.ok .lecon-pied-int { background: var(--vert-clair); rotate: -.6deg; }
.retour.ko .lecon-pied-int { background: var(--rouge-clair); rotate: .6deg; }
.retour-texte { display: flex; gap: 14px; align-items: flex-start; flex: 1 1 320px; }
.retour-icone { width: 58px; height: 58px; border-radius: 50%; background: var(--carte); border: var(--bord); display: grid; place-items: center; flex: none; animation: pop .5s var(--ressort) .1s both; }
.retour-icone svg { width: 30px; height: 30px; }
.retour h3 { font-size: 26px; font-weight: 800; }
.retour.ok h3 { color: var(--vert-f); }
.retour.ko h3 { color: var(--rouge-f); }
.retour p { margin-top: 4px; line-height: 1.45; font-weight: 500; }
.retour p.solution { font-weight: 700; }
.tampon {
  position: absolute; right: 22px; top: -24px; font-family: var(--titres); font-weight: 800; font-size: 17px; letter-spacing: .05em;
  padding: 3px 14px; border-radius: 10px; border: 3px solid currentColor; background: var(--fond);
  rotate: 8deg; animation: tampon .45s cubic-bezier(.3, 1.6, .5, 1) .15s both;
}
.retour.ok .tampon { color: var(--vert-f); }
.retour.ko .tampon { color: var(--rouge-f); }
@keyframes tampon { from { opacity: 0; rotate: -12deg; scale: 2.4; } }
@keyframes monter { from { translate: 0 130%; rotate: 4deg; } }

/* ====== Fin de leçon ====== */
.fin { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 16px 150px; gap: 18px; max-width: 640px; margin: 0 auto; }
.fin .mascotte-fin { width: 210px; }
.fin h1 { font-size: 36px; font-weight: 800; }
.entree .fin h1, .entree .fin .sous { animation: apparait .6s var(--ressort) both .2s; }
.fin .sous { color: var(--texte2); font-size: 18px; }
.cartes-resultat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%; max-width: 480px; }
.resultat { border: var(--bord); border-radius: 18px; overflow: hidden; background: var(--k); box-shadow: var(--ombre); }
.resultat:nth-child(1) { rotate: -3deg; }
.resultat:nth-child(2) { rotate: 2deg; }
.resultat:nth-child(3) { rotate: -1.5deg; }
.entree .resultat { animation: tombe .6s var(--ressort) both; animation-delay: calc(var(--i) * 140ms + .35s); }
@keyframes tombe { from { opacity: 0; translate: 0 -80px; scale: .6; } }
.resultat small { display: block; font-family: var(--titres); color: var(--encre); font-size: 13px; font-weight: 800; padding: 6px 4px; }
.resultat strong { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--carte); border-top: var(--bord); padding: 14px 4px; font-family: var(--titres); font-size: 22px; font-weight: 800; color: var(--encre); }
.bonus { display: inline-block; font-family: var(--titres); font-weight: 800; padding: 4px 14px; border-radius: 99px; background: var(--or); border: var(--bord); box-shadow: var(--ombre-s); rotate: -2deg; }
.entree .bonus { animation: pop .5s var(--ressort) both .9s; }
.grande-flamme { font-size: 130px; line-height: 1; transform-origin: 50% 90%; animation: flamme-entre .9s var(--ressort) both, flamme 1s ease-in-out .9s infinite alternate; }
@keyframes flamme-entre { from { transform: scale(0) rotate(-40deg); } }
@keyframes flamme { to { transform: scale(1.1) rotate(-4deg); } }
.gros-chiffre {
  font-family: var(--titres); font-size: 88px; font-weight: 800; line-height: 1; color: var(--flamme);
  -webkit-text-stroke: 3px var(--encre); paint-order: stroke fill; text-shadow: 5px 5px 0 var(--encre);
}
.entree .gros-chiffre { animation: chiffre .7s var(--ressort) both .5s; }
@keyframes chiffre { from { translate: 0 40px; scale: .3; rotate: 20deg; opacity: 0; } }

/* ====== Fenêtre modale ====== */
.voile { position: fixed; inset: 0; background: rgba(27,27,47,.5); display: grid; place-items: center; z-index: 50; padding: 16px; animation: fondu .2s; }
@keyframes fondu { from { opacity: 0; } }
.modale {
  background: var(--carte); border: var(--bord); border-radius: 24px; box-shadow: 6px 6px 0 var(--encre);
  padding: 26px 22px 22px; width: 100%; max-width: 400px; text-align: center; display: grid; gap: 14px;
  animation: modale .45s var(--ressort);
}
@keyframes modale { from { scale: .5; rotate: -8deg; opacity: 0; } }
.modale .elephant-boite { width: 140px; margin: 0 auto; }
.modale h2 { font-size: 28px; font-weight: 800; }
.modale p { color: var(--texte2); line-height: 1.5; }

/* ====== Confettis, éclats & petits effets ====== */
.confetti { position: fixed; top: -16px; width: 12px; height: 16px; z-index: 60; pointer-events: none; border: 2px solid var(--encre); animation: tomber linear forwards; }
@keyframes tomber { to { transform: translateY(108vh) rotate(var(--rot, 720deg)); } }
.eclat {
  position: fixed; z-index: 60; pointer-events: none; font-size: 20px; line-height: 1;
  animation: eclat .75s cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes eclat { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1) rotate(var(--rot)); opacity: 0; } }
.toast {
  position: fixed; left: 50%; top: 18px; z-index: 70; padding: 12px 18px; border-radius: 14px;
  background: var(--or); color: var(--encre); border: var(--bord); box-shadow: var(--ombre);
  font-family: var(--titres); font-weight: 800; transform: translateX(-50%); rotate: -1.5deg;
  animation: toast .45s var(--ressort);
}
@keyframes toast { from { translate: 0 -90px; rotate: -10deg; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

/* ====== Guide d'installation sur iPhone / iPad / Mac ====== */
.guide-apple { text-align: left; }
.guide-apple h2, .guide-apple > p { text-align: center; }
.guide-apple .petit { font-size: 14px; }
.etapes-apple { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 10px; }
.etapes-apple li {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: var(--bord); border-radius: 14px; background: var(--fond); box-shadow: var(--ombre-s); line-height: 1.35;
  animation: apparait .45s var(--ressort) both; animation-delay: calc(var(--i) * 120ms + .15s);
}
.num-etape {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--marque); color: #fff; border: 2px solid var(--encre); font-family: var(--titres); font-weight: 800; font-size: 14px;
}
.ico-apple { flex: none; width: 34px; height: 34px; display: grid; place-items: center; font-size: 22px; background: #fff; border-radius: 9px; border: 1.5px solid #D9D9E0; padding: 3px; }
.fleche-partager {
  position: fixed; left: 50%; bottom: calc(8px + env(safe-area-inset-bottom)); translate: -50% 0;
  font-family: var(--titres); font-size: 46px; font-weight: 800; color: var(--or);
  -webkit-text-stroke: 2.5px var(--encre); paint-order: stroke fill;
  animation: montre-partager 1s ease-in-out infinite; pointer-events: none;
}
@keyframes montre-partager { 50% { transform: translateY(12px); } }

/* ====== Fenêtre « Télécharge Intellect » ====== */
.invitation .invitation-icone { width: 96px; height: 96px; margin: 0 auto; border-radius: 24px; overflow: hidden; border: var(--bord); box-shadow: var(--ombre); rotate: -4deg; animation: tourbillon .8s var(--ressort); }
.invitation .invitation-icone img { width: 100%; height: 100%; display: block; }
.invitation .petit { font-size: 14px; }
.ico-barre { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--texte3); font-weight: 800; }