/* FTE Quiz — Playground. Chargé seulement sur les pages portant [fte_playground].
   Palette et patterns du design system (DM Sans + Instrument Serif, cartes à
   liseré produit, or réservé à l'achat donc absent d'ici : tout est gratuit). */

.ftepg, .ftepgx{
	--pg-navy:#1c244b; --pg-ink:#0f172a; --pg-red:#e11d48;
	--pg-quiz:#58CC02; --pg-quiz-hover:#46a302; --pg-quiz-soft:#f3ffe6;
	--pg-news:#4B9BF5; --pg-lc:#2563EB; --pg-vocab:#7C3AED; --pg-teal:#0EA5A4;
	--pg-slate:#F7F8FA; --pg-line:#e2e8f0; --pg-border:#e6e8ef;
	--pg-soft:#475569; --pg-muted:#64748b; --pg-faint:#94a3b8;
	font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
	color:var(--pg-ink);
	box-sizing:border-box;
}
.ftepg *, .ftepgx *{ box-sizing:border-box; }

/* ─────────────────────── Page : héros ─────────────────────── */
.ftepgx-hero{
	position:relative; text-align:center; overflow:hidden;
	background:linear-gradient(180deg,#fff,var(--pg-slate));
	background-image:radial-gradient(circle at 85% 8%,rgba(28,36,75,.06),transparent 42%),radial-gradient(#e2e8f0 1px,transparent 1px);
	background-size:auto,30px 30px;
	padding:clamp(44px,7vw,76px) 20px clamp(34px,5vw,52px);
	border-bottom:1px solid var(--pg-border);
}
.ftepgx-kicker{
	display:inline-flex; align-items:center; gap:8px;
	font-size:11.5px; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
	color:var(--pg-faint); margin:0 0 18px;
}
.ftepgx-dot{ width:8px; height:8px; border-radius:999px; background:var(--pg-quiz); animation:ftepgDot 2s infinite; }
@keyframes ftepgDot{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
.ftepgx-hero h1{
	font-size:clamp(2.1rem,3.5vw + 1.1rem,4rem); font-weight:800; color:var(--pg-navy);
	letter-spacing:-.03em; line-height:1.05; margin:0 0 14px;
}
.ftepgx-hero h1 .serif{ font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400; color:var(--pg-red); font-size:1.05em; margin-right:.05em; }
.ftepgx-sub{ font-size:17px; line-height:1.6; color:var(--pg-soft); max-width:56ch; margin:0 auto 24px; }

.ftepgx-mgx{ display:flex; align-items:center; justify-content:center; gap:12px; margin:0 0 24px; }
.ftepgx-mgx img{ width:56px; height:56px; display:block; }
.ftepgx-bubble{
	position:relative; background:#fff; border:1px solid var(--pg-line); border-radius:14px;
	padding:9px 14px; font-size:14.5px; font-weight:700; color:var(--pg-navy);
	box-shadow:0 2px 8px rgba(28,36,75,.04);
}
.ftepgx-bubble::before{
	content:""; position:absolute; left:-6px; top:50%; margin-top:-6px;
	width:10px; height:10px; background:#fff; border-left:1px solid var(--pg-line); border-bottom:1px solid var(--pg-line);
	transform:rotate(45deg);
}
.ftepgx-tricolore{ display:flex; width:132px; height:4px; border-radius:2px; overflow:hidden; margin:0 auto 26px; }
.ftepgx-tricolore span{ flex:1 1 auto; }
.ftepgx-tricolore span:nth-child(1){ background:#0055A4; }
.ftepgx-tricolore span:nth-child(2){ background:#fff; opacity:.85; }
.ftepgx-tricolore span:nth-child(3){ background:#EF4135; }
.ftepgx-ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:0; }
.ftepgx-cta{
	display:inline-block; text-decoration:none; font-weight:700; letter-spacing:-.005em;
	font-size:16px; padding:14px 28px; border-radius:12px; transition:transform .12s ease, filter .15s ease;
}
.ftepgx-cta-level{ background:var(--pg-quiz); color:#fff; box-shadow:0 12px 32px rgba(88,204,2,.25); animation:ftepgPulse 2.8s infinite; }
.ftepgx-cta-games{ background:var(--pg-navy); color:#fff; }
.ftepgx-cta:hover{ transform:translateY(-1px); filter:brightness(1.08); color:#fff; }
@keyframes ftepgPulse{
	0%{ box-shadow:0 12px 32px rgba(88,204,2,.25),0 0 0 0 rgba(88,204,2,.45); }
	70%{ box-shadow:0 12px 32px rgba(88,204,2,.25),0 0 0 18px rgba(88,204,2,0); }
	100%{ box-shadow:0 12px 32px rgba(88,204,2,.25),0 0 0 0 rgba(88,204,2,0); }
}

/* ─────────────────────── Page : sections ─────────────────────── */
.ftepgx-level{ background:var(--pg-quiz-soft); border-bottom:1px solid var(--pg-border); padding:clamp(36px,5vw,60px) 20px; }
.ftepgx-level-inner, .ftepgx-games-inner{ max-width:860px; margin:0 auto; }
.ftepgx-games{ padding:clamp(36px,5vw,60px) 20px clamp(48px,6vw,72px); }
.ftepgx-games-inner{ max-width:1140px; }
.ftepgx-h2{
	text-align:center; color:var(--pg-navy); font-weight:800; letter-spacing:-.02em;
	font-size:clamp(1.5rem,1.2vw + 1.2rem,2.1rem); margin:0 0 10px;
}
.ftepgx-h2kick{
	display:block; text-align:center; font-size:11.5px; font-weight:900; letter-spacing:.14em;
	text-transform:uppercase; color:var(--pg-faint); margin:0 0 10px;
}
.ftepgx-lead{ text-align:center; color:var(--pg-soft); font-size:16px; line-height:1.6; max-width:60ch; margin:0 auto 26px; }
.ftepgx-close{ text-align:center; color:var(--pg-muted); font-size:15px; padding:0 20px clamp(40px,5vw,60px); margin:0; }
.ftepgx-close a{ color:var(--pg-navy); font-weight:700; }

/* ─────────── Écran de départ du test de niveau : le choix 20 / 50 ─────────── */
.fteq-lv2{ display:grid; gap:16px; }
@media (min-width:720px){ .fteq-lv2{ grid-template-columns:1fr 1fr; } }
.fteq-lv2-card{
	background:#fff; border:1px solid var(--pg-line); border-radius:16px;
	padding:26px 24px; text-align:center; display:flex; flex-direction:column; gap:10px;
	transition:transform .15s ease, box-shadow .15s ease;
}
.fteq-lv2-card:hover{ transform:translateY(-3px); box-shadow:0 8px 30px rgba(28,36,75,.08); }
.fteq-lv2-kick{ font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:var(--pg-faint); }
.fteq-lv2-title{ font-size:21px; font-weight:800; color:var(--pg-navy); letter-spacing:-.01em; margin:0; }
.fteq-lv2-desc{ font-size:14.5px; line-height:1.55; color:var(--pg-soft); margin:0 auto; max-width:34ch; flex:1 1 auto; }
.fteq-lv2-meta{ font-size:12.5px; font-weight:700; color:var(--pg-muted); }
.fteq-lv2 .fteq-lv2-btn{
	appearance:none; border:0; cursor:pointer; display:inline-block; text-decoration:none;
	font-family:inherit; font-weight:700; letter-spacing:-.005em; font-size:16px;
	padding:14px 24px; border-radius:12px; transition:transform .12s ease, filter .15s ease;
}
.fteq-lv2-btn-quick{ background:var(--pg-quiz); color:#fff; box-shadow:0 12px 32px rgba(88,204,2,.25); }
.fteq-lv2-btn-full{ background:var(--pg-navy); color:#fff; }
.fteq-lv2 .fteq-lv2-btn:hover{ transform:translateY(-1px); filter:brightness(1.08); color:#fff; }

/* ─────────────────────── Catalogue ─────────────────────── */
.ftepg-bar{ display:flex; flex-direction:column; gap:10px; margin:0 0 22px; }
.ftepg-chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.ftepg-chip{
	appearance:none; cursor:pointer; font-family:inherit;
	border:1px solid var(--pg-line); background:#fff; color:var(--pg-navy);
	font-size:13.5px; font-weight:700; letter-spacing:-.005em;
	padding:8px 14px; border-radius:999px;
	transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.ftepg-chip:hover{ border-color:var(--pg-navy); }
.ftepg-chip.is-on{ background:var(--pg-navy); border-color:var(--pg-navy); color:#fff; }
.ftepg-chips-band .ftepg-chip.is-on{ background:var(--pg-quiz-hover); border-color:var(--pg-quiz-hover); }
.ftepg-n{ opacity:.55; font-weight:700; margin-left:2px; }

.ftepg-grid{ display:grid; gap:16px; grid-template-columns:repeat(3,1fr); }
@media (max-width:1024px){ .ftepg-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .ftepg-grid{ grid-template-columns:1fr; } }

.ftepg-card{
	--pg-acc:var(--pg-navy); --pg-tint:#e8ebf5; --pg-tint2:#f6f7fc;
	position:relative; display:flex; flex-direction:column;
	background:#fff; border:1px solid var(--pg-line); border-radius:16px;
	padding:0; text-decoration:none; color:var(--pg-ink);
	overflow:hidden; transition:transform .15s ease, box-shadow .15s ease;
}
/* Le filtre pose l'attribut hidden ; sans cette règle, le display:flex
   de la carte gagnerait sur le [hidden] du navigateur et rien ne bougerait. */
.ftepg-card[hidden]{ display:none; }
.ftepg-card:hover{ transform:translateY(-3px); box-shadow:0 8px 30px rgba(28,36,75,.10); }
.ftepg-card.is-level{ --pg-acc:var(--pg-quiz); --pg-tint:#e2f8c8; --pg-tint2:#f3ffe6; }
.ftepg-card.is-grammar{ --pg-acc:var(--pg-lc); --pg-tint:#dbeafe; --pg-tint2:#eef4fc; }
.ftepg-card.is-vocab{ --pg-acc:var(--pg-vocab); --pg-tint:#ead9fd; --pg-tint2:#f6eeff; }
.ftepg-card.is-listening{ --pg-acc:var(--pg-news); --pg-tint:#d8ebfe; --pg-tint2:#ecf5ff; }
.ftepg-card.is-culture{ --pg-acc:var(--pg-teal); --pg-tint:#cdf2f0; --pg-tint2:#e8fbfa; }
.ftepg-card.is-expert{ --pg-acc:var(--pg-navy); --pg-tint:#dde1f0; --pg-tint2:#f0f2f9; }

/* La couverture : dégradé de la catégorie, trame de points, icône en vedette
   avec son double en filigrane. Un liseré accent la sépare du texte. */
.ftepg-cover{
	position:relative; display:flex; align-items:center; justify-content:center;
	height:108px; overflow:hidden;
	background:linear-gradient(135deg,var(--pg-tint),var(--pg-tint2) 70%);
	background-image:radial-gradient(rgba(28,36,75,.10) 1px,transparent 1px),linear-gradient(135deg,var(--pg-tint),var(--pg-tint2) 70%);
	background-size:14px 14px,auto;
	border-bottom:3px solid var(--pg-acc);
}
.ftepg-cover-ghost{
	position:absolute; right:-14px; bottom:-26px; font-size:96px; line-height:1;
	opacity:.16; transform:rotate(-12deg); filter:grayscale(35%);
}
.ftepg-cover-ic{
	position:relative; font-size:46px; line-height:1;
	filter:drop-shadow(0 4px 8px rgba(28,36,75,.18));
	transition:transform .18s ease;
}
.ftepg-card:hover .ftepg-cover-ic{ transform:scale(1.14) rotate(-4deg); }
.ftepg-cover .ftepg-diff{
	position:absolute; top:10px; left:12px;
	background:#fff; border:1px solid rgba(28,36,75,.12); border-radius:999px;
	padding:3px 10px; font-weight:800; font-size:11px; color:var(--pg-navy);
	box-shadow:0 2px 6px rgba(28,36,75,.08);
}
.ftepg-cover-audio{
	position:absolute; top:10px; right:12px;
	background:var(--pg-navy); color:#fff; border-radius:999px;
	padding:3px 10px; font-weight:800; font-size:11px;
}

.ftepg-body{ display:flex; flex-direction:column; gap:8px; padding:16px 20px; flex:1 1 auto; }
.ftepg-cat{
	font-size:10.5px; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
	color:var(--pg-acc);
}
.ftepg-title{ font-size:18px; font-weight:800; color:var(--pg-navy); letter-spacing:-.01em; line-height:1.25; margin:0; }
.ftepg-blurb{ font-size:14px; line-height:1.5; color:var(--pg-soft); margin:0; flex:1 1 auto; }
.ftepg-meta{
	display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px;
	font-size:12.5px; font-weight:600; color:var(--pg-muted); margin-top:2px;
}
.ftepg-diff{
	background:var(--pg-slate); border:1px solid var(--pg-line); border-radius:999px;
	padding:2px 9px; font-weight:800; font-size:11.5px; color:var(--pg-soft);
}
.ftepg-audio{ color:var(--pg-news); font-weight:800; }
.ftepg-go{ font-size:13.5px; font-weight:900; color:var(--pg-acc); margin-top:4px; }
.ftepg-empty{ text-align:center; color:var(--pg-muted); font-size:15px; margin:18px 0 0; }

/* ─────────────────────── Pages de jeu ─────────────────────── */
.ftepgx-game-h1{
	text-align:center; color:var(--pg-navy); font-weight:800; letter-spacing:-.02em;
	font-size:clamp(1.7rem,2vw + 1.1rem,2.6rem); line-height:1.15; margin:18px 0 22px;
}
.ftepgx-back{ max-width:760px; margin:22px auto 0; padding:0 4px; font-size:14px; }
.ftepgx-back a{ color:var(--pg-muted); font-weight:700; text-decoration:none; }
.ftepgx-back a:hover{ color:var(--pg-navy); }
.ftepgx-quiz{ max-width:760px; margin:0 auto; }

.ftepg-related{ max-width:1140px; margin:44px auto 30px; }
.ftepg-rel-head{ display:flex; align-items:center; gap:16px; margin:0 0 18px; }
.ftepg-rel-head h2{
	color:var(--pg-navy); font-size:15px; font-weight:800; margin:0;
	letter-spacing:.4px; text-transform:uppercase; white-space:nowrap;
}
.ftepg-rel-line{ flex:1 1 auto; height:1px; background:var(--pg-border); }
.ftepg-grid-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1024px){ .ftepg-grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .ftepg-grid-3{ grid-template-columns:1fr; } }
.ftepg-all{ text-align:center; margin:18px 0 0; font-size:14.5px; }
.ftepg-all a{ color:var(--pg-navy); font-weight:800; text-decoration:none; }
.ftepg-all a:hover{ text-decoration:underline; }

/* ─────────── Bande Learning Center du catalogue ─────────── */
.ftepgx-lc{ background:#EEF4FC; border-top:1px solid var(--pg-border); border-bottom:1px solid var(--pg-border); padding:clamp(34px,5vw,54px) 20px; text-align:center; }
.ftepgx-lc-in{ max-width:680px; margin:0 auto; }
.ftepgx-lc-cta{ margin:20px 0 0; }
.ftepgx-lc-cta a{
	display:inline-block; text-decoration:none; background:var(--pg-lc); color:#fff;
	font-weight:800; font-size:15.5px; padding:13px 28px; border-radius:12px;
	letter-spacing:-.005em; transition:transform .12s ease, filter .15s ease;
}
.ftepgx-lc-cta a:hover{ transform:translateY(-1px); filter:brightness(1.08); color:#fff; }

/* ─────────── Section « About » + FAQ des pages de jeu (SEO) ─────────── */
.ftepgx-about{ max-width:760px; margin:44px auto 36px; padding:0 4px; }
.ftepgx-about h2{
	color:var(--pg-navy); font-weight:800; letter-spacing:-.015em;
	font-size:clamp(1.25rem,1vw + 1rem,1.6rem); line-height:1.25; margin:0 0 14px;
}
.ftepgx-about p{ color:var(--pg-soft); font-size:16px; line-height:1.7; margin:0 0 14px; }
.ftepgx .faq{ margin-top:26px; border-top:1px solid var(--pg-border); }
.ftepgx .faq details{ border-bottom:1px solid var(--pg-border); }
.ftepgx .faq summary{
	cursor:pointer; list-style:none; position:relative;
	padding:15px 34px 15px 0; font-weight:700; color:var(--pg-navy); font-size:16.5px;
}
.ftepgx .faq summary::-webkit-details-marker{ display:none; }
.ftepgx .faq summary::after{
	content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%);
	color:var(--pg-lc); font-weight:800; font-size:20px;
}
.ftepgx .faq details[open] summary::after{ content:"\2212"; }
.ftepgx .faq details p{ padding:0 0 16px 27px; margin:0; color:var(--pg-soft); font-size:15.5px; line-height:1.65; }

@media (prefers-reduced-motion:reduce){
	.ftepgx-cta-level, .ftepgx-dot{ animation:none; }
	.ftepg-card, .fteq-lv2-card, .ftepgx-cta{ transition:none; }
}