/* ==========================================================================
   NEOFLUX — Gabarit des pages métiers et de la page Services (lot « socle-metier »)
   Composants des maquettes validées maquettes-pages-interieures/metier-enseignes.html
   et services.html, en plus du socle css/interieur.css (mêmes jetons « --vi-… »).

   Chargement : par les seules pages refaites, APRÈS css/interieur.css :
     <link rel="stylesheet" href="../css/interieur.css?v=<?= (int) @filemtime(__DIR__ . '/../css/interieur.css') ?>">
     <link rel="stylesheet" href="../css/metier.css?v=<?= (int) @filemtime(__DIR__ . '/../css/metier.css') ?>">
   Portée : comme interieur.css — toutes les classes commencent par « vi- » et se rangent
     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 ; aucun effet sur une page qui ne charge pas ce fichier.
   Comportements (apparitions, sommaire, défilé des logos, onglets) : js/metier.js ;
   formulaire de devis court : includes/devis-court.php + js/devis-court.js.
   Guide : _travail/SOCLE-METIER.md

   Sommaire
     1. Héros métier : étiquette, 4 preuves          8. FAQ en accordéon
     2. Sommaire collant (ordinateur)                 9. Cartes métiers / « Nos autres métiers »
     3. Solutions côte à côte + « Vous hésitez ? »   10. Services : grandes cartes, chiffres
     4. Encadré « Pourquoi la LED ? » (chiffres,     11. « Quel produit pour quel besoin ? »
        comparatif)                                  12. Bandeau devis (compléments)
     5. Données techniques                           13. Téléphone, mouvements réduits, impression
     6. Réalisations du métier (mosaïque)
     7. Garanties en bandeau court
   ========================================================================== */

/* ══════════ 1. Héros métier ══════════
   Héros : css/interieur.css (.vi-hero, .vi-hero-bg, .vi-proofs, .vi-hero-cap…).
   Ici : l'étiquette de l'admin au-dessus du h1 et la barre de 4 preuves. */
.vi-hero-tag { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4; color: rgba(255, 255, 255, .78); }
.vi-hero-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--vi-rouge-l); flex: none; }
.vi-hero .vi-h1-m b, .vi-hero .vi-h1-m strong { font-weight: inherit; }
/* Recette : slogan en <p class="vi-h1-m"> hors du h1 (7 métiers, À propos) → même graisse que Services, Réalisations, Contact et la maquette */
.vi .vi-h1-m { font-weight: 700; }
@media (max-width: 768px) {
    .vi-hero-tag { font-size: 15px; letter-spacing: .06em; margin-bottom: 10px; }
    /* 4 chiffres : 2 × 2 sur téléphone (au lieu de 3 colonnes) */
    .vi-proofs.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
    .vi-proofs.is-4 li:nth-child(odd) { padding-left: 0; border-left: 0; }
    .vi-proofs.is-4 li:nth-child(even) { padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .14); }
}

/* ══════════ 2. Sommaire collant (ordinateur et tablette) ══════════
   <nav class="vi-sn" aria-label="Sur cette page"><div class="vi-wrap"><span class="vi-sn-k">…</span>
     <ul><li><a href="#solutions">…</a></li>…</ul><div class="vi-sn-cta"><a class="vi-btn vi-btn-wa">…</a></div></div></nav>
   Placé entre le héros et la 1re section ; collé sous l'en-tête réduit ; masqué sur téléphone.
   La partie visible est surlignée par js/metier.js (aria-current="true"). */
.vi-sn { position: sticky; top: var(--vi-hd-s); z-index: 900; background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--vi-line); box-shadow: 0 10px 24px -20px rgba(15, 23, 42, .3); }
.vi-sn .vi-wrap { display: flex; align-items: center; gap: 8px; min-height: 56px; }
.vi-sn-k { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vi-gris); margin-right: 6px; white-space: nowrap; }
.vi-sn ul { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.vi-sn ul::-webkit-scrollbar { display: none; }
.vi-sn ul a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--vi-r-pill); font-size: .88rem; font-weight: 500; color: var(--vi-sub); text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.vi-sn ul a:hover { background: #F1F5F9; color: var(--vi-ink); }
.vi-sn ul a[aria-current="true"] { background: var(--vi-ink); color: #fff; }
.vi-sn-cta { margin-left: auto; flex: none; }
.vi-sn-cta .vi-btn { min-height: 44px; padding: .55rem 1.1rem; font-size: .88rem; }
@media (max-width: 1100px) { .vi-sn-k { display: none; } }
@media (max-width: 768px) { .vi-sn { display: none; } }

/* ══════════ 3. Solutions du métier : cartes côte à côte (au lieu des onglets) ══════════
   <div class="vi-sol-grid"> (3 colonnes ; .is-2 / .is-4) > <article class="vi-sol" style="--op:50% 45%">
     <div class="vi-sol-img"><img …><span class="vi-sol-badge">…</span></div>  (photo absente : .vi-sol-img.is-vide + icône)
     <div class="vi-sol-body"><span class="vi-sol-k">…</span><h3>…</h3><p>…</p>
       <ul class="vi-checks is-sm">…</ul><p class="vi-sol-for"><b>Pour :</b> …</p></div></article> */
.vi-sol-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--vi-gap); }
.vi-sol-grid.is-2 { --cols: 2; }
.vi-sol-grid.is-4 { --cols: 4; }
.vi-sol { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--vi-line); border-radius: var(--vi-r-card); overflow: hidden; min-width: 0; transition: transform .3s var(--vi-ease), box-shadow .3s, border-color .3s; }
.vi-sol:hover { transform: translateY(-4px); box-shadow: var(--vi-sh-card); border-color: var(--vi-line2); }
.vi-sol-img { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--vi-nuit2); }
.vi-sol-img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 50%); transition: transform .7s var(--vi-ease); }
.vi-sol:hover .vi-sol-img img { transform: scale(1.05); }
/* Pas encore de photo (Admin › page du métier › Solutions › Image) : fond de marque + icône */
.vi-sol-img.is-vide { display: grid; place-items: center; background: radial-gradient(260px 180px at 85% 10%, rgba(212, 47, 47, .32), transparent 70%), radial-gradient(260px 200px at 0% 100%, rgba(0, 51, 153, .35), transparent 70%), var(--vi-nuit2); color: rgba(255, 255, 255, .5); font-size: 2.6rem; }
.vi-sol-badge { position: absolute; top: 12px; left: 12px; z-index: 1; max-width: calc(100% - 24px); background: rgba(8, 12, 20, .84); color: #fff; font-size: .75rem; font-weight: 600; line-height: 1.35; padding: 4px 11px; border-radius: var(--vi-r-pill); }
.vi-sol-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 22px 24px; flex: 1; min-width: 0; }
.vi-sol-k { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vi-gris); line-height: 1.45; }
.vi .vi-sol-body h3 { font-size: 1.2rem; line-height: 1.25; color: var(--vi-ink); }
.vi-sol-body > p { font-size: .95rem; color: var(--vi-sub); line-height: 1.55; }
.vi-sol-body .vi-checks { margin: 2px 0 4px; gap: 7px; }
.vi-sol-for { margin-top: auto; padding-top: 12px; border-top: 1px solid #F1F5F9; width: 100%; font-size: .86rem; color: var(--vi-gris); }
.vi-sol-for b { color: var(--vi-txt); font-weight: 600; }
/* Encadré « Vous hésitez ? » (bordure en pointillés) + bouton WhatsApp */
.vi-help { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-top: 24px; padding: 22px 26px; border-radius: var(--vi-r-card); background: #fff; border: 1px dashed var(--vi-line2); }
.vi-help-t { max-width: 660px; min-width: 0; }
.vi-help-t p { font-size: 1rem; color: var(--vi-txt); }
.vi-help-t p b { color: var(--vi-ink); }
.vi-help-t .vi-help-art { margin-top: 6px; font-size: .9rem; color: var(--vi-gris); }
.vi-help-t .vi-help-art a { color: var(--vi-rouge); font-weight: 600; text-underline-offset: 3px; }
.vi-help > .vi-btn { flex: none; }
@media (max-width: 1100px) { .vi-sol-grid.is-4 { --cols: 2; } }
@media (max-width: 960px) {
    .vi-sol-grid, .vi-sol-grid.is-2, .vi-sol-grid.is-4 { --cols: 1; gap: 14px; }
    .vi-sol { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }
    .vi-sol-img { aspect-ratio: auto; min-height: 100%; }
    .vi-sol-img img { position: absolute; inset: 0; }
}
@media (max-width: 600px) {
    .vi-sol { display: flex; }
    .vi-sol-img { aspect-ratio: 16 / 10; min-height: 0; }
    .vi-sol-img img { position: static; }
    .vi-sol-body { padding: 18px 18px 20px; }
    .vi .vi-sol-body h3 { font-size: 1.1rem; }
    .vi-sol-k { letter-spacing: .05em; }
    .vi-help { padding: 18px; }
    .vi-help > .vi-btn { width: 100%; }
    .vi-sol:hover { transform: none; }
}

/* ══════════ 4. Encadré sombre « Pourquoi la LED ? » : argument + chiffres et/ou comparatif ══════════
   <div class="vi-led"><div><h3>…</h3><p>…</p></div>
     <ul class="vi-led-n"><li><strong>80 %</strong><span>…</span></li>…</ul>      (gros chiffres, facultatif)
     <table class="vi-led-t">…</table></div>                                      (comparatif, facultatif)
   Sans tableau ni chiffres : .vi-led.is-seul (texte seul, une colonne). */
.vi-led { --vi-accent: var(--vi-rouge-l); --vi-fg: #fff; --vi-body: rgba(255, 255, 255, .85); --vi-muted: rgba(255, 255, 255, .72); --vi-tint: rgba(248, 113, 113, .16); --vi-tint-fg: var(--vi-rouge-l);
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 18px 40px; margin: 0 0 24px; padding: 24px 28px; border-radius: var(--vi-r-card); background: radial-gradient(420px 200px at 100% 0, rgba(212, 47, 47, .28), transparent 70%), var(--vi-anth); color: #fff; }
.vi-led.is-seul { grid-template-columns: minmax(0, 1fr); }
.vi .vi-led h3 { font-size: 1.15rem; line-height: 1.3; color: #fff; }
.vi-led h3 em { font-style: normal; color: #FCA5A5; }
.vi-led p { margin-top: 6px; color: rgba(255, 255, 255, .8); font-size: .95rem; max-width: 560px; }
.vi-led-n { display: flex; flex-wrap: wrap; row-gap: 12px; }
.vi-led-n li { display: flex; flex-direction: column; padding: 0 28px; border-left: 1px solid rgba(255, 255, 255, .16); min-width: 0; }
.vi-led-n li:first-child { border-left: 0; padding-left: 0; }
.vi-led-n strong { font-size: 2rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; white-space: nowrap; color: #fff; }
.vi-led-n span { font-size: .9rem; color: rgba(255, 255, 255, .78); }
/* Comparatif (critère | LED | néon) : rôles ARIA écrits dans la page (lisible même sur téléphone, en grille) */
.vi-led-t { width: 100%; border-collapse: collapse; font-size: .9rem; line-height: 1.4; }
.vi-led-t th, .vi-led-t td { padding: 9px 10px; text-align: left; vertical-align: top; border-top: 1px solid rgba(255, 255, 255, .12); }
.vi-led-t thead th { border-top: 0; padding-top: 0; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.vi-led-t thead th.is-led { color: #FCA5A5; }
.vi-led-t tbody th { font-weight: 600; color: rgba(255, 255, 255, .8); white-space: nowrap; }
.vi-led-t tbody th i { width: 1.1em; margin-right: 6px; color: var(--vi-rouge-l); text-align: center; }
.vi-led-t td.is-led { color: #fff; font-weight: 700; }
.vi-led-t td.is-neon { color: rgba(255, 255, 255, .72); }
@media (max-width: 960px) { .vi-led { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
    .vi-led { padding: 20px 18px; margin-bottom: 18px; }
    .vi .vi-led h3 { font-size: 16px; }
    .vi-led p, .vi-led-n span { font-size: 15px; }
    .vi-led-n { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .vi-led-n li { padding: 0 0 0 14px; }
    .vi-led-n li:first-child { padding-left: 0; }
    .vi-led-n strong { font-size: 1.6rem; }
}
@media (max-width: 600px) {
    /* Une ligne par critère : le critère au-dessus, LED et néon côte à côte */
    .vi-led-t, .vi-led-t thead, .vi-led-t tbody { display: block; }
    .vi-led-t tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
    .vi-led-t thead tr { border-top: 0; padding-top: 0; }
    .vi-led-t thead th:first-child { display: none; }
    .vi-led-t th, .vi-led-t td { display: block; padding: 2px 0; border-top: 0; font-size: 15px; }
    .vi-led-t thead th { font-size: 15px; letter-spacing: .06em; }
    .vi-led-t tbody th { grid-column: 1 / -1; white-space: normal; color: rgba(255, 255, 255, .72); font-weight: 600; }
}

/* ══════════ 5. Données techniques (réglages « tech » de la page) ══════════
   <div class="vi-tech"><h3 class="vi-tech-h">…</h3><ul class="vi-tech-grid">
     <li class="vi-tech-it"><span class="vi-pic" aria-hidden="true"><i class="fas fa-bolt"></i></span>
       <div><strong class="vi-tech-v">12/24V</strong><span class="vi-tech-n">Tension</span><p>…</p></div></li>…</ul></div> */
.vi-tech { margin-top: 28px; }
.vi .vi-tech-h { font-size: 1.06rem; line-height: 1.3; color: var(--vi-ink); margin-bottom: 14px; }
.vi-tech-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--vi-gap); }
.vi-tech-grid.is-3 { --cols: 3; }
.vi-tech-grid.is-2 { --cols: 2; }
.vi-tech-it { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: var(--vi-r-card); border: 1px solid var(--vi-line); background: #fff; min-width: 0; }
.vi-tech-it .vi-pic { width: 40px; height: 40px; font-size: 18px; }
.vi-tech-it > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vi-tech-v { font-size: 1.45rem; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: var(--vi-ink); overflow-wrap: anywhere; }
.vi-tech-n { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--vi-gris); line-height: 1.4; }
.vi-tech-it p { margin-top: 4px; font-size: .88rem; color: var(--vi-sub); line-height: 1.5; }
@media (max-width: 960px) { .vi-tech-grid, .vi-tech-grid.is-3 { --cols: 2; } }
@media (max-width: 768px) { .vi .vi-tech-h { font-size: 16px; } .vi-tech-n, .vi-tech-it p { font-size: 15px; } }
@media (max-width: 600px) {
    .vi-tech-grid, .vi-tech-grid.is-2, .vi-tech-grid.is-3 { --cols: 1; }
    .vi-tech-it { flex-direction: row; align-items: flex-start; gap: 14px; padding: 16px; }
    .vi-tech-v { font-size: 1.25rem; }
}

/* ══════════ 6. Réalisations du métier : mosaïque (1 grande photo + 4) ══════════
   <div class="vi-rl-grid is-n5"> (n = nombre de cartes, 1 à 5 : la grille se complète sans trou)
     <a class="vi-rl-card is-big" href="realisations.php?cat=…" style="--op:50% 50%">
       <span class="vi-rl-media"><img …></span>
       <span class="vi-rl-cap"><span class="vi-rl-title">…</span><span class="vi-rl-meta">…</span><span class="vi-rl-go">…</span></span></a> …</div>
   <p class="vi-rl-hint">Faites glisser…</p> (téléphone) + barre <div class="vi-rl-bar">…</div>
   À poser dans une section sombre (.vi-sec-dark). Téléphone : cartes qui glissent. */
.vi-rl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 216px; gap: 16px; }
.vi-rl-card { position: relative; display: block; border-radius: var(--vi-r-ph); overflow: hidden; background: var(--vi-anth); color: #fff; text-decoration: none; isolation: isolate; min-width: 0; }
.vi a.vi-rl-card, .vi a.vi-rl-card:hover { color: #fff; }
.vi-rl-card.is-big { grid-column: span 2; grid-row: span 2; }
.vi-rl-media { position: absolute; inset: 0; display: block; }
.vi-rl-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 45%); transition: transform .7s var(--vi-ease); }
.vi-rl-card:hover .vi-rl-media img { transform: scale(1.045); }
.vi-rl-cap { position: absolute; left: 0; right: 0; bottom: 0; display: block; padding: 44px 16px 14px; background: linear-gradient(0deg, rgba(8, 12, 20, .94) 0%, rgba(8, 12, 20, .72) 45%, rgba(8, 12, 20, 0) 100%); }
.vi-rl-title { display: block; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.vi-rl-card.is-big .vi-rl-title { font-size: 1.4rem; }
.vi-rl-meta { display: block; margin-top: 4px; font-size: .82rem; color: rgba(255, 255, 255, .82); line-height: 1.4; }
.vi-rl-go { display: none; align-items: center; gap: 6px; margin-top: 10px; font-size: .85rem; font-weight: 600; }
.vi-rl-card.is-big .vi-rl-go { display: inline-flex; }
.vi-rl-card.is-big .vi-rl-cap { padding: 72px 24px 22px; }
.vi-rl-card:focus-visible { outline-offset: 3px; }
/* Moins de 5 cartes : la grille reste pleine */
@media (min-width: 1101px) {
    .vi-rl-grid.is-n1 .vi-rl-card { grid-column: 1 / -1; }
    .vi-rl-grid.is-n2 .vi-rl-card:not(.is-big) { grid-column: span 2; grid-row: span 2; }
    .vi-rl-grid.is-n3 .vi-rl-card:not(.is-big) { grid-column: span 2; }
    .vi-rl-grid.is-n4 .vi-rl-card:last-child { grid-column: span 2; }
}
@media (max-width: 1100px) and (min-width: 769px) {
    .vi-rl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 220px; }
    .vi-rl-card.is-big { grid-column: 1 / -1; grid-row: span 2; }
    .vi-rl-grid.is-n2 .vi-rl-card:not(.is-big), .vi-rl-grid.is-n4 .vi-rl-card:last-child { grid-column: 1 / -1; }
}
.vi-rl-hint { display: none; }
/* Barre « N réalisations » + boutons */
.vi-rl-bar { --vi-accent: var(--vi-rouge-l); display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; margin-top: 16px; padding: 20px 26px; border-radius: var(--vi-r-ph); border: 1px solid rgba(255, 255, 255, .1); background: radial-gradient(420px 220px at 90% 0%, rgba(212, 47, 47, .24), transparent 70%), var(--vi-nuit4); color: #fff; }
.vi-rl-bar-t { display: flex; align-items: center; gap: 18px; min-width: 0; }
.vi-rl-n { font-size: 2.6rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: #fff; }
.vi-rl-bar p { color: rgba(255, 255, 255, .78); font-size: .95rem; max-width: 380px; }
.vi-rl-bar .vi-btn { min-height: 46px; padding: .65rem 1.1rem; font-size: .92rem; }
@media (max-width: 768px) {
    .vi-rl-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 calc(-1 * var(--vi-gut)); padding: 0 var(--vi-gut) 6px; scroll-padding: 0 var(--vi-gut); scrollbar-width: none; }
    .vi-rl-grid::-webkit-scrollbar { display: none; }
    .vi-rl-card { flex: 0 0 82%; scroll-snap-align: start; }
    .vi-rl-grid.is-n1 .vi-rl-card { flex-basis: 100%; }
    .vi-rl-media { position: relative; inset: auto; aspect-ratio: 4 / 3; }
    .vi-rl-cap, .vi-rl-card.is-big .vi-rl-cap { position: static; background: var(--vi-anth); padding: 14px 16px 16px; }
    .vi-rl-title, .vi-rl-card.is-big .vi-rl-title { font-size: 16px; }
    .vi-rl-meta { font-size: 15px; }
    .vi-rl-card.is-big .vi-rl-go { display: none; }
    .vi-rl-hint { display: block; margin-top: 12px; font-size: 15px; color: rgba(255, 255, 255, .72); }
    .vi-rl-bar { flex-direction: column; align-items: flex-start; padding: 20px; }
    .vi-rl-bar p { font-size: 15px; }
    .vi-rl-bar .vi-btns { width: 100%; }
    .vi-rl-bar .vi-btn { flex: 1 1 100%; font-size: 15px; }
    .vi.vi-reveal-on .vi-rl-grid[data-vi-reveal]:not(.is-in) { opacity: 1; transform: none; }   /* cartes visibles pendant le glissement */
}

/* ══════════ 7. Garanties en bandeau court (titre à gauche, 4 engagements) ══════════
   <section class="vi-sec vi-sec-white vi-gr-band"><div class="vi-wrap"><div><p class="vi-eb">…</p><h2 class="vi-h2">…</h2></div>
     <ul class="vi-gr-grid"><li class="vi-gr"><span class="vi-pic">…</span><div><h3>…</h3><p>…</p></div></li>…</ul></div></section> */
.vi-sec.vi-gr-band { padding: 64px 0; }
.vi-gr-band > .vi-wrap { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 24px 48px; align-items: center; }
.vi .vi-gr-band .vi-h2 { font-size: clamp(1.45rem, 2.2vw, 1.8rem); }
.vi-gr-band .vi-gr-grid { gap: 14px; }
.vi-gr-band .vi-gr { padding: 20px 18px; }
.vi-gr-band .vi-gr .vi-pic { width: 40px; height: 40px; font-size: 19px; margin-bottom: 12px; }
.vi .vi-gr-band .vi-gr h3 { font-size: 1rem; margin-bottom: 4px; }
.vi-gr-band .vi-gr p { font-size: .88rem; }
@media (max-width: 1100px) { .vi-gr-band > .vi-wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
    .vi-sec.vi-gr-band { padding: 48px 0; }
    .vi-gr-band .vi-gr p { font-size: 15px; }
    .vi .vi-gr-band .vi-gr h3 { font-size: 16px; }
}
@media (max-width: 600px) { .vi-gr-band .vi-gr .vi-pic { margin: 0; } }

/* Étapes (css/interieur.css : 4 colonnes, .is-3) : 2 ou 5 étapes sans case vide sur ordinateur
   (nfx_vm_afficher_etapes : 3 ou 6 → .is-3, 5 → .is-5, 1 ou 2 → .is-2) */
@media (min-width: 961px) {
    .vi-st-list.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vi-st-list.is-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .vi-st-list.is-5 .vi-st { padding: 24px 18px 22px; }
}
@media (min-width: 961px) and (max-width: 1100px) { .vi-st-list.is-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ══════════ 8. Questions fréquentes : accordéon <details>/<summary> (sans JavaScript) ══════════
   <div class="vi-faq"><div class="vi-faq-head">surtitre, h2, sous-titre</div>
     <div class="vi-faq-box"><h3>Une autre question ?</h3><p>…</p><div class="vi-btns">…</div></div>
     <div class="vi-qa"><details open><summary>Question</summary><p class="vi-qa-a">Réponse</p></details>…</div></div>
   Données FAQPage (JSON-LD) : mêmes textes, écrites par la page. */
.vi-faq { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-rows: auto 1fr; grid-template-areas: "head qa" "box qa"; gap: 28px 64px; align-items: start; }
.vi-faq-head { grid-area: head; }
.vi-faq-box { grid-area: box; border-radius: var(--vi-r-card); background: var(--vi-fond); border: 1px solid var(--vi-line); padding: 22px 24px; }
.vi .vi-faq-box h3 { font-size: 1.05rem; line-height: 1.3; margin-bottom: 6px; color: var(--vi-ink); }
.vi-faq-box p { font-size: .92rem; color: var(--vi-sub); margin-bottom: 16px; }
.vi-faq-box .vi-btn { min-height: 46px; padding: .6rem 1.05rem; font-size: .92rem; }
.vi-qa { grid-area: qa; border-top: 1px solid var(--vi-line); }
.vi-qa details { border-bottom: 1px solid var(--vi-line); }
.vi-qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 0; cursor: pointer; font-weight: 600; font-size: 1.05rem; color: var(--vi-ink); line-height: 1.4; border-radius: 6px; }
.vi-qa summary::-webkit-details-marker { display: none; }
.vi-qa summary::marker { content: ""; }
.vi-qa summary::after { content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #F1F5F9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D42F2F' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .25s, background-color .25s; }
.vi-qa details[open] > summary::after { transform: rotate(45deg); background-color: var(--vi-rouge-p); }
.vi-qa summary:hover { color: var(--vi-rouge-h); }
.vi-qa-a { padding: 0 48px 20px 0; font-size: .98rem; color: var(--vi-sub); line-height: 1.65; }
@media (max-width: 960px) {
    .vi-faq { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "head" "qa" "box"; gap: 24px; }
}
@media (max-width: 600px) {
    .vi-qa summary { font-size: 16px; }
    .vi-qa-a { font-size: 15px; padding-right: 0; }
    .vi-faq-box { padding: 18px; }
    .vi-faq-box p { font-size: 15px; }
    .vi-faq-box .vi-btn { flex: 1 1 100%; font-size: 15px; }
}

/* ══════════ 9. Cartes métiers avec photo : « Nos autres métiers » (et page Services) ══════════
   <a class="vi-mt" href="…" style="--op:50% 50%"><span class="vi-mt-img"><img …></span>
     <span class="vi-mt-body"><span class="vi-mt-n">01</span><h3>…</h3><p>…</p><span class="vi-mt-link">Découvrir →</span></span></a>
   <div class="vi-am-grid"> : 3 colonnes de cartes compactes (photo à gauche). */
.vi-mt { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--vi-line); border-radius: var(--vi-r-card); overflow: hidden; text-decoration: none; min-width: 0; transition: transform .3s var(--vi-ease), box-shadow .3s, border-color .3s; }
.vi a.vi-mt, .vi a.vi-mt:hover { color: var(--vi-ink); }
a.vi-mt:hover { transform: translateY(-4px); box-shadow: var(--vi-sh-card); border-color: var(--vi-line2); }
.vi-mt-img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--vi-nuit2); }
.vi-mt-img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 50%); transition: transform .7s var(--vi-ease); }
a.vi-mt:hover .vi-mt-img img { transform: scale(1.05); }
.vi-mt-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 20px 20px; flex: 1; min-width: 0; }
.vi .vi-mt-body h3 { font-size: 1.06rem; line-height: 1.3; color: var(--vi-ink); }
.vi-mt-body p { font-size: .9rem; color: var(--vi-sub); line-height: 1.55; flex: 1; }
.vi-mt-link { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 600; color: var(--vi-rouge); margin-top: 4px; }
.vi-mt-link .vi-ic { transition: transform .2s; }
a.vi-mt:hover .vi-mt-link .vi-ic { transform: translateX(3px); }
.vi-mt-n { font-size: .75rem; font-weight: 700; letter-spacing: .12em; color: var(--vi-gris); }
.vi-am-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vi-am-grid .vi-mt { flex-direction: row; }
.vi-am-grid .vi-mt-img { flex: 0 0 132px; aspect-ratio: auto; min-height: 100%; }
.vi-am-grid .vi-mt-img img { position: absolute; inset: 0; }
.vi-am-grid .vi-mt-body { padding: 16px 18px; gap: 4px; }
.vi-am-grid .vi-mt-body p { font-size: .88rem; }
@media (max-width: 960px) { .vi-am-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .vi-mt-body p, .vi-mt-link, .vi-mt-n { font-size: 15px; } }
@media (max-width: 600px) {
    .vi-mt { flex-direction: row; }
    .vi-mt-img { flex: 0 0 112px; aspect-ratio: auto; min-height: 100px; }
    .vi-mt-img img { position: absolute; inset: 0; }
    .vi-mt-body { padding: 14px 16px; gap: 4px; }
    .vi .vi-mt-body h3 { font-size: 16px; }
    .vi-mt-body p, .vi-mt-link { line-height: 1.45; }
    .vi-am-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .vi-am-grid .vi-mt-img { flex-basis: 112px; }
    .vi-am-grid .vi-mt-body { padding: 14px 16px; }
    .vi-am-grid .vi-mt-body p { font-size: 15px; }
    a.vi-mt:hover { transform: none; }
}

/* ══════════ 10. Page Services : grandes cartes des 7 métiers + bande de chiffres ══════════
   <div class="vi-sv-grid"><article class="vi-sv" style="--op:…"><div class="vi-sv-img"><img …><span class="vi-sv-cnt">63 réalisations en photos</span></div>
     <div class="vi-sv-body"><span class="vi-mt-n">01</span><h3><a href="…">Nom</a></h3><p>…</p><ul class="vi-checks is-sm">…</ul>
       <p class="vi-sv-for"><b>Pour :</b> …</p><div class="vi-sv-foot"><span class="vi-sv-go">Découvrir →</span>
       <a class="vi-sv-dv" href="#devis" data-devis-type="…">Devis gratuit</a></div></div></article>
     <div class="vi-card-cta vi-sv-cta">…</div></div>
   Le lien du h3 couvre toute la carte (::after) ; le bouton « Devis gratuit » reste cliquable au-dessus. */
.vi-sv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vi-gap); }
.vi-sv { position: relative; display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); background: #fff; border: 1px solid var(--vi-line); border-radius: var(--vi-r-card); overflow: hidden; min-width: 0; transition: transform .3s var(--vi-ease), box-shadow .3s, border-color .3s; }
.vi-sv:hover { transform: translateY(-4px); box-shadow: var(--vi-sh-card); border-color: var(--vi-line2); }
.vi-sv-img { position: relative; overflow: hidden; background: var(--vi-nuit2); min-height: 100%; }
.vi-sv-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 50%); transition: transform .7s var(--vi-ease); }
.vi-sv:hover .vi-sv-img img { transform: scale(1.05); }
.vi-sv-cnt { position: absolute; left: 12px; bottom: 12px; z-index: 1; background: rgba(8, 12, 20, .82); color: #fff; font-size: .78rem; font-weight: 600; line-height: 1.3; padding: 5px 11px; border-radius: var(--vi-r-pill); }
.vi-sv-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 24px; min-width: 0; }
.vi .vi-sv-body h3 { font-size: 1.2rem; line-height: 1.25; }
.vi-sv-body h3 a { text-decoration: none; color: var(--vi-ink); }
.vi-sv-body h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.vi-sv-body h3 a:focus-visible { outline: none; }
.vi-sv:focus-within { outline: 3px solid var(--vi-focus); outline-offset: 2px; }
.vi-sv:has(.vi-sv-dv:focus-visible) { outline: none; }
.vi-sv-body > p { font-size: .95rem; color: var(--vi-sub); line-height: 1.55; }
.vi-sv-for { font-size: .84rem; color: var(--vi-gris); }
.vi-sv-for b { color: var(--vi-txt); font-weight: 600; }
.vi-sv-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; width: 100%; padding-top: 6px; }
.vi-sv-go { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 600; color: var(--vi-rouge); }
.vi-sv-go .vi-ic { transition: transform .2s; }
.vi-sv:hover .vi-sv-go .vi-ic { transform: translateX(3px); }
.vi-sv-dv { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--vi-line2); border-radius: var(--vi-r-btn); font-size: .85rem; font-weight: 600; color: var(--vi-ink); text-decoration: none; background: #fff; transition: border-color .2s; }
.vi-sv-dv:hover { border-color: var(--vi-ink); color: var(--vi-ink); }
.vi-sv-cta { justify-content: center; padding: 32px 30px; }
.vi-sv-cta .vi-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
@media (max-width: 1100px) { .vi-sv-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) { .vi-sv-cnt, .vi-sv-for, .vi-sv-go, .vi-sv-dv { font-size: 15px; } }
@media (max-width: 600px) {
    .vi-sv { grid-template-columns: minmax(0, 1fr); }
    .vi-sv-img { aspect-ratio: 16 / 10; min-height: 0; }
    .vi-sv-body { padding: 18px 18px 20px; }
    .vi-sv .vi-mt-n { display: none; }
    .vi .vi-sv-body h3 { font-size: 1.1rem; }
    .vi-sv-body > p { font-size: 15px; }
    .vi-sv-cta { padding: 24px 18px; }
    .vi-sv-cta .vi-btns { grid-template-columns: minmax(0, 1fr); }
    .vi-sv:hover { transform: none; }
}
/* Bande de chiffres confirmés : <ul class="vi-kpi"><li><strong>58 ans</strong><span>de métier, depuis 1968</span></li>…</ul> (5 cases) */
.vi-kpi { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); border: 1px solid var(--vi-line); border-radius: var(--vi-r-card); background: #fff; margin-bottom: 40px; overflow: hidden; }
.vi-kpi.is-4 { --cols: 4; }
.vi-kpi li { padding: 22px 24px; border-left: 1px solid var(--vi-line); min-width: 0; }
.vi-kpi li:first-child { border-left: 0; }
.vi-kpi strong { display: block; font-size: 2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--vi-ink); }
.vi-kpi span { display: block; margin-top: 6px; font-size: .88rem; color: var(--vi-sub); line-height: 1.4; }
@media (max-width: 960px) {
    .vi-kpi { --cols: 3; }
    .vi-kpi li:nth-child(4) { border-left: 0; }
    .vi-kpi li:nth-child(n+4) { border-top: 1px solid var(--vi-line); }
    .vi-kpi li:last-child:nth-child(5) { grid-column: span 2; }
    .vi-kpi.is-4 { --cols: 2; }
    .vi-kpi.is-4 li { border-left: 0; }
    .vi-kpi.is-4 li:nth-child(even) { border-left: 1px solid var(--vi-line); }
    .vi-kpi.is-4 li:nth-child(n+3) { border-top: 1px solid var(--vi-line); }
}
@media (max-width: 600px) {
    .vi-kpi, .vi-kpi.is-4 { --cols: 2; }
    .vi-kpi li, .vi-kpi li:nth-child(4) { padding: 16px; border-left: 0; border-top: 1px solid var(--vi-line); }
    .vi-kpi li:nth-child(-n+2) { border-top: 0; }
    .vi-kpi li:nth-child(even) { border-left: 1px solid var(--vi-line); }
    .vi-kpi li:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .vi-kpi strong { font-size: 1.6rem; }
    .vi-kpi span { font-size: 15px; }
}

/* ══════════ 11. « Quel produit pour quel besoin ? » : onglets par activité (section sombre) ══════════
   <div class="vi-chips vi-ch-tabs" role="tablist" aria-label="Votre activité" data-vi-tabs>
     <button type="button" class="vi-chip" role="tab" id="tab-x" aria-controls="pan-x" aria-selected="true">…</button>…</div>
   <div class="vi-ch-panel" role="tabpanel" id="pan-x" aria-labelledby="tab-x" tabindex="0">
     <div><p class="vi-ch-k">Pour une <b>banque</b>, nous conseillons :</p><ol class="vi-rec"><li><a href="…">
       <span class="vi-rec-img"><img …></span><span class="vi-rec-t"><span class="vi-rec-n">Conseil 1</span><h3>…</h3><p>…</p></span>
       <svg class="vi-ic">…</svg></a></li>…</ol></div>
     <div class="vi-ch-side"><h3>…</h3><ul class="vi-logos is-tiles">…</ul><p>…</p><div class="vi-ch-btns">…</div></div></div>
   Sans JavaScript : tous les panneaux restent affichés les uns sous les autres (js/metier.js les met en onglets). */
.vi-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.vi-chip { min-height: 44px; padding: 0 18px; border-radius: var(--vi-r-pill); border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: rgba(255, 255, 255, .88); font: inherit; font-size: .875rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.vi-chip:hover { border-color: rgba(255, 255, 255, .6); color: #fff; }
.vi-chip[aria-selected="true"], .vi-chip[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--vi-ink); }
.vi-ch-tabs { margin-bottom: 28px; }
.vi-ch-panel { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.vi-ch-panel + .vi-ch-panel { margin-top: 40px; }
.vi-ch-panel:focus { outline: none; }
.vi-ch-panel:focus-visible { outline: 3px solid var(--vi-focus); outline-offset: 6px; border-radius: 6px; }
.vi-ch-k { font-size: .95rem; color: rgba(255, 255, 255, .78); margin-bottom: 14px; }
.vi-ch-k b { color: #fff; }
.vi-rec { display: grid; gap: 12px; }
.vi-rec a { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 12px 16px 12px 12px; border-radius: var(--vi-r-ph); border: 1px solid rgba(255, 255, 255, .09); background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); color: #fff; text-decoration: none; transition: border-color .2s, background .2s; }
.vi-rec a:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .07); color: #fff; }
.vi-rec-img { width: 120px; aspect-ratio: 4 / 3; border-radius: var(--vi-r-btn); overflow: hidden; background: var(--vi-anth); }
.vi-rec-img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 50%); }
.vi-rec-t { display: block; min-width: 0; }
.vi-rec-n { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--vi-rouge-l); }
.vi .vi-rec h3 { font-size: 1.05rem; margin: 2px 0 4px; line-height: 1.3; color: #fff; }
.vi-rec p { font-size: .9rem; color: rgba(255, 255, 255, .76); line-height: 1.5; }
.vi-rec a > .vi-ic { color: rgba(255, 255, 255, .6); font-size: 18px; }
.vi-ch-side { --vi-accent: var(--vi-rouge-l); border-radius: var(--vi-r-card); padding: 24px; background: radial-gradient(420px 220px at 90% 0%, rgba(212, 47, 47, .24), transparent 70%), var(--vi-nuit4); border: 1px solid rgba(255, 255, 255, .1); color: #fff; }
.vi .vi-ch-side h3 { font-size: 1rem; line-height: 1.35; color: #fff; margin-bottom: 14px; }
.vi-ch-side .vi-logos { margin-bottom: 22px; justify-content: flex-start; }
.vi-ch-side p { font-size: .92rem; color: rgba(255, 255, 255, .78); margin-bottom: 16px; }
.vi-ch-btns { display: grid; gap: 10px; }
.vi-ch-btns .vi-btn { width: 100%; min-height: 48px; padding: .7rem 1rem; font-size: .95rem; }
@media (max-width: 960px) { .vi-ch-panel { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 768px) {
    .vi-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--vi-gut)); padding: 0 var(--vi-gut) 4px; scrollbar-width: none; }
    .vi-chips::-webkit-scrollbar { display: none; }
    .vi-chip { font-size: 15px; flex: none; }
    .vi-rec p, .vi-rec-n, .vi-ch-k, .vi-ch-side p, .vi .vi-ch-side h3 { font-size: 15px; }
    .vi-ch-btns .vi-btn { font-size: 15px; }
}
@media (max-width: 600px) {
    .vi-rec a { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 10px; }
    .vi-rec-img { width: 88px; }
    .vi-rec a > .vi-ic { display: none; }
    .vi .vi-rec h3 { font-size: 16px; }
    .vi-ch-side { padding: 20px 18px; }
}

/* ══════════ 12. Bandeau devis : compléments (includes/devis-court.php) ══════════
   Bandeau et formulaire : .vi-dv, .vi-dv-grid, .vi-fm… de css/interieur.css. */
.vi-dv .vi-h2 em { font-style: normal; color: #CBD5E1; }
.vi-dv-txt .vi-checks { margin: 24px 0 28px; }
.vi-dv-txt .vi-checks li { color: rgba(255, 255, 255, .88); }
.vi-dv-hours { margin-top: 14px; font-size: .9rem; color: rgba(255, 255, 255, .7); }
.vi-dv-more { margin-top: 18px; font-size: .92rem; color: rgba(255, 255, 255, .75); line-height: 1.5; }
.vi-dv-more a { color: #fff; font-weight: 600; text-underline-offset: 3px; }
.vi-dv-more a:hover { color: #FCA5A5; }
.vi-fm .vi-fm-msg a { color: inherit; font-weight: 600; }
@media (max-width: 768px) {
    .vi-dv-hours, .vi-dv-more { font-size: 15px; }
    .vi-dv-more a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 600px) { .vi-dv-txt .vi-btns > .vi-btn { flex: 1 1 100%; } }

/* ══════════ 13. Téléphone (≤ 768 px) : aucun texte sous 15 px ══════════ */
@media (max-width: 768px) {
    .vi-sol-k, .vi-sol-badge, .vi-sol-for, .vi-help-t .vi-help-art, .vi-help-t p,
    .vi-led-t th, .vi-led-t td, .vi-led-t thead th,
    .vi-faq-box p, .vi-faq-box .vi-btn, .vi-kpi span,
    .vi-am-grid .vi-mt-body p, .vi-tech-it p, .vi-tech-n, .vi-rl-meta, .vi-ch-k { font-size: 15px; }
    .vi-sol-k { letter-spacing: .05em; }
    .vi-led-t thead th { letter-spacing: .06em; }
}

/* ══════════ 14. Mouvements réduits, impression ══════════ */
@media (prefers-reduced-motion: reduce) {
    .vi-sol:hover, a.vi-mt:hover, .vi-sv:hover { transform: none; }
    .vi-sol:hover .vi-sol-img img, .vi-rl-card:hover .vi-rl-media img, a.vi-mt:hover .vi-mt-img img, .vi-sv:hover .vi-sv-img img { transform: none; }
}
@media print {
    .vi-sn, .vi-rl-hint { display: none !important; }
    .vi-led, .vi-rl-bar, .vi-ch-side, .vi-rec a { background: #fff !important; color: #000 !important; }
    .vi-led h3, .vi-led p, .vi-led-t th, .vi-led-t td, .vi-rl-bar p, .vi-rl-n { color: #000 !important; }
    .vi-qa details:not([open]) > .vi-qa-a { display: block; }
}