/* Style volontairement minimal et neutre.
   L'univers enfantin (couleurs, typo, illustrations) sera défini à l'étape design. */

* { box-sizing: border-box; }

body {
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  margin: 0;
  background:
    radial-gradient(circle at 1px 1px, rgba(161,123,192,.06) 1px, transparent 0) 0 0/24px 24px,
    #fdf7ef;
  color: #3a3340;
  line-height: 1.5;
}
h1, h2, h3 { font-family: 'Fredoka', system-ui, sans-serif; }

.wrap {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

h1 { font-size: 1.5rem; margin: 0 0 12px; }
h2 { font-size: 1.15rem; margin: 24px 0 8px; }

a { color: #e06a49; }

label { display: block; margin: 14px 0; font-weight: 500; }

input, select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cfcfd6;
  border-radius: 10px;
  margin-top: 6px;
  font: inherit;
  background: #fff;
}

button {
  padding: 12px 18px;
  border: 0;
  border-radius: 12px;
  background: #ff8a6b;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
button:hover { background: #f2734f; }

fieldset {
  border: 1px solid #e2e2e8;
  border-radius: 10px;
  margin: 18px 0;
  padding: 12px 14px;
}
legend { font-weight: 600; padding: 0 6px; }

.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.check input { width: auto; margin-top: 5px; }

.err { background: #ffe3e3; color: #a61e1e; padding: 10px 12px; border-radius: 10px; }
.flash { background: #e6fcf5; color: #0b7285; padding: 10px 12px; border-radius: 10px; margin-bottom: 16px; }
.muet { color: #6b6b72; font-size: .92rem; font-weight: 400; }

.badge {
  display: inline-block;
  background: #ffec99;
  color: #664d03;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
}

.liste-creches { list-style: none; padding: 0; }
.liste-creches li { padding: 10px 0; border-bottom: 1px solid #e8e8ee; }

.invite-result { margin-top: 28px; padding-top: 20px; border-top: 1px solid #e2e2e8; }
.lien-box { display: flex; gap: 8px; }
.lien-box input { flex: 1; }
.lien-box button { white-space: nowrap; }

#qrcode { margin-top: 16px; display: inline-block; padding: 12px; background: #fff; border-radius: 10px; }

:focus-visible { outline: 3px solid #4dabf7; outline-offset: 2px; }

/* --- Ajouts CRUD --- */
.btn {
  display: inline-block; padding: 10px 16px; background: #ff8a6b; color: #fff;
  border-radius: 12px; text-decoration: none; font-weight: 600;
}
.btn:hover { background: #f2734f; }
.liste { list-style: none; padding: 0; }
.liste li { padding: 12px 0; border-bottom: 1px solid #e8e8ee; }
.actions { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 14px; }
.actions a { font-size: .95rem; }
.inline { display: inline; }
.ligne-form { display: flex; gap: 8px; margin: 12px 0; }
.ligne-form input { flex: 1; }
.lien-danger, .lien-bouton {
  background: none; border: 0; padding: 0; margin-left: 10px;
  color: #c92a2a; cursor: pointer; font: inherit; text-decoration: underline;
}
.lien-bouton { color: #3b5bdb; }
.zone-danger {
  margin-top: 28px; padding: 16px; border: 1px solid #ffc9c9;
  border-radius: 10px; background: #fff5f5;
}
.zone-danger h2 { margin-top: 0; color: #a61e1e; }
.btn-danger { background: #c92a2a; }
.btn-danger:hover { background: #a61e1e; }

/* --- Journal --- */
.post { background:#fff; border-radius:14px; box-shadow:0 2px 8px rgba(0,0,0,.05); padding:14px 14px 8px; margin-bottom:16px; }
.post-meta { margin-bottom:6px; }
.post-texte { margin:6px 0 10px; white-space:pre-line; }
.post-photo { margin:8px 0; }
.post-photo img { width:100%; height:auto; border-radius:10px; display:block; }
.fav { background:none; border:0; padding:6px 2px; cursor:pointer; font:inherit; color:#6b6b72; font-weight:700; }
.fav.on { color:#e8590c; }
textarea { width:100%; padding:10px 12px; border:1px solid #cfcfd6; border-radius:10px; margin-top:6px; font:inherit; background:#fff; }
.grille-album { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.vignette img { width:100%; height:140px; object-fit:cover; border-radius:10px; display:block; }
.vignette { margin:0; }

/* --- Diagnostic --- */
table.diag { width:100%; border-collapse:collapse; font-size:.9rem; margin:8px 0 16px; }
table.diag th, table.diag td { text-align:left; padding:6px 8px; border-bottom:1px solid #ececf0; }
table.diag th { color:#6b6b72; font-weight:700; }

/* --- Notifications --- */
.push-zone { margin:18px 0; text-align:center; }
#push-activer[disabled] { background:#adb5bd; cursor:default; }

/* --- Bannière notifications --- */
.push-banner {
  background:#fff4e6; border:1px solid #ffd8a8; border-radius:12px;
  padding:14px 16px; margin-bottom:18px;
}
.push-banner p { margin:0 0 10px; }
.push-ctl { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.push-ctl .btn { display:inline-block; }

/* ============================================================
   ESPACE PARENT — "Le Journal des Petits" (épuré, photos star)
   ============================================================ */
:root{
  --jp-paper:#fdf7ef; --jp-card:#fff; --jp-ink:#3a3340; --jp-soft:#8a8090;
  --jp-soleil:#ffc94d; --jp-corail:#ff8a6b; --jp-ciel:#5bc3eb; --jp-menthe:#6fd08c; --jp-prune:#a17bc0;
  --jp-r:18px;
}
body.espace-parent{
  font-family:'Nunito',system-ui,sans-serif;
  background:
    radial-gradient(circle at 1px 1px, rgba(161,123,192,.07) 1px, transparent 0) 0 0/24px 24px,
    var(--jp-paper);
  color:var(--jp-ink);
}
body.espace-parent .wrap{ max-width:480px; padding:0 14px calc(84px + env(safe-area-inset-bottom)); }

/* En-tête */
.jp-topbar{ display:flex; align-items:flex-end; justify-content:space-between; padding:20px 4px 12px; }
.jp-eyebrow{ font-family:'Fredoka'; font-weight:600; color:var(--jp-corail); text-transform:uppercase;
  letter-spacing:.5px; font-size:.74rem; margin:0; }
.jp-title{ font-family:'Fredoka'; font-weight:700; font-size:1.5rem; margin:1px 0 0; line-height:1.1; }
.jp-gestion{ font-family:'Fredoka'; font-weight:500; font-size:.85rem; text-decoration:none;
  color:var(--jp-prune); background:#f3ecfa; padding:6px 12px; border-radius:999px; }

.jp-publier{ display:block; text-align:center; text-decoration:none; font-family:'Fredoka'; font-weight:600;
  background:var(--jp-corail); color:#fff; padding:12px; border-radius:14px; margin:6px 0 18px;
  box-shadow:0 6px 16px rgba(255,138,107,.32); }

.jp-vide{ text-align:center; padding:48px 16px; }
.jp-vide p{ margin:4px 0; }

/* Carte publication */
.jp-post{ background:var(--jp-card); border-radius:var(--jp-r); box-shadow:0 4px 18px rgba(90,74,106,.07);
  padding:14px 14px 16px; margin-bottom:16px; }
.jp-head{ display:flex; align-items:center; gap:11px; margin-bottom:10px; }
.jp-datebadge{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:14px; background:#fff2d6; color:#b26a00; line-height:1; flex:none; }
.jp-datebadge b{ font-family:'Fredoka'; font-size:1.15rem; }
.jp-datebadge span{ font-size:.66rem; text-transform:uppercase; margin-top:2px; }
.jp-who{ font-family:'Fredoka'; font-weight:600; font-size:1rem; }
.jp-who small{ display:block; color:var(--jp-soft); font-weight:400; font-size:.8rem; font-family:'Nunito'; }

.jp-texte{ font-size:1.02rem; line-height:1.5; margin:2px 2px 6px; white-space:pre-line; }
.jp-texte.clamp{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.jp-plus{ border:0; background:none; color:var(--jp-corail); font-family:'Fredoka'; font-weight:600;
  font-size:.92rem; padding:2px 2px 8px; cursor:pointer; }

/* Photo(s) — mosaïque */
.jp-media{ margin-top:6px; }
.jp-mosaic{ display:grid; gap:4px; border-radius:14px; overflow:hidden; }
.jp-mosaic.m-1{ grid-template-columns:1fr; }
.jp-mosaic.m-2, .jp-mosaic.m-3, .jp-mosaic.m-4{ grid-template-columns:1fr 1fr; }
.jp-mosaic.m-3 .jp-tile:first-child{ grid-column:1 / -1; }
.jp-tile{ position:relative; border:0; padding:0; background:none; cursor:pointer; line-height:0; overflow:hidden; }
.jp-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.jp-mosaic.m-1 .jp-tile img{ aspect-ratio:4/3; }
.jp-mosaic:not(.m-1) .jp-tile img{ aspect-ratio:1/1; }
.jp-mosaic.m-3 .jp-tile:first-child img{ aspect-ratio:16/9; }
.jp-more{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(24,20,28,.55); color:#fff; font-family:'Fredoka'; font-weight:600; font-size:1.7rem; }
.jp-albumgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; border-radius:14px; overflow:hidden; }
.jp-albumgrid .jp-tile img{ aspect-ratio:1/1; }

/* Barre de navigation basse */
.jp-nav{ position:fixed; left:50%; transform:translateX(-50%); bottom:0; width:100%; max-width:480px;
  display:flex; justify-content:space-around; align-items:center;
  padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  background:rgba(255,253,250,.95); backdrop-filter:blur(10px); border-top:1px solid #f0e7db; z-index:20; }
.jp-nav a{ display:flex; flex-direction:column; align-items:center; gap:2px; text-decoration:none;
  color:var(--jp-soft); font-family:'Fredoka'; font-weight:500; font-size:.72rem; padding:4px 10px; }
.jp-nav a svg{ width:24px; height:24px; }
.jp-nav a.on{ color:var(--jp-corail); }

/* ============================================================
   GALERIE PLEIN ÉCRAN
   ============================================================ */
.lb[hidden]{ display:none; }
.lb{ position:fixed; inset:0; z-index:100; background:rgba(24,20,28,.95);
  display:flex; flex-direction:column; }
.lb-bar{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px;
  color:#fff; padding-top:calc(14px + env(safe-area-inset-top)); }
.lb-bar .lb-close,.lb-bar .lb-dl{ color:#fff; text-decoration:none; background:rgba(255,255,255,.14);
  width:40px; height:40px; border:0; border-radius:50%; font-size:1.2rem; cursor:pointer;
  display:grid; place-items:center; }
.lb-counter{ font-family:'Fredoka'; font-weight:500; font-size:.95rem; }
.lb-stage{ flex:1; margin:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.lb-img{ max-width:100%; max-height:100%; object-fit:contain; }
.lb-prev,.lb-next{ position:absolute; top:50%; transform:translateY(-50%); border:0; cursor:pointer;
  background:rgba(255,255,255,.12); color:#fff; width:44px; height:44px; border-radius:50%; font-size:1.8rem;
  line-height:1; display:grid; place-items:center; }
.lb-prev{ left:10px; } .lb-next{ right:10px; }
.lb-foot{ padding:16px; padding-bottom:calc(16px + env(safe-area-inset-bottom)); text-align:center; }
.lb-fav{ border:0; cursor:pointer; font-family:'Fredoka'; font-weight:600; font-size:.98rem;
  background:rgba(255,255,255,.14); color:#fff; padding:12px 22px; border-radius:999px; }
.lb-fav[aria-pressed="true"]{ background:var(--jp-corail); }

@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* Entrée de marque (connexion / invitation) */
.jp-marque{ text-align:center; padding:30px 0 6px; }
.jp-marque img{ border-radius:18px; box-shadow:0 8px 20px rgba(255,138,107,.28); }
.jp-marque .jp-eyebrow{ margin-top:10px; }
/* Les boutons/liens gardent leurs styles spécifiques (thème global déjà appliqué). */

/* Titre de publication */
.jp-post-titre{ font-family:'Fredoka'; font-weight:700; font-size:1.18rem; margin:2px 2px 8px; line-height:1.2; }

/* Galerie — "C'est mon enfant" */
.lb-foot{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.lb-mine{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.lb-minebtn{ border:0; cursor:pointer; font-family:'Fredoka'; font-weight:600; font-size:.98rem;
  background:var(--jp-menthe); color:#0b3d1f; padding:11px 20px; border-radius:999px; }
.lb-minechoix{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.lb-minechoix button{ border:0; cursor:pointer; font-family:'Fredoka'; font-weight:600;
  background:rgba(255,255,255,.16); color:#fff; padding:8px 16px; border-radius:999px; }


/* ============ Barre du haut (toutes pages connectées) ============ */
.appbar{ position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between;
  padding:10px 2px; margin-bottom:8px; background:rgba(253,247,239,.92); backdrop-filter:blur(8px); }
.appbar-brand{ display:flex; align-items:center; gap:8px; text-decoration:none; color:#3a3340;
  font-family:'Fredoka'; font-weight:600; font-size:.95rem; }
.appbar-brand img{ border-radius:8px; }
.appbar-acct{ position:relative; }
.appbar-btn{ width:38px; height:38px; border-radius:50%; background:#ff8a6b; color:#fff;
  font-family:'Fredoka'; font-weight:700; border:0; cursor:pointer; padding:0; font-size:1rem; }
.appbar-menu{ position:absolute; right:0; top:46px; background:#fff; border:1px solid #eee;
  border-radius:12px; box-shadow:0 10px 28px rgba(90,74,106,.18); min-width:190px; overflow:hidden; }
.appbar-menu[hidden]{ display:none; }
.appbar-menu a{ display:block; padding:12px 16px; text-decoration:none; color:#3a3340; font-weight:600; }
.appbar-menu a:hover{ background:#fff4e6; }
.appbar-menu .sep{ height:1px; background:#f0e7db; }

/* Édition de publication */
.pf-photos{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pf-photo{ margin:0; font-size:.82rem; }
.pf-photo img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; display:block; }
.pf-photo span{ display:flex; align-items:center; gap:5px; margin-top:4px; }
.pf-photo input{ width:auto; }
.pf-suppr{ margin-top:14px; }
.jp-staff{ margin-top:8px; text-align:right; }
.jp-staff a{ font-size:.9rem; font-weight:600; }

/* ============ Administration (onglet) ============ */
.adm-top{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.adm-top .adm-act{ flex:1; min-width:120px; }

.adm-card{ background:var(--jp-card); border-radius:var(--jp-r); box-shadow:0 4px 18px rgba(90,74,106,.07);
  padding:14px 14px 16px; margin-bottom:14px; }
.adm-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.adm-head h2{ margin:0; font-size:1.15rem; flex:1; }
.adm-toggle{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; flex:none;
  border-radius:50%; border:0; background:#f3ecfa; color:var(--jp-prune); cursor:pointer; }
.adm-toggle svg{ width:18px; height:18px; }

/* Tuiles d'action : taille fixe, grille à colonnes régulières (remplit toute
   la largeur au lieu de laisser des lignes inégales selon le nb d'actions). */
.adm-actions{ display:grid; grid-template-columns:repeat(3, 1fr); grid-auto-rows:1fr; gap:8px; }
.adm-act{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  text-decoration:none; background:#fff4e6; color:#a15c00; border:1px solid #ffe3c2; border-radius:14px;
  padding:12px 6px; min-height:76px; font-family:'Fredoka'; font-weight:600; font-size:.78rem;
  text-align:center; line-height:1.15; }
.adm-act svg{ width:22px; height:22px; flex:none; }
.adm-act:hover{ background:#ffe8cc; }
/* Tuile pleine largeur mise en avant (ex. "Finaliser la mise en service") */
.adm-act.adm-act-large{ grid-column:1 / -1; flex-direction:row; min-height:auto; padding:14px; gap:10px;
  background:var(--jp-soleil); border-color:#ffc94d; color:#6b4900; }
.adm-act.adm-act-large svg{ width:26px; height:26px; }

/* Bouton retour en haut de page */
.jp-topbar-titre{ display:flex; align-items:center; gap:10px; }
.adm-retour{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; flex:none;
  border-radius:50%; background:var(--jp-card); box-shadow:0 2px 8px rgba(90,74,106,.12); color:var(--jp-ink);
  text-decoration:none; }
.adm-retour svg{ width:20px; height:20px; }

/* Onglets Enfants ↔ Sections */
.adm-tabs{ display:flex; gap:8px; margin-bottom:16px; }
.adm-tab{ display:flex; align-items:center; gap:6px; text-decoration:none; flex:1; justify-content:center;
  padding:10px; border-radius:12px; background:var(--jp-card); color:var(--jp-soft); font-family:'Fredoka';
  font-weight:600; font-size:.9rem; box-shadow:0 2px 8px rgba(90,74,106,.07); }
.adm-tab svg{ width:18px; height:18px; }
.adm-tab.on{ background:var(--jp-corail); color:#fff; }

/* Lignes Enfants/Sections (remplacent les <ul class="liste">) */
.adm-row{ display:flex; align-items:center; gap:10px; background:var(--jp-card); border-radius:var(--jp-r);
  box-shadow:0 4px 18px rgba(90,74,106,.07); padding:12px 14px; margin-bottom:10px; }
.adm-row-corps{ flex:1; min-width:0; }
.adm-row-nom{ font-family:'Fredoka'; font-weight:600; }
.adm-row-actions{ display:flex; gap:6px; flex:none; flex-wrap:wrap; justify-content:flex-end; }
.adm-icon-btn{ display:flex; align-items:center; gap:5px; border:0; background:#f4f1f7; color:var(--jp-ink);
  border-radius:10px; padding:7px 10px; font-family:'Fredoka'; font-weight:600; font-size:.78rem;
  text-decoration:none; cursor:pointer; white-space:nowrap; }
.adm-icon-btn svg{ width:16px; height:16px; flex:none; }
.adm-icon-btn:hover{ background:#e9e4f0; }
.adm-icon-btn.adm-icon-danger{ background:#fff0f0; color:#c92a2a; }
.adm-icon-btn.adm-icon-danger:hover{ background:#ffe3e3; }


/* ============ Correctifs galerie ============ */
.lb .lb-close, .lb .lb-dl, .lb .lb-prev, .lb .lb-next{
  display:flex; align-items:center; justify-content:center;
  line-height:1; padding:0; color:#fff; border-radius:50%;
}
.lb .lb-close, .lb .lb-dl{ width:40px; height:40px; background:rgba(255,255,255,.16); font-size:1.25rem; }
.lb .lb-prev, .lb .lb-next{ width:44px; height:44px; background:rgba(255,255,255,.16); font-size:1.9rem; }
.lb .lb-dl{ text-decoration:none; }
.lb .lb-fav{ background:rgba(255,255,255,.16); color:#fff; }
.lb .lb-fav[aria-pressed="true"]{ background:var(--jp-corail); color:#fff; }
.lb .lb-minebtn{ background:var(--jp-menthe); color:#0b3d1f; }
.lb-noms{ color:#fff; font-family:'Fredoka'; font-weight:500; text-align:center; margin:0 0 4px; opacity:.95; }

/* Barre du bas globale : réserver l'espace sous le contenu */
body.with-nav .wrap{ padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
/* Icônes SVG de la galerie */
.lb .lb-close svg, .lb .lb-dl svg{ width:20px; height:20px; }
.lb .lb-prev svg, .lb .lb-next svg{ width:26px; height:26px; }

/* ============================================================
   LE QUOTIDIEN — sélecteur enfant, frise du jour, formulaire
   ============================================================ */
.jp-quot-selecteur{ display:flex; align-items:flex-end; gap:10px; margin-bottom:12px; }
.jp-quot-selecteur label{ flex:1; }

.jp-quot-jours{ display:flex; align-items:center; justify-content:space-between;
  font-family:'Fredoka'; font-weight:600; font-size:.92rem; margin-bottom:14px; }
.jp-quot-jours a{ color:var(--jp-corail); text-decoration:none; }
.jp-quot-jours span{ color:var(--jp-ink); }

.jp-quot-recap{ display:flex; align-items:center; gap:10px; margin:0 0 18px; }
.jp-quot-mot{ background:var(--jp-card); border-radius:var(--jp-r);
  box-shadow:0 4px 18px rgba(90,74,106,.07); padding:14px; margin-bottom:18px; }
.jp-quot-mot textarea{ margin-top:4px; }

/* Chaque entrée reprend la carte "actualité" du journal (.jp-post/.jp-head/
   .jp-datebadge/.jp-who/.jp-post-titre/.jp-texte) — le mot d'un parent se
   distingue juste par une teinte de fond. */
.jp-post.jp-quot-parent{ background:#fff2d6; }
.jp-staff-actions{ display:flex; gap:14px; justify-content:flex-end; align-items:center; }
.jp-staff-actions form{ margin:0; }
.jp-staff-actions .btn-danger{ padding:4px 10px; font-size:.8rem; }

.quot-champ{ margin-bottom:14px; }

/* ============================================================
   PUBLICATION EN COURS — overlay animé (envoi + traitement photos)
   ============================================================ */
/* Positionnement/fond critiques posés en inline dans la vue (indépendants du
   cache du CSS) ; ici uniquement l'habillage décoratif. */
.jp-pub-overlay{ padding:24px; backdrop-filter:blur(2px); }
.jp-pub-carte{ background:var(--jp-card); border-radius:var(--jp-r); box-shadow:0 12px 32px rgba(58,51,64,.28);
  padding:28px 24px; max-width:340px; width:100%; text-align:center; }
.jp-pub-icone{ font-size:2.4rem; line-height:1; margin-bottom:12px; animation:jp-pub-rebond 1.1s ease-in-out infinite; }
@keyframes jp-pub-rebond{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.jp-pub-barre{ height:14px; border-radius:999px; background:var(--jp-paper); overflow:hidden; margin-bottom:12px; }
.jp-pub-fill{ height:100%; width:0%; border-radius:999px; background:var(--jp-corail);
  transition:width .25s ease-out; }
.jp-pub-msg{ font-family:'Fredoka'; font-weight:600; margin:0 0 4px; }
.jp-pub-pct{ color:var(--jp-soft); font-size:.85rem; margin:0; }

/* Vignettes des photos sélectionnées (aperçu dans le formulaire + dans l'overlay).
   Taille/positionnement posés en inline par post_form.js (indépendants du cache
   CSS) ; ici uniquement l'habillage décoratif. */
.jp-pub-vignette img{ width:100%; height:100%; object-fit:cover; display:block; }
.jp-pub-vignette.jp-pub-envoyee::after{ content:'✓'; position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; background:rgba(111,208,140,.85); color:#fff; font-weight:700; }
.jp-pub-retirer:hover{ background:rgba(20,16,24,.85) !important; }