/* === extracted faithful style block 01 from prod mentions-legales/index.html === */
:root {
  --bg:#0b0b0c;
  --panel:#141416;
  --text:#f2f2f2;
  --muted:rgba(242,242,242,.70);
  --yellow:#FFD600;
  --border:rgba(255,255,255,.13);
}
* { box-sizing:border-box; }
html, body { max-width:100%; overflow-x:hidden; }
body {
  margin:0;
  font-family: Inter, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 12% 0%, rgba(255,214,0,.10), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(96,175,255,.08), transparent 30%),
    linear-gradient(180deg, #0b0b0c, #111);
}
main {
  width:min(980px, calc(100% - 32px));
  margin:0 auto;
  padding:54px 0 80px;
}
a { color:var(--yellow); }
.kicker {
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:12px;
  margin-bottom:18px;
}
h1 {
  font-size:clamp(42px, 8vw, 82px);
  line-height:.9;
  letter-spacing:-.07em;
  margin:0 0 26px;
}
h2 {
  margin:34px 0 10px;
  font-size:26px;
  letter-spacing:-.03em;
}
p, li {
  color:var(--muted);
  line-height:1.65;
  font-size:17px;
}
.card {
  border:1px solid var(--border);
  border-radius:24px;
  background:rgba(255,255,255,.045);
  padding:24px;
  margin:22px 0;
}
.notice {
  border-left:4px solid var(--yellow);
  padding:14px 18px;
  background:rgba(255,214,0,.08);
  border-radius:14px;
  color:var(--muted);
}
nav {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:34px;
}
nav a {
  text-decoration:none;
  border:1px solid var(--border);
  border-radius:999px;
  padding:10px 14px;
  color:var(--text);
  background:rgba(255,255,255,.05);
}
nav a:hover { color:var(--yellow); border-color:rgba(255,214,0,.45); }
ul { padding-left:22px; }
strong { color:var(--text); }
@media(max-width:760px){
  main { width:calc(100% - 24px); padding-top:34px; }
  .card { padding:18px; border-radius:20px; }
}

/* PRELAUNCH_MINIMAL_LOCK_START */

@media (max-width: 760px) {

}
/* PRELAUNCH_MINIMAL_LOCK_END */

/*
  Correction de P48 :
  - suppression du faux header .nopnj-global-*
  - reprise du header canon de l'accueil : header > .shell.nav > .brand + .nav-links
  - alignement visuel homogène sur tout le site
  - CONTACT pointe vers /contact/
*/

body {
  padding-top: 58px !important;
}

/* Sécurité : l'ancienne nav locale doit rester supprimée */
main > nav {
  display: none !important;
}

@media (max-width: 760px) {
  body {
    padding-top: 56px !important;
  }

}

/* évite que le contenu commence sous le header */
body {
  padding-top: 58px !important;
}

@media (max-width: 760px) {

  body {
    padding-top: 56px !important;
  }

}

/*
  Correction :
  - certaines pages internes ont un CSS local nav a en boutons/pills
  - ce CSS contamine le header canon
  - on verrouille le header NO PNJ pour qu'il reste identique à l'accueil
*/

/* Sécurité : la nav canon ne doit jamais prendre l'apparence pill */

.section-card,
.step-card,
.process-card,
.info-card,
.contact-card,
.exchange-card,
.order-card,
.timeline-card {
  position: relative !important;
  overflow: hidden !important;
}

.section-num,
.step-num,
.process-num,
.card-num,
.info-num,
.exchange-num,
.order-num,
.timeline-num {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  margin: 0 !important;
  display: block !important;
  font-size: clamp(52px, 6vw, 76px) !important;
  line-height: 0.82 !important;
  letter-spacing: -0.05em !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  opacity: 0.16 !important;
  z-index: 0 !important;
}

.section-card > :not(.section-num),
.step-card > :not(.step-num),
.process-card > :not(.process-num),
.info-card > :not(.info-num),
.contact-card > :not(.card-num),
.exchange-card > :not(.exchange-num),
.order-card > :not(.order-num),
.timeline-card > :not(.timeline-num) {
  position: relative !important;
  z-index: 1 !important;
}

.section-num + *,
.step-num + *,
.process-num + *,
.card-num + *,
.info-num + *,
.exchange-num + *,
.order-num + *,
.timeline-num + * {
  margin-top: 44px !important;
}

@media (max-width: 768px) {
  .section-num,
  .step-num,
  .process-num,
  .card-num,
  .info-num,
  .exchange-num,
  .order-num,
  .timeline-num {
    top: 12px !important;
    left: 12px !important;
    font-size: clamp(44px, 12vw, 62px) !important;
  }

  .section-num + *,
  .step-num + *,
  .process-num + *,
  .card-num + *,
  .info-num + *,
  .exchange-num + *,
  .order-num + *,
  .timeline-num + * {
    margin-top: 38px !important;
  }
}

@media (max-width:760px){

}

@media (max-width: 760px){

}

/* === P318 mobile viewport activation === */
@media (max-width: 900px){

  .viewport-awake{
    animation:nopnjViewportWake .9s cubic-bezier(.2,.8,.2,1);
    will-change:transform,box-shadow,filter;
  }

  @keyframes nopnjViewportWake{

    0%{
      transform:translateY(8px) scale(.985);
      filter:brightness(.96);
      box-shadow:0 0 0 rgba(255,214,0,0);
    }

    40%{
      transform:translateY(-2px) scale(1.01);
      filter:brightness(1.03);
      box-shadow:0 0 24px rgba(255,214,0,.15);
    }

    100%{
      transform:none;
      filter:none;
      box-shadow:none;
    }
  }
}