/* ==========================================================================
   Page MPI Kids : univers dessiné (dessins d'enfants intégrés au décor,
   sans cadres). Chargé uniquement sur la page Kids (FR, EN, ES).
   ========================================================================== */

:root { --kid-sky: #EAF4FF; --kid-cream: #FFF7E8; --kid-pink: #FCE8E2; --kid-mint: #E1F5EF; --kid-lilac: #EFEAFB; }
.x-kid-hand { font-family: "Caveat", "Comic Sans MS", cursive; font-weight: 700; }

/* ---------- En-tête ---------- */
.x-kids-hero { position: relative; overflow: hidden; background: radial-gradient(40% 60% at 92% 10%, rgba(244,166,42,.22), transparent 60%), radial-gradient(45% 55% at 0% 100%, rgba(76,201,182,.18), transparent 60%), linear-gradient(180deg, var(--kid-sky) 0%, var(--kid-cream) 100%); color: var(--navy); }
.x-kids-hero::before { content: ""; position: absolute; inset: 0; background: url("../images/illustrations/kids-doodles-bg.svg") repeat; background-size: 520px auto; opacity: .55; pointer-events: none; }
.x-kids-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.05fr; gap: 30px; align-items: center; padding-top: 48px; padding-bottom: 70px; }
.x-kids-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 26px; line-height: 1; color: var(--teal); transform: rotate(-3deg); }
.x-kids-badge svg { width: 28px; height: 28px; }
.x-kids-hero h1 { font: 800 clamp(30px, 4.2vw, 52px)/1.08 var(--font); letter-spacing: -.02em; color: var(--navy); margin: 0 0 16px; }
.x-kids-hero h1 em { position: relative; font-style: normal; color: #E0882A; white-space: nowrap; }
.x-kids-hero h1 em::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -10px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14'%3E%3Cpath d='M3 9 Q 40 2 80 8 T 160 7 T 197 6' fill='none' stroke='%234CC9B6' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.x-kids-hero p.x-kids-lead { font-size: 18px; line-height: 29px; color: #3E5068; margin: 0 0 22px; max-width: 540px; }
.x-kids-hero .btn-row { gap: 12px; }
.x-kids-hero .btn-kid-ghost { background: #fff; color: var(--navy); border: 2px dashed var(--navy); box-shadow: none; }
.x-kids-hero .btn-kid-ghost:hover { background: var(--navy); color: #fff; }
.x-kids-hero-art { position: relative; }
.x-kids-hero-art img { display: block; width: 100%; height: auto; animation: x-kid-float 7s ease-in-out infinite; }
.x-kids-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 60px; z-index: 1; display: block; }
@keyframes x-kid-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(-.6deg); } }

/* ---------- Soft skills ---------- */
.x-kids-skills { position: relative; background: #fff; padding: 56px 0 64px; }
.x-kids-skills .x-head { text-align: center; margin: 0 auto 30px; }
.x-kids-skills .x-h2 em { font-style: normal; color: #E0882A; }
.x-skills { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.x-skill { text-align: center; }
.x-skill svg { display: block; width: 92px; height: 92px; margin: 0 auto 8px; transition: transform .4s var(--ease); }
.x-skill:nth-child(odd) svg { transform: rotate(-4deg); }
.x-skill:nth-child(even) svg { transform: rotate(4deg); }
.x-skill:hover svg { transform: rotate(0) scale(1.08); }
.x-skill b { display: block; font-size: 26px; line-height: 1.05; color: var(--navy); }

/* ---------- Activités ---------- */
.x-kids-acts { position: relative; background: linear-gradient(180deg, var(--kid-cream), #FFFFFF); }
.x-kids-acts::before { content: ""; position: absolute; inset: 0; background: url("../images/illustrations/kids-doodles-bg.svg") repeat; background-size: 600px auto; opacity: .35; pointer-events: none; }
.x-kids-acts .x-wrap { position: relative; z-index: 1; }
.x-kids-acts .x-card { border: 0; border-radius: 28px 28px 28px 8px; padding: 26px 24px 22px; box-shadow: 0 10px 26px rgba(15, 42, 74, .07); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.x-kids-acts .x-card:nth-child(6n+1) { background: var(--kid-sky); }
.x-kids-acts .x-card:nth-child(6n+2) { background: var(--kid-pink); }
.x-kids-acts .x-card:nth-child(6n+3) { background: var(--kid-mint); }
.x-kids-acts .x-card:nth-child(6n+4) { background: #FFF1D6; }
.x-kids-acts .x-card:nth-child(6n+5) { background: var(--kid-lilac); }
.x-kids-acts .x-card:nth-child(6n+6) { background: #E6F7FB; }
.x-kids-acts .x-card:nth-child(odd):hover { transform: translateY(-6px) rotate(-1deg); }
.x-kids-acts .x-card:nth-child(even):hover { transform: translateY(-6px) rotate(1deg); }
.x-kids-acts .x-card::before { content: ""; display: block; width: 46px; height: 12px; margin-bottom: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 12'%3E%3Cpath d='M2 7 Q 8 1 14 6 T 26 6 T 38 6 T 44 5' fill='none' stroke='%23F4A62A' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat; }
.x-kids-acts .x-card:nth-child(3n+2)::before { filter: hue-rotate(140deg); }
.x-kids-acts .x-card:nth-child(3n)::before { filter: hue-rotate(200deg); }
.x-kids-acts .x-card .x-meta { color: var(--teal); font-weight: 700; }

/* ---------- Pour les parents : dessin sans cadre ---------- */
.x-kids-parents { background: #fff; }
.x-kids-parents .x-split-media img { display: block; width: 100%; height: auto; }

/* ---------- Appel final ---------- */
.x-cta.x-cta-kids { grid-template-columns: 1fr; background: linear-gradient(120deg, #1E5AA8, #0E7C70); text-align: center; overflow: hidden; }
.x-cta.x-cta-kids .x-cta-text { position: relative; z-index: 1; padding: 54px 40px; }
.x-cta.x-cta-kids .btn-row { justify-content: center; }
.x-cta.x-cta-kids::before { content: ""; position: absolute; inset: 0; background: url("../images/illustrations/kids-doodles-bg.svg") repeat; background-size: 460px auto; opacity: .35; filter: brightness(2.2) saturate(.4); }

/* ---------- Tablette et téléphone : même disposition, en plus petit ---------- */
@media (max-width: 980px) {
	.x-kids-hero-grid { grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 32px; padding-bottom: 56px; }
	.x-kids-hero p.x-kids-lead { font-size: 15px; line-height: 24px; }
	.x-skills { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
	.x-skill svg { width: 68px; height: 68px; }
	.x-skill b { font-size: 20px; }
}
@media (max-width: 600px) {
	.x-kids-hero-grid { gap: 10px; padding-top: 22px; padding-bottom: 44px; }
	.x-kids-badge { font-size: 18px; margin-bottom: 4px; }
	.x-kids-badge svg { width: 18px; height: 18px; }
	.x-kids-hero h1 { font-size: 20px; margin-bottom: 8px; }
	.x-kids-hero h1 em::after { bottom: -6px; height: 8px; }
	.x-kids-hero p.x-kids-lead { font-size: 11.5px; line-height: 17px; margin-bottom: 10px; }
	.x-kids-hero .btn { min-height: 30px; padding: 6px 9px; font-size: 10.5px; border-radius: 10px; }
	.x-kids-hero .btn-row { gap: 5px; }
	.x-kids-wave { height: 30px; }
	.x-kids-skills { padding: 36px 0 40px; }
	.x-skills { gap: 4px; }
	.x-skill svg { width: 46px; height: 46px; margin-bottom: 4px; }
	.x-skill b { font-size: 13px; }
	.x-kids-acts .x-card { padding: 10px 8px; border-radius: 16px 16px 16px 6px; }
	.x-kids-acts .x-card::before { width: 28px; height: 8px; margin-bottom: 6px; background-size: 100% 100%; }
	.x-cta.x-cta-kids .x-cta-text { padding: 24px 14px; }
}
@media (prefers-reduced-motion: reduce) { .x-kids-hero-art img { animation: none; } }
@media (max-width: 600px) { .x-skill b { font-size: 10px; line-height: 1.05; letter-spacing: -.2px; overflow-wrap: anywhere; } .x-skills { gap: 2px; } }