PageSourceSearch

https://divertis.net/

html divertis.net collected 2026-10-07 01:03:19 UTC 33,410 bytes, 517 lines download raw bytes

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>DIVERTIS OÜ — Reprenez le contrôle</title>
7<link rel="icon" type="image/png" href="assets/logo-divertis.png">
8<link rel="preconnect" href="https://fonts.googleapis.com">
9<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,500&family=Instrument+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
11<style>
12  :root{
13    --ink:#15110A;
14    --navy:#231C10;
15    --navy-light:#2F2718;
16    --navy-hair:#4A3B22;
17    --parchment:#F1EAD8;
18    --ivory:#EFE6D2;
19    --muted:#A9987A;
20    --brass:#CCA300;
21    --brass-soft:#EAC94A;
22    --croissance:#7FB069;
23    --croissance-soft:#AFDC9B;
24    --detective:#7562D9;
25    --detective-soft:#AA9BEE;
26    --display: 'Fraunces', serif;
27    --body: 'Instrument Sans', sans-serif;
28    --mono: 'IBM Plex Mono', monospace;
29  }
30
31  *{margin:0;padding:0;box-sizing:border-box;}
32  html{scroll-behavior:smooth;}
33  body{background:var(--navy);color:var(--ivory);font-family:var(--body);line-height:1.5;overflow-x:hidden;}
34  a{color:inherit;text-decoration:none;}
35  img,svg{display:block;max-width:100%;}
36  .wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
37  ::selection{background:var(--brass);color:var(--ink);}
38  :focus-visible{outline:2px solid var(--brass-soft);outline-offset:3px;border-radius:2px;}
39
40  /* ---------- HEADER ---------- */
41  header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(21,17,10,0.72);backdrop-filter:blur(10px);border-bottom:1px solid rgba(204,163,0,0.18);}
42  .header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;max-width:1180px;margin:0 auto;}
43  .logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:0.03em;}
44  .logo-mark{width:30px;height:30px;flex-shrink:0;border-radius:8px;overflow:hidden;}
45  .logo-mark img{width:100%;height:100%;object-fit:cover;display:block;}
46  nav{display:flex;align-items:center;gap:32px;}
47  nav ul{list-style:none;display:flex;gap:28px;}
48  nav a{font-size:0.88rem;color:var(--muted);transition:color .25s ease;letter-spacing:0.01em;}
49  nav a:hover{color:var(--ivory);}
50  nav a.nav-secondary{opacity:0.75;}
51  .lang-toggle{font-family:var(--mono);font-size:0.78rem;letter-spacing:0.06em;border:1px solid var(--navy-hair);background:transparent;color:var(--brass-soft);padding:7px 13px;border-radius:999px;cursor:pointer;transition:border-color .25s ease, background .25s ease;}
52  .lang-toggle:hover{border-color:var(--brass);background:rgba(204,163,0,0.1);}
53
54  /* ---------- HERO ---------- */
55  .hero{position:relative;padding:158px 32px 96px;display:flex;justify-content:center;overflow:hidden;}
56  .hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 900px 600px at 82% -10%, rgba(204,163,0,0.16), transparent 60%),radial-gradient(ellipse 700px 500px at -10% 100%, rgba(117,98,217,0.12), transparent 60%);pointer-events:none;}
57  .sun-bg{position:absolute;right:-180px;top:50%;transform:translateY(-50%);width:820px;height:820px;opacity:0.5;pointer-events:none;}
58  .sun-bg .sun-spin{transform-origin:200px 200px;animation:sun-rotate 90s linear infinite;}
59  @keyframes sun-rotate{to{transform:rotate(360deg);}}
60  .hero-inner{position:relative;max-width:1180px;width:100%;z-index:2;}
61  .hero-content{max-width:640px;}
62  .eyebrow{font-family:var(--mono);font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--brass-soft);display:flex;align-items:center;gap:10px;margin-bottom:26px;}
63  .eyebrow::before{content:"";width:22px;height:1px;background:var(--brass-soft);display:inline-block;}
64  h1{font-family:var(--display);font-weight:600;font-size:clamp(2.4rem, 5.2vw, 4rem);line-height:1.08;letter-spacing:-0.01em;margin-bottom:24px;}
65  .hero-sub{font-size:1.08rem;color:var(--muted);max-width:540px;margin-bottom:36px;}
66  .cta-row{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:28px;}
67  .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;font-size:0.92rem;font-weight:600;transition:transform .25s ease, box-shadow .25s ease, background .25s ease;}
68  .btn-croissance{background:var(--croissance);color:var(--ink);}
69  .btn-croissance:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(127,176,105,0.5);}
70  .btn-detective{background:var(--detective);color:#fff;}
71  .btn-detective:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(117,98,217,0.5);}
72  .hero-aside{font-family:var(--mono);font-size:0.8rem;color:var(--muted);}
73  .hero-aside a{color:var(--brass-soft);border-bottom:1px solid rgba(234,201,74,0.35);transition:border-color .25s ease;}
74  .hero-aside a:hover{border-color:var(--brass-soft);}
75
76  /* ---------- SECTION GENERIC ---------- */
77  section{position:relative;padding:100px 0;}
78  .section-head{max-width:640px;margin-bottom:56px;}
79  .section-head h2{font-family:var(--display);font-weight:600;font-size:clamp(1.8rem, 3.4vw, 2.6rem);line-height:1.15;margin-top:16px;}
80  .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease;}
81  .reveal.visible{opacity:1;transform:translateY(0);}
82  @media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none;}*{animation:none !important;}}
83
84  /* ---------- INTRO BAND (ex-philosophy, condensed) ---------- */
85  .intro-band{padding:56px 0 8px;}
86  .intro-band .wrap{text-align:center;max-width:720px;}
87  .intro-band h2{font-family:var(--display);font-weight:600;font-size:clamp(1.7rem,3.4vw,2.3rem);margin:14px 0 10px;}
88  .intro-band p{color:var(--muted);font-size:1rem;max-width:560px;margin:0 auto;}
89  .intro-band .eyebrow{justify-content:center;}
90  .intro-band .eyebrow::before{display:none;}
91
92  /* ---------- APP SECTION ---------- */
93  .app-section{overflow:hidden;}
94  .app-section.croissance-bg{background:var(--navy);}
95  .app-section.detective-bg{background:var(--ink);}
96  .app-section .wrap{position:relative;z-index:2;}
97
98  .app-head{display:flex;align-items:center;gap:20px;margin-bottom:22px;}
99  .app-icon-lg{width:64px;height:64px;border-radius:16px;overflow:hidden;flex-shrink:0;box-shadow:0 10px 30px -10px rgba(0,0,0,0.6);}
100  .app-icon-lg img{width:100%;height:100%;object-fit:cover;}
101  .app-name{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:0.01em;}
102  .app-section.croissance-bg .app-name{color:var(--croissance-soft);}
103  .app-section.detective-bg .app-name{color:var(--detective-soft);}
104
105  .app-eyebrow{font-family:var(--mono);font-size:0.76rem;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:16px;}
106  .app-section.croissance-bg .app-eyebrow{color:var(--croissance-soft);}
107  .app-section.detective-bg .app-eyebrow{color:var(--detective-soft);}
108
109  .app-tagline{font-family:var(--display);font-style:italic;font-weight:500;font-size:1.3rem;color:var(--ivory);max-width:640px;margin-bottom:18px;}
110  .app-universe{color:var(--muted);font-size:1.03rem;max-width:620px;margin-bottom:44px;}
111
112  .value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:52px;}
113  .value-item{border-top:1px solid var(--navy-hair);padding-top:16px;}
114  .value-num{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.08em;}
115  .app-section.croissance-bg .value-num{color:var(--croissance-soft);}
116  .app-section.detective-bg .value-num{color:var(--detective-soft);}
117  .value-label{font-family:var(--display);font-weight:700;font-size:1.35rem;color:var(--ivory);margin:6px 0 6px;}
118  .value-text{color:var(--muted);font-size:0.9rem;}
119
120  .how-block{margin-bottom:48px;}
121  .how-title{font-family:var(--mono);font-size:0.74rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-bottom:22px;}
122  .how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
123  .how-step{display:flex;gap:14px;align-items:flex-start;}
124  .how-step-num{font-family:var(--display);font-weight:700;font-size:1.6rem;flex-shrink:0;opacity:0.5;}
125  .app-section.croissance-bg .how-step-num{color:var(--croissance-soft);}
126  .app-section.detective-bg .how-step-num{color:var(--detective-soft);}
127  .how-step-title{font-weight:600;color:var(--ivory);font-size:0.98rem;margin-bottom:4px;}
128  .how-step-text{color:var(--muted);font-size:0.88rem;}
129
130  .download-block{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-top:32px;border-top:1px solid var(--navy-hair);}
131  .download-label{font-family:var(--mono);font-size:0.76rem;color:var(--muted);letter-spacing:0.03em;}
132  .store-badges{display:flex;gap:12px;flex-wrap:wrap;}
133  .store-badge{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:10px;border:1px solid var(--navy-hair);font-size:0.86rem;color:var(--ivory);background:rgba(255,255,255,0.02);}
134  .store-badge svg{width:16px;height:16px;flex-shrink:0;}
135  .store-badge .store-lines{display:flex;flex-direction:column;line-height:1.15;}
136  .store-badge .store-sub{font-size:0.62rem;color:var(--muted);letter-spacing:0.04em;text-transform:uppercase;}
137  .store-badge .store-main{font-weight:600;}
138
139  /* ---------- BOOKS (secondary, compact) ---------- */
140  .books-mini{background:var(--ink);padding:76px 0;}
141  .books-mini .section-head{margin-bottom:36px;}
142  .books-mini .section-head h2{font-size:clamp(1.4rem,2.4vw,1.8rem);}
143  .books-mini .eyebrow{color:var(--muted);}
144  .books-mini .eyebrow::before{background:var(--muted);}
145  .books-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
146  .book-mini{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:14px;border:1px solid var(--navy-hair);transition:border-color .25s ease, transform .25s ease;}
147  .book-mini:hover{border-color:var(--brass-soft);transform:translateY(-3px);}
148  .book-mini-cover{width:56px;height:84px;border-radius:5px;overflow:hidden;flex-shrink:0;background:linear-gradient(165deg,#3D2C0A,var(--ink) 75%);}
149  .book-mini-cover img{width:100%;height:100%;object-fit:cover;}
150  .book-mini-title{font-family:var(--display);font-weight:700;font-size:0.98rem;color:var(--ivory);line-height:1.2;margin-bottom:4px;}
151  .book-mini-hook{font-family:var(--display);font-style:italic;color:var(--muted);font-size:0.84rem;margin-bottom:8px;}
152  .book-mini-buy{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.04em;color:var(--brass-soft);}
153  .book-mini-buy:hover{text-decoration:underline;}
154
155  /* ---------- FOOTER ---------- */
156  footer{background:var(--ink);border-top:1px solid var(--navy-hair);padding:70px 0 36px;}
157  .footer-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:56px;}
158  .footer-brand .logo{margin-bottom:16px;}
159  .footer-tag{color:var(--muted);font-size:0.94rem;max-width:280px;}
160  .footer-cols{display:flex;gap:64px;flex-wrap:wrap;}
161  .footer-col h4{font-family:var(--mono);font-size:0.74rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--brass-soft);margin-bottom:16px;}
162  .footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
163  .footer-col a{color:var(--muted);font-size:0.92rem;transition:color .25s ease;}
164  .footer-col a:hover{color:var(--ivory);}
165  .footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:26px;border-top:1px solid var(--navy-hair);font-family:var(--mono);font-size:0.76rem;color:var(--muted);}
166
167  /* ---------- RESPONSIVE ---------- */
168  @media (max-width: 880px){
169    nav ul{display:none;}
170    .sun-bg{opacity:0.3;width:560px;height:560px;right:-220px;}
171    .value-grid{grid-template-columns:1fr;gap:20px;}
172    .how-steps{grid-template-columns:1fr;gap:18px;}
173    .books-row{grid-template-columns:1fr;}
174    .footer-grid{flex-direction:column;}
175  }
176  @media (max-width: 520px){
177    .hero{padding-top:132px;}
178    .header-inner{padding:14px 20px;}
179    .wrap, section .wrap{padding:0 20px;}
180    .app-head{flex-wrap:wrap;}
181  }
182</style>
183</head>
184<body>
185
186<header>
187  <div class="header-inner wrap" style="padding-left:0;padding-right:0;">
188    <div class="logo">
189      <span class="logo-mark"><img src="assets/logo-divertis.png" alt="Logo DIVERTIS OÜ"></span>
190      DIVERTIS
191    </div>
192    <nav>
193      <ul>
194        <li><a href="#fraud-detective">FRAUD DETECTIVE</a></li>
195        <li><a href="#croissance">CROISSANCE</a></li>
196        <li><a href="#books" class="nav-secondary i18n" data-fr="Livres" data-en="Books">Livres</a></li>
197        <li><a href="#contact" class="i18n" data-fr="Contact" data-en="Contact">Contact</a></li>
198      </ul>
199      <button class="lang-toggle" id="langToggle" aria-label="Switch language">EN</button>
200    </nav>
201  </div>
202</header>
203
204<section class="hero">
205  <svg class="sun-bg" viewBox="0 0 400 400" fill="none">
206    <circle cx="200" cy="200" r="140" stroke="#CCA300" stroke-width="1.4" opacity="0.55"/>
207    <g class="sun-spin" fill="#CCA300" opacity="0.6">
208      <path d="M192.2 60.2 L200.0 5.0 L207.8 60.2 Z"/>
209      <path d="M339.8 192.2 L395.0 200.0 L339.8 207.8 Z"/>
210      <path d="M207.8 339.8 L200.0 395.0 L192.2 339.8 Z"/>
211      <path d="M60.2 207.8 L5.0 200.0 L60.2 192.2 Z"/>
212      <path d="M294.8 96.9 L318.8 81.2 L303.1 105.2 Z"/>
213      <path d="M303.1 294.8 L318.8 318.8 L294.8 303.1 Z"/>
214      <path d="M105.2 303.1 L81.2 318.8 L96.9 294.8 Z"/>
215      <path d="M96.9 105.2 L81.2 81.2 L105.2 96.9 Z"/>
216      <circle cx="153.0" cy="55.4" r="5"/>
217      <circle cx="247.0" cy="55.4" r="5"/>
218      <circle cx="344.6" cy="153.0" r="5"/>
219      <circle cx="344.6" cy="247.0" r="5"/>
220      <circle cx="247.0" cy="344.6" r="5"/>
221      <circle cx="153.0" cy="344.6" r="5"/>
222      <circle cx="55.4" cy="247.0" r="5"/>
223      <circle cx="55.4" cy="153.0" r="5"/>
224    </g>
225    <circle cx="200" cy="200" r="2" fill="#CCA300" opacity="0.7"/>
226  </svg>
227
228  <div class="hero-inner">
229    <div class="hero-content">
230      <div class="eyebrow i18n" data-fr="Le divertissement qui vous rend plus fort" data-en="Entertainment that makes you stronger">Le divertissement qui vous rend plus fort</div>
231      <h1 class="i18n" data-fr="Reprenez le contrôle. En vous amusant." data-en="Take back control. While having fun.">Reprenez le contrôle. En vous amusant.</h1>
232      <p class="hero-sub i18n" data-fr="Deux applications pour déjouer les fraudes du quotidien et reprendre le pouvoir sur votre vie intérieure." data-en="Two apps to outsmart everyday scams and take back the power over your inner life.">Deux applications pour déjouer les fraudes du quotidien et reprendre le pouvoir sur votre vie intérieure.</p>
233      <div class="cta-row">
234        <a href="#fraud-detective" class="btn btn-detective i18n" data-fr="Découvrir FRAUD DETECTIVE" data-en="Discover FRAUD DETECTIVE">Découvrir FRAUD DETECTIVE</a>
235        <a href="#croissance" class="btn btn-croissance i18n" data-fr="Découvrir CROISSANCE" data-en="Discover CROISSANCE">Découvrir CROISSANCE</a>
236      </div>
237      <div class="hero-aside i18n" data-fr='Vous cherchez plutôt nos romans ? <a href="#books" style="color:inherit">Par ici →</a>' data-en='Looking for our novels instead? <a href="#books" style="color:inherit">This way →</a>'>Vous cherchez plutôt nos romans ? <a href="#books" style="color:var(--brass-soft);border-bottom:1px solid rgba(234,201,74,0.35)">Par ici →</a></div>
238    </div>
239  </div>
240</section>
241
242<section class="intro-band">
243  <div class="wrap reveal">
244    <div class="eyebrow i18n" data-fr="Rayonner" data-en="Shine">Rayonner</div>
245    <h2 class="i18n" data-fr="Ne plus perdre le contrôle." data-en="Stop losing control.">Ne plus perdre le contrôle.</h2>
246    <p class="i18n" data-fr="Entre les arnaques qui se multiplient et le tumulte intérieur, on subit plus qu'on ne choisit. Deux applications, deux réponses." data-en="Between multiplying scams and inner chaos, we react more than we choose. Two apps, two answers.">Entre les arnaques qui se multiplient et le tumulte intérieur, on subit plus qu'on ne choisit. Deux applications, deux réponses.</p>
247  </div>
248</section>
249
250<!-- ================= FRAUD DETECTIVE ================= -->
251<section class="app-section detective-bg" id="fraud-detective">
252  <div class="wrap">
253    <div class="app-eyebrow i18n reveal" data-fr="Univers 01 · Protection & vigilance" data-en="World 01 · Protection & vigilance">Univers 01 · Protection &amp; vigilance</div>
254    <div class="app-head reveal">
255      <div class="app-icon-lg"><img src="assets/logo-fraud-detective.png" alt="Logo FRAUD DETECTIVE"></div>
256      <div class="app-name">FRAUD DETECTIVE</div>
257    </div>
258    <p class="app-tagline i18n reveal" data-fr="Menez l'enquête avant de vous faire piéger." data-en="Investigate before you get caught out.">Menez l'enquête avant de vous faire piéger.</p>
259    <p class="app-universe i18n reveal" data-fr="Un appel, un email, un SMS douteux ? Enfilez le trench-coat du détective : répondez à un interrogatoire à questions fermées et obtenez, en 2 minutes, un score de suspicion et les démarches exactes à suivre — classées dans votre propre dossier d'enquêteur." data-en="A shady call, email or text? Put on the detective's trench coat: answer a closed-question interrogation and get, in 2 minutes, a suspicion score and the exact steps to take — filed in your own detective's case log.">Un appel, un email, un SMS douteux ? Enfilez le trench-coat du détective : répondez à un interrogatoire à questions fermées et obtenez, en 2 minutes, un score de suspicion et les démarches exactes à suivre — classées dans votre propre dossier d'enquêteur.</p>
260
261    <div class="value-grid">
262      <div class="value-item reveal">
263        <div class="value-num">01</div>
264        <div class="value-label i18n" data-fr="3 canaux" data-en="3 channels">3 canaux</div>
265        <div class="value-text i18n" data-fr="Téléphone, Email, SMS" data-en="Phone, Email, Text">Téléphone, Email, SMS</div>
266      </div>
267      <div class="value-item reveal">
268        <div class="value-num">02</div>
269        <div class="value-label i18n" data-fr="Verdict en 2 min" data-en="Verdict in 2 min">Verdict en 2 min</div>
270        <div class="value-text i18n" data-fr="Score de suspicion + niveau de risque" data-en="Suspicion score + risk level">Score de suspicion + niveau de risque</div>
271      </div>
272      <div class="value-item reveal">
273        <div class="value-num">03</div>
274        <div class="value-label i18n" data-fr="Mode Entraînement" data-en="Training mode">Mode Entraînement</div>
275        <div class="value-text i18n" data-fr="Des cas réels pour muscler vos réflexes" data-en="Real-world cases to 
275sharpen your reflexes">Des cas réels pour muscler vos réflexes</div>
276      </div>
277    </div>
278
279    <div class="how-block reveal">
280      <div class="how-title i18n" data-fr="Comment ça marche" data-en="How it works">Comment ça marche</div>
281      <div class="how-steps">
282        <div class="how-step">
283          <div class="how-step-num">1</div>
284          <div>
285            <div class="how-step-title i18n" data-fr="Choisissez le canal" data-en="Choose the channel">Choisissez le canal</div>
286            <div class="how-step-text i18n" data-fr="Un appel, un email ou un SMS reçu." data-en="A call, email or text you received.">Un appel, un email ou un SMS reçu.</div>
287          </div>
288        </div>
289        <div class="how-step">
290          <div class="how-step-num">2</div>
291          <div>
292            <div class="how-step-title i18n" data-fr="Répondez à l'interrogatoire" data-en="Answer the interrogation">Répondez à l'interrogatoire</div>
293            <div class="how-step-text i18n" data-fr="Une série de questions fermées, faciles à répondre." data-en="A series of closed questions, easy to answer.">Une série de questions fermées, faciles à répondre.</div>
294          </div>
295        </div>
296        <div class="how-step">
297          <div class="how-step-num">3</div>
298          <div>
299            <div class="how-step-title i18n" data-fr="Recevez votre verdict" data-en="Get your verdict">Recevez votre verdict</div>
300            <div class="how-step-text i18n" data-fr="Score de suspicion + démarches concrètes." data-en="Suspicion score + concrete next steps.">Score de suspicion + démarches concrètes.</div>
301          </div>
302        </div>
303      </div>
304    </div>
305
306    <div class="download-block reveal">
307      <span class="download-label i18n" data-fr="Télécharger FRAUD DETECTIVE" data-en="Download FRAUD DETECTIVE">Télécharger FRAUD DETECTIVE</span>
308      <div class="store-badges">
309        <span class="store-badge">
310          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 3v13m0 0l-4-4m4 4l4-4M5 21h14"/></svg>
311          <span class="store-lines"><span class="store-sub">App Store</span><span class="store-main i18n" data-fr="Disponible" data-en="Available">Disponible</span></span>
312        </span>
313        <span class="store-badge">
314          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 3v13m0 0l-4-4m4 4l4-4M5 21h14"/></svg>
315          <span class="store-lines"><span class="store-sub">Google Play</span><span class="store-main i18n" data-fr="Disponible" data-en="Available">Disponible</span></span>
316        </span>
317      </div>
318    </div>
319  </div>
320</section>
321
322<!-- ================= CROISSANCE ================= -->
323<section class="app-section croissance-bg" id="croissance">
324  <div class="wrap">
325    <div class="app-eyebrow i18n reveal" data-fr="Univers 02 · Développement personnel & spiritualité" data-en="World 02 · Personal growth & spirituality">Univers 02 · Développement personnel &amp; spiritualité</div>
326    <div class="app-head reveal">
327      <div class="app-icon-lg"><img src="assets/logo-croissance.png" alt="Logo CROISSANCE"></div>
328      <div class="app-name">CROISSANCE</div>
329    </div>
330    <p class="app-tagline i18n reveal" data-fr="Transforme 5 minutes par jour en un pas vers toi-même." data-en="Turn 5 minutes a day into a step toward yourself.">Transforme 5 minutes par jour en un pas vers toi-même.</p>
331    <p class="app-universe i18n reveal" data-fr="Quatre mondes intérieurs à explorer sur un sentier qui se débloque jour après jour, entre méditation, stoïcisme, gratitude et petits gestes qui changent tout — jusqu'à ce que la croissance intérieure devienne un réflexe aussi naturel qu'agréable." data-en="Four inner worlds to explore on a path that unlocks day after day, blending meditation, stoicism, gratitude and small gestures that change everything — until inner growth becomes a reflex as natural as it is enjoyable.">Quatre mondes intérieurs à explorer sur un sentier qui se débloque jour après jour, entre méditation, stoïcisme, gratitude et petits gestes qui changent tout — jusqu'à ce que la croissance intérieure devienne un réflexe aussi naturel qu'agréable.</p>
332
333    <div class="value-grid">
334      <div class="value-item reveal">
335        <div class="value-num">01</div>
336        <div class="value-label i18n" data-fr="4 mondes" data-en="4 worlds">4 mondes</div>
337        <div class="value-text i18n" data-fr="Ancrage, Connaissance de soi, Sagesses, Action" data-en="Grounding, Self-knowledge, Wisdom, Action">Ancrage, Connaissance de soi, Sagesses, Action</div>
338      </div>
339      <div class="value-item reveal">
340        <div class="value-num">02</div>
341        <div class="value-label i18n" data-fr="5 min / jour" data-en="5 min / day">5 min / jour</div>
342        <div class="value-text i18n" data-fr="Une micro-leçon complète, chaque jour" data-en="One complete micro-lesson, every day">Une micro-leçon complète, chaque jour</div>
343      </div>
344      <div class="value-item reveal">
345        <div class="value-num">03</div>
346        <div class="value-label i18n" data-fr="Progression visible" data-en="Visible progress">
346Progression visible</div>
347        <div class="value-text i18n" data-fr="Streaks, points de Sérénité, niveaux de conscience" data-en="Streaks, Serenity points, levels of awareness">Streaks, points de Sérénité, niveaux de conscience</div>
348      </div>
349    </div>
350
351    <div class="how-block reveal">
352      <div class="how-title i18n" data-fr="Comment ça marche" data-en="How it works">Comment ça marche</div>
353      <div class="how-steps">
354        <div class="how-step">
355          <div class="how-step-num">1</div>
356          <div>
357            <div class="how-step-title i18n" data-fr="Choisissez votre monde" data-en="Choose your world">Choisissez votre monde</div>
358            <div class="how-step-text i18n" data-fr="Ancrage, Connaissance de soi, Sagesses ou Action." data-en="Grounding, Self-knowledge, Wisdom or Action.">Ancrage, Connaissance de soi, Sagesses ou Action.</div>
359          </div>
360        </div>
361        <div class="how-step">
362          <div class="how-step-num">2</div>
363          <div>
364            <div class="how-step-title i18n" data-fr="Suivez la leçon du jour" data-en="Follow today's lesson">Suivez la leçon du jour</div>
365            <div class="how-step-text i18n" data-fr="5 minutes : une accroche, un concept, une pratique." data-en="5 minutes: a hook, a concept, a practice.">5 minutes : une accroche, un concept, une pratique.</div>
366          </div>
367        </div>
368        <div class="how-step">
369          <div class="how-step-num">3</div>
370          <div>
371            <div class="how-step-title i18n" data-fr="Progressez sur le sentier" data-en="Move along the path">Progressez sur le sentier</div>
372            <div class="how-step-text i18n" data-fr="Débloquez des étapes, montez en niveau de conscience." data-en="Unlock steps, rise through levels of awareness.">Débloquez des étapes, montez en niveau de conscience.</div>
373          </div>
374        </div>
375      </div>
376    </div>
377
378    <div class="download-block reveal">
379      <span class="download-label i18n" data-fr="Télécharger CROISSANCE" data-en="Download CROISSANCE">Télécharger CROISSANCE</span>
380      <div class="store-badges">
381        <span class="store-badge">
382          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 3v13m0 0l-4-4m4 4l4-4M5 21h14"/></svg>
383          <span class="store-lines"><span class="store-sub">App Store</span><span class="store-main i18n" data-fr="Disponible" data-en="Available">Disponible</span></span>
384        </span>
385        <span class="store-badge">
386          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 3v13m0 0l-4-4m4 4l4-4M5 21h14"/></svg>
387          <span class="store-lines"><span class="store-sub">Google Play</span><span class="store-main i18n" data-fr="Disponible" data-en="Available">Disponible</span></span>
388        </span>
389      </div>
390    </div>
391  </div>
392</section>
393
394<!-- ================= LIVRES (secondaire) ================= -->
395<section class="books-mini" id="books">
396  <div class="wrap">
397    <div class="section-head reveal">
398      <div class="eyebrow i18n" data-fr="Pour aller plus loin" data-en="To go further">Pour aller plus loin</div>
399      <h2 class="i18n" data-fr="Trois romans qui prolongent l'aventure" data-en="Three novels that extend the adventure">Trois romans qui prolongent l'aventure</h2>
400    </div>
401
402    <div class="books-row">
403      <a class="book-mini reveal i18n-href" data-fr-href="https://www.amazon.fr/dp/B0B28KJ4GW" data-en-href="https://www.amazon.com/dp/B0BD2N3CHK" href="https://www.amazon.fr/dp/B0B28KJ4GW" target="_blank" rel="noopener">
404        <div class="book-mini-cover"><img src="assets/cover-kings-of-fear.jpg" alt="Les Rois de la Peur"></div>
405        <div>
406          <div class="book-mini-title i18n" data-fr="Les Rois de la Peur" data-en="The Kings of Fear">Les Rois de la Peur</div>
407          <div class="book-mini-hook i18n" data-fr="« Quoi qu'il en coûte… »" data-en="“Whatever it takes…”">« Quoi qu'il en coûte… »</div>
408          <span class="book-mini-buy i18n" data-fr="Voir sur Amazon →" data-en="View on Amazon →">Voir sur Amazon →</span>
409        </div>
410      </a>
411
412      <a class="book-mini reveal i18n-href" data-fr-href="https://www.amazon.fr/dp/B086PTBCNP" data-en-href="https://www.amazon.com/dp/1654499919" href="https://www.amazon.fr/dp/B086PTBCNP" target="_blank" rel="noopener">
413        <div class="book-mini-cover"><img src="assets/cover-apprends-moi-univers.jpg" alt="Apprends-moi l'Univers"></div>
414        <div>
415          <div class="book-mini-title i18n" data-fr="Apprends-moi l'Univers" data-en="Teach Me the Universe">Apprends-moi l'Univers</div>
416          <div class="book-mini-hook i18n" data-fr="« Qu'est-ce que c'était ?… »" data-en="“What was that?…”">« Qu'est-ce que c'était ?… »</div>
417          <span class="book-mini-buy i18n" data-fr="Voir sur Amazon →" data-en="View on Amazon →">Voir sur Amazon →</span>
418        </div>
419      </a>
420
421      <a class="book-mini reveal i18n-href" data-fr-href="https://www.amazon.com/dp/B08C95PGMH" data-en-href="https://www.amazon.com/dp/B0HC3DKZVR" href="https://www.amazon.com/dp/B08C95PGMH" target="_blank" rel="noopener">
422        <div class="book-mini-cover"></div>
423        <div>
424          <div class="book-mini-title i18n" data-fr="La Magie de ton Sourire" data-en="The Magic of your Smile">La Magie de ton Sourire</div>
425          <div class="book-mini-hook i18n" data-fr="« Pourquoi moi… ? »" data-en="“Why me…?”">« Pourquoi moi… ? »</div>
426          <span class="book-mini-buy i18n" data-fr="Voir sur Amazon →" data-en="View on Amazon →">Voir sur Amazon →</span>
427        </div>
428      </a>
429    </div>
430  </div>
431</section>
432
433<footer id="contact">
434  <div class="wrap">
435    <div class="footer-grid">
436      <div class="footer-brand">
437        <div class="logo">
438          <span class="logo-mark"><img src="assets/logo-divertis.png" alt="Logo DIVERTIS OÜ"></span>
439          DIVERTIS
440        </div>
441        <p class="footer-tag i18n" data-fr="Se divertir tout en reprenant le contrôle." data-en="Play your way back to control.">Se divertir tout en reprenant le contrôle.</p>
442      </div>
443      <div class="footer-cols">
444        <div class="footer-col">
445          <h4 class="i18n" data-fr="Applications" data-en="Apps">Applications</h4>
446          <ul>
447            <li><a href="#fraud-detective">FRAUD DETECTIVE</a></li>
448            <li><a href="#croissance">CROISSANCE</a></li>
449          </ul>
450        </div>
451        <div class="footer-col">
452          <h4 class="i18n" data-fr="Romans" data-en="Novels">Romans</h4>
453          <ul>
454            <li><a href="#books" class="i18n" data-fr="Les Rois de la Peur" data-en="The Kings of Fear">Les Rois de la Peur</a></li>
455            <li><a href="#books" class="i18n" data-fr="Apprends-moi l'Univers" data-en="Teach Me the Universe">Apprends-moi l'Univers</a></li>
456            <li><a href="#books" class="i18n" data-fr="La Magie de ton Sourire" data-en="The Magic of your Smile">La Magie de ton Sourire</a></li>
457          </ul>
458        </div>
459        <div class="footer-col">
460          <h4 class="i18n" data-fr="Contact" data-en="Contact">Contact</h4>
461          <ul>
462            <li><a href="mailto:[email protected]">[email protected]</a></li>
463            <li class="i18n" data-fr="Tallinn, Estonie" data-en="Tallinn, Estonia">Tallinn, Estonie</li>
464          </ul>
465        </div>
466      </div>
467    </div>
468    <div class="footer-bottom">
469      <span class="i18n" data-fr="DIVERTIS OÜ — société enregistrée en Estonie." data-en="DIVERTIS OÜ — company registered in Estonia.">DIVERTIS OÜ — société enregistrée en Estonie.</span>
470      <span class="i18n" data-fr="© 2026 — Tous droits réservés." data-en="© 2026 — All rights reserved.">© 2026 — Tous droits réservés.</span>
471    </div>
472  </div>
473</footer>
474
475<script>
476  let currentLang = 'fr';
477  const toggle = document.getElementById('langToggle');
478  const i18nEls = document.querySelectorAll('.i18n');
479  const i18nHrefEls = document.querySelectorAll('.i18n-href');
480
481  function applyLang(lang){
482    i18nEls.forEach(el => {
483      const val = el.dataset[lang];
484      if(val !== undefined){
485        if(val.indexOf('<a') !== -1){ el.innerHTML = val; } else { el.textContent = val; }
486      }
487    });
488    i18nHrefEls.forEach(el => {
489      const key = lang === 'fr' ? 'frHref' : 'enHref';
490      const val = el.dataset[key];
491      if(val) el.setAttribute('href', val);
492    });
493    document.documentElement.lang = lang;
494    toggle.textContent = lang === 'fr' ? 'EN' : 'FR';
495    currentLang = lang;
496  }
497
498  toggle.addEventListener('click', () => {
499    applyLang(currentLang === 'fr' ? 'en' : 'fr');
500  });
501
502  const revealEls = document.querySelectorAll('.reveal');
503  const io = new IntersectionObserver((entries) => {
504    entries.forEach(entry => {
505      if(entry.isIntersecting){
506        entry.target.classList.add('visible');
507        io.unobserve(entry.target);
508      }
509    });
510  }, {threshold: 0.12});
511  revealEls.forEach(el => io.observe(el));
512</script>
512
513
514<script async src="/.netlify/scripts/ar" data-netlify-deploy-id="6a8c90c10ebbca000882319f" data-netlify-site-id="7110a8f4-62bd-4da9-bdb2-8d685e367816" data-agent-runner-id="6a8c902f3aca72b0ed30b053"></script>
514
515</body>
516</html>
517<script async src="/.netlify/scripts/hud?variant=public" data-nf-variant="public" data-netlify-site-id="7110a8f4-62bd-4da9-bdb2-8d685e367816" data-app-host="app.netlify.com"></script>
vendor: 1 bytes, line 517
517

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.