@charset "UTF-8";

/* =========================================================================
   Module Intelligence Territoriale — Feuille de style partagée
   ---------------------------------------------------------------------------
   Version V1-0, session 14 du 18 juin 2026.
   Doctrine : CDC-IT-V1-0 (cahier des charges fondateur du module).

   Cette feuille est destinée à être incluse en cache-buster `?v=N` sur
   toute page de famille Observatoire qui mobilise une carte du module.
   Toutes les règles sont scopées sous `.it-carte`, conteneur racine de
   la tuile carte, pour éviter toute collision avec le CSS de la page
   hôte qui porte la palette Observatoire générale (--cream, --green,
   --crimson, --gold). La palette terre interne du module (--paper, --ink,
   --accent, --d-* divergente) ne déborde pas du conteneur .it-carte.

   Industrialisation : la même feuille de style sert toutes les pages
   thématiques qui ajouteront une carte départementale, conformément à
   la doctrine d'industrialisation de la section 2.3 du CDC-IT-V1-0.
   ========================================================================= */

/* =========================================================================
   1. Palette terre du module, scopée à la tuile carte.
   ========================================================================= */
.it-carte {
  --paper: #F4F2EA;
  --paper-2: #EBE7DC;
  --ink: #23302A;
  --ink-soft: #4A584F;
  --rule: #C8C2B0;
  --rule-soft: #DDD7C5;
  --accent: #9A4A36;
  --accent-soft: #C28570;
  --up: #2E6B49;
  --down: #9A4A36;
  --neutral: #6B6657;
  --d-strong-pos: #2E6B49;
  --d-soft-pos:   #7CA48A;
  --d-neutral:    #D8D4C5;
  --d-soft-neg:   #C7917F;
  --d-strong-neg: #9A4A36;
}

/* =========================================================================
   2. Enveloppe extérieure de la tuile carte, harmonisée avec les tuiles
      classiques Observatoire (border, border-top vert, padding, ombre,
      fond blanc). Alignement du fond sur les tuiles standards arbitré en
      session 47 par retour sur la décision doctrinale de session 14 qui
      posait un fond crème paper distinctif. L'intérieur porte la palette
      terre du module pour le reste (texte, accents, sidebar).
   ========================================================================= */
.it-carte {
  background: var(--white, #ffffff);
  color: var(--ink);
  font-family: "Raleway", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  border: 1px solid var(--cream-dk, #ede6d8);
  border-radius: 4px;
  border-top: 3px solid var(--green, #3a6b5f);
  box-shadow: 0 10px 26px -22px rgba(44,82,73,.5);
  scroll-margin-top: 110px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* =========================================================================
   3. En-tête de la tuile carte : pastille Baromètre + titre + ligne
      d'actions à trois boutons (Plein écran, Partager, Exporter),
      conforme à la doctrine V1-16 du registre de réutilisation.
   ========================================================================= */
.it-carte .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: 1rem 1.05rem .5rem;
}
.it-carte .src {
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-dk, #2c5249);
}
.it-carte .pill {
  font-size: .5rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .2rem .45rem;
  border-radius: 2px;
  background: var(--gold, #c9a459);
  color: var(--green-dk, #2c5249);
}
.it-carte h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.1;
  margin: 0 1.05rem .3rem;
  text-wrap: balance;
  color: var(--ink);
}
.it-carte h3 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 500;
}

/* =========================================================================
   4. Barre de sélection de vue (it-vue-bar). Conteneur léger qui accueille
      des chips standards (.chip) héritant du CSS global de la page hôte,
      pour rester cohérent avec la grammaire filterbar de l'Observatoire.
      Le bouton de réinitialisation (« Vue nationale ») est un chip à droite,
      avec attribut hidden natif quand pas en mode focus.
   ========================================================================= */
.it-carte .it-vue-bar {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  padding: .55rem 1.05rem;
  border-top: 1px solid var(--cream-dk, #ede6d8);
  border-bottom: 1px solid var(--cream-dk, #ede6d8);
  background: var(--white, #ffffff);
}
.it-carte .it-vue-label {
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.it-carte .it-reset {
  margin-left: auto;
  display: none;
}
.it-carte .it-reset.is-visible {
  display: inline-flex;
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.it-carte .it-reset.is-visible:hover {
  background: #7E3A2C;
  border-color: #7E3A2C;
}

/* =========================================================================
   5. Workspace : grille interne carte + sidebar.
      Layout horizontal en desktop (carte 1fr + sidebar 230px),
      empilé en vertical sous 700px. Sidebar plus compacte pour donner
      le maximum d'espace au SVG. min-height augmenté pour que la carte
      occupe une hauteur substantielle même en absence de focus.
   ========================================================================= */
.it-carte .workspace {
  display: grid;
  grid-template-columns: 1fr 230px;
  gap: 0;
  min-height: 540px;
}
.it-carte .map-area {
  position: relative;
  padding: 16px 1.05rem 12px;
  display: flex;
  flex-direction: column;
}
.it-carte .sidebar {
  border-left: 1px solid var(--rule);
  padding: 16px 14px;
  background: var(--paper-2);
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 700px) {
  .it-carte .workspace { grid-template-columns: 1fr; }
  .it-carte .sidebar { border-left: none; border-top: 1px solid var(--rule); }
}

/* =========================================================================
   5bis. Repli de la sidebar (chantier session 20).
   Bouton ancré sur le bord droit de la map-area, sidebar collapsable avec
   transition fluide sur grid-template-columns. État repliée par défaut au
   chargement, géré par le moteur JS via sessionStorage. Ces règles servent
   les deux moteurs : Intelligence Territoriale (5 pages départementales) et
   Cartographie Mondiale (page Internationale, qui hérite des classes via
   sa réutilisation de la grammaire IT). Désactivé en mode mobile où la
   sidebar est empilée verticalement sous la carte.
   ========================================================================= */
.it-carte .workspace {
  position: relative;
  transition: grid-template-columns 0.28s ease-out;
}
.it-carte .workspace:has(.sidebar.collapsed) {
  grid-template-columns: 1fr 0;
}
.it-carte .sidebar {
  transition: opacity 0.2s ease-out, padding 0.28s ease-out;
  overflow: hidden;
}
.it-carte .sidebar.collapsed {
  opacity: 0;
  padding-left: 0;
  padding-right: 0;
  pointer-events: none;
}

.it-carte .sidebar-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  z-index: 5;
  width: 26px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-dk, #2c5249);
  color: var(--cream, #f8f4ee);
  border: 1px solid var(--rule, #ede6d8);
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--ff-serif, Georgia, serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  padding: 0;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.15);
  transition: background 0.2s, right 0.28s ease-out, color 0.2s;
}
.it-carte .sidebar-toggle:hover {
  background: var(--gold-dk, #7a5e15);
}
.it-carte .sidebar-toggle:focus-visible {
  outline: 2px solid var(--gold, #c9a459);
  outline-offset: 2px;
}
.it-carte .workspace:has(.sidebar:not(.collapsed)) .sidebar-toggle {
  right: 230px;
}

.it-carte .sidebar-toggle.pulse {
  animation: it-pulse-toggle 1.2s ease-in-out 3;
}
@keyframes it-pulse-toggle {
  0%, 100% { box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(201, 164, 89, 0.55); }
  50%      { box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.15), 0 0 0 12px rgba(201, 164, 89, 0); }
}

@media (max-width: 700px) {
  .it-carte .sidebar-toggle { display: none; }
  .it-carte .sidebar.collapsed { opacity: 1; padding: 16px 14px; pointer-events: auto; }
  .it-carte .workspace:has(.sidebar.collapsed) { grid-template-columns: 1fr; }
}

/* =========================================================================
   5ter. Masquage de la carte pendant le chargement (cm-loading).
   La classe .cm-loading est posée sur la section .it-carte dès le HTML
   (donc présente dès le rendu initial, avant tout JS) pour masquer le SVG
   tant que le moteur cartographie-mondiale n'a pas appliqué son preset de
   cadrage. Évite le flash de contenu non stylé (SVG affiché à sa taille
   intrinsèque énorme, plusieurs fois la zone d'affichage).
   Le moteur retire .cm-loading après appliquerViewBox(etat) initial.
   Concerne principalement la page Internationale dont le SVG mondial est
   embarqué sans viewBox initial ; les SVG départementaux ne souffrent pas
   de ce problème (viewBox 1000x965 raisonnable).
   ========================================================================= */
.it-carte.cm-loading > * {
  display: none !important;
}
.it-carte.cm-loading {
  position: relative;
  min-height: 540px;
  background: var(--paper-2, #faf6ee);
  border-radius: 4px;
}
.it-carte.cm-loading::after {
  content: "Chargement de la carte…";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--ff-sans, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-dk, #2c5249);
  opacity: 0.6;
  z-index: 2;
  pointer-events: none;
}

/* =========================================================================
   6. Carte SVG : prend toute la largeur et la hauteur de son conteneur,
      avec preserveAspectRatio="meet" qui conserve le ratio France.
      Le map-frame en flex: 1 permet à la carte d'occuper toute la
      hauteur restante de map-area, sous la légende.
   ========================================================================= */
.it-carte .map-frame {
  position: relative;
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 380px;
}
.it-carte .map-frame-inner {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
}
.it-carte svg.france {
  width: 100%;
  height: 100%;
  display: block;
}
.it-carte path.dept {
  stroke: var(--paper);
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: opacity 0.4s ease, stroke 0.2s, stroke-width 0.2s, fill 0.3s;
}
.it-carte path.dept:hover {
  stroke: var(--ink);
  stroke-width: 1.5;
}
.it-carte path.dept.focus {
  stroke: var(--ink);
  stroke-width: 2.5;
  filter: drop-shadow(0 1px 2px rgba(35, 48, 42, 0.15));
}
.it-carte path.dept.neighbor {
  stroke: var(--ink-soft);
  stroke-width: 1.2;
}
.it-carte path.dept.dim {
  opacity: 0.18;
}
/* =========================================================================
   Cercles proportionnels population.
   La couleur et la bordure sont appliquees en style inline par le moteur
   JS au moment de la creation de chaque cercle, via une interpolation
   continue HSL fonction de la population. Cela bypass toute mecanique
   de cache CSS et toute cascade qui pourrait masquer la palette.
   Les regles CSS ici portent uniquement l'opacite, les transitions,
   et le comportement par etat (focus, neighbor, dim).
   ========================================================================= */
.it-carte circle.pop-bubble {
  stroke-width: 1.2;
  fill-opacity: 0.85;
  stroke-opacity: 0.95;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  transition: fill-opacity 0.4s, stroke-opacity 0.4s, r 0.4s;
}
.it-carte circle.pop-bubble.dim {
  fill-opacity: 0.08;
  stroke-opacity: 0.2;
}
.it-carte circle.pop-bubble.focus {
  fill: var(--accent) !important;
  fill-opacity: 0.6 !important;
  stroke: var(--accent) !important;
  stroke-width: 1.8;
}
.it-carte circle.pop-bubble.neighbor {
  fill-opacity: 0.55;
}
/* Doctrine session 15 : couleur neutre par défaut sur tous les paths
   départementaux. Le SVG natif rend fill=black tant que le JS n'a pas
   attribué la palette en JS au DOMContentLoaded. Sans cette règle, le
   visiteur voit la France entière en noir pendant les premières
   millisecondes de chaque chargement, ce qui contredit la doctrine de
   robustesse 8.5 de la V1-8 sur la teinte de retombée. */
.it-carte path.dept {
  fill: #EBE7DC;
}

/* Doctrine session 15 : les cercles proportionnels sont la grammaire
   propre de la vue Population, qui projette directement le stock
   d'habitants. Toutes les autres vues (variation, fécondité, densité,
   indicateurs économiques) portent leur information par la choroplèthe
   seule, et les cercles ne feraient que parasiter la lecture. La règle
   masque donc par défaut, et la vue Population les expose. */
.it-carte circle.pop-bubble {
  display: none;
}
.it-carte.view-pop circle.pop-bubble {
  display: inline;
}

/* =========================================================================
   7. Légende : palette nationale, palette locale (mode focus), légende
      des cercles proportionnels.
   ========================================================================= */
.it-carte .legend {
  border-top: 1px solid var(--rule);
  padding-top: 12px;
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: end;
  font-size: 11px;
}
.it-carte .legend-block .legend-title {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
  margin-bottom: 6px;
}
.it-carte .legend-scale {
  display: flex;
  align-items: flex-end;
  gap: 1px;
}
.it-carte .legend-scale .swatch { width: 38px; height: 14px; }
.it-carte .legend-ticks {
  display: flex;
  font-size: 9px;
  color: var(--ink-soft);
  font-feature-settings: "tnum";
  margin-top: 4px;
}
.it-carte .legend-ticks span { width: 38px; }
.it-carte .legend-ticks span:first-child { text-align: left; }
.it-carte .legend-ticks span:last-child { text-align: right; }
.it-carte .legend-ticks strong {
  color: var(--accent);
  font-weight: 600;
  font-style: italic;
}
.it-carte .legend-circles {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.it-carte .legend-circles .circ-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.it-carte .legend-circles svg { display: block; }
.it-carte .legend-circles .circ-label {
  font-size: 9px;
  color: var(--ink-soft);
  font-feature-settings: "tnum";
}

/* =========================================================================
   8. Panneau latéral : état au repos (idle) et mode focus.
   ========================================================================= */
.it-carte .sidebar.idle .focus-content { display: none; }
.it-carte .sidebar:not(.idle) .idle-content { display: none; }
.it-carte .idle-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  min-height: 350px;
  padding-left: 20px;
}
.it-carte .idle-content .open-quote {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 44px;
  color: var(--accent-soft);
  line-height: 0.5;
  margin-bottom: 14px;
}
.it-carte .idle-content p {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 16px;
  font-style: italic;
  line-height: 1.4;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.it-carte .idle-content .hint {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.it-carte .sidebar .roman {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 2px;
}
.it-carte .sidebar .num {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
}
.it-carte .sidebar .focus-name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1;
  margin: 4px 0 14px;
}
.it-carte .dual-metric {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 12px 0;
  margin-bottom: 16px;
}
.it-carte .dual-metric .cell {
  display: flex;
  flex-direction: column;
}
.it-carte .dual-metric .cell .label {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 4px;
  font-weight: 500;
}
.it-carte .dual-metric .cell .v {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  font-feature-settings: "tnum", "lnum";
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.it-carte .dual-metric .cell .v .u {
  font-size: 13px;
  vertical-align: super;
  color: var(--accent);
  font-style: italic;
  margin-left: 2px;
}
.it-carte .dual-metric .cell .sub {
  margin-top: 4px;
  font-size: 10px;
  color: var(--ink-soft);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
}
.it-carte .cell.var .v.up { color: var(--up); }
.it-carte .cell.var .v.down { color: var(--down); }
.it-carte .neighbors-section h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  margin: 0 0 8px;
  color: var(--ink);
}
.it-carte .neighbors-section h3::before {
  content: "\2014\2014\00A0";
  color: var(--accent);
  font-style: normal;
}
.it-carte .neighbors-list {
  list-style: none;
  border-top: 1px solid var(--rule-soft);
  padding: 0;
  margin: 0;
}
.it-carte .neighbors-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 12px;
}
.it-carte .neighbors-list .nom {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 13px;
}
.it-carte .neighbors-list .pop {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 11px;
  color: var(--ink-soft);
  font-feature-settings: "tnum";
}
.it-carte .neighbors-list .var-val {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: 13px;
  font-feature-settings: "tnum", "lnum";
}
.it-carte .neighbors-list .var-val.better { color: var(--up); }
.it-carte .neighbors-list .var-val.worse { color: var(--down); }
.it-carte .compare-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.it-carte .compare-section .label {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
  font-weight: 500;
}
.it-carte .compare-section .row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  font-size: 11px;
  padding: 5px 0;
  border-bottom: 1px solid var(--rule-soft);
  align-items: baseline;
  gap: 10px;
}
.it-carte .compare-section .row .l {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  color: var(--ink-soft);
}
.it-carte .compare-section .row .v {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-feature-settings: "tnum", "lnum";
}
.it-carte .compare-section .row .v.better { color: var(--up); }
.it-carte .compare-section .row .v.worse { color: var(--down); }

/* =========================================================================
   9. Bouton reset déplacé dans la barre de sélection (chip .it-reset
      en marge droite, voir section 4). Ancienne règle absolute supprimée
      en itération 3 parce qu'elle masquait le bouton derrière la barre
      dans la grande majorité des cas. Le chip natif est plus robuste.
   ========================================================================= */

/* =========================================================================
   10. Cartouche pédagogique (zone repliable, sous le bloc carte).
       Doctrine cahier V1-17 section 5.8, alignée sur la grammaire
       éditoriale en trois objets de la tuile classique.
       Session 47 : les propriétés typographiques (font-family, font-size,
       line-height, color, font-style, background) sont retirées pour
       laisser la règle .cartouche-text du moteur observatoire.js piloter
       le rendu du texte, aligné sur les cartouches courtes de tuile. Seules
       les propriétés d'enveloppe structurelle (padding gauche et droit,
       padding bas, border-top) restent portées ici, parce que la carte IT
       n'a pas de padding parent qui pourrait les hériter. Le padding-top
       est laissé au moteur (0 fermée, .6rem ouverte via .cartouche.open).
   ========================================================================= */
.it-carte .cartouche {
  border-top: 1px solid var(--rule);
  padding-left: 1.05rem;
  padding-right: 1.05rem;
  padding-bottom: 12px;
}
.it-carte .cartouche .ref {
  margin-top: 8px;
  font-size: 10px;
  font-style: normal;
  font-family: "Raleway", sans-serif;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

/* =========================================================================
   11. Ligne d'actions : retrait du style local, on hérite de la grammaire
       globale .actions et .act-btn injectée par observatoire.js, pour
       garantir l'alignement parfait avec les tuiles classiques. La ligne
       d'actions de la tuile carte porte trois boutons (Plein écran,
       Partager, Exporter), conformément à la doctrine V1-16 du registre
       de lecture (Plein écran) et de réutilisation (Partager, Exporter).
   ========================================================================= */
.it-carte .actions {
  padding: 8px 1.05rem 12px;
  border-top: 1px solid var(--rule-soft);
}

/* =========================================================================
   12. Tooltip (position fixed globale, autonome).
   ========================================================================= */
#it-tooltip {
  position: fixed;
  pointer-events: none;
  background: #23302A;
  color: #F4F2EA;
  padding: 10px 14px;
  font-family: "Raleway", sans-serif;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.15s;
  white-space: nowrap;
  z-index: 1010;
  line-height: 1.5;
  border-radius: 2px;
}
#it-tooltip .name {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 15px;
  display: block;
  margin-bottom: 4px;
}
#it-tooltip .row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  font-feature-settings: "tnum";
}
#it-tooltip .row .lbl {
  color: #C28570;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}