/* LE CONFIGURATEUR DE RYTHME (05/10/2026) — accueil et espace client.
   Paul : « un truc plus interactif, plus beau pour passer les commandes, en mode les packages »,
   puis « faut faire un truc méga beau, un peu comme un jeu ».
   Une jauge de niveaux qu'on tire, des avantages qui se débloquent, une chaîne qui se remplit.
   Registre KinoEngine : surfaces claires, dégradé vermillon → framboise, chiffres en serif italique,
   aucun fond noir, aucun rebond (courbes rapides qui s'arrêtent net). */
.kc { --kc-encre: var(--encre, #0b0b10); --kc-encre2: var(--encre2, #3a3a45); --kc-gris: var(--gris, #6b6b76);
  --kc-trait: var(--trait, #e6e6ec); --kc-trait2: var(--trait2, #d6d6df); --kc-doux: var(--doux, #fdefe9); --kc-doux-bord: var(--doux-bord, #f8cdbd);
  --kc-degrade: linear-gradient(135deg, #ff6a2b, #e5306b 60%, #a855f7);
  --kc-serif: var(--serif, "Instrument Serif", Georgia, serif); --kc-mono: var(--mono, ui-monospace, "SF Mono", Menlo, monospace);
  --kc-ease: cubic-bezier(.2, .8, .2, 1);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); gap: 22px; align-items: start; text-align: left; color: var(--kc-encre); }
.kc * { box-sizing: border-box; }
.kc-panneau { background: #fff; border: 1px solid var(--kc-trait); border-radius: 28px; padding: 28px; position: relative; overflow: hidden;
  box-shadow: 0 1px 2px rgba(11,11,16,.04), 0 24px 60px -32px rgba(11,11,16,.22); }
.kc-gauche::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,106,43,.10), rgba(229,48,107,.06) 55%, transparent 72%); pointer-events: none; }
.kc-gauche > * { position: relative; }

/* ── le niveau ─────────────────────────────────────────────────────────── */
.kc-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.kc-tete small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--kc-gris); }
.kc-niveau { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.kc-medaille { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--kc-degrade); color: #fff;
  font-weight: 800; font-size: 20px; box-shadow: 0 12px 26px -12px rgba(229,48,107,.8), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .35s var(--kc-ease); }
.kc-medaille.kc-monte { animation: kc-monte .55s var(--kc-ease); }
@keyframes kc-monte { 0% { transform: scale(.82) rotate(-8deg); filter: brightness(1.25); } 100% { transform: none; filter: none; } }
.kc-niveau b { display: block; font-size: 24px; letter-spacing: -.025em; line-height: 1.05; }
.kc-niveau > div > span { font-size: 13px; color: var(--kc-gris); }
.kc-volume { text-align: right; }
.kc-volume b { font-family: var(--kc-serif); font-style: italic; font-weight: 400; font-size: 64px; line-height: .85; letter-spacing: -.02em;
  background: var(--kc-degrade); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.kc-volume span { display: block; font-size: 13px; color: var(--kc-gris); margin-top: 4px; }

/* la jauge : une piste, trois paliers, un curseur qu'on tire */
.kc-jauge { position: relative; margin: 26px 18px 6px; height: 92px; }
.kc-piste { position: absolute; left: 0; right: 0; top: 18px; height: 12px; border-radius: 999px; background: #f1f1f6; box-shadow: inset 0 1px 2px rgba(11,11,16,.08); }
.kc-rempli { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--kc-degrade); box-shadow: 0 6px 16px -6px rgba(229,48,107,.7); transition: width .18s linear; }
.kc-noeud { position: absolute; top: 10px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; z-index: 2; }
.kc-noeud i { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2.5px solid var(--kc-trait2); display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; color: var(--kc-gris);
  transition: all .3s var(--kc-ease); }
.kc-noeud.kc-atteint i { border-color: transparent; background: var(--kc-degrade); color: #fff; box-shadow: 0 0 0 5px rgba(229,48,107,.14); }
.kc-noeud.kc-ici i { box-shadow: 0 0 0 7px rgba(229,48,107,.2), 0 10px 22px -8px rgba(229,48,107,.8); transform: scale(1.12); }
.kc-noeud em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--kc-encre2); white-space: nowrap; }
.kc-noeud em small { display: block; font-weight: 500; color: var(--kc-gris); text-align: center; }
.kc-range { position: absolute; left: -6px; right: -6px; top: 6px; width: calc(100% + 12px); margin: 0; height: 36px; background: transparent; -webkit-appearance: none; appearance: none; z-index: 3; cursor: grab; }
.kc-range:active { cursor: grabbing; }
.kc-range::-webkit-slider-runnable-track { height: 36px; background: transparent; }
.kc-range::-moz-range-track { height: 36px; background: transparent; }
.kc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; margin-top: 1px; border-radius: 50%; border: 0;
  background: radial-gradient(circle, #fff 0 5px, transparent 6px), linear-gradient(135deg, #ff6a2b, #e5306b);
  box-shadow: 0 0 0 4px #fff, 0 12px 26px -8px rgba(229,48,107,.9); transition: transform .15s var(--kc-ease); }
.kc-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.kc-range::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; border: 4px solid #fff; background: radial-gradient(circle, #fff 0 5px, transparent 6px), linear-gradient(135deg, #ff6a2b, #e5306b); box-shadow: 0 12px 26px -8px rgba(229,48,107,.9); }
.kc-range:focus-visible { outline: none; }
.kc-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px #fff, 0 0 0 7px #a855f7, 0 12px 26px -8px rgba(229,48,107,.9); }
.kc-aide { font-size: 12.5px; color: var(--kc-gris); margin: 0 2px; }

/* les chaînes */
.kc-chaines { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding: 12px 14px; border-radius: 16px; background: #f8f8fb; border: 1px solid var(--kc-trait); }
.kc-chaines > span { font-size: 13px; font-weight: 650; color: var(--kc-encre2); margin-right: auto; }
.kc-pastilles { display: flex; }
.kc-pastilles i { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid #fff; background: var(--c); margin-left: -8px; box-shadow: 0 4px 10px -4px rgba(11,11,16,.35); animation: kc-entre .3s var(--kc-ease); }
.kc-pastilles i:first-child { margin-left: 0; }
.kc-pastilles b { margin-left: 6px; font-size: 12px; align-self: center; color: var(--kc-gris); }
.kc-bouton { border: 1px solid var(--kc-trait2); background: #fff; border-radius: 11px; padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 650; color: var(--kc-encre); cursor: pointer; transition: all .2s var(--kc-ease); }
.kc-bouton:hover { border-color: #e5306b; color: #e5306b; }
.kc-bouton:disabled { opacity: .4; cursor: default; }
@keyframes kc-entre { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* la chaîne qui se remplit */
.kc-ecran { margin-top: 20px; border-radius: 20px; border: 1px solid var(--kc-trait); background: #fcfcfe; padding: 16px; }
.kc-ecran-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.kc-ecran-tete .kc-av { width: 34px; height: 34px; border-radius: 50%; background: var(--kc-degrade); flex: none; }
.kc-ecran-tete b { display: block; font-size: 14px; } .kc-ecran-tete span { font-size: 12px; color: var(--kc-gris); }
.kc-ecran-tete .kc-onglets { margin-left: auto; display: flex; gap: 14px; font-size: 12px; font-weight: 650; color: var(--kc-gris); }
.kc-ecran-tete .kc-onglets u { text-decoration: none; color: var(--kc-encre); box-shadow: inset 0 -2px 0 #e5306b; padding-bottom: 3px; }
.kc-mur { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.kc-case { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; background: #f1f1f6; overflow: hidden; }
.kc-case.kc-vide { background: transparent; border: 1.5px dashed #d9d9e2; }
.kc-case.kc-prochain { border-color: #f0a990; background: repeating-linear-gradient(135deg, rgba(255,106,43,.05) 0 6px, rgba(229,48,107,.11) 6px 12px); }
.kc-case img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kc-case.kc-pleine { animation: kc-tombe .34s var(--kc-ease) both; animation-delay: var(--d, 0ms); box-shadow: 0 4px 10px -6px rgba(11,11,16,.5); }
.kc-case .kc-tag { position: absolute; left: 3px; bottom: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px #fff; }
@keyframes kc-tombe { from { transform: translateY(-10px) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.kc-plus-v { grid-column: 1 / -1; text-align: center; font-size: 12.5px; font-weight: 650; color: var(--kc-encre2); padding-top: 4px; }
.kc-ecran-pied { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--kc-gris); }
.kc-ecran-pied b { color: var(--kc-encre); font-variant-numeric: tabular-nums; }

/* ── le récapitulatif ──────────────────────────────────────────────────── */
.kc-recap { position: sticky; top: 88px; }
.kc-recap::before { content: ""; position: absolute; inset: 0 0 auto; height: 200px; background: radial-gradient(80% 100% at 85% 0%, rgba(255,106,43,.16), transparent 70%), radial-gradient(60% 90% at 5% 0%, rgba(168,85,247,.10), transparent 70%); pointer-events: none; }
.kc-recap > * { position: relative; }
.kc-r-nom { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: #e5306b; }
.kc-r-prix { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.kc-r-prix b { font-size: 64px; line-height: 1; letter-spacing: -.05em; font-weight: 800; font-variant-numeric: tabular-nums; }
.kc-r-prix span { font-size: 14px; color: var(--kc-gris); }
.kc-r-detail { margin-top: 8px; font-size: 14px; color: var(--kc-encre2); line-height: 1.5; }
.kc-eco { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 5px 10px; border-radius: 999px; background: #e8f7ec; color: #1f9d55; font-size: 12.5px; font-weight: 700; }
.kc-eco[hidden] { display: none; }
.kc-an { margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: var(--kc-doux); border: 1px solid var(--kc-doux-bord); display: flex; align-items: center; gap: 12px; }
.kc-an b { font-family: var(--kc-serif); font-style: italic; font-weight: 400; font-size: 40px; line-height: .9; background: var(--kc-degrade); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.kc-an span { font-size: 13px; line-height: 1.35; color: var(--kc-encre2); }
.kc-debloque { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 8px; }
.kc-debloque li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 13.5px; line-height: 1.35; color: var(--kc-gris); transition: color .3s var(--kc-ease); }
.kc-debloque li .kc-cad { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #f1f1f6; transition: all .3s var(--kc-ease); }
.kc-debloque li svg { width: 14px; height: 14px; fill: none; stroke: #a0a0ad; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.kc-debloque li.kc-ok { color: var(--kc-encre); }
.kc-debloque li.kc-ok .kc-cad { background: var(--kc-degrade); box-shadow: 0 6px 14px -8px rgba(229,48,107,.9); }
.kc-debloque li.kc-ok svg { stroke: #fff; }
.kc-debloque li.kc-neuf .kc-cad { animation: kc-ouvre .5s var(--kc-ease); }
.kc-debloque li small { display: block; font-size: 11.5px; color: var(--kc-gris); }
@keyframes kc-ouvre { 0% { transform: scale(.7) rotate(-12deg); } 100% { transform: none; } }
.kc-pro { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: #f8f8fb; border: 1px solid var(--kc-trait); font-size: 13px; line-height: 1.45; color: var(--kc-encre2); cursor: pointer; margin-bottom: 12px; }
.kc-pro input { width: 18px; height: 18px; margin-top: 1px; accent-color: #e5306b; flex: none; }
.kc-pro a { color: var(--accent, #df4317); }
.kc-pro.kc-manque { border-color: #f1b3a8; background: #fff5f3; }
.kc-cta { display: flex; width: 100%; align-items: center; justify-content: center; gap: 10px; padding: 17px 20px; border: 0; border-radius: 16px; background: var(--kc-degrade); background-size: 160% 100%; color: #fff;
  font: inherit; font-size: 16px; font-weight: 750; text-decoration: none; cursor: pointer; box-shadow: 0 18px 36px -16px rgba(229,48,107,.8);
  transition: transform .2s var(--kc-ease), box-shadow .2s var(--kc-ease), background-position .5s var(--kc-ease), opacity .2s; }
.kc-cta:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 22px 44px -16px rgba(229,48,107,.9); }
.kc-cta:disabled { opacity: .5; cursor: default; transform: none; }
.kc-cta svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.4; fill: none; }
.kc-virement { display: block; width: 100%; margin: 8px 0 0; padding: 12px 16px; border: 1px solid var(--kc-trait2); border-radius: 14px;
  background: transparent; color: inherit; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: border-color .2s, background .2s; }
.kc-virement:hover { border-color: #e5306b; background: rgba(229,48,107,.05); }
.kc-virement:disabled { opacity: .5; cursor: default; }
.kc-sous { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--kc-gris); text-align: center; }
.kc-erreur { margin: 10px 0 0; font-size: 13px; color: #b42318; }
.kc-limite { margin: 8px 2px 0; font-size: 12.5px; color: #b42318; }

@media (max-width: 1100px) { .kc { grid-template-columns: 1fr; } .kc-recap { position: relative; top: 0; } }
@media (max-width: 640px) {
  .kc-panneau { padding: 20px 16px; border-radius: 22px; }
  .kc-volume b { font-size: 50px; } .kc-niveau b { font-size: 20px; } .kc-medaille { width: 40px; height: 40px; font-size: 17px; }
  .kc-noeud em { font-size: 11px; } .kc-noeud em small { display: none; }
  .kc-mur { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
  .kc-ecran-tete .kc-onglets { display: none; }
  .kc-chaines > span:first-child { flex-basis: 100%; } .kc-chaines .kc-pastilles { margin-right: auto; }
  .kc-r-prix b { font-size: 52px; }
}
@media (prefers-reduced-motion: reduce) { .kc *, .kc *::before { animation: none !important; transition: none !important; } }

/* audit mobile du 05/10 : sous 480 px, les noms des niveaux se touchaient ; seul le niveau choisi garde le sien */
@media (max-width: 480px) { .kc-noeud:not(.kc-ici) em { visibility: hidden; } }
/* 06/10 : le nombre de chaînes et la répartition, sous l'intitulé */
.kc-chaines > span:first-child small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--kc-gris); }
/* 06/10 : le premier niveau est collé au bord gauche — son étiquette s'aligne à gauche au lieu de déborder */
.kc-noeud:first-child { transform: translateX(-14px); align-items: flex-start; }
.kc-noeud:first-child em small { text-align: left; }