/* ==========================================================================
   ARDENT — Finitions (sur le style d'origine)
   Chargée en dernier : styles des nouveautés (décompte, rappel de pesée,
   questionnaire, onglet Défis) + quelques retouches de netteté. Le style
   d'origine (couleurs, police, cartes) reste celui de variables.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Netteté : un filet très fin autour des cartes claires (bords plus « carrés »)
   -------------------------------------------------------------------------- */
.today-card,
.period-card,
.stat-tile,
.steps-card,
.action-list,
.glass-card,
.workout-day-card,
.weigh-reminder,
.challenges-card,
.team-card {
  box-shadow: var(--shadow-card), 0 0 0 1px var(--color-hairline);
}
.workout-day-card.is-today { box-shadow: 0 0 0 2px var(--color-accent-bright), var(--shadow-card); }

/* Carte héros : mêmes lueurs, un peu plus discrètes */
.hero-card::before { opacity: 0.8; }
.hero-card::after { opacity: 0.55; }

/* Espacement régulier entre les blocs de l'accueil */
.dash-grid .today-card { margin-top: var(--space-4); }

/* --------------------------------------------------------------------------
   Accueil : rappel de pesée (seulement le jour J)
   -------------------------------------------------------------------------- */
.weigh-reminder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  border-left: 4px solid var(--color-accent-bright);
}
.weigh-reminder-text { min-width: 0; }
.weigh-reminder-text strong { display: block; font-family: var(--font-display); font-size: 15px; font-weight: 800; }
.weigh-reminder-text small { display: block; font-size: 12.5px; color: var(--color-text-secondary); margin-top: 2px; }

/* Onglet Corps : carte « Ta période » au-dessus des indicateurs */
[data-period-host]:not(:empty) { margin-bottom: var(--space-4); }
[data-period-host] .period-card { margin-top: 0; }

/* --------------------------------------------------------------------------
   Agenda : seule la séance du jour montre ses exercices, les autres se déplient
   -------------------------------------------------------------------------- */
.workout-details { margin: 4px 0 10px; }
.workout-details > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-text-secondary);
}
.workout-details > summary::-webkit-details-marker { display: none; }
.workout-details > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s;
}
.workout-details[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.workout-details[open] > summary { margin-bottom: 6px; }

/* Liste d'exercices repliée : 1er net, 2e pâle, 3e presque transparent, puis « Voir les N exercices » */
.workout-list.is-collapsed { margin-bottom: 0; }
.workout-list.is-collapsed .workout-exercise:nth-child(2) { opacity: 0.5; }
.workout-list.is-collapsed .workout-exercise:nth-child(3) { opacity: 0.16; }
.workout-list.is-collapsed .workout-exercise:nth-child(n+4) { display: none; }
.workout-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin: 2px 0 var(--space-3);
  padding: 8px 0 4px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-text-secondary);
}
.workout-more svg { width: 18px; height: 18px; transition: transform 0.25s var(--ease-out); }
.workout-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.workout-more:active { transform: scale(0.98); }

/* --------------------------------------------------------------------------
   Agenda : recherche « Comment faire un exercice ? »
   -------------------------------------------------------------------------- */
.exsearch { position: relative; }
.exsearch-field {
  position: relative;
  height: 50px;
  border-radius: var(--radius-pill);
  background: var(--color-card);
  box-shadow: var(--shadow-card), 0 0 0 1px var(--color-hairline);
}
.exsearch-field:focus-within { box-shadow: var(--shadow-card), 0 0 0 2px var(--color-text); }
.exsearch-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--color-text-tertiary); z-index: 2; pointer-events: none; }
.exsearch-icon svg { width: 20px; height: 20px; display: block; }
/* Le texte grisé est dessiné SOUS le champ, aligné au pixel près sur ce qui est tapé */
.exsearch-ghost,
.exsearch-input {
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: normal;
  padding: 0 18px 0 46px;
}
.exsearch-ghost {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  white-space: pre;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.exsearch-ghost-typed { color: transparent; }
.exsearch-ghost-rest { color: var(--color-text-tertiary); opacity: 0.75; }
.exsearch-input {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--color-text);
  outline: none;
}
.exsearch-input::placeholder { color: var(--color-text-tertiary); font-weight: 400; }
.exsearch-suggest {
  list-style: none;
  margin: 6px 0 0;
  padding: 6px;
  border-radius: var(--radius-md);
  background: var(--color-card);
  box-shadow: var(--shadow-float), 0 0 0 1px var(--color-hairline);
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
}
.exsearch-suggest li { padding: 10px 12px; border-radius: 10px; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.exsearch-suggest li:hover,
.exsearch-suggest li:active { background: var(--color-card-alt); }
.exsearch-result:not(:empty) { margin-top: var(--space-3); }
.exsearch-card {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  box-shadow: var(--shadow-card), 0 0 0 1px var(--color-hairline);
  animation: fade-up 0.3s var(--ease-out);
}
.exsearch-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.exsearch-card-title { font-family: var(--font-display); font-weight: 800; font-size: 17px; }
.exsearch-close { width: 30px; height: 30px; border-radius: 50%; background: var(--color-card-alt); color: var(--color-text-secondary); font-size: 13px; flex-shrink: 0; }
.exsearch-card .demo-player { margin-bottom: 0; }
.exsearch-card .demo-missing { margin-bottom: var(--space-3); }

/* --------------------------------------------------------------------------
   Coach : barre de saisie gris anthracite, sobre (micro discret, envoi ↑)
   -------------------------------------------------------------------------- */
.coach-composer .coach-input-bar {
  align-items: flex-end;
  padding: 5px;
  border: 1px solid #2c2c2e;
  border-radius: 26px;
  background: #1c1c1e;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}
.coach-composer .coach-input-bar:focus-within {
  border-color: #48484a;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06), 0 8px 22px rgba(0, 0, 0, 0.18);
}
.coach-composer .coach-textarea { color: #f2f2f7; caret-color: #f2f2f7; font-size: 15px; }
.coach-composer .coach-textarea::placeholder { color: #8e8e93; }
.coach-composer .coach-attach-btn,
.coach-composer .coach-mic-btn {
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  color: #c7c7cc;
}
.coach-composer .coach-attach-btn:hover,
.coach-composer .coach-mic-btn:hover { background: rgba(255, 255, 255, 0.08); }
.coach-composer .coach-mic-btn svg { width: 20px; height: 20px; }
.coach-composer .coach-send {
  width: 34px;
  height: 34px;
  margin: 3px;
  background: #2f6fde;
  box-shadow: none;
}
.coach-composer .coach-send:disabled { opacity: 1; background: #3a3a3c; }
.coach-composer .coach-send svg { width: 17px; height: 17px; stroke: #fff; }
.coach-composer .coach-send:disabled svg { stroke: #8e8e93; }

/* Dictée façon ChatGPT : la barre devient [✕] [onde] [■] [↑], puis « Transcription… ».
   Entrée et sortie en douceur (fondu + léger zoom, boutons qui apparaissent l’un après l’autre),
   passage à la transcription en fondu (l’onde s’efface, le ■ devient une roue, le texte scintille). */
.coach-input-bar.is-voice { align-items: center; }
.coach-input-bar.is-voice > :not(.voice-ui) { display: none !important; }
.voice-ui {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.voice-ui.is-in { opacity: 1; transform: none; }
.voice-ui.is-out { opacity: 0; transform: scale(0.98); transition-duration: 0.18s; }
.voice-btn {
  position: relative;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #f2f2f7;
  opacity: 0;
  transform: scale(0.6);
  transition: transform 0.4s var(--ease-spring), opacity 0.25s ease, background 0.2s;
}
.voice-ui.is-in .voice-btn { opacity: 1; transform: none; }
.voice-ui.is-in .voice-stop { transition-delay: 0.05s, 0.05s, 0s; }
.voice-ui.is-in .voice-send { transition-delay: 0.1s, 0.1s, 0s; }
.voice-ui.is-in .voice-btn:active { transform: scale(0.9); transition-delay: 0s; }
.voice-btn svg { width: 17px; height: 17px; }
.voice-cancel { background: transparent; box-shadow: inset 0 0 0 1px #48484a; }
.voice-cancel:hover { background: rgba(255, 255, 255, 0.06); }
.voice-stop { background: #2c2c2e; box-shadow: inset 0 0 0 1px #3a3a3c; }
.voice-stop-square { width: 10px; height: 10px; border-radius: 2.5px; background: #f2f2f7; transition: opacity 0.2s, transform 0.25s var(--ease-out); }
.voice-stop .voice-spinner { position: absolute; inset: 9px; width: auto; height: auto; opacity: 0; transition: opacity 0.2s; }
.voice-spinner { width: 15px; height: 15px; flex-shrink: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.2); border-top-color: #f2f2f7; animation: spin 0.75s linear infinite; }
.voice-send { background: #2f6fde; }
.voice-btn, .voice-mid { touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.voice-mid { position: relative; flex: 1 1 0; min-width: 0; height: 34px; display: flex; align-items: center; justify-content: center; }
.voice-wave { position: absolute; inset: 0; width: 100%; height: 100%; contain: strict; transition: opacity 0.3s ease; }
.voice-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease 0.12s; }
.voice-status-text {
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(90deg, #8e8e93 0%, #8e8e93 35%, #f2f2f7 50%, #8e8e93 65%, #8e8e93 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.voice-ui.is-transcribing .voice-wave { opacity: 0; }
.voice-ui.is-transcribing .voice-status { opacity: 1; }
.voice-ui.is-transcribing .voice-status-text { animation: voice-shimmer 1.6s linear infinite; }
.voice-ui.is-transcribing .voice-stop { pointer-events: none; }
.voice-ui.is-transcribing .voice-stop-square { opacity: 0; transform: scale(0.4); }
.voice-ui.is-transcribing .voice-stop .voice-spinner { opacity: 1; }
@keyframes voice-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) {
  .voice-ui, .voice-btn { transition: none; }
  .voice-ui.is-transcribing .voice-status-text { animation: none; color: #aeaeb2; background: none; }
}

/* Zone de texte du coach : jamais de barre de défilement visible (elle grandit avec le texte) */
.coach-composer .coach-textarea { overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.coach-composer .coach-textarea.is-full { overflow-y: auto; }
.coach-composer .coach-textarea::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* --------------------------------------------------------------------------
   Séance guidée : décompte (l'anneau se vide avec le chiffre)
   -------------------------------------------------------------------------- */
.gs-ring-fill { transition: stroke 0.3s; } /* animé image par image : aucun retard */
.gs-ring.is-final .gs-ring-fill { stroke: #fff; }
.gs-big.is-beat { animation: gs-beat 0.5s var(--ease-out); }
@keyframes gs-beat {
  0% { transform: scale(1.22); opacity: 0.6; }
  100% { transform: none; opacity: 1; }
}

/* --------------------------------------------------------------------------
   Séance guidée : l'exercice. La vidéo garde son format d'origine (16:9, le coach
   entier, net) ; sous elle, en très grand, le nombre de répétitions ou le chrono.
   -------------------------------------------------------------------------- */
.gs-body.is-work .gs-title { font-size: clamp(24px, 6.6vw, 32px); margin-bottom: 10px; }
.gs-sets { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 16px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.58); }
.gs-sets-dots { display: inline-flex; gap: 5px; }
.gs-sets-dots i { width: 8px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.16); }
.gs-sets-dots i.is-done { background: #ff8a3d; }
.gs-sets-dots i.is-current { width: 22px; background: var(--grad-accent-bright); }
.gs-body.is-work .gs-title + .gs-media { margin-top: 6px; }

.gs-media { position: relative; flex-shrink: 0; width: min(100%, 440px); margin: 0 auto 18px; }
.gs-media::before { content: ""; position: absolute; inset: 18% 6% -10%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 106, 43, 0.2), transparent); }
.gs-media .demo-player.is-compact { width: 100%; max-height: none; margin: 0; border-radius: 22px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 18px 40px rgba(0, 0, 0, 0.45); }
.gs-media .demo-player.is-compact:not(.is-video) { width: min(66vw, 250px); margin: 0 auto; }
.gs-media.is-empty::before { display: none; }
.gs-media .demo-missing { margin: 0; }
.gs-ring.is-small { width: min(40vw, 158px); margin: 0 0 14px; }
.gs-ring.is-small .gs-big { font-size: clamp(40px, 12vw, 54px); }
.gs-ring.is-small .gs-ring-inner small { font-size: 11.5px; }

.gs-target { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0 0 16px; }
.gs-target b {
  font-family: var(--font-display);
  font-size: clamp(64px, 20vw, 88px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 38%, #ffb38a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gs-target span { margin-top: 5px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.gs-target.is-free span { margin: 0; font-size: 20px; letter-spacing: 0; text-transform: none; color: #fff; }

.gs-cue { display: flex; align-items: flex-start; gap: 8px; text-align: left; }
.gs-cue svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; opacity: 0.85; }
.gs-link { display: inline-flex; align-items: center; gap: 6px; }
.gs-link svg { width: 13px; height: 13px; }
.gs-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.gs-primary svg { width: 20px; height: 20px; }
.gs-end-badge { color: #fff; font-size: 0; }
.gs-end-badge svg { position: relative; width: 42px; height: 42px; }

/* Repos : carte « Ensuite » avec la petite vidéo de l'exercice qui arrive. */
.gs-next-card { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 400px; padding: 10px 14px 10px 10px; border-radius: 20px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); text-align: left; }
.gs-next-thumb { position: relative; flex-shrink: 0; width: 112px; aspect-ratio: 16 / 9; border-radius: 13px; overflow: hidden; background: #17171b; }
.gs-next-thumb .demo-player.is-compact { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; margin: 0; border-radius: 0; }
.gs-next-thumb .demo-badge { display: none; }
.gs-next-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gs-next-info small { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #7dd3fc; }
.gs-next-info strong { font-size: 16px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.gs-next-info span { font-size: 12.5px; font-weight: 700; color: rgba(255, 255, 255, 0.58); }

/* « C'est parti ! » : un signal, pas un bouton. Bords de l'écran qui s'embrasent, vidéo assombrie
   un instant, le mot qui claque en italique et deux traits de vitesse qui partent sur les côtés. */
.gs-go { position: absolute; left: 50%; top: 50%; z-index: 6; width: 0; height: 0; pointer-events: none; }
.gs-go-word {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(34px, 11vw, 48px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3), 0 0 24px rgba(255, 106, 43, 0.95), 0 8px 34px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%);
  animation: gs-go-word 1.3s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}
.gs-go-line { position: absolute; top: -1.5px; width: min(46vw, 230px); height: 3px; border-radius: 3px; animation: gs-go-line 0.95s 0.1s cubic-bezier(0.2, 0.9, 0.25, 1) both; }
.gs-go-line.is-left { right: 0; background: linear-gradient(270deg, #ffd08a, rgba(255, 106, 43, 0)); transform-origin: right center; }
.gs-go-line.is-right { left: 0; background: linear-gradient(90deg, #ffd08a, rgba(255, 106, 43, 0)); transform-origin: left center; }
.gs-media.is-go::after, .gs-target.is-go::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: 22px; background: rgba(8, 8, 12, 0.55); pointer-events: none; animation: gs-go-dim 1.3s ease-out both; }
.gs-target.is-go::after { display: none; }
/* Sans vidéo : le chiffre s’efface le temps du signal, puis revient. */
.gs-target.is-go > :not(.gs-go), .gs-ring.is-go .gs-ring-inner { animation: gs-go-hide 1.3s ease-out both; }
@keyframes gs-go-hide { 0% { opacity: 1; } 10% { opacity: 0; } 76% { opacity: 0; } 100% { opacity: 1; } }
.gs-go-edge { position: absolute; inset: 0; z-index: 20; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(255, 138, 61, 0.6), inset 0 0 80px rgba(255, 80, 40, 0.5); animation: gs-go-edge 1.2s ease-out both; }
@keyframes gs-go-word {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(0.95); }
  24% { transform: translate(-50%, -50%) scale(1); }
  74% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-28%, -50%) skewX(-14deg) scale(1.05); }
}
@keyframes gs-go-line {
  0% { opacity: 0; transform: scaleX(0); }
  30% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1.3); }
}
@keyframes gs-go-dim { 0% { opacity: 0; } 14% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes gs-go-edge { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .gs-go-word { animation: gs-go-dim 1.3s linear both; }
  .gs-go-line, .gs-go-edge { display: none; }
}

/* --------------------------------------------------------------------------
   Questionnaire
   -------------------------------------------------------------------------- */
.field-help {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  line-height: 1.45;
  text-transform: none;
  letter-spacing: normal;
}
.weight-row { align-items: start; }

/* Lieu d'entraînement : maison / salle / les deux */
.place-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.place-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 8px 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-hairline-strong);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.15s var(--ease-spring);
}
.place-card svg { width: 28px; height: 28px; stroke: currentColor; }
.place-card small { font-family: var(--font-text); font-size: 11.5px; font-weight: 500; color: var(--color-text-tertiary); }
.place-card:active { transform: scale(0.97); }
.place-card.is-selected { background: var(--color-ink); border-color: var(--color-ink); color: #fff; box-shadow: 0 6px 16px rgba(12, 12, 18, 0.18); }
.place-card.is-selected small { color: rgba(255, 255, 255, 0.65); }
.place-choice.shake { animation: shake 0.5s var(--ease-smooth); }
html[data-theme="dark"] .place-card.is-selected { background: #f2f2f6; border-color: #f2f2f6; color: #0c0c12; }
html[data-theme="dark"] .place-card.is-selected small { color: rgba(12, 12, 18, 0.6); }
@media (max-width: 360px) {
  .place-choice { grid-template-columns: 1fr; }
  .place-card { flex-direction: row; justify-content: flex-start; text-align: left; }
}

/* --------------------------------------------------------------------------
   Barre de navigation à 6 onglets : tout tient sur un téléphone
   -------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .island-tab { padding: 0 10px; gap: 5px; }
  .island-tab.is-active .island-tab-label { max-width: 72px; }
}
@media (max-width: 374px) {
  .island-tab { padding: 0 8px; gap: 4px; }
  .island-tab.is-active .island-tab-label { max-width: 64px; }
}
@media (max-width: 340px) {
  .island-tab.is-active .island-tab-label { max-width: 0; opacity: 0; }
}

/* --------------------------------------------------------------------------
   Onglet Défis : ta flamme en tête
   -------------------------------------------------------------------------- */
.defis-flame {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-ink);
  color: var(--color-text-on-dark);
  box-shadow: 0 18px 40px rgba(12, 12, 18, 0.24);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
}
.defis-flame::before {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  top: -120px;
  left: -60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 106, 43, 0.45), transparent 68%);
  z-index: -1;
}
.defis-flame-art { flex-shrink: 0; width: 76px; display: flex; justify-content: center; }
.defis-flame-body { min-width: 0; flex: 1; }
.defis-flame-count { font-family: var(--font-display); font-size: 34px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.defis-flame-count small { font-size: 14px; font-weight: 700; color: var(--color-text-on-dark-2); margin-left: 4px; }
.defis-flame-name { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #ffb37a; margin-top: 6px; }
.defis-flame-next { font-size: 13px; color: var(--color-text-on-dark-2); margin-top: 6px; line-height: 1.45; }
.defis-flame .mini-track { background: rgba(255, 255, 255, 0.12); margin-top: 10px; }
.defis-flame .mini-fill { background: var(--grad-accent-bright); }
html[data-theme="dark"] .defis-flame { box-shadow: 0 0 0 1px var(--color-hairline-strong), var(--shadow-card); }
/* Les titres des blocs suivants gardent leur espace (ils sont « premiers » dans leur conteneur) */
.defis-block > .section-title:first-child,
.defis-block > .section-head:first-child { margin-top: var(--space-6); }

/* --------------------------------------------------------------------------
   Agenda : chaque jour est une ligne compacte (jour, séance, durée) qui se
   déplie d'un toucher. La séance du jour (ou la prochaine) est ouverte.
   -------------------------------------------------------------------------- */
.workout-day-card { padding: 0; overflow: hidden; }
.workout-day-head {
  width: 100%;
  margin: 0;
  padding: 14px var(--space-4);
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.workout-day-head:focus-visible { outline: 2px solid var(--color-accent-bright); outline-offset: -2px; border-radius: var(--radius-lg); }
.workout-day-title { display: block; flex: 1 1 auto; min-width: 0; }
.workout-day-name, .workout-day-focus { display: block; }
.workout-day-focus { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workout-day-badges { flex-shrink: 0; }
.workout-day-chevron { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-text-secondary); transition: transform 0.28s var(--ease-out); }
.workout-day-card.is-open .workout-day-chevron { transform: rotate(180deg); }
.workout-day-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease-out); }
.workout-day-card.is-open .workout-day-body { grid-template-rows: 1fr; }
.workout-day-inner { min-height: 0; overflow: hidden; padding: 0 var(--space-4); opacity: 0; transition: opacity 0.2s, padding 0.3s var(--ease-out); }
.workout-day-card.is-open .workout-day-inner { opacity: 1; padding-bottom: var(--space-4); }
.workout-day-head:active .workout-day-chevron { transform: scale(0.9); }
.workout-day-card.is-open .workout-day-head:active .workout-day-chevron { transform: rotate(180deg) scale(0.9); }
@media (prefers-reduced-motion: reduce) {
  .workout-day-body, .workout-day-inner, .workout-day-chevron { transition: none; }
}

/* --------------------------------------------------------------------------
   Fin de séance : choix en « île » (même langage que la barre de navigation) —
   piste sombre, la réponse choisie devient une pastille blanche. La liste des
   exercices faits / passés suit le même style.
   -------------------------------------------------------------------------- */
.session-sheet .form-label { margin-top: 18px; }
.session-sheet .segmented {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 4px;
  padding: 5px;
  border-radius: 22px;
  background: #101016;
}
.session-sheet .segmented-option {
  min-height: 50px;
  border: 0;
  border-radius: 17px;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  transition: background 0.25s var(--ease-out), color 0.25s, box-shadow 0.25s, transform 0.15s var(--ease-spring);
}
.session-sheet .segmented-option small { color: rgba(255, 255, 255, 0.5); }
.session-sheet .segmented-option.is-selected { background: #fff; color: #0c0c12; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28); }
.session-sheet .segmented-option.is-selected small { color: rgba(12, 12, 18, 0.6); }
html[data-theme="dark"] .session-sheet .segmented,
html[data-theme="dark"] .ex-island { background: #000; box-shadow: 0 0 0 1px var(--color-hairline-strong); }

.session-measured { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.session-measured div { padding: 12px 14px; border-radius: 16px; background: var(--color-card-alt); }
.session-measured strong { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.session-measured span { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.session-estimate { display: flex; align-items: flex-start; gap: 7px; margin: -2px 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--color-text-secondary); }
.session-estimate .spinner { width: 13px; height: 13px; border-width: 2px; flex-shrink: 0; margin-top: 2px; }
.session-estimate-icon { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; color: var(--color-accent); }

.ex-island { margin-top: 2px; padding: 6px; border-radius: 24px; background: #101016; color: #fff; }
.ex-island-head { display: flex; align-items: flex-start; gap: 10px; padding: 10px 10px 10px 12px; }
.ex-island-lead { flex: 1; margin: 0; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, 0.72); }
.ex-island-lead strong { color: #fff; }
.ex-island-count { flex-shrink: 0; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ex-island-list { display: flex; flex-direction: column; gap: 4px; }
.ex-island-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 10px 14px 10px 12px;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.25s var(--ease-out), color 0.25s, transform 0.15s var(--ease-spring);
}
.ex-island-item:active { transform: scale(0.98); }
.ex-island-item:focus-visible { outline: 2px solid var(--color-accent-bright); outline-offset: 2px; }
.ex-island-item.is-on { background: #fff; color: #0c0c12; }
.ex-island-check {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28);
  transition: background 0.25s, box-shadow 0.25s;
}
.ex-island-check svg { width: 14px; height: 14px; color: #fff; opacity: 0; transform: scale(0.4); transition: opacity 0.2s, transform 0.3s var(--ease-spring); }
.ex-island-item.is-on .ex-island-check { background: var(--color-accent); box-shadow: none; }
.ex-island-item.is-on .ex-island-check svg { opacity: 1; transform: none; }
.ex-island-name { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.ex-island-meta { flex-shrink: 0; font-size: 12px; font-weight: 600; opacity: 0.7; white-space: nowrap; }
.ex-island-tag { flex-shrink: 0; padding: 3px 8px; border-radius: 999px; background: rgba(255, 138, 61, 0.16); color: #ffb37a; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.ex-island-item.is-on .ex-island-tag { background: rgba(207, 58, 12, 0.1); color: var(--color-accent); }
[data-picker-wrap] { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) {
  .ex-island-item, .ex-island-check, .ex-island-check svg, .session-sheet .segmented-option { transition: none; }
}
.session-sheet .segmented-option { padding: 8px 3px; font-size: 12.5px; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.session-sheet .segmented-option small { font-size: 10.5px; }

/* --------------------------------------------------------------------------
   Coach : conversations (nouvelle conversation, historique)
   -------------------------------------------------------------------------- */
.coach-tool-btn.coach-tool-saved { right: 98px; }
.coach-tool-btn svg { stroke: none; }
.coach-tool-btn svg path { stroke: #fff; }
.chat-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px auto 10px;
  padding: 6px 6px 6px 14px;
  width: max-content;
  max-width: 100%;
  border-radius: 999px;
  background: var(--color-card-alt);
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
}
.chat-note button { padding: 5px 11px; border-radius: 999px; background: var(--color-text); color: var(--color-bg); font-size: 12px; font-weight: 700; }

/* --------------------------------------------------------------------------
   Réglages rapides en bas des onglets (Agenda, Corps, Nutrition) et rappels
   proposés sur l'accueil : discrets, une rangée qui défile si besoin.
   -------------------------------------------------------------------------- */
.quick-settings { margin-top: var(--space-6); }
.quick-settings-title { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--color-text-secondary); }
.quick-settings-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(var(--space-4) * -1);
  padding: 2px var(--space-4) 4px;
  scroll-snap-type: x proximity;
}
.quick-settings-row::-webkit-scrollbar { display: none; }
.quick-setting {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 240px;
  padding: 10px 14px 10px 10px;
  border-radius: 16px;
  background: var(--color-card);
  box-shadow: 0 0 0 1px var(--color-hairline);
  color: var(--color-text);
  text-align: left;
  scroll-snap-align: start;
  transition: transform 0.15s var(--ease-spring);
}
.quick-setting:active { transform: scale(0.97); }
.quick-setting-icon { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 11px; background: var(--color-card-alt); color: var(--color-text); }
.quick-setting-icon svg { width: 18px; height: 18px; }
.quick-setting-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.quick-setting-text strong { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.quick-setting-text small { font-size: 12px; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick-reminders {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 12px 10px 12px 12px;
  border-radius: var(--radius-md);
  background: var(--color-card);
  box-shadow: 0 0 0 1px var(--color-hairline);
  transition: opacity 0.25s, transform 0.25s var(--ease-out);
}
.quick-reminders .quick-setting-text { flex: 1; }
.quick-reminders .quick-setting-text strong, .quick-reminders .quick-setting-text small { white-space: normal; }
.quick-reminders.is-leaving { opacity: 0; transform: translateY(-4px); }
.quick-reminders-close { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; color: var(--color-text-secondary); background: none; }
.quick-reminders-close svg { width: 15px; height: 15px; }
.inline-link { padding: 0; background: none; color: var(--color-accent); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   Pictogrammes monochromes (à la place des émojis) — js/icons.js
   -------------------------------------------------------------------------- */
.ico { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -0.2em; }
.ico-inline { width: 14px; height: 14px; margin-right: 5px; opacity: 0.7; vertical-align: -2px; }
.badge-ico { display: inline-flex; align-items: center; gap: 4px; }
.badge-ico .ico { width: 13px; height: 13px; }
.period-waist, .msg-adjustment, .mj-tip, .glass-footnote-ico { display: flex; align-items: flex-start; gap: 8px; }
.period-waist .ico, .report-tip .ico, .msg-adjustment .ico, .mj-tip .ico, .glass-footnote-ico .ico { width: 16px; height: 16px; margin-top: 1px; }
.guided-start-icon { color: #fff; padding-left: 0; }
.guided-start-icon .ico { width: 16px; height: 16px; margin-left: 2px; }
.goal-lock-badge .ico { width: 20px; height: 20px; }
.goal-lock-note { display: flex; align-items: center; justify-content: center; gap: 6px; }
.goal-lock-note .ico { width: 15px; height: 15px; }
.share-pick-icon { display: grid; place-items: center; color: var(--color-accent); }
.share-pick-icon .ico { width: 20px; height: 20px; }
.recap-trophies .ico { width: 17px; height: 17px; margin-top: 1px; }
.challenge-emoji { color: var(--color-accent); }
.challenge-emoji .ico { width: 20px; height: 20px; }
.challenge-emoji.is-done { color: var(--color-green-dark); }
.announce-emoji { color: var(--color-text); }
.announce-emoji .ico { width: 22px; height: 22px; }
.demo-missing span .ico { width: 24px; height: 24px; opacity: 0.6; }
.team-rank { font-size: 14px; font-variant-numeric: tabular-nums; }
.team-rank.is-podium { display: inline-grid; place-items: center; width: 26px; height: 26px; margin: 0 auto; border-radius: 50%; color: #1c1206; font-size: 13px; }
.team-rank.is-1 { background: linear-gradient(145deg, #f6d77a, #d4a531); }
.team-rank.is-2 { background: linear-gradient(145deg, #e9ebef, #b8bec8); }
.team-rank.is-3 { background: linear-gradient(145deg, #eab894, #b8794c); }
.team-stat { display: inline-flex; align-items: center; gap: 4px; }
.team-stat .ico { width: 14px; height: 14px; opacity: 0.7; }
.lang-switch { display: inline-flex; align-items: center; gap: 6px; }
.lang-switch .ico { width: 15px; height: 15px; }
.lang-switch .ico:last-child { width: 13px; height: 13px; opacity: 0.6; }

/* Même langage « île » pour le choix du lieu, le matériel et les jours d'entraînement. */
.island-form .segmented {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 4px;
  padding: 5px;
  border-radius: 22px;
  background: #101016;
}
.island-form .segmented-option { min-height: 46px; border: 0; border-radius: 17px; background: transparent; color: rgba(255, 255, 255, 0.78); transition: background 0.25s var(--ease-out), color 0.25s, box-shadow 0.25s; }
.island-form .segmented-option.is-selected { background: #fff; color: #0c0c12; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28); }
.island-form .eq-tags-host { padding: 8px; border-radius: 22px; background: #101016; min-height: 56px; align-items: center; }
.island-form .eq-tags-host .glass-footnote { margin: 0 8px; color: rgba(255, 255, 255, 0.6); }
.island-form .eq-tag { background: rgba(255, 255, 255, 0.1); border: 0; color: #fff; }
.island-form .eq-tag.is-new { box-shadow: inset 0 0 0 2px #34c759; }
.island-form .eq-tag-remove { background: rgba(255, 255, 255, 0.14); color: #fff; }
.day-pills.is-island { padding: 6px; border-radius: 24px; background: #101016; gap: 4px; }
.day-pills.is-island .day-pill { border: 0; color: rgba(255, 255, 255, 0.7); background: transparent; transition: background 0.25s var(--ease-out), color 0.25s; }
.day-pills.is-island .day-pill.is-active { background: #fff; color: #0c0c12; }
html[data-theme="dark"] .island-form .segmented,
html[data-theme="dark"] .island-form .eq-tags-host,
html[data-theme="dark"] .day-pills.is-island { background: #000; box-shadow: 0 0 0 1px var(--color-hairline-strong); }

/* Bouton Coach Midas : noir mat cerclé d'un fin dégradé indigo → violet → rose (repris du design Apple). */
.coach-fab {
  border: 1.5px solid transparent;
  background: linear-gradient(#1d1d1f, #1d1d1f) padding-box, linear-gradient(120deg, #5e5ce6 0%, #a259f5 52%, #ff375f 100%) border-box;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.coach-fab:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24); }
.coach-fab::before { border-color: rgba(29, 29, 31, 0.35); }
.coach-fab-dot { background: #34c759; }
html[data-theme="dark"] .coach-fab {
  background: linear-gradient(#121214, #121214) padding-box, linear-gradient(120deg, #5e5ce6 0%, #a259f5 52%, #ff375f 100%) border-box;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.14);
}
html[data-theme="dark"] .coach-fab::before { border-color: rgba(255, 255, 255, 0.2); }

/* Barre d'onglets du bas : verre clair, l'onglet actif est une pastille NOIR MAT avec l'icône et
   le nom en blanc (repris du design Apple). */
.dynamic-island { background: rgba(249, 249, 251, 0.8); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.08); }
.island-tab { color: rgba(60, 60, 67, 0.75); }
.island-indicator { background: #1d1d1f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 14px rgba(162, 89, 245, 0.25); }
.island-tab.is-active { color: #ffffff; }
.dynamic-island.is-dragging .island-indicator { background: #1d1d1f; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.dynamic-island.is-dragging .island-tab { color: rgba(60, 60, 67, 0.6); }
.dynamic-island.is-dragging .island-tab.is-hover { color: #ffffff; }
.island-badge { background: #ff3b30; }
html[data-theme="dark"] .dynamic-island { background: rgba(72, 72, 74, 0.72); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.12); }
html[data-theme="dark"] .island-tab { color: rgba(235, 235, 245, 0.7); }
html[data-theme="dark"] .island-indicator,
html[data-theme="dark"] .dynamic-island.is-dragging .island-indicator { background: #121214; }
html[data-theme="dark"] .dynamic-island.is-dragging .island-tab { color: rgba(235, 235, 245, 0.55); }

/* Historique de l'agenda (mois et année) : sobre comme sur le design Apple — séances faites en noir
   mat (blanc en sombre), petits points neutres, compteurs et séances de l'année en bleu. */
.calendar-day.is-workout { background: #1d1d1f; color: #ffffff; box-shadow: none; }
.calendar-day.is-planned::after { background: #1d1d1f; }
.calendar-day.is-today { box-shadow: inset 0 0 0 2px #1d1d1f; }
.year-month.is-current { box-shadow: inset 0 0 0 2px #1d1d1f; }
.year-month-name span { color: #0066cc; }
.year-dot.is-workout { background: #0066cc; }
.year-dot.is-today { box-shadow: 0 0 0 1.5px #1d1d1f; }
html[data-theme="dark"] .calendar-day.is-workout { background: #f5f5f7; color: #1d1d1f; }
html[data-theme="dark"] .calendar-day.is-planned::after { background: #f5f5f7; }
html[data-theme="dark"] .calendar-day.is-today { box-shadow: inset 0 0 0 2px rgba(235, 235, 245, 0.35); }
html[data-theme="dark"] .year-month.is-current { box-shadow: inset 0 0 0 2px #f5f5f7; }
html[data-theme="dark"] .year-month-name span { color: #4da3ff; }
html[data-theme="dark"] .year-dot.is-workout { background: #4da3ff; }
html[data-theme="dark"] .year-dot.is-today { box-shadow: 0 0 0 1.5px #f5f5f7; }

/* Pictogrammes : tuile colorée (notifications) et icônes dans les boutons. */
.ico-tile { display: inline-grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 9px; background: rgba(255, 255, 255, 0.12); color: #fff; }
.ico-tile .ico { width: 16px; height: 16px; }
.ico-tile.tone-accent { background: rgba(255, 106, 43, 0.2); color: #ff9a5c; }
.ico-tile.tone-gold { background: rgba(246, 196, 83, 0.2); color: #f6c453; }
.ico-tile.tone-green { background: rgba(52, 199, 89, 0.2); color: #4ade80; }
.ico-tile.tone-red { background: rgba(248, 113, 113, 0.2); color: #f87171; }
.ico-tile.tone-blue { background: rgba(125, 211, 252, 0.18); color: #7dd3fc; }
.btn-ico { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-ico .ico, .claim-btn .ico { width: 17px; height: 17px; }
.claim-btn .ico, .theme-option > .ico, .inline-ico .ico, .challenge-foot .ico, .family-progress-text .ico, .photo-add-btn .ico { margin-right: 6px; vertical-align: -3px; }
.inline-ico { display: inline-flex; align-items: center; }
.theme-option > .ico { width: 16px; height: 16px; }
.challenge-foot .ico { width: 16px; height: 16px; color: var(--color-reward); }
.family-progress-text .ico { width: 14px; height: 14px; color: var(--color-reward); }

/* Liste de courses en « île » : on coche ce qui est dans le panier (ligne grisée, rayée). */
.shop-island { padding: 5px; }
.shop-island .ex-island-item { cursor: pointer; color: #fff; min-height: 50px; }
.shop-island .ex-island-item.is-on { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.42); }
.shop-island .ex-island-item.is-on .ex-island-name { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.shop-island .ex-island-item.is-on .ex-island-check { background: #34c759; }
.shop-island .ex-island-item:has(input:focus-visible) { outline: 2px solid var(--color-accent-bright); outline-offset: 2px; }
.shop-category .shop-island { margin-top: 6px; }

/* Choix du cheat meal : même île, l'idée choisie devient la pastille blanche. */
.cheat-island .ex-island-item { color: #fff; }
.cheat-island .ex-island-check { box-shadow: none; background: rgba(246, 196, 83, 0.18); color: #f6c453; }
.cheat-island .ex-island-check svg { opacity: 1; transform: none; color: currentColor; }
.cheat-island .ex-island-item.is-on { background: #fff; color: #0c0c12; }
.cheat-island .ex-island-item.is-on .ex-island-check { background: var(--color-reward, #d4a531); color: #fff; }
.cheat-island .ex-island-item.is-dimmed { opacity: 0.4; }
.cheat-island .ex-island-item:disabled { cursor: default; }
/* Sexe (mensurations) : même piste sombre que les autres choix. */
.segmented.island-segmented { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 4px; padding: 5px; border-radius: 22px; background: #101016; }
.segmented.island-segmented .segmented-option { min-height: 46px; border: 0; border-radius: 17px; background: transparent; color: rgba(255, 255, 255, 0.78); }
.segmented.island-segmented .segmented-option.is-selected { background: #fff; color: #0c0c12; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28); }
html[data-theme="dark"] .segmented.island-segmented { background: #000; box-shadow: 0 0 0 1px var(--color-hairline-strong); }

/* Volet des conversations : glisse depuis la droite, par-dessus le coach (téléphone et ordinateur). */
.coach-drawer-layer { position: absolute; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; }
.coach-drawer-layer.is-open { pointer-events: auto; }
.coach-drawer-scrim { position: absolute; inset: 0; background: rgba(12, 12, 18, 0.32); opacity: 0; transition: opacity 0.3s; }
.coach-drawer-layer.is-open .coach-drawer-scrim { opacity: 1; }
.coach-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86%, 340px);
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border-top-left-radius: 22px;
  box-shadow: -12px 0 32px rgba(12, 12, 18, 0.18);
  transform: translateX(100%);
  transition: transform 0.34s var(--ease-out);
}
.coach-drawer-layer.is-open .coach-drawer { transform: none; }
.coach-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 16px 14px 10px 18px; }
.coach-drawer-title { font-family: var(--font-display); font-size: 16px; font-weight: 800; }
.coach-drawer-sub { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.coach-drawer-x { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--color-card-alt); color: var(--color-text); }
.coach-drawer-x .ico { width: 16px; height: 16px; transform: rotate(-90deg); }
.coach-drawer-body { flex: 1; overflow-y: auto; padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.coach-drawer-warn { margin: 0 0 4px; padding: 10px 12px; border-radius: 14px; background: var(--color-accent-tint); color: var(--color-accent); font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.coach-drawer-foot { margin: 0; padding: 10px 16px calc(12px + var(--safe-bottom, 0px)); font-size: 11.5px; line-height: 1.4; color: var(--color-text-tertiary); border-top: 1px solid var(--color-hairline); }
.saved-conv { display: flex; align-items: stretch; border-radius: 18px; background: var(--color-card); box-shadow: 0 0 0 1px var(--color-hairline); overflow: hidden; }
.saved-conv.is-current { box-shadow: 0 0 0 2px var(--color-coach); }
.saved-conv-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 12px 6px 12px 12px; background: none; color: var(--color-text); text-align: left; }
.saved-conv-icon { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 11px; background: rgba(91, 75, 219, 0.12); color: var(--color-coach); }
.saved-conv-icon .ico { width: 17px; height: 17px; }
.saved-conv-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.saved-conv-text strong { font-size: 13.5px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.saved-conv-text small { font-size: 11.5px; color: var(--color-text-secondary); }
.saved-conv-delete { display: grid; place-items: center; width: 44px; flex-shrink: 0; background: none; color: var(--color-text-tertiary); }
.saved-conv-delete .ico { width: 17px; height: 17px; }
.saved-conv-delete:active { color: var(--color-red, #d92d20); }
.coach-drawer-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 12px; text-align: center; }
.coach-drawer-empty p { margin: 6px 0 0; font-size: 14px; font-weight: 700; }
.coach-drawer-empty small { font-size: 12.5px; line-height: 1.45; color: var(--color-text-secondary); }
@media (prefers-reduced-motion: reduce) { .coach-drawer, .coach-drawer-scrim { transition: none; } }

/* --------------------------------------------------------------------------
   Mes données & confidentialité (cookies, consentements)
   -------------------------------------------------------------------------- */
.privacy-banner { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: 14px; border-radius: 16px; background: var(--color-green-tint, rgba(52, 199, 89, 0.12)); color: var(--color-green-dark, #1f7a3a); font-size: 13px; font-weight: 600; line-height: 1.45; }
.privacy-banner .ico { width: 18px; height: 18px; margin-top: 1px; }
.privacy-table { display: flex; flex-direction: column; border-radius: 16px; background: var(--color-card-alt); overflow: hidden; }
.privacy-row { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 11px 14px; }
.privacy-row + .privacy-row { border-top: 1px solid var(--color-hairline); }
.privacy-row strong { font-size: 13.5px; }
.privacy-row span { font-size: 12.5px; color: var(--color-text-secondary); }
.privacy-row small { font-size: 11.5px; color: var(--color-text-tertiary); }
.privacy-danger { width: 100%; margin-top: 8px; color: var(--color-red, #d92d20); font-weight: 700; }
.privacy-link { display: inline-block; margin-top: 10px; color: var(--color-accent); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.consent-card { padding: 14px; margin-bottom: 10px; border-radius: 18px; background: var(--color-card-alt); }
.consent-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.consent-head .ico { width: 18px; height: 18px; color: var(--color-text-secondary); }
.consent-head strong { flex: 1; font-size: 14px; }
.consent-state { flex-shrink: 0; padding: 3px 9px; border-radius: 999px; background: rgba(217, 45, 32, 0.1); color: var(--color-red, #d92d20); font-size: 11px; font-weight: 800; }
.consent-state.is-on { background: rgba(52, 199, 89, 0.14); color: var(--color-green-dark, #1f7a3a); }
.consent-card p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); }
.consent-card .btn { margin-top: 2px; }
.consent-memory { margin: 0 0 12px; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.consent-memory li + li { margin-top: 4px; }

/* Agenda : deux colonnes indépendantes sur grand écran (plus de trou sous une séance courte). */
.workout-grid { display: flex; flex-direction: column; }
.workout-col { display: contents; }
@media (min-width: 1024px) {
  .workout-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
  .workout-col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
  .workout-col .workout-day-card { margin-bottom: 0; }
}

/* ===== Appareils autorisés (Paramètres → Mes appareils, écran « Trop d'appareils ») ===== */
.device-gate-hero { display: flex; justify-content: center; gap: 10px; margin: 2px 0 14px; color: var(--color-text); }
.device-gate-hero svg { width: 52px; height: 52px; padding: 12px; border-radius: 18px; background: var(--color-card-alt); border: 1px solid var(--color-hairline); }
.device-list { display: grid; gap: 8px; margin: 12px 0 8px; }
.device-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: var(--color-card-alt); border: 1px solid var(--color-hairline); }
.device-item.is-current { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-tint); }
.device-icon { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 13px; background: var(--color-bg); color: var(--color-text); }
.device-icon svg { width: 22px; height: 22px; }
.device-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.device-text strong { font-size: 14.5px; font-weight: 800; line-height: 1.25; }
.device-text small { font-size: 12px; color: var(--color-text-secondary); line-height: 1.3; }
.device-badge { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: var(--radius-pill, 999px); font-size: 10.5px; font-weight: 800; background: var(--color-accent); color: #fff; vertical-align: 1px; }
.btn.device-remove { width: auto; min-height: 38px; padding: 0 14px; font-size: 13px; flex-shrink: 0; }
.device-quota { font-size: 12.5px; font-weight: 700; color: var(--color-text-secondary); text-align: center; margin: 8px 0 4px; }
.device-plus-hint { text-align: center; }
.device-gate-logout { display: block; width: 100%; text-align: center; margin-top: 12px; }

/* Pendant l'écran « Trop d'appareils », rien d'autre n'est utilisable */
body.device-locked #coachFab, body.device-locked .dynamic-island { display: none !important; }

/* ===== Parrainage : la page à partager aux amis (anneau animé, étapes, ticket, partage direct) ===== */
.ref-hero { text-align: center; padding: 2px 0 4px; }
.ref-ring { position: relative; width: 150px; height: 150px; margin: 2px auto 10px; }
.ref-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ref-ring-track { fill: none; stroke: var(--color-card-alt); stroke-width: 10; }
.ref-ring-fill { fill: none; stroke: url(#refGrad); stroke-width: 10; stroke-linecap: round; stroke-dasharray: var(--ref-c); stroke-dashoffset: var(--ref-c); animation: refRing 1.4s 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes refRing { to { stroke-dashoffset: var(--ref-off); } }
.ref-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.ref-ring-center .ico { width: 36px; height: 36px; color: #e9a400; animation: refFloat 3s ease-in-out infinite; }
.ref-ring-center strong { font-size: 20px; font-weight: 900; letter-spacing: -0.01em; }
.ref-spark { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle, #ffe08a 0%, #ff8a3d 70%); opacity: 0; animation: refSpark 2.8s ease-in-out infinite; }
.ref-spark.s1 { top: 6%; left: 10%; }
.ref-spark.s2 { top: 18%; right: 2%; animation-delay: 0.7s; }
.ref-spark.s3 { bottom: 14%; left: 0; animation-delay: 1.4s; width: 7px; height: 7px; }
.ref-spark.s4 { bottom: 4%; right: 14%; animation-delay: 2.1s; }
@keyframes refSpark { 0% { opacity: 0; transform: scale(0.4) translateY(6px); } 30% { opacity: 1; } 65% { opacity: 0.9; transform: scale(1) translateY(-8px); } 100% { opacity: 0; transform: scale(0.4) translateY(-16px); } }
@keyframes refFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.ref-title { font-size: 19px; font-weight: 900; margin: 4px 0 4px; letter-spacing: -0.01em; }
.ref-sub { font-size: 13.5px; color: var(--color-text-secondary); margin: 0 0 14px; }

.ref-steps { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.ref-steps li { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--color-card-alt); border: 1px solid var(--color-hairline); opacity: 0; transform: translateY(10px); animation: refUp 0.5s calc(0.35s + var(--i) * 0.12s) cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.ref-steps li strong { display: block; font-size: 14px; font-weight: 800; }
.ref-steps li small { display: block; font-size: 12px; color: var(--color-text-secondary); line-height: 1.35; }
.ref-step-ico { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, #ffe08a, #ff9a57); color: #5a2a00; }
.ref-step-ico .ico { width: 20px; height: 20px; }
@keyframes refUp { to { opacity: 1; transform: none; } }

.ref-ticket { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; margin-bottom: 12px; border-radius: 18px; border: 2px dashed var(--color-hairline-strong); background: var(--color-card); overflow: hidden; }
.ref-ticket::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%); transform: translateX(-100%); animation: refShine 3.6s 1.4s ease-in-out infinite; }
@keyframes refShine { 0% { transform: translateX(-100%); } 45%, 100% { transform: translateX(100%); } }
.ref-ticket-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); max-width: 52px; line-height: 1.2; }
.ref-ticket-code { flex: 1; min-width: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 25px; font-weight: 900; letter-spacing: 0.12em; }
.ref-ticket-code span { display: inline-block; opacity: 0; transform: translateY(8px) scale(0.9); animation: refUp 0.4s calc(0.6s + var(--i) * 0.06s) forwards; }
.ref-copy { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; flex-shrink: 0; border: 0; border-radius: var(--radius-pill, 999px); background: var(--color-text); color: var(--color-bg); font-size: 13px; font-weight: 800; cursor: pointer; transition: transform 0.15s var(--ease-spring, ease), background 0.2s; }
.ref-copy:active { transform: scale(0.94); }
.ref-copy.is-done { background: var(--color-green); color: #fff; }
.ref-copy .ico { width: 16px; height: 16px; }

.ref-share-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.ref-share { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: 16px; background: var(--color-card-alt); border: 1px solid var(--color-hairline); color: var(--color-text); font: inherit; font-size: 12px; font-weight: 800; text-decoration: none; cursor: pointer; transition: transform 0.15s var(--ease-spring, ease), border-color 0.2s; }
.ref-share:hover { border-color: var(--color-text); }
.ref-share:active { transform: scale(0.94); }
.ref-share .ico { width: 22px; height: 22px; }
.ref-share.is-wa .ico { color: #25d366; }
.ref-preview { padding: 12px 14px; margin-bottom: 8px; border-radius: 18px 18px 18px 4px; background: var(--color-accent-tint); }
.ref-preview-label { display: block; margin-bottom: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-secondary); }
.ref-preview p { margin: 0; font-size: 13px; line-height: 1.45; white-space: pre-line; }

@media (prefers-reduced-motion: reduce) {
  .ref-ring-fill { animation: none; stroke-dashoffset: var(--ref-off); }
  .ref-steps li, .ref-ticket-code span { animation: none; opacity: 1; transform: none; }
  .ref-ticket::after, .ref-spark { display: none; }
  .ref-ring-center .ico { animation: none; }
}

/* ===== Coach Midas : barre d'outils groupée (enregistrer, conversations, nouvelle, fermer) ===== */
.coach-toolbar {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  display: flex; flex-direction: row-reverse; align-items: center; gap: 2px; padding: 3px;
  border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(10, 10, 12, 0.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.coach-toolbar > button.coach-close-overlay {
  position: relative; top: auto; right: auto; width: 32px; height: 32px;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: transform 0.15s var(--ease-spring), background 0.2s;
}
.coach-toolbar > button.coach-close-overlay:hover { background: rgba(255, 255, 255, 0.12); }
.coach-toolbar > #coachCloseBtn { margin-left: 6px; }
.coach-toolbar > #coachCloseBtn::before { content: ""; position: absolute; left: -4px; top: 8px; bottom: 8px; width: 1px; background: rgba(255, 255, 255, 0.22); }


/* ===== Coach Midas sur téléphone et tablette : écran immersif =====
   Avant, l'écran était partagé : grand portrait = petite conversation, et l'inverse.
   Maintenant le coach occupe tout l'écran, en grand, et la conversation s'affiche par-dessus
   (bulles fumées). Les anciens messages s'effacent en remontant, avant d'atteindre son visage. */
@media (max-width: 1023px) {
  .coach-panel { height: 100dvh; border-radius: 0; background: #0c0c12; isolation: isolate; }
  /* Petits téléphones : outils un peu plus serrés, pour que rien ne touche la flèche */
  @media (max-width: 370px) { .coach-toolbar > button.coach-close-overlay { width: 30px; height: 30px; } }

  /* Portrait plein écran, derrière tout le reste */
  .coach-avatar-stage { position: absolute; inset: 0; height: auto; z-index: 0; border-radius: 0; background: #0c0c12; }
  .coach-avatar-stage::before { display: none; }
  .coach-avatar-stage img { object-fit: cover; object-position: center top; padding: 0; filter: none; }
  /* Voiles : lisibilité de l'en-tête (en haut) et de la conversation (en bas) */
  .coach-avatar-stage::after {
    z-index: 2;
    background:
      linear-gradient(to bottom, rgba(8, 8, 12, 0.6) 0, rgba(8, 8, 12, 0) 160px),
      linear-gradient(to top, rgba(8, 8, 12, 0.92) 0%, rgba(8, 8, 12, 0.6) 32%, rgba(8, 8, 12, 0) 60%);
  }

  /* Barre du haut : « Émotions » à gauche, outils à droite */
  .gallery-open-btn { top: 14px; left: 14px; z-index: 4; gap: 6px; padding: 4px 11px 4px 4px; }
  .gallery-open-btn svg { width: 24px; height: 24px; padding: 4px; }
  .gallery-open-text b { font-size: 11.5px; }
  .gallery-open-text small { font-size: 10px; }
  .coach-toolbar { top: 14px; z-index: 4; }

  /* Identité à gauche du visage, humeur à droite */
  .coach-stage-overlay {
    top: 62px; bottom: auto; z-index: 3;
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    padding: 0 var(--space-4); background: none;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
  }
  .coach-stage-id { min-width: 0; max-width: 44%; }
  .coach-stage-name { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 7px; font-size: 20px; line-height: 1.1; }
  .coach-ai-tag { margin-left: 0; padding: 2px 7px; font-size: 10px; background: rgba(255, 255, 255, 0.18); text-shadow: none; }
  .coach-stage-status { flex-wrap: wrap; margin-top: 6px; font-size: 12px; row-gap: 2px; }
  .coach-bond { flex-basis: 100%; margin-left: 0; padding: 0; background: none; font-size: 12px; }
  .coach-mood { margin-top: 0; flex-shrink: 0; padding: 5px 9px; text-shadow: none; }
  .coach-stage-caption { display: none; }

  /* Conversation par-dessus le coach : elle commence sous son visage et s'efface vers le haut */
  .coach-messages {
    position: relative; z-index: 3;
    margin-top: max(200px, 30dvh);
    padding: 14px var(--space-4) 8px;
    background: none;
    overscroll-behavior: contain;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 72px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 72px);
  }
  .coach-messages > :first-child { margin-top: auto; }
  .msg-row.from-coach .msg-bubble { background: rgba(20, 20, 28, 0.78); color: #f2f2f7; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
  .msg-row.from-user .msg-bubble { box-shadow: 0 6px 18px rgba(74, 55, 209, 0.35); }
  .msg-tag { color: #ff9a8f; }
  .msg-typing span { background: rgba(255, 255, 255, 0.75); }
  .msg-avatar { background: rgba(255, 255, 255, 0.16); }
  .msg-adjustment { background: rgba(255, 255, 255, 0.1); border-left-color: rgba(255, 255, 255, 0.6); color: #f2f2f7; }
  .chat-note { background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.9); }
  .chat-note button { background: #fff; color: #111; }

  /* Suggestions et zone de saisie sur le voile sombre */
  .coach-suggestions { position: relative; z-index: 3; }
  .coach-chip { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.16); }
  .coach-chip:hover { border-color: rgba(255, 255, 255, 0.5); }
  .coach-composer { position: relative; z-index: 3; background: none; border-top: 0; }
  .coach-quota { margin-bottom: 6px; }
  .coach-quota-head { margin-bottom: 4px; }
  .coach-quota-plan { background: rgba(255, 255, 255, 0.16); color: #fff; }
  .coach-quota-label { color: rgba(255, 255, 255, 0.7); }
  .coach-quota-label b { color: #fff; }
  .coach-quota-track { height: 5px; background: rgba(255, 255, 255, 0.16); }
  .coach-input-meta { color: rgba(255, 255, 255, 0.62); font-size: 10.5px; line-height: 1.35; }
  .coach-input-meta.is-warning { color: #ff9a8f; }
}
@media (max-width: 1023px) {
  /* App installée sur l'écran d'accueil (iPhone) : rien sous l'encoche */
  .coach-drawer-head { padding-top: 16px; }
}
/* Téléphone tenu à l'horizontale : peu de hauteur, la conversation commence juste sous la barre du haut */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 520px) {
  .coach-stage-overlay { display: none; }
  .coach-messages { margin-top: 58px; }
}

/* ===== Flèche « tirer pour fermer » (Coach Midas et fenêtres, téléphone) =====
   Un toucher ferme ; maintenue et tirée vers le bas, le cercle doré se remplit (--pull : la flèche suit le doigt).
   Plein : flèche dorée, petite vibration, « Lâche pour fermer ». Le geste : attachPullToClose (js/utils.js). */
.pull-handle, .pull-hint { display: none; }
@media (max-width: 1023px) {
  .pull-handle {
    display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; box-shadow: none;
    cursor: grab; touch-action: none;
    -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
    transition: transform 0.4s var(--ease-spring), background 0.2s, color 0.2s;
  }
  .pull-handle > svg { grid-area: 1 / 1; }
  .pull-ring { width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 2.5; }
  .pull-fill { stroke: #ffd60a; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.3s var(--ease-out); }
  .pull-arrow { width: 20px; height: 20px; transition: transform 0.2s var(--ease-spring); }
  .is-pulling .pull-handle { transition: background 0.2s, color 0.2s; cursor: grabbing; }
  .is-pulling .pull-fill { transition: none; }
  .is-pull-armed .pull-handle { background: #ffd60a; color: #111; animation: pullPop 0.35s var(--ease-spring); }
  .is-pull-armed .pull-arrow { transform: scale(1.15); }
  /* Petite bulle sous la flèche pendant qu'on tire */
  .pull-hint {
    display: block; position: absolute; left: 50%; z-index: 5; transform: translate(-50%, var(--pull, 0px));
    padding: 5px 12px; border-radius: var(--radius-pill); white-space: nowrap;
    background: rgba(10, 10, 12, 0.78); color: #fff; font-size: 12px; font-weight: 600; pointer-events: none;
    opacity: 0; visibility: hidden;
    transition: opacity 0.2s, visibility 0s linear 0.2s, background 0.2s, color 0.2s, transform 0.4s var(--ease-spring);
  }
  .is-pulling .pull-hint { opacity: 1; visibility: visible; transition: opacity 0.2s, background 0.2s, color 0.2s; }
  .is-pull-armed .pull-hint { background: #ffd60a; color: #111; }

  /* Coach Midas : en haut au centre, sur le portrait */
  .coach-panel-handle {
    position: absolute; top: 12px; left: 50%; z-index: 5;
    transform: translate(-50%, var(--pull, 0px)); width: 44px; height: 44px; color: #fff;
    background: rgba(10, 10, 12, 0.42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  }
  .coach-panel .pull-track { stroke: rgba(255, 255, 255, 0.2); }
  .coach-handle-hint { top: 64px; background: rgba(10, 10, 12, 0.62); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  @media (max-width: 370px) { .coach-panel-handle { width: 38px; height: 38px; } }

  /* Fenêtres : la flèche remplace la petite barre grise du haut (qui ne faisait rien) */
  .history-modal::before { display: none; }
  .sheet-pull {
    position: relative; margin: -10px auto 4px; width: 36px; height: 36px;
    transform: translateY(var(--pull, 0px));
    background: var(--color-bg-elevated); color: var(--color-text);
  }
  .history-modal .pull-track { stroke: var(--color-hairline-strong); }
  .sheet-pull-hint { top: 50px; }
}
@keyframes pullPop { 50% { scale: 1.18; } }
@media (prefers-reduced-motion: reduce) { .is-pull-armed .pull-handle { animation: none; } }

/* ===== Corps : prévision sous la courbe de poids (« Objectif 66 kg vers le 12 décembre ») ===== */
.wc-forecast {
  display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px;
  border-radius: var(--radius-md); background: var(--color-card-alt);
}
.wc-forecast-ico {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent);
}
.wc-forecast-ico .ico, .wc-forecast-ico svg { width: 19px; height: 19px; }
.wc-forecast-text { min-width: 0; }
.wc-forecast-text strong { display: block; font-size: 14.5px; line-height: 1.3; }
.wc-forecast-text small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--color-text-secondary); }
.wc-forecast.is-on-track .wc-forecast-ico { background: var(--color-green-tint); color: var(--color-green-dark); }
.wc-forecast.is-reached { background: var(--color-green-tint); }
.wc-forecast.is-reached .wc-forecast-ico { background: var(--color-green); color: #fff; }
html[data-theme="dark"] .wc-forecast.is-on-track .wc-forecast-ico,
html[data-theme="dark"] .wc-forecast.is-reached { background: color-mix(in srgb, var(--color-green) 18%, transparent); }
html[data-theme="dark"] .wc-forecast.is-on-track .wc-forecast-ico { color: var(--color-green); }

/* ===== Nutrition : « J'ai mangé ça » sur chaque repas prévu (entre dans le journal en un toucher) ===== */
.meal-eat-btn {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding: 7px 13px 7px 8px;
  border-radius: var(--radius-pill); border: 1.5px solid var(--color-hairline-strong); background: transparent;
  color: var(--color-text); font-size: 13px; font-weight: 700;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s var(--ease-spring);
}
.meal-eat-btn:active { transform: scale(0.96); }
.meal-eat-btn .ico, .meal-eat-btn svg {
  width: 20px; height: 20px; padding: 3px; border-radius: 50%; box-sizing: border-box;
  border: 1.5px solid var(--color-hairline-strong); color: transparent; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.meal-eat-btn.is-eaten { background: var(--color-green-tint); border-color: transparent; color: var(--color-green-dark); }
.meal-eat-btn.is-eaten .ico, .meal-eat-btn.is-eaten svg { background: var(--color-green); border-color: var(--color-green); color: #fff; }
.meal-eat-btn.is-eaten .ico, .meal-eat-btn.is-eaten svg { animation: mealEatPop 0.35s var(--ease-spring); }
@keyframes mealEatPop { 50% { scale: 1.25; } }
html[data-theme="dark"] .meal-eat-btn.is-eaten { background: color-mix(in srgb, var(--color-green) 18%, transparent); color: var(--color-green); }
@media (prefers-reduced-motion: reduce) { .meal-eat-btn.is-eaten .ico, .meal-eat-btn.is-eaten svg { animation: none; } }

/* ===== Onglet Défis : grande flamme + chemin des paliers, défis en anneaux, invitation à défier ses amis ===== */
.defis-hero {
  position: relative; overflow: hidden; isolation: isolate; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 20px 20px 18px; border-radius: var(--radius-xl);
  background: radial-gradient(120% 75% at 50% 0%, color-mix(in srgb, var(--glow) 30%, transparent), transparent 62%), var(--color-ink);
  color: var(--color-text-on-dark); box-shadow: 0 18px 40px rgba(12, 12, 18, 0.24);
}
.defis-hero::before {
  content: ""; position: absolute; z-index: -1; width: 230px; height: 230px; top: 4px; left: 50%; translate: -50% 0;
  border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--glow) 50%, transparent), transparent 66%);
}
.defis-hero.is-out::before { opacity: 0.3; }
.defis-hero-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-on-dark-2); }
.defis-hero-flame { margin-top: 6px; filter: drop-shadow(0 10px 26px color-mix(in srgb, var(--glow) 55%, transparent)); }
.defis-hero-count { font-family: var(--font-display); font-size: 56px; font-weight: 800; line-height: 1; margin-top: 2px; font-variant-numeric: tabular-nums; }
.defis-hero-label { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--color-text-on-dark-2); }
.defis-hero-name {
  margin-top: 10px; padding: 4px 12px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.08);
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--glow) 65%, #fff);
}
.defis-path { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 340px; margin-top: 18px; }
.defis-path::before { content: ""; position: absolute; left: 14px; right: 14px; top: 50%; height: 2px; translate: 0 -50%; background: rgba(255, 255, 255, 0.12); }
.defis-path-step {
  position: relative; width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center;
  background: #1c1c25; border: 1.5px solid rgba(255, 255, 255, 0.12);
}
.defis-path-step.is-reached { border-color: color-mix(in srgb, var(--glow) 55%, transparent); }
.defis-path-step.is-current { width: 31px; height: 31px; border-color: var(--glow); box-shadow: 0 0 0 4px color-mix(in srgb, var(--glow) 22%, transparent); }
.defis-path-step.is-next { border-style: dashed; border-color: rgba(255, 255, 255, 0.45); }
.defis-path-step b { font-size: 13px; color: rgba(255, 255, 255, 0.45); }
.defis-path .flame, .defis-path .flame * { animation: none !important; } /* 8 petites flammes : immobiles (iPhone) */
.defis-hero .mini-track { width: 100%; max-width: 320px; margin-top: 16px; background: rgba(255, 255, 255, 0.12); }
.defis-hero .mini-fill { background: var(--grad-accent-bright); }
.defis-hero-next { max-width: 300px; margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: var(--color-text-on-dark-2); }
.defis-hero.is-warning .defis-hero-next { color: #ffb37a; }
.defis-hero-more { margin-top: 12px; font-size: 12.5px; font-weight: 800; color: #fff; opacity: 0.75; }
.defis-hero-more::after { content: " ›"; }
html[data-theme="dark"] .defis-hero { box-shadow: 0 0 0 1px var(--color-hairline-strong), var(--shadow-card); }

.challenges-summary { display: flex; align-items: center; gap: 10px; padding: 12px 0 10px; border-bottom: 1px solid var(--color-hairline); font-size: 13px; }
.challenges-pips { display: inline-flex; gap: 4px; }
.challenges-pips i { width: 18px; height: 6px; border-radius: 999px; background: var(--color-card-alt); box-shadow: inset 0 0 0 1px var(--color-hairline-strong); }
.challenges-pips i.is-done { background: var(--color-green); box-shadow: none; }
.challenges-score { font-weight: 800; color: var(--color-text); }
.challenges-days { margin-left: auto; font-weight: 700; color: var(--color-text-tertiary); }
.challenge { align-items: center; }
.challenge-ring { position: relative; flex-shrink: 0; width: 54px; height: 54px; display: grid; place-items: center; }
.challenge-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 4; }
.challenge-ring-track { stroke: var(--color-card-alt); }
.challenge-ring-fill { stroke: var(--color-accent); transition: stroke-dashoffset 0.8s var(--ease-out); }
.challenge.is-done .challenge-ring-fill { stroke: var(--color-green); }
.challenge-ring-fill[stroke-dashoffset="100"] { opacity: 0; } /* 0 % : pas de petit trait en haut */
.challenge-ring .challenge-emoji { width: 38px; height: 38px; border-radius: 50%; }

.team-invite {
  display: flex; align-items: center; gap: 12px; margin-top: var(--space-6); padding: 14px 16px;
  border-radius: var(--radius-lg, 22px); background: var(--color-card); box-shadow: var(--shadow-card);
}
.team-invite-ico { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--color-accent-tint); color: var(--color-accent); }
.team-invite-ico .ico { width: 21px; height: 21px; }
.team-invite-text { flex: 1; min-width: 0; }
.team-invite-text strong { display: block; font-size: 15px; font-weight: 800; }
.team-invite-text small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--color-text-secondary); }
.team-invite-btn { flex-shrink: 0; padding: 9px 15px; border: 0; border-radius: var(--radius-pill); background: var(--color-text); color: var(--color-bg); font-size: 13px; font-weight: 800; }
.team-invite-btn:active { transform: scale(0.96); }

/* ===== Coach Midas sur téléphone : une carte posée sur le site flouté (plus en plein écran) ===== */
@media (max-width: 1023px) {
  .coach-panel {
    top: calc(54px + env(safe-area-inset-top, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    left: 14px; right: 14px; height: auto; max-width: 620px; margin: 0 auto;
    border-radius: 28px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.07);
    transform: translateY(calc(100% + 90px));
  }
  .coach-panel.is-open { transform: none; }
  /* Le site reste visible derrière, flouté et un peu assombri */
  .coach-overlay { background: rgba(10, 10, 14, 0.34); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .coach-composer { padding-bottom: 8px; }
  .coach-drawer-foot { padding-bottom: 12px; }
}
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 520px) {
  .coach-panel { top: 8px; bottom: 8px; border-radius: 22px; }
}

/* ===== Volet des conversations : nouvelle conversation, épinglées, 30 derniers jours ===== */
.coach-drawer-head { align-items: center; }
.coach-drawer-new {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 2px 12px 10px; padding: 12px 14px;
  border-radius: 16px; border: 0; background: var(--color-coach); color: #fff; font-size: 14px; font-weight: 800;
  box-shadow: 0 8px 20px rgba(91, 75, 219, 0.28); transition: transform 0.15s var(--ease-spring);
}
.coach-drawer-new:active { transform: scale(0.97); }
.coach-drawer-new .ico { width: 17px; height: 17px; }
.coach-drawer-loading { display: grid; place-items: center; padding: 30px 0; }
.conv-group { margin: 8px 4px 2px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-tertiary); }
.conv-item { display: flex; align-items: stretch; border-radius: 16px; background: var(--color-card); box-shadow: 0 0 0 1px var(--color-hairline); overflow: hidden; }
.conv-item.is-current { box-shadow: 0 0 0 2px var(--color-coach); }
.conv-open { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 11px 6px 11px 14px; background: none; border: 0; color: var(--color-text); text-align: left; }
.conv-title { font-size: 13.5px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.conv-meta { font-size: 11.5px; color: var(--color-text-secondary); }
.conv-meta b { color: var(--color-coach); font-weight: 800; }
.conv-pin { display: grid; place-items: center; width: 46px; flex-shrink: 0; background: none; border: 0; color: var(--color-text-tertiary); transition: color 0.2s; }
.conv-pin .ico { width: 18px; height: 18px; }
.conv-pin.is-on { color: var(--color-coach); }
.conv-pin.is-on .ico path { fill: currentColor; }

/* ===== Flamme de régularité et astres (flame.js) =====
   Léger pour le téléphone : AUCUN filtre (ombre portée, flou) — les lueurs sont des dégradés dessinés.
   Seules la taille, la position et la transparence bougent. Chaque palier a son propre mouvement. */
.flame { display: block; overflow: visible; flex-shrink: 0; }
.flame.is-lit * { transform-box: view-box; }

/* Lueur qui palpite (dégradé radial) */
.flame.is-lit .fl-glow { animation: fl-glow 2.4s ease-in-out infinite; }
.flame.is-lit .fl-glow-big { animation-duration: 1.7s; }
@keyframes fl-glow { 0%, 100% { transform: scale(0.92); opacity: 0.75; } 50% { transform: scale(1.08); opacity: 1; } }

/* Étincelles et braises qui s'envolent */
.flame.is-lit .flame-spark { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; animation: flame-spark 1.8s ease-out infinite; }
.flame.is-lit .fl-ember { animation-name: fl-ember; animation-duration: 2.3s; }
@keyframes flame-spark { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx), -16px) scale(0.3); opacity: 0; } }
@keyframes fl-ember { 0% { transform: translate(0, 4px) scale(1.1); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(var(--dx), -22px) scale(0.2); opacity: 0; } }

/* Étincelle */
.flame.is-lit .spark-star { animation: spark-twinkle 1.4s ease-in-out infinite; }
.flame.is-lit .spark-halo { animation: spark-halo 1.4s ease-in-out infinite; }
@keyframes spark-twinkle { 0%, 100% { transform: scale(0.75) rotate(0deg); opacity: 0.8; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
@keyframes spark-halo { 0%, 100% { transform: scale(0.8); opacity: 0.5; } 50% { transform: scale(1.15); opacity: 0.9; } }

/* Braise : les charbons respirent */
.flame .ember-glow { opacity: 0.35; }
.flame.is-lit .ember-cracks { animation: ember-breathe 2.6s ease-in-out infinite; }
.flame.is-lit .ember-hot { animation: ember-hot 2.8s ease-in-out infinite; }
.flame.is-lit .ember-glow { animation: ember-glow 2.6s ease-in-out infinite; }
@keyframes ember-breathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes ember-hot { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes ember-glow { 0%, 100% { transform: scale(0.85); opacity: 0.2; } 50% { transform: scale(1.1); opacity: 0.5; } }

/* Flamme orange : petite flamme de bougie qui vacille */
.flame.is-lit .fl-candle { animation: fl-candle 2.2s ease-in-out infinite; }
.flame.is-lit .fl-inner { animation: fl-inner 1.3s ease-in-out -0.3s infinite; }
@keyframes fl-candle { 0%, 100% { transform: scale(1, 1) skewX(0deg); } 30% { transform: scale(0.97, 1.05) skewX(-2deg); } 60% { transform: scale(1.02, 0.97) skewX(1.5deg); } 80% { transform: scale(0.99, 1.03) skewX(-1deg); } }
@keyframes fl-inner { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(0.92, 1.1); } }

/* Langues de feu qui dansent chacune à son rythme (feu de camp, flamme blanche, flamme cosmique) */
.flame.is-lit .fl-t1 { animation: fl-dance 1.7s ease-in-out infinite; }
.flame.is-lit .fl-t2 { animation: fl-dance 1.25s ease-in-out -0.4s infinite reverse; }
.flame.is-lit .fl-t3 { animation: fl-dance 1.45s ease-in-out -0.9s infinite; }
@keyframes fl-dance { 0%, 100% { transform: scale(1, 1) skewX(0deg); } 25% { transform: scale(0.95, 1.08) skewX(-4deg); } 50% { transform: scale(1.04, 0.94) skewX(2deg); } 75% { transform: scale(0.97, 1.06) skewX(4deg); } }
.flame.is-lit .fl-sway { animation: fl-sway 2s ease-in-out infinite; }
.flame.is-lit .fl-core { animation: fl-core 1s ease-in-out -0.2s infinite; }
@keyframes fl-sway { 0%, 100% { transform: scale(1, 1) skewX(0deg); } 25% { transform: scale(0.97, 1.05) skewX(-3deg); } 50% { transform: scale(1.02, 0.97) skewX(1.5deg); } 75% { transform: scale(0.98, 1.04) skewX(3deg); } }
@keyframes fl-core { 0%, 100% { transform: scale(1, 1); opacity: 0.9; } 50% { transform: scale(0.9, 1.12); opacity: 1; } }

/* Flamme blanche : l'air ondule au-dessus */
.flame.is-lit .fl-haze { animation: fl-haze 2.1s ease-in-out infinite; }
@keyframes fl-haze { 0% { transform: translateY(6px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-5px); opacity: 0; } }

/* Flamme bleue : le jet de gaz rugit (tremblement rapide), les diamants de lumière battent */
.flame.is-lit .fl-roar { animation: fl-roar 0.16s linear infinite alternate; }
.flame.is-lit .fl-roar-2 { animation-duration: 0.11s; animation-delay: -0.05s; }
.flame.is-lit .fl-diamond { animation: fl-diamond 0.5s ease-in-out infinite; }
@keyframes fl-roar { from { transform: scale(0.97, 0.985); } to { transform: scale(1.03, 1.02); } }
@keyframes fl-diamond { 0%, 100% { transform: scale(0.8); opacity: 0.55; } 50% { transform: scale(1.15); opacity: 1; } }

/* Plasma : les éclairs crépitent, une particule tourne */
.flame.is-lit .plasma-arc { animation: plasma-arc 0.9s steps(1) infinite; }
.flame.is-lit .plasma-arc-b { animation-delay: -0.45s; }
.flame.is-lit .plasma-orbit { transform-origin: 20px 28px; animation: plasma-orbit 1.8s linear infinite; }
@keyframes plasma-arc { 0%, 55%, 100% { opacity: 0; } 10%, 30% { opacity: 1; } 20% { opacity: 0.3; } }
@keyframes plasma-orbit { from { transform: rotate(0deg) translateX(13px); } to { transform: rotate(360deg) translateX(13px); } }

/* Flamme cosmique : un brasier qui se tord, une nébuleuse qui dérive, des étoiles qui scintillent */
.flame.is-lit .fl-fire { animation: fl-fire 1.15s ease-in-out infinite; }
.flame.is-lit .fl-nebula { transform-box: fill-box; transform-origin: 50% 50%; animation: fl-nebula 6s ease-in-out infinite; }
.flame.is-lit .fl-nebula-2 { animation-duration: 7.5s; animation-direction: reverse; }
.flame.is-lit .cosmic-star { animation: spark-twinkle 2s ease-in-out infinite; }
@keyframes fl-fire { 0%, 100% { transform: scale(1, 1) skewX(0deg); } 20% { transform: scale(0.93, 1.1) skewX(-5deg); } 45% { transform: scale(1.05, 0.95) skewX(3deg); } 70% { transform: scale(0.96, 1.08) skewX(5deg); } }
@keyframes fl-nebula { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(2px, -3px) scale(1.18); } }

/* Étoile bleue : couronne qui tourne, éclat qui scintille, protubérances qui jaillissent, cœur qui respire */
.flame.is-lit .star-halo { animation: heat-halo 3s ease-in-out infinite; }
.flame.is-lit .star-rays { animation: astre-spin 22s linear infinite; }
.flame.is-lit .star-flare { animation: star-flare 2.6s ease-in-out infinite; }
.flame.is-lit .star-core { animation: astre-breathe 3s ease-in-out infinite; }
.flame.is-lit .star-prom { animation: star-prom 2.6s ease-in-out infinite; }
@keyframes heat-halo { 0%, 100% { transform: scale(0.9); opacity: 0.45; } 50% { transform: scale(1.1); opacity: 0.85; } }
@keyframes astre-spin { to { transform: rotate(360deg); } }
@keyframes astre-breathe { 50% { transform: scale(1.07); } }
@keyframes star-flare { 0%, 100% { transform: scale(0.85) rotate(0deg); opacity: 0.7; } 50% { transform: scale(1.12) rotate(10deg); opacity: 1; } }
@keyframes star-prom { 0%, 100% { transform: scale(0.85); opacity: 0.35; } 50% { transform: scale(1.12); opacity: 0.95; } }

/* Étoile à neutrons (pulsar) : les deux jets tremblent très vite, sans tourner ; le cœur vibre et flashe */
.flame.is-lit .pulsar-halo { animation: heat-halo 1.2s ease-in-out infinite; }
.flame.is-lit .pulsar-jet { animation: pulsar-jet 0.42s steps(1) infinite; }
.flame.is-lit .pulsar-jet-b { animation-duration: 0.36s; animation-delay: -0.17s; }
.flame.is-lit .pulsar-shake { animation: pulsar-shake 0.3s steps(2) infinite; }
.flame.is-lit .pulsar-flash { animation: pulsar-flash 0.42s ease-out infinite; }
@keyframes pulsar-jet {
  0% { transform: scale(1, 1); opacity: 1; } 14% { transform: scale(0.8, 0.86); opacity: 0.72; }
  28% { transform: scale(1.14, 1.08); opacity: 1; } 42% { transform: scale(0.9, 0.93); opacity: 0.82; }
  57% { transform: scale(1.08, 1.12); opacity: 1; } 71% { transform: scale(0.84, 0.9); opacity: 0.75; }
  85% { transform: scale(1.12, 1.03); opacity: 0.95; }
}
@keyframes pulsar-shake {
  0% { transform: translate(0, 0); } 25% { transform: translate(0.4px, -0.3px); }
  50% { transform: translate(-0.35px, 0.4px); } 75% { transform: translate(0.3px, 0.35px); } 100% { transform: translate(-0.4px, -0.25px); }
}
@keyframes pulsar-flash { 0% { opacity: 0.75; } 100% { opacity: 0.12; } }

/* Trou noir : la matière tourne (devant de gauche à droite, derrière dans l'autre sens), la lumière palpite */
.flame.is-lit .bh-glow { animation: heat-halo 3.4s ease-in-out infinite; }
.flame.is-lit .bh-flow { animation: bh-flow 1.8s linear infinite; }
.flame.is-lit .bh-flow-fast { animation-duration: 0.9s; }
.flame.is-lit .bh-flow-back { animation-direction: reverse; animation-duration: 2.4s; }
.flame.is-lit .bh-dots { animation: bh-dots 2.6s linear infinite; }
.flame.is-lit .bh-photon, .flame.is-lit .bh-lens { animation: bh-pulse 2.2s ease-in-out infinite; }
@keyframes bh-flow { to { stroke-dashoffset: -8.8; } }
@keyframes bh-dots { to { stroke-dashoffset: -13; } }
@keyframes bh-pulse { 50% { opacity: 0.55; } }

/* Galaxie : elle tourne lentement dans son plan incliné ; le bulbe respire */
.flame.is-lit .galaxy-arms { transform-origin: 0 0; animation: astre-spin 40s linear infinite; }
.flame.is-lit .uni-core { animation: astre-breathe 2.8s ease-in-out infinite; }

/* Univers : il s'étend sans fin (deux couches identiques qui grandissent en se relayant), le bord du
   Big Bang palpite */
.flame.is-lit .uni-zoom { animation: uni-zoom 12s linear infinite; }
.flame.is-lit .uni-zoom-b { animation-delay: -6s; }
.flame.is-lit .uni-edge { animation: uni-edge 5s ease-in-out infinite; }
@keyframes uni-zoom { 0% { transform: scale(0.62); opacity: 0; } 25% { opacity: 1; } 70% { opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes uni-edge { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.03); opacity: 1; } }

/* ===== Carte à partager animée ===== */
.share-preview .share-canvas { display: block; width: 100%; max-width: 320px; height: auto; aspect-ratio: 4 / 5; border-radius: 18px; background: #0c0c12; box-shadow: 0 16px 40px rgba(12, 12, 18, 0.35); }
.share-actions { display: grid; gap: 10px; margin-top: 16px; }
.share-actions .btn { white-space: nowrap; }
.share-actions .btn.is-ready { background: linear-gradient(135deg, #16a34a, #22c55e); box-shadow: 0 10px 26px rgba(34, 197, 94, 0.35); }

/* ===== Bandeau « Nouvelle version disponible » ===== */
.update-banner {
  position: fixed; left: 0; right: 0; margin: 0 auto; top: calc(10px + env(safe-area-inset-top, 0px)); z-index: 9500;
  display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100vw - 24px);
  padding: 8px 8px 8px 16px; border-radius: var(--radius-pill); background: #0c0c12; color: #fff;
  font-size: 13.5px; font-weight: 700; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
  opacity: 0; transform: translateY(-16px); transition: opacity 0.3s, transform 0.4s var(--ease-spring);
}
.update-banner.is-visible { opacity: 1; transform: none; }
.update-banner button { flex-shrink: 0; padding: 8px 14px; border: 0; border-radius: var(--radius-pill); background: var(--grad-accent-bright); color: #fff; font-size: 13px; font-weight: 800; }
.conv-delete { display: grid; place-items: center; width: 40px; flex-shrink: 0; margin-left: -6px; background: none; border: 0; color: var(--color-text-tertiary); transition: color 0.2s; }
.conv-delete .ico { width: 17px; height: 17px; }
.conv-delete:active { color: var(--color-red, #d92d20); }

/* ===== Économie d'énergie (téléphone) =====
   Une fenêtre ou le coach est ouvert : la page derrière est floutée sous le voile. Rien n'y bouge à l'œil,
   donc on y met les animations en pause, et la barre d'onglets n'a plus à calculer son propre flou
   (un flou sous un autre flou, recalculé à chaque image). Même chose pendant une séance guidée plein écran. */
body.sheet-open .app-shell *, body.coach-open .app-shell *, body.is-guided .app-shell *,
body.sheet-open .coach-fab, body.coach-open .coach-fab,
body.sheet-open .dynamic-island *, body.coach-open .dynamic-island * { animation-play-state: paused !important; }
body.sheet-open .dynamic-island, body.coach-open .dynamic-island { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Chemin des paliers (Défis) : flammes de 13 px, leur mouvement ne se voit pas à cette taille. On garde
   le palier en cours animé, les autres restent allumés mais immobiles (13 dessins de moins à refaire sans cesse). */
.defis-path-step:not(.is-current) .flame * { animation: none !important; }

/* ===== Révélation plein écran d'un trophée Émeraude / Hors catégorie (trophees.js) ===== */
.trophy-reveal { position: fixed; inset: 0; z-index: 2500; display: grid; place-items: center; align-content: center; gap: 26px; background: radial-gradient(circle at 50% 42%, rgba(200, 200, 210, 0.26), rgba(5, 6, 12, 0.94) 62%); opacity: 0; transition: opacity 0.45s ease; overflow: hidden; cursor: pointer; }
.trophy-reveal.rank-7 { background: radial-gradient(circle at 50% 42%, rgba(245, 197, 66, 0.4), rgba(5, 4, 12, 0.95) 62%); }
.trophy-reveal.is-open { opacity: 1; }
.trophy-reveal-rays { position: absolute; left: 50%; top: 42%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.07) 0deg 6deg, transparent 6deg 18deg); animation: orb-spin 24s linear infinite; }
.trophy-reveal-burst { position: absolute; left: 50%; top: 42%; }
.trophy-reveal-burst i { position: absolute; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #fff; opacity: 0; transform: rotate(var(--a)) translateY(0); }
.trophy-reveal.is-open .trophy-reveal-burst i { animation: reveal-burst 1.4s cubic-bezier(0.16, 1, 0.3, 1) calc(0.35s + var(--d)) forwards; }
.trophy-reveal-medal { position: relative; transform: scale(0.2); opacity: 0; transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s, opacity 0.4s ease 0.15s; }
.trophy-reveal.is-open .trophy-reveal-medal { transform: scale(1); opacity: 1; }
.trophy-reveal-medal .medal { width: 150px; height: 150px; }
.trophy-reveal-medal .medal svg { width: 64px; height: 64px; }
.trophy-reveal-text { position: relative; display: grid; gap: 6px; text-align: center; color: #fff; padding: 0 24px; transform: translateY(16px); opacity: 0; transition: transform 0.6s ease 0.7s, opacity 0.6s ease 0.7s; }
.trophy-reveal.is-open .trophy-reveal-text { transform: none; opacity: 1; }
.trophy-reveal-rarity { font-size: 13px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: #e5e5ea; }
.trophy-reveal.rank-7 .trophy-reveal-rarity { color: #f5c542; }
.trophy-reveal-text strong { font-family: var(--font-display); font-size: 28px; font-weight: 900; }
.trophy-reveal-text small { font-size: 12.5px; color: rgba(255, 255, 255, 0.6); }
@keyframes reveal-burst { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-46vmin) scale(0.4); } }

/* Petit téléphone : le bouton de la séance du jour passe sous le titre (sinon le titre s'écrase sur 3 lignes). */
@media (max-width: 400px) {
  .today-card { flex-wrap: wrap; row-gap: 12px; }
  .today-card .today-body { flex: 1 1 calc(100% - 68px); min-width: 0; }
  .today-card .today-cta { margin-left: 68px; }
}

/* --------------------------------------------------------------------------
   Journal des repas : photo (appareil ou galerie), type de repas, idées de précisions
   -------------------------------------------------------------------------- */
.mj-actions { grid-template-columns: 1fr 1fr; }
.mj-actions .btn { font-size: 14px; padding: 0 10px; }
.mj-item-time { display: flex; flex-direction: column; line-height: 1.25; }
.mj-item-time small { font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-text-secondary); }
.mj-choice { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.mj-choice-btn { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--radius-md); background: var(--color-card-alt); cursor: pointer; transition: transform 0.15s var(--ease-spring); }
.mj-choice-btn:active { transform: scale(0.98); }
.mj-choice-ico { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--color-card); color: var(--color-text); }
.mj-choice-ico svg { width: 22px; height: 22px; }
.mj-choice-btn strong { display: block; font-size: 15.5px; }
.mj-choice-btn small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--color-text-secondary); }
.mj-types { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 14px; }
.mj-type { padding: 8px 12px; border: 0; border-radius: 999px; background: var(--color-card-alt); color: var(--color-text); font-size: 13.5px; font-weight: 700; transition: background 0.2s, color 0.2s, transform 0.15s var(--ease-spring); }
.mj-type.is-on { background: var(--color-text); color: var(--color-bg); }
.mj-type:active { transform: scale(0.96); }
.mj-help { margin: 0 0 8px; font-size: 12.5px; line-height: 1.45; color: var(--color-text-secondary); }
.mj-hints { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mj-hint { padding: 6px 10px; border: 1px dashed var(--color-hairline-strong); border-radius: 999px; background: transparent; color: var(--color-text-secondary); font-size: 12.5px; font-weight: 600; }
.mj-hint.is-used { border-style: solid; background: var(--color-card-alt); color: var(--color-text); }
@media (prefers-reduced-motion: reduce) { .mj-choice-btn, .mj-type { transition: none; } }