/* ==========================================================================
   groupes.css — 👥 LES GROUPES (20/10/2026)

   Page « Groupes » (vues/groupes.php : grille de cartes, filtres, fenêtre
   « Créer un groupe ») et page d'un groupe (vues/groupe.php : en-tête,
   onglets, membres). Espace de noms .grp-* ; couleurs prises dans les
   variables des thèmes (assets/themes.css) : le visuel par défaut d'un
   groupe sans image suit le thème actif. Comportement : assets/groupes.js.
   ========================================================================== */

/* ---- En-tête de page, boutons ------------------------------------------ */
.grp-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}
.grp-tete .bloc-titre{margin:0;min-width:0}
.grp-btn-creer{background:linear-gradient(135deg,var(--or),var(--or-fonce));color:var(--sur-or);border:0;font-weight:800;border-radius:22px}
.grp-btn-creer:disabled{opacity:.5;cursor:not-allowed}
.grp-page button.bouton,.grp-page .bouton{width:auto;margin:0;padding:8px 14px;font-size:.88rem;white-space:nowrap}
.grp-err{min-height:1px;margin:6px 0 0;color:var(--rouge-txt,#e0303a);font-size:.84rem}
.grp-retour{margin:0 0 10px;font-size:.85rem}
.grp-retour a{color:var(--txt-2);text-decoration:none}
.grp-retour a:hover{color:var(--or-txt)}

/* ---- Onglets ------------------------------------------------------------ */
.grp-onglets{display:flex;gap:6px;overflow-x:auto;margin:0 0 12px;padding-bottom:2px;scrollbar-width:thin}
.grp-onglet{flex:none;padding:7px 14px;border:1px solid var(--trait);border-radius:20px;background:var(--fond-3);
  color:var(--txt-1);font-size:.86rem;font-weight:700;text-decoration:none;white-space:nowrap}
.grp-onglet:hover{border-color:var(--or)}
.grp-onglet--on{background:var(--or);border-color:var(--or);color:var(--sur-or)}

/* Onglets « Tous / Mes groupes » en bouton segmenté (20/10/2026) */
.grp-segment{display:inline-flex;gap:0;padding:3px;border:1px solid var(--trait);border-radius:22px;background:var(--fond-2);overflow:visible}
.grp-segment .grp-onglet{border:0;background:none;border-radius:18px;padding:6px 16px}
.grp-segment .grp-onglet--on{background:var(--or);color:var(--sur-or)}

/* ---- Filtres : une ligne de pilules (20/10/2026) -------------------------- */
.grp-filtres{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px}
.grp-recherche{position:relative;flex:1 1 220px;min-width:0;max-width:360px}
.grp-recherche-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:.85rem;opacity:.7;pointer-events:none}
.grp-filtres input[type="search"]{display:block;width:100%;height:38px;box-sizing:border-box;margin:0;padding:0 14px 0 34px;
  border:1px solid var(--trait);border-radius:20px;background:var(--fond-2);color:var(--txt);font:inherit;font-size:.88rem;
  -webkit-appearance:none;appearance:none;outline:none;transition:border-color .15s,box-shadow .15s}
.grp-filtres input[type="search"]::placeholder{color:var(--txt-2)}
.grp-filtres input[type="search"]:focus{border-color:var(--or);box-shadow:0 0 0 3px rgba(212,175,55,.18)}
.grp-filtres input[type="search"]::-webkit-search-cancel-button{cursor:pointer}
.grp-filtres select{flex:0 0 auto;width:auto;height:38px;margin:0;padding:0 30px 0 14px;border:1px solid var(--trait);border-radius:20px;
  background-color:var(--fond-2);color:var(--txt);font:inherit;font-size:.86rem;cursor:pointer}
.grp-filtres select:focus{border-color:var(--or);outline:none}
.grp-filtres-ok{flex:none;width:38px;height:38px;padding:0;margin:0;border:0;border-radius:50%;
  background:linear-gradient(135deg,var(--or),var(--or-fonce));color:var(--sur-or);font-size:.95rem;cursor:pointer}
.grp-filtres-ok:hover{filter:brightness(1.08)}

/* ---- Grille de cartes ------------------------------------------------------ */
.grp-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.grp-carte{display:flex;flex-direction:column;gap:4px;min-width:0;color:inherit;text-decoration:none}
.grp-carte-img{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;border-radius:14px;
  overflow:hidden;background:var(--fond-2);border:1px solid var(--trait);transition:transform .12s,border-color .12s}
.grp-carte:hover .grp-carte-img{transform:translateY(-2px);border-color:var(--or)}
.grp-carte-img img{width:100%;height:100%;object-fit:cover;display:block}
/* Visuel par défaut : dégradé aux couleurs du thème actif */
.grp-carte-img--defaut{background:linear-gradient(135deg,var(--or-fonce),var(--violet,var(--or)))}
.grp-carte-img--defaut span{font-size:2.8rem;opacity:.85}
.grp-carte-vis{position:absolute;top:8px;left:8px;padding:2px 6px;border-radius:10px;background:rgba(0,0,0,.55);font-size:.8rem}
.grp-carte-badge{position:absolute;left:8px;right:8px;bottom:8px;padding:3px 8px;border-radius:10px;background:rgba(0,0,0,.6);
  color:#fff;font-size:.72rem;font-weight:800;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Nouveautés depuis ma dernière visite (057) : pastille rouge en haut à droite */
.grp-carte-nouv{position:absolute;top:8px;right:8px;min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;border-radius:11px;
  display:flex;align-items:center;justify-content:center;background:var(--rouge,#e0303a);color:#fff;font-size:.72rem;font-weight:800;
  box-shadow:0 2px 6px rgba(0,0,0,.4)}
.grp-carte-nom{font-weight:800;font-size:.95rem;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.grp-carte-info{font-size:.78rem;color:var(--txt-2)}
.grp-vide{text-align:center;margin:20px 0}
.grp-plus{text-align:center;margin:16px 0 0}

/* ---- Page d'un groupe : en-tête ------------------------------------------- */
.grp-entete{display:flex;gap:16px;align-items:flex-start;margin:0 0 14px}
.grp-entete-img{flex:none;display:flex;align-items:center;justify-content:center;width:140px;aspect-ratio:1/1;border-radius:16px;
  overflow:hidden;background:var(--fond-2);border:1px solid var(--trait)}
.grp-entete-img img{width:100%;height:100%;object-fit:cover;display:block}
.grp-entete-img.grp-carte-img--defaut span{font-size:3.2rem}
.grp-entete-txt{flex:1;min-width:0}
.grp-nom{margin:0 0 4px;font-size:1.35rem;line-height:1.2;overflow-wrap:anywhere}
.grp-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 8px;font-size:.84rem;color:var(--txt-2)}
.grp-desc{margin:0 0 10px;font-size:.9rem;color:var(--txt-1);overflow-wrap:anywhere}
.grp-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.grp-etat{font-weight:700;font-size:.88rem;color:var(--txt-1)}
.grp-reserve{margin-top:10px}

/* ---- Membres ----------------------------------------------------------------- */
.grp-sous-titre{margin:16px 0 8px;font-size:.95rem}
.grp-liste{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.grp-membre{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid var(--trait);border-radius:12px;background:var(--fond-3)}
.grp-membre-photo{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;background:var(--fond-2)}
.grp-membre-nom{flex:1;min-width:0;font-weight:700;overflow-wrap:anywhere}
.grp-membre-nom a{color:inherit;text-decoration:none}
.grp-membre-nom a:hover{color:var(--or-txt)}
.grp-role{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:10px;border:1px solid var(--trait);font-size:.72rem;font-weight:700;color:var(--txt-2)}
.grp-role--proprio{border-color:var(--or);color:var(--or-txt)}
.grp-membre-actions{display:flex;gap:6px;flex:none}
.grp-menu{position:relative;flex:none}
.grp-menu > summary{list-style:none;cursor:pointer;padding:4px 12px !important}
.grp-menu > summary::-webkit-details-marker{display:none}
.grp-menu-liste{position:absolute;right:0;top:calc(100% + 4px);z-index:2500;max-height:calc(100vh - 16px);overflow-y:auto;box-sizing:border-box;display:flex;flex-direction:column;min-width:220px;padding:6px;
  border:1px solid var(--trait);border-radius:12px;background:var(--fond-3);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.grp-menu-liste button{padding:8px 10px;margin:0;border:0;border-radius:8px;background:none;color:var(--txt);font:inherit;font-size:.86rem;
  text-align:left;cursor:pointer;width:100%}
.grp-menu-liste button:hover{background:var(--fond-2)}
.grp-inviter{margin:0 0 6px}

/* ---- Champs (fenêtres, invitation) ---------------------------------------- */
.grp-champ{display:block;margin:0 0 12px;font-weight:700;font-size:.88rem}
.grp-champ small{font-weight:400;color:var(--txt-2)}
.grp-champ input[type="text"],.grp-champ select,.grp-champ textarea{display:block;width:100%;box-sizing:border-box;margin-top:4px}
.grp-ligne{display:flex;gap:6px;align-items:center;margin-top:4px}
.grp-ligne input{flex:1;min-width:0;margin:0 !important}
.grp-emoji{flex:none;width:40px;height:40px;padding:0;margin:0;border:1px solid var(--trait);border-radius:50%;background:var(--fond-3);font-size:1.15rem;cursor:pointer}
.grp-vis{border:1px solid var(--trait);border-radius:12px;padding:8px 12px}
/* Option « 💸 Bons plans dans ce groupe » (058) — décochée par défaut */
.grp-option{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px;padding:10px 12px;border:1px solid var(--trait);border-radius:12px;
  background:var(--fond-2);font-size:.88rem;cursor:pointer}
.grp-option input{flex:none;margin:3px 0 0;width:18px;height:18px;accent-color:var(--or)}
.grp-vis legend{padding:0 4px}
.grp-vis label{display:flex;gap:8px;align-items:flex-start;margin:6px 0;font-weight:400}

/* ---- Fenêtre (créer, modifier) --------------------------------------------- */
.grp-voile{position:fixed;inset:0;z-index:3000;display:flex;align-items:flex-start;justify-content:center;padding:24px 12px;overflow-y:auto;
  background:var(--voile,rgba(0,0,0,.6))}
.grp-voile[hidden]{display:none}
html.grp-modale-ouverte,html.grp-modale-ouverte body{overflow:hidden}
.grp-modale{position:relative;width:100%;max-width:540px;margin:0;padding:18px 18px 16px;border:1px solid var(--trait);border-radius:16px;
  background:var(--carte,var(--fond-3));box-shadow:0 12px 40px rgba(0,0,0,.45)}
.grp-modale h2{margin:0 36px 10px 0;font-size:1.15rem}
.grp-bandeau{margin:0 0 14px;padding:10px 12px;border-radius:12px;background:var(--fond-2);font-size:.85rem;color:var(--txt-1)}
.grp-fermer{position:absolute;top:10px;right:10px;width:32px;height:32px;padding:0;margin:0;border:0;border-radius:50%;
  background:var(--fond-2);color:var(--txt);cursor:pointer}
.grp-actions .bouton{flex:0 0 auto}
.grp-modale .grp-actions{justify-content:flex-end;margin-top:6px}

/* ---- 📰 Publications (phase 2) ---------------------------------------------- */
.grp-pub-nouvelle{margin:0 0 14px;padding:10px;border:1px solid var(--trait);border-radius:14px;background:var(--fond-3)}
.grp-pub-nouvelle textarea{display:block;width:100%;box-sizing:border-box;margin:0;resize:vertical}
.grp-pub-nouvelle-bas{display:flex;align-items:center;gap:8px;margin-top:8px}
.grp-pub-nouvelle-bas .grp-btn-creer{margin-left:auto}
.grp-pub-joindre{display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.grp-pub-fichier{min-width:0;font-size:.8rem;color:var(--txt-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grp-pubs{display:flex;flex-direction:column;gap:12px}
.grp-pub{padding:12px;border:1px solid var(--trait);border-radius:14px;background:var(--carte,var(--fond-3))}
.grp-pub-tete{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.grp-pub-ava{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;background:var(--fond-2)}
.grp-pub-qui{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.grp-pub-qui a{color:inherit;text-decoration:none}
.grp-pub-qui a:hover{color:var(--or-txt)}
.grp-pub-qui small{color:var(--txt-2);font-size:.75rem}
.grp-pub-outils{display:flex;gap:4px;flex:none}
.grp-pub-outils button{width:32px;height:32px;padding:0;margin:0;border:0;border-radius:50%;background:var(--fond-2);cursor:pointer}
.grp-pub-texte{margin:0 0 8px;font-size:.92rem;overflow-wrap:anywhere}
.grp-pub-photo{margin:0 0 8px;border-radius:12px;overflow:hidden;background:var(--fond-2)}
.grp-pub-photo img{display:block;width:100%;max-height:520px;object-fit:contain}
.grp-pub-bas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px}
.grp-pub-repartition{display:flex;flex-wrap:wrap;gap:8px;font-size:.82rem;color:var(--txt-2)}
.grp-pub-reagir{position:relative;margin-left:auto}
.grp-pub-reagir-btn{padding:5px 12px;margin:0;border:1px solid var(--trait);border-radius:18px;background:var(--fond-2);color:var(--txt-1);
  font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.grp-pub-reagir-btn--on{border-color:var(--or);color:var(--or-txt)}
.grp-pub-palette{position:absolute;right:0;bottom:calc(100% + 6px);z-index:10;display:flex;gap:2px;padding:4px 6px;
  border:1px solid var(--trait);border-radius:22px;background:var(--fond-3);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.grp-pub-palette[hidden]{display:none}
.grp-pub-palette button{width:36px;height:36px;padding:0;margin:0;border:0;border-radius:50%;background:none;font-size:1.25rem;cursor:pointer;
  transition:transform .12s}
.grp-pub-palette button:hover,.grp-pub-palette .grp-on{transform:scale(1.2);background:var(--fond-2)}
.grp-pub-coms{display:flex;flex-direction:column;gap:6px;padding-top:8px;border-top:1px solid var(--trait)}
.grp-com{font-size:.86rem;overflow-wrap:anywhere}
.grp-com a{color:inherit;text-decoration:none}
.grp-com small{color:var(--txt-2)}
.grp-com-suppr{padding:0 4px;margin:0;border:0;background:none;color:var(--txt-2);cursor:pointer}
.grp-com-suppr:hover{color:var(--rouge-txt,#e0303a)}
.grp-com-form{display:flex;align-items:flex-end;gap:6px}
.grp-com-form textarea{flex:1;min-width:0;margin:0;resize:none;min-height:38px}
.grp-com-envoi{flex:none;width:38px;height:38px;padding:0;margin:0;border:0;border-radius:50%;background:var(--or);color:var(--sur-or);font-weight:900;cursor:pointer}
.grp-pub-edition textarea{display:block;width:100%;box-sizing:border-box;margin:0 0 6px}
.grp-pub-edition .grp-actions{justify-content:flex-end;margin-bottom:8px}

/* ---- 💬 Discussion : styles du module des bons plans (.bpd-*, kalipay.css) --- */
.grp-disc{margin-top:4px}

/* ---- 📅 Événements (phase 3) : cartes de « Les bons plans » (.soirees-grille) - */
.grp-evt-tete{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px}
.grp-evt-tete small{color:var(--txt-2);font-size:.8rem}
.grp-evts{margin-bottom:12px}
.grp-passes > summary{cursor:pointer;list-style:none}
.grp-passes > summary::-webkit-details-marker{display:none}
.grp-passes > summary::before{content:'▸ '}
.grp-passes[open] > summary::before{content:'▾ '}

/* ---- 🖼️ Album (phase 3) --------------------------------------------------- */
.grp-album-ajout{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px;padding:10px;border:1px solid var(--trait);
  border-radius:14px;background:var(--fond-3)}
.grp-album-ajout input[type="text"]{flex:1 1 180px;min-width:0;margin:0}
.grp-album-ajout .grp-err{flex-basis:100%;margin:0}
.grp-album{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.grp-album-photo{margin:0;display:flex;flex-direction:column;gap:4px;min-width:0}
.grp-album-ouvrir{display:block;padding:0;margin:0;border:0;border-radius:12px;overflow:hidden;background:var(--fond-2);aspect-ratio:1/1;cursor:zoom-in}
.grp-album-ouvrir img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .2s}
.grp-album-ouvrir:hover img{transform:scale(1.04)}
.grp-album-photo figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;font-size:.78rem;min-width:0}
.grp-album-photo figcaption span{flex-basis:100%;overflow-wrap:anywhere}
.grp-album-photo figcaption small{color:var(--txt-2)}
.grp-visionneuse{align-items:center}
.grp-visionneuse-cadre{position:relative;margin:0;max-width:min(96vw,1000px);display:flex;flex-direction:column;align-items:center;gap:8px}
.grp-visionneuse-cadre img{display:block;max-width:100%;max-height:82vh;border-radius:12px;object-fit:contain;background:#000}
.grp-visionneuse-cadre figcaption{color:#fff;font-size:.9rem;text-align:center}
.grp-visionneuse .grp-fermer{top:-14px;right:-14px;z-index:2}

/* ---- Mobile (390 px) ------------------------------------------------------------ */
@media (max-width:760px){
  .grp-grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .grp-entete{flex-direction:column;align-items:stretch}
  .grp-entete-img{width:100%;max-width:none;aspect-ratio:16/9}
  .grp-recherche{flex-basis:100%;max-width:none}
  .grp-filtres select{flex:1 1 0;min-width:0;font-size:16px}
  .grp-filtres input[type="search"]{font-size:16px}
  .grp-tete .bouton{padding:7px 12px;font-size:.82rem}
  .grp-champ input,.grp-champ select,.grp-champ textarea{font-size:16px}   /* pas de zoom automatique d'iOS */
  .grp-pub-nouvelle textarea,.grp-com-form textarea,.grp-pub-edition textarea{font-size:16px}
  .grp-album{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grp-album-ajout input[type="text"]{font-size:16px}
  .grp-visionneuse .grp-fermer{top:6px;right:6px}
  .grp-voile{padding:10px 8px}
}

/* 🗑️ Zone sensible de la fenêtre « Modifier » : supprimer le groupe (20/10/2026). */
.grp-danger{margin-top:18px;padding:12px;border:1px solid var(--rouge-txt,#e0303a);border-radius:10px;font-size:.84rem}
.grp-danger p{margin:0 0 10px;color:var(--txt-2)}
.grp-danger p b{color:var(--rouge-txt,#e0303a)}
.grp-btn-danger{margin:0;width:100%;background:var(--rouge-txt,#e0303a);color:#fff;border:0}

/* 📷 Plusieurs photos par publication (21/10/2026, migration 061) :
   mosaïque 1 / 2 / 3 / 4, vignettes de la modification, visionneuse ‹ ›. */
.grp-pub-mosaique{display:grid;gap:3px;margin:0 0 8px;border-radius:12px;overflow:hidden;background:var(--fond-2)}
.grp-pub-tuile{display:block;padding:0;border:0;background:none;cursor:zoom-in;min-height:0}
.grp-pub-tuile img{display:block;width:100%;height:100%;object-fit:cover}
.grp-pub-mosaique--1 .grp-pub-tuile img{height:auto;max-height:520px;object-fit:contain}
.grp-pub-mosaique--2{grid-template-columns:1fr 1fr;height:280px}
.grp-pub-mosaique--3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;height:340px}
.grp-pub-mosaique--3 .grp-pub-tuile:first-child{grid-row:1 / span 2}
.grp-pub-mosaique--4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;height:360px}
@media (max-width:560px){
  .grp-pub-mosaique--2{height:200px}
  .grp-pub-mosaique--3{height:260px}
  .grp-pub-mosaique--4{height:280px}
}
.grp-ed-photos{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0}
.grp-ed-vignette{position:relative;width:64px;height:64px;padding:0;border:2px solid var(--trait);border-radius:8px;overflow:hidden;background:none;cursor:pointer}
.grp-ed-vignette img{width:100%;height:100%;object-fit:cover;display:block}
.grp-ed-vignette span{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:.7rem;line-height:18px;text-align:center}
.grp-ed-retiree{border-color:var(--rouge-txt,#e0303a)}
.grp-ed-retiree img{opacity:.3}
.grp-ed-retiree span{background:var(--rouge-txt,#e0303a)}
.grp-vis-fleche{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:42px;height:42px;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}
.grp-vis-fleche--g{left:8px}
.grp-vis-fleche--d{right:8px}

/* 📷 Sélection cumulée (21/10/2026) : vignettes des photos choisies avant envoi. */
.grp-lot{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center}
.grp-lot-vignette{position:relative;width:48px;height:48px;padding:0;border:1px solid var(--trait);border-radius:8px;overflow:hidden;background:var(--fond-2);cursor:pointer}
.grp-lot-vignette img{width:100%;height:100%;object-fit:cover;display:block}
.grp-lot-vignette span{position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:.62rem;line-height:16px;text-align:center}

/* 📷 Netteté (21/10/2026) : une petite photo n'est plus agrandie ni recadrée.
   Mosaïque : la photo garde ses proportions dans sa case, jamais plus grande
   que sa taille réelle, centrée sur fond sombre. Pop-up : taille d'origine,
   bornée à l'écran (96 % × 86 %) pour les grandes résolutions. */
.grp-pub-tuile{display:flex;align-items:center;justify-content:center;background:#0b0b0e;overflow:hidden}
.grp-pub-tuile img,
.grp-pub-mosaique--1 .grp-pub-tuile img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.grp-pub-mosaique--1 .grp-pub-tuile img{max-height:520px}
.grp-vis-pub .grp-visionneuse-cadre{max-width:96vw}
.grp-vis-pub .grp-visionneuse-cadre img{width:auto;height:auto;max-width:96vw;max-height:86vh;max-height:86dvh}