:root { --ink:#26322c; --cream:#f8f5ef; --sand:#e5d5bd; --rose:#d9a299; --olive:#aeb497; --line:rgba(38,50,44,.18); --serif:'Playfair Display', Georgia, serif; --sans:'DM Sans', sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--cream); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5; } a { color:inherit; text-decoration:none; } .site-header { height:88px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,5vw,76px); border-bottom:1px solid var(--line); } .brand { font:600 21px var(--serif); letter-spacing:-.5px; } .brand span { font-style:italic; } nav { display:flex; align-items:center; gap:29px; font-size:14px; } nav a:not(.member-link) { opacity:.8; } .member-link { padding:10px 15px; border:1px solid var(--ink); border-radius:99px; font-weight:500; } .member-link span { margin-left:6px; } .menu-button { display:none; background:none; border:0; font:500 14px var(--sans); color:var(--ink); }
.hero { min-height:640px; display:grid; grid-template-columns:1.06fr .94fr; } .hero-copy { padding:clamp(70px,12vw,155px) clamp(24px,8vw,120px); display:flex; flex-direction:column; justify-content:center; } .eyebrow { font-size:12px; text-transform:uppercase; letter-spacing:1.7px; font-weight:700; margin:0 0 20px; opacity:.72; } h1,h2,h3,p { margin-top:0; } h1 { font:600 clamp(48px,6vw,80px)/1.04 var(--serif); letter-spacing:-3px; margin-bottom:28px; } h1 em,h2 em { font-weight:600; } .lead { max-width:430px; font-size:18px; line-height:1.65; opacity:.8; margin-bottom:34px; } .hero-actions { display:flex; align-items:center; gap:25px; } .button { display:inline-flex; align-items:center; gap:22px; padding:14px 20px; border:0; border-radius:2px; font:600 14px var(--sans); cursor:pointer; } .button span { font-size:19px; line-height:1; } .button-primary { background:var(--ink); color:white; } .button-dark { background:var(--ink); color:white; } .text-link { font-size:14px; font-weight:600; border-bottom:1px solid currentColor; padding-bottom:3px; } .text-link span { margin-left:8px; }
.hero-art { position:relative; overflow:hidden; background:var(--sand); min-height:500px; } .hero-art .sun { position:absolute; width:260px; height:260px; border-radius:50%; background:#efbf8e; top:90px; left:50%; transform:translateX(-50%); } .arch { position:absolute; width:360px; height:475px; border:2px solid rgba(38,50,44,.6); border-bottom:0; border-radius:180px 180px 0 0; left:50%; top:125px; transform:translateX(-50%); } .hero-art p { position:absolute; z-index:2; bottom:70px; left:50%; transform:translateX(-50%); width:100%; text-align:center; font:600 28px/1.2 var(--serif); } .leaf { position:absolute; width:155px; height:48px; background:var(--olive); border-radius:100% 0 100% 0; transform-origin:right center; } .leaf-one { left:-3px; top:360px; transform:rotate(25deg); box-shadow:60px -80px 0 var(--olive), 98px -150px 0 var(--olive); } .leaf-two { right:-20px; top:155px; transform:scaleX(-1) rotate(-20deg); box-shadow:62px -65px 0 var(--olive), 96px -128px 0 var(--olive); }
.intro { padding:120px clamp(24px,8vw,120px); } .intro-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:9vw; } h2 { font:600 clamp(38px,4.3vw,58px)/1.12 var(--serif); letter-spacing:-2px; margin:0; } .intro-grid p { font-size:17px; line-height:1.75; opacity:.82; margin:8px 0 28px; }
.formations { background:#eee9df; padding:96px clamp(24px,5vw,76px) 110px; } .section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:45px; } .section-heading .eyebrow { margin-bottom:15px; } .course-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .course-card { min-height:460px; position:relative; padding:24px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; } .card-sand { background:#d6c4a9; } .card-rose { background:#ce9188; } .card-olive { background:#a9b08f; } .course-number { font:600 14px var(--serif); opacity:.7; } .course-visual { position:absolute; inset:60px 30px 100px; } .flower { display:grid; place-items:center; } .flower i { position:absolute; width:85px; height:145px; background:#f1dfc2; border-radius:100% 0; transform-origin:bottom right; } .flower i:nth-child(1){transform:translate(-38px,-33px) rotate(10deg)} .flower i:nth-child(2){transform:translate(8px,-66px) rotate(82deg)} .flower i:nth-child(3){transform:translate(61px,-10px) rotate(145deg)} .flower i:nth-child(4){transform:translate(3px,42px) rotate(220deg)} .flower b { width:43px;height:43px;border-radius:50%;background:#a27055;z-index:1; } .path:before { content:'';position:absolute;width:280px;height:410px;border:2px solid rgba(255,245,230,.8);border-radius:50%;left:20%;top:-100px;transform:rotate(27deg); } .path:after { content:'';position:absolute;width:160px;height:160px;border-radius:50%;background:#e6b8a5;right:0;bottom:0; } .horizon:before { content:'';position:absolute;left:-40px;right:-40px;bottom:20px;height:160px;border-radius:50% 50% 0 0;background:#ced4b7; } .horizon:after { content:'';position:absolute;width:135px;height:135px;border-radius:50%;background:#eacb8c;top:25px;left:50%; } .course-details { position:relative; z-index:1; } .course-details p { text-transform:uppercase; letter-spacing:1.1px; font-size:10px; font-weight:700; margin-bottom:8px; } h3 { font:600 28px/1.15 var(--serif); letter-spacing:-.8px; margin-bottom:17px; max-width:260px; } .course-details a { font-size:13px; font-weight:700; } .course-details a span { margin-left:8px; }
.member-section { display:grid; grid-template-columns:1fr 1fr; background:var(--rose); padding:100px clamp(24px,8vw,120px); gap:80px; align-items:center; } .member-copy { max-width:435px; } .member-copy h2 { margin-bottom:24px; } .member-copy > p:not(.eyebrow) { font-size:17px; line-height:1.7; margin-bottom:32px; } .dashboard-preview { background:#fbfaf6; color:#27342d; padding:20px; box-shadow:12px 14px 0 rgba(38,50,44,.14); border-radius:3px; max-width:480px; } .preview-top { display:flex; justify-content:space-between; align-items:center; padding-bottom:18px; border-bottom:1px solid var(--line); font-size:13px; font-weight:600; } .preview-avatar { width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:var(--rose); font:600 13px var(--serif); } .preview-label { font-size:11px;text-transform:uppercase;letter-spacing:1.3px;font-weight:700;opacity:.55;margin:23px 0 12px; } .preview-course { display:grid;grid-template-columns:78px 1fr 15px;gap:14px;align-items:center;background:#f0ece4;padding:11px; } .preview-art { height:66px;background:var(--olive);position:relative;overflow:hidden; }.preview-art:after {content:'';position:absolute;width:54px;height:54px;border-radius:50%;background:#edd09e;top:8px;left:12px}.preview-course strong { display:block;font:600 16px var(--serif); }.preview-course small { display:block;font-size:11px;opacity:.65;margin:4px 0 8px; }.progress {height:4px;background:#ded8cc;border-radius:9px}.progress i {display:block;width:42%;height:100%;background:var(--ink);border-radius:9px}.preview-bottom {display:flex;gap:20px;font-size:10px;font-weight:700;margin:22px 2px 1px;opacity:.65}
.resources { padding:110px clamp(24px,8vw,120px); } .resources .eyebrow { margin-bottom:15px; } .resources h2 { max-width:690px; margin-bottom:50px; } .resource-row { display:grid;grid-template-columns:70px 1fr 70px;align-items:center;min-height:86px;border-top:1px solid var(--line); }.resource-row:last-child{border-bottom:1px solid var(--line)}.resource-row span {font:600 14px var(--serif);opacity:.6}.resource-row p{margin:0;font:600 22px var(--serif)}.resource-row a{font-size:13px;font-weight:700;text-align:right}.resource-row a span{margin-left:5px;opacity:1}
.newsletter { text-align:center;background:var(--olive);padding:105px 24px; }.newsletter .eyebrow{margin-bottom:16px}.newsletter h2{margin-bottom:19px}.newsletter>p:not(.eyebrow):not(.form-message){max-width:480px;margin:0 auto 30px;line-height:1.7}.newsletter form{display:flex;max-width:520px;margin:auto;border-bottom:1px solid var(--ink);padding-bottom:7px}.newsletter input{background:transparent;border:0;outline:0;flex:1;font:14px var(--sans);padding:12px 4px}.newsletter input::placeholder{color:rgba(38,50,44,.65)}.newsletter .button{padding:11px 14px}.form-message{font-size:13px;font-weight:600;margin:16px 0 0;min-height:20px}footer{padding:44px clamp(24px,5vw,76px);display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:20px;font-size:13px}footer p{margin:0;opacity:.7}footer div{display:flex;gap:18px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:760px){.site-header{height:70px}.site-header nav{display:none}.menu-button{display:block}.site-header.menu-open nav{display:flex;position:absolute;z-index:10;left:0;right:0;top:70px;background:var(--cream);padding:20px 24px 28px;flex-direction:column;align-items:flex-start;border-bottom:1px solid var(--line)}.hero{grid-template-columns:1fr}.hero-copy{min-height:520px;padding:80px 24px}.hero-art{min-height:430px}.hero-art .sun{top:60px;width:220px;height:220px}.arch{width:290px;height:400px;top:100px}.hero-art p{bottom:40px;font-size:24px}.intro{padding:78px 24px}.intro-grid,.member-section{grid-template-columns:1fr;gap:32px}.course-grid{grid-template-columns:1fr}.course-card{min-height:390px}.section-heading{align-items:start;gap:18px;flex-direction:column}.formations{padding:75px 24px}.member-section{padding:75px 24px}.resources{padding:76px 24px}.resource-row{grid-template-columns:40px 1fr 50px}.resource-row p{font-size:18px}.newsletter{padding:76px 24px}.newsletter form{flex-direction:column;gap:12px;border:0}.newsletter input{border-bottom:1px solid var(--ink)}footer{grid-template-columns:1fr;padding:35px 24px}footer div{flex-wrap:wrap}h1{letter-spacing:-2px}.hero-actions{flex-wrap:wrap}}

/* Espace membre */
.auth-view,.dashboard-view,.player-view{max-width:640px;margin:0 auto;padding:96px 24px 120px;}
.dashboard-view{max-width:820px;}
.player-view{max-width:960px;}
.auth-form{display:flex;gap:14px;max-width:480px;border-bottom:1px solid var(--ink);padding-bottom:8px;margin-top:8px;}
.auth-form input{flex:1;background:transparent;border:0;outline:0;font:15px var(--sans);padding:12px 4px;}
.auth-form input::placeholder{color:rgba(38,50,44,.55);}
#logout-button{background:none;border:0;font:600 14px var(--sans);cursor:pointer;border-bottom:1px solid currentColor;padding-bottom:2px;}
.course-list{display:flex;flex-direction:column;gap:28px;margin-top:40px;}
.course-block{background:#fff;border:1px solid var(--line);border-radius:4px;padding:28px 30px;}
.course-block h3{font:600 24px var(--serif);margin-bottom:8px;letter-spacing:-.5px;}
.course-block p{font-size:15px;opacity:.78;margin-bottom:14px;}
.course-locked{background:#f3efe5;}
.course-block .button{margin-top:16px;}
.locked-note{font-size:13px;font-weight:600;opacity:.7;text-transform:uppercase;letter-spacing:.6px;}
.lesson-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;}
.lesson-button{width:100%;text-align:left;background:var(--cream);border:1px solid var(--line);border-radius:3px;padding:12px 16px;font:500 14px var(--sans);cursor:pointer;}
.lesson-button:disabled{opacity:.45;cursor:not-allowed;}
.lesson-button:not(:disabled):hover{background:var(--sand);}
.video-frame{position:relative;padding-top:56.25%;margin-top:24px;background:#000;border-radius:4px;overflow:hidden;}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}