/* ============================================================================
   observatoire.css — Feuille de style partagée de l'Observatoire Paradoxale
   ============================================================================

   Ce fichier porte le tronc commun de style des onze pages de l'Observatoire,
   factorisé en session 20 du 22 juin 2026 à partir des blocs <style> intégrés
   précédemment dupliqués sur chaque page.

   Portée : sélecteurs présents sur huit pages au minimum avec bloc strictement
   identique, plus les directives @font-face et @media des breakpoints
   responsifs (900, 760, 600 px) communs à toutes les pages thématiques.

   Spécificités locales : conservées dans le bloc <style> de chaque page
   (variables additionnelles pour donnees, classes propres à la cascade
   narrative voie B pour etat lorsque réalignement effectué, classes de la
   carte départementale pour demographie, économie et entreprises, classes
   de la carte mondiale pour international, et ainsi de suite).

   Cache-buster : observatoire.css?v=1 lors de la première mise en service.
   À incrémenter en cas de modification ultérieure, conformément à la règle
   cardinale de cache-busting de l'Observatoire.

   Cohabitation : ce fichier doit être chargé en première position dans la
   tête HTML, avant intelligence-territoriale.css, cartographie-mondiale.css
   et recherche.css, et avant le bloc <style> local. L'ordre garantit que
   les surcharges locales prennent effet sur les pages où elles sont
   nécessaires (donnees pour les variables, demographie pour la grille des
   pop-bubbles, et ainsi de suite).
   ============================================================================ */


/* =========================================================================
   1. Polices auto-hébergées (aucun appel externe).
   ========================================================================= */
@font-face{font-family:"Cormorant Garamond";font-weight:300;font-style:normal;font-display:swap;src:url("/assets/fonts/CormorantGaramond-Light.woff2") format("woff2");}
@font-face{font-family:"Cormorant Garamond";font-weight:400;font-style:normal;font-display:swap;src:url("/assets/fonts/CormorantGaramond-Regular.woff2") format("woff2");}
@font-face{font-family:"Cormorant Garamond";font-weight:500;font-style:normal;font-display:swap;src:url("/assets/fonts/CormorantGaramond-Medium.woff2") format("woff2");}
@font-face{font-family:"Cormorant Garamond";font-weight:600;font-style:normal;font-display:swap;src:url("/assets/fonts/CormorantGaramond-SemiBold.woff2") format("woff2");}
@font-face{font-family:"Cormorant Garamond";font-weight:300;font-style:italic;font-display:swap;src:url("/assets/fonts/CormorantGaramond-LightItalic.woff2") format("woff2");}
@font-face{font-family:"Cormorant Garamond";font-weight:400;font-style:italic;font-display:swap;src:url("/assets/fonts/CormorantGaramond-Italic.woff2") format("woff2");}
@font-face{font-family:"Cormorant Garamond";font-weight:500;font-style:italic;font-display:swap;src:url("/assets/fonts/CormorantGaramond-MediumItalic.woff2") format("woff2");}
@font-face{font-family:"Cormorant Garamond";font-weight:600;font-style:italic;font-display:swap;src:url("/assets/fonts/CormorantGaramond-SemiBoldItalic.woff2") format("woff2");}
@font-face{font-family:"Raleway";font-weight:400;font-style:normal;font-display:swap;src:url("/assets/fonts/Raleway-Regular.woff2") format("woff2");}
@font-face{font-family:"Raleway";font-weight:500;font-style:normal;font-display:swap;src:url("/assets/fonts/Raleway-Medium.woff2") format("woff2");}
@font-face{font-family:"Raleway";font-weight:600;font-style:normal;font-display:swap;src:url("/assets/fonts/Raleway-SemiBold.woff2") format("woff2");}
@font-face{font-family:"Raleway";font-weight:700;font-style:normal;font-display:swap;src:url("/assets/fonts/Raleway-Bold.woff2") format("woff2");}
@font-face{font-family:"Raleway";font-weight:800;font-style:normal;font-display:swap;src:url("/assets/fonts/Raleway-ExtraBold.woff2") format("woff2");}


/* =========================================================================
   2. Variables racine — identité partagée par toutes les surfaces.
   La page donnees ajoute en local quelques variables propres à la page
   d'exploration générique.
   ========================================================================= */
:root{
  --crimson:#7e1925; --crimson-dk:#540f1a; --crimson-lt:#9b2235;
  --green:#3a6b5f; --green-dk:#2c5249; --green-lt:#5d8a7d;
  --gold:#c9a459; --gold-lt:#e2c07a; --gold-dk:#7a5e15;
  --cream:#f8f4ee; --cream-dk:#ede6d8;
  --charcoal:#1c1c1c; --grey:#6b6b6b; --grey-lt:#a8a8a8; --white:#ffffff;
  --ff-serif:"Cormorant Garamond",Georgia,serif;
  --ff-sans:"Raleway",sans-serif;
  --ease-out:cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================================
   3. Reset et règles globales.
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body { background: var(--cream); color: var(--charcoal); font-family: var(--ff-sans); font-weight: 400; line-height: 1.7; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
.paradoxale-name { font-family: var(--ff-serif); }
.paradoxale-name em { font-style: italic; color: var(--gold-dk); }
.tnum { font-variant-numeric: tabular-nums lining-nums; }


/* =========================================================================
   4. Bandeau de navigation principal et son module de recherche.
   La règle d'identifiant #main-nav garantit qu'aucun autre élément nav de
   la page n'hérite par erreur du positionnement fixe.
   ========================================================================= */
#main-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 2rem; background: rgba(58, 107, 95, 0.96); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(201, 164, 89, 0.3); transition: box-shadow .3s var(--ease-out); }
#main-nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.18); }
.nav-logo { font-family: var(--ff-serif); font-size: 1.45rem; font-weight: 600; color: var(--cream); letter-spacing: .02em; }
.nav-logo span { display: block; font-family: var(--ff-sans); font-size: .6rem; font-weight: 500; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); margin-top: -2px; }
.nav-logo em { font-style: italic; color: var(--gold); }
.nav-links { display: flex; gap: 2rem; align-items: center; }
.nav-links a { font-size: .78rem; font-weight: 400; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.85); transition: color .2s; }
.nav-links a:hover { color: var(--gold-lt); }
.nav-links .btn-nav-secondary { background: transparent; color: var(--gold-lt); padding: .35rem 1rem; border-radius: 2px; border: 1.5px solid rgba(226,192,122,.5); transition: background .2s, color .2s, transform .2s; }
.nav-links .btn-nav-secondary:hover { background: var(--gold-lt); color: var(--green-dk); transform: translateY(-1px); }

.nav-search { position: relative; display: flex; align-items: center; gap: .55rem; background: rgba(255,255,255,.14); border: 1px solid rgba(226,192,122,.3); border-radius: 2px; padding: .55rem 1.05rem; flex: 0 0 310px; margin-left: 110px; margin-right: auto; transition: border-color .2s; }
.nav-search:focus-within { border-color: var(--gold-lt); }
.nav-search .search-ico { width: 14px; height: 14px; color: rgba(255,255,255,.6); flex-shrink: 0; }
.nav-search input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--cream); font-family: var(--ff-sans); font-size: .8rem; }
.nav-search input::placeholder { color: rgba(255,255,255,.5); }

/* Sous-menu déroulant sur l'entrée "Indicateurs" du bandeau supérieur.
   Voie B session 49, activé au click, fermeture au click extérieur ou
   sur touche Échap. Le déclencheur est un bouton (accessibilité ARIA
   correcte), et douze items sont proposés dans le menu : une entrée
   "Vue d'ensemble" en tête qui mène au hub `/indicateurs`, séparée par
   une fine ligne des onze familles éditoriales de la refonte structurelle.
   Les familles non encore existantes portent le tag "Bientôt" et sont
   non cliquables. Le sous-menu est masqué sous 900 px comme le reste
   de .nav-links (media query existante ligne 161). */
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown-trigger { font-family: var(--ff-sans); font-size: .78rem; font-weight: 400; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.85); background: transparent; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; transition: color .2s; }
.nav-dropdown-trigger:hover, .nav-dropdown[aria-expanded="true"] .nav-dropdown-trigger { color: var(--gold-lt); }
.nav-dropdown-caret { display: inline-block; font-size: .55rem; transition: transform .2s var(--ease-out); }
.nav-dropdown[aria-expanded="true"] .nav-dropdown-caret { transform: rotate(180deg); }
.nav-dropdown-menu { position: absolute; top: calc(100% + .85rem); right: 0; min-width: 250px; list-style: none; margin: 0; padding: .5rem 0; background: rgba(35, 63, 55, 0.98); backdrop-filter: blur(12px); border: 1px solid rgba(226,192,122,.22); border-radius: 3px; box-shadow: 0 12px 32px rgba(0,0,0,.38); opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity .18s var(--ease-out), transform .18s var(--ease-out); z-index: 200; }
.nav-dropdown[aria-expanded="true"] .nav-dropdown-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nav-dropdown-menu li { margin: 0; }
.nav-dropdown-menu a, .nav-dropdown-menu span.nav-dd-soon { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .55rem 1.15rem; font-family: var(--ff-sans); font-size: .72rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.82); text-decoration: none; transition: background .15s, color .15s; }
.nav-dropdown-menu a:hover { background: rgba(226,192,122,.1); color: var(--gold-lt); }
.nav-dropdown-menu span.nav-dd-soon { color: rgba(255,255,255,.38); cursor: default; }
.nav-dropdown-menu li.nav-dd-overview a { color: var(--gold-lt); font-weight: 500; }
.nav-dd-sep { border: none; border-top: 1px solid rgba(226,192,122,.16); margin: .35rem 0; }
.nav-dd-tag { font-size: .5rem; letter-spacing: .14em; font-weight: 700; color: rgba(255,255,255,.4); }


/* =========================================================================
   5. En-tête de page : conteneur principal et titre.
   La règle main porte la largeur de colonne et le padding standard du
   gabarit thématique. Les pages au layout particulier (etat refondu sur la
   cascade narrative voie B, donnees en exploration générique) peuvent
   surcharger main en local au besoin.
   ========================================================================= */
main { max-width: 880px; margin: 0 auto; padding: 7rem 2rem 3rem; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; border-bottom: 1px solid var(--cream-dk); padding-bottom: .9rem; margin-bottom: 1.2rem; }
.page-head h1 { font-family: var(--ff-serif); font-weight: 500; font-size: 1.7rem; line-height: 1.05; margin: 0; }
.page-head h1 em { font-style: italic; color: var(--gold-dk); }


/* =========================================================================
   6. Barre de profondeur (filtre par durée) et chips de sélection.
   Composants utilisés sur huit pages, communs à toutes les pages thématiques.
   ========================================================================= */
.filterbar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.filterbar .lab { font-size: .56rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--green-dk); }
.chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.chip { font-family: var(--ff-sans); font-size: .64rem; font-weight: 700; cursor: pointer; background: var(--white); border: 1px solid var(--cream-dk); color: var(--grey); padding: .32rem .7rem; border-radius: 999px; transition: all .15s; }
.chip:hover { border-color: var(--green-lt); }
.chip.on { background: var(--green); color: var(--white); border-color: var(--green); }


/* =========================================================================
   7. Police des étiquettes dans les graphiques et premier alignement des
   colonnes de tables. Règles transverses utilisées en grammaire commune.
   ========================================================================= */
.chart text { font-family: var(--ff-sans); }
th:first-child, td:first-child { text-align: left; }


/* =========================================================================
   8. Bandeau légal et pied de page — recopiés de l'accueil.
   ========================================================================= */
.legal-band { background: var(--cream); border-top: 1px solid var(--cream-dk); border-bottom: 1px solid var(--cream-dk); padding: 1.5rem 2rem; text-align: center; }
.legal-band p { font-size: .65rem; color: var(--grey-lt); letter-spacing: .08em; }

footer { background: var(--green-dk); padding: 3rem 2rem; color: rgba(255,255,255,.45); }
.footer-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.footer-logo-title { font-family: var(--ff-serif); font-size: 1.2rem; color: rgba(255,255,255,.7); font-weight: 300; letter-spacing: .02em; }
.footer-logo-title em { font-style: italic; color: var(--gold); }
.footer-logo small { display: block; font-family: var(--ff-sans); font-size: .55rem; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); margin-top: 2px; }
.footer-copy { font-size: .72rem; text-align: right; }
.footer-copy a { color: var(--gold); transition: opacity .2s; }
.footer-copy a:hover { opacity: .7; }
.footer-legal-links { max-width: 1100px; margin: 1.5rem auto 0; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.08); text-align: center; }
.footer-legal-links a { font-family: var(--ff-sans); font-size: .55rem; font-weight: 500; letter-spacing: .25em; text-transform: uppercase; color: rgba(255,255,255,.25); margin: 0 .8rem; transition: color .2s; }
.footer-legal-links a:hover { color: rgba(255,255,255,.55); }


/* =========================================================================
   9. Réponses adaptatives — alignées sur l'accueil. Menu masqué sous 900 px.
   ========================================================================= */
@media (max-width: 900px) {
  #main-nav { padding: 1rem 1.5rem; }
  .nav-links { display: none; }
}
@media (max-width: 760px) {
  #main-nav { padding: .9rem 1.1rem; }
  .nav-search { flex: 0 1 220px; padding: .45rem .85rem; }
  .nav-search input { font-size: .75rem; }
  main { padding: 7rem 1rem 2.5rem; }
}
@media (max-width: 600px) {
  .nav-logo { font-size: 1.2rem; }
  .nav-logo span { font-size: .55rem; letter-spacing: .2em; }
  .nav-search { flex: 0 1 140px; padding: .4rem .7rem; gap: .4rem; }
  .nav-search input { font-size: .72rem; }
}

/* =========================================================================
   Treemap pondéré, V1-0 ter, session 26 du 24 juin 2026.
   Grammaire visuelle de la vingt-huitième forme du catalogue. Adapté pour
   le helper tileShell : les classes spécifiques au treemap vivent sous le
   conteneur intermédiaire .treemap-host, posé par renderTreemapPondere
   dans le slot "chart" de la tuile. Première forme instantanée non temporelle
   de l'écosystème, animée par transitions CSS sur attributs SVG.
   ========================================================================= */
.treemap-host { position: relative; }
.treemap-host svg.treemap { width: 100%; height: auto; display: block; overflow: visible; margin-top: 6px; aspect-ratio: 720 / 420; }

/* Contrôles : sélecteurs de zone et d'année, alignés en deux rangées. */
.treemap-controls { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 6px; }
.treemap-controls .tm-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.treemap-controls .tm-lab { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft, #5c685f); font-weight: 600; min-width: 60px; }
.treemap-controls .tm-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.treemap-controls .tm-chip {
  border: 1px solid var(--hair, #d9dace);
  background: var(--paper, #f4f2ea);
  color: var(--ink, #23302a);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  font-variant-numeric: tabular-nums;
}
.treemap-controls .tm-chip:hover { background: #efede3; }
.treemap-controls .tm-chip.on {
  background: var(--green, #3f7b57);
  color: #fff;
  border-color: var(--green, #3f7b57);
  font-weight: 600;
}
.treemap-controls .tm-play {
  border: 1px solid var(--hair, #d9dace);
  background: #fbfaf3;
  color: var(--ink, #23302a);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: auto;
}
.treemap-controls .tm-play:hover { background: #efede3; }

/* Bandeau de rang sous les sélecteurs. */
.treemap-host .tm-rang {
  font-size: 13px;
  color: var(--ink-soft, #5c685f);
  margin: 2px 0 6px;
  min-height: 18px;
}
.treemap-host .tm-rang b { color: var(--ink, #23302a); font-weight: 600; }

/* Cellules du treemap : c'est ici que vit l'animation fluide. Les attributs
   SVG x, y, width, height portent les transitions et toute modification est
   animée automatiquement par le navigateur. */
.treemap-host .tm-cell { cursor: pointer; }
.treemap-host .tm-rect {
  transition: x .55s cubic-bezier(.4,0,.2,1),
              y .55s cubic-bezier(.4,0,.2,1),
              width .55s cubic-bezier(.4,0,.2,1),
              height .55s cubic-bezier(.4,0,.2,1),
              fill .3s,
              opacity .3s;
  stroke: var(--paper, #f4f2ea);
  stroke-width: 1.5;
}
.treemap-host .tm-name {
  font-size: 12.5px;
  font-weight: 600;
  font-family: "Raleway", "Helvetica Neue", Arial, sans-serif;
  pointer-events: none;
  transition: x .55s cubic-bezier(.4,0,.2,1),
              y .55s cubic-bezier(.4,0,.2,1),
              opacity .3s;
}
.treemap-host .tm-val {
  font-size: 11.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-family: "Raleway", "Helvetica Neue", Arial, sans-serif;
  pointer-events: none;
  transition: x .55s cubic-bezier(.4,0,.2,1),
              y .55s cubic-bezier(.4,0,.2,1),
              opacity .3s;
}
.treemap-host .tm-cell:hover .tm-rect { stroke: var(--ink, #23302a); stroke-width: 2; }
.treemap-host .tm-cell.is-residu .tm-rect { stroke-dasharray: 3 2; opacity: 0.7; }

/* Tooltip flottant. */
.treemap-host .tm-tooltip {
  position: absolute;
  pointer-events: none;
  background: #fbfaf3;
  border: 1px solid var(--hair, #d9dace);
  border-radius: 5px;
  padding: 8px 11px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink, #23302a);
  font-family: "Raleway", "Helvetica Neue", Arial, sans-serif;
  box-shadow: 0 2px 8px rgba(35, 48, 42, 0.12);
  opacity: 0;
  transition: opacity .2s;
  min-width: 180px;
  max-width: 240px;
  z-index: 1010;
}
.treemap-host .tm-tooltip strong { color: var(--ink, #23302a); }