/* ==========================================================
   DEBRIEF
========================================================== */

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

.mpr-debrief-hero h1{
    font-size:var(--mpr-font-xl);
    margin:8px 0 20px;
}

/* Sections "à plat" façon course_detail.php — un titre + une ligne verte
   sous le titre, pas de carte blanche encadrée (voir .mpr-section-header/
   .mpr-section-identity/.mpr-section-line, réutilisées de sections.css).
   Neutralise .mpr-card UNIQUEMENT là où cette classe est ajoutée en plus :
   .mpr-time-card à l'intérieur de la hero reste une vraie carte,
   volontairement (c'est le seul chiffre mis en avant, comme sur
   course_detail.php). */
.mpr-debrief-plain{
    background:transparent;
    border:none;
    box-shadow:none;
    padding:0;
}

/* ---- Parcours (carte + conformité) ---- */

.mpr-debrief-top-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr;
    gap:16px;
}

/* z-index:1 : même correctif que .mpr-course-map (charts.css) — sans
   contexte d'empilement propre, les panneaux Leaflet passaient au-dessus
   du header collant pendant le défilement mobile. */
.mpr-debrief-map{
    position:relative;
    z-index:1;
    height:260px;
    margin-top:14px;
    border-radius:10px;
    background:var(--mpr-background);
    overflow:hidden;
}

/* Mêmes fonds de carte (Plan/Relief/Satellite) + plein écran que le profil
   "Parcours" de course_detail.php (voir .mpr-map-controls/.mpr-course-map,
   charts.css, dont on réutilise ici les classes de contrôle sans le
   min-height:360px propre à cette autre page — #map est la cible du plein
   écran directement, pas un wrapper séparé, voir course_debrief.js). */
.mpr-debrief-map:fullscreen,
.mpr-debrief-map:-webkit-full-screen{
    width:100vw;
    height:100vh;
}

.mpr-conformity-list{
    margin-top:14px;
    display:flex;
    flex-direction:column;
}

.mpr-conformity-row{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;
    gap:8px;
    padding:9px 0;
    border-bottom:1px solid var(--mpr-border);
    font-size:var(--mpr-font-sm);
}

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

    .mpr-debrief-top-grid{
        grid-template-columns:1fr;
    }

    /* Sans ça, la carte "Conformité" (grid item de .mpr-debrief-top-grid)
       héritait de min-width:auto — le comportement par défaut d'un grid
       item, qui refuse de rétrécir sous la taille min-content de son
       contenu. Comme .mpr-conformity-row impose 460px de min-width, c'est
       toute la CARTE qui était forcée à 460px (débordant le viewport) au
       lieu que .mpr-conformity-list gère seule le défilement horizontal
       via son overflow-x:auto — le scroll interne restait donc inerte.
       Repéré lors du re-test mobile pré-panel. */
    .mpr-debrief-top-grid > .mpr-card{
        min-width:0;
    }

    /* .mpr-conformity-list défile déjà horizontalement en dessous de
       768px (comme .mpr-segments-table-wrapper ailleurs sur le site) —
       600px de min-width imposait un défilement bien plus large que
       nécessaire pour 5 courtes valeurs numériques, ce qui a été
       confondu avec un contenu "coupé"/invisible lors du re-test
       mobile pré-panel alors que la colonne "Réel" restait accessible
       par un swipe. Largeur resserrée pour limiter le défilement requis
       et rendre les colonnes suivantes visibles plus tôt. */
    .mpr-conformity-list{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .mpr-conformity-row{
        min-width:460px;
    }
}

.mpr-conformity-row:last-child{
    border-bottom:none;
}

.mpr-conformity-row span:first-child{
    color:var(--mpr-text-light);
}

.mpr-conformity-row span:not(:first-child){
    text-align:right;
    color:var(--mpr-text);
    font-weight:var(--mpr-weight-semibold);
}

.mpr-conformity-header span{
    font-size:var(--mpr-font-xs);
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--mpr-text-light) !important;
    font-weight:var(--mpr-weight-semibold) !important;
}

.mpr-conformity-total{
    border-top:1px solid var(--mpr-border);
    margin-top:4px;
    padding-top:12px;
}

.mpr-conformity-total span:first-child{
    color:var(--mpr-text);
    font-weight:var(--mpr-weight-bold);
}

/* Concordance (%) et Impact temps total partagent cette classe plutôt que
   ":last-child" — la ligne a 2 valeurs mises en avant, pas seulement la
   dernière colonne. */
.mpr-conformity-total-value{
    color:var(--mpr-primary);
    font-size:var(--mpr-font-md);
    font-weight:var(--mpr-weight-bold);
}

/* Carte "Et pour la prochaine ?" en pied de page débrief — boucle le
   cycle de prépa vers la course suivante. Texte à gauche, bouton à
   droite ; empilé sous 768px. Placée en fin de fichier (après le
   @media plus haut) : ses sélecteurs sont uniques, mais on garde la
   règle de base avant tout override mobile pour rester cohérent avec la
   convention de cascade du projet. */
.mpr-debrief-next{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    background:rgba(46, 125, 50, .05);
    border-color:var(--mpr-primary-light);
}

.mpr-debrief-next-text .mpr-section-subtitle{
    margin-bottom:0;
    max-width:62ch;
}

.mpr-debrief-next .mpr-btn{
    flex-shrink:0;
}

@media (max-width:768px){
    .mpr-debrief-next .mpr-btn{
        width:100%;
        justify-content:center;
    }
}

/* ==========================================================
   ARRÊTS SAUVAGES RATTACHÉS — bouton "annuler"
   Une puce par arrêt rattaché à un ravito, affichée dans la bulle de
   détail de la frise (voir plus bas) — soumet immédiatement le
   détachement (assign_wild_stop.php, nutrition_bag_id vide), même
   logique d'action immédiate que le <select> de rattachement.
========================================================== */

.mpr-wild-stop-unassign-form{
    display:inline-block;
    margin:2px 4px 2px 0;
}

.mpr-wild-stop-unassign-btn{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:2px 8px;
    border:1px solid var(--mpr-border);
    border-radius:20px;
    background:var(--mpr-surface);
    color:var(--mpr-text-light);
    font-size:11px;
    cursor:pointer;
    transition:border-color .15s ease, color .15s ease;
}

.mpr-wild-stop-unassign-btn:hover{
    border-color:var(--mpr-danger);
    color:var(--mpr-danger);
}

.mpr-wild-stop-unassign-btn svg{
    width:11px;
    height:11px;
}

/* ==========================================================
   COMPARATIF DES PAUSES
   Liste verticale, une ligne par ravito : deux barres Prévu/Réel sur une
   échelle commune, couleur = statut (voir conformityStatus(), PHP).
   Détail + actions insérés en ligne au clic (frisePauses.js). Remplace
   une 1ère version en frise SVG positionnée par km, jugée peu lisible
   (étiquettes en angle, temps prévu invisible) — voir le commit du
   2026-10-15.
========================================================== */

.mpr-pauses-legend{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin:16px 0 4px;
    font-size:var(--mpr-font-xs);
    color:var(--mpr-text-light);
}

.mpr-pauses-legend-item{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.mpr-pauses-swatch{
    width:14px;
    height:8px;
    border-radius:2px;
    flex-shrink:0;
}

.mpr-pauses-swatch.predicted{ background:#D7DBE0; }
.mpr-pauses-swatch.success{ background:var(--mpr-primary); }
.mpr-pauses-swatch.warning{ background:var(--mpr-warning); }
.mpr-pauses-swatch.danger{ background:var(--mpr-danger); }

/* ==========================================================
   LISTE — une ligne par ravito, deux barres (Prévu/Réel)
========================================================== */

.mpr-pauses-list{
    margin-top:10px;
    border:1px solid var(--mpr-border);
    border-radius:12px;
    overflow:hidden;
}

.mpr-pause-row{
    display:grid;
    grid-template-columns:minmax(0,150px) minmax(0,1fr);
    gap:16px;
    align-items:center;
    padding:12px 16px;
    border-bottom:1px solid var(--mpr-border);
    cursor:pointer;
    transition:background .15s ease;
}

.mpr-pause-row:last-child{
    border-bottom:none;
}

.mpr-pause-row:hover,
.mpr-pause-row.active{
    background:var(--mpr-background);
}

.mpr-pause-row:focus-visible{
    outline:2px solid var(--mpr-primary);
    outline-offset:-2px;
}

.mpr-pause-row.danger{
    background:#FBEAEA;
}

.mpr-pause-row.danger:hover,
.mpr-pause-row.danger.active{
    background:#F7DCDC;
}

.mpr-pause-row-name{
    font-weight:var(--mpr-weight-semibold);
    font-size:13.5px;
    color:var(--mpr-text);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.mpr-pause-merged-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:14px;
    height:14px;
    margin-left:4px;
    border-radius:50%;
    background:var(--mpr-primary);
    color:#fff;
    font-size:10px;
    font-weight:700;
    line-height:1;
    vertical-align:middle;
}

.mpr-pause-row-km{
    font-size:11.5px;
    color:var(--mpr-text-light);
    margin-top:1px;
    font-variant-numeric:tabular-nums;
}

.mpr-pause-bars{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
}

.mpr-pause-bar-track{
    display:flex;
    align-items:center;
    gap:8px;
    height:14px;
}

.mpr-pause-bar-fill{
    height:100%;
    border-radius:4px;
    flex-shrink:0;
    transition:width .4s ease;
}

.mpr-pause-bar-fill.predicted{ background:#D7DBE0; }
.mpr-pause-bar-fill.success{ background:var(--mpr-primary); }
.mpr-pause-bar-fill.warning{ background:var(--mpr-warning); }
.mpr-pause-bar-fill.danger{ background:var(--mpr-danger); }

.mpr-pause-bar-value{
    font-size:11.5px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}

.mpr-pause-bar-value.on-track,
.mpr-pause-bar-value.muted{ color:var(--mpr-text-light); font-weight:600; }
.mpr-pause-bar-value.success{ color:var(--mpr-primary); }
.mpr-pause-bar-value.warning{ color:var(--mpr-warning); }
.mpr-pause-bar-value.danger{ color:var(--mpr-danger); }

@media (max-width:600px){
    .mpr-pause-row{
        grid-template-columns:1fr;
        gap:6px;
    }
}

/* ==========================================================
   ARRÊTS SAUVAGES — résumé compact, détail repliable
========================================================== */

.mpr-wild-summary{
    margin-top:14px;
    border:1px solid var(--mpr-border);
    border-radius:12px;
    padding:14px 16px;
}

.mpr-wild-summary-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}

.mpr-wild-summary-title{
    font-weight:var(--mpr-weight-semibold);
    font-size:13.5px;
    color:var(--mpr-text);
}

.mpr-wild-summary-sub{
    font-size:11.5px;
    color:var(--mpr-text-light);
    margin-top:2px;
}

.mpr-wild-toggle{
    display:flex;
    align-items:center;
    gap:4px;
    border:none;
    background:transparent;
    padding:0;
    font-size:12px;
    font-weight:600;
    color:var(--mpr-primary);
    cursor:pointer;
    white-space:nowrap;
}

.mpr-wild-toggle svg{
    width:13px;
    height:13px;
    transition:transform .2s ease;
}

.mpr-wild-toggle.is-open svg{
    transform:rotate(180deg);
}

/* [hidden] doit continuer à l'emporter sur display:grid ci-dessous —
   sans ce correctif, la spécificité égale entre .mpr-wild-detail et la
   règle UA [hidden]{display:none} laisse gagner la dernière déclarée
   (la nôtre), et l'attribut hidden posé par PHP n'a alors plus aucun
   effet visuel : le détail des arrêts sauvages s'affichait toujours
   ouvert, même avant le premier clic sur "Détail". */
.mpr-wild-detail[hidden]{
    display:none;
}

.mpr-wild-detail{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
    gap:8px 14px;
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid var(--mpr-border);
}

.mpr-wild-item{
    font-size:12px;
    color:var(--mpr-text-light);
    font-variant-numeric:tabular-nums;
    cursor:pointer;
    border-radius:6px;
    padding:4px 6px;
    margin:-4px -6px;
    transition:background .15s ease;
}

.mpr-wild-item:hover,
.mpr-wild-item.active{
    background:var(--mpr-background);
}

.mpr-wild-item:focus-visible{
    outline:2px solid var(--mpr-primary);
    outline-offset:-2px;
}

.mpr-wild-item b{
    color:var(--mpr-text);
    font-weight:600;
}

/* ---- Détail + actions (inséré en ligne après la ligne/l'arrêt cliqué,
   voir frisePauses.js) ---- */

.mpr-frise-popover{
    position:relative;
    width:auto;
    /* Span toutes les colonnes quand inséré dans .mpr-wild-detail (grille) —
       sans effet quand inséré dans .mpr-pauses-list (pas une grille), les
       deux contextes d'insertion possibles (voir frisePauses.js). */
    grid-column:1 / -1;
    background:var(--mpr-background);
    border:1px solid var(--mpr-border);
    border-radius:10px;
    box-shadow:none;
    padding:12px 14px;
    margin:8px 16px;
    font-size:12px;
}

.mpr-frise-popover-close{
    position:absolute;
    top:8px;
    right:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    padding:0;
    border:none;
    background:transparent;
    color:var(--mpr-text-light);
    cursor:pointer;
    border-radius:50%;
}

.mpr-frise-popover-close:hover{
    background:var(--mpr-background);
    color:var(--mpr-text);
}

.mpr-frise-popover-close svg{
    width:13px;
    height:13px;
}

.mpr-frise-popover-title{
    font-weight:var(--mpr-weight-semibold);
    color:var(--mpr-text);
    padding-right:20px;
    margin-bottom:8px;
}

.mpr-frise-popover-rows{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:4px 10px;
    margin-bottom:4px;
}

.mpr-frise-popover-rows span{
    color:var(--mpr-text-light);
}

.mpr-frise-popover-rows b{
    text-align:right;
    font-weight:var(--mpr-weight-semibold);
}

.mpr-frise-popover .mpr-wild-stop-unassign-form{
    display:block;
    margin:8px 0 0;
}

.mpr-frise-popover .mpr-wild-stop-unassign-btn{
    width:100%;
    justify-content:center;
}

.mpr-frise-popover .mpr-frise-assign-form{
    margin-top:8px;
}

.mpr-frise-popover .mpr-select{
    width:100%;
}

@media (max-width:768px){
    .mpr-frise-popover{
        margin:8px 10px;
        font-size:11.5px;
    }
}

/* ==========================================================
   MON RESSENTI (voir services/DebriefRessentiService.php)
   Résumé à côté de la carte "Écart", formulaire replié sous la
   hero, rappel dans "Et pour la prochaine ?".
========================================================== */

.mpr-debrief-hero .mpr-hero-summary{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    align-items:stretch;
}

.mpr-ressenti-card{
    flex:1 1 320px;
    max-width:640px;
    min-width:0;
    padding:18px 22px;
    border-radius:16px;
    display:flex;
    flex-direction:column;
    gap:10px;
    box-shadow:
        0 8px 20px rgba(0,0,0,.04),
        0 2px 6px rgba(0,0,0,.03);
}

.mpr-ressenti-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.mpr-ressenti-card-head .mpr-time-label{
    margin-bottom:0;
}

.mpr-ressenti-edit-link{
    font-size:13px;
    font-weight:600;
    color:var(--mpr-primary);
}

.mpr-ressenti-card .mpr-btn{
    align-self:flex-start;
}

.mpr-ressenti-invite{
    margin:0;
    font-size:13px;
    line-height:1.5;
    color:var(--mpr-text-light);
}

.mpr-ressenti-niveau-resume{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:16px;
}

.mpr-ressenti-dots{
    display:inline-flex;
    gap:3px;
}

.mpr-ressenti-dots span{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#E5E7EB;
}

.mpr-ressenti-incident-tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

.mpr-ressenti-tag{
    font-size:12px;
    font-weight:600;
    background:#F3F4F6;
    border-radius:999px;
    padding:4px 10px;
}

.mpr-ressenti-quote{
    margin:0;
    font-size:13px;
    line-height:1.5;
    font-style:italic;
    color:#374151;
    background:#F9FAFB;
    border-radius:10px;
    padding:9px 12px;
    overflow-wrap:anywhere;
}

/* ---- Formulaire ---- */

.mpr-ressenti-form-card{
    scroll-margin-top:96px;
}

.mpr-ressenti-form{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.mpr-ressenti-form-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}

.mpr-ressenti-form-head h2{
    margin:0;
}

.mpr-ressenti-fieldset{
    border:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:10px;
    min-width:0;
}

.mpr-ressenti-fieldset legend,
.mpr-ressenti-legend{
    padding:0;
    margin-bottom:10px;
    font-size:14px;
    font-weight:700;
    color:var(--mpr-text);
}

.mpr-ressenti-niveaux{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:8px;
}

.mpr-ressenti-niveau input,
.mpr-ressenti-chip input{
    position:absolute;
    opacity:0;
    width:1px;
    height:1px;
}

.mpr-ressenti-niveau-box{
    min-height:64px;
    border:1.5px solid var(--mpr-border);
    border-radius:12px;
    background:var(--mpr-surface);
    color:#374151;
    font-size:13px;
    font-weight:600;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    cursor:pointer;
    text-align:center;
    padding:0 4px;
}

.mpr-ressenti-niveau-box .mpr-ressenti-dots span.on{
    background:var(--ressenti-couleur);
}

.mpr-ressenti-niveau input:checked + .mpr-ressenti-niveau-box{
    background:var(--ressenti-couleur);
    border-color:var(--ressenti-couleur);
    color:#FFFFFF;
}

.mpr-ressenti-niveau input:checked + .mpr-ressenti-niveau-box .mpr-ressenti-dots span{
    background:rgba(255,255,255,.35);
}

.mpr-ressenti-niveau input:checked + .mpr-ressenti-niveau-box .mpr-ressenti-dots span.on{
    background:#FFFFFF;
}

.mpr-ressenti-niveau input:focus-visible + .mpr-ressenti-niveau-box,
.mpr-ressenti-chip input:focus-visible + span{
    outline:3px solid rgba(46,125,50,.35);
    outline-offset:2px;
}

.mpr-ressenti-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.mpr-ressenti-chip span{
    display:inline-flex;
    align-items:center;
    min-height:40px;
    padding:0 14px;
    border:1.5px solid var(--mpr-border);
    border-radius:999px;
    background:var(--mpr-surface);
    color:#374151;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
}

.mpr-ressenti-chip input:checked + span{
    background:#E8F5E9;
    border-color:var(--mpr-primary);
    color:#1B5E20;
}

.mpr-ressenti-kms{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.mpr-ressenti-km-row{
    display:flex;
    align-items:center;
    gap:12px;
    background:#F9FAFB;
    border:1px solid #EEF0F2;
    border-radius:12px;
    padding:8px 10px 8px 14px;
}

.mpr-ressenti-km-row[hidden],
.mpr-ressenti-km-hint[hidden],
.mpr-ressenti-chute[hidden],
.mpr-ressenti-produits[hidden],
.mpr-ressenti-form-card[hidden]{
    display:none;
}

.mpr-ressenti-km-label{
    flex:1;
    min-width:0;
    font-size:13px;
    font-weight:600;
}

.mpr-ressenti-km-row label{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:var(--mpr-text-light);
    white-space:nowrap;
}

.mpr-ressenti-km-row .mpr-input{
    width:80px;
    padding:8px 10px;
    font-weight:600;
}

.mpr-ressenti-km-hint{
    margin:0;
}

.mpr-ressenti-chute{
    display:flex;
    flex-direction:column;
    gap:10px;
    background:#FFF7ED;
    border:1px solid #FED7AA;
    border-radius:12px;
    padding:14px 16px;
    color:#7C2D12;
    font-size:13px;
}

.mpr-ressenti-chute p{
    margin:0;
    line-height:1.5;
}

/* « Un produit en cause ? » — affiché avec "Troubles digestifs" coché. */
.mpr-ressenti-produits{
    display:flex;
    flex-direction:column;
    gap:10px;
    background:#F9FAFB;
    border:1px solid #EEF0F2;
    border-radius:12px;
    padding:14px 16px;
    font-size:13px;
    color:#374151;
}

.mpr-ressenti-produits p{
    margin:0;
    line-height:1.5;
}

/* Résumé de la carte "Mon ressenti". */
.mpr-ressenti-mal-digere{
    margin:0;
    font-size:12px;
    color:#991B1B;
}

.mpr-ressenti-chute label{
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
    cursor:pointer;
}

.mpr-ressenti-chute input{
    width:18px;
    height:18px;
    accent-color:#C2410C;
}

.mpr-ressenti-comment{
    display:flex;
    flex-direction:column;
}

.mpr-ressenti-comment .mpr-textarea{
    resize:vertical;
    line-height:1.5;
}

.mpr-ressenti-counter{
    align-self:flex-end;
    margin-top:6px;
}

.mpr-ressenti-actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    border-top:1px solid #F0F1F3;
    padding-top:18px;
}

@media (max-width:768px){

    .mpr-ressenti-card{
        max-width:none;
    }

    .mpr-ressenti-niveaux{
        gap:6px;
    }

    .mpr-ressenti-niveau-box{
        min-height:56px;
        font-size:11px;
        padding:0 2px;
        overflow:hidden;
    }

    /* 5 boutons sur ~330px : pastilles réduites, sinon elles débordent
       des boutons (constaté au test mobile). */
    .mpr-ressenti-niveau-box .mpr-ressenti-dots{
        gap:2px;
    }

    .mpr-ressenti-niveau-box .mpr-ressenti-dots span{
        width:5px;
        height:5px;
    }

    .mpr-ressenti-chip span{
        font-size:12px;
        padding:0 12px;
    }

    .mpr-ressenti-actions .mpr-btn{
        flex:1 1 100%;
        justify-content:center;
    }
}