@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); } /* TAROT : Aurore turquoise. Choisi le 2026-07-29 parmi les alternates déjà validés en maquette — le seul qui ne collide avec aucun univers (le saphir frôle le violet numéro, le rose connote l'amour alors qu'on vend une question libre). Le platine reste au PORTAIL au lieu d'être partagé. */ [data-theme="tarot"]{ --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); } /* 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