/* ══════════════════════════════════════════════════════════════
   DSFR Chart Styles - Système unifié AgResteViz
   Compatible avec variables DSFR (core.min.css)
   ══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. STYLES COMMUNS GRAPHIQUES (Bar, Line, Pie, Radar, etc.)
   Source : dsfr-chart composants
──────────────────────────────────────────────────────────────── */

/* Tooltip DSFR personnalisé */
.tooltip {
  opacity: 0;
  width: auto;
  height: auto;
  background-color: var(--grey-1000-50, rgba(22, 22, 22, 0.9));
  position: fixed;
  z-index: 999;
  /*box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.15);*/
  text-align: left;
  pointer-events: none;
  font-size: 0.75rem;
  min-width: 7rem;
  max-width: 18rem;
  border-radius: 0; /*0.25rem;*/
}

.tooltip_header {
  width: 100%;
  font-size: 0.75rem;
  max-height: 3.5rem;
  color: var(--text-default-grey, #fff);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  background-color: var(--grey-975-75, rgba(50, 50, 50, 0.95));
  padding: 0.55rem 0.55rem 0.75rem 0.75rem;
  line-height: 1.2;
}

.tooltip_body {
  line-height: 1.67;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: auto;
}

.tooltip_body .tooltip_dot {
  min-width: 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  margin-top: 0.25rem;
  margin-right: 0.25rem;
  border-radius: 50%;
}

.tooltip_body .tooltip_place {
  color: var(--text-default-grey, #fff);
  font-size: 0.9rem;
  font-weight: 400;
}

.tooltip_body .tooltip_value {
  width: 100%;
  display: contents;
  color: var(--text-default-grey, #fff);
  font-size: 0.9rem;
}

.tooltip_body .tooltip_value-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.55rem 0.75rem 0.75rem;
  border-bottom: 1px solid var(--border-default-grey, rgba(255, 255, 255, 0.1));
}

.tooltip_body .tooltip_value-content:last-child {
  border-bottom: none;
}

/* Légende DSFR */
.chart_legend {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 6px;
}

.legende_dot {
  display: inline-block;
  min-width: 0.8rem;
  width: 0.8rem;
  height: 0.8rem;
  margin-top: 0.25rem;
  margin-left: 0;
  border-radius: 50%;
}

.legende_dash_line {
  display: inline-block;
  min-width: 0.35rem;
  width: 0.35rem;
  height: 0.2rem;
  border-radius: 0;
  margin-top: 0.6rem;
}

.legende_dash_line_end {
  margin-left: 0.1rem;
}

/* Canvas graphiques */
.chart canvas {
  max-width: 100%;
}

.flex {
  display: flex;
}

/* ─────────────────────────────────────────────────────────────
   2. STYLES LÉGENDE AGRESTE (système actuel)
──────────────────────────────────────────────────────────────── */

.av-legend {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 8px;
  margin-top: 12px;
  font-size: 0.875rem;
}

.av-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #555;
}

.av-legend-dot {
  display: inline-block;
  min-width: 0.8rem;
  width: 0.8rem;
  height: 0.8rem;
  margin-top: 0.25rem;
  margin-left: 0;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────
   3. TABLEAUX HTML
──────────────────────────────────────────────────────────────── */

.av-table-wrapper {
  width: 100%;
  background: #fff;
  border-radius: 0px;
  overflow: hidden;
  border:1px solid rgba(0, 0, 0, 0.08);
  /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);*/
}

.av-table-search {
  padding: 1rem;
  background: #fafafa;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.av-table-search-input {
  width: 100%;
  max-width: 400px;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-family: inherit;
  transition: border-color 0.2s ease;
  background-color: #fff;
}

.av-table-search-input:focus {
  outline: none;
  /*border-color: #000091;*/
  box-shadow: 0 0 0 2px rgba(0, 0, 145, 0.1);
}

.av-table-search-input::placeholder {
  color: #999;
}

.av-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.av-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: #fff;
}

.av-table thead {
  background: #f6f6f6;
  border-bottom: 2px solid #ddd;
}

.av-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 700;
  color: #161616;
  white-space: nowrap;
  position: relative;
  user-select: none;
}

.av-table th.sortable {
  cursor: pointer;
  padding-right: 2rem;
  transition: background-color 0.2s ease;
}

.av-table th.sortable:hover {
  background-color: #ececec;
}

.av-table th .sort-icon {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  font-size: 0.75rem;
  transition: color 0.2s ease;
}

.av-table th.asc .sort-icon,
.av-table th.desc .sort-icon {
  color: #000091;
}

.av-table tbody tr {
  border-bottom: 1px solid #e5e5e5;
  transition: background-color 0.15s ease;
}

.av-table tbody tr:last-child {
  border-bottom: none;
}

.av-table tbody tr:hover {
  background-color: rgba(0, 0, 145, 0.03);
}

.av-table tbody tr.av-hidden {
  display: none;
}

.av-table td {
  padding: 0.75rem 1rem;
  color: #161616;
  vertical-align: middle;
}

.av-table td.text-right,
.av-table th.text-right {
  text-align: right;
}

.av-table td.text-center {
  text-align: center;
}

.av-table-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #f6f6f6;
  border-top: 1px solid #ddd;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.av-table-pagination-info {
  font-size: 0.875rem;
  color: #666;
}

.av-table-pagination-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.av-table-pagination-btn {
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
  background: #fff;
  color: #161616;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.av-table-pagination-btn:hover:not(:disabled) {
  background: #000091;
  color: #fff;
  border-color: #000091;
}

.av-table-pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .av-table th,
  .av-table td {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }

  .av-table-search-input {
    max-width: 100%;
  }

  .av-table-pagination {
    flex-direction: column;
    align-items: stretch;
  }

  .av-table-pagination-controls {
    justify-content: center;
  }
}

/* ─────────────────────────────────────────────────────────────
   4. UTILITAIRES
──────────────────────────────────────────────────────────────── */

.av-hidden {
  display: none !important;
}

.av-text-right,
.text-right {
  text-align: right;
}

.av-text-center,
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.no_select {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
/* ─────────────────────────────────────────────────────────────
   5. SELECT VUE — basculement tableau ↔ graphique
──────────────────────────────────────────────────────────────── */

.av-table-search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0.875rem 1rem;
  background: #fafafa;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.av-table-view-select {
  font-family: Marianne, Arial, sans-serif;
  white-space: nowrap;
  width: auto;
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
}

.av-table-view-select:focus {
  border-color: #000091;
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 145, 0.15);
}

/* ─────────────────────────────────────────────────────────────
   6. ZONE GRAPHIQUE dans la vue basculée
──────────────────────────────────────────────────────────────── */

.av-chart-zone {
  padding: 1.25rem 1rem 0.75rem;
  background: #fff;
}

.av-chart-zone canvas {
  max-width: 100%;
}

.av-chart-zone .av-legend {
  margin-top: 12px;
  justify-content: center;
}

/* ═════════════════════════════════════════════════════════
   7. TOGGLES COLONNES (carrés colorés cliquables)
═════════════════════════════════════════════════════════ */
.av-column-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.av-column-toggle-item {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: opacity 0.2s, background-color 0.2s;
  user-select: none;
}

.av-column-toggle-item:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.av-column-color-box {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.av-column-toggle-item span {
  font-size: 0.875rem;
  color: #161616;
  font-weight: 500;
  transition: opacity 0.2s, text-decoration 0.2s;
}
/* ─────────────────────────────────────────────────────────────
   8. INFOSOURCE — bloc texte + source sous le tableau
──────────────────────────────────────────────────────────────── */

.source-info {
  margin-top: 25px;
  padding: 20px;
  background: #f8f9fa;
  border-left: 4px solid #ebebeb;
  /*border-radius: 4px;*/
  font-size: 13px;
  color: #495057;
  line-height: 1.6;
}

.source-info p {
  margin: 8px 0;
  font-style: italic;
}

.source-info p:first-child {
  margin-top: 0;
  font-weight: 600;
  color: #333;
  font-style: normal;
}

.source-info p:last-child {
  margin-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────
   9. CARTE CHOROPLETHE (buildCarte)
──────────────────────────────────────────────────────────────── */

.av-carte-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.av-carte-body {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.av-carte-map {
  flex: 1 1 0;
  min-width: 280px;
  position: relative;
  height: 60vh;
  min-height: 360px;
}

.av-carte-map canvas {
  width: 100% !important;
  height: 100% !important;
}

.av-carte-legende {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 140px;
  padding: 0.5rem 0;
}

.av-carte-legende div {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.av-carte-retour {
  align-self: flex-start;
  margin-bottom: 0.5rem;
}

.av-carte-msg {
  font-size: 0.78rem;
  color: #666;
  text-align: center;
  padding: 0.25rem 0 0;
}

@media (max-width: 576px) {
  .av-carte-map {
    height: 45vh;
    min-height: 260px;
  }
  .av-carte-legende {
    min-width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
  }
}
/* ─────────────────────────────────────────────────────────────
   10. BACKGROUND IMAGE — av-section avec image, fixe, flou, overlay
──────────────────────────────────────────────────────────────── */

.av-section {
  position: relative;
  overflow: hidden; /* clippe les couches bg/overlay */
}

/* Couche background — positionnée en absolu dans av-section */
.av-section-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  /* Note : si flou actif, transform:scale(1.08) appliqué en JS
     pour compenser le débordement du blur sur les bords.
     Si pas de flou, background-attachment:fixed appliqué en JS. */
}

/* Couche overlay semi-transparente */
.av-section-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.av-section:has(.av-pointplot-wrapper) {
  overflow: visible !important;
}

/* Le contenu passe au-dessus des couches */
.av-bg-image > .container-lg {
  position: relative;
  z-index: 2;
}

/* Les cartes dans une section image restent lisibles */
.av-bg-image .av-card {
  background: rgba(255, 255, 255);
}

/* ─────────────────────────────────────────────────────────────
   11. POINT PLOT — overflow visible pour les labels datalabels
──────────────────────────────────────────────────────────────── */

.av-pointplot-wrapper {
  overflow: visible !important;
}

.av-pointplot-wrapper canvas {
  overflow: visible !important;
}

/* ─────────────────────────────────────────────────────────────
   12. SAVOIR PLUS — underline DSFR masqué au repos, visible au survol
──────────────────────────────────────────────────────────────── */
a.av-savoir-lien,
a.av-savoir-lien:visited,
a.av-savoir-lien:link {
  color: #000091 !important;
  font-weight: 600;
  font-size: 0.9rem;
  font-family: Marianne, Arial, sans-serif;
  text-decoration: none !important;
  background-size: 0 0, 0 0 !important;
  box-shadow: none !important;
}
a.av-savoir-lien:hover {
  text-decoration: none !important;
  background-size: var(--underline-hover-width) calc(var(--underline-thickness) * 2), var(--underline-idle-width) var(--underline-thickness) !important;
}

/* ─────────────────────────────────────────────────────────────
   13. SAVOIR PLUS — séparateur | masqué sur mobile
──────────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
  .av-savoir-sep {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   14. INFOBULLES — tooltip sur <b id="infobulle-X"> dans av-body
──────────────────────────────────────────────────────────────── */
#av-infobulle-tip {
  display: none;
  position: absolute;
  z-index: 9999;
  max-width: 320px;
  background: rgba(22, 22, 22, 0.95);
  color: #fff;
  font-family: Marianne, Arial, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 10px 14px;
  border-radius: 0;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}