/* GRID */
.pj-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:3rem;
}

/* 👉 4 colonnes desktop / 2 colonnes tablet / 1 colonne mobile */
.pj-grid > .pj-card{
  /* on neutralise la largeur fixe pour laisser flex gérer les colonnes */
  width:auto;
  flex: 0 0 calc((100% - (3 * 3rem)) / 4); /* 4 cols = 3 gaps */
}

/* 2 colonnes */
@media (max-width:1700px){
  .pj-grid > .pj-card{
    flex-basis: calc((100% - 3rem) / 2); /* 2 cols = 1 gap */
  }
}

/* 1 colonne (mobile) */
@media (max-width:720px){
  .pj-grid > .pj-card{
    flex-basis: 100%;
  }
}

.pj-card{
  cursor:pointer;
  border-radius:18px;
  overflow:visible;
}
.pj-card:hover{ transform:translateY(-4px);}

/* Header blanc (titre + classe) */
.pj-header{ margin-left: 46%;background:#ffffff; padding:18px 24px 8px 24px; position:relative; z-index:1; }
.pj-title{ margin:0; color:#013856; font-weight:800; font-size:1.45rem; line-height:1.2; }
.pj-classe{ margin:.2rem 0 0; color:#013856; font-weight:500; opacity:.95; min-height: 50px;}

/* BODY colored block */
.pj-body{ position:relative; color:#fff; padding:2px 14px 5px 14px;}

/* Coin rectangulaire qui moule le texte */
.pj-coin{ float:left; width:150px; height:100px; shape-outside: inset(0); margin:0 16px 10px 0; }

/* Photo posée dans le coin (dépasse légèrement sous le header) */
.pj-photo{ position:absolute; top:-55px; left:15px; width:145px; height:167px; object-fit:cover;box-shadow:0 10px 24px rgba(0,0,0,.25); }

.pj-content p{ margin:.5rem 0; color:#ffffff;font-size:15px;line-height:24px; }

/* MODAL */
.pj-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:9999; }
.pj-modal[aria-hidden="false"]{ display:flex; }
.pj-overlay{ position:absolute; inset:0; background:#002c47f5; }
.pj-dialog{ position:relative; background:transparent; width:min(900px, 92vw); }
.pj-header-inline{ position:absolute; right:12px; z-index:2; top:15px;}
.pj-nav button{ width:36px; height:36px; background: transparent;border: solid 1px white;border-radius: 0;color: white;font-size: 25px;font-weight: 100; cursor:pointer; }
.pj-modal-inner{ max-height:90vh; overflow:auto; }

.pj-text{width:70%}
.pj-popup{ padding:24px; color:#fff; }
.pj-popup-inner{ display:flex;gap:18px; }
.pj-media img, .pj-media iframe{ width:100%; border:0; }
.pj-video {width:219px;box-shadow:0 10px 24px rgba(0,0,0,.25);}
.pj-video iframe{ width:100%;}
.pj-name{margin-bottom:10px; font-size:1.6rem; font-weight:800;color:white; }
.pj-grade{ margin-left:8px; font-weight:400;font-size:25px; }
.pj-quote{padding-top:20px;}
.pj-quote p{ margin:.5rem 0;font-size:15px;line-height:24px; }
.pj-quote:before{content:'';width:100%;height:74%;position:absolute;z-index:-1;left:0;top:62px;}
.pj-media{z-index:20}
.pj-text{z-index:18}

/* ton responsive existant (je garde) */
@media(max-width:720px){
  .pj-card{ width:100%; max-width:520px; }
  .pj-body{ padding:18px; }
  .pj-photo{ top:-48px; left:18px; }
  .pj-title{ font-size:1.3rem; }
  .pj-video iframe{ height:220px; }
}