Ontog\u00e9n\u00e8se du Chien – Guide Interactif<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n \n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');\n body { font-family: 'Inter', sans-serif; }\n .animate-in { animation: fadeIn 0.5s ease-out forwards; }\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n <\/style>\n<\/head>\n<body class=\"bg-slate-50 text-slate-900\">\n <div id=\"root\"><\/div>\n\n <script type=\"text\/babel\">\n const { useState, useEffect } = React;\n\n \/\/ Composant Ic\u00f4ne utilisant Lucide\n const LucideIcon = ({ name, className = \"w-6 h-6\" }) => {\n useEffect(() => {\n if (window.lucide) {\n window.lucide.createIcons();\n }\n }, [name]);\n return <i data-lucide={name} className={className}><\/i>;\n };\n\n \/\/ --- Donn\u00e9es ---\n const periods = [\n {\n id: 'prenatal',\n title: 'Pr\u00e9natale',\n subtitle: 'La fondation invisible',\n duration: 'Gestation (~63 jours)',\n icon: 'dna',\n color: 'from-rose-500 to-rose-600',\n lightColor: 'bg-rose-50 text-rose-700',\n description: \"Avant m\u00eame la naissance, le chiot per\u00e7oit son environnement via la m\u00e8re.\",\n keyPoints: [\n \"Sensibilit\u00e9 tactile pr\u00e9coce (r\u00e9action \u00e0 la palpation d\u00e8s 45 jours).\",\n \"Influence du stress maternel (cortisol) sur le temp\u00e9rament futur.\",\n \"Apprentissage gustatif via le liquide amniotique.\"\n ],\n risks: \"Stress intense de la m\u00e8re = chiots plus r\u00e9actifs et anxieux.\"\n },\n {\n id: 'neonatal',\n title: 'N\u00e9o-natale',\n subtitle: 'Le monde des r\u00e9flexes',\n duration: '0 \u00e0 14 jours',\n icon: 'baby',\n color: 'from-blue-500 to-blue-600',\n lightColor: 'bg-blue-50 text-blue-700',\n description: \"Phase v\u00e9g\u00e9tative. Le cerveau est encore immature (peu de circonvolutions).\",\n keyPoints: [\n \"Sourds et aveugles (paupi\u00e8res et conduits auditifs clos).\",\n \"R\u00e9flexes de survie : succion, fouissement, r\u00e9flexe p\u00e9rin\u00e9al.\",\n \"Sommeil paradoxal dominant (95%) crucial pour le d\u00e9veloppement c\u00e9r\u00e9bral.\"\n ],\n risks: \"Absence de stimulation tactile = retard de d\u00e9veloppement nerveux.\"\n },\n {\n id: 'transition',\n title: 'Transition',\n subtitle: 'L\\'\u00e9veil des sens',\n duration: '15 \u00e0 21 jours',\n icon: 'eye',\n color: 'from-amber-500 to-amber-600',\n lightColor: 'bg-amber-50 text-amber-700',\n description: \"Une phase courte mais intense de m\u00e9tamorphose sensorielle.\",\n keyPoints: [\n \"Ouverture des yeux (J10-J15) et des oreilles (J14-J20).\",\n \"D\u00e9but de l'attachement \u00e0 la m\u00e8re (reconnaissance visuelle).\",\n \"Premi\u00e8res tentatives de marche et \u00e9limination spontan\u00e9e.\"\n ],\n risks: \"Traumatismes sensoriels durant cette phase peuvent marquer durablement.\"\n },\n {\n id: 'socialisation',\n title: 'Socialisation',\n subtitle: 'La fen\u00eatre critique',\n duration: '3 sem. \u00e0 3 mois',\n icon: 'users',\n color: 'from-emerald-500 to-emerald-600',\n lightColor: 'bg-emerald-50 text-emerald-700',\n description: \"La p\u00e9riode la plus importante pour l'\u00e9quilibre du futur chien adulte.\",\n keyPoints: [\n \"Apprentissage des codes canins (morsure inhib\u00e9e, postures).\",\n \"Familiarisation aux humains et aux bruits (base de donn\u00e9es).\",\n \"D\u00e9finition du seuil de l'hom\u00e9ostasie sensorielle.\"\n ],\n risks: \"Syndrome de privation sensorielle si l'environnement est trop pauvre.\"\n },\n {\n id: 'juvenile',\n title: 'Juv\u00e9nile',\n subtitle: 'L\\'autonomisation',\n duration: '3 mois \u00e0 la pubert\u00e9',\n icon: 'activity',\n color: 'from-purple-500 to-purple-600',\n lightColor: 'bg-purple-50 text-purple-700',\n description: \"Consolidation des acquis et exploration du monde ext\u00e9rieur.\",\n keyPoints: [\n \"Augmentation des capacit\u00e9s motrices et d'endurance.\",\n \"Phases de peur 'secondaires' possibles.\",\n \"Perfectionnement des techniques de chasse et de jeu.\"\n ],\n risks: \"D\u00e9socialisation si les contacts avec les cong\u00e9n\u00e8res cessent.\"\n }\n ];\n\n \/\/ --- Pages ---\n const HomePage = () => (\n <div className=\"space-y-8 animate-in\">\n <div className=\"relative overflow-hidden bg-slate-900 rounded-3xl p-8 md:p-12 text-white shadow-2xl\">\n <div className=\"relative z-10 max-w-2xl\">\n <h1 className=\"text-4xl md:text-5xl font-extrabold mb-4 leading-tight\">\n De l'Embryon \u00e0 <span className=\"text-green-400\">l'\u00c9quilibre<\/span>\n <\/h1>\n <p className=\"text-slate-300 text-lg mb-8 leading-relaxed\">\n D\u00e9couvrez les \u00e9tapes fascinantes du d\u00e9veloppement du chiot. Comprendre l'ontog\u00e9n\u00e8se, c'est donner au chien les cl\u00e9s d'une vie sereine aupr\u00e8s de l'humain.\n <\/p>\n <div className=\"flex gap-4\">\n <p className=\"text-sm text-slate-400 flex items-center gap-2\">\n <LucideIcon name=\"info\" className=\"w-4 h-4\" \/> Inspir\u00e9 par les travaux de Ludivine Grzemski\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div className=\"grid md:grid-cols-3 gap-6\">\n {[\n { title: \"L'Inn\u00e9 et l'Acquis\", desc: \"Interaction entre patrimoine g\u00e9n\u00e9tique et exp\u00e9riences v\u00e9cues.\", icon: \"dna\" },\n { title: \"\u00c9lagage Neuronal\", desc: \"Le cerveau \u00e9limine les neurones non stimul\u00e9s : 'Use it or lose it'.\", icon: \"brain\" },\n { title: \"Hom\u00e9ostasie\", desc: \"R\u00e9glage du niveau de tol\u00e9rance aux stimuli environnementaux.\", icon: \"target\" }\n ].map((c, i) => (\n <div key={i} className=\"bg-white p-6 rounded-2xl shadow-sm border border-slate-100\">\n <div className=\"w-10 h-10 bg-green-50 text-green-600 rounded-xl flex items-center justify-center mb-4\">\n <LucideIcon name={c.icon} className=\"w-5 h-5\" \/>\n <\/div>\n <h3 className=\"font-bold text-slate-800 mb-2\">{c.title}<\/h3>\n <p className=\"text-slate-600 text-sm leading-relaxed\">{c.desc}<\/p>\n <\/div>\n ))}\n <\/div>\n <\/div>\n );\n\n const TimelinePage = () => {\n const [selected, setSelected] = useState(periods[0]);\n\n return (\n <div className=\"animate-in\">\n <div className=\"flex flex-col lg:flex-row gap-8\">\n <div className=\"lg:w-1\/3 space-y-3\">\n {periods.map((p) => (\n <button\n key={p.id}\n onClick={() => setSelected(p)}\n className={`w-full text-left p-4 rounded-2xl border-2 transition-all flex items-center justify-between group ${\n selected.id === p.id \n ? 'border-green-600 bg-green-50 text-green-900 shadow-sm' \n : 'border-transparent bg-white text-slate-600 hover:border-slate-200 shadow-sm'\n }`}\n >\n <div className=\"flex items-center gap-3\">\n <div className={`p-2 rounded-lg ${selected.id === p.id ? 'bg-green-600 text-white' : 'bg-slate-100'}`}>\n <LucideIcon name={p.icon} className=\"w-5 h-5\" \/>\n <\/div>\n <div>\n <div className=\"font-bold\">{p.title}<\/div>\n <div className=\"text-xs opacity-70\">{p.duration}<\/div>\n <\/div>\n <\/div>\n <LucideIcon name=\"chevron-right\" className={`w-4 h-4 ${selected.id === p.id ? 'translate-x-1' : 'opacity-30'}`} \/>\n <\/button>\n ))}\n <\/div>\n\n <div className=\"lg:flex-1\">\n <div className=\"rounded-3xl bg-white shadow-xl overflow-hidden border border-slate-100\">\n <div className={`h-32 bg-gradient-to-r ${selected.color} p-8 flex items-end text-white`}>\n <div>\n <h3 className=\"text-3xl font-bold\">{selected.title}<\/h3>\n <p className=\"font-medium opacity-80\">{selected.subtitle}<\/p>\n <\/div>\n <\/div>\n <div className=\"p-8\">\n <h4 className=\"text-xs font-bold text-slate-400 uppercase tracking-widest mb-4 flex items-center gap-2\">\n <LucideIcon name=\"check-circle\" className=\"w-4 h-4\" \/> Acquisitions Cl\u00e9s\n <\/h4>\n <div className=\"grid gap-3 mb-8\">\n {selected.keyPoints.map((point, idx) => (\n <div key={idx} className=\"flex gap-4 p-4 bg-slate-50 rounded-xl border border-slate-100\">\n <div className=\"w-6 h-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center flex-shrink-0 text-xs font-bold\">{idx+1}<\/div>\n <p className=\"text-slate-700 text-sm leading-relaxed\">{point}<\/p>\n <\/div>\n ))}\n <\/div>\n <div className=\"bg-rose-50 border border-rose-100 p-4 rounded-xl flex gap-3\">\n <LucideIcon name=\"alert-triangle\" className=\"text-rose-500 w-5 h-5 flex-shrink-0\" \/>\n <div>\n <p className=\"text-rose-900 font-bold text-sm\">Risques<\/p>\n <p className=\"text-rose-700 text-xs\">{selected.risks}<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n const App = () => {\n const [tab, setTab] = useState('home');\n\n return (\n <div className=\"min-h-screen pb-20\">\n <nav className=\"bg-white\/80 backdrop-blur-md border-b sticky top-0 z-50\">\n <div className=\"max-w-6xl mx-auto px-4 h-16 flex items-center justify-between\">\n <div className=\"flex items-center gap-2 font-black text-green-600\">\n <LucideIcon name=\"dog\" className=\"w-6 h-6\" \/>\n <span className=\"tracking-tighter text-xl\">ONTOG\u00c9N\u00c8SE<\/span>\n <\/div>\n <div className=\"flex gap-1 bg-slate-100 p-1 rounded-full\">\n <button onClick={() => setTab('home')} className={`px-4 py-1.5 rounded-full text-sm font-medium ${tab === 'home' ? 'bg-white text-green-600 shadow-sm' : 'text-slate-500'}`}>Accueil<\/button>\n <button onClick={() => setTab('timeline')} className={`px-4 py-1.5 rounded-full text-sm font-medium ${tab === 'timeline' ? 'bg-white text-green-600 shadow-sm' : 'text-slate-500'}`}>Chronologie<\/button>\n <\/div>\n <\/div>\n <\/nav>\n\n <main className=\"max-w-6xl mx-auto px-4 pt-8\">\n {tab === 'home' ? <HomePage \/> : <TimelinePage \/>}\n <\/main>\n\n <footer className=\"mt-20 py-8 border-t border-slate-200 text-center\">\n <p className=\"text-slate-400 text-[10px] uppercase tracking-[0.2em]\">\n Thomas Le Blanc - 2026\n <\/p>\n <\/footer>\n <\/div>\n );\n };\n\n const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(<App \/>);\n <\/script>\n<\/body>\n<\/html>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Ontog\u00e9n\u00e8se du Chien – Guide Interactif<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-159","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.thometneru.fr\/index.php\/wp-json\/wp\/v2\/pages\/159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.thometneru.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.thometneru.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.thometneru.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thometneru.fr\/index.php\/wp-json\/wp\/v2\/comments?post=159"}],"version-history":[{"count":13,"href":"https:\/\/www.thometneru.fr\/index.php\/wp-json\/wp\/v2\/pages\/159\/revisions"}],"predecessor-version":[{"id":173,"href":"https:\/\/www.thometneru.fr\/index.php\/wp-json\/wp\/v2\/pages\/159\/revisions\/173"}],"wp:attachment":[{"href":"https:\/\/www.thometneru.fr\/index.php\/wp-json\/wp\/v2\/media?parent=159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\n\n\n \n \n Ontog\u00e9n\u00e8se du Chien – Guide Interactif<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n \n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');\n body { font-family: 'Inter', sans-serif; }\n .animate-in { animation: fadeIn 0.5s ease-out forwards; }\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n <\/style>\n<\/head>\n<body class=\"bg-slate-50 text-slate-900\">\n <div id=\"root\"><\/div>\n\n <script type=\"text\/babel\">\n const { useState, useEffect } = React;\n\n \/\/ Composant Ic\u00f4ne utilisant Lucide\n const LucideIcon = ({ name, className = \"w-6 h-6\" }) => {\n useEffect(() => {\n if (window.lucide) {\n window.lucide.createIcons();\n }\n }, [name]);\n return <i data-lucide={name} className={className}><\/i>;\n };\n\n \/\/ --- Donn\u00e9es ---\n const periods = [\n {\n id: 'prenatal',\n title: 'Pr\u00e9natale',\n subtitle: 'La fondation invisible',\n duration: 'Gestation (~63 jours)',\n icon: 'dna',\n color: 'from-rose-500 to-rose-600',\n lightColor: 'bg-rose-50 text-rose-700',\n description: \"Avant m\u00eame la naissance, le chiot per\u00e7oit son environnement via la m\u00e8re.\",\n keyPoints: [\n \"Sensibilit\u00e9 tactile pr\u00e9coce (r\u00e9action \u00e0 la palpation d\u00e8s 45 jours).\",\n \"Influence du stress maternel (cortisol) sur le temp\u00e9rament futur.\",\n \"Apprentissage gustatif via le liquide amniotique.\"\n ],\n risks: \"Stress intense de la m\u00e8re = chiots plus r\u00e9actifs et anxieux.\"\n },\n {\n id: 'neonatal',\n title: 'N\u00e9o-natale',\n subtitle: 'Le monde des r\u00e9flexes',\n duration: '0 \u00e0 14 jours',\n icon: 'baby',\n color: 'from-blue-500 to-blue-600',\n lightColor: 'bg-blue-50 text-blue-700',\n description: \"Phase v\u00e9g\u00e9tative. Le cerveau est encore immature (peu de circonvolutions).\",\n keyPoints: [\n \"Sourds et aveugles (paupi\u00e8res et conduits auditifs clos).\",\n \"R\u00e9flexes de survie : succion, fouissement, r\u00e9flexe p\u00e9rin\u00e9al.\",\n \"Sommeil paradoxal dominant (95%) crucial pour le d\u00e9veloppement c\u00e9r\u00e9bral.\"\n ],\n risks: \"Absence de stimulation tactile = retard de d\u00e9veloppement nerveux.\"\n },\n {\n id: 'transition',\n title: 'Transition',\n subtitle: 'L\\'\u00e9veil des sens',\n duration: '15 \u00e0 21 jours',\n icon: 'eye',\n color: 'from-amber-500 to-amber-600',\n lightColor: 'bg-amber-50 text-amber-700',\n description: \"Une phase courte mais intense de m\u00e9tamorphose sensorielle.\",\n keyPoints: [\n \"Ouverture des yeux (J10-J15) et des oreilles (J14-J20).\",\n \"D\u00e9but de l'attachement \u00e0 la m\u00e8re (reconnaissance visuelle).\",\n \"Premi\u00e8res tentatives de marche et \u00e9limination spontan\u00e9e.\"\n ],\n risks: \"Traumatismes sensoriels durant cette phase peuvent marquer durablement.\"\n },\n {\n id: 'socialisation',\n title: 'Socialisation',\n subtitle: 'La fen\u00eatre critique',\n duration: '3 sem. \u00e0 3 mois',\n icon: 'users',\n color: 'from-emerald-500 to-emerald-600',\n lightColor: 'bg-emerald-50 text-emerald-700',\n description: \"La p\u00e9riode la plus importante pour l'\u00e9quilibre du futur chien adulte.\",\n keyPoints: [\n \"Apprentissage des codes canins (morsure inhib\u00e9e, postures).\",\n \"Familiarisation aux humains et aux bruits (base de donn\u00e9es).\",\n \"D\u00e9finition du seuil de l'hom\u00e9ostasie sensorielle.\"\n ],\n risks: \"Syndrome de privation sensorielle si l'environnement est trop pauvre.\"\n },\n {\n id: 'juvenile',\n title: 'Juv\u00e9nile',\n subtitle: 'L\\'autonomisation',\n duration: '3 mois \u00e0 la pubert\u00e9',\n icon: 'activity',\n color: 'from-purple-500 to-purple-600',\n lightColor: 'bg-purple-50 text-purple-700',\n description: \"Consolidation des acquis et exploration du monde ext\u00e9rieur.\",\n keyPoints: [\n \"Augmentation des capacit\u00e9s motrices et d'endurance.\",\n \"Phases de peur 'secondaires' possibles.\",\n \"Perfectionnement des techniques de chasse et de jeu.\"\n ],\n risks: \"D\u00e9socialisation si les contacts avec les cong\u00e9n\u00e8res cessent.\"\n }\n ];\n\n \/\/ --- Pages ---\n const HomePage = () => (\n <div className=\"space-y-8 animate-in\">\n <div className=\"relative overflow-hidden bg-slate-900 rounded-3xl p-8 md:p-12 text-white shadow-2xl\">\n <div className=\"relative z-10 max-w-2xl\">\n <h1 className=\"text-4xl md:text-5xl font-extrabold mb-4 leading-tight\">\n De l'Embryon \u00e0 <span className=\"text-green-400\">l'\u00c9quilibre<\/span>\n <\/h1>\n <p className=\"text-slate-300 text-lg mb-8 leading-relaxed\">\n D\u00e9couvrez les \u00e9tapes fascinantes du d\u00e9veloppement du chiot. Comprendre l'ontog\u00e9n\u00e8se, c'est donner au chien les cl\u00e9s d'une vie sereine aupr\u00e8s de l'humain.\n <\/p>\n <div className=\"flex gap-4\">\n <p className=\"text-sm text-slate-400 flex items-center gap-2\">\n <LucideIcon name=\"info\" className=\"w-4 h-4\" \/> Inspir\u00e9 par les travaux de Ludivine Grzemski\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <div className=\"grid md:grid-cols-3 gap-6\">\n {[\n { title: \"L'Inn\u00e9 et l'Acquis\", desc: \"Interaction entre patrimoine g\u00e9n\u00e9tique et exp\u00e9riences v\u00e9cues.\", icon: \"dna\" },\n { title: \"\u00c9lagage Neuronal\", desc: \"Le cerveau \u00e9limine les neurones non stimul\u00e9s : 'Use it or lose it'.\", icon: \"brain\" },\n { title: \"Hom\u00e9ostasie\", desc: \"R\u00e9glage du niveau de tol\u00e9rance aux stimuli environnementaux.\", icon: \"target\" }\n ].map((c, i) => (\n <div key={i} className=\"bg-white p-6 rounded-2xl shadow-sm border border-slate-100\">\n <div className=\"w-10 h-10 bg-green-50 text-green-600 rounded-xl flex items-center justify-center mb-4\">\n <LucideIcon name={c.icon} className=\"w-5 h-5\" \/>\n <\/div>\n <h3 className=\"font-bold text-slate-800 mb-2\">{c.title}<\/h3>\n <p className=\"text-slate-600 text-sm leading-relaxed\">{c.desc}<\/p>\n <\/div>\n ))}\n <\/div>\n <\/div>\n );\n\n const TimelinePage = () => {\n const [selected, setSelected] = useState(periods[0]);\n\n return (\n <div className=\"animate-in\">\n <div className=\"flex flex-col lg:flex-row gap-8\">\n <div className=\"lg:w-1\/3 space-y-3\">\n {periods.map((p) => (\n <button\n key={p.id}\n onClick={() => setSelected(p)}\n className={`w-full text-left p-4 rounded-2xl border-2 transition-all flex items-center justify-between group ${\n selected.id === p.id \n ? 'border-green-600 bg-green-50 text-green-900 shadow-sm' \n : 'border-transparent bg-white text-slate-600 hover:border-slate-200 shadow-sm'\n }`}\n >\n <div className=\"flex items-center gap-3\">\n <div className={`p-2 rounded-lg ${selected.id === p.id ? 'bg-green-600 text-white' : 'bg-slate-100'}`}>\n <LucideIcon name={p.icon} className=\"w-5 h-5\" \/>\n <\/div>\n <div>\n <div className=\"font-bold\">{p.title}<\/div>\n <div className=\"text-xs opacity-70\">{p.duration}<\/div>\n <\/div>\n <\/div>\n <LucideIcon name=\"chevron-right\" className={`w-4 h-4 ${selected.id === p.id ? 'translate-x-1' : 'opacity-30'}`} \/>\n <\/button>\n ))}\n <\/div>\n\n <div className=\"lg:flex-1\">\n <div className=\"rounded-3xl bg-white shadow-xl overflow-hidden border border-slate-100\">\n <div className={`h-32 bg-gradient-to-r ${selected.color} p-8 flex items-end text-white`}>\n <div>\n <h3 className=\"text-3xl font-bold\">{selected.title}<\/h3>\n <p className=\"font-medium opacity-80\">{selected.subtitle}<\/p>\n <\/div>\n <\/div>\n <div className=\"p-8\">\n <h4 className=\"text-xs font-bold text-slate-400 uppercase tracking-widest mb-4 flex items-center gap-2\">\n <LucideIcon name=\"check-circle\" className=\"w-4 h-4\" \/> Acquisitions Cl\u00e9s\n <\/h4>\n <div className=\"grid gap-3 mb-8\">\n {selected.keyPoints.map((point, idx) => (\n <div key={idx} className=\"flex gap-4 p-4 bg-slate-50 rounded-xl border border-slate-100\">\n <div className=\"w-6 h-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center flex-shrink-0 text-xs font-bold\">{idx+1}<\/div>\n <p className=\"text-slate-700 text-sm leading-relaxed\">{point}<\/p>\n <\/div>\n ))}\n <\/div>\n <div className=\"bg-rose-50 border border-rose-100 p-4 rounded-xl flex gap-3\">\n <LucideIcon name=\"alert-triangle\" className=\"text-rose-500 w-5 h-5 flex-shrink-0\" \/>\n <div>\n <p className=\"text-rose-900 font-bold text-sm\">Risques<\/p>\n <p className=\"text-rose-700 text-xs\">{selected.risks}<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n const App = () => {\n const [tab, setTab] = useState('home');\n\n return (\n <div className=\"min-h-screen pb-20\">\n <nav className=\"bg-white\/80 backdrop-blur-md border-b sticky top-0 z-50\">\n <div className=\"max-w-6xl mx-auto px-4 h-16 flex items-center justify-between\">\n <div className=\"flex items-center gap-2 font-black text-green-600\">\n <LucideIcon name=\"dog\" className=\"w-6 h-6\" \/>\n <span className=\"tracking-tighter text-xl\">ONTOG\u00c9N\u00c8SE<\/span>\n <\/div>\n <div className=\"flex gap-1 bg-slate-100 p-1 rounded-full\">\n <button onClick={() => setTab('home')} className={`px-4 py-1.5 rounded-full text-sm font-medium ${tab === 'home' ? 'bg-white text-green-600 shadow-sm' : 'text-slate-500'}`}>Accueil<\/button>\n <button onClick={() => setTab('timeline')} className={`px-4 py-1.5 rounded-full text-sm font-medium ${tab === 'timeline' ? 'bg-white text-green-600 shadow-sm' : 'text-slate-500'}`}>Chronologie<\/button>\n <\/div>\n <\/div>\n <\/nav>\n\n <main className=\"max-w-6xl mx-auto px-4 pt-8\">\n {tab === 'home' ? <HomePage \/> : <TimelinePage \/>}\n <\/main>\n\n <footer className=\"mt-20 py-8 border-t border-slate-200 text-center\">\n <p className=\"text-slate-400 text-[10px] uppercase tracking-[0.2em]\">\n Thomas Le Blanc - 2026\n <\/p>\n <\/footer>\n <\/div>\n );\n };\n\n const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(<App \/>);\n <\/script>\n<\/body>\n<\/html>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Ontog\u00e9n\u00e8se du Chien – Guide Interactif<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-159","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.thometneru.fr\/index.php\/wp-json\/wp\/v2\/pages\/159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.thometneru.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.thometneru.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.thometneru.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thometneru.fr\/index.php\/wp-json\/wp\/v2\/comments?post=159"}],"version-history":[{"count":13,"href":"https:\/\/www.thometneru.fr\/index.php\/wp-json\/wp\/v2\/pages\/159\/revisions"}],"predecessor-version":[{"id":173,"href":"https:\/\/www.thometneru.fr\/index.php\/wp-json\/wp\/v2\/pages\/159\/revisions\/173"}],"wp:attachment":[{"href":"https:\/\/www.thometneru.fr\/index.php\/wp-json\/wp\/v2\/media?parent=159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}