/* ---- Sécurité page-specific (same pattern as déploiement) ---- */
.steps { grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: start; }
.step__top {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px clamp(16px, 2vw, 24px);
  padding-bottom: 10px;
}
.step__visual {
  flex-shrink: 0; width: 72px; height: 72px;
  border-radius: 16px; background: var(--rose);
  display: grid; place-items: center;
}
.step__visual svg { width: 36px; height: 36px; color: var(--red); }
.step__body ul { padding-left: 0; list-style-position: inside; }
.step__body li { margin-top: 4px; }
@media (max-width: 768px) {
  .step__body {
    max-height: none; opacity: 1;
    padding: 4px clamp(22px, 2.5vw, 32px) clamp(22px, 2.5vw, 32px);
  }
}
@media (max-width: 920px) {
  .steps { grid-template-columns: 1fr !important; }
}
/* EDR dark glass cards */
.step--edr {
  border-color: transparent;
  background: rgba(125, 24, 3, 0.35);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---- Stacked Cards 3D ---- */
@keyframes cardIn {
  from { opacity: 0; transform: rotateY(30deg) translateX(-60px); }
  to   { opacity: 1; transform: rotateY(30deg) translateX(0); }
}
.stacked-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(10px, 2vw, 20px) 0 clamp(50px, 7vw, 90px);
}
.stacked-scene {
  position: relative;
  width: 520px;
  height: 220px;
  perspective: 1400px;
  zoom: 1.8;
}
.scard {
  position: absolute;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  animation: cardIn 1s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease, opacity 0.25s ease;
  border: 1px solid rgba(255,255,255,0.15);
  transform: rotateY(30deg);
}
.scard:hover {
  transform: rotateY(0deg) translateZ(80px) translateY(-6px) scale(1.15) !important;
  z-index: 10 !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45) !important;
}
.stacked-scene:hover .scard {
  filter: blur(3px);
  opacity: 0.55;
}
.stacked-scene:hover .scard:hover {
  filter: none;
  opacity: 1;
}
.scard__title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
}
.scard__sub {
  font-size: 12px;
  color: #fff;
  margin-top: 3px;
  line-height: 1.55;
}
.scard--1 {
  left: 0; top: 32px;
  width: 154px; height: 183px;
  background: rgba(125, 24, 3, 0.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation-delay: 0s;
  z-index: 1;
}
.scard--2 {
  left: 105px; top: 42px;
  width: 154px; height: 183px;
  background: rgba(110, 13, 2, 0.45);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation-delay: 0.3s;
  z-index: 2;
}
.scard--3 {
  left: 214px; top: 52px;
  width: 154px; height: 183px;
  background: rgba(131, 27, 6, 0.45);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation-delay: 0.6s;
  z-index: 3;
}
.scard--4 {
  left: 315px; top: 62px;
  width: 154px; height: 183px;
  background: rgba(110, 13, 2, 0.45);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  animation-delay: 0.9s;
  z-index: 4;
}
@media (max-width: 920px) {
  .stacked-scene { zoom: 0.75; margin: -40px auto; }
}
@media (max-width: 560px) {
  .stacked-wrap { padding: clamp(30px, 4vw, 50px) 0; }
  .stacked-scene {
    zoom: 1;
    perspective: none;
    width: 100%;
    max-width: 360px;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .scard {
    position: static;
    left: auto; top: auto;
    width: 100%; height: auto;
    min-height: 0;
    transform: none !important;
    animation: none;
    opacity: 1;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: 16px 18px;
  }
  .scard:hover {
    transform: none !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
  }
  .stacked-scene:hover .scard { filter: none; opacity: 1; }
  .scard__title { font-size: 16px; }
  .scard__sub { font-size: 13px; margin-top: 5px; }
}
.step--edr .step__num { color: rgba(255,255,255,.25); opacity: 1; }
.step--edr .step__visual { background: rgba(255,255,255,.1); }
.step--edr .step__visual svg { color: #fff; }
.step--edr .step__info h3 { color: #fff; }
.step--edr .step__body p, .step--edr .step__body ul { color: var(--text-on-dark); }
.steps--3 { grid-template-columns: repeat(3, 1fr); }
.steps--3 .step { min-height: 120px; }
.steps--3 .step__info h3 { min-height: 4em; }
@media (max-width: 920px) { .steps--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps--3 { grid-template-columns: 1fr; } }

/* ---- Hero dark variant + cadenas animé ---- */
.page-hero--dark {
  background: #1a1a1a !important;
  color: #fff;
  border-bottom: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  overflow: visible;
  position: relative;
  padding-bottom: clamp(80px, 10vw, 140px) !important;
  margin-bottom: -1px;
}
.page-hero--dark .breadcrumb a,
.page-hero--dark .breadcrumb .sep { color: rgba(255,255,255,.45); }
.page-hero--dark .breadcrumb .current { color: #9b1b1f; font-weight: 600; }
.page-hero--dark .eyebrow { color: rgba(255,255,255,.9); }
.page-hero--dark h1 { color: #fff; }
.page-hero--dark h1::after { background: #9b1b1f; }
.page-hero--dark .page-hero__sub { color: var(--text-on-dark); max-width: 600px !important; }

/* Halo lumineux animé */
.bg-glow {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 900px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  filter: blur(60px);
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 88%);
  mask-image: linear-gradient(to bottom, #000 45%, transparent 88%);
}
.bg-glow span { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.bg-glow .g1 {
  width: 46vw; height: 46vw; left: 52%; top: 30%;
  background: radial-gradient(circle, rgba(200,45,15,.5), transparent 60%);
  animation: drift1 14s ease-in-out infinite alternate;
}
.bg-glow .g2 {
  width: 38vw; height: 38vw; left: 70%; top: 44%;
  background: radial-gradient(circle, rgba(110,13,2,.55), transparent 60%);
  animation: drift2 18s ease-in-out infinite alternate;
}
.bg-glow .g3 {
  width: 20vw; height: 20vw; left: 60%; top: 34%;
  background: radial-gradient(circle, rgba(255,90,40,.4), transparent 60%);
  animation: drift3 9s ease-in-out infinite alternate;
}
@keyframes drift1 { 0% { transform: translate(-8%,-6%) scale(1); } 100% { transform: translate(10%,8%) scale(1.2); } }
@keyframes drift2 { 0% { transform: translate(6%,4%) scale(1.1); } 100% { transform: translate(-10%,-8%) scale(.9); } }
@keyframes drift3 { 0% { transform: translate(-12%,10%) scale(.8); opacity:.5; } 100% { transform: translate(14%,-12%) scale(1.3); opacity:1; } }

.hero-visual {
  position: absolute;
  right: max(6%, calc((100% - var(--maxw)) / 2 - 210px)); bottom: -120px;
  width: 460px; height: 460px;
  z-index: 2;
  pointer-events: none;
  transform: translate(-15%, -45%);
}
.hero-visual::before {
  content: '';
  position: absolute; inset: -25%;
  background: radial-gradient(circle at 50% 50%, rgba(200,40,20,.5), rgba(140,20,10,.25) 40%, rgba(120,15,5,.1) 60%, transparent 75%);
  filter: blur(25px);
  animation: halo 4s ease-in-out infinite;
}
.hero-visual .lock-svg { width: 100%; height: 100%; overflow: visible; }
.hero-visual .ring, .hero-visual .orbit, .hero-visual .flatten,
.hero-visual .padlock, .hero-visual .shackle, .hero-visual .glow-pulse {
  transform-box: fill-box;
  transform-origin: center;
}
.hero-visual .ring circle, .hero-visual .orbit circle {
  fill: none; stroke: #ff3a2f; stroke-width: 3.4; stroke-linecap: round;
  stroke-dasharray: 0.1 9.9;
  filter: drop-shadow(0 0 5px rgba(255,60,40,.9));
}
.hero-visual .ring.r1 circle { stroke: #ff6a4d; opacity: .85; }
.hero-visual .ring.r1 { animation: lockFlow 9s linear infinite; }
.hero-visual .ring.r2 circle { opacity: .6; stroke-width: 2.8; }
.hero-visual .ring.r2 { animation: lockFlowRev 14s linear infinite; }
.hero-visual .o1 { animation: lockSpin 18s linear infinite; }
.hero-visual .o1 .flatten { transform: scaleY(.42); }
.hero-visual .o2 { animation: lockSpinRev 24s linear infinite; }
.hero-visual .o2 .flatten { transform: scaleY(.5) rotate(8deg); }
.hero-visual .padlock-body, .hero-visual .shackle, .hero-visual .keyhole {
  stroke: #ff3a2f;
  filter: drop-shadow(0 0 3px rgba(255,60,40,.55));
}
.hero-visual .padlock-body { fill: rgba(120,15,5,.15); stroke-width: 2.2; }
.hero-visual .shackle {
  fill: none; stroke-width: 6; stroke-linecap: round;
  animation: lockShackle 4s cubic-bezier(.5,0,.2,1) infinite;
}
.hero-visual .keyhole { fill: none; stroke: #ff3a2f; stroke-width: 2.6; stroke-linecap: round; }
.hero-visual .glow-pulse {
  fill: rgba(255,70,45,.55); filter: blur(14px);
  animation: lockPulse 4s ease-in-out infinite;
}
@keyframes halo {
  0%, 100% { transform: scale(1); opacity: .8; }
  50% { transform: scale(1.08); opacity: 1; }
}
@keyframes lockFlow    { to { stroke-dashoffset: -400; } }
@keyframes lockFlowRev { to { stroke-dashoffset: 400; } }
@keyframes lockSpin    { to { transform: rotate(360deg); } }
@keyframes lockSpinRev { to { transform: rotate(-360deg); } }
@keyframes lockShackle {
  0%   { transform: translateY(-28px); }
  30%  { transform: translateY(6px); }
  42%  { transform: translateY(0); }
  88%  { transform: translateY(0); }
  100% { transform: translateY(-28px); }
}
@keyframes lockPulse {
  0%, 100% { opacity: 0; transform: scale(.7); }
  42%      { opacity: 1; transform: scale(1.1); }
  70%      { opacity: .25; transform: scale(1); }
}
@media (max-width: 1100px) {
  .hero-visual { width: 420px; height: 420px; right: 0; bottom: -120px; }
}
@media (max-width: 920px) {
  .hero-visual { width: 320px; height: 320px; right: -20px; bottom: -80px; opacity: .5; }
}
@media (max-width: 640px) {
  .hero-visual { display: none; }
  .bg-glow { display: none; }
}
/* Skip link */

/* ===== Lot 3d — sections sombres (ex-inline) ===== */
#edr { background: #1a1a1a; padding-top: clamp(34px,5vw,60px); padding-bottom: clamp(48px,6vw,80px); margin-top: -1px; }
.sec-band-dark { background: #1a1a1a; padding-top: clamp(14px,3vw,36px); padding-bottom: clamp(34px,5vw,60px); }