Minificateur HTML

Optimisez la vitesse de chargement des pages avec un minificateur HTML rapide

Lorsque les navigateurs Web modernes demandent une page Web, le serveur Web répond avec des documents contenant la structure, la mise en page et les instructions de style. Alors que les développeurs s'appuient sur des retraits structurels spacieux, des sauts de ligne étendus, des commentaires de code et une documentation détaillée dans les fichiers pour créer des architectures lisibles, les compilateurs et les navigateurs clients n'ont pas besoin de ces détails centrés sur l'humain. En fait, chaque ligne vide, espace, tabulation et commentaire HTML/CSS compte comme un octet supplémentaire de surcharge. Pour les plates-formes Web complexes, ces éléments de formatage mineurs peuvent s'accumuler et gonfler la taille des fichiers de 10 à 30 %, ce qui ralentit les temps de chargement et dégrade les Core Web Vitals.

C'est là qu'intervient un minificateur HTML. Notre outil analyse votre balisage et supprime les caractères non essentiels sans altérer le comportement de rendu du code. En compressant la structure de vos documents HTML, vous pouvez considérablement améliorer le temps d'accès au premier octet (TTFB), accélérer les phases de rendu initiales et améliorer les vitesses globales de chargement.

Comprendre le pipeline interne : comment compresser des fichiers HTML en ligne en toute sécurité

Un défi majeur avec la minification HTML est de garantir que le processus ne casse pas les éléments qui dépendent de l'espacement. Par exemple, les paragraphes, les listes de codes, les zones de saisie et les blocs préformatés nécessitent une disposition précise des espaces blancs pour s'afficher correctement. Si un minificateur réduit aveuglément les espaces à l'intérieur de balises telles que

,  ou </code>, il détruira le formatage du texte destiné à l'utilisateur.</p><p>Pour contourner ce problème, notre outil implémente un pipeline de traitement sécurisé :</p><p>Cette approche en plusieurs étapes garantit que votre contenu visuel, vos éléments interactifs et vos formulaires fonctionnent parfaitement tout en atteignant le taux de compression le plus élevé possible.</p><h3 class="text-xl font-bold tracking-tight text-[#171717] dark:text-white font-sans">Optimisation avancée : contrôle granulaire pour les scripts et les feuilles de style</h3><p>La plupart des modèles Web modernes contiennent un mélange de structure HTML brute, de styles intégrés et de balises de script en ligne. Lorsque vous utilisez cet outil pour <strong>minifier du HTML en ligne</strong>, vous pouvez contrôler chaque étape de compression individuellement :</p><ul class="list-disc list-inside space-y-2"> <li><strong>Réduire les espaces blancs</strong> : réduit les espacements redondants, les nouvelles lignes et les indentations dans l'ensemble du document de mise en page.</li><li><strong>Supprimer les commentaires</strong> : supprime tous les commentaires HTML. Les développeurs laissent souvent des notes sur l’imbrication des mises en page, ce qui ajoute du poids inutile aux ressources de production. La suppression de ces commentaires permet de conserver le code côté client propre et professionnel.</li><li><strong>Minify Inline JS</strong> : supprime les notes du développeur en ligne et les sauts de ligne des balises <code><script></code>, à l'aide d'un algorithme sécurisé de suppression des commentaires pour réduire la taille de la charge utile JS.</li><li><strong>Réduire le CSS en ligne</strong> : compresse les styles en ligne en supprimant les commentaires CSS, les espaces supplémentaires autour des accolades et les points-virgules inutiles avant de fermer les crochets.</li> </ul><p>En utilisant ces quatre boutons, vous pouvez personnaliser le processus de minification en fonction des besoins de votre espace de travail, que vous prépariez du code de production, des modèles ou des extraits bruts.</p><h3 class="text-xl font-bold tracking-tight text-[#171717] dark:text-white font-sans">Évaluation des compromis de compression et des cas extrêmes</h3><p>Bien que la réduction du HTML génère des récompenses évidentes en termes de performances, il est important de comprendre quand et comment configurer l'outil pour des projets complexes. Par exemple, lorsque vous utilisez des frameworks de rendu côté serveur (SSR) ou des moteurs de modèles comme PHP, JSP ou Jinja, les modèles contiennent des marqueurs de syntaxe spéciaux (par exemple, des balises avec une syntaxe entre crochets). La réduction des modèles bruts contenant ces composants de syntaxe peut parfois entraîner des problèmes d'analyse ou provoquer des bugs visuels si les règles d'espacement sont strictement appliquées par le moteur du serveur. Dans de tels scénarios, il est fortement recommandé d'exécuter le minifier sur la sortie HTML statique finale générée plutôt que sur le code du modèle source. De plus, lors de l'utilisation de styles CSS en ligne dans des fichiers HTML, les moteurs de mise en page du navigateur peuvent parfois nécessiter un espacement spécifique pour analyser les hacks personnalisés. Si vous remarquez des anomalies de style après la compression, désactivez l'option de minification CSS en ligne pour vérifier si le formatage de la feuille de style était à l'origine du problème. En expérimentant avec des options de bascule individuelles, vous pouvez atteindre l'équilibre parfait entre une réduction agressive de la taille des fichiers et la stabilité de la base de code.</p><h3 class="text-xl font-bold tracking-tight text-[#171717] dark:text-white font-sans">Exécution côté client : 100 % sécurisée et privée</h3><p>La confidentialité des données est une préoccupation majeure lors de l’utilisation d’utilitaires de développement en ligne. De nombreux outils Web téléchargent vos charges utiles de code sur des serveurs distants pour traitement, ce qui risque d'exposer des points de terminaison d'API, des clés de configuration, des schémas de base de données ou des modèles propriétaires sensibles à des serveurs tiers.</p><p>Nous accordons la priorité à la sécurité en exécutant toutes les opérations côté client. Notre outil fonctionne entièrement dans le bac à sable de votre navigateur local. L'algorithme de minification HTML, la logique de formatage et la coloration syntaxique s'exécutent comme une boucle JavaScript locale dans le DOM. Aucune donnée n'est transmise à des serveurs externes, garantissant ainsi que vos modèles de pré-production, formulaires internes et segments de code restent totalement privés.</p> </div> <!-- FAQ Sidebar --> <div class="space-y-6"> <h2 class="text-lg font-bold tracking-tight text-[#171717] dark:text-white font-sans"> Questions Fréquentes </h2> <div class="space-y-4"> <div class="border-b border-[#ebebeb] dark:border-[#1f1f1f] pb-3"> <h4 class="text-sm font-semibold text-[#171717] dark:text-white mb-1.5">Pourquoi devrais-je réduire le code HTML ?</h4> <p class="text-xs text-[#4d4d4d] dark:text-[#888] leading-relaxed">La minification réduit la taille du fichier HTML en supprimant les caractères inutiles tels que les espaces multiples, les caractères de nouvelle ligne, les retraits de tabulation et les commentaires de code. En réduisant la charge utile globale envoyée depuis votre serveur Web ou votre réseau de diffusion de contenu (CDN) vers le navigateur, les vitesses de chargement des pages sont améliorées. Cela se traduit directement par une réduction du temps jusqu'au premier octet (TTFB), des étapes de peinture plus rapides comme le Largest Contentful Paint (LCP), une consommation de bande passante réduite pour les utilisateurs mobiles et des signaux globalement positifs pour les algorithmes d'optimisation des moteurs de recherche (SEO).</p> </div><div class="border-b border-[#ebebeb] dark:border-[#1f1f1f] pb-3"> <h4 class="text-sm font-semibold text-[#171717] dark:text-white mb-1.5">Ce minificateur HTML compromet-il la confidentialité de mes données ?</h4> <p class="text-xs text-[#4d4d4d] dark:text-[#888] leading-relaxed">Non, votre code source est totalement sécurisé. Cet utilitaire de minification HTML traite entièrement le code dans votre navigateur Web. Aucune structure HTML, scripts en ligne, styles ou données de configuration n'est téléchargée sur des serveurs distants ou des points de terminaison externes. Étant donné que tous les traitements s'exécutent côté client à l'aide de JavaScript, vous pouvez l'utiliser en toute sécurité sur des portails Web d'entreprise, des modèles de pré-production ou des pages contenant des API internes sans vous soucier des fuites ou du suivi des données.</p> </div><div class="border-b border-[#ebebeb] dark:border-[#1f1f1f] pb-3"> <h4 class="text-sm font-semibold text-[#171717] dark:text-white mb-1.5">La minification HTML peut-elle briser les styles JavaScript ou CSS en ligne ?</h4> <p class="text-xs text-[#4d4d4d] dark:text-[#888] leading-relaxed">Généralement, la minification standard ne casse pas le code en ligne si votre syntaxe est valide. Notre minificateur HTML propose des configurations de bascule distinctes pour JavaScript et CSS en ligne. Lorsqu'il est activé, il applique une légère réduction des espaces et la suppression des commentaires dans les balises de script et de style tout en préservant l'intégrité syntaxique. Si votre projet utilise une syntaxe de modèle complexe ou des scripts de script stricts, vous pouvez désactiver la minification JS ou CSS en ligne pour conserver ces sections exactement telles qu'elles ont été écrites.</p> </div><div class="border-b border-[#ebebeb] dark:border-[#1f1f1f] pb-3"> <h4 class="text-sm font-semibold text-[#171717] dark:text-white mb-1.5">Comment l’outil protège-t-il les blocs de texte et de code préformatés ?</h4> <p class="text-xs text-[#4d4d4d] dark:text-[#888] leading-relaxed">Les blocs de code à l'intérieur d'éléments tels que <pre>, <code> et <textarea> s'appuient sur des caractères d'espacement littéraux pour formater correctement leur contenu. La réduction des espaces à l'intérieur de ces balises interromprait la présentation du code. Pour éviter cela, notre moteur de traitement extrait ces blocs et les remplace par des espaces réservés temporaires uniques avant la compression. Une fois la mise en page HTML externe réduite, les espaces réservés sont remplacés par les blocs de code d'origine non modifiés, en conservant leur formatage.</p> </div><div class="border-b border-[#ebebeb] dark:border-[#1f1f1f] pb-3"> <h4 class="text-sm font-semibold text-[#171717] dark:text-white mb-1.5">Quelle est la différence entre la minification HTML et la compression Gzip ?</h4> <p class="text-xs text-[#4d4d4d] dark:text-[#888] leading-relaxed">La minification HTML est une optimisation au moment de la construction ou du processus qui supprime les caractères de texte redondants (tels que les commentaires du développeur, les sauts de tabulation et les espaces supplémentaires) directement du code source. La compression Gzip (ou Brotli) est un algorithme de compression d'exécution côté serveur qui compresse les charges utiles de texte à l'aide d'algorithmes basés sur un dictionnaire avant de les transmettre via HTTP. Ces deux méthodes sont complémentaires ; la réduction de votre code HTML supprime les jetons inutiles, puis Gzip compresse le code rationalisé résultant, maximisant ainsi la vitesse de chargement.</p> </div> </div> </div> </div> </div> </main> <script id="ui-translations" type="application/json">{"Input HTML":"Saisir du HTML","Sample":"Échantillon","Clear":"Effacer","Collapse Whitespace":"Réduire les espaces","Remove Comments":"Supprimer les commentaires","Minify Inline JS":"Réduire JS en ligne","Minify Inline CSS":"Réduire le CSS en ligne","0 chars":"0 caractère","Minify HTML":"Réduire le HTML","Minified Output":"Sortie réduite","Copy":"Copier","Download":"Télécharger","Output will appear here…":"La sortie apparaîtra ici…","Copied!":"Copié!","Paste your HTML code here…":"Collez votre code HTML ici…","Copied to clipboard!":"Copié dans le presse-papier !","Copy failed — try Ctrl+C":"Échec de la copie – essayez Ctrl+C","Minified HTML file downloaded!":"Fichier HTML minifié téléchargé !","Failed to process":"Échec du traitement","{0} char{1}":"{0} caractère{1}","{0} chars":"{0} caractères","{0} chars · {1}{2}% size reduction":"{0} caractères · {1}{2} % de réduction de la taille","<span class=\"text-red-500 font-semibold\">✗ Minification Error</span>\\n\\n<span class=\"text-red-400\">{0}</span>":"<span class=\"text-red-500 font-semibold\">✗ Erreur de minification</span>\\n\\n<span class=\"text-red-400\">{0}</span>"}</script> <footer class="w-full border-t border-[#ebebeb] bg-white dark:border-[#1f1f1f] dark:bg-[#000000] transition-colors duration-200"> <div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16"> <div class="xl:grid xl:grid-cols-4 xl:gap-8"> <!-- Brand description --> <div class="space-y-4 xl:col-span-1"> <a href="/fr/" class="flex items-center"> <!-- Transparent logo — works on both light & dark --> <img src="/logo-transparent.png" alt="say.tools logo" class="h-[48px] md:h-[96px] w-auto"> </a> <p class="text-sm text-[#4d4d4d] dark:text-[#888] max-w-xs"> Votre destination ultime pour des outils d'utilité web rapides, gratuits et sécurisés. Conçus entièrement côté client pour une confidentialité maximale. </p> <div class="flex items-center gap-2 pt-2"> <span class="w-2 h-2 rounded-full bg-green-400 block flex-shrink-0"></span> <span class="text-xs font-mono text-[#888]">Tous les outils s'exécutent côté client</span> </div> </div> <!-- Links columns --> <div class="mt-12 grid grid-cols-3 gap-8 xl:col-span-3 xl:mt-0"> <div> <h3 class="text-xs font-semibold uppercase tracking-wider text-[#171717] dark:text-white font-mono">Outils</h3> <ul role="list" class="mt-4 space-y-2"> <li><a href="/fr/text/word-counter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Compteur de mots</a></li> <li><a href="/fr/developer/qr-generator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Générateur de codes QR</a></li> <li><a href="/fr/developer/password-generator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Générateur de mot de passe</a></li> <li><a href="/fr/developer/uuid-generator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Générateur d'UUID en masse en ligne gratuit</a></li> <li><a href="/fr/developer/epoch-converter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Convertisseur d'horodatage d'époque Unix</a></li> <li><a href="/fr/developer/jwt-debugger" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Débogueur de jeton Web JSON</a></li> <li><a href="/fr/calculators/unit-converter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Convertisseur d'unités</a></li> <li><a href="/fr/design/color-picker" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Sélecteur de couleurs et générateur de palette</a></li> <li><a href="/fr/calculators/tip-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Calculateur de pourboires en ligne</a></li> <li><a href="/fr/calculators/scientific-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Calculatrice scientifique</a></li> <li><a href="/fr/calculators/fraction-to-decimal" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Calculateur de fractions en décimales</a></li> <li><a href="/fr/calculators/decimal-to-fraction" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Calculateur décimal en fraction</a></li> <li><a href="/fr/developer/json-validator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Validateur et analyseur JSON en ligne gratuits</a></li> <li><a href="/fr/developer/css-minifier" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Compresseur de code CSS en ligne gratuit</a></li> <li><a href="/fr/developer/base64-to-image" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Décodeur Base64 vers Image en ligne gratuit</a></li> <li><a href="/fr/productivity/merge-pdf" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Utilitaire de fusion de PDF en ligne gratuit</a></li> <li><a href="/fr/productivity/word-to-pdf" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Convertisseur Word en PDF en ligne gratuit</a></li> <li><a href="/fr/productivity/split-pdf" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Séparateur de PDF et extracteur de pages en ligne gratuit</a></li> <li><a href="/fr/developer/whois-lookup" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Outil de recherche Whois gratuit côté client</a></li> <li><a href="/fr/developer/dns-lookup" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Utilitaire gratuit de recherche d'enregistrements DNS en direct</a></li> </ul> </div> <div> <h3 class="text-xs font-semibold uppercase tracking-wider text-[#171717] dark:text-white font-mono">Plus d'Outils</h3> <ul role="list" class="mt-4 space-y-2"> <li><a href="/fr/calculators/date-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Calculateur de dates</a></li> <li><a href="/fr/calculators/bmi-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Calculateur d'IMC</a></li> <li><a href="/fr/developer/base64-converter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Encodeur et décodeur Base64</a></li> <li><a href="/fr/developer/sql-formatter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Formateur SQL</a></li> <li><a href="/fr/developer/user-agent-parser" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Analyseur d'agent utilisateur</a></li> <li><a href="/fr/text/morse-code-translator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Traducteur de code Morse</a></li> <li><a href="/fr/design/screen-resolution" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Vérificateur d'écran et de fenêtre</a></li> <li><a href="/fr/text/text-utils" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Convertisseur de casse de texte et utilitaires</a></li> <li><a href="/fr/developer/json-formatter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Formateur et validateur JSON</a></li> <li><a href="/fr/developer/hash-generator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Générateur de hachage</a></li> <li><a href="/fr/calculators/lcm-finder" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Calculatrice LCM (plus petit commun multiple)</a></li> <li><a href="/fr/calculators/gcd-finder" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Calculateur PGCD</a></li> <li><a href="/fr/calculators/prime-checker" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Vérificateur de nombres premiers</a></li> <li><a href="/fr/developer/url-parser" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Analyseur et débogueur d'URL en ligne gratuits</a></li> <li><a href="/fr/developer/http-headers" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Visionneuse d'en-têtes de requête HTTP en ligne gratuite</a></li> <li><a href="/fr/developer/qr-decoder" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Décodeur et scanner de code QR en ligne gratuits</a></li> <li><a href="/fr/developer/cron-generator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Générateur d'expressions Cron</a></li> <li><a href="/fr/design/png-to-svg" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Vectoriseur PNG en SVG en ligne gratuit</a></li> <li><a href="/fr/calculators/metric-conversion" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Outil de conversion métrique en ligne gratuit</a></li> <li><a href="/fr/text/markdown-to-html" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Convertisseur Markdown en HTML en ligne gratuit</a></li> <li><a href="/fr/text/html-to-markdown" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Convertisseur HTML en Markdown en ligne gratuit</a></li> <li><a href="/fr/developer/json-minifier" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Minificateur JSON en ligne gratuit</a></li> </ul> </div> <div> <h3 class="text-xs font-semibold uppercase tracking-wider text-[#171717] dark:text-white font-mono">Encore Plus</h3> <ul role="list" class="mt-4 space-y-2"> <li><a href="/fr/productivity/timer" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Minuterie et chronomètre en ligne</a></li> <li><a href="/fr/productivity/stopwatch" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Chronomètre en ligne</a></li> <li><a href="/fr/text/lorem-ipsum" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Générateur Lorem Ipsum</a></li> <li><a href="/fr/calculators/percentage-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Calculateur de pourcentage</a></li> <li><a href="/fr/text/markdown-preview" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Aperçu de démarque</a></li> <li><a href="/fr/calculators/random-number" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Générateur de nombres aléatoires</a></li> <li><a href="/fr/design/image-compressor" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Compresseur d'images</a></li> <li><a href="/fr/design/hex-to-rgb" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Convertisseur hexadécimal et RVB</a></li> <li><a href="/fr/design/aspect-ratio-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Calculateur de rapport hauteur/largeur</a></li> <li><a href="/fr/calculators/quadratic-solver" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Solveur d'équation quadratique</a></li> <li><a href="/fr/calculators/date-difference" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Calculateur de jours entre les dates</a></li> <li><a href="/fr/calculators/fibonacci-generator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Générateur de séquence de Fibonacci</a></li> <li><a href="/fr/design/svg-to-png" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Rasteriseur SVG en PNG en ligne gratuit</a></li> <li><a href="/fr/design/image-converter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Convertisseur d'images locales en ligne gratuit</a></li> <li><a href="/fr/design/placeholder-image" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Générateur d'images d'espace réservé en ligne gratuit</a></li> <li><a href="/fr/design/contrast-checker" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Vérificateur de contraste de couleur en ligne gratuit</a></li> <li><a href="/fr/design/hsl-to-rgb" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Convertisseur de couleurs HSL en RVB en ligne gratuit</a></li> <li><a href="/fr/calculators/gratuity-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Calculateur de pourboires et de pourboires en ligne gratuit</a></li> <li><a href="/fr/text/character-counter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Compteur de personnages en ligne gratuit</a></li> <li><a href="/fr/text/sentence-counter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Compteur de phrases en ligne gratuit</a></li> <li><a href="/fr/text/paragraph-counter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Compteur de paragraphes en ligne gratuit</a></li> <li><a href="/fr/text/line-counter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Compteur de lignes en ligne gratuit</a></li> </ul> <div class="mt-6 space-y-2"> <h3 class="text-xs font-semibold uppercase tracking-wider text-[#171717] dark:text-white font-mono">Entreprise</h3> <ul role="list" class="space-y-2"> <li><a href="/fr/about" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">À Propos</a></li> <li><a href="/fr/contact" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Contact</a></li> <li><a href="/fr/privacy" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Politique de Confidentialité</a></li> <li><a href="/fr/terms" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Conditions d'Utilisation</a></li> </ul> </div> </div> </div> </div> <!-- Bottom copyrights --> <div class="mt-12 border-t border-[#ebebeb] pt-8 dark:border-[#1f1f1f] flex flex-col sm:flex-row items-center justify-between gap-4"> <p class="text-xs text-[#888] dark:text-[#888] font-mono">
© 2026 say.tools. Tous droits réservés. Les outils fonctionnent à 100% côté client. </p> <div class="flex flex-col sm:flex-row items-center gap-4 text-xs font-mono text-[#888] dark:text-[#888] select-none"> <span class="flex items-center gap-1.5">
Made with <span class="text-[#ff4b4b]">❤️</span> by <a href="https://x.com/NiranjanBuilds" target="_blank" rel="noopener noreferrer" class="underline hover:text-[#171717] dark:hover:text-white font-semibold">NiranjanBuilds</a> <a href="https://x.com/NiranjanBuilds" target="_blank" rel="noopener noreferrer" class="hover:text-[#171717] dark:hover:text-white inline-flex items-center" aria-label="X (Twitter)">𝕏</a> </span> <span class="hidden sm:inline w-px h-3 bg-[#ebebeb] dark:bg-[#1f1f1f]"></span> <a href="mailto:support@say.tools" class="hover:underline">support@say.tools</a> </div> </div> </div> </footer>  <script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Pourquoi devrais-je réduire le code HTML ?","acceptedAnswer":{"@type":"Answer","text":"La minification réduit la taille du fichier HTML en supprimant les caractères inutiles tels que les espaces multiples, les caractères de nouvelle ligne, les retraits de tabulation et les commentaires de code. En réduisant la charge utile globale envoyée depuis votre serveur Web ou votre réseau de diffusion de contenu (CDN) vers le navigateur, les vitesses de chargement des pages sont améliorées. Cela se traduit directement par une réduction du temps jusqu'au premier octet (TTFB), des étapes de peinture plus rapides comme le Largest Contentful Paint (LCP), une consommation de bande passante réduite pour les utilisateurs mobiles et des signaux globalement positifs pour les algorithmes d'optimisation des moteurs de recherche (SEO)."}},{"@type":"Question","name":"Ce minificateur HTML compromet-il la confidentialité de mes données ?","acceptedAnswer":{"@type":"Answer","text":"Non, votre code source est totalement sécurisé. Cet utilitaire de minification HTML traite entièrement le code dans votre navigateur Web. Aucune structure HTML, scripts en ligne, styles ou données de configuration n'est téléchargée sur des serveurs distants ou des points de terminaison externes. Étant donné que tous les traitements s'exécutent côté client à l'aide de JavaScript, vous pouvez l'utiliser en toute sécurité sur des portails Web d'entreprise, des modèles de pré-production ou des pages contenant des API internes sans vous soucier des fuites ou du suivi des données."}},{"@type":"Question","name":"La minification HTML peut-elle briser les styles JavaScript ou CSS en ligne ?","acceptedAnswer":{"@type":"Answer","text":"Généralement, la minification standard ne casse pas le code en ligne si votre syntaxe est valide. Notre minificateur HTML propose des configurations de bascule distinctes pour JavaScript et CSS en ligne. Lorsqu'il est activé, il applique une légère réduction des espaces et la suppression des commentaires dans les balises de script et de style tout en préservant l'intégrité syntaxique. Si votre projet utilise une syntaxe de modèle complexe ou des scripts de script stricts, vous pouvez désactiver la minification JS ou CSS en ligne pour conserver ces sections exactement telles qu'elles ont été écrites."}},{"@type":"Question","name":"Comment l’outil protège-t-il les blocs de texte et de code préformatés ?","acceptedAnswer":{"@type":"Answer","text":"Les blocs de code à l'intérieur d'éléments tels que <pre>, <code> et <textarea> s'appuient sur des caractères d'espacement littéraux pour formater correctement leur contenu. La réduction des espaces à l'intérieur de ces balises interromprait la présentation du code. Pour éviter cela, notre moteur de traitement extrait ces blocs et les remplace par des espaces réservés temporaires uniques avant la compression. Une fois la mise en page HTML externe réduite, les espaces réservés sont remplacés par les blocs de code d'origine non modifiés, en conservant leur formatage."}},{"@type":"Question","name":"Quelle est la différence entre la minification HTML et la compression Gzip ?","acceptedAnswer":{"@type":"Answer","text":"La minification HTML est une optimisation au moment de la construction ou du processus qui supprime les caractères de texte redondants (tels que les commentaires du développeur, les sauts de tabulation et les espaces supplémentaires) directement du code source. La compression Gzip (ou Brotli) est un algorithme de compression d'exécution côté serveur qui compresse les charges utiles de texte à l'aide d'algorithmes basés sur un dictionnaire avant de les transmettre via HTTP. Ces deux méthodes sont complémentaires ; la réduction de votre code HTML supprime les jetons inutiles, puis Gzip compresse le code rationalisé résultant, maximisant ainsi la vitesse de chargement."}}]}</script>  <script type="module" src="/_astro/html-minifier.astro_astro_type_script_index_0_lang.Gbp66YcM.js"></script>  <!-- STICKY BOTTOM NAVIGATION BAR --> <div class="lg:hidden fixed bottom-0 left-0 right-0 z-40 bg-white/80 dark:bg-black/80 backdrop-blur-lg border-t border-[#e5e5e5] dark:border-[#1f1f1f] px-6 py-1.5" style="padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px))"> <div class="flex items-center justify-around h-12"> <!-- Home Button --> <a href="/fr/" class="flex flex-col items-center justify-center text-[#4d4d4d] dark:text-[#888] hover:text-[#007cf0] dark:hover:text-[#007cf0] transition-colors w-16 select-none"> <svg class="w-5 h-5 mb-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path> </svg> <span class="text-[10px] font-semibold font-sans">Accueil</span> </a> <!-- Tools Button --> <button id="bottom-nav-tools-btn" class="flex flex-col items-center justify-center text-[#4d4d4d] dark:text-[#888] hover:text-[#007cf0] dark:hover:text-[#007cf0] transition-colors w-16 cursor-pointer select-none"> <svg class="w-5 h-5 mb-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path> </svg> <span class="text-[10px] font-semibold font-sans">Outils</span> </button> <!-- Theme Toggle Button --> <button class="theme-toggle flex flex-col items-center justify-center text-[#4d4d4d] dark:text-[#888] hover:text-[#007cf0] dark:hover:text-[#007cf0] transition-colors w-16 cursor-pointer select-none" aria-label="Toggle Theme"> <!-- Sun Icon --> <svg class="theme-toggle-light-icon hidden w-5 h-5 mb-0.5 text-current" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707m0-12.728l.707.707m12.728 12.728l.707-.707M12 8a4 4 0 100 8 4 4 0 000-8z"></path> </svg> <!-- Moon Icon --> <svg class="theme-toggle-dark-icon hidden w-5 h-5 mb-0.5 text-current" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path> </svg> <span class="text-[10px] font-semibold font-sans">Thème</span> </button> <!-- More Button --> <button id="bottom-nav-more-btn" class="flex flex-col items-center justify-center text-[#4d4d4d] dark:text-[#888] hover:text-[#007cf0] dark:hover:text-[#007cf0] transition-colors w-16 cursor-pointer select-none"> <svg class="w-5 h-5 mb-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="1"></circle> <circle cx="12" cy="5" r="1"></circle> <circle cx="12" cy="19" r="1"></circle> </svg> <span class="text-[10px] font-semibold font-sans">Menu</span> </button> </div> </div> <!-- TOOLS DRAWER OVERLAY --> <div id="tools-sheet-backdrop" class="fixed inset-0 z-50 bg-black/40 dark:bg-black/60 backdrop-blur-sm opacity-0 pointer-events-none transition-opacity duration-300 hidden"></div> <div id="tools-sheet" class="fixed bottom-0 left-0 right-0 z-50 max-h-[82vh] bg-white/95 dark:bg-[#0a0a0a]/95 backdrop-blur-lg border-t border-[#e5e5e5] dark:border-[#1f1f1f] rounded-t-2xl shadow-2xl translate-y-full transition-transform duration-300 ease-out hidden flex flex-col"> <!-- Drag Handle style bar --> <div class="flex justify-center py-3"> <div class="w-10 h-1 rounded-full bg-[#e5e5e5] dark:bg-[#2e2e2e]"></div> </div> <!-- Drawer Header --> <div class="px-6 pb-4 border-b border-[#e5e5e5] dark:border-[#1f1f1f] flex items-center justify-between"> <h3 class="text-base font-bold text-[#171717] dark:text-white font-sans">Outils</h3> <button id="tools-sheet-close" class="w-7 h-7 rounded-full bg-[#f5f5f5] dark:bg-[#1f1f1f] text-[#4d4d4d] dark:text-[#888] flex items-center justify-center hover:opacity-80 transition-opacity cursor-pointer" aria-label="Close"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> </div> <!-- Drawer Search Bar --> <div class="px-6 py-3 border-b border-[#e5e5e5] dark:border-[#1f1f1f] bg-[#fafafa]/50 dark:bg-[#0a0a0a]/50"> <div class="relative flex items-center"> <svg class="absolute left-3 w-4 h-4 text-[#888] dark:text-[#555] pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path> </svg> <input type="text" id="tools-search-input" placeholder="Rechercher des outils…" class="w-full pl-9 pr-8 py-2 text-sm bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-[#1f1f1f] rounded-lg text-[#171717] dark:text-white placeholder-[#888] dark:placeholder-[#555] focus:outline-none focus:border-[#007cf0] dark:focus:border-[#007cf0] focus:ring-1 focus:ring-[#007cf0] transition-all"> <button id="tools-search-clear" class="absolute right-3 hidden text-[#888] dark:text-[#555] hover:text-[#171717] dark:hover:text-white transition-colors cursor-pointer" aria-label="Clear search"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> </div> </div> <!-- Drawer Categories and Links --> <div class="flex-1 overflow-y-auto px-6 py-4 space-y-6"> <div class="category-section space-y-3"> <h4 class="category-title text-[10px] font-mono font-bold uppercase tracking-wider text-[#888] dark:text-[#555] border-b border-[#f5f5f5] dark:border-[#111] pb-1"> Texte </h4> <div class="grid grid-cols-2 gap-2"> <a href="/fr/text/word-counter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="compteur de mots"> <span class="text-sm flex-shrink-0">📝</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Compteur de mots</span> </a><a href="/fr/text/text-utils" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertisseur de casse de texte et utilitaires"> <span class="text-sm flex-shrink-0">🔤</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertisseur de casse de texte et utilitaires</span> </a><a href="/fr/text/lorem-ipsum" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="générateur lorem ipsum"> <span class="text-sm flex-shrink-0">📄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Générateur Lorem Ipsum</span> </a><a href="/fr/text/markdown-preview" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="aperçu de démarque"> <span class="text-sm flex-shrink-0">✍️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Aperçu de démarque</span> </a><a href="/fr/text/case-converter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertisseur de cas"> <span class="text-sm flex-shrink-0">🔠</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertisseur de cas</span> </a><a href="/fr/text/remove-duplicate-lines" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="suppresseur de lignes en double"> <span class="text-sm flex-shrink-0">🧹</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Suppresseur de lignes en double</span> </a><a href="/fr/text/find-and-replace-text" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="outil rechercher et remplacer"> <span class="text-sm flex-shrink-0">🔍</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Outil Rechercher et remplacer</span> </a><a href="/fr/text/reverse-text" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="outil de texte inversé"> <span class="text-sm flex-shrink-0">🔄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Outil de texte inversé</span> </a><a href="/fr/text/string-length" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="recherche de longueur de chaîne"> <span class="text-sm flex-shrink-0">📏</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Recherche de longueur de chaîne</span> </a><a href="/fr/text/word-replacer" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="remplaceur de mots"> <span class="text-sm flex-shrink-0">✏️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Remplaceur de mots</span> </a><a href="/fr/text/sort-list-online" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="trieur de liste"> <span class="text-sm flex-shrink-0">🗂️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Trieur de liste</span> </a><a href="/fr/text/text-to-binary" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertisseur de texte en binaire"> <span class="text-sm flex-shrink-0">🔢</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertisseur de texte en binaire</span> </a><a href="/fr/text/text-to-hex" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertisseur de texte en hexadécimal"> <span class="text-sm flex-shrink-0">🛑</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertisseur de texte en hexadécimal</span> </a><a href="/fr/text/hex-to-text" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertisseur hexadécimal en texte"> <span class="text-sm flex-shrink-0">💬</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertisseur hexadécimal en texte</span> </a><a href="/fr/text/text-diff" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="outil de comparaison de texte"> <span class="text-sm flex-shrink-0">🔀</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Outil de comparaison de texte</span> </a><a href="/fr/text/number-to-words" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertisseur de nombres en mots"> <span class="text-sm flex-shrink-0">🔢</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertisseur de nombres en mots</span> </a><a href="/fr/text/char-frequency" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="compteur de fréquence de caractères"> <span class="text-sm flex-shrink-0">📊</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Compteur de fréquence de caractères</span> </a><a href="/fr/text/binary-to-text" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertisseur binaire en texte"> <span class="text-sm flex-shrink-0">01</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertisseur binaire en texte</span> </a><a href="/fr/text/rot13" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="encodeur et décodeur rot13"> <span class="text-sm flex-shrink-0">🔀</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Encodeur et décodeur ROT13</span> </a><a href="/fr/text/slug-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="générateur de slugs d'url"> <span class="text-sm flex-shrink-0">🔗</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Générateur de slugs d'URL</span> </a><a href="/fr/text/morse-code-translator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="traducteur de code morse"> <span class="text-sm flex-shrink-0">📻</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Traducteur de code Morse</span> </a><a href="/fr/text/markdown-to-html" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertisseur markdown en html en ligne gratuit"> <span class="text-sm flex-shrink-0">🌐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertisseur Markdown en HTML en ligne gratuit</span> </a><a href="/fr/text/html-to-markdown" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertisseur html en markdown en ligne gratuit"> <span class="text-sm flex-shrink-0">✍️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertisseur HTML en Markdown en ligne gratuit</span> </a><a href="/fr/text/character-counter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="compteur de personnages en ligne gratuit"> <span class="text-sm flex-shrink-0">🔢</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Compteur de personnages en ligne gratuit</span> </a><a href="/fr/text/sentence-counter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="compteur de phrases en ligne gratuit"> <span class="text-sm flex-shrink-0">📊</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Compteur de phrases en ligne gratuit</span> </a><a href="/fr/text/paragraph-counter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="compteur de paragraphes en ligne gratuit"> <span class="text-sm flex-shrink-0">📝</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Compteur de paragraphes en ligne gratuit</span> </a><a href="/fr/text/line-counter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="compteur de lignes en ligne gratuit"> <span class="text-sm flex-shrink-0">📏</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Compteur de lignes en ligne gratuit</span> </a> </div> </div><div class="category-section space-y-3"> <h4 class="category-title text-[10px] font-mono font-bold uppercase tracking-wider text-[#888] dark:text-[#555] border-b border-[#f5f5f5] dark:border-[#111] pb-1"> Développeur </h4> <div class="grid grid-cols-2 gap-2"> <a href="/fr/developer/qr-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="générateur de codes qr"> <span class="text-sm flex-shrink-0">🔗</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Générateur de codes QR</span> </a><a href="/fr/developer/password-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="générateur de mot de passe"> <span class="text-sm flex-shrink-0">🔑</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Générateur de mot de passe</span> </a><a href="/fr/developer/base64-converter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="encodeur et décodeur base64"> <span class="text-sm flex-shrink-0">🔏</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Encodeur et décodeur Base64</span> </a><a href="/fr/developer/json-formatter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="formateur et validateur json"> <span class="text-sm flex-shrink-0">📋</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Formateur et validateur JSON</span> </a><a href="/fr/developer/hash-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="générateur de hachage"> <span class="text-sm flex-shrink-0">🔐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Générateur de hachage</span> </a><a href="/fr/developer/css-formatter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="formateur css"> <span class="text-sm flex-shrink-0">🎨</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Formateur CSS</span> </a><a href="/fr/developer/csv-to-json" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertisseur csv en json"> <span class="text-sm flex-shrink-0">📊</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertisseur CSV en JSON</span> </a><a href="/fr/developer/html-formatter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="formateur et embellisseur html"> <span class="text-sm flex-shrink-0">🌐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Formateur et embellisseur HTML</span> </a><a href="/fr/developer/html-minifier" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="minificateur html"> <span class="text-sm flex-shrink-0">⚡</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Minificateur HTML</span> </a><a href="/fr/developer/js-formatter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="formateur javascript"> <span class="text-sm flex-shrink-0">📜</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Formateur JavaScript</span> </a><a href="/fr/developer/js-minifier" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="minificateur javascript"> <span class="text-sm flex-shrink-0">📦</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Minificateur JavaScript</span> </a><a href="/fr/developer/json-to-csv" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertisseur json en csv"> <span class="text-sm flex-shrink-0">📈</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertisseur JSON en CSV</span> </a><a href="/fr/developer/json-to-xml" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertisseur json en xml"> <span class="text-sm flex-shrink-0">🪵</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertisseur JSON en XML</span> </a><a href="/fr/developer/xml-formatter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="formateur et embellisseur xml"> <span class="text-sm flex-shrink-0">📝</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Formateur et embellisseur XML</span> </a><a href="/fr/developer/xml-to-json" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertisseur xml en json"> <span class="text-sm flex-shrink-0">🧩</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertisseur XML en JSON</span> </a><a href="/fr/developer/sql-formatter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="formateur sql"> <span class="text-sm flex-shrink-0">🗄️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Formateur SQL</span> </a><a href="/fr/developer/user-agent-parser" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="analyseur d'agent utilisateur"> <span class="text-sm flex-shrink-0">🤖</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Analyseur d'agent utilisateur</span> </a><a href="/fr/developer/regex-tester" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="testeur et débogueur regex"> <span class="text-sm flex-shrink-0">🔍</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Testeur et débogueur Regex</span> </a><a href="/fr/developer/json-to-yaml" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertisseur json en yaml"> <span class="text-sm flex-shrink-0">🔄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertisseur JSON en YAML</span> </a><a href="/fr/developer/yaml-to-json" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertisseur yaml en json"> <span class="text-sm flex-shrink-0">🔄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertisseur YAML en JSON</span> </a><a href="/fr/developer/cron-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="générateur d'expressions cron"> <span class="text-sm flex-shrink-0">⚙️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Générateur d'expressions Cron</span> </a><a href="/fr/developer/html-entities" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="encodeur et décodeur d'entité html"> <span class="text-sm flex-shrink-0">🏷️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Encodeur et décodeur d'entité HTML</span> </a><a href="/fr/developer/image-to-base64" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="image vers l'encodeur base64"> <span class="text-sm flex-shrink-0">🖼️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Image vers l'encodeur Base64</span> </a><a href="/fr/developer/password-strength" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="vérificateur de force de mot de passe"> <span class="text-sm flex-shrink-0">🔐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Vérificateur de force de mot de passe</span> </a><a href="/fr/developer/url-encoder" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="encodeur et décodeur d'url"> <span class="text-sm flex-shrink-0">🔒</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Encodeur et décodeur d'URL</span> </a><a href="/fr/developer/uuid-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="générateur d'uuid en masse en ligne gratuit"> <span class="text-sm flex-shrink-0">🆔</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Générateur d'UUID en masse en ligne gratuit</span> </a><a href="/fr/developer/epoch-converter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertisseur d'horodatage d'époque unix"> <span class="text-sm flex-shrink-0">⏱️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertisseur d'horodatage d'époque Unix</span> </a><a href="/fr/developer/jwt-debugger" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="débogueur de jeton web json"> <span class="text-sm flex-shrink-0">🔑</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Débogueur de jeton Web JSON</span> </a><a href="/fr/developer/json-validator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="validateur et analyseur json en ligne gratuits"> <span class="text-sm flex-shrink-0">🤖</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Validateur et analyseur JSON en ligne gratuits</span> </a><a href="/fr/developer/css-minifier" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="compresseur de code css en ligne gratuit"> <span class="text-sm flex-shrink-0">⚡</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Compresseur de code CSS en ligne gratuit</span> </a><a href="/fr/developer/base64-to-image" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="décodeur base64 vers image en ligne gratuit"> <span class="text-sm flex-shrink-0">🖼️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Décodeur Base64 vers Image en ligne gratuit</span> </a><a href="/fr/developer/url-parser" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="analyseur et débogueur d'url en ligne gratuits"> <span class="text-sm flex-shrink-0">🔗</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Analyseur et débogueur d'URL en ligne gratuits</span> </a><a href="/fr/developer/http-headers" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="visionneuse d'en-têtes de requête http en ligne gratuite"> <span class="text-sm flex-shrink-0">🌐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Visionneuse d'en-têtes de requête HTTP en ligne gratuite</span> </a><a href="/fr/developer/qr-decoder" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="décodeur et scanner de code qr en ligne gratuits"> <span class="text-sm flex-shrink-0">🔍</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Décodeur et scanner de code QR en ligne gratuits</span> </a><a href="/fr/developer/whois-lookup" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="outil de recherche whois gratuit côté client"> <span class="text-sm flex-shrink-0">🌐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Outil de recherche Whois gratuit côté client</span> </a><a href="/fr/developer/dns-lookup" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="utilitaire gratuit de recherche d'enregistrements dns en direct"> <span class="text-sm flex-shrink-0">🔍</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Utilitaire gratuit de recherche d'enregistrements DNS en direct</span> </a><a href="/fr/developer/json-minifier" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="minificateur json en ligne gratuit"> <span class="text-sm flex-shrink-0">⚡</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Minificateur JSON en ligne gratuit</span> </a> </div> </div><div class="category-section space-y-3"> <h4 class="category-title text-[10px] font-mono font-bold uppercase tracking-wider text-[#888] dark:text-[#555] border-b border-[#f5f5f5] dark:border-[#111] pb-1"> Calculateurs </h4> <div class="grid grid-cols-2 gap-2"> <a href="/fr/calculators/unit-converter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertisseur d'unités"> <span class="text-sm flex-shrink-0">🔄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertisseur d'unités</span> </a><a href="/fr/calculators/date-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="calculateur de dates"> <span class="text-sm flex-shrink-0">📅</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Calculateur de dates</span> </a><a href="/fr/calculators/bmi-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="calculateur d'imc"> <span class="text-sm flex-shrink-0">⚖️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Calculateur d'IMC</span> </a><a href="/fr/calculators/age-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="calculateur d'âge"> <span class="text-sm flex-shrink-0">🎂</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Calculateur d'âge</span> </a><a href="/fr/calculators/percentage-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="calculateur de pourcentage"> <span class="text-sm flex-shrink-0">🔢</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Calculateur de pourcentage</span> </a><a href="/fr/calculators/random-number" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="générateur de nombres aléatoires"> <span class="text-sm flex-shrink-0">🎲</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Générateur de nombres aléatoires</span> </a><a href="/fr/calculators/tip-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="calculateur de pourboires en ligne"> <span class="text-sm flex-shrink-0">💸</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Calculateur de pourboires en ligne</span> </a><a href="/fr/calculators/lcm-finder" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="calculatrice lcm (plus petit commun multiple)"> <span class="text-sm flex-shrink-0">🔢</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Calculatrice LCM (plus petit commun multiple)</span> </a><a href="/fr/calculators/quadratic-solver" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="solveur d'équation quadratique"> <span class="text-sm flex-shrink-0">📐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Solveur d'équation quadratique</span> </a><a href="/fr/calculators/scientific-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="calculatrice scientifique"> <span class="text-sm flex-shrink-0">🧮</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Calculatrice scientifique</span> </a><a href="/fr/calculators/fraction-to-decimal" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="calculateur de fractions en décimales"> <span class="text-sm flex-shrink-0">➗</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Calculateur de fractions en décimales</span> </a><a href="/fr/calculators/decimal-to-fraction" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="calculateur décimal en fraction"> <span class="text-sm flex-shrink-0">📊</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Calculateur décimal en fraction</span> </a><a href="/fr/calculators/gcd-finder" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="calculateur pgcd"> <span class="text-sm flex-shrink-0">📐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Calculateur PGCD</span> </a><a href="/fr/calculators/prime-checker" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="vérificateur de nombres premiers"> <span class="text-sm flex-shrink-0">🔢</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Vérificateur de nombres premiers</span> </a><a href="/fr/calculators/date-difference" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="calculateur de jours entre les dates"> <span class="text-sm flex-shrink-0">📅</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Calculateur de jours entre les dates</span> </a><a href="/fr/calculators/fibonacci-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="générateur de séquence de fibonacci"> <span class="text-sm flex-shrink-0">🌀</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Générateur de séquence de Fibonacci</span> </a><a href="/fr/calculators/metric-conversion" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="outil de conversion métrique en ligne gratuit"> <span class="text-sm flex-shrink-0">📐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Outil de conversion métrique en ligne gratuit</span> </a><a href="/fr/calculators/gratuity-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="calculateur de pourboires et de pourboires en ligne gratuit"> <span class="text-sm flex-shrink-0">💸</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Calculateur de pourboires et de pourboires en ligne gratuit</span> </a> </div> </div><div class="category-section space-y-3"> <h4 class="category-title text-[10px] font-mono font-bold uppercase tracking-wider text-[#888] dark:text-[#555] border-b border-[#f5f5f5] dark:border-[#111] pb-1"> Design & Graphisme </h4> <div class="grid grid-cols-2 gap-2"> <a href="/fr/design/color-picker" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="sélecteur de couleurs et générateur de palette"> <span class="text-sm flex-shrink-0">🎨</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Sélecteur de couleurs et générateur de palette</span> </a><a href="/fr/design/image-compressor" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="compresseur d'images"> <span class="text-sm flex-shrink-0">🖼️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Compresseur d'images</span> </a><a href="/fr/design/screen-resolution" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="vérificateur d'écran et de fenêtre"> <span class="text-sm flex-shrink-0">🖥️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Vérificateur d'écran et de fenêtre</span> </a><a href="/fr/design/hex-to-rgb" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertisseur hexadécimal et rvb"> <span class="text-sm flex-shrink-0">🎨</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertisseur hexadécimal et RVB</span> </a><a href="/fr/design/color-palette" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="générateur de palette de couleurs"> <span class="text-sm flex-shrink-0">🎨</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Générateur de palette de couleurs</span> </a><a href="/fr/design/css-gradient" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="générateur de dégradé css"> <span class="text-sm flex-shrink-0">🌈</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Générateur de dégradé CSS</span> </a><a href="/fr/design/favicon-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="générateur de favicon"> <span class="text-sm flex-shrink-0">⭐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Générateur de favicon</span> </a><a href="/fr/design/rgb-to-hex" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertisseur de couleurs rvb en hexadécimal"> <span class="text-sm flex-shrink-0">🎨</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertisseur de couleurs RVB en hexadécimal</span> </a><a href="/fr/design/aspect-ratio-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="calculateur de rapport hauteur/largeur"> <span class="text-sm flex-shrink-0">📐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Calculateur de rapport hauteur/largeur</span> </a><a href="/fr/design/svg-to-png" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="rasteriseur svg en png en ligne gratuit"> <span class="text-sm flex-shrink-0">🖼️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Rasteriseur SVG en PNG en ligne gratuit</span> </a><a href="/fr/design/image-converter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertisseur d'images locales en ligne gratuit"> <span class="text-sm flex-shrink-0">🔄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertisseur d'images locales en ligne gratuit</span> </a><a href="/fr/design/placeholder-image" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="générateur d'images d'espace réservé en ligne gratuit"> <span class="text-sm flex-shrink-0">🖼️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Générateur d'images d'espace réservé en ligne gratuit</span> </a><a href="/fr/design/contrast-checker" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="vérificateur de contraste de couleur en ligne gratuit"> <span class="text-sm flex-shrink-0">👁️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Vérificateur de contraste de couleur en ligne gratuit</span> </a><a href="/fr/design/png-to-svg" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="vectoriseur png en svg en ligne gratuit"> <span class="text-sm flex-shrink-0">📐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Vectoriseur PNG en SVG en ligne gratuit</span> </a><a href="/fr/design/hsl-to-rgb" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertisseur de couleurs hsl en rvb en ligne gratuit"> <span class="text-sm flex-shrink-0">🎨</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertisseur de couleurs HSL en RVB en ligne gratuit</span> </a> </div> </div><div class="category-section space-y-3"> <h4 class="category-title text-[10px] font-mono font-bold uppercase tracking-wider text-[#888] dark:text-[#555] border-b border-[#f5f5f5] dark:border-[#111] pb-1"> Productivité </h4> <div class="grid grid-cols-2 gap-2"> <a href="/fr/productivity/timer" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="minuterie et chronomètre en ligne"> <span class="text-sm flex-shrink-0">⏱️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Minuterie et chronomètre en ligne</span> </a><a href="/fr/productivity/stopwatch" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="chronomètre en ligne"> <span class="text-sm flex-shrink-0">⏱️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Chronomètre en ligne</span> </a><a href="/fr/productivity/pomodoro" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="minuterie pomodoro"> <span class="text-sm flex-shrink-0">🍅</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Minuterie Pomodoro</span> </a><a href="/fr/productivity/merge-pdf" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="utilitaire de fusion de pdf en ligne gratuit"> <span class="text-sm flex-shrink-0">📑</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Utilitaire de fusion de PDF en ligne gratuit</span> </a><a href="/fr/productivity/word-to-pdf" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertisseur word en pdf en ligne gratuit"> <span class="text-sm flex-shrink-0">📄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertisseur Word en PDF en ligne gratuit</span> </a><a href="/fr/productivity/split-pdf" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="séparateur de pdf et extracteur de pages en ligne gratuit"> <span class="text-sm flex-shrink-0">✂️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Séparateur de PDF et extracteur de pages en ligne gratuit</span> </a> </div> </div> </div> <!-- Safe Bottom Spacing --> <div class="h-16 pb-safe-bottom"></div> </div> <!-- MORE DRAWER OVERLAY --> <div id="more-sheet-backdrop" class="fixed inset-0 z-50 bg-black/40 dark:bg-black/60 backdrop-blur-sm opacity-0 pointer-events-none transition-opacity duration-300 hidden"></div> <div id="more-sheet" class="fixed bottom-0 left-0 right-0 z-50 max-h-[82vh] bg-white/95 dark:bg-[#0a0a0a]/95 backdrop-blur-lg border-t border-[#e5e5e5] dark:border-[#1f1f1f] rounded-t-2xl shadow-2xl translate-y-full transition-transform duration-300 ease-out hidden flex flex-col"> <!-- Drag Handle style bar --> <div class="flex justify-center py-3"> <div class="w-10 h-1 rounded-full bg-[#e5e5e5] dark:bg-[#2e2e2e]"></div> </div> <!-- Drawer Header --> <div class="px-6 pb-4 border-b border-[#e5e5e5] dark:border-[#1f1f1f] flex items-center justify-between"> <h3 class="text-base font-bold text-[#171717] dark:text-white font-sans">Menu</h3> <button id="more-sheet-close" class="w-7 h-7 rounded-full bg-[#f5f5f5] dark:bg-[#1f1f1f] text-[#4d4d4d] dark:text-[#888] flex items-center justify-center hover:opacity-80 transition-opacity cursor-pointer" aria-label="Close"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> </div> <!-- Drawer Links & Content --> <div class="flex-1 overflow-y-auto px-6 py-4 space-y-6"> <!-- iOS Style Link List --> <div class="rounded-xl border border-zinc-200 dark:border-[#1f1f1f] bg-zinc-50/50 dark:bg-zinc-900/30 overflow-hidden divide-y divide-[#ebebeb] dark:divide-[#1f1f1f]"> <a href="/fr/about" class="flex items-center justify-between p-3.5 hover:bg-[#f5f5f5] dark:hover:bg-[#1f1f1f] transition-colors group"> <span class="text-sm font-semibold text-[#171717] dark:text-white">À Propos</span> <svg class="w-4 h-4 text-[#888] group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path> </svg> </a> <a href="/fr/contact" class="flex items-center justify-between p-3.5 hover:bg-[#f5f5f5] dark:hover:bg-[#1f1f1f] transition-colors group"> <span class="text-sm font-semibold text-[#171717] dark:text-white">Contact</span> <svg class="w-4 h-4 text-[#888] group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path> </svg> </a> <a href="/fr/privacy" class="flex items-center justify-between p-3.5 hover:bg-[#f5f5f5] dark:hover:bg-[#1f1f1f] transition-colors group"> <span class="text-sm font-semibold text-[#171717] dark:text-white">Politique de Confidentialité</span> <svg class="w-4 h-4 text-[#888] group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path> </svg> </a> <a href="/fr/terms" class="flex items-center justify-between p-3.5 hover:bg-[#f5f5f5] dark:hover:bg-[#1f1f1f] transition-colors group"> <span class="text-sm font-semibold text-[#171717] dark:text-white">Conditions d'Utilisation</span> <svg class="w-4 h-4 text-[#888] group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path> </svg> </a> </div> <!-- Language Selector Section --> <div class="space-y-3"> <h4 class="text-[10px] font-mono font-bold uppercase tracking-wider text-[#888] dark:text-[#555] border-b border-[#f5f5f5] dark:border-[#111] pb-1"> Langue </h4> <div class="grid grid-cols-2 gap-2"> <a href="/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[#171717] dark:text-white border-zinc-200 dark:border-[#1f1f1f]"> <span>English</span>  </a><a href="/es/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[#171717] dark:text-white border-zinc-200 dark:border-[#1f1f1f]"> <span>Español</span>  </a><a href="/fr/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-[#007cf0]/10 border-[#007cf0] text-[#007cf0] font-bold dark:bg-[#007cf0]/20"> <span>Français</span> <span class="text-xs text-[#007cf0]">✓</span> </a><a href="/de/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[#171717] dark:text-white border-zinc-200 dark:border-[#1f1f1f]"> <span>Deutsch</span>  </a><a href="/hi/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[#171717] dark:text-white border-zinc-200 dark:border-[#1f1f1f]"> <span>हिन्दी</span>  </a><a href="/zh/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[#171717] dark:text-white border-zinc-200 dark:border-[#1f1f1f]"> <span>中文</span>  </a><a href="/ja/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[#171717] dark:text-white border-zinc-200 dark:border-[#1f1f1f]"> <span>日本語</span>  </a> </div> </div> <!-- Credits Footer --> <div class="pt-6 border-t border-[#ebebeb] dark:border-[#1f1f1f] text-center space-y-2 select-none"> <p class="text-xs font-mono text-[#888] dark:text-[#888] flex items-center justify-center gap-1.5">
Made with <span class="text-[#ff4b4b]">❤️</span> by <a href="https://x.com/NiranjanBuilds" target="_blank" rel="noopener noreferrer" class="underline hover:text-[#171717] dark:hover:text-white font-semibold">NiranjanBuilds</a> <a href="https://x.com/NiranjanBuilds" target="_blank" rel="noopener noreferrer" class="hover:text-[#171717] dark:hover:text-white inline-flex items-center" aria-label="X (Twitter)">𝕏</a> </p> <p class="text-xs font-mono text-[#888] dark:text-[#888]"> <a href="mailto:support@say.tools" class="hover:underline">support@say.tools</a> </p> </div> </div> <!-- Safe Bottom Spacing --> <div class="h-16 pb-safe-bottom"></div> </div> <!-- Client Script to Toggle Sheet --> <script type="module">const g=document.getElementById("bottom-nav-tools-btn"),B=document.getElementById("tools-sheet-close"),t=document.getElementById("tools-sheet-backdrop"),o=document.getElementById("tools-sheet"),b=document.getElementById("bottom-nav-more-btn"),k=document.getElementById("header-more-btn"),I=document.getElementById("header-more-btn-home"),S=document.getElementById("more-sheet-close"),s=document.getElementById("more-sheet-backdrop"),n=document.getElementById("more-sheet"),e=document.getElementById("tools-search-input"),i=document.getElementById("tools-search-clear"),w=document.querySelectorAll(".category-section"),q=()=>{t?.classList.remove("hidden"),o?.classList.remove("hidden"),document.body.style.overflow="hidden",requestAnimationFrame(()=>{t?.classList.add("opacity-100"),t?.classList.remove("pointer-events-none"),o?.classList.add("translate-y-0"),o?.classList.remove("translate-y-full"),setTimeout(()=>{e?.focus()},100)})},d=()=>{t?.classList.remove("opacity-100"),t?.classList.add("pointer-events-none"),o?.classList.remove("translate-y-0"),o?.classList.add("translate-y-full"),document.body.style.overflow="",e&&(e.value="",e.dispatchEvent(new Event("input"))),setTimeout(()=>{t?.classList.add("hidden"),o?.classList.add("hidden")},300)};g?.addEventListener("click",()=>{m(),q()});B?.addEventListener("click",d);t?.addEventListener("click",d);const r=()=>{s?.classList.remove("hidden"),n?.classList.remove("hidden"),document.body.style.overflow="hidden",requestAnimationFrame(()=>{s?.classList.add("opacity-100"),s?.classList.remove("pointer-events-none"),n?.classList.add("translate-y-0"),n?.classList.remove("translate-y-full")})},m=()=>{s?.classList.remove("opacity-100"),s?.classList.add("pointer-events-none"),n?.classList.remove("translate-y-0"),n?.classList.add("translate-y-full"),document.body.style.overflow="",setTimeout(()=>{s?.classList.add("hidden"),n?.classList.add("hidden")},300)};b?.addEventListener("click",()=>{d(),r()});k?.addEventListener("click",()=>{d(),r()});I?.addEventListener("click",()=>{d(),r()});S?.addEventListener("click",m);s?.addEventListener("click",m);e?.addEventListener("input",h=>{const a=h.target.value.toLowerCase().trim();a?i?.classList.remove("hidden"):i?.classList.add("hidden"),w.forEach(v=>{const l=v,u=l.querySelector(".category-title"),y=(u&&u.textContent?.toLowerCase()||"").includes(a),E=l.querySelectorAll(".tool-item");let L=!1;E.forEach(p=>{const c=p,f=c.getAttribute("data-name")||"";y||f.includes(a)?(c.classList.remove("hidden"),c.classList.add("flex"),L=!0):(c.classList.remove("flex"),c.classList.add("hidden"))}),L?l.classList.remove("hidden"):l.classList.add("hidden")})});i?.addEventListener("click",()=>{e&&(e.value="",e.dispatchEvent(new Event("input")),e.focus())});</script> </body> </html>