/* ════════════════════════════════════════════════════════════════════════
   Plan du site — Atlas Randozone (Bootstrap 5)
   Migré depuis la maquette migration/Randozone-Plan-du-Site.html.
   Tout est scopé sous .pds-page pour éviter toute collision avec rz-bs5.css
   ou le CSS d'autres pages migrées.
   Polices : titres Work Sans, chiffres en monospace système (jamais Fraunces /
   JetBrains Mono : convention BS5 Randozone).
   ════════════════════════════════════════════════════════════════════════ */

.pds-page {
  --pds-ink: #15283f;
  --pds-ink-soft: #627280;
  --pds-bg: #f7f9fb;
  --pds-surface: #ffffff;
  --pds-surface-2: #f0f4f8;
  --pds-line: #e3e8ef;
  --pds-primary: #2b66c4;
  --pds-primary-dark: #1e4a94;
  --pds-primary-soft: #e8f0fc;
  --pds-gold: #c98a16;
  --pds-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  --pds-sec-gap: 3.4rem;
  --pds-sec-pad: 1.6rem;
}

.pds-page .rz-ico { width: 1em; height: 1em; fill: currentColor; flex: 0 0 auto; }
.pds-page .eyebrow { font-size: 0.6875rem; font-weight: 700; color: var(--pds-primary); letter-spacing: 0.14em; text-transform: uppercase; }

/* ── Hero ─────────────────────────────────────────── */
.pds-page .atlas-hero {
  border-radius: 1.1rem; overflow: hidden; position: relative; border: 1px solid var(--pds-line);
  background-color: #16304a;
  background-image: linear-gradient(104deg, #16304a 0%, #1e4a72 60%, #25608f 100%);
  color: #fff;
  padding: 2.6rem 1.8rem;
}
@media (min-width: 768px) { .pds-page .atlas-hero { padding: 3.4rem 3rem; } }
.pds-page .atlas-hero .eyebrow { color: rgba(255,255,255,0.82); }
.pds-page .atlas-hero h1 { color: #fff; font-family: "Work Sans", system-ui, sans-serif; font-weight: 700; font-size: clamp(2.1rem, 4.4vw, 3.3rem); line-height: 1.04; margin: 0.5rem 0 0.7rem; letter-spacing: -0.022em; }
.pds-page .atlas-hero p { color: rgba(255,255,255,0.9); font-size: 1.04rem; line-height: 1.6; max-width: 58ch; margin-bottom: 1.4rem; }
.pds-page .atlas-stats { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; }
.pds-page .atlas-stats .pill { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; font-weight: 600; color: #fff; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.24); border-radius: 99px; padding: 0.4rem 0.85rem; backdrop-filter: blur(4px); }
.pds-page .atlas-stats .pill b { font-family: var(--pds-mono); font-weight: 600; }
.pds-page .atlas-hero .topo-line { position: absolute; inset: 0; pointer-events: none; opacity: 0.16; }

/* ── Atlas layout : sommaire + contenu ────────────── */
.pds-page .atlas-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 992px) { .pds-page .atlas-grid { grid-template-columns: 232px minmax(0,1fr); gap: 3rem; } }

.pds-page .toc { position: sticky; top: 76px; align-self: start; }
.pds-page .toc-title { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pds-ink-soft); padding: 0 0.75rem 0.5rem; }
.pds-page .toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.pds-page .toc-link { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.75rem; border-radius: 0.55rem; color: var(--pds-ink-soft); font-weight: 600; font-size: 0.875rem; border-left: 2px solid transparent; transition: background .14s, color .14s; }
.pds-page .toc-link .tn { font-family: var(--pds-mono); font-size: 0.7rem; color: var(--pds-ink-soft); opacity: 0.65; min-width: 1.3em; }
.pds-page .toc-link .tc { margin-left: auto; font-family: var(--pds-mono); font-size: 0.66rem; color: var(--pds-ink-soft); opacity: 0.6; }
.pds-page .toc-link:hover { background: var(--pds-surface-2); color: var(--pds-ink); }
.pds-page .toc-link.is-active { color: var(--pds-primary); background: var(--pds-primary-soft); border-left-color: var(--pds-primary); }
.pds-page .toc-link.is-active .tn, .pds-page .toc-link.is-active .tc { color: var(--pds-primary); opacity: 0.9; }
@media (max-width: 991.98px) {
  .pds-page .toc { position: sticky; top: 56px; z-index: 18; background: color-mix(in srgb, var(--pds-bg) 92%, transparent); backdrop-filter: blur(8px); margin: 0 -0.75rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--pds-line); }
  .pds-page .toc-title { display: none; }
  .pds-page .toc-list { flex-direction: row; overflow-x: auto; gap: 0.4rem; padding-bottom: 0.2rem; scrollbar-width: thin; }
  .pds-page .toc-link { border-left: 0; white-space: nowrap; border: 1px solid var(--pds-line); background: var(--pds-surface); padding: 0.4rem 0.7rem; }
  .pds-page .toc-link .tc { display: none; }
  .pds-page .toc-link.is-active { border-color: var(--pds-primary); }
}

/* ── Sections (style « bordered ») ────────────────── */
.pds-page .atlas-main { display: flex; flex-direction: column; gap: var(--pds-sec-gap); }
.pds-page .sec { scroll-margin-top: 80px; background: var(--pds-surface); border: 1px solid var(--pds-line); border-radius: 1rem; padding: var(--pds-sec-pad) calc(var(--pds-sec-pad) + 0.2rem); box-shadow: 0 1px 2px rgba(21,40,63,0.03); }
.pds-page .sec-head { display: flex; align-items: baseline; gap: 0.85rem; margin-bottom: 1.3rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--pds-line); }
.pds-page .sec-num { font-family: var(--pds-mono); font-size: 0.8rem; font-weight: 600; color: var(--pds-primary); letter-spacing: 0.04em; padding-top: 0.35rem; }
.pds-page .sec-title { font-family: "Work Sans", system-ui, sans-serif; font-weight: 700; font-size: clamp(1.45rem, 2.6vw, 1.95rem); line-height: 1.1; margin: 0; flex: 1 1 auto; letter-spacing: -0.02em; }
.pds-page .sec-count { font-family: var(--pds-mono); font-size: 0.72rem; color: var(--pds-ink-soft); background: var(--pds-surface); border: 1px solid var(--pds-line); border-radius: 99px; padding: 0.25rem 0.65rem; white-space: nowrap; align-self: center; }
.pds-page .sec-intro { color: var(--pds-ink-soft); font-size: 0.92rem; line-height: 1.55; max-width: 64ch; margin: -0.5rem 0 1.3rem; }
.pds-page .subhead { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--pds-ink-soft); margin: 1.7rem 0 0.85rem; display: flex; align-items: center; gap: 0.55rem; }
.pds-page .subhead::after { content: ""; height: 1px; background: var(--pds-line); flex: 1 1 auto; }

/* ── Topos (link cards) ───────────────────────────── */
.pds-page .topo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 0.8rem; }
.pds-page .topo-card { display: flex; align-items: center; gap: 0.9rem; padding: 0.95rem 1rem; border: 1px solid var(--pds-line); border-radius: 0.85rem; background: var(--pds-surface); transition: border-color .14s, transform .14s, box-shadow .14s; }
.pds-page .topo-card:hover { border-color: color-mix(in srgb, var(--pds-primary) 40%, var(--pds-line)); transform: translateY(-2px); box-shadow: 0 14px 30px -22px rgba(21,40,63,0.5); }
.pds-page .topo-ico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 0.7rem; display: grid; place-items: center; background: var(--pds-primary-soft); color: var(--pds-primary-dark); }
.pds-page .topo-ico .rz-ico { width: 1.2rem; height: 1.2rem; }
.pds-page .topo-card .t { display: block; font-weight: 700; font-size: 0.92rem; color: var(--pds-ink); line-height: 1.15; }
.pds-page .topo-card .s { display: block; font-size: 0.76rem; color: var(--pds-ink-soft); margin-top: 0.1rem; }

/* ── Régions ──────────────────────────────────────── */
.pds-page .region-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px,1fr)); gap: 0.5rem; }
.pds-page .region-link { display: flex; align-items: center; gap: 0.6rem; padding: 0.62rem 0.8rem; border-radius: 0.6rem; color: var(--pds-ink); font-weight: 600; font-size: 0.9rem; border: 1px solid var(--pds-line); background: var(--pds-surface); transition: border-color .14s, color .14s, background .14s; }
.pds-page .region-link .geo { color: var(--pds-primary); width: 0.95rem; height: 0.95rem; }
.pds-page .region-link .ar { margin-left: auto; opacity: 0; transform: translateX(-3px); transition: opacity .14s, transform .14s; color: var(--pds-primary); width: 0.95rem; height: 0.95rem; }
.pds-page .region-link:hover { border-color: color-mix(in srgb, var(--pds-primary) 40%, var(--pds-line)); color: var(--pds-primary); }
.pds-page .region-link:hover .ar { opacity: 1; transform: translateX(0); }

/* ── Départements (grille style tableau) ──────────── */
.pds-page .dept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px,1fr)); gap: 0.45rem; }
.pds-page .dept-tile { display: flex; flex-direction: column; justify-content: space-between; min-height: 84px; padding: 0.55rem 0.6rem 0.5rem; border: 1px solid var(--pds-line); border-radius: 0.6rem; background: var(--pds-surface); transition: border-color .14s, transform .14s, box-shadow .14s, background .14s; overflow: hidden; }
.pds-page .dept-tile .n { font-family: var(--pds-mono); font-size: 1.18rem; font-weight: 600; color: var(--pds-ink-soft); line-height: 1; letter-spacing: -0.01em; transition: color .14s; }
.pds-page .dept-tile .nm { font-size: 0.7rem; font-weight: 600; color: var(--pds-ink); line-height: 1.12; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pds-page .dept-tile.dom { background: linear-gradient(155deg, var(--pds-primary-soft), var(--pds-surface)); }
.pds-page .dept-tile.dom .n { color: var(--pds-primary-dark); }
.pds-page .dept-tile:hover { border-color: var(--pds-primary); background: var(--pds-primary); transform: translateY(-2px); box-shadow: 0 14px 26px -18px rgba(43,102,196,0.6); }
.pds-page .dept-tile:hover .n, .pds-page .dept-tile:hover .nm { color: #fff; }

/* ── Destinations (nuage) ─────────────────────────── */
.pds-page .cloud { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pds-page .cloud-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.78rem; border-radius: 99px; font-size: 0.83rem; font-weight: 600; color: var(--pds-ink); border: 1px solid var(--pds-line); background: var(--pds-surface); transition: border-color .14s, color .14s, background .14s, transform .14s; }
.pds-page .cloud-chip:hover { border-color: var(--pds-primary); color: var(--pds-primary); transform: translateY(-1px); }
.pds-page .cloud-chip.hot { background: var(--pds-primary-soft); border-color: color-mix(in srgb, var(--pds-primary) 30%, var(--pds-line)); color: var(--pds-primary-dark); }
.pds-page .cloud-chip.hot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pds-primary); }
.pds-page .cloud-chip.hot:hover { background: var(--pds-primary); color: #fff; }

/* ── Massifs (colonnes) ───────────────────────────── */
.pds-page .col-list { columns: 220px; column-gap: 2rem; }
.pds-page .col-list a { display: block; padding: 0.28rem 0; font-size: 0.84rem; font-weight: 500; color: var(--pds-ink-soft); line-height: 1.3; break-inside: avoid; transition: color .12s; }
.pds-page .col-list a:hover { color: var(--pds-primary); }
.pds-page .col-list a.hot { color: var(--pds-ink); font-weight: 700; }
.pds-page .col-list a.hot::before { content: "▸"; color: var(--pds-primary); margin-right: 0.35rem; font-size: 0.7em; }

/* ── Articles (colonnes denses, par thème) ────────── */
.pds-page .art-list { columns: 300px; column-gap: 2rem; }
.pds-page .art-list a { display: block; padding: 0.32rem 0; font-size: 0.82rem; font-weight: 500; color: var(--pds-ink-soft); line-height: 1.32; break-inside: avoid; border-bottom: 1px solid transparent; transition: color .12s; }
.pds-page .art-list a:hover { color: var(--pds-primary); }
.pds-page .art-theme + .art-theme { margin-top: 1.7rem; }
.pds-page .art-theme-head { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.8rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--pds-ink); }
.pds-page .art-theme-head .rz-ico { color: var(--pds-primary); width: 0.98rem; height: 0.98rem; }
.pds-page .art-theme-head .tcount { font-family: var(--pds-mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0; color: var(--pds-ink-soft); background: var(--pds-surface-2); border-radius: 99px; padding: 0.14rem 0.5rem; }
.pds-page .art-theme-head::after { content: ""; height: 1px; background: var(--pds-line); flex: 1 1 auto; }

/* ── Guides (liste éditoriale) ────────────────────── */
.pds-page .guide-list { display: flex; flex-direction: column; gap: 0.2rem; }
.pds-page .guide-row { display: flex; gap: 1rem; padding: 0.7rem 0.2rem; border-bottom: 1px solid var(--pds-line); align-items: baseline; transition: padding-left .14s; }
.pds-page .guide-row:last-child { border-bottom: 0; }
.pds-page .guide-row .gn { font-family: var(--pds-mono); font-size: 0.85rem; color: var(--pds-gold); font-weight: 600; flex: 0 0 auto; }
.pds-page .guide-row .gt { font-size: 0.92rem; font-weight: 600; color: var(--pds-ink); line-height: 1.35; }
.pds-page .guide-row:hover { padding-left: 0.5rem; }
.pds-page .guide-row:hover .gt { color: var(--pds-primary); }

/* ── Outils & villes ──────────────────────────────── */
.pds-page .tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 0.5rem; }
.pds-page .tool-link { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; border-radius: 0.6rem; color: var(--pds-ink); font-weight: 600; font-size: 0.86rem; border: 1px solid var(--pds-line); background: var(--pds-surface); transition: border-color .14s, color .14s; }
.pds-page .tool-link .rz-ico { color: var(--pds-primary); width: 1.05rem; height: 1.05rem; }
.pds-page .tool-link:hover { border-color: var(--pds-primary); color: var(--pds-primary); }
.pds-page .alpha { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pds-page .alpha a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 0.5rem; border: 1px solid var(--pds-line); background: var(--pds-surface); font-family: var(--pds-mono); font-weight: 600; font-size: 0.9rem; color: var(--pds-ink); transition: background .14s, color .14s, border-color .14s; }
.pds-page .alpha a:hover { background: var(--pds-primary); color: #fff; border-color: var(--pds-primary); }

/* ── Back to top ──────────────────────────────────── */
.pds-page .to-top { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--pds-line); background: var(--pds-surface); color: var(--pds-ink); display: grid; place-items: center; box-shadow: 0 12px 30px -14px rgba(21,40,63,0.5); cursor: pointer; opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s; }
.pds-page .to-top .rz-ico { width: 1.3rem; height: 1.3rem; }
.pds-page .to-top.show { opacity: 1; transform: none; }
.pds-page .to-top:hover { color: var(--pds-primary); border-color: var(--pds-primary); }