/**
 * style.css
 * Feuille de style globale – Observatoire de l'Eau Grand Est
 * Utilisée sur tous les gabarits du site.
 *
 * SOMMAIRE
 * 1.  Variables CSS (design tokens)
 * 2.  Reset & base
 * 3.  Typographie
 * 4.  En-tête principal (header)
 * 5.  Navigation principale (navbar)
 * 6.  Barre d'outils contextuelle (toolbar)
 * 7.  Sidebar / panneau latéral
 * 8.  Boutons
 * 9.  Badges thématiques
 * 10. Formulaires & selects
 * 11. Footer
 * 12. Utilitaires
 */

/* ============================================================
   1. VARIABLES CSS
   ============================================================ */
:root {

  /* Couleurs principale – bleu eau */
  --color-primary:        #1565C0;
  --color-primary-dark:   #0D47A1;
  --color-primary-light:  #1976D2;
  --color-primary-xlight: #E3F2FD;

  /* Couleurs secondaires */
  --color-secondary:      #00796B;   /* vert milieux aquatiques */
  --color-accent:         #0288D1;   /* bleu clair accent */

  /* Couleurs sémantiques */
  --color-success:        #2E7D32;
  --color-warning:        #F57F17;
  --color-danger:         #C62828;
  --color-info:           #01579B;

  /* Neutres */
  --color-white:          #FFFFFF;
  --color-bg:             #F4F7FB;
  --color-bg-panel:       #FFFFFF;
  --color-border:         #DDE3EC;
  --color-text:           #1A2233;
  --color-text-muted:     #6B7A99;
  --color-text-light:     #A0AABF;

  /* Catégories (source : matrice Antea) */
  --color-cat-milieux:             #00796B;   /* Connaissance des milieux aquatiques */
  --color-cat-qualite:             #0288D1;   /* Qualité des Eaux */
  --color-cat-gouvernance:         #1B5E20;   /* Gouvernance de l'eau */
  --color-cat-climat:              #E65100;   /* Climat / risques climatiques */
  --color-cat-usages:              #1565C0;   /* Usages sectoriels de l'eau */
  --color-cat-quantitatif:         #6A1B9A;   /* Gestion quantitative de l'eau */

  /* Alias thématiques (rétrocompat) */
  --color-theme-eau-potable:       #1565C0;
  --color-theme-milieux:           #00796B;
  --color-theme-assainissement:    #6A1B9A;
  --color-theme-risques:           #E65100;
  --color-theme-climat:            #0277BD;
  --color-theme-gouvernance:       #1B5E20;

  /* Typographie */
  --font-family-base:     'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-size-base:       14px;
  --font-size-sm:         12px;
  --font-size-lg:         16px;
  --font-size-xl:         20px;
  --font-size-xxl:        24px;
  --line-height-base:     1.55;

  /* Espacements */
  --spacing-xs:   4px;
  --spacing-sm:   8px;
  --spacing-md:   16px;
  --spacing-lg:   24px;
  --spacing-xl:   32px;

  /* Rayons de bordure */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-pill:  50px;

  /* Ombres */
  --shadow-sm:    0 1px 3px rgba(0,0,0,.10);
  --shadow-md:    0 4px 12px rgba(0,0,0,.12);
  --shadow-lg:    0 8px 24px rgba(0,0,0,.14);

  /* Dimensions structurelles */
  --header-height:      60px;
  --toolbar-height:     52px;
  --sidebar-width:      300px;
  --sidebar-width-sm:   260px;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
  vertical-align: middle;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color .2s ease;
}

a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* ============================================================
   3. TYPOGRAPHIE
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.3;
  margin-top: 0;
  color: var(--color-text);
}

h1 { font-size: var(--font-size-xxl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }
h4, h5, h6 { font-size: var(--font-size-base); }

.text-muted   { color: var(--color-text-muted) !important; }
.text-small   { font-size: var(--font-size-sm); }
.text-bold    { font-weight: 600; }
.text-primary { color: var(--color-primary) !important; }

/* ============================================================
   4. EN-TÊTE PRINCIPAL (header)
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-height);
  background-color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-lg);
  box-shadow: var(--shadow-md);
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  text-decoration: none;
}

.site-header__logo-img {
  height: 36px;
  width: auto;
}

.site-header__logo-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: .2px;
  white-space: nowrap;
}

.site-header__logo-text span {
  font-weight: 300;
  opacity: .8;
}

.site-header__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.site-header__nav-link {
  color: rgba(255,255,255,.75);
  font-size: 13px;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  transition: background .2s ease, color .2s ease;
  text-decoration: none;
}

.site-header__nav-link:hover,
.site-header__nav-link.is-active {
  color: var(--color-white);
  background-color: rgba(255,255,255,.15);
  text-decoration: none;
}

.site-header__nav-link.is-active {
  background-color: rgba(255,255,255,.2);
  font-weight: 600;
}

/* ============================================================
   5. BARRE DE NAVIGATION SECONDAIRE
   ============================================================ */
.site-subnav {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  z-index: 999;
  height: var(--toolbar-height);
  background-color: var(--color-primary);
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-lg);
  gap: var(--spacing-sm);
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.site-subnav__label {
  font-size: var(--font-size-sm);
  color: rgba(255,255,255,.7);
  font-weight: 500;
  margin-right: var(--spacing-xs);
  white-space: nowrap;
}

.site-subnav__select {
  height: 32px;
  padding: 0 var(--spacing-md) 0 var(--spacing-sm);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--radius-sm);
  background-color: rgba(255,255,255,.12);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  cursor: pointer;
  outline: none;
  min-width: 180px;
  transition: background .2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
}

.site-subnav__select:hover,
.site-subnav__select:focus {
  background-color: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.55);
}

.site-subnav__select option {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
}

.site-subnav__separator {
  width: 1px;
  height: 24px;
  background-color: rgba(255,255,255,.25);
  margin: 0 var(--spacing-xs);
}

.site-subnav__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* ============================================================
   6. SIDEBAR / PANNEAU LATÉRAL
   ============================================================ */
.sidebar {
  position: fixed;
  top: calc(var(--header-height) + var(--toolbar-height));
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background-color: var(--color-bg-panel);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 900;
  box-shadow: var(--shadow-sm);
}

.sidebar__header {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-bg);
  flex-shrink: 0;
}

.sidebar__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0;
}

.sidebar__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-sm) 0;
}

.sidebar__body::-webkit-scrollbar {
  width: 4px;
}

.sidebar__body::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar__body::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 2px;
}

/* Groupes de filtres (accordéon) */
.filtre-groupe {
  border-bottom: 1px solid var(--color-border);
}

.filtre-groupe__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  user-select: none;
  transition: background .15s ease;
}

.filtre-groupe__entete:hover {
  background-color: var(--color-bg);
}

.filtre-groupe__titre {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--color-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.filtre-groupe__chevron {
  font-size: 11px;
  color: var(--color-text-muted);
  transition: transform .25s ease;
}

.filtre-groupe.is-open .filtre-groupe__chevron {
  transform: rotate(180deg);
}

.filtre-groupe__contenu {
  padding: 0 var(--spacing-sm) var(--spacing-sm);
}

/* Sous-groupes */
.filtre-sous-groupe {
  margin-bottom: var(--spacing-xs);
}

.filtre-sous-groupe__titre {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: var(--spacing-xs) var(--spacing-sm);
  margin: 0;
}

/* Items de filtre (checkboxes) */
.filtre-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 5px var(--spacing-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s ease;
  user-select: none;
}

.filtre-item:hover {
  background-color: var(--color-primary-xlight);
}

.filtre-item input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.filtre-item__label {
  font-size: 12px;
  color: var(--color-text);
  flex: 1;
  line-height: 1.4;
}

.filtre-item__count {
  font-size: 10px;
  color: var(--color-text-muted);
  background: var(--color-bg);
  padding: 1px 5px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
}

/* État désactivé des filtres */
.filtre-item.is-disabled {
  opacity: .35;
  pointer-events: none;
}

.filtre-groupe.is-disabled {
  opacity: .35;
  pointer-events: none;
}

/* ============================================================
   7. BOUTONS
   ============================================================ */
.btn-observatoire {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 6px var(--spacing-md);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.5;
}

.btn-observatoire:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Variantes */
.btn-observatoire--primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.btn-observatoire--primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
}

.btn-observatoire--outline {
  background-color: transparent;
  color: var(--color-white);
  border-color: rgba(255,255,255,.5);
}

.btn-observatoire--outline:hover {
  background-color: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.8);
  color: var(--color-white);
}

.btn-observatoire--ghost {
  background-color: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

.btn-observatoire--ghost:hover {
  background-color: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-primary);
}

.btn-observatoire--danger {
  background-color: transparent;
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.btn-observatoire--danger:hover {
  background-color: var(--color-danger);
  color: var(--color-white);
}

.btn-observatoire--sm {
  padding: 4px var(--spacing-sm);
  font-size: 11px;
}

/* ============================================================
   8. BADGES THÉMATIQUES
   ============================================================ */
.badge-thematique {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
}

.badge-thematique--eau-potable {
  background-color: #E3F2FD;
  color: var(--color-theme-eau-potable);
}

.badge-thematique--milieux {
  background-color: #E0F2F1;
  color: var(--color-theme-milieux);
}

.badge-thematique--assainissement {
  background-color: #F3E5F5;
  color: var(--color-theme-assainissement);
}

.badge-thematique--risques {
  background-color: #FBE9E7;
  color: var(--color-theme-risques);
}

.badge-thematique--climat {
  background-color: #E1F5FE;
  color: var(--color-theme-climat);
}

.badge-thematique--gouvernance {
  background-color: #E8F5E9;
  color: var(--color-theme-gouvernance);
}

/* ============================================================
   9. FORMULAIRES & SELECTS
   ============================================================ */
.form-select-observatoire {
  height: 36px;
  padding: 0 32px 0 var(--spacing-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-base);
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7A99' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.form-select-observatoire:hover,
.form-select-observatoire:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(21,101,192,.1);
}

/* ============================================================
   10. FOOTER
   ============================================================ */
.site-footer {
  background-color: var(--color-primary-dark);
  color: rgba(255,255,255,.65);
  font-size: var(--font-size-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.site-footer__copyright {
  color: rgba(255,255,255,.5);
}

.site-footer__links {
  display: flex;
  gap: var(--spacing-md);
}

.site-footer__links a {
  color: rgba(255,255,255,.65);
  font-size: var(--font-size-sm);
}

.site-footer__links a:hover {
  color: var(--color-white);
  text-decoration: underline;
}

/* ============================================================
   11. UTILITAIRES
   ============================================================ */

/* Zone principale (décalée du header + toolbar + sidebar) */
.page-content {
  margin-top: calc(var(--header-height) + var(--toolbar-height));
  margin-left: var(--sidebar-width);
  min-height: calc(100vh - var(--header-height) - var(--toolbar-height));
}

.page-content--no-sidebar {
  margin-left: 0;
}

/* Chargement */
.spinner-observatoire {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Tooltip */
.tooltip-observatoire {
  position: absolute;
  z-index: 9999;
  background: var(--color-text);
  color: var(--color-white);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  pointer-events: none;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
}

/* Scrollbar globale */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-light); }

/* Transition générale */
.transition-all { transition: all .2s ease; }

/* Overlay plein écran */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 800;
  display: none;
}

.overlay.is-visible { display: block; }