/* ==========================================================================
   TUBFLEX — Schémas techniques interactifs (flexible sur mesure & vérins)
   Panneaux bleu marine, trame blueprint, dimensions rouges, animations
   séquencées déclenchées à l'entrée dans le viewport.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Panneau technique générique
   -------------------------------------------------------------------------- */
/* Sections à schéma : les deux colonnes partagent exactement la même
   hauteur, bord haut et bord bas alignés. Le cadre du schéma absorbe
   la hauteur restante et centre le dessin. */
.split--tech { align-items: stretch; }

.split > .tech-panel {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
/* la bascule reste une pastille compacte : sans cela, l'étirement du
   conteneur flex lui donnait toute la largeur du panneau */
.split > .tech-panel > .tech-toggle { align-self: flex-start; }

.split > .tech-panel > .tech-frame > .tech-insets { flex: 1 1 auto; }

.split > .tech-panel > .tech-frame {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 1.1rem;
  min-height: 0;
}

.tech-panel {
  position: relative;
  background: var(--navy-deep);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-l);
  overflow: hidden;
  color: #dbe6f2;
}

.tech-frame {
  position: relative;
  background:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px),
    radial-gradient(700px 300px at 70% 0%, #0f3a6e 0%, var(--navy-deep) 60%);
  background-size: 36px 36px, 36px 36px, cover;
  padding: 3rem 1.2rem .6rem;
}

.tech-frame .diagram { width: 100%; height: auto; }

.tech-caption {
  position: absolute;
  top: .9rem;
  left: 1.2rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7fa6d4;
}
.tech-caption::before { content: ""; width: 1.4rem; height: 2px; background: var(--red); }

.tech-replay {
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: #b9c9dc;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  padding: .42rem .85rem;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.tech-replay:hover { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .35); }
.tech-replay svg { width: .9rem; height: .9rem; }

/* --------------------------------------------------------------------------
   2. Progression + bascule + puces de spécifications
   -------------------------------------------------------------------------- */
.tech-progress {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: 1rem 1.2rem 1.25rem;
  margin: 0;
  counter-reset: tp;
}
.tech-progress li {
  counter-increment: tp;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 600;
  color: #8ba3c0;
  padding: .4rem .8rem .4rem .5rem;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  transition: color .3s, border-color .3s, background .3s;
}
.tech-progress li::before {
  content: counter(tp, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: .66rem;
  font-weight: 800;
  color: #8ba3c0;
  background: rgba(255, 255, 255, .08);
  border-radius: 999px;
  padding: .2rem .45rem;
  transition: inherit;
}
.tech-progress li.is-active { color: #fff; border-color: var(--red); background: rgba(200, 16, 46, .16); }
.tech-progress li.is-active::before { background: var(--red); color: #fff; }
.tech-progress li.is-done { color: #b9c9dc; border-color: rgba(255, 255, 255, .22); }
.tech-progress li.is-done::before { background: #fff; color: var(--navy); }

.tech-toggle {
  display: inline-flex;
  gap: .25rem;
  margin: .95rem 1.2rem 0;
  padding: .25rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
}
.tech-panel > .tech-toggle:last-child { margin-bottom: 1.25rem; }
.tech-toggle button {
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #8ba3c0;
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: .5rem 1.1rem;
  cursor: pointer;
  transition: background .25s, color .25s;
}
.tech-toggle button[aria-pressed="true"] { background: var(--red); color: #fff; box-shadow: 0 4px 12px rgba(200, 16, 46, .4); }

/* --------------------------------------------------------------------------
   3. Cartes d'encarts (coupe DN, rayon Rmin, orientation α)
   -------------------------------------------------------------------------- */
/* Encarts en lignes : dans une colonne haute, trois bandeaux
   icône + libellé occupent la hauteur bien mieux que trois colonnes
   étroites, et le texte tient sur deux lignes au lieu de cinq. */
.tech-insets {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: .7rem;
  padding: 1rem 1.2rem 1.3rem;
}
.inset-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.1rem;
  margin: 0;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-s);
  padding: .9rem 1rem;
  min-width: 0;
}
.inset-card svg {
  flex: 0 0 auto;
  width: 5.25rem;
  height: auto;
  max-height: 100%;
}
.inset-card figcaption {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-display);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: #fff;
  text-align: left;
}
.inset-card figcaption { font-size: .84rem; }
.inset-card figcaption small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0;
  color: #8ba3c0;
  font-size: .7rem;
  margin-top: .1rem;
}

/* --------------------------------------------------------------------------
   4. Animation — états initiaux « armés »
   Sans classe : tout est visible (statique, no-JS, impression).
   .is-armed : états de départ cachés, en attendant .is-playing.
   -------------------------------------------------------------------------- */
.is-armed .anim-hose-body,
.is-armed .anim-fit-a,
.is-armed .anim-fit-b,
.is-armed .anim-grooves,
.is-armed .anim-glow,
.is-armed .anim-dim,
.is-armed .anim-dim-label,
.is-armed .anim-inset,
.is-armed .anim-cyl-body,
.is-armed .anim-port-a,
.is-armed .anim-port-b,
.is-armed .anim-flow,
.is-armed .anim-ghost,
.is-armed .anim-dims-c,
.is-armed .anim-oil,
.is-armed .anim-oil-stream {
  opacity: 0;
}

/* --------------------------------------------------------------------------
   5. Animation — flexible (≈ 5 s)
   -------------------------------------------------------------------------- */
@keyframes hoseGrow {
  from { opacity: 1; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}
@keyframes slideInL {
  from { opacity: 0; transform: translateX(-72px); }
  30%  { opacity: 1; }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInR {
  from { opacity: 0; transform: translateX(72px); }
  30%  { opacity: 1; }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes crimp {
  0%   { opacity: 1; transform: scaleY(1); }
  40%  { opacity: 1; transform: scaleY(.9); }
  100% { opacity: 1; transform: scaleY(1); }
}
@keyframes glowPulse {
  0%   { opacity: 0; }
  35%  { opacity: .85; }
  100% { opacity: 0; }
}
@keyframes dimDraw {
  from { opacity: 1; stroke-dashoffset: 706; }
  to   { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.is-playing .anim-hose-body { animation: hoseGrow .7s var(--ease) both; }
.is-playing .anim-fit-a    { animation: slideInL .55s var(--ease) .7s both; }
.is-playing .anim-fit-b    { animation: slideInR .55s var(--ease) .7s both; }
.is-playing .anim-ferrule  { animation: crimp .5s var(--ease) 1.35s both; }
.is-playing .anim-grooves  { animation: fadeIn .35s ease 1.5s both; }
.is-playing .anim-glow     { animation: glowPulse 1s ease 1.95s both; }
.is-playing .anim-dim      { animation: dimDraw .9s var(--ease) 2.6s both; }
.is-playing .anim-dim-label { animation: fadeIn .5s ease 3.2s both; }
.is-playing .anim-inset-1  { animation: fadeUp .5s var(--ease) 3.5s both; }
.is-playing .anim-inset-2  { animation: fadeUp .5s var(--ease) 3.9s both; }
.is-playing .anim-inset-3  { animation: fadeUp .5s var(--ease) 4.3s both; }

.anim-hose-body, .anim-fit-a, .anim-fit-b, .anim-ferrule {
  transform-box: fill-box;
}
.anim-hose-body { transform-origin: center; }
.anim-ferrule   { transform-origin: center; }

/* --------------------------------------------------------------------------
   6. Animation — vérin (≈ 8,6 s)
   -------------------------------------------------------------------------- */
@keyframes cylBodyIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes rodTravel {
  0%    { transform: translateX(0); }     /* rétracté */
  12%   { transform: translateX(0); }
  29%   { transform: translateX(200px); } /* sortie */
  55%   { transform: translateX(200px); } /* maintien + cotes */
  72%   { transform: translateX(0); }     /* inversion / rentrée */
  80%   { transform: translateX(0); }
  96%   { transform: translateX(200px); } /* retour au repos sorti */
  100%  { transform: translateX(200px); }
}
@keyframes oilStream {
  from { opacity: .45; stroke-dashoffset: 120; }
  to   { opacity: .45; stroke-dashoffset: 0; }
}
@keyframes ghostIn {
  from { opacity: 0; }
  to   { opacity: .55; }
}
@keyframes portPulse {
  0%   { opacity: 1; transform: scale(1); }
  50%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes flowInA  { from { opacity: 1; stroke-dashoffset: 240; } to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes flowOutB { from { opacity: 1; stroke-dashoffset: -240; } to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes flowInB  { from { opacity: 1; stroke-dashoffset: 240; } to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes flowOutA { from { opacity: 1; stroke-dashoffset: -240; } to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes dimDrawC { from { opacity: 1; stroke-dashoffset: 208; } to { opacity: 1; stroke-dashoffset: 0; } }

.is-playing .anim-cyl-body { animation: cylBodyIn .7s var(--ease) both; }
.is-playing .anim-rod      { animation: rodTravel 8.6s cubic-bezier(.45, .05, .35, 1) .8s both; }
.is-playing .anim-ghost    { animation: ghostIn .6s ease 3.4s both; }
.is-playing .anim-oil-stream { animation: oilStream 1.6s linear .9s infinite; }
.is-playing .anim-port-a   { animation: portPulse .6s ease .9s both; }
.is-playing .anim-port-b   { animation: portPulse .6s ease 5.6s both; }
.is-playing .anim-flow-a-in  { animation: flowInA 2.2s linear 1s both; }
.is-playing .anim-flow-b-out { animation: flowOutB 2.2s linear 1s both; }
.is-playing .anim-flow-b-in  { animation: flowInB 2.2s linear 5.7s both; }
.is-playing .anim-flow-a-out { animation: flowOutA 2.2s linear 5.7s both; }
.is-playing .anim-dim-c      { animation: dimDrawC .8s var(--ease) 3.8s both; }
.is-playing .anim-dims-c     { animation: fadeIn .6s ease 4.4s both; }

.anim-rod { transform-box: fill-box; }
/* l'huile se dilate depuis le fond de chambre, comme le volume réel */
.anim-oil-stream { stroke-dasharray: 26 34; }
/* mode pneumatique : de l'air, donc pas d'huile */
.mode-pneu .anim-oil, .mode-pneu .anim-oil-stream { display: none; }
.anim-port-a, .anim-port-b { transform-box: fill-box; transform-origin: center; }

/* Flux : tirets animés ; en mode pneumatique, flux plus léger et rapide */
.anim-flow { fill: none; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 12 10; }
.flow-a { stroke: #e5484d; }
.flow-b { stroke: #6aa9e8; }
.mode-pneu .anim-flow { stroke-width: 4; stroke-dasharray: 4 12; opacity: .8; }

/* --------------------------------------------------------------------------
   7. Annotations responsives à l'intérieur des SVG
   -------------------------------------------------------------------------- */
.anno-m { display: none; }
@media (max-width: 767px) {
  .anno-d { display: none; }
  .anno-m { display: block; }
}

/* --------------------------------------------------------------------------
   8. Panneau — responsive
   -------------------------------------------------------------------------- */
/* Cibles tactiles : les commandes du schéma passent à 44 px sur écran
   sans survol (doigt), pastille « Rejouer » et bascule comprises. */
@media (hover: none), (max-width: 900px) {
  .tech-replay { min-height: 44px; }
  .tech-toggle button { min-height: 44px; }
}

@media (max-width: 900px) {
  .split .tech-panel { order: 2; }          /* mobile : texte d'abord, visuel ensuite */
  .tech-insets {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .6rem;
    scrollbar-width: thin;
  }
  .inset-card { flex: 0 0 88%; scroll-snap-align: start; }
  .inset-card svg { width: 4rem; }
}
@media (max-width: 620px) {
  /* le libellé passe sur deux lignes en dessous de 620 px : on réserve la place */
  .tech-frame { padding: 4.5rem .8rem .4rem; }
  .tech-caption { max-width: calc(100% - 8.5rem); font-size: .62rem; letter-spacing: .1em; }
  .tech-progress { padding-inline: .8rem; }
  .tech-toggle { margin-inline: .8rem; }
}

/* --------------------------------------------------------------------------
   9. Mouvement réduit : état final complet, sans mouvement
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tech-panel *,
  .tech-panel *::before,
  .tech-panel *::after {
    animation: none !important;
    transition: none !important;
  }
  .anim-flow { opacity: 0 !important; }
  .anim-ghost { opacity: .55; }
}