/* ==========================================================================
   NEOFLUX — Déploiement de réseaux : compléments du gabarit métier (lot « metiers-C », 16/10/2026)
   Chargé par pages/deploiement-de-reseaux.php seulement, APRÈS css/interieur.css et css/metier.css.
   Portée : comme le socle — classes « vi- » rangées dans <main class="vi"> ; aucune règle sur
   html, body, l'en-tête, le pied de page ni la barre mobile. Guide : _travail/SOCLE-METIER.md
   ========================================================================== */

/* Mots mis en valeur dans les titres saisis dans l'admin (<span class="…"> → <em>) */
.vi .vi-sec-head .vi-h2 em, .vi .vi-tech-h em { font-style: normal; color: var(--vi-gris); }
.vi .vi-sec-steps .vi-sec-head .vi-h2 em, .vi .vi-sec-dark .vi-sec-head .vi-h2 em { color: #CBD5E1; }
.vi .vi-sol-body h3 em, .vi .vi-st h3 em, .vi .vi-card-t em, .vi-sol-tl em { font-style: normal; }

/* h1 du lot E : mot-clé + complément (« : banques, télécoms… ») dans un seul bloc de texte (2 lignes) :
   le trait rouge reste en face de la 1re ligne */
.vi-h1-k > span { min-width: 0; }
.vi-hero .vi-h1-k { align-items: flex-start; }
.vi-hero .vi-h1-k::before { margin-top: .7em; }

/* 5 chiffres du haut : 2 colonnes sur téléphone (comme .is-4 de css/metier.css) */
@media (max-width: 768px) {
    .vi-proofs.is-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
    .vi-proofs.is-5 li:nth-child(odd) { padding-left: 0; border-left: 0; }
    .vi-proofs.is-5 li:nth-child(even) { padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .14); }
}

/* Secteurs : <article class="vi-card vi-dr-sec"><div class="vi-card-body"><div class="vi-dr-sec-top">icône + chiffre</div>
     <h3 class="vi-card-t">…</h3><p>…</p><ul class="vi-dr-tags"><li>…</li></ul></div></article> */
.vi-dr-sec-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-bottom: 4px; }
.vi-dr-sec-n { font-size: 1.6rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--vi-ink); white-space: nowrap; }
.vi-dr-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.vi-dr-tags li { font-size: .78rem; font-weight: 600; line-height: 1.4; color: var(--vi-txt); background: #F1F5F9; border: 1px solid var(--vi-line); border-radius: var(--vi-r-pill); padding: 3px 10px; }

/* Solutions : accroche de l'admin sous le titre de la carte (« Signalétique premium pour… ») */
.vi-sol-tl { font-size: .95rem; font-weight: 600; line-height: 1.45; color: var(--vi-ink); }

/* Encadré « Pourquoi NEOFLUX » : surtitre de l'admin ; avantages en cartes juste après */
.vi-led .vi-eb { margin-bottom: 10px; }
.vi-dr-adv { margin-bottom: 24px; }
/* 3 chiffres de l'admin, chacun avec une phrase : liste verticale (au lieu d'une ligne de gros chiffres) */
.vi-led-n.is-liste { display: grid; gap: 14px; }
.vi-led-n.is-liste li, .vi-led-n.is-liste li:first-child { padding: 0 0 0 16px; border-left: 2px solid rgba(248, 113, 113, .5); }
.vi-led-n.is-liste strong { font-size: 1.6rem; }
@media (max-width: 768px) {
    .vi-led-n.is-liste { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .vi-led-n.is-liste li, .vi-led-n.is-liste li:first-child { padding-left: 14px; }
    .vi-led-n.is-liste strong { font-size: 1.4rem; }
}

/* Capacités (« Données techniques ») : surtitre, titre et texte de l'admin */
.vi-tech-head { max-width: 720px; margin-bottom: 16px; }
.vi .vi-tech-head .vi-tech-h { margin-bottom: 0; }
.vi-tech-sub { margin-top: 6px; font-size: .95rem; line-height: 1.55; color: var(--vi-sub); }

/* Bandeau devis : le type présélectionné « Déploiement de réseau » (le plus long des 9) était coupé dans le champ
   de 221 px du formulaire sur ordinateur (« Déploiement de résea ») : texte et marge droite un peu réduits */
@media (min-width: 769px) {
    .vi-dv .vi-fld select { font-size: .9rem; padding-right: 32px; background-position: right 10px center; }
}

/* Téléphone (≤ 768 px) : aucun texte sous 15 px */
@media (max-width: 768px) {
    .vi-sol-tl, .vi-tech-sub, .vi-dr-tags li { font-size: 15px; }
    .vi-dr-sec-n { font-size: 1.4rem; }
}