/* AOC Secure Popup — styles front. */

.aoc-sp-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	background: rgba(0, 0, 0, 0.6);
	padding: 20px;
	box-sizing: border-box;
	overflow-y: auto;
}

.aoc-sp-overlay.aoc-sp-open {
	display: flex !important;
}

/* Positions */
.aoc-sp-pos-center-center { align-items: center; justify-content: center; }
.aoc-sp-pos-top-center    { align-items: flex-start; justify-content: center; }
.aoc-sp-pos-bottom-center { align-items: flex-end; justify-content: center; }
.aoc-sp-pos-center-left   { align-items: center; justify-content: flex-start; }
.aoc-sp-pos-center-right  { align-items: center; justify-content: flex-end; }
.aoc-sp-pos-top-left      { align-items: flex-start; justify-content: flex-start; }
.aoc-sp-pos-top-right     { align-items: flex-start; justify-content: flex-end; }
.aoc-sp-pos-bottom-left   { align-items: flex-end; justify-content: flex-start; }
.aoc-sp-pos-bottom-right  { align-items: flex-end; justify-content: flex-end; }

.aoc-sp-box {
	position: relative;
	background: #fff;
	color: #1a1a1a;
	border-radius: 8px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
	max-width: 600px;
	width: 100%;
	padding: 32px;
	box-sizing: border-box;
	/* Ne dépasse jamais la hauteur de la fenêtre ; le contenu défile à l'intérieur. */
	max-height: calc(100vh - 40px);
	overflow-y: auto;
}

/* Bouton de fermeture maintenu visible même quand le contenu défile. */
.aoc-sp-box .aoc-sp-close {
	position: sticky;
	top: 0;
	right: auto;
	float: right;
	margin: -16px -16px 0 0;
}

.aoc-sp-fullscreen .aoc-sp-box {
	max-width: none;
	width: 100%;
	min-height: 100%;
	border-radius: 0;
}

.aoc-sp-close {
	position: absolute;
	top: 8px;
	right: 12px;
	border: 0;
	background: transparent;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: #555;
	padding: 4px 8px;
}

.aoc-sp-close:hover { color: #000; }

.aoc-sp-image { margin-bottom: 16px; }
.aoc-sp-image img { max-width: 100%; height: auto; display: block; }

.aoc-sp-heading { margin: 0 0 8px; font-size: 1.5em; }
.aoc-sp-subheading { margin: 0 0 12px; font-size: 1.1em; font-weight: 600; }
.aoc-sp-content { line-height: 1.5; }
.aoc-sp-content img { max-width: 100%; height: auto; }

/* Vidéos intégrées (YouTube, Vimeo…) : conteneur responsive 16:9 cliquable */
.aoc-sp-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 12px 0;
	background: #f0f0f0;
}
.aoc-sp-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Repli pour navigateurs sans aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
	.aoc-sp-video { height: 0; padding-bottom: 56.25%; }
}

/* Lien de repli « Regarder sur YouTube » */
.aoc-sp-video-link {
	margin: 4px 0 12px;
	font-size: 0.9em;
}
.aoc-sp-video-link a {
	color: inherit;
	text-decoration: underline;
}

/* Lien déclencheur (shortcode) : simple lien souligné, sans style de bouton */
.aoc-sp-trigger {
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}
.aoc-sp-trigger:hover,
.aoc-sp-trigger:focus { text-decoration: underline; }

/* Effets d'apparition */
.aoc-sp-effect-fadein.aoc-sp-open { animation: aoc-sp-fade 0.4s ease; }
@keyframes aoc-sp-fade { from { opacity: 0; } to { opacity: 1; } }

.aoc-sp-effect-slidein.aoc-sp-open .aoc-sp-box { animation: aoc-sp-slide 0.4s ease; }
@keyframes aoc-sp-slide { from { transform: translateY(-40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Empêche le défilement du fond quand un popup est ouvert */
body.aoc-sp-locked { overflow: hidden; }