/* ============================================================
   STAY HARD !
   Un seul theme, assume. Pas de mode sombre :
   une ambiance bien faite vaut mieux que deux baclees.

   LA REGLE : la couleur est une information, pas une decoration.
   Bleu la course, vert le velo, violet la natation, rouge la muscu.
   Jamais l'inverse, nulle part.
   ============================================================ */

:root{
  --course:#0b7fe3;   --course-pale:#e3f0fd;
  --velo:#0f9e6a;     --velo-pale:#e0f5ec;
  --natation:#7a3fe4; --natation-pale:#efe8fd;
  --muscu:#e8353f;    --muscu-pale:#fde6e7;
  --jaune:#ffc93c;

  --ink:#14161c;
  --soft:#6b7280;
  --bg:#f2f4f8;
  --card:#ffffff;
  --line:#e3e7ee;

  /* Hauteur minimale de tout ce qui se touche.
     Un doigt fait un centimetre : en dessous, c'est rate. */
  --touch:48px;
}

*{box-sizing:border-box}

body{
  margin:0 auto;
  max-width:520px;               /* sur ordi, on garde la largeur d'un telephone */
  padding-bottom:calc(28px + env(safe-area-inset-bottom));
  background:var(--bg);
  color:var(--ink);
  font-family:Outfit,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-text-size-adjust:100%;
}

.is-hidden{display:none}

/* ---------- barre de titre ---------- */
.app-bar{
  background:var(--card);
  padding:calc(16px + env(safe-area-inset-top)) 18px 14px;
  border-bottom:1px solid var(--line);
}
.logo{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0}
.logo em{font-style:normal;color:var(--course)}

/* ---------- les trois chiffres ---------- */
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  padding:14px 14px 16px;background:var(--card);
}
.stat{background:var(--bg);border-radius:12px;padding:10px 8px;text-align:center}
.stat .n{
  font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:23px;
  letter-spacing:-.04em;display:block;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.stat .u{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--soft);font-weight:500;display:block;margin-top:4px;
}

/* ---------- formulaire ---------- */
.form{
  background:var(--card);margin-top:8px;
  padding:16px 16px 18px;border-top:1px solid var(--line);
}
.form h2{
  font-size:13px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--soft);margin:0 0 12px;font-weight:600;
}

.type-row{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:11px}
.type-btn{
  min-height:var(--touch);
  border:2px solid var(--line);border-radius:13px;padding:12px 6px;
  font-family:inherit;font-weight:600;font-size:14px;color:var(--ink);
  background:var(--card);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.type-btn .ico{font-size:21px;line-height:1}

/* Chaque bouton porte sa couleur ; seule la classe .on l'allume. */
.type-btn[data-type="course"]  {--c:var(--course);  --c-pale:var(--course-pale)}
.type-btn[data-type="velo"]    {--c:var(--velo);    --c-pale:var(--velo-pale)}
.type-btn[data-type="natation"]{--c:var(--natation);--c-pale:var(--natation-pale)}
.type-btn[data-type="muscu"]   {--c:var(--muscu);   --c-pale:var(--muscu-pale)}
.type-btn.on{border-color:var(--c);background:var(--c-pale);color:var(--c)}

.field{
  display:block;
  border:1.5px solid var(--line);border-radius:11px;padding:8px 12px 6px;
  margin-bottom:9px;background:var(--card);
}
.field b{
  display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--soft);font-weight:600;margin-bottom:2px;
}
.field input{
  width:100%;min-height:32px;
  border:0;padding:0;background:transparent;
  font-family:"IBM Plex Mono",monospace;font-size:15px;color:var(--ink);
}
.field input:focus{outline:none}
.field:focus-within{border-color:var(--course)}
.field input::placeholder{color:#9aa2b1;font-family:Outfit,sans-serif}
#input-notes{font-family:Outfit,sans-serif}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.duo .field{margin-bottom:9px}

.submit{
  width:100%;min-height:var(--touch);
  background:var(--course);color:#fff;border:0;border-radius:13px;padding:14px;
  font-family:inherit;font-weight:700;font-size:16px;
  margin-top:5px;cursor:pointer;
}

/* ---------- liste ---------- */
.list{padding:16px 14px 22px}
.list h2{
  font-size:13px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--soft);margin:0 0 11px;font-weight:600;
}

.empty{color:var(--soft);font-size:14.5px;text-align:center;padding:22px 10px;margin:0}

.card{
  background:var(--card);border-radius:14px;
  padding:13px 14px 13px 16px;margin-bottom:9px;
  position:relative;overflow:hidden;
  box-shadow:0 1px 3px rgba(20,30,60,.07);
}
/* Le bandeau de gauche, la couleur du mot : une seule variable pour les deux. */
.card--course  {--c:var(--course)}
.card--velo    {--c:var(--velo)}
.card--natation{--c:var(--natation)}
.card--muscu   {--c:var(--muscu)}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c)}

.card-top{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.card-ico{font-size:19px;line-height:1}
.card-type{font-weight:700;font-size:15px;color:var(--c)}
.card-date{
  margin-left:auto;font-family:"IBM Plex Mono",monospace;
  font-size:11.5px;color:var(--soft);
}
.card-del{
  min-width:var(--touch);min-height:var(--touch);
  margin:-14px -12px -14px 2px;          /* la cible deborde, pas le dessin */
  border:0;background:transparent;cursor:pointer;
  color:var(--soft);font-size:16px;line-height:1;
}

.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:500;
  background:var(--bg);border-radius:7px;padding:3px 8px;color:var(--ink);
}
.card-note{font-size:13px;color:var(--soft);margin:7px 0 0;font-style:italic}

/* ---------- la recompense ---------- */
/* Le seul effet anime de l'app, et c'est voulu : une animation
   qu'on remarque partout, on ne la remarque plus nulle part. */
.toast{
  background:var(--jaune);color:#3d2c00;border-radius:12px;
  padding:11px 14px;margin:0 0 14px;
  font-weight:700;font-size:14.5px;text-align:center;
  animation:pop .28s ease-out;
}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .toast{animation:none}
}

/* ---------- Strava ---------- */
/* Bouton volontairement neutre, pas aux couleurs de Strava :
   dans cette app les couleurs designent les quatre sports, et
   rien d'autre. Question ouverte a se poser : une marque a-t-elle
   le droit d'imposer sa couleur ? Ici on a dit non. */
.strava{
  background:var(--card);border-top:1px solid var(--line);
  padding:14px 16px 16px;display:flex;flex-direction:column;gap:9px;
}
.strava-btn{
  width:100%;min-height:var(--touch);
  border:1.5px solid var(--line);border-radius:13px;background:var(--card);
  font-family:inherit;font-weight:600;font-size:15px;color:var(--ink);
  cursor:pointer;
}
.strava-btn:hover{border-color:var(--soft)}
.strava-note{
  margin:0;font-size:13px;color:var(--soft);text-align:center;min-height:1.2em;
}
.strava-note:empty{display:none}