/* utilitaires */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,1px,1px);white-space:nowrap;border:0}

/* grille */
.jlo-grid{;color:var(--jlo-fg);max-width:1200px;margin:0 auto;padding:1rem}
.jlo-grid__title{font-size:clamp(1.25rem,2vw,1.75rem);margin:0 0 1rem}
.jlo-grid__list{list-style:none;padding:0;margin:0;display:grid;gap:1rem;grid-template-columns:repeat(1,minmax(0,1fr))}
@media(min-width:640px){.jlo-grid__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.jlo-grid__list{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}}

/* carte + ratio */
.flip-card{width:100%;aspect-ratio:var(--ratio,1/1);position:relative}
@supports not (aspect-ratio:1/1){.flip-card{height:0;padding-top:var(--ratio-pt,100%)}.flip-card__inner{position:absolute;inset:0}}
.flip-card__inner{
  position:relative;width:100%;height:100%;
  border-radius:1.25rem;box-shadow:0 6px 24px rgba(2,6,23,.12);
  background:var(--jlo-bg);border:1px solid var(--jlo-border);overflow:hidden;
}

/* faces superposées */
.flip-face{
  position:absolute;inset:0;display:grid;
  grid-template-rows:minmax(0,1fr) auto auto;
  opacity:1;pointer-events:auto;z-index:1;
  transition:opacity 420ms ease, transform 420ms ease;
  transform:rotateY(0deg);
}
.flip-face.back{opacity:0;pointer-events:none;z-index:0;transform:rotateY(-35deg)}

/* image adaptative */
.flip-media{margin:0;min-height:0;overflow:hidden}
.flip-media img{width:100%;height:100%;object-fit:cover;display:block}

/* contenu + actions */
.flip-content{padding:1rem;overflow:hidden;display:flex;flex-direction:column;gap:.5rem}
.flip-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:auto;align-self:flex-start}

/* titres et paragraphes avec clamp */
.flip-title{
  margin:0 0 .25rem;
  font-size:clamp(1rem,2vw,1.25rem);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.flip-content p{
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* boutons et liens */
.jlo-btn{appearance:none;border:1px solid var(--jlo-border);background:#fff;padding:.5rem .75rem;border-radius:.75rem;cursor:pointer;font:inherit}
.jlo-btn:hover{border-color:var(--jlo-accent)}
.jlo-btn:focus{outline:3px solid color-mix(in srgb,var(--jlo-accent) 50%, transparent);outline-offset:2px}
.jlo-link{color:var(--jlo-accent);text-decoration:underline;text-underline-offset:2px}

/* bascule (checkbox) */
.flip-toggle:checked + .flip-card .front{opacity:0;pointer-events:none;z-index:0;transform:rotateY(35deg)}
.flip-toggle:checked + .flip-card .back{opacity:1;pointer-events:auto;z-index:1;transform:rotateY(0deg)}

/* cartes statiques */
.flip-card.is-static .flip-face.front{opacity:1!important;pointer-events:auto!important}
.flip-card.is-static .flip-face.back{display:none}

/* accessibilité */
@media(prefers-reduced-motion:reduce){.flip-face{transition:none}}

/* --- Reset listes scoped au module --- */
.jlo-grid .jlo-grid__list{
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

/* Certains thèmes forcent les puces via li ou ::marker */
.jlo-grid .jlo-grid__list > li{
  list-style: none !important;
  position: relative; /* évite certains before absolus globaux */
  padding-left: 0 !important;
  margin: 0 !important;
}

/* Coupe les marqueurs natifs */
.jlo-grid .jlo-grid__list ::marker{
  content: '' !important;
}

/* Coupe les puces injectées via pseudo-éléments globaux */
.jlo-grid .jlo-grid__list > li::before,
.jlo-grid .jlo-grid__list > li::after{
  content: none !important;
  display: none !important;
}

/* Sécurité : si un style global cible "ul li:before" profondément */
.jlo-grid .jlo-grid__item::before,
.jlo-grid .jlo-grid__item::after{
  content: none !important;
  display: none !important;
}

.jlo-btn:focus-visible{
  outline:3px solid color-mix(in srgb, var(--jlo-accent) 60%, transparent);
  outline-offset:2px;
}