/* ==========================================================================
   L'AFFICHE À LANGUETTES — The Vacancy Page (tvp-)
   Papier photocopié #F7F2E4, encre #221A10, bleu écriteau #1D5FAA en aplats
   (bande du sommaire, punaises, boutons, onglet courant), liège #4A3320 pour
   le dos sombre. Chaque colonne porte sa couleur astrobright via [data-col].
   Chaque note est une feuille volante punaise : coins arrondis, ombre
   portée teintée, et la bande de languettes à détacher en bas.
   Titraille Old Standard TT, corps Newsreader (15,5px), méta condensé.
   ========================================================================== */
@font-face {
  font-family: 'TVP Standard';
  src: url('tvp-standard-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TVP Standard';
  src: url('tvp-standard-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TVP News';
  src: url('tvp-news-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TVP News';
  src: url('tvp-news-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --papier: #F7F2E4;
  --papier2: #EFE7D2;
  --encre: #221A10;
  --encre-doux: #6A5B43;
  --sign: #1D5FAA;
  --sign-fonce: #16467E;
  --sign-pale: #DCE7F4;
  --filet: #E2D5B6;
  --filet-fort: #C4AB7E;
  --liege: #4A3320;
  --liege-fonce: #3A2716;
  --liege-encre: #F3E4C8;
  --liege-doux: #C9A98F;
  --ombre: 0 12px 26px -14px rgba(29, 95, 170, .38), 0 3px 9px rgba(34, 26, 16, .14);
  --rayon: 14px;
  --titre: 'TVP Standard', Didot, 'Bodoni MT', 'Times New Roman', serif;
  --texte: 'TVP News', Georgia, 'Times New Roman', serif;
  --condense: 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --largeur: 72rem;
  --gris: grayscale(.14);
}

/* La couleur astrobright de chaque colonne : bleu d'écriteau pour ce qu'on
   annonce, vert d'affiche recherchée, ocre d'avis officiel, prune des cartes
   retirées. --acc colore tags, filets, pictos et punaises de la colonne. */
[data-col="the-listing"]  { --acc: #1D5FAA; --acc-pale: #DCE7F4; }
[data-col="the-search"]   { --acc: #2E7D4F; --acc-pale: #D9EBDF; }
[data-col="the-landlord"] { --acc: #B26A0C; --acc-pale: #F3E3C8; }
[data-col="the-city"]     { --acc: #8E3B6E; --acc-pale: #EFD9E6; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 15.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; filter: var(--gris); }
main { display: flow-root; }
a { color: var(--sign); text-decoration-color: var(--filet-fort); text-underline-offset: .18em; }
a:hover { color: var(--sign-fonce); text-decoration-color: var(--sign); }
h1, h2, h3 { font-family: var(--titre); font-weight: 700; line-height: 1.12; margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
figcaption { font-family: var(--condense); font-size: .74rem; letter-spacing: .04em; color: var(--encre-doux); padding-top: .45rem; }
figcaption .tvp-credit { display: block; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-doux); margin-top: .15rem; }

.tvp-travee { max-width: var(--largeur); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.tvp-acces-direct {
  position: absolute; left: -9999px; top: 0;
  background: var(--sign); color: #fff; padding: .6rem 1rem; z-index: 50;
}
.tvp-acces-direct:focus { left: 0; }
.tvp-picto { display: inline-block; vertical-align: -.18em; width: 1.05em; height: 1.05em; }

/* ---------- MANCHETTE ---------- */
.tvp-manchette { border-bottom: 1px solid var(--filet-fort); }
.tvp-edition {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--condense); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--encre-doux);
  padding-top: .3rem; padding-bottom: .3rem;
  border-bottom: 1px solid var(--filet);
}
.tvp-nameplate {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-top: .7rem; padding-bottom: .5rem;
}
.tvp-oreille {
  font-family: var(--condense); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--encre-doux);
  border-top: 1px solid var(--filet-fort); border-bottom: 1px solid var(--filet-fort);
  padding: .35rem 0; margin: 0;
}
.tvp-oreille--g { text-align: left; }
.tvp-oreille--d { text-align: right; }
.tvp-nameplate__centre { text-align: center; }
.tvp-enseigne { font-size: clamp(1.9rem, 4.2vw, 2.7rem); letter-spacing: .015em; }
.tvp-enseigne a { color: var(--encre); text-decoration: none; display: inline-flex; align-items: center; gap: .9rem; }
.tvp-enseigne a:hover { color: var(--sign-fonce); }
.tvp-ecriteau { width: clamp(2.9rem, 5vw, 4.3rem); height: auto; flex: 0 0 auto; transform: rotate(-2deg); }
.tvp-devise {
  margin: .22rem 0 0; font-family: var(--titre); font-style: italic;
  font-size: clamp(.85rem, 1.4vw, .95rem); color: var(--encre-doux);
}
/* Le sommaire en bande pleine : l'aplat bleu écriteau qui signe le site. */
.tvp-sommaire {
  background: var(--sign);
  border-top: 3px double var(--encre);
}
.tvp-sommaire ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .15rem clamp(.5rem, 1.8vw, 1.3rem); padding: .3rem 0;
}
.tvp-sommaire a {
  font-family: var(--condense); font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: #EAF1FA; text-decoration: none;
  padding: .22rem .4rem; border-radius: 6px;
}
.tvp-sommaire a:hover { color: #fff; background: var(--sign-fonce); }
.tvp-sommaire a[aria-current] { color: #fff; box-shadow: inset 0 -2px 0 #fff; }

/* ---------- LA UNE : la grande affiche sous sa punaise ---------- */
.tvp-une {
  display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(1.4rem, 3.5vw, 2.8rem);
  align-items: center;
  margin-top: 1.6rem; padding: clamp(1.2rem, 3vw, 2.2rem);
  border: 1px solid var(--filet-fort); border-radius: var(--rayon);
  background: var(--papier2);
  position: relative;
  box-shadow: var(--ombre);
}
.tvp-punaise {
  position: absolute; top: -.55rem; left: 50%; margin-left: -.55rem;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7FA8D4, var(--acc, var(--sign)) 62%, var(--sign-fonce));
  box-shadow: 0 2px 4px rgba(34, 26, 16, .45), inset 0 -2px 3px rgba(0,0,0,.25);
  z-index: 2;
}
.tvp-punaise--une { left: 50%; }
.tvp-une__visuel img {
  width: 100%; aspect-ratio: 4/3; height: auto; object-fit: cover;
  border: 1px solid var(--filet-fort); border-radius: 10px;
  box-shadow: 0 8px 20px -10px rgba(34, 26, 16, .35);
}
.tvp-plomb {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem .9rem;
  margin: 0 0 .7rem; font-family: var(--condense); font-size: .72rem;
  letter-spacing: .13em; text-transform: uppercase;
}
.tvp-plomb__avis {
  background: var(--acc, var(--sign)); color: #F7F2E4; font-weight: 700;
  padding: .18rem .55rem .14rem; letter-spacing: .2em; border-radius: 4px;
}
.tvp-plomb__col { color: var(--encre); text-decoration: none; }
.tvp-plomb__col:hover { color: var(--acc, var(--sign)); }
.tvp-plomb__col .tvp-picto { color: var(--acc, var(--sign)); margin-right: .15em; }
.tvp-plomb__date { color: var(--encre-doux); margin-left: auto; }
.tvp-une__intitule { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: .8rem; }
.tvp-une__intitule a { color: var(--encre); text-decoration: none; }
.tvp-une__intitule a:hover { color: var(--sign); }
.tvp-une__chapo {
  font-family: var(--titre); font-size: 1.06rem; line-height: 1.45;
  color: var(--encre); margin: 0 0 .8rem;
}
.tvp-une__intro {
  font-size: .9rem; line-height: 1.65; color: var(--encre-doux);
  border-top: 1px solid var(--filet); padding-top: .8rem; margin: 0 0 1.1rem;
}
.tvp-une__intro b { color: var(--sign); }
.tvp-une__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; }
.tvp-bouton {
  display: inline-block; background: var(--sign); color: #F7F2E4;
  font-family: var(--condense); font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  padding: .68rem 1.15rem; border: 1px solid var(--sign); border-radius: 8px;
}
.tvp-bouton:hover { background: var(--sign-fonce); color: #fff; }
.tvp-bouton--clair { background: transparent; color: var(--sign); }
.tvp-bouton--clair:hover { background: var(--sign); color: #fff; }

/* ---------- TÊTE DE SECTION : bande pleine signée ---------- */
.tvp-bandeau {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 2.4rem; padding: .55rem .95rem;
  background: var(--sign); color: #EAF1FA;
  border-radius: 10px;
}
.tvp-bandeau h2 {
  font-size: clamp(1.05rem, 2vw, 1.35rem); letter-spacing: .02em;
}
.tvp-bandeau__decompte {
  font-family: var(--titre); font-size: 1.4rem; font-weight: 700;
  color: #fff; margin-left: auto;
}
.tvp-bandeau__note {
  margin: 0; font-family: var(--condense); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: #C7D8EE;
}

/* ---------- LES AFFICHES ÉPINLÉES ---------- */
.tvp-boites {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(18.5rem, 1fr));
  gap: 1.1rem; margin-top: 1.2rem;
}
.tvp-boites--fil { grid-template-columns: 1fr; }
.tvp-annonce {
  position: relative;
  background: #FCF8EC;
  padding: 1rem 1.1rem .4rem;
  border: 1px solid var(--filet); border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
.tvp-annonce .tvp-punaise { top: -.5rem; }
.tvp-annonce .tvp-plomb { border-bottom: 1px solid var(--filet); padding-bottom: .55rem; }
.tvp-annonce__corps { display: flex; gap: .85rem; margin-top: .8rem; }
.tvp-annonce__vignette { flex: 0 0 clamp(5.5rem, 30%, 8rem); }
.tvp-annonce__vignette img {
  width: 100%; aspect-ratio: 4/5; height: auto; object-fit: cover;
  border: 1px solid var(--filet); border-radius: 8px;
}
.tvp-annonce__texte { flex: 1 1 0; min-width: 0; }
.tvp-annonce__intitule { font-size: 1.08rem; line-height: 1.22; }
.tvp-annonce__intitule a { color: var(--encre); text-decoration: none; }
.tvp-annonce__intitule a:hover { color: var(--acc, var(--sign)); }
.tvp-annonce__abrege { font-size: .82rem; line-height: 1.55; color: var(--encre-doux); margin: .45rem 0 0; }
/* La grande annonce : pleine largeur, vignette majeure. */
.tvp-annonce--large { grid-column: 1 / -1; }
.tvp-annonce--large .tvp-annonce__vignette { flex-basis: clamp(8rem, 26%, 12rem); }
.tvp-annonce--large .tvp-annonce__vignette img { width: 100%; aspect-ratio: 4/3; }
.tvp-annonce--large .tvp-annonce__intitule { font-size: 1.5rem; }
.tvp-annonce--large .tvp-annonce__abrege { font-size: .9rem; }
.tvp-boites--fil .tvp-annonce__intitule { font-size: 1.28rem; }
.tvp-boites--fil .tvp-annonce__vignette { flex-basis: clamp(7rem, 18%, 9.5rem); }
.tvp-boites--fil .tvp-annonce__vignette img { width: 100%; aspect-ratio: 3/2; }

/* La bande de languettes : perforation + un mot DIFFÉRENT par languette,
   vertical, comme les détails pratiques des vraies affiches à arracher. */
.tvp-tabs {
  display: flex; gap: 3px; margin: .9rem .2rem .55rem;
  padding-top: .55rem; border-top: 2px dashed var(--filet-fort);
}
.tvp-tab {
  flex: 1 1 0; height: 3.5rem; overflow: hidden;
  border: 1px solid var(--filet); border-radius: 3px;
  background: var(--papier);
  display: flex; align-items: flex-start; justify-content: center;
}
.tvp-tab span {
  font-family: var(--condense); font-size: .5rem; font-weight: 700; font-style: normal;
  letter-spacing: .08em; text-transform: uppercase; color: var(--encre-doux);
  writing-mode: vertical-rl; padding-top: .22rem; white-space: nowrap;
}
.tvp-tab--plie {
  border-style: dashed; background: var(--papier2); transform: rotate(-1.4deg);
}

/* ---------- LES BRÈVES : trois colonnes à filet ---------- */
.tvp-breves {
  columns: 3; column-gap: 2rem; column-rule: 1px solid var(--filet);
  margin-top: 1.1rem;
}
.tvp-brin { break-inside: avoid; border-bottom: 1px dotted var(--filet-fort); }
.tvp-brin a {
  display: block; padding: .6rem 0 .55rem; text-decoration: none; color: var(--encre);
}
.tvp-brin a:hover .tvp-brin__intitule { color: var(--acc, var(--sign)); }
.tvp-brin__avis {
  font-family: var(--condense); font-size: .62rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--acc, var(--sign));
}
.tvp-brin__intitule {
  display: block; font-family: var(--titre); font-size: .98rem; line-height: 1.3;
  margin-top: .15rem;
}
.tvp-brin__date {
  display: block; font-family: var(--condense); font-size: .68rem;
  letter-spacing: .08em; color: var(--encre-doux); margin-top: .2rem;
}

/* ---------- INDEX PAR LETTRE ---------- */
.tvp-abecedaire {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1.1rem 2rem; margin-top: 1.1rem;
}
.tvp-abecedaire__lettre { display: flex; gap: .8rem; align-items: flex-start; }
.tvp-abecedaire__cap {
  font-family: var(--titre); font-size: 1.9rem; font-weight: 700; line-height: 1;
  color: var(--sign); min-width: 1.7rem;
  border-bottom: 2px solid var(--sign);
}
.tvp-abecedaire__lettre ul { flex: 1; }
.tvp-abecedaire__lettre li { border-bottom: 1px dotted var(--filet); }
.tvp-abecedaire__lettre a {
  display: block; padding: .3rem 0; font-size: .84rem; line-height: 1.4;
  color: var(--encre); text-decoration: none;
}
.tvp-abecedaire__lettre a:hover { color: var(--sign); }

/* ---------- LE DOS LIÈGE : les quatre colonnes ---------- */
.tvp-dos { background: var(--liege); color: var(--liege-encre); margin-top: 2.8rem; }
.tvp-dos__interieur { padding-top: 2.2rem; padding-bottom: 2.4rem; }
.tvp-dos__tete { display: flex; align-items: baseline; gap: 1.2rem; border-bottom: 1px solid #6B4A2E; padding-bottom: .7rem; }
.tvp-dos__tete h2 { color: var(--liege-encre); font-size: clamp(1.2rem, 2.4vw, 1.6rem); }
.tvp-dos__note { margin: 0; font-family: var(--condense); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #E8B87E; }
.tvp-dos__rangee {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: 1rem; margin-top: 1.3rem;
}
.tvp-col {
  display: flex; flex-direction: column; gap: .45rem;
  background: var(--liege-fonce); color: var(--liege-encre);
  padding: 1.1rem 1.2rem 1.25rem; text-decoration: none;
  border: 1px solid #6B4A2E; border-top: 4px solid var(--acc, #E8B87E);
  border-radius: var(--rayon);
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .5);
}
.tvp-col:hover { background: #452F1B; transform: translateY(-2px); }
.tvp-col { transition: transform .15s ease; }
.tvp-col__haut { display: flex; align-items: center; gap: .55rem; color: var(--acc, #E8B87E); }
.tvp-col__haut .tvp-picto { width: 1.4em; height: 1.4em; }
.tvp-col__avis {
  font-family: var(--condense); font-size: .64rem;
  font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--liege-encre); background: var(--acc, #8A6A3E);
  padding: .18rem .5rem .14rem; border-radius: 4px;
}
.tvp-col__label { font-family: var(--titre); font-size: 1.15rem; font-weight: 700; }
.tvp-col__intro { font-size: .8rem; line-height: 1.55; color: var(--liege-doux); }
.tvp-col__decompte {
  font-family: var(--condense); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--liege-encre);
  border-top: 1px solid #6B4A2E; padding-top: .5rem; margin-top: auto;
}

/* ---------- ENCART / AILLEURS ---------- */
.tvp-encart {
  margin-top: 2.4rem; padding: 1.3rem 1.5rem;
  border: 1px solid var(--filet-fort); border-left: 4px solid var(--sign);
  border-radius: 10px;
  background: var(--papier2);
}
.tvp-encart h2 { font-size: 1.15rem; margin-bottom: .5rem; }
.tvp-encart p { margin: 0; font-size: .9rem; line-height: 1.65; }
.tvp-ailleurs { margin-top: 2.4rem; }
.tvp-ailleurs__tete { border-bottom: 2px solid var(--encre); padding-bottom: .55rem; }
.tvp-ailleurs__tete h2 { font-size: 1.25rem; }
.tvp-ailleurs__phrase { margin: .35rem 0 0; font-size: .86rem; color: var(--encre-doux); }
.tvp-ailleurs__liste { columns: 2; column-gap: 2.2rem; column-rule: 1px solid var(--filet); margin-top: 1rem; }
.tvp-ailleurs__item { break-inside: avoid; border-bottom: 1px dotted var(--filet-fort); }
.tvp-ailleurs__item p { margin: 0; padding: .55rem 0; font-size: .87rem; line-height: 1.6; }

/* ---------- PAGE DE COLONNE (rubrique) ---------- */
.tvp-remontee { font-family: var(--condense); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding-top: 1.1rem; }
.tvp-remontee ol { display: flex; flex-wrap: wrap; gap: .4rem; }
.tvp-remontee li + li::before { content: '›'; margin-right: .4rem; color: var(--filet-fort); }
.tvp-remontee a { color: var(--encre-doux); }
.tvp-tetepage { position: relative; padding-top: 1.7rem; padding-bottom: 1.4rem; }
.tvp-tetepage::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: .8rem;
  background-image: radial-gradient(var(--filet-fort) 1px, transparent 1.4px);
  background-size: 6px 6px; opacity: .6;
}
.tvp-tetepage__avis {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--condense); font-size: .68rem;
  font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: #F7F2E4; background: var(--acc, var(--sign)); padding: .24rem .6rem .2rem;
  margin: 0 0 .7rem; transform: rotate(-1.6deg); border-radius: 5px;
}
.tvp-tetepage h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.tvp-tetepage__intro { margin: .6rem 0 0; font-size: .94rem; color: var(--encre-doux); max-width: 46rem; }
.tvp-onglets {
  display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem;
}
.tvp-onglet {
  flex: 1 1 auto; text-align: center; background: #FCF8EC;
  font-family: var(--condense); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--encre); text-decoration: none;
  padding: .65rem .8rem;
  border: 1px solid var(--filet); border-top: 3px solid var(--acc, var(--filet-fort));
  border-radius: 8px;
}
.tvp-onglet .tvp-picto { color: var(--acc, var(--sign)); }
.tvp-onglet:hover { background: var(--acc-pale, var(--papier2)); }
.tvp-onglet--courant { background: var(--acc, var(--sign)); color: #F7F2E4; border-color: var(--acc, var(--sign)); }
.tvp-onglet--courant .tvp-picto { color: #F7F2E4; }

/* ---------- L'AFFICHE (page article) ---------- */
.tvp-avis__entete { padding-top: 1.5rem; }
.tvp-avis__entete h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); margin: .4rem 0 .7rem; max-width: 50rem; }
.tvp-avis__chapo { font-family: var(--titre); font-size: 1.1rem; line-height: 1.5; color: var(--encre-doux); max-width: 44rem; margin: 0 0 .8rem; }
.tvp-avis__signature {
  font-family: var(--condense); font-size: .74rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--encre-doux);
  border-top: 1px solid var(--filet); border-bottom: 3px double var(--encre);
  padding: .55rem 0 .65rem; margin: 0;
}
.tvp-avis__signature b { color: var(--sign); }
.tvp-avis__visuel { margin-top: 1.3rem; }
.tvp-avis__visuel img {
  width: 100%; aspect-ratio: 3/2; height: auto; object-fit: cover;
  border: 1px solid var(--filet-fort); border-radius: 10px;
  box-shadow: 0 10px 24px -12px rgba(34, 26, 16, .3);
}
.tvp-avis__duo {
  display: grid; grid-template-columns: 1fr 15.5rem;
  gap: clamp(1.6rem, 4vw, 3rem); margin-top: 1.8rem; align-items: start;
}
.tvp-corps { font-size: 1.02rem; line-height: 1.75; max-width: 44rem; }
.tvp-corps > p:first-of-type::first-letter {
  font-family: var(--titre); font-weight: 700; font-size: 3.4rem;
  float: left; line-height: .82; padding: .12rem .5rem .05rem 0;
  color: var(--sign);
}
.tvp-corps h2 {
  font-size: 1.35rem; margin: 2rem 0 .7rem;
  border-bottom: 1px solid var(--filet); padding-bottom: .4rem;
}
.tvp-corps h2::before { content: '§ '; color: var(--sign); font-weight: 400; }
.tvp-corps p { margin: 0 0 1.05rem; }
.tvp-corps a { color: var(--sign); }
.tvp-corps figure { margin: 1.6rem 0; }
.tvp-corps figure img { border: 1px solid var(--filet-fort); border-radius: 8px; }
.tvp-corps blockquote {
  margin: 1.6rem 0; padding: .8rem 1.2rem;
  border-left: 3px solid var(--sign); background: var(--papier2);
  border-radius: 0 8px 8px 0;
  font-family: var(--titre); font-style: italic;
}
.tvp-marge { position: sticky; top: 1rem; font-size: .84rem; }
.tvp-marge__col {
  display: flex; flex-direction: column; gap: .45rem;
  border: 1px solid var(--filet-fort); border-top: 4px solid var(--acc, var(--sign));
  border-radius: var(--rayon);
  padding: 1rem 1.1rem; margin-bottom: 1.4rem; background: var(--papier2);
  box-shadow: var(--ombre);
}
.tvp-marge__avis {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--condense); font-size: .62rem;
  font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: #F7F2E4; background: var(--acc, var(--sign)); padding: .18rem .5rem .14rem;
  border-radius: 4px;
}
.tvp-marge__label { font-family: var(--titre); font-weight: 700; font-size: 1.1rem; color: var(--encre); text-decoration: none; }
.tvp-marge__label:hover { color: var(--acc, var(--sign)); }
.tvp-marge__titre {
  font-family: var(--condense); font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--encre-doux);
  border-bottom: 2px solid var(--encre); padding-bottom: .35rem; margin: 0 0 .6rem;
}
.tvp-marge__sommaire { counter-reset: som; margin-bottom: 1.4rem; }
.tvp-marge__sommaire li { counter-increment: som; border-bottom: 1px dotted var(--filet); }
.tvp-marge__sommaire a {
  display: block; padding: .4rem 0 .4rem 1.6rem; position: relative;
  color: var(--encre); text-decoration: none; font-size: .82rem; line-height: 1.4;
}
.tvp-marge__sommaire a::before {
  content: counter(som, decimal-leading-zero); position: absolute; left: 0;
  font-family: var(--titre); font-weight: 700; color: var(--sign);
}
.tvp-marge__sources li { border-bottom: 1px dotted var(--filet); }
.tvp-marge__sources a { display: block; padding: .35rem 0; font-size: .76rem; word-break: break-all; }

/* ---------- LE DIPTYQUE : le lieu et le regard proche ---------- */
.tvp-dipt { margin-top: 2rem; }
.tvp-dipt__deux { display: grid; grid-template-columns: 1.5fr 1fr; gap: .8rem; }
.tvp-dipt__cadre img {
  width: 100%; object-fit: cover;
  border: 1px solid var(--filet-fort); border-radius: 10px;
  box-shadow: 0 8px 20px -12px rgba(34, 26, 16, .3);
}
.tvp-dipt__cadre--lieu img { aspect-ratio: 3/2; height: auto; }
.tvp-dipt__cadre--proche img { aspect-ratio: 4/5; height: auto; }
.tvp-dipt__legende { border-top: 1px solid var(--filet); margin-top: .4rem; }

/* ---------- PIED : l'ours ---------- */
.tvp-pied {
  margin-top: 3rem; background: var(--liege); color: var(--liege-encre);
  border-top: 3px double #6B4A2E;
}
.tvp-pied__colonnes {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.2rem;
  padding-top: 2rem; padding-bottom: 1.6rem;
}
.tvp-pied h2 {
  font-family: var(--condense); font-size: .76rem; letter-spacing: .18em;
  text-transform: uppercase; color: #E8B87E; margin-bottom: .7rem;
}
.tvp-pied p { font-size: .84rem; line-height: 1.65; color: var(--liege-doux); margin: 0 0 .6rem; }
.tvp-pied a { color: var(--liege-encre); text-decoration: none; }
.tvp-pied a:hover { color: #fff; }
.tvp-pied li { border-bottom: 1px solid #5C3E24; }
.tvp-pied li a { display: block; padding: .42rem 0; font-size: .84rem; }
.tvp-pied__note { font-style: italic; font-size: .8rem; }
.tvp-pied__ligne {
  display: flex; justify-content: space-between;
  font-family: var(--condense); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--liege-doux);
  border-top: 1px solid #5C3E24; padding-top: .9rem; padding-bottom: .9rem;
}

/* ---------- PETITS ÉCRANS ---------- */
@media (max-width: 60rem) {
  .tvp-nameplate { grid-template-columns: 1fr; gap: .8rem; }
  .tvp-oreille { text-align: center; }
  .tvp-une { grid-template-columns: 1fr; }
  .tvp-une__visuel { order: -1; }
  .tvp-breves { columns: 2; }
  .tvp-avis__duo { grid-template-columns: 1fr; }
  .tvp-marge { position: static; }
  .tvp-pied__colonnes { grid-template-columns: 1fr; gap: 1.6rem; }
  .tvp-dipt__deux { grid-template-columns: 1fr; }
}
@media (max-width: 38rem) {
  .tvp-breves { columns: 1; }
  .tvp-boites { grid-template-columns: 1fr; }
}
@media print {
  .tvp-sommaire, .tvp-punaise, .tvp-tabs, .tvp-dos, .tvp-pied { display: none; }
  body { background: #fff; }
}