/* ========================================================================== GestPlan · Kit iOS (tokens + composants) Reprend les structures et modèles visuels d'iOS : listes groupées, barre de navigation à grand titre, barre d'onglets, boutons capsule, contrôle segmenté, interrupteur, menu déroulant (pull-down), molette (picker), feuilles, alertes. CSS natif, aucune dépendance. À charger APRÈS gestplan-tokens.css. Préfixe : .ios- · Variables : --ios-* ========================================================================== */ /* 1 · TOKENS ------------------------------------------------------------- */ :root { /* Couleurs système (clair) */ --ios-blue: #007aff; --ios-green: #34c759; --ios-red: #ff3b30; --ios-orange: #ff9500; --ios-yellow: #ffcc00; --ios-purple: #af52de; --ios-teal: #30b0c7; --ios-indigo: #5856d6; --ios-gray: #8e8e93; /* Teinte de l'app : une seule variable à changer pour passer au bleu GestPlan */ --ios-tint: var(--ios-blue); /* Fonds */ --ios-bg: #ffffff; --ios-bg-grouped: #f2f2f7; --ios-bg-cell: #ffffff; --ios-bg-elevated: #ffffff; --ios-bg-sheet: #f2f2f7; --ios-bg-sheet-cell: #ffffff; /* Textes */ --ios-label: #000000; --ios-label-2: rgba(60, 60, 67, .6); --ios-label-3: rgba(60, 60, 67, .3); --ios-placeholder: rgba(60, 60, 67, .3); /* Séparateurs et remplissages */ --ios-sep: rgba(60, 60, 67, .29); --ios-fill: rgba(120, 120, 128, .2); --ios-fill-2: rgba(120, 120, 128, .16); --ios-fill-3: rgba(118, 118, 128, .12); /* Matières translucides (barres, menus, feuilles) */ --ios-material: rgba(249, 249, 249, .8); --ios-material-menu: rgba(250, 250, 250, .82); --ios-backdrop: rgba(0, 0, 0, .3); --ios-blur: saturate(180%) blur(20px); /* Typographie : SF sur appareils Apple, Inter ailleurs (à héberger en local) */ --ios-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif; --ios-font-rounded: ui-rounded, "SF Pro Rounded", var(--ios-font); --ios-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; /* Échelle des styles de texte iOS (taille / interligne) */ --ios-large-title: 700 34px/41px var(--ios-font); --ios-title-1: 700 28px/34px var(--ios-font); --ios-title-2: 700 22px/28px var(--ios-font); --ios-title-3: 600 20px/25px var(--ios-font); --ios-headline: 600 17px/22px var(--ios-font); --ios-body: 400 17px/22px var(--ios-font); --ios-callout: 400 16px/21px var(--ios-font); --ios-subhead: 400 15px/20px var(--ios-font); --ios-footnote: 400 13px/18px var(--ios-font); --ios-caption: 400 12px/16px var(--ios-font); /* Géométrie */ --ios-r-cell: 10px; --ios-r-group: 12px; --ios-r-btn: 12px; --ios-r-menu: 13px; --ios-r-sheet: 14px; --ios-r-pill: 999px; --ios-gutter: 16px; /* marge latérale des listes inset */ --ios-row: 44px; /* hauteur mini d'une ligne = cible tactile */ --ios-spring: cubic-bezier(.32, .72, 0, 1); /* courbe des feuilles iOS */ --ios-safe-b: env(safe-area-inset-bottom, 0px); --ios-safe-t: env(safe-area-inset-top, 0px); } /* Sombre : automatique, ou forcé par data-theme="dark" sur */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ios-blue: #0a84ff; --ios-green: #30d158; --ios-red: #ff453a; --ios-orange: #ff9f0a; --ios-yellow: #ffd60a; --ios-purple: #bf5af2; --ios-teal: #40c8e0; --ios-indigo: #5e5ce6; --ios-bg: #000; --ios-bg-grouped: #000; --ios-bg-cell: #1c1c1e; --ios-bg-elevated: #1c1c1e; --ios-label: #fff; --ios-label-2: rgba(235,235,245,.6); --ios-label-3: rgba(235,235,245,.3); --ios-placeholder: rgba(235,235,245,.3); --ios-sep: rgba(84,84,88,.65); --ios-fill: rgba(120,120,128,.36); --ios-fill-2: rgba(120,120,128,.32); --ios-fill-3: rgba(118,118,128,.24); --ios-material: rgba(29,29,31,.78); --ios-material-menu: rgba(37,37,40,.82); --ios-backdrop: rgba(0,0,0,.5); --ios-bg-sheet: #1c1c1e; --ios-bg-sheet-cell: #2c2c2e; } } :root[data-theme="dark"] { --ios-blue: #0a84ff; --ios-green: #30d158; --ios-red: #ff453a; --ios-orange: #ff9f0a; --ios-yellow: #ffd60a; --ios-purple: #bf5af2; --ios-teal: #40c8e0; --ios-indigo: #5e5ce6; --ios-bg: #000; --ios-bg-grouped: #000; --ios-bg-cell: #1c1c1e; --ios-bg-elevated: #1c1c1e; --ios-label: #fff; --ios-label-2: rgba(235,235,245,.6); --ios-label-3: rgba(235,235,245,.3); --ios-placeholder: rgba(235,235,245,.3); --ios-sep: rgba(84,84,88,.65); --ios-fill: rgba(120,120,128,.36); --ios-fill-2: rgba(120,120,128,.32); --ios-fill-3: rgba(118,118,128,.24); --ios-material: rgba(29,29,31,.78); --ios-material-menu: rgba(37,37,40,.82); --ios-backdrop: rgba(0,0,0,.5); --ios-bg-sheet: #1c1c1e; --ios-bg-sheet-cell: #2c2c2e; } /* 2 · BASE --------------------------------------------------------------- */ .ios, .ios * { box-sizing: border-box; } .ios { font: var(--ios-body); color: var(--ios-label); background: var(--ios-bg-grouped); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; letter-spacing: -.01em; } :where(.ios) :where(button, input, select, textarea) { font: inherit; color: inherit; letter-spacing: inherit; } .ios :focus-visible { outline: 3px solid color-mix(in srgb, var(--ios-tint) 55%, transparent); outline-offset: 2px; } .ios-num { font-variant-numeric: tabular-nums; } /* 3 · BARRE DE NAVIGATION (grand titre) ---------------------------------- */ .ios-navbar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 44px; padding: var(--ios-safe-t) 8px 0; background: var(--ios-material); -webkit-backdrop-filter: var(--ios-blur); backdrop-filter: var(--ios-blur); border-bottom: .5px solid var(--ios-sep); } .ios-navbar__title { font: var(--ios-headline); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ios-navbar__lead, .ios-navbar__trail { display: flex; align-items: center; gap: 4px; } .ios-navbar__trail { justify-content: flex-end; } .ios-navbar--flat { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } .ios-large-title { font: var(--ios-large-title); letter-spacing: .011em; padding: 4px var(--ios-gutter) 8px; margin: 0; } .ios-back { display: inline-flex; align-items: center; gap: 3px; } .ios-back::before { content: ""; width: 12px; height: 21px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 21'%3E%3Cpath d='M10 2 2 10.5 10 19' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 21'%3E%3Cpath d='M10 2 2 10.5 10 19' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; } /* 4 · BOUTONS ------------------------------------------------------------ */ .ios-btn { --_c: var(--ios-tint); appearance: none; border: 0; cursor: pointer; user-select: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 20px; border-radius: var(--ios-r-btn); font: var(--ios-headline); color: #fff; background: var(--_c); transition: opacity .12s, transform .12s, filter .12s; } .ios-btn:active { opacity: .72; transform: scale(.985); } .ios-btn:disabled, .ios-btn[aria-disabled="true"] { background: var(--ios-fill-3); color: var(--ios-label-3); pointer-events: none; } .ios-btn--tinted { background: color-mix(in srgb, var(--_c) 15%, transparent); color: var(--_c); } .ios-btn--gray { background: var(--ios-fill-3); color: var(--_c); } .ios-btn--plain { background: transparent; color: var(--_c); font-weight: 400; padding: 0 8px; min-height: 44px; } .ios-btn--plain:active { opacity: .35; transform: none; } .ios-btn--bold { font-weight: 600; } .ios-btn--danger { --_c: var(--ios-red); } .ios-btn--success { --_c: var(--ios-green); } .ios-btn--capsule { border-radius: var(--ios-r-pill); } .ios-btn--sm { min-height: 30px; padding: 0 12px; font: 600 15px/20px var(--ios-font); border-radius: var(--ios-r-pill); } .ios-btn--lg { min-height: 50px; border-radius: 14px; } .ios-btn--block { display: flex; width: 100%; } .ios-btn--icon { width: 44px; padding: 0; background: transparent; color: var(--_c); } .ios-btn--icon svg, .ios-btn svg { width: 22px; height: 22px; flex: none; } /* 5 · LISTES GROUPÉES (inset grouped) ------------------------------------ */ .ios-section { margin: 0 var(--ios-gutter) 0; padding-top: 22px; } .ios-section:first-child { padding-top: 8px; } .ios-section__header { font: var(--ios-footnote); color: var(--ios-label-2); padding: 0 16px 7px; text-transform: none; } .ios-section__header--prominent { font: var(--ios-title-3); color: var(--ios-label); padding-bottom: 9px; } .ios-section__footer { font: var(--ios-footnote); color: var(--ios-label-2); padding: 7px 16px 0; } .ios-list { list-style: none; margin: 0; padding: 0; background: var(--ios-bg-cell); border-radius: var(--ios-r-group); overflow: hidden; } .ios-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: var(--ios-row); padding: 0 16px; background: transparent; width: 100%; border: 0; text-align: left; text-decoration: none; color: inherit; } /* séparateur en retrait, comme sur iOS : il démarre au texte, pas au bord */ .ios-row + .ios-row::before { content: ""; position: absolute; top: 0; right: 0; left: var(--_inset, 16px); height: .5px; background: var(--ios-sep); } .ios-row--icon + .ios-row--icon::before, .ios-row + .ios-row--icon::before { --_inset: 60px; } button.ios-row, a.ios-row { cursor: pointer; } button.ios-row:active, a.ios-row:active { background: var(--ios-fill-3); } .ios-row__icon { flex: none; width: 29px; height: 29px; border-radius: 7px; display: grid; place-items: center; background: var(--_bg, var(--ios-tint)); color: #fff; font-size: 16px; } .ios-row__icon svg { width: 18px; height: 18px; } .ios-row__body { flex: 1 1 auto; min-width: 0; padding: 11px 0; } .ios-row__title { display: block; font: var(--ios-body); overflow: hidden; text-overflow: ellipsis; } .ios-row__sub { display: block; font: var(--ios-subhead); color: var(--ios-label-2); margin-top: 1px; } .ios-row__value { flex: none; max-width: 55%; color: var(--ios-label-2); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ios-row__value--tint { color: var(--ios-tint); } .ios-row--chevron::after { content: ""; flex: none; width: 8px; height: 13px; margin-left: -4px; background: var(--ios-label-3); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='m1.5 1.5 5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='m1.5 1.5 5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; } .ios-row--action .ios-row__title { color: var(--ios-tint); } .ios-row--danger .ios-row__title { color: var(--ios-red); } .ios-row--center { justify-content: center; text-align: center; } /* Champ de saisie dans une ligne */ .ios-row__label { flex: none; width: 108px; } .ios-input { flex: 1 1 auto; min-width: 0; appearance: none; border: 0; background: transparent; outline: 0; min-height: var(--ios-row); padding: 0; caret-color: var(--ios-tint); } .ios-input::placeholder { color: var(--ios-placeholder); } .ios-input--right { text-align: right; } textarea.ios-input { padding: 11px 0; resize: none; min-height: 88px; line-height: 22px; } /* Ligne dépliable qui contient une molette (comme Réglages › Date) */ .ios-row-expand { overflow: hidden; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ios-spring); } .ios-row-expand > * { min-height: 0; } .ios-row-expand.is-open { grid-template-rows: 1fr; } .ios-row-expand.is-open { border-top: .5px solid var(--ios-sep); } /* 6 · INTERRUPTEUR ------------------------------------------------------- */ .ios-switch { position: relative; flex: none; width: 51px; height: 31px; display: inline-block; } .ios-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; } .ios-switch__track { position: absolute; inset: 0; border-radius: 31px; background: var(--ios-fill-2); transition: background .22s; } .ios-switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 3px 1px rgba(0,0,0,.06); transition: transform .22s var(--ios-spring), width .18s; } .ios-switch input:checked + .ios-switch__track { background: var(--ios-green); } .ios-switch input:checked + .ios-switch__track::after { transform: translateX(20px); } .ios-switch input:active + .ios-switch__track::after { width: 33px; } .ios-switch input:checked:active + .ios-switch__track::after { transform: translateX(14px); } .ios-switch input:focus-visible + .ios-switch__track { outline: 3px solid color-mix(in srgb, var(--ios-tint) 55%, transparent); outline-offset: 2px; } .ios-switch input:disabled + .ios-switch__track { opacity: .45; } /* 7 · CONTRÔLE SEGMENTÉ -------------------------------------------------- */ .ios-segmented { --n: 2; --i: 0; position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); padding: 2px; border-radius: 9px; background: var(--ios-fill-3); min-height: 32px; } .ios-segmented::before { /* pastille glissante */ content: ""; position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc((100% - 4px) / var(--n)); border-radius: 7px; background: var(--ios-bg-elevated); box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04); transform: translateX(calc(var(--i) * 100%)); transition: transform .28s var(--ios-spring); } :root[data-theme="dark"] .ios-segmented::before { background: #636366; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ios-segmented::before { background: #636366; } } .ios-segmented button { position: relative; z-index: 1; appearance: none; border: 0; background: transparent; cursor: pointer; font: 500 13px/18px var(--ios-font); padding: 5px 8px; border-radius: 7px; white-space: nowrap; } .ios-segmented button[aria-pressed="true"] { font-weight: 600; } /* 8 · STEPPER, CURSEUR, RECHERCHE ---------------------------------------- */ .ios-stepper { display: inline-flex; flex: none; border-radius: 8px; background: var(--ios-fill-3); overflow: hidden; } .ios-stepper button { appearance: none; border: 0; background: transparent; width: 47px; height: 32px; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ios-label); } .ios-stepper button + button { border-left: .5px solid var(--ios-sep); } .ios-stepper button:active { background: var(--ios-fill); } .ios-stepper button:disabled { color: var(--ios-label-3); } .ios-slider { appearance: none; width: 100%; height: 28px; background: transparent; --_p: 50%; } .ios-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--ios-tint) var(--_p), var(--ios-fill) var(--_p)); } .ios-slider::-moz-range-track { height: 4px; border-radius: 2px; background: var(--ios-fill); } .ios-slider::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--ios-tint); } .ios-slider::-webkit-slider-thumb { appearance: none; width: 28px; height: 28px; margin-top: -12px; border-radius: 50%; background: #fff; box-shadow: 0 .5px 4px rgba(0,0,0,.12), 0 6px 13px rgba(0,0,0,.12); } .ios-slider::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 .5px 4px rgba(0,0,0,.12), 0 6px 13px rgba(0,0,0,.12); } .ios-search { position: relative; margin: 0 var(--ios-gutter) 8px; } .ios-search input { appearance: none; width: 100%; height: 36px; border: 0; outline: 0; border-radius: 10px; background: var(--ios-fill-3); padding: 0 12px 0 32px; caret-color: var(--ios-tint); } .ios-search input::placeholder { color: var(--ios-label-2); } .ios-search::before { content: ""; position: absolute; left: 9px; top: 10px; width: 16px; height: 16px; background: var(--ios-label-2); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='m10.5 10.5 4 4' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='m10.5 10.5 4 4' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; } /* 9 · LISTE DÉROULANTE iOS : bouton pop-up + menu ------------------------ */ .ios-popup-btn { appearance: none; border: 0; background: transparent; cursor: pointer; flex: none; max-width: 60%; display: inline-flex; align-items: center; gap: 5px; min-height: var(--ios-row); padding: 0; color: var(--ios-label-2); } .ios-popup-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ios-popup-btn::after { /* double chevron haut/bas */ content: ""; flex: none; width: 9px; height: 15px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 15'%3E%3Cpath d='m1.5 5 3-3 3 3M1.5 10l3 3 3-3' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 15'%3E%3Cpath d='m1.5 5 3-3 3 3M1.5 10l3 3 3-3' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; } .ios-popup-btn--tint { color: var(--ios-tint); } .ios-popup-btn[aria-expanded="true"] { opacity: .45; } .ios-select-native { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .ios-layer { position: fixed; inset: 0; z-index: 1000; } .ios-menu { position: fixed; min-width: 250px; max-width: min(320px, calc(100vw - 24px)); max-height: min(60vh, 480px); overflow: auto; border-radius: var(--ios-r-menu); background: var(--ios-material-menu); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); box-shadow: 0 10px 50px rgba(0,0,0,.22), 0 0 0 .5px rgba(0,0,0,.08); transform: scale(.25); opacity: 0; transition: transform .32s var(--ios-spring), opacity .18s; font: var(--ios-body); color: var(--ios-label); } .ios-layer.is-open .ios-menu { transform: scale(1); opacity: 1; } .ios-menu__item { appearance: none; border: 0; background: transparent; width: 100%; text-align: left; cursor: pointer; display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 10px; font: inherit; color: inherit; } .ios-menu__item + .ios-menu__item { border-top: .5px solid var(--ios-sep); } .ios-menu__item:active, .ios-menu__item:focus-visible { background: var(--ios-fill-2); outline: 0; } .ios-menu__item.is-danger { color: var(--ios-red); } .ios-menu__check { width: 14px; height: 14px; justify-self: center; visibility: hidden; } .ios-menu__item[aria-checked="true"] .ios-menu__check { visibility: visible; } .ios-menu__icon { width: 20px; height: 20px; opacity: .9; } .ios-menu__gap { height: 8px; background: var(--ios-fill-3); border-top: .5px solid var(--ios-sep); } .ios-menu__gap + .ios-menu__item { border-top: .5px solid var(--ios-sep); } .ios-menu__title { font: var(--ios-footnote); color: var(--ios-label-2); padding: 9px 16px; border-bottom: .5px solid var(--ios-sep); text-align: center; } /* 10 · MOLETTE (picker) -------------------------------------------------- */ .ios-picker { --h: 34px; position: relative; display: flex; justify-content: center; height: calc(var(--h) * 7 - 22px); padding: 0 8px; user-select: none; overflow: hidden; -webkit-mask: linear-gradient(to bottom, transparent, #000 32%, #000 68%, transparent); mask: linear-gradient(to bottom, transparent, #000 32%, #000 68%, transparent); } .ios-picker::before { /* bande de sélection */ content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: var(--h); transform: translateY(-50%); border-radius: 8px; background: var(--ios-fill-3); pointer-events: none; } .ios-wheel { position: relative; flex: 1 1 0; min-width: 0; height: 100%; overflow-y: scroll; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; outline: 0; cursor: grab; padding-block: calc((var(--h) * 7 - 22px - var(--h)) / 2); } .ios-wheel::-webkit-scrollbar { display: none; } .ios-wheel--fit { flex: 0 0 auto; } .ios-wheel__item { height: var(--h); display: flex; align-items: center; justify-content: center; padding: 0 14px; font: 400 23px/1 var(--ios-font); color: var(--ios-label); white-space: nowrap; scroll-snap-align: center; transform-origin: center; backface-visibility: hidden; will-change: transform, opacity; font-variant-numeric: tabular-nums; } .ios-wheel--start .ios-wheel__item { justify-content: flex-start; } .ios-wheel--end .ios-wheel__item { justify-content: flex-end; } .ios-wheel:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ios-tint) 55%, transparent); border-radius: 8px; } .ios-picker__unit { align-self: center; font: 600 17px/1 var(--ios-font); padding: 0 10px 0 2px; position: relative; } /* 11 · FEUILLE, FEUILLE D'ACTIONS, ALERTE -------------------------------- */ .ios-backdrop { position: absolute; inset: 0; background: var(--ios-backdrop); opacity: 0; transition: opacity .3s; } .ios-layer.is-open .ios-backdrop { opacity: 1; } .ios-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92dvh; display: flex; flex-direction: column; background: var(--ios-bg-sheet); border-radius: var(--ios-r-sheet) var(--ios-r-sheet) 0 0; transform: translateY(100%); transition: transform .5s var(--ios-spring); padding-bottom: var(--ios-safe-b); box-shadow: 0 -2px 30px rgba(0,0,0,.12); } .ios-layer.is-open .ios-sheet { transform: translateY(0); } .ios-sheet.is-dragging { transition: none; } .ios-sheet--auto { height: auto; } .ios-sheet--medium { height: 52dvh; } .ios-sheet--large { height: 92dvh; } .ios-sheet__grab { flex: none; padding: 5px 0 0; touch-action: none; cursor: grab; } .ios-sheet__grab::before { content: ""; display: block; width: 36px; height: 5px; margin: 0 auto; border-radius: 3px; background: var(--ios-label-3); } .ios-sheet__bar { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 44px; padding: 4px 8px 0; touch-action: none; } .ios-sheet__bar > :last-child { justify-self: end; } .ios-sheet__title { font: var(--ios-headline); } .ios-sheet .ios-list { background: var(--ios-bg-sheet-cell); } .ios-sheet__body { flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; padding-bottom: 24px; } .ios-actionsheet { position: absolute; left: 8px; right: 8px; bottom: calc(8px + var(--ios-safe-b)); max-width: 420px; margin: 0 auto; transform: translateY(110%); transition: transform .42s var(--ios-spring); } .ios-layer.is-open .ios-actionsheet { transform: translateY(0); } .ios-actionsheet__group { border-radius: var(--ios-r-menu); overflow: hidden; background: var(--ios-material-menu); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); } .ios-actionsheet__group + .ios-actionsheet__group { margin-top: 8px; background: var(--ios-bg-elevated); } .ios-actionsheet__head { padding: 14px 16px; text-align: center; font: var(--ios-footnote); color: var(--ios-label-2); } .ios-actionsheet__head b { display: block; font-weight: 600; } .ios-actionsheet button { appearance: none; border: 0; background: transparent; width: 100%; min-height: 57px; font: 400 20px/25px var(--ios-font); color: var(--ios-tint); cursor: pointer; border-top: .5px solid var(--ios-sep); } .ios-actionsheet__group > button:first-child { border-top: 0; } .ios-actionsheet button:active { background: var(--ios-fill-2); } .ios-actionsheet button.is-danger { color: var(--ios-red); } .ios-actionsheet button.is-cancel { font-weight: 600; } .ios-alert { position: absolute; left: 50%; top: 50%; width: 270px; border-radius: 14px; overflow: hidden; text-align: center; background: var(--ios-material-menu); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); transform: translate(-50%, -50%) scale(1.15); opacity: 0; transition: transform .25s var(--ios-spring), opacity .2s; } .ios-layer.is-open .ios-alert { transform: translate(-50%, -50%) scale(1); opacity: 1; } .ios-alert__body { padding: 19px 16px 17px; } .ios-alert__title { font: var(--ios-headline); margin: 0 0 3px; } .ios-alert__msg { font: var(--ios-footnote); margin: 0; } .ios-alert__actions { display: flex; border-top: .5px solid var(--ios-sep); } .ios-alert__actions button { flex: 1; appearance: none; border: 0; background: transparent; min-height: 44px; font: var(--ios-body); color: var(--ios-tint); cursor: pointer; } .ios-alert__actions button + button { border-left: .5px solid var(--ios-sep); } .ios-alert__actions button.is-bold { font-weight: 600; } .ios-alert__actions button.is-danger { color: var(--ios-red); } .ios-alert__actions button:active { background: var(--ios-fill-2); } /* 12 · BARRE D'ONGLETS --------------------------------------------------- */ .ios-tabbar { position: sticky; bottom: 0; z-index: 20; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 0 0 var(--ios-safe-b); background: var(--ios-material); -webkit-backdrop-filter: var(--ios-blur); backdrop-filter: var(--ios-blur); border-top: .5px solid var(--ios-sep); } .ios-tabbar__item { appearance: none; border: 0; background: transparent; cursor: pointer; position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0 3px; min-height: 49px; font: 500 10px/12px var(--ios-font); color: var(--ios-gray); text-decoration: none; } .ios-tabbar__item svg { width: 26px; height: 26px; } .ios-tabbar__item[aria-current="page"] { color: var(--ios-tint); } .ios-badge { position: absolute; top: 3px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ios-red); color: #fff; font: 400 13px/18px var(--ios-font); text-align: center; } /* 13 · MÉTIER : statuts et carte d'intervention -------------------------- */ .ios-status { --_c: var(--ios-gray); display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 11px; font: 600 12px/22px var(--ios-font); color: var(--_c); background: color-mix(in srgb, var(--_c) 15%, transparent); white-space: nowrap; } .ios-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .ios-status--planifiee { --_c: var(--ios-blue); } .ios-status--encours { --_c: var(--ios-orange); } .ios-status--terminee { --_c: var(--ios-green); } .ios-status--annulee { --_c: var(--ios-red); } .ios-status--avalider { --_c: var(--ios-purple); } .ios-inter { gap: 10px; padding-left: 8px; } .ios-inter .ios-inter__time { flex: none; width: 50px; } .ios-inter .ios-status { flex: none; } .ios-inter__bar { flex: none; width: 4px; align-self: stretch; margin: 8px 0; border-radius: 2px; background: var(--_c, var(--ios-blue)); } .ios-inter__time { font: 600 15px/20px var(--ios-font); font-variant-numeric: tabular-nums; } .ios-inter__time small { display: block; font: var(--ios-caption); color: var(--ios-label-2); } /* 14 · ADAPTATION BUREAU (≥ 768 px) : feuilles centrées, façon iPadOS ---- */ @media (min-width: 768px) { .ios-sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: min(560px, 92vw); height: auto; max-height: 86dvh; border-radius: var(--ios-r-sheet); transform: translate(-50%, -40%) scale(.96); opacity: 0; transition: transform .35s var(--ios-spring), opacity .2s; } .ios-layer.is-open .ios-sheet { transform: translate(-50%, -50%) scale(1); opacity: 1; } .ios-sheet--medium, .ios-sheet--large { height: auto; } .ios-sheet__grab { display: none; } .ios-row { min-height: 40px; } } @media (prefers-reduced-motion: reduce) { .ios *, .ios-layer * { transition-duration: .01ms !important; animation-duration: .01ms !important; } }