/* ============================================================================ Socle partagé par les trois écrans (recherche, tarifs, compte). Il vit dans /statique/ pour être mis en cache une fois et servir les trois pages, plutôt que d'être recopié dans chacune — trois copies d'un jeu de couleurs finissent toujours par diverger. ============================================================================ */ :root{ --fond:oklch(0.975 0.004 268); --surface:oklch(1 0 0); --surface-2:oklch(0.985 0.003 268); --bord:oklch(0.92 0.005 268); --bord-discret:oklch(0.94 0.005 268); --txt:oklch(0.24 0.02 268); --txt-2:oklch(0.46 0.015 268); --txt-3:oklch(0.58 0.015 268); --ds-accent:oklch(0.52 0.19 272); --accent-survol:oklch(0.42 0.19 272); --accent-fond:oklch(0.97 0.015 272); --accent-bord:oklch(0.88 0.03 272); --barre:oklch(0.72 0.09 272); --oui-fond:oklch(0.94 0.07 155); --oui-txt:oklch(0.36 0.12 155); --non-fond:oklch(0.95 0.05 30); --non-txt:oklch(0.45 0.14 30); --alerte:oklch(0.72 0.16 65); --signal:oklch(0.72 0.16 155); --ds-row-pad:13px; } *{box-sizing:border-box} /* `.b` pose `display:inline-flex`, ce qui l'emporte sur l'attribut `hidden` : sans cette règle, un bouton « masqué » reste visible. */ [hidden]{display:none!important} html{scroll-behavior:smooth;scroll-padding-top:126px} body{margin:0;background:var(--fond);color:var(--txt); font-family:Archivo,Helvetica,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased} a{color:var(--ds-accent);text-decoration:none} a:hover{color:var(--accent-survol)} input,select,button,textarea{font-family:inherit;font-size:inherit;color:inherit} ::selection{background:oklch(0.90 0.06 272)} .mono{font-family:"Chivo Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums} .mention{font-family:"Chivo Mono",monospace;font-size:10.5px;color:var(--txt-3)} .scroll::-webkit-scrollbar{width:10px;height:10px} .scroll::-webkit-scrollbar-thumb{background:oklch(0.88 0.01 268);border-radius:99px;border:3px solid var(--surface)} /* ---------------- En-tête ---------------- */ header{position:sticky;top:0;z-index:70;height:60px;background:var(--surface); border-bottom:1px solid var(--bord);padding:0 18px;display:flex;align-items:center;gap:18px} .marque{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0; cursor:pointer;color:inherit;text-decoration:none} .marque:hover{color:inherit} .cible{width:30px;height:30px;border-radius:50%;background:var(--ds-accent);display:grid;place-items:center;flex:none} .cible i{width:17px;height:17px;border-radius:50%;border:2px solid rgba(255,255,255,.55);display:grid;place-items:center} .cible i b{width:6px;height:6px;border-radius:50%;background:#fff;display:block} .logotype{font-family:Sora,sans-serif;font-weight:600;font-size:18px;letter-spacing:-0.04em;line-height:1.1} .sous-marque{font-family:"Chivo Mono",monospace;font-size:9.5px;color:var(--txt-3);letter-spacing:.02em} /* ── LA NAVIGATION DE L'EN-TÊTE ────────────────────────────────────────────────── ⚠ ELLE EST INSÉRÉE PAR `commun.js`, PAS ÉCRITE DANS LES PAGES. Dix fichiers portent cet en-tête — huit pages HTML plus les trois gabarits Python de la fiche, de la personne et des finances. Y recopier trois liens, c'est créer dix moitiés jumelles dont la première divergera au premier changement de libellé. Le CSS vit ici, le balisage est posé au chargement, et une page nouvelle l'hérite sans rien faire. */ .h-nav{display:flex;align-items:center;gap:2px;flex:none} .h-nav a{padding:7px 12px;border-radius:9px;font-size:13.5px;font-weight:500; color:var(--txt-2);text-decoration:none;white-space:nowrap} .h-nav a:hover{color:var(--txt);background:var(--surface-2)} .h-nav a.ici{background:var(--accent-fond);color:var(--ds-accent)} /* ── LA PASTILLE DE DESTINATION ──────────────────────────────────────────────────── « Infos sociétés » mène à corpinfo.fr. Un lien de navigation qui change de domaine sans le dire ressemble à une erreur de clic ; la pastille le nomme. ⚠ ELLE RÉUTILISE `.pastille` (ligne ~166) — on ne la redéfinit pas. Une seconde copie du même badge aurait divergé à la première retouche de couleur. Seuls l'alignement et la taille, propres à une barre de 34 px, sont ajustés ici. */ .h-nav .pastille{font-size:9.5px;padding:1px 5px;vertical-align:1px} .h-nav a.ici .pastille{background:var(--surface);border-color:var(--accent-bord)} /* ⚠⚠ LES SEUILS SONT MESURÉS, PAS CHOISIS — ET ILS ONT CHANGÉ LE 09/09/2026. L'ancien seuil unique de 1180 px avait été mesuré avec DEUX entrées de navigation. Avec quatre (Rechercher · Tarifs · Blog · Infos sociétés + pastille), la barre passe de 155 px à 405 px : l'en-tête déborde dès 1404 px, et à 1366 px — la largeur d'écran la plus répandue — l'avatar sortait de l'écran. Un seuil mesuré une fois n'est valable que pour le contenu qu'on a mesuré ; ajouter une entrée sans le reprendre, c'est le rendre faux en silence. ⚠ LA ZONE D'ACTIONS EST LE VRAI POIDS, et le commentaire d'origine la sous-estimait : mesurée sur dataseeker.fr/recherche le 09/09/2026, elle fait 258 px pour un VISITEUR mais 547 px pour un ADMINISTRATEUR connecté (« Administration », « Refonte de site », « Mon compte », « Se déconnecter », l'avatar). C'est ce cas-là qui dicte les seuils, et c'est dans ce cas-là que les quatre paliers ci-dessous ont été vérifiés : largeur navigation champ de recherche débordement 1500 398 px 270 px non 1410 398 px 240 px non (juste au-dessus du 1er palier) 1366 319 px 245 px non (l'écran le plus répandu) 1280 209 px 260 px non 1160 155 px 240 px non 1120 0 px 314 px non Le champ ne descend jamais sous 240 px, qui est son `min-width` — il s'arrête sur son plancher au lieu de s'écraser, et l'avatar reste à l'écran partout. On dégrade par étapes plutôt que d'un coup : la pastille d'abord (elle nomme un domaine, c'est un confort), puis les entrées secondaires, puis toute la barre. La navigation s'efface avant le champ de recherche parce que la recherche EST l'outil, et les quatre liens restent atteignables par le pied de page, qui ne s'efface jamais. */ @media (max-width:1404px){ .h-nav .pastille{display:none} } @media (max-width:1318px){ .h-nav a[href^="https://corpinfo"]{display:none} } @media (max-width:1208px){ .h-nav a[href="/blog"]{display:none} } @media (max-width:1153px){ .h-nav{display:none} } .h-actions{margin-left:auto;display:flex;align-items:center;gap:8px} .avatar{width:30px;height:30px;border-radius:50%;background:var(--accent-fond); border:1px solid var(--accent-bord);color:var(--ds-accent);display:grid;place-items:center; font-size:11.5px;font-weight:700;flex:none;text-decoration:none} .avatar:hover{background:var(--ds-accent);color:#fff;border-color:var(--ds-accent)} /* ---------------- Boutons ---------------- */ .b{height:34px;padding:0 14px;border-radius:9px;border:1px solid transparent;background:none; cursor:pointer;font-weight:500;white-space:nowrap;display:inline-flex;align-items:center; justify-content:center;gap:7px;text-decoration:none} .b.texte{color:var(--txt-2)} .b.texte:hover{color:var(--txt)} .b.borde{border-color:var(--bord);background:var(--surface);color:var(--txt)} .b.borde:hover{border-color:var(--ds-accent);color:var(--ds-accent)} .b.plein{background:var(--ds-accent);color:#fff;font-weight:600} .b.plein:hover{background:var(--accent-survol);color:#fff} .b:disabled{opacity:.45;cursor:default} .b.mini{height:28px;padding:0 10px;font-size:12.5px} .b.grand{height:40px;padding:0 18px} .b.form{height:44px;width:100%;font-size:15px} /* ---------------- Blocs communs ---------------- */ .segmente{display:flex;background:oklch(0.96 0.005 268);border-radius:7px;padding:2px;gap:2px} .segmente button{flex:1;height:26px;border:0;background:none;border-radius:5px;cursor:pointer; font-size:12px;color:var(--txt-2);white-space:nowrap} .segmente button.on{background:var(--surface);color:var(--txt);font-weight:600; box-shadow:0 1px 2px oklch(0.24 0.02 268 / .12)} .note{font-size:11.5px;color:var(--txt-2);background:var(--surface-2);border:1px solid var(--bord-discret); border-radius:11px;padding:10px 12px;line-height:1.5} .erreur{background:var(--non-fond);color:var(--non-txt);border:0;border-radius:9px; padding:10px 12px;font-size:13px;line-height:1.5} /* ---------------- L'en-tête sur petit écran ---------------- ⚠ IL N'Y AVAIT AUCUNE RÈGLE RESPONSIVE ICI. L'en-tête tient sur une ligne de 60 px quelle que soit la largeur : logo, recherche, puis les actions. Sur un téléphone de 375 px, les actions seules en réclament 331 et le tout débordait à 600 px — la page entière défilait latéralement, sur TOUTES les pages du site. Le défaut ne se voyait pas sur la fiche société tant que `#h-actions` restait vide (un autre défaut, corrigé le même jour) : le conteneur était là, sans contenu, donc sans largeur. Réparer l'un a révélé l'autre. ⚠ ET ON NE MASQUE AUCUNE ACTION. Escamoter « Mon compte » ou « Se déconnecter » sur mobile priverait le client de son espace — les éléments passent à la ligne, ils ne disparaissent pas. Seul le sous-titre décoratif s'efface. */ @media (max-width:760px){ header{height:auto;min-height:60px;flex-wrap:wrap;padding:10px 14px;gap:10px 12px} .sous-marque{display:none} /* La recherche passe en dessous, sur toute la largeur : c'est le champ le plus utile de la page, il ne doit pas être réduit à un timbre-poste. */ .recherche{order:3;flex-basis:100%;max-width:none} .h-actions{margin-left:auto;flex-wrap:wrap;justify-content:flex-end;gap:6px} .b{height:32px;padding:0 11px;font-size:13.5px} } @media (max-width:400px){ /* Le logotype seul suffit quand la place manque vraiment. */ .logotype{font-size:16px} .b{padding:0 9px;font-size:13px} } @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* ── LE VOCABULAIRE PARTAGÉ ────────────────────────────────────────────────────────── ⚠⚠ CES CLASSES ÉTAIENT ENFERMÉES DANS LES PAGES. `.carte`, `.chip` et `.pastille` vivaient dans `index.html` ; `.jauge` vivait DANS LES DEUX, index.html et compte.html, avec des valeurs différentes (8 px contre 9 px). Toute page nouvelle — la refonte en ajoute plusieurs — devait donc les recopier, et une troisième copie aurait divergé comme les deux premières l'avaient déjà fait. Le handoff de design les cite comme si elles étaient ici : elles y sont maintenant. ⚠ LA DIFFÉRENCE DE `.jauge` N'EST PAS UN ACCIDENT, elle est intentionnelle : 8 px dans l'outil, 9 px sur « Mon compte » où elle porte seule l'information. Aplatir les deux en une valeur unique aurait « unifié » en cassant l'un des deux écrans. La base fait donc 8 px, et `.jauge.large` porte les 9. */ .carte{background:var(--surface);border:1px solid var(--bord);border-radius:16px; overflow:hidden} .carte h2{font-family:Sora,sans-serif;font-weight:600;font-size:16px; letter-spacing:-0.02em;margin:0} .chip{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 8px; border-radius:99px;background:var(--accent-fond);border:1px solid var(--accent-bord); color:var(--ds-accent);font-size:11.5px;max-width:100%} .chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .chip button{background:none;border:0;color:inherit;cursor:pointer;padding:0; font-size:13px;line-height:1} .pastille{display:inline-block;font-family:"Chivo Mono",monospace;font-size:10px; padding:2px 6px;border-radius:5px;background:var(--accent-fond);color:var(--ds-accent); border:1px solid var(--accent-bord);margin-left:4px} .pastille.nd{background:var(--non-fond);color:var(--non-txt);border-color:transparent} .jauge{height:8px;border-radius:99px;background:oklch(0.93 0.008 268);overflow:hidden; margin:10px 0 8px} .jauge.large{height:9px;margin:12px 0 8px} .jauge i{display:block;height:100%;background:var(--barre);transition:width .25s ease} .jauge.plein i{background:var(--alerte)} /* ─────────────── La barre de recherche et sa palette ─────────────── Partagées entre l'accueil et les fiches. Elles vivaient dans le