/* =============================================================================
 * mod_popupbox_j6 — popups natifs paramétrables (alternative légère à EngageBox)
 *
 * API CSS STABLE (volontairement) — toute personnalisation avancée se fait en
 * ciblant ces classes/variables depuis plg_system_csscustomcode ou une surcharge
 * de template, JAMAIS en modifiant ce module.
 *
 *   .pbj6-root           conteneur racine d'une instance (1 par popup)
 *   .pbj6-overlay        fond assombri (classic/sidebar uniquement)
 *   .pbj6-box            la popup elle-même (position/animation selon .pbj6-type-*)
 *   .pbj6-content        wrapper du contenu éditeur (texte/liens/boutons/HTML)
 *   .pbj6-trigger-btn    bouton/lien généré affiché à l'emplacement du module (trigger "click")
 *   .pbj6-trigger-link   modificateur de .pbj6-trigger-btn : rendu en lien texte (footer, mentions légales)
 *   .pbj6-fab-icon       icône du bouton flottant replié (type floatingbutton)
 *   .pbj6-close          bouton de fermeture (.pbj6-close-{position}) — absent si "close_show" est désactivé
 *   .pbj6-btn            bouton CTA réutilisable pour le contenu éditeur
 *   .pbj6-btn-outline    variante contour du bouton CTA
 *
 * Fermeture forcée ("obliger la lecture") : désactiver "Afficher le bouton de
 * fermeture" (close_show=0) retire aussi Échap et le clic sur le fond assombri —
 * seul un élément portant data-pbj6-cmd="close" DANS le contenu éditeur referme
 * alors la popup, ex. :
 *   <button data-pbj6-cmd="close" class="pbj6-btn">J'ai lu et je ferme cette fenêtre</button>
 *
 * Variables par instance (posées sur .pbj6-root[data-pbj6-id]) :
 *   --pbj6-width  --pbj6-height  --pbj6-padding  --pbj6-margin
 *   --pbj6-text  --pbj6-bg  --pbj6-accent  --pbj6-shadow
 *   --pbj6-border-color  --pbj6-border-width  --pbj6-radius
 *   --pbj6-overlay  --pbj6-close-color  --pbj6-close-size
 * ========================================================================== */

.pbj6-root *{box-sizing:border-box}
.pbj6-root{--pbj6-z-overlay:99980;--pbj6-z-box:99990}

/* --- Overlay -------------------------------------------------------------- */
.pbj6-overlay{position:fixed;inset:0;background:var(--pbj6-overlay,rgba(0,0,0,.55));
	z-index:var(--pbj6-z-overlay);opacity:0;visibility:hidden;pointer-events:none;
	transition:opacity .3s ease,visibility 0s linear .3s}
.pbj6-overlay.pbj6-open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s ease}

/* --- Box (base commune aux 8 types) --------------------------------------- *
 * visibility:hidden (pas display:none) est correct ici car la box est
 * position:fixed pour 7 types sur 8 — un élément fixed est hors flux et ne
 * contribue jamais au scroll overflow du document, contrairement à un panneau
 * position:absolute resté dans le flux (piège déjà rencontré sur mod_flatnav_j6,
 * non applicable ici). Seul le type Welcome Mat (dans le flux) gère sa fermeture
 * par hauteur, pas par visibility — voir plus bas. */
.pbj6-box{position:fixed;background:var(--pbj6-bg,#fff);color:var(--pbj6-text,#1c1c1c);
	padding:var(--pbj6-padding,24px);
	border:var(--pbj6-border-width,0) solid var(--pbj6-border-color,transparent);
	border-radius:var(--pbj6-radius,12px);box-shadow:var(--pbj6-shadow,none);
	z-index:var(--pbj6-z-box);opacity:0;visibility:hidden;pointer-events:none;
	max-height:85vh;overflow-y:auto;
	transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s}
.pbj6-box.pbj6-open{opacity:1;visibility:visible;pointer-events:auto;
	transition:opacity .3s ease,transform .3s ease}

.pbj6-content > :first-child{margin-top:0}
.pbj6-content > :last-child{margin-bottom:0}

/* --- Bouton déclencheur généré (trigger "click") -------------------------- */
.pbj6-trigger-btn{display:inline-block;padding:.6em 1.2em;background:var(--pbj6-accent,#016576);
	color:#fff;border:0;border-radius:8px;cursor:pointer;font:inherit;text-decoration:none}
/* État actif piloté uniquement par aria-expanded (jamais :hover — un clic/tap ne
 * déclenche pas mouseleave, le fond resterait visuellement "collé" en survol). */
.pbj6-trigger-btn[aria-expanded="true"]{filter:brightness(.9)}

/* Variante "lien texte" (footer, mentions légales…) — annule le look bouton plein,
 * garde .pbj6-trigger-btn comme seule classe fonctionnelle utilisée par le JS.
 * Sélecteur "a.pbj6-trigger-link" + !important : un thème hôte définit très
 * souvent ses propres règles "a"/"a:hover" dans son footer (ex. template_lm :
 * .lm-footer a{color:#cbd5e1} / .lm-footer a:hover{color:#fff}, plus spécifiques
 * qu'une simple classe) — sans ceci le lien peut devenir illisible (blanc sur
 * blanc) au survol selon le thème dans lequel le module est posé. */
a.pbj6-trigger-link{display:inline;padding:0;background:none;
	color:var(--pbj6-accent,#016576) !important;font-size:.85rem;
	text-decoration:underline;font-weight:400;border-radius:0}
a.pbj6-trigger-link[aria-expanded="true"],
a.pbj6-trigger-link:hover,a.pbj6-trigger-link:focus-visible{
	color:var(--pbj6-accent,#016576) !important;opacity:.7;filter:none}
/* Plusieurs instances "lien texte" côte à côte (ex. mentions légales en pied de
 * page) doivent s'aligner sur une ligne, pas s'empiler comme des modules classiques,
 * et se centrer dans leur colonne plutôt que coller au bord gauche. */
.pbj6-root:has(.pbj6-trigger-link){display:inline}
.lm-footer__col:has(.pbj6-trigger-link){text-align:center}
.pbj6-trigger-link{margin-right:1em}

/* --- Bouton de fermeture --------------------------------------------------- */
.pbj6-close{position:absolute;background:transparent;border:0;cursor:pointer;
	display:flex;align-items:center;justify-content:center;
	width:var(--pbj6-close-size,32px);height:var(--pbj6-close-size,32px);
	color:var(--pbj6-close-color,#333);font-size:1.4rem;line-height:1;z-index:1}
.pbj6-close:hover,.pbj6-close:focus-visible{opacity:.75}
.pbj6-close-inside-top-right{top:8px;right:8px}
.pbj6-close-inside-top-left{top:8px;left:8px}
.pbj6-close-outside-top-right{top:-16px;right:-16px}
.pbj6-close-outside-top-left{top:-16px;left:-16px}

/* --- Boutons CTA réutilisables (API pérenne pour un futur champ CTA structuré) */
.pbj6-btn{display:inline-block;padding:.6em 1.2em;border-radius:var(--pbj6-radius,8px);
	background:var(--pbj6-accent,#016576);color:#fff;text-decoration:none;font-weight:600;
	border:0;cursor:pointer}
.pbj6-btn:hover,.pbj6-btn:focus-visible{filter:brightness(.92)}
.pbj6-btn-outline{background:transparent;color:var(--pbj6-accent,#016576);
	border:2px solid var(--pbj6-accent,#016576)}

/* Lien texte réutilisable pour le contenu éditeur (ex. "En savoir plus" dans une
 * bannière) — mêmes raisons que .pbj6-trigger-link : sélecteur qualifié par
 * l'élément + !important pour rester lisible quel que soit le CSS déjà présent
 * dans la page hôte (ex. .lm-footer a{color:#cbd5e1} de template_lm, bien plus
 * clair que notre fond, et .lm-footer a:hover{color:#fff} qui rendrait un lien
 * blanc sur un fond blanc). Couleur/hover volontairement fixes (pas liés à
 * --pbj6-accent) pour garantir le contraste peu importe la config de l'instance. */
a.pbj6-link{color:#0067B8 !important;text-decoration:underline}
a.pbj6-link:hover,a.pbj6-link:focus-visible{color:#000 !important}

/* =============================================================================
 * Types de box — chacun ne fait que positionner/animer .pbj6-box ; couleurs,
 * padding, ombre, bordure restent partagés (variables ci-dessus).
 * ========================================================================== */

/* 1. Classic — modal centrée */
.pbj6-type-classic .pbj6-box{top:50%;left:50%;width:var(--pbj6-width,90%);max-width:520px;
	height:var(--pbj6-height,auto);transform:translate(-50%,-50%) scale(.95)}
.pbj6-type-classic .pbj6-box.pbj6-open{transform:translate(-50%,-50%) scale(1)}

/* 2. Slide-in — ancrée à un coin, glisse à l'ouverture */
.pbj6-type-slidein .pbj6-box{width:var(--pbj6-width,360px);max-width:calc(100vw - 40px)}
.pbj6-type-slidein.pbj6-anchor-bottom-right .pbj6-box{bottom:var(--pbj6-margin,20px);right:var(--pbj6-margin,20px);transform:translateY(24px)}
.pbj6-type-slidein.pbj6-anchor-bottom-left .pbj6-box{bottom:var(--pbj6-margin,20px);left:var(--pbj6-margin,20px);transform:translateY(24px)}
.pbj6-type-slidein.pbj6-anchor-top-right .pbj6-box{top:var(--pbj6-margin,20px);right:var(--pbj6-margin,20px);transform:translateY(-24px)}
.pbj6-type-slidein.pbj6-anchor-top-left .pbj6-box{top:var(--pbj6-margin,20px);left:var(--pbj6-margin,20px);transform:translateY(-24px)}
.pbj6-type-slidein .pbj6-box.pbj6-open{transform:translateY(0)}

/* 3. Sticky Bar — pleine largeur, haut ou bas. Fond TOUJOURS opaque (--pbj6-bg
 * résolu côté PHP vers une vraie couleur/dégradé, jamais "inherit" — le bug
 * "barre transparente une fois fixed" déjà rencontré ne peut pas se reproduire ici). */
.pbj6-type-stickybar .pbj6-box{left:0;right:0;width:100%;max-width:none;border-radius:0}
.pbj6-type-stickybar.pbj6-bar-top .pbj6-box{top:0;transform:translateY(-100%)}
.pbj6-type-stickybar.pbj6-bar-bottom .pbj6-box{bottom:0;transform:translateY(100%)}
.pbj6-type-stickybar .pbj6-box.pbj6-open{transform:translateY(0)}

/* 4. Sidebar — pleine hauteur, gauche ou droite. max-height:none annule le plafond
 * 85vh de la base : ce type doit occuper toute la hauteur d'écran, pas 85%. */
.pbj6-type-sidebar .pbj6-box{top:0;bottom:0;height:100%;max-height:none;width:var(--pbj6-width,360px);
	max-width:90vw;border-radius:0;overflow-y:auto}
.pbj6-type-sidebar.pbj6-side-left .pbj6-box{left:0;transform:translateX(-100%)}
.pbj6-type-sidebar.pbj6-side-right .pbj6-box{right:0;transform:translateX(100%)}
.pbj6-type-sidebar .pbj6-box.pbj6-open{transform:translateX(0)}

/* 5. Fullscreen — occupe tout le viewport (même raison, max-height:none) */
.pbj6-type-fullscreen .pbj6-box{inset:0;width:100%;height:100%;max-height:none;max-width:none;
	border-radius:0;overflow-y:auto}

/* 6. Welcome Mat — SEUL type dans le flux normal du document (pas position:fixed) :
 * fermé = height:0 (collapse), ouvert = height:var(--pbj6-height,100vh). Le JS
 * replace la racine en tout début de <body> à l'ouverture pour repousser le
 * contenu de la page (voir popupbox.js). */
.pbj6-type-welcomemat{display:block}
/* padding/border forcés à 0 tant que fermé : avec box-sizing:border-box, height:0 ne
 * suffit PAS à masquer tout contenu si un padding/border non nul reste appliqué — le
 * navigateur ne peut pas comprimer sous la somme padding+border, ce qui laisse une
 * fine bande (titre + bouton de fermeture) visible malgré overflow:hidden. */
.pbj6-type-welcomemat .pbj6-box{position:relative;width:100%;height:0;max-height:none;max-width:none;
	border-radius:0;overflow:hidden;padding:0;border-width:0;opacity:1;visibility:visible;
	pointer-events:none;transition:height .4s ease}
.pbj6-type-welcomemat .pbj6-box.pbj6-open{height:var(--pbj6-height,100vh);overflow-y:auto;
	pointer-events:auto;padding:var(--pbj6-padding,24px);border-width:var(--pbj6-border-width,0)}

/* 7. Floating Button — SEUL type dont l'état "fermé" reste visible (petit bouton
 * rond permanent) ; le clic sur .pbj6-fab-icon fait grandir la box en popup complète. */
.pbj6-type-floatingbutton .pbj6-box{width:60px;height:60px;border-radius:50%;padding:0;
	overflow:hidden;opacity:1;visibility:visible;pointer-events:auto;
	transition:width .3s ease,height .3s ease,border-radius .3s ease}
.pbj6-type-floatingbutton.pbj6-anchor-bottom-right .pbj6-box{bottom:var(--pbj6-margin,20px);right:var(--pbj6-margin,20px)}
.pbj6-type-floatingbutton.pbj6-anchor-bottom-left .pbj6-box{bottom:var(--pbj6-margin,20px);left:var(--pbj6-margin,20px)}
.pbj6-type-floatingbutton.pbj6-anchor-top-right .pbj6-box{top:var(--pbj6-margin,20px);right:var(--pbj6-margin,20px)}
.pbj6-type-floatingbutton.pbj6-anchor-top-left .pbj6-box{top:var(--pbj6-margin,20px);left:var(--pbj6-margin,20px)}
.pbj6-type-floatingbutton .pbj6-box.pbj6-open{width:var(--pbj6-width,340px);
	height:var(--pbj6-height,auto);min-height:120px;border-radius:var(--pbj6-radius,12px);
	padding:var(--pbj6-padding,24px)}
.pbj6-fab-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
	cursor:pointer;font-size:1.6rem;color:#fff;transition:opacity .2s ease}
.pbj6-fab-icon::before{content:"\1F4AC"}
.pbj6-type-floatingbutton .pbj6-box.pbj6-open .pbj6-fab-icon{opacity:0;visibility:hidden;pointer-events:none}
.pbj6-type-floatingbutton .pbj6-content{opacity:0;pointer-events:none;transition:opacity .2s ease}
.pbj6-type-floatingbutton .pbj6-box.pbj6-open .pbj6-content{opacity:1;pointer-events:auto}
/* Le bouton de fermeture partage l'espace du petit cercle replié avec .pbj6-fab-icon —
 * sans ceci il resterait visible/cliquable par-dessus, bloquant le clic d'ouverture. */
.pbj6-type-floatingbutton .pbj6-close{opacity:0;pointer-events:none}
.pbj6-type-floatingbutton .pbj6-box.pbj6-open .pbj6-close{opacity:1;pointer-events:auto}

/* 8. Bordering — cadre plein écran (pointer-events:none pour ne jamais bloquer
 * la page) + barre de contenu ancrée en bas (pointer-events:auto, seule zone
 * cliquable). Type le plus novateur, sans précédent EngageBox direct. */
.pbj6-type-bordering .pbj6-box{inset:0;width:100%;height:100%;max-height:none;background:transparent;
	box-shadow:none;border-style:solid;pointer-events:none;padding:0;max-width:none;overflow:visible}
.pbj6-type-bordering .pbj6-content{position:absolute;left:50%;bottom:24px;
	transform:translateX(-50%);pointer-events:auto;background:var(--pbj6-bg,#fff);
	color:var(--pbj6-text,#1c1c1c);padding:var(--pbj6-padding,24px);
	border-radius:var(--pbj6-radius,12px);box-shadow:var(--pbj6-shadow,none);
	max-width:90vw;max-height:70vh;overflow-y:auto}
/* .pbj6-close est un enfant DIRECT de .pbj6-box (pas de .pbj6-content) — sans cette
 * ligne il hérite du pointer-events:none du cadre et devient impossible à cliquer. */
.pbj6-type-bordering .pbj6-close{pointer-events:auto}

@media (prefers-reduced-motion: reduce){
	.pbj6-box,.pbj6-overlay,.pbj6-fab-icon,.pbj6-content{transition:none}
}