/* Accueil : sélecteur de formule, barre d'offres animée, appel à l'action collant. Tokens --lp-* de accueil.css. */

/* ---------- Barre d'offres ---------- */
.lp-bonus-bar { position: relative; overflow: hidden; background: linear-gradient(100deg, var(--lp-brand), color-mix(in srgb, var(--lp-brand) 70%, var(--lp-brand-2))); }
.lp-bonus-bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%); transform: translateX(-100%); animation: lp-brillance 5s ease-in-out 1.5s infinite; pointer-events: none; }
@keyframes lp-brillance { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.lp-bonus-chip { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: center; color: #fff; text-decoration: none; padding: .15rem .5rem; border-radius: 999px; transition: background .15s; }
.lp-bonus-chip:hover { background: rgba(255,255,255,.14); }
.lp-bonus-chip > .ti-gift { animation: lp-secoue 3.2s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes lp-secoue { 0%, 70%, 100% { transform: rotate(0); } 75% { transform: rotate(-14deg); } 80% { transform: rotate(12deg); } 85% { transform: rotate(-8deg); } 90% { transform: rotate(5deg); } }
.lp-bonus-remise { font-weight: 800; }
.lp-bonus-chip code { cursor: copy; background: rgba(255,255,255,.2); border: 1px dashed rgba(255,255,255,.6); color: #fff; padding: 1px 8px; border-radius: 6px; font-weight: 800; letter-spacing: .06em; }
.lp-bonus-chip code.lp-copie::after { content: " ✓ copié"; font-weight: 600; letter-spacing: 0; }
.lp-bonus-fin { font-style: normal; font-size: .78rem; font-weight: 700; background: var(--lp-warning, #f5b83d); color: #1b1300; padding: 1px 8px; border-radius: 999px; animation: lp-battement 1.8s ease-in-out infinite; }
@keyframes lp-battement { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* ---------- Hero : accès rapide Educom School ---------- */
.lp-hero-famille { display: inline-flex; align-items: center; gap: .65rem; margin-top: 1.25rem; padding: .5rem 1rem .5rem .6rem; border-radius: 999px; text-decoration: none; color: var(--lp-ink);
    background: var(--lp-soft); border: 1px solid color-mix(in srgb, var(--lp-brand) 25%, transparent); font-size: .92rem; transition: transform .2s, box-shadow .2s; }
.lp-hero-famille:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px var(--lp-brand); }
.lp-hero-famille strong { color: var(--lp-brand); }
.lp-hero-famille .ti-arrow-right { color: var(--lp-brand); transition: transform .2s; }
.lp-hero-famille:hover .ti-arrow-right { transform: translateX(4px); }
.lp-pulse { animation: lp-pulsation 2.8s ease-in-out 1.5s infinite; }
@keyframes lp-pulsation { 0%, 100% { box-shadow: 0 8px 20px -8px var(--lp-brand), 0 0 0 0 color-mix(in srgb, var(--lp-brand) 45%, transparent); } 50% { box-shadow: 0 8px 20px -8px var(--lp-brand), 0 0 0 10px transparent; } }

/* ---------- Sélecteur de formule ---------- */
.lp-choix { padding-top: 3.5rem; }
.lp-choix-onglets { position: relative; display: flex; width: fit-content; max-width: 100%; margin: 0 auto 1.75rem; padding: 6px; gap: 2px; border-radius: 999px; background: var(--lp-tint); border: 1px solid var(--lp-line); overflow-x: auto; scrollbar-width: none; }
.lp-choix-onglets::-webkit-scrollbar { display: none; }
.lp-choix-curseur { position: absolute; top: 6px; bottom: 6px; left: 0; width: var(--w, 0); transform: translateX(var(--x, 0)); border-radius: 999px; background: var(--lp-brand); box-shadow: 0 8px 20px -10px var(--lp-brand); transition: transform .35s cubic-bezier(.4, 0, .2, 1), width .35s cubic-bezier(.4, 0, .2, 1); }
.lp-choix-onglets button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.25rem; border: 0; background: none; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700; color: var(--lp-muted); white-space: nowrap; transition: color .25s; }
.lp-choix-onglets button small { font-weight: 600; opacity: .85; font-size: .78rem; }
.lp-choix-onglets button[aria-selected="true"] { color: var(--lp-on-brand); }
.lp-choix-onglets button:focus-visible { outline: 3px solid color-mix(in srgb, var(--lp-brand) 55%, transparent); outline-offset: 2px; }

.lp-choix-panneau { display: grid; grid-template-columns: 1.05fr 1fr; gap: 2rem; align-items: center; padding: 2rem; border-radius: var(--lp-radius); background: var(--lp-card); border: 1px solid var(--lp-line); box-shadow: var(--lp-shadow); animation: lp-panneau .45s ease both; }
.lp-choix-panneau[hidden] { display: none; }
@keyframes lp-panneau { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.lp-choix-gauche h3 { margin: 0 0 1rem; font-size: 1.45rem; line-height: 1.25; }
.lp-choix-points { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .55rem; color: var(--lp-muted); }
.lp-choix-points .ti { color: var(--lp-brand); margin-right: .35rem; }
.lp-choix-points b { color: var(--lp-ink); }
.lp-choix-promo { color: var(--lp-ink); font-weight: 600; }
.lp-choix-promo code { background: var(--lp-soft); border: 1px dashed var(--lp-brand); padding: 1px 8px; border-radius: 6px; color: var(--lp-brand); font-weight: 800; }
.lp-choix-legende { margin: 0 0 .6rem; font-size: .85rem; font-weight: 600; color: var(--lp-muted); }
.lp-choix-droite { min-width: 0; }

.lp-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.lp-chip { display: grid; gap: 2px; padding: .65rem 1rem; border-radius: 14px; text-decoration: none; color: var(--lp-ink); background: var(--lp-tint); border: 1px solid var(--lp-line); transition: transform .2s, border-color .2s, box-shadow .2s; }
.lp-chip small { color: var(--lp-muted); }
.lp-chip:hover { transform: translateY(-3px); border-color: var(--lp-brand); box-shadow: 0 12px 24px -16px var(--lp-brand); }
.fx-carte.lp-flash { animation: lp-flash 1.6s ease; }
@keyframes lp-flash { 0%, 100% { box-shadow: var(--lp-shadow); } 30% { box-shadow: 0 0 0 4px var(--lp-brand), 0 20px 40px -16px var(--lp-brand); transform: translateY(-6px); } }

.lp-choix-resume { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.1rem; padding: .7rem 1rem; border-radius: 14px; background: var(--lp-soft); }
.lp-choix-resume span { color: var(--lp-muted); font-size: .85rem; }
.lp-choix-resume strong { font-size: 1.05rem; }
.lp-choix-resume em { font-style: normal; font-weight: 800; font-size: 1.15rem; color: var(--lp-brand); margin-left: auto; }
.lp-choix-resume em.lp-saut { animation: lp-saut .35s ease; }
@keyframes lp-saut { 40% { transform: scale(1.18); } }

.lp-es-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.lp-es-familles { display: grid; gap: .75rem; }
.lp-es-plan { position: relative; display: grid; gap: 2px; justify-items: center; text-align: center; padding: 1.1rem .75rem; border-radius: 16px; cursor: pointer; font: inherit; color: var(--lp-ink); background: var(--lp-card); border: 2px solid var(--lp-line); transition: transform .2s, border-color .2s, box-shadow .2s, background .2s; }
.lp-es-plan:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--lp-brand) 60%, var(--lp-line)); }
.lp-es-plan.actif { border-color: var(--lp-brand); background: var(--lp-soft); box-shadow: 0 16px 30px -18px var(--lp-brand); }
.lp-es-plan:focus-visible { outline: 3px solid color-mix(in srgb, var(--lp-brand) 55%, transparent); outline-offset: 2px; }
.lp-es-nom { font-weight: 700; }
.lp-es-plan strong { font-size: 1.45rem; line-height: 1.1; }
.lp-es-plan strong small { font-size: .7rem; font-weight: 600; color: var(--lp-muted); }
.lp-es-sous { font-size: .8rem; color: var(--lp-muted); }
.lp-es-famille { grid-template-columns: 1fr auto; justify-items: start; text-align: left; align-items: center; row-gap: 0; }
.lp-es-famille .lp-es-nom { grid-column: 1; } .lp-es-famille strong { grid-column: 2; grid-row: 1 / 3; } .lp-es-famille .lp-es-sous { grid-column: 1; }
.lp-es-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); padding: 2px 10px; border-radius: 999px; background: var(--lp-brand); color: var(--lp-on-brand); font-size: .7rem; font-weight: 800; white-space: nowrap; }
.lp-es-badge-vert { background: var(--edu-color-success, #1f9d55); }

.lp-choix-visuel { position: relative; min-height: 220px; }
.lp-orbe { position: absolute; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; font-size: 2.2rem; color: var(--lp-on-brand); background: var(--lp-brand); box-shadow: 0 20px 36px -16px var(--lp-brand); left: 12%; top: 10%; animation: lp-flotte 5s ease-in-out infinite; }
.lp-orbe-2 { width: 68px; height: 68px; font-size: 1.6rem; left: 52%; top: 4%; background: var(--lp-brand-2); animation-delay: -1.6s; }
.lp-orbe-3 { width: 78px; height: 78px; font-size: 1.8rem; left: 34%; top: 52%; background: var(--lp-warning, #f5b83d); color: #1b1300; animation-delay: -3.2s; }
@keyframes lp-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* ---------- Offres : cartes plus vivantes ---------- */
.fx-carte { transition: transform .25s, box-shadow .25s; }
.fx-carte:hover { transform: translateY(-6px); }
.fx-vedette { animation: lp-vedette 3.5s ease-in-out infinite; }
@keyframes lp-vedette { 0%, 100% { box-shadow: 0 18px 36px -22px var(--lp-brand); } 50% { box-shadow: 0 24px 44px -16px var(--lp-brand); } }

/* ---------- Appel à l'action collant ---------- */
.lp-sticky { position: fixed; left: 50%; bottom: 18px; z-index: 60; display: flex; align-items: center; gap: .75rem; padding: .6rem .6rem .6rem 1.25rem; border-radius: 999px; background: var(--lp-card); border: 1px solid var(--lp-line); box-shadow: 0 18px 48px -14px rgba(16, 24, 40, .35);
    transform: translate(-50%, 140%); opacity: 0; transition: transform .45s cubic-bezier(.2, .9, .3, 1.2), opacity .3s; }
.lp-sticky.lp-visible { transform: translate(-50%, 0); opacity: 1; }
.lp-sticky[hidden] { display: none; }
.lp-sticky-texte { display: grid; line-height: 1.2; }
.lp-sticky-texte span { font-size: .8rem; color: var(--lp-muted); }
.lp-sticky-fermer { border: 0; background: none; cursor: pointer; padding: .4rem; color: var(--lp-muted); border-radius: 50%; }
.lp-sticky-fermer:hover { background: var(--lp-tint); }

@media (max-width: 900px) {
    .lp-choix-panneau { grid-template-columns: 1fr; padding: 1.4rem; }
    .lp-sticky { left: 12px; right: 12px; bottom: 12px; transform: translateY(140%); border-radius: 18px; padding: .6rem; flex-wrap: wrap; }
    .lp-sticky.lp-visible { transform: none; }
    .lp-sticky-texte { width: 100%; padding-left: .4rem; }
    .lp-sticky .lp-btn { flex: 1; justify-content: center; padding-inline: .75rem; }
    .lp-sticky-fermer { position: absolute; top: 4px; right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-bonus-bar::after, .lp-bonus-chip > .ti-gift, .lp-bonus-fin, .lp-pulse, .lp-orbe, .fx-vedette, .lp-choix-panneau { animation: none; }
    .lp-choix-curseur, .lp-sticky { transition: none; }
}