/* Calembitude — composants de base partagés avec Isa-kafo : toast, feuille du bas, bascule, bannière. */

/* — toast : une ligne en bas, jamais empilés — */
.toast {
  position: fixed; left: 50%; z-index: 50;
  bottom: calc(var(--barre-nav) + var(--e-4) + var(--sur-securite-bas));
  transform: translate(-50%, 16px); opacity: 0;
  display: flex; align-items: center; gap: var(--e-4);
  max-width: min(92vw, 480px); padding: var(--e-3) var(--e-4);
  background: var(--encre); color: var(--fond); border-radius: var(--r-2);
  font-weight: 500; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: transform var(--d-feuille) var(--courbe), opacity var(--d-feuille);
}
.toast.visible { transform: translate(-50%, 0); opacity: 1; }
.toast-action { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; min-height: 32px; white-space: nowrap; }
@media (min-width: 1024px) { .toast { bottom: var(--e-6); left: calc(50% + 44px); } }

/* — bannière de mise à jour — */
.banniere-maj {
  position: fixed; left: var(--e-4); right: var(--e-4); z-index: 40;
  top: calc(var(--e-3) + var(--sur-securite-haut));
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4); border-radius: var(--r-2);
  background: var(--soleil-doux); color: var(--encre); border: 1px solid var(--soleil);
  transform: translateY(-8px); opacity: 0;
  transition: transform var(--d-feuille) var(--courbe), opacity var(--d-feuille);
}
.banniere-maj.visible { transform: none; opacity: 1; }
.banniere-maj span { flex: 1; }
.banniere-maj .ic-20 { color: var(--soleil-arc); }
@media (min-width: 1024px) { .banniere-maj { left: auto; right: var(--e-6); width: 420px; } }

/* — feuille du bas — */
.feuille-voile {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: flex-end; justify-content: center;
  background: var(--voile); opacity: 0;
  transition: opacity var(--d-feuille);
}
.feuille-voile.visible { opacity: 1; }
.feuille {
  width: 100%; max-height: 92dvh;
  display: flex; flex-direction: column;
  background: var(--papier); color: var(--encre);
  border-radius: var(--r-3) var(--r-3) 0 0; box-shadow: var(--eleve);
  padding: 0 var(--e-4) calc(var(--e-4) + var(--sur-securite-bas));
  transform: translateY(100%);
  transition: transform var(--d-feuille) var(--courbe);
  touch-action: none; outline: none;
}
.feuille-voile.visible .feuille { transform: translateY(0); }
.feuille-poignee { display: flex; justify-content: center; padding: var(--e-3) 0 var(--e-2); }
.feuille-poignee span { width: 40px; height: 4px; border-radius: 2px; background: var(--trait-fort); opacity: 0.6; }
.feuille-titre { font-size: var(--t-20); font-weight: 700; margin-bottom: var(--e-3); letter-spacing: -0.01em; }
.feuille-corps { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.feuille-texte { color: var(--encre-2); line-height: 1.5; margin-bottom: var(--e-4); }
.feuille-actions { display: flex; gap: var(--e-2); padding-top: var(--e-2); }
.feuille-actions .btn { flex: 1; }
body.feuille-ouverte { overflow: hidden; }
@media (min-width: 1024px) {
  .feuille-voile { align-items: center; padding-left: 88px; }
  .feuille { width: 560px; border-radius: var(--r-3); padding-bottom: var(--e-5); transform: translateY(24px); max-height: 86vh; }
  .feuille-poignee { display: none; }
  .feuille-titre { padding-top: var(--e-5); }
}

/* — bascule (interrupteur) — */
.bascule {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  width: 100%; min-height: 52px; text-align: left; padding: var(--e-1) 0;
}
.bascule-texte { flex: 1; font-weight: 500; }
.bascule-sous { display: block; font-size: var(--t-13); color: var(--encre-3); font-weight: 400; }
.bascule-bouton { position: relative; flex: none; width: 48px; height: 28px; border-radius: 14px; background: var(--trait-fort); transition: background var(--d-micro); }
.bascule-bouton::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--papier); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform var(--d-micro) var(--courbe);
}
.bascule[aria-checked='true'] .bascule-bouton { background: var(--riziere); }
.bascule[aria-checked='true'] .bascule-bouton::after { transform: translateX(20px); }

/* — ligne de tâche : coche, rature, fonds révélés au glissement — */
.liste-taches { list-style: none; }
.tache { position: relative; overflow: hidden; touch-action: pan-y; border-radius: var(--r-1); }
.liste-taches > .tache + .tache .tache-corps, .liste-taches > .tache + .trois-vide, .liste-taches > .trois-vide + .trois-vide { border-top: 1px solid var(--trait); }
.tache-fond { position: absolute; inset: 0; display: flex; align-items: center; gap: var(--e-2); padding: 0 var(--e-4); font-weight: 600; opacity: 0; }
.tache-fond-droite { background: var(--riziere); color: var(--sur-riziere); justify-content: flex-start; }
.tache-fond-gauche { background: var(--jacaranda); color: var(--sur-jacaranda); justify-content: flex-end; }
.tache.glisse-droite .tache-fond-droite, .tache.glisse-gauche .tache-fond-gauche { opacity: 1; }
.tache-fond .ic, .tache-fond span { transition: transform var(--d-micro) var(--courbe); }
.tache.glisse-pret .tache-fond .ic, .tache.glisse-pret .tache-fond span { transform: scale(1.08); }
.tache-corps { position: relative; display: flex; align-items: center; gap: var(--e-2); min-height: 56px; padding: var(--e-2) 0; background: var(--fond); will-change: transform; }
.tache.glisse .tache-corps { border-top-color: transparent; }
.tache-texte { flex: 1; min-width: 0; padding: var(--e-1) 0; cursor: pointer; }
.tache-titre { position: relative; display: block; width: fit-content; max-width: 100%; font-size: var(--t-17); font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.tache-trois .tache-titre { font-size: var(--t-24); font-weight: 700; }
.tache-titre::after { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--riziere); transform: scaleX(0); transform-origin: left center; }
.tache.faite .tache-titre::after { transform: scaleX(1); }
.tache.coche-anim .tache-titre::after { transition: transform var(--d-rature) var(--courbe) 80ms; }
.tache.faite .tache-titre { color: var(--encre-2); }
.tache-sous { display: block; font-size: var(--t-13); color: var(--encre-3); margin-top: 2px; }
.tache.coche-anim .tache-corps { animation: rebond var(--d-rebond) var(--courbe); }
@keyframes rebond { 0% { transform: scale(1); } 40% { transform: scale(1.025); } 100% { transform: scale(1); } }
.tache-chrono { color: var(--soleil-texte); }
.tache-chrono:hover { background: var(--soleil-doux); }

.coche { width: 44px; height: 44px; flex: none; padding: 8px; margin-left: -6px; border-radius: 50%; color: var(--trait-fort); }
.coche svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.coche circle { fill: var(--papier); transition: fill var(--d-micro); }
.coche .coche-trait { stroke: var(--sur-riziere); stroke-dasharray: 1; stroke-dashoffset: 1; }
.tache.faite .coche { color: var(--riziere); }
.tache.faite .coche circle { fill: var(--riziere); }
.tache.faite .coche .coche-trait { stroke-dashoffset: 0; }
.tache.coche-anim .coche .coche-trait { transition: stroke-dashoffset var(--d-rature) var(--courbe) 40ms; }
.coche-grande { width: 48px; height: 48px; padding: 8px; }
@media (hover: hover) { .coche:hover { color: var(--riziere); } }

/* — curseur au doigt — */
.curseur { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--e-3); --curseur-couleur: var(--riziere); --curseur-doux: var(--riziere-doux); }
.curseur-soleil { --curseur-couleur: var(--soleil-arc); --curseur-doux: var(--soleil-doux); }
.curseur-jacaranda { --curseur-couleur: var(--jacaranda); --curseur-doux: var(--jacaranda-doux); }
.curseur-laterite { --curseur-couleur: var(--laterite); --curseur-doux: var(--laterite-doux); }
.curseur-crepuscule { --curseur-couleur: var(--crepuscule); --curseur-doux: var(--soleil-doux); }
.curseur-aube { --curseur-couleur: var(--aube); --curseur-doux: var(--soleil-doux); }
.curseur-piste { position: relative; height: 44px; touch-action: none; cursor: pointer; border-radius: var(--r-1); }
.curseur-piste::before { content: ''; position: absolute; left: 0; right: 0; top: 17px; height: 10px; border-radius: 5px; background: var(--papier-2); }
.curseur-rempli { position: absolute; left: 0; right: 0; top: 17px; height: 10px; border-radius: 5px; background: var(--curseur-couleur); transform-origin: left center; transform: scaleX(0); transition: transform var(--d-micro) linear; }
.curseur-actif .curseur-rempli { transition: none; }
.curseur-depasse .curseur-rempli { filter: saturate(1.25); }
.curseur-cible { position: absolute; top: 12px; width: 2px; height: 20px; margin-left: -1px; border-radius: 1px; background: var(--encre-3); opacity: 0.7; }
.curseur-atteint .curseur-cible { background: var(--curseur-couleur); opacity: 1; }
.curseur-poignee { position: absolute; top: 10px; left: 0; width: 100%; height: 24px; pointer-events: none; }
.curseur-poignee::after { content: ''; position: absolute; left: -12px; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--papier); border: 3px solid var(--curseur-couleur); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); transition: transform var(--d-micro) var(--courbe); }
.curseur-actif .curseur-poignee::after { transform: scale(1.15); }
.curseur-piste:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.curseur-valeur { min-width: 72px; text-align: right; font-size: var(--t-15); color: var(--encre-2); white-space: nowrap; }
.curseur-atteint .curseur-valeur { color: var(--curseur-couleur); font-weight: 700; }

/* — heatmap — */
.heatmap-hote { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: var(--e-1); }
.heatmap { display: block; --hm: var(--riziere); --hm-doux: var(--riziere-doux); }
.hm-soleil { --hm: var(--soleil-arc); --hm-doux: var(--soleil-doux); }
.hm-jacaranda { --hm: var(--jacaranda); --hm-doux: var(--jacaranda-doux); }
.hm-laterite { --hm: var(--laterite); --hm-doux: var(--laterite-doux); }
.hm-crepuscule { --hm: var(--crepuscule); --hm-doux: var(--soleil-doux); }
.hm-aube { --hm: var(--aube); --hm-doux: var(--soleil-doux); }
.hm-case { fill: var(--papier-2); }
.hm-hors { fill: transparent; }
.hm-futur { fill: var(--papier-2); opacity: 0.45; }
.hm-off { fill: var(--trait); }
.hm-rate { fill: var(--papier-2); stroke: var(--trait-fort); stroke-width: 1; }
.hm-aujourdhui { fill: var(--papier); stroke: var(--hm); stroke-width: 1.5; }
.hm-ok { fill: var(--hm); }
.hm-n1 { opacity: 0.35; }
.hm-n2 { opacity: 0.55; }
.hm-n3 { opacity: 0.8; }
.hm-n4 { opacity: 1; }
.hm-mois, .hm-jour { font-size: 9px; fill: var(--encre-3); font-weight: 600; }

/* — stepper (mauvaises habitudes : compteur d'écarts) — */
.stepper { display: inline-flex; align-items: center; gap: 0; background: var(--papier-2); border-radius: 999px; padding: 0; }
.stepper button { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--encre-2); }
.stepper button:disabled { opacity: 0.35; }
.stepper-valeur { min-width: 64px; text-align: center; font-weight: 600; }
.stepper-depasse .stepper-valeur { color: var(--laterite); }

/* — barres de réduction (8 semaines) — */
.barres { display: flex; align-items: flex-end; gap: 6px; height: 72px; }
.barres > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.barres i { display: block; width: 100%; max-width: 28px; border-radius: 4px 4px 2px 2px; background: var(--laterite); transform-origin: bottom; }
.barres span { font-size: 10px; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.barres b { font-size: var(--t-13); color: var(--encre-2); font-weight: 600; font-variant-numeric: tabular-nums; }

/* — pastilles de couleur des habitudes — */
.point-couleur { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--riziere); }
.point-soleil { background: var(--soleil-arc); } .point-jacaranda { background: var(--jacaranda); } .point-riziere { background: var(--riziere); }
.point-laterite { background: var(--laterite); } .point-crepuscule { background: var(--crepuscule); } .point-aube { background: var(--aube); }
.nuancier { display: flex; gap: var(--e-2); }
.nuancier button { width: 36px; height: 36px; border-radius: 50%; border: 3px solid transparent; display: grid; place-items: center; }
.nuancier button[aria-pressed='true'] { border-color: var(--encre); }
.nuancier button .point-couleur { width: 22px; height: 22px; }

/* — pastille de chrono en cours (entête) — */
.chrono-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; background: var(--soleil-doux); color: var(--soleil-texte); font-weight: 600; text-decoration: none; margin-right: var(--e-1); }
.chrono-chip-pause { background: var(--papier-2); color: var(--encre-2); }