/* =========================================================
   TOPOS — En-têtes de listes premium v3
   Fichier : /assets/css/topo-listing-header.css
   Objectif : harmoniser uniquement le bandeau titre / intro.
   Les listes accordéons restent gérées par topo.css.
   ========================================================= */

.topo-modern-page{
    --tlh-bleu-nuit:#002b55;
    --tlh-bleu-profond:#073f63;
    --tlh-bleu-glace:#e7eef2;
    --tlh-turquoise:#2d8a8f;
    --tlh-turquoise-2:#3d7f9f;
    --tlh-texte:#142a3b;
    --tlh-muted:#5f717c;
    --tlh-line:rgba(0,43,85,.14);
    --tlh-shadow:0 18px 42px rgba(0,43,85,.13);
}

/* Largeur verrouillée sur la largeur éditoriale du menu/site */
@media(min-width:981px){
    body .site-container > main.container.page-content.topo-listing-page.topo-modern-page,
    body .site-container > main.container.topo-listing-page.topo-modern-page{
        width:min(calc(100% - 72px), 1220px) !important;
        max-width:1220px !important;
        margin-left:auto !important;
        margin-right:auto !important;
        padding-left:0 !important;
        padding-right:0 !important;
        box-sizing:border-box !important;
    }
}

@media(min-width:981px) and (max-width:1320px){
    body .site-container > main.container.page-content.topo-listing-page.topo-modern-page,
    body .site-container > main.container.topo-listing-page.topo-modern-page{
        width:min(calc(100% - 48px), 1160px) !important;
        max-width:1160px !important;
    }
}

/*
   Bandeau éditorial commun aux 5 index :
   plein format, plus proche des autres rubriques, sans carte étroite.
*/
.topo-modern-page > .intro{
    position:relative !important;
    isolation:isolate !important;
    width:100% !important;
    max-width:none !important;
    margin:0 0 40px !important;
    padding:42px 46px 44px !important;
    overflow:hidden !important;
    text-align:left !important;
    color:#fff !important;
    background:
        radial-gradient(circle at 88% 12%, rgba(61,127,159,.34), transparent 33%),
        linear-gradient(130deg, rgba(0,43,85,.98) 0%, rgba(7,63,99,.96) 56%, rgba(13,55,80,.92) 100%) !important;
    border:1px solid rgba(0,43,85,.20) !important;
    border-radius:10px !important;
    box-shadow:var(--tlh-shadow) !important;
    box-sizing:border-box !important;
}

/* Motif montagne / courbes très discret, pour éviter l'effet carte plaquée */
.topo-modern-page > .intro::after{
    content:"" !important;
    position:absolute !important;
    right:34px !important;
    top:24px !important;
    width:310px !important;
    height:150px !important;
    z-index:-1 !important;
    opacity:.18 !important;
    pointer-events:none !important;
    background:
        linear-gradient(145deg, transparent 0 58%, rgba(255,255,255,.36) 58.4%, transparent 59%),
        radial-gradient(ellipse at 78% 38%, transparent 0 34%, rgba(255,255,255,.48) 34.2%, transparent 34.7%, transparent 43%, rgba(255,255,255,.30) 43.2%, transparent 43.7%, transparent 52%, rgba(255,255,255,.22) 52.2%, transparent 52.7%) !important;
}

.topo-modern-page > .intro::before{
    content:"Topos" !important;
    display:block !important;
    width:max-content !important;
    max-width:100% !important;
    margin:0 0 17px !important;
    padding:0 0 8px !important;
    color:rgba(230,248,251,.82) !important;
    background:transparent !important;
    border:0 !important;
    border-bottom:2px solid rgba(45,138,143,.78) !important;
    border-radius:0 !important;
    font-size:.68rem !important;
    line-height:1 !important;
    font-weight:850 !important;
    letter-spacing:.19em !important;
    text-transform:uppercase !important;
}

.topo-modern-page > .intro h1{
    position:relative !important;
    width:min(100%, 1040px) !important;
    max-width:none !important;
    margin:0 0 20px !important;
    padding:0 !important;
    color:#ffffff !important;
    font-size:clamp(2.25rem,4vw,3.55rem) !important;
    line-height:1.02 !important;
    font-weight:760 !important;
    letter-spacing:-.055em !important;
    text-align:left !important;
    text-wrap:balance !important;
}

.topo-modern-page > .intro h1::before,
.topo-modern-page > .intro h1::after{
    display:none !important;
    content:none !important;
}

.topo-modern-page > .intro p{
    width:min(100%, 940px) !important;
    max-width:none !important;
    margin:0 0 12px !important;
    padding:0 !important;
    color:rgba(242,248,250,.78) !important;
    font-size:1rem !important;
    line-height:1.76 !important;
    font-weight:430 !important;
    text-align:left !important;
}

.topo-modern-page > .intro p:first-of-type{
    width:min(100%, 980px) !important;
    color:rgba(255,255,255,.94) !important;
    font-size:1.16rem !important;
    line-height:1.55 !important;
    font-weight:650 !important;
    letter-spacing:-.012em !important;
}

.topo-modern-page > .intro p:only-of-type{
    color:rgba(255,255,255,.92) !important;
    font-size:1.11rem !important;
    line-height:1.68 !important;
    font-weight:520 !important;
}

.topo-modern-page > .intro p:last-child{
    margin-bottom:0 !important;
}



/* La page cascades reste explicitement dans les TOPOS. */
.topo-ice-page > .intro::before{
    content:"Topos" !important;
}

.topo-modern-page > .topo-modern-list{
    margin-top:0 !important;
}

@media(max-width:980px){
    body .site-container > main.container.page-content.topo-listing-page.topo-modern-page,
    body .site-container > main.container.topo-listing-page.topo-modern-page{
        width:100% !important;
        max-width:none !important;
        padding-left:12px !important;
        padding-right:12px !important;
        box-sizing:border-box !important;
    }

    .topo-modern-page > .intro{
        margin-bottom:30px !important;
        padding:32px 28px 34px !important;
        border-radius:9px !important;
    }

    .topo-modern-page > .intro::after{
        right:16px !important;
        top:24px !important;
        width:210px !important;
        height:108px !important;
        opacity:.13 !important;
    }

    .topo-modern-page > .intro h1{
        width:100% !important;
        font-size:clamp(1.95rem,6.5vw,2.75rem) !important;
        line-height:1.05 !important;
    }

    .topo-modern-page > .intro p,
    .topo-modern-page > .intro p:first-of-type,
    .topo-modern-page > .intro p:only-of-type{
        width:100% !important;
    }

    .topo-modern-page > .intro p:first-of-type,
    .topo-modern-page > .intro p:only-of-type{
        font-size:1.04rem !important;
    }
}

@media(max-width:620px){
    body .site-container > main.container.page-content.topo-listing-page.topo-modern-page,
    body .site-container > main.container.topo-listing-page.topo-modern-page{
        padding-left:10px !important;
        padding-right:10px !important;
    }

    .topo-modern-page > .intro{
        margin-bottom:24px !important;
        padding:25px 20px 27px !important;
        border-radius:8px !important;
    }

    .topo-modern-page > .intro::before{
        margin-bottom:14px !important;
        padding-bottom:7px !important;
        font-size:.61rem !important;
        letter-spacing:.16em !important;
    }

    .topo-modern-page > .intro::after{
        display:none !important;
        content:none !important;
    }

    .topo-modern-page > .intro h1{
        margin-bottom:16px !important;
        font-size:clamp(1.65rem,8.4vw,2.18rem) !important;
        letter-spacing:-.04em !important;
    }

    .topo-modern-page > .intro p,
    .topo-modern-page > .intro p:first-of-type,
    .topo-modern-page > .intro p:only-of-type{
        font-size:.95rem !important;
        line-height:1.64 !important;
        font-weight:430 !important;
    }
}

/* ======================================================================
   RAYONS ÉDITORIAUX — index topos
   ====================================================================== */
.topo-modern-page > .intro{
    border-radius:var(--as-radius-editorial,10px) !important;
}

.topo-region,
.topo-ice-showcase{
    border-radius:var(--as-radius-editorial,10px) !important;
}

.topo-region-media img,
.topo-ice-photos img{
    border-radius:0 !important;
}

.topo-region-countline,
.topo-region-toggle{
    border-radius:var(--as-radius-button,5px) !important;
}

/* ======================================================================
   LIENS DANS BANDEAU INDEX TOPOS — discret sur fond bleu
   Même couleur que le paragraphe NB, avec un soulignement gris clair.
   Au survol, la couleur du texte ne change pas ; seul le fond se pose
   très légèrement pour garder la lisibilité.
   ====================================================================== */
.topo-modern-page > .intro a{
    color:rgba(242,248,250,.78) !important;
    background:transparent !important;
    padding:0 .03em !important;
    border:0 !important;
    border-radius:0 !important;
    font-weight:inherit !important;
    text-decoration:none !important;
    box-shadow:inset 0 -2px 0 rgba(230,238,242,.48) !important;
    transition:box-shadow .16s ease, background-color .16s ease !important;
}

.topo-modern-page > .intro a:hover,
.topo-modern-page > .intro a:focus-visible{
    color:rgba(242,248,250,.78) !important;
    background:rgba(0,25,48,.36) !important;
    box-shadow:inset 0 -2px 0 rgba(230,238,242,.82) !important;
    outline:0 !important;
}


/* ======================================================================
   CORRECTIF FINAL — lien NB VTT en gris clair constant
   Force aussi :link et :visited pour neutraliser les styles globaux.
   ====================================================================== */
body .site-container main.topo-modern-page > section.intro p a,
body .site-container main.topo-modern-page > section.intro p a:link,
body .site-container main.topo-modern-page > section.intro p a:visited{
    color:rgba(242,248,250,.78) !important;
    -webkit-text-fill-color:rgba(242,248,250,.78) !important;
    background:transparent !important;
    text-decoration:none !important;
    box-shadow:inset 0 -2px 0 rgba(230,238,242,.48) !important;
}

body .site-container main.topo-modern-page > section.intro p a:hover,
body .site-container main.topo-modern-page > section.intro p a:focus-visible{
    color:rgba(242,248,250,.78) !important;
    -webkit-text-fill-color:rgba(242,248,250,.78) !important;
    background:rgba(0,25,48,.36) !important;
    box-shadow:inset 0 -2px 0 rgba(230,238,242,.82) !important;
    outline:0 !important;
}