/* ── Page régions (r/index.php) — layout Tailwind ──
   CSS servie brute au navigateur (pas de build).
   S'appuie sur les variables globales de randozone.css (--ink, --primary, --line…). */

/* ═══ Structure ═══ */
.rg-stack { display:flex; flex-direction:column; gap:3rem }
@media (min-width:768px){ .rg-stack{ gap:4rem } }


/* ═══ En-têtes de section ═══ */
.rg-sechead { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.5rem }
.rg-h2 { font-family:'Work Sans',system-ui,sans-serif; font-weight:600; letter-spacing:-.02em;
  color:var(--ink); margin:.375rem 0 0; font-size:1.45rem }
@media (min-width:768px){ .rg-h2{ font-size:2rem } }
.rg-more { display:inline-flex; align-items:center; gap:.45rem; font-size:.85rem; font-weight:600;
  color:var(--primary-dark); text-decoration:none; white-space:nowrap }
.rg-more:hover { color:var(--primary) }

/* ═══ Layout carte + liste ═══ */
.rg-cols { display:grid; grid-template-columns:1fr; gap:2rem; align-items:start }
@media (min-width:1024px){ .rg-cols{ grid-template-columns:minmax(0,.92fr) minmax(0,1fr); gap:2.5rem } }

/* ═══ Panneau carte (vrai SVG régions) ═══ */
.map-panel { position:relative; border-radius:16px; border:1px solid var(--line); background:var(--surface);
  box-shadow:0 20px 50px -30px rgba(20,40,80,.35); overflow:hidden; padding:.5rem }
.map-panel.rg-sticky { position:sticky; top:1.5rem }
.map-panel .svg-content { width:100%; height:auto; display:block }
.map-legend { display:flex; align-items:center; gap:.45rem; margin-top:.4rem; padding:.2rem .4rem;
  font-family:monospace; font-size:.62rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft) }
.map-legend .d { width:9px; height:9px; border-radius:50%; flex-shrink:0; border:2px solid var(--primary) }

/* ═══ Régions SVG (hover + active) ═══ */
.map-panel .land { cursor:pointer; fill:color-mix(in oklch,var(--primary) 16%,white);
  stroke:#fff; stroke-width:1.5; transition:fill .15s }
.map-panel .land:hover,
.map-panel .land.is-active { fill:color-mix(in oklch,var(--primary) 45%,white) }
/* Labels texte embarqués dans le SVG */
.map-panel text { pointer-events:none; font-size:22px !important; fill:oklch(0.38 0.13 235) }

/* ═══ Liste des régions ═══ */
.reg-list { display:grid; grid-template-columns:1fr; gap:.6rem }
@media (min-width:640px){ .reg-list{ grid-template-columns:repeat(2,1fr) } }

.reg-row { display:flex; align-items:center; gap:.85rem; padding:.8rem .95rem; border-radius:14px;
  border:1px solid var(--line); background:var(--surface); text-decoration:none;
  transition:border-color .16s, box-shadow .18s, transform .16s }
.reg-row:hover, .reg-row.is-active { border-color:color-mix(in oklch,var(--primary) 55%,white);
  box-shadow:0 16px 32px -24px rgba(20,40,80,.6); transform:translateX(2px) }
.reg-row .tick { width:4px; align-self:stretch; min-height:34px; border-radius:999px;
  background:var(--primary); opacity:.45; flex-shrink:0; transition:opacity .16s }
.reg-row:hover .tick, .reg-row.is-active .tick { opacity:1 }
.reg-row .bd { min-width:0 }
.reg-row .nm { display:block; font-family:'Work Sans',system-ui,sans-serif; font-weight:600;
  font-size:1rem; letter-spacing:-.01em; line-height:1.15; color:var(--ink) }
.reg-row:hover .nm, .reg-row.is-active .nm { color:var(--primary-dark) }
.reg-row .ds { display:block; font-size:.76rem; color:var(--ink-soft); margin-top:.14rem; line-height:1.35 }
.reg-row .arr { margin-left:auto; color:var(--ink-soft); flex-shrink:0; transition:transform .16s, color .16s }
.reg-row:hover .arr, .reg-row.is-active .arr { color:var(--primary); transform:translateX(3px) }

/* ═══ Cartes outre-mer ═══ */
.om-grid { display:grid; grid-template-columns:1fr; gap:1rem }
@media (min-width:640px){ .om-grid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .om-grid{ grid-template-columns:repeat(4,1fr) } }

.om-card { display:flex; flex-direction:column; gap:.5rem; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:1.15rem 1.2rem; text-decoration:none;
  transition:border-color .16s, box-shadow .18s, transform .18s }
.om-card:hover { border-color:color-mix(in oklch,var(--primary) 55%,white);
  box-shadow:0 18px 36px -24px rgba(20,40,80,.6); transform:translateY(-3px) }
.om-card .ic { width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  color:var(--primary-dark); background:color-mix(in oklch,var(--primary) 10%,white);
  border:1px solid color-mix(in oklch,var(--primary) 22%,white) }
.om-card .ic .rz-ico { width:20px; height:20px }
.om-card .nm { font-family:'Work Sans',system-ui,sans-serif; font-weight:600;
  font-size:1.12rem; letter-spacing:-.01em; color:var(--ink) }
.om-card:hover .nm { color:var(--primary) }
.om-card .ds { font-size:.8rem; color:var(--ink-soft); line-height:1.45 }
.om-card .go { margin-top:auto; display:inline-flex; align-items:center; gap:.4rem; font-size:.74rem;
  font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--primary-dark) }
.om-card .go .rz-ico { transition:transform .16s }
.om-card:hover .go .rz-ico { transform:translateX(3px) }