/* Visuel « entraînement du modèle » (page modele-entreprise.html, section Trois leviers).
   Panneau sombre posé dans la section claire ; jetons du site seulement. */
.ve { margin: clamp(48px, 7vw, 104px) 0 0; padding: clamp(24px, 4vw, 64px); border-radius: var(--rayon-panneau);
  background: radial-gradient(ellipse 60% 70% at 26% 58%, color-mix(in srgb, #2a8a96 26%, transparent), transparent 70%), var(--fond);
  color: var(--texte); overflow: hidden; }
.ve__tete { display: grid; gap: var(--e-3); max-width: 46rem; }
.ve__sur { color: var(--accent); }
.ve__titre { margin: 0; font-family: var(--police-titres); font-size: clamp(1.5rem, calc(1rem + 1.6vw), 2.5rem); line-height: 1.15; overflow-wrap: break-word; hyphens: manual; }
.ve__scene { position: relative; display: grid; gap: clamp(24px, 4vw, 40px); margin-top: clamp(24px, 4vw, 48px); }
.ve__modele { display: grid; justify-items: center; gap: var(--e-3); min-width: 0; }
.ve-cube { display: block; width: 100%; max-width: 640px; height: auto; overflow: visible; }
.ve__nom-modele { margin: 0; font-family: var(--police-donnees); font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--texte-doux); text-align: center; }
.ve__exemples { display: grid; gap: var(--e-3); min-width: 0; }
.ve__cap { margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--police-interface); font-weight: 600; font-size: 1rem; color: var(--accent); }
.ve__cap::before { content: ""; width: 10px; height: 10px; border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); margin-top: 4px; flex: none; }
.ve__cartes { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.ve-carte { position: relative; display: grid; gap: 7px; padding: 18px 20px 20px; min-width: 0; border-radius: var(--rayon);
  background: #FDFDFC; color: #21201C; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 10px 30px rgb(0 0 0 / 0.28); }
.ve-carte__titre { margin: 0 0 2px; font-family: var(--police-titres); font-size: clamp(1.0625rem, calc(0.9rem + 0.35vw), 1.25rem); line-height: 1.2; overflow-wrap: break-word; }
.ve-carte__lib { margin: 0; font-family: var(--police-interface); font-size: 0.875rem; font-weight: 600; color: #63635E; line-height: 1.3; }
.ve-carte__lib--sortie { margin-top: 4px; color: #2F5A0C; }
.ve-carte__lignes { display: grid; gap: 7px; }
.ve-carte__lignes i { display: block; width: var(--w); height: 7px; border-radius: 999px; background: #C3C6C2; }
.ve-carte__lignes--sortie i { background: color-mix(in srgb, var(--accent) 78%, #5d8a1c); }
.ve__leg { margin-top: clamp(24px, 3vw, 40px); max-width: 60ch; color: var(--texte-doux); font-size: var(--t-s, 0.9375rem); }

/* Téléphone large : deux colonnes de cartes sous le cube */
@media (min-width: 560px) and (max-width: 999px) { .ve__cartes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 999px) { .ve-cube { max-width: 420px; } }

/* Écran large : cube à gauche, cartes à droite reliées au cube par un pointillé fléché */
@media (min-width: 1000px) {
  .ve__scene { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 0; }
  .ve__exemples { padding-left: clamp(36px, 5vw, 96px); }
  .ve__cap::before { display: none; }
}
@media (min-width: 1800px) { .ve-cube { max-width: 760px; } }
.ve__liens { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; display: none; }
.ve__liens path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 7 6; opacity: 0.9; }
.ve__liens .ve__pointe { fill: var(--accent); stroke: none; stroke-dasharray: none; opacity: 1; }
.ve__liens circle { fill: var(--accent); }
@media (min-width: 1000px) { .ve__liens { display: block; } }

/* Transfert de données (animé seulement si .ve--anime, posé par le script : visible, onglet actif, mouvement permis). */
.ve__liens .ve__paquet { fill: var(--accent); filter: drop-shadow(0 0 4px var(--accent)) drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 60%, transparent)); }
.ve-carte { transition: box-shadow 500ms var(--courbe, ease), transform 500ms var(--courbe, ease); }
.ve-carte__lignes--sortie i { transition: filter 500ms var(--courbe, ease), box-shadow 500ms var(--courbe, ease); }
.ve-cube { filter: drop-shadow(0 0 calc(var(--ve-pulse, 0) * 18px) color-mix(in srgb, var(--accent) 45%, transparent)); }
@media (prefers-reduced-motion: no-preference) {
  .ve--anime .ve__liens .ve__fil { animation: ve-marche 1.1s linear infinite; }
  .ve--anime .ve-carte--envoi { box-shadow: 0 0 0 2px var(--accent), 0 10px 34px color-mix(in srgb, var(--accent) 22%, rgb(0 0 0 / 0.3)); }
  .ve--anime .ve-carte--envoi .ve-carte__lignes--sortie i { filter: brightness(1.15) saturate(1.2); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent); }
}
@keyframes ve-marche { to { stroke-dashoffset: -26; } }
@media (prefers-reduced-motion: reduce) { .ve-cube { filter: none; } .ve__liens .ve__paquet { display: none; } }

/* Le vert des fiches : barres de sortie atténuées au repos, qui se remplissent de gauche à droite à l’envoi. */
.ve-carte__lignes--sortie i { position: relative; overflow: hidden; }
.ve-carte__lignes--sortie i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform: scaleX(0); transform-origin: left center; }
.ve-carte__lib--sortie { justify-self: start; padding: 1px 6px; margin-left: -6px; border-radius: 6px; transition: background-color 400ms ease, color 400ms ease; }
@media (prefers-reduced-motion: no-preference) {
  .ve--anime .ve-carte__lignes--sortie i { opacity: 0.45; transition: opacity 450ms ease, box-shadow 450ms ease; }
  .ve--anime .ve-carte__lignes--sortie i::after { transition: transform 300ms ease; }
  .ve--anime .ve-carte--envoi .ve-carte__lignes--sortie i { opacity: 1; filter: none; box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 75%, transparent); }
  .ve--anime .ve-carte--envoi .ve-carte__lignes--sortie i::after { transform: scaleX(1); transition: transform 550ms cubic-bezier(.2,.7,.2,1); }
  .ve--anime .ve-carte--envoi .ve-carte__lignes--sortie i:nth-child(2)::after { transition-delay: 120ms; }
  .ve--anime .ve-carte--envoi .ve-carte__lib--sortie { background: color-mix(in srgb, var(--accent) 55%, transparent); color: #1B3306; }
}