/* ==========================================================================
   NEOFLUX — Pages intérieures « Vitrine de nuit » (lot socle)
   Système de style commun aux pages intérieures refaites (Contact, Recrutement…),
   repris de css/accueil.css et des maquettes validées (maquettes-pages-interieures/).

   Chargement : par les seules pages refaites, APRÈS css/style.css :
     <link rel="stylesheet" href="../css/interieur.css?v=<?= (int) @filemtime(__DIR__ . '/../css/interieur.css') ?>">
   Portée : tout se range dans <main id="contenu" class="vi has-hero"> (ou un autre bloc .vi).
     - toutes les classes commencent par « vi- » ; les règles sur des balises (h2, a, img,
       input…) ne s'appliquent qu'à l'intérieur d'un bloc .vi ;
     - aucune règle sur html, body, l'en-tête, le pied de page ni la barre mobile
       (includes/header.php, footer.php, mobile-actions.php : inchangés) ;
     - css/style.css et css/accueil.css ne sont pas modifiés.
   Icônes : SVG (<svg class="vi-ic"><use href="#vn-i-check"/></svg>, sprite includes/accueil-icones.php)
     ou Font Awesome (<i class="fas fa-check">) : les deux prennent la taille du texte.
   Animations : [data-vi-reveal] ne masque rien tant que le JavaScript de la page n'a pas
     posé .vi-reveal-on sur le bloc .vi (extrait de code : _travail/SOCLE-INTERIEUR.md).
   Guide des classes et exemples : _travail/SOCLE-INTERIEUR.md
   ========================================================================== */

/* ══════════ 1. Jetons : couleurs, rayons, ombres, mesures ══════════ */
.vi {
    /* Couleurs de la marque (identiques à l'accueil) */
    --vi-rouge: #D42F2F;      /* boutons et liens d'action — blanc dessus 4,9:1 */
    --vi-rouge-h: #B32424;    /* survol — blanc dessus 6,6:1 */
    --vi-rouge-l: #F87171;    /* rouge sur fond sombre — 6,4 à 7,1:1 */
    --vi-rouge-p: #FEF2F2;    /* fond rose pâle (pastilles, choix actif) */
    --vi-bleu: #003399;       /* bleu du logo : dégradés de fond seulement */
    --vi-anth: #1E293B; --vi-ink: #0F172A; --vi-txt: #334155; --vi-sub: #475569; --vi-gris: #64748B;
    --vi-fond: #F8FAFC; --vi-line: #E2E8F0; --vi-line2: #CBD5E1;
    --vi-champ: #8492A6;      /* contour des champs, cases, choix : 3,2:1 sur blanc (contraste AA des commandes) */
    --vi-nuit: #080C14; --vi-nuit2: #0F172A; --vi-nuit3: #111827; --vi-nuit4: #16213A;
    --vi-wa: #25D366; --vi-wa-h: #1FBE5B; --vi-wa-ink: #06301A;   /* texte vert foncé sur vert : 7,3:1 */
    --vi-err: #B91C1C; --vi-err-p: #FEF2F2; --vi-ok: #065F46; --vi-ok-p: #ECFDF5;
    --vi-focus: #3B82F6;      /* contour de focus clavier : 3,7:1 sur blanc, 5,3:1 sur la nuit */
    /* Rayons */
    --vi-r-btn: 10px; --vi-r-card: 16px; --vi-r-ph: 14px; --vi-r-fm: 18px; --vi-r-ic: 12px; --vi-r-pill: 999px;
    /* Ombres */
    --vi-sh-card: 0 22px 44px -22px rgba(15, 23, 42, .35);   /* carte au survol */
    --vi-sh-btn: 0 10px 24px -8px rgba(212, 47, 47, .55);    /* bouton rouge au survol */
    --vi-sh-fm: 0 40px 80px -30px rgba(0, 0, 0, .6);         /* formulaire posé sur la nuit */
    --vi-sh-flat: 0 1px 2px rgba(15, 23, 42, .05), 0 18px 40px -24px rgba(15, 23, 42, .3);  /* formulaire sur fond clair */
    --vi-sh-pop: 0 20px 40px -20px rgba(15, 23, 42, .45);    /* encart posé sur une photo */
    /* Mise en page */
    --vi-max: 1200px;         /* conteneur (comme .container de style.css) */
    --vi-gut: 24px;           /* gouttière : 16 px sur téléphone */
    --vi-sec: 96px;           /* marge haute / basse des sections : 64 px sur téléphone */
    --vi-gap: 20px;           /* écart des grilles : 12 px sur téléphone */
    --vi-hd: 80px;            /* en-tête fixe du site posé sur le héros : 60 px sur téléphone */
    --vi-hd-s: 66px;          /* en-tête réduit après défilement (ancres #…) : 56 px sur téléphone */
    --vi-ease: cubic-bezier(.2, .7, .2, 1);
    /* Couleurs « de contexte » : fond clair ici, redéfinies sur les fonds sombres (bloc suivant) */
    --vi-accent: var(--vi-rouge);   /* surtitres, liens d'action, icônes, coches */
    --vi-fg: var(--vi-ink);         /* titres */
    --vi-body: var(--vi-txt);       /* texte courant */
    --vi-muted: var(--vi-sub);      /* sous-titres, textes secondaires */
    --vi-tint: var(--vi-rouge-p);   /* fond des pastilles d'icône, coches, badges */
    --vi-tint-fg: var(--vi-rouge);  /* icône dans ces pastilles */
    --vi-badge-fg: var(--vi-rouge-h);
}
@media (max-width: 768px) {
    .vi { --vi-gut: 16px; --vi-sec: 64px; --vi-hd: 60px; --vi-hd-s: 56px; }
}
@media (max-width: 600px) {
    .vi { --vi-gap: 12px; }
}

/* Fonds sombres : texte blanc, rouge éclairci (ou tout bloc marqué .vi-dark) */
.vi-hero, .vi-sec-dark, .vi-sec-steps, .vi-dv, .vi-dark, .vi-card.is-dark, .vi-card-cta, .vi-encart.is-dark {
    --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);
    --vi-badge-fg: #FCA5A5;
    color: #fff;
}
/* Blocs blancs posés sur un fond sombre (formulaire, cartes, encadrés) : retour aux couleurs claires */
.vi-fm, .vi-card:not(.is-dark), .vi-encart:not(.is-dark), .vi-gr, .vi-light {
    --vi-accent: var(--vi-rouge);
    --vi-fg: var(--vi-ink);
    --vi-body: var(--vi-txt);
    --vi-muted: var(--vi-sub);
    --vi-tint: var(--vi-rouge-p);
    --vi-tint-fg: var(--vi-rouge);
    --vi-badge-fg: var(--vi-rouge-h);
    color: var(--vi-ink);
}

/* ══════════ 2. Bases (uniquement dans un bloc .vi) ══════════ */
.vi, .vi *, .vi *::before, .vi *::after { box-sizing: border-box; }
.vi { display: block; background: #fff; color: var(--vi-ink); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
.vi:focus { outline: none; }                         /* <main tabindex="-1"> atteint par « Aller au contenu » */
.vi [hidden] { display: none !important; }
/* Règles de base sans priorité (:where) : les classes vi-… gardent toujours la main */
:where(.vi) img { max-width: 100%; display: block; }
:where(.vi) a { color: inherit; }
:where(.vi) button { font: inherit; color: inherit; }
:where(.vi) h1, :where(.vi) h2, :where(.vi) h3, :where(.vi) h4 { margin: 0; font-weight: 700; line-height: 1.15; color: var(--vi-fg); }
:where(.vi) p, :where(.vi) blockquote, :where(.vi) figure, :where(.vi) dl, :where(.vi) dd { margin: 0; }
:where(.vi) ul, :where(.vi) ol { margin: 0; padding: 0; list-style: none; }
:where(.vi) fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
:where(.vi) legend { padding: 0; }
:where(.vi) [id] { scroll-margin-top: calc(var(--vi-hd-s) + 16px); }   /* ancre : le bloc s'arrête sous l'en-tête fixe */
/* Ancien système d'apparition de js/script.js (attribut data-reveal posé sur des classes historiques
   gardées pour le JavaScript, ex. .form-card, .contact-item) : sans effet dans un bloc .vi */
.vi [data-reveal] { opacity: 1; transform: none; }
.vi :focus-visible { outline: 3px solid var(--vi-focus); outline-offset: 2px; }
.vi-wrap { width: 100%; max-width: var(--vi-max); margin: 0 auto; padding: 0 var(--vi-gut); }
.vi-wrap.is-narrow { max-width: 880px; }
.vi-ic { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -.125em; }
.vi-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.vi-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }   /* champ piège anti-robots */
.vi-nw { white-space: nowrap; }

/* ══════════ 3. Typographie ══════════ */
/* Surtitre : petites capitales rouges + trait (remplace les pastilles roses) */
.vi-eb { display: inline-flex; align-items: center; gap: 10px; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.4; color: var(--vi-accent); margin-bottom: 14px; }
.vi-eb::before { content: ""; width: 22px; height: 2px; background: currentColor; flex: none; }
/* h1 en deux lignes : mot-clé (référencement) + promesse */
.vi-h1-k { display: flex; align-items: center; gap: 12px; font-size: .95rem; font-weight: 600; color: var(--vi-accent); letter-spacing: .01em; line-height: 1.4; margin-bottom: 16px; }
.vi-h1-k::before { content: ""; width: 28px; height: 2px; background: var(--vi-rouge); flex: none; }
.vi .vi-h1-m { display: block; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: -.025em; color: var(--vi-fg); text-wrap: balance; }
.vi-h1-m em { font-style: normal; color: #CBD5E1; }
.vi .vi-h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; color: var(--vi-fg); }
.vi .vi-h3 { font-size: 1.2rem; line-height: 1.3; color: var(--vi-fg); }
.vi .vi-h3.is-sm { font-size: 1.06rem; }
.vi-sub { margin-top: 12px; font-size: 1.05rem; color: var(--vi-muted); max-width: 600px; text-wrap: pretty; }
.vi-lead { font-size: 1.125rem; line-height: 1.6; color: var(--vi-body); max-width: 600px; }
.vi-small { font-size: .85rem; color: var(--vi-muted); line-height: 1.5; }
/* Texte saisi dans l'admin (plusieurs paragraphes, liens, listes) */
.vi-prose { color: var(--vi-body); font-size: 1rem; line-height: 1.7; }
.vi-prose > * + * { margin-top: .9em; }
.vi-prose a { color: var(--vi-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.vi-prose strong, .vi-prose b { color: var(--vi-fg); font-weight: 600; }
.vi-prose ul > li { position: relative; padding-left: 18px; }
.vi-prose ul > li + li { margin-top: .4em; }
.vi-prose ul > li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--vi-accent); }
@media (max-width: 768px) {
    .vi-eb { font-size: 15px; letter-spacing: .1em; }
    .vi-h1-k { font-size: 15px; gap: 10px; margin-bottom: 10px; }
    .vi-h1-k::before { width: 18px; }
    .vi .vi-h1-m { font-size: 2rem; }
    .vi-sub, .vi-lead { font-size: 16px; }
    .vi-small { font-size: 15px; }
}

/* ══════════ 4. Boutons ══════════ */
.vi-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 52px; padding: .85rem 1.6rem; border-radius: var(--vi-r-btn); font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center; border: 1px solid transparent; background: none; cursor: pointer; white-space: nowrap; transition: background .2s, transform .2s, box-shadow .2s, border-color .2s, color .2s; }
.vi-btn .vi-ic, .vi-btn > i { font-size: 1.1em; }
/* Rouge : l'action principale (devis, candidature) — un seul par écran */
.vi-btn-red { background: var(--vi-rouge); color: #fff; }
.vi-btn-red:hover, .vi-btn-red:focus-visible { background: var(--vi-rouge-h); color: #fff; transform: translateY(-2px); box-shadow: var(--vi-sh-btn); }
.vi-btn-wa { background: var(--vi-wa); color: var(--vi-wa-ink); }
.vi-btn-wa:hover, .vi-btn-wa:focus-visible { background: var(--vi-wa-h); color: var(--vi-wa-ink); transform: translateY(-2px); }
/* Contour blanc : sur fond sombre */
.vi-btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.vi-btn-ghost:hover, .vi-btn-ghost:focus-visible { border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff; }
/* Contour gris : sur fond clair */
.vi-btn-line { background: #fff; color: var(--vi-ink); border-color: var(--vi-line2); }
.vi-btn-line:hover, .vi-btn-line:focus-visible { border-color: var(--vi-ink); color: var(--vi-ink); }
/* Anthracite (ex. « Appeler » à côté d'un bouton rouge) */
.vi-btn-dark { background: var(--vi-anth); color: #fff; }
.vi-btn-dark:hover, .vi-btn-dark:focus-visible { background: var(--vi-ink); color: #fff; }
.vi-btn-sm { min-height: 46px; padding: .65rem 1.1rem; font-size: .92rem; }   /* dans les cartes et encadrés */
.vi-btn-block { width: 100%; }
.vi-btn[disabled], .vi-btn[aria-disabled="true"], .vi-btn.is-busy { opacity: .7; cursor: progress; transform: none; box-shadow: none; }
/* Libellé long (ordinateur) / court (téléphone) : <span class="vi-t-l">…</span><span class="vi-t-s">…</span> */
.vi-t-s { display: none; }
.vi-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.vi-link-all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--vi-accent); text-decoration: none; }
.vi-link-all .vi-ic, .vi-link-all > i { transition: transform .2s; }
.vi-link-all:hover { text-decoration: underline; text-underline-offset: 3px; }
.vi-link-all:hover .vi-ic, .vi-link-all:hover > i { transform: translateX(3px); }
@media (max-width: 768px) {
    .vi-btn { font-size: 15px; padding: .8rem 1.1rem; }
    .vi-btn-sm { font-size: 15px; }
    .vi-t-l { display: none; }
    .vi-t-s { display: inline; }
    .vi-btns.is-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .vi-btns.is-2 > .vi-btn { width: 100%; padding-left: .6rem; padding-right: .6rem; }
    .vi-btns.is-2 > .is-full { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .vi-btn { white-space: normal; }                 /* un libellé long passe à la ligne au lieu de dépasser */
    .vi-btns.is-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .vi-btns.is-stack > .vi-btn { width: 100%; }
}

/* ══════════ 5. Apparitions douces ══════════
   [data-vi-reveal] (+ style="--d:1" pour décaler) : rien n'est masqué tant que le JS de la page
   n'a pas posé .vi-reveal-on sur le bloc .vi ; .vi-rise : entrée du héros au chargement (CSS seul). */
.vi.vi-reveal-on [data-vi-reveal] { transition: opacity .8s var(--vi-ease), transform .8s var(--vi-ease); transition-delay: calc(var(--d, 0) * 90ms); }
.vi.vi-reveal-on [data-vi-reveal]:not(.is-in) { opacity: 0; transform: translateY(18px); }
@keyframes vi-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.vi-rise { animation: vi-rise .9s var(--vi-ease) both; animation-delay: calc(var(--d, 0) * 110ms + 120ms); }

/* ══════════ 6. Héros intérieur court (sombre) ══════════
   <section class="vi-hero"> (vraie photo) ou <section class="vi-hero is-court"> (sans photo).
   Le haut du héros passe sous l'en-tête fixe du site (transparent tant que la page n'a pas défilé). */
.vi-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--vi-nuit); padding: var(--vi-hd) 0 0; }
.vi-hero.is-court { background: radial-gradient(900px 480px at 88% 0%, rgba(212, 47, 47, .16), transparent 62%), radial-gradient(760px 420px at 0% 100%, rgba(0, 51, 153, .2), transparent 60%), var(--vi-nuit); }
.vi-hero-bg { position: absolute; inset: 0; z-index: -1; margin: 0; overflow: hidden; background: var(--vi-nuit); }
.vi-hero-bg img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--pos, 50% 50%); }
/* Photo en hauteur ou sujet à droite : la photo n'occupe que la droite, fondue vers la gauche */
.vi-hero-bg.is-droite img { left: auto; right: 0; width: 62%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34%); mask-image: linear-gradient(90deg, transparent 0, #000 34%); }
/* Voiles : texte lisible à gauche, en bas, et sous l'en-tête (menu blanc) */
.vi-hero-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
    linear-gradient(90deg, rgba(8, 12, 20, .94) 0%, rgba(8, 12, 20, .8) 36%, rgba(8, 12, 20, .2) 72%, rgba(8, 12, 20, .05) 100%),
    linear-gradient(0deg, rgba(8, 12, 20, .96) 0%, rgba(8, 12, 20, 0) 42%),
    linear-gradient(180deg, rgba(8, 12, 20, .7) 0%, rgba(8, 12, 20, 0) 28%); }
.vi-hero-main { position: relative; min-height: min(560px, 64vh); display: flex; flex-direction: column; justify-content: flex-end; padding: 24px 0 32px; }
.vi-hero.is-court .vi-hero-main { min-height: 0; padding: 40px 0 48px; }
.vi-hero-copy { max-width: 620px; }
.vi-hero-lead { margin-top: 20px; font-size: 1.125rem; line-height: 1.6; color: rgba(255, 255, 255, .82); max-width: 560px; }
.vi-hero-cta { position: relative; margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.vi-hero-tel { margin-top: 16px; font-size: .95rem; color: rgba(255, 255, 255, .75); }
.vi-hero-tel a { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); }
.vi-hero-tel a:hover { border-bottom-color: #fff; color: #fff; }
/* Fil d'Ariane : <nav class="vi-ariane" aria-label="Fil d'Ariane"><ol><li><a>…</a></li><li><span aria-current="page">…</span></li></ol></nav> */
.vi-ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 20px; padding: 0; list-style: none; font-size: .85rem; color: rgba(255, 255, 255, .72); }
.vi-ariane li { display: flex; align-items: center; min-width: 0; }
.vi-ariane li + li::before { content: "›"; margin-right: 6px; opacity: .6; }
.vi-ariane a { color: inherit; text-decoration: none; }
.vi-ariane a:hover { color: #fff; text-decoration: underline; }
.vi-ariane [aria-current] { color: #fff; }
/* Bandeau de preuves au bas du héros (faits confirmés uniquement) */
.vi-hero-bar { position: relative; border-top: 1px solid rgba(255, 255, 255, .12); background: rgba(8, 12, 20, .4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vi-hero-bar .vi-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; padding-top: 18px; padding-bottom: 20px; flex-wrap: wrap; }
.vi-proofs { display: flex; flex-wrap: wrap; row-gap: 12px; }
.vi-proofs li { display: flex; flex-direction: column; padding: 0 34px; border-left: 1px solid rgba(255, 255, 255, .14); min-width: 0; }
.vi-proofs li:first-child { padding-left: 0; border-left: 0; }
.vi-proofs li.is-rev { flex-direction: column-reverse; }   /* libellé au-dessus du chiffre */
.vi-proofs strong { font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: #fff; letter-spacing: -.01em; }
.vi-proofs span { font-size: .85rem; color: rgba(255, 255, 255, .72); }
/* Légende de la photo (à droite du bandeau) */
.vi-hero-cap { font-size: .85rem; color: rgba(255, 255, 255, .72); text-align: right; max-width: 330px; line-height: 1.4; }
.vi-hero-cap b { display: block; color: #fff; font-weight: 600; }
@media (max-width: 768px) {
    /* Téléphone : la photo passe au-dessus du texte, qui la chevauche un peu */
    .vi-hero-bg { position: relative; inset: auto; z-index: 0; height: 56vw; max-height: 360px; }
    .vi-hero-bg.is-droite img { left: 0; right: auto; width: 100%; -webkit-mask-image: none; mask-image: none; }
    .vi-hero-bg img { object-position: var(--pm, var(--pos, 50% 50%)); }
    .vi-hero-bg::after { background: linear-gradient(180deg, rgba(8, 12, 20, 0) 45%, #080C14 100%); }
    .vi-hero-main, .vi-hero.is-court .vi-hero-main { min-height: 0; padding: 24px 0 24px; z-index: 1; }
    .vi-hero-bg + .vi-hero-main { padding-top: 0; margin-top: -18px; }
    .vi-ariane ol { font-size: 15px; margin-bottom: 8px; }
    .vi-ariane a { display: inline-flex; align-items: center; min-height: 44px; }
    .vi-hero-lead { font-size: 16px; margin-top: 14px; }
    .vi-hero-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
    .vi-hero-cta > .vi-btn { width: 100%; padding: .8rem .6rem; }
    .vi-hero-cta > .vi-btn:only-child, .vi-hero-cta > .is-full { grid-column: 1 / -1; }
    .vi-hero-tel { font-size: 15px; }
    .vi-hero-tel:not(.is-visible) { display: none; }   /* le téléphone reste dans la barre du haut et la barre mobile « Appeler » */
    .vi-hero-tel a { padding: 6px 0; }                 /* lien dans la phrase : zone à toucher un peu plus haute */
    .vi-hero-bar { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .vi-hero-bar .vi-wrap { display: block; padding-top: 16px; padding-bottom: 12px; }
    .vi-proofs { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px 14px; }
    .vi-proofs li { padding: 0 0 0 12px; }
    .vi-proofs li:first-child { padding-left: 0; }
    .vi-proofs strong { font-size: 1.2rem; }
    .vi-proofs span { font-size: 15px; line-height: 1.35; }
    .vi-hero-cap { display: none; }
}
@media (max-width: 768px) and (max-height: 720px) {
    .vi-hero-bg { height: 50vw; }
}

/* ══════════ 7. Sections claires / sombres ══════════
   Rythme conseillé : héros nuit → clair → sombre → blanc → étapes → bandeau nuit. */
.vi-sec { position: relative; padding: var(--vi-sec) 0; }
.vi-sec.is-tight { padding: calc(var(--vi-sec) * .6) 0; }
.vi-sec-white { background: #fff; }
.vi-sec-light { background: var(--vi-fond); }
.vi-sec-dark { background: var(--vi-nuit2); }
.vi-sec-steps { background: var(--vi-nuit3); }
/* Bandeau de nuit (dégradés rouge / bleu) : devis, candidature */
.vi-dv { position: relative; padding: var(--vi-sec) 0; background: radial-gradient(900px 480px at 88% 0%, rgba(212, 47, 47, .18), transparent 62%), radial-gradient(700px 400px at 0% 100%, rgba(0, 51, 153, .18), transparent 60%), var(--vi-nuit); }
.vi-dv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--vi-dv-fm, 480px)); gap: 56px; align-items: center; }
.vi-dv-grid.is-top { align-items: start; }
/* Deux colonnes (texte + photo, formulaire + coordonnées…) */
.vi-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px 40px; align-items: start; }
.vi-split.is-half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vi-split.is-center { align-items: center; }
@media (max-width: 960px) {
    .vi-dv-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .vi-split, .vi-split.is-half { grid-template-columns: minmax(0, 1fr); }
}

/* ══════════ 8. En-têtes de section ══════════ */
.vi-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; margin-bottom: 36px; }
.vi-sec-head > div { min-width: 0; max-width: 680px; }
.vi-sec-head.is-center { justify-content: center; text-align: center; }
.vi-sec-head.is-center > div { margin: 0 auto; }
.vi-sec-head.is-center .vi-sub { margin-left: auto; margin-right: auto; }
@media (max-width: 768px) {
    .vi-sec-head { margin-bottom: 24px; }
}

/* ══════════ 9. Grilles et cartes ══════════ */
.vi-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--vi-gap); }
.vi-grid-2 { --cols: 2; }
.vi-grid-3 { --cols: 3; }
.vi-grid-4 { --cols: 4; }
@media (max-width: 960px) { .vi-grid-3, .vi-grid-4 { --cols: 2; } }
@media (max-width: 600px) { .vi-grid { --cols: 1; } }
/* Carte blanche : photo (facultative) + texte ; <a class="vi-card"> ou .is-link : se soulève au survol */
.vi-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--vi-line); border-radius: var(--vi-r-card); overflow: hidden; min-width: 0; text-decoration: none; transition: transform .3s var(--vi-ease), box-shadow .3s, border-color .3s; }
a.vi-card, a.vi-card:hover { color: var(--vi-ink); }
a.vi-card:hover, .vi-card.is-link:hover { transform: translateY(-4px); box-shadow: var(--vi-sh-card); border-color: var(--vi-line2); }
.vi-card-img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--vi-nuit2); }
.vi-card-img.is-wide { aspect-ratio: 16 / 10; }
.vi-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 50%); transition: transform .7s var(--vi-ease); }
a.vi-card:hover .vi-card-img img, .vi-card.is-link:hover .vi-card-img img { transform: scale(1.05); }
.vi-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 22px 22px; flex: 1; min-width: 0; }
.vi .vi-card-t { font-size: 1.06rem; line-height: 1.3; color: var(--vi-fg); }
.vi-card-body > p { font-size: .92rem; color: var(--vi-muted); line-height: 1.55; }
.vi-card-foot { margin-top: auto; padding-top: 6px; width: 100%; display: flex; flex-wrap: wrap; gap: 10px; }
.vi-card-foot > .vi-btn { flex: 1 1 auto; }
/* Carte sur fond sombre (verre fumé) */
.vi-card.is-dark { background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); border-color: rgba(255, 255, 255, .09); }
/* Carte d'appel à l'action (anthracite + halo rouge) : « Candidature spontanée », « Un projet sur mesure ? » */
.vi-card-cta { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 12px; min-width: 0; padding: 28px 24px; border-radius: var(--vi-r-card); background: radial-gradient(380px 240px at 100% 0, rgba(212, 47, 47, .3), transparent 70%), var(--vi-anth); }
.vi-card-cta > p { color: rgba(255, 255, 255, .78); font-size: .92rem; }
.vi-card-cta .vi-btn { width: 100%; }
/* Pastille d'icône (cartes, encadrés, engagements) : rose pâle sur fond clair, rouge translucide sur fond sombre */
.vi-pic { width: 46px; height: 46px; border-radius: var(--vi-r-ic); display: grid; place-items: center; flex: none; font-size: 21px; background: var(--vi-tint); color: var(--vi-tint-fg); }
/* Badge (étiquette) : « Candidatures bienvenues », métier… */
.vi-badge { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; font-size: .75rem; font-weight: 600; line-height: 1.4; color: var(--vi-badge-fg); background: var(--vi-tint); padding: 3px 10px; border-radius: var(--vi-r-pill); }
/* Photo avec légende posée dessus (16/9 ; .is-43 = 4/3 ; .is-pano = 2/1) */
.vi-fig { position: relative; margin: 0; border-radius: var(--vi-r-card); overflow: hidden; background: var(--vi-nuit2); }
.vi-fig img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: var(--op, 50% 50%); }
.vi-fig.is-43 img { aspect-ratio: 4 / 3; }
.vi-fig.is-pano img { aspect-ratio: 2 / 1; }
.vi-fig figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 12px; background: linear-gradient(0deg, rgba(8, 12, 20, .9), rgba(8, 12, 20, 0)); color: #fff; font-size: .85rem; font-weight: 500; line-height: 1.4; }
.vi-fig figcaption b { display: block; font-weight: 600; }
@media (max-width: 768px) {
    .vi-card-body > p, .vi-card-cta > p, .vi-badge, .vi-fig figcaption { font-size: 15px; }
    .vi .vi-card-t { font-size: 16px; }
}
@media (max-width: 600px) {
    .vi-card-body { padding: 16px 16px 18px; }
    .vi-card-cta { padding: 22px 18px; }
    a.vi-card:hover, .vi-card.is-link:hover { transform: none; }
}
/* Carrousel sur téléphone : <div class="vi-grid vi-grid-4 vi-slide-m"> → cartes côte à côte qui glissent */
@media (max-width: 600px) {
    .vi-slide-m { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 calc(-1 * var(--vi-gut)); padding: 0 var(--vi-gut) 8px; scroll-padding: 0 var(--vi-gut); scrollbar-width: none; }
    .vi-slide-m::-webkit-scrollbar { display: none; }
    .vi-slide-m > * { flex: 0 0 84%; scroll-snap-align: start; }
    .vi-slide-m .vi-card-img { aspect-ratio: 16 / 9; }
    .vi.vi-reveal-on .vi-slide-m [data-vi-reveal]:not(.is-in) { opacity: 1; transform: none; }   /* cartes hors écran visibles pendant le glissement */
}

/* ══════════ 10. Puces, coches, listes d'informations ══════════ */
/* Coche ronde : <span class="vi-coche" aria-hidden="true"><svg class="vi-ic"><use href="#vn-i-check"/></svg></span> */
.vi-coche { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 12px; background: var(--vi-tint); color: var(--vi-tint-fg); }
.vi-coche.is-sm { width: 20px; height: 20px; font-size: 10px; }
/* Liste à coches (engagements, « ce qui est inclus ») : la coche s'aligne sur la 1re ligne du texte */
.vi-checks { display: grid; gap: 10px; }
.vi-checks li { display: flex; align-items: flex-start; gap: 12px; color: var(--vi-body); line-height: 1.5; }
.vi-checks .vi-coche { margin-top: 0; }
.vi-checks .vi-coche.is-sm { margin-top: 2px; }
.vi-checks.is-sm li { font-size: .9rem; gap: 10px; }
.vi-checks.is-sm .vi-coche.is-sm { margin-top: 1px; }
/* Puces rondes simples */
.vi-puces { display: grid; gap: 8px; }
.vi-puces li { position: relative; padding-left: 18px; color: var(--vi-body); line-height: 1.55; }
.vi-puces li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--vi-accent); }
/* Liste d'informations avec icône (horaires, adresse, e-mail) */
.vi-meta { display: grid; gap: 12px; font-size: .95rem; color: var(--vi-body); line-height: 1.55; }
.vi-meta li { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.vi-meta li > .vi-ic, .vi-meta li > i { color: var(--vi-accent); font-size: 1.05rem; margin-top: .22em; flex: none; width: 1.05rem; text-align: center; }
.vi-meta b, .vi-meta strong { color: var(--vi-fg); font-weight: 600; }
.vi-meta a { color: var(--vi-fg); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; border-bottom-color: rgba(127, 140, 160, .55); }
.vi-meta a:hover { border-bottom-color: currentColor; }
@media (max-width: 768px) {
    .vi-checks.is-sm li, .vi-meta { font-size: 15px; }
    .vi-meta { gap: 8px; }
    .vi-meta a { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 0; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(127, 140, 160, .7); }
    .vi-meta li:has(> a) { align-items: center; }
    .vi-meta li:has(> a) > .vi-ic, .vi-meta li:has(> a) > i { margin-top: 0; }
}

/* ══════════ 11. Étapes (sur fond sombre .vi-sec-steps ; version blanche sur fond clair) ══════════ */
.vi-st-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--vi-gap); counter-reset: vi-st; }
.vi-st-list.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vi-st { position: relative; padding: 28px 24px 26px; border-radius: var(--vi-r-card); border: 1px solid rgba(255, 255, 255, .09); background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); min-width: 0; }
.vi-st-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.vi-st-ic { width: 48px; height: 48px; border-radius: var(--vi-r-ic); display: grid; place-items: center; background: rgba(212, 47, 47, .15); color: var(--vi-rouge-l); font-size: 20px; flex: none; }
.vi-st-n { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--vi-rouge-l); }
.vi .vi-st h3 { font-size: 1.12rem; margin-bottom: 8px; line-height: 1.3; color: #fff; }
.vi-st p { font-size: .92rem; color: rgba(255, 255, 255, .74); line-height: 1.6; }
.vi-st-foot { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; margin-top: 32px; }
/* Mêmes étapes posées sur une section claire */
.vi-sec-white .vi-st, .vi-sec-light .vi-st, .vi-light .vi-st { background: #fff; border-color: var(--vi-line); }
.vi-sec-white .vi-st-ic, .vi-sec-light .vi-st-ic, .vi-light .vi-st-ic { background: var(--vi-rouge-p); color: var(--vi-rouge); }
.vi-sec-white .vi-st-n, .vi-sec-light .vi-st-n, .vi-light .vi-st-n { color: var(--vi-rouge); }
.vi .vi-sec-white .vi-st h3, .vi .vi-sec-light .vi-st h3, .vi .vi-light .vi-st h3 { color: var(--vi-ink); }
.vi-sec-white .vi-st p, .vi-sec-light .vi-st p, .vi-light .vi-st p { color: var(--vi-sub); }
@media (max-width: 960px) { .vi-st-list, .vi-st-list.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .vi-st p, .vi-st-n { font-size: 15px; } }
@media (max-width: 600px) {
    .vi-st-list, .vi-st-list.is-3 { grid-template-columns: minmax(0, 1fr); }
    .vi-st { padding: 20px 18px; }
    .vi-st-top { margin-bottom: 14px; }
    .vi-st-foot .vi-btn { width: 100%; }
}

/* ══════════ 12. Engagements / avantages (carte à icône) ══════════ */
.vi-gr-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--vi-gap); }
.vi-gr-grid.is-2 { --cols: 2; }
.vi-gr-grid.is-3 { --cols: 3; }
.vi-gr { padding: 26px 24px; border-radius: var(--vi-r-card); border: 1px solid var(--vi-line); background: #fff; min-width: 0; }
.vi-gr .vi-pic { margin-bottom: 18px; }
.vi .vi-gr h3 { font-size: 1.06rem; margin-bottom: 8px; line-height: 1.3; text-wrap: balance; }
.vi-gr p { font-size: .92rem; color: var(--vi-sub); }
@media (max-width: 960px) { .vi-gr-grid, .vi-gr-grid.is-3 { --cols: 2; } }
@media (max-width: 600px) {
    .vi-gr-grid, .vi-gr-grid.is-2, .vi-gr-grid.is-3 { --cols: 1; }
    .vi-gr { display: flex; gap: 16px; padding: 18px; }
    .vi-gr .vi-pic { margin: 0; }
    .vi .vi-gr h3 { font-size: 16px; }
}
@media (max-width: 768px) { .vi-gr p { font-size: 15px; } }

/* ══════════ 13. Logos clients ══════════
   Grille : <ul class="vi-logos"><li><img src="…" alt="DJEZZY" width="…" height="…" loading="lazy"></li>…</ul>
   Bandeau : <section class="vi-lg"> + en-tête .vi-lg-head ; défilé facultatif (.vi-lg-vp / .vi-lg-track, JS). */
.vi-lg { position: relative; background: var(--vi-fond); padding: 40px 0 44px; border-bottom: 1px solid var(--vi-line); }
.vi-lg-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.vi .vi-lg-t { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--vi-sub); line-height: 1.4; }
.vi-lg-sub { font-size: .9rem; color: var(--vi-gris); margin-top: 4px; }
.vi-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 40px; }
.vi-logos.is-left { justify-content: flex-start; }
.vi-logos li { flex: none; display: flex; align-items: center; justify-content: center; height: 64px; }
.vi-logos img { height: 48px; width: auto; max-width: 140px; object-fit: contain; filter: grayscale(1); opacity: .62; mix-blend-mode: multiply; transition: filter .3s, opacity .3s; }
.vi-logos li:hover img { filter: none; opacity: 1; }
/* Sur fond sombre : logos sur pastilles blanches */
.vi-logos.is-tiles { gap: 12px; }
.vi-logos.is-tiles li { height: 72px; padding: 10px 16px; border-radius: var(--vi-r-ic); background: #fff; }
.vi-logos.is-tiles img { height: 44px; max-width: 120px; opacity: .8; }
/* Défilé (JS : copie de la liste, puis .is-anim sur .vi-lg-vp et .vi-lg-track ; bouton pause .vi-lg-stop) */
.vi-lg-vp { overflow: hidden; }
.vi-lg-vp.is-anim { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.vi-lg-track { display: flex; width: max-content; }
.vi-lg-track:not(.is-anim) { width: 100%; max-width: var(--vi-max); margin: 0 auto; padding: 0 var(--vi-gut); justify-content: center; }
.vi-lg-track.is-anim { animation: vi-lgs 80s linear infinite; }
.vi-lg-track.is-anim .vi-logos { flex-wrap: nowrap; justify-content: flex-start; gap: 56px; padding-right: 56px; }
.vi-lg-track.is-paused, .vi-lg-vp:hover .vi-lg-track { animation-play-state: paused; }
@keyframes vi-lgs { to { transform: translateX(-50%); } }
.vi-lg-stop { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--vi-line2); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--vi-txt); flex: none; padding: 0; font-size: 12px; }
.vi-lg-stop::after { content: ""; position: absolute; inset: -4px; }   /* zone à toucher 44 px */
.vi-lg-stop[aria-pressed="true"] .is-pause, .vi-lg-stop:not([aria-pressed="true"]) .is-play { display: none; }
@media (max-width: 768px) {
    .vi-lg { padding: 32px 0 34px; }
    .vi .vi-lg-t { font-size: 15px; letter-spacing: .08em; }
    .vi-lg-sub { font-size: 15px; }
    .vi-lg-stop { width: 44px; height: 44px; }
    .vi-lg-track.is-anim .vi-logos { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: max-content; grid-template-rows: repeat(2, 52px); gap: 14px 36px; padding-right: 36px; }
    .vi-lg-track.is-anim { animation-duration: 64s; }
}
@media (max-width: 600px) {
    .vi-logos:not(.is-tiles) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; justify-items: center; }
    .vi-logos li { height: 52px; }
    .vi-logos img { height: 36px; max-width: 96px; }
    .vi-logos.is-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .vi-logos.is-tiles li { height: 60px; padding: 8px; }
    .vi-logos.is-tiles img { height: 34px; max-width: 100%; }
}

/* ══════════ 14. Encadrés ══════════ */
/* Information courte (aide sous un champ, remarque) : <p class="vi-info"><svg class="vi-ic">…</svg><span>…</span></p> */
.vi-info { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--vi-r-btn); background: #F1F5F9; color: var(--vi-txt); font-size: .88rem; line-height: 1.5; }
.vi-info > .vi-ic, .vi-info > i { color: var(--vi-rouge); font-size: 1.05em; margin-top: .2em; flex: none; }
.vi-info b, .vi-info strong { color: var(--vi-ink); font-weight: 600; }
.vi-info.is-ok { background: var(--vi-ok-p); color: var(--vi-ok); border: 1px solid #A7F3D0; }
.vi-info.is-ok > .vi-ic, .vi-info.is-ok > i { color: var(--vi-ok); }
.vi-info.is-err { background: var(--vi-err-p); color: #991B1B; border: 1px solid #FECACA; }
.vi-info.is-err > .vi-ic, .vi-info.is-err > i { color: var(--vi-err); }
.vi-info.is-dark { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .85); }
.vi-info.is-dark > .vi-ic, .vi-info.is-dark > i { color: var(--vi-rouge-l); }
.vi-info.is-dark b, .vi-info.is-dark strong { color: #fff; }
/* Encart (icône + titre + texte + boutons) : blanc par défaut ; .is-dark = encadré SAV ; .is-row = en ligne (avis Google…) */
.vi-encart { position: relative; display: flex; gap: 16px; padding: 22px; border-radius: var(--vi-r-card); border: 1px solid var(--vi-line); background: #fff; min-width: 0; }
.vi-encart-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; flex: 1; }
.vi .vi-encart h3 { font-size: 1.06rem; line-height: 1.3; color: var(--vi-fg); }
.vi-encart-body > p { font-size: .92rem; color: var(--vi-muted); line-height: 1.55; }
.vi-encart-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.vi-encart.is-dark { border-color: transparent; background: radial-gradient(380px 240px at 100% 0, rgba(212, 47, 47, .3), transparent 70%), var(--vi-anth); }
.vi-encart.is-dark .vi-encart-body > p { color: rgba(255, 255, 255, .78); }
.vi-encart.is-row { align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 28px; padding: 22px 26px; }
.vi-encart.is-row > .vi-encart-l { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1 1 320px; }
.vi-encart.is-row .vi-encart-act { margin-top: 0; }
.vi-pic.is-star { border-radius: 50%; background: #FFFBEB; color: #B45309; }   /* avis Google (ambre foncé : 4,8:1) */
@media (max-width: 768px) {
    .vi-info, .vi-encart-body > p { font-size: 15px; }
    .vi-encart { padding: 18px; }
    .vi-encart.is-row { padding: 18px; }
    .vi-encart.is-row .vi-encart-act, .vi-encart.is-row .vi-encart-act > .vi-btn { width: 100%; }
}

/* ══════════ 15. Formulaires ══════════
   <form class="vi-fm"> carte blanche (ombre forte : sur fond sombre ; .is-flat : sur fond clair) */
.vi-fm { position: relative; background: #fff; border-radius: var(--vi-r-fm); padding: 30px 30px 26px; box-shadow: var(--vi-sh-fm); }
.vi-fm.is-compact { padding: 24px 28px 22px; }
.vi-fm.is-flat { border: 1px solid var(--vi-line); box-shadow: var(--vi-sh-flat); }
.vi .vi-fm-t { font-size: 1.25rem; line-height: 1.25; margin-bottom: 4px; color: var(--vi-ink); }
.vi-fm-sub { font-size: .9rem; color: var(--vi-gris); margin-bottom: 20px; }
.vi-fm-stack { display: grid; gap: 14px; }
.vi-fm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.vi-full { grid-column: 1 / -1; }
/* Champ : <div class="vi-fld"><label for="…">Nom <span class="vi-req" aria-hidden="true">*</span></label><input …><p class="vi-hint">…</p></div> */
.vi-fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vi-fld > label, .vi-lbl { font-size: .85rem; font-weight: 600; color: var(--vi-txt); line-height: 1.4; }
.vi-req { color: var(--vi-rouge); }
.vi-hint { font-size: .8rem; color: var(--vi-gris); line-height: 1.45; }
.vi-fld :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="submit"], [type="button"]), select, textarea) {
    width: 100%; min-height: 48px; padding: 10px 14px; margin: 0;
    border: 1px solid var(--vi-champ); border-radius: var(--vi-r-btn);
    font: inherit; font-size: .95rem; line-height: 1.4; color: var(--vi-ink); background-color: #fff;
    transition: border-color .2s, box-shadow .2s;
}
.vi-fld textarea { min-height: 112px; resize: vertical; line-height: 1.5; }
.vi-fld select { -webkit-appearance: none; appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.vi-fld :where(input, textarea)::placeholder { color: var(--vi-gris); opacity: 1; }
.vi-fld :where(input, select, textarea):hover { border-color: #64748B; }
.vi-fld :where(input, select, textarea):focus { outline: none; border-color: var(--vi-rouge); box-shadow: 0 0 0 3px rgba(212, 47, 47, .2); }
.vi-fld :where(input, select, textarea):disabled { background-color: #F1F5F9; color: var(--vi-gris); cursor: not-allowed; }
/* Erreurs : aria-invalid="true" sur le champ + message .vi-fld-err (relié par aria-describedby) */
.vi-fld [aria-invalid="true"] { border-color: var(--vi-err); background-color: #FFF7F7; }
.vi-fld [aria-invalid="true"]:focus { border-color: var(--vi-err); box-shadow: 0 0 0 3px rgba(185, 28, 28, .18); }
.vi-fld-err { display: flex; align-items: flex-start; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--vi-err); line-height: 1.4; }
.vi-fld-err > .vi-ic, .vi-fld-err > i { margin-top: .15em; flex: none; }
/* Case à cocher : <label class="vi-ck"><input type="checkbox"><span class="vi-box"><svg class="vi-ic"><use href="#vn-i-check"/></svg></span>Texte</label> */
.vi-ck { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: .88rem; color: var(--vi-txt); cursor: pointer; line-height: 1.4; }
.vi-ck > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.vi-ck a { position: relative; z-index: 1; color: var(--vi-ink); text-underline-offset: 2px; }
.vi-box { width: 22px; height: 22px; border: 1.5px solid var(--vi-champ); border-radius: 6px; display: grid; place-items: center; flex: none; background: #fff; color: #fff; font-size: 13px; transition: background .15s, border-color .15s; }
.vi-box > .vi-ic, .vi-box > i { opacity: 0; }
.vi-ck > input:checked + .vi-box { background: var(--vi-rouge); border-color: var(--vi-rouge); }
.vi-ck > input:checked + .vi-box > .vi-ic, .vi-ck > input:checked + .vi-box > i { opacity: 1; }
.vi-ck > input:focus-visible + .vi-box { outline: 3px solid var(--vi-focus); outline-offset: 2px; }
.vi-ck > input[aria-invalid="true"] + .vi-box, .vi-ck.is-err .vi-box { border-color: var(--vi-err); }
.vi-ck.is-long { align-items: flex-start; padding: 10px 0; }   /* texte sur plusieurs lignes (consentement) */
.vi-ck.is-long .vi-box { margin-top: 1px; }
.vi-ck-more { margin: 0 0 0 32px; font-size: .85rem; color: var(--vi-gris); }
.vi-ck-more a { color: var(--vi-txt); text-underline-offset: 2px; }
/* Choix en boutons (radio ou case) : <fieldset class="vi-opts"><legend>…</legend><div class="vi-opts-grid">
     <label class="vi-opt"><input type="radio" name="…" value="…"><span>Totem</span></label>… */
.vi-opts > legend { font-size: .85rem; font-weight: 600; color: var(--vi-txt); margin: 0 0 8px; padding: 0; line-height: 1.4; }
.vi-opts-grid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 8px; }
.vi-opt { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 8px; border: 1px solid var(--vi-champ); border-radius: var(--vi-r-btn); background: #fff; font-size: .84rem; font-weight: 500; color: var(--vi-txt); text-align: center; line-height: 1.25; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.vi-opt > input { position: absolute; top: -1px; left: -1px; width: calc(100% + 2px); height: calc(100% + 2px); margin: 0; opacity: 0; cursor: pointer; }
.vi-opt:hover { border-color: var(--vi-ink); }
.vi-opt:has(> input:checked), .vi-opt.is-on { border-color: var(--vi-rouge); background: var(--vi-rouge-p); color: var(--vi-rouge-h); font-weight: 600; box-shadow: inset 0 0 0 1px var(--vi-rouge); }
.vi-opt:focus-within { outline: 3px solid var(--vi-focus); outline-offset: 2px; }
.vi-opt:has(> input:focus:not(:focus-visible)) { outline: none; }
.vi-opt > .vi-ic, .vi-opt > i { font-size: 1em; flex: none; }
.vi-opt.is-wide { grid-column: 1 / -1; }
.vi-opt.is-dashed { border-style: dashed; }   /* choix à part (ex. « SAV / dépannage ») */
.vi-opts.is-err .vi-opt, .vi-opts[aria-invalid="true"] .vi-opt { border-color: #F87171; }
.vi-opts.is-err > legend, .vi-opts[aria-invalid="true"] > legend { color: var(--vi-err); }
/* Fichier joint : <label class="vi-file"><input type="file" …><svg class="vi-ic">…</svg><span><span>Joindre…</span><small>PDF, JPG — 10 Mo</small></span></label> */
.vi-file { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border: 1px dashed var(--vi-champ); border-radius: var(--vi-r-btn); background: #fff; color: var(--vi-txt); font-size: .88rem; font-weight: 500; line-height: 1.4; cursor: pointer; transition: border-color .2s, background .2s; }
.vi-file > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.vi-file > .vi-ic, .vi-file > i { font-size: 1.3rem; color: var(--vi-gris); flex: none; }
.vi-file small { display: block; color: var(--vi-gris); font-size: .8rem; font-weight: 400; }
.vi-file:hover, .vi-file.is-drag { border-color: var(--vi-rouge); background: var(--vi-rouge-p); }
.vi-file:focus-within { outline: 3px solid var(--vi-focus); outline-offset: 2px; }
.vi-file.is-err, .vi-file:has(> input[aria-invalid="true"]) { border-color: var(--vi-err); border-style: solid; }
/* Bouton « Ajouter des détails (facultatif) » : <button class="vi-more" aria-expanded="false" aria-controls="…"> */
.vi-more { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 14px; border: 1px dashed var(--vi-champ); border-radius: var(--vi-r-btn); background: var(--vi-fond); text-align: left; cursor: pointer; color: var(--vi-ink); font: inherit; }
.vi-more:hover { border-color: var(--vi-ink); }
.vi-more-pl { width: 28px; height: 28px; border-radius: 8px; background: #fff; border: 1px solid var(--vi-line); display: grid; place-items: center; flex: none; color: var(--vi-rouge); font-size: 14px; transition: transform .2s; }
.vi-more[aria-expanded="true"] .vi-more-pl { transform: rotate(45deg); }
.vi-more b { display: block; font-size: .88rem; font-weight: 600; line-height: 1.3; }
.vi-more small { display: block; font-size: .8rem; color: var(--vi-gris); line-height: 1.35; }
/* Bouton d'envoi : toute la largeur du formulaire (.is-auto : largeur du texte) */
.vi-fm .vi-btn:not(.is-auto) { width: 100%; margin-top: 18px; }
/* « Devis gratuit et sans engagement » sous le bouton */
.vi-fm-free { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; font-size: .92rem; font-weight: 600; color: var(--vi-txt); line-height: 1.4; text-align: center; }
.vi-fm-legal { margin-top: 12px; font-size: .8rem; color: var(--vi-gris); line-height: 1.5; }
.vi-fm-legal a { color: var(--vi-txt); text-underline-offset: 2px; }
/* Message après envoi : <p class="vi-fm-msg" role="status" tabindex="-1"> ; .is-err = erreur */
.vi-fm-msg { margin-top: 14px; padding: 12px 14px; border-radius: var(--vi-r-btn); font-size: .9rem; line-height: 1.5; border: 1px solid #A7F3D0; background: var(--vi-ok-p); color: var(--vi-ok); }
.vi-fm-msg.is-err { border-color: #FECACA; background: var(--vi-err-p); color: #991B1B; }
.vi-fm-msg:focus { outline: none; }
/* Compatibilité : messages créés par js/contact.js dans un formulaire .vi-fm (même aspect, 15 px sur téléphone) */
.vi-fm .nf-field-error { font-size: .82rem; }
.vi-opts-grid.nf-invalid .vi-opt { border-color: #F87171; }
@media (max-width: 768px) {
    .vi-fld > label, .vi-lbl, .vi-hint, .vi-fld-err, .vi-ck, .vi-ck-more, .vi-opts > legend, .vi-opt, .vi-file, .vi-file small,
    .vi-more b, .vi-more small, .vi-fm-sub, .vi-fm-free, .vi-fm-legal, .vi-fm-msg, .vi-fm .nf-field-error { font-size: 15px; }
    .vi-fld :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="submit"], [type="button"]), select, textarea) { font-size: 16px; }   /* 16 px : pas de zoom automatique sur iPhone */
    .vi-ck-more a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 600px) {
    .vi-fm, .vi-fm.is-compact { padding: 22px 16px 20px; }
    .vi-fm-grid { grid-template-columns: minmax(0, 1fr); }
    .vi-opts-grid { --cols: 2; }
}

/* ══════════ 16. Mouvements réduits (réglage du système) ══════════ */
@media (prefers-reduced-motion: reduce) {
    .vi *, .vi *::before, .vi *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .vi.vi-reveal-on [data-vi-reveal]:not(.is-in) { opacity: 1; transform: none; }
    .vi-rise { animation: none; }
    .vi-lg-track.is-anim { animation: none; }
    .vi-btn:hover, .vi-btn:focus-visible, a.vi-card:hover, .vi-card.is-link:hover { transform: none; }
}

/* ══════════ 17. Impression : tout visible, fonds sombres remplacés par du blanc ══════════ */
@media print {
    .vi.vi-reveal-on [data-vi-reveal], .vi-rise { opacity: 1 !important; transform: none !important; animation: none !important; }
    .vi-hero, .vi-sec-dark, .vi-sec-steps, .vi-dv, .vi-card-cta, .vi-encart.is-dark { background: #fff !important; color: #000 !important; --vi-fg: #000; --vi-body: #000; --vi-muted: #333; --vi-accent: #000; }
    .vi-hero-bg, .vi-lg-stop { display: none !important; }
    .vi-hero { padding-top: 0; }
    .vi-hero-lead, .vi-hero-tel, .vi-ariane ol, .vi-proofs strong, .vi-proofs span, .vi-st p, .vi .vi-st h3 { color: #000 !important; }
    .vi-fm { box-shadow: none; border: 1px solid #999; }
}