/* DELTEA site11 : SVG isométrique animé, contenu initial complet.
   Site12b : pétrole/lilas/prune par rôle, reflets transmissifs, alertes visibles.
   Mise en avant au clic retenue : groupe, contour, connexions, autres en retrait.
   Tous les sélecteurs restent dans figure.motion-diagram.
   Aucune translation des plaques, aucun changement de leur géométrie.
   Sans JS : aucune animation. Offscreen / onglet masqué : horloges CSS en pause.
*/
.motion-diagram {
  --diagram-label: var(--pierre-claire, #D8D5CE);
  --diagram-control: var(--blanc-forge, #F2F0EB);
  --diagram-muted: .28;
  --diagram-tone: var(--ardoise, #4B5563);
   /* Exploration autorisée : autre famille chromatique, pas token officiel.
      H55, S du violet x2 et L x1.15 ; repli arrondi de cette transformation. */
  --diagram-method-pigment: hsl(55 32% 49.4%);
  --diagram-alert: var(--alerte, #9B4D3A);
  /* Plus rouge demandé par Arnaud : dérivés locaux de #9B4D3A,
     pas un mélange au blanc qui tourne saumon. Replis arrondis des formules. */
  --diagram-alert-ink: rgb(226 69 65);
  --diagram-alert-peak: rgb(242 89 79);
  margin: 0;
  min-width: 0;
  max-width: 100%;
  color: inherit;
}

@supports (color: rgb(from red r g b)) {
  .motion-diagram {
    --diagram-alert-ink: rgb(from var(--diagram-alert) calc(r * 1.46) calc(g * .90) calc(b * 1.12));
    --diagram-alert-peak: rgb(from var(--diagram-alert) calc(r * 1.56) calc(g * 1.16) calc(b * 1.36));
  }
}

@supports (color: hsl(from red h s l)) {
  .motion-diagram {
    --diagram-method-pigment: hsl(from var(--ext-2, #745C7F) 55 calc(s * 2) calc(l * 1.15));
  }
}

/* Consomme le cadre de la mise en page acquise, pas une nouvelle skin du site. */
.transposition-v6 .motion-diagram {
  display: grid;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--ardoise) 10%, transparent), transparent 65%), var(--obsidienne);
  overflow: hidden;
}
.transposition-v6 .motion-diagram .motion-diagram__caption {
  margin-top: 0;
  padding: 26px 28px;
  border-top: 1px solid var(--rule);
  background: color-mix(in srgb, var(--ombre-profonde) 92%, transparent);
}
.transposition-v6 .expertise-visual.motion-diagram { border: 0; border-radius: 0; }
@media (min-width: 1000px) {
  .transposition-v6 .hero-volume .motion-diagram__caption {
    align-content: center;
    border-top: 0;
    border-left: 1px solid var(--rule);
  }
  .transposition-v6 .pillar-hero-grid > .motion-diagram { margin-top: 46px; }
}

.motion-diagram .motion-diagram__stage {
  width: 100%;
  min-width: 0;
  aspect-ratio: 720 / 440;
  isolation: isolate;
  /* Deux nappes tonales larges sous le SVG : le fond traverse le centre
     des faces, sans grille, hairlines, halo lumineux ou reflet animé. */
  background: radial-gradient(ellipse at 12% 18%, color-mix(in srgb, var(--pierre-claire, #D8D5CE) 6%, transparent), transparent 68%),
    radial-gradient(ellipse at 94% 90%, color-mix(in srgb, var(--ardoise, #4B5563) 10%, transparent), transparent 64%);
}

.motion-diagram .motion-diagram__art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.motion-diagram .motion-diagram__label {
  font-family: 'General Sans', sans-serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0;
  fill: var(--diagram-label);
}
.motion-diagram .motion-diagram__label.motion-diagram__label--compact { font-size: 20px; }

.motion-diagram .motion-diagram__icon {
  opacity: .9;
}
.motion-diagram .motion-diagram__glyph {
  /* Réduire autour du centre local 12/12, jamais le viewport SVG positionné. */
  transform: translate(12px, 12px) scale(.88) translate(-12px, -12px);
}
.motion-diagram .motion-diagram__contradiction { font-size: 22px; }

.motion-diagram .motion-diagram__question {
  font-family: 'Space Mono', monospace;
  font-size: 28px;
  font-weight: 700;
}

.motion-diagram .motion-diagram__group {
  opacity: 1;
}

.motion-diagram [data-diagram-tone='blue'] { --diagram-tone: var(--bleu-petrole, #3C6478); }
.motion-diagram [data-diagram-tone='yellow'] { --diagram-tone: var(--diagram-method-pigment); }
.motion-diagram [data-diagram-tone='rose'] { --diagram-tone: var(--prune, #6B4A5E); }
.motion-diagram [data-diagram-tone='neutral'] { --diagram-tone: var(--ardoise, #4B5563); }
.motion-diagram [data-diagram-tone] {
  --diagram-tone-ink: color-mix(in srgb, var(--diagram-tone) 58%, var(--blanc-forge, #F2F0EB));
}

.motion-diagram .motion-diagram__tint { opacity: .72; }
.motion-diagram :is(.motion-diagram__group,.motion-diagram__module[data-diagram-tone]) .motion-diagram__rim {
  stroke: var(--diagram-tone-ink);
  stroke-opacity: .48;
}
.motion-diagram .motion-diagram__group .motion-diagram__contact-edge {
  stroke: var(--diagram-tone-ink);
  stroke-opacity: .28;
}
.motion-diagram .motion-diagram__group .motion-diagram__relation {
  stroke: var(--diagram-tone-ink);
  stroke-opacity: .6;
}

.motion-diagram[data-diagram-ready='true'] :is(.motion-diagram__group,[data-diagram-context],.motion-diagram__tint) {
  transition: opacity 220ms var(--easing-doux, cubic-bezier(.22, 1, .36, 1));
}
.motion-diagram[data-diagram-ready='true'] :is(.motion-diagram__rim,.motion-diagram__relation,.motion-diagram__contact-edge) {
  transition: stroke 220ms ease, stroke-opacity 220ms ease, stroke-width 220ms ease;
}

.motion-diagram .motion-diagram__group[data-diagram-emphasis='muted'] {
  opacity: var(--diagram-muted);
}
.motion-diagram[data-diagram-selection] [data-diagram-context] { opacity: .34; }

/* Une sélection porte sur le sous-système, pas seulement sur son bouton.
   Face translucide + filet + relations ; aucune dilatation ou hausse de plaque. */
.motion-diagram .motion-diagram__group[data-diagram-emphasis='selected'] .motion-diagram__tint { opacity: .96; }
.motion-diagram .motion-diagram__group[data-diagram-emphasis='selected'] .motion-diagram__rim {
  stroke: var(--diagram-tone-ink);
  stroke-opacity: 1;
  stroke-width: 1.5;
}
.motion-diagram .motion-diagram__group[data-diagram-emphasis='selected'] .motion-diagram__contact-edge {
  stroke: var(--diagram-tone-ink);
  stroke-opacity: .8;
  stroke-width: 1.2;
}
.motion-diagram .motion-diagram__group[data-diagram-emphasis='selected'] .motion-diagram__relation {
  stroke: color-mix(in srgb, var(--diagram-tone-ink) 72%, var(--blanc-forge, #F2F0EB));
  stroke-opacity: 1;
  stroke-width: 1.5;
}
.motion-diagram .motion-diagram__group[data-diagram-emphasis='selected'] .motion-diagram__perimeter {
  stroke: var(--diagram-tone-ink);
  stroke-opacity: .95;
  stroke-width: 1.3;
}
.motion-diagram .motion-diagram__group[data-diagram-emphasis='selected'] .motion-diagram__label { fill: var(--blanc-forge, #F2F0EB); }
.motion-diagram .motion-diagram__group[data-diagram-emphasis='selected'] .motion-diagram__icon { opacity: 1; }
.motion-diagram .motion-diagram__group[data-diagram-emphasis='selected'] :is(.motion-diagram__missing,.motion-diagram__fragility-outline) {
  stroke-opacity: 1;
  stroke-width: inherit;
}

.motion-diagram .motion-diagram__relation,
.motion-diagram .motion-diagram__perimeter {
  vector-effect: non-scaling-stroke;
}

.motion-diagram .motion-diagram__signal {
  opacity: 0;
  stroke-dasharray: 7 100;
  stroke-dashoffset: 7;
  vector-effect: non-scaling-stroke;
}

.motion-diagram .motion-diagram__alert {
  opacity: 1;
  color: var(--diagram-alert-ink);
  stroke-width: 2.4px;
}
.motion-diagram :is(.motion-diagram__cut,.motion-diagram__missing,.motion-diagram__fragility-outline) {
  stroke: currentColor;
  stroke-opacity: 1;
}
.motion-diagram .motion-diagram__alert :is(.motion-diagram__missing,.motion-diagram__fragility-outline) { stroke-width: inherit; }
.motion-diagram .motion-diagram__group .motion-diagram__alert .motion-diagram__label {
  fill: currentColor;
}

.motion-diagram[data-diagram-ready='true'] .motion-diagram__signal {
  animation: deltea-diagram-relation 12s linear infinite;
  animation-play-state: paused;
}

.motion-diagram[data-diagram-ready='true'] .motion-diagram__alert {
  animation: deltea-diagram-alert 3.2s ease-in-out infinite;
  animation-play-state: paused;
}

.motion-diagram[data-diagram-ready='true'] .motion-diagram__signal--first { animation-delay: -1.8s; }
.motion-diagram[data-diagram-ready='true'] .motion-diagram__signal--second { animation-delay: -5.2s; }
.motion-diagram[data-diagram-ready='true'] .motion-diagram__signal--third { animation-delay: -8.4s; }
.motion-diagram[data-diagram-ready='true'] .motion-diagram__signal--fourth { animation-delay: -10.3s; }
.motion-diagram[data-diagram-ready='true'] .motion-diagram__signal--fifth { animation-delay: -3.6s; }

.motion-diagram[data-diagram-state='active'] .motion-diagram__signal,
.motion-diagram[data-diagram-state='active'] .motion-diagram__alert {
  animation-play-state: running;
}

.motion-diagram .motion-diagram__group[data-diagram-emphasis='muted'] .motion-diagram__signal,
.motion-diagram .motion-diagram__group[data-diagram-emphasis='muted'] .motion-diagram__alert {
  animation-play-state: paused;
}

.motion-diagram[data-diagram-state='offscreen'] *,
.motion-diagram[data-diagram-state='hidden'] * {
  transition: none !important;
}

.motion-diagram[data-diagram-state='static'] *,
.motion-diagram[data-diagram-state='static'] *::before,
.motion-diagram[data-diagram-state='static'] *::after,
[data-diagram-motion='off'] .motion-diagram *,
[data-diagram-motion='off'] .motion-diagram *::before,
[data-diagram-motion='off'] .motion-diagram *::after,
.motion-diagram[data-diagram-motion='off'] *,
.motion-diagram[data-diagram-motion='off'] *::before,
.motion-diagram[data-diagram-motion='off'] *::after {
  animation: none !important;
  transition: none !important;
  /* Les attributs transform du SVG construisent le plan et restent intacts. */
}

.motion-diagram .motion-diagram__caption {
  margin-top: clamp(12px, 2vw, 24px);
  display: grid;
  gap: 12px;
  font-family: 'General Sans', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.motion-diagram .motion-diagram__title {
  margin: 0;
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(20px, 1.8vw, 25px);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: .005em;
  color: inherit;
}

.motion-diagram .motion-diagram__caption p:not(.motion-diagram__title) {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: inherit;
}

.motion-diagram .motion-diagram__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.motion-diagram .motion-diagram__choices [data-diagram-focus] {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 14px;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--pierre-claire, #D8D5CE) 34%, transparent);
  border-radius: var(--rayon-controle, 3px);
  background: transparent;
  color: inherit;
  font: 500 16px/1.45 'General Sans', sans-serif;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: none;
  transform: none;
  transition: none;
  touch-action: manipulation;
}

.motion-diagram[data-diagram-ready='true'] .motion-diagram__choices [data-diagram-focus] {
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.motion-diagram .motion-diagram__choices [data-diagram-focus][aria-pressed='true'] {
  border-color: var(--diagram-tone-ink);
  background: color-mix(in srgb, var(--diagram-tone) 24%, transparent);
  color: var(--blanc-forge, #F2F0EB);
  box-shadow: inset 3px 0 0 var(--diagram-tone-ink);
}

.motion-diagram .motion-diagram__choices [data-diagram-focus]::before,
.motion-diagram .motion-diagram__legend [data-diagram-static-key]::before {
  content: '';
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 2px;
  background: var(--diagram-tone-ink);
  opacity: .85;
}
.motion-diagram .motion-diagram__choices [data-diagram-focus][aria-pressed='true']::before { opacity: 1; }
.motion-diagram .motion-diagram__legend {
  display: none;
  flex-wrap: wrap;
  gap: 8px 16px;
  font: 400 14px/1.5 'General Sans', sans-serif;
}
.motion-diagram .motion-diagram__legend [data-diagram-static-key] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.motion-diagram .motion-diagram__choices [data-diagram-focus]:focus-visible {
  outline: 2px solid var(--diagram-control);
  outline-offset: 4px;
}

.motion-diagram .motion-diagram__choices [data-diagram-focus]:disabled {
  cursor: default;
  opacity: .65;
}

@media (hover: hover) {
  .motion-diagram .motion-diagram__choices [data-diagram-focus]:not(:disabled):hover {
    border-color: var(--diagram-control);
    background: color-mix(in srgb, var(--pierre-claire, #D8D5CE) 10%, transparent);
  }
  .motion-diagram .motion-diagram__choices [data-diagram-focus][aria-pressed='true']:hover {
    border-color: var(--diagram-tone-ink);
    background: color-mix(in srgb, var(--diagram-tone) 30%, transparent);
  }
}

@media (max-width: 480px) {
  .motion-diagram .motion-diagram__caption { gap: 10px; }
  .motion-diagram .motion-diagram__caption p:not(.motion-diagram__title) { font-size: 14px; line-height: 1.5; }
  .motion-diagram .motion-diagram__choices { gap: 6px; }
  .motion-diagram .motion-diagram__choices [data-diagram-focus] { padding-inline: 11px; }
}

/* Mobile : conserver les noms, renforcer les indices qui portent le sens,
   plutôt que réduire toutes les pièces comme une miniature desktop. */
@media (max-width: 767px) {
  .motion-diagram .motion-diagram__label { font-size: 22px; }
  .motion-diagram .motion-diagram__icon { opacity: 1; }
  .motion-diagram .motion-diagram__glyph { transform: none; }
  .motion-diagram .motion-diagram__contradiction { font-size: 26px; }
  .motion-diagram .motion-diagram__question { font-size: 34px; }
  .motion-diagram .motion-diagram__missing { stroke-width: inherit; stroke-opacity: 1; }
  .motion-diagram .motion-diagram__perimeter { stroke-opacity: .52; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-diagram *,
  .motion-diagram *::before,
  .motion-diagram *::after {
    animation: none !important;
    transition: none !important;
  }
}

@keyframes deltea-diagram-relation {
  0%, 9% { stroke-dashoffset: 7; opacity: 0; }
  12% { opacity: .9; }
  53% { stroke-dashoffset: -93; opacity: .9; }
  58%, 100% { stroke-dashoffset: -100; opacity: 0; }
}

@keyframes deltea-diagram-alert {
  0%, 100% { color: var(--diagram-alert-ink); stroke-width: 2px; }
  50% { color: var(--diagram-alert-peak); stroke-width: 3.8px; }
}