/* ==================================================
   NAVIGATION ÉQUIPEMENTS PREMIUM
   Version 100 % responsive
================================================== */

.equip-navigation,
.equip-navigation *,
.equip-navigation *::before,
.equip-navigation *::after{
    box-sizing:border-box;
}

.equip-navigation{
    position:relative;
    z-index:40;

    margin-top:-58px;
    padding:0 0 42px;

    background:transparent;
}

.equip-navigation .le-container{
    width:min(1700px,94%);
    margin:0 auto;
}

/* ==================================================
   CATÉGORIES
================================================== */

.equip-category-nav{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));

    overflow:hidden;

    border:1px solid rgba(0,13,32,.08);
    border-radius:22px;

    background:#ffffff;

    box-shadow:
        0 24px 60px rgba(0,13,32,.10),
        0 8px 22px rgba(0,13,32,.05);
}

.equip-category-link{
    position:relative;
    isolation:isolate;

    min-width:0;
    min-height:118px;
    padding:22px;

    color:#000d20;

    display:grid;
    grid-template-columns:52px minmax(0,1fr);
    align-items:center;
    gap:18px;

    text-decoration:none;

    transition:
        color .3s ease,
        transform .3s ease,
        background .3s ease;
}

.equip-category-link:not(:last-child){
    border-right:1px solid rgba(0,13,32,.07);
}

.equip-category-link::before{
    content:"";

    position:absolute;
    inset:0;
    z-index:-1;

    background:
        linear-gradient(
            180deg,
            rgba(37,99,235,.055),
            rgba(37,99,235,.015)
        );

    opacity:0;

    transition:opacity .3s ease;
}

.equip-category-link::after{
    content:"";

    position:absolute;
    left:26px;
    right:26px;
    bottom:0;

    height:4px;

    border-radius:999px 999px 0 0;

    background:#2563eb;

    transform:scaleX(0);
    transform-origin:center;

    transition:transform .3s ease;
}

.equip-category-link:hover,
.equip-category-link.is-active{
    color:#2563eb;
}

.equip-category-link:hover::before,
.equip-category-link.is-active::before{
    opacity:1;
}

.equip-category-link:hover::after,
.equip-category-link.is-active::after{
    transform:scaleX(1);
}

.equip-category-icon{
    width:52px;
    height:52px;
    flex:0 0 52px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.equip-category-icon svg{
    width:38px;
    height:38px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;

    transition:transform .3s ease;
}

.equip-category-link:hover .equip-category-icon svg,
.equip-category-link.is-active .equip-category-icon svg{
    transform:translateY(-2px) scale(1.06);
}

.equip-category-label{
    min-width:0;
    min-height:52px;

    display:flex;
    align-items:center;

    font-size:18px;
    font-weight:900;
    line-height:1.35;

    overflow-wrap:anywhere;
}

/* ==================================================
   SERVICES
================================================== */

.equip-services-row{
    margin-top:20px;

    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr)) minmax(280px,360px);
    gap:18px;
    align-items:stretch;
}

.equip-service-card,
.equip-help-card{
    min-width:0;
    min-height:94px;
    padding:20px 22px;

    border-radius:16px;

    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    gap:16px;
    align-items:center;
}

.equip-service-card{
    border:1px solid rgba(0,13,32,.06);

    background:#f7f9fc;
}

.equip-service-card svg,
.equip-help-card > svg{
    width:34px;
    height:34px;

    fill:none;
    stroke:#000d20;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;

    transition:stroke .3s ease;
}

.equip-service-card div,
.equip-help-card div{
    min-width:0;
    min-height:54px;

    display:flex;
    flex-direction:column;
    justify-content:center;
}

.equip-service-card strong,
.equip-help-card strong{
    color:#000d20;

    font-size:15px;
    font-weight:900;
    line-height:1.3;

    overflow-wrap:anywhere;
}

.equip-service-card span,
.equip-help-card span{
    margin-top:4px;

    color:#55657d;

    font-size:13.5px;
    font-weight:600;
    line-height:1.45;

    overflow-wrap:anywhere;
}

.equip-help-card{
    grid-template-columns:34px minmax(0,1fr) auto;

    border:1.5px solid #000d20;

    background:#ffffff;
    color:#000d20;

    text-decoration:none;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.equip-help-card:hover{
    border-color:#2563eb;

    transform:translateY(-3px);

    box-shadow:0 18px 36px rgba(37,99,235,.12);
}

.equip-help-card:hover > svg{
    stroke:#2563eb;
}

.equip-help-arrow{
    flex:0 0 auto;

    font-size:28px;
    line-height:1;

    transition:
        color .3s ease,
        transform .3s ease;
}

.equip-help-card:hover .equip-help-arrow{
    color:#2563eb;

    transform:translateX(4px);
}

/* ==================================================
   RESPONSIVE — DESKTOP INTERMÉDIAIRE
================================================== */

@media(max-width:1500px){

    .equip-category-link{
        min-height:110px;
        padding:20px;
        grid-template-columns:48px minmax(0,1fr);
        gap:16px;
    }

    .equip-category-icon{
        width:48px;
        height:48px;
    }

    .equip-category-icon svg{
        width:35px;
        height:35px;
    }

    .equip-category-label{
        min-height:48px;
        font-size:16.5px;
    }

/*    .equip-services-row{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .equip-help-card{
        grid-column:1 / -1;
    }
    */
    
        .equip-services-row{

        grid-template-columns:repeat(2,minmax(0,1fr));

        gap:16px;

    }

    .equip-help-card{

        grid-column:auto;

    }

}

/* ==================================================
   REMPLACE UNIQUEMENT LES MEDIA QUERIES EXISTANTES
   de 1200px / 900px / 768px PAR CELLES-CI
================================================== */

/* ---------- TABLETTE / PETIT DESKTOP ---------- */

@media (max-width:1280px){

    .equip-navigation{
        margin-top:-34px;
        padding-bottom:36px;
    }

    .equip-navigation .le-container{
        width:min(100% - 34px,1700px);
    }

    /* La navigation devient un slider premium */
    .equip-category-nav{

        display:flex;

        overflow-x:auto;
        overflow-y:hidden;

        scroll-snap-type:x mandatory;
        scroll-padding-left:0;

        -webkit-overflow-scrolling:touch;
        overscroll-behavior-inline:contain;

        scrollbar-width:none;

        border-radius:20px;
    }

    .equip-category-nav::-webkit-scrollbar{
        display:none;
    }

    .equip-category-link{

        flex:0 0 calc((100% - 32px) / 3);
        min-width:calc((100% - 32px) / 3);

        min-height:108px;

        padding:18px 20px;

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

        gap:15px;

        border-right:1px solid rgba(0,13,32,.07)!important;
        border-bottom:0!important;

        scroll-snap-align:start;
    }

    .equip-category-link:last-child{
        border-right:0!important;
    }

    .equip-category-icon{
        width:46px;
        height:46px;
    }

    .equip-category-icon svg{
        width:33px;
        height:33px;
    }

    .equip-category-label{

        min-height:46px;

        font-size:15px;
        line-height:1.3;

    }

    /* 2 x 2 beaucoup plus harmonieux */

/*    .equip-services-row{

        grid-template-columns:repeat(2,minmax(0,1fr));

        gap:16px;

    }

    .equip-help-card{

        grid-column:auto;

    }
*/
}

/* ---------- MOBILE ---------- */

@media (max-width:760px){

    .equip-navigation{

        margin-top:-18px;
        padding-bottom:28px;

    }

    .equip-navigation .le-container{

        width:min(100% - 24px,1700px);

    }

    .equip-category-link{

        flex:0 0 min(240px,82vw);
        min-width:min(240px,82vw);

        min-height:94px;

        padding:17px;

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

        gap:14px;

    }

    .equip-category-icon{

        width:44px;
        height:44px;

    }

    .equip-category-icon svg{

        width:31px;
        height:31px;

    }

    .equip-category-label{

        font-size:15px;

    }

    .equip-services-row{

        grid-template-columns:1fr;

        gap:14px;

    }

}

/* ==================================================
   RESPONSIVE — PETIT MOBILE
================================================== */

@media(max-width:480px){

    .equip-navigation .le-container{
        width:min(100% - 20px,1700px);
    }

    .equip-category-nav{
        border-radius:16px;
    }

    .equip-category-link{
        flex-basis:min(212px,84vw);
        min-width:min(212px,84vw);
        min-height:88px;

        padding:15px 16px;

        grid-template-columns:42px minmax(0,1fr);
        gap:13px;
    }

    .equip-category-icon{
        width:42px;
        height:42px;
    }

    .equip-category-icon svg{
        width:30px;
        height:30px;
    }

    .equip-category-label{
        min-height:42px;

        font-size:14.5px;
        line-height:1.3;
    }

    .equip-service-card,
    .equip-help-card{
        min-height:82px;
        padding:15px;

        grid-template-columns:30px minmax(0,1fr);
        gap:13px;
    }

    .equip-help-card{
        grid-template-columns:30px minmax(0,1fr) auto;
    }

    .equip-service-card svg,
    .equip-help-card > svg{
        width:29px;
        height:29px;
    }

    .equip-service-card strong,
    .equip-help-card strong{
        font-size:14px;
    }

    .equip-service-card span,
    .equip-help-card span{
        font-size:12.5px;
    }

    .equip-help-arrow{
        font-size:23px;
    }

}

/* ==================================================
   TRÈS PETIT MOBILE
================================================== */

@media(max-width:360px){

    .equip-navigation .le-container{
        width:calc(100% - 16px);
    }

    .equip-category-link{
        flex-basis:min(198px,86vw);
        min-width:min(198px,86vw);
        padding:14px;
    }

    .equip-service-card,
    .equip-help-card{
        padding:14px;
        gap:11px;
    }

    .equip-service-card strong,
    .equip-help-card strong{
        font-size:13.5px;
    }

    .equip-service-card span,
    .equip-help-card span{
        font-size:12px;
    }

}

/* ==================================================
   TACTILE ET ACCESSIBILITÉ
================================================== */

@media(hover:none){

    .equip-category-link:hover .equip-category-icon svg,
    .equip-help-card:hover,
    .equip-help-card:hover .equip-help-arrow{
        transform:none;
    }

}

@media(prefers-reduced-motion:reduce){

    .equip-navigation *,
    .equip-navigation *::before,
    .equip-navigation *::after{
        animation:none !important;
        transition:none !important;
    }

}

/* ==================================================
   AFFORDANCE DE DÉFILEMENT DES CATÉGORIES
   Sous 1280px la barre de catégories devient un
   slider horizontal. Rien n'indiquait qu'il restait
   des catégories hors écran : on ajoute des dégradés
   latéraux et une mention d'aide.
   Tout est pilote par les classes posees en JS
   (is-scrollable / can-scroll-left / can-scroll-right)
   afin de ne jamais afficher un indicateur inutile.
================================================== */

.equip-category-scroller{
    position:relative;
    isolation:isolate;
}

/* Dégradés latéraux */

.equip-category-scroller::before,
.equip-category-scroller::after{
    content:"";

    /* Decale de 1px : la bordure de la barre reste
       visible sous le degrade. */
    position:absolute;
    top:1px;
    bottom:1px;
    z-index:2;

    width:66px;

    opacity:0;
    pointer-events:none;

    transition:opacity .25s ease;
}

.equip-category-scroller::before{
    left:1px;

    border-radius:19px 0 0 19px;

    background:
        linear-gradient(
            90deg,
            #ffffff 18%,
            rgba(255,255,255,0)
        );
}

.equip-category-scroller::after{
    right:1px;

    border-radius:0 19px 19px 0;

    background:
        linear-gradient(
            270deg,
            #ffffff 18%,
            rgba(255,255,255,0)
        );
}

.equip-category-scroller.can-scroll-left::before,
.equip-category-scroller.can-scroll-right::after{
    opacity:1;
}

/* Mention d'aide : visible tant que l'utilisateur n'a
   pas commence a faire defiler la barre. */

.equip-category-hint{
    display:none;

    margin:10px 2px 0;

    align-items:center;
    gap:7px;

    color:#55657d;

    font-size:12.5px;
    font-weight:700;
    line-height:1.3;

    transition:opacity .3s ease;
}

.equip-category-hint svg{
    width:16px;
    height:16px;
    flex:0 0 16px;

    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.equip-category-scroller.is-scrollable ~ .equip-category-hint{
    display:flex;
}

.equip-category-scroller.can-scroll-left ~ .equip-category-hint{
    opacity:0;
}

/* Petits écrans : flèches plus compactes, collées au
   bord pour masquer le moins possible de contenu. */

@media (max-width:600px){

    .equip-category-scroller::before,
    .equip-category-scroller::after{
        width:52px;
    }

    .equip-category-hint{
        font-size:12px;
    }

}

@media (max-width:480px){

    /* La barre passe a un rayon de 16px : les degrades
       suivent, sinon un angle blanc deborde. */

    .equip-category-scroller::before{
        border-radius:15px 0 0 15px;
    }

    .equip-category-scroller::after{
        border-radius:0 15px 15px 0;
    }

}

@media (max-width:360px){

    .equip-category-scroller::before,
    .equip-category-scroller::after{
        width:44px;
    }

    .equip-category-hint{
        font-size:11.5px;
    }

}

@media (prefers-reduced-motion:reduce){

    .equip-category-scroller::before,
    .equip-category-scroller::after,
    .equip-category-hint{
        transition:none;
    }

}