/* ==========================================================================
   LA FENÊTRE D'ANNONCE (sprint 2026-11-11 n° 5, D180) — salons, programmée au backoffice.

   Aucune source dans la maquette : la COQUE est celle de la fenêtre « Poser une option »
   (`.opt-overlay`, `.opt-back`, `.opt`, `.opt__x` — blocs/formulaires.css, chargé partout),
   seul le CONTENU est stylé ici. Chargée par l'en-tête SEULEMENT quand une annonce est en cours.

   L'image est souvent une AFFICHE en hauteur, qui porte du texte : elle n'est JAMAIS rognée
   (object-fit:contain). Sur écran large elle se place à côté du texte ; sur téléphone au-dessus,
   bornée en hauteur pour que le titre reste visible sans défiler.
   ========================================================================== */
.annonce{ width:min(560px,100%); }
.annonce--img{ width:min(820px,100%); display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); }

.annonce__img{ background:var(--noir); display:flex; align-items:center; justify-content:center; }
.annonce__img img{ display:block; width:100%; height:100%; max-height:92vh; object-fit:contain; }

.annonce__body{ padding:clamp(28px,4vw,44px); padding-right:clamp(48px,5vw,60px); align-self:center; }
.annonce__titre{ font-size:clamp(32px,3.6vw,46px); color:var(--noir); margin:0 0 22px; text-wrap:balance; }
/* `balance` et non une césure : sans lui, « Montier-en-Der » se coupait sur son trait d'union
   (« Montier- / en-Der »), sur écran large comme sur téléphone. */
.annonce__texte{ font-size:var(--fs-body); line-height:1.6; color:var(--noir-50); margin:0; }
.annonce__cta{ margin:24px 0 0; }

@media (max-width:620px){
  .annonce--img{ display:block; }
  .annonce__img{ height:min(40dvh,380px); }
  .annonce__img img{ max-height:none; }
  .annonce__body{ padding:24px; padding-top:22px; }
  .annonce__cta .btn{ width:100%; }
}