/* PAGE D'ACCUEIL PUBLIQUE — feuille partagée par les versions française et anglaise.
   Déplacée à la racine le 13/08 : la page était rangée sous `/maquette/`, personne n'y menait,
   et elle portait encore un bandeau « maquette de travail ». Un néophyte arrivait donc
   directement dans l'application, sans une ligne d'explication. */
  /* ── MAQUETTE de page d'accueil publique — 2026-08-10 ──────────────────────────────────
     Palette dérivée du produit lui-même : le cyan est la couleur dont EarMotion peint une
     source en boucle sur la carte (elle vient des données réelles, pas d'un nuancier). L'ambre
     tient le second pôle, le patrimoine. Fontes AUTO-HÉBERGÉES (vendor/fonts) — l'audit RGPD
     du 08/08 a proscrit tout appel à un serveur de fontes tiers. */
  :root {
    --nuit:      #06080b;
    --nuit-2:    #0b0f14;
    --panneau:   #0f141a;
    --trait:     rgba(255,255,255,0.10);
    --trait-fort:rgba(255,255,255,0.22);
    --texte:     #e9eef3;
    --doux:      #93a3b1;
    --creation:  #22d3ee;
    --patrimoine:#e0a458;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body { background: var(--nuit); color: var(--texte); font-family: 'Inter', system-ui, sans-serif;
         font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
  a { color: inherit; }
  .wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }
  section { padding: 72px 0; border-top: 1px solid var(--trait); }
  h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 10px; text-wrap: balance; }
  .chapo { color: var(--doux); max-width: 46rem; margin-bottom: 30px; }
  .eyebrow { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
             color: var(--doux); margin-bottom: 10px; }


  /* ── LA BARRE DE TÊTE (13/08) ────────────────────────────────────────────────────────────
     La page n'en avait pas : on tombait directement dans la démonstration jouable, sans savoir
     où l'on était ni comment entrer. Demande de Max — « la page doit proposer login et
     register ». Elle est COLLANTE parce que la décision de s'inscrire ne se prend pas au
     premier écran : elle se prend après avoir joué avec la carte, et il faut que le bouton
     soit encore là à ce moment-là.
     Aucune couleur nouvelle : le cyan est celui du pôle création, déjà porteur de sens. */
  .barre { position: sticky; top: 0; z-index: 50; background: rgba(6,8,11,0.86);
           backdrop-filter: blur(10px); border-bottom: 1px solid var(--trait); }
  .barre .in { max-width: 1080px; margin: 0 auto; padding: 11px 22px;
               display: flex; align-items: center; gap: 22px; }
  .marque { font-weight: 600; letter-spacing: -0.01em; text-decoration: none; font-size: 0.98rem; }
  .barre nav { display: flex; gap: 18px; margin-right: auto; }
  .barre nav a { color: var(--doux); text-decoration: none; font-size: 0.86rem; }
  .barre nav a:hover { color: var(--texte); }
  .bt { text-decoration: none; font-size: 0.84rem; padding: 7px 14px; border-radius: 8px;
        border: 1px solid var(--trait-fort); white-space: nowrap; }
  .bt:hover { border-color: var(--texte); }
  .bt.prim { background: var(--creation); border-color: var(--creation); color: #04212a; font-weight: 600; }
  .bt.prim:hover { filter: brightness(1.08); }
  /* Sous 720 px la navigation disparaît, les deux boutons restent : c'est ce pour quoi on est
     venu. Les mêmes liens vivent dans le pied de page. */
  @media (max-width: 720px) { .barre nav { display: none; } .barre .in { gap: 12px; }
                              .marque { margin-right: auto; } }

  /* ── LE PREMIER ÉCRAN : une vraie carte, jouable, avant toute lecture ── */
  .hero { position: relative; border-top: none; padding: 0; }
  .scene { position: relative; height: min(74vh, 620px); min-height: 400px; overflow: hidden;
           background: radial-gradient(120% 90% at 50% 0%, #0c1219 0%, var(--nuit) 70%); }
  #jeu { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair;
         touch-action: none; }
  /* ⚠️ z-index AU-DESSUS DU VOILE D'INVITATION (13/08). `.invite` couvre toute la scène pour
     appeler le premier clic ; sans cette ligne il assombrit aussi le titre, qui est la thèse de
     la page. Sur une maquette c'était acceptable ; sur la page d'accueil publique, la première
     phrase que lit un visiteur ne peut pas être à demi effacée. */
  .hero-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 22px 30px; z-index: 4;
              background: linear-gradient(to top, var(--nuit) 12%, rgba(6,8,11,0.82) 55%, transparent);
              pointer-events: none; }
  .hero-txt .in { max-width: 1080px; margin: 0 auto; }
  h1 { font-size: clamp(1.6rem, 4.2vw, 2.5rem); font-weight: 600; line-height: 1.15;
       letter-spacing: -0.02em; text-wrap: balance; max-width: 22ch; }
  h1 em { font-style: normal; color: var(--creation); }
  .hero-sub { color: var(--doux); margin-top: 10px; max-width: 40rem; font-size: 1.02rem; }

  .invite { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
            background: rgba(6,8,11,0.55); backdrop-filter: blur(2px); z-index: 3; cursor: pointer; }
  .invite div { text-align: center; }
  .invite b { display: block; font-size: 1.05rem; font-weight: 600; }
  .invite span { display: block; color: var(--doux); font-size: 0.86rem; margin-top: 6px; }
  .invite .pastille { width: 54px; height: 54px; border: 2px solid var(--creation); border-radius: 50%;
                      margin: 0 auto 16px; position: relative; }
  .invite .pastille::after { content: ''; position: absolute; inset: -2px; border: 2px solid var(--creation);
                             border-radius: 50%; animation: onde 2.4s ease-out infinite; }
  @keyframes onde { 0% { transform: scale(1); opacity: .8 } 100% { transform: scale(2.6); opacity: 0 } }

  .jauge { position: absolute; top: 14px; right: 18px; z-index: 2; font-size: 0.7rem; color: var(--doux);
           background: rgba(6,8,11,0.6); border: 1px solid var(--trait); border-radius: 999px;
           padding: 4px 12px; }

  /* ── Les trois portes ── */
  .portes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
  .porte { display: block; text-decoration: none; background: var(--panneau); border: 1px solid var(--trait);
           border-radius: 12px; padding: 20px 20px 22px; transition: border-color .15s, transform .15s; }
  .porte:hover { border-color: var(--trait-fort); transform: translateY(-2px); }
  .porte h3 { font-size: 1.02rem; font-weight: 600; margin-bottom: 6px; }
  .porte p { color: var(--doux); font-size: 0.9rem; }
  .porte .fl { color: var(--creation); font-size: 0.82rem; margin-top: 12px; display: inline-block; }

  /* ── La galerie des cartes réelles ── */
  .cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
  .carte { background: var(--panneau); border: 1px solid var(--trait); border-radius: 12px; overflow: hidden;
           text-decoration: none; display: block; transition: border-color .15s, transform .15s; }
  .carte:hover { border-color: var(--creation); transform: translateY(-2px); }
  .carte canvas { display: block; width: 100%; height: 132px; background: #080b0f; }
  .carte .m { padding: 12px 14px 14px; }
  .carte .n { font-size: 0.92rem; font-weight: 600; line-height: 1.3; }
  .carte .d { font-size: 0.74rem; color: var(--doux); margin-top: 5px;
              display: flex; gap: 10px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
  .vide { color: var(--doux); font-size: 0.9rem; }

  /* ── Les deux pôles ── */
  .poles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
  .pole { border: 1px solid var(--trait); border-radius: 12px; padding: 22px; background: var(--panneau); }
  .pole.c { border-top: 3px solid var(--creation); }
  .pole.p { border-top: 3px solid var(--patrimoine); }
  .pole h3 { font-size: 1.08rem; font-weight: 600; margin-bottom: 8px; }
  .pole p { color: var(--doux); font-size: 0.92rem; }
  .pole ul { list-style: none; margin-top: 14px; }
  .pole li { font-size: 0.86rem; color: var(--doux); padding: 5px 0 5px 16px; position: relative; }
  .pole li::before { content: ''; position: absolute; left: 0; top: 13px; width: 6px; height: 1px;
                     background: var(--trait-fort); }
  .pivot { margin-top: 26px; padding: 18px 20px; border: 1px solid var(--trait); border-radius: 12px;
           background: linear-gradient(90deg, rgba(34,211,238,0.06), rgba(224,164,88,0.06)); }
  .pivot b { color: var(--texte); }

  /* ── Les domaines ── */
  .dom { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
  .d1 { border: 1px solid var(--trait); border-radius: 12px; padding: 18px; }
  .d1 h4 { font-size: 0.94rem; font-weight: 600; margin-bottom: 6px; }
  .d1 p { font-size: 0.85rem; color: var(--doux); }

  /* ── Faits ── */
  .faits { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
  .fait { border: 1px solid var(--trait); border-radius: 12px; padding: 16px 18px; }
  .fait b { display: block; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; }
  .fait span { font-size: 0.8rem; color: var(--doux); }


  /* ── LES TROIS TEMPS (13/08) ─────────────────────────────────────────────────────────────
     Numérotés parce que c'en est VRAIMENT une séquence : on pose, puis on dessine, puis
     quelqu'un traverse. Numéroter ce qui n'est pas ordonné est une décoration ; ici, l'ordre
     est l'information. */
  .temps { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
           gap: 16px; counter-reset: t; }
  .temps li { border: 1px solid var(--trait); border-radius: 12px; padding: 20px; background: var(--panneau);
              position: relative; }
  .temps .n { display: block; font-size: 0.72rem; font-weight: 600; color: var(--creation);
              letter-spacing: 0.14em; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
  .temps h3 { font-size: 1.02rem; font-weight: 600; margin-bottom: 7px; }
  .temps p { color: var(--doux); font-size: 0.9rem; }

  /* ── LA CLÔTURE ──────────────────────────────────────────────────────────────────────────
     La page se termine par une porte, pas par un fait. C'est ce qui manquait : on arrivait au
     bout d'une liste de capacités sans savoir quoi faire ensuite. */
  .fin { background: linear-gradient(180deg, transparent, rgba(34,211,238,0.045)); }
  .fin h2 { font-size: 1.7rem; }
  .fin-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 34px; }
  .bt.gros { padding: 11px 20px; font-size: 0.92rem; }
  .note { color: var(--doux); font-size: 0.86rem; margin-top: 18px; }
  .note a { color: var(--texte); text-decoration: none; border-bottom: 1px solid var(--trait-fort); }

  footer { border-top: 1px solid var(--trait); padding: 40px 0 60px; color: var(--doux); font-size: 0.86rem; }
  footer a { color: var(--texte); text-decoration: none; border-bottom: 1px solid var(--trait-fort); }
  .liens { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }


  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }