/* ========================================================================== Interface v2 — coquille (refonte UX 25/08/2026, session refonte-ux-crm) ========================================================================== Tout est scopé sous html.ui-v2 : tant que la classe n'est pas posée sur (drapeau localStorage "sobria-ui-v2", voir ui-v2.js), CE FICHIER NE CHANGE RIEN à l'interface actuelle. C'est le mécanisme de retour arrière exigé par le cahier des charges : retirer le drapeau suffit. Les couleurs viennent de design-tokens.css (chargé avant) ; la v2 pose data-theme="clair" sur , donc --fond-page = crème, --texte = nuit. Règles du cahier §8 : radius 8 px (boutons/champs), 12 px (cartes), 4 px (badges) ; grille de 8 points ; cibles 44 px ; un seul bouton primaire. ========================================================================== */ html.ui-v2 { --v2-sidebar-largeur: 232px; --v2-topbar-hauteur: 64px; /* Texte de la sidebar nuit : mesuré sur #14213B (fond de la sidebar), pas sur les cartes — le piège du 07/08 était de mesurer sur le mauvais fond. #c9cfdd donne 9,8:1 sur nuit ; l'atténué #96a0b5 donne 4,9:1. */ --v2-nav-texte: #c9cfdd; --v2-nav-texte-attenue: #96a0b5; --v2-nav-actif-fond: #22304f; --v2-bordure-douce: #e5dfd2; /* Thème clair VERROUILLÉ (02/09/2026). design-tokens.css rend les jetons sombres par défaut et clairs sous data-theme="clair", que ui-v2.js pose ; mais un hôte qui réécrit data-theme (une visionneuse d'aperçu l'a fait : fond nuit, chiffres illisibles — « on va abîmer nos yeux ») remettait tout le CRM en sombre. Ici la v2 dit ses couleurs elle-même — mêmes valeurs que [data-theme="clair"] — et color-scheme:light garde les contrôles natifs (sélecteur de date, listes) clairs quand le système est en sombre. */ color-scheme: light; --fond-page: var(--sobria-creme); --fond-surface: #ffffff; --fond-surface-2: var(--creme-claire); --fond-survol: #efeade; --texte: var(--sobria-nuit); --texte-attenue: var(--sobria-ardoise); --bordure: #ded7c8; --lien: #a05f27; /* ── Peau de compatibilité des écrans v1 ────────────────────────────── Les écrans pas encore refaits consomment les anciennes variables de style.css, figées sombres (--nuit = fonds, --creme = TEXTE clair, mesuré : --creme n'est utilisée QUE comme couleur de texte et --nuit QUE comme fond). En thème clair on inverse donc les rôles ici — les écrans v1 restent lisibles dans la coquille v2 en attendant leur refonte, sans toucher style.css. Chaque écran refait cesse d'en dépendre (il utilise les jetons --fond-… et --texte). Piège vécu ici même : écrire « fond-étoile-barre-oblique » dans ce commentaire le fermait prématurément et avalait la déclaration suivante. */ --nuit: #f6f3ea; /* anciens fonds de page/puits → clair */ --nuit-2: #ffffff; /* cartes → blanc */ --nuit-3: #e7e1d2; /* surfaces relevées et bordures → sable */ --creme: #1d2843; /* texte principal → nuit (13,9:1 sur blanc) */ --ardoise: #555c6e; /* texte secondaire (6,5:1 sur blanc) */ --cuivre-clair: #a05f27; /* liens : cuivre assombri, AA sur clair */ } /* ------------------------------------------------------------- squelette */ html.ui-v2 body { background: var(--fond-page); } html.ui-v2 .v2-shell { display: grid; grid-template-columns: var(--v2-sidebar-largeur) 1fr; min-height: 100dvh; } /* -------------------------------------------------------------- sidebar */ html.ui-v2 .v2-sidebar { background: var(--sobria-nuit); color: var(--v2-nav-texte); display: flex; flex-direction: column; position: sticky; /* La bannière préproduction (sticky, hauteur publiée dans --banniere-env-h, 0 en production) passe au-dessus : on s'aligne dessous, comme le fait la sidebar v1 (style.css:141). */ top: var(--banniere-env-h, 0px); height: calc(100dvh - var(--banniere-env-h, 0px)); overflow-y: auto; } html.ui-v2 .v2-brand { font-family: var(--font-head, "PT Serif", Georgia, serif); font-size: 22px; letter-spacing: .14em; color: #fff; padding: 24px 24px 20px; text-decoration: none; display: block; } html.ui-v2 .v2-brand .brand-logo { max-height: 32px; max-width: 160px; object-fit: contain; } html.ui-v2 .v2-nav { flex: 1; padding: 8px 0 16px; } html.ui-v2 .v2-nav-espace { display: flex; align-items: center; gap: 14px; padding: 0 24px; min-height: 48px; /* cible tactile ≥ 44 px */ color: var(--v2-nav-texte); text-decoration: none; font-size: 15px; border-left: 3px solid transparent; transition: background .12s, color .12s; } html.ui-v2 .v2-nav-espace svg { width: 24px; height: 24px; flex: none; } html.ui-v2 .v2-nav-espace:hover { color: #fff; background: rgba(255,255,255,.04); } html.ui-v2 .v2-nav-espace.active { color: #fff; background: var(--v2-nav-actif-fond); border-left-color: var(--sobria-cuivre); } /* Sous-entrées de l'espace actif, dépliées sous lui (maquette 19). */ html.ui-v2 .v2-nav-sous { padding: 4px 0 8px; background: rgba(0,0,0,.14); } html.ui-v2 .v2-nav-sous a { display: block; padding: 9px 24px 9px 61px; /* aligné sous le libellé, pas sous l'icône */ color: var(--v2-nav-texte-attenue); text-decoration: none; font-size: 13.5px; border-left: 3px solid transparent; } html.ui-v2 .v2-nav-sous a:hover { color: #fff; } html.ui-v2 .v2-nav-sous a.active { color: var(--cuivre-15, #d59a6d); } html.ui-v2 .v2-nav-pied { border-top: 1px solid rgba(255,255,255,.10); padding: 14px 24px; display: flex; align-items: center; gap: 12px; font-size: 13px; } html.ui-v2 .v2-nav-pied .v2-avatar { flex: none; } html.ui-v2 .v2-nav-pied a { color: var(--v2-nav-texte-attenue); } html.ui-v2 .v2-nav-pied a:hover { color: #fff; } /* --------------------------------------------------------------- topbar */ html.ui-v2 .v2-col { display: flex; flex-direction: column; min-width: 0; } html.ui-v2 .v2-topbar { /* L'ENCOCHE (06/09/2026, signalée par Adrien : « j'ai un iPhone avec une encoche »). La page déclare `viewport-fit=cover` et le manifeste met l'application en `standalone` : ajoutée à l'écran d'accueil, elle s'étend donc VOLONTAIREMENT sous la barre d'état et sous l'encoche. Le bas était traité depuis toujours (`safe-area-inset-bottom` sur la barre d'onglets) ; le haut ne l'était nulle part, si bien que la recherche et l'avatar passaient dessous. `env()` vaut 0 partout ailleurs — sur un ordinateur, dans un navigateur ordinaire, sur un téléphone sans encoche : la règle ne coûte rien là où il n'y a rien à éviter. */ height: calc(var(--v2-topbar-hauteur) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); background: var(--fond-surface); /* blanc en thème clair */ border-bottom: 1px solid var(--v2-bordure-douce); display: flex; align-items: center; gap: 16px; padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); position: sticky; top: var(--banniere-env-h, 0px); z-index: 30; } html.ui-v2 .v2-topbar .global-search { flex: 1; max-width: 520px; padding: 0; /* annule le padding sidebar du v1 */ position: relative; } html.ui-v2 .v2-topbar .global-search input { width: 100%; height: 40px; border: 1px solid var(--v2-bordure-douce); border-radius: 8px; background: var(--fond-surface-2); color: var(--texte); padding: 0 14px 0 38px; font-size: 14px; } html.ui-v2 .v2-topbar .global-search::before { content: ""; position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); background: no-repeat center / contain url('data:image/svg+xml;utf8,'); pointer-events: none; } html.ui-v2 .v2-topbar .global-search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--fond-surface); border: 1px solid var(--v2-bordure-douce); border-radius: 12px; box-shadow: 0 12px 32px rgba(20,33,59,.14); max-height: 60vh; overflow: auto; z-index: 40; } html.ui-v2 .v2-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; } /* LE bouton primaire de la coquille — un seul cuivre visible. */ html.ui-v2 .v2-btn-creer { height: 40px; padding: 0 18px; border: 0; border-radius: 8px; background: var(--sobria-cuivre); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; } html.ui-v2 .v2-btn-creer:hover { background: #b06c33; } html.ui-v2 .v2-bell { width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--texte); cursor: pointer; position: relative; display: inline-flex; align-items: center; justify-content: center; } html.ui-v2 .v2-bell:hover { background: var(--fond-survol); } html.ui-v2 .v2-bell svg { width: 22px; height: 22px; } html.ui-v2 .v2-bell .bell-dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--erreur, #c0392b); } html.ui-v2 .v2-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--sobria-cuivre); color: #fff; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; letter-spacing: .02em; } /* Menus déroulants de la topbar (Créer, avatar) — CSP : câblés en JS. */ html.ui-v2 .v2-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; background: var(--fond-surface); border: 1px solid var(--v2-bordure-douce); border-radius: 12px; box-shadow: 0 12px 32px rgba(20,33,59,.14); padding: 6px; z-index: 50; } html.ui-v2 .v2-menu a, html.ui-v2 .v2-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: none; border-radius: 8px; color: var(--texte); font-size: 14px; text-decoration: none; cursor: pointer; text-align: left; } html.ui-v2 .v2-menu a:hover, html.ui-v2 .v2-menu button:hover { background: var(--fond-survol); } html.ui-v2 .v2-menu .v2-menu-sep { border-top: 1px solid var(--v2-bordure-douce); margin: 6px 4px; } /* ----------------------------------------------------------------- main */ html.ui-v2 .v2-main { flex: 1; padding: 28px 32px 48px; min-width: 0; } /* Les écrans v1 affichés dans la coquille v2 : leurs titres/cartes suivent les jetons, donc le thème clair. Quelques garde-fous génériques : */ html.ui-v2 .v2-main h1 { font-family: var(--font-head, "PT Serif", Georgia, serif); color: var(--sobria-nuit); } /* (Le lien de bascule v1↔v2 a vécu du 25/08 midi au 25/08 soir : la v2 est devenue la seule interface, plus rien à styler ici.) */ /* --------------------------------------------------------------- mobile */ html.ui-v2 .v2-tabbar { display: none; } @media (max-width: 767px) { html.ui-v2 .v2-shell { grid-template-columns: 1fr; } html.ui-v2 .v2-sidebar { display: none; } html.ui-v2 .v2-topbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); gap: 8px; } html.ui-v2 .v2-btn-creer span.lbl { display: none; } /* icône seule */ html.ui-v2 .v2-main { padding: 16px 12px 88px; } html.ui-v2 .v2-tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; background: var(--sobria-nuit); padding: 6px max(4px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left)); z-index: 60; } html.ui-v2 .v2-tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; justify-content: center; color: var(--v2-nav-texte-attenue); text-decoration: none; font-size: 10.5px; } html.ui-v2 .v2-tabbar a svg { width: 22px; height: 22px; } html.ui-v2 .v2-tabbar a.active { color: var(--cuivre-15, #d59a6d); } } /* Feuille « Plus » mobile : pleine hauteur (cahier §10). */ html.ui-v2 .v2-feuille-plus { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } html.ui-v2 .v2-feuille-plus a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border: 1px solid var(--v2-bordure-douce); border-radius: 12px; color: var(--texte); text-decoration: none; font-size: 13.5px; background: var(--fond-surface); } html.ui-v2 .v2-feuille-plus a.active { border-color: var(--sobria-cuivre); } /* --------------------------------------------------------- accessibilité */ html.ui-v2 a:focus-visible, html.ui-v2 button:focus-visible, html.ui-v2 input:focus-visible { outline: 2px solid var(--sobria-cuivre); outline-offset: 2px; }