/* 3D'Clypse Tuning « Couche par couche » 2026-10-24 : pages de service. Base DJI (air, rayons) recalée sur la charte 3D'Clypse. */
:root {
  --tcl-orange: #f26b2b;
  --tcl-marine: #0a1628;
  --tcl-pas: 7px;
  --tcl-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Hero : plateau d'impression */
.tcl-hero { overflow: hidden; isolation: isolate; }
.tcl-plateau { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0 !important; pointer-events: none; }
.tcl-ligne, .tcl-buse { position: absolute !important; left: 0; top: 0; z-index: 0 !important; pointer-events: none; opacity: 0; will-change: transform; }
.tcl-ligne { width: 100%; height: 1.4px; background: linear-gradient(90deg, transparent 0 45%, rgba(255, 255, 255, .42) 78%); }
.tcl-buse { width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle, #fff 0 2.5px, rgba(242, 107, 43, .85) 3px, rgba(242, 107, 43, 0) 26px); }
.tcl-couche {
  position: absolute !important; right: 20px; top: 16px; z-index: 1;
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55); padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
  background: rgba(10, 22, 40, .6); pointer-events: none;
}
.tcl-couche::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--tcl-orange); box-shadow: 0 0 8px var(--tcl-orange); vertical-align: 1px; }
.tcl-profondeur { will-change: transform; transform-style: preserve-3d; }
.tcl-aimant { transition: transform .35s var(--tcl-ease), background-color .2s, color .2s; will-change: transform; }

/* Titres mot par mot */
.tcl-split .tcl-m { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.tcl-split .tcl-mi { display: inline-block; transform: translateY(105%); transition: transform .8s var(--tcl-ease); }
.tcl-split.tcl-vu .tcl-mi { transform: none; }

/* Cartes : les couches montent au survol */
.tcl-carte { overflow: hidden; isolation: isolate; }
.tcl-carte > * { position: relative; z-index: 1; }
.tcl-carte > .tcl-strates {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(to top, rgba(242, 107, 43, .13) 0 1px, transparent 1px var(--tcl-pas));
  transform: scaleY(0); transform-origin: bottom; transition: transform .9s steps(16, end);
}
.tcl-carte > .tcl-strates::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--tcl-orange), transparent); opacity: 0; transition: opacity .3s;
}
@media (hover: hover) {
  .tcl-carte:hover > .tcl-strates { transform: scaleY(1); }
  .tcl-carte:hover > .tcl-strates::after { opacity: .8; }
}
.tcl-carte.tcl-plein > .tcl-strates { transform: scaleY(1); }

/* Process : trajet de buse */
.tcl-process > :not(.tcl-trajet) { position: relative; z-index: 1; }
.tcl-trajet { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
.tcl-t-base { fill: none; stroke: rgba(10, 22, 40, .14); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.tcl-t-fait { fill: none; stroke: var(--tcl-orange); stroke-width: 2.5; stroke-linecap: round; }
.tcl-t-buse { fill: var(--tcl-orange); filter: drop-shadow(0 0 6px rgba(242, 107, 43, .9)); }
.tcl-process > * { transition: transform .5s var(--tcl-ease); }
.tcl-process > .tcl-on [class*=icon], .tcl-process > .tcl-on [class*=num], .tcl-process > .tcl-on [class*=day] {
  box-shadow: 0 0 0 4px rgba(242, 107, 43, .18), 0 8px 24px rgba(242, 107, 43, .28); transition: box-shadow .4s;
}

@media (max-width: 640px) { .tcl-couche { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .tcl-split .tcl-mi { transform: none; transition: none; }
  .tcl-carte > .tcl-strates { transition: none; }
}