/* Lua d'Enigmas — Gestion Habillage (18.6) : celui du site luadenigmas.com — noir, blanc, gris, filets fins, aucun arrondi ; EB Garamond pour les titres, Raleway pour le texte. Lisibilité (18.8) : sept familles d'état, chacune une couleur pleine et un signe — rouge ▲ le retard, ambre ● ce qui presse, bleu ◆ le rendez-vous, bleu pâle ○ le prévu, prune ✚ ce qui arrive, vert ✓ le fait, gris le reste. Les noms des variables datent de l'ancienne palette prune (`--plum`…) : ils ne changent pas, seules leurs valeurs. */ :root { color-scheme: light; --bg: #FAF9F7; --surface: #FFFFFF; --ink: #111111; --muted: #555555; /* Les étiquettes (en-têtes de colonnes, petits titres), en minuscules grasses. */ --etiquette: #444444; --line: #E0E0E0; --line-strong: #D0D0D0; --plum: #000000; --plum-ink: #000000; --plum-soft: #F2F2F2; /* Les fonds des badges (pleins ou pâles) et leur texte (18.8). */ --badge-rouge: #D63B2F; --sur-rouge: #FFFFFF; --badge-ambre: #F2B722; --sur-ambre: #111111; --badge-bleu: #2B6CB0; --sur-bleu: #FFFFFF; --badge-plan: #DCE8F7; --sur-plan: #1E4E8C; --badge-prune: #EADFF7; --sur-prune: #5B2D8A; --badge-vert: #2E8B57; --sur-vert: #FFFFFF; --badge-gris: #E6E6E6; --sur-gris: #444444; /* Les couleurs d'état en texte et en fond pâle, alignées sur les badges. */ --vert: #2E8B57; --vert-soft: #E6F3EC; --vert-bord: #A9D8BC; --ambre: #B7791F; --ambre-soft: #FFF6DD; --ambre-bord: #F2D27A; --ambre-fort: #B7791F; --ambre-fort-soft: #FFF6DD; --ambre-fort-bord: #F2D27A; --rouge: #D63B2F; --rouge-soft: #FDECEA; --rouge-bord: #F3B8AF; --bleu: #2B6CB0; --bleu-soft: #E6EEF8; --bleu-bord: rgba(43, 108, 176, .45); /* Le prévu, en bleu pâle : à envoyer, à organiser, à conclure, devis… */ --bleu-clair: #1E4E8C; --bleu-clair-soft: #DCE8F7; --bleu-clair-bord: #8FB3DF; --bleu-fonce: #1E4E8C; --bleu-fonce-soft: #DCE8F7; --bleu-fonce-bord: #8FB3DF; /* Ce qui arrive : reçu, nouveau, premier contact, à vérifier. */ --prune-etat: #5B2D8A; --prune-etat-bord: #B08AD6; --gris-soft: #F2F2F2; /* Le fond des boutons principaux et des pastilles actives : noir en clair, blanc en sombre, le texte de l'autre couleur par-dessus. */ --plum-bg: #000000; --plum-bg-hover: #333333; --on-plum: #FFFFFF; --rouge-fort: #D63B2F; --on-rouge: #FFFFFF; --zebra: #FFFFFF; --zebra-doux: #FAF9F7; /* Le voile sous une feuille du téléphone, et l'ombre du bouton Saisir (15.6). */ --voile: rgba(0, 0, 0, .45); --ombre-saisir: rgba(0, 0, 0, .35); --ombre-menu: 0 8px 24px rgba(0, 0, 0, .12); --radius: 0; --font-display: "EB Garamond", Georgia, "Times New Roman", serif; --font-body: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* Mode sombre : le noir du site. Seules les couleurs changent, la mise en page est identique ; les badges gardent leurs fonds pleins. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0D0D0D; --surface: #161616; --ink: #E6E6E6; --muted: #B5B5B5; --etiquette: #CCCCCC; --line: #2A2A2A; --line-strong: #444444; --plum: #FFFFFF; --plum-ink: #FFFFFF; --plum-soft: #262626; --badge-rouge: #C0392B; --sur-rouge: #FFFFFF; --badge-ambre: #D9A520; --sur-ambre: #111111; --badge-bleu: #3B7DD8; --sur-bleu: #FFFFFF; --badge-plan: #1E2E44; --sur-plan: #BBD3F2; --badge-prune: #2E2140; --sur-prune: #D6BFF0; --badge-vert: #2E8B57; --sur-vert: #FFFFFF; --badge-gris: #333333; --sur-gris: #DDDDDD; --vert: #7CC79B; --vert-soft: #15281D; --vert-bord: rgba(124, 199, 155, .5); --ambre: #E6B84A; --ambre-soft: #332A10; --ambre-bord: rgba(230, 184, 74, .5); --ambre-fort: #E6B84A; --ambre-fort-soft: #332A10; --ambre-fort-bord: rgba(230, 184, 74, .5); --rouge: #F08A7A; --rouge-soft: #3A1F1C; --rouge-bord: rgba(240, 138, 122, .55); --bleu: #8FB6E8; --bleu-soft: #182532; --bleu-bord: rgba(143, 182, 232, .55); --bleu-clair: #BBD3F2; --bleu-clair-soft: #1E2E44; --bleu-clair-bord: rgba(187, 211, 242, .45); --bleu-fonce: #BBD3F2; --bleu-fonce-soft: #1E2E44; --bleu-fonce-bord: rgba(187, 211, 242, .45); --prune-etat: #D6BFF0; --prune-etat-bord: rgba(214, 191, 240, .5); --gris-soft: #222222; --plum-bg: #FFFFFF; --plum-bg-hover: #DDDDDD; --on-plum: #000000; --rouge-fort: #C0392B; --on-rouge: #FFFFFF; --zebra: #161616; --zebra-doux: #171717; --voile: rgba(0, 0, 0, .6); --ombre-saisir: rgba(0, 0, 0, .6); } :root[data-theme="dark"] .tile-on { box-shadow: none; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); /* 18.8 : 15 px, interligne 1,6 — sur téléphone aussi. */ font-size: 15px; line-height: 1.6; } a { color: var(--plum); text-decoration: none; } a:hover { text-decoration: underline; } code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.92em; background: var(--gris-soft); padding: 1px 5px; border-radius: 0; } pre.code { background: #111111; color: #F2F2F2; padding: 14px 16px; border-radius: 0; overflow: auto; font-size: 13px; } .wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; } /* De l'air entre la barre noire et ce qui la suit, sur toutes les pages (18.9). */ .topbar + main.wrap { padding-top: 26px; } @media (max-width: 640px) { .topbar + main.wrap { padding-top: 16px; } } .wrap.narrow { max-width: 760px; padding-top: 32px; padding-bottom: 60px; } /* Typographie */ .display { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.2; text-transform: uppercase; letter-spacing: .12em; overflow-wrap: break-word; margin: 0 0 6px; } /* 18.8 : les titres de panneaux en minuscules ; les étiquettes en minuscules grasses. */ h2 { font-family: var(--font-display); font-weight: 600; font-size: 19px; text-transform: none; letter-spacing: 0; margin: 0 0 12px; } h3 { font-family: var(--font-body); font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--etiquette); margin: 18px 0 6px; font-weight: 700; } .lead { font-size: 16px; color: var(--muted); margin: 0 0 8px; max-width: 60ch; } .lead-sm { color: var(--muted); margin: 0; } .eyebrow { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 700; color: var(--etiquette); margin: 0 0 4px; } .hint { color: var(--muted); font-size: 13.5px; } .muted { color: var(--muted); } .prewrap { white-space: pre-wrap; } .nowrap { white-space: nowrap; } /* La barre d'ancres d'une fiche longue (la cuvée en fait plus de mille lignes une fois le vin vendu) : on change de bloc sans remonter. `sticky` et non `fixed` — elle reste dans le flux, donc elle ne recouvre rien et n'oblige à compenser aucune hauteur. Le `top` de repli vaut la hauteur de la barre du haut ; app.js pose la valeur exacte, qui double quand la barre du haut passe sur deux lignes sur téléphone. */ .ancres { position: sticky; top: 76px; z-index: 9; display: flex; gap: 6px; overflow-x: auto; padding: 9px 0; margin: 0 0 18px; background: var(--bg); border-bottom: 1px solid var(--line); } .ancres a { flex: 0 0 auto; padding: 6px 13px; border-radius: 0; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 13.5px; font-weight: 500; white-space: nowrap; } .ancres a:hover { background: var(--gris-soft); text-decoration: none; } /* Barre du haut (18.6) : noire dans les deux thèmes, comme le bandeau du site. Le logo, puis « LUA D'ENIGMAS » au-dessus de « GESTION ». */ .topbar { background: #000; position: sticky; top: 0; z-index: 10; } .topbar-inner { display: flex; align-items: center; gap: 24px; min-height: 76px; } .brand { display: inline-flex; align-items: center; gap: 14px; color: #fff; white-space: nowrap; } .brand:hover { text-decoration: none; } .brand-logo { display: block; height: 54px; width: auto; } .brand-texte { display: flex; flex-direction: column; line-height: 1.15; } .brand-name { font-family: var(--font-display); font-weight: 400; font-size: 12px; text-transform: uppercase; letter-spacing: .38em; color: #fff; } .brand-sep { color: #666; } .brand-app { font-family: var(--font-display); font-weight: 400; font-size: 22px; text-transform: uppercase; letter-spacing: .2em; color: #fff; } .brand-big { flex-direction: column; align-items: center; gap: 12px; margin-bottom: 22px; } .brand-big .brand-logo { height: 72px; } .brand-big .brand-texte { align-items: center; } /* Huit entrées (15.4, 17.2). 19.2 : le pictogramme de la partie au-dessus du mot ; une partie à plusieurs écrans les déroule sous son mot (voir « 19.2 : les menus de la barre », en fin de fichier). */ .nav { display: flex; flex-wrap: wrap; gap: 0 15px; margin-left: auto; align-items: center; align-self: stretch; } .nav-entree { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 6px 0 5px; border-radius: 0; border-bottom: 1px solid transparent; color: #C0C0C0; white-space: nowrap; font-family: var(--font-display); font-size: 11.5px; font-weight: 400; line-height: 1; text-transform: uppercase; letter-spacing: .14em; } .nav-entree:hover { color: #fff; text-decoration: none; } .nav-entree.active { color: #fff; border-bottom-color: rgba(255, 255, 255, .7); } .nav-ic { position: relative; display: inline-flex; } /* Le compte de la Boîte IA, posé en haut à droite du pictogramme. */ .nav-ic .pastille-ambre { position: absolute; top: -7px; left: calc(100% - 7px); margin: 0; } /* À droite : la roue des Réglages, puis le nom pour Mon compte. */ .user-box { display: flex; align-items: center; gap: 4px; } .roue { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 0; color: #C0C0C0; } .roue:hover, .roue.active { color: #fff; text-decoration: none; } .user-name { color: #C0C0C0; padding: 8px 10px; border-radius: 0; font-family: var(--font-display); font-size: 13.5px; font-weight: 400; text-transform: uppercase; letter-spacing: .16em; } .user-name:hover, .user-name.active { color: #fff; text-decoration: none; } /* Le rond de l'initiale : seulement sur téléphone, à la place du nom. */ .initiale { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: transparent; border: 1px solid rgba(255, 255, 255, .55); color: #fff; font-family: var(--font-display); font-weight: 400; font-size: 15px; } .initiale:hover { text-decoration: none; } /* --------------------------------------------------------------------------- Au pouce (15.6) : la barre du bas et ses deux feuilles. Rien de tout cela au-dessus de 640 px — la barre est cachée, les feuilles ne s'ouvrent que par elle. Sans JavaScript, Saisir et Plus sont des liens vers saisir.php et plus.php. --------------------------------------------------------------------------- */ .barre-tel { display: none; } .feuille-bas[hidden] { display: none; } .feuille-bas { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; justify-content: flex-end; } .feuille-voile { position: absolute; inset: 0; background: var(--voile); } .feuille-panneau { position: relative; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border-radius: 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px)); } .feuille-poignee { width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 4px auto 10px; } .feuille-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .feuille-tete h2 { margin: 0; } .feuille-fermer { font-weight: 600; padding: 8px 4px; } .feuille-liste { list-style: none; margin: 0; padding: 0; } .feuille-liste li + li { border-top: 1px solid var(--line); } .feuille-liste a { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 4px; color: var(--ink); } .feuille-liste a:hover { text-decoration: none; background: var(--zebra-doux); } .feuille-liste a.on strong { color: var(--plum); } .feuille-icone { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 0; background: var(--plum-soft); color: var(--plum); } .feuille-texte { display: flex; flex-direction: column; min-width: 0; } .feuille-texte strong { font-weight: 600; } .feuille-aide { font-size: 13px; color: var(--muted); } /* saisir.php et plus.php : la même liste, dans un panneau. */ .feuille-page { padding-top: 6px; padding-bottom: 6px; } @media (prefers-reduced-motion: no-preference) { .feuille-panneau { animation: feuille-monte .2s ease-out; } } @keyframes feuille-monte { from { transform: translateY(100%); } to { transform: none; } } /* Boutons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border-radius: 0; border: 1px solid var(--ink); background: var(--surface); color: var(--ink); font: inherit; font-family: var(--font-body); font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: .01em; cursor: pointer; white-space: nowrap; line-height: 1.2; } .btn:hover { background: #000; border-color: #000; color: #fff; text-decoration: none; } .btn-primary { background: var(--plum-bg); border-color: var(--plum-bg); color: var(--on-plum); } .btn-primary:hover { background: var(--plum-bg-hover); border-color: var(--plum-bg-hover); color: var(--on-plum); } .btn-ghost { background: transparent; border-color: var(--line-strong); } .btn-danger { color: var(--rouge); border-color: var(--rouge); } .btn-danger:hover { background: var(--rouge); border-color: var(--rouge); color: var(--on-rouge); } .btn-sm { padding: 7px 11px; font-size: 12.5px; } /* En sombre : un filet blanc à mi-teinte, le survol à peine éclairé ; le bouton principal en blanc, texte noir (ses variables). */ /* `:where()` : ces règles pèsent autant que celles du dessus, et une règle plus précise venue ensuite (le bouton Photo de la Boîte IA, la barre Focus) garde la main. */ :where(:root[data-theme="dark"]) .btn { border-color: rgba(255, 255, 255, .5); color: #fff; } :where(:root[data-theme="dark"]) .btn:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); color: #fff; } :where(:root[data-theme="dark"]) .btn-primary { background: var(--plum-bg); border-color: var(--plum-bg); color: var(--on-plum); } :where(:root[data-theme="dark"]) .btn-primary:hover { background: var(--plum-bg-hover); border-color: var(--plum-bg-hover); color: var(--on-plum); } :where(:root[data-theme="dark"]) .btn-ghost { border-color: var(--line-strong); } :where(:root[data-theme="dark"]) .btn-danger { color: var(--rouge); border-color: var(--rouge); } :where(:root[data-theme="dark"]) .btn-danger:hover { background: var(--rouge-soft); color: var(--rouge); border-color: var(--rouge); } .btn-block { width: 100%; } /* Au clavier (18.8) : un contour bleu franc, visible sur le blanc comme sur le noir. */ :focus-visible { outline: 3px solid var(--badge-bleu); outline-offset: 2px; } /* Un champ qui a la main : son filet passe à l'encre, sans halo (18.6). */ input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); } input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 3px solid var(--badge-bleu); outline-offset: 2px; } /* Messages */ /* 18.8 : fond pâle, filet de la couleur pleine, texte à l'encre. */ .flash { padding: 12px 16px; border-radius: 0; margin: 16px 0; border: 1px solid transparent; color: var(--ink); font-size: 14.5px; } .flash-ok { background: var(--vert-soft); border-color: var(--badge-vert); } .flash-err { background: var(--rouge-soft); border-color: var(--badge-rouge); } .flash-avert { background: var(--ambre-soft); border-color: var(--badge-ambre); } /* Ni bon, ni mauvais : « voici ce que je viens de faire pour vous ». Le bleu évite qu'une copie prête à enregistrer se lise comme un avertissement. */ .flash-info { background: var(--bleu-soft); border-color: var(--badge-bleu); } /* Panneaux */ .panel { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 0; padding: 20px 22px; margin: 16px 0; } .panel.empty { text-align: center; color: var(--muted); padding: 40px; } .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .cols > .panel { margin: 16px 0 0; } .cols-side { grid-template-columns: 260px 1fr; } .side-nav { display: flex; flex-direction: column; gap: 2px; padding: 10px; } .side-nav a { padding: 8px 12px; border-radius: 0; color: var(--ink); } .side-nav a:hover { background: var(--gris-soft); text-decoration: none; } .side-nav a.active { background: var(--plum-soft); color: var(--plum-ink); font-weight: 600; } /* En-tête de page */ /* 19.2 : 8 px au-dessus — la ligne « Partie › Écran » est désormais au-dessus du titre. */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 8px 0 8px; flex-wrap: wrap; } .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .actions-form { padding: 8px 0 40px; } .inline { display: inline; } .hero { padding: 40px 0 10px; } .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 12px 0 50px; } .tile { display: flex; flex-direction: column; gap: 6px; min-height: 220px; padding: 22px; border-radius: 0; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); } .tile:hover { text-decoration: none; } .tile-on { border: 1px solid var(--plum); } .tile-on:hover { background: var(--gris-soft); } .tile-title { font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.15; text-transform: none; letter-spacing: 0; } .tile-stats { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); } .stat b { color: var(--ink); font-weight: 600; } .stat-rouge b { color: var(--rouge); } .stat-ambre b { color: var(--ambre-fort); } .stat-vert b { color: var(--vert); } /* Badges d'état (18.8) : une couleur pleine (ou pâle pour le prévu et ce qui arrive), et le mot qui dit l'état. En minuscules, gras, carrés, sans filet. (Le signe devant le texte a disparu en 19.10.) rouge retard, impayé, échu, stock manquant, dormant ambre aujourd'hui, cette semaine, à relancer, à livrer, à facturer bleu rendez-vous — la seule chose en bleu plein plan prévu, à envoyer, à organiser, à conclure, en attente, devis prune reçu, nouveau, premier contact, à vérifier vert fait, soldée, payée, livrée, rapprochée gris plus tard, sans date, clôturé, annulée Les classes viennent du PHP (`alerte_classe()`…) : `ambre-fort` est un ambre, `bleu-clair` et `bleu-fonce` sont le bleu pâle du prévu. */ .badge { display: inline-block; padding: 4px 10px; border-radius: 0; font-family: var(--font-body); font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0; white-space: nowrap; line-height: 1.35; border: 0; background: var(--badge-gris); color: var(--sur-gris); } .badge-rouge { background: var(--badge-rouge); color: var(--sur-rouge); } .badge-ambre, .badge-ambre-fort { background: var(--badge-ambre); color: var(--sur-ambre); } .badge-bleu { background: var(--badge-bleu); color: var(--sur-bleu); } .badge-bleu-clair, .badge-bleu-fonce { background: var(--badge-plan); color: var(--sur-plan); } .badge-prune { background: var(--badge-prune); color: var(--sur-prune); } .badge-vert { background: var(--badge-vert); color: var(--sur-vert); } .badge-gris { background: var(--badge-gris); color: var(--sur-gris); } /* 19.11 : un **pictogramme** devant le texte, qui dit ce que dit la couleur — à la place des signes géométriques de la 18.8 (retirés en 19.10). Les tracés sont ceux du reste du site (Lucide, `inc/icones.php`), posés en masque : la pastille les remplit de la couleur de son texte, en clair comme en sombre. Les lignes `--pic` viennent de `css_icones_badges()` — un test vérifie qu'elles n'ont pas divergé. Le gris n'en a pas. rouge cercle « ! » en retard, impayé, échu, épuisé, dormant ambre horloge aujourd'hui, cette semaine, à relancer, à livrer bleu calendrier un rendez-vous bleu pâle sablier prévu, en attente, à encaisser, devis prune étincelles reçu, nouveau, premier contact, à vérifier vert coche fait, payée, livrée, soldée */ .badge-rouge { --pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E"); } .badge-ambre { --pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); } .badge-ambre-fort { --pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); } .badge-bleu { --pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E"); } .badge-bleu-clair { --pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22h14'/%3E%3Cpath d='M5 2h14'/%3E%3Cpath d='M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22'/%3E%3Cpath d='M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2'/%3E%3C/svg%3E"); } .badge-bleu-fonce { --pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22h14'/%3E%3Cpath d='M5 2h14'/%3E%3Cpath d='M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22'/%3E%3Cpath d='M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2'/%3E%3C/svg%3E"); } .badge-prune { --pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z'/%3E%3Cpath d='M20 3v4'/%3E%3Cpath d='M22 5h-4'/%3E%3Cpath d='M4 17v2'/%3E%3Cpath d='M5 18H3'/%3E%3C/svg%3E"); } .badge-vert { --pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); } .badge:is(.badge-rouge, .badge-ambre, .badge-ambre-fort, .badge-bleu, .badge-bleu-clair, .badge-bleu-fonce, .badge-prune, .badge-vert):not(.badge-neutre)::before { content: ""; flex: none; width: 14px; height: 14px; margin-left: -2px; background: currentColor; -webkit-mask: var(--pic) center / contain no-repeat; mask: var(--pic) center / contain no-repeat; } /* Ce qui n'est pas un état — l'intérêt, une quantité, un pourcentage, une nature, une source, le « quoi » du journal : neutre, sans signe. */ .badge.badge-neutre { background: var(--gris-soft); color: var(--ink); border: 1px solid var(--line-strong); padding: 3px 9px; } .badge.badge-neutre::before { content: none; } /* Un compte dans le titre d'un panneau (le « 6 » d'En retard) : un peu plus grand, centré. */ .panel-titre .badge { font-size: 14px; padding: 3px 11px; min-width: 34px; text-align: center; } /* Colonne Alerte : centrée, c'est l'information qu'on cherche en premier. 19.2 : seulement une colonne d'état — l'alerte d'un prospect, un badge d'état en tête de ligne. Une autre première colonne (un nom, une étape, une date) se lit à gauche, comme le reste du tableau. */ table.list > tbody > tr > td.cell-urgence, table.list > thead > tr > th.cell-urgence, table.list > tbody > tr:has(> td:first-child .badge:not(.badge-neutre)) > td:first-child, table.list:has(> tbody > tr > td:first-child .badge:not(.badge-neutre)) > thead > tr > th:first-child { text-align: center; } /* Tableau de bord */ /* Panneaux dépliables (tableau de bord, filtres) */ /* La barre d'un bloc dépliable : voir « 19.1 : les blocs dépliables », en fin de fichier. */ .dash-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14.5px; } .dash-table th, .dash-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; } .dash-table thead th { font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--etiquette); font-weight: 700; background: var(--surface); vertical-align: bottom; border-bottom-color: var(--ink); } /* Un liseré de couleur sous chaque intitulé : même code que les pastilles de la liste */ .dash-table thead th.num { border-bottom: 4px solid var(--line-strong); } .dash-table thead th.col-rouge { border-bottom-color: var(--rouge); } .dash-table thead th.col-ambre { border-bottom-color: var(--ambre-fort); } .dash-table thead th.col-bleu { border-bottom-color: var(--bleu); } .dash-table thead th.col-bleu-clair { border-bottom-color: var(--bleu-clair); } .dash-table thead th.col-bleu-fonce { border-bottom-color: var(--bleu-fonce); } .dash-table thead th.col-prune { border-bottom-color: var(--plum-soft); } .dash-table thead th.col-vert { border-bottom-color: var(--vert); } .dash-table tbody tr:hover th, .dash-table tbody tr:hover td { background: var(--plum-soft); } .dash-table tbody th { font-weight: 600; } .dash-table tbody th a { color: var(--ink); } .dash-table tbody th a:hover { color: var(--plum); } .dash-table tfoot th, .dash-table tfoot td { font-weight: 700; border-bottom: none; border-top: 2px solid var(--plum); background: var(--zebra-doux); } .dash-table .num { text-align: center; font-variant-numeric: tabular-nums; } .dash-table .num a { font-weight: 700; font-size: 15.5px; } .dash-table .num-rouge a { color: var(--rouge); } .dash-table .num-ambre a { color: var(--ambre-fort); } .dash-table .num-bleu a { color: var(--bleu); } .dash-table .num-bleu-clair a { color: var(--bleu-clair); } .dash-table .num-bleu-fonce a { color: var(--bleu-fonce); } .dash-table .num-prune a { color: var(--plum); } .dash-table .num-vert a { color: var(--vert); } .dash-table .zero { color: var(--line-strong); } .dash-vide th a, .dash-vide td { color: var(--muted); font-weight: 400; } /* Filtres — les trois blocs (tableau de bord, recherche, filtres) partagent le même gabarit de carte pour rester à la même hauteur une fois repliés. */ .filters { margin: 12px 0 8px; } .filters-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 15px 22px; margin: 0; } .champ-recherche { position: relative; display: flex; align-items: center; flex: 1 1 260px; } /* Une phrase sous la barre : dire que la recherche et les menus se cumulent. */ .hint-recherche { margin: 6px 2px 0; } /* Un menu posé dans la barre de recherche : intitulé à gauche, sur une ligne. */ .filtre-tournee { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 8px; } .filtre-tournee select { width: auto; min-width: 130px; } .champ-recherche input { padding-left: 40px; font-size: 15.5px; } /* Dans un formulaire, le champ occupe toute la largeur de sa case. */ .form-grid .champ-recherche { flex: 1 1 auto; width: 100%; } .form-grid .champ-recherche input { width: 100%; } .icone-loupe { position: absolute; left: 13px; width: 18px; height: 18px; color: var(--muted); pointer-events: none; } .filtres-pliant { margin: 12px 0 0; } .filtres-pliant .form-grid { margin-top: 18px; } .filtres-actions { display: flex; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } .panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); } .panel-titre { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .panel-titre h2 { margin: 0; } .dl-chiffres { margin-top: 14px; } .chiffres { display: flex; flex-wrap: wrap; gap: 8px 26px; padding: 16px 22px; } .chiffres .stat { font-size: 14px; color: var(--muted); } .chiffres .stat b { font-size: 19px; color: var(--ink); font-variant-numeric: tabular-nums; } .chiffres .stat-vert b { color: var(--vert); } .chiffres .stat-rouge b { color: var(--rouge); } .chiffres .stat-ambre b { color: var(--ambre-fort); } /* Un panneau qui prévient sans bloquer : le doublon probable, avant d'écrire. */ .panel-avert { border-color: var(--ambre-bord); background: var(--ambre-soft); } .panel-avert h2 { color: var(--ambre); } /* « Sans suite » : son motif tient sur la même ligne que le bouton. */ .form-sans-suite { display: inline-flex; align-items: center; gap: 8px; } .form-sans-suite select { width: auto; min-width: 130px; } table.list .num { text-align: right; font-variant-numeric: tabular-nums; } table.list thead th.num { text-align: right; } .col-action { text-align: right; white-space: nowrap; } .col-action .btn { margin-left: 4px; } .ligne-cuvee { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; } .ligne-cuvee + .ligne-cuvee { margin-top: 3px; } .ligne-nom { font-weight: 500; } .ligne-detail { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; } .lignes-commande td { padding: 8px 10px; } .lignes-commande select, .lignes-commande input { min-width: 120px; } .annee-cellule { white-space: nowrap; font-weight: 600; } .contacts { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 10px; } .contacts li { padding-bottom: 10px; border-bottom: 1px solid var(--line); } .contacts li:last-child { border-bottom: none; } .contact-nom { font-weight: 600; } .contact-fonction { font-weight: 400; font-size: 13px; color: var(--plum); background: var(--plum-soft); padding: 2px 8px; border-radius: 0; margin-left: 4px; white-space: nowrap; } .cell-certifs { white-space: normal; } .cell-certifs .badge { margin: 2px 4px 2px 0; } /* `.bloc-certif` encadrait le formulaire déroulé de chaque certification. Depuis la 13.7, les certifications sont une liste et un seul formulaire s'ouvre. */ /* Prix de revient : une addition qu'on doit pouvoir refaire de tête */ .revient { margin-top: 4px; } .revient th { font-weight: 400; text-align: left; } .revient td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .revient .revient-sous-total th, .revient .revient-sous-total td { font-weight: 600; border-top: 1px solid var(--line-strong); } .revient .revient-total th, .revient .revient-total td { font-weight: 700; border-top: 2px solid var(--plum); } .revient .revient-cle th, .revient .revient-cle td { background: var(--plum-soft); font-size: 16px; } .revient .revient-marge th, .revient .revient-marge td { border-top: 1px solid var(--line-strong); font-size: 16px; } .revient .revient-bloque th, .revient .revient-bloque td { background: var(--ambre-soft); } .revient .revient-section th { font-family: var(--font-display); font-size: 16px; color: var(--plum); padding-top: 20px; border-bottom: 1px solid var(--line-strong); } .cases-millesimes { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 9px 0; } .cases-millesimes .check { color: var(--ink); font-size: 14px; } .inline-date { flex-direction: row; align-items: center; gap: 8px; color: var(--ink); } .inline-date input, .inline-date select { width: auto; } /* Analyse : cinq à sept indicateurs, pas davantage — au-delà on ne voit plus celui qui est au rouge. */ .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 26px; } .kpi { display: flex; flex-direction: column; gap: 2px; } .kpi-valeur { font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; } .kpi-nom { font-size: 13px; font-weight: 700; color: var(--etiquette); text-transform: none; letter-spacing: 0; } .kpi-detail { font-size: 13.5px; color: var(--muted); } /* Une pastille qui se clique : le statut est aussi le bouton qui le change */ .btn-pastille { background: none; border: none; padding: 0; cursor: pointer; font: inherit; } .btn-pastille .badge { cursor: pointer; } .btn-pastille:hover .badge { border-color: var(--plum); } .barre { display: block; width: 100%; min-width: 90px; height: 8px; border-radius: 0; background: var(--gris-soft); overflow: hidden; } .barre-part { display: block; height: 100%; background: var(--plum); border-radius: 0; } .kpis-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .kpis, .kpis-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .kpis, .kpis-4 { grid-template-columns: 1fr; } } .marge-positive { color: var(--vert); } .marge-negative { color: var(--rouge); } .ecotaxe { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 16px; } .ecotaxe h3 { margin-bottom: 12px; } .suivi-form .form-grid { margin-top: 4px; } .count { color: var(--muted); font-size: 13px; margin: 6px 0 10px; } /* Liste */ .table-wrap { overflow-x: auto; } table.list { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 0; overflow: hidden; } table.list th, table.list td { padding: 12px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); } table.list thead th { font-family: var(--font-body); font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--etiquette); font-weight: 700; background: var(--surface); border-bottom: 1px solid var(--ink); } table.list tbody tr:last-child td { border-bottom: none; } .cell-nom { vertical-align: top; } .cell-nom a { font-weight: 600; font-size: 15px; color: var(--ink); } .cell-nom a:hover { color: var(--plum); text-decoration: underline; } .date-retard { color: var(--rouge); font-weight: 700; font-size: 13.5px; } /* Toute la ligne ouvre la fiche, et une barre colorée rappelle l'alerte */ table.list tbody tr[data-href] { cursor: pointer; } table.list tbody tr[data-href]:hover td, table.list tbody tr[data-volet]:hover td { background: var(--gris-soft); } /* 18.8 : la ligne porte son état — un trait gauche de 5 px de la couleur du badge de sa première cellule, et un fond pâle pour le rouge et l'ambre (voir « La ligne porte son état », en fin de fichier). Sans badge, le trait est transparent : les colonnes restent alignées. */ table.list tbody td:first-child { border-left: 5px solid transparent; } /* Une fiche close (Clôturé, Pas intéressé), sous « Toutes » : en gris (18.5). */ tr.ligne-close td, tr.ligne-close td a, tr.ligne-close td strong { color: var(--muted); } .sub { display: block; font-size: 13.5px; color: var(--muted); } .show-sm { display: none; } /* Fiche */ .dl { display: grid; grid-template-columns: 150px 1fr; gap: 6px 14px; margin: 0; } .dl dt { color: var(--muted); font-size: 13px; padding-top: 2px; } .dl dd { margin: 0; } .journal { list-style: none; margin: 16px 0 0; padding: 0; } .journal li { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); } .journal-meta { font-size: 12.5px; color: var(--muted); } .journal-auto .journal-texte { color: var(--muted); font-size: 14px; } .note-form { display: flex; gap: 10px; align-items: flex-start; } .note-form textarea { flex: 1; } /* Formulaires */ label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); font-weight: 500; } label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--ink); font-weight: 400; } input, select, textarea { font: inherit; font-family: var(--font-body); font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 0; padding: 8px 10px; width: 100%; } input[type="checkbox"] { width: auto; } textarea { resize: vertical; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; } .form-grid-4 { grid-template-columns: repeat(4, 1fr); } .form-grid .span2 { grid-column: span 2; } .form-grid .span3 { grid-column: span 3; } .form-grid .span4 { grid-column: 1 / -1; } .form .panel h2 { margin-bottom: 14px; } /* La fiche d'un millésime (15.7) : une phrase en tête — la prochaine opération —, puis les blocs sous trois titres. La barre de jalons d'avant répétait les blocs : elle est partie. */ .phrase-operation { font-size: 16px; font-weight: 600; margin: 8px 0 4px; max-width: 70ch; } .phrase-alerte { color: var(--ambre-fort); } /* Les titres de groupe d'une fiche (19.1) : en capitales espacées, sur un filet. */ .groupe-fiche { margin: 28px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line-strong); font-family: var(--font-display); font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: .24em; color: var(--muted); } /* La barre de saut, en trois groupes : le nom du groupe, puis ses blocs. */ .saut .saut-groupe { flex: 0 0 auto; align-self: center; margin-left: 6px; font-size: 12.5px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--etiquette); } .saut .saut-groupe:first-child { margin-left: 0; } .etape-marque.etape-prochaine { color: var(--plum); } .menu-plus-liste .menu-danger { color: var(--rouge); } .table-parcours .jalon-tete { font-size: 12px; font-weight: 600; line-height: 1.15; writing-mode: vertical-rl; transform: rotate(180deg); height: 8.5em; padding: 6px 2px; white-space: nowrap; } .table-parcours td.jalon { font-size: 15px; font-weight: 700; padding-left: 2px; padding-right: 2px; } .table-parcours td.jalon-fait { color: var(--vert); } .table-parcours td.jalon-a_faire { color: var(--line-strong); } .table-parcours td.jalon-sans_objet { color: var(--line); } /* Le chai : une ligne par étape, chacune son propre formulaire. Sur téléphone, les champs passent les uns sous les autres sans rien casser. */ .etapes-chai { list-style: none; padding: 0; margin: 12px 0 0; } .etapes-chai > li { border-top: 1px solid var(--line); } .etapes-chai > li:first-child { border-top: none; } /* Une étape est un bloc : ses occurrences, et de quoi le déplacer. La poignée et les flèches tiennent dans une colonne étroite à gauche. */ .etape-bloc { display: flex; align-items: flex-start; gap: 6px; } .etape-bloc .etape-lignes { flex: 1 1 auto; min-width: 0; } .etape-poignee { cursor: grab; color: var(--line-strong); font-size: 15px; padding: 14px 2px 0; user-select: none; } .etape-bloc:hover .etape-poignee { color: var(--muted); } .etape-portee { opacity: .5; background: var(--gris-soft); } .etape-fleches { display: flex; flex-direction: column; gap: 1px; padding-top: 10px; } .btn-fleche { border: 1px solid transparent; background: none; cursor: pointer; color: var(--line-strong); font-size: 12px; line-height: 1; padding: 3px 4px; border-radius: 0; } .btn-fleche:hover:not(:disabled) { background: var(--gris-soft); color: var(--ink); border-color: var(--line); } .btn-fleche:disabled { opacity: .3; cursor: default; } /* Les analyses : le résumé en tête de fiche, le tableau, et les courbes. */ .chiffres-analyse a { color: var(--plum); font-weight: 600; } .sub-inline { color: var(--muted); font-size: 12px; font-weight: 400; } /* Un champ absent qui explique son absence, à la place du champ. */ .hint-champ { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; line-height: 1.4; } .table-analyses td.num, .table-analyses th.num { font-variant-numeric: tabular-nums; } .sub-ambre { color: var(--ambre); } /* Les courbes d'analyses (19.1) : deux par ligne, chacune dans sa carte. */ .courbes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 16px 0 4px; } .courbe { margin: 0; border: 1px solid var(--line); padding: 12px 14px; background: var(--surface); min-width: 0; } .courbe figcaption { font-size: 13.5px; font-weight: 700; margin-bottom: 6px; } .courbe figcaption .unite { color: var(--muted); font-weight: 400; } .courbe svg { display: block; width: 100%; height: 120px; overflow: visible; } .courbe .axe { stroke: var(--line-strong); stroke-width: 1; } /* Les tailles du texte des courbes sont dans le dessin (unités du viewBox). */ .courbe .borne { fill: var(--muted); font-family: var(--font-body); } .courbe polyline { fill: none; stroke: var(--ink); stroke-width: 2; } .courbe circle { fill: var(--ink); } .courbe .valeur { fill: var(--ink); font-weight: 700; font-family: var(--font-body); } .courbe .jour { fill: var(--muted); font-family: var(--font-body); } .courbe .seuil { stroke: var(--rouge); stroke-width: 1.5; stroke-dasharray: 5 4; } .courbe .seuil-texte { fill: var(--rouge); font-weight: 700; font-family: var(--font-body); } @media (max-width: 900px) { .courbes { grid-template-columns: 1fr; } } /* La croix qui supprime une ligne d'étape. Discrète tant qu'on ne la cherche pas, rouge dès qu'on la survole : elle efface pour de bon. */ .btn-croix { border: 1px solid transparent; background: none; cursor: pointer; color: var(--line-strong); font-size: 13px; line-height: 1; padding: 6px 8px; border-radius: 0; } .btn-croix:hover { background: var(--rouge-soft); color: var(--rouge); border-color: var(--rouge-bord); } /* Ajouter une étape à cette cuvée-là : **le** geste du chai depuis la 13.3. Le mécanisme « écarter » a disparu — ne pas ajouter une étape suffit. */ .ajout-etape { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); } .ajout-etape label { margin: 0; font-size: 12px; color: var(--muted); flex: 0 1 280px; } .ajout-etape label:nth-of-type(2) { flex: 0 1 150px; } .ajout-etape .hint { flex: 1 1 240px; } /* Préparer un millésime : une ligne par vin, sa case et son calendrier. */ .liste-millesimes .chai-quoi { flex: 1 1 auto; } .liste-millesimes .check { flex: 0 1 auto; font-size: 13px; } @media (max-width: 700px) { /* Au doigt, la poignée ne sert à rien : seules les flèches restent. */ .etape-poignee { display: none; } } .ligne-etape { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 10px 0; } .ligne-etape .etape-nom { flex: 1 1 190px; font-weight: 600; align-self: center; } .ligne-etape .etape-champ { flex: 0 1 150px; margin: 0; font-size: 12px; color: var(--muted); } .ligne-etape .etape-note { flex: 1 1 220px; } /* Le chiffre de la cuvée saisi dans l'étape — volume, bouteilles. Il compte plus que la note : on le distingue, sans en faire un bouton. */ .ligne-etape .etape-chiffre { flex: 0 1 165px; color: var(--plum); font-weight: 600; } .ligne-etape .etape-chiffre input { font-weight: 600; border-color: var(--line-strong); } .ligne-etape .etape-champ input { font-size: 14px; } .ligne-etape .etape-actions { display: flex; gap: 6px; margin-left: auto; align-self: center; } .etape-marque { font-weight: 700; margin-right: 5px; } /* Le fond de couleur porte sur la ligne, désormais imbriquée dans son bloc : un peu d'air sur les côtés pour qu'il ne colle pas au texte. */ .etapes-chai .etape-fait, .etapes-chai .etape-retard { padding-left: 8px; padding-right: 8px; border-radius: 0; } .etapes-chai .etape-fait { background: var(--vert-soft); } .etapes-chai .etape-fait .etape-marque { color: var(--vert); } .etapes-chai .etape-retard { background: var(--rouge-soft); } .etapes-chai .etape-retard .etape-nom { color: var(--rouge); } .chai-compte { font-variant-numeric: tabular-nums; } /* Retour en 18.7 à la liste de la 17.8 : chaque ligne est son formulaire, la poignée et les flèches toujours visibles. La lecture de la 17.9 (crayon, « Reporter », poignées cachées) a disparu, avec ses règles. */ .ligne-etape .etape-marque { color: var(--muted); } .ligne-etape .etape-marque.etape-prochaine { color: var(--plum); } .ligne-etape .etape-nom .sub { font-weight: 400; } /* En Focus, le lien « ses habitudes » mènerait ailleurs : il se tait (17.9). */ .mode-focus #fournisseur-connu a { display: none; } /* « Mes fiches » : qui l'on regarde, et comment en changer. */ .bandeau-mien { margin: 0 0 12px; padding: 9px 14px; border-radius: 0; background: var(--plum-soft); color: var(--plum-ink); font-size: 14px; } .bandeau-mien a { margin-left: 6px; font-weight: 600; } /* Le geste rapide de la prospection : un mini-formulaire déplié dans la ligne. Il tient sur une ligne à l'écran, et passe en colonne sur téléphone. */ .ligne-noter > td { background: var(--plum-soft); padding: 10px 14px; } .form-noter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; } .form-noter .noter-nom { font-weight: 600; align-self: center; flex: 0 1 auto; } .form-noter label { margin: 0; font-size: 12px; color: var(--muted); flex: 0 1 200px; } .form-noter select, .form-noter input { font-size: 14px; } .form-noter .btn { margin-left: 0; } @media (max-width: 640px) { .form-noter label { flex: 1 1 100%; } } /* Noter un échange (15.1) : trois questions, en lignes de pastilles. */ .geste-fiche .noter-nom { display: block; font-weight: 600; margin-bottom: 2px; } .geste-fiche .form-noter { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-strong); } .form-echange .ligne-chips { margin: 8px 0; } .form-echange .echange-note { display: flex; margin: 4px 0 2px; } .form-echange .echange-note textarea { width: 100%; font-size: 14px; } .form-echange [data-pour-suite].form-grid { margin-top: 8px; } .form-echange .echange-autre { margin-top: 8px; } .form-echange .panel-actions { margin-top: 10px; } /* Sans JavaScript, la pastille cochée se voit quand même. */ .chip:has(input:checked) { background: var(--plum-bg); border-color: var(--plum-bg); color: var(--on-plum); } /* Le volet (15.2) : à droite de la liste des prospects ou des clients, il porte tout ce qu'il faut pour agir sans quitter la liste. Fixe, 420 px, son propre défilement ; sous 900 px, il prend tout l'écran, le bouton fermer en haut. Les couleurs et les polices sont celles de l'outil. */ .volet { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: 420px; max-width: 100%; background: var(--surface); border-left: 1px solid var(--line-strong); box-shadow: var(--ombre-menu); overflow-y: auto; overscroll-behavior: contain; } .volet-corps { padding: 16px 18px 28px; } .volet-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; position: sticky; top: -16px; margin: -16px -18px 10px; padding: 16px 18px 10px; background: var(--surface); border-bottom: 1px solid var(--line); z-index: 1; } .volet-nom { margin: 0; font-family: var(--font-display); font-size: 19px; font-weight: 600; text-transform: none; letter-spacing: 0; } .volet-tete .sub { margin: 2px 0 0; } .volet-lien { margin: 4px 0 0; font-size: 13px; } .volet-fermer { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; } .volet-fermer:hover { border-color: var(--plum); color: var(--plum); } .volet-contact { margin: 0 0 10px; } .volet-boutons { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; } .volet-prochain { margin: 0 0 6px; font-weight: 600; } .volet-bloc { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); } .volet-bloc h3 { margin: 0 0 8px; } .volet-liste { margin: 8px 0 0; padding-left: 18px; font-size: 14px; } /* Le volet d'un article (15.9) : trois chiffres côte à côte — en stock, à prévoir, manque. */ .volet-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 4px; } .volet-chiffres > div { background: var(--zebra-doux); border: 1px solid var(--line); border-radius: 0; padding: 8px 10px; } .volet-chiffres dt { font-size: 12px; color: var(--muted); } .volet-chiffres dd { margin: 2px 0 0; font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; } .volet-chiffres dd .sub { display: block; font-size: 12px; font-weight: 400; color: var(--muted); } .volet .journal li { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; } .volet .form-grid-4 { grid-template-columns: 1fr 1fr; } .volet-rares .form-noter { margin: 0; } /* La ligne dont le volet est ouvert. */ tr.ligne-ouverte > td { background: var(--plum-soft); } tr[data-volet] { cursor: pointer; } .consigne-volet { margin: 6px 0 10px; } /* Sur grand écran, la liste se pousse pour ne pas passer sous le volet. */ @media (min-width: 1280px) { body.volet-ouvert main.wrap { margin-right: 440px; } } @media (max-width: 900px) { .volet { width: 100%; border-left: 0; box-shadow: none; } .volet-fermer { width: 44px; height: 44px; } } /* Le bloc « Échanges et rendez-vous » de la fiche. */ .prochain-contact { margin: 0 0 6px; font-size: 16px; font-weight: 600; } .bloc-rdv:not(:empty) { margin-top: 16px; } .bloc-rdv h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .bloc-journal { margin-top: 22px; } .bloc-journal .journal { margin-top: 10px; } .journal-echange .badge { margin-right: 4px; } /* Le numéro de facture, saisi au moment de marquer la vente facturée. */ .champ-numero { width: 8.5rem; font-size: 13px; padding: 4px 8px; } .avancement { display: flex; align-items: center; gap: 7px; } /* Ce qui ne se montre que d'un côté de 700 px (17.8 : l'accueil, l'agenda). Ces classes ne font que **cacher** : ailleurs, l'élément garde son affichage. */ @media (min-width: 701px) { .seulement-tel-700 { display: none !important; } } @media (max-width: 700px) { .seulement-bureau-700 { display: none !important; } } /* L'accueil (17.8) : deux tiers pour ce qui attend, un tiers pour le journal et les parties dès 900 px ; l'un sous l'autre en dessous. */ .accueil-grille { display: grid; grid-template-columns: 1fr; gap: 0 18px; margin: 16px 0; align-items: start; } .accueil-grille .panel { margin: 0 0 16px; } @media (min-width: 900px) { .accueil-grille { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } } /* Une rangée sobre : l'étiquette en petites capitales, le titre et son sous-titre, la date à droite, puis le geste. */ .rangees { list-style: none; margin: 6px 0 0; padding: 0; } .rangee { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto auto; align-items: center; gap: 4px 14px; padding: 10px 0; border-top: 1px solid var(--line); } .rangee:first-child { border-top: 0; } .rangee-etiquette { font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--etiquette); } .rangee-titre { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; } .rangee-texte .sub { font-size: 13.5px; overflow-wrap: anywhere; } .rangee-quand { font-size: 13.5px; color: var(--muted); white-space: nowrap; text-align: right; } .rangee-geste.carte-gestes { margin-top: 0; justify-content: flex-end; } .et-encore { margin: 10px 0 0; } /* Les parties, en liste : le nom en lien, ses deux chiffres à la suite. */ .liste-parties { list-style: none; margin: 8px 0 0; padding: 0; } .liste-parties li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; padding: 8px 0; border-top: 1px solid var(--line); } .liste-parties li:first-child { border-top: 0; } .liste-parties a { font-weight: 600; } .liste-parties span { color: var(--muted); font-size: 13.5px; } .liste-parties span::before { content: "· "; } /* Sur téléphone, la rangée devient une carte : l'étiquette et le retard en tête, le titre, puis le geste sur toute la largeur — et, pour une relance, « Appeler » à côté. « À compléter » se replie en une phrase. */ @media (max-width: 700px) { .rangee { grid-template-columns: minmax(0, 1fr) auto; margin-top: 10px; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 0; background: var(--surface); } .rangee:first-child { border-top: 1px solid var(--line); } .rangee-retard { border-left: 5px solid var(--badge-rouge); } .rangee-etiquette { grid-column: 1; grid-row: 1; } .rangee-quand { grid-column: 2; grid-row: 1; } .rangee-texte { grid-column: 1 / -1; } .rangee-geste.carte-gestes { grid-column: 1 / -1; margin-top: 6px; flex-wrap: nowrap; justify-content: stretch; } .rangee-geste > * { flex: 1 1 auto; } .rangee-geste .btn { width: 100%; min-height: 46px; font-size: 14px; } .rangee-geste > .rangee-appel { flex: 0 0 auto; width: auto; padding-left: 16px; padding-right: 16px; } .panneau-rangees { padding: 14px 14px 16px; } .completer-tel > summary { flex-direction: column; align-items: stretch; gap: 4px; font-size: 17px; } .completer-tel > summary::before { display: none; } .completer-tel-apercu { font-family: var(--font-body); font-size: 14px; color: var(--muted); } } /* Une vente annulée reste lisible, mais s'efface visuellement : elle ne compte plus nulle part, et la ligne doit le dire au premier coup d'œil. */ .ligne-annulee { opacity: 0.55; } .ligne-annulee .cell-nom a { text-decoration: line-through; } /* Onglets d'une même partie : consulter d'un côté, saisir de l'autre. */ .onglets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; } /* 18.6 : des intitulés en capitales espacées, sans fond ni cadre ; l'actif à l'encre, souligné d'un filet. Les boutons posés dans la barre (« + Prospect ») restent des boutons. */ .onglets a:not(.btn) { padding: 9px 18px; border-radius: 0; border: 1px solid transparent; background: none; color: var(--muted); font-family: var(--font-display); font-weight: 400; font-size: 14px; text-transform: none; letter-spacing: 0; text-decoration: none; } /* Les onglets d'une partie gardent les capitales espacées du site (18.8). */ .onglets-partie a:not(.btn) { text-transform: uppercase; letter-spacing: .16em; } .onglets a:not(.btn):hover { color: var(--ink); } .onglets a.on:not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 7px; } /* Sur téléphone (17.8), les onglets d'une partie et les blocs d'une fiche millésime tiennent sur **une seule rangée** qui défile au doigt : pas de barre de défilement, et un fondu au bord droit pour dire qu'il y a la suite. Le fondu est un dernier élément collé au bord (`sticky`) : en fin de défilement, il n'est plus qu'une marge après le dernier bouton. */ @media (max-width: 700px) { .onglets-partie, .ancres { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .onglets-partie::-webkit-scrollbar, .ancres::-webkit-scrollbar { display: none; } .onglets-partie > *, .ancres > * { flex: 0 0 auto; } .onglets-partie a { padding: 8px 14px; } .onglets-partie .onglets-action { margin-left: 4px; } .onglets-partie::after, .ancres::after { content: ""; position: sticky; right: 0; flex: 0 0 28px; margin-left: -8px; background: linear-gradient(to right, transparent, var(--bg)); pointer-events: none; } } /* --------------------------------------------------------------------------- La saisie guidée d'une dépense : un bloc par question, dans l'ordre où l'on y répond une facture en main. Sur téléphone, un bloc occupe l'écran. --------------------------------------------------------------------------- */ .saisie-etapes .bloc-saisie { border: none; border-top: 1px solid var(--line); margin: 0; padding: 18px 0 4px; } .saisie-etapes .bloc-saisie:first-of-type { border-top: none; padding-top: 4px; } .saisie-etapes legend { padding: 0; font-family: var(--font-display); font-size: 17px; font-weight: 500; } .actions-saisie { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 8px; } /* Le choix du type : trois grands boutons, un seul actif. */ .choix-large { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 4px; } .choix-large .choix { flex: 1 1 200px; margin: 0; cursor: pointer; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 0; background: var(--surface); display: block; /* 17.5 : le parent de l'input caché, sans quoi il se place par rapport à la page. */ position: relative; } .choix-large .choix:hover { border-color: var(--plum); } /* Un pixel de large et de haut : sans cela, l'input caché garde le `width: 100%` des champs et élargit la page (17.5). */ .choix-large .choix input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; } .choix-large .choix-titre { display: block; font-weight: 600; } .choix-large .choix-sous { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; } .choix-large .choix-actif { border-color: var(--plum); background: var(--plum-soft); } .choix-large .choix-actif .choix-titre { color: var(--plum-ink); } /* Les pastilles : étape, cible, IVA, paiement. Un tap, pas un menu déroulant. */ .ligne-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; } .chips-titre { font-size: 13px; color: var(--etiquette); text-transform: none; letter-spacing: 0; font-weight: 700; } .chip { margin: 0; cursor: pointer; white-space: nowrap; padding: 7px 13px; border: 1px solid var(--line-strong); border-radius: 0; background: var(--surface); font-family: var(--font-body); font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; position: relative; } .chip:hover { border-color: var(--plum); } /* Une chip qui est un lien (les raccourcis de période de l'export, 16.8). */ a.chip { display: inline-block; color: inherit; text-decoration: none; } a.chip.chip-actif { color: var(--on-plum); } .export-signal { color: var(--ambre); font-weight: 600; margin-top: 4px; } .chip input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; } .chip-actif { background: var(--plum-bg); border-color: var(--plum-bg); color: var(--on-plum); } /* 17.8 : la pastille suit sa case même sans script, là où le navigateur connaît `:has()` ; ailleurs, la classe posée par le serveur et le script. */ .chip:has(input:checked) { background: var(--plum-bg); border-color: var(--plum-bg); color: var(--on-plum); } .chip.chip-actif:has(input:not(:checked)) { background: var(--surface); border-color: var(--line-strong); color: inherit; } .chip:has(input:focus-visible) { outline: 2px solid var(--plum); outline-offset: 2px; } .chip-champ { margin: 0; font-size: 12px; color: var(--muted); } .chip-champ input { font-size: 14px; max-width: 150px; } .chips-repli { display: inline-block; } .chips-repli summary { cursor: pointer; font-size: 14px; color: var(--muted); padding: 7px 4px; } .chips-repli[open] { display: block; width: 100%; } .chips-repli[open] summary { margin-bottom: 6px; } .pour-cible { margin-top: 12px; } /* Une aide alignée sur la ligne du champ qu'elle explique. */ .hint-aligne { align-self: end; margin: 0 0 8px; } /* Les lots d'une facture de tonnellerie : une ligne par format. */ .lots-barriques td { padding: 6px 8px; } .lots-barriques input { width: 100%; } .lots-barriques th { font-size: 12px; } .pour-cible > label { max-width: 420px; } /* Un `` n'enveloppe que pour grouper : il s'efface de la grille, sinon ses champs compteraient pour une seule colonne. **Le sélecteur vise `span` et rien d'autre** : posé sur un `