/* OUPI Academy — feuille autonome, tokens de la vitrine oupi.com (2026) */
:root{--dark:#2B331A;--mid:#3D4A1E;--olive:#6B7B3A;--sage:#B5C48A;--cream:#F5F0E8;--bg:#FAFAF7;--ink:#1A1A1A;--sand:#E8E4D9;--r:20px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:'DM Sans',system-ui,sans-serif;color:var(--ink);background:var(--bg);min-height:100vh;display:flex;flex-direction:column;line-height:1.6}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.5;background:radial-gradient(900px 480px at 85% -10%,rgba(181,196,138,.35),transparent 60%)}
h1,h2,h3,.serif{font-family:'Newsreader',Georgia,serif;font-weight:400;letter-spacing:-.02em;color:var(--dark);line-height:1.12}
h1 em,h2 em{font-style:italic;font-weight:300;color:var(--olive)}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.narrow{max-width:760px}
main{flex:1}
/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(250,250,247,.85);backdrop-filter:blur(16px);border-bottom:1px solid rgba(43,51,26,.06)}
.nav .wrap{height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-family:'Newsreader',serif;font-size:22px;color:var(--dark)}
.brand small{font-family:'DM Sans',sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--olive);margin-left:4px}
.nav-links{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:500}
.nav-links a{color:rgba(43,51,26,.7);position:relative}
.nav-links a:hover{color:var(--dark)}
.lang{display:flex;gap:6px;font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.lang a{padding:4px 8px;border-radius:100px;color:rgba(43,51,26,.5)}
.lang a.on{background:var(--dark);color:var(--cream)}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;font-weight:600;font-size:14px;border-radius:100px;transition:all .25s ease;border:2px solid transparent;cursor:pointer}
.btn-primary{background:var(--dark);color:var(--cream)}
.btn-primary:hover{background:var(--mid);transform:translateY(-2px);box-shadow:0 10px 30px rgba(43,51,26,.18)}
.btn-secondary{border-color:rgba(43,51,26,.2);color:var(--dark);background:transparent}
.btn-secondary:hover{border-color:var(--dark);background:var(--dark);color:var(--cream)}
.btn-sm{padding:9px 18px;font-size:13px}
/* tags & cards */
.tag{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:rgba(181,196,138,.28);color:var(--dark);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:11px;line-height:1;border-radius:100px}
.tag.soft{background:rgba(43,51,26,.06);color:rgba(43,51,26,.7)}
.card{background:#fff;border-radius:var(--r);padding:30px;border:1px solid rgba(43,51,26,.06);transition:all .3s ease;display:block}
a.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(43,51,26,.10)}
.card-dark{background:var(--dark);color:var(--cream);border-radius:28px;padding:36px}
.card-dark h2,.card-dark h3{color:var(--cream)}
.card-dark em{color:var(--sage)}
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
/* hero */
.hero{padding:80px 0 40px}
.hero h1{font-size:clamp(38px,5.4vw,66px);margin:14px 0 18px}
.hero p{font-size:18px;color:rgba(26,26,26,.7);max-width:640px}
.kicker{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--olive);font-weight:600}
.muted{color:rgba(26,26,26,.55);font-size:13px}
.meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.progress{height:6px;border-radius:100px;background:rgba(43,51,26,.08);overflow:hidden}
.progress>i{display:block;height:100%;background:var(--olive);border-radius:100px}
/* lesson blocks */
.block{border-radius:var(--r);padding:22px 26px;margin-bottom:16px;font-size:16.5px;line-height:1.7;white-space:pre-line;background:#fff;border:1px solid rgba(43,51,26,.06)}
.block .label{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;margin-bottom:8px;white-space:normal}
.block.tip{background:#FBF6E9;border-left:4px solid #D9B25F}.block.tip .label{color:#9A7B2E}
.block.practice{background:#F1F4E6;border-left:4px solid var(--olive)}.block.practice .label{color:var(--olive)}
.block.recap{background:#EAF3EA;border-left:4px solid #4E8A5E}.block.recap .label{color:#3D7049}
.lesson-list{display:flex;flex-direction:column;gap:12px}
.lesson-row{display:flex;gap:18px;align-items:flex-start;padding:22px 26px}
.num{flex:0 0 40px;height:40px;border-radius:14px;background:rgba(107,123,58,.12);color:var(--olive);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:15px}
.pager{display:flex;justify-content:space-between;gap:14px;margin-top:36px;flex-wrap:wrap}
.dots{display:flex;gap:6px;margin:26px 0 30px}.dots a{flex:1;height:6px;border-radius:100px;background:rgba(43,51,26,.1)}.dots a.on{background:var(--olive)}.dots a:hover{background:var(--sage)}
/* footer */
footer{margin-top:80px;background:var(--dark);color:rgba(245,240,232,.75);padding:56px 0 36px;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
footer a{color:rgba(245,240,232,.75)}footer a:hover{color:#fff}
footer .brand{color:var(--cream)}
input.field{width:100%;padding:14px 18px;border-radius:100px;border:1.5px solid rgba(43,51,26,.18);font:inherit;font-size:15px;background:#fff}
input.field:focus{outline:none;border-color:var(--olive)}
.ok{color:#3D7049}.ko{color:#B0413E}
@media(max-width:760px){.nav-links{display:none}.hero{padding:48px 0 24px}.block{font-size:15.5px;padding:18px 20px}}