1<!DOCTYPE html> 2<html lang="fr" id="html-root"> 3<head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title data-i18n="faq.page.meta.title">FAQ â Modula Extension Chrome</title> 7 <meta name="description" data-i18n-attr="content" data-i18n="faq.page.subtitle" content="Tout ce que vous devez savoir sur Modula."> 8 <link rel="icon" type="image/png" href="assets/logo.png"> 9 <link rel="canonical" href="https://modula.isyour.app/faq.html"> 10 <link rel="stylesheet" href="assets/fonts/inter.css"> 11
11<script defer src="https://cloud.umami.is/script.js" data-website-id="e99f9504-0082-4f7b-ba05-b875104ba463"></script>
11 12
12<script src="https://cdn.tailwindcss.com"></script>
12 13
13<script> 14 tailwind.config = { 15 theme: { 16 extend: { 17 fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] }, 18 colors: { 19 brand: { 20 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 21 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 22 }, 23 teal: { 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488' } 24 } 25 } 26 } 27 } 28 </script>
28 29 <style> 30 html { scroll-behavior: smooth; } 31 body { font-family: 'Inter', system-ui, sans-serif; } 32 33 .gradient-text { 34 background: linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%); 35 -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; 36 } 37 .gradient-bg { background: linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%); } 38 .glass { background: rgba(255,255,255,.75); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } 39 40 #navbar { background: rgba(255, 255, 255, .75);} 41 42 .nav-link { position: relative; } 43 .nav-link::after { 44 content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; 45 background: linear-gradient(135deg, #0ea5e9, #14b8a6); transition: width .3s ease; 46 } 47 .nav-link:hover::after { width: 100%; } 48 49 .lang-flag { 50 display: inline-flex; align-items: center; justify-content: center; 51 width: 32px; height: 24px; border-radius: 4px; 52 font-size: 16px; line-height: 1; background: transparent; 53 transition: all .2s ease; opacity: .55; border: 1px solid transparent; 54 } 55 .lang-flag:hover { opacity: .9; transform: translateY(-1px); } 56 .lang-flag.active { opacity: 1; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.12); border-color: rgba(0,0,0,.06); } 57 58 .faq-content { display: none; } 59 .faq-content.open { display: block; animation: fadeIn .25s ease; } 60 @keyframes fadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } 61 62 .faq-icon { transition: transform .3s ease; } 63 .faq-icon.rotated { transform: rotate(180deg); } 64 65 .section-label { 66 display: inline-flex; align-items: center; gap: 8px; 67 padding: 6px 14px; border-radius: 20px; 68 font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; 69 } 70 71 [data-i18n]:empty { min-height: 1em; } 72 73 code { 74 font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; 75 font-size: .85em; background: #f1f5f9; color: #0284c7; 76 padding: 1px 6px; border-radius: 4px; 77 } 78 @media (min-width: 1024px) { 79 .lg\:px-8 { 80 padding-left: 1rem !important; 81 padding-right: 1rem !important; 82 } 83 } 84 85 /* Menu déroulant « Produit » */ 86 .nav-dropdown { position: relative; } 87 .nav-dropdown-btn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; } 88 .nav-dropdown-panel { 89 position: absolute; top: 100%; left: 50%; transform: translateX(-50%); 90 padding-top: 12px; display: none; z-index: 60; 91 } 92 .nav-dropdown.open .nav-dropdown-panel { display: block; } 93 .nav-dropdown-card { 94 min-width: 236px; background: #fff; border: 1px solid rgba(15,23,42,.07); 95 border-radius: 14px; box-shadow: 0 16px 40px -12px rgba(15,23,42,.22); padding: 6px; 96 animation: navDropIn .16s cubic-bezier(.4,0,.2,1); 97 } 98 @keyframes navDropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } 99 .nav-dropdown-card a { 100 display: block; padding: 9px 12px; border-radius: 9px; text-decoration: none; 101 font-size: .875rem; font-weight: 500; color: #374151; 102 transition: background .15s ease, color .15s ease; 103 } 104 .nav-dropdown-card a:hover, .nav-dropdown-card a:focus-visible { background: #f1f5f9; color: #0f172a; outline: none; } 105 .nav-dropdown-card a[aria-current="page"] { color: #0d9488; font-weight: 600; } 106 .nav-dropdown-caret { transition: transform .2s ease; } 107 .nav-dropdown.open .nav-dropdown-caret { transform: rotate(180deg); } 108 </style> 109</head> 110<body class="bg-white text-gray-900 antialiased"> 111 112 <!-- Navigation --> 113 <nav id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300"> 114 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> 115 <div class="flex items-center justify-between h-16 lg:h-20"> 116 <a href="index.html" class="flex items-center gap-3 group" style="text-decoration:none;"> 117 <img src="assets/logo.png" alt="Modula" class="w-9 h-9 rounded-lg shadow-sm">
118 <span class="text-xl font-bold text-gray-900 tracking-tight">Modula</span> 119 </a> 120 <!-- Desktop Navigation --> 121 <div class="hidden lg:flex items-center gap-8"> 122 <!-- Produit : regroupe les sections de l'accueil + SmartMails --> 123 <div class="nav-dropdown"> 124 <button type="button" class="nav-dropdown-btn nav-link text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors inline-flex items-center gap-1.5" 125 aria-expanded="false" aria-haspopup="true" aria-controls="nav-menu-produit"> 126 <span data-i18n="nav.product">Produit</span> 127 <svg class="nav-dropdown-caret w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg> 128 </button> 129 <div class="nav-dropdown-panel" id="nav-menu-produit"> 130 <div class="nav-dropdown-card" role="menu"> 131 <a href="index.html#apercu" role="menuitem" data-i18n="showcase.label">L'interface</a> 132 <a href="index.html#fonctionnalites" role="menuitem" data-i18n="nav.features">Fonctionnalités</a> 133 <a href="smartmails.html" role="menuitem" data-i18n="nav.smartmails">SmartMails</a> 134 <a href="index.html#comment-ca-marche" role="menuitem" data-i18n="nav.howitworks">Comment ça marche</a> 135 </div> 136 </div> 137 </div> 138 <a href="index.html#tarifs" data-i18n="nav.pricing" class="nav-link text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Tarifs</a> 139 <a href="modula-vs-text-blaze.html" data-i18n="nav.compare" class="nav-link text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">vs Text Blaze</a> 140 <a href="blog/index.html" data-href-fr="blog/index.html" data-href-en="en/blog/index.html" data-href-es="es/blog/index.html" data-href-de="de/blog/index.html" data-href-pt="pt/blog/index.html" data-i18n="nav.blog" class="nav-link text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Blog</a> 141 <a href="#" data-i18n="nav.faq" class="nav-link current text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors" aria-current="page">FAQ</a> 142 </div> 143 144 <div class="hidden lg:flex items-center gap-4"> 145 <div id="lang-switcher" class="flex items-center gap-1 bg-gray-100/80 rounded-lg p-1" role="tablist" aria-label="Language"> 146 <button class="lang-flag" data-lang="fr" title="Français" aria-label="Français"><img src="./assets/france.png" width="16" height="16"></button> 147 <button class="lang-flag" data-lang="en" title="English" aria-label="English"><img src="./assets/royaume-uni.png" width="16" height="16"></button> 148 <button class="lang-flag" data-lang="es" title="Español" aria-label="Español"><img src="./assets/espagne.png" width="16" height="16"></button> 149 <button class="lang-flag" data-lang="de" title="Deutsch" aria-label="Deutsch"><img src="./assets/allemagne.png" width="16" height="16"></button> 150 <button class="lang-flag" data-lang="pt" title="Português (BR)" aria-label="Português"><img src="./assets/bresil.png" width="16" height="16"></button> 151 </div> 152 <a href="https://chromewebstore.google.com/detail/mhlidcdlhijgabbdjdllpdepjihhcomm" target="_blank" 153 class="gradient-bg text-white px-5 py-2.5 rounded-xl text-sm font-semibold hover:shadow-lg transition-all duration-300 hover:-translate-y-0.5" style="text-decoration:none;"> 154 <span data-i18n="nav.cta">Ajouter à Chrome</span> 155 <span class="opacity-70 font-normal" data-i18n="nav.cta.free">â Gratuit</span> 156 </a> 157 </div> 158 <button id="mobile-menu-btn" class="lg:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors" aria-label="Menu"> 159 <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 160 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/> 161 </svg> 162 </button> 163 </div> 164 </div> 165 <div id="mobile-menu" class="lg:hidden hidden glass border-t border-gray-200/50"> 166 <div class="px-4 py-4 space-y-3"> 167 <a href="index.html#fonctionnalites" data-i18n="nav.features" class="block px-2 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition-colors" style="text-decoration:none;">Fonctionnalités</a> 168 <a href="smartmails.html" data-i18n="nav.smartmails" class="block px-2 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition-colors" style="text-decoration:none;">SmartMails</a> 169 <a href="index.html#tarifs" data-i18n="nav.pricing" class="block px-2 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition-colors" style="text-decoration:none;">Tarifs</a> 170 <a href="modula-vs-text-blaze.html" data-i18n="nav.compare" class="block px-2 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition-colors" style="text-decoration:none;">vs Text Blaze</a> 171 <a href="blog/index.html" data-href-fr="blog/index.html" data-href-en="en/blog/index.html" data-href-es="es/blog/index.html" data-href-de="de/blog/index.html" data-href-pt="pt/blog/index.html" data-i18n="nav.blog" class="block px-2 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition-colors" style="text-decoration:none;">Blog</a> 172 <div class="flex items-center gap-2 px-2 pt-2 border-t border-gray-200/70"> 173 <button class="lang-flag" data-lang="fr" aria-label="Français">ð«ð·</button> 174 <button class="lang-flag" data-lang="en" aria-label="English">ð¬ð§</button> 175 <button class="lang-flag" data-lang="es" aria-label="Español">ðªð¸</button> 176 <button class="lang-flag" data-lang="de" aria-label="Deutsch">ð©ðª</button> 177 <button class="lang-flag" data-lang="pt" aria-label="Português">ð§ð·</button> 178 </div> 179 <a href="https://chromewebstore.google.com/detail/mhlidcdlhijgabbdjdllpdepjihhcomm" target="_blank" 180 class="block w-full text-center gradient-bg text-white px-5 py-3 rounded-xl text-sm font-semibold" style="text-decoration:none;">
181 <span data-i18n="nav.cta">Ajouter à Chrome</span> 182 <span class="opacity-70 font-normal" data-i18n="nav.cta.free">â Gratuit</span> 183 </a> 184 </div> 185 </div> 186 </nav> 187 188 <!-- Hero header --> 189 <div class="gradient-bg pt-28 lg:pt-36 pb-16 text-center px-4"> 190 <span data-i18n="faq.label" class="inline-block px-4 py-1.5 rounded-full bg-white/20 text-white text-sm font-semibold mb-5">FAQ</span> 191 <h1 class="text-3xl lg:text-5xl font-extrabold text-white tracking-tight mb-4"> 192 <span data-i18n="faq.title.1">Questions</span> 193 <span data-i18n="faq.title.2">fréquentes</span> 194 </h1> 195 <p data-i18n="faq.page.subtitle" class="text-white/80 text-lg max-w-xl mx-auto">Tout ce que vous devez savoir sur Modula.</p> 196 </div> 197 198 <!-- FAQ content --> 199 <main class="max-w-3xl mx-auto px-4 sm:px-6 py-16 pb-24"> 200 201 <!-- Section: Fonctionnement --> 202 <div class="mb-12"> 203 <div class="flex items-center gap-3 mb-6"> 204 <span class="section-label bg-brand-50 text-brand-700"> 205 <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg> 206 <span data-i18n="faq.section.how">Fonctionnement</span> 207 </span> 208 </div> 209 <div class="space-y-3"> 210 211 <div class="faq-item bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden"> 212 <button class="faq-toggle w-full flex items-center justify-between px-6 py-5 text-left hover:bg-gray-50 transition-colors"> 213 <span class="font-semibold text-gray-900 pr-4" data-i18n="faq.q2">Le Text Expander fonctionne-t-il partout ?</span> 214 <svg class="faq-icon w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg> 215 </button> 216 <div class="faq-content px-6 pb-5"><p class="text-gray-600 leading-relaxed" data-i18n="faq.a2">Oui, le Text Expander fonctionne sur tous les sites web. Il est compatible avec les champs standards, les éditeurs riches (CKEditor 4 & 5), et la plupart des applications web. Vous pouvez exclure certains sites dans les paramètres.</p></div> 217 </div> 218 219 <div class="faq-item bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden"> 220 <button class="faq-toggle w-full flex items-center justify-between px-6 py-5 text-left hover:bg-gray-50 transition-colors"> 221 <span class="font-semibold text-gray-900 pr-4" data-i18n="faq.q7">Modula fonctionne-t-il hors connexion ?</span> 222 <svg class="faq-icon w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg> 223 </button> 224 <div class="faq-content px-6 pb-5"><p class="text-gray-600 leading-relaxed" data-i18n="faq.a7">Oui, entièrement. Toutes vos données sont stockées localement et Modula fonctionne sans connexion. Seule la vérification de votre clé de licence nécessite internet.</p></div> 225 </div> 226 227 <div class="faq-item bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden"> 228 <button class="faq-toggle w-full flex items-center justify-between px-6 py-5 text-left hover:bg-gray-50 transition-colors"> 229 <span class="font-semibold text-gray-900 pr-4" data-i18n="faq.q12">Modula est-il compatible avec d'autres navigateurs que Chrome ?</span> 230 <svg class="faq-icon w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg> 231 </button> 232 <div class="faq-content px-6 pb-5"><p class="text-gray-600 leading-relaxed" data-i18n="faq.a12">Modula est une extension Chrome (Manifest V3). Il fonctionne sur <strong>Google Chrome, Microsoft Edge, Brave et tous les navigateurs basés sur Chromium</strong>. Il n'est pas disponible sur Firefox ou Safari.</p></div> 233 </div> 234 235 <div class="faq-item bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden"> 236 <button class="faq-toggle w-full flex items-center justify-between px-6 py-5 text-left hover:bg-gray-50 transition-colors">
237 <span class="font-semibold text-gray-900 pr-4" data-i18n="faq.q14">En quoi Modula diffère-t-il de Text Blaze ?</span> 238 <svg class="faq-icon w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg> 239 </button> 240 <div class="faq-content px-6 pb-5"><p class="text-gray-600 leading-relaxed" data-i18n="faq.a14">Text Blaze héberge vos snippets sur ses serveurs et impose la création d'un compte. Modula garde tout dans votre navigateur : aucun compte, aucun serveur, aucune télémétrie. Modula ajoute aussi les <strong>SmartMails</strong> (To, Cc, Objet, corps) qu'aucun autre text expander ne propose, pour 9,99 â¬/an au lieu d'un abonnement mensuel. En contrepartie, Text Blaze propose la logique conditionnelle, les formules et l'IA intégrée, que Modula n'a pas. <a href="modula-vs-text-blaze.html" style="color:#0d9488;font-weight:600;">Voir le comparatif détaillé</a>.</p></div> 241 </div> 242 243 </div> 244 </div> 245 246 <!-- Section: Version gratuite & licences --> 247 <div class="mb-12"> 248 <div class="flex items-center gap-3 mb-6"> 249 <span class="section-label bg-teal-50 text-teal-700"> 250 <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> 251 <span data-i18n="faq.section.pricing">Version gratuite & licences</span> 252 </span> 253 </div> 254 <div class="space-y-3"> 255 256 <div class="faq-item bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden"> 257 <button class="faq-toggle w-full flex items-center justify-between px-6 py-5 text-left hover:bg-gray-50 transition-colors"> 258 <span class="font-semibold text-gray-900 pr-4" data-i18n="faq.q8">Que comprend la version gratuite ?</span> 259 <svg class="faq-icon w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg> 260 </button> 261 <div class="faq-content px-6 pb-5"><p class="text-gray-600 leading-relaxed" data-i18n="faq.a8">La version gratuite comprend jusqu'à <strong>20 SmartTexts</strong>, <strong>5 SmartMails</strong> et <strong>3 dossiers</strong>. Tous les outils sont accessibles : Text Expander, M-Panel, M-Search, M-Menu et M-Bar. L'export de vos données est inclus sans restriction.</p></div> 262 </div> 263 264 <div class="faq-item bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden"> 265 <button class="faq-toggle w-full flex items-center justify-between px-6 py-5 text-left hover:bg-gray-50 transition-colors"> 266 <span class="font-semibold text-gray-900 pr-4" data-i18n="faq.q4">Comment fonctionne le paiement ?</span> 267 <svg class="faq-icon w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg> 268 </button> 269 <div class="faq-content px-6 pb-5"><p class="text-gray-600 leading-relaxed" data-i18n="faq.a4">Pro (9,99â¬/an) est une <strong>licence annuelle</strong> par utilisateur. Aucun renouvellement automatique. Vous gardez le contrôle sur les paiements. La version gratuite reste accessible sans limite de durée.</p></div> 270 </div> 271 272 <div class="faq-item bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden"> 273 <button class="faq-toggle w-full flex items-center justify-between px-6 py-5 text-left hover:bg-gray-50 transition-colors"> 274 <span class="font-semibold text-gray-900 pr-4" data-i18n="faq.q9">Que se passe-t-il à la fin de la période d'essai Pro ?</span> 275 <svg class="faq-icon w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg> 276 </button> 277 <div class="faq-content px-6 pb-5"><p class="text-gray-600 leading-relaxed" data-i18n="faq.a9">à la fin des 14 jours d'essai, vos contenus sont <strong>entièrement préservés</strong>
277 et restent modifiables. Vous pouvez toujours exporter vos données. Seules les fonctionnalités Pro sont désactivées : création de nouveaux éléments au-delà des limites, import depuis un autre outil et restrictions par site.</p></div> 278 </div> 279 280 <div class="faq-item bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden"> 281 <button class="faq-toggle w-full flex items-center justify-between px-6 py-5 text-left hover:bg-gray-50 transition-colors"> 282 <span class="font-semibold text-gray-900 pr-4" data-i18n="faq.q10">Comment activer ma licence Pro ?</span> 283 <svg class="faq-icon w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg> 284 </button> 285 <div class="faq-content px-6 pb-5"><p class="text-gray-600 leading-relaxed" data-i18n="faq.a10">Après votre achat, vous recevez une <strong>clé de licence</strong> par e-mail. Ouvrez les options de Modula, rendez-vous dans l'onglet <em>Licence</em> et saisissez votre clé. L'activation est instantanée et fonctionne hors connexion.</p></div> 286 </div> 287 288 <div class="faq-item bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden"> 289 <button class="faq-toggle w-full flex items-center justify-between px-6 py-5 text-left hover:bg-gray-50 transition-colors"> 290 <span class="font-semibold text-gray-900 pr-4" data-i18n="faq.q11">Puis-je utiliser Modula sur plusieurs appareils ?</span> 291 <svg class="faq-icon w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg> 292 </button> 293 <div class="faq-content px-6 pb-5"><p class="text-gray-600 leading-relaxed" data-i18n="faq.a11">Oui, une licence Pro couvre <strong>tous vos appareils</strong> connectés au même profil Chrome. Votre bibliothèque locale suit votre profil Chrome. Pour la reprendre sur un autre profil, exportez-la puis importez le fichier.</p></div> 294 </div> 295 296 </div> 297 </div> 298 299 <!-- Section: Données & confidentialité --> 300 <div class="mb-12"> 301 <div class="flex items-center gap-3 mb-6"> 302 <span class="section-label bg-green-50 text-green-700"> 303 <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg> 304 <span data-i18n="faq.section.data">Données & confidentialité</span> 305 </span> 306 </div> 307 <div class="space-y-3"> 308 309 <div class="faq-item bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden"> 310 <button class="faq-toggle w-full flex items-center justify-between px-6 py-5 text-left hover:bg-gray-50 transition-colors"> 311 <span class="font-semibold text-gray-900 pr-4" data-i18n="faq.q1">Mes données sont-elles en sécurité ?</span> 312 <svg class="faq-icon w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg> 313 </button> 314 <div class="faq-content px-6 pb-5"><p class="text-gray-600 leading-relaxed [&_code]:text-xs [&_code]:bg-gray-100 [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded" data-i18n="faq.a1">Absolument. Toutes vos données sont stockées localement dans votre navigateur via <code>chrome.storage.local</code>. Aucun serveur externe, aucun compte requis, aucune télémétrie. Vous êtes le seul propriétaire de vos contenus.</p></div> 315 </div> 316 317 </div> 318 </div> 319 320 <!-- Section: Personnalisation --> 321 <div class="mb-12"> 322 <div class="flex items-center gap-3 mb-6"> 323 <span class="section-label bg-purple-50 text-purple-700"> 324 <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
324<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> 325 <span data-i18n="faq.section.custom">Personnalisation</span> 326 </span> 327 </div> 328 <div class="space-y-3"> 329 330 <div class="faq-item bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden"> 331 <button class="faq-toggle w-full flex items-center justify-between px-6 py-5 text-left hover:bg-gray-50 transition-colors"> 332 <span class="font-semibold text-gray-900 pr-4" data-i18n="faq.q6">Quels champs dynamiques sont disponibles ?</span> 333 <svg class="faq-icon w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg> 334 </button> 335 <div class="faq-content px-6 pb-5"><p class="text-gray-600 leading-relaxed [&_code]:text-xs [&_code]:bg-gray-100 [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded" data-i18n="faq.a6">Champs dynamiques : <code>{{date}}</code>, <code>{{time}}</code>, <code>{{date-time}}</code>, <code>{{selection}}</code> (texte sélectionné), <code>{{clipboard}}</code> (contenu du presse papier), <code>{{text}}</code> (champ texte), <code>{{options}}</code> (liste déroulante). Ces champs personnalisables déclenchent une saisie automatique ou manuelle à l'insertion.</p></div> 336 </div> 337 338 <div class="faq-item bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden"> 339 <button class="faq-toggle w-full flex items-center justify-between px-6 py-5 text-left hover:bg-gray-50 transition-colors"> 340 <span class="font-semibold text-gray-900 pr-4" data-i18n="faq.q13">Puis-je importer des contenus depuis un autre outil ?</span> 341 <svg class="faq-icon w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg> 342 </button> 343 <div class="faq-content px-6 pb-5"><p class="text-gray-600 leading-relaxed" data-i18n="faq.a13">Oui, via l'import JSON (fonctionnalité Pro). Exportez depuis votre outil actuel, puis importez. L'assistant intégré de Modula vous guide pas à pas. Vous pouvez même convertir les champs ou variables dans vos contenus.</p></div> 344 </div> 345 346 <div class="faq-item bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden"> 347 <button class="faq-toggle w-full flex items-center justify-between px-6 py-5 text-left hover:bg-gray-50 transition-colors"> 348 <span class="font-semibold text-gray-900 pr-4" data-i18n="faq.q15">Puis-je importer mes snippets Text Blaze ?</span> 349 <svg class="faq-icon w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg> 350 </button> 351 <div class="faq-content px-6 pb-5"><p class="text-gray-600 leading-relaxed" data-i18n="faq.a15">Oui. Exportez votre bibliothèque depuis Text Blaze, puis utilisez l'import JSON de Modula (fonctionnalité Pro) : l'assistant intégré convertit les champs et variables, et dédoublonne automatiquement. Comptez environ deux minutes.</p></div> 352 </div> 353 354 </div> 355 </div> 356 <div class="mb-12"> 357 358 </main> 359 360 <!-- CTA --> 361 <section class="py-20 lg:py-28 relative overflow-hidden"> 362 <div class="absolute inset-0 gradient-bg"></div> 363 <div class="absolute inset-0 opacity-10"> 364 <div class="absolute top-0 left-0 w-full h-full" style="background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0); background-size: 40px 40px;"></div> 365 </div> 366 <div class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> 367 <h2 data-i18n="cta.title" class="text-3xl lg:text-5xl font-extrabold text-white mb-6 tracking-tight">
367Prêt à gagner du temps au quotidien ?</h2> 368 <p data-i18n="cta.subtitle" class="text-xl text-white/80 mb-10 max-w-2xl mx-auto">Rejoignez les professionnels qui utilisent Modula pour automatiser leur rédaction. Installation en 30 secondes.</p> 369 <div class="flex flex-col sm:flex-row gap-4 justify-center"> 370 <a href="https://chromewebstore.google.com/detail/mhlidcdlhijgabbdjdllpdepjihhcomm" target="_blank" 371 class="inline-flex items-center justify-center gap-3 bg-white text-brand-700 px-8 py-4 rounded-2xl text-base font-bold hover:shadow-xl transition-all duration-300 hover:-translate-y-1" style="text-decoration:none;"> 372 <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polygon points="10,8 16,12 10,16"/></svg> 373 <span data-i18n="cta.primary">Ajouter à Chrome â Gratuit</span> 374 </a> 375 <a href="index.html#tarifs" data-i18n="cta.secondary" 376 class="inline-flex items-center justify-center bg-white/10 text-white border border-white/30 px-8 py-4 rounded-2xl text-base font-semibold hover:bg-white/20 transition-all duration-300" style="text-decoration:none;">Voir les tarifs</a> 377 </div> 378 <div class="mt-8 flex flex-wrap items-center justify-center gap-4 text-white/70 text-sm"> 379 <span class="flex items-center gap-2"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg><span data-i18n="cta.badge1">Gratuit pour commencer</span></span> 380 <span class="flex items-center gap-2"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg><span data-i18n="cta.badge2">Sans carte bancaire</span></span> 381 <span class="flex items-center gap-2"><svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg><span data-i18n="cta.badge4">Sans engagement</span></span> 382 </div> 383 </div> 384 </section> 385 386 <!-- Footer --> 387 <footer class="bg-gray-900 text-gray-400 py-8 text-center text-sm"> 388 <div class="flex flex-col sm:flex-row items-center justify-center gap-4"> 389 <span data-i18n="footer.copyright">© 2026 Modula. Tous droits réservés.</span> 390 <span class="hidden sm:inline text-gray-700">·</span> 391 <div class="flex items-center gap-4"> 392 <a href="blog/index.html" data-href-fr="blog/index.html" data-href-en="en/blog/index.html" data-href-es="es/blog/index.html" data-href-de="de/blog/index.html" data-href-pt="pt/blog/index.html" data-i18n="footer.link.blog" class="hover:text-white transition-colors" style="text-decoration:none;">Blog</a> 393 <a href="smartmails.html" data-i18n="footer.link.smartmails" class="hover:text-white transition-colors" style="text-decoration:none;">SmartMails</a> 394 <a href="./privacy-policy/index.html" data-i18n="footer.link.privacy" class="hover:text-white transition-colors" style="text-decoration:none;">Politique de confidentialité</a> 395 <a href="index.html#fonctionnalites" data-i18n="nav.features" class="hover:text-white transition-colors" style="text-decoration:none;">Fonctionnalités</a> 396 <a href="index.html#tarifs" data-i18n="nav.pricing" class="hover:text-white transition-colors" style="text-decoration:none;">Tarifs</a> 397 </div> 398 </div> 399 </footer> 400 401
401<script src="i18n.js?v=25719088a1"></script>
401 402
402<script> 403 // ââ i18n ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 404 const SUPPORTED_LANGS = ['fr', 'en', 'es', 'de', 'pt']; 405 406 function detectLang() { 407 const saved = localStorage.getItem('modula-lang'); 408 if (saved && SUPPORTED_LANGS.includes(saved)) return saved; 409 const nav = (navigator.language || navigator.userLanguage || 'en').toLowerCase(); 410 if (nav.startsWith('fr')) return 'fr'; 411 if (nav.startsWith('es')) return 'es'; 412 if (nav.startsWith('de')) return 'de'; 413 if (nav.startsWith('pt')) return 'pt'; 414 return 'en'; 415 } 416 417 let currentLang = detectLang(); 418 419 function applyTranslations(lang) { 420 // Liens vers le blog et ses articles : version dans la langue active 421 document.querySelectorAll('[data-href-fr]').forEach(el => { 422 el.setAttribute('href', el.getAttribute('data-href-' + lang) || el.getAttribute('data-href-fr')); 423 }); 424 const t = (window.MODULA_I18N && window.MODULA_I18N[lang]) || window.MODULA_I18N.en; 425 document.querySelectorAll('[data-i18n]').forEach(el => { 426 const key = el.getAttribute('data-i18n'); 427 if (t[key] === undefined) return; 428 const attr = el.getAttribute('data-i18n-attr'); 429 if (attr) el.setAttribute(attr, t[key]); 430 else el.innerHTML = t[key]; 431 }); 432 document.getElementById('html-root').setAttribute('lang', lang); 433 if (t['faq.page.meta.title']) document.title = t['faq.page.meta.title']; 434 document.querySelectorAll('.lang-flag').forEach(btn => { 435 btn.classList.toggle('active', btn.getAttribute('data-lang') === lang); 436 }); 437 } 438 439 function setLang(lang) { 440 if (!SUPPORTED_LANGS.includes(lang)) return; 441 currentLang = lang; 442 localStorage.setItem('modula-lang', lang); 443 applyTranslations(lang); 444 const mm = document.getElementById('mobile-menu'); 445 if (mm) mm.classList.add('hidden'); 446 } 447 448 document.querySelectorAll('.lang-flag').forEach(btn => { 449 btn.addEventListener('click', () => setLang(btn.getAttribute('data-lang'))); 450 }); 451 452 applyTranslations(currentLang); 453 454 // ââ Navbar scroll ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 455 const navbar = document.getElementById('navbar'); 456 window.addEventListener('scroll', () => { 457 if (window.scrollY > 20) navbar.classList.add('glass', 'shadow-sm', 'border-b', 'border-gray-200/50'); 458 else navbar.classList.remove('glass', 'shadow-sm', 'border-b', 'border-gray-200/50'); 459 }); 460 461 // ââ Mobile menu ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 462 document.getElementById('mobile-menu-btn').addEventListener('click', () => { 463 document.getElementById('mobile-menu').classList.toggle('hidden'); 464 }); 465 466 // ââ FAQ accordion ââââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 467 document.querySelectorAll('.faq-toggle').forEach(button => { 468 button.addEventListener('click', () => { 469 const item = button.closest('.faq-item'); 470 const content = item.querySelector('.faq-content'); 471 const icon = button.querySelector('.faq-icon'); 472 const isOpen = content.classList.contains('open'); 473 474 // Close all 475 document.querySelectorAll('.faq-content').forEach(c => c.classList.remove('open')); 476 document.querySelectorAll('.faq-icon').forEach(i => i.classList.remove('rotated')); 477 478 // Toggle clicked 479 if (!isOpen) { 480 content.classList.add('open'); 481 icon.classList.add('rotated'); 482 } 483 }); 484 }); 485 486 // ââ Menu déroulant « Produit » âââââââââââââââââââââââââââââââââââââââââ 487 document.querySelectorAll('.nav-dropdown').forEach(dd => { 488 const btn = dd.querySelector('.nav-dropdown-btn'); 489 const items = Array.from(dd.querySelectorAll('.nav-dropdown-card a')); 490 let closeTimer; 491 const open = () => { 492 clearTimeout(closeTimer); 493 dd.classList.add('open'); 494 btn.setAttribute('aria-expanded', 'true'); 495 }; 496 const close = () => { 497 dd.classList.remove('open'); 498 btn.setAttribute('aria-expanded', 'false'); 499 }; 500 dd.addEventListener('mouseenter', open); 501 dd.addEventListener('mouseleave', () => { closeTimer = setTimeout(close, 140); }); 502 btn.addEventListener('click', e => { 503 e.preventDefault(); 504 dd.classList.contains('open') ? close() : open(); 505 }); 506 btn.addEventListener('keydown', e => { 507 if (e.key === 'ArrowDown') { e.preventDefault(); open(); if (items[0]) items[0].focus(); } 508 }); 509 dd.addEventListener('keydown', e => { 510 if (e.key === 'Escape') { close(); btn.focus(); } 511 }); 512 // Refermer apres un clic : sur l'accueil les liens sont des ancres, la page ne change pas.
513 items.forEach(a => a.addEventListener('click', close)); 514 dd.addEventListener('focusout', e => { 515 if (!dd.contains(e.relatedTarget)) close(); 516 }); 517 document.addEventListener('click', e => { if (!dd.contains(e.target)) close(); }); 518 }); 519 </script>
519 520</body> 521</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.