/* Région indisponible — hors maquette, traitée comme la page 404 de la DA :
   fond Nuit, illustration au trait Violet texte, H1, un seul bouton primaire, aucune autre lumière vive.
   Passe « premium » : panneau de verre sombre en relief (système --ds-*), emblème en orbites graduées autour du globe
   néon, pays détecté en puce, barre d'orientation sous le panneau. Univers fog affiné : deux nappes de lumière qui
   encadrent le panneau (violet derrière l'emblème, vert très bas à droite), jamais sous le texte.
   Couleurs : jetons --dc-*, --ds-*, --nl-* uniquement. */

.region { display: flex; flex-direction: column; gap: var(--ds-space-4); max-width: 1040px; padding-top: 64px; }

/* Univers fog, propre à cette page : nappes plus petites, plus basses en intensité, calées sur la composition */
.region.zone--fog::before {
  background:
    radial-gradient(30% 46% at calc(50% - 320px) 38%, color-mix(in srgb, var(--dc-violet) 17%, transparent), transparent 72%),
    radial-gradient(26% 34% at calc(50% + 430px) 78%, color-mix(in srgb, var(--dc-vert) 7%, transparent), transparent 72%);
}

/* Panneau */
.region__panel {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 264px minmax(0, 1fr); align-items: center; gap: 56px; padding: 52px 56px;
  border-radius: 28px; border: var(--ds-border);
  background:
    radial-gradient(60% 90% at 0% 0%, color-mix(in srgb, var(--dc-violet) 9%, transparent), transparent 70%),
    var(--nl-card-sheen), var(--ds-surface-raised);
  box-shadow: var(--ds-elev-2);
}
/* Filet lumineux sur l'arête haute */
.region__panel::before {
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--dc-violet-texte) 50%, transparent), transparent);
}

/* Emblème : orbite graduée extérieure, orbite fine intérieure, halo violet, globe néon et cadenas blanc */
.region__emblem {
  position: relative; display: grid; place-items: center; width: 264px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--dc-violet) 16%, transparent), transparent 78%);
}
.region__orbit { position: absolute; border-radius: 50%; pointer-events: none; }
.region__orbit--outer {
  inset: 0;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--dc-violet-texte) 30%, transparent) 0 .8deg, transparent .8deg 7.5deg);
  -webkit-mask: radial-gradient(closest-side, transparent 92%, var(--dc-nuit) 92.5% 97%, transparent 97.5%);
  mask: radial-gradient(closest-side, transparent 92%, var(--dc-nuit) 92.5% 97%, transparent 97.5%);
}
.region__orbit--inner {
  inset: 13%; border: 1px solid color-mix(in srgb, var(--dc-violet-texte) 26%, transparent);
  box-shadow: inset 0 0 30px -12px color-mix(in srgb, var(--dc-violet) 60%, transparent), 0 0 0 1px color-mix(in srgb, var(--dc-nuit) 40%, transparent);
}
/* Repère : un point lumineux posé sur l'orbite intérieure */
.region__orbit--inner::after {
  content: ""; position: absolute; top: 14%; right: 14%; width: 6px; height: 6px; margin: -3px -3px 0 0; border-radius: 50%;
  background: var(--dc-violet-texte); box-shadow: 0 0 10px 1px color-mix(in srgb, var(--dc-violet) 70%, transparent);
}
.region__art { position: relative; z-index: 1; width: 66%; height: auto; aspect-ratio: 170 / 150; animation: region-in 900ms var(--ds-ease-out) both; }
.region__art .na-glow { opacity: .2; }
.region__art .na-glow .region__lock { stroke: var(--dc-lumiere); opacity: .35; }
.region__art .na-core .region__lock { stroke: var(--dc-lumiere); }
.region__art .na-core .region__route { stroke: var(--dc-brume); stroke-width: 1.4px; opacity: .6; }
@keyframes region-in { from { opacity: 0; transform: translate3d(0, 6px, 0) scale(.97); } }

/* Texte */
.region__text { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
.region__text .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.region__text .eyebrow::after { content: ""; width: 36px; height: 1px; background: linear-gradient(90deg, currentColor, transparent); opacity: .8; }
.region__text h1 { margin: 0; max-width: 18ch; font-size: clamp(34px, 4vw, 52px); }
.region__text .lead { margin: 0; }
.region__country {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; margin: 0; padding: 0 16px 0 12px; border-radius: var(--ds-r-pill);
  border: var(--ds-border); background: var(--ds-surface-sunken); box-shadow: var(--ds-highlight);
  font-weight: 600; font-size: 15px; color: var(--dc-lumiere);
}
.region__country .icon { width: 18px; height: 18px; color: var(--dc-violet-texte); }
.region__policy { max-width: 62ch; background: var(--ds-surface-sunken); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--dc-nuit) 60%, transparent), var(--ds-highlight); }

/* Et maintenant ? — barre d'orientation sous le panneau */
.region__next {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding: 14px 14px 14px 26px;
  border-radius: 20px; border: var(--ds-border);
  background: linear-gradient(90deg, color-mix(in srgb, var(--dc-violet) 7%, transparent), transparent 45%), color-mix(in srgb, var(--dc-nuit) 78%, transparent);
  box-shadow: var(--ds-elev-1);
}
.region__next .label { margin: 0; }
.region__links { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; margin: 0; padding: 0; list-style: none; }
.region__help { color: var(--dc-lumiere); }
.region__help:hover { color: var(--dc-lumiere); }

@media (max-width: 1023px) {
  .region__panel { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 24px; padding: 36px 34px 38px; }
  .region__emblem { width: 176px; }
}
@media (max-width: 767px) {
  .region { gap: 14px; padding-top: 16px; }
  .region.zone--fog::before {
    background:
      radial-gradient(60% 30% at 20% 22%, color-mix(in srgb, var(--dc-violet) 16%, transparent), transparent 72%),
      radial-gradient(50% 24% at 90% 88%, color-mix(in srgb, var(--dc-vert) 6%, transparent), transparent 72%);
  }
  .region__panel { gap: 18px; padding: 24px 18px 26px; border-radius: var(--dc-r-card-m); }
  .region__emblem { width: 132px; }
  .region__orbit--inner::after { width: 5px; height: 5px; }
  .region__text { gap: 14px; }
  .region__text h1 { font-size: 30px; }
  .region__country { font-size: 14px; }
  .region__next { flex-direction: column; align-items: stretch; gap: 10px; padding: 16px 16px 8px; border-radius: var(--dc-r-card-m); }
  .region__links { flex-direction: column; align-items: stretch; gap: 0; }
  .region__links .btn { width: 100%; margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .region__art { animation: none; }
}