/* Santé — interface mobile d'abord */

:root {
    --fond: #f4f6f5;
    --carte: #ffffff;
    --texte: #1c2624;
    --texte-doux: #5f6d6a;
    --bordure: #dfe5e3;
    --principal: #0f766e;
    --principal-doux: #e0f2ef;
    --ok: #15803d;
    --attention: #b45309;
    --attention-doux: #fef3e2;
    --erreur: #b91c1c;
    --erreur-doux: #fdecec;
    --reco: #4f46e5;
    --reco-doux: #eef0ff;
    --rayon: 14px;
    --ombre: 0 1px 2px rgba(0, 0, 0, .05), 0 2px 8px rgba(0, 0, 0, .04);
    /* Graphiques : palette catégorielle validée (daltonisme, contraste) sur la surface des cartes */
    --serie-1: #2a78d6;
    --serie-2: #eb6834;
    --serie-3: #1baf7a;
    --encre-muette: #898781;
    --grille: #e1e0d9;
    --axe: #c3c2b7;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --fond: #111716;
        --carte: #1a2220;
        --texte: #e6ecea;
        --texte-doux: #9aa8a5;
        --bordure: #2c3735;
        --principal: #2dd4bf;
        --principal-doux: #123430;
        --ok: #4ade80;
        --attention: #fbbf24;
        --attention-doux: #3a2c10;
        --erreur: #f87171;
        --erreur-doux: #3b1717;
        --reco: #a5b4fc;
        --reco-doux: #20234a;
        --ombre: none;
        --serie-1: #3987e5;
        --serie-2: #d95926;
        --serie-3: #199e70;
        --encre-muette: #898781;
        --grille: #2c3735;
        --axe: #3f4b49;
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body.avec-nav { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

a { color: var(--principal); }

h1, h2, h3 { margin: 0; line-height: 1.2; }
h2 { font-size: 1.05rem; margin-bottom: .75rem; }
h2 small, h3 small { font-weight: normal; color: var(--texte-doux); font-size: .8rem; }
h3 { font-size: .95rem; margin-bottom: .5rem; }

/* ---------- En-tête ---------- */

.entete {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: calc(.75rem + env(safe-area-inset-top)) 16px .75rem;
    background: var(--principal);
    color: #fff;
}
.entete h1 { flex: 1; font-size: 1.15rem; }
.entete a { color: #fff; text-decoration: none; font-size: 1.4rem; line-height: 1; padding: .1rem .3rem; }
.entete-retour { font-size: 2rem !important; margin-top: -.2rem; }

@media (prefers-color-scheme: dark) {
    .entete { background: #0d3b37; }
}

.contenu {
    max-width: 640px;
    margin: 0 auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---------- Navigation ---------- */

.nav-bas {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 10;
    display: flex;
    background: var(--carte);
    border-top: 1px solid var(--bordure);
    padding-bottom: env(safe-area-inset-bottom);
}
.nav-bas a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 2px 10px;
    font-size: .68rem;
    color: var(--texte-doux);
    text-decoration: none;
    min-width: 0;
}
.nav-bas a span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.nav-icone { font-size: 1.3rem; line-height: 1; }
.nav-bas a.actif { color: var(--principal); font-weight: 600; }

.fab {
    position: fixed;
    right: 16px;
    bottom: calc(84px + env(safe-area-inset-bottom));
    z-index: 9;
    background: var(--erreur);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    padding: .7rem 1rem;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}

/* ---------- Cartes ---------- */

.carte {
    display: block;
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 16px;
    box-shadow: var(--ombre);
    color: inherit;
}
a.carte { text-decoration: none; }

.carte-alerte {
    background: var(--attention-doux);
    border-color: transparent;
    color: var(--attention);
    font-weight: 600;
}

.carte-coach { border-left: 4px solid var(--reco); }
.carte-coach h2 { font-size: 1.25rem; margin: .4rem 0; }
.carte-coach p { margin: .25rem 0; }

.raisons { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--texte-doux); font-size: .9rem; }
.conseil { margin-top: .75rem !important; padding-top: .75rem; border-top: 1px solid var(--bordure); }

details.carte > summary { list-style: none; cursor: pointer; }
details.carte > summary::-webkit-details-marker { display: none; }
details.carte > summary h2 { margin-bottom: 0; }
details.carte[open] > summary h2 { margin-bottom: .75rem; }
details.carte:not([open]) > summary h2::after { content: " ▸"; color: var(--texte-doux); }

.date-du-jour { margin: 0; color: var(--texte-doux); }
.intro { margin: 0; }

/* ---------- Étiquettes (données / estimations / recommandations) ---------- */

.etiquette {
    display: inline-block;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .15rem .45rem;
    border-radius: 6px;
    vertical-align: middle;
}
.etiquette-reco { background: var(--reco-doux); color: var(--reco); }
.etiquette-estim { background: var(--attention-doux); color: var(--attention); text-transform: none; letter-spacing: 0; }
.estimation { color: var(--attention); }

/* ---------- Tuiles du tableau de bord ---------- */

.tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tuile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 12px 14px;
    box-shadow: var(--ombre);
    color: inherit;
    text-decoration: none;
    min-width: 0;
}
.tuile-large { grid-column: 1 / -1; }
.tuile-titre { font-size: .8rem; color: var(--texte-doux); }
.tuile-valeur { font-size: 1.45rem; font-weight: 700; white-space: nowrap; }
.tuile-valeur small { font-size: .9rem; font-weight: normal; color: var(--texte-doux); }
.tuile-detail { font-size: .8rem; color: var(--texte-doux); }

/* ---------- Choix de l'activité ---------- */

.choix-activites { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choix {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "emoji nom" "emoji duree" "emoji note";
    column-gap: .6rem;
    align-items: center;
    text-align: left;
    padding: .7rem .8rem;
    border: 1px solid var(--bordure);
    border-radius: 12px;
    background: var(--fond);
    color: var(--texte);
    font: inherit;
    cursor: pointer;
}
.choix:active { transform: scale(.98); }
.choix-emoji { grid-area: emoji; font-size: 1.6rem; }
.choix-nom { grid-area: nom; font-weight: 600; font-size: .9rem; line-height: 1.2; }
.choix-duree { grid-area: duree; font-size: .78rem; color: var(--texte-doux); }
.choix-note { grid-area: note; font-size: .72rem; color: var(--attention); }
.choix-deconseille { opacity: .65; }

/* ---------- Listes ---------- */

.liste { list-style: none; margin: 0; padding: 0; }
.liste > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--bordure);
}
.liste > li:last-child { border-bottom: 0; }
.liste .aide { display: block; }
.liste-separateur {
    font-size: .78rem;
    font-weight: 600;
    color: var(--texte-doux);
    text-transform: uppercase;
    letter-spacing: .03em;
    padding-top: 1rem !important;
    border-bottom: 0 !important;
}
.liste-lien { display: flex; justify-content: space-between; align-items: center; gap: .75rem; width: 100%; color: inherit; text-decoration: none; }
.commentaire { font-size: .88rem; font-style: italic; color: var(--texte-doux); }
.kcal { white-space: nowrap; font-size: .9rem; }
.actions { display: flex; align-items: center; gap: .4rem; }
.ok { color: var(--ok); font-weight: 600; }
.a-faire { color: var(--attention); font-weight: 600; }
.vide { color: var(--texte-doux); margin: 0; }

/* ---------- Formulaires ---------- */

.formulaire { display: flex; flex-direction: column; gap: 12px; }
.formulaire .carte { display: flex; flex-direction: column; gap: 12px; }
.formulaire .carte > h2 { margin-bottom: 0; }

label { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; color: var(--texte-doux); }
label small { font-size: .78rem; }

input, select, textarea {
    width: 100%;
    font: inherit;
    font-size: 16px; /* évite le zoom automatique sur iOS */
    color: var(--texte);
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: 10px;
    padding: .65rem .7rem;
    min-height: 44px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--principal); outline-offset: -1px; border-color: transparent; }
.champ-grand { font-size: 1.3rem; font-weight: 600; }

.ligne { display: flex; gap: 10px; }
.ligne > label { flex: 1; min-width: 0; }
.ligne-courte { max-width: 50%; }

.libelle { margin: 0; font-size: .88rem; color: var(--texte-doux); }
.aide { font-size: .8rem; color: var(--texte-doux); margin: 0; }

.sous-formulaire { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--bordure); }

/* Échelle 1-10 */
.echelle-choix { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.echelle-choix label, .puces label { display: block; color: var(--texte); }
.echelle-choix input, .puces input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; min-height: 0; }
.echelle-choix span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    border: 1px solid var(--bordure);
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}
.echelle-choix input:checked + span { background: var(--principal); border-color: var(--principal); color: #fff; }
.echelle-choix input:focus-visible + span, .puces input:focus-visible + span { outline: 2px solid var(--principal); outline-offset: 2px; }
.echelle-texte { margin: .5rem 0 0; min-height: 2.6em; font-size: .9rem; }

/* Puces de choix */
.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puces span {
    display: inline-block;
    padding: .45rem .8rem;
    border: 1px solid var(--bordure);
    border-radius: 999px;
    font-size: .9rem;
    cursor: pointer;
}
.puces input:checked + span { background: var(--principal-doux); border-color: var(--principal); color: var(--principal); font-weight: 600; }

/* Tableaux de saisie */
.table-tension, .table-objectifs { width: 100%; border-collapse: collapse; }
.table-tension th, .table-objectifs th { font-size: .8rem; color: var(--texte-doux); font-weight: 600; text-align: left; padding: 4px; }
.table-tension td, .table-objectifs td { padding: 4px; }
.table-tension thead th { text-align: center; }
.table-tension tbody th { width: 1.5rem; }
.table-tension input { text-align: center; font-size: 1.1rem; }
.table-tension .moyenne td { text-align: center; font-weight: 700; padding-top: 8px; }
.table-objectifs td.double { display: flex; gap: 4px; }
.table-objectifs input { padding: .5rem; }

/* Historique */
.table-defilante { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
.table-historique { width: 100%; border-collapse: collapse; font-size: .88rem; white-space: nowrap; }
.table-historique th { text-align: left; font-size: .75rem; color: var(--texte-doux); font-weight: 600; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--bordure); }
.table-historique td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--bordure); }
.table-historique tr.vide td:first-child a { color: var(--texte-doux); }

/* ---------- Boutons ---------- */

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 44px;
    padding: .6rem 1.1rem;
    border: 1px solid var(--principal);
    border-radius: 12px;
    background: var(--carte);
    color: var(--principal);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.bouton-principal { background: var(--principal); color: #fff; }
@media (prefers-color-scheme: dark) { .bouton-principal { color: #062320; } }
.bouton-petit { min-height: 36px; padding: .35rem .75rem; font-size: .85rem; white-space: nowrap; }
.bouton-ok { border-color: var(--ok); color: var(--ok); }
.bouton-discret { border-color: transparent; background: none; color: var(--texte-doux); font-weight: normal; }
.bouton-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--texte-doux);
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
}
.bloc { width: 100%; }
.centre { text-align: center; }
.marge-haut { margin-top: 1rem; }

.traitement { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.traitement .aide { display: block; }

/* ---------- Messages ---------- */

.flash { padding: .75rem 1rem; border-radius: 12px; background: var(--principal-doux); color: var(--principal); }
.flash-info { background: var(--reco-doux); color: var(--reco); }
.flash-erreur { background: var(--erreur-doux); color: var(--erreur); }
.flash ul { margin: .3rem 0 0; padding-left: 1.1rem; }

/* ---------- Alimentation ---------- */

.navigation-jour { display: flex; align-items: center; justify-content: space-between; }
.navigation-jour a, .navigation-jour span {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; text-decoration: none;
}

.bilan { display: grid; grid-template-columns: 1fr auto; gap: .35rem 1rem; margin: 0; }
.bilan dt { color: var(--texte-doux); }
.bilan dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.bilan .bilan-detail { font-size: .82rem; font-weight: normal; padding-left: .75rem; }

.statut-bilan { margin: .75rem 0 .25rem; padding: .6rem .8rem; border-radius: 10px; background: var(--fond); }
.aide-inline { font-size: .8rem; color: var(--texte-doux); white-space: nowrap; }

.compteurs { display: flex; flex-direction: column; gap: 6px; }
.compteur { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.compteur > div { display: flex; align-items: center; gap: 4px; }
.compteur input { width: 3.5rem; text-align: center; padding: .4rem; -moz-appearance: textfield; }
.compteur input::-webkit-inner-spin-button, .compteur input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.compteur .bouton-icone { border: 1px solid var(--bordure); width: 40px; height: 40px; font-size: 1.2rem; color: var(--principal); }

/* ---------- Graphiques ---------- */

.filtres a { text-decoration: none; }
.filtres a span { display: inline-block; padding: .45rem .9rem; border: 1px solid var(--bordure); border-radius: 999px; color: var(--texte); background: var(--carte); }
.filtres a.actif span { background: var(--principal-doux); border-color: var(--principal); color: var(--principal); font-weight: 600; }
.puces-petites { margin-bottom: .5rem; }
.puces-petites span { padding: .3rem .7rem; font-size: .82rem; }

.graphique { position: relative; height: 230px; }
.graphique-bas { height: 170px; margin-top: .5rem; }
.graphique-vide canvas { opacity: .25; }
.graphique-vide::after {
    content: "Pas encore de données sur la période";
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--texte-doux); font-size: .9rem;
}

.donnees-tableau { margin-top: .5rem; font-size: .85rem; }
.donnees-tableau summary { cursor: pointer; color: var(--principal); padding: .3rem 0; }
.donnees-tableau > div { max-height: 260px; overflow: auto; }
.donnees-tableau table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.donnees-tableau th { position: sticky; top: 0; background: var(--carte); text-align: left; font-weight: 600; color: var(--texte-doux); }
.donnees-tableau th, .donnees-tableau td { padding: 4px 8px 4px 0; border-bottom: 1px solid var(--bordure); white-space: nowrap; }

.observation { margin: .75rem 0 0; padding: .7rem .8rem; border-radius: 10px; background: var(--reco-doux); }
.observation:empty { display: none; }

/* ---------- Coach : priorités, semaine, bilan ---------- */

.marge-bas { margin-bottom: .6rem; }

.carte-bilan { background: var(--reco-doux); border-color: transparent; color: var(--reco); font-weight: 600; }

.priorites { display: flex; flex-direction: column; gap: 8px; }
.priorite {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    text-align: left;
    padding: .65rem .8rem;
    border: 1px solid var(--bordure);
    border-radius: 12px;
    background: var(--fond);
    color: var(--texte);
    font: inherit;
    cursor: pointer;
}
.priorite:active { transform: scale(.99); }
.priorite:first-child:not(.priorite-secondaire) { border-color: var(--reco); background: var(--reco-doux); }
.priorite-secondaire { opacity: .7; }
.priorite-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.priorite-ligne { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.badge { font-size: .7rem; font-weight: 600; padding: .1rem .45rem; border-radius: 6px; background: var(--carte); color: var(--texte-doux); border: 1px solid var(--bordure); }
.badge-elevee { background: var(--reco); border-color: var(--reco); color: #fff; }
.badge-moyenne { color: var(--reco); border-color: var(--reco); }
.badge-deconseille { color: var(--attention); border-color: var(--attention); }
@media (prefers-color-scheme: dark) { .badge-elevee { color: #15183a; } }

.carte-semaine .semaine-entete { display: flex; align-items: baseline; justify-content: space-between; }
.carte-semaine h2 { margin: 0; }
.score { font-size: 1.6rem; font-weight: 700; color: var(--principal); }

.objectifs-semaine { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; }
.objectifs-semaine li { display: grid; grid-template-columns: 1.4rem 1fr auto; align-items: baseline; gap: .4rem; }
.objectif-icone { font-weight: 700; text-align: center; }
.objectif-realise { color: var(--texte-doux); white-space: nowrap; font-variant-numeric: tabular-nums; }
.objectif-atteint .objectif-icone { color: var(--ok); }
.objectif-manque .objectif-icone { color: var(--erreur); }
.objectif-en_cours .objectif-icone, .objectif-sans_donnees .objectif-icone { color: var(--texte-doux); }
.objectif-sans_donnees { color: var(--texte-doux); }

.carte-observation p:first-of-type { margin: .5rem 0 .25rem; font-weight: 500; }
.carte-observation .aide { margin: 0; }

.score-carte { display: flex; flex-direction: column; align-items: center; gap: .2rem; text-align: center; }
.score-grand { font-size: 3rem; font-weight: 700; line-height: 1.1; color: var(--principal); }

.points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.points li { padding-left: 1.4rem; position: relative; }
.points li::before { position: absolute; left: 0; font-weight: 700; }
.points-forts li::before { content: "✓"; color: var(--ok); }
.points-axes li::before { content: "→"; color: var(--attention); }

.scores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.scores a { display: grid; grid-template-columns: 7.5rem 1fr 4.2rem; align-items: center; gap: .6rem; color: inherit; text-decoration: none; font-size: .88rem; }
.scores-valeur { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jauge { height: 10px; border-radius: 999px; background: var(--principal-doux); overflow: hidden; }
.jauge span { display: block; height: 100%; border-radius: 999px; background: var(--principal); }

.observations { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .7rem; }
.observations .aide { display: block; }

/* ---------- Demandes de modification ---------- */

.entete-demande { font-size: 1.15rem !important; }

.liste-demandes { list-style: none; margin: 0; padding: 0; }
.demande { display: flex; align-items: flex-start; gap: .6rem; padding: .7rem 0; border-bottom: 1px solid var(--bordure); }
.demande:last-child { border-bottom: 0; }
.demande-case label { display: block; padding: .15rem; }
.demande-case input[type="checkbox"] { width: 24px; height: 24px; min-height: 0; margin: 0; accent-color: var(--ok); cursor: pointer; }
.demande-corps { flex: 1; min-width: 0; }
.demande-corps p { margin: 0 0 .2rem; overflow-wrap: anywhere; }
.demande-corrigee .demande-corps p { text-decoration: line-through; color: var(--texte-doux); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 360px) {
    .tuile-valeur { font-size: 1.2rem; }
    .choix-activites { grid-template-columns: 1fr; }
}