@charset "utf-8"; :root{ --nuit:#080a1a; --nuit2:#0d1030; --panneau:#12153a; --encre:#e9e6f5; --voile:#a7a3c8; /* Accent par UNIVERS : défaut = doré (astrologie). Surchargé par [data-theme] (numéro/védique). --or / --or-clair suivent l'accent -> tout le site se recolore sans autre changement. Les -rgb servent aux rgba() (lueurs, ombres) : rgba(var(--accent-rgb), .28) etc. */ --accent:#e6c473; --accent-clair:#f4dfa6; --accent-rgb:230,196,115; --accent-clair-rgb:244,223,166; --accent-deep:#b78a34; --accent-glint:#fff7db; --accent-soft:rgba(230,200,138,.14); --or:var(--accent); --or-clair:var(--accent-clair); --violet:#6d5bd0; --serif:"Cormorant Garamond",Georgia,serif; --sans:"Outfit",system-ui,sans-serif; } /* Chaque discipline = MÊME design system, accent + teinte différents (piloté par data-theme sur ). */ /* astro = mêmes valeurs que :root ; bloc explicite pour pouvoir forcer l'accent doré sur un SOUS-élément (ex. un bouton) même sur une page à autre thème (portail). */ [data-theme="astro"]{ --accent:#e6c473; --accent-clair:#f4dfa6; --accent-rgb:230,196,115; --accent-clair-rgb:244,223,166; --accent-deep:#b78a34; --accent-glint:#fff7db; --accent-soft:rgba(230,200,138,.14); } [data-theme="numero"]{ --accent:#9f86e0; --accent-clair:#c3aef2; --accent-rgb:159,134,224; --accent-clair-rgb:195,174,242; --accent-deep:#6a4fb0; --accent-glint:#f4efff; --accent-soft:rgba(178,157,235,.16); } [data-theme="vedic"]{ --accent:#f0b16a; --accent-clair:#f8ce97; --accent-2:#e08a44; --accent-rgb:240,177,106; --accent-clair-rgb:248,206,151; --accent-deep:#c07f34; --accent-glint:#fff3e2; --accent-soft:rgba(240,160,90,.15); } /* PORTAIL (page d'accueil /Index) : accent HORS des 3 univers, pour ne pas laisser croire qu'on est sur l'astrologie. Platine lunaire = argent bleuté quasi neutre, se pose « au-dessus » des trois. */ [data-theme="portail"]{ --accent:#b6c2cf; --accent-clair:#dce4ec; --accent-rgb:182,194,207; --accent-clair-rgb:220,228,236; --accent-deep:#7d8996; --accent-glint:#ffffff; --accent-soft:rgba(182,194,207,.14); } /* Alternates portail en réserve (validés en maquette) — pour changer, remplacer le bloc ci-dessus par l'un d'eux : Céleste saphir : --accent:#7fa8e0; --accent-clair:#aecbf2; --accent-rgb:127,168,224; --accent-clair-rgb:174,203,242; --accent-deep:#3f6db0; --accent-glint:#eef5ff; --accent-soft:rgba(127,168,224,.14); Aurore turquoise: --accent:#66cfc0; --accent-clair:#9ce6da; --accent-rgb:102,207,192; --accent-clair-rgb:156,230,218; --accent-deep:#2f9e8f; --accent-glint:#ecfffb; --accent-soft:rgba(102,207,192,.14); Nébuleuse rose : --accent:#e394b8; --accent-clair:#f4bcd6; --accent-rgb:227,148,184; --accent-clair-rgb:244,188,214; --accent-deep:#b25a84; --accent-glint:#fff0f6; --accent-soft:rgba(227,148,184,.14); */ /* --or / --or-clair suivent l'accent LOCAL dès qu'un data-theme est posé. Sinon (définis seulement sur :root) ils restent hérités de l'accent de la PAGE : impossible de forcer une couleur d'univers sur un sous-élément (ex. un bouton data-theme="numero" sur la page portail garderait le platine). */ [data-theme]{--or:var(--accent);--or-clair:var(--accent-clair)} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} /* font-variant-numeric:lining-nums -> chiffres ALIGNÉS partout (Cormorant Garamond utilise sinon des chiffres elzéviriens : le 6/8 montent, le 3/4/5/7/9 descendent sous la ligne de base -> aspect « décalé »). Sans effet sur Outfit. */ body{background:var(--nuit);color:var(--encre);font-family:var(--sans);font-weight:300;line-height:1.6;overflow-x:hidden;position:relative;min-height:100vh;font-variant-numeric:lining-nums} body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background: radial-gradient(1200px 820px at 80% -12%, rgba(109,91,208,.32), transparent 60%), radial-gradient(1000px 720px at 14% 112%, rgba(var(--accent-rgb),.12), transparent 55%), radial-gradient(760px 520px at 50% 7%, rgba(var(--accent-clair-rgb),.07), transparent 62%), radial-gradient(circle at 50% 38%, #10132f 0%, #080a1a 72%)} body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* Ciel : grand carré centré (déborde du viewport) qui tourne très lentement autour du centre, comme la voûte céleste. */ .etoiles{position:fixed;top:50%;left:50%;width:150vmax;height:150vmax;transform:translate(-50%,-50%);z-index:0;pointer-events:none;animation:cielRot 360s linear infinite;will-change:transform} .etoiles i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.7;animation:scint 4s infinite ease-in-out} .etoiles i:nth-child(3n){width:1px;height:1px;opacity:.5} .etoiles i:nth-child(4n){background:var(--or-clair)} @keyframes scint{0%,100%{opacity:.2}50%{opacity:.9}} @keyframes cielRot{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}} .wrap{position:relative;z-index:2;max-width:1120px;margin:0 auto;padding:0 32px} /* Lien d'évitement (skip-link) : hors écran par défaut, visible au focus clavier (WCAG 2.4.1). */ .skip{position:absolute;left:8px;top:-60px;z-index:1000;background:var(--or,#e6c473);color:#12142e;padding:10px 18px;border-radius:0 0 12px 12px;font-weight:700;text-decoration:none;transition:top .18s} .skip:focus{top:0;outline:2px solid #12142e;outline-offset:2px} a{color:inherit} /* Selects : force le rendu sombre du menu déroulant natif (sinon popup blanc, illisible sur fond nuit). */ select{color-scheme:dark;background:rgba(8,10,26,.6);border:1px solid rgba(167,163,200,.28);border-radius:8px;padding:8px 12px;color:var(--encre);font-family:inherit;font-size:14px;cursor:pointer} select:focus{outline:none;border-color:var(--or)} select option{background:#12142e;color:var(--encre)} nav{display:flex;align-items:center;justify-content:space-between;height:70px} .logo{font-family:var(--serif);font-size:23px;letter-spacing:.14em;color:var(--or-clair);display:flex;align-items:center;gap:10px;text-decoration:none} .logo b{font-weight:500} .nav-r{display:flex;align-items:center;gap:28px} .langs{display:flex;gap:4px;font-size:13px;letter-spacing:.12em} .langs a{color:var(--voile);text-decoration:none;padding:4px 8px;border-radius:20px;transition:.25s} .langs a.on{color:var(--nuit);background:var(--or)} .langs a:hover:not(.on){color:var(--or-clair)} .devise-sel{font-size:12.5px;padding:5px 8px;border-radius:20px;letter-spacing:.04em;background:rgba(8,10,26,.6);border:1px solid rgba(167,163,200,.28);color:var(--voile)} .devise-sel:hover{border-color:rgba(var(--accent-rgb),.42);color:var(--or-clair)} .devise-ctx{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto 18px;font-size:12.5px;color:var(--voile)} .cta{font-size:14px;letter-spacing:.06em;color:var(--nuit);background:linear-gradient(100deg,var(--or),var(--or-clair) 34%,var(--accent-glint) 50%,var(--or-clair) 66%,var(--or));background-size:200% auto;animation:orShine 7s linear infinite;padding:12px 22px;border-radius:40px;text-decoration:none;font-weight:500;box-shadow:0 6px 30px rgba(var(--accent-rgb),.28);transition:.3s;display:inline-block} .cta:hover{transform:translateY(-2px);box-shadow:0 10px 40px rgba(var(--accent-rgb),.42)} header.hero{padding:70px 0 40px;text-align:center} .kicker{font-size:12.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--or);margin-bottom:26px} h1{font-family:var(--serif);font-weight:400;font-size:clamp(46px,8vw,92px);line-height:1.02;letter-spacing:-.01em} h1 em{font-style:italic;color:var(--or-clair)} /* Titres de héros : dégradé or qui défile lentement derrière le texte (clippé au glyphe) -> effet or brillant animé. */ .hero h1{ background:linear-gradient(100deg,var(--accent-deep) 0%,var(--accent) 22%,var(--accent-glint) 50%,var(--accent) 78%,var(--accent-deep) 100%); background-size:200% auto; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; opacity:1; /* line-height serré + background-clip:text rognaient les descendants (g, p, q...) : on élargit la ligne et on étend la zone peinte du dégradé sous la ligne de base via un padding-bas. */ line-height:1.14;padding-bottom:.14em; animation:up .9s forwards, orShine 7s linear infinite} .hero h1 em{-webkit-text-fill-color:transparent;color:transparent} @keyframes orShine{to{background-position:-200% center}} .lede{font-size:clamp(17px,2.4vw,21px);color:var(--voile);max-width:580px;margin:28px auto 0;font-weight:300} .actions{margin-top:40px;display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap} .btn-or{font-size:16px;color:var(--nuit);background:linear-gradient(100deg,var(--or),var(--or-clair) 34%,var(--accent-glint) 50%,var(--or-clair) 66%,var(--or));background-size:200% auto;animation:orShine 7s linear infinite;padding:16px 34px;border-radius:44px;text-decoration:none;font-weight:500;box-shadow:0 8px 40px rgba(var(--accent-rgb),.3);transition:.3s;display:inline-block;cursor:pointer;border:none;font-family:inherit} .btn-or:hover{transform:translateY(-3px)} /* Lien d'action discret. Les quatre premières déclarations NEUTRALISENT le rendu natif d'un