/* ============================================================================ 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)} /* ⚠⚠ LE SEUIL EST MESURÉ, PAS CHOISI. Posé d'abord à 980 px, il laissait la navigation écraser le champ de recherche : mesuré sur l'outil à 1000 px de fenêtre, le champ tombait à **78 px** — inutilisable — et la page débordait horizontalement. Largeurs relevées à 1440 px : marque 187, navigation 290, recherche 560, actions 258, plus 36 de marges et 54 de gouttières = 1385. En laissant au champ un minimum de 280 px utilisables, il faut 1105 px ; et la zone d'actions est PLUS LARGE pour un administrateur connecté (« Administration », « Refonte de site », « Mon compte », « Se déconnecter », l'avatar). D'où 1180 px, qui garde une marge pour ce cas-là. La navigation s'efface avant la recherche parce que la recherche EST l'outil ; les trois liens restent atteignables par le pied de page. */ @media (max-width:1180px){ .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