/* ==========================================================
   NUTRITION
========================================================== */

.mpr-nutrition-page{
    padding:28px 36px 0;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.mpr-nutrition-top-grid{
    display:grid;
    grid-template-columns:1.6fr 1fr;
    align-items:start;
    gap:16px;
}

/* nutrition.php : la carte "Paramètres de la course" et ses curseurs ont
   besoin de plus de largeur que l'ancien formulaire à 3 champs. */
.mpr-nutrition-top-grid.has-rates{
    grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
}

/* [hidden] doit l'emporter sur les display:flex/inline-flex ci-dessous
   (pastille "Personnalisé", lien "Revenir aux paramètres initiaux"...),
   basculés par assets/js/nutritionRates.js. */
.mpr-nutrition-page [hidden]{
    display:none !important;
}

/* .mpr-stat-row span (cards.css) grise tous les span de la ligne, y
   compris les besoins recalculés en direct à l'intérieur de la valeur. */
.mpr-stat-row strong span{
    color:inherit;
}

.mpr-nutrition-settings-card .mpr-nutrition-settings-form{
    flex-direction:column;
    align-items:stretch;
}

.mpr-nutrition-settings-form{
    margin-top:12px;
    display:flex;
    align-items:flex-end;
    gap:12px;
}

.mpr-nutrition-settings-form .mpr-form-group{
    margin-bottom:0;
}

.mpr-nutrition-settings-form input{
    width:100%;
}

/* ---- Paramètres de la course : taux horaires (curseur, −/+, valeur
   exacte), voir assets/js/nutritionRates.js ---- */

.mpr-nutrition-settings-meta{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:var(--mpr-font-sm);
    color:var(--mpr-text-light);
}

.mpr-nutrition-settings-intro{
    margin:6px 0 0;
    font-size:13px;
    color:var(--mpr-text-light);
}

.mpr-rate-row{
    display:grid;
    grid-template-columns:96px 36px minmax(0,1fr) 36px auto;
    grid-template-areas:"label minus range plus exact";
    align-items:center;
    gap:10px;
}

.mpr-rate-row-head{
    display:contents;
}

.mpr-rate-row-label{
    grid-area:label;
    font-size:13px;
    font-weight:var(--mpr-weight-bold);
    color:var(--mpr-text);
}

.mpr-rate-exact{
    grid-area:exact;
    display:flex;
    align-items:center;
    gap:6px;
    font-size:var(--mpr-font-sm);
    color:var(--mpr-text-light);
    white-space:nowrap;
}

.mpr-nutrition-settings-form input.mpr-rate-number{
    width:72px;
    padding:6px 8px;
    text-align:right;
    font-weight:var(--mpr-weight-bold);
    font-variant-numeric:tabular-nums;
}

.mpr-rate-range{
    grid-area:range;
    margin:0;
    accent-color:var(--mpr-primary);
    cursor:pointer;
}

.mpr-rate-step{
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    padding:0;
    border:1px solid var(--mpr-border);
    border-radius:10px;
    background:var(--mpr-surface);
    font:inherit;
    font-size:18px;
    font-weight:var(--mpr-weight-semibold);
    color:var(--mpr-text);
    cursor:pointer;
}

.mpr-rate-step:hover{
    border-color:var(--mpr-primary);
    color:var(--mpr-primary);
}

.mpr-rate-step-minus{ grid-area:minus; }
.mpr-rate-step-plus{ grid-area:plus; }

.mpr-rate-custom-summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:4px 12px;
    padding-top:12px;
    border-top:1px solid var(--mpr-border);
    font-size:13px;
    color:var(--mpr-text);
}

.mpr-rate-reset-all,
.mpr-ravito-rate-reset{
    min-height:32px;
    padding:0 4px;
    border:none;
    background:transparent;
    font:inherit;
    font-weight:var(--mpr-weight-semibold);
    color:var(--mpr-primary);
    cursor:pointer;
}

.mpr-rate-reset-all{
    font-size:13px;
    text-align:left;
}

.mpr-rate-reset-all:hover,
.mpr-ravito-rate-reset:hover{
    text-decoration:underline;
}

/* "Enregistré" bref après chaque réglage (ou erreur, qui reste). */
.mpr-rate-status{
    font-size:11px;
    color:var(--mpr-text-light);
    opacity:0;
    transition:opacity .2s;
}

.mpr-rate-status:empty{
    display:none;
}

.mpr-rate-status.is-visible{
    opacity:1;
}

.mpr-rate-status.is-error{
    color:var(--mpr-danger);
}

/* ---- Sac de ravitaillement ---- */

.mpr-ravito-meta-line{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:16px;
    padding:14px 0;
    margin-top:8px;
    border-top:1px solid var(--mpr-border);
    border-bottom:1px solid var(--mpr-border);
}

.mpr-ravito-meta-line span{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:var(--mpr-font-sm);
    color:var(--mpr-text-light);
}

.mpr-ravito-meta-line svg{
    width:14px;
    height:14px;
}

/* Vue "Par ravito" : les pastilles prévu/besoin quittent la ligne d'infos
   pour leur propre rangée juste dessous (.mpr-ravito-rates), chacune avec
   son curseur discret — les deux rangées forment une seule bande. */
.mpr-ravito-meta-line.has-rates{
    padding-bottom:6px;
    border-bottom:none;
}

.mpr-ravito-rates{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:10px 18px;
    padding:6px 0 12px;
    border-bottom:1px solid var(--mpr-border);
}

.mpr-ravito-rate{
    display:flex;
    flex-direction:column;
    gap:4px;
    width:236px;
    max-width:100%;
}

.mpr-ravito-rate .mpr-status-pill{
    align-self:flex-start;
    font-size:var(--mpr-font-sm);
}

.mpr-ravito-rate-slider{
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 2px;
}

/* Curseur volontairement très discret (piste 3px, pouce 12px) : bleu
   quand le tronçon a son propre taux, vert quand il suit la course. */
.mpr-mini-range{
    -webkit-appearance:none;
    appearance:none;
    flex:1;
    min-width:0;
    height:22px;
    margin:0;
    background:transparent;
    cursor:pointer;
}

.mpr-mini-range::-webkit-slider-runnable-track{
    height:3px;
    border-radius:2px;
    background:var(--mpr-border);
}

.mpr-mini-range::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:12px;
    height:12px;
    margin-top:-4.5px;
    border-radius:50%;
    background:var(--mpr-surface);
    border:2px solid var(--mpr-primary);
}

.mpr-mini-range::-moz-range-track{
    height:3px;
    border-radius:2px;
    background:var(--mpr-border);
}

.mpr-mini-range::-moz-range-thumb{
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--mpr-surface);
    border:2px solid var(--mpr-primary);
}

.mpr-mini-range.is-custom::-webkit-slider-thumb{
    background:#1D4ED8;
    border-color:#1D4ED8;
}

.mpr-mini-range.is-custom::-moz-range-thumb{
    background:#1D4ED8;
    border-color:#1D4ED8;
}

.mpr-mini-range:focus-visible{
    outline:2px solid rgba(46,125,50,.4);
    outline-offset:2px;
    border-radius:4px;
}

.mpr-ravito-rate-value{
    flex-shrink:0;
    min-width:62px;
    text-align:right;
    font-size:11px;
    font-weight:var(--mpr-weight-semibold);
    color:var(--mpr-text-light);
    font-variant-numeric:tabular-nums;
}

.mpr-ravito-rate-value.is-custom{
    color:#1D4ED8;
}

.mpr-ravito-rate-reset{
    display:inline-flex;
    align-items:center;
    align-self:center;
    gap:6px;
    font-size:var(--mpr-font-sm);
}

.mpr-ravito-rate-reset svg{
    width:13px;
    height:13px;
}

.mpr-ravito-rates .mpr-rate-status{
    align-self:center;
}

/* Pastille "Personnalisé" du titre d'une carte ravito, poussée à droite
   avec le bouton "Pré-remplir". */
.mpr-status-pill.mpr-rate-custom-pill{
    margin-left:auto;
    background:#DBEAFE;
    color:#1E40AF;
}

.mpr-ravito-content{
    display:grid;
    grid-template-columns:260px 1fr;
    gap:28px;
    margin-top:18px;
}

@media (max-width:768px){
    .mpr-nutrition-page{
        padding:20px 16px 0;
    }

    .mpr-nutrition-top-grid,
    .mpr-nutrition-top-grid.has-rates,
    .mpr-ravito-content{
        grid-template-columns:1fr;
    }

    /* Taux de la course : libellé + valeur exacte sur une ligne, curseur
       pleine largeur entre −/+ (plus grands, au doigt) dessous. */
    .mpr-rate-row{
        grid-template-columns:40px minmax(0,1fr) 40px;
        grid-template-areas:
            "head head head"
            "minus range plus";
        row-gap:6px;
    }

    .mpr-rate-row-head{
        grid-area:head;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
    }

    .mpr-rate-step{
        width:40px;
        height:40px;
    }

    /* Une pastille + son curseur par ligne, sur toute la largeur. */
    .mpr-ravito-rate{
        width:100%;
    }

    .mpr-mini-range{
        height:28px;
    }

    .mpr-mini-range::-webkit-slider-thumb{
        width:14px;
        height:14px;
        margin-top:-5.5px;
    }

    .mpr-mini-range::-moz-range-thumb{
        width:11px;
        height:11px;
    }

    /* Sur mobile, .mpr-ravito-content passe en 1 seule colonne : "Analyse
       ravito" (stats) s'affichait avant "Contenu du sac" (les produits),
       obligeant à défiler toute l'analyse + le graphique avant de voir ses
       propres articles. order:-1 inverse l'ordre VISUEL sans toucher
       l'ordre du DOM (accessibilité/lecture d'écran inchangées). Repéré
       lors de l'audit mobile 2026-10-14. */
    .mpr-ravito-items{
        order:-1;
    }

    /* .mpr-ravito-item-row étend .mpr-list-item (cards.css), qui passe en
       flex-wrap sur mobile : le bloc nom+poids prend sa propre ligne, puis
       la quantité + le bouton supprimer sont poussés sur une 3e ligne
       pleine largeur. Ici, on garde la quantité/suppression à côté du nom
       (comme sur desktop) plutôt que sur une ligne séparée — le nom passe
       à la ligne tout seul si besoin, la quantité/suppression ne bougent
       pas. Repéré lors de l'audit mobile 2026-10-14. */
    .mpr-ravito-item-row{
        flex-wrap:nowrap;
        align-items:flex-start;
    }

    .mpr-ravito-item-row > div:first-child{
        min-width:0;
        flex:1;
    }

    .mpr-ravito-item-row .mpr-list-item-right{
        width:auto;
        flex-shrink:0;
    }
}

.mpr-ravito-subheading{
    font-size:var(--mpr-font-base);
    margin-bottom:10px;
}

/* En-tête de type de produit ("Barres", "Gels"...) dans la liste "À
   emporter" de la vue "Regroupé" — voir groupNutritionItemsByType()
   dans NutritionEngine.php. */
.mpr-ravito-type-heading{
    font-size:var(--mpr-font-xs);
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--mpr-text-light);
    font-weight:var(--mpr-weight-semibold);
    margin:14px 0 8px;
}

.mpr-ravito-type-heading:first-child{
    margin-top:0;
}

/* Rangée de boutons du mini-profil par ravito/regroupement (voir
   renderMiniProfileControls() dans nutrition.php et
   assets/js/ravitoProfileChart.js) — réutilise .mpr-profile-controls-split/
   .mpr-profile-control/.mpr-weather-control de charts.css (même style que
   course_detail.php), avec un retour à la ligne en plus : ces cartes sont
   bien plus étroites que le profil général, les 2 groupes de boutons n'y
   tiennent jamais sur une seule ligne. */
.mpr-mini-profile-controls{
    flex-wrap:wrap;
    row-gap:6px;
    margin-bottom:10px;
}

.mpr-mini-profile-controls .mpr-profile-controls-group{
    flex-wrap:wrap;
}

.mpr-ravito-qty-input{
    width:56px;
    padding:6px 8px;
    text-align:center;
}

.mpr-ravito-add-form{
    display:flex;
    gap:10px;
    margin-top:14px;
}

.mpr-ravito-add-form .mpr-select{
    flex:1;
}

/* ---- Actions (raccourcis) ---- */

.mpr-nutrition-actions{
    display:flex;
    gap:10px;
    margin-top:14px;
}

/* ---- Profil altimétrique du tronçon ---- */

.mpr-ravito-profile-block{
    margin-top:16px;
}

/* Chart.js avec maintainAspectRatio:false a besoin d'un parent à
   hauteur explicite, sinon le graphique grandit indéfiniment à
   chaque cycle de resize (le canvas n'a rien pour borner sa taille). */
.mpr-ravito-profile-chart-wrap{
    position:relative;
    height:160px;
}

.mpr-ravito-profile-head{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:10px;
}

.mpr-slope-legend{
    display:none;
    gap:10px;
    font-size:var(--mpr-font-xs);
    color:var(--mpr-text-light);
}

.mpr-slope-legend.is-visible{
    display:flex;
}

.mpr-slope-legend .legend-red{ color:#EF4444; }
.mpr-slope-legend .legend-orange{ color:#F97316; }
.mpr-slope-legend .legend-yellow{ color:#EAB308; }
.mpr-slope-legend .legend-green{ color:var(--mpr-primary); }