Calculateur de date d’accouchement<\/title>\n <style>\n \/* \u2500\u2500 Reset \u2500\u2500 *\/\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n \/* \u2500\u2500 Variables \u2013 modifiez ici pour adapter \u00e0 votre charte \u2500\u2500 *\/\n :root {\n --font: system-ui, -apple-system, sans-serif;\n --radius-sm: 8px;\n --radius-md: 12px;\n --radius-lg: 16px;\n\n --color-bg: #ffffff;\n --color-bg-alt: #f5f5f3;\n --color-border: rgba(0,0,0,0.12);\n --color-border-md: rgba(0,0,0,0.22);\n --color-text: #1a1a1a;\n --color-muted: #6b6b6b;\n --color-hint: #9b9b9b;\n\n --color-primary: #1a1a1a;\n --color-primary-fg:#ffffff;\n\n --color-t1-bg: #e6f1fb;\n --color-t1-fg: #185fa5;\n --color-t2-bg: #eaf3de;\n --color-t2-fg: #3b6d11;\n --color-t3-bg: #faeeda;\n --color-t3-fg: #854f0b;\n }\n\n \/* \u2500\u2500 Page (optionnel \u2013 retirez si vous int\u00e9grez dans une page existante) \u2500\u2500 *\/\n body {\n font-family: var(--font);\n background: #f0ede8;\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem 1rem;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n WIDGET \u2013 tout ce qui suit peut \u00eatre\n copi\u00e9\/coll\u00e9 dans votre page existante\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n .dpa-widget {\n width: 100%;\n max-width: 600px;\n background: var(--color-bg);\n border-radius: var(--radius-lg);\n border: 0.5px solid var(--color-border);\n overflow: hidden;\n font-family: var(--font);\n }\n\n \/* En-t\u00eate *\/\n .dpa-header {\n padding: 1.5rem 1.5rem 1.25rem;\n border-bottom: 0.5px solid var(--color-border);\n }\n .dpa-header h2 {\n font-size: 20px;\n font-weight: 600;\n color: var(--color-text);\n margin-bottom: 4px;\n }\n .dpa-header p {\n font-size: 13px;\n color: var(--color-muted);\n }\n\n \/* Onglets *\/\n .dpa-tabs {\n display: flex;\n border-bottom: 0.5px solid var(--color-border);\n }\n .dpa-tab {\n flex: 1;\n padding: 11px 8px;\n font-size: 13px;\n font-family: var(--font);\n text-align: center;\n cursor: pointer;\n background: var(--color-bg-alt);\n color: var(--color-muted);\n border: none;\n border-right: 0.5px solid var(--color-border);\n transition: background 0.15s, color 0.15s;\n }\n .dpa-tab:last-child { border-right: none; }\n .dpa-tab.active {\n background: var(--color-bg);\n color: var(--color-text);\n font-weight: 500;\n }\n .dpa-tab:hover:not(.active) { background: #ebebeb; }\n\n \/* Corps *\/\n .dpa-body { padding: 1.25rem 1.5rem 1.5rem; }\n\n \/* Panneaux *\/\n .dpa-panel { display: none; }\n .dpa-panel.active { display: block; }\n\n \/* Champs *\/\n .dpa-field { margin-bottom: 1rem; }\n .dpa-field label {\n display: block;\n font-size: 13px;\n color: var(--color-muted);\n margin-bottom: 5px;\n }\n .dpa-field input,\n .dpa-field select {\n width: 100%;\n padding: 9px 12px;\n font-size: 15px;\n font-family: var(--font);\n border: 0.5px solid var(--color-border-md);\n border-radius: var(--radius-sm);\n background: var(--color-bg);\n color: var(--color-text);\n outline: none;\n transition: border-color 0.15s, box-shadow 0.15s;\n }\n .dpa-field input:focus,\n .dpa-field select:focus {\n border-color: var(--color-text);\n box-shadow: 0 0 0 3px rgba(0,0,0,0.07);\n }\n .dpa-row2 {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n }\n\n \/* Bouton *\/\n .dpa-btn {\n width: 100%;\n padding: 11px;\n font-size: 15px;\n font-weight: 500;\n font-family: var(--font);\n background: var(--color-primary);\n color: var(--color-primary-fg);\n border: none;\n border-radius: var(--radius-sm);\n cursor: pointer;\n margin-top: 4px;\n transition: opacity 0.15s;\n }\n .dpa-btn:hover { opacity: 0.82; }\n .dpa-btn:active { opacity: 0.7; transform: scale(0.99); }\n\n \/* R\u00e9sultats *\/\n .dpa-result {\n display: none;\n margin-top: 1.25rem;\n border: 0.5px solid var(--color-border);\n border-radius: var(--radius-md);\n overflow: hidden;\n }\n .dpa-result.show { display: block; }\n\n .dpa-result-top {\n background: var(--color-bg-alt);\n padding: 14px 18px;\n border-bottom: 0.5px solid var(--color-border);\n }\n .dpa-result-top .r-eyebrow {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.07em;\n color: var(--color-hint);\n margin-bottom: 4px;\n }\n .dpa-result-top .r-dpa {\n font-size: 26px;\n font-weight: 600;\n color: var(--color-text);\n }\n\n .dpa-result-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n }\n .dpa-stat {\n padding: 14px 18px;\n border-right: 0.5px solid var(--color-border);\n }\n .dpa-stat:last-child { border-right: none; }\n .dpa-stat .s-label {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--color-hint);\n margin-bottom: 5px;\n }\n .dpa-stat .s-val {\n font-size: 17px;\n font-weight: 500;\n color: var(--color-text);\n }\n .dpa-stat .s-sub {\n font-size: 12px;\n color: var(--color-muted);\n margin-top: 2px;\n }\n\n \/* Barre de progression *\/\n .dpa-progress {\n padding: 14px 18px;\n border-top: 0.5px solid var(--color-border);\n }\n .dpa-prog-labels {\n display: flex;\n justify-content: space-between;\n font-size: 12px;\n color: var(--color-muted);\n margin-bottom: 8px;\n }\n .dpa-prog-track {\n height: 6px;\n background: var(--color-bg-alt);\n border-radius: 3px;\n overflow: hidden;\n }\n .dpa-prog-fill {\n height: 100%;\n background: var(--color-primary);\n border-radius: 3px;\n width: 0%;\n transition: width 0.6s ease;\n }\n\n \/* Trimestres *\/\n .dpa-trimesters {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 10px;\n padding: 14px 18px;\n border-top: 0.5px solid var(--color-border);\n }\n .dpa-trim {\n padding: 10px 12px;\n border-radius: var(--radius-sm);\n border: 1.5px solid transparent;\n }\n .dpa-trim.t1 { background: var(--color-t1-bg); color: var(--color-t1-fg); }\n .dpa-trim.t2 { background: var(--color-t2-bg); color: var(--color-t2-fg); }\n .dpa-trim.t3 { background: var(--color-t3-bg); color: var(--color-t3-fg); }\n .dpa-trim.current { border-color: currentColor; }\n .dpa-trim .t-title { font-size: 12px; font-weight: 500; }\n .dpa-trim .t-range { font-size: 11px; opacity: 0.75; margin-top: 2px; }\n\n \/* Mention l\u00e9gale *\/\n .dpa-disclaimer {\n padding: 10px 18px 14px;\n font-size: 11px;\n color: var(--color-hint);\n border-top: 0.5px solid var(--color-border);\n line-height: 1.5;\n }\n\n \/* Responsive *\/\n @media (max-width: 480px) {\n .dpa-result-grid { grid-template-columns: 1fr 1fr; }\n .dpa-stat:nth-child(2) { border-right: none; }\n .dpa-stat:nth-child(3) {\n grid-column: 1 \/ -1;\n border-top: 0.5px solid var(--color-border);\n border-right: none;\n }\n .dpa-row2 { grid-template-columns: 1fr; }\n }\n <\/style>\n<\/head>\n<body>\n\n \n <div class=\"dpa-widget\">\n\n <div class=\"dpa-header\">\n <h2>Calculateur de date d’accouchement<\/h2>\n <p>Estimez votre date pr\u00e9vue d’accouchement (DPA)<\/p>\n <\/div>\n\n <div class=\"dpa-tabs\">\n <button class=\"dpa-tab active\" onclick=\"dpaSwitchTab(0)\">Derni\u00e8res r\u00e8gles<\/button>\n <button class=\"dpa-tab\" onclick=\"dpaSwitchTab(1)\">Date de conception<\/button>\n <button class=\"dpa-tab\" onclick=\"dpaSwitchTab(2)\">\u00c2ge gestationnel<\/button>\n <\/div>\n\n <div class=\"dpa-body\">\n\n \n <div class=\"dpa-panel active\" id=\"dpa-panel-0\">\n <div class=\"dpa-field\">\n <label for=\"dpa-lmp\">Premier jour des derni\u00e8res r\u00e8gles<\/label>\n <input type=\"date\" id=\"dpa-lmp\" \/>\n <\/div>\n <div class=\"dpa-field\">\n <label for=\"dpa-cycle\">Dur\u00e9e de votre cycle (jours)<\/label>\n <input type=\"number\" id=\"dpa-cycle\" value=\"28\" min=\"20\" max=\"45\" \/>\n <\/div>\n <\/div>\n\n \n <div class=\"dpa-panel\" id=\"dpa-panel-1\">\n <div class=\"dpa-field\">\n <label for=\"dpa-conc\">Date de conception estim\u00e9e<\/label>\n <input type=\"date\" id=\"dpa-conc\" \/>\n <\/div>\n <\/div>\n\n \n <div class=\"dpa-panel\" id=\"dpa-panel-2\">\n <div class=\"dpa-row2\">\n <div class=\"dpa-field\">\n <label for=\"dpa-gw\">Semaines de grossesse<\/label>\n <input type=\"number\" id=\"dpa-gw\" value=\"12\" min=\"1\" max=\"42\" \/>\n <\/div>\n <div class=\"dpa-field\">\n <label for=\"dpa-gd\">Jours suppl\u00e9mentaires<\/label>\n <input type=\"number\" id=\"dpa-gd\" value=\"0\" min=\"0\" max=\"6\" \/>\n <\/div>\n <\/div>\n <div class=\"dpa-field\">\n <label for=\"dpa-gatoday\">Date de l’\u00e9chographie<\/label>\n <input type=\"date\" id=\"dpa-gatoday\" \/>\n <\/div>\n <\/div>\n\n <button class=\"dpa-btn\" onclick=\"dpaCalculate()\">Calculer ma DPA<\/button>\n\n \n <div class=\"dpa-result\" id=\"dpa-result\">\n <div class=\"dpa-result-top\">\n <div class=\"r-eyebrow\">Date pr\u00e9vue d’accouchement<\/div>\n <div class=\"r-dpa\" id=\"dpa-r-date\">\u2014<\/div>\n <\/div>\n <div class=\"dpa-result-grid\">\n <div class=\"dpa-stat\">\n <div class=\"s-label\">Semaine actuelle<\/div>\n <div class=\"s-val\" id=\"dpa-r-week\">\u2014<\/div>\n <div class=\"s-sub\" id=\"dpa-r-week-sub\">\u2014<\/div>\n <\/div>\n <div class=\"dpa-stat\">\n <div class=\"s-label\">Jours restants<\/div>\n <div class=\"s-val\" id=\"dpa-r-days\">\u2014<\/div>\n <div class=\"s-sub\" id=\"dpa-r-days-sub\">\u2014<\/div>\n <\/div>\n <div class=\"dpa-stat\">\n <div class=\"s-label\">Conception estim\u00e9e<\/div>\n <div class=\"s-val\" id=\"dpa-r-conc\">\u2014<\/div>\n <div class=\"s-sub\">\u00b1 2 jours<\/div>\n <\/div>\n <\/div>\n <div class=\"dpa-progress\">\n <div class=\"dpa-prog-labels\">\n <span>D\u00e9but<\/span>\n <span id=\"dpa-r-pct\">\u2014<\/span>\n <span>DPA<\/span>\n <\/div>\n <div class=\"dpa-prog-track\">\n <div class=\"dpa-prog-fill\" id=\"dpa-prog-fill\"><\/div>\n <\/div>\n <\/div>\n <div class=\"dpa-trimesters\">\n <div class=\"dpa-trim t1\" id=\"dpa-trim1\">\n <div class=\"t-title\">1er trimestre<\/div>\n <div class=\"t-range\">Sem. 1 \u2013 13<\/div>\n <\/div>\n <div class=\"dpa-trim t2\" id=\"dpa-trim2\">\n <div class=\"t-title\">2e trimestre<\/div>\n <div class=\"t-range\">Sem. 14 \u2013 26<\/div>\n <\/div>\n <div class=\"dpa-trim t3\" id=\"dpa-trim3\">\n <div class=\"t-title\">3e trimestre<\/div>\n <div class=\"t-range\">Sem. 27 \u2013 40<\/div>\n <\/div>\n <\/div>\n <div class=\"dpa-disclaimer\">\n Cette estimation est donn\u00e9e \u00e0 titre indicatif. Consultez votre m\u00e9decin ou sage-femme pour une date confirm\u00e9e.\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n \n\n <script>\n \/* \u2500\u2500 Utilitaires \u2500\u2500 *\/\n const dpaMonths = ['janv.','f\u00e9vr.','mars','avr.','mai','juin','juil.','ao\u00fbt','sept.','oct.','nov.','d\u00e9c.'];\n function dpaFmt(d){ return d.getDate()+'\\u00a0'+dpaMonths[d.getMonth()]+'\\u00a0'+d.getFullYear(); }\n function dpaAdd(d,n){ const r=new Date(d); r.setDate(r.getDate()+n); return r; }\n function dpaPad(n){ return String(n).padStart(2,'0'); }\n function dpaIso(d){ return d.getFullYear()+'-'+dpaPad(d.getMonth()+1)+'-'+dpaPad(d.getDate()); }\n\n \/* \u2500\u2500 Init dates max \u2500\u2500 *\/\n const dpaToday = new Date(); dpaToday.setHours(0,0,0,0);\n document.getElementById('dpa-lmp').max = dpaIso(dpaToday);\n document.getElementById('dpa-conc').max = dpaIso(dpaToday);\n document.getElementById('dpa-gatoday').value = dpaIso(dpaToday);\n\n \/* \u2500\u2500 Onglets \u2500\u2500 *\/\n let dpaTab = 0;\n function dpaSwitchTab(i){\n document.querySelectorAll('.dpa-tab').forEach((t,j)=>t.classList.toggle('active',j===i));\n document.querySelectorAll('.dpa-panel').forEach((p,j)=>p.classList.toggle('active',j===i));\n dpaTab = i;\n document.getElementById('dpa-result').classList.remove('show');\n }\n\n \/* \u2500\u2500 Calcul \u2500\u2500 *\/\n function dpaCalculate(){\n let lmp;\n if(dpaTab === 0){\n const v = document.getElementById('dpa-lmp').value;\n if(!v){ alert('Veuillez entrer la date de vos derni\u00e8res r\u00e8gles.'); return; }\n const cycle = parseInt(document.getElementById('dpa-cycle').value) || 28;\n lmp = new Date(v); lmp.setHours(0,0,0,0);\n lmp = dpaAdd(lmp, -(cycle - 28));\n } else if(dpaTab === 1){\n const v = document.getElementById('dpa-conc').value;\n if(!v){ alert('Veuillez entrer la date de conception.'); return; }\n const c = new Date(v); c.setHours(0,0,0,0);\n lmp = dpaAdd(c, -14);\n } else {\n const gw = parseInt(document.getElementById('dpa-gw').value) || 0;\n const gd = parseInt(document.getElementById('dpa-gd').value) || 0;\n const tv = document.getElementById('dpa-gatoday').value;\n if(!tv){ alert(\"Veuillez entrer la date de l'\u00e9chographie.\"); return; }\n const echo = new Date(tv); echo.setHours(0,0,0,0);\n lmp = dpaAdd(echo, -(gw * 7 + gd));\n }\n\n const dpa = dpaAdd(lmp, 280);\n const conception = dpaAdd(lmp, 14);\n const elapsed = Math.floor((dpaToday - lmp) \/ 86400000);\n const weekNow = Math.floor(elapsed \/ 7);\n const dayNow = elapsed % 7;\n const daysLeft = Math.max(0, Math.floor((dpa - dpaToday) \/ 86400000));\n const pct = Math.min(100, Math.max(0, Math.round(elapsed \/ 280 * 100)));\n const trimester = weekNow < 14 ? 1 : weekNow < 27 ? 2 : 3;\n\n document.getElementById('dpa-r-date').textContent = dpaFmt(dpa);\n document.getElementById('dpa-r-week').textContent = weekNow > 0 ? weekNow + 'e sem.' : '< 1 sem.';\n document.getElementById('dpa-r-week-sub').textContent = dayNow + ' jour' + (dayNow > 1 ? 's' : '');\n document.getElementById('dpa-r-days').textContent = daysLeft;\n document.getElementById('dpa-r-days-sub').textContent = daysLeft > 0 ? 'avant le terme' : 'terme atteint';\n document.getElementById('dpa-r-conc').textContent = dpaFmt(conception);\n document.getElementById('dpa-r-pct').textContent = pct + '%';\n document.getElementById('dpa-prog-fill').style.width = pct + '%';\n\n ['dpa-trim1','dpa-trim2','dpa-trim3'].forEach((id,i)=>{\n document.getElementById(id).classList.toggle('current', i + 1 === trimester);\n });\n\n document.getElementById('dpa-result').classList.add('show');\n }\n <\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Calculateur de date d’accouchement Calculateur de date d’accouchement Estimez votre date pr\u00e9vue d’accouchement (DPA) Derni\u00e8res r\u00e8gles Date de conception \u00c2ge gestationnel Premier jour des derni\u00e8res r\u00e8gles Dur\u00e9e de votre cycle (jours) Date de conception estim\u00e9e Semaines de grossesse Jours suppl\u00e9mentaires Date de l’\u00e9chographie Calculer ma DPA Date pr\u00e9vue d’accouchement \u2014 Semaine actuelle \u2014 \u2014 Jours […]<\/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-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/arnaudberenguer.com\/index.php\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arnaudberenguer.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/arnaudberenguer.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/arnaudberenguer.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/arnaudberenguer.com\/index.php\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":1,"href":"https:\/\/arnaudberenguer.com\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":8,"href":"https:\/\/arnaudberenguer.com\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions\/8"}],"wp:attachment":[{"href":"https:\/\/arnaudberenguer.com\/index.php\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":6,"date":"2026-04-24T10:30:31","date_gmt":"2026-04-24T10:30:31","guid":{"rendered":"https:\/\/arnaudberenguer.com\/?page_id=6"},"modified":"2026-04-24T10:30:31","modified_gmt":"2026-04-24T10:30:31","slug":"6-2","status":"publish","type":"page","link":"https:\/\/arnaudberenguer.com\/index.php\/6-2\/","title":{"rendered":""},"content":{"rendered":"\n\n\n\n \n \n Calculateur de date d’accouchement<\/title>\n <style>\n \/* \u2500\u2500 Reset \u2500\u2500 *\/\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n \/* \u2500\u2500 Variables \u2013 modifiez ici pour adapter \u00e0 votre charte \u2500\u2500 *\/\n :root {\n --font: system-ui, -apple-system, sans-serif;\n --radius-sm: 8px;\n --radius-md: 12px;\n --radius-lg: 16px;\n\n --color-bg: #ffffff;\n --color-bg-alt: #f5f5f3;\n --color-border: rgba(0,0,0,0.12);\n --color-border-md: rgba(0,0,0,0.22);\n --color-text: #1a1a1a;\n --color-muted: #6b6b6b;\n --color-hint: #9b9b9b;\n\n --color-primary: #1a1a1a;\n --color-primary-fg:#ffffff;\n\n --color-t1-bg: #e6f1fb;\n --color-t1-fg: #185fa5;\n --color-t2-bg: #eaf3de;\n --color-t2-fg: #3b6d11;\n --color-t3-bg: #faeeda;\n --color-t3-fg: #854f0b;\n }\n\n \/* \u2500\u2500 Page (optionnel \u2013 retirez si vous int\u00e9grez dans une page existante) \u2500\u2500 *\/\n body {\n font-family: var(--font);\n background: #f0ede8;\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem 1rem;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n WIDGET \u2013 tout ce qui suit peut \u00eatre\n copi\u00e9\/coll\u00e9 dans votre page existante\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n .dpa-widget {\n width: 100%;\n max-width: 600px;\n background: var(--color-bg);\n border-radius: var(--radius-lg);\n border: 0.5px solid var(--color-border);\n overflow: hidden;\n font-family: var(--font);\n }\n\n \/* En-t\u00eate *\/\n .dpa-header {\n padding: 1.5rem 1.5rem 1.25rem;\n border-bottom: 0.5px solid var(--color-border);\n }\n .dpa-header h2 {\n font-size: 20px;\n font-weight: 600;\n color: var(--color-text);\n margin-bottom: 4px;\n }\n .dpa-header p {\n font-size: 13px;\n color: var(--color-muted);\n }\n\n \/* Onglets *\/\n .dpa-tabs {\n display: flex;\n border-bottom: 0.5px solid var(--color-border);\n }\n .dpa-tab {\n flex: 1;\n padding: 11px 8px;\n font-size: 13px;\n font-family: var(--font);\n text-align: center;\n cursor: pointer;\n background: var(--color-bg-alt);\n color: var(--color-muted);\n border: none;\n border-right: 0.5px solid var(--color-border);\n transition: background 0.15s, color 0.15s;\n }\n .dpa-tab:last-child { border-right: none; }\n .dpa-tab.active {\n background: var(--color-bg);\n color: var(--color-text);\n font-weight: 500;\n }\n .dpa-tab:hover:not(.active) { background: #ebebeb; }\n\n \/* Corps *\/\n .dpa-body { padding: 1.25rem 1.5rem 1.5rem; }\n\n \/* Panneaux *\/\n .dpa-panel { display: none; }\n .dpa-panel.active { display: block; }\n\n \/* Champs *\/\n .dpa-field { margin-bottom: 1rem; }\n .dpa-field label {\n display: block;\n font-size: 13px;\n color: var(--color-muted);\n margin-bottom: 5px;\n }\n .dpa-field input,\n .dpa-field select {\n width: 100%;\n padding: 9px 12px;\n font-size: 15px;\n font-family: var(--font);\n border: 0.5px solid var(--color-border-md);\n border-radius: var(--radius-sm);\n background: var(--color-bg);\n color: var(--color-text);\n outline: none;\n transition: border-color 0.15s, box-shadow 0.15s;\n }\n .dpa-field input:focus,\n .dpa-field select:focus {\n border-color: var(--color-text);\n box-shadow: 0 0 0 3px rgba(0,0,0,0.07);\n }\n .dpa-row2 {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n }\n\n \/* Bouton *\/\n .dpa-btn {\n width: 100%;\n padding: 11px;\n font-size: 15px;\n font-weight: 500;\n font-family: var(--font);\n background: var(--color-primary);\n color: var(--color-primary-fg);\n border: none;\n border-radius: var(--radius-sm);\n cursor: pointer;\n margin-top: 4px;\n transition: opacity 0.15s;\n }\n .dpa-btn:hover { opacity: 0.82; }\n .dpa-btn:active { opacity: 0.7; transform: scale(0.99); }\n\n \/* R\u00e9sultats *\/\n .dpa-result {\n display: none;\n margin-top: 1.25rem;\n border: 0.5px solid var(--color-border);\n border-radius: var(--radius-md);\n overflow: hidden;\n }\n .dpa-result.show { display: block; }\n\n .dpa-result-top {\n background: var(--color-bg-alt);\n padding: 14px 18px;\n border-bottom: 0.5px solid var(--color-border);\n }\n .dpa-result-top .r-eyebrow {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.07em;\n color: var(--color-hint);\n margin-bottom: 4px;\n }\n .dpa-result-top .r-dpa {\n font-size: 26px;\n font-weight: 600;\n color: var(--color-text);\n }\n\n .dpa-result-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n }\n .dpa-stat {\n padding: 14px 18px;\n border-right: 0.5px solid var(--color-border);\n }\n .dpa-stat:last-child { border-right: none; }\n .dpa-stat .s-label {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--color-hint);\n margin-bottom: 5px;\n }\n .dpa-stat .s-val {\n font-size: 17px;\n font-weight: 500;\n color: var(--color-text);\n }\n .dpa-stat .s-sub {\n font-size: 12px;\n color: var(--color-muted);\n margin-top: 2px;\n }\n\n \/* Barre de progression *\/\n .dpa-progress {\n padding: 14px 18px;\n border-top: 0.5px solid var(--color-border);\n }\n .dpa-prog-labels {\n display: flex;\n justify-content: space-between;\n font-size: 12px;\n color: var(--color-muted);\n margin-bottom: 8px;\n }\n .dpa-prog-track {\n height: 6px;\n background: var(--color-bg-alt);\n border-radius: 3px;\n overflow: hidden;\n }\n .dpa-prog-fill {\n height: 100%;\n background: var(--color-primary);\n border-radius: 3px;\n width: 0%;\n transition: width 0.6s ease;\n }\n\n \/* Trimestres *\/\n .dpa-trimesters {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 10px;\n padding: 14px 18px;\n border-top: 0.5px solid var(--color-border);\n }\n .dpa-trim {\n padding: 10px 12px;\n border-radius: var(--radius-sm);\n border: 1.5px solid transparent;\n }\n .dpa-trim.t1 { background: var(--color-t1-bg); color: var(--color-t1-fg); }\n .dpa-trim.t2 { background: var(--color-t2-bg); color: var(--color-t2-fg); }\n .dpa-trim.t3 { background: var(--color-t3-bg); color: var(--color-t3-fg); }\n .dpa-trim.current { border-color: currentColor; }\n .dpa-trim .t-title { font-size: 12px; font-weight: 500; }\n .dpa-trim .t-range { font-size: 11px; opacity: 0.75; margin-top: 2px; }\n\n \/* Mention l\u00e9gale *\/\n .dpa-disclaimer {\n padding: 10px 18px 14px;\n font-size: 11px;\n color: var(--color-hint);\n border-top: 0.5px solid var(--color-border);\n line-height: 1.5;\n }\n\n \/* Responsive *\/\n @media (max-width: 480px) {\n .dpa-result-grid { grid-template-columns: 1fr 1fr; }\n .dpa-stat:nth-child(2) { border-right: none; }\n .dpa-stat:nth-child(3) {\n grid-column: 1 \/ -1;\n border-top: 0.5px solid var(--color-border);\n border-right: none;\n }\n .dpa-row2 { grid-template-columns: 1fr; }\n }\n <\/style>\n<\/head>\n<body>\n\n \n <div class=\"dpa-widget\">\n\n <div class=\"dpa-header\">\n <h2>Calculateur de date d’accouchement<\/h2>\n <p>Estimez votre date pr\u00e9vue d’accouchement (DPA)<\/p>\n <\/div>\n\n <div class=\"dpa-tabs\">\n <button class=\"dpa-tab active\" onclick=\"dpaSwitchTab(0)\">Derni\u00e8res r\u00e8gles<\/button>\n <button class=\"dpa-tab\" onclick=\"dpaSwitchTab(1)\">Date de conception<\/button>\n <button class=\"dpa-tab\" onclick=\"dpaSwitchTab(2)\">\u00c2ge gestationnel<\/button>\n <\/div>\n\n <div class=\"dpa-body\">\n\n \n <div class=\"dpa-panel active\" id=\"dpa-panel-0\">\n <div class=\"dpa-field\">\n <label for=\"dpa-lmp\">Premier jour des derni\u00e8res r\u00e8gles<\/label>\n <input type=\"date\" id=\"dpa-lmp\" \/>\n <\/div>\n <div class=\"dpa-field\">\n <label for=\"dpa-cycle\">Dur\u00e9e de votre cycle (jours)<\/label>\n <input type=\"number\" id=\"dpa-cycle\" value=\"28\" min=\"20\" max=\"45\" \/>\n <\/div>\n <\/div>\n\n \n <div class=\"dpa-panel\" id=\"dpa-panel-1\">\n <div class=\"dpa-field\">\n <label for=\"dpa-conc\">Date de conception estim\u00e9e<\/label>\n <input type=\"date\" id=\"dpa-conc\" \/>\n <\/div>\n <\/div>\n\n \n <div class=\"dpa-panel\" id=\"dpa-panel-2\">\n <div class=\"dpa-row2\">\n <div class=\"dpa-field\">\n <label for=\"dpa-gw\">Semaines de grossesse<\/label>\n <input type=\"number\" id=\"dpa-gw\" value=\"12\" min=\"1\" max=\"42\" \/>\n <\/div>\n <div class=\"dpa-field\">\n <label for=\"dpa-gd\">Jours suppl\u00e9mentaires<\/label>\n <input type=\"number\" id=\"dpa-gd\" value=\"0\" min=\"0\" max=\"6\" \/>\n <\/div>\n <\/div>\n <div class=\"dpa-field\">\n <label for=\"dpa-gatoday\">Date de l’\u00e9chographie<\/label>\n <input type=\"date\" id=\"dpa-gatoday\" \/>\n <\/div>\n <\/div>\n\n <button class=\"dpa-btn\" onclick=\"dpaCalculate()\">Calculer ma DPA<\/button>\n\n \n <div class=\"dpa-result\" id=\"dpa-result\">\n <div class=\"dpa-result-top\">\n <div class=\"r-eyebrow\">Date pr\u00e9vue d’accouchement<\/div>\n <div class=\"r-dpa\" id=\"dpa-r-date\">\u2014<\/div>\n <\/div>\n <div class=\"dpa-result-grid\">\n <div class=\"dpa-stat\">\n <div class=\"s-label\">Semaine actuelle<\/div>\n <div class=\"s-val\" id=\"dpa-r-week\">\u2014<\/div>\n <div class=\"s-sub\" id=\"dpa-r-week-sub\">\u2014<\/div>\n <\/div>\n <div class=\"dpa-stat\">\n <div class=\"s-label\">Jours restants<\/div>\n <div class=\"s-val\" id=\"dpa-r-days\">\u2014<\/div>\n <div class=\"s-sub\" id=\"dpa-r-days-sub\">\u2014<\/div>\n <\/div>\n <div class=\"dpa-stat\">\n <div class=\"s-label\">Conception estim\u00e9e<\/div>\n <div class=\"s-val\" id=\"dpa-r-conc\">\u2014<\/div>\n <div class=\"s-sub\">\u00b1 2 jours<\/div>\n <\/div>\n <\/div>\n <div class=\"dpa-progress\">\n <div class=\"dpa-prog-labels\">\n <span>D\u00e9but<\/span>\n <span id=\"dpa-r-pct\">\u2014<\/span>\n <span>DPA<\/span>\n <\/div>\n <div class=\"dpa-prog-track\">\n <div class=\"dpa-prog-fill\" id=\"dpa-prog-fill\"><\/div>\n <\/div>\n <\/div>\n <div class=\"dpa-trimesters\">\n <div class=\"dpa-trim t1\" id=\"dpa-trim1\">\n <div class=\"t-title\">1er trimestre<\/div>\n <div class=\"t-range\">Sem. 1 \u2013 13<\/div>\n <\/div>\n <div class=\"dpa-trim t2\" id=\"dpa-trim2\">\n <div class=\"t-title\">2e trimestre<\/div>\n <div class=\"t-range\">Sem. 14 \u2013 26<\/div>\n <\/div>\n <div class=\"dpa-trim t3\" id=\"dpa-trim3\">\n <div class=\"t-title\">3e trimestre<\/div>\n <div class=\"t-range\">Sem. 27 \u2013 40<\/div>\n <\/div>\n <\/div>\n <div class=\"dpa-disclaimer\">\n Cette estimation est donn\u00e9e \u00e0 titre indicatif. Consultez votre m\u00e9decin ou sage-femme pour une date confirm\u00e9e.\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n \n\n <script>\n \/* \u2500\u2500 Utilitaires \u2500\u2500 *\/\n const dpaMonths = ['janv.','f\u00e9vr.','mars','avr.','mai','juin','juil.','ao\u00fbt','sept.','oct.','nov.','d\u00e9c.'];\n function dpaFmt(d){ return d.getDate()+'\\u00a0'+dpaMonths[d.getMonth()]+'\\u00a0'+d.getFullYear(); }\n function dpaAdd(d,n){ const r=new Date(d); r.setDate(r.getDate()+n); return r; }\n function dpaPad(n){ return String(n).padStart(2,'0'); }\n function dpaIso(d){ return d.getFullYear()+'-'+dpaPad(d.getMonth()+1)+'-'+dpaPad(d.getDate()); }\n\n \/* \u2500\u2500 Init dates max \u2500\u2500 *\/\n const dpaToday = new Date(); dpaToday.setHours(0,0,0,0);\n document.getElementById('dpa-lmp').max = dpaIso(dpaToday);\n document.getElementById('dpa-conc').max = dpaIso(dpaToday);\n document.getElementById('dpa-gatoday').value = dpaIso(dpaToday);\n\n \/* \u2500\u2500 Onglets \u2500\u2500 *\/\n let dpaTab = 0;\n function dpaSwitchTab(i){\n document.querySelectorAll('.dpa-tab').forEach((t,j)=>t.classList.toggle('active',j===i));\n document.querySelectorAll('.dpa-panel').forEach((p,j)=>p.classList.toggle('active',j===i));\n dpaTab = i;\n document.getElementById('dpa-result').classList.remove('show');\n }\n\n \/* \u2500\u2500 Calcul \u2500\u2500 *\/\n function dpaCalculate(){\n let lmp;\n if(dpaTab === 0){\n const v = document.getElementById('dpa-lmp').value;\n if(!v){ alert('Veuillez entrer la date de vos derni\u00e8res r\u00e8gles.'); return; }\n const cycle = parseInt(document.getElementById('dpa-cycle').value) || 28;\n lmp = new Date(v); lmp.setHours(0,0,0,0);\n lmp = dpaAdd(lmp, -(cycle - 28));\n } else if(dpaTab === 1){\n const v = document.getElementById('dpa-conc').value;\n if(!v){ alert('Veuillez entrer la date de conception.'); return; }\n const c = new Date(v); c.setHours(0,0,0,0);\n lmp = dpaAdd(c, -14);\n } else {\n const gw = parseInt(document.getElementById('dpa-gw').value) || 0;\n const gd = parseInt(document.getElementById('dpa-gd').value) || 0;\n const tv = document.getElementById('dpa-gatoday').value;\n if(!tv){ alert(\"Veuillez entrer la date de l'\u00e9chographie.\"); return; }\n const echo = new Date(tv); echo.setHours(0,0,0,0);\n lmp = dpaAdd(echo, -(gw * 7 + gd));\n }\n\n const dpa = dpaAdd(lmp, 280);\n const conception = dpaAdd(lmp, 14);\n const elapsed = Math.floor((dpaToday - lmp) \/ 86400000);\n const weekNow = Math.floor(elapsed \/ 7);\n const dayNow = elapsed % 7;\n const daysLeft = Math.max(0, Math.floor((dpa - dpaToday) \/ 86400000));\n const pct = Math.min(100, Math.max(0, Math.round(elapsed \/ 280 * 100)));\n const trimester = weekNow < 14 ? 1 : weekNow < 27 ? 2 : 3;\n\n document.getElementById('dpa-r-date').textContent = dpaFmt(dpa);\n document.getElementById('dpa-r-week').textContent = weekNow > 0 ? weekNow + 'e sem.' : '< 1 sem.';\n document.getElementById('dpa-r-week-sub').textContent = dayNow + ' jour' + (dayNow > 1 ? 's' : '');\n document.getElementById('dpa-r-days').textContent = daysLeft;\n document.getElementById('dpa-r-days-sub').textContent = daysLeft > 0 ? 'avant le terme' : 'terme atteint';\n document.getElementById('dpa-r-conc').textContent = dpaFmt(conception);\n document.getElementById('dpa-r-pct').textContent = pct + '%';\n document.getElementById('dpa-prog-fill').style.width = pct + '%';\n\n ['dpa-trim1','dpa-trim2','dpa-trim3'].forEach((id,i)=>{\n document.getElementById(id).classList.toggle('current', i + 1 === trimester);\n });\n\n document.getElementById('dpa-result').classList.add('show');\n }\n <\/script>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Calculateur de date d’accouchement Calculateur de date d’accouchement Estimez votre date pr\u00e9vue d’accouchement (DPA) Derni\u00e8res r\u00e8gles Date de conception \u00c2ge gestationnel Premier jour des derni\u00e8res r\u00e8gles Dur\u00e9e de votre cycle (jours) Date de conception estim\u00e9e Semaines de grossesse Jours suppl\u00e9mentaires Date de l’\u00e9chographie Calculer ma DPA Date pr\u00e9vue d’accouchement \u2014 Semaine actuelle \u2014 \u2014 Jours […]<\/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-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/arnaudberenguer.com\/index.php\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arnaudberenguer.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/arnaudberenguer.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/arnaudberenguer.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/arnaudberenguer.com\/index.php\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":1,"href":"https:\/\/arnaudberenguer.com\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":8,"href":"https:\/\/arnaudberenguer.com\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions\/8"}],"wp:attachment":[{"href":"https:\/\/arnaudberenguer.com\/index.php\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}