/* Pulse Auto — interface de la Tesla, façon Android Auto : rail à gauche, écran Android, panneau téléphone. */
:root { --fond: #0b0c0f; --rail: #16181d; --texte: #eef0f4; --doux: #9aa0ab; --rouge: #e5383b; --bord: #2a2d34; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--fond); color: var(--texte); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; user-select: none; }
body { display: flex; }
.cache { display: none !important; }

#rail { width: 104px; flex: none; background: var(--rail); display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 0; overflow-y: auto; scrollbar-width: none; }
#raccourcis { display: contents; }
#rail .logo { width: 56px; height: 56px; margin-bottom: 8px; }
#rail button { position: relative; flex: none; width: 76px; height: 64px; border: 0; border-radius: 20px; background: transparent; color: var(--texte); cursor: pointer; display: grid; place-items: center; }
#rail button:active, #rail button.actif { background: #2b2f38; }
#rail svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#rail .espace { flex: 1; }
#heure { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pastille { position: absolute; top: 12px; right: 16px; width: 10px; height: 10px; border-radius: 50%; background: #5f6470; }
.pastille.ok { background: #22c55e; }

#centre { flex: 1; display: flex; min-width: 0; gap: 10px; padding: 10px; background: var(--fond); }
#ecran { position: relative; flex: 1; display: grid; place-items: center; background: #000; min-width: 0; border-radius: 22px; overflow: hidden; }

/* Accueil : grille d'icônes rondes sur fond sombre */
#lanceur { position: absolute; inset: 0; background: var(--fond); display: flex; flex-direction: column; padding: 28px 40px; z-index: 3; }
.lanceur-tete { display: flex; align-items: baseline; gap: 20px; margin-bottom: 24px; }
#lanceur-heure { font-size: 40px; font-weight: 600; }
#grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 28px 16px; overflow-y: auto; align-content: start; }
.tuile { display: flex; flex-direction: column; align-items: center; gap: 12px; border: 0; background: none; color: var(--texte); font-size: 19px; cursor: pointer; }
.tuile .rond { width: 104px; height: 104px; }
.tuile:active .rond { transform: scale(.92); }
.tuile span:last-child { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rond { border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 40px; font-weight: 700; flex: none; transition: transform .1s; }
.rond svg { width: 52%; height: 52%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Carte « en cours de lecture » */
#media { width: 330px; flex: none; background: var(--rail); border-radius: 22px; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; gap: 16px; }
.media-app { display: flex; align-items: center; gap: 12px; color: var(--doux); font-size: 18px; }
.media-app .rond { width: 44px; height: 44px; font-size: 18px; }
.media-texte { display: flex; flex-direction: column; gap: 8px; }
.media-texte b { font-size: 28px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.media-texte span { font-size: 20px; color: var(--doux); }
.media-boutons { display: flex; justify-content: space-between; align-items: center; }
.media-boutons button { width: 76px; height: 76px; border: 0; border-radius: 50%; background: #262a32; color: var(--texte); display: grid; place-items: center; }
.media-boutons button.lecture { width: 92px; height: 92px; background: var(--texte); color: var(--fond); }
.media-boutons svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Android a la taille exacte de cette zone (envoyée à la passerelle) : l'image la remplit sans déformation. */
#ecran { overflow: hidden; }
#video { width: 100%; height: 100%; object-fit: contain; touch-action: none; display: block; }
#message { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--fond); font-size: 22px; }
#message img { width: 120px; height: 120px; animation: pulse 2s ease-in-out infinite; }
#message b { font-size: 34px; }
#message span { color: var(--doux); text-align: center; max-width: 70%; }
@keyframes pulse { 50% { transform: scale(1.06); opacity: .8; } }

.panneau { position: absolute; top: 0; right: 0; bottom: 0; width: min(500px, 46vw); background: var(--rail); border-left: 1px solid var(--bord); display: flex; flex-direction: column; padding: 18px; gap: 12px; z-index: 5; box-shadow: -20px 0 40px #0008; }
.panneau .tete { display: flex; align-items: center; justify-content: space-between; font-size: 26px; }
.panneau .tete button { width: 56px; height: 56px; border: 0; border-radius: 16px; background: #2b2f38; color: var(--texte); display: grid; place-items: center; }
.panneau .tete svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.defile { overflow-y: auto; display: flex; flex-direction: column; gap: 14px; font-size: 20px; }
.defile h3 { margin: 10px 0 0; font-size: 18px; color: var(--doux); text-transform: uppercase; letter-spacing: 1px; }
.defile label { display: flex; flex-direction: column; gap: 8px; }
.choix { display: flex; gap: 6px; }
.choix button, .bouton { flex: 1; min-height: 56px; border: 0; border-radius: 14px; background: #262a32; color: var(--texte); font-size: 19px; padding: 0 12px; }
.choix button.actif { background: var(--rouge); font-weight: 600; }
.bouton.danger { background: #3a1d1f; color: #fca5a5; }
.ligne { display: flex; gap: 8px; }
#nouvelle-app { flex: 2; min-height: 56px; border-radius: 14px; background: #0f1115; color: var(--texte); border: 1px solid var(--bord); font-size: 18px; padding: 0 10px; }
.raccourci { display: flex; align-items: center; gap: 10px; background: #1f2229; border-radius: 14px; padding: 8px 12px; }
.raccourci span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.raccourci small { color: var(--doux); display: block; font-size: 14px; }
.raccourci button { width: 48px; height: 48px; border: 0; border-radius: 12px; background: #2b2f38; color: var(--texte); font-size: 20px; }
#rail button.gemini { background: linear-gradient(135deg, #4285f4, #9b72cb 55%, #d96570); }
#rail button.gemini svg { fill: #fff; stroke: none; }
#rail button.gemini .mini { position: absolute; right: 8px; bottom: 6px; width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.5; }
#recherche { height: 56px; border-radius: 16px; border: 1px solid var(--bord); background: #0f1115; color: var(--texte); font-size: 22px; padding: 0 16px; }
#liste-contacts { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.contact { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 0 14px; border-radius: 16px; background: #1f2229; border: 0; color: var(--texte); font-size: 22px; text-align: left; cursor: pointer; }
.contact:active { background: var(--rouge); }
.contact .initiale { width: 48px; height: 48px; border-radius: 50%; background: #3a3f4a; display: grid; place-items: center; font-weight: 700; flex: none; }
.contact small { display: block; color: var(--doux); font-size: 16px; }
.contact .etoile { margin-left: auto; color: #fbbf24; }
.aide { color: var(--doux); font-size: 18px; }

#toast { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); background: #2b2f38; padding: 16px 24px; border-radius: 16px; font-size: 20px; z-index: 10; max-width: 80vw; }

/* Page de connexion */
.connexion { display: grid; place-items: center; width: 100%; }
.connexion form { display: flex; flex-direction: column; gap: 16px; align-items: center; background: var(--rail); padding: 40px; border-radius: 24px; }
.connexion img { width: 100px; }
.connexion input { height: 60px; width: 320px; font-size: 26px; text-align: center; border-radius: 16px; border: 1px solid var(--bord); background: #0f1115; color: var(--texte); letter-spacing: 4px; }
.connexion button { height: 60px; width: 320px; border: 0; border-radius: 16px; background: var(--rouge); color: #fff; font-size: 22px; font-weight: 600; }
.connexion .erreur { color: #f87171; }