/* Itinera — téléphone interactif de la page d'accueil.
   L'écran est dessiné à 360 × 760 px puis mis à l'échelle (demo.js) dans le cadre du téléphone.
   Couleurs reprises des thèmes « Clair » et « Sombre » de l'app (lib/theme.js) ;
   le thème se change dans le menu > Paramètres > Apparence (classe .sombre sur .ap). */

.demo-zone { display: grid; justify-items: center; gap: 14px; position: relative; min-width: 0; }
.demo-tel {
  position: relative; z-index: 2; width: min(330px, 82vw); aspect-ratio: 360 / 760;
  padding: 10px; background: #090c13; border-radius: 48px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 40px 80px -30px rgba(99,160,255,0.55);
  box-sizing: content-box;
}
.demo-ecran { position: relative; width: 100%; height: 100%; border-radius: 38px; overflow: hidden; background: #E8E4DE; cursor: auto; }
.demo-ecran > img { width: 100%; height: 100%; object-fit: cover; }
.demo-legende { font-size: 0.88rem; color: var(--nuit-doux); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; text-align: center; max-width: 30em; }
.demo-actions { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.demo-legende button { font: 600 0.88rem/1 var(--texte); color: var(--nuit-texte); background: var(--nuit-2); border: 1px solid var(--nuit-trait); border-radius: 999px; padding: 9px 15px; cursor: pointer; }
.demo-legende button:hover { border-color: var(--nuit-doux); }
.demo-zone .halo { z-index: 0; }

/* ---------- le téléphone en 3D (demo.js : rotation, côtés, lumière) ----------
   Face : le téléphone d'origine (cadre noir, écran interactif). Côtés : bande métal
   construite en facettes. Dos : verre sombre, bloc photo, les trois flèches d'Itinera. */
.tel3d { position: relative; z-index: 2; perspective: 1800px; touch-action: pan-y; cursor: grab; --ep: 28px; }
.tel3d.tourne { cursor: grabbing; }
.tel3d-scene { transform-style: preserve-3d; }
.tel3d-corps { position: relative; transform-style: preserve-3d; transform-origin: 50% 50% calc(var(--ep) / -2); }
.tel3d .demo-tel { -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); box-shadow: 0 0 0 1px rgba(255,255,255,0.08), inset 0 0 0 1px rgba(255,255,255,0.05); }
.tel3d-dos {
  position: absolute; inset: 0; border-radius: 48px; overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transform: translateZ(calc(var(--ep) * -1)) rotateY(180deg);
  background:
    radial-gradient(120% 70% at 22% 8%, rgba(120,150,210,0.16), transparent 60%),
    radial-gradient(90% 60% at 80% 100%, rgba(99,160,255,0.10), transparent 70%),
    linear-gradient(160deg, #1a2130 0%, #0d121b 45%, #07090e 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), inset 0 0 0 6px #0a0d14, inset 0 0 0 7px rgba(255,255,255,0.04);
}
.tel3d-photo {
  position: absolute; left: 9%; top: 3.6%; width: 34%; aspect-ratio: 2.15 / 1; border-radius: 999px;
  display: flex; align-items: center; gap: 7%; padding: 0 6%;
  background: linear-gradient(180deg, #202838, #0b0f17);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10), inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 18px -6px rgba(0,0,0,0.8);
}
.tel3d-photo i {
  width: 36%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, rgba(160,190,255,0.55) 0 8%, transparent 20%),
              radial-gradient(circle, #05070b 0 42%, #1b2332 46% 58%, #0a0e15 62% 70%, #39445a 74% 78%, #0b0f17 82%);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10);
}
.tel3d-photo b { width: 10%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff6dc, #b9a77a 70%); opacity: 0.85; margin-left: 2%; }
.tel3d-logo { position: absolute; left: 50%; top: 40%; width: 30%; height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 6px 14px rgba(0,0,0,0.5)); }
.tel3d-nom { position: absolute; left: 0; right: 0; bottom: 7%; text-align: center; font: 500 0.72rem/1 var(--mono); letter-spacing: 0.42em; text-transform: uppercase; color: rgba(238,242,250,0.38); padding-left: 0.42em; }
.tel3d-reflet {
  position: absolute; inset: 10px; border-radius: 38px; pointer-events: none; z-index: 5;
  background: linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,0.22) 47%, rgba(255,255,255,0.05) 53%, transparent 62%);
  background-size: 260% 100%; background-position: var(--rx-reflet, 50%) 0; opacity: var(--reflet, 0);
}
.tel3d-dos .tel3d-reflet { inset: 0; border-radius: 48px; }
/* bande métal (facettes générées par demo.js) */
.tel3d-cote { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; pointer-events: auto; }
.tel3d-cote i { position: absolute; left: 22%; width: 56%; border-radius: 3px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* ombre au sol : suit la rotation */
.tel3d-ombre {
  position: absolute; left: 50%; bottom: -26px; width: 78%; height: 46px; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(99,160,255,0.55), rgba(99,160,255,0.18) 55%, transparent);
  transform: translateX(-50%) scaleX(var(--ombre-l, 1)); filter: blur(10px);
}
@media (prefers-reduced-motion: no-preference) {
  .tel3d-scene { animation: tel3d-flotte 7s ease-in-out infinite; }
  .tel3d:hover .tel3d-scene, .tel3d.tourne .tel3d-scene { animation-play-state: paused; }
}
@keyframes tel3d-flotte { 50% { transform: translateY(-7px); } }

/* ---------- l'app (360 × 760, mise à l'échelle) ---------- */
.ap {
  /* thème actuel de l'app « Verre graphite » (lib/theme.js) : panneaux en verre fumé sur la carte 3D de jour, boutons blanc nacré */
  --t-bg: #121417; --t-surface: #1c1e22; --t-text: #f6f6f7; --t-sec: #a8acb4; --t-soft: #d4d6db;
  --t-border: rgba(255,255,255,0.17); --t-accent: #f3f3f5; --t-solid: #f3f3f5; --t-on-solid: #16181c; --t-accent-bg: rgba(255,255,255,0.12);
  --t-success: #9fc8ff; --t-success-bg: rgba(159,200,255,0.14); --t-danger: #e5534b; --t-danger-bg: rgba(229,83,75,0.18);
  --t-warning: #fbbf24; --t-warning-bg: rgba(245,197,66,0.1); --t-verre: rgba(48,51,57,0.86); --t-sheet: rgb(32,34,39);
  --t-verre-bord: rgba(255,255,255,0.17); --t-flottant: rgba(32,34,39,0.95); --t-doux: rgba(255,255,255,0.07);
  --t-poignee: rgba(255,255,255,0.25); --t-off: #3A4150; --t-bulle: rgba(28,30,34,0.86);
  --c-fond: #ECEAE6; --c-fait: #8a8e96;
  --c-ilot: #DDD8D0; --c-parc: #D6E3C9; --c-eau: #C9DDE8; --c-rue-bord: #D3CDC3; --c-rue: #FFFFFF;
  --c-auto-bord: #D99A1A; --c-auto: #F0B429; --c-txt: #6B7482;
  --c-bati: #D3CDC3; --c-allee: rgba(255,255,255,0.55); --c-tour: #4B5566; --c-eau-t: #5F8DB0; --c-parc-t: #5F8250;
  --c-tour-clair: #A88B6C; --c-tour-ombre: #745D47; --c-tour-trait: #4A3B2C; --c-tour-haut: #CDB396; --c-tour-hach: rgba(255,255,255,0.24);
  --c-tour-trou: rgba(45,32,20,0.38); --c-ombre-sol: rgba(60,45,30,0.16); --c-halo: rgba(240,181,74,0);
  position: absolute; left: 0; top: 0; width: 360px; height: 760px; transform-origin: 0 0;
  font: 400 14px/1.35 "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--t-text);
  overflow: hidden; user-select: none; -webkit-user-select: none; background: var(--t-bg);
}
/* thème Sombre de l'app (lib/theme.js, DARK) */
.ap.sombre {
  /* thème actuel de l'app « Verre graphite » (lib/theme.js) : panneaux en verre fumé sur la carte 3D de jour, boutons blanc nacré */
  --t-bg: #121417; --t-surface: #1c1e22; --t-text: #f6f6f7; --t-sec: #a8acb4; --t-soft: #d4d6db;
  --t-border: rgba(255,255,255,0.17); --t-accent: #f3f3f5; --t-solid: #f3f3f5; --t-on-solid: #16181c; --t-accent-bg: rgba(255,255,255,0.12);
  --t-success: #9fc8ff; --t-success-bg: rgba(159,200,255,0.14); --t-danger: #e5534b; --t-danger-bg: rgba(229,83,75,0.18);
  --t-warning: #fbbf24; --t-warning-bg: rgba(245,197,66,0.1); --t-verre: rgba(48,51,57,0.86); --t-sheet: rgb(32,34,39);
  --t-verre-bord: rgba(255,255,255,0.17); --t-flottant: rgba(32,34,39,0.95); --t-doux: rgba(255,255,255,0.07);
  --t-poignee: rgba(255,255,255,0.25); --t-off: #3A4150; --t-bulle: rgba(28,30,34,0.86);
  --c-fond: #ECEAE6; --c-fait: #8a8e96;
  --c-ilot: #181D26; --c-parc: #172118; --c-eau: #101E2A; --c-rue-bord: #0E1117; --c-rue: #2C323E;
  --c-auto-bord: #2E2A20; --c-auto: #4A4230; --c-txt: #8B93A3;
  --c-bati: #232A36; --c-allee: rgba(255,255,255,0.06); --c-tour: #AEB7C6; --c-eau-t: #5584A8; --c-parc-t: #6C8F62;
  --c-tour-clair: #F2B84D; --c-tour-ombre: #BC842E; --c-tour-trait: #7A4E14; --c-tour-haut: #FFDC8F; --c-tour-hach: rgba(255,244,210,0.38);
  --c-tour-trou: rgba(25,14,0,0.5); --c-ombre-sol: rgba(0,0,0,0.3); --c-halo: rgba(240,181,74,0.3);
}
.ap * { box-sizing: border-box; }
:where(.ap button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
.ap button:focus-visible, .ap input:focus-visible { outline: 3px solid #63a0ff; outline-offset: 2px; }
.ap svg { display: block; flex: none; }
.ap .m { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-weight: 500; font-variant-numeric: tabular-nums; }
.ap [hidden] { display: none !important; }
.ap input { user-select: text; -webkit-user-select: text; }

/* barre d'état */
.ap-sb { position: absolute; top: 0; left: 0; right: 0; height: 34px; padding: 10px 26px 0; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; z-index: 60; pointer-events: none; }
.ap-sb.clair { color: #fff; }
.ap-sb { color: #16181c; } /* heure et batterie lisibles sur la carte 3D de jour */
.ap-sb .ic { display: flex; gap: 5px; align-items: center; }

/* carte */
.ap-carte { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; cursor: grab; }
.ap-carte:active { cursor: grabbing; }
.ap-monde { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; --inv: 1; }
.ap-carte svg.fond { position: absolute; display: block; }
.c-fond { fill: var(--c-fond); } .c-ilot { fill: var(--c-ilot); } .c-parc { fill: var(--c-parc); } .c-eau { stroke: var(--c-eau); }
.c-rue-bord { stroke: var(--c-rue-bord); } .c-rue { stroke: var(--c-rue); } .c-auto-bord { stroke: var(--c-auto-bord); } .c-auto { stroke: var(--c-auto); }
.c-txt { fill: var(--c-txt); } .c-fait { stroke: var(--c-fait); }
.c-eau-f { fill: var(--c-eau); } .c-marge { stroke: var(--c-fond); } .c-bati { fill: var(--c-bati); } .c-bati-t { stroke: var(--c-bati); }
.c-allee { stroke: var(--c-allee); } .c-tour { stroke: var(--c-tour); } .c-txt .c-txt-fort { fill: var(--t-text); }
.c-txt .c-eau-t { fill: var(--c-eau-t); } .c-txt .c-parc-t, .c-parc-t { fill: var(--c-parc-t); }
.c-tour-clair { fill: var(--c-tour-clair); } .c-tour-ombre { fill: var(--c-tour-ombre); } .c-tour-haut { fill: var(--c-tour-haut); }
.c-tour-trait { stroke: var(--c-tour-trait); } .c-tour-arete { stroke: var(--c-tour-trait); opacity: .55; } .c-tour-hach { stroke: var(--c-tour-hach); fill: none; }
.c-tour-trou { fill: var(--c-tour-trou); } .c-ombre-sol { fill: var(--c-ombre-sol); } .c-tour-feu { fill: var(--c-tour-trait); }
.c-halo-0 { stop-color: var(--c-halo); } .c-halo-1 { stop-color: var(--c-halo); stop-opacity: 0; }
.ap.sombre .c-tour-feu { fill: #fff6d6; animation: ap-feu 2.4s ease-in-out infinite; }
@keyframes ap-feu { 50% { opacity: .25; } }
.c-txt-rue { fill: var(--c-txt); stroke: var(--c-rue); stroke-width: 2.4px; paint-order: stroke; stroke-linejoin: round; }
.c-ilot, .c-parc, .c-txt, .c-allee, .c-bati, .c-bati-t { transition: opacity .3s; }
.ap.epure .c-ilot, .ap.epure .c-parc, .ap.epure .c-txt, .ap.epure .c-allee, .ap.epure .c-bati, .ap.epure .c-bati-t { opacity: 0; }
.ap-pions { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.ap-pion, .ap-marq, .ap-poi { position: absolute; width: 0; height: 0; transform: scale(var(--inv)); transform-origin: 0 0; }
.ap-pion .rond { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; box-shadow: 0 4px 10px rgba(31,38,52,0.25); }
.ap-pion .pil { position: absolute; left: 18px; top: -12px; white-space: nowrap; background: var(--t-flottant); border-radius: 12px; padding: 3px 8px; font-size: 11px; font-weight: 600; box-shadow: 0 3px 10px rgba(31,38,52,0.15); }
.ap-pion .pil span { color: var(--t-sec); font-weight: 400; }
.ap-moi .cone { position: absolute; left: -22px; top: -48px; width: 44px; height: 48px; background: linear-gradient(to top, rgba(37,99,235,0.35), rgba(37,99,235,0)); clip-path: polygon(50% 100%, 0 0, 100% 0); }
.ap-moi .puce { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(37,99,235,0.18), 0 4px 10px rgba(31,38,52,0.25); display: grid; place-items: center; }
.ap-marq .bulle-m { position: absolute; left: 0; bottom: 4px; transform: translateX(-50%); background: var(--t-flottant); border-radius: 12px; padding: 4px 8px; font-size: 11px; font-weight: 700; box-shadow: 0 3px 10px rgba(31,38,52,0.18); display: flex; align-items: center; gap: 4px; white-space: nowrap; }

/* commerces et arrivée sur la carte */
.ap-poi { pointer-events: auto; z-index: 2; }
.ap-poi .rond { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid #fff; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(31,38,52,0.28); transition: transform .2s; }
.ap-poi .nom { position: absolute; left: 18px; top: -10px; white-space: nowrap; background: var(--t-flottant); color: var(--t-text); border-radius: 10px; padding: 2px 8px; font-size: 11px; font-weight: 700; box-shadow: 0 3px 10px rgba(31,38,52,0.15); }
.ap-poi.choisi { z-index: 4; }
.ap-poi.choisi .rond { transform: scale(1.25); }
.ap-arrivee { z-index: 3; }
.ap-arrivee .rond { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%; background: #dc2626; border: 3px solid #fff; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(31,38,52,0.3); }
.ap-chip.on { background: var(--t-solid); border-color: var(--t-solid); color: var(--t-on-solid); }
.ap-sheet-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ap-liste-lieux { max-height: 118px; overflow-y: auto; margin-top: 2px; scrollbar-width: none; }
.ap-liste-lieux::-webkit-scrollbar { display: none; }
.ap-liste-lieux .ap-lieu { padding: 9px 0; }

/* éléments flottants (verre) */
.ap-verre { background: var(--t-verre); border: 1px solid var(--t-verre-bord); box-shadow: 0 8px 22px rgba(31,38,52,0.12); }
.ap-recherche { position: absolute; left: 14px; right: 72px; top: 40px; height: 52px; border-radius: 26px; display: flex; align-items: center; gap: 10px; padding: 0 16px; color: var(--t-sec); font-size: 14px; white-space: nowrap; overflow: hidden; }
.ap-recherche img { width: 24px; height: 24px; border-radius: 6px; }
.ap-rond { width: 52px; height: 52px; border-radius: 26px; display: grid; place-items: center; }
.ap-burger { position: absolute; right: 14px; top: 40px; }
.ap-chips { position: absolute; left: 14px; right: 0; top: 102px; display: flex; gap: 8px; overflow: hidden; }
.ap-chip { height: 40px; border-radius: 20px; padding: 0 14px; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; white-space: nowrap; }
.ap-badge-pos { position: absolute; right: 14px; top: 152px; height: 34px; border-radius: 17px; padding: 0 12px; display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12px; }
.ap-fabs { position: absolute; right: 14px; bottom: 214px; display: grid; gap: 12px; }
.ap-fabs.nav { bottom: 196px; }
.ap-vitesse { position: absolute; left: 14px; bottom: 214px; width: 70px; height: 70px; border-radius: 35px; display: grid; place-items: center; text-align: center; background: var(--t-verre); box-shadow: 0 10px 26px rgba(31,38,52,0.16); }
.ap-vitesse.nav { bottom: 196px; }
.ap-vitesse b { font-family: "JetBrains Mono", monospace; font-size: 22px; line-height: 1; display: block; }
.ap-vitesse small { font-size: 10px; color: var(--t-sec); font-weight: 600; }
.ap-fab-actif { background: var(--t-solid) !important; color: var(--t-on-solid); }
.ap-point-rouge { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; border-radius: 6px; background: #dc2626; border: 2px solid #fff; }

/* panneau du bas */
.ap-sheet { position: absolute; left: 10px; right: 10px; bottom: 10px; border-radius: 22px; background: var(--t-sheet); box-shadow: 0 -12px 40px rgba(31,38,52,0.14); padding: 10px 18px 18px; }
.ap-poignee { width: 40px; height: 5px; border-radius: 3px; background: var(--t-poignee); margin: 0 auto 12px; }
.ap-sheet h4 { margin: 0; font-size: 17px; font-weight: 700; }
.ap-ligne { display: flex; align-items: center; gap: 6px; color: var(--t-soft); font-size: 13px; margin-top: 8px; }
.ap-sec { color: var(--t-sec); }
.ap-eta { font-family: "JetBrains Mono", monospace; font-weight: 500; color: var(--t-success); font-size: 30px; line-height: 1; letter-spacing: -0.5px; }
.ap-eta-ligne { display: flex; align-items: baseline; gap: 10px; }
.ap-eta-ligne .m { color: var(--t-sec); font-size: 13px; }
.ap-stop { position: absolute; right: 16px; top: 18px; width: 54px; height: 54px; border-radius: 27px; background: var(--t-danger-bg); border: 1px solid rgba(220,38,38,0.35); color: var(--t-danger); display: grid; place-items: center; }
.ap-boutons { display: flex; gap: 8px; margin-top: 12px; }
.ap-voile { flex: 1; height: 40px; border-radius: 20px; background: var(--t-doux); display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; font-size: 12px; white-space: nowrap; padding: 0 8px; }

/* bandeau de guidage */
.ap-guidage { position: absolute; left: 12px; right: 74px; top: 40px; min-height: 76px; border-radius: 22px; background: rgba(32,34,39,0.95); color: #fff; border: 1px solid var(--t-verre-bord); display: flex; align-items: center; gap: 12px; padding: 12px 16px; box-shadow: 0 10px 24px rgba(37,99,235,0.35); }
.ap-guidage .dist { font-family: "JetBrains Mono", monospace; font-weight: 500; font-size: 22px; white-space: nowrap; }
.ap-guidage .instr { font-weight: 700; font-size: 15px; line-height: 1.25; }
.ap-pilule { position: absolute; left: 50%; transform: translateX(-50%); top: 126px; height: 34px; border-radius: 17px; padding: 0 14px; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ap-pilule span { color: var(--t-sec); font-weight: 400; }

/* bandeaux et toasts */
.ap-toast { position: absolute; left: 16px; right: 16px; top: 40px; z-index: 80; border-radius: 18px; padding: 12px 14px; display: flex; gap: 10px; align-items: center; background: var(--t-flottant); box-shadow: 0 12px 30px rgba(31,38,52,0.2); transform: translateY(-180px); opacity: 0; transition: transform .35s ease, opacity .2s; font-size: 13px; }
.ap-toast.vu { transform: translateY(0); opacity: 1; }
.ap-toast b { display: block; font-size: 14px; }
.ap-toast .pastille { width: 34px; height: 34px; border-radius: 17px; display: grid; place-items: center; background: var(--t-accent-bg); color: var(--t-accent); flex: none; }
.ap-bandeau-pause { position: absolute; left: 12px; right: 12px; top: 124px; border-radius: 18px; padding: 10px 14px; background: var(--t-flottant); box-shadow: 0 8px 22px rgba(31,38,52,0.15); display: flex; align-items: center; gap: 10px; }
.ap-bandeau-pause > span:nth-child(2) { flex: 1; min-width: 0; }
.ap-bandeau-pause .lib { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--t-warning); white-space: nowrap; }
.ap-bandeau-pause .txt { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-bandeau-pause .m { font-size: 20px; }
.ap-appel { position: absolute; left: 12px; right: 12px; top: 192px; border-radius: 18px; padding: 10px 12px; background: var(--t-flottant); box-shadow: 0 8px 22px rgba(31,38,52,0.15); display: flex; align-items: center; gap: 8px; font-size: 12px; }
.ap-appel .av { width: 30px; height: 30px; border-radius: 15px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; }
.ap-appel .av.parle { box-shadow: 0 0 0 3px var(--t-surface), 0 0 0 5px var(--t-success); }

/* feuilles modales sur la carte */
.ap-voile-noir { position: absolute; inset: 0; background: rgba(0,0,0,0.3); z-index: 40; }
.ap-modale { position: absolute; left: 0; right: 0; bottom: 0; z-index: 41; background: var(--t-surface); border-radius: 22px 22px 0 0; padding: 12px 18px 22px; box-shadow: 0 -12px 40px rgba(31,38,52,0.18); }
.ap-modale h4 { margin: 4px 0 2px; font-size: 18px; font-weight: 800; }
.ap-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.ap-case { border-radius: 16px; background: var(--t-bg); padding: 14px 6px; display: grid; justify-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
.ap-case .ico { width: 44px; height: 44px; border-radius: 22px; display: grid; place-items: center; background: var(--t-surface); }
.ap-choix { display: flex; gap: 8px; margin-top: 10px; }
.ap-choix button { flex: 1; height: 40px; border-radius: 20px; border: 1.5px solid var(--t-border); font-weight: 700; display: grid; place-items: center; }
.ap-choix button.on { border-color: var(--t-solid); background: var(--t-accent-bg); color: var(--t-accent); }
.ap-lieu { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--t-border); width: 100%; }
.ap-lieu .ico { width: 38px; height: 38px; border-radius: 19px; background: var(--t-bg); display: grid; place-items: center; flex: none; }
.ap-lieu b { display: block; font-size: 14px; }
.ap-lieu small { color: var(--t-sec); font-size: 12px; }
.ap-lieu.on { background: var(--t-accent-bg); border-radius: 14px; padding-inline: 8px; }

/* boutons pleins */
.ap-plein { width: 100%; height: 52px; border-radius: 26px; background: var(--t-solid); color: var(--t-on-solid) !important; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; }
.ap-plein.vert { background: var(--t-success); }
.ap-plein[disabled] { opacity: 0.45; }
.ap-contour { width: 100%; height: 48px; border-radius: 24px; border: 1.5px solid var(--t-border); font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; background: var(--t-surface); }

/* pages pleines */
.ap-page { position: absolute; inset: 0; z-index: 30; background: var(--t-bg); display: flex; flex-direction: column; }
.ap-tete { padding: 42px 16px 10px; display: flex; align-items: center; gap: 10px; }
.ap-tete h3 { margin: 0; font-size: 20px; font-weight: 800; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-tete .sous { font-size: 12px; color: var(--t-sec); font-weight: 400; display: block; }
.ap-retour { width: 44px; height: 44px; border-radius: 22px; background: var(--t-surface); border: 1px solid var(--t-border); display: grid; place-items: center; flex: none; }
.ap-corps { flex: 1; overflow-y: auto; padding: 4px 16px 20px; scrollbar-width: none; }
.ap-corps::-webkit-scrollbar { display: none; }
.ap-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--t-sec); margin: 16px 2px 8px; }
.ap-carte-b { background: var(--t-surface); border: 1px solid var(--t-border); border-radius: 18px; }
.ap-carte-b + .ap-carte-b { margin-top: 10px; }
.ap-rang { display: flex; align-items: center; gap: 12px; padding: 13px 14px; width: 100%; }
.ap-rang + .ap-rang { border-top: 1px solid var(--t-border); }
.ap-rang .t { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; }
.ap-rang .t small { display: block; font-weight: 400; font-size: 12px; color: var(--t-sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-av { width: 40px; height: 40px; border-radius: 20px; display: grid; place-items: center; color: #fff; font-weight: 700; flex: none; position: relative; }
.ap-av .en-ligne { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 6px; background: var(--t-success); border: 2px solid var(--t-surface); }
.ap-badge { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: var(--t-solid); color: var(--t-on-solid); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.ap-champ { height: 48px; border-radius: 14px; background: var(--t-surface); border: 1px solid var(--t-border); display: flex; align-items: center; gap: 10px; padding: 0 14px; width: 100%; }
.ap-champ input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 14px "Sora", sans-serif; color: var(--t-text); }
.ap-champ input::placeholder { color: var(--t-sec); }

/* menu (tiroir à droite) */
.ap-tiroir { position: absolute; top: 0; right: 0; bottom: 0; width: 300px; z-index: 41; background: var(--t-surface); border-left: 1px solid var(--t-border); transform: translateX(100%); transition: transform .28s ease; display: flex; flex-direction: column; }
.ap-tiroir.ouvert { transform: translateX(0); }
.ap-tiroir .ap-corps { padding: 40px 16px 18px; }
.ap-menu-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.ap-menu-tete b { font-size: 20px; font-weight: 800; }
.ap-groupe { background: var(--t-bg); border: 1px solid var(--t-border); border-radius: 18px; margin-bottom: 14px; }
.ap-groupe .ap-rang { padding: 13px 14px; }
.ap-groupe .ap-rang .t { font-size: 14px; }
.ap-interrupteur { width: 44px; height: 26px; border-radius: 13px; background: var(--t-success); position: relative; flex: none; }
.ap-interrupteur::after { content: ""; position: absolute; top: 3px; left: 21px; width: 20px; height: 20px; border-radius: 10px; background: #fff; transition: left .2s; }
.ap-interrupteur.off { background: var(--t-off); }
.ap-interrupteur.off::after { left: 3px; }

/* lobby */
.ap-lobby-tete { position: absolute; left: 12px; right: 12px; top: 40px; border-radius: 20px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.ap-lobby-tete .t { flex: 1; min-width: 0; }
.ap-lobby-tete .t b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-lobby-tete .t small { color: var(--t-sec); font-size: 12px; }
.ap-membres { display: flex; gap: 8px; margin-top: 12px; }
.ap-membre { flex: 1; background: var(--t-bg); border-radius: 14px; padding: 8px; display: grid; justify-items: center; gap: 4px; font-size: 12px; font-weight: 600; min-width: 0; }
.ap-membre.attente { opacity: 0.45; }
.ap-membre .ap-av { width: 34px; height: 34px; font-size: 13px; }
.ap-code { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 10px 14px; border-radius: 14px; background: var(--t-doux); }
.ap-code small { display: block; font-size: 11px; color: var(--t-sec); font-weight: 600; }
.ap-code .m { font-size: 22px; letter-spacing: 2px; font-weight: 700; }
.ap-itin { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--t-success-bg); }

/* chat */
.ap-membres-chat { display: flex; gap: 8px; overflow: hidden; padding: 0 16px 8px; }
.ap-mc { background: var(--t-surface); border: 1px solid var(--t-border); border-radius: 14px; padding: 8px 10px; min-width: 104px; font-size: 13px; }
.ap-mc b { display: flex; align-items: center; gap: 6px; }
.ap-mc .pt { width: 8px; height: 8px; border-radius: 4px; }
.ap-mc .m { color: var(--t-sec); font-size: 11px; }
.ap-fil { display: grid; gap: 8px; align-content: start; }
.ap-msg { max-width: 76%; justify-self: start; background: var(--t-bulle); border-radius: 16px 16px 16px 4px; padding: 7px 11px; font-size: 13px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.ap-msg i { display: block; font-style: normal; font-size: 11px; font-weight: 700; margin-bottom: 2px; }
.ap-msg.moi { justify-self: end; background: rgba(37,99,235,0.92); color: #fff; border-radius: 16px 16px 4px 16px; }
.ap-msg.sys { justify-self: center; background: var(--t-doux); color: var(--t-sec); font-size: 11px; border-radius: 10px; box-shadow: none; }
.ap-rapides { display: flex; gap: 6px; overflow-x: auto; padding: 8px 16px 0; scrollbar-width: none; }
.ap-rapides::-webkit-scrollbar { display: none; }
.ap-rapides button { height: 34px; border-radius: 17px; padding: 0 12px; background: var(--t-surface); border: 1px solid var(--t-border); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ap-saisie { display: flex; gap: 8px; padding: 8px 16px 18px; }
.ap-saisie .ap-champ { border-radius: 24px; }
.ap-envoyer { width: 48px; height: 48px; border-radius: 24px; background: var(--t-solid); color: var(--t-on-solid); display: grid; place-items: center; flex: none; }

/* covoiturage / premium */
.ap-trajet { padding: 14px; }
.ap-trajet .haut { display: flex; align-items: center; gap: 10px; }
.ap-trajet .heures { margin-top: 10px; display: grid; gap: 4px; font-size: 13px; }
.ap-trajet .heures .m { display: inline-block; width: 50px; }
.ap-trajet .bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 10px; }
.ap-trajet .bas .heures { margin-top: 0; }
.ap-trajet .prix { text-align: right; }
.ap-trajet .prix .m { display: block; font-size: 20px; font-weight: 700; }
.ap-trajet .prix small { color: var(--t-sec); font-size: 12px; }
.ap-prem-tete { text-align: center; padding: 6px 4px 4px; }
.ap-couronne { width: 64px; height: 64px; border-radius: 32px; margin: 0 auto 10px; display: grid; place-items: center; background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; }
.ap-prem-tete h4 { margin: 0; font-size: 22px; font-weight: 800; }
.ap-prem-tete p { margin: 6px 0 0; color: var(--t-sec); font-size: 12.5px; }
.ap-avantage { display: flex; gap: 12px; padding: 12px 14px; }
.ap-avantage + .ap-avantage { border-top: 1px solid var(--t-border); }
.ap-avantage b { display: block; font-size: 14px; }
.ap-avantage small { color: var(--t-sec); font-size: 12px; }
.ap-offres { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.ap-offre { border: 2px solid var(--t-border); border-radius: 16px; padding: 12px; background: var(--t-surface); text-align: left; }
.ap-offre.on { border-color: var(--t-solid); }
.ap-offre .m { font-size: 18px; display: block; }
.ap-offre small { color: var(--t-sec); font-size: 11px; }
.ap-cadeau { font-size: 10px; font-weight: 700; color: var(--t-success); display: block; margin-bottom: 4px; }

/* profil / paramètres */
.ap-pad { padding: 4px 14px 14px; }
.ap-identite { display: flex; align-items: center; gap: 14px; padding: 6px 2px 2px; }
.ap-identite .t { min-width: 0; }
.ap-identite b { display: block; font-size: 19px; font-weight: 800; }
.ap-identite small { display: block; color: var(--t-sec); font-size: 12.5px; }
.ap-chp { display: block; flex: 1; min-width: 0; margin-top: 12px; }
.ap-chp .lib { display: block; font-size: 12px; font-weight: 600; color: var(--t-sec); margin-bottom: 6px; }
.ap-chp .note { display: block; font-size: 11px; color: var(--t-sec); margin-top: 6px; }
.ap-champ.dans { background: var(--t-bg); height: 44px; border-radius: 12px; }
.ap-mini { flex: none; height: 44px; padding: 0 14px; border-radius: 12px; background: var(--t-solid) !important; color: var(--t-on-solid) !important; font-weight: 700; font-size: 13px; }
.ap-lien { display: flex; align-items: center; gap: 4px; margin-top: 12px; color: var(--t-accent) !important; font-weight: 600; font-size: 13px; }
.ap-types { display: flex; gap: 8px; margin-top: 12px; }
.ap-types button { flex: 1; height: 48px; border-radius: 14px; background: var(--t-bg) !important; border: 1px solid var(--t-border) !important; display: grid; place-items: center; }
.ap-types button.on { background: var(--t-solid) !important; border-color: var(--t-solid) !important; }
.ap-places { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.ap-places .t { flex: 1; min-width: 0; }
.ap-places b { display: block; font-size: 14px; }
.ap-places small { display: block; font-size: 11px; color: var(--t-sec); }
.ap-pas { display: flex; align-items: center; gap: 10px; }
.ap-pas button { width: 36px; height: 36px; border-radius: 18px; background: var(--t-accent-bg) !important; color: var(--t-accent) !important; font-size: 20px; font-weight: 700; display: grid; place-items: center; }
.ap-pas button[disabled] { opacity: 0.35; }
.ap-pas .m { font-size: 18px; min-width: 16px; text-align: center; }
.ap-segment { display: flex; gap: 6px; padding: 6px; border-radius: 18px; background: var(--t-surface); border: 1px solid var(--t-border); }
.ap-segment button { flex: 1; height: 44px; border-radius: 13px; font-weight: 600; font-size: 15px; color: var(--t-soft) !important; text-align: center !important; }
.ap-segment button.on { background: var(--t-solid) !important; color: var(--t-on-solid) !important; font-weight: 700; }

/* indice de départ */
.ap-indice { position: absolute; right: 8px; top: 100px; z-index: 50; background: #121826; color: #fff; font-size: 12px; font-weight: 600; padding: 8px 12px; border-radius: 12px; white-space: nowrap; animation: ap-indice 1.6s ease-in-out infinite; pointer-events: none; }
.ap-indice::after { content: ""; position: absolute; right: 26px; top: -6px; border: 6px solid transparent; border-top: 0; border-bottom-color: #121826; }
@keyframes ap-indice { 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .ap-indice, .ap.sombre .c-tour-feu { animation: none; }
  .ap-toast, .ap-tiroir, .ap-interrupteur::after { transition: none; }
}
/* carte 3D de jour (rendu de l'app) : en « Épurée », on l'adoucit pour que la route ressorte */
.c-rendu3d { transition: filter .3s, opacity .3s; }
.ap.epure .c-rendu3d { filter: saturate(.35) brightness(1.06); opacity: .85; }
.demo-credit { display: block; opacity: .6; font-size: 11px; margin-top: 2px; }