/* Observatoire de l'IA en Occitanie.
   Direction « bulletin d'observation » : un bulletin d'institut statistique tenu
   comme une page de magazine. La structure est portee par des filets d'un pixel,
   pas par un empilement de cartes. La provenance est un objet, pas un paragraphe
   en bas de page.

   Aucune couleur en dur en dehors des trois notees ci-dessous : tout vient des
   variables du site, et le pied de page noir est pose ailleurs. */

.obs {
  /* Suite d'espacement, base 4. Une seule suite pour toute la rubrique. */
  --obs-1: 4px;   --obs-2: 8px;   --obs-3: 12px;  --obs-4: 16px;  --obs-5: 24px;
  --obs-6: 32px;  --obs-7: 48px;  --obs-8: 64px;  --obs-9: 96px;  --obs-10: 160px;

  /* Trois largeurs, et ce sont elles qui font le rythme. */
  --obs-lecture: 42rem;
  --obs-large: 74rem;
  --obs-gouttiere: clamp(1rem, 4vw, 2.5rem);

  --obs-section: clamp(4rem, 2.5rem + 5vw, 8rem);
  --obs-panneau: clamp(2rem, 1.5rem + 3vw, 4.5rem);

  /* Trois couleurs propres a la rubrique. Le reste vient du site. */
  --obs-clair: #e9f0fc;      /* panneau « ce que nous mesurons », barres, palier clair */
  --obs-profond: #0047b3;    /* dernier palier de la carte, survol du bouton */

  color: var(--text);
}

/* Largeurs. Chaque bloc declare la sienne, jamais une marge au hasard. */
.obs-lecture,
.obs-large {
  margin-inline: auto;
  padding-inline: var(--obs-gouttiere);
}
.obs-lecture { max-width: var(--obs-lecture); }
.obs-large { max-width: var(--obs-large); }

.obs > * + * { margin-top: var(--obs-section); }

/* ------------------------------- typographie ------------------------------- */

.obs h1,
.obs h2 {
  font-family: "Crimson Pro", Georgia, "Times New Roman", serif;
  font-weight: 600;
  color: var(--text);
}

.obs h1 {
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
}

.obs h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.15rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 var(--obs-4);
}

:where(.obs) h3 {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 var(--obs-3);
}

/* :where() ne compte pas dans la specificite. Sans lui, `.obs p` (0,1,1)
   l'emporte sur `.obs-chapo` (0,1,0) et toute la hierarchie typographique
   s'effondre sur une seule taille : mesure faite, chapo, corps et source
   sortaient tous a 17 px. C'est le piege a eviter sur toute cette feuille. */
:where(.obs) p { font-size: 1.0625rem; line-height: 1.65; margin: 0 0 var(--obs-4); }
:where(.obs) p:last-child { margin-bottom: 0; }
:where(.obs) a { color: var(--brand); }

.obs-etiquette {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--obs-4);
}

.obs-chapo {
  font-size: clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem);
  line-height: 1.5;
  color: var(--text-soft);
}

.obs-meta,
.obs-source {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: var(--obs-3) 0 0;
}

/* Tout chiffre est tabulaire. Les colonnes s'alignent, les valeurs se comparent. */
.obs [class*="chiffre"],
.obs td,
.obs data { font-variant-numeric: tabular-nums; }

/* ---------------------------- bloc 1 : ouverture ---------------------------- */

/* Fond clair, jamais de panneau sombre. La profondeur vient du filet, du
   chevauchement et de la trame, pas d'un aplat noir. */
.obs-ouverture {
  background: linear-gradient(180deg, var(--obs-clair) 0%, #f7faff 62%, #fff 100%);
  border-bottom: 1px solid var(--line);
  padding: var(--obs-panneau) 0 calc(var(--obs-panneau) + 64px);
}

.obs-ouverture__grille {
  max-width: var(--obs-large);
  margin-inline: auto;
  padding-inline: var(--obs-gouttiere);
  display: grid;
  gap: var(--obs-7);
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
}

.obs-ouverture .obs-chapo { margin-top: var(--obs-5); }

/* La fiche technique. C'est elle qui repond en quatre secondes a la seule
   question du journaliste : sur quoi vous basez-vous. Elle est donc dans le
   premier ecran, a cote du titre, pas en bas de page. */
.obs-fiche {
  border-left: 2px solid var(--brand);
  padding-left: var(--obs-6);
  margin: 0;
  display: grid;
  gap: var(--obs-4);
}

.obs-fiche div { display: grid; gap: var(--obs-1); }
.obs-fiche dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.obs-fiche dd { margin: 0; font-size: 0.9375rem; line-height: 1.4; color: var(--text); font-weight: 500; }

/* ------------------------- bloc 2 : les trois reperes ------------------------ */

/* Le seul chevauchement de la page. C'est lui qui signe la profondeur, et il ne
   se repete nulle part ailleurs. */
.obs-reperes {
  max-width: var(--obs-large);
  margin: -64px auto 0;
  padding-inline: var(--obs-gouttiere);
  position: relative;
  z-index: 1;
}

.obs-reperes__cadre {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px -24px rgba(10, 12, 16, 0.28);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.obs-repere {
  padding: var(--obs-6) var(--obs-5);
  border-left: 1px solid var(--line);
  text-align: center;
}
.obs-repere:first-child { border-left: 0; }

.obs-chiffre {
  display: block;
  font-size: clamp(3.25rem, 2rem + 6vw, 6rem);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--text);
}

/* L'unite n'est jamais dans le chiffre : elle vit a cote, en gris, plus petite. */
.obs-repere__libelle {
  display: block;
  margin-top: var(--obs-3);
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--text-muted);
}

.obs-reperes .obs-source { text-align: center; }

/* ---------------------------- bloc 3 : la carte ----------------------------- */

.obs-carte {
  max-width: var(--obs-large);
  margin-inline: auto;
  padding-inline: var(--obs-gouttiere);
  display: grid;
  gap: var(--obs-7);
  grid-template-columns: minmax(0, 2fr) minmax(0, 20rem);
  align-items: start;
}

.obs-carte svg { width: 100%; height: auto; display: block; }
.obs-carte__dept { transition: opacity var(--dur-fast, 150ms) var(--ease, ease); }

/* Contour au survol et au focus clavier. Aucune animation de remplissage : la
   couleur porte une donnee, elle ne bouge pas. */
.obs-carte__trait {
  fill: none;
  stroke: var(--text);
  stroke-width: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast, 150ms) var(--ease, ease);
}
.obs-carte__zone:hover .obs-carte__trait,
.obs-carte__zone:focus-visible .obs-carte__trait { opacity: 1; }
.obs-carte__zone:focus-visible { outline: none; }
.obs-carte__zone:focus-visible .obs-carte__dept { opacity: 0.85; }

.obs-carte__code {
  font-size: 22px;
  font-weight: 600;
  font-family: inherit;
  pointer-events: none;
}

.obs-legende { list-style: none; margin: var(--obs-5) 0 0; padding: 0; display: grid; gap: var(--obs-2); }
.obs-legende li { display: flex; align-items: center; gap: var(--obs-3); font-size: 0.8125rem; color: var(--text-muted); }
.obs-legende i { width: 1.75rem; height: 0.75rem; flex: none; }

/* La note de lecture. Elle annonce que la variable de la carte change en
   decembre : sans elle, la carte d'aujourd'hui passerait pour l'indice. */
.obs-note {
  border-left: 2px solid var(--brand);
  padding-left: var(--obs-4);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-soft);
}

/* --------------------------- bloc 4 : le tableau ---------------------------- */

.obs-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.obs-table caption {
  text-align: left;
  font-size: 0.8125rem;
  color: var(--text-muted);
  padding-bottom: var(--obs-4);
}

.obs-table thead th {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 2px solid var(--line-strong);
  padding: 0 var(--obs-3) var(--obs-3);
  text-align: right;
}
.obs-table thead th:first-child { text-align: left; }

.obs-table tbody th,
.obs-table tbody td {
  padding: var(--obs-3);
  border-bottom: 1px solid var(--line);
  text-align: right;
  position: relative;
}
.obs-table tbody th { text-align: left; font-weight: 500; color: var(--text-soft); }

/* La barre est en fond de ligne, pas dans une colonne : elle donne l'ampleur
   sans prendre de place, et elle se lit avant les chiffres. */
/* La barre est un degrade de fond sur la ligne, pas un pseudo-element.
   Un `::before` sur un `tr` genere une boite qui participe a la mise en page du
   tableau : mesure faite, il poussait les noms de departements de 300 px vers la
   droite. Un fond, lui, se peint sur toute la ligne sans rien deplacer. */
.obs-table tbody tr {
  background-image: linear-gradient(to right,
    var(--obs-clair) 0 calc(var(--part, 0) * 1%),
    transparent calc(var(--part, 0) * 1%));
  transition: background-image var(--dur-fast, 150ms) var(--ease, ease);
}
.obs-table tbody tr:hover,
.obs-table tbody tr:focus-within {
  background-image: linear-gradient(to right,
    color-mix(in oklab, var(--brand) 18%, white) 0 calc(var(--part, 0) * 1%),
    transparent calc(var(--part, 0) * 1%));
}
.obs-table tbody tr:hover th,
.obs-table tbody tr:focus-within th { color: var(--text); }

.obs-table tfoot th,
.obs-table tfoot td {
  padding: var(--obs-4) var(--obs-3) 0;
  border-top: 2px solid var(--line-strong);
  font-weight: 700;
  text-align: right;
}
.obs-table tfoot th { text-align: left; }

/* --------------------- bloc 5 : la portee et la limite ---------------------- */

.obs-deux {
  display: grid;
  gap: var(--obs-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.obs-panneau {
  padding: var(--obs-6);
  border-radius: var(--radius);
}
.obs-panneau--clair { background: var(--obs-clair); }
.obs-panneau--vide { border: 1px solid var(--line-strong); }

/* La phrase qui porte la credibilite. Elle est en encre pleine, seule, centree :
   elle ne se lit pas comme un avertissement mais comme une position. */
.obs-aveu {
  margin-top: var(--obs-6);
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--text);
}

/* --------------------- bloc 6 : la methode en quatre temps ------------------- */

.obs-temps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--obs-5);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  position: relative;
}

/* Le filet passe derriere les numeros et relie les quatre temps. */
.obs-temps::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  right: 1.25rem;
  height: 1px;
  background: var(--line-strong);
}

.obs-temps li { position: relative; }

.obs-temps b {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-soft);
  margin-bottom: var(--obs-4);
}

/* Le quatrieme temps est en bleu plein. Le renversement de poids dit ou est la
   promesse : savoir se taire. */
.obs-temps li:last-child b { background: var(--brand); border-color: var(--brand); color: #fff; }

.obs-temps p { font-size: 0.9375rem; line-height: 1.55; color: var(--text-soft); margin: 0; }

/* -------------------------- bloc 7 : le calendrier -------------------------- */

.obs-frise {
  list-style: none;
  margin: var(--obs-7) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--obs-5);
  position: relative;
}
.obs-frise::before {
  content: "";
  position: absolute;
  top: 0.4375rem;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line-strong);
}
.obs-frise li { position: relative; padding-top: var(--obs-5); }
.obs-frise li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--line-strong);
}
.obs-frise li[data-en-cours]::before { background: var(--brand); border-color: var(--brand); }
.obs-frise time { display: block; font-size: 0.8125rem; color: var(--text-muted); margin-bottom: var(--obs-1); }
.obs-frise strong { font-size: 1rem; font-weight: 600; }

/* ------------------------ bloc 8 : presse et donnees ------------------------ */

.obs-ours {
  border-top: 1px solid var(--line);
  padding-top: var(--obs-6);
  display: grid;
  gap: var(--obs-6);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  font-size: 0.9rem;
  color: var(--text-muted);
}
.obs-ours h3 { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.obs-ours ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--obs-2); }

/* --------------------------- bloc 9 : fermeture ----------------------------- */

.obs-fermeture {
  background: var(--obs-clair);
  border-top: 1px solid var(--line);
  padding: var(--obs-panneau) 0;
  text-align: center;
}
.obs-fermeture__grille { max-width: var(--obs-lecture); margin-inline: auto; padding-inline: var(--obs-gouttiere); }

/* Selecteur double a dessein : `.obs a` porte la couleur de lien de la rubrique
   et l'emporterait sur le bouton seul, dont le texte ressortait bleu sur bleu. */
.obs a.obs-bouton {
  display: inline-block;
  margin-top: var(--obs-4);
  padding: 0.9rem 1.75rem;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--dur-fast, 150ms) var(--ease, ease);
}
.obs a.obs-bouton:hover { background: var(--obs-profond); }
.obs a.obs-bouton:focus-visible { outline: 3px solid #7ab0ff; outline-offset: 3px; }

/* -------------------------------- methodologie ------------------------------ */

.obs-methodo { max-width: var(--obs-lecture); margin-inline: auto; padding-inline: var(--obs-gouttiere); }
.obs-methodo h2 { margin-top: var(--obs-8); }
.obs-methodo h3 { margin-top: var(--obs-6); }

.obs-methodo blockquote {
  margin: var(--obs-5) 0;
  padding: var(--obs-4) var(--obs-5);
  border-left: 2px solid var(--line-strong);
  background: var(--surface-2);
  font-size: 0.9375rem;
}
.obs-methodo blockquote p { font-size: 0.9375rem; margin-bottom: var(--obs-2); }

.obs-methodo table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--obs-5) 0;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.obs-methodo th,
.obs-methodo td { padding: var(--obs-3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
/* Un tableau large defile seul plutot que de pousser la page. */
.obs-methodo > table { display: block; overflow-x: auto; }

.obs-retour { font-size: 0.8125rem; color: var(--text-muted); margin-bottom: var(--obs-6); }

/* ---------------------------------- 390 px ---------------------------------- */

@media (max-width: 60rem) {
  .obs-ouverture__grille,
  .obs-carte { grid-template-columns: minmax(0, 1fr); }

  .obs-fiche {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    padding-left: 0;
    padding-top: var(--obs-5);
  }

  .obs-reperes__cadre { grid-template-columns: minmax(0, 1fr); }
  .obs-repere { border-left: 0; border-top: 1px solid var(--line); text-align: left; }
  .obs-repere:first-child { border-top: 0; }
  .obs-reperes { margin-top: -40px; }
  .obs-reperes .obs-source { text-align: left; }

  .obs-deux,
  .obs-ours { grid-template-columns: minmax(0, 1fr); }

  /* Les quatre temps et la frise passent en vertical, filet a gauche. */
  .obs-temps,
  .obs-frise { grid-template-columns: minmax(0, 1fr); }
  .obs-temps::before { top: 0; bottom: 0; left: 1.25rem; right: auto; width: 1px; height: auto; }
  .obs-frise::before { top: 0; bottom: 0; left: 0.4375rem; right: auto; width: 1px; height: auto; }
  .obs-frise li { padding-top: 0; padding-left: var(--obs-6); }
  .obs-frise li::before { top: 0.25rem; }
}

/* Sous 30 rem, le tableau reclamait 384 px pour 358 disponibles et poussait la
   page de 10 px. On retire la pastille du code, redondante avec le nom du
   departement, et on resserre les cellules. Aucune donnee n'est masquee : les
   trois colonnes restent lisibles. */
/* Les tableaux de la banque portent quatre colonnes et reclament plus de place
   que l'ecran n'en offre. Plutot que de masquer une colonne, donc une donnee,
   on leur donne leur propre defilement horizontal. La page, elle, ne bouge pas.
   Le tableau de population, a trois colonnes, continue de tenir sans defiler. */
@media (max-width: 48rem) {
  .obs-jeu {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Un cadre defilant doit etre atteignable au clavier pour etre utilisable. */
    scrollbar-width: thin;
  }
  .obs-jeu:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
  .obs-jeu .obs-table { min-width: 34rem; }
  .obs-jeu__tete,
  .obs-jeu__note,
  .obs-absents { position: sticky; left: 0; }
}

@media (max-width: 30rem) {
  .obs-table tbody th .obs-meta { display: none; }
  .obs-table thead th,
  .obs-table tbody th,
  .obs-table tbody td,
  .obs-table tfoot th,
  .obs-table tfoot td { padding-inline: var(--obs-1); font-size: 0.9375rem; }
  .obs-table thead th { font-size: 0.6875rem; letter-spacing: 0.06em; }
  .obs-table caption { font-size: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .obs *,
  .obs *::before { transition: none !important; animation: none !important; }
}


/* ============================ banque de donnees ============================= */

/* Chaque dimension est une question, un tableau, une source et un fichier.
   C'est ce qui separe une page qui affiche un chiffre d'une reference ou un
   journaliste vient chercher de la matiere. */

.obs-jeu { margin-top: var(--obs-8); }
.obs-jeu:first-of-type { margin-top: var(--obs-6); }

.obs-jeu__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--obs-4);
  border-bottom: 2px solid var(--line-strong);
  padding-bottom: var(--obs-3);
  margin-bottom: var(--obs-5);
}

.obs-jeu__tete h3 { font-size: 1.25rem; margin: 0; }
.obs-jeu__compte { font-size: 0.8125rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Le lien de telechargement est discret mais toujours a la meme place :
   un journaliste apprend ou il est une fois, et le retrouve partout. */
.obs-jeu a.obs-csv {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  white-space: nowrap;
}
.obs-jeu a.obs-csv:hover { text-decoration: underline; }
.obs-jeu a.obs-csv::before { content: "\2193\00a0"; }

.obs-jeu__note {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: var(--obs-4) 0 0;
  padding-left: var(--obs-4);
  border-left: 2px solid var(--line);
}

/* Familles d'outils : une pastille, pas une couleur de plus. */
.obs-famille {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  white-space: nowrap;
}

/* Une fourchette se lit en une colonne, pas en trois. */
.obs-fourchette { font-size: 0.8125rem; color: var(--text-muted); white-space: nowrap; }

/* L'absence est une donnee. Un outil du dictionnaire jamais rencontre se dit,
   il ne se tait pas : c'est ce qui rend « ChatGPT, zero occurrence » citable. */
.obs-absents {
  margin-top: var(--obs-5);
  padding: var(--obs-5);
  background: var(--surface-2);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-soft);
}
.obs-absents b { color: var(--text); }

.obs-sommaire {
  display: flex;
  flex-wrap: wrap;
  gap: var(--obs-2) var(--obs-4);
  padding: 0;
  margin: var(--obs-5) 0 0;
  list-style: none;
  font-size: 0.9375rem;
}
.obs-sommaire li::after { content: " ·"; color: var(--text-muted); }
.obs-sommaire li:last-child::after { content: ""; }


/* --------------------------------- provenance -------------------------------- */

/* Quatre faits et deux liens, sous chaque tableau. C'est la difference entre
   citer une source et permettre de la verifier. */
.obs-provenance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--obs-3) var(--obs-5);
  margin: var(--obs-4) 0 0;
  padding-top: var(--obs-4);
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
}
.obs-provenance div { display: grid; gap: 2px; }
.obs-provenance dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.obs-provenance dd { margin: 0; color: var(--text-soft); }
.obs-provenance a { color: var(--brand); }

/* La recette de verification, quatre temps comme la methode. */
.obs-recette {
  list-style: none;
  margin: var(--obs-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--obs-5);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  position: relative;
}
.obs-recette::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  right: 1.25rem;
  height: 1px;
  background: var(--line-strong);
}
.obs-recette li { position: relative; }
.obs-recette b {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-soft);
  margin-bottom: var(--obs-4);
}
.obs-recette p { font-size: 0.9375rem; line-height: 1.55; color: var(--text-soft); margin: 0; }

@media (max-width: 60rem) {
  .obs-recette { grid-template-columns: minmax(0, 1fr); }
  .obs-recette::before { top: 0; bottom: 0; left: 1.25rem; right: auto; width: 1px; height: auto; }
}


/* ------------------------------- l'essentiel --------------------------------- */

/* Le resume de tete. Un journaliste presse lit ca et rien d'autre : il doit
   pouvoir citer sans avoir lu le reste, et chaque fait porte son chiffre. */
.obs-essentiel {
  background: var(--obs-clair);
  border-radius: var(--radius-lg);
  padding: var(--obs-7) var(--obs-6);
}
.obs-essentiel h2 { margin-top: 0; }
.obs-essentiel__intro { color: var(--text-soft); max-width: 46rem; }

.obs-faits {
  list-style: none;
  margin: var(--obs-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--obs-4);
  counter-reset: fait;
}
.obs-faits li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--obs-4);
  align-items: start;
  padding-bottom: var(--obs-4);
  border-bottom: 1px solid rgba(10, 12, 16, 0.08);
}
.obs-faits li:last-child { border-bottom: 0; padding-bottom: 0; }
.obs-faits b {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--brand);
  padding-top: 0.25rem;
  font-variant-numeric: tabular-nums;
}
.obs-faits p { margin: 0; font-size: 1.0625rem; line-height: 1.6; }

/* ---------------------------- analyse d'un tableau ---------------------------- */

/* Le commentaire est genere depuis les chiffres du tableau au-dessus. Ecrit a la
   main, il serait faux au trimestre suivant sans que personne ne le voie. */
.obs-analyse {
  margin-top: var(--obs-5);
  padding: var(--obs-5);
  background: var(--surface-2);
  border-radius: var(--radius);
  border-left: 3px solid var(--brand);
}
.obs-analyse h4 {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--obs-3);
}
.obs-analyse p { font-size: 0.9375rem; line-height: 1.6; color: var(--text-soft); margin: 0 0 var(--obs-2); }
.obs-analyse p:last-child { margin-bottom: 0; }

/* Un jeu sur deux respire differemment : huit tableaux identiques a la suite
   se lisent comme un annuaire, et personne ne lit un annuaire. */
.obs-jeu:nth-of-type(even) .obs-jeu__tete { border-bottom-color: var(--brand); }