/* =========================================
   FICHIER : css/gouvernance.css
   PAGE    : gouvernance.njk
   NOTE    : le hero est géré par .hero-inst (components.css)
   ========================================= */

.bureau-section{
  padding: 90px 0;
  background: var(--color-sand);
}

.org-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 18px;
}

.org-card{
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(30,61,89,0.10);
  border-radius: 22px;
  box-shadow: var(--shadow-card);
  padding: 20px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.org-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(30,61,89,0.12);
}

.org-card .role{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,110,64,0.12);
  border: 1px solid rgba(255,110,64,0.18);
  color: var(--color-accent);
  font-weight: 950;
  font-size: 0.78rem;
  margin-bottom: 10px;
}

/* Bloc docs / cadre */
.legal-info-section{
  padding: 90px 0 110px;
}

.legal-box{
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(30,61,89,0.10);
  border-radius: 22px;
  box-shadow: var(--shadow-card);
  padding: 26px;
}

.legal-box p{
  color: rgba(45,52,54,0.82);
}

.note-pv{
  margin-top: 14px;
  color: rgba(45,52,54,0.72);
  font-style: italic;
}

/* Responsive */
@media (max-width: 980px){
  .bureau-section{ padding: 70px 0; }
  .legal-info-section{ padding: 70px 0 90px; }
  .org-grid{ grid-template-columns: 1fr; }
}