/* =============================================================================
   HZM — Popup+ (façade)
   -----------------------------------------------------------------------------
   Toutes les fenêtres partagent cette feuille. Ce qui change d'un popup à
   l'autre passe par des variables posées sur l'enveloppe, au rendu.
   ========================================================================== */

.hzm-popup {
	--pp-w: 640px;
	--pp-marge: 24px;
	--pp-rayon: 16px;
	--pp-bg: #ffffff;
	--pp-ombre: 0 26px 70px rgba(12, 16, 28, .34);
	--pp-voile: rgba(11, 15, 25, .68);
	--pp-flou: 0px;
	--pp-x-bg: transparent;
	--pp-x-taille: 36px;

	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
}

.hzm-popup.is-monte { display: block; }
.hzm-popup[hidden]  { display: none; }

/* -----------------------------------------------------------------------------
   Voile
   -------------------------------------------------------------------------- */
.hzm-popup__voile {
	position: absolute;
	inset: 0;
	background: var(--pp-voile);
	opacity: 0;
	transition: opacity .28s ease;
}

.hzm-popup.is-ouvert .hzm-popup__voile { opacity: 1; }

.hzm-popup--sans-voile .hzm-popup__voile {
	background: none;
	pointer-events: none;
}

/* Le flou d'arrière-plan ne s'applique qu'une fois la fenêtre ouverte :
   l'animer depuis zéro coûterait un repeint de toute la page à chaque image. */
.hzm-popup.is-ouvert .hzm-popup__voile {
	-webkit-backdrop-filter: blur(var(--pp-flou));
	backdrop-filter: blur(var(--pp-flou));
}

/* -----------------------------------------------------------------------------
   Zone de placement
   -----------------------------------------------------------------------------
   Sans voile, la zone laisse passer les clics vers la page ; seule la fenêtre
   elle-même reste cliquable.
   -------------------------------------------------------------------------- */
.hzm-popup__zone {
	position: absolute;
	inset: 0;
	display: flex;
	padding: var(--pp-marge);
	/* Pas de défilement ici : la fenêtre se contraint elle-même et confie le
	   défilement à son contenu. Deux zones défilantes imbriquées se disputent
	   la molette, et sur mobile la fenêtre échappe au doigt. */
	overflow: hidden;
}

.hzm-popup--sans-voile .hzm-popup__zone { pointer-events: none; }
.hzm-popup--sans-voile .hzm-popup__boite { pointer-events: auto; }

.hzm-popup--x-left   .hzm-popup__zone { justify-content: flex-start; }
.hzm-popup--x-center .hzm-popup__zone { justify-content: center; }
.hzm-popup--x-right  .hzm-popup__zone { justify-content: flex-end; }

.hzm-popup--y-top    .hzm-popup__zone { align-items: flex-start; }
.hzm-popup--y-center .hzm-popup__zone { align-items: center; }
.hzm-popup--y-bottom .hzm-popup__zone { align-items: flex-end; }

/* -----------------------------------------------------------------------------
   La fenêtre
   -------------------------------------------------------------------------- */
.hzm-popup__boite {
	position: relative;
	/* « flex: none » et « min-width: 0 » ne sont pas décoratifs : dans une zone
	   flexible, un élément refuse par défaut de descendre sous la largeur
	   minimale de son contenu, et peut aussi s'étirer. Une largeur sur mesure
	   posée ici serait alors ignorée sans que rien ne le signale. */
	flex: none;
	width: var(--pp-w);
	min-width: 0;
	max-width: 100%;
	background: var(--pp-bg);
	border-radius: var(--pp-rayon);
	box-shadow: var(--pp-ombre);
	overflow: hidden;
	opacity: 0;
	transition: opacity .3s ease, transform .34s cubic-bezier(.2, .8, .28, 1);
	will-change: opacity, transform;
}

.hzm-popup.is-ouvert .hzm-popup__boite {
	opacity: 1;
	transform: none;
}

/* Le contenu déborde volontairement : plus de découpe, donc plus de défilement
   interne non plus — les deux ne peuvent pas coexister. */
.hzm-popup--debord .hzm-popup__boite,
.hzm-popup--debord .hzm-popup__contenu { overflow: visible; }

/* Hauteurs.
   Toutes les variantes sont bornées et empilent leur contenu en colonne : c'est
   ce qui donne au bloc de contenu une hauteur à laquelle se contraindre. Sans
   cette borne, un contenu long pousse la fenêtre hors de l'écran au lieu de
   défiler. */
.hzm-popup__boite {
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - var(--pp-marge) * 2);
	max-height: calc(100dvh - var(--pp-marge) * 2);
}

.hzm-popup--h-full .hzm-popup__boite {
	height: calc(100vh - var(--pp-marge) * 2);
	height: calc(100dvh - var(--pp-marge) * 2);
}

.hzm-popup--h-custom .hzm-popup__boite {
	height: var(--pp-h, auto);
}

/* -----------------------------------------------------------------------------
   Contenu
   -----------------------------------------------------------------------------
   Le bloc qui défile. « min-height: 0 » n'est pas décoratif : sans lui, un
   élément flexible refuse de descendre sous la taille de son contenu et la
   barre de défilement n'apparaît jamais.

   Les deux ombres de bord sont peintes en fond avec « background-attachment:
   local » : celle du haut reste collée à la fenêtre et ne se montre qu'une fois
   le contenu poussé vers le haut, celle du bas disparaît en fin de course. Rien
   à calculer en JavaScript.
   -------------------------------------------------------------------------- */
.hzm-popup__contenu {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: rgba(120, 130, 150, .42) transparent;

	background:
		linear-gradient(var(--pp-bg, #fff) 30%, transparent) top / 100% 26px no-repeat,
		linear-gradient(transparent, var(--pp-bg, #fff) 70%) bottom / 100% 26px no-repeat,
		radial-gradient(farthest-side at 50% 0, rgba(14, 20, 34, .14), rgba(14, 20, 34, 0)) top / 100% 12px no-repeat,
		radial-gradient(farthest-side at 50% 100%, rgba(14, 20, 34, .14), rgba(14, 20, 34, 0)) bottom / 100% 12px no-repeat;
	background-attachment: local, local, scroll, scroll;
}

/* Contenu débordant volontairement : plus de découpe, donc plus de défilement
   interne — et les ombres de bord n'ont plus lieu d'être. */
.hzm-popup--debord .hzm-popup__contenu { background: none; }

.hzm-popup__contenu::-webkit-scrollbar { width: 8px; }
.hzm-popup__contenu::-webkit-scrollbar-track { background: transparent; }
.hzm-popup__contenu::-webkit-scrollbar-thumb {
	background: rgba(120, 130, 150, .38);
	border-radius: 8px;
}
.hzm-popup__contenu::-webkit-scrollbar-thumb:hover { background: rgba(120, 130, 150, .62); }

/* WPBakery pose ses propres marges de rangée ; on neutralise seulement celles
   qui creuseraient un vide en haut et en bas de la fenêtre. */
.hzm-popup__contenu > .vc_row:first-child { margin-top: 0; }
.hzm-popup__contenu > .vc_row:last-child { margin-bottom: 0; }
.hzm-popup__contenu p:last-child { margin-bottom: 0; }

/* -----------------------------------------------------------------------------
   Bouton de fermeture
   -------------------------------------------------------------------------- */
.hzm-popup__fermer {
	position: absolute;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--pp-x-taille);
	height: var(--pp-x-taille);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--pp-x-bg);
	color: var(--pp-x-c, #1f2430);
	font-size: calc(var(--pp-x-taille) * .52);
	line-height: 1;
	cursor: pointer;
	transition: transform .18s ease, opacity .18s ease;
	opacity: .82;
}

.hzm-popup__fermer:hover,
.hzm-popup__fermer:focus-visible {
	opacity: 1;
	transform: rotate(90deg);
	outline: none;
}

.hzm-popup__fermer i { pointer-events: none; }

/* Dedans : la croix se pose dans l'angle de la fenêtre. */
.hzm-popup--xright-inside .hzm-popup__fermer { top: 10px; right: 10px; }
.hzm-popup--xleft-inside  .hzm-popup__fermer { top: 10px; left: 10px; }

/* Dehors : elle sort de la boîte, ce qui suppose de lever la découpe. */
.hzm-popup--xright-outside .hzm-popup__boite,
.hzm-popup--xleft-outside  .hzm-popup__boite { overflow: visible; }

.hzm-popup--xright-outside .hzm-popup__fermer {
	top: calc(var(--pp-x-taille) * -1 - 8px);
	right: 0;
}
.hzm-popup--xleft-outside .hzm-popup__fermer {
	top: calc(var(--pp-x-taille) * -1 - 8px);
	left: 0;
}

/* Hors de la fenêtre, la croix se détache sur le voile : le repli passe au
   clair. C'est bien un repli — la variable n'est écrite que si une couleur a
   réellement été choisie, sinon la règle ne servirait jamais. */
.hzm-popup--xright-outside .hzm-popup__fermer,
.hzm-popup--xleft-outside .hzm-popup__fermer { color: var(--pp-x-c, #ffffff); }

/* -----------------------------------------------------------------------------
   Animations d'ouverture
   -----------------------------------------------------------------------------
   L'état « au repos » décrit d'où la fenêtre arrive ; « is-ouvert » la ramène à
   sa place. Une seule transition, pas de keyframes : la fermeture rejoue le
   mouvement à l'envers sans code supplémentaire.
   -------------------------------------------------------------------------- */
.hzm-popup--anim-none .hzm-popup__boite { transition: none; opacity: 1; }

.hzm-popup--anim-zoom      .hzm-popup__boite { transform: scale(.92); }
.hzm-popup--anim-zoom-out  .hzm-popup__boite { transform: scale(1.06); }
.hzm-popup--anim-up        .hzm-popup__boite { transform: translateY(34px); }
.hzm-popup--anim-down      .hzm-popup__boite { transform: translateY(-34px); }
.hzm-popup--anim-left      .hzm-popup__boite { transform: translateX(-34px); }
.hzm-popup--anim-right     .hzm-popup__boite { transform: translateX(34px); }

.hzm-popup--anim-slide-left  .hzm-popup__boite { transform: translateX(-104%); opacity: 1; }
.hzm-popup--anim-slide-right .hzm-popup__boite { transform: translateX(104%);  opacity: 1; }
.hzm-popup--anim-slide-up    .hzm-popup__boite { transform: translateY(104%);  opacity: 1; }
.hzm-popup--anim-slide-down  .hzm-popup__boite { transform: translateY(-104%); opacity: 1; }

/* -----------------------------------------------------------------------------
   Verrou de défilement
   -----------------------------------------------------------------------------
   La largeur de la barre de défilement est rendue en marge : sans ça, la page
   s'élargit d'une dizaine de pixels à l'ouverture et tout saute.
   -------------------------------------------------------------------------- */
html.hzm-popup-verrou body {
	overflow: hidden !important;
	padding-right: var(--hzm-popup-gouttiere, 0px);
}

/* -----------------------------------------------------------------------------
   Écrans étroits
   -----------------------------------------------------------------------------
   Sous 640 px, une fenêtre de 860 px n'a plus de sens : toutes les largeurs se
   ramènent à l'écran, et la marge se resserre.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.hzm-popup { --pp-marge: min(var(--pp-marge), 14px); }
	.hzm-popup__boite { width: 100%; }
	.hzm-popup--xright-outside .hzm-popup__fermer,
	.hzm-popup--xleft-outside .hzm-popup__fermer {
		top: 8px;
		right: 8px;
		left: auto;
	}
	.hzm-popup--xright-outside .hzm-popup__boite,
	.hzm-popup--xleft-outside .hzm-popup__boite { overflow: hidden; }
}

/* -----------------------------------------------------------------------------
   Mouvement réduit : la préférence système l'emporte sur le réglage.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.hzm-popup__boite,
	.hzm-popup__voile { transition-duration: .01ms !important; }
	.hzm-popup__boite { transform: none !important; }
}

/* =============================================================================
   Bouton popup
   -----------------------------------------------------------------------------
   Les couleurs ne sont pas déclarées ici : elles arrivent en variables quand
   elles ont été choisies, et chaque règle porte son propre repli. Poser une
   valeur par défaut au sommet rendrait ces replis inatteignables.
   ========================================================================== */

.hzm-ppb-w { display: block; }
.hzm-ppb-w--left   { text-align: left; }
.hzm-ppb-w--center { text-align: center; }
.hzm-ppb-w--right  { text-align: right; }
.hzm-ppb-w--full .hzm-ppb { display: flex; width: 100%; }

.hzm-ppb {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ppb-gap, 10px);
	width: var(--ppb-w, auto);
	padding: var(--ppb-pv, 14px) var(--ppb-ph, 30px);
	border: var(--ppb-bord, 1px) solid var(--ppb-bd, transparent);
	border-radius: var(--ppb-rayon, 10px);
	background: var(--ppb-bg, #0072FF);
	color: var(--ppb-txt, #ffffff);
	font-family: inherit;
	font-size: var(--ppb-fs, 15px);
	font-weight: var(--ppb-fw, 700);
	letter-spacing: var(--ppb-ls, 0);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	overflow: hidden;
	transition: background .22s ease, color .22s ease, border-color .22s ease,
		box-shadow .24s ease, transform .18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.hzm-ppb:focus-visible {
	outline: 2px solid var(--ppb-bg, #0072FF);
	outline-offset: 3px;
}

.hzm-ppb__i { font-size: 1.06em; line-height: 1; transition: transform .22s ease; }
.hzm-ppb__fleche { flex: none; display: block; }
.hzm-ppb.hzm-ppb--ico-seule { padding: var(--ppb-pv, 14px); aspect-ratio: 1; }

/* --- Tailles ---------------------------------------------------------------
   Rien ici : espaces intérieurs et taille du texte sont calculés au rendu, à
   partir de la taille choisie puis des champs de l'onglet Style. Les reposer en
   CSS créerait une seconde source, et c'est toujours la mauvaise qui gagne.
   -------------------------------------------------------------------------- */

/* --- Formes --------------------------------------------------------------- */
.hzm-ppb.hzm-ppb--fsquare { border-radius: 0; }
.hzm-ppb.hzm-ppb--fpill   { border-radius: 999px; }

/* --- Casse ---------------------------------------------------------------- */
.hzm-ppb.hzm-ppb--case-upper { text-transform: uppercase; letter-spacing: var(--ppb-ls, .04em); }
.hzm-ppb.hzm-ppb--case-cap   { text-transform: capitalize; }

/* --- Apparences ----------------------------------------------------------- */
.hzm-ppb.hzm-ppb--grad {
	background: linear-gradient(135deg, var(--ppb-bg, #0072FF), var(--ppb-bg2, #8200F4));
}

.hzm-ppb.hzm-ppb--brand {
	background: linear-gradient(90deg, #0072FF, #8200F4, #FF6C5F);
	background-size: 180% 100%;
	color: var(--ppb-txt, #fff);
	transition: background-position .5s ease, box-shadow .24s ease, transform .18s ease;
}
.hzm-ppb.hzm-ppb--brand:hover { background-position: 100% 0; }

.hzm-ppb.hzm-ppb.hzm-ppb--outline {
	background: transparent;
	border-color: var(--ppb-bd, var(--ppb-bg, #0072FF));
	color: var(--ppb-txt, var(--ppb-bg, #0072FF));
}

.hzm-ppb.hzm-ppb.hzm-ppb--text {
	background: transparent;
	color: var(--ppb-txt, var(--ppb-bg, #0072FF));
}

.hzm-ppb.hzm-ppb.hzm-ppb--link {
	background: transparent;
	border-radius: 0;
	color: var(--ppb-txt, var(--ppb-bg, #0072FF));
	overflow: visible;
}

/* Le soulignement se dessine plutôt que de venir de « text-decoration » :
   il peut ainsi s'animer au survol. */
.hzm-ppb.hzm-ppb--link::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: currentColor;
	transform: scaleX(1);
	transform-origin: left;
	transition: transform .28s ease;
}
.hzm-ppb.hzm-ppb--link:hover::after { transform: scaleX(.32); }

.hzm-ppb.hzm-ppb.hzm-ppb--glass {
	background: rgba(0, 114, 255, .16);
	background: color-mix(in srgb, var(--ppb-bg, #0072FF) 18%, transparent);
	border-color: rgba(0, 114, 255, .32);
	border-color: color-mix(in srgb, var(--ppb-bg, #0072FF) 34%, transparent);
	color: var(--ppb-txt, var(--ppb-bg, #0072FF));
	-webkit-backdrop-filter: blur(9px);
	backdrop-filter: blur(9px);
}

/* Fond choisi sur une apparence qui n'en pose pas : il est peint. Le sélecteur
   triple la classe pour tenir face aux styles de bouton de WPBakery et de
   WooCommerce, qui montent facilement à deux crans. */
.hzm-ppb.hzm-ppb.hzm-ppb--peint {
	background: var(--ppb-bg);
	border-radius: var(--ppb-rayon, 10px);
}
.hzm-ppb.hzm-ppb.hzm-ppb--peint.hzm-ppb--fpill   { border-radius: 999px; }
.hzm-ppb.hzm-ppb.hzm-ppb--peint.hzm-ppb--fsquare { border-radius: 0; }

/* Le soulignement du « Lien » n'a plus de sens sur un fond peint : il barrerait
   le bas de la pastille. */
.hzm-ppb.hzm-ppb--peint.hzm-ppb--link::after { display: none; }
.hzm-ppb.hzm-ppb--peint.hzm-ppb--link { overflow: hidden; }

/* --- Ombres --------------------------------------------------------------- */
.hzm-ppb.hzm-ppb--sh-s     { box-shadow: 0 3px 10px rgba(12, 16, 28, .14); }
.hzm-ppb.hzm-ppb--sh-m     { box-shadow: 0 8px 22px rgba(12, 16, 28, .22); }
.hzm-ppb.hzm-ppb--sh-color { box-shadow: 0 8px 22px rgba(0, 114, 255, .38); }
.hzm-ppb.hzm-ppb--sh-color { box-shadow: 0 8px 22px color-mix(in srgb, var(--ppb-bg, #0072FF) 42%, transparent); }

/* Contour choisi : il s'applique à toutes les apparences, y compris celles qui
   n'en posent pas. Quatre crans, pour passer au-dessus des apparences. */
.hzm-ppb.hzm-ppb.hzm-ppb.hzm-ppb--bdc { border-color: var(--ppb-bd); }

/* --- Effets au survol ------------------------------------------------------
   Hiérarchie des poids, à respecter en ajoutant une règle :
     1 cran  — la base ;
     3 crans — apparences, formes, fond peint ;
     4 crans — contour choisi ;
     5 crans — tout ce qui joue au survol.
   Les états de survol doivent passer au-dessus des apparences, sinon la couleur
   choisie reste sans effet — ce qui est arrivé dès que les apparences sont
   montées à trois crans.
   -------------------------------------------------------------------------- */
.hzm-ppb--hv-lift:hover  { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(12, 16, 28, .24); }
.hzm-ppb--hv-zoom:hover  { transform: scale(1.04); }
.hzm-ppb--hv-dark:hover  { filter: brightness(.88); }
.hzm-ppb--hv-light:hover { filter: brightness(1.12); }

.hzm-ppb.hzm-ppb.hzm-ppb.hzm-ppb.hzm-ppb--hv-invert:hover {
	background: var(--ppb-bg-h, transparent);
	border-color: var(--ppb-bd-h, var(--ppb-bg, #0072FF));
	color: var(--ppb-txt-h, var(--ppb-bg, #0072FF));
}
.hzm-ppb.hzm-ppb.hzm-ppb.hzm-ppb--outline.hzm-ppb--hv-invert:hover {
	background: var(--ppb-bg-h, var(--ppb-bg, #0072FF));
	color: var(--ppb-txt-h, #ffffff);
}

/* Balayage : un voile part de la gauche et recouvre le bouton. */
.hzm-ppb--hv-sweep::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--ppb-bg-h, rgba(0, 0, 0, .18));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .34s cubic-bezier(.2, .8, .28, 1);
}
.hzm-ppb--hv-sweep:hover::before { transform: scaleX(1); }
.hzm-ppb--hv-sweep .hzm-ppb__t,
.hzm-ppb--hv-sweep .hzm-ppb__i { position: relative; z-index: 1; }
.hzm-ppb.hzm-ppb.hzm-ppb.hzm-ppb.hzm-ppb--hv-sweep:hover { color: var(--ppb-txt-h, #ffffff); }

.hzm-ppb--hv-push:hover .hzm-ppb__i { transform: translateX(4px); }

/* Une couleur de survol choisie s'applique quel que soit l'effet retenu. La
   classe n'est posée que si au moins une des trois a été choisie : un repli
   vide rendrait la propriété invalide et effacerait le fond du bouton. */
.hzm-ppb.hzm-ppb.hzm-ppb.hzm-ppb.hzm-ppb--hvc:hover {
	background-color: var(--ppb-bg-h, var(--ppb-bg, #0072FF));
	color: var(--ppb-txt-h, var(--ppb-txt, #ffffff));
	border-color: var(--ppb-bd-h, var(--ppb-bd, transparent));
}

/* Une apparence sans fond garde le sien au survol, sauf si une couleur de fond
   de survol a été choisie : sinon « Texte seul » se remplirait au passage de la
   souris alors qu'on n'a réglé qu'une couleur de texte. */
.hzm-ppb.hzm-ppb.hzm-ppb.hzm-ppb.hzm-ppb--text.hzm-ppb--hvc:hover,
.hzm-ppb.hzm-ppb.hzm-ppb.hzm-ppb.hzm-ppb--link.hzm-ppb--hvc:hover,
.hzm-ppb.hzm-ppb.hzm-ppb.hzm-ppb.hzm-ppb--outline.hzm-ppb--hvc:hover {
	background-color: var(--ppb-bg-h, transparent);
}
.hzm-ppb.hzm-ppb.hzm-ppb.hzm-ppb.hzm-ppb--outline.hzm-ppb--hvc:hover,
.hzm-ppb.hzm-ppb.hzm-ppb.hzm-ppb.hzm-ppb--text.hzm-ppb--hvc:hover,
.hzm-ppb.hzm-ppb.hzm-ppb.hzm-ppb.hzm-ppb--link.hzm-ppb--hvc:hover {
	color: var(--ppb-txt-h, var(--ppb-txt, var(--ppb-bg, #0072FF)));
}

/* --- Signalement dans l'éditeur -------------------------------------------- */
.hzm-ppb-vide {
	margin: 0;
	padding: 12px 16px;
	border: 1px dashed #d8a300;
	border-radius: 8px;
	background: #fff8e5;
	color: #8a6100;
	font-size: 13px;
}

/* =============================================================================
   Lanceur — le bouton flottant qui ouvre un popup
   -----------------------------------------------------------------------------
   Rendu comme un déclencheur ordinaire. Le dock unifié, s'il est actif, le
   repère, l'escamote et rejoue son icône dans sa barre — ce fichier n'a rien à
   savoir de lui. Dock éteint, le bouton reste ici, à sa place.
   ========================================================================== */

.hzm-popup-lanceur {
	--lc-taille: 54px;
	--lc-dx: 20px;
	--lc-dy: 20px;
	--lc-bg: linear-gradient(135deg, #0072FF, #8200F4);
	--lc-c: #ffffff;

	position: fixed;
	z-index: 99990;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: var(--lc-taille);
	height: var(--lc-taille);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--lc-bg);
	color: var(--lc-c);
	font-family: Arial, sans-serif;
	font-size: calc(var(--lc-taille) * .4);
	line-height: 1;
	box-shadow: 0 8px 22px rgba(12, 16, 28, .26);
	cursor: pointer;
	transition: transform .2s cubic-bezier(.2, .8, .28, 1), box-shadow .2s ease,
		opacity .28s ease, background .22s ease;
}

.hzm-popup-lanceur:hover {
	transform: translateY(-3px) scale(1.04);
	box-shadow: 0 14px 30px rgba(12, 16, 28, .32);
	background: var(--lc-bg-h, var(--lc-bg));
}

.hzm-popup-lanceur:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Formes. La pilule s'impose dès qu'un texte accompagne l'icône : un rond ne
   peut pas contenir deux mots. */
.hzm-popup-lanceur--carre  { border-radius: 16px; }
.hzm-popup-lanceur--pilule { border-radius: 999px; }

.hzm-popup-lanceur--texte {
	width: auto;
	padding: 0 calc(var(--lc-taille) * .38);
	border-radius: 999px;
	font-size: calc(var(--lc-taille) * .3);
}
.hzm-popup-lanceur--texte .hzm-popup-lanceur__t { font-weight: 700; white-space: nowrap; }

/* Coins. En bas, la variable d'ancrage du thème décale le bouton au-dessus
   d'une barre fixée — sans elle, il passerait dessous. */
.hzm-popup-lanceur--tl { top: var(--lc-dy); left: var(--lc-dx); }
.hzm-popup-lanceur--tr { top: var(--lc-dy); right: var(--lc-dx); }
.hzm-popup-lanceur--ml { top: 50%; left: var(--lc-dx); transform: translateY(-50%); }
.hzm-popup-lanceur--mr { top: 50%; right: var(--lc-dx); transform: translateY(-50%); }
.hzm-popup-lanceur--bl { bottom: calc(var(--lc-dy) + var(--htm-bas-occupe, 0px)); left: var(--lc-dx); }
.hzm-popup-lanceur--br { bottom: calc(var(--lc-dy) + var(--htm-bas-occupe, 0px)); right: var(--lc-dx); }

/* Le survol des positions centrées doit conserver le recentrage vertical,
   sinon le bouton saute d'une demi-hauteur au passage de la souris. */
.hzm-popup-lanceur--ml:hover,
.hzm-popup-lanceur--mr:hover { transform: translateY(-50%) scale(1.04); }

/* Apparition différée. */
.hzm-popup-lanceur.is-cache {
	opacity: 0;
	pointer-events: none;
	transform: translateY(14px) scale(.9);
}
.hzm-popup-lanceur--ml.is-cache,
.hzm-popup-lanceur--mr.is-cache { transform: translateY(-50%) scale(.9); }

.hzm-popup-lanceur--sans-mobile { display: inline-flex; }

@media (max-width: 640px) {
	.hzm-popup-lanceur--sans-mobile { display: none; }
}

/* Point d'appel : il pulse tant que le popup n'a pas été ouvert. */
.hzm-popup-lanceur__point {
	position: absolute;
	top: 8%;
	right: 8%;
	width: 11px;
	height: 11px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #FF6C5F;
}

.hzm-popup-lanceur__point::after {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	background: #FF6C5F;
	animation: hzm-lc-pulse 2s ease-out infinite;
}

.hzm-popup-lanceur.is-vu .hzm-popup-lanceur__point { display: none; }

@keyframes hzm-lc-pulse {
	0%   { transform: scale(1);   opacity: .7; }
	70%  { transform: scale(2.4); opacity: 0; }
	100% { transform: scale(2.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.hzm-popup-lanceur__point::after { animation: none; }
	.hzm-popup-lanceur { transition-duration: .01ms; }
}

/* -----------------------------------------------------------------------------
   Le lanceur, une fois adopté par le dock
   -----------------------------------------------------------------------------
   Le dock recopie le contenu du déclencheur tel quel : l'icône arrive, mais le
   texte et le point d'appel aussi. Le texte n'a pas sa place dans une pastille
   de quarante pixels ; le point, si — c'est même toute la raison d'être du
   signalement. On le repositionne, sans toucher au dock.
   -------------------------------------------------------------------------- */

/* Le texte du lanceur, dans le dock : révélé au survol.

   Première idée écartée : une étiquette flottant au-dessus de la pastille. La
   barre du dock est en « overflow: hidden » — c'est ce qui lui permet de se
   déplier en animant sa largeur — et elle aurait coupé l'étiquette net. Plutôt
   que de lever cette découpe, au risque de déranger l'animation des autres
   modules, la pastille s'allonge sur place : tout reste dans la barre, qui a la
   largeur pour ça.

   Le ciblage par « :has » ne vise que les pastilles qui portent un texte. Là où
   il n'est pas reconnu, le texte reste simplement replié — le dock garde
   l'aspect qu'il avait, sans rien de cassé. */
.htm-dock-item .hzm-popup-lanceur__t {
	display: block;
	max-width: 0;
	overflow: hidden;
	margin-left: 0;
	font-family: Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	opacity: 0;
	transition: max-width .3s cubic-bezier(.2, .8, .28, 1), opacity .2s ease, margin-left .3s ease;
}

.htm-dock-item:has(.hzm-popup-lanceur__t) {
	width: auto;
	min-width: var(--dk-icone, 40px);
	padding: 0 calc(var(--dk-icone, 40px) * .26);
	border-radius: 999px;
	transition: transform .2s ease, box-shadow .2s ease, padding .3s ease;
}

.htm-dock-item:hover .hzm-popup-lanceur__t,
.htm-dock-item:focus-visible .hzm-popup-lanceur__t {
	max-width: 170px;
	margin-left: 8px;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.htm-dock-item .hzm-popup-lanceur__t { transition-duration: .01ms; }
}

.htm-dock-item .hzm-popup-lanceur__point {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 9px;
	height: 9px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #FF6C5F;
	pointer-events: none;
}

.htm-dock-item .hzm-popup-lanceur__point::after {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	background: #FF6C5F;
	animation: hzm-lc-pulse 2s ease-out infinite;
}

/* La pastille est posée en absolu : son bouton doit lui servir de repère. */
.htm-dock-item:has(.hzm-popup-lanceur__point) { position: relative; }

/* =============================================================================
   Lanceurs regroupés
   -----------------------------------------------------------------------------
   Une pastille unique, et un menu qui liste les popups disponibles. La pastille
   est un déclencheur ordinaire : le dock l'adopte comme les autres. Le menu,
   lui, n'appartient à personne d'autre qu'à ce fichier.
   ========================================================================== */

.hzm-popup-menu {
	position: fixed;
	z-index: 99991;
	width: min(320px, calc(100vw - 32px));
	padding: 6px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 18px 44px rgba(12, 16, 28, .26);
	opacity: 0;
	transform: translateY(8px) scale(.97);
	transform-origin: bottom center;
	transition: opacity .2s ease, transform .22s cubic-bezier(.2, .8, .28, 1);
}

.hzm-popup-menu[hidden] { display: none; }
.hzm-popup-menu.is-ouvert { opacity: 1; transform: none; }

/* Le menu se range dans le même coin que le dock, décalé pour ne pas le
   recouvrir. La variable d'ancrage du thème le tient au-dessus d'une barre
   fixée, comme le lanceur. */
.hzm-popup-menu--bl { bottom: calc(90px + var(--htm-bas-occupe, 0px)); left: 20px; }
.hzm-popup-menu--br { bottom: calc(90px + var(--htm-bas-occupe, 0px)); right: 20px; }
.hzm-popup-menu--bc { bottom: calc(90px + var(--htm-bas-occupe, 0px)); left: 50%; transform: translate(-50%, 8px) scale(.97); }
.hzm-popup-menu--bc.is-ouvert { transform: translate(-50%, 0); }
.hzm-popup-menu--tl { top: 90px; left: 20px; transform-origin: top center; }
.hzm-popup-menu--tr { top: 90px; right: 20px; transform-origin: top center; }
.hzm-popup-menu--ml { top: 50%; left: 90px; transform: translateY(-50%) scale(.97); }
.hzm-popup-menu--ml.is-ouvert { transform: translateY(-50%); }
.hzm-popup-menu--mr { top: 50%; right: 90px; transform: translateY(-50%) scale(.97); }
.hzm-popup-menu--mr.is-ouvert { transform: translateY(-50%); }

.hzm-popup-menu__tete {
	padding: 10px 12px 8px;
	color: #7c8399;
	font-family: Arial, sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.hzm-popup-menu__liste { margin: 0; padding: 0; list-style: none; }

.hzm-popup-menu__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 11px 12px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: #14143c;
	font-family: Arial, sans-serif;
	text-align: left;
	cursor: pointer;
	transition: background .16s ease;
}

.hzm-popup-menu__item:hover,
.hzm-popup-menu__item:focus-visible {
	background: rgba(0, 114, 255, .07);
	outline: none;
}

.hzm-popup-menu__item > i {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: linear-gradient(135deg, #0072FF, #8200F4);
	color: #fff;
	font-size: 15px;
}

.hzm-popup-menu__item span { display: block; min-width: 0; }
.hzm-popup-menu__item strong { display: block; font-size: 14px; line-height: 1.25; }
.hzm-popup-menu__item small { display: block; margin-top: 1px; color: #7c8399; font-size: 12px; }

.hzm-popup-menu__point {
	flex: none;
	width: 9px;
	height: 9px;
	margin-left: auto;
	border-radius: 50%;
	background: #FF6C5F;
}

/* Le point de la pastille groupée est le même élément que celui des lanceurs :
   il hérite donc de son habillage et de son animation, ici comme dans le dock.
   Rien de particulier à écrire — seulement à ne pas en faire un pseudo-élément,
   qui ne survivrait pas à la recopie du dock. */

@media (prefers-reduced-motion: reduce) {
	.hzm-popup-menu { transition-duration: .01ms; }
}

/* =============================================================================
   Parures
   -----------------------------------------------------------------------------
   Des effets posés AUTOUR de la fenêtre, jamais dedans : ni le fond ni le
   contenu ne changent. Tous se dessinent sur des pseudo-éléments de l'enveloppe
   plutôt que sur la boîte, pour ne pas entrer en conflit avec son ombre, ses
   angles ou son découpage.

   Une seule variable de durée pour toutes : régler la vitesse au même endroit
   évite qu'elles ne se désaccordent en évoluant chacune de leur côté.
   ========================================================================== */

.hzm-popup {
	--pp-pa-c: #0072FF;
	--pp-pa-g: #8200F4;
	--pp-pa-t: 7s;
}

.hzm-popup__boite { isolation: isolate; }

/* --- Halo diffus : une lueur fixe, posée derrière la fenêtre --------------- */
.hzm-popup--pa-halo .hzm-popup__boite {
	box-shadow: var(--pp-ombre), 0 0 70px -10px var(--pp-pa-c);
}

/* --- Lueur pulsée : le même halo, qui respire ------------------------------ */
.hzm-popup--pa-lueur .hzm-popup__boite {
	animation: hzm-pp-lueur var(--pp-pa-t) ease-in-out infinite;
}

@keyframes hzm-pp-lueur {
	0%, 100% { box-shadow: var(--pp-ombre), 0 0 30px -12px var(--pp-pa-c); }
	50%      { box-shadow: var(--pp-ombre), 0 0 80px 4px var(--pp-pa-c); }
}

/* --- Contour lumineux : un liseré net, immobile ---------------------------- */
.hzm-popup--pa-contour .hzm-popup__boite {
	box-shadow: var(--pp-ombre), 0 0 0 2px var(--pp-pa-c), 0 0 26px -6px var(--pp-pa-c);
}

/* --- Bordure animée --------------------------------------------------------
   Un dégradé conique qui tourne, masqué en son centre pour ne laisser voir
   qu'un cadre. La rotation passe par une propriété personnalisée animable là
   où elle est reconnue ; ailleurs, le cadre reste fixe et coloré — dégradé
   silencieux plutôt qu'effet cassé. */
@property --hzm-pp-tour {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

.hzm-popup--pa-bordure .hzm-popup__boite::before {
	content: '';
	position: absolute;
	inset: -2px;
	z-index: -1;
	border-radius: inherit;
	background: conic-gradient(
		from var(--hzm-pp-tour),
		var(--pp-pa-c),
		var(--pp-pa-g),
		#FF6C5F,
		var(--pp-pa-c)
	);
	animation: hzm-pp-tourne var(--pp-pa-t) linear infinite;
}

@keyframes hzm-pp-tourne {
	to { --hzm-pp-tour: 360deg; }
}

/* --- Éclat qui balaie ------------------------------------------------------
   Une bande claire traverse la fenêtre en diagonale, à intervalles. Elle passe
   par-dessus le contenu, donc elle reste discrète et ne capte pas les clics. */
.hzm-popup--pa-eclat .hzm-popup__boite::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 4;
	border-radius: inherit;
	background: linear-gradient(
		115deg,
		transparent 35%,
		color-mix(in srgb, var(--pp-pa-c) 55%, #fff) 48%,
		transparent 62%
	);
	opacity: .3;
	pointer-events: none;
	transform: translateX(-120%);
	animation: hzm-pp-eclat var(--pp-pa-t) ease-in-out infinite;
}

@keyframes hzm-pp-eclat {
	0%, 65% { transform: translateX(-120%); }
	100%    { transform: translateX(120%); }
}

/* =============================================================================
   Fond sombre : le contenu suit
   -----------------------------------------------------------------------------
   La luminance du fond est calculée au rendu. Sans cela, un popup au fond
   d'encre afficherait du texte noir sur noir, et il faudrait reprendre chaque
   titre et chaque paragraphe à la main dans le constructeur.
   ========================================================================== */
.hzm-popup--sombre .hzm-popup__contenu,
.hzm-popup--sombre .hzm-popup__contenu p,
.hzm-popup--sombre .hzm-popup__contenu li,
.hzm-popup--sombre .hzm-popup__contenu h1,
.hzm-popup--sombre .hzm-popup__contenu h2,
.hzm-popup--sombre .hzm-popup__contenu h3,
.hzm-popup--sombre .hzm-popup__contenu h4,
.hzm-popup--sombre .hzm-popup__contenu h5,
.hzm-popup--sombre .hzm-popup__contenu h6 {
	color: #f2f4f9;
}

/* Un texte clair à faible opacité paraît terne sans qu'on sache pourquoi : on
   remonte les atténuations plutôt que de forcer la couleur. */
.hzm-popup--sombre .hzm-popup__contenu .wpb_text_column { color: #f2f4f9; }
.hzm-popup--sombre .hzm-popup__contenu a { color: #7fb6ff; }
.hzm-popup--sombre .hzm-popup__contenu hr { border-color: rgba(255, 255, 255, .18); }

.hzm-popup--sombre .hzm-popup__contenu::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .3);
}

.hzm-popup--sombre .hzm-popup__fermer { color: var(--pp-x-c, #f2f4f9); }

/* =============================================================================
   Écrans étroits
   ========================================================================== */
@media (max-width: 640px) {

	.hzm-popup--mw-plein { --pp-marge: 0px; }
	.hzm-popup--mw-plein .hzm-popup__boite {
		width: 100%;
		height: 100dvh;
		max-height: 100dvh;
		border-radius: 0;
	}

	/* Bandeau : collé au bord, arrondi du côté opposé seulement — c'est ce qui
	   le fait lire comme un tiroir et non comme une fenêtre mal placée. */
	.hzm-popup--mw-bandeau { --pp-marge: 0px; }
	.hzm-popup--mw-bandeau .hzm-popup__boite {
		width: 100%;
		max-height: 88dvh;
	}
	.hzm-popup--mw-bandeau.hzm-popup--mp-bottom .hzm-popup__boite,
	.hzm-popup--mw-bandeau.hzm-popup--y-bottom .hzm-popup__boite {
		border-radius: var(--pp-rayon) var(--pp-rayon) 0 0;
	}
	.hzm-popup--mw-bandeau.hzm-popup--mp-top .hzm-popup__boite,
	.hzm-popup--mw-bandeau.hzm-popup--y-top .hzm-popup__boite {
		border-radius: 0 0 var(--pp-rayon) var(--pp-rayon);
	}

	/* Les positions imposées sur mobile priment sur celles de l'ordinateur. */
	.hzm-popup--mp-center .hzm-popup__zone { align-items: center; justify-content: center; }
	.hzm-popup--mp-bottom .hzm-popup__zone { align-items: flex-end; justify-content: center; }
	.hzm-popup--mp-top .hzm-popup__zone { align-items: flex-start; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.hzm-popup--pa-lueur .hzm-popup__boite,
	.hzm-popup--pa-bordure .hzm-popup__boite::before,
	.hzm-popup--pa-eclat .hzm-popup__boite::after { animation: none; }
}