/* =======================================================================================
   sport.clemeo.fr — « le carnet millimétré »

   LA DIRECTION, EN UNE PHRASE : un carnet d'entraînement sur papier millimétré, et le
   papier sert de repère aux courbes.

   Ce qui en découle, et qui n'est pas décoratif :
     - Le fond est une vraie trame millimétrée (8 px fins, 40 px forts). Les graphiques ne
       dessinent PAS leurs propres lignes de repère : ils réutilisent la même trame, au même
       pas. Les axes du carnet et les axes des courbes sont le même objet — c'est la seule
       idée forte de cette maquette, et tout le reste se tient en retrait derrière elle.
     - Le vermillon ne sert QU'À CE QUI RÉCLAME UN GESTE aujourd'hui. Ce qui est fait est
       écrit à l'encre. Une page où tout est à l'encre est une page où il n'y a rien à faire ;
       une tache de vermillon se voit d'un mètre.
     - Sombre = bleu de plan. Ce n'est pas une inversion automatique : un carnet éclairé
       devient un plan d'architecte, la trame passe au cyan, l'encre au blanc cassé.

   Mobile d'abord, sans hésitation : ce site s'ouvre dans un salon, dehors, ou à midi entre
   deux réunions — jamais sur un grand écran.
   ======================================================================================= */

/* ---- fontes ------------------------------------------------------------------------ */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/static/fonts/bricolage-grotesque-700-latin.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/static/fonts/public-sans-var-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/jetbrains-mono-500-latin.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---- les deux modes ---------------------------------------------------------------- */
:root {
  color-scheme: light;
  --papier:        #edf1f4;
  --fiche:         #fbfcfd;
  --grille-fine:   #dde5eb;
  --grille-forte:  #c7d3dc;
  --encre:         #14202a;
  --encre-2:       #566672;
  --encre-3:       #8a99a4;
  --trait:         #cbd6de;
  --accent:        #cf4520;   /* vermillon — uniquement ce qui réclame un geste */
  --accent-doux:   #f6e3dc;
  --serie-1:       #2a78d6;
  --serie-2:       #eb6834;
  --serie-3:       #1baf7a;
  --serie-4:       #eda100;
  --ombre:         0 1px 0 rgba(20, 32, 42, .06), 0 2px 8px rgba(20, 32, 42, .05);

  --pas: 8px;                  /* le pas de la trame — tout s'aligne dessus */
  --large: 40px;               /* la ligne forte, tous les 5 pas */
  --largeur: 44rem;

  --titre: "Bricolage Grotesque", "Public Sans", system-ui, sans-serif;
  --texte: "Public Sans", system-ui, -apple-system, sans-serif;
  --data:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    color-scheme: dark;
    --papier:       #0e1a24;
    --fiche:        #14232f;
    --grille-fine:  #172936;
    --grille-forte: #22394a;
    --encre:        #dce7ef;
    --encre-2:      #8fa5b5;
    --encre-3:      #64798a;
    --trait:        #263d4e;
    --accent:       #ff7a4d;
    --accent-doux:  #37231c;
    --serie-1:      #3987e5;
    --serie-2:      #d95926;
    --serie-3:      #199e70;
    --serie-4:      #c98500;
    --ombre:        none;
  }
}
:root[data-theme="sombre"] {
  color-scheme: dark;
  --papier:       #0e1a24;
  --fiche:        #14232f;
  --grille-fine:  #172936;
  --grille-forte: #22394a;
  --encre:        #dce7ef;
  --encre-2:      #8fa5b5;
  --encre-3:      #64798a;
  --trait:        #263d4e;
  --accent:       #ff7a4d;
  --accent-doux:  #37231c;
  --serie-1:      #3987e5;
  --serie-2:      #d95926;
  --serie-3:      #199e70;
  --serie-4:      #c98500;
  --ombre:        none;
}

/* ---- socle ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--texte);
  font-size: 16px;
  line-height: 1.55;
  color: var(--encre);
  background-color: var(--papier);
  /* La trame. Elle est posée ici, en fond de page, et redessinée à l'identique dans les
     graphiques — voir .toile plus bas. */
  background-image:
    linear-gradient(var(--grille-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grille-fine) 1px, transparent 1px),
    linear-gradient(var(--grille-forte) 1px, transparent 1px),
    linear-gradient(90deg, var(--grille-forte) 1px, transparent 1px);
  background-size: var(--pas) var(--pas), var(--pas) var(--pas),
                   var(--large) var(--large), var(--large) var(--large);
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3 { font-family: var(--titre); font-weight: 700; margin: 0; line-height: 1.1; }
h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); letter-spacing: -.02em; }
h2 { font-size: 1.25rem; letter-spacing: -.01em; }
h3 { font-size: 1rem; }
p { margin: 0 0 .8em; }

/* Le petit label en capitales : il sert à nommer une zone, jamais à décorer. */
.etiquette {
  font-family: var(--data); font-size: .7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .13em; color: var(--encre-3);
}
.nombre { font-family: var(--data); font-variant-numeric: tabular-nums; }
.discret { color: var(--encre-2); }
.petit { font-size: .875rem; }

/* ---- gabarit ----------------------------------------------------------------------- */
.page { max-width: var(--largeur); margin: 0 auto; padding: var(--large) 16px 0; }
/* La pile respire d'une ligne forte entre ses sections — et d'autant en haut, sinon la
   première section vient se coller au titre de la page. */
.pile { margin-top: var(--large); }
.pile > * + * { margin-top: var(--large); }
.entete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
          margin-bottom: var(--pas); }

/* La fiche : un carton posé sur le papier. Fond plein — le texte n'est jamais lisible
   par-dessus la trame, et c'est justement ce contraste qui rend la trame acceptable. */
.fiche {
  background: var(--fiche);
  border: 1px solid var(--trait);
  border-radius: 3px;
  box-shadow: var(--ombre);
  padding: 16px;
}
.fiche--action { border-color: var(--accent); border-width: 1px; }
.fiche + .fiche { margin-top: var(--pas); }

/* ---- la barre du bas --------------------------------------------------------------- */
.nav {
  position: fixed; inset: auto 0 0 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--fiche);
  border-top: 1px solid var(--trait);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 4px 7px; text-decoration: none; color: var(--encre-2);
  font-family: var(--data); font-size: .66rem; text-transform: uppercase;
  letter-spacing: .08em;
}
.nav a[aria-current="page"] { color: var(--encre); }
.nav a[aria-current="page"] .puce { background: var(--accent); }
.puce { width: 18px; height: 3px; border-radius: 2px; background: var(--encre-3); }

/* ---- boutons ----------------------------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  background: transparent; color: var(--encre);
  border: 1px solid var(--encre); border-radius: 3px;
  font-family: var(--data); font-size: .8rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .09em; text-decoration: none;
  cursor: pointer; transition: background .12s ease, color .12s ease;
}
.bouton:hover { background: var(--encre); color: var(--fiche); }
.bouton--action { background: var(--accent); border-color: var(--accent); color: #fff; }
.bouton--action:hover { background: var(--encre); border-color: var(--encre); color: #fff; }
.bouton--large { width: 100%; min-height: 56px; font-size: .95rem; }
.bouton--fantome { border-color: var(--trait); color: var(--encre-2); }
.bouton--fantome:hover { background: var(--trait); color: var(--encre); }
.bouton[disabled] { opacity: .4; cursor: not-allowed; }

/* ---- la règle de la semaine -------------------------------------------------------
   Sept cases, une par jour, à la manière d'une réglette. Ce n'est pas un calendrier :
   il n'y a rien à cliquer dedans, elle répond à une seule question — où j'en suis cette
   semaine. */
.regle { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.regle-jour {
  text-align: center; padding: 6px 2px 8px;
  border-top: 2px solid var(--trait);
  font-family: var(--data); font-size: .66rem; color: var(--encre-3);
  text-transform: uppercase; letter-spacing: .06em;
}
.regle-jour[data-etat="faite"]   { border-top-color: var(--encre); color: var(--encre); }
.regle-jour[data-etat="prevue"]  { border-top-color: var(--accent); color: var(--accent); }
.regle-jour[data-etat="sautee"]  { border-top-color: var(--trait); color: var(--encre-3);
                                   text-decoration: line-through; }
.regle-marque { display: block; height: 12px; margin-top: 4px; font-size: .9rem; line-height: 1; }

/* ---- l'exercice, en mode séance ---------------------------------------------------- */
.exo { border-top: 1px solid var(--trait); padding: 14px 0; }
.exo:first-of-type { border-top: none; }
.exo[data-fait="1"] { opacity: .55; }
.exo-titre { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.exo-dose {
  font-family: var(--data); font-size: 1.05rem; font-weight: 500; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.exo-consigne {
  margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--accent);
  font-size: .9rem; color: var(--encre-2);
}
.exo-details { margin-top: 8px; font-size: .9rem; color: var(--encre-2); }
.exo-details summary {
  cursor: pointer; font-family: var(--data); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--encre-3); list-style: none;
}
.exo-details summary::-webkit-details-marker { display: none; }
.exo-details summary::before { content: "+ "; }
.exo-details[open] summary::before { content: "– "; }
.exo-details p { margin: 8px 0 0; }
.exo-details .erreur { color: var(--encre-2); }
.exo-details .erreur::before {
  content: "Ce qui rate le plus souvent — "; color: var(--encre-3);
  font-family: var(--data); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
}

/* Les cases de séries : une par série prévue, on tape dessus quand elle est faite. */
.series { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.serie {
  min-width: 52px; min-height: 44px; padding: 4px 10px;
  border: 1px solid var(--trait); border-radius: 3px; background: transparent;
  font-family: var(--data); font-size: .95rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.serie[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--papier); }

/* Les trois retours. Un seul mot, trois boutons, aucun barème à comprendre. */
.ressenti { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.ressenti button {
  min-height: 44px; border: 1px solid var(--trait); border-radius: 3px; background: transparent;
  font-family: var(--data); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  cursor: pointer;
}
.ressenti button[aria-pressed="true"] { background: var(--encre); border-color: var(--encre);
                                        color: var(--papier); }

/* ---- le tampon --------------------------------------------------------------------
   Le seul moment animé du site. Il apparaît une fois, quand une séance est finie — parce
   que c'est le seul instant qui mérite d'être fêté. */
.tampon {
  display: inline-block; padding: 8px 16px; border: 3px solid var(--accent);
  border-radius: 4px; color: var(--accent);
  font-family: var(--titre); font-size: 1.5rem; letter-spacing: .1em; text-transform: uppercase;
  transform: rotate(-6deg);
  animation: tamponner .45s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes tamponner {
  from { transform: rotate(-16deg) scale(2.4); opacity: 0; }
  to   { transform: rotate(-6deg) scale(1); opacity: 1; }
}

/* ---- formulaires ------------------------------------------------------------------- */
.champ { display: block; margin-bottom: 12px; }
.champ > span { display: block; margin-bottom: 4px; }
input[type="text"], input[type="number"], input[type="password"], input[type="date"],
input[type="time"], select, textarea {
  width: 100%; min-height: 44px; padding: 8px 10px;
  background: var(--papier); color: var(--encre);
  border: 1px solid var(--trait); border-radius: 3px;
  font-family: var(--data);
}
textarea { min-height: 88px; font-family: var(--texte); }
fieldset { border: 1px solid var(--trait); border-radius: 3px; padding: 12px; margin: 0 0 12px; }
legend { padding: 0 6px; }
.cases { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.cases label { display: inline-flex; align-items: center; gap: 6px; }
.cases input { min-height: 0; width: auto; }

/* ---- tableaux ---------------------------------------------------------------------- */
.tableau-cadre { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--trait); }
th { font-family: var(--data); font-size: .7rem; text-transform: uppercase;
     letter-spacing: .08em; color: var(--encre-3); font-weight: 500; }
td.nb { font-family: var(--data); font-variant-numeric: tabular-nums; text-align: right; }

/* ---- messages ---------------------------------------------------------------------- */
.mot { padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--accent-doux);
       border-radius: 0 3px 3px 0; }
.vide { padding: 20px 0; color: var(--encre-2); }

/* ---- graphiques -------------------------------------------------------------------
   Les courbes n'ont NI grille NI axes à elles : elles sont posées sur du papier millimétré,
   et c'est le papier qui gradue. La trame est dessinée DANS le SVG (motif `trame`), pas en
   fond CSS — sinon elle se décalerait des données dès que le graphique change de largeur, et
   toute l'idée tomberait. Même pas, mêmes couleurs que la page : c'est le même papier. */
.toile {
  background-color: var(--papier);
  border: 1px solid var(--trait); border-radius: 3px;
  position: relative;
}
.toile svg { display: block; width: 100%; height: auto; }
.axe { font-family: var(--data); font-size: 10px; fill: var(--encre-3); }
.legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px;
           font-size: .8rem; color: var(--encre-2); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.infobulle {
  position: absolute; pointer-events: none; z-index: 5; opacity: 0;
  transform: translate(-50%, -120%); transition: opacity .1s ease;
  background: var(--encre); color: var(--papier); padding: 5px 8px; border-radius: 3px;
  font-family: var(--data); font-size: .72rem; white-space: nowrap;
}
.infobulle[data-visible="1"] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (min-width: 700px) {
  .page { padding-top: calc(var(--large) * 1.5); }
  .nav { grid-template-columns: repeat(4, minmax(0, 140px)); justify-content: center; }
}