/* Styles additionnels pour le carrousel sticky et la liste des voies */
    /* au tout premier paint : aucune transition */
    .carrousel-wrapper.no-anim {
        transition: none !important;
    }
    .carrousel-wrapper {
/*        height: 260px;*/
        max-width: 900px;
        margin: 0px auto;
        position: sticky;
        top: 42px;
/*        z-index: 90;*/
        background: rgba(255,255,255,0.02);
        transition: height 0.3s ease, padding 0.3s ease;
    }
    .carrousel-inner {
        position: relative;
        overflow: hidden;
        border-radius:10px;
    }
    .carrousel-wrapper.shrink .slide-image {
        opacity: 0;
        height: 0;
    }



    .slide-image {
        width: 100%;
        height: 260px;
        object-fit: cover;
        display:block;
        transition: opacity 0.3s ease, height 0.3s ease;
    }
    .sector-title {
        background-color: rgba(0,82,122,0.99);
        color: #fff;
        padding: 8px 12px;
        font-size: 20px;
        
        align-items:center;
        justify-content:space-between;
    }
    .sector-left {
/*        display:flex;*/
        align-items:center;
        gap:12px;
        text-align:center;
    }
    .sector-left .title-text {
        font-size:18px;
        font-weight:600;
        font-family:consolas;
    }
    .controls {
/*        display:flex;*/
        align-items:center;
        gap:8px;
        text-align:center;
    }
    .prev, .next {
        background: rgba(0,0,0,0.5);
        color: #fff;
        padding: 8px 12px;
        cursor:pointer;
        user-select:none;
        border-radius:4px;
    }
    .dots {
        display:flex;
        justify-content:center;
        align-items:center;
        gap:6px;
    }
    .dot {
        height:12px;width:12px;border-radius:50%;background:#bbb;cursor:pointer;
    }
    .dot.active { background:#333; }

    /* Liste des voies */
    .voie-list { 
        max-width:900px;
        margin:0px auto;
        background:#333; }
    .voie-row {
        display:flex;
        align-items:center;
        gap:12px;
        padding:0px;
/*        border-bottom:1px solid rgba(0,0,0,0.05);*/
        border-radius:10px;
        margin:5px;
        background-color: rgba(255, 255, 255, 0.95);
    }
    .voie-thumb {
        width:80px;
        height:80px;
        border-radius:10px;
        overflow:hidden;
        flex:0 0 80px;
/*        border:2px */
        solid #eee;
    }
    .voie-thumb img { width:100%;
        height:100%;
        object-fit:cover;
        display:block; 
    }
    .voie-meta { flex:1; display:flex; flex-direction:column; gap:10px}
    .voie-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .voie-name { font-weight:700; font-size:16px; color:#222; }
    .voie-cote{
/*        width:64px;*/
/*        height:64px;*/
        width: 50px;
        height: 50px;
        margin-right: 5px;
        border-radius:50%;
        display:flex;
        justify-content:center;
        align-items:center;
    }
    .voie-bottom { 
        display:flex; 
        gap:12px; 
        align-items:center; 
        font-size:14px; 
        color:#444; 
/*        margin-top:6px; */
    }
    .ico { 
        display:inline-flex; 
        align-items:center; 
        gap:6px; padding:4px 8px; 
        border-radius:8px; 
        background:rgba(0,0,0,0.1); 
        justify-content: center;
        width:45px;
    }
/*    .ico .num{ 
        font-weight:700; 
        color:#222; }*/
    .check { 
        color: #2ecc71; 
        font-weight:700; } /* vert */
    .heart { 
        color: #e74c3c; 
        font-weight:700; } /* rouge */
    .star { 
        color: #f1c40f; 
        margin-left:8px; }
    .cotation { 
        font-weight:700; 
        padding:6px 6px; 
        border-radius:6px; 
        background:rgba(255,255,255,0.25); 
    }
    .titre-couloir{
        background-color: rgba(0, 82, 122, 0.99);
        color: white;
        padding: 5px !important;
        font-weight: lighter;
        font-size:14px;
        font-family:consolas;
        margin-top:3px;
        margin-bottom:3px;
        padding-top:2px;
        padding-bottom:2px;
    }
    .end p{
        padding:5px;
    }





.mur-selector {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 15px auto 25px;
  flex-wrap: wrap;
}
.mur-option {
  font-familly:Consolas;
  padding-top:22px!important;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 6px;
  text-align: center;
  transition: all 0.2s;
  max-width: 130px;
  background: rgba(255,255,255,0.07);
}
.mur-option img {
  width: 100%;
  border-radius: 8px;
  height: 70px;
  object-fit: cover;
}
.mur-option span {
  display: block;
  color: #fff;
  font-size: 12px;
  margin-top: 4px;
  font-family:Consolas;
}
.mur-option.active {
    padding-top:22px;
  border-color: #4CAF50;
  background-color: rgba(76,175,80,0.1);
  box-shadow: 0 0 6px rgba(76,175,80,0.3);
}


    @media (max-width:700px){
        .slide-image{ height:180px; }
        .carrousel-wrapper { top:42px; }
        .voie-row { gap:8px; }
/*        .voie-thumb { width:54px;height:54px; }*/
    }
    @media (max-width:500px){
        .slide-image{ height:100px; }
        .carrousel-wrapper { top:42px; }
        .voie-row { gap:8px; }
/*        .voie-thumb { width:54px;height:54px; }*/
    }