/* ##########################################################################
   BLOC 38 — UNIVERS BIBLIOTHÈQUE (CARDS COMPACTES + SOULIGNEMENT PAR THÈME)
   Dernière MàJ : 28/02/2026
   Scope : body.sep-biblio (idéal) + fallback body.itemid-110
   NOTE : ce bloc remplace les variantes + hotfix précédents (éviter les doublons)
   ########################################################################## */

:where(body.sep-biblio, body.itemid-110){
  --biblio-500: #1e73be;
  --biblio-600: #165c98;
  --biblio-700: #10446f;

  --biblio-bg-1: rgba(30,115,190,.20);
  --biblio-bg-2: rgba(30,115,190,.12);
  --biblio-bg-base: #f3f8ff;

  background:
    radial-gradient(900px 520px at 16% 0%, var(--biblio-bg-1), transparent 64%),
    radial-gradient(900px 520px at 85% 18%, var(--biblio-bg-2), transparent 62%),
    linear-gradient(180deg, var(--biblio-bg-base) 0%, #ffffff 60%, #ffffff 100%);
  background-attachment: fixed;
}

/* Cassiopeia : certains wrappers posent du blanc -> transparence */
:where(body.sep-biblio, body.itemid-110) :where(.site-grid, .container-component, .wrapper-fluid, .site){
  background: transparent !important;
}

/* Breadcrumb : éviter le bloc blanc */
:where(body.sep-biblio, body.itemid-110) :where(.breadcrumb, .mod-breadcrumbs.breadcrumb){
  background: transparent !important;
}

/* IMPORTANT : ne pas centrer toute la page (sinon grand vide avec sidebar) */
:where(body.sep-biblio, body.itemid-110) .com-content-article__body .sep-info-pratiques{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding-inline: 12px;
}

/* Liens / boutons : ton bleu bibliothèque */
:where(body.sep-biblio, body.itemid-110) .sep-biblio-page a{ color: var(--biblio-600); }
:where(body.sep-biblio, body.itemid-110) .sep-biblio-page a:hover{ color: var(--biblio-700); }

:where(body.sep-biblio, body.itemid-110) .sep-biblio-page .btn.btn-outline-primary{
  border-color: rgba(30,115,190,.40);
  color: var(--biblio-600);
  border-radius: 8px; /* peu arrondi */
}
:where(body.sep-biblio, body.itemid-110) .sep-biblio-page .btn.btn-outline-primary:hover{
  border-color: var(--biblio-600);
  background: rgba(30,115,190,.08);
}

/* ========================================================================
   HERO : mosaïque + air
   ======================================================================== */

:where(body.sep-biblio, body.itemid-110) .sep-biblio-hero-wrap{
  display: grid;
  gap: 1.15rem;
  margin-top: .9rem;
}

:where(body.sep-biblio, body.itemid-110) .sep-biblio-mosaic{
  display: grid;
  gap: .8rem;
  grid-template-columns: 2fr 1fr;
  grid-auto-rows: 200px;
}
:where(body.sep-biblio, body.itemid-110) .sep-biblio-mosaic-main{
  margin: 0;
  grid-column: 1;
  grid-row: 1 / span 2;
}
:where(body.sep-biblio, body.itemid-110) .sep-biblio-mosaic-sub{
  margin: 0;
  grid-column: 2;
}
@media (min-width: 900px){
  :where(body.sep-biblio, body.itemid-110) .sep-biblio-mosaic{ grid-auto-rows: 225px; }
}
@media (max-width: 720px){
  :where(body.sep-biblio, body.itemid-110) .sep-biblio-mosaic{
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 165px;
  }

  /* Le grand visuel redevient “propre” : 2 rangées (= 330px),
     donc aucune chance de chevauchement */
  :where(body.sep-biblio, body.itemid-110) .sep-biblio-mosaic-main{
    grid-column: 1 / -1;
    grid-row: 1 / span 2;
    min-height: 0; /* important : on neutralise le débordement */
  }

  /* Les petites images ne sont plus forcées en colonne 2 :
     elles se placent automatiquement en 2 colonnes (col1 + col2) */
  :where(body.sep-biblio, body.itemid-110) .sep-biblio-mosaic-sub{
    grid-column: auto;
  }
}

@media (max-width: 420px){
  :where(body.sep-biblio, body.itemid-110) .sep-biblio-mosaic{
    grid-template-columns: 1fr;
    grid-auto-rows: 180px;
  }
  :where(body.sep-biblio, body.itemid-110) .sep-biblio-mosaic-main{
    grid-row: auto;
  }
}

:where(body.sep-biblio, body.itemid-110) .sep-biblio-photo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 14px 30px rgba(15,23,42,.06);
}

/* Texte : largeur de lecture agréable (sans réduire tout le layout) */
:where(body.sep-biblio, body.itemid-110) .sep-biblio-hero-copy{
  display: grid;
  gap: 1rem;
  max-width: 82ch;
}

/* ========================================================================
   KPI BIBLIO : CARDS COMPACTES (1 / 2 / 3 par ligne) + soulignement thème
   - Corrige le “plein largeur” en annulant grid-column: span .. du BLOC 34
   ======================================================================== */

/* Grille dédiée */
:where(body.sep-biblio, body.itemid-110) .sep-info-kpis.sep-biblio-kpis{
  display: grid !important;
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
  gap: .75rem .9rem !important;
  align-items: stretch !important;
}

/* 2 colonnes tôt (évite le full-width trop longtemps) */
@media (min-width: 860px){
  :where(body.sep-biblio, body.itemid-110) .sep-info-kpis.sep-biblio-kpis{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 3 colonnes grand écran */
@media (min-width: 1280px){
  :where(body.sep-biblio, body.itemid-110) .sep-info-kpis.sep-biblio-kpis{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* POINT CLÉ : annuler les spans du BLOC 34 (sinon pleine largeur) */
:where(body.sep-biblio, body.itemid-110) .sep-info-kpis.sep-biblio-kpis > .sep-kpi{
  grid-column: auto !important;
  min-width: 0;
}

/* Style card (sobre, pas “bootstrap”) */
:where(body.sep-biblio, body.itemid-110) .sep-info-kpis.sep-biblio-kpis > .sep-kpi{
  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.04) !important;
  padding: .78rem .85rem .85rem !important;
  position: relative;
  overflow: hidden;
}

/* Désactiver la barre / déco top du BLOC 34 (on garde le soulignement) */
:where(body.sep-biblio, body.itemid-110) .sep-info-kpis.sep-biblio-kpis > .sep-kpi::before{
  display: none !important;
}

/* Soulignement par thème */
:where(body.sep-biblio, body.itemid-110) .sep-info-kpis.sep-biblio-kpis > .sep-kpi::after{
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--kpi-accent, rgba(30,115,190,.55));
  opacity: .95;
}

/* Typo compacte */
:where(body.sep-biblio, body.itemid-110) .sep-info-kpis.sep-biblio-kpis .sep-info-h3{
  margin: 0 0 .35rem !important;
  font-size: 1.00rem;
}
:where(body.sep-biblio, body.itemid-110) .sep-info-kpis.sep-biblio-kpis p{
  margin: 0 0 .5rem !important;
  font-size: .92rem;
  line-height: 1.42;
  color: rgba(15,23,42,.82);
}

/* Boutons : compacts mais cliquables */
:where(body.sep-biblio, body.itemid-110) .sep-info-kpis.sep-biblio-kpis .btn{
  padding: .42rem .65rem;
  font-size: .90rem;
  border-radius: 8px;
}

/* Dual buttons : 2 côte à côte si possible */
:where(body.sep-biblio, body.itemid-110) .sep-kpi-actions--dual{
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  margin-top: .2rem;
}
:where(body.sep-biblio, body.itemid-110) .sep-kpi-actions--dual .btn{
  flex: 1 1 10.5rem;
  justify-content: center;
}

/* Stack : propre */
:where(body.sep-biblio, body.itemid-110) .sep-kpi-actions--stack{
  display: grid;
  gap: .55rem;
}

/* Miniature “Accès aux livres” */
:where(body.sep-biblio, body.itemid-110) .sep-kpi-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}
:where(body.sep-biblio, body.itemid-110) .sep-kpi-thumb{
  width: 64px !important;
  height: 64px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 8px 14px rgba(15,23,42,.05) !important;
  flex: 0 0 auto;
}
:where(body.sep-biblio, body.itemid-110) .sep-kpi-sub{
  margin: .15rem 0 0;
  color: rgba(15,23,42,.70);
  font-size: .90rem;
  line-height: 1.45;
}
:where(body.sep-biblio, body.itemid-110) .sep-kpi-note{
  margin: .35rem 0 0;
  color: rgba(15,23,42,.68);
  font-size: .88rem;
  line-height: 1.4;
}

/* Contact : pleine largeur */
@media (min-width: 860px){
  :where(body.sep-biblio, body.itemid-110) .sep-info-kpis.sep-biblio-kpis > .sep-kpi--contact{
    grid-column: 1 / -1 !important;
  }
}

/* Thèmes : couleur du soulignement */
:where(body.sep-biblio, body.itemid-110) .sep-kpi--where   { --kpi-accent: rgba(30,115,190,.80); }
:where(body.sep-biblio, body.itemid-110) .sep-kpi--ticket  { --kpi-accent: rgba(16,185,129,.80); }
:where(body.sep-biblio, body.itemid-110) .sep-kpi--price   { --kpi-accent: rgba(245,158,11,.85); }
:where(body.sep-biblio, body.itemid-110) .sep-kpi--books   { --kpi-accent: rgba(99,102,241,.80); }
:where(body.sep-biblio, body.itemid-110) .sep-kpi--charte  { --kpi-accent: rgba(239,68,68,.78); }
:where(body.sep-biblio, body.itemid-110) .sep-kpi--contact { --kpi-accent: rgba(30,115,190,.55); }

/* ========================================================================
   Sidebar gauche : enlever le “carton bootstrap”
   ======================================================================== */

:where(body.sep-biblio, body.itemid-110) .container-sidebar-left .sidebar-left.card{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
:where(body.sep-biblio, body.itemid-110) #mod-menu133{
  margin: .25rem 0 0;
  padding-left: .85rem;
  border-left: 3px solid rgba(30,115,190,.22);
}
:where(body.sep-biblio, body.itemid-110) #mod-menu133 a{
  display: inline-block;
  padding: .18rem 0;
}