/*
 * Le Super Observatoire — feuille de style commune aux pages /observatoire/*
 * Charte : vert #06402B, noir, blanc, Helvetica, aucun rouge (spec section 6).
 * Fond sombre spécifique à l'Observatoire (contrairement au reste du site,
 * plus clair) pour créer une distinction "tableau de bord technologique".
 */

:root {
  --vert-marque: #06402b;
  --vert-clair: #8fcba8; /* marché détendu */
  --gris-anthracite: #4a4a4a; /* marché équilibre */
  --noir: #000000;
  --blanc: #ffffff;
  --fond: #050705;
  --fond-carte: #0d120e;
  --bordure: rgba(255, 255, 255, 0.12);
  --texte-att: rgba(255, 255, 255, 0.62);
  --glow: rgba(15, 122, 76, 0.55);
  --transition-douce: 350ms ease;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--fond);
  color: var(--blanc);
  font-family: Helvetica, Arial, sans-serif;
  /* Valeur par défaut du CSS pour hyphens : "manual" (pas "none"), qui autorise
     quand même une coupure sur un trait d'union explicite dans le texte. Fixé
     ici globalement (hérité par tout élément sans règle plus spécifique) pour
     fermer définitivement le sujet, plutôt que sur seulement deux classes
     ponctuelles — constaté en production le 01/08/2026. */
  hyphens: none;
  /* Verrou global anti-scroll latéral (mobile) : un débordement horizontal de
     quelques pixels a été mesuré sur les pages Comparer et Widget sans qu'un
     élément précis n'en soit identifiable (aucune boîte ne dépasse le
     viewport, probablement un effet d'ombre) — repéré le 01/08/2026. Plutôt
     que de traquer la cause exacte, la page ne doit simplement jamais
     scroller horizontalement : le contenu doit toujours se replier pour tenir
     dans la largeur disponible.
  */
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  position: relative;
}
/* Le fond animé "réseau de points" (canvas plein écran, z-index -1) est
   injecté par assets/js/background.js, à la place de l'ancien quadrillage
   statique — voir ce fichier pour le rendu (spec section 6). */

a {
  color: var(--vert-clair);
}

.obs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  border-bottom: 1px solid var(--bordure);
  background: linear-gradient(180deg, rgba(6, 64, 43, 0.35), transparent);
}

.obs-header .obs-brand {
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.95rem;
}

.obs-header nav a {
  margin-left: 22px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-douce), border-color var(--transition-douce);
}

.obs-header nav a:hover,
.obs-header nav a[aria-current="page"] {
  color: var(--blanc);
  border-bottom-color: var(--vert-clair);
  text-shadow: 0 0 8px var(--glow);
}

.obs-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px;
  container-type: inline-size;
}

.obs-hero h1 {
  /* Basé sur cqw (largeur du conteneur), pas vw (largeur de la fenêtre) : les
     pages étroites (kit presse, rapport, max-width 560px) ont un titre plus
     long que large disponible ; un dimensionnement en vw ignorerait cette
     largeur réduite et ferait déborder le titre hors de son conteneur.
     Pas de white-space: nowrap forcé : un retour à la ligne ne se produit
     que si le texte ne tient vraiment pas (comportement par défaut), ce qui
     couvre à la fois "une seule ligne quand la largeur le permet" et un
     repli propre sur mobile sans débordement horizontal. */
  font-size: clamp(1.3rem, 0.85rem + 2.6cqw, 2.1rem);
  margin: 0 0 20px;
  text-align: center;
  animation: obs-pulse-titre 3.4s ease-in-out infinite;
}

@keyframes obs-pulse-titre {
  0%,
  100% {
    transform: scale(1);
    text-shadow: 0 0 0 rgba(143, 203, 168, 0);
  }
  50% {
    transform: scale(1.02);
    text-shadow: 0 0 16px var(--glow);
  }
}

.obs-hero p.obs-lede {
  color: var(--texte-att);
  line-height: 1.5;
  margin: 0 0 10px;
  text-align: justify;
  text-align-last: left;
  /* hyphens: auto coupait réellement des mots en fin de ligne avec un trait
     d'union visible (ex. "af-fichés", "dé-pend") : constaté par capture
     d'écran le 31/07/2026, contraire à la règle "aucun mot n'est coupé".
     Explicitement désactivé plutôt que simplement omis, pour ignorer toute
     valeur par défaut du navigateur. */
  hyphens: none;
  /* Évite qu'une phrase courte se retrouve seule sur sa propre ligne quand
     elle tiendrait sur la ligne précédente avec un peu plus de largeur
     (ignoré proprement par les navigateurs qui ne le supportent pas encore). */
  text-wrap: pretty;
}

/* Essayé en justifié + hyphens: auto le 01/08/2026 (demande explicite) pour
   lisser le bord droit irrégulier causé par les noms de communes liés par
   une espace insécable (ex. "Le Chambon‑Feugerolles") forçant des lignes
   très courtes. Revenu en arrière le même jour, une fois vérifié à l'écran
   que le vrai bug d'origine (gros espace autour de l'espace insécable
   quand un nom composé se retrouve seul sur sa ligne, justify l'étire pour
   remplir la ligne) n'était pas résolu par hyphens: auto — préféré au
   compromis pour ne pas rouvrir un problème déjà réglé. */
.obs-hero p.obs-lede--communes {
  text-align: left;
}

.obs-actualise {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--vert-clair);
  border: 1px solid rgba(143, 203, 168, 0.4);
  border-radius: 999px;
  padding: 7px 16px;
}

/* --- Cartes de données ------------------------------------------------- */
.obs-card {
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: 10px;
  padding: 18px 20px;
  transition: box-shadow var(--transition-douce), border-color var(--transition-douce), transform var(--transition-douce);
}

.obs-card:hover,
.obs-card:focus-within {
  border-color: rgba(143, 203, 168, 0.55);
  box-shadow: 0 0 22px var(--glow);
}

/* Une carte juste après le bloc de titre (pages rapport/kit presse) a besoin
   de son propre espace, plutôt que de coller directement au texte d'intro. */
.obs-hero + .obs-card {
  margin-top: 44px;
}

.obs-hero + .obs-card .obs-btn {
  display: block;
  width: fit-content;
  margin: 14px auto 0;
}

.obs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.obs-commune-nom {
  font-size: 1.05rem;
  font-weight: bold;
  margin: 0 0 6px;
}

/* Précision de secteur sous le nom d'un quartier de Saint-Étienne (cartes,
   fiche commune) — voir worker/src/config.ts, champ `secteur`. */
.obs-secteur {
  display: block;
  font-size: 0.78rem;
  font-weight: normal;
  color: var(--texte-att);
  margin-top: 3px;
  line-height: 1.4;
}

.obs-secteur:empty {
  display: none;
}

.obs-metric {
  min-height: 2.6rem;
  display: flex;
  align-items: center;
  font-size: 2.3rem;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
}

.obs-metric-label {
  font-size: 0.78rem;
  color: var(--texte-att);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Même hauteur que .obs-metric : dans une carte de statistiques (grille à
   4 colonnes de _template.html), le badge de tension remplace un .obs-metric
   mais est nettement plus bas ; sans cette contrainte, son libellé se
   retrouve décalé vers le haut par rapport aux libellés des cartes voisines. */
#obs-tension-badge {
  min-height: 2.6rem;
  display: flex;
  align-items: center;
}

.obs-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: bold;
  line-height: 1.3;
  border: 1px solid var(--bordure);
  white-space: nowrap;
}

.obs-badge .obs-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.obs-badge--detendu .obs-dot {
  background: var(--vert-clair);
}
.obs-badge--equilibre .obs-dot {
  background: var(--gris-anthracite);
}
.obs-badge--tendu .obs-dot {
  background: var(--vert-marque);
  box-shadow: 0 0 6px var(--vert-marque);
}

.obs-indisponible {
  color: var(--texte-att);
  font-style: italic;
  font-size: 0.85rem;
}

/* --- Indicateur de chargement --------------------------------------------
   Utilisé pendant l'attente d'une réponse API (chargement d'une commune,
   comparaison) : un "—" statique se lit comme "donnée absente", pas comme
   "en cours de chargement" — ce spinner lève l'ambiguïté. */
.obs-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid var(--bordure);
  border-top-color: var(--vert-clair);
  border-radius: 50%;
  animation: obs-spin 0.8s linear infinite;
  vertical-align: -0.15em;
}

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

.obs-chargement {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--texte-att);
  font-size: 0.9rem;
  padding: 20px 0;
}

.obs-btn[disabled] {
  opacity: 0.7;
  cursor: wait;
}

.obs-section-title {
  margin-top: 64px;
  font-size: 1.2rem;
  border-left: 3px solid var(--vert-marque);
  padding-left: 12px;
}

.obs-phrase-autonome {
  font-size: 0.92rem;
  color: var(--texte-att);
  line-height: 1.5;
  margin: 6px 0 0;
  text-align: justify;
  text-align-last: left;
  /* hyphens: auto coupait réellement des mots en fin de ligne avec un trait
     d'union visible (ex. "af-fichés", "dé-pend", "nom-breuses") : constaté
     par capture d'écran sur la page Méthodologie le 31/07/2026, contraire à
     la règle "aucun mot n'est coupé". */
  hyphens: none;
  text-wrap: pretty;
}

/* --- Mini bar chart (calendrier saisonnier) ----------------------------
   Les noms de mois sont en toutes lettres et à l'horizontale (jamais
   inclinés : moins lisible, testé et écarté le 31/07/2026). Chaque mois est
   un seul mot sans espace ("Septembre") : plutôt que de le couper au milieu
   ou de le laisser déborder sur ses voisins dans une colonne trop étroite,
   chaque colonne a une largeur minimale garantie (jamais compressée par
   flex) et le graphique défile horizontalement si les 12 colonnes à cette
   largeur dépassent la largeur de l'écran (mobile). L'étiquette est un
   élément de flux normal SOUS la barre (pas en position absolute) : un
   `overflow-x: auto` sur le conteneur convertit silencieusement
   `overflow-y` en `auto` aussi (comportement CSS standard dès qu'un seul
   axe n'est pas `visible`), ce qui aurait rogné une étiquette positionnée
   en dehors du flux normal. */
.obs-barchart-scroll {
  overflow-x: auto;
  margin-top: 14px;
  margin-bottom: 20px;
  padding-bottom: 4px;
}

.obs-barchart {
  display: flex;
  gap: 6px;
}

.obs-barchart .obs-bar-col {
  flex: 1 0 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.obs-barchart .obs-bar-track {
  width: 100%;
  height: 120px;
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid var(--bordure);
}

.obs-barchart .obs-bar {
  width: 100%;
  background: linear-gradient(180deg, var(--vert-clair), var(--vert-marque));
  border-radius: 3px 3px 0 0;
  min-height: 3px;
  transition: height var(--transition-douce);
}

.obs-barchart .obs-bar-label {
  margin-top: 8px;
  text-align: center;
  white-space: nowrap;
  font-size: 0.68rem;
  color: var(--texte-att);
}

/* --- Table ---------------------------------------------------------- */
table.obs-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-top: 14px;
  font-size: 1rem;
}

table.obs-table td {
  font-variant-numeric: tabular-nums;
}

table.obs-table th,
table.obs-table td {
  text-align: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bordure);
}

table.obs-table th {
  color: var(--texte-att);
  font-weight: normal;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}

table.obs-table td:first-child,
table.obs-table th:first-child {
  text-align: left;
}

/* Liste des gains DPE sous le tableau de classes : mêmes marges internes que
   le tableau, pour ne pas laisser le texte toucher le bord de la carte. */
#obs-dpe-zone ul {
  margin: 14px 0 0;
  padding-left: 20px;
  color: var(--texte-att);
  font-size: 1rem;
  line-height: 1.7;
}

#obs-dpe-zone ul strong,
#obs-dpe-zone ul b {
  color: var(--vert-clair);
  font-size: 1.1em;
}

/* --- Légende des niveaux de tension (définitions permanentes, section 2) --
   Une définition par ligne, nettement séparées (pas une grille de cartes
   compactes) pour que les trois niveaux se distinguent au premier coup d'œil. */
.obs-legende-tension {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 20px;
}

.obs-legende-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: 10px;
  padding: 16px 18px;
}

.obs-legende-item p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--texte-att);
  line-height: 1.5;
}

.obs-legende-item strong {
  color: var(--blanc);
}

.obs-legende-dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 4px;
}

.obs-legende-dot--detendu {
  background: var(--vert-clair);
}
.obs-legende-dot--equilibre {
  background: var(--gris-anthracite);
}
.obs-legende-dot--tendu {
  background: var(--vert-marque);
  box-shadow: 0 0 6px var(--vert-marque);
}

/* --- Map ---------------------------------------------------------------*/
#obs-carte {
  height: 460px;
  border-radius: 10px;
  border: 1px solid var(--bordure);
  margin-top: 20px;
  background: var(--fond-carte);
}

/* --- Buttons / CTA ------------------------------------------------------*/
.obs-btn {
  display: inline-block;
  background: var(--vert-marque);
  color: var(--blanc);
  border: none;
  border-radius: 6px;
  padding: 11px 20px;
  font-size: 0.95rem;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow var(--transition-douce), transform var(--transition-douce);
}

.obs-btn:hover {
  box-shadow: 0 0 18px var(--glow);
  transform: translateY(-1px);
}

.obs-btn--ghost {
  background: transparent;
  border: 1px solid var(--bordure);
}

.obs-form {
  margin-top: 32px;
}

.obs-form label {
  display: block;
  margin-bottom: 8px;
  color: var(--texte-att);
  font-size: 0.9rem;
}

.obs-form input[type="email"],
.obs-form select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--bordure);
  background: rgba(255, 255, 255, 0.03);
  color: var(--blanc);
  font-family: inherit;
  margin-bottom: 20px;
}

.obs-form .obs-btn {
  margin-top: 4px;
}

.obs-footer {
  text-align: center;
  padding: 40px 20px;
  color: var(--texte-att);
  font-size: 0.8rem;
  line-height: 2;
  border-top: 1px solid var(--bordure);
  margin-top: 60px;
}

.obs-mention-source {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--texte-att);
}

.obs-detail-toggle {
  background: none;
  border: 1px dashed var(--bordure);
  color: var(--vert-clair);
  border-radius: 6px;
  padding: 7px 14px;
  margin-top: 10px;
  font-size: 0.78rem;
  cursor: pointer;
}

.obs-detail-panel {
  display: none;
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--texte-att);
  line-height: 1.5;
}

.obs-detail-panel p {
  margin: 0 0 8px;
}

.obs-detail-panel p:last-child {
  margin-bottom: 0;
}

.obs-detail-panel strong {
  color: var(--blanc);
}

.obs-detail-panel.obs-open {
  display: block;
}

.obs-score-sur100 {
  font-size: 1.1rem;
  font-weight: normal;
  color: var(--texte-att);
  margin-left: 2px;
}

/* --- Détail du score composite : barres de progression, pas un tableau -- */
.obs-score-critere {
  margin-top: 14px;
}

.obs-score-critere:first-child {
  margin-top: 4px;
}

.obs-score-critere-label {
  font-size: 0.95rem;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.obs-score-critere-valeur {
  font-weight: bold;
  font-size: 1.15rem;
  color: var(--vert-clair);
}

.obs-score-barre {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.obs-score-barre-remplissage {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vert-marque), var(--vert-clair));
  transition: width 600ms ease;
}

.obs-comparer-select {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.obs-comparer-select select {
  flex: 1;
  min-width: 220px;
}

@media (max-width: 640px) {
  .obs-container {
    padding: 20px 16px;
  }
  .obs-header {
    flex-direction: column;
    gap: 10px;
  }
  /* Sans ceci, chaque lien garde son margin-left: 22px même en tête de ligne
     après un retour à la ligne, ce qui décale le menu vers la droite et casse
     l'alignement (constaté par capture d'écran mobile le 01/08/2026). */
  .obs-header nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
  }
  .obs-header nav a {
    margin-left: 0;
  }
}

/* --- Lecteur audio flottant (même composant que la page d'accueil) ----- */
.audio-player {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
}

.audio-player__btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--vert-marque);
  color: var(--blanc);
  border: 2px solid var(--noir);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--transition-douce), background-color var(--transition-douce), box-shadow var(--transition-douce);
}

.audio-player__btn:hover,
.audio-player__btn:focus-visible {
  transform: scale(1.1);
  box-shadow: 0 0 18px var(--glow);
}

.audio-player__icon {
  width: 22px;
  height: 22px;
}

.audio-player__icon--off {
  display: none;
}

.audio-player__btn[aria-pressed="true"] .audio-player__icon--on {
  display: none;
}

.audio-player__btn[aria-pressed="true"] .audio-player__icon--off {
  display: block;
}