Bien-\u00catre Animal et Sentience | HumAnimalis<\/title><br \/>\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \t<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n<style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;600;700&family=Open+Sans:wght@400;600&display=swap');<\/p>\n<p> body {<br \/>\n font-family: 'Open Sans', sans-serif;<br \/>\n padding-top: 80px;<br \/>\n }<br \/>\n h1, h2, h3, h4 {<br \/>\n font-family: 'Montserrat', sans-serif;<br \/>\n }<br \/>\n .bg-pattern {<br \/>\n background-color: #f9fafb;<br \/>\n background-image: url(\"data:image\/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23065f46' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E\");<br \/>\n }<br \/>\n .timeline-item::before {<br \/>\n content: '';<br \/>\n position: absolute;<br \/>\n left: -9px;<br \/>\n top: 0;<br \/>\n width: 18px;<br \/>\n height: 18px;<br \/>\n background-color: #10b981;<br \/>\n border-radius: 50%;<br \/>\n border: 4px solid #fff;<br \/>\n }<br \/>\n <\/style>\n<p><\/head><br \/>\n<body class=\"text-gray-700 bg-pattern\"><\/p>\n<p><\/p>\n<nav class=\"bg-white\/95 backdrop-blur-md text-emerald-900 fixed top-0 w-full z-50 border-b border-gray-100\">\n<div class=\"container mx-auto px-6 py-4 flex justify-between items-center\">\n <a href=\"#\" class=\"text-xl font-bold flex items-center gap-2 text-emerald-800\"><br \/>\n<i class=\"fa-solid fa-paw\"><\/i> HumAnimalis<br \/>\n<\/a><\/p>\n<div class=\"hidden md:flex space-x-6\">\n <a href=\"#philosophie\" class=\"hover:text-emerald-500 transition text-xs font-bold uppercase tracking-widest\">\u00c9thique<\/a><br \/>\n<a href=\"#sentience\" class=\"hover:text-emerald-500 transition text-xs font-bold uppercase tracking-widest\">Sentience<\/a><br \/>\n<a href=\"#definition\" class=\"hover:text-emerald-500 transition text-xs font-bold uppercase tracking-widest\">Bien-\u00catre<\/a><br \/>\n<a href=\"#evaluation\" class=\"hover:text-emerald-500 transition text-xs font-bold uppercase tracking-widest\">\u00c9valuation<\/a><br \/>\n<a href=\"#pratique\" class=\"hover:text-emerald-500 transition text-xs font-bold uppercase tracking-widest\">Terrain<\/a><\/div>\n<p><button id=\"mobile-menu-btn\" class=\"md:hidden text-2xl\"><i class=\"fa-solid fa-bars-staggered\"><\/i><\/button><\/div>\n<p><\/p>\n<div id=\"mobile-menu\" class=\"hidden md:hidden bg-white border-b border-gray-100 p-6 space-y-4 shadow-inner\">\n <a href=\"#philosophie\" class=\"block font-bold text-emerald-800 uppercase text-xs\">\u00c9thique<\/a><br \/>\n<a href=\"#sentience\" class=\"block font-bold text-emerald-800 uppercase text-xs\">Sentience<\/a><br \/>\n<a href=\"#definition\" class=\"block font-bold text-emerald-800 uppercase text-xs\">Bien-\u00catre<\/a><br \/>\n<a href=\"#evaluation\" class=\"block font-bold text-emerald-800 uppercase text-xs\">\u00c9valuation<\/a><br \/>\n<a href=\"#pratique\" class=\"block font-bold text-emerald-800 uppercase text-xs\">Terrain<\/a><\/div>\n<\/nav>\n<p> <\/p>\n<header id=\"intro\" class=\"py-20 bg-white border-b border-gray-100\">\n<div class=\"container mx-auto px-6\">\n<div class=\"max-w-4xl mx-auto text-center\">\n<div class=\"inline-flex items-center gap-2 text-emerald-600 font-bold text-xs uppercase tracking-[0.3em] mb-6\">\n <span class=\"w-12 h-px bg-emerald-600\"><\/span><br \/>\nModule Int\u00e9gral 2025<br \/>\n<span class=\"w-12 h-px bg-emerald-600\"><\/span><\/div>\n<h1 class=\"text-4xl md:text-6xl font-extrabold text-gray-900 mb-8 leading-tight\">\n Le Bien-\u00catre Animal :<br \/>\n<span class=\"text-emerald-700\">Science et Conscience<\/span><\/h1>\n<p class=\"text-xl text-gray-600 leading-relaxed\">\n De la reconnaissance juridique de 2015 aux derni\u00e8res avanc\u00e9es de l’\u00e9thologie, explorez les fondements de notre relation aux \u00eatres sentients.<\/p>\n<\/div>\n<\/div>\n<\/header>\n<p> <\/p>\n<section id=\"philosophie\" class=\"py-24 bg-white\">\n<div class=\"container mx-auto px-6 max-w-6xl\">\n<div class=\"grid grid-cols-1 lg:grid-cols-12 gap-16\">\n<div class=\"lg:col-span-4\">\n<h2 class=\"text-emerald-600 font-bold uppercase tracking-widest text-sm mb-4\">L’\u00c9volution<\/h2>\n<h3 class=\"text-3xl font-bold text-gray-900 mb-8\">Un changement de paradigme<\/h3>\n<div class=\"relative border-l-2 border-emerald-100 ml-2 space-y-10\">\n<div class=\"timeline-item pl-8 relative\">\n<h4 class=\"font-bold text-gray-800\">1976<\/h4>\n<p class=\"text-sm text-gray-500 italic mb-2 leading-relaxed\">Code Rural : L’animal est reconnu comme “\u00eatre sensible”.<\/p>\n<\/div>\n<div class=\"timeline-item pl-8 relative\">\n<h4 class=\"font-bold text-gray-800\">1978<\/h4>\n<p class=\"text-sm text-gray-500 italic mb-2 leading-relaxed\">D\u00e9claration Universelle des Droits de l’Animal (UNESCO).<\/p>\n<\/div>\n<div class=\"timeline-item pl-8 relative\">\n<h4 class=\"font-bold text-gray-800\">2015<\/h4>\n<p class=\"text-sm text-gray-500 italic mb-2 leading-relaxed\">Code Civil : L’animal n’est plus un “bien meuble” mais un \u00eatre vivant dou\u00e9 de sensibilit\u00e9.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-6\">\n<div class=\"bg-gray-50 p-8 rounded-3xl border border-gray-100 hover:bg-emerald-50 transition\">\n<div class=\"text-emerald-600 mb-4\"><i class=\"fa-solid fa-scale-unbalanced text-2xl\"><\/i><\/div>\n<h4 class=\"text-xl font-bold mb-3\">L’Utilitarisme<\/h4>\n<p class=\"text-sm text-gray-600 leading-relaxed\">Bas\u00e9 sur le calcul plaisir\/douleur (Jeremy Bentham). On cherche \u00e0 minimiser la souffrance globale, mais l’utilisation de l’animal reste possible si le b\u00e9n\u00e9fice humain est jug\u00e9 sup\u00e9rieur.<\/p>\n<\/div>\n<div class=\"bg-gray-50 p-8 rounded-3xl border border-gray-100 hover:bg-emerald-50 transition\">\n<div class=\"text-emerald-600 mb-4\"><i class=\"fa-solid fa-shield-dog text-2xl\"><\/i><\/div>\n<h4 class=\"text-xl font-bold mb-3\">Le D\u00e9ontologisme<\/h4>\n<p class=\"text-sm text-gray-600 leading-relaxed\">Port\u00e9 par Tom Regan. L’animal a une valeur intrins\u00e8que (“sujet d’une vie”). Il poss\u00e8de des droits moraux qui interdisent de le consid\u00e9rer comme une simple ressource.<\/p>\n<\/div>\n<div class=\"bg-gray-50 p-8 rounded-3xl border border-gray-100 hover:bg-emerald-50 transition\">\n<div class=\"text-emerald-600 mb-4\"><i class=\"fa-solid fa-heart-pulse text-2xl\"><\/i><\/div>\n<h4 class=\"text-xl font-bold mb-3\">Le Welfarisme<\/h4>\n<p class=\"text-sm text-gray-600 leading-relaxed\">Le courant dominant actuel. Il ne remet pas en cause l’usage de l’animal mais impose l’obligation l\u00e9gale et morale de lui offrir des conditions de vie optimales.<\/p>\n<\/div>\n<div class=\"bg-gray-50 p-8 rounded-3xl border border-gray-100 hover:bg-emerald-50 transition\">\n<div class=\"text-emerald-600 mb-4\"><i class=\"fa-solid fa-handshake-slash text-2xl\"><\/i><\/div>\n<h4 class=\"text-xl font-bold mb-3\">L’Abolitionnisme<\/h4>\n<p class=\"text-sm text-gray-600 leading-relaxed\">Position radicale (Gary Francione) pr\u00f4nant la fin de tout statut de propri\u00e9t\u00e9. Pour ce courant, l’humanit\u00e9 doit cesser toute exploitation animale, quelle qu’elle soit.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<p> <\/p>\n<section id=\"sentience\" class=\"py-24 bg-gray-900 text-white overflow-hidden relative\">\n<div class=\"container mx-auto px-6 max-w-6xl relative z-10\">\n<div class=\"flex flex-col lg:flex-row gap-16 items-center\">\n<div class=\"lg:w-1\/2\">\n<h2 class=\"text-emerald-400 font-bold uppercase tracking-widest text-sm mb-4\">Concept Scientifique<\/h2>\n<h3 class=\"text-4xl font-bold mb-8 leading-tight\">La Sentience :<br \/>\nL’exp\u00e9rience du monde<\/h3>\n<p class=\"text-emerald-100\/80 text-lg mb-8 leading-relaxed\">\n La sentience est la capacit\u00e9 d’\u00e9prouver des \u00e9tats affectifs et de percevoir son environnement de fa\u00e7on subjective. Elle implique une <strong>conscience de soi<\/strong> et une <strong>\u00e9valuation<\/strong> constante de la situation.<\/p>\n<div class=\"bg-white\/10 backdrop-blur-md p-8 rounded-3xl border border-white\/20\">\n<h4 class=\"text-emerald-400 font-bold mb-4 flex items-center gap-2\">\n <i class=\"fa-solid fa-eye\"><\/i> L’Umwelt (Jakob von Uexk\u00fcll)<\/h4>\n<p class=\"text-sm text-emerald-50\/70 leading-relaxed\">\n Chaque animal vit dans son propre “monde propre”. Un chien per\u00e7oit le monde par les odeurs (3D olfactive), un cheval par un champ visuel quasi circulaire. Comprendre le Bien-\u00catre, c’est d’abord respecter cette bulle sensorielle sp\u00e9cifique \u00e0 l’esp\u00e8ce.<\/p>\n<\/div>\n<\/div>\n<div class=\"lg:w-1\/2 grid grid-cols-2 gap-4\">\n<div class=\"space-y-4 mt-8\">\n<div class=\"bg-emerald-800\/40 p-6 rounded-2xl border border-emerald-500\/20\">\n <i class=\"fa-solid fa-brain text-emerald-400 mb-4 text-2xl\"><\/i><\/p>\n<h5 class=\"font-bold mb-2\">Cognition<\/h5>\n<p class=\"text-xs text-emerald-100\/60\">Capacit\u00e9 de r\u00e9solution de probl\u00e8mes et m\u00e9moire.<\/p>\n<\/div>\n<div class=\"bg-emerald-800\/40 p-6 rounded-2xl border border-emerald-500\/20\">\n <i class=\"fa-solid fa-face-smile text-emerald-400 mb-4 text-2xl\"><\/i><\/p>\n<h5 class=\"font-bold mb-2\">\u00c9motions<\/h5>\n<p class=\"text-xs text-emerald-100\/60\">Joie, peur, col\u00e8re, frustration, empathie.<\/p>\n<\/div>\n<\/div>\n<div class=\"space-y-4\">\n<div class=\"bg-emerald-800\/40 p-6 rounded-2xl border border-emerald-500\/20\">\n <i class=\"fa-solid fa-dna text-emerald-400 mb-4 text-2xl\"><\/i><\/p>\n<h5 class=\"font-bold mb-2\">Besoins<\/h5>\n<p class=\"text-xs text-emerald-100\/60\">Besoins \u00e9thologiques li\u00e9s \u00e0 la g\u00e9n\u00e9tique de l’esp\u00e8ce.<\/p>\n<\/div>\n<div class=\"bg-emerald-800\/40 p-6 rounded-2xl border border-emerald-500\/20\">\n <i class=\"fa-solid fa-hourglass-half text-emerald-400 mb-4 text-2xl\"><\/i><\/p>\n<h5 class=\"font-bold mb-2\">Attentes<\/h5>\n<p class=\"text-xs text-emerald-100\/60\">Capacit\u00e9 \u00e0 anticiper un futur proche (positif ou n\u00e9gatif).<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/p>\n<div class=\"absolute -top-24 -right-24 w-96 h-96 bg-emerald-600\/10 rounded-full blur-3xl\"><\/div>\n<div class=\"absolute -bottom-24 -left-24 w-96 h-96 bg-emerald-600\/10 rounded-full blur-3xl\"><\/div>\n<\/section>\n<p> <\/p>\n<section id=\"definition\" class=\"py-24 bg-white\">\n<div class=\"container mx-auto px-6 max-w-5xl\">\n<div class=\"text-center mb-16\">\n<h2 class=\"text-emerald-600 font-bold uppercase tracking-widest text-sm mb-4\">Le Cadre de R\u00e9f\u00e9rence<\/h2>\n<h3 class=\"text-3xl md:text-4xl font-bold text-gray-900 mb-6\">La d\u00e9finition “Op\u00e9rationnelle” de l’ANSES<\/h3>\n<p class=\"text-gray-500 max-w-2xl mx-auto italic\">\n “Le bien-\u00eatre d\u2019un animal est l\u2019\u00e9tat mental et physique positif li\u00e9 \u00e0 la satisfaction de ses besoins physiologiques et comportementaux, ainsi que de ses attentes. Cet \u00e9tat varie en fonction de la perception de la situation par l\u2019animal.”<\/p>\n<\/div>\n<div class=\"grid grid-cols-1 md:grid-cols-2 gap-12 items-center\">\n<div class=\"space-y-8\">\n<div class=\"flex gap-6\">\n<div class=\"w-12 h-12 bg-emerald-100 text-emerald-700 rounded-full flex items-center justify-center shrink-0 font-bold\">1<\/div>\n<div>\n<h4 class=\"font-bold text-gray-900 mb-2\">Au-del\u00e0 de l’absence de souffrance<\/h4>\n<p class=\"text-sm text-gray-600\">Le BE n’est pas juste l’absence de maladie ou de peur. C’est la pr\u00e9sence d’\u00e9motions positives (confort, plaisir, exploration).<\/p>\n<\/div>\n<\/div>\n<div class=\"flex gap-6\">\n<div class=\"w-12 h-12 bg-emerald-100 text-emerald-700 rounded-full flex items-center justify-center shrink-0 font-bold\">2<\/div>\n<div>\n<h4 class=\"font-bold text-gray-900 mb-2\">Une perception individuelle<\/h4>\n<p class=\"text-sm text-gray-600\">Deux individus dans le m\u00eame enclos peuvent avoir des niveaux de BE diff\u00e9rents selon leur temp\u00e9rament et leur v\u00e9cu.<\/p>\n<\/div>\n<\/div>\n<div class=\"flex gap-6\">\n<div class=\"w-12 h-12 bg-emerald-100 text-emerald-700 rounded-full flex items-center justify-center shrink-0 font-bold\">3<\/div>\n<div>\n<h4 class=\"font-bold text-gray-900 mb-2\">Les Attentes<\/h4>\n<p class=\"text-sm text-gray-600\">L’animal a des pr\u00e9dictions sur son futur. Si ces pr\u00e9dictions sont constamment d\u00e9\u00e7ues, son BE s’effondre (ex: signal d’arriv\u00e9e de nourriture non suivi d’effet).<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"bg-gray-50 p-10 rounded-[3rem] border-2 border-dashed border-gray-200\">\n<h4 class=\"text-center font-bold text-gray-400 uppercase tracking-widest text-xs mb-8\">Les 5 Libert\u00e9s (FAWC, 1979)<\/h4>\n<ul class=\"space-y-5\">\n<li class=\"flex items-center gap-4 text-gray-700 font-medium\">\n <i class=\"fa-solid fa-droplet text-blue-500\"><\/i> Absence de soif, faim et malnutrition<\/li>\n<li class=\"flex items-center gap-4 text-gray-700 font-medium\">\n <i class=\"fa-solid fa-temperature-half text-orange-500\"><\/i> Absence d’inconfort thermique ou physique<\/li>\n<li class=\"flex items-center gap-4 text-gray-700 font-medium\">\n <i class=\"fa-solid fa-band-aid text-red-500\"><\/i> Absence de douleur, blessures et maladies<\/li>\n<li class=\"flex items-center gap-4 text-gray-700 font-medium\">\n <i class=\"fa-solid fa-shield text-purple-500\"><\/i> Absence de peur et de d\u00e9tresse<\/li>\n<li class=\"flex items-center gap-4 text-gray-700 font-medium\">\n <i class=\"fa-solid fa-dog text-emerald-500\"><\/i> Possibilit\u00e9 d’exprimer les comportements normaux<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<p> <\/p>\n<section id=\"evaluation\" class=\"py-24 bg-gray-50 border-y border-gray-100\">\n<div class=\"container mx-auto px-6 max-w-6xl\">\n<h2 class=\"text-3xl font-bold text-gray-900 mb-12 text-center italic\">Passer de la th\u00e9orie \u00e0 la mesure<\/h2>\n<div class=\"grid grid-cols-1 md:grid-cols-2 gap-12\">\n <\/p>\n<div class=\"space-y-6\">\n<div class=\"bg-emerald-700 text-white p-6 rounded-2xl shadow-lg\">\n<h4 class=\"text-xl font-bold mb-2\">Indicateurs de Ressources<\/h4>\n<p class=\"text-emerald-100 text-sm italic underline decoration-emerald-400 underline-offset-4\">Mesurer l’environnement (Moyens)<\/p>\n<\/div>\n<div class=\"space-y-4\">\n<div class=\"p-6 bg-white rounded-2xl border border-gray-200 flex justify-between items-center\">\n <span>Dimensions de l’abri \/ Logement<\/span><br \/>\n<i class=\"fa-solid fa-ruler-combined text-emerald-200\"><\/i><\/div>\n<div class=\"p-6 bg-white rounded-2xl border border-gray-200 flex justify-between items-center\">\n <span>Qualit\u00e9 de la liti\u00e8re et propret\u00e9<\/span><br \/>\n<i class=\"fa-solid fa-broom text-emerald-200\"><\/i><\/div>\n<div class=\"p-6 bg-white rounded-2xl border border-gray-200 flex justify-between items-center\">\n <span>Accessibilit\u00e9 aux points d’eau<\/span><br \/>\n<i class=\"fa-solid fa-faucet-drip text-emerald-200\"><\/i><\/div>\n<p class=\"text-xs text-gray-400 p-4 leading-relaxed\"><em>Note : Ces indicateurs sont n\u00e9cessaires mais insuffisants car ils ne disent pas comment l’animal se sent r\u00e9ellement dans cet espace.<\/em><\/p>\n<\/div>\n<\/div>\n<p><\/p>\n<div class=\"space-y-6\">\n<div class=\"bg-emerald-900 text-white p-6 rounded-2xl shadow-lg\">\n<h4 class=\"text-xl font-bold mb-2\">Indicateurs sur l’Animal<\/h4>\n<p class=\"text-emerald-400 text-sm italic underline decoration-emerald-700 underline-offset-4\">Mesurer l’individu (R\u00e9sultats)<\/p>\n<\/div>\n<div class=\"space-y-4\">\n<div class=\"p-6 bg-white rounded-2xl border border-emerald-100 flex justify-between items-center shadow-sm\">\n <span class=\"font-semibold text-emerald-900 underline decoration-emerald-200 decoration-4\">\u00c9tat de sant\u00e9 et boiteries<\/span><br \/>\n<i class=\"fa-solid fa-stethoscope text-emerald-600\"><\/i><\/div>\n<div class=\"p-6 bg-white rounded-2xl border border-emerald-100 flex justify-between items-center shadow-sm\">\n <span class=\"font-semibold text-emerald-900 underline decoration-emerald-200 decoration-4\">Budget Temps \u00c9thologique<\/span><br \/>\n<i class=\"fa-solid fa-clock text-emerald-600\"><\/i><\/div>\n<div class=\"p-6 bg-white rounded-2xl border border-emerald-100 flex justify-between items-center shadow-sm\">\n <span class=\"font-semibold text-emerald-900 underline decoration-emerald-200 decoration-4\">Expressions faciales (HGS, FGS)<\/span><br \/>\n<i class=\"fa-solid fa-face-grimace text-emerald-600\"><\/i><\/div>\n<p class=\"text-xs text-emerald-800 p-4 leading-relaxed font-medium bg-emerald-50 rounded-xl mt-2\">\n <strong>Focus :<\/strong> Le budget temps \u00e9value si l’animal passe le temps “normal” pour son esp\u00e8ce \u00e0 manger, dormir, interagir socialement ou explorer.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<p> <\/p>\n<section id=\"pratique\" class=\"py-24 bg-white\">\n<div class=\"container mx-auto px-6 max-w-6xl\">\n<h2 class=\"text-3xl font-bold text-gray-900 mb-16\">Conseils pour le professionnel et le gardien<\/h2>\n<div class=\"grid grid-cols-1 lg:grid-cols-3 gap-8\">\n <\/p>\n<div class=\"p-8 rounded-3xl border border-gray-100 bg-white shadow-sm hover:shadow-xl transition group\">\n<div class=\"w-16 h-16 bg-gray-50 rounded-2xl flex items-center justify-center text-emerald-600 text-2xl mb-6 group-hover:bg-emerald-600 group-hover:text-white transition-colors duration-500\">\n <i class=\"fa-solid fa-puzzle-piece\"><\/i><\/div>\n<h4 class=\"text-xl font-bold mb-4\">L’Enrichissement<\/h4>\n<p class=\"text-sm text-gray-500 leading-relaxed mb-6\">\n Ne pas se contenter de l’alimentaire. Penser \u00e0 l’enrichissement social (cong\u00e9n\u00e8res), sensoriel (odeurs), cognitif (jeux de r\u00e9flexion) et physique (relief).<\/p>\n<ul class=\"text-xs space-y-2 text-emerald-700 font-bold\">\n<li>#Vari\u00e9t\u00e9<\/li>\n<li>#Nouveaut\u00e9<\/li>\n<li>#Contr\u00f4le<\/li>\n<\/ul>\n<\/div>\n<p><\/p>\n<div class=\"p-8 rounded-3xl border border-gray-100 bg-white shadow-sm hover:shadow-xl transition group\">\n<div class=\"w-16 h-16 bg-gray-50 rounded-2xl flex items-center justify-center text-emerald-600 text-2xl mb-6 group-hover:bg-emerald-600 group-hover:text-white transition-colors duration-500\">\n <i class=\"fa-solid fa-hand-holding-heart\"><\/i><\/div>\n<h4 class=\"text-xl font-bold mb-4\">Soins Coop\u00e9ratifs<\/h4>\n<p class=\"text-sm text-gray-500 leading-relaxed mb-6\">\n Utiliser le renforcement positif pour que l’animal accepte les soins sans contrainte (Medical Training). Cela lui redonne du <strong>contr\u00f4le<\/strong> sur son corps.<\/p>\n<ul class=\"text-xs space-y-2 text-emerald-700 font-bold\">\n<li>#Consentement<\/li>\n<li>#Pr\u00e9visibilit\u00e9<\/li>\n<li>#Confiance<\/li>\n<\/ul>\n<\/div>\n<p><\/p>\n<div class=\"p-8 rounded-3xl border border-gray-100 bg-white shadow-sm hover:shadow-xl transition group\">\n<div class=\"w-16 h-16 bg-gray-50 rounded-2xl flex items-center justify-center text-emerald-600 text-2xl mb-6 group-hover:bg-emerald-600 group-hover:text-white transition-colors duration-500\">\n <i class=\"fa-solid fa-magnifying-glass\"><\/i><\/div>\n<h4 class=\"text-xl font-bold mb-4\">L’Oeil \u00c9thologique<\/h4>\n<p class=\"text-sm text-gray-500 leading-relaxed mb-6\">\n Apprendre \u00e0 d\u00e9tecter les signaux de micro-stress ou de douleur sourde : repli sur soi, regard fixe, changement de d\u00e9marche, \u00e9vitement social.<\/p>\n<ul class=\"text-xs space-y-2 text-emerald-700 font-bold\">\n<li>#Observation<\/li>\n<li>#Patience<\/li>\n<li>#Rigueur<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><\/p>\n<div class=\"mt-20 p-12 bg-emerald-50 rounded-[3rem] text-center border border-emerald-100\">\n<h3 class=\"text-2xl font-bold text-emerald-900 mb-6 underline underline-offset-8 decoration-emerald-200\">Pour conclure<\/h3>\n<p class=\"text-emerald-800 leading-relaxed max-w-3xl mx-auto text-lg italic\">\n “Am\u00e9liorer le bien-\u00eatre animal, ce n’est pas seulement lui donner ce dont nous pensons qu’il a besoin, c’est lui donner les moyens d’\u00eatre acteur de sa propre vie dans un environnement qui fait sens pour lui.”<\/p>\n<\/div>\n<\/div>\n<\/section>\n<p> <\/p>\n<footer class=\"bg-gray-900 text-gray-400 py-16\">\n<div class=\"container mx-auto px-6\">\n<div class=\"flex flex-col md:flex-row justify-between items-start gap-8\">\n<div class=\"max-w-xs\">\n<div class=\"text-xl font-bold text-white mb-4 flex items-center gap-2\">\n <i class=\"fa-solid fa-leaf text-emerald-500\"><\/i> HumAnimalis<\/div>\n<p class=\"text-sm leading-relaxed mb-6\">\n Organisme de formation d\u00e9di\u00e9 \u00e0 l’\u00e9thique et au respect de l’individu animal.<\/p>\n<div class=\"flex gap-4 text-white text-xl\">\n <i class=\"fa-brands fa-facebook hover:text-emerald-400 cursor-pointer transition\"><\/i><br \/>\n<i class=\"fa-brands fa-instagram hover:text-emerald-400 cursor-pointer transition\"><\/i><br \/>\n<i class=\"fa-brands fa-linkedin hover:text-emerald-400 cursor-pointer transition\"><\/i><\/div>\n<\/div>\n<div class=\"grid grid-cols-2 gap-16 uppercase text-[10px] font-bold tracking-widest text-emerald-500\">\n<div class=\"space-y-4\">\n<h5 class=\"text-white border-b border-gray-800 pb-2 mb-4\">Cours<\/h5>\n<p><a href=\"#philosophie\" class=\"block hover:text-white transition\">\u00c9thique<\/a><br \/>\n<a href=\"#sentience\" class=\"block hover:text-white transition\">Sentience<\/a><br \/>\n<a href=\"#definition\" class=\"block hover:text-white transition\">Concepts<\/a><\/div>\n<div class=\"space-y-4\">\n<h5 class=\"text-white border-b border-gray-800 pb-2 mb-4\">Outils<\/h5>\n<p><a href=\"#evaluation\" class=\"block hover:text-white transition\">Indicateurs<\/a><br \/>\n<a href=\"#pratique\" class=\"block hover:text-white transition\">Pratiques<\/a><br \/>\n<a href=\"#\" class=\"block hover:text-white transition\">Livre Blanc<\/a><\/div>\n<\/div>\n<\/div>\n<div class=\"mt-16 pt-8 border-t border-gray-800 text-[10px] text-center uppercase tracking-[0.4em]\">\n \u00a9 2025 HumAnimalis \u2014 Synth\u00e8se p\u00e9dagogique compl\u00e8te<\/div>\n<\/div>\n<\/footer>\n<p> <script><br \/>\n document.addEventListener('DOMContentLoaded', () => {<br \/>\n const btn = document.getElementById('mobile-menu-btn');<br \/>\n const menu = document.getElementById('mobile-menu');<\/p>\n<p> if (btn && menu) {<br \/>\n btn.addEventListener('click', () => {<br \/>\n menu.classList.toggle('hidden');<br \/>\n });<\/p>\n<p> \/\/ Fermer le menu lors du clic sur un lien<br \/>\n const links = menu.querySelectorAll('a');<br \/>\n links.forEach(link => {<br \/>\n link.addEventListener('click', () => {<br \/>\n menu.classList.add('hidden');<br \/>\n });<br \/>\n });<br \/>\n }<br \/>\n });<br \/>\n <\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n<p><!DOCTYPE html><br \/>\n<html lang=\"fr\"><br \/>\n<head><br \/>\n<meta charset=\"UTF-8\"><br \/>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\"><br \/>\n<meta name=\"theme-color\" content=\"#4338ca\"><br \/>\n<meta name=\"apple-mobile-web-app-capable\" content=\"yes\"><br \/>\n<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black-translucent\"><br \/>\n<meta name=\"apple-mobile-web-app-title\" content=\"Etho-Track\"><br \/>\n<title>Etho-Track – Bilan Transition Canine<\/title>\n \t<link rel=\"manifest\" href=\"data:application\/json;base64,ewogICJuYW1lIjogIkV0aG8tVHJhY2sgLSBCaWxhbiBUcmFuc2l0aW9uIENhbmluZSIsCiAgInNob3J0X25hbWUiOiAiRXRoby1UcmFjayIsCiAgInN0YXJ0X3VybCI6ICIuLyIsCiAgImRpc3BsYXkiOiAic3RhbmRhbG9uZSIsCiAgImJhY2tncm91bmRfY29sb3IiOiAiI2Y5ZmFmYiIsCiAgInRoZW1lX2NvbG9yIjogIiM0MzM4Y2EiLAogICJpY29ucyI6IFsKICAgIHsKICAgICAgInNyYyI6ICJkYXRhOmltYWdlL3N2Zyt4bWw7YmFzZTY0LFBITjJaeUI0Yld4dWN6MGlhSFIwY0RvdkwzZDNkeTUzTXk1dmNtY3ZNakF3TUM5emRtY2lJSFpwWlhkQ2IzZzlJakFnTUNBeE9USWdNVGt5SWo0OGNtVmpkQ0IzYVdSMGFEMGlNVGt5SWlCb1pXbG5hSFE5SWpFNU1pSWdabWxzYkQwaUl6UXpNemhqWVNJdlBqeDBaWGgwSUhnOUlqazJJaUI1UFNJNU5pSWdabWxzYkQwaUkzZG9hWFJsSWlCbWIyNTBMWE5wZW1VOUlqWXdJaUIwWlhoMExXRnVZMmh2Y2owaWJXbGtaR3hsSWlCbWIyNTBMWGRsYVdkb2REMGlZbTlzWkNJK1JUd3ZkR1Y0ZEQ0OEwzTjJaejQ9IiwKICAgICAgInNpemVzIjogIjE5MngxOTIiLAogICAgICAidHlwZSI6ICJpbWFnZS9zdmcreG1sIgogICAgfSwKICAgIHsKICAgICAgInNyYyI6ICJkYXRhOmltYWdlL3N2Zyt4bWw7YmFzZTY0LFBITjJaeUI0Yld4dWN6MGlhSFIwY0RvdkwzZDNkeTUzTXk1dmNtY3ZNakF3TUM5emRtY2lJSFpwWlhkQ2IzZzlJakFnTUNBMU1USWdOVEV5SWo0OGNtVmpkQ0IzYVdSMGFEMGlOVEV5SWlCb1pXbG5hSFE5SWpVeE1pSWdabWxzYkQwaUl6UXpNemhqWVNJdlBqeDBaWGgwSUhnOUlqSTFOaUlnZVQwaU1qVTJJaUJtYVd4c1BTSWpkMmhwZEdVaUlHWnZiblF0YzJsNlpUMGlNVFl3SWlCMFpYaDBMV0Z1WTJodmNqMGliV2xrWkd4bElpQm1iMjUwTFhkbGFXZG9kRDBpWW05c1pDSStSVHd2ZEdWNGRENDhMM04yWno0PSIsCiAgICAgICJzaXplcyI6ICI1MTJ4NTEyIiwKICAgICAgInR5cGUiOiAiaW1hZ2Uvc3ZnK3htbCIKICAgIH0KICBdCn0=\">\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script><br \/>\n<script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script><br \/>\n<script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script><br \/>\n<script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script><\/p>\n<style>\n body {<br \/>\n margin: 0;<br \/>\n padding: 0;<br \/>\n overscroll-behavior: none;<br \/>\n -webkit-user-select: none;<br \/>\n user-select: none;<br \/>\n }<br \/>\n .install-prompt {<br \/>\n position: fixed;<br \/>\n bottom: 20px;<br \/>\n left: 20px;<br \/>\n right: 20px;<br \/>\n z-index: 1000;<br \/>\n }<br \/>\n input[type=\"range\"]::-webkit-slider-thumb {<br \/>\n -webkit-appearance: none;<br \/>\n appearance: none;<br \/>\n width: 20px;<br \/>\n height: 20px;<br \/>\n border-radius: 50%;<br \/>\n background: #4f46e5;<br \/>\n cursor: pointer;<br \/>\n }<br \/>\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div id=\"root\"><\/div>\n<p><script type=\"text\/babel\"><br \/>\n const { useState, useEffect } = React;<\/p>\n<p> const EthoTrackApp = () => {<br \/>\n const [sessions, setSessions] = useState([]);<br \/>\n const [formData, setFormData] = useState({<br \/>\n date: new Date().toLocaleDateString('fr-FR'),<br \/>\n environnement: 'campagne',<br \/>\n typeSortie: 'travail',<br \/>\n latence: '2',<br \/>\n excitation: 3,<br \/>\n reactionSociale: 'indifference',<br \/>\n redescente: 'moyenne',<br \/>\n notes: ''<br \/>\n });<br \/>\n const [showReport, setShowReport] = useState(false);<br \/>\n const [showInstallPrompt, setShowInstallPrompt] = useState(false);<br \/>\n const [deferredPrompt, setDeferredPrompt] = useState(null);<\/p>\n<p> \/\/ Charger les sessions depuis le stockage local<br \/>\n useEffect(() => {<br \/>\n const saved = localStorage.getItem('etho-track-sessions');<br \/>\n if (saved) {<br \/>\n setSessions(JSON.parse(saved));<br \/>\n }<\/p>\n<p> \/\/ G\u00e9rer l'invite d'installation PWA<br \/>\n const handler = (e) => {<br \/>\n e.preventDefault();<br \/>\n setDeferredPrompt(e);<br \/>\n setShowInstallPrompt(true);<br \/>\n };<br \/>\n window.addEventListener('beforeinstallprompt', handler);<\/p>\n<p> return () => window.removeEventListener('beforeinstallprompt', handler);<br \/>\n }, []);<\/p>\n<p> \/\/ Sauvegarder automatiquement<br \/>\n useEffect(() => {<br \/>\n if (sessions.length > 0) {<br \/>\n localStorage.setItem('etho-track-sessions', JSON.stringify(sessions));<br \/>\n }<br \/>\n }, [sessions]);<\/p>\n<p> const handleInstallClick = async () => {<br \/>\n if (deferredPrompt) {<br \/>\n deferredPrompt.prompt();<br \/>\n const { outcome } = await deferredPrompt.userChoice;<br \/>\n setDeferredPrompt(null);<br \/>\n setShowInstallPrompt(false);<br \/>\n }<br \/>\n };<\/p>\n<p> const handleChange = (e) => {<br \/>\n const { name, value } = e.target;<br \/>\n setFormData(prev => ({ ...prev, [name]: value }));<br \/>\n };<\/p>\n<p> const handleSaveSession = () => {<br \/>\n const newSession = {<br \/>\n ...formData,<br \/>\n id: Date.now(),<br \/>\n timestamp: new Date().toISOString()<br \/>\n };<br \/>\n setSessions([newSession, ...sessions]);<\/p>\n<p> \/\/ Vibration de confirmation (si support\u00e9)<br \/>\n if (navigator.vibrate) {<br \/>\n navigator.vibrate(50);<br \/>\n }<\/p>\n<p> alert(\"Session enregistr\u00e9e !\");<br \/>\n setFormData({<br \/>\n ...formData,<br \/>\n notes: '',<br \/>\n date: new Date().toLocaleDateString('fr-FR')<br \/>\n });<br \/>\n };<\/p>\n<p> const calculateStats = () => {<br \/>\n if (sessions.length === 0) return null;<br \/>\n const avgExcitation = (sessions.reduce((acc, s) => acc + parseInt(s.excitation), 0) \/ sessions.length).toFixed(1);<br \/>\n const focusRate = (sessions.filter(s => s.reactionSociale === 'indifference').length \/ sessions.length * 100).toFixed(0);<br \/>\n return { avgExcitation, focusRate };<br \/>\n };<\/p>\n<p> const stats = calculateStats();<\/p>\n<p> const handleSendEmail = () => {<br \/>\n const subject = `Bilan de suivi : \u00c9volution de la transition`;<br \/>\n const body = `Bonjour,\\n\\nVoici le bilan des derni\u00e8res sessions.\\n\\nStatistiques :\\n- Excitation moyenne : ${stats?.avgExcitation}\/5\\n- Taux de focus : ${stats?.focusRate}%\\n\\nNotes r\u00e9centes : ${sessions[0]?.notes}\\n\\nCordialement,\\nVotre Comportementaliste.`;<br \/>\n window.location.href = `mailto:client@example.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;<br \/>\n };<\/p>\n<p> const handleClearData = () => {<br \/>\n if (confirm('Voulez-vous vraiment supprimer toutes les sessions ?')) {<br \/>\n setSessions([]);<br \/>\n localStorage.removeItem('etho-track-sessions');<br \/>\n alert('Donn\u00e9es supprim\u00e9es');<br \/>\n }<br \/>\n };<\/p>\n<p> return (<\/p>\n<div className=\"max-w-md mx-auto bg-gray-50 min-h-screen pb-10 font-sans text-gray-800\">\n<p> {\/* Install Prompt *\/}<br \/>\n {showInstallPrompt && (<\/p>\n<div className=\"install-prompt bg-indigo-600 text-white p-4 rounded-2xl shadow-2xl\">\n<div className=\"flex items-center justify-between gap-3\">\n<div className=\"flex-1\">\n<p className=\"font-bold text-sm\">Installer l'application<\/p>\n<p className=\"text-xs opacity-90\">Acc\u00e8s rapide depuis l'\u00e9cran d'accueil<\/p>\n<\/p>\n<\/div>\n<div className=\"flex gap-2\">\n <button \n onClick={() => setShowInstallPrompt(false)}<br \/>\n className=\"px-3 py-2 bg-white\/20 rounded-xl text-xs\"<br \/>\n ><br \/>\n Plus tard<br \/>\n <\/button><br \/>\n <button \n onClick={handleInstallClick}\n className=\"px-4 py-2 bg-white text-indigo-600 rounded-xl text-xs font-bold\"\n ><br \/>\n Installer<br \/>\n <\/button>\n <\/div>\n<\/p>\n<\/div>\n<\/div>\n<p> )}<\/p>\n<p> {\/* HEADER *\/}<\/p>\n<header className=\"bg-gradient-to-br from-indigo-700 to-indigo-900 text-white p-6 rounded-b-[2.5rem] shadow-xl\">\n<div className=\"flex justify-between items-center\">\n<div>\n<h1 className=\"text-2xl font-bold flex items-center gap-2\">\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"text-green-400\">\n <polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"><\/polyline>\n <\/svg><br \/>\n Etho-Track<br \/>\n <\/h1>\n<p className=\"text-indigo-100 text-xs opacity-80 uppercase tracking-widest mt-1\">Bilan Transition Canine<\/p>\n<\/p>\n<\/div>\n<div className=\"bg-white\/20 p-2 rounded-full\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"><\/path>\n <circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle><br \/>\n <\/svg>\n <\/div>\n<\/p>\n<\/div>\n<p> {stats && (<\/p>\n<div className=\"flex gap-4 mt-6\">\n<div className=\"bg-white\/10 flex-1 p-3 rounded-2xl backdrop-blur-sm border border-white\/10 text-center\">\n<p className=\"text-[10px] uppercase opacity-70\">Focus<\/p>\n<p className=\"text-xl font-bold\">{stats.focusRate}%<\/p>\n<\/p>\n<\/div>\n<div className=\"bg-white\/10 flex-1 p-3 rounded-2xl backdrop-blur-sm border border-white\/10 text-center\">\n<p className=\"text-[10px] uppercase opacity-70\">Excitation<\/p>\n<p className=\"text-xl font-bold\">{stats.avgExcitation}\/5<\/p>\n<\/p>\n<\/div>\n<div className=\"bg-white\/10 flex-1 p-3 rounded-2xl backdrop-blur-sm border border-white\/10 text-center\">\n<p className=\"text-[10px] uppercase opacity-70\">Sessions<\/p>\n<p className=\"text-xl font-bold\">{sessions.length}<\/p>\n<\/p>\n<\/div>\n<\/div>\n<p> )}<br \/>\n <\/header>\n<p> <main className=\"p-4 space-y-6 -mt-4\"><\/p>\n<p> {\/* FORMULAIRE *\/}<\/p>\n<div className=\"bg-white p-5 rounded-3xl shadow-sm border border-gray-100 space-y-4\">\n<h2 className=\"text-indigo-900 font-bold flex items-center gap-2 border-b pb-2\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n <path d=\"M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2\"><\/path>\n <polyline points=\"9 5 9 3 15 3 15 5\"><\/polyline>\n <line x1=\"9\" y1=\"12\" x2=\"15\" y2=\"12\"><\/line>\n <line x1=\"9\" y1=\"16\" x2=\"15\" y2=\"16\"><\/line>\n <\/svg><br \/>\n Saisie Terrain<br \/>\n <\/h2>\n<div className=\"grid grid-cols-2 gap-3\">\n<div>\n <label className=\"text-[10px] font-bold text-gray-400 uppercase\">Milieu<\/label><br \/>\n <select name=\"environnement\" value={formData.environnement} onChange={handleChange} className=\"w-full p-2 bg-gray-50 border-none rounded-xl text-sm mt-1\"><option value=\"campagne\">\ud83c\udfde\ufe0f Campagne<\/option><option value=\"ville\">\ud83c\udfd9\ufe0f Ville<\/option><\/select>\n <\/div>\n<div>\n <label className=\"text-[10px] font-bold text-gray-400 uppercase\">Activit\u00e9<\/label><br \/>\n <select name=\"typeSortie\" value={formData.typeSortie} onChange={handleChange} className=\"w-full p-2 bg-gray-50 border-none rounded-xl text-sm mt-1\"><option value=\"travail\">\ud83c\udfaf Recherche<\/option><option value=\"mulotage\">\ud83d\udc2d Mulotage<\/option><option value=\"social\">\ud83e\udd1d Social<\/option><\/select>\n <\/div>\n<\/p>\n<\/div>\n<div>\n <label className=\"text-[10px] font-bold text-gray-400 uppercase\">Latence D\u00e9connexion<\/label><br \/>\n <select name=\"latence\" value={formData.latence} onChange={handleChange} className=\"w-full p-3 bg-gray-50 border-none rounded-xl text-sm mt-1\"><option value=\"1\">Imm\u00e9diate (< 2s)<\/option><option value=\"2\">Mod\u00e9r\u00e9e (2s - 10s)<\/option><option value=\"3\">Difficile (> 10s)<\/option><\/select>\n <\/div>\n<div>\n <label className=\"text-[10px] font-bold text-gray-400 uppercase flex justify-between\"><br \/>\n Niveau Excitation <span>{formData.excitation}\/5<\/span><br \/>\n <\/label><br \/>\n <input \n type=\"range\" name=\"excitation\" min=\"1\" max=\"5\" \n value={formData.excitation} onChange={handleChange}\n className=\"w-full h-2 bg-indigo-100 rounded-lg appearance-none cursor-pointer mt-2\"\n \/>\n <\/div>\n<div>\n <label className=\"text-[10px] font-bold text-gray-400 uppercase\">R\u00e9action Sociale Humaine<\/label><br \/>\n <select name=\"reactionSociale\" value={formData.reactionSociale} onChange={handleChange} className=\"w-full p-3 bg-gray-50 border-none rounded-xl text-sm mt-1\"><option value=\"indifference\">\ud83d\ude0c Focus Ma\u00eetre<\/option><option value=\"vigilance\">\ud83e\uddd0 Vigilance<\/option><option value=\"tension\">\ud83d\udc15 Tension laisse<\/option><option value=\"contact\">\ud83d\ude80 Fonce au contact<\/option><\/select>\n <\/div>\n<p> <textarea \n name=\"notes\" value={formData.notes} onChange={handleChange}\n placeholder=\"Notes (vent, stimuli particuliers...)\"\n className=\"w-full p-3 bg-gray-50 border-none rounded-xl text-sm h-20 outline-none focus:ring-1 focus:ring-indigo-400\"\n ><\/textarea><\/p>\n<p> <button \n onClick={handleSaveSession}\n className=\"w-full bg-green-500 hover:bg-green-600 active:bg-green-700 text-white font-bold py-4 rounded-2xl shadow-lg flex items-center justify-center gap-2 transition-all active:scale-95\"\n ><br \/>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n <path d=\"M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z\"><\/path>\n <polyline points=\"17 21 17 13 7 13 7 21\"><\/polyline>\n <polyline points=\"7 3 7 8 15 8\"><\/polyline>\n <\/svg><br \/>\n ENREGISTRER LA SESSION<br \/>\n <\/button>\n <\/div>\n<p> {\/* ACTIONS *\/}<br \/>\n {sessions.length > 0 && (<\/p>\n<div className=\"flex gap-3\">\n <button \n onClick={() => setShowReport(!showReport)}<br \/>\n className=\"flex-1 bg-white border-2 border-indigo-600 text-indigo-600 font-bold py-3 rounded-2xl flex items-center justify-center gap-2 shadow-sm active:scale-95 transition-transform\"<br \/>\n ><br \/>\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"><\/path>\n <polyline points=\"14 2 14 8 20 8\"><\/polyline>\n <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"><\/line>\n <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"><\/line>\n <polyline points=\"10 9 9 9 8 9\"><\/polyline>\n <\/svg><br \/>\n {showReport ? \"Masquer\" : \"Voir Rapport\"}<br \/>\n <\/button><br \/>\n <button \n onClick={handleSendEmail}\n className=\"flex-1 bg-indigo-600 text-white font-bold py-3 rounded-2xl flex items-center justify-center gap-2 shadow-lg active:scale-95 transition-transform\"\n ><br \/>\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"><\/line>\n <polygon points=\"22 2 15 22 11 13 2 9 22 2\"><\/polygon>\n <\/svg><br \/>\n Envoyer<br \/>\n <\/button>\n <\/div>\n<p> )}<\/p>\n<p> {\/* RAPPORT *\/}<br \/>\n {showReport && stats && (<\/p>\n<div className=\"bg-indigo-50 p-5 rounded-3xl border-2 border-dashed border-indigo-200\">\n<h3 className=\"font-bold text-indigo-900 mb-3 flex items-center gap-2\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><br \/>\n <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><br \/>\n <circle cx=\"12\" cy=\"12\" r=\"6\"><\/circle><br \/>\n <circle cx=\"12\" cy=\"12\" r=\"2\"><\/circle><br \/>\n <\/svg><br \/>\n Analyse des tendances<br \/>\n <\/h3>\n<div className=\"space-y-3 text-sm text-indigo-800\">\n<p className=\"flex justify-between border-b border-indigo-100 pb-1\">\n <span>Stabilit\u00e9 \u00e9motionnelle :<\/span><br \/>\n <span className=\"font-bold\">{stats.avgExcitation < 3 ? \"Excellente\" : \"\u00c0 surveiller\"}<\/span>\n <\/p>\n<p className=\"flex justify-between border-b border-indigo-100 pb-1\">\n <span>Renoncement social :<\/span><br \/>\n <span className=\"font-bold\">{stats.focusRate}% de r\u00e9ussite<\/span>\n <\/p>\n<div className=\"mt-4 p-3 bg-white rounded-xl text-xs italic text-gray-600 shadow-sm\">\n \"La chienne semble {stats.avgExcitation > 3 ? 'satur\u00e9e' : '\u00e9quilibr\u00e9e'}.<br \/>\n {stats.focusRate < 50 ? ' Renforcer les exercices de calme.' : ' Pr\u00eate pour une immersion urbaine mod\u00e9r\u00e9e.'}\"\n <\/div>\n<\/p>\n<\/div>\n<\/div>\n<p> )}<\/p>\n<p> {\/* Bouton de suppression *\/}<br \/>\n {sessions.length > 0 && (<br \/>\n <button \n onClick={handleClearData}\n className=\"w-full bg-red-50 text-red-600 font-bold py-3 rounded-2xl border-2 border-red-200 active:scale-95 transition-transform\"\n ><br \/>\n R\u00e9initialiser les donn\u00e9es<br \/>\n <\/button><br \/>\n )}<br \/>\n <\/main>\n <\/div>\n<p> );<br \/>\n };<\/p>\n<p> ReactDOM.render(<EthoTrackApp \/>, document.getElementById('root'));<br \/>\n <\/script><\/p>\n<p><script><br \/>\n \/\/ Service Worker pour PWA<br \/>\n if ('serviceWorker' in navigator) {<br \/>\n window.addEventListener('load', () => {<br \/>\n const swCode = `<br \/>\n const CACHE_NAME = 'etho-track-v1';<\/p>\n<p> self.addEventListener('install', (event) => {<br \/>\n self.skipWaiting();<br \/>\n });<\/p>\n<p> self.addEventListener('activate', (event) => {<br \/>\n event.waitUntil(clients.claim());<br \/>\n });<\/p>\n<p> self.addEventListener('fetch', (event) => {<br \/>\n event.respondWith(<br \/>\n caches.match(event.request).then((response) => {<br \/>\n return response || fetch(event.request);<br \/>\n })<br \/>\n );<br \/>\n });<br \/>\n `;<\/p>\n<p> const blob = new Blob([swCode], { type: 'application\/javascript' });<br \/>\n const swUrl = URL.createObjectURL(blob);<\/p>\n<p> navigator.serviceWorker.register(swUrl).then(() => {<br \/>\n console.log('Service Worker enregistr\u00e9');<br \/>\n });<br \/>\n });<br \/>\n }<br \/>\n <\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bien-\u00catre Animal et Sentience | HumAnimalis HumAnimalis \u00c9thique Sentience Bien-\u00catre \u00c9valuation Terrain \u00c9thique Sentience Bien-\u00catre \u00c9valuation Terrain Module Int\u00e9gral 2025 Le Bien-\u00catre Animal : Science et Conscience De la reconnaissance juridique de 2015 aux derni\u00e8res avanc\u00e9es de l’\u00e9thologie, explorez les fondements de notre relation aux \u00eatres sentients. L’\u00c9volution Un changement de paradigme 1976 Code Rural : L’animal est reconnu comme “\u00eatre sensible”. 1978 D\u00e9claration Universelle […]<\/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-174","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.thometneru.fr\/index.php\/wp-json\/wp\/v2\/pages\/174","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=174"}],"version-history":[{"count":7,"href":"https:\/\/www.thometneru.fr\/index.php\/wp-json\/wp\/v2\/pages\/174\/revisions"}],"predecessor-version":[{"id":192,"href":"https:\/\/www.thometneru.fr\/index.php\/wp-json\/wp\/v2\/pages\/174\/revisions\/192"}],"wp:attachment":[{"href":"https:\/\/www.thometneru.fr\/index.php\/wp-json\/wp\/v2\/media?parent=174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":174,"date":"2026-01-10T14:55:19","date_gmt":"2026-01-10T14:55:19","guid":{"rendered":"https:\/\/www.thometneru.fr\/?page_id=174"},"modified":"2026-01-13T22:55:14","modified_gmt":"2026-01-13T22:55:14","slug":"be","status":"publish","type":"page","link":"https:\/\/www.thometneru.fr\/index.php\/be\/","title":{"rendered":"BE"},"content":{"rendered":"

\n
\n
\n
\n
\nBien-\u00catre Animal et Sentience | HumAnimalis<\/title><br \/>\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \t<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n<style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;600;700&family=Open+Sans:wght@400;600&display=swap');<\/p>\n<p> body {<br \/>\n font-family: 'Open Sans', sans-serif;<br \/>\n padding-top: 80px;<br \/>\n }<br \/>\n h1, h2, h3, h4 {<br \/>\n font-family: 'Montserrat', sans-serif;<br \/>\n }<br \/>\n .bg-pattern {<br \/>\n background-color: #f9fafb;<br \/>\n background-image: url(\"data:image\/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23065f46' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E\");<br \/>\n }<br \/>\n .timeline-item::before {<br \/>\n content: '';<br \/>\n position: absolute;<br \/>\n left: -9px;<br \/>\n top: 0;<br \/>\n width: 18px;<br \/>\n height: 18px;<br \/>\n background-color: #10b981;<br \/>\n border-radius: 50%;<br \/>\n border: 4px solid #fff;<br \/>\n }<br \/>\n <\/style>\n<p><\/head><br \/>\n<body class=\"text-gray-700 bg-pattern\"><\/p>\n<p><\/p>\n<nav class=\"bg-white\/95 backdrop-blur-md text-emerald-900 fixed top-0 w-full z-50 border-b border-gray-100\">\n<div class=\"container mx-auto px-6 py-4 flex justify-between items-center\">\n <a href=\"#\" class=\"text-xl font-bold flex items-center gap-2 text-emerald-800\"><br \/>\n<i class=\"fa-solid fa-paw\"><\/i> HumAnimalis<br \/>\n<\/a><\/p>\n<div class=\"hidden md:flex space-x-6\">\n <a href=\"#philosophie\" class=\"hover:text-emerald-500 transition text-xs font-bold uppercase tracking-widest\">\u00c9thique<\/a><br \/>\n<a href=\"#sentience\" class=\"hover:text-emerald-500 transition text-xs font-bold uppercase tracking-widest\">Sentience<\/a><br \/>\n<a href=\"#definition\" class=\"hover:text-emerald-500 transition text-xs font-bold uppercase tracking-widest\">Bien-\u00catre<\/a><br \/>\n<a href=\"#evaluation\" class=\"hover:text-emerald-500 transition text-xs font-bold uppercase tracking-widest\">\u00c9valuation<\/a><br \/>\n<a href=\"#pratique\" class=\"hover:text-emerald-500 transition text-xs font-bold uppercase tracking-widest\">Terrain<\/a><\/div>\n<p><button id=\"mobile-menu-btn\" class=\"md:hidden text-2xl\"><i class=\"fa-solid fa-bars-staggered\"><\/i><\/button><\/div>\n<p><\/p>\n<div id=\"mobile-menu\" class=\"hidden md:hidden bg-white border-b border-gray-100 p-6 space-y-4 shadow-inner\">\n <a href=\"#philosophie\" class=\"block font-bold text-emerald-800 uppercase text-xs\">\u00c9thique<\/a><br \/>\n<a href=\"#sentience\" class=\"block font-bold text-emerald-800 uppercase text-xs\">Sentience<\/a><br \/>\n<a href=\"#definition\" class=\"block font-bold text-emerald-800 uppercase text-xs\">Bien-\u00catre<\/a><br \/>\n<a href=\"#evaluation\" class=\"block font-bold text-emerald-800 uppercase text-xs\">\u00c9valuation<\/a><br \/>\n<a href=\"#pratique\" class=\"block font-bold text-emerald-800 uppercase text-xs\">Terrain<\/a><\/div>\n<\/nav>\n<p> <\/p>\n<header id=\"intro\" class=\"py-20 bg-white border-b border-gray-100\">\n<div class=\"container mx-auto px-6\">\n<div class=\"max-w-4xl mx-auto text-center\">\n<div class=\"inline-flex items-center gap-2 text-emerald-600 font-bold text-xs uppercase tracking-[0.3em] mb-6\">\n <span class=\"w-12 h-px bg-emerald-600\"><\/span><br \/>\nModule Int\u00e9gral 2025<br \/>\n<span class=\"w-12 h-px bg-emerald-600\"><\/span><\/div>\n<h1 class=\"text-4xl md:text-6xl font-extrabold text-gray-900 mb-8 leading-tight\">\n Le Bien-\u00catre Animal :<br \/>\n<span class=\"text-emerald-700\">Science et Conscience<\/span><\/h1>\n<p class=\"text-xl text-gray-600 leading-relaxed\">\n De la reconnaissance juridique de 2015 aux derni\u00e8res avanc\u00e9es de l’\u00e9thologie, explorez les fondements de notre relation aux \u00eatres sentients.<\/p>\n<\/div>\n<\/div>\n<\/header>\n<p> <\/p>\n<section id=\"philosophie\" class=\"py-24 bg-white\">\n<div class=\"container mx-auto px-6 max-w-6xl\">\n<div class=\"grid grid-cols-1 lg:grid-cols-12 gap-16\">\n<div class=\"lg:col-span-4\">\n<h2 class=\"text-emerald-600 font-bold uppercase tracking-widest text-sm mb-4\">L’\u00c9volution<\/h2>\n<h3 class=\"text-3xl font-bold text-gray-900 mb-8\">Un changement de paradigme<\/h3>\n<div class=\"relative border-l-2 border-emerald-100 ml-2 space-y-10\">\n<div class=\"timeline-item pl-8 relative\">\n<h4 class=\"font-bold text-gray-800\">1976<\/h4>\n<p class=\"text-sm text-gray-500 italic mb-2 leading-relaxed\">Code Rural : L’animal est reconnu comme “\u00eatre sensible”.<\/p>\n<\/div>\n<div class=\"timeline-item pl-8 relative\">\n<h4 class=\"font-bold text-gray-800\">1978<\/h4>\n<p class=\"text-sm text-gray-500 italic mb-2 leading-relaxed\">D\u00e9claration Universelle des Droits de l’Animal (UNESCO).<\/p>\n<\/div>\n<div class=\"timeline-item pl-8 relative\">\n<h4 class=\"font-bold text-gray-800\">2015<\/h4>\n<p class=\"text-sm text-gray-500 italic mb-2 leading-relaxed\">Code Civil : L’animal n’est plus un “bien meuble” mais un \u00eatre vivant dou\u00e9 de sensibilit\u00e9.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-6\">\n<div class=\"bg-gray-50 p-8 rounded-3xl border border-gray-100 hover:bg-emerald-50 transition\">\n<div class=\"text-emerald-600 mb-4\"><i class=\"fa-solid fa-scale-unbalanced text-2xl\"><\/i><\/div>\n<h4 class=\"text-xl font-bold mb-3\">L’Utilitarisme<\/h4>\n<p class=\"text-sm text-gray-600 leading-relaxed\">Bas\u00e9 sur le calcul plaisir\/douleur (Jeremy Bentham). On cherche \u00e0 minimiser la souffrance globale, mais l’utilisation de l’animal reste possible si le b\u00e9n\u00e9fice humain est jug\u00e9 sup\u00e9rieur.<\/p>\n<\/div>\n<div class=\"bg-gray-50 p-8 rounded-3xl border border-gray-100 hover:bg-emerald-50 transition\">\n<div class=\"text-emerald-600 mb-4\"><i class=\"fa-solid fa-shield-dog text-2xl\"><\/i><\/div>\n<h4 class=\"text-xl font-bold mb-3\">Le D\u00e9ontologisme<\/h4>\n<p class=\"text-sm text-gray-600 leading-relaxed\">Port\u00e9 par Tom Regan. L’animal a une valeur intrins\u00e8que (“sujet d’une vie”). Il poss\u00e8de des droits moraux qui interdisent de le consid\u00e9rer comme une simple ressource.<\/p>\n<\/div>\n<div class=\"bg-gray-50 p-8 rounded-3xl border border-gray-100 hover:bg-emerald-50 transition\">\n<div class=\"text-emerald-600 mb-4\"><i class=\"fa-solid fa-heart-pulse text-2xl\"><\/i><\/div>\n<h4 class=\"text-xl font-bold mb-3\">Le Welfarisme<\/h4>\n<p class=\"text-sm text-gray-600 leading-relaxed\">Le courant dominant actuel. Il ne remet pas en cause l’usage de l’animal mais impose l’obligation l\u00e9gale et morale de lui offrir des conditions de vie optimales.<\/p>\n<\/div>\n<div class=\"bg-gray-50 p-8 rounded-3xl border border-gray-100 hover:bg-emerald-50 transition\">\n<div class=\"text-emerald-600 mb-4\"><i class=\"fa-solid fa-handshake-slash text-2xl\"><\/i><\/div>\n<h4 class=\"text-xl font-bold mb-3\">L’Abolitionnisme<\/h4>\n<p class=\"text-sm text-gray-600 leading-relaxed\">Position radicale (Gary Francione) pr\u00f4nant la fin de tout statut de propri\u00e9t\u00e9. Pour ce courant, l’humanit\u00e9 doit cesser toute exploitation animale, quelle qu’elle soit.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<p> <\/p>\n<section id=\"sentience\" class=\"py-24 bg-gray-900 text-white overflow-hidden relative\">\n<div class=\"container mx-auto px-6 max-w-6xl relative z-10\">\n<div class=\"flex flex-col lg:flex-row gap-16 items-center\">\n<div class=\"lg:w-1\/2\">\n<h2 class=\"text-emerald-400 font-bold uppercase tracking-widest text-sm mb-4\">Concept Scientifique<\/h2>\n<h3 class=\"text-4xl font-bold mb-8 leading-tight\">La Sentience :<br \/>\nL’exp\u00e9rience du monde<\/h3>\n<p class=\"text-emerald-100\/80 text-lg mb-8 leading-relaxed\">\n La sentience est la capacit\u00e9 d’\u00e9prouver des \u00e9tats affectifs et de percevoir son environnement de fa\u00e7on subjective. Elle implique une <strong>conscience de soi<\/strong> et une <strong>\u00e9valuation<\/strong> constante de la situation.<\/p>\n<div class=\"bg-white\/10 backdrop-blur-md p-8 rounded-3xl border border-white\/20\">\n<h4 class=\"text-emerald-400 font-bold mb-4 flex items-center gap-2\">\n <i class=\"fa-solid fa-eye\"><\/i> L’Umwelt (Jakob von Uexk\u00fcll)<\/h4>\n<p class=\"text-sm text-emerald-50\/70 leading-relaxed\">\n Chaque animal vit dans son propre “monde propre”. Un chien per\u00e7oit le monde par les odeurs (3D olfactive), un cheval par un champ visuel quasi circulaire. Comprendre le Bien-\u00catre, c’est d’abord respecter cette bulle sensorielle sp\u00e9cifique \u00e0 l’esp\u00e8ce.<\/p>\n<\/div>\n<\/div>\n<div class=\"lg:w-1\/2 grid grid-cols-2 gap-4\">\n<div class=\"space-y-4 mt-8\">\n<div class=\"bg-emerald-800\/40 p-6 rounded-2xl border border-emerald-500\/20\">\n <i class=\"fa-solid fa-brain text-emerald-400 mb-4 text-2xl\"><\/i><\/p>\n<h5 class=\"font-bold mb-2\">Cognition<\/h5>\n<p class=\"text-xs text-emerald-100\/60\">Capacit\u00e9 de r\u00e9solution de probl\u00e8mes et m\u00e9moire.<\/p>\n<\/div>\n<div class=\"bg-emerald-800\/40 p-6 rounded-2xl border border-emerald-500\/20\">\n <i class=\"fa-solid fa-face-smile text-emerald-400 mb-4 text-2xl\"><\/i><\/p>\n<h5 class=\"font-bold mb-2\">\u00c9motions<\/h5>\n<p class=\"text-xs text-emerald-100\/60\">Joie, peur, col\u00e8re, frustration, empathie.<\/p>\n<\/div>\n<\/div>\n<div class=\"space-y-4\">\n<div class=\"bg-emerald-800\/40 p-6 rounded-2xl border border-emerald-500\/20\">\n <i class=\"fa-solid fa-dna text-emerald-400 mb-4 text-2xl\"><\/i><\/p>\n<h5 class=\"font-bold mb-2\">Besoins<\/h5>\n<p class=\"text-xs text-emerald-100\/60\">Besoins \u00e9thologiques li\u00e9s \u00e0 la g\u00e9n\u00e9tique de l’esp\u00e8ce.<\/p>\n<\/div>\n<div class=\"bg-emerald-800\/40 p-6 rounded-2xl border border-emerald-500\/20\">\n <i class=\"fa-solid fa-hourglass-half text-emerald-400 mb-4 text-2xl\"><\/i><\/p>\n<h5 class=\"font-bold mb-2\">Attentes<\/h5>\n<p class=\"text-xs text-emerald-100\/60\">Capacit\u00e9 \u00e0 anticiper un futur proche (positif ou n\u00e9gatif).<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><\/p>\n<div class=\"absolute -top-24 -right-24 w-96 h-96 bg-emerald-600\/10 rounded-full blur-3xl\"><\/div>\n<div class=\"absolute -bottom-24 -left-24 w-96 h-96 bg-emerald-600\/10 rounded-full blur-3xl\"><\/div>\n<\/section>\n<p> <\/p>\n<section id=\"definition\" class=\"py-24 bg-white\">\n<div class=\"container mx-auto px-6 max-w-5xl\">\n<div class=\"text-center mb-16\">\n<h2 class=\"text-emerald-600 font-bold uppercase tracking-widest text-sm mb-4\">Le Cadre de R\u00e9f\u00e9rence<\/h2>\n<h3 class=\"text-3xl md:text-4xl font-bold text-gray-900 mb-6\">La d\u00e9finition “Op\u00e9rationnelle” de l’ANSES<\/h3>\n<p class=\"text-gray-500 max-w-2xl mx-auto italic\">\n “Le bien-\u00eatre d\u2019un animal est l\u2019\u00e9tat mental et physique positif li\u00e9 \u00e0 la satisfaction de ses besoins physiologiques et comportementaux, ainsi que de ses attentes. Cet \u00e9tat varie en fonction de la perception de la situation par l\u2019animal.”<\/p>\n<\/div>\n<div class=\"grid grid-cols-1 md:grid-cols-2 gap-12 items-center\">\n<div class=\"space-y-8\">\n<div class=\"flex gap-6\">\n<div class=\"w-12 h-12 bg-emerald-100 text-emerald-700 rounded-full flex items-center justify-center shrink-0 font-bold\">1<\/div>\n<div>\n<h4 class=\"font-bold text-gray-900 mb-2\">Au-del\u00e0 de l’absence de souffrance<\/h4>\n<p class=\"text-sm text-gray-600\">Le BE n’est pas juste l’absence de maladie ou de peur. C’est la pr\u00e9sence d’\u00e9motions positives (confort, plaisir, exploration).<\/p>\n<\/div>\n<\/div>\n<div class=\"flex gap-6\">\n<div class=\"w-12 h-12 bg-emerald-100 text-emerald-700 rounded-full flex items-center justify-center shrink-0 font-bold\">2<\/div>\n<div>\n<h4 class=\"font-bold text-gray-900 mb-2\">Une perception individuelle<\/h4>\n<p class=\"text-sm text-gray-600\">Deux individus dans le m\u00eame enclos peuvent avoir des niveaux de BE diff\u00e9rents selon leur temp\u00e9rament et leur v\u00e9cu.<\/p>\n<\/div>\n<\/div>\n<div class=\"flex gap-6\">\n<div class=\"w-12 h-12 bg-emerald-100 text-emerald-700 rounded-full flex items-center justify-center shrink-0 font-bold\">3<\/div>\n<div>\n<h4 class=\"font-bold text-gray-900 mb-2\">Les Attentes<\/h4>\n<p class=\"text-sm text-gray-600\">L’animal a des pr\u00e9dictions sur son futur. Si ces pr\u00e9dictions sont constamment d\u00e9\u00e7ues, son BE s’effondre (ex: signal d’arriv\u00e9e de nourriture non suivi d’effet).<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"bg-gray-50 p-10 rounded-[3rem] border-2 border-dashed border-gray-200\">\n<h4 class=\"text-center font-bold text-gray-400 uppercase tracking-widest text-xs mb-8\">Les 5 Libert\u00e9s (FAWC, 1979)<\/h4>\n<ul class=\"space-y-5\">\n<li class=\"flex items-center gap-4 text-gray-700 font-medium\">\n <i class=\"fa-solid fa-droplet text-blue-500\"><\/i> Absence de soif, faim et malnutrition<\/li>\n<li class=\"flex items-center gap-4 text-gray-700 font-medium\">\n <i class=\"fa-solid fa-temperature-half text-orange-500\"><\/i> Absence d’inconfort thermique ou physique<\/li>\n<li class=\"flex items-center gap-4 text-gray-700 font-medium\">\n <i class=\"fa-solid fa-band-aid text-red-500\"><\/i> Absence de douleur, blessures et maladies<\/li>\n<li class=\"flex items-center gap-4 text-gray-700 font-medium\">\n <i class=\"fa-solid fa-shield text-purple-500\"><\/i> Absence de peur et de d\u00e9tresse<\/li>\n<li class=\"flex items-center gap-4 text-gray-700 font-medium\">\n <i class=\"fa-solid fa-dog text-emerald-500\"><\/i> Possibilit\u00e9 d’exprimer les comportements normaux<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<p> <\/p>\n<section id=\"evaluation\" class=\"py-24 bg-gray-50 border-y border-gray-100\">\n<div class=\"container mx-auto px-6 max-w-6xl\">\n<h2 class=\"text-3xl font-bold text-gray-900 mb-12 text-center italic\">Passer de la th\u00e9orie \u00e0 la mesure<\/h2>\n<div class=\"grid grid-cols-1 md:grid-cols-2 gap-12\">\n <\/p>\n<div class=\"space-y-6\">\n<div class=\"bg-emerald-700 text-white p-6 rounded-2xl shadow-lg\">\n<h4 class=\"text-xl font-bold mb-2\">Indicateurs de Ressources<\/h4>\n<p class=\"text-emerald-100 text-sm italic underline decoration-emerald-400 underline-offset-4\">Mesurer l’environnement (Moyens)<\/p>\n<\/div>\n<div class=\"space-y-4\">\n<div class=\"p-6 bg-white rounded-2xl border border-gray-200 flex justify-between items-center\">\n <span>Dimensions de l’abri \/ Logement<\/span><br \/>\n<i class=\"fa-solid fa-ruler-combined text-emerald-200\"><\/i><\/div>\n<div class=\"p-6 bg-white rounded-2xl border border-gray-200 flex justify-between items-center\">\n <span>Qualit\u00e9 de la liti\u00e8re et propret\u00e9<\/span><br \/>\n<i class=\"fa-solid fa-broom text-emerald-200\"><\/i><\/div>\n<div class=\"p-6 bg-white rounded-2xl border border-gray-200 flex justify-between items-center\">\n <span>Accessibilit\u00e9 aux points d’eau<\/span><br \/>\n<i class=\"fa-solid fa-faucet-drip text-emerald-200\"><\/i><\/div>\n<p class=\"text-xs text-gray-400 p-4 leading-relaxed\"><em>Note : Ces indicateurs sont n\u00e9cessaires mais insuffisants car ils ne disent pas comment l’animal se sent r\u00e9ellement dans cet espace.<\/em><\/p>\n<\/div>\n<\/div>\n<p><\/p>\n<div class=\"space-y-6\">\n<div class=\"bg-emerald-900 text-white p-6 rounded-2xl shadow-lg\">\n<h4 class=\"text-xl font-bold mb-2\">Indicateurs sur l’Animal<\/h4>\n<p class=\"text-emerald-400 text-sm italic underline decoration-emerald-700 underline-offset-4\">Mesurer l’individu (R\u00e9sultats)<\/p>\n<\/div>\n<div class=\"space-y-4\">\n<div class=\"p-6 bg-white rounded-2xl border border-emerald-100 flex justify-between items-center shadow-sm\">\n <span class=\"font-semibold text-emerald-900 underline decoration-emerald-200 decoration-4\">\u00c9tat de sant\u00e9 et boiteries<\/span><br \/>\n<i class=\"fa-solid fa-stethoscope text-emerald-600\"><\/i><\/div>\n<div class=\"p-6 bg-white rounded-2xl border border-emerald-100 flex justify-between items-center shadow-sm\">\n <span class=\"font-semibold text-emerald-900 underline decoration-emerald-200 decoration-4\">Budget Temps \u00c9thologique<\/span><br \/>\n<i class=\"fa-solid fa-clock text-emerald-600\"><\/i><\/div>\n<div class=\"p-6 bg-white rounded-2xl border border-emerald-100 flex justify-between items-center shadow-sm\">\n <span class=\"font-semibold text-emerald-900 underline decoration-emerald-200 decoration-4\">Expressions faciales (HGS, FGS)<\/span><br \/>\n<i class=\"fa-solid fa-face-grimace text-emerald-600\"><\/i><\/div>\n<p class=\"text-xs text-emerald-800 p-4 leading-relaxed font-medium bg-emerald-50 rounded-xl mt-2\">\n <strong>Focus :<\/strong> Le budget temps \u00e9value si l’animal passe le temps “normal” pour son esp\u00e8ce \u00e0 manger, dormir, interagir socialement ou explorer.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<p> <\/p>\n<section id=\"pratique\" class=\"py-24 bg-white\">\n<div class=\"container mx-auto px-6 max-w-6xl\">\n<h2 class=\"text-3xl font-bold text-gray-900 mb-16\">Conseils pour le professionnel et le gardien<\/h2>\n<div class=\"grid grid-cols-1 lg:grid-cols-3 gap-8\">\n <\/p>\n<div class=\"p-8 rounded-3xl border border-gray-100 bg-white shadow-sm hover:shadow-xl transition group\">\n<div class=\"w-16 h-16 bg-gray-50 rounded-2xl flex items-center justify-center text-emerald-600 text-2xl mb-6 group-hover:bg-emerald-600 group-hover:text-white transition-colors duration-500\">\n <i class=\"fa-solid fa-puzzle-piece\"><\/i><\/div>\n<h4 class=\"text-xl font-bold mb-4\">L’Enrichissement<\/h4>\n<p class=\"text-sm text-gray-500 leading-relaxed mb-6\">\n Ne pas se contenter de l’alimentaire. Penser \u00e0 l’enrichissement social (cong\u00e9n\u00e8res), sensoriel (odeurs), cognitif (jeux de r\u00e9flexion) et physique (relief).<\/p>\n<ul class=\"text-xs space-y-2 text-emerald-700 font-bold\">\n<li>#Vari\u00e9t\u00e9<\/li>\n<li>#Nouveaut\u00e9<\/li>\n<li>#Contr\u00f4le<\/li>\n<\/ul>\n<\/div>\n<p><\/p>\n<div class=\"p-8 rounded-3xl border border-gray-100 bg-white shadow-sm hover:shadow-xl transition group\">\n<div class=\"w-16 h-16 bg-gray-50 rounded-2xl flex items-center justify-center text-emerald-600 text-2xl mb-6 group-hover:bg-emerald-600 group-hover:text-white transition-colors duration-500\">\n <i class=\"fa-solid fa-hand-holding-heart\"><\/i><\/div>\n<h4 class=\"text-xl font-bold mb-4\">Soins Coop\u00e9ratifs<\/h4>\n<p class=\"text-sm text-gray-500 leading-relaxed mb-6\">\n Utiliser le renforcement positif pour que l’animal accepte les soins sans contrainte (Medical Training). Cela lui redonne du <strong>contr\u00f4le<\/strong> sur son corps.<\/p>\n<ul class=\"text-xs space-y-2 text-emerald-700 font-bold\">\n<li>#Consentement<\/li>\n<li>#Pr\u00e9visibilit\u00e9<\/li>\n<li>#Confiance<\/li>\n<\/ul>\n<\/div>\n<p><\/p>\n<div class=\"p-8 rounded-3xl border border-gray-100 bg-white shadow-sm hover:shadow-xl transition group\">\n<div class=\"w-16 h-16 bg-gray-50 rounded-2xl flex items-center justify-center text-emerald-600 text-2xl mb-6 group-hover:bg-emerald-600 group-hover:text-white transition-colors duration-500\">\n <i class=\"fa-solid fa-magnifying-glass\"><\/i><\/div>\n<h4 class=\"text-xl font-bold mb-4\">L’Oeil \u00c9thologique<\/h4>\n<p class=\"text-sm text-gray-500 leading-relaxed mb-6\">\n Apprendre \u00e0 d\u00e9tecter les signaux de micro-stress ou de douleur sourde : repli sur soi, regard fixe, changement de d\u00e9marche, \u00e9vitement social.<\/p>\n<ul class=\"text-xs space-y-2 text-emerald-700 font-bold\">\n<li>#Observation<\/li>\n<li>#Patience<\/li>\n<li>#Rigueur<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<p><\/p>\n<div class=\"mt-20 p-12 bg-emerald-50 rounded-[3rem] text-center border border-emerald-100\">\n<h3 class=\"text-2xl font-bold text-emerald-900 mb-6 underline underline-offset-8 decoration-emerald-200\">Pour conclure<\/h3>\n<p class=\"text-emerald-800 leading-relaxed max-w-3xl mx-auto text-lg italic\">\n “Am\u00e9liorer le bien-\u00eatre animal, ce n’est pas seulement lui donner ce dont nous pensons qu’il a besoin, c’est lui donner les moyens d’\u00eatre acteur de sa propre vie dans un environnement qui fait sens pour lui.”<\/p>\n<\/div>\n<\/div>\n<\/section>\n<p> <\/p>\n<footer class=\"bg-gray-900 text-gray-400 py-16\">\n<div class=\"container mx-auto px-6\">\n<div class=\"flex flex-col md:flex-row justify-between items-start gap-8\">\n<div class=\"max-w-xs\">\n<div class=\"text-xl font-bold text-white mb-4 flex items-center gap-2\">\n <i class=\"fa-solid fa-leaf text-emerald-500\"><\/i> HumAnimalis<\/div>\n<p class=\"text-sm leading-relaxed mb-6\">\n Organisme de formation d\u00e9di\u00e9 \u00e0 l’\u00e9thique et au respect de l’individu animal.<\/p>\n<div class=\"flex gap-4 text-white text-xl\">\n <i class=\"fa-brands fa-facebook hover:text-emerald-400 cursor-pointer transition\"><\/i><br \/>\n<i class=\"fa-brands fa-instagram hover:text-emerald-400 cursor-pointer transition\"><\/i><br \/>\n<i class=\"fa-brands fa-linkedin hover:text-emerald-400 cursor-pointer transition\"><\/i><\/div>\n<\/div>\n<div class=\"grid grid-cols-2 gap-16 uppercase text-[10px] font-bold tracking-widest text-emerald-500\">\n<div class=\"space-y-4\">\n<h5 class=\"text-white border-b border-gray-800 pb-2 mb-4\">Cours<\/h5>\n<p><a href=\"#philosophie\" class=\"block hover:text-white transition\">\u00c9thique<\/a><br \/>\n<a href=\"#sentience\" class=\"block hover:text-white transition\">Sentience<\/a><br \/>\n<a href=\"#definition\" class=\"block hover:text-white transition\">Concepts<\/a><\/div>\n<div class=\"space-y-4\">\n<h5 class=\"text-white border-b border-gray-800 pb-2 mb-4\">Outils<\/h5>\n<p><a href=\"#evaluation\" class=\"block hover:text-white transition\">Indicateurs<\/a><br \/>\n<a href=\"#pratique\" class=\"block hover:text-white transition\">Pratiques<\/a><br \/>\n<a href=\"#\" class=\"block hover:text-white transition\">Livre Blanc<\/a><\/div>\n<\/div>\n<\/div>\n<div class=\"mt-16 pt-8 border-t border-gray-800 text-[10px] text-center uppercase tracking-[0.4em]\">\n \u00a9 2025 HumAnimalis \u2014 Synth\u00e8se p\u00e9dagogique compl\u00e8te<\/div>\n<\/div>\n<\/footer>\n<p> <script><br \/>\n document.addEventListener('DOMContentLoaded', () => {<br \/>\n const btn = document.getElementById('mobile-menu-btn');<br \/>\n const menu = document.getElementById('mobile-menu');<\/p>\n<p> if (btn && menu) {<br \/>\n btn.addEventListener('click', () => {<br \/>\n menu.classList.toggle('hidden');<br \/>\n });<\/p>\n<p> \/\/ Fermer le menu lors du clic sur un lien<br \/>\n const links = menu.querySelectorAll('a');<br \/>\n links.forEach(link => {<br \/>\n link.addEventListener('click', () => {<br \/>\n menu.classList.add('hidden');<br \/>\n });<br \/>\n });<br \/>\n }<br \/>\n });<br \/>\n <\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n<p><!DOCTYPE html><br \/>\n<html lang=\"fr\"><br \/>\n<head><br \/>\n<meta charset=\"UTF-8\"><br \/>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\"><br \/>\n<meta name=\"theme-color\" content=\"#4338ca\"><br \/>\n<meta name=\"apple-mobile-web-app-capable\" content=\"yes\"><br \/>\n<meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black-translucent\"><br \/>\n<meta name=\"apple-mobile-web-app-title\" content=\"Etho-Track\"><br \/>\n<title>Etho-Track – Bilan Transition Canine<\/title>\n \t<link rel=\"manifest\" href=\"data:application\/json;base64,ewogICJuYW1lIjogIkV0aG8tVHJhY2sgLSBCaWxhbiBUcmFuc2l0aW9uIENhbmluZSIsCiAgInNob3J0X25hbWUiOiAiRXRoby1UcmFjayIsCiAgInN0YXJ0X3VybCI6ICIuLyIsCiAgImRpc3BsYXkiOiAic3RhbmRhbG9uZSIsCiAgImJhY2tncm91bmRfY29sb3IiOiAiI2Y5ZmFmYiIsCiAgInRoZW1lX2NvbG9yIjogIiM0MzM4Y2EiLAogICJpY29ucyI6IFsKICAgIHsKICAgICAgInNyYyI6ICJkYXRhOmltYWdlL3N2Zyt4bWw7YmFzZTY0LFBITjJaeUI0Yld4dWN6MGlhSFIwY0RvdkwzZDNkeTUzTXk1dmNtY3ZNakF3TUM5emRtY2lJSFpwWlhkQ2IzZzlJakFnTUNBeE9USWdNVGt5SWo0OGNtVmpkQ0IzYVdSMGFEMGlNVGt5SWlCb1pXbG5hSFE5SWpFNU1pSWdabWxzYkQwaUl6UXpNemhqWVNJdlBqeDBaWGgwSUhnOUlqazJJaUI1UFNJNU5pSWdabWxzYkQwaUkzZG9hWFJsSWlCbWIyNTBMWE5wZW1VOUlqWXdJaUIwWlhoMExXRnVZMmh2Y2owaWJXbGtaR3hsSWlCbWIyNTBMWGRsYVdkb2REMGlZbTlzWkNJK1JUd3ZkR1Y0ZEQ0OEwzTjJaejQ9IiwKICAgICAgInNpemVzIjogIjE5MngxOTIiLAogICAgICAidHlwZSI6ICJpbWFnZS9zdmcreG1sIgogICAgfSwKICAgIHsKICAgICAgInNyYyI6ICJkYXRhOmltYWdlL3N2Zyt4bWw7YmFzZTY0LFBITjJaeUI0Yld4dWN6MGlhSFIwY0RvdkwzZDNkeTUzTXk1dmNtY3ZNakF3TUM5emRtY2lJSFpwWlhkQ2IzZzlJakFnTUNBMU1USWdOVEV5SWo0OGNtVmpkQ0IzYVdSMGFEMGlOVEV5SWlCb1pXbG5hSFE5SWpVeE1pSWdabWxzYkQwaUl6UXpNemhqWVNJdlBqeDBaWGgwSUhnOUlqSTFOaUlnZVQwaU1qVTJJaUJtYVd4c1BTSWpkMmhwZEdVaUlHWnZiblF0YzJsNlpUMGlNVFl3SWlCMFpYaDBMV0Z1WTJodmNqMGliV2xrWkd4bElpQm1iMjUwTFhkbGFXZG9kRDBpWW05c1pDSStSVHd2ZEdWNGRENDhMM04yWno0PSIsCiAgICAgICJzaXplcyI6ICI1MTJ4NTEyIiwKICAgICAgInR5cGUiOiAiaW1hZ2Uvc3ZnK3htbCIKICAgIH0KICBdCn0=\">\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script><br \/>\n<script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script><br \/>\n<script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script><br \/>\n<script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script><\/p>\n<style>\n body {<br \/>\n margin: 0;<br \/>\n padding: 0;<br \/>\n overscroll-behavior: none;<br \/>\n -webkit-user-select: none;<br \/>\n user-select: none;<br \/>\n }<br \/>\n .install-prompt {<br \/>\n position: fixed;<br \/>\n bottom: 20px;<br \/>\n left: 20px;<br \/>\n right: 20px;<br \/>\n z-index: 1000;<br \/>\n }<br \/>\n input[type=\"range\"]::-webkit-slider-thumb {<br \/>\n -webkit-appearance: none;<br \/>\n appearance: none;<br \/>\n width: 20px;<br \/>\n height: 20px;<br \/>\n border-radius: 50%;<br \/>\n background: #4f46e5;<br \/>\n cursor: pointer;<br \/>\n }<br \/>\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div id=\"root\"><\/div>\n<p><script type=\"text\/babel\"><br \/>\n const { useState, useEffect } = React;<\/p>\n<p> const EthoTrackApp = () => {<br \/>\n const [sessions, setSessions] = useState([]);<br \/>\n const [formData, setFormData] = useState({<br \/>\n date: new Date().toLocaleDateString('fr-FR'),<br \/>\n environnement: 'campagne',<br \/>\n typeSortie: 'travail',<br \/>\n latence: '2',<br \/>\n excitation: 3,<br \/>\n reactionSociale: 'indifference',<br \/>\n redescente: 'moyenne',<br \/>\n notes: ''<br \/>\n });<br \/>\n const [showReport, setShowReport] = useState(false);<br \/>\n const [showInstallPrompt, setShowInstallPrompt] = useState(false);<br \/>\n const [deferredPrompt, setDeferredPrompt] = useState(null);<\/p>\n<p> \/\/ Charger les sessions depuis le stockage local<br \/>\n useEffect(() => {<br \/>\n const saved = localStorage.getItem('etho-track-sessions');<br \/>\n if (saved) {<br \/>\n setSessions(JSON.parse(saved));<br \/>\n }<\/p>\n<p> \/\/ G\u00e9rer l'invite d'installation PWA<br \/>\n const handler = (e) => {<br \/>\n e.preventDefault();<br \/>\n setDeferredPrompt(e);<br \/>\n setShowInstallPrompt(true);<br \/>\n };<br \/>\n window.addEventListener('beforeinstallprompt', handler);<\/p>\n<p> return () => window.removeEventListener('beforeinstallprompt', handler);<br \/>\n }, []);<\/p>\n<p> \/\/ Sauvegarder automatiquement<br \/>\n useEffect(() => {<br \/>\n if (sessions.length > 0) {<br \/>\n localStorage.setItem('etho-track-sessions', JSON.stringify(sessions));<br \/>\n }<br \/>\n }, [sessions]);<\/p>\n<p> const handleInstallClick = async () => {<br \/>\n if (deferredPrompt) {<br \/>\n deferredPrompt.prompt();<br \/>\n const { outcome } = await deferredPrompt.userChoice;<br \/>\n setDeferredPrompt(null);<br \/>\n setShowInstallPrompt(false);<br \/>\n }<br \/>\n };<\/p>\n<p> const handleChange = (e) => {<br \/>\n const { name, value } = e.target;<br \/>\n setFormData(prev => ({ ...prev, [name]: value }));<br \/>\n };<\/p>\n<p> const handleSaveSession = () => {<br \/>\n const newSession = {<br \/>\n ...formData,<br \/>\n id: Date.now(),<br \/>\n timestamp: new Date().toISOString()<br \/>\n };<br \/>\n setSessions([newSession, ...sessions]);<\/p>\n<p> \/\/ Vibration de confirmation (si support\u00e9)<br \/>\n if (navigator.vibrate) {<br \/>\n navigator.vibrate(50);<br \/>\n }<\/p>\n<p> alert(\"Session enregistr\u00e9e !\");<br \/>\n setFormData({<br \/>\n ...formData,<br \/>\n notes: '',<br \/>\n date: new Date().toLocaleDateString('fr-FR')<br \/>\n });<br \/>\n };<\/p>\n<p> const calculateStats = () => {<br \/>\n if (sessions.length === 0) return null;<br \/>\n const avgExcitation = (sessions.reduce((acc, s) => acc + parseInt(s.excitation), 0) \/ sessions.length).toFixed(1);<br \/>\n const focusRate = (sessions.filter(s => s.reactionSociale === 'indifference').length \/ sessions.length * 100).toFixed(0);<br \/>\n return { avgExcitation, focusRate };<br \/>\n };<\/p>\n<p> const stats = calculateStats();<\/p>\n<p> const handleSendEmail = () => {<br \/>\n const subject = `Bilan de suivi : \u00c9volution de la transition`;<br \/>\n const body = `Bonjour,\\n\\nVoici le bilan des derni\u00e8res sessions.\\n\\nStatistiques :\\n- Excitation moyenne : ${stats?.avgExcitation}\/5\\n- Taux de focus : ${stats?.focusRate}%\\n\\nNotes r\u00e9centes : ${sessions[0]?.notes}\\n\\nCordialement,\\nVotre Comportementaliste.`;<br \/>\n window.location.href = `mailto:client@example.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;<br \/>\n };<\/p>\n<p> const handleClearData = () => {<br \/>\n if (confirm('Voulez-vous vraiment supprimer toutes les sessions ?')) {<br \/>\n setSessions([]);<br \/>\n localStorage.removeItem('etho-track-sessions');<br \/>\n alert('Donn\u00e9es supprim\u00e9es');<br \/>\n }<br \/>\n };<\/p>\n<p> return (<\/p>\n<div className=\"max-w-md mx-auto bg-gray-50 min-h-screen pb-10 font-sans text-gray-800\">\n<p> {\/* Install Prompt *\/}<br \/>\n {showInstallPrompt && (<\/p>\n<div className=\"install-prompt bg-indigo-600 text-white p-4 rounded-2xl shadow-2xl\">\n<div className=\"flex items-center justify-between gap-3\">\n<div className=\"flex-1\">\n<p className=\"font-bold text-sm\">Installer l'application<\/p>\n<p className=\"text-xs opacity-90\">Acc\u00e8s rapide depuis l'\u00e9cran d'accueil<\/p>\n<\/p>\n<\/div>\n<div className=\"flex gap-2\">\n <button \n onClick={() => setShowInstallPrompt(false)}<br \/>\n className=\"px-3 py-2 bg-white\/20 rounded-xl text-xs\"<br \/>\n ><br \/>\n Plus tard<br \/>\n <\/button><br \/>\n <button \n onClick={handleInstallClick}\n className=\"px-4 py-2 bg-white text-indigo-600 rounded-xl text-xs font-bold\"\n ><br \/>\n Installer<br \/>\n <\/button>\n <\/div>\n<\/p>\n<\/div>\n<\/div>\n<p> )}<\/p>\n<p> {\/* HEADER *\/}<\/p>\n<header className=\"bg-gradient-to-br from-indigo-700 to-indigo-900 text-white p-6 rounded-b-[2.5rem] shadow-xl\">\n<div className=\"flex justify-between items-center\">\n<div>\n<h1 className=\"text-2xl font-bold flex items-center gap-2\">\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"text-green-400\">\n <polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"><\/polyline>\n <\/svg><br \/>\n Etho-Track<br \/>\n <\/h1>\n<p className=\"text-indigo-100 text-xs opacity-80 uppercase tracking-widest mt-1\">Bilan Transition Canine<\/p>\n<\/p>\n<\/div>\n<div className=\"bg-white\/20 p-2 rounded-full\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"><\/path>\n <circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle><br \/>\n <\/svg>\n <\/div>\n<\/p>\n<\/div>\n<p> {stats && (<\/p>\n<div className=\"flex gap-4 mt-6\">\n<div className=\"bg-white\/10 flex-1 p-3 rounded-2xl backdrop-blur-sm border border-white\/10 text-center\">\n<p className=\"text-[10px] uppercase opacity-70\">Focus<\/p>\n<p className=\"text-xl font-bold\">{stats.focusRate}%<\/p>\n<\/p>\n<\/div>\n<div className=\"bg-white\/10 flex-1 p-3 rounded-2xl backdrop-blur-sm border border-white\/10 text-center\">\n<p className=\"text-[10px] uppercase opacity-70\">Excitation<\/p>\n<p className=\"text-xl font-bold\">{stats.avgExcitation}\/5<\/p>\n<\/p>\n<\/div>\n<div className=\"bg-white\/10 flex-1 p-3 rounded-2xl backdrop-blur-sm border border-white\/10 text-center\">\n<p className=\"text-[10px] uppercase opacity-70\">Sessions<\/p>\n<p className=\"text-xl font-bold\">{sessions.length}<\/p>\n<\/p>\n<\/div>\n<\/div>\n<p> )}<br \/>\n <\/header>\n<p> <main className=\"p-4 space-y-6 -mt-4\"><\/p>\n<p> {\/* FORMULAIRE *\/}<\/p>\n<div className=\"bg-white p-5 rounded-3xl shadow-sm border border-gray-100 space-y-4\">\n<h2 className=\"text-indigo-900 font-bold flex items-center gap-2 border-b pb-2\">\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n <path d=\"M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2\"><\/path>\n <polyline points=\"9 5 9 3 15 3 15 5\"><\/polyline>\n <line x1=\"9\" y1=\"12\" x2=\"15\" y2=\"12\"><\/line>\n <line x1=\"9\" y1=\"16\" x2=\"15\" y2=\"16\"><\/line>\n <\/svg><br \/>\n Saisie Terrain<br \/>\n <\/h2>\n<div className=\"grid grid-cols-2 gap-3\">\n<div>\n <label className=\"text-[10px] font-bold text-gray-400 uppercase\">Milieu<\/label><br \/>\n <select name=\"environnement\" value={formData.environnement} onChange={handleChange} className=\"w-full p-2 bg-gray-50 border-none rounded-xl text-sm mt-1\"><option value=\"campagne\">\ud83c\udfde\ufe0f Campagne<\/option><option value=\"ville\">\ud83c\udfd9\ufe0f Ville<\/option><\/select>\n <\/div>\n<div>\n <label className=\"text-[10px] font-bold text-gray-400 uppercase\">Activit\u00e9<\/label><br \/>\n <select name=\"typeSortie\" value={formData.typeSortie} onChange={handleChange} className=\"w-full p-2 bg-gray-50 border-none rounded-xl text-sm mt-1\"><option value=\"travail\">\ud83c\udfaf Recherche<\/option><option value=\"mulotage\">\ud83d\udc2d Mulotage<\/option><option value=\"social\">\ud83e\udd1d Social<\/option><\/select>\n <\/div>\n<\/p>\n<\/div>\n<div>\n <label className=\"text-[10px] font-bold text-gray-400 uppercase\">Latence D\u00e9connexion<\/label><br \/>\n <select name=\"latence\" value={formData.latence} onChange={handleChange} className=\"w-full p-3 bg-gray-50 border-none rounded-xl text-sm mt-1\"><option value=\"1\">Imm\u00e9diate (< 2s)<\/option><option value=\"2\">Mod\u00e9r\u00e9e (2s - 10s)<\/option><option value=\"3\">Difficile (> 10s)<\/option><\/select>\n <\/div>\n<div>\n <label className=\"text-[10px] font-bold text-gray-400 uppercase flex justify-between\"><br \/>\n Niveau Excitation <span>{formData.excitation}\/5<\/span><br \/>\n <\/label><br \/>\n <input \n type=\"range\" name=\"excitation\" min=\"1\" max=\"5\" \n value={formData.excitation} onChange={handleChange}\n className=\"w-full h-2 bg-indigo-100 rounded-lg appearance-none cursor-pointer mt-2\"\n \/>\n <\/div>\n<div>\n <label className=\"text-[10px] font-bold text-gray-400 uppercase\">R\u00e9action Sociale Humaine<\/label><br \/>\n <select name=\"reactionSociale\" value={formData.reactionSociale} onChange={handleChange} className=\"w-full p-3 bg-gray-50 border-none rounded-xl text-sm mt-1\"><option value=\"indifference\">\ud83d\ude0c Focus Ma\u00eetre<\/option><option value=\"vigilance\">\ud83e\uddd0 Vigilance<\/option><option value=\"tension\">\ud83d\udc15 Tension laisse<\/option><option value=\"contact\">\ud83d\ude80 Fonce au contact<\/option><\/select>\n <\/div>\n<p> <textarea \n name=\"notes\" value={formData.notes} onChange={handleChange}\n placeholder=\"Notes (vent, stimuli particuliers...)\"\n className=\"w-full p-3 bg-gray-50 border-none rounded-xl text-sm h-20 outline-none focus:ring-1 focus:ring-indigo-400\"\n ><\/textarea><\/p>\n<p> <button \n onClick={handleSaveSession}\n className=\"w-full bg-green-500 hover:bg-green-600 active:bg-green-700 text-white font-bold py-4 rounded-2xl shadow-lg flex items-center justify-center gap-2 transition-all active:scale-95\"\n ><br \/>\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n <path d=\"M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z\"><\/path>\n <polyline points=\"17 21 17 13 7 13 7 21\"><\/polyline>\n <polyline points=\"7 3 7 8 15 8\"><\/polyline>\n <\/svg><br \/>\n ENREGISTRER LA SESSION<br \/>\n <\/button>\n <\/div>\n<p> {\/* ACTIONS *\/}<br \/>\n {sessions.length > 0 && (<\/p>\n<div className=\"flex gap-3\">\n <button \n onClick={() => setShowReport(!showReport)}<br \/>\n className=\"flex-1 bg-white border-2 border-indigo-600 text-indigo-600 font-bold py-3 rounded-2xl flex items-center justify-center gap-2 shadow-sm active:scale-95 transition-transform\"<br \/>\n ><br \/>\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"><\/path>\n <polyline points=\"14 2 14 8 20 8\"><\/polyline>\n <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"><\/line>\n <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"><\/line>\n <polyline points=\"10 9 9 9 8 9\"><\/polyline>\n <\/svg><br \/>\n {showReport ? \"Masquer\" : \"Voir Rapport\"}<br \/>\n <\/button><br \/>\n <button \n onClick={handleSendEmail}\n className=\"flex-1 bg-indigo-600 text-white font-bold py-3 rounded-2xl flex items-center justify-center gap-2 shadow-lg active:scale-95 transition-transform\"\n ><br \/>\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n <line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"><\/line>\n <polygon points=\"22 2 15 22 11 13 2 9 22 2\"><\/polygon>\n <\/svg><br \/>\n Envoyer<br \/>\n <\/button>\n <\/div>\n<p> )}<\/p>\n<p> {\/* RAPPORT *\/}<br \/>\n {showReport && stats && (<\/p>\n<div className=\"bg-indigo-50 p-5 rounded-3xl border-2 border-dashed border-indigo-200\">\n<h3 className=\"font-bold text-indigo-900 mb-3 flex items-center gap-2\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"><br \/>\n <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><br \/>\n <circle cx=\"12\" cy=\"12\" r=\"6\"><\/circle><br \/>\n <circle cx=\"12\" cy=\"12\" r=\"2\"><\/circle><br \/>\n <\/svg><br \/>\n Analyse des tendances<br \/>\n <\/h3>\n<div className=\"space-y-3 text-sm text-indigo-800\">\n<p className=\"flex justify-between border-b border-indigo-100 pb-1\">\n <span>Stabilit\u00e9 \u00e9motionnelle :<\/span><br \/>\n <span className=\"font-bold\">{stats.avgExcitation < 3 ? \"Excellente\" : \"\u00c0 surveiller\"}<\/span>\n <\/p>\n<p className=\"flex justify-between border-b border-indigo-100 pb-1\">\n <span>Renoncement social :<\/span><br \/>\n <span className=\"font-bold\">{stats.focusRate}% de r\u00e9ussite<\/span>\n <\/p>\n<div className=\"mt-4 p-3 bg-white rounded-xl text-xs italic text-gray-600 shadow-sm\">\n \"La chienne semble {stats.avgExcitation > 3 ? 'satur\u00e9e' : '\u00e9quilibr\u00e9e'}.<br \/>\n {stats.focusRate < 50 ? ' Renforcer les exercices de calme.' : ' Pr\u00eate pour une immersion urbaine mod\u00e9r\u00e9e.'}\"\n <\/div>\n<\/p>\n<\/div>\n<\/div>\n<p> )}<\/p>\n<p> {\/* Bouton de suppression *\/}<br \/>\n {sessions.length > 0 && (<br \/>\n <button \n onClick={handleClearData}\n className=\"w-full bg-red-50 text-red-600 font-bold py-3 rounded-2xl border-2 border-red-200 active:scale-95 transition-transform\"\n ><br \/>\n R\u00e9initialiser les donn\u00e9es<br \/>\n <\/button><br \/>\n )}<br \/>\n <\/main>\n <\/div>\n<p> );<br \/>\n };<\/p>\n<p> ReactDOM.render(<EthoTrackApp \/>, document.getElementById('root'));<br \/>\n <\/script><\/p>\n<p><script><br \/>\n \/\/ Service Worker pour PWA<br \/>\n if ('serviceWorker' in navigator) {<br \/>\n window.addEventListener('load', () => {<br \/>\n const swCode = `<br \/>\n const CACHE_NAME = 'etho-track-v1';<\/p>\n<p> self.addEventListener('install', (event) => {<br \/>\n self.skipWaiting();<br \/>\n });<\/p>\n<p> self.addEventListener('activate', (event) => {<br \/>\n event.waitUntil(clients.claim());<br \/>\n });<\/p>\n<p> self.addEventListener('fetch', (event) => {<br \/>\n event.respondWith(<br \/>\n caches.match(event.request).then((response) => {<br \/>\n return response || fetch(event.request);<br \/>\n })<br \/>\n );<br \/>\n });<br \/>\n `;<\/p>\n<p> const blob = new Blob([swCode], { type: 'application\/javascript' });<br \/>\n const swUrl = URL.createObjectURL(blob);<\/p>\n<p> navigator.serviceWorker.register(swUrl).then(() => {<br \/>\n console.log('Service Worker enregistr\u00e9');<br \/>\n });<br \/>\n });<br \/>\n }<br \/>\n <\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bien-\u00catre Animal et Sentience | HumAnimalis HumAnimalis \u00c9thique Sentience Bien-\u00catre \u00c9valuation Terrain \u00c9thique Sentience Bien-\u00catre \u00c9valuation Terrain Module Int\u00e9gral 2025 Le Bien-\u00catre Animal : Science et Conscience De la reconnaissance juridique de 2015 aux derni\u00e8res avanc\u00e9es de l’\u00e9thologie, explorez les fondements de notre relation aux \u00eatres sentients. L’\u00c9volution Un changement de paradigme 1976 Code Rural : L’animal est reconnu comme “\u00eatre sensible”. 1978 D\u00e9claration Universelle […]<\/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-174","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.thometneru.fr\/index.php\/wp-json\/wp\/v2\/pages\/174","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=174"}],"version-history":[{"count":7,"href":"https:\/\/www.thometneru.fr\/index.php\/wp-json\/wp\/v2\/pages\/174\/revisions"}],"predecessor-version":[{"id":192,"href":"https:\/\/www.thometneru.fr\/index.php\/wp-json\/wp\/v2\/pages\/174\/revisions\/192"}],"wp:attachment":[{"href":"https:\/\/www.thometneru.fr\/index.php\/wp-json\/wp\/v2\/media?parent=174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}