/* =====================================================================
   L'appli des Gloutons - feuille de style

   Mobile d'abord : la saisie se fait debout, dans une cuisine ou dans
   une salle de sport, jamais assis devant un grand ecran.

   Theme sombre assume, pas une variante : le charbon tire sur le brun
   plutot que sur le bleu, parce que c'est une application qui parle de
   nourriture. Un seul look, tenu partout.
   ===================================================================== */

:root {
    /* Fonds, du plus profond au plus proche */
    --fond:        #12100f;
    --fond-relief: #171514;
    --carte:       #1c1a18;
    --carte-haute: #232019;

    /* Traits : sur fond sombre une bordure opaque fait sale.
       Du blanc tres dilue attrape la lumiere sans salir. */
    --bordure:       rgba(255, 255, 255, 0.07);
    --bordure-forte: rgba(255, 255, 255, 0.14);

    /* Texte */
    --encre:       #f6f3ef;
    --encre-douce: #a9a19a;
    /* Le gris le plus sombre encore lisible : les etiquettes en petites
       capitales passent la barre des 4,5:1 sur le fond des cartes. */
    --encre-faible:#8b837c;

    /* Accent de marque : l'or du logo. Contraste 10,5:1 sur les cartes,
       soit exactement celui du vert qu'il remplace — le passage a l'or
       ne coute rien en lisibilite. */
    --or:         #e8c66a;
    --or-clair:   #f0d68c;
    --or-profond: #d4af37;
    --or-sombre:  #2a2313;
    --or-halo:    rgba(232, 198, 106, 0.14);

    /* Le vert ne sert plus qu'a ce qui va bien : un message de succes,
       un controle au vert, un minuteur fini. Le distinguer de l'accent
       de marque evite qu'une couleur d'habillage se lise comme une
       information. */
    --vert:        #4ade80;
    --vert-sombre: #163d2a;
    --vert-halo:   rgba(74, 222, 128, 0.16);

    /* Alerte : une orange chaude, jamais un rouge d'erreur. Depasser un
       plafond de sel n'est pas une faute grave. */
    --alerte:      #f5854f;
    --alerte-fond: rgba(245, 133, 79, 0.12);

    --rayon:       18px;
    --rayon-petit: 12px;
    --gouttiere:   1rem;

    /* Hauteur de la barre du bas, reprise pour degager le contenu. */
    --barre-basse: 4.25rem;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    min-height: 100dvh;
    background: var(--fond);
    color: var(--encre);
    font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* Une lueur tres large derriere l'en-tete : sans elle, un fond
       sombre uniforme fait ecran eteint. Chaude et cuivree, pour
       repondre a l'or de la marque plutot que de le contredire. */
    background-image: radial-gradient(120% 60% at 50% -10%, #2a2318 0%, transparent 60%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

a { color: var(--or); text-underline-offset: 3px; }

/* Tous les nombres s'alignent en colonne, y compris quand ils changent. */
.chiffre__valeur, .serie__champ input, .jauge, .diagnostic span,
input[inputmode="decimal"], input[inputmode="numeric"] {
    font-variant-numeric: tabular-nums;
}

::selection { background: var(--or-sombre); color: var(--encre); }

/* ---------- Ossature ---------- */

.entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem var(--gouttiere);
    background: linear-gradient(var(--fond-relief), rgb(23 21 20 / 0.86));
    border-bottom: 1px solid var(--bordure);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 20;
}

.entete__marque {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 650;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    text-decoration: none;
    color: var(--encre);
}

/* Le monogramme prend l'or ; le nom reste a l'encre. Deux dorures cote
   a cote se seraient neutralisees. */
.marque__signe {
    color: var(--or);
    flex: none;
    filter: drop-shadow(0 1px 6px rgb(232 198 106 / 0.28));
}

/* Petites capitales espacees : le nom se lit comme une marque, plus
   comme un titre de page. */
.marque__nom {
    font-size: 0.92rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

/* La navigation du haut ne sert que sur grand ecran : au telephone
   c'est la barre du bas qui prend le relais. */
.entete__nav { display: none; }

.entete__sortie {
    color: var(--encre-douce);
    text-decoration: none;
    font-size: 0.9rem;
}

.contenu {
    max-width: 760px;
    margin: 0 auto;
    padding: 1.25rem var(--gouttiere);
    /* De quoi ne jamais passer sous la barre du bas. */
    padding-bottom: calc(var(--barre-basse) + env(safe-area-inset-bottom) + 2rem);
}

.pied {
    max-width: 760px;
    margin: 2rem auto 0;
    padding: 0 var(--gouttiere)
             calc(var(--barre-basse) + env(safe-area-inset-bottom) + 1.5rem);
    color: var(--encre-faible);
    font-size: 0.82rem;
    text-align: center;
}

.pied p { margin: 0.35rem 0; }

/* La mention de source est une obligation de licence, pas un appel a
   cliquer : elle reste au meme niveau de gris que le reste du pied. */
.pied__source { font-size: 0.76rem; }
.pied__source a { color: inherit; text-decoration: underline; }

/* ---------- Barre de navigation du bas ----------
   Au telephone, le haut de l'ecran est hors de portee du pouce. Les
   quatre destinations vivent donc en bas, la ou la main se trouve. */

.nav-basse {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    justify-content: space-around;
    gap: 0.25rem;
    padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom));
    background: rgb(23 21 20 / 0.92);
    border-top: 1px solid var(--bordure);
    backdrop-filter: blur(16px);
}

.nav-basse__lien {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 52px;
    padding: 0.3rem 0.2rem;
    border-radius: var(--rayon-petit);
    color: var(--encre-faible);
    text-decoration: none;
    font-size: 0.68rem;
    letter-spacing: 0.01em;
    transition: color 0.18s ease, background-color 0.18s ease;
}

.nav-basse__lien svg { width: 22px; height: 22px; }

.nav-basse__lien--actif {
    color: var(--or);
    background: var(--or-halo);
}

/* ---------- Blocs ---------- */

.carte {
    position: relative;
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 1.15rem;
    margin-bottom: 0.9rem;
    /* Le lisere clair sur l'arete haute : c'est lui qui donne du relief
       sur fond sombre, bien plus qu'une ombre portee. */
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05),
                0 1px 2px rgb(0 0 0 / 0.4);
}

h1 {
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0 0 1rem;
}

h2 {
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    margin: 0 0 0.7rem;
}

/* Intitule de section : petit, espace, discret. Il laisse toute la
   place aux chiffres qu'il annonce. */
.etiquette {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--encre-faible);
    margin: 0 0 0.85rem;
}

.discret { color: var(--encre-douce); font-size: 0.88rem; }

/* Une estimation ne doit jamais avoir l'air d'une mesure. */
.estimee { color: var(--encre-douce); font-style: italic; }

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

.message {
    padding: 0.75rem 0.95rem;
    border-radius: var(--rayon-petit);
    border: 1px solid var(--bordure);
    margin: 0 0 1rem;
    font-size: 0.92rem;
}

.message--succes {
    background: var(--vert-sombre);
    border-color: rgb(74 222 128 / 0.25);
    color: #b9f5cf;
}

.message--erreur {
    background: var(--alerte-fond);
    border-color: rgb(245 133 79 / 0.3);
    color: #ffc7a4;
}

.message--info { background: var(--fond-relief); color: var(--encre-douce); }

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

label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--encre-douce);
}

input, select, textarea {
    width: 100%;
    padding: 0.8rem 0.85rem;
    font: inherit;
    color: var(--encre);
    background: #131110;
    border: 1px solid var(--bordure-forte);
    border-radius: var(--rayon-petit);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input::placeholder { color: var(--encre-faible); }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--or);
    box-shadow: 0 0 0 3px var(--or-halo);
}

/* Le contour clavier reste visible partout ailleurs. */
a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 2px solid var(--or);
    outline-offset: 2px;
    border-radius: 6px;
}

.champ { margin-bottom: 0.95rem; }

/* Cible tactile d'au moins 44 px : on saisit souvent d'une main. */
.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 46px;
    padding: 0.7rem 1.25rem;
    font: inherit;
    font-weight: 600;
    color: #1a1408;
    background: var(--or);
    border: 0;
    border-radius: var(--rayon-petit);
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease;
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.2) inset, 0 6px 18px -8px var(--or);
}

.bouton:hover { filter: brightness(1.07); }
.bouton:active { transform: translateY(1px); }
.bouton[disabled] { filter: grayscale(0.6) brightness(0.8); cursor: default; }

.bouton--secondaire {
    background: transparent;
    color: var(--or);
    border: 1px solid rgb(232 198 106 / 0.35);
    box-shadow: none;
}

.bouton--secondaire:hover { background: var(--or-halo); filter: none; }

/* ---------- Accueil ---------- */

.modules {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.module {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem;
    background: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
    text-decoration: none;
    color: var(--encre);
    transition: border-color 0.18s ease, transform 0.12s ease;
}

.module:hover { border-color: var(--bordure-forte); transform: translateY(-2px); }
.module:active { transform: translateY(0); }

.module__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 0.35rem;
    border-radius: 11px;
    background: var(--or-halo);
    color: var(--or);
}

.module__titre { font-weight: 650; letter-spacing: -0.01em; }
.module__texte { font-size: 0.82rem; color: var(--encre-douce); line-height: 1.45; }

/* Un module pas encore ecrit : present, annonce, mais eteint. */
.module--a-venir { opacity: 0.45; cursor: default; }
.module--a-venir:hover { transform: none; border-color: var(--bordure); }
.module--a-venir .module__icone { background: rgb(255 255 255 / 0.05); color: var(--encre-douce); }

/* ---------- Chiffres ---------- */

.chiffres {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 1.75rem;
    margin-bottom: 0.9rem;
}

.chiffre { display: flex; flex-direction: column; gap: 0.1rem; }

.chiffre__valeur {
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.chiffre__libelle {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--encre-faible);
}

/* Le chiffre qui compte sur l'ecran. Un seul par carte, sinon il ne
   compte plus. */
.chiffre--vedette { flex: 1 1 100%; }

.chiffre--vedette .chiffre__valeur {
    font-size: 2.7rem;
    letter-spacing: -0.04em;
    background: linear-gradient(180deg, #ffffff, #cfe9d9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.chiffre--vedette .chiffre__libelle { font-size: 0.75rem; }

/* ---------- Jauges ---------- */

.jauge {
    height: 8px;
    background: rgb(255 255 255 / 0.07);
    border-radius: 999px;
    overflow: hidden;
    margin: 0.5rem 0;
}

.jauge__remplissage {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--or-profond), var(--or-clair));
    box-shadow: 0 0 12px -2px var(--or);
    transition: width 0.4s ease;
}

/* Un plafond depasse s'annonce, mais sans crier : c'est une information
   medicale, pas une punition. */
.jauge__remplissage--depasse {
    background: linear-gradient(90deg, #c9622f, var(--alerte));
    box-shadow: 0 0 12px -2px var(--alerte);
}

.plafond { margin-top: 0.9rem; }
.plafond p { margin: 0; }

/* ---------- Journal ---------- */

.jours {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.jours .bouton {
    min-height: 40px;
    width: 40px;
    padding: 0;
    font-size: 1.2rem;
    border-radius: 50%;
}

/* Deux par deux au telephone : les quatre moments ne tiennent pas sur
   une ligne, et une grille reguliere vaut mieux qu'un retour a la ligne
   qui laisse "Diner" tout seul. */
.moments {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
    margin-bottom: 1rem;
}

.moments__onglet {
    text-align: center;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--bordure);
    border-radius: 999px;
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--encre-douce);
    transition: all 0.18s ease;
}

.moments__onglet:hover { border-color: var(--bordure-forte); color: var(--encre); }

.moments__onglet--actif {
    background: var(--or-halo);
    border-color: rgb(232 198 106 / 0.4);
    color: var(--or);
    font-weight: 600;
}

/* Les favoris sont le chemin le plus court vers un repas enregistre :
   ils doivent tenir sous le pouce, sans defilement. */
.favoris {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.6rem;
}

.pastille {
    min-height: 46px;
    padding: 0.45rem 1rem;
    font: inherit;
    font-weight: 550;
    text-align: left;
    color: var(--encre);
    background: linear-gradient(var(--carte), #191716);
    border: 1px solid var(--bordure-forte);
    border-radius: 999px;
    cursor: pointer;
    width: auto;
    transition: border-color 0.18s ease, transform 0.12s ease;
}

.pastille:hover { border-color: var(--or); }
.pastille:active { transform: scale(0.97); }

.pastille__quantite {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--encre-douce);
}

.resultats { list-style: none; padding: 0; margin: 0.6rem 0 0; }

.resultats li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--bordure);
}

.resultats li:last-child { border-bottom: 0; }

/* Toute la ligne est cliquable : on cherche un aliment d'une main. */
.resultats a {
    flex: 1 1 auto;
    text-decoration: none;
    color: var(--encre);
    padding: 0.25rem 0;
}

.resultats a:hover { color: var(--or); }

/* ---------- Listes cle / valeur ---------- */

.diagnostic { list-style: none; padding: 0; margin: 0; }

.diagnostic li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--bordure);
}

.diagnostic li:first-child { padding-top: 0; }
.diagnostic li:last-child { border-bottom: 0; padding-bottom: 0; }

/* Un controle qui passe est vert, pas dore : c'est une information,
   pas de l'habillage. */
.ok { color: var(--vert); font-weight: 600; }
.ko { color: var(--alerte); font-weight: 600; }

/* ---------- Sport ---------- */

.exercice h2 { font-size: 1.15rem; }

/* Une ligne = une serie. Tout doit tenir sur une seule ligne au
   telephone : on saisit ca debout, une main sur la machine. */
.serie {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.55rem 0;
    border-top: 1px solid var(--bordure);
}

.serie__num {
    flex: 0 0 4.2rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--encre-faible);
    padding-bottom: 0.85rem;
}

.serie__champ { flex: 1 1 0; min-width: 0; }

.serie__champ span {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--encre-faible);
    margin-bottom: 0.2rem;
}

.serie__champ input { margin: 0; text-align: center; font-weight: 600; }

.serie .bouton { flex: 0 0 auto; width: auto; margin: 0; padding: 0.7rem 0.95rem; }

/* Une serie deja validee s'efface : ce qui reste a faire doit ressortir
   plus que ce qui est fait. */
.serie--faite { opacity: 0.45; }

.ressenti { border: 0; padding: 0; margin: 0.9rem 0; }

.ressenti legend {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--encre-faible);
    padding: 0;
}

.ressenti label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: 1rem;
    min-height: 44px;
    color: var(--encre);
}

.ressenti input { width: auto; margin: 0; accent-color: var(--or); }

/* Minuteur de repos : colle en bas, au-dessus de la barre de
   navigation, toujours visible pendant la seance. */
.repos {
    position: fixed;
    left: 50%;
    bottom: calc(var(--barre-basse) + env(safe-area-inset-bottom) + 0.75rem);
    transform: translateX(-50%);
    background: var(--carte);
    color: var(--encre);
    border: 1px solid var(--bordure-forte);
    padding: 0.7rem 1.4rem;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.9);
    z-index: 40;
}

/* Repos termine : un signal, donc vert. Le dore de la marque ne
   pourrait pas se distinguer du reste de l'interface au coin de l'oeil. */
.repos--fini {
    background: var(--vert);
    color: #06170e;
    border-color: transparent;
}

/* ---------- Poids ---------- */

.courbe { width: 100%; height: auto; display: block; margin-top: 0.5rem; }

.courbe__grille     { stroke: rgb(255 255 255 / 0.08); stroke-width: 1; }
.courbe__graduation { fill: var(--encre-faible); font-size: 11px; }
.courbe__point      { fill: var(--encre-douce); opacity: 0.4; }

/* La moyenne mobile est la seule ligne pleine : c'est elle qui dit
   quelque chose, le poids brut n'est qu'un nuage autour. */
.courbe__moyenne {
    fill: none;
    stroke: var(--or);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgb(232 198 106 / 0.45));
}

.courbe__objectif {
    stroke: var(--or);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
    opacity: 0.45;
}

/* ---------- Details communs ---------- */

/* Saisie rapide : les champs cote a cote des qu'il y a la place. */
.saisie-rapide { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.saisie-rapide .champ { flex: 1 1 12rem; }
.saisie-rapide .repli,
.saisie-rapide > .bouton { flex: 1 1 100%; }

.repli { margin: 0.6rem 0; }

.repli summary {
    cursor: pointer;
    color: var(--or);
    font-size: 0.88rem;
    padding: 0.4rem 0;
    list-style: none;
}

.repli summary::-webkit-details-marker { display: none; }
.repli summary::before { content: "+ "; font-weight: 700; }
.repli[open] summary::before { content: "− "; }
.repli > *:not(summary) { margin-top: 0.6rem; }

.en-ligne { display: inline; }

/* Bouton qui se comporte comme un lien : action secondaire assumee. */
.lien-discret {
    background: none;
    border: 0;
    color: var(--or);
    font-size: 0.88rem;
    text-align: left;
    padding: 0.6rem 0;
    width: auto;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Croix d'effacement : visuellement discrete, mais la zone cliquable
   fait 44 px comme le reste. */
.lien-bouton {
    background: none;
    border: 0;
    color: var(--encre-faible);
    font-size: 1.15rem;
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin-left: 0.25rem;
    cursor: pointer;
    width: auto;
    vertical-align: middle;
    transition: color 0.15s ease;
}

.lien-bouton:hover { color: var(--alerte); }

/* Le lien d'invitation doit tenir en entier et se copier d'un clic. */
.lien-invitation {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.8rem;
    word-break: break-all;
    color: var(--encre-douce);
}

/* ---------- Grand ecran ---------- */

@media (min-width: 720px) {
    :root { --barre-basse: 0rem; }

    .entete__nav {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1.1rem;
        font-size: 0.92rem;
    }

    .entete__nav a { text-decoration: none; color: var(--encre-douce); }
    .entete__nav a:hover { color: var(--encre); }
    .entete__nav .entete__nav--actif { color: var(--or); font-weight: 600; }

    /* Au clavier et a la souris, la barre du bas n'a plus de raison
       d'etre : le haut de l'ecran est a portee de curseur. */
    .nav-basse { display: none; }

    .contenu { padding: 2rem var(--gouttiere) 3rem; }
    .pied { padding-bottom: 3rem; }

    h1 { font-size: 2rem; }
    .modules { grid-template-columns: repeat(4, 1fr); }
    .chiffre--vedette { flex: 0 0 auto; margin-right: 0.5rem; }

    /* La place ne manque plus : les quatre moments reprennent leur ligne. */
    .moments { display: flex; flex-wrap: wrap; }
    .moments__onglet { padding: 0.5rem 0.95rem; }
}

/* ---------- Mouvement ---------- */

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