/* ═══════════════════════════════════════════════════════════════════════════ Cockpit — jetons de conception SOURCE UNIQUE des trois surfaces : interne, portail client, page formateur. Ce fichier est le SEUL endroit où une couleur, un espacement, un rayon ou un corps de texte s'écrit en valeur. Partout ailleurs, var(--x) — le harnais refuse le commit sinon (contrôle 4). Relevé le 2026-09-01 dans le :root de cockpit(65).html, puis corrigé sur les points où la maquette échouait à un contrôle mesuré. Chaque correction porte son ratio, calculé et non estimé. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── 1. Marque ───────────────────────────────────────────────────────── Six teintes, chacune avec sa variante sombre. RÈGLE : les teintes vives sont des FONDS et des ACCENTS. les variantes -deep sont les couleurs de TEXTE. Elle vient d'une mesure : sur les paires réellement utilisées de la maquette, 60 sur 110 tombaient sous 4,5:1 et 30 sous 3:1. Les vives échouent, les -deep passent toutes. */ --hex-violet: #31084c; /* 16,92:1 sur --bg */ --hex-violet-clair: #4a1a6e; --hex-blue: #4541ff; --hex-blue-deep: #102c96; /* 9,79:1 sur --card */ --hex-blue-light: #cdddff; --hex-blue-light-deep: #4e89e5; --hex-green: #00af9f; /* 2,75:1 — JAMAIS du texte */ --hex-green-deep: #00665b; /* 6,88:1 sur --card */ --hex-pink: #dd179c; /* 4,49:1 — échoue AA, jamais du texte */ --hex-pink-deep: #9e1058; /* 7,87:1 sur --card */ --hex-orange: #fa8d39; --hex-orange-deep: #a14600; /* 6,19:1 sur --card */ --hex-yellow: #fbba33; /* 1,73:1 — JAMAIS du texte */ --hex-yellow-deep: #db7f12; /* 2,98:1 — fond et pastille seulement */ /* Le rouge entre dans la charte le 2026-09-01, décision de Thomas. La maquette n'en avait pas : --primary et --danger y valaient tous deux #dd179c, donc l'action principale et l'erreur étaient indiscernables. Teinte 3,5 degrés — 45 degrés du rose primaire, distinction franche. */ --hex-red: #e0342a; /* 4,47:1 — pastille et fond plein */ --hex-red-deep: #b32118; /* 6,67:1 sur --card, 6,11:1 sur --bg */ /* --hex-violet-deep retiré : il valait #31084c, exactement --hex-violet. Deux noms pour une valeur, c'est le doublon qui divergera. */ /* ── 2. Texte ────────────────────────────────────────────────────────── Absentes de la charte transmise, et indispensables : sans elles aucun contrôle de contraste n'est possible. */ --text-strong: #1a0d2b; /* 18,48:1 sur --card */ --text-body: #3d3450; /* 11,63:1 */ --text-muted: #776b87; /* 4,96:1 sur --card, 4,54:1 sur --bg corrigé depuis #7a6e8a, qui passait sur blanc (4,75) et ÉCHOUAIT sur le fond de page (4,35). Teinte et saturation conservées. */ --text-faint: #b3a9c3; /* 2,24:1 — DÉCORATIF, jamais du texte ni une information portée seule. */ /* ── 3. Surfaces et bordures ─────────────────────────────────────────── Les trois bordures sont sous 3:1 : elles n'énoncent jamais un état à elles seules. Un état se dit avec un mot. */ --card: #ffffff; --bg: #f6f4f9; --bg-subtle: #fafaff; --border: #ece8f1; --border-strong: #d8d2e2; --divider: #f0ecf5; --chip-bg: #f4f1f9; /* ── 4. Rôles ────────────────────────────────────────────────────────── Un rôle porte DEUX jetons : le texte et le fond. Jamais un seul, sinon le composant choisit son fond en dur — et c'est ainsi qu'on retrouve un #31084c écrit dans un bouton. */ --primary-txt: #c1108a; /* 5,66:1 — c'est le --primary-hover de la maquette. #dd179c ne passait pas (4,49), on ne l'invente donc pas : on prend la teinte déjà présente. */ --primary-fill: #c1108a; /* blanc dessus : 5,54:1 */ --primary-fill-hover: #9e1058; /* blanc dessus : 7,87:1 */ --primary-soft: #fcdcef; --success-txt: var(--hex-green-deep); --success-bg: #dff6f3; --warning-txt: var(--hex-orange-deep); --warning-bg: #fdf1d9; --info-txt: var(--hex-blue-deep); --info-bg: #e7e6ff; --danger-txt: var(--hex-red-deep); /* 5,75:1 sur --danger-bg */ --danger-fill: var(--hex-red); --danger-bg: #fdeae8; /* ── 5. Espacement ───────────────────────────────────────────────────── Créée le 2026-09-01. Base 8, SANS 4 px, liste fermée de sept valeurs. La maquette n'en avait pas : 559 valeurs de padding/margin/gap y étaient écrites en dur, dont 96 en 5px et 6px. Le contrôle 5 n'accepte QUE ces sept jetons en gap/padding/margin. */ --sp-1: 8px; --sp-2: 12px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px; --sp-6: 48px; --sp-7: 64px; /* Micro-ajustements optiques. Nommés pour ce qu'ils sont, HORS échelle, et refusés par le contrôle 5 en gap/padding/margin — c'est ce qui empêche le 5px et le 6px de revenir sous un autre nom. */ --hair: 1px; /* filets, bordures */ --nudge: 2px; /* décalage d'une icône sur sa ligne de base */ /* ── 6. Rayons ───────────────────────────────────────────────────────── Un seul jeu de noms. Les alias --radius-* de la maquette sont retirés. */ --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 14px; --r-2xl: 20px; --r-full: 9999px; /* ── 7. Typographie ──────────────────────────────────────────────────── Liste FERMÉE de huit corps. La racine n'était déclarée nulle part dans la maquette : elle valait donc 16 px sans que ce soit écrit. Elle l'est maintenant (plus bas), et les bornes de media query s'écrivent en px, jamais en rem. */ --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 28px; --fw-normal: 400; --fw-medium: 500; --fw-bold: 700; --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ── 8. Élévations ───────────────────────────────────────────────────── L'ombre est violette, jamais noire. */ --shadow-sm: 0 1px 2px rgba(49,8,76,.04); --shadow-md: 0 1px 3px rgba(49,8,76,.06), 0 1px 2px rgba(49,8,76,.04); --shadow-lg: 0 4px 12px rgba(49,8,76,.08), 0 2px 4px rgba(49,8,76,.04); --shadow-xl: 0 12px 32px rgba(49,8,76,.12); /* ── 9. Mouvement ────────────────────────────────────────────────────── Le mouvement répond à une action. Pas d'entrée en fondu sur une section. */ --ease: cubic-bezier(.4, 0, .2, 1); --duree-courte: 120ms; --duree-moyenne: 200ms; /* ── 10. Gabarit ─────────────────────────────────────────────────────── */ /* 220px dans la maquette de Marine. Elargi a 248 : nos entrees de rail portent une mention d'etat (« bientot », « reserve ») que les siennes n'avaient pas, et a 220 elle tronquait « Mon tableau de bord » et « Reponses clients ». Vu en capture, invisible autrement. 256 et non 248 : la MESURE dit qu'il manquait encore 7 px a 248 — `scrollWidth` 135 contre `clientWidth` 128 sur « Mon tableau de bord ». 256 est le cran suivant de l'echelle base 8. */ --sidebar-w: 256px; /* ── 11. La porte ────────────────────────────────────────────────────── Mesures relevées une par une dans le `login.css` de Mon Pilote. Ce n'est pas une coquetterie : les mêmes gens ouvrent les deux applications dans la même journée, et une porte qu'on reconnaît est une porte devant laquelle on hésite moins. Une différence franche entre deux portes du même trousseau apprend exactement l'inverse. ⚠️ Un écart assumé : les marges du panneau valent 48 et 56 px chez Mon Pilote. On prend --sp-6 (48) et --sp-7 (64), les deux crans de l'échelle. Huit pixels de marge ne se voient pas ; contourner l'échelle par un jeton de plus, si. Ce qui fait reconnaître une porte, c'est sa composition et ses corps de texte, pas une marge au pixel. */ --cx-colonne: 380px; --cx-champ: 50px; --cx-bouton: 52px; --cx-titre: 34px; --cx-accroche: 26px; } /* La racine est déclarée, elle ne se devine plus. */ html { font-size: 100%; } body { font-family: var(--font); font-size: var(--fs-base); color: var(--text-body); background: var(--bg); margin: 0; } /* Le piège payé neuf fois dans la maquette : un attribut hidden sur un élément en display:flex ne masque rien, la règle d'auteur gagne. */ [hidden] { display: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ───────────────────────────────────────────────────────────────────────── POINTS DE RUPTURE — liste fermée de cinq, EN PIXELS. La maquette en portait 19 distinctes sur ses trois surfaces (36 media queries). Ils ne peuvent pas être des jetons CSS : une variable ne s'utilise pas dans une media query. Le contrôle 5 tient donc la liste. 1440 au-delà : large 1280 portable large 1024 tablette paysage 768 tablette portrait 390 mobile JAMAIS en rem : dans une media query, rem vaut toujours 16 px, quelle que soit la racine — et ce fichier déclare la racine à 100 %. ───────────────────────────────────────────────────────────────────────── */