/* Thème « moderne et simple », chargé en dernier : il prend le pas sur Pico et les feuilles d'écran.
   Mobile d'abord : barre du haut compacte, onglets fixés en bas ; au-delà de 768 px, onglets en haut. */

:root,
:root[data-theme="light"] {
  --fond: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --bord: #e6e8ec;
  --texte: #0f172a;
  --texte-2: #475569;
  --texte-3: #64748b;
  --accent: #1d4ed8;
  --accent-doux: #e8eefc;
  --vert: #15803d;
  --vert-doux: #e7f5ec;
  --orange: #b45309;
  --orange-doux: #fdf1e3;
  --rouge: #b91c1c;
  --rouge-doux: #fdecec;
  --ombre: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.05);
  --rayon: 16px;
  --rayon-petit: 10px;

  --pico-font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pico-font-size: 100%;
  --pico-line-height: 1.5;
  --pico-background-color: var(--fond);
  --pico-color: var(--texte);
  --pico-h1-color: var(--texte);
  --pico-h2-color: var(--texte);
  --pico-h3-color: var(--texte);
  --pico-h4-color: var(--texte);
  --pico-muted-color: var(--texte-3);
  --pico-muted-border-color: var(--bord);
  --pico-card-background-color: var(--surface);
  --pico-card-border-color: var(--bord);
  --pico-card-sectioning-background-color: var(--surface);
  --pico-border-radius: var(--rayon-petit);
  --pico-primary: var(--accent);
  --pico-primary-background: var(--accent);
  --pico-primary-border: var(--accent);
  --pico-primary-hover: #1e40af;
  --pico-primary-hover-background: #1e40af;
  --pico-primary-underline: transparent;
  --pico-secondary-background: var(--surface-2);
  --pico-secondary-inverse: var(--texte-2);
  --pico-form-element-background-color: var(--surface);
  --pico-form-element-border-color: #d5d9e0;
  --pico-form-element-focus-color: var(--accent);
  --pico-ins-color: var(--vert);
  --pico-del-color: var(--rouge);
  --pico-spacing: 1rem;
  --pico-typography-spacing-vertical: 0.75rem;
}

html { -webkit-text-size-adjust: 100%; }
body { background: var(--fond); color: var(--texte); font-feature-settings: "cv11", "ss01"; }

/* --- Typographie --- */
h1, h2, h3, h4 { letter-spacing: -0.015em; font-weight: 700; line-height: 1.2; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: 0.95rem; }
small, .detail { color: var(--texte-3); }
a { text-decoration: none; }
main a:not([role="button"]):hover { text-decoration: underline; text-underline-offset: 3px; }
hr { border-color: var(--bord); }

/* --- Mise en page --- */
main.container {
  max-width: 44rem;
  padding: 1rem 1rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
main.container > * { margin-top: 0; margin-bottom: 0; }
main.container > section > h3:first-child,
main.container > section > h2:first-child { margin-bottom: 0.6rem; }
body.avec-onglets main.container { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }

/* --- Barre du haut --- */
.barre {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--fond);
  border-bottom: 1px solid var(--bord);
  padding: 0;
}
.barre-int {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0.55rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.marque { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--texte); font-weight: 700; font-size: 1.05rem; }
.marque:hover { text-decoration: none; }
.marque-logo {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 0.95rem;
}

/* Menus déroulants (compte, Plus) en <details>, sans JavaScript */
.barre details { margin: 0; border: 0; padding: 0; }
.barre details > summary { list-style: none; cursor: pointer; }
.barre details > summary::-webkit-details-marker { display: none; }
.barre details > summary::after { display: none; }
.compte { margin-left: auto !important; position: relative; }
.compte > summary {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--texte-2);
  background: var(--surface);
  border: 1px solid var(--bord);
}
.menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 14rem;
  padding: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
  display: flex;
  flex-direction: column;
  z-index: 40;
}
.menu a, .menu .lien-bouton {
  display: block;
  padding: 0.65rem 0.8rem;
  border-radius: 9px;
  color: var(--texte);
  font-size: 0.95rem;
  text-align: left;
}
.menu a:hover, .menu .lien-bouton:hover { background: var(--surface-2); text-decoration: none; }
.menu a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.menu form { margin: 0; }
.menu-titre { margin: 0; padding: 0.5rem 0.8rem 0.3rem; font-size: 0.8rem; color: var(--texte-3); }
.lien-bouton {
  width: 100%;
  min-height: 0 !important;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

/* --- Onglets : barre fixée en bas sur téléphone --- */
.onglets {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-top: 1px solid var(--bord);
}
.onglet {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  border-radius: 12px;
  color: var(--texte-3);
  font-size: 0.72rem;
  font-weight: 500;
}
.onglet:hover { text-decoration: none; color: var(--texte); }
.onglet.actif { color: var(--accent); }
.onglet.actif .icone { stroke-width: 2.2; }
.onglet-plus { position: static; }
.onglet-plus > .onglet { height: 100%; }
.onglet-plus .menu { top: auto; bottom: calc(100% + 8px); right: 0.75rem; }

@media (min-width: 768px) {
  .onglets {
    position: static;
    display: flex;
    gap: 0.25rem;
    padding: 0;
    background: none;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .onglet {
    flex-direction: row;
    gap: 0.45rem;
    min-height: 40px;
    padding: 0 0.85rem;
    font-size: 0.92rem;
    border-radius: 999px;
  }
  .onglet .icone { width: 18px; height: 18px; }
  .onglet.actif { background: var(--accent-doux); }
  .onglet-plus { position: relative; }
  .onglet-plus .menu { top: calc(100% + 8px); bottom: auto; right: auto; left: 0; }
  body.avec-onglets main.container { padding-bottom: 3rem; }
  main.container { padding-top: 1.75rem; }
}

/* --- Cartes --- */
article,
.carte {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1rem 1.1rem;
  margin: 0;
}
article > header,
article > footer {
  margin: -1rem -1.1rem 0.75rem;
  padding: 0.8rem 1.1rem;
  background: none;
  border-bottom: 1px solid var(--bord);
}
article > footer { margin: 0.75rem -1.1rem -1rem; border-top: 1px solid var(--bord); border-bottom: 0; }
article > :last-child { margin-bottom: 0; }

/* Les grandes sections de page deviennent des cartes, sans rien changer aux gabarits */
main.container > section:not(.ecran-plan, .chat) {
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1rem 1.1rem;
}
main.container > section:not(.ecran-plan, .chat) > :last-child { margin-bottom: 0; }
.ecran-plan > h2 { margin-top: 0.25rem; }
main.container > section:not(.ecran-plan, .chat) ul:not(.blocs) { padding-left: 0; margin-bottom: 0.5rem; }
main.container > section:not(.ecran-plan, .chat) ul:not(.blocs) > li { list-style: none; padding: 0.55rem 0; border-bottom: 1px solid var(--bord); }
main.container > section:not(.ecran-plan, .chat) ul:not(.blocs) > li:last-child { border-bottom: 0; }

/* --- Boutons --- */
button,
[role="button"],
input[type="submit"] {
  min-height: 44px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.55rem 1.1rem;
  box-shadow: none;
}
button.secondary,
[role="button"].secondary,
button.outline,
[role="button"].outline {
  background: var(--surface);
  border: 1px solid #d5d9e0;
  color: var(--texte);
}
button.secondary:hover,
[role="button"].secondary:hover,
button.outline:hover,
[role="button"].outline:hover { background: var(--surface-2); border-color: #c4c9d2; color: var(--texte); }
button:focus-visible, [role="button"]:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Formulaires --- */
input:not([type="checkbox"], [type="radio"], [type="range"]),
select,
textarea {
  border-radius: 12px;
  min-height: 44px;
}
textarea { min-height: 5.5rem; }
label { font-weight: 500; font-size: 0.93rem; }
fieldset { margin-bottom: 1rem; }

/* --- Détails repliables (nutrition, consignes…) --- */
main details { border-bottom: 0; margin-bottom: 0.5rem; }
main details > summary { color: var(--accent); font-size: 0.93rem; font-weight: 500; }
main details > summary::after { filter: none; opacity: 0.6; }
main details[open] > summary { margin-bottom: 0.6rem; }

/* --- Barres de progression --- */
progress { height: 8px; border-radius: 999px; background: var(--surface-2); margin-bottom: 0.4rem; }
progress::-webkit-progress-bar { background: var(--surface-2); border-radius: 999px; }
progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--accent); border-radius: 999px; }

/* --- Pastilles et badges --- */
.badge,
.pastille-statut {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--texte-2);
  vertical-align: middle;
}
.pastille-statut.valide { background: var(--vert-doux); color: var(--vert); }
.cle { color: var(--accent); }

/* --- Messages --- */
.alerte-plafond,
.bandeau-acces { border-radius: 12px; }
.bandeau-acces { border-radius: 0; }
.alerte-plafond { background: var(--orange-doux); color: var(--orange); padding: 0.7rem 1rem; margin: 0; }
.erreur { color: var(--rouge); }
.succes { color: var(--vert); }

/* --- Accueil --- */
.accueil-forme {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1d4ed8 0%, #3b6cf0 100%) !important;
  border: 0 !important;
  color: #fff;
  padding: 1.25rem 1.25rem 1.1rem !important;
}
.accueil-forme h2, .accueil-forme p { color: #fff; }
.accueil-forme h2 { font-size: 1.45rem; margin-bottom: 0.35rem; }
.accueil-forme .accueil-date { color: rgba(255, 255, 255, 0.8); font-size: 0.85rem; text-transform: none; }
.accueil-forme .accueil-info { color: rgba(255, 255, 255, 0.85); }
.accueil-forme .pastille { width: 12px; height: 12px; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); }
.accueil-forme.feu-vert { background: linear-gradient(135deg, #15803d 0%, #22a052 100%) !important; }
.accueil-forme.feu-orange { background: linear-gradient(135deg, #b45309 0%, #d97706 100%) !important; }
.accueil-forme.feu-rouge { background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%) !important; }
.feu-vert .pastille, .feu-orange .pastille, .feu-rouge .pastille { background: #fff; }

.point-matin-titre { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.3rem; }
.indicateur { padding: 0.5rem 0; }
.indicateur p { margin-bottom: 0.25rem; }
.indicateur span { color: var(--texte-2); }

/* --- Plan de la semaine --- */
.ecran-plan { gap: 0.75rem; }
.plan-nav { display: flex; justify-content: space-between; align-items: center; margin: 0; font-size: 0.9rem; }
.plan-nav > a:first-child { display: none; } /* « ‹ Accueil » : déjà dans les onglets */
.plan-nav span { display: flex; justify-content: space-between; width: 100%; color: var(--bord); }
.plan-nav a { color: var(--texte-2); padding: 0.4rem 0.75rem; border: 1px solid var(--bord); border-radius: 999px; background: var(--surface); }
.plan-nav a:hover { text-decoration: none; background: var(--surface-2); }
.carte { gap: 0.4rem; }
.carte.verif { border-left: 4px solid var(--vert); }
.carte.verif.attention { border-left-color: var(--orange); }

/* --- Chat --- */
.bulle { border-radius: 18px; padding: 0.65rem 0.95rem; box-shadow: var(--ombre); }
.bulle-athlete { border-bottom-right-radius: 6px; }
.bulle-coach { border-bottom-left-radius: 6px; border-color: var(--bord); }
.chat-formulaire { background: var(--fond); padding: 0.6rem 0; }
body.avec-onglets .chat-formulaire { bottom: calc(4.4rem + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { body.avec-onglets .chat-formulaire { bottom: 0; } }

/* --- Tableaux (page technique) --- */
table { font-size: 0.9rem; }
th { font-weight: 600; color: var(--texte-2); }

/* Retouches après essai dans le navigateur */
.barre details > summary.onglet { color: var(--texte-3); font-weight: 500; line-height: 1.2; }
.barre details > summary.onglet.actif { color: var(--accent); }
.accueil-forme > * { margin-top: 0; }
.accueil-forme .accueil-date { margin-bottom: 0.6rem; }

/* Écrans activités : mêmes cartes que le reste */
.ecran-activites { gap: 0.75rem; }
.carte-act { border-radius: var(--rayon); box-shadow: var(--ombre); border-color: var(--bord); padding: 1rem 1.1rem; }
.carte-act h3 { margin: 0; }
.avis-coach-analyse { background: #fffbeb; border-color: #f5e3b3; }
.grille-chiffres { background: var(--surface); }
.chiffre-nom { color: var(--texte-3); }
.bouton-effort span { background: var(--surface); color: var(--texte); border-radius: 12px; }
.bouton-effort span:hover { background: var(--surface-2); }
.ecran-activites .retour, .retour { font-size: 0.9rem; }
.titre-analyse { margin: 0.6rem 0 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #92400e; }
.titre-analyse + p { margin-top: 0.1rem; }

/* --- Jauges graduées de l'accueil (app/services/jauges.py) --- */
.jauge { padding: 0.9rem 0 1rem; border-bottom: 1px solid var(--bord); }
.jauge:first-of-type { padding-top: 0.2rem; }
.jauge-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.jauge-nom { font-weight: 600; font-size: 0.95rem; }
.jauge-nom small { font-weight: 400; color: var(--texte-3); }
.jauge-valeur { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.jauge-mot { display: inline-block; margin-left: 0.35rem; padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; vertical-align: 3px; letter-spacing: 0; }
.ton-bleu { background: var(--accent-doux); color: #1e3a8a; }
.ton-vert { background: var(--vert-doux); color: #166534; }
.ton-orange { background: var(--orange-doux); color: #92400e; }
.ton-rouge { background: var(--rouge-doux); color: #991b1b; }
.ton-neutre { background: var(--surface-2); color: var(--texte-2); }
.jauge-svg { display: block; width: 100%; height: auto; margin-top: 0.5rem; overflow: visible; }
.jauge-svg .z-neutre { fill: #e2e5ea; }
.jauge-svg .z-bleu-1 { fill: #c7d7f7; }
.jauge-svg .z-bleu-2 { fill: #93b2f0; }
.jauge-svg .z-bleu-3 { fill: #5b86e5; }
.jauge-svg .z-bleu-4 { fill: #2f5fd0; }
.jauge-svg .z-vert { fill: #86cf9c; }
.jauge-svg .z-vert-clair { fill: #c9ebd2; }
.jauge-svg .z-jaune { fill: #f5c97a; }
.jauge-svg .z-rouge { fill: #f0a3a3; }
.jauge-sep { fill: #fff; }
.jauge-cible { fill: rgba(21, 128, 61, 0.07); stroke: #15803d; stroke-width: 1.6; stroke-dasharray: 4 3; }
.jauge-repere { fill: var(--texte); stroke: #fff; stroke-width: 2; }
.jauge-grad { font-size: 9px; fill: var(--texte-3); font-variant-numeric: tabular-nums; }
.jauge-zone { font-size: 9px; fill: var(--texte-2); }
.jauge-phrase { margin: 0.35rem 0 0; font-size: 0.88rem; color: var(--texte-2); }
.jauge-phrase + .jauge-phrase { margin-top: 0.15rem; }
.jauge-objectif { color: #166534; font-weight: 600; }
.jauge-legende { margin: 0.6rem 0 0.4rem; font-size: 0.78rem; color: var(--texte-3); display: flex; align-items: center; gap: 0.4rem; }
.jauge-legende-cible { display: inline-block; width: 22px; height: 12px; border: 2px dashed #15803d; border-radius: 4px; }
@media (max-width: 420px) { .jauge-zones { font-size: 0.62rem; } }

/* --- Attente pendant un appel long (voir attente.js) --- */
.attente-message { color: var(--pico-muted-color); font-size: 0.9rem; margin-top: 0.5rem; }
button[aria-busy="true"], input[aria-busy="true"] { cursor: progress; }