/* ════════════════════════════════════════════════════════════════════════
LecturespiKto — Premium design system
Cinématique / cosmos / éditorial.
Préfixes : .lp-* (login) .pp-* (landing) .r-* (reader)
Polices : Nunito 300-900 + Arial Rounded MT Bold (fallback Nunito)
════════════════════════════════════════════════════════════════════════ */
:root{
/* Nuit cosmique */
--night-1: #0E0A2E;
--night-2: #1A1147;
--night-3: #2A1A6B;
/* Indigo / violet primaire */
--indigo: #5443BF;
--indigo-2: #5E4DCC;
--indigo-deep: #2A1F75;
--violet: #6E4FD6;
/* Accents */
--magenta: #E83D8E;
--pink: #FF6FB8;
--yellow: #FFD43B;
--cyan: #5BB8E5;
--peach: #FF9966;
--green: #7BC97D;
/* Côté clair */
--cream: #FBF7EE;
--cream-2: #F4EFE0;
--paper: #FFFFFF;
--field: #F4F1EA;
--line: #E5E1D5;
--line-soft: #EFEBDF;
/* Texte */
--ink: #1A1340;
--ink-2: #2A2456;
--ink-soft: #6B6890;
--ink-mute: #9E9CB5;
--on-night: #F4EFFF;
--on-night-soft:#B8B0E0;
/* Sidebar lecteur */
--side-bg: #2A1F75;
--side-bg-2: #1F1656;
--side-card: rgba(255,255,255,.06);
--side-line: rgba(255,255,255,.10);
/* Rayons & ombres */
--r-sm: 8px;
--r: 14px;
--r-lg: 22px;
--r-xl: 30px;
--r-pill: 999px;
--shadow-soft: 0 8px 24px rgba(15,8,40,.06);
--shadow-card: 0 16px 40px rgba(15,8,40,.10);
--shadow-deep: 0 30px 70px rgba(8,4,30,.30);
--shadow-glow: 0 12px 30px rgba(232,61,142,.28);
--ease: cubic-bezier(.4,0,.2,1);
}
/* ════════════════════════════════════════════════════════════════════════
Base — uniquement pour les pages premium (body.lspk)
On ne reset PAS globalement pour ne pas casser le reste du site.
════════════════════════════════════════════════════════════════════════ */
body.lspk{
margin:0;padding:0;
font-family:'Nunito','Avenir Next','Avenir','Inter',system-ui,sans-serif;
font-size:15px;line-height:1.55;
color:var(--ink);
background:var(--paper);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
body.lspk *,body.lspk *::before,body.lspk *::after{box-sizing:border-box}
body.lspk img{max-width:100%;display:block}
body.lspk a{color:inherit;text-decoration:none}
body.lspk button{font-family:inherit;cursor:pointer;border:none;background:none}
body.lspk input,body.lspk select,body.lspk textarea{font-family:inherit}
/* Variantes body */
body.lspk-reader{background:#0A0825;color:var(--on-night);min-height:100vh}
body.lspk-login{min-height:100vh;background:var(--night-2)}
body.lspk-onboard{min-height:100vh;background:var(--night-2)}
body.lspk-home,body.lspk-landing{background:var(--paper)}
body.lspk-dash{background:var(--cream)}
@keyframes lspk-floaty{
0%,100%{transform:translateY(0) rotate(0)}
50%{transform:translateY(-12px) rotate(3deg)}
}
/* ════════════════════════════════════════════════════════════════════════
FLASH messages — toasts colorés (générés par Flash::display())
════════════════════════════════════════════════════════════════════════ */
@keyframes lspk-toast-in{
0%{opacity:0;transform:translateY(-12px) scale(.96)}
100%{opacity:1;transform:translateY(0) scale(1)}
}
.flash{
display:flex;align-items:flex-start;gap:12px;
padding:14px 18px;margin-bottom:10px;
background:var(--paper);
border:1px solid var(--line);
border-left:4px solid var(--indigo);
border-radius:14px;
box-shadow:0 16px 40px rgba(15,8,40,.18),0 4px 10px rgba(15,8,40,.06);
font-size:14px;font-weight:600;color:var(--ink-2);
animation:lspk-toast-in .35s cubic-bezier(.4,0,.2,1) both;
font-family:'Nunito','Avenir Next',Inter,sans-serif;
}
.flash-icon{
flex:none;width:26px;height:26px;border-radius:50%;
display:grid;place-items:center;
font-size:14px;font-weight:800;line-height:1;
background:var(--indigo);color:var(--paper);
}
.flash-text{flex:1;line-height:1.45;padding-top:3px}
.flash--success{border-left-color:var(--green)}
.flash--success .flash-icon{background:var(--green)}
.flash--error{
border-left-color:var(--magenta);
background:linear-gradient(90deg,rgba(232,61,142,.05),var(--paper) 30%);
}
.flash--error .flash-icon{background:var(--magenta)}
.flash--warning{
border-left-color:#E89A1A;
background:linear-gradient(90deg,rgba(255,212,59,.10),var(--paper) 30%);
}
.flash--warning .flash-icon{background:var(--yellow);color:var(--ink)}
.flash--info{
border-left-color:var(--cyan);
background:linear-gradient(90deg,rgba(91,184,229,.06),var(--paper) 30%);
}
.flash--info .flash-icon{background:var(--cyan)}
/* ════════════════════════════════════════════════════════════════════════
LOGIN — split-screen (image cosmique + carte formulaire)
════════════════════════════════════════════════════════════════════════ */
.lp-shell{
position:relative;
display:grid;
grid-template-columns: 1.05fr 1fr;
min-height:100vh;
background:var(--night-2);
}
/* Panneau gauche — image cosmique */
.lp-left{
position:relative;z-index:1;
color:var(--on-night);
padding:48px 56px 64px;
display:flex;flex-direction:column;
overflow:hidden;
isolation:isolate;
}
.lp-illu{
position:absolute;inset:0;
width:100%;height:100%;
object-fit:cover;
z-index:0;
pointer-events:none;
}
.lp-scrim{
position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(180deg, rgba(14,10,46,.55) 0%, rgba(14,10,46,.15) 35%, rgba(14,10,46,.10) 65%, rgba(14,10,46,.55) 100%),
linear-gradient(90deg, rgba(14,10,46,.45) 0%, transparent 60%);
}
.lp-stars{
position:absolute;inset:0;pointer-events:none;z-index:2;
background-image:
radial-gradient(1.5px 1.5px at 20% 10%, rgba(255,255,255,.9), transparent 50%),
radial-gradient(1px 1px at 60% 18%, rgba(255,255,255,.6), transparent 50%),
radial-gradient(2px 2px at 30% 30%, rgba(255,255,255,.85), transparent 50%),
radial-gradient(1px 1px at 75% 38%, rgba(255,255,255,.5), transparent 50%),
radial-gradient(1.5px 1.5px at 90% 22%, rgba(255,255,255,.8), transparent 50%),
radial-gradient(1px 1px at 50% 8%, rgba(255,255,255,.6), transparent 50%),
radial-gradient(1px 1px at 85% 60%, rgba(255,255,255,.5), transparent 50%),
radial-gradient(1.5px 1.5px at 15% 65%, rgba(255,255,255,.7), transparent 50%),
radial-gradient(1px 1px at 40% 75%, rgba(255,255,255,.4), transparent 50%);
}
.lp-floaters{position:absolute;inset:0;pointer-events:none;z-index:3}
.lp-floaters img{
position:absolute;
filter:drop-shadow(0 4px 18px rgba(0,0,0,.3));
animation:lspk-floaty 9s ease-in-out infinite;
}
.lp-brand{
position:relative;display:flex;align-items:center;gap:14px;
margin-bottom:42px;z-index:4;
}
.lp-brand__mark{
width:54px;height:54px;display:block;object-fit:contain;
filter:drop-shadow(0 4px 14px rgba(0,0,0,.35));
}
.lp-brand__txt{display:flex;flex-direction:column;line-height:1}
.lp-brand__name{font-family:Nunito,sans-serif;font-weight:800;font-size:22px;letter-spacing:-.01em}
.lp-brand__name .k{color:var(--cyan)}
.lp-brand__tagline{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-night-soft);font-weight:500;margin-top:6px}
.lp-hero{position:relative;z-index:4;margin-top:8px}
.lp-hero h1{
font-family:Nunito,sans-serif;
font-weight:800;font-size:50px;line-height:1.1;letter-spacing:-.015em;
color:var(--paper);max-width:560px;
text-shadow:0 2px 16px rgba(0,0,0,.4);
}
.lp-hero h1 .em-cyan{color:var(--cyan);font-weight:800}
.lp-hero h1 .em-yellow{color:var(--yellow);font-weight:800}
.lp-features{
position:relative;z-index:4;margin-top:36px;
display:flex;flex-direction:column;gap:18px;
max-width:480px;
}
.lp-feat{display:flex;gap:16px;align-items:flex-start;font-family:'Arial Rounded MT Bold','Arial Rounded MT',Nunito,sans-serif}
.lp-feat__icon{
flex:none;width:44px;height:44px;
display:grid;place-items:center;
filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));
}
.lp-feat__icon img{width:100%;height:100%;object-fit:contain;display:block}
.lp-feat h3{font-size:16px;font-weight:700;margin-bottom:3px;color:var(--paper);letter-spacing:.005em}
.lp-feat p{font-size:13.5px;color:#FFFFFF;line-height:1.5;font-weight:500}
/* Panneau droit — carte flottante */
.lp-right{
position:relative;z-index:5;
background:var(--paper);
padding:40px 56px 44px;
display:flex;flex-direction:column;
margin:22px 22px 22px -36px;
border-radius:30px;
box-shadow:
0 30px 70px rgba(8,4,30,.40),
-10px 0 30px rgba(8,4,30,.22);
}
.lp-right__top{display:flex;justify-content:flex-end;margin-bottom:24px}
.lp-lang{
display:inline-flex;align-items:center;gap:8px;
padding:8px 14px;background:var(--paper);
border:1.5px solid var(--line);border-radius:var(--r-pill);
font-size:13px;font-weight:500;color:var(--ink-soft);cursor:pointer;
transition:border-color .2s var(--ease);
}
.lp-lang:hover{border-color:var(--ink-mute)}
.lp-lang::after{
content:"";width:0;height:0;
border-left:4px solid transparent;border-right:4px solid transparent;
border-top:5px solid var(--ink-soft);margin-left:2px;
}
.lp-form-wrap{
flex:1;display:flex;flex-direction:column;justify-content:center;
max-width:430px;width:100%;margin:0 auto;
}
.lp-spikto-mark{display:block;width:72px;height:72px;margin:0 auto 22px;object-fit:contain}
.lp-title{
text-align:center;
font-size:32px;font-weight:800;letter-spacing:-.02em;
color:var(--ink);margin-bottom:6px;
}
.lp-title .em{color:var(--magenta)}
.lp-sub{text-align:center;font-size:14.5px;color:var(--ink-soft);margin-bottom:28px}
.lp-sub .lp-k{color:var(--cyan);font-weight:800}
.lp-tabs{display:flex;gap:0;border-bottom:1.5px solid var(--line);margin-bottom:24px}
.lp-tab{
flex:1;text-align:center;padding:12px 8px;
font-size:14px;font-weight:600;color:var(--ink-mute);
position:relative;cursor:pointer;background:none;border:none;
transition:color .2s var(--ease);
}
.lp-tab:hover{color:var(--ink-soft)}
.lp-tab.is-active{color:var(--indigo)}
.lp-tab.is-active::after{
content:"";position:absolute;left:0;right:0;bottom:-1.5px;height:2.5px;
background:linear-gradient(90deg,var(--indigo),var(--magenta));border-radius:2px;
}
.lp-field{margin-bottom:14px}
.lp-label{
display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);
margin-bottom:7px;letter-spacing:.01em;
}
.lp-input-wrap{
position:relative;display:flex;align-items:center;
background:var(--field);
border:1.5px solid transparent;border-radius:12px;
transition:border-color .15s var(--ease),background .15s var(--ease),box-shadow .15s var(--ease);
}
.lp-input-wrap:focus-within{
background:var(--paper);
border-color:var(--indigo);
box-shadow:0 0 0 4px rgba(61,45,143,.10);
}
.lp-input-wrap__icon{
flex:none;padding:0 0 0 14px;color:var(--ink-mute);
display:grid;place-items:center;
}
.lp-input-wrap__icon svg{display:block}
.lp-input{
flex:1;background:none;border:none;outline:none;
padding:13px 14px;font-size:14.5px;color:var(--ink);
}
.lp-input::placeholder{color:var(--ink-mute)}
.lp-input-toggle{
flex:none;padding:0 14px;color:var(--ink-mute);
font-size:16px;display:grid;place-items:center;
}
.lp-input-toggle:hover{color:var(--ink-soft)}
.lp-row{
display:flex;justify-content:space-between;align-items:center;
margin:6px 0 22px;font-size:13px;
}
.lp-check{display:inline-flex;align-items:center;gap:8px;color:var(--ink-soft);cursor:pointer}
.lp-check input{width:16px;height:16px;accent-color:var(--indigo);cursor:pointer}
.lp-forgot{color:var(--indigo);font-weight:600}
.lp-forgot:hover{text-decoration:underline}
.lp-btn-primary{
width:100%;padding:15px 18px;
background:var(--indigo);color:var(--paper);
border:none;border-radius:12px;
font-size:15px;font-weight:700;letter-spacing:.01em;
display:inline-flex;justify-content:center;align-items:center;gap:8px;
cursor:pointer;
transition:background .2s var(--ease),transform .15s var(--ease),box-shadow .2s var(--ease);
box-shadow:0 6px 14px rgba(84,67,191,.22);
}
.lp-btn-primary:hover{background:var(--indigo-2);transform:translateY(-1px);box-shadow:0 10px 20px rgba(84,67,191,.30)}
.lp-btn-primary:active{background:#4A38B0;transform:translateY(0);box-shadow:0 3px 8px rgba(84,67,191,.22)}
.lp-sep{
display:flex;align-items:center;gap:14px;margin:24px 0 16px;
font-size:12.5px;color:var(--ink-mute);
}
.lp-sep::before,.lp-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.lp-socials{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}
.lp-social{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:11px 8px;background:var(--paper);
border:1.5px solid var(--line);border-radius:12px;
font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer;
transition:transform .15s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.lp-social:hover{transform:translateY(-1px);border-color:var(--ink-mute);box-shadow:0 6px 14px rgba(15,8,40,.07)}
.lp-social svg{flex:none}
.lp-newcard{
display:flex;align-items:center;gap:14px;padding:14px 16px;
background:linear-gradient(135deg,#FFF6D2 0%,#FFE9A0 100%);
border:1.5px solid #F2D88C;border-radius:14px;
box-shadow:0 10px 28px rgba(180,140,20,.18),0 2px 6px rgba(180,140,20,.08);
}
.lp-newcard__star{
flex:none;width:42px;height:42px;border-radius:50%;
background:linear-gradient(135deg,var(--violet),var(--indigo));
display:grid;place-items:center;color:var(--yellow);font-size:20px;
box-shadow:0 4px 10px rgba(61,45,143,.30),inset 0 1px 0 rgba(255,255,255,.18);
}
.lp-newcard__txt{flex:1;font-size:13px;line-height:1.45;color:var(--ink-2)}
.lp-newcard__txt strong{display:block;font-size:14px;color:var(--ink);margin-bottom:1px;font-weight:800}
.lp-newcard__btn{
flex:none;padding:8px 14px;background:var(--paper);color:var(--ink-2);
border:1px solid var(--yellow);border-radius:var(--r-pill);
font-size:12.5px;font-weight:600;letter-spacing:.01em;
display:inline-flex;align-items:center;gap:5px;cursor:pointer;
transition:color .2s var(--ease),gap .2s var(--ease),box-shadow .2s var(--ease);
box-shadow:0 2px 6px rgba(180,140,20,.12);
}
.lp-newcard__btn:hover{color:var(--indigo);gap:8px;box-shadow:0 4px 12px rgba(180,140,20,.20)}
.lp-alert{
background:rgba(232,61,142,.10);
border:1px solid rgba(232,61,142,.30);
color:#9E1356;
padding:10px 14px;border-radius:10px;
font-size:13px;font-weight:500;margin-bottom:14px;
}
.lp-alert div+div{margin-top:4px}
.lp-alert--ok{background:rgba(123,201,125,.12);border-color:rgba(123,201,125,.35);color:#3B7A3D}
/* Jauge de force du mot de passe */
.lp-pwd-bar{
height:5px;border-radius:5px;background:var(--field);
margin-top:8px;overflow:hidden;
}
.lp-pwd-fill{
height:100%;width:0;border-radius:5px;
transition:width .25s var(--ease),background .25s var(--ease);
}
.lp-pwd-feedback{
margin-top:6px;font-size:11.5px;font-weight:600;letter-spacing:.01em;
}
/* Captcha */
.lp-captcha{
display:flex;align-items:center;gap:10px;
background:var(--cream);
border:1px solid var(--line);
border-radius:12px;
padding:10px 14px;
margin-bottom:14px;
}
.lp-captcha__q{
font-family:Georgia,serif;font-size:16px;font-weight:700;color:var(--ink);
white-space:nowrap;
}
.lp-captcha input{
flex:1;background:var(--paper);border:1px solid var(--line);
border-radius:8px;padding:8px 12px;font-size:14px;outline:none;
font-family:inherit;color:var(--ink);max-width:120px;
transition:border-color .15s var(--ease);
}
.lp-captcha input:focus{border-color:var(--indigo)}
/* Consentement */
.lp-consent{
display:flex;gap:10px;align-items:flex-start;
font-size:12.5px;color:var(--ink-soft);line-height:1.45;
margin-bottom:18px;
}
.lp-consent input{
flex:none;width:16px;height:16px;margin-top:2px;
accent-color:var(--indigo);cursor:pointer;
}
.lp-consent a{color:var(--indigo);text-decoration:underline;font-weight:600}
.lp-btn-primary:disabled{opacity:.45;cursor:not-allowed}
.lp-btn-primary:disabled:hover{transform:none;background:var(--indigo);box-shadow:0 6px 14px rgba(84,67,191,.22)}
@media (max-width:980px){
.lp-shell{grid-template-columns:1fr}
.lp-left{padding:32px 28px 56px;min-height:520px}
.lp-hero h1{font-size:38px}
.lp-right{padding:32px 24px 40px;margin:0;border-radius:30px 30px 0 0}
.lp-features{max-width:none}
}
@media (max-width:560px){
.lp-left{padding:24px 22px 48px}
.lp-hero h1{font-size:32px}
.lp-right{padding:28px 20px 36px}
.lp-socials{grid-template-columns:1fr;gap:8px}
.lp-newcard{flex-wrap:wrap}
.lp-newcard__btn{margin-left:auto}
}
/* ════════════════════════════════════════════════════════════════════════
LANDING PETIT PRINCE — nav cosmos + sections
════════════════════════════════════════════════════════════════════════ */
.pp-inner{max-width:1180px;margin:0 auto;padding:0 32px}
.pp-nav{position:absolute;top:0;left:0;right:0;z-index:50;padding:18px 0}
.pp-nav__inner{
max-width:1180px;margin:0 auto;padding:0 32px;
display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.pp-nav__brand{display:inline-flex;align-items:center;gap:10px;color:var(--paper)}
.pp-nav__brand img{width:36px;height:36px;object-fit:contain}
.pp-nav__brand-name{font-family:Nunito,sans-serif;font-weight:800;font-size:18px;letter-spacing:-.01em}
.pp-nav__brand-name .k{color:var(--cyan)}
.pp-nav__brand-tag{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-night-soft);font-weight:500;display:block;margin-top:2px}
.pp-nav__center{display:flex;align-items:center;gap:30px;font-size:14px;font-weight:600;color:var(--on-night)}
.pp-nav__center a{transition:color .2s var(--ease)}
.pp-nav__center a:hover{color:var(--cyan)}
.pp-nav__cta{
padding:11px 20px;background:var(--indigo);color:var(--paper);
border-radius:var(--r-pill);font-size:13.5px;font-weight:700;letter-spacing:.01em;
display:inline-flex;align-items:center;gap:6px;
transition:background .2s var(--ease),transform .15s var(--ease),box-shadow .2s var(--ease);
box-shadow:0 6px 14px rgba(84,67,191,.32);
}
.pp-nav__cta:hover{background:var(--indigo-2);transform:translateY(-1px);box-shadow:0 10px 22px rgba(84,67,191,.40)}
/* HERO */
.pp-hero{
position:relative;
background:
radial-gradient(900px 600px at 80% 30%, rgba(232,61,142,.22), transparent 60%),
radial-gradient(700px 500px at 15% 65%, rgba(110,79,214,.30), transparent 65%),
radial-gradient(900px 700px at 50% 110%, rgba(255,153,102,.18), transparent 60%),
linear-gradient(170deg,var(--night-1) 0%,var(--night-2) 55%,#3A1F8A 100%);
color:var(--on-night);padding:140px 0 100px;overflow:hidden;
}
.pp-hero::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:
radial-gradient(1.5px 1.5px at 22% 18%, rgba(255,255,255,.85), transparent 50%),
radial-gradient(1px 1px at 60% 22%, rgba(255,255,255,.55), transparent 50%),
radial-gradient(2px 2px at 38% 32%, rgba(255,255,255,.85), transparent 50%),
radial-gradient(1px 1px at 78% 38%, rgba(255,255,255,.5), transparent 50%),
radial-gradient(1.5px 1.5px at 90% 22%, rgba(255,255,255,.75), transparent 50%),
radial-gradient(1px 1px at 50% 8%, rgba(255,255,255,.55), transparent 50%),
radial-gradient(1px 1px at 85% 60%, rgba(255,255,255,.5), transparent 50%),
radial-gradient(1.5px 1.5px at 12% 80%, rgba(255,255,255,.7), transparent 50%);
}
.pp-hero__inner{
position:relative;max-width:1180px;margin:0 auto;padding:0 32px;
display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center;
}
.pp-hero__title{
font-family:Nunito,sans-serif;font-size:62px;font-weight:800;line-height:1.05;letter-spacing:-.02em;
color:var(--paper);margin-bottom:18px;text-shadow:0 4px 24px rgba(0,0,0,.25);
}
.pp-hero__title em{font-style:normal;color:var(--yellow)}
.pp-hero__sub{font-size:17px;line-height:1.55;color:var(--on-night-soft);max-width:520px;margin-bottom:28px}
.pp-hero__sub strong{color:var(--paper);font-weight:700}
.pp-hero__pills{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:32px;max-width:520px}
.pp-hero__pill{
display:flex;align-items:flex-start;gap:10px;padding:12px 14px;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);
border-radius:14px;backdrop-filter:blur(8px);
}
.pp-hero__pill-icon{flex:none;width:28px;height:28px;display:grid;place-items:center;filter:drop-shadow(0 4px 8px rgba(0,0,0,.30))}
.pp-hero__pill-icon img{width:100%;height:100%;object-fit:contain}
.pp-hero__pill-txt{font-family:'Arial Rounded MT Bold','Arial Rounded MT',Nunito,sans-serif;font-size:13px;line-height:1.3;color:var(--paper)}
.pp-hero__pill-txt strong{display:block;font-weight:800;font-size:13.5px;margin-bottom:1px}
.pp-hero__pill-txt span{color:var(--on-night-soft);font-weight:500;font-size:12px}
.pp-hero__cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pp-btn-primary{
padding:15px 26px;background:var(--indigo);color:var(--paper);
border:none;
border-radius:14px;font-size:15px;font-weight:700;letter-spacing:.01em;
display:inline-flex;align-items:center;gap:8px;
transition:background .2s var(--ease),transform .15s var(--ease),box-shadow .2s var(--ease);
box-shadow:0 10px 24px rgba(84,67,191,.35);
}
.pp-btn-primary:hover{background:var(--indigo-2);transform:translateY(-1px);box-shadow:0 14px 30px rgba(84,67,191,.45)}
/* Bouton ghost sur fond foncé (cosmos) — contraste suffisant */
.pp-btn-ghost{
padding:15px 26px;
background:rgba(255,255,255,.10);
color:var(--paper);
border:1.5px solid rgba(255,255,255,.40);
border-radius:14px;font-size:15px;font-weight:700;letter-spacing:.01em;
display:inline-flex;align-items:center;gap:8px;
transition:background .2s var(--ease),border-color .2s var(--ease),transform .15s var(--ease);
backdrop-filter:blur(8px);
}
.pp-btn-ghost:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.65);transform:translateY(-1px)}
/* Bouton ghost sur fond clair (paper/cream) — texte foncé, bordure foncée */
.pp-btn-ghost-light{
padding:15px 26px;
background:var(--paper);
color:var(--ink);
border:1.5px solid var(--ink-mute);
border-radius:14px;font-size:15px;font-weight:700;letter-spacing:.01em;
display:inline-flex;align-items:center;gap:8px;
transition:background .2s var(--ease),border-color .2s var(--ease),transform .15s var(--ease);
}
.pp-btn-ghost-light:hover{background:var(--cream);border-color:var(--ink);transform:translateY(-1px)}
.pp-pricetag{
display:inline-flex;align-items:center;gap:10px;padding:11px 16px 11px 14px;
background:linear-gradient(135deg,var(--yellow) 0%,#FFC52A 100%);
border-radius:14px;color:var(--ink);font-weight:800;
box-shadow:0 8px 20px rgba(255,212,59,.30);
}
.pp-pricetag__num{font-size:18px;line-height:1}
.pp-pricetag__sub{font-size:11px;font-weight:600;color:var(--ink-2);letter-spacing:.02em}
.pp-hero__visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:520px}
.pp-hero__cover{
position:relative;
filter:drop-shadow(0 40px 70px rgba(0,0,0,.55)) drop-shadow(0 12px 22px rgba(0,0,0,.45));
transition:transform .4s var(--ease);z-index:2;
}
.pp-hero__cover:hover{transform:translateY(-6px)}
.pp-hero__cover img{width:380px;max-width:100%;border-radius:6px}
.pp-hero__deco{
position:absolute;
filter:drop-shadow(0 10px 20px rgba(0,0,0,.4));
animation:lspk-floaty 8s ease-in-out infinite;z-index:1;
}
.pp-hero__deco--1{top:2%;left:0%;width:46px;animation-delay:-2s}
.pp-hero__deco--2{top:14%;right:-2%;width:42px;animation-delay:-4s}
.pp-hero__deco--3{bottom:18%;left:-4%;width:38px;animation-delay:-1s}
.pp-hero__deco--4{bottom:6%;right:-2%;width:50px;animation-delay:-3s}
/* 4 features cards */
.pp-features-row{position:relative;z-index:3;margin-top:-50px;padding:0 0 70px}
.pp-features-row__grid{
max-width:1180px;margin:0 auto;padding:0 32px;
display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.pp-fcard{
background:var(--paper);padding:22px 22px;border-radius:18px;
box-shadow:0 16px 40px rgba(15,8,40,.10),0 2px 6px rgba(15,8,40,.04);
border:1px solid var(--line-soft);
display:flex;flex-direction:column;align-items:flex-start;gap:12px;
}
.pp-fcard__icon{width:44px;height:44px}
.pp-fcard__icon img{width:100%;height:100%;object-fit:contain}
.pp-fcard h3{font-family:Nunito,sans-serif;font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.005em}
.pp-fcard p{font-size:13px;color:var(--ink-soft);line-height:1.5;font-family:'Arial Rounded MT Bold','Arial Rounded MT',Nunito,sans-serif;font-weight:500}
/* Redécouvrir */
.pp-rediscover{background:var(--cream);padding:80px 0 90px}
.pp-rediscover__inner{
max-width:1180px;margin:0 auto;padding:0 32px;
display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:center;
}
.pp-rediscover__title{
font-family:Nunito,sans-serif;font-size:38px;font-weight:800;line-height:1.1;letter-spacing:-.015em;
color:var(--ink);margin-bottom:14px;
}
.pp-rediscover__title em{font-style:normal;color:var(--magenta)}
.pp-rediscover__sub{
color:var(--ink-soft);font-size:15.5px;line-height:1.6;margin-bottom:28px;
font-family:'Arial Rounded MT Bold','Arial Rounded MT',Nunito,sans-serif;font-weight:500;
}
.pp-rediscover__list{display:flex;flex-direction:column;gap:18px;list-style:none;margin:0;padding:0}
.pp-rediscover__item{display:flex;gap:16px;align-items:flex-start}
.pp-rediscover__item-icon{
flex:none;width:38px;height:38px;display:grid;place-items:center;
border-radius:10px;background:var(--paper);border:1px solid var(--line);
}
.pp-rediscover__item-icon img{width:24px;height:24px;object-fit:contain}
.pp-rediscover__item h4{font-family:Nunito,sans-serif;font-size:15px;font-weight:800;color:var(--ink);margin-bottom:2px}
.pp-rediscover__item p{font-size:13.5px;color:var(--ink-soft);line-height:1.5}
/* Mockup livre ouvert */
.pp-book-spread{
position:relative;
background:linear-gradient(180deg,#FBF7EE 0%,#F4EFE0 100%);
border:1px solid var(--line);border-radius:14px;padding:30px 24px;
box-shadow:0 30px 60px rgba(15,8,40,.14),0 4px 10px rgba(15,8,40,.06);
display:grid;grid-template-columns:1fr 1fr;gap:0;overflow:visible;
}
.pp-book-spread::before{
content:"";position:absolute;left:50%;top:18px;bottom:18px;width:1px;
background:linear-gradient(180deg,transparent,rgba(15,8,40,.10) 20%,rgba(15,8,40,.10) 80%,transparent);
}
.pp-book-spread__page{padding:6px 18px}
.pp-book-spread__page-title{
font-family:Nunito,sans-serif;font-size:12px;font-weight:700;color:var(--ink-soft);
text-transform:uppercase;letter-spacing:.18em;margin-bottom:14px;text-align:center;
}
.pp-book-spread__txt{font-family:Georgia,serif;font-size:13.5px;line-height:1.75;color:var(--ink-2)}
.pp-book-spread__txt p{margin-bottom:10px}
.pp-book-spread__pic{
position:relative;border-radius:10px;overflow:hidden;min-height:240px;
box-shadow:inset 0 0 0 1px rgba(15,8,40,.06);
}
.pp-book-spread__pic img{width:100%;height:100%;object-fit:cover;display:block;border-radius:10px}
.pp-book-spread__extrait-btn{
position:absolute;right:-14px;bottom:-14px;width:62px;height:62px;border-radius:50%;
background:var(--indigo);color:var(--paper);
display:grid;place-items:center;
font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
text-align:center;line-height:1.15;
box-shadow:0 8px 20px rgba(84,67,191,.45),inset 0 1px 0 rgba(255,255,255,.18);
transform:rotate(-12deg);z-index:2;
}
/* Âges */
.pp-ages{padding:80px 0;background:var(--paper)}
.pp-ages__head{text-align:center;margin-bottom:48px}
.pp-ages__title{
font-family:Nunito,sans-serif;font-size:34px;font-weight:800;line-height:1.1;letter-spacing:-.015em;
color:var(--ink);margin-bottom:10px;
}
.pp-ages__sub{font-size:14.5px;color:var(--ink-soft);font-family:'Arial Rounded MT Bold',Nunito,sans-serif;font-weight:500}
.pp-ages__grid{
max-width:1180px;margin:0 auto;padding:0 32px;
display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.pp-age{
text-align:center;background:var(--cream);
padding:26px 20px;border-radius:18px;border:1px solid var(--line-soft);
transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.pp-age:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(15,8,40,.10)}
.pp-age__circle{
width:62px;height:62px;border-radius:50%;margin:0 auto 12px;
display:grid;place-items:center;font-size:28px;
background:linear-gradient(135deg,#FFE8B0,var(--yellow));
box-shadow:0 8px 18px rgba(255,212,59,.30);
}
.pp-age:nth-child(2) .pp-age__circle{background:linear-gradient(135deg,#FFB8E1,var(--magenta));box-shadow:0 8px 18px rgba(232,61,142,.30)}
.pp-age:nth-child(3) .pp-age__circle{background:linear-gradient(135deg,#A8D8F0,var(--cyan));box-shadow:0 8px 18px rgba(91,184,229,.30)}
.pp-age:nth-child(4) .pp-age__circle{background:linear-gradient(135deg,#C4F0C8,var(--green));box-shadow:0 8px 18px rgba(123,201,125,.30)}
.pp-age h4{font-family:Nunito,sans-serif;font-size:16px;font-weight:800;color:var(--ink);margin-bottom:4px}
.pp-age p{font-size:12.5px;color:var(--ink-soft);font-family:'Arial Rounded MT Bold',Nunito,sans-serif;font-weight:500}
/* Quote + objet */
.pp-quote-obj{padding:40px 0 80px;background:var(--paper)}
.pp-quote-obj__inner{max-width:1180px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:1fr 1fr;gap:30px}
.pp-quote{
background:var(--cream);border-radius:22px;padding:36px 32px;position:relative;
display:flex;flex-direction:column;justify-content:center;
}
.pp-quote::before{
content:"\201C";position:absolute;top:8px;left:20px;
font-family:Georgia,serif;font-size:80px;color:var(--yellow);line-height:1;
}
.pp-quote__txt{
font-family:Georgia,serif;font-style:italic;
font-size:18px;line-height:1.4;color:var(--ink);
position:relative;z-index:1;padding-top:14px;
}
.pp-quote__author{
margin-top:12px;font-size:13px;font-weight:600;color:var(--magenta);
font-family:Nunito,sans-serif;font-style:normal;
}
.pp-objet{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:32px}
.pp-objet h3{font-family:Nunito,sans-serif;font-size:20px;font-weight:800;color:var(--ink);margin-bottom:18px}
.pp-objet ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pp-objet li{
display:flex;align-items:center;gap:10px;
font-size:14px;color:var(--ink-2);
font-family:'Arial Rounded MT Bold',Nunito,sans-serif;font-weight:500;
}
.pp-objet li::before{
content:"✓";flex:none;width:22px;height:22px;border-radius:50%;
background:var(--green);color:var(--paper);
display:grid;place-items:center;font-size:12px;font-weight:800;
}
/* Big CTA */
.pp-bigcta{padding:0 32px 80px}
.pp-bigcta__bar{
max-width:1180px;margin:0 auto;
background:
radial-gradient(700px 400px at 80% 50%, rgba(232,61,142,.30), transparent 60%),
linear-gradient(135deg,var(--indigo-deep) 0%,var(--violet) 100%);
border-radius:24px;padding:36px 40px;
display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;
color:var(--paper);box-shadow:0 30px 60px rgba(42,31,117,.35);
overflow:hidden;position:relative;
}
.pp-bigcta__cover{
width:90px;flex:none;
filter:drop-shadow(0 14px 26px rgba(0,0,0,.45));
transform:rotate(-6deg);transition:transform .3s var(--ease);
}
.pp-bigcta__cover img{width:100%;border-radius:4px;display:block}
.pp-bigcta__cover:hover{transform:rotate(-3deg) translateY(-3px)}
.pp-bigcta__txt{flex:1}
.pp-bigcta__txt h3{font-family:Nunito,sans-serif;font-size:22px;font-weight:800;line-height:1.2}
.pp-bigcta__txt h3 em{font-style:normal;color:var(--yellow)}
.pp-bigcta__txt p{font-size:13.5px;color:var(--on-night-soft);margin-top:4px;font-family:'Arial Rounded MT Bold',Nunito,sans-serif;font-weight:500}
.pp-bigcta__cta{display:flex;align-items:center;gap:14px}
.pp-bigcta__btn{
padding:14px 24px;background:var(--paper);color:var(--ink);
border-radius:14px;font-size:14.5px;font-weight:800;letter-spacing:.01em;
display:inline-flex;align-items:center;gap:8px;
box-shadow:0 10px 22px rgba(0,0,0,.20);
transition:transform .15s var(--ease),box-shadow .2s var(--ease);
}
.pp-bigcta__btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(0,0,0,.30)}
/* Bouton ghost dans la bigcta (fond cosmos violet) */
.pp-bigcta__btn--ghost{
background:rgba(255,255,255,.12);color:var(--paper);
border:1.5px solid rgba(255,255,255,.50);
box-shadow:none;
backdrop-filter:blur(8px);
}
.pp-bigcta__btn--ghost:hover{background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.70);box-shadow:none}
.pp-bigcta__price{font-size:18px;font-weight:800;color:var(--paper)}
.pp-bigcta__price small{display:block;font-size:11px;font-weight:500;color:var(--on-night-soft);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
/* Trust row */
.pp-trust{padding:30px 0;background:var(--paper);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.pp-trust__grid{
max-width:1180px;margin:0 auto;padding:0 32px;
display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.pp-trust__item{
display:flex;align-items:center;gap:12px;
font-size:13px;color:var(--ink-2);
font-family:'Arial Rounded MT Bold',Nunito,sans-serif;font-weight:600;
}
.pp-trust__item-icon{
flex:none;width:36px;height:36px;border-radius:50%;
background:var(--cream);display:grid;place-items:center;font-size:16px;color:var(--indigo);
}
.pp-trust__item strong{display:block;font-weight:700;color:var(--ink)}
.pp-trust__item span{font-size:12px;color:var(--ink-soft);font-weight:500}
/* Footer cosmos */
.pp-footer{background:var(--night-1);color:var(--on-night);padding:50px 0 30px}
.pp-footer__inner{
max-width:1180px;margin:0 auto;padding:0 32px;
display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;
}
.pp-footer__brand{display:flex;flex-direction:column;gap:14px}
.pp-footer__brand-row{display:flex;align-items:center;gap:10px}
.pp-footer__brand-row img{width:36px;height:36px;object-fit:contain}
.pp-footer__brand-name{font-family:Nunito,sans-serif;font-weight:800;font-size:18px;color:var(--paper)}
.pp-footer__brand-name .k{color:var(--cyan)}
.pp-footer__brand p{font-size:12.5px;color:var(--on-night-soft);max-width:280px;line-height:1.5}
.pp-footer__col h4{font-family:Nunito,sans-serif;font-size:13px;font-weight:800;color:var(--paper);margin-bottom:14px;text-transform:uppercase;letter-spacing:.1em}
.pp-footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pp-footer__col a{font-size:13px;color:var(--on-night-soft);transition:color .2s var(--ease)}
.pp-footer__col a:hover{color:var(--paper)}
.pp-footer__bottom{
max-width:1180px;margin:30px auto 0;padding:18px 32px 0;
border-top:1px solid rgba(255,255,255,.10);
display:flex;justify-content:space-between;align-items:center;
font-size:11px;color:var(--on-night-soft);letter-spacing:.04em;
}
@media (max-width:980px){
.pp-nav__center{display:none}
.pp-hero{padding:110px 0 80px}
.pp-hero__inner{grid-template-columns:1fr;gap:40px;text-align:center}
.pp-hero__title{font-size:42px}
.pp-hero__pills{margin:0 auto 24px}
.pp-hero__cta{justify-content:center}
.pp-hero__visual{justify-content:center}
.pp-features-row__grid{grid-template-columns:repeat(2,1fr)}
.pp-rediscover__inner{grid-template-columns:1fr;gap:30px}
.pp-ages__grid{grid-template-columns:repeat(2,1fr)}
.pp-quote-obj__inner{grid-template-columns:1fr}
.pp-bigcta__bar{grid-template-columns:1fr;text-align:center}
.pp-bigcta__cover{margin:0 auto}
.pp-trust__grid{grid-template-columns:repeat(2,1fr)}
.pp-footer__inner{grid-template-columns:1fr 1fr;gap:30px}
}
@media (max-width:560px){
.pp-hero__title{font-size:34px}
.pp-hero__pills{grid-template-columns:1fr}
.pp-features-row__grid{grid-template-columns:1fr}
.pp-ages__grid{grid-template-columns:1fr 1fr}
.pp-trust__grid{grid-template-columns:1fr}
.pp-footer__inner{grid-template-columns:1fr}
}
/* ════════════════════════════════════════════════════════════════════════
MYTEXTS — bibliothèque + import + résultat exercice
════════════════════════════════════════════════════════════════════════ */
/* Hero compact (sous appbar) */
.t-hero{
display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;
padding:32px 0 24px;
}
.t-hero__eyebrow{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--magenta);font-weight:800}
.t-hero__title{
font-family:Nunito,sans-serif;font-size:30px;font-weight:800;letter-spacing:-.015em;line-height:1.1;
color:var(--ink);margin-top:6px;
}
.t-hero__title em{font-style:normal;color:var(--magenta)}
.t-hero__sub{font-size:14px;color:var(--ink-soft);margin-top:6px;font-family:'Arial Rounded MT Bold',Nunito,sans-serif;font-weight:500}
/* Grid de cards "mes textes" */
.t-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin-bottom:32px}
.t-card{
background:var(--paper);
border:1px solid var(--line-soft);border-radius:18px;
padding:18px 18px 16px;
display:flex;flex-direction:column;gap:12px;
box-shadow:0 4px 12px rgba(15,8,40,.04);
transition:transform .15s var(--ease),box-shadow .2s var(--ease);
}
.t-card:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(15,8,40,.10)}
.t-card__cover{
width:48px;height:48px;
display:grid;place-items:center;
background:linear-gradient(135deg,var(--cream),var(--cream-2));
border-radius:12px;
}
.t-card__cover img{width:30px;height:30px;object-fit:contain}
.t-card__title{font-family:Nunito,sans-serif;font-weight:800;font-size:16px;color:var(--ink);letter-spacing:-.005em;line-height:1.3}
.t-card__meta{font-size:12.5px;color:var(--ink-soft);font-family:'Arial Rounded MT Bold',Nunito,sans-serif;font-weight:500}
.t-card__bar{height:6px;border-radius:6px;background:var(--field);overflow:hidden;margin-top:4px}
.t-card__bar-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--violet),var(--magenta));transition:width .4s var(--ease)}
.t-card__status{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--ink-soft);font-weight:600;margin-top:6px}
.t-card__status--done{color:var(--green)}
.t-card__actions{display:flex;gap:8px;margin-top:auto;padding-top:6px}
.t-card__btn{
flex:1;padding:10px 14px;
background:var(--indigo);color:var(--paper);
border-radius:10px;font-size:13px;font-weight:700;
display:inline-flex;align-items:center;justify-content:center;gap:6px;
transition:background .2s var(--ease);
}
.t-card__btn:hover{background:var(--indigo-2)}
.t-card__btn--del{
flex:none;width:38px;padding:0;background:var(--paper);border:1px solid var(--line);
color:var(--ink-mute);font-size:14px;
}
.t-card__btn--del:hover{background:rgba(232,61,142,.08);border-color:var(--magenta);color:var(--magenta)}
/* Empty state */
.t-empty{
text-align:center;padding:60px 30px;
background:var(--paper);
border:1px dashed var(--line);
border-radius:22px;
}
.t-empty__shapes{display:flex;justify-content:center;gap:14px;margin-bottom:18px}
.t-empty__shapes img{width:40px;height:40px;animation:lspk-floaty 8s ease-in-out infinite}
.t-empty__shapes img:nth-child(2){animation-delay:-2s}
.t-empty__shapes img:nth-child(3){animation-delay:-4s}
.t-empty__shapes img:nth-child(4){animation-delay:-6s}
.t-empty__title{font-family:Nunito,sans-serif;font-weight:800;font-size:22px;color:var(--ink);margin-bottom:10px}
.t-empty__sub{font-size:14px;color:var(--ink-soft);max-width:440px;margin:0 auto 22px}
/* Form import */
.t-form{
background:var(--paper);border:1px solid var(--line-soft);
border-radius:22px;padding:28px;margin-bottom:18px;
box-shadow:0 4px 12px rgba(15,8,40,.04);
}
.t-form__group{margin-bottom:18px}
.t-form__group label{display:block;font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:6px;letter-spacing:.01em}
.t-form__group label small{color:var(--ink-mute);font-weight:500;letter-spacing:0}
.t-form__group input[type=text],
.t-form__group textarea{
width:100%;padding:12px 14px;
background:var(--field);border:1.5px solid transparent;
border-radius:12px;
font-size:14.5px;font-family:inherit;color:var(--ink);
outline:none;
transition:border-color .15s var(--ease),background .15s var(--ease),box-shadow .15s var(--ease);
}
.t-form__group input[type=text]:focus,
.t-form__group textarea:focus{
background:var(--paper);border-color:var(--indigo);
box-shadow:0 0 0 4px rgba(61,45,143,.10);
}
.t-form__counter{
display:flex;justify-content:space-between;align-items:center;
font-size:12px;color:var(--ink-soft);margin-top:6px;
}
.t-form__counter strong{color:var(--ink);font-weight:800}
/* Tabs file/paste */
.t-tabs{display:flex;gap:0;border-bottom:1.5px solid var(--line);margin-bottom:18px}
.t-tab{
flex:1;padding:14px 8px;background:none;border:none;cursor:pointer;
font-size:14px;font-weight:600;color:var(--ink-mute);
position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
transition:color .2s var(--ease);
}
.t-tab:hover{color:var(--ink-soft)}
.t-tab.is-active{color:var(--indigo)}
.t-tab.is-active::after{
content:"";position:absolute;left:0;right:0;bottom:-1.5px;height:2.5px;
background:linear-gradient(90deg,var(--indigo),var(--magenta));border-radius:2px;
}
.t-tab-content{display:none}
.t-tab-content.is-active{display:block}
/* Dropzone */
.t-dropzone{
position:relative;border:2px dashed var(--line);border-radius:14px;
background:var(--field);padding:40px 24px;text-align:center;
transition:border-color .2s var(--ease),background .2s var(--ease);
cursor:pointer;
}
.t-dropzone:hover{border-color:var(--indigo);background:var(--field-focus)}
.t-dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.t-dropzone__icon{font-size:36px;margin-bottom:8px}
.t-dropzone__title{font-family:Nunito,sans-serif;font-weight:800;font-size:16px;color:var(--ink);margin-bottom:4px}
.t-dropzone__sub{font-size:13px;color:var(--ink-soft);margin-bottom:6px}
.t-dropzone__sub span{color:var(--indigo);font-weight:700;text-decoration:underline}
.t-dropzone__formats{font-size:11.5px;color:var(--ink-mute);letter-spacing:.04em}
.t-dropzone__preview{display:none;align-items:center;gap:12px;text-align:left}
.t-dropzone__preview.is-active{display:flex}
.t-dropzone__preview-icon{font-size:32px}
.t-dropzone__preview-name{font-weight:700;color:var(--ink)}
.t-dropzone__preview-size{font-size:12px;color:var(--ink-soft)}
.t-dropzone__remove{
margin-left:auto;width:32px;height:32px;border-radius:50%;
background:var(--paper);border:1px solid var(--line);color:var(--ink-mute);
font-size:14px;cursor:pointer;
}
.t-dropzone__remove:hover{background:rgba(232,61,142,.08);border-color:var(--magenta);color:var(--magenta)}
.t-submit{
width:100%;padding:15px 20px;
background:var(--indigo);color:var(--paper);
border:none;border-radius:12px;font-size:15px;font-weight:700;
display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
transition:background .2s var(--ease),transform .15s var(--ease),box-shadow .2s var(--ease);
box-shadow:0 6px 14px rgba(84,67,191,.22);
}
.t-submit:hover{background:var(--indigo-2);transform:translateY(-1px);box-shadow:0 10px 20px rgba(84,67,191,.30)}
.t-tips{
background:linear-gradient(135deg,#FFF6D2 0%,#FFE9A0 100%);
border-left:4px solid var(--yellow);border-radius:0 14px 14px 0;
padding:16px 20px;margin-bottom:24px;
}
.t-tips__head{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-family:Nunito,sans-serif;font-weight:800;color:var(--ink);font-size:14.5px}
.t-tips ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.t-tips li{font-size:13px;color:var(--ink-2);line-height:1.5}
.t-tips strong{color:var(--ink);font-weight:800}
.t-flash{
background:rgba(232,61,142,.10);border:1px solid rgba(232,61,142,.30);
border-radius:12px;padding:12px 16px;margin-bottom:18px;
font-size:13.5px;color:#9E1356;font-weight:600;
display:flex;align-items:center;gap:10px;
}
@media (max-width:560px){
.t-hero{grid-template-columns:1fr;gap:14px}
.t-form{padding:20px}
}
/* ════════════════════════════════════════════════════════════════════════
EXERCISE — moteur d'exercice (3 phases) + lecteur texte importé
IDs JS critiques préservés : phase-1..4, step-1..3, marquee-*, level-*,
speed-slider, speed-value, marquee-play-btn, alphabet-panel, etc.
════════════════════════════════════════════════════════════════════════ */
body.lspk-ex{background:var(--cream);min-height:100vh}
.x-shell{
max-width:980px;margin:0 auto;padding:24px 20px 40px;
}
.x-topbar{
display:flex;justify-content:space-between;align-items:center;gap:16px;
margin-bottom:18px;
}
.x-back{
display:inline-flex;align-items:center;gap:6px;
padding:9px 16px;background:var(--paper);
border:1px solid var(--line);border-radius:var(--r-pill);
font-size:13.5px;font-weight:600;color:var(--ink-2);
transition:background .2s var(--ease),border-color .2s var(--ease);
}
.x-back:hover{background:var(--cream-2);border-color:var(--ink-mute)}
.x-timer{
font-family:Nunito,sans-serif;font-weight:800;font-size:14px;color:var(--magenta);
padding:8px 14px;background:rgba(232,61,142,.10);border-radius:var(--r-pill);
letter-spacing:.04em;
}
.x-retry{
display:inline-flex;align-items:center;gap:6px;
padding:7px 14px;background:rgba(255,212,59,.20);
border:1px solid var(--yellow);border-radius:var(--r-pill);
font-size:12.5px;font-weight:700;color:#9E6B12;
}
/* Stepper */
.x-stepper{display:flex;align-items:center;gap:8px;margin-bottom:24px}
.x-step{display:flex;align-items:center;gap:8px;opacity:.55;transition:opacity .25s var(--ease)}
.x-step.exercise-step--active{opacity:1}
.x-step__dot{
width:34px;height:34px;border-radius:50%;
display:grid;place-items:center;
background:var(--paper);border:1.5px solid var(--line);
font-family:Nunito,sans-serif;font-weight:800;font-size:14px;color:var(--ink-mute);
transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
}
.x-step.exercise-step--active .x-step__dot{
background:linear-gradient(135deg,var(--magenta),var(--violet));
border-color:var(--magenta);color:var(--paper);
box-shadow:0 4px 12px rgba(232,61,142,.30);
}
.x-step__label{font-size:13px;font-weight:700;color:var(--ink-2)}
.x-step__line{flex:1;height:2px;background:var(--line);border-radius:2px}
/* Progression linéaire (pour read.php) */
.x-progress{
background:var(--paper);border:1px solid var(--line-soft);
border-radius:14px;padding:12px 16px;margin-bottom:18px;
}
.x-progress__bar{height:6px;border-radius:6px;background:var(--field);overflow:hidden;margin-bottom:8px}
.x-progress__fill{height:100%;background:linear-gradient(90deg,var(--violet),var(--magenta));border-radius:6px}
.x-progress__meta{display:flex;justify-content:space-between;align-items:center;font-size:12.5px}
.x-progress__title{font-weight:700;color:var(--ink-2)}
.x-progress__counter{color:var(--ink-soft)}
/* Phase container */
.x-phase{}
/* Book header card */
.x-book{
display:flex;align-items:center;gap:14px;
background:var(--paper);border:1px solid var(--line-soft);
border-radius:14px;padding:14px 18px;margin-bottom:18px;
box-shadow:0 4px 12px rgba(15,8,40,.04);
}
.x-book__pic{width:38px;height:38px;flex:none;object-fit:contain}
.x-book__title{font-family:Nunito,sans-serif;font-weight:800;font-size:16px;color:var(--ink);letter-spacing:-.005em}
.x-book__meta{font-size:12.5px;color:var(--ink-soft);margin-top:2px;font-family:'Arial Rounded MT Bold',Nunito,sans-serif;font-weight:500}
/* Lecture (phase 1) */
.x-reading{
background:var(--paper);border:1px solid var(--line-soft);
border-radius:18px;padding:28px 32px;
box-shadow:0 4px 12px rgba(15,8,40,.04);
}
.x-reading__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:8px}
.x-reading__eyebrow{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--magenta);font-weight:800}
.x-reading__info{font-size:12.5px;color:var(--ink-soft)}
.x-reading__text{
font-family:Georgia,serif;font-size:17px;line-height:1.75;color:var(--ink-2);
max-height:420px;overflow:auto;
padding:8px 0;
}
/* Controls (niveau / vitesse) */
.x-controls{
background:var(--paper);border:1px solid var(--line-soft);
border-radius:14px;padding:16px 18px;margin-bottom:14px;
display:flex;flex-direction:column;gap:14px;
}
.x-control-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.x-control-label{font-size:12px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;min-width:60px}
/* Pills niveau */
.x-pills{display:flex;gap:8px;flex-wrap:wrap;flex:1}
.x-pill{
padding:9px 16px;background:var(--cream);
border:1.5px solid var(--line);border-radius:var(--r-pill);
font-size:13px;font-weight:700;color:var(--ink-2);cursor:pointer;
transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.x-pill:hover{background:var(--field)}
.x-pill.mode-pill--active{
background:linear-gradient(135deg,var(--magenta),var(--violet));
border-color:transparent;color:var(--paper);
box-shadow:0 4px 12px rgba(232,61,142,.30);
}
/* Slider vitesse */
.x-speed{display:inline-flex;align-items:center;gap:10px;flex:1}
.x-speed-hint{font-size:12px;color:var(--ink-soft);font-weight:600}
.x-speed input[type=range]{
flex:1;-webkit-appearance:none;appearance:none;
height:5px;border-radius:3px;background:var(--line);cursor:pointer;
}
.x-speed input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;appearance:none;
width:18px;height:18px;border-radius:50%;
background:var(--magenta);cursor:pointer;
border:2.5px solid var(--paper);box-shadow:0 4px 10px rgba(232,61,142,.30);
}
.x-speed input[type=range]::-moz-range-thumb{
width:18px;height:18px;border-radius:50%;
background:var(--magenta);cursor:pointer;
border:2.5px solid var(--paper);box-shadow:0 4px 10px rgba(232,61,142,.30);
}
.x-speed-value{font-size:12.5px;font-weight:800;color:var(--ink);min-width:60px;text-align:right}
/* Marquee — version exercice (fond clair) */
.x-marquee{
background:linear-gradient(135deg,var(--night-1) 0%,var(--night-2) 100%);
border-radius:18px;padding:18px 20px 14px;margin-bottom:14px;
box-shadow:0 12px 30px rgba(15,8,40,.20);
position:relative;overflow:hidden;
}
.x-marquee::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:
radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.5), transparent 50%),
radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.4), transparent 50%);
}
.x-marquee__wrap{
position:relative;z-index:1;
overflow:hidden;cursor:pointer;
font-family:Georgia,serif;font-size:20px;line-height:1.6;color:var(--paper);
white-space:nowrap;height:1.6em;
}
.x-marquee__wrap::before,
.x-marquee__wrap::after{
content:"";position:absolute;top:0;bottom:0;width:38px;z-index:2;pointer-events:none;
}
.x-marquee__wrap::before{left:0;background:linear-gradient(90deg,rgba(14,10,46,.95),transparent)}
.x-marquee__wrap::after{right:0;background:linear-gradient(270deg,rgba(14,10,46,.95),transparent)}
.x-marquee__track{display:inline-block;white-space:nowrap;will-change:transform}
.x-marquee__track img{
display:inline-block !important;width:auto;height:.95em;
vertical-align:-.18em;margin:0 1px;
filter:drop-shadow(0 1px 4px rgba(0,0,0,.45));
}
.x-marquee__hint{
font-size:11px;color:var(--on-night-soft);font-weight:500;
margin-top:8px;text-align:center;letter-spacing:.04em;
position:relative;z-index:1;
}
.x-marquee-btns{display:flex;justify-content:center;gap:10px;margin-bottom:14px}
.x-marquee-btns button{
padding:8px 16px;background:var(--paper);
border:1px solid var(--line);border-radius:var(--r-pill);
font-size:12.5px;font-weight:700;color:var(--ink-2);cursor:pointer;
transition:background .2s var(--ease),border-color .2s var(--ease);
}
.x-marquee-btns button:hover{background:var(--cream-2);border-color:var(--ink-mute)}
/* Alphabet visuel */
.x-alpha-toggle{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
width:100%;padding:11px 16px;
background:var(--cream);border:1px solid var(--line);border-radius:12px;
font-size:13px;font-weight:700;color:var(--ink-2);cursor:pointer;
margin-bottom:10px;
transition:background .2s var(--ease);
}
.x-alpha-toggle:hover{background:var(--field)}
.x-alpha-toggle__arrow{transition:transform .25s var(--ease);font-size:11px}
.x-alpha-toggle[aria-expanded=true] .x-alpha-toggle__arrow{transform:rotate(180deg)}
.x-alpha-panel{
background:var(--paper);border:1px solid var(--line);border-radius:14px;
padding:18px;margin-bottom:14px;
}
.x-alpha-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px}
.x-alpha-group__title{
display:flex;align-items:center;gap:8px;font-family:Nunito,sans-serif;
font-weight:800;font-size:13px;color:var(--ink);margin-bottom:10px;
text-transform:uppercase;letter-spacing:.08em;
}
.x-alpha-group__icon{width:22px;height:22px;object-fit:contain}
.x-alpha-group__items{display:flex;flex-wrap:wrap;gap:6px}
.x-alpha-item{
display:flex;align-items:center;gap:5px;
padding:5px 9px;background:var(--cream);border-radius:8px;
font-size:11.5px;
}
.x-alpha-item__pic{width:18px;height:18px;object-fit:contain}
.x-alpha-item__letter{font-family:Nunito,sans-serif;font-weight:800;color:var(--ink)}
.x-alpha-item__color{color:var(--ink-soft);font-weight:500}
/* Bouton primaire d'étape */
.x-btn{
width:100%;padding:15px 22px;
background:linear-gradient(135deg,var(--magenta),var(--violet));
color:var(--paper);border:none;border-radius:14px;
font-size:15px;font-weight:700;letter-spacing:.01em;
display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
transition:transform .15s var(--ease),box-shadow .2s var(--ease);
box-shadow:0 8px 20px rgba(232,61,142,.30);
}
.x-btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(232,61,142,.40)}
/* Memory test (QCM) */
.x-memory{
background:var(--paper);border:1px solid var(--line-soft);
border-radius:18px;padding:28px;
box-shadow:0 4px 12px rgba(15,8,40,.04);
}
.x-memory__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.x-memory__eyebrow{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--magenta);font-weight:800}
.x-memory__hint{font-size:12.5px;color:var(--ink-mute);font-style:italic}
.x-memory__title{font-family:Nunito,sans-serif;font-weight:800;font-size:24px;color:var(--ink);margin-bottom:18px;letter-spacing:-.01em}
/* QCM — questions générées par exercise.js (.memory-q / .memory-options / .memory-btn) */
.memory-q{
background:var(--cream);
border:1px solid var(--line-soft);
border-radius:14px;
padding:20px 22px;margin-bottom:14px;
}
.memory-q p{
font-family:Nunito,sans-serif;font-weight:800;font-size:16.5px;
color:var(--ink);letter-spacing:-.005em;line-height:1.45;
margin:0 0 16px;
}
.memory-options{
display:grid;grid-template-columns:1fr;gap:10px;
}
@media (min-width:560px){
.memory-options{grid-template-columns:1fr 1fr}
}
.memory-btn{
display:block;width:100%;
padding:14px 18px;
background:var(--paper);
border:1.5px solid var(--line);
border-radius:12px;
font-size:14.5px;font-weight:600;color:var(--ink-2);
text-align:left;cursor:pointer;
font-family:inherit;
transition:background .15s var(--ease),border-color .15s var(--ease),transform .12s var(--ease),color .15s var(--ease);
}
.memory-btn:hover:not(:disabled){
background:var(--field);border-color:var(--indigo);
transform:translateX(2px);
}
.memory-btn:disabled{cursor:not-allowed;opacity:.7}
.memory-btn.correct{
background:linear-gradient(135deg,#D4F4D6 0%,#A8E0AA 100%);
border-color:var(--green);color:#1F5921;font-weight:800;opacity:1;
}
.memory-btn.correct::before{content:"✓ ";font-weight:900}
.memory-btn.wrong{
background:rgba(232,61,142,.10);
border-color:var(--magenta);color:#9E1356;font-weight:800;opacity:1;
}
.memory-btn.wrong::before{content:"✗ ";font-weight:900}
/* Pictos inline du marquee (généré par renderPictoPng → class="bihemi-pic") */
.bihemi-pic{
display:inline-block !important;
width:auto;height:.95em;
vertical-align:-.18em;margin:0 1px;
filter:drop-shadow(0 1px 4px rgba(0,0,0,.45));
}
.x-reading__text .bihemi-pic{filter:drop-shadow(0 1px 3px rgba(0,0,0,.15))}
/* Results phase 4 */
.x-results{
text-align:center;background:var(--paper);
border:1px solid var(--line-soft);border-radius:22px;
padding:40px 32px;box-shadow:0 16px 40px rgba(15,8,40,.08);
}
.x-results__pic{width:64px;height:64px;margin:0 auto 14px;filter:drop-shadow(0 8px 20px rgba(0,0,0,.15))}
.x-results__title{font-family:Nunito,sans-serif;font-weight:800;font-size:30px;color:var(--ink);margin-bottom:12px}
.x-results__score{
font-family:Nunito,sans-serif;font-weight:900;font-size:54px;letter-spacing:-.02em;
background:linear-gradient(135deg,var(--magenta),var(--yellow));
-webkit-background-clip:text;background-clip:text;color:transparent;
margin-bottom:18px;
}
.x-results__stats{
display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:18px 0 24px;
max-width:380px;margin-left:auto;margin-right:auto;
}
.x-results__stat{padding:14px;background:var(--cream);border-radius:12px}
.x-results__stat-value{display:block;font-family:Nunito,sans-serif;font-weight:800;font-size:20px;color:var(--ink)}
.x-results__stat-label{display:block;font-size:11.5px;color:var(--ink-soft);font-weight:600;margin-top:2px;letter-spacing:.04em}
/* Reading text "done" finished state */
.x-done{
text-align:center;padding:40px 30px;
background:var(--paper);border:1px solid var(--line-soft);
border-radius:22px;box-shadow:0 16px 40px rgba(15,8,40,.08);
}
.x-done__pic{width:60px;height:60px;margin:0 auto 14px}
.x-done__title{font-family:Nunito,sans-serif;font-weight:800;font-size:28px;color:var(--ink);margin-bottom:8px}
.x-done__sub{font-size:14px;color:var(--ink-soft);margin-bottom:24px}
.x-done__stats{display:flex;justify-content:center;gap:24px;margin-bottom:24px}
.x-done__stat{padding:14px 20px;background:var(--cream);border-radius:12px}
.x-done__stat-value{display:block;font-family:Nunito,sans-serif;font-weight:800;font-size:24px;color:var(--ink)}
.x-done__stat-label{display:block;font-size:11.5px;color:var(--ink-soft);font-weight:600;margin-top:2px}
.x-done__actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
@media (max-width:560px){
.x-shell{padding:14px 14px 30px}
.x-topbar{flex-wrap:wrap;gap:10px}
.x-stepper{flex-wrap:wrap}
.x-step__line{display:none}
.x-control-row{flex-direction:column;align-items:flex-start;gap:8px}
.x-pills{width:100%}
.x-reading{padding:20px}
.x-results{padding:28px 20px}
.x-results__stats{grid-template-columns:1fr 1fr}
}
/* ════════════════════════════════════════════════════════════════════════
TEACHER / STUDENT
════════════════════════════════════════════════════════════════════════ */
/* Carte invitation cosmos avec gros code */
.tc-invite{
background:
radial-gradient(700px 400px at 90% 50%, rgba(232,61,142,.20), transparent 60%),
linear-gradient(135deg,var(--night-1) 0%,var(--night-2) 100%);
color:var(--on-night);
border-radius:22px;padding:28px 32px;margin-bottom:24px;
display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;
box-shadow:0 24px 60px rgba(8,4,30,.20);
position:relative;overflow:hidden;
}
.tc-invite::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:
radial-gradient(1.5px 1.5px at 22% 28%, rgba(255,255,255,.55), transparent 50%),
radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.4), transparent 50%);
}
.tc-invite__col{position:relative;z-index:1}
.tc-invite__label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);font-weight:800}
.tc-invite__code{
font-family:Nunito,sans-serif;font-weight:900;font-size:64px;
letter-spacing:.04em;line-height:1;margin-top:6px;
color:var(--paper);text-shadow:0 4px 24px rgba(0,0,0,.3);
}
.tc-invite__txt{font-size:14px;color:var(--on-night-soft);line-height:1.5;margin-bottom:12px}
.tc-invite__url{
display:flex;gap:8px;align-items:center;
}
.tc-invite__url input{
flex:1;padding:10px 14px;
background:rgba(0,0,0,.20);border:1px solid rgba(255,212,59,.40);
color:var(--paper);font-family:monospace;font-size:13px;border-radius:8px;
outline:none;
}
.tc-invite__url button{
padding:10px 14px;background:var(--yellow);color:var(--ink);
border:none;border-radius:8px;font-weight:800;font-size:13px;cursor:pointer;
transition:background .2s var(--ease);
}
.tc-invite__url button:hover{background:#FFC52A}
.tc-invite__regen{
margin-top:10px;background:none;border:none;
color:var(--yellow);font-size:12px;text-decoration:underline;cursor:pointer;
}
/* Table élèves */
.tc-table{
background:var(--paper);border:1px solid var(--line-soft);
border-radius:18px;padding:6px;margin-bottom:18px;
box-shadow:0 4px 12px rgba(15,8,40,.04);
}
.tc-table table{width:100%;border-collapse:separate;border-spacing:0}
.tc-table th{
text-align:left;padding:14px 16px;
font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
color:var(--ink-soft);font-weight:800;
border-bottom:1px solid var(--line);
}
.tc-table th.num,.tc-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.tc-table td{
padding:14px 16px;border-bottom:1px solid var(--line-soft);
font-size:14px;color:var(--ink-2);
}
.tc-table tr:last-child td{border-bottom:none}
.tc-table tr:hover td{background:var(--cream)}
.tc-table .badge-streak{
display:inline-block;padding:3px 10px;background:var(--yellow);color:var(--ink);
border-radius:var(--r-pill);font-size:12px;font-weight:800;
}
/* Étudiant : carte fun colorée centrée */
.st-shell{
position:relative;min-height:100vh;
background:
radial-gradient(900px 600px at 80% 30%, rgba(232,61,142,.25), transparent 60%),
radial-gradient(700px 500px at 15% 65%, rgba(91,184,229,.30), transparent 65%),
linear-gradient(170deg,var(--night-1) 0%,var(--night-2) 55%,#3A1F8A 100%);
display:flex;align-items:center;justify-content:center;padding:40px 20px;
overflow:hidden;
}
.st-shell::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:
radial-gradient(1.5px 1.5px at 22% 18%, rgba(255,255,255,.85), transparent 50%),
radial-gradient(1px 1px at 60% 22%, rgba(255,255,255,.55), transparent 50%),
radial-gradient(2px 2px at 38% 60%, rgba(255,255,255,.85), transparent 50%);
}
.st-shell__floaters{position:absolute;inset:0;pointer-events:none;z-index:1}
.st-shell__floaters img{position:absolute;animation:lspk-floaty 9s ease-in-out infinite;filter:drop-shadow(0 4px 18px rgba(0,0,0,.3))}
.st-card{
position:relative;z-index:2;
background:var(--paper);border-radius:24px;padding:36px 36px 32px;
width:100%;max-width:480px;
box-shadow:0 30px 70px rgba(8,4,30,.40),0 8px 24px rgba(8,4,30,.18);
}
.st-badge{
display:inline-block;padding:6px 14px;
background:var(--yellow);border-radius:var(--r-pill);
font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
color:var(--ink);margin-bottom:16px;
}
.st-title{
font-family:Nunito,sans-serif;font-weight:800;font-size:32px;letter-spacing:-.02em;line-height:1.1;
color:var(--ink);margin-bottom:6px;
}
.st-title em{font-style:normal;color:var(--magenta)}
.st-sub{font-size:14.5px;color:var(--ink-soft);margin-bottom:20px;line-height:1.5}
.st-sub strong{color:var(--ink-2);font-weight:700}
.st-field{margin-bottom:14px}
.st-field label{display:block;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.st-input{
width:100%;padding:13px 16px;
background:var(--field);border:1.5px solid transparent;border-radius:12px;
font-size:16px;font-family:inherit;color:var(--ink);outline:none;
transition:border-color .15s var(--ease),background .15s var(--ease),box-shadow .15s var(--ease);
}
.st-input:focus{background:var(--paper);border-color:var(--indigo);box-shadow:0 0 0 4px rgba(61,45,143,.10)}
.st-input--code{font-family:monospace;text-transform:uppercase;text-align:center;letter-spacing:.18em;font-size:20px}
.st-input--pin{font-family:monospace;text-align:center;letter-spacing:.5em;font-size:30px;font-weight:800}
.st-error{display:block;color:var(--magenta);font-size:12px;margin-top:5px;font-weight:600}
.st-help{display:block;color:var(--ink-soft);font-size:11.5px;margin-top:4px;font-style:italic}
.st-alert{
background:rgba(232,61,142,.10);border:1px solid rgba(232,61,142,.30);
border-radius:10px;padding:10px 14px;margin-bottom:14px;
font-size:13px;color:#9E1356;font-weight:600;
}
.st-btn{
width:100%;padding:16px 20px;
background:var(--indigo);color:var(--paper);
border:none;border-radius:14px;
font-size:16px;font-weight:800;letter-spacing:.01em;
display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
transition:background .2s var(--ease),transform .15s var(--ease),box-shadow .2s var(--ease);
box-shadow:0 8px 20px rgba(84,67,191,.30);
}
.st-btn:hover{background:var(--indigo-2);transform:translateY(-1px);box-shadow:0 12px 26px rgba(84,67,191,.40)}
.st-foot{margin-top:18px;font-size:12px;color:var(--ink-mute);text-align:center}
.st-foot a{color:var(--indigo);font-weight:600;text-decoration:underline}
@media (max-width:560px){
.tc-invite{grid-template-columns:1fr;text-align:center}
.tc-invite__code{font-size:48px}
.st-card{padding:28px 24px}
.st-title{font-size:26px}
}
/* ════════════════════════════════════════════════════════════════════════
ERRORS 404 / 403 / 500
════════════════════════════════════════════════════════════════════════ */
body.lspk-error{
min-height:100vh;
background:
radial-gradient(700px 500px at 80% 20%, rgba(232,61,142,.20), transparent 60%),
radial-gradient(700px 500px at 20% 80%, rgba(110,79,214,.30), transparent 65%),
linear-gradient(160deg,var(--night-1) 0%,var(--night-2) 60%,#3A1F8A 100%);
color:var(--on-night);
}
.e-error{
position:relative;min-height:100vh;
display:flex;align-items:center;justify-content:center;
padding:40px 20px;overflow:hidden;
}
.e-error::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:
radial-gradient(1.5px 1.5px at 22% 18%, rgba(255,255,255,.85), transparent 50%),
radial-gradient(1px 1px at 60% 22%, rgba(255,255,255,.55), transparent 50%),
radial-gradient(2px 2px at 38% 32%, rgba(255,255,255,.85), transparent 50%),
radial-gradient(1px 1px at 78% 38%, rgba(255,255,255,.5), transparent 50%);
}
.e-error__floaters{position:absolute;inset:0;pointer-events:none;z-index:1}
.e-error__floaters img{
position:absolute;animation:lspk-floaty 9s ease-in-out infinite;
filter:drop-shadow(0 4px 18px rgba(0,0,0,.4));
}
.e-error__inner{
position:relative;z-index:2;
text-align:center;max-width:540px;
}
.e-error__code{
font-family:Nunito,sans-serif;font-weight:900;
font-size:140px;line-height:1;letter-spacing:-.04em;
background:linear-gradient(135deg,var(--magenta),var(--yellow));
-webkit-background-clip:text;background-clip:text;
color:transparent;
margin-bottom:14px;
text-shadow:0 12px 40px rgba(232,61,142,.35);
}
.e-error__title{
font-family:Nunito,sans-serif;font-weight:800;font-size:36px;letter-spacing:-.02em;line-height:1.1;
color:var(--paper);margin-bottom:14px;
}
.e-error__sub{
font-size:15.5px;line-height:1.55;color:var(--on-night-soft);
max-width:440px;margin:0 auto 30px;
}
.e-error__actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.e-error__btn{
padding:13px 22px;background:var(--paper);color:var(--ink);
border-radius:12px;font-weight:700;font-size:14px;letter-spacing:.01em;
display:inline-flex;align-items:center;gap:8px;cursor:pointer;
box-shadow:0 8px 18px rgba(0,0,0,.20);
transition:transform .15s var(--ease),box-shadow .2s var(--ease);
}
.e-error__btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(0,0,0,.30)}
.e-error__btn--ghost{
background:transparent;color:var(--paper);
border:1.5px solid rgba(255,255,255,.30);box-shadow:none;
}
.e-error__btn--ghost:hover{background:rgba(255,255,255,.08);box-shadow:none}
@media (max-width:560px){
.e-error__code{font-size:96px}
.e-error__title{font-size:26px}
}
/* ════════════════════════════════════════════════════════════════════════
ONBOARDING — fond cosmos + carte centrée 3 étapes
════════════════════════════════════════════════════════════════════════ */
body.lspk-onboard{background:var(--night-2)}
.o-shell{
position:relative;
min-height:100vh;
background:
radial-gradient(900px 600px at 80% 30%, rgba(232,61,142,.20), transparent 60%),
radial-gradient(700px 500px at 15% 65%, rgba(110,79,214,.30), transparent 65%),
linear-gradient(170deg,var(--night-1) 0%,var(--night-2) 55%,#3A1F8A 100%);
display:flex;align-items:center;justify-content:center;
padding:40px 20px;overflow:hidden;
}
.o-shell::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:
radial-gradient(1.5px 1.5px at 22% 18%, rgba(255,255,255,.85), transparent 50%),
radial-gradient(1px 1px at 60% 22%, rgba(255,255,255,.55), transparent 50%),
radial-gradient(2px 2px at 38% 32%, rgba(255,255,255,.85), transparent 50%),
radial-gradient(1px 1px at 78% 38%, rgba(255,255,255,.5), transparent 50%),
radial-gradient(1.5px 1.5px at 90% 22%, rgba(255,255,255,.75), transparent 50%),
radial-gradient(1px 1px at 50% 8%, rgba(255,255,255,.55), transparent 50%);
}
.o-shell__floaters{position:absolute;inset:0;pointer-events:none;z-index:1}
.o-shell__floaters img{
position:absolute;animation:lspk-floaty 9s ease-in-out infinite;
filter:drop-shadow(0 4px 18px rgba(0,0,0,.4));
}
.o-card{
position:relative;z-index:2;
background:var(--paper);
border-radius:28px;
padding:40px 44px 36px;
width:100%;max-width:540px;
box-shadow:0 30px 70px rgba(8,4,30,.40),0 8px 24px rgba(8,4,30,.18);
}
.o-card__brand{
display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:18px;
}
.o-card__brand img{width:36px;height:36px;object-fit:contain}
.o-card__brand-name{font-family:Nunito,sans-serif;font-weight:800;font-size:16px;color:var(--ink-2)}
.o-card__brand-name .k{color:var(--cyan)}
.o-progress{
height:5px;border-radius:5px;background:var(--field);overflow:hidden;margin-bottom:24px;
}
.o-progress__fill{
height:100%;border-radius:5px;
background:linear-gradient(90deg,var(--indigo),var(--magenta));
transition:width .35s var(--ease);
}
.o-step__pill{
display:inline-block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
color:var(--magenta);font-weight:800;margin-bottom:10px;
}
.o-step__title{
font-family:Nunito,sans-serif;font-weight:800;font-size:30px;letter-spacing:-.02em;line-height:1.1;
color:var(--ink);margin-bottom:8px;
}
.o-step__title .em{color:var(--magenta)}
.o-step__sub{font-size:14.5px;color:var(--ink-soft);line-height:1.5;margin-bottom:22px}
/* Feature item (étape 1) */
.o-features{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.o-feature{
display:flex;gap:14px;align-items:flex-start;
padding:14px 16px;
background:var(--cream);
border:1px solid var(--line-soft);
border-radius:14px;
}
.o-feature__pic{flex:none;width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.10))}
.o-feature__txt strong{display:block;font-family:Nunito,sans-serif;font-weight:800;font-size:14.5px;color:var(--ink);margin-bottom:3px;letter-spacing:-.005em}
.o-feature__txt span{font-size:13px;color:var(--ink-soft);line-height:1.5;font-family:'Arial Rounded MT Bold',Nunito,sans-serif;font-weight:500}
/* Stage (étape 2 — phases numérotées) */
.o-stages{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.o-stage{
display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:flex-start;
padding:14px 16px;
background:var(--paper);
border:1.5px solid var(--line);
border-radius:14px;
}
.o-stage__num{
flex:none;width:36px;height:36px;border-radius:10px;
display:grid;place-items:center;
font-family:Nunito,sans-serif;font-weight:900;font-size:15px;color:var(--ink);
}
.o-stage:nth-child(1) .o-stage__num{background:var(--magenta);color:var(--paper)}
.o-stage:nth-child(2) .o-stage__num{background:var(--yellow)}
.o-stage:nth-child(3) .o-stage__num{background:var(--cyan);color:var(--paper)}
.o-stage__txt strong{display:block;font-family:Nunito,sans-serif;font-weight:800;font-size:14.5px;color:var(--ink);margin-bottom:3px;letter-spacing:-.005em}
.o-stage__txt span{font-size:13px;color:var(--ink-soft);line-height:1.5;font-family:'Arial Rounded MT Bold',Nunito,sans-serif;font-weight:500}
/* Aperçu exercice (étape 3) */
.o-exercise{
background:linear-gradient(135deg,var(--cream) 0%,var(--cream-2) 100%);
border:1.5px solid var(--line);
border-radius:14px;padding:18px 20px;margin-bottom:16px;
}
.o-exercise__head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.o-exercise__icon{width:40px;height:40px;flex:none;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.10))}
.o-exercise__title{font-family:Nunito,sans-serif;font-weight:800;font-size:15.5px;color:var(--ink);letter-spacing:-.005em}
.o-exercise__author{font-size:12px;color:var(--ink-soft);font-family:'Arial Rounded MT Bold',Nunito,sans-serif;font-weight:500;margin-top:2px}
.o-exercise__excerpt{
font-family:Georgia,serif;font-size:13.5px;line-height:1.65;color:var(--ink-2);
border-top:1px solid var(--line);padding-top:12px;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.o-exercise__meta{
display:flex;gap:14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
font-size:11.5px;color:var(--ink-soft);font-weight:600;letter-spacing:.04em;
}
.o-tip{
background:linear-gradient(135deg,#FFF6D2 0%,#FFE9A0 100%);
border-left:3px solid var(--yellow);
border-radius:0 12px 12px 0;
padding:12px 16px;margin-bottom:22px;
font-size:13px;color:var(--ink);line-height:1.5;
}
.o-tip strong{color:var(--ink);font-weight:800}
/* Boutons d'étape */
.o-btn{
width:100%;padding:14px 22px;
background:var(--indigo);color:var(--paper);
border:none;border-radius:12px;
font-size:14.5px;font-weight:700;letter-spacing:.01em;
display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
transition:background .2s var(--ease),transform .15s var(--ease),box-shadow .2s var(--ease);
box-shadow:0 8px 18px rgba(84,67,191,.25);
}
.o-btn:hover{background:var(--indigo-2);transform:translateY(-1px);box-shadow:0 12px 24px rgba(84,67,191,.35)}
.o-btn--ghost{
background:transparent;color:var(--ink-soft);
border:1.5px solid var(--line);
box-shadow:none;
}
.o-btn--ghost:hover{background:var(--field);color:var(--ink-2);border-color:var(--ink-mute);transform:none;box-shadow:none}
.o-nav{display:flex;gap:10px}
.o-nav .o-btn--ghost{flex:0 0 auto;width:auto;padding:14px 18px}
.o-nav .o-btn:not(.o-btn--ghost){flex:1}
@media (max-width:560px){
.o-card{padding:28px 24px}
.o-step__title{font-size:24px}
}
/* ════════════════════════════════════════════════════════════════════════
DASHBOARD — espace utilisateur connecté
════════════════════════════════════════════════════════════════════════ */
body.lspk-dash{background:var(--cream)}
/* Appbar */
.d-appbar{
position:sticky;top:0;z-index:50;
background:rgba(251,247,238,.92);
backdrop-filter:blur(12px);
border-bottom:1px solid var(--line-soft);
padding:14px 0;
}
.d-appbar__inner{
max-width:1180px;margin:0 auto;padding:0 32px;
display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.d-appbar__brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.d-appbar__brand img{width:32px;height:32px;object-fit:contain}
.d-appbar__brand-name{font-family:Nunito,sans-serif;font-weight:800;font-size:16px;letter-spacing:-.01em}
.d-appbar__brand-name .k{color:var(--cyan)}
.d-appbar__nav{display:flex;align-items:center;gap:24px;font-size:13.5px;font-weight:600}
.d-appbar__nav a{color:var(--ink-soft);transition:color .2s var(--ease)}
.d-appbar__nav a:hover,.d-appbar__nav a.is-active{color:var(--indigo)}
.d-appbar__nav a.is-active{position:relative}
.d-appbar__nav a.is-active::after{
content:"";position:absolute;left:0;right:0;bottom:-18px;height:2px;
background:linear-gradient(90deg,var(--indigo),var(--magenta));
}
.d-appbar__user{display:inline-flex;align-items:center;gap:10px}
.d-appbar__avatar{
width:34px;height:34px;border-radius:50%;
background:linear-gradient(135deg,var(--violet),var(--indigo));
color:var(--paper);
display:grid;place-items:center;
font-family:Nunito,sans-serif;font-weight:800;font-size:14px;
box-shadow:0 4px 10px rgba(84,67,191,.22);
}
.d-appbar__user-name{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.d-appbar__logout{
width:34px;height:34px;border-radius:50%;
background:transparent;border:1px solid var(--line);
display:grid;place-items:center;
color:var(--ink-soft);font-size:14px;cursor:pointer;
transition:background .2s var(--ease),color .2s var(--ease);
}
.d-appbar__logout:hover{background:var(--field);color:var(--magenta)}
/* Container */
.d-wrap{max-width:1180px;margin:0 auto;padding:32px}
/* Hero dashboard */
.d-hero{
position:relative;
background:
radial-gradient(700px 400px at 90% 0%, rgba(232,61,142,.18), transparent 60%),
radial-gradient(600px 400px at 0% 80%, rgba(91,184,229,.20), transparent 65%),
linear-gradient(135deg,var(--night-1) 0%,var(--night-2) 60%,#3A1F8A 100%);
color:var(--on-night);
border-radius:24px;
padding:36px 40px;
display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;
overflow:hidden;
margin-bottom:24px;
box-shadow:0 24px 60px rgba(8,4,30,.18);
}
.d-hero::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:
radial-gradient(1.5px 1.5px at 22% 18%, rgba(255,255,255,.7), transparent 50%),
radial-gradient(1px 1px at 60% 22%, rgba(255,255,255,.5), transparent 50%),
radial-gradient(2px 2px at 38% 70%, rgba(255,255,255,.7), transparent 50%),
radial-gradient(1px 1px at 82% 60%, rgba(255,255,255,.45), transparent 50%);
}
.d-hero__txt{position:relative;z-index:2}
.d-hero__eyebrow{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);font-weight:800}
.d-hero__title{
font-family:Nunito,sans-serif;font-weight:800;font-size:34px;letter-spacing:-.015em;
color:var(--paper);margin:8px 0 6px;
}
.d-hero__name{color:var(--yellow)}
.d-hero__sub{font-size:14.5px;color:var(--on-night-soft);max-width:480px}
.d-hero__cta-row{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.d-hero__btn{
padding:13px 22px;background:var(--paper);color:var(--ink);
border-radius:12px;font-weight:700;font-size:14px;letter-spacing:.01em;
display:inline-flex;align-items:center;gap:8px;cursor:pointer;
box-shadow:0 8px 18px rgba(0,0,0,.18);
transition:transform .15s var(--ease),box-shadow .2s var(--ease);
}
.d-hero__btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(0,0,0,.26)}
.d-hero__btn--ghost{
background:rgba(255,255,255,.12);color:var(--paper);
border:1.5px solid rgba(255,255,255,.50);
box-shadow:none;backdrop-filter:blur(8px);
}
.d-hero__btn--ghost:hover{background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.70);box-shadow:none}
.d-hero__done{
display:inline-flex;align-items:center;gap:8px;
padding:8px 14px;background:rgba(123,201,125,.22);
border:1px solid rgba(123,201,125,.40);
border-radius:var(--r-pill);font-size:13px;font-weight:700;color:#A8E0AA;
}
.d-hero__visual{
position:relative;z-index:2;
width:120px;height:120px;border-radius:50%;
background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.20);
display:grid;place-items:center;font-size:54px;
}
/* Grid stats 4 colonnes */
.d-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.d-stat{
background:var(--paper);
border:1px solid var(--line-soft);
border-radius:18px;padding:18px 20px;
box-shadow:0 4px 12px rgba(15,8,40,.04);
display:flex;flex-direction:column;gap:4px;
transition:transform .15s var(--ease),box-shadow .2s var(--ease);
}
.d-stat:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(15,8,40,.10)}
.d-stat__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.d-stat__label{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
.d-stat__pic{width:28px;height:28px}
.d-stat__value{font-family:Nunito,sans-serif;font-weight:800;font-size:32px;letter-spacing:-.02em;color:var(--ink);line-height:1}
.d-stat__sub{font-size:12px;color:var(--ink-soft);font-family:'Arial Rounded MT Bold',Nunito,sans-serif;font-weight:500;margin-top:2px}
/* Section card */
.d-section{
background:var(--paper);
border:1px solid var(--line-soft);
border-radius:22px;padding:28px;
box-shadow:0 4px 12px rgba(15,8,40,.04);
margin-bottom:24px;
}
.d-section__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.d-section__head h2{
font-family:Nunito,sans-serif;font-weight:800;font-size:22px;letter-spacing:-.01em;color:var(--ink);
}
.d-section__head .d-section__sub{font-size:13px;color:var(--ink-soft);margin-top:2px}
.d-section__cta{
font-size:13px;font-weight:700;color:var(--indigo);
display:inline-flex;align-items:center;gap:4px;
transition:gap .2s var(--ease);
}
.d-section__cta:hover{gap:8px}
/* Today card */
.d-today{
display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;
background:linear-gradient(135deg,#FFF6D2 0%,#FFE9A0 100%);
border:1px solid #F2D88C;
border-radius:18px;padding:24px;
box-shadow:0 10px 28px rgba(180,140,20,.18);
}
.d-today__num{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#9E6B12;font-weight:800;margin-bottom:6px}
.d-today__title{font-family:Nunito,sans-serif;font-weight:800;font-size:22px;color:var(--ink);margin-bottom:4px}
.d-today__author{font-size:13px;color:var(--ink-2);font-style:italic}
.d-today__btn{
padding:14px 22px;background:var(--ink);color:var(--paper);
border-radius:12px;font-weight:700;font-size:14px;letter-spacing:.01em;
display:inline-flex;align-items:center;gap:8px;
box-shadow:0 8px 18px rgba(15,8,40,.30);
transition:background .2s var(--ease),transform .15s var(--ease);
}
.d-today__btn:hover{background:var(--indigo);transform:translateY(-1px)}
/* Liste textes / historique */
.d-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.d-list__item{
display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
padding:14px 18px;
background:var(--cream);
border:1px solid var(--line-soft);
border-radius:14px;
transition:transform .15s var(--ease),background .2s var(--ease);
}
.d-list__item:hover{background:var(--field);transform:translateX(2px)}
.d-list__icon{
flex:none;width:36px;height:36px;border-radius:10px;
background:var(--paper);border:1px solid var(--line);
display:grid;place-items:center;font-size:14px;
}
.d-list__txt strong{display:block;font-family:Nunito,sans-serif;font-weight:800;font-size:14.5px;color:var(--ink);letter-spacing:-.005em}
.d-list__txt span{font-size:12.5px;color:var(--ink-soft);font-family:'Arial Rounded MT Bold',Nunito,sans-serif;font-weight:500}
.d-list__meta{font-size:12px;color:var(--ink-mute);font-weight:600;text-align:right}
.d-list__meta strong{display:block;font-size:13px;color:var(--ink-2);font-weight:800}
/* Empty state */
.d-empty{
text-align:center;padding:30px 20px;
background:var(--cream);border-radius:14px;
font-size:14px;color:var(--ink-soft);
}
/* Progression bar */
.d-progress{
display:flex;align-items:center;gap:14px;margin-top:14px;
}
.d-progress__bar{
flex:1;height:8px;border-radius:8px;background:var(--field);overflow:hidden;
}
.d-progress__fill{
height:100%;border-radius:8px;
background:linear-gradient(90deg,var(--violet),var(--magenta));
transition:width .4s var(--ease);
}
.d-progress__label{font-size:12px;color:var(--ink-soft);font-weight:600;white-space:nowrap}
.d-progress__label strong{color:var(--ink);font-weight:800}
@media (max-width:980px){
.d-appbar__nav{display:none}
.d-stats{grid-template-columns:repeat(2,1fr)}
.d-hero{grid-template-columns:1fr;text-align:center;padding:28px 24px}
.d-hero__cta-row{justify-content:center}
.d-hero__visual{margin:0 auto;width:80px;height:80px;font-size:36px}
.d-today{grid-template-columns:1fr;text-align:center}
}
@media (max-width:560px){
.d-wrap{padding:18px}
.d-stats{grid-template-columns:1fr 1fr}
.d-stat__value{font-size:26px}
.d-section{padding:20px}
}
/* ════════════════════════════════════════════════════════════════════════
HOME — sections spécifiques à la landing publique
════════════════════════════════════════════════════════════════════════ */
/* 3 étapes numérotées */
.h-steps{padding:90px 0;background:var(--paper)}
.h-steps__inner{
max-width:1180px;margin:0 auto;padding:0 32px;
display:grid;grid-template-columns:1fr 1.4fr;gap:60px;align-items:center;
}
.h-steps__head .pp-eyebrow,
.h-steps__head .h-eyebrow{
display:inline-block;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--magenta);font-weight:800;margin-bottom:14px;
}
.h-steps__title{
font-family:Nunito,sans-serif;
font-size:42px;font-weight:800;line-height:1.05;letter-spacing:-.02em;
color:var(--ink);
}
.h-steps__title em{font-style:normal;color:var(--magenta)}
.h-steps__list{display:flex;flex-direction:column;gap:14px}
.h-step{
display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;
padding:22px 24px;
background:var(--cream);
border:1px solid var(--line-soft);
border-radius:18px;
transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.h-step:hover{transform:translateX(4px);box-shadow:0 16px 30px rgba(15,8,40,.08);border-color:var(--line)}
.h-step__num{
font-family:Nunito,sans-serif;font-weight:800;font-size:34px;
color:var(--magenta);
width:54px;text-align:center;line-height:1;
}
.h-step__txt strong{
display:block;font-family:Nunito,sans-serif;font-weight:800;font-size:17px;
color:var(--ink);margin-bottom:3px;letter-spacing:-.01em;
}
.h-step__txt span{
font-size:14px;color:var(--ink-soft);
font-family:'Arial Rounded MT Bold',Nunito,sans-serif;font-weight:500;
}
.h-step__arr{font-size:22px;color:var(--ink-mute)}
/* Section méthode sombre */
.h-method{
position:relative;
background:
radial-gradient(700px 500px at 90% 50%, rgba(232,61,142,.20), transparent 60%),
radial-gradient(700px 500px at 10% 50%, rgba(91,184,229,.18), transparent 60%),
linear-gradient(180deg,var(--night-1) 0%,var(--night-2) 100%);
color:var(--on-night);
padding:90px 0;overflow:hidden;
}
.h-method::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:
radial-gradient(1.5px 1.5px at 18% 24%, rgba(255,255,255,.7), transparent 50%),
radial-gradient(1px 1px at 64% 16%, rgba(255,255,255,.5), transparent 50%),
radial-gradient(2px 2px at 38% 60%, rgba(255,255,255,.7), transparent 50%),
radial-gradient(1px 1px at 82% 70%, rgba(255,255,255,.45), transparent 50%);
}
.h-method__inner{
position:relative;
max-width:1180px;margin:0 auto;padding:0 32px;
display:grid;grid-template-columns:1fr 1.1fr;gap:60px;align-items:center;
}
.h-method__chap{
font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--cyan);font-weight:800;margin-bottom:14px;
}
.h-method__title{
font-family:Nunito,sans-serif;
font-size:46px;font-weight:800;line-height:1.05;letter-spacing:-.02em;
color:var(--paper);
}
.h-method__title em{font-style:normal;color:var(--yellow)}
.h-method__sub{
margin-top:18px;font-size:16px;line-height:1.55;color:var(--on-night-soft);
max-width:480px;
}
.h-method__sub .cyan{color:var(--cyan);font-weight:700}
.h-method__sub strong{color:var(--paper);font-weight:700}
.h-timeline{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.h-timeline__row{
display:grid;grid-template-columns:170px 1fr;gap:20px;align-items:flex-start;
padding:14px 18px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
border-radius:12px;backdrop-filter:blur(6px);
}
.h-timeline__label{
font-family:Nunito,sans-serif;font-weight:800;font-size:13.5px;
color:var(--yellow);letter-spacing:-.005em;
}
.h-timeline__txt{
font-size:14px;line-height:1.5;color:var(--on-night-soft);
font-family:'Arial Rounded MT Bold',Nunito,sans-serif;font-weight:500;
}
@media (max-width:980px){
.h-steps__inner{grid-template-columns:1fr;gap:30px}
.h-steps__title{font-size:34px}
.h-method__inner{grid-template-columns:1fr;gap:40px}
.h-method__title{font-size:34px}
.h-timeline__row{grid-template-columns:1fr;gap:4px}
}
@media (max-width:560px){
.h-step{grid-template-columns:auto 1fr;gap:14px;padding:18px}
.h-step__arr{display:none}
}
/* ════════════════════════════════════════════════════════════════════════
READER — fond cinématique + sidebar progression
════════════════════════════════════════════════════════════════════════ */
.r-shell{display:grid;grid-template-columns:1fr 360px;min-height:100vh}
.r-main{position:relative;overflow:hidden;display:flex;flex-direction:column}
.r-main__bg{
position:absolute;inset:0;z-index:0;
background-image:url('../img/image-petit-prince.png');
background-size:cover;background-position:center;
}
.r-main__scrim{
position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(180deg, rgba(14,10,46,.55) 0%, rgba(14,10,46,.18) 22%, rgba(14,10,46,.10) 60%, rgba(14,10,46,.55) 100%),
linear-gradient(90deg, rgba(14,10,46,.55) 0%, rgba(14,10,46,.10) 50%, transparent 100%);
}
.r-top{
position:relative;z-index:3;
display:flex;align-items:center;justify-content:space-between;
padding:18px 30px;gap:20px;
}
.r-back{
display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
border-radius:var(--r-pill);font-size:13.5px;font-weight:600;color:var(--paper);
backdrop-filter:blur(8px);transition:background .2s var(--ease);
}
.r-back:hover{background:rgba(255,255,255,.16)}
.r-progress{display:flex;align-items:center;gap:14px;min-width:280px;flex:1;max-width:420px}
.r-progress__label{font-size:13px;font-weight:600;color:var(--paper);white-space:nowrap}
.r-progress__bar{flex:1;height:6px;border-radius:6px;background:rgba(255,255,255,.14);overflow:hidden;position:relative}
.r-progress__fill{
height:100%;background:linear-gradient(90deg,var(--violet),var(--indigo));
border-radius:6px;width:20%;transition:width .4s var(--ease);
}
.r-tools{display:flex;align-items:center;gap:8px}
.r-tool{
width:38px;height:38px;border-radius:10px;
background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);
display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--paper);
transition:background .2s var(--ease);
}
.r-tool:hover{background:rgba(255,255,255,.18)}
.r-tool--font{font-family:Georgia,serif;font-size:16px}
.r-reader{
position:relative;z-index:3;flex:1;
padding:30px 80px 30px 60px;
display:flex;flex-direction:column;justify-content:center;
}
.r-reader__title{
font-family:Nunito,sans-serif;font-size:42px;font-weight:800;letter-spacing:-.02em;line-height:1.1;
color:var(--paper);margin-bottom:22px;text-shadow:0 2px 16px rgba(0,0,0,.45);
}
.r-reader__title::after{content:" ✦";color:var(--yellow)}
.r-reader__txt{
font-family:Georgia,serif;font-size:19px;line-height:1.75;
color:var(--paper);max-width:560px;text-shadow:0 1px 10px rgba(0,0,0,.45);
}
.r-reader__txt p{margin-bottom:14px}
/* Pictogrammes inline (mécanisme spiKto) — override du reset display:block.
S'applique à TOUTE image dans le bloc de lecture, qu'elle ait la classe
.v-pic (preview manuel) ou pas (injection JS via generateBihemiHTML). */
.r-reader__txt img,
.r-reader__txt #pp-bihemi-block img,
.r-reader__txt .v-pic{
display:inline-block !important;
width:auto;
height:.95em;
vertical-align:-.18em;
margin:0 1px;
filter:drop-shadow(0 1px 4px rgba(0,0,0,.45));
}
/* Marquee — texte défilant sur une ligne */
.r-marquee{
position:relative;z-index:3;
margin:0 60px 22px;
padding:14px 18px 12px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
border-radius:16px;
backdrop-filter:blur(10px);
box-shadow:0 8px 24px rgba(0,0,0,.20);
}
.r-marquee__wrap{
overflow:hidden;
position:relative;
cursor:pointer;
font-family:Georgia,serif;
font-size:18px;line-height:1.6;
color:var(--paper);
white-space:nowrap;
height:1.6em;
text-shadow:0 1px 6px rgba(0,0,0,.4);
}
.r-marquee__wrap::before,
.r-marquee__wrap::after{
content:"";position:absolute;top:0;bottom:0;width:32px;z-index:2;pointer-events:none;
}
.r-marquee__wrap::before{left:0;background:linear-gradient(90deg,rgba(14,10,46,.55),transparent)}
.r-marquee__wrap::after{right:0;background:linear-gradient(270deg,rgba(14,10,46,.55),transparent)}
.r-marquee__track{display:inline-block;white-space:nowrap;will-change:transform}
.r-marquee__track img{
display:inline-block !important;width:auto;height:.95em;
vertical-align:-.18em;margin:0 1px;
filter:drop-shadow(0 1px 4px rgba(0,0,0,.45));
}
.r-marquee__hint{
font-size:11px;color:var(--on-night-soft);font-weight:500;
margin-top:8px;text-align:center;letter-spacing:.04em;
}
.r-marquee__controls{
display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
margin-top:10px;
}
.r-marquee__btn{
padding:6px 14px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
border-radius:var(--r-pill);
font-size:11.5px;font-weight:600;color:var(--paper);
cursor:pointer;letter-spacing:.02em;
transition:background .2s var(--ease);
}
.r-marquee__btn:hover{background:rgba(255,255,255,.16)}
.r-marquee__speed{
display:inline-flex;align-items:center;gap:8px;
font-size:11px;color:var(--on-night-soft);font-weight:500;
}
.r-marquee__speed input[type=range]{
-webkit-appearance:none;appearance:none;
width:90px;height:4px;
background:rgba(255,255,255,.18);
border-radius:2px;cursor:pointer;
}
.r-marquee__speed input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;appearance:none;
width:14px;height:14px;border-radius:50%;
background:var(--magenta);cursor:pointer;
border:2px solid var(--paper);
}
.r-marquee__speed input[type=range]::-moz-range-thumb{
width:14px;height:14px;border-radius:50%;
background:var(--magenta);cursor:pointer;border:2px solid var(--paper);
}
.r-marquee__speed-value{color:var(--paper);font-weight:700;min-width:54px;text-align:left}
/* Pagination du bloc statique */
.r-reader__txt #pp-bihemi-block,
.r-reader__txt #pp-normal-block{
transition:opacity .2s var(--ease);
max-height:38vh;
overflow:auto;
scrollbar-width:thin;
scrollbar-color:rgba(255,255,255,.30) transparent;
}
.r-reader__txt #pp-bihemi-block::-webkit-scrollbar,
.r-reader__txt #pp-normal-block::-webkit-scrollbar{width:6px}
.r-reader__txt #pp-bihemi-block::-webkit-scrollbar-thumb,
.r-reader__txt #pp-normal-block::-webkit-scrollbar-thumb{
background:rgba(255,255,255,.30);border-radius:3px;
}
.r-pages__nav{
display:flex;justify-content:center;align-items:center;gap:14px;
margin-top:14px;
font-size:12.5px;color:var(--on-night-soft);font-weight:600;
}
.r-pages__btn{
width:34px;height:34px;border-radius:50%;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16);
display:grid;place-items:center;color:var(--paper);font-size:13px;
cursor:pointer;backdrop-filter:blur(6px);
transition:background .2s var(--ease);
}
.r-pages__btn:hover:not(:disabled){background:rgba(255,255,255,.20)}
.r-pages__btn:disabled{opacity:.30;cursor:not-allowed}
.r-pages__count{min-width:90px;text-align:center;letter-spacing:.02em}
.r-pages__count strong{color:var(--paper);font-weight:800}
.r-arrow{
position:absolute;top:50%;transform:translateY(-50%);
width:42px;height:42px;border-radius:50%;
background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
display:grid;place-items:center;color:var(--paper);font-size:18px;
backdrop-filter:blur(8px);z-index:4;cursor:pointer;
transition:background .2s var(--ease),transform .15s var(--ease);
}
.r-arrow:hover{background:rgba(255,255,255,.20);transform:translateY(-50%) scale(1.05)}
.r-arrow--prev{left:18px}
.r-arrow--next{right:18px}
.r-audio{position:relative;z-index:3;padding:18px 30px 26px;display:flex;align-items:center;justify-content:center;gap:20px}
.r-audio__chip{
display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);
border-radius:var(--r-pill);font-size:13px;font-weight:600;color:var(--paper);
backdrop-filter:blur(8px);transition:background .2s var(--ease);cursor:pointer;
}
.r-audio__chip:hover{background:rgba(255,255,255,.18)}
.r-audio__transport{display:flex;align-items:center;gap:14px}
.r-audio__btn{
width:38px;height:38px;border-radius:50%;
background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);
display:grid;place-items:center;color:var(--paper);font-size:14px;
backdrop-filter:blur(8px);cursor:pointer;
transition:background .2s var(--ease),transform .15s var(--ease);
}
.r-audio__btn:hover{background:rgba(255,255,255,.18);transform:scale(1.05)}
.r-audio__play{
width:54px;height:54px;
background:linear-gradient(135deg,var(--violet),var(--indigo));
border:none;font-size:18px;
box-shadow:0 8px 22px rgba(84,67,191,.50);
}
.r-audio__play:hover{transform:scale(1.06)}
.r-audio__auto{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--paper);font-weight:600;cursor:pointer}
.r-audio__auto::before{content:"";width:14px;height:14px;border-radius:4px;background:var(--magenta);display:inline-block}
/* Sidebar */
.r-side{
background:linear-gradient(180deg,var(--side-bg) 0%,var(--side-bg-2) 100%);
padding:22px 22px 30px;
display:flex;flex-direction:column;gap:18px;
overflow-y:auto;border-left:1px solid rgba(255,255,255,.06);
}
.r-side__head{
display:flex;justify-content:space-between;align-items:center;
padding-bottom:12px;border-bottom:1px solid var(--side-line);
}
.r-side__title{display:inline-flex;align-items:center;gap:8px;font-family:Nunito,sans-serif;font-size:15px;font-weight:800;color:var(--paper)}
.r-side__streak{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--yellow)}
.r-side__streak::before{content:"🔥";font-size:14px}
.r-side-card{background:var(--side-card);border:1px solid var(--side-line);border-radius:14px;padding:14px}
.r-side-card--lg{padding:16px}
.r-side-card__head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.r-side-card__star{
flex:none;width:36px;height:36px;border-radius:10px;
background:linear-gradient(135deg,#FFE8B0,var(--yellow));
display:grid;place-items:center;font-size:18px;
box-shadow:0 4px 10px rgba(255,212,59,.30);
}
.r-side-card__head-txt{flex:1}
.r-side-card__head-txt strong{display:block;font-size:14px;font-weight:800;color:var(--paper);margin-bottom:2px}
.r-side-card__head-txt span{font-size:12px;color:var(--on-night-soft)}
.r-side-card__bar{height:6px;border-radius:6px;background:rgba(255,255,255,.10);overflow:hidden;margin:6px 0 8px}
.r-side-card__bar-fill{height:100%;background:linear-gradient(90deg,var(--violet),var(--magenta));width:20%;border-radius:6px}
.r-side-card__bar-meta{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--on-night-soft);font-weight:600}
.r-side-card__bar-meta span:last-child{color:var(--paper);font-weight:800}
.r-comp__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.r-comp__label{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--paper)}
.r-comp__label::before{
content:"";width:18px;height:16px;display:inline-block;background:var(--magenta);
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.r-comp__score{font-size:13px;font-weight:800;color:var(--paper)}
.r-comp__hearts{display:flex;gap:6px;margin-bottom:8px}
.r-comp__heart{
width:22px;height:20px;display:inline-block;background:var(--magenta);
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
.r-comp__heart--off{background:rgba(255,255,255,.20)}
.r-comp__msg{font-size:11.5px;color:var(--on-night-soft);font-weight:500}
.r-vocab__title{font-size:13.5px;font-weight:700;color:var(--paper);margin-bottom:10px;display:inline-flex;align-items:center;gap:7px}
.r-vocab__title::before{content:"📖";font-size:14px}
.r-vocab__pills{display:flex;flex-wrap:wrap;gap:6px}
.r-vocab__pill{
padding:6px 11px;background:rgba(110,79,214,.30);
border:1px solid rgba(255,255,255,.10);border-radius:var(--r-pill);
font-size:12px;font-weight:600;color:var(--paper);
}
.r-notes__title{font-size:13.5px;font-weight:700;color:var(--paper);margin-bottom:10px;display:inline-flex;align-items:center;gap:7px}
.r-notes__title::before{content:"📝";font-size:14px}
.r-notes__area{
width:100%;min-height:60px;
background:rgba(255,255,255,.06);border:1px solid var(--side-line);border-radius:10px;
padding:10px 12px;font-family:inherit;font-size:12.5px;line-height:1.5;color:var(--paper);
resize:vertical;
}
.r-notes__area::placeholder{color:rgba(255,255,255,.40)}
.r-notes__area:focus{outline:none;border-color:rgba(255,255,255,.30);background:rgba(255,255,255,.10)}
.r-actions__title{font-size:13.5px;font-weight:700;color:var(--paper);margin-bottom:10px}
.r-actions__row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.r-action{
padding:10px 6px;background:rgba(255,255,255,.06);
border:1px solid var(--side-line);border-radius:10px;
display:flex;flex-direction:column;align-items:center;gap:4px;
font-size:11px;font-weight:600;color:var(--on-night-soft);cursor:pointer;
transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.r-action:hover{background:rgba(255,255,255,.10);color:var(--paper);border-color:rgba(255,255,255,.18)}
.r-action__ic{font-size:16px;color:var(--paper)}
@media (max-width:980px){
.r-shell{grid-template-columns:1fr}
.r-side{order:2;min-height:auto}
.r-main{order:1;min-height:600px}
.r-reader{padding:30px 50px}
.r-reader__title{font-size:32px}
.r-reader__txt{font-size:16px}
}
@media (max-width:560px){
.r-top{padding:14px 16px;flex-wrap:wrap;gap:10px}
.r-progress{order:3;flex-basis:100%;min-width:0;max-width:none}
.r-reader{padding:20px}
.r-reader__title{font-size:26px}
.r-reader__txt{font-size:15px}
.r-arrow{display:none}
.r-side{padding:18px 16px 24px}
}