/* N-84 */

/* =====================================================================
   LA REVUE DE PRESSE
   =====================================================================

   Une une, puis une liste.

   POURQUOI CETTE FORME. La page sera nue au départ : un seul article
   traité en une tient debout, là où une grille d'une vignette fait
   pauvre. Et quand les articles s'accumuleront, la une restera le point
   d'entrée.

   LES COULEURS DE LA RUBRIQUE : le bleu #016AB1 porte les titres et les
   liens, le cyan #06D9FA ne sert qu'aux filets. À cette saturation, il
   est illisible en texte sur fond blanc — c'est une couleur de trait,
   non d'écriture.
   ===================================================================== */

.vpr {
  --vpr-bleu: #016AB1;
  --vpr-cyan: #06D9FA;
  --vpr-encre: #2B3A47;
  --vpr-doux: #8A93A0;
  --vpr-filet: #E3ECF5;

  margin: 0 0 30px;
}

.vpr-rubrique {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vpr-doux);
}
/* Le filet cyan prolonge le titre de rubrique : c'est là que la couleur
   sert, sans avoir à être lue. */
.vpr-rubrique::after {
  content: '';
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--vpr-cyan), transparent);
}

.vpr-rubrique + * { margin-top: 0; }
.vpr-liste + .vpr-rubrique,
.vpr-une + .vpr-rubrique { margin-top: 34px; }

/* ─── LA UNE ────────────────────────────────────────────────────────── */
.vpr-une {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  background: #fff;
  border: 1px solid var(--vpr-filet);
  border-top: 3px solid var(--vpr-bleu);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(1, 74, 133, .09);
}

/* LA HAUTEUR EST BORNÉE : une coupure verticale prendrait sinon toute la
   hauteur de la une, et le texte à côté paraîtrait perdu.

   Elle s'agrandit au clic — c'est là qu'on la lit vraiment. */
.vpr-une__image {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: #F3F5F7;
  cursor: zoom-in;
  min-height: 210px;
  max-height: 320px;
}
.vpr-une__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vpr-une__image--vide { cursor: default; }

/* La loupe ne paraît qu'au survol : elle dit ce que le clic fera, sans
   encombrer la coupure. */
.vpr-loupe {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px 12px;
  border-radius: 14px;
  background: rgba(1, 74, 133, .88);
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  opacity: 0;
  transition: opacity .18s;
}
.vpr-une__image:hover .vpr-loupe { opacity: 1; }

.vpr-une__mot { padding: 24px 26px; }

.vpr-une__titre {
  margin: 0 0 12px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.3px;
  color: #1A2E4A;
}
.vpr-une__extrait {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--vpr-encre);
}

/* ─── LA LISTE ──────────────────────────────────────────────────────── */
.vpr-liste { display: flex; flex-direction: column; gap: 12px; }

.vpr-article {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 16px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--vpr-filet);
  border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.vpr-article:hover {
  border-color: #B5D4F4;
  box-shadow: 0 3px 14px rgba(1, 74, 133, .08);
}

.vpr-article__image {
  display: block;
  padding: 0;
  border: 0;
  height: 96px;
  border-radius: 8px;
  overflow: hidden;
  background: #F3F5F7;
  cursor: zoom-in;
}
.vpr-article__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vpr-article__image--vide { cursor: default; }

.vpr-article__titre {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: #1A2E4A;
}
.vpr-article__extrait {
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #5F6B7A;
}

/* ─── LE CHAPEAU ET LE LIEN ─────────────────────────────────────────── */
.vpr-source {
  margin: 0 0 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--vpr-bleu);
}

.vpr-lien { margin: 0; font-size: 13px; }
.vpr-lien a {
  color: var(--vpr-bleu);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid #B5D4F4;
}
.vpr-lien a:hover { border-bottom-color: var(--vpr-bleu); }

.vpr-vide {
  padding: 40px;
  text-align: center;
  font-style: italic;
  color: var(--vpr-doux);
}

/* ─── LA COUPURE AGRANDIE ───────────────────────────────────────────── */
.vpr-fenetre {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background: rgba(15, 28, 45, .82);
  cursor: zoom-out;
}
.vpr-fenetre img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
  cursor: default;
}
.vpr-fermer {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  font-size: 17px;
  color: #fff;
  cursor: pointer;
}
.vpr-fermer:hover { background: rgba(255, 255, 255, .32); }

@media (max-width: 720px) {
  .vpr-une { grid-template-columns: 1fr; }
  .vpr-une__image { min-height: 180px; max-height: 260px; }
  .vpr-article { grid-template-columns: 1fr; }
  .vpr-article__image { height: 170px; }
}