/* VisionSecure — Sections IA
   Styles autonomes (aucune dépendance Tailwind). Tout est préfixé .vsia-
   pour ne rien pouvoir casser dans le thème. */

.vsia {
  --vsia-ink: var(--color-ink, #07111f);
  --vsia-night: var(--color-night, #0b1d33);
  --vsia-mist: var(--color-mist, #f7f9fc);
  --vsia-fog: var(--color-fog, #9db1c7);
  --vsia-a1: var(--color-accent, #2b8cff);
  --vsia-a2: var(--color-accent-2, #00f0d4);
  --vsia-max: 1600px;

  box-sizing: border-box;
  padding: 72px 0;
  color: var(--vsia-mist);
  font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
  line-height: 1.6;
}
.vsia *,
.vsia *::before,
.vsia *::after { box-sizing: border-box; }

.vsia--night { background: var(--vsia-night); }
.vsia--ink   { background: var(--vsia-ink); border-top: 1px solid rgba(255, 255, 255, .06); }

@media (min-width: 768px) { .vsia { padding: 88px 0; } }

.vsia-wrap { max-width: var(--vsia-max); margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .vsia-wrap { padding: 0 48px; } }

.vsia-head { text-align: center; }
.vsia-kick {
  margin: 0 0 24px;
  font-size: 13px; font-weight: 500;
  letter-spacing: .25em; text-transform: uppercase;
}
.vsia-kick--a2 { color: var(--vsia-a2); }
.vsia-kick--a1 { color: var(--vsia-a1); }

.vsia-h2 {
  margin: 0;
  font-family: var(--font-space-grotesk), ui-sans-serif, system-ui, sans-serif;
  font-weight: 600; letter-spacing: -.022em; line-height: 1.08;
  text-wrap: balance;
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
}
.vsia-h2 span {
  display: inline-block;
  padding-bottom: .12em; margin-bottom: -.12em;
  background-image: linear-gradient(100deg, var(--vsia-a1) 0%, var(--vsia-a2) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.vsia-lede {
  max-width: 62ch; margin: 22px auto 0;
  color: var(--vsia-fog); font-size: 15px; line-height: 1.7;
}

/* ---------- parcours du signal ---------- */
.vsia-pipe {
  position: relative; margin-top: 56px;
  display: grid; gap: 34px; grid-template-columns: 1fr;
}
@media (min-width: 640px) { .vsia-pipe { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .vsia-pipe { grid-template-columns: repeat(4, 1fr); gap: 0; } }

.vsia-rail { display: none; }
@media (min-width: 1024px) {
  .vsia-rail {
    display: block; position: absolute; left: 12%; right: 12%; top: 34px; height: 2px;
    background: linear-gradient(90deg, #2b8cff, #00f0d4, #3ce881, #a78bfa);
    opacity: .45;
  }
}

.vsia-node { position: relative; text-align: center; padding: 0 14px; }
.vsia-node-dot {
  position: relative; z-index: 1;
  width: 68px; height: 68px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto; background: var(--vsia-night); border: 1px solid rgba(255, 255, 255, .08);
}
.vsia--night .vsia-node-dot { background: var(--vsia-ink); }
.vsia-node-step {
  display: block; margin-top: 14px;
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
}
.vsia-node h3 {
  margin: 6px 0 0;
  font-family: var(--font-space-grotesk), ui-sans-serif, system-ui, sans-serif;
  font-size: 15.5px; font-weight: 600; letter-spacing: -.01em;
}
.vsia-node p { margin: 8px 0 0; color: var(--vsia-fog); font-size: 13px; line-height: 1.6; }

/* ---------- capacités ---------- */
.vsia-caps { margin-top: 64px; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .vsia-caps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .vsia-caps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .vsia-caps--four { grid-template-columns: repeat(4, 1fr); } }

.vsia-cap {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
  border: 1px solid; border-radius: 24px; padding: 30px 28px;
  background: var(--vsia-ink);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.vsia-cap .vsia-tag { margin-top: auto; }
.vsia-cap p { margin-bottom: 18px; }
.vsia--ink .vsia-cap { background: var(--vsia-night); }
.vsia-cap:hover { transform: translateY(-5px); }
.vsia-cap-ic {
  width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
.vsia-cap h3 {
  margin: 22px 0 0;
  font-family: var(--font-space-grotesk), ui-sans-serif, system-ui, sans-serif;
  font-size: 17px; font-weight: 600; letter-spacing: -.01em;
}
.vsia-cap p { margin: 10px 0 0; color: var(--vsia-fog); font-size: 13.5px; line-height: 1.65; }
.vsia-tag {
  display: inline-flex; align-items: center; margin-top: 16px;
  border: 1px solid; border-radius: 999px; padding: 5px 11px;
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.vsia-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s cubic-bezier(.76, 0, .24, 1);
}
.vsia-cap:hover .vsia-bar { transform: scaleX(1); }

/* ---------- équipements d'alarme ---------- */
.vsia-equip-grid {
  margin-top: 56px;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .vsia-equip-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .vsia-equip-grid { grid-template-columns: repeat(3, 1fr); } }

.vsia-equip {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border: 1px solid;
  border-radius: 24px;
  background: var(--vsia-ink);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), border-color .35s ease;
}
.vsia-equip:hover { transform: translateY(-5px); }
.vsia-equip-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #081525;
}
.vsia-equip-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(7, 17, 31, .88) 100%);
}
.vsia-equip-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82) contrast(1.05) brightness(.88);
  transition: transform .75s cubic-bezier(.22, 1, .36, 1), filter .5s ease;
}
.vsia-equip:hover .vsia-equip-media img { transform: scale(1.045); filter: saturate(1) contrast(1.04) brightness(.98); }
.vsia-equip-no {
  position: absolute;
  right: 18px;
  top: 16px;
  z-index: 2;
  font-family: var(--font-space-grotesk), ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-shadow: 0 2px 12px #000;
}
.vsia-equip-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 24px 24px 26px; }
.vsia-equip-body h3 {
  margin: 0;
  font-family: var(--font-space-grotesk), ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.vsia-equip-body p { margin: 10px 0 18px; color: var(--vsia-fog); font-size: 13.5px; line-height: 1.65; }
.vsia-equip-body .vsia-tag { margin-top: auto; }

/* ---------- clôture de section : réserve + appel à l'action ---------- */
.vsia-cloture {
  display: grid; gap: 26px; align-items: center;
  grid-template-columns: 1fr;
  max-width: 68rem; margin: 56px auto 0;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 22px; padding: 26px 28px;
  background:
    linear-gradient(100deg, rgba(43, 140, 255, .09) 0%, rgba(0, 240, 212, .07) 100%),
    var(--vsia-ink);
}
.vsia--ink .vsia-cloture { background:
    linear-gradient(100deg, rgba(43, 140, 255, .09) 0%, rgba(0, 240, 212, .07) 100%),
    var(--vsia-night); }
@media (min-width: 900px) {
  .vsia-cloture { grid-template-columns: 1fr auto; gap: 34px; padding: 28px 32px; }
}

.vsia-cloture-texte { display: flex; gap: 14px; align-items: flex-start; }
.vsia-cloture-texte p {
  margin: 0; color: var(--vsia-fog); font-size: 13px; line-height: 1.7;
  max-width: 62ch;
}
.vsia-cloture-picto {
  flex: none; margin-top: 1px;
  width: 34px; height: 34px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  color: var(--vsia-a2);
  background: rgba(0, 240, 212, .12);
  box-shadow: 0 0 14px rgba(0, 240, 212, .18);
}
.vsia-cloture-btn { white-space: nowrap; justify-self: center; }
@media (min-width: 900px) { .vsia-cloture-btn { justify-self: end; } }

/* ---------- parcours + secteurs ---------- */
.vsia-steps { margin-top: 56px; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .vsia-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .vsia-steps { grid-template-columns: repeat(4, 1fr); } }

.vsia-step {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  height: 100%;
  border: 1px solid; border-radius: 22px; padding: 28px 26px 26px;
  background: var(--vsia-night);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.vsia-step .vsia-tag { margin-top: auto; }
.vsia-step p { margin-bottom: 18px; }
.vsia--night .vsia-step { background: var(--vsia-ink); }
.vsia-step:hover { transform: translateY(-4px); }
.vsia-step-num {
  position: absolute; right: 22px; top: 18px;
  font-family: var(--font-space-grotesk), ui-sans-serif, system-ui, sans-serif;
  font-size: 34px; font-weight: 700; line-height: 1;
}
.vsia-step-ic {
  width: 44px; height: 44px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
}
.vsia-step h3 {
  margin: 20px 0 0;
  font-family: var(--font-space-grotesk), ui-sans-serif, system-ui, sans-serif;
  font-size: 16px; font-weight: 600; letter-spacing: -.01em;
}
.vsia-step p { margin: 9px 0 0; color: var(--vsia-fog); font-size: 13px; line-height: 1.65; }

.vsia-seam { display: flex; align-items: center; gap: 18px; margin-top: 72px; }
.vsia-seam i {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
}
.vsia-seam span {
  font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--vsia-fog); white-space: nowrap;
}
.vsia-seam-h {
  margin: 26px 0 0; text-align: center;
  font-family: var(--font-space-grotesk), ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem); font-weight: 600; letter-spacing: -.015em;
  color: var(--vsia-mist);
}

.vsia-sectors { margin-top: 34px; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .vsia-sectors { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .vsia-sectors { grid-template-columns: repeat(4, 1fr); } }

.vsia-sector {
  display: flex; align-items: center; gap: 16px;
  border: 1px solid; border-radius: 18px; padding: 18px 20px;
  background: var(--vsia-night); color: inherit; text-decoration: none;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.vsia--night .vsia-sector { background: var(--vsia-ink); }
.vsia-sector:hover { transform: translateY(-3px); }
.vsia-sector-ic {
  width: 46px; height: 46px; border-radius: 14px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.vsia-sector b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -.005em; }
.vsia-sector small { display: block; margin-top: 3px; color: var(--vsia-fog); font-size: 12.5px; line-height: 1.5; }
.vsia-sector .vsia-arw { margin-left: auto; flex: none; opacity: .7; transition: transform .3s, opacity .3s; }
.vsia-sector:hover .vsia-arw { transform: translate(3px, -3px); opacity: 1; }

.vsia-cta {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: center; margin-top: 52px;
}
.vsia-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  border-radius: 999px; padding: 14px 26px;
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.vsia-btn:hover { transform: translateY(-2px); }
.vsia-btn--p { background-image: linear-gradient(100deg, var(--vsia-a1) 0%, var(--vsia-a2) 100%); color: #fff; }
.vsia-btn--g { border: 1px solid rgba(255, 255, 255, .16); color: var(--vsia-mist); }
.vsia-cta-note { width: 100%; text-align: center; color: var(--vsia-fog); font-size: 12.5px; margin: 4px 0 0; }

/* ---------- apparition au défilement ---------- */
.vsia-rev { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.vsia-rev.is-in { opacity: 1; transform: none; }

/* ---------- resserrer les blancs entre sections ----------
   Les sections du thème portent 112 px de marge en haut et en bas (144 px pour
   deux d'entre elles) : cumulées, cela fait 224 à 288 px de vide entre chaque
   bloc. On vise le sélecteur [class*="py-"] pour ne toucher QUE les sections à
   marges verticales — le hero et les sections pleine page (« Voir en couleur »)
   n'en ont pas et gardent leur composition. */
body.vsia-on main > section[class*="py-"] {
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}
@media (min-width: 768px) {
  body.vsia-on main > section[class*="py-"] {
    padding-top: 5.5rem !important;
    padding-bottom: 5.5rem !important;
  }
}

/* ---------- FAQ : garder les paires de la même hauteur ----------
   Deux colonnes alignées en haut : ouvrir une réponse creusait un trou à côté
   d'elle. Les deux cartes d'une rangée occupent maintenant toute sa hauteur. */
@media (min-width: 1024px) {
  .vsia-faq { align-items: stretch !important; }
  .vsia-faq > div { display: flex; flex-direction: column; justify-content: center; }
}
.vsia-faq-extra { justify-content: flex-start !important; }
.vsia-faq-extra button { border: 0; background: transparent; color: inherit; cursor: pointer; }
.vsia-faq-plus { flex: none; transition: transform .3s ease; }
.vsia-faq-answer[hidden] { display: none; }

/* ---------- avant-dernière section : « Explorer nos autres univers » ---------- */
.vsia-autres-kicker {
  margin: 0 0 1.4rem;
  font-size: 13px; font-weight: 500;
  letter-spacing: .25em; text-transform: uppercase;
  color: var(--color-accent-2, #00f0d4);
}

/* Les trois photos viennent de banques d'images différentes — l'une a un fond
   crème qui saute aux yeux. Une correction identique sur les trois les fait
   lire comme un jeu. */
.vsia-univers { position: relative; border: 1px solid rgba(255, 255, 255, .08); }
.vsia-univers img {
  filter: grayscale(.72) sepia(.3) hue-rotate(178deg) saturate(1.5)
          brightness(.82) contrast(1.05);
  transition: filter .7s cubic-bezier(.22, 1, .36, 1);
}
.vsia-univers:hover img { filter: brightness(1) saturate(.95) contrast(1); }

.vsia-univers-arw {
  position: absolute; right: 1rem; top: 1rem; z-index: 3;
  color: #fff; opacity: 0; transform: translateY(5px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px; padding: 9px; box-sizing: content-box;
}
.vsia-univers:hover .vsia-univers-arw,
.vsia-univers:focus-visible .vsia-univers-arw { opacity: 1; transform: none; }

/* ---------- dernière section : bloc contact ----------
   Retiré sur cette page. Il vit dans la mise en page commune, donc il reste
   affiché partout ailleurs : la classe n'est posée que sur la page
   vidéosurveillance, et retirée dès qu'on en sort. */
.vsia-contact { display: none !important; }

/* ---------- sections retirées de cette page ----------
   « Notre méthode » et « Pour qui ? » : remplacées par le bloc fusionné.
   « Nos gammes » : faisait doublon avec les caméras TP-Link juste au-dessus.
   « Explorer nos autres univers » : bloc de renvoi retiré à la demande.
   Rien n'est supprimé du thème — ces sections restent intactes sur les autres
   pages, et réapparaissent ici dès que le plugin est désactivé. Les retouches
   qui leur étaient appliquées (numérotation, duotone…) restent en place sous
   le masquage : les réafficher ne demande que de retirer leur ligne ici. */
body.vsia-on section[aria-label="Notre méthode"],
body.vsia-on section[aria-label="Pour qui ?"],
body.vsia-on section[aria-label="Nos gammes"],
body.vsia-on section[aria-label="Autres solutions"] { display: none !important; }

/* La page Alarme conserve sa maquette 3D d'origine. Les deux blocs qui la
   suivaient sont remplacés par la continuité, les équipements et la chaîne
   d'alerte construits dans le même système visuel que Vidéosurveillance. */
body.vsia-alarm section[aria-label="Scénario d'alerte"],
body.vsia-alarm section[aria-label="Autosurveillance ou télésurveillance"] { display: none !important; }

/* Garde le titre de la section visible sous l'en-tête fixe après le clic sur
   « Voir les équipements ». */
#vsia-equipements { scroll-margin-top: 7rem; }

/* ---------- fiche détaillée (fenêtre « En savoir plus ») ---------- */

/* La photo produit est en 16/10 sur plaque claire ; la colonne de la fiche est
   verticale. « cover » recadrerait la caméra, « contain » la montre entière. */
.vsia-fiche-img {
  object-fit: contain !important;
  background-color: var(--color-night, #0b1d33);
}

/* Un cran plus large : c'est ce qui manquait pour que les deux boutons
   tiennent sur une ligne sans les rapetisser. */
.vsia-fiche-panneau { max-width: 64rem !important; }

/* Une ligne seulement là où la colonne est réellement assez large : au-delà de
   1100 px, le panneau atteint sa largeur maximale et les deux boutons tiennent
   avec de la marge. En dessous, on les laisse passer à la ligne — les forcer
   les ferait déborder du panneau, ce qui serait pire. */
@media (min-width: 1100px) {
  .vsia-fiche-cta { flex-wrap: nowrap !important; gap: .6rem !important; }
  .vsia-fiche-cta > a {
    white-space: nowrap;
    padding-left: 1.15rem !important;
    padding-right: 1.15rem !important;
  }
}

/* ---------- visuels produits sur plaque claire : voile allégé ---------- */
/* Les photos TP-Link ont un fond clair : les dégradés sombres du thème
   les salissaient. On les atténue sans les supprimer (ils tiennent la
   liaison visuelle avec le bas de la carte). */
.vsia-prod .bg-gradient-to-t { opacity: .22; }

@media (prefers-reduced-motion: reduce) {
  .vsia *, .vsia-rev { transition: none !important; }
  .vsia-rev { opacity: 1; transform: none; }
}
.vsia a:focus-visible { outline: 2px solid var(--vsia-a2); outline-offset: 3px; border-radius: 8px; }