/* ============================================================================= UNFAIR — Variante ÉPURÉE (essai local) Se pose après dashboard-v2.css et ne s'active que sous ``. Sans cet attribut, ce fichier ne change rien : on bascule d'un style à l'autre sans recharger la page. Le principe, repris des deux références : une interface presque entièrement NEUTRE — blanc, gris très clairs, filets d'un pixel — où la couleur devient rare. Le bleu UNFAIR ne peint plus les surfaces : il ne marque plus que ce qui compte, c'est-à-dire les chiffres, l'entrée de menu active, les variations, et le tracé des graphiques. C'est l'inverse exact de la version bleue : là-bas la couleur portait l'ambiance, ici elle porte l'information. Une interface où tout est coloré ne peut plus rien souligner. ============================================================================= */ :root[data-style="epure"]{ /* --- Les surfaces, toutes neutres ------------------------------------ */ --cream:#f5f5f7; /* le fond de page, gris à peine teinté */ --white:#ffffff; /* les cartes, blanc franc */ --cream2:#efeff2; /* les creux */ --creux:#f4f4f7; --ink:#0e0e13; --ink2:#3d3d47; --grey:#6e6e79; /* 5,07:1 sur blanc */ --grey-l:#a4a4b0; --grey-ll:#e8e8ec; /* le filet d'un pixel, partout */ /* --- Le bleu, devenu rare -------------------------------------------- */ --accent:#1a1aff; --accent-l:#eeeeff; /* Les statuts restent, mais ne servent plus qu'aux signaux : une alerte, une variation, un score. Jamais un fond de carte. */ --red:#d52c2c; --amber:#9b5208; --green:#0b7441; --red-l:#fef3f3; --green-l:#f1fbf5; --amber-l:#fdf8ef; --blue-l:#f0f1ff; --purple-l:#f4f2ff; /* --- Le relief disparaît --------------------------------------------- Plus de tranche, plus d'arête éclairée, plus de liseré bleu. Une carte se signale par un filet d'un pixel et une ombre à peine perceptible. C'est ce qui donne le calme des deux références : rien ne flotte. */ --liseret:var(--grey-ll); --liseret-f:#d4d4dc; --bord:transparent; --bord2:transparent; --relief:0 0 0 1px var(--grey-ll), 0 1px 2px rgba(14,14,25,.04); --relief-h:0 0 0 1px #d8d8e0, 0 6px 16px -8px rgba(14,14,25,.14); --relief-s:0 0 0 1px var(--grey-ll); --relief-s-h:0 0 0 1px #d8d8e0, 0 4px 12px -6px rgba(14,14,25,.12); --face:#ffffff; /* plus de dégradé : un blanc plat */ --r:16px; --rail-l:92px; /* la largeur du rail lui-même */ --rail-x:24px; /* son écart au bord gauche de la fenêtre */ --rail:160px; /* la piste réservée : 24 + 92 + 44 d'air */ } :root[data-style="epure"] body{background:var(--cream);} /* Les halos colorés du fond n'ont plus lieu d'être. */ :root[data-style="epure"] body::before{background:none;} /* --------------------------------------------------------------------------- 1. LE RAIL D'ICÔNES La colonne passe de 250 px à 80 px : plus de libellés, seulement des icônes. C'est un pari — on échange la lisibilité immédiate contre de la place et du calme. Il ne tient que si deux conditions sont remplies, et elles le sont ici : il y a six entrées (au-delà de huit, on ne retient plus), et chacune affiche son nom au survol comme au focus clavier. Le rail flotte : marge tout autour, coins très arrondis, fond gris clair. Il se lit comme un objet posé sur la page, pas comme un bord de fenêtre. --------------------------------------------------------------------------- */ :root[data-style="epure"] .shell{grid-template-columns:var(--rail) 1fr;} /* Le rail étant sorti du flux (position:fixed), il n'occupe plus de cellule : le contenu principal se retrouvait placé automatiquement dans la PREMIÈRE colonne, celle de 112 px, et s'y écrasait. On le place donc explicitement en colonne 2. La piste de gauche reste, vide, pour réserver la place. */ :root[data-style="epure"] .main{grid-column:2;} /* Le rail ne court plus du haut au bas de l'écran : il se réduit à la hauteur de son contenu et se centre verticalement. C'est ce qui en fait un objet posé sur la page plutôt qu'une bordure de fenêtre — et c'est plus harmonieux parce que sa masse répond à celle du contenu au lieu de la longer. `position:fixed` et non `sticky` : on veut qu'il reste centré sur l'écran pendant qu'on fait défiler. La piste de la grille (--rail) réserve la place, donc le contenu n'passe pas dessous. */ :root[data-style="epure"] .side{ /* Le rail est centré dans une BANDE qui commence sous le logo, et non dans la fenêtre entière. Sur un écran haut la différence ne se voit pas ; sur un portable, le rail remontait jusqu'à 22 px et passait par-dessus le logo — les deux se disputaient la même colonne. `margin:auto 0` avec `top` ET `bottom` posés : c'est ce qui centre un élément fixe dans sa bande. Il faut une hauteur définie pour ça, d'où `fit-content` et non `auto`, qui ferait étirer le rail sur toute la hauteur disponible. */ position:fixed;left:var(--rail-x); top:78px;bottom:14px;transform:none; width:var(--rail-l); height:fit-content;max-height:none; margin:auto 0; border-radius:30px; background-image:none; /* Surtout PAS d'overflow:hidden : le rayon arrondit déjà le fond, et masquer le débordement rognerait les infobulles, qui sortent du rail par construction. Constaté à l'essai — les libellés n'apparaissaient pas. */ overflow:visible; display:flex;flex-direction:column;align-items:center; } :root[data-style="epure"] .side-top{display:none;} /* Le mot-marque tient dans 80 px s'il est petit et centré. La signature « be competitive » ne tient pas : elle disparaît ici. */ /* Le mot-marque disparaît du rail : il est devenu le logo, en haut à gauche. Le laisser ici le dirait deux fois. */ :root[data-style="epure"] .side-logo{display:none;} :root[data-style="epure"] .nav-list{padding-top:14px;} :root[data-style="epure"] .side-logo .lg{font-size:11.5px;letter-spacing:-.01em;justify-content:center;} /* --- La variante claire : le rail redevient gris, les icônes sombres ------ */ :root[data-style="epure"][data-rail="clair"] .side{ background:#f0f0f3;box-shadow:0 0 0 1px rgba(14,14,25,.05);background-image:none; } :root[data-style="epure"][data-rail="clair"] .side-logo .lg{color:var(--ink);} :root[data-style="epure"][data-rail="clair"] .nav-grp{background:rgba(14,14,25,.1);} :root[data-style="epure"][data-rail="clair"] .nav-i{color:#55555f;} :root[data-style="epure"][data-rail="clair"] .nav-i:hover{background:rgba(14,14,25,.055);color:var(--ink);} :root[data-style="epure"][data-rail="clair"] .nav-i.active{ background:#fff;color:var(--accent); box-shadow:0 1px 2px rgba(14,14,25,.08), 0 6px 14px -8px rgba(14,14,25,.3); } :root[data-style="epure"][data-rail="clair"] .nav-i .badge{box-shadow:0 0 0 2px #f0f0f3;} :root[data-style="epure"][data-rail="clair"] .nav-i.active .badge{box-shadow:0 0 0 2px #fff;} :root[data-style="epure"][data-rail="clair"] .side-foot{border-top-color:rgba(14,14,25,.08);} :root[data-style="epure"][data-rail="clair"] .client-av{background:var(--ink);color:#fff;} :root[data-style="epure"] .side-logo .tag{display:none;} /* Les intertitres du menu deviennent de simples respirations. Écrits, ils seraient illisibles à cette largeur ; supprimés, on perdrait le regroupement. Un filet court les remplace. */ /* Tout ce que contient le rail est posé sur son axe : la liste ne prend plus la largeur, elle se centre, et chaque tuile se centre dedans. Sans ça, le moindre rembourrage hérité décalait les icônes d'un ou deux pixels — visible dès qu'on les empile. */ :root[data-style="epure"] .nav-list{ padding:8px 0;flex:0 0 auto;width:100%; display:flex;flex-direction:column;align-items:center;overflow:visible; } :root[data-style="epure"] .nav-grp{ font-size:0;padding:0;margin:9px 0;width:26px;height:1px;background:rgba(14,14,25,.1); } :root[data-style="epure"] .nav-grp:first-of-type{display:none;} /* Chaque entrée devient une tuile carrée. `font-size:0` escamote le libellé, qui est un simple nœud de texte non balisé — impossible à viser autrement sans toucher au HTML. L'icône reprend sa taille juste après. */ :root[data-style="epure"] .nav-i{ position:relative; width:52px;height:52px;min-height:0;margin:4px auto;padding:0;flex:0 0 auto; display:flex;align-items:center;justify-content:center; /* Le HTML pose un `gap:11px` entre l'icône et son libellé. Le libellé est masqué mais reste un élément de flex : l'écart subsistait et poussait l'icône de la moitié, soit 5 px hors de l'axe. Mesuré, puis annulé. */ gap:0; font-size:0;background:none;color:#55555f;border-radius:14px; box-shadow:none;transform:none; transition:background .16s var(--ease), color .16s var(--ease), box-shadow .2s var(--ease); } :root[data-style="epure"] .nav-i .ic{font-size:22px;width:auto;flex:0 0 auto;line-height:1;opacity:1;} :root[data-style="epure"] .nav-i:hover{background:rgba(14,14,25,.055);color:var(--ink);transform:none;box-shadow:none;} /* L'entrée courante : tuile blanche posée sur le gris, icône bleue. C'est le SEUL bleu de toute la colonne — et c'est pour ça qu'on le voit. */ :root[data-style="epure"] .nav-i.active{ background:#fff;color:var(--accent); box-shadow:0 1px 2px rgba(14,14,25,.08), 0 6px 14px -8px rgba(14,14,25,.3); } :root[data-style="epure"] .nav-i.active::before{display:none;} /* Le compteur devient une pastille posée sur l'angle de la tuile. */ :root[data-style="epure"] .nav-i .badge{ position:absolute;top:5px;right:5px;margin:0; min-width:16px;padding:1px 4px;font-size:9px;line-height:1.5; box-shadow:0 0 0 2px #f0f0f3; } :root[data-style="epure"] .nav-i.active .badge{box-shadow:0 0 0 2px #fff;} /* La pastille « à venir ». Le rail masque les libellés, donc l'horloge ne peut pas se ranger en bout de ligne : elle se pose sur l'angle de la tuile, comme le compteur. Fond blanc plein pour qu'elle tienne aussi bien sur le lavande du rail que sur le bleu de la tuile active. */ :root[data-style="epure"] .nav-i .soon{ position:absolute;top:2px;right:2px;margin:0; width:16px;height:16px;border-radius:50%; background:#fff;color:var(--accent);font-size:10px; display:flex;align-items:center;justify-content:center; } /* L'infobulle rend le rail utilisable. Sans elle, une icône seule se devine ; avec elle, elle se lit. Elle apparaît aussi au focus clavier — sinon le rail serait impraticable sans souris. */ :root[data-style="epure"] .nav-i::after{ position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%) translateX(-4px); background:var(--ink);color:#fff;font-size:11.5px;font-weight:600;letter-spacing:0; padding:6px 11px;border-radius:8px;white-space:nowrap;pointer-events:none; opacity:0;transition:opacity .16s var(--ease),transform .16s var(--ease); z-index:300;box-shadow:0 8px 20px -10px rgba(0,0,0,.6); } :root[data-style="epure"] .nav-i:hover::after, :root[data-style="epure"] .nav-i:focus-visible::after{opacity:1;transform:translateY(-50%) translateX(0);} :root[data-style="epure"] .nav-i[data-p="accueil"]::after{content:"Accueil";} :root[data-style="epure"] .nav-i[data-p="actions"]::after{content:"Plan d'actions";} :root[data-style="epure"] .nav-i[data-p="conc"]::after{content:"Veille concurrentielle";} :root[data-style="epure"] .nav-i[data-p="marche"]::after{content:"Veille de marché";} :root[data-style="epure"] .nav-i[data-p="concurrents"]::after{content:"Concurrents";} :root[data-style="epure"] .nav-i[data-p="entreprise"]::after{content:"Mon entreprise";} :root[data-style="epure"] .nav-i[data-p="espion"]::after{content:"Espion · à venir";} :root[data-style="epure"] .nav-i[data-p="tuto"]::after{content:"Tutoriels · à venir";} /* Le pied : l'initiale du client, en rond, seule. Le nom ne tient pas. */ :root[data-style="epure"] .side-foot{border-top:1px solid rgba(255,255,255,.2);padding:14px 0 16px;margin-top:0;width:100%;flex:0 0 auto;} :root[data-style="epure"] .client-chip{justify-content:center;gap:0;} :root[data-style="epure"] .client-av{ width:38px;height:38px;border-radius:50%; background:var(--ink);color:#fff;box-shadow:none; } :root[data-style="epure"] .client-n, :root[data-style="epure"] .client-p{display:none;} /* --------------------------------------------------------------------------- 2. LA COQUILLE --------------------------------------------------------------------------- */ :root[data-style="epure"] .topbar{ background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none; border-bottom:none;padding:20px 34px 6px; } :root[data-style="epure"] .crumb b{font-size:17px;} :root[data-style="epure"] .logout{ background:#fff;box-shadow:0 0 0 1px var(--grey-ll);color:var(--ink2); } :root[data-style="epure"] .logout:hover{box-shadow:0 0 0 1px var(--ink);color:var(--ink);transform:none;} :root[data-style="epure"] .tb-bell{color:var(--ink2);} :root[data-style="epure"] .imp-banner{background:var(--ink);} :root[data-style="epure"] .page{padding:22px 34px 70px;} /* --------------------------------------------------------------------------- 3. LES CARTES — filet d'un pixel, rien d'autre --------------------------------------------------------------------------- */ :root[data-style="epure"] .card, :root[data-style="epure"] .cmp-card, :root[data-style="epure"] .crc, :root[data-style="epure"] .rep-row, :root[data-style="epure"] .move-row, :root[data-style="epure"] .act-row, :root[data-style="epure"] .arch-row, :root[data-style="epure"] .onglet, :root[data-style="epure"] .kb-card, :root[data-style="epure"] .see-more, :root[data-style="epure"] .arch-btn, :root[data-style="epure"] .empty{ background:#fff;box-shadow:var(--relief);border:none; } :root[data-style="epure"] .card:hover, :root[data-style="epure"] .cmp-card:hover, :root[data-style="epure"] .crc:hover{box-shadow:var(--relief-h);transform:none;} :root[data-style="epure"] .rep-row:hover, :root[data-style="epure"] .move-row:hover, :root[data-style="epure"] .kb-card:hover{box-shadow:var(--relief-s-h);transform:none;} /* Les creux redeviennent de simples aplats gris. */ :root[data-style="epure"] .kb-col{background:#f1f1f4;box-shadow:0 0 0 1px var(--grey-ll);} :root[data-style="epure"] .seg{background:#efeff2;box-shadow:none;} :root[data-style="epure"] .seg-i.active{background:#fff;box-shadow:0 1px 2px rgba(14,14,25,.1);} :root[data-style="epure"] .rep-ic, :root[data-style="epure"] .onglet .oc{background:#f3f3f6;box-shadow:none;} :root[data-style="epure"] .cmp-h, :root[data-style="epure"] .crh{background:#fff;box-shadow:none;border-bottom:1px solid var(--grey-ll);} :root[data-style="epure"] .crb .gauge{background:#fafafc;box-shadow:none;border-top:1px solid var(--grey-ll);} :root[data-style="epure"] .tagpill{background:#f4f4f7;box-shadow:0 0 0 1px var(--grey-ll);} /* --------------------------------------------------------------------------- 4. OÙ LE BLEU A ENCORE LE DROIT D'APPARAÎTRE La liste est volontairement courte. Chaque ajout retire du poids à tous les autres : c'est la rareté qui fait qu'un accent se voit. --------------------------------------------------------------------------- */ /* a) les chiffres qui portent le message */ :root[data-style="epure"] .stat-row b.blue{color:var(--accent);} :root[data-style="epure"] .crb .gauge-score{color:var(--accent)!important;} :root[data-style="epure"] .next-date{color:var(--ink);} /* b) le surtitre de section, qui structure la lecture */ :root[data-style="epure"] .eyebrow{color:var(--accent);} /* Le moteur se sert aussi de `.sec-div` comme simple séparateur, sans titre. Sans exclure ce cas, l'accent bleu s'étalait sur toute la largeur de la page (constaté sur « Vos concurrents »). */ :root[data-style="epure"] .sec-div:not(:empty)::after{background:var(--accent);} :root[data-style="epure"] .sec-div:empty::after{background:var(--grey-ll);} /* c) l'action principale */ :root[data-style="epure"] .see-more{color:var(--accent);} :root[data-style="epure"] .see-more:hover{background:var(--accent);color:#fff;box-shadow:none;transform:none;} :root[data-style="epure"] .b-new{background:var(--accent);box-shadow:none;} /* d) les jauges et les barres : le tracé garde sa couleur de gravité, mais sur une piste devenue neutre. */ :root[data-style="epure"] .bm-t, :root[data-style="epure"] .mb-t, :root[data-style="epure"] .gauge-track{background:#ececed;box-shadow:none;} :root[data-style="epure"] .bm-f, :root[data-style="epure"] .mb-f, :root[data-style="epure"] .gauge-fill{box-shadow:none;} /* e) le chiffre de tête du donut : c'est le seul nombre de la carte, il a droit à l'accent. */ :root[data-style="epure"] .donut-svg text:first-of-type{fill:var(--accent);} /* f) le radar : disque et balayage repassent en bleu dilué sur fond blanc. */ :root[data-style="epure"] .radar-svg > circle:first-of-type{fill:rgba(26,26,255,.035);} :root[data-style="epure"] .radar-sweep path{fill:rgba(26,26,255,.07);} /* Les alertes perdent leur aplat teinté : un filet coloré à gauche suffit à dire la gravité, et la carte reste blanche comme les autres. */ :root[data-style="epure"] .alert-row{background:#fff!important;box-shadow:var(--relief)!important;} :root[data-style="epure"] .alert-row::before{width:3px;} /* Le bloc présentation reste le seul objet sombre de la page : c'est ce qui en fait un bouton d'appel et non une carte de plus. */ :root[data-style="epure"] .canva{ background:var(--ink);background-image:none; box-shadow:0 10px 30px -14px rgba(14,14,25,.4); } :root[data-style="epure"] .canva .cbtn{background:#fff;color:var(--ink);box-shadow:none;} :root[data-style="epure"] .canva .cbtn:hover{transform:translateY(-1px);box-shadow:none;} /* --------------------------------------------------------------------------- 5. TYPOGRAPHIE — les chiffres prennent le dessus Dans les deux références, le regard tombe sur les nombres. On leur donne la taille, et on descend les libellés au rang d'annotation. --------------------------------------------------------------------------- */ :root[data-style="epure"] .card h3{font-size:10px;letter-spacing:.6px;color:var(--grey);text-transform:none;font-weight:600;} :root[data-style="epure"] .stat-row b{font-size:26px;} :root[data-style="epure"] .ptitle{letter-spacing:-.03em;} :root[data-style="epure"] .psub{color:var(--grey);} /* --------------------------------------------------------------------------- 6. MOBILE — le rail redevient un tiroir À 80 px de large, un rail d'icônes tiendrait à l'écran, mais il mangerait un cinquième d'un téléphone pour six pictogrammes. On reprend le tiroir. --------------------------------------------------------------------------- */ @media(max-width:860px){ :root[data-style="epure"] .shell{grid-template-columns:1fr;} :root[data-style="epure"] .side{ width:230px;left:calc(-230px - 24px);margin:0; top:0;bottom:auto;transform:none;height:100vh;max-height:none;border-radius:0; box-shadow:0 0 40px -10px rgba(14,14,25,.35); /* Le tiroir défile. Sur une fenêtre étroite ET courte, ses neuf entrées dépassaient le bas de l'écran et l'engrenage devenait inatteignable. Ici le débordement masqué ne coûte rien : les infobulles ne servent que dans le rail étroit, le tiroir affiche les libellés en clair. */ overflow-y:auto;overflow-x:hidden;scrollbar-width:none; } :root[data-style="epure"] .side::-webkit-scrollbar{display:none;} /* Le rail étant sorti du flux, la colonne de contenu avait été placée en colonne 2 ; en tiroir il n'y a plus qu'une colonne, on la remet en 1. */ :root[data-style="epure"] .main{grid-column:1;} :root[data-style="epure"] .side.open{left:0;} /* En tiroir, la place ne manque plus : les libellés reviennent. */ :root[data-style="epure"] .nav-list{align-items:stretch;padding:10px 12px;} :root[data-style="epure"] .nav-i{ width:auto;height:auto;min-height:44px;padding:10px 13px; margin:2px 0;align-self:stretch; justify-content:flex-start;gap:12px;font-size:13.5px;font-weight:600; } :root[data-style="epure"] .nav-i::after{display:none;} :root[data-style="epure"] .nav-i .badge{position:static;box-shadow:none;margin-left:auto;} :root[data-style="epure"] .nav-grp{width:auto;height:auto;background:none; font-size:8.5px;color:var(--grey);padding:14px 13px 6px;letter-spacing:1.8px;} :root[data-style="epure"] .nav-grp:first-of-type{display:block;} :root[data-style="epure"] .client-n{display:block;color:var(--ink);} :root[data-style="epure"] .client-p{display:block;color:var(--accent);} :root[data-style="epure"] .client-chip{justify-content:flex-start;} :root[data-style="epure"] .side-foot{padding:14px 18px;} :root[data-style="epure"] .side-logo{text-align:left;padding:20px 20px 14px;} :root[data-style="epure"] .side-logo .lg{font-size:21px;} :root[data-style="epure"] .page{padding:20px 18px 70px;} :root[data-style="epure"] .topbar{padding:14px 18px 6px;} } /* --------------------------------------------------------------------------- 7. LE RAIL EN BLEU — Même rail, même structure, mais l'aplat passe au bleu-mauve UNFAIR. Ce n'est pas qu'un changement de teinte : ça déplace le seul point de couleur de la page. Dans la version claire, le bleu marquait l'entrée ACTIVE ; ici c'est le rail entier qui est bleu, donc l'entrée active doit s'en distinguer AUTREMENT — elle devient une tuile blanche à icône bleue. La logique est la même, inversée : c'est toujours le contraste qui désigne, pas la couleur. Contrastes mesurés sur le bleu #3a2ee0 : icône au repos 5,2:1, icône active (bleu sur blanc) 7,97:1. Le seuil d'un pictogramme est de 3:1. --------------------------------------------------------------------------- */ :root[data-style="epure"]:not([data-rail="clair"]) .side{ background:#3a2ee0; background-image:radial-gradient(300px 260px at 50% -10%, #6b4ff2, transparent 72%); box-shadow:0 10px 30px -18px rgba(26,20,120,.75); } :root[data-style="epure"]:not([data-rail="clair"]) .side-logo .lg{color:#fff;} :root[data-style="epure"]:not([data-rail="clair"]) .nav-grp{background:rgba(255,255,255,.22);} :root[data-style="epure"]:not([data-rail="clair"]) .nav-i{color:rgba(255,255,255,.76);} :root[data-style="epure"]:not([data-rail="clair"]) .nav-i:hover{background:rgba(255,255,255,.14);color:#fff;} :root[data-style="epure"]:not([data-rail="clair"]) .nav-i.active{ background:#fff;color:var(--accent); box-shadow:0 2px 4px rgba(20,14,90,.3), 0 8px 18px -8px rgba(20,14,90,.6); } /* La pastille de compteur garde son rouge, mais son contour suit le fond du rail : sur du bleu, un contour blanc la découperait comme un autocollant. */ :root[data-style="epure"]:not([data-rail="clair"]) .nav-i .badge{box-shadow:0 0 0 2px #3a2ee0;} :root[data-style="epure"]:not([data-rail="clair"]) .nav-i.active .badge{box-shadow:0 0 0 2px #fff;} :root[data-style="epure"]:not([data-rail="clair"]) .side-foot{border-top-color:rgba(255,255,255,.2);} :root[data-style="epure"]:not([data-rail="clair"]) .client-av{background:#fff;color:var(--accent);} /* L'infobulle reste encre : elle sort du rail et se pose sur la page blanche, c'est donc au fond de la PAGE qu'elle doit se mesurer, pas à celui du rail. */ @media(max-width:860px){ /* En tiroir, le rail bleu garde ses libellés : texte blanc sur l'aplat. */ :root[data-style="epure"]:not([data-rail="clair"]) .nav-grp{color:rgba(255,255,255,.9);background:none;} :root[data-style="epure"]:not([data-rail="clair"]) .client-n{color:#fff;} :root[data-style="epure"]:not([data-rail="clair"]) .client-p{color:rgba(255,255,255,.78);} } /* --------------------------------------------------------------------------- 8. EN-TÊTE REMANIÉE Trois déplacements qui vont ensemble : · le mot-marque quitte le rail et redevient un LOGO, en haut à gauche ; · le compte quitte le rail et devient un menu déroulant, en haut à droite ; · le pied du rail accueille l'engrenage des paramètres. Et surtout, on retire tout ce qui se trouvait AU-DESSUS du titre : le fil d'Ariane et le surtitre de page. Les deux répétaient une information déjà donnée trois fois — par le titre lui-même, et par l'entrée active du menu. Le moteur continue de les écrire ; on cesse simplement de les montrer, ce qui évite de toucher au rendu et garde le fil d'Ariane disponible pour les lecteurs d'écran si on décide de le remettre. --------------------------------------------------------------------------- */ :root[data-style="epure"] .crumb{display:none;} /* Le surtitre de PAGE disparaît — mais pas celui des sections, qui structure la lecture plus bas. D'où le `>` : seul l'enfant direct est visé. */ :root[data-style="epure"] .page > .eyebrow{display:none;} :root[data-style="epure"] .ptitle{margin-top:2px;} /* --- le logo, en haut à gauche ---------------------------------------- */ :root[data-style="epure"] .tb-logo{display:inline-flex;align-items:center;line-height:0;} :root[data-style="epure"] .tb-logo img{width:32px;height:32px;display:block;border-radius:9px;} :root[data-style="epure"] .topbar{padding:18px 34px 6px;} :root[data-style="epure"] .tb-left{gap:12px;} /* --- le compte, en haut à droite --------------------------------------- */ :root[data-style="epure"] .tb-user{position:relative;} :root[data-style="epure"] .tb-user-btn{ display:flex;align-items:center;gap:9px; background:#fff;border:none;box-shadow:0 0 0 1px var(--grey-ll); border-radius:100px;padding:5px 12px 5px 5px;cursor:pointer; font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;color:var(--ink); transition:box-shadow .16s var(--ease); } :root[data-style="epure"] .tb-user-btn:hover{box-shadow:0 0 0 1px #c9c9d2;} :root[data-style="epure"] .tb-user-av{ width:28px;height:28px;border-radius:50%;flex:0 0 auto; background:var(--accent);color:#fff; display:flex;align-items:center;justify-content:center; font-family:'DM Serif Display',serif;font-style:italic;font-size:14px; } :root[data-style="epure"] .tb-user-btn i{font-size:13px;color:var(--grey);} :root[data-style="epure"] .tb-user-btn[aria-expanded="true"] i{transform:rotate(180deg);} :root[data-style="epure"] .tb-user-menu{ position:absolute;right:0;top:calc(100% + 8px);min-width:210px; background:#fff;border-radius:14px;padding:6px; box-shadow:0 0 0 1px var(--grey-ll), 0 18px 40px -18px rgba(14,14,25,.35); display:none;z-index:320; } :root[data-style="epure"] .tb-user-menu.open{display:block;animation:rise .18s var(--ease) both;} :root[data-style="epure"] .tb-user-head{ padding:10px 12px 11px;border-bottom:1px solid var(--grey-ll);margin-bottom:6px; display:flex;flex-direction:column;gap:2px; } :root[data-style="epure"] .tb-user-head b{font-size:13.5px;color:var(--ink);} :root[data-style="epure"] .tb-user-head span{font-size:11.5px;color:var(--grey);} :root[data-style="epure"] .tb-user-item{ display:flex;align-items:center;gap:10px;width:100%; background:none;border:none;border-radius:9px;padding:10px 12px; font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600; color:var(--ink2);cursor:pointer;text-align:left; transition:background .14s var(--ease),color .14s var(--ease); } :root[data-style="epure"] .tb-user-item:hover{background:#f4f4f7;color:var(--ink);} :root[data-style="epure"] .tb-user-item i{font-size:16px;} /* --- l'engrenage, en pied de rail -------------------------------------- */ :root[data-style="epure"] .client-chip{display:none;} :root[data-style="epure"] .side-gear{ width:52px;height:52px;margin:0 auto;padding:0; display:flex;align-items:center;justify-content:center; background:none;border:none;border-radius:14px;cursor:pointer; font-size:22px;color:rgba(255,255,255,.76); transition:background .16s var(--ease),color .16s var(--ease); } :root[data-style="epure"] .side-gear:hover{background:rgba(255,255,255,.14);color:#fff;} :root[data-style="epure"][data-rail="clair"] .side-gear{color:#55555f;} :root[data-style="epure"][data-rail="clair"] .side-gear:hover{background:rgba(14,14,25,.055);color:var(--ink);} /* Il n'ouvre encore rien : la page des paramètres reste à construire. Le curseur le dit, et `aria-disabled` le dit à l'assistance technique. */ :root[data-style="epure"] .side-gear[aria-disabled="true"]{cursor:default;opacity:.65;} /* --- ce que devient l'ancien bouton de déconnexion ---------------------- */ :root[data-style="epure"] .tb-user-item.logout{box-shadow:none;background:none;} :root[data-style="epure"] .tb-user-item.logout:hover{background:#f4f4f7;transform:none;box-shadow:none;} @media(max-width:860px){ /* En tiroir, la pastille client revient : la place existe, et le rail n'est plus le seul endroit où lire à qui appartient l'espace. */ :root[data-style="epure"] .client-chip{display:flex;} :root[data-style="epure"] .side-gear{margin:0 0 10px;width:auto;justify-content:flex-start;padding:10px 13px;gap:12px;} :root[data-style="epure"] .tb-user-n{display:none;} :root[data-style="epure"] .tb-user-btn{padding:4px 8px 4px 4px;} :root[data-style="epure"] .tb-logo img{width:28px;height:28px;} } /* --------------------------------------------------------------------------- 9. DERNIERS RÉGLAGES --------------------------------------------------------------------------- */ /* --- la tuile active : une nuance de bleu, plus du blanc ------------------ Le blanc était l'extrême du contraste. Un bleu très clair marque tout aussi nettement l'entrée courante, et garde la colonne dans une seule famille de couleur au lieu de la trouer. Mesuré : 5,32:1 entre la tuile et le rail — elle se détache sans ambiguïté — et 5,35:1 pour l'icône posée dessus. */ :root[data-style="epure"]:not([data-rail="clair"]) .nav-i.active{ background:#d3cffb;color:var(--accent); box-shadow:0 2px 4px rgba(20,14,90,.26), 0 8px 18px -10px rgba(20,14,90,.5); } :root[data-style="epure"]:not([data-rail="clair"]) .nav-i.active .badge{box-shadow:0 0 0 2px #d3cffb;} /* --- accueil : deux blocs en moins --------------------------------------- « Votre offre » ne dit rien qu'on ne sache déjà — l'offre est rappelée dans le menu du compte. Et le titre « Aperçu analytique / Votre radar concurrentiel » annonçait un radar qui s'annonce très bien tout seul. */ :root[data-style="epure"] .dash-rail .card + .card{display:none;} :root[data-style="epure"] .sec-div:has(+ .analytics){display:none;} /* Repli pour les navigateurs sans `:has()` : le bloc reste, mais sans son filet ni sa marge, donc il ne pèse presque plus. */ @supports not selector(:has(*)){ :root[data-style="epure"] #page-accueil .analytics{margin-top:18px;} } /* --- le mot-marque, au-dessus du rail ------------------------------------ Il quitte le flux de la barre du haut pour se caler à l'aplomb du rail, tout en haut à gauche. La barre commence à 160 px (la piste réservée au rail) : sans `position:fixed`, le logo ne pourrait jamais remonter plus à gauche. */ :root[data-style="epure"] .tb-logo{ position:fixed;left:var(--rail-x);top:20px;z-index:310; display:flex;align-items:baseline;gap:9px;line-height:1; } :root[data-style="epure"] .tb-logo-n{ font-family:'DM Serif Display',serif;font-style:italic;font-weight:400; font-size:21px;color:var(--ink);letter-spacing:-.02em; } :root[data-style="epure"] .tb-logo-t{ font-size:8.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase; color:var(--accent);border-left:1px solid var(--grey-ll);padding-left:9px; white-space:nowrap; } @media(max-width:860px){ /* En tiroir, le rail n'occupe plus de colonne : le logo reprend sa place dans le flux de la barre, à côté du bouton de menu. */ :root[data-style="epure"] .tb-logo{position:static;} :root[data-style="epure"] .tb-logo-n{font-size:19px;} :root[data-style="epure"] .tb-logo-t{display:none;} } /* --------------------------------------------------------------------------- 10. INVERSION DU RAIL — le fond s'éclaircit, l'entrée active prend le vrai bleu L'inversion ne se fait pas en échangeant simplement deux couleurs. Le bleu UNFAIR #1a1aff est très saturé mais SOMBRE : posé sur un bleu à peine plus clair, il disparaissait — mesuré à 1,67:1, soit presque rien. Pour que l'entrée active existe, il a donc fallu éclaircir franchement le rail, et par conséquent foncer les icônes au repos : sur un fond clair, des icônes blanches ne se voient plus. Tout le rail bascule ensemble. Mesuré : tuile active contre rail 4,67:1 · icône au repos 6,43:1 · icône blanche sur la tuile active 7,97:1. --------------------------------------------------------------------------- */ :root[data-style="epure"]:not([data-rail="clair"]) .side{ background:#c6c0fa; background-image:radial-gradient(300px 260px at 50% -10%, #d8d4fc, transparent 72%); box-shadow:0 0 0 1px rgba(26,26,255,.1), 0 10px 26px -18px rgba(26,20,120,.45); } :root[data-style="epure"]:not([data-rail="clair"]) .nav-grp{background:rgba(26,20,120,.18);} :root[data-style="epure"]:not([data-rail="clair"]) .nav-i{color:#2a24a8;} :root[data-style="epure"]:not([data-rail="clair"]) .nav-i:hover{background:rgba(255,255,255,.55);color:var(--accent);} :root[data-style="epure"]:not([data-rail="clair"]) .side-gear{color:#2a24a8;} :root[data-style="epure"]:not([data-rail="clair"]) .side-gear:hover{background:rgba(255,255,255,.55);color:var(--accent);} /* L'entrée courante : le vrai bleu, plein, icône blanche. */ :root[data-style="epure"]:not([data-rail="clair"]) .nav-i.active{ background:var(--accent);color:#fff; box-shadow:0 2px 5px rgba(26,26,255,.34), 0 10px 20px -10px rgba(26,26,255,.6); } :root[data-style="epure"]:not([data-rail="clair"]) .nav-i.active .badge{box-shadow:0 0 0 2px var(--accent);} :root[data-style="epure"]:not([data-rail="clair"]) .nav-i .badge{box-shadow:0 0 0 2px #c6c0fa;} /* Le filet du pied et l'initiale en tiroir suivent le fond clair. */ :root[data-style="epure"]:not([data-rail="clair"]) .side-foot{border-top-color:rgba(26,20,120,.16);} @media(max-width:860px){ :root[data-style="epure"]:not([data-rail="clair"]) .nav-grp{color:#3b34b0;} :root[data-style="epure"]:not([data-rail="clair"]) .client-av{background:var(--accent);color:#fff;} :root[data-style="epure"]:not([data-rail="clair"]) .client-n{color:var(--ink);} :root[data-style="epure"]:not([data-rail="clair"]) .client-p{color:#2a24a8;} } /* --------------------------------------------------------------------------- 11. LE MOT-MARQUE, SUR LA LIGNE DE L'EN-TÊTE « Be competitive » passe SOUS « UNFAIR » au lieu d'être à côté : empilé, le bloc devient compact et peut s'aligner sur la ligne des commandes de droite. Le filet vertical de séparation n'a plus lieu d'être — c'est le retrait qui sépare maintenant, pas un trait. --------------------------------------------------------------------------- */ :root[data-style="epure"] .tb-logo{ /* top:22 et non 16 : le bloc empile fait 31 px de haut, son centre tombe alors sur 37 px — exactement celui de la cloche et du menu du compte. Mesure, pas estimation : a 16 px les deux centres differaient de 6 px. */ left:44px;top:22px; flex-direction:column;align-items:flex-start;gap:1px; } :root[data-style="epure"] .tb-logo-n{font-size:20px;line-height:1.1;} :root[data-style="epure"] .tb-logo-t{ border-left:none;padding-left:2px;font-size:7.5px;letter-spacing:1.6px; } /* --------------------------------------------------------------------------- 12. DERNIERS AJUSTEMENTS D'ACCUEIL ET DE RAIL --------------------------------------------------------------------------- */ /* --- le rail, une teinte plus claire encore ------------------------------ Mesuré : tuile active 5,81:1 sur le rail, icône au repos 7,99:1. Le rail reste distinct du fond de page (1,26:1) — en dessous, il s'y confondrait. */ :root[data-style="epure"]:not([data-rail="clair"]) .side{ background:#ddd8fc; background-image:radial-gradient(300px 260px at 50% -10%, #ebe8fe, transparent 72%); } :root[data-style="epure"]:not([data-rail="clair"]) .nav-i .badge{box-shadow:0 0 0 2px #ddd8fc;} /* Le survol éclaircit le fond de la tuile. Cette règle venant après celle de la tuile ACTIVE, elle lui retirait son bleu — mais pas sa couleur de texte, restée blanche. Résultat : blanc sur blanc, l'icône de la page courante disparaîssait au survol. On pose donc la couleur EN MÊME TEMPS que le fond : les deux changent ensemble, et le survol devient une inversion nette du bleu. Règle générale : un fond qui change doit emporter son texte avec lui. */ :root[data-style="epure"]:not([data-rail="clair"]) .nav-i:hover, :root[data-style="epure"]:not([data-rail="clair"]) .side-gear:hover{ background:rgba(255,255,255,.7);color:var(--accent); } /* La pastille « à venir » est blanche : sur un fond devenu blanc, elle disparaissait avec le reste. Un filet la retient. */ :root[data-style="epure"] .nav-i:hover .soon{box-shadow:0 0 0 1px rgba(26,26,255,.28);} /* --- les deux cartes de droite égalent la hauteur du radar --------------- `.an-side` est une cellule de grille : elle prend déjà la hauteur de la rangée, imposée par la carte du radar. Il suffit que ses deux cartes se partagent cette hauteur au lieu de se dimensionner sur leur contenu. */ :root[data-style="epure"] .analytics{align-items:stretch;} :root[data-style="epure"] .an-side{display:flex;flex-direction:column;} :root[data-style="epure"] .an-side > .card{flex:1;} /* --- « Prochaines analyses » s'aligne sur le bloc d'alertes -------------- Le rail n'est plus collant : une carte qui suit le défilement ne peut pas rester alignée sur un bloc qui, lui, défile. */ :root[data-style="epure"] .dash-grid{align-items:stretch;} :root[data-style="epure"] .dash-rail{position:static;align-self:stretch;} :root[data-style="epure"] .dash-rail .card:first-child{flex:1;} :root[data-style="epure"] .dash-alertes{display:flex;flex-direction:column;} /* --- de l'air entre la phrase d'accroche et le radar --------------------- */ :root[data-style="epure"] .psub{margin-bottom:34px;} :root[data-style="epure"] .analytics{margin-top:0;} /* --------------------------------------------------------------------------- 13. LOGO, RAPPELS DE COULEUR, SÉPARATEUR DU RAIL --------------------------------------------------------------------------- */ /* --- le mot-marque : plus à droite, plus grand, et les deux lignes alignées sur la même largeur. Les deux chaînes sont fixes (« UNFAIR » et « Be competitive ») : l'interlettrage de la baseline est donc une constante mesurée, pas une estimation. Elle est recalculée si l'une des deux change. */ :root[data-style="epure"] .tb-logo{left:68px;top:20px;} :root[data-style="epure"] .tb-logo-n{font-size:25px;line-height:1.05;} :root[data-style="epure"] .tb-logo-t{ font-size:8px;padding-left:0; /* Réglé pour que la ligne fasse exactement la largeur de « UNFAIR ». Le calcul : « Be competitive » compte 14 caractères, donc 14 fois l'interlettrage. À 2,06 px la ligne dépassait de 14,1 px — soit 1,01 px par caractère. D'où 1,05 px. Mesuré, pas ajusté à l'œil. */ letter-spacing:1.05px; } /* --- les intitulés de carte passent au bleu ------------------------------ « Pression concurrentielle… », « Répartition de l'activité », « Score de menace… » : ce sont eux qui annoncent chaque bloc. En bleu, ils deviennent le fil conducteur de la page — un rappel de la marque qui sert la lecture au lieu de la décorer. */ :root[data-style="epure"] .card h3{color:var(--accent);font-weight:700;} /* --- le rail : un seul trait, et court ---------------------------------- Les filets entre les groupes d'icônes hachaient la colonne pour un gain de lisibilité nul — à six entrées, on n'a pas besoin qu'on nous les regroupe. Il ne reste qu'une séparation, avant l'engrenage : elle dit que les paramètres ne sont pas une page de veille comme les autres. */ :root[data-style="epure"] .nav-grp{display:none;} :root[data-style="epure"] .side-foot{border-top:none;position:relative;padding-top:18px;} :root[data-style="epure"] .side-foot::before{ content:"";position:absolute;top:0;left:50%;transform:translateX(-50%); width:34px;height:1px;background:rgba(26,20,120,.22); } :root[data-style="epure"][data-rail="clair"] .side-foot::before{background:rgba(14,14,25,.14);} @media(max-width:860px){ /* En tiroir, les groupes reprennent leur rôle : la place existe, et une liste de six libellés se lit mieux regroupée. */ :root[data-style="epure"] .nav-grp{display:block;} :root[data-style="epure"] .side-foot::before{left:18px;transform:none;width:calc(100% - 36px);} } /* --------------------------------------------------------------------------- 14. LA CLOCHE, ET LA BASCULE D'APPARENCE --------------------------------------------------------------------------- */ /* La cloche perd sa bulle : l'icône seule suffit, et le coin le plus chargé de la page respire. Elle hérite sinon du fond et du filet de la couche v2. */ :root[data-style="epure"] .tb-bell{ background:none;box-shadow:none;border:none; width:auto;height:auto;padding:4px; font-size:22px;color:var(--ink2); } :root[data-style="epure"] .tb-bell:hover{color:var(--accent);background:none;box-shadow:none;transform:none;} :root[data-style="epure"] .tb-bell .dot{top:2px;right:2px;width:6px;height:6px;border-color:var(--cream);} /* La bascule clair / sombre, en interrupteur segmenté. */ :root[data-style="epure"] .tb-theme{ background:#eaeaee;border-radius:100px;padding:3px;gap:2px; } :root[data-style="epure"] .tb-theme-b{ width:30px;height:28px;border-radius:100px;font-size:15px;color:#7c7c88; transition:background .16s var(--ease),color .16s var(--ease); } :root[data-style="epure"] .tb-theme-b:hover{color:var(--ink);} :root[data-style="epure"] .tb-theme-b[aria-pressed="true"]{ background:#fff;color:var(--accent);box-shadow:0 1px 2px rgba(14,14,25,.12); } /* --------------------------------------------------------------------------- 15. LE THÈME SOMBRE DE L'ÉPURÉ — première passe La variante épurée est entièrement pilotée par des jetons : basculer en sombre revient donc surtout à les redéfinir. C'est une PREMIÈRE PASSE, pas un thème fini — les nuances des graphiques et des alertes mériteront d'être reprises au cas par cas. Mais le bouton ne renvoie plus sur une page cassée. Rappel du principe des fonds sombres : une carte ne s'y détache plus par son ombre, mais par son filet. On inverse donc le dosage. --------------------------------------------------------------------------- */ :root[data-style="epure"][data-theme="dark"]{ color-scheme:dark; --cream:#0f0f14; /* fond de page */ --white:#17171e; /* surface des cartes */ --cream2:#1e1e27; --creux:#1c1c24; --ink:#f2f2f6; --ink2:#c4c4d0; --grey:#8d8d9b; --grey-l:#5c5c6b; --grey-ll:#282833; --accent:#7c7cff; --accent-l:#1b1b30; --red:#ff6b6b; --amber:#f0a44b; --green:#3ad195; --red-l:#241619; --amber-l:#231c12; --green-l:#0f2520; --blue-l:#17172c; --purple-l:#1c1631; --relief:0 0 0 1px var(--grey-ll), 0 1px 2px rgba(0,0,0,.5); --relief-h:0 0 0 1px #35354a, 0 8px 20px -10px rgba(0,0,0,.7); --relief-s:0 0 0 1px var(--grey-ll); --relief-s-h:0 0 0 1px #35354a, 0 6px 16px -8px rgba(0,0,0,.6); --face:#17171e; } :root[data-style="epure"][data-theme="dark"] .card, :root[data-style="epure"][data-theme="dark"] .cmp-card, :root[data-style="epure"][data-theme="dark"] .crc, :root[data-style="epure"][data-theme="dark"] .rep-row, :root[data-style="epure"][data-theme="dark"] .move-row, :root[data-style="epure"][data-theme="dark"] .act-row, :root[data-style="epure"][data-theme="dark"] .arch-row, :root[data-style="epure"][data-theme="dark"] .onglet, :root[data-style="epure"][data-theme="dark"] .kb-card, :root[data-style="epure"][data-theme="dark"] .see-more, :root[data-style="epure"][data-theme="dark"] .arch-btn, :root[data-style="epure"][data-theme="dark"] .empty, :root[data-style="epure"][data-theme="dark"] .alert-row{background:#17171e!important;} :root[data-style="epure"][data-theme="dark"] .kb-col{background:#14141b;box-shadow:0 0 0 1px var(--grey-ll);} :root[data-style="epure"][data-theme="dark"] .rep-ic, :root[data-style="epure"][data-theme="dark"] .onglet .oc, :root[data-style="epure"][data-theme="dark"] .crb .gauge{background:#1e1e27;} :root[data-style="epure"][data-theme="dark"] .cmp-h, :root[data-style="epure"][data-theme="dark"] .crh{background:#17171e;border-bottom-color:var(--grey-ll);} :root[data-style="epure"][data-theme="dark"] .bm-t, :root[data-style="epure"][data-theme="dark"] .mb-t, :root[data-style="epure"][data-theme="dark"] .gauge-track{background:#26262f;} :root[data-style="epure"][data-theme="dark"] .tagpill{background:#1e1e27;box-shadow:0 0 0 1px var(--grey-ll);} :root[data-style="epure"][data-theme="dark"] .tb-theme{background:#22222c;} :root[data-style="epure"][data-theme="dark"] .tb-theme-b[aria-pressed="true"]{background:#33334a;color:var(--accent);} :root[data-style="epure"][data-theme="dark"] .tb-user-btn, :root[data-style="epure"][data-theme="dark"] .tb-user-menu{background:#17171e;box-shadow:0 0 0 1px var(--grey-ll);} :root[data-style="epure"][data-theme="dark"] .tb-user-item:hover{background:#22222c;} :root[data-style="epure"][data-theme="dark"] .tb-logo-n{color:var(--ink);} :root[data-style="epure"][data-theme="dark"] .canva{background:#1c1c30;} /* Le rail garde son bleu clair : c'est l'objet de marque de la page, et il reste parfaitement lisible sur un fond sombre. */ /* --------------------------------------------------------------------------- 16. LE RAIL NE SUIT PAS LE THÈME Le rail reste lavande clair en sombre comme en clair : c'est l'objet de marque de la page, pas une surface de contenu. Mais ses textes héritaient des jetons du thème — en sombre, `--ink` devient presque blanc et `--accent` s'éclaircit. Résultat constaté dans le tiroir : nom du client en blanc sur lavande, et entrée active en violet pâle sur lavande. Illisible. On fige donc la palette du rail sur des valeurs littérales. Un élément qui ne change pas de fond ne doit pas changer de texte. --------------------------------------------------------------------------- */ :root[data-style="epure"][data-theme="dark"]:not([data-rail="clair"]) .nav-i{color:#2a24a8;} :root[data-style="epure"][data-theme="dark"]:not([data-rail="clair"]) .nav-i.active{ background:#1a1aff;color:#fff; } :root[data-style="epure"][data-theme="dark"]:not([data-rail="clair"]) .nav-i.active .badge{box-shadow:0 0 0 2px #1a1aff;} :root[data-style="epure"][data-theme="dark"]:not([data-rail="clair"]) .side-gear{color:#2a24a8;} :root[data-style="epure"][data-theme="dark"]:not([data-rail="clair"]) .side-logo .lg{color:#151033;} @media(max-width:860px){ /* En tiroir, les intertitres redeviennent du texte : dans le rail ils n'étaient qu'un filet, et le fond hérité les transformait en pavés. */ /* Meme specificite que la regle du rail (qui porte :not([data-rail])), sinon le fond lavande des intertitres l'emporte et les transforme en pavés — constaté à l'essai. */ :root[data-style="epure"]:not([data-rail="clair"]) .nav-grp{background:none;width:auto;height:auto;} :root[data-style="epure"][data-rail="clair"] .nav-grp{background:none;width:auto;height:auto;} :root[data-style="epure"]:not([data-rail="clair"]) .nav-grp{color:#3b34b0;} :root[data-style="epure"]:not([data-rail="clair"]) .client-n{color:#151033;} :root[data-style="epure"]:not([data-rail="clair"]) .client-p{color:#2a24a8;} :root[data-style="epure"]:not([data-rail="clair"]) .client-av{background:#1a1aff;color:#fff;} /* L'engrenage reprend la forme d'une entrée de menu, libellé compris. */ :root[data-style="epure"] .side-gear{width:100%;height:auto;} } /* --------------------------------------------------------------------------- 17. LE RADAR EN INSTRUMENT La carte reste blanche comme toutes les autres : c'est le DISQUE qui porte le bleu. L'objet lumineux est donc le radar lui-même, posé sur la page, et non un panneau sombre qui trouerait la mise en page. Conséquence directe : ce qui est SUR le disque doit s'éclaircir (graduations, moyeu, « VOUS »), ce qui est AUTOUR doit rester sombre (les étiquettes, qui sont écrites sur le blanc de la carte). Les deux familles de couleurs sont donc séparées — c'est la raison d'être de --radar-texte / --radar-vous. --------------------------------------------------------------------------- */ /* Le radar n'a pas de carte : il est POSÉ sur la page. Un plateau en perspective porte déjà son propre contour — l'enfermer dans un cadre revenait à dessiner deux bords concentriques, l'un rond, l'autre carré. On retire donc le fond, le relief et le survol : il ne reste que l'objet. */ :root[data-style="epure"] .an-radar{ background:none;box-shadow:none;border:none; overflow:visible; padding:0; } :root[data-style="epure"] .an-radar:hover{box-shadow:none;} :root[data-style="epure"] .an-radar h3{ margin:0 0 2px;padding:0 8px;text-align:left;font-size:9px;letter-spacing:.8px; color:var(--accent); } /* Le radar occupe sa carte au lieu d'y flotter : marges réduites, dessin en pleine largeur. Un instrument qui laisse la moitié de son cadre vide ne ressemble pas à un instrument. */ :root[data-style="epure"] .an-radar .radar-svg{ width:100%;max-width:none;display:block;margin:0; /* Le plateau reprend le bleu léger du menu (#ddd8fc) : le radar et le rail deviennent deux pièces de la même famille, au lieu de deux bleus qui se disputent l'écran. Le dégradé va du plus clair au centre au plus sourd sur le bord — c'est lui, et lui seul, qui donne le galbe du disque. */ --radar-c1:#f0edff; --radar-c2:#ddd8fc; --radar-c3:#bdb4f0; /* La tranche, plus sourde que la face : sans elle, pas d'épaisseur. */ --radar-tr1:#b0a6e8; --radar-tr2:#8377ce; /* Le plateau est clair : tout ce qui est POSÉ dessus doit donc FONCER. C'est l'exact inverse de la version bleu profond. */ --radar-trait:#9187da; --radar-lueur:#2a24a8; --radar-bord:#a99ee6; --radar-moyeu:#1a1aff; --radar-vous:#2a24a8; --radar-texte:#241d5c; /* Et comme le fond redevient clair, les tons de menace de la page (calibrés pour du texte sur clair) conviennent tels quels : aucun réglage local à faire ici. */ } /* --------------------------------------------------------------------------- 18. TEST : UN SEUL ARRONDI PARTOUT Les trois silhouettes (--f1 --f2 --f3) donnaient à chaque rectangle un dessin différent : coins alternés, un coin plus serré que les autres. On les aligne toutes sur le même rayon — celui du coin bas-droit de « Score de menace par concurrent », 30 px — sur les quatre coins. Tout passe par ces trois variables, donc une seule valeur pilote toute l'interface et le retour en arrière tient en trois lignes. --------------------------------------------------------------------------- */ :root[data-style="epure"]{ --f1:30px; --f2:30px; --f3:30px; } /* Cinq éléments avaient leur dessin écrit en dur, hors des trois silhouettes : ils échappaient donc au changement de variables. On les ramène au rayon commun. Sur les petits (pastilles, onglets de segment), le navigateur ramène 30 px à la moitié de la hauteur : ils deviennent des gellules parfaites, ce qui reste symétrique et cohérent. */ :root[data-style="epure"] .modal{border-radius:30px;} :root[data-style="epure"] .empty{border-radius:30px;} :root[data-style="epure"] .tagpill, :root[data-style="epure"] .tagpill:nth-child(even){border-radius:30px;} :root[data-style="epure"] .seg-i{border-radius:30px;} /* Exception assumée : la case à cocher. À 30 px elle deviendrait un rond, et un rond veut dire « choix unique ». On la garde carrée, mais symétrique. */ :root[data-style="epure"] .act-check{border-radius:8px;} /* Les alertes avaient leur propre dessin, en dur, hors des trois silhouettes : c'est pour ça qu'elles échappaient au test. On les ramène au rayon commun. Le bandeau de couleur, lui, n'a besoin d'aucune géométrie : le rectangle est en `overflow:hidden`, donc la bande est déjà découpée par la forme arrondie et en épouse la courbe d'elle-même. Il suffit de l'épaissir pour que cette courbe se voie. */ :root[data-style="epure"] .alert-row, :root[data-style="epure"] .alert-row:nth-child(even), :root[data-style="epure"] .alert-row:nth-child(3n){border-radius:30px;} /* L'étiquette est une BANDE pleine hauteur, à largeur fixe. C'est la synthèse des deux essais précédents : la bande retrouve la présence du pavé de départ, mais sa largeur ne bouge plus — donc la couleur ne grossit plus avec la longueur du texte, qui était le vrai défaut. Seules les deux lettres restent, centrées. Aucun arrondi à déclarer : `overflow:hidden` sur le rectangle découpe la bande à sa courbe, en haut comme en bas. */ :root[data-style="epure"] .alert-row::before{display:none;} :root[data-style="epure"] .alert-row{ padding:0;gap:0;align-items:stretch;border-left:none; } :root[data-style="epure"] .al-tag{ flex:0 0 auto;width:34px;max-width:none; /* La bande ne colle pas au bord : elle commence APRÈS la courbe (rayon 30). Le blanc arrondi reste donc visible à sa gauche, et la bande peut être un rectangle franc, à ras du haut et du bas, sans rien à découper. */ margin-left:32px; display:flex;align-items:center;justify-content:center;padding:0; color:#fff;font-size:12px;font-weight:700;letter-spacing:.4px;line-height:1; font-variant-numeric:tabular-nums; } /* Aplat franc : ni dégradé, ni reflet, ni ombre. Les couleurs sont celles de la page — les mêmes que les pastilles de menace et les jauges. Un ton dérivé pour la bande aurait fait exister deux rouges dans l'interface. */ :root[data-style="epure"] .al-tag.r{background:var(--red);} :root[data-style="epure"] .al-tag.a{background:var(--amber);} :root[data-style="epure"] .al-tag.b{background:var(--accent);} :root[data-style="epure"] .al-body{padding:18px 24px 18px 20px;background:none;} @media(max-width:560px){ :root[data-style="epure"] .al-tag{width:30px;margin-left:22px;font-size:11.5px;} :root[data-style="epure"] .al-body{padding:15px 18px 15px 15px;} } /* --------------------------------------------------------------------------- 19. LE COIN HAUT-DROIT, PLUS PRÉSENT Les trois commandes (apparence, notifications, compte) étaient dimensionnées pour s'effacer. Elles grandissent d'environ un quart — ensemble, pour qu'elles restent une famille : si une seule grossit, les deux autres ont l'air ratées. L'espace entre elles suit, sinon le coin se tasse au lieu de respirer. --------------------------------------------------------------------------- */ :root[data-style="epure"] .tb-right{gap:14px;} :root[data-style="epure"] .tb-bell{padding:5px;font-size:27px;} :root[data-style="epure"] .tb-bell .dot{top:3px;right:3px;width:8px;height:8px;} :root[data-style="epure"] .tb-theme{padding:4px;gap:3px;} :root[data-style="epure"] .tb-theme-b{width:38px;height:34px;font-size:18px;} :root[data-style="epure"] .tb-user-btn{ gap:10px;padding:6px 16px 6px 6px;font-size:15px; } :root[data-style="epure"] .tb-user-av{width:34px;height:34px;font-size:17px;} :root[data-style="epure"] .tb-user-btn i{font-size:15px;} /* Sur téléphone, l'agrandissement ne passe pas : le trio débordait de 16 px à 390 px de large. On revient aux tailles compactes — c'est le coin le plus contraint de la page, et un compte tronqué vaut moins qu'un compte petit. */ @media(max-width:860px){ :root[data-style="epure"] .tb-right{gap:8px;} :root[data-style="epure"] .tb-bell{font-size:22px;padding:4px;} :root[data-style="epure"] .tb-theme-b{width:30px;height:28px;font-size:15px;} :root[data-style="epure"] .tb-theme{padding:3px;gap:2px;} :root[data-style="epure"] .tb-user-btn{padding:5px;gap:0;} :root[data-style="epure"] .tb-user-av{width:30px;height:30px;font-size:15px;} :root[data-style="epure"] .tb-user-btn i{font-size:13px;} } /* --------------------------------------------------------------------------- 20. PLAN D'ACTIONS : LES COMPTEURS EN BLEU Les pastilles de colonne et le compteur des archives étaient blancs sur blanc : ils comptaient sans se voir. En bleu plein, ils deviennent le repère chiffré de la page — c'est exactement l'emploi qu'on veut donner à la couleur ici, sur le chiffre et nulle part ailleurs. --------------------------------------------------------------------------- */ :root[data-style="epure"] .kb-head .cnt{ background:var(--accent);color:#fff;font-weight:700; } /* Le bouton des archives passe en bleu plein, et son propre compteur en blanc : sur un fond devenu bleu, une pastille bleue disparaîtrait. */ :root[data-style="epure"] .arch-btn{ background:var(--accent);color:#fff;border:none; box-shadow:0 1px 2px rgba(26,26,255,.2), 0 10px 22px -12px rgba(26,26,255,.6); } :root[data-style="epure"] .arch-btn:hover{color:#fff;background:#0f0fd6;} :root[data-style="epure"] .arch-btn b{background:#fff;color:var(--accent);} /* --------------------------------------------------------------------------- 21. LES ONGLETS DE LA VEILLE DE MARCHÉ L'onglet actif doit se distinguer à la périphérie du regard, sinon on ne sait plus quelle rubrique on lit. Le bleu plein sur la pastille suffit : c'est le même vocabulaire que la tuile active du menu. --------------------------------------------------------------------------- */ :root[data-style="epure"] .onglet{transition:box-shadow .16s var(--ease);} :root[data-style="epure"] .onglet[aria-selected="true"]{ box-shadow:0 0 0 2px var(--accent); } :root[data-style="epure"] .onglet[aria-selected="true"] .oc{ background:var(--accent);color:#fff; } :root[data-style="epure"] .onglet[aria-selected="true"] b{color:var(--accent);} /* La rubrique ouverte se détache du bandeau d'onglets. */ :root[data-style="epure"] .og-panneau{margin-top:6px;} /* --------------------------------------------------------------------------- 22. LES RÉSEAUX À LEURS VRAIES COULEURS Une icône monochrome demande un effort de lecture ; le bleu de Facebook ou le rose d'Instagram se reconnaissent sans lire. C'est la seule entorse assumée à la règle « le bleu et rien d'autre » : ces couleurs n'appartiennent pas à l'interface, elles appartiennent aux marques. Rien à changer dans le moteur : les classes Phosphor identifient déjà le réseau. La couleur est un simple habillage, posé là où ces icônes servent d'étiquette (tableau des réseaux, fiches concurrents). --------------------------------------------------------------------------- */ :root[data-style="epure"] .net-n i.ph-youtube-logo, :root[data-style="epure"] .lk i.ph-youtube-logo{color:#FF0000;} :root[data-style="epure"] .net-n i.ph-x-logo, :root[data-style="epure"] .lk i.ph-x-logo{color:#0b0b12;} /* Restent les réseaux sans fichier de marque officiel dans le pack. À cette taille, un glyphe fin se délave : on l'épaissit un peu. */ :root[data-style="epure"] .net-n i, :root[data-style="epure"] .lk i{font-size:16px;} /* Les petites progressions passent au bleu. */ :root[data-style="epure"] .dlt.up{ color:var(--accent);background:var(--accent-l); box-shadow:inset 0 0 0 1px rgba(26,26,255,.28); } /* --------------------------------------------------------------------------- 23. LES ÉCRANS COURTS — ORDINATEURS PORTABLES Le rail ne tient pas à sa taille normale sous ~700 px de hauteur utile, ce qui est le cas de presque tous les portables une fois la barre du navigateur et celle du système déduites. Il débordait alors de sa bande : par le haut il recouvrait le logo, par le bas l'engrenage sortait de l'écran. On ne déplace rien, on resserre. Les paliers portent sur la HAUTEUR et non sur la largeur : un portable large mais court a exactement le problème d'un portable étroit, et une requête sur la largeur ne l'aurait pas vu. Ils sont malgré tout bornés à `min-width: 861px`, car sous cette largeur le rail n'est plus un rail mais un tiroir pleine hauteur. Sans cette borne, un réglage de hauteur décalait le tiroir vers le bas et sortait l'engrenage de l'écran — c'est arrivé pendant la mise au point. --------------------------------------------------------------------------- */ /* Palier 1 — 1366x768 et 1440x900 avec barres : 9 tuiles de 52 ne passent plus. */ @media (min-width: 861px) and (max-height: 800px){ :root[data-style="epure"] .side{top:70px;bottom:12px;} :root[data-style="epure"] .nav-i{width:46px;height:46px;margin:3px auto;} :root[data-style="epure"] .nav-i .ic{font-size:20px;} :root[data-style="epure"] .side-gear{width:40px;height:40px;margin-bottom:6px;font-size:17px;} :root[data-style="epure"] .side-foot{padding:9px 0 10px;} } /* Palier 2 — portables 1280x800 et fenêtres réduites. */ @media (min-width: 861px) and (max-height: 680px){ :root[data-style="epure"]{--rail-l:80px;} :root[data-style="epure"] .side{top:64px;} :root[data-style="epure"] .nav-i{width:40px;height:40px;margin:2px auto;border-radius:12px;} :root[data-style="epure"] .nav-i .ic{font-size:18px;} :root[data-style="epure"] .nav-i .badge{top:2px;right:2px;min-width:14px;font-size:8px;} :root[data-style="epure"] .nav-i .soon{top:1px;right:1px;width:13px;height:13px;font-size:8px;} :root[data-style="epure"] .side-gear{width:36px;height:36px;font-size:16px;} :root[data-style="epure"] .client-av{width:32px;height:32px;font-size:14px;} } /* Palier 3 — dernier recours : le rail défile. On y perd les infobulles, que le débordement masqué rogne. C'est un mauvais échange, mais moins mauvais qu'un engrenage hors de l'écran : une entrée qu'on ne peut pas atteindre est pire qu'une entrée qu'on ne peut pas nommer. */ @media (min-width: 861px) and (max-height: 560px){ :root[data-style="epure"] .side{overflow-y:auto;overflow-x:hidden;scrollbar-width:none;} :root[data-style="epure"] .side::-webkit-scrollbar{display:none;} }