/* ===========================
   Pages commun (détail & listing)
   Fichier : static/css/pages-common.css
   Dépend de : base.css (variables :root)
   =========================== */

/* --- Hauteur empilée du header (nav + topbar).
       Ajuste la valeur si besoin (ex: 112px, 96px, etc.) --- */
:root {
  --header-stack-height: 112px;
}

/* ========== Layout principal ========== */
.detail-scope{
  padding: 1.25rem 0 2rem;
  background: var(--bg);
  color: var(--text);
}
.detail-title{ margin-bottom: .5rem; }

.detail-grid{
  display: grid;
  grid-template-columns: 280px 1fr; /* sidebar + contenu */
  gap: 2rem;
  align-items: stretch; /* <= pour que la colonne s’étire sur toute la hauteur */
}

/* ========== Sidebar ========== */
/* La colonne de gauche ne gère plus le sticky ni l'overflow.
   On les met sur .sidebar-inner pour éviter le “trou” en bas. */
.detail-sidebar{
  /* structure uniquement – pas de sticky ici */
}

/* Wrapper interne sticky + scroll si nécessaire */
.detail-sidebar .sidebar-inner{
  position: sticky;
  top: var(--header-stack-height);

  /* hauteur disponible sur l’écran */
  height: calc(100vh - var(--header-stack-height));
  overflow: auto;

  /* style visuel de la boîte */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 16px;
}

/* dvh pour navigateurs modernes (claviers virtuels, etc.) */
@supports(height: 100dvh){
  .detail-sidebar .sidebar-inner{
    height: calc(100dvh - var(--header-stack-height));
  }
}

/* Responsive : la sidebar redevient “normale” sur mobile */
@media (max-width: 991px){
  .detail-grid{ grid-template-columns: 1fr; }
  .detail-sidebar .sidebar-inner{
    position: static;
    height: auto;
    overflow: visible;
  }
}

/* ========== Accordéon (commun) ========== */
.acc{ display:grid; gap:12px; }

.acc-item{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}

.acc-header{
  width:100%;
  background:#faf6f2;
  border:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  font-weight:700;
  color:var(--brand);
}

.acc-title-wrap{ display:flex; align-items:center; gap:8px; }

.acc-badge{
  font-size:12px;
  padding:2px 8px;
  border-radius:999px;
  background:var(--pill);
  color:var(--pill-text);
}

.acc-icon{ position:relative; width:18px; height:18px; }
.acc-icon .bar{
  position:absolute; left:50%; top:50%;
  width:12px; height:2px;
  background:currentColor;
  transform:translate(-50%,-50%);
}
.acc-icon .bar.v{ transform:translate(-50%,-50%) rotate(90deg); }
.acc-item.open .acc-icon .bar.v{ opacity:0; }

.acc-content{
  max-height:0;
  overflow:hidden;
  transition:max-height .25s var(--easing);
}
.acc-item.open .acc-content{ max-height:1000px; } 

.acc-list{
  list-style:none;
  margin:0;
  padding:8px 12px;
  display:grid;
  gap:8px;
}

/* Checkbox custom (même rendu partout) */
.option{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.option input{ position:absolute; opacity:0; pointer-events:none; }
.option .box{
  width:18px; height:18px;
  border:1px solid var(--line);
  border-radius:4px;
  display:inline-block;
  background:#fff;
}
.option input:checked + .box{
  border-color:var(--violet);
  box-shadow: inset 0 0 0 8px var(--violet);
}
.option .txt{ color:var(--text); }

/* ========== Barre de recherche (commune) ========== */
.full-width-search{ display:flex; gap:8px; }
.full-width-search input{
  flex:1;
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 16px;
}
.full-width-search button{
  border:0;
  background:#fff;
  padding:0 8px;
  cursor:pointer;
  color:var(--muted);
}
.full-width-search button:hover{ color:var(--text); }

/* ========== Zone cartes (résultats) ========== */
.cards{ display:block; }

/* 1 card par ligne, lien non souligné, hover doux */
#subtheme-list .card,
#sous-thematiques-list .card{ 
  margin-bottom:12px;
  color :#000000; 
  border-radius:  var(--radius);
}

.sous-thematique-card,
.thematique-card{
  display:block;
  text-decoration:none;
}


.sous-thematique-card:hover .card,
.thematique-card:hover .card{
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  transform: translateY(-1px);
  transition: box-shadow .2s var(--easing), transform .2s var(--easing);
}

.card-meta{ color:var(--muted); margin:0; font-size:.95rem; }