/* ========================================================================== LES JETONS DE L'INTERFACE CERCLEKIT -------------------------------------------------------------------------- ⚠️ LES NOMS DE CE FICHIER SONT CEUX DE LA VERSION 4. ON NE LES RENOMME PAS. Ordre de Kévin, session 5 : le code de la version 4 sera réinjecté progressivement dans la bêta 5. Il appelle ces noms-là. Un nom changé ici, c'est du code repris qui ne trouve plus rien — et qui casse en silence, parce qu'une variable CSS inconnue n'affiche aucun message. Deux couches, dans le même fichier, comme en version 4 : 1. LES JETONS — les valeurs brutes 2. LES VARIABLES — le jeton nommé par son usage JETON → VARIABLE → COMPOSANT → LAYOUT → ÉCRAN Un composant n'écrit jamais un jeton de la partie 1 : il écrit une variable de la partie 2. ⚠️ La partie 2 est celle que Kévin ouvre pour changer l'apparence de l'interface. ⚠️ `--ckui-` appartient à l'INTERFACE. Le design du site du client porte `--ck-`. Les deux ne se croisent jamais. Seuls les jetons dont l'écran a besoin aujourd'hui sont déclarés. Les suivants s'ajouteront, avec leur nom de la version 4. ========================================================================== */ /* ========================================================================== LA POLICE — Google Sans, hébergée par le plugin -------------------------------------------------------------------------- Servie depuis le site du client, JAMAIS depuis un serveur de Google : personne d'extérieur n'a à voir passer ses visiteurs. Un seul fichier par jeu de caractères couvre les graisses 400 à 700. ========================================================================== */ @font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/google-sans/google-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/google-sans/google-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ══════════════════════════════════════════════════════════════════════════ 1. LES JETONS — les valeurs brutes ══════════════════════════════════════════════════════════════════════════ */ /* Couleurs de la charte. Elles ne se discutent pas. */ --ckui-primary: #d85a36; /* Primary Color — le corail */ --ckui-blue: #255eeb; /* Tertiary Color — le bleu */ /* La rampe du corail. Le palier 600 EST la couleur de charte, non retouchée. */ --ckui-accent-50: #fdf5f3; /* le plus clair — le fond d'une rangée active */ --ckui-accent-100: #fae8e3; /* l'anneau de focus d'un champ */ --ckui-accent-300: #ecac9a; /* le bord d'une rangée survolée */ --ckui-accent-500: #dd6e4e; /* éclairci — le liseré de focus */ --ckui-accent-600: #d85a36; /* = Primary Color, à l'identique */ /* Couleurs d'état. Le bleu de la charte sert d'information. Chaque état a trois teintes : `-soft` le fond, `-line` le trait, `-text` le texte. Toutes viennent de la version 4, à l'identique. */ --ckui-info: #255eeb; --ckui-info-soft: #e8effd; --ckui-info-line: #c2d3f7; --ckui-info-text: #1b47b0; --ckui-success: #3f6b52; /* vert forêt sourd, accordé aux neutres chauds */ --ckui-success-soft: #e8efe9; --ckui-success-line: #c3d6c9; --ckui-success-text: #2f5040; --ckui-vert-vif: #16a34a; /* 5.0.122 — un VRAI vert plein, texte blanc dessus : la pastille « Actif » (Kévin, 12/10 : le vert sourd était « terne ») */ --ckui-danger: #ee0000; /* rouge feu — teinte 0°, le plus loin du corail */ --ckui-danger-soft: #feebeb; --ckui-danger-line: #f7c5c5; --ckui-danger-text: #a10000; /* Blanc pur. */ --ckui-white: #ffffff; /* Un voile d'encre, pour les ombres portées. */ --ckui-veil-06: rgba(5, 11, 18, .06); --ckui-veil-18: rgba(5, 11, 18, .18); /* ⚠️ AJOUTÉS EN SESSION 8, POUR LE TIROIR « COLORS ». Valeurs COPIÉES de la version 4 (`assets/css/ck-tokens.css`, lignes 212-214). */ --ckui-veil-04: rgba(5, 11, 18, .04); --ckui-veil-08: rgba(5, 11, 18, .08); --ckui-veil-12: rgba(5, 11, 18, .12); --ckui-veil-20: rgba(5, 11, 18, .20); /* ⚠️ AJOUTÉ EN SESSION 8. Valeur COPIÉE de la v4 (ligne 217). C'est le fond de l'anneau qui tourne sur le bouton d'action. */ --ckui-veil-45: rgba(5, 11, 18, .45); /* La rampe neutre. ⚠️ ELLE EST CHAUDE. Jamais le zinc froid de Tailwind. */ --ckui-n-50: #fffcf8; /* = Warm White · fond de page */ --ckui-n-100: #f7f4f0; /* = Crème · fond de survol */ --ckui-n-200: #e9e5de; /* interpolé · bordure discrète */ --ckui-n-300: #ded8d0; /* = Soft Stone · bordure */ --ckui-n-400: #b2ada6; /* interpolé · texte désactivé */ --ckui-n-500: #8a8580; /* = Warm Graphite · texte secondaire */ --ckui-n-700: #52565c; /* interpolé · texte courant */ --ckui-n-950: #050b12; /* = Deep Ink · texte le plus fort */ /* Espacements. */ --ckui-space-05: 0.125rem; --ckui-space-1: 0.25rem; --ckui-space-15: 0.375rem; --ckui-space-2: 0.5rem; --ckui-space-25: 0.625rem; --ckui-space-3: 0.75rem; --ckui-space-35: 0.875rem; --ckui-space-4: 1rem; --ckui-space-5: 1.25rem; --ckui-space-6: 1.5rem; --ckui-space-7: 1.75rem; --ckui-space-8: 2rem; --ckui-space-10: 2.5rem; --ckui-space-11: 2.75rem; --ckui-space-14: 3.5rem; /* ⚠️⚠️ RAYONS — L'INTERFACE N'EN A AUCUN. DÉCISION DE KÉVIN, 2026-09-02. Maquette de six rayons montrée (0, 4, 6, 8, 12, 16 px), sa réponse : « 0 ». Tout ce qui a un coin dans l'interface est donc CARRÉ : boutons, rangées, bulles, bouts de code, tiroirs. Ça remplace, POUR L'INTERFACE SEULEMENT, l'échelle 2/4/6 de la charte : le « rayon courant » des boutons n'existe plus, ils sont à angle droit. ⚠️ Le SITE du client n'est pas concerné : son rayon à lui vit dans `--ck-*`, et il le règle lui-même. Ces jetons-ci sont ceux de NOTRE interface. Deux formes restent rondes, et ce n'est pas un oubli : l'interrupteur et la poignée de largeur, qui passent par `--ckui-radius-pill`. Un interrupteur carré ne se lit plus comme un interrupteur. À signaler, pas à corriger. */ --ckui-radius-sm: 0; /* petits éléments — carré */ --ckui-radius: 0; /* LE rayon de l'interface — carré */ /* ⚠️ SAUF LES BOUTONS. Kévin, 2026-09-02 : « comment avant ». Ils gardent le rayon courant de la charte. Ce jeton n'existe que pour eux. */ --ckui-radius-4: 0.25rem; /* le rayon courant de la charte — LES BOUTONS */ --ckui-radius-md: var(--ckui-radius); /* alias historique de la v4 */ --ckui-radius-pill: 62.4375rem; /* l'interrupteur et la poignée, RONDS */ /* ⚠️ AJOUTÉ EN SESSION 8. Valeur COPIÉE de la v4 (ligne 289). */ --ckui-radius-thumb: 50%; /* pastilles rondes, et l'anneau d'attente */ /* Hauteur d'un bouton. */ --ckui-btn-h: 2.25rem; /* Le tiroir de navigation. `--ckui-drawer-h` est aussi la hauteur des BANDES DE TÊTE de toutes les colonnes (tiroir, aperçu, canevas) : c'est ce qui fait que les lignes du layout s'alignent au pixel. */ --ckui-drawer-bar: 0.1875rem; --ckui-drawer-h: 2.375rem; /* Typographie. */ --ckui-font: 'Google Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ckui-font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; --ckui-fz-2xs: 0.625rem; /* le pied d'un tiroir */ --ckui-fz-xs: 0.75rem; /* légendes, aides */ --ckui-fz-sm: 0.875rem; /* LA taille : libellés, champs, boutons */ --ckui-fz-base: 1rem; /* gros libellés, titres de barre */ /* Mouvement. */ /* ⚠️ AJOUTÉ EN SESSION 8. Valeur COPIÉE de la version 4 (ligne 471). */ --ckui-motion-fast: 100ms; /* micro-retours : survols d'icônes */ --ckui-motion: 120ms; /* LA vitesse : boutons, champs, états */ --ckui-motion-slow: 200ms; /* panneaux, tiroirs */ /* ⚠️ AJOUTÉ EN SESSION 8. Valeur COPIÉE de la version 4 (ligne 474). */ --ckui-motion-slower: 300ms; /* rares : grands déploiements */ /* ⚠️ AJOUTÉS EN SESSION 8, POUR LE TIROIR « COLORS ». Valeurs COPIÉES de la version 4 (`assets/css/ck-tokens.css`) : l'or profond du ton « avertissement » (l. 122, 193-203), le halo du corail (l. 242), la hauteur du petit bouton (l. 398), l'ombre flottante (l. 484), les deux opacités (l. 491-492) et les deux plans (l. 506-507). Les valeurs en pixels sont passées en `rem` — règle AUCUN PIXEL — et le rendu ne bouge pas : 28px = 1.75rem, 8px = 0.5rem, 24px = 1.5rem. */ --ckui-warning: #b8860b; /* or profond */ --ckui-warning-soft: #f8f1de; /* le fond d'une bulle d'avertissement */ --ckui-warning-line: #ecd9a8; /* son filet */ --ckui-warning-text: #7a5a15; /* son texte */ --ckui-accent-glow-mid: rgba(216, 90, 54, .10); /* le halo du corail */ --ckui-btn-h-sm: 1.75rem; /* la hauteur d'un PETIT bouton */ --ckui-shadow-md: 0 0.5rem 1.5rem var(--ckui-veil-12); /* flottant : popovers */ --ckui-o-25: .25; /* un bloc éteint */ --ckui-o-40: .4; /* un bouton indisponible */ --ckui-z-dropdown: 50; /* listes déroulées, autocomplétions */ --ckui-z-pop: 60; /* popovers, par-dessus les dropdowns */ /* ── AJOUTÉS EN SESSION 10, POUR LE TIROIR « FONTS » ─────────────────────── ⚠️ CE NE SONT PAS DES INVENTIONS. Les quatre existent en version 4, avec ces noms-là et ces valeurs-là ; `tab-fonts.css` les appelle. Numéro de ligne du fichier d'origine (`cerclekit-4-beta/cerclekit/assets/css/ ck-tokens.css`) en regard. */ --ckui-accent-200: #f3cec3; /* corail pâle — l. 98 */ --ckui-accent-glow: rgba(216, 90, 54, .25); /* le halo du corail — l. 240 */ --ckui-o-50: .5; /* la moitié — l. 493 */ /* ── AJOUTÉS EN SESSION 12, POUR LE TIROIR « BUTTONS » ───────────────────── ⚠️ CE NE SONT PAS DES INVENTIONS. Les trois existent en version 4, avec ces noms-là et ces valeurs-là ; `tab-buttons.css`, `token-picker.css` et `icon-picker.css` les appellent. Numéro de ligne du fichier d'origine (`cerclekit-4-beta/cerclekit/assets/css/ck-tokens.css`) en regard. ⚠️ `--ckui-shadow-lg` : `10px 40px` → `0.625rem 2.5rem`, règle AUCUN PIXEL. Le rendu ne bouge pas. */ --ckui-o-85: .85; /* presque opaque — l. 496 */ --ckui-shadow-lg: 0 0.625rem 2.5rem var(--ckui-veil-12); /* détaché : popovers — l. 485 */ --ckui-z-overlay: 100000; /* modales plein écran, par-dessus tout WP — l. 510 */ /* 4.5.62 — SIGNALEMENT 20 : la largeur des boîtes de confirmation (`.ck-quitter`). 560 en v4 (posée sur `.ck-contenu`), perdue en 4.5.1 : « Ajouter une page » s'étalait sur tout l'écran. */ --ckui-dialog-w: 35rem; /* ── JETONS QUI N'EXISTENT PAS EN VERSION 4 ──────────────────────────────── ⚠️ CE NE SONT PAS DES RENOMMAGES. La version 4 écrit ces valeurs EN DUR dans ses règles. Kévin a demandé en session 5 que TOUT passe par une variable, bordures comprises : il fallait donc leur créer un nom. Il est écrit dans la grammaire de la version 4, pour que la suite s'y raccroche. */ --ckui-border-w: 0.0625rem; /* l'épaisseur d'un filet */ --ckui-ico: 1rem; /* une icône dans un bouton */ --ckui-ico-drawer: 1.125rem; /* une icône dans une rangée de tiroir */ --ckui-ico-chev: 0.875rem; /* le chevron d'une rangée de tiroir */ --ckui-side-back-h: 1.625rem; /* le bouton « retour » d'un tiroir */ --ckui-logo-h: 1.5rem; /* le logo dans la barre du haut */ --ckui-wpbar-h: 2rem; /* la barre noire de WordPress */ --ckui-fs-min-h: 35rem; /* la hauteur minimale du châssis */ /* ⚠️ EN POURCENTAGE, PAS EN PIXELS. Kévin, 2026-09-02 : « pas assez large, elle doit représenter au moins 65 % de la largeur ». C'est la colonne où l'on travaille ; celles de gauche ne servent qu'à naviguer. */ --ckui-champs-w: 65%; /* la colonne de champs, à droite — NOUVELLE */ --ckui-sidebar-w: 12.5rem; /* la barre de gauche, dépliée */ --ckui-sidebar-w-collapsed: 3.25rem; /* la barre de gauche, repliée */ --ckui-scroll-w: 0.25rem; /* la barre de défilement, fine */ --ckui-fw-medium: 500; /* la graisse d'un libellé */ --ckui-fw-semibold: 600; /* la graisse d'un statut en capitales */ --ckui-fw-bold: 700; /* la graisse de la marque */ --ckui-switch-w: 2.25rem; /* l'interrupteur : sa largeur */ --ckui-switch-h: 1.25rem; /* l'interrupteur : sa hauteur */ --ckui-switch-dot: 1rem; /* l'interrupteur : sa pastille, ET sa course */ --ckui-switch-shadow: 0 0.0625rem 0.125rem var(--ckui-veil-18); /* l'ombre de la pastille */ --ckui-shadow-sm: 0 0.0625rem 0.125rem var(--ckui-veil-06); /* posé : cartes, champs */ --ckui-field-h: 2.375rem; /* la hauteur mini d'un champ de saisie */ --ckui-cell-h: 1.875rem; /* la case d'un tiroir de réglages (4.5.3) : champ, menu, pastille — la hauteur du module Typographie */ --ckui-field-ring: 0.1875rem; /* l'anneau de focus d'un champ */ --ckui-row-status-w: 5rem; /* la colonne de statut d'une rangée */ --ckui-rows-min: 20rem; /* la largeur mini d'une rangée en grille */ --ckui-tracking-caps: 0.04em; /* l'espacement d'un texte en capitales */ /* LES COLONNES D'UNE LISTE DE CONTENUS. Repris de la version 4, à l'identique. ⚠️ La gouttière est DANS la piste de la vignette, pas dans son coussin. */ --ckui-col-vign: 3.75rem; /* 44 d'image + 16 de gouttière */ --ckui-col-taxo: 7.75rem; /* « Chantier lourd » */ --ckui-col-marque: 6.5rem; /* la marque : un mot, rarement deux */ --ckui-col-prix: 6.5rem; /* « 540,00 € » TTC, « 450,00 € HT » en dessous */ --ckui-col-stock: 5.75rem; /* « 12 en stock », « Sur commande » */ --ckui-col-date: 5.5rem; /* « Publié » / « 01/08/2026 » l'un sous l'autre */ --ckui-col-act: 5.5rem; /* 3 icônes de 28px + 2 gouttières de 2px */ --ckui-seg-pad-y: 0.3125rem; /* le coussin vertical d'un onglet de barre. HORS échelle, comme en v4. */ --ckui-code-pad: 0.0625rem 0.3125rem; /* le coussin d'un bout de code dans un texte. 5px est HORS de l'échelle d'espacements, et c'est assumé : la version 4 laisse les valeurs hors grille en dur, les aimanter ferait refluer toute la densité. */ --ckui-prev-w: 42%; /* largeur de départ de la colonne d'aperçu */ --ckui-prev-w-narrow: 36%; /* la même, sur un écran étroit */ --ckui-reglages-w: 20.5rem; /* la colonne des réglages quand un écran la FIXE (Forms, 4.5.30 : l'exemple de Kévin) */ --ckui-reglages-w-large: 46rem; /* la même, LARGE : Typographies › Configurateur (4.5.35), le tableau tient en version bureau */ --ckui-grille-case-min: 7.5rem; /* la case de la grille (mini-tableur du Tableau, 4.5.108) : au moins… */ --ckui-grille-case-max: 15rem; /* …et au plus, le reste en « … » */ --ckui-carte-min: 11rem; /* la largeur mini d'une carte (`.ck-cartes`, Configuration › Widgets, 4.5.90) */ --ckui-carte-h: 6rem; /* la hauteur mini d'une carte : icône + interrupteur, puis le nom */ --ckui-prev-w-cfg: 34%; /* l'aperçu du Configurateur sur grand écran : un tiers, pas plus (4.5.35) */ /* ══════════════════════════════════════════════════════════════════════════ 2. LES VARIABLES — ce qu'un composant utilise ══════════════════════════════════════════════════════════════════════════ ⚠️ C'EST ICI QUE KÉVIN CHANGE L'APPARENCE. Une ligne modifiée ici change tout le plugin d'un coup. Un composant n'écrit jamais `var(--ckui-n-300)` : il écrit `var(--ckui-border)`. ══════════════════════════════════════════════════════════════════════════ */ /* Surfaces. */ --ckui-surface: var(--ckui-white); /* le fond du chrome de l'outil */ --ckui-surface-2: var(--ckui-n-100); /* le fond d'une chose survolée */ /* Traits. Épaisseur ET couleur sont des variables. */ --ckui-border: var(--ckui-n-300); --ckui-border-soft: var(--ckui-n-200); /* le trait entre deux rangées */ --ckui-border-width: var(--ckui-border-w); /* Textes. */ --ckui-text: var(--ckui-n-950); --ckui-text-body: var(--ckui-n-700); --ckui-text-muted: var(--ckui-n-500); --ckui-text-disabled: var(--ckui-n-400); --ckui-text-invert: var(--ckui-white); /* Alias de la version 4. Le mot « zinc » est un reste de l'ancienne palette froide : il pointe sur la rampe CHAUDE, et il est conservé parce que du code de la version 4 l'appelle encore par ce nom-là. */ --ckui-zinc-50: var(--ckui-n-50); --ckui-zinc-100: var(--ckui-n-100); --ckui-zinc-300: var(--ckui-n-300); --ckui-zinc-400: var(--ckui-n-400); /* L'appui — ce qui est actif ou survolé dans la navigation. C'est le corail. */ --ckui-accent: var(--ckui-accent-600); --ckui-accent-soft: var(--ckui-accent-50); /* Le FILET corail — le contour d'un bouton survolé. Nom et jeton visé copiés de la version 4 (l. 166 : `--ckui-accent-line: var(--ckui-accent-200)`). Ajouté en session 10 pour « Mes polices ». */ --ckui-accent-line: var(--ckui-accent-200); --ckui-focus: var(--ckui-accent-600); /* Le tiroir de navigation. Conçu et ratifié en version 4 le 2026-08-02 : titre fz-sm medium, coussin space-25/space-4, barre témoin 3px, AUCUNE description à aucun niveau. */ --ckui-drawer-name-fg: var(--ckui-text-body); --ckui-drawer-active-fg: var(--ckui-accent); --ckui-drawer-active-bg: var(--ckui-accent-soft); /* Le bouton principal. ⚠️ IL EST BLEU, sur décision de Kévin (session 5), alors que la charte donne aussi le corail. Le jour où ça change, ce sont ces trois lignes qui bougent, et rien d'autre dans tout le plugin. */ --ckui-btn-primary-bg: var(--ckui-info); --ckui-btn-primary-hover: var(--ckui-info-text); --ckui-btn-primary-active: var(--ckui-info-text); /* Rayon d'un bouton. */ --ckui-radius-btn: var(--ckui-radius-4); /* L'écart entre deux boutons d'une même barre. */ --ckui-gap: var(--ckui-space-25); } /* ========================================================================== PARTIE 3 — LES DEUX SEUILS D'APPAREIL, ET CE QUI CHANGE DE VALEUR -------------------------------------------------------------------------- Ordre de Kévin, 3 septembre 2026 : « j'aimerais que tu fasses tout en responsive : tablette et mobile. C'est un énorme point pour les clients de pouvoir modifier leur site depuis leur téléphone ! » ⚠️ LES DEUX SEUILS NE SONT PAS INVENTÉS. Ils existent déjà : | Seuil | D'où il vient | |--------------|-----------------------------------------------------------| | `68.75em` | 1100px — le seuil « écran étroit » de la version 4 | | (TABLETTE) | (`editor-chassis.css`, déjà repris dans la bêta 5). | | `48.875em` | 782px — LA césure de WordPress pour sa propre | | (MOBILE) | administration, et celle que la version 4 emploie sur | | | son seul écran mobile (`contenu.css`). La v4 écrit | | | mot pour mot : « on n'en invente pas une ». | ⚠️ POURQUOI EN `em` ET PAS EN `rem`. Dans une requête de média, `1em` vaut TOUJOURS 16px : il n'y a pas de parent, donc pas de calcul relatif. C'est la seule unité qui donne un seuil stable. Règle « AUCUN PIXEL » de `REGLES.md`. 782 ÷ 16 = 48,875 · 1100 ÷ 16 = 68,75. ⚠️ ON NE CRÉE AUCUN NOM ICI. On repose la valeur de jetons qui existent déjà : un jeton garde son sens (« la hauteur d'un bouton »), seule sa valeur change quand l'appareil change. Un `--ckui-btn-h-mobile` aurait obligé chaque composant à choisir entre deux noms — c'est exactement le doublon que la règle n°2 interdit. ========================================================================== */ /* ── MOBILE — jusqu'à 782px ───────────────────────────────────────────────── Téléphones, et tablette en portrait (l'iPad fait 768px). C'est aussi le point où WordPress bascule SA propre administration en mode tactile. */ @media (max-width: 48.875em) { :root { /* ⚠️⚠️ LE DÉFAUT LE PLUS GRAVE DE LA SÉANCE, ET IL EST MESURÉ. La barre noire de WordPress ne fait PAS 32px sur un téléphone : elle fait 46px. Vérifié sur le banc local, dans le cœur de WordPress, `wp-includes/css/admin-bar.css` ligne 785 et suivantes : `@media screen and (max-width: 782px) { #wpadminbar { height: 46px } }`. Le châssis vaut `100vh - var(--ckui-wpbar-h)` : avec 32px, il DÉPASSAIT DE 14px SOUS LE BAS DE L'ÉCRAN sur tout téléphone. Le défaut vient du code repris de la version 4, qui a la même valeur en dur — signalé à Kévin le 2026-09-03. 2,875rem = 46px. */ --ckui-wpbar-h: 2.875rem; /* ⚠️ LA HAUTEUR MINIMALE SAUTE, ET C'EST OBLIGATOIRE. 35rem = 560px. Un téléphone couché fait 375px de haut : le châssis dépassait de 185px, sous la barre d'adresse, sans moyen d'y accéder. En mobile le châssis n'a plus besoin de plancher : il s'étire à la hauteur de son contenu et c'est la PAGE qui défile. */ --ckui-fs-min-h: 0; /* La barre de gauche et la colonne de champs ne sont plus des colonnes : elles sont des bandes empilées, pleine largeur. */ --ckui-sidebar-w: 100%; --ckui-sidebar-w-collapsed: 100%; --ckui-champs-w: 100%; --ckui-prev-w: 100%; --ckui-prev-w-narrow: 100%; /* ⚠️ LA CIBLE DU DOIGT. 2,25rem = 36px pour un bouton, 2,375rem = 38px pour un champ : c'est juste à la souris, c'est trop petit au doigt. Le plancher tactile est de 44px (2,75rem) — c'est la valeur qu'on trouve chez Apple comme chez le critère 2.5.5 du WCAG, et c'est aussi le cran `--ckui-space-11` de notre propre échelle. On ne sort donc pas de la charte : on repose le cran voisin. */ --ckui-btn-h: 2.75rem; --ckui-field-h: 2.75rem; --ckui-cell-h: 2.75rem; /* Une rangée de tiroir se tape aussi. */ --ckui-drawer-h: 2.75rem; /* Une grille de rangées n'a plus de quoi tenir deux colonnes : le minimum passe à la largeur disponible, la grille tombe à une file toute seule, sans déborder sur un téléphone de 320px. */ --ckui-rows-min: 100%; } } /* ══ V4 CONSERVÉ — 4.5.1 ══════════════════════════════════════════════ Les jetons de la v4 que la bêta 5 n'a pas : les écrans v4 pas encore refaits les lisent. Le jour où leur écran est refait, ils partent. ══════════════════════════════════════════════════════════════════ */ :root { --ckui-secondary: #0b1726; --ckui-cream: #f7f4f0; --ckui-deep-ink: #050b12; --ckui-slate-navy: #303946; --ckui-warm-graphite: #8a8580; --ckui-soft-stone: #ded8d0; --ckui-warm-white: #fffcf8; --ckui-n-600: #6f6e6f; --ckui-n-800: #303946; --ckui-n-900: #1d242f; --ckui-accent-400: #e3886e; --ckui-accent-700: #b34323; --ckui-accent-800: #95381d; --ckui-accent-900: #6a3123; --ckui-black: #000000; --ckui-bg: var(--ckui-n-50); --ckui-surface-sunk: var(--ckui-n-200); --ckui-border-strong: var(--ckui-n-400); --ckui-accent-hover: var(--ckui-accent-700); --ckui-accent-active: var(--ckui-accent-800); --ckui-on-accent: var(--ckui-white); --ckui-publish: var(--ckui-accent-600); --ckui-publish-hover: var(--ckui-accent-700); --ckui-publish-active: var(--ckui-accent-800); --ckui-focus-ring: var(--ckui-accent-200); --ckui-danger-hover: #cc0000; --ckui-success-hover: #365b46; --ckui-success-active: #2d4c3a; --ckui-veil-25: rgba(5, 11, 18, .25); --ckui-veil-55: rgba(5, 11, 18, .55); --ckui-veil-72: rgba(5, 11, 18, .72); --ckui-lueur-08: rgba(255, 255, 255, .08); --ckui-lueur-10: rgba(255, 255, 255, .10); --ckui-lueur-25: rgba(255, 255, 255, .25); --ckui-on-dark: var(--ckui-white); --ckui-on-dark-soft: rgba(255, 255, 255, .72); --ckui-on-dark-muted: rgba(255, 255, 255, .50); --ckui-accent-glow-soft: rgba(216, 90, 54, .08); --ckui-danger-glow: rgba(238, 0, 0, .14); --ckui-zinc-200: var(--ckui-n-200); --ckui-zinc-500: var(--ckui-n-500); --ckui-zinc-600: var(--ckui-n-600); --ckui-zinc-700: var(--ckui-n-700); --ckui-zinc-800: var(--ckui-n-800); --ckui-zinc-900: var(--ckui-n-950); --ckui-ink: var(--ckui-secondary); --ckui-radius-lg: 6px; --ckui-radius-carte: 0.3125rem; /* 5.0.122 — les cartes du Tableau de bord (5 px, Kévin 12/10) */ --ckui-space-16: 64px; --ckui-space-20: 80px; --ckui-space-24: 96px; --ckui-space-48: 192px; --ckui-col-acces: 56px; --ckui-lisible: 980px; --ckui-btn-h-lg: 44px; --ckui-liste-h: 200px; --ckui-cote-w: 380px; --ckui-pane-out: -30%; /* recul d'un panneau passé au second plan (perdu au 71b2b9f, rendu en 4.5.88) */ --ckui-ed-h: 22rem; /* hauteur maxi d'une liste à cocher (catégories, documents) : 352 (perdu au 71b2b9f, rendu en 4.5.89) */ --ckui-section-gap: 32px; --ckui-head-gap: 6px; --ckui-desc-gap: 18px; --ckui-fz-lg: 18px; --ckui-fz-xl: 20px; --ckui-fz-2xl: 24px; --ckui-fz-section-title: var(--ckui-fz-lg); --ckui-shadow-xl: 0 20px 60px var(--ckui-veil-25); --ckui-o-60: .6; --ckui-o-70: .7; --ckui-z-tooltip: 100; --ckui-z-wp-chrome: 99999; --ckui-z-el-overlay: 160000; } /* ══ FIN V4 CONSERVÉ ══ */