/* ============================================================
   Maido — v5 Dark Design System
   ============================================================ */

/* ── Alpine x-cloak ───────────────────────────────────────
   Masque les éléments portant x-cloak jusqu'à l'initialisation
   d'Alpine (qui retire l'attribut au montage). Sans cette règle,
   les éléments décorés s'affichent en vrac une fraction de
   seconde au chargement (FOUC). */
[x-cloak] { display: none !important; }

/* ── Fonts auto-hébergées (woff2) ─────────────────────────
   Anciennement chargées via Google Fonts CDN. Hébergées en local
   pour éliminer la dépendance réseau et permettre le cache long.
   DM Sans est une variable font (couvre les weights 300-600). */
@font-face {
  font-family: 'DM Sans';
  src: url("../fonts/dm-sans-latin-a5iVIQs.woff2") format('woff2-variations');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url("../fonts/dm-sans-latin-italic-4orTbYg.woff2") format('woff2-variations');
  font-weight: 300 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url("../fonts/dm-mono-400-latin-900TwFv.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url("../fonts/dm-mono-500-latin-BZy0P2C.woff2") format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ── Design tokens ─────────────────────────────────────── */
:root {
  --bg:  #080808;
  --s1:  #101010;
  --s2:  #161616;
  --s3:  #202020;
  --s4:  #2a2a2a;
  --b:   rgba(255,255,255,.07);
  --b2:  rgba(255,255,255,.12);
  --tx:  #edede9;
  --mu:  #9ca3af;
  --gr:  #a8ff78;   /* accent vert — CTA */
  --bl:  #60a5fa;   /* bleu — protéines */
  --am:  #fbbf24;   /* ambre — sport */
  --pu:  #c084fc;   /* violet — humeur */
  --rd:  #f87171;   /* rouge — dépassement */
  --gr2: #34d399;   /* vert clair — succès */
  --radius: 14px;
  --card-p: 1.25rem 1.5rem;
}



/* ── Reset / base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* Sécurité : la modal de confirmation (data-modal-target="container") doit
   rester cachée même si le build Tailwind est incomplet ou non chargé. Elle
   porte à la fois .hidden et .flex : sans !important, l'ordre Tailwind peut
   laisser .flex l'emporter → modal visible au chargement.
   Ciblé à ce container (via son data-attribute Stimulus) plutôt que global :
   une règle .hidden globale en !important empêcherait les helpers responsive
   Tailwind (hidden md:flex, hidden sm:block…) de fonctionner, car le
   !important bat les media queries (qui n'en ont pas) — navbar desktop
   invisible, pseudo non affiché en large viewport, etc. */
[data-modal-target="container"].hidden { display: none !important; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--tx);
  line-height: 1.6;
  min-height: 100vh;
  /* PWA standalone (viewport-fit=cover) : marges dynamiques iOS — nulles en
     navigateur (env() = 0), actives sous l'encoche / barre home en installé. */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── Confort tactile / PWA (sept 2026) ────────────────────
   overscroll-behavior-y: none sur html+body : supprime le rebond élastique
   natif (iOS) et le pull-to-refresh (Android) au niveau du document — les
   steppers et sliders du cockpit ne déclenchent plus de "rebond" de page.
   Les panneaux scrollables internes gardent leur propre comportement via
   overscroll-behavior: contain (pas de scroll chaining vers la page).
   touch-action: manipulation sur les contrôles interactifs : élimine le
   zoom accidentel au double-tap rapide (steppers, chips) et le délai de
   clic historique de 300 ms, SANS interdire le pinch-zoom d'accessibilité
   (contrairement à touch-action: pan-x pan-y posé globalement). */
html, body { overscroll-behavior-y: none; }

button, [role="button"], label, summary,
input[type="range"], input[type="checkbox"], input[type="radio"],
.tog-btn, .ql-tag, .sport-activity-chip {
  touch-action: manipulation;
}

.ql-sheet, .gm-body { overscroll-behavior: contain; }

a { color: var(--gr); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Navbar ─────────────────────────────────────────────── */
/* PWA : la navbar passe sous la barre de statut iOS (viewport-fit=cover) —
   son fond zinc-950 doit couvrir la zone système. Nul en navigateur. */
.maido-navbar { padding-top: env(safe-area-inset-top); }

.maido-nav {
  background: var(--s1);
  border-bottom: 1px solid var(--b);
  padding: .75rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.maido-nav .container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.maido-nav .brand {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--tx);
  display: flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
}

.maido-nav .brand i { color: var(--am); }

.maido-nav a {
  text-decoration: none;
}

.maido-nav .nav-links a,
.maido-nav .nav-right a {
  color: var(--mu);
  transition: background-color .2s ease, color .2s ease;
}

.maido-nav .nav-links a:hover,
.maido-nav .nav-right a:hover {
  color: var(--tx);
  background: rgba(255, 255, 255, .08);
}

.maido-nav .nav-links a.is-active,
.maido-nav .nav-right a.is-active {
  color: var(--gr);
  background: rgba(255, 255, 255, .12);
}

/* Pastille d'avatar dans la navbar (taille fixée par les classes Tailwind). */
.maido-nav .nav-avatar {
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Page layout ────────────────────────────────────────── */
.maido-main { padding: 1.5rem 0 4rem; }

/* ── Cards ──────────────────────────────────────────────── */
.card {
  background: var(--s2);
  border: 1px solid var(--b);
  border-radius: var(--radius);
  padding: var(--card-p);
}

.card-title {
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mu);
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* ── KPI / stat cards ───────────────────────────────────── */
.stat-card {
  background: var(--s2);
  border: 1px solid var(--b);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}

.stat-label {
  font-size: .7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--mu);
  margin-bottom: .3rem;
}

.stat-value {
  font-family: 'DM Mono', monospace;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--tx);
  line-height: 1;
}

.stat-value span { font-size: .9rem; color: var(--mu); margin-left: .2rem; }
.stat-sub { font-size: .75rem; color: var(--mu); margin-top: .25rem; }
.stat-trend-good { color: var(--gr2); }
.stat-trend-bad  { color: var(--rd);  }
.stat-trend-flat { color: var(--mu);  }

/* ── Progress ring ──────────────────────────────────────── */
.pf-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

@media (min-width: 576px) {
  .pf-wrap { flex-direction: row; justify-content: center; gap: 2.5rem; }
}

.ring-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.ring-svg { overflow: visible; }

.ring-track {
  fill: none;
  stroke: var(--s4);
  stroke-linecap: round;
}

.ring-fill {
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset .9s cubic-bezier(.4,0,.2,1);
}

.ring-fill.ring-cal { stroke: var(--gr); }
.ring-fill.ring-sport { stroke: var(--am); }
.ring-fill.ring-over { stroke: var(--rd); }

.ring-center {
  text-anchor: middle;
  dominant-baseline: middle;
  font-family: 'DM Mono', monospace;
}

.ring-val { font-size: 18px; font-weight: 500; fill: var(--tx); }
.ring-unit { font-size: 10px; fill: var(--mu); }

.ring-label {
  font-size: .78rem;
  color: var(--mu);
  text-align: center;
}

.ring-label strong { display: block; color: var(--tx); font-size: .85rem; }

/* ── 7-day bar chart ────────────────────────────────────── */
.week-bars {
  position: relative;   /* needed for .goal-line absolute positioning */
  display: flex;
  align-items: flex-end;
  gap: .35rem;
  height: 100px;
}

/* Sparkline compacte pour les widgets secondaires (Eau / Tabac / Alcool). */
.week-bars--mini {
  height: 52px;
  gap: .2rem;
  margin-top: .5rem;
}

/* Dans les sparklines, pas de label sous les barres — on supprime le gap dédié. */
.week-bars--mini .bar-col {
  gap: 0;
}

.bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  height: 100%;
}

.bar-wrap {
  position: relative;
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  background: var(--s4);
  border-radius: 4px;
  /* overflow: hidden retiré — bar-fill a son propre border-radius,
     et le retirer permet aux étiquettes de valeur de ne pas être coupées. */
}

/* Ghost line: dashed horizontal marker at the previous period's value height.
   Always visible regardless of direction (current > or < previous). */
.bar-ghost-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(156, 163, 175, 0.55);
  border-radius: 1px;
  z-index: 2;
  pointer-events: none;
  transition: bottom .6s cubic-bezier(.4,0,.2,1);
}

/* Goal line : ligne pointillée horizontale à la hauteur de l'objectif calorique.
   Positionnée dans .week-bars (position: relative). */
.goal-line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0;
  border-top: 1px dashed rgba(156, 163, 175, 0.35);
  z-index: 5;
  pointer-events: none;
}

/* Étiquette de valeur au-dessus de la barre, en position absolue dans .bar-wrap. */
.bar-val-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: .58rem;
  color: var(--mu);
  white-space: nowrap;
  z-index: 3;
  line-height: 1;
  pointer-events: none;
}

.bar-fill {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: 4px 4px 0 0;
  transition: height .6s cubic-bezier(.4,0,.2,1);
  min-height: 2px;
}

.bar-fill.ok   { background: var(--gr); }
.bar-fill.over { background: var(--rd); }
.bar-fill.none { background: var(--s4); height: 4px !important; }

.bar-day {
  font-size: .65rem;
  color: var(--mu);
  text-transform: uppercase;
}

.bar-today .bar-day { color: var(--gr); }

/* ── Protein progress bar ───────────────────────────────── */
.prot-bar-bg {
  background: var(--s4);
  border-radius: 6px;
  height: 8px;
  overflow: hidden;
}

.prot-bar-fill {
  height: 100%;
  border-radius: 6px;
  background: var(--bl);
  transition: width .7s ease;
}

/* ── Mood / score pills ─────────────────────────────────── */
.score-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .78rem;
  color: var(--mu);
  background: var(--s3);
  border: 1px solid var(--b);
  border-radius: 20px;
  padding: .2rem .65rem;
}

.score-pill i { font-size: .9rem; }
.score-pill.mood   i { color: var(--pu); }
.score-pill.sleep  i { color: var(--bl); }
.score-pill.energy i { color: var(--am); }

/* ── Weight value ───────────────────────────────────────── */
.weight-big {
  font-family: 'DM Mono', monospace;
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--tx);
  line-height: 1;
}

.weight-unit { font-size: 1rem; color: var(--mu); }
.weight-delta { font-size: .8rem; margin-top: .25rem; }
.weight-delta.down { color: var(--gr2); }
.weight-delta.up   { color: var(--rd); }
.weight-delta.flat { color: var(--mu); }

/* ── Sport stats ────────────────────────────────────────── */
.sport-row {
  display: flex;
  gap: 1rem;
  margin-bottom: .75rem;
}

.sport-stat { flex: 1; }
.sport-stat .s-val {
  font-family: 'DM Mono', monospace;
  font-size: 1.4rem;
  color: var(--am);
  font-weight: 500;
}
.sport-stat .s-lbl { font-size: .72rem; color: var(--mu); }

/* ── Streak badge ───────────────────────────────────────── */
.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: linear-gradient(135deg, rgba(168,255,120,.12), rgba(251,191,36,.1));
  border: 1px solid rgba(168,255,120,.25);
  border-radius: 20px;
  padding: .3rem .85rem;
  font-size: .8rem;
  color: var(--gr);
  font-weight: 500;
}

.streak-badge i { color: var(--am); }

/* ── Status badges ──────────────────────────────────────── */
.badge-ok     { background: rgba(168,255,120,.15); color: var(--gr); border: 1px solid rgba(168,255,120,.3); border-radius: 6px; padding: .15rem .5rem; font-size: .72rem; }
.badge-warn   { background: rgba(251,191,36,.15);  color: var(--am); border: 1px solid rgba(251,191,36,.3);  border-radius: 6px; padding: .15rem .5rem; font-size: .72rem; }
.badge-over   { background: rgba(248,113,113,.15); color: var(--rd); border: 1px solid rgba(248,113,113,.3); border-radius: 6px; padding: .15rem .5rem; font-size: .72rem; }
.badge-muted  { background: var(--s3); color: var(--mu); border: 1px solid var(--b); border-radius: 6px; padding: .15rem .5rem; font-size: .72rem; }

/* ── Flash messages ─────────────────────────────────────── */
.flash-success { background: rgba(168,255,120,.12); color: var(--gr);  border: 1px solid rgba(168,255,120,.3); border-radius: 10px; padding: .75rem 1rem; margin-bottom: 1rem; }
.flash-danger  { background: rgba(248,113,113,.12); color: var(--rd);  border: 1px solid rgba(248,113,113,.3); border-radius: 10px; padding: .75rem 1rem; margin-bottom: 1rem; }
.flash-info    { background: rgba(96,165,250,.12);  color: var(--bl);  border: 1px solid rgba(96,165,250,.3);  border-radius: 10px; padding: .75rem 1rem; margin-bottom: 1rem; }
.flash-warning { background: rgba(251,191,36,.12);  color: var(--am);  border: 1px solid rgba(251,191,36,.3);  border-radius: 10px; padding: .75rem 1rem; margin-bottom: 1rem; }

/* ── Empty state ────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--mu);
}

.empty-state i { font-size: 2rem; margin-bottom: .75rem; opacity: .4; display: block; }
.empty-state p { font-size: .875rem; margin: 0; }

/* ── Feedback message ───────────────────────────────────── */
.feedback-msg {
  font-size: .875rem;
  color: var(--mu);
  padding: .6rem .9rem;
  background: var(--s3);
  border-left: 3px solid var(--gr);
  border-radius: 0 8px 8px 0;
  line-height: 1.5;
}

/* ── Quick Log modal ────────────────────────────────────── */
.ql-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,.7);
  /* Centré verticalement sur toutes les tailles d'écran (mobile inclus). */
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(4px);
}

.ql-overlay.open { display: flex; }

.ql-sheet {
  background: var(--s2);
  border: 1px solid var(--b2);
  border-radius: 18px 18px 14px 14px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.5rem;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
}

.ql-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.ql-header h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.ql-header h3 i { color: var(--gr); }

.ql-close {
  background: var(--s4);
  border: none;
  color: var(--mu);
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .15s;
}

.ql-close:hover { color: var(--tx); }

/* ── Slider « part consommée » du picker d'aliments (OFF) ────
   Thumb 22 px (cible tactile confortable) lime sur track zinc,
   webkit + moz, focus visible. */
.fp-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  cursor: pointer;
}

.fp-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: #18181b;
  border: 1px solid #27272a;
}

.fp-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -9px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #a3e635;
  border: 3px solid #09090b;
  box-shadow: 0 0 0 1px rgba(163, 230, 53, 0.4);
}

.fp-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: #18181b;
  border: 1px solid #27272a;
}

.fp-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #a3e635;
  border: 3px solid #09090b;
  box-shadow: 0 0 0 1px rgba(163, 230, 53, 0.4);
}

.fp-range:focus-visible {
  outline: 2px solid #a3e635;
  outline-offset: 4px;
  border-radius: 999px;
}

.mfields { display: flex; flex-direction: column; gap: .85rem; }

.mfield label {
  display: block;
  font-size: .72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mu);
  margin-bottom: .3rem;
}

.mfield input[type="number"],
.mfield input[type="text"] {
  width: 100%;
  background: var(--s3);
  border: 1px solid var(--b2);
  border-radius: 8px;
  color: var(--tx);
  font-family: 'DM Mono', monospace;
  font-size: 1rem;
  padding: .55rem .85rem;
  outline: none;
  transition: border-color .15s;
}

.mfield input:focus { border-color: var(--gr); }

.mfield input[type="range"] {
  width: 100%;
  accent-color: var(--gr);
}

.slider-row {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.slider-val {
  font-family: 'DM Mono', monospace;
  font-size: 1rem;
  font-weight: 500;
  min-width: 1.5rem;
  text-align: right;
  color: var(--tx);
}

.mfield-sep {
  border: none;
  border-top: 1px solid var(--b);
  margin: .25rem 0;
}

.mfield-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .65rem;
}

.sport-row-ql { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }

.mbtn {
  width: 100%;
  background: var(--gr);
  color: #000;
  font-size: .9rem;
  font-weight: 600;
  padding: .7rem;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  margin-top: .5rem;
  transition: opacity .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}

.mbtn:hover { opacity: .85; }

/* ── Quick Log redesigned card ──────────────────────────── */
.ql-card {
  background: var(--s1);
  border: 1px solid var(--s4);
  border-radius: 20px;
  width: 100%;
  max-width: 380px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
}

.mhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 0;
  flex-shrink: 0;
}

.mhead-title { font-size: 15px; font-weight: 500; color: var(--tx); }

.mclose {
  width: 30px; height: 30px;
  background: var(--s3);
  border: none; border-radius: 8px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--mu); font-size: 15px;
  transition: color .15s;
}
.mclose:hover { color: var(--tx); }

.mscroll {
  padding: 16px 18px 20px;
  display: flex; flex-direction: column; gap: 16px;
  overflow-y: auto;
  flex: 1;
}

.date-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--s2);
  border-radius: 12px;
  padding: 11px 14px;
}
.date-ico { color: var(--mu); font-size: 17px; flex-shrink: 0; }
.date-txt { font-size: 14px; color: var(--tx); flex: 1; }

.ql-divider { height: 1px; background: var(--b); margin: 0 -18px; }

.field-block { display: flex; flex-direction: column; gap: 6px; }

.flabel {
  font-size: 10px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--mu); padding-left: 2px;
  display: flex; align-items: center; gap: 6px;
}
.flabel-acc { color: var(--gr); }

/* Stepper skin inside the new Quick Log card */
.ql-stepper .ns-wrap {
  background: var(--s2);
  border-radius: 12px;
  padding: 8px 10px;
}
.ql-stepper .ns-btn        { background: var(--s3); border: none; color: var(--mu); }
.ql-stepper .ns-btn:hover  { background: var(--s4); color: var(--tx); }
.ql-stepper .ns-btn--sm    { width: 34px; height: 34px; padding: 0; flex: 0 0 34px; }
.ql-stepper .ns-btn--lg    { width: 42px; height: 34px; padding: 0; flex: 0 0 42px; font-size: .7rem; }
.ql-stepper .ns-val        { font-size: 17px; font-weight: 500; color: var(--tx); background: transparent; border: none; cursor: default; text-align: center; padding: 0; }
.ql-stepper .ns-val:hover  { border-color: transparent; }

/* Wellness sliders */
.sl-wrap { background: var(--s2); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.sl-row  { display: flex; align-items: center; gap: 10px; }
.sl-label { font-size: 12px; color: var(--mu); width: 68px; flex-shrink: 0; }
.sl-val   { font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 500; color: var(--tx); width: 18px; text-align: right; flex-shrink: 0; }
.sl-val.low { color: var(--rd); }
.sl-val.mid { color: var(--am); }
.sl-val.hi  { color: var(--gr); }

.sl-row input[type=range] {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 6px; border-radius: 99px;
  background: var(--s3); outline: none; cursor: pointer;
}
.sl-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--gr); cursor: grab;
  box-shadow: 0 0 0 3px rgba(168,255,120,.2);
}
.sl-row input[type=range].sleep-sl::-webkit-slider-thumb  { background: var(--bl); box-shadow: 0 0 0 3px rgba(96,165,250,.2); }
.sl-row input[type=range].energy-sl::-webkit-slider-thumb { background: var(--am); box-shadow: 0 0 0 3px rgba(251,191,36,.2); }

/* Day-tag pills */
.ql-tags-wrap { display: flex; flex-wrap: wrap; gap: 7px; }
.ql-tag {
  display: inline-flex; align-items: center;
  padding: 7px 13px; border-radius: 99px;
  border: 1px solid var(--b2); background: transparent;
  color: var(--mu); font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all .15s;
  user-select: none; letter-spacing: .01em; white-space: nowrap;
}
.ql-tag:hover { border-color: var(--s4); color: var(--tx); }
.ql-tag input[type="checkbox"] { display: none; }
.ql-tag:has(input:checked),
.ql-tag.active { background: rgba(168,255,120,.12); border-color: rgba(168,255,120,.3); color: var(--gr); }

/* Submit button */
.ql-mbtn {
  width: 100%; background: var(--gr); color: #071500;
  border: none; border-radius: 12px; padding: 13px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  letter-spacing: .02em; margin-top: 2px; transition: opacity .15s;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
}
.ql-mbtn:hover  { opacity: .85; }
.ql-mbtn:active { transform: scale(.98); }

/* Hidden Symfony date input */
.ql-date-hidden { display: none !important; }

/* ── Goals modal ─────────────────────────────────────────── */
.gm-card.modal-content {
  background: var(--s1);
  border: 1px solid var(--b2);
  border-radius: 20px !important;
  overflow: hidden;
}

.gm-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 62vh;
  overflow-y: auto;
}

.gm-info-box {
  background: var(--s2);
  border-radius: 10px;
  padding: 10px 13px;
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.gm-info-box i { color: var(--mu); font-size: 15px; margin-top: 1px; flex-shrink: 0; }
.gm-info-box p { font-size: 12px; color: var(--mu); line-height: 1.5; margin: 0; }
.gm-info-box strong { color: var(--tx); font-weight: 500; }

.gm-section {
  background: var(--s2);
  border: 1px solid var(--b);
  border-radius: 14px;
  overflow: hidden;
}
.gm-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--b);
}
.gm-section-head i { font-size: 15px; }
.gm-section-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mu);
}
.gm-section-body {
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.gm-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 400px) {
  .gm-two-col { grid-template-columns: 1fr; }
}

.gm-date-section {
  background: var(--s2);
  border: 1px solid var(--b);
  border-radius: 14px;
  padding: 11px 13px;
}
.gm-dpills { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 10px; }
.gm-dpill {
  border: 1px solid var(--b2);
  background: transparent;
  border-radius: 8px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 500;
  color: var(--mu);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.gm-dpill:hover { color: var(--tx); background: var(--s3); }
.gm-dpill.sel {
  background: rgba(163,230,53,0.1);
  border-color: rgba(163,230,53,0.28);
  color: var(--gr);
}
.gm-date-input {
  background: var(--s3);
  border: 1px solid var(--b);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--tx);
  width: 100%;
  color-scheme: dark;
  outline: none;
  transition: border-color .15s;
}
.gm-date-input:focus { border-color: rgba(163,230,53,0.4); }

.gm-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--b);
}
.btn-gm-cancel {
  background: transparent;
  border: 1px solid var(--b2);
  border-radius: 10px;
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mu);
  cursor: pointer;
  transition: all .15s;
}
.btn-gm-cancel:hover { color: var(--tx); border-color: var(--b); }
.btn-gm-save {
  background: var(--gr);
  color: #071500;
  border: none;
  border-radius: 10px;
  padding: 8px 17px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity .15s;
}
.btn-gm-save:hover  { opacity: .85; }
.btn-gm-save:active { transform: scale(.98); }

/* ── Number Stepper ─────────────────────────────────────── */
.ns-wrap {
  display: flex;
  align-items: stretch;
  gap: .3rem;
}

.ns-btn {
  flex: 1;
  min-width: 0;
  padding: .55rem .15rem;
  background: var(--s4);
  border: 1px solid var(--b2);
  border-radius: 8px;
  color: var(--mu);
  font-family: 'DM Mono', monospace;
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;  /* évite le délai 300 ms + double-tap zoom iOS */
  user-select: none;
  transition: background .1s, color .1s;
  text-align: center;
  line-height: 1;
}
.ns-btn:hover  { background: var(--s3); color: var(--tx); border-color: var(--b2); }
.ns-btn:active { background: rgba(255,255,255,.08); color: var(--tx); }

.ns-btn--lg {
  color: color-mix(in srgb, var(--mu) 60%, transparent);
  font-size: .7rem;
}

/* Bouton central : affiche la valeur courante */
.ns-val {
  flex: 2.5;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', monospace;
  font-size: 1rem;
  font-weight: 600;
  color: var(--tx);
  background: var(--s3);
  border: 1px solid var(--b2);
  border-radius: 8px;
  padding: .55rem .4rem;
  cursor: text;
  touch-action: manipulation;
  transition: border-color .15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ns-val:hover { border-color: var(--gr); }

/* ── Forms ──────────────────────────────────────────────── */
.form-control,
.form-select {
  background: var(--s3) !important;
  border: 1px solid var(--b2) !important;
  color: var(--tx) !important;
  border-radius: 8px;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--gr) !important;
  box-shadow: 0 0 0 3px rgba(168,255,120,.15) !important;
  background: var(--s3) !important;
}

.form-label { font-size: .82rem; color: var(--mu); font-weight: 500; }
.form-text  { color: var(--mu); font-size: .75rem; }

.form-range { accent-color: var(--gr); }

.btn-primary {
  background: var(--gr) !important;
  border-color: var(--gr) !important;
  color: #000 !important;
  font-weight: 600;
  border-radius: 8px;
}

.btn-primary:hover { opacity: .85; }

.btn-secondary {
  background: var(--s4) !important;
  border-color: var(--b2) !important;
  color: var(--tx) !important;
  border-radius: 8px;
}

.btn-outline-secondary {
  border-color: var(--b2) !important;
  color: var(--mu) !important;
}

/* ── Login / Registration ────────────────────────────────── */
.auth-wrap {
  display: flex;
  justify-content: center;
  padding: 1.5rem 0 3rem;
}
.auth-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  max-width: 700px;
  align-items: start;
}
@media (max-width: 640px) {
  .auth-inner { grid-template-columns: 1fr; }
  .auth-info-card { display: none; }
}

.auth-card {
  background: var(--s1);
  border: 1px solid var(--b);
  border-radius: 20px;
  padding: 26px 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-bottom: 22px;
}
.auth-logo-mark { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; }
.auth-brand-name {
  font-family: 'DM Mono', monospace;
  font-size: 18px; font-weight: 500;
  letter-spacing: .18em;
  color: var(--tx);
}
.auth-brand-sub { font-size: 11px; color: var(--mu); letter-spacing: .02em; text-align: center; }

.auth-tabs {
  display: flex;
  background: var(--s3);
  border-radius: 10px;
  padding: 3px; gap: 2px;
  width: 100%;
  margin-bottom: 20px;
}
.auth-tab {
  flex: 1; padding: 7px;
  border: none; border-radius: 8px;
  font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all .15s;
  background: transparent; color: var(--mu);
  text-decoration: none;
  text-align: center; display: block;
  line-height: 1.4;
}
.auth-tab:hover { color: var(--tx); }
.auth-tab.active { background: var(--s1); color: var(--tx); box-shadow: 0 1px 3px rgba(0,0,0,.4); }

.auth-form { width: 100%; display: flex; flex-direction: column; gap: 11px; }

.fgroup { display: flex; flex-direction: column; gap: 5px; }

.finput {
  width: 100%;
  background: var(--s2);
  border: 1px solid var(--b);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--tx);
  outline: none;
  transition: border-color .2s;
  font-family: inherit;
}
.finput::placeholder { color: var(--mu2, #555); font-size: 13px; }
.finput:focus { border-color: rgba(163,230,53,0.35); }
.finput.is-invalid { border-color: rgba(248,113,113,0.4); }

.pw-wrap { position: relative; }
.pw-toggle {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: var(--mu); font-size: 15px; padding: 2px;
  transition: color .15s;
}
.pw-toggle:hover { color: var(--tx); }
.finput.has-toggle { padding-right: 36px; }

.strength-bar { height: 3px; border-radius: 99px; background: var(--s3); overflow: hidden; margin-top: 4px; }
.strength-fill { height: 100%; border-radius: 99px; transition: width .3s, background .3s; width: 0%; }

.auth-check-row { display: flex; align-items: center; gap: 8px; }
.auth-check-row input[type="checkbox"] {
  width: 15px; height: 15px;
  border-radius: 4px;
  accent-color: var(--gr);
  cursor: pointer; flex-shrink: 0;
}
.auth-check-row label { font-size: 12px; color: var(--mu); cursor: pointer; }

.auth-err {
  display: flex; align-items: flex-start; gap: 7px;
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.2);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 12px; color: var(--rd);
  line-height: 1.45;
}
.auth-err i { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.auth-err-inline {
  font-size: 11px; color: var(--rd);
  display: flex; align-items: center; gap: 4px;
  margin-top: 2px;
}
.auth-err-inline i { font-size: 12px; }

.btn-main {
  width: 100%;
  background: var(--gr); color: #071500;
  border: none; border-radius: 10px;
  padding: 11px;
  font-size: 13px; font-weight: 500;
  cursor: pointer; letter-spacing: .02em;
  transition: opacity .15s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 2px;
}
.btn-main:hover  { opacity: .85; }
.btn-main:active { transform: scale(.98); }
.btn-main i { font-size: 14px; }

.auth-foot {
  font-size: 12px; color: var(--mu);
  text-align: center;
  margin-top: 14px;
  width: 100%;
}
.auth-foot a { color: var(--gr); text-decoration: none; font-weight: 500; }
.auth-foot a:hover { opacity: .8; }
.auth-link-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--gr); font-weight: 500; font-size: inherit; font-family: inherit;
}
.auth-link-btn:hover { opacity: .8; }
.auth-panel { width: 100%; }

/* Info panel (right card on auth pages) */
.auth-info-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-info-label {
  font-size: 11px; font-weight: 500;
  color: var(--mu); text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 12px;
}
.auth-feat { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.auth-feat-ico {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.auth-feat-title { font-size: 12px; font-weight: 500; color: var(--tx); margin-bottom: 2px; }
.auth-feat-desc  { font-size: 11px; color: var(--mu); line-height: 1.5; }
.auth-privacy {
  border-top: 1px solid var(--b); padding-top: 12px; margin-top: 4px;
  font-size: 11px; color: var(--mu2, #555);
  display: flex; align-items: center; gap: 5px;
}

.invalid-feedback { color: var(--rd); font-size: .78rem; }

/* ── Tables ─────────────────────────────────────────────── */
.table {
  color: var(--tx) !important;
  border-color: var(--b) !important;
}

.table th {
  color: var(--mu) !important;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 500;
  border-color: var(--b) !important;
}

.table td { border-color: var(--b) !important; font-size: .875rem; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--s1) !important; color: var(--tx) !important; }
.table-hover > tbody > tr:hover > * { background: var(--s3) !important; color: var(--tx) !important; }

/* ── Utility ────────────────────────────────────────────── */
.mono { font-family: 'DM Mono', monospace; }
.text-green { color: var(--gr) !important; }
.text-blue  { color: var(--bl) !important; }
.text-amber { color: var(--am) !important; }
.text-red   { color: var(--rd) !important; }
.text-muted { color: var(--mu) !important; }

.gap-12 { gap: .75rem !important; }

/* ── Landing : boutons CTA réutilisables ──────────────────
   Les pages marketing (landing Maido, à terme tout CTA public)
   utilisent ces classes plutôt que des styles inline. Elles
   consomment les tokens du design system (--gr, --b2, --tx). */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 12px;
  padding: .85rem 2rem;
  font-size: 1.02rem;
  line-height: 1;
  cursor: pointer;
  transition: opacity .15s ease, transform .12s ease;
}
.lp-btn--primary {
  background: var(--gr, #a8ff78);
  color: #0e0e0e;
  box-shadow: 0 0 24px rgba(168,255,120,.35);
}
.lp-btn--primary:hover  { opacity: .9; }
.lp-btn--primary:active { transform: scale(.98); }
.lp-btn--secondary {
  background: transparent;
  color: var(--tx);
  border: 1px solid var(--b2);
  padding: .85rem 1.5rem;
  font-size: .95rem;
}
.lp-btn--secondary:hover { border-color: var(--tx); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 576px) {
  .maido-main { padding: 1rem 0 3rem; }
  .card { padding: 1rem; }
  .stat-value { font-size: 1.3rem; }
  .weight-big { font-size: 2rem; }
  .maido-nav .nav-links { gap: 0; }
  .maido-nav .nav-links a { padding: .3rem .45rem; font-size: .8rem; }
}

/* ── Toggle switch & Privacy/Tracker rows ───────────────────────────── */

.maido-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.maido-toggle-track {
  display: inline-flex;
  align-items: center;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: #4b5563;
  padding: 0 0.2rem;
  transition: background 0.2s ease;
  cursor: pointer;
  flex-shrink: 0;
}

.maido-toggle-knob {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transform: translateX(0);
  transition: transform 0.2s ease;
}

.maido-toggle-input:checked ~ .maido-toggle-track { background: var(--maido-accent, #f97316); }
.maido-toggle-input:checked ~ .maido-toggle-track .maido-toggle-knob { transform: translateX(1.25rem); }
.maido-toggle-input:focus-visible ~ .maido-toggle-track { outline: 2px solid var(--maido-accent, #f97316); outline-offset: 2px; }

/* ── Tracker config page ─────────────────────────────────── */
.tracker-legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--s2); border-radius: 10px; border: 1px solid var(--b);
  font-size: 11px; color: var(--mu);
}
.leg-item  { display: flex; align-items: center; gap: 5px; }
.leg-dot   { width: 7px; height: 7px; border-radius: 50%; }

.tracker-list { display: flex; flex-direction: column; gap: 8px; }

.tr-card {
  background: var(--s1);
  border: 1px solid var(--b);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  transition: border-color .2s;
}
.tr-card:has(input[value="private"]:checked) { border-color: rgba(251,191,36,.35); }
.tr-card:has(input[value="public"]:checked)  { border-color: rgba(168,255,120,.3); }

.tr-icon {
  width: 34px; height: 34px;
  border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  background: var(--s3);
  transition: opacity .2s;
}
.tr-card:has(input[value="inactive"]:checked) .tr-icon { opacity: .35; }

.tr-info { flex: 1; min-width: 0; }
.tr-name { font-size: 13px; font-weight: 500; color: var(--tx); line-height: 1.2; transition: color .2s; }
.tr-desc { font-size: 11px; color: var(--mu); margin-top: 2px; }
.tr-card:has(input[value="inactive"]:checked) .tr-name,
.tr-card:has(input[value="inactive"]:checked) .tr-desc { color: var(--mu2, #555); }

.tr-ctrl { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.tog-wrap {
  display: flex;
  background: var(--s3); border-radius: 8px;
  padding: 2px; gap: 2px;
}

.tog-btn {
  border: 1px solid transparent;
  background: transparent; border-radius: 6px;
  padding: 5px 9px;
  font-size: 11px; font-weight: 500;
  color: var(--mu); cursor: pointer;
  transition: all .15s;
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap; letter-spacing: .01em;
  user-select: none;
}
.tog-btn i { font-size: 12px; }
/* Keep radios accessible but invisible */
.tog-btn input[type="radio"] {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  pointer-events: none;
}
.tog-btn:hover { color: var(--tx); }
.tog-btn:has(input[value="inactive"]:checked) { background: var(--s4); color: var(--mu); }
.tog-btn:has(input[value="private"]:checked)  { background: rgba(251,191,36,.1);  color: var(--am); border-color: rgba(251,191,36,.28); }
.tog-btn:has(input[value="public"]:checked)   { background: rgba(168,255,120,.1); color: var(--gr); border-color: rgba(168,255,120,.25); }

/* Keyboard focus ring on tog-btn via radio focus-visible */
.tog-btn:has(input[type="radio"]:focus-visible) { outline: 2px solid var(--gr); outline-offset: 2px; }

/* ── Save button for tracker config ─────────────────────── */
.tr-save-row { padding: 8px 2px 0; }
.tr-save-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--gr); color: #071500;
  border: none; border-radius: 10px;
  padding: 10px 18px; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: opacity .15s; letter-spacing: .01em;
}
.tr-save-btn:hover  { opacity: .85; }
.tr-save-btn:active { transform: scale(.98); }
.tr-save-btn.hidden { display: none !important; }

/* Mobile: stack card vertically on narrow screens */
@media (max-width: 500px) {
  .tr-card { flex-wrap: wrap; }
  .tr-ctrl { width: 100%; }
  .tog-wrap { width: 100%; justify-content: stretch; }
  .tog-btn  { flex: 1; justify-content: center; padding: 6px 4px; }
}

/* ── Modale de confirmation globale ──────────────────────────────────── */
.maido-modal--hidden { display: none !important; }

[data-modal-target="container"] {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: maido-modal-in .15s ease;
}

@keyframes maido-modal-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Logo SVG size utilities ──────────────────────────────────────────── */
.logo-sm  { width: 28px;  height: 28px;  display: inline-block; flex-shrink: 0; vertical-align: middle; }
.logo-md  { width: 42px;  height: 42px;  display: inline-block; flex-shrink: 0; }
.logo-lg  { width: 56px;  height: 56px;  display: inline-block; flex-shrink: 0; }
.logo-xl  { width: 64px;  height: 64px;  display: block; flex-shrink: 0; margin: 0 auto 1.25rem; }

/* ── Sport Activity Chips (Tracker page) ────────────────────────────── */
.sport-activity-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--mu2, #444);
  background: rgba(255,255,255,.03);
  color: var(--mu, #999);
  cursor: pointer;
  font-size: .82rem;
  transition: all .15s;
  user-select: none;
}
.sport-activity-chip:hover { border-color: rgba(168,255,120,.3); }
.sport-activity-chip.active {
  border-color: rgba(52,211,153,.5);
  background: rgba(52,211,153,.08);
  color: #34d399;
}
.sport-activity-chip .chip-emoji { font-size: 1rem; }
.sport-activity-chip .chip-label { font-weight: 500; }

/* ── Utilitaires ──────────────────────────────────────────────────────── */
.no-select,
.no-select *,
.avatar-display,
.avatar-display * {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* ── Sélection de texte : désactivée par défaut ──────────────────────────
   Maido est une app de consultation/saisie, pas un éditeur de texte. Les
   cartes cliquables (cockpit, en-têtes basculantes…) ne doivent pas
   afficher de caret de sélection au clic. On coupe donc la sélection
   globalement et on la réautorise uniquement dans les vrais champs de
   saisie, pour ne casser ni la frappe ni la sélection dans les inputs. */
* {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* Réautorisation explicite pour tout ce qui est réellement éditable :
   champs de formulaire natifs, zones contenteditable, et leur texte. */
input, textarea, select,
[contenteditable=""], [contenteditable="true"], [contenteditable] {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
/* Exception pour les pages de contenu (accueil, CGU) : le texte doit rester
   sélectionnable/copiable (email de contact, extraits légaux…). */
.selectable,
.selectable * {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* ============================================================
   Page d'authentification (connexion / inscription)
   Réutilise les tokens du design system (--bg, --s2, --gr, ...)
   pour une cohérence parfaite avec le reste de l'app.
   ============================================================ */

.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  /* PWA standalone : respecter encoche + barre home si > padding de base. */
  padding-top: max(2.5rem, env(safe-area-inset-top));
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}

.auth-card {
  width: 100%;
  max-width: 24rem;
  background: var(--s2);
  border: 1px solid var(--b);
  border-radius: calc(var(--radius) + 6px);
  padding: 1.75rem;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
}

.auth-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.5rem;
}
.auth-head .logo-lg { margin-bottom: .75rem; }
.auth-head h1 {
  font-size: 1.25rem; font-weight: 700; color: var(--tx);
  letter-spacing: -0.02em; margin: 0;
}
.auth-head p { color: var(--mu); font-size: .78rem; margin: .3rem 0 0; }

.auth-banner {
  border-radius: 12px;
  padding: .6rem 1rem;
  font-size: .8rem;
  margin-bottom: 1rem;
  line-height: 1.4;
}
.auth-banner--error {
  background: rgba(244,63,94,.08);
  border: 1px solid rgba(244,63,94,.25);
  color: #f9a8b8;
}
.auth-banner--error strong { color: var(--rd); }
.auth-banner--success {
  background: rgba(163,230,53,.08);
  border: 1px solid rgba(163,230,53,.25);
  color: #d4f28a;
  text-align: left;
}
.auth-banner--success strong { color: #a3e635; }
.auth-banner--info {
  background: rgba(163,230,53,.08);
  border: 1px solid rgba(163,230,53,.25);
  color: #d4f28a;
  text-align: left;
}
.auth-banner--info strong { color: #a3e635; }

/* Bascule Connexion / Inscription */
.auth-tabs {
  display: flex;
  background: #000;
  border: 1px solid var(--b);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 1.5rem;
}
.auth-tab {
  flex: 1;
  padding: .6rem;
  border: none;
  background: transparent;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--mu);
  cursor: pointer;
  transition: all .15s;
}
.auth-tab:hover { color: var(--tx); }
.auth-tab.is-active {
  background: var(--gr);
  color: #071500;
  box-shadow: 0 0 12px rgba(168,255,120,.25);
}

.auth-form { display: flex; flex-direction: column; gap: 1rem; }

.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-label {
  font-size: 10px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--mu);
}
.auth-input {
  width: 100%;
  background: #000;
  border: 1px solid var(--b2);
  border-radius: 12px;
  padding: .85rem 1rem;
  color: var(--tx);
  font-family: inherit;
  font-size: .875rem;
  outline: none;
  transition: border-color .15s;
}
.auth-input::placeholder { color: #52525b; }
.auth-input:focus { border-color: var(--gr); }

.auth-input-wrap { position: relative; }
.auth-input-wrap .auth-input { padding-right: 3rem; }
.auth-eye {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--mu);
  cursor: pointer;
  padding: 4px;
  display: flex;
  transition: color .15s;
}
.auth-eye:hover { color: var(--tx); }

.auth-field-error { color: var(--rd); font-size: .78rem; margin-top: 2px; }

/* Barre de force du mot de passe */
.auth-strength { display: flex; gap: 6px; margin-top: 8px; }
.auth-strength-bar {
  height: 4px; flex: 1;
  border-radius: 999px;
  background: var(--s4);
  transition: background-color 200ms ease;
}

/* Case CGU */
.auth-cgu {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.auth-cgu input[type="checkbox"] {
  margin-top: 2px;
  width: 16px; height: 16px;
  accent-color: var(--gr);
  cursor: pointer;
}
.auth-cgu span {
  font-size: .78rem; color: var(--mu);
  line-height: 1.5;
}
.auth-cgu span a { color: var(--gr); font-weight: 600; }

.auth-link-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}
.auth-link-row a { font-size: .78rem; color: var(--gr); font-weight: 500; }

.auth-remember {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--gr);
  cursor: pointer;
  user-select: none;
}
.auth-remember input { accent-color: var(--gr); }

.auth-submit {
  width: 100%;
  background: var(--gr);
  color: #071500;
  border: none;
  border-radius: 12px;
  padding: .85rem;
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.auth-submit:hover { background: #b8ff8f; }
.auth-submit:disabled {
  background: var(--s4);
  color: var(--mu);
  cursor: not-allowed;
}

.auth-foot {
  text-align: center;
  font-size: .78rem;
  color: var(--mu);
  margin-top: 4px;
}
.auth-foot a { color: var(--gr); font-weight: 600; }

.auth-card altcha-widget {
    --altcha-color-base:            #161616;
    --altcha-color-base-content:    var(--tx);
    --altcha-color-neutral:         var(--b2);
    --altcha-color-neutral-content: var(--mu);
    --altcha-color-primary:         var(--gr);
    --altcha-color-primary-content: #0b0b0b;
    --altcha-color-success:         var(--gr2);
    --altcha-color-success-content: #0b0b0b;
    --altcha-color-error:           #f87171;
    --altcha-color-error-content:   #0b0b0b;
    --altcha-max-width: 100%;
    border-radius: 12px;
    color: var(--tx);
    font-size: .9rem;
}

.auth-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(0,0,0,0.2);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: auth-spin 0.7s linear infinite;
}
@keyframes auth-spin {
    to { transform: rotate(360deg); }
}
.auth-submit:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}

/* ── Icônes SVG inline (components/_icons.html.twig, ex-webfont Tabler) ──
   Alignement calé sur le rendu de l'ancienne webfont : les icônes suivent
   la couleur du texte (stroke="currentColor") et le font-size du contexte
   (width/height="1em"). */
.ti-svg {
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* ── PWA : encart d'installation iOS (components/_pwa_hint.html.twig) ─── */
.pwa-hint {
  display: flex;
  align-items: center;
  gap: .8rem;
  background: rgba(168, 255, 120, .07);
  border: 1px solid rgba(168, 255, 120, .25);
  border-radius: 12px;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
}
.pwa-hint-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 10px;
  background: rgba(168, 255, 120, .12);
  color: var(--gr);
  font-size: 1.25rem;
}
.pwa-hint-body { flex: 1; min-width: 0; }
.pwa-hint-body strong {
  display: block;
  font-size: .82rem;
  color: var(--tx);
}
.pwa-hint-body p {
  margin: .1rem 0 0;
  font-size: .75rem;
  line-height: 1.45;
  color: var(--mu);
}
.pwa-hint-body .ti-svg { color: var(--tx); }
.pwa-hint-close {
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: .3rem;
  color: var(--mu);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.pwa-hint-close:hover { color: var(--tx); }

/* ── Indicateur de sauvegarde / file hors-ligne (components/_offline_queue) ──
   Pastille fixe en bas de page : confirme visuellement les sauvegardes en
   arrière-plan (saisie unitaire + Mode saisie groupé) et signale les
   mutations mises en file hors-ligne. bottom: calc() respecte la barre home
   iOS en PWA (env() nulle en navigateur). */
.maido-save-status {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 1100;
  padding: .5rem 1rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.maido-save-status--hidden { opacity: 0; transform: translateX(-50%) translateY(8px); }
.maido-save-status--saving,
.maido-save-status--queued {
  background: rgba(251, 191, 36, .12);
  border: 1px solid rgba(251, 191, 36, .3);
  color: #fbbf24;
}
.maido-save-status--saved,
.maido-save-status--synced {
  background: rgba(163, 230, 53, .12);
  border: 1px solid rgba(163, 230, 53, .3);
  color: #a3e635;
}
.maido-save-status--error {
  background: rgba(244, 63, 94, .12);
  border: 1px solid rgba(244, 63, 94, .3);
  color: #f43f5e;
  /* Cliquable : recharge la page (sortie de secours des messages « Session
     expirée — recharge la page », posés par maidoSaveStatus). */
  pointer-events: auto;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dashboard — cockpit & animations
   Ex <style> inline de dashboard/index.html.twig (bloc extra_css), déporté
   ici. Les définitions historiquement dupliquées (steamRise, markerPulse,
   glowPulse, mound-shrink) sont réduites à leur version effective — celle
   qui l'emportait en cascade (la seconde écrite) à l'époque du bloc inline.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Les turbo-frames du cockpit doivent se comporter comme des blocs normaux
   pour préserver l'espacement (space-y-8 du <main>) et le flow de la grille. */
turbo-frame { display: block; }

/* Espacement vertical entre les 4 sections du cockpit. Ciblé par CSS et non
   par classe Tailwind sur les <turbo-frame> : ces frames sont remplacés à
   chaque sauvegarde (Turbo Stream) en perdant leurs attributs class. La
   règle CSS, elle, s'applique quel que soit l'état du DOM. */
#daily-cockpit > turbo-frame + turbo-frame { margin-top: 2rem; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 4px; }

.ring-calories { transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1s ease; }
.bar-fill { transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); }
.fade-in { animation: fadeIn 0.3s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.sport-track { background: linear-gradient(90deg, rgba(251,191,36,0.06), rgba(251,191,36,0.02)); }
.sport-segment { transition: width 0.5s ease; }
.wave { animation: wave 3s ease-in-out infinite; }
@keyframes wave { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* Pulsation douce des indicateurs (ex double définition glowPulse/pulse-glow
   aux valeurs 0.6/1 et 0.5/1 — la seconde l'emportait : opacité 0.5 → 1). */
.glow-pulse { animation: glowPulse 2s ease-in-out infinite; }
@keyframes glowPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }

.egg-pop { animation: eggPop 0.4s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes eggPop { 0% { transform: scale(0.85); opacity:0; } 100% { transform: scale(1); opacity:1; } }
.drop-shadow-glass { filter: drop-shadow(0 0 6px rgba(244,63,94,0.5)); }
.glass-pop { animation: glassPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes glassPop { 0% { transform: scale(0.85); opacity:0; } 100% { transform: scale(1); opacity:1; } }

/* Vapeur du bol (L'Offrande) — version « avec dérive latérale » : seconde
   définition historique, celle l'emportant en cascade. */
.steam { animation: steamRise 3s ease-in-out infinite; transform-origin: center bottom; }
@keyframes steamRise {
    0%   { transform: translateY(0) translateX(0) scaleY(0.8); opacity: 0; }
    20%  { opacity: 0.7; }
    60%  { transform: translateY(-8px) translateX(2px) scaleY(1.1); opacity: 0.4; }
    100% { transform: translateY(-16px) translateX(-2px) scaleY(1.3); opacity: 0; }
}

/* Marqueur « aujourd'hui » des timelines vigilance — seconde définition
   historique (scale 1.35), celle l'emportant en cascade. */
.marker-pulse { animation: markerPulse 1.4s ease-in-out infinite; }
@keyframes markerPulse {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.35); }
}

/* Icônes vigilance (verre/cigarette) saisies le jour MÊME : pulsation
   lente et discrète (opacité + léger grossissement) pour les distinguer
   des icônes des jours précédents, qui restent statiques. */
.today-pulse { animation: todayPulse 4s ease-in-out infinite; }
@keyframes todayPulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.4); } }
.grain { transition: opacity 0.5s ease; }

/* Monticule de nourriture du bol — rétrécit à l'approche du plafond :
   seconde définition historique (transform seul, 600ms), effective. */
.mound-shrink { transition: transform 600ms cubic-bezier(.4,0,.2,1); }

.rain-drop { animation: rainDrop 1s ease-in infinite; }
@keyframes rainDrop { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(6px); opacity: 0; } }
.sparkle { animation: sparkle 1.5s ease-in-out infinite; }
@keyframes sparkle { 0%,100% { opacity: 0.4; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } }

input[type=range] { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; background: #27272a; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; cursor: pointer; margin-top: -6px; }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; cursor: pointer; border: none; }

/* ── Donnée manquante : valeur null signalée en ambre ── */
.maido-missing {
    color: #fbbf24;
    border: 1px dashed rgba(251, 191, 36, 0.4);
    background: rgba(251, 191, 36, 0.05);
    border-radius: 0.375rem;
    padding: 0.125rem 0.375rem;
}
.maido-missing-value { color: #fbbf24; }

/* ── Slider en état « Non défini » : piste pointillée ambre + boucle grisée ── */
input[type=range].maido-range-empty { background: transparent; }
input[type=range].maido-range-empty::-webkit-slider-runnable-track {
    background: repeating-linear-gradient(90deg, rgba(251,191,36,0.5) 0 6px, transparent 6px 12px);
    height: 6px; border-radius: 999px;
}
input[type=range].maido-range-empty::-webkit-slider-thumb {
    background: #71717a; margin-top: -6px; opacity: 0.9;
}
input[type=range].maido-range-empty::-moz-range-track {
    background: repeating-linear-gradient(90deg, rgba(251,191,36,0.5) 0 6px, transparent 6px 12px);
    height: 6px; border-radius: 999px;
}
input[type=range].maido-range-empty::-moz-range-thumb {
    background: #71717a; opacity: 0.9;
}

/* ── Carte incomplète : bordure ambre pointillée + badge « À compléter » ── */
.maido-card-incomplete {
    border-color: rgba(251, 191, 36, 0.45) !important;
    border-style: dashed;
}
.maido-badge-incomplete {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

/* ── Accessibilité : prefers-reduced-motion ─────────────────
   Coupe les boucles d'animation (wave, steam, glow-pulse, today-pulse,
   marker-pulse, rain-drop, sparkle, fade-in, auth-spin…), les transitions
   et le scroll doux pour les utilisateurs sensibles au mouvement. Durées
   quasi nulles plutôt que display:none : les états finaux restent atteints
   (un élément caché casserait les jauges/jeux d'opacité). Le bloc est
   volontairement universel — toute animation ajoutée plus haut est couverte
   automatiquement. Chart.js est coupé séparément côté JS
   (trends_charts_controller, C.defaults.animation = false). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}