/* Parcours de la greffe. Couleurs : seulement les variables de tama.css. */

.tete-parcours { padding-top: 44px; padding-bottom: 34px; display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.tete-parcours .titre-sec { max-width: 660px; }
.tete-parcours h1 { margin-top: 4px; }
.choix { display: inline-flex; gap: 6px; padding: 6px; border: var(--trait); border-radius: 999px; background: var(--blanc); box-shadow: 0 4px 0 var(--encre); }
.choix button { min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px; font: inherit; font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--encre); background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.choix button[aria-pressed="true"][data-who="enfant"] { background: var(--tomate); box-shadow: inset 0 0 0 2.5px var(--encre); }
.choix button[aria-pressed="true"][data-who="maman"] { background: var(--sakura); box-shadow: inset 0 0 0 2.5px var(--encre); }

.chemin-grille { display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: start; padding-bottom: 80px; }

/* ===== le chemin ===== */
.chemin { --amp: 120px; display: grid; }
.chapitre { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 24px; margin: 40px 0 30px; background: var(--c); }
.chapitre:first-child { margin-top: 0; }
.chapitre h3 { font-size: 1.55rem; }
.chapitre p { font-weight: 800; font-size: 1rem; }
.chapitre .nb { flex: none; font-family: var(--display); font-weight: 700; font-size: 1rem; padding: 3px 12px; border: 2.5px solid var(--encre); border-radius: 999px; background: var(--blanc); }
.chapitre.eveil { --c: var(--matcha); } .chapitre.amis { --c: var(--tomate); } .chapitre.tete { --c: var(--sakura); } .chapitre.vitesse { --c: var(--soleil); }
.chapitre.dan { --c: var(--nuit); color: var(--nuit-texte); border-color: var(--encre); }
.chapitre.dan .nb { color: var(--encre); }
.noeuds { display: grid; gap: 22px; justify-items: center; }
.noeud { position: relative; width: 84px; height: 84px; padding: 0; border: 0; background: none; cursor: pointer; transform: translateX(calc(var(--s) * var(--amp))); }
.noeud .disque { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1; border-radius: 50%; font-family: var(--display); font-weight: 700; font-size: 1.7rem; transition: transform .15s var(--pop); }
.noeud .disque small { display: block; font-size: 1rem; letter-spacing: .05em; text-transform: uppercase; margin-top: 2px; }
.noeud .disque b.long { font-size: 1.15rem; }
.noeud:hover .disque { transform: scale(1.06); }
.noeud.exam .disque { border-radius: 26px; }
.noeud.locked .disque { color: var(--doux); border: 3px dashed var(--doux); background: var(--papier); }
.noeud.done .disque { color: var(--tampon); border: 3px solid var(--tampon); box-shadow: inset 0 0 0 4px var(--tampon-fond), inset 0 0 0 6.5px var(--tampon); background: var(--tampon-fond); transform: rotate(var(--rot, -8deg)); }
.noeud.done:hover .disque { transform: rotate(var(--rot, -8deg)) scale(1.06); }
.noeud.current .disque { color: var(--encre); background: var(--c, var(--tomate)); border: var(--trait); box-shadow: 0 5px 0 var(--encre); }
.noeud.current .disque::after { content: ""; position: absolute; inset: -9px; border-radius: inherit; border: 3px solid var(--c, var(--tomate)); animation: anneau 2s ease-out infinite; }
@keyframes anneau { from { transform: scale(.92); opacity: .9; } to { transform: scale(1.22); opacity: 0; } }
.noeud.current.maman .disque { --c: var(--sakura); }
.noeud:active .disque { transform: translateY(4px); }

/* Tama « Tu es ici », et la place de l'autre : à côté du rond, du côté où il y a de la place. */
.ici { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 2px; white-space: nowrap; pointer-events: none; }
.ici.gauche { right: calc(100% + 12px); flex-direction: row-reverse; }
.ici.droite { left: calc(100% + 12px); }
.ici .bulle { font-size: 1.1rem; padding: 6px 12px; box-shadow: 0 3px 0 var(--encre); }
.ici .marque { font-family: var(--display); font-weight: 700; font-size: 1rem; padding: 3px 12px; border: 2.5px solid var(--encre); border-radius: 999px; background: var(--c); }
.ici-ligne { display: none; }

/* ===== à côté du chemin ===== */
.cote-col { position: sticky; top: 96px; display: grid; gap: 22px; }
.carte-cote { padding: 24px; display: grid; gap: 12px; }
.carte-cote h3 { font-size: 1.3rem; }
.carte-cote p { font-weight: 600; color: var(--encre-2); }
.carte-cote.geste { background: var(--soleil-doux); }
.echelle { display: flex; align-items: end; gap: 6px; height: 96px; margin: 4px 0 0; }
.echelle i { flex: 1; border: 2.5px solid var(--encre); border-radius: 8px 8px 4px 4px; background: var(--papier-2); }
.echelle i.enfant { background: var(--tomate); }
.echelle i.maman { background: var(--sakura); }
.cotes { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-weight: 900; font-size: 1rem; }
.cotes span { display: inline-flex; align-items: center; gap: 8px; }
.geste-dessin { display: flex; gap: 10px; }
.geste-dessin span { flex: 1; display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border: 2.5px solid var(--encre); border-radius: 16px; background: var(--blanc); font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.geste-dessin em { font-style: normal; font-family: var(--body); font-weight: 800; font-size: .95rem; color: var(--encre-2); text-align: center; line-height: 1.25; }
.parent-ligne { display: flex; align-items: center; gap: 14px; }

/* ===== la feuille qui monte (détail d'une leçon) ===== */
.voile { position: fixed; inset: 0; background: var(--voile); z-index: 40; display: grid; align-items: end; justify-items: center; }
.feuille-bas { width: min(640px, 100%); background: var(--blanc); border: var(--trait); border-bottom: 0; border-radius: 30px 30px 0 0; padding: 26px 26px 32px; display: grid; gap: 14px; animation: slide-up .35s var(--pop); }
.feuille-bas .poignee { width: 54px; height: 6px; border-radius: 99px; background: var(--encre); opacity: .25; margin: -8px auto 2px; }
.feuille-bas .tete { display: flex; gap: 14px; align-items: center; }
.feuille-bas h3 { font-size: 1.6rem; margin-top: 8px; }
.feuille-bas p { font-size: 1.1rem; font-weight: 600; }

/* ===== les grades ===== */
.grades { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.carte-grade { padding: 20px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; }
.carte-grade .rond { width: 76px; height: 76px; }
.carte-grade .rond b { font-size: 1.5rem; }
.carte-grade .rond.eveil b { font-size: 1.1rem; }
.carte-grade h4 { font-size: 1.2rem; }
.carte-grade p { font-size: 1rem; line-height: 1.45; color: var(--encre-2); font-weight: 600; }
.rond.fait.vert { color: var(--encre); border-color: var(--encre); box-shadow: inset 0 0 0 4px var(--matcha-doux), inset 0 0 0 6.5px var(--encre); background: var(--matcha-doux); }
.rond.fait.noir { color: var(--encre); border-color: var(--encre); box-shadow: inset 0 0 0 4px var(--soleil-doux), inset 0 0 0 6.5px var(--encre); background: var(--soleil-doux); }

@media (max-width: 980px) {
  .chemin-grille { grid-template-columns: 1fr; }
  .cote-col { position: static; }
}
@media (max-width: 720px) {
  .chemin { --amp: 72px; }
  .tete-parcours { padding-top: 26px; padding-bottom: 26px; }
  .choix { width: 100%; }
  .choix button { flex: 1; justify-content: center; padding: 0 6px; font-size: 1rem; white-space: nowrap; }
  .choix .pastille { display: none; }
  .chapitre { padding: 14px 16px; }
  .chapitre h3 { font-size: 1.35rem; }
  .noeud .ici { display: none; }
  .ici-ligne { display: flex; justify-content: center; align-items: center; gap: 4px; margin: -8px 0 0; transform: translateX(calc(var(--s) * var(--amp) * .5)); }
  .ici-ligne .bulle { font-size: 1.1rem; padding: 6px 12px; box-shadow: 0 3px 0 var(--encre); }
  .ici-ligne .marque { font-family: var(--display); font-weight: 700; font-size: 1rem; padding: 3px 12px; border: 2.5px solid var(--encre); border-radius: 999px; background: var(--c); }
}