/* ===== offre-plus.css — « Lire plus » : le développé d'une offre dans une
 * petite fenêtre SOMBRE, « type celle du i » (Lino, 27/08/2026) ============
 *
 * Composant autonome, SANS dépendance de palette : la fenêtre est sombre sur
 * tous les mondes, exactement comme la bulle du « i » de ask.css (#16191b /
 * #ece7db). Le lien déclencheur, lui, hérite de la couleur du monde
 * (`color: inherit`) — chaque feuille de monde peut la préciser sans que ce
 * fichier ait à la connaître (realestate.css la passe en vert lumineux).
 *
 * Prévu pour /realestate d'abord, /sport ensuite : mêmes classes, un seul
 * fichier. À charger AVANT la feuille du monde, comme ask.css et menu.css, pour
 * que le monde puisse surcharger le lien à spécificité égale. */

/* ===== 1. LE LIEN « Lire plus » ========================================= */
.offre-plus {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.offre-plus:hover { text-decoration-thickness: 2px; }
.offre-plus:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* la ligne qui ne porte QUE le bouton (offres 2 et 3, sous un paragraphe qui
   reste, lui, affiché). Elle remonte contre le paragraphe précédent. */
.offer-more { margin: -0.9rem 0 1.3rem; }

/* La source du développé reste DANS le document (donc traduite par i18n et lue
   par Google), mais hors écran tant qu'on ne l'a pas demandée. `offre-plus.js`
   en recopie le contenu dans la fenêtre. */
.offre-plus-src[hidden] { display: none; }

/* ===== 2. LA FENÊTRE ==================================================== */
.plus-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.plus-modal[hidden] { display: none; }

/* le voile : on clique dessus pour fermer */
.plus-fond {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.plus-panneau {
  position: relative;
  width: min(30rem, 100%);
  max-height: min(80vh, 640px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 30px 24px 24px;
  border-radius: 16px;
  background: #16191b;
  color: #ece7db;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.plus-x {
  position: absolute;
  top: 9px;
  right: 11px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #ece7db;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}
.plus-x:hover { background: rgba(255, 255, 255, 0.1); }
.plus-x:focus-visible { outline: 2px solid #ece7db; outline-offset: 2px; }

.plus-corps p {
  margin: 0 0 0.9rem;
  font-family: "Outfit", -apple-system, "Helvetica Neue", sans-serif;
  font-size: 0.95rem;
  line-height: 1.62;
  color: #ece7db;
}
.plus-corps p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: no-preference) {
  .plus-panneau { animation: plus-in 0.18s ease-out; }
  @keyframes plus-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
}