/* Cabri — feuille de style unique.
   Palette « île » : sable, lagon, fougère, lave. */

:root {
  --fond: #F7F2E8;
  --surface: #FFFDF8;
  --surface-2: #EEE6D6;
  --encre: #1E2A2A;
  --encre-2: #5A6663;
  --trait: #E2D8C5;
  --pin: #0E7A70;
  --pin-fonce: #0A5C55;
  --pin-clair: #DCF0EB;
  --aube: #EE6331;
  --aube-fonce: #BF4719;
  --aube-clair: #FFE7DA;
  --ciel: #2A8DB2;
  --danger: #C93A32;
  --ombre: 0 1px 2px rgba(60, 44, 20, .06), 0 6px 18px -10px rgba(60, 44, 20, .25);

  --mer: #7FC8C4; --mer-fonce: #5DB3B1; --lagon: #B9E5DA; --ecume: #F2FBF6;
  --brume: #F7F3EA;

  --cat-push: #E8590C; --cat-pull: #1C7ED6; --cat-jambes: #2F9E44;
  --cat-gainage: #AE3EC9; --cat-cardio: #E03131; --cat-mobilite: #0C8599;

  --titre: 'Fraunces', Georgia, 'Times New Roman', serif;
  --texte: 'Figtree', system-ui, -apple-system, sans-serif;
  --r-s: 10px; --r-m: 14px; --r-l: 20px;
  --ressort: cubic-bezier(.34, 1.56, .64, 1);
  --doux: cubic-bezier(.22, 1, .36, 1);
  --largeur: 560px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --fond: #0F1A1B; --surface: #172426; --surface-2: #203133; --encre: #EEF2EC; --encre-2: #9DB0AB;
    --trait: #2A3C3E; --pin: #2DB3A2; --pin-fonce: #1A7F73; --pin-clair: #12393A; --aube: #FF8250;
    --aube-fonce: #C25A2B; --aube-clair: #3A2219; --ciel: #5AB2D6; --danger: #F0645B;
    --ombre: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 20px -12px rgba(0, 0, 0, .6);
    --mer: #1D4E57; --mer-fonce: #17414A; --lagon: #2B6A6C; --ecume: #4E8C8A; --brume: #5E7476;
    color-scheme: dark;
  }
}
:root[data-theme="sombre"] {
  --fond: #0F1A1B; --surface: #172426; --surface-2: #203133; --encre: #EEF2EC; --encre-2: #9DB0AB;
  --trait: #2A3C3E; --pin: #2DB3A2; --pin-fonce: #1A7F73; --pin-clair: #12393A; --aube: #FF8250;
  --aube-fonce: #C25A2B; --aube-clair: #3A2219; --ciel: #5AB2D6; --danger: #F0645B;
  --ombre: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 20px -12px rgba(0, 0, 0, .6);
  --mer: #1D4E57; --mer-fonce: #17414A; --lagon: #2B6A6C; --ecume: #4E8C8A; --brume: #5E7476;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; min-height: 100dvh; background: var(--fond); color: var(--encre);
  font: 500 16px/1.5 var(--texte); overscroll-behavior-y: none;
}
h1, h2, h3 { font-family: var(--titre); font-weight: 650; font-optical-sizing: auto; line-height: 1.12; margin: 0; letter-spacing: -.015em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.2rem; }
p { margin: 0; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--ciel); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 1.25em; height: 1.25em; flex: none; }
.centre { text-align: center; }
.aide { color: var(--encre-2); font-size: .92rem; }

/* --- Coque ----------------------------------------------------------------- */
#app { max-width: var(--largeur); margin: 0 auto; min-height: 100dvh; position: relative; }
.contenu { padding: 16px 16px calc(96px + env(safe-area-inset-bottom)); }
.plein .contenu { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }

.barre-haut {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: color-mix(in srgb, var(--fond) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--trait);
}
.logo { display: inline-flex; align-items: center; gap: 6px; font: italic 700 1.5rem/1 var(--titre); text-decoration: none; color: var(--encre); letter-spacing: -.02em; }
.logo::before { content: ''; width: 18px; height: 18px; border-radius: 50% 50% 50% 8px; background: radial-gradient(circle at 60% 40%, var(--aube) 0 28%, var(--pin) 30%); transform: rotate(-45deg); }
.compteurs { display: flex; gap: 6px; align-items: center; }
.compteur { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; font-weight: 700; color: var(--encre-2); text-decoration: none; }
.compteur b { font-size: 1rem; color: var(--encre); }
.compteur small { font-weight: 700; color: var(--encre-2); }
.compteur.flamme .ic { color: var(--encre-2); }
.compteur.flamme.vive .ic { color: var(--aube); }
.compteur.alti .ic { color: var(--ciel); }
.compteur.reg { padding: 6px; }

.onglets {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--largeur); z-index: 30;
  display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border-top: 1px solid var(--trait);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
}
.onglet { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 12px; text-decoration: none; font-size: .75rem; font-weight: 700; color: var(--encre-2); }
.onglet .ic { width: 26px; height: 26px; }
.onglet { position: relative; }
.onglet.actif { color: var(--pin); }
.onglet.actif::before { content: ''; position: absolute; top: -7px; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--pin); }

/* --- Boutons ---------------------------------------------------------------- */
/* Des boutons plats et nets : on appuie, ils se tassent un peu, rien de plus. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px;
  border: 1.5px solid var(--trait); border-radius: var(--r-m); background: var(--surface); font-weight: 700; text-decoration: none;
  transition: transform .12s var(--doux), background .15s, border-color .15s; touch-action: manipulation; user-select: none;
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:hover:not(:disabled) { border-color: var(--encre-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.principal { background: var(--pin); border-color: var(--pin); color: #fff; }
.btn.principal:hover:not(:disabled) { background: var(--pin-fonce); border-color: var(--pin-fonce); }
.btn.large { width: 100%; min-height: 54px; font-size: 1.05rem; border-radius: 16px; }
.btn.large .ic { transition: transform .2s var(--doux); }
.btn.large:hover .ic { transform: translateX(3px); }
.btn.petit { min-height: 36px; padding: 6px 12px; font-size: .88rem; border-radius: var(--r-s); }
.btn.fantome { background: transparent; border-color: transparent; color: var(--encre-2); }
.btn.fantome:hover { border-color: transparent; color: var(--encre); }
.btn.danger { color: var(--danger); }
.btn.petit.danger { border-color: var(--danger); }
.btn.lien { background: none; border: 0; color: var(--pin); text-decoration: underline; text-underline-offset: 3px; padding: 8px 0; min-height: 0; }
.btn.icone-seule { padding: 8px; min-height: 40px; min-width: 40px; border: 0; background: transparent; color: var(--encre-2); }
.rond {
  width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--trait); background: var(--surface); display: grid; place-items: center;
  transition: transform .12s var(--doux), border-color .15s; touch-action: manipulation; flex: none;
}
.rond:active:not(:disabled) { transform: scale(.92); }
.rond:hover:not(:disabled) { border-color: var(--encre-2); }
.rond:disabled { opacity: .4; }
.rond.petit { width: 36px; height: 36px; }
.rond .ic { width: 22px; height: 22px; }

.pied-fixe {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: var(--largeur); z-index: 25;
  display: flex; gap: 10px; align-items: center; padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--fond) 70%, transparent);
}
.pied-fixe .btn.large { flex: 1; white-space: nowrap; }
.pied-fixe .btn.fantome { flex: none; padding-left: 8px; padding-right: 8px; font-size: .92rem; }
.pied-fixe.colonne { flex-direction: column; }

/* --- Puces, choix, champs -------------------------------------------------- */
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puces.defile { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 8px; scrollbar-width: none; }
.puces.defile::-webkit-scrollbar { display: none; }
.puce {
  display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--trait);
  background: var(--surface); font-weight: 700; font-size: .9rem; color: var(--encre-2);
}
.puce.actif { border-color: var(--pin); color: #fff; background: var(--pin); }
.puce-cat { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; transform: rotate(45deg); }
.cat-push { background: var(--cat-push); } .cat-pull { background: var(--cat-pull); } .cat-jambes { background: var(--cat-jambes); }
.cat-gainage { background: var(--cat-gainage); } .cat-cardio { background: var(--cat-cardio); } .cat-mobilite { background: var(--cat-mobilite); }

.choix { display: grid; gap: 10px; margin-top: 18px; }
.option {
  position: relative; display: grid; gap: 2px; text-align: left; padding: 14px 16px; border-radius: var(--r-m); border: 1.5px solid var(--trait);
  background: var(--surface); transition: transform .12s var(--doux), border-color .15s, background .15s;
}
.option:active { transform: scale(.985); }
.option:hover { border-color: var(--encre-2); }
.option b { font: 650 1.1rem/1.25 var(--titre); }
.option span { color: var(--encre-2); font-size: .92rem; }
.option.actif { border-color: var(--pin); background: var(--pin-clair); box-shadow: inset 0 0 0 1.5px var(--pin); }
.option .meta { font-weight: 700; color: var(--encre); font-size: .85rem; margin-top: 4px; }
.option.conseille { border-color: var(--pin); }
.pastille { justify-self: start; font-style: normal; font-size: .75rem; font-weight: 700; color: #fff; background: var(--pin); padding: 2px 8px; border-radius: 999px; margin-bottom: 4px; }

input:not([type=checkbox]):not([type=file]), select {
  width: 100%; min-height: 46px; padding: 10px 12px; border-radius: var(--r-s); border: 1.5px solid var(--trait); background: var(--surface);
}
input:focus, select:focus { border-color: var(--ciel); outline: none; }
label { font-weight: 700; font-size: .9rem; }
.facultatif { font-weight: 600; color: var(--encre-2); }
.interrupteur { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-weight: 700; font-size: .95rem; cursor: pointer; }
.interrupteur input { appearance: none; width: 46px; height: 28px; border-radius: 999px; background: var(--trait); position: relative; flex: none; transition: background .2s; cursor: pointer; }
.interrupteur input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s var(--ressort); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.interrupteur input:checked { background: var(--pin); }
.interrupteur input:checked::after { transform: translateX(18px); }
.interrupteur input:focus-visible { outline: 3px solid var(--ciel); outline-offset: 2px; }

/* --- Mascotte --------------------------------------------------------------- */
.cabri { overflow: visible; width: 72px; height: 74px; flex: none; }
.cabri.grande { width: 132px; height: 136px; }
.cabri .corps { transform-origin: 60px 120px; animation: respire 2.8s ease-in-out infinite; }
@keyframes respire { 50% { transform: scale(1.02, .97); } }
.cabri .yeux { transform-origin: 60px 64px; animation: cligne 4.6s infinite; }
@keyframes cligne { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.cabri .bras-g { transform-origin: 39px 92px; transition: transform .35s var(--ressort); }
.cabri .bras-d { transform-origin: 81px 92px; transition: transform .35s var(--ressort); }
.cabri .fermes, .cabri .contents, .cabri .bouche-joie, .cabri .zzz { display: none; }
.cabri.joie .corps, .cabri.fete .corps { animation: saut .75s var(--ressort); }
.cabri.fete .corps { animation-iteration-count: infinite; animation-duration: 1s; }
@keyframes saut { 20% { transform: translateY(2px) scale(1.08, .9); } 50% { transform: translateY(-16px) scale(.95, 1.06); } 80% { transform: scale(1.04, .96); } }
.cabri.joie .bras-g, .cabri.fete .bras-g { transform: rotate(150deg); }
.cabri.joie .bras-d, .cabri.fete .bras-d { transform: rotate(-150deg); }
.cabri.joie .ouverts, .cabri.fete .ouverts, .cabri.joie .bouche, .cabri.fete .bouche { display: none; }
.cabri.joie .contents, .cabri.fete .contents, .cabri.joie .bouche-joie, .cabri.fete .bouche-joie { display: inline; }
.cabri.dodo .ouverts { display: none; }
.cabri.dodo .fermes, .cabri.dodo .zzz { display: inline; }
.cabri.dodo .corps { animation-duration: 4.2s; }
.cabri.dodo .yeux { animation: none; }
.cabri .zzz text { animation: zzz 2.4s ease-out infinite; }
.cabri .zzz text + text { animation-delay: 1.2s; }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 6px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(8px, -10px); } }

.parole { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; }
.bulle {
  position: relative; padding: 12px 14px; border: 1.5px solid var(--trait); border-radius: var(--r-m); background: var(--surface);
  font-weight: 600; animation: bulle .35s var(--ressort);
}
.bulle::before {
  content: ''; position: absolute; left: -8px; top: 50%; width: 13px; height: 13px; margin-top: -7px; background: var(--surface);
  border-left: 1.5px solid var(--trait); border-bottom: 1.5px solid var(--trait); transform: rotate(45deg);
}
@keyframes bulle { from { opacity: 0; transform: scale(.85) translateX(-8px); } }

/* --- Accueil ---------------------------------------------------------------- */
.accueil { padding-top: calc(8px + env(safe-area-inset-top)); }
.progression-accueil { height: 12px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 8px 0 18px; }
.progression-accueil div { height: 100%; background: var(--pin); border-radius: 999px; transition: width .5s var(--ressort); min-width: 12px; }
.etape-0 .progression-accueil { visibility: hidden; }
.accueil-titre { text-align: center; display: grid; justify-items: center; gap: 10px; margin: 24px 0 28px; }
.accueil-titre h1 { font-size: 2.2rem; }
.accueil-titre p { color: var(--encre-2); max-width: 34ch; }
.champ { display: grid; gap: 6px; }
.frequence { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 36px 0 16px; }
.frequence output { display: grid; text-align: center; min-width: 8ch; }
.frequence output b { font: 650 4.2rem/1 var(--titre); color: var(--pin); }
.frequence output span { color: var(--encre-2); font-weight: 700; }
.accueil .btn.lien { display: block; margin: 16px auto 0; }

/* --- L'île ----------------------------------------------------------------- */
.ile { display: grid; gap: 10px; margin-bottom: 14px; }
.ile-tete { display: grid; gap: 2px; padding: 4px 2px 0; }
.ile-nom { font: italic 600 .95rem/1.3 var(--titre); color: var(--pin); }
.ile-tete h1 { font-size: 1.65rem; text-wrap: balance; }

.carte-ile { margin: 0; border-radius: var(--r-l); overflow: hidden; background: var(--mer); box-shadow: var(--ombre); }
.ile-svg { display: block; width: 100%; height: auto; }
.carte-ile figcaption {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; padding: 12px 14px 14px;
  background: var(--surface); font-weight: 600; color: var(--encre-2); font-size: .92rem;
}
.carte-ile figcaption b { font: 650 1.35rem/1 var(--titre); color: var(--encre); }
.carte-ile .reste { grid-column: 1 / -1; }
.jauge { display: block; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.jauge i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--pin), var(--ciel)); transition: width .8s var(--doux); }

/* La mer, le lagon, les biomes. */
.ile-svg .mer { fill: var(--mer); }
.ile-svg .vagues path { fill: none; stroke: var(--ecume); stroke-width: 1.6; stroke-linecap: round; opacity: .7; animation: houle 6s ease-in-out infinite alternate; }
.ile-svg .vagues path:nth-child(2n) { animation-delay: -3s; }
@keyframes houle { to { transform: translateX(7px); } }
.ile-svg .lagon { fill: var(--lagon); }
.ile-svg .ecume { fill: var(--ecume); opacity: .8; }
.ile-svg .zone { stroke: rgba(40, 30, 10, .08); stroke-width: 1; }
.z-plage { fill: #EAD7AA; } .z-cocoteraie { fill: #A9CB7B; } .z-fougeres { fill: #5E9F5B; } .z-cascades { fill: #3E8B70; }
.z-plateaux { fill: #BDB46C; } .z-lave { fill: #6E544A; } .z-cratere { fill: #4A3934; }
.ile-svg .cratere { fill: #2B201D; }
.ile-svg .lave-cratere { animation: lueur 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes lueur { 50% { opacity: .75; transform: scale(.9); } }
.ile-svg .fumee circle { fill: #fff; opacity: .55; animation: fumee 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ile-svg .fumee circle:nth-child(2) { animation-delay: -1.6s; } .ile-svg .fumee circle:nth-child(3) { animation-delay: -3.2s; }
@keyframes fumee { 0% { opacity: 0; transform: translateY(6px) scale(.7); } 40% { opacity: .55; } 100% { opacity: 0; transform: translateY(-10px) scale(1.25); } }
.ile-svg .palmier path { fill: none; stroke: #2F6B33; stroke-width: 1.8; stroke-linecap: round; }
.ile-svg .palmier path:first-child { stroke: #8A6A3C; stroke-width: 2; }
.ile-svg .fougere circle { fill: #3E7E43; }
.ile-svg .cascade path { stroke: #E9F7FA; stroke-width: 3; stroke-linecap: round; }
.ile-svg .cascade ellipse { fill: #9FD8E6; }
.ile-svg .herbe path { fill: none; stroke: #8F8640; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ile-svg .fissure { fill: none; stroke: #FF8A45; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.ile-svg .brume .voile { fill: var(--brume); opacity: .93; }
.ile-svg .nuage ellipse { fill: var(--brume); }
.ile-svg .nuage { animation: nuage 7s calc(var(--k) * -.7s) ease-in-out infinite alternate; }
@keyframes nuage { to { transform: translate(5px, -2px); } }

/* Le sentier, les repères, la chèvre. */
.ile-svg .sentier-a-venir { fill: none; stroke: #FFF8E8; stroke-width: 2.2; stroke-dasharray: .1 6; stroke-linecap: round; opacity: .9; }
.ile-svg .sentier-parcouru-fond { fill: none; stroke: rgba(40, 25, 5, .28); stroke-width: 6.5; stroke-linecap: round; stroke-linejoin: round; }
.ile-svg .sentier-parcouru { fill: none; stroke: #FFF7E2; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: trace 1.6s .15s var(--doux) forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.ile-svg .repere { fill: #FFF8E8; stroke: #3B2F23; stroke-width: 1.4; }
.ile-svg .repere.atteint { fill: var(--pin); stroke: #FFF8E8; }
.ile-svg .repere.prochain { fill: var(--aube); stroke: #FFF8E8; stroke-width: 2; }
.ile-svg .etiquette-carte rect { fill: rgba(30, 24, 18, .78); }
.ile-svg .etiquette-carte text { fill: #FFF8E8; font: 600 11px var(--texte); text-anchor: middle; }
.ile-svg .etape-carte circle { fill: rgba(255, 252, 244, .92); stroke: var(--pin); stroke-width: 1.5; }
.ile-svg .etape-carte text { fill: var(--pin-fonce); font: 700 8.5px var(--texte); text-anchor: middle; }
.ile-svg .etape-carte { animation: apparait .4s calc(1.2s + var(--k) * .12s) var(--ressort) backwards; transform-box: fill-box; transform-origin: center; }
@keyframes apparait { from { opacity: 0; transform: scale(.3); } }
.ile-svg .ici { animation: apparait .5s 1.3s var(--ressort) backwards; transform-box: fill-box; transform-origin: center bottom; }
.ile-svg .ombre-chevre { fill: rgba(30, 20, 5, .3); }
.ile-svg .cabri { width: 44px; height: 46px; }
.ile-svg .onde { fill: none; stroke: #FFF8E8; stroke-width: 2; animation: onde 2.4s 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; opacity: 0; }
@keyframes onde { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.2); } }
.ile-svg .rose circle { fill: rgba(255, 252, 244, .55); }
.ile-svg .rose path { fill: var(--aube); }
.ile-svg .rose text { fill: #24413F; font: italic 700 10px var(--titre); text-anchor: middle; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) .ile-svg .terre { filter: brightness(.82) saturate(.95); } }
:root[data-theme="sombre"] .ile-svg .terre { filter: brightness(.82) saturate(.95); }

/* Le tableau sous la carte. */
.tableau { display: grid; gap: 12px; }
.carte-jour { position: relative; padding: 18px 16px 16px; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--ombre); display: grid; gap: 6px; overflow: hidden; }
.carte-jour .surtitre { font-weight: 600; color: var(--encre-2); font-size: .92rem; }
.carte-jour h2 { font-size: 1.55rem; }
.carte-jour .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--encre-2); font-weight: 600; margin-bottom: 8px; }
.carte-jour.en-cours { background: var(--aube-clair); }
.cats { display: inline-flex; gap: 4px; }
.cats i { width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg); }

.hebdo { padding: 14px 16px; border-radius: var(--r-l); background: var(--surface); border: 1.5px solid var(--trait); display: grid; gap: 10px; }
.hebdo > p { font-weight: 600; color: var(--encre-2); }
.hebdo > p b { color: var(--encre); font: 650 1.2rem/1 var(--titre); }
.semaine { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; list-style: none; margin: 0; padding: 0; }
.jour { display: grid; justify-items: center; gap: 5px; font-weight: 700; font-size: .78rem; color: var(--encre-2); }
.jour i { width: 100%; max-width: 38px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); }
.jour.prevu i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pin); }
.jour.fait i { background: var(--pin); color: #fff; }
.jour.fait .ic { width: 17px; height: 17px; stroke-width: 3; }
.jour.auj span { color: var(--encre); }
.jour.auj span::after { content: ''; display: block; width: 4px; height: 4px; margin: 2px auto 0; border-radius: 50%; background: var(--aube); }

/* Le carnet de route : les séances suivantes du cycle. */
.carnet { margin-top: 22px; }
.carnet h2 { font-size: 1.15rem; margin-bottom: 6px; }
.carnet ol { list-style: none; margin: 0; padding: 0; }
.carnet li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--trait); }
.carnet .num { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--pin); color: var(--pin); font: 700 .8rem/1 var(--texte); }
.carnet .quoi { flex: 1; display: grid; min-width: 0; }
.carnet .quoi b { font-weight: 700; }
.carnet .quoi small { color: var(--encre-2); font-weight: 600; }
.carnet .btn.icone-seule { color: var(--pin); }

/* --- Séance ----------------------------------------------------------------- */
.haut-seance { display: flex; align-items: center; gap: 10px; padding-top: env(safe-area-inset-top); margin-bottom: 12px; }
.barre-prog { flex: 1; height: 16px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.barre-prog > div { position: relative; height: 100%; min-width: 16px; border-radius: 999px; background: var(--pin); transition: width .6s var(--ressort); }
.compte { font-weight: 700; color: var(--encre-2); min-width: 3ch; text-align: right; }
.intro-seance h1 { margin: 18px 0 12px; font-size: 2rem; }
.liste-exos { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 2px; }
.liste-exos li { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--trait); }
.liste-exos li span { flex: 1; font-weight: 700; }
.liste-exos li b { font-weight: 700; color: var(--encre-2); white-space: nowrap; }

.tete-exo { display: grid; gap: 6px; margin: 8px 0 14px; }
.glisse { animation: glisse .4s var(--doux) backwards; }
@keyframes glisse { from { opacity: 0; transform: translateX(28px); } }
.tete-exo .cat { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--cat); font-size: .9rem; }
.tete-exo h1 { font-size: 2rem; }
.tete-exo .cible { font-weight: 700; color: var(--encre-2); }
.tete-exo .cible b { color: var(--encre); }
.tete-exo .note { padding: 8px 12px; border-left: 4px solid var(--aube); background: var(--aube-clair); border-radius: 0 var(--r-s) var(--r-s) 0; font-weight: 700; font-size: .92rem; }
.tete-exo .derniere { font-size: .88rem; color: var(--encre-2); font-weight: 700; }
.pastilles-series { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.pastilles-series li { min-width: 40px; height: 34px; padding: 0 10px; border-radius: 999px; display: grid; place-items: center; font-weight: 700; font-size: .82rem; background: var(--surface-2); color: var(--encre-2); }
.pastilles-series li.courante { background: var(--surface); border: 2px solid var(--pin); color: var(--pin); }
.pastilles-series li.faite { background: var(--pin); color: #fff; animation: pop .35s var(--ressort); }
.pastilles-series li.sautee { text-decoration: line-through; opacity: .6; }
@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } }
.saisie { display: grid; gap: 14px; padding: 16px; border-radius: var(--r-l); background: var(--surface); border: 1.5px solid var(--trait); }
.stepper { display: flex; align-items: center; gap: 12px; }
.stepper label { flex: 1; display: flex; align-items: baseline; justify-content: center; gap: 6px; }
.saisie .stepper input[inputmode] { text-align: center; font: 650 2.4rem/1 var(--titre); border: 0; background: transparent; padding: 0; width: 4.2ch; min-height: 0; }
.saisie .stepper input[inputmode]:focus { border: 0; box-shadow: inset 0 -3px 0 var(--ciel); }
.stepper label span { color: var(--encre-2); font-weight: 700; }
.chrono-effort { display: grid; place-items: center; }
.cadran {
  width: 180px; height: 180px; border-radius: 50%; border: 6px solid var(--cat, var(--pin)); background: var(--surface); display: grid; place-content: center; gap: 2px;
  font: 650 2.6rem/1 var(--titre);
}
.cadran small { font: 700 .8rem/1.2 var(--texte); color: var(--encre-2); }
.cadran.tourne { background: var(--cat, var(--pin)); color: #fff; animation: battre 1s ease-in-out infinite; }
.cadran.tourne small { color: rgba(255,255,255,.85); }
@keyframes battre { 50% { transform: scale(1.03); } }
.consignes { margin: 14px 0 0; border-radius: var(--r-m); border: 1.5px solid var(--trait); background: var(--surface); }
.consignes summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-weight: 700; cursor: pointer; list-style: none; }
.consignes summary::-webkit-details-marker { display: none; }
.consignes ul { margin: 0; padding: 0 16px 0 34px; display: grid; gap: 6px; }
.consignes .erreur { padding: 10px 14px 14px; }
.erreur { color: var(--danger); font-weight: 700; font-size: .92rem; }
.variantes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.repos { text-align: center; }
.repos .parole { justify-content: center; text-align: left; }
.anneau { position: relative; width: 230px; height: 230px; margin: 18px auto; }
.anneau svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anneau circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.anneau .fond { stroke: var(--surface-2); }
.anneau .avance { stroke: var(--ciel); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p)); transition: stroke-dashoffset .25s linear; }
.anneau span { position: absolute; inset: 0; display: grid; place-items: center; font: 650 3.6rem/1 var(--titre); }
.reglage-repos { display: flex; justify-content: center; gap: 12px; }

.fin { text-align: center; display: grid; gap: 14px; justify-items: center; padding-top: 16px; }
.fin h1 { font-size: 2.1rem; }
.gain { display: grid; gap: 4px; }
.gain span { font: 650 2rem/1 var(--titre); color: var(--aube); }
.gain b { font-size: 3.6rem; }
.gain small { color: var(--encre-2); font-weight: 700; }
.resume { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin: 0; }
.resume div, .chiffres div { padding: 12px; border-radius: var(--r-m); border: 1.5px solid var(--trait); background: var(--surface); text-align: left; }
.resume dt, .chiffres dt { font-size: .8rem; font-weight: 700; color: var(--encre-2); }
.resume dd, .chiffres dd { margin: 0; font: 650 1.35rem/1.2 var(--titre); }
.records, .badges-gagnes { width: 100%; text-align: left; padding: 14px 16px; border-radius: var(--r-l); background: var(--aube-clair); border: 2px solid var(--aube); }
.records h2 { display: flex; align-items: center; gap: 8px; color: var(--aube-fonce); margin-bottom: 6px; }
.records ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.records small { color: var(--encre-2); font-weight: 700; }
.badges-gagnes p { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.badges-gagnes .ic { color: var(--aube); }

/* --- Pages ------------------------------------------------------------------ */
.tete-page { display: grid; gap: 8px; margin: 4px 0 14px; }
.retour { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--encre-2); text-decoration: none; justify-self: start; padding: 4px 0; }
.vide { color: var(--encre-2); padding: 18px 0; }

.objectif-hebdo { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--encre-2); }
.objectif-hebdo span { flex: 1; }
.objectif-hebdo b { color: var(--encre); }
.bandeau { width: 100%; justify-content: flex-start; margin-bottom: 12px; border: 1.5px dashed var(--trait) !important; }
.seance-carte { padding: 16px; border-radius: var(--r-l); background: var(--surface); border: 1.5px solid var(--trait); margin-bottom: 14px; display: grid; gap: 12px; }
.seance-carte > header { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.seance-carte > header .meta { grid-column: 1 / -1; color: var(--encre-2); font-weight: 700; font-size: .9rem; }
.seance-carte h2 { font-size: 1.35rem; }
.renommer { grid-column: 1 / -1; display: flex; gap: 8px; }
.jours { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.jour-choix { padding: 8px 0; border-radius: 10px; border: 1.5px solid var(--trait); background: var(--surface); font-weight: 700; font-size: .8rem; color: var(--encre-2); }
.jour-choix.pris { border-style: dashed; opacity: .6; }
.jour-choix.actif { background: var(--aube); border-color: var(--aube); color: #fff; opacity: 1; border-style: solid; }
.lignes { list-style: none; margin: 0; padding: 0; }
.ligne { border-bottom: 1px solid var(--trait); }
.ligne:last-child { border-bottom: 0; }
.ligne-tete { display: flex; align-items: center; gap: 10px; min-height: 52px; }
.ligne-tete .nom { flex: 1; font-weight: 700; text-decoration: none; }
.ligne-tete .cible { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; border: 0; background: var(--surface-2); font-weight: 700; font-size: .88rem; white-space: nowrap; }
.ligne-tete .cible .ic { width: 16px; height: 16px; color: var(--encre-2); }
.reglages-ligne { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 4px 0 14px; }
.reglages-ligne label { display: grid; gap: 4px; font-size: .8rem; color: var(--encre-2); }
.reglages-ligne label.large, .reglages-ligne .outils, .reglages-ligne small { grid-column: 1 / -1; }
.reglages-ligne small { color: var(--encre-2); font-size: .8rem; margin-top: -6px; }
.outils { display: flex; flex-wrap: wrap; gap: 8px; }
.actions-seance { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.confirmer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 700; }
.ajout { margin-top: 4px; border-style: dashed; }
.presets { padding: 16px; border-radius: var(--r-l); background: var(--surface); border: 2px solid var(--ciel); margin-bottom: 14px; display: grid; gap: 10px; }
.presets header { display: flex; justify-content: space-between; align-items: center; }
.presets ul { list-style: none; margin: 0; padding: 0; display: grid; }
.presets li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--trait); }
.presets li > div { display: grid; gap: 2px; }
.presets li span { color: var(--encre-2); font-size: .9rem; }
.presets li small { color: var(--encre-2); font-size: .8rem; font-weight: 700; }

.filtres { display: grid; gap: 10px; margin-bottom: 8px; }
.recherche { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: var(--r-m); border: 1.5px solid var(--trait); background: var(--surface); }
.recherche input { border: 0; padding-left: 0; background: transparent; }
.recherche .ic { color: var(--encre-2); }
.compte-res { color: var(--encre-2); font-weight: 700; font-size: .85rem; margin: 4px 0; }
.catalogue { list-style: none; margin: 0; padding: 0; }
.catalogue li { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--trait); }
.carte-exo { flex: 1; display: flex; align-items: center; gap: 12px; padding: 12px 0; text-decoration: none; min-width: 0; }
.carte-exo .nom { flex: 1; display: grid; font-weight: 700; min-width: 0; }
.carte-exo .nom small { font-weight: 600; color: var(--encre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.niv { display: inline-flex; gap: 3px; align-items: flex-end; }
.niv i { width: 5px; border-radius: 2px; background: var(--trait); }
.niv i:nth-child(1) { height: 8px; } .niv i:nth-child(2) { height: 12px; } .niv i:nth-child(3) { height: 16px; }
.niv-1 i:nth-child(1), .niv-2 i:nth-child(-n+2), .niv-3 i { background: var(--encre-2); }
.deja { display: inline-flex; align-items: center; gap: 4px; color: var(--pin); font-weight: 700; font-size: .88rem; }

.fiche { display: grid; gap: 12px; }
.fiche .cat { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--cat); }
.fiche h1 { font-size: 2.1rem; }
.fiche h2 { margin-top: 10px; }
.caracteristiques { margin: 0; display: grid; gap: 0; border-radius: var(--r-m); border: 1.5px solid var(--trait); background: var(--surface); }
.caracteristiques div { display: grid; grid-template-columns: 8.5em 1fr; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--trait); }
.caracteristiques div:last-child { border-bottom: 0; }
.caracteristiques dt { font-weight: 700; color: var(--encre-2); font-size: .9rem; }
.caracteristiques dd { margin: 0; font-weight: 700; }
.manque { color: var(--danger); font-style: normal; }
.etapes-consignes { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; }
.etapes-consignes li::marker { font-weight: 700; color: var(--cat); }
.variantes-fiche { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.variante { display: flex; gap: 8px; align-items: center; padding: 12px; border-radius: var(--r-m); border: 1.5px solid var(--trait); background: var(--surface); text-decoration: none; font-weight: 700; }
.variante span { display: grid; }
.variante small { color: var(--encre-2); font-weight: 700; font-size: .78rem; }
.ajout-fiche { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 14px; border-radius: var(--r-l); background: var(--pin-clair); margin-top: 8px; }

.chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 8px; }
.progres h2 { margin: 22px 0 10px; }
.paliers { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 4px dashed var(--trait); display: grid; gap: 2px; }
.paliers li { position: relative; display: flex; justify-content: space-between; padding: 6px 0; color: var(--encre-2); font-weight: 700; }
.paliers li::before { content: ''; position: absolute; left: -27px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--surface); border: 3px solid var(--trait); }
.paliers li.passe::before { background: var(--pin); border-color: var(--pin); }
.paliers li.ici { color: var(--encre); font-weight: 700; }
.paliers li.ici::before { background: var(--aube); border-color: var(--aube); box-shadow: 0 0 0 5px var(--aube-clair); }
.calendrier { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(7, auto); gap: 4px; }
.calendrier i { aspect-ratio: 1; border-radius: 4px; background: var(--surface-2); }
.calendrier i.fait { background: var(--aube); }
.calendrier i.futur { background: transparent; border: 1px dashed var(--trait); }
.legende-cal { display: flex; justify-content: space-between; color: var(--encre-2); font-size: .78rem; font-weight: 700; margin-top: 6px; }
.courbe { margin: 10px 0 0; padding: 12px; border-radius: var(--r-m); border: 1.5px solid var(--trait); background: var(--surface); }
.courbe svg { width: 100%; height: auto; display: block; }
.courbe .trace { fill: none; stroke: var(--pin); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.courbe .point { fill: var(--surface); stroke: var(--pin); stroke-width: 2.5; }
.courbe .repere { stroke: var(--trait); stroke-dasharray: 3 4; }
.courbe .graduation { fill: var(--encre-2); font: 700 10px var(--texte); }
.courbe figcaption { color: var(--encre-2); font-size: .8rem; font-weight: 700; margin-top: 4px; }
.liste-records, .journal { list-style: none; margin: 0; padding: 0; }
.liste-records li, .journal li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--trait); font-weight: 700; }
.journal li span:first-child { display: grid; }
.journal small { color: var(--encre-2); font-weight: 700; }
.gain-petit { color: var(--aube-fonce); font-weight: 700; }
.badges { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.badges li { display: grid; gap: 2px; padding: 12px; border-radius: var(--r-m); border: 1.5px dashed var(--trait); color: var(--encre-2); }
.badges li .ic { width: 26px; height: 26px; }
.badges li span { font-size: .82rem; }
.badges li small { font-size: .75rem; font-weight: 700; }
.badges li.obtenu { border-style: solid; border-color: var(--aube); background: var(--aube-clair); color: var(--encre); }
.badges li.obtenu .ic { color: var(--aube); }

.reglages .groupe { display: grid; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--trait); }
.ligne-champ { display: flex; gap: 8px; }
.segmente { display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: var(--r-m); background: var(--surface-2); }
.segmente button { padding: 10px 6px; border: 0; border-radius: 12px; background: transparent; font-weight: 700; font-size: .88rem; color: var(--encre-2); }
.segmente button.actif { background: var(--surface); color: var(--encre); box-shadow: var(--ombre); }
.boutons { display: flex; flex-wrap: wrap; gap: 10px; }
.boutons label.btn { cursor: pointer; font-size: 1rem; }

/* --- Compte --------------------------------------------------------------- */
.carte-compte { padding: 14px 16px; border-radius: var(--r-l); border: 2px dashed var(--ciel); background: var(--surface); display: grid; gap: 10px; }
.carte-compte p { color: var(--encre-2); }
.carte-compte b { color: var(--encre); }
.compte .connecte { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.compte .connecte .ic { color: var(--pin); }
.deja-compte { display: block; margin: 18px auto 0; }
.chargement { padding: 40vh 0 0; text-align: center; font-weight: 700; color: var(--encre-2); }

/* --- Toasts ----------------------------------------------------------------- */
#toasts { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50; display: grid; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.toast { padding: 12px 16px; border-radius: var(--r-m); background: var(--encre); color: var(--fond); font-weight: 700; text-align: center; animation: bulle .3s var(--ressort); }
.toast.sort { opacity: 0; transform: translateY(8px); transition: .25s; }

@media (min-width: 700px) {
  body { background:
    linear-gradient(var(--fond), var(--fond)) center/var(--largeur) 100% no-repeat,
    var(--surface-2); }
  .contenu { padding-left: 24px; padding-right: 24px; }
}

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