/*********************** BASES *************************/
:root{
  --bg:#fff;
  --border:#e5e7eb;
  --border-hover:#e2e8f0;
  --text:#0f3c4c;
  --muted:#64748b;
  --chip:#f3f4f6;
  --badge:#dbeafe;
  --badge-fg:#1e40af;
  --shadow:0 6px 18px rgba(0,0,0,.06);
  --shadow-hover:0 10px 28px rgba(14,165,233,.18);
}

/* Single view & forms (garde tes règles utiles) */
.resources-single .img-wrapper img{width:200px;flex-shrink:0}
.resources-addentry .form-group label,
.resources-asearch  .form-group label{font-weight:700;padding-top:20px}

/******************** LISTE EN CARTES (<table>) ********************/
.generaltable{
  width:100%;
  border-collapse:separate;
  border-spacing:0 14px;      /* espace entre cartes */
  table-layout:fixed;         /* colonnes figées = alignement parfait */
}

.generaltable tbody tr th{
  background:var(--bg);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:0;                  /* padding porté par .cell */
  vertical-align:middle;      /* centrage vertical naturel */
}
.generaltable tbody tr th:first-child{
  border-left:1px solid var(--border);
  border-top-left-radius:14px;
  border-bottom-left-radius:14px;
  box-shadow:var(--shadow);
}
.generaltable tbody tr th:last-child{
  border-right:1px solid var(--border);
  border-top-right-radius:14px;
  border-bottom-right-radius:14px;
}
.generaltable tbody tr:hover th{border-top-color:var(--border-hover);border-bottom-color:var(--border-hover)}
.generaltable tbody tr:hover th:first-child{box-shadow:var(--shadow-hover)}

/* ---- Largeurs stables : 1 grande colonne gauche + 3 à droite ---- */
.generaltable tbody tr th:nth-child(1){width:58%; text-align:left}
.generaltable tbody tr th:nth-child(2){width:14%; text-align:center}
.generaltable tbody tr th:nth-child(3){width:18%; text-align:center}
.generaltable tbody tr th:nth-child(4){width:10%; text-align:center}

/* ---- Wrapper interne pour hauteur/alignement homogènes ---- */
.cell{
  display:flex; align-items:center; gap:.75rem;
  min-height:96px;            /* hauteur identique de carte */
  padding:14px 16px;
  min-width:0;                /* permet l’ellipsis du titre */
  justify-content:flex-start; /* gauche = aligné bord gauche */
}
.cell.center{ justify-content:center } /* colonnes de droite centrées */

/*********************** BLOC GAUCHE ************************/
/* Titre sur 1 ligne + pastille accolée */
.titleline{
  display:flex; align-items:center; gap:.5rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.title{margin:0;font-size:1.06rem;font-weight:800;line-height:1.25;min-width:0}
.title a{color:var(--text);text-decoration:none}
.title a:hover{text-decoration:underline}

/* Pastille catégorie */
.badge-inline{
  flex-shrink:0;
  display:inline-block; padding:.22rem .6rem; border-radius:9999px;
  background:var(--badge); color:var(--badge-fg); font-weight:700; font-size:.78rem;
}
.badge-inline[data-cat*="Outil"]{background:#dcfce7;color:#166534}
.badge-inline[data-cat*="Méthod"]{background:#dbeafe;color:#1e40af}

/* Intervenants sous le titre */
.meta-under{margin:.25rem 0 0;color:var(--muted);font-size:.88rem}

/******************* BLOCS DROITE (centrés) *******************/
/* Niveau (barre 🌱🌿🌳 + libellé) */
.level{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap}
.levelbar{
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.2rem .5rem;border-radius:9999px;background:#f8fafc;border:1px solid var(--border);
  min-height:28px;
}
.levelbar .leaf{opacity:.25;font-size:1.05rem;line-height:1}
.levelbar[data-level*="Débutant"]      .leaf[data-pos="1"]{opacity:1}
.levelbar[data-level*="Intermédiaire"] .leaf[data-pos="1"],
.levelbar[data-level*="Intermédiaire"] .leaf[data-pos="2"]{opacity:1}
.levelbar[data-level*="Avancé"]        .leaf{opacity:1}
.level .label{font-weight:700}

/* Chips (modalités, durée, prérequis) */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--chip);padding:.35rem .65rem;border-radius:10px;
  font-size:.92rem;color:#374151
}
.chip i{font-style:normal;opacity:.75}

/*********************** RESPONSIVE ************************/
@media (max-width:820px){
  .generaltable tbody tr{display:block}
  .generaltable tbody tr th{display:block;width:auto !important;text-align:left}
  .cell,.cell.center{justify-content:flex-start;min-height:unset}
  .titleline{white-space:normal} /* autorise le retour à la ligne du titre sur mobile */
}


:root{
  --bg:#fff; --ink:#15455d; --muted:#6b8290;
  --border:#e5e7eb; --chip:#f3f4f6;
  --badge:#dbeafe; --badge-fg:#1e3a8a;
  --shadow:0 10px 26px rgba(15,70,100,.10);
}

/* Conteneur global */
.resources-single{
  border:1px solid #eef2f7; border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:var(--shadow);
}

/* En-tête (sans image) */
.fs-hero{ padding:1.1rem 1.25rem 0.6rem; background:linear-gradient(180deg,#fbfdff,#fff) }
.eyebrow{ display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; margin-bottom:.4rem }
.badge{ display:inline-block; padding:.22rem .6rem; border-radius:9999px; background:var(--badge); color:var(--badge-fg); font-weight:700; font-size:.78rem }
.badge[data-cat*="Outil"]{ background:#dcfce7; color:#166534 }
.codechip{ display:inline-flex; align-items:center; gap:.45rem; background:var(--chip); padding:.35rem .7rem; border-radius:10px; font-size:.9rem; color:#3b4e58 }
.title{ margin:.1rem 0 .15rem; font-size:1.5rem; line-height:1.2; font-weight:800; color:var(--ink) }
.subtitle{ margin:0; color:var(--muted); font-size:.95rem }

/* Ligne de méta (durée, modalité, niveau) */
.meta-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.65rem; margin-bottom:.2rem }
.chip{ display:inline-flex; align-items:center; gap:.45rem; background:var(--chip); padding:.38rem .7rem; border-radius:12px; font-size:.92rem; color:#374151 }
.chip i{ font-style:normal; opacity:.75 }

/* Niveau visuel (compact dans une chip) */
.levelchip{ display:inline-flex; align-items:center; gap:.5rem }
.levelbar{ display:inline-flex; align-items:center; gap:.25rem; padding:.15rem .45rem; border-radius:9999px; border:1px solid var(--border); background:#f8fafc }
.levelbar .leaf{ opacity:.25; font-size:1.05rem; line-height:1 }
.levelbar[data-level*="Débutant"]      .leaf[data-pos="1"]{opacity:1}
.levelbar[data-level*="Intermédiaire"] .leaf[data-pos="1"], .levelbar[data-level*="Intermédiaire"] .leaf[data-pos="2"]{opacity:1}
.levelbar[data-level*="Avancé"]        .leaf{opacity:1}
.levelchip .label{ font-weight:700; color:var(--ink) }

/* Corps */
.fs-body{ display:grid; grid-template-columns:1.1fr .9fr; gap:1.4rem; padding:1rem 1.25rem 1.25rem; border-top:1px solid #eef2f7 }
@media (max-width:880px){ .fs-body{ grid-template-columns:1fr } }

.section h3{ font-size:1.12rem; margin:.2rem 0 .65rem; font-weight:800; color:var(--ink) }
.section p{ margin:.4rem 0; color:#223844 }

/* Encadré infos pratiques */
.card{ border:1px solid var(--border); border-radius:14px; padding:1rem; background:#fbfdff }
.infogrid{ display:grid; grid-template-columns:1fr; gap:.6rem }
.infogrid div strong{ display:block; font-size:.95rem; color:#234c63 }
.infogrid .muted{ color:var(--muted) }

/* Lien externe */
.cta{ display:inline-flex; align-items:center; gap:.5rem; margin-top:.8rem; padding:.55rem .9rem; border-radius:10px; font-weight:700; background:#155e75; color:#fff !important; text-decoration:none }
.cta:hover{ filter:brightness(1.05) }

/* Bibliographie */
.fs-biblio{ padding:0 1.25rem 1.25rem }

/* Permettre le retour à la ligne du titre en vue liste (desktop) */
.generaltable .titleline{
  white-space: normal;          /* autorise les retours à la ligne */
  overflow: visible;            /* ne masque plus le texte */
  text-overflow: clip;          /* supprime l'ellipse */
}

/* Empêche la coupure au niveau du conteneur */
.generaltable .cell{ min-width: 0; }

/* Forcer la césure si très long mot/sans espace */
.generaltable .title,
.generaltable .title a{
  overflow-wrap: anywhere;      /* casse proprement les mots trop longs */
  word-break: normal;
}

/* Évite que la pastille prenne toute la place */
.generaltable .badge-inline{
  flex-shrink: 0;
}

/* Bloc édition */
.editbox{
  float:right;
  background:#f3f4f6;          /* gris clair au lieu de bleu */
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:.35rem .6rem;
  font-size:.85rem;
  display:inline-flex;
  gap:.4rem;
}
.editbox span{ cursor:pointer }

/* Infogrid compact */
.infogrid{ display:grid; gap:.4rem }   /* réduit l’espacement */
.infogrid div strong{ display:block; font-size:.9rem; color:#234c63; margin-bottom:.1rem }
.infogrid .muted{ color:#6b7280; font-size:.88rem }

.muted:empty::after {
  content: "Aucun";
color: #6b7280;
}