/* ═══════════════════════════════════════════════════════════════
   Roquemaure Automobiles — rubrique Actualités en liste
   ═══════════════════════════════════════════════════════════════
   Les actualités publiées s'affichent les unes sous les autres : un
   visuel à gauche, le texte à droite, au lieu de trois colonnes étroites
   où le texte se découpait en lignes courtes. La classe « promo-liste »
   n'est posée que par offres.js sur la page d'accueil ; la grille
   « promo-grid » de la page Recrutement n'est donc pas touchée.
   ═══════════════════════════════════════════════════════════════ */
.promos .promo-grid.promo-liste{
  display:flex; flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start;
  gap:24px;
}
.promos .promo-grid.promo-liste > *{flex:0 0 auto; width:100%;}

.promo-liste .promo--media{
  display:grid; grid-template-columns:minmax(0,46%) minmax(0,1fr);
  align-items:start; gap:0;
  border-left:4px solid var(--steel-soft);
}
.promo-liste .promo--media.promo--evenement{border-left-color:var(--neuf);}
.promo-liste .promo-visuel{border-right:1px solid var(--line);}
.promo-liste .promo--media .promo-corps{padding:clamp(22px,3vw,36px); gap:12px;}
.promo-liste .promo h3{font-size:clamp(1.3rem,2.2vw,1.65rem); line-height:1.25;}
.promo-liste .promo-when{font-size:0.85rem;}
.promo-liste .promo p{font-size:1rem; line-height:1.6;}
.promo-liste .promo-description{max-width:62ch;}
.promo-liste .promo--evenement .promo-tag{background:var(--neuf); border-color:var(--neuf); color:#ffffff;}
.promo-liste .promo .btn{margin-top:8px;}

/* Date de publication : discrète, en tête de carte. */
.promo-liste .promo .promo-publie{font-size:0.8rem; font-style:italic; color:var(--steel); margin:0 0 -2px; line-height:1.3;}

/* Carte sans photo : texte seul, sur toute la largeur. */
.promo-liste .promo:not(.promo--media){border-left:4px solid var(--steel-soft);}

/* Visuel pleine hauteur : l'image remplit tout son panneau, sans bande
   grise au-dessus ni en dessous. Le texte est resserré pour que la carte
   reste basse et que le recadrage de l'image soit minime. */
@media (min-width:768px){
  .promo-liste .promo--media{grid-template-columns:minmax(0,54%) minmax(0,1fr); align-items:stretch;}
  .promo-liste .promo--media .promo-visuel{
    align-self:stretch; position:relative; aspect-ratio:auto; min-height:280px;
    background:var(--graphite);
  }
  .promo-liste .promo--media .promo-visuel img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
  }
  .promo-liste .promo--media .promo-corps{padding:clamp(18px,2.2vw,26px); gap:8px; justify-content:center;}
  .promo-liste .promo p{font-size:0.95rem; line-height:1.5;}
}
@media (min-width:768px) and (max-width:991px){
  .promo-liste .promo--media{grid-template-columns:minmax(0,46%) minmax(0,1fr);}
}
@media (max-width:767px){
  .promo-liste .promo--media{grid-template-columns:minmax(0,1fr); border-left-width:0; border-top:4px solid var(--steel-soft);}
  .promo-liste .promo--media.promo--evenement{border-top-color:var(--neuf);}
  .promo-liste .promo-visuel{border-right:0; border-bottom:1px solid var(--line);}
  .promo-liste .promo .btn{align-self:stretch; justify-content:center; min-height:48px;}
}

/* Conditions repliées : un intitulé discret, le texte légal s'ouvre au clic. */
.promo-details{margin-top:2px;}
.promo-details summary{
  cursor:pointer; font-size:0.85rem; color:var(--steel); width:max-content; max-width:100%;
  text-decoration:underline; text-underline-offset:3px; padding:6px 0; min-height:32px;
}
.promo-details summary:hover{color:var(--ink);}
.promo-details[open] summary{margin-bottom:4px;}
.promo-details .promo-conditions{margin:0;}
@media (max-width:767px){ .promo-details summary{font-size:0.9375rem; min-height:44px; display:flex; align-items:center;} }