/* Virgule Surface Polish — page composition, not a generic component skin. */
:root{--vsp-gold:#d9a857;--vsp-cream:#e8f5e8;--vsp-muted:rgba(232,245,232,.62);--vsp-line:rgba(232,245,232,.14);--vsp-panel:rgba(18,38,23,.72)}
body{background-color:var(--ardoise,#101d19)}
/* Editorial legal surfaces */
body.legal-page{padding:0 20px 72px;background:var(--ardoise,#101d19)}
.legal-page>.container{max-width:900px;padding-top:108px}
.legal-page .container:before{content:'DOCUMENT / 01';display:block;margin-bottom:18px;color:var(--vsp-gold);font:500 10px var(--font-head);letter-spacing:.16em}
.legal-page h1{font-size:clamp(34px,6vw,64px);line-height:.98;letter-spacing:-.04em;max-width:760px;margin-bottom:14px}
.legal-page .subtitle{font-size:13px;margin-bottom:34px;color:var(--vsp-muted)}
.legal-page .toc{position:relative;padding:22px 26px;margin-bottom:58px;border-color:var(--vsp-line);background:rgba(18,38,23,.6)}
.legal-page .toc:before{content:'INDEX';position:absolute;top:-9px;inset-inline-start:20px;padding:0 8px;background:var(--ardoise);color:var(--vsp-gold);font:500 9px var(--font-head);letter-spacing:.14em}
.legal-page .toc a{padding:9px 4px;border-bottom:1px solid rgba(232,245,232,.06)}
.legal-page section{position:relative;padding:24px 0 28px;border-top:1px solid rgba(232,245,232,.09)}
.legal-page h2{font-size:clamp(19px,3vw,27px);margin:0 0 14px;color:var(--vsp-cream);letter-spacing:-.02em}
.legal-page p,.legal-page li{max-width:720px;font-size:15px;line-height:1.82}
.legal-page section:before{content:attr(id);position:absolute;inset-inline-end:0;top:25px;color:rgba(217,168,87,.35);font:500 10px var(--font-mono,monospace);letter-spacing:.1em}
.legal-page .crosslink{padding-top:28px}
/* About: manifesto composition */
body.a-propos{background:var(--ardoise,#101d19)}
.a-propos .page-hero{min-height:clamp(420px,64vh,650px);display:flex;flex-direction:column;justify-content:flex-end;padding:110px max(20px,8vw) 72px;position:relative;overflow:clip}
.a-propos .page-hero:after{content:'V';position:absolute;inset-inline-end:6vw;bottom:-.15em;color:rgba(217,168,87,.06);font:400 clamp(180px,32vw,520px) var(--font-head);line-height:1;pointer-events:none}
.a-propos .page-eyebrow{position:relative;z-index:1;color:var(--vsp-gold);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.a-propos .page-title{position:relative;z-index:1;max-width:900px;font-size:clamp(44px,8vw,104px);line-height:.93;letter-spacing:-.055em}
.a-propos .story-section{padding:96px max(20px,8vw) 110px}
.a-propos .story-wrap{max-width:820px;margin-inline:auto}
.a-propos .story-wrap p{font-size:clamp(17px,2vw,22px);line-height:1.72;color:rgba(232,245,232,.64);margin-bottom:30px}
.a-propos .story-wrap .lede{font-size:clamp(25px,4vw,43px);line-height:1.25;color:var(--vsp-cream);letter-spacing:-.025em;margin-bottom:52px}
.a-propos .story-wrap p:last-child{font-family:var(--font-head);font-size:clamp(27px,4vw,48px);line-height:1.2;color:var(--vsp-gold);margin-top:74px}
.a-propos .contact-section{padding:0 max(20px,8vw) 120px}
.a-propos .contact-wrap{max-width:1000px;margin:auto;padding-top:48px;border-top:1px solid var(--vsp-line)}
.a-propos .contact-heading{font-size:clamp(28px,5vw,52px);margin-bottom:8px}
.a-propos .contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}
.a-propos .contact-card{min-height:150px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;background:var(--vsp-panel);border:1px solid var(--vsp-line);border-radius:var(--radius-md);text-decoration:none}
.a-propos .contact-icon{color:var(--vsp-gold);font-size:22px}
.a-propos .contact-label{font:500 18px var(--font-head);color:var(--vsp-cream)}
.a-propos .contact-sublabel{font-size:12px;color:var(--vsp-muted)}
/* Offline: turn an error page into a calm recovery station. */
body:has(.icon-wrap){padding:0 20px 72px}
body:has(.icon-wrap) .container{max-width:620px;padding-top:108px}
body:has(.icon-wrap) .logo{font-family:var(--font-head);font-size:24px;margin-bottom:54px}
body:has(.icon-wrap) .icon-wrap{width:104px;height:104px;margin-bottom:28px;border-color:rgba(217,168,87,.3);background:rgba(217,168,87,.06);animation:vgl-ring 1200ms var(--vgl-ease) both}
body:has(.icon-wrap) h1{font-size:clamp(34px,7vw,56px);letter-spacing:-.045em;margin-bottom:14px}
body:has(.icon-wrap) .subtitle{font-size:16px;max-width:520px;margin-inline:auto;margin-bottom:38px}
body:has(.icon-wrap) .card{text-align:start;padding:24px;border-radius:var(--radius-md);background:var(--vsp-panel);border-color:var(--vsp-line)}
body:has(.icon-wrap) .card-title{font-size:10px;letter-spacing:.16em}
body:has(.icon-wrap) .tip-list li{padding:12px 0;min-height:44px}
body:has(.icon-wrap) .btn{min-height:50px;margin-bottom:10px}
/* Settings: app-grade control center */
body:has(.settings-card) .page{max-width:900px;padding:108px 24px 120px}
body:has(.settings-card) .back-link{margin-bottom:28px}
body:has(.settings-card) .profile-card{padding:28px;border-radius:var(--radius-md);border-color:rgba(217,168,87,.2);background:var(--vsp-panel)}
body:has(.settings-card) .avatar{width:72px;height:72px;border-color:rgba(217,168,87,.35)}
body:has(.settings-card) .profile-name{font-size:24px}
body:has(.settings-card) .params-section{margin-bottom:34px}
body:has(.settings-card) .section-label{color:var(--vsp-gold);letter-spacing:.14em}
body:has(.settings-card) .params-card{border-radius:var(--radius-md);background:rgba(18,38,23,.62)}
body:has(.settings-card) .setting-row{min-height:76px;padding:16px 20px}
body:has(.settings-card) .setting-icon{width:42px;height:42px;border:1px solid rgba(232,245,232,.08)}
body:has(.settings-card) .setting-name{font-size:15px}
body:has(.settings-card) .version-text{padding-top:20px;border-top:1px solid var(--vsp-line)}
/* Internal chapter preview: make the authoring tool feel intentional. */
body:has(.toolBar) .toolBar{max-width:920px;padding:96px 24px 0}
body:has(.toolBar) .toolNote{border-color:rgba(217,168,87,.24);background:rgba(217,168,87,.06);padding:14px 16px}
body:has(.toolBar) .wrap{max-width:920px;padding:24px 24px 90px}
body:has(.toolBar) .pageHead{max-width:920px;margin:0 auto;padding:24px 24px 0}
body:has(.toolBar) .pageHead h1{font:400 clamp(30px,5vw,54px) var(--font-head);letter-spacing:-.04em}
body:has(.toolBar) #lessonContent{padding:30px 0}
body:has(.toolBar) .loadRow button{min-width:110px}
body:has(.toolBar) .block-widget,body:has(.toolBar) .qCard{border-color:rgba(217,168,87,.18);background:rgba(18,38,23,.72)}
/* Global desktop breathing room for pages that still use old 48px rails. */
@media(min-width:1024px){
  .a-propos .story-wrap{max-width:900px}
  .a-propos .story-wrap p{font-size:20px}
  body:has(.toolBar) .toolBar,body:has(.toolBar) .wrap{max-width:1100px}
}
@media(max-width:767px){
  .a-propos .page-hero{min-height:470px;padding:110px 20px 52px}
  .a-propos .page-title{font-size:clamp(43px,12vw,66px)}
  .a-propos .story-section{padding:64px 20px 76px}
  .a-propos .story-wrap .lede{font-size:25px}
  .a-propos .story-wrap p{font-size:16px}
  .a-propos .contact-grid{grid-template-columns:1fr}
  .a-propos .contact-card{min-height:120px}
  .legal-page>.container{padding-top:98px}
  .legal-page h1{font-size:36px}
  body:has(.settings-card) .page{padding:94px 16px 100px}
  body:has(.toolBar) .toolBar{padding:88px 16px 0}
  body:has(.toolBar) .wrap,body:has(.toolBar) .pageHead{padding-inline:16px}
}
@media(prefers-reduced-motion:reduce){body:has(.icon-wrap) .icon-wrap{animation:none}}
/* Auth: split-screen editorial entrance, compact on mobile. */
.auth-page .page{min-height:100dvh;display:grid;grid-template-columns:minmax(280px,.85fr) minmax(420px,1.15fr);align-items:stretch}
.auth-page .panel-left{position:relative;display:flex;flex-direction:column;justify-content:center;padding:64px clamp(28px,6vw,96px);overflow:clip}
.auth-page .panel-left:after{content:'،';position:absolute;inset-inline-end:5%;bottom:-.12em;color:rgba(217,168,87,.08);font:400 clamp(180px,25vw,420px) var(--font-head);line-height:1}
.auth-page .panel-right{display:flex;align-items:center;justify-content:center;padding:72px clamp(24px,7vw,110px);border-inline-start:1px solid var(--vsp-line)}
.auth-page .form-card{width:min(460px,100%);padding:34px;background:rgba(18,38,23,.78);border:1px solid var(--vsp-line);border-radius:var(--radius-md)}
.auth-page .form-heading{font-size:clamp(28px,4vw,46px);letter-spacing:-.04em}
.auth-page .form-input{min-height:50px}
.auth-page .btn-submit{min-height:52px}
.auth-page .stats-row,.auth-page .perks{position:relative;z-index:1}
@media(max-width:767px){.auth-page .page{display:block}.auth-page .panel-left{min-height:300px;padding:104px 20px 40px;justify-content:flex-end}.auth-page .panel-right{padding:30px 16px 100px;border-inline-start:0}.auth-page .form-card{padding:24px 20px}.auth-page .panel-left:after{font-size:220px}}
/* Onboarding: make the choice itself the hero. */
body:has(.ob-wrap){background:var(--ardoise)}
body:has(.ob-wrap) .ob-wrap{max-width:980px;margin:auto;padding:112px 24px 100px}
body:has(.ob-wrap) .ob-title{font-size:clamp(34px,6vw,68px);letter-spacing:-.045em;line-height:1}
body:has(.ob-wrap) .fil-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px}
body:has(.ob-wrap) .fil-btn{min-height:150px;border:1px solid var(--vsp-line);border-radius:var(--radius-md);background:var(--vsp-panel);padding:22px;text-align:start}
body:has(.ob-wrap) .fil-btn:hover{border-color:rgba(217,168,87,.45);transform:translateY(-4px)}
@media(max-width:767px){body:has(.ob-wrap) .ob-wrap{padding:94px 16px 90px}body:has(.ob-wrap) .fil-grid{grid-template-columns:repeat(2,1fr);gap:9px}body:has(.ob-wrap) .fil-btn{min-height:124px;padding:16px}}
/* Path: turn progression into a visual spine. */
.parcours-container{max-width:1100px!important}
.parcours-hero{min-height:430px;display:flex;flex-direction:column;justify-content:flex-end;padding:110px max(20px,7vw) 64px!important}
.parcours-title{font-size:clamp(44px,8vw,92px)!important;line-height:.94;letter-spacing:-.05em}
.prc-board{position:relative}
.prc-board:before{content:'';position:absolute;inset-block:0;inset-inline-start:50%;width:1px;background:rgba(217,168,87,.18);pointer-events:none}
.subjectCard{position:relative;z-index:1;background:rgba(18,38,23,.82)!important;border-color:var(--vsp-line)!important}
@media(max-width:767px){.parcours-hero{min-height:390px}.prc-board:before{inset-inline-start:12px}}
/* Practice surfaces: question-first, less dashboard, more instrument. */
.exercice-page .page,.quiz-shell,.quiz-jour .wrap,.quiz-rush .wrap{max-width:1040px!important}
.ex-card,.qCard{background:rgba(18,38,23,.82)!important;border-color:var(--vsp-line)!important;border-radius:var(--radius-md)}
.ex-card{padding:clamp(22px,4vw,40px)!important}
.ex-enonce,.qText{font-size:clamp(19px,3vw,28px)!important;line-height:1.45!important;letter-spacing:-.015em}
.ex-tf-wrap,.optGrid{gap:10px!important}
.ex-tf-btn,.optBtn{min-height:50px!important}
/* Daily/Rush are games: give the state information visual priority. */
body:has(.qTopbar) .wrap,body:has(.rushTopbar) .wrap{max-width:720px;padding:88px 16px 100px}
body:has(.qTopbar) .qTopbar,body:has(.rushTopbar) .rushTopbar{position:sticky;top:68px;z-index:20;background:rgba(9,26,9,.96);border-bottom:1px solid var(--vsp-line);padding:10px 0}
body:has(.qTopbar) .qCard,body:has(.rushTopbar) .qCard{padding:28px 22px}
body:has(.rushTimer) .rushTimer{font-family:var(--font-mono,monospace);font-size:clamp(26px,6vw,46px);color:var(--vsp-gold)}
/* Exam detail: evidence before action. */
.examen-detail .exam-hero{min-height:430px;padding:110px max(20px,7vw) 60px}
.examen-detail .hero-inner{max-width:1100px;margin:auto}
.examen-detail .exam-hero h1{font-size:clamp(42px,7vw,88px);line-height:.95;letter-spacing:-.05em}
.examen-detail .view-tabs{max-width:1100px;margin:0 auto;position:sticky;top:68px;z-index:30;background:rgba(9,26,9,.96);border-bottom:1px solid var(--vsp-line)}
.examen-detail .exam-body{max-width:1000px;margin:auto;padding:34px 20px 110px}
/* Dashboard: command center rather than another card grid. */
.acc-page .acc-shell{max-width:1240px;margin:auto}
.acc-page .acc-hero{min-height:390px;padding:110px max(20px,6vw) 44px!important}
.acc-page .acc-greeting-text{font-size:clamp(34px,6vw,68px)!important;letter-spacing:-.045em}
.acc-page .acc-portals{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.acc-page .acc-portal{min-height:150px;border-color:var(--vsp-line)!important;background:rgba(18,38,23,.76)!important}
@media(max-width:767px){.acc-page .acc-portals{grid-template-columns:repeat(2,1fr)}.acc-page .acc-portal{min-height:130px}}
/* Design system: documentation becomes a living specimen sheet. */
body:has(.token-grid) .controls,body:has(.token-grid) .token-grid{max-width:1100px;margin-inline:auto}
body:has(.token-grid) .token-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
body:has(.token-grid) .token-card{min-height:150px;border-color:var(--vsp-line);border-radius:var(--radius-md);background:var(--vsp-panel)}
@media(max-width:767px){body:has(.token-grid) .token-grid{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){.auth-page .panel-left:after,.prc-board:before{animation:none}}


/* Security control: quiet, explicit and consistent with the account surface. */
.password-section .setting-icon{position:relative;color:transparent!important;background:rgba(217,168,87,.08)!important}
.password-section .setting-icon:before{content:'';position:absolute;width:10px;height:10px;border:1.5px solid var(--vsp-gold);border-radius:50%;top:11px;left:14px}
.password-section .setting-icon:after{content:'';position:absolute;width:9px;height:1.5px;background:var(--vsp-gold);transform:rotate(45deg);top:23px;left:21px;transform-origin:left center}
.password-modal{max-width:460px;text-align:start}.password-modal h3{margin-bottom:8px}.password-help{font-size:13px;color:var(--vsp-muted);line-height:1.6;margin-bottom:20px}
.password-modal label{display:block;font-size:12px;color:var(--vsp-muted);margin:14px 0}.password-modal input{display:block;width:100%;min-height:48px;margin-top:7px;padding:12px 14px;border:1px solid var(--vsp-line);border-radius:var(--radius-sm);background:rgba(18,38,23,.8);color:var(--vsp-cream);font:inherit}.password-modal input:focus{outline:1px solid rgba(217,168,87,.65);border-color:rgba(217,168,87,.45)}
.password-error{min-height:20px;margin:8px 0;color:#d9a857;font-size:12px;line-height:1.5}.password-modal .modal-actions{margin-top:12px}