/* =========================================================
   Pack B — Alpinisme élégant
   Bleu nuit, glacier, blanc cassé. Très montagne, net et haut de gamme.
   Fichier : topo.css
   Pack généré pour Alpes-Sud.Net.
   ========================================================= */

/* =========================================================
   TOPO.CSS
   Listings topos + pages topo détaillées
   ========================================================= */

/* =========================================================
   LISTINGS TOPOS — STYLE INDEX.PHP
   ========================================================= */

.topo-listing-page{
    max-width:1180px !important;
    margin:0 auto !important;
    padding-top:34px !important;
    padding-bottom:84px !important;

    --topo-accent:#5d7088;
    --topo-accent-soft:#91a1b5;
    --topo-ink:#28333d;
    --topo-heading:#1d2630;
    --topo-muted:#707b86;

    --topo-card:#f7f9fb;
    --topo-card-soft:#e6ebf0;

    --topo-border:rgba(38,52,60,.08);
}

/* ---------------------------------------------------------
   INTRO LISTINGS
--------------------------------------------------------- */

.topo-listing-page .intro{
    width:100% !important;
    max-width:none !important;
    margin:0 0 52px 0 !important;
    padding:0 !important;

    text-align:left !important;
}

.topo-listing-page .intro h1{
    width:100% !important;
    max-width:none !important;

    margin:0 auto 18px !important;

    color:var(--topo-heading) !important;

    font-size:2.15rem !important;
    line-height:1.08 !important;
    font-weight:620 !important;
    letter-spacing:-.035em !important;

    text-align:center !important;
}

.topo-listing-page .intro p{
    max-width:820px !important;
    margin:0 0 12px 0 !important;

    color:var(--topo-muted) !important;

    font-size:1rem !important;
    line-height:1.78 !important;
    font-weight:400 !important;

    text-align:left !important;
}

/* ---------------------------------------------------------
   BLOCS RÉGIONS
--------------------------------------------------------- */

.topo-listing-page .topos-list,
.topo-listing-page .topo-listing{
    width:100% !important;
    max-width:none !important;
    display:flex !important;
    flex-direction:column !important;

    gap:24px !important;

    margin:0 !important;
    padding:0 !important;

    list-style:none !important;
}

.topo-listing-page article.topo-zone,
.topo-listing-page article.massif.topo-zone{
    display:block !important;
    max-width:none !important;
    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;

    background:var(--topo-card) !important;

    border:1px solid var(--topo-border) !important;
    border-radius:22px !important;

    box-shadow:0 14px 34px rgba(28,44,53,.045) !important;
}

.topo-listing-page article.topo-zone::before,
.topo-listing-page article.topo-zone::after{
    display:none !important;
    content:none !important;
}

.topo-listing-page article.topo-zone > h2{
    display:block !important;

    width:100% !important;

    margin:0 !important;
    padding:16px 22px 14px !important;

    color:var(--topo-accent) !important;

    background:var(--topo-card-soft) !important;

    border:0 !important;
    border-bottom:1px solid var(--topo-border) !important;

    font-size:.72rem !important;
    line-height:1 !important;
    font-weight:850 !important;
    letter-spacing:.14em !important;
    text-transform:uppercase !important;
}

.topo-listing-page article.topo-zone > h2::before,
.topo-listing-page article.topo-zone > h2::after{
    display:none !important;
    content:none !important;
}

.topo-listing-page article.topo-zone > h3{
    display:block !important;

    margin:0 !important;
    padding:18px 24px 6px !important;

    color:var(--topo-accent-soft) !important;

    background:transparent !important;

    border:0 !important;

    font-size:.66rem !important;
    line-height:1 !important;
    font-weight:820 !important;
    letter-spacing:.13em !important;
    text-transform:uppercase !important;
}

.topo-listing-page article.topo-zone > h3::before,
.topo-listing-page article.topo-zone > h3::after{
    display:none !important;
    content:none !important;
}

.topo-listing-page article.topo-zone > ul{
    display:block !important;

    width:100% !important;

    margin:0 !important;
    padding:10px 22px 12px !important;

    list-style:none !important;
}

.topo-listing-page article.topo-zone li{
    display:block !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    list-style:none !important;
}

.topo-listing-page article.topo-zone li::before{
    display:none !important;
    content:none !important;
}

.topo-listing-page article.topo-zone li a{
    display:block !important;

    position:relative !important;

    margin:0 !important;
    padding:7px 6px 7px 18px !important;

    color:var(--topo-ink) !important;

    background:transparent !important;

    border:0 !important;
    border-radius:4px !important;

    font-size:.88rem !important;
    line-height:1.34 !important;
    font-weight:500 !important;

    text-decoration:none !important;

    transition:
        background-color .14s ease,
        color .14s ease !important;
}

.topo-listing-page article.topo-zone li a::before{
    content:"" !important;

    display:block !important;

    position:absolute !important;

    left:6px !important;
    top:14px !important;

    width:4px !important;
    height:4px !important;

    border-radius:999px !important;

    background:rgba(61,127,159,.70) !important;
}

.topo-listing-page article.topo-zone li a:hover{
    color:#2f6f8e !important;
    background:#dce4ea !important;
}

/* =========================================================
   PAGE TOPO DÉTAILLÉE
   ========================================================= */

.topo-page{
    padding-top:42px;
    padding-bottom:86px;
}

/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.topo-hero{
    margin-bottom:46px;
}

.topo-title{
    text-align:center;

    max-width:960px;

    margin:0 auto 34px;
}

.topo-category{
    display:block;

    margin-bottom:14px;

    color:var(--topo-accent);

    font-size:.74rem;
    line-height:1;
    font-weight:850;
    letter-spacing:.16em;
    text-transform:uppercase;

    text-align:center;
}

.topo-title h1{
    margin:0 auto;

    color:var(--topo-heading);

    font-size:clamp(2rem,4.2vw,3.1rem);
    line-height:1.06;
    font-weight:620;
    letter-spacing:-.045em;

    text-align:center;
}

/* ---------------------------------------------------------
   PHOTO HERO
--------------------------------------------------------- */

.topo-cover{
    max-width:980px;

    margin:0 auto;

    text-align:center;
}

.topo-cover img{
    display:block;

    width:100%;
    height:auto;

    border-radius:24px;

    box-shadow:0 22px 54px rgba(28,44,53,.12);
}

.topo-cover figcaption,
.topo-gallery figcaption{
    max-width:760px;

    margin:13px auto 0;

    color:#6f7e86;

    font-size:.84rem;
    line-height:1.55;
    font-style:italic;

    text-align:center !important;
}

/* ---------------------------------------------------------
   INTRO
--------------------------------------------------------- */

.topo-intro{
    max-width:920px;

    margin:0 auto 48px;

    padding:0;

    text-align:left !important;
}

.topo-intro p{
    margin:0 !important;
    padding:0 !important;

    color:#34464f !important;

    font-size:1.05rem !important;
    line-height:1.82 !important;

    text-align:left !important;
}

/* anciens css qui centraient les paragraphes */

.topo-page p{
    text-align:left;
}

/* ---------------------------------------------------------
   FICHE TECHNIQUE + CARTE
--------------------------------------------------------- */

.topo-grid{
    display:grid;

    grid-template-columns:minmax(360px,.92fr) minmax(420px,1.08fr);

    gap:30px;

    align-items:start;

    margin:0 auto 62px;
}

.topo-card{
    background:var(--topo-card);

    border:1px solid var(--topo-border);
    border-radius:24px;

    box-shadow:0 16px 42px rgba(28,44,53,.055);

    overflow:hidden;
}

.topo-card h2{
    margin:0;

    padding:18px 24px 16px;

    color:var(--topo-accent);

    background:var(--topo-card-soft);

    border-bottom:1px solid var(--topo-border);

    font-size:.74rem;
    line-height:1;
    font-weight:850;
    letter-spacing:.15em;
    text-transform:uppercase;

    text-align:center;
}

.topo-infos{
    display:grid;

    grid-template-columns:1fr;

    gap:0;

    padding:8px 24px 18px;
}

.info-item{
    display:grid;

    grid-template-columns:190px minmax(0,1fr);

    gap:24px;

    padding:15px 0;

    border-bottom:1px solid rgba(38,52,60,.08);
}

.info-item:last-child{
    border-bottom:0;
}

.info-item .label{
    color:var(--topo-muted);

    font-size:.72rem;
    line-height:1.25;
    font-weight:850;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.info-item .value{
    color:var(--topo-ink);

    font-size:.95rem;
    line-height:1.55;
    font-weight:430;
}

.topo-map{
    position:relative;

    display:flex;
    flex-direction:column;

    background:var(--topo-card);

    border:1px solid var(--topo-border);
    border-radius:24px;

    box-shadow:0 16px 42px rgba(28,44,53,.055);

    overflow:hidden;
}

.topo-map::before{
    content:"Carte / trace GPS";

    display:block;

    padding:18px 24px 16px;

    color:var(--topo-accent);

    background:var(--topo-card-soft);

    border-bottom:1px solid var(--topo-border);

    font-size:.74rem;
    line-height:1;
    font-weight:850;
    letter-spacing:.15em;
    text-transform:uppercase;

    text-align:center;
}

.topo-map iframe{
    display:block;

    width:100%;
    height:clamp(460px, 42vw, 560px);
    min-height:0;

    border:0;
}

/* carte absente */

.topo-grid:not(:has(.topo-map)){
    display:block;

    max-width:860px;
}

.topo-grid:not(:has(.topo-map)) .topo-card{
    max-width:860px;

    margin:0 auto;
}

/* ---------------------------------------------------------
   CONTENU
--------------------------------------------------------- */

.topo-content{
    max-width:920px;

    margin:0 auto;

    text-align:left;
}

/* titre principal de section */

.topo-content > h2{
    margin:0 0 36px;

    color:var(--topo-heading);

    font-size:1.55rem;
    line-height:1.18;
    font-weight:620;
    letter-spacing:-.025em;

    text-align:left;
}

/* ---------------------------------------------------------
   CHAPITRES — VERSION ÉLÉGANTE
--------------------------------------------------------- */

.topo-section{
    margin-bottom:38px;

    text-align:left;
}

.topo-section h3{
    display:flex;
    align-items:center;

    gap:16px;

    margin:0 0 18px;
    padding:0;

    color:var(--topo-heading);

    font-size:.78rem;
    line-height:1;

    font-weight:780;
    letter-spacing:.14em;
    text-transform:uppercase;

    text-align:left;
}

.topo-section h3::before{
    content:"";

    flex:0 0 auto;

    width:7px;
    height:7px;

    border-radius:999px;

    background:var(--topo-accent);

    box-shadow:
        0 0 0 6px rgba(61,127,159,.10);
}

.topo-section h3::after{
    content:"";

    display:block;

    width:44px;
    height:1px;

    background:rgba(61,127,159,.18);
}

.topo-section p{
    margin:0 0 16px;

    color:#34464f;

    font-size:1rem;
    line-height:1.78;

    text-align:left;
}

/* ---------------------------------------------------------
   GALERIE
--------------------------------------------------------- */

.topo-gallery{
    max-width:820px;

    margin:54px auto 0;

    text-align:center;
}

.topo-gallery img{
    display:block;

    max-width:100%;
    height:auto;

    margin:0 auto;

    border-radius:22px;

    box-shadow:0 18px 46px rgba(28,44,53,.10);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:980px){

    .topo-grid{
        grid-template-columns:1fr;

        max-width:860px;
    }

    .topo-map iframe{
        height:430px;
        min-height:0;
    }
}

@media(max-width:760px){

    .topo-listing-page{
        padding-top:24px !important;
        padding-bottom:62px !important;
    }

    .topo-listing-page .intro{
        margin-bottom:38px !important;
    }

    .topo-listing-page .intro h1{
        font-size:1.78rem !important;
    }

    .topo-listing-page .intro p{
        font-size:.95rem !important;
        line-height:1.7 !important;
    }

    .topo-listing-page .topos-list,
    .topo-listing-page .topo-listing{
        gap:18px !important;
    }

    .topo-listing-page article.topo-zone{
        border-radius:18px !important;
    }

    .topo-listing-page article.topo-zone > h2{
        padding:14px 18px 12px !important;
        font-size:.70rem !important;
    }

    .topo-listing-page article.topo-zone > h3{
        padding:16px 18px 5px !important;
        font-size:.64rem !important;
    }

    .topo-listing-page article.topo-zone > ul{
        padding:9px 18px 14px !important;
    }

    .topo-listing-page article.topo-zone li a{
        font-size:.86rem !important;
        line-height:1.36 !important;
    }

    .topo-page{
        padding-top:28px;
        padding-bottom:62px;
    }

    .topo-title{
        margin-bottom:26px;
    }

    .topo-title h1{
        font-size:1.9rem;
    }

    .topo-cover img{
        border-radius:18px;
        max-height:none;
    }

    .topo-intro{
        margin-bottom:36px;
    }

    .topo-intro p{
        font-size:.98rem !important;
        line-height:1.72 !important;

        text-align:left !important;
    }

    .topo-grid{
        gap:22px;
        margin-bottom:46px;
    }

    .topo-card,
    .topo-map{
        border-radius:18px;
    }

    .topo-card h2{
        padding:16px 18px 14px;
    }

    .topo-infos{
        padding:6px 18px 14px;
    }

    .info-item{
        grid-template-columns:1fr;

        gap:6px;

        padding:13px 0;
    }

    .info-item .label{
        font-size:.68rem;
    }

    .info-item .value{
        font-size:.92rem;
        line-height:1.5;
    }

    .topo-map iframe{
        height:360px;
        min-height:0;
    }

    .topo-content > h2{
        font-size:1.32rem;
    }

    .topo-section h3{
        gap:12px;

        font-size:.72rem;
    }

    .topo-section h3::before{
        width:6px;
        height:6px;

        box-shadow:
            0 0 0 5px rgba(61,127,159,.10);
    }

    .topo-section p{
        font-size:.96rem;
        line-height:1.7;
    }

    .topo-gallery{
        margin-top:38px;
    }

    .topo-gallery img{
        border-radius:18px;
    }
}


/* =========================================================
   THEME PAGE OVERRIDE — Pack B — Alpinisme élégant
   À laisser en fin de fichier.
========================================================= */

.card,
.home-news-card,
.topo-block,
.home-feature,
.condition-card,
.condition-observation-card,
.condition-observation-header,
.condition-line,
.conditions-actions a,
.conditions-nav a,
.conditions-nav span,
.topo-card,
.topo-map,
.topo-listing-page article.topo-zone{
    background:var(--as-paper) !important;
    border-color:var(--as-line) !important;
    box-shadow:var(--as-shadow-soft) !important;
}

.home-news-card img,
.condition-help,
.condition-observation-box,
.condition-observation-comment,
.condition-title-block span,
.condition-view-link b,
.topo-card h2,
.topo-listing-page article.topo-zone > h2{
    background:var(--as-paper-2) !important;
}

.home-news-content time,
.home-feature-text span,
.condition-label,
.conditions-course h3,
.conditions-region h2,
.topo-category,
.topo-section h3,
.topo-listing-page article.topo-zone > h2,
.simple-list article.massif > h2,
.history-list article.massif > h2{
    color:var(--as-blue) !important;
}

.topo-block,
.conditions-region h2{
    border-top-color:var(--as-blue) !important;
    border-bottom-color:var(--as-blue) !important;
}

.topo-block a::before,
.condition-view-link::before,
.simple-link-card a::before,
.simple-list article.massif li a::before,
.history-list article.massif li a::before,
.topo-section h3::before,
.topo-listing-page article.topo-zone li a::before{
    background:var(--as-blue) !important;
}

.condition-add-link,
.conditions-nav .active,
.condition-form-actions input[type="submit"]{
    background:var(--as-blue) !important;
    border-color:var(--as-blue) !important;
    color:var(--as-paper) !important;
}

.home-news-content p,
.home-feature-text p,
.conditions-header p,
.condition-date,
.condition-status-block,
.condition-update,
.page-content > .intro p,
.topo-intro p,
.topo-section p{
    color:var(--as-muted) !important;
}

@media(max-width:980px){
    .card,
    .home-news-card,
    .topo-block,
    .home-feature,
    .condition-card,
    .condition-line,
    .topo-card{
        box-shadow:0 12px 30px color-mix(in srgb, rgba(19,37,52,.14) 65%, transparent) !important;
    }
}


/* ACCENT PACK 05-turquoise-lac */
:root{
--as-accent:#2d8a8f;
--as-sand:#2d8a8f;
}


.page-content > .intro h1::after,
.container.page-content > .intro h1::after,
main.page-content > .intro h1::after{
background:linear-gradient(90deg,transparent,#2d8a8f,transparent) !important;
}

.condition-add-link,
.conditions-nav .active{
background:#2d8a8f !important;
border-color:#2d8a8f !important;
}

.topo-category,
.condition-label,
.home-news-content time{
color:#2d8a8f !important;
}


/* =========================================================
   OVERRIDE GLOBAL — STYLE ÉDITORIAL, MOINS ARRONDI / MOINS BULLE
   À conserver en toute fin de fichier.
========================================================= */

:root{
    --as-radius:10px !important;
    --as-radius-small:6px !important;
    --as-shadow:0 12px 30px rgba(28,44,53,.08) !important;
    --as-shadow-soft:0 7px 18px rgba(28,44,53,.055) !important;
}

/* Cartes et blocs principaux */
.card,
.home-news-card,
.home-feature,
.topo-block,
.topo-card,
.topo-map,
.topo-listing-page article.topo-zone,
.condition-card,
.condition-observation-card,
.condition-observation-header,
.condition-line,
.conditions-actions a,
.conditions-nav a,
.conditions-nav span,
.condition-observation-box,
.condition-observation-comment,
.person-card,
.person-card.left,
.simple-link-card{
    border-radius:8px !important;
    box-shadow:0 7px 18px rgba(28,44,53,.055) !important;
}

/* Titres / bandeaux internes de cartes */
.topo-card h2,
.topo-listing-page article.topo-zone > h2,
.condition-title-block span,
.condition-view-link b,
.condition-observation-kicker{
    border-radius:6px !important;
}

/* Images */
.home-news-card img,
.home-feature img,
.topo-cover img,
.topo-gallery img,
.history-gallery img,
.sidebar img,
.person-card img{
    border-radius:6px !important;
    box-shadow:0 8px 22px rgba(28,44,53,.075) !important;
}

/* Boutons / badges / actions */
.condition-add-link,
.condition-form-actions input[type="submit"],
.conditions-actions a,
.conditions-nav a,
.conditions-nav span,
.condition-title-block span,
.condition-view-link b,
.condition-observation-kicker{
    border-radius:5px !important;
}


/* Petites puces : moins rondes / plus graphiques */
.topo-block a::before,
.condition-view-link::before,
.topo-listing-page article.topo-zone li a::before{
    border-radius:2px !important;
}

/* Pages topo */
.topo-grid{
    align-items:start !important;
}

.topo-map iframe{
    border-radius:0 !important;
}

/* Page bio : conserver l'organisation, mais enlever l'effet bulle */
.person-card,
.person-card.left{
    background:var(--as-paper) !important;
    border-radius:8px !important;
    box-shadow:0 7px 18px rgba(28,44,53,.055) !important;
}

.person-card::before{
    height:2px !important;
}

.person-card img{
    border-radius:6px !important;
}

/* Mobile */
@media(max-width:980px){
    

    

    .card,
    .home-news-card,
    .home-feature,
    .topo-block,
    .topo-card,
    .topo-map,
    .topo-listing-page article.topo-zone,
    .condition-card,
    .condition-observation-card,
    .condition-observation-header,
    .condition-line,
    .person-card,
    .person-card.left{
        border-radius:7px !important;
        box-shadow:0 6px 16px rgba(28,44,53,.055) !important;
    }
}

@media(max-width:520px){
    .card,
    .home-news-card,
    .home-feature,
    .topo-block,
    .topo-card,
    .topo-map,
    .topo-listing-page article.topo-zone,
    .condition-card,
    .condition-observation-card,
    .condition-observation-header,
    .condition-line,
    .person-card,
    .person-card.left{
        border-radius:6px !important;
    }
}

/* =========================================================
   HARMONISATION FINALE DES TITRES DE PAGE
   Référence visuelle : pages historiques type histo01.
   À conserver en toute fin de fichier.
========================================================= */

:root{
    --as-page-title-size:clamp(2rem,4vw,2.8rem);
    --as-page-title-color:#20313a;
    --as-page-title-line:#3d7f9f;
    --as-page-title-gap:42px;
    --as-page-title-bottom:56px;
}


.page-content,
.conditions-page,
.topo-listing-page{
    padding-top:var(--as-page-title-gap) !important;
}

/* Même bloc d'introduction que histo01 */
.page-content > .intro,
.conditions-page > .conditions-header,
.topo-listing-page > .intro{
    max-width:900px !important;
    margin:0 auto var(--as-page-title-bottom) !important;
    padding:0 !important;
    text-align:left !important;
}

/* Titre principal harmonisé */
.page-content > .intro h1,
.conditions-page > .conditions-header h1,
.topo-listing-page > .intro h1{
    position:relative !important;
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 auto 30px !important;
    padding:0 0 18px !important;

    color:var(--as-page-title-color) !important;

    font-size:var(--as-page-title-size) !important;
    line-height:1.05 !important;
    font-weight:620 !important;
    letter-spacing:-.04em !important;

    text-align:center !important;
}

/* Liseré sous le titre */
.page-content > .intro h1::after,
.conditions-page > .conditions-header h1::after,
.topo-listing-page > .intro h1::after{
    content:"" !important;
    position:absolute !important;
    left:50% !important;
    bottom:0 !important;

    width:88px !important;
    height:2px !important;

    transform:translateX(-50%) !important;
    border-radius:999px !important;

    background:linear-gradient(90deg, transparent, var(--as-page-title-line), transparent) !important;
    opacity:.75 !important;
}

/* Texte d'introduction : jamais en gras, même rendu que histo01 */
.page-content > .intro p,
.conditions-page > .conditions-header p,
.topo-listing-page > .intro p{
    max-width:860px !important;
    margin:0 auto 16px !important;

    color:#66767f !important;

    font-size:1rem !important;
    line-height:1.82 !important;
    font-weight:400 !important;

    text-align:left !important;
}

.conditions-page > .conditions-header p strong,
.conditions-page > .conditions-header p b,
.topo-listing-page > .intro p strong,
.topo-listing-page > .intro p b,
.page-content > .intro p strong,
.page-content > .intro p b{
    font-weight:400 !important;
}

/* Les actions restent propres sous le texte, sans modifier la hauteur du titre */
.conditions-page > .conditions-header .conditions-actions{
    justify-content:center !important;
    margin:24px 0 0 !important;
}

/* Pages détail conditions : ne pas transformer le header en carte */
.conditions-detail-page > .condition-detail-header,
.conditions-detail-page > .condition-observation-header{
    max-width:900px !important;
    margin:0 auto var(--as-page-title-bottom) !important;
    padding:0 !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    text-align:left !important;
}

/* On supprime le label au-dessus du titre pour aligner la hauteur avec les autres pages */
.conditions-detail-page > .condition-detail-header .condition-observation-kicker,
.conditions-detail-page > .condition-observation-header .condition-observation-kicker{
    display:none !important;
}

/* Sur mobile, même logique mais titre moins écrasant */
@media(max-width:768px){
    :root{
        --as-page-title-gap:30px;
        --as-page-title-bottom:42px;
        --as-page-title-size:clamp(1.85rem,8vw,2.35rem);
    }

    .page-content,
    .conditions-page,
    .topo-listing-page{
        padding-top:var(--as-page-title-gap) !important;
    }

    .page-content > .intro h1,
    .conditions-page > .conditions-header h1,
    .topo-listing-page > .intro h1{
        margin-bottom:24px !important;
        padding-bottom:16px !important;
    }
}


/* =========================================================
   LISTES TOPOS 2026 — accordéons photos
   ========================================================= */

.topo-modern-page{
    max-width: 1180px !important;
    padding-top: 34px !important;
    padding-bottom: 92px !important;

    --as-deep: #002b55;
    --as-deeper: #001f3f;
    --as-ink: #172938;
    --as-muted: #66767f;
    --as-line: rgba(0,43,85,.14);
    --as-teal: #3d7f9f;
    --as-teal-soft: #2d8a8f;
    --as-ice: #edf3f6;
    --topo-band-height: clamp(148px, 14vw, 172px);
}

.topo-modern-page .intro{
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 38px !important;
    padding: 0 !important;
    text-align: center !important;
}

.topo-modern-page .intro h1{
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto 14px !important;
    color: #162a38 !important;
    font-family: inherit !important;
    font-size: clamp(1.85rem, 3vw, 2.45rem) !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
    text-align: center !important;
}

.topo-modern-page .intro h1::after{
    content: "";
    display: block;
    width: 72px;
    height: 1px;
    margin: 14px auto 0;
    background: linear-gradient(90deg, transparent, rgba(61,127,159,.75), transparent);
}

.topo-modern-page .intro p{
    display: block !important;
    max-width: 760px !important;
    margin: 0 auto 8px !important;
    text-align: center !important;
    color: var(--as-muted) !important;
    font-size: .96rem !important;
    line-height: 1.75 !important;
}

.topo-modern-list{
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    max-width: 1080px !important;
    list-style: none !important;
}

.topo-region{
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    border: 1px solid rgba(0,43,85,.16) !important;
    background: #002b55 !important;
    box-shadow: 0 16px 36px rgba(0, 31, 63, .10) !important;
}

.topo-region[open]{
    border-color: rgba(61,127,159,.38) !important;
    box-shadow: 0 18px 42px rgba(0, 31, 63, .16) !important;
}

.topo-region-summary{
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(270px, 42%) 1fr !important;
    height: var(--topo-band-height) !important;
    min-height: var(--topo-band-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    list-style: none !important;
    outline: none !important;
    background: var(--as-deep) !important;
}

.topo-region-summary::-webkit-details-marker{ display:none !important; }
.topo-region-summary::marker{ content:"" !important; }

.topo-region-media{
    position: relative !important;
    display: block !important;
    height: var(--topo-band-height) !important;
    min-height: var(--topo-band-height) !important;
    overflow: hidden !important;
    background: #dce8ee !important;
}

.topo-region-media::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,43,85,.04), rgba(0,43,85,.20));
    pointer-events: none;
}

.topo-region-media img{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: var(--topo-band-height) !important;
    object-fit: cover !important;
    filter: saturate(.96) contrast(1.02) !important;
    transition: transform .35s ease, filter .35s ease !important;
}

.topo-region:hover .topo-region-media img,
.topo-region[open] .topo-region-media img{
    transform: scale(1.025) !important;
    filter: saturate(1.03) contrast(1.05) !important;
}

.topo-region-panel{
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    height: var(--topo-band-height) !important;
    min-height: var(--topo-band-height) !important;
    padding: 18px 82px 18px 32px !important;
    color: #f6fbff !important;
    background:
        linear-gradient(90deg, rgba(0,43,85,.98), rgba(0,43,85,.94)),
        radial-gradient(circle at 82% 35%, rgba(61,127,159,.28), transparent 34%) !important;
}

.topo-region-panel::before{
    content: "";
    position: absolute;
    inset: 0;
    opacity: .22;
    pointer-events: none;
    background:
        linear-gradient(145deg, transparent 0 58%, rgba(61,127,159,.18) 58.4%, transparent 59%),
        radial-gradient(ellipse at 86% 38%, transparent 0 34%, rgba(255,255,255,.20) 34.2%, transparent 34.6%, transparent 42%, rgba(255,255,255,.13) 42.2%, transparent 42.6%, transparent 50%, rgba(255,255,255,.10) 50.2%, transparent 50.6%);
}

.topo-region-titleline{
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    min-width: 0 !important;
}

.topo-region-title{
    color: #fff !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: clamp(1.24rem, 2.4vw, 1.82rem) !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
}

.topo-region-count{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 23px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    color: #e9fbff !important;
    background: rgba(45,138,143,.48) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    font-size: .65rem !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.topo-region-desc{
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    margin-top: 8px !important;
    color: rgba(255,255,255,.84) !important;
    font-size: .91rem !important;
    line-height: 1.45 !important;
}

.topo-region-toggle{
    position: absolute !important;
    right: 24px !important;
    top: 50% !important;
    width: 34px !important;
    height: 34px !important;
    margin-top: -17px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.42) !important;
    background: rgba(255,255,255,.07) !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.05) !important;
}

.topo-region-toggle::before,
.topo-region-toggle::after{
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 9px !important;
    height: 2px !important;
    border-radius: 10px !important;
    background: #fff !important;
    transform-origin: center !important;
}

.topo-region-toggle::before{ transform: translate(-75%, -50%) rotate(45deg) !important; }
.topo-region-toggle::after{ transform: translate(-25%, -50%) rotate(-45deg) !important; }
.topo-region[open] .topo-region-toggle::before{ transform: translate(-75%, -50%) rotate(-45deg) !important; }
.topo-region[open] .topo-region-toggle::after{ transform: translate(-25%, -50%) rotate(45deg) !important; }

.topo-region-body{
    position: relative !important;
    margin: 0 !important;
    padding: 20px 30px 24px !important;
    background: #f9fbfc !important;
    border-top: 1px solid rgba(255,255,255,.14) !important;
}

.topo-region-body::before{
    content: "";
    position: absolute;
    right: 32px;
    top: 22px;
    width: 220px;
    height: 110px;
    pointer-events: none;
    opacity: .08;
    background:
        radial-gradient(ellipse at center, transparent 0 38%, #002b55 38.6%, transparent 39.2%, transparent 48%, #002b55 48.6%, transparent 49.2%, transparent 58%, #002b55 58.6%, transparent 59.2%);
}

.topo-region-body ul{
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 30px !important;
    row-gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.topo-region-body h3{
    position: relative !important;
    z-index: 1 !important;
    margin: 18px 0 10px !important;
    padding: 0 !important;
    color: #3d7f9f !important;
    background: transparent !important;
    border: 0 !important;
    font-size: .72rem !important;
    font-weight: 850 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
}

.topo-region-body h3:first-child{ margin-top: 0 !important; }

.topo-region-body li{
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.topo-region-body li::before{ display:none !important; content:none !important; }

.topo-region-body a{
    position: relative !important;
    display: block !important;
    margin: 0 !important;
    padding: 7px 6px 7px 15px !important;
    border-radius: 6px !important;
    color: #162a38 !important;
    background: transparent !important;
    text-decoration: none !important;
    font-size: .88rem !important;
    line-height: 1.34 !important;
    font-weight: 500 !important;
    transition: color .16s ease, background-color .16s ease, transform .16s ease !important;
}

.topo-region-body a::before{
    content: "" !important;
    position: absolute !important;
    left: 2px !important;
    top: 15px !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: rgba(61,127,159,.82) !important;
}

.topo-region-body a:hover{
    color: #2d7d91 !important;
    background: rgba(61,127,159,.09) !important;
}

/* Cascade de glace : pas de régions, mais même charte */
.topo-ice-list{
    max-width: 1080px !important;
}

.topo-ice-showcase{
    display: grid !important;
    grid-template-columns: minmax(330px, 42%) 1fr !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    background: #002b55 !important;
    border: 1px solid rgba(0,43,85,.18) !important;
    box-shadow: 0 20px 44px rgba(0,31,63,.14) !important;
}

.topo-ice-photos{
    position: relative !important;
    display: block !important;
    min-height: 590px !important;
    background: #dce8ee !important;
    overflow: hidden !important;
}

.topo-ice-photos::after{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0,43,85,.02), rgba(0,43,85,.26)),
        linear-gradient(0deg, rgba(0,43,85,.22), transparent 45%, rgba(0,43,85,.06));
}

.topo-ice-photos img{
    width: 100% !important;
    height: 100% !important;
    min-height: 590px !important;
    object-fit: cover !important;
    display: block !important;
    filter: saturate(.98) contrast(1.04) !important;
}

.topo-ice-photos img:not(:first-child){
    display: none !important;
}

.topo-ice-panel{
    position: relative !important;
    padding: 34px 38px 36px !important;
    color: #fff !important;
    background:
        linear-gradient(125deg, rgba(0,43,85,.98), rgba(0,31,63,.96)),
        radial-gradient(circle at 85% 25%, rgba(61,127,159,.32), transparent 32%) !important;
}

.topo-ice-panel::before{
    content: "";
    position: absolute;
    inset: 0;
    opacity: .18;
    background: radial-gradient(ellipse at 80% 25%, transparent 0 35%, #fff 35.5%, transparent 36%, transparent 45%, #fff 45.5%, transparent 46%);
    pointer-events: none;
}

.topo-ice-heading{
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
}

.topo-ice-kicker{
    width: 100% !important;
    color: rgba(255,255,255,.62) !important;
    font-size: .68rem !important;
    font-weight: 850 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
}

.topo-ice-heading h2{
    margin: 0 !important;
    color: #fff !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: clamp(1.55rem, 3vw, 2.25rem) !important;
    line-height: 1.06 !important;
}

.topo-ice-panel > p{
    position: relative !important;
    z-index: 1 !important;
    max-width: 680px !important;
    margin: 0 0 22px !important;
    color: rgba(255,255,255,.82) !important;
    font-size: .96rem !important;
    line-height: 1.65 !important;
}

.topo-ice-routes{
    border-radius: 10px !important;
    background: rgba(255,255,255,.96) !important;
    padding: 20px 22px !important;
}

.topo-ice-routes ul{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (max-width: 980px){
    .topo-modern-page{
        padding-top: 26px !important;
        padding-bottom: 68px !important;
    }

    .topo-modern-list{
        max-width: none !important;
        gap: 9px !important;
    }

    .topo-modern-page{
        --topo-band-height: 142px;
    }

    .topo-region-summary{
        grid-template-columns: 34% 1fr !important;
        height: var(--topo-band-height) !important;
        min-height: var(--topo-band-height) !important;
    }

    .topo-region-panel{
        padding: 14px 58px 14px 20px !important;
    }

    .topo-region-title{
        font-size: 1.32rem !important;
    }

    .topo-region-desc{
        font-size: .83rem !important;
    }

    .topo-region-toggle{
        right: 16px !important;
    }

    .topo-region-body{
        padding: 18px 20px 22px !important;
    }

    .topo-region-body ul{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 20px !important;
    }

    .topo-ice-showcase{
        grid-template-columns: 1fr !important;
    }

    .topo-ice-photos{
        min-height: 280px !important;
    }

    .topo-ice-photos img{
        min-height: 280px !important;
    }

    .topo-ice-panel{
        padding: 28px 24px !important;
    }
}

@media (max-width: 680px){
    .topo-modern-page .intro{
        margin-bottom: 28px !important;
    }

    .topo-modern-page .intro h1{
        font-size: 1.62rem !important;
    }

    .topo-modern-page .intro p{
        font-size: .88rem !important;
        line-height: 1.62 !important;
    }

    .topo-region{
        border-radius: 9px !important;
    }

    .topo-region-summary{
        grid-template-columns: 1fr !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .topo-region-media{
        height: 164px !important;
        min-height: 164px !important;
    }

    .topo-region-media img{
        min-height: 164px !important;
    }

    .topo-region-panel{
        height: auto !important;
        min-height: 112px !important;
        padding: 17px 58px 18px 18px !important;
    }

    .topo-region-titleline{
        gap: 8px !important;
    }

    .topo-region-title{
        font-size: 1.46rem !important;
    }

    .topo-region-count{
        height: 21px !important;
        padding: 0 10px !important;
        font-size: .58rem !important;
    }

    .topo-region-desc{
        display: block !important;
        margin-top: 7px !important;
        font-size: .82rem !important;
    }

    .topo-region-body{
        padding: 16px 16px 19px !important;
    }

    .topo-region-body ul,
    .topo-ice-routes ul{
        grid-template-columns: 1fr !important;
    }

    .topo-region-body a{
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        font-size: .86rem !important;
    }

    .topo-ice-photos{
        min-height: 230px !important;
    }

    .topo-ice-photos img{
        height: 230px !important;
        min-height: 230px !important;
    }
}

/* =========================================================
   Ajustements V3 — accordéons fermés, compteurs et recadrage
   ========================================================= */

.topo-modern-page .intro,
.topo-modern-page .intro h1,
.topo-modern-page .intro p{
    text-align:center !important;
}

.topo-region-media img{
    object-position:center 38% !important;
}

.topo-region:hover .topo-region-media img,
.topo-region[open] .topo-region-media img{
    transform:none !important;
}

.topo-region-titleline{
    display:block !important;
}

.topo-region-titleline .topo-region-count{
    display:none !important;
}

.topo-region-countline,
.topo-region-desc.topo-region-countline{
    position:relative !important;
    z-index:1 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:max-content !important;
    max-width:100% !important;
    height:23px !important;
    margin-top:9px !important;
    padding:0 12px !important;
    border-radius:999px !important;
    color:#e9fbff !important;
    background:rgba(45,138,143,.48) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    font-size:.65rem !important;
    line-height:1 !important;
    font-weight:800 !important;
    letter-spacing:.13em !important;
    text-transform:uppercase !important;
    white-space:nowrap !important;
}

.topo-ice-heading{
    margin-bottom:22px !important;
}

.topo-ice-heading h2{
    font-family:inherit !important;
}

.topo-ice-panel > p,
.topo-ice-kicker{
    display:none !important;
}

@media(max-width:680px){
    .topo-region-countline,
    .topo-region-desc.topo-region-countline{
        height:21px !important;
        padding:0 10px !important;
        font-size:.58rem !important;
    }
}


/* ======================================================================
   FICHE TECHNIQUE — fond blanc + illustration montagne + titre dégradé
   ====================================================================== */
.topo-card{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;
    background:
        linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.91)),
        url('/illustrations/card-contours.svg') right -34px bottom -42px / 320px auto no-repeat !important;
    border:1px solid rgba(0,43,85,.14) !important;
    box-shadow:0 18px 42px rgba(0,43,85,.11) !important;
}

.topo-card::before{
    content:"" !important;
    position:absolute !important;
    inset:54px 0 0 !important;
    z-index:-1 !important;
    background:
        url('/illustrations/panel-mountains.svg') right bottom / 74% auto no-repeat !important;
    opacity:.055 !important;
    pointer-events:none !important;
}

.topo-card h2{
    position:relative !important;
    z-index:1 !important;
    margin:0 !important;
    padding:17px 24px 16px !important;
    color:#ffffff !important;
    background:
        linear-gradient(90deg,rgba(0,43,85,.96) 0%,rgba(7,63,99,.94) 58%,rgba(45,138,143,.88) 100%) !important;
    border-bottom:0 !important;
    box-shadow:inset 0 -1px 0 rgba(255,255,255,.16) !important;
    text-shadow:0 1px 8px rgba(0,20,40,.18) !important;
}

.topo-infos{
    position:relative !important;
    z-index:1 !important;
    background:rgba(255,255,255,.72) !important;
}

.info-item{
    border-bottom:1px solid rgba(0,43,85,.10) !important;
}

.info-item .label{
    color:#2f596f !important;
}

.info-item .value{
    color:#152633 !important;
}

.topo-grid:not(:has(.topo-map)) .topo-card{
    background:
        linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.92)),
        url('/illustrations/card-contours.svg') right -26px bottom -40px / 330px auto no-repeat !important;
}

@media(max-width:980px){
    .topo-card{
        background:
            linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.93)),
            url('/illustrations/card-contours.svg') right -48px bottom -38px / 260px auto no-repeat !important;
    }

    .topo-card::before{
        background:url('/illustrations/panel-mountains.svg') right bottom / 96% auto no-repeat !important;
        opacity:.045 !important;
    }

    .topo-card h2{
        padding:15px 18px 14px !important;
    }

    .topo-infos{
        padding:8px 18px 16px !important;
    }
}


/* ======================================================================
   LISIBILITÉ — textes standard topo plus foncés sur fond Mercantour
   ====================================================================== */
.topo-page,
.topo-listing-page,
.topo-modern-page{
    color:#223443 !important;
}

.topo-page p,
.topo-page li,
.topo-page td,
.topo-page dd,
.topo-page .value,
.topo-page .topo-section,
.topo-page .topo-section p,
.topo-page .topo-content,
.topo-page .topo-content p,
.topo-listing-page .intro p,
.topo-listing-page p,
.topo-region-body li,
.topo-region-body a{
    color:#223443 !important;
}

.topo-page .intro p,
.topo-listing-page .intro p,
.topo-page .caption,
.topo-page figcaption,
.topo-page .topo-muted,
.topo-page .topo-meta,
.info-item .label{
    color:#3f5361 !important;
}

.info-item .value{
    color:#1f3342 !important;
}

.topo-page a:not(.as-brand):not(.menu-parent),
.topo-listing-page a:not(.as-brand):not(.menu-parent){
    color:#143f5d !important;
}

.topo-page a:hover,
.topo-listing-page a:hover{
    color:#002b55 !important;
}

/* Ne pas éclaircir les textes posés sur fonds foncés */
.topo-card h2,
.as-slide-caption,
.as-slide-caption *,
.as-slide-feature-badge,
.home-feature,
.home-feature *,
.home-editorial,
.home-editorial *{
    color:inherit;
}

@media(max-width:980px){
    .topo-page p,
    .topo-page li,
    .topo-page td,
    .topo-page dd,
    .topo-listing-page .intro p,
    .topo-region-body li,
    .topo-region-body a{
        color:#1f3342 !important;
    }
}


/* ======================================================================
   CORRECTIF LARGEUR LISTINGS TOPOS — appliqué dans topo.css
   topo.css est chargé après main.css : on verrouille ici la largeur éditoriale.
   ====================================================================== */
@media(min-width:981px){
    body .site-container > main.container.page-content.topo-listing-page,
    body .site-container > main.container.topo-listing-page,
    body .site-container > main.container.page-content.topo-modern-page,
    body .site-container > main.container.topo-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,
    body .site-container > main.container.topo-listing-page,
    body .site-container > main.container.page-content.topo-modern-page,
    body .site-container > main.container.topo-page{
        width:min(calc(100% - 48px), 1160px) !important;
        max-width:1160px !important;
    }
}

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

/* ======================================================================
   CARTE / TRACE GPS — même bandeau que la fiche technique
   ====================================================================== */
.topo-map{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;
    background:
        linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.91)),
        url('/illustrations/card-contours.svg') right -34px bottom -42px / 320px auto no-repeat !important;
    border:1px solid rgba(0,43,85,.14) !important;
    box-shadow:0 18px 42px rgba(0,43,85,.11) !important;
}

.topo-map::before{
    content:"Carte / trace GPS" !important;
    position:relative !important;
    z-index:1 !important;
    display:block !important;
    margin:0 !important;
    padding:17px 24px 16px !important;
    color:#ffffff !important;
    background:
        linear-gradient(90deg,rgba(0,43,85,.96) 0%,rgba(7,63,99,.94) 58%,rgba(45,138,143,.88) 100%) !important;
    border-bottom:0 !important;
    box-shadow:inset 0 -1px 0 rgba(255,255,255,.16) !important;
    text-shadow:0 1px 8px rgba(0,20,40,.18) !important;
    font-size:.74rem !important;
    line-height:1 !important;
    font-weight:850 !important;
    letter-spacing:.15em !important;
    text-transform:uppercase !important;
    text-align:center !important;
}

.topo-map iframe{
    position:relative !important;
    z-index:1 !important;
    display:block !important;
    width:100% !important;
    border:0 !important;
    background:#fff !important;
}

@media(max-width:980px){
    .topo-map{
        background:
            linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.93)),
            url('/illustrations/card-contours.svg') right -48px bottom -38px / 260px auto no-repeat !important;
    }

    .topo-map::before{
        padding:15px 18px 14px !important;
    }
}