/* La vue en voiture (voiture.html) : la vue en plein écran, le bandeau, le
   compteur et la limitation, les boutons, la fiche d'une borne, l'accueil. */

:root { --accent:#e07b00; --panel:rgba(31,35,40,.88); --text:#e8eaed; --muted:#9aa0a6;
        --line:#3a4149; --bleu:#3d8bff; }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; overflow:hidden; background:#0e1116; color:var(--text);
             font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
             -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
#vue { position:fixed; inset:0; touch-action:none; }
#vue canvas { display:block; }
.cartouche { background:var(--panel); border:1px solid var(--line); border-radius:14px;
             box-shadow:0 4px 18px rgba(0,0,0,.35); }
/* La rue où l'on roule, en haut au milieu, comme sur un GPS. */
#rue { position:fixed; top:max(12px, env(safe-area-inset-top)); left:50%; transform:translateX(-50%);
       max-width:min(680px, calc(100vw - 150px)); padding:8px 18px; text-align:center;
       display:flex; align-items:center; gap:10px; }
#rue[hidden] { display:none; }
#rue b { font-size:clamp(16px, 2.6vw, 26px); font-weight:650; white-space:nowrap;
         overflow:hidden; text-overflow:ellipsis; }
/* Cartouches des routes numérotées : rouge pour les autoroutes et les
   nationales, jaune pour les départementales, comme leurs panneaux. */
.numero { flex:none; font:700 clamp(13px, 2vw, 18px)/1 system-ui, sans-serif; padding:4px 8px;
          border-radius:5px; border:2px solid #fff; background:#c8102e; color:#fff; }
.numero.d { background:#f6c700; color:#111; border-color:#111; }
.numero.e { background:#007a3d; }
.numero.c { background:#fff; color:#111; border-color:#111; }
#compteur { position:fixed; left:max(14px, env(safe-area-inset-left)); bottom:max(14px, env(safe-area-inset-bottom));
            width:108px; height:108px; border-radius:50%; display:flex; flex-direction:column;
            align-items:center; justify-content:center; }
#compteur b { font-size:42px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
#compteur small { font-size:12px; color:var(--muted); margin-top:2px; }
#compteur.exces b { color:#ff5a4e; }
/* La limitation de la route, en panneau, à droite du compteur ; dessous,
   d'où elle vient : OpenStreetMap, ou estimée (la règle générale). */
#limite { position:fixed; left:calc(max(14px, env(safe-area-inset-left)) + 120px);
          bottom:max(14px, env(safe-area-inset-bottom)); display:flex; flex-direction:column;
          align-items:center; gap:4px; }
#limite[hidden] { display:none; }
#limite .panneau { width:68px; height:68px; box-sizing:border-box; border-radius:50%; background:#fff;
                   border:7px solid #d0021b; display:flex; align-items:center; justify-content:center;
                   box-shadow:0 4px 14px rgba(0,0,0,.35); }
#limite b { font:800 27px/1 system-ui, sans-serif; color:#111; font-variant-numeric:tabular-nums;
            letter-spacing:-.5px; }
#limite small { font-size:10px; color:var(--text); background:var(--panel); border:1px solid var(--line);
                padding:1px 6px; border-radius:6px; white-space:nowrap; }
#limite.estimee .panneau { border-color:#8e959c; border-style:dashed; }
#limite.estimee b { color:#5b6168; }
#etat { position:fixed; left:max(14px, env(safe-area-inset-left)); top:max(12px, env(safe-area-inset-top));
        font-size:11px; color:var(--muted); padding:7px 10px; line-height:1.45; max-width:230px; }
#etat b { color:var(--text); font-weight:600; }
#etat .rond { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px;
              background:#3ba55d; vertical-align:0; }
#etat .rond.faible { background:#e0a100; } #etat .rond.perdu { background:#d9453b; }
#etat .alerte { color:#ffb020; font-weight:600; }
#boussole { position:fixed; right:max(14px, env(safe-area-inset-right)); top:max(12px, env(safe-area-inset-top));
            width:52px; height:52px; border-radius:50%; padding:0; cursor:pointer; }
#boussole svg { width:100%; height:100%; }
#boutons { position:fixed; right:max(14px, env(safe-area-inset-right)); bottom:max(14px, env(safe-area-inset-bottom));
           display:flex; flex-direction:column; gap:10px; }
.bouton.petit { font-size:11px; }
.bouton { width:54px; height:54px; border-radius:50%; padding:0; display:flex; align-items:center;
          justify-content:center; cursor:pointer; background:var(--panel); border:1px solid var(--line);
          color:var(--text); font:650 13px/1 system-ui, sans-serif; text-decoration:none; }
.bouton:hover { border-color:var(--accent); }
.bouton:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.bouton.on { background:var(--accent); border-color:var(--accent); color:#fff; }
.bouton[hidden] { display:none; }
/* Le bouton ⚠ au-dessus du compteur, comme celui de Coyote, à portée
   du doigt ; il s'allume quand la page voit le sol manquer sous la
   voiture. */
#b-signaler { position:fixed; left:calc(max(14px, env(safe-area-inset-left)) + 27px);
              bottom:calc(max(14px, env(safe-area-inset-bottom)) + 120px); }
.bouton.alerte { border-color:#e0a100; color:#ffb020; box-shadow:0 0 0 3px rgba(224,161,0,.4); }
.bouton.envoi { opacity:.5; pointer-events:none; }
.bouton svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8;
              stroke-linecap:round; stroke-linejoin:round; }
/* Sur un écran bas (téléphone en paysage), deux colonnes. */
@media (max-height:520px) {
    #boutons { flex-direction:row; flex-wrap:wrap-reverse; justify-content:flex-end; max-width:190px; }
    #compteur { width:88px; height:88px; } #compteur b { font-size:32px; }
    #b-signaler { left:calc(max(14px, env(safe-area-inset-left)) + 17px);
                  bottom:calc(max(14px, env(safe-area-inset-bottom)) + 98px); }
    #limite { left:calc(max(14px, env(safe-area-inset-left)) + 98px); }
    #limite .panneau { width:56px; height:56px; border-width:6px; } #limite b { font-size:22px; }
}
#annonce { position:fixed; top:calc(max(12px, env(safe-area-inset-top)) + 64px); left:50%;
           transform:translateX(-50%); padding:8px 14px; font-size:13px; max-width:calc(100vw - 32px);
           text-align:center; transition:opacity .4s; }
#annonce[hidden] { display:none; }
/* La fiche d'une borne touchée, sous la rue ; un toucher la ferme. */
#borne { position:fixed; top:calc(max(12px, env(safe-area-inset-top)) + 64px); left:50%;
         transform:translateX(-50%); padding:10px 14px; font-size:13px; line-height:1.45;
         max-width:min(440px, calc(100vw - 32px)); color:#c9cdd2; cursor:pointer; z-index:2; }
#borne[hidden] { display:none; }
#borne b { color:var(--text); font-size:14px; }
#borne .teinte { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px;
                 vertical-align:-1px; }
#accueil { position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
           background:rgba(14,17,22,.55); padding:16px; }
#accueil[hidden] { display:none; }
#accueil .cartouche { max-width:440px; padding:22px 22px 18px; line-height:1.5; }
#accueil h1 { margin:0 0 6px; font-size:19px; display:flex; align-items:center; gap:10px; }
#accueil h1 img { width:30px; height:30px; }
#accueil p { margin:8px 0; font-size:14px; color:#c9cdd2; }
#accueil .actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
#accueil .actions a, #accueil .actions button { border:1px solid var(--line); background:#2b3138;
           color:var(--text); border-radius:8px; padding:9px 14px; font-size:14px; cursor:pointer;
           text-decoration:none; }
#accueil .actions .principal { background:var(--accent); border-color:var(--accent); color:#fff; }
.roue { display:inline-block; width:14px; height:14px; border:2px solid var(--muted);
        border-top-color:transparent; border-radius:50%; animation:tourne 1s linear infinite;
        vertical-align:-2px; margin-right:6px; }
@keyframes tourne { to { transform:rotate(360deg); } }
#credits { position:fixed; bottom:max(2px, env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%);
           font-size:10px; color:var(--muted); background:rgba(31,35,40,.7); padding:2px 8px;
           border-radius:4px; white-space:nowrap; pointer-events:none; }
/* Étroit : les crédits entre le compteur et les boutons, sur deux lignes au besoin. */
@media (max-width:560px) {
    #etat { display:none; }
    /* Au-dessus du compteur : à sa droite, les crédits. */
    #limite { left:max(24px, calc(env(safe-area-inset-left) + 10px)); bottom:calc(max(14px, env(safe-area-inset-bottom)) + 118px); }
    /* Au-dessus du panneau de la limitation, lui-même au-dessus du compteur. */
    #b-signaler { left:max(31px, calc(env(safe-area-inset-left) + 17px)); bottom:calc(max(14px, env(safe-area-inset-bottom)) + 214px); }
    #credits { left:130px; right:84px; transform:none; white-space:normal; text-align:center; font-size:9px; }
}