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 & 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 & 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.