<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<!-- Ajout de viewport-fit=cover et interactive-widget=resizes-content pour gérer le clavier virtuel et les encoches -->
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover, interactive-widget=resizes-content" />
<!-- Couleur par défaut pour la barre de statut mobile (sera mise à jour par JS) -->
<meta name="theme-color" content="#f8fafc" />
<script>
// Script immédiat pour appliquer le thème avant le rendu (évite le flash et maj la barre d'état au chargement)
(function () {
try {
var savedTheme = localStorage.getItem('immoloc-theme');
var isDark = savedTheme === 'dark' || !savedTheme;
var meta = document.querySelector('meta[name="theme-color"]');
var color = isDark ? '#020617' : '#f8fafc';
if (isDark) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
// Application immédiate de la couleur de fond sur html pour éviter le flash blanc
document.documentElement.style.backgroundColor = color;
if (meta) {
meta.setAttribute('content', color);
}
} catch (e) {
console.error('Erreur application thème immédiat', e);
}
})();
</script>
<title>Immoloc - Gestion Immobilière</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
slate: {
850: '#1e293b',
950: '#020617',
}
},
animation: {
'slide-right': 'slideRight 1s ease-out forwards',
'fade-up': 'fadeUp 0.5s ease-out forwards',
},
keyframes: {
slideRight: {
'0%': { width: '0%', opacity: '0' },
'100%': { width: '100%', opacity: '1' },
},
fadeUp: {
'0%': { transform: 'translateY(20px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
}
}
}
}
}
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&family=Roboto+Mono:wght@400;500;600;700&display=swap"
rel="stylesheet">
<style>
/* Configuration racine */
html {
background-color: #f8fafc;
height: 100%;
height: 100dvh;
/* Hauteur dynamique pour mobile */
-webkit-tap-highlight-color: transparent;
}
/* Le fond noir doit s'appliquer à tout le document HTML */
html.dark {
background-color: #020617;
}
body {
font-family: 'Inter', sans-serif;
/* Hérite de la couleur de html pour l'overscroll */
background-color: inherit;
color: #1e293b;
/* Layout Fullscreen sans scroll sur le body lui-même */
margin: 0;
padding: 0;
width: 100%;
height: 100%;
height: 100dvh;
/* overflow: hidden; Removed to allow scrolling */
/* On scroll dans l'app, pas le body */
/* Fix iOS */
/* overscroll-behavior: none; Removed to allow scrolling */
-webkit-font-smoothing: antialiased;
}
html.dark body {
color: #f8fafc;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
/* Dark scrollbar */
html.dark ::-webkit-scrollbar-thumb {
background: #475569;
}
html.dark ::-webkit-scrollbar-thumb:hover {
background: #64748b;
}
/* --- CORRECTIF AUTOFILL NAVIGATEUR --- */
/* Force le fond blanc et texte noir en mode clair */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px white inset !important;
-webkit-text-fill-color: #0f172a !important;
/* slate-900 */
caret-color: #0f172a !important;
transition: background-color 5000s ease-in-out 0s;
}
/* Force le fond gris (slate-800) et texte blanc en mode sombre */
html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover,
html.dark input:-webkit-autofill:focus,
html.dark input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px #1e293b inset !important;
/* slate-800 hex */
-webkit-text-fill-color: white !important;
caret-color: white !important;
}
/* --- CUSTOM CHECKBOX --- */
.custom-checkbox {
appearance: none;
background-color: transparent;
margin: 0;
font: inherit;
color: currentColor;
width: 1.15em;
height: 1.15em;
border: 1px solid currentColor;
border-radius: 0.25em;
display: grid;
place-content: center;
cursor: pointer;
}
.custom-checkbox::before {
content: "";
width: 0.65em;
height: 0.65em;
transform: scale(0);
transition: 120ms transform ease-in-out;
box-shadow: inset 1em 1em #6366f1;
/* Indigo-600 */
border-radius: 0.15em;
}
html.dark .custom-checkbox::before {
box-shadow: inset 1em 1em #818cf8;
/* Indigo-400 */
}
.custom-checkbox:checked::before {
transform: scale(1);
}
/* --- ANIMATION DELAYS --- */
.animate-delay-100 {
animation-delay: 100ms;
}
.animate-delay-200 {
animation-delay: 200ms;
}
.animate-delay-300 {
animation-delay: 300ms;
}
.animate-delay-400 {
animation-delay: 400ms;
}
.animate-delay-500 {
animation-delay: 500ms;
}
.animate-delay-600 {
animation-delay: 600ms;
}
.animate-delay-700 {
animation-delay: 700ms;
}
.animate-delay-800 {
animation-delay: 800ms;
}
.animate-delay-900 {
animation-delay: 900ms;
}
.animate-delay-1000 {
animation-delay: 1000ms;
}
.animate-delay-1200 {
animation-delay: 1200ms;
}
.animate-delay-1400 {
animation-delay: 1400ms;
}
.animate-element {
opacity: 0;
animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.animate-testimonial {
opacity: 0;
transform: translateY(20px);
animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideRight {
from {
opacity: 0;
clip-path: inset(0 100% 0 0);
}
to {
opacity: 1;
clip-path: inset(0 0 0 0);
}
}
.animate-slide-right {
animation: slideRight 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
</style>
<script type="importmap">
{
"imports": {
"react": "https://aistudiocdn.com/react@^19.2.0",
"react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
"react/": "https://aistudiocdn.com/react@^19.2.0/",
"lucide-react": "https://aistudiocdn.com/lucide-react@^0.554.0",
"@google/genai": "https://aistudiocdn.com/@google/genai@^1.30.0",
"recharts": "https://aistudiocdn.com/recharts@^3.4.1",
"@supabase/supabase-js": "https://aistudiocdn.com/@supabase/supabase-js@^2.83.0",
"vite": "https://aistudiocdn.com/vite@^7.2.2",
"@vitejs/plugin-react": "https://aistudiocdn.com/@vitejs/plugin-react@^5.1.1",
"jspdf": "https://aistudiocdn.com/jspdf@^2.5.1",
"framer-motion": "https://aistudiocdn.com/framer-motion@^11.18.2",
"clsx": "https://aistudiocdn.com/clsx@^2.1.1",
"tailwind-merge": "https://aistudiocdn.com/tailwind-merge@^2.6.0"
}
}
</script>
<script type="module" crossorigin src="/assets/index-BjRohp_9.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
