/* ==========================================================
   PAGES PUBLIQUES DU CATALOGUE (pages/courses.php,
   pages/course_publique.php) — sans compte, indexées.
========================================================== */

body{
    background:var(--mpr-background);
}

.mpr-public-shell{
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.mpr-public-nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    row-gap:10px;
    padding:18px 48px;
    background:var(--mpr-surface);
    border-bottom:1px solid var(--mpr-border);
}

.mpr-public-logo img{
    height:28px;
    display:block;
}

.mpr-public-nav-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.mpr-public-main{
    flex:1;
    width:100%;
    max-width:1200px;
    box-sizing:border-box;
    margin:0 auto;
    padding:24px 48px 48px;
    display:flex;
    flex-direction:column;
    gap:22px;
}

.mpr-public-breadcrumb{
    font-size:13px;
    color:var(--mpr-text-light);
}

.mpr-public-breadcrumb a{
    color:var(--mpr-text-light);
}

.mpr-public-hero{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.mpr-public-hero h1{
    margin:0;
    font-size:34px;
    font-weight:800;
    letter-spacing:-.02em;
    line-height:1.15;
    text-wrap:balance;
}

.mpr-public-subtitle{
    margin:0;
    max-width:75ch;
    font-size:15px;
    color:#4B5563;
}

.mpr-public-chips{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:6px;
}

.mpr-public-chips div{
    display:flex;
    flex-direction:column;
    gap:1px;
    padding:10px 16px;
    border-radius:12px;
    background:var(--mpr-surface);
    box-shadow:var(--mpr-shadow);
}

.mpr-public-chips strong{
    font-size:20px;
    font-weight:800;
    font-variant-numeric:tabular-nums;
}

.mpr-public-chips span{
    font-size:12px;
    color:var(--mpr-text-light);
}

.mpr-public-main h2{
    margin:0;
    font-size:20px;
    font-weight:700;
}

.mpr-public-grid{
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
    gap:20px;
}

.mpr-public-map-card{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.mpr-public-map{
    height:380px;
    border-radius:12px;
    overflow:hidden;
    background:#E3EEE6;
}

.mpr-public-map-marker span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    box-sizing:border-box;
    border:2px solid #FFFFFF;
    border-radius:50%;
    color:#FFFFFF;
    font-size:10px;
    font-weight:700;
    box-shadow:0 1px 3px rgba(0,0,0,.3);
}

.mpr-public-cta{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:14px;
    padding:28px;
    border-radius:var(--mpr-radius);
    background:#1B3A1E;
    color:#FFFFFF;
}

.mpr-public-cta h2{
    font-size:24px;
    line-height:1.2;
    color:#FFFFFF;
}

.mpr-public-cta-eyebrow{
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#A5D6A7;
}

.mpr-public-cta ul{
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:8px;
    font-size:14px;
    color:#E8F5E9;
}

.mpr-public-cta li{
    display:flex;
    gap:10px;
}

.mpr-public-cta li::before{
    content:"✓";
    color:#81C784;
    font-weight:800;
}

.mpr-public-cta-button{
    align-self:flex-start;
    display:inline-flex;
    align-items:center;
    min-height:46px;
    padding:0 20px;
    border-radius:12px;
    background:#FFFFFF;
    color:#1B5E20;
    font-size:15px;
    font-weight:800;
    text-decoration:none;
}

.mpr-public-cta-link{
    font-size:13px;
    color:#C8E6C9;
}

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

.mpr-public-section-head span{
    font-size:12px;
    color:var(--mpr-text-light);
}

.mpr-public-profile{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.mpr-public-profile-grid{
    display:grid;
    grid-template-columns:56px minmax(0,1fr);
    gap:6px 8px;
}

.mpr-public-profile-axis{
    height:236px;
    box-sizing:border-box;
    padding-top:20px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    text-align:right;
    font-size:11px;
    color:var(--mpr-text-light);
    font-variant-numeric:tabular-nums;
}

.mpr-public-profile-chart{
    position:relative;
    height:236px;
}

.mpr-public-profile-chart svg{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:216px;
}

.mpr-public-profile-area{
    fill:#E8F5E9;
}

.mpr-public-profile-line{
    fill:none;
    stroke:var(--mpr-primary);
    stroke-width:2;
}

.mpr-public-profile-mark{
    position:absolute;
    top:20px;
    bottom:0;
    border-left:1px dashed rgba(107,114,128,.35);
}

.mpr-public-profile-num{
    position:absolute;
    top:0;
    transform:translateX(-50%);
    width:18px;
    height:18px;
    border-radius:50%;
    color:#FFFFFF;
    font-size:10px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
}

.mpr-public-profile-km{
    display:flex;
    justify-content:space-between;
    font-size:11px;
    color:var(--mpr-text-light);
}

.mpr-public-ravitos{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.mpr-public-table-wrap{
    overflow-x:auto;
}

.mpr-public-table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
}

.mpr-public-table th{
    padding:8px 10px 8px 0;
    border-bottom:1px solid var(--mpr-border);
    font-size:11px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    text-align:left;
    color:var(--mpr-text-light);
    white-space:nowrap;
}

.mpr-public-table td{
    padding:8px 10px 8px 0;
    border-bottom:1px solid #F3F4F6;
    vertical-align:middle;
}

.mpr-public-table .num{
    text-align:right;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}

.mpr-public-table td:nth-child(6),
.mpr-public-table td:nth-child(7){
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
}

.mpr-public-num{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:50%;
    color:#FFFFFF;
    font-size:11px;
    font-weight:700;
}

.mpr-public-type{
    display:block;
    font-size:12px;
    color:var(--mpr-text-light);
}

.mpr-public-source{
    margin:0;
    font-size:12px;
    color:var(--mpr-text-light);
}

.mpr-public-band{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:22px 28px;
    border-radius:var(--mpr-radius);
    background:#E8F5E9;
}

.mpr-public-band > div{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.mpr-public-band strong{
    font-size:18px;
}

.mpr-public-band span{
    font-size:14px;
    color:#374151;
}

.mpr-public-others{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.mpr-public-others-grid,
.mpr-public-index-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:12px;
}

.mpr-public-index-grid{
    grid-template-columns:repeat(3, minmax(0,1fr));
}

.mpr-public-others-grid a,
.mpr-public-index-card{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:14px 16px;
    text-decoration:none;
    color:var(--mpr-text);
}

.mpr-public-others-grid strong,
.mpr-public-index-card strong{
    color:#1B5E20;
}

.mpr-public-others-grid span,
.mpr-public-index-card span{
    font-size:12px;
    color:var(--mpr-text-light);
}

.mpr-public-index-figures{
    color:var(--mpr-text) !important;
}

@media (max-width:900px){

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

    .mpr-public-others-grid,
    .mpr-public-index-grid{
        grid-template-columns:1fr 1fr;
    }
}

@media (max-width:768px){

    .mpr-public-nav{
        padding:12px 16px;
    }

    .mpr-public-nav-optional{
        display:none;
    }

    .mpr-public-main{
        padding:18px 16px 32px;
        gap:16px;
    }

    .mpr-public-hero h1{
        font-size:24px;
    }

    .mpr-public-subtitle{
        font-size:13px;
    }

    .mpr-public-chips{
        display:grid;
        grid-template-columns:repeat(3, minmax(0,1fr));
        gap:8px;
    }

    .mpr-public-chips div{
        padding:8px 10px;
    }

    .mpr-public-chips strong{
        font-size:16px;
    }

    .mpr-public-map{
        height:300px;
    }

    .mpr-public-cta{
        padding:20px 18px;
    }

    .mpr-public-cta h2{
        font-size:19px;
    }

    .mpr-public-cta-button{
        align-self:stretch;
        justify-content:center;
    }

    .mpr-public-profile-grid{
        grid-template-columns:44px minmax(0,1fr);
    }

    .mpr-public-profile-axis,
    .mpr-public-profile-chart{
        height:170px;
    }

    .mpr-public-profile-chart svg{
        height:150px;
    }

    .mpr-public-profile-num{
        width:6px;
        height:6px;
        font-size:0;
    }

    .mpr-public-table thead{
        display:none;
    }

    .mpr-public-table,
    .mpr-public-table tbody,
    .mpr-public-table tr{
        display:block;
    }

    /* Une ligne par ravito : numéro + nom, puis km · D+ · assistance, et
       la barrière à droite. */
    .mpr-public-table tr{
        display:grid;
        grid-template-columns:30px minmax(0,1fr) auto;
        gap:2px 8px;
        padding:8px 0;
        border-bottom:1px solid #F3F4F6;
    }

    .mpr-public-table td{
        padding:0;
        border:none;
    }

    .mpr-public-table td:nth-child(1){ grid-row:1 / span 3; }
    .mpr-public-table td:nth-child(2){ grid-column:2; }
    .mpr-public-table td:nth-child(6){ grid-column:3; grid-row:1; text-align:right; font-weight:700; }
    .mpr-public-table td:nth-child(7){ grid-column:3; grid-row:2; text-align:right; font-size:12px; color:var(--mpr-text-light); }
    .mpr-public-table td:nth-child(3),
    .mpr-public-table td:nth-child(4),
    .mpr-public-table td:nth-child(5){
        grid-column:2;
        display:inline;
        font-size:12px;
        color:var(--mpr-text-light);
        text-align:left;
    }

    .mpr-public-table td:nth-child(3)::before{ content:"km "; }

    .mpr-public-band{
        flex-direction:column;
        align-items:stretch;
        padding:18px;
    }

    .mpr-public-others-grid,
    .mpr-public-index-grid{
        grid-template-columns:1fr;
    }
}