/* =========================================================
   SVsansT — ressources.css (version server-side first)
   Fonctionne sans JS • Accessibilité • Responsive
   ========================================================= */

/* ---------- Helpers ---------- */
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid rgba(37,99,235,.35); outline-offset: 2px; }

:root{
  --svs-blue:#2563eb;
  --svs-blue-600:#1d4ed8;
  --svs-ink:#0b1220;
  --svs-muted:#64748b;
  --svs-border:#e5e7eb;
  --svs-bg:#ffffff;
  --svs-soft:#f8fafc;
  --svs-success:#16a34a;
  --svs-warn:#f59e0b;
  --svs-danger:#dc2626;
}

/* ---------- Barre d’onglets (NAV) ---------- */
.resource-categories {
  position: sticky; top: 0; z-index: 50;
  background: #ffffffcc; backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid var(--svs-border);
}

.category-tabs {
  display: flex; gap: .75rem; padding: .75rem 0; justify-content: center; flex-wrap: wrap;
}

.category-tab {
  display: inline-block;
  text-decoration: none;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1;
  color: #374151;
  border: 1px solid var(--svs-border);
  background: #fff;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.category-tab:hover { color: var(--svs-blue-600); border-color: #bfd2ff; box-shadow: 0 3px 12px rgba(29,78,216,.07); }
.category-tab.active, .category-tab[aria-current="page"] {
  background: var(--svs-blue); color: #fff; border-color: var(--svs-blue);
}

/* ---------- Sections génériques ---------- */
.resource-content { padding: 40px 0 60px; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

.content-header {
  display: flex; gap: 1rem; align-items: center;
  justify-content: space-between; margin-bottom: 1.25rem;
}
.content-header h2 {
  margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  color: var(--svs-ink);
}
.suggest-btn {
  display: inline-block; border: 0; text-decoration: none;
  background: var(--svs-blue); color: #fff; font-weight: 700;
  padding: .6rem .9rem; border-radius: 10px;
  transition: transform .1s ease, background .2s ease, box-shadow .2s ease;
}
.suggest-btn:hover { background: var(--svs-blue-600); box-shadow: 0 10px 24px rgba(37,99,235,.25); }
.suggest-btn:active { transform: translateY(1px); }

/* ===== Barre de recherche — harmonisée (comme Cours/Accueil) ===== */
.search-box { position: relative; max-width: 500px; width: 100%; }
.search-box input[type="search"],
.search-box input[type="text"] {
  width: 100%;
  padding: 12px 50px 12px 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 1rem;
  background: #fff;
  outline: none;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.search-box input[type="search"]:focus,
.search-box input[type="text"]:focus {
  border-color: var(--svs-blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,.08);
}
.search-box button {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 0; cursor: pointer; color: #6b7280;
  line-height: 0; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px;
  transition: color .2s ease, background .2s ease;
}
.search-box button:hover { color: var(--svs-blue); background: #f3f4f6; }
.search-box button svg { width: 20px; height: 20px; display: block; }
/* centrage + espace */
.resource-content .search-box { margin: 0 auto 16px; display: block; }
@media (max-width: 768px) { .resource-content .search-box { margin: 0 auto 20px; } }

/* ===== Intégration rapide côté "Maladies" ===== */
.disease-filters {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: .8rem; margin-bottom: 1rem; padding: 1rem; background: var(--svs-soft);
  border:1px solid var(--svs-border); border-radius: 12px;
}
.filter-group label { display:block; margin: 0 0 .35rem; color:#334155; font-weight: 600; }
.filter-group select, .filter-group input[type="search"] {
  width: 100%; padding: .65rem .75rem; border: 1px solid #d1d5db; border-radius: 10px; font-size: .98rem;
}
.btn-small {
  display:inline-block; text-decoration:none; border:0; cursor:pointer;
  padding:.55rem .75rem; border-radius: 9px; font-weight: 800;
  background: #0b63d6; color:#fff;
}
.btn-small.secondary { background:#eef2f7; color: var(--svs-ink); }

.diseases-grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}
.disease-card {
  border:1px solid var(--svs-border); border-radius: 14px; background:#fff; padding: 1rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.disease-card:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(2,6,23,.07); }
.disease-title { margin:.1rem 0 .4rem; font-size: 1.08rem; color: var(--svs-ink); font-weight: 700; }
.disease-meta-line { display:flex; gap:.45rem; flex-wrap:wrap; margin-bottom:.5rem; color:#64748b; }
.meta-tag { display:inline-block; background:#eef2ff; color:#0b3d91; border-radius:999px; padding:.3rem .55rem; font-size:.82rem; font-weight:700; }
.meta-severity { padding:.3rem .55rem; border-radius:999px; font-size:.82rem; font-weight:800; }
.meta-severity.legere  { background:#ecfdf5; color:#065f46; }
.meta-severity.moderee { background:#fffbeb; color:#92400e; }
.meta-severity.grave   { background:#fff1f2; color:#9f1239; }
.disease-excerpt { margin: 0; color: #475569; line-height: 1.6; }

/* =========================================================
   GLOSSAIRE
   ========================================================= */
.alphabet-filter {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem;
  margin: 0 auto 1.1rem;
}
.alphabet-filter .letter-btn {
  display: inline-block; text-decoration: none; user-select: none;
  padding: .45rem .7rem; min-width: 38px; text-align: center;
  border-radius: 8px; border: 1px solid var(--svs-border); color:#334155; background:#fff;
  font-weight: 600; transition: .2s ease;
}
.alphabet-filter .letter-btn:hover { color: var(--svs-blue-600); border-color: #bfd2ff; }
.alphabet-filter .letter-btn.active { color:#fff; background: var(--svs-blue); border-color: var(--svs-blue); }

.glossaire-list { display: grid; gap: 1rem; }
.glossaire-item {
  background:#fff; border:1px solid var(--svs-border); border-radius: 12px; padding: 1rem 1.1rem;
  transition: box-shadow .2s ease, transform .2s ease;
}
.glossaire-item:hover { box-shadow: 0 10px 26px rgba(2,6,23,.06); transform: translateY(-1px); }
.glossaire-terme { margin: 0 0 .45rem; font-size: 1.1rem; color:#0f172a; }
.glossaire-definition { color:#475569; line-height: 1.6; }
.glossaire-meta { margin-top:.6rem; display:flex; gap:.4rem; flex-wrap:wrap; }

/* =========================================================
   RESSOURCES EXTERNES
   ========================================================= */
.external-resources { margin-top: .5rem; }
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
.resource-card {
  background: #fff;
  border: 1px solid var(--svs-border);
  border-radius: 14px;
  padding: 1rem;
  display: flex; flex-direction: column; gap: .65rem;
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}
.resource-card:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(2,6,23,.08); border-color: #dbeafe; }
.resource-icon {
  display: grid; place-items: center; height: 64px;
  border: 1px dashed var(--svs-border); border-radius: 10px; background: var(--svs-soft);
  padding: 8px; overflow: hidden;
}
.resource-logo { max-height: 48px; max-width: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.resource-card h3 {
  margin: .2rem 0 0; font-size: 1.05rem; line-height: 1.3; color: #0f172a; font-weight: 800;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.resource-description {
  color: #475569; line-height: 1.55; font-size: .95rem; margin-top: .1rem;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.resource-link {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem;
  text-decoration: none; font-weight: 800; font-size: .95rem; color: #fff;
  background: var(--svs-blue); border: 1px solid var(--svs-blue);
  padding: .55rem .8rem; border-radius: 10px;
  transition: background .18s ease, border-color .18s ease, transform .1s ease, box-shadow .18s ease;
}
.resource-link:hover { background: var(--svs-blue-600); border-color: var(--svs-blue-600); box-shadow: 0 8px 22px rgba(29,78,216,.18); }
.resource-link:active { transform: translateY(1px); }
.external-resources .empty-state {
  grid-column: 1 / -1; text-align: center; background: var(--svs-soft);
  border: 1px solid var(--svs-border); border-radius: 14px; padding: 28px 18px;
}
.external-resources .empty-state h3 { margin: 0 0 .3rem; font-size: 1.1rem; color: #0f172a; }
.external-resources .empty-state p { margin: 0; color: #64748b; }
@media (max-width: 520px){
  .resource-grid { grid-template-columns: 1fr; }
  .resource-icon { height: 56px; }
  .resource-logo { max-height: 42px; }
}

/* =========================================================
   BLOC "RESSOURCES SVsansT" (INTERNES, CAPSULES)
   ========================================================= */
.svs-internal-resources{
  margin-bottom: 1.6rem;
  padding: 1rem 1.1rem 1.15rem;
  border-radius: 18px;
  border: 1px dashed rgba(37,99,235,.35);
  background: radial-gradient(circle at top left,#e0ecff,#ffffff);
  box-shadow: 0 18px 42px rgba(15,23,42,.08);
}
.svs-internal-header{
  display:flex; flex-direction:column; gap:.45rem;
  margin-bottom:.9rem;
}
.svs-internal-badge{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.3rem .7rem;
  border-radius:999px;
  background:#1d4ed8;
  color:#f9fafb;
  font-size:.78rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.svs-internal-dot{
  width:8px; height:8px; border-radius:999px;
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.35);
}
.svs-internal-text{
  margin:0;
  font-size:.9rem;
  color:#1f2937;
  max-width:560px;
}
.svs-internal-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:.8rem;
}
.svs-internal-pill{
  position:relative;
  padding:.85rem .95rem 1.05rem;
  border-radius:14px;
  background:#ffffff;
  border:1px solid #dbeafe;
  box-shadow:0 12px 28px rgba(37,99,235,.09);
  display:flex;
  flex-direction:column;
  gap:.45rem;
}
.svs-pill-topline{
  display:flex; justify-content:space-between; align-items:center;
  gap:.5rem; margin-bottom:.1rem;
}
.svs-pill-label{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#64748b;
  font-weight:800;
}
.svs-pill-chip{
  font-size:.78rem;
  font-weight:700;
  padding:.2rem .6rem;
  border-radius:999px;
  background:#eff6ff;
  color:#1d4ed8;
}
.svs-pill-title{
  margin:0;
  font-size:.98rem;
  font-weight:800;
  color:#0f172a;
}
.svs-pill-desc{
  margin:0;
  font-size:.9rem;
  color:#4b5563;
  line-height:1.55;
}
.svs-pill-link{
  margin-top:auto;
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  padding:.45rem .85rem;
  border-radius:999px;
  border:1px solid #1d4ed8;
  background:linear-gradient(135deg,#1d4ed8,#2563eb);
  color:#f9fafb;
  font-size:.88rem;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 10px 26px rgba(37,99,235,.35);
  transition:transform .08s ease, box-shadow .12s ease, filter .12s ease;
}
.svs-pill-link:hover{
  filter:brightness(1.04);
  box-shadow:0 14px 32px rgba(37,99,235,.45);
}
.svs-pill-link:active{
  transform:translateY(1px);
  box-shadow:0 8px 20px rgba(37,99,235,.35);
}

@media (max-width:640px){
  .svs-internal-resources{
    padding:.9rem .9rem 1.05rem;
  }
}

/* =========================================================
   FICHE MALADIE (OVERLAY)
   ========================================================= */

/* Couche overlay + backdrop + dialog */
.server-overlay {
  position: fixed; inset: 0; z-index: 99990; display: block;
  animation: svsFadeIn .18s ease-out;
}
.server-overlay__backdrop {
  position: absolute; inset: 0; background: rgba(2,6,23,.6);
  backdrop-filter: blur(2px);
}
.server-overlay__dialog {
  position: relative; max-width: 1040px; margin: 5vh auto; background: #fff; color: var(--svs-ink);
  border-radius: 16px; max-height: 90vh; overflow: hidden; box-shadow: 0 24px 72px rgba(2,6,23,.35);
  display: flex; flex-direction: column;
  transform: translateY(6px); animation: svsSlideUp .22s ease-out forwards;
}

/* En-tête sticky */
.modal-header {
  position: sticky; top: 0; z-index: 2; background: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--svs-border);
}
.modal-header h2 { margin: 0; font-size: clamp(1.15rem, 2vw, 1.35rem); font-weight: 800; color: var(--svs-ink); }
.close-btn {
  text-decoration: none; font-size: 28px; line-height: 1; font-weight: 700; color: var(--svs-ink);
  padding: 2px 8px; border-radius: 8px; transition: background .15s ease, transform .1s ease;
}
.close-btn:hover { background: #f3f4f6; }
.close-btn:active { transform: translateY(1px); }

/* Corps de fiche */
.disease-detail-content {
  padding: 0; overflow: auto; /* autorise le scroll du contenu */
}
.disease-panel {
  display: grid; grid-template-columns: 1.4fr .9fr; gap: 0; /* séparation visuelle gérée par bordures */
  min-height: 0; /* fix overflow grid */
}

/* Colonne principale */
.disease-main {
  padding: 20px; background: #fff;
  border-right: 1px solid var(--svs-border);
}
.disease-main .section { margin-bottom: 18px; }
.disease-main .section h3 {
  margin: 0 0 .45rem; font-size: 1rem; font-weight: 800; color: #0f172a;
}
.disease-main .section p { margin: 0; line-height: 1.65; color: #334155; }
.disease-main .section ul { margin: .2rem 0 0 1.1rem; padding: 0; color: #334155; line-height: 1.6; }
.disease-main .section li { margin: .15rem 0; }
.disease-empty { color: #64748b; font-style: italic; }

/* Colonne latérale */
.disease-side {
  padding: 20px; background: #f9fafb;
}

/* Panneau méta */
.meta-list { display: grid; grid-template-columns: 1fr; gap: 8px; }
.meta-item {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 10px 12px; background: #fff; border: 1px solid var(--svs-border); border-radius: 10px;
}
.meta-item > div:first-child { color:#64748b; font-weight: 700; }
.meta-item > div:last-child { color:#0f172a; font-weight: 700; }

/* Carrousel d’images */
.image-carousel { overflow: hidden; border: 1px solid var(--svs-border); border-radius: 12px; background: #fff; }
.carousel-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 180px; gap: 8px; padding: 10px; overflow-x: auto; }
.carousel-item { width: 180px; height: 120px; border-radius: 10px; overflow: hidden; border: 1px solid #e5e7eb; background: #f8fafc; }
.carousel-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Liens (sources / utiles) */
.disease-links { display: grid; gap: 8px; }
.disease-links a {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  padding: .5rem .65rem; border-radius: 8px; font-weight: 700;
  color: var(--svs-blue); background: #eef2ff; border: 1px solid #e0e7ff;
  transition: background .15s ease, transform .1s ease, box-shadow .2s ease;
}
.disease-links a:hover { background: #e0e7ff; box-shadow: 0 6px 18px rgba(37,99,235,.18); }
.disease-links a:active { transform: translateY(1px); }

/* Footer fiche */
.disease-footer {
  display: flex; gap: 1rem; justify-content: space-between; align-items: center;
  padding: 12px 20px; background: #fff; border-top: 1px solid var(--svs-border); color:#475569; font-size:.92rem;
}

/* Animations */
@keyframes svsFadeIn { from { opacity: .001 } to { opacity: 1 } }
@keyframes svsSlideUp { from { transform: translateY(12px); opacity: .92 } to { transform: translateY(0); opacity: 1 } }

/* Petits écrans */
@media (max-width: 980px){
  .server-overlay__dialog { margin: 0; max-width: none; min-height: 100vh; border-radius: 0; }
  .disease-panel { grid-template-columns: 1fr; }
  .disease-main { border-right: 0; border-bottom: 1px solid var(--svs-border); }
  .disease-footer { position: sticky; bottom: 0; background: #fff; }
}

/* Imprimé (on masque le backdrop et on met un style clair) */
@media print{
  .server-overlay { position: static; inset: auto; }
  .server-overlay__backdrop { display: none !important; }
  .server-overlay__dialog { box-shadow: none; max-height: none; }
}

/* =========================================================
   THEME SOMBRE LÉGER (si body[data-theme="dark"] ou .dark)
   ========================================================= */
body.dark .page-header { background: #1d4ed8; }
body.dark .page-header p { color:#cbd5e1; }
body.dark .resource-categories { background: #0b1220cc; border-color:#1f2937; }
body.dark .category-tab { background:#0b1220; color:#e5e7eb; border-color:#1f2937; }
body.dark .category-tab.active { background:#2563eb; border-color:#2563eb; color:#fff; }
body.dark .resource-content { background:#020617; }
body.dark .disease-filters { background:#0f172a; border-color:#1f2937; }
body.dark .filter-group select,
body.dark .filter-group input[type="search"] { background:#020617; color:#e5e7eb; border-color:#1f2937; }
body.dark .diseases-grid .disease-card { background:#0f172a; border-color:#1f2937; }
body.dark .disease-title { color:#e5e7eb; }
body.dark .disease-excerpt { color:#cbd5e1; }
body.dark .glossaire-item { background:#020617; border-color:#1f2937; }
body.dark .glossaire-terme { color:#e5e7eb; }
body.dark .glossaire-definition { color:#cbd5e1; }
body.dark .meta-tag { background:#1e293b; color:#bfdbfe; }
body.dark .external-resources .empty-state { background:#020617; border-color:#1f2937; }
body.dark .resource-card { background:#020617; border-color:#1f2937; }
body.dark .resource-card h3 { color:#e5e7eb; }
body.dark .resource-description { color:#cbd5e1; }
body.dark .resource-icon { background:#020617; border-color:#1f2937; }
body.dark .server-overlay__dialog { background:#0f172a; color:#e5e7eb; }
body.dark .modal-header { background:#0f172a; border-color:#1f2937; }
body.dark .close-btn { color:#e5e7eb; }
body.dark .close-btn:hover { background:#111827; }
body.dark .disease-main { background:#0f172a; border-color:#1f2937; }
body.dark .disease-main .section h3 { color:#e5e7eb; }
body.dark .disease-main .section p,
body.dark .disease-main .section ul { color:#cbd5e1; }
body.dark .disease-side { background:#020617; }
body.dark .meta-item { background:#020617; border-color:#1f2937; }
body.dark .meta-item > div:first-child { color:#94a3b8; }
body.dark .meta-item > div:last-child { color:#e5e7eb; }
body.dark .image-carousel { background:#020617; border-color:#1f2937; }
body.dark .carousel-item { background:#020617; border-color:#1f2937; }
body.dark .disease-links a { background:#1e293b; border-color:#1e3a8a; color:#93c5fd; }
body.dark .disease-links a:hover { background:#1f2a44; }
body.dark .disease-footer { background:#020617; border-color:#1f2937; color:#cbd5e1; }
body.dark .svs-internal-resources{
  background: radial-gradient(circle at top left,#020617,#020617);
  border-color:#1d4ed8;
  box-shadow:0 18px 46px rgba(15,23,42,.9);
}
body.dark .svs-internal-text{ color:#e5e7eb; }
body.dark .svs-internal-pill{
  background:#020617;
  border-color:#1f2937;
  box-shadow:0 12px 32px rgba(15,23,42,.9);
}
body.dark .svs-pill-title{ color:#e5e7eb; }
body.dark .svs-pill-desc{ color:#cbd5e1; }

/* ===== Verrouillage — uniquement pour Liste des maladies ===== */
.disease-card.is-locked {
  position: relative;
  opacity: 0.88; /* aspect verrouillé mais lisible */
}

/* Overlay qui intercepte les clics */
.lock-overlay {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(15,23,42,0.14), rgba(15,23,42,0.24));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  text-align: center;
  padding: 1rem;
  z-index: 2;
}

/* Icône cadenas dégradée (32px) */
.lock-icon {
  width: 32px;
  height: 32px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 48 48'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='24' y1='23.6' x2='24' y2='-6.5' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23f3c57a'/%3E%3Cstop offset='.49' stop-color='%23f39369'/%3E%3Cstop offset='1' stop-color='%23e94867'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='24' y1='11.67' x2='24' y2='31.36' xlink:href='%23a'/%3E%3ClinearGradient id='b' x1='24' y1='65' x2='24' y2='-28.49' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23273a9b'/%3E%3Cstop offset='.56' stop-color='%23202f65'/%3E%3Cstop offset='1' stop-color='%23021e2f'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' y1='30.44' x2='24' y2='41' xlink:href='%23b'/%3E%3ClinearGradient id='e' x1='24' y1='46.55' x2='24' y2='24.04' xlink:href='%23a'/%3E%3ClinearGradient id='f' x1='24' y1='36.75' x2='24' y2='26.33' xlink:href='%23a'/%3E%3C/defs%3E%3Cpath d='M36 31.71H12V15a12 12 0 1 1 24 0zm-19.18-4.79h14.36V15a7.18 7.18 0 1 0-14.35 0z' fill='url(%23a)'/%3E%3Cpath d='M36 17.55a3.46 3.46 0 0 0-1.1-.19h-3.72v9.57H16.82v-9.58h-3.68a3.46 3.46 0 0 0-1.1.19v14.17H36z' fill='url(%23c)'/%3E%3Crect x='9' y='21' width='30' height='24' rx='3.89' ry='3.89' fill='url(%23b)'/%3E%3Cpath d='M12.89 21a3.88 3.88 0 0 0-3.68 2.67h29.57A3.88 3.88 0 0 0 35.11 21z' fill='url(%23d)'/%3E%3Cpath d='M27.24 31.74a3.24 3.24 0 0 0-6.39-.74 3.21 3.21 0 0 0 .63 2.81 1.72 1.72 0 0 1 .36 1.09v.48A2.16 2.16 0 0 0 24 37.5a2.16 2.16 0 0 0 2.16-2.16v-.48a1.78 1.78 0 0 1 .37-1.11 3.19 3.19 0 0 0 .71-2.01z' fill='url(%23e)'/%3E%3Cpath d='M27 32.88a3.23 3.23 0 0 0-3.88-2 3.2 3.2 0 0 0-2.16 2 3.24 3.24 0 0 0 .5.9 1.72 1.72 0 0 1 .36 1.09v.48a2.16 2.16 0 1 0 4.32 0v-.48a1.78 1.78 0 0 1 .37-1.11 3.24 3.24 0 0 0 .49-.88z' fill='url(%23f)'/%3E%3C/svg%3E");
}

.lock-text {
  font-size: .9rem;
  font-weight: 700;
  color: #0f172a;
  background: #ffffffcc;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}

/* Bouton de déverrouillage (lien vers /auth/) */
.unlock-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  text-decoration: none;
  font-weight: 800;
  font-size: .95rem;
  color: #fff;
  background: var(--svs-blue);
  border: 1px solid var(--svs-blue);
  padding: .55rem .8rem;
  border-radius: 10px;
  transition: background .18s ease, border-color .18s ease, transform .1s ease, box-shadow .18s ease;
}
.unlock-btn:hover {
  background: var(--svs-blue-600);
  border-color: var(--svs-blue-600);
  box-shadow: 0 8px 22px rgba(29,78,216,.18);
}
.unlock-btn:active { transform: translateY(1px); }

/* Mode sombre */
body.dark .lock-overlay { background: linear-gradient(180deg, rgba(2,6,23,0.25), rgba(2,6,23,0.35)); }
body.dark .lock-text { color:#e5e7eb; background:#0b1220cc; border-color:#1f2937; }

/* Toast minimal : texte noir, sans fond */
.svs-toast,[data-toast="1"]{
  background: transparent !important;
  color: #0b1220 !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-weight: 700;
  line-height: 1.2;
  pointer-events: none; /* clics traversants */
}

/* === AJOUTS ciblés : contrôle d’affichage & panneau mobile
   — respecte la palette existante (var(--svs-*)) ================= */

/* Visibilité desktop vs mobile */
.only-desktop { display: block; }
.only-mobile  { display: none; }

/* Panneau mobile (details/summary) */
.filters-mobile { width: 100%; }
.filters-mobile__toggle{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.8rem 1rem;
  background:#fff; border:1px solid var(--svs-border); border-radius:12px;
  font-weight:700; color: var(--svs-ink); cursor:pointer; user-select:none; list-style:none;
}
.filters-mobile[open] .filters-mobile__toggle{
  border-bottom-left-radius:0; border-bottom-right-radius:0;
  background:#fff;
}
.filters-mobile__panel{
  border:1px solid var(--svs-border); border-top:none; background:#fff;
  border-bottom-left-radius:12px; border-bottom-right-radius:12px;
  padding:14px;
}
.filters-mobile__form{ display:grid; gap:12px; }
.fm-label{ font-size:.92rem; font-weight:600; color:#334155; }
.fm-input, .fm-select{
  width:100%; height:44px; border:1px solid #d1d5db; border-radius:10px;
  padding:0 .9rem; background:#fff; font-size:.98rem;
}
.fm-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.fm-actions{ display:flex; gap:.6rem; align-items:center; }
.fm-apply{
  height:44px; border:none; border-radius:10px;
  background: var(--svs-blue); color:#fff; font-weight:700; cursor:pointer;
  transition: filter .15s ease, transform .02s ease, box-shadow .18s ease;
}
.fm-apply:hover{ filter:brightness(1.04); box-shadow:0 6px 18px rgba(29,78,216,.18); }
.fm-apply:active{ transform:translateY(1px); }
.fm-reset{
  display:inline-flex; align-items:center; text-decoration:none; font-weight:800;
  height:44px; padding:0 .9rem; border-radius:10px;
  background:#eef2f7; color: var(--svs-ink); border:1px solid var(--svs-border);
}

/* Breakpoint mobile : n’afficher QUE le panneau déroulant */
@media (max-width: 720px){
  .only-desktop{ display:none !important; }
  .only-mobile{ display:block !important; }
  .fm-row{ grid-template-columns:1fr; }
}



/* =========================================================
   ONGLET RESSOURCES — Responsive mobile (3 onglets)
   ========================================================= */

/* (optionnel mais recommandé) : sticky sous le header */
.resource-categories{
  top: var(--svs-header-h, 64px);
}

/* Desktop (inchangé globalement) */
.category-tabs{
  align-items: center;
}

/* Mobile/tablette : onglets en grille, gros boutons cliquables */
@media (max-width: 640px){
  .category-tabs{
    display: grid;
    grid-template-columns: 1fr;     /* 3 lignes */
    gap: .55rem;
    justify-content: stretch;
    padding: .75rem 0;
  }

  .category-tab{
    width: 100%;
    text-align: center;
    border-radius: 12px;           /* moins "pilule" pour 1 ligne large */
    padding: .75rem 1rem;          /* plus confortable au doigt */
    line-height: 1.15;
    white-space: normal;           /* autorise le retour à la ligne si besoin */
    word-break: break-word;
  }
}

/* Entre 641px et 860px : 2 colonnes (optionnel, souvent plus joli) */
@media (min-width: 641px) and (max-width: 860px){
  .category-tabs{
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 colonnes */
    gap: .6rem;
    padding: .75rem 0;
  }
  .category-tab{
    width: 100%;
    text-align: center;
    border-radius: 999px;          /* tu peux laisser pilule ici */
    white-space: normal;
    line-height: 1.15;
  }
  /* Le 3e onglet prend toute la ligne (si tu veux un rendu parfait) */
  .category-tabs .category-tab:nth-child(3){
    grid-column: 1 / -1;
  }
}