/* public/langue-modale.css
   Choix de la langue à la première visite, partagé par la landing et /demo.
   Volontairement autonome (aucune variable de thème) : la boîte s'affiche
   avant tout le reste, y compris sur une page dont le CSS n'a pas fini de
   charger. */

.modale-langue {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(6, 6, 8, 0.82);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.modale-langue[hidden] { display: none; }

.modale-langue__carte {
    width: 100%; max-width: 380px;
    background: #131316; color: #fafafa;
    border: 1px solid rgba(255,255,255,0.10); border-radius: 20px;
    padding: 28px 24px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.55);
    text-align: center;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.modale-langue__carte h2 { margin: 0 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.modale-langue__carte p  { margin: 0 0 20px; font-size: 14px; line-height: 1.5; color: #a1a1aa; }

.modale-langue__choix { display: grid; gap: 8px; margin-bottom: 20px; }
.modale-langue__choix button {
    font: inherit; font-size: 15px; font-weight: 600;
    min-height: 48px;                       /* confortable au pouce */
    padding: 12px 16px; cursor: pointer;
    color: #fafafa; background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 12px;
    transition: background 0.15s, border-color 0.15s;
}
.modale-langue__choix button:hover { background: rgba(255,255,255,0.10); }
.modale-langue__choix button[aria-pressed="true"] {
    background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.45);
}
.modale-langue__choix button:focus-visible,
.modale-langue__ok:focus-visible { outline: 2px solid #818cf8; outline-offset: 2px; }

.modale-langue__ok {
    font: inherit; font-size: 15px; font-weight: 700;
    width: 100%; min-height: 48px; padding: 14px 20px; cursor: pointer;
    color: #0a0a0a; background: #fafafa; border: 0; border-radius: 999px;
}
.modale-langue__ok:hover { background: #fff; }

@media (prefers-reduced-motion: no-preference) {
    .modale-langue__carte { animation: modale-langue-apparait 0.22s ease-out; }
    @keyframes modale-langue-apparait { from { opacity: 0; transform: translateY(8px); } }
}