/* ==========================================================================
   NEOFLUX — Page Services (lot « services », 16/10/2026)
   Compléments propres à pages/services.php (maquette validée maquettes-pages-interieures/services.html),
   en plus de css/interieur.css et css/metier.css (cartes .vi-sv, chiffres .vi-kpi, onglets .vi-ch-…).
   Chargement : APRÈS css/metier.css.
   Portée : comme le socle — classes « vi- » rangées dans <main id="contenu" class="vi has-hero"> ;
     aucune règle sur html, body, l'en-tête, le pied de page ni la barre mobile.
   ========================================================================== */

/* Carte métier sans aucune photo (ni dans Cartes services, ni photo du métier) : fond de marque + icône de la carte */
.vi-sv-img.is-vide { display: grid; place-items: center; min-height: 200px; color: rgba(255, 255, 255, .86); font-size: 2.6rem;
    background: radial-gradient(260px 200px at 80% 10%, rgba(212, 47, 47, .32), transparent 70%), radial-gradient(240px 200px at 10% 100%, rgba(0, 51, 153, .3), transparent 70%), var(--vi-nuit2); }

/* Carte d'un métier sans page (carte ajoutée dans l'admin) : pas de « Découvrir », le bouton Devis reste à droite */
.vi-sv.is-sans-lien .vi-sv-foot { justify-content: flex-end; }
.vi-sv.is-sans-lien:hover { transform: none; box-shadow: none; border-color: var(--vi-line); }

/* « Dans ce secteur, ils nous font confiance » : pastilles de même largeur, 3 par ligne (comme la maquette ;
   sur téléphone, la grille de 3 de css/interieur.css s'applique déjà) */
@media (min-width: 601px) {
    .vi-ch-side .vi-logos.is-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .vi-ch-side .vi-logos.is-tiles li { height: 64px; padding: 8px 12px; min-width: 0; }
    .vi-ch-side .vi-logos.is-tiles img { width: auto; height: auto; max-width: 100%; max-height: 40px; }
}
/* Logos des secteurs en couleur sur leurs pastilles blanches, comme la maquette (le socle les grise jusqu'au survol) */
.vi-ch-side .vi-logos.is-tiles img { filter: none; opacity: 1; }

/* Onglets « Votre activité » : écart sous la rangée gardé sur téléphone (≤ 768 px, la règle .vi-chips de
   css/metier.css remet la marge basse à 0 ; la maquette garde 28 px) */
.vi-chips.vi-ch-tabs { margin-bottom: 28px; }
@media (max-width: 600px) { .vi-chips.vi-ch-tabs { margin-bottom: 24px; } }

/* Chiffres et clients : défilé des logos sous la bande de chiffres, puis lien vers les réalisations */
.vi-sv-pr .vi-kpi { margin-bottom: 44px; }
.vi-sv-more { margin-top: 28px; text-align: center; }

@media (max-width: 600px) {
    .vi-sv-img.is-vide { min-height: 0; font-size: 2.2rem; }
    .vi-sv-pr .vi-kpi { margin-bottom: 32px; }
    .vi-sv-more { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .vi-sv.is-sans-lien:hover { transform: none; }
}