/* ==========================
   PAGE: Comment lire ce site
   Statut: FIGEABLE (v1.1)
   ========================== */

/* Badges & pillules : scoping local */
.read-hero .read-badge{
  display:inline-block;
  border:1px solid rgba(7,87,0,.22);
  background:rgba(7,87,0,.06);
  color:#075700;
  padding:4px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
}

.read-hero .read-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0 6px;
}

.read-hero .read-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(7,87,0,.22);
  background:rgba(7,87,0,.06);
  color:#075700;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  line-height:1.1;
}

.read-note{ opacity:.92; }

.read-toc{ margin:14px 0 18px; }
.read-toc .btn{ margin:6px 8px 0 0; }

/* NEW: remplace inline styles */
.read-h1{ margin-top:10px; }
.read-cta{ margin-top:10px; }
.read-cards2{ margin-top:14px; }
.read-cta2{ margin-top:12px; }
.read-note-top{ margin-top:10px; }

/* Petits séparateurs sobres */
.read-hr{
  height:1px;
  background:rgba(0,0,0,.08);
  margin:16px 0;
}

/* Micro-texte */
.read-mini{
  opacity:.9;
  margin-top:8px;
}

/* Mobile: on force 1 colonne sur la grille 3 */
@media (max-width: 900px){
  .cards-3{
    grid-template-columns:1fr !important;
  }
}

.inst-details{
  margin-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-top: 10px;
}

.inst-details > summary{
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.inst-details > summary::-webkit-details-marker{
  display:none;
}

.inst-body{
  margin-top: 10px;
}

.inst-body p{
  margin: 10px 0;
}