Calculette de Mise Bas – Chatterie du Serval<\/title>\n \n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n \n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n \n \n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n animation: {\n 'spin-slow': 'spin 3s linear infinite',\n 'float': 'float 3s ease-in-out infinite',\n 'pop-in': 'popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards',\n },\n keyframes: {\n float: {\n '0%, 100%': { transform: 'translateY(0)' },\n '50%': { transform: 'translateY(-5px)' },\n },\n popIn: {\n '0%': { opacity: '0', transform: 'scale(0.9) translateY(20px)' },\n '100%': { opacity: '1', transform: 'scale(1) translateY(0)' },\n }\n }\n }\n }\n }\n <\/script>\n \n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Nunito:wght@400;600;700;800&display=swap');\n body { font-family: 'Nunito', sans-serif; }\n \/* Animation confettis simplifi\u00e9e CSS *\/\n .confetti {\n position: absolute;\n animation: fall linear forwards;\n }\n @keyframes fall {\n to { transform: translateY(100vh) rotate(720deg); opacity: 0; }\n }\n <\/style>\n<\/head>\n<body class=\"bg-[#fff1f2] min-h-screen flex items-center justify-center\">\n\n <div id=\"root\" class=\"w-full\"><\/div>\n\n <script type=\"text\/babel\">\n const { useState, useEffect } = React;\n\n \/\/ --- BIBLIOTH\u00c8QUE D'IC\u00d4NES ---\n const Icons = {\n Calendar: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\" ry=\"2\"\/><line x1=\"16\" x2=\"16\" y1=\"2\" y2=\"6\"\/><line x1=\"8\" x2=\"8\" y1=\"2\" y2=\"6\"\/><line x1=\"3\" x2=\"21\" y1=\"10\" y2=\"10\"\/><\/svg>,\n Cat: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><path d=\"M12 5c.67 0 1.35.09 2 .26 1.78-2 5.03-2.84 6.42-2.26 1.4.58-.42 7-.42 7 .57 1.07 1 2.24 1 3.44C21 17.9 16.97 21 12 21S3 17.9 3 13.44c0-1.2.43-2.37 1-3.44 0 0-1.82-6.42-.42-7 1.39-.58 4.64.26 6.42 2.26.65-.17 1.33-.26 2-.26z\"\/><\/svg>,\n ArrowRight: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>,\n Sparkles: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><path d=\"m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L12 3Z\"\/><path d=\"M5 3v4\"\/><path d=\"M9 3v4\"\/><path d=\"M3 9h4\"\/><path d=\"M3 5h4\"\/><\/svg>,\n CalendarPlus: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><path d=\"M8 2v4\"\/><path d=\"M16 2v4\"\/><path d=\"M21 13V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8\"\/><path d=\"M3 10h18\"\/><path d=\"M16 19h6\"\/><path d=\"M19 16v6\"\/><\/svg>,\n User: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"\/><circle cx=\"12\" cy=\"7\" r=\"4\"\/><\/svg>,\n Globe: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20\"\/><path d=\"M2 12h20\"\/><\/svg>,\n Facebook: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><path d=\"M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z\"\/><\/svg>,\n Instagram: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><rect width=\"20\" height=\"20\" x=\"2\" y=\"2\" rx=\"5\" ry=\"5\"\/><path d=\"M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z\"\/><line x1=\"17.5\" x2=\"17.51\" y1=\"6.5\" y2=\"6.5\"\/><\/svg>,\n };\n\n \/\/ --- COMPOSANT PRINCIPAL ---\n const CatPregnancyCalc = () => {\n const getToday = () => new Date().toISOString().split('T')[0];\n const [matingDate, setMatingDate] = useState(getToday());\n const [catName, setCatName] = useState('');\n const [result, setResult] = useState(null);\n const [animateProgress, setAnimateProgress] = useState(false);\n const [showConfetti, setShowConfetti] = useState(false);\n\n useEffect(() => {\n if (result) {\n const timer = setTimeout(() => setAnimateProgress(true), 300);\n setShowConfetti(true);\n const confettiTimer = setTimeout(() => setShowConfetti(false), 3000);\n return () => { clearTimeout(timer); clearTimeout(confettiTimer); };\n } else {\n setAnimateProgress(false);\n setShowConfetti(false);\n }\n }, [result]);\n\n const addDays = (date, days) => {\n const d = new Date(date);\n d.setDate(d.getDate() + days);\n return d;\n };\n\n const formatDateForICS = (date) => {\n return date.toISOString().replace(\/-|:|\\.\\d\\d\\d\/g, \"\").substring(0, 8);\n };\n\n const getGoogleLink = (title, date, description, endDateInput = null) => {\n const startDate = formatDateForICS(date);\n const finalEndDate = endDateInput ? formatDateForICS(addDays(endDateInput, 1)) : formatDateForICS(addDays(date, 1));\n const text = encodeURIComponent(title);\n const details = encodeURIComponent(description);\n return `https:\/\/calendar.google.com\/calendar\/render?action=TEMPLATE&text=${text}&dates=${startDate}\/${finalEndDate}&details=${details}`;\n };\n\n const calculateDate = () => {\n if (!matingDate) return;\n const start = new Date(matingDate);\n \n \/\/ P\u00e9riode de gestation : min 63j, max 69j (\u00e9largi de +2j comme demand\u00e9)\n const minDate = new Date(start); minDate.setDate(start.getDate() + 63);\n const maxDate = new Date(start); maxDate.setDate(start.getDate() + 69);\n \n \/\/ Date th\u00e9orique sp\u00e9cifique \u00e0 67j\n const theoreticalDate = new Date(start); theoreticalDate.setDate(start.getDate() + 67);\n\n const today = new Date();\n const daysPassed = Math.floor((today - start) \/ (1000 * 60 * 60 * 24));\n let progress = Math.max(0, Math.min(100, (daysPassed \/ 65) * 100));\n \n const name = catName.trim() || \"Ma Chatte\";\n\n const milestones = [\n { day: 21, title: \"T\u00e9tines roses\", fullTitle: `${name} : T\u00e9tines roses (Gestation)`, desc: `Les t\u00e9tines de ${name} devraient commencer \u00e0 rosir.`, date: addDays(start, 21), passed: daysPassed >= 21 },\n { day: 35, title: \"Prise de poids\", fullTitle: `${name} : Prise de poids visible`, desc: `Le ventre de ${name} commence \u00e0 s'arrondir.`, date: addDays(start, 35), passed: daysPassed >= 35 },\n { day: 49, title: \"Mouvements\", fullTitle: `${name} : Chatons bougent`, desc: `On peut sentir les petits bouger dans le ventre de ${name}.`, date: addDays(start, 49), passed: daysPassed >= 49 },\n { day: 58, title: \"Nidification\", fullTitle: `${name} : Pr\u00e9parer le nid`, desc: `Installez le coin mise bas pour ${name} au calme.`, date: addDays(start, 58), passed: daysPassed >= 58 },\n ];\n\n setResult({ \n minDate, \n maxDate, \n theoreticalDate, \/\/ Stockage de la date \u00e0 67j\n daysPassed, \n progress, \n milestones, \n catName: name, \n birthEvent: { title: `Naissance chatons de ${name} 🐱`, desc: `P\u00e9riode estim\u00e9e pour la mise bas (63-69j).` } \n });\n };\n\n const formatDate = (date) => new Intl.DateTimeFormat('fr-FR', { day: 'numeric', month: 'short' }).format(date);\n\n const CalendarAction = ({ title, date, desc, endDate = null, isLight = false }) => (\n <a href={getGoogleLink(title, date, desc, endDate)} target=\"_blank\" rel=\"noopener noreferrer\" \n className={`group flex items-center gap-1.5 px-3 py-1.5 rounded-lg transition-all duration-300 font-bold text-xs transform hover:scale-105 active:scale-95 ${isLight ? 'bg-white\/20 hover:bg-white\/30 text-white shadow-sm ring-1 ring-white\/30' : 'bg-stone-100 hover:bg-rose-100 text-stone-500 hover:text-rose-600'}`}>\n <Icons.CalendarPlus size={14} className=\"group-hover:rotate-12 transition-transform duration-300\"\/><span>Google<\/span>\n <\/a>\n );\n\n return (\n <div className=\"p-4 sm:p-6 w-full max-w-3xl mx-auto\">\n {showConfetti && (\n <div className=\"fixed inset-0 pointer-events-none overflow-hidden z-50\">\n {[...Array(15)].map((_, i) => (\n <div key={i} className=\"confetti text-2xl\" style={{\n left: `${Math.random() * 100}%`,\n animationDuration: `${2 + Math.random() * 2}s`,\n animationDelay: `${Math.random() * 0.5}s`\n }}>{['🐾', '🐱', '🍼', '💖', '✨'][Math.floor(Math.random() * 5)]}<\/div>\n ))}\n <\/div>\n )}\n\n <div className=\"bg-white rounded-[2rem] shadow-xl shadow-rose-100\/80 overflow-hidden border border-stone-50 transition-all duration-500 relative z-10\">\n <div className=\"bg-rose-100 p-4 flex items-center justify-between relative overflow-hidden\">\n <div className=\"absolute -right-6 -top-6 bg-rose-200\/50 w-24 h-24 rounded-full blur-2xl\"><\/div>\n <h1 className=\"text-2xl font-bold text-rose-900 flex items-center gap-2 relative z-10\">\n <div className=\"bg-white p-1.5 rounded-full shadow-sm animate-float\"><Icons.Cat className=\"text-rose-500\" size={18} \/><\/div>\n <span className=\"tracking-tight\">Calculette de Mise Bas<\/span>\n <\/h1>\n {result && <button onClick={() => {setResult(null); setMatingDate(getToday()); setCatName(''); setAnimateProgress(false);}} className=\"text-sm font-bold bg-white\/60 hover:bg-white text-rose-700 px-3 py-1.5 rounded-full transition-all hover:shadow-md active:scale-95 animate-pop-in\">Nouveau<\/button>}\n <\/div>\n\n <div className=\"p-4 sm:p-6 space-y-5\">\n {!result && (\n <div className=\"space-y-4 py-4 animate-pop-in\">\n <div className=\"text-center space-y-2 mb-8\">\n <div className=\"inline-block p-4 bg-rose-50 rounded-full text-rose-400 mb-2 ring-4 ring-rose-50\/50 shadow-inner transform hover:scale-110 transition-transform duration-300 cursor-pointer\">\n <Icons.Calendar size={36} className=\"animate-float\" \/>\n <\/div>\n <h2 className=\"text-2xl font-bold text-stone-700\">Heureux \u00e9v\u00e9nement ?<\/h2>\n <p className=\"text-base text-stone-500\">Calculons la date d'arriv\u00e9e des petits.<\/p>\n <\/div>\n <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-5\">\n <div className=\"space-y-1 group\">\n <label className=\"text-sm font-bold text-stone-400 ml-4 uppercase tracking-wider group-focus-within:text-rose-400 transition-colors\">Son petit nom<\/label>\n <div className=\"relative transform transition-all duration-300 focus-within:scale-[1.02]\">\n <input type=\"text\" placeholder=\"ex: Luna\" value={catName} onChange={(e) => setCatName(e.target.value)} className=\"w-full bg-stone-50 border border-stone-200 text-stone-700 text-xl rounded-2xl py-3.5 pl-4 pr-4 focus:outline-none focus:border-rose-300 focus:ring-4 focus:ring-rose-100\/50 transition-all placeholder:text-stone-300 shadow-sm\" \/>\n <\/div>\n <\/div>\n <div className=\"space-y-1 group\">\n <label className=\"text-sm font-bold text-stone-400 ml-4 uppercase tracking-wider group-focus-within:text-rose-400 transition-colors\">Date de la saillie<\/label>\n <div className=\"relative transform transition-all duration-300 focus-within:scale-[1.02]\">\n <input type=\"date\" value={matingDate} onChange={(e) => setMatingDate(e.target.value)} className=\"w-full bg-stone-50 border border-stone-200 text-stone-700 text-center text-xl rounded-2xl py-3.5 focus:outline-none focus:border-rose-300 focus:ring-4 focus:ring-rose-100\/50 transition-all shadow-sm cursor-pointer\" \/>\n <\/div>\n <\/div>\n <\/div>\n <button onClick={calculateDate} disabled={!matingDate} className=\"w-full mt-8 bg-rose-500 hover:bg-rose-600 text-white font-bold py-4 rounded-2xl transition-all shadow-lg shadow-rose-200 hover:shadow-rose-400\/50 hover:-translate-y-1 active:translate-y-0 active:shadow-md flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none group relative overflow-hidden text-lg\">\n <span className=\"relative z-10 flex items-center gap-2\">Calculer <Icons.ArrowRight size={20} className=\"group-hover:translate-x-1 transition-transform\" \/><\/span>\n <div className=\"absolute inset-0 bg-white\/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300\"><\/div>\n <\/button>\n <\/div>\n )}\n\n {result && (\n <div className=\"space-y-4\">\n <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n \n {\/* BLOC DATE PRINCIPAL *\/}\n <div className=\"col-span-1 bg-gradient-to-br from-rose-500 to-pink-600 rounded-2xl p-6 text-white shadow-lg shadow-rose-200 relative overflow-hidden animate-pop-in group hover:shadow-xl hover:shadow-rose-300 transition-all duration-500 hover:-translate-y-1\">\n <div className=\"absolute -top-4 -right-4 text-white opacity-10 transform rotate-12 group-hover:rotate-45 transition-transform duration-1000 ease-out\"><Icons.Sparkles size={100}\/><\/div>\n \n <div className=\"flex flex-col h-full justify-between relative z-10\">\n {\/* P\u00e9riode Probable (Min - Max \u00e9tendu \u00e0 69j) *\/}\n <div className=\"mb-5\">\n <p className=\"text-rose-100 text-xs font-bold uppercase tracking-widest mb-2 opacity-80\">P\u00e9riode probable<\/p>\n <div className=\"flex flex-col gap-0.5\">\n <div className=\"text-3xl sm:text-4xl font-black leading-none tracking-tight drop-shadow-sm\">{formatDate(result.minDate)}<\/div>\n <div className=\"text-xs uppercase font-bold text-rose-200\/80 my-0.5 ml-0.5\">au<\/div>\n <div className=\"text-3xl sm:text-4xl font-black leading-none tracking-tight drop-shadow-sm\">{formatDate(result.maxDate)}<\/div>\n <\/div>\n <div className=\"mt-3 transform transition-transform group-hover:scale-105 origin-left duration-300 inline-block\">\n <CalendarAction title={result.birthEvent.title} date={result.minDate} endDate={result.maxDate} desc={result.birthEvent.desc} isLight={true} \/>\n <\/div>\n <\/div>\n\n {\/* Date Th\u00e9orique (Rest\u00e9e \u00e0 67j comme rep\u00e8re) *\/}\n <div className=\"pt-4 border-t border-white\/20\">\n <p className=\"text-rose-100 text-[10px] font-bold uppercase tracking-widest mb-1 opacity-80\">Date de mise bas th\u00e9orique (67j)<\/p>\n <div className=\"flex items-center gap-3\">\n <span className=\"text-2xl font-bold leading-none\">{formatDate(result.theoreticalDate)}<\/span>\n <CalendarAction title={`${result.catName} : Mise bas th\u00e9orique (67j)`} date={result.theoreticalDate} desc={`Date de mise bas th\u00e9orique (67 jours) pour ${result.catName}.`} isLight={true} \/>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n {\/* BLOC PROGRESSION *\/}\n <div className=\"col-span-1 bg-stone-50 rounded-2xl p-6 border border-stone-100 flex flex-col justify-center animate-pop-in delay-100 hover:border-rose-200 hover:bg-white hover:shadow-md transition-all duration-300 relative\">\n <div className=\"flex justify-between items-center mb-3\">\n <span className=\"text-sm font-bold text-stone-500 uppercase max-w-[120px] truncate\" title={result.catName}>{result.catName}<\/span>\n <span className=\"text-sm font-bold text-rose-500 bg-rose-100 px-2 py-1 rounded-md shadow-sm transform hover:scale-105 transition-transform\">J-{65 - result.daysPassed}<\/span>\n <\/div>\n <div className=\"w-full bg-stone-200 h-4 rounded-full overflow-hidden shadow-inner ring-1 ring-stone-100\">\n <div className=\"bg-rose-400 h-full rounded-full transition-all duration-1000 ease-out relative overflow-hidden\" style={{ width: animateProgress ? `${result.progress}%` : '0%' }}>\n <div className=\"absolute inset-0 bg-white\/30 w-full h-full animate-[shimmer_2s_infinite] transform -skew-x-12 translate-x-[-100%]\"><\/div>\n <\/div>\n <\/div>\n <p className=\"text-sm text-stone-400 mt-2 text-right font-medium mb-2\">Jour {result.daysPassed} <span className=\"text-stone-300\">\/ 65<\/span><\/p>\n <\/div>\n <\/div>\n\n {\/* TIMELINE *\/}\n <div className=\"bg-stone-50 rounded-2xl p-5 border border-stone-100 animate-pop-in delay-200 shadow-sm\">\n <h3 className=\"text-sm font-bold text-stone-400 uppercase mb-4 pl-1 flex items-center gap-2\"><Icons.Cat size={16} className=\"text-rose-300\" \/> Calendrier de gestation<\/h3>\n <div className=\"space-y-1\">\n {result.milestones.map((m, i) => (\n <div key={i} className={`group flex items-center gap-3 py-4 transition-all hover:bg-white rounded-xl px-3 -mx-2 hover:shadow-sm hover:scale-[1.01] duration-200 ${i !== result.milestones.length - 1 ? 'border-b border-stone-100 hover:border-transparent' : ''}`} style={{ animationDelay: `${0.3 + (i * 0.1)}s` }}>\n <div className={`w-3 h-3 rounded-full shrink-0 ring-2 ring-white shadow-sm transition-all duration-500 ${m.passed ? 'bg-stone-300' : 'bg-rose-400 animate-pulse scale-110'}`}><\/div>\n <div className=\"flex-1 min-w-0\">\n <p className={`text-base font-bold truncate transition-colors ${m.passed ? 'text-stone-400' : 'text-stone-700 group-hover:text-rose-600'}`}>{m.title}<\/p>\n <p className={`text-sm font-mono mt-0.5 ${m.passed ? 'text-stone-300' : 'text-rose-500'}`}>{formatDate(m.date)}<\/p>\n <\/div>\n <div className=\"shrink-0 opacity-0 group-hover:opacity-100 transition-all transform translate-x-2 group-hover:translate-x-0 duration-300\">\n <CalendarAction title={m.fullTitle} date={m.date} desc={m.desc} \/>\n <\/div>\n <\/div>\n ))}\n <\/div>\n <\/div>\n <\/div>\n )}\n <\/div>\n <\/div>\n\n <div className=\"text-center pb-4 animate-pop-in delay-500 mt-6\">\n <p className=\"text-sm text-stone-500 mb-2 font-medium\">Offert par<\/p>\n <a href=\"https:\/\/chatterie-du-serval.fr\/\" target=\"_blank\" rel=\"noopener noreferrer\" className=\"font-bold text-rose-800 hover:text-rose-600 transition-colors block mb-4 hover:scale-110 transform duration-300 inline-block text-base\">La Chatterie du Serval<\/a>\n <div className=\"flex justify-center gap-4\">\n <a href=\"https:\/\/chatterie-du-serval.fr\/\" target=\"_blank\" rel=\"noopener noreferrer\" className=\"p-3 bg-white rounded-full text-stone-400 hover:text-rose-500 hover:shadow-lg hover:-translate-y-1 hover:rotate-6 transition-all duration-300 border border-stone-100 group\"><Icons.Globe size={20} className=\"group-hover:animate-spin-slow\" \/><\/a>\n <a href=\"https:\/\/www.facebook.com\/chatterieduserval\/?locale=fr_FR\" target=\"_blank\" rel=\"noopener noreferrer\" className=\"p-3 bg-white rounded-full text-stone-400 hover:text-blue-600 hover:shadow-lg hover:-translate-y-1 hover:-rotate-6 transition-all duration-300 border border-stone-100\"><Icons.Facebook size={20} \/><\/a>\n <a href=\"https:\/\/www.instagram.com\/la.chatterie.du.serval\/?hl=fr\" target=\"_blank\" rel=\"noopener noreferrer\" className=\"p-3 bg-white rounded-full text-stone-400 hover:text-pink-600 hover:shadow-lg hover:-translate-y-1 hover:rotate-6 transition-all duration-300 border border-stone-100\"><Icons.Instagram size={20} \/><\/a>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(<CatPregnancyCalc \/>);\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Calculette de Mise Bas – Chatterie du Serval<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"jetpack_post_was_ever_published":false,"footnotes":""},"class_list":["post-1925","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/P62eiX-v3","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/chatterie-du-serval.fr\/index.php?rest_route=\/wp\/v2\/pages\/1925","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chatterie-du-serval.fr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/chatterie-du-serval.fr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/chatterie-du-serval.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chatterie-du-serval.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1925"}],"version-history":[{"count":5,"href":"https:\/\/chatterie-du-serval.fr\/index.php?rest_route=\/wp\/v2\/pages\/1925\/revisions"}],"predecessor-version":[{"id":1934,"href":"https:\/\/chatterie-du-serval.fr\/index.php?rest_route=\/wp\/v2\/pages\/1925\/revisions\/1934"}],"wp:attachment":[{"href":"https:\/\/chatterie-du-serval.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1925"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1925,"date":"2025-12-15T17:04:35","date_gmt":"2025-12-15T17:04:35","guid":{"rendered":"https:\/\/chatterie-du-serval.fr\/?page_id=1925"},"modified":"2025-12-20T06:21:08","modified_gmt":"2025-12-20T06:21:08","slug":"calculette-de-mise-bas","status":"publish","type":"page","link":"https:\/\/chatterie-du-serval.fr\/?page_id=1925","title":{"rendered":"Calculette de Mise Bas"},"content":{"rendered":"\n\n\n\n \n \n Calculette de Mise Bas – Chatterie du Serval<\/title>\n \n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n \n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n \n \n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n\n \n <script>\n tailwind.config = {\n theme: {\n extend: {\n animation: {\n 'spin-slow': 'spin 3s linear infinite',\n 'float': 'float 3s ease-in-out infinite',\n 'pop-in': 'popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards',\n },\n keyframes: {\n float: {\n '0%, 100%': { transform: 'translateY(0)' },\n '50%': { transform: 'translateY(-5px)' },\n },\n popIn: {\n '0%': { opacity: '0', transform: 'scale(0.9) translateY(20px)' },\n '100%': { opacity: '1', transform: 'scale(1) translateY(0)' },\n }\n }\n }\n }\n }\n <\/script>\n \n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Nunito:wght@400;600;700;800&display=swap');\n body { font-family: 'Nunito', sans-serif; }\n \/* Animation confettis simplifi\u00e9e CSS *\/\n .confetti {\n position: absolute;\n animation: fall linear forwards;\n }\n @keyframes fall {\n to { transform: translateY(100vh) rotate(720deg); opacity: 0; }\n }\n <\/style>\n<\/head>\n<body class=\"bg-[#fff1f2] min-h-screen flex items-center justify-center\">\n\n <div id=\"root\" class=\"w-full\"><\/div>\n\n <script type=\"text\/babel\">\n const { useState, useEffect } = React;\n\n \/\/ --- BIBLIOTH\u00c8QUE D'IC\u00d4NES ---\n const Icons = {\n Calendar: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\" ry=\"2\"\/><line x1=\"16\" x2=\"16\" y1=\"2\" y2=\"6\"\/><line x1=\"8\" x2=\"8\" y1=\"2\" y2=\"6\"\/><line x1=\"3\" x2=\"21\" y1=\"10\" y2=\"10\"\/><\/svg>,\n Cat: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><path d=\"M12 5c.67 0 1.35.09 2 .26 1.78-2 5.03-2.84 6.42-2.26 1.4.58-.42 7-.42 7 .57 1.07 1 2.24 1 3.44C21 17.9 16.97 21 12 21S3 17.9 3 13.44c0-1.2.43-2.37 1-3.44 0 0-1.82-6.42-.42-7 1.39-.58 4.64.26 6.42 2.26.65-.17 1.33-.26 2-.26z\"\/><\/svg>,\n ArrowRight: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><path d=\"M5 12h14\"\/><path d=\"m12 5 7 7-7 7\"\/><\/svg>,\n Sparkles: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><path d=\"m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L12 3Z\"\/><path d=\"M5 3v4\"\/><path d=\"M9 3v4\"\/><path d=\"M3 9h4\"\/><path d=\"M3 5h4\"\/><\/svg>,\n CalendarPlus: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><path d=\"M8 2v4\"\/><path d=\"M16 2v4\"\/><path d=\"M21 13V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8\"\/><path d=\"M3 10h18\"\/><path d=\"M16 19h6\"\/><path d=\"M19 16v6\"\/><\/svg>,\n User: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"\/><circle cx=\"12\" cy=\"7\" r=\"4\"\/><\/svg>,\n Globe: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20\"\/><path d=\"M2 12h20\"\/><\/svg>,\n Facebook: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><path d=\"M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z\"\/><\/svg>,\n Instagram: (props) => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" {...props}><rect width=\"20\" height=\"20\" x=\"2\" y=\"2\" rx=\"5\" ry=\"5\"\/><path d=\"M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z\"\/><line x1=\"17.5\" x2=\"17.51\" y1=\"6.5\" y2=\"6.5\"\/><\/svg>,\n };\n\n \/\/ --- COMPOSANT PRINCIPAL ---\n const CatPregnancyCalc = () => {\n const getToday = () => new Date().toISOString().split('T')[0];\n const [matingDate, setMatingDate] = useState(getToday());\n const [catName, setCatName] = useState('');\n const [result, setResult] = useState(null);\n const [animateProgress, setAnimateProgress] = useState(false);\n const [showConfetti, setShowConfetti] = useState(false);\n\n useEffect(() => {\n if (result) {\n const timer = setTimeout(() => setAnimateProgress(true), 300);\n setShowConfetti(true);\n const confettiTimer = setTimeout(() => setShowConfetti(false), 3000);\n return () => { clearTimeout(timer); clearTimeout(confettiTimer); };\n } else {\n setAnimateProgress(false);\n setShowConfetti(false);\n }\n }, [result]);\n\n const addDays = (date, days) => {\n const d = new Date(date);\n d.setDate(d.getDate() + days);\n return d;\n };\n\n const formatDateForICS = (date) => {\n return date.toISOString().replace(\/-|:|\\.\\d\\d\\d\/g, \"\").substring(0, 8);\n };\n\n const getGoogleLink = (title, date, description, endDateInput = null) => {\n const startDate = formatDateForICS(date);\n const finalEndDate = endDateInput ? formatDateForICS(addDays(endDateInput, 1)) : formatDateForICS(addDays(date, 1));\n const text = encodeURIComponent(title);\n const details = encodeURIComponent(description);\n return `https:\/\/calendar.google.com\/calendar\/render?action=TEMPLATE&text=${text}&dates=${startDate}\/${finalEndDate}&details=${details}`;\n };\n\n const calculateDate = () => {\n if (!matingDate) return;\n const start = new Date(matingDate);\n \n \/\/ P\u00e9riode de gestation : min 63j, max 69j (\u00e9largi de +2j comme demand\u00e9)\n const minDate = new Date(start); minDate.setDate(start.getDate() + 63);\n const maxDate = new Date(start); maxDate.setDate(start.getDate() + 69);\n \n \/\/ Date th\u00e9orique sp\u00e9cifique \u00e0 67j\n const theoreticalDate = new Date(start); theoreticalDate.setDate(start.getDate() + 67);\n\n const today = new Date();\n const daysPassed = Math.floor((today - start) \/ (1000 * 60 * 60 * 24));\n let progress = Math.max(0, Math.min(100, (daysPassed \/ 65) * 100));\n \n const name = catName.trim() || \"Ma Chatte\";\n\n const milestones = [\n { day: 21, title: \"T\u00e9tines roses\", fullTitle: `${name} : T\u00e9tines roses (Gestation)`, desc: `Les t\u00e9tines de ${name} devraient commencer \u00e0 rosir.`, date: addDays(start, 21), passed: daysPassed >= 21 },\n { day: 35, title: \"Prise de poids\", fullTitle: `${name} : Prise de poids visible`, desc: `Le ventre de ${name} commence \u00e0 s'arrondir.`, date: addDays(start, 35), passed: daysPassed >= 35 },\n { day: 49, title: \"Mouvements\", fullTitle: `${name} : Chatons bougent`, desc: `On peut sentir les petits bouger dans le ventre de ${name}.`, date: addDays(start, 49), passed: daysPassed >= 49 },\n { day: 58, title: \"Nidification\", fullTitle: `${name} : Pr\u00e9parer le nid`, desc: `Installez le coin mise bas pour ${name} au calme.`, date: addDays(start, 58), passed: daysPassed >= 58 },\n ];\n\n setResult({ \n minDate, \n maxDate, \n theoreticalDate, \/\/ Stockage de la date \u00e0 67j\n daysPassed, \n progress, \n milestones, \n catName: name, \n birthEvent: { title: `Naissance chatons de ${name} 🐱`, desc: `P\u00e9riode estim\u00e9e pour la mise bas (63-69j).` } \n });\n };\n\n const formatDate = (date) => new Intl.DateTimeFormat('fr-FR', { day: 'numeric', month: 'short' }).format(date);\n\n const CalendarAction = ({ title, date, desc, endDate = null, isLight = false }) => (\n <a href={getGoogleLink(title, date, desc, endDate)} target=\"_blank\" rel=\"noopener noreferrer\" \n className={`group flex items-center gap-1.5 px-3 py-1.5 rounded-lg transition-all duration-300 font-bold text-xs transform hover:scale-105 active:scale-95 ${isLight ? 'bg-white\/20 hover:bg-white\/30 text-white shadow-sm ring-1 ring-white\/30' : 'bg-stone-100 hover:bg-rose-100 text-stone-500 hover:text-rose-600'}`}>\n <Icons.CalendarPlus size={14} className=\"group-hover:rotate-12 transition-transform duration-300\"\/><span>Google<\/span>\n <\/a>\n );\n\n return (\n <div className=\"p-4 sm:p-6 w-full max-w-3xl mx-auto\">\n {showConfetti && (\n <div className=\"fixed inset-0 pointer-events-none overflow-hidden z-50\">\n {[...Array(15)].map((_, i) => (\n <div key={i} className=\"confetti text-2xl\" style={{\n left: `${Math.random() * 100}%`,\n animationDuration: `${2 + Math.random() * 2}s`,\n animationDelay: `${Math.random() * 0.5}s`\n }}>{['🐾', '🐱', '🍼', '💖', '✨'][Math.floor(Math.random() * 5)]}<\/div>\n ))}\n <\/div>\n )}\n\n <div className=\"bg-white rounded-[2rem] shadow-xl shadow-rose-100\/80 overflow-hidden border border-stone-50 transition-all duration-500 relative z-10\">\n <div className=\"bg-rose-100 p-4 flex items-center justify-between relative overflow-hidden\">\n <div className=\"absolute -right-6 -top-6 bg-rose-200\/50 w-24 h-24 rounded-full blur-2xl\"><\/div>\n <h1 className=\"text-2xl font-bold text-rose-900 flex items-center gap-2 relative z-10\">\n <div className=\"bg-white p-1.5 rounded-full shadow-sm animate-float\"><Icons.Cat className=\"text-rose-500\" size={18} \/><\/div>\n <span className=\"tracking-tight\">Calculette de Mise Bas<\/span>\n <\/h1>\n {result && <button onClick={() => {setResult(null); setMatingDate(getToday()); setCatName(''); setAnimateProgress(false);}} className=\"text-sm font-bold bg-white\/60 hover:bg-white text-rose-700 px-3 py-1.5 rounded-full transition-all hover:shadow-md active:scale-95 animate-pop-in\">Nouveau<\/button>}\n <\/div>\n\n <div className=\"p-4 sm:p-6 space-y-5\">\n {!result && (\n <div className=\"space-y-4 py-4 animate-pop-in\">\n <div className=\"text-center space-y-2 mb-8\">\n <div className=\"inline-block p-4 bg-rose-50 rounded-full text-rose-400 mb-2 ring-4 ring-rose-50\/50 shadow-inner transform hover:scale-110 transition-transform duration-300 cursor-pointer\">\n <Icons.Calendar size={36} className=\"animate-float\" \/>\n <\/div>\n <h2 className=\"text-2xl font-bold text-stone-700\">Heureux \u00e9v\u00e9nement ?<\/h2>\n <p className=\"text-base text-stone-500\">Calculons la date d'arriv\u00e9e des petits.<\/p>\n <\/div>\n <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-5\">\n <div className=\"space-y-1 group\">\n <label className=\"text-sm font-bold text-stone-400 ml-4 uppercase tracking-wider group-focus-within:text-rose-400 transition-colors\">Son petit nom<\/label>\n <div className=\"relative transform transition-all duration-300 focus-within:scale-[1.02]\">\n <input type=\"text\" placeholder=\"ex: Luna\" value={catName} onChange={(e) => setCatName(e.target.value)} className=\"w-full bg-stone-50 border border-stone-200 text-stone-700 text-xl rounded-2xl py-3.5 pl-4 pr-4 focus:outline-none focus:border-rose-300 focus:ring-4 focus:ring-rose-100\/50 transition-all placeholder:text-stone-300 shadow-sm\" \/>\n <\/div>\n <\/div>\n <div className=\"space-y-1 group\">\n <label className=\"text-sm font-bold text-stone-400 ml-4 uppercase tracking-wider group-focus-within:text-rose-400 transition-colors\">Date de la saillie<\/label>\n <div className=\"relative transform transition-all duration-300 focus-within:scale-[1.02]\">\n <input type=\"date\" value={matingDate} onChange={(e) => setMatingDate(e.target.value)} className=\"w-full bg-stone-50 border border-stone-200 text-stone-700 text-center text-xl rounded-2xl py-3.5 focus:outline-none focus:border-rose-300 focus:ring-4 focus:ring-rose-100\/50 transition-all shadow-sm cursor-pointer\" \/>\n <\/div>\n <\/div>\n <\/div>\n <button onClick={calculateDate} disabled={!matingDate} className=\"w-full mt-8 bg-rose-500 hover:bg-rose-600 text-white font-bold py-4 rounded-2xl transition-all shadow-lg shadow-rose-200 hover:shadow-rose-400\/50 hover:-translate-y-1 active:translate-y-0 active:shadow-md flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none group relative overflow-hidden text-lg\">\n <span className=\"relative z-10 flex items-center gap-2\">Calculer <Icons.ArrowRight size={20} className=\"group-hover:translate-x-1 transition-transform\" \/><\/span>\n <div className=\"absolute inset-0 bg-white\/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300\"><\/div>\n <\/button>\n <\/div>\n )}\n\n {result && (\n <div className=\"space-y-4\">\n <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n \n {\/* BLOC DATE PRINCIPAL *\/}\n <div className=\"col-span-1 bg-gradient-to-br from-rose-500 to-pink-600 rounded-2xl p-6 text-white shadow-lg shadow-rose-200 relative overflow-hidden animate-pop-in group hover:shadow-xl hover:shadow-rose-300 transition-all duration-500 hover:-translate-y-1\">\n <div className=\"absolute -top-4 -right-4 text-white opacity-10 transform rotate-12 group-hover:rotate-45 transition-transform duration-1000 ease-out\"><Icons.Sparkles size={100}\/><\/div>\n \n <div className=\"flex flex-col h-full justify-between relative z-10\">\n {\/* P\u00e9riode Probable (Min - Max \u00e9tendu \u00e0 69j) *\/}\n <div className=\"mb-5\">\n <p className=\"text-rose-100 text-xs font-bold uppercase tracking-widest mb-2 opacity-80\">P\u00e9riode probable<\/p>\n <div className=\"flex flex-col gap-0.5\">\n <div className=\"text-3xl sm:text-4xl font-black leading-none tracking-tight drop-shadow-sm\">{formatDate(result.minDate)}<\/div>\n <div className=\"text-xs uppercase font-bold text-rose-200\/80 my-0.5 ml-0.5\">au<\/div>\n <div className=\"text-3xl sm:text-4xl font-black leading-none tracking-tight drop-shadow-sm\">{formatDate(result.maxDate)}<\/div>\n <\/div>\n <div className=\"mt-3 transform transition-transform group-hover:scale-105 origin-left duration-300 inline-block\">\n <CalendarAction title={result.birthEvent.title} date={result.minDate} endDate={result.maxDate} desc={result.birthEvent.desc} isLight={true} \/>\n <\/div>\n <\/div>\n\n {\/* Date Th\u00e9orique (Rest\u00e9e \u00e0 67j comme rep\u00e8re) *\/}\n <div className=\"pt-4 border-t border-white\/20\">\n <p className=\"text-rose-100 text-[10px] font-bold uppercase tracking-widest mb-1 opacity-80\">Date de mise bas th\u00e9orique (67j)<\/p>\n <div className=\"flex items-center gap-3\">\n <span className=\"text-2xl font-bold leading-none\">{formatDate(result.theoreticalDate)}<\/span>\n <CalendarAction title={`${result.catName} : Mise bas th\u00e9orique (67j)`} date={result.theoreticalDate} desc={`Date de mise bas th\u00e9orique (67 jours) pour ${result.catName}.`} isLight={true} \/>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n {\/* BLOC PROGRESSION *\/}\n <div className=\"col-span-1 bg-stone-50 rounded-2xl p-6 border border-stone-100 flex flex-col justify-center animate-pop-in delay-100 hover:border-rose-200 hover:bg-white hover:shadow-md transition-all duration-300 relative\">\n <div className=\"flex justify-between items-center mb-3\">\n <span className=\"text-sm font-bold text-stone-500 uppercase max-w-[120px] truncate\" title={result.catName}>{result.catName}<\/span>\n <span className=\"text-sm font-bold text-rose-500 bg-rose-100 px-2 py-1 rounded-md shadow-sm transform hover:scale-105 transition-transform\">J-{65 - result.daysPassed}<\/span>\n <\/div>\n <div className=\"w-full bg-stone-200 h-4 rounded-full overflow-hidden shadow-inner ring-1 ring-stone-100\">\n <div className=\"bg-rose-400 h-full rounded-full transition-all duration-1000 ease-out relative overflow-hidden\" style={{ width: animateProgress ? `${result.progress}%` : '0%' }}>\n <div className=\"absolute inset-0 bg-white\/30 w-full h-full animate-[shimmer_2s_infinite] transform -skew-x-12 translate-x-[-100%]\"><\/div>\n <\/div>\n <\/div>\n <p className=\"text-sm text-stone-400 mt-2 text-right font-medium mb-2\">Jour {result.daysPassed} <span className=\"text-stone-300\">\/ 65<\/span><\/p>\n <\/div>\n <\/div>\n\n {\/* TIMELINE *\/}\n <div className=\"bg-stone-50 rounded-2xl p-5 border border-stone-100 animate-pop-in delay-200 shadow-sm\">\n <h3 className=\"text-sm font-bold text-stone-400 uppercase mb-4 pl-1 flex items-center gap-2\"><Icons.Cat size={16} className=\"text-rose-300\" \/> Calendrier de gestation<\/h3>\n <div className=\"space-y-1\">\n {result.milestones.map((m, i) => (\n <div key={i} className={`group flex items-center gap-3 py-4 transition-all hover:bg-white rounded-xl px-3 -mx-2 hover:shadow-sm hover:scale-[1.01] duration-200 ${i !== result.milestones.length - 1 ? 'border-b border-stone-100 hover:border-transparent' : ''}`} style={{ animationDelay: `${0.3 + (i * 0.1)}s` }}>\n <div className={`w-3 h-3 rounded-full shrink-0 ring-2 ring-white shadow-sm transition-all duration-500 ${m.passed ? 'bg-stone-300' : 'bg-rose-400 animate-pulse scale-110'}`}><\/div>\n <div className=\"flex-1 min-w-0\">\n <p className={`text-base font-bold truncate transition-colors ${m.passed ? 'text-stone-400' : 'text-stone-700 group-hover:text-rose-600'}`}>{m.title}<\/p>\n <p className={`text-sm font-mono mt-0.5 ${m.passed ? 'text-stone-300' : 'text-rose-500'}`}>{formatDate(m.date)}<\/p>\n <\/div>\n <div className=\"shrink-0 opacity-0 group-hover:opacity-100 transition-all transform translate-x-2 group-hover:translate-x-0 duration-300\">\n <CalendarAction title={m.fullTitle} date={m.date} desc={m.desc} \/>\n <\/div>\n <\/div>\n ))}\n <\/div>\n <\/div>\n <\/div>\n )}\n <\/div>\n <\/div>\n\n <div className=\"text-center pb-4 animate-pop-in delay-500 mt-6\">\n <p className=\"text-sm text-stone-500 mb-2 font-medium\">Offert par<\/p>\n <a href=\"https:\/\/chatterie-du-serval.fr\/\" target=\"_blank\" rel=\"noopener noreferrer\" className=\"font-bold text-rose-800 hover:text-rose-600 transition-colors block mb-4 hover:scale-110 transform duration-300 inline-block text-base\">La Chatterie du Serval<\/a>\n <div className=\"flex justify-center gap-4\">\n <a href=\"https:\/\/chatterie-du-serval.fr\/\" target=\"_blank\" rel=\"noopener noreferrer\" className=\"p-3 bg-white rounded-full text-stone-400 hover:text-rose-500 hover:shadow-lg hover:-translate-y-1 hover:rotate-6 transition-all duration-300 border border-stone-100 group\"><Icons.Globe size={20} className=\"group-hover:animate-spin-slow\" \/><\/a>\n <a href=\"https:\/\/www.facebook.com\/chatterieduserval\/?locale=fr_FR\" target=\"_blank\" rel=\"noopener noreferrer\" className=\"p-3 bg-white rounded-full text-stone-400 hover:text-blue-600 hover:shadow-lg hover:-translate-y-1 hover:-rotate-6 transition-all duration-300 border border-stone-100\"><Icons.Facebook size={20} \/><\/a>\n <a href=\"https:\/\/www.instagram.com\/la.chatterie.du.serval\/?hl=fr\" target=\"_blank\" rel=\"noopener noreferrer\" className=\"p-3 bg-white rounded-full text-stone-400 hover:text-pink-600 hover:shadow-lg hover:-translate-y-1 hover:rotate-6 transition-all duration-300 border border-stone-100\"><Icons.Instagram size={20} \/><\/a>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(<CatPregnancyCalc \/>);\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Calculette de Mise Bas – Chatterie du Serval<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"jetpack_post_was_ever_published":false,"footnotes":""},"class_list":["post-1925","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/P62eiX-v3","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/chatterie-du-serval.fr\/index.php?rest_route=\/wp\/v2\/pages\/1925","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chatterie-du-serval.fr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/chatterie-du-serval.fr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/chatterie-du-serval.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chatterie-du-serval.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1925"}],"version-history":[{"count":5,"href":"https:\/\/chatterie-du-serval.fr\/index.php?rest_route=\/wp\/v2\/pages\/1925\/revisions"}],"predecessor-version":[{"id":1934,"href":"https:\/\/chatterie-du-serval.fr\/index.php?rest_route=\/wp\/v2\/pages\/1925\/revisions\/1934"}],"wp:attachment":[{"href":"https:\/\/chatterie-du-serval.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1925"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}