/* NOVA Terrain — les jetons du prototype (5-prototype/shell/index.html), qui fait foi pour l'interface, et le cadre de l'app.
   Clair par défaut (lisible au soleil, A-47), sombre équivalent. Polices : Barlow et Barlow Condensed (OFL, telephone/polices/,
   sous-ensemble latin) : la CSP refuse Google Fonts, et l'app doit marcher hors ligne. Propriété : équipe Téléphone. */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(/polices/barlow-400.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url(/polices/barlow-500.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(/polices/barlow-600.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url(/polices/barlow-700.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(/polices/barlow-condensed-600.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/polices/barlow-condensed-700.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(/polices/barlow-condensed-800.woff2) format('woff2'); }

:root {
  --fond: #F3F5F4; --surface: #FFFFFF; --surface-2: #E7ECEA; --encre: #15212A; --gris: #566870; --gris-clair: #8A9AA0;
  --ligne: #D2DAD8; --accent: #D9481C; --sur-accent: #FFFFFF; --accent-texte: #B63A12; --accent-doux: #FBE5DC;
  --vert: #23864A; --vert-doux: #DDF0E4; --ambre: #A8740A; --ambre-texte: #855B00; --ambre-doux: #F6ECD4; --ardoise: #46607A; --ardoise-doux: #E0E7EE;
  --cyan: #0E7490; --cyan-doux: #DCEFF4; --sos: #C8102E; --sos-doux: #FBE1E5; --etoile: #C8900B;
  --violet: #6D28D9; --violet-doux: #EFE8FC; --bande: #15212A; --bande-texte: #F3F5F4;
  --voile: rgba(10, 17, 22, .46);
  --ombre: 0 1px 2px rgba(21, 33, 42, .07), 0 6px 18px rgba(21, 33, 42, .07);
  --ombre-forte: 0 -6px 30px rgba(21, 33, 42, .18);
  --carte-sol: #EDF1EF; --carte-ilot: #E0E6E3; --carte-rue: #FFFFFF; --carte-bord: #C4CECB; --carte-artere: #F5E3B8; --carte-artere-bord: #D9C28A;
  --carte-texte: #5B6C73; --carte-mes-rues: #23864A;
  --rang-1: #1E90FF; --rang-2: #32CD32; --rang-3: #FF7F00; --rang-4: #8A2BE2; --rang-5: #FF0000;
  --r: 14px; --r-petit: 10px; --barre-h: 64px; --entete-h: 54px;
  --f-titre: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif;
  --f-texte: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #0E161B; --surface: #16222A; --surface-2: #1E2D36; --encre: #E8EEEC; --gris: #9DB0B7; --gris-clair: #6F838B; --ligne: #2A3A43;
    --accent-texte: #FF8B5E; --accent-doux: #3A2117; --vert: #4CC27A; --vert-doux: #15301F; --ambre: #E2A93E; --ambre-texte: #E2A93E; --ambre-doux: #33290F;
    --ardoise: #9EB6CA; --ardoise-doux: #1D2B36; --cyan: #4CC0DA; --cyan-doux: #10313A; --sos: #FF4D5E; --sos-doux: #3B141A; --etoile: #E8B23A;
    --violet: #B79CF5; --violet-doux: #291E42; --bande: #E8EEEC; --bande-texte: #15212A; --voile: rgba(0, 0, 0, .6);
    --ombre: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25); --ombre-forte: 0 -6px 30px rgba(0, 0, 0, .5);
    --carte-sol: #131E24; --carte-ilot: #18252D; --carte-rue: #2A3943; --carte-bord: #0E161B; --carte-artere: #4A3D1F; --carte-artere-bord: #6B5A2E;
    --carte-texte: #9DB0B7; --carte-mes-rues: #4CC27A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fond: #0E161B; --surface: #16222A; --surface-2: #1E2D36; --encre: #E8EEEC; --gris: #9DB0B7; --gris-clair: #6F838B; --ligne: #2A3A43;
  --accent-texte: #FF8B5E; --accent-doux: #3A2117; --vert: #4CC27A; --vert-doux: #15301F; --ambre: #E2A93E; --ambre-texte: #E2A93E; --ambre-doux: #33290F;
  --ardoise: #9EB6CA; --ardoise-doux: #1D2B36; --cyan: #4CC0DA; --cyan-doux: #10313A; --sos: #FF4D5E; --sos-doux: #3B141A; --etoile: #E8B23A;
  --violet: #B79CF5; --violet-doux: #291E42; --bande: #E8EEEC; --bande-texte: #15212A; --voile: rgba(0, 0, 0, .6);
  --ombre: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25); --ombre-forte: 0 -6px 30px rgba(0, 0, 0, .5);
  --carte-sol: #131E24; --carte-ilot: #18252D; --carte-rue: #2A3943; --carte-bord: #0E161B; --carte-artere: #4A3D1F; --carte-artere-bord: #6B5A2E;
  --carte-texte: #9DB0B7; --carte-mes-rues: #4CC27A;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fond); color: var(--encre); font-family: var(--f-texte); font-size: 16px; line-height: 1.4;
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; overflow: hidden; overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
button, a, [role="button"] { touch-action: manipulation; }   /* pas de zoom au double appui (gants, gestes rapides) */
h1, h2, h3, h4 { font-family: var(--f-titre); font-weight: 700; margin: 0; line-height: 1.15; letter-spacing: .005em; }
p { margin: 0; }
svg { display: block; }
a { color: var(--accent-texte); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }

/* ---------- le cadre : en-tête, bandeau, contenu, barre du bas, superpositions ---------- */
.app {
  position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--fond); color: var(--encre); container-type: inline-size; container-name: app;
  padding-top: env(safe-area-inset-top);
}
.entete {
  flex: none; height: var(--entete-h); display: flex; align-items: center; gap: 4px; padding: 0 6px 0 4px;
  background: var(--surface); border-bottom: 1px solid var(--ligne); position: relative; z-index: 2;
}
.app.sans-entete .entete { display: none; }
.entete-retour, .entete-bouton { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; border-radius: 12px; cursor: pointer; color: var(--encre); }
.entete-retour:active, .entete-bouton:active { background: var(--surface-2); }
.entete-retour svg { width: 26px; height: 26px; }
.entete-espace { width: 12px; flex: none; }
.entete-titre { flex: 1; min-width: 0; font-size: 22px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entete-droite { flex: none; display: flex; align-items: center; gap: 2px; }
.entete-synchro { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; min-width: 44px; padding: 0 8px; color: var(--vert); font-family: var(--f-titre); font-weight: 700; font-size: 15px; border: 0; background: transparent; border-radius: 12px; cursor: pointer; }
.entete-synchro svg { width: 22px; height: 22px; }
.entete-synchro.attente { color: var(--ambre); }
.zone-bandeau { flex: none; }
.contenu { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; position: relative; }
.contenu.contenu--fixe { overflow: hidden; }
.ecran { padding: 16px 16px 28px; display: flex; flex-direction: column; gap: 12px; min-height: 100%; overflow-wrap: anywhere; }
.ecran.ecran--sans-marges { padding: 0; gap: 0; }
.ecran.ecran--fixe { height: 100%; min-height: 0; }
.ecran.entre-avant { animation: entreAvant .2s ease-out; }
.ecran.entre-arriere { animation: entreArriere .2s ease-out; }
@keyframes entreAvant { from { opacity: .4; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes entreArriere { from { opacity: .4; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ecran.entre-avant, .ecran.entre-arriere { animation: none; } }

.barre { flex: none; display: flex; background: var(--surface); border-top: 1px solid var(--ligne); padding-bottom: env(safe-area-inset-bottom); position: relative; z-index: 2; }
.app.sans-barre .barre { display: none; }
.barre-item { flex: 1; min-width: 0; height: var(--barre-h); border: 0; background: transparent; cursor: pointer; color: var(--gris); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; position: relative; padding: 0 2px; }
.barre-item::before { content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 3px 3px; background: transparent; }
.barre-item.actif { color: var(--accent-texte); }
.barre-item.actif::before { background: var(--accent); }
.barre-icone { position: relative; width: 26px; height: 26px; }
.barre-icone svg { width: 26px; height: 26px; }
.barre-libelle { font-family: var(--f-titre); font-weight: 700; font-size: 13.5px; letter-spacing: .01em; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-pastille { position: absolute; top: -5px; right: -11px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--sur-accent); font-family: var(--f-titre); font-size: 12.5px; font-weight: 700; line-height: 19px; text-align: center; box-shadow: 0 0 0 2px var(--surface); }

.feuille-fond { position: absolute; inset: 0; background: var(--voile); opacity: 0; transition: opacity .2s; z-index: 20; }
.feuille-fond.ouvert { opacity: 1; }
.feuille { position: absolute; left: 0; right: 0; bottom: 0; z-index: 21; max-height: 88%; display: flex; flex-direction: column; background: var(--surface); border-radius: 22px 22px 0 0; box-shadow: var(--ombre-forte); transform: translateY(104%); transition: transform .22s ease-out; padding-bottom: env(safe-area-inset-bottom); }
.feuille.ouvert { transform: none; }
@media (prefers-reduced-motion: reduce) { .feuille, .feuille-fond { transition: none; } }
.feuille-poignee { width: 44px; height: 5px; border-radius: 3px; background: var(--ligne); margin: 8px auto 2px; flex: none; }
.feuille-entete { display: flex; align-items: center; gap: 8px; padding: 6px 8px 4px 18px; flex: none; }
.feuille-entete h2 { flex: 1; min-width: 0; font-size: 22px; }
.feuille-fermer { width: 44px; height: 44px; border: 0; background: transparent; border-radius: 12px; display: grid; place-items: center; cursor: pointer; color: var(--gris); }
.feuille-fermer svg { width: 22px; height: 22px; }
.feuille-corps { overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px 20px; display: flex; flex-direction: column; gap: 12px; overflow-wrap: anywhere; }
.feuille-corps > * { flex-shrink: 0; }

.toasts { position: absolute; left: 12px; right: 12px; bottom: calc(var(--barre-h) + 12px + env(safe-area-inset-bottom)); z-index: 30; pointer-events: none; display: flex; justify-content: center; }
.app.sans-barre .toasts { bottom: calc(16px + env(safe-area-inset-bottom)); }
.app.avec-feuille .toasts, .app.toasts-haut .toasts { bottom: auto; top: calc(12px + env(safe-area-inset-top)); }
.toast { pointer-events: auto; max-width: 100%; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 8px 8px 16px; background: #15212A; color: #F3F5F4; border-radius: 14px; box-shadow: 0 8px 28px rgba(0, 0, 0, .28); animation: toastEntre .2s ease-out; }
:root[data-theme="dark"] .toast { background: #E8EEEC; color: #15212A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .toast { background: #E8EEEC; color: #15212A; } }
.toast--succes { background: var(--vert) !important; color: #FFFFFF !important; }
.toast-texte { flex: 1; min-width: 0; font-weight: 600; font-size: 15.5px; }
.toast-action { flex: none; min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; cursor: pointer; background: rgba(255, 255, 255, .14); color: inherit; font-family: var(--f-titre); font-weight: 800; font-size: 16px; letter-spacing: .05em; text-transform: uppercase; }
@keyframes toastEntre { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.celebration { position: absolute; left: 0; right: 0; top: env(safe-area-inset-top); z-index: 25; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; background: #1D7440; color: #FFFFFF; font-family: var(--f-titre); font-weight: 800; font-size: 19px; letter-spacing: .02em; text-align: center; transform: translateY(-140%); transition: transform .25s ease-out; pointer-events: none; }
.celebration.visible { transform: none; }
.app.ecran-client .celebration { display: none; }
/* l'éclair plein écran : le retour visuel d'un tag, et la position arrivée après un tag (jamais la vibration seule) */
.eclair { position: absolute; inset: 0; z-index: 40; pointer-events: none; opacity: 0; }
.eclair.eclair--on { animation: eclair .34s ease-out; }
.eclair.eclair--fort { animation: eclairFort .9s ease-out; }
@keyframes eclair { 0% { opacity: .42; } 100% { opacity: 0; } }
@keyframes eclairFort { 0% { opacity: .85; } 60% { opacity: .6; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .eclair.eclair--on { animation-duration: .2s; } }

/* le démarrage (avant le routeur) */
.demarrage { display: grid; place-items: center; height: 100%; color: var(--gris); font-family: var(--f-titre); font-weight: 700; font-size: 20px; letter-spacing: .04em; }