PageSourceSearch

https://modula.isyour.app/faq.html

html isyour.app collected 2026-10-02 01:13:53 UTC 39,033 bytes, 521 lines download raw bytes

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.