/* Styles communs du site ohmGym — chargés par les QUATRE pages.
   Voir `theme.js` pour les jetons (mêmes valeurs, côté Tailwind). */
    :root {
      --ink: #0B0D10; --surface: #15181E; --raised: #1E222A; --line: #2A2F39;
      --lime: #C5FF41; --t1: #F5F7FA; --t2: #9BA3B0; --t3: #6A7280;
      --font-sans: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    }

    /* ── La bascule de langue ────────────────────────────────────────────────

       Définie ICI, une seule fois, et nulle part ailleurs : les quatre pages
       chargent cette feuille, donc les quatre pastilles sont la même. Sur
       `index.html` c'est la feuille qui remplace les classes Tailwind, sur
       les pages document elle remplace le CSS recopié — avant, c'était trois
       définitions qui se ressemblaient sans être égales. */
    #lang {
      height: 36px; min-width: 44px; padding: 0 12px;
      border: 1px solid var(--line); border-radius: 9999px;
      background: transparent; color: var(--t2);
      font-family: var(--font-sans); font-size: 14px; font-weight: 500; line-height: 1;
      cursor: pointer; transition: border-color .2s, color .2s;
    }
    #lang:hover { border-color: var(--lime); color: var(--lime); }

    [data-lang] { display: none; }
    html[lang="en"] [data-lang="en"], html[lang="fr"] [data-lang="fr"] { display: revert; }
    .hero-glow { background: radial-gradient(70% 55% at 50% 0%, rgba(197,255,65,.14) 0%, rgba(11,13,16,0) 70%); }
    .ring { --p: 93; background: conic-gradient(#C5FF41 calc(var(--p) * 1%), #1E222A 0); }
    .ring::before { content: ""; position: absolute; inset: 11px; border-radius: 9999px; background: #15181E; }
    .phone { box-shadow: 0 30px 80px -20px rgba(0,0,0,.8), inset 0 0 0 1px #2A2F39; }
    .tilt { transform: perspective(1400px) rotateY(-8deg) rotateX(3deg); }
    /* Grille de fonctionnalités : cellules séparées par des filets, un repère « + » aux coins */
    .fcell { position: relative; }
    .fcell::before, .fcell::after { content: "+"; position: absolute; color: #6A7280; font: 500 18px/1 "Barlow", sans-serif; pointer-events: none; }
    .fcell::before { top: -10px; left: -6px; }
    .fcell::after  { bottom: -11px; right: -6px; }
    .fcell:hover .ficon { color: #C5FF41; border-color: rgba(197,255,65,.5); background: rgba(197,255,65,.08); }
    .dotbg { background-image: radial-gradient(#2A2F39 1px, transparent 1px); background-size: 18px 18px; }
    @media (prefers-reduced-motion: no-preference) {
      .rise { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
      .rise-2 { animation-delay: .12s }
      @keyframes rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
    }
    /* Le français est plus long : le titre du hero descend d'un cran, chaque phrase sur sa ligne */
    html[lang="fr"] h1 { font-size: clamp(2.4rem, 5.2vw, 4.75rem); }
    .focus-ring:focus-visible, #lang:focus-visible { outline: 2px solid #C5FF41; outline-offset: 2px; }