/* Pages publiques créateur (decouvrir / devenir) - couleurs issues des jetons du thème administrable */
.cp { --cp-p: var(--edu-color-primary, var(--edu-color-primary)); --cp-rgb: var(--edu-color-primary-rgb, 10, 132, 255); --cp-r: var(--edu-radius-lg, 16px); display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
.cp-hero { position: relative; overflow: hidden; border-radius: var(--edu-radius-xl, 24px); padding: clamp(1.5rem, 5vw, 3rem); color: #fff; background: linear-gradient(135deg, var(--cp-p), rgba(var(--cp-rgb), .7)); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.5rem; }
.cp-hero::before, .cp-hero::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.12); animation: cp-bulle 9s ease-in-out infinite; }
.cp-hero::before { width: 220px; height: 220px; top: -70px; right: 12%; }
.cp-hero::after { width: 140px; height: 140px; bottom: -50px; left: 35%; animation-delay: -4s; }
@keyframes cp-bulle { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(14px) scale(1.06); } }
.cp-hero > * { position: relative; z-index: 1; }
.cp-hero h1 { color: inherit; font-size: clamp(1.6rem, 4.5vw, 2.6rem); font-weight: 800; margin: 0 0 .5rem; line-height: 1.15; }
.cp-hero p { margin: 0 0 1.25rem; opacity: .95; max-width: 46ch; }
.cp-hero-mascotte { animation: cp-saute 3.2s ease-in-out infinite; }
@keyframes cp-saute { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.cp-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.25rem; border-radius: var(--edu-radius-pill, 999px); font-weight: 700; text-decoration: none; border: 2px solid transparent; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; cursor: pointer; }
.cp-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.cp-btn-light { background: #fff; color: var(--cp-p); }
.cp-btn-primary { background: var(--cp-p); color: #fff; }
.cp-btn-line { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.cp-btn-line.sombre { color: var(--cp-p); border-color: rgba(var(--cp-rgb), .4); }
.cp-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.cp-titre { font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 800; margin: 0 0 1rem; }
.cp-reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease var(--d, 0ms), transform .55s ease var(--d, 0ms); }
.cp-reveal.cp-in { opacity: 1; transform: none; }

/* Découvrir */
.cp-recherche { display: flex; align-items: center; gap: .6rem; background: #fff; color: #1f2937; border-radius: var(--edu-radius-pill, 999px); padding: .35rem .5rem .35rem 1rem; max-width: 520px; box-shadow: 0 6px 20px rgba(0,0,0,.15); }
.cp-recherche input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 1rem; min-width: 0; padding: .45rem 0; }
.cp-recherche button { border: 0; background: var(--cp-p); color: #fff; border-radius: var(--edu-radius-pill, 999px); padding: .55rem 1rem; font-weight: 700; }
.cp-chips { display: flex; gap: .5rem; overflow-x: auto; padding: .25rem 0 .5rem; scrollbar-width: none; }
.cp-chips::-webkit-scrollbar { display: none; }
.cp-chip { white-space: nowrap; padding: .45rem .95rem; border-radius: var(--edu-radius-pill, 999px); background: rgba(var(--cp-rgb), .08); color: var(--cp-p); font-weight: 600; text-decoration: none; border: 1px solid transparent; transition: background-color .2s ease, transform .2s ease; }
.cp-chip:hover { background: rgba(var(--cp-rgb), .16); transform: translateY(-1px); }
.cp-chip.actif { background: var(--cp-p); color: #fff; }
.cp-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.1rem; }
.cp-carte { display: flex; flex-direction: column; background: var(--edu-color-surface, #fff); border: 1px solid rgba(var(--cp-rgb), .15); border-radius: var(--cp-r); overflow: hidden; text-decoration: none; color: inherit; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.cp-carte:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(var(--cp-rgb), .18); border-color: rgba(var(--cp-rgb), .4); }
.cp-carte[hidden] { display: none; }
.cp-visuel { height: 92px; display: grid; place-items: center; font-size: 2.2rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--cp-p), rgba(var(--cp-rgb), .55)); position: relative; }
.cp-carte:nth-child(3n+2) .cp-visuel { background: linear-gradient(135deg, rgba(var(--cp-rgb), .85), rgba(var(--cp-rgb), .4)); }
.cp-carte:nth-child(3n) .cp-visuel { background: linear-gradient(135deg, rgba(var(--cp-rgb), .6), var(--cp-p)); }
.cp-badge { position: absolute; top: .6rem; left: .6rem; font-size: .72rem; font-weight: 700; padding: .2rem .55rem; border-radius: var(--edu-radius-pill, 999px); background: #fff; color: var(--cp-p); }
.cp-corps { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.cp-corps h3 { font-size: 1.02rem; font-weight: 700; margin: 0; line-height: 1.3; }
.cp-meta { display: flex; justify-content: space-between; align-items: center; font-size: .88rem; color: var(--edu-color-text-muted, #6b7280); margin-top: auto; }
.cp-prix { font-weight: 800; color: var(--cp-p); }
.cp-etoiles { color: var(--edu-color-accent); letter-spacing: 1px; }
.cp-vide { text-align: center; padding: 2.5rem 1rem; border: 2px dashed rgba(var(--cp-rgb), .3); border-radius: var(--cp-r); }
.cp-vide i { font-size: 2.4rem; color: var(--cp-p); }

/* Devenir */
.cp-etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; counter-reset: e; }
.cp-etape { position: relative; padding: 1.25rem; border-radius: var(--cp-r); background: rgba(var(--cp-rgb), .07); counter-increment: e; }
.cp-etape::before { content: counter(e); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--cp-p); color: #fff; font-weight: 800; margin-bottom: .6rem; }
.cp-etape h3 { font-size: 1.05rem; margin: 0 0 .3rem; font-weight: 700; }
.cp-etape p { margin: 0; font-size: .92rem; color: var(--edu-color-text-muted, #6b7280); }
.cp-avantages { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.cp-avantage { padding: 1.2rem; border: 1px solid rgba(var(--cp-rgb), .15); border-radius: var(--cp-r); background: var(--edu-color-surface, #fff); transition: transform .25s ease, box-shadow .25s ease; }
.cp-avantage:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(var(--cp-rgb), .15); }
.cp-avantage i { font-size: 1.6rem; color: var(--cp-p); display: inline-grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: var(--edu-radius-md, 12px); background: rgba(var(--cp-rgb), .1); margin-bottom: .6rem; transition: transform .3s ease; }
.cp-avantage:hover i { transform: scale(1.12) rotate(-5deg); }
.cp-avantage h3 { font-size: 1.02rem; margin: 0 0 .3rem; font-weight: 700; }
.cp-avantage p { margin: 0; font-size: .92rem; color: var(--edu-color-text-muted, #6b7280); }
.cp-simu { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; padding: clamp(1.1rem, 3vw, 2rem); border-radius: var(--edu-radius-xl, 24px); background: rgba(var(--cp-rgb), .07); align-items: center; }
.cp-champ { margin-bottom: 1rem; }
.cp-champ label { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: .3rem; }
.cp-champ output { color: var(--cp-p); font-weight: 800; }
.cp-champ input[type=range] { width: 100%; accent-color: var(--cp-p); }
.cp-resultat { text-align: center; padding: 1.25rem; border-radius: var(--cp-r); background: var(--cp-p); color: #fff; }
.cp-resultat strong { display: block; font-size: clamp(1.6rem, 5vw, 2.3rem); font-weight: 800; line-height: 1.1; }
.cp-resultat small { opacity: .9; }
.cp-note { font-size: .82rem; color: var(--edu-color-text-muted, #6b7280); margin: .5rem 0 0; }
.cp-faq details { border: 1px solid rgba(var(--cp-rgb), .18); border-radius: var(--edu-radius-md, 12px); padding: .8rem 1rem; margin-bottom: .6rem; background: var(--edu-color-surface, #fff); }
.cp-faq summary { font-weight: 700; cursor: pointer; }
.cp-faq p { margin: .5rem 0 0; color: var(--edu-color-text-muted, #6b7280); }
.cp-fin { text-align: center; padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: var(--edu-radius-xl, 24px); background: linear-gradient(135deg, var(--cp-p), rgba(var(--cp-rgb), .7)); color: #fff; }
.cp-fin h2 { color: inherit; margin: 0 0 .5rem; font-weight: 800; }
.cp-fin .cp-actions { justify-content: center; }

@media (max-width: 720px) {
    .cp-hero { grid-template-columns: 1fr; }
    .cp-hero-mascotte { width: 110px !important; height: 120px !important; order: -1; }
    .cp-simu { grid-template-columns: 1fr; }
    .cp-actions .cp-btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .cp-hero::before, .cp-hero::after, .cp-hero-mascotte { animation: none; }
    .cp-reveal { opacity: 1; transform: none; transition: none; }
    .cp-carte:hover, .cp-avantage:hover, .cp-btn:hover, .cp-chip:hover { transform: none; }
}