/**
 * Pop-up « Enfin à Toulouse » (nouvelle adresse, 18/08–10/10/2026) — Content Block Blocksy type popup.
 * Le markup vit dans le bloc HTML du Content Block (wrapper .pp-tlse) ; la boîte
 * (fond blanc, largeur 700px, backdrop, radius 14px, padding 0) est gérée par les
 * options du popup. Ce fichier gère uniquement l'intérieur.
 * Design retenu : version E de Design/pp-popup-toulouse-mockups.html.
 * Palette site : brand #9a3a34, brand-soft #B99579, dark #202C39, ink #0D0E16,
 * cream #F5F2EE, body-gray #6E6E75.
 */

/* Close natif Blocksy, restylé façon maquette. Positionné sur l'ancêtre positionné
   natif de Blocksy (article / .ct-popup-inner) → coin haut-droit de TOUTE la boîte,
   pas seulement de .pp-tlse-main. En desktop ce coin tombe sur le fond blanc
   (pastille grise) ; en mobile le panneau sombre passe au-dessus → override plus bas. */
.ct-popup:has(.pp-tlse) .ct-toggle-close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	/* Blocksy applique background/size via variables CSS + !important sur
	   [class*=ct-toggle] → on pilote les VARIABLES, pas les propriétés. */
	--toggle-button-size: 34px;
	--toggle-button-background: #f2f0ed;
	--toggle-button-radius: 50%;
	color: #6b6b6b;
	transition: background 0.25s, color 0.25s, transform 0.25s;
}
.ct-popup:has(.pp-tlse) .ct-toggle-close:hover {
	--toggle-button-background: #9a3a34;
	color: #fff;
	transform: rotate(90deg);
}
.ct-popup:has(.pp-tlse) .ct-toggle-close svg {
	fill: currentColor;
}
.pp-tlse-cta:focus-visible,
.pp-tlse-sub a:focus-visible,
.ct-popup:has(.pp-tlse) .ct-toggle-close:focus-visible {
	outline: 2px solid #9a3a34;
	outline-offset: 2px;
}

/* Conteneur : grid 250px (panneau lieu) + reste (contenu). Radius + clip des coins
   sur le wrapper lui-même — PAS sur .ct-popup-inner (conteneur de scroll natif,
   ne doit jamais être overflow:hidden). */
.pp-tlse {
	display: grid;
	grid-template-columns: 250px 1fr;
	border-radius: 14px;
	overflow: hidden;
	text-align: left;
}

/* Panneau « lieu » (bleu nuit) */
.pp-tlse-side {
	position: relative;
	overflow: hidden;
	background: #202C39;
	color: #fff;
	padding: 40px 30px 34px;
	display: flex;
	flex-direction: column;
}
.pp-tlse-side::after {
	content: '';
	position: absolute;
	right: -60px;
	bottom: -60px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	border: 28px solid rgba(154, 58, 52, 0.18);
}
.pp-tlse-pin {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #9a3a34;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 22px;
}
.pp-tlse-pin svg {
	width: 24px;
	height: 24px;
	color: #fff;
}
.pp-tlse-zone {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: 6px;
}
.pp-tlse-av {
	font-size: 24px;
	font-weight: 500;
	font-style: italic;
	color: #B99579;
	line-height: 1.15;
	margin-bottom: 26px;
}
.pp-tlse-rule {
	width: 36px;
	height: 2px;
	background: #9a3a34;
	margin-bottom: 22px;
}
.pp-tlse-stack div + div {
	margin-top: 16px;
}
.pp-tlse-stack b {
	display: block;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.05;
}
.pp-tlse-stack span {
	display: block;
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin-top: 4px;
}

/* Contenu principal (fond blanc) */
.pp-tlse-main {
	padding: 44px 40px 36px;
	position: relative;
}
.pp-tlse-eyebrow {
	color: #9a3a34;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 12px;
}
.pp-tlse-main h2 {
	margin: 0 0 12px;
	color: #202C39;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
}
.pp-tlse-main h2 em {
	font-style: normal;
	color: #9a3a34;
}
.pp-tlse-main p {
	color: #6E6E75;
	font-size: 15px;
	line-height: 1.65;
	margin: 0 0 20px;
	max-width: 380px;
}
.pp-tlse-addr {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 24px;
}
.pp-tlse-ico {
	width: 22px;
	height: 22px;
	margin-top: 2px;
	color: #9a3a34;
	flex-shrink: 0;
}
.pp-tlse-addr strong {
	display: block;
	color: #0D0E16;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}
.pp-tlse-addr span {
	display: block;
	color: #6E6E75;
	font-size: 14px;
}
.pp-tlse-cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: #9a3a34;
	color: #fff;
	text-decoration: none;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.01em;
	padding: 15px 30px;
	border-radius: 6px;
	transition: background 0.25s, transform 0.25s;
}
.pp-tlse-cta:hover {
	background: #7d2f2a;
	color: #fff;
	transform: translateY(-2px);
}
.pp-tlse-cta svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
.pp-tlse-sub {
	margin-top: 14px;
	font-size: 13px;
	color: #6b6b6b;
}
.pp-tlse-sub a {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}
.pp-tlse-inaug {
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid #eee;
	font-size: 13px;
	color: #6E6E75;
	display: flex;
	align-items: center;
	gap: 10px;
}
.pp-tlse-inaug b {
	color: #202C39;
	font-weight: 600;
}
.pp-tlse-inaug svg {
	width: 16px;
	height: 16px;
	color: #9a3a34;
	flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
	.pp-tlse-cta:hover {
		transform: none;
	}
	.ct-popup:has(.pp-tlse) .ct-toggle-close:hover {
		transform: none;
	}
}

@media (max-width: 782px) {
	/* Le panneau passe en bandeau horizontal au-dessus (side toujours premier en DOM) */
	.pp-tlse {
		grid-template-columns: 1fr;
	}
	.pp-tlse-side {
		padding: 28px 22px 22px;
	}
	.pp-tlse-pin {
		display: none;
	}
	.pp-tlse-av {
		font-size: 20px;
		margin-bottom: 16px;
	}
	.pp-tlse-rule {
		display: none;
	}
	.pp-tlse-stack {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 8px;
	}
	.pp-tlse-stack div + div {
		margin-top: 0;
	}
	.pp-tlse-stack b {
		font-size: 18px;
	}
	.pp-tlse-main {
		padding: 26px 22px 28px;
	}
	.pp-tlse-main h2 {
		font-size: 23px;
	}
	.pp-tlse-cta {
		font-size: 16px;
		padding: 14px 22px;
	}
	/* Le panneau sombre passe au-dessus, sous le close natif : pastille translucide + icône blanche */
	.ct-popup:has(.pp-tlse) .ct-toggle-close {
		--toggle-button-background: rgba(255, 255, 255, 0.14);
		color: #fff;
	}
	.ct-popup:has(.pp-tlse) .ct-toggle-close:focus-visible {
		outline-color: #fff;
	}
}