/* ============================================================ ORYX — socle : reset, typographie, boutons, nav, pied de page ============================================================ */ *,*::before,*::after{ box-sizing:border-box; } html,body{ overflow-x:clip; } html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + var(--bar-h) + 12px); } body{ margin:0; background:var(--ink); color:var(--bone); font-family:var(--sans); font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,video,canvas{ max-width:100%; display:block; } a{ color:inherit; } :focus-visible{ outline:2px solid var(--pulse); outline-offset:3px; border-radius:4px; } ::selection{ background:rgba(16,242,160,.24); } /* passer d'une langue à l'autre : un seul commutateur sur */ body.en .fr, body.fr .en{ display:none !important; } /* saut au contenu — obligatoire pour la navigation clavier */ .skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--pulse); color:#04150E; padding:12px 18px; font-weight:700; border-radius:0 0 10px 0; } .skip:focus{ left:0; } .wrap{ max-width:1200px; margin:0 auto; padding:0 var(--gutter); } .band{ padding:var(--band) 0; position:relative; } /* ---------- typographie ---------- */ .eyebrow{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:var(--pulse); margin:0 0 20px; } .eyebrow.mute{ color:var(--tert); } .d-xl{ font-family:var(--display); font-size:clamp(42px,8.4vw,96px); font-weight:800; letter-spacing:-.05em; line-height:.94; margin:0; } .d-l { font-family:var(--display); font-size:clamp(34px,5.6vw,64px); font-weight:800; letter-spacing:-.048em; line-height:.98; margin:0; } .d-m { font-family:var(--display); font-size:clamp(27px,3.4vw,42px); font-weight:800; letter-spacing:-.04em; line-height:1.06; margin:0; } .lead{ color:var(--dim); font-size:clamp(16px,1.6vw,19px); line-height:1.62; max-width:62ch; margin:26px 0 0; } p.body{ color:var(--dim); font-size:16px; line-height:1.72; } .pulse-w{ color:var(--pulse); } .mono{ font-family:var(--mono); } .proof{ font-family:var(--mono); font-size:13px; letter-spacing:.05em; color:var(--pulse); margin:22px 0 0; } .beta-tag{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; vertical-align:2px; background:rgba(214,180,137,.20); color:var(--desert); border-radius:6px; padding:3px 8px; white-space:nowrap; } /* ---------- boutons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; padding:13px 26px; border-radius:14px; border:0; cursor:pointer; font-family:var(--sans); font-size:15px; font-weight:700; letter-spacing:-.01em; text-decoration:none; transition:transform .18s var(--ease-out), background-color .18s; } .btn-primary{ background:var(--pulse); color:#04150E; } .btn-primary:hover{ background:#3BFFBC; transform:translateY(-2px); } .btn-ghost{ background:rgba(244,239,230,.07); color:var(--bone); } .btn-ghost:hover{ background:rgba(244,239,230,.13); transform:translateY(-2px); } .btn-line{ background:transparent; color:var(--bone); box-shadow:inset 0 0 0 1px var(--line); } .btn-line:hover{ box-shadow:inset 0 0 0 1px rgba(16,242,160,.5); transform:translateY(-2px); } /* ---------- bandeau + navigation ---------- */ #announce{ position:fixed; inset:0 0 auto 0; z-index:102; min-height:var(--bar-h); display:flex; align-items:center; justify-content:center; gap:12px; padding:6px 16px; background:linear-gradient(90deg,var(--pulse-deep) 0%,var(--pulse) 62%,#0CCF88 100%); color:#04150E; font-family:var(--mono); font-size:12px; font-weight:700; } #announce .tag{ background:#04150E; color:var(--pulse); border-radius:6px; padding:3px 9px; font-size:10.5px; letter-spacing:.16em; } #announce a{ color:#04150E; text-decoration:underline; text-underline-offset:3px; } #announce .short{ display:none; } nav.site{ position:fixed; top:var(--bar-h); left:0; right:0; z-index:101; min-height:var(--nav-h); background:rgba(5,7,15,.78); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); } .nav-in{ max-width:1200px; margin:0 auto; padding:12px var(--gutter); display:flex; align-items:center; gap:20px; } .nav-logo{ height:26px; width:auto; } .nav-links{ display:flex; gap:clamp(12px,1.5vw,22px); margin-left:auto; } .nav-links a{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--dim); text-decoration:none; padding:6px 0; transition:color .16s; /* Sans cela, les libellés français — plus longs que les anglais — se coupent en deux lignes et la barre passe sur deux rangées. */ white-space:nowrap; } .nav-links a:hover{ color:var(--pulse); } .nav-right{ display:flex; align-items:center; gap:10px; } /* L'hôte est gratuit : le dire là où l'on vend l'add-on lève l'objection la plus fréquente. En contour, jamais en plein — l'achat garde la priorité visuelle, il reste le seul bouton vert de la barre. */ .nav-blender{ white-space:nowrap; } .nav-right .btn{ white-space:nowrap; } .nl-blender{ display:none; } .lang{ display:flex; background:rgba(244,239,230,.07); border-radius:10px; padding:3px; } .lang button{ background:none; border:0; cursor:pointer; color:var(--tert); font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.08em; padding:7px 10px; border-radius:8px; min-height:34px; } .lang button[aria-pressed="true"]{ background:rgba(16,242,160,.16); color:var(--pulse); } .nav-toggle{ display:none; width:44px; height:44px; border:0; background:none; cursor:pointer; position:relative; } .nav-toggle span,.nav-toggle::before,.nav-toggle::after{ content:''; position:absolute; left:11px; width:22px; height:2px; background:var(--bone); border-radius:2px; } .nav-toggle::before{ top:15px; } .nav-toggle span{ top:21px; } .nav-toggle::after{ top:27px; } /* ---------- barre d'achat ---------- */ #buybar{ position:fixed; left:0; right:0; bottom:0; z-index:100; display:flex; align-items:center; justify-content:center; gap:16px; padding:12px 16px; background:rgba(8,12,29,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transform:translateY(110%); transition:transform .35s var(--ease); font-family:var(--mono); font-size:12.5px; } #buybar.show{ transform:none; } #buybar .bb-name{ color:var(--bone); font-weight:700; } #buybar .bb-price{ color:var(--tert); } #buybar .btn{ min-height:40px; padding:9px 18px; font-size:13.5px; } /* ---------- pied de page ---------- */ footer.site{ padding:clamp(56px,7vw,84px) 0 40px; background:var(--ink-deep); position:relative; z-index:2; } .f-in{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px; } .f-brand img.wm{ height:26px; width:auto; margin-bottom:18px; } .f-brand p{ color:var(--dim); font-size:14px; line-height:1.6; margin:0 0 14px; max-width:300px; } .f-ver{ font-family:var(--mono); font-size:11px; color:var(--ghost); letter-spacing:.04em; } .f-social{ display:flex; gap:12px; margin-top:18px; } .f-social a{ width:38px; height:38px; border-radius:10px; background:rgba(244,239,230,.06); display:flex; align-items:center; justify-content:center; color:var(--dim); } .f-social a:hover{ color:var(--pulse); } .f-social svg{ width:17px; height:17px; } .f-col h3{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--pulse); margin:0 0 16px; font-weight:500; } .f-col ul{ list-style:none; padding:0; margin:0; } .f-col li{ margin-bottom:10px; } .f-col a{ color:var(--dim); font-size:14px; text-decoration:none; } .f-col a:hover{ color:var(--bone); } .f-bottom{ margin-top:clamp(40px,5vw,60px); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-family:var(--mono); font-size:11.5px; color:var(--ghost); } .f-bottom a{ color:var(--tert); } /* ---------- révélations ---------- */ .js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); } .js .reveal.vis{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .js .reveal{ opacity:1 !important; transform:none !important; transition:none !important; } .btn:hover{ transform:none; } } @media (max-width:900px){ .nav-links{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:rgba(5,7,15,.97); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); padding:10px 0 18px; } .nav-links.open{ display:flex; } .nav-links a{ padding:14px var(--gutter); font-size:14px; } .nl-blender{ display:block; color:var(--pulse); } .nav-toggle{ display:block; } .nav-right{ margin-left:auto; } .nav-right .btn{ display:none; } .f-in{ grid-template-columns:1fr 1fr; } } @media (max-width:620px){ body{ font-size:16px; } .f-in{ grid-template-columns:1fr; } /* Le bandeau doit tenir sur UNE ligne : sa hauteur nourrit --bar-h, dont dépend la position de la nav. S'il passe à trois lignes, la barre de navigation lui rentre dedans. */ #announce{ gap:8px; padding:5px 12px; font-size:10.5px; white-space:nowrap; overflow:hidden; } #announce .tag{ font-size:9.5px; padding:2px 7px; letter-spacing:.12em; } #announce .long{ display:none; } #announce .short{ display:inline; } #announce a{ margin-left:auto; } }