Quand et comment dire adieu au biberon : guide pour les parents

/* Garde-fous hauteur (<= 2000px) + accessibilité */ #outil-frise-sevrage-biberon .tool-shell { max-height: 2000px; } #outil-frise-sevrage-biberon .focus-ring:focus { outline: 3px solid rgba(59,130,246,.8); outline-offset: 2px; } #outil-frise-sevrage-biberon .soft-shadow { box-shadow: 0 10px 30px rgba(2,6,23,.08); } #outil-frise-sevrage-biberon .chip { border: 1px solid rgba(148,163,184,.55); } #outil-frise-sevrage-biberon .timeline-rail { background: linear-gradient(180deg, rgba(148,163,184,.35), rgba(148,163,184,.12)); } #outil-frise-sevrage-biberon .timeline-dot { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.4)); border: 2px solid rgba(59,130,246,.55); } #outil-frise-sevrage-biberon .card-grad { background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.92)); } #outil-frise-sevrage-biberon .print-area * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } @media (prefers-reduced-motion: reduce) { #outil-frise-sevrage-biberon * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } } /* API externe (facultative) — 100% gratuite, sans clé : Cette frise n’en a pas besoin. Exemple d’API publique utile si vous souhaitez afficher la date du jour/heure serveur : URL : https://worldtimeapi.org/api/timezone/Europe/Paris Exemple de réponse JSON : { « abbreviation »: « CEST », « client_ip »: « x.x.x.x », « datetime »: « 2026-05-25T14:12:34.123456+02:00 », « timezone »: « Europe/Paris », « utc_offset »: « +02:00 » } (Non utilisée par défaut pour rester ultra-performant et éviter toute dépendance réseau.) */ (function () { « use strict »; // ========================= // Textes (FR) facilement éditables // ========================= const I18N = { semaines: « Semaines », active: « active », modeEdition: { on: « Activé », off: « Désactivé » }, sections: { objectif: « Objectif », astuces: « Astuces », progres: « Signes que l’enfant progresse », planB: « Plan B (si régression) » }, boutons: { valider: « Marquer comme validée », encours: « Remettre « en cours » », reinit: « Réinitialiser », exporter: « Exporter (JSON) », imprimer: « Imprimer » }, statuts: { enCours: « En cours », validee: « Validée » }, ui: { progression: (ok, total) => `${ok}/${total} validées`, theme: (t) => t || « — », confirmationReinit: « Réinitialiser la frise (textes, statuts et notes) ? », exportTitre: « Export JSON — frise sevrage du biberon », toastCopieOk: « JSON copié dans le presse-papiers. », toastCopieKo: « Impossible de copier automatiquement. Le JSON s’affiche dans une fenêtre. » } }; // ========================= // Données de base (issues de votre fragment) // ========================= const DEFAULT_DATA = { version: 1, activeWeekId: « w1 », editMode: false, notes: «  », weeks: [ { id: « w1 », numero: 1, theme: « Départ en douceur », titre: « Semaine 1 — tasse à chaque repas + biberon limité », sousTitre: « On introduit la tasse systématiquement aux repas, sans tout bouleverser d’un coup. », statut: « enCours », objectif: « Proposer une tasse à chaque repas (eau ou lait selon l’âge) et limiter le biberon aux moments clés habituels. », astuces: [ « Choisissez une tasse simple (bec souple ou paille) et gardez-la identique toute la semaine. », « Rendez la tasse accessible : sur la table, au parc, dans le sac. », « Commencez quand l’enfant est calme (pas affamé à l’extrême). », « Félicitez l’essai, pas la quantité bue. » ], progres: [ « Il accepte de porter la tasse à la bouche, même quelques gorgées. », « Il réclame parfois la tasse spontanément. », « Moins de frustration lors des repas. » ], planB: [ « Si refus net : proposez la tasse en jeu (vide ou avec un fond d’eau) en dehors des repas. », « Si grosse colère : gardez le biberon, mais terminez par 1–2 gorgées à la tasse (micro-victoire). », « Si fatigue/angoisse : faites une pause 24–48h sans culpabiliser puis reprenez. » ] }, { id: « w2 », numero: 2, theme: « Un remplacement ciblé », titre: « Semaine 2 — remplacer le biberon du goûter », sousTitre: « On supprime un biberon « facile » et on renforce un petit rituel alternative. », statut: « enCours », objectif: « Remplacer le biberon du goûter par une tasse + une collation adaptée (selon âge et habitudes). », astuces: [ « Gardez le même horaire de goûter, changez seulement le contenant. », « Proposez un coin goûter (petite chaise, musique douce, livre). », « Si besoin, commencez par moitié tasse / moitié biberon sur 2–3 jours, puis 100% tasse. » ], progres: [ « Le goûter se passe sans réclamer systématiquement le biberon. », « Il boit davantage à la tasse qu’en semaine 1. », « Il se calme plus vite si on annonce « goûter à la tasse ». » ], planB: [ « Si régression : revenez à l’étape intermédiaire (moitié tasse / moitié biberon) pendant 48h. », « Si refus : changez la température (tiède/frais) ou la texture (eau vs lait selon recommandations). », « Si journée difficile : conservez le remplacement du goûter mais raccourcissez la durée (rituel plus simple). » ] }, { id: « w3 », numero: 3, theme: « Le matin, sans pression », titre: « Semaine 3 — remplacer le biberon du matin », sousTitre: « On transforme un moment « doudou » en routine du réveil plus autonome. », statut: « enCours », objectif: « Remplacer le biberon du matin par une tasse au petit-déjeuner, en gardant un cadre rassurant. », astuces: [ « Préparez la tasse avant le réveil : moins d’attente, moins de tensions. », « Ajoutez un repère : ouverture des volets, câlin, puis petit-déjeuner avec la tasse. », « Anticipez la faim : proposez une petite option solide (selon âge) rapidement. » ], progres: [ « Il accepte la tasse au réveil (même partiellement). », « Il réclame moins le biberon dès l’ouverture des yeux. », « Le petit-déjeuner se déroule plus sereinement. » ], planB: [ « Si réveils difficiles : gardez un câlin + eau à la tasse, puis petit-déj complet plus tard. », « Si refus total plusieurs jours : revenez 2 jours à « biberon + 2 gorgées tasse », puis retentez. », « Si maladie/poussée dentaire : mettez l’objectif en pause et reprenez quand ça va mieux. » ] }, { id: « w4 », numero: 4, theme: « Le grand final (en douceur) », titre: « Semaine 4 — rituel du coucher sans biberon », sousTitre: « On remplace l’association « biberon = endormissement » par un rituel rassurant. », statut: « enCours », objectif: « Retirer le biberon du coucher et installer un rituel constant (bain, histoire, câlin, berceuse). », astuces: [ « Décalez la boisson : tasse en fin de dîner, puis brossage de dents si applicable. », « Créez un rituel court et répétitif (5–15 min) : toujours le même ordre. », « Donnez un rôle à l’enfant : choisir le livre, éteindre la lumière, dire « bonne nuit ». » ], progres: [ « Il s’endort sans biberon (ou se rendort plus facilement). », « Les demandes de biberon diminuent en intensité et en fréquence. », « Le rituel devient prévisible et apaisant. » ], planB: [ « Si crise : proposez de l’eau à la tasse + câlin + retour au rituel (sans négocier longtemps). », « Si réveils nocturnes : conservez la même réponse (calme, brève, constante). », « Si gros stress familial : maintenez le rituel mais réduisez les exigences quelques jours. » ] } ] }; // ========================= // Stockage local // ========================= const STORAGE_KEY = « friseSevrageBiberon_v1 »; function loadState() { try { const raw = localStorage.getItem(STORAGE_KEY); if (!raw) return structuredClone(DEFAULT_DATA); const parsed = JSON.parse(raw); // Fusion légère pour compatibilité si nouvelles clés const merged = structuredClone(DEFAULT_DATA); Object.assign(merged, parsed); if (Array.isArray(parsed.weeks)) merged.weeks = parsed.weeks; return merged; } catch (e) { return structuredClone(DEFAULT_DATA); } } function saveState() { localStorage.setItem(STORAGE_KEY, JSON.stringify(state)); } // ========================= // DOM helpers // ========================= const $ = (sel) => document.querySelector(sel); const root = $(« #outil-frise-sevrage-biberon »); const elListeSemaines = root.querySelector(« #listeSemaines »); const elZoneDetails = root.querySelector(« #zoneDetails »); const elResumeProgression = root.querySelector(« #resumeProgression »); const elBadgeSemaine = root.querySelector(« #badgeSemaine »); const elBadgeTheme = root.querySelector(« #badgeTheme »); const elTitreSemaine = root.querySelector(« #titreSemaine »); const elSousTitre = root.querySelector(« #sousTitreSemaine »); const btnValider = root.querySelector(« #btnMarquerValide »); const btnEnCours = root.querySelector(« #btnMarquerEnCours »); const btnReinit = root.querySelector(« #btnReinitialiser »); const btnExporter = root.querySelector(« #btnExporterJSON »); const btnImprimer = root.querySelector(« #btnImprimer »); const btnToggleEdit = root.querySelector(« #toggleModeEdition »); const elNotes = root.querySelector(« #notesParents »); // ========================= // État // ========================= let state = loadState(); // ========================= // Rendu // ========================= function countValidees() { return state.weeks.filter(w => w.statut === « validee »).length; } function setActiveWeek(id) { state.activeWeekId = id; saveState(); render(); } function getActiveWeek() { return state.weeks.find(w => w.id === state.activeWeekId) || state.weeks[0]; } function statusPill(statut) { const base = « inline-flex items-center gap-2 rounded-full px-2.5 py-1 text-xs font-semibold border »; if (statut === « validee ») { return `${I18N.statuts.validee}`; } return `${I18N.statuts.enCours}`; } function escapeHTML(str) { return String(str) .replaceAll(« & », « & ») .replaceAll(«  », « > ») .replaceAll(‘ »‘, « " ») .replaceAll(« ‘ », « ' »); } function renderTimelineList() { const active = getActiveWeek(); elListeSemaines.innerHTML = state.weeks.map((w) => { const isActive = w.id === active.id; const ring = isActive ? « ring-2 ring-blue-500/40 border-blue-200 » : « border-slate-200 hover:border-slate-300 »; const bg = isActive ? « bg-blue-50/60 » : « bg-white »; const title = escapeHTML(w.titre); const theme = escapeHTML(w.theme || « — »); return `

${w.numero}

${theme}

${statusPill(w.statut)}

${title}

`; }).join(«  »); // Events elListeSemaines.querySelectorAll(« button[data-week] »).forEach(btn => { btn.addEventListener(« click », () => setActiveWeek(btn.getAttribute(« data-week »))); }); } function renderDetailCard(key, label, content, editable) { // content peut être string ou tableau const isArray = Array.isArray(content); const safeId = `field_${key}`; const display = isArray ? `

${ content.map(item => `
• ${escapeHTML(item)}
`).join(«  ») }

` : `

${escapeHTML(content)}

`; const editor = !editable ? «  » : (() => { const value = isArray ? content.join(« n ») : String(content || «  »); const hint = isArray ? « Une ligne = un point (liste) » : « Texte libre »; return ` `; })(); return `

${escapeHTML(label)}

Semaine ${getActiveWeek().numero}

${display}

${editor}

`; } function renderDetails() { const w = getActiveWeek(); elBadgeSemaine.textContent = `Semaine ${w.numero}`; elBadgeTheme.textContent = I18N.ui.theme(w.theme); elTitreSemaine.textContent = w.titre; elSousTitre.textContent = w.sousTitre; elZoneDetails.innerHTML = [ renderDetailCard(« objectif », I18N.sections.objectif, w.objectif, state.editMode), renderDetailCard(« astuces », I18N.sections.astuces, w.astuces, state.editMode), renderDetailCard(« progres », I18N.sections.progres, w.progres, state.editMode), renderDetailCard(« planB », I18N.sections.planB, w.planB, state.editMode) ].join(«  »); // Brancher l’édition si activée if (state.editMode) { elZoneDetails.querySelectorAll(« textarea[data-field] »).forEach(ta => { ta.addEventListener(« input », () => { const field = ta.getAttribute(« data-field »); const raw = ta.value; const wk = getActiveWeek(); const idx = state.weeks.findIndex(x => x.id === wk.id); // Champs liste vs texte if (field === « astuces » || field === « progres » || field === « planB ») { state.weeks[idx][field] = raw .split(« n ») .map(s => s.trim()) .filter(Boolean); } else { state.weeks[idx][field] = raw.trim(); } saveState(); // Rendu léger: on ne re-render pas tout à chaque frappe (reste lisible/perf). // On met à jour uniquement l’affichage du contenu au prochain changement de semaine, // mais l’impression/export prend déjà les données à jour. }); }); } // Boutons statut btnValider.disabled = w.statut === « validee »; btnEnCours.disabled = w.statut !== « validee »; btnValider.classList.toggle(« opacity-50 », btnValider.disabled); btnValider.classList.toggle(« cursor-not-allowed », btnValider.disabled); btnEnCours.classList.toggle(« opacity-50 », btnEnCours.disabled); btnEnCours.classList.toggle(« cursor-not-allowed », btnEnCours.disabled); } function renderHeaderProgress() { const ok = countValidees(); elResumeProgression.textContent = I18N.ui.progression(ok, state.weeks.length); } function renderEditToggle() { btnToggleEdit.setAttribute(« aria-pressed », state.editMode ? « true » : « false »); btnToggleEdit.textContent = state.editMode ? I18N.modeEdition.on : I18N.modeEdition.off; btnToggleEdit.classList.toggle(« bg-blue-600 », state.editMode); btnToggleEdit.classList.toggle(« text-white », state.editMode); btnToggleEdit.classList.toggle(« border-blue-600 », state.editMode); btnToggleEdit.classList.toggle(« bg-slate-50 », !state.editMode); btnToggleEdit.classList.toggle(« text-slate-900 », !state.editMode); } function renderNotes() { elNotes.value = state.notes || «  »; } function render() { renderTimelineList(); renderHeaderProgress(); renderEditToggle(); renderDetails(); renderNotes(); } // ========================= // Actions // ========================= btnValider.addEventListener(« click », () => { const w = getActiveWeek(); const idx = state.weeks.findIndex(x => x.id === w.id); state.weeks[idx].statut = « validee »; saveState(); render(); }); btnEnCours.addEventListener(« click », () => { const w = getActiveWeek(); const idx = state.weeks.findIndex(x => x.id === w.id); state.weeks[idx].statut = « enCours »; saveState(); render(); }); btnToggleEdit.addEventListener(« click », () => { state.editMode = !state.editMode; saveState(); render(); }); elNotes.addEventListener(« input », () => { state.notes = elNotes.value; saveState(); }); btnReinit.addEventListener(« click », () => { if (!confirm(I18N.ui.confirmationReinit)) return; state = structuredClone(DEFAULT_DATA); localStorage.removeItem(STORAGE_KEY); saveState(); render(); }); function copyToClipboard(text) { if (navigator.clipboard && window.isSecureContext) { return navigator.clipboard.writeText(text); } // Fallback return new Promise((resolve, reject) => { try { const ta = document.createElement(« textarea »); ta.value = text; ta.setAttribute(« readonly », «  »); ta.style.position = « fixed »; ta.style.left = « -9999px »; document.body.appendChild(ta); ta.select(); const ok = document.execCommand(« copy »); document.body.removeChild(ta); ok ? resolve() : reject(new Error(« copy failed »)); } catch (e) { reject(e); } }); } btnExporter.addEventListener(« click », async () => { const payload = { meta: { titre: I18N.ui.exportTitre, exporteLe: new Date().toISOString(), version: state.version }, frise: state }; const json = JSON.stringify(payload, null, 2); try { await copyToClipboard(json); alert(I18N.ui.toastCopieOk); } catch (e) { // Fenêtre de secours const w = window.open(«  », « _blank »); if (w) { w.document.write(« 

" + escapeHTML(json) + "

« ); w.document.close(); } else { alert(I18N.ui.toastCopieKo); } } }); btnImprimer.addEventListener(« click », () => { // Impression de la page: le bloc est déjà propre, sans images. window.print(); }); // ========================= // Init // ========================= // Sécurise une semaine active valide if (!state.weeks.some(w => w.id === state.activeWeekId)) { state.activeWeekId = state.weeks[0].id; } saveState(); render(); // Accessibilité : navigation clavier améliorée dans la colonne timeline elListeSemaines.addEventListener(« keydown », (e) => { const keys = [« ArrowDown », « ArrowUp », « Home », « End », « Enter »,  » « ]; if (!keys.includes(e.key)) return; const buttons = Array.from(elListeSemaines.querySelectorAll(« button[data-week] »)); const currentIndex = buttons.findIndex(b => b.getAttribute(« data-week ») === state.activeWeekId); let nextIndex = currentIndex; if (e.key === « ArrowDown ») nextIndex = Math.min(buttons.length – 1, currentIndex + 1); if (e.key === « ArrowUp ») nextIndex = Math.max(0, currentIndex – 1); if (e.key === « Home ») nextIndex = 0; if (e.key === « End ») nextIndex = buttons.length – 1; if ([« ArrowDown », « ArrowUp », « Home », « End »].includes(e.key)) { e.preventDefault(); const nextBtn = buttons[nextIndex]; nextBtn.focus(); setActiveWeek(nextBtn.getAttribute(« data-week »)); } if (e.key === « Enter » || e.key ===  » « ) { e.preventDefault(); const target = e.target.closest(« button[data-week] »); if (target) setActiveWeek(target.getAttribute(« data-week »)); } }); })();