/* ══════════════════════════════════════════════════════════════════════════
   MARCHÉ OBLIGATAIRE — styles propres (obligations.js)
   La vue « Obligations » (#per-tab-obligations) et les fiches #oblig=<code>
   (#obl-fiche-hote). Le standard des fiches (en-tête, deux colonnes, tuiles,
   courbe) est HÉRITÉ de la fiche métier au chargement, comme la fiche indice :
   ici, seulement ce qui n'existe pas ailleurs.
   ⚠ Tailles en px : sur ce site 1 rem vaut 10 px.
   ⚠ `.per-page button:not(.fs-tabbtn)` impose 14 px et des coins de 24 px en
     !important : chaque bouton d'ici a sa propre règle !important.
   ══════════════════════════════════════════════════════════════════════════ */

:root { --obl-t: #8C2F39; --obl-t-fond: rgba(140,47,57,.07); --obl-etats: #1B4FD8; --obl-fin: #0E8A5F; --obl-snf: #D2790F; }

/* ── Visibilité : la vue et la fiche, chacune dans sa vue ── */
body[data-ca-vue] .per-page > #per-tab-obligations { display: none !important; }
body[data-ca-vue="obligations"] .per-page > #per-tab-obligations { display: block !important; }
body:not([data-ca-vue]) .per-page > #per-tab-obligations:not(.active) { display: none; }
body[data-ca-vue]:not([data-ca-vue="fiche"]) .per-page > #obl-fiche-hote { display: none !important; }
#obl-fiche-hote[hidden] { display: none !important; }

.per-page .obl-vue, .per-page .obl-root {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #0D0D0D;
}
.per-page .obl-vue { display: flex; flex-direction: column; gap: 26px; padding-bottom: 40px; }
.per-page .obl-vue *, .per-page .obl-root * { box-sizing: border-box; }
.per-page .obl-vue p { margin: 0; }

/* ══ LA TÊTE ═════════════════════════════════════════════════════════════ */
.per-page .obl-tete {
  position: relative; overflow: hidden;
  background: #FFFFFF; border: 1px solid rgba(13,13,13,.08); border-radius: 22px;
  padding: 34px 48px 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.per-page .obl-tete::after {
  content: ""; position: absolute; right: 26px; top: 16px; bottom: 96px; width: min(430px, 38%);
  background: var(--obl-grav, none) center / contain no-repeat;
  pointer-events: none;
}
.per-page .obl-tete-g { position: relative; z-index: 2; max-width: min(700px, 58%); padding-bottom: 26px; }
.per-page .obl-sur { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.per-page .obl-frais {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
  background: rgba(14,138,95,.09); color: #067A3C; font-size: 12.5px; font-weight: 600;
}
.per-page .obl-frais i { width: 7px; height: 7px; border-radius: 50%; background: #00AB49; display: inline-block; }
.per-page .obl-frais.vieux { background: rgba(138,97,0,.10); color: #8A6100; }
.per-page .obl-frais.vieux i { background: #E0A800; }
.per-page .obl-sur-t { font-size: 12.5px; color: #7A7A7A; }
.per-page .obl-vue h1.obl-titre {
  font-size: 44px !important; line-height: 1.05 !important; font-weight: 750 !important; letter-spacing: -.035em !important;
  margin: 0 0 14px !important; color: #0D0D0D !important; font-family: inherit !important; border: 0 !important; padding: 0 !important;
}
.per-page .obl-vue h1.obl-titre em { font-style: normal; color: var(--obl-t); }
.per-page .obl-lead { font-size: 15.5px !important; line-height: 1.6 !important; color: #3D3D3D !important; max-width: 640px; }
.per-page .obl-lead b { color: #0D0D0D; font-weight: 650; }
.per-page .obl-questions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.per-page .obl-vue button.obl-q {
  display: inline-flex !important; align-items: center; gap: 8px; cursor: pointer;
  font: inherit !important; font-size: 13px !important; font-weight: 550 !important; line-height: 1.2 !important;
  padding: 8px 13px !important; border-radius: 10px !important; min-height: 0 !important; height: auto !important;
  background: #FAFAFB !important; border: 1px solid rgba(13,13,13,.10) !important; color: #2B2B2B !important;
  transition: border-color .15s, background .15s, color .15s;
}
.per-page .obl-vue button.obl-q i { color: var(--obl-t); font-size: 12px; }
.per-page .obl-vue button.obl-q:hover { border-color: rgba(140,47,57,.35) !important; background: var(--obl-t-fond) !important; color: #0D0D0D !important; }

/* La bande des chiffres (même facture que l'accueil de l'onglet). */
.per-page .obl-chiffres {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0 -48px; padding: 16px 48px 18px;
  background: #FAFAFB; border-top: 1px solid rgba(13,13,13,.07);
}
.per-page .obl-chiffre {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  padding: 2px 16px; border-left: 1px solid rgba(13,13,13,.08);
}
.per-page .obl-chiffre:first-child { border-left: 0; padding-left: 0; }
.per-page .obl-chiffre b {
  font-size: 23px; font-weight: 650; letter-spacing: -.025em; line-height: 1.1; color: #0D0D0D;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.per-page .obl-chiffre b small { font-size: 13px; font-weight: 550; color: #7A7A7A; letter-spacing: 0; margin-left: 3px; }
.per-page .obl-chiffre span { font-size: 12px; line-height: 1.3; color: #7A7A7A; }
.per-page .obl-chiffre em { font-style: normal; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.per-page .obl-chiffre[data-oblig] { cursor: pointer; }
.per-page .obl-chiffre[data-oblig]:hover b { color: var(--obl-t); }

  position: sticky; top: 10px; z-index: 30; align-self: flex-start;
  display: flex; gap: 4px; padding: 5px; border-radius: 12px;
  background: rgba(255,255,255,.92); border: 1px solid rgba(13,13,13,.08);
  -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
}
  font: inherit !important; font-size: 13px !important; font-weight: 550 !important; line-height: 1 !important;
  padding: 8px 13px !important; border-radius: 8px !important; min-height: 0 !important; height: auto !important;
  border: 0 !important; background: transparent !important; color: #4D4D4D !important; cursor: pointer; white-space: nowrap;
}

/* ══ LES SECTIONS ════════════════════════════════════════════════════════ */
.per-page .obl-sec { scroll-margin-top: 70px; display: flex; flex-direction: column; gap: 16px; }
.per-page .obl-sec-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.per-page .obl-sec-num {
  display: block; font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  color: var(--obl-t); margin-bottom: 6px;
}
.per-page .obl-vue h2.obl-sec-t {
  font-size: 25px !important; font-weight: 720 !important; letter-spacing: -.02em !important; line-height: 1.15 !important;
  margin: 0 !important; color: #0D0D0D !important; font-family: inherit !important; border: 0 !important; padding: 0 !important;
}
.per-page .obl-sec-p { font-size: 14px !important; line-height: 1.6 !important; color: #5A5A5A !important; max-width: 760px; margin-top: 8px !important; }
.per-page .obl-sec-p b { color: #0D0D0D; font-weight: 650; }
.per-page .obl-sec-src { font-size: 12px; color: #8A8A8A; text-align: right; max-width: 380px; }
.per-page .obl-sec-src a { color: #6B6B6B; text-decoration: underline; text-underline-offset: 2px; }

/* Les grilles */
.per-page .obl-g2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.per-page .obl-g32 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.per-page .obl-g23 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 16px; align-items: stretch; }
@media (max-width: 1180px) {
  .per-page .obl-g2, .per-page .obl-g32, .per-page .obl-g23 { grid-template-columns: minmax(0, 1fr); }
}

/* La carte (même facture que les cartes des fiches) */
.per-page .obl-carte {
  background: #FFFFFF; border: 1px solid rgba(13,13,13,.09); border-radius: 14px;
  padding: 18px 20px 16px; min-width: 0; display: flex; flex-direction: column;
}
.per-page .obl-carte-t {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px; font-size: 15px; font-weight: 650; color: #0D0D0D; letter-spacing: -.005em;
}
.per-page .obl-carte-t > span.obl-st { font-size: 12px; font-weight: 450; color: #8A8A8A; }
.per-page .obl-carte-note { font-size: 12px; line-height: 1.55; color: #7A7A7A; margin-top: 10px !important; }
.per-page .obl-carte-note b { color: #3D3D3D; font-weight: 600; }
.per-page .obl-canvas { position: relative; width: 100%; min-height: 0; }
.per-page .obl-flex { flex: 1 1 auto; }
.per-page .obl-canvas.obl-flex > canvas { position: absolute; inset: 0; }

/* Boutons de réglage (horizons, modes) */
.per-page .obl-grp { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.per-page .obl-vue button.obl-b, .per-page .obl-root button.obl-b {
  font: inherit !important; font-size: 11.5px !important; font-weight: 500 !important; line-height: 1 !important;
  padding: 5px 9px !important; border-radius: 999px !important; cursor: pointer; min-height: 0 !important; height: auto !important;
  border: 1px solid rgba(13,13,13,.14) !important; background: #FFFFFF !important; color: #4D4D4D !important;
}
.per-page .obl-vue button.obl-b:hover, .per-page .obl-root button.obl-b:hover { border-color: rgba(27,79,216,.45) !important; color: #1B4FD8 !important; }
.per-page .obl-vue button.obl-b.on, .per-page .obl-root button.obl-b.on { background: #1B4FD8 !important; border-color: #1B4FD8 !important; color: #FFFFFF !important; }

/* Légende */
.per-page .obl-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: #4D4D4D; }
.per-page .obl-leg span { display: inline-flex; align-items: center; gap: 7px; }
.per-page .obl-leg i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.per-page .obl-leg i.ligne { height: 3px; width: 16px; border-radius: 2px; }
.per-page .obl-leg i.ligne.pointille { height: 0; background: none !important; border-top: 2px dashed currentColor; border-radius: 0; }
.per-page .obl-leg i.rond { width: 9px; height: 9px; border-radius: 50%; background: #FFFFFF; border: 2.2px solid; }

/* ── Qui emprunte : les trois emprunteurs ── */
.per-page .obl-trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.per-page .obl-emp { border-radius: 11px; padding: 12px 14px 12px; background: #FAFAFB; border: 1px solid rgba(13,13,13,.06); position: relative; overflow: hidden; }
.per-page .obl-emp::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); }
.per-page .obl-emp-l { font-size: 12px; color: #6B6B6B; }
.per-page .obl-emp-v { font-size: 22px; font-weight: 650; letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.per-page .obl-emp-v { white-space: nowrap; }
.per-page .obl-emp-p { font-size: 12px; color: #6B6B6B; margin-top: 1px; }
.per-page .obl-emp-p b { font-weight: 700; font-size: 13px; }
.per-page .obl-emp-s { font-size: 11.5px; color: #7A7A7A; margin-top: 4px; line-height: 1.4; }
.per-page .obl-emp-s b { font-weight: 650; }

/* La réponse à la question (un verdict, puis le mécanisme) */
.per-page .obl-verdict {
  border-radius: 12px; padding: 14px 16px; background: var(--obl-t-fond); border: 1px solid rgba(140,47,57,.14);
  font-size: 13.5px; line-height: 1.6; color: #2B2B2B;
}
.per-page .obl-verdict strong { display: block; font-size: 15px; color: #0D0D0D; margin-bottom: 4px; letter-spacing: -.005em; }
.per-page .obl-mult { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.per-page .obl-mult > div { background: #FFFFFF; border-radius: 9px; padding: 9px 11px; border: 1px solid rgba(13,13,13,.06); }
.per-page .obl-mult b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.per-page .obl-mult span { font-size: 11.5px; color: #6B6B6B; }

/* Barres horizontales empilées (pays) */
.per-page .obl-barres { display: flex; flex-direction: column; gap: 6px; }
.per-page .obl-barre {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) 84px 58px; gap: 10px; align-items: center;
  font-size: 12.5px; padding: 2px 0;
}
.per-page .obl-barre-n { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #2B2B2B; }
.per-page .obl-barre-n .ca-drapeau svg { width: 20px; height: auto; display: block; border-radius: 2px; }
.per-page .obl-barre-p { display: flex; height: 14px; border-radius: 4px; overflow: hidden; background: rgba(13,13,13,.04); }
.per-page .obl-barre-p i { display: block; height: 100%; }
.per-page .obl-barre-v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.per-page .obl-barre-s { text-align: right; font-size: 11.5px; color: #8A8A8A; font-variant-numeric: tabular-nums; white-space: nowrap; }
.per-page .obl-barre-tete { font-size: 11px; color: #8A8A8A; text-transform: uppercase; letter-spacing: .05em; padding-bottom: 4px; border-bottom: 1px solid rgba(13,13,13,.07); }

/* ══ LE TABLEAU DES TAUX ═════════════════════════════════════════════════ */
.per-page .obl-tab-wrap { overflow-x: auto; margin: 0 -4px; }
.per-page table.obl-t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.per-page table.obl-t th, .per-page table.obl-t td {
  height: auto !important; padding: 9px 10px !important; border-bottom: 1px solid rgba(13,13,13,.06) !important;
  text-align: right; white-space: nowrap; background: transparent;
}
.per-page table.obl-t thead th {
  position: static !important; height: auto !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase;
  letter-spacing: .05em; color: #7A7A7A !important; background: #FFFFFF !important; border-bottom: 1px solid rgba(13,13,13,.12) !important;
  cursor: pointer; user-select: none;
}
.per-page table.obl-t thead th:hover { color: #0D0D0D !important; }
.per-page table.obl-t thead th.tri::after { content: " ↓"; color: var(--obl-t); }
.per-page table.obl-t thead th.tri.asc::after { content: " ↑"; }
.per-page table.obl-t th:first-child, .per-page table.obl-t td:first-child { text-align: left; }
.per-page table.obl-t tbody tr { cursor: pointer; transition: background .12s; }
.per-page table.obl-t tbody tr:hover td { background: rgba(27,79,216,.035); }
.per-page table.obl-t td.obl-pays { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.per-page table.obl-t td.obl-pays .ca-drapeau svg { width: 22px; height: auto; display: block; border-radius: 2px; }
.per-page table.obl-t td.obl-pays b { font-weight: 620; color: #0D0D0D; }
.per-page table.obl-t td.obl-pays small { color: #8A8A8A; font-size: 11.5px; margin-left: 2px; }
.per-page table.obl-t td .obl-taux { display: inline-block; min-width: 58px; padding: 3px 7px; border-radius: 6px; font-weight: 600; }
.per-page table.obl-t td .obl-var { font-size: 11.5px; font-weight: 550; }
.per-page table.obl-t td.obl-10a { font-weight: 700; }
.per-page .obl-note-tab { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; padding: 2px 7px; border-radius: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; }
.per-page .obl-spark { display: block; }

/* Pastilles de variation (pb) — un taux qui MONTE fait baisser le prix. */
.per-page .obl-up { color: #C4261F; }
.per-page .obl-down { color: #067A3C; }
.per-page .obl-flat { color: #6B6B6B; }

/* ══ LES FICHES (grille d'entrée) ════════════════════════════════════════ */
.per-page .obl-fiches { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.per-page .obl-vue button.obl-fc {
  display: flex !important; flex-direction: column; gap: 10px; text-align: left; cursor: pointer;
  font: inherit !important; font-size: 13px !important; line-height: 1.3 !important; color: inherit !important;
  padding: 14px 15px 13px !important; border-radius: 13px !important; min-height: 0 !important; height: auto !important;
  background: #FFFFFF !important; border: 1px solid rgba(13,13,13,.09) !important;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.per-page .obl-vue button.obl-fc:hover { border-color: rgba(13,13,13,.18) !important; box-shadow: 0 6px 18px rgba(0,0,0,.06); transform: translateY(-1px); }
.per-page .obl-fc-h { display: flex; align-items: center; gap: 10px; }
.per-page .obl-fc-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: #F5F5F5; border: 1px solid rgba(13,13,13,.06); flex: 0 0 auto; overflow: hidden; }
.per-page .obl-fc-ic .ca-drapeau svg { width: 24px; height: auto; display: block; }
.per-page .obl-fc-ic i { font-size: 14px; }
.per-page .obl-fc-n { font-size: 14px; font-weight: 650; color: #0D0D0D; }
.per-page .obl-fc-s { font-size: 11.5px; color: #8A8A8A; }
.per-page .obl-fc-v { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.per-page .obl-fc-v b { font-size: 21px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.per-page .obl-fc-v span { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.per-page .obl-fc-mat { display: flex; gap: 4px; flex-wrap: wrap; }
.per-page .obl-fc-mat em {
  font-style: normal; font-size: 11px; font-weight: 550; padding: 3px 7px; border-radius: 6px;
  background: rgba(13,13,13,.045); color: #4D4D4D; font-variant-numeric: tabular-nums;
}
.per-page .obl-fc-mat em:hover { background: rgba(27,79,216,.10); color: #1B4FD8; }
.per-page .obl-fiches-t { font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: #6B6B6B; margin: 6px 0 -4px; }

/* Sources, en bas */
.per-page .obl-sources { font-size: 12px; line-height: 1.7; color: #7A7A7A; border-top: 1px solid rgba(13,13,13,.08); padding-top: 14px; }
.per-page .obl-sources b { color: #4D4D4D; font-weight: 600; }
.per-page .obl-sources a { color: #6B6B6B; }

/* ══ LA FICHE ════════════════════════════════════════════════════════════ */
#obl-fiche-hote .fs-pane > .nrf-deux,
#obl-fiche-hote .fs-pane > .obl-g2,
#obl-fiche-hote .fs-pane > .obl-g32,
#obl-fiche-hote .fs-pane > .obl-g23,
#obl-fiche-hote .fs-pane > .mtf-sous-deux {
  background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important;
}
#obl-fiche-hote .fs-pane > * + * { margin-top: 18px; }
#obl-fiche-hote .obl-g2 > .fs-card, #obl-fiche-hote .obl-g32 > .fs-card, #obl-fiche-hote .obl-g23 > .fs-card { margin: 0 !important; display: flex; flex-direction: column; min-width: 0; }
.per-page .obl-retour { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; font-size: 13px; }
.per-page .obl-root button.obl-lien, .per-page .obl-vue button.obl-lien {
  background: none !important; border: 0 !important; padding: 0 !important; cursor: pointer; font: inherit !important; font-size: 13px !important;
  color: var(--per-accent-blue, #1B4FD8) !important; text-align: left; border-radius: 0 !important; min-height: 0 !important; height: auto !important;
}
.per-page .obl-lien:hover { text-decoration: underline; text-underline-offset: 2px; }
#obl-fiche-hote .obl-ic { background: #F5F5F5; border: 1px solid rgba(13,13,13,.08); overflow: hidden; }
/* Le cadre du drapeau prend la taille du drapeau (01/10/2026) : la règle générale
   .ca-drapeau le fixe à 21×14 px, le SVG de 30 px en débordait à droite et en bas —
   drapeau décalé de 4,5 px / 3 px dans sa case. */
#obl-fiche-hote .obl-ic .ca-drapeau { margin: 0; line-height: 1; width: auto; height: auto; }
#obl-fiche-hote .obl-ic .ca-drapeau svg { width: 30px; height: auto; display: block; }
#obl-fiche-hote .obl-ic i { font-size: 18px; }

/* Les maturités, sous le nom */
#obl-fiche-hote .obl-mats { display: inline-flex; gap: 4px; margin-left: 12px; vertical-align: middle; }
.per-page .obl-root button.obl-mat {
  font: inherit !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important;
  padding: 5px 9px !important; border-radius: 7px !important; min-height: 0 !important; height: auto !important; cursor: pointer;
  border: 1px solid rgba(13,13,13,.12) !important; background: #FFFFFF !important; color: #4D4D4D !important;
}
.per-page .obl-root button.obl-mat:hover { border-color: rgba(27,79,216,.45) !important; color: #1B4FD8 !important; }
.per-page .obl-root button.obl-mat.on { background: #0D0D0D !important; border-color: #0D0D0D !important; color: #FFFFFF !important; }

/* La pastille de notation (à la place de la note /20) */
#obl-fiche-hote .obl-notation {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 104px; padding: 10px 14px; border-radius: 12px; border: 1px solid; margin-left: 18px; cursor: help;
}
#obl-fiche-hote .obl-notation b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
#obl-fiche-hote .obl-notation span { font-size: 11.5px; font-weight: 600; }
#obl-fiche-hote .obl-notation small { font-size: 10.5px; color: #8A8A8A; font-weight: 500; }

/* « Ce qu'il faut savoir » : phrases à mécanisme */
#obl-fiche-hote .obl-savoir { display: flex; flex-direction: column; gap: 0; }
#obl-fiche-hote .obl-sv { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(13,13,13,.06); }
#obl-fiche-hote .obl-sv:last-child { border-bottom: 0; }
#obl-fiche-hote .obl-sv > i { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; font-style: normal; }
#obl-fiche-hote .obl-sv p { margin: 0; font-size: 13px; line-height: 1.55; color: #3D3D3D; }
#obl-fiche-hote .obl-sv p b { color: #0D0D0D; font-weight: 650; }

/* Jauge de position historique (centile) */
.per-page .obl-jauge { position: relative; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #E8F0FE, #F4E5E7); margin: 22px 0 8px; }
.per-page .obl-jauge i { position: absolute; top: -5px; width: 3px; height: 18px; border-radius: 2px; background: #0D0D0D; transform: translateX(-1px); }
.per-page .obl-jauge em { position: absolute; top: -22px; font-style: normal; font-size: 11.5px; font-weight: 650; transform: translateX(-50%); white-space: nowrap; }
.per-page .obl-jauge-l { display: flex; justify-content: space-between; font-size: 11px; color: #8A8A8A; font-variant-numeric: tabular-nums; }

/* Tableau de sensibilité */
.per-page table.obl-sens { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.per-page table.obl-sens th, .per-page table.obl-sens td { height: auto !important; padding: 7px 8px !important; text-align: right; border-bottom: 1px solid rgba(13,13,13,.06) !important; }
.per-page table.obl-sens thead th { position: static !important; font-size: 11px !important; color: #7A7A7A !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .04em; background: transparent !important; }
.per-page table.obl-sens th:first-child, .per-page table.obl-sens td:first-child { text-align: left; }
.per-page table.obl-sens tr.obl-ici td { background: rgba(27,79,216,.05); font-weight: 650; }

/* Responsive */
@media (max-width: 1240px) {
  .per-page .obl-chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .per-page .obl-chiffre:nth-child(4) { border-left: 0; padding-left: 0; }
  .per-page .obl-tete::after { width: 30%; opacity: .5; }
  .per-page .obl-tete-g { max-width: 70%; }
}
@media (max-width: 780px) {
  .per-page .obl-tete { padding: 24px 20px 0; }
  .per-page .obl-chiffres { margin: 0 -20px; padding: 14px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .per-page .obl-chiffre:nth-child(odd) { border-left: 0; padding-left: 0; }
  .per-page .obl-tete::after { display: none; }
  .per-page .obl-tete-g { max-width: none; }
  .per-page .obl-vue h1.obl-titre { font-size: 32px !important; }
  .per-page .obl-trois, .per-page .obl-mult { grid-template-columns: minmax(0, 1fr); }
  .per-page .obl-barre { grid-template-columns: 110px minmax(0, 1fr) 70px; }
  .per-page .obl-barre-s { display: none; }
}

/* ══ Banque centrale et marché ══════════════════════════════════════════ */
.per-page .obl-bcs { display: flex; flex-direction: column; gap: 10px; }
.per-page .obl-bc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 118px; grid-template-rows: auto auto; column-gap: 12px; row-gap: 3px; align-items: center;
  padding-bottom: 10px; border-bottom: 1px solid rgba(13,13,13,.06); }
.per-page .obl-bc:last-child { border-bottom: 0; }
.per-page .obl-bc-n { grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.per-page .obl-bc-n b { font-size: 13px; font-weight: 620; color: #0D0D0D; }
.per-page .obl-bc-n small { font-size: 11px; color: #8A8A8A; line-height: 1.35; }
.per-page .obl-bc-b { position: relative; height: 13px; display: flex; align-items: center; gap: 6px; }
.per-page .obl-bc-b i { display: block; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.per-page .obl-bc-b i.bc { background: #0D0D0D; }
.per-page .obl-bc-b i.m2 { background: #8FB0F5; }
.per-page .obl-bc-b em { font-style: normal; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: #3D3D3D; white-space: nowrap; }
.per-page .obl-bc-e { grid-row: 1 / span 2; grid-column: 3; text-align: right; font-size: 11px; line-height: 1.3; display: flex; flex-direction: column; align-items: flex-end; }
.per-page .obl-bc-e b { font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* ══ Les segments de crédit ═════════════════════════════════════════════ */
.per-page .obl-segs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1300px) { .per-page .obl-segs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px) { .per-page .obl-segs { grid-template-columns: minmax(0, 1fr); } }
.per-page .obl-vue button.obl-seg {
  display: flex !important; flex-direction: column; align-items: stretch; gap: 8px; text-align: left; cursor: pointer;
  font: inherit !important; font-size: 13px !important; line-height: 1.3 !important; color: inherit !important;
  padding: 14px 15px 12px !important; border-radius: 13px !important; min-height: 0 !important; height: auto !important;
  background: #FFFFFF !important; border: 1px solid rgba(13,13,13,.09) !important; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.per-page .obl-vue button.obl-seg:hover { border-color: rgba(13,13,13,.18) !important; box-shadow: 0 6px 18px rgba(0,0,0,.06); transform: translateY(-1px); }
.per-page .obl-seg-h { display: flex; flex-direction: column; gap: 1px; }
.per-page .obl-seg-z { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: #8A8A8A; }
.per-page .obl-seg-n { font-size: 14px; font-weight: 650; color: #0D0D0D; }
.per-page .obl-seg-v { display: flex; align-items: baseline; gap: 6px; }
.per-page .obl-seg-v b { font-size: 24px; font-weight: 680; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.per-page .obl-seg-v small { font-size: 11.5px; color: #8A8A8A; }
.per-page .obl-seg-e { font-size: 12px; color: #5A5A5A; }
.per-page .obl-seg-e b { color: #8C2F39; font-weight: 650; }
.per-page .obl-seg-j { position: relative; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #F4D6DA, #F2F2F2 50%, #D8F0E2); margin-top: 4px; }
.per-page .obl-seg-j i { position: absolute; top: -3px; width: 3px; height: 12px; border-radius: 2px; background: #0D0D0D; transform: translateX(-1px); }
.per-page .obl-seg-jl { display: flex; justify-content: space-between; gap: 6px; font-size: 10.5px; color: #9A9A9A; }
.per-page .obl-seuil { font-size: 10.5px; color: #8A8A8A; text-transform: uppercase; letter-spacing: .05em; border-top: 1px dashed rgba(13,13,13,.25); padding-top: 4px; margin: 2px 0 2px; }

/* ══ Les défauts ════════════════════════════════════════════════════════ */
.per-page .obl-defs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .per-page .obl-defs { grid-template-columns: minmax(0, 1fr); } }
.per-page .obl-def { background: #FAFAFB; border: 1px solid rgba(13,13,13,.06); border-radius: 11px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.per-page .obl-def b { font-size: 26px; font-weight: 680; letter-spacing: -.02em; color: #8C2F39; font-variant-numeric: tabular-nums; }
.per-page .obl-def span { font-size: 13px; font-weight: 620; color: #0D0D0D; }
.per-page .obl-def small { font-size: 11.5px; color: #7A7A7A; line-height: 1.45; }
.per-page .obl-def a { color: #6B6B6B; }

/* ══ Fiche : compléments ════════════════════════════════════════════════ */
#obl-fiche-hote .fs-pane > .obl-g2 + *, #obl-fiche-hote .fs-pane > .fs-card + * { margin-top: 18px; }
#obl-fiche-hote .obl-h4 { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: #6B6B6B; margin: 16px 0 8px; }
#obl-fiche-hote .obl-sources-f { margin-top: 18px; }
/* Face aux autres États */
.per-page .obl-faces { display: flex; flex-direction: column; gap: 12px; }
.per-page .obl-face { display: grid; grid-template-columns: 140px minmax(0, 1fr) 70px 44px; gap: 12px; align-items: center; font-size: 12.5px; }
.per-page .obl-face-l { color: #2B2B2B; }
.per-page .obl-face-p { position: relative; height: 16px; border-radius: 8px; background: linear-gradient(90deg, #F5F5F5, #ECECEC); }
.per-page .obl-face-p i { position: absolute; top: 5px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #B8B8B8; }
.per-page .obl-face-p b { position: absolute; top: 1px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #8C2F39; border: 2px solid #FFFFFF; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.per-page .obl-face-v { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.per-page .obl-face-r { text-align: right; font-size: 11px; color: #8A8A8A; font-variant-numeric: tabular-nums; }
/* r − g */
.per-page .obl-rg { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.per-page .obl-rg > div { flex: 1 1 140px; background: #FAFAFB; border: 1px solid rgba(13,13,13,.06); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.per-page .obl-rg > div.obl-rg-op { flex: 0 0 auto; background: none; border: 0; justify-content: center; font-size: 22px; color: #9A9A9A; padding: 0; }
.per-page .obl-rg b { font-size: 22px; font-weight: 680; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.per-page .obl-rg span { font-size: 11.5px; color: #6B6B6B; line-height: 1.35; }
/* D'où vient le rendement */
.per-page .obl-decomp { display: flex; height: 34px; border-radius: 8px; overflow: hidden; }
.per-page .obl-decomp i { display: flex; align-items: center; justify-content: center; min-width: 64px; color: #FFFFFF; font-style: normal; font-size: 12px; font-weight: 650; white-space: nowrap; }
.per-page .obl-root .obl-barre[data-oblig] { cursor: pointer; }
.per-page .obl-root .obl-barre[data-oblig]:hover .obl-barre-n { color: #1B4FD8; }
.per-page .obl-root table.obl-sens tr[data-oblig]:hover td { background: rgba(27,79,216,.04); }
@media (max-width: 720px) { .per-page .obl-face { grid-template-columns: 100px minmax(0, 1fr) 60px; } .per-page .obl-face-r { display: none; } }

#obl-fiche-hote .mtf-tuiles.obl-tuiles-auto { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; }

#obl-fiche-hote .obl-vide { display: flex; gap: 12px; align-items: flex-start; padding: 22px 18px; border-radius: 10px; background: #FAFAFB; border: 1px dashed rgba(13,13,13,.15); }
#obl-fiche-hote .obl-vide i { color: #8C2F39; font-size: 18px; margin-top: 2px; }
#obl-fiche-hote .obl-vide p { margin: 0; font-size: 13px; line-height: 1.6; color: #4D4D4D; }

/* ══ ACCUEIL DE L'ONGLET : une carte seule sur sa ligne s'étale ══════════
   Sept entrées sur trois colonnes laissaient le Comparateur seul, avec deux
   tiers de vide à sa droite. Une carte seule sur sa ligne prend toute la
   largeur et passe à l'horizontale : vignette à gauche, texte à droite. */
@media (min-width: 1241px) {
  .per-page #ca-sommaire .ca-som-grille > .ca-som-carte:last-child:nth-child(3n+1) { grid-column: 1 / -1; flex-direction: row; align-items: stretch; gap: 22px; }
}
@media (min-width: 781px) and (max-width: 1240px) {
  .per-page #ca-sommaire .ca-som-grille > .ca-som-carte:last-child:nth-child(2n+1) { grid-column: 1 / -1; flex-direction: row; align-items: stretch; gap: 22px; }
}
@media (min-width: 781px) {
  .per-page #ca-sommaire .ca-som-grille > .ca-som-carte:last-child:nth-child(odd) > .ca-som-illu { flex: 0 0 38%; width: 38% !important; aspect-ratio: auto; min-height: 168px; margin: -20px 0 -18px -20px; }
  .per-page #ca-sommaire .ca-som-grille > .ca-som-carte:last-child:nth-child(odd) > .ca-som-corps { align-self: center; padding: 6px 8px 6px 0; }
}
@media (min-width: 781px) {
  .per-page #ca-sommaire .ca-som-grille > .ca-som-carte:last-child:nth-child(odd) > .ca-som-illu .ca-som-grav { background-size: contain !important; background-position: center !important; inset: 10px 0 !important; }
}

/* ══ L'EFFET BOULE DE NEIGE ═════════════════════════════════════════════ */
#obl-fiche-hote .obl-f-int { --c: #C4261F; } #obl-fiche-hote .obl-f-cro { --c: #2E9E6B; }
#obl-fiche-hote .obl-f-def { --c: #D2790F; } #obl-fiche-hote .obl-f-exc { --c: #7FC9A0; }

/* ══ Le simulateur ══ */

/* ══ Détenteurs dans le temps ══ */
#obl-fiche-hote .obl-dch { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; margin-bottom: 12px; }
#obl-fiche-hote .obl-dch-i { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 1px; align-items: center;
  background: #FAFAFB; border: 1px solid rgba(13,13,13,.06); border-radius: 10px; padding: 8px 10px; }
#obl-fiche-hote .obl-dch-i i { width: 10px; height: 10px; border-radius: 3px; grid-row: 1 / span 2; }
#obl-fiche-hote .obl-dch-i span { font-size: 12px; color: #3D3D3D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#obl-fiche-hote .obl-dch-i b { font-size: 12px; font-weight: 600; color: #6B6B6B; grid-column: 2; font-variant-numeric: tabular-nums; }
#obl-fiche-hote .obl-dch-i em { grid-column: 3; grid-row: 1 / span 2; font-style: normal; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
#obl-fiche-hote .obl-hausse { color: #1B4FD8; } #obl-fiche-hote .obl-baisse { color: #D2790F; }
/* Dette et croissance */
#obl-fiche-hote .obl-dch.obl-dch-sect { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
#obl-fiche-hote .obl-dc-hz { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 2px 2px 12px; font-size: 12.5px; color: #3D3D3D; }
#obl-fiche-hote .obl-dc-hz > span:first-child { font-weight: 600; color: #0D0D0D; }
#obl-fiche-hote .obl-dc-hz em { font-style: normal; color: #8A8A8A; font-size: 11.5px; }
#obl-fiche-hote .obl-dh-tete { display: flex; justify-content: flex-end; margin-bottom: 6px; }
/* une liste de barres qui occupe la hauteur de sa carte (paire de même hauteur) */
#obl-fiche-hote .obl-g2 > .fs-card > .obl-barres.obl-etire { flex: 1 1 auto; justify-content: space-around; }


/* ══ L'ACCUEIL EN CARTES (01/10/2026) ════════════════════════════════════
   Six cartes cliquables, chacune avec son mini-graphique en couleur ; une
   rubrique à la fois, avec un fil d'Ariane et les autres rubriques en bas. */
.per-page .obl-rubs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1180px) { .per-page .obl-rubs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.per-page .obl-vue button.obl-rub {
  display: flex !important; flex-direction: column !important; align-items: stretch !important; text-align: left !important;
  padding: 0 !important; margin: 0 !important; min-height: 0 !important; height: auto !important; overflow: hidden; cursor: pointer;
  font: inherit !important; color: #0D0D0D !important; border-radius: 18px !important;
  background: #FFFFFF !important; border: 1px solid rgba(13,13,13,.08) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.per-page .obl-vue button.obl-rub:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--c) 45%, transparent); border-color: color-mix(in srgb, var(--c) 40%, transparent) !important; }
.per-page .obl-vue button.obl-rub:focus-visible { outline: 3px solid color-mix(in srgb, var(--c) 45%, transparent); outline-offset: 2px; }
.per-page .obl-rub-vis {
  display: block; height: 168px; padding: 12px 14px 6px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 10%, #FFFFFF), color-mix(in srgb, var(--c) 3%, #FFFFFF));
  border-bottom: 1px solid color-mix(in srgb, var(--c) 14%, transparent);
}
.per-page .obl-rub-vis svg { display: block; width: 100%; height: 100%; }
.per-page .obl-rub-c { display: flex; flex-direction: column; gap: 7px; padding: 15px 18px 18px; }
.per-page .obl-rub-t { display: flex; align-items: center; gap: 9px; font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.per-page .obl-rub-t > i:first-child { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 13px;
  color: var(--c); background: color-mix(in srgb, var(--c) 12%, #FFFFFF); flex: 0 0 auto; }
.per-page .obl-rub-fl { margin-left: auto; font-size: 13px; color: var(--c); transition: transform .18s ease; }
.per-page .obl-vue button.obl-rub:hover .obl-rub-fl { transform: translateX(4px); }
.per-page .obl-rub-a { font-size: 13.5px; line-height: 1.5; color: #4D4D4D; }
.per-page .obl-rub-a b { color: #0D0D0D; font-weight: 650; }
/* les tuiles des tendances */
.per-page .obl-tv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; height: 100%; }
.per-page .obl-tv-i { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 8px 10px 8px 12px; border-radius: 11px;
  background: #FFFFFF; border: 1px solid color-mix(in srgb, var(--t) 22%, transparent); }
.per-page .obl-tv-i > i { position: absolute; right: 10px; top: 9px; font-size: 11px; color: var(--t); opacity: .75; }
.per-page .obl-tv-l { font-size: 10.5px; color: #6B6B6B; padding-right: 14px; line-height: 1.25; }
.per-page .obl-tv-i b { font-size: 15px; font-weight: 750; color: var(--t); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.per-page .obl-tv-i em { position: absolute; right: 10px; bottom: 6px; font-style: normal; font-size: 18px; font-weight: 800; color: var(--t); }
/* la grille des drapeaux des fiches */
.per-page .obl-fv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; height: 100%; align-content: center; }
.per-page .obl-fv-i { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px; border-radius: 10px; background: #FFFFFF; border: 1px solid rgba(13,13,13,.06); }
.per-page .obl-fv-i .ca-drapeau, .per-page .obl-fv-i .ca-drapeau svg { width: 30px !important; height: 20px !important; border-radius: 3px; }
.per-page .obl-fv-i b { font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; }
/* le fil d'Ariane d'une rubrique */
.per-page .obl-fil { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.per-page .obl-vue button.obl-fil-r {
  display: inline-flex !important; align-items: center; gap: 8px; cursor: pointer; font: inherit !important; font-size: 13.5px !important; font-weight: 600 !important;
  padding: 8px 14px !important; border-radius: 10px !important; min-height: 0 !important; height: auto !important; line-height: 1.2 !important;
  background: #FFFFFF !important; border: 1px solid rgba(13,13,13,.10) !important; color: #2B2B2B !important;
}
.per-page .obl-vue button.obl-fil-r:hover { border-color: var(--rub, #8C2F39) !important; color: var(--rub, #8C2F39) !important; }
.per-page .obl-fil-ici { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 650; color: var(--rub, #8C2F39); }
.per-page .obl-vue-rub .obl-sec-num { color: var(--rub, #8C2F39); }
.per-page .obl-vue-rub .obl-carte { border-top: 3px solid color-mix(in srgb, var(--rub, #8C2F39) 55%, #FFFFFF); }
.per-page .obl-autres { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; padding-top: 18px; border-top: 1px solid rgba(13,13,13,.08); }
.per-page .obl-autres-t { font-size: 12px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: #8A8A8A; }
.per-page .obl-rubs.obl-rubs-p { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1180px) { .per-page .obl-rubs.obl-rubs-p { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.per-page .obl-rub-p .obl-rub-vis { height: 92px; padding: 8px 10px 4px; }
.per-page .obl-rub-p .obl-rub-c { padding: 10px 12px 12px; }
.per-page .obl-rub-p .obl-rub-t { font-size: 13px; gap: 7px; }
.per-page .obl-rub-p .obl-rub-t > i:first-child { width: 22px; height: 22px; font-size: 10.5px; border-radius: 6px; }
.per-page .obl-rub-p .obl-tv-l, .per-page .obl-rub-p .obl-tv-i > i, .per-page .obl-rub-p .obl-tv-i em { display: none; }
.per-page .obl-rub-p .obl-tv-i { padding: 3px 7px; } .per-page .obl-rub-p .obl-tv-i b { font-size: 11.5px; }
.per-page .obl-rub-p .obl-fv { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.per-page .obl-rub-p .obl-fv-i { padding: 3px 2px; gap: 2px; } .per-page .obl-rub-p .obl-fv-i b { font-size: 10px; }
.per-page .obl-rub-p .obl-fv-i .ca-drapeau, .per-page .obl-rub-p .obl-fv-i .ca-drapeau svg { width: 20px !important; height: 13px !important; }

/* ══ LES GRANDES TENDANCES ═══════════════════════════════════════════════ */
.per-page .obl-tend {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 18px; border-radius: 18px; overflow: hidden;
  background: #FFFFFF; border: 1px solid rgba(13,13,13,.08);
}
.per-page .obl-tend::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--t); }
.per-page .obl-tend-k { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--t); }
.per-page .obl-tend-k i { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; background: color-mix(in srgb, var(--t) 12%, #FFFFFF); }
.per-page .obl-vue h3.obl-tend-t { font-size: 20px !important; font-weight: 720 !important; letter-spacing: -.015em !important; line-height: 1.2 !important; margin: 0 !important; color: #0D0D0D !important; border: 0 !important; padding: 0 !important; font-family: inherit !important; }
.per-page .obl-tend-n { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--t) 7%, #FFFFFF); }
.per-page .obl-tend-n b { font-size: 26px; font-weight: 780; letter-spacing: -.02em; color: var(--t); font-variant-numeric: tabular-nums; }
.per-page .obl-tend-n span { font-size: 12.5px; color: #4D4D4D; line-height: 1.35; }
.per-page .obl-tend-p { font-size: 13.5px !important; line-height: 1.55 !important; color: #3D3D3D !important; }
.per-page .obl-tend-p b { color: #0D0D0D; font-weight: 650; }
.per-page .obl-vue button.obl-tend-l {
  align-self: flex-start; display: inline-flex !important; align-items: center; gap: 7px; cursor: pointer; margin-top: auto !important;
  font: inherit !important; font-size: 13px !important; font-weight: 650 !important; padding: 7px 12px !important; border-radius: 9px !important;
  min-height: 0 !important; height: auto !important; line-height: 1.2 !important;
  background: color-mix(in srgb, var(--t) 9%, #FFFFFF) !important; border: 0 !important; color: var(--t) !important;
}
.per-page .obl-vue button.obl-tend-l:hover { background: color-mix(in srgb, var(--t) 16%, #FFFFFF) !important; }
.per-page .obl-tend .obl-leg { margin-top: -2px; }

/* ══ LA BOULE DE NEIGE, EN UNE IMAGE ═════════════════════════════════════ */
#obl-fiche-hote .obl-bn2 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: center; }
@media (max-width: 1100px) { #obl-fiche-hote .obl-bn2 { grid-template-columns: minmax(0, 1fr); } }
#obl-fiche-hote .obl-bn2-scene svg { display: block; width: 100%; height: auto; }
#obl-fiche-hote .obl-bn2-lec { display: flex; flex-direction: column; gap: 9px; }
#obl-fiche-hote .obl-bn2-an { font-size: 22px; font-weight: 780; letter-spacing: -.02em; color: #0D0D0D; }
#obl-fiche-hote .obl-bn2-an small { font-size: 12px; font-weight: 600; color: #8A6100; background: #FBF4E0; padding: 3px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle; letter-spacing: 0; }
#obl-fiche-hote .obl-bn2-l { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--c) 7%, #FFFFFF); border: 1px solid color-mix(in srgb, var(--c) 18%, transparent); }
#obl-fiche-hote .obl-bn2-l > i { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 13px; color: #FFFFFF; background: var(--c); }
#obl-fiche-hote .obl-bn2-l > div { display: flex; flex-direction: column; gap: 1px; }
#obl-fiche-hote .obl-bn2-l > div > b { font-size: 13px; font-weight: 700; color: #0D0D0D; }
#obl-fiche-hote .obl-bn2-l > div > span { font-size: 12.5px; line-height: 1.4; color: #3D3D3D; }
#obl-fiche-hote .obl-bn2-l > div > span b { color: #0D0D0D; font-weight: 650; }
#obl-fiche-hote .obl-bn2-l > em { font-style: normal; font-size: 18px; font-weight: 780; color: var(--c); font-variant-numeric: tabular-nums; white-space: nowrap; }
#obl-fiche-hote .obl-bn2-bil { border-width: 2px; }
#obl-fiche-hote .obl-bn2-v { margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; color: #0D0D0D; font-weight: 550; }
#obl-fiche-hote .obl-bn2-v b { font-weight: 750; }
#obl-fiche-hote .obl-bn2-film-t { margin: 16px 0 4px; font-size: 12.5px; color: #4D4D4D; }
#obl-fiche-hote .obl-bn2-film-t .r { color: #C4261F; font-weight: 700; } #obl-fiche-hote .obl-bn2-film-t .v { color: #0E8A5F; font-weight: 700; }
#obl-fiche-hote .obl-bn2-film svg { display: block; width: 100%; height: auto; }
#obl-fiche-hote .obl-bn2-b:hover circle:not([fill="none"]) { fill-opacity: 1; }

/* ── Qui emprunte : le grand graphe, ses filtres, la tech (02/10/2026) ── */
.per-page .obl-emp-grand { margin-bottom: 16px; padding: 20px 22px 16px; }
.per-page .obl-emp-grand > .obl-carte-t { font-size: 16px; margin-bottom: 14px; }
.per-page .obl-emp-regl { display: inline-flex; flex-wrap: wrap; gap: 10px; }
.per-page .obl-puces { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.per-page .obl-vue button.obl-puce {
  display: inline-flex !important; align-items: center; gap: 8px; cursor: pointer;
  font: inherit !important; font-size: 12.5px !important; font-weight: 500 !important; line-height: 1.15 !important;
  padding: 7px 11px 7px 9px !important; border-radius: 10px !important; min-height: 0 !important; height: auto !important;
  border: 1px solid rgba(13,13,13,.10) !important; background: #FFFFFF !important; color: #6B6B6B !important;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.per-page .obl-vue button.obl-puce > i {
  width: 12px; height: 12px; border-radius: 4px; flex: none; box-sizing: border-box;
  border: 2px solid var(--c); background: transparent;
}
.per-page .obl-vue button.obl-puce > b {
  font-weight: 700; color: #0D0D0D; font-variant-numeric: tabular-nums; min-width: 3.9em; text-align: right;
}
.per-page .obl-vue button.obl-puce > b:empty { min-width: 0; }
.per-page .obl-vue button.obl-puce.on {
  color: #3D3D3D !important; border-color: color-mix(in srgb, var(--c) 42%, transparent) !important;
  background: color-mix(in srgb, var(--c) 7%, #FFFFFF) !important;
}
.per-page .obl-vue button.obl-puce.on > i { background: var(--c); }
.per-page .obl-vue button.obl-puce:hover { border-color: color-mix(in srgb, var(--c) 65%, transparent) !important; }
.per-page .obl-vue button.obl-puce:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.per-page .obl-zooms { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin-left: auto; font-size: 12px; color: #8A8A8A; }
.per-page .obl-zooms > span { margin-right: 2px; }
.per-page .obl-vue button.obl-zoom {
  font: inherit !important; font-size: 12px !important; font-weight: 550 !important; line-height: 1 !important;
  padding: 5px 7px !important; border-radius: 6px !important; border: 0 !important; background: transparent !important;
  color: #1B4FD8 !important; cursor: pointer; min-height: 0 !important; height: auto !important;
}
.per-page .obl-vue button.obl-zoom:hover { background: rgba(27,79,216,.07) !important; }
.per-page .obl-vue button.obl-zoom.on { background: rgba(27,79,216,.10) !important; color: #0D0D0D !important; }
.per-page .obl-emp-lec {
  min-height: 20px; margin: 0 0 6px; font-size: 12.5px; color: #6B6B6B; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.per-page .obl-emp-lec b { color: #0D0D0D; font-weight: 650; }
.per-page .obl-emp-lec .obl-emp-lec-n { color: #8E1E8C; }
.per-page .obl-emp-cv { height: 540px; }
@media (max-width: 700px) {
  .per-page .obl-emp-cv { height: 380px; }
  .per-page .obl-zooms { margin-left: 0; }
  .per-page .obl-emp-lec { white-space: normal; }
}

/* La carte de la tech */
.per-page .obl-tk-trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.per-page .obl-tk {
  border-radius: 11px; padding: 12px 14px; background: color-mix(in srgb, var(--c) 6%, #FFFFFF);
  border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); display: flex; flex-direction: column; gap: 3px;
}
.per-page .obl-tk > b { font-size: 23px; font-weight: 720; letter-spacing: -.02em; color: var(--c); font-variant-numeric: tabular-nums; line-height: 1.1; white-space: nowrap; }
.per-page .obl-tk > span { font-size: 12px; color: #3D3D3D; line-height: 1.35; }
.per-page .obl-tk > em { font-style: normal; font-size: 11.5px; color: #7A7A7A; line-height: 1.4; margin-top: 2px; }
.per-page .obl-tk-gt { font-size: 13px; font-weight: 620; color: #0D0D0D; margin: 0 0 6px; }
.per-page .obl-tk-gt span { display: block; font-size: 11.5px; font-weight: 450; color: #8A8A8A; margin-top: 1px; }
.per-page .obl-tk-socs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.per-page .obl-tk-socs-t { font-size: 12px; color: #8A8A8A; margin-right: 4px; }
.per-page .obl-tk-soc {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #3D3D3D;
  padding: 4px 9px 4px 4px; border-radius: 999px; background: #FAFAFB; border: 1px solid rgba(13,13,13,.07);
  box-shadow: inset 2px 0 0 var(--c);
}
.per-page .obl-tk-soc img { width: 18px; height: 18px; border-radius: 50%; object-fit: contain; background: #FFFFFF; }
.per-page .obl-tk-soc b { font-weight: 650; color: #0D0D0D; font-variant-numeric: tabular-nums; }
.per-page .obl-tk-det { margin-top: 12px; font-size: 12px; color: #4D4D4D; }
.per-page .obl-tk-det summary { cursor: pointer; color: #1B4FD8; font-weight: 550; }
.per-page .obl-tk-det ul { list-style: none; margin: 8px 0 0 !important; padding: 0 !important; columns: 2; column-gap: 22px; }
.per-page .obl-tk-det li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; padding: 3px 0; border-bottom: 1px solid rgba(13,13,13,.05); break-inside: avoid; margin: 0 !important; }
.per-page .obl-tk-det li i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #8E1E8C; vertical-align: 1px; }
.per-page .obl-tk-det li b { font-weight: 650; font-variant-numeric: tabular-nums; }
.per-page .obl-tk-det li em { font-style: normal; color: #9A9A9A; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .per-page .obl-tk-trois { grid-template-columns: minmax(0, 1fr); }
  .per-page .obl-tk-det ul { columns: 1; }
}
.per-page .obl-tk-carte { margin-bottom: 16px; }
.per-page .obl-tk-corps { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 26px; align-items: stretch; }
.per-page .obl-tk-corps .obl-tk-trois { grid-template-columns: minmax(0, 1fr); margin: 0; }
.per-page .obl-tk-d { display: flex; flex-direction: column; min-width: 0; }
.per-page .obl-tk-cv { flex: 1 1 auto; min-height: 280px; }
.per-page .obl-tk-cv > canvas { position: absolute; inset: 0; }
.per-page .obl-pp { margin-bottom: 16px; }
.per-page .obl-pp-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.per-page .obl-pp-corps .obl-trois { margin-bottom: 10px; }
.per-page .obl-pp-corps .obl-mult { margin-top: 0; }
.per-page .obl-emp-barre { display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; margin: 0 0 6px; }
.per-page .obl-emp-barre .obl-emp-lec { flex: 1 1 320px; min-width: 0; margin: 0; }
.per-page .obl-emp-barre .obl-zooms { margin-left: 0; }
@media (max-width: 900px) {
  .per-page .obl-tk-corps, .per-page .obl-pp-corps { grid-template-columns: minmax(0, 1fr); }
}

/* ── Le marché contre les agences (02/10/2026) ── */
.per-page .obl-na { margin-bottom: 16px; padding: 20px 22px 16px; }
.per-page .obl-na > .obl-carte-t { font-size: 16px; line-height: 1.3; align-items: flex-start; }
.per-page .obl-na > .obl-carte-t > span:first-child { flex: 1 1 420px; min-width: 0; }
.per-page .obl-na-chapo { font-size: 13px; line-height: 1.55; color: #4D4D4D; margin: -2px 0 12px !important; max-width: 980px; }
.per-page .obl-na-rouge { color: #C4261F !important; }
.per-page .obl-na-vert { color: #0E8A5F !important; }
.per-page .obl-na-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); gap: 24px; align-items: start; }
.per-page .obl-na-g { min-width: 0; }
.per-page .obl-na-plot { position: relative; height: 470px; }
.per-page .obl-na-svg { position: absolute; inset: 0; overflow: visible; }
.per-page .obl-na-svg text { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.per-page .obl-na-ax { font-size: 11px; fill: #9A9A9A; font-variant-numeric: tabular-nums; }
.per-page .obl-na-ax.on { fill: #3D3D3D; font-weight: 600; }
.per-page .obl-na-axt { font-size: 11.5px; fill: #8A8A8A; }
.per-page .obl-na-droite { font-size: 11px; fill: #6B6B6B; font-style: italic; }
.per-page .obl-na-spec { font-size: 10.5px; fill: rgba(196,38,31,.75); font-weight: 600; }
.per-page .obl-na-fl {
  position: absolute; width: 34px; height: 23px; border-radius: 4px; overflow: hidden; cursor: default;
  box-shadow: 0 0 0 1.5px #FFFFFF, 0 2px 6px rgba(13,13,13,.22); transition: transform .12s ease, box-shadow .12s ease; z-index: 1;
}
.per-page .obl-na-fl .ca-drapeau, .per-page .obl-na-fl svg { display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; }
.per-page .obl-na-fl.fr { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px rgba(196,38,31,.55), 0 3px 10px rgba(13,13,13,.25); z-index: 2; }
.per-page .obl-na-fl.vu, .per-page .obl-na-fl:focus-visible { transform: scale(1.15); z-index: 3; outline: none; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3.5px rgba(13,13,13,.7), 0 4px 12px rgba(13,13,13,.28); }
.per-page .obl-na-stem.vu { stroke-width: 3.4; }
.per-page .obl-na-barres { display: flex; flex-direction: column; gap: 3px; }
.per-page .obl-na-b { display: grid; grid-template-columns: minmax(0, 1fr) 92px 44px; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 7px; font-size: 12.5px; color: #3D3D3D; }
.per-page .obl-na-b.vu { background: rgba(13,13,13,.05); }
.per-page .obl-na-b.fr { font-weight: 650; color: #0D0D0D; }
.per-page .obl-na-bn { display: inline-flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.per-page .obl-na-bn i { display: inline-block; width: 20px; height: 13px; border-radius: 2px; overflow: hidden; flex: none; box-shadow: 0 0 0 1px rgba(13,13,13,.12); }
.per-page .obl-na-bn i .ca-drapeau, .per-page .obl-na-bn i svg { display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; }
.per-page .obl-na-bn em { font-style: normal; color: #9A9A9A; font-size: 11.5px; font-weight: 500; }
.per-page .obl-na-bp { position: relative; height: 10px; background: linear-gradient(90deg, transparent calc(50% - .5px), rgba(13,13,13,.25) calc(50% - .5px), rgba(13,13,13,.25) calc(50% + .5px), transparent calc(50% + .5px)); }
.per-page .obl-na-bp i { position: absolute; top: 1px; bottom: 1px; border-radius: 3px; }
.per-page .obl-na-bv { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .per-page .obl-na-corps { grid-template-columns: minmax(0, 1fr); }
  .per-page .obl-na-plot { height: 380px; }
}

/* ══ LES ENTREPRISES, UNE PAR UNE (02/10/2026) ═══════════════════════════ */
.per-page .obl-em-logo { width: 24px; height: 24px; object-fit: contain; display: block; border-radius: 6px; }
.per-page .obl-em-mono { display: grid; place-items: center; border-radius: 8px; font-weight: 700; font-size: 13px; line-height: 1; }
.per-page .obl-ic.obl-ic-logo { background: #FFFFFF !important; border: 1px solid rgba(13,13,13,.08); display: grid; place-items: center; overflow: hidden; }
.per-page .obl-ic.obl-ic-logo .obl-em-logo { width: 30px; height: 30px; }
.per-page .obl-ic.obl-ic-logo .obl-em-mono { font-size: 17px; }
.per-page .obl-em-barre { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 2px 0 2px; }
.per-page .obl-em-barre .obl-b em { font-style: normal; opacity: .55; margin-left: 3px; font-variant-numeric: tabular-nums; }
.per-page .obl-em-pt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
.per-page .obl-em-tri { margin-left: auto; }
.per-page input.obl-em-q {
  font: inherit; font-size: 13px; padding: 7px 11px; border-radius: 9px; border: 1px solid rgba(13,13,13,.14);
  background: #FFFFFF; color: #0D0D0D; min-width: 220px; flex: 0 1 260px; outline: none;
}
.per-page input.obl-em-q:focus { border-color: #1B4FD8; box-shadow: 0 0 0 3px rgba(27,79,216,.12); }
.per-page .obl-em-tag { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 1px 5px; border-radius: 5px; background: rgba(13,13,13,.06); color: #6B6B6B; margin-left: 5px; vertical-align: 1px; }
.per-page table.obl-em-tab tbody tr { cursor: pointer; }
.per-page table.obl-em-tab tbody tr:hover td { background: rgba(13,13,13,.025); }
.per-page table.obl-em-tab td:first-child { white-space: nowrap; }
.per-page a.obl-em-act { text-decoration: none; color: #1B4FD8 !important; }
.per-page a.obl-em-act:hover { background: rgba(27,79,216,.08); }
#obl-s-em .obl-sec-t { max-width: 860px; }