Créer un site de cabinet juridique ou comptable, minimaliste suisse et rassurant

Construis un site statique multipage, minimaliste suisse, pour notre cabinet sur mon serveur d'hébergement Opus Growth [server name]. Cabinet : [practice name], [profession, e.g. law firm or accounting practice], [city]. Domaines d'intervention : [areas]. Praticiens : [for each, name, title, bar or chamber they are registered with, registration number, areas]. Téléphone : [phone], e-mail : [email], adresse : [address], domaine : [domain]. Sujet de la note d'information : [a frequently asked topic, e.g. the legal cap on rent increases]. Nous sommes dans un domaine où les gens prennent des décisions qui engagent leur argent et leurs droits : la confiance doit venir de la clarté, des références et des sources, pas de la décoration. Respecte les règles professionnelles : pour les avocats en Turquie, le règlement de l'Union des barreaux de Turquie sur l'interdiction de la publicité ; pour les experts-comptables, les règles professionnelles du TÜRMOB ; ou l'équivalent là où nous exerçons. N'écris ni taux de réussite, ni nombre d'affaires gagnées, ni noms de clients, ni affirmations de supériorité du type « le meilleur » ou « expert de référence », ni comparaisons d'honoraires, ni garanties, ni promesses exagérées. Présente l'information avec la mention qu'elle est générale et ne remplace pas un conseil juridique ou financier. La direction de design est le minimalisme suisse : 1. Typographie : une seule famille de grotesque Fontshare (par ex. Switzer 400, 500, 600). La hiérarchie vient uniquement de la taille et de la graisse : un grand titre serré aligné à gauche, un texte courant posé, de petites étiquettes de section. 2. Couleur : fond blanc, texte quasi noir, un gris foncé et un seul accent (par ex. rouge suisse). L'accent n'apparait que sur la marque de section, les étiquettes et l'anneau de focus. Les photos sont en noir et blanc (Tailwind grayscale). 3. Grille : 12 colonnes strictes. Dans chaque section, l'étiquette occupe les colonnes 1 à 3 et le contenu les colonnes 4 à 12 ; les sections sont séparées par un filet noir de 1 pixel. Pas de coins arrondis ni d'ombres. 4. Élément signature : étiquettes de section numérotées avec une marque § dans la couleur d'accent, et de discrets repères de grille à 12 colonnes tracés en CSS seul derrière le premier écran. 5. Mouvement : aucun. Pages et leur schema : 1. index.html : un premier écran dont le paragraphe d'ouverture répond à « quelles affaires, pour qui, où », les domaines d'intervention, la façon de travailler et le mode de fixation des honoraires (sans chiffres, avec le barème officiel et une lettre de mission écrite), la dernière note d'information, un résumé de l'équipe. WebPage. 2. calisma-alanlari.html : une section par domaine ; le premier paragraphe répond à la question la plus fréquente du domaine, suivi des principaux sujets et de la base légale. Un Service par domaine. 3. ekip.html : un profil pour chaque praticien (nom, titre, barreau ou ordre, domaines, courte biographie). AboutPage et un Person par praticien (jobTitle, knowsAbout, worksFor #business, memberOf le barreau ou l'ordre). 4. bilgi-notlari/[topic].html : une note appuyée sur le texte de loi, qui s'ouvre sur une réponse courte. En haut : auteur, relecteur, date de publication et date de dernière révision ; à la fin, une liste de sources. Article (author et publisher via @id, image, datePublished, dateModified, citation) et reviewedBy plus lastReviewed sur la WebPage. N'écris jamais un point juridique ou financier que tu ne connais pas ; pose-moi la question pour chaque phrase dont tu doutes. 5. sss.html : six vraies questions, FAQPage. 6. iletisim.html : ContactPage. 7. kvkk.html (mentionnant le secret professionnel) et 404.html. Règles techniques. Suis-les à la lettre, car les contrôles ci-dessous mesurent exactement cela : 1. Mise en place. Lance d'abord scaffold_site en prévisualisation, montre-moi la liste des fichiers, et installe avec confirm=true une fois que j'ai validé. Lis ensuite site_design_guide et site_seo_guide en entier. Avant d'écrire du code, consigne la direction dans _kaynak/ART.md (ambiance, association de polices, couleurs avec leurs ratios de contraste, grille, élément signature, décision sur le mouvement, liste des pages) et montre-la-moi. 2. Supprime le JavaScript. Aucune page de ce site ne charge de JavaScript. Retire de chaque page le script cdn.tailwindcss.com, la ligne tailwind.config, les balises GSAP, ScrollTrigger, SplitText, Lenis et Swiper ainsi que les balises script motion.js, chrome.js et site.config.js ; supprime assets/chrome.js et assets/motion.js. Conserve assets/site.config.js, mais uniquement comme source de marque, de contact et de seo pour seo-stamp.mjs ; il n'est jamais chargé dans le navigateur. 3. Menu et pied de page en HTML statique. Les composants <site-nav> et <site-footer> sont dessinés par JavaScript : les robots des moteurs de recherche et des IA ne voient donc ni le menu, ni les liens internes, ni les coordonnées. Écris l'en-tête dans _kaynak/ust.inc et le pied de page (nom, adresse, téléphone, e-mail, lien vers chaque page, notice de confidentialité, « Web: Opus Growth ») dans _kaynak/alt.inc. Utilise l'extension .inc pour que seo-stamp et html-validate ne traitent pas ces fragments comme des pages. Chaque page porte les marqueurs <!-- ust:bas --><!-- ust:son --> et <!-- alt:bas --><!-- alt:son -->. Écris ensuite avec site_write_file un script Node sans dépendance, _kaynak/parca-bas.mjs : il injecte les deux fragments entre les marqueurs dans chaque fichier HTML, ajoute aria-current="page" au lien de menu de la page courante, et réécrit sitemap.xml en utilisant le dateModified du JSON-LD de chaque page comme lastmod (en ignorant les pages 404 et noindex). Réalise le menu mobile sans JavaScript avec <details><summary>Menu</summary> ; les menus desktop et mobile sont deux éléments <nav> distincts avec des aria-label différents. 4. Héberge les polices toi-même. Ce site utilise une seule famille de polices et trois fichiers au maximum. Télécharge le CSS Fontshare (https://api.fontshare.com/v2/css?f[]=family@400,600&display=swap, code de graisse 401 pour l'italique) avec site_fetch vers _kaynak/fontshare.css, lis-le avec site_read_file et ne retiens que les URL woff2 de la famille demandée ; le service ajoute parfois une famille que tu n'as pas demandée. Télécharge chaque woff2 avec site_fetch dans assets/fonts/. Place les règles @font-face (font-display: swap) dans assets/app.css, car design-check.mjs ne cherche une police personnalisée que dans ce fichier. N'utilise pas Inter, Roboto, Poppins ou Montserrat par défaut. 5. Compile Tailwind. assets/app.css devient la source Tailwind : @tailwind base; @tailwind components; @tailwind utilities; en haut, puis @font-face, l'anneau de focus, le lien d'évitement, une règle prefers-reduced-motion et tes propres classes de composants dans @layer components. Ne donne jamais à une classe de composant le nom d'un utilitaire Tailwind (list-item, table, grid, container, hidden, etc.), car le conflit casse silencieusement la mise en page après compilation. Écris tailwind.config.js à la racine (content : ["./*.html", "./**/*.html", "./_kaynak/*.inc"], couleurs et fontFamily). Exécute "npx --yes tailwindcss@3 -i assets/app.css -o assets/site.css --minify" avec site_run_command et background=true, et attends le résultat avec site_command_status. Le <head> de chaque page contient, dans cet ordre : un unique <link rel="stylesheet" href="/assets/site.css">, puis une ligne preload pour chaque fichier de police utilisé sur le premier écran (titre, accent et texte ; as="font" type="font/woff2" crossorigin). Des lignes preload placées avant la feuille de style retardent le CSS et allongent le LCP ; une police du premier écran sans preload s'affiche tardivement, décale la page et fait monter le CLS ; enfin <link rel="icon" href="/assets/img/favicon.svg" type="image/svg+xml">. La ligne du favicon est obligatoire : sans elle, le navigateur demande /favicon.ico, reçoit une 404, et l'erreur en console fait baisser Best Practices. 6. Images. Télécharge les photos avec site_fetch en utilisant resize et image_format="webp" à plusieurs largeurs (480, 800, 1200 et 1600 pour l'image du premier écran, 480, 800 et 1200 pour les autres ; qualité entre 60 et 75, plus basse pour les photos détaillées). Chaque <img> a srcset, des sizes conformes à la mise en page réelle, width et height (CLS nul) et un texte alternatif pertinent et honnête. fetchpriority="high" ne va que sur l'image que Lighthouse signale comme élément LCP, et cette image n'est pas en lazy ; toutes les autres images utilisent loading="lazy". Si l'élément LCP est du texte, aucune image n'a de fetchpriority. Prépare aussi assets/img/logo.png, un assets/img/og.jpg de 1200x630 et assets/img/favicon.svg. 7. Règles HTML (valeurs par défaut de html-validate). <!DOCTYPE html> en majuscules ; aucun attribut style en ligne (y compris le style="background:var(--brand)" du kit, utilise une classe à la place) ; &nbsp; au lieu d'espaces simples dans le texte des liens tel: ; un type sur chaque <button> ; aucun espace en fin de ligne ; tableaux avec <thead>, <tbody> et th scope. Les liens dans les paragraphes sont soulignés ; les liens du menu, du pied de page, du fil d'Ariane et des boutons ont une zone tactile d'au moins 44x44 pixels (min-h-[44px] min-w-[44px]). 8. Données structurées. Renseigne le bloc seo de site.config.js (siteUrl, description, logo, image og, type d'entreprise, champs d'adresse) et exécute "node seo-stamp.mjs" avec site_run_command ; il injecte Organization, WebSite et, le cas échéant, un sous-type LocalBusiness, ainsi que les balises canonical et OG. Ajoute à la main le schema propre à chaque page : sur toutes les pages, un nœud WebPage avec un @id (ou AboutPage, ContactPage, CollectionPage, ProfilePage), datePublished et dateModified, isPartOf #site, about #business ou #org, et breadcrumb pointant vers un BreadcrumbList ; plus un Service par domaine d'intervention, un Person par praticien sur la page équipe, Article et reviewedBy sur la note d'information, et FAQPage sur la page FAQ. Écris chaque nœud dans SON PROPRE bloc <script type="application/ld+json"> et n'utilise pas d'enveloppe @graph, car seo-check.mjs ne lit que le @type de premier niveau et ne voit pas un BreadcrumbList situé dans un @graph. Relie les nœuds par @id. N'invente jamais d'horaires d'ouverture, de coordonnées, de notes, d'avis, de distinctions, de nombres de clients ou de certificats ; laisse de côté les champs inconnus. 9. Accès des IA. Écris robots.txt : tout le site ouvert, seul /_kaynak/ fermé ; Allow: / pour GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended et Bingbot ; ta décision sur CCBot avec la raison en commentaire ; la ligne Sitemap en dernier. Ajoute llms.txt à la racine : un résumé exact de l'entreprise en deux phrases, les pages importantes avec une ligne chacune et les coordonnées. Écris 404.html (noindex, avec les marqueurs d'en-tête et de pied de page). 10. Rédaction. Chaque page contient au moins 150 mots de texte original dans <main>, et le premier paragraphe répond directement à la question principale de la page. Les titres font de 48 à 60 caractères, les descriptions de 145 à 158, uniques sur chaque page. Pas de tirets cadratins ni demi-cadratins, pas de slogans bateau, pas de promesses creuses. Si un élément du site n'est pas réel, indique clairement qu'il est fictif. Contrôles. Après chaque modification, exécute-les avec site_run_command dans cet ordre et ne passe à la suite que lorsque chacun est propre : 1. node _kaynak/parca-bas.mjs, node seo-stamp.mjs, la compilation Tailwind (à refaire si tu as ajouté des classes). 2. node seo-check.mjs : 0 erreur et 0 avertissement. S'il signale « gövde kısa » (corps trop court), ajoute du vrai texte, pas du remplissage. 3. node design-check.mjs : 0 erreur. Le seul avertissement