/* ============ Sor-sõngo — style ============ */ :root { --bg: #f6f5f2; --card: #ffffff; --text: #1f2937; --text-soft: #6b7280; --border: #d4d0c7; --border-strong: rgba(0, 0, 0, 0.18); --accent: #1f7a5c; --accent-hi: #27946f; --accent-glow: rgba(31, 122, 92, .30); --accent-soft: #e3f0ea; --warn: #c99700; --warn-hi: #ddad1a; --warn-glow: rgba(201, 151, 0, .30); --danger: #d64545; --danger-soft: #fdecec; /* Vert d'etat « tout va bien » : deja utilise par la pastille de zone et par l'icone du micro quand il ecoute. Il n'avait jamais ete defini, seule la valeur de repli s'appliquait — donc identique dans les deux themes. Ici, plus sombre sur fond clair, plus lumineux sur fond sombre. */ --ok: #17954b; --track: #ecebe7; --shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 20px rgba(0, 0, 0, .06); --radius: 18px; /* Couleurs du Burkina Faso */ --bf-red: #d9534a; --bf-yellow: #e8b40c; --bf-green: #2e8b63; } /* Thème sombre : choisi manuellement… */ :root[data-theme="dark"] { --bg: #17191c; --card: #1f2226; --text: #eceef0; --text-soft: #9aa1a9; --border: #2c3036; --border-strong: rgba(255, 255, 255, 0.35); --accent: #3da884; --accent-hi: #4cc09a; --accent-glow: rgba(61, 168, 132, .28); --accent-soft: #21332c; --warn: #e0b93c; --warn-hi: #ecc95d; --warn-glow: rgba(224, 185, 60, .25); --danger: #e05c5c; --danger-soft: #3a2426; --ok: #2fb45f; --track: #2a2e33; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25); } /* …ou suivant le réglage du système */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #17191c; --card: #1f2226; --text: #eceef0; --text-soft: #9aa1a9; --border: #2c3036; --border-strong: rgba(255, 255, 255, 0.35); --accent: #3da884; --accent-hi: #4cc09a; --accent-glow: rgba(61, 168, 132, .28); --accent-soft: #21332c; --warn: #e0b93c; --warn-hi: #ecc95d; --warn-glow: rgba(224, 185, 60, .25); --danger: #e05c5c; --danger-soft: #3a2426; --ok: #2fb45f; --track: #2a2e33; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25); } } * { box-sizing: border-box; } /* L'attribut hidden ne masque pas les éléments SVG par défaut */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; } /* Le débordement horizontal est coupé sur , jamais sur . La nuance a l'air anodine, elle ne l'est pas : « overflow-x » sur body en fait un conteneur de défilement, et un enfant « position: sticky; top: 0 » se colle alors au bord haut de sa boîte de rembourrage — donc SOUS le padding d'encoche ci-dessous. Sur le web l'encoche vaut 0 et rien ne se voit ; dans l'application, le ruban descend de la hauteur de la barre d'état et le contenu défile dans la bande ainsi libérée au-dessus de lui. Posé sur , le clipping remonte au viewport et les rubans se collent bien en haut de l'écran. */ html { overflow-x: hidden; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); min-height: 100dvh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); transition: background-color .4s, color .4s; -webkit-tap-highlight-color: transparent; /* Aspect application : le texte n'est pas sélectionnable */ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* Les champs de saisie et le lien de partage restent utilisables normalement */ input, textarea, .modal-code { -webkit-user-select: text; user-select: text; } /* Flash visuel pendant l'alarme : voile rouge plein écran, intensité réglable dans les Paramètres (--flash-max) */ body.alerting::after { content: ""; position: fixed; inset: 0; background: var(--danger); opacity: 0; pointer-events: none; z-index: 40; animation: flash-overlay 1s ease-in-out infinite; } @keyframes flash-overlay { 0%, 100% { opacity: 0; } 50% { opacity: var(--flash-max, .5); } } /* Aperçu fixe pendant le réglage du curseur d'intensité */ body.flash-preview::after { content: ""; position: fixed; inset: 0; background: var(--danger); opacity: var(--flash-max, .5); pointer-events: none; z-index: 40; transition: opacity .1s; } /* ---------- View Transitions & Fluid Page Fade ---------- */ @view-transition { navigation: auto; } main { animation: pageFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes pageFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .topbar { display: flex; align-items: center; justify-content: space-between; max-width: 480px; margin: 0 auto; padding: 10px 20px 0; width: 100%; } .topbar-subhead { display: flex; align-items: center; gap: 12px; flex: 1; } .topbar-subhead .back-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--text); text-decoration: none; box-shadow: var(--shadow); flex-shrink: 0; transition: transform .12s, border-color .2s; } .topbar-subhead .back-btn:active { transform: scale(0.92); } .topbar-subhead .page-title-box { display: flex; flex-direction: column; gap: 1px; } .topbar-subhead h1 { font-size: 1.05rem; font-weight: 700; margin: 0; line-height: 1.2; } .topbar-subhead p { font-size: 0.76rem; color: var(--text-soft); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; } .brand { display: flex; align-items: center; gap: 10px; } .brand-icon { width: 26px; height: 26px; color: var(--accent); } .brand-text { display: flex; flex-direction: column; gap: 4px; width: max-content; } .brand h1 { font-size: 1.15rem; font-weight: 700; margin: 0; letter-spacing: -.01em; line-height: 1; } /* Le drapeau du Burkina Faso souligne le titre : rouge en haut, étoile jaune, vert en bas */ .flag-underline { position: relative; display: block; width: 100%; height: 7px; border-radius: 3px; background: linear-gradient(180deg, #ef2b2d 0 50%, #009e49 50% 100%); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); } .flag-star { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .3)); } .topbar-actions { display: flex; gap: 8px; align-items: center; } /* Bouton d'installation : icône jaune (visible tant que l'app n'est pas installée) */ #btn-install, #btn-install:hover { color: var(--bf-yellow); } @media (display-mode: standalone) { #btn-install { display: none !important; } } .icon-btn { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); color: var(--text); cursor: pointer; box-shadow: var(--shadow); } .icon-btn svg { width: 21px; height: 21px; } .icon-btn { transition: border-color .2s, color .2s; } .icon-btn:hover { border-color: var(--accent); color: var(--accent); } .icon-btn:active { transform: scale(.95); } /* ---------- Mise en page ---------- */ main { max-width: 480px; margin: 0 auto; padding: 0 20px 18px; display: flex; flex-direction: column; gap: 12px; min-height: auto; justify-content: flex-start; } .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); transition: background-color .4s, border-color .4s; } /* ---------- Cadran ---------- */ .gauge-card { padding: 14px 18px 6px; } .card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .gauge-wrap { position: relative; max-width: 290px; margin: -4px auto 0; } .gauge { display: block; width: 100%; } .gauge-track, .gauge-progress { fill: none; stroke-width: 12; stroke-linecap: round; stroke-dasharray: 66.67 100; /* arc de 240° */ } .gauge-track { stroke: var(--track); } .gauge-progress { stroke: var(--bf-green); stroke-dasharray: 0 100; transition: stroke-dasharray .35s ease, stroke .3s; } /* L'arc passe au jaune à l'approche de la limite, au rouge au-delà */ .gauge-progress.warn { stroke: var(--bf-yellow); } .gauge-progress.over, body.alerting .gauge-progress { stroke: var(--danger); } .gauge-threshold { stroke: var(--danger); stroke-width: 4; stroke-linecap: round; opacity: .85; } /* Graduations du compteur */ .tick { stroke: var(--text-soft); stroke-width: 1; opacity: .5; } .tick-major { stroke-width: 1.6; opacity: .8; } .tick-label { fill: var(--text-soft); font-size: 9px; font-weight: 600; text-anchor: middle; dominant-baseline: middle; } /* --- Styles de cadran (5 variantes) --- */ /* 1. Minimal */ [data-gauge-style="minimal"] #gauge-ticks, [data-gauge-style="minimal"] .gauge-threshold { display: none !important; } /* 2. Classique (Défaut) */ [data-gauge-style="classique"] .gauge-track { stroke: var(--track); stroke-width: 12; } /* 3. Sport (Zones colorées & graduation accentuée) */ [data-gauge-style="sport"] .gauge-track { stroke: var(--track); stroke-width: 14; } [data-gauge-style="sport"] .gauge-progress { stroke-width: 14; } [data-gauge-style="sport"] .tick-major { stroke-width: 2.5; stroke: var(--accent); } [data-gauge-style="sport"] .tick-label { font-weight: 800; fill: var(--text); } /* 4. Pointillés */ [data-gauge-style="pointilles"] .gauge-track { stroke-dasharray: 2 6; stroke-width: 8; stroke: var(--text-soft); opacity: 0.4; } [data-gauge-style="pointilles"] .tick { stroke-dasharray: 1 3; } /* 5. Contour (Double contour moderne) */ [data-gauge-style="contour"] .gauge-track { stroke: transparent; } [data-gauge-style="contour"] .gauge-wrap::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 2px dashed var(--border); pointer-events: none; } [data-gauge-style="contour"] .tick-label { font-weight: 700; fill: var(--accent); } .gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 12%; pointer-events: none; } .speed-value { font-size: clamp(3rem, 16vw, 4.1rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } body.alerting .speed-value { color: var(--danger); } .speed-unit { color: var(--text-soft); font-size: .95rem; font-weight: 500; margin-top: 4px; } /* ---------- Bandeau de permission & alerte GPS ---------- */ .gps-permission-banner { display: flex; align-items: center; gap: 10px; background: var(--accent-soft, rgba(31, 122, 92, 0.12)); border: 1px solid var(--accent, #1f7a5c); border-radius: 14px; padding: 12px 16px; /* Pas de marge propre : seul usage (index.html), dans un `main` en flex avec gap: 12px déjà — une marge ici s'y additionnerait. */ color: var(--text); font-size: 0.88rem; line-height: 1.35; transition: background-color 0.2s, border-color 0.2s, transform 0.15s; cursor: pointer; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05)); } .gps-permission-banner:active { transform: scale(0.985); } .gps-permission-banner[hidden] { display: none !important; } .gps-permission-banner.gps-banner-alert { background: rgba(220, 53, 69, 0.12); border-color: var(--danger, #dc3545); } .gps-permission-banner.gps-banner-alert strong { color: var(--danger, #dc3545); } /* ---------- Puces ---------- */ .chip { font-size: .78rem; font-weight: 500; padding: 5px 12px; border-radius: 999px; white-space: nowrap; } .chip-muted { background: var(--track); color: var(--text-soft); } .chip-ok { background: var(--accent-soft); color: var(--accent); } .chip-time { background: var(--track); color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } .chip-alert { background: var(--danger); color: #fff; animation: chip-pulse 1.2s ease-in-out infinite; } #alert-banner { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); } @keyframes chip-pulse { 50% { opacity: .6; } } /* Vitesse max : cercle intégré au cadran, façon compteur auto */ .max-badge { position: absolute; right: 0; bottom: 2px; width: 64px; height: 64px; border-radius: 50%; background: var(--card); border: 2px solid var(--track); box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; } .max-value { font-size: 1.25rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } .max-label { font-size: .6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); } /* ---------- Stats intégrées au cadran ---------- */ .mini-stats { display: grid; grid-template-columns: 1fr 1fr; border-top: 1.5px solid var(--border-strong, var(--border)); margin-top: 4px; padding: 10px 0 8px; } .stat { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 4px; } .stat+.stat { border-left: 1.5px solid var(--border-strong, var(--border)); } .stat-label { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); } .stat-value { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .stat-value small { font-size: .68rem; font-weight: 500; color: var(--text-soft); } /* ---------- Carte alerte (compacte) ---------- */ .alert-card { padding: 12px 16px; } .alert-inline { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .alert-title { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; font-weight: 600; } /* État agglo/hors agglo détecté par le mode Auto au Burkina (js/agglo-bf.js) */ .auto-zone-etat { display: flex; align-items: center; gap: 7px; margin: 8px 2px 0; font-size: .78rem; color: var(--text-soft); } .auto-zone-etat::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ok, #22c55e); } .auto-zone-etat.agglo::before { background: var(--bf-yellow); } .alert-title svg { width: 18px; height: 18px; color: var(--bf-yellow); } .limit-compact { display: flex; align-items: center; gap: 8px; } .step-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 1.3rem; line-height: 1; cursor: pointer; } .step-btn { transition: background-color .2s, border-color .2s; } .step-btn:hover { background: var(--track); border-color: var(--accent); } .step-btn:active { transform: scale(.92); } .limit-display { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0; } .limit-display input { width: 62px; border: none; background: transparent; color: var(--text); font-family: inherit; font-size: 1.5rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; padding: 0; margin: 0 auto; } .limit-display input::-webkit-outer-spin-button, .limit-display input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .limit-display input:focus { outline: 2px solid var(--accent); border-radius: 8px; } .limit-unit { color: var(--text-soft); font-size: .78rem; font-weight: 500; } .alert-card.disabled .limit-compact { opacity: .35; pointer-events: none; } /* Interrupteur */ .switch { position: relative; display: inline-block; width: 48px; height: 28px; flex-shrink: 0; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; inset: 0; background: var(--track); border-radius: 999px; transition: background-color .2s; cursor: pointer; } .slider::before { content: ""; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; } .switch input:checked+.slider { background: var(--accent); } .switch input:checked+.slider::before { transform: translateX(20px); } /* Variante fine (section Contribution) */ .switch.sm { width: 38px; height: 21px; } .switch.sm .slider::before { width: 15px; height: 15px; left: 3px; top: 3px; } .switch.sm input:checked+.slider::before { transform: translateX(17px); } /* L'interrupteur s'aligne sur la ligne du titre, pas au centre du bloc */ .contrib-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .contrib-row .switch { margin-top: 1px; flex-shrink: 0; } /* ---------- Rappels ---------- */ .reminders-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; margin-bottom: -6px; /* proche du cadran, sans toucher au gap entre les autres blocs */ font-family: inherit; font-size: .82rem; font-weight: 500; color: var(--text); cursor: pointer; text-align: left; } .reminders-bar>svg:not([hidden]) { width: 15px; height: 15px; color: var(--text-soft); flex-shrink: 0; } .reminders-bar .chev { width: 14px; height: 14px; color: var(--text-soft); flex-shrink: 0; } .reminders-bar span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .reminders-bar:active { transform: scale(.99); } .reminders-bar.urgent>svg:not([hidden]) { color: var(--danger); } .reminders-bar.warn>svg:not([hidden]) { color: var(--bf-yellow); } .reminders-bar.urgent #location-name { color: var(--danger); font-weight: 700; } .reminders-bar.warn #location-name { color: var(--bf-yellow); font-weight: 700; } .reminders-bar .cadran-icon-emoji { flex: 0 0 auto; width: auto; height: auto; font-size: 15px; line-height: 1; overflow: visible; white-space: normal; } .reminders-bar.urgent>.cadran-icon-emoji:not([hidden]) { filter: drop-shadow(0 0 4px var(--danger)); } .reminders-bar.warn>.cadran-icon-emoji:not([hidden]) { filter: drop-shadow(0 0 4px var(--bf-yellow)); } .reminders-bar.urgent>.cadran-icon:not([hidden]), .reminders-bar.warn>.cadran-icon:not([hidden]) { animation: bell-scintille 1.4s ease-in-out infinite; } @keyframes bell-scintille { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } .sheet-hint { font-size: .8rem; color: var(--text-soft); line-height: 1.45; margin: 0; padding: 0 20px 10px; } .reminders-list { overflow-y: auto; padding: 4px 20px; flex: 1; } .rem-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 13px 0; border: none; border-top: 1px solid var(--border); background: none; font-family: inherit; color: var(--text); cursor: pointer; text-align: left; } .rem-row:first-child { border-top: none; } .rem-name { font-weight: 600; font-size: .95rem; } .rem-status { font-size: .82rem; margin-top: 2px; } .rem-status.s-muted { color: var(--text-soft); } .rem-status.s-soon { color: var(--accent); font-weight: 500; } .rem-status.s-warn { color: var(--bf-yellow); font-weight: 600; } .rem-status.s-over { color: var(--danger); font-weight: 700; } .rem-row svg { width: 16px; height: 16px; color: var(--text-soft); flex-shrink: 0; } /* Formulaire d'édition */ .field { margin-bottom: 14px; } .field label { display: block; font-size: .78rem; font-weight: 600; color: var(--text-soft); margin-bottom: 6px; } .field input { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--text); font-family: inherit; font-size: 1rem; } .field input:focus { outline: 2px solid var(--accent); } .rem-delete { display: block; margin: 14px auto 0; color: var(--danger); font-size: .85rem; } /* ---------- Boutons ---------- */ .controls { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; } .controls-row { display: flex; gap: 10px; } .controls-row .btn { flex: 1; white-space: nowrap; } @media (max-width: 400px) { .controls-row .btn { font-size: .88rem; padding: 14px 8px; } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: none; border-radius: 15px; padding: 15px 18px; font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; transition: transform .08s, opacity .2s, box-shadow .2s, border-color .2s, filter .15s; } .btn:active { transform: translateY(1px) scale(.98); } .btn:disabled { opacity: .4; cursor: default; } .btn svg { width: 20px; height: 20px; } .btn-primary { /* À PLAT (25-08-2026, demande du propriétaire). Le dégradé vertical et le liseré blanc en haut (« inset 0 1px 0 rgba(255,255,255,…) ») donnaient un relief daté, façon bouton verni. Une couleur pleine et une ombre portée douce suffisent, et la même règle s'applique partout où ce style revenait — voir les autres blocs marqués « À PLAT » plus bas. */ background: var(--accent); color: #fff; padding: 15px 18px; font-size: 1.08rem; letter-spacing: .01em; border-radius: 17px; box-shadow: 0 6px 18px var(--accent-glow); } .btn-primary svg { width: 30px; height: 30px; padding: 7px; box-sizing: border-box; background: rgba(255, 255, 255, .18); border-radius: 50%; } .btn-primary:hover { filter: brightness(1.04); } .btn-primary:active { box-shadow: 0 3px 10px var(--accent-glow); } .btn-primary.running { /* À PLAT — voir .btn-primary */ background: var(--warn); box-shadow: 0 6px 18px var(--warn-glow); } .btn-secondary { background: var(--card); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow); } .btn-secondary:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .btn-ghost { background: transparent; color: var(--text-soft); } .btn-ghost:hover:not(:disabled) { background: var(--track); } .btn-danger-text { color: var(--danger); } /* ---------- Pied de page ---------- */ .foot-note { text-align: center; font-size: .8rem; color: var(--text-soft); margin: 4px 0 0; } .link-btn { background: none; border: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; } /* Signature CodeHeidi */ .credit { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: .78rem; margin: 2px 0 0; } .credit-name { color: var(--text-soft); text-decoration: none; } .credit b { color: var(--accent); font-weight: 700; } .credit-name:hover b { text-decoration: underline; } .social-row { display: flex; gap: 14px; } .social-btn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--card); border: 1px solid var(--border); color: var(--accent); box-shadow: var(--shadow); transition: border-color .2s, transform .1s; } .social-btn svg { width: 22px; height: 22px; } .social-btn:hover { border-color: var(--accent); } .social-btn:active { transform: scale(.94); } button.social-btn { cursor: pointer; font: inherit; padding: 0; } .modal { border: none; border-radius: 20px; background: var(--card-solid, var(--card)); color: var(--text); width: calc(100vw - 48px); max-width: 380px; padding: 22px; margin: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); } :root[data-theme="dark"] .modal { background: #1f2226 !important; border: 1px solid var(--border); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .modal { background: #1f2226 !important; border: 1px solid var(--border); } } .modal::backdrop { background: rgba(0, 0, 0, .65); } .modal h3 { margin: 0 0 8px; font-size: 1.05rem; } .modal p { margin: 0; color: var(--text-soft); font-size: .92rem; line-height: 1.55; white-space: pre-line; } .modal-code { margin-top: 12px; background: var(--bg); border: 1px solid var(--border); padding: 10px 12px; border-radius: 10px; font-size: .85rem; word-break: break-all; user-select: all; } .modal-actions { display: flex; gap: 10px; margin-top: 20px; } .modal-actions .btn { flex: 1; padding: 12px; font-size: .95rem; } .modal-actions .btn-ghost { border: 1px solid var(--border); } #modal-ok.danger { /* À PLAT — voir .btn-primary */ background: var(--danger); box-shadow: 0 6px 18px rgba(214, 69, 69, .3); } /* Toast « Lien copié » */ .share-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 10px); background: var(--text); color: var(--bg); font-size: .85rem; font-weight: 600; padding: 9px 18px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; z-index: 60; } .share-toast.show { opacity: 1; transform: translate(-50%, 0); } /* ---------- Mode paysage (téléphone monté à l'horizontale) ---------- Activé par JS via la classe body.land : automatiquement selon l'orientation de l'écran, ou manuellement via le bouton d'orientation. */ /* --- Mode paysage spécifique à la page d'accueil (index.html) --- */ body.land { overflow: hidden; } /* ============================================================================ CAS 1 : MENU LATÉRAL CACHÉ (body.land:not(.show-land-controls)) Seuls la zone du nom (#location-bar) et le cadran (.gauge-card) s'affichent. Tous les autres éléments numérotés sont strictement masqués. ============================================================================ */ body.land:not(.show-land-controls) .topbar, body.land:not(.show-land-controls) .alert-card, body.land:not(.show-land-controls) .reminders-bar, body.land:not(.show-land-controls) .controls, body.land:not(.show-land-controls) .tabbar, body.land:not(.show-land-controls) .foot-note, body.land:not(.show-land-controls) .credit { display: none !important; } body.land main { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; height: 100vh; padding: 12px 20px; max-width: 900px; margin: 0 auto; overflow: hidden; } body.land #location-bar:not([hidden]) { display: flex !important; width: 100%; max-width: 560px; margin-bottom: 10px; } body.land .gauge-card { width: 100%; max-width: 560px; height: auto; padding: 12px 24px 8px; } body.land .gauge-wrap { max-width: min(360px, 68vh); } body.land .speed-value { font-size: clamp(2.5rem, 17vh, 4.2rem); } /* ============================================================================ CAS 2 : MENU LATÉRAL OUVERT (body.land.show-land-controls) - Topbar en haut : Nom à gauche, Icônes à droite. - Moitié gauche : Nom de la zone (#location-bar) + Cadran (.gauge-card). - Haut-droite (Rectangle Rouge) : Vitesse Max (.alert-card). - Bas-droite (Rectangle Noir) : Menu bas (.tabbar). - Bouton toggle : bord droit sans collision. ============================================================================ */ body.land.show-land-controls .topbar { display: flex !important; align-items: center; justify-content: space-between; width: 100%; max-width: 100vw; padding: 8px 20px; position: fixed; top: 0; left: 0; right: 0; z-index: 90; } body.land.show-land-controls .brand { display: flex !important; } body.land.show-land-controls .topbar-actions { display: flex !important; } body.land.show-land-controls main { display: grid; grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); grid-template-rows: auto 1fr; gap: clamp(4px, 1.5vh, 10px) 18px; align-items: start; max-width: 940px; margin: 0 auto; padding: 56px 20px calc(64px + env(safe-area-inset-bottom)); /* Bornage EXPLICITE au viewport, comme CAS 1 (menu caché) — sans lui, un écran bas (téléphone compact en paysage) laissait le contenu dépasser la zone utile et chevaucher le menu bas, fixe au-dessus de tout. 100dvh (hauteur RÉELLE visible) avec repli 100vh pour les navigateurs qui ne le connaissent pas encore. */ height: 100vh; height: 100dvh; overflow: hidden; } body.land.show-land-controls #location-bar { grid-column: 1; max-width: 100%; margin-bottom: 8px; } body.land.show-land-controls .gauge-card { grid-column: 1; grid-row: 2; max-width: 100%; height: auto; margin: 0; } body.land.show-land-controls .gauge-wrap { max-width: min(280px, 56vh); } /* Le chiffre de vitesse dépend normalement de la largeur (vw) — pertinent en portrait, où la largeur est la dimension qui manque. En paysage, c'est la HAUTEUR qui manque : sans cette bascule sur vh, le chiffre restait à sa taille large sur un écran bas et large, débordant du cadran déjà rétréci par la règle ci-dessus (56vh). */ body.land.show-land-controls .speed-value { font-size: clamp(2.2rem, 9vh, 4.1rem); } /* Rectangle Rouge : Vitesse Max en haut à droite */ body.land.show-land-controls .alert-card { display: flex !important; flex-direction: column; grid-column: 2; grid-row: 2; position: static; transform: none; width: 100%; height: auto; max-height: max-content; padding: 12px 14px; box-shadow: var(--shadow); align-self: start; margin-top: 4px; } body.land.show-land-controls .alert-card .alert-inline { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; } body.land.show-land-controls .alert-card .limit-compact { gap: 6px; } body.land.show-land-controls .alert-card .step-btn { width: 32px; height: 32px; font-size: 1.1rem; } body.land.show-land-controls .alert-card input { width: 44px; font-size: 0.95rem; padding: 4px; } /* Rectangle Noir : Menu bas/latéral en bas à droite */ body.land.show-land-controls .tabbar { display: grid !important; position: fixed; left: auto; right: 20px; transform: none; max-width: 270px; width: 100%; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 100; } /* Bouton toggle à l'emplacement du cercle bleu */ .land-toggle { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--text); display: grid; place-items: center; cursor: pointer; z-index: 110; box-shadow: var(--shadow); opacity: .95; transition: opacity .2s, transform .15s, bottom .2s; } body.land.show-land-controls .land-toggle { position: fixed; right: 18px; bottom: calc(76px + env(safe-area-inset-bottom)); top: auto; transform: none; z-index: 120; } /* Lors d'un parcours en cours (portrait & paysage) : conserver la topbar et le nom de l'app */ body.trip-active .topbar { display: flex !important; } /* En mode paysage pendant un parcours : nom de l'application en haut à gauche */ body.land.trip-active .topbar { display: flex !important; position: fixed !important; left: 20px !important; top: 10px !important; width: auto !important; height: auto !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; z-index: 100 !important; } body.land.trip-active .brand { display: flex !important; align-items: center !important; gap: 8px !important; } /* Masquage des éléments secondaires */ body.land.trip-active .tabbar, body.land.trip-active .alert-card { display: none !important; } body.land.trip-active .land-toggle { display: grid !important; position: fixed !important; right: 18px !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; z-index: 120 !important; } body.land.trip-active main { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-rows: auto 1fr !important; column-gap: 16px !important; row-gap: 8px !important; align-items: start !important; min-height: 100vh !important; height: 100vh !important; padding: 40px 16px 10px 16px !important; max-width: 100vw !important; margin: 0 !important; box-sizing: border-box !important; overflow: hidden !important; } /* Zone du nom de la ville (#location-bar) : entre le nom de l'app (top) et le cadran (bas) */ body.land.trip-active #location-bar:not([hidden]) { grid-column: 1 !important; grid-row: 1 !important; display: flex !important; width: 100% !important; max-width: 680px !important; margin-bottom: 0 !important; justify-self: center !important; } /* Cadran de vitesse (.gauge-card) : sous la zone du nom de la ville */ body.land.trip-active .gauge-card { grid-column: 1 !important; grid-row: 2 !important; width: 100% !important; max-width: 680px !important; height: auto !important; margin: 0 !important; justify-self: center !important; } body.land.trip-active .gauge-wrap { max-width: min(400px, 60vh) !important; } body.land.trip-active .speed-value { font-size: clamp(2.6rem, 18vh, 4.4rem) !important; } /* Zone des commandes en mode paysage (Plaquée à l'extrême droite) */ body.land.trip-active #controls { grid-column: 2 !important; grid-row: 1 / span 2 !important; align-self: start !important; justify-self: end !important; display: flex !important; position: static !important; width: 175px !important; margin-top: 0 !important; margin-right: 0 !important; z-index: 120 !important; } body.land.trip-active #controls .controls-row { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; gap: 10px !important; height: auto !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Rectangle Rouge (Aligné à droite) : Bouton Terminer & enregistrer */ body.land.trip-active #btn-finish { width: 100% !important; padding: 12px 14px !important; border-radius: 12px !important; font-size: 0.85rem !important; font-weight: 600 !important; margin: 0 !important; text-align: center !important; } /* Rectangle Bleu (Aligné à droite) : Bouton Réinitialiser */ body.land.trip-active #btn-reset { width: 100% !important; padding: 12px 14px !important; border-radius: 12px !important; font-size: 0.85rem !important; font-weight: 600 !important; margin: 0 !important; text-align: center !important; } /* Boutons de contrôle à gauche en mode paysage (Plein écran & Mode Portrait) */ .land-left-controls { position: fixed; left: 18px; top: 14px; display: flex; align-items: center; gap: 10px; z-index: 100; } .land-ctrl-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; box-shadow: var(--shadow); opacity: .9; transition: opacity .2s, transform .12s, background-color .2s; } .land-ctrl-btn:hover { opacity: 1; background: var(--track); } .land-ctrl-btn:active { transform: scale(.92); } /* Bouton Stop discret en mode paysage pendant un parcours */ .land-stop-btn { position: fixed; right: 18px; bottom: calc(20px + env(safe-area-inset-bottom)); background: var(--danger); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 4px 14px rgba(214, 69, 69, .4); z-index: 100; } .land-stop-btn:hover { background: #c1121f; } /* Bouton flottant discret centré verticalement sur le bord droit */ .land-toggle { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--text); display: grid; place-items: center; cursor: pointer; z-index: 100; box-shadow: var(--shadow); opacity: .95; transition: opacity .2s, transform .15s; } .land-toggle:hover { opacity: 1; } .land-toggle:active { transform: translateY(-50%) scale(.92); } .land-toggle svg { width: 18px; height: 18px; transition: transform .25s; } .land-toggle.open svg { transform: rotate(180deg); } /* ---------- Historique (feuille) ---------- */ .sheet { border: none; border-radius: 22px 22px 0 0; background: var(--card); color: var(--text); width: 100%; max-width: 480px; margin: auto auto 0; padding: 0; max-height: 80dvh; display: none; flex-direction: column; box-shadow: 0 -10px 40px rgba(0, 0, 0, .2); } .sheet[open] { display: flex; } .sheet::backdrop { background: rgba(0, 0, 0, .45); } .sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 10px; } .sheet-header h2 { font-size: 1.1rem; margin: 0; } .history-list { overflow-y: auto; padding: 4px 20px; flex: 1; } .history-empty { text-align: center; color: var(--text-soft); padding: 36px 0; font-size: .92rem; } .trip { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 14px 0; border: none; border-top: 1px solid var(--border); background: none; font-family: inherit; color: var(--text); text-align: left; cursor: pointer; } .trip:first-child { border-top: none; } .trip:active { transform: scale(.99); } .trip-date { font-weight: 600; font-size: .92rem; } .trip-meta { color: var(--text-soft); font-size: .82rem; margin-top: 3px; } .trip-meta b { color: var(--text); font-weight: 600; } /* Icône « voir » : ouvre la page de statistiques du parcours */ .trip-view-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--accent); flex-shrink: 0; } .trip:hover .trip-view-ic { background: var(--accent-soft); } .trip-view-ic svg { width: 19px; height: 19px; } /* ---------- Page statistiques d'un parcours ---------- */ .trip-page { position: fixed; inset: 0; z-index: 55; background: var(--bg); overflow-y: auto; animation: page-in .22s ease; } @keyframes page-in { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .trip-page-inner { max-width: 480px; margin: 0 auto; padding: 18px 20px calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; } .trip-page-head { display: flex; align-items: center; gap: 14px; } .trip-page-head h2 { font-size: 1.1rem; margin: 0; } .trip-page-date { margin: 3px 0 0; font-size: .85rem; color: var(--text-soft); text-transform: capitalize; } .trip-kpis-card { padding: 14px 8px; } .trip-kpis { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; } .trip-kpis .stat+.stat { border-left: 1px solid var(--border); } .trip-chart-card, .trip-over-card { padding: 16px 18px; } .over-ok { color: var(--accent); font-weight: 600; font-size: .92rem; margin: 0; line-height: 1.5; } .over-bad { color: var(--danger); font-weight: 600; font-size: .92rem; margin: 0; line-height: 1.5; } .trip-chart-title { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); margin: 0 0 10px; } .trip-chart { min-height: 120px; } .trip-chart svg { display: block; width: 100%; height: auto; } .tc-axis { stroke: var(--border); stroke-width: 1.5; } .tc-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; opacity: .7; } .tc-txt { fill: var(--text-soft); font-size: 9px; font-weight: 500; } .tc-area { fill: var(--accent); opacity: .14; } .tc-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; } .tc-limit { stroke: var(--danger); stroke-width: 1.5; stroke-dasharray: 5 4; } .tc-limit-txt { fill: var(--danger); font-size: 9px; font-weight: 700; } .trip-no-curve { text-align: center; color: var(--text-soft); font-size: .85rem; line-height: 1.5; padding: 28px 0; margin: 0; } .sheet-footer { padding: 10px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); display: flex; justify-content: center; } /* ---------- Paramètres ---------- */ .settings-body { overflow-y: auto; padding: 4px 20px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 20px; } .settings-body h3 { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); margin: 0 0 8px; } /* Sélecteur segmenté (type d'alerte) */ .seg { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--track); border-radius: 12px; padding: 4px; gap: 4px; } .seg label { position: relative; } .seg input { position: absolute; opacity: 0; width: 0; height: 0; } .seg span { display: block; text-align: center; padding: 9px 4px; border-radius: 9px; font-size: .84rem; font-weight: 600; color: var(--text-soft); cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s; } .seg input:checked+span { background: var(--card); color: var(--text); box-shadow: var(--shadow); } /* Liste des sonneries */ .sound-list { display: flex; flex-direction: column; } .sound-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); cursor: pointer; } .sound-row:first-child { border-top: none; } .sound-row input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; } .sound-row>span { flex: 1; font-size: .95rem; font-weight: 500; } .sound-play { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); color: var(--accent); font-size: .8rem; cursor: pointer; transition: background-color .2s, border-color .2s; } .sound-play:hover { background: var(--track); border-color: var(--accent); } .sound-play:active { transform: scale(.92); } /* Volume */ .volume-row { display: flex; align-items: center; gap: 14px; } .volume-row input[type="range"] { flex: 1; accent-color: var(--accent); cursor: pointer; } .volume-value { width: 48px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; font-size: .9rem; } /* Tolérance */ .tol-row { display: flex; align-items: center; justify-content: center; gap: 22px; } .tol-value { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 64px; text-align: center; } .hint { font-size: .8rem; color: var(--text-soft); margin: 10px 0 0; line-height: 1.45; } .setting-label { font-size: .95rem; font-weight: 500; margin: 0; } .app-version { text-align: center; margin-top: 16px; } /* Liens À propos (CodeHeidi) */ /* ---- Ligne de renvoi dans les Paramètres (25-08-2026) ---- Le guide s'ouvrait par un gros bouton plein, trop lourd pour ce qui n'est qu'une navigation. Ici : une ligne, une icône, un chevron — le vocabulaire des Paramètres, pas celui d'une action importante. */ .set-lien { display: flex; align-items: center; gap: 12px; padding: 4px 0 2px; color: var(--text); text-decoration: none; } .set-lien-ico { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); font-size: 1.05rem; } .set-lien-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .set-lien-txt strong { font-size: .93rem; font-weight: 600; } .set-lien-txt small { font-size: .78rem; color: var(--text-soft); line-height: 1.35; } .set-lien svg { flex: none; margin-left: auto; width: 16px; height: 16px; opacity: .45; } .set-lien:active { opacity: .7; } /* ---- Carte qui attend une autorisation (25-08-2026) ---- Une respiration lente du contour et un point à côté du titre. Assez pour attirer l'œil en parcourant la page, pas assez pour donner l'impression d'une panne : ce n'est pas une alerte, c'est une invitation. Volontairement sans halo coloré — en thème Ardoise, les lueurs autour des éléments alourdissent tout (règle du propriétaire). */ /* La respiration passe par un CONTOUR SUPERPOSÉ, pas par le contour de la carte : css/perso.css impose déjà « animation: staggeredSlideUp … !important » sur les cartes des Paramètres (leur entrée en scène), et aucune règle ne peut le remplacer. On anime donc un calque, que rien ne dispute. */ @keyframes set-respire { 0%, 100% { opacity: 0; } 50% { opacity: .85; } } @keyframes set-point { 0%, 100% { opacity: .3; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } } .set-card.set-attention { position: relative; border-color: var(--accent); } .set-card.set-attention::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1.5px solid var(--accent); opacity: 0; pointer-events: none; animation: set-respire 3.2s ease-in-out infinite; } .set-card.set-attention > h3::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: var(--accent); vertical-align: middle; animation: set-point 3.2s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .set-card.set-attention::before { animation: none; opacity: .6; } .set-card.set-attention > h3::after { animation: none; } } .about-links { display: flex; flex-direction: column; } .about-link { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: .92rem; font-weight: 500; } .about-link:first-child { border-top: none; } .about-link svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; } .about-link:hover span { color: var(--accent); } /* (le bandeau de mise à jour a été remplacé par la mise à jour silencieuse) */ /* ======== Surcouche locale : effet verre + barre d'icônes (design6) ======== */ .autocomplete-results { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-card, var(--card)); border: 1px solid rgba(128, 128, 128, 0.2); border-radius: 8px; list-style: none; padding: 0; margin: 4px 0 0 0; max-height: 200px; overflow-y: auto; z-index: 100; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .autocomplete-results li { padding: 12px 16px; border-bottom: 1px solid rgba(128, 128, 128, 0.1); cursor: pointer; font-size: 14px; } .autocomplete-results li:last-child { border-bottom: none; } .autocomplete-results li:hover { background: rgba(128, 128, 128, 0.1); } :root { --page-solid: #f6f5f2; --veil: rgba(246, 245, 242, .90); --sky-top: #e6eef8; --sky-1: rgba(137, 180, 226, .38); --sky-2: rgba(255, 243, 214, .45); --card: rgba(255, 255, 255, .62); --border: rgba(255, 255, 255, .60); --track: rgba(31, 41, 55, .10); --bg: rgba(255, 255, 255, .38); } :root[data-theme="dark"] { --page-solid: #17191c; --veil: rgba(15, 17, 20, .92); --sky-top: #17191c; --sky-1: transparent; --sky-2: transparent; --card: rgba(31, 34, 38, .55); --border: rgba(255, 255, 255, .14); --track: rgba(255, 255, 255, .10); --bg: rgba(255, 255, 255, .06); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --page-solid: #17191c; --veil: rgba(15, 17, 20, .92); --sky-top: #17191c; --sky-1: transparent; --sky-2: transparent; --card: rgba(31, 34, 38, .55); --border: rgba(255, 255, 255, .14); --track: rgba(255, 255, 255, .10); --bg: rgba(255, 255, 255, .06); } } html { background: var(--page-solid); } body { background: transparent; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 78% at 50% -12%, var(--sky-1) 0%, transparent 62%), radial-gradient(70% 45% at 82% 12%, var(--sky-2) 0%, transparent 70%), linear-gradient(180deg, var(--sky-top) 0%, var(--page-solid) 58%); } .card, .max-badge, .btn-secondary, .social-btn, .land-toggle, .sheet, .modal, .step-btn, .sound-play { -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); } .topbar { gap: 12px; } .topbar-actions { gap: 2px; padding: 4px; border-radius: 999px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); } .topbar-actions .icon-btn { width: 38px; height: 38px; border: none; border-radius: 50%; background: transparent; box-shadow: none; transition: background-color .22s, color .22s, transform .12s; } .topbar-actions .icon-btn svg { width: 20px; height: 20px; } .topbar-actions .icon-btn:hover { background: var(--track); color: var(--accent); } .topbar-actions .icon-btn:active { transform: scale(.92); } #btn-notifs { position: relative; } .notif-dot { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); animation: notif-scintille 2s ease-in-out infinite; } @keyframes notif-scintille { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } @media (prefers-reduced-motion: reduce) { .notif-dot { animation: none; } } @media (max-width: 380px) { .topbar-actions .icon-btn { width: 34px; height: 34px; } .topbar-actions .icon-btn svg { width: 18px; height: 18px; } } .gauge-card { padding: 12px 8px 6px; transition: margin .55s ease, background-color .4s, border-color .4s; } .gauge-card .card-top { padding: 0 8px; } .gauge-card .mini-stats { margin: 4px 8px 0; } .gauge-wrap { max-width: min(420px, 86vw); transition: max-width .55s ease; } .speed-value { font-size: clamp(3.4rem, 21vw, 5.4rem); transition: font-size .55s ease; } .speed-unit { font-size: 1.05rem; } .max-badge { width: 74px; height: 74px; } .max-value { font-size: 1.4rem; } .tick-fine { stroke-width: .9; opacity: .3; } .alert-card { transition: margin-top .55s ease; } body.trip-active:not(.land) .gauge-wrap { max-width: min(470px, 94vw); } body.trip-active:not(.land) .gauge-card { margin-left: -10px; margin-right: -10px; } body.trip-active:not(.land) .speed-value { font-size: clamp(3.9rem, 24vw, 6rem); } body.trip-active:not(.land) .alert-card { margin-top: 1.5cm; } @media (max-height: 720px) { body.trip-active:not(.land) .alert-card { margin-top: .6cm; } } /* Plus de marge propre ici : `main` espace déjà tous ses enfants de 12px (flex gap, voir plus bas). Cette marge s'y additionnait — invisible tant que le bandeau du haut restait caché la plupart du temps, mais avec les quatre bandeaux qui s'affichent désormais couramment (GPS, arrière-plan, notifications, découverte), elle laissait un vide net sous chacun d'eux. */ .limit-display { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: #fff; border: 4px solid #d81f26; box-shadow: 0 1px 4px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(0, 0, 0, .06); } .limit-display input { width: 100%; height: 100%; padding: 0; font-size: .95rem; font-weight: 800; letter-spacing: -.02em; color: #14181c; } .limit-display input:focus { outline: none; border-radius: 50%; box-shadow: 0 0 0 3px var(--accent-glow); } .limit-unit { display: none; } .chip-lost { background: var(--danger-soft); color: var(--danger); font-weight: 600; } #location-name { transition: opacity .2s ease; } .reminders-bar.switching #location-name { opacity: 0; } .credit { overflow: hidden; max-height: 120px; transition: opacity .55s ease, transform .55s ease, max-height .55s ease, margin-top .55s ease, padding .55s ease, visibility 0s; } body.trip-active .credit { opacity: 0; transform: translateY(10px); max-height: 0; margin-top: -12px; padding-top: 0; padding-bottom: 0; border-width: 0; visibility: hidden; pointer-events: none; transition: opacity .55s ease, transform .55s ease, max-height .55s ease, margin-top .55s ease, padding .55s ease, visibility 0s linear .55s; } #trip-page, #settings-page { background: var(--veil); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); } .settings-inner { max-width: 760px; } .settings-grid { display: grid; gap: 14px; } @media (min-width: 620px) { .settings-grid { grid-template-columns: 1fr 1fr; align-items: start; } .set-card-wide { grid-column: 1 / -1; } } .set-card { padding: 16px 18px; } .set-card h3 { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); margin: 0 0 12px; } .set-card .setting-label { font-weight: 600; } .set-card .hint { margin: 8px 0 0; } .set-card .tol-row, .set-card .volume-row { margin-top: 10px; } .set-sep { border: none; border-top: 1px solid var(--border); margin: 18px 0 16px; } .set-test { width: 100%; margin-top: 14px; } .trip-actions { display: flex; gap: 10px; } .trip-actions .btn { flex: 1; gap: 8px; padding: 13px 14px; font-size: .95rem; } .trip-actions .btn svg { width: 18px; height: 18px; } .trip-actions #btn-delete-trip { border: 1px solid var(--border); } .trip-actions #btn-delete-trip:hover { border-color: var(--danger); } .device-tag { text-align: center; font-size: .72rem; color: var(--text-soft); opacity: .5; margin: 4px 0 0; font-variant-numeric: tabular-nums; -webkit-user-select: text; user-select: text; } #welcome-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s ease; pointer-events: none; } #welcome-overlay.show { opacity: 1; pointer-events: auto; } .welcome-wrap { position: relative; max-width: min(88vw, 480px); width: 100%; } .welcome-inner { border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); width: 100%; } .welcome-img { display: block; width: 100%; height: auto; max-height: 75vh; object-fit: cover; } #btn-close-welcome { position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; border-radius: 50%; border: none; background: #e63946; color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 3px 10px rgba(230, 57, 70, .55); transition: background .18s, transform .14s; z-index: 1; } #btn-close-welcome:hover { background: #c1121f; } #btn-close-welcome:active { transform: scale(.9); } #btn-close-welcome svg { width: 18px; height: 18px; } #auto-hint { display: none; align-items: center; justify-content: center; gap: 6px; font-size: .78rem; font-weight: 600; color: #e63946; padding: 0; border-radius: 8px; background: rgba(230, 57, 70, .08); margin: 0; opacity: 0; max-height: 0; overflow: hidden; transition: opacity .25s ease, max-height .25s ease, margin .25s ease, padding .25s ease; pointer-events: none; } #auto-hint.show { display: flex !important; opacity: 1; max-height: 60px; padding: 6px 10px; margin-top: 8px; pointer-events: auto; } #auto-hint svg { width: 14px; height: 14px; flex-shrink: 0; } .tabbar { position: fixed; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50; width: min(400px, calc(100vw - 24px)); display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; gap: 2px; padding: 6px; border-radius: 999px; background: var(--card); border: 1px solid var(--border); box-shadow: 0 12px 30px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .35); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); transition: opacity .5s ease, transform .5s ease, visibility 0s; } body.trip-active .tabbar { opacity: 0; transform: translate(-50%, 26px); visibility: hidden; pointer-events: none; transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s; } .tab { display: grid; place-items: center; align-content: center; gap: 1px; height: 48px; padding: 0; border: none; border-radius: 999px; background: none; color: var(--text-soft); font: inherit; font-size: .58rem; font-weight: 700; letter-spacing: .01em; cursor: pointer; transition: color .2s, background-color .2s, transform .12s; } .tab svg { width: 21px; height: 21px; } .tab span { display: none; } .tab:hover { color: var(--accent); } .tab:active { transform: scale(.94); } .tab.active { color: var(--accent); background: var(--accent-soft); } .tab.active span { display: block; } .tab:disabled { opacity: .38; cursor: default; } .tab-center { justify-self: center; width: 48px; height: 48px; border-radius: 50%; /* À PLAT — voir .btn-primary */ background: var(--accent); color: #fff; box-shadow: 0 4px 14px var(--accent-glow, rgba(0, 0, 0, .2)); } .tab-center svg { width: 23px; height: 23px; } .tab-center:hover { color: #fff; filter: brightness(1.06); } .tab-center.active { background: var(--accent); color: #fff; } /* ---- Couleurs individuelles par onglet ---- */ /* Véhicule — bleu ciel */ a[href="car.html"], #tab-car { color: #3b82f6; } a[href="car.html"]:hover, #tab-car:hover { color: #2563eb; } a[href="car.html"].active, #tab-car.active { color: #2563eb; background: rgba(59,130,246,.14); } /* Parcours — violet */ a[href="trips.html"], #tab-trips { color: #8b5cf6; } a[href="trips.html"]:hover, #tab-trips:hover { color: #7c3aed; } a[href="trips.html"].active, #tab-trips.active { color: #7c3aed; background: rgba(124,58,237,.14); } /* Rappels — orange */ a[href="reminders.html"], #tab-reminders { color: #f59e0b; } a[href="reminders.html"]:hover, #tab-reminders:hover { color: #d97706; } a[href="reminders.html"].active, #tab-reminders.active { color: #d97706; background: rgba(217,119,6,.14); } /* Réglages — ardoise */ a[href="settings.html"], #tab-settings { color: #64748b; } a[href="settings.html"]:hover, #tab-settings:hover { color: #475569; } a[href="settings.html"].active, #tab-settings.active { color: #475569; background: rgba(71,85,105,.14); } body.land .tabbar { left: auto; right: max(20px, calc(50vw - 450px)); transform: none; max-width: 270px; width: 100%; bottom: calc(10px + env(safe-area-inset-bottom)); padding: 4px; } body.trip-active.land .tabbar { transform: translateY(26px); } body.land .tab { height: 40px; } body.land .tab svg { width: 19px; height: 19px; } body.land .tab span { display: none; } body.land .tab-center { width: 40px; height: 40px; } body.land .tab-center svg { width: 20px; height: 20px; } .notif-list { display: flex; flex-direction: column; gap: 2px; } .notif-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); font-size: .92rem; } .notif-item:first-child { border-top: none; } .notif-item b { font-weight: 600; display: block; } .notif-item .s-over { color: var(--danger); font-weight: 600; } .notif-item .s-warn { color: #f59e0b; font-weight: 600; } .notif-empty { color: var(--text-soft); font-size: .88rem; margin: 0; line-height: 1.5; } #notif-page, #car-page { background: var(--veil); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); } .serv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (min-width: 620px) { .serv-grid { grid-template-columns: repeat(3, 1fr); } } .serv-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; text-align: left; border-radius: var(--radius); cursor: pointer; font: inherit; color: var(--text); transition: border-color .2s, transform .12s; } .serv-card:hover { border-color: var(--accent); } .serv-card:active { transform: scale(.98); } .serv-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); } .serv-ic svg { width: 22px; height: 22px; } .serv-name { font-weight: 600; font-size: .95rem; } .serv-desc { font-size: .76rem; color: var(--text-soft); line-height: 1.4; } .serv-soon { position: absolute; top: 10px; right: 10px; font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-soft); background: var(--track); padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border); } /* ---- Option 3 : Raccourcis Pilules & Filtres ---- */ .serv-filter-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; overflow-x: auto; padding-bottom: 4px; } .serv-filter-btn { padding: 6px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--border); color: var(--text-soft); font-size: .8rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; } .serv-filter-btn:hover { background: var(--card2); color: var(--text); } .serv-filter-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 700; } .serv-pill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; } .serv-pill-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 16px 10px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; text-decoration: none; color: var(--text); transition: transform .15s, border-color .2s, box-shadow .2s; cursor: pointer; box-sizing: border-box; } .serv-pill-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 6px 20px rgba(0,0,0,.15); } .serv-pill-card:active { transform: scale(.98); } .serv-pill-card.active-pill { border-color: var(--accent); background: linear-gradient(180deg, var(--card), var(--accent-soft)); } .serv-pill-badge { position: absolute; top: 8px; right: 8px; font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: 999px; } .serv-pill-badge.soon { color: var(--text-soft); background: var(--track); border: 1px solid var(--border); } .serv-pill-badge.live { color: var(--accent); background: var(--accent-soft); border: 1px solid rgba(39, 148, 111, .3); display: inline-flex; align-items: center; gap: 4px; } .serv-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .serv-pill-ic { width: 44px; height: 44px; border-radius: 14px; background: var(--track); color: var(--text-soft); display: grid; place-items: center; margin-top: 6px; } .serv-pill-ic.active { background: var(--accent); color: #fff; box-shadow: 0 4px 12px var(--accent-glow); } .serv-pill-ic svg { width: 22px; height: 22px; } .serv-pill-name { font-weight: 700; font-size: .85rem; color: var(--text); line-height: 1.2; } .serv-pill-desc { font-size: .7rem; color: var(--text-soft); line-height: 1.3; } .serv-pill-action { font-size: .74rem; font-weight: 700; color: var(--accent); margin-top: 2px; } /* ---- Bouton flottant Accueil (FAB) ---- */ .home-fab { position: fixed !important; bottom: calc(20px + env(safe-area-inset-bottom)) !important; right: 20px !important; z-index: 10000 !important; width: 52px; height: 52px; border-radius: 50%; background: var(--accent, #1f7a5c); /* À PLAT — voir .btn-primary */ color: #ffffff; display: grid; place-items: center; border: none; cursor: pointer; box-shadow: 0 6px 20px var(--accent-glow, rgba(31, 122, 92, .35)); text-decoration: none; transition: transform .15s, filter .15s; } .home-fab:hover { filter: brightness(1.1); transform: scale(1.05); } .home-fab:active { transform: scale(.94); } .home-fab svg { width: 24px; height: 24px; } /* ============ THÈMES D'ACCENTUATION ET PERSONNALISATION GLOBALE ============ */ :root[data-accent="blue"] { --accent: #2563eb; --accent-hi: #3b82f6; --accent-soft: #eff6ff; --accent-glow: rgba(37, 99, 235, .30); } /* Chaque bloc sombre ci-dessous devait à l'origine s'appliquer à la fois via [data-theme="dark"] ET via la préférence système (prefers-color-scheme), mais la virgule suivie directement d'un @media est une syntaxe invalide : un sélecteur ne peut pas être mélangé à une at-rule dans une même liste. Le navigateur rejette silencieusement toute la règle (vérifié via document.styleSheets — ni l'un ni l'autre ne s'appliquait). Corrigé en deux règles distinctes, valides, avec le même contenu. */ :root[data-theme="dark"][data-accent="blue"] { --accent: #60a5fa; --accent-hi: #93c5fd; --accent-soft: rgba(37, 99, 235, .22); --accent-glow: rgba(96, 165, 250, .30); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-accent="blue"] { --accent: #60a5fa; --accent-hi: #93c5fd; --accent-soft: rgba(37, 99, 235, .22); --accent-glow: rgba(96, 165, 250, .30); } } :root[data-accent="amber"] { --accent: #d97706; --accent-hi: #f59e0b; --accent-soft: #fffbeb; --accent-glow: rgba(217, 119, 6, .30); } :root[data-theme="dark"][data-accent="amber"] { --accent: #fbbf24; --accent-hi: #fcd34d; --accent-soft: rgba(217, 119, 6, .22); --accent-glow: rgba(251, 191, 36, .30); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-accent="amber"] { --accent: #fbbf24; --accent-hi: #fcd34d; --accent-soft: rgba(217, 119, 6, .22); --accent-glow: rgba(251, 191, 36, .30); } } :root[data-accent="red"] { --accent: #dc2626; --accent-hi: #ef4444; --accent-soft: #fef2f2; --accent-glow: rgba(220, 38, 38, .30); } :root[data-theme="dark"][data-accent="red"] { --accent: #f87171; --accent-hi: #fca5a5; --accent-soft: rgba(220, 38, 38, .22); --accent-glow: rgba(248, 113, 113, .30); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-accent="red"] { --accent: #f87171; --accent-hi: #fca5a5; --accent-soft: rgba(220, 38, 38, .22); --accent-glow: rgba(248, 113, 113, .30); } } :root[data-accent="purple"] { --accent: #7c3aed; --accent-hi: #8b5cf6; --accent-soft: #f5f3ff; --accent-glow: rgba(124, 58, 237, .30); } :root[data-theme="dark"][data-accent="purple"] { --accent: #a78bfa; --accent-hi: #c4b5fd; --accent-soft: rgba(124, 58, 237, .22); --accent-glow: rgba(167, 139, 250, .30); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-accent="purple"] { --accent: #a78bfa; --accent-hi: #c4b5fd; --accent-soft: rgba(124, 58, 237, .22); --accent-glow: rgba(167, 139, 250, .30); } } :root[data-accent="emerald"] { --accent: #1f7a5c; --accent-hi: #2db387; --accent-soft: rgba(31, 122, 92, 0.12); --accent-glow: rgba(31, 122, 92, .30); } :root[data-theme="dark"][data-accent="emerald"] { --accent: #2db387; --accent-hi: #3cd4a2; --accent-soft: rgba(31, 122, 92, .22); --accent-glow: rgba(45, 179, 135, .30); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-accent="emerald"] { --accent: #2db387; --accent-hi: #3cd4a2; --accent-soft: rgba(31, 122, 92, .22); --accent-glow: rgba(45, 179, 135, .30); } } :root[data-accent="orange"] { --accent: #ea580c; --accent-hi: #f97316; --accent-soft: #fff7ed; --accent-glow: rgba(234, 88, 12, .30); } :root[data-theme="dark"][data-accent="orange"] { --accent: #fb923c; --accent-hi: #fdba74; --accent-soft: rgba(234, 88, 12, .22); --accent-glow: rgba(251, 146, 60, .30); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-accent="orange"] { --accent: #fb923c; --accent-hi: #fdba74; --accent-soft: rgba(234, 88, 12, .22); --accent-glow: rgba(251, 146, 60, .30); } } /* UI du sélecteur d'apparence dans les paramètres */ .theme-options-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; } .theme-option-btn input { display: none; } .theme-preview-box { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border-radius: 14px; border: 2px solid var(--border); background: var(--track); color: var(--text-soft); cursor: pointer; font-size: .8rem; font-weight: 700; transition: border-color .15s, color .15s, transform .1s, background-color .15s; } .theme-preview-box:hover { border-color: var(--accent); } .theme-option-btn input:checked + .theme-preview-box { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .accent-picker-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; } .accent-color-circle { width: 32px; height: 32px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .15s; padding: 0; outline: none; } .accent-color-circle:hover { transform: scale(1.12); } .accent-color-circle.active { border-color: var(--text); box-shadow: 0 0 0 2px var(--card); } .accent-color-circle.emerald { background: #1f7a5c; } .accent-color-circle.blue { background: #2563eb; } .accent-color-circle.amber { background: #d97706; } .accent-color-circle.orange { background: #ea580c; } .accent-color-circle.red { background: #dc2626; } .accent-color-circle.purple { background: #7c3aed; } /* --- Allègement de l'intensité d'accentuation (Couleurs pastel/douces) --- */ :root[data-accent-lightened="true"][data-accent="emerald"] { --accent: #3ba381; --accent-hi: #5fc4a2; } :root[data-accent-lightened="true"][data-accent="blue"] { --accent: #60a5fa; --accent-hi: #93c5fd; } :root[data-accent-lightened="true"][data-accent="amber"] { --accent: #f59e0b; --accent-hi: #fbbf24; } :root[data-accent-lightened="true"][data-accent="orange"] { --accent: #f97316; --accent-hi: #fb923c; } :root[data-accent-lightened="true"][data-accent="red"] { --accent: #f87171; --accent-hi: #fca5a5; } :root[data-accent-lightened="true"][data-accent="purple"] { --accent: #a78bfa; --accent-hi: #c4b5fd; } /* Version sombre pour l'accentuation allégée */ :root[data-theme="dark"][data-accent-lightened="true"][data-accent="emerald"] { --accent: #64d8a9; --accent-hi: #8be7c2; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-accent-lightened="true"][data-accent="emerald"] { --accent: #64d8a9; --accent-hi: #8be7c2; } } :root[data-theme="dark"][data-accent-lightened="true"][data-accent="blue"] { --accent: #93c5fd; --accent-hi: #bfdbfe; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-accent-lightened="true"][data-accent="blue"] { --accent: #93c5fd; --accent-hi: #bfdbfe; } } :root[data-theme="dark"][data-accent-lightened="true"][data-accent="amber"] { --accent: #fcd34d; --accent-hi: #fde68a; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-accent-lightened="true"][data-accent="amber"] { --accent: #fcd34d; --accent-hi: #fde68a; } } :root[data-theme="dark"][data-accent-lightened="true"][data-accent="orange"] { --accent: #fdba74; --accent-hi: #fed7aa; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-accent-lightened="true"][data-accent="orange"] { --accent: #fdba74; --accent-hi: #fed7aa; } } :root[data-theme="dark"][data-accent-lightened="true"][data-accent="red"] { --accent: #fca5a5; --accent-hi: #fecaca; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-accent-lightened="true"][data-accent="red"] { --accent: #fca5a5; --accent-hi: #fecaca; } } :root[data-theme="dark"][data-accent-lightened="true"][data-accent="purple"] { --accent: #c4b5fd; --accent-hi: #ddd6fe; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-accent-lightened="true"][data-accent="purple"] { --accent: #c4b5fd; --accent-hi: #ddd6fe; } } /* Désactiver les ombres lumineuses sur les boutons en mode sombre */ :root[data-theme="dark"] .back-btn, :root[data-theme="dark"] .back-btn:hover, :root[data-theme="dark"] .home-fab, :root[data-theme="dark"] .home-fab:hover, :root[data-theme="dark"] .btn, :root[data-theme="dark"] .btn:hover, :root[data-theme="dark"] .social-btn, :root[data-theme="dark"] .serv-filter-btn.active, :root[data-theme="dark"] .urg-call-btn { box-shadow: none !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .back-btn, :root:not([data-theme="light"]) .back-btn:hover, :root:not([data-theme="light"]) .home-fab, :root:not([data-theme="light"]) .home-fab:hover, :root:not([data-theme="light"]) .btn, :root:not([data-theme="light"]) .btn:hover, :root:not([data-theme="light"]) .social-btn, :root:not([data-theme="light"]) .serv-filter-btn.active, :root:not([data-theme="light"]) .urg-call-btn { box-shadow: none !important; } } /* ============================================================================ Flutter Material 3 Light Mode Modal Design (All Custom Modals & Sheets) ============================================================================ */ :root:not([data-theme="dark"]) .modal-sheet, :root:not([data-theme="dark"]) .custom-modal .modal-sheet { background: #ffffff !important; border-radius: 28px 28px 0 0 !important; padding: 24px 20px 36px !important; box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08) !important; color: #1e293b !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; } :root:not([data-theme="dark"]) .modal-sheet-handle { width: 44px !important; height: 5px !important; border-radius: 3px !important; background: #cbd5e1 !important; margin: 0 auto 20px !important; } :root:not([data-theme="dark"]) .modal-title { font-size: 1.18rem !important; font-weight: 800 !important; color: #0f172a !important; letter-spacing: -0.01em !important; } :root:not([data-theme="dark"]) .modal-form-input, :root:not([data-theme="dark"]) .modal-form-textarea { background: #f8fafc !important; border: 1.5px solid #e2e8f0 !important; border-radius: 16px !important; padding: 14px 16px !important; font-size: 0.95rem !important; color: #0f172a !important; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02) !important; transition: all 0.2s ease !important; } :root:not([data-theme="dark"]) .modal-form-input:focus, :root:not([data-theme="dark"]) .modal-form-textarea:focus { background: #ffffff !important; border-color: var(--accent, #0284c7) !important; box-shadow: 0 0 0 4px var(--accent-soft, rgba(2, 132, 199, 0.15)) !important; } :root:not([data-theme="dark"]) .modal-btn-primary { background: var(--accent, #0284c7) !important; /* À PLAT — voir .btn-primary */ color: #ffffff !important; border-radius: 18px !important; padding: 14px 20px !important; font-weight: 800 !important; font-size: 0.95rem !important; box-shadow: 0 6px 20px var(--accent-soft, rgba(2, 132, 199, 0.35)) !important; border: none !important; transition: transform 0.15s ease, box-shadow 0.15s ease !important; } :root:not([data-theme="dark"]) .modal-btn-primary:active { transform: scale(0.97) !important; } :root:not([data-theme="dark"]) .editor-btn { background: #f1f5f9 !important; color: #475569 !important; border: 1.5px solid #cbd5e1 !important; border-radius: 18px !important; font-weight: 700 !important; transition: background 0.15s ease !important; } :root:not([data-theme="dark"]) .editor-btn:hover { background: #e2e8f0 !important; } /* L'attribut `hidden` du bouton de bascule a été retiré du HTML : c'est désormais le CSS qui décide où il apparaît. Masqué par défaut — le bloc PAYSAGE ci-dessous le rétablit, et lui seul. */ .land-toggle { display: none; } /* ============================================================================ PAYSAGE — cadran plein écran, colonne latérale dépliable (index.html) Rien à voir avec `body.land`/`show-land-controls`, qui restent inertes (voir js/app.js : enforceNoAutoLandscape). Ce mode-ci repose UNIQUEMENT sur la requête média d'orientation : aucune détection JavaScript, donc aucun basculement parasite au moindre mouvement du téléphone — c'est le système d'exploitation qui décide, comme pour toute application. DEUX ÉTATS : - par défaut (replié) : le cadran seul, plein écran. Tout le reste — bandeau, zone, alerte, menu du bas — est masqué : en roulant, on ne veut que la vitesse. - déplié (`body.paysage-etendu`, basculé par #btn-land-toggle) : deux colonnes — cadran à gauche, tout le reste à droite. Le bouton bascule d'un état à l'autre ; il vit sur le bord droit, centré verticalement (voir .land-toggle, réutilisé de l'ancien mode). Bornes : jusqu'à 950px de large (un iPhone 14 Pro Max en paysage fait déjà 851px) ET moins de 520px de haut, ce qui exclut les tablettes, à qui l'affichage large existant convient déjà. ========================================================================= */ @media (orientation: landscape) and (max-width: 950px) and (max-height: 520px) { /* ---------- Socle commun aux deux états ---------- */ body:has(> main > .gauge-card) main { display: grid; align-content: stretch; gap: 8px 14px; max-width: 100%; /* Hauteur réelle visible (dvh) : sur mobile, 100vh inclut la barre d'adresse rétractable et déborde. Repli vh pour les moteurs anciens. MOINS la barre du haut (.topbar, en flux au-dessus de main) : sans cette soustraction, main démarre sous elle et dépasse d'autant en bas. --sc-topbar-h est mesurée au chargement (js/app.js). */ height: calc(100vh - var(--sc-topbar-h, 72px)); height: calc(100dvh - var(--sc-topbar-h, 72px)); /* Marge droite constante : elle réserve la place du bouton de bascule, qui flotte sur le bord droit dans les DEUX états. */ padding: 8px 62px calc(8px + env(safe-area-inset-bottom)) 16px; overflow: hidden; box-sizing: border-box; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; } /* Le bouton de bascule ne sert que dans ce mode. */ body:has(> main > .gauge-card) .land-toggle { display: grid; } /* Chevron : pointe vers la gauche quand la colonne est repliée (« ouvrir »), vers la droite quand elle est dépliée (« refermer »). */ body.paysage-etendu:has(> main > .gauge-card) .land-toggle svg { transform: rotate(180deg); } /* ---------- ÉTAT REPLIÉ (par défaut) : le cadran seul ---------- */ body:has(> main > .gauge-card) main > .gps-permission-banner, body:has(> main > .gauge-card) main > .reminders-bar, body:has(> main > .gauge-card) main > .alert-card, body:has(> main > .gauge-card) main > .foot-note, body:has(> main > .gauge-card) main > .credit, body:has(> main > .gauge-card) .tabbar { display: none; } body:has(> main > .gauge-card) main > .gauge-card { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: center; margin: 0 auto; padding: 10px 16px; /* Sans cette borne, la carte s'étirait sur toute la largeur avec un petit cercle perdu au milieu — beaucoup de vide pour rien. */ width: 100%; max-width: min(100%, 520px); min-height: 0; overflow: hidden; } /* Le cadran suit la HAUTEUR disponible, pas la largeur : en paysage c'est elle qui manque. Replié, il peut voir grand — c'est tout l'intérêt. */ body:has(> main > .gauge-card) .gauge-wrap { max-width: min(100%, 62vh); margin-left: auto; margin-right: auto; } body:has(> main > .gauge-card) .speed-value { font-size: clamp(2rem, 14vh, 4rem); } /* Pastille « Max » : taille FIXE (74px) en temps normal — elle écrasait le cadran rétréci du paysage, masquant son centre et les graduations de droite. Ici, elle suit la taille du cadran. */ body:has(> main > .gauge-card) .max-badge { width: 28%; height: auto; aspect-ratio: 1 / 1; border-width: 1.5px; } body:has(> main > .gauge-card) .max-value { font-size: clamp(.65rem, 2.8vh, 1.2rem); } body:has(> main > .gauge-card) .max-label { font-size: clamp(.4rem, 1.3vh, .58rem); letter-spacing: .03em; } /* ---------- ÉTAT DÉPLIÉ : deux colonnes ---------- */ body.paysage-etendu:has(> main > .gauge-card) main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* Les lignes se dimensionnent sur leur contenu ; sans une ligne extensible en fin de grille, elles se tassent en haut et le cadran (qui les couvre toutes) ne remplit pas la hauteur disponible. */ grid-template-rows: auto auto auto 1fr; } body.paysage-etendu:has(> main > .gauge-card) main > .gauge-card { grid-column: 1; grid-row: 1 / -1; max-width: 100%; margin: 0; padding: 10px 14px; } body.paysage-etendu:has(> main > .gauge-card) .gauge-wrap { max-width: min(100%, 42vh); } body.paysage-etendu:has(> main > .gauge-card) .speed-value { font-size: clamp(1.8rem, 11vh, 3.4rem); } body.paysage-etendu:has(> main > .gauge-card) main > .gps-permission-banner, body.paysage-etendu:has(> main > .gauge-card) main > .reminders-bar, body.paysage-etendu:has(> main > .gauge-card) main > .alert-card, body.paysage-etendu:has(> main > .gauge-card) main > .foot-note, body.paysage-etendu:has(> main > .gauge-card) main > .credit { display: revert; grid-column: 2; margin: 0; align-self: start; } /* Menu du bas : centré sur l'écran entier par défaut, il chevaucherait le cadran. On l'amène dans la colonne DROITE, où l'espace sous les cartes est justement libre. Valeurs reprises de la géométrie de la grille : padding gauche 16px, gouttière 14px, marge droite du bouton 62px. */ body.paysage-etendu:has(> main > .gauge-card) .tabbar { display: grid; left: calc(50% - 15px); right: 62px; width: auto; max-width: none; transform: none; } /* ---------- Pendant un parcours : le cadran, rien d'autre ---------- */ body.trip-active:has(> main > .gauge-card) main { grid-template-columns: minmax(0, 1fr); /* Le cadran (1fr) absorbe la hauteur, les commandes gardent la leur. */ grid-template-rows: 1fr auto; } body.trip-active:has(> main > .gauge-card) main > .gauge-card { grid-column: 1; grid-row: 1; max-width: min(100%, 520px); margin: 0 auto; } body.trip-active:has(> main > .gauge-card) main > .gps-permission-banner, body.trip-active:has(> main > .gauge-card) main > .reminders-bar, body.trip-active:has(> main > .gauge-card) main > .alert-card, body.trip-active:has(> main > .gauge-card) main > .foot-note, body.trip-active:has(> main > .gauge-card) main > .credit { display: none; } /* Les commandes (Terminer / Réinitialiser) sont justement ce dont on a besoin en roulant : conservées, sous le cadran. */ body.trip-active:has(> main > .gauge-card) main > .controls { display: revert; grid-column: 1; grid-row: 2; justify-self: center; width: min(100%, 420px); } body.trip-active:has(> main > .gauge-card) .gauge-wrap { max-width: min(100%, 52vh); } }