/* ==========================================================================
   Protostar — Joomla 6 / Bootstrap 5
   ========================================================================== */

/* ── 1. VARIABLES ─────────────────────────────────────────────────────────── */
:root {
  --ps-color:             #0088cc;
  --ps-color-rgb:         0, 136, 204;
  --ps-bg:                #f4f6f7;
  --ps-white:             #ffffff;
  --ps-border:            rgba(0, 0, 0, 0.12);
  --ps-shadow:            0 0 8px rgba(0, 0, 0, 0.07);
  --ps-radius:            4px;
  --ps-container-max:     1800px;
  --ps-nav-border:        rgba(0, 0, 0, 0.08);
  --ps-font-body:         "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ps-pagination-height: 42px;
  --ps-sidebar-width:     250px;
}

/* ── 2. BASE ──────────────────────────────────────────────────────────────── */
html, body {
  height: 100%;
  overflow: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar { display: none; }

html { background-color: var(--ps-bg); }

body.site {
  font-family: var(--ps-font-body);
  background-color: var(--ps-bg);
  margin: 0;
  padding: 0;
  display: flex;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--ps-color); }
a:hover, a:focus { color: rgba(var(--ps-color-rgb), 0.8); }

h1 { font-size: 1.625rem; line-height: 1.15; }
h2 { font-size: 1.375rem; line-height: 1.18; }
h3 { font-size: 1.125rem; line-height: 1.2;  }
h4 { font-size: 0.875rem; line-height: 1.25; }
h5 { font-size: 0.8125rem; }
h6 { font-size: 0.75rem; }

h1, h2, h3, h4, h5, h6, p, li { word-wrap: break-word; }

/* ── 3. FOND + CONTENEUR PRINCIPAL ───────────────────────────────────────── */
.site-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 1% 0.5% 0.5%;
  background-color: var(--ps-bg);
}

.site-container {
  width: 100%;
  max-width: var(--ps-container-max);
  display: flex;
  flex-direction: column;
  background-color: var(--ps-white);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius);
  box-shadow: var(--ps-shadow);
  overflow: hidden;
}

/* ── 4. BANNIÈRE (3 colonnes, dans le flux) ───────────────────────────────── */
.site-banner {
  flex: 0 0 18vh;
  min-height: 170px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  margin-bottom: 12px;
  position: relative;
}

.site-banner__left,
.site-banner__right {
  flex: 0 0 200px;
  display: flex;
  align-items: flex-start;
  padding: 16px 12px 2px;
  overflow: hidden;
  font-size: 0.95rem;
  line-height: 1.4;
}

.site-banner__left > div,
.site-banner__right > div { width: 100%; }

.site-banner__image { flex: 1; overflow: hidden; }

.site-banner__image > div { width: 100%; height: 100%; }

.site-banner__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* ── 5. BARRE DE FLOU SOUS LA BANNIÈRE ───────────────────────────────────── */
.site-blur-top {
  flex: 0 0 20px;
  width: 100%;
  background: linear-gradient(to bottom, var(--ps-white), transparent);
  margin-bottom: -20px;
  position: relative;
  z-index: 10;
  pointer-events: none;
}

/* ── 6. NAVIGATION (masquée) ──────────────────────────────────────────────── */
.site-nav { display: none; }

/* ── 7. CORPS PRINCIPAL ───────────────────────────────────────────────────── */
.site-body {
  flex: 1;
  display: flex;
  align-items: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding-top: 12px;
  scrollbar-width: none;
}

.site-body::-webkit-scrollbar { display: none; }

/* ── 8. SIDEBAR ───────────────────────────────────────────────────────────── */
.site-sidebar {
  flex: 0 0 var(--ps-sidebar-width);
  padding: 16px 16px 12px;
  border-right: 1px solid var(--ps-border);
}

.site-sidebar img { max-width: 100%; height: auto; display: block; }

.site-sidebar .nav > li > a { padding: 4px 12px; font-size: 0.9rem; }

.site-sidebar .nav-child {
  border-left: 2px solid var(--ps-border);
  padding-left: 8px;
  list-style: none;
  margin: 0;
}

/* ── 9. CONTENU PRINCIPAL ─────────────────────────────────────────────────── */
.site-content {
  flex: 1;
  padding: 16px 16px 12px;
  min-width: 0;
  font-size: 1.05rem;
}

/* ── 10. BARRE DE PAGINATION (bas du conteneur) ──────────────────────────── */
.site-pagination-bar {
  flex: 0 0 auto;
}

.site-pagination-bar.has-nav {
  height: var(--ps-pagination-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}

.com-content-category-blog__navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--ps-radius);
  padding: 4px 12px;
}

.com-content-category-blog__counter { display: none; }

.com-content-category-blog__pagination { display: flex; align-items: center; background: transparent; }

.com-content-category-blog__navigation .pagination {
  margin: 0;
  flex-wrap: nowrap;
  gap: 2px;
}

.com-content-category-blog__navigation .page-link {
  padding: 3px 8px;
  font-size: 0.8rem;
  line-height: 1.4;
  border-radius: var(--ps-radius);
  border: 1px solid var(--ps-nav-border);
  color: #555;
}

.com-content-category-blog__navigation .page-item.active .page-link {
  background-color: var(--ps-color);
  border-color: var(--ps-color);
  color: var(--ps-white);
}

.com-content-category-blog__navigation .page-item.disabled .page-link {
  opacity: 0.4;
}

.com-content-category-blog__navigation .page-link:hover {
  background-color: var(--ps-color);
  border-color: var(--ps-color);
  color: var(--ps-white);
}

/* ── 10. ÉLÉMENTS CONTENU ─────────────────────────────────────────────────── */
.module-header {
  padding-bottom: 12px;
  margin: 16px 0;
  border-bottom: 1px solid #eee;
  font-size: 1rem;
  font-weight: 600;
}

.item-title    { margin-bottom: 8px; }
.item-content  { margin: 16px 0; }
.item-subtitle { margin-bottom: 8px; }

.float-end.item-image   { margin: 0 0 16px 18px; }
.float-start.item-image { margin: 0 18px 16px 0; }

.breadcrumb { margin: 8px 0 12px; }

.page-header {
  padding-bottom: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid #eee;
}

.btn-primary {
  --bs-btn-bg:                 var(--ps-color);
  --bs-btn-border-color:       var(--ps-color);
  --bs-btn-hover-bg:           rgba(var(--ps-color-rgb), 0.85);
  --bs-btn-hover-border-color: rgba(var(--ps-color-rgb), 0.9);
  --bs-btn-active-bg:          rgba(var(--ps-color-rgb), 0.75);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link { background-color: var(--ps-color); }

.dropdown-item.active,
.dropdown-item:active { background-color: var(--ps-color); }

/* ── 11. RECHERCHE ────────────────────────────────────────────────────────── */
.search span.highlight { background-color: #ffffcc; font-weight: bold; padding: 1px 2px; }
dt.result-title, dd.result-text { word-wrap: break-word; }
#search-results { clear: both; }
#finder-filter-window { overflow: visible; }
.finder-selects { margin: 0 15px 15px 0; }

/* ── 12. FIGURES / LÉGENDES ───────────────────────────────────────────────── */
figure { display: table; }
figure.pull-center, img.pull-center { margin-left: auto; margin-right: auto; }
figcaption { display: table-caption; caption-side: bottom; font-size: 0.85rem; color: #666; text-align: center; }

.img_caption { text-align: center !important; }
.img_caption.none { margin-left: auto; margin-right: auto; }
.img_caption .left  { float: left;  margin-right: 1em; }
.img_caption .right { float: right; margin-left:  1em; }

/* ── 13. ONGLETS PAGE-BREAK ───────────────────────────────────────────────── */
dl.tabs { float: left; margin-bottom: -1px; }
dl.tabs dt.tabs {
  float: left; margin-left: 3px; padding: 4px 10px;
  background-color: #f0f0f0; border: 1px solid #ccc; border-bottom: 0; cursor: pointer;
}
dl.tabs dt.open { background-color: #fff; border-bottom: 1px solid #fff; }
div.current dd.tabs { margin: 0; padding: 10px; clear: both; border: 1px solid #ccc; background-color: #fff; }

/* ── 14. RTL ──────────────────────────────────────────────────────────────── */
[dir="rtl"] .site-sidebar { border-right: none; border-left: 1px solid var(--ps-border); }

/* ── 15. RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* Sur mobile : flux normal, plus de layout "app" pleine hauteur */
  html, body {
    height: auto;
    overflow: auto;
  }

  body.site { display: block; }

  .site-wrapper {
    display: block;
    padding: 0;
  }

  .site-container {
    max-width: 100%;
    height: auto;
    overflow: visible;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  /* Bannière : reste visible en haut lors du défilement */
  .site-banner {
    position: sticky;
    top: 0;
    z-index: 100;
    flex: none;
  }

  .site-banner__left,
  .site-banner__right { display: none; }

  /* Barre de dégradé : inutile sur mobile */
  .site-blur-top { display: none; }

  /* Corps : flux normal en colonne */
  .site-body {
    flex-direction: column;
    overflow: visible;
    min-height: 0;
  }

  .site-sidebar {
    flex: none;
    border-right: none;
    border-bottom: 1px solid var(--ps-border);
  }

  .site-content { flex: none; }

  /* Barre de navigation : collée en bas lors du défilement */
  .site-pagination-bar.has-nav {
    position: sticky;
    bottom: 0;
    z-index: 100;
  }

  .float-end.item-image,
  .float-start.item-image { float: none !important; margin: 0 0 16px; }

  .item-info > span { display: block; }
}