/* ==========================================================================
   ABC DANSE - PLAN DU SITE
   Chargé après site.css et home.css
   ========================================================================== */

.sitemap-page{
    background:var(--home-paper);
    color:var(--home-ink);
}


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

.sitemap-hero{
    position:relative;
    overflow:hidden;
    padding:80px 0 72px;
    background:
        radial-gradient(circle at 85% 20%,rgba(238,61,131,.20),transparent 30%),
        linear-gradient(135deg,#211126,#5d1748);
    color:#fff;
}

.sitemap-hero:after{
    content:'';
    position:absolute;
    width:520px;
    height:520px;
    right:-185px;
    top:-265px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
}

.sitemap-hero-inner{
    position:relative;
    z-index:1;
    max-width:850px;
}

.sitemap-hero .home-kicker{
    color:#ff86b7;
}

.sitemap-hero h1{
    margin:8px 0 20px;
    color:#fff;
    font-size:clamp(2.8rem,6vw,5.4rem);
    line-height:.98;
    letter-spacing:-.045em;
    text-transform:none;
}

.sitemap-hero p{
    max-width:780px;
    margin:0;
    color:rgba(255,255,255,.88);
    font-size:1.08rem;
    line-height:1.75;
}


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

.sitemap-content{
    background:#f7f2f5;
}

.sitemap-intro{
    max-width:820px;
    margin:0 auto 38px;
}

.sitemap-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
}


/* CARTES ------------------------------------------------------------------ */

.sitemap-card{
    --sitemap-color:var(--home-purple);

    overflow:hidden;
    padding:28px;
    border:1px solid rgba(25,20,33,.07);
    border-top:5px solid var(--sitemap-color);
    border-radius:22px;
    background:#fff;
    box-shadow:0 10px 30px rgba(31,18,39,.07);
}

.sitemap-card-purple{
    --sitemap-color:var(--home-purple);
}

.sitemap-card-pink{
    --sitemap-color:var(--home-pink);
}

.sitemap-card-orange{
    --sitemap-color:var(--home-orange);
}

.sitemap-card-blue{
    --sitemap-color:var(--home-blue);
}

.sitemap-card-neutral{
    --sitemap-color:#6f6877;
}

.sitemap-card-dark{
    --sitemap-color:#29232c;
}


.sitemap-card-heading{
    display:grid;
    grid-template-columns:58px minmax(0,1fr);
    gap:17px;
    align-items:center;
    margin-bottom:22px;
}

.sitemap-card-icon{
    display:flex;
    width:54px;
    height:54px;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    background:var(--sitemap-color);
    color:#fff;
    font-size:1.25rem;
}

.sitemap-card-heading .home-kicker{
    margin-bottom:4px;
    color:var(--sitemap-color);
}

.sitemap-card-heading h2{
    margin:0;
    color:var(--home-ink);
    font-size:1.45rem;
    line-height:1.1;
    text-transform:none;
}


/* LIENS ------------------------------------------------------------------- */

.sitemap-links{
    display:grid;
    gap:8px;
}

.sitemap-links a{
    display:grid;
    grid-template-columns:minmax(0,1fr) 16px;
    gap:12px;
    min-height:48px;
    padding:11px 14px;
    align-items:center;
    border:1px solid rgba(25,20,33,.08);
    border-radius:12px;
    background:#faf8f9;
    color:var(--home-ink)!important;
    text-decoration:none;
    transition:
        transform .16s ease,
        border-color .16s ease,
        background .16s ease;
}

.sitemap-links a:hover,
.sitemap-links a:focus-visible{
    transform:translateX(2px);
    border-color:var(--sitemap-color);
    background:#fff;
}

.sitemap-links a span{
    font-weight:600;
    line-height:1.35;
}

.sitemap-links a i{
    color:var(--sitemap-color);
    font-size:.75rem;
}


/* NOTE -------------------------------------------------------------------- */

.sitemap-note{
    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    gap:16px;
    max-width:850px;
    margin:34px auto 0;
    padding:22px 24px;
    border:1px solid rgba(169,31,114,.10);
    border-radius:18px;
    background:#fff;
}

.sitemap-note > i{
    display:flex;
    width:44px;
    height:44px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#f3dfeb;
    color:var(--home-purple);
    font-size:1.2rem;
}

.sitemap-note strong{
    display:block;
    margin-bottom:5px;
    color:var(--home-ink);
}

.sitemap-note p{
    margin:0;
    color:var(--home-muted);
    line-height:1.55;
}


/* RESPONSIVE -------------------------------------------------------------- */

@media(max-width:900px){

    .sitemap-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:736px){

    .sitemap-hero{
        padding:54px 0 48px;
    }

    .sitemap-hero h1{
        font-size:clamp(2.5rem,13vw,4.1rem);
    }

    .sitemap-hero p{
        font-size:1rem;
    }

    .sitemap-intro{
        margin-bottom:28px;
    }

    .sitemap-card{
        padding:22px 18px;
        border-radius:18px;
    }

    .sitemap-card-heading{
        grid-template-columns:52px minmax(0,1fr);
        gap:13px;
    }

    .sitemap-card-icon{
        width:48px;
        height:48px;
        border-radius:14px;
        font-size:1.1rem;
    }

    .sitemap-card-heading h2{
        font-size:1.3rem;
    }

    .sitemap-links a{
        min-height:50px;
        padding:11px 13px;
    }

    .sitemap-note{
        grid-template-columns:42px minmax(0,1fr);
        padding:18px;
    }

    .sitemap-note > i{
        width:40px;
        height:40px;
    }
}