/* ═══════════════════════════════════════════════ TOKENS & CSS OPTIMISÉ - Regroupement des sélecteurs similaires - Réduction de la duplication de code - Utilisation de variables CSS cohérentes ═══════════════════════════════════════════════ */ :root { --bg: #0b0d11; --surface: #13161e; --surface2: #1a1e2a; --border: #232738; --border2: #2d3348; --accent: #d4903a; --accent-rgb: 212, 144, 58; --red: #e05555; --text: #dde2ed; --text2: #8a93ad; --mono: 'DM Mono', monospace; --sans: 'DM Sans', sans-serif; --serif: 'Fraunces', serif; --radius: 10px; --radius-sm: 6px; --transition: 0.18s ease; --link: #5b9cf6; --link-hover: #91bcff; --tag-accent: #d4903a; --tag-accent-rgb: 212, 144, 58; } /* Palettes de couleurs — source unique via custom properties. Pour ajouter une couleur : ajouter UNE ligne à COLOR_PALETTE en haut du JS et un trio (--pal-, --pal--rgb) ci-dessous. */ :root { --pal-amber: #d4903a; --pal-amber-rgb: 212,144,58; --pal-blue: #82C8E5; --pal-blue-rgb: 130,200,229; --pal-pink: #FC8EAC; --pal-pink-rgb: 252,142,172; --pal-kaki: #D5C58A; --pal-kaki-rgb: 213,197,138; --pal-citrouille: #FF7518; --pal-citrouille-rgb: 255,117,24; --pal-champagne: #F7E6CA; --pal-champagne-rgb: 247,230,202; --pal-silver: #8a9bb5; --pal-silver-rgb: 138,155,181; --pal-pistache: #84B067; --pal-pistache-rgb: 132,176,103; } .palette-amber { --accent:var(--pal-amber); --accent-rgb:var(--pal-amber-rgb); } .palette-blue { --accent:var(--pal-blue); --accent-rgb:var(--pal-blue-rgb); } .palette-pink { --accent:var(--pal-pink); --accent-rgb:var(--pal-pink-rgb); } .palette-kaki { --accent:var(--pal-kaki); --accent-rgb:var(--pal-kaki-rgb); } .palette-citrouille { --accent:var(--pal-citrouille); --accent-rgb:var(--pal-citrouille-rgb); } .palette-champagne { --accent:var(--pal-champagne); --accent-rgb:var(--pal-champagne-rgb); } .palette-silver { --accent:var(--pal-silver); --accent-rgb:var(--pal-silver-rgb); } .palette-pistache { --accent:var(--pal-pistache); --accent-rgb:var(--pal-pistache-rgb); } /* ─── Mode clair ────────────────────────────────────────────────────────────── Override des tokens de surface/texte/lien quand .theme-light est appliqué sur . Les couleurs d'accent (palettes) restent identiques pour préserver l'identité visuelle. La preview du tag suit le thème via les mêmes tokens, ce qui donne un tag clair cohérent avec l'éditeur. ─────────────────────────────────────────────────────────────────────────── */ :root.theme-light { --bg: #f5f6f9; --surface: #ffffff; --surface2: #eef0f5; --border: #d8dde6; --border2: #c2c8d4; --text: #1a1d24; --text2: #5a6275; --link: #2563d4; --link-hover: #1e4dab; } /* ─── Phase 1 — Polices personnalisables du tag ────────────────────────────── - --tag-font-body : corps (valeurs, notes, contenu courant) du preview - --tag-font-display: titres principaux (nom, header, titles serif italic) Les LABELS/MRZ/codes restent en var(--mono) — c'est leur identité visuelle. Pour ajouter une police : importer la fonte au , ajouter un trio --tag-fnt- (body/display si différents) et une classe .tag-font-. ─────────────────────────────────────────────────────────────────────────── */ :root { --tag-fnt-mono-body: 'DM Mono', monospace; --tag-fnt-mono-display: 'DM Mono', monospace; --tag-fnt-sans-body: 'DM Sans', sans-serif; --tag-fnt-sans-display: 'DM Sans', sans-serif; --tag-fnt-serif-body: 'Fraunces', serif; --tag-fnt-serif-display: 'Fraunces', serif; --tag-fnt-rounded-body: 'Quicksand', sans-serif; --tag-fnt-rounded-display: 'Quicksand', sans-serif; --tag-fnt-display-body: 'DM Sans', sans-serif; --tag-fnt-display-display: 'Playfair Display', serif; /* Défauts (= sans, identique à l'ancien comportement) */ --tag-font-body: var(--tag-fnt-sans-body); --tag-font-display: var(--tag-fnt-sans-display); } .tag-font-mono { --tag-font-body: var(--tag-fnt-mono-body); --tag-font-display: var(--tag-fnt-mono-display); } .tag-font-sans { --tag-font-body: var(--tag-fnt-sans-body); --tag-font-display: var(--tag-fnt-sans-display); } .tag-font-serif { --tag-font-body: var(--tag-fnt-serif-body); --tag-font-display: var(--tag-fnt-serif-display); } .tag-font-rounded { --tag-font-body: var(--tag-fnt-rounded-body); --tag-font-display: var(--tag-fnt-rounded-display); } .tag-font-display { --tag-font-body: var(--tag-fnt-display-body); --tag-font-display: var(--tag-fnt-display-display); } .tag-palette-amber { --tag-accent:var(--pal-amber); --tag-accent-rgb:var(--pal-amber-rgb); } .tag-palette-blue { --tag-accent:var(--pal-blue); --tag-accent-rgb:var(--pal-blue-rgb); } .tag-palette-pink { --tag-accent:var(--pal-pink); --tag-accent-rgb:var(--pal-pink-rgb); } .tag-palette-kaki { --tag-accent:var(--pal-kaki); --tag-accent-rgb:var(--pal-kaki-rgb); } .tag-palette-citrouille { --tag-accent:var(--pal-citrouille); --tag-accent-rgb:var(--pal-citrouille-rgb); } .tag-palette-champagne { --tag-accent:var(--pal-champagne); --tag-accent-rgb:var(--pal-champagne-rgb); } .tag-palette-silver { --tag-accent:var(--pal-silver); --tag-accent-rgb:var(--pal-silver-rgb); } .tag-palette-pistache { --tag-accent:var(--pal-pistache); --tag-accent-rgb:var(--pal-pistache-rgb); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14px; line-height: 1.5; min-height: 100vh; } body::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 40px 40px; opacity: 0.18; pointer-events: none; z-index: 0; } a { color: var(--text2); text-decoration: none; } /* Opt 21 — X5 : focus ring unifié pour les contrôles de formulaire. Ajoute un halo accent subtil en plus des règles existantes, sans les remplacer. Cible spécifiquement les inputs textuels / textareas / selects pour ne pas polluer les boutons qui gèrent déjà leur propre outline. */ .field-group input:focus-visible, .field-group textarea:focus-visible, .field-group select:focus-visible, .login-box input:focus-visible, .custom-field-row input:focus-visible, .phone-row input:focus-visible, .preset-search:focus-visible, .flag-search:focus-visible, .phone-flag-popup-search:focus-visible, .pref-select:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.22); border-color: var(--accent); } /* Opt 21 — (3) VALEURS saisies en DM Sans pour lisibilité. Chaque règle ci-dessous (login, field-group, custom-field-row, phone-row, preset-search, flag-search, phone-flag-popup-search, pref-select, acc-item-label) a été basculée de var(--mono) à var(--sans) directement. Les labels, boutons, status, onglets, séparateurs, tpl-option-label et éléments structurels restent en var(--mono) pour préserver l'identité visuelle. Grep « TEXT-SANS » pour retrouver tous les points basculés. */ /* ═══════════════════════════════════════════════ COMPOSANTS RÉUTILISABLES ═══════════════════════════════════════════════ */ button { font-family: var(--mono); font-size: 18px; letter-spacing: 0.5px; padding: 6px 12px; border-radius: var(--radius-sm); border: none; cursor: pointer; transition: all var(--transition); } .btn-full { width: 100%; padding: 13px; font-size: 13px; font-weight: 500; display: flex; align-items: center; justify-content: center; } .btn-primary, .btn-secondary, .btn-add { background: transparent; border: 1px solid var(--border2); color: var(--text2); } .btn-primary { font-size: 12px; padding: 6px 12px; display: flex; align-items: center; gap: 5px; } .btn-primary:hover, .btn-secondary:hover, .btn-add:hover, .icon-btn:hover, .icon-btn-info:hover, .icon-btn-left:hover, .icon-btn-left_1:hover { border-color: var(--accent); color: var(--accent); } .btn-add { font-size: 13px; font-weight: 900; padding: 4px 10px; display: flex; align-items: center; gap: 5px; } /* Boutons icônes */ .info-group-dev label { display: block; font-size: 14px; font-family: var(--mono); color: var(--red); } .info-group label { display: block; font-size: 12px; font-family: var(--mono); color: var(--text2); } .icon-btn, .icon-btn-info, .icon-btn-left, .icon-btn-left_1 { height: 30px; padding: 0; border-radius: var(--radius-sm); border: 1px solid var(--border2); background: transparent; color: var(--text2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition); position: relative; } .icon-btn, .icon-btn-left, .icon-btn-left_1 { width: 30px; } .icon-btn-info { width: 120px; } .icon-btn:hover, .icon-btn-left:hover, .icon-btn-left_1:hover { transform: scale(1.08); } .icon-btn svg, .icon-btn-info svg, .icon-btn-left svg, .icon-btn-left_1 svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Opt 21 — U2 : état disabled + spinner de chargement sur .icon-btn. Utilisé par le bouton Save pendant le fetch vers save.php. Le spinner réutilise le pseudo-élément ::after (la tooltip est neutralisée via ::before). */ .icon-btn:disabled, .icon-btn-info:disabled, .icon-btn-left:disabled, .icon-btn-left_1:disabled { opacity: 0.55; cursor: not-allowed; } .icon-btn.btn-loading { pointer-events: none; position: relative; } .icon-btn.btn-loading svg { visibility: hidden; } /* Neutralise la flèche de tooltip pendant le chargement. */ .icon-btn.btn-loading::before { display: none; } /* Le spinner : anneau CSS centré, animé via rotate sur un wrapper pour ne pas interférer avec un éventuel translate dans transform. */ .icon-btn.btn-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: transparent; border: 2px solid rgba(var(--accent-rgb), 0.22); border-top-color: var(--accent); border-radius: 50%; opacity: 1; transform: none; animation: btn-spin 0.7s linear infinite; /* On annule la décoration de tooltip héritée. */ white-space: normal; padding: 0; color: transparent; pointer-events: none; } @keyframes btn-spin { to { transform: rotate(360deg); } } /* Tooltips unifiés */ [class*="icon-btn"]::after { content: attr(data-tip); position: absolute; background: var(--surface2); border: 1px solid var(--border2); color: var(--text); font-family: var(--mono); font-size: 10px; letter-spacing: 1px; padding: 6px 9px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--transition); z-index: 100; } .icon-btn::after, .icon-btn-info::after { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); } .icon-btn-left::after, .icon-btn-left_1::after { right: calc(100% + 5px); top: 50%; transform: translateY(-50%); } [class*="icon-btn"]::before { content: ''; position: absolute; width: 6px; height: 6px; background: var(--surface2); opacity: 0; transition: opacity var(--transition); z-index: 99; } .icon-btn::before, .icon-btn-info::before { bottom: calc(100% + 3px); left: 50%; border-left: 1px solid var(--border2); border-top: 1px solid var(--border2); transform: translateX(-50%) rotate(45deg); } .icon-btn-left::before, .icon-btn-left_1::before { right: calc(100% + 2px); top: 50%; border-right: 1px solid var(--border2); border-top: 1px solid var(--border2); transform: translateY(-50%) rotate(45deg); } [class*="icon-btn"]:hover::after, [class*="icon-btn"]:hover::before { opacity: 1; } /* ═══════════════════════════════════════════════ LOGIN ═══════════════════════════════════════════════ */ #login-overlay { position: fixed; inset: 0; background: var(--bg); /* display: none par défaut → évite le flash d'overlay au refresh quand une session est restaurée depuis sessionStorage. Le JS de boot affiche l'overlay (display: flex) seulement si aucune session n'est disponible. */ display: none; align-items: center; justify-content: center; z-index: 100; } .login-box { background: var(--surface); border: 1px solid var(--border2); border-radius: 20px; padding: 52px 44px; width: 380px; text-align: center; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6); position: relative; } .login-box::before { content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 60px; height: 2px; background: var(--accent); border-radius: 2px; } .login-logo { font-family: var(--serif); font-style: italic; font-weight: bold; font-size: 28px; letter-spacing: 3px; color: var(--accent); font-variant: small-caps; margin-bottom: 6px; } .login-box p { font-size: 13px; color: var(--text2); margin-bottom: 32px; } .login-box input { width: 100%; background: var(--bg); border: 1px solid var(--border2); border-radius: var(--radius-sm); color: var(--text); font-family: var(--sans); /* TEXT-SANS */ font-size: 16px; padding: 13px 16px; outline: none; margin-bottom: 12px; transition: border-color var(--transition), box-shadow var(--transition); letter-spacing: 1px; text-align: center; } #username { letter-spacing: 1px; text-transform: lowercase; } .login-box input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12); } #pwd:-webkit-autofill, #pwd:-webkit-autofill:hover, #pwd:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--bg) inset !important; -webkit-text-fill-color: var(--text2) !important; caret-color: var(--text); border-color: var(--accent); } .login-error { font-family: var(--mono); font-size: 11px; color: var(--red); margin-top: 10px; min-height: 16px; } /* ═══════════════════════════════════════════════ MODAL ═══════════════════════════════════════════════ */ #modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 200; } #modal-overlay.open { display: flex; } .modal { background: var(--surface); border: 1px solid var(--border2); border-radius: 16px; padding: 32px; width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5); } .modal-title-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .modal-title { font-family: var(--mono); font-weight: 600; font-size: 13px; letter-spacing: 3px; margin-bottom: 24px; color: var(--accent); text-transform: uppercase; display: flex; align-items: center; gap: 8px; } .modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; } /* ═══ Custom confirm dialog ═══ Remplace le confirm() natif (préfixe d'origine "www.hanot.fr says:" non stylable). Z-index 250 pour passer au-dessus de #modal-overlay (200) si jamais les deux étaient ouverts. */ #confirm-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 250; } #confirm-overlay.open { display: flex; } .modal-confirm { width: 420px; max-width: calc(100vw - 32px); padding: 24px; } .modal-confirm .modal-title { margin-bottom: 14px; } .confirm-message { font-family: var(--mono); font-size: 13px; line-height: 1.5; color: var(--text); margin-bottom: 8px; white-space: pre-line; } .radio-group { display: flex; gap: 8px; margin-bottom: 14px; } .radio-item { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; cursor: pointer; padding: 8px 14px; border: 1px solid var(--border2); border-radius: var(--radius-sm); transition: all var(--transition); color: var(--text2); } .radio-item:hover { border-color: var(--accent); color: var(--text); } .radio-item.selected { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), 0.06); } .radio-item input { display: none; } /* Flag picker */ .flag-picker { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; max-height: 110px; overflow-y: auto; padding: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); } .flag-opt { font-size: 22px; cursor: pointer; padding: 3px 5px; border-radius: 5px; border: 2px solid transparent; transition: 0.12s; } .flag-opt:hover { background: var(--border2); } .flag-opt.selected { border-color: var(--accent); } /* Preset search */ .preset-search, .flag-search { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--sans); /* TEXT-SANS */ font-style: italic; font-size: 12px; padding: 7px 10px; outline: none; margin-bottom: 6px; transition: border-color var(--transition); } .preset-search:focus, .flag-search:focus { border-color: var(--accent); } .preset-list { max-height: 160px; overflow-y: auto; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 4px; } .preset-list-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-family: var(--mono); font-size: 12px; color: var(--text2); cursor: pointer; transition: background var(--transition), color var(--transition); border-bottom: 1px solid var(--border); } .preset-list-item:last-child { border-bottom: none; } .preset-list-item:hover { background: var(--surface2); color: var(--text); } .preset-list-item.selected { background: rgba(var(--accent-rgb), 0.08); color: var(--accent); } .preset-list-item .preset-flag { font-size: 16px; flex-shrink: 0; } .preset-list-empty { padding: 12px 10px; font-family: var(--mono); font-size: 11px; color: var(--text2); text-align: center; font-style: italic; } /* ═══════════════════════════════════════════════ PREFERENCES MENU ═══════════════════════════════════════════════ */ .pref-wrap { position: relative; display: flex; align-items: center; gap: 10px; } .pref-dropdown { position: absolute; right: 0; top: calc(100% + 8px); background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--radius); padding: 16px 18px; width: 230px; box-shadow: 0 20px 48px rgba(0, 0, 0, 0.65); display: none; z-index: 60; } .pref-dropdown.open { display: block; } .pref-section { margin-bottom: 14px; } .pref-section:last-child { margin-bottom: 0; } .pref-section-title{ font-family: var(--mono); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; margin-bottom: 5px; gap: 8px; } .pref-section-label { font-family: var(--mono); font-size: 9px; letter-spacing: 1.7px; text-transform: uppercase; color: var(--text2); margin-bottom: 4px; } .pref-divider { height: 1px; background: var(--border); margin: 5px 0; } .pref-color-swatches { display: flex; gap: 8px; align-items: center; padding: 2px 0; } .pref-color-swatch { width: 18px; height: 18px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform var(--transition), border-color var(--transition); flex-shrink: 0; } .pref-color-swatch:hover { transform: scale(1.2); } .pref-color-swatch.active { border-color: var(--text); transform: scale(1.15); } .pref-tag-color-swatch { width: 18px; height: 18px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform var(--transition), border-color var(--transition); flex-shrink: 0; } .pref-tag-color-swatch:hover { transform: scale(1.2); } .pref-tag-color-swatch.active { border-color: var(--text); transform: scale(1.15); } /* Switch thème clair / sombre */ .pref-theme-toggle { display: inline-flex; gap: 4px; padding: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; } .pref-theme-btn { width: 28px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; border: none; background: transparent; color: var(--text2); border-radius: 999px; cursor: pointer; transition: background var(--transition), color var(--transition); padding: 0; line-height: 1; } .pref-theme-btn:hover { color: var(--text); } .pref-theme-btn.active { background: var(--accent); color: var(--bg); } .pref-theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Phase 1 — Échantillons de polices "Aa" sous Préférences > Tag font. Les 5 échantillons restent sur UNE seule ligne (flex-wrap: nowrap) et partagent l'espace disponible à parts égales (flex: 1 1 0). */ .pref-font-swatches { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 4px; } .pref-tag-font-swatch { flex: 1 1 0; min-width: 0; height: 32px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--border2); border-radius: var(--radius-sm); color: var(--text); font-size: 16px; cursor: pointer; user-select: none; transition: transform var(--transition), border-color var(--transition), background var(--transition); /* La classe .tag-font-* applique le tag-font-display à elle-même via spec ci-dessous */ } .pref-tag-font-swatch:hover { transform: scale(1.08); border-color: var(--accent); } .pref-tag-font-swatch.active { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.12); transform: scale(1.05); } .pref-tag-font-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Chaque échantillon utilise sa propre police pour montrer le rendu */ .pref-tag-font-swatch.tag-font-mono { font-family: var(--tag-fnt-mono-display); } .pref-tag-font-swatch.tag-font-sans { font-family: var(--tag-fnt-sans-display); font-weight: 500; } .pref-tag-font-swatch.tag-font-serif { font-family: var(--tag-fnt-serif-display); font-style: italic; font-weight: 600; } .pref-tag-font-swatch.tag-font-rounded { font-family: var(--tag-fnt-rounded-display); font-weight: 600; } .pref-tag-font-swatch.tag-font-display { font-family: var(--tag-fnt-display-display); font-style: italic; font-weight: 700; } .pref-select { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--sans); /* TEXT-SANS */ font-size: 12px; padding: 7px 7px; outline: none; cursor: pointer; transition: border-color var(--transition); } .pref-select:focus { border-color: var(--accent); } /* ═══════════════════════════════════════════════ APP SHELL ═══════════════════════════════════════════════ */ .app-shell { display: grid; grid-template-columns: 1fr 380px; grid-template-rows: auto 1fr; min-height: 100vh; position: relative; z-index: 1; } /* Top bar */ .topbar { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: stretch; padding: 0 32px; border-bottom: 1px solid var(--border); background: rgba(11, 13, 17, 0.9); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10; } .topbar-brand { display: flex; flex-direction: row; align-items: center; gap: 10px; padding-top: 8px; } .topbar-brand-name { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 20px; letter-spacing: 1px; color: var(--accent); font-variant: small-caps; border: 1px solid rgba(var(--accent-rgb), 0.35); border-radius: 20px; padding: 8px 8px; background: rgba(var(--accent-rgb), 0.06); } .topbar-saved-at { display: flex; align-items: center; justify-content: flex-end; gap: 0; padding: 6px 0 8px; } /* Chip "tag actif" : positionné en haut à droite du topbar, opposé au titre "Luggage Tag Editor", aligné verticalement sur le milieu du titre. Couleur basée sur --accent (couleur d'interface de l'éditeur en cours). Note : .topbar a déjà position: sticky (ligne 851) qui établit un positioning context — pas besoin de la repasser en relative. */ .topbar-tag { position: absolute; /* Alignement vertical : milieu du topbar-brand. Le brand a padding-top: 8px, font-size 20px et padding 8/8. Son centre est à ~24 px du haut. */ top: 24px; transform: translateY(-50%); right: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid rgba(var(--accent-rgb), 0.40); border-radius: 14px; background: rgba(var(--accent-rgb), 0.08); color: var(--accent); font-family: var(--mono); font-size: 10px; letter-spacing: 0.4px; white-space: nowrap; max-width: 200px; z-index: 10; } .topbar-tag-icon { display: inline-flex; align-items: center; font-size: 14px; line-height: 1; } .topbar-tag-icon svg { display: block; width: 1em; height: 1em; } .topbar-tag-label { overflow: hidden; text-overflow: ellipsis; } /* Séparateur vertical entre message de statut et timestamp */ .topbar-saved-at .status:not(:empty) { border-right: 1px solid var(--border2); margin-right: 10px; padding-right: 10px; } .topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 6px 0 8px; } .status { font-family: var(--mono); font-size: 10px; min-height: 16px; transition: color 0.3s; color: transparent; } .status.ok { color: var(--accent); } .status.err { color: var(--red); } .saved-at { font-family: var(--mono); font-size: 10px; color: var(--accent); white-space: nowrap; opacity: 0.85; text-align: right; } /* Tooltip USERID sur user-label */ .saved-at[data-tip] { position: relative; cursor: default; } .saved-at[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--surface2); border: 1px solid var(--border2); color: var(--text2); font-family: var(--mono); font-size: 10px; letter-spacing: 1px; padding: 6px 9px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--transition), transform var(--transition); z-index: 100; } .saved-at[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); } /* ═══════════════════════════════════════════════ MAIN COLUMN ═══════════════════════════════════════════════ */ .main-col { padding: 28px 32px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; } /* ═══════════════════════════════════════════════ SIDEBAR ═══════════════════════════════════════════════ */ .sidebar { border-left: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; position: sticky; top: 72px; height: calc(100vh - 72px); overflow-y: auto; } .sidebar-header { padding: 16px 20px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .sidebar-label { font-family: var(--mono); font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--text2); } .preview-wrap { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 20px 16px; } /* ═══════════════════════════════════════════════ CARDS / SECTIONS ═══════════════════════════════════════════════ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .card-header, .card-header1 { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; /* Hauteur uniforme : 52 px = padding 28 + bouton 24 (réduit ci-dessous). Les headers sans bouton (Données personnelles) sont bumpés au même 52 px par min-height. Tous les card-header ont donc exactement la même hauteur. */ min-height: 52px; box-sizing: border-box; } .card-header1 { padding: 8px 20px; } /* Bouton + dans les card-header : ramené de 30×30 à 24×24 pour matcher la min-height. Visible mais moins encombrant. */ .card-header .icon-btn-left, .card-header .icon-btn-left_1 { width: 24px; height: 24px; } .card-title { font-family: var(--mono); font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 8px; } .card-title-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .card-body { padding: 20px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* ═══════════════════════════════════════════════ FORM FIELDS ═══════════════════════════════════════════════ */ .field-group { margin-bottom: 14px; } .field-group:last-child { margin-bottom: 0; } .field-group label { display: block; font-size: 10px; font-family: var(--mono); font-weight: 500; color: var(--text2); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 5px; } .field-group input, .field-group textarea, .field-group select { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--sans); /* TEXT-SANS */ font-size: 15px; letter-spacing: 0.2px; /*font-variant-caps: small-caps;*/ padding: 9px 12px; outline: none; transition: border-color var(--transition), box-shadow var(--transition); } .field-group input:focus, .field-group textarea:focus, .field-group select:focus { /*roro*/ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1); } /* ─── Neutralisation de l'autofill Chrome/Safari (fond jaune/blanc forcé) ─── On ré-applique le fond sombre via un box-shadow interne (qui prime sur le background jaune imposé par le navigateur) et on force la couleur du texte en variable --text. La transition très longue est un fallback classique pour éviter le clignotement à l'autofill. */ .field-group input:-webkit-autofill, .field-group input:-webkit-autofill:hover, .field-group input:-webkit-autofill:focus, .field-group input:-webkit-autofill:active, .field-group textarea:-webkit-autofill, .field-group textarea:-webkit-autofill:hover, .field-group textarea:-webkit-autofill:focus, .field-group select:-webkit-autofill, .phone-row input:-webkit-autofill, .phone-row input:-webkit-autofill:hover, .phone-row input:-webkit-autofill:focus, .phone-row input:-webkit-autofill:active, .custom-field-row input:-webkit-autofill, .custom-field-row input:-webkit-autofill:hover, .custom-field-row input:-webkit-autofill:focus, .custom-field-row input:-webkit-autofill:active, .login-box input:-webkit-autofill, .login-box input:-webkit-autofill:hover, .login-box input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--bg) inset !important; box-shadow: 0 0 0 1000px var(--bg) inset !important; -webkit-text-fill-color: var(--text) !important; caret-color: var(--text); transition: background-color 5000s ease-in-out 0s; } /* Préserver le halo de focus quand le champ est aussi autofilled */ .field-group input:-webkit-autofill:focus, .field-group textarea:-webkit-autofill:focus, .phone-row input:-webkit-autofill:focus, .custom-field-row input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--bg) inset, 0 0 0 3px rgba(var(--accent-rgb), 0.1) !important; box-shadow: 0 0 0 1000px var(--bg) inset, 0 0 0 3px rgba(var(--accent-rgb), 0.1) !important; border-color: var(--accent); } /* Section separator */ .sep { font-family: var(--mono); font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent); margin: 20px 0 14px; display: flex; align-items: center; gap: 10px; } .sep::before { content: ''; width: 16px; height: 1px; background: var(--accent); opacity: 0.5; } .sep::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* Bouton "+" générique (utilisé dans les sep ou à côté d'un label) */ .sep-add-btn { width: 22px; height: 22px; border-radius: var(--radius-sm); border: 1px solid var(--border2); background: transparent; color: var(--text2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; line-height: 1; padding: 0; font-family: var(--mono); transition: all var(--transition); flex-shrink: 0; } .sep-add-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), 0.08); } /* Variante : titre de section .sep avec bouton à droite (le bouton passe après le filet) */ .sep.sep-with-action::after { order: 1; } .sep.sep-with-action > .sep-add-btn { order: 2; } /* Label de field-group avec bouton d'action à droite (ex. "Téléphone +") */ .label-with-action { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 5px; } .label-with-action > label { margin: 0; } /* ═══════════════════════════════════════════════ LANGUAGE TOGGLES ═══════════════════════════════════════════════ */ .lang-toggles { display: flex; flex-wrap: wrap; gap: 8px; } .toggle-item { display: flex; align-items: center; gap: 7px; background: var(--bg); border: 1px solid var(--border2); border-radius: 8px; padding: 7px 11px; cursor: pointer; transition: all var(--transition); user-select: none; font-family: var(--mono); font-size: 11px; color: var(--text2); } .toggle-item:hover { border-color: var(--accent); color: var(--text); } .toggle-item.enabled { border-color: var(--accent); color: var(--text); } .toggle-item.dragging { opacity: 0.4; border-style: dashed; } .toggle-item.drag-over { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); } .toggle-switch { width: 28px; height: 14px; background: var(--border2); border-radius: 7px; position: relative; transition: background var(--transition); flex-shrink: 0; } .toggle-item.enabled .toggle-switch { background: var(--accent); } .toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: transform var(--transition); } .toggle-item.enabled .toggle-switch::after { transform: translateX(14px); } .toggle-flag { font-size: 15px; } .toggle-drag, .toggle-remove, .toggle-edit { font-size: 12px; opacity: 0.7; cursor: pointer; flex-shrink: 0; line-height: 1; position: relative; height: 20px; display: inline-flex; align-items: center; } .toggle-drag { cursor: grab; } .toggle-drag:active { cursor: grabbing; } .toggle-drag:hover, .toggle-remove:hover, .toggle-edit:hover { opacity: 1; } .toggle-remove:hover { color: var(--red); } .toggle-edit:hover { color: var(--accent); } .toggle-item.lang-locked { cursor: default; } .toggle-item.lang-locked .toggle-switch { opacity: 0.7; pointer-events: none; } .toggle-item.lang-locked::after { content: '🔒'; font-size: 10px; margin-left: 2px; opacity: 0.3; } .toggle-note { font-size: 10px; color: var(--red); font-family: var(--mono); margin-top: 8px; display: none; } .toggle-note.visible { display: block; } .toggle-label-text { transition: opacity 0.15s, max-width 0.2s; max-width: 120px; overflow: hidden; white-space: nowrap; } .hide-lang-names .toggle-label-text { opacity: 0; max-width: 0; } /* Pref toggle */ .pref-lang-names-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; width: fit-content; padding: 2px 0; } .pref-lang-names-toggle .toggle-switch { flex-shrink: 0; } .pref-lang-names-toggle.enabled .toggle-switch { background: var(--accent); } .pref-lang-names-toggle.enabled .toggle-switch::after { transform: translateX(14px); } /* ═══════════════════════════════════════════════ PHONE ROWS ═══════════════════════════════════════════════ */ .phone-row-wrap { position: relative; } .phone-row { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; position: relative; /* pour héberger le popup drapeau */ } .phone-row input { flex: 1; min-width: 0; } /* Bouton ✕ de suppression d'une ligne téléphone (caché s'il n'y en a qu'une) */ .phone-remove-btn { width: 26px; height: 26px; flex-shrink: 0; border-radius: var(--radius-sm); border: 1px solid var(--border2); background: transparent; color: var(--text2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: all var(--transition); padding: 0; font-family: var(--mono); line-height: 1; } .phone-remove-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), 0.08); } /* Opt 21 — (2) : règle d'erreur consolidée + halo 3px aligné sur le focus-ring X5. Couvre téléphone, email, URL. Les 3 règles individuelles restent pour la spécificité mais pointent toutes vers le même rendu. */ .phone-row input.phone-invalid, .phone-row input.phone-invalid:focus, .field-group input.email-invalid, .field-group input.email-invalid:focus, .field-group input.web-invalid, .field-group input.web-invalid:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(224, 85, 85, 0.20); } /*.phone-row input.phone-valid { border-color: var(--border); box-shadow: 0 0 0 2px rgba(var(--border-rgb), 0.1); } */ .phone-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.1); } /* Animation shake bouton Save en cas d'erreur de validation */ @keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } } .btn-shake { animation: shake 0.38s ease; } /* État intermédiaire pendant la vérification DNS/MX de l'email (halo 3px aligné). */ .field-group input.email-checking, .field-group input.email-checking:focus { border-color: var(--text2); box-shadow: 0 0 0 3px rgba(138, 147, 173, 0.18); } /* Pas de surlignage persistant quand l'URL est valide (cohérence avec email-valid) .field-group input.web-valid, .field-group input.web-valid:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.12); }*/ /* Wrapper champ web + bouton lien */ .web-input-wrap { display: flex; gap: 6px; align-items: center; } .web-input-wrap input { flex: 1; min-width: 0; } .web-open-btn { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--border2); background: transparent; color: var(--text2); cursor: pointer; font-size: 13px; transition: border-color var(--transition), color var(--transition), opacity var(--transition); opacity: 0; pointer-events: none; text-decoration: none; line-height: 1; } .web-open-btn.visible { opacity: 1; pointer-events: all; } .web-open-btn:hover { border-color: var(--accent); color: var(--accent); } .phone-row .app-btns { display: flex; gap: 2px; flex-shrink: 0; } .phone-flag-btn { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; transition: all var(--transition); padding: 0; } .phone-flag-btn:hover { border-color: var(--accent); } .phone-flag-popup { position: absolute; z-index: 50; background: var(--surface2); border: 1px solid var(--border2); border-radius: var(--radius); padding: 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); width: 260px; } .phone-flag-popup-search { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--sans); /* TEXT-SANS */ font-size: 12px; padding: 6px 10px; outline: none; margin-bottom: 8px; } .phone-flag-popup-search:focus { border-color: var(--accent); } .phone-flag-grid { display: flex; flex-wrap: wrap; gap: 3px; max-height: 130px; overflow-y: auto; } /* Opt 22 — accepte aussi