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

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


/* ═══ En-tête de la section principale ═══ */
.dp-reg-sechead { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:2rem }
.dp-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){ .dp-h2{ font-size:2rem } }
.dp-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 }
.dp-more:hover { color:var(--primary) }

/* ═══ Groupe par région ═══ */
.dp-reg-section + .dp-reg-section { margin-top:2.5rem }
.dp-reg-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.5rem;
  margin-bottom:.9rem; padding-bottom:.5rem; border-bottom:1px solid var(--line) }
.dp-h3 { font-family:'Work Sans',system-ui,sans-serif; font-weight:600; letter-spacing:-.02em;
  color:var(--ink); font-size:1.15rem; margin:0 }
.dp-h3 a { text-decoration:none; color:inherit }
.dp-h3 a:hover { color:var(--primary-dark) }
.dp-count { font-family:monospace; font-size:.72rem; color:var(--ink-soft) }

/* ═══ Grille de cartes départements ═══ */
.dp-grid { display:grid; grid-template-columns:1fr; gap:.65rem }
@media (min-width:640px){ .dp-grid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .dp-grid{ grid-template-columns:repeat(3,1fr) } }

/* ═══ Carte département ═══ */
.dep-card { display:flex; align-items:center; gap:.85rem; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:.85rem 1rem; text-decoration:none;
  transition:border-color .16s, box-shadow .18s, transform .16s }
.dep-card:hover { border-color:color-mix(in oklch,var(--primary) 55%,white);
  box-shadow:0 16px 32px -24px rgba(20,40,80,.6); transform:translateY(-2px) }
.dep-card .num { font-family:monospace; font-weight:600; font-size:.78rem; color:var(--primary-dark);
  background:color-mix(in oklch,var(--primary) 10%,white); border:1px solid color-mix(in oklch,var(--primary) 22%,white);
  border-radius:9px; padding:.4rem .55rem; flex-shrink:0 }
.dep-card .bd { min-width:0; flex:1 }
.dep-card .nm { display:block; font-family:'Work Sans',system-ui,sans-serif; font-weight:600; font-size:1rem;
  letter-spacing:-.01em; color:var(--ink); line-height:1.15 }
.dep-card:hover .nm { color:var(--primary) }
.dep-card .arr { margin-left:auto; color:var(--ink-soft); flex-shrink:0;
  transition:transform .16s, color .16s }
.dep-card:hover .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) }