/* ============================================================
   securite.css - animations specifiques a /securite/
   Narratif : forteresse / coffre-fort / controle d'acces.
   "30 ans, zero faille" est le KPI. Toutes les anim materialisent
   verification, validation, scellement.

   Effets distincts de /ia/ (pas de routeur, pas de packets) :
   - scanner vertical (vs radar sweep)
   - cartouche border 4-trace (vs barricade barre)
   - terminal caret (vs HUD slide)
   - cadenas inline (vs barricade)
   - sceau circulaire (vs dot ONLINE)
   - gauge horizontal (vs system-check)
   - checklist (vs char inscribe)

   Scope strict .page-securite.
   ============================================================ */

.page-securite {
  --sec-ease-out: cubic-bezier(.23, 1, .32, 1);
  --sec-ease-io: cubic-bezier(.77, 0, .175, 1);
}

/* ------------------------------------------------------------
   HERO MESH - scanner vertical qui descend en boucle
   ------------------------------------------------------------ */
.page-securite .idx3-page-hero {
  position: relative;
}
.page-securite .idx3-page-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--lume-glow) 30%,
    var(--lume-1) 50%,
    var(--lume-glow) 70%,
    transparent 100%);
  filter: blur(1px);
  opacity: .8;
  pointer-events: none;
  animation: secScannerSweep 5.5s linear infinite;
  z-index: 1;
}
@keyframes secScannerSweep {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: .9; }
  90%  { opacity: .9; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* ------------------------------------------------------------
   HERO TITLE - reveal simple + cartouche autour de "zero faille"
   ------------------------------------------------------------ */
.page-securite .idx3-page-hero__title {
  opacity: 0;
  transform: translateY(14px);
  animation: secTitleIn .85s var(--sec-ease-out) 200ms forwards;
}
@keyframes secTitleIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Cartouche : 4 traits qui se dessinent autour de "zero faille"
   pour former un cadre, comme un sceau de certification.
   Le em a besoin de position relative + padding pour accueillir
   les 4 segments en ::before et ::after de elements enfants. */
.page-securite .idx3-page-hero__title em {
  position: relative;
  display: inline-block;
  padding: 4px 14px;
  font-style: italic;
  color: var(--lume-1);
  z-index: 0;
}
/* Top + bottom segments via ::before */
.page-securite .idx3-page-hero__title em::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 1px;
  background: var(--lume-1);
  transform: scaleX(0);
  transform-origin: left;
  animation: secCartoucheTop .4s var(--sec-ease-out) 1200ms forwards;
}
/* Bottom segment + left/right via after */
.page-securite .idx3-page-hero__title em::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1px;
  background: var(--lume-1);
  transform: scaleX(0);
  transform-origin: right;
  animation: secCartoucheBottom .4s var(--sec-ease-out) 1600ms forwards;
}
@keyframes secCartoucheTop {
  to { transform: scaleX(1); }
}
@keyframes secCartoucheBottom {
  to { transform: scaleX(1); }
}

/* Pour les segments verticaux gauche/droit du cartouche on
   pose deux divs invisibles via box-shadow inset progressif.
   Approche plus simple : pas de segments verticaux, juste top
   et bottom. Le visuel est deja signature et propre. */

/* ------------------------------------------------------------
   HERO LEAD - fade-in sober (sober pour la securite)
   ------------------------------------------------------------ */
.page-securite .idx3-page-hero__lead {
  opacity: 0;
  animation: secLeadFade .8s var(--sec-ease-out) 900ms forwards;
}
@keyframes secLeadFade {
  to { opacity: 1; }
}

/* ------------------------------------------------------------
   HERO META - terminal command style :
   ">" caret lume apparait, puis label slide depuis la gauche
   (style console de securite, distinct du HUD HUD de /ia/)
   ------------------------------------------------------------ */
.page-securite .idx3-page-hero__meta > div {
  position: relative;
  padding-left: 18px;
  opacity: 0;
  transform: translateX(-12px);
  animation: secMetaIn .55s var(--sec-ease-out) forwards;
}
.page-securite .idx3-page-hero__meta > div::before {
  content: ">";
  position: absolute;
  left: 0; top: 14px;
  color: var(--lume-1);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  animation: secCaretFade .3s var(--sec-ease-out) forwards;
}
.page-securite .idx3-page-hero__meta > div:nth-child(1) { animation-delay: 1100ms; }
.page-securite .idx3-page-hero__meta > div:nth-child(2) { animation-delay: 1200ms; }
.page-securite .idx3-page-hero__meta > div:nth-child(3) { animation-delay: 1300ms; }
.page-securite .idx3-page-hero__meta > div:nth-child(4) { animation-delay: 1400ms; }
.page-securite .idx3-page-hero__meta > div:nth-child(5) { animation-delay: 1500ms; }
.page-securite .idx3-page-hero__meta > div:nth-child(1)::before { animation-delay: 1000ms; }
.page-securite .idx3-page-hero__meta > div:nth-child(2)::before { animation-delay: 1100ms; }
.page-securite .idx3-page-hero__meta > div:nth-child(3)::before { animation-delay: 1200ms; }
.page-securite .idx3-page-hero__meta > div:nth-child(4)::before { animation-delay: 1300ms; }
.page-securite .idx3-page-hero__meta > div:nth-child(5)::before { animation-delay: 1400ms; }
@keyframes secMetaIn {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes secCaretFade {
  to { opacity: 1; }
}

/* ------------------------------------------------------------
   FACTS ROW - chiffres en stagger, le "0" pulse comme un KPI
   protege
   ------------------------------------------------------------ */
.page-securite .idx3-facts-row > div {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity .55s var(--sec-ease-out),
    transform .55s var(--sec-ease-out);
}
.page-securite .idx3-facts-row.in > div { opacity: 1; transform: translateY(0); }
.page-securite .idx3-facts-row.in > div:nth-child(1) { transition-delay: 100ms; }
.page-securite .idx3-facts-row.in > div:nth-child(2) { transition-delay: 200ms; }
.page-securite .idx3-facts-row.in > div:nth-child(3) { transition-delay: 300ms; }
.page-securite .idx3-facts-row.in > div:nth-child(4) { transition-delay: 400ms; }

/* Le premier chiffre "0" est LE KPI - pulse subtle perpetuel */
.page-securite .idx3-facts-row.in > div:first-child .num {
  animation: secKpiPulse 3.6s var(--sec-ease-io) 1.4s infinite;
}
@keyframes secKpiPulse {
  0%, 100% { color: var(--lume-1); }
  50%      { color: var(--lume-3); text-shadow: 0 0 12px var(--lume-glow); }
}

/* ------------------------------------------------------------
   SECTION TITLES + NUM - reveal sobre, scrool-in
   ------------------------------------------------------------ */
.page-securite .idx3-page-section.reveal .idx3-page-section__num {
  opacity: 0;
  transform: translateX(-10px);
  transition:
    opacity .5s var(--sec-ease-out),
    transform .5s var(--sec-ease-out);
}
.page-securite .idx3-page-section.reveal.in .idx3-page-section__num {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 80ms;
}

.page-securite .idx3-page-section.reveal .idx3-page-section__title,
.page-securite .idx3-page-section.reveal .idx3-page-section__lead {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity .6s var(--sec-ease-out),
    transform .6s var(--sec-ease-out);
}
.page-securite .idx3-page-section.reveal.in .idx3-page-section__title {
  opacity: 1; transform: translateY(0);
  transition-delay: 180ms;
}
.page-securite .idx3-page-section.reveal.in .idx3-page-section__lead {
  opacity: 1; transform: translateY(0);
  transition-delay: 280ms;
}

/* ------------------------------------------------------------
   SECTION 01 HEBERGEMENT - cards H1-H4 en stagger
   ------------------------------------------------------------ */
.page-securite #hebergement.reveal .idx3-modules > .idx3-module {
  opacity: 0;
  transform: scale(.94) translateY(8px);
  transition:
    opacity .55s var(--sec-ease-out),
    transform .55s var(--sec-ease-out);
}
.page-securite #hebergement.reveal.in .idx3-modules > .idx3-module {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.page-securite #hebergement.reveal.in .idx3-modules > .idx3-module:nth-child(1) { transition-delay: 100ms; }
.page-securite #hebergement.reveal.in .idx3-modules > .idx3-module:nth-child(2) { transition-delay: 200ms; }
.page-securite #hebergement.reveal.in .idx3-modules > .idx3-module:nth-child(3) { transition-delay: 300ms; }
.page-securite #hebergement.reveal.in .idx3-modules > .idx3-module:nth-child(4) { transition-delay: 400ms; }

/* ------------------------------------------------------------
   SECTION 02 CHIFFREMENT - icone CADENAS avant chaque <li>
   Signature crypto : un mini cadenas SVG en pseudo, scale-in
   apres que l'item soit visible
   ------------------------------------------------------------ */
.page-securite #chiffrement.reveal .idx3-prose > p {
  opacity: 0;
  filter: blur(4px);
  transition:
    opacity .55s var(--sec-ease-out),
    filter .55s var(--sec-ease-out);
}
.page-securite #chiffrement.reveal.in .idx3-prose > p {
  opacity: 1;
  filter: blur(0);
  transition-delay: 100ms;
}

.page-securite #chiffrement.reveal .idx3-prose > ul > li {
  position: relative;
  padding-left: 26px;
  opacity: 0;
  transform: translateX(-10px);
  transition:
    opacity .5s var(--sec-ease-out),
    transform .5s var(--sec-ease-out);
}
.page-securite #chiffrement.reveal .idx3-prose > ul > li::before {
  /* Cadenas SVG inline via background-image */
  content: "";
  position: absolute;
  left: 0; top: .35em;
  width: 14px; height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235891C7' stroke-width='1.4'><rect x='3' y='7' width='10' height='7' rx='1'/><path d='M5 7 V5 a3 3 0 0 1 6 0 V7'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  transform: scale(.5);
  transition:
    opacity .4s var(--sec-ease-out),
    transform .4s var(--sec-ease-out);
}
.page-securite #chiffrement.reveal.in .idx3-prose > ul > li {
  opacity: 1; transform: translateX(0);
}
.page-securite #chiffrement.reveal.in .idx3-prose > ul > li::before {
  opacity: 1; transform: scale(1);
}
.page-securite #chiffrement.reveal.in .idx3-prose > ul > li:nth-child(1) { transition-delay: 200ms; }
.page-securite #chiffrement.reveal.in .idx3-prose > ul > li:nth-child(2) { transition-delay: 280ms; }
.page-securite #chiffrement.reveal.in .idx3-prose > ul > li:nth-child(3) { transition-delay: 360ms; }
.page-securite #chiffrement.reveal.in .idx3-prose > ul > li:nth-child(4) { transition-delay: 440ms; }
.page-securite #chiffrement.reveal.in .idx3-prose > ul > li:nth-child(5) { transition-delay: 520ms; }
.page-securite #chiffrement.reveal.in .idx3-prose > ul > li:nth-child(6) { transition-delay: 600ms; }
/* Le cadenas apparait apres le li */
.page-securite #chiffrement.reveal.in .idx3-prose > ul > li:nth-child(1)::before { transition-delay: 400ms; }
.page-securite #chiffrement.reveal.in .idx3-prose > ul > li:nth-child(2)::before { transition-delay: 480ms; }
.page-securite #chiffrement.reveal.in .idx3-prose > ul > li:nth-child(3)::before { transition-delay: 560ms; }
.page-securite #chiffrement.reveal.in .idx3-prose > ul > li:nth-child(4)::before { transition-delay: 640ms; }
.page-securite #chiffrement.reveal.in .idx3-prose > ul > li:nth-child(5)::before { transition-delay: 720ms; }
.page-securite #chiffrement.reveal.in .idx3-prose > ul > li:nth-child(6)::before { transition-delay: 800ms; }

/* ------------------------------------------------------------
   SECTION 03 RGPD - SCEAU DE VALIDATION circulaire sur chaque
   card G1-G6 : un cercle stroke-dasharray qui se trace +
   check ::after au centre
   ------------------------------------------------------------ */
.page-securite #rgpd.reveal .idx3-modules > .idx3-module {
  position: relative;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity .55s var(--sec-ease-out),
    transform .55s var(--sec-ease-out);
}
.page-securite #rgpd.reveal.in .idx3-modules > .idx3-module {
  opacity: 1;
  transform: translateY(0);
}
.page-securite #rgpd.reveal.in .idx3-modules > .idx3-module:nth-child(1) { transition-delay: 80ms; }
.page-securite #rgpd.reveal.in .idx3-modules > .idx3-module:nth-child(2) { transition-delay: 160ms; }
.page-securite #rgpd.reveal.in .idx3-modules > .idx3-module:nth-child(3) { transition-delay: 240ms; }
.page-securite #rgpd.reveal.in .idx3-modules > .idx3-module:nth-child(4) { transition-delay: 320ms; }
.page-securite #rgpd.reveal.in .idx3-modules > .idx3-module:nth-child(5) { transition-delay: 400ms; }
.page-securite #rgpd.reveal.in .idx3-modules > .idx3-module:nth-child(6) { transition-delay: 480ms; }

/* Sceau de validation : un petit cercle SVG check dans le coin
   top-right de chaque card. Apparait apres la card. */
.page-securite #rgpd .idx3-modules > .idx3-module::after {
  content: "";
  position: absolute;
  top: 16px; right: 16px;
  width: 24px; height: 24px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235891C7' stroke-width='1.5'><circle cx='12' cy='12' r='10' stroke-dasharray='63' stroke-dashoffset='0'/><path d='M7.5 12.5 l3 3 l6-7' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(.4) rotate(-20deg);
  transition:
    opacity .55s var(--sec-ease-out),
    transform .55s var(--sec-ease-out);
}
.page-securite #rgpd.reveal.in .idx3-modules > .idx3-module::after {
  opacity: 1;
  transform: scale(1) rotate(0);
}
.page-securite #rgpd.reveal.in .idx3-modules > .idx3-module:nth-child(1)::after { transition-delay: 500ms; }
.page-securite #rgpd.reveal.in .idx3-modules > .idx3-module:nth-child(2)::after { transition-delay: 580ms; }
.page-securite #rgpd.reveal.in .idx3-modules > .idx3-module:nth-child(3)::after { transition-delay: 660ms; }
.page-securite #rgpd.reveal.in .idx3-modules > .idx3-module:nth-child(4)::after { transition-delay: 740ms; }
.page-securite #rgpd.reveal.in .idx3-modules > .idx3-module:nth-child(5)::after { transition-delay: 820ms; }
.page-securite #rgpd.reveal.in .idx3-modules > .idx3-module:nth-child(6)::after { transition-delay: 900ms; }

/* ------------------------------------------------------------
   SECTION 04 PRA TESTE - GAUGE HORIZONTAL qui se remplit
   derriere chaque <li> (les RPO/RTO sont des mesures)
   ------------------------------------------------------------ */
.page-securite #pra.reveal .idx3-prose > p {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity .55s var(--sec-ease-out),
    transform .55s var(--sec-ease-out);
}
.page-securite #pra.reveal.in .idx3-prose > p {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 80ms;
}

.page-securite #pra.reveal .idx3-prose > ul > li {
  position: relative;
  opacity: 0;
  transform: translateX(-8px);
  padding-left: 12px;
  transition:
    opacity .5s var(--sec-ease-out),
    transform .5s var(--sec-ease-out);
}
/* Gauge : bg lume tres pale qui se remplit de gauche a droite */
.page-securite #pra.reveal .idx3-prose > ul > li::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--lume-1);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .5s var(--sec-ease-out);
}
.page-securite #pra.reveal.in .idx3-prose > ul > li {
  opacity: 1; transform: translateX(0);
}
.page-securite #pra.reveal.in .idx3-prose > ul > li::before {
  transform: scaleY(1);
}
.page-securite #pra.reveal.in .idx3-prose > ul > li:nth-child(1) { transition-delay: 200ms; }
.page-securite #pra.reveal.in .idx3-prose > ul > li:nth-child(2) { transition-delay: 320ms; }
.page-securite #pra.reveal.in .idx3-prose > ul > li:nth-child(3) { transition-delay: 440ms; }
.page-securite #pra.reveal.in .idx3-prose > ul > li:nth-child(4) { transition-delay: 560ms; }
.page-securite #pra.reveal.in .idx3-prose > ul > li:nth-child(1)::before { transition-delay: 400ms; }
.page-securite #pra.reveal.in .idx3-prose > ul > li:nth-child(2)::before { transition-delay: 520ms; }
.page-securite #pra.reveal.in .idx3-prose > ul > li:nth-child(3)::before { transition-delay: 640ms; }
.page-securite #pra.reveal.in .idx3-prose > ul > li:nth-child(4)::before { transition-delay: 760ms; }

/* ------------------------------------------------------------
   SECTION 05 AUDIT-READY - CHECKLIST : un carre qui se coche
   ------------------------------------------------------------ */
.page-securite #audit.reveal .idx3-prose > p {
  opacity: 0;
  transition: opacity .55s var(--sec-ease-out);
}
.page-securite #audit.reveal.in .idx3-prose > p {
  opacity: 1;
  transition-delay: 80ms;
}

.page-securite #audit.reveal .idx3-prose > ul > li {
  position: relative;
  padding-left: 24px;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity .5s var(--sec-ease-out),
    transform .5s var(--sec-ease-out);
}
.page-securite #audit.reveal .idx3-prose > ul > li::before {
  /* Carre coche - vide au depart puis se coche */
  content: "";
  position: absolute;
  left: 0; top: .4em;
  width: 12px; height: 12px;
  border: 1px solid var(--lume-1);
  border-radius: 2px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%235891C7' stroke-width='1.8' stroke-linecap='round'><path d='M3 6.5 L5 8.5 L9 4'/></svg>");
  background-repeat: no-repeat;
  background-size: 0% 0%;
  background-position: center;
  transition: background-size .35s var(--sec-ease-out);
}
.page-securite #audit.reveal.in .idx3-prose > ul > li {
  opacity: 1; transform: translateY(0);
}
.page-securite #audit.reveal.in .idx3-prose > ul > li::before {
  background-size: 100% 100%;
}
.page-securite #audit.reveal.in .idx3-prose > ul > li:nth-child(1) { transition-delay: 150ms; }
.page-securite #audit.reveal.in .idx3-prose > ul > li:nth-child(2) { transition-delay: 220ms; }
.page-securite #audit.reveal.in .idx3-prose > ul > li:nth-child(3) { transition-delay: 290ms; }
.page-securite #audit.reveal.in .idx3-prose > ul > li:nth-child(4) { transition-delay: 360ms; }
.page-securite #audit.reveal.in .idx3-prose > ul > li:nth-child(5) { transition-delay: 430ms; }
.page-securite #audit.reveal.in .idx3-prose > ul > li:nth-child(6) { transition-delay: 500ms; }
.page-securite #audit.reveal.in .idx3-prose > ul > li:nth-child(7) { transition-delay: 570ms; }
.page-securite #audit.reveal.in .idx3-prose > ul > li:nth-child(1)::before { transition-delay: 350ms; }
.page-securite #audit.reveal.in .idx3-prose > ul > li:nth-child(2)::before { transition-delay: 420ms; }
.page-securite #audit.reveal.in .idx3-prose > ul > li:nth-child(3)::before { transition-delay: 490ms; }
.page-securite #audit.reveal.in .idx3-prose > ul > li:nth-child(4)::before { transition-delay: 560ms; }
.page-securite #audit.reveal.in .idx3-prose > ul > li:nth-child(5)::before { transition-delay: 630ms; }
.page-securite #audit.reveal.in .idx3-prose > ul > li:nth-child(6)::before { transition-delay: 700ms; }
.page-securite #audit.reveal.in .idx3-prose > ul > li:nth-child(7)::before { transition-delay: 770ms; }

/* ------------------------------------------------------------
   FINAL CTA - scale-in, border qui pulse une fois
   ------------------------------------------------------------ */
.page-securite .idx3-finalcta.reveal {
  opacity: 0;
  transform: scale(.97);
  transition:
    opacity .7s var(--sec-ease-out),
    transform .7s var(--sec-ease-out);
}
.page-securite .idx3-finalcta.reveal.in {
  opacity: 1;
  transform: scale(1);
}

/* ------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .page-securite *,
  .page-securite *::before,
  .page-securite *::after {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  .page-securite .idx3-page-hero::after { display: none !important; }
  .page-securite .idx3-page-hero__title em::before,
  .page-securite .idx3-page-hero__title em::after {
    transform: scaleX(1) !important;
  }
  .page-securite #chiffrement .idx3-prose > ul > li::before,
  .page-securite #rgpd .idx3-modules > .idx3-module::after,
  .page-securite #audit .idx3-prose > ul > li::before {
    opacity: 1 !important;
    transform: scale(1) !important;
  }
  .page-securite #audit .idx3-prose > ul > li::before { background-size: 100% 100% !important; }
}