/* =========================================================
   Accueil Alpes-Sud.net — refonte magazine v6
   Fichier : /assets/css/index-premium.css
   ========================================================= */

body.home-index{
    background:#d5e3ea;
}

body.home-index .site-container{
    background:
        radial-gradient(circle at 6% 0%, rgba(61,127,159,.14), transparent 34%),
        radial-gradient(circle at 98% 22%, rgba(0,43,85,.10), transparent 32%),
        linear-gradient(180deg,#eef5f8 0%,#d2e1e8 100%);
}

body.home-index .main-menu{
    margin-bottom:0 !important;
}

.as-home-page{
    --as-home-deep:#002b55;
    --as-home-deep-2:#073f63;
    --as-home-ink:#10283b;
    --as-home-muted:#617584;
    --as-home-teal:#2d8a8f;
    --as-home-teal-2:#3d7f9f;
    --as-home-paper:#f4f8fa;
    --as-home-paper-2:#e3edf2;
    --as-home-line:rgba(0,43,85,.16);
    --as-home-shadow:0 18px 42px rgba(0,43,85,.11);

    width:min(calc(100% - 72px),1220px);
    margin:0 auto;
    padding:32px 0 82px;
    color:var(--as-home-ink);
    font-family:Inter, Arial, Helvetica, sans-serif;
}

.as-home-page *,
.as-home-page *::before,
.as-home-page *::after{
    box-sizing:border-box;
}

/* ---------------------------------------------------------
   Composition desktop : édito vertical assumé
   L'édito est une carte portrait, le slideshow devient le bloc principal
   d'actualité topo, le topo-guide reste une brève éditoriale compacte.
--------------------------------------------------------- */

.as-home-grid{
    display:grid;
    grid-template-columns:minmax(340px,.78fr) minmax(0,1.22fr);
    grid-template-rows:360px 190px;
    grid-template-areas:
        "editorial slider"
        "editorial feature";
    gap:24px;
    align-items:stretch;
}

.as-home-editorial,
.as-home-slideshow,
.as-home-feature{
    border:1px solid rgba(0,43,85,.18);
    box-shadow:var(--as-home-shadow);
}

/* ---------------------------------------------------------
   Édito : format vertical respecté, plus de panneau vide à droite
--------------------------------------------------------- */

.as-home-editorial{
    grid-area:editorial;
    position:relative;
    min-width:0;
    min-height:0;
    overflow:hidden;
    background:#0b3553;
}

.as-home-editorial::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    background:
        linear-gradient(180deg,rgba(0,31,63,.02) 0%,rgba(0,31,63,.18) 43%,rgba(0,31,63,.86) 100%),
        linear-gradient(90deg,rgba(0,31,63,.18),rgba(0,31,63,.02));
    pointer-events:none;
}

.as-home-editorial::after{
    display:none;
    content:none;
}

.as-home-editorial-photo{
    position:absolute;
    inset:0;
    z-index:1;
    margin:0;
    overflow:hidden;
    background:#d7e4e9;
}

.as-home-editorial-photo img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    filter:saturate(1.03) contrast(1.04);
}

.as-home-editorial-text{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:4;
    min-height:0;
    display:block;
    padding:0 28px 30px;
    color:#eff8fa;
}

.as-home-date{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 16px;
    color:#d9f0f4;
    font-size:.68rem;
    line-height:1;
    font-weight:850;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.as-home-date span{
    width:26px;
    height:26px;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.13);
    border:1px solid rgba(255,255,255,.16);
}

.as-home-date img{
    width:13px;
    height:13px;
    display:block;
    opacity:.95;
}

.as-home-editorial-text p{
    max-width:430px;
    margin:0;
    color:#f3fbfd;
    font-size:clamp(1rem,1.25vw,1.22rem);
    line-height:1.48;
    font-weight:650;
    letter-spacing:-.018em;
    text-shadow:0 14px 34px rgba(0,20,40,.48);
}

.as-home-editorial-text a,
.as-home-feature-text a{
    color:inherit;
    text-decoration:none;
    box-shadow:inset 0 -2px 0 rgba(255,255,255,.34);
    transition:background-color .16s ease, box-shadow .16s ease;
}

.as-home-editorial-text a:hover,
.as-home-feature-text a:hover{
    background:rgba(255,255,255,.13);
    box-shadow:inset 0 0 0 transparent;
}

/* ---------------------------------------------------------
   Slideshow : bloc principal horizontal, équilibré
--------------------------------------------------------- */

.as-home-slideshow-wrap{
    grid-area:slider;
    min-width:0;
    min-height:0;
}

.as-home-slideshow{
    position:relative;
    height:100%;
    min-height:0;
    overflow:hidden;
    background:#0a314f;
}

.as-slides-stage{
    position:relative;
    height:100%;
    min-height:0;
    overflow:hidden;
    background:var(--as-home-deep);
}

.as-slide-heading{
    position:absolute;
    z-index:8;
    left:24px;
    top:22px;
    display:flex;
    align-items:center;
    gap:12px;
    pointer-events:none;
}

.as-slide-heading p{
    margin:0;
    color:#f6fbfc;
    font-size:.66rem;
    line-height:1;
    font-weight:850;
    letter-spacing:.16em;
    text-transform:uppercase;
    text-shadow:0 2px 18px rgba(0,25,48,.55);
}

.as-slide-heading i{
    display:block;
    width:54px;
    height:1px;
    background:linear-gradient(90deg,rgba(255,255,255,.70),transparent);
}

.as-slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transform:scale(1.012);
    transition:opacity .38s ease, transform .48s ease, visibility .38s ease;
}

.as-slide.is-active{
    opacity:1;
    visibility:visible;
    transform:scale(1);
    z-index:1;
}

.as-slide-link{
    position:absolute;
    inset:0;
    display:block;
    color:#fff;
    text-decoration:none;
    overflow:hidden;
}

.as-slide-link img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    filter:saturate(1.02) contrast(1.04);
}

.as-slide-shade{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(0,25,48,.78) 0%,rgba(0,25,48,.26) 46%,rgba(0,25,48,.08) 100%),
        linear-gradient(180deg,rgba(0,25,48,.46) 0%,rgba(0,25,48,.02) 42%,rgba(0,25,48,.74) 100%);
    pointer-events:none;
}

.as-slide-caption{
    position:absolute;
    left:28px;
    right:98px;
    bottom:34px;
    z-index:3;
    max-width:660px;
    display:block;
    color:#fff;
}

.as-slide-feature-badge{
    display:inline-flex;
    align-items:center;
    min-height:22px;
    margin:0 0 10px;
    padding:0 10px;
    color:#e8fbff;
    background:rgba(45,138,143,.76);
    border:1px solid rgba(255,255,255,.16);
    font-size:.56rem;
    line-height:1;
    font-weight:850;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.as-slide-caption strong{
    display:block;
    max-width:660px;
    color:#fff;
    font-size:clamp(1.48rem,2.55vw,2.38rem);
    line-height:.98;
    font-weight:850;
    letter-spacing:-.055em;
    text-shadow:0 18px 42px rgba(0,25,48,.50);
}

.as-slide-nav{
    position:absolute;
    z-index:9;
    top:50%;
    width:36px;
    height:36px;
    margin-top:-18px;
    border:1px solid rgba(255,255,255,.34);
    background:rgba(0,43,85,.42);
    backdrop-filter:blur(8px);
    cursor:pointer;
}

.as-slide-prev{ left:16px; }
.as-slide-next{ right:16px; }

.as-slide-nav span{
    position:absolute;
    left:50%;
    top:50%;
    width:9px;
    height:9px;
    border-top:2px solid #fff;
    border-left:2px solid #fff;
}

.as-slide-prev span{ transform:translate(-35%,-50%) rotate(-45deg); }
.as-slide-next span{ transform:translate(-65%,-50%) rotate(135deg); }

.as-slide-nav:hover{
    background:rgba(45,138,143,.72);
}

.as-slide-dots{
    position:absolute;
    z-index:9;
    left:28px;
    right:28px;
    bottom:13px;
    display:flex;
    flex-wrap:wrap;
    gap:5px;
}

.as-slide-dot{
    width:14px;
    height:3px;
    padding:0;
    border:0;
    background:rgba(255,255,255,.34);
    cursor:pointer;
}

.as-slide-dot.is-active{
    width:30px;
    background:#fff;
}

.as-slide-dot:hover{
    background:rgba(255,255,255,.78);
}

/* ---------------------------------------------------------
   Topo-guide : brève compacte, importance secondaire
--------------------------------------------------------- */

.as-home-feature{
    grid-area:feature;
    display:grid;
    grid-template-columns:150px minmax(0,1fr);
    align-items:center;
    min-width:0;
    min-height:0;
    overflow:hidden;
    background:
        linear-gradient(145deg,rgba(7,63,99,.98),rgba(0,43,85,.99)),
        radial-gradient(circle at 100% 18%, rgba(45,138,143,.22), transparent 34%);
}

.as-home-feature-cover{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:0;
    padding:14px 4px 14px 18px;
    background:transparent;
    overflow:visible;
}

.as-home-feature-cover img{
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:160px;
    object-fit:contain;
    object-position:center center;
    filter:drop-shadow(0 10px 16px rgba(0,18,36,.28));
}

.as-home-feature-text{
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:18px 24px 18px 8px;
    color:#eff8fa;
}

.as-home-feature-text span{
    display:inline-block;
    width:max-content;
    margin:0 0 12px;
    color:#ddf8fa;
    font-size:.60rem;
    line-height:1;
    font-weight:850;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.as-home-feature-text h2{
    max-width:560px;
    margin:0 0 10px;
    color:#fff;
    font-size:clamp(1.12rem,1.42vw,1.45rem);
    line-height:1.05;
    font-weight:850;
    letter-spacing:-.045em;
}

.as-home-feature-text p{
    max-width:620px;
    margin:0 0 7px;
    color:rgba(247,252,253,.82);
    font-size:.82rem;
    line-height:1.5;
}

.as-home-feature-text p:last-child{
    margin-bottom:0;
}

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */

@media(max-width:1100px){
    .as-home-grid{
        grid-template-columns:minmax(310px,.78fr) minmax(0,1.22fr);
        grid-template-rows:340px 190px;
    }

    .as-home-editorial-text{
        padding:0 24px 28px;
    }

    .as-home-editorial-text p{
        font-size:clamp(1rem,1.65vw,1.18rem);
    }

    .as-home-feature{
        grid-template-columns:138px minmax(0,1fr);
    }

    .as-home-feature-cover img{
        max-height:150px;
    }
}

@media(max-width:980px){
    .as-home-page{
        width:min(calc(100% - 32px),760px);
        padding:18px 0 58px;
    }

    .as-home-grid{
        display:grid;
        grid-template-columns:1fr;
        grid-template-rows:auto;
        grid-template-areas:
            "editorial"
            "slider"
            "feature";
        gap:16px;
    }

    .as-home-editorial{
        min-height:560px;
    }

    .as-home-editorial-text{
        padding:0 30px 34px;
    }

    .as-home-slideshow{
        height:380px;
        min-height:380px;
    }

    .as-home-feature{
        display:grid;
        grid-template-columns:170px 1fr;
        min-height:210px;
    }

    .as-home-feature-cover{
        min-height:210px;
        padding:16px 8px 16px 18px;
    }

    .as-home-feature-cover img{
        max-height:178px;
    }

    .as-home-feature-text{
        padding:22px 24px 22px 10px;
        justify-content:center;
    }
}

@media(max-width:680px){
    .as-home-page{
        width:min(calc(100% - 20px),520px);
        padding-top:12px;
        padding-bottom:42px;
    }

    .as-home-grid{
        gap:12px;
    }

    .as-home-editorial{
        min-height:0;
        display:flex;
        flex-direction:column;
        background:var(--as-home-deep);
    }

    .as-home-editorial::before,
    .as-home-editorial::after{
        display:none;
    }

    .as-home-editorial-photo{
        position:relative;
        inset:auto;
        height:auto;
    }

    .as-home-editorial-photo img{
        height:auto;
        min-height:0;
        object-fit:contain;
        object-position:center center;
        filter:none;
    }

    .as-home-editorial-text{
        position:relative;
        left:auto;
        right:auto;
        bottom:auto;
        width:100%;
        min-height:0;
        padding:22px 21px 24px;
        background:
            linear-gradient(145deg,rgba(0,43,85,.99),rgba(7,63,99,.96)),
            radial-gradient(circle at 100% 20%, rgba(45,138,143,.24), transparent 34%);
    }

    .as-home-editorial-text::before{
        content:"";
        position:absolute;
        left:21px;
        top:0;
        width:92px;
        height:2px;
        background:linear-gradient(90deg,var(--as-home-teal),transparent);
    }

    .as-home-editorial-text p{
        font-size:1.18rem;
        line-height:1.35;
        letter-spacing:-.022em;
        text-shadow:none;
    }

    .as-home-date{
        margin-bottom:13px;
        font-size:.66rem;
        letter-spacing:.13em;
    }

    .as-home-slideshow{
        min-height:360px;
        height:360px;
    }

    .as-slide-heading{
        left:17px;
        top:16px;
        right:17px;
    }

    .as-slide-heading p{
        font-size:.64rem;
        letter-spacing:.13em;
    }

    .as-slide-heading i{
        width:42px;
    }

    .as-slide-caption{
        left:18px;
        right:18px;
        bottom:30px;
    }

    .as-slide-caption strong{
        font-size:clamp(1.55rem,8vw,2.25rem);
        line-height:.98;
    }

    .as-slide-feature-badge{
        margin-bottom:9px;
        font-size:.58rem;
    }

    .as-slide-nav{
        top:auto;
        bottom:62px;
        width:36px;
        height:36px;
        margin-top:0;
    }

    .as-slide-prev{ left:16px; }
    .as-slide-next{ right:16px; }

    .as-slide-dots{
        left:18px;
        right:18px;
        bottom:13px;
        gap:5px;
    }

    .as-slide-dot{
        width:15px;
    }

    .as-slide-dot.is-active{
        width:30px;
    }

    .as-home-feature{
        display:flex;
        flex-direction:column;
        min-height:0;
    }

    .as-home-feature-cover{
        height:auto;
        min-height:0;
        flex:0 0 auto;
        padding:16px 18px 6px;
    }

    .as-home-feature-cover img{
        height:auto;
        max-height:none;
        object-fit:contain;
        filter:drop-shadow(0 8px 14px rgba(0,18,36,.24));
    }

    .as-home-feature-text{
        padding:18px 20px 22px;
    }

    .as-home-feature-text h2{
        font-size:1.25rem;
    }
}


/* ======================================================================
   CORRECTIF MOBILE — flèches slideshow hors zone texte
   Les flèches sont recentrées verticalement sur l'image pour ne plus
   masquer le titre/caption des mises en ligne récentes.
   ====================================================================== */
@media(max-width:680px){
    .as-home-slideshow .as-slide-nav{
        top:50% !important;
        bottom:auto !important;
        transform:translateY(-50%) !important;
        width:34px !important;
        height:34px !important;
        margin-top:0 !important;
        background:rgba(0,43,85,.58) !important;
        backdrop-filter:blur(4px);
    }

    .as-home-slideshow .as-slide-prev{
        left:13px !important;
    }

    .as-home-slideshow .as-slide-next{
        right:13px !important;
    }

    .as-home-slideshow .as-slide-caption{
        left:18px !important;
        right:18px !important;
        bottom:42px !important;
        padding-right:0 !important;
    }
}

/* ======================================================================
   RAYONS ÉDITORIAUX — accueil
   ====================================================================== */
.as-home-editorial,
.as-home-slideshow,
.as-home-feature{
    border-radius:var(--as-radius-editorial,10px) !important;
}

.as-home-editorial-photo,
.as-home-editorial-photo img,
.as-slides-stage,
.as-slide,
.as-slide-link,
.as-slide-link img{
    border-radius:inherit !important;
}

.as-slide-feature-badge,
.as-home-feature-text span,
.as-slide-nav{
    border-radius:var(--as-radius-button,5px) !important;
}

.as-home-feature-cover img{
    border-radius:var(--as-radius-media,6px) !important;
}

/* ======================================================================
   CORRECTIF ICÔNE DATE ÉDITO — calendar.png sans cadre
   L'icône occupe toute la place disponible, sans rectangle ni liseret.
   ====================================================================== */
.as-home-date span{
    width:32px;
    height:32px;
    flex:0 0 32px;
    display:grid;
    place-items:center;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

.as-home-date span img{
    display:block !important;
    width:32px !important;
    height:32px !important;
    object-fit:contain !important;
    opacity:1 !important;
    content:url("/assets/img/calendar.png");
}

.as-home-date span::before,
.as-home-date span::after{
    display:none !important;
    content:none !important;
}

@media(max-width:680px){
    .as-home-date span{
        width:30px;
        height:30px;
        flex-basis:30px;
    }

    .as-home-date span img{
        width:30px !important;
        height:30px !important;
    }
}


/* =========================================================
   iPad / tablette — édito + mises en ligne côte à côte
   On évite le grand bandeau horizontal : la photo verticale garde
   un format portrait, et le bloc "Mises en ligne récentes topos"
   vient naturellement à côté.
   iPhone conserve le rendu existant.
   ========================================================= */
@media(min-width:681px) and (max-width:980px){
    .as-home-page{
        width:min(calc(100% - 32px),920px);
    }

    .as-home-grid{
        display:grid;
        grid-template-columns:minmax(285px,.43fr) minmax(0,.57fr);
        grid-template-rows:520px auto;
        grid-template-areas:
            "editorial slider"
            "feature feature";
        gap:16px;
        align-items:stretch;
    }

    .as-home-editorial{
        min-height:520px;
    }

    .as-home-editorial-photo{
        position:absolute;
        inset:0;
        height:auto;
    }

    .as-home-editorial-photo img{
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center center;
    }

    .as-home-editorial-text{
        padding:0 24px 28px;
    }

    .as-home-editorial-text p{
        font-size:1.08rem;
        line-height:1.42;
    }

    .as-home-slideshow-wrap{
        grid-area:slider;
        min-height:520px;
    }

    .as-home-slideshow{
        height:520px;
        min-height:520px;
    }

    .as-slide-caption strong{
        font-size:clamp(1.5rem,3.4vw,2.15rem);
        line-height:1.02;
    }

    .as-home-feature{
        grid-area:feature;
        display:grid;
        grid-template-columns:150px minmax(0,1fr);
        min-height:190px;
    }
}