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


/* ═══ Colonne principale : sections ═══ */
.tp-main { display:flex; flex-direction:column; gap:3.5rem }

.tp-sechead { margin-bottom:1.5rem }
.tp-h2 { font-family:'Work Sans',system-ui,sans-serif; font-weight:600; letter-spacing:-.02em;
  color:var(--ink); font-size:1.45rem; margin:.4rem 0 .4rem }
@media (min-width:768px){ .tp-h2{ font-size:2rem } }
.tp-intro-text { font-size:.95rem; color:var(--ink-soft); line-height:1.6; margin:.3rem 0 0; max-width:64ch }

/* ═══ Séparateur de groupe ═══ */
.tp-group + .tp-group { margin-top:2rem }
.grp-rule { display:flex; align-items:center; gap:.8rem; margin-bottom:.85rem }
.grp-rule .gn { font-family:monospace; font-size:.7rem; font-weight:600; color:var(--ink-soft);
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:.15rem .6rem; white-space:nowrap; flex-shrink:0 }
.grp-rule .ln { flex:1; height:1px; background:var(--line) }

/* ═══ Grille de type-cards ═══ */
.type-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.55rem }
@media (min-width:640px){ .type-grid{ grid-template-columns:repeat(3,1fr) } }
@media (min-width:1280px){ .type-grid{ grid-template-columns:repeat(4,1fr) } }

.type-card { display:flex; align-items:center; gap:.65rem; background:var(--surface);
  border:1px solid var(--line); border-radius:13px; padding:.6rem .75rem; text-decoration:none;
  transition:border-color .15s, box-shadow .18s, transform .15s }
.type-card:hover { border-color:color-mix(in oklch,var(--primary) 55%,white);
  box-shadow:0 12px 28px -20px rgba(20,40,80,.55); transform:translateY(-2px) }
.type-card .ic { width:36px; height:36px; flex-shrink:0; border-radius:10px; display:grid; place-items:center;
  color:var(--primary-dark); background:color-mix(in oklch,var(--primary) 9%,white);
  border:1px solid color-mix(in oklch,var(--primary) 18%,white);
  transition:background .15s, color .15s, border-color .15s }
.type-card:hover .ic { background:var(--primary); color:#fff; border-color:var(--primary) }
.type-card .ic .rz-ico { width:18px; height:18px }
.type-card .lbl { font-size:.88rem; font-weight:600; color:var(--ink); line-height:1.18; min-width:0; overflow-wrap:break-word }
.type-card:hover .lbl { color:var(--primary) }

/* ═══ Activités : bouton "Toutes" ═══ */
.act-all-btn { display:flex; align-items:center; gap:.75rem; background:var(--primary);
  color:#fff; border-radius:14px; padding:1rem 1.2rem; margin-bottom:1rem;
  text-decoration:none; font-weight:600; font-size:.95rem; letter-spacing:.01em;
  transition:background .15s }
.act-all-btn:hover { background:var(--primary-dark) }
.act-all-btn .rz-ico { width:18px; height:18px; flex-shrink:0 }

/* ═══ Grille d'activités ═══ */
.act-grid { display:grid; grid-template-columns:1fr; gap:.5rem }
@media (min-width:560px){ .act-grid{ grid-template-columns:repeat(2,1fr) } }

.act-card { display:flex; align-items:center; gap:.7rem; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; padding:.6rem .8rem;
  text-decoration:none; transition:border-color .15s, background .15s }
.act-card:hover { border-color:color-mix(in oklch,var(--primary) 50%,white);
  background:color-mix(in oklch,var(--primary) 4%,white) }
.act-card .ic { width:30px; height:30px; flex-shrink:0; border-radius:8px; display:grid; place-items:center;
  color:var(--primary); background:var(--surface-2) }
.act-card .ic .rz-ico { width:16px; height:16px }
.act-card .nm { font-size:.9rem; font-weight:600; color:var(--ink) }
.act-card:hover .nm { color:var(--primary) }
.act-card .ct { margin-left:auto; font-family:monospace; font-size:.72rem; font-weight:600; color:var(--ink-soft);
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:.1rem .5rem }

/* ═══ Lien "Topos de randonnée" ═══ */
.tp-topo-link { display:flex; align-items:center; gap:.9rem; background:var(--surface);
  border:1px solid var(--line); border-radius:16px; padding:1.1rem 1.2rem;
  text-decoration:none; transition:border-color .16s }
.tp-topo-link:hover { border-color:color-mix(in oklch,var(--primary) 55%,white) }
.tp-topo-link .ic { width:46px; height:46px; flex-shrink:0; border-radius:12px;
  display:grid; place-items:center; background:var(--primary); color:#fff }
.tp-topo-link .ic .rz-ico { width:22px; height:22px }
.tp-topo-link .bd { min-width:0 }
.tp-topo-link .nm { display:block; font-family:'Work Sans',system-ui,sans-serif; font-weight:600;
  font-size:1.05rem; line-height:1.2; color:var(--ink) }
.tp-topo-link:hover .nm { color:var(--primary) }
.tp-topo-link .ds { display:block; font-size:.85rem; color:var(--ink-soft); margin-top:.25rem }
.tp-topo-link .arr { margin-left:auto; color:var(--ink-soft); flex-shrink:0;
  transition:transform .16s, color .16s }
.tp-topo-link:hover .arr { color:var(--primary); transform:translateX(3px) }

/* ═══ Sidebar : blocs .sb-* ═══ */
.sb-card { background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden }
.sb-card + .sb-card { margin-top:1.25rem }

.sb-head { display:flex; align-items:center; gap:.6rem; padding:.85rem 1.15rem; border-bottom:1px solid var(--line) }
.sb-head .rz-ico { color:var(--primary); width:18px; height:18px }
.sb-head .t { font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink) }

.sb-links { display:flex; flex-direction:column }
.sb-links a { display:block; text-decoration:none; color:var(--primary-dark); font-size:.9rem;
  font-weight:500; line-height:1.4; padding:.7rem 1.15rem; border-top:1px solid var(--line);
  transition:background .15s, color .15s }
.sb-links a:first-child { border-top:none }
.sb-links a:hover { background:color-mix(in oklch,var(--primary) 6%,white); color:var(--primary) }

.sb-more-link { display:block; text-align:center; font-size:.78rem; font-weight:600;
  color:var(--primary); padding:.75rem 1.15rem; border-top:1px solid var(--line);
  text-decoration:none; transition:background .15s }
.sb-more-link:hover { background:color-mix(in oklch,var(--primary) 6%,white) }

.sb-massifs { display:flex; flex-direction:column }
.sb-massifs a { display:flex; align-items:center; gap:.7rem; padding:.6rem 1.15rem;
  border-top:1px solid var(--line); text-decoration:none; color:var(--ink);
  font-size:.88rem; font-weight:600; transition:background .15s, color .15s }
.sb-massifs a:first-child { border-top:none }
.sb-massifs a:hover { background:color-mix(in oklch,var(--primary) 6%,white); color:var(--primary) }
.sb-massifs .ico { width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
  background:var(--surface-2); color:var(--ink-soft); flex-shrink:0 }
.sb-massifs .ico .rz-ico { width:14px; height:14px }
.sb-massifs a:hover .ico { background:color-mix(in oklch,var(--primary) 14%,white); color:var(--primary-dark) }
.sb-massifs .n { margin-left:auto; font-family:monospace; font-size:.72rem; font-weight:600; color:var(--ink-soft) }

.sb-fb { display:flex; align-items:center; gap:.8rem; padding:1rem 1.15rem;
  text-decoration:none; background:var(--ink); color:#fff; border-radius:14px;
  transition:filter .15s; margin-top:1.25rem }
.sb-fb:hover { filter:brightness(1.1) }
.sb-fb .rz-ico { width:26px; height:26px; flex-shrink:0; color:#fff }
.sb-fb .l { font-size:.7rem; color:rgba(255,255,255,.7); letter-spacing:.04em }
.sb-fb .h { font-weight:700; font-size:1.02rem; line-height:1 }
.sb-fb .h .rz { color:oklch(0.78 0.09 230) }