/* ============ 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; --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; --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; --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; margin: 0 0 12px; 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 { background: linear-gradient(180deg, var(--accent-hi), 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), inset 0 1px 0 rgba(255, 255, 255, .22); } .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), inset 0 1px 0 rgba(255, 255, 255, .15); } .btn-primary.running { background: linear-gradient(180deg, var(--warn-hi), var(--warn)); box-shadow: 0 6px 18px var(--warn-glow), inset 0 1px 0 rgba(255, 255, 255, .22); } .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 { background: linear-gradient(180deg, #e05c5c, var(--danger)); box-shadow: 0 6px 18px rgba(214, 69, 69, .3), inset 0 1px 0 rgba(255, 255, 255, .2); } /* 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 { 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: 10px 18px; align-items: start; max-width: 940px; margin: 0 auto; padding: 56px 20px 12px; } 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); } /* 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 { 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) */ .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; } } .reminders-bar { margin-top: 0.2cm; } @media (max-height: 720px) { .reminders-bar { margin-top: 0.05cm; } } .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); } .page-fab { position: fixed; right: calc(18px + env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 60; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--border); border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .28); opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; transition: opacity .25s ease, transform .25s ease; } .page-fab svg { width: 24px; height: 24px; } .page-fab.show { opacity: 1; transform: none; pointer-events: auto; } .page-fab:active { transform: scale(.93); } .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%; background: linear-gradient(180deg, var(--accent-hi, var(--accent)), var(--accent)); color: #fff; box-shadow: 0 4px 14px var(--accent-glow, rgba(0, 0, 0, .2)), inset 0 1px 0 rgba(255, 255, 255, .25); } .tab-center svg { width: 23px; height: 23px; } .tab-center:hover { color: #fff; filter: brightness(1.06); } .tab-center.active { background: linear-gradient(180deg, var(--accent-hi, var(--accent)), 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: linear-gradient(180deg, var(--accent-hi, #27946f), var(--accent, #1f7a5c)); 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: linear-gradient(135deg, var(--accent, #0284c7) 0%, color-mix(in srgb, var(--accent) 85%, #000000 15%) 100%) !important; 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; }