/* Origins — shared Middle-School identity, four visual themes. */
:root {
  --accent:#dbb776; --accent-rgb:219,183,118; --accent-dark:#976d39;
  --secondary:#a690cb; --secondary-rgb:166,144,203;
  --page-bg:#0b0c10; --panel:#14161c; --panel-soft:#191c23;
  --text:#f4f0e8; --muted:#abb0bd; --line:rgba(219,183,118,.2);
  --scene:url('../img/site/normal/hero.png'); --scene-position:center;
  --heading-font:Georgia,'Times New Roman',serif;
  color-scheme:dark;
}
html[data-origins-theme="halloween"] {
  --accent:#e4a667; --accent-rgb:228,166,103; --accent-dark:#a25938;
  --secondary:#ad87e4; --secondary-rgb:173,135,228;
  --page-bg:#0e0b16; --panel:#191321; --panel-soft:#211829;
  --muted:#b5afc4; --line:rgba(228,166,103,.24);
  --scene:url('../img/site/halloween/hero.png');
}
html[data-origins-theme="noel"] {
  --accent:#b6e2f2; --accent-rgb:182,226,242; --accent-dark:#5387a4;
  --secondary:#e3bd7b; --secondary-rgb:227,189,123;
  --page-bg:#09121b; --panel:#111f2b; --panel-soft:#172737;
  --muted:#a6bccf; --line:rgba(182,226,242,.23);
  --scene:url('../img/site/noel/hero.png');
}
html[data-origins-theme="paques"] {
  --accent:#b8dec2; --accent-rgb:184,222,194; --accent-dark:#5d9974;
  --secondary:#e2a6c0; --secondary-rgb:226,166,192;
  --page-bg:#101613; --panel:#18221d; --panel-soft:#1e2b23;
  --muted:#afc1b7; --line:rgba(184,222,194,.23);
  --scene:url('../img/site/paques/hero.png');
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:108px; }
body[data-origins-page] { margin:0; padding:0!important; min-height:100vh; height:auto!important; display:block!important; color:var(--text)!important; background:var(--page-bg)!important; font:15px/1.65 'Segoe UI',system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body[data-origins-page]::before { content:''; position:fixed; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(9,11,15,.75),var(--page-bg) 88%),var(--scene) center top/cover no-repeat!important; opacity:.8; z-index:-1; }
body[data-origins-page] input,body[data-origins-page] select,body[data-origins-page] textarea,body[data-origins-page] button { font:inherit; }
a { color:var(--accent); }
img { max-width:100%; }
[hidden] { display:none!important; }
:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
::selection { background:rgba(var(--accent-rgb),.3); color:#fff; }
.os-container { width:min(1280px,calc(100% - 64px)); margin:0 auto; }
.os-sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.os-announcement,.top-announcement { position:relative; z-index:20; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 18px; padding:10px 24px; min-height:42px; background:linear-gradient(90deg,rgba(var(--secondary-rgb),.16),rgba(var(--accent-rgb),.17),rgba(var(--secondary-rgb),.12)); border-bottom:1px solid var(--line); color:var(--text); font-size:12px; letter-spacing:.3px; text-decoration:none; }
.os-announcement strong { font-weight:600; color:var(--accent); }
.os-announcement>span:not(.os-status-dot) { color:var(--muted); }
.os-status-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px rgba(var(--accent-rgb),.8); flex:none; }
.os-arrow { margin-left:5px; color:var(--accent)!important; font-size:17px; }
.os-header,body[data-origins-page="index"]>.header { position:sticky; top:0; z-index:15; min-height:92px; width:100%; border-bottom:1px solid var(--line); background:rgba(11,13,18,.86); backdrop-filter:blur(18px); }
.os-header-inner,body[data-origins-page="index"]>.header>.container { width:min(1360px,calc(100% - 64px)); min-height:92px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:28px; position:relative; }
.os-brand,body[data-origins-page="index"] .logo { flex:0 0 205px; width:205px; line-height:0; }
.os-brand img,body[data-origins-page="index"] .logo img { display:block; width:205px; height:auto; max-height:72px; object-fit:contain; filter:drop-shadow(0 4px 18px rgba(var(--accent-rgb),.12)); }
.os-navigation,body[data-origins-page="index"] .menu { display:flex; align-items:center; gap:23px; }
.os-navigation a,body[data-origins-page="index"] .menu a { color:#c8cad1; text-decoration:none; font-size:12px; font-weight:500; letter-spacing:.2px; white-space:nowrap; transition:color .2s; padding:30px 0; }
.os-navigation a:hover,.os-navigation a[aria-current="page"],body[data-origins-page="index"] .menu a:hover { color:var(--accent); }
.os-header-actions,body[data-origins-page="index"] .header-buttons { display:flex; align-items:center; gap:18px; flex-shrink:0; }
.os-login-link { color:var(--text); font-size:12px; text-decoration:none; }
.os-button,body[data-origins-page="index"] .btn-download,body[data-origins-page="index"] .btn-register { display:inline-flex; align-items:center; justify-content:center; gap:20px; padding:13px 24px; border:1px solid var(--accent); border-radius:5px; color:#141511!important; background:linear-gradient(135deg,var(--accent),var(--accent-dark)); font-size:12px; font-weight:700; letter-spacing:.45px; text-decoration:none; cursor:pointer; transition:transform .2s,box-shadow .2s; min-height:46px; }
.os-button:hover,body[data-origins-page="index"] .btn-download:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(var(--accent-rgb),.2); }
.os-button-small { min-height:39px; padding:9px 17px; font-size:11px; }
.os-button-ghost,body[data-origins-page="index"] .btn-account,body[data-origins-page="index"] .btn-login { background:rgba(14,17,21,.35); border:1px solid var(--line); color:var(--text)!important; border-radius:5px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:12px 24px; font-size:12px; font-weight:600; }
.os-button-ghost:hover { border-color:var(--accent); }
.os-menu-toggle { display:none; border:1px solid var(--line); background:var(--panel); width:44px; height:40px; border-radius:5px; padding:10px; cursor:pointer; }
.os-menu-toggle span { display:block; height:2px; background:var(--accent); margin:4px 0; }
.os-eyebrow { display:block; color:var(--accent); font-size:10px; font-weight:700; letter-spacing:2.6px; text-transform:uppercase; margin-bottom:16px; }
body[data-origins-page="index"] .hero,.os-presentation-hero { position:relative; isolation:isolate; min-height:650px; background:var(--scene) var(--scene-position)/cover no-repeat; display:flex; align-items:center; overflow:hidden; }
body[data-origins-page="index"] .hero::after,.os-presentation-hero::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(8,10,14,.88) 0%,rgba(8,10,14,.60) 42%,rgba(8,10,14,.07) 77%),linear-gradient(0deg,var(--page-bg),transparent 32%); }
body[data-origins-page="index"] .hero-overlay { display:none; }
body[data-origins-page="index"] .hero-content { width:min(1280px,calc(100% - 64px)); margin:0 auto; padding:70px 0 92px; position:relative; text-align:left; z-index:1; }
body[data-origins-page="index"] .hero-content h1,.os-hero-copy h1 { font-family:var(--heading-font); font-size:clamp(48px,7vw,96px); font-weight:400; line-height:1.03; letter-spacing:-3px; color:#f9f6ef; text-shadow:0 8px 35px rgba(0,0,0,.45); margin:0 0 22px; max-width:740px; }
body[data-origins-page="index"] .hero-content h1 span,.os-hero-copy h1 em { display:block; color:var(--accent); font-size:.56em; font-style:normal; letter-spacing:-1.6px; line-height:1.26; margin-top:12px; }
body[data-origins-page="index"] .hero-content h2 { font:600 11px 'Segoe UI',sans-serif; letter-spacing:3px; text-transform:uppercase; color:var(--accent); margin:0 0 18px; }
body[data-origins-page="index"] .hero-content p,.os-hero-copy>p { font-size:15px; max-width:510px; line-height:1.85; color:#c5c6ce; margin:0 0 28px; }
body[data-origins-page="index"] .hero-buttons,.os-hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin:25px 0; }
.os-hero-caption { color:var(--muted); font-size:10px; letter-spacing:.3px; }
.os-release-strip { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:28px 32px; border:1px solid var(--line); border-radius:8px; background:linear-gradient(120deg,var(--panel),rgba(var(--secondary-rgb),.07)); margin-top:-24px; position:relative; z-index:2; }
.os-release-date { display:flex; align-items:center; gap:18px; flex-shrink:0; }
.os-release-date strong { font-family:var(--heading-font); font-size:48px; font-weight:400; line-height:1; color:var(--accent); }
.os-release-date span { font-size:10px; text-transform:uppercase; letter-spacing:1.7px; color:var(--muted); line-height:1.6; }
.os-release-copy { flex:1; }
.os-release-copy h2 { margin:0 0 4px; font-family:var(--heading-font); font-size:24px; font-weight:400; color:var(--text); }
.os-release-copy p { margin:0; font-size:12px; color:var(--muted); }
.os-release-link { font-size:11px; color:var(--accent); text-decoration:none; white-space:nowrap; }
.os-home-feature-section { padding:70px 0 65px; }
.os-section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:28px; margin-bottom:34px; }
.os-section-heading h1,.os-section-heading h2 { font:400 clamp(28px,3.1vw,43px)/1.18 var(--heading-font); color:var(--text); letter-spacing:-1px; margin:0 0 10px; }
.os-section-heading p { color:var(--muted); font-size:13px; max-width:640px; margin:0; }
.os-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.os-feature-card { position:relative; display:block; color:var(--text); text-decoration:none; background:var(--panel); border:1px solid var(--line); border-radius:9px; overflow:hidden; transition:transform .25s,border-color .25s; }
.os-feature-card:hover { transform:translateY(-6px); border-color:var(--accent); }
.os-feature-image { aspect-ratio:1.72; overflow:hidden; background:var(--panel-soft); }
.os-feature-image img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .65s; }
.os-feature-card:hover .os-feature-image img { transform:scale(1.055); }
.os-feature-copy { padding:24px 24px 25px; }
.os-feature-copy h3 { font:400 26px var(--heading-font); margin:9px 0; color:var(--text); }
.os-feature-copy p { font-size:12px; color:var(--muted); margin:0 0 16px; line-height:1.8; }
.os-feature-copy small { font-size:10px; color:var(--accent); letter-spacing:.5px; }
.os-feature-number { font-size:10px; font-weight:600; letter-spacing:1.7px; text-transform:uppercase; color:var(--accent); }
body[data-origins-page="index"] .stats { padding:16px 0 40px; }
body[data-origins-page="index"] .container { width:min(1280px,calc(100% - 64px)); margin:0 auto; }
body[data-origins-page="index"] .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--line); }
body[data-origins-page="index"] .stat-box { background:var(--panel); padding:27px; text-align:center; }
body[data-origins-page="index"] .stat-box .number { display:block; font:400 30px var(--heading-font); color:var(--accent); }
body[data-origins-page="index"] .stat-box .label { display:block; margin-top:7px; font-size:10px; letter-spacing:1.3px; text-transform:uppercase; color:var(--muted); }
body[data-origins-page="index"] .grid-three { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; padding:25px 0 45px; }
body[data-origins-page="index"] .grid-two { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
body[data-origins-page="index"] .card { padding:25px; border-radius:9px; border:1px solid var(--line); background:var(--panel); }
body[data-origins-page="index"] .card h3 { font:400 24px var(--heading-font); color:var(--text); margin:0 0 23px; }
body[data-origins-page="index"] .card table { width:100%; border-collapse:collapse; font-size:12px; }
body[data-origins-page="index"] .card td { border-bottom:1px solid rgba(255,255,255,.06); padding:11px 0; }
body[data-origins-page="index"] .card>a { display:block; margin-top:18px; font-size:11px; color:var(--accent); text-decoration:none; }
body[data-origins-page="index"] .news-item { padding:13px 0; border-bottom:1px solid rgba(255,255,255,.06); color:var(--muted); font-size:12px; }
body[data-origins-page="index"] .bottom-cards { padding:15px 0 65px; }
body[data-origins-page="index"] .large-card { display:block; padding:36px; min-height:230px; border:1px solid var(--line); border-radius:9px; color:var(--text); text-decoration:none; position:relative; overflow:hidden; background:var(--panel); }
body[data-origins-page="index"] .large-card h3 { font:400 30px var(--heading-font); margin:0 0 10px; }
body[data-origins-page="index"] .large-card p { font-size:12px; color:var(--muted); max-width:260px; }
body[data-origins-page="index"] .large-card.download-card { background:linear-gradient(90deg,var(--panel),rgba(13,15,20,.5)),var(--scene) center/cover; }
body[data-origins-page="index"] .large-card.discord-card { background:linear-gradient(125deg,var(--panel),rgba(var(--secondary-rgb),.18)); }
body[data-origins-page="index"] .footer { border-top:1px solid var(--line); background:var(--panel); padding:38px 0; text-align:center; color:var(--muted); font-size:11px; }
body[data-origins-page="index"] .footer-links { display:flex; flex-wrap:wrap; gap:22px; justify-content:center; margin-bottom:18px; }
body[data-origins-page="index"] .footer a { text-decoration:none; color:var(--muted); }
.os-footer { width:min(1280px,calc(100% - 64px)); margin:75px auto 0; padding:34px 0 30px; border-top:1px solid var(--line); display:grid; grid-template-columns:1.3fr 1fr; gap:25px; color:var(--muted); }
.os-footer-brand { display:inline-flex; flex-direction:column; font:400 24px var(--heading-font); color:var(--accent); text-decoration:none; letter-spacing:3px; }
.os-footer-brand span { font:10px 'Segoe UI',sans-serif; letter-spacing:1px; margin-top:7px; color:var(--muted); }
.os-footer p { font-size:11px; margin:13px 0 0; }
.os-footer nav { display:flex; flex-wrap:wrap; align-content:center; justify-content:flex-end; gap:18px; }
.os-footer nav a { font-size:11px; color:var(--muted); text-decoration:none; }
.os-footer-note { grid-column:1/-1; font-size:9px; opacity:.7; }
/* The existing forms, tables and interactive IDs retain their own layouts. */
body[data-origins-page]>.wrapper { width:min(1280px,calc(100% - 64px)); margin:48px auto; padding:0; }
body[data-origins-page] h1 { color:var(--text); }
body[data-origins-page] .header-support,body[data-origins-page] .header-account { border-bottom-color:var(--line); }
body[data-origins-page] .header-support h1,body[data-origins-page] .header-account h1,body[data-origins-page="classement"] .title { font:400 clamp(27px,3.3vw,40px) var(--heading-font); letter-spacing:-.7px; }
body[data-origins-page] .btn-back,body[data-origins-page] .back,body[data-origins-page] .back-link { color:var(--accent); border-color:var(--line); }
body[data-origins-page] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),body[data-origins-page] textarea,body[data-origins-page] select { border-radius:6px; background:rgba(7,10,14,.65); color:var(--text); border-color:var(--line); accent-color:var(--accent); }
body[data-origins-page] input:focus,body[data-origins-page] textarea:focus,body[data-origins-page] select:focus { border-color:var(--accent); }
body[data-origins-page] input[type="checkbox"],body[data-origins-page] input[type="radio"] { accent-color:var(--accent); }
body[data-origins-page] .form-box,body[data-origins-page] .sidebar-card,body[data-origins-page] .character-card,body[data-origins-page] .ticket-list-card,body[data-origins-page] .support-box,body[data-origins-page] .ranking-card,body[data-origins-page] .pack-card,body[data-origins-page] .currency-card,body[data-origins-page] .download-main-card,body[data-origins-page] .event-card,body[data-origins-page] .payment-panel,body[data-origins-page] .panel,body[data-origins-page] .origins-intro-box,body[data-origins-page] .origins-rewards-box { border-color:var(--line); background:linear-gradient(145deg,var(--panel),rgba(var(--secondary-rgb),.04)); box-shadow:0 16px 45px rgba(0,0,0,.2); }
body[data-origins-page="connexion"] .wrapper,body[data-origins-page="inscription"] .wrapper { padding-top:12px; }
body[data-origins-page="connexion"] .form-box { border-radius:12px; }
body[data-origins-page="connexion"]>.form-box { width:calc(100% - 36px); margin:50px auto; }
body[data-origins-page="admin_factures"]>.wrap { width:min(1100px,calc(100% - 36px)); margin:45px auto; }
body[data-origins-page="admin_factures"]>form { margin:45px auto; width:min(400px,calc(100% - 36px)); }
body[data-origins-page="boutique"]>.wrap { width:min(1080px,calc(100% - 36px)); margin:45px auto; }
body[data-origins-page="discord-link"]>.link-wrapper { width:min(640px,calc(100% - 36px)); margin:50px auto; }
body[data-origins-page="pay_retour"]>h1,body[data-origins-page="pay_retour"]>p { width:min(920px,calc(100% - 36px)); margin:32px auto; }
body[data-origins-page] .alert b { color:var(--accent)!important; }
body[data-origins-page="index"] .floating-wheel circle { stroke:var(--accent); }
body[data-origins-page="index"] .floating-wheel path { fill:var(--accent); }
.os-home-presentation-link { color:var(--muted); text-decoration:none; font-size:11px; align-self:center; padding:10px 6px; }
body[data-origins-page="vote"]>.container { width:min(820px,calc(100% - 64px)); margin:48px auto; }
body[data-origins-page="vote"] .panel { border-radius:12px; }
body[data-origins-page="cgu"]>.card,body[data-origins-page="cgv"]>.card,body[data-origins-page="mentions"]>.card,body[data-origins-page="confidentialite"]>.card { max-width:1080px; width:calc(100% - 64px); margin:48px auto; padding:38px; background:var(--panel); border:1px solid var(--line); border-radius:10px; }
/* Presentation. */
.os-hero-copy { position:relative; z-index:1; width:100%; padding:70px 0 108px; }
.os-hero-copy h1 { font-size:clamp(47px,6.7vw,84px); max-width:680px; }
.os-hero-copy h1 em { font-size:.68em; }
.os-hero-meta { display:flex; align-items:center; gap:18px; font-size:10px; color:var(--muted); margin:25px 0 0; }
.os-hero-meta span+span::before { content:'·'; margin-right:18px; color:var(--accent); }
.os-highlight-stats { margin-top:-42px; position:relative; z-index:3; display:grid; grid-template-columns:repeat(4,1fr); background:rgba(17,19,25,.92); border:1px solid var(--line); border-radius:9px; backdrop-filter:blur(15px); }
.os-highlight-stats>div { padding:27px 24px; border-right:1px solid var(--line); }
.os-highlight-stats>div:last-child { border:0; }
.os-highlight-stats strong { color:var(--accent); font:400 32px var(--heading-font); display:block; }
.os-highlight-stats span { display:block; color:var(--muted); font-size:10px; margin-top:5px; }
.os-introduction { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; padding:85px 0 65px; }
.os-introduction h2 { color:var(--text); font:400 40px/1.2 var(--heading-font); letter-spacing:-1px; margin:0; }
.os-introduction p { font-size:14px; color:var(--muted); margin:0 0 18px; line-height:1.9; }
.os-introduction strong { color:var(--text); font-weight:500; }
.os-jump-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:23px; }
.os-jump-links a { padding:9px 13px; border:1px solid var(--line); font-size:10px; text-decoration:none; border-radius:4px; }
.os-feature-showcase { margin:15px 0 58px; display:grid; grid-template-columns:1.08fr .92fr; border:1px solid var(--line); border-radius:12px; background:var(--panel); overflow:hidden; }
.os-feature-showcase:nth-child(even) .os-showcase-visual { order:2; }
.os-showcase-visual { position:relative; min-height:430px; overflow:hidden; background:var(--panel-soft); }
.os-showcase-visual>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.os-showcase-visual::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(8,11,15,.7)); }
.os-showcase-visual .os-visual-label { position:absolute; bottom:22px; left:24px; z-index:2; padding:6px 10px; border:1px solid rgba(var(--accent-rgb),.3); background:rgba(10,12,16,.6); border-radius:3px; font-size:9px; color:#dfdfdf; letter-spacing:.9px; }
.os-showcase-copy { padding:44px 42px; display:flex; flex-direction:column; justify-content:center; }
.os-showcase-copy h2 { font:400 38px/1.17 var(--heading-font); color:var(--text); letter-spacing:-.8px; margin:6px 0 17px; }
.os-showcase-copy>p { color:var(--muted); font-size:13px; line-height:1.85; margin:0 0 20px; }
.os-rules { list-style:none; padding:0; margin:0 0 22px; }
.os-rules li { position:relative; padding:9px 0 9px 20px; color:var(--muted); font-size:11px; border-bottom:1px solid rgba(255,255,255,.055); }
.os-rules li::before { content:'◆'; position:absolute; left:0; top:10px; font-size:6px; color:var(--accent); }
.os-rules strong { color:var(--text); font-weight:600; }
.os-rule-callout { padding:13px 16px; border-left:2px solid var(--accent); background:rgba(var(--accent-rgb),.06); font-size:11px; color:var(--accent); }
.os-minipanel { margin-top:20px; padding:17px; border:1px solid var(--line); border-radius:7px; background:rgba(8,10,13,.6); }
.os-minipanel-head { display:flex; justify-content:space-between; gap:20px; margin-bottom:12px; font-size:10px; color:var(--muted); }
.os-minipanel-head strong { color:var(--text); font-weight:600; }
.os-progress { height:6px; border-radius:10px; background:rgba(255,255,255,.09); overflow:hidden; }
.os-progress span { display:block; height:100%; width:42%; background:linear-gradient(90deg,var(--accent-dark),var(--accent)); }
.os-minipanel-buttons { display:flex; gap:8px; margin-top:13px; }
.os-minipanel-buttons span { padding:5px 10px; border-radius:3px; border:1px solid var(--line); font-size:9px; color:var(--accent); }
.os-catalogue { padding-top:40px; }
.os-catalogue-tools { display:flex; flex-wrap:wrap; gap:15px; justify-content:space-between; margin-bottom:30px; }
.os-filters { display:flex; flex-wrap:wrap; gap:8px; }
.os-filters button { border:1px solid var(--line); background:var(--panel); color:var(--muted); border-radius:4px; padding:8px 14px; font-size:10px; cursor:pointer; }
.os-filters button[aria-pressed="true"] { background:rgba(var(--accent-rgb),.12); color:var(--accent); border-color:var(--accent); }
.os-search { position:relative; min-width:240px; }
.os-search input { width:100%; padding:10px 15px; border:1px solid var(--line); font-size:11px!important; }
.os-system-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }
.os-system-card { border:1px solid var(--line); border-radius:7px; padding:22px; background:linear-gradient(150deg,var(--panel),rgba(var(--secondary-rgb),.045)); min-width:0; }
.os-system-card-header { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.os-system-icon { flex:none; width:40px; height:40px; background:rgba(var(--accent-rgb),.08); border:1px solid var(--line); border-radius:7px; display:grid; place-items:center; color:var(--accent); font-family:var(--heading-font); }
.os-system-icon img { width:28px; height:28px; object-fit:contain; }
.os-system-card h3 { color:var(--text); font-size:13px; line-height:1.4; margin:0; font-weight:600; }
.os-system-card p { font-size:11px; line-height:1.85; color:var(--muted); margin:0 0 13px; }
.os-system-card .os-system-tag { color:var(--accent); font-size:9px; letter-spacing:.3px; }
.os-system-card details { margin-top:12px; border-top:1px solid rgba(255,255,255,.06); padding-top:10px; }
.os-system-card summary { font-size:10px; color:var(--accent); cursor:pointer; }
.os-system-card details p { margin:10px 0 0; }
.os-catalogue-status { color:var(--muted); font-size:11px; margin:0 0 18px; }
.os-farm-rule { margin:65px 0; padding:33px 36px; border:1px solid var(--line); border-radius:9px; background:linear-gradient(135deg,rgba(var(--secondary-rgb),.07),var(--panel)); display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:center; }
.os-farm-rule>strong { font:400 52px var(--heading-font); color:var(--accent); }
.os-farm-rule h2 { font:400 27px var(--heading-font); color:var(--text); margin:0 0 10px; }
.os-farm-rule p { color:var(--muted); font-size:12px; margin:0; }
.os-world-themes { padding:0 0 60px; }
.os-theme-gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }
.os-theme-tile { position:relative; border:1px solid var(--line); border-radius:8px; overflow:hidden; min-height:245px; background:var(--panel); }
.os-theme-tile>img { width:100%; height:245px; object-fit:cover; display:block; }
.os-theme-tile::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(9,11,15,.95),transparent 65%); }
.os-theme-tile span { position:absolute; left:20px; bottom:20px; color:#eee; z-index:2; font:400 23px var(--heading-font); }
.os-final-cta { position:relative; text-align:center; padding:56px 25px; border:1px solid var(--line); border-radius:10px; background:radial-gradient(ellipse at top,rgba(var(--accent-rgb),.12),var(--panel)); }
.os-final-cta h2 { font:400 clamp(28px,3.7vw,43px) var(--heading-font); color:var(--text); margin:0 0 15px; }
.os-final-cta p { color:var(--muted); font-size:12px; max-width:670px; margin:0 auto 25px; }
.os-final-cta>div { display:flex; flex-wrap:wrap; gap:13px; justify-content:center; }
.os-illustration-note { text-align:center; color:var(--muted); font-size:9px; opacity:.65; margin:20px 0; }
/* Appearance configuration. */
.os-appearance-main { padding-top:50px; }
.os-theme-picker { margin:0; padding:0; border:0; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.os-theme-picker legend { margin:0 0 16px; padding:0; font-size:12px; color:var(--muted); }
.os-theme-choice { display:block; position:relative; cursor:pointer; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:var(--panel); transition:border-color .2s; }
.os-theme-choice input { position:absolute; left:14px; top:14px; width:18px; height:18px; z-index:2; }
.os-theme-choice img { width:100%; aspect-ratio:1.45; object-fit:cover; display:block; }
.os-theme-choice-title { display:flex; align-items:center; justify-content:space-between; padding:16px; font-size:13px; color:var(--text); }
.os-choice-check { opacity:0; color:var(--accent); }
.os-theme-choice:has(input:checked) { border:2px solid var(--accent); }
.os-theme-choice input:checked~.os-theme-choice-title .os-choice-check { opacity:1; }
.os-settings-row { margin-top:25px; display:flex; justify-content:space-between; align-items:center; gap:25px; padding:22px; background:var(--panel); border:1px solid var(--line); border-radius:8px; }
.os-announcement-option { display:flex; align-items:center; gap:12px; font-size:11px; color:var(--muted); }
.os-preview-state { margin:23px 0; color:var(--muted); font-size:11px; }
.os-preview-state strong { color:var(--accent); }
.os-appearance-preview { min-height:390px; position:relative; overflow:hidden; display:flex; align-items:center; border:1px solid var(--line); border-radius:9px; }
.os-appearance-preview>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.os-appearance-preview::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(9,11,15,.9),rgba(9,11,15,.15)); }
.os-appearance-preview>div { position:relative; z-index:1; padding:40px; }
.os-appearance-preview h2 { font:400 42px/1.2 var(--heading-font); color:var(--text); margin:0 0 15px; }
.os-appearance-preview p { color:var(--muted); font-size:12px; margin:0 0 20px; }
.os-message { border:1px solid var(--line); border-radius:6px; padding:16px 20px; margin:20px 0; font-size:12px; }
.os-message-error { color:#ffbcb9; border-color:rgba(255,125,120,.3); background:rgba(180,40,50,.1); }
.os-message-success { color:#b8edc8; border-color:rgba(139,220,160,.3); background:rgba(45,150,80,.1); }
.os-reveal { opacity:.15; transform:translateY(18px); transition:opacity .65s,transform .65s; }
.os-reveal.is-visible { opacity:1; transform:none; }
@media(min-width:1600px) { body[data-origins-page="index"] .hero,.os-presentation-hero { min-height:710px; } }
@media(max-width:1200px) {
  .os-header-inner,body[data-origins-page="index"]>.header>.container { gap:18px; }
  .os-brand,body[data-origins-page="index"] .logo { flex-basis:174px; width:174px; }
  .os-navigation,body[data-origins-page="index"] .menu { gap:15px; }
  .os-header-actions,body[data-origins-page="index"] .header-buttons { gap:9px; }
  .os-navigation a,body[data-origins-page="index"] .menu a { font-size:11px; }
  .os-login-link { display:none; }
}
@media(max-width:1000px) {
  .os-header-inner,body[data-origins-page="index"]>.header>.container { min-height:80px; flex-wrap:wrap; gap:15px; }
  .os-menu-toggle { display:block; margin-left:auto; }
  .os-navigation { display:none; width:100%; order:4; flex-direction:column; align-items:stretch; gap:0; padding:8px 0 15px; }
  .os-navigation.is-open { display:flex; }
  .os-navigation a { padding:11px; border-top:1px solid var(--line); }
  body[data-origins-page="index"] .menu-toggle { display:flex; }
  body[data-origins-page="index"] .menu { width:100%; order:4; padding:15px 0; display:none; flex-direction:column; align-items:stretch; }
  body[data-origins-page="index"] .menu.active { display:flex; }
  body[data-origins-page="index"] .menu a { padding:10px; }
  .os-feature-grid,.os-system-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .os-showcase-copy { padding:30px; }
  .os-showcase-copy h2 { font-size:30px; }
  .os-showcase-visual { min-height:400px; }
  .os-introduction { gap:35px; }
  body[data-origins-page="index"] .header-buttons .btn-login:not([title]) { display:none; }
  body[data-origins-page="index"] .header-buttons .btn-register { padding:10px 15px; min-height:40px; font-size:10px; }
}
@media(max-width:760px) {
  .os-container,.os-header-inner,.os-footer,body[data-origins-page="index"] .container,body[data-origins-page="index"]>.header>.container,body[data-origins-page="index"] .hero-content { width:calc(100% - 36px); }
  .os-announcement { font-size:10px; padding:9px 18px; gap:4px 9px; }
  .os-announcement .os-status-dot,.os-announcement .os-arrow { display:none; }
  .os-brand,body[data-origins-page="index"] .logo { flex-basis:155px; width:155px; }
  .os-brand img,body[data-origins-page="index"] .logo img { width:155px; }
  .os-header-actions .os-button { min-height:36px; padding:8px 11px; font-size:9px; }
  .os-header-inner,body[data-origins-page="index"]>.header>.container { min-height:75px; gap:11px; }
  body[data-origins-page="index"] .header-buttons.is-authenticated { width:100%; order:3; justify-content:center; padding-bottom:12px; }
  body[data-origins-page="index"] .header-buttons.is-authenticated .btn-login { padding:8px 12px; font-size:10px; min-height:36px; max-width:230px; overflow:hidden; text-overflow:ellipsis; }
  .os-menu-toggle { width:36px; height:34px; padding:6px 8px; }
  body[data-origins-page="index"] .hero,.os-presentation-hero { min-height:585px; background-position:63% center; }
  body[data-origins-page="index"] .hero::after,.os-presentation-hero::after { background:linear-gradient(90deg,rgba(8,10,14,.92),rgba(8,10,14,.43)),linear-gradient(0deg,var(--page-bg),transparent 35%); }
  body[data-origins-page="index"] .hero-content { padding:65px 0 88px; }
  body[data-origins-page="index"] .hero-content h1,.os-hero-copy h1 { font-size:53px!important; letter-spacing:-2px; }
  body[data-origins-page="index"] .hero-content p,.os-hero-copy>p { font-size:13px; max-width:365px; }
  .os-hero-copy { padding:65px 0 110px; }
  .os-release-strip { flex-wrap:wrap; gap:19px; padding:23px; }
  .os-release-copy h2 { font-size:22px; }
  .os-release-link { width:100%; border-top:1px solid var(--line); padding-top:14px; }
  .os-section-heading { display:block; }
  .os-section-heading>a { margin-top:18px; }
  .os-feature-grid { gap:15px; }
  .os-feature-copy { padding:18px; }
  .os-feature-copy h3 { font-size:22px; }
  .os-feature-copy p { font-size:11px; }
  body[data-origins-page="index"] .stats-grid { grid-template-columns:repeat(2,1fr); }
  body[data-origins-page="index"] .grid-three { grid-template-columns:1fr; }
  body[data-origins-page="index"] .grid-two { grid-template-columns:1fr; }
  .os-introduction { grid-template-columns:1fr; padding:55px 0 40px; gap:25px; }
  .os-introduction h2 { font-size:33px; }
  .os-highlight-stats { grid-template-columns:repeat(2,1fr); }
  .os-highlight-stats>div { padding:20px; border-bottom:1px solid var(--line); }
  .os-highlight-stats>div:nth-child(2) { border-right:0; }
  .os-highlight-stats>div:nth-child(3) { border-bottom:0; }
  .os-highlight-stats strong { font-size:29px; }
  .os-feature-showcase { grid-template-columns:1fr; margin-bottom:28px; }
  .os-showcase-visual { min-height:290px; }
  .os-feature-showcase:nth-child(even) .os-showcase-visual { order:0; }
  .os-showcase-copy { padding:28px; }
  .os-showcase-copy h2 { font-size:32px; }
  .os-theme-gallery { grid-template-columns:repeat(2,1fr); }
  .os-theme-tile,.os-theme-tile>img { min-height:195px; height:195px; }
  .os-farm-rule { padding:25px; gap:18px; }
  .os-farm-rule>strong { font-size:40px; }
  .os-farm-rule h2 { font-size:23px; }
  .os-footer { grid-template-columns:1fr; margin-top:50px; }
  .os-footer nav { justify-content:flex-start; }
  body[data-origins-page]>.wrapper { width:calc(100% - 36px); margin:30px auto; }
  body[data-origins-page] .header-support,body[data-origins-page] .header-account { flex-wrap:wrap; gap:17px; }
  body[data-origins-page="cgu"]>.card,body[data-origins-page="cgv"]>.card,body[data-origins-page="mentions"]>.card,body[data-origins-page="confidentialite"]>.card { width:calc(100% - 36px); padding:25px; }
  .os-theme-picker { grid-template-columns:repeat(2,1fr); }
  .os-settings-row { flex-direction:column; align-items:stretch; padding:20px; }
  .os-appearance-preview { min-height:355px; }
  .os-appearance-preview>div { padding:25px; }
  .os-appearance-preview h2 { font-size:32px; }
  .os-hero-meta { flex-wrap:wrap; gap:6px 12px; }
}
@media(max-width:480px) {
  .os-system-grid,.os-feature-grid { grid-template-columns:1fr; }
  .os-theme-gallery { gap:10px; }
  .os-farm-rule { grid-template-columns:1fr; }
  .os-section-heading h1,.os-section-heading h2 { font-size:30px; }
  body[data-origins-page="index"] .hero-content h1,.os-hero-copy h1 { font-size:48px!important; }
  .os-eyebrow { font-size:9px; letter-spacing:2px; }
  .os-hero-meta span+span::before { margin-right:12px; }
  .os-button,.os-button-ghost { padding:12px 18px; }
  .os-brand,body[data-origins-page="index"] .logo { width:133px; flex-basis:133px; }
  .os-header-actions .os-button { padding:7px 8px; font-size:8px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
  .os-reveal { opacity:1; transform:none; }
}

/* Origins v85: evolved familiars, using the current game art and theme tokens. */
.os-pet-release { display:inline-flex; flex-wrap:wrap; gap:7px; padding:8px 12px; border:1px solid rgba(var(--accent-rgb),.5); border-radius:4px; background:rgba(var(--accent-rgb),.09); color:var(--accent); font-size:11px; font-weight:700; line-height:1.6; letter-spacing:.7px; margin-bottom:23px; }
.os-pet-flagship { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:48px; margin:30px 0 55px; padding:44px 34px; border:1px solid rgba(var(--accent-rgb),.45); border-radius:10px; background:radial-gradient(ellipse at 90% 10%,rgba(var(--accent-rgb),.1),transparent 60%),var(--panel); position:relative; box-shadow:0 16px 60px rgba(0,0,0,.2); }
.os-pet-copy,.os-pet-visual { min-width:0; }
.os-pet-copy .os-eyebrow { font-size:9px; line-height:1.7; letter-spacing:1.5px; }
.os-pet-copy h2 { font:400 clamp(30px,3.2vw,45px)/1.13 var(--heading-font); margin:0 0 20px; letter-spacing:-.8px; }
.os-pet-copy h2 em { color:var(--accent); font-style:normal; }
.os-pet-copy>p { color:var(--muted); font-size:14px; line-height:1.85; }
.os-pet-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:26px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; }
.os-pet-metrics strong { display:block; font:400 33px/1 var(--heading-font); color:var(--accent); margin-bottom:7px; }
.os-pet-metrics span { display:block; color:var(--muted); font-size:10px; line-height:1.5; }
.os-pet-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.os-pet-actions .os-button { padding:12px 17px; font-size:10px; }
.os-pet-demo { aspect-ratio:640/470; position:relative; width:100%; filter:drop-shadow(0 18px 30px rgba(0,0,0,.4)); }
.os-pet-demo-frame { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; }
.os-pet-demo-content { position:absolute; inset:7% 5% 9%; display:flex; flex-direction:column; min-width:0; }
.os-pet-demo-head { display:flex; justify-content:space-between; gap:8px; color:var(--accent); font-size:clamp(10px,1.2vw,14px); font-weight:700; padding:0 3px 10px; border-bottom:1px solid rgba(var(--accent-rgb),.4); }
.os-pet-demo-head span:last-child { font-weight:400; letter-spacing:1px; }
.os-pet-demo-body { flex:1; display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:12px; padding:16px 0; min-height:0; }
.os-pet-demo-companion { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; background:rgba(8,10,14,.66); border:1px solid rgba(var(--accent-rgb),.16); padding:10px; }
.os-pet-demo-companion>span { font-size:10px; color:var(--muted); }
.os-pet-demo-companion img { width:clamp(48px,8vw,96px); height:auto; max-width:100%; filter:drop-shadow(0 5px 18px rgba(var(--accent-rgb),.35)); }
.os-pet-demo-companion strong { font:400 clamp(15px,1.9vw,23px) var(--heading-font); color:var(--accent); }
.os-pet-demo-companion small { color:var(--accent); font-size:9px; line-height:1.5; }
.os-pet-exp { width:100%; height:7px; background:#080b10; border:1px solid rgba(var(--accent-rgb),.3); }
.os-pet-exp span { display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--accent-dark),var(--accent)); }
.os-pet-demo-skills { display:grid; grid-template-rows:repeat(3,minmax(0,1fr)); gap:7px; }
.os-pet-demo-skills>div { display:flex; align-items:center; gap:9px; background:rgba(8,10,14,.74); border-bottom:1px solid rgba(var(--accent-rgb),.4); padding:10px 8px; min-width:0; }
.os-pet-demo-skills img { width:31px; height:31px; object-fit:contain; flex:none; }
.os-pet-demo-skills span { flex:1; font-size:10px; color:var(--text); line-height:1.5; }
.os-pet-demo-skills strong { display:block; font-size:16px; color:var(--accent); font-weight:600; }
.os-pet-demo-skills b { flex:none; width:22px; height:22px; display:grid; place-items:center; font-size:12px; border:1px solid rgba(var(--accent-rgb),.6); border-radius:3px; color:var(--accent); }
.os-pet-demo-bottom { display:flex; justify-content:space-between; gap:5px; padding:7px 0; border-top:1px solid rgba(var(--accent-rgb),.4); color:var(--accent); font-size:8px; line-height:1.6; }
.os-pet-visual-caption { font-size:10px; color:var(--muted); line-height:1.7; text-align:center; margin:15px 4px 0; }
.os-pet-progression { padding:0 0 60px; }
.os-pet-level-tag { display:inline-block; flex:none; align-self:center; padding:10px 16px; border:1px solid var(--line); color:var(--accent); font-size:11px; }
.os-pet-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:26px 0; }
.os-pet-steps article { min-width:0; padding:26px; background:var(--panel); border:1px solid var(--line); border-radius:7px; }
.os-pet-steps article>span { color:var(--accent); font-size:9px; letter-spacing:1.4px; }
.os-pet-steps h3 { font:400 24px/1.2 var(--heading-font); margin:16px 0 12px; }
.os-pet-steps p,.os-pet-talents>p { color:var(--muted); font-size:12px; line-height:1.85; }
.os-pet-talents { border:1px solid var(--line); background:var(--panel-soft); border-radius:6px; padding:19px 23px; }
.os-pet-talents summary { color:var(--accent); font-size:12px; font-weight:600; cursor:pointer; line-height:1.6; }
.os-pet-table-wrap { overflow-x:auto; margin-top:20px; }
.os-pet-talents table { width:100%; min-width:440px; border-collapse:collapse; font-size:12px; }
.os-pet-talents caption { text-align:left; color:var(--muted); font-size:11px; padding:0 0 15px; }
.os-pet-talents th,.os-pet-talents td { padding:12px 15px; border-bottom:1px solid var(--line); text-align:left; }
.os-pet-talents th { font-weight:500; }
.os-pet-talents thead th,.os-pet-talents td:last-child { color:var(--accent); }
.os-pet-farm { margin-top:25px; padding:30px; border:1px solid rgba(var(--accent-rgb),.3); border-radius:7px; background:linear-gradient(130deg,rgba(var(--accent-rgb),.08),var(--panel)); }
.os-pet-farm h3 { font:400 26px/1.3 var(--heading-font); margin:0 0 14px; }
.os-pet-farm>p { font-size:13px; line-height:1.85; color:var(--muted); }
.os-pet-farm>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:22px; }
.os-pet-farm>div p { margin:0; font-size:11px; line-height:1.8; color:var(--muted); }
.os-pet-farm strong { display:block; color:var(--accent); font-size:12px; margin-bottom:8px; }
.os-pet-farm span:not(.os-eyebrow) { display:block; }
.os-pet-catalogue-card { border-color:rgba(var(--accent-rgb),.65); }
.os-pet-teaser { display:grid; grid-template-columns:150px minmax(0,1fr) auto; align-items:center; gap:30px; margin:30px auto 0; padding:30px 35px; border:1px solid rgba(var(--accent-rgb),.5); border-radius:9px; background:radial-gradient(ellipse at 0 40%,rgba(var(--accent-rgb),.14),transparent 60%),var(--panel); }
.os-pet-teaser-symbol { text-align:center; }
.os-pet-teaser-symbol img { display:block; width:118px; height:118px; margin:0 auto; filter:drop-shadow(0 6px 24px rgba(var(--accent-rgb),.4)); }
.os-pet-teaser-symbol span { color:var(--accent); font-size:10px; letter-spacing:1px; }
.os-pet-teaser-copy { min-width:0; }
.os-pet-teaser .os-pet-release { font-size:9px; margin-bottom:15px; }
.os-pet-teaser h2 { font:400 33px/1.15 var(--heading-font); margin:0 0 12px; }
.os-pet-teaser h2 em { display:block; color:var(--accent); font-size:.65em; font-style:normal; margin-top:5px; }
.os-pet-teaser p { color:var(--muted); font-size:12px; line-height:1.8; margin:0 0 13px; }
.os-pet-teaser-pills { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:9px; color:var(--accent); }
.os-pet-teaser>.os-button { font-size:10px; padding:13px 18px; }
@media(max-width:1050px) { .os-pet-flagship { gap:24px; padding:32px 25px; }.os-pet-teaser { grid-template-columns:120px minmax(0,1fr); gap:20px; }.os-pet-teaser>.os-button { grid-column:2; justify-self:start; }.os-pet-teaser-symbol { grid-row:span 2; }.os-pet-demo-skills img { width:25px;height:25px; }.os-pet-demo-skills>div { gap:6px;padding:7px 5px; } }
@media(max-width:760px) { .os-pet-flagship { grid-template-columns:minmax(0,1fr); padding:25px 20px; gap:30px; margin-top:20px; }.os-pet-visual { width:100%;max-width:540px;margin:0 auto; }.os-pet-copy h2 { font-size:35px; }.os-pet-demo-head { font-size:12px; }.os-pet-demo-companion img { width:72px; }.os-pet-demo-companion strong { font-size:21px; }.os-pet-demo-skills span { font-size:11px; }.os-pet-demo-body { padding:12px 0; }.os-pet-steps,.os-pet-farm>div { grid-template-columns:minmax(0,1fr); }.os-pet-farm { padding:25px 20px; }.os-pet-teaser { grid-template-columns:75px minmax(0,1fr); gap:15px;padding:25px 20px; }.os-pet-teaser-symbol img { width:75px;height:75px; }.os-pet-teaser h2 { font-size:27px; }.os-pet-teaser .os-pet-release { font-size:8px; }.os-pet-teaser-pills { gap:5px; }.os-pet-teaser-pills span { display:block; }.os-pet-level-tag { align-self:start; } }
@media(max-width:420px) { .os-pet-flagship { padding:24px 14px; }.os-pet-copy h2 { font-size:29px; }.os-pet-demo-body { gap:7px;padding:9px 0; }.os-pet-demo-head { font-size:10px;padding-bottom:7px; }.os-pet-demo-companion { padding:7px;gap:6px; }.os-pet-demo-companion img { width:54px; }.os-pet-demo-companion strong { font-size:16px; }.os-pet-demo-companion small { font-size:8px; }.os-pet-demo-skills span { font-size:9px; }.os-pet-demo-skills strong { font-size:13px; }.os-pet-demo-skills b { width:18px;height:18px;font-size:10px; }.os-pet-demo-bottom { font-size:6px; }.os-pet-teaser { grid-template-columns:minmax(0,1fr); }.os-pet-teaser-symbol { display:none; }.os-pet-teaser>.os-button { grid-column:1; }.os-pet-teaser h2 { font-size:28px; } }