/* =========================================================
   Puissance 20 — Quiz Champions
   Tout est scopé sous .p20 pour ne pas entrer en conflit
   avec Hello Elementor / Elementor Pro.
   ========================================================= */

.p20,
.p20 *,
.p20 *::before,
.p20 *::after { box-sizing: border-box !important; }

.p20 {
	/* Palette — volontairement restreinte */
	--p20-deep:   #0d0c33;
	--p20-navy:   #0b1650;
	--p20-purple: #7b3fe4;
	--p20-cyan:   #36b4ff;
	--p20-gold-1: #f3dd97;
	--p20-gold-2: #c79b45;
	--p20-pill:        rgba(199, 191, 226, .24);
	--p20-pill-border: rgba(255, 255, 255, .22);
	--p20-pill-strong: rgba(214, 208, 240, .50);
	--p20-text:        #ffffff;
	--p20-text-dim:    rgba(255, 255, 255, .70);
	--p20-on-light:    #1d2a63;

	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100svh;
	height: 100dvh;
	margin: 0 auto;
	padding: clamp(.6rem, 1.8svh, 1.3rem) clamp(1rem, 4vw, 1.75rem) clamp(.7rem, 2svh, 1.5rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	color: var(--p20-text);
	background:
		radial-gradient(120% 90% at 12% 12%, rgba(123, 63, 228, .55), transparent 48%),
		radial-gradient(120% 90% at 88% 82%, rgba(54, 180, 255, .42), transparent 50%),
		linear-gradient(158deg, #2a1a64 0%, #131a52 46%, var(--p20-deep) 100%);
}
.p20[style*="--p20-bg-img"] {
	background: var(--p20-bg-img) center / cover no-repeat, var(--p20-deep);
}

/* Faisceaux lumineux diagonaux (rappel du décor plateau TV) */
.p20::before,
.p20::after {
	content: "";
	position: absolute;
	top: -20%;
	height: 140%;
	width: 38%;
	pointer-events: none;
	filter: blur(34px);
	opacity: .5;
	z-index: 0;
}
.p20::before { left: -6%;  background: linear-gradient(180deg, transparent, rgba(150, 90, 255, .85), transparent); transform: rotate(14deg); }
.p20::after  { right: -6%; background: linear-gradient(180deg, transparent, rgba(60, 190, 255, .80), transparent);  transform: rotate(-14deg); }
.p20[style*="--p20-bg-img"]::before,
.p20[style*="--p20-bg-img"]::after { display: none; }

.p20 > * { position: relative; z-index: 1; }

/* ---------- Écrans ---------- */
.p20-screen { display: none; width: 100%; max-width: 560px; margin: 0 auto; flex: 1 1 auto; min-height: 0; }
.p20-screen.is-active { display: flex; flex-direction: column; min-height: 0; }

/* ---------- Logo (fallback texte) ---------- */
.p20-logo { display: block; margin: 0 auto; }
img.p20-logo { max-width: 150px; max-height: clamp(56px, 12svh, 130px); height: auto; width: auto; }
.p20-logo--text { text-align: center; line-height: 1; }
.p20-logo-mark {
	display: inline-block; font-weight: 800; font-size: 2.6rem; letter-spacing: .02em;
	background: linear-gradient(180deg, var(--p20-gold-1), var(--p20-gold-2));
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.p20-logo-name { display: block; margin-top: .25rem; font-size: .82rem; font-weight: 600; letter-spacing: .32em; color: #e8eaf6; }
.p20-logo-sub  { display: block; margin-top: .15rem; font-size: .62rem; font-weight: 500; letter-spacing: .42em; color: var(--p20-text-dim); }

/* =========================================================
   ACCUEIL
   ========================================================= */
.p20-accueil { justify-content: center; align-items: center; gap: clamp(1.25rem, 5svh, 3.5rem); text-align: center; }
.p20-accueil .p20-logo { margin-top: 0; }
img.p20-title { max-width: 86%; max-height: clamp(170px, 36svh, 360px); height: auto; width: auto; }
.p20-title--text { margin: 0; line-height: .92; }
.p20-title--text .t1,
.p20-title--text .t2,
.p20-title--text .t3 { display: block; }
.p20-title--text .t1 {
	font-size: clamp(2rem, 11vw, 3.4rem); font-weight: 800; letter-spacing: .01em;
	background: linear-gradient(180deg, #ffffff, #c9cede 60%, #8a90a8);
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.p20-title--text .t2 {
	font-size: clamp(1.4rem, 7vw, 2.2rem); font-weight: 700; margin-top: .15em;
	background: linear-gradient(180deg, var(--p20-gold-1), var(--p20-gold-2));
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.p20-title--text .t3 {
	font-size: clamp(2.6rem, 14vw, 4.6rem); font-weight: 800; font-style: italic; margin-top: .04em;
	background: linear-gradient(180deg, var(--p20-gold-1), var(--p20-gold-2));
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---------- Bouton principal ---------- */
.p20-btn {
	appearance: none; border: 0; cursor: pointer;
	padding: 1.05rem 3.4rem; border-radius: 999px;
	font-size: 1.05rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
	color: var(--p20-on-light);
	background: linear-gradient(180deg, #e4e1f3, #c8c4e6);
	box-shadow: 0 10px 30px rgba(8, 6, 40, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
	transition: transform .15s ease, box-shadow .15s ease;
}
.p20-btn:hover { transform: translateY(-2px); }
.p20-btn:active { transform: translateY(0); }

/* =========================================================
   QUESTION
   ========================================================= */
.p20-question.is-active { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; align-items: stretch; gap: clamp(.5rem, 1.6svh, 1.2rem); }
.p20-coin { justify-self: center; }

/* Pastille dorée (fallback CSS si aucune image) */
.p20-coin {
	flex: 0 0 auto; width: clamp(54px, 9svh, 88px); height: clamp(54px, 9svh, 88px); border-radius: 50%;
	display: grid; place-items: center;
	background: radial-gradient(circle at 38% 30%, #fff4cf, var(--p20-gold-1) 35%, var(--p20-gold-2) 78%, #9a7325);
	box-shadow: 0 8px 24px rgba(10, 8, 40, .5), inset 0 2px 4px rgba(255, 255, 255, .7), inset 0 -4px 10px rgba(120, 86, 20, .55);
	margin-top: clamp(.25rem, 1.5svh, 1.25rem);
}
.p20-coin-num { font-size: clamp(1.5rem, 4.6svh, 2.4rem); font-weight: 800; color: #2c2150; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); line-height: 1; }
.p20-coin.has-img { background: none; box-shadow: none; }
.p20-coin.has-img .p20-coin-num { display: none; }
.p20-coin.has-img img { width: 100%; height: 100%; object-fit: contain; }

/* Grille des réponses — 10 lignes égales qui remplissent la zone (zéro scroll) */
.p20-grid {
	width: 100%; height: 100%; min-height: 0;
	display: grid; grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(10, minmax(0, 1fr));
	gap: clamp(.35rem, 1svh, .8rem);
}
.pdg {
	appearance: none; border: 1px solid var(--p20-pill-border); cursor: pointer;
	border-radius: clamp(16px, 2.4svh, 22px); padding: clamp(.3rem, 1svh, .85rem) .6rem; min-height: 0; overflow: hidden;
	display: flex; flex-direction: column; justify-content: center; gap: clamp(.05rem, .6svh, .3rem);
	text-align: center; color: var(--p20-text);
	background: var(--p20-pill);
	backdrop-filter: blur(3px);
	transition: background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.pdg:hover { background: var(--p20-pill-strong); }
.pdg .pdg-soc { display: block; font-size: clamp(.74rem, 1.9svh, 1.02rem); line-height: 1.12; font-weight: 800; color: var(--p20-text); }
.pdg .pdg-name { display: block; margin-top: clamp(.02rem, .4svh, .1rem); font-size: clamp(.66rem, 1.55svh, .82rem); line-height: 1.1; color: var(--p20-text-dim); }
.pdg .pdg-name .pdg-prenom { font-weight: 500; }
.pdg .pdg-name .pdg-nom { font-weight: 600; }
.pdg.is-selected {
	background: var(--p20-pill-strong);
	border-color: var(--p20-cyan);
	box-shadow: 0 0 0 2px rgba(54, 180, 255, .55), 0 8px 22px rgba(20, 90, 160, .4);
	transform: translateY(-1px);
}
/* 19ᵉ PDG centré seul sur la dernière ligne */
.p20-grid .pdg:last-child { grid-column: 1 / -1; width: 100%; max-width: calc(50% - .4rem); margin-inline: auto; }

/* Pied : logo mini + flèche suivante */
.p20-footer { flex: 0 0 auto; padding-top: clamp(.5rem, 1.6svh, 1.25rem); width: 100%;
	display: flex; align-items: center; justify-content: space-between; }
.p20-footer .p20-logo--mini { margin: 0; }
.p20-footer img.p20-logo--mini { max-width: clamp(44px, 9svh, 64px); max-height: clamp(34px, 7svh, 56px); }
.p20-footer .p20-logo--mini .p20-logo-mark { font-size: 1.7rem; }

.p20-next {
	appearance: none; border: 0; cursor: pointer;
	width: clamp(50px, 9svh, 64px); height: clamp(50px, 9svh, 64px); border-radius: 50%;
	display: grid; place-items: center;
	background: radial-gradient(circle at 40% 35%, rgba(120, 205, 255, .55), rgba(40, 120, 210, .55));
	box-shadow: 0 8px 22px rgba(10, 8, 40, .45), inset 0 1px 0 rgba(255, 255, 255, .4);
	transition: transform .15s ease, opacity .15s ease;
}
.p20-next svg { width: 30px; height: 30px; fill: none; stroke: #eaf6ff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.p20-next:not(:disabled):hover { transform: translateX(3px); }
.p20-next:disabled { opacity: .4; cursor: not-allowed; }

/* =========================================================
   MERCI
   ========================================================= */
.p20-fin { justify-content: center; align-items: center; text-align: center; gap: 1.5rem; }
.p20-fin-title {
	margin: 0; font-size: clamp(2.4rem, 11vw, 3.6rem); font-weight: 800; font-style: italic;
	background: linear-gradient(180deg, var(--p20-gold-1), var(--p20-gold-2));
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.p20-fin-text { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--p20-text-dim); }

/* =========================================================
   RÉSULTATS (écran projeté)
   ========================================================= */
/* Mobile : 1 colonne lisible, défilement autorisé (écran de consultation) */
.p20-resultats { height: auto; min-height: 100dvh; overflow-y: auto; display: grid; grid-template-rows: auto auto auto; align-content: start; max-width: 1180px; gap: clamp(.55rem, 1.8svh, 1.4rem); }
.p20-res-head { width: 100%; text-align: center; }
.p20-res-badge-img { display: inline-block; max-width: min(60%, 420px); max-height: clamp(46px, 9svh, 120px); height: auto; width: auto; }
.p20-res-badge {
	display: inline-block; padding: .55rem 2.4rem; border-radius: 999px;
	font-size: clamp(1.6rem, 5vw, 2.6rem); font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
	color: #5a4413;
	background: linear-gradient(180deg, #fce6a8, var(--p20-gold-1) 45%, var(--p20-gold-2) 90%);
	border: 2px solid rgba(255, 245, 210, .8);
	box-shadow: 0 10px 28px rgba(10, 8, 40, .5), inset 0 2px 3px rgba(255, 255, 255, .7), inset 0 -4px 10px rgba(120, 86, 20, .5);
	text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}

.p20-res-grid {
	width: 100%;
	display: grid; grid-template-columns: 1fr;
	gap: clamp(.4rem, 1.2svh, .7rem);
}
.res-card {
	position: relative; overflow: hidden;
	border-radius: 999px; border: 1px solid var(--p20-pill-border);
	min-height: clamp(56px, 8svh, 76px); padding: clamp(.45rem, 1svh, .7rem) clamp(1rem, 3vw, 1.5rem) clamp(.45rem, 1svh, .7rem) clamp(3.6rem, 13vw, 4.6rem);
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	background: rgba(255, 255, 255, .06);
}
.res-card .res-fill {
	position: absolute; inset: 0; width: 0;
	background: var(--p20-pill-strong);
	transition: width .9s cubic-bezier(.22, 1, .36, 1);
	z-index: 0;
}
.res-card .res-num {
	position: absolute; left: clamp(.5rem, 1.6vw, .9rem); top: 50%; transform: translateY(-50%);
	width: clamp(1.9rem, 4.5vw, 2.6rem); text-align: center; z-index: 1;
	font-size: clamp(1.3rem, 2.6svh, 1.9rem); font-weight: 800; color: rgba(255, 255, 255, .5); line-height: 1;
}
.res-card .res-body { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; line-height: 1.16; }
.res-card .res-soc { display: block; font-weight: 800; font-size: clamp(.8rem, 1.95svh, 1.15rem); }
.res-card .res-name { display: block; margin-top: clamp(.02rem, .4svh, .12rem); font-size: clamp(.68rem, 1.55svh, .9rem); line-height: 1.1; color: var(--p20-text-dim); }
.res-card .res-name .res-prenom { font-weight: 500; }
.res-card .res-name .res-nom { font-weight: 600; }
.res-card .res-pct { position: relative; z-index: 1; flex: 0 0 auto; font-size: clamp(1.05rem, 2.7svh, 1.9rem); font-weight: 800; white-space: nowrap; }

.p20-res-foot { flex: 0 0 auto; width: 100%; text-align: center; }
.p20-res-foot .p20-logo { margin-top: clamp(.4rem, 1.5svh, 1rem); }

/* ---------- Confort écran large ---------- */
@media (min-width: 900px) {
	.p20-quiz .p20-screen { max-width: 620px; }
}

/* Résultats sur grand écran (projection) : plein écran, full-width, zéro scroll.
   position:fixed => occupe tout le viewport quel que soit le conteneur Elementor/thème. */
@media (min-width: 768px) {
	.p20-resultats {
		position: fixed; inset: 0; z-index: 99990;
		width: 100vw; height: 100svh; height: 100dvh; max-width: none; min-height: 0; margin: 0;
		overflow: hidden;
		display: grid; grid-template-rows: auto minmax(0, 1fr) auto; align-content: stretch;
		padding: clamp(.8rem, 2.6svh, 2rem) clamp(1.5rem, 3.5vw, 3.5rem);
		gap: clamp(.5rem, 1.8svh, 1.4rem);
	}
	.p20-res-grid {
		grid-template-columns: 1fr 1fr; grid-template-rows: repeat(10, minmax(0, 1fr));
		height: 100%; min-height: 0; width: 100%; gap: clamp(.45rem, 1svh, 1rem);
	}
	.p20-res-grid .res-card { min-height: 0; }
	.p20-res-grid .res-card:last-child { grid-column: 1 / -1; width: 100%; max-width: calc(50% - .5rem); margin-inline: auto; }
}

/* Au-dessus de la barre d'admin WordPress en test connecté (sinon le badge passe dessous) */
@media (min-width: 768px) {
	body.admin-bar .p20-resultats { top: 32px; height: calc(100dvh - 32px); }
}

/* ============================================================
 * GRILLE DE LOGOS PARTENAIRES (écran merci)
 * ============================================================ */
.p20-logos-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
	gap: 20px;
	margin-top: 40px;
	padding: 0 20px;
	max-width: 100%;
}

.p20-logo-partner {
	max-width: 100%;
	max-height: 100px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
	transition: all 0.3s ease;
}

.p20-logo-partner:hover {
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
	transform: scale(1.05);
}

@media (max-width: 768px) {
	.p20-logos-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 15px;
		margin-top: 30px;
		padding: 0 15px;
	}

	.p20-logo-partner {
		max-height: 70px;
	}
}

/* Bouton vers page merci personnalisée */
.p20-btn-merci {
	display: inline-block;
	margin-top: 30px;
	padding: 14px 40px;
	background: #b4a7d6;
	color: white;
	text-decoration: none;
	border-radius: 10px;
	font-weight: 600;
	font-size: 16px;
	transition: all 0.3s ease;
}

.p20-btn-merci:hover {
	background: #9d8fc4;
	transform: translateY(-2px);
}


/* ============================================================
 * FLÈCHE GAUCHE (retour) — jumelle de .p20-next, dans le footer
 * Visible dès la Q2 ; sur Q1 elle reste masquée (place réservée)
 * pour garder le logo parfaitement centré.
 * ============================================================ */
.p20-prev {
	appearance: none; border: 0; cursor: pointer;
	width: clamp(50px, 9svh, 64px); height: clamp(50px, 9svh, 64px); border-radius: 50%;
	display: grid; place-items: center;
	background: radial-gradient(circle at 40% 35%, rgba(120, 205, 255, .55), rgba(40, 120, 210, .55));
	box-shadow: 0 8px 22px rgba(10, 8, 40, .45), inset 0 1px 0 rgba(255, 255, 255, .4);
	transition: transform .15s ease, opacity .15s ease;
}
.p20-prev svg { width: 30px; height: 30px; fill: none; stroke: #eaf6ff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.p20-prev:hover { transform: translateX(-3px); }