/* ===== Variables custom pour le carrousel ===== */
:root{
    --svc-body-bg: #ffffff;              /* fond des cartes */
    --svc-border-color: #e5e7eb;         /* bordure par défaut */
    --svc-border-hover: #cfd5dc;         /* bordure au hover (un peu plus contrastée) */
    --svc-text-secondary: #6b7280;       /* texte secondaire */
}

/* ===== Boutons ===== */
.svc-btn{
    border:1px solid var(--svc-border-color);
    background:transparent;
    padding:.4rem .7rem;
    border-radius:.75rem;
    line-height:1;
}
.svc-btn:focus{ outline:2px solid currentColor; outline-offset:2px; }

/* ===== Carrousel (scroll-snap) ===== */
.svc-carousel{ position:relative; }
.svc-track{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:85%;
    gap:1rem;
    overflow-x:auto;

    /* marges visuelles + marge droite responsive */
    padding:.25rem;
    padding-right: clamp(1rem, 4vw, 3rem);

    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;

    /* alignement au snap avec un petit coussin à droite */
    scroll-padding-left:.25rem;
    scroll-padding-right: clamp(.5rem, 3vw, 2rem);
}
.svc-track::-webkit-scrollbar{ display:none; }
.svc-track::after{ content:""; display:block; width:.5rem; } /* espace fantôme final */

/* ===== Responsive : colonnes visibles ===== */
@media (min-width:576px){ .svc-track{ grid-auto-columns:60%; } }
@media (min-width:768px){ .svc-track{ grid-auto-columns:45%; } }
@media (min-width:992px){ .svc-track{ grid-auto-columns:33.333%; } }
@media (min-width:1400px){ .svc-track{ grid-auto-columns:25%; } }

/* ===== Carte ===== */
.svc-card{
    position:relative;
    display:grid;
    grid-template-rows:auto 1fr;
    gap:.75rem;

    background:var(--svc-body-bg);
    border:1px solid transparent;       /* on laisse la place, mais couleur via ::before */
    border-radius:1rem;
    overflow:hidden;                     /* évite que l'image déborde aux coins */

    padding:.75rem;
    text-decoration:none;
    color:inherit;
    scroll-snap-align:start;

    box-shadow:0 1px 2px rgba(0,0,0,.05);
    transition:transform .25s ease, box-shadow .25s ease;
}
.svc-card::before{
    content:"";
    position:absolute; inset:0;
    border-radius:inherit;
    box-shadow:0 0 0 1px var(--svc-border-color) inset;   /* ring bordure */
    pointer-events:none;
    transition:box-shadow .25s ease;
}
.svc-card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,0,0,.10);
}
.svc-card:hover::before{
    box-shadow:0 0 0 1px var(--svc-border-hover) inset;
}

/* Image avec ratio fixe */
.svc-card picture{ position:relative; display:block; border-radius:.8rem; overflow:hidden; }
.svc-card picture::before{ content:""; display:block; padding-top:66.66%; } /* 3:2 */
.svc-card img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    transition:transform .5s ease;
    will-change: transform;
}
.svc-card:hover img{ transform:scale(1.04); }

/* Texte */
.svc-info{ padding:0 .25rem .25rem; }
.svc-title{ font-size:1.05rem; margin:0 0 .25rem; }
.svc-txt{ margin:0 0 .5rem; color:var(--svc-text-secondary); }
.svc-tag{
    display:inline-block; font-size:.75rem;
    border:1px solid var(--svc-border-color);
    padding:.15rem .5rem; border-radius:999px;
    background:rgba(0,0,0,.03);
}

/* Motion réduit */
@media (prefers-reduced-motion: reduce){
    .svc-card:hover, .svc-card img{ transition:none !important; }
    .svc-track{ scroll-behavior:auto; }
}