/* ==========================================================================
   NOSTAL CARS PUB — assets/css/conformite.css
   Styles partagés par les pages légales (mentions-legales.php, cgv.php,
   politique-confidentialite.php) et par 404.php
   S'appuie sur les variables et composants définis dans style.css
   ========================================================================== */

/* ============================================================================
   PAGES LÉGALES — préfixe "leg-"
   ============================================================================ */

.leg-layout{ display:grid; grid-template-columns: 260px 1fr; gap: 3rem; align-items:start; }
@media(max-width:848px){ .leg-layout{ grid-template-columns:1fr; } }

.leg-toc{ background:#fff; border:1px solid var(--nc-gray-300); border-radius: var(--nc-radius); padding: 1.5rem; position:sticky; top:100px; }
@media(max-width:848px){ .leg-toc{ position:static; top:auto; } }

.leg-toc h6{ font-size: var(--nc-fs-xs); text-transform:uppercase; letter-spacing:1px; color: var(--nc-gray-500); margin-bottom:1rem; }
.leg-toc a{ display:block; padding:.5rem 0; font-size: var(--nc-fs-sm); color: var(--nc-gray-700); border-left:2px solid transparent; padding-left:.8rem; margin-left:-.9rem; transition: all var(--nc-transition); }
.leg-toc a:hover{ color: var(--nc-blue); }
.leg-toc a.is-active{ color: var(--nc-blue); border-left-color: var(--nc-blue); font-weight:700; }

.leg-updated{
  display:inline-flex; align-items:center; gap:.5rem; background: var(--nc-blue-light); color: var(--nc-blue);
  font-size: var(--nc-fs-xs); font-weight:700; padding:.4rem .9rem; border-radius:20px; margin-bottom:1.8rem;
}

.leg-content h2{
  display:flex; align-items:center; gap:.9rem; font-size: var(--nc-fs-xl);
  margin-top: 2.6rem; padding-top:2.6rem; border-top:1px solid var(--nc-gray-300);
  scroll-margin-top: 130px;
}
.leg-content > h2:first-of-type{ margin-top:0; padding-top:0; border-top:none; }
.leg-content h2 .num{
  width:34px; height:34px; border-radius:50%; background: var(--nc-blue); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size: var(--nc-fs-sm); flex-shrink:0;
}
.leg-content h3{ font-size: var(--nc-fs-md); margin-top:1.4rem; }
.leg-content p{ color: var(--nc-gray-700); }
.leg-content ul{ margin: 0 0 1.4rem; padding-left:1.4rem; }
.leg-content ul li{ color: var(--nc-gray-700); font-size: var(--nc-fs-sm); margin-bottom:.5rem; list-style:disc; }
.leg-content a{ color: var(--nc-blue); font-weight:700; }

.leg-info-table{ width:100%; border-collapse:collapse; margin: 1rem 0 1.8rem; }
.leg-info-table tr{ border-bottom:1px solid var(--nc-gray-300); }
.leg-info-table tr:last-child{ border-bottom:none; }
.leg-info-table td{ padding: .8rem .5rem; font-size: var(--nc-fs-sm); }
.leg-info-table td:first-child{ color: var(--nc-gray-500); font-weight:700; width:40%; }

.leg-callout{
  background: var(--nc-gray-100); border-left: 4px solid var(--nc-blue);
  padding: 1.2rem 1.4rem; border-radius: 0 var(--nc-radius) var(--nc-radius) 0; margin: 1.4rem 0;
}
.leg-callout p{ margin-bottom:0; font-size: var(--nc-fs-sm); }
.leg-callout.is-todo{ border-left-color: var(--nc-red); }

/* ============================================================================
   404.PHP — préfixe "err-"
   ============================================================================ */

.err-wrap{ min-height: 62vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding: 3rem 1.5rem; }
.err-code{
  font-size: 8rem; font-weight:900; line-height:1;
  background: linear-gradient(120deg, var(--nc-blue), var(--nc-red));
  -webkit-background-clip: text; background-clip:text; color:transparent;
}
.err-road{ width:220px; height:6px; background: repeating-linear-gradient(90deg, var(--nc-gray-300) 0 18px, transparent 18px 32px); margin: 1.6rem auto 1.2rem; position:relative; overflow:visible; }
.err-road i{
  position:absolute; top:-22px; left:0; font-size:1.8rem; color: var(--nc-blue);
  animation: err-drive 3.2s linear infinite;
}
@keyframes err-drive{
  0%{ left:-10%; transform:scaleX(1); }
  49%{ transform:scaleX(1); }
  50%{ left:110%; transform:scaleX(-1); }
  99%{ transform:scaleX(-1); }
  100%{ left:-10%; transform:scaleX(1); }
}
@media (prefers-reduced-motion: reduce){ .err-road i{ animation:none; left:40%; } }

.err-search{ max-width:460px; width:100%; margin: 2rem auto 0; display:flex; gap:.6rem; }
.err-search input{ flex:1; }
.err-links{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; margin-top:1rem; }