/* ============================================================================= Tulipe — Design System (Axe 3, 2026-09-01) Tokens + classes composants. TOUT est scopé sous `html.ds-on` : tant que le flag DESIGN_SYSTEM_ENABLED=false, ce fichier est chargé mais strictement inerte (dual-classing, zéro impact visuel). La classe `ds-on` est posée sur par app.js (public, via /api/theme) ou admin.js (via /admin/config.js). ============================================================================= */ /* ── Tokens ─────────────────────────────────────────────────────────────── */ html.ds-on { /* Palette — les variantes `-strong` garantissent un contraste WCAG AA (>= 4.5:1) pour le texte blanc ou sur fond clair. */ --ds-primary: #E87722; /* orange marque (accents, grands titres) */ --ds-primary-strong: #C2410C; /* orange AA pour boutons/liens (5.2:1) */ --ds-primary-soft: #FFF3E0; --ds-secondary: #1B2A4A; /* navy (13:1 sur blanc) */ --ds-secondary-soft: #E8EDF5; --ds-success: #2E7D32; /* 5.1:1 sur blanc */ --ds-success-soft: #E8F5E9; --ds-warning: #F57C00; /* fonds uniquement (texte sombre dessus) */ --ds-warning-strong: #8F4E00; /* 6.4:1 sur blanc */ --ds-warning-soft: #FFF3E0; --ds-danger: #C62828; /* 5.7:1 sur blanc */ --ds-danger-soft: #FFEBEE; --ds-info: #1976D2; --ds-info-soft: #E3F2FD; --ds-bg: #F5F5F5; --ds-surface: #FFFFFF; --ds-text: #333333; /* 11:1 sur --ds-bg */ --ds-text-muted: #616161; /* 6.4:1 sur blanc (remplace #9E9E9E) */ --ds-border: #E0DCD5; /* Typographie */ --ds-font: system-ui, -apple-system, "Segoe UI", sans-serif; --ds-fs-h1: 1.75rem; --ds-fs-h2: 1.4rem; --ds-fs-h3: 1.15rem; --ds-fs-h4: 1rem; --ds-fs-h5: 0.9rem; --ds-fs-h6: 0.8rem; --ds-fs-body: 1rem; --ds-fs-small: 0.85rem; /* Espacements (grille 4px) */ --ds-sp-1: 4px; --ds-sp-2: 8px; --ds-sp-3: 16px; --ds-sp-4: 24px; --ds-sp-5: 32px; /* Rayons */ --ds-r-sm: 6px; --ds-r-md: 10px; --ds-r-lg: 16px; /* Ombres */ --ds-shadow-1: 0 1px 3px rgba(0,0,0,0.10); --ds-shadow-2: 0 4px 12px rgba(0,0,0,0.15); --ds-shadow-3: 0 8px 32px rgba(0,0,0,0.20); /* Transition standard */ --ds-tr: 200ms ease-out; /* Breakpoints (référence — utilisés dans les media queries ci-dessous) : mobile < 768px / tablette 768-1023px / desktop >= 1024px */ } /* ── Base typographique ─────────────────────────────────────────────────── */ html.ds-on body { font-family: var(--ds-font); } html.ds-on h1 { font-size: var(--ds-fs-h1); } html.ds-on h2 { font-size: var(--ds-fs-h2); } html.ds-on h3 { font-size: var(--ds-fs-h3); } html.ds-on h4 { font-size: var(--ds-fs-h4); } /* ── Boutons (classe .tp-btn, posée par TulipeUI.createButton) ──────────── */ html.ds-on .tp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-sp-2); min-height: 44px; /* cible tactile */ padding: 12px 20px; border: 2px solid transparent; border-radius: var(--ds-r-md); font-family: var(--ds-font); font-size: var(--ds-fs-body); font-weight: 600; cursor: pointer; transition: background var(--ds-tr), border-color var(--ds-tr), transform 100ms ease-out, opacity var(--ds-tr); } html.ds-on .tp-btn:active { transform: scale(0.98); } html.ds-on .tp-btn:disabled { opacity: 0.55; cursor: not-allowed; } html.ds-on .tp-btn:focus-visible { outline: 3px solid var(--ds-info); outline-offset: 2px; } html.ds-on .tp-btn--primary { background: var(--ds-primary-strong); color: #fff; } html.ds-on .tp-btn--primary:hover:not(:disabled) { background: #A83608; } html.ds-on .tp-btn--secondary { background: var(--ds-secondary); color: #fff; } html.ds-on .tp-btn--secondary:hover:not(:disabled) { background: #2A3B63; } html.ds-on .tp-btn--ghost { background: transparent; color: var(--ds-primary-strong); border-color: var(--ds-primary-strong); } html.ds-on .tp-btn--ghost:hover:not(:disabled) { background: var(--ds-primary-soft); } html.ds-on .tp-btn--danger { background: var(--ds-danger); color: #fff; } html.ds-on .tp-btn--danger:hover:not(:disabled) { background: #A52020; } /* ── Cartes (TulipeUI.createCard) ───────────────────────────────────────── */ html.ds-on .tp-card { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); box-shadow: var(--ds-shadow-1); padding: var(--ds-sp-3); transition: box-shadow var(--ds-tr); } html.ds-on .tp-card:hover { box-shadow: var(--ds-shadow-2); } html.ds-on .tp-card__title { font-size: var(--ds-fs-h3); color: var(--ds-secondary); margin-bottom: var(--ds-sp-2); } html.ds-on .tp-card__actions { display: flex; gap: var(--ds-sp-2); margin-top: var(--ds-sp-3); flex-wrap: wrap; } /* ── Modale (TulipeUI.createModal) ──────────────────────────────────────── */ html.ds-on .tp-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--ds-sp-3); } html.ds-on .tp-modal { background: var(--ds-surface); border-radius: var(--ds-r-lg); box-shadow: var(--ds-shadow-3); padding: var(--ds-sp-4); max-width: 520px; width: 100%; max-height: 80vh; overflow-y: auto; } html.ds-on .tp-modal__title { margin-top: 0; color: var(--ds-secondary); font-size: var(--ds-fs-h2); } html.ds-on .tp-modal__actions { display: flex; gap: var(--ds-sp-2); margin-top: var(--ds-sp-3); justify-content: flex-end; flex-wrap: wrap; } /* ── Toasts (TulipeUI.createToast) ──────────────────────────────────────── */ html.ds-on .tp-toast-zone { position: fixed; bottom: var(--ds-sp-3); right: var(--ds-sp-3); z-index: 1100; display: flex; flex-direction: column; gap: var(--ds-sp-2); max-width: min(360px, calc(100vw - 32px)); } html.ds-on .tp-toast { padding: 12px 16px; border-radius: var(--ds-r-md); box-shadow: var(--ds-shadow-2); font-size: var(--ds-fs-small); font-weight: 600; color: var(--ds-text); background: var(--ds-surface); border-left: 4px solid var(--ds-info); } html.ds-on .tp-toast--success { border-left-color: var(--ds-success); background: var(--ds-success-soft); } html.ds-on .tp-toast--error { border-left-color: var(--ds-danger); background: var(--ds-danger-soft); } html.ds-on .tp-toast--warning { border-left-color: var(--ds-warning-strong); background: var(--ds-warning-soft); } /* ── Skeleton (TulipeUI.createSkeletonLoader) ───────────────────────────── */ html.ds-on .tp-skeleton { border-radius: var(--ds-r-sm); background: linear-gradient(90deg, #EDEAE5 25%, #F7F4F0 50%, #EDEAE5 75%); background-size: 200% 100%; } /* ── Champ de formulaire (TulipeUI.createInputField) ────────────────────── */ html.ds-on .tp-field { margin-bottom: var(--ds-sp-3); } html.ds-on .tp-field label { display: block; font-size: var(--ds-fs-small); font-weight: 600; color: var(--ds-secondary); margin-bottom: var(--ds-sp-1); } html.ds-on .tp-field input, html.ds-on .tp-field select, html.ds-on .tp-field textarea { width: 100%; padding: 12px 16px; border: 2px solid var(--ds-border); border-radius: var(--ds-r-md); font-size: var(--ds-fs-body); background: var(--ds-surface); transition: border-color var(--ds-tr); } html.ds-on .tp-field input:focus, html.ds-on .tp-field select:focus, html.ds-on .tp-field textarea:focus { border-color: var(--ds-primary-strong); outline: none; } html.ds-on .tp-field .tp-field__error { color: var(--ds-danger); font-size: var(--ds-fs-small); font-weight: 600; margin-top: var(--ds-sp-1); } html.ds-on .tp-field--error input, html.ds-on .tp-field--error select, html.ds-on .tp-field--error textarea { border-color: var(--ds-danger); background: var(--ds-danger-soft); } /* ── Badge (TulipeUI.createBadge) ───────────────────────────────────────── */ html.ds-on .tp-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; } html.ds-on .tp-badge--success { background: var(--ds-success-soft); color: var(--ds-success); } html.ds-on .tp-badge--warning { background: var(--ds-warning-soft); color: var(--ds-warning-strong); } html.ds-on .tp-badge--danger { background: var(--ds-danger-soft); color: var(--ds-danger); } html.ds-on .tp-badge--info { background: var(--ds-info-soft); color: var(--ds-info); } html.ds-on .tp-badge--neutral { background: #EEEEEE; color: var(--ds-text-muted); } /* ============================================================================= Dual-classing des éléments existants (refactor progressif, flag ON) : les classes historiques sont re-stylées avec les tokens DS. ============================================================================= */ /* Header public */ html.ds-on .tulipe-header { border-bottom-color: var(--ds-primary); padding-bottom: var(--ds-sp-3); } html.ds-on .tulipe-logo { color: var(--ds-primary-strong); } /* Boutons historiques */ html.ds-on .tulipe-btn { border-radius: var(--ds-r-md); min-height: 44px; transition: background var(--ds-tr), transform 100ms ease-out, opacity var(--ds-tr); } html.ds-on .tulipe-btn--primary { background: var(--ds-primary-strong); } html.ds-on .tulipe-btn--primary:hover { background: #A83608; } html.ds-on .tulipe-btn--ghost { color: var(--ds-primary-strong); } html.ds-on .tulipe-btn:focus-visible { outline: 3px solid var(--ds-info); outline-offset: 2px; } /* Formulaire de recherche d'adresse + champs historiques */ html.ds-on input, html.ds-on textarea, html.ds-on .tulipe-select { border-radius: var(--ds-r-md); border-color: var(--ds-border); transition: border-color var(--ds-tr); } html.ds-on input:focus, html.ds-on textarea:focus, html.ds-on select:focus { border-color: var(--ds-primary-strong); } html.ds-on .ban-suggestions { border-color: var(--ds-border); border-radius: 0 0 var(--ds-r-md) var(--ds-r-md); box-shadow: var(--ds-shadow-2); } html.ds-on .ban-suggestion:hover { background: var(--ds-primary-soft); } /* Cartes de créneaux */ html.ds-on .creneau-item { border-radius: var(--ds-r-md); border-color: var(--ds-border); box-shadow: var(--ds-shadow-1); transition: border-color var(--ds-tr), box-shadow var(--ds-tr), transform 100ms ease-out; } html.ds-on .creneau-item:hover { border-color: var(--ds-primary); box-shadow: var(--ds-shadow-2); } html.ds-on .creneau-item.selected { background: var(--ds-primary-strong); border-color: var(--ds-primary-strong); } /* Carte récap */ html.ds-on .recap-card { border-radius: var(--ds-r-lg); box-shadow: var(--ds-shadow-1); border: 1px solid var(--ds-border); } /* Modale « Conditions d'intervention » (styles inline historiques neutralisés proprement : on re-style les descendants, l'overlay garde son display flex) */ html.ds-on #modal-conditions > div { border-radius: var(--ds-r-lg) !important; box-shadow: var(--ds-shadow-3) !important; } html.ds-on #modal-conditions-fermer { background: var(--ds-secondary) !important; border-radius: var(--ds-r-md) !important; min-height: 44px; } /* Texte atténué : #9E9E9E historique (2.8:1) → gris AA */ html.ds-on .tulipe-help { color: var(--ds-text-muted); opacity: 1; } /* Admin : header + nav */ html.ds-on .admin-header { border-bottom: 2px solid var(--ds-primary); } html.ds-on .admin-nav button { border-radius: var(--ds-r-md); transition: background var(--ds-tr); } html.ds-on .admin-nav button:focus-visible { outline: 3px solid var(--ds-info); outline-offset: 2px; } /* Admin : boutons historiques */ html.ds-on .btn-primary { background: var(--ds-primary-strong); border-radius: var(--ds-r-md); min-height: 44px; } html.ds-on .btn-primary:hover { background: #A83608; } html.ds-on .btn-ghost { border-radius: var(--ds-r-md); } /* Tablette et desktop : élargissement progressif du conteneur public */ @media (min-width: 768px) { html.ds-on .tulipe-app { max-width: 560px; } } @media (min-width: 1024px) { html.ds-on .tulipe-app { max-width: 640px; } }