/* Carte du projet Vigil — partagée par /carte et la page d'accueil. */
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("/fonts/BarlowCondensed-Bold.ttf") format("truetype"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap; src: url("/fonts/BarlowCondensed-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 200 1000; font-display: swap; src: url("/fonts/Nunito.ttf") format("truetype"); }

.vc {
  --vc-fond: #05222A;
  --vc-encre: #F2EFE6;
  --vc-doux: rgba(242, 239, 230, .64);
  --vc-ligne: rgba(242, 239, 230, .12);
  position: relative;
  overflow: hidden;
  color: var(--vc-encre);
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: radial-gradient(120% 90% at 50% 45%, #0B3A44 0%, var(--vc-fond) 62%);
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  cursor: grab;
}
.vc.vc-glisse { cursor: grabbing; }
.vc canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vc-scene { position: absolute; inset: 0; }

/* ── Le centre ───────────────────────────────────────────── */
.vc-centre {
  position: absolute; left: 0; top: 0;
  width: 168px; height: 168px; margin: -84px 0 0 -84px;
  border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 35% 30%, #1C5560, #0A2E36 70%);
  box-shadow: 0 0 0 1px rgba(200, 195, 255, .35), 0 0 80px rgba(200, 195, 255, .28), inset 0 0 40px rgba(0, 0, 0, .35);
  color: var(--vc-encre);
}
.vc-centre img { width: 108px; height: auto; display: block; }
.vc-centre small { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #C8C3FF; }
.vc-centre::after {
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  border: 1px solid rgba(200, 195, 255, .25);
  animation: vc-respire 3.2s ease-in-out infinite;
}
@keyframes vc-respire { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.08); opacity: .35; } }

/* ── Les branches ────────────────────────────────────────── */
.vc-branche {
  position: absolute; left: 0; top: 0;
  width: 190px; margin-left: -95px; margin-top: -34px;
  padding: 12px 14px 12px 16px; border-radius: 18px; text-align: left;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 22%, rgba(8, 40, 48, .92)), rgba(8, 40, 48, .9));
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35), 0 0 30px color-mix(in srgb, var(--c) 18%, transparent);
  color: var(--vc-encre); cursor: pointer; font: inherit;
  transition: box-shadow .25s, border-color .25s;
  will-change: transform, opacity;
}
.vc-branche:hover, .vc-branche:focus-visible, .vc-branche.vc-ouverte {
  border-color: var(--c);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .45), 0 0 46px color-mix(in srgb, var(--c) 40%, transparent);
  outline: none;
}
.vc-branche b { display: block; font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: 21px; line-height: 1.05; letter-spacing: .01em; }
.vc-branche small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.3; color: var(--vc-doux); }
.vc-branche i {
  position: absolute; left: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 14px var(--c);
}

/* ── Les satellites d'une branche ouverte ────────────────── */
.vc-sat {
  position: absolute; left: 0; top: 0;
  max-width: 170px; padding: 7px 11px; border-radius: 12px;
  font-size: 12.5px; font-weight: 700; line-height: 1.25;
  background: rgba(5, 34, 42, .88); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35);
  transform-origin: center; pointer-events: none;
  transition: opacity .35s ease;
}
.vc-sat em { display: block; margin-top: 2px; font-style: normal; font-weight: 600; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; }

/* ── Le panneau de détail ───────────────────────────────── */
.vc-panneau {
  position: absolute; top: 16px; right: 16px; bottom: 16px; width: min(380px, 42%);
  padding: 26px 24px; border-radius: 24px; overflow-y: auto;
  background: rgba(6, 31, 38, .9); border: 1px solid var(--vc-ligne);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  transform: translateX(calc(100% + 30px)); opacity: 0;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .4s;
  cursor: auto; user-select: text; -webkit-user-select: text;
}
.vc-panneau.vc-visible { transform: none; opacity: 1; }
.vc-panneau h3 { font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: 34px; line-height: 1; color: var(--c); }
.vc-panneau .vc-resume { margin-top: 8px; color: var(--vc-doux); font-size: 15px; }
.vc-fermer {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--vc-ligne); background: transparent; color: var(--vc-encre); font-size: 18px; cursor: pointer;
}
.vc-chiffres { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.vc-chiffre { flex: 1 1 100px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .05); border: 1px solid var(--vc-ligne); }
.vc-chiffre b { display: block; font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: 34px; line-height: 1; color: var(--vc-encre); }
.vc-chiffre span { font-size: 12.5px; color: var(--vc-doux); }
.vc-noeuds { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.vc-noeuds li {
  padding: 13px 14px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--vc-ligne);
  opacity: 0; transform: translateY(10px); animation: vc-monte .45s forwards;
}
@keyframes vc-monte { to { opacity: 1; transform: none; } }
.vc-noeuds strong { display: block; font-size: 15px; }
.vc-noeuds p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--vc-doux); }
.vc-etat {
  display: inline-block; margin-top: 7px; padding: 2px 9px; border-radius: 99px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #05222A; background: var(--e);
}

.vc-aide {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  padding: 7px 14px; border-radius: 99px; font-size: 12.5px; color: var(--vc-doux);
  background: rgba(6, 31, 38, .7); border: 1px solid var(--vc-ligne); pointer-events: none;
  transition: opacity .4s; white-space: nowrap;
}
.vc.vc-a-ouvert .vc-aide { opacity: 0; }

@media (max-width: 720px) {
  .vc-centre { width: 116px; height: 116px; margin: -58px 0 0 -58px; }
  .vc-centre img { width: 76px; }
  .vc-branche { width: 138px; margin-left: -69px; padding: 9px 10px 9px 13px; border-radius: 14px; }
  .vc-branche b { font-size: 16px; }
  .vc-branche small { display: none; }
  .vc-panneau { top: auto; left: 10px; right: 10px; bottom: 10px; width: auto; max-height: 62%; transform: translateY(calc(100% + 20px)); }
  .vc-sat { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vc-centre::after { animation: none; }
  .vc-noeuds li { animation: none; opacity: 1; transform: none; }
}

/* ── Affiche statique (export JPG), dimensionnée sur la largeur de la fenêtre ── */
.va {
  --u: calc(100vw / 3840);
  position: relative; width: 100vw; height: calc(100vw * 2160 / 3840); overflow: hidden;
  font-family: "Nunito", system-ui, sans-serif; color: #F2EFE6;
  background: radial-gradient(70% 70% at 50% 50%, #0E3F49 0%, #05222A 70%);
}
.va svg.va-liens { position: absolute; inset: 0; width: 100%; height: 100%; }
.va-tete { position: absolute; left: calc(110 * var(--u)); top: calc(84 * var(--u)); right: calc(110 * var(--u)); display: flex; justify-content: space-between; align-items: flex-start; }
.va-tete img { height: calc(150 * var(--u)); }
.va-titre { margin-left: calc(50 * var(--u)); }
.va-titre h1 { font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: calc(96 * var(--u)); line-height: .95; margin: 0; }
.va-titre p { margin: calc(12 * var(--u)) 0 0; font-size: calc(34 * var(--u)); color: rgba(242, 239, 230, .7); max-width: calc(1500 * var(--u)); line-height: 1.35; }
.va-gauche { display: flex; align-items: center; }
.va-droite { text-align: right; font-size: calc(26 * var(--u)); color: rgba(242, 239, 230, .65); }
.va-legende { display: flex; gap: calc(14 * var(--u)); justify-content: flex-end; margin-top: calc(14 * var(--u)); }
.va-legende span { padding: calc(4 * var(--u)) calc(16 * var(--u)); border-radius: 99px; font-weight: 800; font-size: calc(20 * var(--u)); letter-spacing: .05em; text-transform: uppercase; color: #05222A; }
.va-grille {
  position: absolute; left: calc(110 * var(--u)); right: calc(110 * var(--u)); top: calc(330 * var(--u)); bottom: calc(80 * var(--u));
  display: grid; grid-template-columns: 1fr 1.02fr 1fr; gap: calc(150 * var(--u));
}
.va-col { display: flex; flex-direction: column; justify-content: space-between; gap: calc(36 * var(--u)); min-height: 0; }
.va-milieu { align-items: center; }
.va-hub {
  flex: none; width: calc(330 * var(--u)); height: calc(330 * var(--u)); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #1C5560, #0A2E36 70%);
  box-shadow: 0 0 0 calc(3 * var(--u)) rgba(200, 195, 255, .45), 0 0 calc(160 * var(--u)) rgba(200, 195, 255, .35);
}
.va-hub img { width: calc(220 * var(--u)); }
.va-carte {
  position: relative; width: 100%; box-sizing: border-box; padding: calc(30 * var(--u)) calc(34 * var(--u));
  border-radius: calc(34 * var(--u)); background: rgba(6, 31, 38, .92);
  border: calc(3 * var(--u)) solid color-mix(in srgb, var(--c) 60%, transparent);
  box-shadow: 0 calc(30 * var(--u)) calc(80 * var(--u)) rgba(0, 0, 0, .4);
}
.va-carte h2 { margin: 0; font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: calc(54 * var(--u)); line-height: 1; color: var(--c); }
.va-carte .va-res { margin-top: calc(6 * var(--u)); font-size: calc(25 * var(--u)); color: rgba(242, 239, 230, .7); }
.va-chiffres { display: flex; gap: calc(28 * var(--u)); margin-top: calc(14 * var(--u)); }
.va-chiffres b { font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: calc(48 * var(--u)); line-height: 1; }
.va-chiffres span { display: block; font-size: calc(20 * var(--u)); color: rgba(242, 239, 230, .65); }
.va-carte ul { list-style: none; margin: calc(16 * var(--u)) 0 0; padding: 0; display: grid; gap: calc(9 * var(--u)); }
.va-carte li { font-size: calc(23 * var(--u)); line-height: 1.3; color: rgba(242, 239, 230, .72); display: flex; gap: calc(12 * var(--u)); align-items: baseline; }
.va-carte li::before { content: ""; flex: none; width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; background: var(--e, var(--c)); transform: translateY(calc(-2 * var(--u))); }
.va-carte li strong { color: #F2EFE6; }