/* ═══════════════════════════════════════════════════════════════
   Roquemaure Automobiles — fenêtre d'annonce d'un événement
   ═══════════════════════════════════════════════════════════════
   Fichier à part, chargé par la seule page d'accueil : il n'a aucun
   effet sur les autres pages. Les couleurs viennent des variables de
   style.css, la fenêtre suit donc le thème clair ou sombre du site.
   ═══════════════════════════════════════════════════════════════ */
.pop-evt{
  position:fixed; inset:0; z-index:1300;
  background:rgba(21,23,26,0.78);
  display:flex; align-items:center; justify-content:center;
  padding:16px; overflow-y:auto;
  opacity:0; transition:opacity .25s ease;
}
.pop-evt--visible{opacity:1;}
.pop-evt-boite{
  position:relative; background:var(--surface); color:var(--ink);
  border-radius:6px; width:min(620px,100%); max-height:100%;
  overflow-y:auto; box-shadow:0 24px 70px rgba(0,0,0,0.45);
  transform:translateY(14px); transition:transform .25s ease;
}
.pop-evt--visible .pop-evt-boite{transform:translateY(0);}
/* Visuel pleine largeur, sans bande grise : le cadre épouse l'image. */
.pop-evt-visuel{display:block; width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--graphite);}
.pop-evt-visuels{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; background:var(--graphite);}
.pop-evt-visuels .pop-evt-visuel{aspect-ratio:16/10;}   /* même rapport que les visuels : aucun rognage du texte */
.pop-evt-corps{display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:24px 28px 28px; border-top:4px solid var(--neuf);}
.pop-evt-tag{
  font-family:'IBM Plex Mono',monospace; font-size:0.68rem; letter-spacing:0.14em;
  text-transform:uppercase; color:#ffffff; background:var(--neuf);
  border-radius:var(--radius); padding:4px 9px;
}
.pop-evt-titre{font-family:'Bebas Neue','IBM Plex Sans',sans-serif; font-size:clamp(2rem,4.4vw,2.7rem); font-weight:400; line-height:1.02; letter-spacing:0.01em; margin:2px 0 0;}
.pop-evt-quand{font-family:'IBM Plex Mono',monospace; font-size:0.85rem; color:var(--steel); margin:0;}
.pop-evt-texte{font-size:1rem; line-height:1.5; color:var(--ink); margin:0;}
.pop-evt-actions{display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:10px;}
.pop-evt-actions .btn{min-height:48px; padding-left:26px; padding-right:26px;}
.pop-evt-plus-tard{
  background:none; border:0; padding:10px 6px; min-height:44px; cursor:pointer;
  font-family:'IBM Plex Sans',sans-serif; font-size:0.92rem; color:var(--steel);
  text-decoration:underline; text-underline-offset:3px;
}
.pop-evt-plus-tard:hover{color:var(--ink);}
.pop-evt-fermer{
  position:absolute; top:10px; right:10px; z-index:1;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  background:rgba(21,23,26,0.72); color:#ffffff; border:1px solid rgba(255,255,255,0.35);
  font-size:20px; line-height:1;
}
.pop-evt-fermer:hover{background:rgba(21,23,26,0.9);}
.pop-evt-fermer:focus-visible,.pop-evt-plus-tard:focus-visible,.pop-evt-actions .btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}
@media (max-width:767px){
  .pop-evt{padding:12px; align-items:center;}
  .pop-evt-titre{font-size:2rem;}
  .pop-evt-corps{padding:20px 20px 22px;}
  .pop-evt-actions{flex-direction:column; align-items:stretch; width:100%;}
  .pop-evt-actions .btn{justify-content:center; min-height:48px;}
  .pop-evt-plus-tard{text-align:center;}
}
@media (prefers-reduced-motion:reduce){
  .pop-evt,.pop-evt-boite{transition:none;}
}